/* =====================================================================
   HAVEN & HIDE — Editorial Leather Goods Review
   Premium design system • v2.0
   ===================================================================== */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ---------- Tokens ---------- */
:root{
  /* Palette */
  --bg:           #faf7f2;          /* warm cream paper */
  --bg-elev:      #ffffff;
  --bg-sand:      #f1ebe1;
  --ink:          #14110d;          /* near-black ink */
  --ink-soft:     #2a241c;
  --muted:        #6b6258;
  --muted-2:      #948a7c;
  --line:         #e7dfd2;
  --line-soft:    #efe9dd;

  /* Brand */
  --brand:        #6f3e1d;          /* saddle/walnut */
  --brand-deep:   #4d2912;
  --brand-warm:   #b88654;          /* cognac highlight */
  --gold:         #b9924a;          /* brass gold */
  --gold-soft:    #d4b079;

  /* Accent */
  --accent:       #1f3a2e;          /* deep forest */
  --rose:         #a0463a;
  --success:      #2f6a45;
  --danger:       #a43c2c;

  /* Type */
  --serif: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --serif-soft: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Layout */
  --maxw: 1240px;
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(20,17,13,.04), 0 2px 6px rgba(20,17,13,.05);
  --shadow:    0 4px 12px rgba(20,17,13,.06), 0 18px 40px -12px rgba(20,17,13,.10);
  --shadow-lg: 0 12px 30px rgba(20,17,13,.10), 0 30px 80px -20px rgba(20,17,13,.18);

  --t-fast: .18s cubic-bezier(.4,0,.2,1);
  --t-med:  .35s cubic-bezier(.4,0,.2,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  color:var(--ink);
  background:var(--bg);
  font-feature-settings:"kern","liga","calt","ss01";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-deep);text-decoration:none;transition:color var(--t-fast)}
a:hover{color:var(--brand-warm)}
button{font-family:inherit;cursor:pointer}
ul,ol{padding-left:1.2em}
hr{border:0;height:1px;background:var(--line);margin:32px 0}

h1,h2,h3,h4,h5{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:0 0 .5em}
h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1.05;letter-spacing:-.025em}
h2{font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.15;letter-spacing:-.018em}
h3{font-size:1.25rem;line-height:1.25;letter-spacing:-.005em}
h4{font-size:1.05rem;line-height:1.3;font-family:var(--sans);font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-soft)}

p{margin:0 0 1em}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--brand);}
.eyebrow::before{content:"";display:inline-block;width:30px;height:1px;background:var(--brand-warm)}

/* ---------- Header ---------- */
header.site-header{position:sticky;top:0;z-index:50;background:rgba(250,247,242,.92);backdrop-filter:saturate(160%) blur(10px);-webkit-backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line);}
.topbar{background:var(--ink);color:#e8dfcf;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;padding:8px 0;font-weight:500;}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:18px}
.topbar a{color:#e8dfcf;opacity:.85}
.topbar a:hover{opacity:1;color:var(--gold-soft)}
.topbar-marquee{flex:1;min-width:0;text-align:center;color:#cdbfa6}

.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;gap:24px;}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand .brand-mark{width:46px;height:46px;border-radius:50%;background:linear-gradient(145deg,#fdfaf3,#f3ead9);border:1px solid var(--line);box-shadow:var(--shadow-sm);display:grid;place-items:center;overflow:hidden;transition:transform var(--t-med);}
.brand:hover .brand-mark{transform:rotate(-4deg) scale(1.04)}
.brand .brand-mark img{width:62%;height:62%;object-fit:contain}
.brand .brand-text{display:flex;flex-direction:column;line-height:1}
.brand .brand-name{font-family:var(--serif);font-size:1.45rem;font-weight:600;color:var(--ink);letter-spacing:.005em;}
.brand .brand-name .amp{font-style:italic;color:var(--brand-warm);font-weight:500;margin:0 .12em;}
.brand .brand-tag{font-family:var(--sans);font-size:.6rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-top:5px;}

nav.primary{display:flex;align-items:center;gap:6px}
nav.primary a{position:relative;padding:10px 14px;border-radius:8px;font-size:.9rem;font-weight:500;color:var(--ink-soft);letter-spacing:.005em;transition:color var(--t-fast),background var(--t-fast);}
nav.primary a:hover{color:var(--brand-deep);background:var(--bg-sand)}
nav.primary a.active{color:var(--brand-deep)}
nav.primary a.active::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--brand-warm);border-radius:1px;}
.nav-cta{margin-left:8px;padding:11px 20px !important;border-radius:999px !important;background:var(--ink);color:#fff !important;font-weight:600 !important;letter-spacing:.06em;font-size:.8rem !important;text-transform:uppercase;transition:background var(--t-fast),transform var(--t-fast);}
.nav-cta:hover{background:var(--brand-deep) !important;transform:translateY(-1px)}

.nav-toggle{display:none;background:transparent;border:0;width:42px;height:42px;flex-direction:column;justify-content:center;align-items:center;gap:5px;border-radius:8px;}
.nav-toggle span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:all var(--t-fast)}

@media(max-width:880px){
  nav.primary{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--bg-elev);padding:14px 24px 24px;gap:2px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);transform:translateY(-12px);opacity:0;visibility:hidden;transition:all var(--t-med);}
  nav.primary.open{transform:translateY(0);opacity:1;visibility:visible}
  nav.primary a{padding:14px 12px;border-radius:8px}
  .nav-cta{margin:6px 0 0;text-align:center}
  .nav-toggle{display:inline-flex}
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .topbar-marquee{display:none}
}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:90px 0 80px;background:linear-gradient(180deg,#f4ecdf 0%,#faf7f2 100%);}
.hero::before{content:"";position:absolute;inset:0;background-image:url('images/hero.webp');background-size:cover;background-position:center;opacity:.32;filter:saturate(1.1);z-index:0;}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 70% 50%,rgba(250,247,242,0) 0%,rgba(250,247,242,.55) 60%,rgba(250,247,242,.95) 100%),linear-gradient(180deg,rgba(250,247,242,.2),rgba(250,247,242,.85));z-index:1;}
.hero .container{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center;}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;padding:7px 16px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid var(--line);font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--brand-deep);backdrop-filter:blur(4px);margin-bottom:24px;}
.hero-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--brand-warm);box-shadow:0 0 0 4px rgba(184,134,84,.18)}
.hero h1{font-family:var(--serif);font-size:clamp(2.5rem,5.4vw,4.4rem);line-height:1.02;letter-spacing:-.028em;color:var(--ink);margin:0 0 22px;}
.hero h1 em{font-style:italic;color:var(--brand-deep);font-weight:500}
.hero h1 .accent{display:inline-block;position:relative;background:linear-gradient(120deg,var(--brand-deep),var(--brand-warm));-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic;font-weight:500;}
.hero-sub{font-size:1.12rem;color:var(--muted);max-width:540px;line-height:1.65;margin-bottom:30px;}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:30px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:999px;font-weight:600;font-size:.92rem;letter-spacing:.02em;transition:transform var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);border:0;cursor:pointer;text-decoration:none;}
.btn-primary{background:var(--ink);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--brand-deep);transform:translateY(-2px);box-shadow:var(--shadow);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink-soft)}
.btn-ghost:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.btn-warm{background:var(--brand-deep);color:#fff;box-shadow:var(--shadow-sm)}
.btn-warm:hover{background:var(--brand);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow)}

.hero-mark{position:relative;aspect-ratio:1/1;max-width:460px;margin:0 auto;isolation:isolate;}
.hero-mark .seal-ring{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(111,62,29,.30);animation:rotate 60s linear infinite;}
.hero-mark .seal-ring.r2{inset:14px;border-style:solid;border-color:rgba(111,62,29,.15)}
.hero-mark .seal-ring.r3{inset:28px;border-color:rgba(184,134,84,.30);border-style:dotted;animation-direction:reverse;animation-duration:90s}
@keyframes rotate{to{transform:rotate(360deg)}}
.hero-mark .seal-text{position:absolute;inset:0;animation:rotate 90s linear infinite;}
.hero-mark .seal-text svg{width:100%;height:100%}
.hero-mark .seal-text text{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.34em;fill:var(--brand-deep);text-transform:uppercase;}
.hero-mark .core{position:absolute;inset:62px;border-radius:50%;background:radial-gradient(120% 120% at 30% 20%,#fffaf0 0%,#f3e7d2 50%,#e6d3b3 100%);box-shadow:inset 0 0 40px rgba(111,62,29,.10),0 30px 60px -20px rgba(20,17,13,.30),0 6px 18px rgba(20,17,13,.12);display:grid;place-items:center;border:1px solid rgba(255,255,255,.6);}
.hero-mark .core::before{content:"";position:absolute;inset:14px;border-radius:50%;border:1px solid rgba(111,62,29,.25);}
.hero-mark .core img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(20,17,13,.18));}
.hero-mark .ribbon{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:9px 22px;border-radius:999px;font-size:.66rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;box-shadow:0 8px 20px rgba(20,17,13,.30);}
.hero-mark .floater{position:absolute;background:var(--bg-elev);border:1px solid var(--line);border-radius:14px;padding:10px 14px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow);font-size:.78rem;animation:float 5s ease-in-out infinite;}
.hero-mark .floater .ic{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:var(--bg-sand);color:var(--brand-deep);font-size:1rem;}
.hero-mark .floater b{display:block;font-family:var(--serif);font-size:1.05rem;color:var(--ink);line-height:1}
.hero-mark .floater span{font-size:.66rem;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;font-weight:600}
.hero-mark .f1{top:6%;left:-8%}
.hero-mark .f2{top:42%;right:-12%;animation-delay:1.6s}
.hero-mark .f3{bottom:8%;left:-2%;animation-delay:.9s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.hero-trust{display:flex;flex-wrap:wrap;gap:22px 30px;align-items:center;margin-top:18px;color:var(--muted);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;}
.hero-trust .ts{display:flex;align-items:center;gap:8px}
.hero-trust .ts::before{content:"✓";color:var(--brand-warm);font-weight:700}

@media(max-width:980px){
  .hero{padding:60px 0 80px}
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-mark{max-width:340px}
  .hero-mark .f1{top:0%;left:0%}
  .hero-mark .f2{top:50%;right:0%}
  .hero-mark .f3{bottom:0%;left:0%}
}

/* ---------- Affiliate bar ---------- */
.aff-bar{background:var(--ink-soft);color:#cdbfa6;padding:11px 0;font-size:.82rem;text-align:center;border-bottom:1px solid rgba(255,255,255,.04);}
.aff-bar strong{color:#e8dfcf;font-weight:700}

/* ---------- Section base ---------- */
.section{padding:90px 0}
.section-tight{padding:60px 0}
.section-head{text-align:center;margin-bottom:50px;max-width:760px;margin-left:auto;margin-right:auto}
.section-head .eyebrow{margin-bottom:14px}
.section-head h2{margin-bottom:14px}
.section-head p{color:var(--muted);font-size:1.05rem;line-height:1.65}
.divider{width:60px;height:2px;margin:18px auto 0;background:linear-gradient(90deg,transparent,var(--brand-warm),transparent);}

/* ---------- Editor's Top Picks ---------- */
.picks{background:var(--ink);color:#f4ecdf;position:relative;overflow:hidden;padding:100px 0 110px;}
.picks::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 80% 0%,rgba(184,134,84,.18),transparent 60%),radial-gradient(50% 50% at 0% 100%,rgba(111,62,29,.22),transparent 60%);pointer-events:none;}
.picks .container{position:relative;z-index:1}
.picks-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;margin-bottom:50px;}
.picks-head .eyebrow{color:var(--gold-soft)}
.picks-head .eyebrow::before{background:var(--gold-soft)}
.picks-head h2{color:#fff;margin:0;max-width:680px}
.picks-head h2 em{color:var(--gold-soft);font-style:italic;font-weight:500}
.picks-head p{color:#bcae94;max-width:420px;margin:0;font-size:.95rem}

.picks-stage{display:grid;grid-template-columns:1.55fr 1fr;gap:34px;}
.pick-feature{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:#1d1814;border:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;transition:transform var(--t-med);text-decoration:none;color:inherit}
.pick-feature:hover{transform:translateY(-3px)}
.pick-feature .pf-img{aspect-ratio:5/4;overflow:hidden;position:relative;}
.pick-feature .pf-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.pick-feature:hover .pf-img img{transform:scale(1.04)}
.pick-feature .pf-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.65) 100%);}
.pick-feature .pf-rank{position:absolute;top:22px;left:22px;display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);padding:9px 16px;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#fff;z-index:2;}
.pick-feature .pf-rank .ord{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--gold-soft);letter-spacing:0;font-weight:700;}
.pick-feature .pf-body{padding:30px 30px 32px}
.pick-feature .pf-cat{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:10px;}
.pick-feature .pf-title{font-family:var(--serif);color:#fff;font-size:1.85rem;line-height:1.15;margin:0 0 14px;letter-spacing:-.012em;}
.pick-feature .pf-quote{font-family:var(--serif-soft);font-style:italic;font-size:1.05rem;line-height:1.55;color:#d8caaf;margin:0 0 22px;}
.pick-feature .pf-meta{display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.08);padding-top:18px;gap:10px;flex-wrap:wrap;}
.pf-score{display:flex;align-items:center;gap:10px}
.pf-score .num{font-family:var(--serif);font-size:1.7rem;color:#fff;font-weight:700;line-height:1;}
.pf-score .lbl{font-size:.66rem;color:var(--muted-2);letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.pf-link{font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff;border-bottom:1px solid var(--gold-soft);padding-bottom:3px;transition:color var(--t-fast);}
.pf-link:hover{color:var(--gold-soft)}

.picks-stack{display:flex;flex-direction:column;gap:22px}
.pick-row{display:grid;grid-template-columns:140px 1fr;gap:22px;background:#1d1814;border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:18px;transition:border-color var(--t-fast),transform var(--t-fast);text-decoration:none;color:inherit;}
.pick-row:hover{border-color:rgba(184,134,84,.4);transform:translateY(-2px)}
.pick-row .pr-img{aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:#2a231b}
.pick-row .pr-img img{width:100%;height:100%;object-fit:cover}
.pick-row .pr-body{display:flex;flex-direction:column;justify-content:center;min-width:0}
.pick-row .pr-rank{display:inline-flex;align-items:center;gap:8px;font-family:var(--serif);font-style:italic;color:var(--gold-soft);font-size:.95rem;font-weight:600;margin-bottom:8px;}
.pick-row .pr-rank::before{content:"";width:24px;height:1px;background:var(--gold-soft)}
.pick-row .pr-title{font-family:var(--serif);color:#fff;font-size:1.18rem;line-height:1.2;margin:0 0 10px;letter-spacing:-.005em;}
.pick-row .pr-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.82rem;color:#bcae94}
.pick-row .pr-stars{color:var(--gold-soft);letter-spacing:1px}

@media(max-width:880px){.picks-stage{grid-template-columns:1fr}}

/* ---------- Filter bar ---------- */
.filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:14px;background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin-bottom:34px;box-shadow:var(--shadow-sm);}
.filter-label{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
.filter-select{appearance:none;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:9px 36px 9px 14px;font-family:var(--sans);font-size:.86rem;color:var(--ink);font-weight:500;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%236b6258' d='M6 8 0 0h12z'/></svg>");background-repeat:no-repeat;background-position:right 14px center;transition:border-color var(--t-fast);}
.filter-select:hover,.filter-select:focus{border-color:var(--brand-warm);outline:none}
.filter-reset{background:transparent;border:1px solid var(--line);border-radius:8px;padding:9px 16px;font-size:.82rem;color:var(--muted);font-weight:500;transition:all var(--t-fast);}
.filter-reset:hover{border-color:var(--ink);color:var(--ink)}
.filter-results{margin-left:auto;font-size:.86rem;color:var(--muted)}
.filter-results b{color:var(--ink);font-weight:600}

/* ---------- Product grid ---------- */
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px;}
.product-card{position:relative;display:flex;flex-direction:column;background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;transition:transform var(--t-med),box-shadow var(--t-med),border-color var(--t-med);box-shadow:var(--shadow-sm);}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--gold-soft);}
.card-img-wrap{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-sand);}
.card-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease;}
.product-card:hover .card-img-wrap img{transform:scale(1.06)}
.card-badge{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);color:var(--ink);padding:5px 12px;border-radius:999px;font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;border:1px solid rgba(255,255,255,.6);box-shadow:var(--shadow-sm);}
.card-rating-badge{position:absolute;top:14px;right:14px;background:var(--ink);color:#fff;padding:5px 11px 5px 9px;border-radius:999px;font-size:.78rem;font-weight:700;display:flex;align-items:center;gap:5px;box-shadow:var(--shadow-sm);}
.card-rating-badge .si{color:var(--gold-soft);font-size:.72rem}

.price-flag{position:absolute;left:0;top:62px;background:var(--brand-deep);color:#fff;font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:6px 16px 6px 14px;clip-path:polygon(0 0,100% 0,calc(100% - 8px) 50%,100% 100%,0 100%);}
.price-flag.deal{background:var(--rose)}
.price-flag.bestseller{background:var(--accent)}
.price-flag.editor{background:var(--gold);color:#1a1308}
.price-flag.value{background:var(--success)}

.card-body{padding:22px 22px 12px;flex:1;display:flex;flex-direction:column}
.card-brand{font-size:.62rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--brand);margin-bottom:8px;}
.card-title{font-family:var(--serif);font-size:1.18rem;line-height:1.25;color:var(--ink);margin:0 0 12px;letter-spacing:-.005em;min-height:2.5em;}
.stars-row{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.stars-char{color:var(--gold);letter-spacing:1px;font-size:.92rem}
.rating-num{font-weight:700;font-size:.86rem;color:var(--ink)}
.rating-count{font-size:.76rem;color:var(--muted-2)}
.card-snippet{color:var(--muted);font-size:.86rem;line-height:1.55;margin:0 0 14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.card-price{display:flex;align-items:baseline;gap:10px;margin-top:auto;padding-top:12px;border-top:1px dashed var(--line);flex-wrap:wrap;}
.card-price .pp-now{font-family:var(--serif);font-size:1.25rem;font-weight:700;color:var(--ink);line-height:1;}
.card-price .pp-est{font-size:.82rem;color:var(--muted-2);text-decoration:line-through;}
.card-price .pp-save{margin-left:auto;font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--success);background:rgba(47,106,69,.08);padding:4px 10px;border-radius:999px;}
.card-footer{padding:14px 22px 20px;display:flex;align-items:center;justify-content:space-between;}
.btn-review{font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--brand-deep);padding-bottom:2px;border-bottom:1px solid var(--brand-warm);transition:color var(--t-fast),border-color var(--t-fast);}
.product-card:hover .btn-review{color:var(--ink);border-bottom-color:var(--ink)}

/* ---------- Compare table ---------- */
.compare-section{background:var(--bg-sand)}
.compare-table-wrap{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);}
.compare-table{width:100%;border-collapse:collapse;font-size:.92rem}
.compare-table thead{background:var(--ink);color:#f4ecdf}
.compare-table th{padding:16px 18px;text-align:left;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#cdbfa6;}
.compare-table td{padding:18px;border-bottom:1px solid var(--line);vertical-align:middle}
.compare-table tbody tr{transition:background var(--t-fast)}
.compare-table tbody tr:hover{background:var(--bg)}
.compare-rank{font-family:var(--serif);font-size:1.5rem;font-weight:700;color:var(--brand-deep)}
.compare-img{width:70px;height:70px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.compare-name{font-weight:600;color:var(--ink)}
.compare-brand-tag{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.16em;font-weight:600;margin-top:4px}
.compare-score{font-family:var(--serif);font-size:1.15rem;font-weight:700;color:var(--ink)}
.compare-bar{margin-top:6px;height:5px;background:var(--bg-sand);border-radius:99px;overflow:hidden;width:120px}
.compare-bar-fill{height:100%;background:linear-gradient(90deg,var(--brand-warm),var(--gold));border-radius:99px}
.compare-link{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--ink);color:#fff;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;transition:background var(--t-fast);}
.compare-link:hover{background:var(--brand-deep);color:#fff}

/* ---------- Categories strip ---------- */
.cats{padding:64px 0;background:var(--bg-elev);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.cat-tile{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px 18px 16px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:6px;transition:border-color var(--t-fast),background var(--t-fast),transform var(--t-fast);}
.cat-tile:hover{border-color:var(--brand-warm);background:#fff;transform:translateY(-2px)}
.cat-tile .ct-icon{font-size:1.4rem;color:var(--brand-deep)}
.cat-tile .ct-name{font-family:var(--serif);font-size:1.1rem;font-weight:600;line-height:1.2}
.cat-tile .ct-count{font-size:.7rem;color:var(--muted);letter-spacing:.18em;text-transform:uppercase;font-weight:600}

/* ---------- Values strip ---------- */
.values{padding:80px 0;background:var(--bg-sand)}
.values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px}
.value-tile{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;text-align:center;}
.value-tile .vi{width:54px;height:54px;border-radius:50%;background:linear-gradient(145deg,#fdfaf3,#f3ead9);margin:0 auto 14px;display:grid;place-items:center;color:var(--brand-deep);font-size:1.4rem;border:1px solid var(--line);}
.value-tile h4{font-family:var(--serif);font-size:1.18rem;text-transform:none;letter-spacing:0;font-weight:600;color:var(--ink);margin:0 0 8px}
.value-tile p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.55}

/* ---------- Promise band ---------- */
.promise{padding:90px 0;color:#f4ecdf;background:linear-gradient(135deg,var(--brand-deep) 0%,var(--ink) 100%);position:relative;overflow:hidden;}
.promise::before{content:"";position:absolute;inset:0;background:radial-gradient(40% 60% at 100% 0%,rgba(184,134,84,.20),transparent),radial-gradient(40% 60% at 0% 100%,rgba(184,134,84,.10),transparent);}
.promise .container{position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.promise h2{color:#fff;font-size:clamp(2rem,3.6vw,2.8rem);margin-bottom:18px}
.promise h2 em{color:var(--gold-soft);font-style:italic}
.promise p{color:#cdbfa6;font-size:1.05rem;max-width:540px}
.promise .seal{width:200px;height:200px;border-radius:50%;border:1px dashed rgba(255,255,255,.2);display:grid;place-items:center;margin-left:auto;position:relative;text-align:center;}
.promise .seal::before{content:"";position:absolute;inset:14px;border-radius:50%;border:1px solid rgba(255,255,255,.12)}
.promise .seal .num{font-family:var(--serif);font-size:3.2rem;color:#fff;font-weight:700;line-height:1}
.promise .seal .lbl{font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-soft);font-weight:600;margin-top:6px}

@media(max-width:880px){.promise .container{grid-template-columns:1fr;text-align:center}.promise .seal{margin:30px auto 0}}

/* ---------- Page hero ---------- */
.page-hero{background:linear-gradient(180deg,var(--bg-sand) 0%,var(--bg) 100%);padding:54px 0 30px;border-bottom:1px solid var(--line);}
.breadcrumb{font-size:.78rem;color:var(--muted);letter-spacing:.04em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--brand-deep)}
.breadcrumb sep{color:var(--muted-2)}
.breadcrumb span:last-child{color:var(--ink);font-weight:600}

/* Static pages */
.static-hero{padding:80px 0 40px;background:linear-gradient(180deg,var(--bg-sand),var(--bg));border-bottom:1px solid var(--line)}
.static-hero h1{font-family:var(--serif);font-size:clamp(2.4rem,5vw,3.6rem)}
.static-hero p{font-size:1.12rem;color:var(--muted);max-width:680px}
.static-content{max-width:780px;margin:0 auto;padding:30px 24px 80px;font-size:1.02rem;line-height:1.8}
.static-content h2{font-family:var(--serif);margin-top:46px;font-size:1.7rem;color:var(--ink)}
.static-content h3{margin-top:30px;font-family:var(--serif);font-size:1.25rem}
.static-content ul{padding-left:1.2em}
.static-content li{margin-bottom:.5em}

/* ---------- Product page ---------- */
.product-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:54px;padding:40px 0 30px;}
.gallery .gallery-main{aspect-ratio:1/1;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-sand);box-shadow:var(--shadow);}
.gallery .gallery-main img{width:100%;height:100%;object-fit:cover}
.gallery-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.gallery-thumb{aspect-ratio:1/1;border-radius:10px;overflow:hidden;border:2px solid transparent;cursor:pointer;background:var(--bg-sand);transition:border-color var(--t-fast),transform var(--t-fast);}
.gallery-thumb img{width:100%;height:100%;object-fit:cover}
.gallery-thumb.active{border-color:var(--brand-warm)}
.gallery-thumb:hover{transform:translateY(-2px)}

.p-brand{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;background:var(--bg-sand);font-size:.66rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--brand-deep);margin-bottom:14px;}
.p-title{font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.1;margin:0 0 16px;letter-spacing:-.018em;}
.p-rating{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.p-rating .stars-char{font-size:1.15rem}
.p-rating .score{font-family:var(--serif);font-weight:700;font-size:1.15rem;color:var(--ink)}
.p-rating .reviews-ct{font-size:.85rem;color:var(--muted)}

.score-bar-wrap{margin:14px 0 22px}
.score-bar-label{display:flex;justify-content:space-between;font-size:.74rem;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:6px}
.score-bar-track{height:8px;background:var(--bg-sand);border-radius:99px;overflow:hidden}
.score-bar-fill{height:100%;background:linear-gradient(90deg,var(--brand-warm),var(--gold));border-radius:99px}

/* Price block */
.price-block{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;margin:22px 0;}
.price-block .pb-now{font-family:var(--serif);font-size:2rem;font-weight:700;color:var(--ink);line-height:1}
.price-block .pb-est{font-size:.95rem;color:var(--muted-2);text-decoration:line-through}
.price-block .pb-save{margin-left:auto;background:var(--success);color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:6px 14px;border-radius:999px;}
.price-block .pb-note{flex-basis:100%;font-size:.74rem;color:var(--muted-2);letter-spacing:.04em;margin-top:4px}

.verdict-box{background:var(--bg-sand);border-left:3px solid var(--brand-warm);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:18px 22px;margin:22px 0;}
.verdict-label{font-size:.66rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--brand-deep);margin-bottom:6px}
.verdict-text{margin:0;color:var(--ink-soft);font-size:.95rem;line-height:1.6}

.cta-group{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 8px}
.btn-buy{display:inline-flex;align-items:center;gap:10px;flex:1;justify-content:center;padding:15px 28px;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;letter-spacing:.04em;font-size:.92rem;transition:transform var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);box-shadow:var(--shadow-sm);min-width:180px;}
.btn-buy:hover{background:var(--brand-deep);transform:translateY(-2px);box-shadow:var(--shadow);color:#fff}
.btn-buy.alt{background:var(--brand-deep)}
.btn-buy.alt:hover{background:var(--brand)}
.btn-read-reviews{display:inline-flex;align-items:center;gap:8px;justify-content:center;padding:15px 26px;border-radius:999px;border:1px solid var(--line);background:var(--bg-elev);color:var(--ink);font-weight:600;font-size:.92rem;transition:border-color var(--t-fast),background var(--t-fast);}
.btn-read-reviews:hover{border-color:var(--ink);background:var(--bg-sand)}
.cta-disclosure{font-size:.74rem;color:var(--muted-2);margin-top:10px;line-height:1.55}

.features-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 22px}
.features-list li{position:relative;padding-left:22px;font-size:.92rem;color:var(--ink-soft);}
.features-list li::before{content:"";position:absolute;left:0;top:.55em;width:11px;height:11px;border-radius:50%;background:var(--brand-warm);box-shadow:inset 0 0 0 2px var(--bg-elev),0 0 0 1px var(--brand-warm);}

.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:50px 0 34px;}
.pros-box,.cons-box{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);padding:24px 24px 22px;}
.pros-box{border-top:3px solid var(--success)}
.cons-box{border-top:3px solid var(--danger)}
.box-head{font-family:var(--serif);font-size:1.18rem;font-weight:700;margin-bottom:14px}
.pros-box .box-head{color:var(--success)}
.cons-box .box-head{color:var(--danger)}
.pros-box ul,.cons-box ul{margin:0;padding-left:1.1em}
.pros-box li,.cons-box li{margin-bottom:6px;font-size:.95rem;color:var(--ink-soft)}

/* Diagrams */
.diagrams{margin:46px 0}
.diagrams-head{margin-bottom:24px}
.diagrams-head h2{font-family:var(--serif);font-size:1.7rem;margin-bottom:6px}
.diagrams-head p{color:var(--muted);font-size:.95rem}
.diagrams-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.diag-card{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);padding:24px;}
.diag-card h3{font-family:var(--serif);font-size:1.12rem;margin-bottom:14px}
.diag-attr{margin-bottom:14px}
.diag-attr-row{display:flex;justify-content:space-between;font-size:.82rem;color:var(--ink-soft);margin-bottom:5px}
.diag-attr-row span:last-child{font-weight:700;color:var(--ink)}
.diag-bar{height:7px;background:var(--bg-sand);border-radius:99px;overflow:hidden}
.diag-bar > span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand-warm),var(--gold))}

.diag-donut-wrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.diag-donut{width:140px;height:140px;border-radius:50%;background:conic-gradient(var(--brand-warm) 0% var(--p),var(--bg-sand) var(--p) 100%);position:relative;flex-shrink:0;}
.diag-donut::before{content:"";position:absolute;inset:18px;border-radius:50%;background:var(--bg-elev);}
.diag-donut .dn-text{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-family:var(--serif);}
.diag-donut .dn-text b{font-size:1.7rem;font-weight:700;line-height:1;display:block}
.diag-donut .dn-text small{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:4px;font-family:var(--sans)}
.diag-legend{display:flex;flex-direction:column;gap:8px;font-size:.84rem;color:var(--ink-soft)}
.diag-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:8px;background:var(--brand-warm)}
.diag-legend i.alt{background:var(--bg-sand)}

.spec-table{width:100%;border-collapse:collapse;font-size:.9rem;margin-top:6px}
.spec-table td{padding:10px 0;border-bottom:1px solid var(--line-soft);color:var(--ink-soft)}
.spec-table td:first-child{color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;font-weight:600}
.spec-table td:last-child{font-weight:600;color:var(--ink);text-align:right}

@media(max-width:880px){
  .product-layout{grid-template-columns:1fr;gap:30px}
  .pros-cons{grid-template-columns:1fr}
  .features-list{grid-template-columns:1fr}
  .diagrams-grid{grid-template-columns:1fr}
}

.product-desc{margin:30px 0}
.product-desc h2{font-family:var(--serif);font-size:1.7rem;margin-bottom:14px}
.product-desc p{color:var(--ink-soft);line-height:1.75;font-size:1rem}

.reviews-section{margin:46px 0}
.reviews-section h2{font-family:var(--serif);font-size:1.7rem;margin-bottom:24px}
.reviews-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.review-card{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);padding:22px;}
.review-top{display:flex;justify-content:space-between;font-size:.84rem;margin-bottom:10px}
.reviewer-name{font-weight:700;color:var(--ink)}
.review-date{color:var(--muted)}
.review-stars{color:var(--gold);letter-spacing:1px;font-size:.95rem;margin-bottom:6px}
.review-title{font-family:var(--serif);font-size:1.08rem;font-weight:600;margin-bottom:6px}
.review-text{color:var(--ink-soft);font-size:.92rem;line-height:1.6}
@media(max-width:680px){.reviews-grid{grid-template-columns:1fr}}

/* Related */
.related-section{padding:80px 0;background:var(--bg-sand);border-top:1px solid var(--line)}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.related-card{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;transition:transform var(--t-fast),box-shadow var(--t-fast);}
.related-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.related-img{aspect-ratio:1/1;overflow:hidden;background:var(--bg-sand)}
.related-img img{width:100%;height:100%;object-fit:cover}
.related-body{padding:14px}
.related-brand{font-size:.6rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--brand);margin-bottom:5px}
.related-title{font-family:var(--serif);font-size:1rem;line-height:1.25;color:var(--ink);margin-bottom:8px}
.related-stars{font-size:.82rem;color:var(--gold);letter-spacing:1px;margin-bottom:8px}
.related-link{font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brand-deep)}

/* ---------- Footer ---------- */
footer.site-footer{background:var(--ink);color:#cdbfa6;padding:70px 0 0;margin-top:0}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,.07);}
.footer-brand{max-width:380px}
.footer-logo{display:flex;align-items:center;gap:14px;margin-bottom:18px;color:#fff;text-decoration:none}
.footer-logo img{width:54px;height:54px;border-radius:50%;background:#fffaf0;padding:6px;}
.footer-logo .ft-name{font-family:var(--serif);font-size:1.4rem;font-weight:600;color:#fff}
.footer-logo .ft-name .amp{color:var(--gold-soft);font-style:italic}
.footer-brand p{font-size:.92rem;line-height:1.65;color:#bcae94}
.footer-disclaimer{font-size:.78rem;color:var(--muted-2);margin-top:14px}
footer h4{font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#fff;margin-bottom:18px}
footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
footer ul li a{color:#bcae94;font-size:.92rem;transition:color var(--t-fast)}
footer ul li a:hover{color:var(--gold-soft)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding:22px 0;font-size:.82rem;color:var(--muted-2);}
.footer-bottom a{color:var(--muted-2)}
.footer-bottom a:hover{color:#fff}
.footer-bottom .fb-marks{display:flex;gap:14px;align-items:center;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase}
.footer-bottom .fb-marks span{display:inline-flex;align-items:center;gap:6px;color:var(--muted-2)}
@media(max-width:880px){.footer-top{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:580px){.footer-top{grid-template-columns:1fr}}

/* ---------- Cookie banner ---------- */
#cookie-banner{position:fixed;bottom:18px;left:18px;right:18px;z-index:60;background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;box-shadow:var(--shadow-lg);display:none;}
#cookie-banner.visible{display:block}
.cookie-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.cookie-text{margin:0;font-size:.9rem;color:var(--ink-soft)}
.cookie-btns{display:flex;gap:8px}
.cookie-accept,.cookie-decline{padding:9px 18px;border-radius:999px;font-size:.82rem;font-weight:700;letter-spacing:.04em;border:0;cursor:pointer;}
.cookie-accept{background:var(--ink);color:#fff}
.cookie-decline{background:var(--bg-sand);color:var(--ink)}

/* helpers */
.hidden{display:none !important}
.row-click{cursor:pointer}
.row-click:hover{background:var(--bg) !important}