/* ── PAGE HERO ── */
    .page-hero {
      padding: 9rem 8vw 5rem;
      background: var(--foam);
      border-bottom: 1px solid var(--mist);
    }
    .page-hero-inner {
      max-width: 640px;
    }
    .page-kicker {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 1.1rem;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--river);
      margin-bottom: 1rem;
    }
    .page-kicker::before {
      content: '';
      display: block;
      width: 2rem;
      height: 1px;
      background: var(--river);
    }
    .page-hero h1 {
      font-family: var(--serif);
      font-size: clamp(2.5rem, 5vw, 4rem);
      line-height: 1.08;
      letter-spacing: -0.02em;
      margin-bottom: 1rem;
    }
    .page-hero h1 em { font-style: italic; color: var(--river); }
    .page-hero p {
      font-size: 1.15rem;
      font-weight: 300;
      color: var(--mid);
      max-width: 52ch;
      line-height: 1.75;
    }

    /* ── CATEGORY NAV ── */
    .cat-nav {
      position: sticky;
      top: 86px;
      z-index: 50;
      background: var(--white);
      border-bottom: 1px solid var(--mist);
      padding: 0 8vw;
      display: flex;
      gap: 0;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .cat-nav::-webkit-scrollbar { display: none; }

    .cat-nav-link {
      text-decoration: none !important;
      font-size: 0.8rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--mid);
      padding: 1rem 0.9rem;
      border-bottom: 2px solid transparent;
      white-space: nowrap;
      transition: color 0.2s, border-color 0.2s;
    }
    .cat-nav-link:link,
    .cat-nav-link:visited,
    .cat-nav-link:hover,
    .cat-nav-link:active {
      text-decoration: none !important;
    }
    .cat-nav-link:hover { color: var(--river); }
    .cat-nav-link.active { color: var(--river); border-bottom-color: var(--river); }

    /* ── CATEGORY SECTION ── */
    .cat-section {
      padding: 5rem 8vw;
      border-bottom: 1px solid var(--mist);
    }
    .cat-section:nth-child(odd) { background: var(--foam); }
    .cat-section:nth-child(even) { background: var(--white); }

    .cat-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 3rem;
      flex-wrap: wrap;
      gap: 1rem;
    }
    .cat-label {
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--river);
      margin-bottom: 0.5rem;
    }
    .cat-title {
      font-family: var(--serif);
      font-size: clamp(1.75rem, 3vw, 2.5rem);
      letter-spacing: -0.02em;
      line-height: 1.1;
      scroll-margin-top: 152px;
    }
    .cat-desc {
      font-size: 0.9rem;
      font-weight: 300;
      color: var(--mid);
      max-width: 48ch;
      line-height: 1.7;
      margin-top: 0.5rem;
    }

    /* ── BRAND GROUP ── */
    .brand-group {
      margin-bottom: 3.5rem;
    }
    .brand-group:last-child { margin-bottom: 0; }

    .brand-header {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }
    .brand-name {
      font-family: var(--serif);
      font-size: 1.2rem;
      color: var(--ink);
    }
    .brand-line {
      flex: 1;
      height: 1px;
      background: var(--mist);
    }
    .brand-count {
      font-size: 0.75rem;
      color: var(--mid);
      letter-spacing: 0.04em;
    }

    /* ── GEAR GRID ── */
    .gear-grid {
      display: grid;
      gap: 1.25rem;
    }
    .gear-grid.cols-3 { grid-template-columns: 1fr; }
    .gear-grid.cols-2 { grid-template-columns: 1fr; }

    /* ── GEAR CARD ── */
    .gear-card {
      background: var(--white);
      border: 1px solid var(--mist);
      border-radius: 0.875rem;
      overflow: hidden;
      display: grid;
      grid-template-columns: auto 1fr;
      transition: transform 0.25s, box-shadow 0.25s;
    }
    .cat-section:nth-child(even) .gear-card { background: var(--white); }
    .gear-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 32px rgba(15,26,20,0.09);
    }

    /* Photo placeholder — self-sizing square that matches whatever
       height the card ends up being (driven by its own content),
       with its own rounded corners rather than relying on the
       card's overflow clipping. */
    .gear-photo {
      aspect-ratio: 1 / 1;
      height: 100%;
      width: auto;
      min-height: 0;
      background: var(--mist);
      position: relative;
      overflow: hidden;
      border-radius: 0.875rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      flex-shrink: 0;
    }

    /* When a real <img> is placed inside .gear-photo */
    .gear-photo img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: var(--mist);
      border-radius: inherit;
    }

    .photo-placeholder-icon {
      width: 2.5rem;
      height: 2.5rem;
      opacity: 0.3;
    }
    .photo-placeholder-text {
      font-size: 0.7rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--mid);
      opacity: 0.6;
    }
    .photo-placeholder-hint {
      font-size: 0.65rem;
      color: var(--mid);
      opacity: 0.45;
    }

    .gear-info {
      padding: 1.25rem 1.5rem;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }
    .gear-model {
      font-family: var(--serif);
      font-size: 1.1rem;
      line-height: 1.2;
      margin-bottom: 0.4rem;
    }
    .gear-detail {
      font-size: 0.825rem;
      font-weight: 300;
      color: var(--mid);
      line-height: 1.65;
      margin-bottom: 1rem;
    }
    .gear-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
    }
    .gear-tag {
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.04em;
      padding: 0.25rem 0.65rem;
      border-radius: 2rem;
      background: var(--foam);
      color: var(--mid);
      border: 1px solid var(--mist);
    }
    .gear-tag.weight {
      background: rgba(28,107,74,0.07);
      color: var(--river);
      border-color: rgba(28,107,74,0.15);
    }
    .gear-tag.highlight {
      background: rgba(212,98,26,0.07);
      color: var(--accent);
      border-color: rgba(212,98,26,0.15);
    }

    .oar-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.25rem;
    }

    @media (max-width: 700px) {
      .gear-card { grid-template-columns: 1fr; }
      .gear-photo {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        border-radius: 0.875rem 0.875rem 0 0;
      }
    }

    /* ── SPEC PILLS ── */
    .spec-pills {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem;
      margin-top: 1rem;
    }
    .spec-pill {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 0.1rem;
      padding: 0.45rem 0.9rem;
      border-radius: 2rem;
      border: 1px solid var(--mist);
      background: var(--foam);
    }
    .spec-pill-label {
      font-size: 0.6rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--mid);
    }
    .spec-pill-value {
      font-size: 0.8rem;
      font-weight: 500;
      color: var(--ink);
    }
    .spec-pill.weight  { background: rgba(28,107,74,0.06);  border-color: rgba(28,107,74,0.18);  }
    .spec-pill.weight  .spec-pill-label { color: var(--river); }
    .spec-pill.weight  .spec-pill-value { color: var(--river); }
    .spec-pill.highlight { background: rgba(212,98,26,0.06); border-color: rgba(212,98,26,0.18); }
    .spec-pill.highlight .spec-pill-label { color: var(--accent); }
    .spec-pill.highlight .spec-pill-value { color: var(--accent); }

    /* ── BOOKS PLACEHOLDER ── */
    .books-placeholder {
      border: 2px dashed rgba(28,107,74,0.25);
      border-radius: 1rem;
      padding: 3rem 2rem;
      text-align: center;
      background: rgba(28,107,74,0.02);
    }
    .books-placeholder-icon {
      font-size: 2.5rem;
      margin-bottom: 1rem;
      opacity: 0.4;
    }
    .books-placeholder-title {
      font-family: var(--serif);
      font-size: 1.25rem;
      margin-bottom: 0.5rem;
      color: var(--ink);
    }
    .books-placeholder-body {
      font-size: 0.875rem;
      color: var(--mid);
      font-weight: 300;
      max-width: 44ch;
      margin: 0 auto 1.5rem;
      line-height: 1.7;
    }
    .books-shortcode-box {
      display: inline-block;
      background: var(--ink);
      color: rgba(255,255,255,0.8);
      font-family: 'Courier New', monospace;
      font-size: 0.8rem;
      padding: 0.6rem 1.25rem;
      border-radius: 0.4rem;
      letter-spacing: 0.04em;
    }

    /* ── CONTACT BAND ── */
    .contact-band {
      padding: 5rem 8vw;
      background: var(--river);
      color: var(--white);
      text-align: center;
    }
    .contact-band h2 {
      font-family: var(--serif);
      font-size: clamp(2rem, 4vw, 3rem);
      letter-spacing: -0.02em;
      margin-bottom: 0.75rem;
    }
    .contact-band h2 em { font-style: italic; color: rgba(255,255,255,0.65); }
    .contact-band p {
      font-size: 1rem;
      font-weight: 300;
      color: rgba(255,255,255,0.7);
      margin-bottom: 2rem;
    }
    .btn-white {
      background: var(--white);
      color: var(--river);
      text-decoration: none;
      padding: 0.9rem 2rem;
      border-radius: 2rem;
      font-weight: 500;
      font-size: 0.9rem;
      transition: transform 0.2s, box-shadow 0.2s;
      display: inline-block;
    }
    .btn-white:hover {
      background: var(--accent);
      color: var(--white);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    }

    

    

    /* ── RESPONSIVE ── */
    @media (max-width: 960px) {
      .gear-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
      .oar-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 640px) {
      .gear-grid.cols-3,
      .gear-grid.cols-2,
      .oar-grid { grid-template-columns: 1fr; }
      /* .nav-links visibility is handled by the mobile hamburger toggle CSS in design-system.css, not hidden outright */
      footer { flex-direction: column; gap: 1.5rem; text-align: center; }
      .cat-section { padding: 4rem 6vw; }
    }

/* ============================================================
   BLOCK EDITOR FIXES (added after converting to real blocks)
   ============================================================ */

/* Checkmark lists (Warranty/Features) use a checkmark character as
   the bullet, so the browser's default list marker must be removed */
ul.checklist {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}
ul.checklist li {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 0.35rem 0 !important;
}
ul.checklist li:last-child { margin-bottom: 0 !important; }

/* Spec pill label/value are now paragraph blocks, which carry
   default vertical margin — zero that out so pills stay compact
   instead of stretching tall */
.spec-pill p,
.spec-pill .spec-pill-label,
.spec-pill .spec-pill-value,
p.spec-pill-label,
p.spec-pill-value {
  margin: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* brand-name / brand-count were originally <span> elements inside the
   flex .brand-header; now they're paragraph blocks, so zero their margin */
.brand-header p {
  margin: 0 !important;
}

/* Neutralize WordPress's automatic block-gap spacing (consumed via the
   --wp--style--block-gap custom property) on our custom flex/grid
   wrappers, in case it's still adding space class-specificity alone
   isn't fully catching */
.spec-pill,
.spec-pills,
.brand-header,
.gear-info {
  --wp--style--block-gap: 0px !important;
  row-gap: 0 !important;
}

/* ============================================================
   SEMANTIC CLASSES for brand intro / warranty / features text
   (replaces raw inline styles, which Gutenberg can silently
   drop from core Paragraph/Heading blocks on save/re-parse)
   ============================================================ */
.brand-intro-text,
.warranty-box {
  font-size: 0.9rem !important;
  font-weight: 300 !important;
  color: var(--mid) !important;
  line-height: 1.75 !important;
}
.warranty-label {
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--river) !important;
  margin-bottom: 0.5rem !important;
}
.warranty-title {
  font-weight: 500 !important;
  margin-bottom: 0.5rem !important;
  color: var(--mid) !important;
  font-size: 0.9rem !important;
}