/* ============================================================
   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. */
  .ls-reveal-l, .ls-reveal-r { transform: translateY(28px); }
  .ls-reveal-l.ls-in, .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; }

}

/* ------------------------------------------------------------
   ≤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; }

  /* 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. */
}