@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Hanken+Grotesk:wght@400;500;600;700&family=Spline+Sans+Mono:wght@500;600&display=swap');

/* ============================================================
   TrailKettle — "Topographic Field Journal" design system
   Palette: warm paper base · deep pine green · warm ember
   Type: Fraunces (display) · Hanken Grotesk (body) · Spline Sans Mono (instrument labels)
   ============================================================ */

:root{
  --paper:#f5efe2;        /* page base — warm cream */
  --paper-2:#efe7d5;      /* deeper cream band */
  --surface:#fffdf7;      /* card surface */
  --surface-2:#f3ecdb;    /* inset surface */
  --ink:#1b241d;          /* near-black text */
  --ink-soft:#3c463b;
  --muted:#6d6a5c;        /* warm gray text */
  --pine:#1f3d30;         /* primary deep green */
  --pine-2:#173026;       /* darker green */
  --pine-deep:#122419;    /* darkest band */
  --pine-line:#2c4d3e;
  --ember:#c65d2e;        /* accent */
  --ember-2:#a94a22;      /* accent hover */
  --ember-soft:#e9b48f;
  --sun:#d9a441;          /* secondary highlight */
  --border:#d8ccb2;       /* border on paper */
  --border-soft:rgba(27,36,29,.10);
  --shadow-sm:0 1px 2px rgba(18,36,25,.06);
  --shadow:0 10px 30px -12px rgba(18,36,25,.28);
  --shadow-lg:0 24px 60px -20px rgba(18,36,25,.42);
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:22px;
  --font-head:'Zilla Slab',Georgia,serif;
  --font-body:'Hanken Grotesk',system-ui,sans-serif;
  --font-mono:'Spline Sans Mono',ui-monospace,monospace;
  --maxw:1180px;
  /* subtle topographic contour texture */
  --topo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%231f3d30' stroke-opacity='0.05' stroke-width='1.1'%3E%3Cpath d='M-20 40 Q40 10 80 40 T180 40'/%3E%3Cpath d='M-20 70 Q40 40 80 70 T180 70'/%3E%3Cpath d='M-20 100 Q40 70 80 100 T180 100'/%3E%3C/g%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html{scroll-padding-top:88px}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--paper);
  background-image:var(--topo);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--ember-2);text-decoration:none}
a:hover{color:var(--ember)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;line-height:1.1;color:var(--ink);letter-spacing:-.01em}
p{margin:0 0 1em}
::selection{background:var(--ember);color:#fff}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ============================================================
   TICK MOTIF — trail-blaze diamonds (ratings, dividers, decoration)
   ============================================================ */
.dz-tick{
  display:inline-block;width:9px;height:9px;flex:0 0 auto;
  background:var(--border);transform:rotate(45deg);border-radius:2px;
  margin:0 2px;transition:background .18s;
}
.dz-tick-on,.dz-tick-filled{background:var(--ember)}
.dz-tick-off{background:var(--border)}
.dz-tickrow{display:inline-flex;align-items:center;gap:1px}
.dz-tickrow .dz-tick,.dz-tick-rate{width:10px;height:10px}
.dz-header-ticks,.dz-hero-ticks,.dz-footer-ticks,.dz-tick-trail,.dz-rank-ticks,
.dz-stat-divider,.dz-tick-ruler,.dz-spec-ticks-deco,.dz-tick-line{
  display:flex;align-items:center;gap:4px;opacity:.6
}
.dz-tick-trail .dz-tick,.dz-hero-ticks .dz-tick{width:7px;height:7px;background:var(--ember);opacity:.55}
/* svg tick/check icons inherit color from parent */
.dz-tick-svg,.dz-tick-icon,.dz-tick-badge,.dz-tick-gauge,.dz-tick-rule-svg,.dz-tick-mark{display:inline-flex;align-items:center;justify-content:center}
.dz-tick-svg svg,.dz-tick-icon svg,.dz-tick-badge svg{width:100%;height:100%;display:block}

/* ============================================================
   HEADER + NAV
   ============================================================ */
.dz-header{
  position:sticky;top:0;z-index:40;
  background:rgba(245,239,226,.85);
  backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--border);
}
.dz-header-inner{
  max-width:var(--maxw);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.dz-brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.dz-brand-logo{width:42px;height:42px;object-fit:contain}
.dz-brand-name{
  font-family:var(--font-head);font-weight:700;font-size:1.42rem;letter-spacing:-.02em;
  color:var(--pine);position:relative;
}
.dz-brand-name::after{
  content:"FIELD GEAR LAB";display:block;font-family:var(--font-mono);
  font-size:.52rem;font-weight:600;letter-spacing:.32em;color:var(--ember-2);
  margin-top:-2px;
}
.dz-nav-list{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
.dz-nav-link{
  font-family:var(--font-mono);font-size:.74rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);padding:9px 14px;border-radius:999px;
  transition:.16s;
}
.dz-nav-link:hover{background:var(--pine);color:#fff}
.dz-nav-toggle-input,.dz-nav-toggle-btn{display:none}
.dz-nav-toggle-btn{flex-direction:column;gap:5px;width:44px;height:44px;
  align-items:center;justify-content:center;cursor:pointer;border-radius:12px;border:1px solid var(--border)}
.dz-nav-toggle-bar{width:22px;height:2px;background:var(--pine);border-radius:2px;transition:.2s}

@media(max-width:860px){
  .dz-nav-toggle-btn{display:flex}
  .dz-nav{position:absolute;top:100%;left:0;right:0;background:var(--surface);
    border-bottom:1px solid var(--border);box-shadow:var(--shadow);
    max-height:0;overflow:hidden;transition:max-height .28s ease}
  .dz-nav-list{flex-direction:column;align-items:stretch;padding:8px 16px;gap:2px}
  .dz-nav-link{padding:12px;border-radius:10px}
  .dz-nav-toggle-input:checked ~ .dz-nav{max-height:340px}
}

/* ============================================================
   BUTTONS
   ============================================================ */
.dz-btn,.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-mono);font-weight:600;font-size:.82rem;letter-spacing:.04em;
  text-transform:uppercase;padding:13px 26px;border-radius:999px;cursor:pointer;
  border:2px solid transparent;transition:.18s;line-height:1;
  background:var(--ember);color:#fff;box-shadow:var(--shadow-sm);
}
.dz-btn:hover,.btn:hover{background:var(--ember-2);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow)}
.dz-btn-outline,.dz-btn-outlined{
  background:transparent;color:var(--pine);border-color:var(--pine);
}
.dz-btn-outline:hover,.dz-btn-outlined:hover{background:var(--pine);color:#fff;border-color:var(--pine)}

/* ============================================================
   HERO (index)
   ============================================================ */
.dz-hero{position:relative;overflow:hidden;background:var(--pine-deep);color:#f3ede0;isolation:isolate}
.dz-hero-bg{position:absolute;inset:0;z-index:-2}
.dz-hero-bg-img{width:100%;height:100%;object-fit:cover;opacity:.42}
.dz-hero-overlay{position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 90% at 15% 10%,rgba(31,61,48,.35),transparent 60%),
    linear-gradient(180deg,rgba(18,36,25,.62),rgba(18,36,25,.9));
}
.dz-hero-inner{
  max-width:var(--maxw);margin:0 auto;padding:104px 24px 116px;
  display:grid;grid-template-columns:1.35fr .65fr;gap:48px;align-items:center;
}
.dz-hero-content{max-width:640px}
.dz-hero-eyebrow,.dz-picks-kicker{
  font-family:var(--font-mono);font-size:.76rem;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:var(--sun);margin:0 0 18px;display:inline-flex;gap:10px;align-items:center;
}
.dz-hero-eyebrow::before,.dz-picks-kicker::before{content:"";width:26px;height:2px;background:var(--ember)}
.dz-hero-title{
  font-size:clamp(2.6rem,6vw,4.5rem);font-weight:700;color:#fff;margin:0 0 22px;line-height:1.02;
  display:flex;flex-direction:column;
}
.dz-hero-prefix{font-weight:400;font-size:.58em;font-style:italic;color:var(--ember-soft)}
.dz-hero-highlight{color:#fff}
.dz-hero-highlight,.dz-hero-suffix{position:relative}
.dz-hero-suffix{font-size:.68em;font-weight:500}
.dz-hero-subtitle{font-size:1.16rem;color:#d7d2c4;max-width:560px;margin:0 0 30px}
.dz-hero-cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.dz-hero .dz-hero-cta{background:var(--ember);color:#fff;border-color:var(--ember)}
.dz-hero .dz-hero-cta:hover{background:#fff;color:var(--pine);border-color:#fff}
.dz-hero-ticks{margin:0 0 24px}
/* rotating logo rings */
.dz-hero-logo-wrap{position:relative;display:grid;place-items:center;justify-self:center}
.dz-hero-logo{width:150px;height:150px;object-fit:contain;filter:drop-shadow(0 12px 30px rgba(0,0,0,.4))}
/* hero compass: dotted dial bezel + a bearing marker that hunts for north */
.dz-hero-logo-ring{position:absolute;border-radius:50%;inset:-24px;border:2px dotted rgba(217,164,65,.55);animation:none}
.dz-hero-logo-ring::after{content:"N";position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:.62rem;font-weight:600;color:var(--sun);background:var(--pine-deep);padding:0 4px;letter-spacing:.05em}
.dz-hero-logo-ring--alt{position:absolute;border-radius:50%;inset:-54px;border:1px solid rgba(255,255,255,.12);
  animation:tk-compass 8s cubic-bezier(.5,0,.2,1) infinite}
.dz-hero-logo-ring--alt::before{content:"";position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:18px solid var(--ember);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
.dz-hero-logo-ring--alt::after{content:"";position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);
  width:8px;height:8px;border-radius:50%;background:var(--sun);opacity:.7}
@keyframes tk-compass{
  0%{transform:rotate(0deg)}
  14%{transform:rotate(128deg)}
  26%{transform:rotate(84deg)}
  42%{transform:rotate(226deg)}
  56%{transform:rotate(182deg)}
  74%{transform:rotate(348deg)}
  86%{transform:rotate(354deg)}
  100%{transform:rotate(360deg)}
}
@media(prefers-reduced-motion:reduce){.dz-hero-logo-ring--alt{animation:none}}
@media(max-width:820px){
  .dz-hero-inner{grid-template-columns:1fr;padding:72px 24px 84px;gap:36px}
  .dz-hero-logo-wrap{display:none}
}

/* ============================================================
   MAIN + AFFILIATE DISCLOSURE
   ============================================================ */
.aff-disc{font-size:.86rem;color:var(--muted);line-height:1.55}
.aff-card{
  margin:28px auto;padding:14px 20px;max-width:820px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-sm);
}
.aff-ic{color:var(--ember);font-weight:700;font-size:1.2rem}
.aff-strip{margin:20px 0;padding:12px 18px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm)}
.cta-disclosure{font-size:.78rem;color:var(--muted);margin:8px 0 0;font-style:italic}

/* Section headers */
.section-head{text-align:center;margin:56px 0 12px}
.section-head h2{font-size:2rem;margin:.1em 0}
.section-head p{color:var(--muted);margin:0}

/* ============================================================
   EDITOR'S TOP PICKS — magazine
   ============================================================ */
.dz-picks{max-width:var(--maxw);margin:0 auto;padding:72px 24px 40px}
.dz-picks-head{text-align:center;max-width:640px;margin:0 auto 42px}
.dz-picks-kicker{justify-content:center}
.dz-picks-title{font-size:clamp(2rem,4vw,2.9rem);margin:0 0 10px}
.dz-picks-sub{color:var(--muted);font-size:1.08rem;margin:0}
.dz-picks-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  grid-auto-rows:1fr;
}
.dz-pick{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;position:relative;
  box-shadow:var(--shadow-sm);transition:.2s;
}
.dz-pick:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--ember-soft)}
/* #1 pick spans two columns and two rows */
.dz-pick-1{grid-column:span 2;grid-row:span 2;flex-direction:row}
.dz-pick-1 .dz-pick-media{flex:1.1}
.dz-pick-1 .dz-pick-body{flex:1;justify-content:center}
.dz-pick-1 .dz-pick-name{font-size:1.7rem}
.dz-pick-media{position:relative;background:var(--surface-2);overflow:hidden;aspect-ratio:4/3}
.dz-pick-1 .dz-pick-media{aspect-ratio:auto}
.dz-pick-img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.dz-pick:hover .dz-pick-img{transform:scale(1.05)}
.dz-rank-badge{
  position:absolute;top:14px;left:14px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  background:var(--pine);color:#fff;padding:7px 13px;border-radius:999px;
  font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.08em;
  box-shadow:var(--shadow);
}
.dz-rank-1{background:var(--ember)}
.dz-rank-num{white-space:nowrap}
.dz-rank-ticks{display:none}
.dz-pick-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.dz-pick-category{
  font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ember-2);margin:0;
}
.dz-pick-name{font-size:1.16rem;margin:0;line-height:1.2}
.dz-pick-name a{color:var(--ink)}
.dz-pick-name a:hover{color:var(--ember-2)}
.dz-pick-rating{display:flex;align-items:center;gap:8px}
.dz-pick-rating-val{font-family:var(--font-mono);font-weight:600;color:var(--ink);font-size:.9rem}
.dz-pick-highlights{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-direction:column;gap:5px}
.dz-pick-highlights li{position:relative;padding-left:20px;font-size:.9rem;color:var(--ink-soft)}
.dz-pick-highlights li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;background:var(--ember);transform:rotate(45deg);border-radius:2px}
.dz-pick-link{margin-top:auto;align-self:flex-start}
@media(max-width:820px){
  .dz-picks-grid{grid-template-columns:repeat(2,1fr)}
  .dz-pick-1{grid-column:span 2;grid-row:auto;flex-direction:column}
  .dz-pick-1 .dz-pick-media{aspect-ratio:16/9}
  .dz-pick-1 .dz-pick-name{font-size:1.3rem}
}
@media(max-width:560px){
  .dz-picks-grid{grid-template-columns:1fr}
  .dz-pick-1{grid-column:auto}
}

/* ============================================================
   HOW WE TEST
   ============================================================ */
.dz-how-we-test{background:var(--pine);color:#eae4d5;margin:56px 0 0;position:relative;overflow:hidden}
.dz-how-we-test::before{content:"";position:absolute;inset:0;background:var(--topo);opacity:.4;mix-blend-mode:overlay}
.dz-htw-intro{max-width:var(--maxw);margin:0 auto;padding:64px 24px 12px;text-align:center;position:relative}
.dz-htw-title{color:#fff;font-size:clamp(1.8rem,3.5vw,2.6rem);margin:0 0 12px}
.dz-htw-copy{color:#c7c2b2;max-width:620px;margin:0 auto}
.dz-htw-grid{
  max-width:var(--maxw);margin:0 auto;padding:24px 24px 68px;position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
.dz-htw-criterion{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);padding:24px 20px;transition:.2s;
}
.dz-htw-criterion:hover{background:rgba(255,255,255,.09);transform:translateY(-3px)}
.dz-htw-criterion .dz-tick,.dz-htw-criterion .dz-tick-svg{width:34px;height:34px;color:var(--sun);margin-bottom:14px;background:none;transform:none}
.dz-htw-heading{color:#fff;font-size:1.16rem;margin:0 0 8px}
.dz-htw-text{color:#bdb8a8;font-size:.92rem;margin:0}
@media(max-width:820px){.dz-htw-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.dz-htw-grid{grid-template-columns:1fr}}

/* ============================================================
   FIELD NOTES — editorial manifesto + rating ledger
   (replaces the generic "How We Test" icon-card grid)
   ============================================================ */
.tk-field{background:var(--pine);color:#e9e3d4;position:relative;overflow:hidden;margin:56px 0 0;border-radius:var(--radius-lg)}
.tk-field::before{content:"";position:absolute;inset:0;background:var(--topo);opacity:.4}
.tk-field-inner{max-width:var(--maxw);margin:0 auto;padding:76px 24px;position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
@media(max-width:860px){.tk-field-inner{grid-template-columns:1fr;gap:34px;padding:56px 24px}}
.tk-kicker{font-family:var(--font-mono);font-size:.74rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--sun);margin:0 0 18px;display:inline-flex;align-items:center;gap:10px}
.tk-kicker::before{content:"";width:26px;height:2px;background:var(--ember)}
.tk-field-title{color:#fff;font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.14;margin:0 0 18px;max-width:20ch}
.tk-field-copy{color:#c7c2b2;font-size:1.05rem;margin:0 0 22px;max-width:54ch}
.tk-sign{font-family:var(--font-head);font-style:italic;font-weight:500;font-size:1.15rem;color:var(--sun);margin:0}
.tk-ledger{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:26px 30px}
.tk-ledger-head{font-family:var(--font-mono);font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#a9a494;margin:0 0 20px}
.tk-meters{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px}
.tk-meters li{display:grid;grid-template-columns:1fr auto;gap:8px 10px;align-items:baseline}
.tk-m-label{font-family:var(--font-head);font-weight:600;font-size:1.05rem;color:#fff}
.tk-m-val{font-family:var(--font-mono);font-weight:600;color:var(--sun);font-size:.95rem}
.tk-m-track{grid-column:1/-1;height:8px;background:rgba(255,255,255,.13);border-radius:999px;overflow:hidden}
.tk-m-fill{display:block;height:100%;width:var(--v);background:linear-gradient(90deg,var(--sun),var(--ember));border-radius:999px;transform-origin:left;animation:tkgrow 1.05s cubic-bezier(.2,.7,.2,1) both}
@keyframes tkgrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.tk-m-fill{animation:none}}

/* ============================================================
   LISTING: filter + sidebar layout
   ============================================================ */
.content-with-sidebar{
  max-width:var(--maxw);margin:44px auto 0;padding:0 24px;
  display:grid;grid-template-columns:1fr 300px;gap:36px;align-items:start;
}
@media(max-width:960px){.content-with-sidebar{grid-template-columns:1fr}}
.main-content{min-width:0}

.filter-bar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 26px;
  padding:16px 20px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);position:sticky;top:76px;z-index:20;
}
.filter-bar label{
  display:flex;flex-direction:column;gap:5px;
  font-family:var(--font-mono);font-size:.62rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.filter-select{
  padding:9px 34px 9px 13px;border:1.5px solid var(--border);border-radius:999px;
  background:var(--surface-2);color:var(--ink);font-family:var(--font-body);font-size:.9rem;
  font-weight:500;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%236d6a5c' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;
}
.filter-select:hover{border-color:var(--ember)}
.filter-reset{
  background:none;border:1.5px solid var(--border);border-radius:999px;padding:9px 16px;
  font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);cursor:pointer;transition:.16s;align-self:flex-end;
}
.filter-reset:hover{border-color:var(--ember);color:var(--ember)}
.filter-results{margin-left:auto;align-self:flex-end;font-family:var(--font-mono);color:var(--muted);font-size:.82rem}

/* ============================================================
   PRODUCT GRID CARDS (index listing)
   ============================================================ */
.pg-grid,.dz-grid,.dz-listing{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:0;padding:0;
}
@media(max-width:900px){.pg-grid,.dz-grid,.dz-listing{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.pg-grid,.dz-grid,.dz-listing{grid-template-columns:1fr}}

.dz-card,.pg-item{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;color:var(--ink);position:relative;
  box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s,border-color .2s;
}
.dz-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--ember);
  transform:scaleX(0);transform-origin:left;transition:transform .3s;z-index:2}
.dz-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--ember-soft)}
.dz-card:hover::before{transform:scaleX(1)}
.dz-card-media{aspect-ratio:4/3;background:var(--surface-2);overflow:hidden}
.dz-card-img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.dz-card:hover .dz-card-img{transform:scale(1.06)}
.dz-card-body{padding:18px;display:flex;flex-direction:column;gap:9px;flex:1}
.dz-card-cat{
  font-family:var(--font-mono);font-size:.64rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ember-2);
}
.dz-card-title{font-size:1.08rem;margin:0;line-height:1.22}
.dz-card-highlights{list-style:none;padding:0;margin:2px 0 0;display:flex;flex-direction:column;gap:4px}
.dz-card-highlights .dz-highlight{position:relative;padding-left:19px;font-size:.85rem;color:var(--muted);line-height:1.4}
.dz-hl-tick{position:absolute;left:0;top:.5em;width:8px;height:8px;background:var(--sun);transform:rotate(45deg);border-radius:2px}
.dz-card-rating{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:12px;border-top:1px dashed var(--border)}
.dz-rating-num{font-family:var(--font-mono);font-weight:600;font-size:.9rem;color:var(--ink)}
.dz-rating-num::before{content:"★ ";color:var(--ember)}

/* generic .card fallback (older markup) */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:8px 0}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.grid{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:.2s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--surface-2)}
.card .body{padding:16px;display:flex;flex-direction:column;gap:7px;flex:1}
.card h3{margin:0;font-size:1.05rem}
.card .cat{color:var(--ember-2);font-size:.72rem;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em}
.rating{color:var(--ink);font-weight:600;font-family:var(--font-mono)}
.card-highlights{list-style:none;padding:0;margin:4px 0;font-size:.84rem;color:var(--muted)}
.card-highlights li{padding:1px 0}
.card-highlights li::before{content:"✓ ";color:var(--ember)}

/* ============================================================
   TOP 10 SIDEBAR
   ============================================================ */
.dz-top10{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:8px;box-shadow:var(--shadow-sm);overflow:hidden;
}
.dz-sticky{position:sticky;top:76px}
.dz-top10-title{
  font-family:var(--font-head);font-size:1.15rem;margin:0;padding:16px 16px 14px;
  color:#fff;background:var(--pine);border-radius:var(--radius-sm);position:relative;
}
.dz-top10-title::before{content:"RANKED";display:block;font-family:var(--font-mono);font-size:.55rem;
  letter-spacing:.28em;color:var(--sun);font-weight:600}
.dz-top10-list{list-style:none;margin:6px 0 0;padding:0;counter-reset:t10}
.dz-top10-item{border-bottom:1px solid var(--border)}
.dz-top10-item:last-child{border-bottom:0}
.dz-top10-link{display:flex;align-items:center;gap:12px;padding:12px 12px;color:var(--ink);transition:.15s;border-radius:10px}
.dz-top10-link:hover{background:var(--surface-2);color:var(--ink);padding-left:16px}
.dz-top10-rank{
  font-family:var(--font-head);font-weight:700;font-size:1.3rem;color:var(--ember);
  min-width:26px;text-align:center;line-height:1;
}
.dz-top10-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.dz-top10-name{font-size:.9rem;font-weight:600;line-height:1.25;color:var(--ink)}
.dz-top10-ticks{display:flex;gap:2px}
.dz-top10-ticks .dz-tick{width:7px;height:7px;margin:0}

/* sidebar older markup */
.sidebar-top10{position:sticky;top:76px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm)}
.sidebar-head{font-family:var(--font-head);font-weight:700;margin-bottom:8px}
.sidebar-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);color:inherit}
.sidebar-item:hover{color:var(--ember-2)}
.sidebar-rank{color:var(--ember);font-weight:700;font-family:var(--font-mono)}
.sidebar-name{flex:1;font-size:.9rem}

/* ============================================================
   STATS BAND
   ============================================================ */
.dz-stats{background:var(--pine-deep);color:#fff;margin:64px 0 0;border-radius:var(--radius-lg);overflow:hidden}
.dz-stats-band{
  max-width:var(--maxw);margin:0 auto;padding:46px 24px;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px 8px;
}
.dz-stat-item{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 26px;min-width:130px}
.dz-stat-num,.dz-stat-check{font-family:var(--font-head);font-weight:700;font-size:2.6rem;color:var(--sun);line-height:1}
.dz-stat-check{color:var(--ember)}
.dz-stat-label{font-family:var(--font-mono);font-size:.66rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#c7c2b2;margin-top:8px}
.dz-stat-qual{color:#9a9585}
.dz-stat-divider{opacity:.5}
.dz-stat-divider .dz-tick{width:6px;height:6px;background:var(--ember)}
@media(max-width:700px){
  .dz-stat-divider{display:none}
  .dz-stat-item{flex:0 0 44%;padding:14px}
  .dz-stat-num,.dz-stat-check{font-size:2.1rem}
}

/* ============================================================
   FAQ / Buyer's guide
   ============================================================ */
.dz-faq{max-width:840px;margin:72px auto;padding:0 24px}
.dz-faq-head{text-align:center;margin-bottom:34px}
.dz-faq-title{font-size:clamp(1.8rem,3.5vw,2.5rem);margin:0 0 10px}
.dz-faq-sub{color:var(--muted);margin:0}
.dz-tick-rule{display:flex;justify-content:center;gap:6px;margin-top:16px;opacity:.7}
.dz-faq-list{display:flex;flex-direction:column;gap:12px}
.dz-faq-item{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px 22px;box-shadow:var(--shadow-sm);transition:.18s;
}
.dz-faq-item:hover{border-color:var(--ember-soft);box-shadow:var(--shadow)}
.dz-faq-q{display:flex;align-items:flex-start;gap:12px;font-family:var(--font-head);font-weight:600;font-size:1.12rem;color:var(--ink)}
.dz-tick-badge{flex:0 0 auto;width:26px;height:26px;background:var(--ember);border-radius:50%;color:#fff;margin-top:2px}
.dz-faq-qtext{flex:1}
.dz-faq-a{color:var(--ink-soft);margin:12px 0 0;padding-left:38px;font-size:.98rem}

/* ============================================================
   FOOTER
   ============================================================ */
.dz-footer{background:var(--pine-deep);color:#c7c2b2;margin-top:0;position:relative;overflow:hidden}
.dz-footer::before{content:"";position:absolute;inset:0;background:var(--topo);opacity:.35}
.dz-footer-inner{max-width:var(--maxw);margin:0 auto;padding:56px 24px 30px;position:relative}
.dz-footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.12)}
.dz-footer-brand{max-width:360px}
.dz-footer-logo{width:40px;height:40px;object-fit:contain;vertical-align:middle;margin-right:12px}
.dz-footer-name{font-family:var(--font-head);font-weight:700;font-size:1.4rem;color:#fff;vertical-align:middle}
.dz-footer-desc{margin:14px 0 0;font-size:.92rem;color:#a9a494;line-height:1.6}
.dz-footer-ticks{margin-top:16px;opacity:.6}
.dz-footer-links{display:flex;flex-wrap:wrap;gap:10px 4px;align-items:center;font-family:var(--font-mono);font-size:.76rem;text-transform:uppercase;letter-spacing:.06em}
.dz-footer-link{color:#c7c2b2}
.dz-footer-link:hover{color:var(--sun)}
.dz-footer-sep{color:rgba(255,255,255,.3)}
.dz-footer-bottom{padding-top:24px;text-align:center}
.dz-footer-copy{font-size:.82rem;color:#8b8676;margin:0}

/* ============================================================
   PRODUCT PAGE
   ============================================================ */
.ad-placement{margin:22px auto;max-width:var(--maxw);padding:0 24px}
.ad-placement-inner{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.ad-unit{width:300px;height:250px;background:var(--surface-2);border:1px dashed var(--border);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}
.ad-unit:empty::before{content:"Advertisement";color:var(--muted);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-family:var(--font-mono)}

.product,.product-hero-split{max-width:var(--maxw);margin:0 auto;padding:34px 24px}
.product h1,.product-hero-split h1{font-family:var(--font-head)}

/* product hero split */
.dz-product-hero{max-width:var(--maxw);margin:0 auto;padding:36px 24px 8px}
.dz-hero-eyebrow{font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ember-2);display:flex;align-items:center;gap:8px;margin-bottom:14px}
.dz-eyebrow-text{color:var(--ember-2)}
.dz-eyebrow-sep{color:var(--border)}
.dz-eyebrow-brand{color:var(--muted)}
.dz-product-hero .dz-hero-title{font-size:clamp(1.9rem,4vw,2.9rem);color:var(--ink);margin:0 0 16px;max-width:820px}
.dz-hero-tagline{font-size:1.12rem;color:var(--ink-soft);max-width:760px;margin:0}
.dz-hero-tickmark-panel,.dz-tick-ruler,.dz-tick-trail{margin-top:18px}

/* GALLERY — interactive main + thumbnails (enhanced by JS) */
.gallery{
  max-width:var(--maxw);margin:20px auto 8px;padding:0 24px;
  display:grid;grid-template-columns:1fr;gap:12px;
}
.gallery.gallery--ready{display:block}
.gallery-main{
  position:relative;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
}
.gallery-main img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:var(--surface-2)}
.gallery-thumbs{display:flex;gap:10px;margin-top:12px}
.gallery-thumb{
  flex:1;border:2px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;
  background:var(--surface-2);cursor:pointer;padding:0;transition:.16s;aspect-ratio:4/3;
}
.gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-thumb:hover{border-color:var(--ember-soft)}
.gallery-thumb.is-active{border-color:var(--ember)}
/* fallback (JS off): simple responsive grid */
.gallery:not(.gallery--ready){grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.gallery:not(.gallery--ready) img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);border:1px solid var(--border)}

/* product top: gallery + sticky buybox (built by JS) */
.pd-top{max-width:var(--maxw);margin:22px auto 8px;padding:0 24px;display:grid;grid-template-columns:1fr 360px;gap:34px;align-items:start}
.pd-top .gallery{max-width:none;margin:0;padding:0;width:100%}
.pd-top .dz-buybox{max-width:none;margin:0;padding:0;position:sticky;top:88px}
@media(max-width:860px){.pd-top{grid-template-columns:1fr;gap:20px}.pd-top .dz-buybox{position:static}}

/* score bar */
.score-bar-wrap{max-width:var(--maxw);margin:16px auto;padding:16px 22px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.score-bar-label{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.score-bar-track{height:10px;background:var(--surface-2);border-radius:999px;overflow:hidden;border:1px solid var(--border)}
.score-bar-fill{height:100%;background:linear-gradient(90deg,var(--sun),var(--ember));border-radius:999px}

/* buybox */
.dz-buybox{max-width:var(--maxw);margin:20px auto;padding:0 24px}
.dz-buybox-inner{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:26px 26px 24px;box-shadow:var(--shadow);
}
.dz-buybox-title{font-size:1.3rem;margin:0 0 4px}
.dz-buybox-brand{font-family:var(--font-mono);font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 14px}
.dz-buybox-rating{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.dz-buybox-ratingnum{font-family:var(--font-mono);font-weight:600;color:var(--ink)}
.dz-buybox-cta{width:100%;margin-bottom:16px}
.dz-buybox-trust{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.dz-buybox-trustitem{display:flex;align-items:center;gap:10px;font-size:.86rem;color:var(--ink-soft)}
.dz-buybox-trustitem .dz-tick-icon{width:16px;height:16px;color:var(--pine)}
.dz-buybox-trustitem .dz-tick-icon::before{content:"✓";color:var(--pine);font-weight:700}
.dz-buybox-note{font-family:var(--font-mono);font-size:.68rem;color:var(--muted);margin-top:12px;font-style:normal}

/* verdict + detail list */
.ph-details{max-width:var(--maxw);margin:0 auto;padding:8px 24px}
.verdict-box{background:var(--pine);color:#eae4d5;border-radius:var(--radius);padding:22px 26px;margin:18px 0;position:relative;overflow:hidden}
.verdict-box::before{content:"";position:absolute;inset:0;background:var(--topo);opacity:.4}
.verdict-label{font-family:var(--font-mono);font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--sun);margin-bottom:8px;position:relative}
.verdict-text{position:relative;color:#efe9db;font-size:1.02rem;margin:0}
ul.clean{list-style:none;padding:0;margin:16px 0;columns:2;column-gap:32px}
@media(max-width:640px){ul.clean{columns:1}}
ul.clean li{padding:8px 0;border-bottom:1px solid var(--border);break-inside:avoid;padding-left:22px;position:relative}
ul.clean li::before{content:"";position:absolute;left:0;top:1.05em;width:8px;height:8px;background:var(--ember);transform:rotate(45deg);border-radius:2px}

/* spec table cards */
.dz-spec-table{max-width:var(--maxw);margin:40px auto;padding:0 24px}
.dz-spec-header{display:flex;align-items:baseline;gap:14px;margin-bottom:20px}
.dz-spec-heading{font-size:1.7rem;margin:0}
.dz-spec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.dz-spec-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:.18s}
.dz-spec-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--ember-soft)}
.dz-spec-card-top{font-family:var(--font-mono);font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ember-2);margin-bottom:8px}
.dz-spec-chip{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ember-2)}
.dz-spec-card-body,.dz-spec-value{font-family:var(--font-head);font-weight:600;font-size:1.15rem;color:var(--ink)}
.dz-spec-ticks-deco{display:flex;gap:3px;margin-top:12px;opacity:.5}
.dz-spec-ticks-deco .dz-tick{width:6px;height:6px}
.dz-spec-gauge{margin-top:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 22px}
.dz-spec-gauge-label{font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:10px;display:flex;justify-content:space-between}
.dz-spec-gauge-pct{color:var(--ember)}
.dz-tick-gauge{display:flex;gap:4px}
.dz-tick-gauge .dz-tick{flex:1;height:10px;width:auto;border-radius:3px;transform:none}
.dz-spec-motif{opacity:.4}

/* pros / cons */
.cols{max-width:var(--maxw);margin:28px auto;padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:640px){.cols{grid-template-columns:1fr}}
.chip{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow-sm)}
.chip h3{margin:0 0 14px;font-size:1.2rem;display:flex;align-items:center;gap:10px}
.chip:first-child h3::before{content:"+";display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;background:var(--pine);color:#fff;border-radius:50%;font-family:var(--font-body);font-size:1.1rem}
.chip:last-child h3::before{content:"–";display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;background:var(--ember);color:#fff;border-radius:50%;font-family:var(--font-body);font-size:1.1rem}
.chip ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.chip li{padding-left:22px;position:relative;color:var(--ink-soft);font-size:.95rem}
.chip:first-child li::before{content:"✓";position:absolute;left:0;color:var(--pine);font-weight:700}
.chip:last-child li::before{content:"✕";position:absolute;left:0;color:var(--ember);font-weight:700}

/* reviews */
.review{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:18px 20px;margin:12px 0;box-shadow:var(--shadow-sm)}
.review strong{color:var(--ink)}
.product>h2,.wrap>h2{max-width:var(--maxw);margin-left:auto;margin-right:auto}

/* related products */
.related-section{background:var(--paper-2);padding:48px 0;margin-top:48px;border-top:1px solid var(--border)}
.related-section .wrap{max-width:var(--maxw)}
.featured-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;padding:16px 0}
.featured-card,.related-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;color:var(--ink);box-shadow:var(--shadow-sm);transition:.2s}
.featured-card:hover,.related-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--ember-soft)}
.featured-img,.related-card .featured-img{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:var(--surface-2);overflow:hidden}
.featured-img img{width:100%;height:100%;object-fit:cover}
.featured-body{padding:16px}
.featured-rank{color:var(--ember);font-weight:700;font-size:.8rem;font-family:var(--font-mono)}
.featured-title{font-family:var(--font-head);font-weight:600;margin:4px 0;font-size:1rem}

/* ============================================================
   COMPARE TABLE (clickable rows)
   ============================================================ */
.compare-wrap{overflow-x:auto;max-width:var(--maxw);margin:24px auto;padding:0 24px}
.compare-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.compare-table th,.compare-table td{padding:14px 16px;border-bottom:1px solid var(--border);text-align:left}
.compare-table th{background:var(--pine);color:#fff;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.compare-bar{height:7px;background:var(--surface-2);border-radius:999px;margin-top:5px;overflow:hidden}
.compare-bar-fill{height:100%;background:linear-gradient(90deg,var(--sun),var(--ember));border-radius:999px}
tr[data-href]{cursor:pointer;transition:background .15s}
tr[data-href]:hover{background:var(--surface-2)}

/* brand cloud (older markup) */
.brand-cloud-section{background:var(--surface);padding:22px 20px;border:1px solid var(--border);border-radius:var(--radius);margin:28px 0;box-shadow:var(--shadow-sm)}
.brand-cloud-label{font-family:var(--font-mono);font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);text-align:center;margin-bottom:12px}
.brand-cloud{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.brand-tag{background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:7px 15px;font-size:.85rem;cursor:pointer;transition:.15s}
.brand-tag:hover{border-color:var(--ember)}
.brand-tag.active{background:var(--pine);color:#fff;border-color:var(--pine)}

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination,#pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin:60px 0 12px;padding-top:8px;flex-wrap:wrap}
.page-btn{min-width:42px;height:42px;padding:0 12px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink);border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.82rem;font-weight:600;cursor:pointer;transition:.15s}
.page-btn:hover{border-color:var(--ember);color:var(--ember)}
.page-btn.active{background:var(--pine);color:#fff;border-color:var(--pine)}
.page-btn.page-nav{font-size:.72rem;letter-spacing:.04em;text-transform:uppercase}
.page-btn.disabled{opacity:.4;pointer-events:none}

/* ============================================================
   COOKIE BANNER
   ============================================================ */
#cookie-banner{position:fixed;bottom:0;left:0;right:0;background:var(--pine-deep);color:#fff;padding:16px 24px;display:none;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;z-index:60;box-shadow:0 -8px 30px rgba(0,0,0,.25)}
html.cookie-ask #cookie-banner{display:flex}
#cookie-banner a{color:var(--sun);text-decoration:underline}
#cookie-banner .cookie-btns{display:flex;gap:10px}
#cookie-banner button{background:var(--ember);color:#fff;border:0;border-radius:999px;padding:10px 20px;cursor:pointer;font-family:var(--font-mono);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
#cookie-banner button#cookie-decline{background:transparent;border:1.5px solid rgba(255,255,255,.4)}

/* ============================================================
   STATIC PAGES prose legibility
   ============================================================ */
.product h2{font-size:1.7rem;margin:32px 0 12px}
.product h3{font-size:1.25rem;margin:24px 0 10px}
hr{border:0;border-top:1px solid var(--border);margin:32px 0}

/* header + footer: drop decorative tick rows */
.dz-header-ticks,.dz-footer-ticks{display:none}
/* footer affiliate disclosure */
.dz-footer-aff{font-size:.78rem;color:#8f8a7a;max-width:760px;margin:0 auto 14px;line-height:1.55;
  display:flex;gap:8px;align-items:flex-start;justify-content:center;text-align:left}
.dz-footer-aff-ic{color:var(--sun);font-weight:700;flex:0 0 auto;font-size:.9rem;line-height:1.4}

/* mobile product page: widen main column by removing nested wrapper padding
   (was .wrap 24 + .product-hero-split 24 + .ph-details/.pd-top 24 = 72px gutter) */
@media(max-width:600px){
  .product-hero-split{padding-left:0;padding-right:0}
  .ph-details{padding-left:0;padding-right:0}
  .pd-top{padding-left:0;padding-right:0}
}

/* pros/cons single marker (overrides generic ul.clean diamond inside chips) */
.cols .chip:first-child ul li::before,
.cols .chip:last-child ul li::before{
  background:none;width:auto;height:auto;transform:none;border-radius:0;
  left:0;top:.02em;font-weight:700;
}
.cols .chip:first-child ul li::before{content:"✓";color:var(--pine)}
.cols .chip:last-child ul li::before{content:"✕";color:var(--ember)}

/* ============================================================
   MOTION — trail/path themed animations (reduced-motion safe).
   .reveal classes are added by JS only, so no-JS keeps content visible.
   ============================================================ */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .75s cubic-bezier(.2,.75,.2,1)}
  .reveal.in{opacity:1;transform:none}

  /* hero highlight: a trail draws itself under the key word */
  .dz-hero-highlight{align-self:flex-start;display:inline-block;position:relative}
  .dz-hero-highlight::after{content:"";display:block;height:5px;margin-top:8px;border-radius:3px;
    background:linear-gradient(90deg,var(--ember),var(--sun));transform:scaleX(0);transform-origin:left;
    animation:tk-draw 1s .6s cubic-bezier(.2,.75,.2,1) forwards}
  @keyframes tk-draw{to{transform:scaleX(1)}}

  /* rank badges pulse once, ledger fills already animate */
  .dz-rank-1{animation:tk-badgepop .6s .3s both}
  @keyframes tk-badgepop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
}

/* trail divider: marching dashed path + a hiker marker that walks it */
.trail-divider{position:relative;max-width:var(--maxw);margin:6px auto 2px;height:54px;padding:0 24px;overflow:hidden}
.trail-svg{width:100%;height:100%;display:block;overflow:visible}
.trail-line{fill:none;stroke:var(--ember);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:2 13;opacity:.5}
.trail-hiker{position:absolute;top:50%;left:24px;width:28px;height:28px;margin-top:-14px;
  display:grid;place-items:center;background:var(--sun);color:var(--pine-deep);border-radius:50%;
  box-shadow:var(--shadow);font-size:.72rem;line-height:1}
@media(prefers-reduced-motion:no-preference){
  .trail-line{animation:tk-march 1.1s linear infinite}
  .trail-hiker{animation:tk-walk 7s ease-in-out infinite}
  @keyframes tk-march{to{stroke-dashoffset:-15}}
  @keyframes tk-walk{
    0%{left:24px;transform:translateY(0) rotate(0)}
    25%{transform:translateY(-9px) rotate(8deg)}
    50%{transform:translateY(0) rotate(0)}
    75%{transform:translateY(-9px) rotate(-8deg)}
    100%{left:calc(100% - 52px);transform:translateY(0) rotate(0)}
  }
}

/* ============================================================
   PRODUCT LISTING — "Field Catalog" ledger rows (unconventional)
   overrides the card-grid look; scoped to .pg-item so product
   pages / related cards are untouched.
   ============================================================ */
.dz-listing{display:block;width:100%}
.pg-grid{display:block;width:100%;border-top:2px solid var(--ink);counter-reset:gear;margin-top:2px}
.pg-item,.pg-item.dz-card{
  display:grid;grid-template-columns:46px 90px minmax(0,1fr);align-items:center;gap:20px;
  padding:18px 34px 18px 6px;border:0;border-bottom:1px solid var(--border);border-radius:0;
  background:transparent;box-shadow:none;color:var(--ink);position:relative;overflow:visible;
  transition:background .18s,box-shadow .18s,padding-left .18s;
}
.pg-item::before{
  counter-increment:gear;content:counter(gear,decimal-leading-zero);
  font-family:var(--font-head);font-weight:700;font-size:1.35rem;color:var(--border);
  position:static;background:none;transform:none;width:auto;height:auto;line-height:1;
  justify-self:start;transition:color .18s;
}
.pg-item::after{
  content:"↗";position:absolute;right:10px;top:50%;transform:translateY(-50%) translateX(6px);
  font-family:var(--font-mono);color:var(--ember);opacity:0;transition:.18s;font-size:1.15rem;
}
.pg-item:hover{background:var(--surface);box-shadow:var(--shadow);transform:none;border-color:transparent;padding-left:14px;z-index:1}
.pg-item:hover::before{color:var(--ember)}
.pg-item:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
.pg-item:hover .dz-card-img{transform:scale(1.07)}
.pg-item .dz-card-media{width:90px;height:90px;aspect-ratio:auto;border-radius:12px;border:1px solid var(--border);flex:0 0 auto;box-shadow:var(--shadow-sm)}
.pg-item .dz-card-body{padding:0;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:22px;align-items:center;grid-template-areas:"cat rating" "title rating" "hl rating"}
.pg-item .dz-card-cat{grid-area:cat;font-size:.6rem;letter-spacing:.18em;margin-bottom:3px}
.pg-item .dz-card-title{grid-area:title;font-size:1.18rem;line-height:1.15;margin:0}
.pg-item .dz-card-highlights{grid-area:hl;flex-direction:row;flex-wrap:wrap;gap:3px 16px;margin:6px 0 0}
.pg-item .dz-card-highlights .dz-highlight{padding-left:15px;font-size:.78rem;color:var(--muted)}
.pg-item .dz-card-highlights .dz-highlight:nth-child(n+3){display:none}
.pg-item .dz-hl-tick{width:6px;height:6px;top:.55em}
.pg-item .dz-card-rating{grid-area:rating;align-self:center;flex-direction:column;align-items:flex-end;gap:6px;margin:0;padding:0;border:0;text-align:right}
.pg-item .dz-card-rating .dz-tickrow{order:2}
.pg-item .dz-rating-num{order:1;font-size:1.25rem;font-family:var(--font-head);font-weight:700}
.pg-item .dz-rating-num::before{content:""}
.pg-item .dz-tickrow .dz-tick{width:8px;height:8px}
@media(max-width:600px){
  .pg-item,.pg-item.dz-card{grid-template-columns:66px minmax(0,1fr) auto;gap:14px;padding:16px 6px}
  .pg-item::before,.pg-item::after{display:none}
  .pg-item .dz-card-media{width:66px;height:66px}
  .pg-item .dz-card-highlights{display:none}
}