/* ==========================================================================
   Aria theme — fresh, mobile-first storefront for any catalog

   Built the same way Voltage/Nexus were: the view layer is shared with the
   default theme except for the files this theme explicitly overrides
   (layout, home, product-card, category-card, + the new mobile-tab-bar
   component) — everything else (cart, checkout, PDP, collections, search,
   buy-now modal, cart drawer, filter bar, select-menu) renders default's
   markup verbatim, so this stylesheet is a COMPLETE, self-contained skin:
   every class default's blade files reference must be defined here too,
   including the exact `--enter/--enter-start/--enter-end/--leave` names
   Alpine's x-transition attributes call by string.

   Identity: paper-white ground, near-black ink, a single confident violet
   accent, generous soft rounding everywhere (cards, pills, buttons), and
   a mobile bottom tab bar that makes the storefront feel like a native
   app on a phone. Fonts are NOT theme-controlled — the layout always
   overwrites --font-heading/--font-body from Store Settings; this theme is
   drawn for a clean geometric sans (Inter / Plus Jakarta Sans / General
   Sans) on both roles.

   Admin-overridable tokens: --color-ink, --color-accent, --color-cta (the
   Theme options "Accent preset" gives quick presets for the same two
   without opening the color picker — see layout.blade.php).
   ========================================================================== */
:root {
    --color-bg: #fafaf9;
    --color-bg-alt: #f2f1ef;
    --color-ink: #15151b;
    --color-ink-soft: #6e6e78;
    --color-line: #e7e6e9;
    --color-accent: #6c5ce7; /* violet */
    --color-accent-ink: #ffffff;
    --color-cta: #15151b; /* near-black pill buttons — confident, works on any catalog */
    --color-cta-ink: #ffffff;
    --color-danger: #d33a4b;
    --color-gold: #ff5c7a; /* coral — testimonial stars, sparing highlight use */

    --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --font-heading: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

    --container-w: 1360px;
    --radius: 24px; /* cards, sections, panels */
    --control-radius: 16px; /* inputs, selects */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --shadow-soft: 0 1px 2px rgba(21, 21, 27, 0.04), 0 12px 28px rgba(21, 21, 27, 0.06);
    --shadow-pop: 0 8px 16px -6px rgba(21, 21, 27, 0.12), 0 24px 48px -12px rgba(21, 21, 27, 0.18);
}

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

/* The mobile tab bar reserves space at the bottom so it never covers the
   footer/CTA content — desktop never needs this padding. */
body.has-tab-bar { padding-bottom: 76px; }
@media (min-width: 900px) {
    body.has-tab-bar { padding-bottom: 0; }
}

a, button, input, select, textarea, summary, [tabindex] {
    outline-offset: 2px;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.btn:focus-visible { outline-offset: 3px; }

.eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 8px;
}

.announcement-bar {
    background: var(--color-ink);
    color: var(--color-bg);
    text-align: center;
    padding: 10px 16px;
    position: relative;
    overflow: hidden;
}
.announcement-bar__text {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
}
.announcement-bar[x-data] .announcement-bar__text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.announcement-bar[x-data] { min-height: 38px; }

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--color-ink);
    color: #fff;
    padding: 10px 16px;
    border-radius: 0 0 12px 0;
    z-index: 100;
}
.skip-link:focus { left: 0; top: 0; }

/* ==========================================================================
   Header — logo left, nav center, actions right (a conventional modern
   layout, unlike the boutique centered-logo pattern the default theme uses)
   ========================================================================== */
.site-header {
    border-bottom: 1px solid var(--color-line);
    position: sticky;
    top: 0;
    background: color-mix(in srgb, var(--color-bg) 92%, transparent);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    z-index: 40;
    box-shadow: 0 0 0 rgba(21, 21, 27, 0);
    transition: box-shadow .2s ease, padding .2s ease;
}
.site-header--scrolled { box-shadow: 0 2px 20px rgba(21, 21, 27, 0.06); }
.site-header__bar {
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    transition: padding .2s ease;
}
.site-header--scrolled .site-header__bar { padding-top: 10px; padding-bottom: 10px; }
@media (max-width: 600px) {
    .site-header__bar { padding: 12px 16px; gap: 12px; }
}
.site-header__logo {
    font-family: var(--font-heading);
    font-weight: 800;
    letter-spacing: -0.01em;
    font-size: 20px;
    order: 1;
}
.site-nav { display: flex; gap: 6px; order: 2; margin: 0 auto; }
.site-nav__item { position: relative; }
.site-nav__link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    padding: 9px 16px;
    border-radius: 999px;
    transition: background-color .15s ease, color .15s ease;
}
.site-nav__link:hover { background: var(--color-bg-alt); }
.site-nav__chevron { transition: transform .18s var(--ease); }
.site-nav__chevron.is-open { transform: rotate(180deg); }
.site-nav__dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: var(--control-radius);
    min-width: 220px;
    padding: 8px;
    box-shadow: var(--shadow-pop);
}
.site-nav__dropdown-link {
    display: block;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    border-radius: calc(var(--control-radius) - 4px);
    transition: background-color .12s ease, color .12s ease;
}
.site-nav__dropdown-link:hover,
.site-nav__dropdown-link:focus-visible {
    background: var(--color-bg-alt);
    color: var(--color-accent);
}

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

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

.lang-switch { position: relative; }
.lang-switch__toggle { width: auto; padding: 0 12px; font-size: 12px; font-weight: 700; border-radius: 999px; background: var(--color-bg-alt); }
.lang-switch__dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: var(--control-radius);
    min-width: 140px;
    padding: 6px;
    box-shadow: var(--shadow-pop);
    z-index: 10;
}
.lang-switch__link { display: block; padding: 9px 12px; font-size: 13.5px; border-radius: calc(var(--control-radius) - 4px); transition: background-color .12s ease; }
.lang-switch__link:hover, .lang-switch__link:focus-visible { background: var(--color-bg-alt); }
.lang-switch__link.is-active { font-weight: 700; color: var(--color-accent); }

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

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

/* ==========================================================================
   Aria hero — kinetic headline (see theme.js), floating rounded image card
   ========================================================================== */
.aria-hero {
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 56px 24px 40px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: center;
}
@media (max-width: 900px) {
    .aria-hero { grid-template-columns: 1fr; padding: 32px 20px 28px; gap: 28px; }
}
.aria-hero__badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    color: var(--color-accent);
    font-size: 12.5px;
    font-weight: 700;
    margin-bottom: 20px;
}
.aria-hero__title {
    margin: 0 0 18px;
    font-family: var(--font-heading);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.02em;
}
.aria-hero__line { display: block; font-size: clamp(36px, 6vw, 66px); }
.aria-hero__line--accent { color: var(--color-accent); }
.aria-hero__text {
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-ink-soft);
    max-width: 480px;
    margin: 0 0 30px;
}
.aria-hero__actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.aria-hero__actions .btn { width: auto; padding-left: 32px; padding-right: 32px; }
.aria-hero__secondary-link {
    font-weight: 700;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--color-ink);
}
.aria-hero__media { position: relative; }
.aria-hero__media-card {
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: var(--hero-image-ratio, 4/3);
    box-shadow: var(--shadow-pop);
}
.aria-hero__media-card img { width: 100%; height: 100%; object-fit: cover; }
.aria-hero__stats-badge {
    position: absolute;
    bottom: -16px;
    inset-inline-start: -16px;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    padding: 12px 20px;
    font-weight: 700;
    font-size: 13px;
    box-shadow: var(--shadow-soft);
}
@media (max-width: 600px) {
    .aria-hero__stats-badge { inset-inline-start: 12px; bottom: -12px; font-size: 11.5px; padding: 9px 16px; }
}

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

/* ==========================================================================
   Aria shelf — horizontal snap-scroll rail shared by category tiles and
   product cards (home page); .product-scroll (upsell-row.blade.php, not
   overridden by this theme) gets identical behaviour via the same rule.
   ========================================================================== */
.aria-shelf, .product-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
}
.aria-shelf::-webkit-scrollbar, .product-scroll::-webkit-scrollbar { display: none; }
@media (max-width: 600px) {
    .aria-shelf, .product-scroll { gap: 12px; }
}

/* ==========================================================================
   Category tiles (home only)
   ========================================================================== */
.aria-tile { flex: 0 0 auto; width: 152px; scroll-snap-align: start; text-align: center; }
.aria-tile__image {
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-bg-alt);
    margin-bottom: 10px;
    box-shadow: var(--shadow-soft);
}
.aria-tile__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.aria-tile:hover .aria-tile__image img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
    .aria-tile__image img { transition: none; }
    .aria-tile:hover .aria-tile__image img { transform: none; }
}
.aria-tile__label { display: block; font-weight: 700; font-size: 14px; }
@media (max-width: 600px) {
    .aria-tile { width: 124px; }
}

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

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

/* ==========================================================================
   Aria spotlight — the "feature banner" replacement: a clean two-column
   callout card instead of a full-bleed accent-colored split panel.
   ========================================================================== */
.aria-spotlight {
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 8px 24px 44px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: stretch;
}
@media (max-width: 900px) {
    .aria-spotlight { grid-template-columns: 1fr; }
}
.aria-spotlight__image {
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: var(--feature-image-ratio, 4/3);
    background: var(--color-bg-alt);
}
.aria-spotlight__image img { width: 100%; height: 100%; object-fit: cover; }
.aria-spotlight__card {
    background: var(--color-bg-alt);
    border-radius: var(--radius);
    padding: 32px;
    display: flex;
    flex-direction: column;
}
.aria-spotlight__header { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0 18px; }
.aria-spotlight__name { font-family: var(--font-heading); font-weight: 700; font-size: 17px; }
.aria-spotlight__price { font-family: var(--font-heading); font-weight: 800; font-size: 17px; color: var(--color-accent); }
.aria-spotlight__media {
    flex: 1;
    background: #fff;
    border-radius: calc(var(--radius) - 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    margin-bottom: 20px;
    min-height: 200px;
}
.aria-spotlight__media img { max-height: 220px; width: auto; object-fit: contain; }
.aria-spotlight .btn { max-width: 280px; }

/* ==========================================================================
   Product cards (aria-card) + PLP grid — product-card.blade.php is
   overridden by this theme, so ".product-card" itself is never rendered;
   .product-grid stays as the PLP layout container (collections/search/
   brand pages, not overridden) wrapping the new .aria-card markup.
   ========================================================================== */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 20px;
}
@media (max-width: 900px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
}
.aria-shelf .aria-card, .product-scroll .aria-card { flex: 0 0 auto; width: 230px; scroll-snap-align: start; }
@media (max-width: 600px) {
    .aria-shelf .aria-card, .product-scroll .aria-card { width: 168px; }
}

.aria-card { display: block; }
.aria-card__media-wrap { position: relative; }
.aria-card__media {
    display: block;
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-bg-alt);
    box-shadow: var(--shadow-soft);
    transition: box-shadow .25s var(--ease);
}
.aria-card__media-wrap:hover .aria-card__media,
.aria-card__media-wrap:focus-within .aria-card__media { box-shadow: var(--shadow-pop); }
.aria-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.aria-card__media-wrap:hover .aria-card__media img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
    .aria-card__media img, .aria-card__media { transition: none; }
    .aria-card__media-wrap:hover .aria-card__media img { transform: none; }
}
.aria-card__badge {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    background: var(--color-ink);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 999px;
}
.aria-card__quick-add {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease);
    pointer-events: none;
}
.aria-card__media-wrap:hover .aria-card__quick-add,
.aria-card__media-wrap:focus-within .aria-card__quick-add { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* translateY(6px)/translateY(0) are both non-"none" transforms, so this
   overlay is permanently its own stacking context — an open variant
   dropdown (.select-menu__panel) inside it then gets trapped under the
   next row's card. Dropping the transform (position stays fixed via
   left/right/bottom) removes that trap while the dropdown is open. */
.aria-card__quick-add:has(.select-menu.is-open) { transform: none; opacity: 1; pointer-events: auto; }
@media (hover: none) {
    /* Touch devices have no real hover — keep quick-add permanently visible
       and in normal flow instead of an overlay nobody could reveal. */
    .aria-card__quick-add { position: static; opacity: 1; transform: none; pointer-events: auto; margin-top: 10px; }
}
.aria-card__quick-add .product-actions { gap: 6px; }
.aria-card__quick-add .product-actions__buttons { gap: 6px; }
.aria-card__quick-add .btn { min-height: 38px; padding: 7px 12px; font-size: 12.5px; border-radius: 999px; }
.aria-card__quick-add .btn__subtitle { display: none; }
.aria-card__quick-add select { border-radius: 999px; }
.aria-card__body { padding-top: 12px; }
.aria-card__name {
    font-family: var(--font-heading);
    font-size: 14.5px;
    font-weight: 600;
    margin: 0 0 4px;
}
.aria-card__name a { transition: color .12s ease; }
.aria-card__name a:hover { color: var(--color-accent); }
.aria-card__price { font-size: 13.5px; color: var(--color-ink-soft); margin: 0; font-weight: 600; }

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

/* ==========================================================================
   Buttons — bold pills, sentence case (not the shouty uppercase editorial
   look) — reads calmer and more "app-like".
   ========================================================================== */
.btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 46px;
    width: 100%;
    padding: 12px 20px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    cursor: pointer;
    border: 1px solid var(--color-cta);
    border-radius: 999px;
    transition: opacity .15s ease, transform .1s ease, background-color .15s ease, color .15s ease;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:not(:disabled):active { transform: translateY(1px) scale(0.99); }
.btn--solid { background: var(--color-cta); color: var(--color-cta-ink); }
.btn--solid:hover { opacity: 0.88; }
.btn__subtitle {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0;
    opacity: 0.8;
}
.btn--outline { background: #fff; color: var(--color-ink); border-color: var(--color-line); flex-direction: row; }
.btn--outline:hover { background: var(--color-ink); color: #fff; border-color: var(--color-ink); }

/* ==========================================================================
   Brand grid (/marques index page) + brand card — also reused, retuned,
   inside .aria-marquee below for the homepage.
   ========================================================================== */
.brand-grid {
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 0 24px 44px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
@media (max-width: 900px) {
    .brand-grid { grid-template-columns: repeat(2, 1fr); }
}
.brand-card { display: block; }
.brand-card__image {
    aspect-ratio: 3/2;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-bg-alt);
}
.brand-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.brand-card:hover .brand-card__image img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
    .brand-card__image img { transition: none; }
    .brand-card:hover .brand-card__image img { transform: none; }
}
.brand-card__label {
    display: block;
    margin-top: 10px;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
}

/* ==========================================================================
   Aria marquee — auto-scrolling brand strip (homepage only)
   ========================================================================== */
.aria-brands { padding-bottom: 8px; }
.aria-marquee { overflow: hidden; }
.aria-marquee__track {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: aria-marquee-scroll 34s linear infinite;
}
@keyframes aria-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
.aria-marquee:hover .aria-marquee__track,
.aria-marquee:focus-within .aria-marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .aria-marquee__track { animation: none; overflow-x: auto; }
}
[dir="rtl"] .aria-marquee__track { animation-direction: reverse; }
.aria-marquee .brand-card { flex: 0 0 auto; width: 172px; }
.aria-marquee .brand-card__label {
    border-radius: 999px;
    background: var(--color-bg-alt);
    padding: 8px 6px;
    font-size: 12.5px;
    margin-top: 8px;
}

/* ==========================================================================
   Ticker marquee (text strip)
   ========================================================================== */
.ticker {
    background: var(--color-ink);
    color: var(--color-bg);
    overflow: hidden;
    padding: 22px 0;
    white-space: nowrap;
}
.ticker__track {
    display: inline-flex;
    animation: ticker-scroll 24s linear infinite;
}
.ticker__item {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 30px;
    letter-spacing: -0.01em;
    padding: 0 32px;
}
@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .ticker__track { animation: none; }
}
[dir="rtl"] .ticker__track { animation-direction: reverse; }

/* ==========================================================================
   CTA banner
   ========================================================================== */
.cta-banner {
    text-align: center;
    padding: 68px 24px;
    background: var(--color-bg-alt);
}
.cta-banner h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -0.01em;
    margin: 0 0 20px;
}
.cta-banner p { display: none; }
.cta-banner .btn {
    display: inline-flex;
    width: auto;
    padding-left: 32px;
    padding-right: 32px;
}

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

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

.collection-hero { background: var(--color-bg-alt); padding: 40px 24px; }
.collection-hero .section { padding: 0; }
.collection-hero .breadcrumbs { display: block; color: var(--color-ink-soft); font-size: 13px; }
.collection-hero .breadcrumbs a { text-decoration: underline; }

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

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

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

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

/* ==========================================================================
   PDP
   ========================================================================== */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; max-width: var(--container-w); margin: 0 auto; padding: 32px 24px; }
@media (max-width: 900px) {
    .pdp { grid-template-columns: 1fr; gap: 24px; padding: 20px 16px; }
}
.product-gallery { display: flex; flex-direction: column; }
@media (min-width: 900px) {
    .product-gallery { position: sticky; top: 96px; align-self: start; }
}
.product-gallery__main {
    aspect-ratio: 1;
    background: var(--color-bg-alt);
    border-radius: var(--radius);
    overflow: hidden;
}
.product-gallery__main img { width: 100%; height: 100%; object-fit: contain; }
.product-gallery__thumbs { display: flex; gap: 10px; margin-top: 12px; }
.product-gallery__thumb {
    width: 60px;
    height: 60px;
    padding: 4px;
    border: 1px solid var(--color-line);
    border-radius: var(--control-radius);
    background: #fff;
    cursor: pointer;
    overflow: hidden;
}
.product-gallery__thumb.is-active { border-color: var(--color-accent); border-width: 2px; }
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }

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

.pdp__brand-about {
    margin-top: 24px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--color-bg-alt);
    border-radius: var(--radius);
}
.pdp__brand-about-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
    background: #fff;
    border-radius: var(--control-radius);
    flex-shrink: 0;
}
.pdp__brand-about-name {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 16px;
    margin: 2px 0 8px;
}
.pdp__brand-about-desc {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--color-ink-soft);
    margin: 0 0 8px;
}
@media (max-width: 600px) {
    .pdp__brand-about { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ==========================================================================
   PDP — mobile sticky buy bar
   ========================================================================== */
.pdp-sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 160;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--color-bg) 94%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--color-line);
    box-shadow: 0 -4px 20px rgba(21, 21, 27, 0.08);
}
.pdp-sticky-bar__thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: var(--control-radius);
    flex-shrink: 0;
    background: #fff;
}
.pdp-sticky-bar__info { flex: 1; min-width: 0; }
.pdp-sticky-bar__name {
    font-size: 12.5px;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pdp-sticky-bar__price { font-size: 12.5px; color: var(--color-ink-soft); margin: 0; }
.pdp-sticky-bar__cta { width: auto; flex-shrink: 0; min-height: 44px; padding: 0 20px; }
.pdp-sticky-bar--enter,
.pdp-sticky-bar--leave { transition: transform .2s var(--ease), opacity .2s var(--ease); }
.pdp-sticky-bar--enter-start { transform: translateY(100%); opacity: 0; }
.pdp-sticky-bar--enter-end { transform: translateY(0); opacity: 1; }
@media (min-width: 900px) {
    .pdp-sticky-bar { display: none; }
}
/* This theme's mobile bottom tab bar owns the same screen edge as the PDP
   sticky buy bar — hide the tab bar there so they never stack. */
body:has(.pdp-sticky-bar) .aria-tabbar { display: none; }

.brand-tags {
    background: var(--color-bg-alt);
    padding: 32px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
}
.brand-tags a {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 22px;
}
.brand-tags sup { font-size: 13px; font-weight: 600; margin-left: 2px; color: var(--color-ink-soft); }

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

.cart__summary, .checkout__summary {
    border-radius: var(--radius);
    background: var(--color-bg-alt);
    padding: 26px;
}
/* The checkout cards sat flat while every other card on this theme (product,
   spotlight, drawer) carries --shadow-soft — made the whole flow feel
   noticeably plainer than the rest of Aria. */
.checkout__summary, .checkout-items, .checkout__form { box-shadow: var(--shadow-soft); }
.cart__summary h2, .checkout__summary h2 {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 14px;
    margin: 0 0 16px;
}
.cart__summary-row, .checkout__summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 14.5px;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid var(--color-line);
}
.cart__summary-row:first-child, .checkout__summary-row:first-child { padding-top: 0; margin-top: 0; border-top: none; }
.checkout__summary-row--total {
    font-weight: 700;
    font-size: 18px;
    font-family: var(--font-heading);
    margin-top: 14px;
    padding: 14px 16px 12px;
    border-radius: var(--control-radius);
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.checkout__summary-row--total span:last-child { color: var(--color-accent); }
.cart__summary-note { font-size: 12.5px; color: var(--color-ink-soft); margin: 8px 0 20px; }
.checkout__summary-line { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--color-ink-soft); margin-bottom: 10px; }
.cart__checkout, .checkout__form .btn, .form-row input, .form-row select, .form-row textarea { border-radius: var(--control-radius); }
.cart__checkout { border-radius: 999px; }

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

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

/* ==========================================================================
   Checkout form — two fields per row, on every viewport. See the default
   theme's identical block for the full rationale; kept in sync with it.
   ========================================================================== */
.checkout__form {
    display: grid;
    /* minmax(0, 1fr), not a bare 1fr — a plain 1fr track won't shrink below
       its content's intrinsic width, so a wide input/select would blow the
       column (and the whole page) out past the viewport on narrow screens. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 16px;
    /* Same boxed-card treatment .checkout__summary already had — the form
       used to just blend into the page background. */
    border-radius: var(--radius);
    background: var(--color-bg-alt);
    padding: 26px;
}
/* Grid items default to min-width:auto, which — independently of the
   minmax(0, …) tracks above — lets an item's own intrinsic content (the
   wilaya <select>'s widest option, in particular) refuse to shrink and
   overflow its cell anyway. min-width:0 removes that floor; width:100%
   on the actual input/select still fills whatever space is left. */
.checkout__form > * { min-width: 0; }
.checkout__form .form-row:has(textarea),
.checkout__form .form-row:has(.delivery-type-choice),
.checkout__form .form-row:has(#delivery_stop_desk_id) {
    grid-column: 1 / -1;
}
.checkout__form:not(:has(#delivery_provider_id)) .form-row:has(#shipping_wilaya_code) {
    grid-column: 1 / -1;
}
.checkout__form .form-row { margin-bottom: 12px; }

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

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

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

.form-row { margin-bottom: 16px; }
.form-row label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    margin-bottom: 6px;
}

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

.search-form { display: flex; gap: 10px; max-width: 480px; margin-top: 16px; }
.search-form .btn { width: auto; padding: 0 24px; }
.search-form input { border-radius: 999px; }

.cart-line__qty input {
    width: 56px;
    min-height: 40px;
    border: 1px solid var(--color-line);
    border-radius: var(--control-radius);
    padding: 8px;
    font-size: 16px;
    text-align: center;
    transition: border-color .12s ease;
}
.form-row input, .form-row select, .form-row textarea {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--color-line);
    border-radius: var(--control-radius);
    padding: 12px 16px;
    font-size: 16px;
    background: #fff;
    font-family: inherit;
    transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.form-row input:hover, .form-row select:hover, .form-row textarea:hover { border-color: var(--color-ink-soft); }
.form-row textarea { min-height: 96px; border-radius: var(--radius); }
.delivery-type-choice { display: flex; flex-direction: column; gap: 10px; }
.delivery-type-choice__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid var(--color-line);
    border-radius: var(--control-radius);
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    background: #fff;
}
.delivery-type-choice__option input { width: auto; min-height: auto; margin-right: 8px; accent-color: var(--color-accent); }
.delivery-type-choice__option:has(input:checked) { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
.cart-line__qty input:focus,
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 16%, transparent);
    outline: none;
}
.form-row input.has-error,
.form-row select.has-error,
.form-row textarea.has-error {
    border-color: var(--color-danger);
}
.form-row input.has-error:focus,
.form-row select.has-error:focus,
.form-row textarea.has-error:focus {
    box-shadow: 0 0 0 3px rgba(211, 58, 75, 0.14);
}
.form-row select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2315151b' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 11px 8px;
    padding-right: 36px;
}
[dir="rtl"] .form-row select { background-position: left 14px center; padding-right: 16px; padding-left: 36px; }
.search-form input {
    flex: 1;
    min-height: 46px;
    border: 1px solid var(--color-line);
    padding: 10px 18px;
    font-size: 16px;
}

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

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

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

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

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

/* ==========================================================================
   Aria's mobile bottom tab bar — Home / Boutique / Panier / Contact.
   Positioned via theme.js (GSAP): the pill measures the active tab's real
   layout rect on load so it lines up exactly regardless of label length or
   RTL direction.
   ========================================================================== */
.aria-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 8px 6px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--color-bg) 90%, transparent);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-top: 1px solid var(--color-line);
    box-shadow: 0 -8px 24px rgba(21, 21, 27, 0.06);
}
@media (min-width: 900px) {
    .aria-tabbar { display: none; }
}
.aria-tabbar__pill {
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    height: 42px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    transform: translate(0, -50%);
    transition: transform .4s var(--ease), width .4s var(--ease);
    will-change: transform, width;
    pointer-events: none;
}
.aria-tabbar__item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 1;
    min-height: 46px;
    padding: 6px 4px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-ink-soft);
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 600;
    transition: color .2s ease;
}
.aria-tabbar__item.is-active,
.aria-tabbar__item:hover { color: var(--color-ink); }
.aria-tabbar__item svg { transition: transform .25s var(--ease); }
.aria-tabbar__item.is-active svg { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
    .aria-tabbar__item svg, .aria-tabbar__pill { transition: none; }
}
.aria-tabbar__cart-icon { position: relative; display: inline-flex; }
.aria-tabbar__badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--color-accent);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
[dir="rtl"] .aria-tabbar__badge { right: auto; left: -8px; }

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

/* ==========================================================================
   RTL (Arabic, etc.) — <html dir="rtl"> is set from the active locale in
   layout.blade.php. `direction` is an inherited CSS property that the `dir`
   attribute sets automatically, so flex/grid layouts already mirror on
   their own; everything below is the handful of *physical* left/right
   values (absolute/fixed positioning, drawer slide direction) that don't,
   plus the two marquee animations' direction. .aria-card__badge and
   .aria-hero__stats-badge already use logical inset-inline-* properties
   above, so they need no override here.
   ========================================================================== */
[dir="rtl"] .skip-link { left: auto; right: -999px; border-radius: 0 0 0 12px; }
[dir="rtl"] .skip-link:focus { left: auto; right: 0; }

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

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

[dir="rtl"] .cart-drawer__panel {
    right: auto;
    left: 0;
    border-radius: 0 var(--radius) var(--radius) 0;
    box-shadow: 8px 0 32px rgba(21, 21, 27, 0.14);
}
[dir="rtl"] .cart-drawer__panel--enter-start { transform: translateX(-100%); }

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

/* ==========================================================================
   Select menu — the enhanced dropdown that replaces the native <select>
   chrome (see resources/js/select-menu.js). The native control stays in the
   DOM as the source of truth; everything below styles the listbox built
   around it.
   ========================================================================== */
.select-menu {
    position: relative;
    width: 100%;
}

.select-menu__native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
}

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

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

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

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

.select-menu.has-error .select-menu__trigger { border-color: var(--color-danger); }
.select-menu.has-error .select-menu__trigger:focus-visible { box-shadow: 0 0 0 3px rgba(211, 58, 75, 0.14); }

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

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

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

.select-menu__option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: calc(var(--control-radius) - 3px);
    font-size: 15px;
    line-height: 1.3;
    color: var(--color-ink);
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}
.select-menu__option + .select-menu__option { margin-top: 2px; }
.select-menu__option:hover,
.select-menu__option.is-active { background: var(--color-bg-alt); }
.select-menu__option.is-selected {
    font-weight: 600;
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 9%, transparent);
}
.select-menu__option.is-placeholder { color: var(--color-ink-soft); }
.select-menu__option.is-disabled {
    opacity: .45;
    cursor: not-allowed;
    background: none;
}

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

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

.filter-bar__sort-menu { width: auto; min-width: 240px; }
.filter-bar__sort-menu .select-menu__trigger {
    font-size: inherit;
    border-radius: 999px;
}
.product-actions__variant-menu .select-menu__trigger,
.aria-card__quick-add .select-menu__trigger {
    min-height: 44px;
    padding: 8px 14px;
    font-size: 14px;
    border-radius: 999px;
}

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

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