/* ════════════════════════════════════════════════════════════
   ROOTED SHELVING — redesign overrides (loaded LAST, wins on load order)
   Fuses the light-editorial + warm palette from the approved mockup.
   Structure/markup/JS untouched; this only restyles.
   ════════════════════════════════════════════════════════════ */

:root {
  --ff-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ff-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* warm greige ground + toasted-amber accent (dodges the cream cliché) */
  --c-bg: #EBE7DE;
  --c-text: #191510;
  --c-text-light: #7C7362;
  --c-accent: #9A6A2B;
  --c-accent-hover: #B0803A;
  --c-dark: #171009;
  --c-beige: #F1EDE4;
  --c-border: #D8D2C5;
  --c-surface: #F5F1E8;
  --c-walnut: #7A4F2B;
  --c-brass: #C9A24B;

  --gutter: max(40px, calc((100vw - 1400px) / 2 + 40px));
}

/* ── Type ── */
.section-title { font-weight: 400; letter-spacing: -.02em; }
.section-eyebrow { color: var(--c-accent); }
.hero__title { font-weight: 300; letter-spacing: -.025em; }
.hero__title em, .hero__title i { font-style: italic; color: var(--c-accent); }

/* ── Buttons ── */
.btn { border-radius: 2px; letter-spacing: .1em; }
.btn--primary { background: var(--c-dark); color: var(--c-surface); }
.btn--primary:hover { background: var(--c-accent); }
.btn--ghost { border-color: var(--c-text); color: var(--c-text); }
.btn--ghost:hover { background: var(--c-text); color: var(--c-bg); }

/* ════ HERO — light lifestyle photo, left-aligned dark editorial text ════ */
.hero { height: clamp(560px, 84vh, 800px); max-height: 860px; }
.hero__slide::before {
  background: linear-gradient(90deg,
    rgba(235,231,222,.96) 0%,
    rgba(235,231,222,.74) 30%,
    rgba(235,231,222,.30) 56%,
    rgba(235,231,222,0) 80%);
}
.hero__content {
  top: 50%; bottom: auto; transform: translateY(-50%);
  left: var(--gutter); right: auto;
  max-width: 600px; color: var(--c-text); z-index: 2;
}
.hero__eyebrow { color: var(--c-accent); letter-spacing: .28em; font-weight: 600; }
.hero__title { color: var(--c-text); font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: .98; margin-bottom: 20px; }
.hero__subtitle { color: var(--c-text-light); font-size: 1.02rem; }
.hero__ctas .btn--primary { background: var(--c-dark); color: var(--c-surface); }
.hero__ctas .btn--primary:hover { background: var(--c-accent); }
.hero__ctas .btn--ghost { border: 0; border-bottom: 1.5px solid var(--c-text); color: var(--c-text); border-radius: 0; padding: 8px 2px; background: transparent; }
.hero__ctas .btn--ghost:hover { background: transparent; color: var(--c-accent); border-color: var(--c-accent); }
.hero__dots { left: var(--gutter); right: auto; transform: none; bottom: 34px; }
.hero__dot { width: 9px; height: 9px; background: rgba(25,21,16,.28); }
.hero__dot.active { background: var(--c-accent); width: 26px; border-radius: 100px; transform: none; }
.hero__arrow { background: rgba(244,241,233,.72); color: var(--c-text); border: 1px solid var(--c-border); backdrop-filter: blur(4px); }
.hero__arrow:hover { background: var(--c-surface); color: var(--c-text); }

/* ════ Sections rhythm ════ */
.categories { padding-top: 96px; padding-bottom: 40px; }
.section-header { margin-bottom: 44px; }

/* Category circles — refined ring + shadow */
.cat-circle__img { box-shadow: 0 18px 36px -22px rgba(60,45,25,.55); }
.cat-circle__img::after { box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }
.cat-circle:hover .cat-circle__img::after { box-shadow: inset 0 0 0 3px var(--c-accent); }
.cat-circle__name { font-weight: 600; }

/* Bestsellers / On sale band on soft surface */
.bestsellers { background: var(--c-beige); }
.product-card { border-radius: 4px; box-shadow: 0 1px 0 rgba(0,0,0,.02); }
.product-card:hover { box-shadow: 0 18px 44px -24px rgba(60,45,25,.4); }
.product-card__name { font-weight: 400; letter-spacing: -.005em; }
.product-card__price { color: var(--c-walnut); font-family: var(--ff-serif); font-size: 1.05rem; }
.product-card__badge { background: var(--c-dark); color: var(--c-surface); border-radius: 0; letter-spacing: .1em; }
.carousel-arrow { background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border); box-shadow: 0 6px 20px -10px rgba(0,0,0,.3); }
.carousel-arrow:hover { background: var(--c-dark); color: var(--c-surface); border-color: var(--c-dark); }

/* Collections */
.collections { padding-top: 20px; }
.collection-card { border-radius: 6px; }

/* Custom section */
.custom-section__image { border-radius: 6px; }
.custom-section__image img { aspect-ratio: 4/5; }

/* Testimonials — the dark editorial moment */
.testimonials { background: var(--c-dark); }
.testimonials .section-eyebrow { color: var(--c-brass); }
.testimonial-card { border-radius: 4px; background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.testimonial-card__stars { color: var(--c-brass); }
.testimonial-card p { font-family: var(--ff-serif); font-style: italic; }

/* Trust bar */
.trust-item svg { color: var(--c-accent); }

/* Footer / newsletter */
.footer__newsletter { background: var(--c-beige); }
.footer__col h4 { color: var(--c-brass); }
.footer__social a:hover { background: var(--c-accent); border-color: var(--c-accent); }

/* Text wordmark logo */
.brand-word { font-family: var(--ff-serif); font-weight: 500; font-size: 1.55rem; letter-spacing: -.01em; color: var(--c-text); line-height: 1; white-space: nowrap; }
.header.scrolled .brand-word { font-size: 1.35rem; }

/* Second header row — category bar */
.cat-bar { border-top: 1px solid var(--c-border); background: color-mix(in srgb, var(--c-bg) 92%, transparent); backdrop-filter: blur(12px); }
.cat-bar__inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.cat-bar__link { position: relative; padding: 13px 20px; font-size: .8rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--c-text-light); transition: color .2s; }
.cat-bar__link:hover { color: var(--c-accent); }
.cat-bar__link::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 7px; height: 1.5px; background: var(--c-accent); transform: scaleX(0); transition: transform .2s; }
.cat-bar__link:hover::after { transform: scaleX(1); }
.cat-bar__link--all { color: var(--c-text); font-weight: 600; }
@media (max-width: 900px) { .cat-bar { display: none; } }

/* Top bar + header harmony */
.top-bar { background: var(--c-dark); }
.nav-link::after { background: var(--c-accent); }
.cart-badge { background: var(--c-accent); }

/* ── Mobile hero ── */
@media (max-width: 768px) {
  .hero { height: clamp(480px, 76vh, 640px); }
  .hero__slide::before {
    background: linear-gradient(180deg, rgba(235,231,222,.86) 0%, rgba(235,231,222,.5) 46%, rgba(235,231,222,.84) 100%);
  }
  .hero__content { left: 20px; right: 20px; max-width: none; }
  .hero__dots { left: 20px; }
  .hero__title { font-size: clamp(2.2rem, 9vw, 3.2rem); }
}