/* ============================================================================
   STICKY ADD TO CART — single product, phones and tablets only
   Markup and behaviour: inc/lsfab-sticky-cart.php, js/sticky-cart.js.

   The bar is fixed to the bottom of the viewport and is visible from the top
   of the page (2026-09-07, CVR-04 — it used to wait until the real Add to cart
   button had scrolled away, which is the one moment it is worth nothing). It
   steps aside only for the footer. z-index sits above the sticky header (500)
   and below the mobile scrim/drawer (900/901) and the cart drawer, so both of
   those cover it when open.

   The options sheet is a SIBLING of the bar, not a child, on purpose: the bar
   carries `will-change: transform`, which makes it a containing block for
   fixed-position descendants, and a sheet inside it would be positioned
   against the bar rather than the viewport.
   ========================================================================= */

.ls-sticky-cart {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 600;
    background-color: #0d0d0d;
    border-top: 1px solid var(--ls-hairline);
    box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.55);
    padding: 10px var(--ls-space-3) calc(10px + env(safe-area-inset-bottom, 0px));
    transform: translateY(110%);
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
.ls-sticky-cart[hidden] { display: none; }
.ls-sticky-cart.is-visible { transform: none; }

/* The same purple->cyan rule the product cards carry under their image. */
.ls-sticky-cart::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 2px;
    background: var(--ls-gradient-brand);
}

.ls-sticky-cart__inner {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 720px;
    margin: 0 auto;
}

.ls-sticky-cart__thumb {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: var(--ls-radius-md);
    object-fit: cover;
    background-color: var(--ls-surface-1);
}

.ls-sticky-cart__meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
}

.ls-sticky-cart__title {
    font-family: var(--ls-font-body);
    font-size: var(--ls-small);
    font-weight: 600;
    line-height: var(--ls-leading-snug);
    color: var(--ls-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ls-sticky-cart__line {
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1.1;
}

.ls-sticky-cart__price,
.ls-sticky-cart__price .amount,
.ls-sticky-cart__price bdi {
    font-family: var(--ls-font-body);
    font-size: var(--ls-price-card);
    font-weight: 700;
    letter-spacing: 0;
    color: var(--ls-text);
}
.ls-sticky-cart__price del { display: none; }
.ls-sticky-cart__price ins { text-decoration: none; }
.ls-sticky-cart__price .woocommerce-Price-currencySymbol { font-size: inherit; }
/* The site appends a small grey "USD" inside the amount; the bar has no room for it. */
.ls-sticky-cart__price .amount span:not(.woocommerce-Price-currencySymbol) { display: none; }

.ls-sticky-cart__sub {
    font-family: var(--ls-font-body);
    font-size: var(--ls-caption);
    color: var(--ls-text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
}
.ls-sticky-cart__sub:empty { display: none; }
.ls-sticky-cart__sub.is-attn { color: var(--ls-amber); }

/* Deliberately not .ls-btn: the component locks its heights at 48/40 with
   !important and this one needs exactly 44px to fit the bar and the tap
   target minimum at the same time. Everything else follows the same tokens. */
.ls-sticky-cart__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 44px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--ls-red-btn);
    border-radius: var(--ls-btn-radius);
    background-color: var(--ls-red-btn);
    color: #ffffff;
    font-family: var(--ls-font-display);
    font-size: var(--ls-btn-font-sm);
    font-weight: 700;
    letter-spacing: var(--ls-tracking-button);
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color var(--ls-transition), border-color var(--ls-transition);
}
.ls-sticky-cart__btn:hover,
.ls-sticky-cart__btn:active {
    background-color: var(--ls-red-btn-hover);
    border-color: var(--ls-red-btn-hover);
    color: #ffffff;
}
.ls-sticky-cart__btn:focus-visible {
    outline: none;
    box-shadow: var(--ls-focus-ring);
}
.ls-sticky-cart__btn.is-choose {
    background-color: transparent;
    border-color: var(--ls-hairline-strong);
}
.ls-sticky-cart__btn.is-choose:hover,
.ls-sticky-cart__btn.is-choose:active {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--ls-hairline-strong);
}

/* Anything else anchored to the bottom edge moves up while the bar is shown:
   the reCAPTCHA badge, the LS Social Proof toasts and TrustPulse.

   TrustPulse was measured sitting ON the bar on 2026-09-07 — a 96px toast at
   bottom:25px and z-index 99999, over a 65px bar. It never showed up before
   because the bar itself only appeared once you had scrolled past the real
   button; now that the bar is on from the top of the page, a toast every few
   seconds would have covered the buy button for the whole visit. */
body.ls-sticky-cart-on .grecaptcha-badge { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
body.ls-sticky-cart-on .lssp-root--bottom-left,
body.ls-sticky-cart-on .lssp-root--bottom-right { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
body.ls-sticky-cart-on .tp-widget-container { bottom: calc(85px + env(safe-area-inset-bottom, 0px)) !important; }

/* z-index 99999 puts TrustPulse above the sheet (620) and its scrim, so it has
   to stand down entirely while the options drawer is open. */
body.ls-buysheet-open .tp-widget-container,
body.ls-buysheet-open .grecaptcha-badge { display: none !important; }

@media (min-width: 981px) {
    .ls-sticky-cart { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .ls-sticky-cart { transition: none; }
}

/* The whole meta block reopens the options sheet once a combination is chosen,
   so a shopper can change their mind without scrolling back up the page. */
.ls-sticky-cart__meta.is-tappable { cursor: pointer; }
.ls-sticky-cart__meta.is-tappable:focus-visible {
    outline: none;
    border-radius: var(--ls-radius-sm);
    box-shadow: var(--ls-focus-ring);
}
.ls-sticky-cart__meta.is-tappable .ls-sticky-cart__sub::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(-135deg);
}

/* ============================================================================
   THE OPTIONS SHEET — 2026-09-07 (CVR-04)
   Markup: inc/lsfab-sticky-cart.php. Behaviour: js/sticky-cart.js, with the
   option controls themselves built by js/variation-ui.js.

   A drawer, deliberately not a jump link: the tested version that only
   scrolled to the buy area moved clicks but not orders.
   ========================================================================= */

.ls-buysheet__scrim {
    position: fixed;
    inset: 0;
    z-index: 610;
    background-color: rgba(0, 0, 0, 0.66);
    opacity: 0;
    transition: opacity 220ms ease;
}
.ls-buysheet__scrim[hidden] { display: none; }
.ls-buysheet__scrim.is-open { opacity: 1; }

.ls-buysheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 620;
    display: flex;
    flex-direction: column;
    max-height: min(82vh, 640px);
    background-color: var(--ls-surface-1);
    border-top: 1px solid var(--ls-hairline);
    border-radius: var(--ls-radius-xl) var(--ls-radius-xl) 0 0;
    box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.6);
    transform: translateY(100%);
    transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ls-buysheet[hidden] { display: none; }
.ls-buysheet.is-open { transform: none; }

.ls-buysheet::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 2px;
    border-radius: var(--ls-radius-xl) var(--ls-radius-xl) 0 0;
    background: var(--ls-gradient-brand);
}

/* --- head --- */

.ls-buysheet__head {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--ls-space-3);
    flex: 0 0 auto;
    padding: var(--ls-space-5) var(--ls-space-4) var(--ls-space-3);
    border-bottom: 1px solid var(--ls-hairline-faint);
}
.ls-buysheet__grip {
    position: absolute;
    left: 50%;
    top: 8px;
    width: 40px;
    height: 4px;
    margin-left: -20px;
    border-radius: var(--ls-radius-pill);
    background-color: var(--ls-hairline-strong);
}
.ls-buysheet__title {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    font-family: var(--ls-font-display);
    font-size: var(--ls-h4);
    font-weight: 700;
    line-height: var(--ls-leading-h4);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ls-text);
}
.ls-buysheet__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin: -8px -10px -8px 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--ls-radius-md);
    color: var(--ls-text-soft);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.ls-buysheet__close:hover { color: var(--ls-text); background-color: rgba(255, 255, 255, 0.06); }
.ls-buysheet__close:focus-visible { outline: none; box-shadow: var(--ls-focus-ring); color: var(--ls-text); }

/* --- body --- */

.ls-buysheet__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--ls-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--ls-space-4);
}

.ls-varui-field {
    display: flex;
    flex-direction: column;
    gap: var(--ls-space-2);
}
.ls-varui-label {
    font-family: var(--ls-font-body);
    font-size: var(--ls-micro);
    font-weight: 600;
    letter-spacing: var(--ls-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--ls-text-soft);
    line-height: 1.3;
}
/* An attribute with more than four values keeps a select here too — a Finish
   with 32 options is a list, not a set of buttons. */
.ls-varui-mirror {
    width: 100%;
    min-height: 48px;
    padding: 0 var(--ls-space-3);
    background-color: var(--ls-surface-2);
    border: 1px solid var(--ls-hairline-input);
    border-radius: var(--ls-radius-md);
    color: var(--ls-text);
    font-family: var(--ls-font-body);
    font-size: var(--ls-body);
}
.ls-varui-mirror:focus-visible { outline: none; border-color: var(--ls-red); box-shadow: var(--ls-focus-ring); }

/* --- foot --- */

/* Flex-wrap, not a two-column grid. The grid version put the price on a row
   spanning both tracks, and a spanning item feeds its intrinsic width back
   into the tracks it spans — so the `auto` quantity column inflated to about
   277px of a 375px sheet and squeezed "Add to cart" into three lines. */
.ls-buysheet__foot {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ls-space-3);
    padding: var(--ls-space-3) var(--ls-space-4) calc(var(--ls-space-4) + env(safe-area-inset-bottom, 0px));
    background-color: #0d0d0d;
    border-top: 1px solid var(--ls-hairline-faint);
}

.ls-buysheet__price {
    flex: 1 1 100%;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--ls-space-1) var(--ls-space-2);
}
.ls-buysheet__price-label {
    font-family: var(--ls-font-body);
    font-size: var(--ls-micro);
    font-weight: 600;
    letter-spacing: var(--ls-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--ls-text-soft);
    line-height: 1.3;
}
.ls-buysheet__price-amount {
    font-family: var(--ls-font-display);
    font-size: var(--ls-price-total);
    font-weight: 700;
    line-height: 1.1;
    color: var(--ls-text);
}
.ls-buysheet__price-note {
    margin-left: auto;
    font-family: var(--ls-font-body);
    font-size: var(--ls-caption);
    color: var(--ls-text-soft);
}
.ls-buysheet__price-note:empty { display: none; }

.ls-buysheet__qty {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    background-color: var(--ls-surface-2);
    border: 1px solid var(--ls-hairline-input);
    border-radius: var(--ls-radius-md);
    overflow: hidden;
}
/* 44px, not the cart's 40: this is a primary control on a phone and the site's
   tap-target standard is 44 in both directions. */
.ls-buysheet__qty-btn {
    width: 44px;
    height: 48px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--ls-text-soft);
    font-family: var(--ls-font-body);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.ls-buysheet__qty-btn:first-child { border-right: 1px solid var(--ls-hairline-input); }
.ls-buysheet__qty-btn:last-child { border-left: 1px solid var(--ls-hairline-input); }
.ls-buysheet__qty-btn:hover { background-color: rgba(255, 255, 255, 0.08); color: var(--ls-text); }
.ls-buysheet__qty-btn:focus-visible { outline: none; box-shadow: inset var(--ls-focus-ring); color: var(--ls-text); }
/* !important and a flex basis, because the site's global form-field rules give
   every text input width:100% — measured at 263px inside a 375px sheet, which
   pushed Add to cart onto a third row on its own. */
.ls-buysheet .ls-buysheet__qty-input {
    flex: 0 0 46px;
    width: 46px !important;
    min-width: 0;
    max-width: 46px;
    height: 48px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    color: var(--ls-text);
    font-family: var(--ls-font-body);
    font-size: var(--ls-body);
    font-weight: 600;
    text-align: center;
    -moz-appearance: textfield;
}
.ls-buysheet__qty-input::-webkit-outer-spin-button,
.ls-buysheet__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ls-buysheet__add {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    white-space: nowrap;
    height: 52px;
    margin: 0;
    padding: 0 var(--ls-space-4);
    background-color: var(--ls-red-btn);
    border: 1px solid var(--ls-red-btn);
    border-radius: var(--ls-btn-radius);
    color: #ffffff;
    font-family: var(--ls-font-display);
    font-size: var(--ls-btn-font);
    font-weight: 700;
    letter-spacing: var(--ls-tracking-button);
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color var(--ls-transition), border-color var(--ls-transition), opacity var(--ls-transition);
}
.ls-buysheet__add:hover:not(:disabled),
.ls-buysheet__add:active:not(:disabled) {
    background-color: var(--ls-red-btn-hover);
    border-color: var(--ls-red-btn-hover);
}
.ls-buysheet__add:focus-visible { outline: none; box-shadow: var(--ls-focus-ring); }
.ls-buysheet__add:disabled {
    background-color: transparent;
    border-color: var(--ls-hairline-strong);
    color: var(--ls-text-soft);
    cursor: default;
}

@media (min-width: 981px) {
    .ls-buysheet,
    .ls-buysheet__scrim { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .ls-buysheet,
    .ls-buysheet__scrim { transition: none; }
}