/* =========================================================================
   VERISCENTS — Materials for Modern Perfumery
   Shared design system
   ========================================================================= */

/* ----- Design tokens ----- */
:root{
  /* Core palette (reconciled from concept swatches + brand brief) */
  --carbon:      #16181a;   /* near-black */
  --carbon-soft: #23262a;
  --ink:         #1f2320;   /* primary text on ivory */
  --ivory:       #f4f0e7;   /* warm laboratory-paper background */
  --ivory-deep:  #ece5d7;   /* card / alt-section stock */
  --ivory-line:  #ddd5c4;
  --emerald:     #1f5b4c;   /* primary botanical / glass accent */
  --emerald-dk:  #164236;
  --verdigris:   #55766d;   /* soft secondary green */
  --amber:       #a56f38;   /* secondary accent — category coding, hovers */
  --amber-dk:    #8a5b2c;
  --copper:      #a8714a;
  --stone:       #7c7e78;   /* mineral gray — rules, secondary text */
  --stone-soft:  #9a9c94;
  --slate:       #5c6670;

  /* Category-code colors (per packaging spec) */
  --cat-aroma:  #2b2e30;    /* charcoal   */
  --cat-nat:    #1f5b4c;    /* verdigris  */
  --cat-base:   #a56f38;    /* amber      */
  --cat-solv:   #5c6670;    /* slate      */
  --cat-equip:  #7c7e78;    /* mineral    */
  --cat-edu:    #6b7684;    /* blue-gray  */

  /* Type */
  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --sans:  "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 1180px;
  --gutter: clamp(20px, 5vw, 56px);
  --radius: 3px;

  --shadow-sm: 0 1px 2px rgba(22,24,26,.06), 0 2px 8px rgba(22,24,26,.05);
  --shadow-md: 0 4px 14px rgba(22,24,26,.09), 0 14px 40px rgba(22,24,26,.08);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ----- Reset ----- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{animation-duration:.001ms!important;transition-duration:.001ms!important;} }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--ivory);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-family:var(--serif); font-weight:500; line-height:1.08; letter-spacing:-.01em; color:var(--ink); }
p{ margin:0; }
:focus-visible{ outline:2px solid var(--emerald); outline-offset:3px; border-radius:2px; }

/* ----- Layout helpers ----- */
.wrap{ width:100%; max-width:var(--measure); margin-inline:auto; padding-inline:var(--gutter); }
.eyebrow{
  font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--emerald);
}
.eyebrow--amber{ color:var(--amber); }
.eyebrow--stone{ color:var(--stone); }
.section-rule{ width:38px; height:2px; background:var(--emerald); border:0; margin:14px 0 0; }

/* ----- Buttons ----- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--sans); font-size:13px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  padding:14px 24px; border:1px solid transparent; border-radius:var(--radius);
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .1s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn--solid{ background:var(--emerald); color:#f7f4ec; }
.btn--solid:hover{ background:var(--emerald-dk); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--stone); }
.btn--ghost:hover{ border-color:var(--ink); background:rgba(31,91,76,.05); }
.btn--ghost-light{ background:transparent; color:#f4f0e7; border-color:rgba(244,240,231,.45); }
.btn--ghost-light:hover{ border-color:#f4f0e7; background:rgba(244,240,231,.08); }
.btn--amber{ background:var(--amber); color:#faf6ee; }
.btn--amber:hover{ background:var(--amber-dk); }
.btn--sm{ padding:10px 16px; font-size:12px; }
.link-arrow{ display:inline-flex; align-items:center; gap:.5em; font-weight:600; font-size:13.5px; letter-spacing:.06em; color:var(--emerald); text-transform:uppercase; }
.link-arrow svg{ transition:transform .2s var(--ease); }
.link-arrow:hover svg{ transform:translateX(4px); }

/* =========================================================================
   Announcement bar
   ========================================================================= */
.announce{
  background:var(--carbon); color:#d9d3c4;
  font-size:12.5px; letter-spacing:.04em; text-align:center;
}
.announce .wrap{ display:flex; align-items:center; justify-content:center; gap:10px; min-height:38px; padding-block:8px; }
.announce b{ color:#f4f0e7; font-weight:600; }
.announce .dot{ width:4px;height:4px;border-radius:50%;background:var(--emerald);flex:0 0 auto; }
.announce__msg{ display:none; align-items:center; gap:10px; }
.announce__msg.is-active{ display:flex; }

/* =========================================================================
   Header
   ========================================================================= */
.site-header{ position:sticky; top:0; z-index:60; background:rgba(244,240,231,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--ivory-line); }
.header-row{ display:flex; align-items:center; gap:22px; min-height:74px; }
.brand{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.brand__mark{ width:34px; height:34px; }
.brand__type{ display:flex; flex-direction:column; line-height:1; }
.brand__name{ font-family:var(--serif); font-weight:500; font-size:20px; letter-spacing:.34em; color:var(--ink); padding-left:.34em; }
.brand__tag{ font-family:var(--sans); font-size:8px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--emerald); margin-top:5px; }

.search{ flex:1 1 auto; max-width:420px; position:relative; display:flex; align-items:center; }
.search input{
  width:100%; font-family:var(--sans); font-size:14px; color:var(--ink);
  background:#fff; border:1px solid var(--ivory-line); border-radius:var(--radius);
  padding:11px 14px 11px 40px;
}
.search input::placeholder{ color:var(--stone); }
.search input:focus{ outline:none; border-color:var(--emerald); box-shadow:0 0 0 3px rgba(31,91,76,.1); }
.search svg{ position:absolute; left:13px; color:var(--stone); pointer-events:none; }

.mainnav{ display:flex; align-items:center; gap:26px; }
.mainnav a{ font-size:13.5px; font-weight:500; letter-spacing:.03em; color:var(--ink); position:relative; padding:6px 0; display:inline-flex; align-items:center; gap:5px; }
.mainnav a::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--emerald); transition:width .22s var(--ease); }
.mainnav a:hover{ color:var(--emerald); }
.mainnav a:hover::after{ width:100%; }
.mainnav svg{ opacity:.6; }

.header-actions{ display:flex; align-items:center; gap:16px; flex:0 0 auto; }
.icon-btn{ background:none; border:0; color:var(--ink); display:inline-flex; padding:6px; border-radius:50%; position:relative; }
.icon-btn:hover{ color:var(--emerald); }
.cart-count{ position:absolute; top:-2px; right:-4px; background:var(--emerald); color:#f4f0e7; font-family:var(--mono); font-size:9px; font-weight:600; min-width:15px; height:15px; padding:0 3px; border-radius:9px; display:grid; place-items:center; }
.hamburger{ display:none; }

/* =========================================================================
   Hero
   ========================================================================= */
.hero{ position:relative; background:var(--carbon); color:#f1ece0; overflow:hidden; }
.hero__grid{ display:grid; grid-template-columns:1.02fr 1.15fr; align-items:center; gap:36px; padding-block:clamp(48px,7vw,86px); }
.hero__eyebrow{ color:#c9a56f; }
.hero h1{
  font-size:clamp(42px,6.4vw,80px); font-weight:400; line-height:.98; letter-spacing:-.02em;
  margin:20px 0 24px; color:#f6f2e8;
}
.hero h1 em{ font-style:italic; color:#cfae7c; }
.hero__body{ max-width:44ch; color:#c9c4b7; font-size:17px; line-height:1.62; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.hero__art{ position:relative; }
.hero__art svg{ width:100%; height:auto; filter:drop-shadow(0 30px 50px rgba(0,0,0,.5)); }
.hero__fade{ position:absolute; inset:0; background:radial-gradient(120% 100% at 78% 40%, rgba(165,111,56,.12), transparent 55%); pointer-events:none; }

/* =========================================================================
   Value / category strip (icon row)
   ========================================================================= */
.strip{ background:var(--ivory); border-bottom:1px solid var(--ivory-line); }
.strip__grid{ display:grid; grid-template-columns:repeat(6,1fr); }
.strip__item{ padding:30px 20px; text-align:center; border-right:1px solid var(--ivory-line); transition:background .2s var(--ease); }
.strip__item:last-child{ border-right:0; }
.strip__item:hover{ background:#fff; }
.strip__item svg{ margin:0 auto 12px; color:var(--emerald); }
.strip__item h4{ font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); }
.strip__item p{ font-size:12.5px; color:var(--stone); margin-top:6px; line-height:1.45; }

/* =========================================================================
   Generic section scaffolding
   ========================================================================= */
.section{ padding-block:clamp(56px,8vw,96px); }
.section--ivory-deep{ background:var(--ivory-deep); }
.section--carbon{ background:var(--carbon); color:#e9e3d5; }
.section--carbon h2,.section--carbon h3{ color:#f4efe4; }
.section-head{ max-width:640px; margin-bottom:40px; }
.section-head h2{ font-size:clamp(28px,3.8vw,44px); font-weight:400; margin-top:14px; }
.section-head p{ margin-top:16px; color:var(--stone); font-size:16.5px; }
.section--carbon .section-head p{ color:#b6b0a1; }
.head-flex{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:36px; }

/* ----- Shop by category cards ----- */
.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--ivory-line); border:1px solid var(--ivory-line); border-radius:var(--radius); overflow:hidden; }
.cat-card{ background:var(--ivory); padding:30px 28px; min-height:172px; display:flex; flex-direction:column; justify-content:space-between; transition:background .22s var(--ease); position:relative; }
.cat-card:hover{ background:#fff; }
.cat-card__tab{ position:absolute; left:0; top:28px; width:4px; height:34px; background:var(--emerald); }
.cat-card h3{ font-family:var(--serif); font-size:23px; font-weight:500; }
.cat-card p{ font-size:13.5px; color:var(--stone); margin-top:8px; line-height:1.5; }
.cat-card__meta{ display:flex; align-items:center; justify-content:space-between; margin-top:22px; }
.cat-card__count{ font-family:var(--mono); font-size:11.5px; color:var(--stone); letter-spacing:.02em; }
.cat-card__arrow{ color:var(--emerald); transition:transform .2s var(--ease); }
.cat-card:hover .cat-card__arrow{ transform:translateX(4px); }

/* ----- Odor character chips ----- */
.odor-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.odor-chip{ display:flex; flex-direction:column; gap:6px; padding:20px 20px 18px; background:var(--ivory); border:1px solid var(--ivory-line); border-radius:var(--radius); text-align:left; transition:transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease); }
.odor-chip:hover{ transform:translateY(-3px); border-color:var(--emerald); box-shadow:var(--shadow-sm); }
.odor-chip__swatch{ width:26px; height:26px; border-radius:50%; margin-bottom:6px; }
.odor-chip b{ font-family:var(--serif); font-weight:500; font-size:18px; color:var(--ink); }
.odor-chip span{ font-size:12px; color:var(--stone); letter-spacing:.02em; }

/* =========================================================================
   Product card — the "specimen label" signature device
   ========================================================================= */
.prod-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.prod-card{ background:var(--ivory); border:1px solid var(--ivory-line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
.prod-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.prod-card__vis{ position:relative; aspect-ratio:1/.86; background:linear-gradient(160deg,#2a2d2f,#1a1c1e); display:grid; place-items:center; overflow:hidden; }
.prod-card__badges{ position:absolute; top:12px; left:12px; display:flex; gap:6px; z-index:2; }
.badge{ font-family:var(--sans); font-size:9.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; padding:4px 8px; border-radius:2px; background:rgba(244,240,231,.92); color:var(--carbon); }
.badge--new{ background:var(--emerald); color:#f4f0e7; }
.badge--nat{ background:var(--verdigris); color:#f4f0e7; }
.badge--limited{ background:var(--amber); color:#faf6ee; }
/* mini specimen bottle rendered per card */
.prod-card__vis .bottle{ width:52%; filter:drop-shadow(0 12px 18px rgba(0,0,0,.45)); }
.prod-card__body{ padding:16px 16px 18px; display:flex; flex-direction:column; flex:1; }
.prod-card__fam{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--amber); }
.prod-card__name{ font-family:var(--serif); font-size:19px; font-weight:500; margin:5px 0 2px; color:var(--ink); }
.prod-card__syn{ font-size:12.5px; color:var(--stone); }
.prod-card__desc{ font-size:13px; color:var(--slate); margin-top:9px; line-height:1.5; flex:1; }
.prod-card__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding-top:13px; border-top:1px solid var(--ivory-line); }
.prod-card__price{ font-family:var(--sans); font-size:14px; font-weight:600; color:var(--ink); }
.prod-card__price small{ font-weight:400; color:var(--stone); font-size:11px; }
.prod-card__sizes{ font-family:var(--mono); font-size:10.5px; color:var(--stone); }
.prod-card__cas{ position:absolute; bottom:10px; left:12px; font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:rgba(244,240,231,.55); z-index:2; }

/* =========================================================================
   Brand-difference / trust block
   ========================================================================= */
.diff{ display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center; }
.diff__list{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:rgba(244,240,231,.12); border:1px solid rgba(244,240,231,.14); border-radius:var(--radius); overflow:hidden; }
.diff__item{ background:var(--carbon); padding:22px 22px; }
.diff__item h4{ font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.05em; color:#f0eadd; display:flex; align-items:center; gap:9px; }
.diff__item h4 svg{ color:var(--verdigris); flex:0 0 auto; }
.diff__item p{ font-size:13px; color:#a9a394; margin-top:8px; line-height:1.5; }

/* =========================================================================
   Starter kits
   ========================================================================= */
.kit-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.kit-card{ position:relative; border:1px solid var(--ivory-line); border-radius:var(--radius); background:var(--ivory); overflow:hidden; display:flex; flex-direction:column; transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
.kit-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.kit-card__top{ padding:26px 24px 22px; background:linear-gradient(150deg,var(--emerald),var(--emerald-dk)); color:#eef2ee; }
.kit-card__top .n{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; opacity:.75; }
.kit-card__top h3{ color:#f4f5ef; font-size:22px; margin-top:8px; }
.kit-card--amber .kit-card__top{ background:linear-gradient(150deg,var(--amber),var(--amber-dk)); }
.kit-card--slate .kit-card__top{ background:linear-gradient(150deg,var(--slate),#404853); }
.kit-card__body{ padding:20px 24px 24px; display:flex; flex-direction:column; flex:1; }
.kit-card__body p{ font-size:13.5px; color:var(--stone); line-height:1.5; }
.kit-card__meta{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:18px; }
.kit-card__price{ font-weight:600; font-size:15px; }
.kit-card__count{ font-family:var(--mono); font-size:11px; color:var(--stone); }

/* =========================================================================
   Education / articles
   ========================================================================= */
.art-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.art-card{ border-top:2px solid var(--emerald); padding-top:20px; }
.art-card__tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--amber); }
.art-card h3{ font-size:20px; font-weight:500; margin:10px 0 8px; line-height:1.2; }
.art-card p{ font-size:13.5px; color:var(--stone); line-height:1.55; }
.art-card__read{ margin-top:14px; font-size:12.5px; font-weight:600; letter-spacing:.05em; color:var(--emerald); text-transform:uppercase; display:inline-flex; gap:6px; align-items:center; }

/* =========================================================================
   Pro-orders banner + newsletter
   ========================================================================= */
.pro{ display:grid; grid-template-columns:1.3fr .9fr; gap:40px; align-items:center; background:linear-gradient(135deg,#20241f,#14332a); border-radius:6px; padding:clamp(34px,5vw,56px); color:#eae4d6; }
.pro h2{ color:#f4efe4; font-size:clamp(26px,3.4vw,38px); font-weight:400; }
.pro p{ color:#b7b1a2; margin-top:14px; max-width:46ch; }
.pro__right{ justify-self:end; }

.news{ background:var(--carbon); color:#e9e3d5; }
.news__inner{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.news h2{ color:#f4efe4; font-size:clamp(26px,3.4vw,38px); font-weight:400; }
.news p{ color:#b0aa9b; margin-top:12px; max-width:44ch; }
.news__form{ display:flex; gap:10px; }
.news__form input{ flex:1; background:rgba(244,240,231,.06); border:1px solid rgba(244,240,231,.2); color:#f4f0e7; padding:14px 16px; border-radius:var(--radius); font-size:14px; }
.news__form input::placeholder{ color:#8f897b; }
.news__form input:focus{ outline:none; border-color:var(--verdigris); }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer{ background:#101210; color:#a9a394; font-size:13.5px; }
.footer-top{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:36px; padding-block:56px 44px; }
.footer-brand .brand__name{ color:#f2ede1; }
.footer-brand p{ margin-top:16px; max-width:34ch; line-height:1.6; color:#8f897b; }
.footer-col h5{ font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#d8d1c1; margin:0 0 14px; }
.footer-col a{ display:block; padding:5px 0; color:#a9a394; }
.footer-col a:hover{ color:#f2ede1; }
.footer-bottom{ border-top:1px solid rgba(244,240,231,.1); padding-block:22px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.footer-bottom .legal{ display:flex; gap:20px; flex-wrap:wrap; font-size:12.5px; }
.footer-bottom .pay{ display:flex; gap:8px; font-family:var(--mono); font-size:10px; letter-spacing:.05em; }
.pay span{ border:1px solid rgba(244,240,231,.18); padding:4px 8px; border-radius:2px; color:#9c968a; }

/* =========================================================================
   Reveal-on-scroll
   ========================================================================= */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width:1080px){
  .mainnav{ gap:20px; }
  .prod-grid{ grid-template-columns:repeat(3,1fr); }
  .strip__grid{ grid-template-columns:repeat(3,1fr); }
  .strip__item:nth-child(3n){ border-right:0; }
  .strip__item:nth-child(-n+3){ border-bottom:1px solid var(--ivory-line); }
}
@media (max-width:900px){
  .hero__grid{ grid-template-columns:1fr; gap:10px; }
  .hero__art{ order:-1; max-width:520px; }
  .diff{ grid-template-columns:1fr; gap:30px; }
  .odor-grid{ grid-template-columns:repeat(3,1fr); }
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .kit-grid,.art-grid{ grid-template-columns:1fr 1fr; }
  .pro,.news__inner{ grid-template-columns:1fr; }
  .pro__right{ justify-self:start; }
  .footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .search{ display:none; }
  .mainnav{ display:none; }
  .hamburger{ display:inline-flex; }
  .prod-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .strip__grid{ grid-template-columns:repeat(2,1fr); }
  .strip__item:nth-child(3n){ border-right:1px solid var(--ivory-line); }
  .strip__item:nth-child(even){ border-right:0; }
  .odor-grid{ grid-template-columns:repeat(2,1fr); }
  .cat-grid,.kit-grid,.art-grid,.prod-grid{ grid-template-columns:1fr; }
  .diff__list{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; gap:26px; }
  .hero h1{ font-size:clamp(38px,12vw,52px); }
}

/* ----- Mobile drawer ----- */
.drawer{ position:fixed; inset:0; z-index:80; visibility:hidden; }
.drawer.is-open{ visibility:visible; }
.drawer__scrim{ position:absolute; inset:0; background:rgba(16,18,16,.5); opacity:0; transition:opacity .25s var(--ease); }
.drawer.is-open .drawer__scrim{ opacity:1; }
.drawer__panel{ position:absolute; top:0; right:0; height:100%; width:min(320px,86vw); background:var(--ivory); box-shadow:var(--shadow-md); transform:translateX(100%); transition:transform .28s var(--ease); padding:24px; overflow:auto; }
.drawer.is-open .drawer__panel{ transform:none; }
.drawer__panel a{ display:block; padding:13px 0; border-bottom:1px solid var(--ivory-line); font-size:15px; font-weight:500; }
.drawer__close{ background:none;border:0;float:right;color:var(--ink);padding:6px; }

/* =========================================================================
   SHOP PAGE
   ========================================================================= */
.crumbs{ font-size:12.5px; color:var(--stone); padding-block:18px; display:flex; gap:8px; align-items:center; }
.crumbs a:hover{ color:var(--emerald); }
.crumbs svg{ opacity:.5; }

.shop-banner{ background:var(--carbon); color:#eee7d8; padding-block:44px; }
.shop-banner .eyebrow{ color:#c9a56f; }
.shop-banner h1{ font-size:clamp(32px,4.6vw,52px); font-weight:400; color:#f5f0e6; margin:12px 0 12px; }
.shop-banner p{ color:#aca596; max-width:60ch; }

.shop-layout{ display:grid; grid-template-columns:246px 1fr; gap:36px; padding-block:36px 80px; align-items:start; }
.filters{ position:sticky; top:96px; }
.filter-group{ border-bottom:1px solid var(--ivory-line); padding:18px 0; }
.filter-group:first-child{ padding-top:0; }
.filter-group h4{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin:0 0 14px; }
.facet{ display:flex; align-items:center; gap:10px; padding:5px 0; font-size:13.5px; color:var(--slate); cursor:pointer; }
.facet input{ accent-color:var(--emerald); width:15px; height:15px; }
.facet:hover{ color:var(--emerald); }
.facet .count{ margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--stone); }
.pill-row{ display:flex; flex-wrap:wrap; gap:7px; }
.pill{ font-size:12px; padding:6px 11px; border:1px solid var(--ivory-line); border-radius:100px; background:var(--ivory); color:var(--slate); cursor:pointer; transition:all .16s var(--ease); }
.pill:hover,.pill.is-on{ border-color:var(--emerald); color:var(--emerald); background:rgba(31,91,76,.06); }

.shop-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.shop-toolbar .result-count{ font-size:13.5px; color:var(--stone); }
.shop-toolbar .result-count b{ color:var(--ink); }
.sortbar{ display:flex; align-items:center; gap:10px; }
.sortbar select{ font-family:var(--sans); font-size:13px; border:1px solid var(--ivory-line); border-radius:var(--radius); padding:9px 12px; background:#fff; color:var(--ink); }
.filter-toggle{ display:none; }

@media (max-width:900px){
  .shop-layout{ grid-template-columns:1fr; }
  .filters{ position:static; display:none; }
  .filters.is-open{ display:block; border:1px solid var(--ivory-line); border-radius:var(--radius); padding:18px; margin-bottom:20px; }
  .filter-toggle{ display:inline-flex; }
}

/* =========================================================================
   PRODUCT PAGE
   ========================================================================= */
.pdp{ display:grid; grid-template-columns:1fr 1fr; gap:52px; padding-block:32px 60px; align-items:start; }
.pdp__media{ position:sticky; top:96px; }
.pdp__stage{ background:linear-gradient(160deg,#2a2d2f,#171a1b); border-radius:6px; aspect-ratio:1/1; display:grid; place-items:center; overflow:hidden; position:relative; }
.pdp__stage svg{ width:56%; filter:drop-shadow(0 22px 30px rgba(0,0,0,.5)); }
.pdp__badges{ position:absolute; top:16px; left:16px; display:flex; gap:8px; }
.pdp__thumbs{ display:flex; gap:10px; margin-top:12px; }
.pdp__thumb{ flex:1; aspect-ratio:1/1; border-radius:var(--radius); background:linear-gradient(160deg,#2a2d2f,#171a1b); border:1px solid var(--ivory-line); display:grid; place-items:center; cursor:pointer; opacity:.7; transition:opacity .18s; }
.pdp__thumb:hover,.pdp__thumb.is-on{ opacity:1; border-color:var(--emerald); }
.pdp__thumb svg{ width:46%; }

.pdp__fam{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--amber); }
.pdp h1{ font-size:clamp(32px,4vw,46px); font-weight:400; margin:8px 0 4px; }
.pdp__syn{ font-size:15px; color:var(--stone); }
.pdp__idrow{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 22px; }
.id-chip{ font-family:var(--mono); font-size:11.5px; color:var(--slate); background:var(--ivory-deep); border:1px solid var(--ivory-line); border-radius:100px; padding:6px 12px; }

.olf{ background:var(--ivory-deep); border:1px solid var(--ivory-line); border-radius:var(--radius); padding:20px 22px; margin:22px 0; }
.olf h3{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--emerald); margin:0 0 14px; }
.olf__grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; }
.olf__row{ display:flex; justify-content:space-between; font-size:13.5px; border-bottom:1px dotted var(--ivory-line); padding-bottom:7px; }
.olf__row span:first-child{ color:var(--stone); }
.olf__row span:last-child{ color:var(--ink); font-weight:500; }

.buybox{ border:1px solid var(--ivory-line); border-radius:6px; padding:22px; margin:22px 0; background:#fff; }
.size-opts{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.size-opt{ border:1px solid var(--ivory-line); border-radius:var(--radius); padding:10px 14px; cursor:pointer; text-align:left; min-width:96px; transition:all .16s var(--ease); background:var(--ivory); }
.size-opt:hover{ border-color:var(--stone); }
.size-opt.is-on{ border-color:var(--emerald); background:rgba(31,91,76,.06); box-shadow:0 0 0 1px var(--emerald) inset; }
.size-opt b{ display:block; font-family:var(--sans); font-size:14px; }
.size-opt span{ font-family:var(--mono); font-size:12px; color:var(--stone); }
.buy-row{ display:flex; gap:12px; align-items:stretch; }
.qty{ display:flex; align-items:center; border:1px solid var(--ivory-line); border-radius:var(--radius); }
.qty button{ width:40px; height:100%; background:none; border:0; font-size:18px; color:var(--slate); }
.qty input{ width:42px; text-align:center; border:0; font-family:var(--mono); font-size:15px; background:none; }
.stock{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--emerald); margin-bottom:16px; }
.stock .d{ width:8px;height:8px;border-radius:50%;background:var(--emerald); }

.pdp__section{ padding-block:34px; border-top:1px solid var(--ivory-line); }
.pdp__section h2{ font-size:24px; font-weight:500; margin-bottom:16px; }
.pdp__section p{ color:var(--slate); max-width:70ch; margin-bottom:12px; }
.spec-table{ width:100%; border-collapse:collapse; margin-top:6px; }
.spec-table td{ padding:11px 0; border-bottom:1px solid var(--ivory-line); font-size:14px; vertical-align:top; }
.spec-table td:first-child{ color:var(--stone); width:38%; }
.spec-table td:last-child{ color:var(--ink); font-family:var(--mono); font-size:13px; }
.doc-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.doc{ display:flex; align-items:center; gap:12px; border:1px solid var(--ivory-line); border-radius:var(--radius); padding:14px 16px; background:var(--ivory); transition:border-color .16s; }
.doc:hover{ border-color:var(--emerald); }
.doc svg{ color:var(--emerald); flex:0 0 auto; }
.doc b{ font-size:13.5px; font-weight:600; display:block; }
.doc span{ font-size:11.5px; color:var(--stone); font-family:var(--mono); }
.note{ background:rgba(165,111,56,.08); border-left:3px solid var(--amber); padding:14px 16px; border-radius:0 var(--radius) var(--radius) 0; font-size:13px; color:var(--slate); margin-top:18px; }

@media (max-width:900px){
  .pdp{ grid-template-columns:1fr; gap:28px; }
  .pdp__media{ position:static; }
  .doc-list{ grid-template-columns:1fr; }
  .olf__grid{ grid-template-columns:1fr; }
}

/* ===== 2026 Veriscents storefront refinement ===== */
:root{
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Inter", system-ui, sans-serif;
  --measure:1440px;
  --ivory:#f7f5f0;
  --ivory-deep:#efece5;
  --emerald:#194f43;
  --emerald-dk:#123b33;
  --ink:#151815;
}
.utility-bar{background:var(--emerald-dk);color:#f7f5f0;font-size:11px;text-transform:uppercase;letter-spacing:.11em}
.utility-bar__inner{max-width:1536px;margin:auto;padding:10px 6vw;display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center}
.utility-bar__inner span:nth-child(2){text-align:center}.utility-bar__inner a{text-align:right}
.site-header{position:relative;top:auto;background:rgba(250,249,246,.98);backdrop-filter:none}
.header-main{min-height:132px;display:grid;grid-template-columns:330px minmax(300px,630px) 330px;gap:46px;align-items:center;justify-content:space-between}
.brand--large{flex-direction:column;gap:5px;text-align:center}.brand--large .brand__mark{width:76px;height:54px}.brand--large .brand__name{font-family:var(--sans);font-size:27px;font-weight:400;letter-spacing:.42em;padding-left:.42em}.brand--large .brand__tag{font-size:9px;letter-spacing:.18em;margin-top:10px}
.search--wide{max-width:none}.search--wide input{height:48px;border-radius:28px;background:transparent;padding:0 58px 0 28px}.search--wide>svg{display:none}.search--wide button{position:absolute;right:18px;border:0;background:none;display:grid;place-items:center;padding:5px}
.header-actions--labels{gap:28px;justify-content:flex-end}.action-link{position:relative;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:4px;text-transform:uppercase;font-size:9px;letter-spacing:.08em}.action-link:hover{color:var(--emerald)}.action-link .cart-count{top:-7px;right:8px}.hamburger{display:none}
.mainnav--bar{min-height:52px;border-top:1px solid #ddd8cf;display:flex;justify-content:center;gap:70px}.mainnav--bar a{font-size:12px;text-transform:uppercase;letter-spacing:.09em;padding:16px 0}.mainnav--bar a::after{bottom:8px}.mainnav--bar span{font-size:13px;opacity:.65}
.hero--photo{min-height:478px;background:#201d17}.hero__photo{position:absolute;inset:0 0 0 30%;background:url('/assets/img/veriscents-hero-lab.jpg') center/cover no-repeat}.hero__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(31,28,21,.98) 0%,rgba(31,28,21,.91) 25%,rgba(31,28,21,.54) 48%,rgba(31,28,21,.08) 74%)}
.hero__grid--photo{position:relative;display:block;padding:38px var(--gutter) 56px}.hero__copy{max-width:540px}.hero--photo h1{font-size:clamp(54px,5vw,78px);line-height:.83;margin:18px 0 24px;letter-spacing:-.025em}.hero--photo .hero__eyebrow{font-family:var(--serif);font-size:16px;letter-spacing:.04em;text-transform:uppercase;color:#f3eee2}.hero--photo .hero__body{font-size:15px;max-width:48ch;color:#eee8dc}.hero--photo .hero__cta{gap:14px}.hero--photo .btn{padding:14px 22px;font-size:12px}.hero--photo .btn--solid{border:1px solid rgba(255,255,255,.28)}
.strip{background:#faf9f6}.strip__grid{max-width:1536px;margin:auto}.strip__item{padding:24px 28px}.strip__item svg{width:38px;height:38px;color:#111}.strip__item h4{font-size:12px}.strip__item p{font-size:12px;color:#222;max-width:145px;margin:6px auto 0}
.site-footer{background:#171a18;color:#d8d5cd}.site-footer .brand__name{color:#f6f3eb}.site-footer .brand__tag{color:#9eb5ad}
@media(max-width:1150px){.header-main{grid-template-columns:250px 1fr auto;gap:24px}.header-actions--labels{gap:16px}.action-link--wish{display:none}.mainnav--bar{gap:35px}.brand--large .brand__name{font-size:21px}}
@media(max-width:820px){.utility-bar__inner{display:flex;justify-content:center}.utility-bar__inner span:nth-child(2),.utility-bar__inner a{display:none}.header-main{min-height:90px;grid-template-columns:1fr auto}.brand--large{align-items:flex-start;flex-direction:row;text-align:left}.brand--large .brand__mark{width:46px;height:38px}.brand--large .brand__name{font-size:18px}.brand--large .brand__tag{font-size:7px;margin-top:6px}.search--wide{grid-column:1/-1;grid-row:2;margin-bottom:14px}.header-actions--labels .action-link{display:none}.hamburger{display:inline-flex}.mainnav--bar{display:none}.hero__photo{inset:0;background-position:62% center}.hero__shade{background:rgba(25,22,17,.72)}.hero__grid--photo{padding-block:48px}.hero--photo h1{font-size:55px}.strip__grid{grid-template-columns:repeat(2,1fr)}.strip__item{border-bottom:1px solid var(--ivory-line)}}