/* ═════════════════════════════════════════════════
AVI ENTERPRISES · KIDS ETHNIC HUB · /new
Luxury editorial — atelier of young nobility
Built for B2B retailers 35+
Vanilla HTML · GSAP + Lenis for motion
═════════════════════════════════════════════════ */
:root{
/* Palette — Editorial Professional (reworked 2026-04) */
--ivory:#FAF6EE; --ivory-deep:#F2EBDC; --off-white:#F7F2E8;
--beige:#E8DCC4; --cream:#EFE5D0;
--champagne:#C9A66B; /* brand crest + decorative rules ONLY — never text */
--champagne-light:#D9BC8A; --champagne-dark:#A6834E;
--champagne-text:#5E451F; /* deep champagne — 8.2:1 on ivory, small-text safe */
--champagne-line:#D9CDB6; /* sharper border than rgba champagne */
--taupe:#8A7968; --taupe-dark:#554A3E; --taupe-deep:#3F362D;
--stone:#524841; /* body support for long reads — 9.4:1 on ivory */
--ink:#1F1A14; /* was #2B2419 — deeper, stronger on ivory */
--ink-soft:#3A3125;
/* JS-expected compat aliases */
--black:var(--ivory); --deep:var(--ivory-deep); --surface:var(--off-white);
--gold:var(--champagne-dark); --gold-light:var(--champagne); --gold-dim:rgba(201,166,107,0.12);
--white:var(--ink); --muted:var(--stone); --border:var(--champagne-line);
--red:#A04848; --green:#5A7A4A; --blue:#4A6A8A;
/* Motion */
--ease-gentle: cubic-bezier(.25,.1,.25,1);
--ease-out-soft: cubic-bezier(.2,.6,.2,1);
--dur-fast: 280ms;
--dur-med: 480ms;
--dur-slow: 800ms;
}
*{box-sizing:border-box;margin:0;padding:0;}
/* Brand-tinted tap highlight on touch devices — iOS/Android default is a
harsh blue box. We use a low-alpha champagne so taps register visually
without flashing electric-blue across the editorial palette. */
*{-webkit-tap-highlight-color:rgba(201,166,107,0.18);}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
background:
radial-gradient(ellipse at 20% 10%, rgba(201,166,107,0.08) 0%, transparent 50%),
radial-gradient(ellipse at 80% 80%, rgba(232,220,196,0.18) 0%, transparent 50%),
linear-gradient(180deg, #FAF6EE 0%, #F2EBDC 100%);
color:var(--ink);
font-family:'Inter',sans-serif;font-weight:450;font-size:16px;line-height:1.6;
letter-spacing:-0.005em;
overflow-x:hidden;min-height:100vh;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
font-feature-settings:'ss01','cv11','tnum' 0;
}
img{max-width:100%;display:block;}
button{cursor:pointer;font-family:'Inter',sans-serif;font-size:inherit;}
input,textarea,select{font-family:'Inter',sans-serif;font-size:inherit;}
a{color:inherit;}
.display{font-family:'Cormorant Garamond',serif;font-weight:500;letter-spacing:-0.01em;color:var(--ink);}
.display-italic{font-family:'Cormorant Garamond',serif;font-style:normal;font-weight:500;color:var(--ink);letter-spacing:-0.01em;}
.eyebrow{font-size:11.5px;letter-spacing:0.18em;text-transform:uppercase;font-weight:700;color:var(--ink);}
.meta{font-size:12px;letter-spacing:0.1em;text-transform:uppercase;font-weight:600;color:var(--stone);}
.gold-gradient{color:var(--ink);} /* gradient demoted to solid ink — was failing AA */
.section-heading{
font-family:'Inter',sans-serif;font-weight:600;
font-size:clamp(26px,3.2vw,38px);line-height:1.15;letter-spacing:-0.02em;
color:var(--ink);
}
.section-heading em{
font-family:'Cormorant Garamond',serif;font-style:normal;font-weight:500;
color:var(--ink);font-size:1.14em;letter-spacing:-0.012em;
}
p{color:var(--ink);margin-bottom:14px;}
p:last-child{margin-bottom:0;}
/* ── MARQUEE ── */
.marquee-bar{
position:fixed;top:0;left:0;right:0;z-index:110;
background:var(--ink);color:var(--ivory);
height:34px;display:flex;align-items:center;overflow:hidden;
border-bottom:1px solid rgba(201,166,107,0.25);
/* Extend the black into the notch / status-bar area on iOS — without
this, the marquee text ducks under the status bar. */
padding-top:env(safe-area-inset-top,0);
box-sizing:content-box;
}
.marquee-track{
display:flex;white-space:nowrap;animation:marquee 45s linear infinite;
will-change:transform;
}
.marquee-track:hover{animation-play-state:paused;}
.marquee-item{
display:inline-flex;align-items:center;gap:42px;padding-right:42px;
font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;font-weight:600;
color:rgba(250,246,238,0.92);white-space:nowrap;
}
.marquee-item::after{
content:'';display:inline-block;width:6px;height:6px;transform:rotate(45deg);
background:var(--champagne);margin-left:42px;flex-shrink:0;
}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
/* ── NAV ── */
nav{
position:fixed;top:calc(34px + env(safe-area-inset-top,0));left:0;right:0;z-index:100;
padding:18px 56px;display:flex;align-items:center;justify-content:space-between;
background:rgba(250,246,238,0.88);
backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1);
border-bottom:1px solid rgba(201,166,107,0.18);
transition:padding var(--dur-med) var(--ease-gentle), background var(--dur-med) var(--ease-gentle);
}
nav.scrolled{padding:12px 56px;background:rgba(250,246,238,0.97);border-bottom-color:rgba(201,166,107,0.35);}
.nav-brand{display:flex;align-items:center;gap:14px;cursor:pointer;text-decoration:none;flex-shrink:0;}
.nav-brand img{height:44px;width:auto;transition:transform var(--dur-med) var(--ease-gentle);}
.nav-brand:hover img{transform:rotate(-2deg) scale(1.05);}
.nav-brand-text-wrap{border-left:1px solid rgba(201,166,107,0.35);padding-left:14px;}
.nav-brand-text{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:600;letter-spacing:0.005em;color:var(--ink);line-height:1;}
.nav-brand-sub{font-size:10.5px;letter-spacing:0.12em;color:var(--champagne-text);margin-top:5px;font-weight:700;text-transform:uppercase;}
.nav-links{display:flex;gap:38px;list-style:none;align-items:center;}
.nav-links a{
font-size:13px;letter-spacing:0.04em;text-transform:none;font-weight:600;
color:var(--ink);text-decoration:none;transition:color var(--dur-fast) ease;cursor:pointer;
position:relative;white-space:nowrap;padding:6px 0;
}
.nav-links a::after{content:"";position:absolute;bottom:-2px;left:50%;width:0;height:1px;background:var(--ink);transition:all var(--dur-med) var(--ease-gentle);}
.nav-links a:hover,.nav-links a.active{color:var(--champagne-text);}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;left:0;background:var(--champagne-text);}
/* Admin nav link — visually distinct so the admin can see their elevated-access route at a glance.
Red accent + subtle background tint differentiates from the normal ink-coloured nav items. */
.nav-links a.nav-admin-pill{
color:var(--red);border:1px solid var(--red);padding:6px 14px;border-radius:2px;
background:rgba(160,72,72,0.07);margin-left:4px;
}
.nav-links a.nav-admin-pill:hover,.nav-links a.nav-admin-pill.active{
background:var(--red);color:var(--ivory);border-color:var(--red);
}
.nav-links a.nav-admin-pill::after,.nav-links a.nav-admin-pill.active::after{display:none;}
.mobile-link.mobile-admin-pill{
color:var(--red);border:1px solid var(--red);background:rgba(160,72,72,0.06);
padding:12px 14px;margin-top:8px;
}
.nav-right{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.nav-user{font-size:13px;letter-spacing:0.02em;color:var(--stone);display:flex;align-items:center;gap:10px;font-weight:500;}
.nav-user-badge{background:var(--gold-dim);border:1px solid var(--champagne-text);color:var(--champagne-text);font-size:10.5px;letter-spacing:0.08em;padding:4px 11px;border-radius:2px;font-weight:700;text-transform:uppercase;}
.nav-btn{
font-size:13px;letter-spacing:0.02em;text-transform:none;font-weight:600;
padding:11px 22px;border:1px solid var(--ink);
background:transparent;color:var(--ink);
transition:all var(--dur-med) var(--ease-gentle);
display:flex;align-items:center;gap:9px;min-height:44px;
}
.nav-btn:hover{background:var(--ink);color:var(--ivory);}
.nav-btn.solid{background:var(--ink);color:var(--ivory);border-color:var(--ink);}
.nav-btn.solid:hover{background:var(--champagne-text);color:var(--ivory);border-color:var(--champagne-text);}
.nav-logout{font-size:13px;letter-spacing:0.01em;color:var(--stone);background:none;border:none;transition:color var(--dur-fast) ease;padding:8px;min-height:44px;font-weight:600;}
.nav-logout:hover{color:var(--red);}
.cart-count{background:var(--ivory);color:var(--ink);font-size:10.5px;font-weight:700;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
/* ── Signed-in action buttons (2026-04-21 redesign) ──
Two buttons sit under the customer name in the nav-user-area:
· Order List (primary / active transaction — filled champagne + icon + count pill)
· My Orders (secondary / history — ghost outline, clearly not the same button)
The visual hierarchy tells the retailer at a glance which is "what I'm
building right now" vs "what I've ordered before". */
.nav-cart-primary{
display:inline-flex;align-items:center;gap:9px;
background:var(--champagne-text);color:var(--ivory);
border:1px solid var(--champagne-text);
font-size:12.5px;font-weight:700;letter-spacing:0.03em;text-transform:none;
padding:9px 13px 9px 12px;min-height:42px;cursor:pointer;
transition:all var(--dur-fast) ease;
font-family:inherit;
}
.nav-cart-primary:hover{background:var(--ink);border-color:var(--ink);}
.nav-cart-primary .nav-ico{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.nav-cart-primary .cart-count{
background:rgba(255,255,255,0.22);color:var(--ivory);
min-width:22px;height:20px;padding:0 6px;border-radius:999px;
font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;
}
.nav-orders-btn{
display:inline-flex;align-items:center;gap:7px;
background:transparent;color:var(--stone);
border:1px solid rgba(94,69,31,0.35);
font-size:12px;font-weight:600;letter-spacing:0.03em;
padding:8px 12px;min-height:42px;cursor:pointer;
transition:all var(--dur-fast) ease;
font-family:inherit;
}
.nav-orders-btn:hover{color:var(--ink);border-color:var(--ink);background:rgba(94,69,31,0.05);}
.nav-orders-btn .nav-ico{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
/* Mobile equivalents — same hierarchy inside the mobile-user-area. */
.mobile-user-actions{display:flex;flex-direction:column;gap:10px;margin-top:14px;}
.mobile-user-btn{
display:flex;align-items:center;gap:12px;
padding:13px 16px;min-height:48px;width:100%;
font-size:14.5px;font-weight:600;letter-spacing:0.02em;
cursor:pointer;text-align:left;font-family:inherit;
transition:all var(--dur-fast) ease;
}
.mobile-cart-btn{background:var(--champagne-text);color:var(--ivory);border:1px solid var(--champagne-text);}
.mobile-cart-btn:hover,.mobile-cart-btn:active{background:var(--ink);border-color:var(--ink);}
.mobile-cart-btn .cart-count{background:rgba(255,255,255,0.22);color:var(--ivory);margin-left:auto;width:auto;min-width:22px;height:20px;padding:0 7px;border-radius:999px;}
.mobile-orders-btn{background:transparent;color:var(--ink);border:1px solid rgba(94,69,31,0.35);}
.mobile-orders-btn:hover,.mobile-orders-btn:active{background:rgba(94,69,31,0.05);border-color:var(--ink);}
.mobile-user-btn .nav-ico{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
#hamburger{display:none;background:transparent;border:1px solid var(--champagne-dark);color:var(--champagne-dark);padding:9px 14px;font-size:18px;min-height:44px;min-width:44px;align-items:center;gap:9px;font-family:inherit;cursor:pointer;transition:all var(--dur-fast) ease;}
#hamburger .hb-label{font-size:11.5px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;line-height:1;}
#hamburger:hover,#hamburger:focus-visible{background:var(--ink);color:var(--ivory);border-color:var(--ink);}
/* Very narrow phones (<=360px) — drop the word, keep the icon alone. */
@media (max-width: 360px){#hamburger .hb-label{display:none;}}
/* ── PAGES ── */
.page{display:none;min-height:100vh;padding-top:110px;}
.page.active{display:block;}
/* ═══════════════════════════════
MOTION — reveal / stagger
═══════════════════════════════ */
.reveal-up{opacity:0;transform:translateY(32px);transition:opacity 800ms var(--ease-out-soft), transform 800ms var(--ease-out-soft);}
.reveal-up.in{opacity:1;transform:translateY(0);}
.reveal-fade{opacity:0;transition:opacity 800ms var(--ease-out-soft);}
.reveal-fade.in{opacity:1;}
.reveal-mask{opacity:0;clip-path:inset(0 100% 0 0);transition:opacity 800ms var(--ease-out-soft), clip-path 1200ms var(--ease-out-soft);}
.reveal-mask.in{opacity:1;clip-path:inset(0 0% 0 0);}
/* Stagger helpers */
.stagger > *{opacity:0;transform:translateY(26px);transition:opacity 700ms var(--ease-out-soft), transform 700ms var(--ease-out-soft);}
.stagger.in > *{opacity:1;transform:translateY(0);}
.stagger.in > *:nth-child(1){transition-delay:0ms;}
.stagger.in > *:nth-child(2){transition-delay:70ms;}
.stagger.in > *:nth-child(3){transition-delay:140ms;}
.stagger.in > *:nth-child(4){transition-delay:210ms;}
.stagger.in > *:nth-child(5){transition-delay:280ms;}
.stagger.in > *:nth-child(6){transition-delay:350ms;}
.stagger.in > *:nth-child(7){transition-delay:420ms;}
.stagger.in > *:nth-child(8){transition-delay:490ms;}
.stagger.in > *:nth-child(n+9){transition-delay:560ms;}
/* ═══════════════════════════════
HOME HERO — editorial with crest
═══════════════════════════════ */
.home-hero{
min-height:calc(100vh - 144px);display:grid;grid-template-columns:1.2fr 0.8fr;
align-items:center;gap:60px;padding:56px 56px 80px;position:relative;
}
.hero-corners{position:absolute;inset:24px;pointer-events:none;z-index:1;}
.hero-corners::before,.hero-corners::after,
.hero-corners>span::before,.hero-corners>span::after{
content:'';position:absolute;width:28px;height:28px;
border:1px solid var(--champagne);opacity:0.32;
}
.hero-corners::before{top:0;left:0;border-right:none;border-bottom:none;}
.hero-corners::after{top:0;right:0;border-left:none;border-bottom:none;}
.hero-corners>span::before{bottom:0;left:0;border-right:none;border-top:none;}
.hero-corners>span::after{bottom:0;right:0;border-left:none;border-top:none;}
.hero-left{position:relative;z-index:2;}
.hero-meta-row{
display:flex;gap:40px;align-items:flex-start;
padding:24px 0;border-top:1px solid rgba(201,166,107,0.25);border-bottom:1px solid rgba(201,166,107,0.25);
margin-bottom:36px;max-width:620px;
}
.hero-meta-cell{flex:1;}
.hero-meta-cell + .hero-meta-cell{border-left:1px solid rgba(201,166,107,0.25);padding-left:30px;}
.hero-meta-label{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--stone);margin-bottom:8px;font-weight:700;}
.hero-meta-val{font-family:'Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:17px;color:var(--ink);font-weight:600;line-height:1.1;letter-spacing:-0.005em;}
.hero-status-row{
position:absolute;top:56px;right:56px;z-index:2;
display:flex;align-items:center;gap:10px;
font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink);font-weight:700;
}
.hero-status-dot{width:8px;height:8px;border-radius:50%;background:#5A7A4A;animation:statusPulse 2.4s ease-in-out infinite;}
@keyframes statusPulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(90,122,74,0.55);}50%{opacity:0.85;box-shadow:0 0 0 6px rgba(90,122,74,0);}}
.hero-kicker{
font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--champagne-text);font-weight:700;
margin-bottom:24px;
}
.hero-title{
font-family:'Cormorant Garamond',serif;font-weight:400;
font-size:clamp(54px,8vw,96px);line-height:0.98;color:var(--ink);
margin-bottom:28px;letter-spacing:-0.012em;
}
.hero-title-italic{
font-family:'Cormorant Garamond',serif;font-style:normal;font-weight:500;
display:block;color:var(--ink);letter-spacing:-0.012em;
}
.hero-desc{
font-family:'Inter',sans-serif;font-style:normal;font-weight:450;
font-size:clamp(16px,1.3vw,18px);color:var(--stone);line-height:1.6;
max-width:540px;margin-bottom:36px;letter-spacing:-0.005em;
}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;}
.btn-primary{
background:var(--ink);color:var(--ivory);border:1px solid var(--ink);
font-size:14px;letter-spacing:0.01em;text-transform:none;font-weight:600;
padding:14px 26px;transition:all var(--dur-med) var(--ease-gentle);min-height:48px;
}
.btn-primary:hover{background:var(--champagne-text);border-color:var(--champagne-text);color:var(--ivory);transform:translateY(-1px);}
.btn-outline{
background:transparent;color:var(--ink);border:1px solid var(--ink);
font-size:14px;letter-spacing:0.01em;text-transform:none;font-weight:600;
padding:14px 26px;transition:all var(--dur-med) var(--ease-gentle);min-height:48px;
}
.btn-outline:hover{background:var(--ink);color:var(--ivory);border-color:var(--ink);}
/* Crest panel right — dark walnut backdrop for the animated atelier mark.
Needed so the screen-blended gold gleams/blooms actually read. */
.hero-right{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;}
.crest-wrap{
position:relative;width:100%;max-width:460px;aspect-ratio:1;
display:flex;align-items:center;justify-content:center;
border-radius:50%;overflow:hidden;
/* Walnut panel — matches the LogoScene film backdrop */
background:
radial-gradient(ellipse at 50% 52%, #3a2416 0%, #2a180d 55%, #120904 100%);
box-shadow:
0 40px 90px -30px rgba(18,9,4,0.55),
inset 0 0 0 1px rgba(201,166,107,0.18);
}
/* Edge vignette — darkens the outer ring of the panel so the crest pops.
Kept within the panel's circle (no ::after ring — it was aliasing on some displays). */
.crest-wrap::before{
content:'';position:absolute;inset:0;border-radius:50%;
background:
radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 58%, rgba(0,0,0,0.55) 100%);
pointer-events:none;z-index:3;
}
/* Static ![]()
fallback — shown when prefers-reduced-motion:reduce.
Sits inside the walnut panel at the same scale the animated stage uses. */
.crest-img{
width:84%;height:auto;position:absolute;top:50%;left:50%;
transform:translate(-50%,-50%);
z-index:2;display:none;
filter:drop-shadow(0 18px 32px rgba(18,9,4,0.45));
}
/* Animated crest container — sized so the 1000x1000 SVG coord system fits the walnut panel */
.crest-anim-wrap{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
z-index:1;
}
.crest-anim-stage{
position:relative;width:84%;aspect-ratio:1;
transform-origin:center;
will-change:transform,opacity;
}
.crest-anim-stage img.crest-art{
width:100%;height:100%;display:block;user-select:none;pointer-events:none;
filter:drop-shadow(0 18px 32px rgba(18,9,4,0.45));
}
.crest-anim-svg{
position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
mix-blend-mode:screen;
}
/* ── FEATURES STRIP ── */
.features-strip{
display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
background:var(--beige);margin:0 56px 80px;border:1px solid var(--beige);
}
.feat-box{background:var(--ivory);padding:42px 32px;text-align:center;transition:background var(--dur-med) ease;}
.feat-box:hover{background:var(--off-white);}
.feat-roman{font-family:'Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:0.08em;color:var(--champagne-text);margin-bottom:14px;font-weight:700;}
.feat-title{font-family:'Inter',sans-serif;font-size:20px;color:var(--ink);margin-bottom:10px;font-weight:600;letter-spacing:-0.01em;}
.feat-desc{font-size:14px;color:var(--stone);line-height:1.6;letter-spacing:-0.002em;}
/* ── FOOTER ── */
footer{
padding:48px 56px 36px;text-align:center;border-top:1px solid var(--border);
background:var(--ivory-deep);
}
.footer-brand{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:12px;}
.footer-brand img{height:40px;width:auto;}
.footer-brand-name{font-family:'Inter',sans-serif;font-weight:700;letter-spacing:0.04em;font-size:15px;color:var(--ink);}
.footer-copy{font-size:14px;color:var(--stone);letter-spacing:-0.002em;margin-bottom:16px;font-weight:450;}
.footer-logout{
background:transparent;border:1px solid var(--stone);color:var(--stone);
font-size:13px;letter-spacing:0.01em;text-transform:none;font-weight:600;
padding:9px 20px;transition:all var(--dur-fast) ease;min-height:40px;
}
.footer-logout:hover{border-color:var(--red);color:var(--red);background:transparent;}
/* ═══════════════════════════════
CAT HERO (non-home pages)
═══════════════════════════════ */
.cat-hero{
padding:72px 56px 44px;border-bottom:1px solid var(--border);position:relative;
}
.cat-hero-top{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:18px;}
.page-eyebrow{
font-size:11.5px;letter-spacing:0.18em;text-transform:uppercase;
color:var(--ink);font-weight:700;margin-bottom:18px;
}
.page-title{
font-family:'Inter',sans-serif;font-size:clamp(34px,4.4vw,52px);font-weight:600;
color:var(--ink);line-height:1.05;letter-spacing:-0.022em;
}
.page-title em{
font-family:'Cormorant Garamond',serif;font-style:normal;font-weight:500;
color:var(--ink);font-size:1.08em;letter-spacing:-0.008em;
}
.access-badge{
background:rgba(94,69,31,0.08);border:1px solid var(--champagne-text);color:var(--champagne-text);
font-size:11.5px;letter-spacing:0.08em;padding:8px 14px;font-weight:700;text-transform:uppercase;
}
/* ── CATALOG GATE ── */
.catalog-gate{
display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:110px 24px;text-align:center;min-height:60vh;
}
.gate-icon{font-size:48px;margin-bottom:24px;opacity:0.85;color:var(--champagne-text);}
.gate-title{font-family:'Inter',sans-serif;font-size:28px;font-weight:600;color:var(--ink);margin-bottom:12px;letter-spacing:-0.015em;}
.gate-sub{
font-family:'Inter',sans-serif;font-style:normal;font-weight:450;
font-size:16px;color:var(--stone);line-height:1.55;max-width:460px;margin-bottom:28px;
}
.gate-btn{
background:var(--ink);color:var(--ivory);border:1px solid var(--ink);
font-size:14px;letter-spacing:0.01em;text-transform:none;font-weight:600;
padding:14px 28px;transition:all var(--dur-med) ease;min-height:48px;
}
.gate-btn:hover{background:var(--champagne-text);color:var(--ivory);border-color:var(--champagne-text);}
/* ── SEGMENT BAR ── */
.seg-bar{
display:flex;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--border);
padding:0 56px;background:var(--ivory);
}
.seg-bar::-webkit-scrollbar{display:none;}
.seg-btn{
background:transparent;border:none;border-bottom:2px solid transparent;
color:var(--stone);font-size:13px;letter-spacing:0.02em;text-transform:none;font-weight:600;
padding:18px 18px;cursor:pointer;white-space:nowrap;transition:all var(--dur-fast) ease;flex-shrink:0;min-height:48px;
}
.seg-btn:hover{color:var(--ink);}
.seg-btn.active{color:var(--champagne-text);border-bottom-color:var(--champagne);}
.seg-btn.sale-btn{color:var(--red);}
.seg-btn.sale-btn.active{color:var(--red);border-bottom-color:var(--red);}
.seg-btn.sale-btn::before{content:"";display:inline-block;width:6px;height:6px;background:var(--red);border-radius:50%;margin-right:7px;vertical-align:middle;animation:pulse 1.5s ease-in-out infinite;}
.seg-btn.locked{color:rgba(85,74,62,0.3);cursor:not-allowed;}
.seg-btn.locked::after{content:" 🔒";font-size:9px;}
/* ── STATS ROW — 2026-04-21 shrink: vertical weight roughly halved so the
catalog header reads faster and the price banner below has room to land. */
.stats-row{
display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
background:var(--beige);margin:0 56px 18px;border:1px solid var(--beige);
}
.stat-box{background:var(--off-white);padding:14px 12px;text-align:center;}
.stat-n{font-family:'Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:22px;font-weight:600;color:var(--ink);line-height:1;letter-spacing:-0.015em;}
.stat-l{font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--stone);margin-top:5px;font-weight:600;}
/* ══ Filter bar (2026-04-22): colour chips + New Arrivals cross-segment toggle.
Sits between the segment bar and the stats ribbon. Colour chips rebuild per
segment (colours are derived from the live product names via getColor()).
"New Arrivals" pill on the right flips into a cross-segment view of all
items where isStillNew(p) across the buyer's allowed_segs. */
.filter-bar{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
margin:0 56px 14px;padding:0;
}
.colour-chips{
display:flex;align-items:center;gap:7px;flex-wrap:wrap;flex:1;
}
.colour-chips-label{
font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--stone);
font-weight:600;margin-right:4px;
}
.colour-chip{
background:transparent;border:1px solid var(--champagne-line);
color:var(--stone);
font-size:12px;font-weight:600;letter-spacing:0.02em;
padding:6px 11px;min-height:32px;cursor:pointer;
transition:all var(--dur-fast) ease;font-family:inherit;
display:inline-flex;align-items:center;gap:6px;
}
.colour-chip:hover{border-color:var(--ink);color:var(--ink);}
.colour-chip.active{background:var(--ink);border-color:var(--ink);color:var(--ivory);}
.colour-chip .chip-count{
font-size:10.5px;font-weight:700;opacity:0.72;
font-variant-numeric:tabular-nums;
}
.colour-chip.active .chip-count{opacity:0.85;}
.new-arrivals-toggle{
background:transparent;border:1px solid var(--champagne-text);
color:var(--champagne-text);
font-size:12px;font-weight:700;letter-spacing:0.06em;
padding:6px 12px;min-height:32px;cursor:pointer;
transition:all var(--dur-fast) ease;font-family:inherit;
display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
margin-left:auto;
}
.new-arrivals-toggle:hover{background:rgba(94,69,31,0.06);}
.new-arrivals-toggle.active{
background:var(--champagne-text);color:var(--ivory);border-color:var(--champagne-text);
}
.new-arrivals-toggle .na-sparkle{font-size:10px;}
@media (max-width:780px){
.filter-bar{margin-left:22px;margin-right:22px;}
.colour-chips-label{width:100%;margin-bottom:2px;}
.new-arrivals-toggle{margin-left:0;}
}
/* ── SEG INFO ── */
.seg-info{padding:0 56px;margin-bottom:24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;}
/* Wholesale Rates banner (2026-04-21 rework: dark ink strip for visibility).
Previously a low-contrast champagne-on-ivory banner that faded into the
page. Now a solid ink strip with champagne/ivory type — reads like a real
trade price board, impossible to miss on mobile. */
.price-banner{
display:flex;align-items:center;gap:12px;flex-wrap:wrap;
margin:18px 56px 18px;padding:13px 18px;
background:var(--ink);border:1px solid var(--champagne-text);
font-size:14px;color:var(--ivory);font-weight:500;line-height:1.35;
}
.price-banner-dot{width:8px;height:8px;border-radius:50%;background:var(--champagne-light);flex-shrink:0;}
.price-banner-label{color:var(--champagne-light);font-weight:700;letter-spacing:0.14em;text-transform:uppercase;font-size:11px;}
.price-banner-sep{color:rgba(201,166,107,0.5);margin:0 2px;}
.price-banner-range{color:var(--ivory);font-weight:700;font-variant-numeric:tabular-nums;font-size:17px;letter-spacing:-0.005em;}
.price-banner-unit{color:rgba(250,246,238,0.75);font-weight:500;font-size:13px;}
.price-banner-note{color:rgba(250,246,238,0.62);font-weight:450;margin-left:auto;font-size:12.5px;font-style:italic;}
.seg-title-text{font-family:'Inter',sans-serif;font-size:24px;font-weight:600;color:var(--ink);letter-spacing:-0.015em;}
.seg-item-count{font-size:13px;letter-spacing:0.02em;color:var(--stone);margin-top:5px;font-weight:500;text-transform:none;}
.search-wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.prod-search-input{
background:transparent;border:none;border-bottom:1px solid var(--border);
color:var(--ink);font-size:15px;padding:10px 0;width:240px;outline:none;
transition:border-color var(--dur-fast) ease;
}
.prod-search-input:focus{border-color:var(--champagne);}
.prod-search-input::placeholder{color:var(--taupe-dark);font-size:13px;}
.search-count{font-size:11px;letter-spacing:0.1em;color:var(--champagne-text);font-weight:600;}
.sync-mini-btn{
background:transparent;border:1px solid var(--taupe-dark);color:var(--taupe-dark);
font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase;padding:8px 16px;font-weight:600;
transition:all var(--dur-fast) ease;min-height:40px;
}
.sync-mini-btn:hover{border-color:var(--ink);color:var(--ink);background:var(--ivory-deep);}
/* ═══════════════════════════════
PRODUCT GRID — editorial cards
═══════════════════════════════ */
.prod-grid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1px;
background:var(--beige);margin:0 56px 80px;border:1px solid var(--beige);
}
.prod-card{background:var(--ivory);transition:all var(--dur-med) var(--ease-gentle);position:relative;
opacity:0;transform:translateY(24px);
}
.prod-card.in{opacity:1;transform:translateY(0);}
.prod-card:hover{background:var(--off-white);z-index:5;box-shadow:0 14px 32px -12px rgba(139,106,60,0.28);}
.prod-img-wrap{height:300px;overflow:hidden;position:relative;background:var(--ivory-deep);cursor:pointer;
/* On iOS long-press brings up a save-image/look-up sheet that derails the
tap flow for buyers. Disable the callout and user-select for product
thumbnails. Buyers who want the image still have the "View image"
lightbox button + download there. */
-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
}
.prod-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--ease-gentle);pointer-events:none;}
.prod-card:hover .prod-img-wrap img{transform:scale(1.06);}
.prod-emoji{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:58px;background:linear-gradient(135deg,var(--off-white),var(--ivory-deep));opacity:0.6;}
.prod-bdg{
position:absolute;top:14px;left:14px;font-size:9px;letter-spacing:0.22em;
text-transform:uppercase;padding:6px 11px;font-weight:500;
}
.prod-bdg.new{background:var(--champagne);color:var(--ivory);}
.prod-bdg.limited{background:var(--red);color:var(--ivory);}
.prod-bdg.sold{background:rgba(85,74,62,0.45);color:var(--ivory);}
.prod-bdg.sale{background:var(--red);color:var(--ivory);}
.prod-bdg.exclusive{background:var(--ink);color:var(--champagne-light);border:1px solid var(--champagne);}
.view-img-btn{
position:absolute;bottom:14px;right:14px;
background:rgba(43,36,25,0.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
border:1px solid var(--ink);color:var(--ivory);
font-size:10px;letter-spacing:0.2em;text-transform:uppercase;font-weight:600;
padding:7px 12px;transition:all var(--dur-fast) ease;opacity:0;
}
.prod-card:hover .view-img-btn{opacity:1;}
.view-img-btn:hover{background:var(--champagne);color:var(--ink);border-color:var(--champagne);}
/* Any pure-touch device (iPad, phone) — no :hover to trigger the fade-in,
so show the CTA permanently. The 540px media block above handles phones,
this catches every touch device regardless of width. */
@media (hover: none){
.view-img-btn,.share-img-btn{opacity:1;}
}
/* Share-product icon — companion to .view-img-btn on the image overlay.
Icon-only square button, same dark glass treatment so they visually pair. */
.share-img-btn{
position:absolute;bottom:14px;right:92px;
background:rgba(43,36,25,0.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
border:1px solid var(--ink);color:var(--ivory);
width:30px;height:28px;display:flex;align-items:center;justify-content:center;
padding:0;transition:all var(--dur-fast) ease;opacity:0;cursor:pointer;
}
.share-img-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.prod-card:hover .share-img-btn{opacity:1;}
.share-img-btn:hover{background:var(--champagne);color:var(--ink);border-color:var(--champagne);}
.prod-code-badge{
position:absolute;bottom:14px;left:14px;
background:var(--ink);
color:var(--ivory);
font-family:'Inter',sans-serif;font-variant-numeric:tabular-nums;font-weight:700;font-size:13px;
letter-spacing:0.02em;padding:6px 12px;border:1px solid var(--ink);
}
.prod-body{padding:22px;}
.prod-color{font-size:12px;color:var(--champagne-text);margin-bottom:6px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;}
.prod-name{font-family:'Inter',sans-serif;font-size:17px;font-weight:600;color:var(--ink);line-height:1.3;margin-bottom:14px;letter-spacing:-0.01em;}
.prod-sizes{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:16px;}
.prod-sz{font-size:12px;border:1px solid var(--champagne-line);padding:5px 8px;color:var(--stone);font-weight:600;letter-spacing:0.01em;font-variant-numeric:tabular-nums;}
.prod-actions{display:flex;gap:7px;}
.prod-order-btn{
flex:1;background:transparent;border:1px solid var(--ink);color:var(--ink);
font-size:13px;letter-spacing:0.01em;text-transform:none;font-weight:600;
padding:13px 10px;transition:all var(--dur-med) var(--ease-gentle);min-height:44px;
}
.prod-order-btn:hover{background:var(--ink);color:var(--ivory);border-color:var(--ink);}
.prod-cart-btn{
background:transparent;border:1px solid var(--ink);color:var(--ink);
font-size:16px;width:44px;display:flex;align-items:center;justify-content:center;transition:all var(--dur-med) ease;min-height:44px;
}
.prod-cart-btn:hover,.prod-cart-btn.in-cart{background:var(--ink);border-color:var(--ink);color:var(--champagne);}
.prod-btn-out{
width:100%;background:transparent;border:1px solid rgba(85,74,62,0.4);
color:var(--taupe-dark);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;font-weight:600;
padding:13px;cursor:not-allowed;min-height:44px;
}
.prod-empty{
grid-column:1/-1;text-align:center;padding:110px 20px;color:var(--stone);
font-family:'Inter',sans-serif;font-style:normal;font-size:16px;font-weight:500;
background:var(--off-white);
}
.prod-loading{grid-column:1/-1;text-align:center;padding:110px;background:var(--off-white);}
.spinner{
width:28px;height:28px;border:1px solid var(--border);border-top-color:var(--champagne);
border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 18px;
}
/* ── LIGHTBOX ── */
#lightbox{position:fixed;inset:0;background:rgba(43,36,25,0.94);backdrop-filter:blur(8px);z-index:500;display:none;align-items:center;justify-content:center;}
#lightbox.open{display:flex;}
.lb-inner{position:relative;max-width:90vw;max-height:90vh;}
.lb-img{max-width:90vw;max-height:85vh;object-fit:contain;display:block;box-shadow:0 30px 80px -20px rgba(0,0,0,0.5);}
.lb-close{position:absolute;top:-44px;right:0;background:transparent;border:none;color:rgba(250,246,238,0.7);font-size:26px;transition:color var(--dur-fast) ease;padding:8px;min-height:44px;min-width:44px;}
.lb-close:hover{color:var(--champagne-light);}
.lb-info{position:absolute;bottom:-42px;left:0;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;color:rgba(250,246,238,0.8);letter-spacing:0.05em;}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(43,36,25,0.7);backdrop-filter:blur(8px);border:1px solid rgba(201,166,107,0.4);color:var(--champagne-light);font-size:22px;width:50px;height:50px;display:flex;align-items:center;justify-content:center;transition:all var(--dur-med) ease;}
.lb-nav:hover{background:var(--champagne);color:var(--ivory);border-color:var(--champagne);}
.lb-prev{left:-62px;}.lb-next{right:-62px;}
/* ── CART DRAWER ──
Uses transform instead of right:-460px because a pixel offset of -460px only
hides the drawer when the drawer is narrower than 460px. On landscape phones
and tablets (viewport > ~484px), 95vw exceeds 460px and the drawer peeks out
from the right edge. transform: translateX(100%) is always exactly the width
of the drawer — safe at any viewport. Compositor-accelerated, cheaper too. */
#cart-drawer{position:fixed;right:0;top:0;bottom:0;width:460px;max-width:95vw;transform:translateX(calc(100% + 2rem));background:var(--ivory);border-left:1px solid var(--border);z-index:200;transition:transform 480ms var(--ease-gentle);display:flex;flex-direction:column;box-shadow:-24px 0 64px -20px rgba(0,0,0,0.15);will-change:transform;overscroll-behavior:contain;}
#cart-drawer.open{transform:translateX(0);}
.cart-header{padding:22px 24px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.cart-title{font-family:'Inter',sans-serif;font-size:22px;font-weight:600;color:var(--ink);letter-spacing:-0.015em;flex:1;min-width:0;}
.cart-clear{
background:transparent;border:1px solid var(--stone);color:var(--stone);
font-size:12.5px;letter-spacing:0.01em;font-weight:600;text-transform:none;
padding:7px 12px;cursor:pointer;transition:all var(--dur-fast) ease;min-height:36px;
}
.cart-clear:hover{border-color:var(--red);color:var(--red);}
.cart-clear:disabled,.cart-clear.hidden{display:none;}
.cart-close{background:transparent;border:none;color:var(--stone);font-size:26px;transition:color var(--dur-fast) ease;padding:8px;min-height:44px;min-width:44px;font-weight:600;line-height:1;}
.cart-close:hover{color:var(--ink);}
.cart-items{flex:1;overflow-y:auto;padding:18px 24px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.cart-item{background:var(--off-white);border:1px solid var(--border);padding:16px 40px 16px 16px;margin-bottom:12px;display:flex;gap:14px;align-items:flex-start;position:relative;transition:background var(--dur-fast) ease;}
.cart-item:hover{background:var(--ivory-deep);}
.cart-item-img{width:64px;height:74px;object-fit:cover;flex-shrink:0;background:var(--ivory-deep);}
.cart-item-emoji{width:64px;height:74px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:28px;background:var(--ivory-deep);opacity:0.6;}
.cart-item-info{flex:1;min-width:0;}
.cart-item-code{font-family:'Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:12px;color:var(--champagne-text);margin-bottom:4px;font-weight:700;letter-spacing:0.02em;}
.cart-item-seg{color:var(--stone);font-weight:600;letter-spacing:0;}
.cart-item-name{font-family:'Inter',sans-serif;font-size:15px;color:var(--ink);line-height:1.3;margin-bottom:6px;font-weight:600;letter-spacing:-0.005em;}
.cart-item-sizes{font-size:12.5px;color:var(--stone);margin-bottom:10px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:0.01em;}
.cart-item-qty{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.cart-item-pcs{font-size:12.5px;color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums;}
.cart-item-pcs strong{color:var(--ink);font-weight:700;}
.qty-label{font-size:12px;letter-spacing:0.04em;color:var(--stone);text-transform:uppercase;font-weight:700;}
.qty-input{width:62px;background:var(--ivory);border:1px solid var(--stone);color:var(--ink);font-size:15px;padding:6px 9px;text-align:center;outline:none;font-weight:600;font-variant-numeric:tabular-nums;}
.qty-input:focus{border-color:var(--ink);}
.cart-remove{position:absolute;top:10px;right:8px;background:transparent;border:none;color:var(--stone);font-size:18px;transition:color var(--dur-fast) ease;padding:6px 10px;font-weight:600;cursor:pointer;}
.cart-remove:hover{color:var(--red);}
.cart-empty{text-align:center;padding:80px 24px;color:var(--stone);font-family:'Inter',sans-serif;font-size:15px;font-weight:500;}
.cart-footer{padding:22px 24px calc(22px + env(safe-area-inset-bottom,0));border-top:1px solid var(--border);background:var(--ivory-deep);}
.cart-note-label{font-size:12px;letter-spacing:0.04em;color:var(--stone);text-transform:uppercase;margin-bottom:9px;font-weight:700;}
.cart-note-input{width:100%;background:var(--ivory);border:1px solid var(--border);color:var(--ink);font-size:14px;padding:11px;height:64px;resize:none;outline:none;margin-bottom:15px;font-family:'Inter',sans-serif;}
.cart-note-input:focus{border-color:var(--champagne);}
.cart-summary{display:flex;justify-content:space-between;margin-bottom:15px;}
.cart-summary-label{font-size:12.5px;letter-spacing:0.03em;color:var(--stone);text-transform:uppercase;font-weight:700;}
.cart-summary-val{font-size:13px;color:var(--ink);font-weight:500;}
.cart-wa-btn{
width:100%;background:var(--ink);color:var(--ivory);border:1px solid var(--ink);
font-size:14px;letter-spacing:0.01em;text-transform:none;font-weight:600;
padding:16px;display:flex;align-items:center;justify-content:center;gap:10px;
transition:all var(--dur-med) ease;min-height:52px;
}
.cart-wa-btn:hover{background:var(--champagne-text);color:var(--ivory);border-color:var(--champagne-text);}
.cart-wa-btn:disabled{background:rgba(82,72,65,0.3);color:rgba(82,72,65,0.6);border-color:rgba(82,72,65,0.3);cursor:not-allowed;}
#drawer-backdrop{position:fixed;inset:0;background:rgba(43,36,25,0.45);backdrop-filter:blur(4px);z-index:199;display:none;}
#drawer-backdrop.open{display:block;}
/* ── TOAST ── (order confirmation, signed-out-elsewhere, etc.)
#12: z-index pushed to 1500 so toasts always sit above any modal (login 999,
reg 998, conflict 1000). Previously "Signed out on another device" toasts
could appear behind a re-login dialog, invisible to the user. */
#toast-stack{
position:fixed;bottom:calc(24px + env(safe-area-inset-bottom,0));left:50%;transform:translateX(-50%);
z-index:1500;display:flex;flex-direction:column;gap:10px;
pointer-events:none; /* container doesn't intercept clicks; toasts do */
max-width:calc(100vw - 32px);
transition:bottom var(--dur-med) ease;
}
/* Lift toasts above the floating Order List pill so the two don't overlap
on the right edge of narrow phones (toast is full-width there). */
body.has-cart-items #toast-stack{bottom:calc(94px + env(safe-area-inset-bottom,0));}
.toast{
pointer-events:auto;
background:var(--ink);color:var(--ivory);
border:1px solid rgba(201,166,107,0.4);
padding:14px 18px;box-shadow:0 24px 60px -20px rgba(0,0,0,0.55);
display:flex;align-items:center;gap:16px;min-width:280px;max-width:520px;
font-size:14px;line-height:1.4;font-weight:450;
transform:translateY(16px);opacity:0;
transition:transform var(--dur-med) var(--ease-gentle), opacity var(--dur-med) var(--ease-gentle);
}
.toast.in{transform:translateY(0);opacity:1;}
.toast-title{font-weight:700;color:#fff;font-size:14px;margin-bottom:2px;}
.toast-body{flex:1;min-width:0;color:rgba(250,246,238,0.88);}
.toast-body strong{color:var(--champagne-light);font-weight:700;font-variant-numeric:tabular-nums;}
.toast-actions{display:flex;gap:8px;flex-shrink:0;}
.toast-btn{
background:transparent;border:1px solid rgba(250,246,238,0.3);color:var(--ivory);
font-size:13px;font-weight:600;padding:8px 14px;cursor:pointer;min-height:36px;
transition:all var(--dur-fast) ease;
}
.toast-btn:hover{background:var(--champagne-text);border-color:var(--champagne-text);color:var(--ivory);}
.toast-btn.primary{background:var(--champagne-text);border-color:var(--champagne-text);}
.toast-btn.primary:hover{background:var(--ivory);color:var(--ink);border-color:var(--ivory);}
.toast-close{
background:transparent;border:none;color:rgba(250,246,238,0.55);
font-size:18px;padding:4px 8px;cursor:pointer;line-height:1;
}
.toast-close:hover{color:var(--ivory);}
/* Centered-modal toast variant (user request 2026-04-21):
the order-confirmation prompt now uses a dim-backdrop overlay centered in
the viewport and persists until the user chooses Keep list / Clear list —
no auto-dismiss, no × close. Regular bottom toasts are unchanged. */
.toast-backdrop{
position:fixed;inset:0;z-index:1700;
/* Solid dim (no backdrop-filter blur) — keeps the focus effect while
staying fast on low-end Android. */
background:rgba(20,15,8,0.62);
display:flex;align-items:center;justify-content:center;
padding:24px;
opacity:0;transition:opacity var(--dur-med) var(--ease-gentle);
pointer-events:auto;
}
.toast-backdrop.in{opacity:1;}
.toast.toast-centered{
flex-direction:column;align-items:stretch;gap:14px;
min-width:280px;max-width:min(92vw,460px);
padding:22px 22px 18px;
border-radius:6px;
box-shadow:0 30px 80px -10px rgba(0,0,0,0.6);
transform:translateY(16px) scale(0.98);
}
.toast-centered.in{transform:translateY(0) scale(1);}
.toast-centered .toast-title{font-size:16px;margin-bottom:4px;}
.toast-centered .toast-body{font-size:14px;line-height:1.5;}
.toast-centered .toast-actions{width:100%;justify-content:flex-end;gap:10px;}
.toast-centered .toast-btn{min-height:40px;padding:10px 16px;font-size:13.5px;}
.toast-persistent .toast-close{display:none;}
@media (max-width:540px){
#toast-stack{bottom:calc(16px + env(safe-area-inset-bottom,0));}
body.has-cart-items #toast-stack{bottom:calc(76px + env(safe-area-inset-bottom,0));}
.toast{min-width:0;width:100%;padding:12px 14px;font-size:13px;flex-wrap:wrap;}
.toast-actions{width:100%;justify-content:flex-end;margin-top:4px;}
.toast.toast-centered{max-width:100%;padding:18px 18px 16px;}
.toast-centered .toast-actions{flex-wrap:wrap-reverse;}
.toast-centered .toast-btn{flex:1;min-width:110px;}
}
/* ── FLOATING CART ── */
#floating-cart{
position:fixed;
bottom:calc(30px + env(safe-area-inset-bottom,0));
right:calc(30px + env(safe-area-inset-right,0));
z-index:150;display:none;
background:var(--ink);color:var(--ivory);border:1px solid var(--ink);border-radius:50px;
padding:14px 22px;cursor:pointer;font-size:11.5px;letter-spacing:0.2em;font-weight:500;
box-shadow:0 12px 28px rgba(43,36,25,0.28);align-items:center;gap:11px;min-height:48px;
transition:all var(--dur-med) ease;
}
#floating-cart:hover{background:var(--champagne);color:var(--ink);border-color:var(--champagne);}
.fc-count{background:var(--ivory);color:var(--ink);border-radius:50%;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;}
/* When a drawer is open, hide the floating cart so it doesn't layer on top of
the sheet. body.drawer-open is toggled by openCart()/closeCart() and
toggleMobileMenu(). */
body.drawer-open #floating-cart,
body.drawer-open #scroll-top-fab{display:none !important;}
/* ── OFFLINE BANNER ──
Appears ONLY when navigator.onLine flips false. Fixed to the top of the
viewport (above the marquee) so there's no mistaking it for a decorative
ticker. Red accent + pulsing dot signals "something is wrong, look here."
Auto-hides when connectivity returns; a confirmation toast follows. */
#offline-banner{
position:fixed;top:0;left:0;right:0;z-index:1400;
padding:calc(9px + env(safe-area-inset-top,0)) 16px 9px;
background:#7E3232;color:#FAF6EE;
font-size:12px;letter-spacing:0.08em;text-transform:uppercase;font-weight:600;
text-align:center;transform:translateY(-100%);
transition:transform var(--dur-med) var(--ease-gentle);
box-shadow:0 4px 18px rgba(126,50,50,0.35);
}
#offline-banner.show{transform:translateY(0);}
#offline-banner .ob-dot{
display:inline-block;width:7px;height:7px;border-radius:50%;
background:#FAF6EE;margin-right:8px;vertical-align:middle;
animation:pulse 1.5s ease-in-out infinite;
}
/* ── SCROLL-TO-TOP FAB ──
Hidden by default; .show class toggled by a window scroll listener once
the user has scrolled past 600 px. Stacks above the floating-cart when
both are visible so they don't overlap on tall catalog pages. */
#scroll-top-fab{
position:fixed;
bottom:calc(30px + env(safe-area-inset-bottom,0));
right:calc(30px + env(safe-area-inset-right,0));
z-index:149;
width:46px;height:46px;border-radius:50%;
background:var(--ivory);color:var(--ink);
border:1px solid var(--champagne-dark);
display:none;align-items:center;justify-content:center;
box-shadow:0 10px 22px rgba(43,36,25,0.16);
cursor:pointer;opacity:0;transform:translateY(8px);
transition:opacity var(--dur-med) ease, transform var(--dur-med) ease, background var(--dur-fast) ease, color var(--dur-fast) ease;
}
#scroll-top-fab svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
#scroll-top-fab.show{display:flex;opacity:1;transform:translateY(0);}
#scroll-top-fab:hover,#scroll-top-fab:focus-visible{background:var(--ink);color:var(--ivory);border-color:var(--ink);}
/* When the floating-cart is visible (has items), lift the scroll-top FAB
above it. Floating cart is ~48 px tall + 16 px gap = 64 px offset. */
body.has-cart-items #scroll-top-fab{bottom:calc(94px + env(safe-area-inset-bottom,0));}
@media (max-width: 540px){
#scroll-top-fab{bottom:calc(16px + env(safe-area-inset-bottom,0));right:calc(16px + env(safe-area-inset-right,0));width:42px;height:42px;}
body.has-cart-items #scroll-top-fab{bottom:calc(76px + env(safe-area-inset-bottom,0));}
}
@media (max-width: 540px){
#floating-cart{bottom:16px;right:16px;padding:12px 18px;font-size:10.5px;letter-spacing:0.16em;}
.fc-count{width:22px;height:22px;font-size:11px;}
}
/* ── LOGIN MODAL ── */
#login-modal{
position:fixed;inset:0;z-index:999;display:none;align-items:center;justify-content:center;padding:24px;
background:
radial-gradient(ellipse at 20% 10%, rgba(201,166,107,0.15) 0%, transparent 50%),
radial-gradient(ellipse at 80% 80%, rgba(232,220,196,0.25) 0%, transparent 50%),
var(--ivory);
}
#login-modal.open{display:flex;}
.login-box{width:100%;max-width:440px;}
.login-logo-wrap{text-align:center;margin-bottom:38px;}
.login-logo-wrap img{height:80px;width:auto;margin:0 auto 16px;filter:drop-shadow(0 12px 22px rgba(139,106,60,0.25));}
.login-brand{font-family:'Cormorant Garamond',serif;font-size:22px;letter-spacing:0.02em;font-weight:600;color:var(--ink);}
.login-sub{font-size:12px;letter-spacing:0.1em;color:var(--champagne-text);margin-top:6px;font-weight:700;}
.login-heading{font-family:'Inter',sans-serif;font-size:28px;font-weight:600;color:var(--ink);margin-bottom:30px;letter-spacing:-0.015em;}
.login-heading em{font-family:'Cormorant Garamond',serif;font-style:normal;font-weight:500;color:var(--ink);font-size:1.08em;}
.login-field{margin-bottom:22px;}
.login-label{font-size:12.5px;letter-spacing:0.04em;text-transform:uppercase;color:var(--stone);display:block;margin-bottom:9px;font-weight:700;}
.login-input-wrap{position:relative;}
.login-input{width:100%;background:transparent;border:none;border-bottom:1px solid var(--border);padding:14px 42px 14px 0;font-size:16px;color:var(--ink);outline:none;transition:border-color var(--dur-fast) ease;min-height:48px;}
.login-input:focus{border-color:var(--champagne);}
.login-eye{position:absolute;right:0;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--taupe-dark);font-size:11px;padding:10px;letter-spacing:1px;background:none;border:none;transition:color var(--dur-fast) ease;font-weight:600;min-height:44px;}
.login-eye:hover{color:var(--ink);}
.login-btn{
width:100%;background:var(--ink);color:var(--ivory);border:1px solid var(--ink);
font-size:14px;letter-spacing:0.01em;text-transform:none;font-weight:600;
padding:16px;margin-top:26px;transition:all var(--dur-med) ease;min-height:54px;
}
.login-btn:hover{background:var(--champagne-text);color:var(--ivory);border-color:var(--champagne-text);}
.login-btn:disabled{opacity:.7;cursor:not-allowed;}
.spinner-inline{display:inline-block;width:14px;height:14px;border:2px solid rgba(250,246,238,0.3);border-top-color:var(--ivory);border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-right:9px;}
.login-error{font-size:13px;color:var(--red);margin-top:14px;text-align:center;display:none;}
.login-divider{height:1px;background:var(--border);margin:28px 0;}
.login-note{font-family:'Inter',sans-serif;font-size:14px;color:var(--stone);text-align:center;line-height:1.6;font-weight:450;}
.login-req-link{background:none;border:none;color:var(--ink);font-size:14px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-family:'Inter',sans-serif;font-weight:600;padding:6px;}
.login-req-link:hover{color:var(--champagne-text);}
.login-back{background:none;border:none;color:var(--taupe-dark);font-size:11.5px;letter-spacing:0.2em;cursor:pointer;margin-bottom:32px;display:flex;align-items:center;gap:8px;padding:8px 0;transition:color var(--dur-fast) ease;font-weight:600;min-height:44px;}
.login-back:hover{color:var(--ink);}
/* ── REGISTRATION ── */
#reg-overlay{
position:fixed;inset:0;z-index:998;display:none;align-items:center;justify-content:center;
overflow-y:auto;padding:48px 24px;
background:
radial-gradient(ellipse at 20% 10%, rgba(201,166,107,0.12) 0%, transparent 50%),
radial-gradient(ellipse at 80% 80%, rgba(232,220,196,0.22) 0%, transparent 50%),
var(--ivory);
}
#reg-overlay.open{display:flex;}
.reg-wrap{max-width:540px;width:100%;}
.reg-title{font-family:'Inter',sans-serif;font-size:26px;font-weight:600;color:var(--ink);margin-bottom:10px;letter-spacing:-0.015em;}
.reg-title em{font-family:'Cormorant Garamond',serif;font-style:normal;font-weight:500;color:var(--ink);font-size:1.08em;letter-spacing:-0.008em;}
.reg-sub{font-family:'Inter',sans-serif;font-size:15px;color:var(--stone);line-height:1.6;margin-bottom:28px;font-weight:450;}
/* Close button top-right of the registration overlay — always visible escape */
.reg-close{
position:absolute;top:18px;right:22px;
background:transparent;border:1px solid var(--champagne-line);color:var(--stone);
width:44px;height:44px;font-size:24px;line-height:1;cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:all var(--dur-fast) ease;z-index:2;border-radius:2px;
}
.reg-close:hover{border-color:var(--ink);color:var(--ink);}
.reg-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;}
.seg-check-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px;}
.seg-check{display:flex;align-items:center;gap:9px;cursor:pointer;padding:4px 0;min-height:32px;}
.seg-check input{accent-color:var(--ink);width:16px;height:16px;cursor:pointer;}
.seg-check span{font-size:14px;color:var(--ink);font-weight:500;}
.reg-success{text-align:center;padding:48px 0;}
.reg-success-icon{font-size:44px;margin-bottom:18px;color:var(--ink);}
.reg-success-title{font-family:'Inter',sans-serif;font-size:22px;font-weight:600;color:var(--ink);margin-bottom:10px;letter-spacing:-0.015em;}
.reg-success-msg{font-family:'Inter',sans-serif;font-size:15px;color:var(--stone);line-height:1.6;font-weight:450;}
/* ── APPROVE MODAL ── */
/* #11: approve-modal bumped to 900 so it always stacks above the mobile menu (300).
Collision used to be undefined when both were open. */
.approve-modal{position:fixed;inset:0;background:rgba(43,36,25,0.5);backdrop-filter:blur(6px);z-index:900;display:none;align-items:center;justify-content:center;padding:24px;}
.approve-modal.open{display:flex;}
.approve-box{background:var(--ivory);border:1px solid var(--border);padding:36px;width:100%;max-width:500px;box-shadow:0 32px 84px -22px rgba(139,106,60,0.4);}
.approve-title{font-family:'Inter',sans-serif;font-size:22px;font-weight:600;color:var(--ink);margin-bottom:24px;letter-spacing:-0.015em;}
.approve-field{margin-bottom:20px;}
.approve-label{font-size:12.5px;letter-spacing:0.04em;text-transform:uppercase;color:var(--stone);display:block;margin-bottom:7px;font-weight:700;}
.approve-input{width:100%;background:var(--off-white);border:1px solid var(--taupe-dark);color:var(--ink);font-size:15px;padding:11px 13px;outline:none;min-height:44px;}
.approve-input:focus{border-color:var(--ink);}
.seg-toggle-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:8px;}
/* Unchecked — muted, clearly passive */
.seg-toggle{
display:flex;align-items:center;gap:9px;padding:10px 13px;
border:1px solid var(--champagne-line);background:var(--off-white);color:var(--stone);
cursor:pointer;transition:all var(--dur-fast) ease;min-height:42px;position:relative;
}
.seg-toggle span{font-size:13.5px;color:var(--stone);font-weight:500;transition:color var(--dur-fast) ease;}
.seg-toggle::before{
content:'';width:16px;height:16px;border:1.5px solid var(--stone);border-radius:3px;
flex-shrink:0;transition:all var(--dur-fast) ease;background:var(--ivory);
}
.seg-toggle:hover{border-color:var(--champagne-text);background:var(--ivory);}
.seg-toggle:hover span{color:var(--ink);}
/* Checked — filled ink card, ivory text, gold checkmark */
.seg-toggle.selected{
border-color:var(--ink);background:var(--ink);
}
.seg-toggle.selected span{color:var(--ivory);font-weight:600;}
.seg-toggle.selected::before{
background:var(--champagne);border-color:var(--champagne);
background-image:
linear-gradient(45deg, transparent 38%, var(--ink) 38%, var(--ink) 46%, transparent 46%),
linear-gradient(-45deg, transparent 52%, var(--ink) 52%, var(--ink) 68%, transparent 68%);
background-size:100% 100%;
}
.seg-toggle.selected:hover{background:var(--ink-soft);}
/* Keyboard-focus outline for a11y */
.seg-toggle:focus-visible{outline:2px solid var(--champagne-text);outline-offset:2px;}
.approve-actions{display:flex;gap:11px;margin-top:24px;}
/* ── ADMIN PANEL ── */
.admin-wrap{padding:44px 56px;}
.admin-sync-section{background:var(--off-white);border:1px solid var(--taupe-dark);padding:30px 32px;margin-bottom:34px;}
.admin-sync-title{font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink);margin-bottom:20px;font-weight:700;}
.admin-sync-btns{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:20px;}
.sync-btn{
background:transparent;border:1px solid var(--ink);color:var(--ink);
font-size:13px;letter-spacing:0.01em;text-transform:none;font-weight:600;
padding:12px 22px;transition:all var(--dur-fast) ease;display:flex;align-items:center;gap:9px;min-height:44px;
}
.sync-btn:hover{border-color:var(--ink);color:var(--ivory);background:var(--ink);}
.sync-btn:disabled{opacity:.5;cursor:not-allowed;}
.sync-btn.loading{opacity:.7;cursor:not-allowed;}
#sync-result{background:rgba(201,166,107,0.06);border:1px solid rgba(201,166,107,0.25);padding:20px;font-size:13px;line-height:1.8;display:none;color:var(--ink);}
.sync-ok{color:var(--green);}
.sync-err{color:var(--red);}
.sync-warn{color:var(--champagne-dark);}
.missing-list{margin-top:14px;max-height:220px;overflow-y:auto;}
.missing-item{font-size:13px;color:var(--taupe-deep);padding:6px 0;border-bottom:1px solid rgba(85,74,62,0.18);}
.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--beige);margin-bottom:30px;border:1px solid var(--beige);}
.admin-stat{background:var(--off-white);padding:22px 18px;text-align:center;}
.admin-stat-n{font-family:'Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:30px;font-weight:600;color:var(--ink);line-height:1;letter-spacing:-0.02em;}
.admin-stat-l{font-size:12px;letter-spacing:0.04em;text-transform:uppercase;color:var(--stone);margin-top:6px;font-weight:600;}
.admin-tabs{display:flex;gap:0;border-bottom:1px solid var(--stone);margin-bottom:26px;}
.admin-tab{
background:transparent;border:none;border-bottom:2px solid transparent;
color:var(--stone);font-size:14px;letter-spacing:0.01em;text-transform:none;font-weight:600;
padding:16px 22px;cursor:pointer;transition:all var(--dur-fast) ease;position:relative;min-height:48px;
}
.admin-tab:hover{color:var(--ink);}
.admin-tab.active{color:var(--ink);border-bottom-color:var(--ink);}
.admin-refresh{
background:transparent;border:1px solid var(--ink);color:var(--ink);
font-size:13px;letter-spacing:0.01em;text-transform:none;font-weight:600;
padding:9px 20px;margin-bottom:20px;cursor:pointer;transition:all var(--dur-fast) ease;min-height:40px;
}
.admin-refresh:hover{border-color:var(--ink);background:var(--ink);color:var(--ivory);}
.admin-refresh.active{background:var(--ink);color:var(--ivory);border-color:var(--ink);}
.admin-section{display:none;}
.admin-section.active{display:block;}
.admin-table-wrap{background:var(--off-white);border:1px solid var(--taupe-dark);overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;position:relative;}
/* Soft fade on the right edge so admins see there's more table to scroll to. */
.admin-table-wrap::after{content:"";position:sticky;right:0;top:0;bottom:0;width:24px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(250,246,238,0.75));display:none;}
@media (max-width: 1024px){.admin-table-wrap::after{display:block;}}
.admin-table-wrap table{width:100%;border-collapse:collapse;min-width:740px;}
.admin-table-wrap th{
background:var(--ink);color:var(--ivory);font-size:12px;letter-spacing:0.04em;
text-transform:uppercase;font-weight:700;padding:14px 14px;text-align:left;border-bottom:1px solid var(--ink);
}
.admin-table-wrap td{padding:14px 14px;font-size:14px;color:var(--ink);border-bottom:1px solid rgba(94,69,31,0.14);vertical-align:middle;}
.admin-table-wrap tr:hover{background:var(--ivory);}
.tbl-btn{
font-size:12.5px;letter-spacing:0.01em;text-transform:none;font-weight:600;
padding:7px 14px;margin-right:6px;border:1px solid var(--stone);background:transparent;color:var(--ink);
cursor:pointer;transition:all var(--dur-fast) ease;
}
.tbl-btn.approve{border-color:#3B5530;color:#3B5530;}
.tbl-btn.approve:hover{background:#3B5530;color:var(--ivory);}
.tbl-btn.reject{border-color:#8A2E2E;color:#8A2E2E;}
.tbl-btn.reject:hover{background:#8A2E2E;color:var(--ivory);}
.tbl-btn.delete{border-color:var(--taupe-dark);color:var(--taupe-dark);}
.tbl-btn.delete:hover{background:var(--taupe-dark);color:var(--ivory);}
.ord-status-sel{
background:var(--ivory);border:1px solid var(--border);color:var(--ink);
font-size:12px;padding:6px 9px;outline:none;cursor:pointer;min-height:36px;
}
.ord-note-input{
background:var(--ivory);border:1px solid var(--border);color:var(--ink);
font-size:13px;padding:7px 9px;width:100%;outline:none;font-family:inherit;min-height:36px;
}
.ord-note-input:focus{border-color:var(--champagne);}
.notification-dot{display:inline-block;width:8px;height:8px;background:var(--red);border-radius:50%;margin-left:7px;animation:pulse 1.5s ease-in-out infinite;}
/* ── CONFLICT MODAL ── */
.conflict-modal{position:fixed;inset:0;background:rgba(43,36,25,0.55);backdrop-filter:blur(6px);z-index:1000;display:none;align-items:center;justify-content:center;padding:24px;}
.conflict-modal.open{display:flex;}
.conflict-box{background:var(--ivory);border:1px solid var(--border);padding:36px;width:100%;max-width:460px;box-shadow:0 32px 84px -22px rgba(139,106,60,0.4);text-align:center;}
.conflict-icon{font-size:40px;margin-bottom:18px;}
.conflict-title{font-family:'Inter',sans-serif;font-size:22px;font-weight:600;color:var(--ink);margin-bottom:14px;letter-spacing:-0.015em;}
.conflict-body{font-family:'Inter',sans-serif;font-size:15px;color:var(--stone);line-height:1.6;margin-bottom:22px;font-weight:450;}
.conflict-info{background:var(--ivory-deep);border:1px solid var(--border);padding:16px;margin-bottom:22px;font-size:13px;color:var(--ink);}
.conflict-actions{display:flex;gap:11px;}
/* ── ABOUT / CONTACT / TERMS ── */
.about-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:84px;padding:72px 56px;align-items:start;}
.about-grid p{font-family:'Inter',sans-serif;font-size:16px;color:var(--stone);line-height:1.65;margin-bottom:18px;font-weight:450;letter-spacing:-0.003em;}
.pillars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--beige);margin:0 56px 72px;border:1px solid var(--beige);}
.pillar{background:var(--ivory);padding:44px 34px;text-align:left;transition:background var(--dur-med) ease;}
.pillar:hover{background:var(--off-white);}
.pillar-num{font-family:'Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:0.08em;color:var(--champagne-text);margin-bottom:18px;font-weight:700;display:inline-block;padding-bottom:6px;border-bottom:1px solid var(--champagne-line);}
.pillar-title{font-family:'Inter',sans-serif;font-size:22px;color:var(--ink);margin-bottom:12px;font-weight:600;letter-spacing:-0.01em;line-height:1.25;}
.pillar-desc{font-size:15px;color:var(--stone);line-height:1.6;letter-spacing:-0.003em;}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:72px 56px;align-items:start;}
.contact-item{margin-bottom:28px;}
.contact-item-label{font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--champagne-text);margin-bottom:7px;font-weight:700;}
.contact-item-val{font-size:16px;color:var(--ink);line-height:1.55;font-family:'Inter',sans-serif;font-weight:500;letter-spacing:-0.005em;font-variant-numeric:tabular-nums;}
.wa-btn{
background:var(--ink);color:var(--ivory);border:1px solid var(--ink);
font-size:14px;letter-spacing:0.01em;text-transform:none;font-weight:600;
padding:14px 26px;margin-top:20px;transition:all var(--dur-med) ease;min-height:48px;
}
.wa-btn:hover{background:var(--champagne-text);color:var(--ivory);border-color:var(--champagne-text);}
.cf-label{font-size:12.5px;letter-spacing:0.04em;text-transform:uppercase;color:var(--stone);display:block;margin-bottom:9px;font-weight:700;}
.cf-input,.cf-textarea{
width:100%;background:transparent;border:none;border-bottom:1px solid var(--border);
padding:12px 0;font-size:15px;color:var(--ink);outline:none;margin-bottom:24px;
font-family:'Inter',sans-serif;transition:border-color var(--dur-fast) ease;min-height:44px;
}
.cf-input:focus,.cf-textarea:focus{border-color:var(--champagne);}
.cf-input::placeholder,.cf-textarea::placeholder{color:var(--taupe-dark);font-size:14px;}
.cf-textarea{min-height:90px;resize:vertical;}
.contact-form-field{margin-bottom:0;}
.terms-wrap{max-width:920px;margin:0 auto;padding:72px 56px;}
.terms-clause{padding:28px 0;border-bottom:1px solid rgba(85,74,62,0.22);}
/* ══ MY ORDERS (buyer-facing order history, 2026-04-21) ══
Card-per-order layout — mobile first, since retailers check from phones.
Status pill uses the same palette as the admin panel for consistency. */
.my-orders-wrap{max-width:960px;margin:0 auto;padding:0 20px;}
.my-orders-empty{
text-align:center;padding:56px 24px;color:var(--stone);
font-size:15px;line-height:1.6;
}
.my-orders-empty strong{color:var(--ink);display:block;margin-bottom:8px;font-weight:600;}
.mo-card{
background:var(--off-white);border:1px solid var(--champagne-line);
padding:18px 20px 16px;margin-bottom:14px;
}
.mo-card-head{
display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
flex-wrap:wrap;margin-bottom:10px;
padding-bottom:10px;border-bottom:1px solid rgba(201,166,107,0.22);
}
.mo-oid{font-family:'Inter',sans-serif;font-size:14px;font-weight:700;color:var(--ink);letter-spacing:0.02em;font-variant-numeric:tabular-nums;}
.mo-date{font-size:12px;color:var(--stone);margin-top:2px;font-weight:500;}
.mo-pill{
display:inline-flex;align-items:center;gap:6px;
font-size:11px;letter-spacing:0.12em;text-transform:uppercase;font-weight:700;
padding:5px 11px;border-radius:999px;
white-space:nowrap;
}
.mo-pill-dot{width:7px;height:7px;border-radius:50%;display:inline-block;background:currentColor;}
.mo-pill.status-pending {color:#B07A18;background:rgba(176,122,24,0.10);}
.mo-pill.status-confirmed {color:#3F7D20;background:rgba(63,125,32,0.10);}
.mo-pill.status-dispatched {color:#1F5A8A;background:rgba(31,90,138,0.10);}
.mo-pill.status-delivered {color:#295C2E;background:rgba(41,92,46,0.12);}
.mo-pill.status-cancelled {color:#7E3232;background:rgba(126,50,50,0.10);}
.mo-soft-note{
font-size:12.5px;color:var(--stone);line-height:1.55;font-style:italic;
margin-bottom:10px;padding:8px 12px;
background:rgba(201,166,107,0.08);border-left:2px solid var(--champagne-text);
white-space:pre-wrap; /* preserve admin-written line breaks */
}
.mo-admin-note{
font-size:13px;color:var(--ink);line-height:1.55;
margin-bottom:10px;padding:10px 12px;
background:#FFF3E6;border-left:3px solid #B07A18;
font-weight:500;
white-space:pre-wrap; /* preserve admin-written line breaks — cancellation
reasons often run to 2-3 lines */
}
.mo-admin-note-label{
display:block;font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;
color:var(--stone);font-weight:700;margin-bottom:4px;
}
.mo-items{margin:0;padding:0;list-style:none;}
.mo-item{
padding:6px 0;font-size:13.5px;color:var(--ink);
display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
border-bottom:1px dashed rgba(201,166,107,0.18);
}
.mo-item:last-child{border-bottom:none;}
.mo-item-code{font-weight:600;font-variant-numeric:tabular-nums;}
.mo-item-meta{color:var(--stone);font-size:12px;margin-top:2px;}
.mo-item-qty{color:var(--stone);font-size:12.5px;white-space:nowrap;font-variant-numeric:tabular-nums;}
.mo-foot{
display:flex;justify-content:space-between;gap:12px;margin-top:10px;padding-top:10px;
border-top:1px solid rgba(201,166,107,0.22);
font-size:12.5px;color:var(--stone);
}
.mo-foot strong{color:var(--ink);font-variant-numeric:tabular-nums;}
.mo-foot em{white-space:pre-wrap;} /* buyer-written order note, preserve newlines */
/* Resend-on-WhatsApp action (2026-04-22). Useful when the original order's
popup was blocked or the admin thread was lost — one tap rebuilds the
same WhatsApp message from stored items_arr and opens wa.me. */
.mo-actions{
display:flex;justify-content:flex-end;gap:8px;
margin-top:8px;padding-top:10px;border-top:1px solid rgba(201,166,107,0.22);
}
.mo-resend-btn{
background:transparent;border:1px solid var(--champagne-text);color:var(--champagne-text);
font-size:12px;font-weight:700;letter-spacing:0.04em;
padding:8px 13px;min-height:36px;cursor:pointer;font-family:inherit;
transition:all var(--dur-fast) ease;
display:inline-flex;align-items:center;gap:7px;
}
.mo-resend-btn:hover,.mo-resend-btn:active{
background:var(--champagne-text);color:var(--ivory);
}
.mo-resend-btn .mo-resend-ico{
width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;flex-shrink:0;
}
@media (max-width:540px){
.my-orders-wrap{padding:0 14px;}
.mo-card{padding:14px 14px 12px;}
.mo-oid{font-size:13.5px;}
.mo-item{font-size:13px;}
}
.terms-num{font-family:'Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:0.08em;color:var(--champagne-text);margin-bottom:12px;font-weight:700;}
.terms-title{font-family:'Inter',sans-serif;font-size:20px;color:var(--ink);margin-bottom:12px;font-weight:600;letter-spacing:-0.01em;}
.terms-body{font-size:15.5px;color:var(--stone);line-height:1.7;letter-spacing:-0.002em;}
/* ── MOBILE MENU ── */
#mobile-menu{position:fixed;top:0;right:-100%;bottom:0;width:320px;max-width:88vw;background:var(--ivory);z-index:301;transition:right 440ms var(--ease-gentle);padding:90px 32px calc(36px + env(safe-area-inset-bottom,0));box-shadow:-24px 0 64px -20px rgba(0,0,0,0.15);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
#mobile-menu.open{right:0;}
/* Backdrop — tap outside the drawer to close. Matches cart-drawer backdrop so
the gesture is consistent across every slide-in panel on the site. */
#mobile-menu-backdrop{position:fixed;inset:0;background:rgba(43,36,25,0.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:300;display:none;opacity:0;transition:opacity var(--dur-med) ease;}
#mobile-menu-backdrop.open{display:block;opacity:1;}
.mobile-link{display:block;background:transparent;border:none;color:var(--ink);font-size:17px;letter-spacing:-0.005em;text-transform:none;font-weight:600;padding:16px 0;text-align:left;width:100%;border-bottom:1px solid rgba(94,69,31,0.15);cursor:pointer;transition:color var(--dur-fast) ease;min-height:48px;position:relative;}
.mobile-link:hover{color:var(--champagne-text);}
/* Active page marker — champagne text + left bar. Gives buyers a clear
"you are here" when they open the menu mid-browse. */
.mobile-link.active{color:var(--champagne-text);padding-left:12px;}
.mobile-link.active::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:22px;background:var(--champagne-text);}
/* ── ANIMATIONS ── */
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.4;}}
*:focus-visible{outline:2px solid var(--champagne);outline-offset:3px;}
button:focus-visible,a:focus-visible{outline-offset:3px;}
::-webkit-scrollbar{width:9px;}
::-webkit-scrollbar-track{background:var(--ivory-deep);}
::-webkit-scrollbar-thumb{background:var(--champagne);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:var(--champagne-dark);}
/* ═══════════════════════════════
RESPONSIVE
═══════════════════════════════ */
@media (max-width: 1024px){
.home-hero{grid-template-columns:1fr;gap:18px;padding:32px 32px 64px;text-align:center;}
/* Crest first on mobile so buyers see the atelier mark above the fold */
.hero-right{order:-1;}
.hero-left{order:1;}
.hero-status-row{position:static;justify-content:center;margin-bottom:10px;order:-2;}
.hero-kicker{margin-bottom:14px;}
.hero-meta-row{margin-left:auto;margin-right:auto;}
.hero-desc{margin-left:auto;margin-right:auto;}
.hero-btns{justify-content:center;}
.crest-wrap{max-width:280px;margin:0 auto;}
}
@media (max-width: 540px){
.crest-wrap{max-width:220px;} /* Compact on phones so headline still hits the fold */
.home-hero{padding-top:20px;padding-bottom:48px;gap:14px;}
.hero-corners{display:none;} /* Corner frames crowd the phone viewport */
.hero-title{font-size:clamp(42px,11vw,64px);margin-bottom:16px;}
}
/* Mobile/tablet breakpoint — 1024px catches iPad landscape + all phones.
Anything <=1024 gets the clean hamburger nav so tablets don't try to cram
5 nav links + username + 2 buttons into a 1024-wide bar. */
@media (max-width: 1024px){
nav{padding:14px 22px;}
nav.scrolled{padding:10px 22px;}
.nav-links{display:none;}
#hamburger{display:flex;}
/* On mobile top nav, hide everything except the Order List button.
Username, access badge, My Orders, Sign Out, and the Sign In CTA all
move into the hamburger menu so the top bar stays:
[logo] [Order List] [hamburger]
— three elements only. Signed-out visitors still see Sign In, but
inside the drawer (mobile-signin-area), not duplicated in the bar. */
#nav-signin-btn,
#nav-username,
.nav-user-badge,
.nav-orders-btn,
.nav-logout{display:none !important;}
/* Close button inside the mobile menu — pill in the top-right with both
the × glyph and a "Close" word so buyers don't have to guess.
Discoverable, 48px+ tap target, visible focus ring. */
.mobile-menu-close{
position:absolute;top:18px;right:18px;
display:inline-flex;align-items:center;gap:8px;
min-height:44px;padding:9px 16px 9px 14px;
background:var(--ink);border:1px solid var(--ink);
color:var(--ivory);font-family:inherit;
font-size:11.5px;letter-spacing:0.16em;font-weight:600;
text-transform:uppercase;line-height:1;cursor:pointer;
border-radius:2px;transition:all var(--dur-fast) ease;
}
.mobile-menu-close .mmc-x{
font-size:19px;line-height:1;font-weight:400;letter-spacing:0;
}
.mobile-menu-close:hover,
.mobile-menu-close:active,
.mobile-menu-close:focus-visible{
background:var(--champagne-text);border-color:var(--champagne-text);
}
/* Drawer padding-top needs to clear the pill without touching it. */
#mobile-menu{padding-top:78px;}
.features-strip,.prod-grid,.stats-row,.admin-stats,.pillars-grid{margin-left:22px;margin-right:22px;}
.seg-bar,.seg-info,.cat-hero,.admin-wrap{padding-left:22px;padding-right:22px;}
.price-banner{margin-left:22px;margin-right:22px;padding:10px 14px;font-size:13px;gap:8px;}
.price-banner-note{width:100%;margin-left:0;margin-top:2px;font-size:12px;}
.about-grid,.contact-grid{grid-template-columns:1fr;gap:40px;padding:48px 22px;}
.reg-grid{grid-template-columns:1fr;}
.terms-wrap{padding:48px 22px;}
#cart-drawer{width:95vw;}
footer{padding:36px 22px 28px;}
/* iOS Safari zooms into any input whose font-size is under 16px on focus —
it's jarring on mobile. Bump all form fields to 16px at this breakpoint.
Visually barely noticeable; UX improvement is huge. */
.cf-input,.cf-textarea,
.login-input,
.cart-note-input,
.qty-input,
.approve-input,
.prod-search-input,
.ord-note-input,
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,select{font-size:16px !important;}
.hero-meta-row{flex-wrap:wrap;gap:20px;}
.hero-meta-cell + .hero-meta-cell{border-left:none;padding-left:0;}
}
@media (max-width: 540px){
.nav-brand-text-wrap{display:none;}
.features-strip{grid-template-columns:repeat(2,1fr);}
.stats-row{grid-template-columns:repeat(2,1fr);margin-left:22px;margin-right:22px;}
.stat-box{padding:12px 8px;}
.admin-stats{grid-template-columns:repeat(2,1fr);}
.pillars-grid{grid-template-columns:1fr;}
.prod-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
/* "View image" CTA uses :hover on desktop. Touch devices don't hover, so
always-show on mobile — otherwise buyers don't know they can enlarge
the product photo. */
.view-img-btn{opacity:1;font-size:9px;padding:5px 9px;}
.share-img-btn{right:78px;width:26px;height:24px;opacity:1;}
.share-img-btn svg{width:11px;height:11px;}
.lb-prev{left:10px;}.lb-next{right:10px;}
/* Lightbox close — desktop has it floating above the image (top:-44px).
On phones that's usually above the viewport top. Reposition to the
top-right inside the dim overlay so it's always reachable. */
.lb-close{position:fixed;top:calc(14px + env(safe-area-inset-top,0));right:14px;background:rgba(43,36,25,0.72);border:1px solid rgba(201,166,107,0.4);color:var(--champagne-light);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:2px;}
.lb-close:hover{background:rgba(201,166,107,0.85);color:var(--ink);}
.lb-info{position:fixed;bottom:calc(14px + env(safe-area-inset-bottom,0));left:14px;right:14px;text-align:center;font-size:13px;padding:6px 10px;background:rgba(43,36,25,0.55);backdrop-filter:blur(6px);}
/* Visual swipe hint the first time a buyer opens the lightbox on a phone.
Sits under the image, fades out after 2s. */
.lb-swipe-hint{position:fixed;top:50%;left:50%;transform:translate(-50%,calc(-50% + 42vh));font-size:11px;letter-spacing:0.22em;color:rgba(250,246,238,0.7);text-transform:uppercase;font-weight:600;background:rgba(43,36,25,0.6);padding:6px 14px;border:1px solid rgba(201,166,107,0.25);pointer-events:none;animation:swipeHintFade 2.4s 0.5s both;}
@keyframes swipeHintFade{0%{opacity:0;}18%{opacity:1;}72%{opacity:1;}100%{opacity:0;}}
.hero-meta-row{flex-direction:column;gap:14px;align-items:flex-start;text-align:left;}
/* Login + register modals on tiny phones — logo shrinks, margins tighten
so the form fits above the fold without scrolling on a 640-tall device. */
#login-modal{padding:20px 18px;}
.login-logo-wrap{margin-bottom:24px;}
.login-logo-wrap img{height:64px;margin-bottom:12px;}
.login-heading{font-size:24px;margin-bottom:22px;}
.login-field{margin-bottom:16px;}
#reg-overlay{padding:32px 18px;}
/* Cart items on tiny phones — image smaller, tighter padding, name font
shrinks slightly so 3-line product names don't dominate the card. */
.cart-items{padding:14px 14px;}
.cart-item{padding:12px 36px 12px 12px;gap:11px;}
.cart-item-img,.cart-item-emoji{width:54px;height:64px;}
.cart-item-name{font-size:14px;}
.cart-remove{top:6px;right:4px;font-size:16px;padding:6px 8px;}
.cart-header{padding:18px 18px 14px;}
.cart-title{font-size:20px;}
.cart-footer{padding:18px 18px calc(18px + env(safe-area-inset-bottom,0));}
/* Marquee on phones — smaller font + faster loop + tighter spacing so the
strip reads as "just a ticker" and doesn't eat headline real estate. */
.marquee-bar{height:28px;}
.marquee-item{font-size:10px;gap:28px;padding-right:28px;letter-spacing:0.08em;}
.marquee-item::after{margin-left:28px;width:4px;height:4px;}
.marquee-track{animation-duration:30s;}
/* Nav sits right under the marquee — shift up 6px to match the shorter bar. */
nav{top:calc(28px + env(safe-area-inset-top,0));}
/* Approve modal on tiny phones — tighter padding so buttons aren't
squeezed and the username label doesn't wrap to 3 lines. */
.approve-modal{padding:16px;}
.approve-box{padding:22px;}
/* Product cards on phones — 2-column grid squeezes each card to ~45 vw.
Shrink the image, body padding, and name font so each card stays
readable without dominating the viewport. */
.prod-img-wrap{height:240px;}
.prod-body{padding:14px 12px 16px;}
.prod-color{font-size:10.5px;margin-bottom:4px;}
.prod-name{font-size:14px;margin-bottom:10px;line-height:1.25;}
.prod-sizes{margin-bottom:12px;gap:3px;}
.prod-sz{font-size:10.5px;padding:3px 6px;}
.prod-order-btn{font-size:11.5px;padding:11px 6px;letter-spacing:0.005em;}
.prod-cart-btn{font-size:14px;width:40px;min-height:42px;}
.prod-code-badge{font-size:11px;padding:4px 9px;bottom:10px;left:10px;}
.prod-bdg{font-size:8px;padding:5px 9px;top:10px;left:10px;letter-spacing:0.18em;}
/* Search bar on phones — input grows to fill, sync button hugs the right.
Previously the sync button wrapped to its own line on narrow cat-hero
headers, looking detached from the search. */
.search-wrap{gap:10px;width:100%;}
.search-wrap .prod-search-input{flex:1;width:auto;min-width:0;}
.sync-mini-btn{padding:8px 12px;letter-spacing:0.14em;flex-shrink:0;}
}
/* ═══════════════════════════════
REDUCED MOTION — 35+ VESTIBULAR SAFETY
═══════════════════════════════ */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
transition-duration:0.01ms !important;
scroll-behavior:auto !important;
}
.reveal-up,.reveal-fade,.reveal-mask,.stagger > *,.prod-card{
opacity:1 !important;transform:none !important;clip-path:none !important;
}
.marquee-track{animation:none !important;}
.crest-img,.crest-anim{animation:none !important;}
.crest-wrap::before,.crest-wrap::after{animation:none !important;}
.hero-status-dot{animation:none !important;}
/* Stop SVG SMIL animations () — pause at frame 0 */
.crest-anim animate{animation-play-state:paused;}
}