/* =====================================================
 * storefront.css — shared storefront chrome (Layer 3)
 * Load order: tokens.css → base.css → app.css → storefront.css
 * ===================================================== */

/* ============================================================
 * Promo bar (PRD §3.1)
 * Navy strip, centered message with a check icon.
 * One message = static; two = JS-rotated (promo-bar.js).
 * ============================================================ */

main {
    min-height: 60vh;
    padding-block-end: var(--space-4);
}

/* Shared content column. Every full-bleed band insets its content to
   --container-max, so all edges line up top to bottom. */
.container {
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--container-inset);
}

/* Sections are full-bleed; the .container inside owns the side gutter,
   so drop the section's own inline padding to avoid double-insetting. */
.section {
    padding-inline: 0;
}

.promo-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--space-3);
    padding-inline: var(--container-inset);
    background-color: var(--color-brand);
    color: var(--color-text-on-dark);
    font-size: var(--font-size-body);
    font-weight: var(--weight-medium);
    line-height: var(--line-height-tight);
    text-align: center;
}

.promo-bar-text {
    display: inline-flex;
    align-items: center;
}

/* Decorative check-circle before each message. Hardcoded white
   (= --color-text-on-dark); background-image URLs can't read tokens. */
.promo-bar-text::before {
    content: "";
    flex: none;
    width: 1em;
    height: 1em;
    margin-inline-end: var(--space-2);
    /* Masked (not a coloured background-image) so the check takes the owner's
       chosen text colour via currentColor — otherwise a hardcoded white icon
       disappears on a light bar. */
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Two messages → stack in one grid cell and cross-fade between them. */
.promo-bar[data-messages-count="2"] {
    display: grid;
    overflow: hidden;
}

.promo-bar[data-messages-count="2"] .promo-bar-text {
    grid-area: 1 / 1;
    place-self: center;
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.promo-bar[data-messages-count="2"] .promo-bar-text[data-active="0"] {
    opacity: 0;
    transform: translateY(calc(var(--space-2) * -1));
    /* parked just above */
    pointer-events: none;
}

.promo-bar[data-messages-count="2"] .promo-bar-text[data-active="1"] {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
 * Header (PRD §3.1)
 * Desktop: logo · search · checkout in one row.
 * Mobile: hamburger + logo · checkout; search wraps full-width below.
 * ============================================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--color-surface);
    border-bottom: var(--border-width) solid var(--color-border);
}

.site-header__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-3) 0;
    padding-inline: var(--container-inset);
}

.hamburger {
    order: 1;
    display: inline-flex;
    align-items: center;
    padding: var(--space-1);
    background: none;
    border: 0;
    color: var(--color-brand);
    cursor: pointer;
}

.logo {
    order: 2;
    display: inline-flex;
    align-items: center;
    font-weight: var(--weight-bold);
    font-size: var(--font-size-h2);
    color: var(--color-brand);
    text-decoration: none;
}

.logo__img {
    max-height: 1.875rem;
    /* 30px — keeps the mobile bar compact; width auto-scales */
    width: auto;
    display: block;
}

.cart-icon {
    order: 3;
    margin-inline-start: auto;
    /* push right on the mobile top row */
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-brand);
    text-decoration: none;
}

.cart-icon__img {
    width: 24px;
    height: auto;
    display: block;
}

.cart-icon__label {
    font-size: var(--font-size-body);
    font-weight: var(--weight-medium);
    line-height: 1;
}

/* Basket wrapper — anchors the red count circle to the basket corner */
.cart-icon__basket {
    position: relative;
    display: inline-flex;
}

/* Red count circle — created + filled by cart.js when the cart has items */
.cart-badge {
    position: absolute;
    top: calc(var(--space-1) * -1 + 1px);
    inset-inline-end: calc(var(--space-3) * -1);
    min-width: 1.25rem;
    height: 1.25rem;
    padding-inline: var(--space-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-danger);
    color: var(--color-text-on-dark);
    font-size: calc(var(--font-size-helper) - 1px);
    font-weight: var(--weight-bold);
    line-height: 1;
    border-radius: var(--radius-pill);
}

/* Red total below the basket — replaces "Checkout" when the cart has items */
.cart-icon__price {
    font-size: var(--font-size-body);
    font-weight: var(--weight-semibold);
    line-height: 1;
    color: var(--color-danger);
    white-space: nowrap;
}

/* Search — wraps full-width below the bar on mobile */
.site-header .search-bar {
    order: 4;
    flex-basis: 100%;
    position: relative;
    flex-basis: calc(100% + var(--layout-pad-mobile) * 2);
    margin-inline: calc(var(--layout-pad-mobile) * -1);
    background-color: var(--color-bg-subtle);
    border-top: var(--border-width) solid var(--color-border);
    padding: var(--space-3) var(--layout-pad-mobile);
}

.search-bar-form {
    position: relative;
    display: flex;
}

.search-bar-input {
    width: 100%;
    height: var(--control-height);
    padding-inline: var(--space-3) var(--space-8);
    /* end padding leaves room for the magnifier */
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: var(--font-size-input);
    /* 14px — +1px vs body on mobile */
}

.search-bar-input::placeholder {
    color: var(--color-text-placeholder);
}

.search-bar-input:focus {
    outline: none;
    border-color: var(--color-focus-ring);
}

.search-bar-submit {
    position: absolute;
    inset-inline-end: 0;
    top: 0;
    height: 100%;
    width: var(--space-8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    color: var(--color-brand);
    cursor: pointer;
}

/* Desktop: one row — logo · search (center) · checkout */
@media (min-width: 768px) {
    .site-header__bar {
        flex-wrap: nowrap;
        gap: var(--space-5);
        padding-block: var(--space-3);
        /* padding-inline comes from --container-inset on the base rule */
    }

    .hamburger {
        display: none;
    }

    .logo {
        order: 1;
    }

    .site-header .search-bar {
        order: 2;
        flex: 1;
        flex-basis: auto;
        max-width: 640px;
        margin-inline: auto;
        background-color: transparent;
        /* no band on desktop */
        border-top: none;
        padding: 0;
    }

    .search-bar-input {
        background-color: var(--color-bg-subtle);
        /* near-white input fill (desktop only) */
    }

    .cart-icon {
        order: 3;
        margin-inline-start: 0;
    }

    .cart-icon__img {
        width: auto;
        height: 1.75rem;
    }

    .logo__img {
        max-height: 2.875rem;
        /* 46px on desktop */
    }
}

/* ============================================================
 * Desktop category nav (PRD §3.2) — the row under the bar.
 * Hidden on mobile; the hamburger drawer covers mobile.
 * Overflow items move into "Other categories" via header.js.
 * ============================================================ */

.cat-nav {
    display: none;
}

@media (min-width: 768px) {
    .cat-nav {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        padding-block: var(--space-2);
        padding-inline: var(--container-inset);
        border-top: var(--border-width) solid var(--color-border);
        background-color: var(--color-surface);
    }

    .cat-nav__list {
        display: flex;
        flex: 1;
        min-width: 0;
        /* lets the row shrink so overflow can be measured */
        align-items: center;
        gap: var(--space-6);
        overflow: hidden;
        /* the JS reads scrollWidth vs clientWidth here */
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .cat-nav__item {
        flex: none;
        white-space: nowrap;
    }

    .cat-nav__link {
        color: var(--color-text-secondary);
        text-decoration: none;
        font-size: var(--font-size-body);
        line-height: 1;
    }

    .cat-nav__link:hover {
        color: var(--color-brand);
    }

    .cat-nav__more {
        flex: none;
        position: relative;
    }

    .cat-nav__more-btn {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: 0;
        background: none;
        border: 0;
        color: var(--color-text-secondary);
        font-size: var(--font-size-body);
        line-height: 1;
        cursor: pointer;
    }

    .cat-nav__more-btn:hover {
        color: var(--color-brand);
    }

    .cat-nav__more-list {
        position: absolute;
        top: 100%;
        inset-inline-end: 0;
        margin-top: var(--space-2);
        min-width: 12rem;
        padding: var(--space-2) 0;
        background-color: var(--color-surface);
        border: var(--border-width) solid var(--color-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-dropdown);
        list-style: none;
        z-index: 20;
    }

    .cat-nav__more-list .cat-nav__item {
        white-space: normal;
    }

    .cat-nav__more-list .cat-nav__link {
        display: block;
        padding: var(--space-2) var(--space-4);
    }

    .cat-nav__more-list .cat-nav__link:hover {
        background-color: var(--color-bg);
    }
}

/* ============================================================
 * Mobile drawer (PRD §3.2) — hamburger menu, three-level drill.
 * Menu → Categories → Sub-categories. Mobile only (hidden ≥768px;
 * desktop uses .cat-nav). Slides from the inline-start over a dark
 * page overlay at ~85% width. Wired by header.js.
 * ============================================================ */

:root {
    --drawer-dir: -1;
}

/* slide sign: LTR off to the left  */
[dir="rtl"] {
    --drawer-dir: 1;
}

/* RTL off to the right             */

body.drawer-open {
    overflow: hidden;
    /* lock page scroll while the drawer is open */
}

.drawer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    visibility: hidden;
    pointer-events: none;
}

.drawer.is-open {
    visibility: visible;
    pointer-events: auto;
}

.drawer__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.drawer.is-open .drawer__overlay {
    opacity: 1;
}

.drawer__panel {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(85%, 22rem);
    display: flex;
    flex-direction: column;
    background-color: var(--color-surface);
    box-shadow: var(--shadow-dropdown);
    transform: translateX(calc(var(--drawer-dir) * 100%));
    transition: transform 0.25s ease;
}

.drawer.is-open .drawer__panel {
    transform: none;
}

/* Drill viewport — the three levels sit side by side and slide. */
.drawer__viewport {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.drawer__track {
    display: flex;
    height: 100%;
    transition: transform 0.25s ease;
}

/* Each level is one viewport wide; the track box stays viewport-width
   (children overflow), so a 100% translate = exactly one level. */
.drawer__track[data-level="2"] {
    transform: translateX(calc(var(--drawer-dir) * 100%));
}

.drawer__track[data-level="3"] {
    transform: translateX(calc(var(--drawer-dir) * 200%));
}

.drawer__level {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Heads — level 1 navy ("Menu"); levels 2–3 grey (back + title). */
.drawer__head {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-bg);
    border-bottom: var(--border-width) solid var(--color-border);
}

.drawer__head--brand {
    background-color: var(--color-brand);
    color: var(--color-text-on-dark);
    border-bottom: none;
}

.drawer__title {
    flex: 1;
    min-width: 0;
    font-size: var(--font-size-base);
    font-weight: var(--weight-bold);
    line-height: var(--line-height-tight);
}

.drawer__back,
.drawer__close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    cursor: pointer;
}

/* Keep head icons within the text line so the head height matches the
   promo bar (same padding-block + one text-height row). */
.drawer__back svg,
.drawer__close svg {
    width: 1.125rem;
    height: 1.125rem;
}

.drawer__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.drawer__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.drawer__item:not(:last-child) {
    border-bottom: var(--border-width) solid var(--color-border);
}

.drawer__link,
.drawer__drill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-4);
    background: none;
    border: 0;
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: var(--font-size-h2);
    font-weight: var(--weight-semibold);
    line-height: var(--line-height-tight);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.drawer__link:hover,
.drawer__drill:hover {
    background-color: var(--color-bg);
}

.drawer__chevron {
    flex: none;
    color: var(--color-text-secondary);
}

[dir="rtl"] .drawer__chevron {
    transform: scaleX(-1);
}

/* Drawer is mobile-only; the category nav row covers desktop. */
@media (min-width: 768px) {
    .drawer {
        display: none;
    }
}

/* ============================================================
 * Hero (PRD §3.1.1) — homepage banner / carousel.
 * Mobile: full-bleed, 350px. Desktop: 1300 column card, 500px.
 * Slides sit in a flex track; hero.js translates it (carousel).
 * Per-slide colors arrive as custom props from hero.php.
 * ============================================================ */

.hero {
    position: relative;
    height: 21.875rem;
    /* 350px mobile */
    overflow: hidden;
}

.hero__track {
    display: flex;
    height: 100%;
    transition: transform 0.45s ease;
}

.hero__slide {
    position: relative;
    flex: 0 0 100%;
    min-width: 0;
    overflow: hidden;
    color: var(--hero-text, var(--color-text-on-dark));
}

.hero__bg-picture {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
}

.hero__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Content: headline + tagline at the top, CTA pinned to the bottom
   (mobile Figma); desktop centers the whole block instead. */
.hero__content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-5) var(--space-6);
    /* 32px side inset on mobile — drop to --space-5 (20px) if too much */
}

.hero__headline {
    margin: 0;
    font-size: var(--font-size-hero-headline);
    font-weight: var(--weight-extrabold);
    line-height: var(--line-height-tight);
    text-shadow: var(--shadow-hero-text);
}

.hero__tagline {
    margin: var(--space-3) 0 0;
    font-size: var(--font-size-h2);
    font-weight: var(--weight-regular);
    line-height: var(--line-height-base);
    text-shadow: var(--shadow-hero-text);
}

/* CTA — same 3D edge technique as the green action button (base.css),
   but the face color is owner-chosen per slide, so the edge is derived
   from it with color-mix. Defaults to primary blue. */
.hero__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--control-height);
    padding: 0 var(--space-5);
    margin-top: auto;
    /* pins to the bottom on mobile */
    margin-bottom: var(--action-3d-depth);
    background-color: var(--hero-cta-bg, var(--color-primary));
    color: var(--hero-cta-color, var(--color-text-on-dark));
    font-size: var(--font-size-button);
    font-weight: var(--weight-bold);
    line-height: var(--line-height-tight);
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--radius-md);
    transition: transform 0.06s ease;
}

.hero__cta::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: var(--action-3d-depth);
    bottom: calc(-1 * var(--action-3d-depth));
    background-color: color-mix(in srgb, var(--hero-cta-bg, var(--color-primary)) 75%, black);
    border-radius: var(--radius-md);
    z-index: -1;
}

.hero__cta:active {
    transform: translateY(var(--action-3d-depth));
}

/* Arrows — only rendered when 2+ slides. */
.hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.55);
    color: var(--color-brand);
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
}

.hero__arrow--prev {
    inset-inline-start: var(--space-3);
}

.hero__arrow--next {
    inset-inline-end: var(--space-3);
}

[dir="rtl"] .hero__arrow svg {
    transform: scaleX(-1);
}

@media (min-width: 768px) {
    .hero {
        height: 31.25rem;
        /* 500px */
        margin-block: 1.875rem;
        /* 30px gap above and below the hero (Figma) */
        margin-inline: var(--container-inset);
        /* joins the 1300 column */
        border-radius: var(--radius-md);
    }

    .hero__content {
        justify-content: center;
        /* Figma desktop: block vertically centered */
        padding-inline: 6.25rem;
        /* 100px — Figma inner inset, hero one-off */
    }

    .hero__cta {
        margin-top: var(--space-6);
        /* in-flow below the tagline, not pinned */
    }
}

/* ============================================================
 * Homepage sections + carousel scaffolding (PRD §3.1)
 * .carousel-head (title + arrows) and .h-scroll are shared by
 * Shop By Category / New Arrivals / Best Sellers — and later by
 * any storefront carousel. carousel.js powers the arrows.
 * ============================================================ */

/* Homepage carousels only — other .section pages keep app.css until
   their own polish pass. */
.section-categories,
.section-new-arrivals,
.section-best-sellers,
.product-related {
    padding-block: 1.875rem;
    /* 30px — gap below the hero comes from here on mobile */
    border-bottom: none;
}

/* Title row: title inline-start, arrows inline-end, divider below. */
.carousel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block-end: var(--space-3);
    border-bottom: var(--border-width) solid var(--color-border);
    margin-block-end: var(--space-4);
}

.carousel-head .section-title {
    margin: 0;
    font-size: var(--font-size-section-title);
    font-weight: var(--weight-bold);
    color: var(--color-brand);
    line-height: var(--line-height-tight);
}

.carousel-nav {
    display: inline-flex;
    gap: var(--space-2);
}

.carousel-arrow {
    width: 2.5rem;
    /* 40px */
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(var(--color-switch-top), var(--color-switch-bottom));
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-brand);
    cursor: pointer;
}

.carousel-arrow:disabled {
    background: var(--color-bg);
    color: var(--color-text-placeholder);
    cursor: default;
}

[dir="rtl"] .carousel-arrow svg {
    transform: scaleX(-1);
}

/* Horizontal scroller — owns the rule (retired from app.css).
   Scrollbar hidden; arrows + touch swipe are the affordance. */
.h-scroll {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    scrollbar-width: none;
    /* Firefox */
    scroll-snap-type: x mandatory;
}

.h-scroll>* {
    scroll-snap-align: start;
}

.h-scroll::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

/* Category card — no inner padding; image fills to the card edges,
   name centered below. Visuals apply everywhere the card is used;
   carousel sizing is scoped to .h-scroll so the sub-category grid
   (category landing, unpolished) keeps its own sizing. */
.category-card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    /* image meets the rounded corners cleanly */
    text-align: center;
    text-decoration: none;
    color: var(--color-text);
}

.category-card img {
    width: 100%;
    flex: 1;
    min-height: 0;
    object-fit: cover;
    border-radius: 0;
    margin: 0;
    display: block;
}

.category-card .name {
    flex: none;
    padding: var(--space-3);
    font-size: var(--font-size-category-name);
    font-weight: var(--weight-regular);
    line-height: var(--line-height-tight);
    color: var(--color-text-secondary);
}

/* Same card on every viewport — the partially visible next card is
   the swipe affordance on mobile. */
.h-scroll .category-card {
    flex: 0 0 calc((100% - var(--space-4)) / 2);
    /* 2 full cards on mobile */
    height: 11.875rem;
    /* 190px */
}

@media (min-width: 768px) {
    .h-scroll .category-card {
        flex: 0 0 calc((100% - 3 * var(--space-4)) / 4);
        /* 4 cards on tablet */
    }
}

@media (min-width: 1100px) {
    .h-scroll .category-card {
        flex: 0 0 calc((100% - 5 * var(--space-4)) / 6);
        /* 6 cards on desktop, no peek */
    }
}

/* ============================================================
 * Product card (PRD §3.5.1) — shared by New Arrivals / Best
 * Sellers carousels, the listing grid, related + search.
 * Desktop: image spans both rows (nothing beneath it); content
 * + counter + Add-to-Cart fill the right column. Mobile: image
 * top-left, action row full-width at the bottom (counter under
 * the image, button to its right). Fixed card height.
 * ============================================================ */

.product-card {
    display: grid;
    /* Two sides with a gap. Mobile: image+counter (left), content+cta
       (right). Desktop: image only (left); content + counter+cta (right). */
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
        "media content"
        "qty   action";
    align-items: start;
    column-gap: var(--space-3);
    row-gap: var(--space-3);

    height: 14.375rem;
    /* 230px mobile */

    background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

@media (min-width: 1100px) {
    .product-card {
        /* image spans both rows (nothing under it); counter + cta share
           the right column's bottom row. Media track is PINNED to the image
           width (7rem, must match .product-card__media img below): an `auto`
           track shrank under the media+qty+action squeeze on a simple product,
           and base.css `img{max-width:100%}` then capped the image to a
           non-square 102×136. */
        grid-template-columns: 7rem auto 1fr;
        grid-template-areas:
            "media content content"
            "media qty     action";
        height: 15rem;
    }

    /* No counter (variants / out of stock): cta takes the whole right side. */
    .product-card.has-variants .product-card__action,
    .product-card.out-of-stock .product-card__action {
        grid-column: 2 / -1;
    }
}

/* --- Media: top-aligned, empty space below is intentional --- */
.product-card__media {
    grid-area: media;
    min-width: 0;
}

.product-card__media img {
    width: 7rem;
    height: 7rem;
    object-fit: contain;
    display: block;
}

@media (min-width: 1100px) {
    .product-card__media img {
        width: 7rem;
        height: 7rem;
    }
}

.product-card.out-of-stock .product-card__media img {
    opacity: 0.4;
}

/* --- Content --- */
.product-card__content {
    grid-area: content;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.badge-hot {
    align-self: flex-start;
    background-color: var(--color-warning-soft);
    color: var(--color-warning);
    font-weight: var(--weight-regular);
    font-size: var(--font-size-helper);
    /* 11px */
    margin-block-end: 0.125rem;
    /* 2px below badge */
}

.product-card .title-link {
    text-decoration: none;
    color: inherit;
}

.product-card .title {
    font-size: calc(var(--font-size-card-title) + 2px);
    font-weight: var(--weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text-secondary);

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 768px) {
    .product-card .title {
        font-size: var(--font-size-card-title);
    }
}

/* --- Rating: gold stars filled to --rating, count in action blue --- */
.product-card .rating {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.rating-stars {
    --pct: calc(var(--rating) / 5 * 100%);
    display: inline-block;
    font-size: calc(var(--font-size-body) + 2px);
    line-height: 1;
    background: linear-gradient(90deg,
            var(--color-star) var(--pct), var(--color-border) var(--pct));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.rating-stars::before {
    content: "\2605\2605\2605\2605\2605";
}

[dir="rtl"] .rating-stars {
    background: linear-gradient(270deg,
            var(--color-star) var(--pct), var(--color-border) var(--pct));
    -webkit-background-clip: text;
    background-clip: text;
}

.product-card .rating-count {
    font-size: var(--font-size-helper);
    color: var(--color-primary);
}

/* --- Price --- */
.product-card .price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    margin-block-start: 0.1875rem;
    /* 3px extra space above price */
}

.product-card .price-now {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: calc(var(--font-size-price) + 2px);
    font-weight: var(--weight-bold);
    color: var(--color-text);
}

@media (min-width: 768px) {
    .product-card .price-now {
        font-size: calc(var(--font-size-price) - 1px);
    }
}

.product-card .price-from {
    font-size: var(--font-size-helper);
    font-weight: var(--weight-regular);
    color: var(--color-text-secondary);
}

.product-card .price-old {
    font-size: var(--font-size-body);
    font-weight: var(--weight-regular);
    color: var(--color-danger);
    text-decoration: line-through;
}

.product-card .price-pending {
    font-size: var(--font-size-price);
    font-weight: var(--weight-bold);
    color: var(--color-text-muted);
}

.product-card .discount-tag {
    padding-block: 0.3125rem;
    /* +1px top/bottom (base was --space-1 / 4px) */
    font-size: calc(var(--font-size-helper) + 1px);
    /* 12px mobile */
}

@media (min-width: 768px) {
    .product-card .discount-tag {
        font-size: var(--font-size-helper);
        /* back to 13px on web */
    }
}

/* --- Low stock --- */
.product-card .stock-low {
    font-size: var(--font-size-helper);
    color: var(--color-danger);
}

@media (min-width: 768px) {
    .product-card .stock-low {
        font-size: calc(var(--font-size-helper) - 1px);
        /* 12px — no token at this size */
    }
}

/* --- Action: holds cta (or OOS button + WhatsApp / View options),
       stacked full-width inside its grid cell. --- */
.product-card__action {
    grid-area: action;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
}

.product-card .add-btn:not(:disabled),
.product-buy-row .add-btn:not(:disabled),
.cart-summary-continue:not(:disabled),
.atc-modal__primary:not(:disabled) {
    --action-3d-depth: 0.25rem;
    border: var(--border-width) solid var(--color-action-border);
    box-shadow: 0 var(--action-3d-depth) 0 var(--color-action-border);
}

.product-card .add-btn:not(:disabled)::before,
.product-buy-row .add-btn:not(:disabled)::before,
.cart-summary-continue:not(:disabled)::before,
.atc-modal__primary:not(:disabled)::before {
    display: none;
}

.product-card .add-btn:not(:disabled):active,
.product-buy-row .add-btn:not(:disabled):active,
.cart-summary-continue:not(:disabled):active,
.atc-modal__primary:not(:disabled):active {
    box-shadow: none;
}

/* Counter: boxed [- n +], plain white buttons (no fill), thin dividers. */
.product-card .qty {
    grid-area: qty;
    justify-self: start;
    display: inline-flex;
    align-items: stretch;
    height: var(--control-height);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.product-card .qty button {
    width: 2.25rem;
    border: none;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
}

.product-card .qty-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    font-size: var(--font-size-body);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

/* --- WhatsApp prompt (out of stock) --- */
.product-card .whatsapp-prompt {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
    font-size: var(--font-size-helper);
    font-weight: var(--weight-medium);
    color: var(--color-whatsapp);
    text-decoration: none;
    text-align: start;
}

.product-card .whatsapp-prompt svg {
    flex: none;
    width: 1rem;
    height: 1rem;
}

.product-card .whatsapp-prompt:hover {
    text-decoration: underline;
}

/* --- Carousel sizing: mobile = one full-width card; desktop = fixed
       ~26rem (≈3 across at full width, swipe/arrows for the rest).
       Scoped to .h-scroll so the listing grid keeps its own widths. --- */
.h-scroll .product-card {
    flex: 0 0 100%;
}

@media (min-width: 768px) {
    .h-scroll .product-card {
        flex: 0 0 calc((100% - var(--space-4)) / 2);
    }
}

@media (min-width: 1100px) {
    .h-scroll .product-card {
        flex: 0 0 calc((100% - 2 * var(--space-4)) / 3);
    }
}

/* ============================================================
 * How It Works (PRD §3.1) — fixed 4-step section. Brand panel
 * (rounded like the hero), #F9B300 icon circles with a numbered
 * badge + dashed connector on desktop; stacks on mobile.
 * ============================================================ */

.how-it-works__panel {
    background-color: var(--color-brand);
    border-radius: var(--radius-md);
    color: var(--color-text-on-dark);
    padding: var(--space-7) var(--space-6);
}

.how-it-works .how-it-works__title {
    margin: 0;
    font-size: var(--font-size-hiw-title);
    font-weight: var(--weight-bold);
    color: var(--color-text-on-dark);
}

.how-it-works__tagline {
    margin: 0.1875rem 0 0;
    font-size: var(--font-size-button);
    color: rgba(255, 255, 255, 0.8);
}

@media (min-width: 768px) {
    .how-it-works__tagline {
        font-size: var(--font-size-hiw-text);
    }
}

/* Mobile: vertical stack (circle inline-start, text beside). */
.how-it-works .steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin-block-start: var(--space-6);
    position: relative;
}

/* Mobile vertical connector — runs down through the circle centers. */
.how-it-works .steps::after {
    content: "";
    position: absolute;
    inset-block: 2.25rem;
    /* start/end at first & last circle centers */
    inset-inline-start: 2.25rem;
    /* half the 4.5rem circle = its horizontal center */
    width: 1px;
    background-image: linear-gradient(to bottom,
            rgba(255, 255, 255, 0.3) 6px, transparent 6px);
    background-size: 1px 12px;
    background-repeat: repeat-y;
    z-index: 0;
}

@media (min-width: 768px) {
    .how-it-works .steps::after {
        display: none;
        /* desktop uses the horizontal ::before instead */
    }
}

.how-it-works .step {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    text-align: start;
    position: relative;
    z-index: 1;
}

.how-it-works .step-icon {
    position: relative;
    flex: none;
    width: 4.5rem;
    /* 72px mobile */
    height: 4.5rem;
    border-radius: 50%;
    background-color: #F9B300;
    box-shadow: 0 -1px 30px 0 rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.how-it-works .step-icon img {
    width: auto;
    height: 1.5rem;
    /* 24px mobile — original ratio, height-driven */
}

@media (min-width: 768px) {
    .how-it-works .step-icon {
        width: 4.75rem;
        /* 76px desktop */
        height: 4.75rem;
    }

    .how-it-works .step-icon img {
        height: 1.75rem;
        /* 28px desktop */
    }
}

.how-it-works .step-badge {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    transform: translate(30%, -30%);
    width: 1.75rem;
    /* 28px */
    height: 1.75rem;
    border-radius: 50%;
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-brand);
    color: var(--color-brand);
    font-size: var(--font-size-button);
    /* 14px */
    font-weight: var(--weight-semibold);
    display: flex;
    align-items: center;
    justify-content: center;
}

[dir="rtl"] .how-it-works .step-badge {
    transform: translate(-30%, -30%);
}

.how-it-works .step h3 {
    margin: 0;
    font-size: calc(var(--font-size-card-title) + 1px);
    font-weight: var(--weight-semibold);
    color: var(--color-text-on-dark);
}

@media (min-width: 768px) {
    .how-it-works .step h3 {
        font-size: var(--font-size-card-title);
    }
}

.how-it-works .step p {
    margin: var(--space-1) 0 0;
    font-size: calc(var(--font-size-button) - 1px);
    color: rgba(255, 255, 255, 0.9);
}

@media (min-width: 768px) {
    .how-it-works .step p {
        font-size: calc(var(--font-size-hiw-text) - 1px);
    }
}

/* Desktop: 4 across, centered, dashed connector through the circles. */
@media (min-width: 768px) {
    .how-it-works__panel {
        padding: var(--space-8);
    }

    .how-it-works .steps {
        flex-direction: row;
        gap: var(--space-4);
        margin-block-start: var(--space-7);
        position: relative;
    }

    .how-it-works .steps::before {
        content: "";
        position: absolute;
        inset-block-start: 2.375rem;
        /* circle vertical center (½ of 4.75rem) */
        inset-inline: 12.5%;
        /* first → last circle centers (4 equal columns) */
        height: 1px;
        /* dash 6px, gap 6px, white 30% */
        background-image: linear-gradient(to right,
                rgba(255, 255, 255, 0.3) 6px, transparent 6px);
        background-size: 12px 1px;
        background-repeat: repeat-x;
        z-index: 0;
    }

    .how-it-works .step {
        flex: 1;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-3);
        position: relative;
        z-index: 1;
    }
}

/* ============================================================
 * Footer (PRD §3.1)
 * White band on the 1300 column. Mobile: centered single column
 * (brand · socials · links · bottom) with hairline dividers.
 * Desktop: brand left, links + socials right, copyright row below.
 * ============================================================ */

.site-footer {
    background-color: var(--color-surface);
    border-block-start: var(--border-width) solid var(--color-border);
    margin-block-start: var(--space-7);
}

.site-footer .container {
    padding-block: var(--space-6);
}

.site-footer__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-5);
}

/* Brand */
.site-footer__logo {
    display: inline-flex;
    align-items: center;
    font-weight: var(--weight-bold);
    font-size: var(--font-size-h2);
    color: var(--color-brand);
}

.site-footer__logo-img {
    max-height: 1.875rem;
    /* 30px — matches header */
    width: auto;
    display: block;
}

.site-footer__desc {
    margin-block-start: var(--space-3);
    max-width: 42ch;
    font-size: var(--font-size-body);
    line-height: var(--line-height-base);
    color: var(--color-text-secondary);
}

/* Social icons — second block on mobile, divider above */
.site-footer__socials {
    order: 2;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding-block-start: var(--space-5);
    border-block-start: var(--border-width) solid var(--color-border);
}

.site-footer__socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
}

.site-footer__socials img {
    width: 1.5rem;
    height: 1.5rem;
}

/* Legal links — third block on mobile, divider above */
.site-footer__links {
    order: 3;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding-block-start: var(--space-5);
    border-block-start: var(--border-width) solid var(--color-border);
}

.site-footer__links a {
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
    transition: color 0.12s ease;
}

.site-footer__links a:hover {
    color: var(--color-text);
}

/* Bottom bar */
.site-footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin-block-start: var(--space-5);
    padding-block-start: var(--space-5);
    border-block-start: var(--border-width) solid var(--color-border);
    text-align: center;
}

.site-footer__copyright {
    font-size: var(--font-size-helper);
    color: var(--color-text-muted);
}

.site-footer__provided {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-helper);
    color: var(--color-text-muted);
}

.site-footer__provided img {
    height: 0.625rem;
    /* 10px — WePremium logo at original height; width auto-scales */
    width: auto;
    display: block;
}


/* ----- Desktop ----- */
@media (min-width: 768px) {

    .site-footer .container {
        padding-block: var(--space-7);
    }

    .site-footer__top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "brand links"
            "brand socials";
        align-items: start;
        gap: var(--space-4) var(--space-8);
        text-align: start;
    }

    .site-footer__brand {
        grid-area: brand;
    }

    .site-footer__links {
        grid-area: links;
    }

    .site-footer__socials {
        grid-area: socials;
    }

    .site-footer__desc {
        margin-inline: 0;
    }

    /* Drop the mobile stacking dividers + ordering */
    .site-footer__links,
    .site-footer__socials {
        order: 0;
        width: auto;
        padding-block-start: 0;
        border-block-start: none;
    }

    /* Links in two columns, left-aligned */
    .site-footer__links {
        display: block;
        column-count: 2;
        column-gap: var(--space-8);
    }

    .site-footer__links a {
        display: block;
        margin-block-end: var(--space-3);
    }

    /* Socials under the links */
    .site-footer__socials {
        justify-content: flex-end;
        align-self: end;
    }

    /* Bottom bar = single row */
    .site-footer__bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: start;
    }
}

/* ============================================================
 * Category Landing Page (PRD §3.4)
 * Breadcrumb + header card + sub-category grid.
 * Cards reuse base .category-card; grid mirrors the homepage
 * 2/4/6-up sizing (190px height) so they match exactly.
 * ============================================================ */

/* Breadcrumb — shared back-link style */
.breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding-block: var(--space-3);
    font-size: var(--font-size-body);
    font-weight: var(--weight-semibold);
    color: var(--color-brand);
    text-decoration: none;
}

.breadcrumb:hover {
    text-decoration: underline;
}

.breadcrumb__chevron {
    flex: none;
}

[dir="rtl"] .breadcrumb__chevron {
    transform: scaleX(-1);
}

/* Header card */
.category-header {
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-block-end: var(--space-4);
}

.category-header__titlebar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
}

.category-header__title {
    margin: 0;
    font-size: var(--font-size-h1);
    font-weight: var(--weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-brand);
}

.category-header__count {
    font-size: var(--font-size-meta);
    color: var(--color-brand);
}

.category-header__description {
    margin-block-start: var(--space-3);
    transition: max-height 0.2s ease;
}

.category-header__description p {
    margin: 0;
    font-size: var(--font-size-body);
    line-height: var(--line-height-base);
    color: var(--color-text-secondary);
}

.read-more-toggle {
    margin-block-start: var(--space-2);
    padding: 0;
    background: none;
    border: 0;
    font-size: var(--font-size-body);
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
}

/* Sub-category grid — same card size as the homepage carousel */
.subcategory-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.subcategory-grid .category-card {
    height: 11.875rem;
    /* 190px — matches homepage */
}

@media (min-width: 768px) {
    .subcategory-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1100px) {
    .subcategory-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* Divider between the sub-category cards and the top's own product listing
   (mixed top, Model B §4.5). Mirrors .cart-summary-divider. */
.category-listing-divider {
    border: none;
    border-block-start: var(--border-width) solid var(--color-border);
    margin-block: var(--space-6);
}

/* Empty state (rare — a direct-products top reached at this URL) */
.category-empty {
    padding-block: var(--space-6);
    text-align: center;
    font-style: italic;
    color: var(--color-text-muted);
}

/* ============================================================
 * Product Listing Page (PRD §3.5) — page shell
 * Header reuses the category-landing card (.category-header*).
 * Grid mirrors the homepage product card: 1 / 2 / 3 per row.
 * Filter + sort toolbar polished in its own pass.
 * ============================================================ */

.product-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-block-end: var(--space-5);
}

@media (min-width: 768px) {
    .product-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .product-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Load more — full-width navy nav button (foundation from base.css) */
.load-more-wrap {
    display: flex;
    justify-content: center;
    padding-block: var(--space-4) var(--space-7);
}

.load-more-btn {
    width: 100%;
    max-width: 32rem;
    background-color: var(--color-brand);
    color: var(--color-text-on-dark);
    transition: background-color 0.12s ease;
}

.load-more-btn:hover {
    background-color: color-mix(in srgb, var(--color-brand) 88%, #000);
}

.load-more-end {
    font-size: var(--font-size-meta);
    font-style: italic;
    color: var(--color-text-muted);
}

/* ============================================================
 * Product Listing Page (PRD §3.5.2) — filter + sort toolbar
 * One component, two modes: mobile slide-up panel / desktop
 * inline popover bar. Controls share the form-control sizing
 * (--control-height, --radius-md, --color-border).
 * ============================================================ */

.listing-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block-end: var(--space-5);
}

/* Mobile "Filter (N)" trigger */
.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--control-height);
    padding-inline: var(--space-4);
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-button);
    color: var(--color-text);
    cursor: pointer;
}

.filter-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Sort by */
.sort-by {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
}

.sort-by-select {
    height: var(--control-height);
    padding-inline: var(--space-3) calc(var(--space-3) * 2 + 1em);
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-button);
    color: var(--color-text);
    cursor: pointer;
}

/* ----- Mobile slide-up panel (desktop overrides below) ----- */
.filter-panel {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 100;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background-color: var(--color-surface);
    border-start-start-radius: var(--radius-lg);
    border-start-end-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
    transform: translateY(100%);
    transition: transform 0.25s ease;
}

body.filter-panel-open .filter-panel {
    transform: translateY(0);
}

.filter-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

body.filter-panel-open .filter-backdrop {
    opacity: 1;
    pointer-events: auto;
}

body.filter-panel-open {
    overflow: hidden;
}

.filter-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    border-block-end: var(--border-width) solid var(--color-border);
}

.filter-panel-header h2 {
    margin: 0;
    font-size: var(--font-size-h2);
}

.filter-panel-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    background: none;
    border: 0;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.filter-panel-close svg {
    width: 1.125rem;
    height: 1.125rem;
}

.filter-panel-body {
    flex: 1;
    overflow-y: auto;
    padding-block: var(--space-2);
}

.filter-section {
    border-block-end: var(--border-width) solid var(--color-border);
}

/* Last section (Availability) sits directly above the Apply/Reset footer —
   drop its divider on mobile. Desktop turns sections into bordered pills
   (below), so this is scoped to the mobile accordion only. */
@media (max-width: 767.98px) {
    .filter-section:last-child {
        border-block-end: none;
    }
}

.filter-section-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    background: none;
    border: 0;
    font-size: var(--font-size-button);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    text-align: start;
    cursor: pointer;
}

.filter-section-arrow {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23545454' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1em 1em;
    transition: transform 0.15s ease;
}

.filter-section.is-open .filter-section-arrow {
    transform: rotate(180deg);
}

.filter-section-popover {
    display: none;
    padding: 0 var(--space-4) var(--space-4);
}

.filter-section.is-open .filter-section-popover {
    display: block;
}

/* Option rows */
.filter-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-block: var(--space-2);
    font-size: var(--font-size-button);
    cursor: pointer;
}

.filter-option input {
    flex: none;
}

.filter-option-label {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.filter-option-count {
    font-size: var(--font-size-body);
    color: var(--color-text-muted);
}

.filter-option-clear {
    margin-block-start: var(--space-1);
    padding-block-start: var(--space-3);
    border-block-start: var(--border-width) solid var(--color-border);
    color: var(--color-text-secondary);
}

/* Price From/To */
.filter-price-row {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
}

.filter-price-input {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
}

.filter-price-input input {
    width: 100%;
    height: var(--control-height);
    padding-inline: var(--space-3);
    font-size: 16px;
    /* 16px prevents iOS zoom-on-focus (matches base .form-input) */
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
}

.filter-price-sep {
    padding-block-end: var(--space-3);
    color: var(--color-text-muted);
}

/* Mobile sticky footer (buttons reuse base; just width here) */
.filter-panel-footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-block-start: var(--border-width) solid var(--color-border);
    background-color: var(--color-surface);
}

.filter-apply-btn,
.filter-reset-btn {
    width: 100%;
}

/* Desktop per-popover footer hidden on mobile */
.filter-popover-footer {
    display: none;
}

/* ----- Desktop: flip slide-up → inline popover bar ----- */
@media (min-width: 768px) {

    .filter-panel {
        position: static;
        inset: auto;
        max-height: none;
        transform: none;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        flex: 1;
        flex-direction: row;
        align-items: center;
    }

    .filter-panel-header,
    .filter-panel-footer,
    .filter-backdrop {
        display: none !important;
    }

    .filter-panel-body {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-2);
        padding: 0;
        overflow: visible;
    }

    /* Each section = a bordered control matching the sort select */
    .filter-section {
        position: relative;
        border: var(--border-width) solid var(--color-border);
        border-radius: var(--radius-md);
        background-color: var(--color-surface);
    }

    .filter-section-trigger {
        width: auto;
        height: var(--control-height);
        padding-inline: var(--space-4);
        gap: var(--space-2);
        font-weight: var(--weight-regular);
        white-space: nowrap;
    }

    .filter-section-popover {
        position: absolute;
        inset-block-start: calc(100% + var(--space-1));
        inset-inline-start: 0;
        min-width: 15rem;
        max-width: 20rem;
        max-height: 20rem;
        overflow-y: auto;
        padding: var(--space-3) var(--space-4);
        background-color: var(--color-surface);
        border: var(--border-width) solid var(--color-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-dropdown);
        z-index: 50;
    }

    .listing-toolbar>.filter-btn {
        display: none;
    }

    .listing-toolbar {
        flex-wrap: nowrap;
    }

    .listing-toolbar>.sort-by {
        margin-inline-start: auto;
    }

    /* Per-popover Apply + Reset */
    .filter-popover-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2);
        margin-block-start: var(--space-2);
        padding-block-start: var(--space-3);
        border-block-start: var(--border-width) solid var(--color-border);
    }

    .filter-popover-reset {
        font-size: var(--font-size-helper);
        color: var(--color-text-secondary);
        text-decoration: underline;
    }

    .filter-popover-apply {
        padding: var(--space-2) var(--space-4);
        background-color: var(--color-primary);
        color: var(--color-text-on-dark);
        border: 0;
        border-radius: var(--radius-md);
        font-size: var(--font-size-body);
        font-weight: var(--weight-semibold);
        cursor: pointer;
    }

    .filter-popover-apply:hover {
        background-color: var(--color-primary-hover);
    }
}

/* ============================================================
 * Product Detail Page (PRD §3.6) — product info card
 * White card: gallery + details. Desktop = 2-col (gallery left,
 * info right). Reviews + related are separate sections below.
 * ============================================================ */

.product-detail {
    padding-block-end: var(--space-6);
}

.product-main {
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-block-end: var(--space-4);
}

/* Gallery — main image frame + thumbnail strip (PRD §3.6) */
.product-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.product-gallery__main {
    background-color: var(--color-bg-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.product-gallery__main-img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

/* Thumbnail strip: prev arrow · scrollable thumbs · next arrow */
.product-gallery__strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.product-gallery__thumbs {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
    min-width: 0;
    max-width: calc(3 * 4.5rem + 2 * var(--space-2));
}

.product-gallery__thumbs::-webkit-scrollbar {
    display: none;
}

.product-gallery__thumb {
    flex: 0 0 auto;
    width: 4.5rem;
    height: 4.5rem;
    padding: 0;
    background-color: var(--color-bg-subtle);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
}

.product-gallery__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-gallery__thumb.is-active {
    border-color: var(--color-primary);
}

/* Info column — separated from the gallery on mobile */
.product-main__info {
    margin-block-start: var(--space-4);
    padding-block-start: var(--space-4);
    border-block-start: var(--border-width) solid var(--color-border);
}

.product-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-block-end: calc(var(--space-2) + 0.1875rem);
}

.product-badges:empty {
    display: none;
}

.product-title {
    margin: 0 0 var(--space-2);
    font-size: calc(var(--font-size-h1) + 0.125rem);
    font-weight: var(--weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text);
}

.product-rating {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-end: var(--space-3);
}

.product-rating-count {
    font-size: calc(var(--font-size-helper) + 2px);
    color: var(--color-primary);
}

/* Detail rating row: stars 2px larger than the card's shared size */
.product-rating .rating-stars {
    font-size: calc(var(--font-size-body) + 4px);
}

.product-discount {
    margin-block-end: var(--space-2);
}

.product-discount .discount-tag {
    font-size: calc(var(--font-size-helper) + 0.0625rem);
}

.product-price {
    margin-block-end: var(--space-3);
    padding-block-start: 0.1875rem;
    font-size: var(--font-size-price-lg);
    font-weight: var(--weight-bold);
    color: var(--color-text);
}

.product-price .price-old {
    display: block;
    margin-block-start: var(--space-1);
    font-size: calc(var(--font-size-body) + 0.0625rem);
    font-weight: var(--weight-regular);
    color: var(--color-danger);
    text-decoration: line-through;
}

.product-price .price-pending {
    color: var(--color-text-muted);
    font-weight: var(--weight-regular);
}

.product-detail .stock-low {
    margin-block-end: var(--space-3);
    font-size: var(--font-size-body);
    color: var(--color-danger);
}

/* Variant selector */
.product-variants {
    margin-block: var(--space-4);
}

.product-variants-label {
    display: block;
    margin-block-end: var(--space-2);
    font-size: var(--font-size-body);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.product-variants-select {
    width: 100%;
    height: var(--control-height);
    padding-inline: var(--space-3) calc(var(--space-3) * 2 + 1em);
    font-size: 16px;
    /* prevents iOS zoom-on-focus */
    font-family: inherit;
    color: var(--color-text);
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.product-variants-select:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.product-variants-select option:disabled {
    color: var(--color-text-placeholder);
}

/* Buy row — qty stepper + the base green .add-btn */
.product-buy-row {
    display: flex;
    align-items: start;
    gap: var(--space-3);
    margin-block: var(--space-4);
}

.product-buy-row .qty {
    display: inline-flex;
    align-items: stretch;
    height: var(--control-height);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.product-buy-row .qty button {
    width: 2.5rem;
    border: none;
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
}

.product-buy-row .qty-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    font-size: var(--font-size-body);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.add-btn-large {
    flex: 1;
    width: 100%;
}

/* Out-of-stock WhatsApp prompt */
.product-detail .whatsapp-prompt {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-start: var(--space-3);
    font-size: var(--font-size-body);
    color: var(--color-whatsapp);
    text-decoration: none;
}

.product-detail .whatsapp-prompt svg {
    flex: none;
    width: 1rem;
    height: 1rem;
}

.product-detail .whatsapp-prompt:hover {
    text-decoration: underline;
}

/* Trust signals */
.trust-signals {
    margin-block: var(--space-4);
    padding-block: var(--space-3);
    border-block: var(--border-width) solid var(--color-border);
}

.trust-signals:empty {
    display: none;
}

.trust-signal {
    padding-block: var(--space-1);
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
}

.trust-signal::before {
    content: "✓";
    margin-inline-end: 5px;
    color: var(--color-success);
    font-weight: var(--weight-bold);
}

/* Accordion */
.product-accordion {
    margin-block-start: var(--space-4);
}

.product-accordion details {
    border-block-end: var(--border-width) solid var(--color-border);
}

.product-accordion details:last-child {
    border-block-end: 0;
}

.product-accordion summary {
    position: relative;
    padding-block: var(--space-4);
    padding-inline-end: var(--space-5);
    font-size: calc(var(--font-size-body) + 1px);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.product-accordion summary::-webkit-details-marker {
    display: none;
}

.product-accordion summary::after {
    content: '+';
    position: absolute;
    inset-inline-end: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-size-price);
    font-weight: var(--weight-regular);
    color: var(--color-text-muted);
}

.product-accordion details[open] summary::after {
    content: '\2212';
}

.product-accordion-body {
    padding-block-end: var(--space-4);
    font-size: calc(var(--font-size-body) + 1px);
    line-height: var(--line-height-base);
    color: var(--color-text-secondary);
}

/* Specifications — key/value list inside the accordion body */
.product-specs {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.product-specs__row {
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: var(--space-3);
}

.product-specs__key {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.product-specs__value {
    margin: 0;
    color: var(--color-text-secondary);
}

/* ----- Desktop: 2-column (gallery left, info right) ----- */
@media (min-width: 768px) {
    .product-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--space-6);
        align-items: start;
        padding: var(--space-5);
    }

    .product-gallery {
        position: sticky;
        top: var(--space-4);
        min-width: 0;
    }

    /* Thumbnail strip: 6 visible on desktop; the rest scroll/swipe. */
    .product-gallery__thumbs {
        max-width: calc(6 * 4.5rem + 5 * var(--space-2));
    }

    .product-main__info {
        margin-block-start: 0;
        padding-block-start: 0;
        border-block-start: 0;
    }

    .product-buy-row .add-btn {
        font-size: calc(var(--font-size-button) + 2px);
    }

    .product-title {
        font-size: var(--font-size-h1);
    }

    .product-accordion summary,
    .product-accordion-body {
        font-size: var(--font-size-body);
    }
}

/* ============================================================
 * Product Detail — Reviews (PRD §3.6.2)
 * White card: summary (avg + distribution) + review list + load more.
 * ============================================================ */

.product-reviews {
    margin-block-end: var(--space-4);
    padding: var(--space-4);
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
}

.product-reviews-title {
    margin: 0 0 var(--space-4);
    font-size: var(--font-size-h2);
    font-weight: var(--weight-bold);
    color: var(--color-text);
}

/* Empty state */
.product-reviews-empty {
    color: var(--color-text-secondary);
}

.product-reviews-empty p {
    margin: 0 0 var(--space-1);
    font-size: var(--font-size-body);
}

.product-reviews-empty-cta {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

/* Summary — avg (left) + distribution (right), row on all viewports */
.product-reviews-summary {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding-block-end: var(--space-4);
    margin-block-end: var(--space-4);
    border-block-end: var(--border-width) solid var(--color-border);
}

.product-reviews-avg {
    flex: none;
    text-align: center;
}

.product-reviews-avg-number {
    font-size: 2.25rem;
    /* 36px */
    font-weight: var(--weight-bold);
    line-height: 1;
    color: var(--color-text);
}

.product-reviews-avg-stars {
    margin-block: var(--space-1);
}

.product-reviews-avg-stars .rating-stars {
    font-size: calc(var(--font-size-body) + 4px);
}

.product-reviews-avg-total {
    font-size: var(--font-size-helper);
    color: var(--color-text-muted);
}

/* Distribution bars */
.product-reviews-distribution {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.product-reviews-bar-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-helper);
    color: var(--color-text-secondary);
}

.product-reviews-bar-label {
    flex: none;
    width: 2rem;
}

.product-reviews-bar-track {
    flex: 1;
    height: 0.5rem;
    background-color: var(--color-bg);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.product-reviews-bar-fill {
    height: 100%;
    background-color: var(--color-star);
    border-radius: var(--radius-pill);
    transition: width 0.2s ease;
}

.product-reviews-bar-count {
    flex: none;
    width: 1.75rem;
    text-align: end;
    color: var(--color-text-muted);
}

/* Review list */
.product-reviews-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.product-review {
    display: flex;
    gap: var(--space-3);
    padding-block: var(--space-4);
    border-block-end: var(--border-width) solid var(--color-border);
}

.product-review:last-child {
    border-block-end: none;
}

.product-review-avatar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-bg);
    color: var(--color-text-placeholder);
}

.product-review-body {
    flex: 1;
    min-width: 0;
}

.product-review-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-2);
    margin-block-end: var(--space-2);
}

.product-review-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.product-review-name {
    font-size: var(--font-size-body);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.product-review-stars {
    line-height: 1;
}

.product-review-verified {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.125rem var(--space-2);
    font-size: var(--font-size-helper);
    color: var(--color-success);
    background-color: var(--color-success-soft);
    border-radius: var(--radius-pill);
}

.product-review-text {
    margin: 0;
    font-size: var(--font-size-body);
    line-height: var(--line-height-base);
    color: var(--color-text-secondary);
}

/* Load more — blue text link (Figma) */
.product-reviews-load-more {
    display: block;
    margin-block-start: var(--space-4);
    text-align: center;
    font-size: var(--font-size-body);
    font-weight: var(--weight-semibold);
    color: var(--color-primary);
    text-decoration: none;
}

.product-reviews-load-more:hover {
    text-decoration: underline;
}

.product-reviews-all-shown {
    margin-block-start: var(--space-4);
    text-align: center;
    font-size: var(--font-size-helper);
    font-style: italic;
    color: var(--color-text-muted);
}

/* ============================================================
 * Add-to-Cart modal (PRD §3.7)
 * Reuses .modal / .modal__overlay / .modal__panel (base.css) and the
 * .carousel-head / .carousel-arrow / .h-scroll scaffolding for the
 * "You may also like" carousel. Only modal-specific layout lives here.
 * ============================================================ */

/* Dialog = close stacked above the panel, so the close tracks the panel's
   top-end corner (Figma) instead of the screen corner. Narrow on desktop —
   the carousel shows one full card; swipe/arrows reach the rest. */
.atc-modal__dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 30rem;
    max-height: min(86dvh, 760px);
}

/* A few px above the panel, end-aligned to it. */
.atc-modal__close {
    flex: 0 0 auto;
    align-self: flex-end;
    margin-block-end: var(--space-2);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0;
    background: transparent;
    border: none;
    color: var(--color-text-on-dark);
    font-family: var(--font-base);
    font-size: var(--font-size-body);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Panel fills the dialog up to its cap; the suggest region scrolls if tall. */
.atc-modal__panel {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    max-width: none;
}

.atc-modal__top {
    flex: 0 0 auto;
    padding: var(--space-5);
    background-color: var(--color-surface);
}

.atc-modal__success {
    margin: 0 0 var(--space-4);
    font-size: var(--font-size-h2);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: var(--line-height-base);
}

.atc-modal__primary,
.atc-modal__secondary {
    width: 100%;
}

.atc-modal__primary {
    margin-block-end: var(--space-3);
}

/* Grey body. The white→grey edge is the Figma separator. */
.atc-modal__suggest {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-5);
    background-color: var(--color-bg);
    border-block-start: var(--border-width) solid var(--color-border);
}

/* In the modal the carousel shows ONE full card at every width — override the
   viewport-stepped 1/2/3 sizing so the narrow panel doesn't squeeze 3 cards. */
.atc-modal__suggest .h-scroll .product-card {
    flex: 0 0 100%;
}

/* Item 10 (§3.7): demote the suggestion cards' Add-to-Cart to a green OUTLINE
   button — no fill, no 3D edge — so "Checkout Now" is the only primary green in
   the modal. Keeps the base control-height so it lines up with the qty counter
   beside it; hover fills green + white text (reverses to the 3D face). Scoped to
   .atc-modal__suggest so product cards elsewhere keep the filled 3D button. */
.atc-modal__suggest .product-card .add-btn:not(:disabled) {
    background-color: var(--color-surface);
    color: var(--color-action-border);
    border: var(--border-width) solid var(--color-action-border);
    box-shadow: none;
    margin-bottom: 0;
}

.atc-modal__suggest .product-card .add-btn:not(:disabled):hover {
    background-color: var(--color-action);
    color: var(--color-text-on-dark);
}

.atc-modal__suggest .product-card .add-btn:not(:disabled):active {
    transform: none;
    box-shadow: none;
}

/* ============================================================
 * Cart page (PRD §3.8)
 * White cards (items · summary; promo card added with the apply-flow)
 * on the page background, a section-title header, the green 3D CTA
 * (reuses .add-btn via cart.js), and the product-card qty-stepper look.
 * ============================================================ */

.cart-page {
    padding-block-end: var(--space-7);
}

/* Anti-flash: while cart.js reads localStorage, hide the empty-state so a
   non-empty cart never shows "empty" for a moment. Applied JS-only via the
   inline script in cart.php (removed by cart.js once it decides); no-JS users
   keep the empty-state as the fallback. */
.cart-page.is-hydrating [data-cart-empty] {
    display: none;
}

/* Desktop: the standard 1300 column (from .container) splits into an items
   column (left) + a rail with promo above summary (right). The rail is its
   own element, so summary sits directly under promo regardless of how tall
   the items column is. Mobile stays a single stacked column. */
@media (min-width: 768px) {
    .cart-filled:not([hidden]) {
        display: grid;
        grid-template-columns: 1fr 22rem;
        column-gap: var(--space-6);
        align-items: start;
    }

    .cart-notice {
        grid-column: 1 / -1;
    }

    .cart-lines {
        margin-block-end: 0;
    }
}

/* Header: "My cart" (section-title style) + item count, separated rule. */
.cart-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block-end: var(--space-3);
    margin-block-end: var(--space-4);
    border-block-end: var(--border-width) solid var(--color-border);
}

.cart-title {
    margin: 0;
    font-size: var(--font-size-section-title);
    font-weight: var(--weight-bold);
    color: var(--color-brand);
    line-height: var(--line-height-tight);
}

.cart-count {
    flex: none;
    font-size: 0.875rem;
    /* 14px both viewports — +2px vs --font-size-meta on mobile */
    color: var(--color-text-secondary);
}

/* Recovery notice (silently-removed items). */
.cart-notice {
    margin-block-end: var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-helper);
}

.cart-notice-warning {
    background-color: var(--color-warning-soft);
    border: var(--border-width) solid var(--color-warning-border);
    color: var(--color-warning);
}

/* ----- Items card ----- */
.cart-lines {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
}

.cart-line {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    padding: var(--space-4);
}

.cart-line+.cart-line {
    border-block-start: var(--border-width) solid var(--color-border);
}

.cart-line-thumb {
    display: block;
    width: 5rem;
    flex: none;
}

.cart-line-thumb img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

.cart-line.is-oos .cart-line-thumb img {
    filter: grayscale(1);
    opacity: 0.6;
}

.cart-line-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.cart-line-title {
    font-size: var(--font-size-body);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: var(--line-height-tight);
    text-decoration: none;
}

.cart-line-title:hover {
    text-decoration: underline;
}

.cart-line-variant {
    font-size: var(--font-size-helper);
    color: var(--color-text-muted);
}

.cart-line-price {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.cart-line-amount {
    font-size: var(--font-size-price);
    font-weight: var(--weight-bold);
    color: var(--color-text);
}

.cart-line-amount-old {
    font-size: calc(var(--font-size-helper) + 2px);
    color: var(--color-danger);
    text-decoration: line-through;
}

.cart-line-stock-low {
    font-size: var(--font-size-helper);
    font-weight: var(--weight-medium);
    color: var(--color-danger);
}

.cart-line-oos {
    font-size: var(--font-size-helper);
    font-weight: var(--weight-semibold);
    color: var(--color-danger);
}

/* Stepper + remove on one row. */
.cart-line-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-start: var(--space-1);
}

/* Qty stepper — mirrors the product-card connected pill. */
.cart-line-qty {
    display: inline-flex;
    align-items: stretch;
    height: var(--control-height);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.cart-line-qty button {
    width: 2.25rem;
    border: none;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
}

.cart-line-qty-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    font-size: var(--font-size-body);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.cart-line-remove {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: var(--control-height);
    padding-inline: var(--space-3);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: var(--font-size-helper);
    font-weight: var(--weight-medium);
    cursor: pointer;
}

.cart-line-remove:hover {
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.cart-line-remove svg {
    flex: none;
}

/* Per-line notice (e.g. qty capped to stock), injected by cart.js. */
.cart-line-notice {
    margin-block-start: var(--space-2);
    font-size: var(--font-size-helper);
    color: var(--color-warning);
}

/* ----- Summary card ----- */
.cart-summary {
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.cart-summary-title {
    margin-block-end: var(--space-3);
    font-size: var(--font-size-body);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.cart-summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block: var(--space-1);
    font-size: var(--font-size-body);
    color: var(--color-text);
}

.cart-summary-row-label {
    color: var(--color-text-secondary);
}

.cart-summary-row-muted .cart-summary-row-value {
    color: var(--color-text-muted);
    font-style: italic;
}

.cart-summary-divider {
    border: none;
    border-block-start: var(--border-width) solid var(--color-border);
    margin-block: var(--space-3);
}

.cart-summary-total {
    font-size: var(--font-size-price);
    font-weight: var(--weight-bold);
}

.cart-summary-total .cart-summary-row-label {
    color: var(--color-text);
}

.cart-summary-continue {
    width: 100%;
    margin-block-start: var(--space-4);
    text-align: center;
    text-decoration: none;
}

.cart-summary-blocked-reason {
    margin-block-start: var(--space-2);
    font-size: var(--font-size-helper);
    color: var(--color-danger);
    text-align: center;
}

/* ----- Cart promo card (PRD §3.8.1) ----- */
.cart-promo {
    margin-block-end: var(--space-4);
    padding: var(--space-4);
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
}

.cart-promo__label {
    margin-block-end: var(--space-3);
    font-size: var(--font-size-body);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.cart-promo__form {
    display: flex;
    gap: var(--space-2);
}

.cart-promo__input {
    flex: 1 1 auto;
    min-width: 0;
}

.cart-promo__apply {
    flex: none;
    height: var(--control-height);
    padding-inline: var(--space-5);
    background: var(--color-primary);
    color: var(--color-text-on-dark);
    border: var(--border-width) solid var(--color-primary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-button);
    font-weight: var(--weight-semibold);
    cursor: pointer;
}

.cart-promo__apply:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.cart-promo__chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    height: var(--control-height);
    padding-inline: var(--space-3);
    background: var(--color-bg);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
}

.cart-promo__code {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.cart-promo__remove {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0;
    background: transparent;
    border: none;
    color: var(--color-danger);
    font-size: var(--font-size-helper);
    font-weight: var(--weight-semibold);
    cursor: pointer;
}

.cart-promo__remove svg {
    flex: none;
}

.cart-promo__success {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-start: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--color-success-soft);
    border-radius: var(--radius-md);
    color: var(--color-success);
    font-size: var(--font-size-helper);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.cart-promo__success svg {
    flex: none;
}

.cart-promo__error {
    margin-block-start: var(--space-3);
    font-size: 0.75rem;
    /* 12px mobile — +1px vs --font-size-helper */
    color: var(--color-danger);
}

@media (min-width: 768px) {
    .cart-promo__error {
        font-size: var(--font-size-helper);
    }

    /* 13px on desktop */
}

.cart-summary-row-promo .cart-summary-row-value {
    color: var(--color-success);
    font-weight: var(--weight-semibold);
}

/* ============================================================
 * Checkout page (PRD §3.9)
 * Single centered column. Each section = an icon + brand-navy title on
 * the page background (with a divider), then a white card body. Reuses
 * base.css form controls + .add-btn; summary reuses the cart card look.
 * Overrides the wireframe rules still in app.css (loads earlier).
 * ============================================================ */

/* Same standard 1300 column + spacing as the cart page. */
.checkout-page {
    padding-block-end: var(--space-7);
}

/* Desktop: cart-style two columns — form sections (left) + a rail holding
   the order summary and Place order, stacked (right). Mobile stays stacked. */
@media (min-width: 768px) {
    .checkout-form {
        display: grid;
        grid-template-columns: 1fr 22rem;
        column-gap: var(--space-6);
        align-items: start;
    }

    .checkout-errors-banner {
        grid-column: 1 / -1;
    }
}

/* Section = title band on the page bg + a white card body. Resets the
   wireframe .checkout-section white-card box from app.css. */
.checkout-section {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-block-end: var(--space-5);
}

.checkout-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding-block-end: var(--space-3);
    border-block-end: var(--border-width) solid var(--color-border);
    font-size: var(--font-size-section-title);
    font-weight: var(--weight-bold);
    color: var(--color-brand);
    line-height: var(--line-height-tight);
}

.checkout-section-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: var(--color-brand);
    color: var(--color-text-on-dark);
    border-radius: var(--radius-pill);
}

.checkout-section-icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* White card body — Contact fields, the radio groups. */
.checkout-card {
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

/* ----- Radio cards (delivery + payment methods) ----- */
.radio-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.radio-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

.radio-card:hover {
    border-color: var(--color-text-muted);
}

.radio-card:has(.radio-card-input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

.radio-card-input {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    margin-block-start: 0.1rem;
    accent-color: var(--color-primary);
}

.radio-card-content {
    flex: 1;
    min-width: 0;
}

.radio-card-title {
    font-size: var(--font-size-form-label);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.radio-card-subtitle {
    margin-block-start: var(--space-1);
    font-size: var(--font-size-form-hint);
    color: var(--color-text-muted);
}

/* Free / fee shown as a pale-green pill (Figma). */
.radio-card-meta {
    margin-block-start: var(--space-2);
}

.radio-card-meta-free,
.radio-card-meta [data-delivery-fee-label] {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: var(--color-success-soft);
    color: var(--color-success);
    border-radius: var(--radius-md);
    font-size: var(--font-size-helper);
    font-weight: var(--weight-bold);
}

/* ----- Conditional delivery fields (below the card, on page bg) ----- */
.checkout-delivery-fields {
    margin-block-start: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ----- Bank transfer details (inside the payment card) ----- */
.bank-details-card {
    margin-block-start: var(--space-3);
    padding: var(--space-4);
    background: var(--color-bank-soft);
    border: var(--border-width) solid var(--color-bank-accent);
    border-radius: var(--radius-md);
}

.bank-details-title {
    margin: 0 0 var(--space-3);
    font-size: var(--font-size-body);
    font-weight: var(--weight-semibold);
    color: var(--color-bank-accent);
}

.bank-details-list {
    margin: 0;
    padding: 0;
}

.bank-details-row {
    margin-block-end: var(--space-2);
    font-size: var(--font-size-body);
    color: var(--color-text);
}

.bank-details-row dt {
    display: inline;
    margin: 0;
    font-weight: var(--weight-bold);
    color: var(--color-bank-accent);
}

.bank-details-row dt::after {
    content: ":\00a0";
}

.bank-details-row dd {
    display: inline;
    margin: 0;
}

/* RIB row (last): number, then the Copy button on its own line. */
.bank-details-row--rib dd {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

.bank-rib-value {
    font-family: ui-monospace, "Courier New", monospace;
    word-break: break-all;
}

.bank-rib-copy {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bank-button);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-md);
    color: var(--color-bank-accent);
    font-size: var(--font-size-helper);
    font-weight: var(--weight-semibold);
    cursor: pointer;
}

.bank-rib-copy:hover {
    border-color: var(--color-bank-accent);
}

.bank-details-info {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    font-size: var(--font-size-helper);
    color: var(--color-text-muted);
}

.bank-details-info-icon {
    flex: none;
    width: 14px;
    height: 14px;
    margin-block-start: 0.1em;
    color: var(--color-text-muted);
}

@media (min-width: 768px) {
    .bank-details-info-icon {
        width: 16px;
        height: 16px;
    }
}

/* ----- Order summary (white card; reuses the cart summary look) ----- */
.checkout-summary {
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.checkout-summary-loading {
    margin: 0;
    padding-block: var(--space-3);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
}

/* ----- Place order ----- */
.checkout-submit-row {
    margin-block-start: var(--space-5);
    text-align: center;
}

.checkout-place-order {
    width: 100%;
}

.checkout-place-order:not(:disabled) {
    --action-3d-depth: 0.25rem;
    border: var(--border-width) solid var(--color-action-border);
    box-shadow: 0 var(--action-3d-depth) 0 var(--color-action-border);
}

.checkout-place-order:not(:disabled)::before {
    display: none;
}

.checkout-place-order:not(:disabled):active {
    box-shadow: none;
}

.checkout-secure {
    margin: var(--space-3) 0 var(--space-2);
    font-size: var(--font-size-helper);
    color: var(--color-text-muted);
}

.checkout-tos-implicit {
    margin: 0;
    font-size: var(--font-size-helper);
    color: var(--color-text-muted);
    line-height: var(--line-height-base);
}

/* ----- Error banner ----- */
.checkout-errors-banner {
    margin-block-end: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-danger-soft);
    border: var(--border-width) solid var(--color-danger);
    border-radius: var(--radius-md);
    color: var(--color-danger);
    font-size: var(--font-size-body);
}

.checkout-errors-banner-link {
    margin-inline-start: var(--space-2);
    color: var(--color-danger);
    font-weight: var(--weight-semibold);
    text-decoration: underline;
}

/* Summary item lines (checkout-only; the totals rows reuse .cart-summary-*). */
.checkout-summary-items {
    list-style: none;
    margin: 0 0 var(--space-2);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.checkout-summary-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: var(--font-size-body);
    color: var(--color-text);
}

.checkout-summary-item-title {
    min-width: 0;
}

.checkout-summary-item-variant {
    color: var(--color-text-muted);
    font-size: var(--font-size-helper);
}

.checkout-summary-item-qty {
    color: var(--color-text-muted);
}

.checkout-summary-item-total {
    flex: none;
    font-weight: var(--weight-semibold);
    white-space: nowrap;
}

/* Promo discount + free delivery shown in success green. */
.checkout-summary .cart-summary-row-promo .cart-summary-row-value,
.checkout-summary .cart-summary-row-value.is-free {
    color: var(--color-success);
    font-weight: var(--weight-semibold);
}

/* =====================================================
 * Thank You / order confirmation (§3.10)
 * Centered receipt column. Reuses base buttons, the bank
 * box, the cart/checkout summary rows, and a shared timeline.
 * ===================================================== */

.thank-you-page {
    padding-block: var(--space-5) var(--space-7);
}

/* Single white frame holding all confirmation content (Figma). */
.thank-you-card {
    max-width: 40rem;
    margin-inline: auto;
    padding: var(--space-7) var(--space-5);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
}

/* ----- Status hero ----- */
.thank-you-hero {
    margin-block-end: var(--space-5);
    text-align: center;
}

/* Inner green circle 50px + light-green halo out to 80px (Figma mobile). */
.thank-you-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.125rem;
    height: 3.125rem;
    margin-block-end: var(--space-4);
    background: var(--color-action);
    color: var(--color-text-on-dark);
    border-radius: var(--radius-pill);
    box-shadow: 0 0 0 0.9375rem var(--color-success-soft);
}

.thank-you-hero-icon svg {
    width: 1.625rem;
    height: 1.625rem;
}

.thank-you-hero-title {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-price-lg);
    font-weight: var(--weight-bold);
    color: var(--color-text);
}

.thank-you-hero-subtitle {
    margin: 0 0 var(--space-6);
    font-size: var(--font-size-body);
    color: var(--color-text-muted);
}

/* Order-number plate — full-width pale-blue box, centered. */
.thank-you-order-number {
    padding: var(--space-3) var(--space-4);
    background: color-mix(in srgb, var(--color-brand) 5%, transparent);
    border-radius: var(--radius-md);
    text-align: center;
}

.thank-you-order-number-label {
    display: block;
    margin-block-end: var(--space-1);
    font-size: var(--font-size-helper);
    color: var(--color-text-muted);
}

.thank-you-order-number-value {
    display: block;
    font-size: var(--font-size-price-lg);
    font-weight: var(--weight-bold);
    color: var(--color-primary);
}

/* ----- Bank block (variants C, D) ----- */
.thank-you-bank {
    margin-block-end: var(--space-4);
}

/* Bank box rows: Figma shows a two-column table (label left / value right)
   with dividers — overrides the inline checkout layout in this context only. */
.thank-you-bank .bank-details-card {
    margin-block-start: 0;
}

.thank-you-bank .bank-details-title {
    margin: 0 0 var(--space-3);
    padding-block-end: var(--space-3);
    border-block-end: var(--border-width) solid var(--color-bank-accent);
    font-size: var(--font-size-body);
}

.thank-you-bank .bank-details-list {
    display: flex;
    flex-direction: column;
}

.thank-you-bank .bank-details-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin: 0;
    padding-block: var(--space-3);
    border-block-end: var(--border-width) solid var(--color-bank-accent);
}

.thank-you-bank .bank-details-row:first-child {
    padding-block-start: 0;
}

.thank-you-bank .bank-details-row:last-child {
    padding-block-end: 0;
    border-block-end: none;
}

.thank-you-bank .bank-details-row dt {
    display: block;
}

.thank-you-bank .bank-details-row dt::after {
    content: none;
}

.thank-you-bank .bank-details-row dd {
    display: block;
    text-align: end;
    font-weight: var(--weight-semibold);
}

/* RIB row keeps the value + Copy button stacked (right-aligned here). */
.thank-you-bank .bank-details-row--rib dd {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
}

.thank-you-bank-instructions {
    margin: var(--space-4) 0 var(--space-3);
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
    line-height: var(--line-height-base);
}

.thank-you-bank-soft-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding: var(--space-3);
    background: var(--color-warning-soft);
    border: var(--border-width) solid var(--color-warning-border);
    border-radius: var(--radius-sm);
    color: var(--color-warning);
    font-size: var(--font-size-helper);
    line-height: var(--line-height-base);
}

.thank-you-bank-soft-warning svg {
    flex: none;
    width: 1rem;
    height: 1rem;
    margin-block-start: 0.1em;
}

.thank-you-whatsapp-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    min-height: var(--control-height);
    padding: var(--space-2) var(--space-4);
    background: var(--color-whatsapp);
    color: var(--color-text-on-dark);
    border-radius: var(--radius-md);
    font-size: var(--font-size-button);
    font-weight: var(--weight-semibold);
    text-decoration: none;
}

.thank-you-whatsapp-button:hover {
    background: var(--color-success);
}

.thank-you-whatsapp-button svg {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
}

/* ----- Panels (grey header strip + white body) ----- */
.ty-panel {
    margin-block-end: var(--space-4);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.ty-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg);
    border-block-end: var(--border-width) solid var(--color-border);
}

.ty-panel-title {
    margin: 0;
    font-size: var(--font-size-body);
    font-weight: var(--weight-bold);
    color: var(--color-text);
}

.ty-panel-meta {
    font-size: var(--font-size-helper);
    color: var(--color-text-muted);
}

.ty-panel-body {
    padding: var(--space-4);
}

/* ----- Order-details rows ----- */
.ty-detail-list {
    display: flex;
    flex-direction: column;
}

.ty-detail-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-3);
    border-block-end: var(--border-width) solid var(--color-border);
    font-size: var(--font-size-body);
}

.ty-detail-row:first-child {
    padding-block-start: 0;
}

.ty-detail-row:last-child {
    padding-block-end: 0;
    border-block-end: none;
}

.ty-detail-label {
    flex: none;
    color: var(--color-text-muted);
}

.ty-detail-value {
    text-align: end;
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.ty-detail-row--note {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
}

.ty-detail-note {
    margin: 0;
    padding: var(--space-3);
    background: var(--color-bg);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-style: italic;
    font-weight: var(--weight-regular);
    text-align: start;
}

.ty-payment {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.ty-payment img,
.ty-payment svg {
    flex: none;
    width: 1rem;
    height: 1rem;
    color: var(--color-text-secondary);
}

@media (min-width: 768px) {

    .ty-payment img,
    .ty-payment svg {
        width: 1.1875rem;
        height: 1.1875rem;
    }
}

/* ----- Order-summary rows (reuse checkout/cart summary classes) ----- */
.ty-panel .checkout-summary-item-title {
    flex: 1;
}

.ty-panel .checkout-summary-item-variant {
    display: block;
    margin-block-start: 0.1rem;
}

.ty-panel .checkout-summary-item-qty {
    margin-inline-end: var(--space-1);
    font-weight: var(--weight-regular);
}

.ty-panel .cart-summary-row-value.is-free {
    color: var(--color-success);
    font-weight: var(--weight-semibold);
}

.ty-panel .cart-summary-row-value.ty-summary-fee {
    color: var(--color-primary);
    font-weight: var(--weight-semibold);
}

/* ----- Shared timeline (also used by Order Tracking, §3.11) ----- */
.order-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.order-timeline-step {
    position: relative;
    display: flex;
    gap: var(--space-3);
    padding-block-end: var(--space-5);
}

.order-timeline-step:last-child {
    padding-block-end: 0;
}

/* Dashed vertical connector to the next marker (gradient, not border-dashed). */
.order-timeline-step:not(:last-child)::before {
    content: '';
    position: absolute;
    inset-block-start: 2.25rem;
    inset-block-end: 0;
    inset-inline-start: calc(2.25rem / 2 - 1px);
    width: 2px;
    background-image: linear-gradient(var(--color-border) 50%, transparent 50%);
    background-size: 2px 10px;
    background-repeat: repeat-y;
}

.order-timeline-marker {
    position: relative;
    z-index: 1;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-body);
    font-weight: var(--weight-bold);
    background: var(--color-bg);
    color: var(--color-text-muted);
}

.order-timeline-step.is-current .order-timeline-marker,
.order-timeline-step.is-done .order-timeline-marker {
    background: var(--color-success-soft);
    color: var(--color-success);
    box-shadow: inset 0 0 0 var(--border-width) var(--color-success);
}

.order-timeline-step.is-future .order-timeline-marker {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    box-shadow: inset 0 0 0 var(--border-width) var(--color-primary);
}

.order-timeline-marker svg {
    width: 1rem;
    height: 1rem;
}

.order-timeline-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-block-start: 0.4rem;
}

.order-timeline-title {
    font-size: var(--font-size-body);
    font-weight: var(--weight-bold);
    color: var(--color-text);
}

.order-timeline-desc {
    font-size: var(--font-size-helper);
    color: var(--color-text-muted);
    line-height: var(--line-height-base);
}

/* ----- CTAs ----- */
.thank-you-ctas {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-block-start: 0;
}

.thank-you-cta {
    width: 100%;
}

/* ----- Not found ----- */
.thank-you-not-found {
    max-width: 30rem;
    margin-inline: auto;
    padding-block: var(--space-8) var(--space-7);
}

.thank-you-not-found-card {
    padding: var(--space-6) var(--space-5);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    text-align: center;
}

.thank-you-not-found-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-block-end: var(--space-4);
    background: var(--color-danger-soft);
    color: var(--color-danger);
    border-radius: var(--radius-pill);
    font-size: 1.5rem;
}

.thank-you-not-found-title {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-h2);
    font-weight: var(--weight-bold);
    color: var(--color-text);
}

.thank-you-not-found-body {
    margin: 0 0 var(--space-5);
    font-size: var(--font-size-body);
    color: var(--color-text-muted);
}

.thank-you-not-found-cta {
    display: inline-flex;
}

/* =====================================================
 * Order Tracking (§3.11)
 * Lookup form on every state; results / not-found append a
 * sub-panel. Reuses the shared timeline (--status skin),
 * base .form-input + .btn-primary, and the .ty-panel card.
 * ===================================================== */

.order-tracking-page {
    padding-block: var(--space-4) var(--space-7);
}

/* Centered column shared by the back link, header, and card. */
.order-tracking-inner {
    max-width: 40rem;
    margin-inline: auto;
}

/* ----- Header: pin + title + divider ----- */
.order-tracking-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-block: var(--space-3) var(--space-5);
    padding-block-end: var(--space-3);
    border-block-end: var(--border-width) solid var(--color-border);
}

.order-tracking-header-icon {
    flex: none;
    display: inline-flex;
    color: var(--color-brand);
}

.order-tracking-header-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.order-tracking-title {
    margin: 0;
    font-size: var(--font-size-section-title);
    font-weight: var(--weight-bold);
    color: var(--color-brand);
    line-height: var(--line-height-tight);
}

/* ----- White card ----- */
.order-tracking-card {
    padding: var(--space-5);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
}

/* ----- Lookup form ----- */
.order-tracking-label {
    display: block;
    margin-block-end: var(--space-2);
    font-size: var(--font-size-h2);
    font-weight: var(--weight-bold);
    color: var(--color-text);
}

.order-tracking-input {
    width: 100%;
}

.order-tracking-hint {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
    font-size: var(--font-size-form-hint);
    color: var(--color-text-muted);
    line-height: var(--line-height-base);
}

.order-tracking-hint-icon {
    flex: none;
    width: 1rem;
    height: 1rem;
    margin-block-start: 0.05em;
}

.order-tracking-error {
    margin: var(--space-2) 0 0;
    font-size: var(--font-size-form-hint);
    color: var(--color-danger);
}

.order-tracking-submit {
    width: 100%;
    margin-block-start: var(--space-4);
}

/* ----- Divider between form and result ----- */
.order-tracking-divider {
    height: var(--border-width);
    margin-block: var(--space-5);
    background: var(--color-border);
}

/* ----- Result sub-panel (reuses .ty-panel + .ty-panel-head) ----- */
.order-tracking-result.ty-panel {
    margin-block-end: 0;
}

.order-tracking-result-number {
    font-size: var(--font-size-body);
    font-weight: var(--weight-bold);
    color: var(--color-primary);
}

.order-tracking-result-initials {
    font-size: var(--font-size-body);
    color: var(--color-text-muted);
}

/* ----- Status header (icon + title + subtitle) ----- */
.order-tracking-status {
    text-align: center;
}

.order-tracking-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-block-end: var(--space-3);
    border-radius: var(--radius-pill);
}

.order-tracking-status-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.order-tracking-status-icon--progress {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.order-tracking-status-icon--done {
    background: var(--color-success-soft);
    color: var(--color-success);
}

.order-tracking-status-title {
    margin: 0 0 var(--space-1);
    font-size: var(--font-size-h2);
    font-weight: var(--weight-bold);
    color: var(--color-text);
}

.order-tracking-status-subtitle {
    margin: 0;
    font-size: var(--font-size-body);
    color: var(--color-text-muted);
}

.order-tracking-status-divider {
    height: var(--border-width);
    margin-block: var(--space-4);
    background: var(--color-border);
}

/* ----- Timeline status skin: done = green check, current = blue dot,
         future = grey empty; done connector solid green ----- */
.order-timeline--status .order-timeline-step.is-done .order-timeline-marker {
    background: var(--color-success-soft);
    color: var(--color-success);
    box-shadow: inset 0 0 0 var(--border-width) var(--color-success);
}

.order-timeline--status .order-timeline-step.is-current .order-timeline-marker {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    box-shadow: inset 0 0 0 var(--border-width) var(--color-primary);
}

.order-timeline--status .order-timeline-step.is-current .order-timeline-marker::after {
    content: '';
    width: 0.625rem;
    height: 0.625rem;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
}

.order-timeline--status .order-timeline-step.is-future .order-timeline-marker {
    background: var(--color-bg);
    color: transparent;
    box-shadow: inset 0 0 0 var(--border-width) var(--color-border);
}

.order-timeline--status .order-timeline-step.is-done:not(:last-child)::before {
    background-image: none;
    background-color: var(--color-success);
}

/* ----- Cancelled / Returned banner (inside the result body) ----- */
.order-tracking-banner {
    padding: var(--space-4);
    border: var(--border-width) solid;
    border-radius: var(--radius-md);
    text-align: center;
}

.order-tracking-banner--cancelled {
    background: var(--color-danger-soft);
    border-color: var(--color-danger);
}

.order-tracking-banner--returned {
    background: var(--color-warning-soft);
    border-color: var(--color-warning-border);
}

.order-tracking-banner-title {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-h2);
    font-weight: var(--weight-bold);
}

.order-tracking-banner--cancelled .order-tracking-banner-title {
    color: var(--color-danger);
}

.order-tracking-banner--returned .order-tracking-banner-title {
    color: var(--color-warning);
}

.order-tracking-banner-text {
    margin: 0 0 var(--space-3);
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
    line-height: var(--line-height-base);
}

.order-tracking-banner-link {
    font-size: var(--font-size-body);
    font-weight: var(--weight-semibold);
    color: var(--color-brand);
    text-decoration: underline;
}

/* ----- Not found sub-panel ----- */
.order-tracking-notfound {
    padding: var(--space-5) var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    text-align: center;
}

.order-tracking-notfound-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-block-end: var(--space-3);
    background: var(--color-danger-soft);
    color: var(--color-danger);
    border-radius: var(--radius-pill);
}

.order-tracking-notfound-icon svg {
    width: 1.75rem;
    height: 1.75rem;
}

.order-tracking-notfound-title {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-h2);
    font-weight: var(--weight-bold);
    color: var(--color-text);
}

.order-tracking-notfound-text {
    margin: 0;
    font-size: var(--font-size-body);
    color: var(--color-text-muted);
    line-height: var(--line-height-base);
}

/* =====================================================
 * Review Submission Page (§3.16) — form + state cards.
 * Centered narrow column like Order Tracking; reuses base
 * form controls, .btn-primary, and design tokens.
 * ===================================================== */

.review-page {
    padding-block: var(--space-4) var(--space-7);
}

.review-inner {
    max-width: 40rem;
    margin-inline: auto;
}

/* ---------- Form header ---------- */
.review-header {
    margin-block-end: var(--space-5);
}

.review-title {
    margin-block-end: var(--space-2);
    font-size: var(--font-size-section-title);
    font-weight: var(--weight-bold);
    color: var(--color-brand);
}

.review-intro {
    font-size: var(--font-size-body);
    color: var(--color-text-muted);
}

/* ---------- White form card ---------- */
.review-card {
    padding: var(--space-5);
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
}

/* Form-level error banner (the '_form' key) */
.review-errors {
    margin-block-end: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-danger-soft);
    border: var(--border-width) solid var(--color-danger);
    border-radius: var(--radius-md);
    color: var(--color-danger);
    font-size: var(--font-size-body);
}

/* Single-product line (only one reviewable item) */
.review-single-product {
    margin-block-end: var(--space-4);
    font-size: var(--font-size-body);
    color: var(--color-text);
}

/* ---------- Star rating input (native radios, no JS) ----------
 * Rendered 5→1 in the DOM: the checked star + every later sibling
 * (lower values, visually to its left) fill via the ~ selector.
 */
.review-stars-input {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: var(--space-1);
    font-size: 2rem;
    line-height: 1;
}

.review-stars-input input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.review-stars-input__star {
    color: var(--color-border);
    cursor: pointer;
    transition: color 0.12s ease;
}

.review-stars-input input[type="radio"]:checked~.review-stars-input__star,
.review-stars-input__star:hover,
.review-stars-input__star:hover~.review-stars-input__star {
    color: var(--color-star);
}

.review-stars-input input[type="radio"]:focus+.review-stars-input__star {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.review-submit {
    width: 100%;
    margin-block-start: var(--space-2);
}

/* ---------- State cards (submitted / already / not-eligible / invalid) ---------- */
.review-state {
    padding: var(--space-7) var(--space-5);
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: center;
}

.review-state__icon {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-price-lg);
    font-weight: var(--weight-bold);
    line-height: 1;
}

.review-state--success .review-state__icon {
    background-color: var(--color-success-soft);
    color: var(--color-success);
}

.review-state--info .review-state__icon {
    background-color: color-mix(in srgb, var(--color-brand) 8%, var(--color-surface));
    color: var(--color-brand);
}

.review-state--error .review-state__icon {
    background-color: var(--color-danger-soft);
    color: var(--color-danger);
}

.review-state__title {
    margin-block-end: var(--space-2);
    font-size: var(--font-size-h2);
    font-weight: var(--weight-bold);
    color: var(--color-text);
}

.review-state__text {
    max-width: 28rem;
    margin: 0 auto var(--space-5);
    font-size: var(--font-size-body);
    color: var(--color-text-muted);
}

.review-state .btn-primary {
    display: inline-flex;
    width: auto;
}

.review-state__link {
    display: inline-block;
    font-size: var(--font-size-body);
    font-weight: var(--weight-semibold);
    color: var(--color-brand);
    text-decoration: none;
}

.review-state__link:hover {
    text-decoration: underline;
}

/* ---------- Desktop ---------- */
@media (min-width: 768px) {
    .review-card {
        padding: var(--space-6);
    }

    .review-stars-input {
        font-size: 2.25rem;
    }

    .review-state {
        padding: var(--space-7) var(--space-6);
    }
}

/* =====================================================
 * Static content pages — shared shell (§3.12 About,
 * §3.13 Customer Service, §3.14 Legal): centered column,
 * page title, sectioned data (icon header + white card,
 * mirroring checkout's section pattern), standalone cards.
 * ===================================================== */

.content-page {
    padding-block: var(--space-4) var(--space-7);
}

.content-inner {
    max-width: 40rem;
    margin-inline: auto;
}

.content-title {
    margin-block: var(--space-3) var(--space-5);
    font-size: var(--font-size-section-title);
    font-weight: var(--weight-bold);
    color: var(--color-brand);
}

/* Standalone card (legal body, about welcome) */
.content-card {
    margin-block-end: var(--space-5);
    padding: var(--space-5);
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
}

.content-card:last-child {
    margin-block-end: 0;
}

/* Data section: icon header on the page bg + white card body
   (same pattern as checkout's .checkout-section). */
.content-section {
    margin-block-end: var(--space-5);
}

.content-section:last-child {
    margin-block-end: 0;
}

.content-section .content-card {
    margin-block-end: 0;
}

.content-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-end: var(--space-4);
    padding-block-end: var(--space-3);
    border-block-end: var(--border-width) solid var(--color-border);
    font-size: var(--font-size-section-title);
    font-weight: var(--weight-bold);
    color: var(--color-brand);
    line-height: var(--line-height-tight);
}

.content-section-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-brand);
    color: var(--color-text-on-dark);
}

.content-section-icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* ---------- About: hero + welcome ---------- */
.about-hero {
    margin-block-end: var(--space-5);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--color-bg);
}

.about-hero img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 22.5rem;
    object-fit: cover;
}

.about-welcome-heading {
    margin-block-end: var(--space-3);
    font-size: var(--font-size-section-title);
    font-weight: var(--weight-bold);
    color: var(--color-text);
}

.about-description {
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

/* ---------- About: store-details list (label/value rows) ---------- */
.about-details-list {
    margin: 0;
}

.about-details-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    padding-block: var(--space-3);
    border-block-end: var(--border-width) solid var(--color-bg);
    font-size: var(--font-size-body);
}

.about-details-row:last-child {
    border-block-end: none;
}

.about-details-row dt {
    flex-shrink: 0;
    margin: 0;
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
}

.about-details-row dd {
    margin: 0;
    text-align: end;
    color: var(--color-text);
    word-break: break-word;
}

.about-details-link {
    color: var(--color-brand);
    text-decoration: none;
}

.about-details-link:hover {
    text-decoration: underline;
}

.about-details-link-whatsapp {
    color: var(--color-whatsapp);
}

/* ---------- About: working-hours table ---------- */
.about-hours-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-body);
}

.about-hours-row {
    border-block-end: var(--border-width) solid var(--color-bg);
}

.about-hours-row:last-child {
    border-block-end: none;
}

.about-hours-day {
    width: 35%;
    padding-block: var(--space-3);
    text-align: start;
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
}

.about-hours-value {
    padding-block: var(--space-3);
    text-align: end;
    color: var(--color-text);
}

.about-hours-row.is-closed .about-hours-day,
.about-hours-closed {
    color: var(--color-text-placeholder);
}

.about-hours-closed {
    font-style: italic;
}

/* ---------- Customer Service: contact rows ---------- */
.customer-service-contact-intro {
    margin-block: 0 var(--space-4);
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
}

.customer-service-contact-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.customer-service-contact-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-3);
    border-block-end: var(--border-width) solid var(--color-bg);
    font-size: var(--font-size-body);
}

.customer-service-contact-item:last-child {
    border-block-end: none;
}

.customer-service-contact-label {
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
}

.customer-service-contact-value {
    text-align: end;
    color: var(--color-brand);
    text-decoration: none;
    word-break: break-all;
}

.customer-service-contact-value:hover {
    text-decoration: underline;
}

.customer-service-contact-whatsapp {
    color: var(--color-whatsapp);
}

/* ---------- Customer Service: FAQ accordion ---------- */
.customer-service-faq-empty {
    margin: 0;
    padding-block: var(--space-3);
    text-align: center;
    color: var(--color-text-muted);
}

.customer-service-faq-accordion {
    display: flex;
    flex-direction: column;
}

.customer-service-faq-item {
    border-block-end: var(--border-width) solid var(--color-bg);
}

.customer-service-faq-item:last-child {
    border-block-end: none;
}

.customer-service-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-4);
    cursor: pointer;
    list-style: none;
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.customer-service-faq-question::-webkit-details-marker {
    display: none;
}

.customer-service-faq-question::marker {
    display: none;
}

.customer-service-faq-question:hover {
    color: var(--color-brand);
}

.customer-service-faq-question-text {
    flex: 1;
}

.customer-service-faq-toggle {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background-color: var(--color-bg);
    font-size: var(--font-size-body);
    line-height: 1;
    color: var(--color-text-muted);
}

.customer-service-faq-item[open] .customer-service-faq-toggle {
    background-color: var(--color-brand);
    color: var(--color-text-on-dark);
    font-size: 0;
}

.customer-service-faq-item[open] .customer-service-faq-toggle::before {
    content: '−';
    font-size: var(--font-size-body);
}

.customer-service-faq-answer {
    padding-block: 0 var(--space-4);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

/* ---------- Legal: rich-text body ---------- */
.legal-content {
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

.legal-content h2 {
    margin-block: var(--space-5) var(--space-2);
    font-size: var(--font-size-h2);
    font-weight: var(--weight-bold);
    color: var(--color-text);
}

.legal-content h2:first-child {
    margin-block-start: 0;
}

.legal-content p {
    margin-block: 0 var(--space-4);
}

.legal-content p:last-child {
    margin-block-end: 0;
}

.legal-content ul,
.legal-content ol {
    margin-block: 0 var(--space-4);
    padding-inline-start: var(--space-5);
}

.legal-content li {
    margin-block-end: var(--space-2);
}

.legal-content a {
    color: var(--color-brand);
    text-decoration: underline;
}

/* ---------- Desktop ---------- */
@media (min-width: 768px) {
    .content-card {
        padding: var(--space-6);
    }
}

/* =====================================================
 * 404 Not Found (§3.15) — centered card, grey halo icon,
 * brand-navy back-home CTA (Figma). Generic page for
 * unknown URLs + resource-not-found delegations.
 * ===================================================== */

.not-found-page {
    padding-block: var(--space-5) var(--space-7);
}

.not-found-card {
    max-width: 40rem;
    margin-inline: auto;
    padding: var(--space-7) var(--space-5);
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: center;
}

.not-found-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto var(--space-6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background-color: var(--color-text-placeholder);
    color: var(--color-text-on-dark);
    box-shadow: 0 0 0 1rem var(--color-bg);
}

.not-found-icon svg {
    width: 1.75rem;
    height: 1.75rem;
}

.not-found-heading {
    margin-block-end: var(--space-3);
    font-size: var(--font-size-price-lg);
    font-weight: var(--weight-bold);
    color: var(--color-text);
}

.not-found-text {
    max-width: 24rem;
    margin: 0 auto var(--space-6);
    font-size: var(--font-size-body);
    color: var(--color-text-muted);
    line-height: var(--line-height-base);
}

.not-found-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--control-height);
    padding-inline: var(--space-6);
    background-color: var(--color-brand);
    color: var(--color-text-on-dark);
    border-radius: var(--radius-md);
    font-size: var(--font-size-button);
    font-weight: var(--weight-bold);
    line-height: var(--line-height-tight);
    text-decoration: none;
    transition: background-color 0.12s ease;
}

.not-found-cta:hover {
    background-color: color-mix(in srgb, var(--color-brand) 88%, black);
}

@media (min-width: 768px) {
    .not-found-card {
        padding: var(--space-7) var(--space-6);
    }
}

/* ============================================================
   Empty-state — shared "nothing here" card.
   One pattern for every empty surface: cart empty (§3.8), search
   no-results (§3.3), listing filter-no-match + category-empty
   (§3.5.3). White card + centered illustration + heading + text +
   stacked actions. Illustration path is relative to this stylesheet,
   so it's install-subpath-independent.
   ============================================================ */
.empty-state {
    max-width: 40rem;
    margin-inline: auto;
    margin-block: var(--space-6);
    padding: var(--space-7) var(--space-5);
    text-align: center;
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
}

.empty-state-illustration {
    width: 12.5rem;
    height: 7.5rem;
    margin: 0 auto var(--space-4);
    background: url('../images/empty-state.svg') center / contain no-repeat;
}

.empty-state-title {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-price-lg);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    line-height: var(--line-height-tight);
}

.empty-state-text {
    max-width: 24rem;
    margin: 0 auto var(--space-5);
    font-size: var(--font-size-body);
    color: var(--color-text-muted);
    line-height: var(--line-height-base);
}

.empty-state-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.empty-state-actions>.btn-primary,
.empty-state-actions>.btn-secondary {
    width: 100%;
    max-width: 18rem;
}

/* Search no-results keeps its left-aligned "0 results for X" line
   above the centered content (PRD §3.3). */
.empty-state-eyebrow {
    margin: 0 0 var(--space-4);
    font-size: var(--font-size-body);
    color: var(--color-text-muted);
    text-align: start;
}

/* ============================================================
   Search results page (§3.3) — header only. The grid reuses
   .product-list + the locked product card, so nothing else here.
   Title matches the cart/category page-heading style (brand, bold).
   ============================================================ */
.search-results-page {
    padding-block-end: var(--space-7);
}

.search-results-header {
    margin-block: var(--space-4);
}

.search-results-title {
    margin: 0 0 var(--space-1);
    font-size: var(--font-size-section-title);
    font-weight: var(--weight-bold);
    color: var(--color-brand);
    line-height: var(--line-height-tight);
}

.search-results-count {
    margin: 0;
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
}

/* ============================================================
   Live search dropdown (§3.3) — the as-you-type panel under the
   search bar. Structure unchanged; values on the token system.
   Assumes the panel sits inside .search-bar (the relative wrapper),
   which the previous CSS already relied on — no markup change.
   ============================================================ */
.search-bar {
    position: relative;
}

.search-dropdown-results {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    z-index: 100;
    max-height: 30rem;
    overflow-y: auto;
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-block-start: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-dropdown);
}

.search-dropdown-results[hidden] {
    display: none;
}

.search-result-row {
    display: block;
    padding: var(--space-3) var(--space-4);
    color: var(--color-text);
    text-decoration: none;
    border-block-end: var(--border-width) solid var(--color-border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-row:last-child {
    border-block-end: none;
}

.search-result-row:hover,
.search-result-row:focus {
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
    outline: none;
}

.search-result-empty {
    padding: var(--space-4);
    font-size: var(--font-size-body);
    color: var(--color-text-muted);
    text-align: center;
}