:root{
/* Real Zu-B palette, pulled from the live site's own CSS */
--ink:#3B2A15; /* dark warm brown — replaces near-black */
--ink-2:#4A3620; /* slightly lighter panel brown */
--panel-dark:#3B2A15; /* dedicated "reversed" panel background (footer,
testimonials, promo strip, etc.) — kept as its
own token, separate from --ink's text-color
role, so dark mode can flip body text to
light without accidentally flipping these
intentionally-dark accent panels to white. */
--paper:#FFF9DB; /* pale cream — main page background */
--paper-2:#F7EDB0; /* soft gold-cream — section/card background */
--rust:#C88A00; /* dark mango yellow — primary accent */
--rust-dark:#8F5F00; /* deep mango — hover state */
--rust-light:#E8AE1F; /* mango yellow — lighter accent variant */
--gold:#E8AE1F; /* secondary accent, same mango family */
--sand:#F7EDB0; /* soft accent background */
--cream-text:#FFFCF5; /* near-white cream for text on dark panels */
--muted-dark:#D8C9A0; /* muted warm text on dark brown panels */
--muted-light:#7A6A4D; /* muted warm text on cream */
--line-dark:rgba(255,252,245,0.14);
--line-light:#EADFB8;
--pink:#E62A65; /* kept as-is: your existing "HOT" badge color */
--teal:#199588; /* kept as-is: your existing "SALE" badge color */
--icon-navy:#0B1626; /* fixed dark navy blue — used ONLY for icons that
sit on a surface that stays white even in dark
mode (e.g. .quick-actions), so they stay legible
instead of using the orange accent there. */
--font-display:'Fraunces', Georgia, serif;
--font-body:'Inter', -apple-system, sans-serif;
--font-brand:'Amita', 'Fraunces', Georgia, serif;
--ease:cubic-bezier(.22,.68,0,1.01);
}
/* ================= DARK THEME ================= */
/* Deep navy + orange + white — no black anywhere. Every rule in this
theme already reads its colors from the tokens above, so switching
theme is just redefining those same tokens inside html.dark-theme;
every existing rule recalculates automatically. Toggled by
#zubThemeToggle (assets/js/zub-theme-toggle.js); applied to
(not ) so the tiny inline script in header.php/front-page.php
can set the class before first paint and avoid a flash of the
wrong theme. Nothing in :root above (the light theme) is touched. */
html.dark-theme{
--ink:#F5F3EC; /* body text — near-white, not pure white */
--ink-2:#DCE3EA;
--panel-dark:#050B14; /* footer/testimonials/promo-strip — deeper
than the page background, stays dark
instead of flipping to white with --ink */
--paper:#0B1626; /* main page background — deep navy */
--paper-2:#13233A; /* section/card background — lighter navy */
--rust:#FF7A1A; /* primary accent — orange */
--rust-dark:#FF974D; /* hover state — lighter orange (dark UI hovers lighten, not darken) */
--rust-light:#FFB27A;
--gold:#FF7A1A;
--sand:#13233A;
--cream-text:#FFFCF5;
--muted-dark:#C9D2DC;
--muted-light:#8FA0B3;
--line-dark:rgba(255,255,255,0.14);
--line-light:rgba(255,255,255,0.14);
--pink:#FF5C7A;
--teal:#37D6C4;
}
html.dark-theme body{background:var(--paper);}
/* Product photography and any plain-white card surfaces get a subtle
navy-tinted backdrop instead of sitting in stark white rectangles
against the dark page. */
html.dark-theme .woocommerce ul.products li.product,
html.dark-theme .zbw-shop-filters-col,
html.dark-theme .cart-flyout,
html.dark-theme .mega-panel{
background:var(--paper-2) !important;
border-color:var(--line-light) !important;
}
html.dark-theme input,
html.dark-theme select,
html.dark-theme textarea{
background:var(--paper-2);
color:var(--ink);
border-color:var(--line-light);
}
html.dark-theme input::placeholder{color:var(--muted-light);}
/*
* Amita — the brand wordmark font, used on the literal "Zu-B" brand
* word wherever it appears as live text (.brand-word): the header
* logo lockup, the footer logo lockup, and the footer copyright line.
* Loaded via Google Fonts (see the
* !important; color:#fff !important; border:1px solid ... !important;
* border-radius:5px; }` rule meant for real add-to-cart/submit
* buttons. These header icons are also literal elements, so
* EVERY property that rule sets needs an !important match here too —
* background and color included, not just border/shadow (a prior pass
* only did border/shadow, which is why the flat circle wasn't
* actually showing: the gradient was still winning on background,
* just not obviously different from --rust at a glance) — or its gold
* gradient + rectangular corners win instead of this flat circle.
*/
.header-actions button, .header-actions a, .header-search button, .header-hamburger{
border:none !important; box-shadow:none !important; border-radius:50% !important;
background:var(--rust) !important; color:#fff !important;
}
.header-actions button:hover, .header-actions a:hover, .header-search button:hover{
box-shadow:none !important; background:var(--rust-dark) !important; color:#fff !important;
}
.header-hamburger:hover{background:var(--rust-dark) !important; transform:none !important;}
.header-badge{
position:absolute; top:-6px; right:-6px; background:var(--rust-dark); color:#fff; border:2px solid var(--paper-2);
font-size:11px; font-weight:700; width:20px; height:20px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
}
.header-hamburger{
display:none; font-size:26px; width:44px; height:44px; border-radius:50%;
background:var(--rust); color:#fff; align-items:center; justify-content:center; transition:background .2s;
}
/* Dark theme: back to a plain icon, no circle — orange stroke reads
clearly straight on the navy header, and a solid circle there would
compete visually with the rest of the (already dark) header. */
html.dark-theme .header-actions button, html.dark-theme .header-actions a,
html.dark-theme .header-search button, html.dark-theme .header-hamburger{
background:transparent !important; color:var(--rust) !important;
}
html.dark-theme .header-actions button:hover, html.dark-theme .header-actions a:hover,
html.dark-theme .header-search button:hover, html.dark-theme .header-hamburger:hover{
background:transparent !important; color:var(--rust-dark) !important; transform:none !important;
}
html.dark-theme .header-badge{border-color:var(--paper-2);}
/* ---- icon system (zub_icon(), functions.php) ---- */
.zub-icon{width:22px; height:22px; display:block; flex-shrink:0;}
.header-search button .zub-icon{width:20px; height:20px;}
.header-hamburger .zub-icon{width:26px; height:26px;}
.md-close .zub-icon{width:20px; height:20px;}
.header-badge ~ .zub-icon,
#cartToggle .zub-icon{width:22px; height:22px;}
/* sun/moon swap: show the icon for the theme you'd switch TO */
.theme-toggle-btn{gap:0;}
.theme-toggle-btn .theme-icon-sun{display:none;}
html.dark-theme .theme-toggle-btn .theme-icon-moon{display:none;}
html.dark-theme .theme-toggle-btn .theme-icon-sun{display:block;}
@media (max-width:860px){
/* Below this width the inline text nav no longer fits next to the
logo — it collapses into the existing hamburger/mobile-drawer,
same links, just off-canvas instead of squeezed into the row. */
.header-nav{display:none;}
.header-hamburger{display:block;}
}
@media (max-width:480px){
.header-logo img{height:clamp(40px, 10vw, 54px);}
/* Keep the live "Zu-B" wordmark visible next to the mark at every
size (it was previously hidden here) — just shrink it further
rather than dropping it. */
.header-logo .brand-word{font-size:17px;}
.header-logo .brand-tagline{display:none;}
}
/* mini cart flyout */
.cart-flyout{
position:absolute; top:120%; right:0; width:280px; background:#fff; border:1px solid var(--line-light);
border-radius:8px; box-shadow:0 24px 44px rgba(59,42,21,0.16); padding:18px;
opacity:0; visibility:hidden; transform:translateY(-8px); transition:all .25s var(--ease); z-index:50;
}
.cart-flyout.open{opacity:1; visibility:visible; transform:translateY(0);}
.cart-flyout .cf-item{display:flex; gap:10px; align-items:center; margin-bottom:12px; font-size:13px;}
.cart-flyout .cf-item img{width:44px !important; height:52px !important; max-width:none !important; object-fit:cover !important; border-radius:4px;}
.cart-flyout .cf-total{display:flex; justify-content:space-between; font-weight:700; border-top:1px solid var(--line-light); padding-top:10px; margin-top:6px; font-size:13px;}
.cart-flyout .btn{width:100%; text-align:center; margin-top:12px; padding:11px;}
/* category mega panel — now hangs off the cat-trigger inside the single
main row (a dropdown flyout, not a permanent third row) */
.mega-panel{
position:absolute; top:calc(100% + 17px); left:0; background:#fff; border:1px solid var(--line-light);
box-shadow:0 30px 50px rgba(59,42,21,0.14); border-radius:0 0 8px 8px;
display:grid; grid-template-columns:repeat(4,1fr); gap:26px; padding:30px; width:640px;
opacity:0; visibility:hidden; transform:translateY(-10px); transition:all .25s var(--ease); z-index:60;
}
.mega-panel.open{opacity:1; visibility:visible; transform:translateY(0);}
.mega-panel .mega-col h5{font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--rust); margin-bottom:12px;}
.mega-panel .mega-col ul{list-style:none;}
.mega-panel .mega-col li{margin-bottom:9px;}
.mega-panel .mega-col a{font-size:13.5px; color:var(--muted-light); transition:color .2s;}
.mega-panel .mega-col a:hover{color:var(--ink);}
/* single-category nav items: Girls / Boys / Unisex / Collection */
.subnav-mega{position:relative;}
.mega-panel--single{width:220px; grid-template-columns:1fr; padding:22px; top:calc(100% + 17px);}
/* mobile drawer */
.mobile-drawer{
position:fixed; top:0; right:-100%; width:82%; max-width:340px; height:100vh; background:var(--paper);
z-index:200; transition:right .35s var(--ease); box-shadow:-20px 0 40px rgba(0,0,0,0.2);
padding:26px 24px; overflow-y:auto;
}
.mobile-drawer.open{right:0;}
.mobile-drawer .md-close{font-size:22px; color:var(--ink); margin-bottom:20px; display:block;}
.mobile-drawer ul{list-style:none; margin-bottom:20px;}
.mobile-drawer li{border-bottom:1px solid var(--line-light);}
.mobile-drawer a{display:block; padding:14px 0; font-size:15px; font-weight:600; color:var(--ink);}
.drawer-backdrop{
position:fixed; inset:0; background:rgba(36,26,13,0.5); z-index:199;
opacity:0; visibility:hidden; transition:opacity .3s;
}
.drawer-backdrop.open{opacity:1; visibility:visible;}
/* ================= HERO — real background photo ================= */
.hero{
position:relative;
min-height:100vh;
color:var(--cream-text);
display:flex; flex-direction:column; justify-content:center;
padding:100px 5vw 60px;
overflow:hidden;
}
@media (max-width:760px){
.hero{min-height:85vh; padding:90px 5vw 50px;}
}
.hero-bg-photo{
position:absolute; inset:0; z-index:0;
background-image:url('https://www.zu-b.com/wp-content/uploads/2026/03/zub-banner-main.png');
background-size:cover; background-position:center 25%;
animation:kenBurns 24s ease-in-out infinite alternate;
}
/* On narrow/tall mobile viewports, `cover` at the same 25% anchor crops
far more aggressively than on a wide desktop viewport (the image has
to scale up a lot more to fill the width, pushing most of the height
— including the model's face — out of frame). Shift the anchor
toward the top so the subject stays in frame. If the face still
isn't centered the way you want after testing on a real phone,
nudge this percentage up/down (0% = fully top-anchored). */
@media (max-width:760px){
.hero-bg-photo{ background-position:center 8%; }
}
@keyframes kenBurns{from{transform:scale(1);}to{transform:scale(1.05);}}
.hero-bg-overlay{
position:absolute; inset:0; z-index:1;
background:linear-gradient(100deg, rgba(36,26,13,0.92) 0%, rgba(36,26,13,0.75) 32%, rgba(36,26,13,0.35) 60%, rgba(36,26,13,0.15) 100%);
}
/* animated layered aurora blobs — subtle motion accents over the photo */
.hero-aurora{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1;}
.aurora-blob{position:absolute; border-radius:50%; filter:blur(36px); will-change:transform; opacity:.5;}
.aurora-blob.b1{width:52vw; height:52vw; top:-18%; right:-12%;
background:radial-gradient(circle, rgba(200,138,0,0.5) 0%, rgba(200,138,0,0) 70%);
animation:auroraDrift1 14s ease-in-out infinite;}
.aurora-blob.b2{width:38vw; height:38vw; bottom:-15%; left:-8%;
background:radial-gradient(circle, rgba(232,174,31,0.4) 0%, rgba(232,174,31,0) 70%);
animation:auroraDrift2 18s ease-in-out infinite;}
.aurora-blob.b3{width:30vw; height:30vw; top:35%; left:35%;
background:radial-gradient(circle, rgba(247,237,176,0.18) 0%, rgba(247,237,176,0) 70%);
animation:auroraDrift3 22s ease-in-out infinite;}
@keyframes auroraDrift1{0%,100%{transform:translate(0,0) scale(1);}33%{transform:translate(-6%,4%) scale(1.15);}66%{transform:translate(3%,-5%) scale(0.95);}}
@keyframes auroraDrift2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(8%,-6%) scale(1.2);}}
@keyframes auroraDrift3{0%,100%{transform:translate(0,0) scale(1) rotate(0deg);}50%{transform:translate(-10%,8%) scale(1.3) rotate(30deg);}}
/* fine grain noise overlay for a filmic, less-flat feel */
.hero-grain{position:absolute; inset:0; z-index:1; opacity:.05; pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.hero-content{max-width:640px; position:relative; z-index:2;}
.hero-content .eyebrow{margin-bottom:18px; display:block;}
.hero-title{font-size:clamp(42px,6.4vw,84px); margin-bottom:22px; perspective:800px; color:var(--cream-text);}
.hero-title .line{display:block; overflow:hidden;}
.kinetic-word{display:inline-block; white-space:nowrap;}
.kinetic-char{display:inline-block; opacity:0; transform:translateY(60px) rotateX(-70deg) scale(.7); transform-origin:bottom center;
animation:charIn .85s var(--ease) forwards;}
@keyframes charIn{to{opacity:1; transform:translateY(0) rotateX(0deg) scale(1);}}
.hero-sub{font-size:18px; color:var(--muted-dark); max-width:440px; margin-bottom:34px; line-height:1.6;}
.hero-cta{display:flex; gap:16px; flex-wrap:wrap;}
.btn{
display:inline-flex; align-items:center; gap:10px;
padding:16px 30px; font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
border-radius:2px; transition:transform .12s linear, background .3s, box-shadow .3s, color .3s, border-color .3s;
will-change:transform;
}
.btn-light{background:var(--cream-text); color:var(--ink); box-shadow:0 8px 20px rgba(20,19,17,0.18);}
.btn-light:hover{background:var(--rust); color:#fff; box-shadow:0 18px 34px rgba(200,138,0,.4); transform:translateY(-2px);}
.btn-outline{border:1px solid var(--line-dark); color:var(--cream-text);}
.btn-outline:hover{border-color:var(--cream-text); transform:translateY(-2px);}
/* --- 3D rotating rack (signature element) --- */
.rack-stage{
position:relative; z-index:2;
margin-top:60px;
height:380px;
perspective:1600px;
display:flex; align-items:center; justify-content:center;
}
.rack-spotlight{
position:absolute; width:520px; height:520px; border-radius:50%;
background:radial-gradient(circle, rgba(247,237,176,0.22) 0%, rgba(247,237,176,0) 68%);
animation:spotlightPulse 4s ease-in-out infinite;
pointer-events:none;
}
@keyframes spotlightPulse{0%,100%{transform:scale(1); opacity:.75;}50%{transform:scale(1.12); opacity:1;}}
.rack{
position:relative;
width:190px; height:250px;
transform-style:preserve-3d;
transition:transform .1s linear;
cursor:grab;
}
.rack:active{cursor:grabbing;}
.rack-card{
position:absolute; top:0; left:0; width:190px; height:250px;
border-radius:6px; overflow:hidden;
background:var(--paper-2);
box-shadow:0 40px 70px rgba(0,0,0,0.55), 0 0 40px rgba(200,138,0,0.15);
transform: rotateY(calc(var(--i) * (360deg / 8))) translateZ(380px);
backface-visibility:hidden;
transition:box-shadow .3s;
}
.rack-card img{width:100% !important; height:100% !important; max-width:none !important; object-fit:cover !important;}
.rack-card .tag{
position:absolute; bottom:0; left:0; right:0;
padding:10px 12px; background:rgba(20,19,17,0.85); backdrop-filter:blur(4px);
font-size:11px; color:var(--cream-text); font-weight:500; letter-spacing:0.02em;
}
.rack-card .tag b{color:var(--gold); display:block; font-size:12px; margin-top:2px;}
.rack-controls{
position:absolute; bottom:-56px; left:50%; transform:translateX(-50%);
display:flex; gap:14px; z-index:5;
}
.rack-controls button{
width:40px; height:40px; border-radius:50%; border:1px solid var(--line-dark);
background:var(--panel-dark);
color:var(--cream-text); font-size:16px; display:flex; align-items:center; justify-content:center;
transition:background .25s, border-color .25s;
}
.rack-controls button:hover{background:rgba(255,255,255,0.12); border-color:var(--cream-text);}
@media (max-width:600px){
.rack-stage{height:300px; margin-top:40px; margin-bottom:70px;}
.rack, .rack-card{width:150px; height:200px;}
.rack-card{transform: rotateY(calc(var(--i) * (360deg / 8))) translateZ(300px);}
.rack-controls{bottom:-64px;}
}
@media (min-width:601px){
.rack-stage{margin-bottom:56px;}
}
.scroll-cue{
position:absolute; bottom:28px; left:5vw; z-index:2;
display:flex; align-items:center; gap:10px;
font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted-dark);
}
.scroll-cue .arrow{display:inline-block; animation:bob 1.8s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}
/* ================= MARQUEE ================= */
.marquee-strip{
background:var(--panel-dark); border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark);
overflow:hidden; padding:20px 0;
}
.marquee-track{
display:flex; width:max-content;
animation:marquee 26s linear infinite;
}
.marquee-track span{
display:flex; align-items:center;
font-family:var(--font-display); font-style:italic; font-weight:500;
font-size:22px; color:var(--muted-dark); white-space:nowrap; padding:0 28px;
}
.marquee-track span::after{content:"•"; margin-left:28px; color:var(--rust);}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
/* ================= SECTION SHELL ================= */
section{padding:64px 5vw;}
.section-head{max-width:640px; margin-bottom:38px;}
.section-head h2{font-size:clamp(30px,4vw,48px); margin-top:14px;}
.section-head p.desc{margin-top:16px; color:var(--muted-light); font-size:16px; line-height:1.6;}
.dark{background:var(--panel-dark); color:var(--cream-text);}
.dark .section-head p.desc{color:var(--muted-dark);}
/* ================= CATEGORIES ================= */
.cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.cat-card{
position:relative; border-radius:8px; overflow:hidden; aspect-ratio:3/4;
transform-style:preserve-3d; transition:transform .5s var(--ease), box-shadow .5s var(--ease);
will-change:transform;
}
.cat-card img{width:100% !important; height:100% !important; max-width:none !important; object-fit:cover !important; transition:transform .5s var(--ease);}
.cat-card:hover img{transform:scale(1.08);}
.cat-card::after{
content:""; position:absolute; inset:0;
background:linear-gradient(to top, rgba(20,19,17,0.85) 0%, rgba(20,19,17,0.1) 55%, rgba(20,19,17,0) 100%);
}
.cat-card:hover{box-shadow:0 30px 50px rgba(20,19,17,0.25);}
.cat-label{
position:absolute; bottom:22px; left:22px; z-index:2; color:#fff;
}
.cat-label .count{display:block; font-size:12px; color:var(--sand); margin-top:4px; letter-spacing:0.04em;}
.cat-label h3{font-size:22px; color:var(--cream-text);}
@media (max-width:920px){.cat-grid{grid-template-columns:repeat(2,1fr);}}
/* ================= PRODUCT GRID ================= */
.product-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.product-card{
display:block; color:inherit;
background:var(--paper); border:1px solid var(--line-light); border-radius:8px; overflow:hidden;
transition:transform .3s var(--ease), box-shadow .3s var(--ease);
transform-style:preserve-3d;
}
.product-card:hover{transform:translateY(-8px); box-shadow:0 26px 46px rgba(20,19,17,0.12);}
.product-media{position:relative; aspect-ratio:1/1.15; overflow:hidden; background:var(--paper-2);}
.product-media img{width:100% !important; height:100% !important; max-width:none !important; object-fit:cover !important; transition:transform .6s var(--ease);}
.product-card:hover .product-media img{transform:scale(1.06);}
.product-badge{
position:absolute; top:14px; left:14px; background:var(--rust); color:#fff;
font-size:10px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
padding:5px 10px; border-radius:100px;
}
.product-info{padding:18px 20px 22px;}
.product-info .cat{font-size:11px; color:var(--muted-light); text-transform:uppercase; letter-spacing:0.06em;}
.product-info h4{font-family:var(--font-body); font-weight:600; font-size:15px; margin:6px 0 8px;}
.price-row{display:flex; align-items:center; gap:10px;}
.price{font-weight:700; color:var(--rust);}
.price.strike{color:var(--muted-light); text-decoration:line-through; font-weight:400; font-size:13px;}
@media (max-width:920px){.product-grid{grid-template-columns:repeat(2,1fr);}}
/* ================= SALE SPLIT ================= */
.sale-split{
padding:0; display:grid; grid-template-columns:1fr 1fr; min-height:520px;
}
.sale-panel-dark{
background:linear-gradient(135deg, #4A3620, var(--ink) 60%);
color:var(--cream-text); padding:90px 6vw; display:flex; flex-direction:column; justify-content:center;
position:relative; overflow:hidden;
}
.sale-panel-dark .shape{
position:absolute; width:420px; height:420px; border-radius:50%;
background:radial-gradient(circle, rgba(200,138,0,.4), transparent 70%);
right:-160px; bottom:-160px; will-change:transform;
}
.sale-panel-dark h2{font-size:clamp(34px,4.6vw,58px); margin:14px 0 18px; color:var(--cream-text);}
.sale-panel-dark p{color:var(--muted-dark); max-width:380px; margin-bottom:30px; line-height:1.6;}
.sale-panel-number{
background:var(--paper-2); display:flex; align-items:center; justify-content:center; flex-direction:column;
position:relative; overflow:hidden;
}
.sale-panel-number .big-num{
font-family:var(--font-display); font-weight:700; font-size:clamp(90px,13vw,220px); color:var(--ink);
will-change:transform; line-height:1;
}
.sale-panel-number .cap{font-size:14px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted-light); margin-top:10px;}
@media (max-width:860px){.sale-split{grid-template-columns:1fr;} }
/* ================= STORY ================= */
.story{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;}
.story-media{position:relative; aspect-ratio:4/5; border-radius:8px; overflow:hidden;}
.story-media img{width:100% !important; height:100% !important; max-width:none !important; object-fit:cover !important;}
.story-media .clip{
position:absolute; inset:0; background:var(--paper-2);
transform-origin:left; transition:transform 1.1s var(--ease);
}
.story-media.is-visible .clip{transform:scaleX(0);}
.story-text .eyebrow{margin-bottom:16px; display:block;}
.story-text h2{font-size:clamp(28px,3.6vw,44px); margin-bottom:20px;}
.story-text p{color:var(--muted-light); line-height:1.75; margin-bottom:16px; font-size:16px;}
.story-text .btn{margin-top:14px;}
@media (max-width:860px){.story{grid-template-columns:1fr;}}
/* ================= STATS ================= */
.stats{
background:var(--sand); padding:80px 5vw;
display:grid; grid-template-columns:repeat(4,1fr); gap:30px; text-align:center;
}
.stat-num{font-family:var(--font-display); font-weight:700; font-size:clamp(34px,4vw,52px); color:var(--rust);}
.stat-label{font-size:13px; letter-spacing:0.04em; color:var(--muted-light); margin-top:8px; text-transform:uppercase;}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr);}}
/* ================= TESTIMONIALS (coverflow) ================= */
.testimonials{background:var(--panel-dark); color:var(--cream-text); text-align:center;}
.testimonials .section-head h2{color:var(--cream-text);}
.coverflow{
position:relative; height:320px; display:flex; align-items:center; justify-content:center;
perspective:1200px; margin-top:50px;
}
.tcard{
position:absolute; width:420px; padding:34px 36px; border-radius:10px;
background:var(--ink-2); border:1px solid var(--line-dark);
transition:transform .55s var(--ease), opacity .55s var(--ease);
}
.tcard p.quote{font-family:var(--font-display); font-style:italic; font-size:19px; line-height:1.55; margin-bottom:18px; color:var(--cream-text);}
.tcard .who{font-size:13px; color:var(--gold); letter-spacing:0.03em;}
.tcard.center{transform:translateX(0) translateZ(0) rotateY(0deg); opacity:1; z-index:3;}
.tcard.left{transform:translateX(-330px) translateZ(-160px) rotateY(28deg); opacity:.45; z-index:2;}
.tcard.right{transform:translateX(330px) translateZ(-160px) rotateY(-28deg); opacity:.45; z-index:2;}
.tcard.far-left{transform:translateX(-520px) translateZ(-280px) rotateY(28deg); opacity:0; z-index:1;}
.tcard.far-right{transform:translateX(520px) translateZ(-280px) rotateY(-28deg); opacity:0; z-index:1;}
.tdots{display:flex; gap:10px; justify-content:center; margin-top:26px;}
.tdots button{width:8px; height:8px; border-radius:50%; background:var(--line-dark); transition:background .25s, width .25s;}
.tdots button.active{background:var(--gold); width:22px; border-radius:5px;}
@media (max-width:760px){.tcard{width:82vw;} .tcard.left,.tcard.right{opacity:0;}}
/* ================= GALLERY ================= */
.gallery-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px;}
.gallery-item{position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:6px;}
.gallery-item img{width:100% !important; height:100% !important; max-width:none !important; object-fit:cover !important; transition:transform .5s var(--ease);}
.gallery-item:hover img{transform:scale(1.1);}
.gallery-item::after{content:"";position:absolute; inset:0; background:rgba(200,138,0,0); transition:background .3s;}
.gallery-item:hover::after{background:rgba(200,138,0,0.18);}
@media (max-width:920px){.gallery-grid{grid-template-columns:repeat(3,1fr);}}
/* ================= NEWSLETTER ================= */
.newsletter{
position:relative; background:var(--panel-dark); color:var(--cream-text); text-align:center; overflow:hidden;
}
.blob{position:absolute; border-radius:50%; filter:blur(40px); opacity:.55; will-change:transform;}
.blob1{width:420px; height:420px; background:var(--rust); top:-140px; left:-100px; animation:float1 16s ease-in-out infinite;}
.blob2{width:340px; height:340px; background:var(--gold); bottom:-140px; right:-80px; animation:float2 18s ease-in-out infinite;}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(60px,40px) scale(1.15);}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-50px,-30px) scale(1.1);}}
.newsletter-inner{position:relative; z-index:2; max-width:560px; margin:0 auto;}
.newsletter h2{font-size:clamp(30px,4vw,46px); margin-bottom:16px; color:var(--cream-text);}
.newsletter p{color:var(--muted-dark); margin-bottom:32px;}
.nl-form{display:flex; gap:10px; max-width:440px; margin:0 auto;}
.nl-form input{
flex:1; padding:16px 18px; border-radius:2px; border:1px solid var(--line-dark);
background:rgba(255,255,255,0.05); color:var(--cream-text); font-size:14px;
}
.nl-form input::placeholder{color:var(--muted-dark);}
.nl-form input:focus{outline:2px solid var(--gold); outline-offset:2px;}
.nl-note{margin-top:16px; font-size:12px; color:var(--muted-dark); opacity:0; transition:opacity .4s;}
.nl-note.show{opacity:1;}
/* ================= FOOTER ================= */
.site-footer{background:#241a0d; color:var(--muted-dark); padding:64px 5vw 30px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:60px; border-bottom:1px solid var(--line-dark);}
.footer-grid h5{color:var(--muted-dark); font-size:13px; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:20px;}
.footer-grid ul{list-style:none;}
.footer-grid li{margin-bottom:12px; font-size:14px;}
.footer-grid a:hover{color:var(--cream-text);}
.footer-logo{margin-bottom:14px;}
.footer-logo img{height:clamp(40px, 4.5vw, 56px); width:auto;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:26px; font-size:13px; flex-wrap:wrap; gap:16px;}
.socials{display:flex; gap:12px;}
.socials a{width:36px; height:36px; border:1px solid var(--line-dark); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; transition:background .25s;}
.socials a:hover{background:rgba(255,255,255,0.08);}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;}}
/* ---- scroll to top ---- */
/* The parent framework ships its own scroll-to-top button
* (#bt-scroll-up / #bt-scroll-up-reader, output by Base\scroll_up() in
* inc/template-functions/footer-functions.php), on by default via the
* theme's own 'scroll_up' option default. It renders on every page
* regardless of which template is used, stacked directly on top of
* this theme's own .totop button in the same bottom-right spot — two
* overlapping arrow buttons. We only want the custom .totop one, so
* the native one is hidden here rather than touched in core files
* (a saved Customizer value could re-enable it there anyway; CSS is
* the one place guaranteed to always win). */
#bt-scroll-up, #bt-scroll-up-reader{display:none !important;}
.totop{
position:fixed; right:26px; bottom:26px; width:48px; height:48px; border-radius:50%;
background:var(--rust); color:#fff; display:flex; align-items:center; justify-content:center;
opacity:0; pointer-events:none; transform:translateY(10px);
transition:opacity .3s, transform .3s; z-index:9999; box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.totop.show{opacity:1; pointer-events:auto; transform:translateY(0);}
/* On Shop/category pages at mobile widths, the new fixed
.zbw-mobile-actionbar (Filter/Sort) sits at bottom:0 — without this,
.totop's own bottom:26px placed it directly on top of that bar
(z-index:9999 meant it visually won, but overlapping the Filter/Sort
buttons instead of sitting cleanly above them). Raised on every page
at this width for consistency, not just Shop — harmless on pages
without the action bar, since .totop just sits a bit higher. */
@media (max-width:960px){
.totop{bottom:86px;}
}
/* ================= HERO (redesigned two-column) ================= */
.hero-inner{
position:relative; z-index:2; width:100%; max-width:1320px; margin:0 auto;
display:grid; grid-template-columns:1.05fr 0.95fr; align-items:center; gap:40px;
}
.hero-figure{
display:flex; align-items:center; justify-content:center; position:relative;
}
.hero-figure img{
max-width:380px; width:100%; filter:drop-shadow(0 30px 60px rgba(0,0,0,0.5));
animation:figureFloat 6s ease-in-out infinite;
}
@keyframes figureFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-16px);}}
.hero-figure .ring{
position:absolute; width:420px; height:420px; border-radius:50%;
border:1px solid rgba(247,237,176,0.25); animation:ringSpin 30s linear infinite;
}
.hero-figure .ring.r2{width:480px; height:480px; border-color:rgba(200,138,0,0.25); animation-duration:40s; animation-direction:reverse;}
@keyframes ringSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.hero-figure .photo-note{
position:absolute; bottom:-6px; right:0; font-size:11px; color:var(--muted-dark);
background:rgba(36,26,13,0.7); padding:6px 12px; border-radius:100px; backdrop-filter:blur(6px);
}
@media (max-width:900px){
.hero-inner{grid-template-columns:1fr; text-align:center;}
.hero-figure{order:-1; margin-bottom:10px;}
.hero-figure img{max-width:260px;}
.hero-cta{justify-content:center;}
}
/* ================= RIBBON COMPONENT (reused across sections) ================= */
.ribbon{
position:relative;
clip-path:polygon(2.5% 0%, 97.5% 0%, 100% 50%, 97.5% 100%, 2.5% 100%, 0% 50%);
padding:64px 8vw;
text-align:center;
}
.ribbon-copper{background:linear-gradient(120deg, var(--rust), var(--rust-dark)); color:#fff;}
.ribbon-copper .eyebrow{color:var(--sand);}
.ribbon-cream{background:var(--sand); color:var(--ink);}
.ribbon h2{font-size:clamp(26px,3.4vw,40px); margin:12px 0 14px;}
.ribbon-copper h2{color:var(--cream-text);}
.ribbon p{max-width:520px; margin:0 auto 26px; line-height:1.6; opacity:.92;}
.ribbon-icons{display:flex; justify-content:center; gap:50px; flex-wrap:wrap; margin-top:10px;}
.ribbon-icons .ri{display:flex; flex-direction:column; align-items:center; gap:8px; font-size:13px; font-weight:600; max-width:150px;}
.ribbon-icons .ri .ico{font-size:26px;}
.ribbon-icons .ri .ico .zub-icon{width:26px; height:26px; color:#fff;}
/* corner ribbon badge (diagonal, for product cards) */
.corner-ribbon{
position:absolute; top:16px; left:-36px; width:150px; padding:6px 0; z-index:4;
background:var(--rust); color:#fff; text-align:center;
font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
transform:rotate(-40deg); box-shadow:0 3px 8px rgba(0,0,0,0.25);
}
.corner-ribbon.gold{background:var(--gold);}
.corner-ribbon.teal{background:var(--teal);}
/* ================= 3D RACK SECTION (moved out of hero) ================= */
.rack-section{
background:radial-gradient(120% 100% at 50% 0%, #4A3620 0%, var(--ink) 60%, #241a0d 100%);
color:var(--cream-text); text-align:center; overflow:hidden; position:relative;
}
.rack-section .section-head{margin:0 auto 20px;}
/* FIX: this section sits on a dark ink background — the shared
".section-head p.desc" rule below sets a dark brown (--muted-light),
which was unreadable here. Force it to the mango-gold accent instead. */
.rack-section .section-head p.desc{color:var(--gold) !important;}
.rack-section .section-head h2{color:var(--cream-text);}
/* ================= HELP & SUPPORT ================= */
.help-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.help-card{
background:var(--paper-2); border:1px solid var(--line-light); border-radius:10px;
padding:32px 26px; text-align:center; transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.help-card:hover{transform:translateY(-6px); box-shadow:0 20px 36px rgba(59,42,21,0.1);}
.help-card .ico{font-size:30px; margin-bottom:14px;}
.help-card .ico .zub-icon{width:28px; height:28px; color:var(--rust); margin:0 auto 14px;}
.help-card h4{font-family:var(--font-body); font-weight:600; font-size:16px; margin-bottom:8px;}
.help-card p{font-size:14px; color:var(--muted-light); line-height:1.55; margin-bottom:14px;}
.help-card a{font-size:13px; font-weight:600; color:var(--rust);}
@media (max-width:920px){.help-grid{grid-template-columns:repeat(2,1fr);}}
/* ================= LOOKBOOK ================= */
.lookbook-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.look-card{position:relative; border-radius:10px; overflow:hidden; aspect-ratio:3/4; transform-style:preserve-3d; transition:transform .3s var(--ease);}
.look-card img{width:100% !important; height:100% !important; max-width:none !important; object-fit:cover !important; transition:transform .6s var(--ease);}
.look-card:hover img{transform:scale(1.07);}
.look-card:hover{transform:translateY(-6px);}
.look-overlay{
position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:26px;
background:linear-gradient(to top, rgba(36,26,13,0.85) 0%, rgba(36,26,13,0.05) 60%);
color:#fff;
}
.look-overlay .look-cat{font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--gold); margin-bottom:6px;}
.look-overlay h4{font-size:19px; margin-bottom:10px; color:var(--cream-text);}
.look-overlay a{font-size:12px; font-weight:600; text-decoration:underline;}
@media (max-width:920px){.lookbook-grid{grid-template-columns:1fr;}}
/* ================= FOOTER (3D hover) ================= */
.site-footer{background:var(--panel-dark); color:var(--muted-dark); padding:64px 5vw 30px; perspective:1000px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:60px; border-bottom:1px solid var(--line-dark);}
.footer-grid > div{transition:transform .3s var(--ease);}
.footer-grid > div:hover{transform:translateY(-6px) rotateX(4deg);}
.footer-grid h5{color:var(--muted-dark); font-size:13px; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:20px;}
.footer-grid ul{list-style:none;}
.footer-grid li{margin-bottom:12px; font-size:14px;}
.footer-grid a:hover{color:var(--cream-text);}
.footer-logo{margin-bottom:14px;}
.footer-logo img{height:clamp(40px, 4.5vw, 56px); width:auto;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:26px; font-size:13px; flex-wrap:wrap; gap:16px;}
.socials{display:flex; gap:12px;}
.socials a{width:36px; height:36px; border:1px solid var(--line-dark); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--gold); transition:transform .25s, background .25s, box-shadow .25s, color .25s;}
.socials a:hover{background:var(--rust); border-color:var(--rust); color:#fff; transform:translateY(-5px) scale(1.08); box-shadow:0 12px 22px rgba(200,138,0,0.35);}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;}}
/* ================= SCROLL PROGRESS ================= */
.scroll-progress{position:fixed; top:0; left:0; height:2px; width:0%; background:var(--rust); z-index:300; transition:width .1s linear;}
@media (prefers-reduced-motion: reduce){.scroll-progress{transition:none;}}
/* ================= ICON ROW (reusable trust / benefit strips) ================= */
.icon-row{
display:flex; justify-content:center; gap:56px; flex-wrap:wrap;
padding:44px 5vw; text-align:center; background:var(--paper);
border-top:1px solid var(--line-light); border-bottom:1px solid var(--line-light);
}
.icon-row.compact{padding:28px 5vw; gap:38px; justify-content:space-evenly;}
.icon-row.on-dark{background:var(--panel-dark); border-color:var(--line-dark); color:var(--cream-text);}
.icon-row.on-sand{background:var(--sand); border-color:var(--line-light);}
.icon-row .ir-item{
display:flex; flex-direction:column; align-items:center; gap:12px; max-width:170px;
transition:transform .3s var(--ease);
}
.icon-row .ir-item:hover{transform:translateY(-4px);}
.icon-row .ir-item .ico{
display:flex; align-items:center; justify-content:center; width:48px; height:48px;
border-radius:50%; background:rgba(200,138,0,0.1); color:var(--rust);
transition:background .3s var(--ease), transform .3s var(--ease);
}
.icon-row .ir-item .ico .zub-icon{width:22px; height:22px; color:var(--rust); transition:transform .3s var(--ease);}
.icon-row .ir-item:hover .ico{background:var(--rust); transform:scale(1.08);}
.icon-row .ir-item:hover .ico .zub-icon{color:#fff; transform:scale(1.1) rotate(-6deg);}
.icon-row.on-dark .ir-item .ico{background:rgba(232,174,31,0.14); color:var(--gold);}
.icon-row.on-dark .ir-item .ico .zub-icon{color:var(--gold);}
.icon-row.on-dark .ir-item:hover .ico{background:var(--gold);}
.icon-row.on-dark .ir-item:hover .ico .zub-icon{color:var(--panel-dark);}
.icon-row .ir-item span{font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;}
.icon-row.scroller{justify-content:flex-start; overflow-x:auto; gap:34px; -webkit-overflow-scrolling:touch;}
/* ---- star rating badge (real average from WooCommerce reviews) ---- */
.star-rating-badge{display:flex; flex-direction:column; align-items:center; gap:10px;}
.star-rating-badge .stars{display:flex; gap:4px; font-size:26px; line-height:1;}
.star-rating-badge .star{color:var(--line-light); position:relative;}
.star-rating-badge .star.full{color:var(--gold);}
.star-rating-badge .star.half{
background:linear-gradient(90deg, var(--gold) 50%, var(--line-light) 50%);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.star-rating-badge .rating-text{font-size:13.5px; color:var(--muted-light); letter-spacing:0.01em;}
.star-rating-badge .rating-text strong{color:var(--ink); font-weight:700;}
@media (max-width:760px){
.icon-row{gap:30px;}
.icon-row .ir-item{max-width:120px;}
}
/* ================= BRAND STATEMENT ================= */
.brand-statement{text-align:center; max-width:920px; margin:0 auto; padding:72px 5vw;}
.brand-statement h2{font-size:clamp(32px,5.2vw,62px); line-height:1.15;}
.brand-statement p{margin-top:26px; font-size:17px; line-height:1.75; color:var(--muted-light); max-width:620px; margin-left:auto; margin-right:auto;}
/* ================= PROMO STRIP (thin clickable) ================= */
.promo-strip{
display:flex; align-items:center; justify-content:center; gap:14px;
background:linear-gradient(120deg, var(--paper-2), var(--sand));
border-top:1px solid var(--line-light); border-bottom:1px solid var(--line-light);
padding:22px 5vw; text-align:center;
}
.promo-strip a{font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--ink); transition:letter-spacing .3s, color .3s;}
.promo-strip a:hover{color:var(--rust); letter-spacing:0.01em;}
.promo-strip .arrow{transition:transform .3s var(--ease); display:inline-block;}
.promo-strip a:hover .arrow{transform:translateX(6px);}
/* ================= SPLIT (editorial image + text, reused) ================= */
.split{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;}
.split.reverse{direction:rtl;}
.split.reverse > *{direction:ltr;}
.split-media{position:relative; aspect-ratio:4/5; border-radius:8px; overflow:hidden;}
.split-media img{width:100% !important; height:100% !important; max-width:none !important; object-fit:cover !important;}
.split-text .eyebrow{margin-bottom:16px; display:block;}
.split-text h2{font-size:clamp(28px,3.6vw,44px); margin-bottom:20px;}
.split-text p{color:var(--muted-light); line-height:1.75; margin-bottom:16px; font-size:16px;}
.split-text .btn{margin-top:14px;}
@media (max-width:860px){.split{grid-template-columns:1fr;} .split.reverse{direction:ltr;}}
/* ================= CARD GRID (why-us / style-guide / policy, reusable) ================= */
.card-grid{display:grid; gap:24px;}
.card-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.card-grid.cols-4{grid-template-columns:repeat(4,1fr);}
.card-grid.cols-6{grid-template-columns:repeat(3,1fr);}
.info-card{
background:var(--paper-2); border:1px solid var(--line-light); border-radius:10px; padding:34px 28px;
transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.info-card:hover{transform:translateY(-6px); box-shadow:0 22px 40px rgba(59,42,21,0.1);}
.info-card .num{font-family:var(--font-display); font-size:13px; font-weight:700; color:var(--rust); letter-spacing:0.06em; margin-bottom:14px; display:block;}
.info-card h4{font-family:var(--font-display); font-weight:600; font-size:19px; margin-bottom:10px;}
.info-card p{font-size:14.5px; color:var(--muted-light); line-height:1.6;}
.info-card.on-sand{background:var(--sand); border-color:transparent;}
@media (max-width:920px){.card-grid.cols-3,.card-grid.cols-4,.card-grid.cols-6{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.card-grid.cols-3,.card-grid.cols-4,.card-grid.cols-6{grid-template-columns:1fr;}}
/* ================= COLLECTION GRID ================= */
.collection-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.collection-card{position:relative; aspect-ratio:4/5; border-radius:8px; overflow:hidden;}
.collection-card img{width:100% !important; height:100% !important; max-width:none !important; object-fit:cover !important; object-position:center 22%; transition:transform .6s var(--ease);}
.collection-card:hover img{transform:scale(1.08);}
.collection-card::after{content:"";position:absolute; inset:0; background:linear-gradient(to top, rgba(20,19,17,0.82) 0%, rgba(20,19,17,0.05) 55%);}
.collection-card h3{color:var(--cream-text);}
.collection-card .cc-inner{position:absolute; bottom:0; left:0; right:0; padding:24px; z-index:2; color:#fff;}
.collection-card .cc-label{font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--gold); margin-bottom:6px; display:block;}
.collection-card h3{font-size:20px; margin-bottom:10px;}
.collection-card .cc-inner span{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; border-bottom:1px solid rgba(255,255,255,0.5); padding-bottom:2px;}
@media (max-width:920px){.collection-grid{grid-template-columns:repeat(2,1fr);}}
/* ================= PRODUCT SCROLLER (horizontal carousel shell for dynamic Woo output) ================= */
.product-scroller{display:flex; gap:24px; overflow-x:auto; padding-bottom:10px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;}
.product-scroller .product-card{min-width:250px; scroll-snap-align:start;}
.product-scroller::-webkit-scrollbar{height:6px;}
.product-scroller::-webkit-scrollbar-thumb{background:var(--line-light); border-radius:10px;}
/* ================= TABS ================= */
.tabs-nav{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:44px; border-bottom:1px solid var(--line-light); padding-bottom:0;}
.tabs-nav button{
padding:12px 4px; margin-right:26px; font-size:13px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
color:var(--muted-light); border-bottom:2px solid transparent; transition:color .25s, border-color .25s;
}
.tabs-nav button:hover{color:var(--ink);}
.tabs-nav button.active{color:var(--rust); border-color:var(--rust);}
.tabs-panel{display:none;}
.tabs-panel.active{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
@media (max-width:920px){.tabs-panel.active{grid-template-columns:repeat(2,1fr);}}
/* ================= SPOTLIGHT ROW (category split: women/men/unisex) ================= */
.spotlight-row{display:grid; grid-template-columns:repeat(3,1fr); min-height:520px;}
.spotlight-panel{position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:40px; color:#fff;}
.spotlight-panel img{position:absolute !important; inset:0; width:100% !important; height:100% !important; max-width:none !important; object-fit:cover !important; transition:transform .7s var(--ease); z-index:0;}
.spotlight-panel:hover img{transform:scale(1.07);}
.spotlight-panel::after{content:"";position:absolute; inset:0; background:linear-gradient(to top, rgba(20,19,17,0.78) 0%, rgba(20,19,17,0.1) 60%); z-index:1;}
.spotlight-panel .sp-inner{position:relative; z-index:2;}
.spotlight-panel h3{font-size:30px; margin-bottom:14px; color:var(--cream-text);}
@media (max-width:860px){.spotlight-row{grid-template-columns:1fr;}}
/* ================= HOTSPOT (shop the look) ================= */
.hotspot-frame{position:relative; max-width:640px; margin:0 auto; border-radius:10px; overflow:hidden;}
.hotspot-frame img{width:100% !important; height:auto !important; max-width:100% !important; display:block;}
.hotspot{
position:absolute; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,0.92);
display:flex; align-items:center; justify-content:center; color:var(--rust); font-weight:800; font-size:14px;
box-shadow:0 0 0 6px rgba(255,255,255,0.28); animation:hotspotPulse 2.4s ease-in-out infinite; cursor:pointer;
}
@keyframes hotspotPulse{0%,100%{box-shadow:0 0 0 6px rgba(255,255,255,0.28);}50%{box-shadow:0 0 0 11px rgba(255,255,255,0.12);}}
.hotspot .htip{
position:absolute; bottom:calc(100% + 12px); left:50%; transform:translateX(-50%);
background:var(--panel-dark); color:var(--cream-text); padding:10px 14px; border-radius:6px; font-size:12px;
white-space:nowrap; opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s;
}
.hotspot:hover .htip{opacity:1; visibility:visible;}
/* ================= VALUE BLOCK ================= */
.value-block{text-align:center; max-width:760px; margin:0 auto; padding:64px 5vw;}
.value-block h2{font-size:clamp(28px,4.2vw,46px); line-height:1.2; margin-bottom:26px;}
.value-list{display:flex; justify-content:center; gap:40px; flex-wrap:wrap; margin-top:20px;}
.value-list span{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted-light); padding:10px 18px; border:1px solid var(--line-light); border-radius:100px;}
/* ================= CAMPAIGN BLOCK (seasonal / drop / final hero) ================= */
.campaign-block{
position:relative; min-height:56vh; display:flex; align-items:center; justify-content:center; text-align:center;
overflow:hidden; color:#fff; background:var(--panel-dark);
}
.campaign-block.tall{min-height:78vh;}
.campaign-block img.cb-bg{position:absolute !important; inset:0; width:100% !important; height:100% !important; max-width:none !important; object-fit:cover !important; z-index:0; opacity:.55;}
.campaign-block::after{content:"";position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,19,17,0.55), rgba(20,19,17,0.85)); z-index:1;}
.campaign-block .cb-inner{position:relative; z-index:2; max-width:640px; padding:0 5vw;}
.campaign-block h2{font-size:clamp(34px,5.6vw,68px); margin-bottom:20px; line-height:1.1; color:var(--cream-text);}
.campaign-block p{color:var(--muted-dark); margin-bottom:30px; font-size:17px; line-height:1.6;}
/* ================= PHILOSOPHY ================= */
.philosophy{background:var(--panel-dark); color:var(--cream-text); padding:72px 5vw; text-align:center;}
.philosophy-list{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:38px;}
.philosophy-list h3{font-family:var(--font-display); font-weight:500; font-style:italic; font-size:clamp(24px,3.6vw,38px); line-height:1.3; color:var(--cream-text);}
/* ================= COMMUNITY VALUES ================= */
.values-row{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; text-align:center; max-width:900px; margin:0 auto;}
.values-row .v-item h4{font-family:var(--font-display); font-size:22px; margin-bottom:10px;}
.values-row .v-item p{font-size:14px; color:var(--muted-light); line-height:1.6;}
@media (max-width:760px){.values-row{grid-template-columns:1fr;}}
/* ================= FAQ ACCORDION ================= */
.faq-list{max-width:760px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line-light);}
.faq-q{
width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px;
padding:24px 4px; text-align:left; font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--ink);
}
.faq-q .plus{font-size:20px; color:var(--rust); transition:transform .3s var(--ease); flex-shrink:0;}
.faq-item.open .faq-q .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s var(--ease);}
.faq-a p{padding:0 4px 24px; color:var(--muted-light); font-size:15px; line-height:1.7; max-width:640px;}
/* ================= PLACEHOLDER NOTE (CMS-editable content markers) ================= */
.cms-note{font-size:11px; color:var(--muted-light); text-align:center; margin-top:18px; opacity:.7; letter-spacing:0.02em;}
/* ================= FLOATING QUICK ACTIONS ================= */
.quick-actions{
position:fixed; right:26px; bottom:88px; z-index:90; display:flex; flex-direction:column; gap:10px;
}
.quick-actions a{
width:48px; height:48px; border-radius:50%; background:#fff; border:1px solid var(--line-light);
display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--rust);
box-shadow:0 10px 24px rgba(59,42,21,.14); transition:transform .25s, background .25s, color .25s;
}
.quick-actions a:hover{background:var(--rust); color:#fff; transform:translateY(-3px);}
/* This button is a deliberately-white circular chip in BOTH themes
(a common floating-action-button treatment) — it's the one spot in
the theme that intentionally keeps a white surface even in dark
mode. Per spec: the icon on it must switch to dark navy blue in
dark mode instead of the usual orange, since orange-on-white would
still read fine but doesn't match "white bg → navy icon." */
html.dark-theme .quick-actions a{color:var(--icon-navy);}
html.dark-theme .quick-actions a:hover{background:var(--rust); color:#fff;}
@media (max-width:760px){.quick-actions{display:none;}}
/* ================= FINAL / SUPPORT RIBBON ROW ================= */
.link-ribbon{
display:flex; justify-content:center; flex-wrap:wrap; gap:0; background:var(--panel-dark); padding:22px 5vw;
}
.link-ribbon a{
color:var(--muted-dark); font-size:12.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
padding:0 20px; border-right:1px solid var(--line-dark); transition:color .2s;
}
.link-ribbon a:last-child{border-right:none;}
.link-ribbon a:hover{color:var(--gold);}
/* ================= COPPER PANEL (support / reassurance sections) ================= */
.copper-panel{background:var(--sand); text-align:center; padding:60px 5vw;}
.copper-panel h2{font-size:clamp(26px,3.6vw,40px); margin-bottom:16px;}
.copper-panel p{max-width:520px; margin:0 auto 28px; color:var(--muted-light); line-height:1.6;}