/* FIRSTPROF 2026-10-12 — native viewport trial (Bodysite + mobile Orion).
 * Applied AFTER theme.css and user.css. No changes to checkout shipping JS.
 * Keep category branch as a real LEFT column on all narrow viewports.
 */

/* Bodysite helper output is inserted below the native product purchase form. */
.product__cart > .fp-bodysite {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin-top: 18px;
    overflow-wrap: anywhere;
}
.fp-bodysite[hidden], .fp-bodysite:empty { display: none !important; }
.fp-bodysite img, .fp-bodysite video, .fp-bodysite iframe { max-width: 100%; }
.fp-bodysite table { max-width: 100%; }

@media (max-width: 820px) {
    /* Remove the old font inflation created for the virtual 900px viewport.
       Variable names are part of Orion's existing typography system. */
    html.fp-mobile-device {
        font-size: 16px !important;
        --title-font-size: 27px;
        --headline-font-size: 24px;
        --subtitle-font-size: 20px;
        --mid-font-size: 18px;
        --name-font-size: 16px;
        --text-font-size: 16px;
    }
    .frame__container { min-width: 0; }
    .frame__center, .content, .layout-category__content-column,
    .product__grid, .product__card, .product__cart { min-width: 0; }

    /* Normal mobile header. In Webasyst phones render the custom fifth header.
       Old overrides assumed a 900px layout and would overflow at 360/390px. */
    html.fp-mobile-device .header-mobile-five { padding: 0 0 10px !important; }
    html.fp-mobile-device .header-mobile-five .frame__container {
        padding-inline: 14px !important;
        width: 100% !important;
    }
    html.fp-mobile-device .fp-mobile-header__utility {
        gap: 8px !important;
        min-height: 40px !important;
        padding: 4px 0 !important;
    }
    html.fp-mobile-device .fp-mobile-header__city .fp-city-select {
        font-size: 14px !important;
        min-width: 0 !important;
    }
    html.fp-mobile-device .fp-mobile-header__profile {
        gap: 5px !important;
        font-size: 13px !important;
    }
    html.fp-mobile-device .fp-mobile-header__main {
        display: grid !important;
        grid-template-columns: minmax(45px, 1fr) minmax(0, 2fr) minmax(45px, 1fr) !important;
        gap: 7px !important;
        min-height: 64px !important;
        width: 100%;
        margin: 0 !important;
    }
    html.fp-mobile-device .header-mobile-five__top > :not(:last-child) { margin-right: 0 !important; }
    html.fp-mobile-device .fp-mobile-header__catalog,
    html.fp-mobile-device .fp-mobile-header__cart {
        min-width: 0 !important;
        gap: 4px !important;
        font-size: 12px !important;
    }
    html.fp-mobile-device .fp-mobile-header__catalog svg,
    html.fp-mobile-device .fp-mobile-header__cart svg,
    html.fp-mobile-device .fp-mobile-header__profile svg {
        width: 23px !important;
        height: 23px !important;
    }
    html.fp-mobile-device .fp-mobile-header__logo {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 195px !important;
        justify-self: center !important;
    }
    html.fp-mobile-device .fp-mobile-header__logo a,
    html.fp-mobile-device .fp-mobile-header__logo img,
    html.fp-mobile-device .fp-mobile-header__logo svg {
        display: block;
        max-width: 100% !important;
        width: auto;
        height: auto;
        max-height: 61px !important;
        margin-inline: auto;
    }
    html.fp-mobile-device .fp-mobile-header__search input,
    html.fp-mobile-device .fp-mobile-header__search [class*="search"] input {
        min-height: 44px !important;
        font-size: 16px !important;
    }
    html.fp-mobile-device .js-popup-catalog-mobile .popup-two__wrapper {
        width: min(320px, 88vw) !important;
        max-width: 88vw !important;
    }
    html.fp-mobile-device .js-popup-catalog-mobile .catalog-mobile-one__tab,
    html.fp-mobile-device .js-popup-catalog-mobile .catalog-mobile-one__region,
    html.fp-mobile-device .js-popup-catalog-mobile .catalog-mobile-one__subtitle {
        font-size: 15px !important;
    }

    /* Preserve the client's category-navigation requirement. This specific
       rule overrides the old `html.fp-mobile-device` 166px/23%-sidebar layout. */
    .layout-category__grid.fp-has-mobile-branch,
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch {
        display: grid !important;
        grid-template-columns: clamp(104px, 31%, 144px) minmax(0, 1fr) !important;
        align-items: start !important;
        column-gap: 10px !important;
        margin-top: 14px !important;
    }
    .layout-category__grid.fp-has-mobile-branch > .fp-mobile-category-sidebar,
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch > .fp-mobile-category-sidebar {
        display: block !important;
        min-width: 0 !important;
    }
    .layout-category__grid.fp-has-mobile-branch > .layout-category__sidebar { display: none !important; }
    .layout-category__grid.fp-has-mobile-branch > .layout-category__content-column {
        min-width: 0 !important;
        max-width: 100% !important;
    }
    .layout-category__grid.fp-has-mobile-branch .layout-thumbs__thumbs,
    .layout-category__grid.fp-has-mobile-branch .layout-thumbs__thumbs.is-thumbs,
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .layout-thumbs__thumbs.is-thumbs {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
    .layout-category__grid.fp-has-mobile-branch .layout-thumbs__thumbs > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }
    html.fp-mobile-device .fp-mobile-category-sidebar .sidebar-categories__title {
        font-size: 14px !important;
        line-height: 1.3 !important;
    }
    html.fp-mobile-device .fp-mobile-category-sidebar .sidebar-categories__tab-link {
        min-height: 40px !important;
        padding: 9px 7px !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
        overflow-wrap: anywhere !important;
    }
    .layout-category__controls-wrapper,
    .layout-category__controls { min-width: 0 !important; }
    .layout-category__grid.fp-has-mobile-branch .layout-category__controls { gap: 6px !important; }
    html.fp-mobile-device .layout-thumbs .product-three__name {
        font-size: 14px !important;
        line-height: 1.35 !important;
        overflow-wrap: anywhere;
    }
    html.fp-mobile-device .layout-thumbs .product-three__price,
    html.fp-mobile-device .layout-thumbs .product-three__compact-price { font-size: 18px !important; }
    html.fp-mobile-device .layout-thumbs .product-three__submit {
        padding-inline: 8px !important;
        font-size: 14px !important;
        min-height: 42px !important;
    }

    /* Homepage blocks: keep 2 categories / 3 tags, scale pictures down. */
    html.fp-mobile-device .shop_categories__list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    html.fp-mobile-device .shop_categories__list > * { min-width: 0 !important; }
    html.fp-mobile-device .tags__wrapper {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }
    html.fp-mobile-device .shop_advantages .categorycard-two { max-width: 150px !important; }
    html.fp-mobile-device .shop_advantages .categorycard-two__image-wrapper {
        width: min(32vw, 138px) !important;
        height: min(32vw, 138px) !important;
    }
    html.fp-mobile-device .shop_advantages .categorycard-two__label {
        font-size: 15px !important;
        line-height: 1.3 !important;
    }

    /* Product gallery and purchase: a real phone needs vertical stacking.
       Keep WB/Ozon, own-price card, Yandex Split, native submit and swipe. */
    html.fp-mobile-device .layout-product > section.product.frame > .frame__container {
        padding-inline: 14px !important;
    }
    .product__grid { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
    .product-gallery-one__single img,
    .product-gallery-one__image img,
    html.fp-mobile-device .product-gallery-one__single img,
    html.fp-mobile-device .product-gallery-one__image img {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: min(78vw, 350px) !important;
        object-fit: contain !important;
    }
    .product-gallery-one__gallery-wrapper,
    html.fp-mobile-device .product-gallery-one__gallery-wrapper { max-width: 100% !important; }
    .product-purchase__purchase,
    html.fp-mobile-device .product-purchase__purchase {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        padding: 12px !important;
    }
    .product-purchase__purchase > *,
    html.fp-mobile-device .product-purchase__purchase > * {
        grid-column: 1 / -1 !important;
        min-width: 0 !important;
    }
    .product-purchase .price-one.fp-product-own-price,
    html.fp-mobile-device .product-purchase .price-one.fp-product-own-price {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        padding: 12px 14px !important;
        height: auto !important;
    }
    html.fp-mobile-device .product-purchase .price-one.fp-product-own-price::before { font-size: 14px !important; }
    html.fp-mobile-device .product-purchase .price-one.fp-product-own-price .price-one__price { font-size: 1.8em !important; }
    .product-purchase__buttons,
    html.fp-mobile-device .product-purchase__buttons {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }
    .product-purchase__purchase-wrapper,
    html.fp-mobile-device .product-purchase__purchase-wrapper {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        align-items: stretch !important;
    }
    .product-purchase__submit,
    html.fp-mobile-device .product-purchase__submit {
        width: 100% !important;
        height: auto !important;
        min-height: 48px !important;
        font-size: 16px !important;
    }
    html.fp-mobile-device .product-purchase .repricer-marketplaces__title { font-size: 14px !important; }
    html.fp-mobile-device .product-purchase .repricer-marketplaces__name,
    html.fp-mobile-device .product-purchase .repricer-marketplaces__price { font-size: 15px !important; }
    html.fp-mobile-device .product-purchase .repricer-marketplaces__item {
        padding: 9px 8px !important;
        min-height: 48px !important;
        gap: 5px !important;
        flex-wrap: wrap !important;
    }
    html.fp-mobile-device .repricer-marketplaces__items {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    html.fp-mobile-device .fp-product-crossselling .frame__container { padding-inline: 14px !important; }
    html.fp-mobile-device .fp-product-crossselling .product-carousel__slide {
        width: calc((100% - 12px) / 2) !important;
        flex: 0 0 calc((100% - 12px) / 2) !important;
        max-width: none !important;
    }
    html.fp-mobile-device .fp-product-crossselling .product-three__name { font-size: 14px !important; }
    html.fp-mobile-device .fp-product-crossselling .product-three__price,
    html.fp-mobile-device .fp-product-crossselling .product-three__compact-price { font-size: 17px !important; }
    html.fp-mobile-device .fp-product-crossselling .product-three__submit { font-size: 14px !important; }
    .fp-bodysite { margin-top: 14px !important; }

    /* Native Checkout 2 is intentionally NOT reconfigured here: one cart tile
       per narrow row, ordinary editable input sizes, same JS, variant selection. */
    html.fp-mobile-device .layout-order .wa-order-cart-wrapper .wa-products {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }
    html.fp-mobile-device .layout-order .wa-order-cart-wrapper .wa-products .wa-product { padding: 12px !important; }
    html.fp-mobile-device .layout-order .wa-order-cart-wrapper .wa-products .wa-product .wa-image-section img {
        width: 132px !important;
        min-width: 0 !important;
        max-width: min(132px, 100%) !important;
        height: 132px !important;
        min-height: 0 !important;
        max-height: 132px !important;
        object-fit: contain !important;
    }
    html.fp-mobile-device .layout-order .wa-order-form-wrapper .wa-field-wrapper .wa-input,
    html.fp-mobile-device .layout-order .wa-order-form-wrapper .wa-field-wrapper .wa-select {
        max-width: 100% !important;
        font-size: 16px !important;
    }

    /* Pinned bottom menu no longer needs a virtual 90px tall bar. */
    html.fp-mobile-device .sticky-navigation { min-height: 65px !important; }
    html.fp-mobile-device .sticky-navigation__icon > svg { width: 24px !important; height: 24px !important; }
    html.fp-mobile-device .sticky-navigation__name { font-size: 12px !important; }
    html.fp-mobile-device body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; }
    html.fp-mobile-device .fp-city-confirm:not([hidden]) {
        margin: 7px 0 10px !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
    }
    html.fp-mobile-device .fp-city-confirm__actions button { font-size: 14px !important; }
}

@media (max-width: 600px) {
    /* The native pickup dialog uses two 100%-wide flex columns at <=760px;
       stack map and list vertically so the list is not offscreen. */
    #wa-shipping-pickup-dialog .wa-content-section {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    #wa-shipping-pickup-dialog .wa-map-section {
        flex: 0 0 34% !important;
        width: 100% !important;
        height: 34% !important;
        min-height: 130px !important;
        padding: 8px !important;
    }
    #wa-shipping-pickup-dialog .wa-sidebar-section {
        flex: 1 1 auto !important;
        width: 100% !important;
        height: 66% !important;
        min-height: 0 !important;
        padding: 10px !important;
    }
    #wa-shipping-pickup-dialog .wa-dialog-header .wa-header { font-size: 17px !important; }
    #wa-shipping-pickup-dialog .wa-filters-list { gap: 5px !important; }
    #wa-shipping-pickup-dialog .wa-filter-wrapper { min-height: 38px !important; padding: 8px !important; }
}

@media (max-width: 420px) {
    html.fp-mobile-device .fp-mobile-header__catalog > span,
    html.fp-mobile-device .fp-mobile-header__cart > span:not(.fp-mobile-header__cart-icon) { display: none !important; }
    html.fp-mobile-device .fp-mobile-header__catalog,
    html.fp-mobile-device .fp-mobile-header__cart { min-width: 44px !important; min-height: 44px !important; }
    html.fp-mobile-device .fp-mobile-header__logo { max-width: min(54vw, 184px) !important; }
    .layout-category__grid.fp-has-mobile-branch,
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch {
        grid-template-columns: clamp(102px, 32%, 124px) minmax(0, 1fr) !important;
        column-gap: 8px !important;
    }
    html.fp-mobile-device .fp-mobile-category-sidebar .sidebar-categories__tab-link { font-size: 12px !important; }
    html.fp-mobile-device .layout-thumbs .product-three__name { font-size: 13px !important; }
}


/* FIRSTPROF category FIX3 — compact toolbar, branch strictly to the left.
   Replaces the FIX2 block. Scope limited to category pages with left navigation. */
@media (max-width: 600px) {
    .layout-category.frame > .frame__container,
    .layout-category__breadcrumbs .frame__container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-inline: 10px !important;
        box-sizing: border-box !important;
    }
    .layout-category .frame__center,
    .layout-category__grid.fp-has-mobile-branch,
    .layout-category__grid.fp-has-mobile-branch > .layout-category__content-column,
    .layout-category__grid.fp-has-mobile-branch .layout-category__content,
    .layout-category__grid.fp-has-mobile-branch .layout-category__controls-wrapper,
    .layout-category__grid.fp-has-mobile-branch .layout-thumbs {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .layout-category__grid.fp-has-mobile-branch,
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch {
        display: grid !important;
        grid-template-columns: clamp(96px, 28%, 116px) minmax(0, 1fr) !important;
        column-gap: 7px !important;
        align-items: start !important;
        width: 100% !important;
        margin-top: 12px !important;
    }
    .layout-category__grid.fp-has-mobile-branch > .fp-mobile-category-sidebar {
        display: block !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        width: 100% !important;
    }
    .layout-category__grid.fp-has-mobile-branch > .layout-category__sidebar {
        display: none !important;
    }
    .layout-category__grid.fp-has-mobile-branch > .layout-category__content-column {
        display: block !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
    }
    /* Title used to grow beyond its 100–116px column and overlap sorting.
       Keep the full word readable, allowing two lines only on very small phones. */
    .layout-category__grid.fp-has-mobile-branch .fp-mobile-category-sidebar .sidebar-categories__title,
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .fp-mobile-category-sidebar .sidebar-categories__title {
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 7px !important;
        padding: 0 !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
        letter-spacing: -0.25px !important;
        white-space: normal !important;
    }
    .layout-category__grid.fp-has-mobile-branch .sidebar-categories__title svg {
        display: none !important; /* full heading fits without icon at 320px */
    }
    .layout-category__grid.fp-has-mobile-branch .sidebar-categories__title span {
        display: block !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
    }
    .layout-category__grid.fp-has-mobile-branch .sidebar-categories__tabs {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .layout-category__grid.fp-has-mobile-branch .fp-mobile-category-sidebar .sidebar-categories__tab-link,
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .fp-mobile-category-sidebar .sidebar-categories__tab-link {
        box-sizing: border-box !important;
        width: 100% !important;
        min-height: 34px !important;
        padding: 8px 6px !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
    }
    /* Two short 34px controls instead of stacked full-width 40/44px buttons.
       Hide only Orion's view toggle, not sorting/filter functionality. */
    .layout-category__grid.fp-has-mobile-branch .layout-category__controls {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr) !important;
        align-items: stretch !important;
        gap: 5px !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 0 8px !important;
    }
    .layout-category__grid.fp-has-mobile-branch .layout-category__controls > .product-view {
        display: none !important;
    }
    .layout-category__grid.fp-has-mobile-branch .layout-category__controls > .product-sorting,
    .layout-category__grid.fp-has-mobile-branch .layout-category__controls > .filter-button {
        display: flex !important;
        box-sizing: border-box !important;
        align-items: stretch !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 34px !important;
        min-height: 34px !important; /* overrides older user.css 44px minimum */
        max-height: 34px !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 11px !important;
        line-height: 1.1 !important;
    }
    .layout-category__grid.fp-has-mobile-branch .layout-category__controls > .product-sorting > .product-sorting__button {
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
    }
    .layout-category__grid.fp-has-mobile-branch .product-sorting__button-mobile {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 34px !important;
        box-sizing: border-box !important;
        padding: 3px !important;
        font-size: 11px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }
    .layout-category__grid.fp-has-mobile-branch .filter-button.layout-category__filters-button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        padding: 3px !important;
        white-space: nowrap !important;
    }
    .layout-category__grid.fp-has-mobile-branch .product-sorting__button-mobile .icon-sorting,
    .layout-category__grid.fp-has-mobile-branch .filter-button .icon-filter {
        display: block !important;
        flex: 0 0 12px !important;
        width: 12px !important;
        height: 12px !important;
        margin: 0 !important;
    }
    .layout-category__grid.fp-has-mobile-branch .product-sorting__dropdown-wrapper {
        left: 0 !important;
        right: auto !important;
        width: min(220px, calc(100vw - 150px)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 24px) !important;
        box-sizing: border-box !important;
    }
    .layout-category__grid.fp-has-mobile-branch .layout-thumbs,
    .layout-category__grid.fp-has-mobile-branch .layout-thumbs__thumbs,
    .layout-category__grid.fp-has-mobile-branch .layout-thumbs__thumbs.is-thumbs {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    .layout-category__grid.fp-has-mobile-branch .layout-thumbs__thumbs > *,
    .layout-category__grid.fp-has-mobile-branch .layout-thumbs__thumbs .product-three,
    .layout-category__grid.fp-has-mobile-branch .layout-thumbs__thumbs .product-three__top,
    .layout-category__grid.fp-has-mobile-branch .layout-thumbs__thumbs .product-three__content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .layout-category__grid.fp-has-mobile-branch .layout-thumbs__thumbs img {
        max-width: 100% !important;
    }
}


/* ================================================================
   FIRSTPROF / Orion: compact real-mobile layout, trial v2 (12 Oct 2026)
   Visual-only layer above FIX4; DOES NOT change checkout/shipping logic.
   Keep category navigation LEFT. Do not use zoom or hide page overflow.
   ================================================================ */
@media (max-width: 600px) {
    /* Keep a native mobile viewport, but restore information density.
       15–16px body text; controls are still comfortably tappable. */
    html.fp-mobile-device {
        font-size: 15px !important;
        --title-font-size: 23px;
        --headline-font-size: 21px;
        --subtitle-font-size: 18px;
        --mid-font-size: 16px;
        --name-font-size: 15px;
        --text-font-size: 15px;
    }
    html.fp-mobile-device .frame__container { padding-inline: 12px !important; }
    html.fp-mobile-device .frame__center { padding-block: 14px !important; }
    html.fp-mobile-device .layout-category .frame__center { padding-top: 10px !important; }

    /* Header: utility + logo + search should not occupy half of the fold. */
    html.fp-mobile-device .header-mobile-five {
        padding: 0 0 7px !important;
    }
    html.fp-mobile-device .header-mobile-five .frame__container {
        padding-inline: 12px !important;
    }
    html.fp-mobile-device .fp-mobile-header__utility {
        min-height: 34px !important;
        padding: 2px 0 !important;
    }
    html.fp-mobile-device .fp-mobile-header__city .fp-city-select,
    html.fp-mobile-device .fp-mobile-header__profile { font-size: 12px !important; }
    html.fp-mobile-device .fp-mobile-header__main {
        min-height: 54px !important;
        grid-template-columns: minmax(42px,1fr) minmax(0,2.4fr) minmax(42px,1fr) !important;
        column-gap: 6px !important;
    }
    html.fp-mobile-device .fp-mobile-header__catalog,
    html.fp-mobile-device .fp-mobile-header__cart {
        min-height: 42px !important;
        min-width: 42px !important;
    }
    html.fp-mobile-device .fp-mobile-header__catalog svg,
    html.fp-mobile-device .fp-mobile-header__cart svg,
    html.fp-mobile-device .fp-mobile-header__profile svg {
        width: 21px !important;
        height: 21px !important;
    }
    html.fp-mobile-device .fp-mobile-header__logo { max-width: min(44vw, 168px) !important; }
    html.fp-mobile-device .fp-mobile-header__logo img,
    html.fp-mobile-device .fp-mobile-header__logo svg {
        max-width: 100% !important;
        max-height: 50px !important;
    }
    html.fp-mobile-device .header-mobile-five__bottom,
    html.fp-mobile-device .fp-mobile-header__search {
        margin-top: 3px !important;
    }
    html.fp-mobile-device .fp-mobile-header__search input,
    html.fp-mobile-device .fp-mobile-header__search [class*="search"] input {
        min-height: 40px !important;
        height: 40px !important;
        font-size: 16px !important; /* iOS: avoid focusing zoom */
    }
    html.fp-mobile-device .fp-sitewide-shipping-teaser__inner {
        min-height: 0 !important;
        gap: 7px !important;
        width: calc(100% - 24px) !important;
        padding: 6px 0 9px !important;
    }
    html.fp-mobile-device .fp-sitewide-shipping-teaser__mark {
        width: 24px !important;
        height: 24px !important;
        flex-basis: 24px !important;
    }
    html.fp-mobile-device .fp-sitewide-shipping-teaser__copy {
        gap: 2px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        white-space: normal !important;
    }
    html.fp-mobile-device .fp-sitewide-shipping-teaser__main { font-size: 12px !important; }
    html.fp-mobile-device .fp-sitewide-shipping-teaser__note { font-size: 10px !important; }
    html.fp-mobile-device .fp-sitewide-shipping-teaser__progress { left: 31px !important; }

    /* Generic content rhythm, headings and breadcrumb trails. */
    html.fp-mobile-device .layout-category__breadcrumbs,
    html.fp-mobile-device .product__breadcrumbs { margin-bottom: 6px !important; }
    html.fp-mobile-device .layout-category__breadcrumbs .frame__container { padding: 7px 12px !important; }
    html.fp-mobile-device .layout-category__name,
    html.fp-mobile-device .product__name {
        margin-bottom: 5px !important;
        font-size: 22px !important;
        line-height: 1.22 !important;
    }
    html.fp-mobile-device .layout-category .frame__center.is-top-20 { padding-top: 10px !important; }

    /* Category: fixed LEFT navigation, compact RIGHT products. The size of
       cards must be adjusted on the *actual* Orion product templates. */
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch {
        grid-template-columns: clamp(92px, 26%, 112px) minmax(0, 1fr) !important;
        column-gap: 8px !important;
        margin-top: 9px !important;
        align-items: start !important;
    }
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch > .fp-mobile-category-sidebar {
        grid-column: 1 !important;
        min-width: 0 !important;
    }
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch > .layout-category__content-column {
        grid-column: 2 !important;
        min-width: 0 !important;
    }
    html.fp-mobile-device .fp-mobile-category-sidebar .sidebar-categories__title {
        font-size: 11px !important;
        line-height: 1.25 !important;
        margin-bottom: 6px !important;
    }
    html.fp-mobile-device .fp-mobile-category-sidebar .sidebar-categories__tab-link {
        min-height: 32px !important;
        font-size: 12px !important;
        padding: 8px 6px !important;
        line-height: 1.3 !important;
        overflow-wrap: break-word !important;
    }
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .layout-category__controls {
        margin-bottom: 6px !important;
        gap: 5px !important;
        grid-template-columns: minmax(0,1fr) minmax(0,.85fr) !important;
    }
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .layout-category__controls > .product-sorting,
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .layout-category__controls > .filter-button,
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .product-sorting__button-mobile {
        min-height: 36px !important;
        height: 36px !important;
        max-height: 36px !important;
        font-size: 11px !important;
    }
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .layout-thumbs__thumbs {
        row-gap: 9px !important;
    }
    /* The active default is product-two; preserve support for alternate Orion
       product-one/three/six templates configurable in the theme. */
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .product-two,
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .product-one,
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .product-three,
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .product-six {
        min-width: 0 !important;
        max-width: 100% !important;
        border-radius: 9px !important;
    }
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .product-two__image-wrapper,
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .product-one__image-wrapper,
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .product-three__image-wrapper,
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .product-six__image-wrapper {
        --aspect-ratio: 1.32 !important; /* less empty square photo space */
        max-width: 100% !important;
    }
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .product-two__image.is-margins,
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .product-one__image.is-margins,
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .product-three__image.is-margins,
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .product-six__image.is-margins {
        padding: 9px !important;
    }
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .product-two__content,
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .product-one__content,
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .product-three__content,
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .product-six__content-wrapper {
        padding: 9px !important;
    }
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .product-two__name,
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .product-two__mobile-name,
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .product-one__name,
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .product-three__name,
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .product-six__name,
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .product-six__mobile-name {
        font-size: 13px !important;
        line-height: 1.32 !important;
        overflow-wrap: anywhere !important;
    }
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .product-two__footer,
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .product-three__form,
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .product-six__footer {
        padding-top: 5px !important;
    }
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .price-one__price,
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .price-two__price,
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .price-four__price {
        font-size: 17px !important;
        line-height: 1.2 !important;
    }
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .product-two__form {
        padding: 0 9px 9px !important;
    }
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .product-two__submit,
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .product-three__submit {
        min-height: 36px !important;
        padding: 5px 8px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    /* Product: photo should not push the price and add-to-cart far below. */
    html.fp-mobile-device .layout-product > section.product.frame > .frame__container {
        padding-inline: 12px !important;
    }
    html.fp-mobile-device .product__grid { gap: 10px !important; }
    html.fp-mobile-device .product__card > :not(:last-child) { margin-bottom: 9px !important; }
    html.fp-mobile-device .product-gallery-one__single img,
    html.fp-mobile-device .product-gallery-one__image img {
        min-height: 0 !important;
        max-height: min(70vw, 275px) !important;
    }
    html.fp-mobile-device .product-gallery-one__pagination.js-product-gallery-pagination {
        margin-top: 4px !important;
        min-height: 12px !important;
    }
    html.fp-mobile-device .product__card-footer { margin-top: 0 !important; }
    html.fp-mobile-device .product__summary { margin-top: 5px !important; }
    html.fp-mobile-device .product__summary-text { line-height: 1.45 !important; }
    html.fp-mobile-device .product-purchase__purchase {
        padding: 9px !important;
        gap: 8px !important;
        border-radius: 9px !important;
    }
    html.fp-mobile-device .product-purchase .price-one.fp-product-own-price {
        padding: 10px 12px !important;
    }
    html.fp-mobile-device .product-purchase .price-one.fp-product-own-price::before {
        font-size: 12px !important;
        margin-bottom: 2px !important;
    }
    html.fp-mobile-device .product-purchase .price-one.fp-product-own-price .price-one__price {
        font-size: 1.55em !important;
    }
    html.fp-mobile-device .product-purchase__submit { min-height: 44px !important; font-size: 15px !important; }
    html.fp-mobile-device .product-purchase .repricer-marketplaces__item {
        padding: 7px 8px !important;
        min-height: 42px !important;
    }
    html.fp-mobile-device .product-purchase .repricer-marketplaces__name,
    html.fp-mobile-device .product-purchase .repricer-marketplaces__price { font-size: 13px !important; }
    html.fp-mobile-device .product-purchase .repricer-marketplaces__title { font-size: 12px !important; }
    /* Preserve Bodysite's actual city/tariff output and all explanatory notes. */
    html.fp-mobile-device .product__cart > .fp-bodysite,
    html.fp-mobile-device .fp-bodysite { margin-top: 9px !important; }
    html.fp-mobile-device .fp-bodysite-estimate-note,
    html.fp-mobile-device .fp-bodysite-free-note {
        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    /* Checkout is still native Webasyst; only visual density, never payment or
       shipping state. Keep 16px input text to prevent iOS auto-zoom. */
    html.fp-mobile-device .layout-order .wa-order-cart-wrapper .wa-products .wa-product {
        padding: 10px !important;
    }
    html.fp-mobile-device .layout-order .wa-order-cart-wrapper .wa-products .wa-product .wa-image-section {
        min-height: 105px !important;
    }
    html.fp-mobile-device .layout-order .wa-order-cart-wrapper .wa-products .wa-product .wa-image-section img {
        width: 106px !important;
        height: 106px !important;
        max-width: 106px !important;
        max-height: 106px !important;
    }
    html.fp-mobile-device .layout-order .wa-order-form-wrapper .wa-step-section { margin-top: 17px !important; }
    html.fp-mobile-device .layout-order .wa-order-form-wrapper .wa-step-section > .wa-section-header > .wa-header,
    html.fp-mobile-device .layout-order .wa-order-form-wrapper .wa-step-section > .wa-section-header > .wa-contact-name {
        font-size: 18px !important;
    }
    html.fp-mobile-device .layout-order .wa-order-form-wrapper .wa-fields-group.line { gap: 9px !important; }
    html.fp-mobile-device .layout-order .wa-order-form-wrapper .wa-field-wrapper .wa-label {
        margin-bottom: 4px !important;
        font-size: 13px !important;
    }
    html.fp-mobile-device .layout-order .wa-order-form-wrapper .wa-field-wrapper .wa-input,
    html.fp-mobile-device .layout-order .wa-order-form-wrapper .wa-field-wrapper .wa-select,
    html.fp-mobile-device .layout-order .wa-order-form-wrapper .wa-dropdown > .wa-dropdown-toggle {
        min-height: 44px !important;
        padding: 9px 11px !important;
        font-size: 16px !important;
    }
    html.fp-mobile-device .layout-order .wa-order-form-wrapper .wa-field-wrapper .wa-textarea {
        min-height: 88px !important;
    }

    /* Homepage blocks, recommendations, pinned navigation. */
    html.fp-mobile-device .shop_categories__list { gap: 8px !important; }
    html.fp-mobile-device .shop_categories__list:not(:first-child) { margin-top: 12px !important; }
    html.fp-mobile-device .shop_advantages .categorycard-two {
        max-width: 135px !important;
    }
    html.fp-mobile-device .shop_advantages .categorycard-two__image-wrapper {
        width: min(30vw, 125px) !important;
        height: min(30vw, 125px) !important;
    }
    html.fp-mobile-device .shop_advantages .categorycard-two__label { font-size: 13px !important; }
    html.fp-mobile-device .tags__wrapper { gap: 5px !important; }
    html.fp-mobile-device .fp-product-crossselling .frame__container { padding-inline: 12px !important; }
    html.fp-mobile-device .fp-product-crossselling .product-carousel__slide {
        width: calc((100% - 9px) / 2) !important;
        flex-basis: calc((100% - 9px) / 2) !important;
    }
    html.fp-mobile-device .fp-product-crossselling .product-three__name { font-size: 13px !important; }
    html.fp-mobile-device .fp-product-crossselling .product-three__price,
    html.fp-mobile-device .fp-product-crossselling .product-three__compact-price { font-size: 16px !important; }
    html.fp-mobile-device .fp-product-crossselling .product-three__submit { min-height: 38px !important; font-size: 13px !important; }
    html.fp-mobile-device .sticky-navigation { min-height: 56px !important; }
    html.fp-mobile-device .sticky-navigation__icon > svg { width: 21px !important; height: 21px !important; }
    html.fp-mobile-device .sticky-navigation__name { font-size: 10px !important; margin-top: 2px !important; }
    html.fp-mobile-device body { padding-bottom: calc(62px + env(safe-area-inset-bottom,0px)) !important; }
}

/* Less aggressive compacting for small tablets (not desktops). */
@media (min-width: 601px) and (max-width: 820px) {
    html.fp-mobile-device .frame__center { padding-block: 22px !important; }
    html.fp-mobile-device .fp-mobile-header__main { min-height: 60px !important; }
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch {
        grid-template-columns: minmax(130px, 26%) minmax(0, 1fr) !important;
        column-gap: 12px !important;
    }
}

/* At intermediate widths, right-side cards would otherwise become huge.
   Display two readable cards to the RIGHT of the left category navigation. */
@media (min-width: 540px) and (max-width: 820px) {
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .layout-thumbs__thumbs.is-thumbs,
    .layout-category__grid.fp-has-mobile-branch .layout-thumbs__thumbs.is-thumbs {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        column-gap: 9px !important;
        row-gap: 12px !important;
    }
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .product-two__image-wrapper,
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .product-three__image-wrapper,
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .product-one__image-wrapper,
    html.fp-mobile-device .layout-category__grid.fp-has-mobile-branch .product-six__image-wrapper {
        --aspect-ratio: 1.14 !important;
    }
}

/* ============================================================
   FIRSTPROF / CHECKOUT NATIVE MOBILE TRIAL — 2026-10-12
   Applied ONLY at real CSS viewport <= 600px (phones on /order/).
   Catalog remains width=840: none of these media rules run there.
   Keep Webasyst checkout nodes/controllers and FP_SHIPPING untouched.
   ============================================================ */
@media (max-width: 600px) {
    /* Let Checkout 2 use one full-width column, regardless of older Orion
       card-tile overrides written for a virtual 840/900px mobile canvas. */
    html.fp-mobile-device .layout-order,
    html.fp-mobile-device .layout-order .frame__container,
    html.fp-mobile-device .layout-order .frame__center,
    html.fp-mobile-device .layout-order__page,
    html.fp-mobile-device .layout-order__column,
    html.fp-mobile-device .layout-order__section,
    html.fp-mobile-device .layout-order .wa-order,
    html.fp-mobile-device .layout-order .wa-order-cart-wrapper,
    html.fp-mobile-device .layout-order .wa-order-form-wrapper {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    html.fp-mobile-device .layout-order > .frame__container {
        width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    html.fp-mobile-device .layout-order .frame__center {
        padding-top: 14px !important;
        padding-bottom: 92px !important;
    }
    html.fp-mobile-device .layout-order__page {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px !important;
    }
    html.fp-mobile-device .layout-order__section-header {
        grid-template-columns: minmax(0,1fr) auto !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }
    html.fp-mobile-device .layout-order__subtitle {
        font-size: 19px !important;
        line-height: 1.3 !important;
    }
    html.fp-mobile-device .layout-order__clear {
        font-size: 12px !important;
        gap: 4px !important;
    }

    /* Preserve native cart-item controls and actions, but do not squeeze two
       complete products into the same phone row. */
    html.fp-mobile-device .layout-order .wa-order-cart-wrapper .wa-products {
        display: grid !important;
        grid-template-columns: minmax(0,1fr) !important;
        gap: 10px !important;
        min-width: 0 !important;
    }
    html.fp-mobile-device .layout-order .wa-order-cart-wrapper .wa-products .wa-product {
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 11px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
    }
    html.fp-mobile-device .layout-order .wa-order-cart-wrapper .wa-products .wa-product .wa-product-body {
        display: grid !important;
        grid-template-columns: 88px minmax(0,1fr) !important;
        grid-template-areas:
            "image details"
            "quantity price" !important;
        align-items: start !important;
        gap: 10px !important;
        min-width: 0 !important;
        height: auto !important;
    }
    html.fp-mobile-device .layout-order .wa-order-cart-wrapper .wa-products .wa-product .wa-product-body > .wa-column-image {
        grid-area: image !important;
        width: 88px !important;
        min-width: 0 !important;
        justify-content: flex-start !important;
    }
    html.fp-mobile-device .layout-order .wa-order-cart-wrapper .wa-products .wa-product .wa-product-body > .wa-column-details {
        grid-area: details !important;
        width: auto !important;
        min-width: 0 !important;
    }
    html.fp-mobile-device .layout-order .wa-order-cart-wrapper .wa-products .wa-product .wa-product-body > .wa-column-quantity {
        grid-area: quantity !important;
        min-width: 0 !important;
    }
    html.fp-mobile-device .layout-order .wa-order-cart-wrapper .wa-products .wa-product .wa-product-body > .wa-column-price {
        grid-area: price !important;
        min-width: 0 !important;
        width: auto !important;
        text-align: right !important;
    }
    html.fp-mobile-device .layout-order .wa-order-cart-wrapper .wa-products .wa-product .wa-image-section {
        width: 88px !important;
        min-height: 0 !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
    }
    html.fp-mobile-device .layout-order .wa-order-cart-wrapper .wa-products .wa-product .wa-image-section img {
        display: block !important;
        width: 88px !important;
        min-width: 0 !important;
        max-width: 88px !important;
        height: 88px !important;
        min-height: 0 !important;
        max-height: 88px !important;
        object-fit: contain !important;
    }
    html.fp-mobile-device .layout-order .wa-order-cart-wrapper .wa-products .wa-product .wa-details-section .wa-details .wa-name {
        font-size: 14px !important;
        line-height: 1.4 !important;
        overflow-wrap: anywhere !important;
    }
    html.fp-mobile-device .layout-order .wa-order-cart-wrapper .wa-products .wa-product .wa-details-section .wa-details .wa-sku,
    html.fp-mobile-device .layout-order .wa-order-cart-wrapper .wa-products .wa-product .wa-actions .wa-action {
        font-size: 12px !important;
    }
    html.fp-mobile-device .layout-order .wa-order-cart-wrapper .wa-products .wa-product .wa-price-section .wa-price-total {
        font-size: 17px !important;
        line-height: 1.35 !important;
    }
    /* Older CSS already hides cart recommendations on narrow phones. */
    html.fp-mobile-device .layout-order__cross { display: none !important; }

    /* Native checkout fields: one field per row; text stays >=16px so iOS
       does not zoom the whole form on focus. */
    html.fp-mobile-device .layout-order .wa-order-form-wrapper .wa-fields-group.line {
        display: grid !important;
        grid-template-columns: minmax(0,1fr) !important;
        gap: 11px !important;
    }
    html.fp-mobile-device .layout-order .wa-order-form-wrapper .wa-fields-group.line > .wa-field-wrapper {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    html.fp-mobile-device .layout-order .wa-order-form-wrapper .wa-field-wrapper .wa-input,
    html.fp-mobile-device .layout-order .wa-order-form-wrapper .wa-field-wrapper .wa-select,
    html.fp-mobile-device .layout-order .wa-order-form-wrapper .wa-field-wrapper .wa-textarea,
    html.fp-mobile-device .layout-order .wa-order-form-wrapper .wa-dropdown > .wa-dropdown-toggle {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 44px !important;
        padding: 10px 11px !important;
        font-size: 16px !important;
        line-height: 1.35 !important;
        box-sizing: border-box !important;
    }
    html.fp-mobile-device .layout-order .wa-order-form-wrapper .wa-field-wrapper .wa-textarea {
        min-height: 92px !important;
    }
    html.fp-mobile-device .layout-order .wa-order-form-wrapper .wa-field-wrapper .wa-label {
        margin-bottom: 5px !important;
        font-size: 13px !important;
    }
    html.fp-mobile-device .layout-order .wa-order-form-wrapper .wa-step-section {
        margin-top: 18px !important;
    }
    html.fp-mobile-device .layout-order .wa-order-form-wrapper .wa-step-section > .wa-section-header > .wa-header,
    html.fp-mobile-device .layout-order .wa-order-form-wrapper .wa-step-section > .wa-section-header > .wa-contact-name {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }
    html.fp-mobile-device .layout-order .wa-order-form-wrapper .wa-step-confirm-section .wa-section-body .wa-actions-section .wa-button {
        min-height: 46px !important;
        font-size: 16px !important;
        max-width: 100% !important;
    }

    /* Native pickup dialog: map on top, providers/list below, with the list
       scrollable. No pricing/marker/variant DOM is rewritten. */
    #wa-shipping-pickup-dialog > .wa-dialog-body {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    #wa-shipping-pickup-dialog .wa-content-section {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
    }
    #wa-shipping-pickup-dialog .wa-map-section {
        flex: 0 0 34% !important;
        width: 100% !important;
        min-height: 125px !important;
        padding: 6px !important;
    }
    #wa-shipping-pickup-dialog .wa-sidebar-section {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        padding: 10px !important;
        -webkit-overflow-scrolling: touch;
    }
    #wa-shipping-pickup-dialog .wa-filters-list {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 6px !important;
    }
    #wa-shipping-pickup-dialog .wa-filter-wrapper {
        min-width: 0 !important;
        min-height: 40px !important;
    }
    #wa-shipping-pickup-dialog .wa-variants-list .wa-date {
        min-height: 25px !important;
        font-size: 12px !important;
    }
}
@media (max-width: 355px) {
    html.fp-mobile-device .layout-order .wa-order-cart-wrapper .wa-products .wa-product .wa-product-body {
        grid-template-columns: 74px minmax(0,1fr) !important;
    }
    html.fp-mobile-device .layout-order .wa-order-cart-wrapper .wa-products .wa-product .wa-image-section,
    html.fp-mobile-device .layout-order .wa-order-cart-wrapper .wa-products .wa-product .wa-product-body > .wa-column-image {
        width: 74px !important;
    }
    html.fp-mobile-device .layout-order .wa-order-cart-wrapper .wa-products .wa-product .wa-image-section img {
        width: 74px !important;
        max-width: 74px !important;
        height: 74px !important;
        max-height: 74px !important;
    }
}