/* ============================================================
   Deco Destiny — combined brand stylesheet
   Generated from the design system: tokens -> base ->
   components -> site layout. Edit the partials in the skill
   and re-assemble, or edit here directly.
   ============================================================ */

/* ============================================================
   Deco Destiny — Webfonts
   • Wordmark — Copasetic (brand-supplied TTF, assets/fonts/).
     Used ONLY for the “DEcO DEstiNY” wordmark lockup — never
     for headings, body, or UI text.
   Substitutions (other brand faces not supplied):
     • Display  → Cormorant Garamond  (high-contrast luxe serif)
     • Sans/UI  → Jost                (geometric, Art-Deco Futura lineage)
   Served from Google Fonts. Swap for licensed brand faces
   when available — see readme.md → VISUAL FOUNDATIONS.
   ============================================================ */

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

@font-face {
  font-family: "Copasetic";
  src: url("../fonts/Copasetic-web.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* ============================================================
   Deco Destiny — Color tokens
   A calm, warm-neutral palette: cream grounds, ink type,
   a single restrained gold accent drawn from the brand monogram.
   ============================================================ */

:root {
  /* --- Ink (warm near-blacks → muted browns) --------------- */
  --ink-900: #1b1815;   /* primary text, dark buttons, footer */
  --ink-800: #2c2620;
  --ink-700: #423b32;
  --ink-500: #6f6457;   /* secondary text */
  --ink-400: #8c8173;
  --ink-300: #ab9f8e;   /* muted text, placeholders */
  --ink-200: #c8bdad;   /* disabled */

  /* --- Cream / sand surfaces ------------------------------- */
  --cream-50:  #faf7f2;  /* page background */
  --cream-100: #f4efe7;  /* section band */
  --cream-200: #ece4d8;  /* alternate band, hover sand */
  --cream-300: #e0d6c6;
  --white:     #ffffff;  /* cards, elevated surfaces */

  /* --- Hairlines / borders --------------------------------- */
  --line-soft:   #ece4d6;
  --line:        #e1d8c8;  /* default hairline */
  --line-strong: #cfc2ac;

  /* --- Gold accent (from the Art Deco monogram) ------------ */
  --gold-700: #816615;
  --gold-600: #9c7c1a;   /* gold text on light */
  --gold-500: #b8941f;   /* primary gold */
  --gold-400: #cda94a;   /* logo gold, lines */
  --gold-300: #ddc585;
  --gold-100: #f0e7cc;   /* gold tint surface */

  /* --- Petrol teal (statement surfaces — peacock + gold) ---- */
  --teal-900: #013638;
  --teal-800: #014d4e;   /* THE brand teal — statement bands, footer */
  --teal-700: #0d6364;
  --teal-500: #2f8385;
  --teal-300: #8fbcbc;
  --teal-100: #e2efee;

  /* --- Status (used sparingly, kept muted) ----------------- */
  --success: #5b6f4a;
  --error:   #9c4a3c;
  --info:    #4a6170;

  /* ========================================================
     Semantic aliases — reference these in components
     ======================================================== */
  --bg-page:        var(--cream-50);
  --bg-band:        var(--cream-100);
  --bg-band-alt:    var(--cream-200);
  --bg-ink:         var(--ink-900);
  --surface-statement: var(--teal-800);   /* teal statement bands */
  --text-on-teal:      var(--cream-50);
  --text-on-teal-dim:  #aacfcd;
  --surface-card:   var(--white);
  --surface-sunken: var(--cream-100);

  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-500);
  --text-muted:     var(--ink-300);
  --text-on-ink:    var(--cream-50);
  --text-on-ink-dim:#b8ab97;

  --border:         var(--line);
  --border-soft:    var(--line-soft);
  --border-strong:  var(--line-strong);

  --accent:         var(--gold-500);
  --accent-text:    var(--gold-600);
  --accent-line:    var(--gold-400);

  --btn-fill:       var(--ink-900);
  --btn-fill-text:  var(--cream-50);
  --btn-fill-hover: var(--ink-700);

  --focus-ring:     var(--gold-500);
}
/* ============================================================
   Deco Destiny — Typography tokens
   Display: Cormorant Garamond (serif)  ·  UI/body: Jost (sans)
   Refined, airy, generous line-height. Labels are uppercase
   with wide tracking — an Art-Deco signature.
   ============================================================ */

:root {
  /* --- Families ------------------------------------------- */
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-sans:    "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --font-body:    var(--font-sans);
  --font-wordmark: "Copasetic", "Jost", "Futura", sans-serif; /* brand wordmark ONLY */

  /* --- Weights -------------------------------------------- */
  --fw-light:   300; /* @kind other */
  --fw-regular: 400; /* @kind other */
  --fw-medium:  500; /* @kind other */
  --fw-semibold:600; /* @kind other */

  /* --- Fluid display sizes (serif) ------------------------ */
  --fs-display:   clamp(3.25rem, 1.8rem + 5.2vw, 5.5rem); /* @kind other */
  --fs-h1:        clamp(2.5rem, 1.6rem + 3.4vw, 4rem); /* @kind other */
  --fs-h2:        clamp(2rem, 1.4rem + 2.2vw, 3rem); /* @kind other */
  --fs-h3:        clamp(1.5rem, 1.2rem + 1.2vw, 2rem); /* @kind other */
  --fs-title:     1.375rem; /* @kind other */

  /* --- UI / body sizes (sans) ----------------------------- */
  --fs-lead:      1.1875rem; /* @kind other */
  --fs-body:      1rem; /* @kind other */
  --fs-body-sm:   0.9375rem; /* @kind other */
  --fs-caption:   0.8125rem; /* @kind other */
  --fs-eyebrow:   0.75rem; /* @kind other */

  /* --- Line heights --------------------------------------- */
  --lh-display: 1.04; /* @kind other */
  --lh-heading: 1.12; /* @kind other */
  --lh-snug:    1.35; /* @kind other */
  --lh-body:    1.65; /* @kind other */

  /* --- Letter spacing ------------------------------------- */
  --ls-display:  -0.01em; /* @kind other */
  --ls-heading:  0; /* @kind other */
  --ls-body:     0.005em; /* @kind other */
  --ls-eyebrow:  0.22em; /* @kind other */
  --ls-button:   0.16em; /* @kind other */
  --ls-nav:      0.12em; /* @kind other */

  /* ========================================================
     Semantic type roles
     ======================================================== */
  --type-hero:    var(--fw-regular) var(--fs-display)/var(--lh-display) var(--font-display); /* @kind other */
  --type-h1:      var(--fw-regular) var(--fs-h1)/var(--lh-heading) var(--font-display); /* @kind other */
  --type-h2:      var(--fw-regular) var(--fs-h2)/var(--lh-heading) var(--font-display); /* @kind other */
  --type-h3:      var(--fw-medium)  var(--fs-h3)/var(--lh-snug) var(--font-display); /* @kind other */
  --type-body:    var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans); /* @kind other */
  --type-lead:    var(--fw-light)   var(--fs-lead)/var(--lh-body) var(--font-sans); /* @kind other */
}
/* ============================================================
   Deco Destiny — Spacing, radii, shadows, layout, motion
   Generous whitespace, crisp Art-Deco edges (minimal radius),
   feather-light elevation. 4px base grid.
   ============================================================ */

:root {
  /* --- Spacing scale (4px base) --------------------------- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;
  --space-11:  160px;

  /* --- Section rhythm ------------------------------------- */
  --section-y:    clamp(56px, 8vw, 112px);  /* @kind spacing */
  --gutter:       clamp(20px, 4vw, 64px);   /* @kind spacing */
  --content-max:  1280px;                   /* @kind spacing */
  --measure:      62ch;                      /* @kind other */

  /* --- Radii (crisp; corners stay near-square) ------------ */
  --radius-xs:   2px;
  --radius-sm:   3px;
  --radius-md:   5px;
  --radius-lg:   8px;
  --radius-pill: 999px;   /* steppers, some chips */
  --radius-circle: 50%;   /* category arrows, icon buttons */

  /* --- Borders -------------------------------------------- */
  --border-hairline: 1px solid var(--border);
  --border-card:     1px solid var(--border-soft);

  /* --- Elevation (whisper-soft, warm-tinted) -------------- */
  --shadow-xs:   0 1px 2px rgba(27, 24, 21, 0.04);
  --shadow-sm:   0 2px 8px rgba(27, 24, 21, 0.05);
  --shadow-md:   0 8px 24px rgba(27, 24, 21, 0.07);
  --shadow-lg:   0 18px 48px rgba(27, 24, 21, 0.10);

  /* --- Motion --------------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0.05, 0.36, 1);   /* @kind other */
  --dur-fast:   140ms;   /* @kind other */
  --dur-base:   240ms;   /* @kind other */
  --dur-slow:   420ms;   /* @kind other */

  /* --- Z-index -------------------------------------------- */
  --z-header:  100;   /* @kind other */
  --z-overlay: 900;   /* @kind other */
  --z-modal:   1000;  /* @kind other */
  --z-toast:   1100;  /* @kind other */
}
/* ============================================================
   Deco Destiny — Base element defaults
   Light-touch reset + brand-true element styling so raw HTML
   already feels on-brand. Components layer on top.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings → display serif */
h1, h2, h3, h4 {
  margin: 0 0 0.4em;
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  color: var(--text-primary);
  letter-spacing: var(--ls-heading);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-medium); }

p { margin: 0 0 1em; max-width: var(--measure); }

a { color: var(--text-primary); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--accent-text); }

img, svg { display: block; max-width: 100%; }

::selection { background: var(--gold-100); color: var(--ink-900); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---- Brand utilities ------------------------------------ */

/* Wide-tracked uppercase eyebrow / overline label */
.dd-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Short gold rule used beneath titles */
.dd-rule {
  width: 48px;
  height: 1px;
  border: 0;
  margin: var(--space-5) 0;
  background: var(--accent-line);
}

/* Page side-gutter container */
.dd-container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Full-bleed section band helpers */
.dd-band      { background: var(--bg-band); }
.dd-band-alt  { background: var(--bg-band-alt); }
.dd-band-ink  { background: var(--bg-ink); color: var(--text-on-ink); }
.dd-band-teal { background: var(--surface-statement); color: var(--text-on-teal); }
.dd-section-y { padding-block: var(--section-y); }
/* ============================================================
   Deco Destiny — Component styles
   Class-based styling for the React UI primitives. Shipped to
   consumers via styles.css so markup stays clean. All values
   reference design tokens.
   ============================================================ */

/* ---------- Button ------------------------------------------------ */
.dd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  line-height: 1;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.dd-btn:active { transform: translateY(1px); }
.dd-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.dd-btn--primary { background: var(--ink-900); color: var(--cream-50); border-color: var(--ink-900); }
.dd-btn--primary:hover { background: var(--ink-700); border-color: var(--ink-700); color: var(--cream-50); }

.dd-btn--secondary { background: transparent; color: var(--ink-900); border-color: var(--ink-900); }
.dd-btn--secondary:hover { background: var(--ink-900); color: var(--cream-50); }

.dd-btn--ghost { background: transparent; color: var(--ink-900); border-color: transparent; padding-inline: var(--space-2); }
.dd-btn--ghost:hover { color: var(--accent-text); }

.dd-btn--gold { background: var(--gold-500); color: var(--cream-50); border-color: var(--gold-500); }
.dd-btn--gold:hover { background: var(--gold-600); border-color: var(--gold-600); }

.dd-btn--sm { padding: 10px 18px; font-size: 11px; }
.dd-btn--lg { padding: 18px 38px; font-size: var(--fs-body-sm); }
.dd-btn--block { display: flex; width: 100%; }

.dd-btn:disabled, .dd-btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; pointer-events: none;
}
.dd-btn__arrow { font-size: 1.1em; line-height: 0; transition: transform var(--dur-base) var(--ease-out); }
.dd-btn:hover .dd-btn__arrow { transform: translateX(3px); }

/* ---------- IconButton -------------------------------------------- */
.dd-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-circle);
  color: var(--ink-900);
  cursor: pointer;
  font-size: 22px;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.dd-iconbtn:hover { color: var(--accent-text); background: var(--cream-100); }
.dd-iconbtn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.dd-iconbtn--bordered { border-color: var(--border-strong); }
.dd-iconbtn--bordered:hover { border-color: var(--ink-900); background: transparent; color: var(--ink-900); }
.dd-iconbtn--sm { width: 36px; height: 36px; font-size: 18px; }
.dd-iconbtn__badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--ink-900); color: var(--cream-50);
  font-family: var(--font-sans); font-size: 10px; font-weight: var(--fw-medium);
  border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
}
.dd-iconbtn-wrap { position: relative; display: inline-flex; }

/* ---------- Eyebrow ----------------------------------------------- */
.dd-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.dd-eyebrow--gold { color: var(--accent-text); }

/* ---------- Divider / rule ---------------------------------------- */
.dd-divider { border: 0; height: 1px; background: var(--border); width: 100%; }
.dd-divider--gold { background: var(--accent-line); }
.dd-divider--short { width: 48px; }
.dd-divider--center { margin-inline: auto; }

/* ---------- SectionHeading ---------------------------------------- */
.dd-heading { display: flex; flex-direction: column; }
.dd-heading--center { align-items: center; text-align: center; }
.dd-heading__eyebrow { margin-bottom: var(--space-4); }
.dd-heading__title { font: var(--type-h2); color: var(--text-primary); margin: 0; }
.dd-heading--sm .dd-heading__title { font: var(--type-h3); }
.dd-heading__rule { margin-top: var(--space-5); }
.dd-heading__body { margin-top: var(--space-4); color: var(--text-secondary); font-size: var(--fs-body); max-width: var(--measure); }
.dd-heading--center .dd-heading__body { margin-inline: auto; }

/* ---------- Badge / Tag ------------------------------------------- */
.dd-badge {
  display: inline-flex; align-items: center;
  font-family: var(--font-sans); font-size: 10px; font-weight: var(--fw-medium);
  letter-spacing: var(--ls-button); text-transform: uppercase;
  padding: 5px 10px; line-height: 1;
  background: var(--white); color: var(--ink-900);
  border: 1px solid var(--border-strong); border-radius: var(--radius-xs);
}
.dd-badge--ink  { background: var(--ink-900); color: var(--cream-50); border-color: var(--ink-900); }
.dd-badge--gold { background: var(--gold-100); color: var(--gold-700); border-color: var(--gold-300); }
.dd-badge--teal { background: var(--teal-800); color: var(--cream-50); border-color: var(--teal-800); }

.dd-tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-nav); text-transform: uppercase;
  color: var(--text-secondary);
}

/* ---------- Input ------------------------------------------------- */
.dd-field { display: flex; flex-direction: column; gap: var(--space-2); }
.dd-field__label {
  font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-nav); text-transform: uppercase; color: var(--text-secondary);
}
.dd-input {
  font-family: var(--font-sans); font-size: var(--fs-body); color: var(--text-primary);
  background: var(--white);
  border: 1px solid var(--border-strong); border-radius: var(--radius-xs);
  padding: 13px 16px; width: 100%;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.dd-input::placeholder { color: var(--text-muted); }
.dd-input:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 1px var(--gold-500); }
.dd-input--ghost { background: transparent; border-color: var(--border); }

/* ---------- Checkbox ---------------------------------------------- */
.dd-check { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font-family: var(--font-sans); font-size: var(--fs-body-sm); color: var(--text-primary); }
.dd-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.dd-check__box {
  width: 17px; height: 17px; flex: none;
  border: 1px solid var(--border-strong); border-radius: var(--radius-xs);
  background: var(--white); display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.dd-check__box::after { content: ""; width: 9px; height: 9px; transform: scale(0); background: var(--cream-50); transition: transform var(--dur-fast) var(--ease-out); clip-path: polygon(14% 44%, 0 65%, 41% 100%, 100% 16%, 80% 0, 39% 71%); }
.dd-check input:checked + .dd-check__box { background: var(--ink-900); border-color: var(--ink-900); }
.dd-check input:checked + .dd-check__box::after { transform: scale(1); }
.dd-check input:focus-visible + .dd-check__box { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---------- QuantityStepper --------------------------------------- */
.dd-qty { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-xs); background: var(--white); }
.dd-qty__btn {
  width: 44px; height: 46px; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-sans); font-size: 18px; color: var(--ink-900);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-out);
}
.dd-qty__btn:hover { background: var(--cream-100); }
.dd-qty__btn:disabled { opacity: .35; cursor: not-allowed; }
.dd-qty__val { min-width: 46px; text-align: center; font-family: var(--font-sans); font-size: var(--fs-body); color: var(--text-primary); }

/* ---------- Newsletter -------------------------------------------- */
.dd-newsletter { display: flex; align-items: stretch; max-width: 460px; width: 100%; }
.dd-newsletter .dd-input { border-right: 0; border-radius: 0; }
.dd-newsletter .dd-btn { border-radius: 0; flex: none; }

/* ---------- ProductCard ------------------------------------------- */
.dd-product { display: flex; flex-direction: column; background: transparent; }
.dd-product__media {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--cream-100); border: 1px solid var(--line-soft);
}
.dd-product__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); display: block; }
.dd-product:hover .dd-product__img { transform: scale(1.04); }
.dd-product__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-200); font-size: 40px; }
.dd-product__fav {
  position: absolute; top: 12px; right: 12px;
  width: 38px; height: 38px; border-radius: var(--radius-circle);
  background: rgba(255,255,255,.85); border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-700); font-size: 18px;
  backdrop-filter: blur(2px);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.dd-product__fav:hover { color: var(--gold-600); background: #fff; }
.dd-product__fav--active { color: var(--gold-600); }
.dd-product__badge { position: absolute; top: 12px; left: 12px; }
.dd-product__cat { margin-top: var(--space-4); }
.dd-product__name { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-title); color: var(--text-primary); margin: var(--space-2) 0 var(--space-1); }
.dd-product__price { font-family: var(--font-sans); font-size: var(--fs-body); color: var(--text-primary); }
.dd-product__cta { margin-top: var(--space-4); }

/* ---------- CategoryTile ------------------------------------------ */
.dd-cattile { display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; }
.dd-cattile__media {
  position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--cream-100); border: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: center;
}
.dd-cattile__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.dd-cattile:hover .dd-cattile__img { transform: scale(1.04); }
.dd-cattile__arrow {
  position: absolute; width: 48px; height: 48px; border-radius: var(--radius-circle);
  background: var(--cream-50); color: var(--ink-900);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.dd-cattile:hover .dd-cattile__arrow { background: var(--ink-900); color: var(--cream-50); }
.dd-cattile:hover .dd-cattile__arrow .dd-btn__arrow,
.dd-cattile:hover .dd-cattile__arrow span { transform: translateX(3px); }
.dd-cattile__icon { font-size: 34px; color: var(--ink-700); }
.dd-cattile__name { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-primary); margin-top: var(--space-4); }
.dd-cattile__desc { font-family: var(--font-sans); font-size: var(--fs-body-sm); color: var(--text-secondary); margin-top: var(--space-2); }

/* ---------- TrustBadge -------------------------------------------- */
.dd-trust { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: 0 var(--space-4); }
.dd-trust__icon { font-size: 30px; color: var(--ink-700); line-height: 1; }
.dd-trust__title { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-primary); }
.dd-trust__desc { font-family: var(--font-sans); font-size: var(--fs-caption); color: var(--text-secondary); line-height: var(--lh-snug); max-width: 22ch; }

/* ---------- Accordion --------------------------------------------- */
.dd-accordion { border-top: 1px solid var(--border); }
.dd-accordion__item { border-bottom: 1px solid var(--border); }
.dd-accordion__head {
  width: 100%; background: transparent; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) 0; text-align: left;
  font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--fs-body); color: var(--text-primary);
}
.dd-accordion__sign { font-size: 20px; color: var(--ink-500); transition: transform var(--dur-base) var(--ease-out); line-height: 0; }
.dd-accordion__item[data-open="true"] .dd-accordion__sign { transform: rotate(45deg); }
.dd-accordion__panel { overflow: hidden; max-height: 0; transition: max-height var(--dur-base) var(--ease-out); }
.dd-accordion__item[data-open="true"] .dd-accordion__panel { max-height: 320px; }
.dd-accordion__inner { padding: 0 0 var(--space-5); color: var(--text-secondary); font-size: var(--fs-body-sm); line-height: var(--lh-body); max-width: var(--measure); }

/* ---------- ScentProfile ------------------------------------------ */
.dd-scent { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-6); }
.dd-scent__title { text-align: center; }
.dd-scent__notes { display: flex; justify-content: space-between; gap: var(--space-4); margin: var(--space-5) 0 var(--space-4); }
.dd-scent__note { flex: 1; text-align: center; }
.dd-scent__note-k { font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--ls-nav); text-transform: uppercase; color: var(--text-secondary); }
.dd-scent__note-v { font-family: var(--font-display); font-size: var(--fs-body); color: var(--text-primary); margin-top: var(--space-1); }
.dd-scent__track { position: relative; height: 1px; background: var(--border-strong); margin: var(--space-6) 8px; }
.dd-scent__dot { position: absolute; top: 50%; width: 13px; height: 13px; border-radius: var(--radius-circle); background: var(--cream-50); border: 1px solid var(--ink-300); transform: translate(-50%,-50%); }
.dd-scent__dot--on { background: var(--ink-900); border-color: var(--ink-900); }
.dd-scent__families { display: flex; justify-content: center; gap: var(--space-3); color: var(--text-secondary); font-family: var(--font-sans); font-size: var(--fs-body-sm); }
.dd-scent__families span:not(:last-child)::after { content: "/"; margin-left: var(--space-3); color: var(--ink-300); }

/* ---------- Breadcrumbs ------------------------------------------- */
.dd-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-family: var(--font-sans); font-size: var(--fs-body-sm); color: var(--text-secondary); }
.dd-crumbs a { color: var(--text-secondary); }
.dd-crumbs a:hover { color: var(--accent-text); }
.dd-crumbs__sep { color: var(--ink-300); }
.dd-crumbs__current { color: var(--text-primary); }
/* ============================================================
   Deco Destiny — Website UI kit · layout styles
   Kit-local (page scaffolding only). Brand primitives come from
   the design system via styles.css + _ds_bundle.js.
   ============================================================ */

.site { background: var(--bg-page); color: var(--text-primary); }
.site-wrap { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---- Image placeholder (no real photography supplied) ---- */
.ph {
  position: relative; overflow: hidden;
  background: var(--cream-100);
  border: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: center;
}
.ph::after {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, transparent 0 22px, rgba(176,141,45,.025) 22px 23px);
  pointer-events: none;
}
.ph i { font-size: clamp(28px, 4vw, 46px); color: var(--ink-200); }
.ph--ink { background: var(--ink-800); border-color: var(--ink-700); }
.ph--ink i { color: rgba(250,247,242,.22); }

/* ---- Announcement bar (teal statement) ---- */
.anno {
  background: var(--surface-statement); color: var(--cream-50);
  font: var(--fw-regular) var(--fs-caption)/1 var(--font-sans);
  letter-spacing: var(--ls-nav); text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; gap: var(--space-4);
  padding: 11px var(--gutter); position: relative;
}
.anno button { position: absolute; right: var(--gutter); background: none; border: 0; color: inherit; cursor: pointer; font-size: 16px; line-height: 0; opacity: .7; }
.anno button:hover { opacity: 1; }

/* ---- Header ---- */
.hdr { position: sticky; top: 0; z-index: var(--z-header); background: rgba(250,247,242,.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.hdr__row { display: flex; align-items: center; gap: var(--space-6); height: 78px; }
.hdr__brand { display: inline-flex; flex-direction: column; line-height: 1; text-decoration: none; }
.hdr__brand .nm { font: var(--fw-regular) 22px/1 var(--font-wordmark); letter-spacing: .06em; color: var(--ink-900); }
.hdr__brand-logo { width: 188px; height: auto; display: block; margin-bottom: 5px; }
.hdr__brand .tg { font: var(--fw-regular) 8.5px/1 var(--font-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--text-secondary); margin-top: 5px; }
.hdr__nav { display: flex; align-items: center; gap: var(--space-6); margin-inline: auto; }
.hdr__nav a {
  font: var(--fw-medium) var(--fs-caption)/1 var(--font-sans);
  letter-spacing: var(--ls-nav); text-transform: uppercase; color: var(--ink-800);
  padding: 6px 0; position: relative; cursor: pointer;
}
.hdr__nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px; background: var(--ink-900); transition: right var(--dur-base) var(--ease-out); }
.hdr__nav a:hover::after, .hdr__nav a[data-active="true"]::after { right: 0; }
.hdr__nav a[data-active="true"] { color: var(--ink-900); }
.hdr__utils { display: flex; align-items: center; gap: var(--space-1); }
.hdr__caret { font-size: 11px; opacity: .6; margin-left: 3px; }

/* ---- Generic section ---- */
.sec { padding-block: var(--section-y); }
.sec--tight { padding-block: clamp(40px, 6vw, 72px); }

/* ---- Hero (home) — full-bleed cream-wash banner ---- */
.hero { position: relative; min-height: 580px; display: flex; align-items: center; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: 0; background: #bcb3b0; }
.hero__bg img { position: absolute; width: 118%; height: 118%; left: 50%; top: 50%; object-fit: cover; object-position: 50% 50%; transform: translate(-50%, -50%) translateX(16%) scale(0.85); filter: saturate(1.03) contrast(1.01); }
.hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(95deg, var(--cream-50) 0%, rgba(250,247,242,.96) 30%, rgba(250,247,242,.7) 50%, rgba(250,247,242,.34) 66%, rgba(250,247,242,0) 82%); }
.hero__wrap { position: relative; z-index: 2; width: 100%; padding-block: clamp(48px,6vw,88px); }
.hero__inner { display: flex; flex-direction: column; align-items: flex-start; max-width: 480px; }
.hero__logo { width: clamp(280px, 32vw, 420px); height: auto; margin: 14px 0 12px; }
.hero__eyebrow { letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font: var(--fw-medium) var(--fs-eyebrow)/1 var(--font-sans); color: var(--text-secondary); }
.hero__sub { font: var(--fw-regular) clamp(1.3rem,1rem+1vw,1.8rem)/1.2 var(--font-display); color: var(--ink-700); margin: var(--space-2) 0 var(--space-5); max-width: 34ch; }
.hero__lede { font: var(--fw-light) var(--fs-lead)/var(--lh-body) var(--font-sans); color: var(--text-secondary); max-width: 38ch; margin: 0 0 var(--space-7); }
.hero__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ---- Three-up experience ---- */
.exp { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-7); }
.exp__item { text-align: center; }
.exp__media { aspect-ratio: 1/1; margin-bottom: var(--space-5); }
/* Fill the square media box while preserving the image's aspect ratio.
   The .ph container clips (overflow:hidden) so the hover zoom stays inside. */
.exp__img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1); transform-origin: center; transition: transform var(--dur-slow) var(--ease-out); }
.exp__media:hover .exp__img { transform: scale(1.2); }
/* This contained zoom is an explicitly requested effect: keep it smoothly
   animated even when the global reduced-motion rule zeroes transitions. */
@media (prefers-reduced-motion: reduce) {
  .exp__img { transition-duration: var(--dur-slow) !important; }
}
.exp__icon { font-size: 30px; color: var(--ink-700); margin-bottom: var(--space-3); }
.exp__t { font: var(--fw-medium) var(--fs-eyebrow)/1.3 var(--font-sans); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; margin-bottom: var(--space-3); }
.exp__d { font: var(--fw-regular) var(--fs-body-sm)/var(--lh-body) var(--font-sans); color: var(--text-secondary); max-width: 34ch; margin-inline: auto; }

/* ---- Collection grid ---- */
.collgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.prodgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6) var(--space-5); }

/* ---- Split (image + text) ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0; }
.split__media { aspect-ratio: 4/3; min-height: 100%; }
.split__body { padding: clamp(32px,5vw,80px); }
.split--text-left .split__media { order: 2; }

/* ---- Trust strip ---- */
.trust { display: grid; grid-template-columns: repeat(5, 1fr); border-block: 1px solid var(--border); }
.trust > * { padding-block: clamp(28px,4vw,44px); }
.trust > * + * { border-left: 1px solid var(--border); }

/* ---- Newsletter band (teal statement surface) ---- */
.nlband { position: relative; overflow: hidden; background: var(--surface-statement); }
.nlband__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-7); padding-block: clamp(40px,5vw,64px); flex-wrap: wrap; }
.nlband__copy { font: var(--fw-regular) clamp(1.3rem,1rem+1vw,1.8rem)/1.25 var(--font-display); color: var(--cream-50); max-width: 22ch; }
.nlband .dd-input { background: transparent; border-color: rgba(250,247,242,.35); color: var(--cream-50); }
.nlband .dd-input::placeholder { color: rgba(250,247,242,.55); }
.nlband .dd-input:focus { border-color: var(--gold-300); box-shadow: 0 0 0 1px var(--gold-300); }
.nlband .dd-btn--primary { background: var(--cream-50); color: var(--ink-900); border-color: var(--cream-50); }
.nlband .dd-btn--primary:hover { background: var(--white); border-color: var(--white); color: var(--ink-900); }

/* ---- Gallery (#DecoDestiny) ---- */
.gallery { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-3); }
.gallery .ph { aspect-ratio: 1/1; }

/* ---- Footer (teal statement surface) ---- */
.ftr { background: var(--surface-statement); color: var(--text-on-teal); padding-block: clamp(48px,6vw,72px) var(--space-6); }
.ftr .nm { color: var(--cream-50); }
.ftr__top { display: grid; grid-template-columns: 1.6fr repeat(5, 1fr); gap: var(--space-7); }
.ftr__brand .nm { font: var(--fw-regular) 20px/1 var(--font-wordmark); letter-spacing: .06em; }
.ftr__brand p { font: var(--fw-regular) var(--fs-body-sm)/var(--lh-body) var(--font-sans); color: var(--text-on-teal-dim); max-width: 30ch; margin: var(--space-4) 0 var(--space-5); }
.ftr__social { display: flex; gap: var(--space-4); font-size: 19px; color: var(--text-on-teal-dim); }
.ftr__social a { color: var(--text-on-teal-dim); }
.ftr__social a:hover { color: var(--gold-300); }
.ftr__col h4 { font: var(--fw-medium) var(--fs-eyebrow)/1 var(--font-sans); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--cream-50); margin: 0 0 var(--space-5); }
.ftr__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.ftr__col a { font: var(--fw-regular) var(--fs-body-sm)/1 var(--font-sans); color: var(--text-on-teal-dim); }
.ftr__col a:hover { color: var(--gold-300); }
.ftr__bar { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: clamp(40px,5vw,64px); padding-top: var(--space-5); border-top: 1px solid rgba(250,247,242,.18); font: var(--fw-regular) var(--fs-caption)/1 var(--font-sans); color: var(--text-on-teal-dim); flex-wrap: wrap; }
.ftr__bar a { color: var(--text-on-teal-dim); }
.ftr__bar a:hover { color: var(--gold-300); }
.ftr__bar nav { display: flex; gap: var(--space-5); }

/* ---- Shop layout ---- */
.shop { display: grid; grid-template-columns: 232px 1fr; gap: var(--space-7); align-items: start; }
.filters { display: flex; flex-direction: column; gap: var(--space-6); }
.filters h3 { font: var(--fw-medium) var(--fs-eyebrow)/1 var(--font-sans); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; margin: 0 0 var(--space-4); }
.fil-group { border-bottom: 1px solid var(--border); padding-bottom: var(--space-5); }
.fil-group__head { display: flex; justify-content: space-between; align-items: center; font: var(--fw-medium) var(--fs-eyebrow)/1 var(--font-sans); letter-spacing: var(--ls-nav); text-transform: uppercase; color: var(--text-secondary); margin-bottom: var(--space-4); }
.fil-list { display: flex; flex-direction: column; gap: var(--space-3); }
.swatches { display: flex; gap: var(--space-3); }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-strong); cursor: pointer; }
.shop__bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-6); font: var(--fw-regular) var(--fs-body-sm)/1 var(--font-sans); color: var(--text-secondary); }
.shop__cats { display: grid; grid-template-columns: repeat(5,1fr); gap: var(--space-4); margin-bottom: var(--space-7); }
.select { font: var(--fw-regular) var(--fs-body-sm) var(--font-sans); border: 1px solid var(--border-strong); background: var(--white); padding: 9px 14px; border-radius: var(--radius-xs); color: var(--ink-900); }

/* ---- Product detail ---- */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
.pdp__gallery { display: grid; grid-template-columns: 76px 1fr; gap: var(--space-4); }
.pdp__thumbs { display: flex; flex-direction: column; gap: var(--space-3); }
.pdp__thumb { aspect-ratio: 1/1; cursor: pointer; }
.pdp__thumb[data-active="true"] { outline: 1px solid var(--ink-900); outline-offset: 2px; }
.pdp__main { aspect-ratio: 1/1; position: relative; }
.pdp__zoom { position: absolute; top: 16px; right: 16px; }
.pdp__cat { color: var(--text-secondary); }
.pdp__title { font: var(--fw-regular) var(--fs-h1)/1.05 var(--font-display); margin: var(--space-2) 0 var(--space-3); }
.pdp__price { font: var(--fw-regular) 1.5rem/1 var(--font-sans); margin-bottom: var(--space-5); }
.pdp__desc { color: var(--text-secondary); max-width: 46ch; }
.pdp__attrs { display: flex; gap: var(--space-6); margin: var(--space-6) 0; flex-wrap: wrap; }
.pdp__attr { text-align: center; }
.pdp__attr i { font-size: 26px; color: var(--ink-700); }
.pdp__attr span { display: block; font: var(--fw-regular) var(--fs-caption)/1.3 var(--font-sans); color: var(--text-secondary); margin-top: var(--space-2); }
.pdp__buy { display: flex; gap: var(--space-3); align-items: stretch; margin: var(--space-5) 0; }
.pdp__ship { display: flex; flex-direction: column; gap: var(--space-3); font: var(--fw-regular) var(--fs-body-sm) var(--font-sans); color: var(--text-secondary); border-top: 1px solid var(--border); padding-top: var(--space-5); }
.pdp__ship div { display: flex; gap: var(--space-3); align-items: center; }
.pdp__ship i { font-size: 20px; color: var(--ink-700); }
.pdp__tabs { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--border); margin: var(--space-8) 0 var(--space-6); }
.pdp__tab { font: var(--fw-medium) var(--fs-caption) var(--font-sans); letter-spacing: var(--ls-nav); text-transform: uppercase; color: var(--text-secondary); padding: 0 0 var(--space-4); cursor: pointer; border-bottom: 1px solid transparent; margin-bottom: -1px; }
.pdp__tab[data-active="true"] { color: var(--ink-900); border-bottom-color: var(--ink-900); }
.size-pill { display: inline-flex; padding: 11px 18px; border: 1px solid var(--ink-900); border-radius: var(--radius-xs); font: var(--fw-regular) var(--fs-body-sm) var(--font-sans); }

/* ---- Page hero (about / journal / generic) ---- */
.phero { background: var(--cream-100); }
.phero--center { text-align: center; }
.phero__inner { padding-block: clamp(56px,7vw,104px); }
.phero__title { font: var(--fw-regular) var(--fs-h1)/1.05 var(--font-display); margin: var(--space-4) 0 0; }
.phero__sub { font: var(--fw-light) var(--fs-lead)/var(--lh-body) var(--font-sans); color: var(--text-secondary); margin-top: var(--space-4); max-width: 52ch; }
.phero--center .phero__sub { margin-inline: auto; }

/* ---- Collections page ---- */
.chero { position: relative; min-height: 480px; display: flex; align-items: center; overflow: hidden; }
.chero__bg { position: absolute; inset: 0; z-index: 0; }
.chero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 60%; }
.chero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(95deg, var(--cream-50) 0%, rgba(250,247,242,.95) 26%, rgba(250,247,242,.78) 43%, rgba(250,247,242,.4) 60%, rgba(250,247,242,0) 80%); }
.chero__wrap { position: relative; z-index: 2; width: 100%; padding-block: clamp(48px,6vw,72px); }
.chero__col { max-width: 480px; }
.cfeat { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-5); }
.cfeat__item { display: flex; gap: var(--space-4); align-items: flex-start; }
.cfeat__icon { flex: none; width: 42px; height: 42px; border-radius: var(--radius-circle); background: var(--cream-100); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--ink-700); font-size: 19px; }
.cfeat__t { font: var(--fw-medium) var(--fs-eyebrow)/1 var(--font-sans); letter-spacing: var(--ls-nav); text-transform: uppercase; color: var(--text-primary); margin-bottom: 5px; }
.cfeat__d { font: var(--fw-regular) var(--fs-body-sm)/1.5 var(--font-sans); color: var(--text-secondary); }

.cquote { background: var(--bg-band); text-align: center; }
.cquote__inner { max-width: 780px; margin-inline: auto; padding-block: clamp(48px,6vw,84px); }
.cquote__mark { font-family: var(--font-display); font-size: 56px; line-height: .6; color: var(--accent-line); }
.cquote__text { font: var(--fw-regular) clamp(1.4rem,1rem+1.5vw,2.05rem)/1.32 var(--font-display); color: var(--ink-900); margin: var(--space-4) 0 var(--space-5); text-wrap: balance; }
.cquote__author { font: var(--fw-medium) var(--fs-eyebrow)/1 var(--font-sans); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-secondary); }

/* ---- About process ---- */
.proc { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); position: relative; }
.proc__step { text-align: center; }
.proc__num { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-4); font: var(--fw-regular) var(--fs-body-sm) var(--font-sans); color: var(--ink-700); background: var(--bg-page); }
.proc__icon { font-size: 26px; color: var(--ink-700); margin-bottom: var(--space-3); }
.proc__t { font: var(--fw-medium) var(--fs-eyebrow)/1 var(--font-sans); letter-spacing: var(--ls-nav); text-transform: uppercase; margin-bottom: var(--space-2); }
.proc__d { font: var(--fw-regular) var(--fs-caption)/1.5 var(--font-sans); color: var(--text-secondary); }
.matgrid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-6); }
.matgrid__item { text-align: center; }
.matgrid__icon { font-size: 30px; color: var(--ink-700); margin-bottom: var(--space-4); }
.matgrid__t { font: var(--fw-medium) var(--fs-eyebrow)/1.3 var(--font-sans); letter-spacing: var(--ls-nav); text-transform: uppercase; margin-bottom: var(--space-3); }
.matgrid__d { font: var(--fw-regular) var(--fs-body-sm)/var(--lh-body) var(--font-sans); color: var(--text-secondary); }

/* ---- Journal ---- */
.jfeature { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: center; }
.jfeature__media { aspect-ratio: 4/3; }
.jtopics { display: flex; gap: var(--space-5); align-items: center; border-block: 1px solid var(--border); padding-block: var(--space-4); flex-wrap: wrap; }
.jtopics a { font: var(--fw-medium) var(--fs-caption) var(--font-sans); letter-spacing: var(--ls-nav); text-transform: uppercase; color: var(--text-secondary); cursor: pointer; }
.jtopics a[data-active="true"], .jtopics a:hover { color: var(--ink-900); }
.jgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6) var(--space-5); }
.jcard__media { aspect-ratio: 4/3; margin-bottom: var(--space-4); }
.jcard__cat { color: var(--text-secondary); }
.jcard__t { font: var(--fw-regular) 1.35rem/1.2 var(--font-display); margin: var(--space-2) 0 var(--space-3); }
.jcard__ex { font: var(--fw-regular) var(--fs-body-sm)/var(--lh-body) var(--font-sans); color: var(--text-secondary); margin-bottom: var(--space-4); }
.jcard__more { font: var(--fw-medium) var(--fs-caption) var(--font-sans); letter-spacing: var(--ls-nav); text-transform: uppercase; display: inline-flex; gap: var(--space-2); align-items: center; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .ftr__top { grid-template-columns: 1fr 1fr 1fr; }
  .prodgrid, .collgrid, .jgrid { grid-template-columns: repeat(2, 1fr); }
  .shop { grid-template-columns: 1fr; }
  .proc { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-6); }
  .matgrid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 720px) {
  .hdr__nav { display: none; }
  .ftr__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-5); }
  .ftr__brand { grid-column: 1 / -1; }
  .hero { min-height: 0; }
  .hero__bg { bottom: auto; height: 320px; }
  .hero__bg img {
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
    object-position: 50% 50%;
  }
  .hero__scrim {
    bottom: auto;
    height: 320px;
    background: linear-gradient(180deg, transparent 0%, transparent 68%, var(--cream-50) 100%);
  }
  .hero__wrap { padding-top: 340px; }
  .hero__inner { max-width: none; align-items: center; text-align: center; }
  .hero__cta { justify-content: center; }
  .split, .pdp, .jfeature { grid-template-columns: 1fr; }
  .chero { min-height: 0; }
  .chero__scrim { background: linear-gradient(180deg, rgba(250,247,242,.55) 0%, rgba(250,247,242,.86) 62%, var(--cream-50) 100%); }
  .chero__bg img { object-position: 50% 55%; }
  .chero__wrap { padding-top: 300px; }
  .chero__col { max-width: none; }
  .split--text-left .split__media { order: 0; }
  .exp, .trust, .shop__cats { grid-template-columns: 1fr; }
  .prodgrid, .collgrid, .jgrid, .gallery { grid-template-columns: repeat(2, 1fr); }
  .pdp__gallery { grid-template-columns: 1fr; }
}

/* ============================================================
   Deco Destiny — project additions (Django integration)
   Mobile nav, CMS prose, contact form, shop search, lang select.
   ============================================================ */

/* ---- Skip link ---- */
.dd-skip { position: absolute; left: -999px; top: 0; background: var(--ink-900); color: var(--cream-50); padding: 10px 16px; z-index: var(--z-toast); }
.dd-skip:focus { left: 8px; top: 8px; color: var(--cream-50); }

/* ---- Header: brand wordmark + mobile toggle ---- */
.hdr__brand-logo { width: 168px; }
.hdr__toggle { display: none; background: none; border: 0; color: var(--ink-900); cursor: pointer; font-size: 26px; line-height: 0; padding: 8px; }
.hdr__utils form { display: inline-flex; }

/* Language select in the utility row */
.dd-langselect {
  font: var(--fw-medium) var(--fs-caption)/1 var(--font-sans);
  letter-spacing: var(--ls-nav); text-transform: uppercase;
  border: 1px solid var(--border-strong); background: var(--white);
  padding: 8px 10px; border-radius: var(--radius-xs); color: var(--ink-900); cursor: pointer;
}

/* Mobile drawer */
.hdr__drawer { display: none; }
@media (max-width: 720px) {
  .hdr__row {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: var(--space-3) var(--space-2);
  }
  .hdr__brand {
    align-items: center;
    width: 100%;
  }
  .hdr__toggle { display: inline-flex; }
  .hdr__utils {
    justify-content: center;
    width: 100%;
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border);
    gap: var(--space-2);
  }
  .hdr__drawer {
    display: block; border-top: 1px solid var(--border);
    background: var(--cream-50);
  }
  .hdr__drawer__links { padding: var(--space-4) var(--gutter); display: flex; flex-direction: column; gap: var(--space-2); }
  .hdr__drawer a {
    display: block; padding: 10px 0;
    font: var(--fw-medium) var(--fs-body-sm)/1 var(--font-sans);
    letter-spacing: var(--ls-nav); text-transform: uppercase; color: var(--ink-800);
  }
  .hdr__drawer .dd-divider { margin: var(--space-3) 0; }
}
[x-cloak] { display: none !important; }

/* ---- Generic narrow content column (legal / editorial) ---- */
.dd-prose { max-width: 68ch; margin-inline: auto; }
.cms-content { font: var(--type-body); color: var(--text-secondary); }
.cms-content > :first-child { margin-top: 0; }
.cms-content h2 { font: var(--type-h3); color: var(--text-primary); margin: var(--space-7) 0 var(--space-3); }
.cms-content h3 { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-title); color: var(--text-primary); margin: var(--space-6) 0 var(--space-2); }
.cms-content p { margin: 0 0 1em; max-width: none; }
.cms-content a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.cms-content ul, .cms-content ol { margin: 0 0 1em; padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--space-2); }
.cms-content strong { color: var(--text-primary); font-weight: var(--fw-medium); }
.cms-content blockquote { margin: var(--space-6) 0; padding-left: var(--space-5); border-left: 2px solid var(--accent-line); font-family: var(--font-display); font-size: var(--fs-title); color: var(--text-primary); }
.cms-content img { border: 1px solid var(--border); margin: var(--space-5) 0; height: auto; }

.dd-missing { background: var(--cream-100); border: 1px dashed var(--border-strong); color: var(--text-muted); padding: var(--space-6); text-align: center; font-size: var(--fs-body-sm); }

/* ---- Contact ---- */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
.contact__form { display: flex; flex-direction: column; gap: var(--space-4); }
.dd-textarea { font-family: var(--font-sans); font-size: var(--fs-body); color: var(--text-primary); background: var(--white); border: 1px solid var(--border-strong); border-radius: var(--radius-xs); padding: 13px 16px; width: 100%; min-height: 140px; resize: vertical; }
.dd-textarea:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 1px var(--gold-500); }
.contact__detail { display: flex; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-5); }
.contact__detail i { font-size: 24px; color: var(--ink-700); margin-top: 2px; }
.contact__detail .k { font: var(--fw-medium) var(--fs-eyebrow)/1 var(--font-sans); letter-spacing: var(--ls-nav); text-transform: uppercase; color: var(--text-secondary); margin-bottom: 6px; }
.contact__detail .v { font: var(--fw-regular) var(--fs-body)/1.5 var(--font-sans); color: var(--text-primary); }

/* ---- Shop search ---- */
.shop__search { display: flex; align-items: stretch; max-width: 520px; margin: 0 auto var(--space-7); }
.shop__search .dd-input { border-right: 0; border-radius: 0; }
.shop__search .dd-btn { border-radius: 0; flex: none; }
.shop__empty { color: var(--text-secondary); padding: var(--space-7) 0; text-align: center; }

/* Collections-from-DB image inside split media */
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__media.has-img { padding: 0; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}