/* ══════════════════════════════════════════════════════════════════════════
   BabyGearWise — tool tables on phones: rows become cards, nothing scrolls

   Paste into Appearance → Customize → Additional CSS
   (replace everything currently in there — this supersedes it)

   WHAT THIS DOES
   Below 760px the table stops being a table. Each row becomes a card, each
   value sits on its own line under its column name, and the whole thing fits
   the phone width — so there is no left-right scrolling at all.

   WHY THE !important FLAGS
   The pages carry their own inline CSS, and bgw-pseo.css sets display on
   tables, rows and cells (lines 364/371/385/416 use `display: revert`, which
   forces the table structure back). Those outrank a plain rule wherever it
   comes from. The display rules need !important or none of this reaches the
   screen. So do the cell paddings, because the site sets its own cell padding
   at a specificity that otherwise wins.

   DESKTOP IS UNTOUCHED — everything is inside max-width: 760px.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 760px) {

  /* ── 1. STOP THE SIDEWAYS SCROLL ──────────────────────────────────────── */
  .tool-table-scroll,
  .table-card,
  .tool-card,
  .sc-card,
  .fd-wrap,
  .bgw-pseo .table-card, .bgw-pseo .tool-card, .bgw-pseo .tool-table-scroll,
  .pseo-body .table-card, .pseo-body .tool-card, .pseo-body .tool-table-scroll {
    overflow-x: visible !important;
    max-width: 100% !important;
  }

  /* ── 2. THE TABLE STOPS BEING A TABLE ─────────────────────────────────── */
  table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border: 0 !important;
    font-size: 14px;
  }
  thead { display: none !important; }        /* the head now lives in the cards */

  /* caption: a table-caption is not a block, so it escaped the row rules and
     stayed ~89px wide, wrapping every 8 characters
     ("The full / chart. / Ranges / are the…"). */
  tbody, tr, td, th, caption {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
  }
  caption {
    padding: 0 14px 10px !important;
    text-align: left !important;
    white-space: normal !important;
  }

  /* ── 3. EACH ROW IS A CARD ────────────────────────────────────────────── */
  tbody tr {
    margin: 0 0 14px !important;
    padding: 6px 0 12px !important;
    border: 1px solid var(--tool-border, rgba(255, 255, 255, 0.14)) !important;
    border-radius: 10px !important;
    background: var(--tool-surface, #2b2a28) !important;
    color: #f7f2ea !important;
  }

  /* ── 4. ALIGNMENT — ONE GUTTER FOR EVERY CELL ─────────────────────────── */
  /* This is the fix for the text misalignment. Every cell starts at the same
     box edge, so the title, the labels and the values must share one
     padding-left or they each sit at a different x.

     Measured before: the first cell had padding-left:20px (value text at 42px)
     and all the others had 14px (value text at 36px) — a 6px step, because
     `tbody td:first-child` was only overriding padding-top and the site's own
     cell padding survived underneath. Margins cannot fix that; the boxes
     themselves differ. */
  tbody td,
  tbody td:first-child,
  tbody td:last-child,
  tbody td.fit-buy-cell {
    padding-top: 7px !important;
    padding-right: 14px !important;
    padding-bottom: 0 !important;
    padding-left: 14px !important;
    margin: 0 !important;
    border: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    line-height: 1.45 !important;
  }

  /* ── 5. THE FIRST CELL IS THE CARD TITLE — no label above it ──────────── */
  tbody td:first-child {
    padding-top: 11px !important;
    font-size: 15.5px !important;
    font-weight: 600 !important;
  }
  tbody td:first-child::before { display: none !important; }

  /* ── 6. THE ACTION CELL — its own row, full-width button ──────────────── */
  tbody td.fit-buy-cell,
  tbody td:last-child {
    padding-top: 12px !important;
    padding-bottom: 2px !important;
  }
  tbody td.fit-buy-cell::before,
  tbody td:last-child::before { display: none !important; }

  .fit-buy, a.fit-buy {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 11px 13px !important;
    text-align: center !important;
  }

  /* ── 7. THE PANEL AROUND THE TABLES ───────────────────────────────────── */
  .fit-panel {
    padding: 20px 16px !important;
    overflow-x: visible !important;
  }
  .fit-presets { display: flex; flex-wrap: wrap; gap: 8px; }

  /* ── 8. THE TEXT INSIDE THE CARDS ─────────────────────────────────────── */
  /* The cards were dark with dark text — 97 elements at 1:1, invisible. The
     selectors below are 0,2,2 or higher on purpose: the page sets its own
     colours at 0,1,1 and a plain `tbody td *` (0,0,3) loses to them. */
  .bgw-pseo tbody td, .bgw-pseo tbody td *,
  .pseo-body tbody td, .pseo-body tbody td *,
  tbody td, tbody td * {
    color: #f7f2ea !important;
  }

  /* THE COLUMN-NAME LABEL. It measured 10px and rendered muted green rather
     than cream, because a page rule owned the colour. */
  tbody td[data-label]::before,
  .bgw-pseo tbody td[data-label]::before,
  .pseo-body tbody td[data-label]::before {
    content: attr(data-label) !important;
    display: block !important;
    color: #cfc9c0 !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    opacity: 1 !important;
    margin: 0 0 3px !important;    /* the same 3px under every label */
    padding: 0 !important;         /* the cell owns the gutter, not this */
  }

  /* Links. Two things were wrong before: the rule used var(--tool-sage), which
     resolves to #4A6A59 — the very colour being fixed — so the fallback never
     applied; and it lost to `.bgw-pseo a:not(.next-card)`. A hard-coded palette
     value at higher specificity fixes both. */
  .bgw-pseo tbody td a, .pseo-body tbody td a, tbody td a {
    color: #f7f2ea !important;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}

/* ── 9. SECTIONS THAT AREN'T THE TABLE PANEL STILL MUST NOT SCROLL ──────── */
@media (max-width: 760px) {
  .pseo-body section.section,
  .bgw-pseo section.section {
    overflow-x: visible !important;
    max-width: 100% !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   10. THE TEXT OUTSIDE THE CARDS NEEDS A GUTTER
   Measured on the phone: .section-head, its h2 and its paragraphs all sat at
   left=0 with padding-left:0px, so the first glyph of every line was clipped
   ("ill three fit across…", "ow far will it push…").
   The padding goes on the text blocks, NOT on .pseo-body — the cards inside
   .fit-panel already have 16px and padding the body as well would double it
   and shift the cards off-centre.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {

  .pseo-body section.tool-section > *:not(.fit-panel),
  .pseo-body section.section > *:not(.table-card):not(.tool-card),
  .bgw-pseo section.section > *:not(.table-card):not(.tool-card),
  .pseo-body > .section-head,
  .bgw-pseo .section-head {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .section-head h1,
  .section-head h2,
  .tool-section h2 {
    font-size: 27px !important;
    line-height: 1.24 !important;
    margin-top: 6px !important;
    margin-bottom: 10px !important;
  }

  .pseo-body p,
  .bgw-pseo p,
  .section-head .lede,
  .fit-note,
  .fit-hint {
    font-size: 15px !important;
    line-height: 1.58 !important;
  }

  .eyebrow {
    font-size: 11.5px !important;
    letter-spacing: 0.1em !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   11. PAGES THAT AREN'T .tool-section SHAPED
   The /tools/ hub and the due-date calculator have no .section-head, so the
   rule above misses them (the hub's text measured 4px from the edge).
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {

  .pseo-body h1, .pseo-body h2, .pseo-body h3, .pseo-body h4,
  .bgw-pseo h1,  .bgw-pseo h2,  .bgw-pseo h3,  .bgw-pseo h4,
  .pseo-body > p, .pseo-body > ul, .pseo-body > ol,
  .bgw-pseo > p,  .bgw-pseo > ul,  .bgw-pseo > ol,
  .pseo-body > div > h2, .pseo-body > div > h3,
  .pseo-body > div > p {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* THE WEEK STRIP on the due-date calculator: a horizontal carousel by design
     (344px visible, 470px of content). It wraps instead of scrolling. */
  .dd-strip {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    max-width: 100% !important;
  }
  .dd-strip > * { flex: 0 0 auto; }
}


/* ══════════════════════════════════════════════════════════════════════════
   12. THE REGISTRY CHECKLIST — smaller text
   This page does not use table cards; its items are div.reg-item rows with
   their own classes. Measured on the phone: .reg-name 16px, .reg-tally 15px,
   .reg-tier 13.44px, the Check price button 12.48px, .reg-qty 12.16px.
   Everything is scaled down a step so more fits per screen. Desktop untouched.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {

  /* the item name */
  .bgw-registry .reg-name,
  .pseo-body .reg-name,
  .reg-name { font-size: 14.5px !important; line-height: 1.35 !important; }

  /* the description and any link inside it */
  .bgw-registry .reg-desc,
  .bgw-registry .reg-desc a,
  .bgw-registry .reg-desc span,
  .pseo-body .reg-desc,
  .pseo-body .reg-desc a,
  .reg-desc, .reg-desc a {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
  }

  /* the running tally and the toolbar */
  .bgw-registry .reg-tally, .reg-tally,
  .bgw-registry .reg-work, .reg-work {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  /* the price tier and quantity chips */
  .bgw-registry .reg-tier, .reg-tier,
  .bgw-registry .reg-qty, .reg-qty {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  /* the meta line — "NURSERY FURNITURE · COMING HOME" */
  .bgw-registry .reg-meta, .reg-meta,
  .bgw-registry .reg-tags, .reg-tags,
  .bgw-registry .reg-cat, .reg-cat {
    font-size: 11px !important;
    letter-spacing: 0.05em !important;
    line-height: 1.4 !important;
  }

  /* the buttons on this page */
  .bgw-registry a.fit-buy, .bgw-registry .fit-buy,
  .bgw-registry .reg-act a, .reg-act a {
    font-size: 12px !important;
  }

  /* the rail heading and its list */
  .bgw-registry .reg-rail h4, .reg-rail h4 {
    font-size: 11.5px !important;
  }
  .bgw-registry .reg-rail a, .bgw-registry .reg-rail li, .reg-rail a {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   13. NEGATIVE MARGINS THAT PUSH CONTENT OFF THE LEFT EDGE
   The theme carries:
     .wp-site-blocks .content-container .alignwide { margin-left:-115px;
                                                     margin-right:-115px; }
   (and -130px at another breakpoint). On a phone that pushes the block 115px
   past the screen edge, so the page gains horizontal scroll and every card
   looks cut off at the left. The user's screenshot shows exactly that: a dark
   strip down the left where the page has been scrolled, and content clipped on
   the right. Neutralised on phones only — wide desktop still gets the effect.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {

  .alignwide, .alignfull,
  .wp-site-blocks .content-container .alignwide,
  .wp-site-blocks .content-container .alignfull,
  .entry-content .alignwide, .entry-content .alignfull,
  .pseo-body .alignwide, .pseo-body .alignfull,
  .bgw-pseo .alignwide, .bgw-pseo .alignfull {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* and nothing anywhere may exceed the screen */
  html, body { max-width: 100% !important; overflow-x: hidden !important; }

  /* the Kadence content wrappers must not carry a floor either */
  .site-container, .content-container, .entry-content,
  .pseo-body, .bgw-pseo, .bgw-registry,
  .wp-site-blocks, #inner-wrap, main.wrap {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}