/* Products — page-specific CSS.
   Shared pieces (tokens, reset, buttons, page hero, .sec-intro, jump pills, .chk, CTA, footer)
   are in shell.css. Ported verbatim from the approved design, products.html.

   This is a CATALOGUE, not a shop: no prices, no cart, no filters. Every conversion path is an
   enquiry, which is why there is no price row in .speclist and the CTA asks for a stock check. */

/* ---------- OVERRIDES OF SHELL DEFAULTS ---------- */
/* Three values shell.css carries from About/the homepage that Products genuinely differs on.
   Caught by tools/csscheck.py — comparing selector names alone hides all three. */
.page-hero-bg img{object-position:center 58%}
.checks{gap:12px 26px;margin-top:2px}
.chk .pt svg{width:18px;height:18px}

/* ---------- INTRO ---------- */
/* the design set this inline as style="background:var(--bg-gray)" */
.products-intro{background:var(--bg-gray)}
.sec-intro + .sec-intro{margin-top:14px}
/* the intro links out to Services; the shared .sec-intro has no link styling */
.sec-intro a{color:var(--blue);font-weight:600}
.sec-intro a:hover{text-decoration:underline}

/* Products splits the pill frame into two labelled groups with a divider between them,
   where Services uses one plain centred box. The pills are shared; this frame is not. */
.jump-frame{
  max-width:940px;margin:32px auto 0;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);
  padding:24px 26px;position:relative;overflow:hidden;
  display:flex;justify-content:center;align-items:stretch;
}
.jump-group{padding:0 30px;display:flex;flex-direction:column;align-items:center}
.jump-group + .jump-group{border-left:1px solid var(--line)}
.jump-label{
  font-family:'Poppins';font-weight:600;font-size:12px;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--navy);margin-bottom:13px;
}

/* ---------- PRODUCT ROWS ---------- */
/* One continuous band, unlike the Services page: every row carries the SAME grey background
   and a 1px top rule separates them, so the four read as a single container rather than four
   alternating stripes. The left/right image flip is what carries the rhythm instead. */
.prod-row{background:var(--bg-gray);padding:50px 0;scroll-margin-top:118px;border-top:1px solid var(--line)}
.prod-row .inner{display:grid;grid-template-columns:1fr 1.12fr;gap:54px;align-items:start}
.prod-row.rev .inner{grid-template-columns:1.12fr 1fr}
.prod-row.rev .prod-col{order:2}

.prod-media{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);background:#fff;transition:.25s;
}
.prod-media:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}
/* contain, not cover: the client's product shots are mixed aspect (16:9, 4:3 and 1.09:1), so
   cropping them all to 4:3 would trim the edges off the odd ones. Letterboxing on white is
   the lesser evil for a product photo. */
.prod-media img{width:100%;aspect-ratio:4/3;object-fit:contain}

.tagrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Poppins';font-weight:700;font-size:12px;letter-spacing:1.1px;text-transform:uppercase;
  background:var(--bg-blue);color:var(--brand);border:1px solid #cfe0ef;
  border-radius:100px;padding:6px 15px;
}
.chip.pub{background:var(--blue);color:#fff;border-color:var(--blue)}
.chip svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* left-aligned twin of the .sec-title.under rule */
.prod-body h2{font-size:29px;font-weight:700;line-height:1.24;position:relative;padding-bottom:18px;margin-bottom:20px}
.prod-body h2::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:3px;background:var(--blue)}
.prod-body p{color:var(--slate);font-size:15px;margin-bottom:14px}

.subhead{
  font-family:'Poppins';font-weight:600;font-size:12.5px;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--navy);margin:24px 0 12px;
}

/* An Icon List, not a real <table>: a table means a Text Editor or custom HTML widget in
   Elementor, which is fiddly to maintain. The label's fixed width is what aligns the values. */
.speclist{margin-top:4px;border-top:1px solid var(--line)}
.speclist li{list-style:none;padding:9px 2px;border-bottom:1px solid var(--line);font-size:14px;color:var(--slate)}
.speclist b{
  display:inline-block;width:158px;font-family:'Poppins';font-weight:600;font-size:12px;
  letter-spacing:.7px;text-transform:uppercase;color:var(--navy);
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1024px){
  .prod-row .inner,.prod-row.rev .inner{grid-template-columns:1fr;gap:38px}
  /* display:contents dissolves .prod-col so its two children can be ordered independently of
     the body. Stacked, the natural DOM order would read image -> specs -> product name, which
     puts a spec table above the thing it describes; this gives image -> name+copy -> specs. */
  .prod-col{display:contents}
  .prod-media{order:1}
  .prod-body{order:2}
  .spec-block{order:3}
  .spec-block .subhead{margin-top:0}
}
@media(max-width:900px){
  /* below this width the two groups no longer fit either side of the divider, so they stack
     and the divider becomes a top border on the second group */
  .jump-frame{flex-direction:column;gap:20px}
  .jump-group{padding:0}
  .jump-group + .jump-group{border-left:0;border-top:1px solid var(--line);padding-top:20px}
}
@media(max-width:680px){
  .prod-row{padding:38px 0}
  .prod-body h2{font-size:24px}
  /* the 158px label column has nowhere to go on a phone, so label and value stack */
  .speclist b{width:auto;display:block;margin-bottom:1px}
  .jump-frame{padding:20px 16px;margin-top:26px}
}