/* ═══════════════════════════════════════════════════════════
   HOMBISILU DESIGN SYSTEM
   Loaded after style.css. Owns the rebuilt sections (ds-*)
   and modernises the shared shell every template already uses.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ────────────────────────────────────────────── */
:root {
  /* Brand — sourced from the actual logo (measured maroon, not invented). */
  --ds-forest:      #6B1E28;
  --ds-forest-deep: #431016;
  --ds-forest-soft: #8C2E3A;
  --ds-gold:        #C9932B;
  --ds-gold-lt:     #F0C244;
  --ds-clay:        #6B1E28;

  /* Canvas */
  --ds-cream:    #FBF7F0;
  --ds-cream-2:  #F5EFE4;
  --ds-white:    #FFFFFF;
  --ds-ink:      #1B2A1D;
  --ds-ink-2:    #44553F;
  --ds-muted:    #7A8878;
  --ds-line:     #E7DFD1;
  --ds-line-2:   rgba(107,30,40,.10);

  /* Fluid type scale — one clamp per step, no per-breakpoint overrides */
  --ds-display: clamp(2.6rem, 1.6rem + 4.4vw, 5.2rem);
  --ds-h1:      clamp(2.1rem, 1.4rem + 3.2vw, 3.9rem);
  --ds-h2:      clamp(1.75rem, 1.25rem + 2.2vw, 2.9rem);
  --ds-h3:      clamp(1.15rem, 1rem + .7vw, 1.5rem);
  --ds-lead:    clamp(1rem, .95rem + .35vw, 1.15rem);
  --ds-body:    clamp(.95rem, .92rem + .16vw, 1.02rem);
  --ds-small:   .82rem;
  --ds-micro:   .7rem;

  /* Fluid spacing */
  --ds-s1: clamp(.5rem, .4rem + .3vw, .75rem);
  --ds-s2: clamp(.85rem, .7rem + .5vw, 1.25rem);
  --ds-s3: clamp(1.25rem, 1rem + .9vw, 2rem);
  --ds-s4: clamp(2rem, 1.5rem + 1.8vw, 3.25rem);
  --ds-s5: clamp(3rem, 2rem + 3.6vw, 6rem);
  --ds-s6: clamp(4rem, 2.5rem + 5.5vw, 8rem);

  /* Shape */
  --ds-r-sm: 12px;
  --ds-r-md: 18px;
  --ds-r-lg: 26px;
  --ds-r-xl: 36px;
  --ds-r-pill: 999px;

  /* Elevation — tinted, layered */
  --ds-e1: 0 1px 2px rgba(67,16,22,.05), 0 2px 8px rgba(67,16,22,.045);
  --ds-e2: 0 2px 4px rgba(67,16,22,.05), 0 10px 28px rgba(67,16,22,.08);
  --ds-e3: 0 4px 10px rgba(67,16,22,.06), 0 24px 56px rgba(67,16,22,.13);
  --ds-glow-gold: 0 10px 32px rgba(201,147,43,.28);

  /* Motion */
  --ds-fast: .18s cubic-bezier(.22,1,.36,1);
  --ds-base: .34s cubic-bezier(.22,1,.36,1);
  --ds-slow: .6s cubic-bezier(.22,1,.36,1);

  /* Layout */
  --ds-max: 1240px;
  --ds-gutter: clamp(1rem, .5rem + 2.2vw, 2.5rem);
}

/* ── 2. PRIMITIVES ────────────────────────────────────────── */
.ds-wrap {
  width: 100%;
  max-width: var(--ds-max);
  margin-inline: auto;
  padding-inline: var(--ds-gutter);
}
.ds-wrap--narrow { max-width: 880px; }

.ds-section { padding-block: var(--ds-s6); position: relative; }
.ds-section--tight { padding-block: var(--ds-s5); }
.ds-section--cream { background: var(--ds-cream); }
.ds-section--cream2 { background: var(--ds-cream-2); }
.ds-section--white { background: var(--ds-white); }
.ds-section--dark {
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(140,46,58,.55), transparent 70%),
    radial-gradient(700px 380px at 95% 100%, rgba(201,147,43,.22), transparent 65%),
    var(--ds-forest-deep);
  color: #fff;
}

/* Section heading block */
.ds-head { max-width: 44rem; margin-bottom: var(--ds-s4); }
.ds-head--center { margin-inline: auto; text-align: center; }

.ds-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--ds-micro);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ds-gold);
  margin-bottom: var(--ds-s2);
}
.ds-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.ds-head--center .ds-eyebrow::after {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.ds-title {
  font-family: var(--font-serif);
  font-size: var(--ds-h2);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--ds-forest);
  text-wrap: balance;
}
.ds-section--dark .ds-title { color: #fff; }

.ds-sub {
  margin-top: var(--ds-s2);
  font-size: var(--ds-lead);
  line-height: 1.65;
  color: var(--ds-muted);
  text-wrap: pretty;
}
.ds-section--dark .ds-sub { color: rgba(255,255,255,.68); }

/* Buttons */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.7rem;
  min-height: 48px;
  border: 1.5px solid transparent;
  border-radius: var(--ds-r-pill);
  font-size: .92rem;
  font-weight: 650;
  letter-spacing: .01em;
  line-height: 1;
  cursor: pointer;
  text-align: center;
  transition: transform var(--ds-fast), box-shadow var(--ds-base),
              background-color var(--ds-base), color var(--ds-base),
              border-color var(--ds-base);
}
.ds-btn:active { transform: translateY(1px); }
.ds-btn svg { flex: none; }

.ds-btn--primary {
  background: var(--ds-forest);
  color: #fff;
  box-shadow: var(--ds-e2);
}
.ds-btn--gold {
  background: linear-gradient(135deg, var(--ds-gold-lt), var(--ds-gold));
  color: #24170A;
  box-shadow: var(--ds-glow-gold);
}
.ds-btn--outline {
  background: transparent;
  color: var(--ds-forest);
  border-color: var(--ds-line);
}
.ds-btn--white { background: #fff; color: var(--ds-forest); box-shadow: var(--ds-e2); }
.ds-btn--ghost-light {
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: rgba(255,255,255,.3);
  backdrop-filter: blur(6px);
}

@media (hover: hover) and (pointer: fine) {
  .ds-btn--primary:hover { background: var(--ds-forest-deep); box-shadow: var(--ds-e3); transform: translateY(-2px); }
  .ds-btn--gold:hover    { box-shadow: 0 14px 40px rgba(201,147,43,.4); transform: translateY(-2px); }
  .ds-btn--outline:hover { border-color: var(--ds-forest); background: rgba(107,30,40,.05); }
  .ds-btn--white:hover   { transform: translateY(-2px); box-shadow: var(--ds-e3); }
  .ds-btn--ghost-light:hover { background: rgba(255,255,255,.16); }
}

/* Link with sliding arrow */
.ds-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .86rem;
  font-weight: 650;
  color: var(--ds-forest);
}
.ds-link svg { transition: transform var(--ds-base); }
.ds-link:hover svg { transform: translateX(4px); }

/* Pills / chips */
.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .8rem;
  border-radius: var(--ds-r-pill);
  background: rgba(107,30,40,.07);
  border: 1px solid var(--ds-line-2);
  font-size: var(--ds-small);
  font-weight: 600;
  color: var(--ds-forest);
}
.ds-chip--gold { background: rgba(201,147,43,.12); border-color: rgba(201,147,43,.25); color: #8A6416; }
.ds-chip--light { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #fff; }

/* Card shell */
.ds-card {
  position: relative;
  background: var(--ds-white);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
  overflow: hidden;
  transition: transform var(--ds-base), box-shadow var(--ds-base), border-color var(--ds-base);
}
@media (hover: hover) and (pointer: fine) {
  .ds-card:hover { transform: translateY(-5px); box-shadow: var(--ds-e3); border-color: rgba(201,147,43,.35); }
}

/* Auto-fit grid — no breakpoint maths needed */
.ds-grid { display: grid; gap: var(--ds-s3); }
.ds-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.ds-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.ds-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }

/* ── 3. HERO ──────────────────────────────────────────────── */
.ds-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(1100px 600px at 80% 10%, rgba(201,147,43,.16), transparent 60%),
    radial-gradient(800px 500px at 5% 90%, rgba(140,46,58,.12), transparent 60%),
    var(--ds-cream);
  padding-block: clamp(2.5rem, 1rem + 6vw, 6rem) var(--ds-s6);
}
/* Soft organic blob behind the product shot */
.ds-hero::after {
  content: "";
  position: absolute;
  inset: auto -10% 10% auto;
  width: min(60vw, 620px);
  aspect-ratio: 1;
  background: radial-gradient(circle at 40% 40%, rgba(140,46,58,.14), transparent 62%);
  border-radius: 46% 54% 62% 38% / 45% 38% 62% 55%;
  z-index: -1;
  pointer-events: none;
}

.ds-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(1.5rem, 1rem + 4vw, 4.5rem);
}
@media (max-width: 900px) {
  .ds-hero-grid { grid-template-columns: 1fr; text-align: center; }
  .ds-hero-copy { order: 2; }
  .ds-hero-media { order: 1; }
  .ds-hero .ds-eyebrow, .ds-hero-trust, .ds-hero-actions { justify-content: center; }
  .ds-hero-lead { margin-inline: auto; }
}

.ds-hero-title {
  font-family: var(--font-serif);
  font-size: var(--ds-display);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.03em;
  color: var(--ds-forest-deep);
  text-wrap: balance;
}
.ds-hero-title em {
  font-style: italic;
  color: var(--ds-gold);
  /* Hand-drawn underline that scales with the text */
  background-image: linear-gradient(transparent 72%, rgba(201,147,43,.28) 72%);
}

.ds-hero-lead {
  margin-top: var(--ds-s3);
  max-width: 46ch;
  font-size: var(--ds-lead);
  line-height: 1.7;
  color: var(--ds-ink-2);
}

.ds-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-s2);
  margin-top: var(--ds-s4);
}

.ds-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-s2);
  margin-top: var(--ds-s4);
  padding-top: var(--ds-s3);
  border-top: 1px dashed var(--ds-line);
}
.ds-hero-trust-item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--ds-small);
  font-weight: 600;
  color: var(--ds-ink-2);
}
.ds-hero-trust-item svg { color: var(--ds-forest-soft); flex: none; }

/* Product shot on a gold ring */
.ds-hero-media { position: relative; display: grid; place-items: center; }
.ds-hero-ring {
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    conic-gradient(from 200deg, rgba(201,147,43,.30), rgba(140,46,58,.20), rgba(201,147,43,.30));
  padding: 10px;
}
.ds-hero-ring::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: linear-gradient(160deg, #fff, var(--ds-cream-2));
  box-shadow: inset 0 2px 20px rgba(67,16,22,.06);
}
.ds-hero-img {
  position: relative;
  width: 88%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 24px 40px rgba(67,16,22,.22));
  animation: ds-float 7s ease-in-out infinite;
}
@keyframes ds-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* Floating stat badges around the ring */
.ds-hero-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1rem;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  box-shadow: var(--ds-e2);
  font-size: var(--ds-small);
  font-weight: 650;
  color: var(--ds-ink);
  white-space: nowrap;
}
.ds-hero-badge strong { display: block; font-size: 1rem; color: var(--ds-forest); line-height: 1.1; }
.ds-hero-badge span   { display: block; font-size: var(--ds-micro); color: var(--ds-muted); font-weight: 600; }
.ds-hero-badge--tl { top: 6%;  left: -4%; }
.ds-hero-badge--br { bottom: 8%; right: -4%; }
@media (max-width: 480px) {
  .ds-hero-badge--tl { left: -2%; scale: .88; }
  .ds-hero-badge--br { right: -2%; scale: .88; }
}

/* ── 4. TICKER ────────────────────────────────────────────── */
.ds-ticker {
  background: var(--ds-forest);
  color: #fff;
  padding-block: .85rem;
  overflow: hidden;
  /* Fade the edges instead of hard-cutting the strip */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ds-ticker-track {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  width: max-content;
  animation: ds-marquee 38s linear infinite;
}
.ds-ticker:hover .ds-ticker-track { animation-play-state: paused; }
.ds-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--ds-small);
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
}
.ds-ticker-star { color: var(--ds-gold-lt); font-size: .7rem; }
@keyframes ds-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── 5. INFO BAR ──────────────────────────────────────────── */
.ds-infobar { background: var(--ds-white); border-bottom: 1px solid var(--ds-line); }
.ds-infobar-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--ds-s2);
  padding-block: var(--ds-s3);
}
.ds-infobar-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: var(--ds-small);
  color: var(--ds-ink-2);
  line-height: 1.4;
}
.ds-infobar-item svg { flex: none; color: var(--ds-gold); }
.ds-infobar-item a:hover { color: var(--ds-forest); text-decoration: underline; }

/* ── 6. STORY (split, offset image) ───────────────────────── */
.ds-story {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
@media (max-width: 900px) { .ds-story { grid-template-columns: 1fr; } }

.ds-story-figure { position: relative; }
.ds-story-figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--ds-r-xl);
  box-shadow: var(--ds-e3);
}
/* Gold frame offset behind the photo */
.ds-story-figure::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 2px solid rgba(201,147,43,.4);
  border-radius: var(--ds-r-xl);
  z-index: -1;
}
.ds-story-tag {
  position: absolute;
  right: clamp(-14px, -1vw, 0px);
  bottom: 8%;
  background: var(--ds-white);
  border-radius: var(--ds-r-md);
  box-shadow: var(--ds-e3);
  padding: var(--ds-s2) var(--ds-s3);
  text-align: center;
  min-width: 132px;
}
.ds-story-tag strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.9rem;
  color: var(--ds-gold);
  line-height: 1;
}
.ds-story-tag span { font-size: var(--ds-micro); text-transform: uppercase; letter-spacing: .12em; color: var(--ds-muted); font-weight: 700; }

.ds-quote {
  margin: var(--ds-s3) 0;
  padding: var(--ds-s3);
  border-left: 3px solid var(--ds-gold);
  background: rgba(201,147,43,.07);
  border-radius: 0 var(--ds-r-md) var(--ds-r-md) 0;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--ds-forest);
}
.ds-quote cite { display: block; margin-top: .6rem; font-size: var(--ds-small); font-style: normal; color: var(--ds-muted); }

.ds-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ds-s2);
  margin: var(--ds-s3) 0;
  padding: var(--ds-s3) 0;
  border-top: 1px solid var(--ds-line);
  border-bottom: 1px solid var(--ds-line);
}
.ds-stat strong {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  color: var(--ds-forest);
  line-height: 1;
}
.ds-stat span { font-size: var(--ds-micro); text-transform: uppercase; letter-spacing: .1em; color: var(--ds-muted); font-weight: 700; }

/* ── 7. CATEGORY BENTO ────────────────────────────────────── */
.ds-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--ds-s2);
}
.ds-bento-card {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .5rem;
  min-height: 210px;
  padding: var(--ds-s3);
  border-radius: var(--ds-r-lg);
  background: var(--ds-white);
  border: 1px solid var(--ds-line);
  overflow: hidden;
  position: relative;
  isolation: isolate;
  transition: transform var(--ds-base), box-shadow var(--ds-base), border-color var(--ds-base);
}
/* First two tiles are wide so the grid reads as designed, not generated */
.ds-bento-card:nth-child(1),
.ds-bento-card:nth-child(2) { grid-column: span 3; min-height: 260px; }

.ds-bento-card::before {
  content: "";
  position: absolute;
  inset: auto -20% -40% auto;
  width: 220px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,147,43,.16), transparent 68%);
  z-index: -1;
  transition: transform var(--ds-slow);
}
@media (hover: hover) and (pointer: fine) {
  .ds-bento-card:hover { transform: translateY(-5px); box-shadow: var(--ds-e3); border-color: rgba(201,147,43,.4); }
  .ds-bento-card:hover::before { transform: scale(1.35); }
}
.ds-bento-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--ds-r-md);
  background: rgba(107,30,40,.07);
  color: var(--ds-forest);
  margin-bottom: auto;
}
.ds-bento-name {
  font-family: var(--font-serif);
  font-size: var(--ds-h3);
  font-weight: 700;
  color: var(--ds-forest);
  line-height: 1.2;
}
.ds-bento-desc { font-size: var(--ds-small); color: var(--ds-muted); line-height: 1.55; }

@media (max-width: 900px) {
  .ds-bento { grid-template-columns: repeat(4, 1fr); }
  .ds-bento-card { grid-column: span 2; }
  .ds-bento-card:nth-child(1),
  .ds-bento-card:nth-child(2) { grid-column: span 4; min-height: 200px; }
}
@media (max-width: 560px) {
  .ds-bento { grid-template-columns: 1fr; }
  .ds-bento-card,
  .ds-bento-card:nth-child(1),
  .ds-bento-card:nth-child(2) { grid-column: span 1; min-height: 0; }
}

/* ── 8. PRODUCT CARD ──────────────────────────────────────── */
.ds-prod {
  display: flex;
  flex-direction: column;
  background: var(--ds-white);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
  overflow: hidden;
  transition: transform var(--ds-base), box-shadow var(--ds-base), border-color var(--ds-base);
}
@media (hover: hover) and (pointer: fine) {
  .ds-prod:hover { transform: translateY(-5px); box-shadow: var(--ds-e3); border-color: rgba(201,147,43,.35); }
  .ds-prod:hover .ds-prod-img img { transform: scale(1.06); }
}
.ds-prod-img {
  position: relative;
  display: block;
  aspect-ratio: 1;
  background: linear-gradient(150deg, var(--ds-cream), var(--ds-cream-2));
  overflow: hidden;
}
.ds-prod-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ds-slow);
}
.ds-prod-img .ds-ph { width: 100%; height: 100%; display: grid; place-items: center; color: rgba(201,147,43,.55); }
.ds-prod-flag {
  position: absolute;
  top: .75rem;
  left: .75rem;
  padding: .3rem .7rem;
  border-radius: var(--ds-r-pill);
  background: var(--ds-forest);
  color: #fff;
  font-size: var(--ds-micro);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ds-prod-flag--sale { background: #B3341F; }
.ds-prod-flag--gold { background: linear-gradient(135deg, var(--ds-gold-lt), var(--ds-gold)); color: #24170A; }

.ds-prod-body { display: flex; flex-direction: column; gap: .5rem; padding: var(--ds-s3); flex: 1; }
/* One line always, even for longer category names ("Honey & Natural
   Sweeteners") — a card whose category wraps to two lines pushes its title,
   stars and price down relative to its row-mates, which is what "cards
   aren't the same size" actually looks like even though the outer card
   height is already equal. */
.ds-prod-cat {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--ds-micro);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ds-gold);
  font-weight: 700;
}
/* Clamped to 2 lines so a rare long title can't blow out card height, but
   NOT height-reserved to always occupy 2 lines — that traded ragged card
   alignment for a worse problem: a visible dead-space gap under every
   short, one-line title. The single-line category fix above already
   removes most of the row-to-row misalignment; what's left (a few px of
   stars/price drift depending on whether a title wraps) is unnoticeable
   and far better than an empty gap on every short-titled card. */
.ds-prod-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ds-ink);
}
.ds-prod-title a:hover { color: var(--ds-forest); }
.ds-prod-stars { display: flex; gap: 2px; color: var(--ds-gold); }
/* No margin-top:auto here on purpose. That bottom-anchored the price+button
   in an equal-height grid row, which sounds right but actually looks wrong:
   the "leftover" height in a stretched row always lands as one lump gap
   directly above whichever element has the auto margin, and how much
   leftover space there is depends entirely on how many lines the title
   above happened to wrap to. A 1-line-title card ended up with a 30px gap
   before the price while a 2-line-title card sitting right next to it had
   8px — different on every card, and bigger than any of the deliberate
   gaps elsewhere. Letting price/button follow stars with the same normal
   flex gap keeps spacing identical everywhere; the trade-off is that card
   heights in a row can now differ by up to one text line, which is far
   less visible than an uneven gap in the middle of the card. */
.ds-prod-price {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ds-forest);
}
.ds-prod-price del { font-size: .85rem; color: var(--ds-muted); font-weight: 400; margin-right: .35rem; }
.ds-prod-price ins { text-decoration: none; }
.ds-prod-cta {
  margin-top: var(--ds-s2);
  width: 100%;
  /* In a narrow rail card, "Add to Cart" was wrapping to three lines inside
     the pill. Let the label shrink rather than break. */
  white-space: nowrap;
  padding-inline: 1rem;
  font-size: .86rem;
}
.ds-prod-title { overflow-wrap: break-word; hyphens: auto; }

/* ── 9. DEAL SPOTLIGHT ────────────────────────────────────── */
.ds-deal {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center;
  padding: clamp(1.25rem, .8rem + 2vw, 2.75rem);
  border-radius: var(--ds-r-xl);
  background:
    radial-gradient(600px 300px at 90% 10%, rgba(201,147,43,.18), transparent 62%),
    linear-gradient(150deg, var(--ds-forest), var(--ds-forest-deep));
  color: #fff;
  box-shadow: var(--ds-e3);
}
@media (max-width: 860px) { .ds-deal { grid-template-columns: 1fr; text-align: center; } }
.ds-deal-figure {
  border-radius: var(--ds-r-lg);
  overflow: hidden;
  background: rgba(255,255,255,.06);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.ds-deal-figure img { width: 100%; height: 100%; object-fit: cover; }
.ds-deal .ds-title { color: #fff; }
.ds-deal-text { color: rgba(255,255,255,.72); font-size: var(--ds-body); line-height: 1.7; margin-block: var(--ds-s2); }
.ds-deal-price {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
  color: var(--ds-gold-lt);
  line-height: 1;
  margin-bottom: var(--ds-s3);
}
.ds-deal-price del { font-size: .5em; color: rgba(255,255,255,.45); margin-right: .4rem; }
.ds-deal-price ins { text-decoration: none; }

/* Countdown-style meta row */
.ds-deal-meta { display: flex; flex-wrap: wrap; gap: var(--ds-s2); margin-bottom: var(--ds-s3); }
@media (max-width: 860px) { .ds-deal-meta { justify-content: center; } }

/* ── 10. PROMISE (dark) ───────────────────────────────────── */
.ds-promise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: var(--ds-s2);
}
.ds-promise-card {
  padding: var(--ds-s3);
  border-radius: var(--ds-r-lg);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(8px);
  transition: transform var(--ds-base), background-color var(--ds-base), border-color var(--ds-base);
}
@media (hover: hover) and (pointer: fine) {
  .ds-promise-card:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,.09);
    border-color: rgba(240,194,68,.4);
  }
}
.ds-promise-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--ds-r-md);
  background: rgba(240,194,68,.14);
  color: var(--ds-gold-lt);
  margin-bottom: var(--ds-s2);
}
.ds-promise-card h3 { font-size: 1.02rem; font-weight: 650; color: #fff; margin-bottom: .4rem; }
.ds-promise-card p  { font-size: var(--ds-small); line-height: 1.6; color: rgba(255,255,255,.62); }

/* ── 11. TESTIMONIALS ─────────────────────────────────────── */
.ds-testi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: var(--ds-s3);
}
.ds-testi {
  display: flex;
  flex-direction: column;
  gap: var(--ds-s2);
  padding: var(--ds-s4) var(--ds-s3) var(--ds-s3);
  border-radius: var(--ds-r-lg);
  background: var(--ds-white);
  border: 1px solid var(--ds-line);
  position: relative;
}
.ds-testi::before {
  content: "\201C";
  position: absolute;
  top: -.35em;
  left: .5rem;
  font-family: var(--font-serif);
  font-size: 6rem;
  line-height: 1;
  color: rgba(201,147,43,.18);
  pointer-events: none;
}
.ds-testi-stars { display: flex; gap: 2px; color: var(--ds-gold); }
.ds-testi-text { font-size: var(--ds-body); line-height: 1.75; color: var(--ds-ink-2); flex: 1; }
.ds-testi-who { display: flex; align-items: center; gap: .75rem; padding-top: var(--ds-s2); border-top: 1px solid var(--ds-line); }
.ds-testi-avatar {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ds-forest-soft), var(--ds-forest));
  color: #fff;
  font-weight: 700;
}
.ds-testi-name { font-size: 1rem; font-weight: 700; color: var(--ds-ink); }
.ds-testi-loc  { font-size: var(--ds-micro); color: var(--ds-muted); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }

/* Featured variant */
.ds-testi--featured {
  background: linear-gradient(150deg, var(--ds-forest), var(--ds-forest-deep));
  border-color: transparent;
  box-shadow: var(--ds-e3);
}
.ds-testi--featured::before { color: rgba(255,255,255,.16); }
.ds-testi--featured .ds-testi-text { color: rgba(255,255,255,.86); }
.ds-testi--featured .ds-testi-stars { color: var(--ds-gold-lt); }
.ds-testi--featured .ds-testi-who { border-top-color: rgba(255,255,255,.16); }
.ds-testi--featured .ds-testi-avatar { background: rgba(255,255,255,.2); }
.ds-testi--featured .ds-testi-name { color: #fff; }
.ds-testi--featured .ds-testi-loc  { color: rgba(255,255,255,.6); }

/* ── 12. BLOG ─────────────────────────────────────────────── */
.ds-blog-card { display: flex; flex-direction: column; }
.ds-blog-figure { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ds-cream-2); }
.ds-blog-figure img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ds-slow); }
.ds-blog-card:hover .ds-blog-figure img { transform: scale(1.05); }
.ds-blog-body { display: flex; flex-direction: column; gap: .6rem; padding: var(--ds-s3); flex: 1; }
.ds-blog-meta { display: flex; align-items: center; gap: .6rem; font-size: var(--ds-micro); color: var(--ds-muted); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ds-blog-cat { color: var(--ds-gold); }
.ds-blog-title { font-family: var(--font-serif); font-size: var(--ds-h3); font-weight: 700; line-height: 1.25; color: var(--ds-forest); }

/* ── 13. NEWSLETTER + GALLERY ─────────────────────────────── */
.ds-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 4px;
}
.ds-gallery a { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--ds-cream-2); }
.ds-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ds-base), filter var(--ds-base); }
.ds-gallery a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(67,16,22,.45);
  opacity: 0;
  transition: opacity var(--ds-base);
}
.ds-gallery a:hover img { transform: scale(1.08); }
.ds-gallery a:hover::after { opacity: 1; }

.ds-newsletter { text-align: center; }
.ds-nl-form {
  display: flex;
  gap: .5rem;
  max-width: 520px;
  margin: var(--ds-s3) auto 0;
  padding: .4rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--ds-r-pill);
  backdrop-filter: blur(8px);
}
.ds-nl-form input {
  flex: 1;
  min-width: 0;
  padding: .8rem 1.1rem;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 16px;
}
.ds-nl-form input::placeholder { color: rgba(255,255,255,.55); }
.ds-nl-form input:focus { outline: none; box-shadow: none; }
@media (max-width: 520px) {
  .ds-nl-form { flex-direction: column; border-radius: var(--ds-r-lg); }
  .ds-nl-form .ds-btn { width: 100%; }
}

/* ── 14. CTA ──────────────────────────────────────────────── */
.ds-cta { text-align: center; }
.ds-cta-title {
  font-family: var(--font-serif);
  font-size: var(--ds-h1);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: #fff;
  text-wrap: balance;
}
.ds-cta-desc { max-width: 52ch; margin: var(--ds-s3) auto 0; font-size: var(--ds-lead); line-height: 1.7; color: rgba(255,255,255,.72); }
.ds-cta-actions { display: flex; flex-wrap: wrap; gap: var(--ds-s2); justify-content: center; margin-top: var(--ds-s4); }

/* ── 15. MOTION PREFERENCES ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ds-hero-img { animation: none; }
  .ds-ticker-track { animation: none; transform: none; }
}

/* ── 16. UTILITIES ────────────────────────────────────────── */
.screen-reader-text,
.ds-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.js-reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s var(--ds-slow), transform .55s var(--ds-slow); }
.js-reveal.is-visible { opacity: 1; transform: none; }
html:not(.js) .js-reveal { opacity: 1; transform: none; }

/* ── 17. HEADER ───────────────────────────────────────────── */
.ds-header-stack {
  position: sticky;
  top: 0;
  z-index: 900;
}

.ds-announce {
  background: linear-gradient(90deg, var(--ds-forest-deep), var(--ds-forest) 55%, var(--ds-forest-deep));
  color: rgba(255,255,255,.92);
  font-size: var(--ds-micro);
  font-weight: 600;
  letter-spacing: .06em;
}
.ds-announce-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: .6rem;
}
.ds-announce-items { display: flex; align-items: center; justify-content: center; gap: .75rem; flex-wrap: wrap; }
.ds-announce-items span { display: inline-flex; align-items: center; gap: .35rem; }
.ds-announce-dot { color: var(--ds-gold-lt); }
@media (max-width: 620px) {
  /* Keep one clear promise rather than three cramped ones */
  .ds-announce-items > *:nth-child(n+3) { display: none; }
}

.ds-header {
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 1px 0 rgba(67,16,22,.06);
  transition: box-shadow var(--ds-base), background-color var(--ds-base);
}
.ds-header.is-scrolled { box-shadow: var(--ds-e2); background: rgba(255,255,255,.96); }

.ds-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-s3);
  padding-block: .7rem;
}
.ds-header.is-scrolled .ds-header-inner { padding-block: .45rem; }

/* Brand lockup. The logo is hard-capped in both axes: the source art is
   1536x1024, and anything that lets it reach intrinsic size destroys the
   header. Sized by height, with max-width as a second backstop. */
.ds-brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 46vw;
}
.ds-brand a { display: block; line-height: 0; }

.ds-brand .ds-logo,
.ds-brand img,
img.ds-logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(46px, 5.6vw, 64px);
  max-height: 64px;
  object-fit: contain;
}
.ds-header.is-scrolled .ds-brand .ds-logo,
.ds-header.is-scrolled .ds-brand .custom-logo { height: clamp(40px, 4.8vw, 52px); }

/* WordPress custom-logo output goes through the same cap. */
.ds-brand .custom-logo-link { display: block; line-height: 0; }
.ds-brand .custom-logo { width: auto; height: clamp(46px, 5.6vw, 64px); max-height: 64px; object-fit: contain; }

.ds-wordmark { display: block; line-height: 1.05; }
.ds-wordmark-name {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 700;
  color: var(--ds-clay);
  letter-spacing: -.015em;
}
.ds-wordmark-tag {
  display: block;
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ds-muted);
  font-weight: 700;
  margin-top: 2px;
}

/* Nav — pill chips rather than an underline, so the current/hover state
   reads as a single contained shape instead of a line hugging the text. */
.ds-nav { min-width: 0; }
.ds-nav ul { display: flex; align-items: center; flex-wrap: nowrap; gap: clamp(.15rem, .5vw, .4rem); }
.ds-nav a {
  position: relative;
  display: block;
  padding: .5rem .95rem;
  border-radius: var(--ds-r-pill);
  font-size: .9rem;
  font-weight: 600;
  color: var(--ds-ink-2);
  white-space: nowrap;   /* "About Us" must not break onto two lines */
  transition: color var(--ds-fast), background-color var(--ds-base);
}
.ds-nav a:hover { color: var(--ds-forest); background: rgba(107,30,40,.06); }
.ds-nav .current-menu-item > a,
.ds-nav .current_page_item > a {
  color: var(--ds-forest);
  background: rgba(107,30,40,.09);
}

/* Sub-menus */
.ds-nav li { position: relative; }
.ds-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: .5rem;
  background: #fff;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  box-shadow: var(--ds-e3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--ds-base), transform var(--ds-base), visibility var(--ds-base);
}
.ds-nav li:hover > .sub-menu,
.ds-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.ds-nav .sub-menu a { padding: .55rem .7rem; border-radius: var(--ds-r-sm); }
.ds-nav .sub-menu a::after { display: none; }
.ds-nav .sub-menu a:hover { background: var(--ds-cream); }

.ds-header-actions { display: flex; align-items: center; gap: .6rem; }

.ds-icon-btn {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ds-line);
  border-radius: 50%;
  background: #fff;
  color: var(--ds-forest);
  cursor: pointer;
  box-shadow: var(--ds-e1);
  transition: background-color var(--ds-fast), border-color var(--ds-fast),
              box-shadow var(--ds-base), transform var(--ds-fast);
}
.ds-icon-btn:hover { background: var(--ds-cream); border-color: var(--ds-gold); box-shadow: var(--ds-e2); transform: translateY(-1px); }
.ds-icon-btn:active { transform: scale(.94) translateY(0); }

.ds-cart-count {
  position: absolute;
  top: -3px; right: -3px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: var(--ds-r-pill);
  background: linear-gradient(135deg, var(--ds-gold-lt), var(--ds-gold));
  color: #24170A;
  font-size: .66rem;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(201,147,43,.5), 0 0 0 2px #fff;
  animation: ds-cart-pop .3s var(--ease-spring, ease-out);
}
@keyframes ds-cart-pop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .ds-cart-count { animation: none; } }

.ds-header-cta { padding: .7rem 1.25rem; min-height: 44px; font-size: .86rem; gap: .4rem; }
.ds-header-cta svg { transition: transform var(--ds-base); }
.ds-header-cta:hover svg { transform: translateX(3px); }

/* Burger */
.ds-burger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--ds-line);
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--ds-e1);
  cursor: pointer;
  position: relative;
  transition: box-shadow var(--ds-base), border-color var(--ds-fast);
}
.ds-burger:hover { border-color: var(--ds-gold); box-shadow: var(--ds-e2); }
.ds-burger span {
  position: absolute;
  left: 13px;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ds-forest);
  transition: transform var(--ds-base), opacity var(--ds-fast);
}
.ds-burger span:nth-child(1) { top: 16px; }
.ds-burger span:nth-child(2) { top: 21px; }
.ds-burger span:nth-child(3) { top: 26px; }
.ds-burger.is-active span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.ds-burger.is-active span:nth-child(2) { opacity: 0; }
.ds-burger.is-active span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 900px) {
  .ds-nav { display: none; }
  .ds-burger { display: block; }
  .ds-header-cta { display: none; }
}

/* ── 18. MOBILE DRAWER ────────────────────────────────────── */
.ds-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(67,16,22,.5);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--ds-base);
}
.ds-drawer-scrim.is-open { opacity: 1; }

.ds-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
  width: min(88vw, 340px);
  height: 100%;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--ds-s3);
  padding-bottom: max(var(--ds-s4), env(safe-area-inset-bottom));
  background: var(--ds-white);
  box-shadow: -20px 0 60px rgba(67,16,22,.2);
  transform: translateX(100%);
  transition: transform .34s cubic-bezier(.22,1,.36,1);
  visibility: hidden;
}
.ds-drawer.is-open { transform: none; visibility: visible; }

.ds-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-s2);
  padding-bottom: var(--ds-s3);
  border-bottom: 1px solid var(--ds-line);
  margin-bottom: var(--ds-s3);
}

.ds-drawer ul { display: flex; flex-direction: column; gap: 2px; }
.ds-drawer ul a {
  display: block;
  padding: .8rem .9rem;
  border-radius: var(--ds-r-sm);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ds-ink);
  transition: background-color var(--ds-fast), color var(--ds-fast);
}
.ds-drawer ul a:hover,
.ds-drawer .current-menu-item > a { background: var(--ds-cream); color: var(--ds-forest); }
.ds-drawer .sub-menu { margin-left: .75rem; border-left: 1px solid var(--ds-line); padding-left: .5rem; }

.ds-drawer-actions { display: grid; gap: .6rem; margin-top: var(--ds-s3); }
.ds-drawer-contact { margin-top: var(--ds-s4); padding-top: var(--ds-s3); border-top: 1px solid var(--ds-line); display: grid; gap: .5rem; }
.ds-drawer-label { font-size: var(--ds-micro); text-transform: uppercase; letter-spacing: .14em; color: var(--ds-muted); font-weight: 700; }
.ds-drawer-contact a { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--ds-ink-2); padding: .3rem 0; }
.ds-drawer-wa { color: #128C4B !important; font-weight: 650; }

/* ── 19. FOOTER ───────────────────────────────────────────── */
.ds-footer {
  position: relative;
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(201,147,43,.10), transparent 60%),
    radial-gradient(700px 500px at 100% 100%, rgba(0,0,0,.22), transparent 60%),
    var(--ds-forest-deep);
  color: rgba(255,255,255,.72);
  font-size: var(--ds-body);
}
/* Thin gold seam at the very top edge — the one line that says "considered
   design" rather than "background color stops here". */
.ds-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ds-gold-lt) 25%, var(--ds-gold) 50%, var(--ds-gold-lt) 75%, transparent);
  opacity: .7;
}

.ds-footer-strip { background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.08); }
.ds-footer-strip-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--ds-s3);
  padding-block: var(--ds-s3);
}
.ds-footer-value { display: flex; align-items: center; gap: .85rem; }
/* Solid gold medallion, not a faint tint — a pale stroke icon on a barely-
   there background read as muddy/washed-out against the dark footer. Same
   gold-gradient + dark-icon pairing already used for .ds-btn--gold and the
   cart-count badge, so it reads as an intentional accent, not a fourth
   one-off treatment. */
/* Qualified with the parent class (.ds-footer-value .ds-footer-value-icon,
   not just .ds-footer-value-icon) because it needs to outrank the older,
   more specific ".ds-footer-value span" rule below, which was silently
   winning against this element (it's a <span> too) and overriding both its
   color and its display:grid centering — the icon rendered top-left inside
   the badge in the wrong color instead of centred in dark-on-gold. */
.ds-footer-value .ds-footer-value-icon {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ds-gold-lt), var(--ds-gold));
  color: #24170A;
  box-shadow: 0 3px 10px rgba(201,147,43,.35), 0 0 0 1px rgba(255,255,255,.12) inset;
  animation: ds-medallion-glow 3.2s ease-in-out infinite;
}
/* Stagger so the four medallions breathe slightly out of phase rather than
   pulsing in perfect unison, which reads as more organic and less like a
   loading indicator. */
.ds-footer-value:nth-child(2) .ds-footer-value-icon { animation-delay: .5s; }
.ds-footer-value:nth-child(3) .ds-footer-value-icon { animation-delay: 1s; }
.ds-footer-value:nth-child(4) .ds-footer-value-icon { animation-delay: 1.5s; }
@keyframes ds-medallion-glow {
  0%, 100% { box-shadow: 0 3px 10px rgba(201,147,43,.35), 0 0 0 1px rgba(255,255,255,.12) inset; }
  50%      { box-shadow: 0 3px 18px rgba(201,147,43,.6),  0 0 0 1px rgba(255,255,255,.18) inset; }
}
@media (prefers-reduced-motion: reduce) {
  .ds-footer-value .ds-footer-value-icon { animation: none; }
}
.ds-footer-value strong { display: block; color: #fff; font-size: .92rem; font-weight: 650; }
.ds-footer-value span { display: block; font-size: var(--ds-small); color: rgba(255,255,255,.55); }

.ds-footer-main {
  position: relative;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: var(--ds-s4);
  padding-block: var(--ds-s5);
}
@media (max-width: 1000px) { .ds-footer-main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .ds-footer-main { grid-template-columns: 1fr; gap: var(--ds-s3); } }

/* Faint vertical seams between columns, desktop only — reads as a
   considered grid rather than four blocks floating in open space. */
@media (min-width: 1001px) {
  .ds-footer-main > * + * { border-left: 1px solid rgba(255,255,255,.07); padding-left: var(--ds-s4); }
}

.ds-footer-brand .ds-wordmark-name { color: #fff; font-size: clamp(1.5rem, 2.6vw, 1.9rem); letter-spacing: -.01em; }
.ds-footer-brand .ds-wordmark-tag { color: var(--ds-gold-lt); }
.ds-footer-brand p { margin: var(--ds-s2) 0; line-height: 1.75; max-width: 40ch; }
.ds-footer-social { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: var(--ds-s3); }

.ds-footer-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  transition: background-color var(--ds-base), border-color var(--ds-base),
              transform var(--ds-fast), box-shadow var(--ds-base), color var(--ds-fast);
}
.ds-footer-icon:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0,0,0,.28);
}
.ds-footer-icon--whatsapp:hover { background: #25D366; border-color: #25D366; }
.ds-footer-icon--mail:hover,
.ds-footer-icon--phone:hover { background: var(--ds-gold); border-color: var(--ds-gold); color: #24170A; }

.ds-footer-col h3 {
  position: relative;
  display: inline-block;
  font-size: var(--ds-micro);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--ds-gold-lt);
  font-weight: 800;
  margin-bottom: var(--ds-s3);
  padding-bottom: .6rem;
}
/* Short accent rule under each column heading instead of relying on colour
   contrast alone to separate "heading" from "list". */
.ds-footer-col h3::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ds-gold), transparent);
}
.ds-footer-col ul { display: grid; gap: .6rem; }
.ds-footer-col a {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: rgba(255,255,255,.72);
  font-size: .9rem;
  transition: color var(--ds-fast), padding-left var(--ds-fast);
}
.ds-footer-col a::before {
  content: "";
  width: 0;
  height: 1px;
  margin-right: 0;
  background: var(--ds-gold-lt);
  transition: width var(--ds-fast), margin-right var(--ds-fast);
}
.ds-footer-col a:hover { color: #fff; padding-left: 2px; }
.ds-footer-col a:hover::before { width: 10px; margin-right: 6px; }

.ds-footer-contact li { display: flex; gap: .6rem; align-items: flex-start; line-height: 1.6; font-size: .9rem; }
.ds-footer-contact svg { flex: none; margin-top: 3px; color: var(--ds-gold-lt); }

.ds-footer-bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-s2);
  padding-block: var(--ds-s3);
  font-size: var(--ds-small);
  color: rgba(255,255,255,.5);
}
/* Gradient hairline instead of a flat 1px border — matches the top seam and
   fades at the edges rather than cutting hard across the full width. */
.ds-footer-bottom::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16) 15%, rgba(255,255,255,.16) 85%, transparent);
}
.ds-footer-legal { display: flex; flex-wrap: wrap; gap: var(--ds-s2); }
.ds-footer-legal a { color: rgba(255,255,255,.6); transition: color var(--ds-fast); }
.ds-footer-legal a:hover { color: var(--ds-gold-lt); }
.ds-footer-credit { width: 100%; font-size: var(--ds-micro); color: rgba(255,255,255,.38); }
.ds-footer-credit a { color: rgba(255,255,255,.55); text-decoration: underline; }
@media (max-width: 700px) { .ds-footer-bottom { flex-direction: column; text-align: center; } }

/* ── 20. WHATSAPP FLOAT ───────────────────────────────────── */
.ds-wa-float {
  position: fixed;
  z-index: 850;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 8px 28px rgba(37,211,102,.42);
  transition: transform var(--ds-base), box-shadow var(--ds-base);
}
.ds-wa-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(37,211,102,.5);
  animation: ds-pulse 2.6s ease-out infinite;
}
@keyframes ds-pulse {
  0%   { transform: scale(1);   opacity: .8; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
.ds-wa-float:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 36px rgba(37,211,102,.55); }
@media (prefers-reduced-motion: reduce) { .ds-wa-float::before { animation: none; } }

/* ── 21. PAGE HEAD / BREADCRUMBS ──────────────────────────── */
.ds-pagehead {
  background:
    radial-gradient(700px 320px at 85% 0%, rgba(201,147,43,.18), transparent 65%),
    linear-gradient(150deg, var(--ds-forest), var(--ds-forest-deep));
  color: #fff;
  padding-block: var(--ds-s5);
}
.ds-pagehead .ds-eyebrow { color: var(--ds-gold-lt); }
.ds-pagehead .ds-sub { color: rgba(255,255,255,.7); max-width: 62ch; }
.ds-pagehead-title {
  font-family: var(--font-serif);
  font-size: var(--ds-h1);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: #fff;
  text-wrap: balance;
}

.ds-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  font-size: var(--ds-small);
  margin-bottom: var(--ds-s3);
  color: rgba(255,255,255,.62);
}
.ds-crumbs a { color: rgba(255,255,255,.85); }
.ds-crumbs a:hover { color: var(--ds-gold-lt); }
.ds-crumbs svg { opacity: .5; }
.ds-crumbs [aria-current] { color: #fff; font-weight: 600; }

/* Light breadcrumb bar (product page) */
.ds-crumbbar { background: var(--ds-cream); border-bottom: 1px solid var(--ds-line); }
.ds-crumbbar .ds-crumbs {
  margin-bottom: 0;
  padding-block: .85rem;
  color: var(--ds-muted);
  overflow-x: auto;
  flex-wrap: nowrap;
  white-space: nowrap;
  scrollbar-width: none;
}
.ds-crumbbar .ds-crumbs::-webkit-scrollbar { display: none; }
.ds-crumbbar .ds-crumbs a { color: var(--ds-forest); }
.ds-crumbbar .ds-crumbs [aria-current] { color: var(--ds-ink); }

/* ── 22. SHOP FILTERS + TOOLBAR ───────────────────────────── */
.ds-filterbar {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding-bottom: .5rem;
  margin-bottom: var(--ds-s3);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ds-filterbar::-webkit-scrollbar { display: none; }
.ds-filter {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex: none;
  padding: .6rem 1.1rem;
  min-height: 42px;
  border: 1.5px solid var(--ds-line);
  border-radius: var(--ds-r-pill);
  background: #fff;
  font-size: .86rem;
  font-weight: 600;
  color: var(--ds-ink-2);
  white-space: nowrap;
  transition: background-color var(--ds-fast), color var(--ds-fast), border-color var(--ds-fast);
}
.ds-filter:hover { border-color: var(--ds-gold); color: var(--ds-forest); }
.ds-filter.is-active { background: var(--ds-forest); border-color: var(--ds-forest); color: #fff; }
.ds-filter-count {
  font-size: .68rem;
  font-weight: 800;
  padding: .1rem .4rem;
  border-radius: var(--ds-r-pill);
  background: rgba(107,30,40,.09);
  color: inherit;
}
.ds-filter.is-active .ds-filter-count { background: rgba(255,255,255,.2); }

.ds-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-s2);
  padding-bottom: var(--ds-s3);
  margin-bottom: var(--ds-s3);
  border-bottom: 1px solid var(--ds-line);
}
.ds-toolbar-count { font-size: var(--ds-small); color: var(--ds-muted); }
.ds-toolbar-count strong { color: var(--ds-ink); font-weight: 700; }
.ds-sort { display: flex; align-items: center; gap: .6rem; }
.ds-sort label { font-size: var(--ds-small); color: var(--ds-muted); font-weight: 600; }
.ds-sort select {
  padding: .6rem 2.2rem .6rem .9rem;
  min-height: 42px;
  border: 1.5px solid var(--ds-line);
  border-radius: var(--ds-r-pill);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%237A8878' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  font-size: .86rem;
  font-weight: 600;
  color: var(--ds-ink);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.ds-prod-flag--out { background: #6B7280; }
.ds-prod-stars .is-off { color: rgba(201,147,43,.28); }
.ds-chip--out { background: rgba(107,114,128,.12); border-color: rgba(107,114,128,.25); color: #4B5563; }

/* ── 23. PAGINATION ───────────────────────────────────────── */
.ds-pagination { margin-top: var(--ds-s4); }
.ds-pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
  list-style: none;
  padding: 0;
}
.ds-pagination a,
.ds-pagination span {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 .9rem;
  border: 1.5px solid var(--ds-line);
  border-radius: var(--ds-r-pill);
  background: #fff;
  font-size: .88rem;
  font-weight: 650;
  color: var(--ds-ink-2);
  transition: background-color var(--ds-fast), color var(--ds-fast), border-color var(--ds-fast);
}
.ds-pagination a:hover { border-color: var(--ds-gold); color: var(--ds-forest); }
.ds-pagination .current { background: var(--ds-forest); border-color: var(--ds-forest); color: #fff; }

/* ── 24. EMPTY STATE ──────────────────────────────────────── */
.ds-empty { text-align: center; padding-block: var(--ds-s5); display: grid; gap: var(--ds-s2); justify-items: center; }
.ds-empty-icon {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(201,147,43,.12);
  color: var(--ds-gold);
}

/* ── 25. PRODUCT DETAIL PAGE ──────────────────────────────── */
.ds-pdp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3.5vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .ds-pdp { grid-template-columns: 1fr; } }

.ds-pdp-media { position: sticky; top: calc(var(--ds-s4) + 60px); }
@media (max-width: 900px) { .ds-pdp-media { position: static; } }

.ds-pdp-stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: var(--ds-r-xl);
  background: linear-gradient(150deg, var(--ds-cream), var(--ds-cream-2));
  border: 1px solid var(--ds-line);
  overflow: hidden;
}
.ds-pdp-main {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: clamp(1rem, 3vw, 2.5rem);
  transition: opacity .22s ease;
}

.ds-pdp-thumbs {
  display: flex;
  gap: .6rem;
  margin-top: .8rem;
  overflow-x: auto;
  padding-bottom: .3rem;
  scrollbar-width: none;
}
.ds-pdp-thumbs::-webkit-scrollbar { display: none; }
.ds-pdp-thumb {
  flex: none;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--ds-r-sm);
  background: var(--ds-cream);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--ds-fast), transform var(--ds-fast);
}
.ds-pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-pdp-thumb:hover { transform: translateY(-2px); }
.ds-pdp-thumb.is-active { border-color: var(--ds-gold); }

.ds-pdp-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .5rem;
  margin-top: var(--ds-s3);
}
.ds-pdp-trust li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: var(--ds-s2) .5rem;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  background: var(--ds-cream);
  font-size: var(--ds-micro);
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  color: var(--ds-ink-2);
}
.ds-pdp-trust svg { color: var(--ds-forest-soft); }

.ds-pdp-info > * + * { margin-top: var(--ds-s2); }
.ds-pdp-title {
  font-family: var(--font-serif);
  font-size: var(--ds-h1);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--ds-forest);
  text-wrap: balance;
}
.ds-pdp-rating { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; font-size: var(--ds-small); }
.ds-pdp-rating a { color: var(--ds-muted); text-decoration: underline; text-underline-offset: 3px; }
.ds-pdp-rating .ds-prod-stars { color: var(--ds-gold); display: inline-flex; gap: 1px; }

.ds-pdp-price {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.4rem);
  font-weight: 700;
  color: var(--ds-forest);
  line-height: 1.1;
}
.ds-pdp-price del { font-size: .55em; color: var(--ds-muted); font-weight: 400; margin-right: .4rem; }
.ds-pdp-price ins { text-decoration: none; }

.ds-pdp-excerpt { font-size: var(--ds-body); line-height: 1.75; color: var(--ds-ink-2); }
.ds-pdp-excerpt p + p { margin-top: .7rem; }

/* WooCommerce add-to-cart form, restyled in place */
.ds-pdp-cart { margin-top: var(--ds-s3); }
.ds-pdp-cart form.cart { display: flex; flex-wrap: wrap; gap: .6rem; align-items: stretch; }
.ds-pdp-cart .quantity { display: flex; }
.ds-pdp-cart .quantity input[type="number"] {
  width: 84px;
  height: 100%;
  min-height: 52px;
  padding: .6rem;
  text-align: center;
  border: 1.5px solid var(--ds-line);
  border-radius: var(--ds-r-pill);
  font-size: 16px;
  font-weight: 650;
}
.ds-pdp-cart button.button,
.ds-pdp-cart .single_add_to_cart_button {
  flex: 1;
  min-width: 190px;
  min-height: 52px;
  padding: .95rem 1.8rem;
  border: none;
  border-radius: var(--ds-r-pill);
  background: var(--ds-forest);
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--ds-e2);
  transition: background-color var(--ds-base), transform var(--ds-fast), box-shadow var(--ds-base);
}
.ds-pdp-cart button.button:hover { background: var(--ds-forest-deep); transform: translateY(-2px); box-shadow: var(--ds-e3); }
.ds-pdp-cart .variations select {
  width: 100%;
  min-height: 48px;
  padding: .6rem .9rem;
  border: 1.5px solid var(--ds-line);
  border-radius: var(--ds-r-sm);
  font-size: 16px;
}
.ds-pdp-cart .stock { font-size: var(--ds-small); color: var(--ds-forest-soft); font-weight: 600; }
.ds-pdp-cart .stock.out-of-stock { color: #B3341F; }

.ds-pdp-meta {
  display: grid;
  gap: .1rem;
  margin-top: var(--ds-s3);
  padding: var(--ds-s3);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  background: var(--ds-cream);
}
.ds-pdp-meta > div {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  padding-block: .55rem;
}
.ds-pdp-meta > div + div { border-top: 1px dashed var(--ds-line); }
.ds-pdp-meta dt {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-width: 132px;
  font-size: var(--ds-small);
  font-weight: 700;
  color: var(--ds-muted);
}
.ds-pdp-meta dt svg { color: var(--ds-gold); }
.ds-pdp-meta dd { font-size: var(--ds-small); color: var(--ds-ink); font-weight: 600; }

.ds-pdp-share { display: flex; align-items: center; gap: .75rem; margin-top: var(--ds-s3); }
.ds-pdp-share > span { font-size: var(--ds-small); font-weight: 700; color: var(--ds-muted); }
.ds-pdp-share-wa { padding: .55rem 1.1rem; min-height: 40px; font-size: .82rem; }

/* ── 26. PROSE (descriptions, reviews, policy pages) ──────── */
.ds-prose { font-size: var(--ds-body); line-height: 1.8; color: var(--ds-ink-2); }
.ds-prose > * + * { margin-top: 1.1em; }
.ds-prose h2, .ds-prose h3, .ds-prose h4 {
  font-family: var(--font-serif);
  color: var(--ds-forest);
  line-height: 1.25;
  margin-top: 1.8em;
}
.ds-prose h2 { font-size: var(--ds-h2); }
.ds-prose h3 { font-size: var(--ds-h3); }
.ds-prose a { color: var(--ds-forest); text-decoration: underline; text-underline-offset: 3px; }
.ds-prose ul, .ds-prose ol { padding-left: 1.3em; }
.ds-prose ul { list-style: disc; }
.ds-prose ol { list-style: decimal; }
.ds-prose li + li { margin-top: .4em; }
.ds-prose img { border-radius: var(--ds-r-md); }
.ds-prose blockquote {
  padding: var(--ds-s2) var(--ds-s3);
  border-left: 3px solid var(--ds-gold);
  background: rgba(201,147,43,.07);
  border-radius: 0 var(--ds-r-md) var(--ds-r-md) 0;
  font-style: italic;
}
.ds-prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.ds-prose th, .ds-prose td { padding: .7rem .9rem; border: 1px solid var(--ds-line); text-align: left; font-size: var(--ds-small); }
.ds-prose th { background: var(--ds-cream); font-weight: 700; color: var(--ds-forest); }

/* Review form + list inside .ds-prose */
.ds-prose .comment-form input[type="text"],
.ds-prose .comment-form input[type="email"],
.ds-prose .comment-form textarea {
  width: 100%;
  padding: .8rem 1rem;
  border: 1.5px solid var(--ds-line);
  border-radius: var(--ds-r-sm);
  font-size: 16px;
}
.ds-prose .comment-form .submit {
  padding: .9rem 1.8rem;
  min-height: 48px;
  border: none;
  border-radius: var(--ds-r-pill);
  background: var(--ds-forest);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.ds-prose .commentlist { list-style: none; padding: 0; display: grid; gap: var(--ds-s2); }
.ds-prose .commentlist li {
  padding: var(--ds-s3);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  background: #fff;
}

/* ── 27. LEGACY TEMPLATE UPGRADE ──────────────────────────
   About / Contact / FAQ / policy pages still ship their own
   markup. These rules retune the shared primitives they use so
   they read as part of the same system without a rewrite.
   ──────────────────────────────────────────────────────────── */
.ab-page, .ct-page, .fq-page, .lp-page, .inner-page, .contact-page, .faqs-page {
  background: var(--ds-white);
  color: var(--ds-ink-2);
  font-size: var(--ds-body);
}
.ab-page h1, .ct-page h1, .fq-page h1, .lp-page h1, .inner-page h1,
.ab-page h2, .ct-page h2, .fq-page h2, .lp-page h2, .inner-page h2 {
  font-family: var(--font-serif);
  letter-spacing: -.02em;
  text-wrap: balance;
}
.ab-page section, .ct-page section, .fq-page section, .lp-page section { padding-block: var(--ds-s5); }
.fq-page .fq-group { padding-block: 0; }

/* Any legacy card-ish block picks up the new elevation + radius */
.ab-card, .ct-card, .fq-card, .lp-card,
.ab-value-card, .ct-info-card, .fq-item {
  border-radius: var(--ds-r-lg) !important;
  border: 1px solid var(--ds-line) !important;
  box-shadow: var(--ds-e1) !important;
  transition: transform var(--ds-base), box-shadow var(--ds-base) !important;
}
@media (hover: hover) and (pointer: fine) {
  .ab-card:hover, .ct-card:hover, .fq-card:hover,
  .ab-value-card:hover, .ct-info-card:hover { transform: translateY(-4px); box-shadow: var(--ds-e3) !important; }
}

/* Legacy buttons inherit the new pill treatment */
.btn-primary, .btn-outline, .btn-white, .btn-shop, .btn-atc {
  border-radius: var(--ds-r-pill) !important;
  font-weight: 650 !important;
  transition: transform var(--ds-fast), box-shadow var(--ds-base), background-color var(--ds-base) !important;
}
.btn-primary { background: var(--ds-forest) !important; color: #fff !important; box-shadow: var(--ds-e2) !important; }
.btn-primary:hover { background: var(--ds-forest-deep) !important; transform: translateY(-2px); }

/* ── 28. CART / CHECKOUT / ACCOUNT ────────────────────────── */
.woocommerce-cart .ds-wrap,
.woocommerce-checkout .ds-wrap { padding-block: var(--ds-s4); }
.woocommerce table.shop_table {
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.woocommerce table.shop_table th {
  background: var(--ds-cream);
  color: var(--ds-forest);
  font-size: var(--ds-small);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #place_order {
  border-radius: var(--ds-r-pill) !important;
  min-height: 46px;
  padding: .8rem 1.6rem !important;
  background: var(--ds-forest) !important;
  color: #fff !important;
  font-weight: 650 !important;
  border: none !important;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover { background: var(--ds-forest-deep) !important; }
.woocommerce #payment,
.woocommerce-checkout #order_review,
.woocommerce .cart-collaterals .cart_totals {
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
  background: var(--ds-cream);
  padding: var(--ds-s3);
}
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-radius: var(--ds-r-md);
  border-top-color: var(--ds-forest) !important;
}

/* ── 29. LEGACY SHELL CLEANUP ─────────────────────────────
   Old header/footer/marquee classes no longer exist in markup;
   neutralise any leftover rules that could target stray nodes.
   ──────────────────────────────────────────────────────────── */
.sticky-header-wrap:empty, .announcement-bar:empty { display: none; }