/* ---------------------------------------------------------------
   SKR — responsive layer.

   The pages were exported from the design tool at desktop width with
   fixed pixel sizes and no breakpoints. This file re-flows that same
   markup for tablets and phones. LAYOUT ONLY — no copy, no images,
   no structure. Inline styles win on specificity, hence !important.

   The page framework rewrites inline styles into its own spelling
   ("repeat(4, 1fr)", "minmax(0px, 1fr)"), so selectors below match
   both the authored and the rendered form.
   --------------------------------------------------------------- */


/* =============================================================
   STICKY HEADER — all widths
   Each imported component is wrapped by the framework in its own
   box, and that box is only as tall as the header itself.
   position:sticky cannot escape its parent, so the bar scrolled
   away at every width — desktop included — and the phone menu
   button was left floating over the page content.
   display:contents drops the wrapper's box without touching markup.
   Browsers without :has keep the previous, non-sticky behaviour.
   ============================================================= */

div.sc-host:has(> header) { display: contents !important; }


/* =============================================================
   COMPACT HEADER + DRAWER  up to 1024px
   The exported navigation needs about 1100px to sit on one line.
   Below that it wrapped onto three rows — a 307px tall bar on a
   tablet — so everything moves into a drawer instead.
   ============================================================= */

@media (max-width: 1024px) {

  header > div[style*="max-width:1240px"],
  header > div[style*="max-width: 1240px"] {
    height: 60px !important;
    min-height: 0 !important;
    padding: 0 16px !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  header img, header svg {
    height: 34px !important;
    max-height: 34px !important;
    width: auto !important;
  }

  /* The links, phone number and Get a Quote are not dropped —
     they all reappear inside the drawer. */
  header nav { display: none !important; }
  header > div > div { display: none !important; }
  header a[href^="tel:"] { display: none !important; }
  header a[href*="contact"] { display: none !important; }
  header .skr-desk-cta { display: none !important; }

  .skr-burger {
    display: inline-flex !important;
    position: fixed !important;
    top: 8px !important; right: 12px !important;
    z-index: 2001;
  }

  .skr-mobnav {
    display: none;
    position: fixed; inset: 0 0 0 auto; width: min(86vw, 360px); z-index: 2000;
    background: #fff; box-shadow: -14px 0 40px rgba(11,47,82,.22);
    padding: 18px 20px calc(28px + env(safe-area-inset-bottom)); overflow-y: auto;
  }
  .skr-mobnav.on { display: block; }
  .skr-mobnav a {
    display: flex; align-items: center; min-height: 44px;
    padding: 8px 4px; font-size: 16px; color: #14171A;
    text-decoration: none; border-bottom: 1px solid #E3E7E9;
  }
  .skr-mobnav a.sub { padding-left: 16px; font-size: 15px; color: #4A5157; }
  .skr-mobnav .grp {
    font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: #8B9297; margin: 18px 0 4px;
  }
  .skr-mobnav .cta {
    display: block; margin-top: 20px; background: #E8730C; color: #fff; text-align: center;
    font-weight: 700; border-radius: 6px; padding: 14px; border-bottom: 0;
  }
  .skr-mobnav .tel { font-weight: 700; color: #15558F; }
  .skr-scrim { display: none; position: fixed; inset: 0; background: rgba(11,47,82,.45); z-index: 1999; }
  .skr-scrim.on { display: block; }

  /* Anchor jumps should not land underneath the sticky bar. */
  html { scroll-padding-top: 72px !important; }
}


/* =============================================================
   TABLET  768–1024px
   Wide grids halve instead of collapsing, so the space is used.
   ============================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

  html { overflow-x: clip !important; }
  img, svg, iframe { max-width: 100% !important; }

  h1 { font-size: clamp(34px, 4.6vw, 40px) !important; line-height: 1.12 !important; }
  h2 { font-size: clamp(25px, 3.4vw, 30px) !important; line-height: 1.18 !important; }

  div[style*="max-width:1240px"],
  div[style*="max-width: 1240px"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  [style*="repeat(3,minmax(0,1fr))"], [style*="repeat(3, minmax(0, 1fr))"], [style*="repeat(3, minmax(0px, 1fr))"],
  [style*="repeat(4,minmax(0,1fr))"], [style*="repeat(4, minmax(0, 1fr))"], [style*="repeat(4, minmax(0px, 1fr))"],
  [style*="repeat(3,1fr)"], [style*="repeat(3, 1fr)"],
  [style*="repeat(4,1fr)"], [style*="repeat(4, 1fr)"],
  [style*="repeat(5,1fr)"], [style*="repeat(5, 1fr)"],
  [style*="repeat(7,minmax(0,1fr))"], [style*="repeat(7, minmax(0px, 1fr))"],
  [style*="repeat(7,1fr)"], [style*="repeat(7, 1fr)"],
  [style*="1.4fr 1fr 1fr 1fr"] {           /* footer columns */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Fixed side rails stack rather than squeeze the main column. */
  [style*="minmax(0,1fr) 420px"], [style*="minmax(0px, 1fr) 420px"],
  [style*="minmax(0,1fr) 460px"], [style*="minmax(0px, 1fr) 460px"],
  [style*="380px minmax(0,1fr)"], [style*="380px minmax(0px, 1fr)"],
  [style*="220px minmax(0,1fr)"], [style*="220px minmax(0px, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  .skr-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}


/* =============================================================
   PHONE  up to 767px
   ============================================================= */

@media (max-width: 767px) {

  /* "clip" rather than "hidden": hidden makes body a scrolling box,
     which stops the sticky header from sticking to the viewport. */
  html { overflow-x: clip !important; }
  body { overflow-x: visible !important; }

  img, svg, iframe { max-width: 100% !important; }

  header > div[style*="max-width:1240px"],
  header > div[style*="max-width: 1240px"] { height: 56px !important; padding: 0 14px !important; }
  header img, header svg { height: 32px !important; max-height: 32px !important; }
  .skr-burger { top: 6px !important; right: 10px !important; }
  html { scroll-padding-top: 68px !important; }


  /* --- Typography -------------------------------------------
     Headings scale with the viewport; nothing below 12px; body
     copy sits at one comfortable size. */
  h1 { font-size: clamp(27px, 7.4vw, 32px) !important; line-height: 1.15 !important; }
  h2 { font-size: clamp(20px, 5.4vw, 25px) !important; line-height: 1.22 !important; }
  h3 { font-size: 17.5px !important; line-height: 1.3 !important; }

  section p[style*="font-size:18px"],
  section p[style*="font-size: 18px"],
  section p[style*="font-size:17px"],
  section p[style*="font-size: 17px"],
  section p[style*="font-size:16.5px"],
  section p[style*="font-size: 16.5px"] { font-size: 15.5px !important; line-height: 1.62 !important; }

  /* Floors for the smallest type in the export. */
  [style*="font-size:10px"],   [style*="font-size: 10px"],
  [style*="font-size:11px"],   [style*="font-size: 11px"],
  [style*="font-size:11.5px"], [style*="font-size: 11.5px"] { font-size: 12px !important; }
  [style*="font-size:13px"],   [style*="font-size: 13px"],
  [style*="font-size:13.5px"], [style*="font-size: 13.5px"] { font-size: 14px !important; }

  /* iOS zooms the whole page when a focused field is under 16px. */
  input, select, textarea, button { font-size: 16px !important; }


  /* --- Rhythm ------------------------------------------------ */
  div[style*="max-width:1240px"],
  div[style*="max-width: 1240px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  form[style*="padding:36px"], form[style*="padding: 36px"] { padding: 20px 16px !important; }


  /* --- Grids -------------------------------------------------
     Everything collapses to one column, except photo galleries. */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* A wide flex row carrying a desktop-sized gap wraps into a ragged
     stack on a phone. Two even columns read as a proper strip.
     Both spellings are matched — the framework renders "display: flex"
     with a space, so the unspaced selector alone never applied. */
  div[style*="display:flex"][style*="gap:48px"],
  div[style*="display: flex"][style*="gap: 48px"],
  div[style*="display:flex"][style*="gap:64px"],
  div[style*="display: flex"][style*="gap: 64px"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 16px !important;
  }

  [style*="grid-template-columns:200px"] > div[role="img"],
  [style*="grid-template-columns: 200px"] > div[role="img"],
  [style*="grid-template-columns:220px"] > div[role="img"],
  [style*="grid-template-columns: 220px"] > div[role="img"] { min-height: 220px !important; }

  section div, section p, section h1, section h2, section h3 { max-width: 100% !important; }
  [style*="width:760px"], [style*="width: 760px"],
  [style*="width:420px"], [style*="width: 420px"] { width: auto !important; }

  /* Wide tables already sit in an overflow-x:auto container with a
     min-width, so they scroll inside their own box. */
  div[style*="overflow-x:auto"], div[style*="overflow-x: auto"] {
    -webkit-overflow-scrolling: touch;
  }

  /* Photo galleries are the one grid that should not collapse to a
     single column — two across keeps the page a sensible length. */
  .skr-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }
}


/* The burger exists only below the desktop breakpoint. */
.skr-burger {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid #E3E7E9; border-radius: 8px;
  background: #fff; cursor: pointer; flex: none;
}
.skr-burger span { position: relative; width: 20px; height: 2px; background: #14171A; display: block; }
.skr-burger span::before, .skr-burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: #14171A;
}
.skr-burger span::before { top: -6px; }
.skr-burger span::after  { top: 6px; }

/* =============================================================
   PHOTO TILES — stop the cropping
   The exported tiles carry fixed desktop aspect ratios: a tall 3/4
   box beside a column of text. On a phone that box goes full width
   but stays portrait, so a 3:2 landscape photograph loses half its
   frame — measured at 50% on four product pages, 58% on RABH and
   51% on a portrait staff photograph.

   Below the desktop breakpoint every tile is single-column, so the
   tiles can simply take the shape of the picture inside them. The
   general rule assumes landscape; the exceptions below name the
   images whose own shape differs, and come afterwards so they win
   on source order at equal specificity.
   ============================================================= */

@media (max-width: 1024px) {

  [role="img"][style*="aspect-ratio"]:not(.skr-gallery *) {
    aspect-ratio: 3 / 2 !important;
  }

  /* 16:9 sources */
  [role="img"][style*="rabh.jpg"]:not(.skr-gallery *),
  [role="img"][style*="product/n.jpg"]:not(.skr-gallery *) {
    aspect-ratio: 16 / 9 !important;
  }

  /* 4:3 sources */
  [role="img"][style*="rajat-parikh.jpg"]:not(.skr-gallery *),
  [role="img"][style*="skr-plant-4x3.jpg"]:not(.skr-gallery *) {
    aspect-ratio: 4 / 3 !important;
  }

  /* portrait sources */
  [role="img"][style*="jaiv-parikh.jpg"]:not(.skr-gallery *) {
    aspect-ratio: 3 / 4 !important;
  }
}


/* =============================================================
   GALLERY TILES — show the whole product
   Gallery tiles are a uniform grid, so they cannot take the shape
   of each picture. "contain" on a neutral ground shows every item
   whole instead of cropping the tallest cages by a quarter. This
   applies at every width — the cropping was never desktop-only.
   ============================================================= */

.skr-gallery [role="img"] {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-color: #F5F7F8 !important;
  border: 1px solid #E3E7E9;
}

/* =============================================================
   PRODUCT PHOTOGRAPHS — single-column widths only
   These rules give each side-rail photograph the shape of the
   picture inside it, which is what the single-column layout wants.

   They must NOT run at desktop width. The product pages now put the
   photograph in a fixed 420px grid column and stretch it to the
   height of the specification table beside it. An aspect-ratio on
   top of that min-height makes the browser solve for width instead:
   430px tall x 3/2 came out 645px wide in a 420px column, so the
   photograph hung 225px past the column and pushed a horizontal
   overflow onto the page — Jaiv's "gap on the right side on laptop
   view", and the reason the four product pages looked misaligned.
   ============================================================= */

@media (max-width: 1024px) {
  /* The inline min-height is there for the desktop two-column layout. Left in
     place here it fights the aspect-ratio the same way: the browser solves for
     width instead, so a 380px-tall 3/2 box came out 570px wide on a 375px
     phone and pushed the whole page sideways. Clearing it lets each photograph
     be the width of the column and take its own height. */
  [role="img"][style*="product/fb.jpg"]:not(.skr-gallery *),
  [role="img"][style*="product/fb1.jpg"]:not(.skr-gallery *),
  [role="img"][style*="product/fc.jpg"]:not(.skr-gallery *),
  [role="img"][style*="product/fct1.jpg"]:not(.skr-gallery *),
  [role="img"][style*="product/rabh.jpg"]:not(.skr-gallery *),
  [role="img"][style*="product/n.jpg"]:not(.skr-gallery *) {
    min-height: 0 !important;
    width: auto !important;
    max-width: 100% !important;
  }
  [role="img"][style*="product/fb.jpg"]:not(.skr-gallery *),
  [role="img"][style*="product/fb1.jpg"]:not(.skr-gallery *),
  [role="img"][style*="product/fc.jpg"]:not(.skr-gallery *),
  [role="img"][style*="product/fct1.jpg"]:not(.skr-gallery *) {
    aspect-ratio: 3 / 2 !important;
  }
  [role="img"][style*="product/rabh.jpg"]:not(.skr-gallery *),
  [role="img"][style*="product/n.jpg"]:not(.skr-gallery *) {
    aspect-ratio: 16 / 9 !important;
  }
}