:root{
  /* Colors — client palette: warm earth-tone (Espresso / Terracotta / Mocha / Greige / Linen)
     plus a single vivid Rust-Orange (#95501c) as the primary action color, per DESIGN.md's
     "one vivid accent, everything else muted" rule. Secondary text/button roles use
     accessibility-adjusted shades derived from the client's exact swatches (raw
     photo-sampled tones fail WCAG contrast for text); the exact swatches (#b69788,
     #a8917f) are used as-given for decorative blobs/gradients below — kept distinct
     from the primary action color per the doc's "decorative ≠ functional" rule. */
  --color-ink-navy:#42362e;
  --color-signal-blue:#95501c;
  --color-slate-gray:#756457;
  --color-mist-gray:#b9a99b;
  --color-cloud:#f7f9f6;
  --color-paper:#ffffff;
  --color-pebble:#efece7;
  --color-hairline:#d2ccc4;
  --color-carbon:#2a221d;
  --color-coral-magenta:#b69788;
  --color-sky-cyan:#a8917f;
  --color-deep-cobalt:#95501c;

  --font-body:'Manrope', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-caption:12px;
  --text-body-sm:14px;
  --text-body:16px;
  --text-button:18px;
  --text-body-lg:20px;
  --text-subheading:28px;
  --text-heading-sm:38px;
  --text-heading:50px;
  --text-heading-lg:68px;
  --text-display:80px;

  --radius-cards:24px;
  --radius-small:4px;
  --radius-badges:9999px;
  --radius-inputs:8px;
  --radius-buttons:8px;
  --radius-productcards:16px;

  --shadow-sm: rgba(66,54,46,0.04) 0px 4px 5px 0px, rgba(66,54,46,0.03) 0px 4px 10px 0px, rgba(66,54,46,0.05) 0px 10px 20px 0px;
  --shadow-sm-2: rgba(66,54,46,0.04) 0px 4px 5px 0px, rgba(66,54,46,0.03) 0px 8px 15px 0px, rgba(66,54,46,0.08) 0px 30px 50px 0px;
  --shadow-sm-3: rgba(66,54,46,0.04) 0px 4px 5px 0px, rgba(66,54,46,0.03) 0px 8px 15px 0px, rgba(66,54,46,0.06) 0px 15px 30px 0px;

  --page-max-width:1200px;
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  margin:0;
  overflow-x:hidden;
  font-family:var(--font-body);
  color:var(--color-ink-navy);
  background:var(--color-cloud);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}
.wrap{max-width:var(--page-max-width);margin:0 auto;padding:0 32px;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.22,.68,0,1.01), transform .7s cubic-bezier(.22,.68,0,1.01);will-change:opacity,transform;}
.reveal.in-view{opacity:1;transform:none;}
.reveal-left{transform:translateX(-32px);}
.reveal-left.in-view{transform:none;}
.reveal-right{transform:translateX(32px);}
.reveal-right.in-view{transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-left, .reveal-right{opacity:1;transform:none;transition:none;}
}
@media print{
  .reveal, .reveal-left, .reveal-right{opacity:1 !important;transform:none !important;transition:none !important;}
}
.category-grid .reveal:nth-child(1){transition-delay:0ms;}
.category-grid .reveal:nth-child(2){transition-delay:60ms;}
.category-grid .reveal:nth-child(3){transition-delay:120ms;}
.category-grid .reveal:nth-child(4){transition-delay:180ms;}
.category-grid .reveal:nth-child(5){transition-delay:240ms;}
.category-grid .reveal:nth-child(6){transition-delay:300ms;}
.product-grid .reveal:nth-child(1){transition-delay:0ms;}
.product-grid .reveal:nth-child(2){transition-delay:80ms;}
.product-grid .reveal:nth-child(3){transition-delay:160ms;}
.product-grid .reveal:nth-child(4){transition-delay:240ms;}
.testimonial-grid .reveal:nth-child(1),.journal-grid .reveal:nth-child(1),.review-grid .reveal:nth-child(1){transition-delay:0ms;}
.testimonial-grid .reveal:nth-child(2),.journal-grid .reveal:nth-child(2),.review-grid .reveal:nth-child(2){transition-delay:100ms;}
.testimonial-grid .reveal:nth-child(3),.journal-grid .reveal:nth-child(3),.review-grid .reveal:nth-child(3){transition-delay:200ms;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:var(--text-button);line-height:1.4;
  border-radius:var(--radius-buttons);border:none;padding:10px 20px;
  white-space:nowrap;transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn svg{width:18px;height:18px;flex:none;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--color-signal-blue);color:var(--color-paper);box-shadow:var(--shadow-sm-3);}
.btn-primary:hover{background:#7f4418;}
.btn-dark{background:var(--color-signal-blue);color:var(--color-paper);}
.btn-dark:hover{background:#7f4418;}
.btn-outline{background:transparent;color:var(--color-paper);border:1px solid var(--color-paper);}
.btn-outline:hover{background:rgba(255,255,255,0.12);}
.btn-outline-navy{background:transparent;color:var(--color-ink-navy);border:1px solid var(--color-hairline);}
.btn-outline-navy:hover{background:var(--color-pebble);}
.btn-ghost{background:transparent;color:var(--color-ink-navy);padding:8px 4px;font-weight:600;}
.btn-ghost:hover{color:var(--color-signal-blue);}
.btn-sm{font-size:var(--text-body-sm);padding:8px 16px;}
.btn-block{width:100%;}
.btn[disabled]{background:var(--color-pebble);color:var(--color-mist-gray);box-shadow:none;cursor:not-allowed;}

/* ---------- Badges & chips ---------- */
.pill-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--color-pebble);color:var(--color-deep-cobalt);
  font-size:var(--text-caption);font-weight:600;letter-spacing:.02em;text-transform:uppercase;
  border-radius:var(--radius-badges);padding:6px 14px;
}
.pill-badge.on-dark{background:rgba(255,255,255,0.12);color:var(--color-paper);}
.pill-badge.rose{background:#f3e7e2;color:var(--color-deep-cobalt);}

/* ---------- Icon buttons ---------- */
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--radius-buttons);
  background:transparent;border:none;color:var(--color-ink-navy);position:relative;
}
.icon-btn:hover{background:var(--color-pebble);}
.icon-btn svg{width:20px;height:20px;}
.badge-count{
  position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 3px;
  background:var(--color-signal-blue);color:#fff;font-size:10px;font-weight:700;
  border-radius:9999px;display:flex;align-items:center;justify-content:center;line-height:1;
}

/* ---------- Announcement bar ---------- */
.announce{background:var(--color-ink-navy);color:var(--color-paper);text-align:center;
  font-size:var(--text-caption);font-weight:600;letter-spacing:.03em;padding:9px 16px;}
.announce span{opacity:.75;font-weight:500;margin:0 10px;}

/* ---------- Header ---------- */
header.site-header{
  position:sticky;top:0;z-index:50;background:rgba(247,249,246,0.92);
  backdrop-filter:blur(10px);border-bottom:1px solid transparent;
  transition:box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
header.site-header.scrolled{background:rgba(255,255,255,0.96);border-color:var(--color-hairline);box-shadow:var(--shadow-sm);}
.header-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:75px;gap:24px;}
.logo{display:flex;align-items:center;flex:none;justify-self:start;}
.logo-img{height:75px;width:170px;display:block;object-fit:contain;}

.header-actions{display:flex;align-items:center;gap:4px;flex:none;justify-self:end;}
.header-actions .btn{margin-left:10px;}
.search-box{
  display:flex;align-items:center;gap:8px;background:var(--color-pebble);
  border:1px solid transparent;border-radius:var(--radius-buttons);padding:8px 14px;
  width:480px;max-width:100%;justify-self:center;
  transition:border-color .15s ease;
}
.search-box:focus-within{border-color:var(--color-signal-blue);background:var(--color-paper);}
.search-box svg{width:16px;height:16px;color:var(--color-slate-gray);flex:none;}
.search-box input{border:none;background:transparent;outline:none;font-family:inherit;font-size:14px;color:var(--color-ink-navy);width:100%;}
.search-box input::placeholder{color:var(--color-mist-gray);}

.hamburger{display:none;}

/* ---------- Category bar — second header row, gets the full page
   width to itself so it never has to compete with logo/search/icons ---------- */
.category-bar{
  background:var(--color-pebble);border-top:1px solid var(--color-hairline);
  border-bottom:1px solid var(--color-hairline);position:relative;
}
nav.main-nav{width:100%;}
nav.main-nav > ul{
  display:flex;align-items:center;justify-content:safe center;gap:4px;height:52px;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin;scrollbar-color:var(--color-hairline) transparent;
}
nav.main-nav > ul::-webkit-scrollbar{height:4px;}
nav.main-nav > ul::-webkit-scrollbar-track{background:transparent;}
nav.main-nav > ul::-webkit-scrollbar-thumb{background:var(--color-hairline);border-radius:9999px;}
nav.main-nav > ul::-webkit-scrollbar-thumb:hover{background:var(--color-mist-gray);}

.nav-link{
  display:flex;align-items:center;gap:5px;padding:8px 14px;border-radius:var(--radius-buttons);
  font-weight:600;font-size:14px;color:var(--color-ink-navy);white-space:nowrap;
}
.nav-link:hover{background:var(--color-paper);color:var(--color-signal-blue);}
.nav-link svg{width:14px;height:14px;transition:transform .15s ease;}
.has-mega:hover .nav-link svg{transform:rotate(180deg);}

/* Mega-menu panels render as direct children of .category-bar (siblings
   of .wrap, outside the scrollable <ul>) and are positioned/opened by JS
   — nesting them inside the scrolling list would let its overflow clip
   them, since a container can't scroll on one axis while letting
   absolutely-positioned children escape clipping on the other. */
.mega-menu{
  position:absolute;top:100%;left:0;margin-top:8px;
  width:520px;background:var(--color-paper);border:1px solid var(--color-hairline);
  border-radius:var(--radius-cards);box-shadow:var(--shadow-sm-2);padding:20px;
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(4px);
  transition:opacity .15s ease, transform .15s ease;
}
/* Few enough subcategories to fit one column — a fixed 2-column width
   would just leave the panel mostly empty, so it gets a narrower width
   and a single column instead. */
.mega-menu.single-col{width:240px;grid-template-columns:1fr;}
.mega-menu.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);}
.mega-menu a{display:block;padding:9px 12px;border-radius:var(--radius-small);font-size:14px;font-weight:500;color:var(--color-slate-gray);}
.mega-menu a:hover{background:var(--color-pebble);color:var(--color-ink-navy);}
.mega-menu .mega-col-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--color-mist-gray);padding:9px 12px 4px;}

/* ---------- Hero ---------- */
.hero{padding:72px 0 56px;position:relative;overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.hero-copy{animation:heroIn .8s cubic-bezier(.22,.68,0,1.01) backwards;}
.hero-visual{animation:heroIn 1s cubic-bezier(.22,.68,0,1.01) .15s backwards;}
@keyframes heroIn{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){
  .hero-copy, .hero-visual{animation:none;}
}
.hero-copy h1{font-size:var(--text-heading-lg);line-height:1.15;font-weight:700;margin:20px 0 20px;letter-spacing:-0.02em;}
.hero-copy p{font-size:var(--text-body-lg);line-height:1.5;color:var(--color-slate-gray);max-width:480px;margin:0 0 32px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:36px;}
.hero-actions .btn-outline-navy{color:var(--color-ink-navy);}
.trust-row{display:flex;gap:28px;flex-wrap:wrap;}
.trust-row li{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--color-slate-gray);}
.trust-row svg{width:18px;height:18px;color:var(--color-signal-blue);flex:none;}

.hero-visual{position:relative;height:460px;}
.blob{position:absolute;border-radius:50%;filter:blur(6px);opacity:.55;z-index:0;animation:blobFloat 9s ease-in-out infinite;}
.blob-magenta{width:280px;height:280px;background:var(--color-coral-magenta);top:-30px;right:20px;}
.blob-cyan{width:220px;height:220px;background:var(--color-sky-cyan);bottom:-20px;left:0;animation-delay:-4.5s;}
@keyframes blobFloat{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-10px,16px) scale(1.05);}
}
@media (prefers-reduced-motion: reduce){
  .blob{animation:none;}
  .logo-row{animation:none;}
}
.product-showcase{
  position:relative;z-index:1;background:var(--color-paper);border-radius:var(--radius-productcards);
  box-shadow:var(--shadow-sm-2);padding:0;overflow:hidden;height:100%;
}
.product-showcase .ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.showcase-track{display:flex;width:100%;height:100%;transition:transform .9s cubic-bezier(.22,.68,0,1.01);}
.showcase-slide{position:relative;flex:0 0 100%;width:100%;height:100%;}
@media (prefers-reduced-motion: reduce){
  .showcase-track{transition:none;}
}
.showcase-pagination{position:absolute;left:0;right:0;bottom:16px;z-index:2;text-align:center;}
.showcase-dot{
  width:13px;height:10px;display:inline-block;background:var(--color-paper);
  opacity:.75;margin:0 5px;border-radius:20px;border:none;padding:0;cursor:pointer;
  box-shadow:0 0 0 1px rgba(71,103,136,.35), var(--shadow-sm);
  transition:opacity .5s ease, background-color .5s ease, width .5s ease, box-shadow .3s ease;
  transition-delay:.5s, .5s, 0s, 0s;
}
.showcase-dot.active{opacity:1;width:48px;box-shadow:0 0 0 1px rgba(71,103,136,.15), var(--shadow-sm-2);transition-delay:0s;}
@media (max-width:576px){
  .showcase-dot.active{width:32px;}
}
.swatch{width:100%;height:100%;position:relative;}
.price-float{
  position:absolute;bottom:20px;left:20px;background:var(--color-paper);border-radius:var(--radius-cards);
  box-shadow:var(--shadow-sm-2);padding:14px 18px;display:flex;align-items:center;gap:12px;z-index:2;
}
.price-float .dot{
  width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--color-signal-blue),var(--color-sky-cyan));
  flex:none;display:flex;align-items:center;justify-content:center;
}
.price-float .dot svg{width:18px;height:18px;color:#fff;}
.price-float .label{font-size:12px;color:var(--color-slate-gray);font-weight:600;}
.price-float .amount{font-size:18px;font-weight:800;color:var(--color-ink-navy);}
.float-badge{
  position:absolute;top:18px;right:18px;background:var(--color-paper);border-radius:var(--radius-badges);
  box-shadow:var(--shadow-sm);padding:8px 14px;font-size:12px;font-weight:700;color:var(--color-deep-cobalt);
  display:flex;align-items:center;gap:6px;z-index:2;
}
.float-badge svg{width:14px;height:14px;color:var(--color-signal-blue);}

/* fabric swatch patterns (placeholder imagery) */
.swatch-a{background:
    repeating-linear-gradient(45deg, rgba(66,54,46,0.10) 0 2px, transparent 2px 14px),
    linear-gradient(135deg,#f3ede6, #e6dcd1);}
.swatch-b{background:
    repeating-linear-gradient(90deg, rgba(182,151,136,0.16) 0 3px, transparent 3px 16px),
    linear-gradient(160deg,#f3ece4, #e3d3c4);}
.swatch-c{background:
    repeating-linear-gradient(0deg, rgba(168,145,127,0.16) 0 2px, transparent 2px 12px),
    linear-gradient(160deg,#f0e9e2, #ddd0c2);}
.swatch-d{background:
    repeating-linear-gradient(135deg, rgba(66,54,46,0.12) 0 2px, transparent 2px 12px),
    linear-gradient(160deg,#f5f1ec, #e8ddd2);}
.swatch-e{background:
    repeating-linear-gradient(45deg, rgba(66,54,46,0.10) 0 2px, transparent 2px 16px),
    linear-gradient(160deg,#f1ece6, #e0d5c8);}
.swatch-f{background:
    repeating-linear-gradient(90deg, rgba(66,54,46,0.08) 0 3px, transparent 3px 18px),
    linear-gradient(150deg,#f4f0ea, #e6dbcf);}

/* ---------- Trust strip ---------- */
.trust-strip{padding:36px 0;border-top:1px solid var(--color-hairline);border-bottom:1px solid var(--color-hairline);overflow:hidden;}
.trust-strip p{text-align:center;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-mist-gray);margin:0 0 22px;}
.logo-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.logo-row{display:flex;align-items:center;gap:64px;width:max-content;animation:marquee 26s linear infinite;}
.logo-marquee:hover .logo-row{animation-play-state:paused;}
.logo-row span{font-weight:800;font-size:19px;color:var(--color-mist-gray);letter-spacing:-0.01em;white-space:nowrap;transition:color .2s ease;}
.logo-row span:hover{color:var(--color-slate-gray);}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- About page ---------- */
.stat-grid-lg{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:56px 0;}
.stat-grid-lg .stat-card-lg{text-align:center;}
.stat-grid-lg .stat-value{font-size:20px;}
.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:left;}
.value-grid .dot{width:44px;height:44px;border-radius:50%;background:#f3e7e2;display:flex;align-items:center;justify-content:center;}
.value-grid .dot svg{width:20px;height:20px;color:var(--color-deep-cobalt);}
.cta-banner-brand{
  border-radius:var(--radius-cards);padding:48px 40px;text-align:center;color:#fff;
  background:linear-gradient(120deg, var(--color-signal-blue), var(--color-deep-cobalt));
}
.cta-banner-brand h2{margin:0 0 10px;color:#fff;}
.cta-banner-brand p{margin:0 0 24px;opacity:.9;}
@media (max-width:900px){
  .stat-grid-lg,.value-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .stat-grid-lg,.value-grid{grid-template-columns:1fr;}
}

/* ---------- Floating WhatsApp button (site-wide) ---------- */
.whatsapp-float{
  position:fixed;right:24px;bottom:24px;z-index:90;
  width:56px;height:56px;border-radius:50%;background:var(--color-signal-blue);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:var(--shadow-sm-2);
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.whatsapp-float:hover{transform:scale(1.06);background:var(--color-deep-cobalt);}
.whatsapp-float svg{width:28px;height:28px;}
@media (max-width:600px){
  .whatsapp-float{right:16px;bottom:16px;width:50px;height:50px;}
  .whatsapp-float svg{width:25px;height:25px;}
}

/* ---------- Contact page ---------- */
.contact-quick-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:40px 0 56px;}
.faq-list{display:flex;flex-direction:column;gap:12px;}
.faq-item{background:var(--color-paper);border:1px solid var(--color-hairline);border-radius:var(--radius-productcards);overflow:hidden;}
.faq-item summary{
  padding:18px 22px;font-size:14px;font-weight:600;color:var(--color-ink-navy);cursor:pointer;
  list-style:none;display:flex;align-items:center;justify-content:space-between;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:'';width:9px;height:9px;border-right:2px solid var(--color-slate-gray);border-bottom:2px solid var(--color-slate-gray);
  transform:rotate(45deg);transition:transform .2s ease;flex:none;margin-left:12px;
}
.faq-item[open] summary::after{transform:rotate(-135deg);}
.faq-item p{margin:0;padding:0 22px 18px;font-size:13.5px;color:var(--color-slate-gray);line-height:1.65;}
@media (max-width:700px){
  .contact-quick-row{grid-template-columns:1fr;}
}

/* ---------- Article pages (legal pages + blog posts share .article-wrap) ---------- */
.article-wrap > .cat{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--color-signal-blue);margin-bottom:10px;display:block;}
.article-wrap h1{font-size:var(--text-heading-sm);font-weight:700;margin:0 0 10px;letter-spacing:-0.02em;line-height:1.2;}
.article-date{font-size:13px;color:var(--color-mist-gray);margin:0 0 28px;display:block;}
.article-hero{position:relative;height:360px;border-radius:var(--radius-cards);overflow:hidden;margin-bottom:28px;box-shadow:var(--shadow-sm);}
.article-hero .swatch{position:absolute;inset:0;}
.article-hero .ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.article-excerpt{font-size:18px;line-height:1.6;color:var(--color-ink-navy);font-weight:600;margin:0 0 8px;}
.article-wrap .article-body{max-width:760px;}
.article-wrap .article-body h2{font-size:22px;font-weight:700;color:var(--color-ink-navy);margin:36px 0 12px;letter-spacing:-0.01em;}
.article-wrap .article-body h2:first-child{margin-top:0;}
.article-wrap .article-body p{font-size:15px;line-height:1.7;color:var(--color-slate-gray);margin:0 0 16px;}
.article-wrap .article-body ul{margin:0 0 16px;padding-left:22px;}
.article-wrap .article-body li{font-size:15px;line-height:1.7;color:var(--color-slate-gray);margin-bottom:8px;}
.article-wrap .article-body strong{color:var(--color-ink-navy);}
.article-wrap .article-body a{color:var(--color-signal-blue);text-decoration:underline;}
@media (max-width:640px){
  .article-hero{height:220px;}
}

/* ---------- Section header ---------- */
.section{padding:88px 0;}
.section-tight{padding:64px 0;}
.section-header{text-align:center;max-width:640px;margin:0 auto 56px;}
.section-header .pill-badge{margin-bottom:18px;}
.section-header h1,.section-header h2{font-size:var(--text-heading);font-weight:700;margin:0 0 16px;letter-spacing:-0.02em;}
.section-header p{font-size:var(--text-body);color:var(--color-slate-gray);line-height:1.6;margin:0;}
.section-header-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px;gap:24px;}
.section-header-row h2{font-size:var(--text-heading-sm);font-weight:700;margin:0 0 8px;letter-spacing:-0.02em;}
.section-header-row p{color:var(--color-slate-gray);margin:0;}

/* ---------- Category grid ---------- */
.category-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;}
.category-card{
  border-radius:var(--radius-productcards);overflow:hidden;position:relative;height:190px;
  box-shadow:var(--shadow-sm);transition:transform .35s cubic-bezier(.22,.68,0,1.01), box-shadow .35s ease;
}
.category-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-sm-2);}
.category-card .swatch{position:absolute;inset:0;transition:transform .5s ease;}
.category-card:hover .swatch{transform:scale(1.08);}
.category-card .ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s ease;}
.category-card:hover .ph-img{transform:scale(1.08);}
.category-card .overlay{
  position:absolute;inset:0;background:linear-gradient(180deg, rgba(66,54,46,0) 40%, rgba(66,54,46,0.72) 100%);
  display:flex;align-items:flex-end;padding:16px;
}
.category-card .overlay span{color:#fff;font-weight:700;font-size:15px;}

/* ---------- Product grid ---------- */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.product-card{
  background:var(--color-paper);border-radius:var(--radius-productcards);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .35s cubic-bezier(.22,.68,0,1.01), box-shadow .35s ease;
  display:flex;flex-direction:column;
}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-sm-2);}
.product-media{position:relative;height:230px;overflow:hidden;flex:none;}
.product-media .swatch{position:absolute;inset:0;transition:transform .5s ease;}
.product-card:hover .product-media .swatch{transform:scale(1.08);}
.product-media .ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s ease;}
.product-card:hover .product-media .ph-img{transform:scale(1.08);}
.product-media-link{position:absolute;inset:0;z-index:1;}
.product-tags{position:absolute;top:12px;left:12px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:6px;}
.product-tag{background:var(--color-signal-blue);color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:5px 10px;border-radius:var(--radius-badges);}
.product-tag.sale{background:var(--color-coral-magenta);}
.product-info{padding:18px;display:flex;flex-direction:column;flex:1;}
.product-stars{display:flex;align-items:center;gap:4px;margin-bottom:8px;}
.product-stars svg{width:13px;height:13px;color:var(--color-signal-blue);}
.product-stars svg.star-empty{color:var(--color-hairline);}
.product-stars span{font-size:12px;color:var(--color-mist-gray);font-weight:600;margin-left:4px;}
.product-info h3{
  font-size:15px;font-weight:600;margin:0 0 8px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(1.4em * 2);
}
.price-row{display:flex;align-items:center;gap:8px;margin-bottom:14px;}
.price-now{font-size:17px;font-weight:800;color:var(--color-ink-navy);}
.price-was{font-size:13px;color:var(--color-mist-gray);text-decoration:line-through;}

/* ---------- Product actions (Add to Cart / Buy Now) ---------- */
.product-actions{display:flex;gap:8px;margin-top:auto;}
.product-actions .btn{flex:1;padding:10px 12px;font-size:14px;gap:6px;}

.btn-cart{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--color-signal-blue);color:var(--color-paper);
  box-shadow:var(--shadow-sm-3);
  transition:transform .25s cubic-bezier(.22,.68,0,1.01), box-shadow .25s ease, background-color .35s ease;
}
.btn-cart::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .6s ease;
}
.btn-cart:hover::before{transform:translateX(120%);}
.btn-cart:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 20px rgba(149,80,28,.4), var(--shadow-sm-3);}
.btn-cart:active{transform:translateY(0) scale(.96);}
.btn-cart > *{position:relative;z-index:1;}

.btn-cart-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:none;}
.btn-cart-icon svg{position:absolute;inset:0;width:16px;height:16px;transition:transform .3s ease, opacity .3s ease;}
.btn-cart-icon .icon-check-svg{opacity:0;transform:scale(.4) rotate(-45deg);}
.btn-cart.is-added .btn-cart-icon .icon-cart-svg{opacity:0;transform:scale(.4) rotate(45deg);}
.btn-cart.is-added .btn-cart-icon .icon-check-svg{opacity:1;transform:scale(1) rotate(0);}
.btn-cart.is-adding .btn-cart-icon{animation:btnCartIconPulse .5s ease-in-out;}
@keyframes btnCartIconPulse{
  0%{transform:scale(1) rotate(0);}
  50%{transform:scale(1.35) rotate(20deg);}
  100%{transform:scale(1) rotate(0);}
}

.btn-progress{position:absolute;left:0;bottom:0;height:3px;width:0;background:rgba(255,255,255,.85);z-index:1;}
.btn-cart.is-adding{pointer-events:none;}
.btn-cart.is-adding .btn-progress{animation:btnCartProgress .9s ease-in-out forwards;}
@keyframes btnCartProgress{from{width:0;}to{width:100%;}}
.btn-cart.is-added{background:var(--color-ink-navy);}

.btn-buy{
  position:relative;overflow:hidden;
  background:var(--color-paper);color:var(--color-ink-navy);border:1px solid var(--color-hairline);
  transition:transform .25s cubic-bezier(.22,.68,0,1.01), box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn-buy::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg, transparent 30%, rgba(66,54,46,.08) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .6s ease;
}
.btn-buy:hover::before{transform:translateX(120%);}
.btn-buy:hover{background:var(--color-ink-navy);color:var(--color-paper);border-color:var(--color-ink-navy);transform:translateY(-2px) scale(1.02);box-shadow:var(--shadow-sm-2);}
.btn-buy:active{transform:translateY(0) scale(.96);}
.btn-buy > *{position:relative;z-index:1;}

.badge-count.bump{animation:badgeBump .4s ease;}
@keyframes badgeBump{0%{transform:scale(1);}50%{transform:scale(1.45);}100%{transform:scale(1);}}

@media (prefers-reduced-motion: reduce){
  .btn-cart, .btn-buy, .btn-cart-icon, .btn-cart-icon svg{transition:none;}
  .btn-cart:hover, .btn-buy:hover, .btn-cart:active, .btn-buy:active{transform:none;}
  .btn-cart::before, .btn-buy::before{display:none;}
  .btn-cart.is-adding .btn-cart-icon, .badge-count.bump{animation:none;}
  .btn-cart.is-adding .btn-progress{animation:none;width:100%;}
}

/* ---------- Feature/collection split ---------- */
.feature-split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;}
.feature-split>*{min-width:0;}
.feature-split.reverse .feature-visual{order:2;}
.feature-split.reverse .feature-copy{order:1;}
.feature-copy .pill-badge{margin-bottom:18px;}
.feature-copy h2{font-size:var(--text-heading-sm);font-weight:700;margin:0 0 18px;letter-spacing:-0.02em;line-height:1.2;}
.feature-copy p{font-size:var(--text-body-lg);color:var(--color-slate-gray);line-height:1.6;margin:0 0 28px;}
.feature-list{margin-bottom:32px;display:flex;flex-direction:column;gap:14px;}
.feature-list li{display:flex;align-items:flex-start;gap:12px;font-size:15px;font-weight:600;color:var(--color-ink-navy);}
.feature-list li svg{width:20px;height:20px;color:var(--color-signal-blue);flex:none;margin-top:1px;}
.feature-visual{position:relative;height:420px;}

/* ---------- Sale banner ---------- */
.sale-banner{
  background:var(--color-ink-navy);border-radius:var(--radius-cards);
  padding:64px 56px;text-align:center;position:relative;overflow:hidden;
}
.sale-banner .blob{opacity:.22;}
.sale-banner .blob-magenta{top:-60px;left:-40px;}
.sale-banner .blob-cyan{bottom:-60px;right:-20px;}
.sale-banner-inner{position:relative;z-index:1;max-width:560px;margin:0 auto;}
.sale-banner p.eyebrow{color:var(--color-mist-gray);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:12px;margin:0 0 16px;}
.sale-banner h2{color:#fff;font-size:var(--text-heading-sm);font-weight:700;margin:0 0 16px;letter-spacing:-0.02em;}
.sale-banner p.sub{color:var(--color-mist-gray);font-size:var(--text-body-lg);margin:0 0 32px;}

/* ---------- Testimonials ---------- */
.testimonial-section{background:var(--color-pebble);}
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.testimonial-card{background:var(--color-paper);border-radius:var(--radius-cards);padding:28px;box-shadow:var(--shadow-sm);}
.testimonial-card .product-stars{margin-bottom:16px;}
.testimonial-card p.quote{font-size:15px;line-height:1.7;color:var(--color-ink-navy);margin:0 0 20px;}
.testimonial-person{display:flex;align-items:center;gap:12px;}
.avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--color-signal-blue),var(--color-coral-magenta));flex:none;}
.testimonial-person strong{display:block;font-size:14px;font-weight:700;}
.testimonial-person span{font-size:13px;color:var(--color-slate-gray);}

/* ---------- Product reviews (product detail page) ---------- */
.reviews-summary{background:var(--color-paper);border:1px solid var(--color-hairline);border-radius:var(--radius-cards);box-shadow:var(--shadow-sm);padding:32px;margin-bottom:28px;display:grid;grid-template-columns:200px 1px 1fr;gap:32px;align-items:center;}
.summary-score{text-align:center;}
.summary-score .num{font-size:48px;font-weight:700;line-height:1;color:var(--color-ink-navy);}
.summary-stars{display:flex;gap:3px;justify-content:center;margin:10px 0 8px;}
.summary-stars svg{width:16px;height:16px;}
.summary-score .count{font-size:13px;color:var(--color-slate-gray);}
.summary-divider{width:1px;height:100%;background:var(--color-hairline);}
.rating-bars{display:flex;flex-direction:column;gap:10px;}
.bar-row{display:grid;grid-template-columns:56px 1fr 32px;align-items:center;gap:12px;font-size:13px;color:var(--color-slate-gray);}
.bar-row .label{display:flex;align-items:center;gap:5px;font-weight:600;color:var(--color-ink-navy);}
.bar-row .label svg{width:12px;height:12px;}
.bar-track{height:8px;border-radius:99px;background:var(--color-pebble);overflow:hidden;}
.bar-fill{height:100%;border-radius:99px;background:var(--color-signal-blue);}
.bar-row .pct{text-align:right;}

.reviews-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:14px;}
.filter-pills{display:flex;gap:8px;flex-wrap:wrap;}
.filter-pill{border:1.5px solid var(--color-hairline);background:var(--color-paper);border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600;color:var(--color-slate-gray);cursor:pointer;}
.filter-pill.active{border-color:var(--color-signal-blue);color:var(--color-deep-cobalt);background:#f3e7e2;}
.sort-select{border:1.5px solid var(--color-hairline);background:var(--color-paper);border-radius:9px;padding:9px 14px;font-size:13px;font-weight:600;color:var(--color-ink-navy);font-family:inherit;}
.reviews-empty{display:none;text-align:center;color:var(--color-slate-gray);font-size:14px;padding:32px 0;}

.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start;}
.review-card{background:var(--color-paper);border:1px solid var(--color-hairline);border-radius:var(--radius-cards);padding:20px;box-shadow:var(--shadow-sm);height:210px;display:flex;flex-direction:column;}
.review-card.expanded{height:auto;}
.review-top{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex:0 0 auto;}
.review-avatar{width:34px;height:34px;border-radius:50%;flex:none;background:var(--color-signal-blue);color:var(--color-paper);font-weight:700;font-size:13px;display:grid;place-items:center;}
.review-avatar.avatar-1{background:var(--color-slate-gray);}
.review-avatar.avatar-2{background:#316b3a;}
.review-avatar.avatar-3{background:#8a5a10;}
.review-avatar.avatar-4{background:#6b4a7a;}
.reviewer-name{font-size:13.5px;font-weight:600;color:var(--color-ink-navy);}
.reviewer-date{font-size:11px;color:var(--color-mist-gray);margin-top:2px;}
.review-card .product-stars{margin-bottom:8px;flex:0 0 auto;}
.review-card p.quote{font-size:14px;line-height:1.5;color:var(--color-ink-navy);margin:0 0 4px;flex:0 0 auto;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.review-card p.quote.expanded{display:block;-webkit-line-clamp:unset;overflow:visible;}
.review-readmore{display:none;background:none;border:none;padding:0;margin:0;color:var(--color-signal-blue);font-size:12.5px;font-weight:700;cursor:pointer;flex:0 0 auto;text-align:left;}
.review-readmore.visible{display:inline-block;}
.load-more-wrap{display:flex;justify-content:center;margin-top:8px;}

@media (max-width: 900px){
  .reviews-summary{grid-template-columns:1fr;}
  .summary-divider{width:100%;height:1px;}
}

/* ---------- Journal ---------- */
.journal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.journal-card .journal-media{height:180px;border-radius:var(--radius-productcards);overflow:hidden;margin-bottom:18px;position:relative;background:var(--color-pebble);}
.journal-card .journal-media-placeholder{background:linear-gradient(120deg,var(--color-signal-blue),#7f4418);}
.journal-card .journal-media .swatch{position:absolute;inset:0;transition:transform .5s ease;}
.journal-card:hover .journal-media .swatch{transform:scale(1.08);}
.journal-card .journal-media .ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s ease;}
.journal-card:hover .journal-media .ph-img{transform:scale(1.08);}
.journal-card h3{transition:color .2s ease;}
.journal-card:hover h3{color:var(--color-signal-blue);}
.journal-card .cat{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--color-signal-blue);margin-bottom:8px;display:block;}
.journal-card h3{font-size:18px;font-weight:600;margin:0 0 10px;line-height:1.4;}
.journal-card .date{font-size:13px;color:var(--color-mist-gray);}

/* ---------- Newsletter ---------- */
.newsletter{background:var(--color-paper);border:1px solid var(--color-hairline);border-radius:var(--radius-cards);padding:56px;text-align:center;box-shadow:var(--shadow-sm);}
.newsletter h2{font-size:var(--text-subheading);font-weight:700;margin:0 0 12px;}
.newsletter p{color:var(--color-slate-gray);margin:0 0 28px;}
.newsletter-flash{display:inline-block;padding:10px 16px;border-radius:var(--radius-inputs);font-weight:600;font-size:14px;}
.newsletter-flash.is-success{background:#e6f2e8;border:1px solid #cfe6d3;color:#316b3a;}
.newsletter-flash.is-error{background:#fbeceb;border:1px solid #f0c9c7;color:#a13a34;}
.newsletter-form{display:flex;gap:10px;max-width:420px;margin:0 auto;}
.newsletter-form input{
  flex:1;border:1px solid var(--color-hairline);background:var(--color-pebble);
  border-radius:var(--radius-inputs);padding:12px 16px;font-family:inherit;font-size:14px;outline:none;color:var(--color-ink-navy);
}
.newsletter-form input:focus{border-color:var(--color-signal-blue);background:var(--color-paper);}
.newsletter-form input::placeholder{color:var(--color-mist-gray);}

/* ---------- Customer auth (login / register / account) ---------- */
.auth-section{padding:64px 0;}

/* Two-panel split card: a brand-color intro panel (context + a switch
   link to the other page) alongside the actual white form panel. */
.auth-split{
  display:flex;max-width:900px;margin:0 auto;min-height:580px;
  background:var(--color-paper);border-radius:var(--radius-cards);
  box-shadow:var(--shadow-sm-2);overflow:hidden;
}
.auth-side{
  flex:0 0 38%;position:relative;overflow:hidden;background:var(--color-signal-blue);
  display:flex;align-items:center;justify-content:center;padding:48px 36px;
}
.auth-side::before,.auth-side::after{content:'';position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.16);}
.auth-side::before{width:240px;height:240px;top:-70px;right:-70px;}
.auth-side::after{width:170px;height:170px;bottom:-60px;left:-60px;}
.auth-side-content{position:relative;z-index:1;text-align:center;}
.auth-side h2{font-size:28px;font-weight:700;margin:0 0 12px;color:#fff;letter-spacing:-0.01em;}
.auth-side p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.85);margin:0 0 28px;}

.auth-form-panel{flex:1;padding:56px 48px;display:flex;flex-direction:column;justify-content:center;min-width:0;}
.auth-form-panel h1{font-size:var(--text-heading-sm);font-weight:700;margin:0 0 8px;letter-spacing:-0.02em;}
.auth-form-panel p.sub{font-size:14px;color:var(--color-slate-gray);margin:0 0 28px;}

@media (max-width: 820px){
  .auth-split{flex-direction:column;min-height:0;max-width:480px;}
  .auth-side{padding:36px 32px;}
  .auth-form-panel{padding:36px 32px;}
}

.auth-field{margin-bottom:16px;}
.auth-field label{display:block;font-size:13px;font-weight:600;color:var(--color-ink-navy);margin-bottom:6px;}
.auth-field input{
  width:100%;border:1px solid var(--color-hairline);background:var(--color-pebble);
  border-radius:var(--radius-inputs);padding:11px 14px;font-family:inherit;font-size:14px;outline:none;color:var(--color-ink-navy);
  transition:border-color .15s ease, background-color .15s ease;
}
.auth-field input:focus{border-color:var(--color-signal-blue);background:var(--color-paper);}
.auth-field.has-error input{border-color:#a13a34;background:#fbeceb;}
.auth-field .field-error,.address-field .field-error{font-size:12px;color:#a13a34;font-weight:600;margin:6px 0 0;display:none;}
.auth-field.has-error .field-error,.address-field.has-error .field-error{display:block;}
.address-field.has-error .input-icon-wrap input{border-color:#a13a34;background:#fbeceb;}
.auth-form-error{
  background:#fbeceb;border:1px solid #f0c9c7;color:#a13a34;font-size:13px;font-weight:600;
  border-radius:var(--radius-inputs);padding:10px 14px;margin-bottom:16px;
}
.auth-field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

.password-field-wrap{position:relative;}
.password-field-wrap input{padding-right:44px;}
.password-toggle{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;
  padding:6px;cursor:pointer;color:var(--color-slate-gray);display:flex;border-radius:6px;
}
.password-toggle:hover{color:var(--color-ink-navy);background:var(--color-hairline);}
.password-toggle svg{width:18px;height:18px;}
.password-toggle .icon-eye-off{display:none;}
.password-toggle.showing .icon-eye{display:none;}
.password-toggle.showing .icon-eye-off{display:block;}

.password-rules{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;}
.password-rules li{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--color-slate-gray);}
.password-rules li svg{width:14px;height:14px;flex:none;color:var(--color-mist-gray);}
.password-rules li.met{color:#3f7d47;}
.password-rules li.met svg{color:#3f7d47;}

.password-strength{margin-top:10px;}
.password-strength-bar{height:4px;border-radius:9999px;background:var(--color-hairline);overflow:hidden;}
.password-strength-bar-fill{height:100%;width:0%;border-radius:9999px;transition:width .2s ease, background-color .2s ease;background:var(--color-hairline);}
.password-strength-label{font-size:12px;font-weight:600;margin-top:6px;color:var(--color-slate-gray);}

.auth-submit{width:100%;justify-content:center;margin-top:8px;position:relative;}
.auth-submit .btn-spinner{
  display:none;width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  border-radius:50%;animation:authSpin .6s linear infinite;margin-right:8px;
}
.auth-submit.is-loading{pointer-events:none;opacity:.85;}
.auth-submit.is-loading .btn-spinner{display:inline-block;}
@keyframes authSpin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){
  .auth-submit .btn-spinner{animation:none;}
}

.auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--color-mist-gray);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--color-hairline);}

.btn-google{background:var(--color-paper);color:var(--color-ink-navy);border:1px solid var(--color-hairline);}
.btn-google:hover{background:var(--color-pebble);}
.btn-google .google-g{width:18px;height:18px;flex:none;}

.auth-footer-link{text-align:center;font-size:14px;color:var(--color-slate-gray);margin-top:24px;}
.auth-footer-link a{color:var(--color-signal-blue);font-weight:600;}

/* ---------- Account dashboard ---------- */
.account-welcome{margin:16px 0 28px;}
.account-welcome h1{font-size:var(--text-heading-sm);font-weight:700;margin:0 0 6px;letter-spacing:-0.02em;}
.account-welcome p{color:var(--color-slate-gray);margin:0;}

.account-layout{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start;margin-bottom:88px;}

.account-card{background:var(--color-paper);border-radius:var(--radius-cards);box-shadow:var(--shadow-sm);padding:28px;margin-bottom:28px;}
.account-card:last-child{margin-bottom:0;}
.account-card-header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;}
.account-card-header h2{font-size:17px;font-weight:700;margin:0;color:var(--color-ink-navy);}
.account-card-header a{font-size:13px;font-weight:600;color:var(--color-signal-blue);}
.account-card-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;}
.account-detail{margin-bottom:4px;}
.account-detail .label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--color-slate-gray);}
.account-detail .value{font-size:15px;color:var(--color-ink-navy);font-weight:600;}

/* Rate Your Purchase (order.php, delivered orders only) */
.rate-purchase-list{display:flex;flex-direction:column;gap:18px;}
.rate-purchase-row{padding-top:16px;border-top:1px solid var(--color-hairline);}
.rate-purchase-row:first-child{padding-top:0;border-top:none;}
.rate-purchase-name{display:block;font-size:14px;font-weight:600;color:var(--color-ink-navy);margin-bottom:10px;}
.rate-purchase-done p{font-size:13px;color:var(--color-slate-gray);margin:6px 0 0;}
.rate-purchase-form{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.rate-purchase-comment{
  flex:1;min-width:200px;border:1px solid var(--color-hairline);background:var(--color-pebble);
  border-radius:var(--radius-inputs);padding:9px 14px;font-family:inherit;font-size:13.5px;color:var(--color-ink-navy);
}
.star-rating-input{display:inline-flex;flex-direction:row-reverse;gap:2px;}
.star-rating-input input{position:absolute;opacity:0;width:0;height:0;}
.star-rating-input label{cursor:pointer;color:var(--color-hairline);}
.star-rating-input label svg{width:22px;height:22px;}
.star-rating-input input:checked ~ label,
.star-rating-input label:hover,
.star-rating-input label:hover ~ label{color:var(--color-signal-blue);}
.star-rating-input input:focus-visible ~ label{outline:2px solid var(--color-signal-blue);outline-offset:2px;border-radius:2px;}
@media (max-width:640px){.rate-purchase-form{flex-direction:column;align-items:flex-start;}}

/* Sidebar */
.account-sidebar{background:var(--color-paper);border-radius:var(--radius-cards);box-shadow:var(--shadow-sm);padding:24px;position:sticky;top:88px;}
.account-sidebar-user{display:flex;align-items:center;gap:12px;padding-bottom:20px;margin-bottom:12px;border-bottom:1px solid var(--color-hairline);}
.account-avatar{
  width:44px;height:44px;border-radius:50%;background:var(--color-signal-blue);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;
}
.account-sidebar-user strong{display:block;font-size:14px;color:var(--color-ink-navy);}
.account-sidebar-user span{display:block;font-size:12px;color:var(--color-slate-gray);word-break:break-all;}
.account-nav{display:flex;flex-direction:column;gap:2px;}
.account-nav a{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-buttons);
  font-size:14px;font-weight:600;color:var(--color-slate-gray);
}
.account-nav a svg{width:17px;height:17px;flex:none;}
.account-nav a:hover{background:var(--color-pebble);color:var(--color-ink-navy);}
.account-nav a.active{background:var(--color-pebble);color:var(--color-signal-blue);}
.account-nav .account-nav-divider{border:none;border-top:1px solid var(--color-hairline);margin:10px 0;}
.account-nav .signout{color:#a13a34;}
.account-nav .signout:hover{background:#fbeceb;}

/* Stat cards */
.account-stats{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:28px;}
.stat-card-lg{background:var(--color-paper);border-radius:var(--radius-cards);box-shadow:var(--shadow-sm);padding:24px;}
.stat-card-lg .stat-label{font-size:13px;font-weight:600;color:var(--color-slate-gray);margin-bottom:10px;}
.stat-card-lg .stat-value{font-size:32px;font-weight:800;color:var(--color-ink-navy);line-height:1;margin-bottom:8px;}
.stat-card-lg .stat-sub{font-size:13px;color:var(--color-mist-gray);}

/* Orders table */
.account-orders-table{width:100%;border-collapse:collapse;font-size:14px;}
.account-orders-table th{
  text-align:left;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--color-slate-gray);padding:14px 12px;border-bottom:1px solid var(--color-hairline);
}
.account-orders-table td{padding:16px 12px;border-bottom:1px solid var(--color-hairline);color:var(--color-slate-gray);vertical-align:middle;}
.account-orders-table tr:last-child td{border-bottom:none;}
.account-orders-table td.strong{font-weight:700;color:var(--color-ink-navy);}
.account-orders-table .order-date{font-size:12px;color:var(--color-mist-gray);margin-top:2px;}
.account-orders-table .order-link{font-size:13px;font-weight:600;color:var(--color-signal-blue);}

.order-items-preview{display:flex;gap:6px;}
.order-items-preview .item-thumb{width:34px;height:34px;border-radius:8px;overflow:hidden;background:var(--color-pebble);flex:none;}
.order-items-preview .item-thumb img{width:100%;height:100%;object-fit:cover;}
.order-items-preview .item-more{
  width:34px;height:34px;border-radius:8px;background:var(--color-pebble);color:var(--color-slate-gray);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:none;
}

.status-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:9999px;font-size:12px;font-weight:700;text-transform:capitalize;}
.status-pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;}
.status-pill.status-pending{background:var(--color-pebble);color:var(--color-slate-gray);}
.status-pill.status-processing{background:#eef1fb;color:#3d54a8;}
.status-pill.status-shipped{background:#faf0dc;color:#8a5a10;}
.status-pill.status-delivered{background:#e6f2e8;color:#316b3a;}
.status-pill.status-cancelled{background:#fbeceb;color:#a13a34;}

/* ---------- My Orders: order cards ---------- */
.orders-list{display:flex;flex-direction:column;gap:16px;}
.order-card{background:var(--color-paper);border:1px solid var(--color-hairline);border-radius:var(--radius-cards);box-shadow:var(--shadow-sm);overflow:hidden;}
.order-card-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;padding:18px 24px;border-bottom:1px solid var(--color-hairline);background:#fdfbf7;}
.order-meta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.order-meta .item{display:flex;flex-direction:column;gap:2px;}
.order-meta .label{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--color-mist-gray);font-weight:700;}
.order-meta .value{font-size:13.5px;font-weight:600;color:var(--color-ink-navy);}

.order-card-body{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;gap:20px;flex-wrap:wrap;}
.order-thumbs{display:flex;align-items:center;}
.order-thumbs .thumb{width:52px;height:52px;border-radius:10px;background:var(--color-pebble);border:2px solid var(--color-paper);margin-left:-14px;overflow:hidden;flex-shrink:0;position:relative;}
.order-thumbs .thumb:first-child{margin-left:0;}
.order-thumbs .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.order-thumbs .thumb .swatch{position:absolute;inset:0;}
.order-thumbs .more{width:52px;height:52px;border-radius:10px;background:var(--color-pebble);border:2px solid var(--color-paper);margin-left:-14px;display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--color-slate-gray);flex-shrink:0;}
.order-summary-line{font-size:13px;color:var(--color-slate-gray);}
.order-summary-line strong{color:var(--color-ink-navy);}

.order-actions{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap;}
.orders-empty{display:none;text-align:center;color:var(--color-slate-gray);font-size:14px;padding:32px 0;}

/* ---------- Order detail page ---------- */
.order-head{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:30px;}
.order-head h1{font-size:27px;font-weight:700;margin:0 0 8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--color-ink-navy);}
.copy-btn{background:var(--color-pebble);border:none;border-radius:7px;width:28px;height:28px;display:grid;place-items:center;cursor:pointer;flex-shrink:0;}
.copy-btn svg{width:13px;height:13px;color:var(--color-slate-gray);}
.copy-btn.copied svg{color:#316b3a;}
.order-sub{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--color-slate-gray);flex-wrap:wrap;}
.head-actions{display:flex;gap:10px;flex-wrap:wrap;}
.head-actions svg{width:15px;height:15px;}
.head-actions .btn{min-width:216px;height:52px;}
.btn.cancel-btn-stacked{flex-direction:column;gap:1px;}
.cancel-btn-main{font-size:14px;font-weight:600;line-height:1.3;}
.cancel-btn-sub{font-size:10.5px;font-weight:500;line-height:1.3;color:#c47c78;}

/* Custom confirm modal (replaces the native browser confirm() for Cancel Order) */
.confirm-modal{position:fixed;inset:0;background:rgba(66,54,46,0.45);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .2s ease;}
.confirm-modal.open{opacity:1;visibility:visible;}
.confirm-modal-box{position:relative;background:var(--color-paper);border-radius:var(--radius-cards);box-shadow:var(--shadow-sm-2);padding:28px;max-width:420px;width:100%;text-align:left;transform:translateY(10px) scale(.98);transition:transform .2s ease;}
.confirm-modal.open .confirm-modal-box{transform:translateY(0) scale(1);}
.confirm-modal-close{position:absolute;top:16px;right:16px;background:none;border:none;padding:4px;cursor:pointer;color:var(--color-mist-gray);}
.confirm-modal-close svg{width:18px;height:18px;}
.confirm-modal-close:hover{color:var(--color-slate-gray);}
.confirm-modal-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:22px;padding-right:20px;}
.confirm-modal-icon{width:44px;height:44px;border-radius:50%;background:#fbeceb;display:grid;place-items:center;flex-shrink:0;}
.confirm-modal-icon svg{width:20px;height:20px;color:#a13a34;}
/* Neutral variant — same component, for a non-destructive modal (e.g. the
   WhatsApp pre-chat form) where the warning-red reading would be wrong. */
.confirm-modal-icon.neutral{background:var(--color-pebble);color:var(--color-signal-blue);}
.confirm-modal-box h3{margin:0 0 6px;font-size:17px;font-weight:700;color:var(--color-ink-navy);}
.confirm-modal-box p{margin:0;font-size:13.5px;color:var(--color-slate-gray);line-height:1.6;}
.modal-field{margin-bottom:16px;}
.modal-field label{display:block;font-size:13px;font-weight:600;color:var(--color-ink-navy);margin-bottom:6px;}
.modal-field select,.modal-field textarea,.modal-field input[type="text"]{
  width:100%;border:1.5px solid var(--color-hairline);border-radius:9px;padding:11px 14px;
  font-family:inherit;font-size:14px;color:var(--color-ink-navy);background:var(--color-pebble);
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.modal-field select:focus,.modal-field textarea:focus,.modal-field input[type="text"]:focus{
  outline:none;border-color:var(--color-signal-blue);background:var(--color-paper);box-shadow:0 0 0 3px rgba(149,80,28,0.12);
}
.modal-field textarea{resize:vertical;min-height:72px;}
.modal-info-banner{display:flex;align-items:flex-start;gap:10px;background:#faf0dc;border:1px solid #f0d9a3;border-radius:10px;padding:12px 14px;margin-bottom:22px;}
.modal-info-banner svg{width:16px;height:16px;color:#8a5a10;flex-shrink:0;margin-top:2px;}
.modal-info-banner p{margin:0;font-size:12.5px;color:#8a5a10;line-height:1.5;}
.confirm-modal-actions{display:flex;gap:10px;}
.confirm-modal-actions .btn{flex:1;justify-content:center;}
.btn-danger-solid{background:#a13a34;color:#fff;}
.btn-danger-solid:hover{background:#8a302b;}
.btn-outline-navy.danger{color:#a33636;border-color:#f0d3d3;}
.btn-outline-navy.danger:hover{background:#fbe9e9;}

.tracker-row{display:flex;align-items:flex-start;justify-content:space-between;}
.tstep{display:flex;flex-direction:column;align-items:center;gap:10px;flex:1;position:relative;text-align:center;}
.tstep .line{position:absolute;top:17px;left:calc(50% + 24px);right:calc(-50% + 24px);height:2px;background:var(--color-hairline);z-index:0;}
.tstep:last-child .line{display:none;}
.tstep .line.done{background:#316b3a;}
.tcircle{width:34px;height:34px;border-radius:50%;background:var(--color-paper);border:2px solid var(--color-hairline);display:grid;place-items:center;z-index:1;}
.tcircle svg{width:15px;height:15px;color:var(--color-mist-gray);}
.tcircle.done{background:#316b3a;border-color:#316b3a;}
.tcircle.done svg{color:#fff;}
.tcircle.active{background:#f3e7e2;border-color:var(--color-signal-blue);}
.tcircle.active svg{color:var(--color-deep-cobalt);}
.tlabel{font-size:12.5px;font-weight:600;color:var(--color-mist-gray);}
.tstep.done .tlabel,.tstep.active .tlabel{color:var(--color-ink-navy);}
.tdate{font-size:11px;color:var(--color-mist-gray);}

.grid-2{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start;}
.grid-2 .address-form-card{margin-bottom:24px;}

table.items{width:100%;border-collapse:collapse;}
table.items th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--color-mist-gray);font-weight:700;padding:0 0 12px;}
table.items th.num,table.items td.num{text-align:right;}
table.items td{padding:14px 0;border-top:1px solid var(--color-hairline);font-size:13.5px;vertical-align:middle;}
table.items tr:first-child td{border-top:none;}
.prod-cell{display:flex;align-items:center;gap:12px;}
.prod-thumb{width:48px;height:48px;border-radius:10px;background:var(--color-pebble);flex-shrink:0;overflow:hidden;position:relative;}
.prod-thumb img{width:100%;height:100%;object-fit:cover;}
.prod-thumb .swatch{position:absolute;inset:0;}
.prod-name{font-weight:600;color:var(--color-ink-navy);}
.prod-size{font-size:11.5px;color:var(--color-mist-gray);margin-top:2px;}
.line-total{font-weight:700;color:var(--color-ink-navy);}

.addr-name{font-weight:600;font-size:14px;margin-bottom:4px;color:var(--color-ink-navy);}
.addr-text{font-size:13.5px;color:var(--color-slate-gray);line-height:1.6;}
.addr-text .phone{display:flex;align-items:center;gap:6px;margin-top:6px;color:var(--color-ink-navy);font-weight:500;}
.addr-text .phone svg{width:13px;height:13px;color:var(--color-slate-gray);}

.pay-row{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid var(--color-hairline);font-size:13px;color:var(--color-slate-gray);}

.help-card{background:#f3e7e2;border:1px solid #e8cdb8;border-radius:16px;padding:18px 20px;}
.help-card strong{display:block;font-size:13.5px;margin-bottom:4px;color:var(--color-ink-navy);}
.help-card p{margin:0 0 12px;font-size:12.5px;color:var(--color-slate-gray);}
.help-card a{font-size:12.5px;font-weight:700;color:var(--color-deep-cobalt);}

@media (max-width:900px){
  .grid-2{grid-template-columns:1fr;}
  .tlabel{font-size:10.5px;}
  table.items thead{display:none;}
  table.items tr{display:block;padding:14px 0;}
  table.items td{display:flex;justify-content:space-between;border:none;padding:4px 0;}
  table.items td.prod-col{display:block;}
}

@media (max-width:700px){
  .order-card-body{flex-direction:column;align-items:flex-start;}
  .order-actions{margin-left:0;width:100%;}
  .order-actions .btn{flex:1;justify-content:center;}
}

/* Saved addresses */
.address-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.address-card{border:1px solid var(--color-hairline);border-radius:var(--radius-inputs);padding:18px;}
.address-label-badge{
  display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  background:var(--color-pebble);color:var(--color-slate-gray);padding:4px 10px;border-radius:9999px;margin-bottom:10px;
}
.address-card strong{display:block;font-size:14px;color:var(--color-ink-navy);margin-bottom:4px;}
.address-card p{font-size:13px;line-height:1.6;color:var(--color-slate-gray);margin:0 0 12px;}
.address-card-actions{display:flex;gap:14px;font-size:13px;font-weight:600;}
.address-card-actions a, .address-card-actions button{color:var(--color-signal-blue);background:none;border:none;padding:0;cursor:pointer;font:inherit;}
.address-card-actions .remove{color:#a13a34;}
.address-card-add{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  border:1px dashed var(--color-hairline);border-radius:var(--radius-inputs);padding:18px;min-height:120px;
  color:var(--color-slate-gray);font-size:13px;font-weight:600;text-align:center;transition:border-color .15s ease, color .15s ease;
}
.address-card-add svg{width:22px;height:22px;}
.address-card-add:hover{border-color:var(--color-signal-blue);color:var(--color-signal-blue);}

/* Checkout: two-step progress indicator (Account, then Address & Payment) */
.checkout-stepper{display:flex;align-items:center;gap:12px;margin-bottom:28px;}
.checkout-stepper .cs-step{display:flex;align-items:center;gap:10px;}
.checkout-stepper .cs-circle{
  width:30px;height:30px;border-radius:50%;background:var(--color-paper);border:2px solid var(--color-hairline);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--color-mist-gray);flex:none;
}
.checkout-stepper .cs-step.active .cs-circle{border-color:var(--color-signal-blue);color:var(--color-signal-blue);background:#f3e7e2;}
.checkout-stepper .cs-step.done .cs-circle{border-color:var(--color-signal-blue);background:var(--color-signal-blue);color:#fff;}
.checkout-stepper .cs-step.done .cs-circle svg{width:14px;height:14px;}
.checkout-stepper .cs-label{font-size:13px;font-weight:600;color:var(--color-mist-gray);}
.checkout-stepper .cs-step.active .cs-label,.checkout-stepper .cs-step.done .cs-label{color:var(--color-ink-navy);}
.checkout-stepper .cs-line{width:56px;height:2px;background:var(--color-hairline);}
.checkout-stepper .cs-line.done{background:var(--color-signal-blue);}

/* Checkout: inline Account step (sign in / create account / guest) */
.checkout-account-card{max-width:560px;margin:0 auto;}
.checkout-account-tabs{display:flex;gap:8px;margin-bottom:22px;background:var(--color-pebble);border-radius:10px;padding:4px;}
.checkout-account-tab{
  flex:1;text-align:center;padding:10px;border-radius:8px;font-weight:600;font-size:13.5px;
  color:var(--color-slate-gray);cursor:pointer;border:none;background:none;font-family:inherit;
}
.checkout-account-tab.active{background:var(--color-paper);color:var(--color-deep-cobalt);box-shadow:var(--shadow-sm);}
.checkout-auth-view{display:none;}
.checkout-auth-view.active{display:block;}

/* Checkout: saved-address / payment-method radio cards */
.checkout-address-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px;}
.checkout-address-card{display:block;position:relative;cursor:pointer;transition:border-color .15s ease, background-color .15s ease;}
.checkout-address-card input{position:absolute;opacity:0;width:0;height:0;}
.checkout-address-card:has(input:checked){border-color:var(--color-signal-blue);background:#f3e7e2;}
.checkout-address-card:has(input:focus-visible){outline:2px solid var(--color-signal-blue);outline-offset:2px;}
@media (max-width:640px){.checkout-address-list{grid-template-columns:1fr;}}

.checkout-address-empty{border:1.5px dashed var(--color-hairline);border-radius:var(--radius-inputs);padding:24px;text-align:center;color:var(--color-mist-gray);font-size:13.5px;margin-bottom:18px;}

/* "Add New Address" as a native <details> disclosure — collapsed by
   default once there's at least one saved address, open with no extra JS
   needed. The <summary> is styled to look like the same dashed trigger
   card the other address options use. */
.checkout-add-address-details{margin-top:18px;}
.checkout-add-address-details summary{
  display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
  border:1.5px dashed var(--color-hairline);border-radius:var(--radius-inputs);
  padding:16px 18px;color:var(--color-signal-blue);font-weight:600;font-size:13.5px;
}
.checkout-add-address-details summary::-webkit-details-marker{display:none;}
.checkout-add-address-details summary svg{width:18px;height:18px;}
.checkout-add-address-details[open] summary{border-radius:var(--radius-inputs) var(--radius-inputs) 0 0;border-bottom:none;}
.checkout-new-address-fields{
  border:1.5px solid var(--color-hairline);border-top:none;border-radius:0 0 var(--radius-inputs) var(--radius-inputs);
  padding:20px;background:#fdfbf7;
}
.checkout-new-address-fields .form-mini-actions{display:flex;justify-content:flex-end;margin-top:18px;}

.step-actions{display:flex;justify-content:space-between;align-items:center;margin-top:26px;}
.step-actions svg{width:16px;height:16px;}

/* Checkout: payment method options */
.checkout-pay-options{display:flex;flex-direction:column;gap:12px;margin-bottom:8px;}
.checkout-pay-option{display:flex;align-items:center;gap:14px;padding:16px 18px;}
.pay-icon{width:38px;height:38px;border-radius:10px;background:var(--color-pebble);display:grid;place-items:center;flex-shrink:0;}
.pay-icon svg{width:19px;height:19px;color:var(--color-deep-cobalt);}
.pay-info{display:flex;flex-direction:column;gap:2px;}
.pay-info strong{font-size:14px;color:var(--color-ink-navy);}
.pay-info span{font-size:12.5px;color:var(--color-slate-gray);}
.checkout-pay-option.disabled{cursor:not-allowed;opacity:.6;}
.coming-soon-badge{margin-left:auto;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--color-slate-gray);background:var(--color-pebble);padding:3px 8px;border-radius:999px;flex-shrink:0;}
.cod-note{background:#faf0dc;border:1px solid #f0d9a3;border-radius:var(--radius-inputs);padding:14px 16px;font-size:13px;color:#8a5a10;margin-top:4px;}

/* Checkout: review step summary blocks */
.review-block{border:1px solid var(--color-hairline);border-radius:var(--radius-inputs);padding:18px 20px;margin-bottom:16px;}
.review-block-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.review-block-head strong{font-size:14px;color:var(--color-ink-navy);}
.review-block-head a{font-size:12.5px;font-weight:600;color:var(--color-signal-blue);}
.review-block p{margin:0;font-size:13.5px;color:var(--color-slate-gray);line-height:1.6;}

/* Checkout: order-summary sidebar's step-completion checklist */
.summary-status{margin-top:18px;padding-top:16px;border-top:1px solid var(--color-hairline);font-size:12.5px;display:flex;flex-direction:column;gap:8px;}
.summary-status .row{display:flex;align-items:center;gap:8px;}
.summary-status .row svg{width:14px;height:14px;flex-shrink:0;}
.summary-status .row.pending{color:var(--color-mist-gray);}
.summary-status .row.ok{color:#316b3a;font-weight:600;}

/* ---------- Address form (add/edit) ---------- */
.address-form-layout{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start;margin-bottom:88px;}

.address-form-card{background:var(--color-paper);border:1px solid var(--color-hairline);border-radius:var(--radius-cards);box-shadow:var(--shadow-sm-2);overflow:hidden;}
.address-form-top{padding:22px 28px;border-bottom:1px solid var(--color-hairline);display:flex;align-items:center;gap:12px;}
.address-form-top .icon-circle{width:38px;height:38px;border-radius:50%;background:#f3e7e2;display:flex;align-items:center;justify-content:center;flex:none;}
.address-form-top .icon-circle svg{width:18px;height:18px;color:var(--color-deep-cobalt);}
.address-form-top h2{margin:0;font-size:17px;font-weight:700;color:var(--color-ink-navy);}
.address-form-top p{margin:2px 0 0;font-size:13px;color:var(--color-slate-gray);}
.address-form-body{padding:28px;}

.field-label{font-size:13px;font-weight:600;color:var(--color-ink-navy);margin-bottom:9px;display:block;}
.label-pills{display:flex;gap:10px;margin-bottom:26px;flex-wrap:wrap;}
.label-pill{
  display:flex;align-items:center;gap:7px;border:1.5px solid var(--color-hairline);border-radius:var(--radius-inputs);
  padding:10px 16px;font-size:13.5px;font-weight:600;color:var(--color-slate-gray);cursor:pointer;
  background:var(--color-paper);transition:border-color .15s ease, color .15s ease, background-color .15s ease;
}
.label-pill svg{width:15px;height:15px;}
.label-pill input{display:none;}
.label-pill.active{border-color:var(--color-signal-blue);color:var(--color-deep-cobalt);background:#f3e7e2;}

.address-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 18px;}
.address-field{display:flex;flex-direction:column;gap:8px;}
.address-field.full{grid-column:1 / -1;}
.address-field label{font-size:13px;font-weight:600;color:var(--color-ink-navy);}
.address-field .req{color:var(--color-signal-blue);}
.input-icon-wrap{position:relative;}
.input-icon-wrap svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--color-mist-gray);pointer-events:none;}
.input-icon-wrap input,.input-icon-wrap select{
  width:100%;background:var(--color-pebble);border:1.5px solid transparent;border-radius:var(--radius-inputs);
  padding:12px 14px 12px 40px;font-size:14px;color:var(--color-ink-navy);font-family:inherit;
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.address-field.no-icon input{padding-left:14px;}
.input-icon-wrap input:focus,.input-icon-wrap select:focus{
  outline:none;border-color:var(--color-signal-blue);background:var(--color-paper);box-shadow:0 0 0 3px rgba(149,80,28,0.12);
}

.address-checkbox-row{display:flex;align-items:center;gap:10px;margin-top:6px;grid-column:1 / -1;font-size:13.5px;color:var(--color-ink-navy);}
.address-checkbox-row input{width:17px;height:17px;accent-color:var(--color-signal-blue);}

.address-form-divider{border:none;border-top:1px solid var(--color-hairline);margin:26px 0;}
.address-form-actions{display:flex;gap:12px;margin-top:8px;flex-wrap:wrap;}

.address-tip-card{background:var(--color-paper);border:1px solid var(--color-hairline);border-radius:var(--radius-cards);box-shadow:var(--shadow-sm-2);padding:24px;}
.address-tip-card h3{font-size:15px;margin:0 0 14px;font-weight:700;color:var(--color-ink-navy);}
.address-tip-item{display:flex;gap:12px;margin-bottom:16px;}
.address-tip-item:last-child{margin-bottom:0;}
.address-tip-item .dot{width:26px;height:26px;border-radius:50%;background:#f3e7e2;display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px;}
.address-tip-item .dot svg{width:13px;height:13px;color:var(--color-deep-cobalt);}
.address-tip-item p{margin:0;font-size:13px;color:var(--color-slate-gray);line-height:1.5;}
.address-tip-item strong{display:block;font-size:13.5px;color:var(--color-ink-navy);margin-bottom:2px;}

@media (max-width: 900px){
  .address-form-layout{grid-template-columns:1fr;}
}
@media (max-width: 560px){
  .address-field-grid{grid-template-columns:1fr;}
}

@media (max-width: 900px){
  .account-layout{grid-template-columns:1fr;}
  .account-sidebar{position:static;}
  .account-stats{grid-template-columns:1fr;}
  /* .account-layout's single 1fr column is shared by both stacked rows
     (sidebar, then main) — a grid track's width is driven by the WIDEST
     min-content need among every item placed in it, not just the item in
     that row. The orders table's cells (deliberately white-space:nowrap so
     it can scroll internally — see the ≤640px rule below) have a large
     min-content width; without min-width:0 here that forced the whole
     column wide, dragging the otherwise-compact sidebar card along with
     it even though the sidebar itself had nothing wide in it. */
  .account-sidebar, .account-main{min-width:0;}
}
.two-col-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:28px;}

@media (max-width: 640px){
  .auth-field-row{grid-template-columns:1fr;}
  .address-grid{grid-template-columns:1fr;}
  .two-col-grid{grid-template-columns:1fr;}
  .account-orders-table{display:block;overflow-x:auto;white-space:nowrap;}
}

/* ---------- Footer ---------- */
footer{background:var(--color-cloud);border-top:1px solid var(--color-hairline);padding:64px 0 0;margin-top:88px;}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr;gap:32px;padding-bottom:48px;}
.footer-brand p{color:var(--color-slate-gray);font-size:14px;line-height:1.6;margin:16px 0 20px;max-width:260px;}
.footer-col h4{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--color-slate-gray);margin:0 0 18px;}
.footer-col ul{display:flex;flex-direction:column;gap:12px;}
.footer-col a{font-size:14px;font-weight:500;color:var(--color-ink-navy);}
.footer-col a:hover{color:var(--color-signal-blue);}
.social-row{display:flex;gap:10px;margin-top:20px;}
.social-row a{width:36px;height:36px;border-radius:50%;background:var(--color-pebble);display:flex;align-items:center;justify-content:center;color:var(--color-ink-navy);}
.social-row a:hover{background:var(--color-signal-blue);color:#fff;}
.social-row svg{width:16px;height:16px;}
.footer-bottom{border-top:1px solid var(--color-hairline);padding:24px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.footer-bottom p{font-size:13px;color:var(--color-slate-gray);margin:0;}
.payment-icons{display:flex;gap:8px;}
.payment-icons span{
  border:1px solid var(--color-hairline);border-radius:var(--radius-small);padding:5px 10px;
  font-size:11px;font-weight:700;color:var(--color-slate-gray);background:var(--color-paper);
}

/* ---------- Mobile ---------- */
@media (max-width: 968px){
  .wrap{padding:0 24px;}
  .category-bar, .search-box, .header-actions .btn-outline-navy{display:none;}
  .hamburger{display:flex;}
  /* On mobile, always show the "scrolled" header style (solid background,
     hairline border, shadow) instead of the semi-transparent default —
     there's no hero content sliding underneath it to blend with here, so
     it should just read as a solid bar from the start, not only after the
     user scrolls past the first 8px. */
  header.site-header{background:rgba(255,255,255,0.96);border-color:var(--color-hairline);box-shadow:var(--shadow-sm);}
  /* The header's CTA ("Shop Now") is the one direct-child <a class="btn">
     in .header-actions (account/cart are .icon-btn, the menu toggle is a
     <button>) — dropping it is what keeps the logo + account + cart +
     hamburger from fighting the "Shop Now" pill for space on a 320-430px
     phone; without this the row needs ~430px of content width it never
     has, and ends up overlapping/clipped under the global overflow-x:hidden. */
  .header-actions > a.btn{display:none;}
  /* Logo pinned to the left edge, icon cluster pinned to the right edge —
     with the search box and "Shop Now" CTA both hidden on mobile, these
     are the only two things left in the row, so a plain space-between
     keeps them at opposite edges instead of the grid's reserved (and now
     empty) middle "auto" column. */
  .header-inner{display:flex;align-items:center;justify-content:space-between;height:64px;}
  .site-header .logo-img{width:120px;height:53px;}
  .hero-grid{grid-template-columns:1fr;gap:40px;}
  .hero{padding:40px 0 48px;}
  .hero-copy h1{font-size:44px;}
  /* Buttons were content-width (shrink-wrapped to their own label), so
     "Explore Collections" rendered narrower than "Shop New Arrivals" right
     above it — stretching both to the full column width, same colors. */
  .hero-actions{flex-direction:column;}
  .hero-actions .btn{width:100%;}
  .hero-visual{height:340px;}
  .category-grid{grid-template-columns:repeat(3,1fr);}
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .feature-split{grid-template-columns:1fr;gap:32px;}
  .feature-split.reverse .feature-visual{order:1;}
  .feature-split.reverse .feature-copy{order:2;}
  .feature-visual{height:280px;}
  .testimonial-grid, .journal-grid, .review-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .section{padding:56px 0;}
  /* .section-tight had no mobile override at all, so sections using only
     that class (Sale banner, Newsletter) stayed frozen at their desktop
     64px vertical padding while every .section sibling correctly shrank
     above — the "some cramped, some loose" inconsistency. Scaled down by
     the same ratio .section uses (88px desktop -> 56px mobile). */
  .section-tight{padding:40px 0;}
  .newsletter-form{flex-direction:column;}
  /* Both buttons use the shared .btn component, which sets
     white-space:nowrap so short labels ("Shop Now", "Add to Cart") never
     wrap awkwardly — but that also means a longer label ("Continue to
     Payment", "Place Order — LKR x,xxx") can't wrap to fit. Stacking them
     full-width (checkout's Back/Continue and Back/Place Order pairs) keeps
     both readable instead of wrapping onto mismatched content-width lines. */
  .step-actions{flex-direction:column;align-items:stretch;gap:12px;}
  .step-actions .btn{width:100%;}
  .pagination{flex-wrap:wrap;}

  /* Product page: Add to Cart / Buy Now, same full-width-stacked treatment. */
  .pdp-actions .product-actions{flex-direction:column;}
  .pdp-actions .product-actions .btn{width:100%;}

  /* Order detail page: Download Invoice / Cancel Order. .head-actions is
     itself a wrapped flex item of .order-head (shrink-to-fit alongside the
     order number/status block), so without an explicit width here its
     buttons' width:100% only resolves against that shrunk box — which,
     circularly, just matched the buttons' own min-width:216px. */
  .head-actions{flex-direction:column;width:100%;}
  .head-actions .btn{width:100%;}

  /* Hero trust row ("Free Shipping", "Secure Checkout"): let each item
     wrap its own text and shrink below its content width instead of
     assuming it always has room, so a longer badge never gets clipped. */
  .trust-row li{white-space:normal;min-width:0;}

  /* Prices should always read as one unbroken string, never split mid-value
     ("LKR" on one line, the number on the next). */
  .price-now{white-space:nowrap;}

  /* Hero price-float badge: was positioned with a fixed left offset and no
     right constraint, so its width came entirely from its content — fine
     for a short name, but a longer product name/price combination has no
     guardrail against overlapping or clipping at narrow widths. Spanning
     left+right makes it scale with the image instead, with the name
     truncating (ellipsis) rather than the price wrapping. */
  .price-float{left:16px;right:16px;}
  .price-float > div:not(.dot){min-width:0;flex:1;}
  .price-float .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .price-float .amount{white-space:nowrap;}

  /* Product card "View Product" button measured ~41.6px tall on mobile —
     under the 44px minimum comfortable tap target. */
  .product-actions .btn{min-height:44px;}
}
@media (max-width: 700px){
  .testimonial-grid, .journal-grid, .review-grid{grid-template-columns:1fr;}
  /* Four steps x (circle + label) + 3 connector lines need ~640px laid out
     in full — more than a phone (and most of a small tablet) has. Dropping
     the text labels and shrinking the connector lines keeps the same
     circles/colors/icons, just condensed to a dot-and-line progress
     indicator that actually fits without clipping or scrolling. */
  .checkout-stepper{gap:6px;}
  .checkout-stepper .cs-label{display:none;}
  .checkout-stepper .cs-line{width:18px;}

  /* Footer: the 560px breakpoint already stacked this to a single column,
     but between 561-700px (larger phones/phablets) it was still 2-up and
     cramped — matching the reference mockup's own "under ~700px" cutoff. */
  .footer-grid{grid-template-columns:1fr;}
}
@media (max-width: 560px){
  .category-grid{grid-template-columns:repeat(2,1fr);}
  .product-grid{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .hero-copy h1{font-size:34px;}
  .sale-banner{padding:44px 24px;}
  .wrap{padding:0 16px;}
  .section-header h1, .section-header h2{font-size:32px;}
  .section-header-row h2{font-size:26px;}
  /* Same reasoning as .step-actions above: a button's own text can't wrap
     (global .btn white-space:nowrap), so a 50/50 flex split with a longer
     label ("Yes, Cancel Order", "Submit Refund Request", "Chat on
     WhatsApp") spills text out of the pill on a narrow phone. Stacking to
     full-width buttons sidesteps the squeeze instead of fighting it. */
  .confirm-modal-actions{flex-direction:column;}
}

/* Mobile nav drawer */
.mobile-drawer{
  position:fixed;inset:0;background:rgba(66,54,46,0.4);z-index:100;
  opacity:0;visibility:hidden;transition:opacity .2s ease;
  overflow:hidden; /* .panel sits translateX(100%) off-screen at rest — without this it still counts
                       toward document scrollWidth and causes horizontal scroll on every mobile page */
}
.mobile-drawer.open{opacity:1;visibility:visible;}
.mobile-drawer .panel{
  position:absolute;top:0;right:0;bottom:0;width:82%;max-width:340px;background:#fff;
  padding:24px;transform:translateX(100%);transition:transform .25s ease;overflow-y:auto;
}
.mobile-drawer.open .panel{transform:translateX(0);}
.mobile-drawer .panel a{display:block;padding:14px 4px;font-weight:600;font-size:16px;border-bottom:1px solid var(--color-hairline);}
.mobile-drawer .close-btn{margin-bottom:12px;}
.mobile-drawer .mobile-search-box{display:flex;width:100%;margin-bottom:16px;}

/* Hamburger icon: plain 3 lines that morph into an X once the drawer is
   open, instead of swapping icons with no transition. */
.hamburger .burger{position:relative;width:18px;height:13px;flex:none;}
.hamburger .burger span{
  position:absolute;left:0;top:50%;width:100%;height:2px;border-radius:2px;background:currentColor;
  transition:transform .3s cubic-bezier(.22,.68,0,1.01), opacity .2s ease, margin-top .3s cubic-bezier(.22,.68,0,1.01);
}
.hamburger .burger span:nth-child(1){margin-top:-6px;}
.hamburger .burger span:nth-child(2){margin-top:-1px;}
.hamburger .burger span:nth-child(3){margin-top:4px;}
.hamburger.is-active .burger span:nth-child(1){margin-top:-1px;transform:rotate(45deg);}
.hamburger.is-active .burger span:nth-child(2){opacity:0;}
.hamburger.is-active .burger span:nth-child(3){margin-top:-1px;transform:rotate(-45deg);}

/* Mobile drawer: a category with subcategories becomes an accordion row
   (chevron toggle) instead of a flat link — expanding it grows in normal
   document flow, pushing the rest of the list down, rather than opening
   as an overlay on top of it. */
.mobile-nav-row{display:flex;align-items:stretch;}
.panel .mobile-nav-row a{border-bottom:none;flex:1;min-width:0;}
.mobile-submenu-toggle{
  background:none;border:none;padding:0 6px;margin-left:4px;color:var(--color-slate-gray);cursor:pointer;flex:none;
  display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--color-hairline);
}
.mobile-submenu-toggle svg{width:16px;height:16px;transition:transform .25s cubic-bezier(.22,.68,0,1.01);}
.mobile-nav-item.open .mobile-submenu-toggle svg{transform:rotate(180deg);}
.mobile-submenu-toggle:hover{color:var(--color-ink-navy);}

.mobile-submenu{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .3s cubic-bezier(.22,.68,0,1.01);
}
.mobile-nav-item.open .mobile-submenu{grid-template-rows:1fr;}
.mobile-submenu-inner{overflow:hidden;display:flex;flex-direction:column;}
.panel .mobile-submenu-inner a{
  padding:11px 4px 11px 18px;font-weight:500;font-size:14.5px;color:var(--color-slate-gray);border-bottom:none;
}
.mobile-submenu-inner a:last-child{padding-bottom:16px;}

@media (prefers-reduced-motion: reduce){
  .hamburger .burger span{transition:none;}
  .mobile-submenu{transition:none;}
  .mobile-submenu-toggle svg{transition:none;}
}

/* ============================================================
   Pages added after the mockup: category listing, product detail,
   cart. Same tokens as everything above — colors, radius scale,
   3-layer shadow system, 8px spacing rhythm, same button/card
   components — just new layouts for new page types.
   ============================================================ */

/* ---------- Breadcrumb ---------- */
.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:14px;color:var(--color-slate-gray);margin:24px 0;}
.breadcrumb a{color:var(--color-slate-gray);font-weight:600;}
.breadcrumb a:hover{color:var(--color-signal-blue);}
.breadcrumb .sep{color:var(--color-mist-gray);}
.breadcrumb .current{color:var(--color-ink-navy);font-weight:600;}

/* ---------- Category banner ---------- */
.cat-banner{position:relative;height:220px;border-radius:var(--radius-productcards);overflow:hidden;margin-bottom:40px;box-shadow:var(--shadow-sm);}
.cat-banner .swatch{position:absolute;inset:0;}
.cat-banner .ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.cat-banner .overlay{
  position:absolute;inset:0;background:linear-gradient(180deg, rgba(66,54,46,0.15) 0%, rgba(66,54,46,0.75) 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;
}
.cat-banner h1{color:#fff;font-size:var(--text-heading-sm);font-weight:700;margin:0 0 8px;letter-spacing:-0.02em;}
.cat-banner p{color:rgba(255,255,255,.85);font-size:14px;margin:0;}

/* ---------- Listing toolbar (sort / count) ---------- */
.subcat-chips{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0;}
.subcat-chip{
  border:1px solid var(--color-hairline);background:var(--color-paper);border-radius:var(--radius-badges);
  padding:8px 18px;font-size:14px;font-weight:600;color:var(--color-ink-navy);
  transition:border-color .15s ease, background-color .15s ease, color .15s ease;
}
.subcat-chip:hover{background:var(--color-ink-navy);color:#fff;border-color:var(--color-ink-navy);}

.listing-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:12px;}
.listing-toolbar .count{font-size:14px;color:var(--color-slate-gray);}
.listing-toolbar form{display:flex;gap:10px;flex-wrap:wrap;}
.sort-select{
  border:1px solid var(--color-hairline);background:var(--color-pebble);border-radius:var(--radius-inputs);
  padding:9px 14px;font-family:inherit;font-size:14px;color:var(--color-ink-navy);cursor:pointer;
}

.empty-state{text-align:center;padding:80px 24px;color:var(--color-slate-gray);}
.empty-state h2{font-size:22px;font-weight:700;color:var(--color-ink-navy);margin:0 0 8px;}

/* ---------- Pagination ---------- */
.pagination{display:flex;justify-content:center;gap:8px;margin-top:48px;}
.pagination a, .pagination span{
  display:flex;align-items:center;justify-content:center;min-width:38px;height:38px;border-radius:var(--radius-buttons);
  font-size:14px;font-weight:600;color:var(--color-ink-navy);border:1px solid var(--color-hairline);
}
.pagination a:hover{background:var(--color-pebble);}
.pagination .active{background:var(--color-signal-blue);color:#fff;border-color:var(--color-signal-blue);}
.pagination .disabled{color:var(--color-mist-gray);pointer-events:none;}

/* ---------- Product detail page ---------- */
.pdp-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;margin:8px 0 88px;}
.pdp-media-col{display:flex;flex-direction:column;gap:16px;}
.pdp-media{position:relative;border-radius:var(--radius-productcards);overflow:hidden;box-shadow:var(--shadow-sm-2);height:520px;background:var(--color-paper);}
.pdp-media .swatch{position:absolute;inset:0;}
.pdp-media .ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:none;}
.pdp-media .ph-img.active{display:block;}

.pdp-thumbs{display:flex;flex-wrap:wrap;gap:10px;}
.pdp-thumb{
  width:64px;height:64px;flex:none;border-radius:var(--radius-inputs);overflow:hidden;
  border:2px solid transparent;padding:0;cursor:pointer;background:var(--color-pebble);
  transition:border-color .15s ease;
}
.pdp-thumb:hover{border-color:var(--color-hairline);}
.pdp-thumb.active{border-color:var(--color-signal-blue);}
.pdp-thumb img{width:100%;height:100%;object-fit:cover;display:block;}

.gallery-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,0.9);border:none;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);cursor:pointer;color:var(--color-ink-navy);z-index:3;
  font-size:24px;line-height:1;font-weight:700;transition:background-color .15s ease, transform .15s ease;
}
.gallery-nav:hover{background:#fff;transform:translateY(-50%) scale(1.06);}
.gallery-nav.prev{left:16px;}
.gallery-nav.next{right:16px;}

.color-swatches{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;}
.color-swatch{
  border:1px solid var(--color-hairline);background:var(--color-paper);border-radius:var(--radius-buttons);
  padding:9px 16px;font-size:14px;font-weight:600;color:var(--color-ink-navy);cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease, color .15s ease;
}
.color-swatch:hover{border-color:var(--color-signal-blue);}
.color-swatch.active{background:var(--color-ink-navy);color:#fff;border-color:var(--color-ink-navy);}

.pdp-info .pill-badge{margin-bottom:16px;}
.pdp-info h1{font-size:var(--text-heading-sm);font-weight:700;margin:0 0 12px;letter-spacing:-0.02em;}
.pdp-rating{display:flex;align-items:center;gap:8px;margin-bottom:20px;}
.pdp-rating svg{width:15px;height:15px;color:var(--color-signal-blue);}
.pdp-rating svg.star-empty{color:var(--color-hairline);}
.pdp-rating span{font-size:14px;color:var(--color-mist-gray);font-weight:600;}
.pdp-price{display:flex;align-items:center;gap:12px;margin-bottom:24px;}
.pdp-price .now{font-size:28px;font-weight:800;color:var(--color-ink-navy);}
.pdp-price .was{font-size:16px;color:var(--color-mist-gray);text-decoration:line-through;}
.pdp-desc{font-size:15px;line-height:1.7;color:var(--color-slate-gray);margin:0 0 28px;}

.pdp-section-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--color-slate-gray);margin-bottom:12px;}
.size-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;}
.size-chip{
  border:1px solid var(--color-hairline);background:var(--color-paper);border-radius:var(--radius-buttons);
  padding:9px 16px;font-size:14px;font-weight:600;color:var(--color-ink-navy);cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease, color .15s ease;
}
.size-chip:hover{border-color:var(--color-signal-blue);}
.size-chip.active{background:var(--color-ink-navy);color:#fff;border-color:var(--color-ink-navy);}

.qty-stepper{display:flex;align-items:center;border:1px solid var(--color-hairline);border-radius:var(--radius-buttons);overflow:hidden;width:fit-content;flex:none;}
.qty-stepper button{width:40px;height:44px;background:var(--color-pebble);border:none;font-size:18px;font-weight:700;color:var(--color-ink-navy);cursor:pointer;}
.qty-stepper button:hover{background:var(--color-hairline);}
.qty-stepper input{width:48px;height:44px;border:none;text-align:center;font-family:inherit;font-size:15px;font-weight:700;color:var(--color-ink-navy);background:var(--color-paper);}

.pdp-actions{display:flex;gap:16px;align-items:center;margin:28px 0;flex-wrap:wrap;}
.pdp-actions .product-actions{display:flex;gap:10px;flex:1;min-width:260px;margin-top:0;}
.pdp-actions .btn{padding:14px 24px;font-size:16px;}

.pdp-trust{display:flex;flex-direction:column;gap:10px;padding-top:24px;border-top:1px solid var(--color-hairline);}
.pdp-trust li{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--color-slate-gray);list-style:none;}
.pdp-trust svg{width:18px;height:18px;color:var(--color-signal-blue);flex:none;}

/* ---------- Cart page ---------- */
.cart-layout{display:grid;grid-template-columns:1fr 360px;gap:32px;align-items:start;margin:8px 0 88px;}
.cart-line{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--color-hairline);align-items:center;}
.cart-line:first-child{padding-top:0;}
.cart-line-media{width:90px;height:90px;border-radius:var(--radius-productcards);overflow:hidden;position:relative;flex:none;background:var(--color-pebble);}
.cart-line-media .swatch{position:absolute;inset:0;}
.cart-line-media .ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.cart-line-info{flex:1;min-width:0;}
.cart-line-info h3{font-size:15px;font-weight:600;margin:0 0 6px;}
.cart-line-info a{color:var(--color-ink-navy);}
.cart-line-info a:hover{color:var(--color-signal-blue);}
.cart-line-info .price{font-size:14px;color:var(--color-slate-gray);margin:0;}
.cart-line-variant{display:flex;gap:12px;font-size:12.5px;color:var(--color-slate-gray);margin:0 0 6px;}
.cart-line-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
.cart-line-total{font-size:16px;font-weight:800;color:var(--color-ink-navy);}
.cart-remove-btn{background:none;border:none;font-size:13px;font-weight:600;color:var(--color-mist-gray);cursor:pointer;padding:0;}
.cart-remove-btn:hover{color:var(--color-coral-magenta);}
.cart-qty-form{display:flex;align-items:center;}

.cart-summary{background:var(--color-paper);border-radius:var(--radius-productcards);padding:24px;box-shadow:var(--shadow-sm);position:sticky;top:96px;}
.cart-summary h2{font-size:18px;font-weight:700;margin:0 0 20px;}
.summary-row{display:flex;justify-content:space-between;font-size:14px;color:var(--color-slate-gray);margin-bottom:12px;}
.summary-row.total{font-size:17px;font-weight:800;color:var(--color-ink-navy);border-top:1px solid var(--color-hairline);padding-top:16px;margin-top:8px;}

.cart-empty{text-align:center;padding:80px 24px;}
.cart-empty svg{width:56px;height:56px;color:var(--color-mist-gray);margin:0 auto 20px;}
.cart-empty h2{font-size:22px;font-weight:700;margin:0 0 8px;color:var(--color-ink-navy);}
.cart-empty p{color:var(--color-slate-gray);margin:0 0 24px;}

@media (max-width: 968px){
  .pdp-grid{grid-template-columns:1fr;gap:32px;}
  .pdp-media{height:380px;}
  .cart-layout{grid-template-columns:1fr;}
  .cart-summary{position:static;}
}
@media (max-width: 560px){
  .cart-line{flex-wrap:wrap;}
  .cart-line-actions{flex-direction:row;justify-content:space-between;width:100%;}
}
@media (max-width: 400px){
  /* "Add to Cart" (with icon) + "Buy Now" sit right at the edge of their
     combined min-content width (nowrap labels, per .btn) exceeding the
     ~280px available on the smallest phones (320px) once the quantity
     stepper takes its own row — trimming padding/font here only, on the
     narrowest screens, keeps both on one line instead of them silently
     overflowing their pill past the edge of the screen. */
  .pdp-actions .btn{padding:13px 14px;font-size:14.5px;}
}

/* ---------- Blog post page (Style Notes article) ---------- */
.progress-bar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--color-signal-blue);z-index:200;}

.blogpost-head{max-width:820px;margin-bottom:28px;}
.blogpost-head .cat{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-deep-cobalt);background:#f3e7e2;padding:6px 14px;border-radius:999px;display:inline-block;margin-bottom:16px;}
.blogpost-head h1{font-size:40px;line-height:1.18;font-weight:700;margin:0 0 20px;letter-spacing:-0.02em;color:var(--color-ink-navy);overflow-wrap:anywhere;}

.blogpost-meta-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.blogpost-author{display:flex;align-items:center;gap:12px;min-width:0;}
.blogpost-author-avatar{width:40px;height:40px;border-radius:50%;background:#f3e7e2;border:1.5px solid var(--color-signal-blue);color:var(--color-deep-cobalt);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;flex:none;}
.blogpost-author-name{font-size:13.5px;font-weight:600;color:var(--color-ink-navy);}
.blogpost-author-sub{font-size:12px;color:var(--color-slate-gray);margin-top:1px;}

.blogpost-share{display:flex;align-items:center;gap:8px;flex:none;}
.blogpost-share-label{font-size:12px;color:var(--color-mist-gray);margin-right:2px;}
.blogpost-share-btn{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--color-hairline);background:var(--color-paper);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s;}
.blogpost-share-btn svg{width:15px;height:15px;stroke:var(--color-slate-gray);fill:none;stroke-width:2;}
.blogpost-share-btn:hover{background:#f3e7e2;border-color:var(--color-signal-blue);}
.blogpost-share-btn:hover svg{stroke:var(--color-deep-cobalt);}
.blogpost-share-btn.copied{background:#e3f3e6;border-color:#3f8a52;}
.blogpost-share-btn.copied svg{stroke:#3f8a52;}

.blogpost-hero{border-radius:22px;overflow:hidden;aspect-ratio:21/9;margin:0 0 46px;box-shadow:var(--shadow-sm-2);background:var(--color-pebble);}
.blogpost-hero img{width:100%;height:100%;object-fit:cover;display:block;}
.blogpost-hero-placeholder{background:linear-gradient(120deg,var(--color-signal-blue),#7f4418);}

.blogpost-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start;}

.blogpost-body{min-width:0;max-width:720px;}
.blogpost-lead{font-size:19px;line-height:1.65;font-weight:500;color:var(--color-ink-navy);margin:0 0 26px;padding-bottom:26px;border-bottom:1px solid var(--color-hairline);}
.blogpost-content p{font-size:16.5px;line-height:1.85;color:var(--color-slate-gray);margin:0 0 20px;}
.blogpost-content h2{display:flex;align-items:center;gap:12px;font-size:23px;line-height:1.3;font-weight:700;margin:44px 0 14px;color:var(--color-ink-navy);scroll-margin-top:90px;}
.blogpost-content h2::before{content:"";width:4px;height:24px;border-radius:2px;background:var(--color-signal-blue);flex-shrink:0;}
.blogpost-content h3{font-size:19px;font-weight:700;margin:28px 0 10px;color:var(--color-ink-navy);}
.blogpost-content strong,.blogpost-content b{color:var(--color-ink-navy);font-weight:600;}
.blogpost-content a{color:var(--color-deep-cobalt);text-decoration:underline;}
.blogpost-content ul,.blogpost-content ol{margin:0 0 20px;padding-left:24px;}
.blogpost-content li{font-size:16.5px;line-height:1.85;color:var(--color-slate-gray);margin-bottom:8px;}
.blogpost-content hr{border:none;border-top:1px solid var(--color-hairline);margin:36px 0;}
.blogpost-content .callout{background:#f3e7e2;border:1px solid #e8cdb8;border-left:4px solid var(--color-signal-blue);border-radius:14px;padding:24px 26px;margin:40px 0 28px;scroll-margin-top:90px;}
.blogpost-content .callout .label{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--color-deep-cobalt);margin-bottom:8px;}
.blogpost-content .callout h3{font-size:19px;margin:0 0 10px;font-weight:700;}
.blogpost-content .callout p{margin:0;font-size:15.5px;}

.blogpost-cta{margin-top:44px;border-radius:20px;padding:34px 30px;color:#fff;position:relative;overflow:hidden;background:linear-gradient(130deg,var(--color-signal-blue),#7f4418);}
.blogpost-cta::before{content:"";position:absolute;top:-70px;right:-70px;width:210px;height:210px;border-radius:50%;border:1px solid rgba(255,255,255,.22);}
.blogpost-cta h3{margin:0 0 8px;font-size:22px;font-weight:700;color:#fff;position:relative;}
.blogpost-cta p{margin:0 0 22px;font-size:14px;color:rgba(255,255,255,.9);line-height:1.6;position:relative;}
.blogpost-cta-actions{display:flex;gap:10px;flex-wrap:wrap;position:relative;}
.blogpost-cta-actions .btn-white{background:#fff;color:#7f4418;font-weight:700;font-size:13.5px;padding:13px 22px;border-radius:var(--radius-buttons);min-height:44px;display:inline-flex;align-items:center;}
.blogpost-cta-actions .btn-ghost-white{border:1.5px solid rgba(255,255,255,.55);color:#fff;font-weight:700;font-size:13.5px;padding:13px 22px;border-radius:var(--radius-buttons);min-height:44px;display:inline-flex;align-items:center;}
.blogpost-cta-actions .btn-ghost-white:hover{background:rgba(255,255,255,.12);}

.blogpost-aside{position:sticky;top:24px;display:flex;flex-direction:column;gap:18px;min-width:0;}
.blogpost-card{background:var(--color-paper);border:1px solid var(--color-hairline);border-radius:18px;box-shadow:var(--shadow-sm);padding:20px 20px 18px;}
.blogpost-card h4{margin:0 0 14px;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--color-mist-gray);font-weight:700;}

.blogpost-toc{display:flex;flex-direction:column;}
.blogpost-toc a{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:500;color:var(--color-slate-gray);padding:9px 10px;margin:0 -10px;border-radius:9px;}
.blogpost-toc a span{width:22px;height:22px;border-radius:50%;background:#f3e7e2;color:var(--color-deep-cobalt);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;}
.blogpost-toc a:hover{background:var(--color-cloud);color:var(--color-deep-cobalt);}

.blogpost-look{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--color-hairline);}
.blogpost-look:first-of-type{border-top:none;padding-top:0;}
.blogpost-look-img{width:54px;height:60px;border-radius:10px;flex:none;position:relative;overflow:hidden;}
.blogpost-look-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.blogpost-look-info{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px;}
.blogpost-look-name{font-size:13px;font-weight:600;line-height:1.35;color:var(--color-ink-navy);}
.blogpost-look-price{font-size:12.5px;font-weight:700;color:var(--color-deep-cobalt);white-space:nowrap;}
.blogpost-look-link{display:block;text-align:center;margin-top:10px;font-size:12.5px;font-weight:700;color:var(--color-deep-cobalt);}

.blogpost-news p{margin:0 0 14px;font-size:13px;color:var(--color-slate-gray);line-height:1.55;}
.blogpost-news form{display:flex;flex-direction:column;gap:10px;}
.blogpost-news input{width:100%;padding:12px 14px;border-radius:var(--radius-inputs);border:1.5px solid var(--color-hairline);background:var(--color-cloud);font-size:13px;font-family:inherit;}
.blogpost-news input:focus{outline:none;border-color:var(--color-signal-blue);background:#fff;}
.blogpost-news button{width:100%;min-height:44px;}

.blogpost-more{margin-top:80px;padding-top:48px;border-top:1px solid var(--color-hairline);}
.blogpost-more-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap;}
.blogpost-more-head h2{font-size:28px;margin:0 0 6px;font-weight:700;color:var(--color-ink-navy);}
.blogpost-more-head p{margin:0;font-size:14px;color:var(--color-slate-gray);}
.blogpost-more-head a{font-size:13.5px;font-weight:700;color:var(--color-deep-cobalt);}
.blogpost-more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
.blogpost-rel-card{display:block;background:var(--color-paper);border:1px solid var(--color-hairline);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-sm);transition:.2s;}
.blogpost-rel-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm-2);}
.blogpost-rel-img{aspect-ratio:16/9;position:relative;background:var(--color-pebble);}
.blogpost-rel-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.blogpost-rel-img-placeholder{background:linear-gradient(120deg,var(--color-signal-blue),#7f4418);}
.blogpost-rel-body{padding:20px 22px 22px;}
.blogpost-rel-tag{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-deep-cobalt);margin-bottom:8px;}
.blogpost-rel-title{font-size:19px;font-weight:700;line-height:1.35;margin-bottom:10px;color:var(--color-ink-navy);}
.blogpost-rel-foot{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--color-mist-gray);}
.blogpost-rel-foot .read{color:var(--color-deep-cobalt);font-weight:700;}

@media (max-width:960px){
  .blogpost-layout{grid-template-columns:minmax(0,1fr);}
  .blogpost-aside{position:static;}
  .blogpost-body{max-width:none;}
}
@media (max-width:640px){
  .blogpost-head h1{font-size:28px;}
  .blogpost-hero{aspect-ratio:16/10;border-radius:16px;margin-bottom:32px;}
  .blogpost-lead{font-size:17px;}
  .blogpost-content p,.blogpost-content li{font-size:16px;}
  .blogpost-content h2{font-size:20px;margin-top:34px;}
  .blogpost-cta{padding:26px 20px;}
  .blogpost-cta-actions .btn-white,.blogpost-cta-actions .btn-ghost-white{flex:1;justify-content:center;}
  .blogpost-more{margin-top:56px;padding-top:36px;}
  .blogpost-more-grid{grid-template-columns:minmax(0,1fr);}
  .blogpost-more-head h2{font-size:23px;}
}

/* ---------- Guest order "save this link" hero (order.php) ---------- */
.guest-hero{
  background:var(--color-paper);border:1px solid var(--color-hairline);border-radius:var(--radius-cards);
  box-shadow:var(--shadow-sm-2);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  overflow:hidden;margin-bottom:24px;
}
.guest-hero.simple{grid-template-columns:minmax(0,1fr);}
.guest-hero-main{
  padding:30px 32px;display:flex;gap:20px;align-items:flex-start;min-width:0;
  background:linear-gradient(135deg,#eef6ef 0%,#ffffff 75%);
}
.guest-hero-icon{
  width:52px;height:52px;border-radius:50%;background:#316b3a;flex:none;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 7px rgba(49,107,58,.12);margin-top:2px;
}
.guest-hero-icon svg{width:22px;height:22px;color:#fff;}
.guest-hero-text{min-width:0;}
.guest-chip{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#316b3a;background:#e6f2e8;padding:5px 12px;border-radius:999px;margin-bottom:12px;
}
.guest-hero-text h2{font-size:22px;line-height:1.25;font-weight:700;margin:0 0 8px;color:var(--color-ink-navy);letter-spacing:-0.01em;}
.guest-hero-text p{font-size:13.5px;line-height:1.65;color:var(--color-slate-gray);margin:0;}

.guest-hero-link{padding:28px 30px;background:var(--color-cloud);border-left:1px solid var(--color-hairline);display:flex;flex-direction:column;justify-content:center;min-width:0;}
.guest-hero.simple .guest-hero-link{border-left:none;background:var(--color-paper);padding:24px 28px;}
.guest-link-label{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-deep-cobalt);margin-bottom:8px;}
.guest-link-label svg{width:15px;height:15px;color:currentColor;}
.guest-link-note{font-size:13px;line-height:1.6;color:var(--color-slate-gray);margin:0 0 16px;}
.guest-link-note strong{color:var(--color-ink-navy);font-weight:600;}

.guest-link-field{
  display:flex;align-items:center;gap:8px;background:var(--color-paper);border:1.5px solid var(--color-hairline);
  border-radius:var(--radius-inputs);padding:6px 6px 6px 14px;margin-bottom:14px;
}
.guest-link-field input{flex:1;min-width:0;border:none;background:transparent;font-size:13px;color:var(--color-slate-gray);padding:8px 0;outline:none;}
.btn-guest-copy{
  background:var(--color-signal-blue);color:#fff;border:none;border-radius:8px;font-weight:700;font-size:13px;
  padding:0 16px;min-height:40px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  white-space:nowrap;transition:background .15s;flex:none;
}
.btn-guest-copy svg{width:14px;height:14px;}
.btn-guest-copy:hover{background:#7f4418;}

.guest-link-actions{display:flex;flex-wrap:wrap;gap:8px 20px;}
.guest-link-actions a{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--color-deep-cobalt);min-height:32px;}
.guest-link-actions a svg{width:15px;height:15px;}
.guest-link-actions a:hover{text-decoration:underline;}

@media (max-width:820px){
  .guest-hero{grid-template-columns:minmax(0,1fr);border-radius:18px;}
  .guest-hero-main{padding:22px 20px 18px;}
  .guest-hero-text h2{font-size:19px;}
  .guest-hero-link{padding:20px;border-left:none;border-top:1px solid var(--color-hairline);}
  .guest-hero.simple .guest-hero-link{padding:20px;}
  .guest-link-field{flex-direction:column;align-items:stretch;padding:10px;gap:8px;}
  .guest-link-field input{padding:6px 4px;}
  .btn-guest-copy{width:100%;min-height:44px;}
}