/* ==========================================================================
   Suvorya — Inner pages, new design system
   --------------------------------------------------------------------------
   Shared by every migrated inner page. Does NOT touch css/style.css, which
   still serves the pages not yet migrated (cart, checkout, account,
   order-confirmation, admin, the standalone product-*.html).

   Implements, from Suvorya Website Update/design-system-updates.md:
     §2  NavBar — compact inner-page header
     §4  Brand assets (real logo)
     §5  Kholic display face
     §7  Archetypes B (listing), C (product), D (narrative),
         G (saved items), H (contact)

   Tokens are duplicated from css/home-ds.css on purpose: each page loads
   exactly one stylesheet, so there is no cascade collision with style.css.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

@font-face{
  font-family:'Kholic';
  src:url('../fonts/kholic.otf') format('opentype');
  font-weight:400;
  font-display:swap;
}

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root{
  --ds-ink:#0b0f12;
  --ds-ink-soft:#232a2f;
  --ds-paper:#fbfaf4;
  --ds-paper-warm:#f5f2e9;
  --ds-sand:#ede9da;
  --ds-sand-line:#dad4c0;
  --ds-stone:#a29c8a;
  --ds-stone-dark:#5c574a;
  --ds-rouge:#2e3236;
  --ds-rouge-deep:#17191b;
  --ds-gold:#DCD6C2;
  --ds-gold-deep:#A8A085;
  --ds-ivory:#ffffff;

  --ds-surface-page:var(--ds-paper);
  --ds-surface-card:var(--ds-ivory);
  --ds-surface-sunken:var(--ds-paper-warm);
  --ds-text-primary:var(--ds-ink);
  --ds-text-secondary:var(--ds-stone-dark);
  --ds-text-muted:var(--ds-stone);
  --ds-border-hairline:var(--ds-sand-line);
  --ds-accent-primary:var(--ds-rouge);
  --ds-accent-primary-hover:var(--ds-rouge-deep);

  --ds-font-display:'Jost','Helvetica Neue',Arial,sans-serif;
  --ds-font-body:'Jost','Helvetica Neue',Arial,sans-serif;
  --ds-headline:'Kholic','Jost','Helvetica Neue',Arial,sans-serif;

  --ds-tracking-wide:0.06em;
  --ds-tracking-wider:0.14em;
  --ds-tracking-widest:0.22em;
  --ds-tracking-headline:0.11em;
  --ds-leading-tight:1.05;
  --ds-leading-body:1.65;

  --ds-space-1:4px;  --ds-space-2:8px;  --ds-space-3:12px; --ds-space-4:16px;
  --ds-space-5:24px; --ds-space-6:32px; --ds-space-7:48px; --ds-space-8:64px;
  --ds-space-9:96px;

  --ds-ease-editorial:cubic-bezier(.4,0,.2,1);
  --ds-duration-quick:220ms;
  --ds-duration-fade:600ms;

  --ds-container-max:1440px;
  --ds-container-pad:clamp(20px,5vw,64px);
  --ds-header-height:64px;
  --ds-text-h1:clamp(2.25rem,4vw,3.75rem);

  /* Legacy aliases — product.php and a few other pages carry inline styles
     written against css/style.css's variable names. Mapping them here means
     that markup keeps rendering correctly without editing any PHP or JS. */
  --ink:var(--ds-ink);
  --ink-soft:var(--ds-stone-dark);
  --ivory:var(--ds-paper);
  --cream:var(--ds-paper-warm);
  --line:var(--ds-border-hairline);
  --gold:var(--ds-gold);
  --gold-dark:var(--ds-gold-deep);
  --serif:var(--ds-headline);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;border-radius:0 !important;}
body{
  margin:0;
  background:var(--ds-surface-page);
  color:var(--ds-text-primary);
  font-family:var(--ds-font-body);
  font-size:16px;
  line-height:var(--ds-leading-body);
  -webkit-font-smoothing:antialiased;
  padding-top:var(--ds-header-height);   /* fixed header clearance */
}
img{max-width:100%;display:block;}
a{color:var(--ds-accent-primary);text-decoration:none;}
a:hover{color:var(--ds-accent-primary-hover);}
button{font-family:var(--ds-font-body);}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:var(--ds-leading-tight);}
ul,ol{margin:0;padding-left:1.15em;}

.ds-headline{
  font-family:var(--ds-headline);
  text-transform:uppercase;
  letter-spacing:var(--ds-tracking-headline);
  font-weight:400;
}
.ds-eyebrow,.kicker{
  display:block;font-size:12px;letter-spacing:var(--ds-tracking-widest);
  text-transform:uppercase;color:var(--ds-text-secondary);
}
.ds-wrap{
  max-width:var(--ds-container-max);margin:0 auto;
  padding-left:var(--ds-container-pad);padding-right:var(--ds-container-pad);
}
.ds-section{padding:var(--ds-space-8) 0;}

/* ── Page opening: breadcrumb + kicker + H1 (archetypes B,D,E,F,G,H) ──── */
.page-head{padding:var(--ds-space-7) 0 var(--ds-space-6);}
.breadcrumb{
  font-size:11px;letter-spacing:var(--ds-tracking-wider);text-transform:uppercase;
  color:var(--ds-text-muted);margin-bottom:var(--ds-space-5);
}
.breadcrumb a{color:var(--ds-text-muted);}
.breadcrumb a:hover{color:var(--ds-ink);}
.breadcrumb .sep{margin:0 var(--ds-space-2);}
/* Kholic by default here: shop.html sets #shopH1 via textContent and carries
   no class of its own, so the archetype opening supplies the house lockup. */
.page-head h1{
  font-family:var(--ds-headline);text-transform:uppercase;
  letter-spacing:var(--ds-tracking-headline);
  font-size:clamp(24px,3vw,38px);margin-top:var(--ds-space-3);
}
.page-intro{
  margin-top:var(--ds-space-5);font-size:16px;line-height:var(--ds-leading-body);
  color:var(--ds-text-secondary);max-width:680px;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.ds-btn{
  display:inline-block;padding:14px 34px;font-size:12px;
  letter-spacing:var(--ds-tracking-widest);text-transform:uppercase;
  background:var(--ds-ink);color:var(--ds-paper);border:1px solid var(--ds-ink);
  cursor:pointer;text-align:center;
  transition:background var(--ds-duration-quick) var(--ds-ease-editorial),
             color var(--ds-duration-quick) var(--ds-ease-editorial);
}
.ds-btn:hover{background:var(--ds-rouge-deep);color:var(--ds-paper);}
.ds-btn-secondary{background:transparent;color:var(--ds-ink);border-color:var(--ds-ink);}
.ds-btn-secondary:hover{background:var(--ds-ink);color:var(--ds-paper);}
.ds-btn[disabled]{opacity:.5;cursor:not-allowed;}

/* ══ §2 NavBar — compact inner-page header ═════════════════════════════ */
#siteHeader,header.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:1001;
  background:var(--ds-surface-card);
  box-shadow:0 1px 0 var(--ds-border-hairline);
}
.nav{
  max-width:var(--ds-container-max);margin:0 auto;
  padding:var(--ds-space-4) var(--ds-container-pad);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:var(--ds-space-7);
}
.nav-logo{justify-self:start;display:flex;align-items:center;}
.nav-logo img{height:22px;width:auto;}

.nav-links{
  display:flex;flex-wrap:nowrap;align-items:center;
  gap:var(--ds-space-5);min-width:0;justify-self:center;
}
.nav-links a,.nav-shop-btn{
  font-size:11.5px;line-height:1;letter-spacing:var(--ds-tracking-wide);
  text-transform:uppercase;color:var(--ds-ink);white-space:nowrap;
}
.nav-links a:hover,.nav-shop-btn:hover{color:var(--ds-gold-deep);}

.nav-icons{
  display:flex;align-items:center;gap:var(--ds-space-5);justify-self:end;
}
.nav-icons > a{
  font-size:11.5px;letter-spacing:var(--ds-tracking-wide);
  text-transform:uppercase;color:var(--ds-ink);white-space:nowrap;
}
.nav-icons > a:hover{color:var(--ds-gold-deep);}

/* Shop dropdown — search.js toggles .open on #navShop */
.nav-shop{position:relative;display:flex;align-items:center;}
.nav-shop-btn{
  all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--ds-font-body);font-size:11.5px;
  letter-spacing:var(--ds-tracking-wide);text-transform:uppercase;color:var(--ds-ink);
}
.nav-shop-arrow{font-size:9px;line-height:1;transition:transform var(--ds-duration-quick) var(--ds-ease-editorial);}
.nav-shop:hover .nav-shop-arrow,.nav-shop.open .nav-shop-arrow{transform:rotate(180deg);}
.nav-shop-dropdown{
  visibility:hidden;opacity:0;pointer-events:none;
  position:absolute;top:calc(100% + 14px);left:-16px;
  background:var(--ds-surface-card);border:1px solid var(--ds-border-hairline);
  min-width:210px;padding:var(--ds-space-2) 0;z-index:9999;
  transition:opacity var(--ds-duration-quick) var(--ds-ease-editorial),
             visibility var(--ds-duration-quick) var(--ds-ease-editorial);
}
.nav-shop-dropdown::before{content:'';position:absolute;top:-18px;left:0;right:0;height:18px;}
.nav-shop:hover .nav-shop-dropdown,.nav-shop.open .nav-shop-dropdown{
  visibility:visible;opacity:1;pointer-events:auto;
}
.nav-shop-dropdown a{
  display:block;padding:10px 22px;font-size:11.5px;
  letter-spacing:var(--ds-tracking-wide);text-transform:uppercase;
  color:var(--ds-ink) !important;white-space:nowrap;
}
.nav-shop-dropdown a:hover{background:var(--ds-paper-warm);}
.dropdown-divider{height:1px;background:var(--ds-border-hairline);margin:var(--ds-space-2) 14px;}

/* Account dropdown — driven by cart.js after session-check.php */
.nav-acct{position:relative;}
.nav-acct-btn{
  font-size:11.5px;letter-spacing:var(--ds-tracking-wide);text-transform:uppercase;
  color:var(--ds-ink);cursor:pointer;background:none;border:none;
  font-family:var(--ds-font-body);padding:0;white-space:nowrap;
}
.nav-acct-btn:hover{color:var(--ds-gold-deep);}
.nav-acct-dropdown{
  visibility:hidden;opacity:0;pointer-events:none;
  position:absolute;top:calc(100% + 12px);right:-16px;
  background:var(--ds-surface-card);border:1px solid var(--ds-border-hairline);
  min-width:200px;padding:var(--ds-space-2) 0;z-index:9999;
  transition:opacity var(--ds-duration-quick) var(--ds-ease-editorial),
             visibility var(--ds-duration-quick) var(--ds-ease-editorial);
}
.nav-acct-dropdown::before{content:'';position:absolute;top:-18px;left:0;right:0;height:18px;}
.nav-acct.is-authed:hover .nav-acct-dropdown{visibility:visible;opacity:1;pointer-events:auto;}
.nav-acct-greeting{
  padding:10px 22px;font-size:11px;color:var(--ds-text-muted);
  border-bottom:1px solid var(--ds-border-hairline);margin-bottom:var(--ds-space-1);
  letter-spacing:var(--ds-tracking-wide);text-transform:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px;
}
.nav-acct-dropdown a{
  display:block;padding:10px 22px;font-size:11.5px;
  letter-spacing:var(--ds-tracking-wide);text-transform:uppercase;
  color:var(--ds-ink) !important;white-space:nowrap;
}
.nav-acct-dropdown a:hover{background:var(--ds-paper-warm);}
.nav-acct-logout{
  all:unset;display:block;width:100%;box-sizing:border-box;
  padding:10px 22px;font-size:11.5px;letter-spacing:var(--ds-tracking-wide);
  text-transform:uppercase;color:var(--ds-ink);cursor:pointer;
  border-top:1px solid var(--ds-border-hairline);margin-top:var(--ds-space-1);
}
.nav-acct-logout:hover{background:var(--ds-paper-warm);}

.nav-cart-icon,.nav-wish-icon{position:relative;display:inline-flex;align-items:center;color:var(--ds-ink);}
.nav-cart-icon svg,.nav-wish-icon svg{width:18px;height:18px;display:block;}
.nav-cart-badge,.nav-wish-badge{
  position:absolute;top:-6px;right:-8px;min-width:15px;height:15px;padding:0 4px;
  border-radius:50% !important;background:var(--ds-ink);color:var(--ds-paper);
  font-size:9px;line-height:15px;text-align:center;
}
.nav-toggle{display:none;cursor:pointer;font-size:20px;color:var(--ds-ink);}
/* ══ Archetype B — Collection / listing (shop.html) ════════════════════
   Rebuilt to match Suvorya Website Update/Shop.dc.html: 250px checkbox
   sidebar + 1fr grid. The previous pill/dropdown filter bar and its
   .fpill* / .cat-opt / .price-range-* / .range-* rules are gone, along with
   the per-tile commerce buttons (.card-btns and friends) — the design's
   tile is image / name / price / swatch only. */

/* Page opening ------------------------------------------------------- */
.shop-head{padding:var(--ds-space-6) 0 0;}
.shop-head h1{
  font-family:var(--ds-headline);            /* Kholic retained by choice */
  text-transform:uppercase;letter-spacing:var(--ds-tracking-headline);
  font-weight:400;font-size:var(--ds-text-h1);
  margin:0 0 var(--ds-space-2);
}
.shop-intro{
  max-width:680px;font-size:16px;line-height:1.6;
  color:var(--ds-text-secondary);margin:0;
}
.crumb{
  font-size:11px;color:var(--ds-text-muted);
  margin-bottom:var(--ds-space-3);
}
.crumb a{color:var(--ds-text-muted);}
.crumb a:hover{color:var(--ds-ink);}

/* Layout ------------------------------------------------------------- */
.shop-layout{
  display:grid;grid-template-columns:250px 1fr;
  gap:var(--ds-space-7);align-items:start;
  padding:var(--ds-space-7) 0 var(--ds-space-9);
}

/* Filter aside ------------------------------------------------------- */
.filter-aside .filter-title{
  font-size:14px;font-weight:500;color:var(--ds-ink);
  text-transform:none;letter-spacing:0;
  padding-bottom:var(--ds-space-3);
  border-bottom:1px solid var(--ds-border-hairline);
}
.filter-group{
  border-bottom:1px solid var(--ds-border-hairline);
  padding:var(--ds-space-4) 0;
}
.filter-group-head,
details.filter-group > summary{
  display:flex;align-items:center;justify-content:space-between;
  font-size:15px;color:var(--ds-ink);cursor:pointer;
  list-style:none;
}
details.filter-group > summary::-webkit-details-marker{display:none;}
.filter-group .chev{font-size:11px;color:var(--ds-text-muted);}
details.filter-group[open] > summary .chev{transform:rotate(180deg);}
.filter-group .chev{
  display:inline-block;
  transition:transform var(--ds-duration-quick) var(--ds-ease-editorial);
}
.filter-body{
  display:flex;flex-direction:column;gap:14px;
  margin-top:var(--ds-space-4);
}
.filter-row{
  display:flex;align-items:center;gap:12px;
  font-size:14px;color:var(--ds-ink);cursor:pointer;margin:0;
}
.filter-row.is-disabled{color:var(--ds-text-muted);cursor:not-allowed;}
.filter-count{color:var(--ds-text-muted);}
.filter-note{
  font-size:12px;color:var(--ds-text-muted);
  line-height:1.5;margin:0;
}
/* Scoped to the aside so no other migrated page's controls change. */
.filter-aside input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  width:16px;height:16px;flex:0 0 16px;margin:0;cursor:pointer;
  border:1px solid var(--ds-ink);background:var(--ds-ivory);
}
.filter-aside input[type="checkbox"]:checked{
  background:var(--ds-ink);box-shadow:inset 0 0 0 2px var(--ds-ivory);
}
.filter-aside input[type="checkbox"]:disabled{
  border-color:var(--ds-border-hairline);cursor:not-allowed;
}

/* Grid column: min-width:0 so a long product name can't push the 4-up grid
   wider than its track. */
.shop-main{min-width:0;}

/* Toolbar ------------------------------------------------------------ */
.shop-toolbar{
  display:flex;align-items:center;justify-content:flex-end;
  gap:var(--ds-space-5);margin-bottom:var(--ds-space-5);flex-wrap:wrap;
}
.sort-wrap{
  display:flex;align-items:center;gap:var(--ds-space-3);
  font-size:14px;color:var(--ds-ink);white-space:nowrap;
}
.sort-wrap span{
  font-size:14px;letter-spacing:0;text-transform:none;
  color:var(--ds-ink);
}
.sort-wrap select{
  border:none;background:transparent;font-family:inherit;
  font-size:14px;color:var(--ds-ink);cursor:pointer;padding:0;
}
.results-count{
  font-size:14px;letter-spacing:0;
  color:var(--ds-text-secondary);white-space:nowrap;
}
.active-tag{
  display:inline-block;font-size:11px;letter-spacing:var(--ds-tracking-wide);
  text-transform:uppercase;background:var(--ds-paper-warm);color:var(--ds-ink);
  border:1px solid var(--ds-border-hairline);padding:5px 10px;
  margin:0 var(--ds-space-2) var(--ds-space-2) 0;
}
#activeTags{display:block;margin-bottom:var(--ds-space-4);}

/* Grid --------------------------------------------------------------- */
#productGrid.product-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--ds-space-7) 20px;
}
#noResults{font-size:15px;color:var(--ds-text-secondary);padding:var(--ds-space-6) 0;}
#noResults a{color:var(--ds-ink);text-decoration:underline;text-underline-offset:3px;}

/* Pagination --------------------------------------------------------- */
#shopPagination{
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:var(--ds-space-2);margin-top:var(--ds-space-8);
}
.pg-btn{
  min-width:40px;height:40px;padding:0;margin:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--ds-border-hairline);
  color:var(--ds-ink);font-family:var(--ds-font-body);font-size:13px;cursor:pointer;
}
.pg-btn:hover:not([disabled]){border-color:var(--ds-ink);}
.pg-btn.pg-active{background:var(--ds-ink);color:var(--ds-paper);border-color:var(--ds-ink);}
.pg-btn[disabled]{opacity:.4;cursor:not-allowed;}

/* ══ §1 ProductTile — shared by B, C (related), G ══════════════════════ */
.card{color:inherit;text-decoration:none;display:block;}
.card-img{position:relative;aspect-ratio:1/1;background:var(--ds-sand);overflow:hidden;}
.card-img img{width:100%;height:100%;object-fit:cover;display:block;}
/* hover-slide.js owns the hover motion now — no scale transform here. */
.card-img hover-slide{display:block;width:100%;height:100%;}
.card-tag{
  position:absolute;top:12px;left:12px;z-index:1;
  font-size:10px;text-transform:uppercase;letter-spacing:var(--ds-tracking-widest);
  padding:5px 10px;background:var(--ds-ink);color:var(--ds-paper);
}
.card h3{
  margin-top:18px;font-family:var(--ds-font-body);
  font-size:14px;font-weight:500;color:var(--ds-ink);line-height:1.4;
}
.card .price{margin-top:10px;font-size:13px;color:var(--ds-text-muted);}
.card .swatch-row{display:flex;gap:6px;margin-top:14px;}
.card .swatch{
  width:18px;height:18px;display:block;
  background:radial-gradient(circle at 32% 28%,#fff,var(--ds-gold) 55%,#8d7b52);
  border-radius:50% !important;
}
/* Keeps tile rhythm without implying a colour option the product lacks. */
.card .swatch--empty{visibility:hidden;}

/* ══ Archetype C — Product detail (product.php) ════════════════════════
   Rebuilt to match Product.dc.html: sticky info column, plain vertical
   image stack (no thumbnail strip), sticky buy column. */

.pdp-layout{
  display:grid;
  grid-template-columns:minmax(180px,1fr) minmax(0,2.2fr) minmax(180px,1fr);
  gap:var(--ds-space-6);align-items:start;
  padding:var(--ds-space-5) 0 var(--ds-space-9);
}
.pdp-col-info,.pdp-col-buy{
  position:sticky;top:96px;
  display:flex;flex-direction:column;
}

/* Info column -------------------------------------------------------- */
.pdp-title-row{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--ds-space-3);
}
.pdp-h1{
  font-family:var(--ds-headline);            /* Kholic retained by choice */
  text-transform:uppercase;letter-spacing:var(--ds-tracking-headline);
  font-size:24px;font-weight:400;color:var(--ds-ink);margin:0;
}
.pdp-wish{
  background:none;border:none;padding:0;cursor:pointer;
  color:var(--ds-ink);flex:0 0 auto;margin-top:4px;line-height:0;
}
.pdp-wish svg{width:18px;height:18px;display:block;fill:none;}
.pdp-wish.is-saved svg{fill:var(--ds-ink);}
.pdp-price{
  font-family:var(--ds-font-display);font-size:22px;
  color:var(--ds-ink);margin-top:var(--ds-space-2);
}
.pdp-tax{font-size:13px;color:var(--ds-text-muted);margin-top:var(--ds-space-3);}
.pdp-tax a{color:var(--ds-text-muted);text-decoration:underline;text-underline-offset:3px;}
.pdp-tax a:hover{color:var(--ds-ink);}
.pdp-desc{
  font-size:14px;color:var(--ds-text-secondary);
  line-height:var(--ds-leading-body);
  margin:var(--ds-space-5) 0 var(--ds-space-6);
}
details.pdp-acc{
  border-top:1px solid var(--ds-border-hairline);
  padding:var(--ds-space-4) 0;
}
details.pdp-acc:last-of-type{border-bottom:1px solid var(--ds-border-hairline);}
details.pdp-acc > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
  font-size:14px;color:var(--ds-ink);
}
details.pdp-acc > summary::-webkit-details-marker{display:none;}
details.pdp-acc > summary .chev{
  font-size:11px;color:var(--ds-text-muted);display:inline-block;
  transition:transform var(--ds-duration-quick) var(--ds-ease-editorial);
}
details.pdp-acc[open] > summary .chev{transform:rotate(180deg);}
.pdp-acc-body{
  font-size:13px;color:var(--ds-text-secondary);
  line-height:var(--ds-leading-body);padding-top:var(--ds-space-3);
}

/* Image stack -------------------------------------------------------- */
.pdp-stack{display:flex;flex-direction:column;gap:8px;}
.pdp-stack img{
  width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  background:var(--ds-sand);cursor:zoom-in;
}
.pdp-stack-first{position:relative;}
.pdp-complete{
  position:absolute;top:var(--ds-space-4);right:var(--ds-space-4);
  font-size:13px;color:var(--ds-ink);
  text-decoration:underline;text-underline-offset:4px;
  background:rgba(251,250,244,.82);padding:6px 12px;
}

/* Buy column --------------------------------------------------------- */
.pdp-colour-label,.pdp-length-label{
  font-size:14px;color:var(--ds-ink);margin-bottom:var(--ds-space-3);
}
.pdp-colour-tiles{display:flex;gap:8px;margin-bottom:var(--ds-space-6);flex-wrap:wrap;}
.pdp-colour-tile{
  width:56px;height:72px;padding:3px;cursor:pointer;
  border:1px solid var(--ds-border-hairline);background:none;
}
.pdp-colour-tile.is-active{border-color:var(--ds-ink);}
.pdp-colour-tile img{width:100%;height:100%;object-fit:cover;display:block;}

.pdp-pills{display:flex;gap:8px;margin-bottom:var(--ds-space-3);flex-wrap:wrap;}
.pdp-pill{
  flex:1;min-width:64px;padding:12px 0;text-align:center;font-size:12px;
  border:1px solid var(--ds-border-hairline);color:var(--ds-ink);
}
.pdp-pill.is-selected{background:var(--ds-ink);color:var(--ds-ivory);border-color:var(--ds-ink);}
/* No selectable size data exists — pills are reference-only, not controls. */
.pdp-pill.is-disabled{
  border-style:dashed;color:var(--ds-text-muted);cursor:not-allowed;
}
.pdp-note{
  font-size:12px;color:var(--ds-text-muted);
  line-height:1.5;margin:0 0 var(--ds-space-5);
}
.pdp-link{
  display:inline-block;font-size:13px;color:var(--ds-ink);
  text-decoration:underline;text-underline-offset:4px;
  margin-bottom:var(--ds-space-6);
}
.pdp-link.is-disabled{
  color:var(--ds-text-muted);text-decoration-style:dashed;cursor:not-allowed;
}

.pdp-trust{
  border:1px solid var(--ds-border-hairline);
  margin-bottom:var(--ds-space-5);
}
.pdp-trust-row{padding:var(--ds-space-4);}
.pdp-trust-row + .pdp-trust-row{border-top:1px solid var(--ds-border-hairline);}
.pdp-trust-row h4{
  font-size:13px;color:var(--ds-ink);margin:0 0 6px;
  font-weight:400;text-transform:none;letter-spacing:0;
}
.pdp-trust-row p{
  font-size:13px;color:var(--ds-text-secondary);
  line-height:var(--ds-leading-body);margin:0;
}

.pdp-cta{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:18px 20px;
  background:var(--ds-ink);color:var(--ds-ivory);border:none;
  font-family:inherit;font-size:14px;cursor:pointer;
  margin-bottom:var(--ds-space-4);
}
.pdp-cta:hover:not([disabled]){background:var(--ds-rouge-deep);}
.pdp-cta[disabled]{opacity:.5;cursor:not-allowed;}
.pdp-wa{
  display:flex;align-items:center;justify-content:center;
  width:100%;padding:16px 20px;box-sizing:border-box;
  border:1px solid var(--ds-ink);color:var(--ds-ink);
  font-size:12px;letter-spacing:var(--ds-tracking-widest);text-transform:uppercase;
  margin-bottom:var(--ds-space-4);
}
.pdp-wa:hover{background:var(--ds-ink);color:var(--ds-paper);}
/* Buy Now + Share are NOT in the mockup — retained by explicit choice, so
   they are styled as quiet secondaries beneath the design's two CTAs. */
.btn-buynow,.btn-share{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;box-sizing:border-box;padding:14px 20px;
  background:transparent;border:1px solid var(--ds-border-hairline);
  color:var(--ds-ink);font-family:var(--ds-font-body);
  font-size:12px;letter-spacing:var(--ds-tracking-wide);text-transform:uppercase;
  cursor:pointer;margin-bottom:var(--ds-space-3);
  transition:border-color var(--ds-duration-quick) var(--ds-ease-editorial);
}
.btn-buynow:hover:not([disabled]),.btn-share:hover{border-color:var(--ds-ink);}
.btn-buynow[disabled]{opacity:.5;cursor:not-allowed;}
.btn-share svg{flex-shrink:0;}

/* Quantity stepper (retained by choice — not in the mockup) */
.qty{display:flex;align-items:center;border:1px solid var(--ds-border-hairline);width:max-content;margin-bottom:var(--ds-space-4);}
.qty button{
  width:38px;height:38px;background:none;border:none;cursor:pointer;
  font-size:16px;color:var(--ds-ink);font-family:var(--ds-font-body);
}
.qty input,.qty span{
  min-width:46px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border-left:1px solid var(--ds-border-hairline);
  border-right:1px solid var(--ds-border-hairline);
  font-size:14px;color:var(--ds-ink);background:var(--ds-ivory);text-align:center;
}
.qty-label{font-size:14px;color:var(--ds-ink);margin-bottom:var(--ds-space-3);}

.stock-label{
  display:inline-block;font-size:11px;letter-spacing:var(--ds-tracking-widest);
  text-transform:uppercase;padding:5px 10px;margin-top:var(--ds-space-4);
}
.stock-in{background:var(--ds-surface-sunken);color:#2e7d32;border:1px solid #2e7d32;}
.stock-low{background:var(--ds-surface-sunken);color:#e65100;border:1px solid #e65100;}
.stock-out{background:var(--ds-surface-sunken);color:#c62828;border:1px solid #c62828;}

/* Related grid ------------------------------------------------------- */
.pdp-related{padding-bottom:var(--ds-space-9);}
.pdp-related h2{
  font-family:var(--ds-headline);text-transform:uppercase;
  letter-spacing:var(--ds-tracking-headline);
  font-size:26px;font-weight:400;margin:0 0 var(--ds-space-5);
}
.pdp-related-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ds-space-7) 20px;}

/* Lightbox ----------------------------------------------------------- */
#lightbox{
  display:none;position:fixed;inset:0;z-index:10001;
  background:var(--ds-paper);
  align-items:center;justify-content:center;
}
#lightbox.is-open{display:flex;}
#lightboxImg{
  max-width:82vw;max-height:88vh;object-fit:contain;cursor:zoom-in;
  transform:scale(1);
  transition:transform 400ms var(--ds-ease-editorial);
}
#lightboxImg.is-zoomed{transform:scale(1.8);cursor:zoom-out;}
.lb-close{
  position:absolute;top:var(--ds-space-5);right:var(--ds-space-6);
  background:none;border:none;cursor:pointer;color:var(--ds-ink);
  font-family:var(--ds-font-body);font-size:12px;
  letter-spacing:var(--ds-tracking-widest);text-transform:uppercase;
}
.lb-counter{
  position:absolute;top:var(--ds-space-5);left:var(--ds-space-6);
  font-size:12px;letter-spacing:var(--ds-tracking-widest);color:var(--ds-text-muted);
}
.lb-prev,.lb-next{
  position:absolute;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;
  font-size:24px;line-height:1;color:var(--ds-ink);padding:var(--ds-space-3);
}
.lb-prev{left:var(--ds-space-5);}
.lb-next{right:var(--ds-space-5);}
/* ══ Archetype D — Narrative / about ═══════════════════════════════════ */
.narrative-intro{max-width:760px;margin:0 auto;text-align:center;padding:var(--ds-space-8) 0;}
.narrative-intro h1{font-size:clamp(26px,3.4vw,42px);margin:var(--ds-space-4) 0 var(--ds-space-5);}
.narrative-intro .lead{font-size:17px;line-height:var(--ds-leading-body);color:var(--ds-text-secondary);}
.narrative-row{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--ds-space-8);
  align-items:center;padding:var(--ds-space-8) 0;
}
.narrative-row.is-reversed .narrative-media{order:2;}
.narrative-media{aspect-ratio:4/5;background:var(--ds-sand);overflow:hidden;}
.narrative-media img{width:100%;height:100%;object-fit:cover;}
.narrative-text h2{font-size:26px;margin:var(--ds-space-4) 0 var(--ds-space-5);}
.narrative-text p{font-size:15px;line-height:var(--ds-leading-body);color:var(--ds-text-secondary);}
.value-band{
  border-top:1px solid var(--ds-border-hairline);
  background:var(--ds-surface-sunken);padding:var(--ds-space-8) 0;
}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ds-space-7);text-align:center;}
.value-grid .ic{font-size:26px;line-height:1;color:var(--ds-ink);margin-bottom:var(--ds-space-4);}
.value-grid h4{
  font-family:var(--ds-headline);text-transform:uppercase;
  letter-spacing:var(--ds-tracking-headline);font-size:14px;font-weight:600;
  margin-bottom:var(--ds-space-3);
}
.value-grid p{font-size:13px;color:var(--ds-text-muted);max-width:30ch;margin:0 auto;}

/* ══ Legacy button classes ═════════════════════════════════════════════
   js/cart.js, wishlist.html and shop.html generate markup using .btn /
   .btn-gold / .btn-outline. Restyled in the new system rather than edited,
   so no business logic had to change. */
.btn{
  display:inline-block;padding:13px 28px;font-size:12px;
  letter-spacing:var(--ds-tracking-widest);text-transform:uppercase;
  background:var(--ds-ink);color:var(--ds-paper);border:1px solid var(--ds-ink);
  cursor:pointer;text-align:center;font-family:var(--ds-font-body);
  transition:background var(--ds-duration-quick) var(--ds-ease-editorial),
             color var(--ds-duration-quick) var(--ds-ease-editorial);
}
.btn:hover{background:var(--ds-rouge-deep);color:var(--ds-paper);}
.btn-gold{background:var(--ds-ink);color:var(--ds-paper);border-color:var(--ds-ink);}
.btn-gold:hover{background:var(--ds-rouge-deep);color:var(--ds-paper);}
.btn-outline{background:transparent;color:var(--ds-ink);border-color:var(--ds-ink);}
.btn-outline:hover{background:var(--ds-ink);color:var(--ds-paper);}
.btn[disabled]{opacity:.5;cursor:not-allowed;}

/* ══ Archetype G — Saved items (wishlist) ══════════════════════════════
   Class names below are emitted by wishlist.html's renderWishlist(). */
.wish-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--ds-space-7) 20px;padding-bottom:var(--ds-space-9);
}
.wish-card{position:relative;}
.wish-remove{
  position:absolute;top:12px;right:12px;z-index:2;
  width:28px;height:28px;background:var(--ds-ivory);border:1px solid var(--ds-border-hairline);
  color:var(--ds-ink);font-size:13px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.wish-remove:hover{background:var(--ds-ink);color:var(--ds-paper);}
.wish-card-img{aspect-ratio:1/1;background:var(--ds-sand);overflow:hidden;}
.wish-card-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--ds-duration-fade) var(--ds-ease-editorial);
}
.wish-card:hover .wish-card-img img{transform:scale(1.03);}
.wish-card-name{margin-top:18px;font-size:14px;font-weight:500;color:var(--ds-ink);line-height:1.4;}
.wish-card-price{margin-top:10px;font-size:13px;color:var(--ds-text-muted);}
.wish-card-actions{display:flex;flex-direction:column;gap:var(--ds-space-2);margin-top:var(--ds-space-4);}
.wish-card-actions .btn{width:100%;padding:11px 16px;}

.wish-empty{padding:var(--ds-space-9) 0;text-align:center;}
.wish-empty .ic{font-size:34px;color:var(--ds-stone);margin-bottom:var(--ds-space-4);}
.wish-empty p{font-size:15px;color:var(--ds-text-secondary);margin-bottom:var(--ds-space-6);}
.empty-state{padding:var(--ds-space-9) 0;text-align:center;}
.empty-state p{font-size:15px;color:var(--ds-text-secondary);margin-bottom:var(--ds-space-6);}

/* ══ Archetype E — Form / transaction (checkout.html) ══════════════════
   Payment page. Every class name here is preserved exactly as the original
   markup and JS emit them — .addr-card comes from loadSavedAddresses(),
   .summary-item from the order-summary renderer, and .pay-method.selected
   is toggled by the payment-method handler. No logic was changed. */
.checkout-grid{
  display:grid;grid-template-columns:1fr 380px;
  gap:var(--ds-space-7);padding:var(--ds-space-7) 0 var(--ds-space-9);
  align-items:start;
}
.checkout-form h2{
  font-family:var(--ds-headline);text-transform:uppercase;
  letter-spacing:var(--ds-tracking-headline);
  font-size:20px;font-weight:400;margin-bottom:var(--ds-space-5);
}
.checkout-form label{
  display:block;font-size:11px;letter-spacing:var(--ds-tracking-widest);
  text-transform:uppercase;color:var(--ds-text-secondary);
  margin:var(--ds-space-5) 0 var(--ds-space-2);
}
.checkout-form input,.checkout-form select{
  width:100%;box-sizing:border-box;padding:12px 14px;
  font-family:var(--ds-font-body);font-size:15px;color:var(--ds-ink);
  background:var(--ds-ivory);border:1px solid var(--ds-border-hairline);
}
.checkout-form input:focus,.checkout-form select:focus{
  outline:2px solid var(--ds-gold);outline-offset:-2px;border-color:var(--ds-ink);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--ds-space-4);}

/* Order summary */
.order-summary{
  background:var(--ds-surface-sunken);border:1px solid var(--ds-border-hairline);
  padding:var(--ds-space-6);position:sticky;top:100px;
}
.order-summary h3{
  font-family:var(--ds-headline);text-transform:uppercase;
  letter-spacing:var(--ds-tracking-headline);font-size:15px;font-weight:400;
  margin-bottom:var(--ds-space-5);padding-bottom:var(--ds-space-3);
  border-bottom:1px solid var(--ds-border-hairline);
}
.summary-item{display:flex;gap:12px;align-items:center;margin-bottom:14px;}
.summary-item img{width:56px;height:56px;object-fit:cover;background:var(--ds-sand);}
.summary-item-info{flex:1;font-size:13px;color:var(--ds-text-secondary);}
.summary-item-info strong{display:block;margin-bottom:3px;color:var(--ds-ink);font-weight:500;}
.summary-item-price{font-size:14px;color:var(--ds-ink);}
.summary-totals{
  border-top:1px solid var(--ds-border-hairline);
  margin-top:var(--ds-space-4);padding-top:var(--ds-space-4);
}
.summary-row{
  display:flex;justify-content:space-between;
  font-size:13px;color:var(--ds-text-secondary);margin-bottom:10px;
}
.summary-row.discount{color:#2e7d32;}
.summary-total{
  display:flex;justify-content:space-between;font-size:17px;color:var(--ds-ink);
  border-top:1px solid var(--ds-ink);padding-top:14px;margin-top:var(--ds-space-2);
}
.pay-btn{width:100%;margin-top:var(--ds-space-5);font-size:14px;padding:16px;}
#checkoutError{
  display:none;margin-top:var(--ds-space-4);padding:14px 18px;font-size:14px;
  background:var(--ds-surface-sunken);border:1px solid var(--ds-border-hairline);
  border-left:2px solid #8b2020;color:#8b2020;
}

/* Payment methods */
.pay-methods{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:var(--ds-space-5);}
.pay-method{
  border:1px solid var(--ds-border-hairline);padding:16px;cursor:pointer;position:relative;
  transition:border-color var(--ds-duration-quick) var(--ds-ease-editorial),
             background var(--ds-duration-quick) var(--ds-ease-editorial);
}
.pay-method input{position:absolute;opacity:0;width:0;height:0;}
.pay-method-label{display:flex;flex-direction:column;gap:4px;cursor:pointer;}
.pay-method-title{font-size:14px;font-weight:500;color:var(--ds-ink);}
.pay-method-sub{font-size:12px;color:var(--ds-text-muted);}
.pay-method.selected{border-color:var(--ds-ink);background:var(--ds-surface-card);}
.pay-method.selected .pay-method-title{color:var(--ds-ink);}
.cod-note{
  display:none;margin-top:12px;padding:12px 16px;font-size:13px;
  line-height:var(--ds-leading-body);color:var(--ds-text-secondary);
  background:var(--ds-surface-sunken);border-left:2px solid var(--ds-ink);
}

/* Saved address cards — markup from loadSavedAddresses() */
.addr-card{
  border:1px solid var(--ds-border-hairline);padding:14px 16px;
  margin-bottom:10px;cursor:pointer;position:relative;
  transition:border-color var(--ds-duration-quick) var(--ds-ease-editorial);
}
.addr-card input[type=radio]{position:absolute;opacity:0;width:0;height:0;}
.addr-card.selected{border-color:var(--ds-ink);background:var(--ds-surface-card);}
.addr-card-name{font-size:14px;font-weight:500;color:var(--ds-ink);margin-bottom:3px;}
.addr-card-detail{font-size:13px;color:var(--ds-text-secondary);line-height:1.5;}
.addr-card-badge{
  font-size:10px;text-transform:uppercase;letter-spacing:var(--ds-tracking-widest);
  background:var(--ds-ink);color:var(--ds-paper);padding:2px 8px;
  margin-left:8px;vertical-align:middle;
}
#checkoutFormFields{display:none;}

/* Coupon */
.coupon-wrap{
  margin-top:14px;padding-top:14px;
  border-top:1px solid var(--ds-border-hairline);
}
.coupon-label{
  font-size:11px;letter-spacing:var(--ds-tracking-widest);text-transform:uppercase;
  color:var(--ds-text-secondary);margin-bottom:var(--ds-space-2);
}
.coupon-row{display:flex;gap:8px;}
.coupon-row input{
  flex:1;padding:10px 12px;font-family:var(--ds-font-body);font-size:14px;
  color:var(--ds-ink);background:var(--ds-ivory);
  border:1px solid var(--ds-border-hairline);
  text-transform:uppercase;letter-spacing:var(--ds-tracking-wide);
}
.coupon-row input:focus{outline:2px solid var(--ds-gold);outline-offset:-2px;}
.coupon-row button{
  padding:10px 16px;background:var(--ds-ink);color:var(--ds-paper);border:none;
  font-family:var(--ds-font-body);font-size:11px;
  letter-spacing:var(--ds-tracking-widest);text-transform:uppercase;
  cursor:pointer;white-space:nowrap;
}
.coupon-row button:hover{background:var(--ds-rouge-deep);}
.coupon-msg{font-size:12px;margin-top:6px;min-height:18px;}
.coupon-msg.ok{color:#2e7d32;}
.coupon-msg.err{color:#b71c1c;}

@media (max-width:860px){.checkout-grid{grid-template-columns:1fr;}}
@media (max-width:480px){.pay-methods{grid-template-columns:1fr;}}

/* ══ Archetype F — Account / gated state (account.html) ════════════════
   Class names are preserved exactly: the OTP step machine toggles
   .otp-step.active, and loadOrders() generates the .order-* markup. */
.account-wrap{max-width:480px;margin:0 auto;padding-bottom:var(--ds-space-9);}

/* OTP sign-in */
.otp-step{display:none;}
.otp-step.active{display:block;}
.otp-title{
  font-family:var(--ds-headline);text-transform:uppercase;
  letter-spacing:var(--ds-tracking-headline);
  font-size:20px;font-weight:400;margin-bottom:var(--ds-space-2);
}
.otp-sub{
  font-size:14px;color:var(--ds-text-secondary);
  line-height:var(--ds-leading-body);margin-bottom:var(--ds-space-6);
}
.otp-label{
  display:block;font-size:11px;letter-spacing:var(--ds-tracking-widest);
  text-transform:uppercase;color:var(--ds-text-secondary);
  margin:var(--ds-space-5) 0 var(--ds-space-2);
}
.otp-input{
  width:100%;box-sizing:border-box;padding:13px 16px;
  font-family:var(--ds-font-body);font-size:16px;color:var(--ds-ink);
  background:var(--ds-ivory);border:1px solid var(--ds-border-hairline);
}
.otp-input:focus{outline:2px solid var(--ds-gold);outline-offset:-2px;border-color:var(--ds-ink);}
.otp-code-wrap{display:flex;gap:10px;align-items:center;}
.otp-code-wrap .otp-input{flex:1;}
.otp-resend{
  background:none;border:none;padding:0;cursor:pointer;white-space:nowrap;
  font-family:var(--ds-font-body);font-size:13px;color:var(--ds-text-secondary);
  text-decoration:underline;text-underline-offset:3px;
}
.otp-resend:hover{color:var(--ds-ink);}
.otp-resend:disabled{opacity:.4;cursor:default;text-decoration:none;}
.otp-back{
  background:none;border:none;padding:0;cursor:pointer;
  display:flex;align-items:center;gap:4px;margin-bottom:var(--ds-space-5);
  font-family:var(--ds-font-body);font-size:13px;color:var(--ds-text-secondary);
}
.otp-back:hover{color:var(--ds-ink);}
.auth-btn{width:100%;margin-top:var(--ds-space-5);}
.auth-msg{
  display:none;padding:13px 16px;font-size:14px;margin-top:var(--ds-space-4);
  border:1px solid var(--ds-border-hairline);background:var(--ds-surface-sunken);
}
.auth-msg.error{border-left:2px solid #8b2020;color:#8b2020;}
.auth-msg.success{border-left:2px solid #2d6a22;color:#2d6a22;}

/* Dashboard */
#dashboard{display:none;}
.dash-header{
  display:flex;justify-content:space-between;align-items:center;
  gap:var(--ds-space-4);margin-bottom:var(--ds-space-6);
}
.dash-header h2{
  font-family:var(--ds-headline);text-transform:uppercase;
  letter-spacing:var(--ds-tracking-headline);font-size:20px;font-weight:400;margin:0;
}
.dash-greeting{font-size:14px;color:var(--ds-text-secondary);margin-bottom:var(--ds-space-1);}
.dash-sub{font-size:13px;color:var(--ds-text-muted);}

/* Order cards — markup generated by loadOrders() */
.order-card{
  border:1px solid var(--ds-border-hairline);
  padding:18px 20px;margin-bottom:14px;background:var(--ds-surface-card);
}
.order-card-top{
  display:flex;justify-content:space-between;align-items:center;
  gap:var(--ds-space-3);margin-bottom:var(--ds-space-2);
}
.order-id{font-size:12px;color:var(--ds-text-muted);letter-spacing:var(--ds-tracking-wide);}
.order-status{
  font-size:10px;text-transform:uppercase;letter-spacing:var(--ds-tracking-widest);
  padding:4px 10px;border:1px solid currentColor;color:#2d6a22;
}
.order-status.shipped{color:#1a56db;}
.order-status.delivered{color:#1a6b22;}
.order-status.cancelled{color:#8b2020;}
.order-items{font-size:14px;color:var(--ds-ink);margin-bottom:var(--ds-space-1);}
.order-meta{font-size:13px;color:var(--ds-text-muted);}
.order-tracking{
  margin-top:var(--ds-space-3);padding:12px 14px;
  background:var(--ds-surface-sunken);border-left:2px solid var(--ds-ink);
  font-size:13px;
}
.order-tracking .track-label{
  font-size:10px;text-transform:uppercase;letter-spacing:var(--ds-tracking-widest);
  color:var(--ds-text-secondary);margin-bottom:var(--ds-space-1);
}
.order-tracking .track-number{
  font-size:15px;color:var(--ds-ink);letter-spacing:var(--ds-tracking-wide);
}
.order-tracking .track-courier{font-size:12px;color:var(--ds-text-muted);margin-top:2px;}
.no-orders{text-align:center;padding:var(--ds-space-8) 0;color:var(--ds-text-secondary);}
.no-orders a{color:var(--ds-ink);text-decoration:underline;text-underline-offset:3px;}

/* ══ Cart (cart.html) ══════════════════════════════════════════════════
   js/cart.js builds the rows and is shared with checkout.html and the
   standalone product pages, so it is NOT edited. Its inline styles resolve
   through the legacy variable aliases declared at the top of this file
   (--line, --cream, --ink-soft, --gold-dark). */
.cart-layout{max-width:760px;padding-bottom:var(--ds-space-9);}
#cartItems > div{border-bottom-color:var(--ds-border-hairline) !important;}
#cartItems h3{font-family:var(--ds-font-body);font-size:15px;font-weight:500;color:var(--ds-ink);}
/* The line total carries an inline font-family:'Playfair Display' from
   cart.js. Playfair is no longer loaded, so without this it falls back to a
   system serif and clashes with Jost. Inline styles need !important. */
#cartItems [style*="Playfair"]{font-family:var(--ds-font-body) !important;}
#cartSummary{margin-top:var(--ds-space-5);}
.cart-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 0;font-size:14px;color:var(--ds-text-secondary);
  border-top:1px solid var(--ds-border-hairline);
}
.cart-row:first-child{border-top:none;}
.cart-row--total{
  font-size:18px;color:var(--ds-ink);
  border-top:1px solid var(--ds-ink);margin-bottom:var(--ds-space-6);
}
.cart-checkout{display:block;width:100%;text-align:center;}
.cart-continue{
  display:block;text-align:center;margin-top:var(--ds-space-4);
  font-size:13px;color:var(--ds-text-secondary);
  text-decoration:underline;text-underline-offset:3px;
}
.cart-continue:hover{color:var(--ds-ink);}

/* ══ Order confirmation (order-confirmation.html) ══════════════════════ */
.confirm-box{
  max-width:580px;margin:0 auto;text-align:center;
  padding:var(--ds-space-9) 0 var(--ds-space-10);
}
.confirm-icon{
  width:56px;height:56px;margin:0 auto var(--ds-space-6);
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--ds-ink);color:var(--ds-ink);font-size:24px;
}
.confirm-box h1{font-size:28px;margin-bottom:var(--ds-space-4);}
.confirm-box p{
  font-size:16px;line-height:var(--ds-leading-body);
  color:var(--ds-text-secondary);margin-bottom:var(--ds-space-2);
}
.confirm-box .confirm-note{font-size:14px;margin-top:var(--ds-space-4);}
.payment-id{
  background:var(--ds-surface-sunken);border:1px solid var(--ds-border-hairline);
  padding:12px 20px;font-size:13px;color:var(--ds-text-secondary);
  margin:var(--ds-space-5) 0;
  letter-spacing:var(--ds-tracking-wide);
}
.confirm-actions{
  display:flex;gap:var(--ds-space-4);justify-content:center;
  margin-top:var(--ds-space-6);flex-wrap:wrap;
}

/* ══ Archetype H — Contact ═════════════════════════════════════════════ */
.contact-layout{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--ds-space-8);
  align-items:start;padding-bottom:var(--ds-space-9);
}
.field{margin-bottom:var(--ds-space-5);}
.field label{
  display:block;font-size:11px;letter-spacing:var(--ds-tracking-widest);
  text-transform:uppercase;color:var(--ds-text-secondary);margin-bottom:var(--ds-space-2);
}
.field input,.field textarea,.field select{
  width:100%;padding:13px 15px;font-family:var(--ds-font-body);font-size:14px;
  color:var(--ds-ink);background:var(--ds-ivory);border:1px solid var(--ds-border-hairline);
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:2px solid var(--ds-gold);outline-offset:-2px;
}
.contact-detail{margin-bottom:var(--ds-space-6);}
.contact-detail h4{
  font-size:11px;letter-spacing:var(--ds-tracking-widest);text-transform:uppercase;
  color:var(--ds-text-secondary);margin-bottom:var(--ds-space-2);
}
.contact-detail p,.contact-detail a{font-size:15px;color:var(--ds-ink);}
.form-msg{font-size:13px;margin-top:var(--ds-space-3);}
.form-msg.error{color:#8b2020;}
.form-msg.success{color:#2d6a22;}

.form-alert{
  padding:var(--ds-space-4) var(--ds-space-5);margin-bottom:var(--ds-space-5);
  font-size:14px;border:1px solid var(--ds-border-hairline);
}
.form-alert.is-success{border-left:2px solid #2d6a22;color:#2d6a22;background:var(--ds-surface-sunken);}
.form-alert.is-error{border-left:2px solid #8b2020;color:#8b2020;background:var(--ds-surface-sunken);}
.contact-form .btn{margin-top:var(--ds-space-2);}
.contact-info-title{
  font-size:16px;margin-bottom:var(--ds-space-6);
  padding-bottom:var(--ds-space-3);border-bottom:1px solid var(--ds-border-hairline);
}
.contact-info-title:not(:first-child){margin-top:var(--ds-space-8);}
.contact-copy{font-size:14px;line-height:var(--ds-leading-body);color:var(--ds-text-secondary);}

/* ══ Prose — policy / legal pages ══════════════════════════════════════ */
.prose{max-width:760px;padding-bottom:var(--ds-space-9);}
.prose h2{
  font-family:var(--ds-headline);text-transform:uppercase;
  letter-spacing:var(--ds-tracking-headline);
  font-size:18px;margin:var(--ds-space-7) 0 var(--ds-space-4);
}
.prose h3{font-size:15px;font-weight:500;margin:var(--ds-space-5) 0 var(--ds-space-3);color:var(--ds-ink);}
.prose p,.prose li{font-size:15px;line-height:var(--ds-leading-body);color:var(--ds-text-secondary);}
.prose p{margin-bottom:var(--ds-space-4);}
.prose li{margin-bottom:var(--ds-space-2);}
.prose a{color:var(--ds-ink);text-decoration:underline;text-underline-offset:3px;}
.prose strong{color:var(--ds-ink);font-weight:500;}
.policy-section{margin-bottom:var(--ds-space-7);}
.policy-section h2{
  font-family:var(--ds-headline);text-transform:uppercase;
  letter-spacing:var(--ds-tracking-headline);font-size:18px;
  margin:0 0 var(--ds-space-4);padding-bottom:var(--ds-space-3);
  border-bottom:1px solid var(--ds-border-hairline);
}
.policy-section p{color:var(--ds-text-secondary);margin-bottom:var(--ds-space-3);}
.policy-section ul{list-style:none;padding:0;margin:0 0 var(--ds-space-3);}
.policy-section ul li{
  position:relative;padding:var(--ds-space-2) 0 var(--ds-space-2) 20px;
  color:var(--ds-text-secondary);line-height:var(--ds-leading-body);
  border-bottom:1px solid var(--ds-border-hairline);margin:0;
}
.policy-section ul li::before{
  content:'\2726';position:absolute;left:0;top:11px;
  color:var(--ds-gold-deep);font-size:9px;
}
.policy-section ul li:last-child{border-bottom:none;}

.policy-contact{
  background:var(--ds-surface-sunken);border:1px solid var(--ds-border-hairline);
  padding:var(--ds-space-6);margin-top:var(--ds-space-7);
}
.policy-contact h3{
  font-family:var(--ds-headline);text-transform:uppercase;
  letter-spacing:var(--ds-tracking-headline);font-size:16px;
  margin-bottom:var(--ds-space-4);
}
.policy-contact a{color:var(--ds-ink);text-decoration:underline;text-underline-offset:3px;}
.contact-row{
  display:flex;align-items:center;gap:var(--ds-space-3);
  margin-bottom:var(--ds-space-2);font-size:15px;color:var(--ds-text-secondary);
}
.contact-row .ic{color:var(--ds-gold-deep);flex:0 0 auto;}

.shipping-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ds-space-4);margin-bottom:var(--ds-space-5);}
.shipping-card{
  background:var(--ds-surface-card);border:1px solid var(--ds-border-hairline);
  padding:var(--ds-space-5);
}
.shipping-card h3{font-size:14px;font-weight:500;color:var(--ds-ink);margin-bottom:var(--ds-space-2);}
.shipping-card p{font-size:13px;color:var(--ds-text-muted);margin:0;}
@media (max-width:760px){.shipping-cards{grid-template-columns:1fr;}}
.policy-highlight{
  background:var(--ds-surface-sunken);border-left:2px solid var(--ds-ink);
  padding:var(--ds-space-5) var(--ds-space-6);margin-bottom:var(--ds-space-5);
}
.policy-highlight p{margin:0;color:var(--ds-ink);}
.prose table{width:100%;border-collapse:collapse;margin-bottom:var(--ds-space-5);}
.prose th,.prose td{
  text-align:left;padding:var(--ds-space-3) var(--ds-space-4);
  border-bottom:1px solid var(--ds-border-hairline);font-size:14px;
}
.prose th{
  font-weight:500;color:var(--ds-ink);font-size:11px;
  letter-spacing:var(--ds-tracking-widest);text-transform:uppercase;
}
.prose td{color:var(--ds-text-secondary);}

/* ══ Footer ════════════════════════════════════════════════════════════ */
.site-footer{background:var(--ds-ink);color:var(--ds-paper);padding:var(--ds-space-8) 0 var(--ds-space-6);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--ds-space-7);}
.footer-brand img{height:22px;width:auto;margin-bottom:var(--ds-space-4);}
.footer-brand p{font-size:13px;color:var(--ds-paper);opacity:.7;max-width:34ch;}
.site-footer h4{
  font-size:11px;letter-spacing:var(--ds-tracking-widest);text-transform:uppercase;
  color:var(--ds-paper);opacity:.65;margin-bottom:var(--ds-space-4);
}
.site-footer ul{list-style:none;margin:0;padding:0;}
.site-footer li{margin-bottom:var(--ds-space-3);}
.site-footer li a{font-size:13px;color:var(--ds-paper);opacity:.85;}
.site-footer li a:hover{opacity:1;color:var(--ds-gold);}
.footer-bottom{
  border-top:1px solid rgba(251,250,244,.14);margin-top:var(--ds-space-7);
  padding-top:var(--ds-space-5);display:flex;justify-content:space-between;
  gap:var(--ds-space-5);flex-wrap:wrap;font-size:12px;opacity:.6;
}

/* ══ WhatsApp float ════════════════════════════════════════════════════ */
.float-wa{
  position:fixed;right:20px;bottom:20px;z-index:9998;
  width:52px;height:52px;border-radius:50% !important;
  background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
}
.float-wa:hover{color:#fff;}

/* ══ Search overlay (ported from css/style.css:154-158) ════════════════ */
#searchOverlay{
  display:none;position:fixed;inset:0;background:rgba(11,15,18,.86);
  z-index:10000;align-items:flex-start;justify-content:center;padding-top:120px;
}
#searchOverlay.active{display:flex;}
.search-box{width:min(640px,90vw);position:relative;}
.search-close{
  position:absolute;top:-48px;right:0;background:none;border:none;
  color:#fff;font-size:28px;cursor:pointer;line-height:1;opacity:.8;
}
.search-close:hover{opacity:1;}
#searchForm{display:flex;gap:var(--ds-space-2);}
#searchInput{
  flex:1;padding:16px 18px;font-family:var(--ds-font-body);font-size:16px;
  background:var(--ds-ivory);color:var(--ds-ink);border:none;
}
#searchForm button[type="submit"]{
  padding:16px 28px;background:var(--ds-gold);color:var(--ds-ink);border:none;
  font-size:12px;letter-spacing:var(--ds-tracking-widest);text-transform:uppercase;cursor:pointer;
}

/* ══ Login prompt injected by js/cart.js ═══════════════════════════════ */
#loginPromptBox h3{
  font-family:var(--ds-headline) !important;
  text-transform:uppercase;letter-spacing:var(--ds-tracking-headline);
  font-size:16px !important;color:var(--ds-ink) !important;
}
#loginPromptBox p{color:var(--ds-text-secondary) !important;}
#loginPromptBox .lp-signin{background:var(--ds-ink) !important;color:var(--ds-paper) !important;}
#loginPromptBox .lp-register{border-color:var(--ds-border-hairline) !important;color:var(--ds-ink) !important;}
.lp-close{color:var(--ds-text-muted) !important;}

/* ══ Accessibility ═════════════════════════════════════════════════════ */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--ds-gold);outline-offset:2px;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100000;
  background:var(--ds-ink);color:var(--ds-paper);padding:12px 20px;font-size:13px;
}
.skip-link:focus{left:0;color:var(--ds-paper);}

/* ══ Responsive ════════════════════════════════════════════════════════ */
@media (max-width:1100px){
  .nav{grid-template-columns:auto 1fr;gap:var(--ds-space-5);}
  .nav-links{justify-self:end;}
  .shop-layout{grid-template-columns:200px 1fr;gap:var(--ds-space-6);}
  #productGrid.product-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .pdp-layout{grid-template-columns:minmax(0,2fr) minmax(260px,1fr);}
  /* Info column drops under the two remaining tracks and stops sticking. */
  .pdp-col-info{grid-column:1 / -1;position:static;}
  .pdp-related-grid{grid-template-columns:repeat(2,1fr);}
  .wish-grid{grid-template-columns:repeat(3,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:900px){
  .shop-layout{grid-template-columns:1fr;}
  .filter-aside{border-bottom:1px solid var(--ds-border-hairline);padding-bottom:var(--ds-space-5);}
}
@media (max-width:760px){
  :root{--ds-header-height:56px;}
  .nav{grid-template-columns:1fr auto;padding:var(--ds-space-3) var(--ds-container-pad);}
  .nav-toggle{display:block;}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--ds-ink);padding:var(--ds-space-4) var(--ds-container-pad) var(--ds-space-5);
    z-index:9998;
  }
  .nav-links a,.nav-shop-btn{color:var(--ds-paper) !important;}
  #productGrid.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pdp-layout{grid-template-columns:1fr;}
  .pdp-col-info,.pdp-col-buy{position:static;}
  .pdp-related-grid{grid-template-columns:1fr 1fr;}
  .narrative-row{grid-template-columns:1fr;gap:var(--ds-space-6);}
  .narrative-row.is-reversed .narrative-media{order:0;}
  .value-grid{grid-template-columns:1fr;gap:var(--ds-space-6);}
  .wish-grid{grid-template-columns:1fr 1fr;}
  .contact-layout{grid-template-columns:1fr;gap:var(--ds-space-7);}
  .footer-grid{grid-template-columns:1fr;gap:var(--ds-space-6);}
}