/* ============================================================
   Chrysa Doré - MAISON ELEVATION LAYER
   Loaded LAST. Purely additive. Transforms the site from a warm
   back-to-school aesthetic into mature, restrained quiet luxury
   in the spirit of The Row / Hermes / Aesop / Loro Piana.

   Rules of engagement:
     - No copy / words / prices / names touched. Look + structure only.
     - Reuse existing tokens (--paper/--ink/--leather/--gold/--line ...)
       and the body data-attr system. Add --rf-* tokens only.
     - Preserve every JS hook, id, class used by partials.js / app.js.
     - Reduced-motion safe. No em-dashes anywhere.
   ============================================================ */

/* ------------------------------------------------------------
   0. MAISON TOKENS + PALETTE REFINEMENT
   We standardise the bodies onto data-palette="minimal" (cooler
   ivory + near-black ink). Below we further temper the ground so
   it reads flat and expensive rather than cozy and crafty, and we
   restrain the warm/childish accents (pen-blue, stamp-red).
   ------------------------------------------------------------ */
:root {
  /* Spacing scale (8px base) for disciplined future edits */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-5: 48px; --sp-6: 64px; --sp-7: 96px; --sp-8: 128px;

  /* Editorial section rhythm + gutters */
  --m-section-y: clamp(120px, 14vw, 200px);
  --m-section-sm-y: clamp(80px, 10vw, 140px);
  --m-gutter: clamp(28px, 6vw, 96px);

  /* Quiet-luxury easing + restrained elevation */
  --rf-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --m-shadow-1: 0 1px 2px rgba(20, 16, 10, .03), 0 10px 30px -22px rgba(20, 16, 10, .22);
  --m-shadow-2: 0 14px 40px -26px rgba(20, 16, 10, .30);

  /* A disciplined hairline-gold for rules / dividers only */
  --m-hairline-gold: rgba(184, 138, 58, .42);
}

/* Cool, near-monochrome ground. The authored data-palette="minimal"
   already supplies an ivory + near-black base (the quiet-luxury
   recipe), so here we only TEMPER what remains warm or playful.
   Scoped to body[data-palette] so this matches the palette selector
   specificity and, loading last, wins cleanly across every variant. */
body[data-palette] {
  /* Pale, cool ivory ground (kept close to "minimal") */
  --paper:        #faf6ef;
  --paper-deep:   #ece4d6;
  --paper-warm:   #fdfaf3;
  /* Deep editorial ink + near-black leather so brown stops
     tinting copy and italic accents read grown-up. */
  --ink:          #14110c;
  --ink-soft:     #443d2e;
  --leather:      #221d18;
  --leather-deep: #100d0a;
  /* Antique brass, unchanged in hue (frequency is restrained in CSS). */
  --gold:         #b88a3a;
  --gold-deep:    #8a6320;
  --gold-soft:    #d8b860;
  /* Retire the schoolbook ink-blue to a sophisticated near-ink. */
  --pen-blue:     #2c2620;
  /* Soften rubber-stamp red to a deep oxblood; the functional cart
     badge is restored to a clear, legible tone in section 3. */
  --stamp-red:    #8a3a26;
  /* Quieter hairlines for a more expensive, restrained ground. */
  --line:         rgba(20, 16, 10, 0.11);
  --line-strong:  rgba(20, 16, 10, 0.24);
}

/* Flatten the ground: drop the dotted paper texture and tame grain.
   A calm, even surface is the single biggest "expensive" cue. */
body { background-image: none !important; background: var(--paper); }
body::before { opacity: .12 !important; }

/* ------------------------------------------------------------
   1. NEUTRALISE CHILDISH / BACK-TO-SCHOOL DEVICES
   Hidden nodes stay in the DOM (inert) so no JS hook breaks.
   ------------------------------------------------------------ */

/* Sparkles + doodles: pure decoration, no copy. Remove entirely. */
.hero-sparkle,
.doodle,
.scroll-doodle-layer { display: none !important; }

/* Hero corner ticks + image label chrome: blueprint-y clutter. */
.tick,
.hero-img-label { display: none !important; }

/* Latent notebook / schoolpaper backgrounds: force plain paper if
   ever rendered (zero current instances, defensive guard). */
.notebook-bg, .grid-bg, .four-square-bg, .plaid-bg {
  background-image: none !important;
  background-color: var(--paper) !important;
}

/* Rubber-stamp / wax-seal artifacts. Keep all label TEXT, drop the
   playful rotate / red ink / contrast blot. Re-skin as a flat,
   upright hairline medallion (a quiet monogram, not a stamp). */
.stamp {
  transform: none !important;
  filter: none !important;
  background: none !important;
  color: var(--ink-soft) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 2px !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  opacity: 1 !important;
}
.stamp.stamp-round {
  border-radius: 50% !important;
  border-color: var(--m-hairline-gold) !important;
  color: var(--leather) !important;
}
.stamp-round .stamp-big {
  font-family: var(--font-display) !important;
  color: var(--leather) !important;
}

/* The home atelier "rubber stamp" overlay: quiet it to a flat
   engraved-style hallmark (text preserved). */
.xuong-visual-stamp {
  transform: none !important;
  filter: none !important;
  background: rgba(20, 16, 10, .28) !important;
  border: 1px solid var(--m-hairline-gold) !important;
  backdrop-filter: blur(3px);
}
.xuong-visual-stamp-line,
.xuong-visual-stamp-big { color: var(--paper-warm) !important; }

/* Handwriting font leaks: every --font-hand already aliases to the
   serif, but several inline styles still call it. Force them to a
   refined Cormorant italic so nothing reads as marker scribble. */
[style*="font-hand"],
.handnote,
.listing-hero-quote-signature,
.heritage-signature,
.story-pull-author,
.schedule-cell .ssub {
  font-family: var(--font-display) !important;
  font-style: italic !important;
}
.handnote, .schedule-cell .ssub { color: var(--ink-soft) !important; }

/* Hero sub-line "Bước Chân Đầu Tiên" was a script flourish, then a
   gilded clip. Restrain to a calm serif italic in muted leather. */
.hero-title .line3 {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 0.36em !important;
  letter-spacing: 0.01em !important;
  color: var(--leather) !important;
  -webkit-text-fill-color: var(--leather) !important;
  background: none !important;
  margin-top: 0.6em !important;
  opacity: .85;
}

/* Decorative bullet glyphs ("●") in xpage eyebrows: text content
   stays, but render them weightless so the label leads, not the dot. */
.xpage-eyebrow { letter-spacing: 0.24em; }

/* ------------------------------------------------------------
   2. TOP BAR - static credential strip, no marquee
   ------------------------------------------------------------ */
.top-bar {
  background: var(--leather-deep);
  padding: 11px 24px;
  border-bottom: 1px solid rgba(216, 184, 96, .14);
  font-size: 10.5px;
  letter-spacing: 0.26em;
}
.top-bar-track {
  animation: none !important;
  width: auto !important;
  justify-content: center;
  gap: 22px;
}
/* Show one calm centered segment; suppress the duplicated marquee
   copies (content untouched, just not displayed). */
.top-bar-track > span:nth-child(n+4) { display: none !important; }
.top-bar-track span { gap: 22px; opacity: .92; }
.top-bar-track .dot {
  background: var(--gold);
  opacity: .5;
  width: 3px; height: 3px;
}
/* On narrow screens show only the short brand tagline (3rd segment)
   so the strip never clips. Long promo + separators are suppressed. */
@media (max-width: 760px) {
  .top-bar { padding: 10px 16px; letter-spacing: 0.2em; }
  .top-bar-track { gap: 0; }
  .top-bar-track > span:nth-child(1),
  .top-bar-track > span:nth-child(2),
  .top-bar-track > span:nth-child(n+4) { display: none !important; }
  .top-bar-track > span:nth-child(3) { display: inline-flex !important; }
}

/* ------------------------------------------------------------
   3. NAVIGATION - quieter crest, unified micro-labels
   ------------------------------------------------------------ */
.nav {
  background: rgba(251, 247, 240, 0.82);
  border-bottom: 1px solid var(--line);
}
.nav-inner { padding: 10px var(--m-gutter); }

.nav-link {
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  white-space: nowrap;
}
.nav-link:hover { color: var(--ink); }
.nav-link::after { background: var(--ink); height: 1px; }

/* Logo: smaller, brushed-gold, no spin / no rotate-on-hover */
.nav-logo { font-size: 30px; font-style: italic; }
.nav-logo .crest {
  width: 46px; height: 46px;
  animation: none !important;
  background: linear-gradient(135deg, #9a7327 0%, #d4a853 45%, #e8c44a 70%, #b8860b 100%);
  background-size: 100% 100%;
}
.nav-logo:hover .crest {
  transform: scale(1.04) !important;
  filter: drop-shadow(0 0 10px rgba(212, 168, 83, 0.4));
}

/* Functional cart badge: keep a clear, legible mark (not oxblood). */
.cart-count {
  background: #a23c28;
  font-weight: 600;
  letter-spacing: 0;
}

/* ------------------------------------------------------------
   4. TYPOGRAPHY - editorial contrast + label discipline
   ------------------------------------------------------------ */
.hero-title, .section-title, .pdp-title, .page-title,
h1, h2, .collection-info h3, .story-section-title {
  text-wrap: balance;
  font-optical-sizing: auto;
  font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "calt" 1;
  font-variant-ligatures: common-ligatures contextual;
}
.section-title { line-height: 1.04; letter-spacing: -0.012em; }
.hero-title { letter-spacing: -0.022em; }

/* One restrained italic accent word, never a whole gilded line. */
.section-title em, .hero-title .line2,
.collection-info h3 em, .pdp-title em, .heritage-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--leather);
}

/* The single unified micro-label (eyebrows, nav, tags, top-bar). */
.eyebrow, .hero-meta, .hero-blurb-mono, .collection-tag,
.ornament-word, .pdp-eyebrow, .hallmark-sub, .listing-hero-eyebrow,
.listing-hero-quote-eyebrow, .footer-col h5, .footer-newsletter label,
.xpage-eyebrow {
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--ink-soft);
}
.eyebrow { color: var(--ink-soft); }
.eyebrow::before { background: var(--line-strong); width: 32px; }

/* Long-form readability + softer body ink */
.story-body, .section-desc, .pdp-desc, .hero-blurb,
.story-chapter-text p, .xpage-body, .xpage-lead {
  text-wrap: pretty;
  color: var(--ink-soft);
}
.section-desc { font-size: 17px; line-height: 1.7; margin-top: 28px; }

/* Prices: clean sans, tabular figures, not serif. */
.pdp-price, .price, .product-price, .cart-total, .money,
.cart-sum-row span, #cart-total, #cart-subtotal {
  font-family: var(--font-sans);
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0.005em;
}

/* ------------------------------------------------------------
   5. SPACING / RHYTHM - generous editorial air
   ------------------------------------------------------------ */
.section { padding: var(--m-section-y) var(--m-gutter); }
.section-sm { padding: var(--m-section-sm-y) var(--m-gutter); }
.section-tight { padding: clamp(56px, 7vw, 96px) var(--m-gutter); }

.collections-header { margin-bottom: clamp(64px, 8vw, 104px); }
.collections-grid { gap: clamp(24px, 3vw, 44px); }
.products-grid { gap: clamp(32px, 3vw, 56px); }

/* ------------------------------------------------------------
   6. SECTION HEADER ACCENT - quiet hairline-gold rule
   ------------------------------------------------------------ */
.section-title::after {
  content: ""; display: block;
  width: 44px; height: 1px; margin-top: 24px;
  background: linear-gradient(90deg, var(--gold), transparent);
  opacity: .55;
}

/* ------------------------------------------------------------
   7. ORNAMENT DIVIDERS - single thin centered rule + small mark
   ------------------------------------------------------------ */
.ornament-divider .ornament-line {
  background: var(--line-strong) !important;
  opacity: .6 !important;
  height: 1px !important;
}
.ornament-divider .ornament-mark svg { color: var(--gold); opacity: .8; }
.ornament-divider .ornament-word { color: var(--ink-soft); letter-spacing: 0.24em; }
.ornament-divider .diamond { background: var(--gold) !important; opacity: .8; }

/* ------------------------------------------------------------
   8. HERO - editorial composition, more whitespace
   ------------------------------------------------------------ */
.hero { background: var(--paper); padding: clamp(24px, 4vw, 56px) var(--m-gutter) clamp(72px, 9vw, 120px); }
.hero-frame { grid-template-columns: 0.9fr 1.25fr; gap: clamp(40px, 5vw, 80px); }
.hero-left { padding: clamp(16px, 3vw, 40px) 0; min-height: 74vh; }
.hero-eyebrow-row { margin-bottom: clamp(28px, 4vw, 44px); }
.hero-chip {
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  background: transparent;
}
.hero-img { filter: contrast(1.02) saturate(0.96); }
/* Hairline gold inner frame: keep, but a single quiet rule. */
.hero-right::after {
  content: ""; position: absolute; inset: 14px; pointer-events: none;
  border: 1px solid var(--m-hairline-gold); z-index: 3;
}

/* ------------------------------------------------------------
   9. HALLMARKS - hairline trust band (Aesop-style strip)
   ------------------------------------------------------------ */
.hallmark {
  position: relative;
  padding: clamp(20px, 2.4vw, 32px) clamp(20px, 2.4vw, 36px);
}
.hallmark + .hallmark::before {
  content: ""; position: absolute; left: 0; top: 14%; bottom: 14%;
  width: 1px; background: var(--line);
}
.hallmark-icon { color: var(--gold-deep); }

/* ------------------------------------------------------------
   10. CARDS - editorial, images float on the ground
   ------------------------------------------------------------ */
.product-card .product-img-wrap,
.product-img-wrap { border: none; background: var(--paper-deep); }
.product-img-wrap { aspect-ratio: 4 / 5; }

.collection-card {
  background: transparent;
  border: none;
  box-shadow: none;
}
.collection-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--m-shadow-2);
}
.collection-img { aspect-ratio: 4 / 5; background: var(--paper-deep); }
.collection-info { padding: 22px 4px 8px; }
.collection-info h3 { font-style: italic; font-weight: 500; }

.product-card { box-shadow: none; }
.product-card:hover { transform: translateY(-3px); }

/* Restrained image zoom (quieter than the playful 1.055) */
.collection-card:hover .collection-img img,
.product-card:hover .product-img img { transform: scale(1.03) !important; }

/* Corner brackets on cards: childish framing. Hide them. */
.collection-card .corner-bracket { display: none !important; }

/* The always-on gold double-frame on hover: reduce to a faint
   ink hairline so metal is not on every tile. */
.collection-card::after, .product-card::after {
  border-color: var(--line-strong) !important;
  inset: 12px;
}
.collection-card:hover::after, .product-card:hover::after {
  opacity: .28 !important; inset: 16px;
}

/* Collection arrow: ink, not leather-brown */
.collection-arrow { border-color: var(--line-strong); color: var(--ink); }
.collection-card:hover .collection-arrow {
  background: var(--ink); color: var(--paper-warm); border-color: var(--ink);
}

.collection-tag {
  background: var(--paper-warm);
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  font-weight: 500;
}

/* ------------------------------------------------------------
   11. BUTTONS - more presence, gold reserved for hover sweep
   ------------------------------------------------------------ */
.btn {
  padding: 16px 36px;
  font-weight: 500;
  letter-spacing: 0.2em;
  border: 1px solid var(--ink);
  color: var(--ink);
}
.btn:hover { color: var(--paper-warm); border-color: var(--gold); }
.btn-filled { background: var(--leather-deep); border-color: var(--leather-deep); color: var(--paper-warm); }
.btn-filled:hover { background: var(--leather); border-color: var(--gold); }

/* ------------------------------------------------------------
   12. PRODUCT DETAIL (PDP) - sticky info, wider gallery
   ------------------------------------------------------------ */
@media (min-width: 900px) {
  .pdp { grid-template-columns: 1.32fr 1fr; gap: clamp(48px, 5vw, 88px); }
  .pdp-info {
    position: sticky;
    top: 150px;
    align-self: start;
  }
}
.pdp-price-tag {
  background: transparent !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--ink-soft) !important;
}
.pdp-meta { border-top: 1px solid var(--line); }
.pdp-meta-item { border-color: var(--line); }
.pdp-accordion, .pdp-accordion details { border-color: var(--line); }
#related-products-grid { gap: clamp(24px, 2.4vw, 44px) !important; }

/* ------------------------------------------------------------
   13. LISTING - serif page title, sticky toolbar, roomy grid
   ------------------------------------------------------------ */
.page-title,
.page-title[style*="font-hand"],
.page-title em,
.page-title[style] em {
  font-family: var(--font-display) !important;
  font-style: normal;
}
.page-title em { font-style: italic !important; color: var(--leather) !important; }

.toolbar {
  position: sticky;
  top: 116px;
  z-index: 40;
  background: rgba(251, 247, 240, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

@media (min-width: 1280px) {
  .listing-hero-section + .section .products-grid,
  #products-grid { grid-template-columns: repeat(3, 1fr); }
}

.listing-hero-image-caption,
.listing-hero-title { color: var(--paper-warm); }
.listing-hero-quote-signature { color: var(--gold-soft) !important; }

/* ------------------------------------------------------------
   14. CART - sticky ledger-style summary
   ------------------------------------------------------------ */
@media (min-width: 860px) {
  .cart-grid { grid-template-columns: 1.7fr 1fr; gap: clamp(40px, 5vw, 80px); }
  .cart-summary { position: sticky; top: 150px; align-self: start; }
}
.cart-item { border-color: var(--line); }
.cart-checkout, .cart-checkout-btn {
  letter-spacing: 0.2em;
  font-weight: 500;
}
.cart-empty-state .cart-empty-glyph,
.cart-empty-state [class*="glyph"] { color: var(--line-strong); }

/* ------------------------------------------------------------
   15. WISHLIST - roomy 3-up matching the listing rhythm
   ------------------------------------------------------------ */
@media (min-width: 1100px) {
  #wishlist-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ------------------------------------------------------------
   16. STORY + XUONG - subtract ornament, magazine cadence
   ------------------------------------------------------------ */
/* Stop the rotating crest; render it static. */
.story-hero-crest .crest-spin,
.xpage-hero-crest .crest-spin { animation: none !important; }

/* Edition rails + corner marks: ornamental framing. Quiet them. */
.story-hero-rail, .xpage-hero-rail { opacity: .35 !important; }
.story-hero-corner, .xpage-hero-corner,
.xpage-feature-corner, .xpage-machinery-corner { opacity: .4 !important; }
.story-hero-edition-line, .xpage-hero-edition-line { opacity: .7; }
.story-hero-edition-mark svg, .xpage-hero-edition-mark { filter: none !important; }

/* Drop-cap stays (editorial) but in a refined leather, not gold. */
.dropcap, .story-hero-intro .dropcap, .xpage-hero-intro .dropcap {
  color: var(--leather) !important;
}

/* Magazine chapter cadence: larger numerals, more inter-chapter air. */
.story-chapter { padding-top: clamp(64px, 8vw, 120px); padding-bottom: clamp(64px, 8vw, 120px); }
.story-chapter-num { color: var(--m-hairline-gold) !important; }

/* Stat / capacity bands: hairline strip rather than boxed cards. */
.xpage-capacity-cell { background: transparent !important; border-color: var(--line) !important; }
.xpage-capacity-cell .xpage-capacity-num,
.xpage-cap-num { color: var(--leather) !important; }

/* xpage feature image tag: quiet hairline label */
.xpage-feature-img-tag {
  background: rgba(20, 16, 10, .3) !important;
  border: 1px solid var(--m-hairline-gold) !important;
  letter-spacing: 0.24em;
}

/* ------------------------------------------------------------
   17. FOOTER - couture spacing, hairline newsletter field
   ------------------------------------------------------------ */
.footer { padding: clamp(88px, 10vw, 132px) var(--m-gutter) 36px; }
.footer-tagline { font-family: var(--font-display) !important; font-style: italic; color: var(--gold-soft); }
.footer-newsletter-row {
  border: none;
  border-bottom: 1px solid rgba(216, 184, 96, .35);
}
.footer-newsletter input { background: transparent; }
.footer-newsletter button {
  background: transparent;
  color: var(--gold-soft);
  border-left: 1px solid rgba(216, 184, 96, .35);
  font-weight: 500;
  letter-spacing: 0.2em;
}
.footer-newsletter button:hover { color: var(--paper-warm); }
.footer-col h5 { color: var(--gold-soft); font-weight: 500; }

/* Mobile-menu footer script tagline rendered serif (no JS edit) */
.mobile-menu-footer p[style*="font-hand"] {
  font-family: var(--font-display) !important;
  font-style: italic;
  color: var(--gold-soft) !important;
}

/* ------------------------------------------------------------
   18. GOLD DISCIPLINE - scarce metal
   ------------------------------------------------------------ */
@media (pointer: fine) {
  * { scrollbar-color: var(--line-strong) transparent; }
  *::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border: 3px solid var(--paper);
    border-radius: 10px;
  }
}
/* Selection: quiet ink on pale ground */
::selection { background: var(--gold-soft); color: var(--leather-deep); }

/* ------------------------------------------------------------
   19. MOTION - subtle, slow, reduced-motion safe
   ------------------------------------------------------------ */
.collection-card, .product-card, .pdp-thumb {
  transition: transform .5s var(--rf-ease), box-shadow .5s var(--rf-ease);
}
.collection-img img, .product-card .product-img img, .hero-img {
  transition: transform .9s var(--rf-ease), filter .6s ease;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ------------------------------------------------------------
   MOBILE HEADER FIT — with the language flags collapsed into a
   dropdown (see .nav-lang-wrap), reclaim the freed space so the
   "Chrysa Doré" logo stays on a single line on phones.
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  .nav-inner { gap: 12px; padding-left: 16px; padding-right: 16px; }
  .nav-logo { font-size: 26px; }
  .nav-logo span { white-space: nowrap; }
  .nav-logo .crest { width: 40px; height: 40px; }
}