/* ============================================================
   Yashram Trading Company - installed app layout
   ============================================================
   Applies only when the site runs from the home-screen icon. The
   inline script at the top of _Layout.cshtml puts these classes on
   <html> before first paint:

     is-pwa       running as the installed app
     pwa-root     a tab page: /, /shop, /catalogue, /cart
     pwa-inner    anything else - gets a back button and a title
     pwa-shop     /shop and its category pages - keeps the search
     pwa-product  a product page - buy bar replaces the tab bar
     pwa-auth     sign in / register / reset password - full screen

   Everything visual sits under .is-pwa, so the website, including
   its mobile layout, is untouched. It also sits under the 991px
   query: an app installed on a desktop keeps the desktop layout.
   The mobile rules in main.css are the base; this file only
   overrides them. */

/* The markup for these is on every page; only the app shows them. */
.app-back,
.app-title,
.bottom-nav .bn-more { display: none; }

/* ---------------- no zooming, no copying ----------------
   At every width, since a desktop install should behave the same. pwa-app.js
   blocks the right-click menu and the copy event to match. */
html.is-pwa {
    overscroll-behavior-y: none;
    touch-action: pan-x pan-y;      /* scroll yes, pinch and double-tap zoom no */
}

.is-pwa body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.is-pwa img { -webkit-user-drag: none; }

/* Exceptions, not oversights. Fields have to stay selectable or iOS will not
   type into them, and a customer paying needs the UPI ID and bank details. */
.is-pwa input,
.is-pwa textarea,
.is-pwa .pay-panel {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

/* ---------------- splash screen ----------------
   White with the logo, so it follows the phone's own launch screen (the manifest's
   white background) without a flash. Drawn on <html> because the head script sets
   the class before <body> exists. pwa-app.js ends it; the delayed animation is the
   safety net, so a script failure can never leave the app stuck behind it. */
html.pwa-splash::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #fff url("/images/white-logo.jpg") center calc(50% - 24px) / 170px auto no-repeat;
    filter: brightness(1.06);
    animation: pwa-splash-out .28s ease 3s forwards;
}

html.pwa-splash::after {
    content: "";
    position: fixed;
    top: calc(50% + 90px);
    left: 50%;
    z-index: 10001;
    width: 120px;
    height: 3px;
    margin-left: -60px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent) 0 0 / 50% 100% no-repeat #e7edf3;
    animation: pwa-splash-bar 1s ease-in-out infinite, pwa-splash-out .28s ease 3s forwards;
}

html.pwa-splash.is-splash-done::before,
html.pwa-splash.is-splash-done::after { animation: pwa-splash-out .28s ease forwards; }

@keyframes pwa-splash-out { to { opacity: 0; visibility: hidden; } }
@keyframes pwa-splash-bar { from { background-position: -100% 0; } to { background-position: 200% 0; } }

/* ---------------- loading feedback ----------------
   A page takes about 0.4s to arrive. The bar answers the tap straight away, and
   slows towards the end so it never claims to have finished early. */
.pwa-progress {
    position: fixed;
    top: env(safe-area-inset-top);
    left: 0;
    right: 0;
    z-index: 500;
    height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
}

.pwa-progress.is-running {
    transform: scaleX(.9);
    transition: transform 4s cubic-bezier(.08, .75, .15, 1);
}

/* photo tiles shimmer until pwa-app.js marks their image as loaded */
.is-pwa .pg-card .thumb-link,
.is-pwa .cat-card .thumb,
.is-pwa .pd-main-img,
.is-pwa .cart-row .thumb,
.is-pwa .cd-line .thumb,
.is-pwa .qv-slide {
    background-image: linear-gradient(100deg, #eef1f5 30%, #f9fafb 50%, #eef1f5 70%);
    background-size: 220% 100%;
    animation: pwa-shimmer 1.3s linear infinite;
}

.is-pwa .pg-card .thumb-link:has(img.img-ready),
.is-pwa .cat-card .thumb:has(img.img-ready),
.is-pwa .pd-main-img:has(img.img-ready),
.is-pwa .cart-row .thumb:has(img.img-ready),
.is-pwa .cd-line .thumb:has(img.img-ready),
.is-pwa .qv-slide:has(img.img-ready) {
    background-image: none;
    animation: none;
}

@keyframes pwa-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

@media (prefers-reduced-motion: reduce) {
    .pwa-progress.is-running { transition: none; }
    html.pwa-splash::after,
    .is-pwa .pg-card .thumb-link,
    .is-pwa .cat-card .thumb,
    .is-pwa .pd-main-img,
    .is-pwa .cart-row .thumb,
    .is-pwa .cd-line .thumb,
    .is-pwa .qv-slide { animation: none; }
    html.pwa-splash::before { animation: pwa-splash-out .01s linear 3s forwards; }
}

/* ---------------- pull to refresh ----------------
   The circle comes out from behind the app bar (z-index 90). pwa-app.js adds
   it to the page, and drives its position while the finger is down. */
.ptr {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 85;
    width: 40px;
    height: 40px;
    margin-left: -20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: var(--primary);
    font-size: 15px;
    box-shadow: 0 3px 12px rgba(2, 39, 66, .22);
    opacity: 0;
    pointer-events: none;
}

.ptr.is-ready { background: var(--primary); color: #fff; }
.ptr.is-settling { transition: transform .2s ease, opacity .2s ease; }

@media (max-width: 991px) {

    /* iOS zooms the page into any field under 16px and does not zoom back */
    .is-pwa input:not([type="checkbox"]):not([type="radio"]),
    .is-pwa select,
    .is-pwa textarea { font-size: 16px; }

    /* the website's call button sits in the drawer here */
    .is-pwa .call-float { display: none; }

    /* An app has no marketing footer: the tabs are the navigation and the
       drawer carries the rest, Terms / Privacy / Refunds included. The website
       keeps it on phones, and it stays in the markup here for the crawlers. */
    .is-pwa .main-footer,
    .is-pwa .footer-bottom { display: none; }

    /* ---------------- app bar ---------------- */
    /* The bar is sticky, but its wrapper is only as tall as the bar, so it scrolled
       away with the page. Without the wrapper's box it sticks to the whole page. */
    .is-pwa #site-header { display: contents; }

    /* The status bar is translucent on iOS with white text, so the strip
       under it has to be navy or the clock disappears into the white bar. */
    .is-pwa .main-header {
        padding: calc(8px + env(safe-area-inset-top)) 0 8px;
        background:
            linear-gradient(var(--primary-dark), var(--primary-dark)) top / 100% env(safe-area-inset-top) no-repeat,
            #fff;
    }

    /* the More tab opens the drawer */
    .is-pwa .app-menu-btn { display: none; }

    .is-pwa .main-header .logo img { height: 38px; filter: brightness(1.06); }

    /* Cart is a tab on these pages; a second one in the bar is noise */
    .is-pwa.pwa-root .icon-btn.cart { display: none; }

    .is-pwa.pwa-inner .main-header .logo { display: none; }

    .is-pwa.pwa-inner .app-back {
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        flex-shrink: 0;
        border: none;
        border-radius: 12px;
        background: #f1f5f9;
        color: var(--primary);
        font-size: 16px;
    }

    .is-pwa.pwa-inner .app-back:active { transform: scale(.94); }

    .is-pwa.pwa-inner .app-title {
        display: block;
        flex: 1 1 0;
        min-width: 0;
        font-size: 16px;
        font-weight: 600;
        color: var(--primary-dark);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* the header's box only: once moved into the search screen it has to show */
    .is-pwa.pwa-inner:not(.pwa-shop) .main-header .search-bar { display: none; }

    /* ---------------- bottom tabs ---------------- */
    .is-pwa .bottom-nav .bn-enquire { display: none; }
    .is-pwa .bottom-nav .bn-more { display: flex; }
    .is-pwa body.nav-open .bottom-nav .bn-more { color: var(--primary); }

    /* The page shrinks for the keyboard, which would stand these on top of it and
       leave little room for the field being typed in. pwa-app.js sets the class. */
    .is-pwa.is-keyboard .bottom-nav,
    .is-pwa.is-keyboard .cart-bar,
    .is-pwa.is-keyboard .float-actions { display: none; }

    /* ---------------- page headings ---------------- */
    /* The banner is a website device. A tab keeps a slim heading; an inner
       page has its title in the app bar, so its banner goes. Category pages
       keep theirs for the description and the product count. */
    .is-pwa .shop-hero { padding: 12px 0; margin-bottom: 14px; }
    .is-pwa .shop-hero .container { flex-wrap: nowrap; }
    .is-pwa .shop-hero h1 { font-size: 17px; letter-spacing: 0; margin-bottom: 0; }
    .is-pwa .shop-hero p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin-top: 2px;
        font-size: 12px;
    }
    .is-pwa .contact-hero .ch-eyebrow { display: none; }

    .is-pwa.pwa-inner .shop-hero h1 { display: none; }
    .is-pwa.pwa-inner:not(.pwa-shop) .shop-hero { display: none; }
    .is-pwa.pwa-inner:not(.pwa-shop):not(.pwa-auth) .main-header { margin-bottom: 14px; }

    /* the back button does this job */
    .is-pwa .breadcrumb { display: none; }

    /* ---------------- product page: buy bar ---------------- */
    .is-pwa.pwa-product .bottom-nav,
    .is-pwa.pwa-product .float-actions { display: none; }

    .is-pwa.pwa-product body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }

    /* Scoped to #pdWrap: the quick view opened from "related products" has a
       .pd-buybox of its own, on this same page. */
    .is-pwa.pwa-product #pdWrap .pd-buybox {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 260;
        margin: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 8px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        background: #fff;
        box-shadow: 0 -6px 22px rgba(6, 58, 97, .10);
    }

    .is-pwa.pwa-product #pdWrap .pd-wish {
        order: -1;
        flex: 0 0 46px;
        width: 46px;
        height: 46px;
        align-self: stretch;
        border-radius: 12px;
    }

    .is-pwa.pwa-product #pdWrap .qty-stepper {
        flex: 0 0 auto;
        align-self: stretch;
        height: 46px;
        border-radius: 12px;
    }

    .is-pwa.pwa-product #pdWrap .qty-stepper button { width: 30px; height: 100%; }
    .is-pwa.pwa-product #pdWrap .qty-stepper input { width: 34px; height: 100%; padding: 0; }

    /* !important only because the button carries these as an inline style */
    .is-pwa.pwa-product #pdAddCart {
        flex: 1 1 auto !important;
        min-width: 0;
        height: 46px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        white-space: nowrap;
    }

    /* the WhatsApp float is gone on this page, so this keeps enquiry on screen */
    .is-pwa.pwa-product #pdEnquire {
        flex: 0 0 46px;
        width: 46px;
        height: 46px;
        padding: 0;
        justify-content: center;
        border-radius: 12px;
        background: #25d366;
        color: #fff;
        font-size: 0;
    }

    .is-pwa.pwa-product #pdEnquire i { font-size: 21px; }

    /* ---------------- my account ----------------
       The website's rail becomes a sideways tab strip on a phone. Here the My Account
       screen does that job, so each section is just its own page under the app bar. */
    .is-pwa .account-nav { display: none; }
    .is-pwa .account-layout { display: block; }
    .is-pwa .account-page { padding-top: 0; padding-bottom: 20px; }
    .is-pwa body:has(.account-page) .float-actions { display: none; }

    .is-pwa .pwa-account {
        position: fixed;
        inset: 0;
        z-index: 350;
        display: flex;
        flex-direction: column;
        background: #f1f4f7;
        visibility: hidden;
        /* up from below: parked to the right it would widen the page on a phone */
        transform: translateY(100%);
        transition: transform .3s cubic-bezier(.22, .9, .3, 1), visibility 0s linear .3s;
    }

    .is-pwa body.account-open { overflow: hidden; }

    .is-pwa body.account-open .pwa-account {
        visibility: visible;
        transform: none;
        transition-delay: 0s;
    }

    .is-pwa .pa-body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }

    .is-pwa .pa-body .acct-drop-head {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 8px;
        padding: 18px 16px;
        border: 0;
        background: linear-gradient(120deg, var(--primary) 0%, var(--primary-light) 100%);
        color: #fff;
    }

    .is-pwa .pa-body .acct-drop-head strong { color: #fff; font-size: 16px; }
    .is-pwa .pa-body .acct-drop-head span:not([data-avatar]) { color: rgba(255, 255, 255, .82); font-size: 12.5px; }

    .is-pwa .pa-body > a,
    .is-pwa .pa-body form button {
        position: relative;
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        min-height: 54px;
        padding: 12px 40px 12px 16px;
        border: 0;
        border-bottom: 1px solid var(--line);
        background: #fff;
        color: var(--text);
        font: inherit;
        font-size: 14.5px;
        font-weight: 500;
        text-align: left;
    }

    .is-pwa .pa-body > a:active,
    .is-pwa .pa-body form button:active { background: var(--tile); }

    .is-pwa .pa-body > a i { width: 20px; text-align: center; color: var(--primary); font-size: 15px; }
    .is-pwa .pa-body > a span { flex: 1; min-width: 0; }

    /* a drawn chevron, so it needs no extra markup in the copied rows */
    .is-pwa .pa-body > a::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 18px;
        width: 8px;
        height: 8px;
        margin-top: -4px;
        border-top: 2px solid #aab4c0;
        border-right: 2px solid #aab4c0;
        transform: rotate(45deg);
    }

    .is-pwa .pa-body em {
        flex: none;
        min-width: 22px;
        padding: 1px 7px;
        border-radius: 999px;
        background: var(--primary);
        color: #fff;
        font-size: 11px;
        font-style: normal;
        font-weight: 700;
        text-align: center;
    }

    .is-pwa .pa-body em[hidden] { display: none; }

    .is-pwa .pa-body form { margin-top: 8px; }

    .is-pwa .pa-body form button {
        padding-right: 16px;
        border-bottom: 0;
        color: #c0392b;
        font-weight: 600;
    }

    .is-pwa .pa-body form button i { width: 20px; text-align: center; color: inherit; font-size: 15px; }

    /* ---------------- profile: the identity card ----------------
       Photo, name and email up top, with the three actions as one row of chips across
       the full width. display: contents lets the name, the details and the chips
       take their own places in the card's grid without changing the markup. */
    .is-pwa .ac-identity { display: block; }

    .is-pwa .ac-avatar-wrap {
        display: grid;
        grid-template-columns: 60px minmax(0, 1fr);
        column-gap: 14px;
        align-items: center;
    }

    .is-pwa .ac-avatar-edit { grid-row: 1 / span 2; }
    .is-pwa .ac-avatar-wrap > div:last-child { display: contents; }
    .is-pwa .ac-identity h2 { grid-column: 2; align-self: end; font-size: 17px; line-height: 1.3; }

    .is-pwa .ac-identity p:not(.cf-error) {
        grid-column: 2;
        align-self: start;
        margin-top: 2px;
        font-size: 12px;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .is-pwa .ac-avatar-actions {
        grid-column: 1 / -1;
        flex-wrap: nowrap;
        gap: 6px;
        margin-top: 14px;
    }

    /* sized to their words, sharing out what is left: "2 orders" needs far less room */
    .is-pwa .ac-avatar-actions .oh-btn {
        flex: 1 1 auto;
        min-height: 34px;
        padding: 6px 8px;
        gap: 5px;
        border-radius: 999px;
        background: #f1f5f9;
        border-color: transparent;
        color: var(--primary-dark);
        font-size: 11.5px;
    }

    .is-pwa .ac-avatar-actions .oh-btn i { font-size: 11px; }
    .is-pwa .ac-long { display: none; }
    .is-pwa .ac-identity .cf-error { grid-column: 1 / -1; margin-top: 8px; }

    .is-pwa .ac-badge {
        margin-top: 10px;
        padding: 3px 10px;
        font-size: 11px;
    }

    /* ---------------- shop: filter as a bottom sheet ----------------
       The same panel the website slides in from the side, sliding up instead, so
       it opens under the thumb. Square corners, as chosen for the side panel. */
    .is-pwa .shop-sidebar {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        max-height: 86vh;
        max-height: 86dvh;
        border-radius: 0;
        transform: translateY(100%);
        touch-action: pan-y;
    }

    .is-pwa body.filter-open .shop-sidebar {
        transform: translateY(0);
        box-shadow: 0 -8px 32px rgba(2, 39, 66, .28);
    }

    /* the handle says it can be dragged down */
    .is-pwa .shop-sidebar::before {
        content: "";
        flex: none;
        align-self: center;
        width: 40px;
        height: 4px;
        margin-top: 8px;
        border-radius: 4px;
        background: #cfd6de;
    }

    .is-pwa .side-head { padding: 8px 14px 10px 20px; }

    /* ---------------- shop: sort ----------------
       The row under the search: Filter and Sort sharing the width, then the layout
       switch. The dropdown is hidden, not removed: see wireSortSheet. */
    .is-pwa .toolbar-controls .select-wrap { display: none; }
    .is-pwa .toolbar-controls { display: flex; gap: 8px; width: 100%; }

    .is-pwa .toolbar-controls .shop-filter-btn,
    .is-pwa .shop-sort-btn {
        flex: 1 1 0;
        justify-content: center;
        min-height: 42px;
        border-radius: 10px;
    }

    .is-pwa .toolbar-controls .view-toggle { flex: none; order: 2; }

    .is-pwa .shop-sort-btn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 9px 14px;
        border: 1.5px solid var(--primary);
        background: #fff;
        color: var(--primary);
        font-size: 12.5px;
        font-weight: 600;
    }

    .is-pwa .shop-sort-btn i { font-size: 12px; }

    .is-pwa .sort-backdrop {
        position: fixed;
        inset: 0;
        z-index: 355;
        background: rgba(2, 25, 42, .5);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility 0s linear .3s;
    }

    .is-pwa .sort-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 360;
        padding-bottom: env(safe-area-inset-bottom);
        background: #fff;
        visibility: hidden;
        transform: translateY(100%);
        transition: transform .3s cubic-bezier(.22, .9, .3, 1), visibility 0s linear .3s;
    }

    /* the handle says it can be dragged down */
    .is-pwa .sort-sheet { touch-action: none; }

    .is-pwa .sort-sheet::before {
        content: "";
        display: block;
        width: 40px;
        height: 4px;
        margin: 8px auto 0;
        border-radius: 4px;
        background: #cfd6de;
    }

    /* the drawer scrolls up and down; a sideways drag is left for pwa-app.js */
    .is-pwa .main-nav { touch-action: pan-y; }

    /* the finger is driving; easing here would lag behind it */
    .is-pwa .sort-sheet.is-dragging,
    .is-pwa .main-nav.is-dragging { transition: none; }

    .is-pwa body.sort-open { overflow: hidden; }

    .is-pwa body.sort-open .sort-backdrop {
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
    }

    .is-pwa body.sort-open .sort-sheet {
        visibility: visible;
        transform: none;
        box-shadow: 0 -8px 32px rgba(2, 39, 66, .28);
        transition-delay: 0s;
    }

    .is-pwa .ss-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 14px 12px 20px;
        border-bottom: 1px solid var(--line);
    }

    .is-pwa .ss-head h2 { font-size: 15px; font-weight: 700; color: var(--primary-dark); }

    /* the rule that shows this one lives inside main.css's own drawer block */
    .is-pwa .ss-head .side-close {
        flex: none;
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 50%;
        background: var(--tile);
        color: var(--text);
        font-size: 15px;
    }

    .is-pwa .ss-options { padding: 6px 0 10px; }

    .is-pwa .ss-option {
        position: relative;
        display: block;
        width: 100%;
        min-height: 50px;
        padding: 12px 52px 12px 20px;
        border: 0;
        background: none;
        color: var(--text);
        font-size: 14px;
        text-align: left;
    }

    .is-pwa .ss-option:active { background: var(--tile); }
    .is-pwa .ss-option[aria-pressed="true"] { color: var(--primary); font-weight: 600; }

    /* a drawn radio: filled for the sort in use */
    .is-pwa .ss-option::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 20px;
        width: 20px;
        height: 20px;
        margin-top: -10px;
        box-sizing: border-box;     /* pseudo-elements miss the sheet's * rule */
        border: 2px solid #c3ccd6;
        border-radius: 50%;
    }

    .is-pwa .ss-option[aria-pressed="true"]::after {
        border: 6px solid var(--primary);
    }

    /* ---------------- dropdowns ----------------
       The sort sheet again, holding a longer list. It sits over the checkout screen
       and the sign-in popup, and pan-y lets its list scroll. See wirePickers. */
    .is-pwa .pick-backdrop { z-index: 405; }

    .is-pwa .pick-sheet {
        z-index: 410;
        display: flex;
        flex-direction: column;
        max-height: 72vh;
        max-height: 72dvh;
        touch-action: pan-y;
    }

    .is-pwa body.pick-open { overflow: hidden; }

    .is-pwa body.pick-open .pick-backdrop {
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
    }

    .is-pwa body.pick-open .pick-sheet {
        visibility: visible;
        transform: none;
        box-shadow: 0 -8px 32px rgba(2, 39, 66, .28);
        transition-delay: 0s;
    }

    .is-pwa .pick-sheet .ss-options {
        position: relative;     /* what offsetTop counts from when opening on the choice */
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .is-pwa .pick-find {
        position: relative;
        flex: none;
        padding: 10px 14px;
        border-bottom: 1px solid var(--line);
    }

    .is-pwa .pick-find[hidden] { display: none; }

    .is-pwa .pick-find i {
        position: absolute;
        top: 50%;
        left: 30px;
        transform: translateY(-50%);
        color: #8b97a7;
        font-size: 13px;
    }

    .is-pwa .pick-find input {
        width: 100%;
        height: 44px;
        padding: 0 16px 0 40px;
        border: 0;
        border-radius: 999px;
        background: #f1f5f9;
        color: var(--text);
        font-family: inherit;
        -webkit-appearance: none;
        appearance: none;
    }

    .is-pwa .pick-find input:focus { outline: none; }
    .is-pwa .pick-find input::-webkit-search-cancel-button { display: none; }

    .is-pwa .pick-none {
        padding: 30px 20px;
        color: var(--muted);
        font-size: 13.5px;
        text-align: center;
    }

    /* the field that opens it: the real select, shown but not touched */
    .is-pwa .pick-wrap {
        position: relative;
        display: block;
        width: 100%;
        min-width: 0;
        cursor: pointer;
    }

    .is-pwa .pick-wrap select { pointer-events: none; }

    /* a drawn chevron, as on the account rows */
    .is-pwa .pick-wrap::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 18px;
        width: 8px;
        height: 8px;
        margin-top: -6px;
        border-right: 2px solid #8b97a7;
        border-bottom: 2px solid #8b97a7;
        transform: rotate(45deg);
        pointer-events: none;
    }

    /* ---------------- forms ----------------
       One field for every form in the app, in place of the website's several: filled
       rather than outlined, taller, and 16px throughout, which iOS needs anyway. The
       padding is set side by side because the password eye keeps its own on the right. */
    .is-pwa :is(.contact-form, .rv-form, .auth-form, .bulk-form-card) :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"]), textarea, select) {
        width: 100%;
        min-height: 50px;
        padding-top: 13px;
        padding-bottom: 13px;
        padding-left: 16px;
        border: 1.5px solid transparent;
        border-radius: 12px;
        background: #f1f5f9;
        color: var(--text);
        font-family: inherit;
        font-weight: 400;
        line-height: 1.4;
        box-shadow: none;
    }

    .is-pwa :is(.contact-form, .rv-form, .auth-form, .bulk-form-card) :is(input, textarea):focus {
        outline: none;
        border-color: var(--primary);
        background: #fff;
        box-shadow: none;
    }

    .is-pwa :is(.contact-form, .rv-form, .auth-form, .bulk-form-card) :is(input, textarea)::placeholder {
        color: #8b97a7;
        opacity: 1;
    }

    /* :not() only to match the weight of the field rule above */
    .is-pwa :is(.contact-form, .rv-form, .auth-form, .bulk-form-card) textarea:not([type]) {
        min-height: 112px;
        line-height: 1.5;
        resize: none;
    }

    .is-pwa :is(.contact-form, .rv-form, .auth-form, .bulk-form-card) select {
        padding-right: 42px;
        text-overflow: ellipsis;
        -webkit-appearance: none;
        appearance: none;
    }

    /* still on its "Choose a state", which reads as a hint rather than an answer */
    .is-pwa select:has(option[value=""]:checked) { color: #8b97a7; }

    .is-pwa input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
    .is-pwa input[type="number"]::-webkit-inner-spin-button { display: none; }

    .is-pwa .cf-field > label {
        margin-bottom: 7px;
        color: var(--primary-dark);
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0;
    }

    .is-pwa .cf-optional { color: var(--muted); font-weight: 400; }
    .is-pwa .cf-hint { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.5; }

    .is-pwa .cf-row,
    .is-pwa .cf-row-3 { grid-template-columns: 1fr; gap: 14px; }

    /* the one form that is not already a column with a gap */
    .is-pwa #paymentForm { display: flex; flex-direction: column; gap: 14px; }

    .is-pwa :is(.contact-form, .rv-form) input[type="checkbox"],
    .is-pwa .contact-form input[type="radio"] {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        margin: 0;
        accent-color: var(--primary);
    }

    .is-pwa .contact-form .btn-submit-enquiry {
        width: 100%;
        min-height: 50px;
        border-radius: 12px;
        font-size: 15px;
        font-weight: 600;
    }

    /* the search boxes on pages match the one in the app bar */
    .is-pwa .mini-search input,
    .is-pwa .faq-search input {
        min-height: 46px;
        border: 0;
        border-radius: 999px;
        background: #f1f5f9;
        color: var(--text);
        font-family: inherit;
    }

    .is-pwa .mini-search input:focus,
    .is-pwa .faq-search input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--primary); }

    /* a filter over a list rather than a question, so it stays a small pill */
    .is-pwa .pick-wrap:has(.rv-select) { display: inline-block; width: auto; }

    .is-pwa .rv-select {
        min-height: 42px;
        padding: 0 40px 0 16px;
        border: 0;
        background: #f1f5f9;
        font-size: 14px;
        -webkit-appearance: none;
        appearance: none;
    }

    /* ---------------- search: the header button ----------------
       Looks like the search box it replaces. Pages with no room for a whole box
       get the same button as a plain icon, so search is one tap from everywhere. */
    .is-pwa .ps-open {
        order: 3;
        flex: 1 1 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 42px;
        padding: 0 4px 0 16px;
        border: 0;
        border-radius: 999px;
        background: #f1f5f9;
        color: #8b97a7;
        font-size: 14px;
    }

    .is-pwa .ps-open i {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--primary);
        color: #fff;
        font-size: 12px;
    }

    .is-pwa.pwa-inner:not(.pwa-shop) .ps-open {
        order: 0;
        flex: none;
        width: 38px;
        height: 38px;
        padding: 0;
        justify-content: center;
    }

    .is-pwa.pwa-inner:not(.pwa-shop) .ps-open span { display: none; }

    .is-pwa.pwa-inner:not(.pwa-shop) .ps-open i {
        background: none;
        color: var(--primary);
        font-size: 14px;
    }

    .is-pwa.pwa-auth .ps-open { display: none; }

    /* ---------------- search: the full screen ---------------- */
    .is-pwa .pwa-search {
        position: fixed;
        inset: 0;
        z-index: 350;
        display: flex;
        flex-direction: column;
        background: #fff;
        visibility: hidden;
        transform: translateY(16px);
        opacity: 0;
        transition: transform .22s ease, opacity .22s ease, visibility 0s linear .22s;
    }

    .is-pwa body.search-open { overflow: hidden; }

    .is-pwa body.search-open .pwa-search {
        visibility: visible;
        transform: none;
        opacity: 1;
        transition-delay: 0s;
    }

    .is-pwa .ps-head {
        flex: none;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
        background:
            linear-gradient(var(--primary-dark), var(--primary-dark)) top / 100% env(safe-area-inset-top) no-repeat,
            #fff;
        box-shadow: 0 2px 14px rgba(6, 58, 97, .07);
    }

    .is-pwa .ps-head .search-bar {
        order: 0;
        flex: 1;
        min-width: 0;
        max-width: none;
        position: static;
        display: flex;
        align-items: center;
    }

    .is-pwa .ps-head .search-bar input { flex: 1; min-width: 0; }

    .is-pwa .ps-clear {
        display: none;
        flex: none;
        width: 28px;
        height: 28px;
        place-items: center;
        margin-right: 4px;
        border: 0;
        border-radius: 50%;
        background: #dfe5ec;
        color: #4b5563;
        font-size: 12px;
    }

    .is-pwa .pwa-search.has-text .ps-clear { display: grid; }

    /* results take over everything under the header row */
    .is-pwa .ps-head .search-suggest {
        position: fixed;
        top: var(--ps-top, 58px);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        max-height: none;
        margin: 0;
        padding-bottom: env(safe-area-inset-bottom);
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .is-pwa .ps-head .ss-item { gap: 12px; padding: 10px 14px; }
    .is-pwa .ps-head .ss-item .ss-thumb { width: 52px; height: 52px; flex-shrink: 0; }
    .is-pwa .ps-head .ss-item .ss-info h5 { font-size: 13.5px; }
    .is-pwa .ps-head .ss-item .ss-info span { font-size: 11.5px; }
    .is-pwa .ps-head .ss-item .ss-price { font-size: 13px; }
    .is-pwa .ps-head .ss-cat-item { padding: 12px 14px; font-size: 13.5px; }
    .is-pwa .ps-head .ss-section-label { padding: 12px 14px 4px; font-size: 11px; }
    .is-pwa .ps-head .ss-viewall { padding: 14px; font-size: 13px; }
    .is-pwa .ps-head .ss-empty { padding: 34px 20px; font-size: 13.5px; }

    .is-pwa .ps-home {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 14px 14px calc(20px + env(safe-area-inset-bottom));
    }

    .is-pwa .ps-home h2 { margin: 6px 0 10px; font-size: 14px; font-weight: 600; color: var(--text); }

    .is-pwa .ps-row-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .is-pwa .ps-row-head button {
        padding: 4px 0 4px 12px;
        border: 0;
        background: none;
        color: var(--accent);
        font-size: 12px;
        font-weight: 600;
    }

    .is-pwa .ps-recent {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 44px;
        padding: 8px 2px;
        border: 0;
        background: none;
        color: var(--text);
        font-size: 14px;
        text-align: left;
    }

    .is-pwa .ps-recent i { color: #9aa5b4; font-size: 13px; }
    .is-pwa .ps-recent span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .is-pwa .ps-recent + h2 { margin-top: 18px; }

    .is-pwa .ps-chips { display: flex; flex-wrap: wrap; gap: 8px; }

    .is-pwa .ps-chips a {
        padding: 8px 14px;
        border-radius: 999px;
        background: #f1f5f9;
        color: var(--primary-dark);
        font-size: 12.5px;
        font-weight: 500;
    }

    /* ---------------- home page ----------------
       White blocks on a pale page, each a rail you swipe, in place of the website's
       long stack of bands. The sections taken out are only hidden, so the page text
       stays for search engines and the website is unaffected; the same content is
       one tap away in the menu. */
    .is-pwa body[data-page="home"] { background: #f1f4f7; }

    /* the app bar sits under the status bar, with nothing above it */
    .is-pwa .top-bar { display: none; }

    .is-pwa body[data-page="home"] .ticker,
    .is-pwa body[data-page="home"] .home-intro,
    .is-pwa body[data-page="home"] .global,
    .is-pwa body[data-page="home"] .testimonials,
    .is-pwa body[data-page="home"] .slider-btn { display: none; }

    .is-pwa body[data-page="home"] .hero { padding: 10px 0 8px; background: #fff; }
    .is-pwa body[data-page="home"] .slider { border-radius: 14px; overflow: hidden; }

    /* A strip the finger moves. !important only because main.js steers the website's
       slider with an inline transform; pwa-app.js turns that into a scroll here. */
    .is-pwa #heroSlides {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        transform: none !important;
        transition: none;
    }

    .is-pwa #heroSlides::-webkit-scrollbar { display: none; }

    .is-pwa #heroSlides a {
        flex: 0 0 100%;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    .is-pwa body[data-page="home"] .cat-strip,
    .is-pwa body[data-page="home"] .section,
    .is-pwa body[data-page="home"] .promos,
    .is-pwa body[data-page="home"] .usp,
    .is-pwa .pwa-recent {
        margin-top: 8px;
        padding: 14px 0;
        background: #fff;
    }

    .is-pwa body[data-page="home"] .band::before,
    .is-pwa body[data-page="home"] .band::after { display: none; }

    .is-pwa body[data-page="home"] .section-head.centered { margin-bottom: 10px; }
    .is-pwa body[data-page="home"] .section-head h2 { font-size: 16px; }

    /* categories: one row to swipe rather than a block filling the first screen */
    .is-pwa body[data-page="home"] .cat-grid {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .is-pwa body[data-page="home"] .cat-grid::-webkit-scrollbar { display: none; }
    .is-pwa body[data-page="home"] .cat-card { flex: 0 0 68px; }
    .is-pwa body[data-page="home"] .cat-card span { font-size: 10px; min-height: 0; }

    /* product rails: two and a bit cards, so the next one shows there is more */
    .is-pwa body[data-page="home"] .slider-track { gap: 10px; padding: 2px 2px 4px; }

    .is-pwa body[data-page="home"] .slider-track .pg-card {
        flex-basis: 150px;
        border-radius: 12px;
    }

    .is-pwa body[data-page="home"] .slider-track .pg-card .cat-tag,
    .is-pwa body[data-page="home"] .slider-track .pg-card .pg-desc { display: none; }

    .is-pwa body[data-page="home"] .slider-track .pg-card h3 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        min-height: 34px;
        margin: 8px 10px 4px;
        font-size: 12px;
        line-height: 1.4;
    }

    .is-pwa body[data-page="home"] .slider-track .pg-card .price-row { margin: 0 10px; }
    .is-pwa body[data-page="home"] .slider-track .pg-actions { margin: 8px 10px 10px; }
    .is-pwa body[data-page="home"] .slider-track .pg-actions > a { display: none; }

    .is-pwa body[data-page="home"] .slider-track .pg-actions .btn-add-cart {
        width: 100%;
        padding: 9px 6px;
        border-radius: 9px;
        font-size: 11.5px;
        white-space: nowrap;
    }

    .is-pwa body[data-page="home"] .slider-track .pg-wish,
    .is-pwa body[data-page="home"] .slider-track .pg-quickview {
        width: 28px;
        height: 28px;
        right: 6px;
        font-size: 11px;
    }

    .is-pwa body[data-page="home"] .slider-track .pg-wish { top: 6px; }
    .is-pwa body[data-page="home"] .slider-track .pg-card .pg-quickview { top: 38px; }

    /* promos: side by side to swipe instead of stacked */
    .is-pwa body[data-page="home"] .promo-grid {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .is-pwa body[data-page="home"] .promo-grid::-webkit-scrollbar { display: none; }

    .is-pwa body[data-page="home"] .promo-grid a {
        flex: 0 0 84%;
        scroll-snap-align: center;
    }

    /* the trust points, as a small closing strip */
    .is-pwa body[data-page="home"] .usp .container { gap: 8px; }

    .is-pwa body[data-page="home"] .usp-item {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 10px;
        border-radius: 12px;
    }

    .is-pwa body[data-page="home"] .usp-item p { display: none; }

    .is-pwa .pwa-recent h2 { margin-bottom: 10px; font-size: 16px; }

    .is-pwa .pwa-recent-rail {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .is-pwa .pwa-recent-rail::-webkit-scrollbar { display: none; }
    .is-pwa .pwa-recent-rail a { flex: 0 0 96px; min-width: 0; }

    .is-pwa .pwa-recent-rail img {
        width: 96px;
        height: 96px;
        border-radius: 10px;
        background: var(--tile);
        object-fit: cover;
    }

    .is-pwa .pwa-recent-rail span {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin-top: 6px;
        font-size: 11px;
        line-height: 1.35;
        color: var(--text);
    }

    /* ---------------- quick view photos ----------------
       The same look as the product page: thumbnails over the photo, not under it.
       .qv-media is the thing to measure from because .qv-gallery clips its contents.
       The bottom offset clears the details panel, which overlaps the photo by 16px. */
    .is-pwa .qv-modal .qv-media { position: relative; }

    .is-pwa .qv-media .qv-thumbs {
        position: absolute;
        left: 8px;
        right: 8px;
        bottom: 26px;
        z-index: 2;
        gap: 6px;
        width: max-content;
        max-width: calc(100% - 16px);
        margin: 0 auto;
        padding: 5px;
        border-radius: 12px;
        background: rgba(255, 255, 255, .78);
        backdrop-filter: blur(6px);
        box-shadow: 0 3px 12px rgba(2, 39, 66, .2);
        overscroll-behavior-x: contain;
    }

    .is-pwa .qv-media .qv-thumbs button {
        flex: 0 0 46px;
        height: 46px;
        border-color: #fff;
        border-radius: 8px;
        background: #fff;
        opacity: 1;
    }

    .is-pwa .qv-media .qv-thumbs button.active { border-color: var(--primary); }

    /* Prev, Next and the close button hold the top row, so it goes under them */
    .is-pwa .qv-gallery .qv-count {
        top: calc(60px + env(safe-area-inset-top));
        right: 12px;
        bottom: auto;
        padding: 3px 10px;
        background: rgba(2, 25, 42, .62);
        font-size: 11.5px;
        line-height: 1.5;
    }

    /* ---------------- cart: pinned total ----------------
       Sits on top of the tabs rather than replacing them. /cart is a tab, so it has
       no back arrow, and taking the tabs away would leave no way off the page. */
    .is-pwa body.has-cart-bar { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
    .is-pwa body.has-cart-bar .float-actions { display: none; }

    .is-pwa .cart-bar {
        position: fixed;
        left: 0;
        right: 0;
        z-index: 240;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 14px;
        background: #fff;
        border-top: 1px solid var(--line);
    }

    .is-pwa .cart-bar strong {
        display: block;
        font-size: 18px;
        line-height: 1.25;
        color: var(--primary-dark);
    }

    .is-pwa .cart-bar span { font-size: 11px; color: var(--muted); }

    .is-pwa .cart-bar-go {
        flex-shrink: 0;
        min-height: 46px;
        padding: 0 22px;
        border: 0;
        border-radius: 12px;
        background: var(--primary);
        color: #fff;
        font-size: 14px;
        font-weight: 600;
    }

    .is-pwa .cart-bar-go i { margin-left: 6px; font-size: 12px; }
    .is-pwa .cart-bar-go:active { transform: scale(.97); }

    /* ---------------- cart: checkout screen ---------------- */
    .is-pwa .cart-checkout {
        position: fixed;
        inset: 0;
        z-index: 345;           /* over the drawer, under the sign-in popup (400) */
        display: flex;
        flex-direction: column;
        background: var(--tile);
        visibility: hidden;
        transform: translateY(100%);
        transition: transform .3s cubic-bezier(.22, .9, .3, 1), visibility 0s linear .3s;
    }

    .is-pwa body.checkout-open { overflow: hidden; }

    .is-pwa body.checkout-open .cart-checkout {
        visibility: visible;
        transform: none;
        transition-delay: 0s;
    }

    .is-pwa .cc-head {
        flex: none;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
        background:
            linear-gradient(var(--primary-dark), var(--primary-dark)) top / 100% env(safe-area-inset-top) no-repeat,
            #fff;
        box-shadow: 0 2px 14px rgba(6, 58, 97, .07);
    }

    .is-pwa .cc-back {
        width: 38px;
        height: 38px;
        flex-shrink: 0;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 12px;
        background: #f1f5f9;
        color: var(--primary);
        font-size: 16px;
    }

    .is-pwa .cc-head h2 { font-size: 16px; font-weight: 600; color: var(--primary-dark); }

    .is-pwa .cc-body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 14px;
    }

    .is-pwa .cc-body .cart-form { gap: 14px; flex: none; }
    .is-pwa .cc-body .cart-sec { padding: 16px; }

    /* step 1 is the items, back on the cart, so the numbers would start at 2 */
    .is-pwa .cc-body .cart-sec-head span { display: none; }

    .is-pwa .cc-body .note {
        flex: none;
        margin: 0;
        padding: 12px;
        border-radius: 10px;
        background: #fff;
        font-size: 11.5px;
        line-height: 1.6;
        color: var(--muted);
    }

    .is-pwa .cc-foot {
        flex: none;
        display: flex;
        gap: 8px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        background: #fff;
        box-shadow: 0 -6px 22px rgba(6, 58, 97, .10);
    }

    .is-pwa .cc-foot .btn-submit-enquiry {
        flex: 1;
        width: auto;
        min-height: 48px;
        margin: 0;
        border-radius: 12px;
        font-size: 14px;
    }

    .is-pwa .cc-foot .btn-whatsapp-enquiry {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        margin: 0;
        padding: 0;
        border-radius: 12px;
        font-size: 0;
        gap: 0;
    }

    .is-pwa .cc-foot .btn-whatsapp-enquiry i { font-size: 21px; }

    /* ---------------- product photos ----------------
       The thumbnails float over the bottom of the main photo instead of sitting
       under it. Their backing keeps them readable on a dark or a busy picture. */
    /* top resets the desktop sticky offset, which applies again once positioned */
    .is-pwa.pwa-product .pd-gallery { position: relative; top: 0; }

    .is-pwa.pwa-product .pd-thumbs-wrap {
        position: absolute;
        left: 8px;
        right: 8px;
        bottom: 8px;
        z-index: 2;
        margin: 0;
    }

    /* the strip is swiped here, so the desktop paging arrows have no job */
    .is-pwa.pwa-product .pd-thumbs-wrap .pd-thumb-nav { display: none; }

    .is-pwa.pwa-product .pd-thumbs {
        gap: 6px;
        width: max-content;
        max-width: 100%;
        margin: 0 auto;
        padding: 5px;
        border-radius: 12px;
        background: rgba(255, 255, 255, .78);
        backdrop-filter: blur(6px);
        box-shadow: 0 3px 12px rgba(2, 39, 66, .2);
        overscroll-behavior-x: contain;
    }

    .is-pwa.pwa-product .pd-thumbs button {
        width: 46px;
        height: 46px;
        border-color: #fff;
    }

    .is-pwa.pwa-product .pd-thumbs button.active { border-color: var(--primary); }

    /* pwa-app.js builds this strip from the thumbnails; without it, the one main photo shows */
    .is-pwa .pd-main-img.has-track #pdMainImg { display: none; }

    .is-pwa .pd-track {
        display: flex;
        width: 100%;
        height: 100%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .is-pwa .pd-track::-webkit-scrollbar { display: none; }

    .is-pwa .pd-slide {
        flex: 0 0 100%;
        height: 100%;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    .is-pwa .pds-share {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-height: 46px;
        border: 1.5px solid var(--line);
        border-radius: 12px;
        background: #fff;
        color: var(--primary-dark);
        font-size: 13.5px;
        font-weight: 600;
    }

    .is-pwa .pds-share:active { background: var(--tile); }

    .is-pwa .pd-count {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 2;
        padding: 3px 10px;
        border-radius: 999px;
        background: rgba(2, 25, 42, .62);
        color: #fff;
        font-size: 11.5px;
        font-weight: 600;
        line-height: 1.5;
        pointer-events: none;
    }

    /* ---------------- description + specifications ----------------
       pwa-app.js turns the tabs into these rows. Everything hangs off the classes
       it adds, so if it never runs the page simply keeps its tabs. Animating a
       grid row is what lets the panel open to its natural height. */
    .is-pwa .pd-tabs.is-accordion { display: none; }

    .is-pwa .pd-acc-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        min-height: 54px;
        padding: 14px 2px;
        border: 0;
        border-top: 1px solid var(--line);
        background: none;
        color: var(--text);
        font-size: 15px;
        font-weight: 600;
        text-align: left;
    }

    .is-pwa .pd-tabs + .pd-acc-head { margin-top: 24px; }
    .is-pwa .pd-acc-head:active { background: var(--tile); }

    /* drawn, not an icon font, so the upright bar can fold away and turn + into - */
    .is-pwa .pd-acc-sign {
        position: relative;
        flex: none;
        width: 14px;
        height: 14px;
    }

    .is-pwa .pd-acc-sign::before,
    .is-pwa .pd-acc-sign::after {
        content: "";
        position: absolute;
        left: 0;
        top: 6px;
        width: 14px;
        height: 2px;
        border-radius: 2px;
        background: var(--primary);
    }

    .is-pwa .pd-acc-sign::after {
        transform: rotate(90deg);
        transition: transform .25s ease;
    }

    .is-pwa .pd-acc-head[aria-expanded="true"] .pd-acc-sign::after { transform: rotate(0deg); }

    .is-pwa .pd-tab-panel.pd-acc {
        display: grid;
        grid-template-rows: 0fr;
        padding-bottom: 0;
        transition: grid-template-rows .28s ease;
    }

    .is-pwa .pd-tab-panel.pd-acc.is-open { grid-template-rows: 1fr; }

    /* the last row needs its closing rule whether it is open or shut */
    .is-pwa .pd-tab-panel.pd-acc:last-of-type { border-bottom: 1px solid var(--line); }

    /* hidden as well as clipped, or a closed panel's links stay reachable by keyboard */
    .is-pwa .pd-acc-body {
        min-height: 0;
        overflow: hidden;
        visibility: hidden;
        transition: visibility 0s linear .28s;
    }

    .is-pwa .pd-acc.is-open .pd-acc-body { visibility: visible; transition-delay: 0s; }

    /* padding on .pd-acc-body itself would stop it closing to nothing */
    .is-pwa .pd-acc-body::after { content: ""; display: block; height: 14px; }

    /* ---------------- full-screen sign-in popup ---------------- */
    .is-pwa .auth-overlay { padding: 0; align-items: stretch; }

    .is-pwa .auth-modal {
        display: flex;
        flex-direction: column;
        max-width: none;
        max-height: none;
        height: 100vh;
        height: 100dvh;
        padding: calc(64px + env(safe-area-inset-top)) 22px calc(20px + env(safe-area-inset-bottom));
        border-radius: 0;
        box-shadow: none;
        overscroll-behavior: contain;
        transform: translateY(100%);
        transition: transform .32s cubic-bezier(.22, .9, .3, 1);
    }

    .is-pwa .auth-overlay.open .auth-modal { transform: none; }

    /* the lift takes the JPG's off-white box to pure white; the transparent PNG is over 1MB */
    .is-pwa .auth-modal::before {
        content: "";
        flex: 0 0 76px;
        margin-bottom: 26px;
        background: url("/images/white-logo.jpg") center / contain no-repeat;
        filter: brightness(1.06);
    }

    .is-pwa .auth-head h3 { font-size: 24px; }
    .is-pwa .auth-head p { font-size: 13.5px; }
    .is-pwa .auth-help { margin-top: auto; }

    /* ---------------- full-screen account pages ---------------- */
    .is-pwa.pwa-auth .shop-hero,
    .is-pwa.pwa-auth .bottom-nav,
    .is-pwa.pwa-auth .float-actions,
    .is-pwa.pwa-auth .header-actions,
    .is-pwa.pwa-auth .main-header .search-bar { display: none; }

    .is-pwa.pwa-auth body { padding-bottom: 0; }
    .is-pwa.pwa-auth .main-header { box-shadow: none; margin-bottom: 0; }

    .is-pwa.pwa-auth .auth-page {
        min-height: calc(100vh - 54px - env(safe-area-inset-top));
        min-height: calc(100dvh - 54px - env(safe-area-inset-top));
        padding: 8px 20px calc(24px + env(safe-area-inset-bottom));
    }

    /* main.css sets align-items: start here, which would collapse the logo */
    .is-pwa.pwa-auth .auth-card {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 26px;
        padding: 0;
        border: 0;
        border-radius: 0;
    }

    .is-pwa.pwa-auth .auth-card::before {
        content: "";
        flex: 0 0 76px;
        margin-top: 10px;
        background: url("/images/white-logo.jpg") center / contain no-repeat;
        filter: brightness(1.06);
    }

    .is-pwa.pwa-auth .auth-aside { padding: 18px; border-radius: 16px; }

    /* shared by the popup and the pages */
    .is-pwa .auth-form input:not([type="checkbox"]) {
        min-height: 50px;
        border-radius: 12px;
    }

    .is-pwa .auth-pw-toggle { bottom: 11px; }

    .is-pwa .auth-submit {
        min-height: 50px;
        border-radius: 12px;
        font-size: 15px;
    }
}

/* On the narrowest phones the buy bar drops the cart icon so the label fits. */
@media (max-width: 359px) {
    .is-pwa.pwa-product #pdAddCart i { display: none; }
}

/* the chips' words only just fit across these widths without their icons */
@media (max-width: 379px) {
    .is-pwa .ac-avatar-actions .oh-btn i { display: none; }
}

/* ---------------- quick view on a tablet-sized app ----------------
   main.css makes it full screen up to 767px. These are the same rules for the
   rest of the app's range, so it never opens as a floating popup. */
@media (min-width: 768px) and (max-width: 991px) {
    .is-pwa .qv-overlay { padding: 0; align-items: stretch; backdrop-filter: none; }

    .is-pwa .qv-modal {
        max-width: none;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
        box-shadow: none;
        transform: translateY(100%);
        transition: transform .32s cubic-bezier(.22, .9, .3, 1);
    }

    .is-pwa .qv-overlay.open .qv-modal { transform: none; }

    .is-pwa .qv-scroll {
        display: flex;
        flex-direction: column;
        height: 100%;
        max-height: none;
    }

    .is-pwa .qv-close {
        top: calc(12px + env(safe-area-inset-top));
        width: 38px;
        height: 38px;
        font-size: 16px;
        background: rgba(255, 255, 255, .94);
        color: var(--primary-dark);
        box-shadow: 0 3px 12px rgba(2, 39, 66, .2);
    }

    .is-pwa .qv-step {
        top: calc(12px + env(safe-area-inset-top));
        transform: none;
        width: auto;
        height: 38px;
        padding: 0 13px;
        gap: 6px;
        border-radius: 999px;
        font-size: 12.5px;
        font-weight: 600;
    }

    .is-pwa .qv-step span { display: inline; }
    .is-pwa .qv-step.prev { left: 12px; }
    .is-pwa .qv-step.next { right: 60px; }

    .is-pwa .qv-media { flex: 0 0 auto; align-self: stretch; padding: 0; position: static; }
    .is-pwa .qv-gallery { border-radius: 0; max-width: 460px; margin: 0 auto; }
    .is-pwa .qv-nav { display: none; }
    .is-pwa .qv-thumbs { margin-top: 0; padding: 10px 12px 26px; }

    .is-pwa .qv-body {
        flex: 1 0 auto;
        position: relative;
        z-index: 3;
        margin-top: -16px;
        padding: 22px 16px 0;
        background: #fff;
        border-radius: 20px 20px 0 0;
    }

    .is-pwa .qv-body .pd-buybox {
        position: sticky;
        bottom: 0;
        z-index: 4;
        margin: auto -16px 0;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: #fff;
        border-top: 1px solid var(--line);
        box-shadow: 0 -6px 18px rgba(2, 39, 66, .08);
    }

    .is-pwa .qv-body .btn-add-cart { flex: 1; box-shadow: none; }
}

/* ---------------- screen changes ----------------
   Every page is a full load, which reads as a website. Where the browser can, a new
   screen slides in over the last one and back slides it off again, a change of tab
   is a quick fade, and the two bars hold still. The rule that turns this on is at
   the top of _Layout.cshtml, and so is the script that sets the vt- classes for the
   length of the change. */
@media (max-width: 991px) and (prefers-reduced-motion: no-preference) {
    .is-pwa .main-header { view-transition-name: app-bar; }
    .is-pwa .bottom-nav { view-transition-name: tab-bar; }

    /* the list's photo carries this name on its way out: see pageswap in pwa-app.js */
    html.vt-photo #pdMainImg,
    html.vt-photo .pd-slide:first-child img { view-transition-name: product-photo; }

    ::view-transition-group(*) {
        animation-duration: .3s;
        animation-timing-function: cubic-bezier(.22, .9, .3, 1);
    }

    html.vt-forward::view-transition-old(root),
    html.vt-forward::view-transition-new(root),
    html.vt-back::view-transition-old(root),
    html.vt-back::view-transition-new(root) {
        mix-blend-mode: normal;
        animation-duration: .3s;
        animation-timing-function: cubic-bezier(.22, .9, .3, 1);
    }

    html.vt-forward::view-transition-old(root) { animation-name: vt-push-away; }
    html.vt-forward::view-transition-new(root) { animation-name: vt-slide-in; }

    /* z-index: the screen going away stays on top until it has gone */
    html.vt-back::view-transition-old(root) { z-index: 1; animation-name: vt-slide-out; }
    html.vt-back::view-transition-new(root) { animation-name: vt-push-back; }

    html.vt-tab::view-transition-old(root),
    html.vt-tab::view-transition-new(root) { animation-duration: .16s; }

    ::view-transition-old(product-photo),
    ::view-transition-new(product-photo) {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@keyframes vt-slide-in { from { transform: translateX(100%); } }
@keyframes vt-slide-out { to { transform: translateX(100%); } }
@keyframes vt-push-away { to { transform: translateX(-30%); } }
@keyframes vt-push-back { from { transform: translateX(-30%); } }

@media (prefers-reduced-motion: reduce) {
    .is-pwa .auth-modal,
    .is-pwa .qv-modal,
    .is-pwa .pd-acc-sign::after,
    .is-pwa .pwa-search,
    .is-pwa .pwa-account,
    .is-pwa .sort-sheet,
    .is-pwa .sort-backdrop,
    .is-pwa .pd-tab-panel.pd-acc,
    .is-pwa .pd-acc-body { transition: none; }
}