/* Page base */
.cat-hero, .families, .compare{
  color:#f6eee2;
}
.cap-img{ width:100%; max-width:350px; border-radius:10px; display:block; }

/* ===== Section 1: Catalog Hero ===== */
.cat-hero{
  background:
    radial-gradient(1200px 800px at -10% 0%, rgba(241,211,160,.12) 0%, transparent 60%),
    linear-gradient(180deg, #16110d, #0e0b09);
}
.cat-hero-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(16px, 2.6vw, 24px);
  align-items: center;
}
.cat-hero-title{
  font-family: Prata, serif;
  font-size: clamp(1.6rem, 3.1vw, 2.5rem);
  line-height: 1.18;
  margin: 0 0 .7rem;
}
.cat-hero-lead{ margin:0 0 .6rem; opacity:.95; }
.cat-hero-facts{ list-style:none; padding:0; margin:.4rem 0 0; display:grid; gap:.35rem; }
.cat-hero-facts .dot{
  display:inline-block; width:.55rem; height:.55rem; border-radius:50%;
  background:#f1d3a0; margin-right:.5rem; transform: translateY(1px);
}
.cat-hero-gallery{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.cat-card{
  background: rgba(246,238,226,.04);
  border: 1px solid rgba(246,238,226,.12);
  border-radius: 14px; padding: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.cat-card:hover{ transform: translateY(-4px); border-color: rgba(241,211,160,.35); box-shadow: 0 14px 38px rgba(0,0,0,.28); }

@media (max-width: 992px){
  .cat-hero-grid{ grid-template-columns: 1fr; }
  .cat-hero-gallery{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 576px){
  .cat-hero-gallery{ grid-template-columns: 1fr; }
}

/* ===== Section 2: Families Stripe ===== */
.families{
  background:
    radial-gradient(900px 600px at 120% -200px, rgba(241,211,160,.10) 0%, transparent 70%),
    linear-gradient(180deg, #15100d, #0f0b09);
}
.families-track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(320px, 86vw);
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.fam-card{
  scroll-snap-align: start;
  background: rgba(246,238,226,.04);
  border: 1px solid rgba(246,238,226,.12);
  border-radius: 16px;
  padding: 14px;
  min-height: 220px;
  position: relative;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.fam-card:hover{ transform: translateY(-6px); border-color: rgba(241,211,160,.36); box-shadow: 0 18px 38px rgba(0,0,0,.28); }
.fam-title{ margin:.3rem 0 .2rem; }
.fam-text{ margin:0; opacity:.92; }
.fam-fig{ margin:0 0 .4rem; }

.fam-card .fam-icon{
  width: 56px; height: 56px; border-radius: 14px;
  background: linear-gradient(135deg, #f1d3a0, #ffd9a8);
  box-shadow: 0 8px 24px rgba(241,211,160,.26), inset 0 6px 16px rgba(255,255,255,.25);
}

/* Note */
.families-note{
  margin-top:.8rem; padding:.8rem 1rem; border-radius:12px;
  background: rgba(246,238,226,.05); border:1px solid rgba(246,238,226,.12);
}

/* ===== Section 3: Compare ===== */
.compare{
  background:
    radial-gradient(700px 700px at -10% -200px, rgba(241,211,160,.08) 0%, transparent 65%),
    linear-gradient(180deg, #191410, #0f0b09);
}
.cmp-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(14px, 2.4vw, 22px);
}
.cmp-card{
  background: rgba(246,238,226,.04);
  border: 1px solid rgba(246,238,226,.12);
  border-radius: 16px; padding: 14px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.cmp-card:hover{ transform: translateY(-6px); border-color: rgba(241,211,160,.36); box-shadow: 0 18px 38px rgba(0,0,0,.28); }
.cmp-title{ margin:.3rem 0 .2rem; }
.cmp-list{ margin:0; padding-left: 1.1rem; opacity:.92; }

@media (max-width: 1200px){
  .cmp-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 768px){
  .cmp-grid{ grid-template-columns: 1fr; }
}
/* ===== Section 4: Stone Kits ===== */
.stones{
  background:
    radial-gradient(900px 600px at -10% -200px, rgba(241,211,160,.10) 0%, transparent 70%),
    linear-gradient(180deg, #18120e, #0e0b09);
  color:#f6eee2;
}
.stones-grid{
  display:grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(16px, 2.6vw, 24px); align-items:start;
}
.stones-facts{ list-style:none; padding:0; margin:.6rem 0 0; display:grid; gap:.35rem; }
.stones-meters{ margin:.8rem 0 0; display:grid; gap:.5rem; }
.sm-row{ display:grid; grid-template-columns: 1fr 1.5fr auto; align-items:center; gap:.6rem; }
.meter{ height:10px; border-radius:999px; background: rgba(246,238,226,.12); overflow:hidden; }
.meter .bar{ display:block; height:100%; width:0; background: linear-gradient(90deg,#f1d3a0,#ffd9a8); box-shadow: 0 0 20px rgba(241,211,160,.35) inset; }
.revealed .b1{ width:88%; transition: width .9s cubic-bezier(.2,.7,.2,1); }
.revealed .b2{ width:92%; transition: width 1.1s cubic-bezier(.2,.7,.2,1); }

.stones-visual{ display:grid; gap:12px; }
.sizes{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; }
.size{
  background: rgba(246,238,226,.04);
  border: 1px solid rgba(246,238,226,.12);
  border-radius: 14px; padding:12px; text-align:center;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.size:hover{ transform: translateY(-4px); border-color: rgba(241,211,160,.35); box-shadow: 0 14px 38px rgba(0,0,0,.28); }
.size.s h3{ color:#e6f3ff; } .size.m h3{ color:#f1d3a0; } .size.l h3{ color:#e9e1d6; }

@media (max-width: 1200px){ .stones-grid{ grid-template-columns: 1fr; } }

/* ===== Section 5: Stoves Matrix ===== */
.stoves{
  background:
    radial-gradient(700px 700px at -10% -200px, rgba(241,211,160,.08) 0%, transparent 65%),
    linear-gradient(180deg, #191410, #0f0b09);
  color:#f6eee2;
}
.stove-matrix{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(14px, 2.4vw, 22px);
}
.stove{
  background: rgba(246,238,226,.04);
  border: 1px solid rgba(246,238,226,.12);
  border-radius: 16px; padding: 14px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.stove:hover{ transform: translateY(-6px); border-color: rgba(241,211,160,.36); box-shadow: 0 18px 38px rgba(0,0,0,.28); }
.stove-name{ margin:.35rem 0 .25rem; }
.stove-spec{ margin:0 0 .4rem; padding-left:1.1rem; opacity:.92; }
.stove-feat{ list-style:none; padding:0; margin:0; display:grid; gap:.3rem; }
.stove-feat li{ position:relative; padding-left:1.2rem; }
.stove-feat .ok::before, .stove-feat .no::before{
  content:""; position:absolute; left:0; top:.35rem; width:.75rem; height:.75rem; border-radius:50%;
}
.stove-feat .ok::before{ background:#9fe3a1; box-shadow:0 0 0 2px rgba(159,227,161,.25); }
.stove-feat .no::before{ background:#e89f9f; box-shadow:0 0 0 2px rgba(232,159,159,.25); }
.stove-note{
  margin-top:.8rem; padding:.8rem 1rem; border-radius:12px;
  background: rgba(246,238,226,.05); border:1px solid rgba(246,238,226,.12);
}

@media (max-width: 1200px){ .stove-matrix{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 768px){ .stove-matrix{ grid-template-columns: 1fr; } }

/* ===== Section 6: Bundles ===== */
.bundles{
  background:
    radial-gradient(800px 560px at 110% -160px, rgba(241,211,160,.10) 0%, transparent 70%),
    linear-gradient(180deg, #16110d, #0e0b09);
  color:#f6eee2;
}
.bundles-grid{ display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(16px, 2.6vw, 24px); }
.steps{ margin:.6rem 0 0; padding-left:0; list-style:none; display:grid; gap:10px; }
.step{
  display:grid; grid-template-columns: 36px 1fr; gap:12px; align-items:start;
  background: rgba(246,238,226,.04); border: 1px solid rgba(246,238,226,.12);
  border-radius: 14px; padding: 10px;
}
.num{
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  font-weight:700; color:#1e1b16; background:#f1d3a0; box-shadow: 0 6px 18px rgba(241,211,160,.26);
}
.bundle-tip{
  margin:.7rem 0 0; padding:.7rem 1rem; border-radius:12px;
  background: rgba(246,238,226,.05); border:1px solid rgba(246,238,226,.12);
}
.bundle-visual{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
.bundle-fig{ margin:0; }

@media (max-width: 1200px){ .bundles-grid{ grid-template-columns: 1fr; } }
@media (max-width: 576px){ .bundle-visual{ grid-template-columns: 1fr; } }
/* ===== Section 7: Buckets Line ===== */
.buckets{
  background:
    radial-gradient(900px 600px at -10% -200px, rgba(241,211,160,.10) 0%, transparent 70%),
    linear-gradient(180deg, #18120e, #0e0b09);
  color:#f6eee2;
}
.buckets-grid{
  display:grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(16px, 2.6vw, 24px); align-items:start;
}
.buck-points{ list-style:none; padding:0; margin:.6rem 0 .7rem; display:grid; gap:.35rem; }
.buck-specs{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; }
.spec{
  background: rgba(246,238,226,.04); border:1px solid rgba(246,238,226,.12);
  border-radius:14px; padding:12px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.spec:hover{ transform: translateY(-4px); border-color: rgba(241,211,160,.35); box-shadow: 0 14px 38px rgba(0,0,0,.28); }
.buckets-figs{ display:grid; gap:12px; }
.buck-fig{ margin:0; }
@media (max-width: 1200px){ .buckets-grid{ grid-template-columns: 1fr; } }
@media (max-width: 576px){ .buck-specs{ grid-template-columns: 1fr; } }

/* ===== Section 8: Airflow ===== */
.airflow{
  background:
    radial-gradient(700px 700px at -10% -200px, rgba(241,211,160,.08) 0%, transparent 65%),
    linear-gradient(180deg, #191410, #0f0b09);
  color:#f6eee2;
}
.air-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(14px, 2.4vw, 22px);
}
.air-card{
  background: rgba(246,238,226,.04); border:1px solid rgba(246,238,226,.12);
  border-radius:16px; padding:14px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.air-card:hover{ transform: translateY(-6px); border-color: rgba(241,211,160,.36); box-shadow: 0 18px 38px rgba(0,0,0,.28); }
.air-title{ margin:.35rem 0 .2rem; }
.air-text{ margin:0; opacity:.92; }
.air-note{
  margin-top:.8rem; padding:.8rem 1rem; border-radius:12px;
  background: rgba(246,238,226,.05); border:1px solid rgba(246,238,226,.12);
}
@media (max-width: 1200px){ .air-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 768px){ .air-grid{ grid-template-columns: 1fr; } }

/* ===== Section 9: Accessories ===== */
.accessories{
  background:
    radial-gradient(800px 560px at 110% -160px, rgba(241,211,160,.10) 0%, transparent 70%),
    linear-gradient(180deg, #16110d, #0e0b09);
  color:#f6eee2;
}
.acc-grid{ display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(16px, 2.6vw, 24px); align-items:start; }
.acc-list{ list-style:none; padding:0; margin:.6rem 0 0; display:grid; gap:.35rem; }
.acc-dot{
  display:inline-block; width:.55rem; height:.55rem; border-radius:50%;
  background:#f1d3a0; margin-right:.5rem; transform: translateY(1px);
}
.acc-figs{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
.acc-fig{ margin:0; }
@media (max-width: 1200px){ .acc-grid{ grid-template-columns: 1fr; } }
@media (max-width: 576px){ .acc-figs{ grid-template-columns: 1fr; } }
/* ===== Section 10: Ladles & Pour Control ===== */
.ladles{
  background:
    radial-gradient(900px 600px at -10% -200px, rgba(241,211,160,.10) 0%, transparent 70%),
    linear-gradient(180deg, #18120e, #0e0b09);
  color:#f6eee2;
}
.ladle-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(14px, 2.4vw, 22px);
}
.ladle-card{
  background: rgba(246,238,226,.04); border:1px solid rgba(246,238,226,.12);
  border-radius:16px; padding:14px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ladle-card:hover{ transform: translateY(-6px); border-color: rgba(241,211,160,.36); box-shadow: 0 18px 38px rgba(0,0,0,.28); }
.ladle-title{ margin:.35rem 0 .2rem; }
.ladle-text{ margin:0 0 .5rem; opacity:.92; }
.ladle-meter{ display:grid; grid-template-columns: 1fr 1.5fr auto; align-items:center; gap:.6rem; }
.ladles .meter{ height:10px; border-radius:999px; background: rgba(246,238,226,.12); overflow:hidden; }
.ladles .meter .bar{ display:block; height:100%; width:0; background: linear-gradient(90deg,#f1d3a0,#ffd9a8); box-shadow: 0 0 20px rgba(241,211,160,.35) inset; }
.revealed .l1{ width:92%; transition: width 1s cubic-bezier(.2,.7,.2,1); }
.revealed .l2{ width:88%; transition: width 1.1s cubic-bezier(.2,.7,.2,1); }
.revealed .l3{ width:90%; transition: width 1.2s cubic-bezier(.2,.7,.2,1); }

@media (max-width: 1200px){ .ladle-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 768px){ .ladle-grid{ grid-template-columns: 1fr; } }

/* ===== Section 11: Bench Care ===== */
.care{
  background:
    radial-gradient(700px 700px at -10% -200px, rgba(241,211,160,.08) 0%, transparent 65%),
    linear-gradient(180deg, #191410, #0f0b09);
  color:#f6eee2;
}
.care-grid{ display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(16px, 2.6vw, 24px); }
.care-steps{ list-style:none; padding:0; margin:.6rem 0 .7rem; display:grid; gap:.35rem; }
.care-cards{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; }
.cc{
  background: rgba(246,238,226,.04); border:1px solid rgba(246,238,226,.12);
  border-radius:14px; padding:12px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.cc:hover{ transform: translateY(-4px); border-color: rgba(241,211,160,.35); box-shadow: 0 14px 38px rgba(0,0,0,.28); }
.care-figs{ display:grid; gap:12px; }
.care-fig{ margin:0; }

@media (max-width: 1200px){
  .care-grid{ grid-template-columns: 1fr; }
  .care-cards{ grid-template-columns: 1fr; }
}

/* ===== Section 12: Starter Sets ===== */
.starters{
  background:
    radial-gradient(800px 560px at 110% -160px, rgba(241,211,160,.10) 0%, transparent 70%),
    linear-gradient(180deg, #16110d, #0e0b09);
  color:#f6eee2;
}
.starter-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(14px, 2.4vw, 22px);
}
.starter{
  background: rgba(246,238,226,.04); border:1px solid rgba(246,238,226,.12);
  border-radius:16px; padding:14px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.starter:hover{ transform: translateY(-6px); border-color: rgba(241,211,160,.36); box-shadow: 0 18px 38px rgba(0,0,0,.28); }
.starter-name{ margin:.35rem 0 .2rem; }
.starter-list{ margin:0; padding-left:1.1rem; opacity:.92; }
.starter-note{
  margin-top:.8rem; padding:.8rem 1rem; border-radius:12px;
  background: rgba(246,238,226,.05); border:1px solid rgba(246,238,226,.12);
}

@media (max-width: 1200px){ .starter-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 768px){ .starter-grid{ grid-template-columns: 1fr; } }
/* ===== Section 13: Hardware & Guards ===== */
.hardware{
  background:
    radial-gradient(900px 600px at -10% -200px, rgba(241,211,160,.10) 0%, transparent 70%),
    linear-gradient(180deg, #18120e, #0e0b09);
  color:#f6eee2;
}
.hardware-grid{
  display:grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(16px, 2.6vw, 24px); align-items:start;
}
.hw-points{ list-style:none; padding:0; margin:.6rem 0 .7rem; display:grid; gap:.35rem; }
.hw-badges{ display:flex; flex-wrap:wrap; gap:.5rem; }
.hw-badge{
  padding:.45rem .7rem; border-radius:999px;
  background: rgba(246,238,226,.06);
  border: 1px solid rgba(246,238,226,.14);
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.hw-badge:hover{ transform: translateY(-2px); border-color: rgba(241,211,160,.36); background: rgba(241,211,160,.10); }
.hardware-figs{ display:grid; gap:12px; }
.hw-fig{ margin:0; }
@media (max-width: 1200px){ .hardware-grid{ grid-template-columns: 1fr; } }

/* ===== Section 14: Hooks & Storage ===== */
.storage{
  background:
    radial-gradient(800px 560px at 110% -160px, rgba(241,211,160,.10) 0%, transparent 70%),
    linear-gradient(180deg, #16110d, #0e0b09);
  color:#f6eee2;
}
.storage-grid{
  display:grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(16px, 2.6vw, 24px); align-items:start;
}
.storage-cards{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; margin:.6rem 0 .6rem;
}
.st-card{
  background: rgba(246,238,226,.04); border:1px solid rgba(246,238,226,.12);
  border-radius:14px; padding:12px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.st-card:hover{ transform: translateY(-4px); border-color: rgba(241,211,160,.35); box-shadow: 0 14px 38px rgba(0,0,0,.28); }
.storage-note{
  padding:.7rem 1rem; border-radius:12px;
  background: rgba(246,238,226,.05); border:1px solid rgba(246,238,226,.12);
}
.storage-figs{ display:grid; gap:12px; }
.st-fig{ margin:0; }

@media (max-width: 1200px){
  .storage-grid{ grid-template-columns: 1fr; }
  .storage-cards{ grid-template-columns: 1fr; }
}