/* ============================================================
   ALHAYA — MAIN STYLESHEET · "Monochrome"
   Clean black & white editorial: white background, black type,
   black buttons, Poppins. All colours/fonts/spacing come from
   variables.css (and can be changed in Admin -> Appearance).
   Animations are transform/opacity only and respect
   prefers-reduced-motion.
   ============================================================ */

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: .01em;
    color: var(--ink-soft);
    background: var(--noir);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
/* Read by screen readers and search engines, not shown. Used for the home
   page's h1 when the banner artwork carries no text of its own. */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }

/* ---------- MOBILE FIT (no sideways scrolling) ----------
   A form control carries an intrinsic minimum width of roughly 20 characters
   (the HTML `size` default). As a flex/grid child its `min-width: auto` refuses
   to shrink past that, so one coupon box or checkout field makes its whole row
   wider than a phone screen and the page picks up a horizontal scrollbar —
   the visitor then has to swipe right or pinch out to read anything.
   Let controls shrink; any explicit width/min-width set later still wins. */
input, select, textarea, button { min-width: 0; max-width: 100%; }
/* Same reason one level up: a grid/flex *item* is min-width:auto too, so it
   inherits the un-shrinkable width of whatever control sits inside it. */
.form-grid > *, .cart-layout > *, .shop-layout > *, .product-layout > *,
.account-layout > *, .cart-item > *, .sum-row > *, .coupon-row > *,
.footer-grid > *, .newsletter form > * { min-width: 0; }
/* Long unbroken strings — order numbers, tracking IDs, e-mail addresses —
   wrap instead of widening the page. */
body { overflow-wrap: break-word; }

/* Mobile browsers (notably iOS Safari) auto-zoom the whole page when a focused
   input's font-size is under 16px, leaving the page looking "cut off" until
   the visitor manually zooms back out. Various forms inherit different
   font-sizes from their section (checkout fields, coupon boxes, newsletter,
   etc. all measured under 16px) — force a safe floor everywhere at once
   rather than patching each one's local font-size individually. */
@media (max-width: 767px) {
    input, select, textarea { font-size: 16px !important; }
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; color: var(--ivory); line-height: 1.2; margin: 0 0 var(--sp-4); letter-spacing: -.01em; }
p { margin: 0 0 var(--sp-4); }
:focus-visible { outline: 2px solid var(--ivory); outline-offset: 3px; }
::selection { background: var(--ivory); color: var(--noir); }
::placeholder { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
}

/* ---------- LAYOUT UTILITIES ---------- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { margin-block: var(--section-gap); }
.grid { display: grid; gap: var(--sp-5); }
.text-center { text-align: center; }

/* section headings */
.section-head { text-align: center; max-width: 680px; margin: 0 auto var(--sp-6); }
.section-head .kicker, .kicker {
    display: inline-flex; align-items: center; gap: 14px;
    font-size: var(--text-xs); letter-spacing: .34em; text-transform: uppercase;
    color: var(--champagne); margin-bottom: var(--sp-3); font-weight: 400;
}
.section-head .kicker::before, .section-head .kicker::after {
    content: ''; width: 30px; height: 1px; background: var(--champagne); opacity: .35;
}
.section-head h2 { font-size: var(--text-3xl); font-weight: 600; margin-bottom: var(--sp-2); }
.section-head p { color: var(--muted); margin: 0; font-size: var(--text-sm); }

/* ---------- SCROLL-REVEAL ----------
   Hidden ONLY when <html class="js"> (set in header.php); content
   always shows if JS is disabled or fails. */
.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); will-change: opacity, transform; }
.reveal.in-view { opacity: 1 !important; transform: none !important; }
.js .reveal-stagger > * { opacity: 0; transform: translateY(30px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal-stagger.in-view > * { opacity: 1 !important; transform: none !important; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: 90ms; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: 180ms; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: 270ms; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: 360ms; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: 450ms; }
@media (prefers-reduced-motion: reduce) {
    .js .reveal, .js .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
}
body { animation: pageIn .5s var(--ease); }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- BUTTONS ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    min-height: var(--tap-target); padding: .75rem 2.1rem;
    border-radius: var(--radius-sm);
    font-weight: 500; letter-spacing: .16em; text-transform: uppercase; font-size: var(--text-xs);
    background: var(--crimson); color: var(--btn-text, #fff);
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
                background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
    position: relative; overflow: hidden;
}
.btn:hover { background: var(--crimson-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-gold { background: var(--champagne); color: var(--btn-gold-text, #fff); }
.btn-gold:hover { background: var(--champagne-2); }
.btn-outline { background: transparent; color: var(--ivory); box-shadow: inset 0 0 0 1.5px var(--ivory); }
.btn-outline:hover { background: var(--ivory); color: var(--noir); }
.btn-light { background: rgba(255,255,255,.95); color: #111; }
.btn-light:hover { background: #111; color: #fff; }
.btn-block { width: 100%; }
.btn-sm { min-height: 38px; padding: .45rem 1.3rem; font-size: 0.65rem; }
.btn[disabled] { opacity: .45; pointer-events: none; }
/* 2.1rem of padding either side is a lot of a 320px screen — trim it so long
   labels ("Proceed to Checkout") stay on one line instead of forcing the row wide */
@media (max-width: 400px) { .btn { padding-inline: 1.25rem; } }
.btn .spinner { display: none; }
.btn.loading .spinner { display: inline-block; }
.btn.loading .btn-label { opacity: .6; }
.spinner {
    width: 15px; height: 15px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- ANNOUNCEMENT BAR ---------- */
.announce {
    position: relative; z-index: 60;
    background: var(--announce-bg); color: var(--announce-text);
    font-size: var(--text-xs); letter-spacing: .16em; text-transform: uppercase;
    min-height: var(--announce-h);
    display: flex; align-items: center; justify-content: center;
    padding-inline: 48px; text-align: center;
}
.announce-track { position: relative; height: 1.4em; overflow: hidden; width: 100%; max-width: 760px; }
.announce-msg {
    position: absolute; inset: 0; opacity: 0; transform: translateY(100%);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.announce-msg.active { opacity: 1; transform: none; }
.announce-close {
    position: absolute; right: var(--sp-2); top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; display: grid; place-items: center; color: inherit; opacity: .6;
}
.announce-close:hover { opacity: 1; }
/* Mobile: two of the three live messages were being cut off with an ellipsis
   on a 375px phone — 319px and 298px of text inside a 279px track. Most of the
   overflow was tracking, not words: letter-spacing .16em adds ~74px across a
   40-character line. Tighter tracking, a slightly smaller face and narrower
   side padding give the track 295px for ~258px of text, so a message can grow
   roughly 40% longer than the current one before it clips again. */
@media (max-width: 600px) {
    .announce { padding-inline: 40px; font-size: .68rem; letter-spacing: .06em; }
    .announce-close { right: 2px; }
}

/* ---------- HEADER ---------- */
.header {
    position: sticky; top: 0; z-index: 50;
    background: var(--header-bg);
    color: var(--header-text);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.header.scrolled { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
.header-inner { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--header-h); }
.logo {
    font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: inherit;
    letter-spacing: .14em; white-space: nowrap; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 8px;
}
.logo em { font-style: normal; font-weight: 300; letter-spacing: .1em; }
/* Fallback sizing only. The live values come from Admin -> Appearance -> Logo,
   which injects --logo-size for desktop and mobile (and switches to a full
   wordmark shape) in the <head> after this file — see theme_style_block(). */
.logo { --logo-size: 44px; }
.logo-img { width: var(--logo-size); height: var(--logo-size); border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.logo { display: inline-flex; align-items: center; gap: var(--sp-2); }
.nav { display: none; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 0; }
.icon-btn {
    position: relative; width: var(--tap-target); height: var(--tap-target);
    display: grid; place-items: center; border-radius: 50%; color: inherit;
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.icon-btn:hover { opacity: .6; }
.icon-btn:active { transform: scale(.9); }
.cart-count {
    position: absolute; top: 3px; right: 1px;
    min-width: 17px; height: 17px; padding-inline: 4px;
    background: var(--crimson); color: var(--btn-text, #fff); border-radius: var(--radius-full);
    font-size: 10px; font-weight: 600; display: grid; place-items: center;
    transition: transform var(--dur-fast) var(--ease-spring);
}
.cart-count.bump { animation: bump .5s var(--ease-spring); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.55); } 100% { transform: scale(1); } }

/* very small phones: keep burger + logo + core icons on one line */
@media (max-width: 400px) {
    .header-inner { gap: 4px; }
    .logo { font-size: 1rem; letter-spacing: .08em; } /* logo image size comes from Appearance */
    .icon-btn { width: 38px; height: 38px; }
    .hide-xs { display: none; }
}

@media (min-width: 1024px) {
    .nav { display: flex; gap: var(--sp-5); margin-inline: auto; align-items: center; }
    .nav > a, .nav-mega > a {
        position: relative; display: inline-block; padding: 1.1rem 0;
        font-size: var(--text-xs); letter-spacing: .22em; text-transform: uppercase;
        color: inherit; opacity: .8;
    }
    .nav > a::after, .nav-mega > a::after {
        content: ''; position: absolute; left: 0; right: 100%; bottom: 12px; height: 1.5px;
        background: currentColor; transition: right var(--dur) var(--ease);
    }
    .nav > a:hover, .nav-mega > a:hover { opacity: 1; }
    .nav > a:hover::after, .nav-mega > a:hover::after { right: 0; }
    .header-actions { margin-left: 0; }
    .burger { display: none; }
}

/* ---------- MEGA MENU (desktop "Shop" dropdown) ---------- */
.nav-mega { position: static; }
.mega {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--plum); color: var(--ink-soft);
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
    pointer-events: none; z-index: 55;
}
.nav-mega:hover .mega, .nav-mega:focus-within .mega {
    opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s;
}
.mega-inner {
    max-width: var(--container); margin-inline: auto; padding: var(--sp-6) var(--gutter);
    display: grid; grid-template-columns: 2.2fr 1fr; gap: var(--sp-7);
}
.mega-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.mega-cat { text-align: center; }
.mega-cat img {
    /* top-anchored like every other category image — see .cat-circle */
    width: 92px; height: 92px; border-radius: 50%; object-fit: cover; object-position: top center;
    margin: 0 auto var(--sp-2); border: 1px solid var(--line);
    transition: transform var(--dur) var(--ease), border-color var(--dur);
}
.mega-cat:hover img { transform: scale(1.07); border-color: var(--ivory); }
.mega-cat span { font-size: var(--text-sm); color: var(--ivory); font-weight: 400; }
.mega-title { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-3); }
.mega-products { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mega-products a { font-size: var(--text-sm); color: var(--ink-soft); transition: color var(--dur-fast), padding-left var(--dur-fast) var(--ease); }
.mega-products a:hover { color: var(--ivory); padding-left: 6px; }
@media (max-width: 1023px) { .mega { display: none; } }

/* ---------- MOBILE MENU ---------- */
.mobile-menu { position: fixed; inset: 0; z-index: 90; visibility: hidden; pointer-events: none; }
.mobile-menu .backdrop {
    position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0;
    transition: opacity var(--dur) var(--ease);
}
.mobile-menu .panel {
    position: absolute; top: 0; bottom: 0; left: 0; width: min(86vw, 380px);
    background: var(--noir); border-right: 1px solid var(--line);
    padding: var(--sp-5);
    transform: translateX(-102%); transition: transform var(--dur) var(--ease);
    overflow-y: auto; display: flex; flex-direction: column;
}
.mobile-menu.open { visibility: visible; pointer-events: auto; }
.mobile-menu.open .backdrop { opacity: 1; }
.mobile-menu.open .panel { transform: none; }
.mobile-menu nav a {
    display: flex; align-items: center; min-height: 50px;
    font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); color: var(--ivory);
    border-bottom: 1px solid var(--line);
    transition: color var(--dur-fast), padding-left var(--dur-fast) var(--ease);
}
.mobile-menu nav a:hover { color: var(--muted); padding-left: 8px; }
.mobile-menu nav .menu-sub a {
    min-height: 40px; font-family: var(--font-body); font-weight: 300;
    font-size: var(--text-sm); color: var(--ink-soft); border-bottom: 0; padding-left: 14px;
}
.mobile-menu .menu-sub { border-bottom: 1px solid var(--line); padding-bottom: var(--sp-2); }
.mobile-menu .menu-foot { margin-top: auto; padding-top: var(--sp-5); display: grid; gap: var(--sp-3); }

/* ---------- SEARCH OVERLAY ---------- */
.search-bar { position: relative; max-width: 720px; margin: 0 auto; }
.search-overlay {
    position: fixed; inset: 0; z-index: 95; background: rgba(255,255,255,.98);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    padding: var(--sp-6) var(--gutter);
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.search-overlay.open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.search-input {
    width: 100%; min-height: 56px; padding: .8rem 3.2rem .8rem .2rem;
    border: 0; border-bottom: 1.5px solid var(--line); border-radius: 0;
    background: transparent; color: var(--ivory);
    font-family: var(--font-display); font-size: var(--text-xl); font-weight: 300;
}
.search-input:focus { border-bottom-color: var(--ivory); outline: none; }
.search-results {
    margin-top: var(--sp-4); background: var(--plum); border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden; max-height: 60vh; overflow-y: auto;
    box-shadow: var(--shadow);
}
.search-item { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); transition: background var(--dur-fast); }
.search-item + .search-item { border-top: 1px solid var(--line); }
.search-item:hover { background: var(--plum-2); }
.search-item img { width: 46px; height: 58px; object-fit: contain; background: var(--plum-2); border-radius: var(--radius-sm); }
.search-item .s-name { color: var(--ivory); font-weight: 400; }
.search-item .s-price { margin-left: auto; color: var(--ivory); font-weight: 500; white-space: nowrap; font-size: var(--text-sm); }
.search-close { position: absolute; top: var(--sp-4); right: var(--gutter); }

/* ---------- FOOTER ---------- */
.footer {
    background: var(--footer-bg); color: var(--footer-text);
    margin-top: var(--section-gap); font-size: var(--text-sm);
}
.footer a:hover { color: var(--footer-heading); }
.footer-grid { display: grid; gap: var(--sp-6); padding-block: var(--sp-7); }
/* The footer column headings are h3, not h4: the page's last section heading
   is an h2, so an h4 here skipped a level and broke the document outline.
   Both are matched so the styling survives either. */
.footer h3, .footer h4 {
    color: var(--footer-heading); font-size: var(--text-xs); letter-spacing: .3em; text-transform: uppercase;
    font-family: var(--font-body); font-weight: 500;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer .logo { color: var(--footer-heading); }
.footer-bottom {
    border-top: 1px solid rgba(128,128,128,.3); padding-block: var(--sp-4);
    display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: space-between;
    font-size: var(--text-xs); color: var(--footer-muted); letter-spacing: .04em;
}
.socials { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.socials a {
    width: 40px; height: 40px; display: grid; place-items: center;
    border: 1px solid rgba(128,128,128,.4); border-radius: 50%;
    transition: border-color var(--dur-fast), transform var(--dur-fast), color var(--dur-fast);
}
.socials a:hover { border-color: var(--footer-heading); color: var(--footer-heading); transform: translateY(-2px); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }

/* ---------- HERO SLIDER ---------- */
.hero { position: relative; overflow: hidden; background: var(--noir-2); touch-action: pan-y; }
.hero-track { display: flex; transition: transform .8s var(--ease); will-change: transform; }
.hero-slide { position: relative; flex: 0 0 100%; min-height: clamp(440px, 72svh, 660px); display: grid; }
.hero-slide img.bg, .hero-slide picture.bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-slide picture.bg { position: absolute; inset: 0; }
/* The scrim darkens the side the words sit on, and only that side.
   In every banner the model stands left of centre with the courtyard opening
   out to her right, so the type goes right and the shading with it - the
   previous left-weighted gradient was dimming the model herself. */
.hero-slide::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(260deg,
        rgba(0,0,0,.60) 6%, rgba(0,0,0,.34) 38%, rgba(0,0,0,.06) 62%, transparent 78%);
}
/* A phone shows the portrait crop, where there is no empty side to move into -
   the figure fills the frame. So the words go to the foot of the picture and
   the shading is a bottom band, leaving her head and shoulders clear. */
@media (max-width: 767px) {
    .hero-slide::after {
        background: linear-gradient(180deg,
            transparent 34%, rgba(0,0,0,.42) 58%, rgba(0,0,0,.72) 100%);
    }
}
/* An image-only slide (no heading/subtext/button in Admin -> Home Content) has
   nothing to keep legible, so drop the darkening scrim and show the artwork as
   uploaded — nothing cropped away.
   The banner is taken out of absolute positioning and left in normal flow so the
   slide is exactly as tall as the picture. Keeping the fixed min-height and
   letterboxing with `contain` left empty bands above and below the artwork. */
.hero-slide.no-text::after { content: none; }
.hero-slide.no-text { min-height: 0; }
.hero-slide.no-text picture.bg { position: static; display: block; }
.hero-slide.no-text img.bg, .hero-slide.no-text picture.bg img {
    position: static; width: 100%; height: auto; object-fit: contain;
}
.hero-link { position: absolute; inset: 0; z-index: 2; }
/* Right half on desktop, so the type never lands on the model. */
.hero-content {
    position: relative; z-index: 2; align-self: center; justify-self: end;
    padding: var(--sp-6) var(--gutter); max-width: 520px;
    margin-right: max(calc((100vw - var(--container)) / 2), 0px);
    color: #fff;
}
/* On a phone it drops to the foot of the frame instead, full width. */
@media (max-width: 767px) {
    .hero-content {
        align-self: end; justify-self: stretch;
        margin-right: 0; max-width: none;
        padding-bottom: var(--sp-7);
    }
}
.hero-content .kicker { margin-bottom: var(--sp-3); color: #fff; opacity: .85; }
.hero-content .kicker::before { content: ''; width: 30px; height: 1px; background: #fff; opacity: .5; }
/* The first slide's heading is an h1 and the rest are h2s, for document
   structure. They must look identical, so both are styled through .hero-h. */
.hero-content h2, .hero-content .hero-h { font-size: var(--text-hero); color: #fff; margin-bottom: var(--sp-3); font-weight: 600; }
.hero-content p { font-size: var(--text-lg); font-weight: 300; color: rgba(255,255,255,.85); max-width: 48ch; margin-bottom: var(--sp-5); }
.hero-content .btn-gold { background: #fff; color: #111; }
.hero-content .btn-gold:hover { background: #e8e8e8; }
.hero-slide .hero-content > * { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.hero-slide.active .hero-content > * { opacity: 1; transform: none; }
.hero-slide.active .hero-content > *:nth-child(2) { transition-delay: .14s; }
.hero-slide.active .hero-content > *:nth-child(3) { transition-delay: .28s; }
.hero-slide.active .hero-content > *:nth-child(4) { transition-delay: .42s; }

.hero-arrows { position: absolute; z-index: 5; inset-inline: var(--sp-4); top: 50%; display: flex; justify-content: space-between; transform: translateY(-50%); pointer-events: none; }
.hero-arrow {
    pointer-events: auto; width: var(--tap-target); height: var(--tap-target);
    border-radius: 50%; background: rgba(0,0,0,.35); color: #fff;
    border: 1px solid rgba(255,255,255,.4);
    display: grid; place-items: center;
    transition: all var(--dur-fast) var(--ease);
}
.hero-arrow:hover { background: #fff; color: #111; transform: scale(1.06); }
.hero-dots { position: absolute; z-index: 5; bottom: var(--sp-5); left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.hero-dot { width: 28px; height: 24px; display: grid; place-items: center; }
.hero-dot::after { content: ''; width: 18px; height: 2px; background: rgba(255,255,255,.4); transition: background var(--dur-fast), transform var(--dur-fast) var(--ease); }
.hero-dot.active::after { background: #fff; transform: scaleX(1.4); }

/* ---------- PRODUCT CARD ---------- */
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-3); }
@media (min-width: 640px)  { .product-grid { gap: var(--sp-6) var(--sp-5); } }
@media (min-width: 768px)  { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

.card { position: relative; }
.card-media {
    position: relative; overflow: hidden; border-radius: var(--radius);
    aspect-ratio: 4 / 5; background: var(--plum-2);
    border: 1px solid var(--line);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover .card-media { border-color: var(--ivory); box-shadow: var(--shadow-sm); }
.card-media img { width: 100%; height: 100%; object-fit: contain; transition: transform .9s var(--ease), opacity .5s var(--ease); }
.card:hover .card-media img { transform: scale(1.05); }

/* Second photo on hover. It sits exactly over the first (both letterboxed the
   same way by object-fit: contain inside the 4/5 box) and is click-through, so
   the anchor underneath still takes the click.

   NOT gated on `(hover: hover)`. That gate is why phones showed nothing: it is
   the correct defensive choice in the abstract, but it is not what a Shopify
   product card does, and it is not what was asked for. Plain `:hover` here
   means a touch browser applies it on finger-down exactly as it does on a
   desktop pointer — and main.js clears it again on finger-up, which is the one
   thing native touch `:hover` gets wrong (it sticks until you tap elsewhere). */
.card-media .card-img-hover { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.card.has-hover-img:hover .card-img-main  { opacity: 0; }
.card.has-hover-img:hover .card-img-hover { opacity: 1; }

/* Set by the touch handler in main.js: finger down shows the second photo,
   finger up returns to the first. Same declarations as :hover above, so the
   two agree whichever one the device happens to use. */
.card.has-hover-img.show-alt .card-img-main  { opacity: 0; }
.card.has-hover-img.show-alt .card-img-hover { opacity: 1; }

/* Swipe affordance — phones only, and only on cards that actually have a second
   photo. Deliberately tiny and at the very bottom edge: the badges and the
   quick-add bar were removed from mobile cards precisely because they covered
   the garment, and two 5px dots must not undo that. */
/* Gated on `hover: none`, NOT on width. These dots exist to advertise touch
   behaviour, so a narrow desktop window — which has a mouse and uses the hover
   swap instead — must not show them, and a wide touch tablet must. */
.card-dots { display: none; }
@media (hover: none) {
    .card.has-hover-img .card-dots {
        display: flex; justify-content: center; gap: 5px;
        position: absolute; left: 0; right: 0; bottom: 6px; z-index: 2;
        pointer-events: none;
    }
    .card-dots span {
        width: 5px; height: 5px; border-radius: 50%;
        background: rgba(17, 17, 17, .22); transition: background .2s var(--ease);
    }
    .card-dots span.on { background: rgba(17, 17, 17, .7); }
}
.card-badges { position: absolute; top: var(--sp-3); left: var(--sp-3); display: grid; gap: 6px; z-index: 2; }
.badge {
    font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
    padding: 4px 10px; border-radius: var(--radius-sm);
    background: rgba(255,255,255,.92); color: #111; border: 1px solid rgba(0,0,0,.08);
}
.badge.sale { background: #111; border-color: #111; color: #fff; }
.badge.new { background: #fff; border-color: #111; color: #111; }
.badge.low { background: #fff; border-color: rgba(0,0,0,.08); color: var(--warning); }
.badge.out { background: rgba(120,120,120,.9); border-color: transparent; color: #fff; }
/* Card badges only — the product page keeps its full-size .badge.
   Two stacked badges were 94x59 over a 210x262 photo, roughly a fifth of the
   picture, and they sit exactly where the model's head and shoulders are. */
.card-badges { gap: 3px; }
/* Text stays readable at 10px; it is the black pill around it that shrinks —
   tight padding so the background hugs the digits instead of floating around
   them. The stock badge is hidden on cards: with it gone the grid no longer
   stretches the discount pill to match a wider neighbour, so it shrink-wraps. */
.card-badges .badge { font-size: 10px; letter-spacing: .04em; padding: 2px 5px; border-radius: 3px; }
.card-badges .badge.low { display: none; }
.wish-btn {
    position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 2;
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,.9); color: #111;
    border: 1px solid rgba(0,0,0,.1);
    display: grid; place-items: center;
    transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast), color var(--dur-fast);
}
.wish-btn:hover { transform: scale(1.12); }
.wish-btn.active { background: #111; color: #fff; border-color: #111; }
.wish-btn.active svg { fill: #fff; }
.wish-btn.pop { animation: bump .45s var(--ease-spring); }
.card-add {
    position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); z-index: 2;
    opacity: 0; transform: translateY(10px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover .card-add, .card:focus-within .card-add { opacity: 1; transform: none; }
@media (hover: none) { .card-add { opacity: 1; transform: none; } }
.card-add .btn-light { border: 1px solid rgba(0,0,0,.12); }

/* DESKTOP: never cover the photo.
   The hover overlay sat across the bottom of the picture — which on an abaya
   is the hem and the flare, the part a customer is actually judging. The card
   already renders a second copy of the same button in normal flow (used on
   phones), so desktop uses that instead and the photo stays fully visible.
   Mobile behaviour below is unchanged. */
@media (min-width: 768px) {
    .card-add { display: none; }
    .card-add-mobile { display: block; }
}

/* Second copy of the Add to Cart / Select Options / Notify Me button, in normal
   flow below the price — mobile only (see the breakpoint below). */
.card-add-mobile { display: none; margin-top: var(--sp-2); }

/* Mobile grid: the discount badge, wishlist heart, compare button and quick-add
   bar all sit on top of the photo, and with no hover to hide them behind (see
   the `hover: none` rule above) they cover most of a card that is only ~165px
   wide on a phone. Below the tablet breakpoint leave the photo clear and move
   the button underneath the price. */
@media (max-width: 767px) {
    .card-badges, .wish-btn, .card-add { display: none; }
    .card-add-mobile { display: block; }
    /* …except on the wishlist page, where the heart is how you take an item
       back off the list and there is no other control for it. */
    .product-grid.keep-wishlist .wish-btn.js-wish { display: grid; }
}
.card-body { padding: var(--sp-3) 2px 0; text-align: center; }
.card-cat { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.card-name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; color: var(--ivory); margin: 4px 0 4px; }
.card-name a { transition: opacity var(--dur-fast); }
.card-name a:hover { opacity: .6; }
.price-row { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); flex-wrap: wrap; }
.card .stars { justify-content: center; }
.price-now { color: var(--ivory); font-weight: 500; letter-spacing: .04em; }
.price-was { color: var(--muted); text-decoration: line-through; font-size: var(--text-sm); font-weight: 300; }
.stars { display: inline-flex; gap: 1.5px; }
.stars .star { fill: rgba(17,17,17,.15); }
.stars .star.filled { fill: var(--ivory); }

/* ---------- SKELETONS ---------- */
.skeleton { position: relative; overflow: hidden; background: var(--plum-2); border-radius: var(--radius-sm); }
.skeleton::after {
    content: ''; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
    animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.skeleton-card .skeleton-media { aspect-ratio: 4/5; }
.skeleton-line { height: 14px; border-radius: 4px; margin-top: 10px; }

/* ---------- CATEGORY CAROUSEL (circles, auto-slides) ---------- */
/* --cat-size and --cat-gap are set inline per section by Admin -> Home Sections;
   the clamp() fallbacks keep the original responsive sizing when left at 0. */
.cat-carousel {
    display: flex; gap: var(--cat-gap, clamp(1rem, 3vw, 2.5rem));
    overflow-x: auto; scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: var(--sp-2) var(--sp-2) var(--sp-4);
    scrollbar-width: none;
}
.cat-carousel::-webkit-scrollbar { display: none; }
.cat-carousel.hide-desc .cat-circle small { display: none; }
.cat-circle { flex: 0 0 auto; width: var(--cat-size, clamp(110px, 15vw, 170px)); max-width: 60vw; text-align: center; }
.cat-circle .cc-img {
    display: block; /* spans are inline — aspect-ratio needs a block box to make a true circle */
    width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden;
    border: 1.5px solid var(--line); padding: 5px; background: var(--plum);
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* top-anchored: a full-length abaya shot in a square/circle tile loses the head
   when centre-cropped — keep the top of the garment, trim the hem instead */
.cat-circle .cc-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 50%; transition: transform .7s var(--ease); }
.cat-circle:hover .cc-img { border-color: var(--ivory); transform: translateY(-4px); }
.cat-circle:hover .cc-img img { transform: scale(1.08); }
/* Square variant — set per-section in Admin -> Home Sections -> Collections.
   The circle keeps its 5px inset because a photo pushed to the edge of a circle
   loses its corners anyway; a square is meant to be filled, so the padding and
   the inner background go and the image runs to the border. */
.cat-circle-square .cc-img {
    border-radius: var(--radius);
    padding: 0;
    background: none;
}
.cat-circle-square .cc-img img { border-radius: var(--radius); }
.cat-circle b { display: block; margin-top: var(--sp-3); font-weight: 500; color: var(--ivory); font-size: var(--text-sm); }
.cat-circle small { color: var(--muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }

/* legacy category tiles (still used on other pages if needed) */
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (min-width: 900px) { .cat-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } }
.cat-tile { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/5; display: block; border: 1px solid var(--line); }
.cat-tile img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .9s var(--ease); }
.cat-tile:hover img { transform: scale(1.06); }
.cat-tile .cat-label {
    position: absolute; inset-inline: 0; bottom: 0; padding: var(--sp-6) var(--sp-4) var(--sp-4);
    background: linear-gradient(transparent, rgba(0,0,0,.8));
    color: #fff; font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); text-align: center;
}
.cat-tile .cat-label small { display: block; font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.8); margin-top: 4px; }

/* ---------- FLASH SALE / COUNTDOWN (black panel, local tokens) ---------- */
.flash {
    background: #111; border: 1px solid #111; color: #ddd;
    border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 3.5rem);
    /* re-scope theme tokens so product cards stay readable on black */
    --ivory: #fff; --ink-soft: #ddd; --muted: #9b9b9b;
    --champagne: #fff; --champagne-2: #e5e5e5;
    --plum: #1b1b1b; --plum-2: #242424; --line: rgba(255,255,255,.22);
}
.flash .section-head h2, .flash h2 { color: #fff; }
.flash .badge.sale { background: #fff; color: #111; border-color: #fff; }
.flash .stars .star { fill: rgba(255,255,255,.25); }
.flash .stars .star.filled { fill: #fff; }
.countdown { display: flex; gap: var(--sp-2); justify-content: center; }
.count-box {
    min-width: 68px; text-align: center;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.28);
    border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-2) var(--sp-3);
}
.count-box b { display: block; font-size: var(--text-2xl); font-family: var(--font-display); font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.count-box span { font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: #9b9b9b; }

/* ---------- PROMO BANNERS ---------- */
.promo-grid { display: grid; gap: var(--sp-3); }
@media (min-width: 768px) { .promo-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } }
.promo-tile {
    position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3/2; display: block;
    border: 1px solid var(--line); transition: border-color var(--dur) var(--ease);
}
.promo-tile:hover { border-color: var(--ivory); }
.promo-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.promo-tile:hover img { transform: scale(1.05); }
.promo-tile .promo-label {
    position: absolute; inset: 0; padding: var(--sp-5);
    display: flex; flex-direction: column; justify-content: flex-end;
    background: linear-gradient(transparent 35%, rgba(0,0,0,.75)); color: #fff;
}
.promo-tile h3 { color: #fff; margin: 0; font-weight: 600; font-size: var(--text-xl); }
.promo-tile p { margin: 2px 0 0; font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.85); }

/* ---------- TESTIMONIALS ---------- */
.testi-wrap { position: relative; max-width: 800px; margin-inline: auto; text-align: center; }
.testi-track { display: flex; overflow: hidden; }
.testi { flex: 0 0 100%; padding: var(--sp-4); opacity: 0; transition: opacity var(--dur-slow) var(--ease); }
.testi.active { opacity: 1; }
.testi blockquote {
    font-family: var(--font-display); font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    font-weight: 300; color: var(--ivory); margin: var(--sp-4) 0; line-height: 1.6;
}
.testi cite { font-style: normal; font-size: var(--text-xs); color: var(--muted); letter-spacing: .26em; text-transform: uppercase; }

/* ---------- STATS / TRUST ---------- */
.stats-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); text-align: center;
    border-block: 1px solid var(--line); padding-block: var(--sp-6);
}
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat b { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--text-3xl); color: var(--ivory); font-variant-numeric: tabular-nums; }
.stat span { font-size: 10px; color: var(--muted); letter-spacing: .22em; text-transform: uppercase; }

/* ---------- INSTAGRAM GRID ---------- */
.insta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
@media (min-width: 768px) { .insta-grid { grid-template-columns: repeat(6, 1fr); } }
.insta-grid a { position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1; border: 1px solid var(--line); }
.insta-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), opacity .4s; }
.insta-grid a:hover img { transform: scale(1.08); opacity: .85; }

/* ---------- NEWSLETTER (black panel) ---------- */
.newsletter {
    background: #111; border: 1px solid #111; color: #ddd;
    border-radius: var(--radius-lg);
    padding: clamp(2.5rem, 6vw, 4rem); text-align: center;
    --champagne: #fff;
}
.newsletter h2 { color: #fff; font-weight: 600; font-size: var(--text-3xl); }
.newsletter .kicker { color: #fff; opacity: .8; }
.newsletter form { display: flex; gap: 0; max-width: 480px; margin: var(--sp-5) auto 0; flex-wrap: wrap; }
.newsletter input {
    flex: 1 1 240px; min-height: 52px; border: 1px solid rgba(255,255,255,.35); border-right: 0;
    background: rgba(255,255,255,.06); color: #fff;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm); padding: .7rem 1.2rem;
}
.newsletter input::placeholder { color: rgba(255,255,255,.5); }
.newsletter input:focus { outline: none; border-color: #fff; }
.newsletter .btn { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: #fff; color: #111; }
.newsletter .btn:hover { background: #e5e5e5; }
@media (max-width: 560px) {
    .newsletter input { border-right: 1px solid rgba(255,255,255,.35); border-radius: var(--radius-sm); }
    .newsletter .btn { border-radius: var(--radius-sm); width: 100%; margin-top: var(--sp-2); }
}

/* ---------- FORMS ---------- */
.form-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .form-grid.cols-2 { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }
.field label {
    display: block; font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 8px;
}
.field input, .field select, .field textarea {
    width: 100%; min-height: var(--tap-target);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: .6rem .9rem; background: var(--plum); color: var(--ivory);
    transition: border-color var(--dur-fast);
}
.field select option { background: var(--plum); color: var(--ivory); }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ivory); outline: none; }
.field input[readonly] { opacity: .6; background: var(--noir-2); }
.field .error-msg { color: var(--danger); font-size: var(--text-xs); letter-spacing: .02em; margin-top: 6px; display: block; text-transform: none; }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--danger); }
.alert { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); font-size: var(--text-sm); margin-bottom: var(--sp-4); border: 1px solid; }
.alert-error { background: rgba(192,39,63,.06); border-color: rgba(192,39,63,.35); color: var(--danger); }
.alert-success { background: rgba(30,122,76,.06); border-color: rgba(30,122,76,.3); color: var(--success); }
.alert-info { background: rgba(17,17,17,.04); border-color: rgba(17,17,17,.2); color: var(--ivory); }

/* ---------- AUTH / NARROW PANELS ---------- */
.panel-page { max-width: 480px; margin: var(--sp-7) auto; padding-inline: var(--gutter); }
.panel {
    background: var(--plum); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.6rem);
}
.panel h1 { font-size: var(--text-2xl); font-weight: 600; text-align: center; }
.panel .sub { text-align: center; color: var(--muted); margin-top: -6px; font-size: var(--text-sm); }

/* ---------- BREADCRUMBS ---------- */
.crumbs { font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: var(--sp-5) 0; }
.crumbs a:hover { color: var(--ivory); }

/* ---------- SHOP FILTERS ---------- */
.shop-layout { display: grid; gap: var(--sp-5); }
@media (min-width: 900px) { .shop-layout { grid-template-columns: 250px 1fr; align-items: start; } }
.filters { background: var(--plum); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-5); }
.filters h3 { font-size: var(--text-xs); font-family: var(--font-body); font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--ivory); }
.filters .f-group { border-top: 1px solid var(--line); padding-block: var(--sp-4); }
.filters label { display: flex; align-items: center; gap: 10px; min-height: 32px; font-size: var(--text-sm); cursor: pointer; color: var(--ink-soft); }
.filters input[type=radio], .filters input[type=checkbox] { accent-color: #111; }
.filter-toggle { display: none; }
/* mobile: filters collapsed behind a button */
@media (max-width: 899px) {
    .filter-toggle { display: inline-flex; }
    .filters { display: none; }
    .filters.open { display: block; animation: fadeUp .3s var(--ease); }
}
.toolbar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.toolbar .result-count { color: var(--muted); font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; margin-right: auto; }
.toolbar select {
    min-height: 40px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 0 1rem; background: var(--plum); color: var(--ivory); font-size: var(--text-sm);
}

/* ---------- PAGINATION ---------- */
.pagination { display: flex; gap: 8px; justify-content: center; margin-top: var(--sp-7); flex-wrap: wrap; }
.pagination a, .pagination span {
    min-width: var(--tap-target); height: var(--tap-target); display: grid; place-items: center;
    border-radius: var(--radius-sm); font-size: var(--text-sm); border: 1px solid var(--line); padding-inline: 6px;
    transition: all var(--dur-fast);
}
.pagination a:hover { border-color: var(--ivory); color: var(--ivory); }
.pagination .current { background: var(--ivory); color: var(--noir); border-color: var(--ivory); }

/* ---------- PRODUCT PAGE ---------- */
.product-layout { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) { .product-layout { grid-template-columns: 1.05fr 1fr; align-items: start; gap: var(--sp-7); } }
.gallery-main {
    position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/5;
    background: var(--plum-2); border: 1px solid var(--line); cursor: zoom-in;
}
.gallery-main img { width: 100%; height: 100%; object-fit: contain; transition: transform .35s var(--ease), opacity .3s; will-change: transform; }
.gallery-main.zoomed img { transform: scale(2); cursor: zoom-out; }
.thumbs { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); overflow-x: auto; padding-bottom: 4px; }
.thumbs button {
    flex: 0 0 70px; aspect-ratio: 4/5; border-radius: var(--radius-sm); overflow: hidden;
    border: 1px solid var(--line); padding: 0; opacity: .55;
    transition: border-color var(--dur-fast), opacity var(--dur-fast);
}
.thumbs button:hover { opacity: .85; }
.thumbs button.active { border-color: var(--ivory); opacity: 1; }
.thumbs img { width: 100%; height: 100%; object-fit: contain; }
.p-title { font-size: var(--text-3xl); font-weight: 600; margin-bottom: var(--sp-2); }
/* The New / Sale badge is a sibling of the h1 rather than a child of it, so the
   heading text stays the product name alone. This row puts it back beside the
   title, vertically centred on the first line and wrapping under on a narrow
   screen rather than squeezing the name. */
.p-title-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2); }
.p-title-row .p-title { margin-bottom: var(--sp-2); }
.p-price { display: flex; align-items: baseline; gap: var(--sp-3); margin: var(--sp-4) 0; }
.p-price .price-now { font-size: var(--text-2xl); font-weight: 600; }
.p-price .price-was { font-size: var(--text-lg); }
/* flashed when someone tries to buy without picking a size — see main.js */
.variant-row.needs-pick { animation: needsPick 1.6s ease; border-radius: var(--radius-sm); }
@keyframes needsPick {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
    15%, 55% { box-shadow: 0 0 0 3px var(--danger); }
    35%, 75% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}
@media (prefers-reduced-motion: reduce) { .variant-row.needs-pick { animation: none; box-shadow: 0 0 0 3px var(--danger); } }
.variant-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-4); }
.variant-chip {
    min-height: var(--tap-target); min-width: var(--tap-target); padding: .35rem 1.1rem;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: transparent; color: var(--ink-soft);
    font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase;
    transition: all var(--dur-fast) var(--ease);
}
.variant-chip:hover { border-color: var(--ivory); color: var(--ivory); }
.variant-chip.active { background: var(--ivory); border-color: var(--ivory); color: var(--noir); }
.variant-chip.disabled { opacity: .3; text-decoration: line-through; pointer-events: none; }
.qty-picker { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--plum); }
.qty-picker button { width: var(--tap-target); height: var(--tap-target); font-size: var(--text-lg); color: var(--ivory); transition: background var(--dur-fast); }
.qty-picker button:hover { background: var(--plum-2); }
.qty-picker input { width: 52px; text-align: center; border: 0; min-height: var(--tap-target); -moz-appearance: textfield; background: transparent; color: var(--ivory); }
.qty-picker input::-webkit-outer-spin-button, .qty-picker input::-webkit-inner-spin-button { -webkit-appearance: none; }
.buy-row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; margin-block: var(--sp-4); }
/* Add to Cart + Buy It Now share the row on desktop. Kept in CSS rather than
   inline so the phone breakpoint below can actually override it. */
.buy-row .js-add-to-cart { flex: 1 1 160px; }
@media (max-width: 600px) {
    /* side by side at this width squeezes the uppercase labels, so each
       button takes a full-width row of its own — easier to hit, easier to read */
    .buy-row .js-add-to-cart { flex: 1 1 100%; }
}
.stock-note { font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }
.stock-note.ok { color: var(--success); }
.stock-note.low { color: var(--warning); }
.stock-note.out { color: var(--danger); }

/* tabs */
.tabs { margin-top: var(--sp-8); }
.tab-nav {
    display: flex; gap: var(--sp-4); border-bottom: 1px solid var(--line);
    overflow-x: auto;
    /* The strip still scrolls if a label ever grows past the screen, but the
       scrollbar itself is hidden: on a phone it drew a grey bar between the
       tabs and the panel that read as part of the design. */
    scrollbar-width: none; -ms-overflow-style: none;
}
.tab-nav::-webkit-scrollbar { display: none; }
.tab-nav button {
    flex: 0 0 auto;
    padding: .9rem .4rem; min-height: var(--tap-target); white-space: nowrap;
    font-size: var(--text-xs); letter-spacing: .18em; text-transform: uppercase;
    color: var(--muted); position: relative;
}
.tab-nav button::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ivory); transform: scaleX(0); transition: transform var(--dur) var(--ease); }
.tab-nav button.active { color: var(--ivory); }
.tab-nav button.active::after { transform: none; }
.tab-pane { display: none; padding-block: var(--sp-5); animation: fadeUp .4s var(--ease); }
.tab-pane.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Measured on a 375px phone: the three labels needed 352px inside a 343px
   strip, so the row scrolled, the last tab sat flush against the edge and the
   labels read as one run-on line. 74px of that width was letter-spacing alone
   (.18em across 40 characters) — the words were never the problem, the
   tracking was. Trimming tracking, side padding, the gap and a little type
   size brings the row to ~316px with ~27px to spare, measured against the
   WIDEST of the two fonts this page renders in. The spare width matters:
   "Reviews (128)" is two characters longer than the label used to size this. */
@media (max-width: 600px) {
    .tab-nav { gap: var(--sp-3); }
    .tab-nav button { font-size: .68rem; letter-spacing: .09em; padding-inline: .2rem; }
}

/* accordions (size guide / FAQ) */
.accordion { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: var(--sp-5); background: var(--plum); }
.acc-item + .acc-item { border-top: 1px solid var(--line); }
.acc-head {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    padding: var(--sp-4); min-height: var(--tap-target);
    font-family: var(--font-display); font-weight: 500; font-size: var(--text-base);
    color: var(--ivory); text-align: left;
    transition: opacity var(--dur-fast);
}
.acc-head:hover { opacity: .65; }
.acc-head .chev { transition: transform var(--dur) var(--ease); font-size: var(--text-sm); }
.acc-item.open .acc-head .chev { transform: rotate(180deg); }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); }
.acc-item.open .acc-body { grid-template-rows: 1fr; }
/* THIS IS THE LOAD-BEARING PART — do not put padding back on .acc-clip.
   The 0fr -> 1fr collapse only reaches zero if the row's single child can be
   squeezed to nothing. That child used to carry `padding: 0 1rem 1rem` inline,
   and padding counts toward a grid item's minimum contribution, so every
   CLOSED panel kept a 16px band of its answer text visible under the header —
   the stack of half-cut lines on the product page. Padding now lives one level
   deeper, inside the clip, and the clip is explicitly min-height: 0. */
.acc-clip { overflow: hidden; min-height: 0; }
.acc-content { padding: 0 var(--sp-4) var(--sp-4); font-size: var(--text-sm); }
.acc-content > :first-child { margin-top: 0; }
.acc-content > :last-child { margin-bottom: 0; }
.acc-body p, .acc-body table { font-size: var(--text-sm); }
.acc-body p { margin: 0 0 var(--sp-2); }

/* reviews */
.review { border-bottom: 1px solid var(--line); padding-block: var(--sp-4); }
.review .r-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.review .r-name { font-weight: 500; color: var(--ivory); }
.review .r-date { color: var(--muted); font-size: var(--text-xs); }

/* ---------- CART ---------- */
.cart-layout { display: grid; gap: var(--sp-5); }
@media (min-width: 900px) { .cart-layout { grid-template-columns: 1.6fr 1fr; align-items: start; } }

/* ---- checkout on a phone: what you are buying, how you will pay, then the form
   On a narrow screen the delivery form is a long run of inputs. With it first,
   the total and the payment choice sat below the fold, so someone filling in
   their address had not yet seen what they were being charged or what the
   options were. Reversing it puts the decisions first and the typing last.

   Desktop is unchanged: named areas keep the form and payment stacked in the
   left column with the summary alongside. */
@media (min-width: 900px) {
    .checkout-layout {
        grid-template-areas: "details summary" "payment summary";
    }
    .co-details  { grid-area: details; }
    .co-payment  { grid-area: payment; }
    .checkout-layout .summary-box { grid-area: summary; }
}
@media (max-width: 899px) {
    .checkout-layout { display: flex; flex-direction: column; }
    /* The wrapper dissolves so the totals card and the buttons can be placed
       separately: the card first, the buttons last - after the payment choice,
       which is the last thing the customer decides before pressing them. */
    .checkout-layout .summary-box { display: contents; }
    .checkout-layout .summary-card { order: 1; }
    .co-details { order: 2; }
    .co-payment { order: 3; }
    .checkout-layout .co-actions  { order: 4; }
}
/* the card look lives on .summary-card now; the wrapper only positions on desktop */
.checkout-layout .summary-card {
    background: var(--plum); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: var(--sp-5);
}
@media (min-width: 900px) {
    .checkout-layout .summary-box { background: none; border: 0; padding: 0; }
    .checkout-layout .co-actions  { padding: 0 var(--sp-5); }
}
.cart-item {
    display: grid; grid-template-columns: 88px 1fr auto; gap: var(--sp-4);
    padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); align-items: center;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cart-item.removing { opacity: 0; transform: translateX(24px); }
.cart-item img { width: 88px; height: 110px; object-fit: contain; background: var(--plum-2); border-radius: var(--radius-sm); border: 1px solid var(--line); }
/* thumbnail + quantity picker + line total leave too little room for the
   product name on a narrow phone — give the name column its width back */
@media (max-width: 480px) {
    .cart-item { grid-template-columns: 64px 1fr auto; gap: var(--sp-3); }
    .cart-item img { width: 64px; height: 80px; }
}
.cart-item .ci-name { font-family: var(--font-display); font-weight: 500; color: var(--ivory); font-size: var(--text-lg); }
.cart-item .ci-name a:hover { opacity: .6; }
.cart-item .ci-variant { font-size: 10px; color: var(--muted); letter-spacing: .2em; text-transform: uppercase; }
.remove-btn { color: var(--muted); font-size: var(--text-xs); letter-spacing: .08em; text-decoration: underline; text-underline-offset: 3px; }
.remove-btn:hover { color: var(--danger); }
.summary-box {
    background: var(--plum); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: var(--sp-5);
    position: sticky; top: calc(var(--header-h) + var(--sp-3));
}
/* Checkout's copy scrolls away with the page. On a phone it now sits above the
   form, so sticking it would park the totals over the fields being filled in.
   The cart page keeps the sticky behaviour, where the summary is the thing you
   are looking at while you change quantities. */
.checkout-layout .summary-box { position: static; }
.sum-row { display: flex; justify-content: space-between; gap: var(--sp-3); padding-block: 6px; font-size: var(--text-sm); }
.sum-row.total { border-top: 1px solid var(--line); margin-top: var(--sp-2); padding-top: var(--sp-3); font-size: var(--text-lg); color: var(--ivory); }
.sum-row.total span:last-child { font-weight: 600; font-size: var(--text-xl); }
/* wraps rather than overflowing once the code box + button no longer fit */
.coupon-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block: var(--sp-3); }
.coupon-row input {
    flex: 1 1 140px; min-height: var(--tap-target); border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 0 1rem; text-transform: uppercase; letter-spacing: .08em;
    background: var(--plum); color: var(--ivory); font-size: var(--text-sm);
}
.coupon-row .btn { flex: 0 0 auto; }
.coupon-row input:focus { outline: none; border-color: var(--ivory); }

/* free shipping progress */
.ship-progress { margin-bottom: var(--sp-5); }
.ship-progress .sp-label { font-size: var(--text-sm); margin-bottom: 8px; }
.ship-progress .sp-label strong { color: var(--ivory); }
.ship-progress .sp-track { height: 4px; border-radius: 2px; background: var(--plum-2); overflow: hidden; }
.ship-progress .sp-fill {
    height: 100%; background: var(--ivory);
    transform-origin: left; transform: scaleX(0); transition: transform .9s var(--ease);
}

/* ---------- MINI CART DRAWER ---------- */
.drawer { position: fixed; inset: 0; z-index: 95; visibility: hidden; pointer-events: none; }
.drawer .backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity var(--dur) var(--ease); }
.drawer .panel {
    position: absolute; top: 0; bottom: 0; right: 0; width: min(92vw, 430px);
    background: var(--noir); border-left: 1px solid var(--line);
    display: flex; flex-direction: column; padding: 0; border-radius: 0;
    transform: translateX(102%); transition: transform var(--dur) var(--ease);
}
.drawer.open { visibility: visible; pointer-events: auto; }
.drawer.open .backdrop { opacity: 1; }
.drawer.open .panel { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); }
.drawer-head h3 { margin: 0; font-weight: 600; }
.drawer-items { flex: 1; overflow-y: auto; padding: 0 var(--sp-5); }
.drawer-foot { padding: var(--sp-4) var(--sp-5) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); display: grid; gap: var(--sp-2); }
.mini-item { display: grid; grid-template-columns: 60px 1fr auto; gap: var(--sp-3); padding-block: var(--sp-4); border-bottom: 1px solid var(--line); align-items: center; }
.mini-item img { width: 60px; height: 75px; object-fit: contain; background: var(--plum-2); border-radius: var(--radius-sm); border: 1px solid var(--line); }
.drawer-empty { text-align: center; color: var(--muted); padding: var(--sp-8) 0; }

/* ---------- CHECKOUT ---------- */
.pay-option {
    display: flex; gap: var(--sp-3); align-items: flex-start;
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: var(--sp-4); cursor: pointer;
    transition: border-color var(--dur-fast), background var(--dur-fast);
}
.pay-option:hover { border-color: var(--ivory); }
.pay-option.selected { border-color: var(--ivory); background: var(--wine-soft); }
.pay-option input { margin-top: 4px; accent-color: #111; width: 18px; height: 18px; }
.pay-option .po-title { font-weight: 500; color: var(--ivory); letter-spacing: .02em; }
.pay-option .po-desc { font-size: var(--text-sm); color: var(--muted); }
.pay-option .po-soon {
    font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
    background: var(--plum-2); color: var(--ink-soft);
    border-radius: var(--radius-sm); padding: 3px 10px; margin-left: 8px;
}

/* ---------- ORDER / STATUS ---------- */
.status-pill {
    display: inline-block; padding: 4px 14px; border-radius: var(--radius-full);
    font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
    border: 1px solid;
}
.status-pending   { background: rgba(154,106,31,.07);  border-color: rgba(154,106,31,.4);  color: var(--warning); }
.status-confirmed { background: rgba(43,77,156,.07);   border-color: rgba(43,77,156,.4);   color: #2B4D9C; }
.status-shipped   { background: rgba(91,63,158,.07);   border-color: rgba(91,63,158,.4);   color: #5B3F9E; }
.status-delivered { background: rgba(30,122,76,.07);   border-color: rgba(30,122,76,.4);   color: var(--success); }
.status-cancelled { background: rgba(192,39,63,.07);   border-color: rgba(192,39,63,.4);   color: var(--danger); }

.timeline { display: grid; gap: 0; margin-block: var(--sp-5); }
.tl-step { display: grid; grid-template-columns: 28px 1fr; gap: var(--sp-3); position: relative; padding-bottom: var(--sp-5); }
.tl-step::before { content: ''; position: absolute; left: 13px; top: 28px; bottom: 0; width: 1px; background: var(--line); }
.tl-step:last-child::before { display: none; }
.tl-dot { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: var(--plum); display: grid; place-items: center; color: transparent; font-size: 12px; }
.tl-step.done .tl-dot { border-color: var(--ivory); background: var(--ivory); color: var(--noir); }
.tl-step.done::before { background: var(--ivory); }
.tl-step b { color: var(--ivory); display: block; font-weight: 500; }
.tl-step small { color: var(--muted); }

/* ---------- ACCOUNT ---------- */
.account-layout { display: grid; gap: var(--sp-5); }
@media (min-width: 900px) { .account-layout { grid-template-columns: 250px 1fr; align-items: start; } }
.account-nav { background: var(--plum); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.account-nav a {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4); min-height: var(--tap-target);
    border-left: 2px solid transparent;
    font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase;
    transition: all var(--dur-fast);
}
.account-nav a:hover { background: var(--plum-2); }
.account-nav a.active { border-left-color: var(--ivory); color: var(--ivory); background: var(--wine-soft); font-weight: 500; }

/* ---------- TABLES ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.nice {
    width: 100%; border-collapse: collapse;
    background: var(--plum); border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden; font-size: var(--text-sm);
}
table.nice th {
    text-align: left; padding: var(--sp-3) var(--sp-4);
    background: var(--noir-2); color: var(--ivory);
    font-weight: 500; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
}
table.nice td { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); vertical-align: middle; }
table.nice tr:hover td { background: var(--noir-2); }

/* Admin-written tables only (size guide, policy pages) — NOT the admin screens
   or the account pages, which share `table.nice` and are fine as they are.
   The size guide measured 337.8px inside a 309px panel on a 375px phone, so it
   scrolled sideways and looked cut off. Letting the headers wrap saves nothing
   (still 337.8px): 128px of that width is cell padding, four columns at 16px a
   side. Tighter padding and header tracking bring it to ~260px. A genuinely
   wide table still scrolls — .table-wrap keeps overflow-x: auto. */
@media (max-width: 600px) {
    .rich-table table.nice th,
    .rich-table table.nice td { padding: 8px 10px; }
    .rich-table table.nice th { letter-spacing: .06em; }
    .rich-table table.nice td { font-size: var(--text-xs); }
}

/* ---------- TOASTS ---------- */
.toast-stack {
    position: fixed; bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
    left: 50%; transform: translateX(-50%); z-index: 120;
    display: grid; gap: var(--sp-2); width: min(92vw, 420px);
}
.toast {
    display: flex; align-items: center; gap: var(--sp-3);
    background: #161616; color: #fff;
    border-left: 3px solid #fff;
    border-radius: var(--radius); padding: var(--sp-3) var(--sp-4);
    box-shadow: var(--shadow-lg);
    opacity: 0; transform: translateY(16px) scale(.97);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-spring);
    font-size: var(--text-sm);
}
.toast.show { opacity: 1; transform: none; }
.toast.success { border-left-color: #4CAF7D; }
.toast.error { border-left-color: #E36F82; }

/* fly-to-cart dot */
.fly-dot { position: fixed; z-index: 130; width: 12px; height: 12px; border-radius: 50%; background: #111; box-shadow: 0 2px 10px rgba(0,0,0,.4); pointer-events: none; will-change: transform, opacity; }

/* ---------- WHATSAPP FLOAT ---------- */
.wa-float {
    position: fixed; right: var(--sp-4); bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); z-index: 80;
    width: 54px; height: 54px; border-radius: 50%; background: #25D366; color: #fff;
    display: grid; place-items: center; box-shadow: var(--shadow-lg);
    transition: transform var(--dur-fast) var(--ease-spring);
}
.wa-float:hover { transform: scale(1.1); }

/* ---------- POLICY / PROSE PAGES ---------- */
.prose { max-width: 780px; margin-inline: auto; }
.prose h1 { font-size: var(--text-3xl); font-weight: 600; }
.prose h2 { font-size: var(--text-xl); font-weight: 600; margin-top: var(--sp-6); }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .45rem; }
/* Buttons are excluded. This rule is a class plus an element, so it outranks
   .btn on specificity, and a solid button dropped into prose was inheriting
   --ivory (which is #111 in this theme, not ivory) as its text colour - black
   text on a black button. It read as an empty box. */
.prose a:not(.btn) { color: var(--ivory); text-decoration: underline; text-underline-offset: 3px; }
.prose em { color: var(--muted); }

/* ---------- BLOG ---------- */
.blog-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 768px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
.blog-card {
    background: var(--plum); border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden;
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur);
}
.blog-card:hover { transform: translateY(-4px); border-color: var(--ivory); box-shadow: var(--shadow-sm); }
.blog-card img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.blog-card .bc-body { padding: var(--sp-4); }
.blog-card h3 { font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--sp-2); }
.blog-card .bc-date { font-size: 9px; color: var(--muted); letter-spacing: .24em; text-transform: uppercase; }

/* ---------- 404 ---------- */
.page-404 { text-align: center; padding: var(--sp-8) var(--gutter); }
.page-404 .big { font-family: var(--font-display); font-weight: 600; font-size: clamp(6rem, 20vw, 12rem); color: rgba(17,17,17,.07); line-height: 1; }

/* ---------- MISC ---------- */
.divider-flourish { display: flex; align-items: center; gap: var(--sp-3); justify-content: center; color: var(--muted); margin-block: var(--sp-6); }
.divider-flourish::before, .divider-flourish::after { content: ''; height: 1px; width: min(120px, 20vw); background: var(--line); }
.empty-state { text-align: center; color: var(--muted); padding: var(--sp-8) var(--gutter); }
.empty-state svg { margin: 0 auto var(--sp-4); opacity: .3; }
.empty-state h2 { font-weight: 600; }
.share-row { display: flex; gap: var(--sp-2); align-items: center; margin-top: var(--sp-5); flex-wrap: wrap; }
.share-row a {
    width: 40px; height: 40px; display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: 50%;
    transition: all var(--dur-fast);
}
.share-row a:hover { border-color: var(--ivory); color: var(--ivory); transform: translateY(-2px); }
.share-row small { color: var(--muted); letter-spacing: .22em; text-transform: uppercase; font-size: 9px; }
.wa-order {
    background: transparent; color: #128C4B !important;
    border: 1px solid rgba(18,140,75,.45) !important;
    width: auto !important; padding: 0 1.4rem;
    border-radius: var(--radius-sm) !important;
    font-size: var(--text-xs); font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
    height: 44px; display: inline-flex; align-items: center; gap: 8px;
    transition: all var(--dur-fast);
}
.wa-order:hover { background: rgba(18,140,75,.06); }

/* Checkout's version fills the summary column so it reads as the alternative
   to Place Order rather than an afterthought beside it. */
.wa-order-block { width: 100% !important; justify-content: center; padding: 0; }
.wa-checkout-sep {
    display: flex; align-items: center; gap: var(--sp-3);
    margin: var(--sp-3) 0; color: var(--muted); font-size: var(--text-xs);
    text-transform: uppercase; letter-spacing: .14em;
}
.wa-checkout-sep::before, .wa-checkout-sep::after {
    content: ''; flex: 1; height: 1px; background: var(--line);
}

/* ---------- PRODUCT VIDEO EMBED ---------- */
.video-embed {
    margin-top: var(--sp-3); border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--line); aspect-ratio: 16 / 9; background: #000;
}
.video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Instagram reel/video tiles get a play badge */
.insta-grid a .play-badge {
    position: absolute; top: 8px; right: 8px;
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(0,0,0,.6); color: #fff;
    display: grid; place-items: center; pointer-events: none;
}

/* ---------- BACK TO TOP ---------- */
.back-top {
    position: fixed; right: var(--sp-4); bottom: 86px; z-index: 79;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--plum); border: 1px solid var(--line); color: var(--ivory);
    display: grid; place-items: center; box-shadow: var(--shadow-sm);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.back-top.show { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.back-top:hover { background: var(--ivory); color: var(--noir); }

/* ---------- STICKY ADD-TO-CART BAR (mobile product pages) ---------- */
.sticky-atc {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
    background: var(--plum); border-top: 1px solid var(--line);
    padding: 10px var(--sp-4) calc(10px + env(safe-area-inset-bottom, 0px));
    display: none; align-items: center; gap: 10px;
    transform: translateY(110%); transition: transform var(--dur) var(--ease);
    box-shadow: 0 -6px 20px rgba(0,0,0,.08);
}
.sticky-atc.show { transform: none; }
@media (max-width: 899px) { .sticky-atc { display: flex; } }
.sticky-atc img { width: 42px; height: 52px; object-fit: contain; background: var(--plum-2); border-radius: var(--radius-sm); border: 1px solid var(--line); }
.sticky-atc .sa-info { flex: 1; min-width: 0; }
.sticky-atc .sa-name { font-weight: 500; color: var(--ivory); font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-atc .sa-price { font-size: var(--text-xs); color: var(--muted); }
.sticky-atc .btn { padding-inline: 1.2rem; }
/* The bar carries two actions now (Add + Buy Now). On the narrowest phones
   the thumbnail is the least useful element — the product is already on
   screen behind the bar — so it yields its width to the buttons. */
@media (max-width: 430px) {
    .sticky-atc img { display: none; }
    .sticky-atc .btn { padding-inline: .8rem; }
    .sticky-atc { gap: 8px; }
}

/* ---------- COMPARE BAR (add several products, then view together) ---------- */
.compare-bar {
    position: fixed; left: var(--sp-4); bottom: var(--sp-4); z-index: 86;
    background: var(--ivory); color: var(--noir); border-radius: var(--radius-full);
    padding: 10px 10px 10px 20px; display: flex; align-items: center; gap: 10px;
    box-shadow: var(--shadow); font-size: var(--text-sm);
    opacity: 0; visibility: hidden; transform: translateY(12px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.compare-bar.show { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.compare-bar .btn { padding-inline: 1rem; }
.compare-bar-close { color: inherit; opacity: .6; width: 28px; height: 28px; display: grid; place-items: center; }
.compare-bar-close:hover { opacity: 1; }
@media (max-width: 480px) { .compare-bar { left: var(--sp-3); right: var(--sp-3); bottom: 70px; } }

/* ---------- SITE POPUPS (Admin -> Popups) ---------- */
.site-popup { position: fixed; inset: 0; z-index: 140; visibility: hidden; pointer-events: none; }
.site-popup .sp-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); opacity: 0; transition: opacity var(--dur) var(--ease); }
.site-popup .sp-panel {
    position: absolute; left: 50%; top: 50%;
    width: min(92vw, 460px); max-height: 86vh; overflow-y: auto;
    background: var(--plum); border: 1px solid var(--line); border-radius: var(--radius-lg);
    transform: translate(-50%, -46%) scale(.96); opacity: 0;
    transition: transform var(--dur) var(--ease-spring), opacity var(--dur) var(--ease);
    box-shadow: var(--shadow-lg);
}
.site-popup.open { visibility: visible; pointer-events: auto; }
.site-popup.open .sp-backdrop { opacity: 1; }
.site-popup.open .sp-panel { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.site-popup .sp-close {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,.9); color: #111; border: 1px solid rgba(0,0,0,.1);
    display: grid; place-items: center;
}
.site-popup .sp-image { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.site-popup .sp-body { padding: var(--sp-5); text-align: center; }
.site-popup .sp-body h3 { font-size: var(--text-xl); font-weight: 600; }
.site-popup .sp-body p { color: var(--muted); font-size: var(--text-sm); }
.sp-newsletter-form { display: flex; gap: 8px; margin-top: var(--sp-3); flex-wrap: wrap; justify-content: center; }
.sp-newsletter-form input { flex: 1; min-width: 180px; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 .8rem; background: var(--surface); color: var(--ink); }
.sp-newsletter-form .btn { white-space: nowrap; }

/* ---------- SALES POPUP (social proof, Admin -> Store Settings) ---------- */
#auto-sales-pop {
    position: fixed; bottom: 20px; left: 20px;
    /* calc(100%…) not calc(100vw…): 100vw counts the scrollbar, which left the
       box hanging past the right edge of a narrow phone screen. */
    background: #fff; width: 320px; max-width: calc(100% - 40px);
    padding: 15px; border-radius: var(--radius);
    box-shadow: 0 5px 20px rgba(0,0,0,.15);
    display: flex; flex-direction: column; z-index: 2147483647;
    opacity: 0; transform: translateY(20px);
    transition: all .5s ease; pointer-events: none;
    border-left: 5px solid #000; font-family: inherit;
}
#auto-sales-pop.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.asp-link-wrapper { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; width: 100%; cursor: pointer; }
.asp-img { width: 60px; height: 60px; object-fit: contain; border-radius: 4px; background: #f4f4f4; flex-shrink: 0; }
.asp-content { display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.asp-text { font-size: 13px; color: #333; line-height: 1.3; margin-bottom: 3px; }
.asp-bold { font-weight: 700; color: #000; }
.asp-link-wrapper:hover .asp-bold { text-decoration: underline; color: #444; }
.asp-time { font-size: 11px; color: #888; display: flex; align-items: center; }
.asp-check { color: #28a745; margin-right: 4px; font-size: 12px; }
.asp-close { position: absolute; top: 5px; right: 8px; font-size: 16px; color: #999; cursor: pointer; line-height: 1; z-index: 10; }
.asp-close:hover { color: #000; }

/* ---------- RETAIL / LIST PRICE (product page, optional) ----------
   Quieter than the selling price: a reference figure, not what is charged. */
.p-retail {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2);
    margin: calc(var(--sp-2) * -1) 0 var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: var(--noir-2); border: 1px solid var(--line); border-radius: var(--radius-sm, 4px);
}
.p-retail-label {
    font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.p-retail-price { font-size: var(--text-lg); font-weight: 600; color: var(--ink); }
.p-retail small { flex: 1 1 100%; color: var(--muted); font-size: var(--text-xs); line-height: 1.5; }

/* Payment note under the checkout options */
.pay-note {
    margin: var(--sp-2) 0 0; padding: var(--sp-3) var(--sp-4);
    background: var(--noir-2); border: 1px solid var(--line);
    font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.6;
}

/* Trust-bar icon above each figure */
.stat-icon {
    width: 26px; height: 26px; display: block; margin: 0 auto var(--sp-2);
    color: var(--ink); opacity: .55;
}

/* FAQ page */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item > summary {
    cursor: pointer; list-style: none; padding: var(--sp-4) var(--sp-6) var(--sp-4) 0;
    font-size: var(--text-lg); font-weight: 500; color: var(--ink); position: relative;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
    content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    font-size: 1.4rem; font-weight: 300; color: var(--muted);
}
.faq-item[open] > summary::after { content: '\2212'; }
.faq-answer { padding: 0 0 var(--sp-5); color: var(--ink-soft); line-height: 1.75; max-width: 68ch; }
.faq-answer p { margin: 0 0 var(--sp-3); }
.faq-answer ul { margin: 0 0 var(--sp-3); padding-left: 1.2rem; }
.faq-answer li { margin-bottom: .4rem; }
.faq-cta {
    margin-top: var(--sp-6); padding: var(--sp-6); text-align: center;
    background: var(--noir-2); border: 1px solid var(--line);
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
}
.faq-cta p { margin: 0; color: var(--ink-soft); }

/* Cancellation status on the customer order page */
.cancel-box {
    margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--line); border-left-width: 3px; background: var(--noir-2);
    font-size: var(--text-sm); line-height: 1.6;
}
.cancel-requested { border-left-color: var(--warning); }
.cancel-approved  { border-left-color: var(--success); }
.cancel-rejected  { border-left-color: var(--danger); }
.cancel-date { color: var(--muted); font-size: var(--text-xs); }

/* "N other people are looking at this right now" — a real count of the people
   actually on the page (see api/presence.php), not the invented number this
   used to be. Understated on purpose: it is a genuine signal now, and dressing
   it up would make a true thing look like the fake one it replaced. */
.live-watching {
    display: flex; align-items: center; gap: 5px;
    margin-top: 6px;
    font-size: var(--text-xs); color: var(--muted);
}
.live-watching .lw-n { font-weight: 600; color: var(--ink); }

/* The paragraph above a collection grid. Wide measure is deliberately avoided —
   this is real prose people are meant to read, and a line that runs the full
   width of a 12-column product grid is a line nobody finishes. */
.collection-intro {
    max-width: 68ch;
    margin: 0 0 var(--sp-5);
    font-size: var(--text-sm);
    line-height: 1.75;
    color: var(--ink-soft, var(--muted));
}
.collection-intro p { margin: 0; }

/* "Shop by colour, style & budget" — the internal-link band above the footer
   bottom. Deliberately a plain wrapping list of links: a crawler follows an
   <a>, and a visitor scanning for "black" finds it faster in a list than in a
   carousel. Small and quiet, because it sits under every page on the site. */
.footer-shopby {
    border-top: 1px solid var(--line);
    padding-top: var(--sp-4);
    margin-top: var(--sp-4);
}
.footer-shopby h3 {
    margin: 0 0 var(--sp-2);
    font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--muted); font-weight: 600;
}
.footer-shopby ul {
    display: flex; flex-wrap: wrap; gap: 6px 0;
    list-style: none; margin: 0; padding: 0;
}
.footer-shopby li { display: flex; align-items: center; }
/* A middot between links rather than after each, so the row does not end on a
   stray separator. */
.footer-shopby li + li::before {
    content: "·";
    margin: 0 .6rem;
    color: var(--muted); opacity: .6;
}
.footer-shopby a { font-size: var(--text-sm); color: var(--ink-soft, inherit); }
.footer-shopby a:hover { text-decoration: underline; }

/* Collection links in the shop sidebar, sitting under the category radios. */
.f-collections { list-style: none; margin: 6px 0 0; padding: 0; }
.f-collections li { margin: 0 0 4px; }
.f-collections a { font-size: var(--text-sm); color: var(--ink-soft, inherit); }
.f-collections a:hover { text-decoration: underline; }
.f-collections a[aria-current="page"] { font-weight: 600; color: var(--ink); }

/* ===========================================================================
 * BUY IT NOW POPUP (includes/buy-now.php)
 * Reuses .site-popup for the overlay and .variant-chip for the size chips, so
 * it looks like the product page's own size picker rather than a third thing.
 * ======================================================================== */
.buy-now .bn-panel { padding: var(--sp-5); width: min(94vw, 480px); }
.buy-now .bn-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; background: transparent; color: var(--muted); font-size: 18px; cursor: pointer; border-radius: 50%; }
.buy-now .bn-close:hover { background: var(--noir); color: var(--ink); }
.buy-now .bn-head { display: flex; gap: var(--sp-3); align-items: center; padding-right: 32px; margin-bottom: var(--sp-4); }
.buy-now .bn-head img { width: 72px; height: 90px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--noir); }
.buy-now .bn-name { margin: 0 0 4px; font-size: var(--text-lg); font-weight: 600; line-height: 1.2; }
.buy-now .bn-more { display: inline-block; margin-top: 4px; font-size: var(--text-xs); color: var(--muted); text-decoration: underline; }
.buy-now .bn-label { font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-2); }
.buy-now .bn-sizes { margin: 0 0 var(--sp-3); }
.buy-now .bn-sizes.needs-pick { animation: needsPick 1.6s ease; border-radius: var(--radius-sm); }
.buy-now .bn-chart { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: var(--sp-4); }
.buy-now .bn-chart summary { padding: 10px 14px; cursor: pointer; font-size: var(--text-sm); font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
.buy-now .bn-chart summary::after { content: "▾"; color: var(--muted); }
.buy-now .bn-chart[open] summary::after { content: "▴"; }
.buy-now .bn-chart-body { padding: 0 14px 12px; font-size: var(--text-sm); }
.buy-now .bn-chart-body table { width: 100%; border-collapse: collapse; }
.buy-now .bn-chart-body th, .buy-now .bn-chart-body td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.buy-now .bn-qty { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.buy-now .bn-actions { display: grid; gap: var(--sp-2); }
.buy-now .bn-note { margin: var(--sp-3) 0 0; text-align: center; font-size: var(--text-xs); color: var(--muted); }
/* On a phone the panel sits at the bottom like a sheet - closer to the thumb,
   and the keyboard (for qty) does not cover it. */
@media (max-width: 640px) {
    .buy-now .sp-panel { top: auto; bottom: 0; left: 0; width: 100%; max-height: 92vh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0; transform: translateY(8%); }
    .buy-now.open .sp-panel { transform: none; }
    .buy-now .bn-panel { padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom, 0px)); }
}

/* Checkout payment options: the Cash on Delivery note, and the greyed-out
   "coming soon" state for the two online-payment options while the gateway is
   not live yet (payment_gateway_coming_soon). */
.pay-option .po-note { display: block; margin-top: 8px; padding: 10px 12px; border-radius: var(--radius-sm);
    background: var(--soft, rgba(0,0,0,.04)); font-size: var(--text-xs); line-height: 1.45; color: var(--ink-soft, var(--muted)); }
.pay-option.soon { opacity: .55; cursor: not-allowed; }
.pay-option.soon input { cursor: not-allowed; }
.pay-option .po-soon { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; vertical-align: middle;
    background: var(--ivory); color: var(--noir); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* ===========================================================================
 * PLAIN SUB-MENU under a main-nav item (Admin -> Header & Menu -> Sub-menu).
 * Hover / keyboard-focus dropdown on desktop; the phone drawer renders the same
 * links indented via .menu-sub, which it already had for the mega item.
 * ======================================================================== */
.nav-drop { position: relative; display: inline-flex; align-items: center; }
.nav-drop > a { display: inline-flex; align-items: center; gap: 4px; }
.nav-drop .nav-caret { font-size: .7em; opacity: .6; }
.nav-drop .drop {
    position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px);
    min-width: 220px; margin: 0; padding: 8px 0; list-style: none;
    background: var(--plum); border: 1px solid var(--line); border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
    z-index: 56;
}
.nav-drop:hover .drop, .nav-drop:focus-within .drop { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s; }
.nav-drop .drop li a {
    display: block; padding: 9px 18px; font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-soft); white-space: nowrap;
}
.nav-drop .drop li a:hover { background: var(--noir-2); color: var(--ivory); }