/* ==========================================================================
   Voltage theme — electronics & software, playful flat-geometric

   Built on the same component classes as the default theme (the view layer
   is shared), retuned here and then reworked in the "Voltage" section at
   the bottom of this file.

   TWO BRAND COLOURS carry the whole look: a warm orange doing the loud work
   (blobs, buttons, prices, highlights) against an indigo that does all the
   talking (headings, nav, body copy) on a white ground. Everything
   decorative — the dot grids, plus marks, waves and hatching — is mixed
   from those two with color-mix(), so an admin who changes the accent in
   Themes → Customize appearance re-tints the confetti too instead of
   leaving it stranded on the old palette.

   Admin-overridable tokens are --color-ink, --color-accent and --color-cta.
   Fonts are NOT theme-controlled: the layout always overwrites
   --font-heading/--font-body from Store Settings. This theme is drawn for a
   heavy grotesk display face (Archivo Black or Big Shoulders Display, both
   in the curated list) over a neutral sans body.
   ========================================================================== */
:root {
    --color-bg: #ffffff;
    --color-bg-alt: #f5f5fd; /* barely-there indigo tint for alternating bands */
    --color-ink: #2b2a8c; /* indigo — headings, nav and body copy alike */
    --color-ink-soft: #6f6cb5;
    --color-line: #e5e4f7;
    --color-accent: #f79c1e; /* orange — the loud one */
    --color-accent-ink: #ffffff;
    --color-cta: #f79c1e; /* buy buttons are the accent, not a third colour */
    --color-cta-ink: #ffffff;
    --color-danger: #d92d20;
    /* The second decorative note (badges, dot grids, confetti). Mostly the
       theme's own violet so it stays recognisably Voltage, but nudged toward
       whatever ink the merchant sets so a recoloured store doesn't end up with
       a stranded violet clashing against its new brand colour. */
    --color-gold: color-mix(in srgb, #5b4ff0 72%, var(--color-ink) 28%);

    --font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --font-heading: "Fraunces", Georgia, "Times New Roman", serif;

    --container-w: 1320px;
    --radius: 18px; /* soft cards, not the boutique's hard square */
    --control-radius: 999px; /* pills — the single most characteristic detail */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-soft: 0 1px 2px rgba(43, 42, 140, 0.04), 0 14px 34px rgba(43, 42, 140, 0.08);
    --shadow-pop: 0 4px 6px -2px rgba(43, 42, 140, 0.06), 0 16px 34px -6px rgba(43, 42, 140, 0.20);

    /* --- Decorative motifs, all mixed from the two brand colours --------- */
    --confetti-dot: color-mix(in srgb, var(--color-gold) 34%, transparent);
    --confetti-line: color-mix(in srgb, var(--color-gold) 46%, transparent);
    --confetti-warm: color-mix(in srgb, var(--color-accent) 60%, transparent);

    --dots: radial-gradient(circle, var(--confetti-dot) 2.1px, transparent 2.2px);
    --hatch: repeating-linear-gradient(-52deg, var(--confetti-line) 0 1.5px, transparent 1.5px 9px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* overflow-x: clip (not hidden) deliberately — hidden with no explicit
   overflow-y computes overflow-y to auto per spec, which silently turns
   body/html into their own scroll container and breaks position:sticky
   on everything inside (the header, in particular) since the element
   sticks relative to a box that never actually scrolls. */
html, body { overflow-x: clip; max-width: 100%; }
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-ink);
    background: var(--color-bg);
    font-size: 15px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
[x-cloak] { display: none !important; }
body.no-scroll { overflow: hidden; }
button, a { touch-action: manipulation; }

/* Single, on-brand focus treatment for every interactive element. Uses
   :focus-visible so mouse clicks stay clean and only keyboard/AT users see
   the ring — the only accessible-focus styling this theme had before. */
a, button, input, select, textarea, summary, [tabindex] {
    outline-offset: 2px;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.btn:focus-visible { outline-offset: 3px; }

.eyebrow {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
    margin: 0 0 8px;
}

.announcement-bar {
    background: var(--color-ink);
    color: var(--color-bg);
    text-align: center;
    padding: 9px 16px;
    position: relative;
    overflow: hidden;
}
.announcement-bar__text {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.announcement-bar[x-data] .announcement-bar__text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.announcement-bar[x-data] { min-height: 36px; }

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: #000;
    color: #fff;
    padding: 8px 12px;
    z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
    border-bottom: 1px solid var(--color-line);
    position: sticky;
    top: 0;
    background: var(--color-bg);
    z-index: 40;
    box-shadow: 0 0 0 rgba(17, 17, 17, 0);
    transition: box-shadow .2s ease;
}
.site-header--scrolled { box-shadow: 0 2px 16px rgba(17, 17, 17, 0.08); }
.site-header__bar {
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    transition: padding .2s ease;
}
.site-header--scrolled .site-header__bar { padding-top: 8px; padding-bottom: 8px; }
.site-header--scrolled .site-header__logo { font-size: 16px; }
@media (max-width: 600px) {
    .site-header__bar { padding: 10px 16px; gap: 12px; }
}
.site-header__logo {
    font-family: var(--font-heading);
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 19px;
    margin: 0 auto;
    order: 2;
    transition: font-size .2s ease;
}
.site-nav { display: flex; gap: 26px; order: 1; }
.site-nav__item { position: relative; }
.site-nav__link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 8px 0;
    position: relative;
}
.site-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 2px;
    height: 1px;
    background: var(--color-ink);
    transition: right .2s var(--ease);
}
.site-nav__link:hover::after { right: 0; }
.site-nav__chevron { transition: transform .18s var(--ease); }
.site-nav__chevron.is-open { transform: rotate(180deg); }
.site-nav__dropdown {
    position: absolute;
    top: 100%;
    left: -16px;
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    min-width: 220px;
    padding: 10px 0;
    box-shadow: 0 16px 32px rgba(0,0,0,0.1);
}
.site-nav__dropdown-link {
    display: block;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    border-left: 2px solid transparent;
    transition: background-color .12s ease, border-color .12s ease;
}
.site-nav__dropdown-link:hover,
.site-nav__dropdown-link:focus-visible {
    background: #f7f2ef;
    border-left-color: var(--color-accent);
}

.site-nav__dropdown--enter,
.site-nav__dropdown--leave { transition: opacity .16s var(--ease), transform .16s var(--ease); }
.site-nav__dropdown--enter-start { opacity: 0; transform: translateY(-6px); }
.site-nav__dropdown--enter-end { opacity: 1; transform: translateY(0); }

.site-header__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; order: 3; }
.icon-btn {
    position: relative;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    color: var(--color-ink);
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.icon-btn:hover { background: #f7f2ef; }
.icon-btn:active { transform: scale(0.92); }
.icon-btn__badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--color-accent);
    color: #fff;
    font-size: 10px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 999px;
    transition: transform .15s var(--ease);
}

.lang-switch { position: relative; }
.lang-switch__toggle { width: auto; padding: 0 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; border-radius: 999px; }
.lang-switch__dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    min-width: 140px;
    padding: 6px 0;
    box-shadow: 0 16px 32px rgba(0,0,0,0.1);
    z-index: 10;
}
.lang-switch__link { display: block; padding: 8px 16px; font-size: 13px; transition: background-color .12s ease; }
.lang-switch__link:hover, .lang-switch__link:focus-visible { background: #f7f2ef; }
.lang-switch__link.is-active { font-weight: 700; color: var(--color-accent); }

.site-nav-mobile { border-top: 1px solid var(--color-line); padding: 8px 16px; overflow: hidden; }
.site-nav-mobile--enter,
.site-nav-mobile--leave { transition: opacity .16s var(--ease), transform .16s var(--ease); }
.site-nav-mobile--enter-start { opacity: 0; transform: translateY(-8px); }
.site-nav-mobile--enter-end { opacity: 1; transform: translateY(0); }

.site-nav-mobile__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    list-style: none;
}
.site-nav-mobile__item summary::-webkit-details-marker { display: none; }
.site-nav-mobile__marker { transition: transform .18s var(--ease); flex-shrink: 0; }
.site-nav-mobile__item[open] .site-nav-mobile__marker { transform: rotate(180deg); }
.site-nav-mobile__item--link {
    display: block;
    padding: 14px 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.site-nav-mobile__children { display: flex; flex-direction: column; padding-left: 12px; }
.site-nav-mobile__children a {
    padding: 10px 0;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-ink-soft);
    transition: color .12s ease;
}
.site-nav-mobile__children a:hover, .site-nav-mobile__children a:focus-visible { color: var(--color-ink); }

/* ==========================================================================
   Hero (split panel: statement + editorial image)
   ========================================================================== */
.hero {
    background: var(--color-accent);
    color: var(--color-ink);
    max-width: none;
    text-align: left;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}
.hero__content {
    padding: 64px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hero .eyebrow { color: rgba(0,0,0,0.6); }
.hero__brand {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 68px;
    line-height: 0.98;
    letter-spacing: -0.01em;
    text-transform: none;
    margin: 0 0 20px;
}
.hero__text {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    max-width: 420px;
    margin: 0 0 32px;
    color: rgba(26, 21, 18, 0.82);
}
.hero__cta { width: auto; align-self: flex-start; padding-left: 30px; padding-right: 30px; }
.hero__media { overflow: hidden; align-self: center; aspect-ratio: var(--hero-image-ratio, 4/3); background: #111; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; }
    .hero__content { padding: 40px 20px 32px; }
    .hero__brand { font-size: 44px; }
    .hero__media { order: -1; }
}

/* ==========================================================================
   Sections / layout rhythm
   ========================================================================== */
.section { max-width: var(--container-w); margin: 0 auto; padding: 40px 24px; }
.section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 20px;
}
.section__header h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0;
}
.link-more {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-accent);
}
.link-more:hover { text-decoration: underline; }

/* ==========================================================================
   Category grid — portrait cards
   ========================================================================== */
.category-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}
.category-card { text-align: center; }
.category-card__image {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 0;
    margin-bottom: 12px;
    background: #f1eae6;
}
.category-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
.category-card:hover .category-card__image img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
    .category-card__image img { transition: none; }
    .category-card:hover .category-card__image img { transform: none; }
}
.category-card__label {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .12s ease;
}
.category-card:hover .category-card__label { color: var(--color-accent); }
@media (max-width: 900px) {
    .category-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    /* 3 cramped ~98px columns become a swipeable rail instead — each tile
       gets room to breathe and the label no longer has to fight for space. */
    .category-grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(120px, 30%);
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 24px;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .category-card { scroll-snap-align: start; }
}

/* ==========================================================================
   Trust bar
   ========================================================================== */
.trust-bar { background: var(--color-bg-alt); padding: 28px 24px; }
.trust-bar__grid {
    max-width: var(--container-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.trust-bar__item { display: flex; align-items: center; gap: 12px; }
.trust-bar__icon { flex-shrink: 0; width: 28px; height: 28px; color: var(--color-accent); }
.trust-bar__label { font-family: var(--font-heading); font-weight: 600; font-size: 13px; line-height: 1.3; }
@media (max-width: 900px) {
    .trust-bar__grid { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonials { padding: 72px 24px; }
.testimonials__header { max-width: var(--container-w); margin: 0 auto 40px; text-align: center; }
.testimonials__header h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 28px;
    letter-spacing: 0.01em;
    margin: 0;
}
.testimonials__grid {
    max-width: var(--container-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
.testimonial__stars { display: flex; gap: 3px; color: var(--color-gold); margin-bottom: 18px; }
.testimonial__stars svg { width: 15px; height: 15px; }
.testimonial__quote {
    font-family: var(--font-heading);
    font-size: 19px;
    font-style: italic;
    font-weight: 500;
    line-height: 1.5;
    margin: 0 0 20px;
}
.testimonial__author { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink-soft); }
@media (max-width: 900px) {
    .testimonials__grid { grid-template-columns: 1fr; gap: 40px; }
    .testimonials { padding: 56px 24px; }
}

/* ==========================================================================
   Feature split banner
   ========================================================================== */
.feature-banner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 460px;
}
.feature-banner__image { overflow: hidden; align-self: center; aspect-ratio: var(--feature-image-ratio, 4/3); background: #111; }
.feature-banner__image img { width: 100%; height: 100%; object-fit: cover; }
.feature-banner__spotlight {
    background: var(--color-accent);
    padding: 32px;
    display: flex;
    flex-direction: column;
}
.feature-banner__spotlight-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 20px;
    font-family: var(--font-heading);
}
.feature-banner__spotlight-name { font-weight: 800; font-size: 14px; text-transform: uppercase; }
.feature-banner__spotlight-price { font-weight: 700; font-size: 14px; }
.feature-banner__spotlight-media {
    flex: 1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    margin-bottom: 20px;
    min-height: 200px;
}
.feature-banner__spotlight-media img { max-height: 240px; width: auto; object-fit: contain; }
.feature-banner__spotlight .btn { max-width: 320px; }
@media (max-width: 900px) {
    .feature-banner { grid-template-columns: 1fr; min-height: 0; }
}

/* ==========================================================================
   Product cards / scroller / grid
   ========================================================================== */
.product-scroll {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 1fr);
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-line) transparent;
}
@media (max-width: 600px) {
    .product-scroll { grid-auto-columns: minmax(168px, 66%); gap: 14px; }
}
.product-scroll::-webkit-scrollbar { height: 6px; }
.product-scroll::-webkit-scrollbar-track { background: transparent; }
.product-scroll::-webkit-scrollbar-thumb { background: var(--color-line); border-radius: 999px; }
.product-scroll::-webkit-scrollbar-thumb:hover { background: var(--color-ink-soft); }
.product-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px 20px;
}
@media (max-width: 900px) {
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    scroll-snap-align: start;
}
.product-card__media {
    position: relative;
    display: block;
    aspect-ratio: 1;
    background: #f5f2f0;
    overflow: hidden;
    margin-bottom: 14px;
    border: 1px solid var(--color-line);
    transition: border-color .15s ease;
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
.product-card:hover .product-card__media { border-color: var(--color-ink); }
.product-card:hover .product-card__media img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
    .product-card__media img { transition: none; }
    .product-card:hover .product-card__media img { transform: none; }
}
.product-card__name a { transition: color .12s ease; }
.product-card__name a:hover { color: var(--color-accent); }
.product-card__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    left: auto;
    background: var(--color-accent);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 4px 8px;
}
.product-card__name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin: 0 0 4px;
}
.product-card__price { font-size: 13px; color: var(--color-ink-soft); margin: 0 0 12px; }
.product-card__actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 10px; }
.product-card__actions select {
    min-height: 44px;
    border: 1px solid var(--color-line);
    padding: 6px 30px 6px 8px;
    font-size: 13px;
    background: #fff;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23111111' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 7px;
    transition: border-color .12s ease;
}
.product-card__actions select:focus { border-color: var(--color-ink); outline: none; }

/* ==========================================================================
   Product actions (shared "Add to cart" / "Buy now" component)
   ========================================================================== */
.product-actions { display: flex; flex-direction: column; gap: 8px; }
.product-actions__variant {
    min-height: 44px;
    border: 1px solid var(--color-line);
    padding: 6px 30px 6px 8px;
    font-size: 13px;
    background: #fff;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23111111' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 7px;
    transition: border-color .12s ease;
}
.product-actions__variant:focus { border-color: var(--color-ink); outline: none; }
.product-actions__buttons { display: flex; gap: 8px; }
.product-actions__cart-form { display: contents; }
.product-actions__unavailable { font-size: 12px; color: var(--color-ink-soft); margin: 0; }
.product-actions--compact .product-actions__buttons { flex-direction: column; }
.product-actions--compact .product-actions__buttons .btn { padding: 8px 10px; font-size: 11px; }
.product-actions--compact .btn__subtitle { display: none; }
.pdp .product-actions { max-width: 380px; margin-bottom: 24px; }
.pdp .product-actions__buttons .btn { max-width: 220px; }

/* ==========================================================================
   Buttons — "Acheter maintenant / Le paiement à la livraison"
   ========================================================================== */
.btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 44px;
    width: 100%;
    padding: 10px 14px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid var(--color-cta);
    border-radius: var(--control-radius);
    transition: opacity .15s ease, transform .1s ease;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:not(:disabled):active { transform: translateY(1px); }
.btn--solid { background: var(--color-cta); color: var(--color-cta-ink); }
.btn--solid:hover { opacity: 0.88; }
.btn__subtitle {
    display: block;
    font-size: 9px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.85;
}
.btn--outline { background: #fff; color: var(--color-ink); border-color: var(--color-line); flex-direction: row; }
.btn--outline::after { content: none; }
.btn--outline:hover { background: var(--color-ink); color: #fff; border-color: var(--color-ink); }

/* ==========================================================================
   Brand tiles
   ========================================================================== */
.brand-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.brand-card { display: block; }
.brand-card__image { aspect-ratio: 4/5; overflow: hidden; background: #f5f2f0; }
.brand-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
.brand-card:hover .brand-card__image img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
    .brand-card__image img { transition: none; }
    .brand-card:hover .brand-card__image img { transform: none; }
}
.brand-card__label {
    display: block;
    background: var(--color-accent);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: center;
    padding: 14px 8px;
    transition: background-color .15s ease;
}
.brand-card:hover .brand-card__label { background: var(--color-ink); }
@media (max-width: 900px) {
    .brand-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Ticker marquee
   ========================================================================== */
.ticker {
    background: #000;
    color: #fff;
    overflow: hidden;
    padding: 20px 0;
    white-space: nowrap;
}
.ticker__track {
    display: inline-flex;
    animation: ticker-scroll 22s linear infinite;
}
.ticker__item {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 34px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0 32px;
}
@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .ticker__track { animation: none; }
}

/* ==========================================================================
   CTA banner
   ========================================================================== */
.cta-banner {
    text-align: center;
    padding: 64px 24px;
    background: #fff;
}
.cta-banner h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 26px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0 0 8px;
}
.cta-banner p { display: none; }
.cta-banner .btn {
    display: inline-flex;
    width: auto;
    background: none;
    border: none;
    color: var(--color-accent);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
    min-height: 0;
    padding: 0;
}
.cta-banner .btn::after { content: none; }
.cta-banner .btn:hover { text-decoration: underline; opacity: 1; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    border-top: 1px solid var(--color-line);
    margin-top: 0;
    background: var(--color-bg-alt);
}
.site-footer__inner {
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 56px 24px 48px;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
    gap: 40px;
    align-items: start;
}
@media (max-width: 900px) {
    .site-footer__inner { grid-template-columns: 1fr 1fr; row-gap: 36px; }
}
@media (max-width: 600px) {
    .site-footer__inner { grid-template-columns: 1fr; }
}
.site-footer__brand-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 20px;
    margin: 0 0 16px;
}
.site-footer__contact { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.site-footer__contact .eyebrow { font-weight: 700; }
.site-footer__contact a { transition: color .12s ease; }
.site-footer__contact a:hover { color: var(--color-accent); }
.site-footer__address { color: var(--color-ink-soft); margin: 0; }
.site-footer__newsletter label {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
}
.site-footer__newsletter-row { display: flex; border-bottom: 1px solid var(--color-ink); }
.site-footer__newsletter-row input {
    flex: 1;
    min-height: 44px;
    border: none;
    background: transparent;
    padding: 10px 0;
    font-size: 16px;
}
.site-footer__newsletter-row button {
    border: none;
    background: none;
    color: var(--color-ink);
    padding: 0 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    transition: color .12s ease;
}
.site-footer__newsletter-row button:hover { color: var(--color-accent); }
.field-error { color: var(--color-danger); font-size: 12px; margin-top: 6px; display: block; }
.site-footer__social { display: flex; flex-direction: row; gap: 10px; }
.site-footer__social-link {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid var(--color-line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-ink);
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.site-footer__social-link svg { width: 18px; height: 18px; }
.site-footer__social-link:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); transform: translateY(-2px); }
.site-footer__map { grid-column: span 1; }
.site-footer__map iframe {
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--color-line);
    display: block;
}
@media (max-width: 900px) {
    .site-footer__map { grid-column: span 2; }
}
@media (max-width: 600px) {
    .site-footer__map { grid-column: span 1; }
}
.site-footer__wordmark {
    text-align: center;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0;
    padding-top: 8px;
    border-top: 1px solid var(--color-line);
}
.site-footer__bottom {
    text-align: center;
    font-size: 11px;
    color: var(--color-ink-soft);
    padding: 12px 24px 24px;
}

@media (max-width: 900px) {
    .site-footer__inner { grid-template-columns: 1fr; }
    .site-footer__social { justify-content: flex-start; }
}

/* ==========================================================================
   PLP — collection hero + filter bar
   ========================================================================== */
.breadcrumbs { display: none; }
.page-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 34px;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin: 0 0 8px;
}
.page-description { color: rgba(0,0,0,0.7); font-size: 14px; max-width: 640px; margin: 0; }
.empty-state { color: var(--color-ink-soft); font-size: 14px; padding: 40px 0; text-align: center; }
@media (max-width: 600px) {
    .page-title { font-size: 24px; }
}

.collection-hero { background: var(--color-accent); padding: 40px 24px; }
.collection-hero .section { padding: 0; }
.collection-hero .breadcrumbs { display: block; color: rgba(0,0,0,0.6); }
.collection-hero .breadcrumbs a { text-decoration: underline; }

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 12px 24px;
    border-bottom: 1px solid var(--color-line);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-ink-soft);
}
.filter-bar__group { position: relative; flex: none; }
.filter-bar__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    background: none;
    border: 1px solid transparent;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .12s ease, color .12s ease;
}
.filter-bar__trigger:hover,
.filter-bar__trigger[aria-expanded="true"] { border-color: var(--color-line); color: var(--color-ink); }
.filter-bar__panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 20;
    min-width: 220px;
    max-width: calc(100vw - 32px);
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    padding: 8px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
}
.filter-bar__option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 8px;
    font-size: 13px;
    color: var(--color-ink);
    cursor: pointer;
    white-space: nowrap;
}
.filter-bar__option:hover { background: #f7f2ef; }
.filter-bar__option input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--color-accent); }
.filter-bar__panel--price { min-width: 240px; padding: 14px; }
.filter-bar__price-row { display: flex; gap: 10px; margin-bottom: 12px; }
.filter-bar__price-row label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--color-ink-soft); flex: 1; min-width: 0; }
.filter-bar__price-row input {
    min-height: 40px;
    border: 1px solid var(--color-line);
    background: #fff;
    padding: 0 10px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-ink);
    text-transform: none;
    letter-spacing: normal;
}
.filter-bar__price-row input:focus { border-color: var(--color-ink); outline: none; }
.filter-bar__panel--price .btn { min-height: 40px; }
.filter-bar__clear {
    flex: none;
    color: var(--color-ink-soft);
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: 0 4px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.filter-bar__clear:hover { color: var(--color-ink); }
.filter-bar__spacer { margin-left: auto; display: flex; align-items: center; gap: 16px; flex: none; }
.filter-bar__count { color: var(--color-ink); font-weight: 400; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.filter-bar__sort {
    min-height: 44px;
    border: 1px solid var(--color-line);
    background-color: #fff;
    padding: 0 28px 0 12px;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    color: var(--color-ink);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23111111' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 7px;
    cursor: pointer;
}
.filter-bar__sort:focus { border-color: var(--color-ink); outline: none; }
@media (max-width: 600px) {
    .filter-bar__spacer { margin-left: 0; }
    /* .filter-bar__panel is positioned absolute relative to its own
       trigger button (.filter-bar__group) — on a narrow viewport a
       trigger that isn't near the left edge (e.g. "Prix", after
       "Marque") pushes the panel's right edge well past the screen, so
       part of it (the Max input, the Appliquer button) is unreachable.
       Anchoring to the viewport instead, centered, sidesteps that
       regardless of where the trigger happens to sit in the wrapped row.
       [dir="rtl"] is reasserted at equal specificity so this isn't lost
       to the higher-specificity RTL override further down the file. */
    .filter-bar__panel,
    html[dir="rtl"] .filter-bar__panel {
        position: fixed;
        left: 16px;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        width: auto;
        max-width: none;
        max-height: calc(100vh - 32px);
        overflow-y: auto;
    }
    .filter-bar__panel--price { min-width: 0; }
}

.brand-header { display: flex; align-items: center; gap: 20px; margin-top: 0; }
.brand-header__logo { width: 80px; height: 80px; object-fit: contain; background: #fff; flex: 0 0 auto; }

.pagination-wrap { margin-top: 32px; }

/* ==========================================================================
   Pagination — replaces Laravel's Tailwind-classed default view (see
   components/pagination.blade.php), whose utility classes do nothing here
   since this storefront doesn't load Tailwind; that's what let the arrow
   <svg>s render at a huge unstyled default size instead of this 44px
   touch-target-sized control.
   ========================================================================== */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.pagination__arrow {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-line);
    border-radius: var(--control-radius);
    background: none;
    color: var(--color-ink);
    text-decoration: none;
    transition: border-color .14s ease, color .14s ease;
}
.pagination__arrow:hover { border-color: var(--color-accent); color: var(--color-accent); }
.pagination__arrow--disabled { opacity: .35; pointer-events: none; }
[dir="rtl"] .pagination__arrow svg { transform: scaleX(-1); }
.pagination__pages { display: flex; align-items: center; gap: 4px; }
.pagination__page {
    min-width: 40px;
    height: 40px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--control-radius);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-ink-soft);
    text-decoration: none;
    transition: background-color .14s ease, color .14s ease;
}
.pagination__page:hover { background: var(--color-line); }
.pagination__page--current { background: var(--color-accent); color: var(--color-accent-ink); }
.pagination__dots {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-ink-soft);
}

/* ==========================================================================
   PDP
   ========================================================================== */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
@media (max-width: 900px) {
    .pdp { grid-template-columns: 1fr; }
}
.product-gallery { display: flex; flex-direction: column; padding: 24px; }
@media (min-width: 900px) {
    /* Stays in view while the info column (now much longer, landing-page
       style) scrolls past it — opts out of the grid's align-items:stretch
       so it can size to its own content instead of the taller column. */
    .product-gallery { position: sticky; top: 96px; align-self: start; }
}
.product-gallery__main {
    aspect-ratio: 1;
    background: #fff;
    border: 1px solid var(--color-line);
    overflow: hidden;
}
@media (min-width: 900px) {
    /* Capped by viewport height (not just column width) so a wide desktop
       window can't make the sticky image taller than the screen. */
    .product-gallery__main { max-width: min(100%, 52vh); margin: 0 auto; }
}
.product-gallery__main img { width: 100%; height: 100%; object-fit: contain; }
.product-gallery__thumbs { display: flex; gap: 10px; margin-top: 12px; padding: 0 4px; }
@media (min-width: 900px) {
    .product-gallery__thumbs { max-width: min(100%, 52vh); margin-left: auto; margin-right: auto; }
}
.product-gallery__thumb {
    width: 56px;
    height: 56px;
    padding: 4px;
    border: 1px solid var(--color-line);
    background: #fff;
    cursor: pointer;
    overflow: hidden;
}
.product-gallery__thumb.is-active { border-color: var(--color-ink); border-width: 2px; }
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }

.pdp__info {
    background: var(--color-accent);
    padding: 32px;
    display: flex;
    flex-direction: column;
}
@media (min-width: 900px) {
    .pdp__info { padding: 56px 48px; }
}
.pdp__eyebrow {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink);
    margin: 0 0 8px;
}
.pdp__brand {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: underline;
}
.pdp__name {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 30px;
    line-height: 1.1;
    text-transform: uppercase;
    margin: 10px 0 6px;
}
.pdp__price { font-size: 22px; font-weight: 700; margin: 0 0 16px; }
@media (max-width: 600px) {
    .pdp__name { font-size: 22px; }
    .pdp__price { font-size: 17px; }
}
.pdp__stock--out {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    background: var(--color-danger);
    padding: 4px 10px;
    margin-bottom: 12px;
}
.pdp__form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 24px; max-width: 340px; }
.pdp__form label { width: 100%; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.pdp__form select {
    width: 100%;
    min-height: 44px;
    border: 1px solid rgba(0,0,0,0.25);
    padding: 10px 34px 10px 12px;
    font-size: 16px;
    background: #fff;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23111111' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 11px 8px;
    transition: border-color .12s ease;
}
.pdp__form select:focus { border-color: var(--color-ink); outline: none; }
.pdp__form .btn { max-width: 320px; }
.pdp__description {
    padding-top: 20px;
    border-top: 1px solid rgba(0,0,0,0.15);
}
.pdp__description h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 10px;
}
.pdp__description p { font-size: 13px; line-height: 1.7; color: var(--color-ink); }

/* ==========================================================================
   PDP — "about the brand" (real brand data, not fabricated per-product copy).
   A cream card floating inside the accent-colored info column: breaks up
   the block of solid color, keeps text at its originally-designed contrast
   (the accent background is too close in tone to --color-ink-soft to use
   it directly), and — deliberately — adds genuine height to the info
   column so the sticky gallery beside it has real room to be sticky in,
   rather than only working for products with unusually long descriptions.
   ========================================================================== */
.pdp__brand-about {
    margin-top: 24px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--color-bg);
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.pdp__brand-about-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--color-line);
    flex-shrink: 0;
}
.pdp__brand-about-name {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 16px;
    text-transform: uppercase;
    margin: 2px 0 8px;
}
.pdp__brand-about-desc {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-ink-soft);
    margin: 0 0 8px;
}
@media (max-width: 600px) {
    .pdp__brand-about { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ==========================================================================
   PDP — mobile sticky buy bar (the "do not break mobile view" answer to the
   desktop sticky gallery: a slim bottom bar instead of a sticky image, so
   the purchase CTA stays reachable without eating scarce mobile height)
   ========================================================================== */
.pdp-sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 110;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--color-bg);
    border-top: 1px solid var(--color-line);
    box-shadow: 0 -4px 16px rgba(17, 17, 17, 0.1);
}
.pdp-sticky-bar__thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border: 1px solid var(--color-line);
    flex-shrink: 0;
    background: #fff;
}
.pdp-sticky-bar__info { flex: 1; min-width: 0; }
.pdp-sticky-bar__name {
    font-size: 12px;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pdp-sticky-bar__price { font-size: 12px; color: var(--color-ink-soft); margin: 0; }
.pdp-sticky-bar__cta { width: auto; flex-shrink: 0; min-height: 44px; padding: 0 18px; }
.pdp-sticky-bar--enter,
.pdp-sticky-bar--leave { transition: transform .2s var(--ease), opacity .2s var(--ease); }
.pdp-sticky-bar--enter-start { transform: translateY(100%); opacity: 0; }
.pdp-sticky-bar--enter-end { transform: translateY(0); opacity: 1; }
@media (min-width: 900px) {
    .pdp-sticky-bar { display: none; }
}
/* The mobile cart FAB shares the bottom-right corner — lift it above the
   sticky bar (present, even if not currently x-shown) so they never overlap. */
body:has(.pdp-sticky-bar) .cart-fab { bottom: 78px; }
body:has(.pdp-sticky-bar) .checkout-fab { bottom: 78px; }

.brand-tags {
    background: var(--color-accent);
    padding: 32px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
}
.brand-tags a {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 24px;
    text-transform: none;
}
.brand-tags sup { font-size: 13px; font-weight: 600; margin-left: 2px; }

/* ==========================================================================
   Cart / checkout / thank-you / search — palette + touch-target pass
   ========================================================================== */
.cart {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    align-items: start;
}
@media (max-width: 900px) {
    .cart { grid-template-columns: 1fr; }
}
.cart__lines { display: flex; flex-direction: column; gap: 20px; }
.cart-line {
    display: grid;
    grid-template-columns: 72px 1fr auto auto auto;
    gap: 16px;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-line);
}
.cart-line__media { width: 72px; height: 72px; background: #f5f2f0; overflow: hidden; flex: 0 0 auto; }
.cart-line__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__name { font-family: var(--font-heading); font-weight: 700; font-size: 13px; text-transform: uppercase; display: block; transition: color .12s ease; }
.cart-line__name:hover { color: var(--color-accent); }
.cart-line__variant, .cart-line__price { font-size: 12px; color: var(--color-ink-soft); margin: 4px 0 0; }
.cart-line__qty { display: flex; align-items: center; gap: 8px; }
.cart-line__qty .btn { width: auto; min-height: 44px; padding: 0 12px; }
.cart-line__total { font-family: var(--font-heading); font-weight: 700; font-size: 13px; white-space: nowrap; }
@media (max-width: 600px) {
    .cart-line {
        grid-template-columns: 64px 1fr auto;
        grid-template-areas:
            "media info remove"
            "qty   qty  total";
        row-gap: 12px;
    }
    .cart-line__media { grid-area: media; width: 64px; height: 64px; }
    .cart-line__info { grid-area: info; }
    .cart-line__remove { grid-area: remove; }
    .cart-line__qty { grid-area: qty; }
    .cart-line__total { grid-area: total; justify-self: end; align-self: center; }
}

.cart__summary, .checkout__summary {
    border: 1px solid var(--color-line);
    padding: 24px;
}
.cart__summary h2, .checkout__summary h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 16px;
}
.cart__summary-row, .checkout__summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid var(--color-line);
}
.cart__summary-row:first-child, .checkout__summary-row:first-child { padding-top: 0; margin-top: 0; border-top: none; }
.checkout__summary-row--total {
    font-weight: 700;
    font-size: 17px;
    font-family: var(--font-heading);
    margin-top: 14px;
    padding: 14px;
    border-radius: var(--control-radius);
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}
.checkout__summary-row--total span:last-child { color: var(--color-accent); }
.cart__summary-note { font-size: 12px; color: var(--color-ink-soft); margin: 8px 0 20px; }
.checkout__summary-line { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--color-ink-soft); margin-bottom: 10px; }
.cart__checkout, .checkout__form .btn, .form-row input, .form-row select, .form-row textarea { border-radius: var(--control-radius); }

.checkout {
    display: grid;
    /* minmax(0, …), not bare fr units — a wide child (the wilaya <select>
       especially) refuses to let a bare-fr track shrink, which forces
       every ancestor to overflow the viewport in turn. */
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    margin-top: 24px;
}
@media (max-width: 900px) {
    .checkout { grid-template-columns: minmax(0, 1fr); }
}
.checkout > * { min-width: 0; }
.checkout__main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.checkout__form h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 28px 0 16px;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
}
.checkout__form h2:first-child { margin-top: 0; }
.checkout__badge {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 10px;
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    padding: 3px 9px;
    border-radius: 999px;
}
.checkout__payment-note { font-size: 12.5px; color: var(--color-ink-soft); text-align: center; margin: 12px 0 0; }
/* Admin → Store Settings → Checkout — pins the submit button (and total) to
   the bottom of the screen on mobile so it's reachable while scrolling
   through a long delivery form. Desktop's two-column layout doesn't have
   the same reachability problem, so this only changes anything below 900px. */
@media (max-width: 900px) {
    .checkout__submit-wrap--sticky {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 150;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: color-mix(in srgb, var(--color-bg) 94%, transparent);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-top: 1px solid var(--color-line);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
    }
    .checkout__submit-wrap--sticky .checkout__payment-note { margin: 6px 0 0; }
    /* Reserves room in the summary card so its last row isn't covered by
       the fixed bar above, and hides the cart FAB so two floating elements
       never stack on the same screen edge. */
    body:has(.checkout__submit-wrap--sticky) .checkout__summary { padding-bottom: 92px; }
    body:has(.checkout__submit-wrap--sticky) .cart-fab { display: none; }
}

/* ==========================================================================
   Checkout form — two fields per row, on every viewport. See the default
   theme's identical block for the full rationale; kept in sync with it.
   ========================================================================== */
.checkout__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 16px;
    border: 1px solid var(--color-line);
    padding: 24px;
}
.checkout__form > * { min-width: 0; }
.checkout__form .form-row:has(textarea),
.checkout__form .form-row:has(.delivery-type-choice),
.checkout__form .form-row:has(#delivery_stop_desk_id) {
    grid-column: 1 / -1;
}
.checkout__form:not(:has(#delivery_provider_id)) .form-row:has(#shipping_wilaya_code) {
    grid-column: 1 / -1;
}
.checkout__form .form-row { margin-bottom: 12px; }

/* ==========================================================================
   Checkout summary card additions — collapsible promo trigger + the submit
   button living at the bottom of the summary card (form="checkout-form"
   submits the form from outside it; see checkout/create.blade.php).
   ========================================================================== */
.checkout__promo-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    padding: 0;
    margin: 4px 0 10px;
    background: none;
    border: none;
    border-top: 1px solid var(--color-line);
    padding-top: 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-ink-soft);
    cursor: pointer;
    text-align: start;
    transition: color .12s ease;
}
.checkout__promo-trigger:hover { color: var(--color-ink); }
.checkout__promo-trigger svg:first-child { color: var(--color-accent); flex-shrink: 0; }
.checkout__promo-trigger span { flex: 1; }
.checkout__promo-trigger-chevron { flex-shrink: 0; transition: transform .18s var(--ease); }
.checkout__promo-trigger-chevron.is-open { transform: rotate(180deg); }

.promo-form--enter { transition: opacity .18s var(--ease), transform .18s var(--ease); }
.promo-form--enter-start { opacity: 0; transform: translateY(-4px); }
.promo-form--enter-end { opacity: 1; transform: translateY(0); }

.checkout__submit { flex-direction: row; gap: 8px; margin-top: 18px; }

/* ==========================================================================
   Checkout items — the cart, editable in place. See the default theme's
   identical block for the full rationale; kept in sync with it.
   ========================================================================== */
.checkout-items {
    border: 1px solid var(--color-line);
    padding: 24px;
}
.checkout-items__empty { font-size: 14px; color: var(--color-ink-soft); }
.checkout-items__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
}
.checkout-items__header h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.checkout-items__count {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: normal;
    text-transform: none;
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.checkout-items__clear {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 12px;
    text-decoration: underline;
    color: var(--color-ink-soft);
    padding: 0;
    flex-shrink: 0;
}
.checkout-items__clear:hover { color: var(--color-accent); }
.checkout-items__list { display: flex; flex-direction: column; gap: 16px; }
.checkout-item {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-line);
}
.checkout-item:last-child { padding-bottom: 0; border-bottom: none; }
.checkout-item__media {
    width: 88px;
    height: 88px;
    border: 1px solid var(--color-line);
    background: color-mix(in srgb, var(--color-accent) 6%, var(--color-bg));
    padding: 6px;
    display: block;
}
.checkout-item__media img { width: 100%; height: 100%; object-fit: contain; }
.checkout-item__name { font-size: 14px; font-weight: 600; color: var(--color-ink); display: block; margin-bottom: 2px; }
.checkout-item__variant { font-size: 12.5px; color: var(--color-ink-soft); margin: 0 0 4px; }
.checkout-item__price { font-size: 12.5px; color: var(--color-ink-soft); margin: 0 0 10px; }
.checkout-item__controls { display: flex; align-items: center; gap: 14px; }
.checkout-item__qty {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--color-line);
    border-radius: var(--control-radius);
    padding: 3px 12px;
    transition: border-color .14s ease;
}
.checkout-item__qty:hover { border-color: var(--color-accent); }
.checkout-item__qty-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    color: var(--color-ink);
    transition: color .14s ease;
}
.checkout-item__qty-btn:hover { color: var(--color-accent); }
.checkout-item__qty-value { font-size: 13.5px; min-width: 14px; text-align: center; }
.checkout-item__remove {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-line);
    border-radius: var(--control-radius);
    background: none;
    cursor: pointer;
    color: var(--color-ink-soft);
    flex-shrink: 0;
    transition: color .14s ease, border-color .14s ease;
}
.checkout-item__remove:hover { color: var(--color-accent); border-color: var(--color-accent); }
.checkout-item__total { font-size: 14px; font-weight: 600; white-space: nowrap; align-self: start; }
@media (max-width: 520px) {
    .checkout-item { grid-template-columns: 64px minmax(0, 1fr); }
    .checkout-item__media { width: 64px; height: 64px; }
    .checkout-item__total { grid-column: 2; justify-self: start; margin-top: 6px; }
}

.form-row { margin-bottom: 16px; }
.form-row label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
}

.thankyou { max-width: 640px; }
.thankyou__summary { margin: 24px 0; }

.search-form { display: flex; gap: 10px; max-width: 480px; margin-top: 16px; }
.search-form .btn { width: auto; padding: 0 20px; }

.cart-line__qty input {
    width: 56px;
    min-height: 44px;
    border: 1px solid var(--color-line);
    padding: 8px;
    font-size: 16px;
    text-align: center;
    transition: border-color .12s ease;
}
.form-row input, .form-row select, .form-row textarea {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--color-line);
    border-radius: var(--control-radius);
    padding: 11px 14px;
    font-size: 16px;
    background: #fff;
    font-family: inherit;
    transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.form-row input:hover, .form-row select:hover, .form-row textarea:hover { border-color: var(--color-ink-soft); }
.form-row textarea { min-height: 88px; }
.delivery-type-choice { display: flex; flex-direction: column; gap: 8px; }
.delivery-type-choice__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid var(--color-line);
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}
.delivery-type-choice__option input { width: auto; min-height: auto; margin-right: 8px; }
.delivery-type-choice__option:has(input:checked) { border-color: var(--color-ink); background: var(--color-bg-alt); }
.cart-line__qty input:focus,
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 16%, transparent);
    outline: none;
}
.form-row input.has-error,
.form-row select.has-error,
.form-row textarea.has-error {
    border-color: var(--color-danger);
}
.form-row input.has-error:focus,
.form-row select.has-error:focus,
.form-row textarea.has-error:focus {
    box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12);
}
.form-row select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23111111' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 11px 8px;
    padding-right: 34px;
}
.search-form input {
    flex: 1;
    min-height: 44px;
    border: 1px solid var(--color-line);
    padding: 10px 14px;
    font-size: 16px;
}

/* ==========================================================================
   Buy-now modal
   ========================================================================== */
.buy-now-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.buy-now-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 17, 17, 0.6);
}
.buy-now-modal__backdrop--enter,
.buy-now-modal__backdrop--leave { transition: opacity .2s var(--ease); }
.buy-now-modal__backdrop--enter-start { opacity: 0; }
.buy-now-modal__backdrop--enter-end { opacity: 1; }
.buy-now-modal__panel {
    position: relative;
    background: #fff;
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 28px 24px;
}
.buy-now-modal__panel--enter,
.buy-now-modal__panel--leave { transition: opacity .2s var(--ease), transform .2s var(--ease); }
.buy-now-modal__panel--enter-start { opacity: 0; transform: translateY(12px) scale(0.98); }
.buy-now-modal__panel--enter-end { opacity: 1; transform: translateY(0) scale(1); }
.buy-now-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: none;
    cursor: pointer;
    color: var(--color-ink);
    transition: background-color .12s ease;
}
.buy-now-modal__close:hover { background: #f2ede9; }
.buy-now-modal__product {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--color-line);
}
.buy-now-modal__product-image {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border: 1px solid var(--color-line);
    padding: 4px;
    flex-shrink: 0;
}
.buy-now-modal__product-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    margin: 0 0 2px;
}
.buy-now-modal__product-price { font-size: 13px; color: var(--color-ink-soft); margin: 0; }
.buy-now-modal h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 16px;
}
.buy-now-modal .form-row { margin-bottom: 14px; }
.buy-now-modal .form-row label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
}
.buy-now-modal__payment-note { font-size: 12px; color: var(--color-ink-soft); margin: 0 0 16px; }
.buy-now-modal .btn { width: 100%; }

/* ==========================================================================
   Cart drawer (slides in from the right — desktop and mobile alike)
   ========================================================================== */
.cart-drawer { position: fixed; inset: 0; z-index: 210; }
.cart-drawer__backdrop { position: absolute; inset: 0; background: rgba(17, 17, 17, 0.5); }
.cart-drawer__backdrop--enter,
.cart-drawer__backdrop--leave { transition: opacity .2s var(--ease); }
.cart-drawer__backdrop--enter-start { opacity: 0; }
.cart-drawer__backdrop--enter-end { opacity: 1; }
.cart-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 420px;
    background: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 24px rgba(17, 17, 17, 0.12);
}
.cart-drawer__panel--enter,
.cart-drawer__panel--leave { transition: transform .25s var(--ease); }
.cart-drawer__panel--enter-start { transform: translateX(100%); }
.cart-drawer__panel--enter-end { transform: translateX(0); }
.cart-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid var(--color-line);
    flex-shrink: 0;
}
.cart-drawer__header h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0;
}
.cart-drawer__close {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: none;
    cursor: pointer;
    color: var(--color-ink);
    transition: background-color .12s ease;
}
.cart-drawer__close:hover { background: #f2ede9; }
#cart-drawer-content { flex: 1; overflow-y: auto; padding: 20px; }
.cart-drawer__empty { font-size: 14px; color: var(--color-ink-soft); }
.cart-drawer__lines { display: flex; flex-direction: column; gap: 16px; }
.cart-drawer__line {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-line);
}
.cart-drawer__line-media {
    width: 64px;
    height: 64px;
    border: 1px solid var(--color-line);
    padding: 4px;
    display: block;
}
.cart-drawer__line-media img { width: 100%; height: 100%; object-fit: contain; }
.cart-drawer__line-name { font-size: 13px; font-weight: 600; color: var(--color-ink); display: block; margin-bottom: 2px; }
.cart-drawer__line-variant { font-size: 12px; color: var(--color-ink-soft); margin: 0 0 4px; }
.cart-drawer__line-price { font-size: 12px; color: var(--color-ink-soft); margin: 0 0 8px; }
.cart-drawer__line-controls { display: flex; align-items: center; gap: 12px; }
.cart-drawer__qty {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--color-line);
    padding: 2px 8px;
}
.cart-drawer__qty-btn {
    width: 22px;
    height: 22px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    color: var(--color-ink);
}
.cart-drawer__qty-value { font-size: 13px; min-width: 14px; text-align: center; }
.cart-drawer__remove { border: none; background: none; cursor: pointer; font-size: 12px; text-decoration: underline; color: var(--color-ink-soft); padding: 0; }
.cart-drawer__remove:hover { color: var(--color-ink); }
.cart-drawer__line-total { font-size: 13px; font-weight: 600; white-space: nowrap; }
.cart-drawer__footer { border-top: 1px solid var(--color-line); padding: 16px 20px 20px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
.cart-drawer__summary-row { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; }
.cart-drawer__summary-note { font-size: 12px; color: var(--color-ink-soft); margin: 0; }

.cart-fab {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 120;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: var(--color-cta);
    color: var(--color-cta-ink);
    border: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(17, 17, 17, 0.25);
}
/* Admin → Store Settings → Checkout. Opposite corner from the cart FAB
   (pill + label instead of a bare circle, so the two are never confused for
   the same action at a glance). */
.checkout-fab {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 119;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 16px 0 14px;
    border-radius: 999px;
    background: var(--color-cta);
    color: var(--color-cta-ink);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(17, 17, 17, 0.25);
}
.cart-fab__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--color-ink);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes badge-bump {
    0% { transform: scale(1); }
    35% { transform: scale(1.35); }
    65% { transform: scale(0.92); }
    100% { transform: scale(1); }
}
.icon-btn__badge.is-bumping,
.cart-fab__badge.is-bumping { animation: badge-bump .4s var(--ease); }
@media (prefers-reduced-motion: reduce) {
    .icon-btn__badge.is-bumping,
    .cart-fab__badge.is-bumping { animation: none; }
}

/* ==========================================================================
   Cart toast — feedback for "add to cart" that doesn't yank the drawer open
   ========================================================================== */
.cart-toast {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 84px;
    z-index: 130;
    display: flex;
    justify-content: center;
    pointer-events: none;
}
@media (min-width: 900px) {
    .cart-toast { left: auto; right: 24px; bottom: 24px; justify-content: flex-end; }
}
.cart-toast__panel {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 400px;
    background: var(--color-ink);
    color: #fff;
    padding: 12px 12px 12px 16px;
    box-shadow: var(--shadow-soft);
}
@media (min-width: 900px) {
    .cart-toast__panel { width: auto; }
}
.cart-toast__icon { flex-shrink: 0; color: #8fbf6f; }
.cart-toast__message {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cart-toast__action {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    min-height: 44px;
    padding: 0 4px;
    white-space: nowrap;
}
.cart-toast__close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .12s ease;
}
.cart-toast__close:hover { color: #fff; }

.cart-toast--enter,
.cart-toast--leave { transition: opacity .2s var(--ease), transform .2s var(--ease); }
.cart-toast--enter-start { opacity: 0; transform: translateY(12px); }
.cart-toast--enter-end { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .cart-toast--enter, .cart-toast--leave { transition: opacity .15s ease; }
    .cart-toast--enter-start { transform: none; }
}

/* ==========================================================================
   Utilities (kept last so they always win over component rules of equal specificity)
   ========================================================================== */
.mobile-only { display: flex; }
.desktop-only { display: none; }
@media (min-width: 900px) {
    .mobile-only { display: none; }
    .desktop-only { display: flex; }
}

/* ==========================================================================
   RTL (Arabic, etc.) — <html dir="rtl"> is set from the active locale in
   layout.blade.php. `direction` is an inherited CSS property that the `dir`
   attribute sets automatically, so flex/grid layouts already mirror on
   their own; everything below is the handful of *physical* left/right
   values (absolute/fixed positioning, drawer slide direction) that don't.
   ========================================================================== */
[dir="rtl"] .skip-link { left: auto; right: -999px; }
[dir="rtl"] .skip-link:focus { left: auto; right: 8px; }

[dir="rtl"] .site-nav__dropdown { left: auto; right: -16px; }
[dir="rtl"] .lang-switch__dropdown { right: auto; left: 0; }
[dir="rtl"] .filter-bar__panel { left: auto; right: 0; }

[dir="rtl"] .icon-btn__badge { right: auto; left: 2px; }
[dir="rtl"] .product-card__badge { right: auto; left: 10px; }

[dir="rtl"] .cart-drawer__panel {
    right: auto;
    left: 0;
    box-shadow: 8px 0 24px rgba(17, 17, 17, 0.12);
}
[dir="rtl"] .cart-drawer__panel--enter-start { transform: translateX(-100%); }

[dir="rtl"] .cart-fab { right: auto; left: 16px; }
[dir="rtl"] .cart-fab__badge { right: auto; left: -4px; }
[dir="rtl"] .checkout-fab { left: auto; right: 16px; }

@media (min-width: 900px) {
    [dir="rtl"] .cart-toast { left: 24px; right: auto; justify-content: flex-start; }
}

/* ==========================================================================
   Select menu — the enhanced dropdown that replaces the native <select>
   chrome (see resources/js/select-menu.js). The native control stays in the
   DOM as the source of truth; everything below styles the listbox built
   around it. Deliberately reuses the popover language already established
   by .site-nav__dropdown (cream panel, hairline border, deep soft shadow,
   2px accent rule on the hovered row) so it reads as part of the theme
   rather than a bolted-on widget.
   ========================================================================== */
.select-menu {
    position: relative;
    width: 100%;
}

/* Kept rendered rather than display:none so browsers can still anchor the
   native validation bubble to a `required` select that has no value. */
.select-menu__native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
}

.select-menu__trigger {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: var(--control-radius);
    font: inherit;
    font-size: 16px;
    color: var(--color-ink);
    text-align: start;
    cursor: pointer;
    transition: border-color .14s var(--ease), box-shadow .14s var(--ease), background-color .14s var(--ease);
}
.select-menu__trigger:hover { border-color: var(--color-ink-soft); }
.select-menu.is-open .select-menu__trigger {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 16%, transparent);
}
.select-menu__trigger:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 25%, transparent);
}

.select-menu__value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.select-menu__value.is-placeholder { color: var(--color-ink-soft); }

.select-menu__chevron {
    flex-shrink: 0;
    display: inline-flex;
    width: 10px;
    color: var(--color-ink-soft);
    transition: transform .18s var(--ease);
}
.select-menu__chevron svg { width: 10px; height: 7px; }
.select-menu.is-open .select-menu__chevron { transform: rotate(180deg); }

.select-menu.is-disabled { opacity: .55; }
.select-menu.is-disabled .select-menu__trigger { cursor: not-allowed; background: var(--color-bg-alt); }

.select-menu.has-error .select-menu__trigger { border-color: var(--color-danger); }
.select-menu.has-error .select-menu__trigger:focus-visible { box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12); }

.select-menu__panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    min-width: 100%;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: var(--control-radius);
    box-shadow: var(--shadow-pop);
    overflow: hidden;
    animation: select-menu-in .16s var(--ease);
}
.select-menu.is-above .select-menu__panel {
    top: auto;
    bottom: calc(100% + 6px);
    animation-name: select-menu-in-up;
}
@keyframes select-menu-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes select-menu-in-up {
    from { opacity: 0; transform: translateY(6px) scale(0.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.select-menu__search { padding: 8px 8px 4px; }
.select-menu__search-input {
    width: 100%;
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid var(--color-line);
    border-radius: calc(var(--control-radius) - 3px);
    background: var(--color-bg-alt);
    font: inherit;
    font-size: 15px;
    color: var(--color-ink);
    transition: border-color .14s var(--ease), background-color .14s var(--ease);
}
.select-menu__search-input:focus {
    outline: none;
    background: #fff;
    border-color: var(--color-accent);
}

.select-menu__list {
    max-height: 280px;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    overscroll-behavior: contain;
}

/* A rounded, inset highlight row rather than a full-bleed bar with an accent
   rule — reads as a modern menu instead of a table of links. */
.select-menu__option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: calc(var(--control-radius) - 3px);
    font-size: 15px;
    line-height: 1.3;
    color: var(--color-ink);
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}
.select-menu__option + .select-menu__option { margin-top: 2px; }
.select-menu__option:hover,
.select-menu__option.is-active { background: var(--color-bg-alt); }
.select-menu__option.is-selected {
    font-weight: 600;
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 9%, transparent);
}
.select-menu__option.is-placeholder { color: var(--color-ink-soft); }
.select-menu__option.is-disabled {
    opacity: .45;
    cursor: not-allowed;
    background: none;
}

.select-menu__option-label { flex: 1; min-width: 0; }
.select-menu__option-check {
    flex-shrink: 0;
    display: inline-flex;
    width: 12px;
    opacity: 0;
}
.select-menu__option-check svg { width: 12px; height: 12px; }
.select-menu__option.is-selected .select-menu__option-check { opacity: 1; }

.select-menu__empty {
    margin: 0;
    padding: 16px 14px;
    font-size: 14px;
    color: var(--color-ink-soft);
    text-align: center;
}

/* Context sizing — the wrapper inherits each original select's class with a
   `-menu` suffix, so the few places that were not simply full-width keep
   their intended footprint. */
.filter-bar__sort-menu { width: auto; min-width: 240px; }
.filter-bar__sort-menu .select-menu__trigger {
    font-size: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
}
.product-actions__variant-menu .select-menu__trigger,
.product-card__actions .select-menu__trigger {
    min-height: 44px;
    padding: 8px 12px;
    font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
    .select-menu__panel { animation: none; }
    .select-menu__chevron,
    .select-menu__trigger,
    .select-menu__option { transition: none; }
}

/* ==========================================================================
   VOLTAGE — the theme's own character, layered over the shared components.

   Four ideas carry it:
     1. Orange does the shouting, indigo does the talking.
     2. Everything you press is a pill.
     3. Headings are heavy, uppercase and tightly tracked.
     4. Geometric confetti (dot grids, plus marks, waves, hatching) fills the
        empty corners — drawn in CSS, no image assets to ship or cache-bust.
   ========================================================================== */

body { background: var(--color-bg); color: var(--color-ink); }

/* --- 1. Display typography ----------------------------------------------- */
.hero__brand,
.page-title,
.collection-hero__title,
.section__title,
.feature-banner__title {
    font-family: var(--font-heading);
    font-weight: 900;
    /* Pushes whatever family the store has configured toward the reference's
       condensed poster face; ignored by fonts without a condensed axis. */
    font-stretch: condensed;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    line-height: 0.94;
    color: var(--color-ink);
}
.eyebrow {
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* --- 2. Pills ------------------------------------------------------------ */
.btn {
    border-radius: var(--control-radius);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.08em;
    padding: 12px 26px;
    border-width: 2px;
    transition: transform .16s var(--ease), box-shadow .16s var(--ease), background-color .16s var(--ease), color .16s var(--ease);
}
.btn--solid {
    background: var(--color-cta);
    border-color: var(--color-cta);
    color: var(--color-cta-ink);
    box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--color-cta) 65%, transparent);
}
.btn--solid:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -6px color-mix(in srgb, var(--color-cta) 70%, transparent);
    opacity: 1;
}
.btn--outline {
    background: transparent;
    border-color: var(--color-ink);
    color: var(--color-ink);
}
.btn--outline:hover:not(:disabled) {
    background: var(--color-ink);
    color: #fff;
    opacity: 1;
}
.search-form input,
.form-row input,
.form-row select,
.form-row textarea,
.select-menu__trigger {
    border-radius: var(--control-radius);
    border-width: 2px;
    border-color: var(--color-line);
}
.form-row textarea { border-radius: 20px; }
.select-menu__panel { border-radius: 20px; border-width: 2px; }
.select-menu__option { border-radius: 999px; }
.select-menu__option.is-selected {
    color: var(--color-ink);
    background: color-mix(in srgb, var(--color-accent) 22%, transparent);
}

/* --- 3. The hero --------------------------------------------------------- */
.hero {
    position: relative;
    background: var(--color-bg);
    /* Clips the confetti to the band — so the blob and its badge disc must be
       inset far enough by this padding not to be cut off by it. */
    overflow: hidden;
    align-items: center;
    gap: 48px;
    padding: 28px 48px 44px;
}
/* Reference puts the product on the left and the pitch on the right. */
.hero__content { order: 2; padding: 24px 0; }
.hero__media { order: 1; }

/* Dot grid top-left, matching the reference's corner furniture. */
.hero::before {
    content: "";
    position: absolute;
    top: 26px;
    left: 14px;
    width: 86px;
    height: 132px;
    background: var(--dots) 0 0 / 21px 21px;
    pointer-events: none;
    z-index: 1;
}
/* Dot grid on the right, behind the copy. */
.hero::after {
    content: "";
    position: absolute;
    top: 120px;
    right: 22px;
    width: 96px;
    height: 150px;
    background: var(--dots) 0 0 / 21px 21px;
    pointer-events: none;
}

/* The orange blob the product sits on. */
.hero__media {
    position: relative;
    background: var(--color-accent);
    border-radius: 46% 54% 52% 48% / 52% 46% 56% 44%;
    padding: 30px;
    overflow: visible;
    aspect-ratio: var(--hero-image-ratio, 4/3);
}
.hero__media img {
    border-radius: 20px;
    box-shadow: 0 18px 40px -12px rgba(43, 42, 140, 0.35);
}
/* A violet disc echoing the reference's "BEST PRICE" badge. Sits over the
   blob's own edge rather than outside it, so .hero's overflow can't clip it. */
.hero__media::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 74px;
    height: 74px;
    border-radius: 999px;
    background: var(--color-gold);
    box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--color-gold) 80%, transparent);
    z-index: 2;
}

.hero__brand { font-size: 76px; margin: 0 0 18px; }
.hero__text {
    color: var(--color-ink-soft);
    font-size: 15px;
    font-weight: 500;
    max-width: 430px;
    margin: 0 0 30px;
}
.hero__cta { align-self: flex-start; }
/* The hero CTA is the page's primary action here, so it gets the solid pill
   treatment even though the shared markup asks for the outline variant. */
.hero__cta.btn--outline {
    background: var(--color-cta);
    border-color: var(--color-cta);
    color: var(--color-cta-ink);
    box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--color-cta) 65%, transparent);
}
.hero__cta.btn--outline:hover {
    transform: translateY(-2px);
    background: var(--color-cta);
    color: var(--color-cta-ink);
}
@media (max-width: 900px) {
    .hero__content { order: 1; padding: 32px 20px; }
    .hero__media { order: 2; padding: 20px; }
    .hero__brand { font-size: 44px; }
    .hero::before, .hero::after { display: none; }
}

/* --- 4. Header ----------------------------------------------------------- */
.site-header {
    background: var(--color-bg);
    border-bottom: none;
    box-shadow: none;
}
.site-nav__link {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink);
}
.site-nav__link::after { background: var(--color-accent); height: 2px; }
.icon-btn { color: var(--color-ink); }
.icon-btn:hover { background: color-mix(in srgb, var(--color-accent) 16%, transparent); }
.icon-btn__badge { background: var(--color-accent); }
.announcement-bar {
    background: var(--color-ink);
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.1em;
}
.site-nav__dropdown, .lang-switch__dropdown, .filter-bar__panel {
    border-radius: 18px;
    border: 2px solid var(--color-line);
    box-shadow: var(--shadow-pop);
    overflow: hidden;
}
.site-nav__dropdown-link:hover,
.site-nav__dropdown-link:focus-visible {
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    border-left-color: var(--color-accent);
}

/* --- 5. Cards ------------------------------------------------------------ */
.product-card {
    background: #fff;
    border: 2px solid var(--color-line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease);
}
/* An open variant dropdown (.select-menu__panel) is an absolutely positioned
   descendant — this card's own overflow:hidden clips it, and the hover
   transform below creates a new stacking context that traps its z-index
   under the next row's card. Suspend both while a dropdown inside is open. */
.product-card:has(.select-menu.is-open) { overflow: visible; }
.product-card:hover:not(:has(.select-menu.is-open)) {
    border-color: var(--color-accent);
    transform: translateY(-4px);
    box-shadow: var(--shadow-soft);
}
.product-card__body { display: flex; flex-direction: column; flex: 1; padding: 16px; }
.product-card__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-ink);
}
.product-card__price {
    font-weight: 900;
    font-size: 16px;
    color: var(--color-ink);
}
/* The reference's violet "BEST PRICE" disc. */
.product-card__badge {
    background: var(--color-gold);
    color: #fff;
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 6px 12px;
}
.category-card, .brand-card {
    border: 2px solid var(--color-line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .16s var(--ease), transform .16s var(--ease);
}
.category-card:hover, .brand-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-4px);
}

/* --- 6. Bands and section furniture -------------------------------------- */
.trust-bar {
    position: relative;
    background: var(--color-bg-alt);
    border: none;
    border-radius: var(--radius);
    max-width: var(--container-w);
    margin: 8px auto;
    overflow: hidden;
}
.trust-bar::after {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    width: 120px;
    background: var(--hatch);
    opacity: .5;
    pointer-events: none;
}
.trust-bar__item { font-weight: 700; font-size: 12px; color: var(--color-ink); }
.trust-bar__item svg { color: var(--color-accent); }

.collection-hero {
    position: relative;
    background: var(--color-bg-alt);
    overflow: hidden;
}
.collection-hero::after {
    content: "";
    position: absolute;
    top: 12px;
    right: 24px;
    width: 130px;
    height: 90px;
    background: var(--dots) 0 0 / 21px 21px;
    pointer-events: none;
}
.collection-hero .breadcrumbs { color: var(--color-ink-soft); }
.collection-hero .breadcrumbs a { color: var(--color-ink); }
.collection-hero .page-description { color: var(--color-ink-soft); }

.feature-banner { background: var(--color-bg-alt); border-radius: var(--radius); overflow: hidden; }
.feature-banner__spotlight-price { font-weight: 900; color: var(--color-ink); }

.testimonial {
    background: #fff;
    border: 2px solid var(--color-line);
    border-radius: var(--radius);
}
.testimonial__stars { color: var(--color-accent); }

.filter-bar { background: var(--color-bg); border-color: var(--color-line); }
.filter-bar__toggle { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }

/* --- 7. Cart, checkout, footer ------------------------------------------- */
.cart__summary, .checkout__summary, .checkout__form, .checkout-items {
    background: var(--color-bg-alt);
    border: none;
    border-radius: var(--radius);
}
.checkout__summary-row--total { font-weight: 900; color: var(--color-ink); }
.checkout-item__media { border-radius: 12px; }
.cart-drawer__panel { background: var(--color-bg); }
.delivery-type-choice__option { border-radius: 16px; border-width: 2px; background: #fff; }
.delivery-type-choice__option:has(input:checked) {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}
.form-row label {
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink);
}

.site-footer {
    position: relative;
    background: var(--color-ink);
    color: #fff;
    overflow: hidden;
}
.site-footer::before {
    content: "";
    position: absolute;
    top: 22px;
    right: 26px;
    width: 120px;
    height: 100px;
    background: radial-gradient(circle, color-mix(in srgb, #fff 26%, transparent) 2.1px, transparent 2.2px) 0 0 / 21px 21px;
    pointer-events: none;
}
.site-footer a { color: color-mix(in srgb, #fff 78%, transparent); }
.site-footer a:hover { color: var(--color-accent); }

/* --- 8. PDP -------------------------------------------------------------- */
/* The shared stylesheet fills .pdp__info with --color-accent; against this
   orange that would put indigo body copy on a saturated field. Inverted to a
   panel with the accent kept as a top rule. */
.pdp__info {
    background: var(--color-bg-alt);
    border-radius: var(--radius);
    border-top: 4px solid var(--color-accent);
}
.pdp__eyebrow { color: var(--color-accent); }
.pdp__brand { color: var(--color-ink-soft); }
.pdp__brand:hover { color: var(--color-accent); }
.pdp__price { font-weight: 900; font-size: 30px; color: var(--color-ink); }
.pdp__brand-about { background: #fff; border-radius: 16px; }
.product-gallery__thumb { border-radius: 12px; border-width: 2px; }
.product-gallery__thumb.is-active { border-color: var(--color-accent); }
.product-gallery__main { border-radius: var(--radius); overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .btn, .product-card, .category-card, .brand-card { transition: none; }
    .btn--solid:hover:not(:disabled),
    .product-card:hover,
    .category-card:hover,
    .brand-card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Promo code form (cart summary, checkout summary, buy-now modal)
   -------------------------------------------------------------------------- */
.promo-form { margin: 14px 0; }
.promo-form__title {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.promo-form__row { display: flex; gap: 8px; }
.promo-form__input {
    /* 2:1 ratio against .promo-form__apply below — both use the `flex`
       grow shorthand (flex-basis: 0%) so they split the row proportionally
       regardless of the button label's length in any locale. */
    flex: 2;
    min-width: 0;
    min-height: 44px;
    border: 1px solid var(--color-line);
    border-radius: var(--control-radius, 0);
    background: #fff;
    color: var(--color-ink);
    padding: 0 12px;
    font: inherit;
    text-transform: uppercase;
    transition: border-color .12s ease;
}
.promo-form__input::placeholder { text-transform: none; }
.promo-form__input:focus { border-color: var(--color-ink); outline: none; }
.promo-form__input.has-error { border-color: var(--color-danger); }
.promo-form__apply { flex: 1; min-width: 0; white-space: nowrap; min-height: 44px; }
.promo-form__error { font-size: 12.5px; color: var(--color-danger); margin-top: 6px; }
.promo-form__dropped {
    padding: 9px 12px;
    border: 1px solid color-mix(in srgb, var(--color-danger) 35%, transparent);
    background: color-mix(in srgb, var(--color-danger) 8%, transparent);
    margin-bottom: 10px;
}
.promo-form--applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px dashed var(--color-accent);
    border-radius: var(--control-radius, 0);
    background: color-mix(in srgb, var(--color-accent) 7%, transparent);
}
.promo-form__label { font-weight: 600; font-size: 13.5px; color: var(--color-accent); overflow-wrap: anywhere; }
.promo-form__remove {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 12.5px;
    color: var(--color-ink-soft);
    text-decoration: underline;
    padding: 0;
    white-space: nowrap;
}
.promo-form__remove:hover { color: var(--color-danger); }
.cart__summary-row--discount span:last-child,
.cart-drawer__summary-row--discount span:last-child,
.checkout__summary-row--discount span:last-child { color: var(--color-accent); font-weight: 700; }
.checkout__summary-free-shipping s { color: var(--color-ink-soft); margin-inline-end: 6px; }
.buy-now-modal__promo-summary { margin-top: 10px; border-top: 1px solid var(--color-line); padding-top: 8px; }

/* ==========================================================================
   Stepped checkout (Admin → Store Settings → Checkout → Checkout style).
   Logical (inset-inline-*) properties throughout instead of left/right, so
   this needs no separate [dir="rtl"] pass.
   ========================================================================== */
.checkout-wizard { max-width: 620px; margin: 24px auto 0; }
.checkout-wizard__steps { display: flex; list-style: none; padding: 0; margin: 0 0 28px; }
.checkout-wizard__step { flex: 1; position: relative; text-align: center; }
.checkout-wizard__step:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 15px;
    inset-inline-end: 50%;
    width: 100%;
    height: 1px;
    background: var(--color-line);
    z-index: 0;
}
.checkout-wizard__step.is-done:not(:first-child)::before,
.checkout-wizard__step.is-active:not(:first-child)::before { background: var(--color-accent); }
.checkout-wizard__step-btn {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
}
.checkout-wizard__step-btn:disabled { cursor: default; }
.checkout-wizard__step-circle {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1.5px solid var(--color-line);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 12px;
    color: var(--color-ink-soft);
    transition: border-color .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.checkout-wizard__step.is-active .checkout-wizard__step-circle { border-color: var(--color-ink); background: var(--color-ink); color: #fff; }
.checkout-wizard__step.is-done .checkout-wizard__step-circle { border-color: var(--color-accent); background: var(--color-accent); color: #fff; }
.checkout-wizard__step-label {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-ink-soft);
}
.checkout-wizard__step.is-active .checkout-wizard__step-label,
.checkout-wizard__step.is-done .checkout-wizard__step-label { color: var(--color-ink); }
@media (max-width: 480px) {
    .checkout-wizard__step-label { display: none; }
}

.checkout-wizard__panel { border: 1px solid var(--color-line); background: #fff; padding: 24px; }
.checkout-wizard__panel h2 {
    position: relative;
    padding-inline-start: 14px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 18px;
}
.checkout-wizard__panel h2::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: var(--color-accent);
}
.checkout-items--wizard { border: none; padding: 0; }
.checkout-wizard__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--color-line);
}
.checkout-wizard__actions--single { justify-content: flex-end; }
.checkout-wizard__actions .btn { flex: 1; flex-direction: row; gap: 8px; }
.checkout-wizard__actions--single .btn { flex: 0 0 auto; min-width: 160px; }
.checkout-wizard__back { flex: 0 0 auto; min-width: 110px; }

.checkout-recap { border: 1px solid var(--color-line); padding: 14px 16px; margin-bottom: 14px; }
.checkout-recap__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.checkout-recap__title {
    font-family: var(--font-heading);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-ink-soft);
}
.checkout-recap__edit {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: underline;
    cursor: pointer;
}
.checkout-recap__body { font-size: 13.5px; color: var(--color-ink); line-height: 1.5; margin: 0; }
.checkout-recap__items { display: flex; flex-direction: column; gap: 10px; }
.checkout-recap__item { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; }
.checkout-recap__item img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    border: 1px solid var(--color-line);
    padding: 3px;
    flex-shrink: 0;
    background: #fff;
}
.checkout-recap__item-name { flex: 1; color: var(--color-ink); }
.checkout-recap__item-variant { color: var(--color-ink-soft); }
.checkout-recap__item-price { font-weight: 600; white-space: nowrap; }

@media (max-width: 520px) {
    .checkout-wizard__actions { flex-direction: column-reverse; }
    .checkout-wizard__actions .btn,
    .checkout-wizard__actions--single .btn,
    .checkout-wizard__back { width: 100%; flex: 0 0 auto; min-width: 0; }
}

/* ==========================================================================
   Thank-you page — congrats animation (checkmark pop + confetti burst).
   Reduced-motion and no-JS both land on the same fully-visible resting
   state (see the inline script in checkout/thankyou.blade.php) — the
   animation is a bonus flourish the page never depends on.
   ========================================================================== */
.thankyou__badge {
    width: 76px;
    height: 76px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    opacity: 0;
    transform: scale(0.4);
}
.thankyou__badge svg { color: var(--color-accent); }
@media (prefers-reduced-motion: reduce) {
    .thankyou__badge { opacity: 1; transform: scale(1); }
}
.thankyou__confetti { position: fixed; inset: 0; pointer-events: none; z-index: 300; overflow: hidden; }
.thankyou__confetti-piece { position: absolute; top: -12px; width: 8px; height: 14px; opacity: 0; }

/* ==========================================================================
   Long option lists — a catalogue with dozens of brands/categories used to
   render every one of them into a single un-scrolled column, so a dropdown
   grew taller than the viewport and pushed the page apart. Everything below
   caps a list's height and lets it scroll inside its own panel instead.
   ========================================================================== */

/* Filter bar (collections, brand pages). The panel keeps its padding while
   only the option list scrolls, so the search box stays pinned at the top. */
.filter-bar__search { padding: 4px 4px 8px; }
.filter-bar__search input {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--color-line);
    background: #fff;
    padding: 0 10px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-ink);
    text-transform: none;
    letter-spacing: normal;
    border-radius: var(--control-radius, 0);
}
.filter-bar__search input:focus { border-color: var(--color-accent); outline: none; }
.filter-bar__options {
    max-height: min(320px, 50vh);
    overflow-y: auto;
    overscroll-behavior: contain;
}
/* Names longer than the panel wrap instead of forcing it wider. */
.filter-bar__option { white-space: normal; overflow-wrap: anywhere; }

/* Header navigation dropdown — the "Brands" item can be set to auto-fill
   with every brand (Admin → Header menu), which is exactly the case that
   overflowed. */
.site-nav__dropdown {
    max-height: min(70vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
/* Past roughly a dozen entries a single column is taller than it is
   readable; two columns keep it inside the viewport. Applied only to
   genuinely long menus so short ones keep their simple stacked look. */
.site-nav__dropdown--long {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 0 4px;
}
@media (max-width: 600px) {
    .site-nav__dropdown--long { grid-template-columns: minmax(0, 1fr); }
}
.site-nav__dropdown-link { overflow-wrap: anywhere; }

/* Mobile nav children — same list, rendered inline rather than as a popover. */
.site-nav-mobile__children {
    max-height: min(50vh, 360px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Product page brand cloud — every brand in the store at 24px was a wall of
   text once the catalogue grew. Scrolls past a few rows. */
.brand-tags {
    max-height: min(40vh, 280px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Shown when a wilaya has neither home nor stop-desk delivery available —
   the two options are hidden rather than greyed out (see
   checkout/create.blade.php), so without this the customer would face an
   empty box with no explanation. */
.delivery-type-choice__empty {
    margin: 0;
    padding: 12px 14px;
    border: 1px dashed var(--color-line);
    font-size: 13px;
    color: var(--color-ink-soft);
    text-transform: none;
    letter-spacing: normal;
}

/* ==========================================================================
   Thank-you page — the order number as the page's hero.
   It's the one detail the customer has to keep (and quote on the phone), so
   it outranks everything except the confirmation itself. Centred to match
   the confirmation badge above it, which was already margin-auto'd while the
   text beside it stayed left-aligned.
   ========================================================================== */
.thankyou__header { text-align: center; }
.thankyou__order-number {
    font-family: var(--font-heading);
    font-weight: 800;
    /* Scales down on narrow screens so a long reference never wraps
       mid-code, which would make it unreadable as one token. */
    font-size: clamp(28px, 7vw, 44px);
    line-height: 1.1;
    letter-spacing: 0.02em;
    color: var(--color-accent);
    margin: 6px 0 4px;
    overflow-wrap: anywhere;
    /* Tabular figures keep the digits evenly spaced, so the code reads as a
       reference rather than as prose. */
    font-variant-numeric: tabular-nums;
}
.thankyou__order-number-caption {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-ink-soft);
    margin: 0 0 18px;
}
/* The badge already centred itself; the rest of the header now matches. */
.thankyou__header .page-title { margin-top: 0; }