/* ====================================================================
   Mobile header + menu (≤767px)
   The header is a smart-sticky (Headroom) bar that also hosts the account
   menu: a "Menu" hamburger on the right opens a frosted panel that slides
   down from under the header. js/sticky-header.js injects the toggle/scrim
   and drives the open/close + peek behaviour. Desktop is untouched.
   ==================================================================== */

/* --- Smart sticky header (Headroom): reveal on scroll-up, peek on scroll-down */
@media (max-width: 767px) {
    .page-header {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        /* Above the order-summary-bar (z 1000) so the header + its hamburger stay
           on top of it and above the open menu's scrim. */
        z-index: 1003;
        transition: transform 0.35s ease;
        will-change: transform;
    }
    .page-header.is-peek {
        transform: translateY(calc(-100% + 14px));
    }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .page-header { transition: none; }
}

@media (max-width: 767px) {
    /* Form-first workflow → the mobile header drops the cart and the store
       label, leaving room for the logo + dealer avatar + Menu hamburger. */
    .page-header .minicart-wrapper,
    .page-header .store-label {
        display: none !important;
    }

    /* Lay the header bar out as a flex row so the logo sits left and the
       avatar + hamburger sit right (overrides Luma's float header). */
    .page-header .header.content {
        display: flex;
        align-items: center;
        gap: 12px;
        position: relative;
    }
    .page-header .header.content .logo {
        float: none;
        margin: 0 auto 0 0;   /* push everything else to the right */
    }
    .page-header .header.content .dealer-avatar {
        float: none;
        margin: 0;
    }

    /* Hamburger (injected by sticky-header.js) — icon only, no chrome. The theme's
       default button styling adds a 1px border + focus box; kill it on every state
       (higher specificity + !important) so the icon sits clean with no box. */
    .page-header .header.content .zhik-menu-toggle,
    .page-header .header.content .zhik-menu-toggle:hover,
    .page-header .header.content .zhik-menu-toggle:focus,
    .page-header .header.content .zhik-menu-toggle:active {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: none !important;
        border: 0 !important;
        outline: none !important;
        box-shadow: none !important;
        padding: 8px;
        color: #fff;
        line-height: 1;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .zhik-menu-toggle i { font-size: 22px; }

    /* The old in-content "My Account" title bar is replaced by the hamburger. */
    .block-collapsible-nav-title {
        display: none !important;
    }

    /* `.columns` is a flexbox, so `.sidebar-main` (z-index:100) is a flex item
       that creates a stacking context — it TRAPS the fixed drawer at root-level
       100, beneath the order-summary-bar (1000) and the body-level scrim (1001),
       no matter how high the drawer's own z-index is. Lifting this ancestor
       context (while the menu is open) is what actually puts the drawer on top
       and makes its items clickable. */
    body.zhik-nav-open .sidebar-main {
        z-index: 1002;
    }

    /* Frosted menu drawer: anchored top-right under the header, sized to the short
       menu (not full width), slides in from the right. We take over show/hide from
       Luma's collapsible (force display, drive via body class). */
    .block-collapsible-nav-content {
        display: block !important;
        position: fixed;
        top: var(--zhik-header-bottom, 68px);
        right: 0;
        left: auto;
        width: 300px;
        max-width: 86vw;
        max-height: calc(100vh - var(--zhik-header-bottom, 68px) - 12px);
        overflow-y: auto;
        /* Keep the drawer's own scroll from chaining to the page (which would
           move the window and trip the header's scroll-to-close handler). */
        overscroll-behavior: contain;
        margin: 0;
        /* !important: the theme paints the nav panel opaque white, which would
           hide the frost. More translucent + stronger blur so the page reads
           through as frosted glass, not a flat white panel. */
        background: rgba(255, 255, 255, 0.4) !important;
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        /* Round only the inner (left) edge; the right edge is flush to the screen,
           so its corners stay square. !important beats `.block-collapsible-nav
           .content`'s all-corner @card-radius. */
        border-radius: 16px 0 0 16px !important;
        box-shadow: -8px 14px 26px rgba(0, 0, 0, 0.16);
        transform: translateX(110%);    /* parked off-screen right */
        transition: transform 0.3s ease;
        z-index: 1002;                   /* above the order-summary-bar (1000) + scrim */
    }
    body.zhik-nav-open .block-collapsible-nav-content {
        transform: translateX(0);
    }
    /* Lock the page behind the open menu so a swipe scrolls the menu's own list
       (overflow-y above), not the page — which is what was closing the menu. */
    body.zhik-nav-open {
        overflow: hidden;
    }

    /* Dimmed scrim behind the open panel (injected by JS); tap to close. */
    .zhik-nav-scrim {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: 1001;                   /* over the order-summary-bar (1000), under the drawer */
    }
    body.zhik-nav-open .zhik-nav-scrim {
        opacity: 1;
        visibility: visible;
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .block-collapsible-nav-content { transition: none; }
}

/* Hamburger + scrim never show on desktop. */
@media (min-width: 768px) {
    .zhik-menu-toggle,
    .zhik-nav-scrim { display: none !important; }
}

/* ============================================================================
   Minicart drawer head + summary rearrangement
   - Row 1: the "Prepay cart…" label and the close button aligned on one row.
   - Row 2: a two-column summary — left = items count + Clear All; right = a
     vertical action stack (subtotal · Proceed to Payment · or · Save for later).
   The .minicart-mode + Clear All styles are re-stated here (not new look): moving
   those elements into the new wrappers takes them out of the _extend.less
   selectors that previously matched, so their look is reproduced in the new spot.
   ============================================================================ */
.minicart-wrapper .block-minicart .block-content > .minicart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
}
.minicart-wrapper .block-minicart .minicart-head > .minicart-mode {
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.01em;
    text-transform: none;
    color: #777;
}
.minicart-wrapper .block-minicart .minicart-head > .minicart-mode::before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    content: "\f09d";                     /* credit-card */
    margin-right: 6px;
    color: #111;
}
/* Take the close button out of its corner-absolute position into the flex row. */
.minicart-wrapper .block-minicart .minicart-head > .action.close {
    position: static;
    top: auto;
    right: auto;
    margin: 0;
    flex: 0 0 auto;
}

.minicart-wrapper .block-minicart .minicart-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
}
.minicart-wrapper .block-minicart .minicart-summary__left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}
/* Right stack is held a touch narrower than fill, so Proceed to Payment (which
   stretches to this column) reads as a button, not a full-width bar. */
.minicart-wrapper .block-minicart .minicart-summary__right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    flex: 0 1 220px;            /* ~216px is the one-line floor for "Proceed to Payment" */
    min-width: 0;
    text-align: right;
}
.minicart-wrapper .block-minicart .minicart-summary__left .items-total {
    margin: 0;
    font-size: 13px;
    color: #555;
    white-space: nowrap;
}

/* Clear All — the original red-outline look (not a black pill), reproduced in
   its new spot under the items count. !important mirrors the original rule: the
   theme's base button style sets a black fill we have to override. */
.minicart-wrapper .block-minicart .minicart-summary__left .action-clear-cart {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent !important;
    border: 1px solid #ba3b45 !important;
    color: #ba3b45 !important;
    padding: 4px 12px !important;
    border-radius: 0.375rem;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none !important;
    white-space: nowrap;
    transition: all 0.2s;
}
.minicart-wrapper .block-minicart .minicart-summary__left .action-clear-cart:hover {
    background: rgba(186, 59, 69, 0.08) !important;
    color: #ba3b45 !important;
}
.minicart-wrapper .block-minicart .minicart-summary__left .action-clear-cart .clear-glyph::before {
    content: '\f1f8';                     /* fa-trash */
    font-family: 'Font Awesome 5 Pro';
    font-weight: 300;
    font-size: 13px;
    line-height: 1;
    display: inline-block;
}

/* Subtotal: "Cart Subtotal / Excl. Tax" as two aligned rows — labels in a left
   column, amounts right-aligned in a column. Magento nests both prices inside
   .amount, so the wrappers are flattened into the grid with display:contents
   and explicitly placed (the "Excl. Tax:" label is the excl-wrapper's ::before). */
.minicart-wrapper .block-minicart .minicart-summary__right .subtotal {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    row-gap: 2px;
    align-items: baseline;
    text-align: left;
}
.minicart-wrapper .block-minicart .minicart-summary__right .subtotal .label {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    color: #555;
}
.minicart-wrapper .block-minicart .minicart-summary__right .subtotal .amount { display: contents; }
.minicart-wrapper .block-minicart .minicart-summary__right .subtotal .price-including-tax {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    font-size: 15px;
    font-weight: 700;
}
.minicart-wrapper .block-minicart .minicart-summary__right .subtotal .price-excluding-tax {
    display: contents;
    margin-top: 0;
}
.minicart-wrapper .block-minicart .minicart-summary__right .subtotal .price-excluding-tax::before {
    grid-column: 1;
    grid-row: 2;
    font-size: 11px;
    color: #888;
    white-space: nowrap;
}
.minicart-wrapper .block-minicart .minicart-summary__right .subtotal .price-excluding-tax .price {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    font-size: 11px;
    color: #888;
}
.minicart-wrapper .block-minicart .minicart-summary__right .actions { margin: 0; }
.minicart-wrapper .block-minicart .minicart-summary__right .actions .primary { padding: 0; }

/* ----------------------------------------------------------------------------
   "or → Save this order to finish later" — plain-text shortcut under the pay
   button. Shared by the minicart and the checkout payment step (no box, no KO).
   ---------------------------------------------------------------------------- */
.minicart-save-cart,
.checkout-save-cart-note {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #777;
    text-align: center;
}
/* Checkout: a wider, hybrid "lead + link" line that balances under the
   full-width Pay Now button (rather than a short centred link). */
.checkout-save-cart-note {
    margin: 12px 0 0;
    max-width: none;
}
.save-cart-or {
    display: block;
    margin-bottom: 2px;
    color: #9b9b9b;
    font-size: 11px;
}
.save-cart-lead { color: #777; }
.save-cart-lead + .save-cart-link { margin-left: 4px; }
.save-cart-link,
.save-cart-link:link,
.save-cart-link:visited,
.save-cart-link:hover,
.save-cart-link:focus {
    color: #444;
    text-decoration: none;
    cursor: pointer;
}
.save-cart-link__text {
    border-bottom: 1px solid rgba(17, 17, 17, .25);
    transition: border-color .15s ease;
}
.save-cart-link:hover .save-cart-link__text { border-bottom-color: #111; }

/* Saved confirmation (swapped in by save-cart-link.js). */
.save-cart-saved__icon { color: var(--status-ok, #2e7d32); margin-right: 4px; }
.save-cart-saved__go,
.save-cart-saved__go:link,
.save-cart-saved__go:visited { color: #444; text-decoration: underline; }
.save-cart-saved__go:hover { color: #111; }
.is-error .save-cart-link__text { border-bottom: 0; color: var(--status-warning, #b7791f); }

/* Saving shimmer — transform-only sweep (GPU-composited). */
.minicart-save-cart.is-saving,
.checkout-save-cart-note.is-saving {
    position: relative;
    overflow: hidden;
    pointer-events: none;
}
.minicart-save-cart.is-saving::after,
.checkout-save-cart-note.is-saving::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .7) 50%, transparent 80%);
    transform: translateX(-100%);
    animation: zhik-save-shimmer 1.1s ease-in-out infinite;
}
@keyframes zhik-save-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
    .minicart-save-cart.is-saving::after,
    .checkout-save-cart-note.is-saving::after { animation: none; opacity: .5; }
}