/* ═══════════════════════════════════════
   TOKENS — Warm Earth Palette
   ═══════════════════════════════════════ */
:root {
  --dune: #F7F3ED;
  --umber: #3D2E1F;
  --sand: #E8DFD0;
  --tawny: #8B7355;
  --gold: #B8860B;
  --gold-hover: #CC9A1A;
  --khaki: #C9B99A;
  --cream: #FAF8F4;
  --warm-grey: #A89880;
  --border: #DDD4C6;
  --border-light: #EBE5DA;

  --bg: var(--dune);
  --bg-alt: var(--sand);
  --bg-dark: var(--umber);
  --text: var(--umber);
  --text-secondary: var(--tawny);
  --text-muted: var(--warm-grey);
  --text-on-dark: var(--dune);
  --accent: var(--gold);
  --accent-hover: var(--gold-hover);
  --card-bg: var(--cream);
  --shadow: 0 2px 12px rgba(61,46,31,0.06);
  --shadow-md: 0 6px 24px rgba(61,46,31,0.08);
  --shadow-lg: 0 12px 40px rgba(61,46,31,0.1);

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;

  --fs-xs: 0.7rem;
  --fs-sm: 0.8rem;
  --fs-base: 0.925rem;
  --fs-md: 1.05rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.6rem;
  --fs-2xl: 2.1rem;
  --fs-3xl: 2.8rem;
  --fs-hero: clamp(2.6rem, 5.5vw, 4.8rem);

  --max-w: 1340px;
  --header-h: 60px;
  --radius: 0;
  --star: #D4A017;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dune: #1A1612;
    --umber: #E8E0D4;
    --sand: #231E18;
    --tawny: #B0A08A;
    --cream: #1E1A15;
    --warm-grey: #8A7D6E;
    --border: #3A3228;
    --border-light: #2E2820;
    --bg: var(--dune);
    --bg-alt: var(--sand);
    --bg-dark: #0F0D0A;
    --text: var(--umber);
    --text-secondary: var(--tawny);
    --text-muted: var(--warm-grey);
    --text-on-dark: #E8E0D4;
    --accent: #CCA020;
    --accent-hover: #DDB030;
    --card-bg: #1E1A15;
    --shadow: 0 2px 12px rgba(0,0,0,0.2);
    --shadow-md: 0 6px 24px rgba(0,0,0,0.3);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.35);
  }
}
:root[data-theme="dark"] {
  --dune: #1A1612;
  --umber: #E8E0D4;
  --sand: #231E18;
  --tawny: #B0A08A;
  --cream: #1E1A15;
  --warm-grey: #8A7D6E;
  --border: #3A3228;
  --border-light: #2E2820;
  --bg: var(--dune);
  --bg-alt: var(--sand);
  --bg-dark: #0F0D0A;
  --text: var(--umber);
  --text-secondary: var(--tawny);
  --text-muted: var(--warm-grey);
  --text-on-dark: #E8E0D4;
  --accent: #CCA020;
  --accent-hover: #DDB030;
  --card-bg: #1E1A15;
  --shadow: 0 2px 12px rgba(0,0,0,0.2);
  --shadow-md: 0 6px 24px rgba(0,0,0,0.3);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.35);
}

/* ═══════════════════════════════════════
   RESET
   ═══════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);font-size:var(--fs-base);color:var(--text);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;object-fit:cover}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul,ol{list-style:none}
input,select,textarea{font-family:inherit;font-size:inherit}
.container{max-width:var(--max-w);margin:0 auto;padding:0 clamp(1rem,3vw,2rem)}

/* Utility */
.label{text-transform:uppercase;letter-spacing:0.14em;font-size:var(--fs-xs);font-weight:600}
.icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ═══════════════════════════════════════
   PROMO BAR
   ═══════════════════════════════════════ */
.promo-bar{
  background:var(--bg-dark);color:var(--text-on-dark);
  text-align:center;padding:10px 1rem;
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.18em;font-weight:500;
}
.promo-bar em{font-style:normal;color:var(--accent)}

/* ═══════════════════════════════════════
   HEADER — centered logo with grid
   ═══════════════════════════════════════ */
.header{
  position:sticky;top:0;z-index:1000;
  background:var(--bg);
  border-bottom:1px solid var(--border-light);
  transition:box-shadow .3s;
}
.header.scrolled{box-shadow:var(--shadow)}
.header-row{
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;
  height:var(--header-h);
}

.nav-left{display:flex;align-items:center;gap:2rem}
.nav-left a{
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.12em;font-weight:500;
  color:var(--text);position:relative;padding:4px 0;transition:color .2s;
}
.nav-left a::after{
  content:'';position:absolute;bottom:-2px;left:0;width:0;height:1.5px;
  background:var(--accent);transition:width .3s ease;
}
.nav-left a:hover::after{width:100%}
.nav-left a:hover{color:var(--accent)}

.brand{
  font-family:var(--font-display);font-size:1.7rem;font-weight:700;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--text);
  text-align:center;
}

.nav-right{display:flex;align-items:center;gap:1.2rem;justify-content:flex-end}
.nav-right button,.nav-right a{
  color:var(--text);transition:color .2s;display:flex;align-items:center;gap:5px;
}
.nav-right button:hover,.nav-right a:hover{color:var(--accent)}
.cart-badge{
  background:var(--accent);color:#fff;font-size:0.55rem;
  width:15px;height:15px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:700;margin-left:-3px;
}

.mobile-toggle{display:none;flex-direction:column;gap:4px;cursor:pointer;padding:4px}
.mobile-toggle span{display:block;width:20px;height:1.5px;background:var(--text);transition:transform .3s,opacity .3s}

/* ═══════════════════════════════════════
   HERO — Editorial Split
   ═══════════════════════════════════════ */
.hero{
  display:grid;grid-template-columns:1fr 1fr;min-height:80vh;
}
.hero-text{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(2rem,5vw,5rem);background:var(--bg);
}
.hero-label{
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.3em;
  color:var(--accent);margin-bottom:1.5rem;font-weight:600;
}
.hero-title{
  font-family:var(--font-display);font-size:var(--fs-hero);font-weight:400;
  line-height:1.08;color:var(--text);margin-bottom:1.5rem;text-wrap:balance;
}
.hero-title em{font-style:italic;font-weight:400}
.hero-desc{
  font-size:var(--fs-base);color:var(--text-secondary);
  line-height:1.8;margin-bottom:2rem;max-width:420px;
}
.hero-cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 36px;background:var(--accent);color:#fff;
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.18em;font-weight:600;
  transition:all .3s;align-self:flex-start;
}
.hero-cta:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 16px rgba(184,134,11,0.25)}
.hero-cta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}

.hero-image{position:relative;overflow:hidden;background:var(--sand)}
.hero-image img{width:100%;height:100%;object-fit:cover}

/* ═══════════════════════════════════════
   MARQUEE
   ═══════════════════════════════════════ */
.marquee{overflow:hidden;background:var(--bg-dark);padding:14px 0;white-space:nowrap}
.marquee-track{display:inline-flex;gap:3rem;animation:marquee 30s linear infinite}
.marquee-item{font-family:var(--font-display);font-size:var(--fs-sm);color:var(--text-on-dark);text-transform:uppercase;letter-spacing:0.2em;opacity:0.5}
.marquee-item .dot{color:var(--accent);margin:0 0.5rem}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ═══════════════════════════════════════
   TRUST BADGES
   ═══════════════════════════════════════ */
.trust-strip{padding:3.5rem 0;background:var(--bg);border-bottom:1px solid var(--border-light)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center}
.trust-item{display:flex;flex-direction:column;align-items:center;gap:0.5rem}
.trust-icon{font-size:1.5rem;color:var(--accent);margin-bottom:0.25rem}
.trust-title{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.14em;font-weight:600;color:var(--text)}
.trust-desc{font-size:var(--fs-xs);color:var(--text-muted);line-height:1.5}

/* ═══════════════════════════════════════
   COLLECTION CARDS
   ═══════════════════════════════════════ */
.collections-section{padding:5rem 0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:2.5rem}
.section-head h2{font-family:var(--font-display);font-size:var(--fs-3xl);font-weight:400;color:var(--text)}
.section-head .view-all{
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.12em;font-weight:600;
  color:var(--accent);display:flex;align-items:center;gap:6px;transition:gap .3s;
}
.section-head .view-all:hover{gap:12px}
.section-head .view-all svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}

.collections-grid{display:grid;grid-template-columns:1.2fr 0.8fr 1fr;gap:1rem;min-height:500px}
.collection-card{position:relative;overflow:hidden;cursor:pointer;background:var(--sand)}
.collection-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.collection-card:hover img{transform:scale(1.05)}
.collection-card-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(61,46,31,0.7) 100%);z-index:1}
.collection-card-content{position:absolute;bottom:0;left:0;right:0;padding:2rem;z-index:2;color:#F7F3ED}
.collection-card-title{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:400;margin-bottom:4px}
.collection-card-count{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.12em;opacity:0.8}
.collection-card:nth-child(2){margin-top:3rem}

/* ═══════════════════════════════════════
   PRODUCT GRID
   ═══════════════════════════════════════ */
.products-section{padding:5rem 0}
.products-section.alt-bg{background:var(--bg-alt)}
.products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(0.75rem,1.5vw,1.25rem)}
.product-card{cursor:pointer;position:relative}
.product-card-img{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--sand);margin-bottom:0.75rem}
.product-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.product-card:hover .product-card-img img{transform:scale(1.04)}
.product-badge{position:absolute;top:0.75rem;left:0.75rem;z-index:2;background:var(--accent);color:#fff;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.08em;padding:4px 10px;font-weight:600}
.product-badge.sold-out{background:var(--text-secondary)}
.product-quickview{position:absolute;bottom:0;left:0;right:0;background:rgba(61,46,31,0.92);color:#F7F3ED;text-align:center;padding:12px;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.14em;font-weight:500;transform:translateY(100%);transition:transform .3s ease;z-index:2}
.product-card:hover .product-quickview{transform:translateY(0)}
.product-wishlist{position:absolute;top:0.75rem;right:0.75rem;z-index:2;width:34px;height:34px;background:var(--bg);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);opacity:0;transition:opacity .3s}
.product-card:hover .product-wishlist{opacity:1}
.product-wishlist .icon{width:15px;height:15px}
.product-card-name{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:500;margin-bottom:2px}
.product-card-cat{font-size:var(--fs-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:4px}
.product-card-price{font-size:var(--fs-base);font-weight:600}

/* ═══════════════════════════════════════
   EDITORIAL BLOCK
   ═══════════════════════════════════════ */
.editorial{display:grid;grid-template-columns:1fr 1fr;min-height:60vh}
.editorial.reverse .editorial-img{order:2}
.editorial.reverse .editorial-copy{order:1}
.editorial-img{position:relative;overflow:hidden;background:var(--sand)}
.editorial-img img{width:100%;height:100%;object-fit:cover}
.editorial-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(2rem,5vw,5rem);background:var(--bg-alt)}
.editorial-label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.3em;color:var(--accent);margin-bottom:1.2rem;font-weight:600}
.editorial-title{font-family:var(--font-display);font-size:var(--fs-3xl);font-weight:400;line-height:1.15;margin-bottom:1.5rem;text-wrap:balance}
.editorial-body{font-size:var(--fs-base);color:var(--text-secondary);line-height:1.8;margin-bottom:1.5rem;max-width:460px}
.editorial-link{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.14em;font-weight:600;color:var(--accent);transition:gap .3s}
.editorial-link:hover{gap:14px}
.editorial-link svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}

/* ═══════════════════════════════════════
   REVIEWS SECTION — Homepage
   ═══════════════════════════════════════ */
.reviews-section{padding:5rem 0;background:var(--bg)}
.reviews-header{text-align:center;margin-bottom:3rem}
.reviews-header h2{font-family:var(--font-display);font-size:var(--fs-3xl);font-weight:400;margin-bottom:0.5rem}
.reviews-stars{color:var(--star);font-size:1.2rem;letter-spacing:2px;margin-bottom:0.3rem}
.reviews-count{font-size:var(--fs-sm);color:var(--text-muted)}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.review-card{padding:2rem;background:var(--card-bg);border:1px solid var(--border-light)}
.review-stars{color:var(--star);font-size:0.85rem;margin-bottom:0.75rem;letter-spacing:1px}
.review-title{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:500;margin-bottom:0.5rem}
.review-text{font-size:var(--fs-sm);color:var(--text-secondary);line-height:1.7;margin-bottom:1rem}
.review-author{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.1em;color:var(--text-muted);font-weight:500}
.review-date{font-size:var(--fs-xs);color:var(--text-muted);margin-top:2px}

/* ═══════════════════════════════════════
   SOCIAL FEED SECTION
   ═══════════════════════════════════════ */
.social-section{padding:5rem 0;background:var(--bg-alt)}
.social-header{text-align:center;margin-bottom:2.5rem}
.social-header h2{font-family:var(--font-display);font-size:var(--fs-3xl);font-weight:400;margin-bottom:0.3rem}
.social-handle{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.2em;color:var(--accent);font-weight:600}
.social-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.social-item{position:relative;aspect-ratio:1;overflow:hidden;cursor:pointer;background:var(--sand)}
.social-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,opacity .3s}
.social-item:hover img{transform:scale(1.08);opacity:0.8}
.social-item-overlay{position:absolute;inset:0;background:rgba(61,46,31,0.6);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}
.social-item:hover .social-item-overlay{opacity:1}
.social-item-overlay svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.5}
.social-cta{text-align:center;margin-top:2rem}
.social-cta a{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.14em;font-weight:600;color:var(--accent);transition:gap .3s}
.social-cta a:hover{gap:14px}

/* ═══════════════════════════════════════
   NEWSLETTER
   ═══════════════════════════════════════ */
.newsletter{padding:5rem 0;background:var(--bg-dark);color:var(--text-on-dark);text-align:center}
.newsletter h2{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:400;margin-bottom:0.5rem;color:#F7F3ED}
.newsletter p{font-size:var(--fs-sm);color:rgba(247,243,237,0.55);margin-bottom:2rem}
.newsletter-form{display:flex;max-width:440px;margin:0 auto}
.newsletter-form input{flex:1;padding:14px 18px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);color:#F7F3ED;font-size:var(--fs-sm);outline:none;transition:border-color .2s}
.newsletter-form input::placeholder{color:rgba(247,243,237,0.35)}
.newsletter-form input:focus{border-color:var(--accent)}
.newsletter-form button{padding:14px 24px;background:var(--accent);color:#fff;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.14em;font-weight:600;transition:background .2s}
.newsletter-form button:hover{background:var(--accent-hover)}

/* ═══════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════ */
.footer{background:var(--bg-dark);color:rgba(247,243,237,0.6);padding:4rem 0 1.5rem;border-top:1px solid rgba(255,255,255,0.06)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem}
.footer-brand .brand{color:#F7F3ED;font-size:1.3rem;margin-bottom:1rem;display:block}
.footer-brand p{font-size:var(--fs-sm);line-height:1.7;max-width:260px;color:rgba(247,243,237,0.4)}
.footer-social{display:flex;gap:0.75rem;margin-top:1.2rem}
.footer-social a{width:34px;height:34px;border:1px solid rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;transition:all .2s;color:rgba(247,243,237,0.5)}
.footer-social a:hover{border-color:var(--accent);color:var(--accent)}
.footer-social .icon{width:15px;height:15px}
.footer-col h5{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.14em;color:#F7F3ED;margin-bottom:1.2rem;font-weight:600}
.footer-col a{font-size:var(--fs-sm);color:rgba(247,243,237,0.4);transition:color .2s;display:block;padding:3px 0}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:3rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,0.06);font-size:var(--fs-xs);color:rgba(247,243,237,0.3)}
.footer-pay{display:flex;gap:0.5rem}
.footer-pay span{padding:3px 8px;border:1px solid rgba(255,255,255,0.1);font-size:0.6rem;letter-spacing:0.04em}

/* ═══════════════════════════════════════
   CART DRAWER
   ═══════════════════════════════════════ */
.cart-overlay{position:fixed;inset:0;background:rgba(61,46,31,0.5);z-index:2000;opacity:0;visibility:hidden;transition:all .3s}
.cart-overlay.open{opacity:1;visibility:visible}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:90vw;background:var(--bg);z-index:2001;transform:translateX(100%);transition:transform .4s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column}
.cart-drawer.open{transform:translateX(0)}
.cart-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid var(--border-light)}
.cart-title{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:500}
.cart-items{flex:1;overflow-y:auto;padding:1.5rem}
.cart-item{display:grid;grid-template-columns:80px 1fr;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--border-light)}
.cart-item-img{aspect-ratio:3/4;overflow:hidden;background:var(--sand)}
.cart-item-img img{width:100%;height:100%;object-fit:cover}
.cart-item-info{display:flex;flex-direction:column;gap:3px}
.cart-item-name{font-family:var(--font-display);font-size:var(--fs-md);font-weight:500}
.cart-item-variant{font-size:var(--fs-xs);color:var(--text-muted)}
.cart-item-price{font-size:var(--fs-sm);font-weight:600}
.cart-qty{display:flex;align-items:center;gap:0.4rem;margin-top:auto}
.cart-qty button{width:26px;height:26px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);color:var(--text);transition:border-color .2s}
.cart-qty button:hover{border-color:var(--accent)}
.cart-qty span{font-size:var(--fs-sm);min-width:18px;text-align:center}
.cart-footer{padding:1.5rem;border-top:1px solid var(--border-light)}
.cart-subtotal{display:flex;justify-content:space-between;margin-bottom:0.4rem;font-size:var(--fs-sm)}
.cart-note{font-size:var(--fs-xs);color:var(--text-muted);margin-bottom:1.2rem}
.btn-checkout{display:block;width:100%;padding:15px;background:var(--accent);color:#fff;text-align:center;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.18em;font-weight:600;transition:background .2s}
.btn-checkout:hover{background:var(--accent-hover)}
.btn-continue{display:block;width:100%;text-align:center;padding:10px;margin-top:0.5rem;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.1em;color:var(--text-secondary);transition:color .2s}
.btn-continue:hover{color:var(--accent)}

/* ═══════════════════════════════════════
   SEARCH
   ═══════════════════════════════════════ */
.search-overlay{position:fixed;inset:0;background:rgba(61,46,31,0.5);z-index:2000;opacity:0;visibility:hidden;transition:all .3s;display:flex;align-items:flex-start;justify-content:center;padding-top:12vh}
.search-overlay.open{opacity:1;visibility:visible}
.search-box{background:var(--bg);width:580px;max-width:90vw;padding:2rem;transform:translateY(-16px);transition:transform .3s}
.search-overlay.open .search-box{transform:translateY(0)}
.search-input{width:100%;padding:14px 0;border:none;border-bottom:2px solid var(--border);background:transparent;font-family:var(--font-display);font-size:var(--fs-xl);color:var(--text);outline:none;transition:border-color .2s}
.search-input:focus{border-color:var(--accent)}
.search-input::placeholder{color:var(--text-muted)}
.search-tags{display:flex;flex-wrap:wrap;gap:0.4rem;margin-top:1.2rem}
.search-tag{padding:6px 14px;border:1px solid var(--border);font-size:var(--fs-sm);color:var(--text-secondary);cursor:pointer;transition:all .2s}
.search-tag:hover{border-color:var(--accent);color:var(--accent)}

/* ═══════════════════════════════════════
   PAGES
   ═══════════════════════════════════════ */
.page-header{padding:4rem 0 1.5rem;text-align:center}
.page-header h1{font-family:var(--font-display);font-size:var(--fs-3xl);font-weight:400;margin-bottom:0.3rem}
.page-header .subtitle{font-size:var(--fs-sm);color:var(--text-muted)}
.toolbar{display:flex;justify-content:space-between;align-items:center;padding:0.8rem 0;border-bottom:1px solid var(--border-light);margin-bottom:2rem}
.toolbar-filters{display:flex;gap:0.5rem}
.filter-btn{display:flex;align-items:center;gap:5px;padding:7px 14px;border:1px solid var(--border);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.06em;color:var(--text-secondary);transition:all .2s}
.filter-btn:hover{border-color:var(--accent);color:var(--accent)}
.filter-btn .icon{width:13px;height:13px}
.toolbar-sort{display:flex;align-items:center;gap:0.5rem}
.toolbar-sort label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted)}
.toolbar-sort select{padding:7px 10px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:var(--fs-sm)}

/* ═══════════════════════════════════════
   PRODUCT DETAIL — Culture Hijab inspired
   ═══════════════════════════════════════ */
.pd{padding:2rem 0 4rem}
.pd-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:3.5rem}
.pd-gallery{display:grid;grid-template-columns:80px 1fr;gap:0.6rem;position:sticky;top:calc(var(--header-h) + 1rem);align-self:start}
.pd-thumbs{display:flex;flex-direction:column;gap:0.5rem}
.pd-thumb{aspect-ratio:1;background:var(--sand);cursor:pointer;border:2px solid transparent;transition:border-color .2s;overflow:hidden}
.pd-thumb.active,.pd-thumb:hover{border-color:var(--accent)}
.pd-thumb img{width:100%;height:100%;object-fit:cover}
.pd-main{aspect-ratio:3/4;background:var(--sand);overflow:hidden;position:relative}
.pd-main img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.pd-main:hover img{transform:scale(1.05)}

.pd-info{padding:0.5rem 0}
.pd-crumbs{font-size:var(--fs-xs);color:var(--text-muted);margin-bottom:1.2rem;display:flex;gap:6px;align-items:center}
.pd-crumbs a:hover{color:var(--accent)}
.pd-crumbs .sep{color:var(--border)}
.pd-title{font-family:var(--font-display);font-size:var(--fs-3xl);font-weight:400;margin-bottom:0.4rem}
.pd-rating{display:flex;align-items:center;gap:8px;margin-bottom:1rem}
.pd-rating-stars{color:var(--star);font-size:0.9rem;letter-spacing:1px}
.pd-rating-count{font-size:var(--fs-sm);color:var(--text-muted)}
.pd-rating-count a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.pd-price{font-size:var(--fs-xl);font-weight:600;margin-bottom:1.5rem}
.pd-desc{font-size:var(--fs-base);color:var(--text-secondary);line-height:1.8;margin-bottom:2rem;max-width:480px}

.pd-option-label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.1em;font-weight:600;margin-bottom:0.5rem}
.pd-swatches{display:flex;gap:0.5rem;margin-bottom:2rem;flex-wrap:wrap}
.swatch{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:border-color .2s;position:relative}
.swatch.active{border-color:var(--text)}
.swatch::after{content:'';position:absolute;inset:3px;border-radius:50%;border:2px solid var(--bg)}

.pd-qty{display:flex;align-items:center;margin-bottom:1.5rem}
.pd-qty button{width:44px;height:44px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:var(--fs-md);color:var(--text);transition:border-color .2s}
.pd-qty button:hover{border-color:var(--accent)}
.pd-qty span{width:50px;height:44px;display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

.pd-actions{display:flex;gap:0.75rem;margin-bottom:1.5rem}
.btn-atc{flex:1;padding:16px 28px;background:var(--accent);color:#fff;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.18em;font-weight:600;transition:all .2s}
.btn-atc:hover{background:var(--accent-hover)}
.btn-buy{padding:16px 28px;border:1.5px solid var(--text);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.18em;font-weight:600;color:var(--text);transition:all .2s}
.btn-buy:hover{background:var(--text);color:var(--bg)}

/* Trust badges under ATC */
.pd-trust{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:2rem;padding:1.2rem 0;border-top:1px solid var(--border-light);border-bottom:1px solid var(--border-light)}
.pd-trust-item{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);color:var(--text-secondary)}
.pd-trust-item svg{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:1.5;flex-shrink:0}

/* Guarantee box */
.pd-guarantee{padding:1.2rem 1.5rem;border:1px solid var(--border);margin-bottom:2rem;background:var(--card-bg)}
.pd-guarantee-title{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.1em;font-weight:600;color:var(--accent);margin-bottom:0.4rem}
.pd-guarantee-text{font-size:var(--fs-sm);color:var(--text-secondary);line-height:1.6}

/* Tabs for product details */
.pd-tabs{border-top:1px solid var(--border-light);margin-top:0.5rem}
.pd-tab-nav{display:flex;gap:0;border-bottom:1px solid var(--border-light)}
.pd-tab-btn{padding:1rem 1.5rem;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.1em;font-weight:500;color:var(--text-muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .2s;cursor:pointer}
.pd-tab-btn.active{color:var(--text);border-bottom-color:var(--accent)}
.pd-tab-btn:hover{color:var(--text)}
.pd-tab-content{display:none;padding:1.5rem 0}
.pd-tab-content.active{display:block}
.pd-tab-content p{font-size:var(--fs-sm);color:var(--text-secondary);line-height:1.8}
.pd-tab-content table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.pd-tab-content th{text-align:left;padding:8px 12px;background:var(--bg-alt);font-weight:500;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.06em;border-bottom:1px solid var(--border-light)}
.pd-tab-content td{padding:8px 12px;border-bottom:1px solid var(--border-light);color:var(--text-secondary)}

/* Product page reviews */
.pd-reviews{padding:3rem 0;border-top:1px solid var(--border-light)}
.pd-reviews-summary{display:flex;align-items:flex-start;gap:3rem;margin-bottom:2.5rem}
.pd-reviews-avg{text-align:center;min-width:120px}
.pd-reviews-avg .big-num{font-family:var(--font-display);font-size:3rem;font-weight:400;line-height:1}
.pd-reviews-avg .big-stars{color:var(--star);font-size:1rem;margin:0.3rem 0}
.pd-reviews-avg .total{font-size:var(--fs-xs);color:var(--text-muted)}
.pd-reviews-bars{flex:1}
.pd-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:4px;font-size:var(--fs-xs);color:var(--text-muted)}
.pd-bar-row span:first-child{min-width:14px;text-align:right}
.pd-bar{flex:1;height:6px;background:var(--border-light);overflow:hidden}
.pd-bar-fill{height:100%;background:var(--star)}
.pd-bar-row span:last-child{min-width:30px;text-align:right}
.pd-review-list{display:flex;flex-direction:column;gap:1.5rem}
.pd-review-item{padding:1.5rem;border:1px solid var(--border-light)}
.pd-review-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem}
.pd-review-author-info{display:flex;align-items:center;gap:10px}
.pd-review-avatar{width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:600}
.pd-review-name{font-size:var(--fs-sm);font-weight:500}
.pd-review-verified{font-size:var(--fs-xs);color:var(--accent)}
.pd-review-date{font-size:var(--fs-xs);color:var(--text-muted)}
.pd-review-body{font-size:var(--fs-sm);color:var(--text-secondary);line-height:1.7}

/* ═══════════════════════════════════════
   CHECKOUT
   ═══════════════════════════════════════ */
.checkout-grid{display:grid;grid-template-columns:1.2fr 0.8fr;min-height:100vh}
.checkout-main{padding:2.5rem 2.5rem 2.5rem 1.5rem;max-width:600px;margin-left:auto}
.checkout-brand{font-family:var(--font-display);font-size:1.3rem;letter-spacing:0.18em;text-transform:uppercase;margin-bottom:2rem;font-weight:700}
.checkout-steps{display:flex;gap:0.8rem;font-size:var(--fs-xs);color:var(--text-muted);margin-bottom:2rem}
.checkout-steps .active-step{color:var(--text);font-weight:600}
.checkout-steps .sep{color:var(--border)}
.checkout-section{margin-bottom:2rem}
.checkout-section h2{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:500;margin-bottom:1rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin-bottom:0.75rem}
.form-row.full{grid-template-columns:1fr}
.form-field label{display:block;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.06em;color:var(--text-secondary);font-weight:500;margin-bottom:3px}
.form-input{width:100%;padding:11px 14px;border:1px solid var(--border);background:var(--bg);color:var(--text);outline:none;transition:border-color .2s}
.form-input:focus{border-color:var(--accent)}
.checkout-sidebar{background:var(--bg-alt);padding:2.5rem;border-left:1px solid var(--border-light)}
.ck-item{display:grid;grid-template-columns:56px 1fr auto;gap:0.75rem;padding:0.75rem 0;border-bottom:1px solid var(--border-light)}
.ck-item-img{aspect-ratio:1;background:var(--sand);position:relative;overflow:hidden}
.ck-item-img img{width:100%;height:100%;object-fit:cover}
.ck-item-qty{position:absolute;top:-5px;right:-5px;width:18px;height:18px;background:var(--text-secondary);color:#fff;font-size:0.55rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700}
.ck-item-name{font-size:var(--fs-sm);font-weight:500}
.ck-item-variant{font-size:var(--fs-xs);color:var(--text-muted)}
.ck-item-price{font-size:var(--fs-sm);font-weight:500}
.ck-totals{padding-top:1rem}
.ck-row{display:flex;justify-content:space-between;padding:4px 0;font-size:var(--fs-sm)}
.ck-row.total{border-top:1px solid var(--border);padding-top:0.75rem;margin-top:0.4rem;font-size:var(--fs-lg);font-weight:600}
.ck-row .cur{font-size:var(--fs-xs);color:var(--text-muted);margin-right:3px}

/* ═══════════════════════════════════════
   ABOUT
   ═══════════════════════════════════════ */
.about-hero{min-height:50vh;display:flex;align-items:center;justify-content:center;background:var(--bg-dark);text-align:center;padding:4rem 1.5rem;position:relative}
.about-hero h1{font-family:var(--font-display);font-size:var(--fs-hero);font-weight:400;color:#F7F3ED;margin-bottom:1rem}
.about-hero p{font-family:var(--font-display);font-size:var(--fs-xl);font-style:italic;color:rgba(247,243,237,0.55);font-weight:400}
.about-body{max-width:640px;margin:0 auto;padding:4rem 1.5rem;text-align:center}
.about-body p{font-family:var(--font-display);font-size:var(--fs-xl);line-height:1.7;color:var(--text-secondary);font-weight:400}
.about-body p+p{margin-top:1.5rem}
.about-values{padding:4rem 0;background:var(--bg-alt)}
.about-values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem;text-align:center}
.about-value h3{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:500;margin-bottom:0.75rem}
.about-value p{font-size:var(--fs-sm);color:var(--text-secondary);line-height:1.7}

/* ═══════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;max-width:880px;margin:0 auto;padding-bottom:4rem}
.contact-block{margin-bottom:1.5rem}
.contact-label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.14em;color:var(--accent);margin-bottom:0.4rem;font-weight:600}
.contact-val{font-family:var(--font-display);font-size:var(--fs-lg)}
.contact-form{display:flex;flex-direction:column;gap:0.75rem}
.contact-submit{padding:15px 36px;background:var(--accent);color:#fff;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.18em;font-weight:600;transition:background .2s;align-self:flex-start}
.contact-submit:hover{background:var(--accent-hover)}

/* ═══════════════════════════════════════
   AUTH
   ═══════════════════════════════════════ */
.auth{min-height:75vh;display:flex;align-items:center;justify-content:center;padding:4rem 1.5rem}
.auth-box{width:380px;max-width:100%}
.auth-title{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:400;text-align:center;margin-bottom:2rem}
.auth-form{display:flex;flex-direction:column;gap:0.75rem}
.auth-submit{padding:15px;background:var(--accent);color:#fff;margin-top:0.3rem;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:0.18em;font-weight:600;transition:background .2s}
.auth-submit:hover{background:var(--accent-hover)}
.auth-alt{text-align:center;margin-top:1.2rem;font-size:var(--fs-sm);color:var(--text-secondary)}
.auth-alt a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* ═══════════════════════════════════════
   MOBILE NAV
   ═══════════════════════════════════════ */
.mobile-nav{position:fixed;inset:0;background:var(--bg);z-index:2000;transform:translateX(-100%);transition:transform .4s cubic-bezier(.16,1,.3,1);padding:1.5rem;overflow-y:auto}
.mobile-nav.open{transform:translateX(0)}
.mobile-nav-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}
.mobile-nav-links a{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:400;padding:0.75rem 0;border-bottom:1px solid var(--border-light);display:flex;justify-content:space-between;align-items:center}
.mobile-nav-links .icon{width:14px;height:14px;color:var(--text-muted)}

/* ═══════════════════════════════════════
   MOCKUP NAV BAR
   ═══════════════════════════════════════ */
/* Back to top button */
.back-to-top{
  position:fixed;bottom:2rem;right:2rem;z-index:1500;
  width:46px;height:46px;border-radius:50%;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(184,134,11,0.3);
  opacity:0;visibility:hidden;
  transition:opacity .3s,visibility .3s,transform .3s,background .3s;
  transform:translateY(10px);
  cursor:pointer;
}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{background:var(--accent-hover);transform:translateY(-2px)}
.back-to-top svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media(max-width:1024px){
  .products-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .pd-grid{grid-template-columns:1fr}
  .pd-gallery{grid-template-columns:1fr;position:static}
  .pd-thumbs{flex-direction:row;order:2}
  .pd-thumb{width:55px}
  .checkout-grid{grid-template-columns:1fr}
  .checkout-sidebar{border-left:none;border-top:1px solid var(--border-light)}
  .reviews-grid{grid-template-columns:1fr 1fr}
  .pd-reviews-summary{flex-direction:column;gap:1.5rem}
}
@media(max-width:768px){
  :root{--fs-hero:2.2rem;--fs-3xl:1.8rem;--fs-2xl:1.5rem;--header-h:50px}
  /* Grid header for mobile: hamburger | AFUS | icons */
  .nav-left{display:none}
  .mobile-toggle{display:flex}
  .header-row{grid-template-columns:auto 1fr auto}
  .brand{font-size:1.4rem}
  .hero{grid-template-columns:1fr}
  .hero-image{min-height:50vh;order:-1}
  .products-grid{grid-template-columns:repeat(2,1fr);gap:0.6rem}
  .collections-grid{grid-template-columns:1fr}
  .collection-card:nth-child(2){margin-top:0}
  .editorial{grid-template-columns:1fr}
  .editorial-img{min-height:280px}
  .editorial.reverse .editorial-img{order:0}
  .editorial.reverse .editorial-copy{order:0}
  .about-values-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .newsletter-form{flex-direction:column}
  .product-quickview{transform:translateY(0)}
  .trust-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem}
  .reviews-grid{grid-template-columns:1fr}
  .social-grid{grid-template-columns:repeat(3,1fr)}
  .pd-tab-nav{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pd-tab-btn{white-space:nowrap;padding:0.8rem 1rem}
  .back-to-top{bottom:1.2rem;right:1.2rem;width:40px;height:40px}
  .back-to-top svg{width:18px;height:18px}
  .marquee{padding:10px 0}
}