/* ===== Page base ===== */
.catalog-hero{ position:relative; padding: clamp(32px,4vw,56px) 0; background:
  radial-gradient(1200px 600px at 10% -10%, rgba(24,195,200,.12), transparent 60%),
  radial-gradient(900px 500px at 90% 0%, rgba(166,224,255,.08), transparent 60%);
}
.cat-inner{ display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(20px,3vw,40px); align-items:start; }
.cat-copy h1{ margin:0 0 10px; font-size: clamp(26px,4vw,40px); }
.cat-copy .lede{ color: var(--ink-100); }
.cat-points{ margin: 10px 0 0; padding-left: 18px; }
.cat-gallery{ display:grid; gap:14px; align-content:start; }
.cat-shot{ margin:0; padding:10px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg); background: rgba(7,16,24,.55); box-shadow: var(--shadow-soft); transition: transform .25s ease; }
.cat-shot:hover{ transform: translateY(-3px) rotate(-.2deg); }
.cat-shot img{ display:block; width:100%; max-width:350px; height:auto; border-radius:12px; margin:0 auto; }
.cat-shot figcaption{ color: var(--ink-300); text-align:center; margin-top:6px; font-size:.9rem; }
.cat-wave{ position:absolute; inset:auto 0 0 0; height: 80px; background:
  radial-gradient(60% 100% at 50% 120%, rgba(99,225,228,.16), transparent 60%),
  linear-gradient(0deg, rgba(10,16,22,1) 0, rgba(10,16,22,0) 100%); animation: waveShift 8s ease-in-out infinite alternate; }
@keyframes waveShift{ from{ transform: translateY(0); } to{ transform: translateY(8px); } }

/* ===== P2 — Rod Series ===== */
.rod-series{ padding: clamp(28px,4vw,54px) 0; background: linear-gradient(180deg, rgba(15,36,49,.22), transparent 40%); }
.rod-head h2{ margin:0 0 8px; font-size: clamp(22px,3.2vw,32px); }
.rod-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.rod-card{
  padding:14px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(7,16,24,.65), rgba(7,16,24,.45)); box-shadow: var(--shadow-soft);
}
.rod-card figure{ margin:0 0 8px; }
.rod-card img{ width:100%; max-width:350px; height:auto; border-radius:12px; display:block; margin:0 auto; }
.rod-card h3{ margin:4px 0 6px; }
.rod-meters{ display:grid; gap:8px; margin-top:8px; }
.rod-meters .meter{ display:grid; grid-template-columns: 90px 1fr auto; gap:8px; align-items:center; }
.rod-meters .meter label{ color:#e6edf6; }
.rod-meters .meter .fill{ display:block; height:10px; border-radius:999px; background: linear-gradient(90deg, var(--teal-400), var(--sky-200)); inset:0 100% 0 0; position:relative; }
.rod-meters .meter .val{ color: var(--ink-300); }

/* ===== P3 — Reel Compare ===== */
.reel-compare{ padding: clamp(28px,4vw,56px) 0; background: radial-gradient(900px 420px at 10% -10%, rgba(24,195,200,.08), transparent 60%); }
.reel-layout{ display:grid; grid-template-columns: 1fr 1.1fr 1fr; gap:16px; align-items:start; }
.reel-side{ padding:12px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg); background: rgba(7,16,24,.5); }
.reel-modes{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.reel-btn{
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background: rgba(24,195,200,.08);
  color:#e6edf6; cursor:pointer; transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.reel-btn:hover{ transform: translateY(-1px); border-color: rgba(99,225,228,.35); }
.reel-btn.is-active{ background: linear-gradient(135deg, var(--teal-400), var(--sky-200)); color:#06202a; border-color: transparent; }
.reel-photo img{ width:100%; max-width:350px; height:auto; border-radius:12px; display:block; margin:0 auto; }
.reel-photo figcaption{ color: var(--ink-300); text-align:center; margin-top:6px; font-size:.9rem; }

.reel-board{ padding:12px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(15,36,49,.55), rgba(7,16,24,.5)); text-align:center; }
.dial{ width: min(350px, 100%); height: 180px; margin: 0 auto; border-radius: 16px; background: rgba(255,255,255,.04); position: relative; overflow:hidden; }
.dial::before{ content:""; position:absolute; left:0; right:0; bottom:0; height: 50%; background: linear-gradient(0deg, rgba(24,195,200,.18), rgba(24,195,200,0)); }
.needle{ position:absolute; left:50%; bottom: 10px; width: 2px; height: 70%; background: var(--sky-200); transform-origin: bottom center; transform: translateX(-50%) rotate(-45deg); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.dial-legend{ display:flex; gap:12px; justify-content:center; margin-top:10px; list-style:none; padding:0; }
.dot{ display:inline-block; width:10px; height:10px; border-radius:999px; background:#9fb4c9; }
.dot-torque{ background: var(--teal-300); }
.dot-retrieve{ background: var(--sky-200); }
.dot-drag{ background: #7fd1b9; }

/* Reveal (reuse utility, ensure visible threshold) */
.reveal{ opacity:0; transform: translateY(18px) scale(.995); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform: none; }

/* Responsive */
@media (max-width: 1200px){
  .cat-inner{ grid-template-columns: 1fr; }
  .reel-layout{ grid-template-columns: 1fr; }
}
@media (max-width: 992px){
  .rod-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px){
  .rod-grid{ grid-template-columns: 1fr; }
}
/* ===== P4 — Bait Anatomy ===== */
.bait-anatomy{ padding: clamp(28px,4vw,56px) 0; background: radial-gradient(900px 420px at 85% -10%, rgba(166,224,255,.08), transparent 60%); }
.bait-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; perspective:1000px; }
.bait-card{
  position:relative; min-height: 320px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(15,36,49,.6), rgba(7,16,24,.55)); box-shadow: var(--shadow-soft);
  transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.7,.2,1), border-color .25s ease;
  cursor: pointer; outline:none;
}
.bait-card:hover{ border-color: rgba(99,225,228,.35); }
.bait-card.is-flipped, .bait-card:focus{ transform: rotateY(180deg); }
.bait-card .face{ position:absolute; inset:0; padding:14px; display:grid; align-content:start; gap:10px; backface-visibility:hidden; border-radius:inherit; }
.bait-card .front img{ width:100%; max-width:350px; height:auto; border-radius:14px; display:block; margin:0 auto; }
.bait-card .back{ transform: rotateY(180deg); }
.bait-card ul{ margin:0; padding-left:18px; }

/* ===== P5 — Line Lab 2.0 ===== */
.line-lab-2{ padding: clamp(28px,4vw,56px) 0; background: linear-gradient(180deg, rgba(15,36,49,.22), transparent 40%); }
.lab2-grid{ display:grid; grid-template-columns: 1fr 1.1fr 1fr; gap:16px; align-items:start; }
.lab2-photo{ margin:0; padding:10px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg); background: rgba(7,16,24,.55); }
.lab2-photo img{ width:100%; max-width:350px; height:auto; border-radius:12px; display:block; margin:0 auto; }
.lab2-photo figcaption{ color: var(--ink-300); font-size:.9rem; text-align:center; margin-top:6px; }

.lab2-metrics{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.meter2{
  padding:12px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg);
  background: rgba(7,16,24,.5);
}
.meter2 h3{ margin:0 0 8px; font-size:1.02rem; }
.meter2 .bar{ position: relative; height:10px; border-radius:999px; background: rgba(255,255,255,.08); overflow:hidden; }
.meter2 .bar .fill{ position:absolute; inset:0 100% 0 0; background: linear-gradient(90deg, var(--teal-400), var(--sky-200)); }
.meter2 .hint{ margin:8px 0 0; color: var(--ink-100); }

/* ===== P6 — Local Kits ===== */
.local-kits{ padding: clamp(28px,4vw,56px) 0; background: radial-gradient(900px 420px at 10% -10%, rgba(24,195,200,.08), transparent 60%); }
.kits-layout{ display:grid; grid-template-columns: 1fr 1.2fr; gap:16px; align-items:start; }
.kit-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.kit-btn{
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background: rgba(24,195,200,.08);
  color:#e6edf6; cursor:pointer; transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.kit-btn:hover{ transform: translateY(-1px); border-color: rgba(99,225,228,.35); }
.kit-btn.is-active{ background: linear-gradient(135deg, var(--teal-400), var(--sky-200)); color:#06202a; border-color: transparent; }

.kits-board{ padding:12px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(15,36,49,.55), rgba(7,16,24,.5)); }
.kit-spot{ display:none; }
.kit-spot.is-active{ display:grid; grid-template-columns: auto 1fr; gap:12px; align-items:start; }
.kit-spot figure{ margin:0; }
.kit-spot img{ width:100%; max-width:350px; height:auto; border-radius:12px; display:block; margin:0 auto; }
.kit-spot figcaption{ color: var(--ink-300); font-size:.9rem; text-align:center; margin-top:6px; }
.kit-spec{ margin:0; padding-left:18px; }

/* ===== Responsive ===== */
@media (max-width: 1200px){
  .bait-grid{ grid-template-columns: 1fr 1fr; }
  .lab2-grid{ grid-template-columns: 1fr; }
  .kits-layout{ grid-template-columns: 1fr; }
}
@media (max-width: 768px){
  .bait-grid{ grid-template-columns: 1fr; }
  .lab2-metrics{ grid-template-columns: 1fr; }
}
/* ===== P7 — Accessory Atlas ===== */
.accessory-atlas{ padding: clamp(28px,4vw,56px) 0; background: radial-gradient(900px 420px at 10% -10%, rgba(24,195,200,.08), transparent 60%); }
.acc-layout{ display:grid; grid-template-columns: 1fr 1.2fr; gap:16px; align-items:start; }
.acc-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.acc-btn{
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background: rgba(24,195,200,.08);
  color:#e6edf6; cursor:pointer; transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.acc-btn:hover{ transform: translateY(-1px); border-color: rgba(99,225,228,.35); }
.acc-btn.is-active{ background: linear-gradient(135deg, var(--teal-400), var(--sky-200)); color:#06202a; border-color: transparent; }
.acc-notes{ margin:10px 0 0; padding-left:18px; }

.acc-board{ padding:12px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(15,36,49,.55), rgba(7,16,24,.5)); }
.acc-spot{ display:none; }
.acc-spot.is-active{ display:grid; gap:10px; align-items:start; }
.acc-spot figure{ margin:0; }
.acc-spot img{ width:100%; max-width:350px; height:auto; border-radius:12px; display:block; margin:0 auto; }
.acc-spot figcaption{ color: var(--ink-300); text-align:center; margin-top:6px; font-size:.9rem; }
.acc-list{ margin:0; padding-left:18px; }

/* ===== P8 — Spoon Palette ===== */
.spoon-palette{ padding: clamp(28px,4vw,56px) 0; background: radial-gradient(900px 420px at 85% -10%, rgba(166,224,255,.08), transparent 60%); }
.pal-layout{ display:grid; grid-template-columns: 1fr 1.2fr; gap:16px; align-items:start; }
.pal-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.pal-btn{
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background: rgba(24,195,200,.08);
  color:#e6edf6; cursor:pointer; transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.pal-btn:hover{ transform: translateY(-1px); border-color: rgba(99,225,228,.35); }
.pal-btn.is-active{ background: linear-gradient(135deg, var(--teal-400), var(--sky-200)); color:#06202a; border-color: transparent; }

.pal-bars{ display:grid; grid-template-columns: repeat(6, 1fr); gap:6px; align-items:end; height:44px; margin:10px 0; opacity:.8; }
.pal-bars .bar{ display:block; height:8px; border-radius:6px; background: linear-gradient(180deg, var(--teal-400), var(--sky-200)); transform-origin: bottom; }
.pal-bars.is-on .bar{ animation: palPulse 1.2s ease-in-out infinite alternate; }
.pal-bars.is-silver .bar:nth-child(odd){ animation-duration: 1.6s; }
.pal-bars.is-copper .bar:nth-child(3n){ animation-duration: 0.9s; }
.pal-bars.is-holo .bar{ animation-duration: 0.7s; }
@keyframes palPulse{ from{ transform: scaleY(.25); } to{ transform: scaleY(1); } }

.pal-board{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.pal-photo{ margin:0; padding:10px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg); background: rgba(7,16,24,.55); }
.pal-photo img{ width:100%; max-width:350px; height:auto; border-radius:12px; display:block; margin:0 auto; }
.pal-photo figcaption{ color: var(--ink-300); text-align:center; margin-top:6px; font-size:.9rem; }

/* ===== P9 — Rod FAQ ===== */
.rod-faq{ padding: clamp(28px,4vw,56px) 0; background: linear-gradient(180deg, rgba(15,36,49,.22), transparent 40%); }
.faq-layout{ display:grid; grid-template-columns: 1fr 1.2fr; gap:16px; align-items:start; }
.faq-photos figure{ margin:0 0 10px; padding:10px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg); background: rgba(7,16,24,.55); }
.faq-photos img{ width:100%; max-width:350px; height:auto; border-radius:12px; display:block; margin:0 auto; }
.faq-photos figcaption{ color: var(--ink-300); text-align:center; margin-top:6px; font-size:.9rem; }

.qa{ border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg); background: rgba(7,16,24,.5); margin-bottom: 10px; }
.qa-toggle{
  width:100%; text-align:left; padding:12px 14px; background: transparent; border:0; color:#e6edf6; cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.06); font-weight:600; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transition: color .2s ease, background-color .2s ease;
}
.qa-toggle[aria-expanded="true"]{ color: var(--teal-300); background: rgba(24,195,200,.06); }
.qa-body{ padding:10px 14px; }

/* ===== Responsive ===== */
@media (max-width: 1200px){
  .acc-layout, .pal-layout, .faq-layout{ grid-template-columns: 1fr; }
  .pal-board{ grid-template-columns: 1fr; }
}
/* ===== P10 — Minnow Speed ===== */
.minnow-speed{ padding: clamp(28px,4vw,56px) 0; background: radial-gradient(900px 420px at 10% -10%, rgba(24,195,200,.08), transparent 60%); }
.minnow-layout{ display:grid; grid-template-columns: 1fr 1.1fr 1fr; gap:16px; align-items:start; }
.speed-buttons{ display:flex; gap:8px; flex-wrap:wrap; }
.spd-btn{
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background: rgba(24,195,200,.08);
  color:#e6edf6; cursor:pointer; transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.spd-btn:hover{ transform: translateY(-1px); border-color: rgba(99,225,228,.35); }
.spd-btn.is-active{ background: linear-gradient(135deg, var(--teal-400), var(--sky-200)); color:#06202a; border-color: transparent; }
.minnow-photo{ margin-top:10px; }
.minnow-photo img{ width:100%; max-width:350px; height:auto; border-radius:12px; display:block; margin:0 auto; }
.minnow-photo figcaption{ color: var(--ink-300); font-size:.9rem; text-align:center; margin-top:6px; }
.minnow-stage{
  padding:12px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(15,36,49,.55), rgba(7,16,24,.5)); text-align:center;
}
.minnow-svg{ width:100%; max-width:350px; height:auto; }
#m-arc{ fill:none; stroke: rgba(99,225,228,.9); stroke-width:1.4; vector-effect: non-scaling-stroke; stroke-linecap: round; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
#m-lure{ fill: var(--sky-200); }
.minnow-cta{ margin-top:10px; }
.m-fire-btn{
  padding:10px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background: rgba(24,195,200,.1); color:#e6edf6;
  cursor:pointer; transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.m-fire-btn:hover{ transform: translateY(-1px); border-color: rgba(99,225,228,.35); background: rgba(24,195,200,.16); }

/* ===== P11 — Service Kit ===== */
.service-kit{ padding: clamp(28px,4vw,56px) 0; background: linear-gradient(180deg, rgba(15,36,49,.22), transparent 40%); }
.svc-grid{ display:grid; grid-template-columns: 1fr 1.2fr 1fr; gap:16px; align-items:start; }
.svc-photo{ margin:0; padding:10px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg); background: rgba(7,16,24,.55); }
.svc-photo img{ width:100%; max-width:350px; height:auto; border-radius:12px; display:block; margin:0 auto; }
.svc-photo figcaption{ color: var(--ink-300); text-align:center; margin-top:6px; font-size:.9rem; }

.svc-board{ padding:12px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(15,36,49,.55), rgba(7,16,24,.5)); }
.svc-rows{ display:grid; gap:10px; }
.svc-row{ display:grid; grid-template-columns: 120px 1fr auto; gap:8px; align-items:center; }
.svc-meter{ position: relative; height:10px; border-radius:999px; background: rgba(255,255,255,.08); overflow:hidden; }
.svc-meter .fill{ position:absolute; inset:0 100% 0 0; background: linear-gradient(90deg, var(--teal-400), var(--sky-200)); }
.svc-btn{
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background: rgba(24,195,200,.08); color:#e6edf6; cursor:pointer;
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.svc-btn:hover{ transform: translateY(-1px); border-color: rgba(99,225,228,.35); }
.svc-note{ margin:8px 0 0; color: var(--ink-100); }

/* ===== P12 — Shore Bundles ===== */
.shore-bundles{ padding: clamp(28px,4vw,56px) 0; background: radial-gradient(900px 420px at 85% -10%, rgba(166,224,255,.08), transparent 60%); }
.bund-layout{ display:grid; grid-template-columns: 1fr 1.2fr; gap:16px; align-items:start; }
.bund-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.bund-btn{
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background: rgba(24,195,200,.08);
  color:#e6edf6; cursor:pointer; transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.bund-btn:hover{ transform: translateY(-1px); border-color: rgba(99,225,228,.35); }
.bund-btn.is-active{ background: linear-gradient(135deg, var(--teal-400), var(--sky-200)); color:#06202a; border-color: transparent; }

.bund-matrix{ margin-top:10px; display:grid; gap:8px; }
.bm-row{ display:grid; grid-template-columns: 120px 1fr auto; gap:8px; align-items:center; }
.bm{ position: relative; height:10px; border-radius:999px; background: rgba(255,255,255,.08); overflow:hidden; }
.bm .fill{ position:absolute; inset:0 100% 0 0; background: linear-gradient(90deg, var(--teal-400), var(--sky-200)); }
.bm-val{ color: var(--ink-300); }

.bund-board{ padding:12px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(15,36,49,.55), rgba(7,16,24,.5)); }
.bund-spot{ display:none; }
.bund-spot.is-active{ display:grid; grid-template-columns: auto 1fr; gap:12px; align-items:start; }
.bund-spot figure{ margin:0; }
.bund-spot img{ width:100%; max-width:350px; height:auto; border-radius:12px; display:block; margin:0 auto; }
.bund-spot figcaption{ color: var(--ink-300); font-size:.9rem; text-align:center; margin-top:6px; }
.bund-spec{ margin:0; padding-left:18px; }

/* ===== Responsive ===== */
@media (max-width: 1200px){
  .minnow-layout, .svc-grid, .bund-layout{ grid-template-columns: 1fr; }
}
/* ===== P13 — Jig Map ===== */
.jig-map{ padding: clamp(28px,4vw,56px) 0; background: radial-gradient(900px 420px at 10% -10%, rgba(24,195,200,.08), transparent 60%); }
.jm-layout{ display:grid; grid-template-columns: 1fr 1.1fr 1fr 1fr; gap:16px; align-items:start; }
.jm-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.jm-btn{
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background: rgba(24,195,200,.08);
  color:#e6edf6; cursor:pointer; transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.jm-btn:hover{ transform: translateY(-1px); border-color: rgba(99,225,228,.35); }
.jm-btn.is-active{ background: linear-gradient(135deg, var(--teal-400), var(--sky-200)); color:#06202a; border-color: transparent; }
.jm-notes{ margin:10px 0 0; padding-left:18px; }

.jm-board{ padding:12px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(15,36,49,.55), rgba(7,16,24,.5)); }
.jm-rows{ display:grid; gap:8px; }
.jm-row{ display:grid; grid-template-columns: 140px 1fr auto; gap:8px; align-items:center; }
.jm-meter{ position: relative; height:10px; border-radius:999px; background: rgba(255,255,255,.08); overflow:hidden; }
.jm-meter .fill{ position:absolute; inset:0 100% 0 0; background: linear-gradient(90deg, var(--teal-400), var(--sky-200)); }
.jm-val{ color: var(--ink-300); }

.jm-photo{ margin:0; padding:10px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg); background: rgba(7,16,24,.55); }
.jm-photo img{ width:100%; max-width:350px; height:auto; border-radius:12px; display:block; margin:0 auto; }
.jm-photo figcaption{ color: var(--ink-300); text-align:center; margin-top:6px; font-size:.9rem; }

/* ===== P14 — Guide Ring Tests ===== */
.guide-tests{ padding: clamp(28px,4vw,56px) 0; background: linear-gradient(180deg, rgba(15,36,49,.22), transparent 40%); }
.gt-layout{ display:grid; grid-template-columns: 1fr 1.1fr 1fr; gap:16px; align-items:start; }
.gt-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.gt-btn{
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background: rgba(24,195,200,.08);
  color:#e6edf6; cursor:pointer; transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.gt-btn:hover{ transform: translateY(-1px); border-color: rgba(99,225,228,.35); }
.gt-btn.is-active{ background: linear-gradient(135deg, var(--teal-400), var(--sky-200)); color:#06202a; border-color: transparent; }

.gt-board{ padding:12px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(15,36,49,.55), rgba(7,16,24,.5)); }
.gt-rows{ display:grid; gap:8px; }
.gt-row{ display:grid; grid-template-columns: 140px 1fr auto; gap:8px; align-items:center; }
.gt-meter{ position: relative; height:10px; border-radius:999px; background: rgba(255,255,255,.08); overflow:hidden; }
.gt-meter .fill{ position:absolute; inset:0 100% 0 0; background: linear-gradient(90deg, var(--teal-400), var(--sky-200)); }
.gt-val{ color: var(--ink-300); }

.gt-photo{ margin:0; padding:10px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg); background: rgba(7,16,24,.55); }
.gt-photo img{ width:100%; max-width:350px; height:auto; border-radius:12px; display:block; margin:0 auto; }
.gt-photo figcaption{ color: var(--ink-300); text-align:center; margin-top:6px; font-size:.9rem; }

/* ===== P15 — Shore Bag Layout ===== */
.shore-bag{ padding: clamp(28px,4vw,56px) 0; background: radial-gradient(900px 420px at 85% -10%, rgba(166,224,255,.08), transparent 60%); }
.sb-layout{ display:grid; grid-template-columns: 1.1fr 1fr 1fr; gap:16px; align-items:start; }
.sb-grid{ display:flex; flex-wrap:wrap; gap:8px; }
.sb-chip{
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background: rgba(24,195,200,.08);
  color:#e6edf6; cursor:pointer; transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.sb-chip:hover{ transform: translateY(-1px); border-color: rgba(99,225,228,.35); }
.sb-chip[aria-pressed="true"]{ background: linear-gradient(135deg, var(--teal-400), var(--sky-200)); color:#06202a; border-color: transparent; }

.sb-board{ padding:12px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(15,36,49,.55), rgba(7,16,24,.5)); }
.sb-meter{ position: relative; height:12px; border-radius:999px; background: rgba(255,255,255,.08); overflow:hidden; }
.sb-meter .fill{ position:absolute; inset:0 100% 0 0; background: linear-gradient(90deg, var(--teal-400), var(--sky-200)); }
.sb-readout{ margin:8px 0 0; color: var(--ink-100); }
.sb-tips{ margin:8px 0 0; padding-left:18px; }

.sb-photo{ margin:0; padding:10px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg); background: rgba(7,16,24,.55); }
.sb-photo img{ width:100%; max-width:350px; height:auto; border-radius:12px; display:block; margin:0 auto; }
.sb-photo figcaption{ color: var(--ink-300); text-align:center; margin-top:6px; font-size:.9rem; }

/* Reveal re-use */
.reveal{ opacity:0; transform: translateY(18px) scale(.995); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform: none; }

/* Responsive */
@media (max-width: 1200px){
  .jm-layout{ grid-template-columns: 1fr 1fr; }
  .gt-layout{ grid-template-columns: 1fr; }
  .sb-layout{ grid-template-columns: 1fr; }
}
/* ===== P16 — Field News ===== */
.field-news{ padding: clamp(28px,4vw,56px) 0; background: linear-gradient(180deg, rgba(15,36,49,.22), transparent 40%); }
.fn-layout{ display:grid; grid-template-columns: 1fr 1.2fr 1fr 1fr; gap:16px; align-items:start; }
.fn-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.fn-btn{
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background: rgba(24,195,200,.08);
  color:#e6edf6; cursor:pointer; transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.fn-btn:hover{ transform: translateY(-1px); border-color: rgba(99,225,228,.35); }
.fn-btn.is-active{ background: linear-gradient(135deg, var(--teal-400), var(--sky-200)); color:#06202a; border-color: transparent; }

.fn-metrics{ margin-top:10px; display:grid; gap:8px; }
.fn-row{ display:grid; grid-template-columns: 100px 1fr auto; gap:8px; align-items:center; }
.fn-meter{ position: relative; height:10px; border-radius:999px; background: rgba(255,255,255,.08); overflow:hidden; }
.fn-meter .fill{ position:absolute; inset:0 100% 0 0; background: linear-gradient(90deg, var(--teal-400), var(--sky-200)); }
.fn-val{ color: var(--ink-300); }

.fn-board{ padding:12px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(15,36,49,.55), rgba(7,16,24,.5)); }
.fn-spot{ display:none; }
.fn-spot.is-active{ display:block; }
.fn-photo{ margin:0; padding:10px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg); background: rgba(7,16,24,.55); }
.fn-photo img{ width:100%; max-width:350px; height:auto; border-radius:12px; display:block; margin:0 auto; }
.fn-photo figcaption{ color: var(--ink-300); text-align:center; margin-top:6px; font-size:.9rem; }

/* ===== P17 — Mega Compare ===== */
.mega-compare{ padding: clamp(28px,4vw,56px) 0; background: radial-gradient(900px 420px at 85% -10%, rgba(166,224,255,.08), transparent 60%); }
.mc-layout{ display:grid; grid-template-columns: 1fr 1.1fr 1fr; gap:16px; align-items:start; }
.mc-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.mc-btn{
  padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background: rgba(24,195,200,.08);
  color:#e6edf6; cursor:pointer; transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.mc-btn:hover{ transform: translateY(-1px); border-color: rgba(99,225,228,.35); }
.mc-btn.is-active{ background: linear-gradient(135deg, var(--teal-400), var(--sky-200)); color:#06202a; border-color: transparent; }

.mc-board{ padding:12px; border:1px solid rgba(255,255,255,.06); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(15,36,49,.55), rgba(7,16,24,.5)); }
.mc-rows{ display:grid; gap:8px; }
.mc-row{ display:grid; grid-template-columns: 140px 1fr auto; gap:8px; align-items:center; }
.mc-meter{ position: relative; height:10px; border-radius:999px; background: rgba(255,255,255,.08); overflow:hidden; }
.mc-meter .fill{ position:absolute; inset:0 100% 0 0; background: linear-gradient(90deg, var(--teal-400), var(--sky-200)); }
.mc-val{ color: var(--ink-300); }
.mc-cta{ margin-top:12px; text-align:center; }

/* Footer visibility helper */
.footer.animate-on-scroll{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.footer.animate-on-scroll.is-visible{ opacity:1; transform:none; }

/* Responsive */
@media (max-width: 1200px){
  .fn-layout{ grid-template-columns: 1fr 1fr; }
  .mc-layout{ grid-template-columns: 1fr; }
}
/* ==== HOTFIX: mobile overflow на P17 (Mega Compare) ==== */

/* 1) Запрещаем горизонтальный скролл страницы и даём грид-элементам сжиматься */
html, body, .site-main { overflow-x: hidden; }
.mc-layout > *, .fn-layout > *, .bund-layout > *, .svc-grid > *,
.minnow-layout > *, .bait-grid > *, .kits-layout > *, .lab2-grid > *,
.acc-layout > *, .pal-layout > *, .faq-layout > *, .jm-layout > *,
.gt-layout > *, .sb-layout > * { min-width: 0; }

/* 2) P17: сетка не должна упираться — треки с minmax(0,1fr) */
.mc-layout { display: grid; grid-template-columns: minmax(0,1fr); }

/* 3) P17: строки-метрики не расширяют контейнер */
.mc-row { grid-template-columns: 130px minmax(0,1fr) auto; }
.mc-row label, .mc-val { white-space: nowrap; }

/* 4) На очень узких экранах переносим строку на две строки */
@media (max-width: 520px){
  .mc-row { grid-template-columns: 1fr; gap: 6px; }
  .mc-row .mc-val { justify-self: end; }
}

/* 5) На всякий случай ограничим любые изображения внутри сравнения */
.mega-compare img { max-width: 100%; height: auto; }