/* Mobile-only sticky Add to Cart bar (PDP + Bundle detail).
   Always visible on mobile (not scroll-triggered); see
   public/js/sticky-add-bar-scroll.js for the one exception: it stays
   clear of the cookie-consent banner while that's still on screen.
   Two rows: variant/name control on top, quantity + Add to Cart below.
   The variant control on PDP is a custom "dropup" (opens upward, since a
   native <select> can't be forced to open upward and would otherwise be
   cut off by the viewport edge) backed by a hidden real <select> that stays
   the single source of truth for the existing write-through sync logic. */

.sticky-add-bar {
    display: none;
}

@media (max-width: 62rem) {
    /* Bar is always on screen now, so reserve space at the true bottom of the
       page (below the footer) it would otherwise permanently cover. Targets
       the footer specifically (not body) — body has a fixed height:100% with
       box-sizing:border-box, so padding there is absorbed rather than adding
       scrollable space; the footer's height is auto and does extend it. */
    body:has(.sticky-add-bar) #kt_footer {
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    }

    .sticky-add-bar {
        display: flex;
        flex-direction: column;
        gap: 8px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        background: var(--header-bg, #D0C6B9);
        color: #000;
        padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
        transform: translateY(0);
        transition: transform 0.25s ease;
    }

    /* Stay clear of the cookie-consent banner (also fixed-bottom, z-index 1080)
       rather than fight it for the same strip while it's still on screen. */
    .sticky-add-bar--cookie-open {
        transform: translateY(100%) !important;
        pointer-events: none !important;
    }

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

    .sticky-add-bar__row-top {
        display: flex;
        justify-content: center;
    }

    .sticky-add-bar__row-bottom {
        display: flex;
        align-items: stretch;
        gap: 10px;
    }

    .sticky-add-bar__name {
        text-align: center;
        font-size: 0.8rem;
        line-height: 1.3;
    }

    .sticky-add-bar__name strong {
        display: block;
        font-size: 0.95rem;
    }

    .sticky-add-bar__qty {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        border: 1px solid #000;
    }

    .sticky-add-bar__qty button {
        border: none;
        background: transparent;
        color: #000;
        width: 34px;
        height: 42px;
        font-size: 1.1rem;
        cursor: pointer;
    }

    .sticky-add-bar__qty-value {
        display: inline-block;
        min-width: 24px;
        text-align: center;
        font-size: 0.9rem;
    }

    .sticky-add-bar__add-btn {
        flex: 1 1 auto;
        border: none;
        background: #000;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 10px 14px;
        font-size: 0.85rem;
        font-family: var(--pd-font-body, inherit);
        font-weight: var(--pd-fw-regular, 500);
        cursor: pointer;
        white-space: nowrap;
    }

    .sticky-add-bar__add-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* Custom dropup — visual replacement for the (hidden) real <select>,
       which stays in the DOM as the write-through source of truth. */
    .sticky-dropup {
        position: relative;
        width: 100%;
        max-width: 320px;
    }

    .sticky-dropup__trigger {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        background: transparent;
        border: 1px solid #000;
        color: #000;
        padding: 9px 12px;
        font-size: 0.85rem;
        font-family: var(--pd-font-body, inherit);
        cursor: pointer;
    }

    .sticky-dropup__trigger-icon {
        flex: 0 0 auto;
        transition: transform 0.15s ease;
    }

    .sticky-dropup.is-open .sticky-dropup__trigger-icon {
        transform: rotate(180deg);
    }

    .sticky-dropup__list {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        margin: 0 0 6px;
        padding: 4px 0;
        max-height: 45vh;
        overflow-y: auto;
        background: #fff;
        border: 1px solid #000;
        list-style: none;
        z-index: 10;
        box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.15);
    }

    .sticky-dropup__list[hidden] {
        display: none;
    }

    .sticky-dropup__list li button {
        width: 100%;
        text-align: left;
        padding: 10px 12px;
        border: none;
        background: transparent;
        color: #000;
        font-size: 0.85rem;
        font-family: var(--pd-font-body, inherit);
        cursor: pointer;
    }

    .sticky-dropup__list li button:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .sticky-dropup__list li button:not(:disabled):hover,
    .sticky-dropup__list li button[aria-selected="true"] {
        background: rgba(0, 0, 0, 0.08);
    }
}

@media (min-width: 62.01rem) {
    .sticky-add-bar {
        display: none !important;
    }
}