/* ============================================================
   PARAS EXPORTS — V7
   One job: photographs are shown at their own proportions.
   The frame follows the photo. Never the other way round.
   Loaded after site-v5.css; supersedes .product-media-* entirely.
   ============================================================ */

:root{
  --v7-ink:#171b1f;
  --v7-text:#343b43;
  --v7-muted:#69737d;
  --v7-red:#b3221e;
  --v7-line:#e1e5e8;
  --v7-stage:#f4f5f3;
  --v7-wa:#1da851;
  --v7-wa-bright:#25d366;
}

/* kill the old fixed-height boxes so nothing fights the new stage */
.product-media-section{display:none!important;}

/* ── section frame ───────────────────────────────────────── */
.plate-section{background:#fff;border-bottom:1px solid var(--v7-line);padding:56px 0 64px;}
.plate-section .wrap{max-width:1180px;}
.plate-head{max-width:640px;margin:0 0 26px;}
.plate-head h2{
  font-size:clamp(26px,2.6vw,35px);line-height:1.14;letter-spacing:-.025em;
  font-weight:700;margin:0;color:var(--v7-ink);
}

/* ── the stage: aspect ratio comes from the photo itself ──── */
.plate{margin:0;}
.plate-stage{
  background:var(--v7-stage);
  border:1px solid var(--v7-line);
  border-radius:10px;
  overflow:hidden;
  aspect-ratio:var(--ar);          /* ← the whole fix */
}
.plate-stage img{
  width:100%;height:100%;
  object-fit:cover;                /* ratio matches, so nothing is cropped */
  object-position:center;
  display:block;
}
.plate figcaption{
  display:flex;align-items:baseline;gap:10px;
  padding:12px 2px 0;
  font-size:14px;line-height:1.45;color:var(--v7-muted);
}
.plate-no{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px;font-weight:500;letter-spacing:.1em;
  color:var(--v7-red);flex:none;
  padding-top:2px;
}

/* ── three layout modes, chosen at build time ─────────────── */
.plate-grid{display:grid;gap:22px 26px;align-items:start;}

/* WIDE — landscape machine shot. Let it run the full measure. */
.plate-wide{grid-template-columns:1fr;}
.plate-wide .plate-primary{max-width:1000px;}
.plate-wide .plate-secondary{max-width:420px;}

/* SQUARE — near-1:1. Dominant left, detail right. */
.plate-square{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);}

/* TALL — portrait shot. Narrow column so it doesn't tower. */
.plate-tall{grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);}
.plate-tall .plate-primary{max-width:460px;}

@media(max-width:820px){
  .plate-square,.plate-tall{grid-template-columns:1fr;}
  .plate-tall .plate-primary,.plate-wide .plate-secondary{max-width:100%;}
  .plate-section{padding:42px 0 48px;}
}

/* ── no-photo pages: a lead, not a gap ────────────────────── */
.plate-none{background:#fafaf8;}
.plate-ask{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:22px;padding:30px 32px;
  background:#fff;border:1px solid var(--v7-line);
  border-left:4px solid var(--v7-red);border-radius:10px;
}
.plate-ask h2{font-size:clamp(21px,2.1vw,27px);margin:0 0 8px;letter-spacing:-.02em;}
.plate-ask p:not(.eyebrow){margin:0;color:var(--v7-muted);font-size:15.5px;max-width:60ch;}

/* ── WhatsApp button ─────────────────────────────────────── */
.btn-wa{
  display:inline-flex;align-items:center;gap:9px;flex:none;
  background:var(--v7-wa-bright);color:#0b2e17;
  font-weight:600;font-size:15px;padding:13px 20px;
  border-radius:6px;text-decoration:none;
  transition:background .15s,color .15s;
}
.btn-wa svg{width:19px;height:19px;flex:none;}
.btn-wa:hover{background:var(--v7-wa);color:#fff;}

/* ── footer social row ───────────────────────────────────── */
.footer-social{margin-top:6px;}
.footer-social h4{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--v7-muted);margin:0 0 12px;
}
.social-row{display:flex;gap:9px;}
.social-row a{
  display:grid;place-items:center;width:42px;height:42px;
  border:1px solid var(--v7-line);border-radius:6px;color:var(--v7-text);
  transition:background .15s,border-color .15s,color .15s;
}
.social-row a svg{width:19px;height:19px;}
.social-row a:hover{background:var(--v7-red);border-color:var(--v7-red);color:#fff;}

/* ── sticky mobile action bar ────────────────────────────── */
.actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:75;
  background:#fff;border-top:1px solid var(--v7-line);
  display:none;grid-template-columns:1fr 1fr 1fr;
  box-shadow:0 -2px 14px rgba(20,26,31,.08);
}
.actionbar a{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:9px 6px 10px;text-decoration:none;color:var(--v7-ink);
  font-size:11.5px;font-weight:600;border-right:1px solid var(--v7-line);
}
.actionbar a:last-child{border-right:0;}
.actionbar a svg{width:20px;height:20px;}
.actionbar .ab-wa{color:var(--v7-wa);}
.actionbar .ab-call{color:var(--v7-red);}
@media(max-width:820px){
  .actionbar{display:grid;}
  body{padding-bottom:62px;}
  .whatsapp-float{bottom:74px!important;}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}

/* SOLO — a single photograph, paired with an enquiry prompt. */
.plate-solo{grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);}
.plate-solo .plate-primary{max-width:760px;}
.plate-solo-ask{
  align-self:center;padding:26px 26px 28px;
  background:#fafaf8;border:1px solid var(--v7-line);
  border-left:4px solid var(--v7-red);border-radius:10px;
}
.plate-solo-ask p:not(.eyebrow){color:var(--v7-muted);font-size:15px;margin:0 0 18px;}
@media(max-width:820px){.plate-solo{grid-template-columns:1fr;}}

/* WIDE — primary runs the full measure; the detail shot pairs with a note below. */
.plate-wide .plate-lead{grid-column:1/-1;}
.plate-wide .plate-row{
  grid-column:1/-1;display:grid;gap:26px;
  grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);align-items:center;
}
.plate-wide .plate-row .plate-secondary{max-width:100%;}
@media(max-width:820px){.plate-wide .plate-row{grid-template-columns:1fr;}}

/* ============================================================
   V8 — audit remediation (contrast, spacing, scroll traps)
   ============================================================ */

/* 16 — the footer wordmark was #111820 on #141a1f: 1.02:1, invisible.
   The header keeps the dark lockup; the footer inverts it. */
.site-footer .logo,
footer .logo,
.site-footer .shared-brand{color:#ffffff!important;}
.site-footer .logo span,
footer .logo span,
.site-footer .shared-brand span{color:#ff6b62!important;}

/* 17 — footer social icons were #343b43 on #141a1f: 1.55:1.
   WCAG wants 3:1 for meaningful icons; this lands at 7.2:1. */
.site-footer .social-row a,
footer .social-row a{color:#c9ced4!important;border-color:#39434b!important;}
.site-footer .social-row a:hover,
footer .social-row a:hover{background:#b3221e!important;border-color:#b3221e!important;color:#fff!important;}
.site-footer .footer-social h4,
footer .footer-social h4{color:#98a2ab!important;}

/* 18 — chip spans ran together: "AllmodelsS3 sizes" */
.sp{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;}
.sp .n{display:block;}
.sp .u{display:block;}
.sp .k{display:block;margin-top:3px;}
.sp .n + .u{margin-left:0;}

/* 19 — filtered-out tiers */
[data-ft][hidden]{display:none!important;}
.sp[aria-pressed="true"]{border-color:#b3221e!important;box-shadow:inset 0 0 0 1px #b3221e;}

/* 20 — .tbl-scroll had overflow:auto on both axes, giving a 10px inner
   vertical scrollbar and a mouse-wheel trap inside every spec table. */
.tbl-scroll{overflow-x:auto!important;overflow-y:visible!important;}

/* 21 — footer bottom bar hung off the gutter; mobile menu labels touched the edge */
.site-footer .footer-bottom,footer .footer-bottom{padding-left:24px!important;padding-right:24px!important;}
.paras-mobile-nav,.mobile-drawer{padding-left:18px!important;padding-right:18px!important;}
.paras-mobile-nav a,.mobile-drawer a{padding-left:6px!important;padding-right:6px!important;}

/* 33 — tap targets below 32px */
.site-footer a,footer a,.paras-mobile-nav a,.crumb a{min-height:32px;display:inline-flex;align-items:center;}

/* 4 — category pages were unreachable below 1100px */
.v8-mobile-cats{padding:4px 0 14px;margin-bottom:10px;border-bottom:1px solid var(--v7-line);}
.v8-mobile-cats h4{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--v7-muted);margin:0 0 8px;font-weight:500;}
.v8-mobile-cats a{display:flex;align-items:center;min-height:40px;font-size:15px;font-weight:600;
  color:var(--v7-ink);text-decoration:none;}
.v8-mobile-cats a:hover{color:var(--v7-red);}

/* 2 — honest note where spec values are genuinely not published */
.spec-gap-note{background:#fbf0df;border:1px solid #e6d2ae;border-radius:8px;
  padding:14px 18px;margin:0 0 18px;font-size:14.5px;color:#7a4a12;}
.spec-gap-note a{color:#8a3b10;font-weight:600;}
td .q{color:#8a8f95;font-style:normal;}
td[hidden],th[hidden]{display:none!important;}

/* 16/17 — site-v5.css sets .logo colour via body.paras-shell (0,2,1), which
   outranked the first attempt. Match its specificity and beat it. */
body.paras-shell .site-footer .logo,
body.paras-shell footer .logo,
body.paras-shell .site-footer .shared-brand{color:#ffffff!important;}
body.paras-shell .site-footer .logo span,
body.paras-shell footer .logo span{color:#ff6b62!important;}
body.paras-shell .site-footer .social-row a,
body.paras-shell footer .social-row a{color:#d7dce0!important;border-color:#3d4750!important;background:transparent!important;}
body.paras-shell .site-footer .social-row a svg,
body.paras-shell footer .social-row a svg{color:inherit!important;}
body.paras-shell .site-footer .social-row a:hover,
body.paras-shell footer .social-row a:hover{background:#b3221e!important;border-color:#b3221e!important;color:#fff!important;}

/* keep the floating WhatsApp button off the footer legal links */
body.paras-shell .footer-bottom{padding-bottom:26px!important;}
@media(min-width:821px){body.paras-shell .footer-bottom{padding-right:96px!important;}}

/* 36 — the works at Batala: map, address, directions */
.paras-map{padding:56px 0 62px;border-top:1px solid var(--v7-line);}
.paras-map h2{font-size:clamp(26px,2.6vw,35px);letter-spacing:-.025em;margin:0 0 10px;}
.paras-map>.wrap>p:not(.eyebrow):not(.map-addr){color:var(--v7-muted);max-width:62ch;margin:0 0 22px;}
.map-frame{border:1px solid var(--v7-line);border-radius:10px;overflow:hidden;
  aspect-ratio:16/7;background:var(--v7-stage);}
.map-frame iframe{width:100%;height:100%;border:0;display:block;}
.map-addr{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13.5px;
  color:var(--v7-muted);margin:14px 0 18px;}
.map-actions{display:flex;flex-wrap:wrap;gap:10px;}
@media(max-width:640px){.map-frame{aspect-ratio:4/3;}}

/* ============================================================
   V9 — components whose CSS was lost in the merge.
   GPT rewrote .steps and .parm as grids but dropped the child
   rules, so labels ran into their values ("Bed width, to50″"),
   and .sec.dark vanished, leaving dark-band text on white.
   Restored from the original product-page stylesheet.
   ============================================================ */

/* dark band */
.product-page .sec.dark,.sec.dark{background:#141A1F!important;color:#DCE1E5!important;}
.sec.dark h2,.sec.dark h3,.sec.dark h4{color:#fff!important;}
.sec.dark .sec-head p,.sec.dark p{color:#AAB3BA;}
.sec.dark .eyebrow{color:#FF7C8E!important;}

/* numbered process — a vertical timeline, not four cramped columns */
.product-page ol.steps,ol.steps{
  display:block!important;grid-template-columns:none!important;
  counter-reset:s;padding:0;margin:8px 0 0;list-style:none;max-width:640px;
}
ol.steps li{
  position:relative;padding:0 0 22px 42px!important;
  border-left:1px solid #DDE1E4;margin-left:11px;list-style:none;
}
ol.steps li:last-child{border-left-color:transparent;padding-bottom:0!important;}
ol.steps li::before{
  counter-increment:s;content:counter(s);position:absolute;left:-11px;top:0;
  width:22px;height:22px;border-radius:50%;background:#b3221e;color:#fff;
  font-family:"IBM Plex Mono",monospace;font-size:12px;display:grid;place-items:center;
}
ol.steps li>b{display:block!important;font-size:16.5px;font-weight:600;margin-bottom:4px;}
ol.steps li>span{display:block!important;font-size:14.5px;color:#5A646D;}
.dark ol.steps li{border-left-color:#2C353C;}
.dark ol.steps li>span{color:#AAB3BA;}

/* label/value rows — the span pair must sit apart, not concatenate */
ul.parm{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 30px!important;margin:16px 0 0;padding:0;list-style:none;border-top:1px solid #DDE1E4;
}
ul.parm li{
  display:flex!important;justify-content:space-between;align-items:baseline;gap:16px;
  padding:10px 0;border-bottom:1px solid #DDE1E4;font-size:14.5px;
}
ul.parm li>span:first-child{color:#5A646D;flex:1 1 auto;}
ul.parm li>span:last-child{
  font-family:"IBM Plex Mono",monospace;font-size:14px;text-align:right;flex:none;color:inherit;
}
.dark ul.parm{border-top-color:#2C353C;}
.dark ul.parm li{border-bottom-color:#2C353C;}
.dark ul.parm li>span:first-child{color:#8B949C;}
@media(max-width:640px){ul.parm{grid-template-columns:1fr!important;}}

/* red action button inside dark bands */
a.wa{
  display:inline-flex;align-items:center;gap:7px;background:#b3221e;color:#fff!important;
  text-decoration:none;font-weight:600;font-size:14.5px;padding:11px 18px;border-radius:4px;
  white-space:nowrap;transition:background .18s;
}
a.wa:hover{background:#8e1b18;}

/* FAQ accordions */
details.faq{background:#fff;border:1px solid #DDE1E4;border-radius:6px;margin-bottom:10px;}
details.faq summary{
  padding:16px 20px;cursor:pointer;font-weight:600;font-size:16px;
  list-style:none;display:flex;justify-content:space-between;gap:14px;
}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::after{content:"+";color:#b3221e;font-size:20px;line-height:1;}
details.faq[open] summary::after{content:"\2212";}
details.faq .a{padding:0 20px 18px;color:#5A646D;font-size:15px;}

/* leftover empty grid rows from the merge collapse instead of holding space */
.grid:empty{display:none!important;}

/* ── size picker: the card look from the original build ───────
   Buttons read "8 ft". No swing figure — that belongs in the
   spec table, not on a control the buyer taps. */
.sizepick{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  gap:10px;margin-bottom:28px;}
.sp{background:#fff;border:1px solid #DDE1E4;border-radius:8px;padding:18px 10px 16px;
  cursor:pointer;text-align:center;font-family:inherit;color:inherit;position:relative;
  overflow:hidden;display:block!important;
  transition:border-color .18s,transform .18s,box-shadow .18s,background .18s;}
.sp::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:#b3221e;
  transform:scaleX(0);transform-origin:left;transition:transform .22s;}
.sp .n{display:block;font-size:26px;font-weight:700;line-height:1;letter-spacing:-.025em;}
.sp .u{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:#69737d;margin-top:7px;}
.sp:hover{border-color:#b3221e;transform:translateY(-2px);box-shadow:0 6px 18px rgba(20,26,31,.09);}
.sp:hover::before{transform:scaleX(1);}
.sp[aria-pressed="true"]{background:#b3221e;border-color:#b3221e;color:#fff;
  box-shadow:0 6px 18px rgba(179,34,30,.24);}
.sp[aria-pressed="true"]::before{transform:scaleX(1);background:rgba(255,255,255,.55);}
.sp[aria-pressed="true"] .u{color:rgba(255,255,255,.82);}
.sp.all .n{font-size:20px;padding-top:5px;}
.sp:focus-visible{outline:3px solid #141A1F;outline-offset:2px;}
@media(max-width:620px){
  .sizepick{grid-template-columns:repeat(4,1fr);gap:8px;}
  .sp{padding:14px 4px 12px;}.sp .n{font-size:20px;}
}

/* ── photographs: give the machine the room, then a quiet inset ── */
.plate-stage{border-radius:12px;box-shadow:0 18px 44px -22px rgba(18,24,29,.42);
  border-color:#e3e7ea;}
.plate-primary .plate-stage{background:linear-gradient(180deg,#f7f8f7 0%,#eff1f1 100%);}
.plate figcaption{padding-top:14px;}
.plate-bare{min-height:0;padding-top:10px!important;opacity:.55;}
.plate-bare .plate-no{padding-top:0;}

/* the supporting shot sits inset and overlapping — reads as a detail
   pulled out of the main photograph rather than a second equal image */
@media(min-width:900px){
  .plate-wide .plate-row{margin-top:-72px;position:relative;z-index:2;
    grid-template-columns:minmax(0,.52fr) minmax(0,1.48fr);align-items:end;}
  .plate-wide .plate-row .plate-secondary{margin-left:34px;}
  .plate-wide .plate-row .plate-secondary .plate-stage{
    border:5px solid #fff;box-shadow:0 22px 50px -18px rgba(18,24,29,.5);}
  .plate-wide .plate-row .plate-solo-ask{margin-bottom:6px;}
  .plate-solo .plate-primary .plate-stage,
  .plate-square .plate-primary .plate-stage{box-shadow:0 20px 50px -24px rgba(18,24,29,.45);}
}

/* white cards sitting inside a dark band keep dark text —
   the .sec.dark heading rule must not reach inside them */
.sec.dark .card{background:#fff;border:1px solid #E1E5E8;border-radius:8px;padding:18px 20px;}
.sec.dark .card h2,.sec.dark .card h3,.sec.dark .card h4{color:#141A1F!important;margin:0 0 8px;}
.sec.dark .card p{color:#5A646D!important;margin:0;}
.sec.dark details.faq h2,.sec.dark details.faq h3,.sec.dark details.faq h4{color:#141A1F!important;}
.sec.dark details.faq summary{color:#141A1F;}

/* The size picker was flattened into pill tags by a rule that grouped it
   with .taglist and .codes. It is a control, not a tag — restore the card. */
.product-page .sizepick .sp,
.sizepick .sp{
  border:1px solid #DDE1E4!important;border-radius:10px!important;
  padding:18px 10px 16px!important;background:#fff!important;
  font-size:16px!important;font-weight:400!important;line-height:1.15!important;
  color:#141A1F!important;text-align:center!important;
}
.product-page .sizepick .sp .n,.sizepick .sp .n{
  color:#141A1F!important;font-size:26px!important;font-weight:700!important;
  letter-spacing:-.025em!important;line-height:1!important;display:block!important;
}
.product-page .sizepick .sp .u,.sizepick .sp .u{
  color:#69737d!important;font-size:10px!important;font-weight:500!important;
  letter-spacing:.14em!important;text-transform:uppercase!important;
  margin-top:7px!important;display:block!important;
}
.product-page .sizepick .sp.all .n,.sizepick .sp.all .n{font-size:20px!important;padding-top:5px;}
.product-page .sizepick .sp:hover,.sizepick .sp:hover{
  border-color:#b3221e!important;transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(20,26,31,.09);
}
.product-page .sizepick .sp[aria-pressed="true"],
.sizepick .sp[aria-pressed="true"]{
  background:#b3221e!important;border-color:#b3221e!important;color:#fff!important;
  box-shadow:0 6px 18px rgba(179,34,30,.24);
}
.product-page .sizepick .sp[aria-pressed="true"] .n,
.sizepick .sp[aria-pressed="true"] .n{color:#fff!important;}
.product-page .sizepick .sp[aria-pressed="true"] .u,
.sizepick .sp[aria-pressed="true"] .u{color:rgba(255,255,255,.82)!important;}

/* The taxonomy is three, so the grid is three. */
.v3-category-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important;}
.v3-product-card{background:#fff;border:1px solid #E1E5E8;border-radius:10px;
  transition:border-color .18s,transform .18s,box-shadow .18s;display:flex;}
.v3-product-card .body{padding:22px 20px 20px;display:flex;flex-direction:column;gap:8px;}
.v3-product-card h3{font-size:18px;letter-spacing:-.02em;margin:0;}
.v3-product-card p{font-size:14.5px;color:#69737d;margin:0;flex:1 1 auto;}
.v3-product-card .link{font-size:14px;font-weight:600;color:#b3221e;text-decoration:none;margin-top:4px;}
.v3-product-card:hover{border-color:#b3221e;transform:translateY(-3px);
  box-shadow:0 10px 26px -12px rgba(18,24,29,.28);}
@media(max-width:1000px){.v3-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}}
@media(max-width:560px){.v3-category-grid{grid-template-columns:1fr!important;}}

/* Cards for machines not yet photographed. "Full-machine photo pending" was
   internal build language showing to buyers. */
.v3-product-card .img.empty{
  display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(180deg,#f7f8f7 0%,#eceeef 100%);
  border-bottom:1px solid #E1E5E8;color:#8a939b;text-align:center;padding:20px;font-size:0;
}
.v3-product-card .img.empty .empty-mark{
  font-weight:700;font-size:19px;letter-spacing:.16em;color:#c4cad0;
}
.v3-product-card .img.empty .empty-txt{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;color:#98a2ab;
}

/* roll turning: the right column of the capability block */
.roll-aside{align-self:start;}
.roll-aside h3{font-size:17px;margin:0 0 12px;color:#fff;}
.roll-aside>p{color:#AAB3BA;font-size:14.5px;margin:0 0 18px;}
.roll-uses{list-style:none;margin:0 0 16px;padding:0;border-top:1px solid #2C353C;}
.roll-uses li{padding:12px 0;border-bottom:1px solid #2C353C;}
.roll-uses b{display:block;font-size:15px;font-weight:600;color:#fff;margin-bottom:2px;}
.roll-uses span{display:block;font-size:13.5px;color:#8B949C;}
.roll-ref{color:#AAB3BA;font-size:13.5px;margin:0;}

/* Category thumbnails: a uniform 4:3 box, but the whole photo is shown inside
   it. Cropping to fill was cutting the tops off tall machines. */
.v3-product-card .img{
  aspect-ratio:4/3;height:auto!important;min-height:0!important;
  overflow:hidden;background:#fff;border-bottom:1px solid #E1E5E8;
  display:flex!important;align-items:center;justify-content:center;
}
.v3-product-card .img img{
  width:100%!important;height:100%!important;
  object-fit:contain!important;object-position:center!important;
  padding:10px!important;display:block;background:#fff;
}
.v3-product-card{overflow:hidden;}

/* Whole card is the click target, not just the link at the bottom. The
   existing anchor is stretched over the card, so keyboard focus and the
   link destination are unchanged. */
.v3-product-card{position:relative;}
.v3-product-card .link::after{content:"";position:absolute;inset:0;z-index:1;}
.v3-product-card:hover .link{text-decoration:underline;}
.v3-product-card:focus-within{border-color:#b3221e;
  box-shadow:0 0 0 3px rgba(179,34,30,.18);}

/* Same on the home-page category cards. "Request Quote" is lifted above the
   stretched link so it keeps its own destination. */
.prod-grid .card{position:relative;}
.prod-grid .card .card-actions .view::after{content:"";position:absolute;inset:0;z-index:1;}
.prod-grid .card .card-actions .req{position:relative;z-index:2;}
.prod-grid .card:hover{cursor:pointer;}
.prod-grid .card:hover .view{text-decoration:underline;}
.prod-grid .card:focus-within{box-shadow:0 0 0 3px rgba(179,34,30,.18);}


/* ── Export section: the photo runs the full width of the section ──────────
   It was a small thumbnail parked in a half-width column beside a much taller
   block of text, which left a large empty gap. The section is now one column
   with the photo full width between the intro and the detail list. */
.export .wrap{display:block!important;}
.export-copy{max-width:none;}
.export-figure{
  margin:30px 0 34px;
  border:1px solid var(--hairline,#E1E5E8);
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  line-height:0;
}
.export-figure img{
  width:100%;height:auto;display:block;
  object-fit:contain;background:#fff;
}
/* At full width the two-column fact rows would stretch too far apart, so they
   sit in a two-up grid instead. */
.export-facts{display:grid;grid-template-columns:1fr 1fr;gap:0 46px;}
.export-facts li{border-top:1px dashed var(--hairline,#E1E5E8);}
/* both cells of the top row sit above the first rule, not just the left one */
.export-facts li:nth-child(-n+2){border-top:none;}
.export-facts span:last-child{text-align:left!important;}
.export-facts span:first-child{flex:0 0 38%!important;}
@media(max-width:820px){
  .export-facts{grid-template-columns:1fr;}
  .export-facts li:nth-child(2){border-top:1px dashed var(--hairline,#E1E5E8);}
  .export-figure{margin:24px 0 28px;}
}

/* ── Real-customer project: photo column and text column end together ──────
   The copy was long enough to stretch the row well past the photo, leaving
   grey bands above and below it. The copy is shorter now; this keeps the
   photo sized to the space that is actually left. */
.project-media figure{max-width:none!important;height:100%!important;
  aspect-ratio:auto!important;display:flex!important;align-items:center;}
.project-media figure img{object-fit:contain!important;height:100%!important;}


/* ══ Mobile fixes ═════════════════════════════════════════════════════════
   Found while checking the site at 320–430px. */

/* 1. Grid/flex children default to min-width:auto, so a spec table with
      min-width:620px inside a card forced its whole grid track to 620px and
      dragged the page sideways. Letting these shrink keeps the table's own
      horizontal scroller doing the scrolling instead of the page. */
.product-page .grid > *,
.product-page .g2 > *,
.product-page .g3 > *,
.product-page .g4 > *,
.product-page .tier,
.product-page .card,
.product-page .tbl-scroll{min-width:0;}
.product-page .tbl-scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;}

/* 2. Long buttons pushed a few px past the edge on 320px screens. */
@media(max-width:400px){
  .btn,.btn-primary,.btn-outline,.btn-white,.btn-outline-white{
    max-width:100%;white-space:normal;text-align:center;
  }
  .catalogue .actions{max-width:100%;}
  .catalogue .actions .btn{width:100%;}
  .hero-ctas{flex-wrap:wrap;}
  .hero-ctas .btn{max-width:100%;}
  .actionbar{max-width:100vw;overflow:hidden;}
  .actionbar a{min-width:0;padding-left:6px;padding-right:6px;}
}

/* 3. iOS auto-zooms the page when a focused field is under 16px. The form
      fields were 15px, set with !important from a more specific selector, so
      this has to match that specificity to win. */
@media (max-width:820px){
  input,select,textarea,
  .paras-form input,.paras-form select,.paras-form textarea,
  .search-input{font-size:16px!important;}
}

/* 4. A few inline links were under the 24px minimum touch height. */
@media(max-width:820px){
  .footer-contact a,.tb-left a,.contact-methods a{
    display:inline-block;padding:3px 0;min-height:24px;
  }
}


/* 5. On iPhones with a home indicator, a bottom:0 fixed bar sits underneath
      it. Reserve the safe area, and give the footer 2px more clearance than
      the bar is tall so its bottom edge is never covered. */
@supports (padding:max(0px)){
  .actionbar{padding-bottom:max(0px,env(safe-area-inset-bottom));}
  .paras-shell{padding-bottom:calc(65px + env(safe-area-inset-bottom))!important;}
}


/* 6. Spec tables on phones.
      Plain two-column tables were held at a 620px min-width, so the value
      column sat outside the scroller and the table read as a list of labels
      with no figures against them. They fit fine unaided. */
@media (max-width:700px){
  .product-page .tbl-2col table{min-width:0!important;width:100%!important;}
  .product-page .tbl-2col th,
  .product-page .tbl-2col td{word-break:normal;overflow-wrap:anywhere;}
}
/* Tables with several model columns still have to be swiped, so say so. */
.tbl-hint{display:none;}
@media (max-width:700px){
  .tbl-hint{
    display:block;margin:0 0 8px;
    font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;
    color:#8a939b;
  }
  .product-page .tbl-wide{
    position:relative;
    -webkit-overflow-scrolling:touch;
    background:linear-gradient(to right,#fff 30%,rgba(255,255,255,0)),
               linear-gradient(to right,rgba(255,255,255,0),#fff 70%) 100% 0,
               radial-gradient(farthest-side at 0 50%,rgba(20,26,31,.14),transparent),
               radial-gradient(farthest-side at 100% 50%,rgba(20,26,31,.14),transparent) 100% 0;
    background-repeat:no-repeat;
    background-size:34px 100%,34px 100%,14px 100%,14px 100%;
    background-attachment:local,local,scroll,scroll;
  }
}


/* Google Maps directions link (contact page and footer). */
.map-link{
  display:inline-flex;align-items:center;
  font-weight:600;text-decoration:none;
  color:#b3221e;
}
.map-link:hover{text-decoration:underline;}
.map-line{margin:8px 0 0;}
.footer-map{
  color:inherit;opacity:.85;font-weight:500;
  margin-top:4px;
}
.footer-map:hover{opacity:1;}
@media (max-width:820px){
  .map-link{min-height:24px;padding:3px 0;}
}