/* UV Spot Shop — mobile responsiveness overlay.
 * The pages were authored at 1240px fixed width with entirely inline styles.
 * The dc-runtime (support.js) re-renders each page through React, which
 * normalises every inline style value: hex → rgb(), colons get a space,
 * commas inside function args get a space. So attribute selectors here must
 * target the RENDERED format ('background: rgb(91, 43, 158)'), not the
 * source format ('background:#5b2b9e'). Every rule uses !important to beat
 * the surviving inline styles. */

/* -------- Global safety net -------- */
html, body { overflow-x: hidden; }

/* -------- Zero-CLS mobile header swap --------
 * mobile.js replaces the desktop chrome with a fixed top bar. These two
 * rules apply from the FIRST paint (html[data-uvjs] is set by an inline
 * head script), so hiding the desktop header and reserving the bar's space
 * never shifts the page. Without JS the attribute never appears and the
 * page renders exactly as before. */
@media (max-width: 800px) {
  html[data-uvjs] body { padding-top: var(--uvshop-mtop-h, 108px) !important; }
  html[data-uvjs] .uvshop-hide-mobile { display: none !important; }
}

@media (max-width: 800px) {

  /* -------- Container: fluid, no shadow, no full-bleed backdrop -------- */
  body { background: #fff !important; }
  div[style*="max-width: 1240px"] {
    max-width: 100% !important;
    box-shadow: none !important;
  }
  /* Full-bleed strip wrappers (linter added `margin-left: calc(50% - 50vw)`) */
  div[style*="margin-left: calc(50% - 50vw)"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* -------- Chrome: utility bar, header, nav, footer -------- */

  /* Utility bar (dark stripe) — condense */
  div[style*="background: rgb(27, 21, 36)"][style*="color: rgb(184, 196, 207)"] {
    padding: 6px 14px !important;
    font-size: 11px !important;
    gap: 8px !important;
  }
  /* Drop the US flag SVG on narrow screens */
  div[style*="background: rgb(27, 21, 36)"] svg[viewBox="0 0 22 15"] {
    display: none !important;
  }
  /* Drop Order Status on narrow screens (kept in hamburger drawer).
   * The utility bar is two <div>s inside a max-width wrapper — left group
   * (flag + supplier) and right group (Sign In + Order Status). Target the
   * LAST child div's LAST span so only Order Status is hidden, not the
   * left group's "US-Based Supplier". */
  div[style*="background: rgb(27, 21, 36)"] > div > div:last-child > span:last-child {
    display: none !important;
  }

  /* Header row (logo + search + CTAs) stacks vertically.
   * Padding is tight because the hamburger sits over the utility bar area
   * (top-right) — logo is left-aligned and doesn't collide. */
  div[style*="padding: 20px 32px"][style*="gap: 28px"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 14px 16px !important;
  }
  /* Logo image caps to available width (natural dimensions overflow otherwise) */
  img[alt="UV Spot Shop"] {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    max-height: 34px !important;
  }
  /* Search bar full-width */
  div[style*="padding: 20px 32px"] div[style*="max-width: 540px"] {
    max-width: 100% !important;
    flex: none !important;
  }
  /* Hide Compare Systems desktop CTA on mobile (moves into hamburger drawer) */
  div[style*="padding: 20px 32px"] a[href="compare"] {
    display: none !important;
  }
  /* Header CTA row goes full-width */
  div[style*="padding: 20px 32px"] div[style*="margin-left: auto"] {
    margin-left: 0 !important;
    width: 100% !important;
  }
  div[style*="padding: 20px 32px"] div[style*="margin-left: auto"] > a[href="quote"] {
    flex: 1 !important;
    text-align: center !important;
  }

  /* Desktop category nav — hide entirely; mobile.js supplies hamburger + drawer */
  div[style*="background: rgb(91, 43, 158)"][style*="display: flex"],
  div[style*="background: rgb(91, 43, 158)"][style*="margin-left: calc(50% - 50vw)"] {
    display: none !important;
  }

  /* -------- Recurring grid patterns → stack -------- */

  div[style*="grid-template-columns: 1fr 400px"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  div[style*="grid-template-columns: 1.5fr 1fr"],
  div[style*="grid-template-columns: 1.4fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* 4-col → 2×2 */
  div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  /* 3-col → 1 col */
  div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* 2-col repeat kept as 1 */
  div[style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Result-card grid (image | content | CTA) → stack */
  a[style*="grid-template-columns: 160px 1fr 132px"],
  a[style*="grid-template-columns: 160px 1fr 150px"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
  }
  /* Result-card image tile becomes full-width thumbnail */
  a[style*="grid-template-columns: 160px 1fr"] > div[style*="width: 160px"] {
    width: 100% !important;
    height: 170px !important;
  }
  /* Search + listing filter rail: stack, no sticky */
  div[style*="grid-template-columns: 250px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 16px !important;
  }
  aside[style*="position: sticky"] {
    position: static !important;
  }
  /* Product page gallery + specs + buy-box.
   * React renders `minmax(0, 1fr)` as `minmax(0px, 1fr)`. */
  div[style*="grid-template-columns: minmax(0px, 1fr) minmax(0px, 0.95fr) 300px"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Product page thumbnails inside gallery: keep their row layout
     (3- and 4-thumb galleries both use gap:10px) */
  div[style*="grid-template-columns: repeat(4, 1fr)"][style*="gap: 10px"] {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  div[style*="grid-template-columns: repeat(3, 1fr)"][style*="gap: 10px"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  /* Compare page: two-slot dropdown picker. On mobile the two slots sit
     side-by-side under the fixed top bar; descriptions and per-slot CTAs
     hide to keep it compact. The label cell spans the full width. */
  #cmp-picker { top: var(--uvshop-mtop-h, 0px) !important; }
  #cmp-picker-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  #cmp-picker-label { grid-column: 1 / -1 !important; padding: 0 2px 2px !important; }
  .cmp-slot { border-left: none !important; padding: 0 !important; }
  .cmp-slot-card { display: none !important; }
  /* Compare spec table: shrink the label column so two system columns fit */
  #cmp-table col:first-child { width: 96px !important; }
  #cmp-table td { padding: 8px 8px !important; font-size: 11.5px !important; }
  #cmp-table td:first-child { font-size: 10.5px !important; }

  /* -------- Section padding — everywhere it's 36px 32px, drop to 24px 16px -------- */
  div[style*="padding: 36px 32px"] { padding: 24px 16px !important; }
  div[style*="padding: 40px 32px"] { padding: 24px 16px !important; }
  div[style*="padding: 28px 32px"] { padding: 20px 16px !important; }
  div[style*="padding: 18px 32px"] { padding: 14px 16px !important; }
  div[style*="padding: 24px 32px"] { padding: 18px 16px !important; }
  div[style*="padding: 32px"]:not(#uvfoot-cols) { padding: 20px 16px !important; }
  div[style*="padding: 36px 32px 40px"] { padding: 24px 16px 28px !important; }
  div[style*="padding: 36px 32px 48px"] { padding: 24px 16px 28px !important; }

  /* -------- Typography scale-down -------- */
  h1[style*="font-size: 40px"] { font-size: 26px !important; line-height: 1.15 !important; }
  h1[style*="font-size: 38px"] { font-size: 24px !important; line-height: 1.15 !important; }
  h2[style*="font-size: 26px"] { font-size: 20px !important; }
  div[style*="font-size: 23px"], h1[style*="font-size: 23px"] { font-size: 18px !important; }

  /* -------- Wide tables → card layout (mobile.js hydrates data-label attrs) -------- */
  table.uvshop-cardify {
    display: block !important;
    border: none !important;
    width: 100% !important;
    min-width: 0 !important;   /* override any inline min-width so the card layout fits the viewport */
  }
  /* the scroll wrapper around a cardified table must not force horizontal scroll */
  div[style*="overflow-x"] > table.uvshop-cardify { min-width: 0 !important; }
  table.uvshop-cardify thead { display: none !important; }
  table.uvshop-cardify tbody { display: block !important; }
  table.uvshop-cardify tr {
    display: block !important;
    background: #fff !important;
    border: 1px solid rgb(223, 228, 232) !important;
    border-radius: 10px !important;
    margin-bottom: 12px !important;
    padding: 8px 12px !important;
  }
  table.uvshop-cardify td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #f0f2f4 !important;
    text-align: right !important;
    width: auto !important;
  }
  table.uvshop-cardify td:last-child { border-bottom: none !important; }
  table.uvshop-cardify td[data-label]::before {
    content: attr(data-label);
    font-weight: 700;
    color: #6f7c88;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-align: left;
    flex: none;
  }
  table.uvshop-cardify td:first-child {
    justify-content: center !important;
    padding-top: 0 !important;
  }
  table.uvshop-cardify td:first-child::before { display: none !important; }
  table.uvshop-cardify td:last-child > * {
    width: 100% !important;
  }

  /* -------- In-page pill nav rows: horizontal scroll instead of wrap -------- */
  div[style*="border-bottom: 1px solid rgb(238, 240, 243)"][style*="display: flex"] {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }

  /* Product page section-anchor tab bar (Overview · Features · … · FAQ).
     Container is `border-top:1px solid #e3e3e3; display:flex` — its flex
     tabs were shrinking so "In the Box" wrapped to 3 lines and clipped at
     the edge. Make it a horizontal scroller and stop the tabs shrinking/
     wrapping. Drop sticky on mobile so it doesn't slide under the fixed
     header (z-190) and vanish. */
  div[style*="border-top: 1px solid rgb(227, 227, 227)"][style*="z-index: 20"][style*="display: flex"] {
    position: static !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    -webkit-overflow-scrolling: touch;
  }
  div[style*="border-top: 1px solid rgb(227, 227, 227)"][style*="z-index: 20"] > a[style*="padding: 14px 18px"] {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding-left: 13px !important;
    padding-right: 13px !important;
  }

  /* -------- Cards / max-widths become fluid -------- */
  div[style*="max-width: 600px"], div[style*="max-width: 940px"],
  p[style*="max-width: 600px"] {
    max-width: 100% !important;
  }

  /* -------- Forms: 16px prevents iOS zoom on focus -------- */
  input, textarea, select { font-size: 16px !important; }

  /* -------- Chat widget: safe-area inset + sticky-quote offset -------- */
  .uvshop-chat-root {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
  }
  body[data-sticky-quote="1"] .uvshop-chat-root {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }

}

/* Very narrow (≤400px) — extra tightening */
@media (max-width: 400px) {
  h1[style*="font-size: 40px"], h1[style*="font-size: 38px"] {
    font-size: 22px !important;
  }
}

/* Tablet-tightening: 801–1100px */
@media (min-width: 801px) and (max-width: 1100px) {
  div[style*="max-width: 1240px"] {
    max-width: 100% !important;
    box-shadow: none !important;
  }
  body { background: #f7f7f8 !important; }
}