/* ============================================================
   NEXODUS — Premium editorial-shopping stylesheet
   Single stylesheet, design tokens via CSS custom properties.
============================================================ */

:root {
  /* Palette — Koupon-inspired: white surfaces, near-black text, signature green CTA */
  --bg:           #FFFFFF;
  --bg-alt:       #F7F7F8;
  --surface:      #FFFFFF;
  --ink:          #111611;
  --ink-soft:     #232324;
  --ink-muted:    #525252;
  --ink-faint:    #737373;
  --line:         #E5E5E5;
  --line-strong:  #D4D4D4;
  --primary:      #111611;
  --primary-2:    #232324;
  --accent:       #4CAB0C;
  --accent-hover: #337B03;
  --accent-soft:  #ECFFE5;
  --accent-light: #BEFC95;
  --accent-dark:  #1F4E01;
  --gold:         #FAC900;
  --danger:       #DB2C2C;
  --info:         #3E5FFF;
  --success:      #4CAB0C;

  /* Typography — Inter throughout, like Koupon */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif:   'Fraunces', Georgia, serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Spacing scale */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --s10: 128px;

  /* Radii */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;

  /* Shadows — subtle */
  --shadow-1: 0 1px 2px rgba(10, 22, 40, 0.04), 0 1px 3px rgba(10, 22, 40, 0.05);
  --shadow-2: 0 4px 10px rgba(10, 22, 40, 0.06), 0 2px 4px rgba(10, 22, 40, 0.04);
  --shadow-3: 0 12px 30px rgba(10, 22, 40, 0.10), 0 4px 8px rgba(10, 22, 40, 0.05);
  --shadow-4: 0 28px 70px rgba(10, 22, 40, 0.14), 0 10px 18px rgba(10, 22, 40, 0.07);

  /* Layout */
  --wrap:    1240px;
  --wrap-narrow: 760px;
  --wrap-wide:   1440px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 0.18s;
  --t-mid:  0.28s;
  --t-slow: 0.45s;
}

/* =========== Reset =========== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';
}
img, picture, svg { max-width: 100%; display: block; }
a { color: var(--primary); text-decoration: none; }
button { font: inherit; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s7) 0; }

/* =========== Typography — sans-serif, Koupon-flavoured =========== */
h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--primary); margin: 0 0 var(--s4); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 4.8vw, 3.6rem); font-weight: 700; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.55rem, 3vw, 2.2rem); font-weight: 700; }
h3 { font-size: clamp(1.1rem, 1.8vw, 1.35rem); font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; }
p  { margin: 0 0 var(--s4); }
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: var(--s3);
  background: var(--accent-soft);
  padding: 4px 10px;
  border-radius: 100px;
}
.eyebrow--ink { color: var(--ink-muted); background: var(--bg-alt); }
.eyebrow--plain { background: transparent; padding: 0; color: var(--ink-muted); }
.lede { font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--ink-muted); max-width: 60ch; line-height: 1.65; font-weight: 400; }
.text-balance { text-wrap: balance; }
.serif { font-family: var(--font-serif); }
.mono  { font-family: var(--font-mono); letter-spacing: 0.02em; font-size: 0.85em; }

/* =========== Layout =========== */
.wrap        { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s5); }
.wrap-narrow { max-width: var(--wrap-narrow); margin-inline: auto; padding-inline: var(--s5); }
.wrap-wide   { max-width: var(--wrap-wide); margin-inline: auto; padding-inline: var(--s5); }
.section     { padding-block: clamp(var(--s6), 4.5vw, var(--s8)); }
.section--tight { padding-block: var(--s6); }
.section--alt   { background: var(--surface); }
.section--ink   { background: var(--primary); color: #E8DECC; }
.section--ink h1, .section--ink h2, .section--ink h3 { color: #FFFFFF; }
.section--ink .lede { color: #C5BFAF; }
.section__head { margin-bottom: var(--s5); max-width: 62ch; }
.section__head h2 { margin-bottom: var(--s2); }
.section__head p { color: var(--ink-muted); font-size: 1.05rem; margin: 0; }

/* Skip link */
.skip-link { position: absolute; top: -100px; left: var(--s4); background: var(--primary); color: white; padding: var(--s3) var(--s4); border-radius: var(--r-sm); z-index: 1000; }
.skip-link:focus { top: var(--s3); }

/* =========== Top promo bar — Koupon-style green tint =========== */
.promo-bar {
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 9px var(--s4);
  font-weight: 500;
  border-bottom: 1px solid var(--accent-light);
}
.promo-bar strong { color: var(--accent-hover); font-weight: 700; }
.promo-bar a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* =========== Header / nav =========== */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__row {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s5);
  padding-block: var(--s4);
}
.brand {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.025em;
  text-decoration: none;
  line-height: 1;
}
.brand .dot { color: var(--accent); }
.brand small { display: block; font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); margin-top: 4px; font-weight: 500; }

.nav { display: flex; justify-content: center; gap: var(--s6); align-items: center; }
.nav a {
  font-size: 0.92rem; font-weight: 500; color: var(--ink); padding: var(--s2) 0;
  position: relative; letter-spacing: 0.01em;
  transition: color var(--t-fast) var(--ease);
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-mid) var(--ease);
}
.nav a:hover { color: var(--accent); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--accent); }

.header-actions { display: flex; justify-content: flex-end; gap: var(--s4); align-items: center; }
.header-icon-btn {
  background: transparent; border: 1px solid transparent; border-radius: 50%;
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink); transition: background var(--t-fast) var(--ease), border-color var(--t-fast);
}
.header-icon-btn:hover { background: var(--bg-alt); border-color: var(--line); }

.region-picker { position: relative; }
.region-picker__btn {
  background: transparent; border: 1px solid var(--line-strong); border-radius: 100px;
  padding: 6px 14px 6px 12px; cursor: pointer; font-size: 0.82rem; color: var(--ink);
  display: inline-flex; align-items: center; gap: 6px;
}
.region-picker__btn:hover { background: var(--surface); }
.region-picker__menu {
  position: absolute; right: 0; top: calc(100% + 8px); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-3);
  padding: 6px; min-width: 180px; display: none;
}
.region-picker.is-open .region-picker__menu { display: block; }
.region-picker__menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; background: transparent;
  border: 0; padding: 9px 12px; cursor: pointer; font-size: 0.9rem; color: var(--ink);
  text-align: left; border-radius: var(--r-sm); font-family: var(--font-body);
}
.region-picker__menu button:hover { background: var(--bg-alt); }
.region-picker__menu button[aria-current="true"] { color: var(--accent); font-weight: 600; }

.nav-toggle {
  display: none; background: transparent; border: 0; cursor: pointer; padding: var(--s2);
  color: var(--ink);
}

@media (max-width: 880px) {
  .site-header__row { grid-template-columns: 1fr auto; }
  .header-actions { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; background: var(--surface);
    border-bottom: 1px solid var(--line); padding: var(--s3) var(--s5); box-shadow: var(--shadow-2);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
  .nav a:last-child { border-bottom: 0; }
}

/* =========== Buttons — Koupon-styled =========== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 12px 22px; border-radius: 100px; font-weight: 600; font-size: 0.9rem;
  letter-spacing: 0.005em; text-decoration: none; border: 1px solid transparent;
  cursor: pointer; line-height: 1; font-family: var(--font-body);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: white; }
.btn--primary:hover { background: var(--accent-hover); }
.btn--accent  { background: var(--accent); color: white; }
.btn--accent:hover { background: var(--accent-hover); }
.btn--ink { background: var(--primary); color: white; }
.btn--ink:hover { background: var(--primary-2); }
.btn--outline { background: transparent; color: var(--primary); border-color: var(--line-strong); }
.btn--outline:hover { border-color: var(--primary); background: var(--bg-alt); }
.btn--ghost { background: transparent; color: var(--ink); padding-inline: var(--s4); }
.btn--ghost:hover { color: var(--accent-hover); }
.btn--lg { padding: 16px 30px; font-size: 0.98rem; }
.btn--sm { padding: 8px 16px; font-size: 0.8rem; }
.btn--xs { padding: 6px 12px; font-size: 0.74rem; font-weight: 600; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }
.btn .arrow { transition: transform var(--t-fast) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* =========== HERO (home) — Koupon-style green tint =========== */
.hero {
  padding: clamp(var(--s6), 5vw, var(--s8)) 0 var(--s7);
  background:
    radial-gradient(1200px 600px at 15% 0%, rgba(76, 171, 12, 0.07), transparent 60%),
    radial-gradient(1000px 500px at 95% 30%, rgba(250, 201, 0, 0.08), transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.hero__inner { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(var(--s6), 5vw, var(--s9)); align-items: center; }
.hero__copy h1 { margin-bottom: var(--s4); }
.hero__copy h1 em { font-style: normal; color: var(--accent); font-weight: 700; }
.hero__copy .lede { margin-bottom: var(--s5); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); }
.hero__stats {
  margin-top: var(--s5); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4);
  border-top: 1px solid var(--line); padding-top: var(--s4);
}
.hero__stat { font-size: 0.86rem; color: var(--ink-muted); }
.hero__stat strong { display: block; font-family: var(--font-display); font-size: 1.7rem; color: var(--primary); margin-bottom: 2px; font-weight: 600; }
.hero__visual {
  position: relative; aspect-ratio: 4 / 3; max-height: 620px;
  border-radius: var(--r-lg); overflow: hidden;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.hero__visual img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.hero__chip {
  position: absolute; background: var(--surface); border: 1px solid var(--line);
  border-radius: 100px; padding: 10px 16px; box-shadow: var(--shadow-2);
  display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 500;
}
.hero__chip--price { top: var(--s5); right: var(--s5); }
.hero__chip--price strong { font-family: var(--font-display); font-size: 1.05rem; color: var(--primary); }
.hero__chip--variants { bottom: var(--s5); left: var(--s5); background: var(--primary); color: white; border-color: var(--primary); }
@media (max-width: 940px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { max-width: 520px; aspect-ratio: 4 / 5; }
  .hero__stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
  .hero__stats { grid-template-columns: 1fr; }
}

/* =========== Marquee / Trust strip =========== */
.trust-strip {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--surface); padding-block: var(--s5);
}
.trust-strip__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); align-items: center; }
.trust-item { display: flex; gap: var(--s3); align-items: center; font-size: 0.88rem; }
.trust-item__icon { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); display: inline-flex; align-items: center; justify-content: center; color: var(--accent-hover); font-size: 1rem; flex-shrink: 0; }
.trust-item strong { display: block; color: var(--primary); font-family: var(--font-display); font-size: 1rem; margin-bottom: 1px; }
.trust-item span { color: var(--ink-muted); }
@media (max-width: 880px) {
  .trust-strip__row { grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
}
@media (max-width: 520px) {
  .trust-strip__row { grid-template-columns: 1fr; }
}

/* =========== Shop-by-category tiles =========== */
.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.cat-tile {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden;
  background: var(--bg-alt); border: 1px solid var(--line);
  text-decoration: none; color: white; display: flex;
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.cat-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.cat-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat-tile::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(10, 22, 40, 0.72) 100%);
  pointer-events: none;
}
.cat-tile__body { position: relative; z-index: 1; margin-top: auto; padding: var(--s5); width: 100%; }
.cat-tile__body span { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.cat-tile__body h3 { font-size: 1.4rem; color: white; margin: 4px 0 6px; }
.cat-tile__body small { font-size: 0.85rem; opacity: 0.85; }
@media (max-width: 860px) { .category-grid { grid-template-columns: repeat(2, 1fr); } }

/* =========== Product cards (shopping-style) =========== */
.product-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s4);
}
.product-grid--4 { grid-template-columns: repeat(4, 1fr); }
.product-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .product-grid--4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .product-grid--4, .product-grid--3 { grid-template-columns: repeat(2, 1fr); } }

.product-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  overflow: hidden; position: relative;
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), border-color var(--t-mid);
}
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); border-color: var(--line-strong); }
.product-card__media {
  aspect-ratio: 1 / 1; background: #FFFFFF; position: relative;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--line); overflow: hidden;
}
.product-card__media img {
  width: 100%; height: 100%; object-fit: contain; padding: var(--s4);
  transition: transform var(--t-slow) var(--ease);
}
.product-card:hover .product-card__media img { transform: scale(1.06); }
.product-card__media--placeholder { background: var(--bg-alt); font-family: var(--font-display); color: var(--ink-faint); font-size: 0.95rem; }
.badge {
  position: absolute; top: var(--s3); left: var(--s3); z-index: 2;
  background: var(--ink); color: white; font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 11px; border-radius: 100px;
}
.badge--accent { background: var(--accent); }
.badge--gold { background: var(--gold); color: var(--primary); }
.wishlist-btn {
  position: absolute; top: var(--s3); right: var(--s3); z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; background: var(--surface);
  border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform var(--t-fast), color var(--t-fast);
  color: var(--ink-muted);
}
.wishlist-btn:hover { color: var(--accent); transform: scale(1.06); }
.product-card__body { padding: var(--s4) var(--s5); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-card__cat { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.product-card__title { font-family: var(--font-display); font-size: 1.05rem; color: var(--primary); margin: 0; line-height: 1.3; font-weight: 600; min-height: 2.6em; }
.product-card__take { font-size: 0.86rem; color: var(--ink-muted); margin: 0; line-height: 1.55; flex: 1; }
.product-card__bottom { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.product-card__price { font-weight: 700; color: var(--primary); font-size: 1.15rem; font-family: var(--font-body); letter-spacing: -0.01em; }
.product-card__price-strike { color: var(--ink-faint); text-decoration: line-through; font-weight: 400; font-size: 0.85rem; margin-left: 6px; }
.product-card__arrow { color: var(--accent); font-weight: 600; font-size: 0.85rem; }
.rating {
  display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem; color: var(--ink-muted);
}
.rating__stars { color: var(--gold); letter-spacing: 1px; font-size: 0.85rem; }

/* =========== Featured Comparison block =========== */
.featured-comp {
  background: var(--primary); color: #E8DECC;
  border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-3);
  display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch;
}
.featured-comp__copy { padding: clamp(var(--s5), 4vw, var(--s8)); }
.featured-comp__copy .eyebrow { color: var(--gold); }
.featured-comp__copy h2 { color: white; max-width: 18ch; }
.featured-comp__copy p { color: #C5BFAF; font-size: 1.02rem; max-width: 50ch; }
.featured-comp__meta { display: flex; flex-wrap: wrap; gap: var(--s4); margin-bottom: var(--s5); font-size: 0.85rem; color: #B5AB94; }
.featured-comp__meta span { display: inline-flex; align-items: center; gap: 6px; }
.featured-comp__media { position: relative; min-height: 380px; background: var(--bg-alt); display: flex; align-items: center; justify-content: center; padding: var(--s4); }
.featured-comp__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.featured-comp__badge {
  position: absolute; top: var(--s5); right: var(--s5); background: var(--accent); color: white;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 100px;
}
@media (max-width: 880px) { .featured-comp { grid-template-columns: 1fr; } .featured-comp__media { min-height: 280px; aspect-ratio: 16 / 10; } }

/* =========== Editorial story split =========== */
.story {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(var(--s5), 5vw, var(--s8)); align-items: center;
}
.story--reverse { grid-template-columns: 1.05fr 1fr; }
.story--reverse .story__copy { order: 2; }
.story__media { aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: transparent; display: flex; align-items: center; justify-content: center; padding: var(--s4); }
.story__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.story__copy blockquote { margin: 0; padding: 0; font-family: var(--font-display); font-size: 1.4rem; color: var(--primary); border-left: 3px solid var(--accent); padding-left: var(--s4); font-style: italic; }
@media (max-width: 860px) { .story, .story--reverse { grid-template-columns: 1fr; } .story--reverse .story__copy { order: 0; } .story__media { max-width: 500px; } }

/* =========== Comparison table =========== */
.comparison-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.comparison-table { width: 100%; border-collapse: collapse; min-width: 700px; }
.comparison-table th, .comparison-table td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.comparison-table thead th { background: var(--bg-alt); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); font-weight: 600; position: sticky; top: 0; }
.comparison-table tbody tr:hover { background: #FBF8F1; }
.comparison-table td:last-child { text-align: right; white-space: nowrap; }

/* =========== Variant blocks (comparison page) =========== */
.variants { display: grid; gap: var(--s7); }
.variant {
  display: grid; grid-template-columns: 320px 1fr; gap: var(--s7); align-items: start;
  padding: var(--s7) 0; border-bottom: 1px solid var(--line);
}
.variant:last-child { border-bottom: 0; }
.variant__media { aspect-ratio: 1 / 1; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.variant__media img { width: 100%; height: 100%; object-fit: contain; padding: var(--s4); }
.variant__copy h3 { font-size: 1.6rem; margin-bottom: var(--s2); }
.variant__swatch { display: inline-flex; align-items: center; gap: var(--s2); font-size: 0.88rem; color: var(--ink-muted); margin-bottom: var(--s4); }
.swatch__dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line-strong); display: inline-block; }
.variant__price { font-family: var(--font-display); font-size: 1.7rem; color: var(--primary); font-weight: 600; margin-bottom: var(--s4); }
@media (max-width: 800px) { .variant { grid-template-columns: 1fr; gap: var(--s5); } .variant__media { max-width: 360px; } }

/* =========== Top sellers / shop list cards =========== */
.ts-card {
  display: grid; grid-template-columns: 260px 1fr; gap: var(--s6);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s5); margin-bottom: var(--s5);
  transition: box-shadow var(--t-mid) var(--ease), transform var(--t-mid), border-color var(--t-mid);
}
.ts-card:hover { box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.ts-card__media {
  aspect-ratio: 1 / 1; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.ts-card__media img { width: 100%; height: 100%; object-fit: contain; padding: var(--s4); transition: transform var(--t-slow) var(--ease); }
.ts-card:hover .ts-card__media img { transform: scale(1.05); }
.ts-card__cat-tag { position: absolute; top: 10px; left: 10px; background: var(--ink); color: white; padding: 4px 10px; border-radius: 100px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ts-card__body { display: flex; flex-direction: column; min-width: 0; }
.ts-card__body h3 { font-size: 1.35rem; margin-bottom: var(--s2); line-height: 1.25; }
.ts-card__byline { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-faint); margin-bottom: var(--s4); letter-spacing: 0.04em; }
.ts-card__summary { font-size: 0.96rem; color: var(--ink-soft); margin-bottom: var(--s4); line-height: 1.65; }
.ts-card__footer { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; justify-content: space-between; padding-top: var(--s4); border-top: 1px solid var(--line); margin-top: auto; }
.ts-card__price-block { font-size: 0.82rem; color: var(--ink-muted); }
.ts-card__price-block strong { color: var(--primary); font-size: 1.4rem; font-weight: 700; font-family: var(--font-body); display: inline-block; margin-right: 6px; }
.ts-card__price-note { display: block; color: var(--ink-faint); font-size: 0.78rem; margin-top: 2px; }
@media (max-width: 720px) { .ts-card { grid-template-columns: 1fr; gap: var(--s4); } .ts-card__media { max-width: 320px; margin: 0 auto; } }

/* =========== Filter bar =========== */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: var(--s2); padding-block: var(--s4);
  border-bottom: 1px solid var(--line); border-top: 1px solid var(--line);
  background: var(--bg); position: sticky; top: 64px; z-index: 20; margin-bottom: var(--s6);
}
.filter-bar a {
  padding: 8px 16px; border-radius: 100px; border: 1px solid var(--line-strong);
  font-size: 0.85rem; color: var(--ink); background: var(--surface);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.filter-bar a:hover { background: var(--primary); color: white; border-color: var(--primary); }
.filter-bar a.is-active { background: var(--primary); color: white; border-color: var(--primary); }

/* Category section headings (top sellers) */
.category-section { padding-block: var(--s7); border-bottom: 1px solid var(--line); }
.category-section:last-child { border-bottom: 0; }
.category-section__head { margin-bottom: var(--s6); max-width: 60ch; }
.category-section__head h2 { margin-bottom: var(--s3); }
.category-section__head p { color: var(--ink-muted); margin-bottom: 0; font-size: 1rem; }

/* =========== Article hero (used on comparison + blog) =========== */
.article-hero { padding: var(--s8) 0 var(--s6); border-bottom: 1px solid var(--line); }
.article-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--s5), 5vw, var(--s8)); align-items: center; }
.article-hero__copy h1 { font-size: clamp(2rem, 4.5vw, 3.6rem); margin-bottom: var(--s4); }
.article-hero__meta { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s5); font-size: 0.85rem; color: var(--ink-muted); padding-top: var(--s4); border-top: 1px solid var(--line); }
.article-hero__media { aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: transparent; display: flex; align-items: center; justify-content: center; }
.article-hero__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
@media (max-width: 880px) {
  .article-hero__inner { grid-template-columns: 1fr; }
  .article-hero__media { max-width: 480px; margin: 0 auto; }
}

/* =========== Disclosure banner =========== */
.disclosure {
  background: #FFF7E8; border-left: 3px solid var(--gold);
  padding: var(--s4); font-size: 0.88rem; color: #6F5320;
  border-radius: var(--r-sm); margin-bottom: var(--s6);
}
.disclosure a { color: inherit; text-decoration: underline; }

/* =========== Editorial prose =========== */
.prose { max-width: 70ch; }
.prose h2 { margin-top: var(--s7); }
.prose h3 { margin-top: var(--s6); }
.prose p, .prose ul, .prose ol { font-size: 1.05rem; line-height: 1.75; color: var(--ink-soft); }
.prose ul, .prose ol { padding-left: var(--s5); margin-bottom: var(--s5); }
.prose li { margin-bottom: var(--s3); }
.prose strong { color: var(--primary); font-weight: 600; }

/* =========== FAQ =========== */
.faq details {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s4) var(--s5); margin-bottom: var(--s3);
}
.faq summary { cursor: pointer; font-weight: 600; color: var(--primary); font-size: 1.02rem; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.4rem; color: var(--accent); transition: transform var(--t-fast); font-weight: 400; }
.faq details[open] summary { margin-bottom: var(--s3); }
.faq details[open] summary::after { content: '−'; }
.faq p { color: var(--ink-muted); margin: 0; }

/* =========== Newsletter band =========== */
.newsletter { background: var(--primary); color: #E8DECC; padding: var(--s8) 0; }
.newsletter__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: center; }
.newsletter h2 { color: white; }
.newsletter p { color: #C5BFAF; }
.newsletter form { display: flex; gap: var(--s2); flex-wrap: wrap; }
.newsletter input[type="email"] {
  flex: 1; min-width: 220px; padding: 14px 18px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.08);
  color: white; font-size: 0.95rem; font-family: var(--font-body);
}
.newsletter input[type="email"]::placeholder { color: #998D72; }
.newsletter input[type="email"]:focus { outline: 2px solid var(--gold); outline-offset: 2px; border-color: var(--gold); }
.newsletter small { color: #998D72; font-size: 0.78rem; display: block; margin-top: var(--s3); }
@media (max-width: 760px) { .newsletter__inner { grid-template-columns: 1fr; } }

/* =========== Footer =========== */
.site-footer { background: var(--primary); color: #C2C5C2; padding: var(--s7) 0 var(--s5); margin-top: var(--s7); }
.site-footer__top { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: var(--s7); padding-bottom: var(--s6); border-bottom: 1px solid rgba(255,255,255,0.1); }
.site-footer__brand { font-family: var(--font-display); font-size: 1.6rem; color: white; margin-bottom: var(--s3); font-weight: 800; letter-spacing: -0.025em; }
.site-footer__brand .dot { color: var(--accent); }
.site-footer__about { font-size: 0.9rem; color: #9CA09C; max-width: 38ch; line-height: 1.6; }
.site-footer h4 { color: white; font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: var(--s4); font-weight: 600; }
.site-footer a { color: #C2C5C2; text-decoration: none; display: block; padding-block: 5px; font-size: 0.92rem; transition: color var(--t-fast); }
.site-footer a:hover { color: var(--accent-light); }
.site-footer__bottom { padding-top: var(--s4); font-size: 0.78rem; color: #7A7E7A; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); }
@media (max-width: 860px) { .site-footer__top { grid-template-columns: 1fr 1fr; gap: var(--s5); } }
@media (max-width: 480px) { .site-footer__top { grid-template-columns: 1fr; } }

/* =========== Consent banner =========== */
.consent-banner {
  position: fixed; bottom: var(--s4); left: var(--s4); right: var(--s4);
  max-width: 540px; background: var(--primary); color: white;
  padding: var(--s4) var(--s5); border-radius: var(--r-md); box-shadow: var(--shadow-4);
  z-index: 100; font-size: 0.92rem; display: none;
}
.consent-banner.is-visible { display: block; }
.consent-banner p { margin-bottom: var(--s3); color: #E8DECC; }
.consent-banner a { color: var(--gold); }
.consent-banner__actions { display: flex; gap: var(--s2); }
.consent-banner button { flex: 1; padding: 9px 14px; border-radius: 100px; border: 0; cursor: pointer; font-size: 0.86rem; font-weight: 600; font-family: var(--font-body); }
.consent-banner__accept { background: var(--accent); color: white; }
.consent-banner__reject { background: transparent; color: white; border: 1px solid rgba(255,255,255,0.3) !important; }

/* ============================================================
   KOUPON-STYLE COLLECTION CARDS & PRODUCT-DETAIL LAYOUT
============================================================ */

/* Collection card — the koupon-style category module */
.collections-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
@media (max-width: 880px) { .collections-grid { grid-template-columns: 1fr; } }

.collection-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s4); display: flex; flex-direction: column;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
  text-decoration: none; color: inherit;
}
.collection-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.collection-card__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--s3); gap: var(--s3); }
.collection-card__title-frame h3 { font-size: 1.25rem; margin: 0 0 4px; line-height: 1.2; }
.collection-card__title-frame p { font-size: 0.86rem; color: var(--ink-muted); margin: 0; }
.collection-card__cta {
  color: var(--accent-dark); font-weight: 600; font-size: 0.78rem; white-space: nowrap;
  background: var(--accent-soft); padding: 6px 12px; border-radius: 100px;
  transition: background var(--t-fast), color var(--t-fast);
}
.collection-card__cta:hover { background: var(--accent); color: white; }
.collection-card__thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s2); }
@media (max-width: 1080px) { .collection-card__thumbs { grid-template-columns: repeat(5, 1fr); } .collection-card__thumbs > :nth-child(6) { display: none; } }
@media (max-width: 880px)  { .collection-card__thumbs { grid-template-columns: repeat(4, 1fr); } .collection-card__thumbs > :nth-child(5), .collection-card__thumbs > :nth-child(6) { display: none; } }
@media (max-width: 460px)  { .collection-card__thumbs { grid-template-columns: repeat(3, 1fr); } }
.thumb {
  aspect-ratio: 1 / 1; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-sm); overflow: hidden; display: flex; align-items: center; justify-content: center;
  transition: border-color var(--t-fast);
}
.thumb:hover { border-color: var(--ink-soft); }
.thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

/* Promo banner strip (illustrated banners like koupon) */
.promo-banners { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-bottom: var(--s7); }
@media (max-width: 880px) { .promo-banners { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .promo-banners { grid-template-columns: 1fr; } }
.promo-banner {
  position: relative; border-radius: 16px; overflow: hidden;
  aspect-ratio: 5 / 2; padding: var(--s5); display: flex; flex-direction: column; justify-content: flex-end;
  text-decoration: none; color: var(--primary);
  background: linear-gradient(135deg, #FFF8E1 0%, #FFE7A6 100%);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  border: 1px solid var(--line);
}
.promo-banner--green { background: linear-gradient(135deg, #ECFFE5 0%, #BEFC95 100%); }
.promo-banner--blue  { background: linear-gradient(135deg, #E7EEFF 0%, #B7CAFC 100%); }
.promo-banner--pink  { background: linear-gradient(135deg, #FFE9F1 0%, #FFB5D5 100%); }
.promo-banner--dark  { background: linear-gradient(135deg, #232324 0%, #111611 100%); color: white; border-color: var(--primary); }
.promo-banner:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); }
.promo-banner h3 { font-size: 1.4rem; margin: 0 0 4px; color: inherit; line-height: 1.15; }
.promo-banner p { margin: 0; font-size: 0.85rem; opacity: 0.85; }
.promo-banner__icon {
  position: absolute; top: var(--s4); right: var(--s4); font-size: 2.2rem; opacity: 0.7;
  width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.5); border-radius: 50%; backdrop-filter: blur(4px);
}
.promo-banner--dark .promo-banner__icon { background: rgba(255,255,255,0.1); color: var(--gold); }

/* Section header with eyebrow + see-all link */
.section-bar { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--s4); gap: var(--s4); flex-wrap: wrap; }
.section-bar h2 { margin-bottom: 0; }
.section-bar__right { font-size: 0.88rem; color: var(--ink-muted); }
.section-bar__right a { color: var(--accent); font-weight: 600; }

/* Dense product grid (for category pages) */
.dense-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: var(--s3); }

/* Compact product card — Koupon-style, two clickable areas (internal page + Amazon) */
.pc {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; display: flex; flex-direction: column; position: relative;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.pc:hover { border-color: var(--line-strong); box-shadow: 0 6px 20px rgba(17, 22, 17, 0.08); transform: translateY(-2px); }
.pc__inner-link {
  text-decoration: none; color: inherit; display: flex; flex-direction: column; flex: 1;
}
.pc__media {
  aspect-ratio: 1 / 1; background: #FFFFFF; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.pc__media img { width: 100%; height: 100%; object-fit: contain; padding: var(--s4); transition: transform var(--t-slow); }
.pc:hover .pc__media img { transform: scale(1.05); }
.pc__badge { position: absolute; top: 10px; left: 10px; background: var(--ink); color: white; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 100px; text-transform: uppercase; z-index: 2; }
.pc__badge--accent { background: var(--accent); }
.pc__badge--gold { background: var(--gold); color: var(--primary); }
.pc__badge--danger { background: var(--danger); }
.pc__body { padding: var(--s3) var(--s4) var(--s2); display: flex; flex-direction: column; gap: 4px; flex: 1; }
.pc__cat { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.pc__title { font-family: var(--font-display); font-size: 0.94rem; color: var(--primary); margin: 0; line-height: 1.35; font-weight: 600; min-height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc__take { font-size: 0.78rem; color: var(--ink-muted); margin: 0; line-height: 1.5; min-height: 2.3em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc__price { font-weight: 700; color: var(--primary); font-size: 1.1rem; letter-spacing: -0.01em; margin-top: 4px; }
.pc__price-strike { color: var(--ink-faint); text-decoration: line-through; font-weight: 400; font-size: 0.85rem; margin-left: 6px; }
.pc__price-empty { color: var(--ink-faint); font-size: 0.82rem; font-weight: 500; margin-top: 4px; }
.pc__actions { padding: 0 var(--s4) var(--s4); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.pc__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 9px 10px; border-radius: 100px; font-weight: 600; font-size: 0.76rem;
  text-decoration: none; line-height: 1; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  border: 1px solid transparent; white-space: nowrap;
}
.pc__btn--details { background: var(--bg-alt); color: var(--primary); border-color: var(--line); }
.pc__btn--details:hover { background: var(--surface); border-color: var(--ink-soft); color: var(--ink); }
.pc__btn--amazon { background: var(--accent); color: white; }
.pc__btn--amazon:hover { background: var(--accent-hover); }
.pc__btn .ico { width: 11px; height: 11px; }

/* Breadcrumb */
.breadcrumb { font-size: 0.82rem; color: var(--ink-muted); padding-block: var(--s4); }
.breadcrumb a { color: var(--ink-muted); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span { color: var(--ink-faint); margin: 0 6px; }

/* ============================================================
   PRODUCT DETAIL PAGE
============================================================ */
.product-detail { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--s8); }
@media (max-width: 980px) { .product-detail { grid-template-columns: 1fr; gap: var(--s5); } }

.pd-gallery {}
.pd-gallery__hero {
  aspect-ratio: 1 / 1; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--s3);
  display: flex; align-items: center; justify-content: center;
}
.pd-gallery__hero img { width: 100%; height: 100%; object-fit: contain; padding: var(--s5); }
.pd-gallery__thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s2); }
.pd-gallery__thumbs button {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  aspect-ratio: 1 / 1; padding: 4px; cursor: pointer; overflow: hidden;
  transition: border-color var(--t-fast);
}
.pd-gallery__thumbs button:hover, .pd-gallery__thumbs button[aria-current="true"] { border-color: var(--accent); }
.pd-gallery__thumbs img { width: 100%; height: 100%; object-fit: contain; }

.pd-info__cat { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.pd-info h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-top: var(--s3); margin-bottom: var(--s4); line-height: 1.2; }
.pd-info__rating { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s5); font-size: 0.88rem; color: var(--ink-muted); }
.pd-info__rating .stars { color: var(--gold); font-size: 1rem; letter-spacing: 1px; }
.pd-info__price { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s2); }
.pd-info__price strong { font-family: var(--font-display); font-size: 2.2rem; color: var(--primary); font-weight: 600; letter-spacing: -0.02em; }
.pd-info__price small { color: var(--ink-muted); font-size: 0.85rem; }
.pd-info__ship { font-size: 0.85rem; color: var(--success); margin-bottom: var(--s5); display: flex; align-items: center; gap: 6px; }

.pd-info__editorial { background: var(--bg-alt); border-left: 3px solid var(--accent); padding: var(--s4) var(--s5); border-radius: var(--r-sm); margin-bottom: var(--s5); }
.pd-info__editorial p { margin-bottom: 0; font-size: 0.96rem; color: var(--ink-soft); line-height: 1.65; font-family: var(--font-display); font-style: italic; }
.pd-info__editorial p::before { content: '“'; font-size: 1.8em; color: var(--accent); line-height: 0; margin-right: 4px; vertical-align: -0.3em; }

.pd-info__cta { display: flex; gap: var(--s3); margin-bottom: var(--s6); flex-wrap: wrap; }

.pd-features { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s5); margin-bottom: var(--s5); }
.pd-features h3 { font-family: var(--font-body); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--s3); }
.pd-features ul { list-style: none; padding: 0; margin: 0; }
.pd-features li { padding: 8px 0 8px 24px; position: relative; font-size: 0.92rem; color: var(--ink-soft); border-bottom: 1px solid var(--line); line-height: 1.55; }
.pd-features li:last-child { border-bottom: 0; }
.pd-features li::before { content: '✓'; position: absolute; left: 0; top: 8px; color: var(--accent); font-weight: 700; }

.pd-specs { display: grid; grid-template-columns: 140px 1fr; gap: 6px 16px; font-size: 0.86rem; padding-block: var(--s3); border-top: 1px solid var(--line); }
.pd-specs dt { color: var(--ink-muted); font-weight: 500; }
.pd-specs dd { margin: 0; color: var(--ink); }

/* "Our take" editorial review block on product pages */
.pd-review { padding-top: var(--s7); margin-top: var(--s6); border-top: 1px solid var(--line); }
.pd-review .prose { max-width: 74ch; }
.pd-review .prose p { font-size: 1.02rem; line-height: 1.75; color: var(--ink-soft); margin-bottom: var(--s4); }

/* Related products row under product detail */
.related-row { padding-top: var(--s7); }

/* ============================================================
   Article/blog cards
============================================================ */
.article-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.article-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); transform: translateY(-3px); }
.article-card__media {
  aspect-ratio: 4 / 3; background: #FFFFFF; overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--line);
}
.article-card__media img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; padding: var(--s4); display: block;
  transition: transform var(--t-slow);
}
.article-card:hover .article-card__media img { transform: scale(1.04); }
.article-card__tag { position: absolute; top: var(--s3); left: var(--s3); background: var(--ink); color: white; padding: 4px 10px; border-radius: 100px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.article-card__body { padding: var(--s4) var(--s5); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.article-card__byline { font-size: 0.75rem; color: var(--ink-faint); letter-spacing: 0.04em; }
.article-card__title { font-family: var(--font-display); font-size: 1.2rem; color: var(--primary); margin: 0; line-height: 1.25; font-weight: 600; }
.article-card__excerpt { font-size: 0.9rem; color: var(--ink-muted); margin: 0; line-height: 1.55; flex: 1; }
.article-card__cta { font-size: 0.82rem; color: var(--accent-hover); font-weight: 600; padding-top: var(--s3); border-top: 1px solid var(--line); margin-top: var(--s2); }

/* Article card with dual action row (used on blog.html) */
.article-card--actions { display: flex; flex-direction: column; padding: 0; }
.article-card__inner { text-decoration: none; color: inherit; display: flex; flex-direction: column; flex: 1; }
.article-card__inner .article-card__cta { padding-top: var(--s2); border-top: 0; margin-top: 0; }
.article-card__actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2);
  padding: var(--s4) var(--s5); border-top: 1px solid var(--line); background: var(--bg-alt);
}
.article-card__actions .btn { width: 100%; padding: 10px 12px; font-size: 0.8rem; }

/* =========== Utility =========== */
.muted { color: var(--ink-muted); }
.center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mt-5 { margin-top: var(--s5); }
.mt-6 { margin-top: var(--s6); }
.mt-7 { margin-top: var(--s7); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }