/* ----------------------------------------------------------------------------------------------
 * GBZ420 - side-cart charter layer: drawer geometry, drawer header / close control, pinned footer
 * actions and the charter re-tint of the free-gift block inside the cart drawer.
 * Written 2026-09-24 by the sidecart_charter task. Local copy only (gbz420.test -> C:\Codex\GBZ420\site).
 * Owner: docs/sitewide-maquettes-20260921/qa-sidecart-charter-20260924. Nothing else writes to this file.
 *
 * Reference : the drawer reported on 2026-09-24 (gift area in cream / orange rounded panels, the
 *             three footer actions and the close control below the fold, mobile sheet leaving a
 *             strip of page content above it).
 * Charter   : CHARTE-GRAPHIQUE.md 3.1-3.3 (white surface, black bands, the single lime #D4FA0A),
 *             4.4 (44px touch floor), 4.5 (display titles), 6.4 (flat panels, hairlines above
 *             shadows), 6.5 (button shapes: square panels, pill actions), criteria 1-4.
 * Tokens    : gbz-tokens.css 1 (--gbz-accent, --gbz-ink, --gbz-hairline*, --gbz-radius-0,
 *             --gbz-radius-pill, --gbz-focus-ring) - consumed, never redeclared.
 * Audit     : docs/sitewide-maquettes-20260921/SIDECART-REVUE-INDEPENDANTE.md (parent review).
 *
 * Rules for this file:
 *  1. Scope: every selector starts with #_desktop_blockcart-content or #_mobile_blockcart-content.
 *     The add-to-cart modal (#blockcart-modal), the cart page (body#cart) and every other surface
 *     cannot match, so the theme header assets and the other families are untouched.
 *  2. Presentation only. No wording, price, quantity, link, state or option changes; the only
 *     element hidden is the drawer's own <hr> rule, replaced by the black header band.
 *  3. Semantic feedback is out of scope and keeps its own colours: .alert-warning, .alert-danger,
 *     .label-warning, .message-availability and the gift module's stock warnings. The one notice
 *     this layer re-tints is the non-semantic cyan .alert-info of the free-shipping counter
 *     (section 5b): the cart page and the checkout tunnel already read it neutral + lime, so the
 *     drawer follows them instead of showing the theme's rgb(207,244,252).
 *  4. The gift module and the theme print their own <style> blocks inside the page body, i.e.
 *     after this file. The few declarations they mark !important are answered here with an
 *     !important declaration on a two-id selector, never by editing the module or the theme.
 *  5. The drawer is one column: fixed header band, one scroll region, pinned footer. The footer is
 *     a flex item, never an overlay, so no content is ever hidden under it.
 * ------------------------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------------------------
 * 1. Drawer shell - the wrapper becomes the sized flex column that holds the three bands
 * ------------------------------------------------------------------------------------------- */

body #_desktop_blockcart-content,
body #_mobile_blockcart-content {
    max-width: 100vw;
    box-sizing: border-box;
}

/* The compiled theme bundle carries !important on the drawer box and `display:none` on the drawer
   title; every rule that has to win against it is written with `body` and with #blockcart-content
   so it outranks the bundle on id count, whatever the order of the stylesheet tags. */
body #_desktop_blockcart-content > #blockcart-content,
body #_mobile_blockcart-content > #blockcart-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    /* The theme and custom.css pad this node (16px, 22px, and 120px under the mobile header);
       the padding now lives on the three bands below so the black header reaches the drawer edge. */
    padding: 0 !important;
    margin: 0 !important;
    border-radius: var(--gbz-radius-0, 0);
    overflow: hidden !important;
}

/* Desktop: right-hand drawer, viewport height, 440px cap. */
@media (min-width: 992px) {
    body #_desktop_blockcart-content.dropdown-menu.show,
    body .show > #_desktop_blockcart-content.dropdown-menu {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        display: flex !important;
        flex-direction: column;
        width: min(440px, 100vw);
        height: 100vh;
        height: 100dvh;
        max-width: 100vw;
        max-height: 100vh;
        max-height: 100dvh;
        margin: 0;
        padding: 0;
        /* Safety valve only: the inner flex column is already the exact height of the wrapper, so
           this never produces a second scrollbar, but nothing can become unreachable either. */
        overflow-x: hidden;
        overflow-y: auto;
        border: 0;
        border-left: var(--gbz-hairline-strong, 1px solid #D0D0D0);
        /* The gift module marks its 12px / 14px corners !important; the charter panel is square. */
        border-radius: var(--gbz-radius-0, 0) !important;
        box-shadow: -8px 0 18px rgba(0, 0, 0, 0.1);
        transform: none !important;
        z-index: 1050;
    }
}

/* Mobile and tablet: full-height drawer instead of the 88vh sheet, so the 12vh strip of page
   content above the sheet (measured 29px under the 72px sticky header at 390) is gone and the
   drawer geometry matches the desktop drawer. */
@media (max-width: 991px) {
    body #_desktop_blockcart-content.dropdown-menu.show,
    body .show > #_desktop_blockcart-content.dropdown-menu,
    body #_mobile_blockcart-content.dropdown-menu.show,
    body .show > #_mobile_blockcart-content.dropdown-menu {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        display: flex !important;
        flex-direction: column;
        width: auto;
        height: auto !important;
        max-width: 100vw;
        max-height: 100vh;
        max-height: 100dvh;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        overflow-y: auto;
        border: 0;
        border-radius: var(--gbz-radius-0, 0) !important;
        box-shadow: 0 -8px 18px rgba(0, 0, 0, 0.1);
        transform: none !important;
        z-index: 1050;
    }

    /* The mobile sheet keeps its own bottom safe area on the footer, not on the content. */
    body #_mobile_blockcart-content.dropdown-menu.show,
    body .show > #_mobile_blockcart-content.dropdown-menu {
        padding-bottom: 0;
    }
}

/* The page behind the drawer must not scroll with it (custom.css already locks the body). */
body.gbz-cart-panel-open {
    overscroll-behavior: none;
}

/* ----------------------------------------------------------------------------------------------
 * 2. Drawer header - the black band of the charter, with the 44px close control
 *    Only the two drawer wrappers are addressed: #blockcart-modal keeps its own header.
 * ------------------------------------------------------------------------------------------- */

body #_desktop_blockcart-content #blockcart-content .cart-title,
body #_mobile_blockcart-content #blockcart-content .cart-title {
    display: block !important;
    position: static !important;
    flex: 0 0 auto;
    order: -1;
    margin: 0;
    padding: 10px 14px 10px 16px;
    background: var(--gbz-black, #000);
    color: var(--gbz-on-dark, #FFFFFF);
    border: 0;
    border-radius: var(--gbz-radius-0, 0);
}

/* The band replaces the rule the theme draws under the title row. */
body #_desktop_blockcart-content #blockcart-content .cart-title > hr,
body #_mobile_blockcart-content #blockcart-content .cart-title > hr {
    display: none;
}

body #_desktop_blockcart-content #blockcart-content .cart-title .modal-title,
body #_mobile_blockcart-content #blockcart-content .cart-title .modal-title {
    color: var(--gbz-on-dark, #FFFFFF);
    font-family: "GBZ Anton", "Bahnschrift SemiBold Condensed", "Bahnschrift Condensed", "Bahnschrift",
        "Arial Narrow", sans-serif;
    /* Display heading inside the 64px black band: 27px keeps the strong maquette title while the
       band height, the 44px close control and the sticky bar stay unchanged. */
    font-size: 27px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.05;
    text-transform: uppercase;
}

/* The close control: 44 x 44 (charter 4.4), lime on the black band, black glyph. */
#_desktop_blockcart-content #js-cart-close,
#_mobile_blockcart-content #js-cart-close {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0 !important;
    padding: 0;
    border: 0;
    border-radius: var(--gbz-radius-pill, 999px);
    background: var(--gbz-accent, #D4FA0A);
    color: var(--gbz-accent-ink, #000000);
    font-family: inherit;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    opacity: 1;
    text-shadow: none;
    cursor: pointer;
    transition: var(--gbz-transition, color 0.15s ease, background-color 0.15s ease);
}

#_desktop_blockcart-content #js-cart-close:hover,
#_desktop_blockcart-content #js-cart-close:focus,
#_mobile_blockcart-content #js-cart-close:hover,
#_mobile_blockcart-content #js-cart-close:focus {
    background: var(--gbz-white, #FFFFFF);
    color: var(--gbz-black, #000000);
}

#_desktop_blockcart-content #js-cart-close:focus-visible,
#_mobile_blockcart-content #js-cart-close:focus-visible {
    outline: 2px solid var(--gbz-white, #FFFFFF);
    outline-offset: 2px;
}

/* ----------------------------------------------------------------------------------------------
 * 3. The single scroll region - every line between the header band and the footer lives here
 * ------------------------------------------------------------------------------------------- */

#_desktop_blockcart-content .gbz-cart-scroll,
#_mobile_blockcart-content .gbz-cart-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    background: var(--gbz-surface, #FFFFFF);
    color: var(--gbz-ink, #101010);
}

@media (min-width: 992px) {
    #_desktop_blockcart-content .gbz-cart-scroll {
        padding: 20px;
    }
}

/* The theme and the gift module give the product list its own scrollbar and a 380px (245px under
   770px of height) cap. Inside the drawer the single region scrolls, so the list is released. */
#_desktop_blockcart-content .gbz-cart-scroll .cart-products,
#_mobile_blockcart-content .gbz-cart-scroll .cart-products {
    flex: 0 0 auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0;
}

#_desktop_blockcart-content .gbz-cart-scroll > *,
#_mobile_blockcart-content .gbz-cart-scroll > * {
    min-width: 0;
    max-width: 100%;
}

/* ----------------------------------------------------------------------------------------------
 * 4. Footer actions - a flex item at the bottom of the drawer, never an overlay
 * ------------------------------------------------------------------------------------------- */

#_desktop_blockcart-content .cart-buttons,
#_mobile_blockcart-content .cart-buttons {
    flex: 0 0 auto;
    position: static !important;
    bottom: auto !important;
    z-index: 1;
    margin: 0 !important;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--gbz-surface, #FFFFFF);
    border-top: var(--gbz-hairline, 1px solid #E6E6E6);
}

body #_desktop_blockcart-content #blockcart-content .cart-buttons .btn,
body #_mobile_blockcart-content #blockcart-content .cart-buttons .btn {
    min-height: 46px;
    border-radius: var(--gbz-radius-pill, 999px);
    font-weight: var(--gbz-weight-display, 700);
    text-transform: none;
    white-space: normal;
    overflow-wrap: anywhere;
}

body #_desktop_blockcart-content #blockcart-content .cart-buttons .btn-primary,
body #_mobile_blockcart-content #blockcart-content .cart-buttons .btn-primary {
    border-color: var(--gbz-black, #000000);
    background: var(--gbz-black, #000000);
    color: var(--gbz-white, #FFFFFF);
}

body #_desktop_blockcart-content #blockcart-content .cart-buttons .btn-primary:hover,
body #_desktop_blockcart-content #blockcart-content .cart-buttons .btn-primary:focus,
body #_mobile_blockcart-content #blockcart-content .cart-buttons .btn-primary:hover,
body #_mobile_blockcart-content #blockcart-content .cart-buttons .btn-primary:focus {
    border-color: var(--gbz-accent, #D4FA0A);
    background: var(--gbz-accent, #D4FA0A);
    color: var(--gbz-accent-ink, #000000);
}

body #_desktop_blockcart-content #blockcart-content .cart-buttons .btn-secondary,
body #_mobile_blockcart-content #blockcart-content .cart-buttons .btn-secondary {
    border: 1px solid var(--gbz-black, #000000);
    background: var(--gbz-white, #FFFFFF);
    color: var(--gbz-black, #000000);
    text-decoration: none;
}

body #_desktop_blockcart-content #blockcart-content .cart-buttons .btn-secondary:hover,
body #_desktop_blockcart-content #blockcart-content .cart-buttons .btn-secondary:focus,
body #_mobile_blockcart-content #blockcart-content .cart-buttons .btn-secondary:hover,
body #_mobile_blockcart-content #blockcart-content .cart-buttons .btn-secondary:focus {
    border-color: var(--gbz-black, #000000);
    background: var(--gbz-black, #000000);
    color: var(--gbz-white, #FFFFFF);
}

/* "Continue shopping" leaves the off-charter cream / orange reading for the white + ink one. */
body #_desktop_blockcart-content #blockcart-content .cart-buttons .gbz-cart-continue,
body #_mobile_blockcart-content #blockcart-content .cart-buttons .gbz-cart-continue {
    border: 1px solid var(--gbz-hairline-color-strong, #D0D0D0);
    background: var(--gbz-white, #FFFFFF);
    color: var(--gbz-ink, #101010);
    font-weight: var(--gbz-weight-display, 700);
    text-decoration: none;
}

body #_desktop_blockcart-content #blockcart-content .cart-buttons .gbz-cart-continue:hover,
body #_desktop_blockcart-content #blockcart-content .cart-buttons .gbz-cart-continue:focus,
body #_mobile_blockcart-content #blockcart-content .cart-buttons .gbz-cart-continue:hover,
body #_mobile_blockcart-content #blockcart-content .cart-buttons .gbz-cart-continue:focus {
    border-color: var(--gbz-black, #000000);
    color: var(--gbz-black, #000000);
    text-decoration: none;
}

/* ----------------------------------------------------------------------------------------------
 * 5. Cart lines, notices and totals - hairlines and ink, no new colour
 * ------------------------------------------------------------------------------------------- */

#_desktop_blockcart-content .gbz-cart-scroll .cart-products > li,
#_mobile_blockcart-content .gbz-cart-scroll .cart-products > li {
    border-bottom: var(--gbz-hairline, 1px solid #E6E6E6);
}

#_desktop_blockcart-content .gbz-cart-scroll .product-line-info > .label,
#_mobile_blockcart-content .gbz-cart-scroll .product-line-info > .label {
    color: var(--gbz-ink, #101010);
    font-weight: 700;
}

#_desktop_blockcart-content .gbz-cart-scroll .cart-subtotals,
#_desktop_blockcart-content .gbz-cart-scroll .cart-totals,
#_mobile_blockcart-content .gbz-cart-scroll .cart-subtotals,
#_mobile_blockcart-content .gbz-cart-scroll .cart-totals {
    border-top-color: var(--gbz-hairline-color, #E6E6E6);
}

#_desktop_blockcart-content .gbz-cart-scroll .cart-totals,
#_mobile_blockcart-content .gbz-cart-scroll .cart-totals {
    border-top: 2px solid var(--gbz-black, #000000);
    color: var(--gbz-ink, #101010);
}

/* The "Before you checkout" note is a charter panel, not a pastel one. */
#_desktop_blockcart-content .gbz-cart-sales-cue,
#_mobile_blockcart-content .gbz-cart-sales-cue {
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--gbz-ink, #101010);
    border-radius: var(--gbz-radius-0, 0);
    background: var(--gbz-surface, #FFFFFF);
    color: var(--gbz-muted, #5F5F5F);
    font-size: 13px;
    line-height: 1.35;
}

#_desktop_blockcart-content .gbz-cart-sales-cue strong,
#_mobile_blockcart-content .gbz-cart-sales-cue strong {
    display: inline-block;
    margin-bottom: 3px;
    padding-bottom: 2px;
    border-bottom: 2px solid var(--gbz-accent, #D4FA0A);
    color: var(--gbz-ink, #101010);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: uppercase;
}

#_desktop_blockcart-content .gbz-cart-sales-cue span,
#_mobile_blockcart-content .gbz-cart-sales-cue span {
    color: var(--gbz-muted, #5F5F5F);
}

/* ----------------------------------------------------------------------------------------------
 * 5b. Free-shipping counter (module iqitfreedeliverycount) - the one non-semantic notice
 *
 * The module prints `<div class="alert alert-info iqitfreedeliverycount p-2">` through the
 * displayCartAjaxInfo hook, which the drawer template calls inside .gbz-cart-scroll. Bootstrap's
 * .alert-info paints it cyan (--bs-info-bg-subtle, rgb(207,244,252)) and nothing else in the
 * drawer re-tints it: the cart-page rule of gbz-qa-cart-v1.css is scoped to
 * `body#cart #main.gbz-cart-page` and the checkout rule to `body#checkout #main`, so the drawer
 * kept the off-palette cyan.
 *
 * It becomes the quiet alt panel of charter 3.1 with the lime mise-en-avant filet, the same
 * reading the cart page and the checkout tunnel already give it. Text, amount and position are
 * untouched and the rule is class-based, so it holds for fr / en / de alike.
 *
 * `.alert-danger` (voucher refusal), `.alert-warning` (the 25 EUR HT minimum-order notice of the
 * .cart-buttons footer), `.alert-success`, `.label-warning` and the gift module's stock warnings
 * are deliberately NOT listed here and keep the colours the theme gives them.
 * ------------------------------------------------------------------------------------------- */

#_desktop_blockcart-content .gbz-cart-scroll .alert-info,
#_mobile_blockcart-content .gbz-cart-scroll .alert-info {
    background-color: var(--gbz-surface-alt, #F6F6F6);
    border: var(--gbz-hairline, 1px solid #E6E6E6);
    border-left: 4px solid var(--gbz-hairline-color-strong, #D0D0D0);
    border-radius: var(--gbz-radius-sm, 2px);
    box-shadow: var(--gbz-shadow, none);
    color: var(--gbz-ink, #101010);
}

#_desktop_blockcart-content .gbz-cart-scroll .alert-info.iqitfreedeliverycount,
#_mobile_blockcart-content .gbz-cart-scroll .alert-info.iqitfreedeliverycount {
    border-left-color: var(--gbz-accent, #D4FA0A);
    font-size: var(--gbz-fs-body, 1rem);
}

#_desktop_blockcart-content .gbz-cart-scroll .alert-info strong,
#_mobile_blockcart-content .gbz-cart-scroll .alert-info strong,
#_desktop_blockcart-content .gbz-cart-scroll .alert-info .iqitfreedeliverycount-title,
#_mobile_blockcart-content .gbz-cart-scroll .alert-info .iqitfreedeliverycount-title {
    color: var(--gbz-ink, #101010);
    font-weight: var(--gbz-weight-display, 700);
}

#_desktop_blockcart-content .gbz-cart-scroll .alert-info p,
#_mobile_blockcart-content .gbz-cart-scroll .alert-info p {
    margin-bottom: 0;
    color: var(--gbz-muted, #5F5F5F);
    font-size: var(--gbz-fs-body, 1rem);
}

/* ----------------------------------------------------------------------------------------------
 * 6. Free-gift block - charter panels, strong titles, lime accent
 *    The module exposes its palette as custom properties, so the block is re-pointed at the
 *    charter tokens instead of being repainted rule by rule.
 * ------------------------------------------------------------------------------------------- */

#_desktop_blockcart-content .gbz-cart-scroll .mdgift-fomo,
#_mobile_blockcart-content .gbz-cart-scroll .mdgift-fomo {
    --mdgift-ink: #000000;
    --mdgift-muted: var(--gbz-muted, #5F5F5F);
    --mdgift-line: var(--gbz-hairline-color, #E6E6E6);
    --mdgift-bg: var(--gbz-surface, #FFFFFF);
    --mdgift-bg-almost: var(--gbz-surface, #FFFFFF);
    --mdgift-accent: var(--gbz-accent, #D4FA0A);
    --mdgift-warm: var(--gbz-accent, #D4FA0A);
    --mdgift-radius: var(--gbz-radius-0, 0);
    --mdgift-shadow: var(--gbz-shadow, none);
    margin: 16px 0 0;
    padding: 0;
    border: 0;
    border-radius: var(--gbz-radius-0, 0);
    background: var(--gbz-surface, #FFFFFF);
    color: var(--gbz-ink, #101010);
    box-shadow: none;
}

#_desktop_blockcart-content .gbz-cart-scroll .mdgift-fomo--almost,
#_mobile_blockcart-content .gbz-cart-scroll .mdgift-fomo--almost {
    border: 0;
    background: var(--gbz-surface, #FFFFFF);
}

#_desktop_blockcart-content .gbz-cart-scroll .mdgift-fomo__icon,
#_mobile_blockcart-content .gbz-cart-scroll .mdgift-fomo__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--gbz-radius-0, 0);
    background: var(--gbz-black, #000000);
    color: var(--gbz-accent, #D4FA0A);
}

/* Titles: display face, uppercase, black - charter 4.5 / 6.4. */
#_desktop_blockcart-content .gbz-cart-scroll .mdgift-fomo__eyebrow,
#_mobile_blockcart-content .gbz-cart-scroll .mdgift-fomo__eyebrow,
#_desktop_blockcart-content .gbz-cart-scroll .mdgift-fomo__section-label,
#_mobile_blockcart-content .gbz-cart-scroll .mdgift-fomo__section-label,
#_desktop_blockcart-content .gbz-cart-scroll .mdgift-fomo__next-kicker,
#_mobile_blockcart-content .gbz-cart-scroll .mdgift-fomo__next-kicker {
    color: var(--gbz-ink, #101010);
    font-family: "GBZ Anton", "Bahnschrift SemiBold Condensed", "Bahnschrift Condensed", "Bahnschrift",
        "Arial Narrow", sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: uppercase;
}

#_desktop_blockcart-content .gbz-cart-scroll .mdgift-fomo__copy strong,
#_mobile_blockcart-content .gbz-cart-scroll .mdgift-fomo__copy strong {
    color: var(--gbz-ink, #101010);
    font-family: "GBZ Anton", "Bahnschrift SemiBold Condensed", "Bahnschrift Condensed", "Bahnschrift",
        "Arial Narrow", sans-serif;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.1;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

#_desktop_blockcart-content .gbz-cart-scroll .mdgift-fomo__subcopy,
#_mobile_blockcart-content .gbz-cart-scroll .mdgift-fomo__subcopy {
    color: var(--gbz-muted, #5F5F5F);
    font-size: 13px;
    line-height: 1.35;
}

/* Progress: square track, black ground, the single lime accent as the fill. */
#_desktop_blockcart-content .gbz-cart-scroll .mdgift-fomo__meter,
#_mobile_blockcart-content .gbz-cart-scroll .mdgift-fomo__meter {
    height: 8px;
    border-radius: var(--gbz-radius-0, 0);
    background: var(--gbz-black, #000000);
}

#_desktop_blockcart-content .gbz-cart-scroll .mdgift-fomo__meter span,
#_mobile_blockcart-content .gbz-cart-scroll .mdgift-fomo__meter span {
    border-radius: var(--gbz-radius-0, 0);
    background: var(--gbz-accent, #D4FA0A);
}

#_desktop_blockcart-content .gbz-cart-scroll .mdgift-fomo__meter-label,
#_mobile_blockcart-content .gbz-cart-scroll .mdgift-fomo__meter-label {
    color: var(--gbz-muted, #5F5F5F);
    font-weight: 700;
}

/* Gift cards: square panels, hairline frame, no shadow (charter 6.4). */
#_desktop_blockcart-content .gbz-cart-scroll .mdgift-fomo__products li,
#_mobile_blockcart-content .gbz-cart-scroll .mdgift-fomo__products li {
    border: 1px solid var(--gbz-hairline-color, #E6E6E6);
    border-radius: var(--gbz-radius-0, 0);
    background: var(--gbz-surface, #FFFFFF);
}

#_desktop_blockcart-content .gbz-cart-scroll .mdgift-fomo__thumb,
#_mobile_blockcart-content .gbz-cart-scroll .mdgift-fomo__thumb {
    border: 1px solid var(--gbz-hairline-color, #E6E6E6);
    border-radius: var(--gbz-radius-0, 0);
    background: var(--gbz-surface, #FFFFFF);
}

#_desktop_blockcart-content .gbz-cart-scroll .mdgift-fomo__product-name,
#_mobile_blockcart-content .gbz-cart-scroll .mdgift-fomo__product-name {
    color: var(--gbz-ink, #101010);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

/* State chips. Unlocked is the lime flat of the charter; locked keeps its lock glyph and reads as
   an outlined panel - the stock warnings of the module are not touched. */
#_desktop_blockcart-content .gbz-cart-scroll .mdgift-fomo__product-state,
#_mobile_blockcart-content .gbz-cart-scroll .mdgift-fomo__product-state {
    border-radius: var(--gbz-radius-0, 0);
    font-size: 10px;
    letter-spacing: 0;
}

#_desktop_blockcart-content .gbz-cart-scroll .mdgift-fomo__product-state--unlocked,
#_mobile_blockcart-content .gbz-cart-scroll .mdgift-fomo__product-state--unlocked {
    border: 0;
    background: var(--gbz-accent, #D4FA0A);
    color: var(--gbz-accent-ink, #000000);
}

#_desktop_blockcart-content .gbz-cart-scroll .mdgift-fomo__product-state--locked,
#_mobile_blockcart-content .gbz-cart-scroll .mdgift-fomo__product-state--locked {
    border: 1px solid var(--gbz-ink, #101010);
    background: var(--gbz-white, #FFFFFF);
    color: var(--gbz-ink, #101010);
}

/* An unlocked gift the customer can add: the frame carries the accent, the action is a black
   square button with white capitals, and the whole card keeps the 44px touch floor. */
#_desktop_blockcart-content .gbz-cart-scroll .mdgift-fomo__product--addable,
#_mobile_blockcart-content .gbz-cart-scroll .mdgift-fomo__product--addable {
    border-color: var(--gbz-ink, #101010);
    box-shadow: none;
}

#_desktop_blockcart-content .gbz-cart-scroll .mdgift-fomo__product--addable:hover,
#_desktop_blockcart-content .gbz-cart-scroll .mdgift-fomo__product--addable:focus-within,
#_mobile_blockcart-content .gbz-cart-scroll .mdgift-fomo__product--addable:hover,
#_mobile_blockcart-content .gbz-cart-scroll .mdgift-fomo__product--addable:focus-within {
    border-color: var(--gbz-ink, #101010);
    box-shadow: inset 0 0 0 2px var(--gbz-accent, #D4FA0A);
}

#_desktop_blockcart-content .gbz-cart-scroll .mdgift-fomo__product--locked,
#_mobile_blockcart-content .gbz-cart-scroll .mdgift-fomo__product--locked {
    border-style: dashed;
    border-color: var(--gbz-hairline-color-strong, #D0D0D0);
    background: var(--gbz-surface, #FFFFFF);
}

#_desktop_blockcart-content .gbz-cart-scroll .mdgift-fomo__product-action,
#_mobile_blockcart-content .gbz-cart-scroll .mdgift-fomo__product-action {
    min-height: 44px;
}

#_desktop_blockcart-content .gbz-cart-scroll .mdgift-fomo__product-hint,
#_mobile_blockcart-content .gbz-cart-scroll .mdgift-fomo__product-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 4px 6px;
    border-radius: var(--gbz-radius-0, 0);
    background: var(--gbz-black, #000000);
    color: var(--gbz-white, #FFFFFF);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.15;
    text-transform: uppercase;
}

/* The "next gift" panel: white panel with a black frame and the accent rule on top. */
#_desktop_blockcart-content .gbz-cart-scroll .mdgift-fomo__next,
#_mobile_blockcart-content .gbz-cart-scroll .mdgift-fomo__next {
    margin-top: 12px;
    padding: 10px 11px;
    border: 1px solid var(--gbz-ink, #101010);
    border-top: 4px solid var(--gbz-accent, #D4FA0A);
    border-radius: var(--gbz-radius-0, 0);
    background: var(--gbz-surface, #FFFFFF);
    color: var(--gbz-ink, #101010);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

#_desktop_blockcart-content .gbz-cart-scroll .mdgift-fomo__next-products li,
#_mobile_blockcart-content .gbz-cart-scroll .mdgift-fomo__next-products li {
    border: 1px dashed var(--gbz-hairline-color-strong, #D0D0D0);
    background: var(--gbz-surface, #FFFFFF);
}

#_desktop_blockcart-content .gbz-cart-scroll .mdgift-fomo__cta,
#_mobile_blockcart-content .gbz-cart-scroll .mdgift-fomo__cta {
    min-height: 44px;
    margin-top: 14px;
    border-color: var(--gbz-black, #000000);
    border-radius: var(--gbz-radius-pill, 999px);
    background: var(--gbz-black, #000000);
    color: var(--gbz-white, #FFFFFF);
    font-weight: var(--gbz-weight-display, 700);
}

#_desktop_blockcart-content .gbz-cart-scroll .mdgift-fomo__cta:hover,
#_desktop_blockcart-content .gbz-cart-scroll .mdgift-fomo__cta:focus,
#_mobile_blockcart-content .gbz-cart-scroll .mdgift-fomo__cta:hover,
#_mobile_blockcart-content .gbz-cart-scroll .mdgift-fomo__cta:focus {
    border-color: var(--gbz-accent, #D4FA0A);
    background: var(--gbz-accent, #D4FA0A);
    color: var(--gbz-accent-ink, #000000);
}

/* ----------------------------------------------------------------------------------------------
 * 7. Keyboard visibility inside the drawer (charter 4.4)
 * ------------------------------------------------------------------------------------------- */

#_desktop_blockcart-content .gbz-cart-scroll :is(a, button, input, select):focus-visible,
#_mobile_blockcart-content .gbz-cart-scroll :is(a, button, input, select):focus-visible,
#_desktop_blockcart-content .cart-buttons :is(a, button):focus-visible,
#_mobile_blockcart-content .cart-buttons :is(a, button):focus-visible {
    outline: 2px solid var(--gbz-ink, #101010);
    outline-offset: 2px;
}

#_desktop_blockcart-content .cart-buttons .btn-primary:focus-visible,
#_mobile_blockcart-content .cart-buttons .btn-primary:focus-visible {
    outline-color: var(--gbz-white, #FFFFFF);
    outline-offset: -4px;
}

/* ----------------------------------------------------------------------------------------------
 * 8. A gift list that holds a single card
 *    The multi-choice grid leaves one lone card about 168px wide inside a 343px panel, with its
 *    square image full height. When a list holds exactly one item, that item takes the whole row
 *    and turns into a compact horizontal card: state chip on top, square thumb on the left, the
 *    full product name and the add action beside it. Only `li:only-child` is addressed, so the
 *    three-track and two-track grids of the multi-choice lists keep their columns, their image
 *    ratio and their order.
 * ------------------------------------------------------------------------------------------- */

body #_desktop_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__products > li:only-child,
body #_mobile_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__products > li:only-child,
body #_desktop_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__next-products > li:only-child,
body #_mobile_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__next-products > li:only-child {
    grid-column: 1 / -1;
}

body #_desktop_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__products > li:only-child .mdgift-fomo__product-action,
body #_mobile_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__products > li:only-child .mdgift-fomo__product-action {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-areas:
        "state state"
        "thumb name"
        "thumb hint";
    gap: 8px 12px;
    align-items: start;
}

body #_desktop_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__next-products > li:only-child,
body #_mobile_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__next-products > li:only-child {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-areas:
        "state state"
        "thumb name";
    gap: 8px 12px;
    align-items: start;
}

body #_desktop_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__products > li:only-child :is(.mdgift-fomo__product-state, .mdgift-fomo__thumb, .mdgift-fomo__product-name, .mdgift-fomo__product-hint),
body #_mobile_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__products > li:only-child :is(.mdgift-fomo__product-state, .mdgift-fomo__thumb, .mdgift-fomo__product-name, .mdgift-fomo__product-hint) {
    min-width: 0;
}

body #_desktop_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__products > li:only-child .mdgift-fomo__product-state,
body #_mobile_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__products > li:only-child .mdgift-fomo__product-state,
body #_desktop_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__next-products > li:only-child .mdgift-fomo__product-state,
body #_mobile_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__next-products > li:only-child .mdgift-fomo__product-state {
    grid-area: state;
    width: 100%;
    margin-bottom: 0;
}

body #_desktop_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__products > li:only-child .mdgift-fomo__thumb,
body #_mobile_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__products > li:only-child .mdgift-fomo__thumb,
body #_desktop_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__next-products > li:only-child .mdgift-fomo__thumb,
body #_mobile_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__next-products > li:only-child .mdgift-fomo__thumb {
    grid-area: thumb;
    width: 88px;
    height: 88px;
    aspect-ratio: auto;
}

body #_desktop_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__products > li:only-child .mdgift-fomo__product-name,
body #_mobile_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__products > li:only-child .mdgift-fomo__product-name,
body #_desktop_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__next-products > li:only-child .mdgift-fomo__product-name,
body #_mobile_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__next-products > li:only-child .mdgift-fomo__product-name {
    grid-area: name;
    margin-top: 0;
    text-align: left;
}

body #_desktop_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__products > li:only-child .mdgift-fomo__product-hint,
body #_mobile_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__products > li:only-child .mdgift-fomo__product-hint {
    grid-area: hint;
    margin-top: 0;
}

body #_desktop_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__products > li:only-child .mdgift-fomo__cta,
body #_mobile_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__products > li:only-child .mdgift-fomo__cta {
    grid-column: 1 / -1;
}

@media (max-width: 575px) {
    body #_desktop_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__products > li:only-child .mdgift-fomo__product-action,
    body #_mobile_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__products > li:only-child .mdgift-fomo__product-action,
    body #_desktop_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__next-products > li:only-child,
    body #_mobile_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__next-products > li:only-child {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 7px 10px;
    }

body #_desktop_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__products > li:only-child .mdgift-fomo__thumb,
    body #_mobile_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__products > li:only-child .mdgift-fomo__thumb,
    body #_desktop_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__next-products > li:only-child .mdgift-fomo__thumb,
    body #_mobile_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__next-products > li:only-child .mdgift-fomo__thumb {
        width: 72px;
        height: 72px;
    }
}

/* Charter 4.4 floor on the compact single-gift action below 768px: that black action reads 30px
   tall on the full-width card, under the 44px touch floor every other control of the drawer
   keeps. Only the `li:only-child` action is raised, so the multi-choice cards and their grid are
   untouched. */
@media (max-width: 767px) {
    body #_desktop_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__products > li:only-child .mdgift-fomo__product-hint,
    body #_mobile_blockcart-content #blockcart-content .gbz-cart-scroll .mdgift-fomo__products > li:only-child .mdgift-fomo__product-hint {
        min-height: 44px;
    }
}

/* Narrow widths: the gift grids keep their tracks, the panels keep their frame and nothing is
   wider than the drawer itself. */
@media (max-width: 575px) {
    #_desktop_blockcart-content .gbz-cart-scroll .mdgift-fomo__products,
    #_mobile_blockcart-content .gbz-cart-scroll .mdgift-fomo__products,
    #_desktop_blockcart-content .gbz-cart-scroll .mdgift-fomo__next-products,
    #_mobile_blockcart-content .gbz-cart-scroll .mdgift-fomo__next-products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    #_desktop_blockcart-content .cart-buttons,
    #_mobile_blockcart-content .cart-buttons {
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #_desktop_blockcart-content #js-cart-close,
    #_mobile_blockcart-content #js-cart-close {
        transition: none;
    }
}

/* ----------------------------------------------------------------------------------------------
 * Charter 4.4 floor on the drawer's quantity stepper (2026-09-24, postfix-visual pass).
 * The theme sizes this control for a mouse: `#blockcart-content .cart-products .bootstrap-touchspin
 * { width: 75px }` combined with `.bootstrap-touchspin-up/_down { height: 50% }` of the 40 px
 * input, which measured **22 x 20 px** per arrow, at 390 as well as at 1440 - under the 44 px
 * floor charter 4.4 states, and under the floor this same sheet already applies to the drawer's
 * other controls (the 44 px single-gift action, section above). The cart page already solved the
 * identical widget with a `44px 44px 44px` grid (`gbz-cart-v1.css:29-37`), so this section repeats
 * that accepted pattern on the drawer alone: `-` in column 1, the input in column 2, `+` in
 * column 3, every box 44 px tall. The control keeps one single row, 40 -> 44 px high, and stays
 * centred in its cell the way `margin: 0 auto` placed it before, so the price beside it keeps its
 * own cell and its own alignment.
 *
 * Presentation only: no wording, price, quantity, link, state or option is read or written, and the
 * `+`/`-` buttons keep the classes the theme's own cart script binds to. Reversible by deleting
 * this section.
 * ---------------------------------------------------------------------------------------------- */
body #_desktop_blockcart-content #blockcart-content .gbz-cart-scroll .bootstrap-touchspin,
body #_mobile_blockcart-content #blockcart-content .gbz-cart-scroll .bootstrap-touchspin {
    display: grid;
    grid-template-columns: 44px 44px 44px;
    width: 132px;
    max-width: none;
    min-height: 44px;
    height: 44px;
    margin: 0 auto;
}

body #_desktop_blockcart-content #blockcart-content .gbz-cart-scroll .bootstrap-touchspin .input-group-btn-vertical,
body #_mobile_blockcart-content #blockcart-content .gbz-cart-scroll .bootstrap-touchspin .input-group-btn-vertical {
    display: contents;
}

body #_desktop_blockcart-content #blockcart-content .gbz-cart-scroll .bootstrap-touchspin input,
body #_mobile_blockcart-content #blockcart-content .gbz-cart-scroll .bootstrap-touchspin input {
    grid-column: 2;
    grid-row: 1;
    width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 4px;
    text-align: center;
}

body #_desktop_blockcart-content #blockcart-content .gbz-cart-scroll .bootstrap-touchspin .btn-touchspin,
body #_mobile_blockcart-content #blockcart-content .gbz-cart-scroll .bootstrap-touchspin .btn-touchspin {
    position: static !important;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

body #_desktop_blockcart-content #blockcart-content .gbz-cart-scroll .bootstrap-touchspin .btn-touchspin i,
body #_mobile_blockcart-content #blockcart-content .gbz-cart-scroll .bootstrap-touchspin .btn-touchspin i {
    position: static !important;
    left: auto;
    top: auto;
    font-size: 14px;
}

body #_desktop_blockcart-content #blockcart-content .gbz-cart-scroll .bootstrap-touchspin-down,
body #_mobile_blockcart-content #blockcart-content .gbz-cart-scroll .bootstrap-touchspin-down {
    grid-column: 1;
    grid-row: 1;
}

body #_desktop_blockcart-content #blockcart-content .gbz-cart-scroll .bootstrap-touchspin-up,
body #_mobile_blockcart-content #blockcart-content .gbz-cart-scroll .bootstrap-touchspin-up {
    grid-column: 3;
    grid-row: 1;
}

/* ----------------------------------------------------------------------------------------------
 * 7. Mini-cart promo code field (2026-09-27, owner: minicart_promo).
 *
 * The drawer now carries the voucher form the cart page already has, between the subtotal rows and
 * the total row. This section gives it the charter reading: one quiet panel with a hairline frame,
 * a square 44 px field, the drawer's own pill button, and the applied-voucher line with its trash
 * control. It is presentation only: the form contract (action, data-link-action="add-voucher",
 * hidden token + addDiscount, input name="discount_name") and the removal contract
 * (data-link-action="remove-voucher") are owned by the template and by the theme bundle.
 *
 * `.js-error` is hidden here until the theme bundle reveals it with jQuery `.show()`, which writes
 * an inline `display` and therefore beats this class rule. The colours of `.alert-danger` stay the
 * theme's own, the same choice section 5b states for the voucher refusal notice.
 *
 * Reversible by deleting this section. Scoped to the two drawer hosts, so the add-to-cart modal,
 * the cart page and the checkout tunnel are untouched.
 * -------------------------------------------------------------------------------------------- */

#_desktop_blockcart-content .gbz-cart-scroll .gbz-cart-promo,
#_mobile_blockcart-content .gbz-cart-scroll .gbz-cart-promo {
    margin: 16px 0 0;
    padding: 12px;
    border: var(--gbz-hairline, 1px solid #E6E6E6);
    border-radius: var(--gbz-radius-sm, 2px);
    background: var(--gbz-surface-alt, #F6F6F6);
}

#_desktop_blockcart-content .gbz-cart-scroll .gbz-cart-promo__label,
#_mobile_blockcart-content .gbz-cart-scroll .gbz-cart-promo__label {
    display: block;
    margin: 0 0 6px;
    color: var(--gbz-ink, #101010);
    font-size: var(--gbz-fs-small, 0.8125rem);
    font-weight: var(--gbz-weight-display, 700);
}

#_desktop_blockcart-content .gbz-cart-scroll .gbz-cart-promo__form .input-group,
#_mobile_blockcart-content .gbz-cart-scroll .gbz-cart-promo__form .input-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
}

#_desktop_blockcart-content .gbz-cart-scroll .gbz-cart-promo__form .form-control,
#_mobile_blockcart-content .gbz-cart-scroll .gbz-cart-promo__form .form-control {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    border: var(--gbz-hairline-strong, 1px solid #D0D0D0);
    border-radius: var(--gbz-radius-0, 0);
    background: var(--gbz-surface, #FFFFFF);
    color: var(--gbz-ink, #101010);
}

#_desktop_blockcart-content .gbz-cart-scroll .gbz-cart-promo__form .form-control::placeholder,
#_mobile_blockcart-content .gbz-cart-scroll .gbz-cart-promo__form .form-control::placeholder {
    color: var(--gbz-muted, #5F5F5F);
}

#_desktop_blockcart-content .gbz-cart-scroll .gbz-cart-promo__form .input-group-btn,
#_mobile_blockcart-content .gbz-cart-scroll .gbz-cart-promo__form .input-group-btn {
    display: flex;
    flex: 0 0 auto;
}

#_desktop_blockcart-content .gbz-cart-scroll .gbz-cart-promo__form .btn,
#_mobile_blockcart-content .gbz-cart-scroll .gbz-cart-promo__form .btn {
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--gbz-black, #000000);
    border-radius: var(--gbz-radius-pill, 999px);
    background: var(--gbz-white, #FFFFFF);
    color: var(--gbz-black, #000000);
    font-weight: var(--gbz-weight-display, 700);
    white-space: nowrap;
}

#_desktop_blockcart-content .gbz-cart-scroll .gbz-cart-promo__form .btn:hover,
#_desktop_blockcart-content .gbz-cart-scroll .gbz-cart-promo__form .btn:focus,
#_mobile_blockcart-content .gbz-cart-scroll .gbz-cart-promo__form .btn:hover,
#_mobile_blockcart-content .gbz-cart-scroll .gbz-cart-promo__form .btn:focus {
    border-color: var(--gbz-black, #000000);
    background: var(--gbz-black, #000000);
    color: var(--gbz-white, #FFFFFF);
}

#_desktop_blockcart-content .gbz-cart-scroll .gbz-cart-promo__form .form-control:focus-visible,
#_mobile_blockcart-content .gbz-cart-scroll .gbz-cart-promo__form .form-control:focus-visible,
#_desktop_blockcart-content .gbz-cart-scroll .gbz-cart-promo__form .btn:focus-visible,
#_mobile_blockcart-content .gbz-cart-scroll .gbz-cart-promo__form .btn:focus-visible,
#_desktop_blockcart-content .gbz-cart-scroll .gbz-cart-promo__remove:focus-visible,
#_mobile_blockcart-content .gbz-cart-scroll .gbz-cart-promo__remove:focus-visible {
    outline: 2px solid var(--gbz-accent, #D4FA0A);
    outline-offset: 2px;
}

/* The theme bundle reveals this node with `.show()` after the controller refused a code. */
#_desktop_blockcart-content .gbz-cart-scroll .gbz-cart-promo .js-error,
#_mobile_blockcart-content .gbz-cart-scroll .gbz-cart-promo .js-error {
    display: none;
    margin: 10px 0 0;
    font-size: var(--gbz-fs-small, 0.8125rem);
}

#_desktop_blockcart-content .gbz-cart-scroll .gbz-cart-promo__applied,
#_mobile_blockcart-content .gbz-cart-scroll .gbz-cart-promo__applied {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

#_desktop_blockcart-content .gbz-cart-scroll .gbz-cart-promo__item,
#_mobile_blockcart-content .gbz-cart-scroll .gbz-cart-promo__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-top: var(--gbz-hairline, 1px solid #E6E6E6);
}

#_desktop_blockcart-content .gbz-cart-scroll .gbz-cart-promo__item:first-child,
#_mobile_blockcart-content .gbz-cart-scroll .gbz-cart-promo__item:first-child {
    border-top: 0;
}

#_desktop_blockcart-content .gbz-cart-scroll .gbz-cart-promo__code,
#_mobile_blockcart-content .gbz-cart-scroll .gbz-cart-promo__code {
    flex: 0 1 auto;
    min-width: 0;
    color: var(--gbz-ink, #101010);
    font-weight: var(--gbz-weight-display, 700);
    overflow-wrap: anywhere;
}

#_desktop_blockcart-content .gbz-cart-scroll .gbz-cart-promo__value,
#_mobile_blockcart-content .gbz-cart-scroll .gbz-cart-promo__value {
    flex: 0 0 auto;
    color: var(--gbz-muted, #5F5F5F);
}

#_desktop_blockcart-content .gbz-cart-scroll .gbz-cart-promo__remove,
#_mobile_blockcart-content .gbz-cart-scroll .gbz-cart-promo__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin-left: auto;
    color: var(--gbz-ink, #101010);
    text-decoration: none;
}

#_desktop_blockcart-content .gbz-cart-scroll .gbz-cart-promo__remove:hover,
#_mobile_blockcart-content .gbz-cart-scroll .gbz-cart-promo__remove:hover {
    color: var(--gbz-accent-ink, #000000);
    background: var(--gbz-accent, #D4FA0A);
}

/* Submit wording. The ps_shoppingcart/ajax refresh renders through a module front controller that
   carries no $language, so the label is resolved against the document's own lang attribute, next
   to the drawer's other refreshed labels. English is the no-match default. */
#_desktop_blockcart-content .gbz-cart-scroll .gbz-cart-promo__cta::before,
#_mobile_blockcart-content .gbz-cart-scroll .gbz-cart-promo__cta::before {
    content: attr(data-gbz-label-en);
}

html[lang^="fr"] #_desktop_blockcart-content .gbz-cart-scroll .gbz-cart-promo__cta::before,
html[lang^="fr"] #_mobile_blockcart-content .gbz-cart-scroll .gbz-cart-promo__cta::before {
    content: attr(data-gbz-label-fr);
}

html[lang^="de"] #_desktop_blockcart-content .gbz-cart-scroll .gbz-cart-promo__cta::before,
html[lang^="de"] #_mobile_blockcart-content .gbz-cart-scroll .gbz-cart-promo__cta::before {
    content: attr(data-gbz-label-de);
}

html[lang^="it"] #_desktop_blockcart-content .gbz-cart-scroll .gbz-cart-promo__cta::before,
html[lang^="it"] #_mobile_blockcart-content .gbz-cart-scroll .gbz-cart-promo__cta::before {
    content: attr(data-gbz-label-it);
}

@media (max-width: 575px) {
    #_desktop_blockcart-content .gbz-cart-scroll .gbz-cart-promo,
    #_mobile_blockcart-content .gbz-cart-scroll .gbz-cart-promo {
        padding: 10px;
    }

    #_desktop_blockcart-content .gbz-cart-scroll .gbz-cart-promo__form .input-group,
    #_mobile_blockcart-content .gbz-cart-scroll .gbz-cart-promo__form .input-group {
        flex-wrap: wrap;
    }

    #_desktop_blockcart-content .gbz-cart-scroll .gbz-cart-promo__form .form-control,
    #_mobile_blockcart-content .gbz-cart-scroll .gbz-cart-promo__form .form-control {
        flex: 1 1 100%;
    }

    #_desktop_blockcart-content .gbz-cart-scroll .gbz-cart-promo__form .input-group-btn,
    #_mobile_blockcart-content .gbz-cart-scroll .gbz-cart-promo__form .input-group-btn {
        flex: 1 1 100%;
    }

    #_desktop_blockcart-content .gbz-cart-scroll .gbz-cart-promo__form .btn,
    #_mobile_blockcart-content .gbz-cart-scroll .gbz-cart-promo__form .btn {
        width: 100%;
    }
}