/* ============================================================
   LifeSafe — responsive layer
   ------------------------------------------------------------
   The pages come from a Claude Design export, so nearly all
   layout lives in inline style attributes. Inline styles beat
   stylesheet rules on specificity, so overrides here need
   !important — that is a property of the source format, not a
   shortcut. Keep new page work in classes and this file shrinks.

   Load order: styles.css → ia.css → responsive.css (last).

   Breakpoints
     ≤1100px  tablet / small laptop — two-column layouts stack
     ≤820px   mobile nav takes over from the hover mega-menu
     ≤600px   phone — tighter gutters, single column everywhere
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video { max-width: 100%; }

/* Grid and flex children default to min-width:auto, so an item that cannot
   shrink below its min-content — a <select> sized by its longest option is
   the usual culprit — forces the whole track wider than the viewport. */
.ls-r-split > *, .ls-r-2 > *, .ls-r-3 > *, .ls-r-4 > *,
.ls-grid2 > *, .ls-grid3 > *, .ls-grid4 > *,
.ls-pdp > *, .ls-revsum > *, .ls-foot-cols > * { min-width: 0; }
.ls-form input, .ls-form select, .ls-form textarea { min-width: 0; max-width: 100%; }

/* The mega menu is a fixed 620px centred under its trigger. Between the
   mobile-nav breakpoint and full desktop there is not room for that, so
   pin it to the right edge and let it shrink.
   Keep this width in step with .ls-mega in ia.css — it was left at the old
   three-column 880px after the "Shop by use" column was dropped, which made
   the menu render half-empty on every viewport under 1180px. */
@media (max-width: 1180px) {
  .ls-mega {
    width: min(620px, calc(100vw - 32px)) !important;
    left: auto !important; right: 0 !important;
    transform: translateX(0) translateY(10px) !important;
  }
  .ls-nav-i:hover > .ls-mega { transform: translateX(0) translateY(0) !important; }
}

/* ------------------------------------------------------------
   Fluid display type.
   Each rule matches the inline pixel value it replaces and caps
   at that value, so desktop is untouched and everything below
   scales smoothly with no breakpoint jump.
   ------------------------------------------------------------ */
.ls-fs-184 { font-size: clamp(58px, 15vw, 184px) !important; }
.ls-fs-172 { font-size: clamp(56px, 14vw, 172px) !important; }
.ls-fs-150 { font-size: clamp(52px, 13vw, 150px) !important; }
.ls-fs-112 { font-size: clamp(42px, 10.5vw, 112px) !important; }
.ls-fs-104 { font-size: clamp(40px, 10vw, 104px) !important; }
.ls-fs-96  { font-size: clamp(38px, 9.2vw, 96px) !important; }
.ls-fs-92  { font-size: clamp(37px, 8.8vw, 92px) !important; }
.ls-fs-88  { font-size: clamp(35px, 8.4vw, 88px) !important; }
.ls-fs-84  { font-size: clamp(34px, 8vw, 84px) !important; }
.ls-fs-76  { font-size: clamp(32px, 7.2vw, 76px) !important; }
.ls-fs-62  { font-size: clamp(30px, 6vw, 62px) !important; }
.ls-fs-60  { font-size: clamp(29px, 5.8vw, 60px) !important; }
.ls-fs-52  { font-size: clamp(27px, 5vw, 52px) !important; }
.ls-fs-50  { font-size: clamp(26px, 4.8vw, 50px) !important; }
.ls-fs-48  { font-size: clamp(26px, 4.6vw, 48px) !important; }
.ls-fs-46  { font-size: clamp(25px, 4.4vw, 46px) !important; }
.ls-fs-44  { font-size: clamp(24px, 4.2vw, 44px) !important; }
.ls-hero h1, .ls-h2 { font-size: clamp(34px, 7.6vw, 82px); }
.ls-h2 { font-size: clamp(30px, 5.6vw, 64px); }

/* A nowrap headline cannot reflow — release it below desktop. */
@media (max-width: 1100px) {
  .ls-r-nowrap { white-space: normal !important; }
}

/* ------------------------------------------------------------
   Mobile nav trigger — hidden until the hover menus stop working
   ------------------------------------------------------------ */
.ls-burger { display: none; background: none; border: 0; cursor: pointer; padding: 10px 6px; margin-left: auto; }
.ls-burger span { display: block; width: 26px; height: 2px; background: var(--ls-ink); border-radius: 2px; }
.ls-burger span + span { margin-top: 6px; }

.ls-mobnav {
  position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 88vw;
  background: #fff; z-index: 100; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .36s cubic-bezier(.16,1,.3,1);
  box-shadow: -20px 0 60px rgba(12,14,16,.2);
}
.ls-mobnav.open { transform: translateX(0); }
.ls-mobnav-top { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid #e5e8eb; }
.ls-mobnav-body { flex: 1; overflow-y: auto; padding: 8px 0 20px; }
.ls-mobnav-body details { border-bottom: 1px solid #eef1f3; }
.ls-mobnav-body summary {
  list-style: none; cursor: pointer; padding: 17px 22px; font-size: 18px;
  font-weight: 600; position: relative;
}
.ls-mobnav-body summary::-webkit-details-marker { display: none; }
.ls-mobnav-body summary::after {
  content: ""; position: absolute; right: 24px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid #5c6268; border-bottom: 2px solid #5c6268;
  transform: translateY(-70%) rotate(45deg); transition: transform .25s;
}
.ls-mobnav-body details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.ls-mobnav-body details > div { padding: 2px 0 14px; }
.ls-mobnav-body a { display: block; padding: 11px 22px 11px 34px; font-size: 16px; color: #3f464c; }
.ls-mobnav-body a:hover { color: var(--ls-red); background: #F5F7F8; }
.ls-mobnav-body a.lone { padding: 17px 22px; font-size: 18px; font-weight: 600; color: var(--ls-ink); border-bottom: 1px solid #eef1f3; }
.ls-mobnav-body .grp { display: block; padding: 16px 22px 6px; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: #5c6268; font-weight: 700; }
.ls-mobnav-foot { border-top: 1px solid #e5e8eb; padding: 18px 22px 22px; }

/* ------------------------------------------------------------
   ≤1100px — two-column layouts stack, gutters come in
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
  section, .ls-wrap, .ls-crumb, .ls-foot, .ls-search, .ls-break {
    padding-left: 32px !important; padding-right: 32px !important;
  }
  .ls-head-in, .ls-util { padding-left: 24px !important; padding-right: 24px !important; }

  /* every asymmetric two-column grid collapses */
  .ls-r-split,
  .ls-pdp, .ls-revsum {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* product shots sized in px need to breathe */
  .ls-r-media { height: auto !important; max-height: 46vh !important; }
  .ls-r-wide { width: 100% !important; max-width: 440px !important; }

  .ls-pdp-buy { position: static !important; }
  .ls-pdp-media { min-height: 0 !important; padding: 32px !important; }
  .ls-foot-cols { grid-template-columns: 1fr 1fr !important; gap: 36px !important; }
  .ls-break { padding-top: 84px !important; padding-bottom: 84px !important; }
  .ls-marquee-track > span { font-size: 30px !important; }

  /* The side-reveals start 48px off to one side. Once the two-column
     grids stack, those elements are full-width, so a horizontal offset
     pushes them past the viewport edge until they animate in. Reveal
     vertically from this breakpoint down — same width as the stacking.

     The `.js-anim` prefix is load-bearing, not decoration. styles.css sets
     the X-offset as `.js-anim .ls-reveal-r` (0,2,0) and clears it as
     `.js-anim .ls-reveal-r.ls-in` (0,3,0). Written bare, the two rules
     below score 0,1,0 and 0,2,0 — they lose both contests, so the 48px
     X-offset survived on mobile and the right-hand column of every
     two-column section sat 48px off the right edge, clipped by
     `body{overflow-x:hidden}`. That silently cut the ends off the contact
     panel and the wholesale enquiry form on every phone. Matching the
     prefix makes these win, which is what the comment above always meant. */
  .js-anim .ls-reveal-l, .js-anim .ls-reveal-r { transform: translateY(28px); }
  .js-anim .ls-reveal-l.ls-in, .js-anim .ls-reveal-r.ls-in { transform: translateY(0); }
}

/* ------------------------------------------------------------
   ≤820px — hover menus are unusable on touch, swap to the panel
   ------------------------------------------------------------ */
@media (max-width: 820px) {
  .ls-nav { display: none !important; }
  .ls-burger { display: block; }
  .ls-mega, .ls-drop { display: none !important; }

  .ls-util-promo { font-size: 11px; letter-spacing: .08em; padding: 9px 0; }
  .ls-util-spacer { display: none; }
  .ls-util-btn span:not(.ls-util-count) { display: none; }
  /* the account menu is hover-driven; on touch the icon links straight
     to Shopify's account page and the panel carries the rest */
  .ls-acct-menu { display: none !important; }
  .ls-util-btn { padding: 9px 8px; }
  .ls-util { padding-left: 14px !important; padding-right: 14px !important; }

  /* three- and four-across card grids go two-up */
  .ls-r-3, .ls-grid3 { grid-template-columns: repeat(2, 1fr) !important; }
  .ls-r-4, .ls-grid4 { grid-template-columns: repeat(2, 1fr) !important; }

  .ls-search { padding: 22px 20px !important; }
  .ls-search input { font-size: 19px !important; }
  .ls-search form { gap: 10px; }

  /* The "Wherever fire risk lives" plate is a 2:1 photograph in a 640px-tall
     box. Crop that to a phone and `cover` scales by HEIGHT, throwing away
     nearly 900px of width from the centre out — which put the bottle at 148%
     of the viewport, i.e. completely off screen, leaving a plate of nothing
     but a stove. Anchoring right keeps the product in frame. It only matters
     now that the plate is the boat still; the kitchen footage it replaced had
     no single subject to lose. */
  .ls-plate { object-position: 100% 50%; }

  /* Four proof figures will not sit in a row on a tablet, let alone a phone.
     Two-up, and the vertical rules become a grid so the seams stay even. */
  .ls-proof { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 0; max-width: 520px; }
  .ls-proof-i:nth-child(2n) { border-right: 0; }
  .ls-proof-sec { padding: 72px 24px; }
  /* Only the four FIGURES shrink. Scoped to .ls-proof so it stops catching
     the headline numeral, which sizes itself with a clamp. */
  .ls-proof .ls-huge { font-size: 62px !important; }
  .ls-proof-stars { font-size: 30px; letter-spacing: 6px; }
  .ls-proof-sub { font-size: 18px; }

  /* The closing panel stops being an overlay and becomes a stack.
     Overlaying works on desktop because the photograph is wide enough for
     the copy to sit in its dark half. Crop it to a phone and `cover` zooms
     straight onto the bottle, so the paragraph ends up printed across the
     label — unreadable, and no scrim fixes it without erasing the picture.
     Photo on top, copy underneath, both legible. The Ken Burns drift stays. */
  .ls-close { display: block; min-height: 0; padding: 0; }
  /* padding:0 is deliberate — the phone-width section rule puts 52px 20px on
     every section, which inset the photograph and opened a white band between
     it and the red block above. The copy block carries its own padding
     instead, so the picture runs edge to edge and butts straight onto the red.
     display:block on the image kills the inline baseline gap under it. */
  .ls-close-img { position: relative; display: block; width: 100%; height: 320px; object-position: 50% 62%; }
  .ls-close-scrim { display: none; }
  .ls-close-body { padding: 44px 24px 56px; max-width: none; background: #FAFAFA; }
  .ls-close-body .ls-h2 { font-size: 44px; }

}

/* ------------------------------------------------------------
   ≤600px — phone
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  section, .ls-wrap, .ls-crumb, .ls-foot, .ls-break, .ls-pdp {
    padding-left: 20px !important; padding-right: 20px !important;
  }
  section, .ls-wrap { padding-top: 52px !important; padding-bottom: 52px !important; }
  .ls-head-in { padding: 14px 20px !important; }

  /* The closing panel is exempt from the blanket section padding: it is a
     full-bleed photograph with its own padded copy block underneath, and the
     20px/52px was insetting the picture and opening a white band between it
     and the red proof block above. Needs !important to beat the rule above —
     .ls-close outranks the bare `section` selector, so order is irrelevant. */
  .ls-close { padding: 0 !important; }

  /* "10 fire types. One can." — on a phone this was a 56px numeral beside
     29px type and read as a footnote, when it is the single biggest claim on
     the page. The numeral takes a full flex row of its own (flex-basis:100%
     forces the wrap without touching the shared .ls-r-flex rule) and goes
     huge; the heading follows underneath at nearly half again its old size.
     Both classes appear exactly once on the site, so this cannot leak. */
  .ls-fs-172 {
    font-size: clamp(118px, 34vw, 200px) !important;
    line-height: 0.8 !important;
    flex: 0 0 100%;
    margin-bottom: -18px;
  }
  .ls-fs-60 { font-size: 42px !important; line-height: 0.98 !important; }

  /* single column everywhere, including the card grids */
  .ls-r-2, .ls-r-3, .ls-r-4,
  .ls-grid2, .ls-grid3, .ls-grid4, .ls-form .row {
    grid-template-columns: 1fr !important;
  }
  /* …except variant pickers, which read better as a row */
  .ls-variants { grid-template-columns: repeat(2, 1fr) !important; }

  .ls-foot-cols { grid-template-columns: 1fr !important; gap: 30px !important; }
  .ls-foot-btm { flex-direction: column; gap: 16px; text-align: center; }
  .ls-news, .ls-foot-tag { max-width: none !important; }

  .ls-marquee { padding: 22px 0 !important; }
  .ls-marquee-track > span { font-size: 22px !important; gap: 16px !important; padding-right: 16px !important; }
  .ls-marquee::before, .ls-marquee::after { width: 40px; }

  .ls-pdp-thumbs button { width: 62px; height: 62px; }
  .ls-acc summary { font-size: 17px; padding-right: 38px; }
  .ls-acc .body { padding-right: 0; font-size: 16px; }

  .ls-hero { padding: 46px 20px 44px !important; }
  .ls-count-bar { margin-top: 26px; }

  /* stat rows and trust strips wrap instead of squeezing */
  .ls-r-flex, .ls-trustrow, .ls-foot-btm { flex-wrap: wrap !important; }

  /* full-width CTAs are easier to hit */
  .ls-btn-red, .ls-atc { width: 100%; box-sizing: border-box; text-align: center; }
  .ls-head .ls-btn-red { width: auto; }
}

/* ------------------------------------------------------------
   Touch targets — WCAG 2.2 asks for 24px minimum
   ------------------------------------------------------------ */
@media (pointer: coarse) {
  .ls-util-btn, .ls-burger, .ls-drawer-x, .ls-variant, .ls-pdp-thumbs button { min-height: 44px; }
  .ls-foot a, .ls-mobnav-body a { min-height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .ls-mobnav { transition: none; }
}

/* ============================================================
   TOUCH TARGETS
   ------------------------------------------------------------
   Scoped to `pointer: coarse` so it applies to touch devices at
   ANY width (phones, tablets, touch laptops) and never changes
   the mouse-driven desktop layout. 44x44 is the iOS HIG / WCAG
   2.5.5 figure; WCAG 2.2 AA only asks 24x24, so this clears both.
   Audited on the homepage: 49 controls were under 44px, mostly
   footer links (29px tall) and icon buttons (32-38px wide).
   ============================================================ */
@media (pointer: coarse) {

  /* icon buttons in the utility bar: 32px wide -> 44 */
  .ls-util-btn { min-width: 44px; min-height: 44px; justify-content: center; }

  /* burger: 38 -> 44 */
  .ls-burger { width: 44px; height: 44px; }

  /* logo lockup was only 26px tall */
  .ls-head-in > a[aria-label] { display: inline-flex; align-items: center; min-height: 44px; }

  /* drawer / mobile-nav close buttons: 24px wide -> 44 */
  .ls-drawer-x { min-width: 44px; min-height: 44px; padding: 0 10px; }

  /* footer link lists: 29px tall -> 44, without changing the visual rhythm
     much (padding does the work, line-height stays) */
  .ls-foot a { padding: 12px 0; min-height: 44px; box-sizing: border-box;
               display: flex; align-items: center; }

  /* mobile-nav drawer links. An earlier rule pins these to the WCAG 2.2 AA
     floor of 24px, which with their 11px padding lands at 42 — just short.
     Raise to 44 so the whole drawer is comfortable one-thumb territory. */
  .ls-mobnav-body a { min-height: 44px; box-sizing: border-box;
                      display: flex; align-items: center; }
  .ls-mobnav-body .grp { min-height: 0; }   /* a label, not a control */

  /* social icons: 38 -> 44 */
  .ls-social a { width: 44px; height: 44px; }

  /* search suggestion chips were 18px tall */
  .ls-search .hint a { display: inline-flex; align-items: center; min-height: 44px; }

  /* forms: inputs and submit were 43px — one pixel short */
  .ls-form input, .ls-form select, .ls-form textarea,
  .ls-news input, .ls-news button, .ls-form button { min-height: 44px; }

  /* variant pickers and gallery thumbs need a comfortable hit area too */
  .ls-variant { min-height: 44px; }
  .ls-pdp-thumbs button { min-width: 44px; min-height: 44px; }

  /* standalone link lists — room to be full-size targets */
  .ls-usecross a, .ls-art-next a { display: inline-flex; align-items: center; min-height: 44px; }
  .ls-contact-list a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Breadcrumbs and the PDP trust row are inline runs of text. Boxing them to
     44px would double the height of those bars and wreck the layout, so they
     get the WCAG 2.2 AA floor (2.5.8 = 24x24) instead of the stricter AAA
     44x44 used for real controls. AA is met everywhere; AAA everywhere it
     does not cost the design. */
  .ls-crumb a, .ls-trustrow a,
  .ls-pdp-buy > div > a { display: inline-flex; align-items: center; min-height: 24px; }

  /* in-body article links sit in flowing prose and are explicitly exempt
     under WCAG 2.2 (inline in a sentence). Left alone deliberately. */
}