/* ============================================================
   mobile-foundation-v2.css  —  CORE mobile responsive foundation (v2 = filename cache-bust)
   ------------------------------------------------------------
   Layer policy: visually-NEUTRAL structure + design tokens only.
   - NO brand colors / images here. Shops override --m-* VALUES
     on their own {shop}_mobileview branch.
   - Breakpoint standard (project-wide reference):
       mobile  <= 767px   |   tablet 768-991px   |   desktop >= 992px
   ============================================================ */

:root {
    /* --- sizing tokens --- */
    --m-touch-min: 44px;      /* min tap target (Apple HIG)            */
    --m-header-h: 56px;       /* compact mobile header row-1 height    */
    --m-bottomnav-h: 56px;    /* fixed bottom tab-bar height           */
    --m-scrim-h: 40px;        /* menu drawer scroll-affordance scrim   */
    --m-gap: 12px;

    /* --- color hooks (dark app-bar default; a shop can override to light) --- */
    --m-header-bg: #222831;            /* dark app-bar surface (header + menu + bottom nav) */
    --m-header-fg: #ffffff;            /* icons + text on the dark surfaces */
    --m-accent: #ff4f8b;               /* brand accent (badges, active, counts) */
    --m-border: rgba(255, 255, 255, .14); /* dividers on the dark surfaces */
    /* chevron drawn in the menu drawer's scroll scrim. Inline SVG rather than a
       FontAwesome glyph: the scrim is the sole carrier of the "more below" affordance,
       so it must not depend on a webfont that may still be loading (tofu) or that a
       shop upgraded to FA5/6 (where font-family:FontAwesome stops resolving). The
       stroke is baked in — a shop flipping the drawer to a LIGHT surface overrides
       this token alongside --m-header-fg. */
    --m-scrim-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");

    /* --- layering: kept BELOW Bootstrap-3 modal backdrop(1040)/modal(1050) --- */
    --m-z-header: 1029;
    --m-z-bottomnav: 1031;
}

/* NOTE: these were global but are scoped to mobile so DESKTOP rendering is untouched
   (the global img reset could alter fixed-size desktop images/SVGs). */
@media (max-width: 767.98px) {
    /* media never overflows its container */
    img, picture, video, svg { max-width: 100%; }
    img, picture, video { height: auto; }

    /* reusable touch-target utility */
    .m-touch { min-width: var(--m-touch-min); min-height: var(--m-touch-min); }

    /* visible keyboard focus (shop resets may strip outlines) */
    .m-touch:focus-visible,
    .mobile-bottom-nav a:focus-visible,
    .mobile-bottom-nav .m-sort-trigger:focus-visible {
        outline: 2px solid var(--m-accent);
        outline-offset: 2px;
    }
}

/* iOS zooms the page when a focused text field has font-size < 16px. The theme renders
   form inputs at 13-14px, so EVERY form (login, register, contact, search, account,
   checkout, newsletter) triggers a jarring zoom on focus. Force >=16px for text-like
   inputs on mobile (selects open a native picker so they're for legibility only). Inputs
   are already full-width on mobile, so the larger text adds no horizontal overflow.
   Desktop (>=768px) is untouched. */
@media (max-width: 767.98px) {
    input[type="text"], input[type="email"], input[type="password"],
    input[type="tel"], input[type="number"], input[type="search"],
    input[type="url"], input[type="date"], input[type="datetime-local"],
    input:not([type]), select, textarea {
        /* !important: the theme has higher-specificity per-page rules (e.g.
           .inputs input) that otherwise keep these at 14px and re-trigger iOS zoom. */
        font-size: 16px !important;
    }
}

/* The theme sets body{overflow:hidden}, which turns <body> into a scroll container and
   BREAKS position:sticky on the header. Replace with overflow-x:clip (no scroll
   container, still no horizontal scroll) + overflow-y:visible so html/viewport is the
   scrollport and sticky works. !important to beat the minified body{overflow:hidden}. */
@media (max-width: 767.98px) {
    body { overflow-x: clip !important; overflow-y: visible !important; }
}

/* primary form actions on the account / contact form pages render as a small,
   left-aligned button (e.g. the 67px "Save" on customer-info) — easy to miss / hard
   to tap on a phone. Make the primary submit button full-width + a 44px tap target.
   Layout-only (no color) and scoped to these form pages, so product/cart CTAs and
   desktop (>=768px) are untouched. */
@media (max-width: 767.98px) {
    /* The primary action on these form pages is a .btn-primary (save-customer-info-button,
       change-password-button, contact-us-button, add-address-button, …) — NOT always a
       .button-1 and not always inside a .buttons wrapper. Target .btn-primary scoped to
       the page so every primary submit is full-width + 44px. Secondary .btn-default
       (Edit/Delete) stay inline. The header search button is .btn (not .btn-primary) and
       lives outside these wrappers, so it is unaffected. */
    .account-page .btn-primary,
    .account-page .buttons .button-1,
    .contact-page .btn-primary {
        display: block; width: 100%; min-height: var(--m-touch-min); box-sizing: border-box;
    }
    /* private-message compose (/customer/messages/new): same form ergonomics —
       44px inputs, tall message box, stacked full-width Send/Cancel */
    .private-message-send-page .form-control { min-height: var(--m-touch-min); box-sizing: border-box; }
    .private-message-send-page textarea.form-control { min-height: 160px; }
    .private-message-send-page .send-pm-button,
    .private-message-send-page .cancel-pm-button {
        display: block; width: 100%; min-height: var(--m-touch-min);
        box-sizing: border-box; margin: 0 0 10px; float: none;
    }
    /* BB-code toolbar buttons above the message box: wrap + tappable */
    .private-message-send-page .bb-code-editor-wrapper {
        display: flex; flex-wrap: wrap; gap: 4px; max-width: 100%;
    }
    .private-message-send-page .bb-code-editor-wrapper .bb-code-editor-button {
        min-width: 36px; min-height: 36px;
    }
    /* cart coupon / gift-card apply buttons render 34px tall — below the 44px
       touch minimum (flagged in the GOL001 checkout-flow audit). The grouped
       B2B cart pins button AND input to a joined 34px row with !important
       (wwwroot/css/shopping-cart-grouped.css:1748-1784), so this needs equal
       !important + later source order + the page-class specificity bump. The
       input is raised with the button to keep the joined pair aligned. */
    .shopping-cart-page .full-cart-discount-box .cart-box-wrapper input[type="text"],
    .shopping-cart-page .full-cart-gift-card-box .cart-box-wrapper input[type="text"],
    .shopping-cart-page .full-cart-discount-box .discount-button button,
    .shopping-cart-page .full-cart-gift-card-box .giftcard-button button {
        height: var(--m-touch-min) !important;
        min-height: var(--m-touch-min) !important;
        box-sizing: border-box;
    }
    /* fallback for the standard (non-grouped) cart layout */
    .shopping-cart-page .apply-discount-coupon-code-button,
    .shopping-cart-page .apply-gift-card-coupon-code-button,
    .shopping-cart-page .add-gift-card-button {
        min-height: var(--m-touch-min); box-sizing: border-box;
    }
    /* cart quantity fields: the matrix pack input renders 29px and the standard
       cart .qty-input is similarly short — sub-40px touch targets on the page's
       most-used control. 40px (not 44) keeps the matrix row alignment intact. */
    .shopping-cart-page input[id^="packquantity"],
    .shopping-cart-page .size-input-inline,
    .shopping-cart-page .qty-input {
        min-height: 40px; box-sizing: border-box;
    }
    /* secondary full-width action under the items list. The grouped-cart css
       pins it to 32px with !important (shopping-cart-grouped.css:1093) — match
       the !important at higher specificity + later order. */
    .shopping-cart-page .continue-shopping-button,
    .shopping-cart-page .full-cart-continue-shopping-button {
        min-height: var(--m-touch-min) !important;
        height: auto !important;
        box-sizing: border-box;
    }
    /* CONSISTENCY: the Contact 'Submit' was the only primary CTA rendered in dark gray
       (#333) — every other primary action (Login, Register, Search, Add to cart, Save,
       Change password, Details) uses the brand coral (--red). Align it. */
    .contact-page .contact-us-button {
        background: var(--red, #ea5648) !important;
        border-color: var(--red, #ea5648) !important;
        color: #fff !important;
    }
}

/* reserve space so the fixed bottom nav never covers content/footer.
   scoped to portrait because the bottom nav is hidden in landscape. */
@media (max-width: 767.98px) and (orientation: portrait) {
    body { padding-bottom: calc(var(--m-bottomnav-h) + env(safe-area-inset-bottom, 0px)); }
}

/* back-to-top widget (#backTop, theme _Root.cshtml): simplex.js pins it inline at
   bottom:40 / right:40 (position:fixed) and fades it in past 200px scroll — at
   bottom:40 it overlapped the fixed bottom tab bar. Originally core HID it on mobile
   (GOL001-era decision); revised 2026-06-05 (user, CHR001 round): long mobile pages
   benefit from a scroll-to-top affordance, so core now RE-SEATS it above the tab bar
   instead. !important is required to beat the plugin's inline bottom/right (a
   stylesheet !important outranks inline styles). Portrait-scoped: the bottom nav is
   hidden in landscape, where the theme's default seat is correct. The button colour
   comes from the shop's own tokens (--red / --rd-accent-red) = shop layer. */
@media (max-width: 767.98px) and (orientation: portrait) {
    #backTop {
        bottom: calc(var(--m-bottomnav-h) + env(safe-area-inset-bottom, 0px) + 12px) !important;
        right: 16px !important;
        transition: bottom .25s ease, opacity .2s ease;
        /* READABILITY pass (user, GOL002 round): the theme's 55px square FAB
           (35px + 2x10px padding, brand-coloured) sat heavily over content.
           Mobile: 44px CIRCLE (24px + 2x10px padding keeps the sprite glyph
           centred), translucent at rest so the page reads through, full
           opacity on press. Colour still flows from the shop's own tokens. */
        width: 24px !important;
        height: 24px !important;
        border-radius: 50% !important;
        opacity: .9;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
        /* the theme's top-arrow.png sprite goes blurry/faint at FAB scale
           (user report) — draw a crisp FontAwesome chevron instead. */
        background-image: none !important;
    }
    #backTop::after {
        content: "\f077";                 /* fa chevron-up */
        font: normal normal normal 16px/24px FontAwesome;
        color: #fff;
        display: block;
        text-align: center;
        text-indent: 0;                   /* parent hides its text at -9999px */
    }
    /* shop skins re-paint the sprite on :hover via the background SHORTHAND
       (wigstheme: `#backTop:hover { background: url(top-arrow.png) ... }`) —
       on tap that stacked the unscaled sprite behind/over the FA chevron
       (user report: distorted on click). Mute the image in EVERY state;
       only the bg-color may change. */
    #backTop:hover, #backTop:active, #backTop:focus {
        opacity: 1;
        background-image: none !important;
    }
    /* pages with a SHOWN sticky CTA bar (PDP add-to-cart / cart checkout —
       .m-pdp-cta.m-show, ~60px: 44px button + 8px paddings) share the same
       right-bottom corner: the arrow parked ON the CHECKOUT button (user
       screenshot, CHR001 round). Keep the right-edge stack ordered
       bottom-nav -> CTA bar -> backTop; the transition above slides the
       arrow back down when the CTA hides. */
    html:has(.m-pdp-cta.m-show) #backTop {
        bottom: calc(var(--m-bottomnav-h) + env(safe-area-inset-bottom, 0px) + 60px + 12px) !important;
    }
}

/* B2B size-matrix pack inputs (PDP): the ProductMatrix plugin sets font-size:12px
   !important from an in-body <style> at up to (0,3,0) specificity
   (.matrix-container[data-is-pack-sale="true"] .pack-input-individual), which beats the
   generic 16px rule above and re-triggers the iOS focus-zoom. Out-rank it (html prefix
   -> (0,3,1)); the id arm covers the global #pack-count-input spinner. 2-3 digit pack
   counts still fit the 45px-wide matrix cells at 16px. */
@media (max-width: 767.98px) {
    html .matrix-container[data-is-pack-sale="true"] .pack-input,
    html .matrix-container[data-is-pack-sale="true"] .pack-input-individual,
    html .matrix-container .pack-input,
    html .matrix-container .pack-input-individual,
    html #pack-count-input, html .pack-count-input {
        font-size: 16px !important;
    }
}

/* respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- cross-page consistency (mobile) ---------- */
@media (max-width: 767.98px) {
    /* page titles: centre them on every page (account/contact pages were already
       centred, login/search/cart/wishlist were left-aligned). The .page-title is a direct
       child of .page (NOT inside .master-wrapper-main). */
    .page > .page-title { text-align: center !important; }

    /* page titles: top breathing room. Measured on /login at 390px: 2px below the
       sticky header — the heading reads as clipped/distorted (user report).
       Desktop already has ~80px above the title, so top margin is mobile-only. */
    .page > .page-title { margin-top: 14px; }
}

/* page titles, ALL viewports: the title sat 0px above the first content block on
   both mobile AND desktop (user report 2026-06-04) — give it bottom separation.
   Vertical margin only; no structural change. */
.page > .page-title { margin-bottom: 16px; }

/* ---------- login page (mobile) ---------- */
@media (max-width: 767.98px) {
    /* form ergonomics: Email/Password rendered 34px and LOG IN/REGISTER 40px —
       below the 44px touch minimum. Same pattern as the account/contact fix above. */
    .login-page input[type="text"],
    .login-page input[type="email"],
    .login-page input[type="password"] {
        min-height: var(--m-touch-min); box-sizing: border-box;
    }
    .login-page .btn-primary {
        display: block; width: 100%; min-height: var(--m-touch-min); box-sizing: border-box;
    }

    /* checkout (onepage): billing form-controls rendered 34px and the
       next-step buttons 40px (GOL002 audit 2026-06-04) — same ergonomics floor
       as the login/account/contact pages. Scoped to the checkout page only. */
    .checkout-page .form-control,
    .checkout-page select.form-control,
    .checkout-page input[type="text"],
    .checkout-page input[type="email"],
    .checkout-page input[type="tel"] {
        min-height: var(--m-touch-min); box-sizing: border-box;
    }
    .checkout-page .btn-primary {
        display: block; width: 100%; min-height: var(--m-touch-min); box-sizing: border-box;
    }

    /* a returning visitor's primary job on /login is LOGGING IN, but the form sat
       below the NEW CUSTOMER pitch (one full screen of scrolling, partially under
       the bottom tab-bar). Flip the stack order on mobile only: returning-customer
       form first, register pitch second. The returning column is the row's LAST
       child in every Login.cshtml branch. Bootstrap .row ::before/::after clearfix
       must not become flex items (proven item-grid gotcha). */
    .login-page .customer-blocks .row { display: flex; flex-direction: column; }
    .login-page .customer-blocks .row::before,
    .login-page .customer-blocks .row::after { content: none; }
    .login-page .customer-blocks .row > div:last-child { order: -1; }
}

/* print: never let fixed/sticky chrome cover printed content */
@media print {
    .header .header-lower { position: static !important; }
    .mobile-bottom-nav { display: none !important; }
}

/* grouped-cart per-size qty inputs (29px) + save/remove icon buttons (40px)
   sat under the 44px touch floor (sweep finding D3). The grouped cart css
   pins sizes with !important - counter with equal !important + page scope. */
@media (max-width: 767.98px) {
    .shopping-cart-page .size-input-inline {
        min-height: var(--m-touch-min, 44px) !important;
        box-sizing: border-box;
    }
    .shopping-cart-page .full-cart-update-color-btn,
    .shopping-cart-page .full-cart-remove-color-btn {
        min-height: var(--m-touch-min, 44px) !important;
        min-width: 50px;
        box-sizing: border-box;
    }
}

/* v2 — #backTop follows the v3 chrome (mobile-header-v3 / mobile-product-v3):
   - hidden while the header is hidden (scrolling down): it is only useful on the way
     back up, and at rest it covered the order rows' remove buttons (measured);
   - with the PDP CTA shown the tab bar is gone, so it stacks in the left gutter above
     the a11y trigger instead of on the right-edge tower. */
/* scoped to max-width (single condition, NFR-02) — both hooks only arise on mobile, but a
   phone resized/rotated past 767px must not keep the left-gutter seat. */
@media (max-width: 767.98px) {
    body.m-hdr-hidden #backTop {
        opacity: 0 !important;
        pointer-events: none;
    }
    html:has(.m-pdp-cta.m-show:not(.m-cart-cta)) #backTop {
        left: 4px !important;
        right: auto !important;
        width: 12px !important;
        height: 12px !important;
        bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 12px + 32px + 8px) !important;
    }
    html:has(.m-pdp-cta.m-show:not(.m-cart-cta)) #backTop::after {
        font-size: 12px;
        line-height: 12px;
    }
}