/* ═══════════════════════════════════════════════════════════════════════════
   BabyGearWise — THE TOOL PAGE TEMPLATE  (pseotemplate)
   ───────────────────────────────────────────────────────────────────────────
   ONE layout. Every tool page sits inside it. Nothing else sets its own
   margins, widths or card styles — they all come from here, so they are
   identical by construction rather than by eleven pages agreeing.

   MARKUP CONTRACT — a tool page is exactly this:

     <div class="bgw-pseo">
       <main class="bgw-tool">                        ← the one column

         <div class="bgw-tool__head">                 ← eyebrow, H1, lede, CTA
           <p class="eyebrow">…</p>
           <h1>…</h1>
           <p class="lede">…</p>
         </div>

         <nav class="bgw-tool__toc">…</nav>           ← optional

         <section class="bgw-tool__section">          ← repeat per section
           <div class="bgw-tool__head">…</div>         ← its own eyebrow + h2
           <p>…</p>                                    ← prose, full column
           <div class="bgw-tool__slot">…</div>         ← THE TOOL GOES HERE
           <div class="bgw-tool__card">…</div>         ← product cards
         </section>
       </main>
     </div>

   The slot is the only thing a tool supplies. Widths, gutter, vertical rhythm,
   card anatomy and the mobile behaviour of tables are fixed by this file, so a
   new tool cannot drift.

   RULES THIS ENCODES:
     · one column — 1120px max, 24px gutter, text always 1072px at ≥1160
     · no horizontal scrolling, ever: a table that cannot fit becomes cards
     · every card row is label + value, labels come from data-label
     · desktop 24px gutter, phone 20px, never less
   ═════════════════════════════════════════════════════════════════════════ */

/* ── 1. THE COLUMN ── one width, one gutter, everywhere ─────────────────── */
.bgw-pseo .bgw-tool{
  max-width:1120px;
  margin:0 auto;
  padding:0 24px;
  box-sizing:border-box;
}

/* ── 2. THE HEAD ── eyebrow / h1 / lede, one shape on every page ─────────── */
.bgw-pseo .bgw-tool__head{margin:0 0 26px}
.bgw-pseo .bgw-tool__head .eyebrow{
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:#6E6A64;margin:0 0 10px;font-weight:700;
}
.bgw-pseo .bgw-tool__head h1{font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.12;margin:0 0 14px}
.bgw-pseo .bgw-tool__head .lede{font-size:1.06rem;line-height:1.6;color:#4A4640;margin:0;max-width:72ch}

/* ── 3. THE VERTICAL RHYTHM ── one section spacing, never ad-hoc margins ── */
.bgw-pseo .bgw-tool__section{padding:34px 0;border-top:1px solid var(--hair,#e6e0d6)}
.bgw-pseo .bgw-tool__section:first-of-type{border-top:0;padding-top:8px}
.bgw-pseo .bgw-tool__section > .bgw-tool__head{margin-bottom:18px}
.bgw-pseo .bgw-tool__section h2{font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.18;margin:0 0 12px}
.bgw-pseo .bgw-tool__section p{line-height:1.68;margin:0 0 14px}

/* ── 4. THE SLOT ── where a tool's own element goes. Nothing else differs. ─ */
.bgw-pseo .bgw-tool__slot{margin:22px 0 0}
.bgw-pseo .bgw-tool__slot > :first-child{margin-top:0}
.bgw-pseo .bgw-tool__slot > :last-child{margin-bottom:0}

/* ── 5. THE CARD ── the ONE card style: dark panel, label + value rows ──── */
.bgw-pseo .bgw-tool__card{
  background:#2B2A28;                       /* the registered dark card */
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  padding:18px 20px;
  margin:0 0 16px;
  color:#F7F2EA;                            /* cream — legible on this panel */
}
.bgw-pseo .bgw-tool__card > :first-child{margin-top:0}
.bgw-pseo .bgw-tool__card > :last-child{margin-bottom:0}

/* ── 6. TABLES ── never clipped, never side-scrolling on a phone ────────── */
/* Desktop: normal table inside the column.                                   */
.bgw-pseo .bgw-tool table{width:100%;border-collapse:collapse}
.bgw-pseo .bgw-tool table th,
.bgw-pseo .bgw-tool table td{padding:10px 12px;text-align:left;white-space:normal}
.bgw-pseo .bgw-tool table td.n,
.bgw-pseo .bgw-tool table th.n{text-align:right;font-variant-numeric:tabular-nums}

/* Phone/tablet: each row becomes a card, each cell a label+value line.
   No table element survives, so nothing can be wider than the screen.        */
@media (max-width:1024px){
  .bgw-pseo .bgw-tool table,
  .bgw-pseo .bgw-tool thead,
  .bgw-pseo .bgw-tool tbody,
  .bgw-pseo .bgw-tool tr,
  .bgw-pseo .bgw-tool td,
  .bgw-pseo .bgw-tool th{display:block;width:100%;box-sizing:border-box}

  .bgw-pseo .bgw-tool thead{display:none}          /* headings move into cells */

  .bgw-pseo .bgw-tool tbody tr{
    background:transparent;                        /* dark card shows through  */
    border:1px solid var(--hair,#e6e0d6);
    border-radius:10px;
    padding:12px 14px;
    margin:0 0 14px;
  }

  .bgw-pseo .bgw-tool tbody td,
  .bgw-pseo .bgw-tool tbody th{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:12px;
    padding:6px 0;
    border:0;
    text-align:right;                              /* the value                */
  }
  /* the label — its own half of the row, wrapping normally so a long seat
     name is never squeezed into four lines beside an empty column */
  .bgw-pseo .bgw-tool tbody td[data-label]::before,
  .bgw-pseo .bgw-tool tbody th[data-label]::before{
    content:attr(data-label);
    flex:0 1 auto;
    min-width:0;
    text-align:left;
    font-weight:700;
    opacity:.88;
    white-space:normal;
  }
  /* a cell with no label takes the whole line, left aligned — this is what a
     product NAME should do rather than sitting in a value column */
  .bgw-pseo .bgw-tool tbody td:not([data-label]){
    text-align:left;
    font-weight:600;
  }
}

/* ── 7. GUTTER ── 24px desktop, 20px phone. Never 0. ────────────────────── */
@media (max-width:600px){
  .bgw-pseo .bgw-tool{padding:0 20px}
  .bgw-pseo .bgw-tool__section{padding:26px 0}
}


/* ═══════════════════════════════════════════════════════════════════════════
   ALIASES — the same template, applied to the class names the tool pages
   already use. Rather than rewriting eleven pages of stored content, the
   template's rules are attached to the existing containers. One source of
   truth, applied through the markup that is already there.

   Existing class            Template role
   ─────────────────────     ──────────────────────────────
   .section                  a tool section
   .section-head             that section's head
   .fit-panel                a tool's slot
   .table-card .tool-card
   .sc-card .comparison-
     table-wrapper           a card that may hold a table
   .faq .fd .fd-lede         blocks that need the same gutter

   Everything here is scoped to .bgw-pseo, so the homepage and the article
   pages cannot be reached.
   ═════════════════════════════════════════════════════════════════════════ */

/* the column — every tool container, whatever it is called */
.bgw-pseo .section,
.bgw-pseo .pseo-body > .fd,
.bgw-pseo .pseo-body > .faq,
.bgw-pseo .pseo-body > .fd-lede{padding-left:24px;padding-right:24px}

@media (max-width:600px){
  .bgw-pseo .section,
  .bgw-pseo .pseo-body > .fd,
  .bgw-pseo .pseo-body > .faq,
  .bgw-pseo .pseo-body > .fd-lede{padding-left:20px;padding-right:20px}
}

/* NO sideways scrolling on a phone, for every card container that can hold a
   table — and no table element left to overflow. This is the rule that stops
   "Check Price" being clipped off the right edge. */
@media (max-width:1024px){
  .bgw-pseo .table-card,
  .bgw-pseo .tool-card,
  .bgw-pseo .sc-card,
  .bgw-pseo .comparison-table-wrapper,
  .bgw-pseo .fit-panel{overflow-x:auto;max-width:100%}

  .bgw-pseo .table-card table,
  .bgw-pseo .tool-card table,
  .bgw-pseo .sc-card table,
  .bgw-pseo .comparison-table-wrapper table,
  .bgw-pseo .fit-panel table{max-width:100%;table-layout:auto}

  .bgw-pseo .table-card table th,
  .bgw-pseo .table-card table td,
  .bgw-pseo .tool-card table th,
  .bgw-pseo .tool-card table td,
  .bgw-pseo .sc-card table th,
  .bgw-pseo .sc-card table td,
  .bgw-pseo .comparison-table-wrapper table th,
  .bgw-pseo .comparison-table-wrapper table td,
  .bgw-pseo .fit-panel table th,
  .bgw-pseo .fit-panel table td{white-space:normal}

  /* the buy cell must wrap, or it dictates the table width and pushes the
     button off the edge — this is what clipped "Check Price" */
  .bgw-pseo .fit-buy-cell{white-space:normal !important;text-align:right}
}


/* ── the last 12px ───────────────────────────────────────────────────────────
   Inside the Status cell, "at the 30″ limit — check the head-to-shell gap" ran
   12px past the screen edge. It is the longer half of a label+value row, so it
   has to be allowed to shrink and wrap like everything else in the card. */
@media (max-width:1024px){
  .bgw-pseo .fit-why,
  .bgw-pseo .fit-sub,
  .bgw-pseo .chip{white-space:normal;min-width:0;overflow-wrap:anywhere}
  .bgw-pseo .fit-panel td,
  .bgw-pseo .fit-panel th{min-width:0;overflow-wrap:anywhere}
}

/* ── the method band must not cram ───────────────────────────────────────────
   `.bgw-pseo .steps` is `repeat(auto-fit, minmax(175px, 1fr))`, which at 390px
   resolves to TWO ~171px columns. The four method items then fight for 171px
   each and their sentences are cut mid-word inside the card — visible in the
   phone screenshot of 2026-10-11, and invisible to every viewport-edge test
   because the clipping happens INSIDE the card, not past the screen edge.

   One column below 700px: the four items stack and read as a list. Same
   minmax floor as the source, so nothing else on the page shifts. */
@media (max-width:700px){
  .bgw-pseo .steps{grid-template-columns:1fr}
  .bgw-pseo .related{grid-template-columns:1fr}
}
/* and the band must never clip its own content, whatever the width */
.bgw-pseo .method,
.bgw-pseo [class*="method"]{overflow:visible;min-width:0}
.bgw-pseo .steps > *{min-width:0;overflow-wrap:anywhere}