/* ══════════════════════════════════════════════════════════════════════════
   Responsive layer.

   The page markup (ported from a Claude Design mockup) is styled almost
   entirely with inline styles, which win over normal stylesheet rules — so
   the mobile overrides below lean on `!important` and structural selectors.
   Everything is scoped to #app so it can't leak into the consent banner.
   ══════════════════════════════════════════════════════════════════════ */

/* --- always on --------------------------------------------------------- */

/* wide content scrolls inside its own box instead of the page */
.dc-raw-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* nav: the link group is transparent to layout on desktop (participates in
   the <nav> flex row); the hamburger is hidden until the breakpoint */
.nav-menu { display: contents; }
.nav-burger {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  background: transparent; border: 1px solid var(--color-divider);
  color: var(--color-text); cursor: pointer;
}
.nav-burger:hover { border-color: var(--color-accent); color: var(--color-accent-700); }

/* --- phones / small tablets ------------------------------------------- */

@media (max-width: 860px) {

  body { overflow-x: hidden; }

  /* ---- page frame: tighten the 32px gutters and the tall section padding */
  #app header > div,
  #app footer > div,
  #app main section > div,
  #app > div > div > div {          /* top bar / language notice inner */
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  #app main section > div { padding-top: 44px !important; padding-bottom: 44px !important; }
  #app main section > div[style*="66px 32px 52px"] { padding-top: 40px !important; padding-bottom: 24px !important; }

  /* ---- top bar: keep email + language, drop the address and tagline ---- */
  #app > div > div:first-child > div { gap: 6px 16px !important; padding-top: 8px !important; padding-bottom: 8px !important; }
  #app > div > div:first-child > div > span:nth-of-type(1),
  #app > div > div:first-child > div > span:nth-of-type(3) { display: none !important; }

  /* ---- header / nav → hamburger -------------------------------------- */
  #app header nav { position: relative; padding: 10px 0 !important; }
  #app header nav > a:first-child img { height: 30px !important; }
  .nav-burger { display: inline-flex; margin-left: auto; }

  .nav-menu {
    display: none;
    position: absolute; left: 0; right: 0; top: calc(100% + 10px);
    z-index: 55;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-divider);
    box-shadow: var(--shadow-md);
    padding: 6px 18px 14px;
  }
  .nav-menu.is-open { display: flex; }
  .nav-menu > a {
    padding: 13px 2px !important;
    font-size: 17px !important;
    border-bottom: 1px solid var(--color-divider);
  }
  .nav-menu > button { margin-top: 14px; width: 100%; justify-content: center; padding: 14px 18px !important; }

  /* ---- collapse every multi-column grid to one column ---------------- */
  #app main [style*="grid-template-columns"],
  #app main [style*="grid-template-columns"][style*="!important"] {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  /* hairline-separated grids (gap:1px over a divider colour) must keep the
     1px gap once stacked — an 18px gap shows the backing colour as a band */
  #app main [style*="grid-template-columns"][style*="gap:1px"] { gap: 1px !important; }
  /* a stacked column keeps none of the desktop layout's inter-column
     scaffolding: no left/right dividers, no indent, no one-sided gutter */
  #app main [style*="border-left:1px"] { border-left: 0 !important; padding-left: 0 !important; }
  #app main [style*="grid-template-columns"] > [style*="border-right:1px"] { border-right: 0 !important; }
  /* cells padded on one side only for a 2-up split ("padding:A B A 0" /
     "padding:A 0 A B") — flatten so neither column ends up indented */
  #app main [style*="grid-template-columns"] > [style*="18px 20px 18px 0"],
  #app main [style*="grid-template-columns"] > [style*="18px 0 18px 20px"],
  #app main [style*="grid-template-columns"] > [style*="20px 14px 0 0"],
  #app main [style*="grid-template-columns"] > [style*="20px 0 0 14px"] {
    padding-left: 0 !important; padding-right: 0 !important;
  }
  /* numbered rows ("01", "02"…) — hide the number gutter once stacked */
  #app main [style*="64px 1.25fr 1fr"] > :first-child,
  #app main [style*="64px 1fr"] > :first-child { display: none !important; }

  /* two-panel content splits that use fr ratios: kill min-width:0 quirks */
  #app main figure { width: 100% !important; }

  /* uppercase eyebrow labels: tighten the wide tracking so they don't orphan */
  #app main [style*="letter-spacing:.18em"],
  #app main [style*="letter-spacing:.16em"],
  #app main [style*="letter-spacing:.14em"] { letter-spacing: 0.08em !important; }

  /* ---- headings down ------------------------------------------------- */
  #app main h1[style] { font-size: clamp(30px, 8vw, 38px) !important; line-height: 1.08 !important; letter-spacing: -0.01em !important; }
  #app main h2[style] { font-size: clamp(23px, 6vw, 30px) !important; line-height: 1.12 !important; }
  #app main h3[style] { font-size: 20px !important; }
  #app main p[style*="font-size:19px"],
  #app main p[style*="font-size:18px"],
  #app main p[style*="font-size:17px"] { font-size: 16px !important; }

  /* ---- hero: less padding; the wash fades vertically so the photo still
     reads underneath the text instead of going flat grey ------------- */
  #app main section:first-of-type [style*="max-width:600px"] { max-width: 100% !important; padding: 44px 0 36px !important; }
  #app main [style*="linear-gradient(100deg"] {
    background: linear-gradient(180deg,
      rgba(242,242,243,0.95) 0%,
      rgba(242,242,243,0.88) 55%,
      rgba(242,242,243,0.62) 100%) !important;
  }

  /* hero stat strip (numbers only): stay 2×2, drop the column rules */
  #app main [style*="repeat(4,1fr)"]:not([style*="gap:1px"]) { grid-template-columns: 1fr 1fr !important; }
  #app main [style*="repeat(4,1fr)"]:not([style*="gap:1px"]) > div { border-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
  /* the process strip (01–04, gap:1px) has a paragraph per cell — one column,
     with its own padding kept intact (the rule above must not touch it) */
  #app main [style*="repeat(4,1fr)"][style*="gap:1px"] { grid-template-columns: 1fr !important; }
  #app main [style*="repeat(4,1fr)"][style*="gap:1px"] > div,
  #app main [style*="repeat(3,1fr)"][style*="gap:1px"] > div { padding: 24px 22px !important; }

  /* ---- tables: scroll on tablets (see the phone rule below) -------- */
  .dc-raw-table table { min-width: 600px; }
  .dc-raw-table {
    border: 1px solid var(--color-divider);
    background:
      linear-gradient(90deg, transparent 92%, rgba(20,26,34,0.10)) right / 22px 100% no-repeat;
  }

  /* ---- floating "Request a quote" — hidden on mobile; the hamburger
     menu and the in-section CTAs cover it, and it otherwise sits on top
     of the content and the consent banner ---------------------------- */
  #app [style*="position:fixed"][style*="z-index:70"] { display: none !important; }

  /* ---- quote form: single column, wrap the product checkboxes ------ */
  #app [data-quote-form] [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* ---- footer ----------------------------------------------------- */
  #app footer > div:first-child { grid-template-columns: 1fr !important; gap: 32px !important; padding-top: 44px !important; }
  #app footer > div:last-child { flex-direction: column !important; align-items: flex-start !important; gap: 4px 20px !important; }
  #app footer > div:last-child > span { display: flex; flex-wrap: wrap; gap: 4px 20px; }

  /* ── mobile audit fixes ───────────────────────────────────────────── */

  /* iOS zooms the page when a focused control is < 16px — the quote form
     fields were all 14px */
  #app .input,
  #app select.input,
  #app textarea.input { font-size: 16px !important; min-height: 48px; }
  #app textarea.input { min-height: 110px; }

  /* section CTAs: full-width targets, tall enough that the uppercase
     tracking doesn't overset the button box */
  #app main button.btn,
  #app [data-quote-form] button[type="submit"] {
    width: 100% !important; align-self: stretch !important;
    justify-content: center; min-height: 52px;
  }

  /* tap targets in the top bar and the footer (were 19–29px tall) */
  #app > div > div:first-child a,
  #app > div > div:first-child button { min-height: 40px; display: inline-flex; align-items: center; }
  #app footer a { display: inline-flex; align-items: center; min-height: 40px; }

  /* certification row: the "Produced in facilities certified to" eyebrow
     was locked to 22ch and wrapped to three lines beside an empty gutter */
  #app main [style*="max-width:22ch"] { max-width: 100% !important; }
  #app main .tag { font-size: 12px !important; }
  #app main .card-kicker { font-size: 11px !important; }

  /* quote form: product chips one full-width row each, at a real tap height */
  #app [data-quote-form] label.radio { width: 100%; min-height: 46px; font-size: 15px; }
}

/* phones: turn the data tables into stacked cards (first cell = card title) */
@media (max-width: 620px) {
  .dc-raw-table { overflow: visible !important; border: 0 !important; background: none !important; }
  .dc-raw-table table.table,
  .dc-raw-table thead,
  .dc-raw-table tbody,
  .dc-raw-table tr,
  .dc-raw-table th,
  .dc-raw-table td { display: block !important; width: auto !important; min-width: 0 !important; }
  .dc-raw-table thead { position: absolute; left: -9999px; }
  .dc-raw-table tbody tr {
    border: 1px solid var(--color-divider) !important;
    padding: 12px 14px; margin-bottom: 10px;
  }
  .dc-raw-table tbody tr:hover { background: none; }
  .dc-raw-table td {
    border: 0 !important; padding: 3px 0 !important;
    font-size: 14px !important; line-height: 1.5 !important;
  }
  .dc-raw-table td:first-child {
    font-family: var(--font-heading) !important; font-weight: 600 !important;
    font-size: 18px !important; margin-bottom: 4px;
  }

  /* stacked cards keep the data — put the column heading back above each
     value (data-label is copied from <thead> onto every cell) */
  .dc-raw-table td[data-label]:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-heading); font-size: 10px; letter-spacing: .12em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 50%, transparent);
  }
  .dc-raw-table td:not(:first-child) { padding: 6px 0 !important; }
}

/* very small phones */
@media (max-width: 400px) {
  #app header > div,
  #app footer > div,
  #app main section > div,
  #app > div > div > div { padding-left: 14px !important; padding-right: 14px !important; }
  #app main h1[style] { font-size: 28px !important; }
}