/* ================================================================
   YOUGU — content.css  |  Shared content page styles + language
================================================================ */

/* ── Language ─────────────────────────────────────────────── */
[data-lang="en"] .text-cn { display: none !important; }
[data-lang="cn"] .text-en { display: none !important; }

/* ── Reset ────────────────────────────────────────────────── */
#spa-content * { box-sizing: border-box; }
#spa-content img { max-width: 100%; height: auto; display: block; }
#spa-content h1,#spa-content h2,#spa-content h3,
#spa-content h4,#spa-content h5,#spa-content h6 { margin:0; padding:0; line-height:1.2; }
#spa-content p { margin-top:0; }
/* Only color actual prose links — not buttons or cards */
#spa-content a:not([class]) { color: var(--brand); text-decoration: none; transition: color .18s; }
#spa-content a:not([class]):hover { color: var(--brand-dark); }

/* ── Wave dividers: color-to-color transitions with double-layer ─
   Three colors per wave:
     --wave-bg      wrapper background (seamless with section on "unfilled" side)
     --wave-fill    solid SVG path fill (seamless with section on "filled" side)
     --wave-accent  fill of the opacity=0.4 path → gives the double-layer depth
                    (default: hero-bg; hero-* modifiers override it since their
                     wrapper is already hero-bg)

   Path direction convention (via -top / -bot suffix):
     -top : fill region is visually at the top → fill = FROM, bg = TO
     -bot : fill region is visually at the bottom → fill = TO, bg = FROM
────────────────────────────────────────────────────────────── */
.c-wave {
  display: block;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  margin-bottom: -1px;
  pointer-events: none;
  background: var(--wave-bg, transparent);
  --wave-accent: var(--c-hero-bg);
}
.c-wave svg { display: block; width: 100%; min-height: 50px; }
.c-wave svg path { fill: var(--wave-fill); }
.c-wave svg path[opacity="0.4"] { fill: var(--wave-accent); }

/* hero → light */
.c-wave--hero-light-bot  { --wave-bg: var(--c-hero-bg);       --wave-fill: var(--c-section-light); --wave-accent: var(--c-page-bg); }
.c-wave--hero-light-top  { --wave-bg: var(--c-section-light); --wave-fill: var(--c-hero-bg);       --wave-accent: var(--c-section-dark); }

/* light ↔ hero */
.c-wave--light-hero-bot  { --wave-bg: var(--c-section-light); --wave-fill: var(--c-hero-bg); --wave-accent: var(--c-section-dark); }
.c-wave--light-hero-top  { --wave-bg: var(--c-hero-bg);       --wave-fill: var(--c-section-light); --wave-accent: var(--c-section-dark); }
/* hero → dark */
.c-wave--hero-dark-bot   { --wave-bg: var(--c-hero-bg);       --wave-fill: var(--c-section-dark);  --wave-accent: var(--c-section-light); }
.c-wave--hero-dark-top   { --wave-bg: var(--c-section-dark);  --wave-fill: var(--c-hero-bg);       --wave-accent: var(--c-section-light); }

/* hero → brand (home slider → brand-colored sub-brands section) */
.c-wave--hero-brand-bot  { --wave-bg: var(--c-hero-bg);       --wave-fill: var(--c-wave-bg-brand, var(--c-hero-bg)); --wave-accent: var(--c-section-light); }

/* brand ↔ light */
.c-wave--brand-light-bot { --wave-bg: var(--c-wave-bg-brand, var(--c-hero-bg)); --wave-fill: var(--c-section-light); --wave-accent: var(--c-page-bg); }
.c-wave--brand-light-top { --wave-bg: var(--c-section-light); --wave-fill: var(--c-wave-bg-brand, var(--c-hero-bg)); --wave-accent: var(--c-section-dark); }
.c-wave--light-brand-bot { --wave-bg: var(--c-section-light); --wave-fill: var(--c-wave-bg-brand, var(--c-hero-bg)); --wave-accent: var(--c-section-dark); }
.c-wave--light-brand-top { --wave-bg: var(--c-wave-bg-brand, var(--c-hero-bg)); --wave-fill: var(--c-section-light); --wave-accent: var(--c-section-dark); }

/* light ↔ dark */
.c-wave--light-dark-top  { --wave-bg: var(--c-section-dark);  --wave-fill: var(--c-section-light); --wave-accent: var(--c-hero-bg); }
.c-wave--light-dark-bot  { --wave-bg: var(--c-section-light); --wave-fill: var(--c-section-dark);  --wave-accent: var(--c-hero-bg); }
.c-wave--dark-light-top  { --wave-bg: var(--c-section-light); --wave-fill: var(--c-section-dark);  --wave-accent: var(--c-hero-bg); }
.c-wave--dark-light-bot  { --wave-bg: var(--c-section-dark);  --wave-fill: var(--c-section-light); --wave-accent: var(--c-hero-bg); }

/* section ↔ footer */
.c-wave--light-footer-top { --wave-bg: var(--c-footer-bg);     --wave-fill: var(--c-section-light); --wave-accent: var(--c-section-dark); }
.c-wave--light-footer-bot { --wave-bg: var(--c-section-light); --wave-fill: var(--c-footer-bg); --wave-accent: var(--c-section-dark); }
.c-wave--dark-footer-top  { --wave-bg: var(--c-footer-bg);     --wave-fill: var(--c-section-dark); --wave-accent: var(--c-section-light); }
.c-wave--dark-footer-bot  { --wave-bg: var(--c-section-dark);  --wave-fill: var(--c-footer-bg); --wave-accent: var(--c-section-dark); }

/* ── Hero ─────────────────────────────────────────────────── */
.c-hero { background: var(--c-hero-gradient, none), var(--c-hero-bg); color:var(--c-hero-text); padding:90px 2rem 0; text-align:center; position:relative; overflow:hidden; }
.c-hero * { color: var(--c-hero-text); }
.c-hero::before { display: none; }
.c-hero__inner   { position:relative; max-width:900px; margin:0 auto; padding-bottom:70px; }
.c-hero__logo    { max-height:110px; width:auto; margin:0 auto 1.75rem; filter:drop-shadow(0 6px 18px rgba(0,0,0,.55)) drop-shadow(0 6px 18px rgba(0,0,0,.55)); animation:heroEntrance .9s cubic-bezier(.16,1,.3,1) .05s both; }
.c-hero__eyebrow { display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; background:var(--c-accent-light); padding:.3rem .9rem; border-radius:20px; margin-bottom:1rem; color:var(--c-eyebrow); animation:popIn .6s cubic-bezier(.34,1.56,.64,1) .15s both; }
.c-hero__title   { font-size:clamp(2rem,5vw,3.4rem); font-weight:700; margin-bottom:1.1rem; color:var(--c-hero-text); }
.c-hero__sub     { font-size:clamp(.95rem,2.5vw,1.2rem); line-height:1.75; opacity:.88; margin:0 auto 2.25rem; max-width:560px; color:var(--c-hero-sub); animation:heroEntrance .9s cubic-bezier(.16,1,.3,1) .2s both; }
.c-hero__actions { display:flex; gap:.85rem; justify-content:center; flex-wrap:wrap; animation:heroEntrance .9s cubic-bezier(.16,1,.3,1) .4s both; }
.c-hero__btn { padding:.8rem 1.9rem; border-radius:50px; font-size:.9rem; font-weight:600; letter-spacing:.02em; transition:all .2s; display:inline-flex; align-items:center; gap:.45rem; }
.c-hero__btn--white { background:var(--c-section-light); color:var(--charcoal); border:1.5px solid var(--c-accent); border-radius:999px; box-shadow:0 4px 14px rgba(var(--c-accent-rgb,5,138,75),.15); }
.c-hero__btn--white:hover { background:var(--c-accent); color:#ffffff !important; border-color:var(--c-accent); box-shadow:0 8px 20px rgba(var(--c-accent-rgb,5,138,75),.35); transform:translateY(-2px); }
.c-hero__btn--ghost { background:var(--c-section-light); color:var(--charcoal); border:1.5px solid var(--c-accent); box-shadow:0 4px 14px rgba(var(--c-accent-rgb,5,138,75),.15); }
.c-hero__btn--ghost:hover { background:var(--c-accent); border-color:var(--c-accent); color:#ffffff; transform:translateY(-2px); box-shadow:0 4px 14px rgba(var(--c-accent-rgb,5,138,75),.35); }
/* Force white text on all children during button hover */
.c-hero__btn--white:hover *,
.c-hero__btn--ghost:hover *,
.home-btn--primary:hover *,
.home-btn--ghost:hover * { color:#ffffff !important; }

/* Home slider buttons */
.home-btn { padding:.82rem 2rem; border-radius:50px; font-size:.92rem; font-weight:600; transition:all .2s; display:inline-flex; align-items:center; gap:.4rem; }
.home-btn--primary { background:var(--c-section-light); color:var(--charcoal); border:1.5px solid var(--c-accent); }
.home-btn--primary:hover { background:var(--c-accent); color:#fff; border-color:#fff; transform:translateY(-2px); box-shadow:0 8px 20px rgba(var(--c-accent-rgb,5,138,75),.35); }
.home-btn--ghost { background:var(--c-section-light); color:var(--charcoal); border:1.5px solid var(--c-accent); }
.home-btn--ghost:hover { background:var(--c-accent); color:#fff; border-color:var(--c-accent); transform:translateY(-2px); box-shadow:0 4px 14px rgba(var(--c-accent-rgb,5,138,75),.35); }

/* ── Sections ─────────────────────────────────────────────── */

.c-section        { padding:80px 0; }
.c-section--sm    { padding:70px 0; }
.c-section--lg    { padding:150px 0; }
.c-section--white { background:var(--c-section-light); padding:80px 0; }
.c-section--cream { background:var(--c-section-light); padding:80px 0; }
.c-section--dark  { background:var(--c-section-dark); color:var(--c-section-dark-text); padding:80px 0; }
.c-section--brand { background:var(--c-section-dark); color:var(--c-section-dark-text); padding-top:4rem; padding-bottom:4rem; }

.c-container         { max-width:1600px; margin-inline:auto; padding-inline:clamp(1.25rem,4vw,3rem); }
.c-container--narrow { max-width:960px; }
.c-container--wide   { max-width:1920px; }

/* ── Section headings ─────────────────────────────────────── */
.c-heading       { text-align:center; margin-bottom:3.5rem; }
.c-heading--left { text-align:left; }
.c-heading__eyebrow { display:block; font-size:.7rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--brand); margin-bottom:.6rem; transition:letter-spacing .4s ease; }
.c-heading__title   { font-size:clamp(1.7rem,3.8vw,2.6rem); font-weight:700; color:var(--charcoal); margin-bottom:.75rem; }
.c-heading__body    { font-size:1.05rem; line-height:1.78; color:var(--text-mid); max-width:600px; margin-inline:auto; }
.c-heading--left .c-heading__body { margin-inline:0; }

.c-section--dark .c-heading__eyebrow,
.c-section--brand .c-heading__eyebrow { color:var(--c-accent); }
.c-section--dark .c-heading__title,
.c-section--brand .c-heading__title   { color:var(--c-section-dark-text); }
.c-section--dark .c-heading__body,
.c-section--brand .c-heading__body    { color:rgba(var(--c-section-dark-text-rgb,255,255,255),.75); }
.c-section--white .c-heading__eyebrow,
.c-section--cream .c-heading__eyebrow { color:var(--walnut-mid); }
.c-section--white .c-heading__title,
.c-section--cream .c-heading__title   { color:var(--charcoal); }
.c-section--white .c-heading__body,
.c-section--cream .c-heading__body    { color:var(--walnut-mid); }

/* ── Split layout ─────────────────────────────────────────── */
.c-split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,3vw,3rem); align-items:center; }
.c-split--flip > :first-child { order:2; }
.c-split--flip > :last-child  { order:1; }
.c-split__visual     { border-radius:18px; overflow:hidden; }
.c-split__visual img {
  width: auto;
  max-width: 100%;
  max-height: 420px;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.c-split__visual:hover img { transform:scale(1.04); }

/* On narrow viewports the .c-split collapses to one column — center
   the image instead of pinning it to the side to avoid a hanging edge */
@media (max-width: 820px) {
  .c-split__visual { display: flex !important; justify-content: center !important; }
  .c-split__visual img { max-width: 90%; }
}
.c-split__eyebrow { display:block; font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--brand); margin-bottom:.55rem; }
.c-split__title   { font-size:clamp(1.45rem,2.8vw,2.1rem); font-weight:700; color:var(--charcoal); margin-bottom:1rem; }
.c-split__body    { font-size:1rem; line-height:1.82; color:var(--text-mid); }
.c-split__body strong { color:var(--brand-dark); }
.c-section--dark .c-split__eyebrow { color:var(--c-accent); }
.c-section--dark .c-split__title   { color:var(--c-section-dark-text); }
.c-section--dark .c-split__body    { color:rgba(var(--c-section-dark-text-rgb,255,255,255),.88); }
.c-section--dark .c-split__body strong { color:var(--c-section-dark-text); }

/* ── Grid ─────────────────────────────────────────────────── */
.c-grid       { display:grid; gap:1.6rem; }
.c-grid--2    { grid-template-columns:repeat(2,1fr); }
.c-grid--3    { grid-template-columns:repeat(3,1fr); }
.c-grid--4    { grid-template-columns:repeat(4,1fr); }
.c-grid--auto { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }

/* ── Cards ────────────────────────────────────────────────── */
.c-card { background:#fff; border-radius:16px; padding:2rem; border:1px solid var(--linen-deeper); box-shadow:0 2px 12px rgba(0,0,0,.05); transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease; position:relative; overflow:hidden; }
.c-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--amber),var(--walnut-light)); opacity:0; transition:opacity .22s; }
.c-card:hover   { transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.1); }
.c-card:hover::before { opacity:1; }
.c-card--flat  { box-shadow:none; }
.c-card--cream { background:var(--cream); }
.c-card__icon  { font-size:2rem; margin-bottom:.9rem; }
.c-card__img   { width:100%; border-radius:10px; margin-bottom:1.2rem; }
.c-card__logo  { height:140px; width:auto; max-width:100%; margin:0 auto 1.1rem; display:block; object-fit:contain; }
.c-card__logo-wrap { width:120px; height:120px; border-radius:18px; background:var(--c-section-light); border:1.5px solid var(--c-border, var(--border)); display:flex; align-items:center; justify-content:center; margin:0 auto 1.25rem; overflow:hidden; transition:box-shadow .2s; }
.c-card__logo-wrap img { width:80%; height:80%; object-fit:contain; display:block; }
.c-card:hover .c-card__logo-wrap { box-shadow:0 4px 16px rgba(var(--c-accent-rgb,5,138,75),.15); }

/* Brand visit arrow — bottom-right of card */
.c-card__arrow {
  position:absolute; bottom:1rem; right:1rem;
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.78rem; font-weight:600; color:var(--c-accent);
  text-decoration:none; padding:.35rem .75rem;
  border:1.5px solid var(--c-accent); border-radius:999px;
  transition:background .18s, color .18s, transform .18s;
  white-space:nowrap;
}
.c-card__arrow:hover { background:var(--c-accent); color:#fff; transform:translateX(2px); }
.c-card__tag   { display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; background:var(--amber-pale); color:var(--walnut); padding:.22rem .65rem; border-radius:20px; margin-bottom:.65rem; }
.c-card__title { font-size:1.1rem; font-weight:600; color:var(--walnut); margin-bottom:.5rem; }
.c-card__body  { font-size:.92rem; line-height:1.7; color:var(--walnut-mid); }

/* ── Brand nav cards ──────────────────────────────────────── */
.c-brand-card { background:rgba(255,255,255,.07); border:1px solid rgba(255,209,107,.25); border-radius:16px; padding:1.25rem 1rem; text-align:center; cursor:pointer; text-decoration:none; display:flex; flex-direction:column; align-items:center; transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,border-color .3s ease,background .3s ease; position:relative; overflow:hidden; box-shadow:0 2px 16px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,209,107,.1); }
.c-brand-card::before { content:''; position:absolute; top:0; left:10%; right:10%; height:2px; background:linear-gradient(90deg,transparent,var(--amber),transparent); border-radius:0 0 4px 4px; opacity:.7; transition:opacity .3s,left .3s,right .3s; }
.c-brand-card::after  { content:''; position:absolute; top:-60%; left:-60%; width:60%; height:200%; background:linear-gradient(90deg,transparent,rgba(255,209,107,.1),transparent); transform:skewX(-20deg); transition:left .6s ease; }
.c-brand-card:hover::after { left:140%; }
.c-brand-card:hover { background:var(--c-accent-light); border-color:var(--c-accent); transform:translateY(-8px); box-shadow:0 0 0 1px rgba(255,209,107,.35),0 12px 36px rgba(0,0,0,.25),0 0 48px rgba(255,209,107,.15); }
.c-brand-card:hover::before { opacity:1; left:5%; right:5%; }
.c-brand-card__logo-wrap { height:110px; display:flex; align-items:center; justify-content:center; margin-bottom:.6rem; }
.c-brand-card__logo-wrap .c-brand-card__logo { height:auto; max-height:100px; margin:0; }
.c-brand-card__logo { height:90px; width:auto; max-width:160px; object-fit:contain; display:block; margin:0 auto .75rem; }
.c-brand-card__name { font-size:.9rem; font-weight:700; color:var(--c-accent); margin-bottom:.2rem; }
.c-brand-card__cat  { font-size:.68rem; color:var(--c-footer-text); text-transform:uppercase; letter-spacing:.1em; }
#spa-content .c-brand-card,
#spa-content .c-brand-card:hover { color:#fff; }

/* brands-section dark overrides */
.brands-section .c-brand-card       { background:var(--c-brandbox-card); border-color:var(--c-brandbox-border); box-shadow:0 4px 16px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.07); }
.brands-section .c-brand-card::before { background:linear-gradient(90deg,transparent,var(--c-accent),transparent); }
.brands-section .c-brand-card::after  { background:linear-gradient(90deg,transparent,rgba(var(--c-accent-rgb,5,138,75),.15),transparent); }
.brands-section .c-brand-card:hover   { background:var(--c-brandbox-bg); border-color:var(--c-accent); transform:translateY(-8px); box-shadow:0 0 0 1px rgba(var(--c-accent-rgb,5,138,75),.4),0 16px 36px rgba(0,0,0,.25),0 0 40px rgba(var(--c-accent-rgb,5,138,75),.15); }
.brands-section .c-brand-card__name   { color:var(--c-brandbox-text); }
.brands-section .c-brand-card__cat    { color:var(--c-brandbox-muted); }

/* ── Product cards ────────────────────────────────────────── */
.c-product { background:#fff; border-radius:16px; overflow:hidden; border:1px solid var(--linen-deeper); box-shadow:0 2px 10px rgba(0,0,0,.05); transition:transform .22s,box-shadow .22s; display:flex; flex-direction:column; }
.c-product:hover { transform:translateY(-4px); box-shadow:0 10px 30px rgba(0,0,0,.1); }
.c-product__media { background:#fff; padding:1.25rem; display:flex; align-items:center; justify-content:center; min-height:320px; border-radius:10px; box-shadow:0 2px 12px rgba(0,0,0,.07); margin:.75rem .75rem 0; }
.c-product__media img { max-height:260px; width:auto; object-fit:contain; display:block; margin:0 auto; }
.c-product__body { padding:1rem; flex:1; }
.c-product__name { font-size:.88rem; font-weight:600; color:var(--walnut); margin-bottom:.3rem; }
.c-product__desc { font-size:.88rem; line-height:1.65; color:var(--text-mid); }

/* ── Specs ────────────────────────────────────────────────── */
.c-specs { border-radius:12px; overflow:hidden; border:1px solid var(--linen-deeper); margin:1rem 0; }
.c-specs__row { display:grid; grid-template-columns:150px 1fr; padding:.65rem 1.2rem; border-bottom:1px solid var(--border); }
.c-specs__row:last-child { border-bottom:none; }
.c-specs__row:nth-child(even) { background:var(--cream); }
.c-specs__label { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--brand-mid); }
.c-specs__value { font-size:.88rem; font-weight:500; color:var(--text); }

/* ── Stats ────────────────────────────────────────────────── */
.c-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin:2rem 0; }
.c-stat  { text-align:center; }
.c-stat__num   { display:block; font-size:clamp(2.4rem,5vw,3.5rem); font-weight:800; color:var(--amber); line-height:1; margin-bottom:.3rem; letter-spacing:-.02em; text-shadow:0 0 30px rgba(255,209,107,.3); transition:transform .3s ease; }
.c-stat__label { display:block; font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--text-light); margin-top:.35rem; }
.c-stat:hover .c-stat__num { transform:scale(1.08); }
.c-section--dark .c-stat__num   { color:var(--c-accent); }
.c-section--dark .c-stat__label { color:rgba(255,255,255,.5); }
[data-theme="sage"] .c-section--dark .c-stat__num   { color:var(--c-accent); }
[data-theme="sage"] .c-section--dark .c-stat__label { color:var(--c-section-dark-text); }
.c-section--white .c-stat__num,
.c-section--cream .c-stat__num  { color:var(--walnut); }
.c-section--white .c-stat__label,
.c-section--cream .c-stat__label { color:var(--text-mid); }

/* ── Highlight ──────────────────────────────────────────────
   Body text uses the theme's readable section-dark-text token
   (which adapts to dark themes automatically). Accent identity
   comes from the border-left. <strong> gets accent color for
   the label/title pattern; <small> gets muted body text. */
.c-highlight { border-left:4px solid var(--c-highlight-border); background:var(--c-highlight-bg); border-radius:0 12px 12px 0; padding:1.35rem 1.5rem; margin:1.5rem 0; font-size:1rem; line-height:1.75; color:var(--c-section-dark-text); transition:border-color .3s,background .3s; }
.c-highlight strong { color:var(--c-accent); font-weight:600; }
.c-highlight small { display:block; margin-top:.25rem; color:rgba(var(--c-section-dark-text-rgb),.72); font-size:.875rem; line-height:1.55; }

/* ── Feature pill ──────────────────────────────────────────
   Theme-aware pill used for feature lists. Adapts to any bg. */
.c-feature-pills { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-bottom:2rem; }
.c-feature-pill { background:color-mix(in srgb,var(--c-accent) 10%,transparent); border:1px solid color-mix(in srgb,var(--c-accent) 40%,transparent); color:var(--c-section-dark-text); padding:.45rem 1rem; border-radius:20px; font-size:.8rem; font-weight:600; line-height:1.3; }

/* ── List ─────────────────────────────────────────────────── */
.c-list { list-style:none; padding:0; margin:.75rem 0; }
.c-list li { padding:.5rem 0 .5rem 1.75rem; position:relative; font-size:.95rem; line-height:1.65; color:var(--text-mid); border-bottom:1px solid var(--border); transition:color .15s; }
.c-list li:last-child { border-bottom:none; }
.c-list li::before { content:'✓'; position:absolute; left:0; color:var(--brand); font-weight:700; }
.c-list--x li::before { content:'✗'; color:#e53e3e; }
.c-section--dark .c-list li { color:rgba(255,255,255,.8); border-color:rgba(255,255,255,.1); }
.c-section--white .c-list li,
.c-section--cream .c-list li  { color:var(--walnut-mid); border-color:var(--linen-deeper); }

/* ── Comparison ───────────────────────────────────────────── */
.c-compare { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.c-compare__col { border-radius:16px; padding:1.75rem; color:var(--text); }
.c-compare__col--yes { background:#f5fdf6; border:2px solid var(--c-accent); transition:box-shadow .2s; }
.c-compare__col--yes:hover { box-shadow:0 4px 20px rgba(var(--c-accent-rgb,5,138,75),.15); }
.c-compare__col--no  { background:#fff5f5; border:2px solid #c0392b; }
.c-compare__title { font-size:.88rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; margin-bottom:1rem; }
.c-compare__col--yes .c-compare__title { color:var(--brand-mid); }
.c-compare__col--no  .c-compare__title { color:#e53e3e; }
.c-compare__col .c-list li { color:var(--text-mid); border-color:var(--border); }
.c-compare__col .c-list li::before { position:absolute; left:0; font-weight:700; }
.c-compare__col--yes .c-list li::before { color:var(--c-accent); }
.c-compare__col--no  .c-list li::before { color:#c0392b; }

/* ── Address cards ────────────────────────────────────────── */
.c-address { background:#fff; border-radius:16px; padding:1.75rem; border:1px solid var(--linen-deeper); border-top:3px solid var(--brand); transition:box-shadow .22s; }
.c-address:hover { box-shadow:0 8px 24px rgba(0,0,0,.08); }
.c-address__region  { font-size:.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--brand-mid); margin-bottom:.45rem; }
.c-address__company { font-size:.95rem; font-weight:700; color:var(--brand-dark); margin-bottom:.35rem; }
.c-address__lines   { font-size:.88rem; line-height:1.75; color:var(--text-mid); }
.c-address__phone   { display:inline-flex; align-items:center; gap:.45rem; margin-top:.9rem; background:var(--cream); padding:.45rem .9rem; border-radius:8px; font-size:.83rem; font-weight:600; color:var(--brand-dark); }

/* ── Form ─────────────────────────────────────────────────── */
.c-form { display:flex; flex-direction:column; gap:1.1rem; }
.c-form__row { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.c-form__group { display:flex; flex-direction:column; gap:.35rem; }
.c-form__group--full { grid-column:1/-1; }
.c-form__label { font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-dark); }
.c-form__input,.c-form__select,.c-form__textarea { padding:.8rem 1rem; border:1.5px solid var(--border); border-radius:10px; font-size:.95rem; font-family:var(--font); background:#fff; color:var(--text); transition:border-color .18s,box-shadow .18s; appearance:none; width:100%; }
.c-form__input:focus,.c-form__select:focus,.c-form__textarea:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(var(--c-accent-rgb,5,138,75),.15); }
.c-form__textarea { resize:vertical; min-height:140px; line-height:1.6; }
.c-form__select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a7060' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.5rem; }
.c-form__check { display:flex; align-items:flex-start; gap:.65rem; }
.c-form__check input { margin-top:.2rem; accent-color:var(--brand); flex-shrink:0; }
.c-form__check label { font-size:.88rem; line-height:1.55; color:var(--text-mid); }
.c-form__submit { padding:.9rem 2.2rem; background:var(--c-btn-primary-bg); color:var(--c-btn-primary-text); border:none; border-radius:50px; font-size:.95rem; font-weight:600; cursor:pointer; transition:background .2s,transform .2s; align-self:flex-start; }
.c-form__submit:hover { background:var(--c-btn-primary-hover); transform:translateY(-2px); }

/* ── Blog ─────────────────────────────────────────────────── */
.c-post { background:var(--c-card-bg, #fff); color:var(--c-section-dark-text, var(--text)); border-radius:20px; overflow:hidden; border:1px solid var(--c-card-border, var(--linen-deeper)); box-shadow:var(--c-card-hover-shadow, 0 4px 20px rgba(0,0,0,.06)); }
.c-post__inner   { padding:2.5rem; }
.c-post__meta    { display:flex; align-items:center; gap:1rem; font-size:.8rem; color:var(--text-light); margin-bottom:1rem; }
.c-post__cat     { background:var(--brand-pale); color:var(--brand-mid); font-weight:700; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; padding:.2rem .65rem; border-radius:20px; }
.c-post__title   { font-size:clamp(1.4rem,3vw,2rem); font-weight:700; color:var(--brand-dark); margin-bottom:.9rem; }
.c-post__excerpt { font-size:1.02rem; line-height:1.72; color:var(--text-mid); margin-bottom:1.5rem; }
.c-post__body    { font-size:.98rem; line-height:1.8; color:var(--text-mid); }
.c-post__body h3 { font-size:1.2rem; color:var(--brand-dark); margin:2rem 0 .75rem; font-weight:600; }
.c-post__body p  { margin-bottom:1.25rem; }
.c-post__body ul { margin:1rem 0 1.25rem; padding-left:1.5rem; }
.c-post__body li { margin:.5rem 0; line-height:1.65; }
.c-post__body strong { color:var(--brand-dark); font-weight:600; }
.c-video { position:relative; padding-bottom:56.25%; border-radius:14px; overflow:hidden; margin:1.75rem 0; box-shadow:0 4px 20px rgba(0,0,0,.12); }
.c-video iframe { position:absolute; inset:0; width:100%; height:100%; border:none; }

/* ── Value icon cards ─────────────────────────────────────── */
.c-value        { text-align:center; }
.c-value__icon  { width:64px; height:64px; object-fit:contain; margin:0 auto .9rem; }
.c-value__title { font-size:1rem; font-weight:600; color:var(--brand-dark); margin-bottom:.4rem; }
.c-value__body  { font-size:.88rem; line-height:1.65; color:var(--walnut-mid); }

/* ── Documentation ────────────────────────────────────────── */
.c-doc { background:#fff; border-radius:16px; padding:2rem 2.25rem; border:1px solid var(--linen-deeper); border-left:4px solid var(--brand); margin-bottom:1.5rem; box-shadow:0 2px 10px rgba(0,0,0,.04); }
.c-doc__title { font-size:1.15rem; font-weight:700; color:var(--brand-dark); margin-bottom:1rem; }
.c-doc__body  { font-size:.95rem; line-height:1.78; color:var(--text-mid); }
.c-doc__body p  { margin-bottom:1rem; }
.c-doc__body ul { margin:.5rem 0 1rem; }
.c-doc__body li { margin:.4rem 0; line-height:1.65; }
.c-doc__body strong { color:var(--brand-dark); }
.c-table { width:100%; border-collapse:collapse; margin:1rem 0; font-size:.88rem; }
.c-table th { background:var(--brand-dark); color:#fff; padding:.65rem 1rem; text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
.c-table td { padding:.65rem 1rem; border-bottom:1px solid var(--border); color:var(--text-mid); }
.c-table tr:last-child td { border-bottom:none; }
.c-table tr:hover td { background:var(--cream); }

/* ── Bottle cards ─────────────────────────────────────────── */
.bottle-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
@media (max-width: 1024px) {
  .bottle-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
@media (max-width: 560px) {
  .bottle-grid { grid-template-columns: 1fr; gap: .85rem; }
}

.bottle-card {
  background: var(--c-section-light, #f8f5f0);
  border: 1px solid var(--c-nav-border, rgba(0,0,0,.08));
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, border-color .25s ease;
  position: relative;
}
.bottle-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--c-accent) 40%, transparent);
}
.bottle-card--dark {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  backdrop-filter: blur(4px);
}
.bottle-card--dark:hover {
  background: rgba(255,255,255,.1);
  border-color: color-mix(in srgb, var(--c-accent) 60%, transparent);
}

.bottle-card__img {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem 1rem;
  height: 280px;
  flex-shrink: 0;
  margin: 0;
  border-radius: 0;
  position: relative;
  overflow: hidden;
}

.bottle-card__img img {
  max-height: 230px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  display: block;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  transition: transform .3s ease;
}
.bottle-card:hover .bottle-card__img img {
  transform: translateY(-4px) scale(1.03);
}
.bottle-card--dark .bottle-card__img { background: transparent; }

.bottle-card__body {
  padding: 1rem 1.1rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex: 1;
}
.bottle-card--no-img .bottle-card__body {
  padding: 2rem 1.5rem;
  justify-content: center;
  gap: .75rem;
}

.bottle-card__tag {
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.bottle-card--dark .bottle-card__tag {
  color: var(--c-accent);
  opacity: 1;
}

.bottle-card__name {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--c-nav-text, #1a1a1a);
  line-height: 1.2;
}
.bottle-card--dark .bottle-card__name { color: #fff; }

.bottle-card__specs {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  margin: .15rem 0;
}
.bottle-card__specs span {
  font-size: .62rem;
  font-weight: 700;
  padding: .2rem .6rem;
  border-radius: 20px;
  border: 1px solid var(--c-nav-border, rgba(0,0,0,.15));
  color: var(--c-nav-text, #333);
  background: transparent;
}
.bottle-card--dark .bottle-card__specs span {
  border-color: rgba(255,255,255,.3);
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.08);
}

.bottle-card__desc {
  font-size: .82rem;
  line-height: 1.65;
  color: var(--c-nav-text, #333);
  opacity: .72;
  margin-top: .25rem;
  flex: 1;
}
.bottle-card--dark .bottle-card__desc {
  color: rgba(255,255,255,.75);
  opacity: 1;
}
  opacity: .65;
  margin-top: .25rem;
  flex: 1;
}
.bottle-card--dark .bottle-card__desc { color: rgba(255,255,255,.65); opacity: 1; }

/* ── Pasta section ────────────────────────────────────────── */
.pasta-inner { max-width:50%; margin:0 auto; }

/* ── Side nav underline ───────────────────────────────────── */
.nav-side .side-links a::after,
.nav-side .side-links .nav-link::after { content:''; display:block; height:1px; background:var(--amber); width:0; transition:width .25s ease; margin-top:2px; }
.nav-side .side-links a:hover::after,
.nav-side .side-links .nav-link:hover::after,
.nav-side .side-links a.active::after,
.nav-side .side-links .nav-link.active::after { width:100%; }

/* ── Footer wave ──────────────────────────────────────────── */
.footer-wave svg { height:100px !important; }

/* ── Animations ───────────────────────────────────────────── */
@keyframes heroEntrance {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes popIn {
  from { opacity:0; transform:scale(.7) translateY(8px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
@keyframes brandShowcaseIn {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width:1024px) {
  .c-grid--4   { grid-template-columns:repeat(2,1fr); }
  .pasta-inner { max-width:100%; }
}
@media (max-width:768px) {
  .c-section,.c-section--white,.c-section--cream,.c-section--dark { padding:55px 0; }
  .c-hero  { padding:65px 1.25rem 0; }
  .c-split { grid-template-columns:1fr; gap:2rem; }
  .c-split--flip > :first-child,
  .c-split--flip > :last-child { order:0; }
  .c-grid--2,.c-grid--3,.c-grid--4 { grid-template-columns:1fr; }
  .c-form__row { grid-template-columns:1fr; }
  .c-compare   { grid-template-columns:1fr; }
  .bottle-grid { grid-template-columns:repeat(2,1fr); gap:.85rem; }
  .bottle-card__img { height:450px; }
  .bottle-card__img img { max-height:383px; }
}
@media (max-width:600px) {
  .c-stats { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px) {
  .bottle-grid  { grid-template-columns:1fr; }
}


/* ─────────────────────────────────────────────────────────────
   Theme-aware overrides for dark-on-dark readability issues.
   Appended as a patch — keeps earlier declarations intact.
   ───────────────────────────────────────────────────────────── */

/* Stats sitting on --c-hero-bg (which is dark in sand/dusk/earthy/
   cosmos/noir/aurora). Default .c-stat__label is var(--text-light),
   which is a grey that reads badly on warm-brown or dark-purple. */
.c-stats-hero .c-stat__num   { color: var(--c-accent); text-shadow: 0 0 30px rgba(var(--c-accent-rgb, 255,209,107), .3); }
.c-stats-hero .c-stat__label { color: var(--c-section-dark-text); opacity: .8; }

/* Noir, Cosmos, Aurora: every surface is dark, but .c-section--white
   is still keyed to "light section" text colors (var(--charcoal),
   var(--text-mid)). Force light text for these themes so headings
   and bodies are readable on the dark "white" section. */
[data-theme="noir"]   .c-section--white .c-heading__eyebrow,
[data-theme="cosmos"] .c-section--white .c-heading__eyebrow,
[data-theme="aurora"] .c-section--white .c-heading__eyebrow { color: var(--c-accent); }
[data-theme="noir"]   .c-section--white .c-heading__title,
[data-theme="cosmos"] .c-section--white .c-heading__title,
[data-theme="aurora"] .c-section--white .c-heading__title   { color: var(--c-section-dark-text); }
[data-theme="noir"]   .c-section--white .c-heading__body,
[data-theme="cosmos"] .c-section--white .c-heading__body,
[data-theme="aurora"] .c-section--white .c-heading__body    { color: rgba(var(--c-section-dark-text-rgb, 255,255,255), .75); }

[data-theme="noir"]   .c-section--white .c-split__title,
[data-theme="cosmos"] .c-section--white .c-split__title,
[data-theme="aurora"] .c-section--white .c-split__title     { color: var(--c-section-dark-text); }
[data-theme="noir"]   .c-section--white .c-split__body,
[data-theme="cosmos"] .c-section--white .c-split__body,
[data-theme="aurora"] .c-section--white .c-split__body      { color: rgba(var(--c-section-dark-text-rgb, 255,255,255), .88); }
[data-theme="noir"]   .c-section--white .c-split__eyebrow,
[data-theme="cosmos"] .c-section--white .c-split__eyebrow,
[data-theme="aurora"] .c-section--white .c-split__eyebrow   { color: var(--c-accent); }

/* Generic body text inside .c-section--white for these themes —
   catches any plain <p> / <span> content that inherited dark text. */
[data-theme="noir"]   .c-section--white,
[data-theme="cosmos"] .c-section--white,
[data-theme="aurora"] .c-section--white { color: var(--c-section-dark-text); }

/* Dusk: amber/gold buttons (.home-btn--primary, .c-hero__btn--white)
   sit on a bright button background; white text washes out. Force
   dark text so the gold accent remains legible. */
[data-theme="dusk"] .home-btn--primary,
[data-theme="dusk"] .c-hero__btn--white,
[data-theme="dusk"] .c-hero__btn--ghost   { color: #1a1628; }
[data-theme="dusk"] .home-btn--primary *,
[data-theme="dusk"] .c-hero__btn--white *,
[data-theme="dusk"] .c-hero__btn--ghost * { color: inherit; }

/* ─────────────────────────────────────────────────────────────
   Mobile wave simplification is handled by
   /js/core/wave-simplifier.js, which rewrites each .c-wave path
   `d` attribute on narrow viewports to a single horizontal bump
   (instead of the two-bump desktop shape). CSS can't edit SVG
   path data, so this has to be JS.
   ───────────────────────────────────────────────────────────── */