/* ── sections/products.css — "Everything HVAC&R" ──────────────────────────────
   Right under the hero, with only a small gap. The title sits on the page ground;
   under it four navy strips run edge to edge (airdoot.com's four categories: Air-
   Conditioner, Refrigeration, Ventilation, Ancillary), each its ten machines as pixel
   icons: one line of ten on laptops and tablets, spread across the whole strip, and
   two lines of five on phones. Each icon is sized to its column (a container query
   on the list), so ten always fit without a sideways scroll.
   The icons are white with gold accents, and a seeded scatter of gold ones with
   white accents (canvases painted by products.js).
   A machine's name shows above its icon in tiny mono caps on hover and on keyboard
   focus. A click (or tap) on any machine opens the chooser at the end of this file. */

.s7pr-root {
  --ic-max: 90px;                               /* the icon's box at most; products.js fits whole device pixels per cell inside it */
  --pad: 7px;                                   /* room round an icon: the hover plate and the tap target */
  --cols: 10;                                   /* icons per line */
  --cat-w: clamp(124px, 10.4vw, 150px);         /* the row label column, kept narrow so the icons get the width */
  --in: max(var(--s7-gutter), (100% - 1600px) / 2);   /* the strips' side room: the page gutter, and a 1600px cap on very wide screens */
  --strip: var(--navy);
  --tab: #003160;                               /* the label end of a strip, a shade deeper than the strip */
  padding-block: clamp(20px, 3.2vh, 34px) 0;    /* no room under the board: it runs into the brain band (edge to edge too) */
  overflow-x: clip;                             /* the tab's left bleed and a long name near a phone's edge can never widen the page */
}
@media (max-width: 1440px) { .s7pr-root { --ic-max: 80px; } }

/* ── head: the title left, one line right, sharing a baseline to save height; lined up with the strips' contents ── */
.s7pr-root .s7pr-head {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 48px;
  padding-inline: var(--in); margin-bottom: clamp(18px, 2.2vw, 28px);
}
.s7pr-root .s7pr-head .s7-head { margin-bottom: 0; }
.s7pr-root .s7pr-note { margin: 0 0 4px; max-width: 38ch; font: 500 15px/1.55 var(--font); color: var(--muted); text-wrap: pretty; }

/* ── the strips: full width, 3px of page ground between them, and the same 3px hairline under the last one, where
   the brain band starts (inside the board, so it is data-tone="dark" and the header never flickers crossing it) ── */
.s7pr-root .s7pr-board { display: grid; gap: 3px; padding-bottom: 3px; }
.s7pr-root .s7pr-row {
  position: relative; display: grid; grid-template-columns: var(--cat-w) minmax(0, 1fr); align-items: center; column-gap: 18px;
  padding: 15px var(--in) 13px; background: var(--strip);   /* 15px on top: room for a name over the icon, inside its own strip */
}
/* the label end: a deeper navy block from the screen's left edge to just past the label */
.s7pr-root .s7pr-row::before {
  content: ""; position: absolute; inset-block: 0; left: 0; width: calc(var(--in) + var(--cat-w) + 9px);
  background: var(--tab); box-shadow: 1px 0 0 rgba(255, 255, 255, .07);
}
.s7pr-root .s7pr-cat { position: relative; margin: 0; }
.s7pr-root .s7pr-n { display: block; font: 400 clamp(19px, 1.5vw, 22px)/1.05 var(--display); letter-spacing: -.01em; color: #fff; white-space: nowrap; }

/* the list is the container its icons measure: a column is 1/--cols of it */
.s7pr-root .s7pr-list {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  container-type: inline-size;
}
.s7pr-root .s7pr-list li { display: flex; justify-content: center; min-width: 0; }

/* one machine: the link is the whole tap target; the plate behind the icon shows on hover.
   --ic: the column's width less the plate and a little air, never over --ic-max */
.s7pr-root .s7pr-it {
  --tx: -50%;
  --ic: min(var(--ic-max), 100cqw / var(--cols) - 2 * var(--pad) - 6px);
  position: relative; display: grid; place-items: center; width: calc(var(--ic) + 2 * var(--pad)); max-width: 100%; height: calc(var(--ic) + 2 * var(--pad));
  border-radius: 14px; text-decoration: none; color: #fff; -webkit-tap-highlight-color: transparent;
}
.s7pr-root .s7pr-it::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 255, 255, .08); opacity: 0; transition: opacity .2s ease; }
.s7pr-root .s7pr-box { position: relative; width: var(--ic); height: var(--ic); display: grid; place-items: center; transition: transform .35s var(--ease); }
.s7pr-root .s7pr-cv { display: block; width: var(--ic); height: var(--ic); }   /* products.js sets the exact size: whole device pixels per cell */

/* the name: tiny mono caps above the icon, with a one-cell pointer in the icons' own grammar;
   white with navy text on the strip, gold with navy text over a gold icon (navy on gold, never white) */
.s7pr-root .s7pr-tip {
  position: absolute; left: 50%; bottom: calc(100% - 3px); z-index: 3; transform: translate(var(--tx), 4px);
  padding: 5px 7px 4px; border-radius: 5px; background: #fff; color: var(--navy);
  font: 700 9.5px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 6px 14px -6px rgba(0, 20, 40, .55);
  opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .22s var(--ease);
}
.s7pr-root .s7pr-tip::after { content: ""; position: absolute; top: 100%; left: 50%; width: 4px; height: 4px; margin-left: -2px; background: inherit; }
.s7pr-root .s7pr-it.is-gold .s7pr-tip { background: var(--gold); color: var(--navy); }
/* the tenth name hangs inwards from its icon's right edge, so a long one ("Warehouse refrigeration") never runs off a
   1024 screen; the pointer stays over the icon's centre */
.s7pr-root .s7pr-list li:nth-child(10n) .s7pr-it { --tx: 0%; }
.s7pr-root .s7pr-list li:nth-child(10n) .s7pr-tip { left: auto; right: calc(50% - var(--ic) / 2); }
.s7pr-root .s7pr-list li:nth-child(10n) .s7pr-tip::after { left: auto; right: calc(var(--ic) / 2 - 2px); margin-left: 0; }

/* shown: a real hovering pointer, or keyboard focus */
@media (hover: hover) {
  .s7pr-root .s7pr-it:hover::before { opacity: 1; }
  .s7pr-root .s7pr-it:hover .s7pr-tip { opacity: 1; transform: translate(var(--tx), 0); }
  html.fx-motion .s7pr-root .s7pr-it:hover .s7pr-box { transform: translateY(-2px); }
}
.s7pr-root .s7pr-it:focus-visible::before { opacity: 1; }
.s7pr-root .s7pr-it:focus-visible .s7pr-tip { opacity: 1; transform: translate(var(--tx), 0); }
.s7pr-root .s7pr-it:focus-visible { outline-offset: 0; }   /* the site's gold ring, drawn on the plate's own edge */
html.fx-reduce .s7pr-root :is(.s7pr-tip, .s7pr-box, .s7pr-cat), html.fx-reduce .s7pr-root .s7pr-it::before { transition: none; }

/* ── widths ── */
@media (max-width: 1200px) { .s7pr-root { --pad: 6px; } .s7pr-root .s7pr-row { column-gap: 14px; } }
@media (max-width: 900px) {
  /* the label moves above its icons; the whole strip is one navy */
  .s7pr-root .s7pr-row { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding-block: 13px 9px; }
  .s7pr-root .s7pr-row::before { display: none; }
  .s7pr-root .s7pr-n { font-size: 21px; }
  /* the first name hangs inwards too, now its icon is at the screen's edge */
  .s7pr-root .s7pr-list li:nth-child(10n + 1) .s7pr-it { --tx: 0%; }
  .s7pr-root .s7pr-list li:nth-child(10n + 1) .s7pr-tip { left: calc(50% - var(--ic) / 2); }
  .s7pr-root .s7pr-list li:nth-child(10n + 1) .s7pr-tip::after { left: calc(var(--ic) / 2); }
  /* a name shows just above its icon, over the row's own label: the label fades while it does (it comes back after
     a short pause, so moving the pointer from one icon to the next doesn't make it flicker) */
  .s7pr-root .s7pr-cat { transition: opacity .2s ease .18s; }
  .s7pr-root .s7pr-row:has(.s7pr-it:focus-visible) .s7pr-cat { opacity: .16; transition-delay: 0s; }
}
@media (max-width: 900px) and (hover: hover) {
  .s7pr-root .s7pr-row:has(.s7pr-it:hover) .s7pr-cat { opacity: .16; transition-delay: 0s; }
}
@media (max-width: 700px) {
  /* two lines of five: a fifth of the strip less a little air, and never over 56px */
  .s7pr-root { --cols: 5; --ic-max: 56px; --pad: 3px; }
  .s7pr-root .s7pr-head { gap: 10px; }
  .s7pr-root .s7pr-note { font-size: 14px; }
  .s7pr-root .s7pr-board { gap: 2px; padding-bottom: 2px; }
  .s7pr-root .s7pr-row { row-gap: 6px; padding-block: 12px 10px; }
  .s7pr-root .s7pr-list { row-gap: 4px; }
  .s7pr-root .s7pr-n { font-size: 19px; }
  .s7pr-root .s7pr-it { border-radius: 10px; }
  /* the outer names of each line hang inwards from their icon's edge, so a long one never runs off the screen */
  .s7pr-root .s7pr-list li:is(:nth-child(5n + 1), :nth-child(5n)) .s7pr-it { --tx: 0%; }
  .s7pr-root .s7pr-list li:nth-child(5n + 1) .s7pr-tip { left: calc(50% - var(--ic) / 2); right: auto; }
  .s7pr-root .s7pr-list li:nth-child(5n + 1) .s7pr-tip::after { left: calc(var(--ic) / 2); right: auto; margin-left: -2px; }
  .s7pr-root .s7pr-list li:nth-child(5n) .s7pr-tip { left: auto; right: calc(50% - var(--ic) / 2); }
  .s7pr-root .s7pr-list li:nth-child(5n) .s7pr-tip::after { left: auto; right: calc(var(--ic) / 2 - 2px); margin-left: 0; }
  /* a name over the first line covers the label; one over the second line doesn't, so only the first fades it */
  .s7pr-root .s7pr-row:has(li:nth-child(n + 6) .s7pr-it:focus-visible) .s7pr-cat { opacity: 1; }
}
@media (max-width: 700px) and (hover: hover) {
  .s7pr-root .s7pr-row:has(li:nth-child(n + 6) .s7pr-it:hover) .s7pr-cat { opacity: 1; }
}

/* ── the chooser: "Who are you?" ────────────────────────────────────────────────
   Opened by products.js over the page with the booking's small dialog (assets/js/checkout.js dialog(): a solid white
   card, centred on a laptop and a bottom sheet on a phone, its heading takes focus, Tab stays inside, Escape and a
   tap outside close it, focus goes back to the machine). It sits outside the section, so every rule is .s7pr-who.
   The machine as it looks on the board (its pixel icon on a navy tile) and its name head it; then the two doors of
   the hero, Residential (white) and Commercial (navy), big; then the other audiences as small chips, each with a dot
   in its feature colour (theme.css data-f). A second screen, for a machine the booking can't price at a home, offers
   WhatsApp, a call or an email with the machine already named. */
.s7pr-who .ck-dlg-h { margin-top: 0; font-size: 27px; }
.s7pr-who .ck-dlg-h:is(:focus, :focus-visible) { outline: none !important; }   /* it takes focus for screen readers only (as the flows' headings do) */
.s7pr-who-k { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.s7pr-who-px { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; background: var(--navy); }
.s7pr-who-px canvas { display: block; }
.s7pr-who-m { display: grid; gap: 4px; min-width: 0; }
.s7pr-who-m b { font: 700 13px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--navy); }
.s7pr-who-m small { font: 700 10.5px/1 var(--font); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink); }
.s7pr-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the two doors */
.s7pr-who-big { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.s7pr-who-door {
  display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 10px 10px 10px 12px; border-radius: 18px; border: 1.5px solid var(--mist);
  background: #fff; color: var(--navy); text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s ease, border-color .2s ease;
}
.s7pr-who-door.com { background: var(--navy); border-color: var(--navy); color: #fff; }
.s7pr-who-door .gi { --s: 42px; }
.s7pr-who-t { flex: 1; display: grid; gap: 3px; min-width: 0; }
.s7pr-who-t b { font: 700 16.5px/1.2 var(--font); letter-spacing: -.005em; }
.s7pr-who-t small { font: 500 13px/1.35 var(--font); color: var(--muted); }
.s7pr-who-door.com .s7pr-who-t small { color: var(--mist); }
.s7pr-who-arr { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: #fff; transition: transform .2s var(--ease); }
.s7pr-who-door.com .s7pr-who-arr { background: var(--gold); color: var(--navy); }
.s7pr-who-arr svg { width: 16px; height: 16px; }
@media (hover: hover) {
  .s7pr-who-door:hover { transform: translateY(-2px); }
  .s7pr-who-door.res:hover { border-color: var(--slate); box-shadow: 0 16px 34px -18px rgba(0, 57, 108, .45); }
  .s7pr-who-door.com:hover { box-shadow: 0 16px 34px -16px rgba(0, 57, 108, .75); }
  .s7pr-who-door:hover .s7pr-who-arr { transform: translateX(3px); }
}

/* the others */
.s7pr-who-or { margin: 20px 0 10px; font: 700 10.5px/1 var(--font); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.s7pr-who-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.s7pr-who-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 15px 0 13px; border-radius: 999px; border: 1.5px solid var(--f7-edge, #D5DEE8);
  background: #fff; color: var(--navy); font: 600 14px/1.2 var(--font); text-decoration: none; transition: border-color .15s ease, background-color .15s ease;
}
.s7pr-who-chip i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--navy)); }
@media (hover: hover) { .s7pr-who-chip:hover { border-color: var(--c, var(--navy)); background: var(--ct, var(--grey)); } }

/* the second screen: a home machine the booking doesn't price */
.s7pr-who .ck-dlg-line { max-width: 44ch; }
.s7pr-who-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.s7pr-who-btn {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 999px;
  border: 1.5px solid var(--mist); background: #fff; color: var(--navy); font: 700 15px/1.2 var(--font); text-decoration: none; cursor: pointer;
}
.s7pr-who-btn.gold { flex-basis: 100%; border-color: var(--gold); background: var(--gold); color: var(--navy); }   /* navy on gold, a row of its own */
.s7pr-who-btn svg { flex: none; }
@media (hover: hover) { .s7pr-who-btn:hover { border-color: var(--navy); } .s7pr-who-btn.gold:hover { background: var(--gold-60); border-color: var(--gold-60); } }
/* a housing society: the business enquiry fits it (a hairline sets it apart from the three ways to reach us) */
.s7pr-who-soc { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font: 500 14px/1.45 var(--font); color: var(--muted); }
.s7pr-who-soc a { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.s7pr-who-soc a svg { flex: none; }
.s7pr-who-back {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 6px 2px; border: 0; background: none; cursor: pointer;
  font: 600 14px/1.2 var(--font); color: var(--navy); text-decoration: underline; text-underline-offset: 3px;
}

/* focus: a navy ring (the site's gold ring is under 2:1 on white) */
.s7pr-who :is(.s7pr-who-door, .s7pr-who-chip, .s7pr-who-btn, .s7pr-who-back, .s7pr-who-soc a):focus-visible { outline: 3px solid var(--navy) !important; outline-offset: 3px; }
.s7pr-who .s7pr-who-door.com:focus-visible { outline-color: var(--gold) !important; box-shadow: 0 0 0 3px var(--navy); }   /* gold on the navy door, with a navy edge outside it */
html.fx-reduce .s7pr-who :is(.s7pr-who-door, .s7pr-who-arr, .s7pr-who-chip) { transition: none; }

@media (max-width: 720px) {
  .s7pr-who .ck-dlg-h { font-size: 24px; }
  .s7pr-who-big { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 14px; }
  .s7pr-who-door { min-height: 66px; }
  .s7pr-who-or { margin-top: 16px; }
  .s7pr-who-chip { min-height: 42px; }
}