/* ============================================================
   mobile-product.css — CORE mobile product detail (<= 767px)
   ------------------------------------------------------------
   Sticky add-to-cart bar (best practice): a compact [price][Add to
   cart] bar docks above the bottom tab bar and appears only once the
   main add-to-cart button has scrolled out of view. Built by
   mobile-product.js, which proxies clicks to the real button (reusing
   the theme's AjaxCart logic). Visually neutral via --m-* tokens.
   ============================================================ */
.m-pdp-cta { display: none; }

@media (max-width: 767.98px) {
    .m-pdp-cta {
        display: flex; align-items: center; gap: 12px;
        position: fixed; inset-inline: 0;
        inset-block-end: calc(var(--m-bottomnav-h) + env(safe-area-inset-bottom, 0px));
        /* one BELOW the bottom nav: the hide animation slides the bar down BEHIND
           the tab bar instead of painting over it (same z + later DOM = on top) */
        z-index: calc(var(--m-z-bottomnav) - 1);
        background: var(--m-header-bg); color: var(--m-header-fg);
        border-block-start: 1px solid var(--m-border);
        padding: 8px 12px;
        /* hidden = fully OFF-SCREEN: 130% of the bar's own height only reached the
           bottom-nav strip, leaving the bar parked over the tab bar (visible bug) */
        transform: translateY(calc(100% + var(--m-bottomnav-h) + env(safe-area-inset-bottom, 0px) + 12px));
        transition: transform .25s ease;
    }
    .m-pdp-cta.m-show { transform: translateY(0); }

    .m-pdp-cta .m-pdp-price { flex: 0 0 auto; font-weight: 700; font-size: 17px; white-space: nowrap; }
    .m-pdp-cta .m-pdp-add {
        flex: 1 1 auto; min-height: var(--m-touch-min);
        border: 0; border-radius: 6px; padding: 0 14px;
        background: var(--m-accent); color: #fff; font-weight: 600; font-size: 15px;
        /* 데스크톱 담기 버튼과 동일 변수로 대소문자 통일(기본 uppercase, 각 샵이 결정). */
        text-transform: var(--multicolor-add-transform, uppercase);
        cursor: pointer;
    }
    .m-pdp-cta .m-pdp-add:active { opacity: .85; }
    /* cart variant (mobile-cart.js): the real button renders uppercase via the
       grouped-cart css; mirror it so the proxy reads identically */
    .m-cart-cta .m-pdp-add { text-transform: uppercase; }

    /* ShareThis injects inline share buttons carrying an enormous z-index (94034). When
       they scroll into the bottom region they paint OVER the fixed sticky add-to-cart bar
       and bottom nav (z 1031). Confine the whole share widget to its own LOW stacking
       context (position:relative + z-index:0) so no descendant z-index can escape above
       our fixed chrome. !important guards against ShareThis's inline styles. */
    .product-share-button,
    .sharethis-inline-share-buttons {
        position: relative !important;
        z-index: 0 !important;
    }
}

/* hide in landscape (bottom nav is hidden there too) */
@media (max-width: 767.98px) and (orientation: landscape) {
    .m-pdp-cta { display: none; }
}

/* PDP inline purchase controls: the sticky CTA is the primary action, but the
   in-page qty field (28px) and add-to-cart/wishlist/compare buttons (37-38px)
   sat under the 44px touch minimum (found in the GOL002 audit - B2B GOL001
   guests never saw this block, so it was missed). Layout-only, no colours. */
@media (max-width: 767.98px) {
    /* product-details-minimal.css pins `.product-details-page .add-to-cart
       .qty-input { height:38px }` (3-class specificity) and a 28px min-height
       reaches the input elsewhere - match the specificity and force the floor. */
    .product-details-page .qty-input,
    .product-details-page .add-to-cart .qty-input,
    .product-details-page input.qty-input.form-control {
        min-height: var(--m-touch-min, 44px) !important;
        height: auto !important;
        box-sizing: border-box;
    }
    .product-details-page .add-to-cart-button,
    .product-details-page .add-to-wishlist-button,
    .product-details-page .add-to-compare-list-button {
        min-height: var(--m-touch-min, 44px); box-sizing: border-box;
    }
}

/* third-party accessibility floating button (.at-trigger): originally lifted
   above the CTA on PDP/cart only (sweep D1) — but the restored #backTop now
   shares that lifted right-edge seat and the two OVERLAPPED (user screenshot,
   GOL002 round 2026-06-05). REVISED (user choice): a single right-edge tower —
   bottom-nav -> CTA bar -> #backTop -> a11y trigger. The a11y seat sits one
   slot (55px backTop + 8px gap) above backTop's seat and steps up with the
   same html:has(.m-pdp-cta.m-show) state hook, so the stack never collides
   whatever combination of CTA/backTop is on screen. */
@media (max-width: 767.98px) {
    .at-trigger {
        top: auto !important;   /* the widget pins via top - top wins over bottom when both set */
        left: auto !important;
        right: 16px !important; /* column-aligned with #backTop (right:16) */
        /* slight intentional overlap onto backTop (user choice: -6px —
           clustered-FAB look) above the 44px backTop circle (readability
           pass: both buttons are 44px circles, translucent at rest so page
           content reads through; full opacity on press). a11y paints ABOVE
           backTop (z 999999999). */
        bottom: calc(var(--m-bottomnav-h, 56px) + env(safe-area-inset-bottom, 0px) + 12px + 44px - 6px) !important;
        z-index: 1000000000 !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        opacity: .82;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18) !important;
        transition: bottom .25s ease, opacity .2s ease;
    }
    .at-trigger:hover, .at-trigger:active { opacity: 1; }
    html:has(.m-pdp-cta.m-show) .at-trigger {
        bottom: calc(var(--m-bottomnav-h, 56px) + env(safe-area-inset-bottom, 0px) + 60px + 12px + 44px - 6px) !important;
    }
    /* PDP qty steppers were 20x20 (sweep D3) - give them a real hit area */
    .product-details-page .increase-quantity,
    .product-details-page .decrease-quantity {
        min-width: 36px; min-height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
        box-sizing: border-box;
    }
    /* the 44px keys above need 80+36+36=152px but simplex clamps the box to
       135px (simplex.styles.css .addtocart-quantity-box{width:135px}) and the
       minimal skin adds overflow:hidden — the second key clipped (GOL001 '−'
       cut off). Size the box to its content and order the group [−][input][+]
       (theme markup is [input][+][−]). */
    .product-details-page .addtocart-quantity-box {
        width: auto !important; max-width: max-content;
        display: inline-flex; align-items: center;
    }
    .product-details-page .addtocart-quantity-box .decrease-quantity { order: 1; }
    .product-details-page .addtocart-quantity-box .qty-input { order: 2; }
    .product-details-page .addtocart-quantity-box .increase-quantity { order: 3; }
    /* unify the PDP action buttons to one full-width column — mismatched
       cart/wishlist widths read as broken (GOL001 report). The wishlist row
       lives inside .overview-buttons{padding:16px 15px 0} while the cart
       button does not — zero the horizontal padding so both align. */
    .product-details-page .add-to-cart-button,
    .product-details-page .add-to-wishlist-button {
        display: block; width: 100% !important;
        margin-left: 0 !important; margin-right: 0 !important;
    }
    .product-details-page .overview-buttons {
        padding-left: 0 !important; padding-right: 0 !important;
    }
}

/* ============================================================
   v3 — the shown CTA replaces the tab bar (mobile-header-v3.css slides the bar
   away via the same html:has(.m-pdp-cta.m-show) hook), so it docks at the very
   bottom. Measured at 377x723 with a 29-colour order: content went from 480px
   (66%) to 663px (92%) together with the hide-on-scroll header.
   ============================================================ */
@media (max-width: 767.98px) {
    .m-pdp-cta {
        transition: transform .25s ease, inset-block-end .25s ease;
    }
    .m-pdp-cta.m-show:not(.m-cart-cta) {
        inset-block-end: env(safe-area-inset-bottom, 0px);
    }

    /* two-line summary: "29 colors · 510 pcs" over "$17,850.00". On one line the
       total was the part that got cut ("... · $1…") at <= 390px, and without the cap
       the button wrapped to two lines instead (measured). */
    /* scoped with :has(.m-pdp-count) — single-price PDPs and the cart bar (mobile-cart.js)
       keep the v2 layout (price hugging its text, button taking the rest). */
    .m-pdp-cta .m-pdp-price:has(.m-pdp-count) {
        flex: 1 1 auto; min-width: 0;
        display: flex; flex-direction: column; justify-content: center;
        line-height: 1.2;
    }
    .m-pdp-cta .m-pdp-count {
        font-size: 13px; font-weight: 600; opacity: .85;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .m-pdp-cta .m-pdp-sum { font-size: 17px; font-weight: 700; white-space: nowrap; }
    .m-pdp-cta:has(.m-pdp-count) .m-pdp-add { flex: 0 0 auto; white-space: nowrap; }

    /* floating buttons while the CTA is shown: the right-edge tower (x 317-361) sat
       exactly over the order rows' remove (x) and total column (measured). Move both
       into the panel's 24px left gutter, 32px each, so they clear the swatch (x>=37).
       !important — the widget pins itself with inline styles. */
    html:has(.m-pdp-cta.m-show:not(.m-cart-cta)) .at-trigger {
        left: 4px !important;
        right: auto !important;
        width: 32px !important;
        height: 32px !important;
        bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 12px) !important;
    }
}