.product-hero { padding:clamp(7rem,12vw,10rem) 8% clamp(3rem,6vw,5rem); background:var(--mist); border-bottom:1px solid var(--line); }
.product-hero__inner,.product-body__inner { max-width:1440px; margin:0 auto; }
/* The title step from assets/vx.css. A product name is a descriptive
   string, so it takes the same size as every other page title. */
.product-hero h1 { font-size:clamp(2.1rem,3.5vw,3.35rem) !important; line-height:1.1 !important; }
.back-link { display:inline-block; color:var(--c-accent); font:500 .72rem 'IBM Plex Mono',monospace; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; }
.back-link:hover { text-decoration:underline; }
.product-category { margin:2rem 0 1.25rem; color:var(--c-accent); font:600 .72rem 'IBM Plex Mono',monospace; letter-spacing:.16em; text-transform:uppercase; }
/* The category name links back to its block on sales.html. Inherit the
   eyebrow's colour rather than taking the browser's default link blue. */
.product-category a { color:inherit; text-decoration:none; }
.product-category a:hover { text-decoration:underline; text-underline-offset:3px; }
/* Manufacturer attribution under the product title. */
.product-hero .brand-mark { display:flex; align-items:center; gap:.6rem; margin:1.5rem 0 0; color:var(--c-sub); font:500 .68rem 'IBM Plex Mono',monospace; letter-spacing:.12em; line-height:1.2; text-transform:uppercase; }
.brand-mark__logo { flex:0 0 auto; width:26px; height:26px; object-fit:contain; }
.product-body-section { padding:clamp(2.5rem,5vw,4rem) 8% clamp(5rem,9vw,7rem); background:var(--c-surface); }
/* minmax(0,1fr) rather than 1fr: a bare 1fr track keeps min-width:auto, so the
   35-thumbnail rail's min-content width blows the single-column layout out to
   ~2200px and pushes the image off-screen. The desktop rule below already used
   minmax(0,...), which is why only narrow viewports were affected. */
.product-body__inner { display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(2.5rem,4vw,4.5rem); }
.product-body__inner > * { min-width:0; }
.stage { position:relative; aspect-ratio:1/1; overflow:hidden; border:1px solid rgba(0,0,0,.09); border-radius:22px; background:var(--c-plate); }
.stage__layer { position:absolute; inset:0; width:100%; height:100%; padding:clamp(1rem,3%,2.5rem); object-fit:contain; }

/* Enhanced states are only applied once product-gallery.js has upgraded the
   markup, so the no-JavaScript page keeps its plain, working image list. */
.stage.is-enhanced { cursor:zoom-in; }
.stage.is-enhanced .stage__layer { opacity:0; transition:opacity .4s cubic-bezier(.4,0,.2,1); }
.stage.is-enhanced .stage__layer.is-visible { opacity:1; }
.stage__spinner { position:absolute; top:50%; left:50%; width:26px; height:26px; margin:-13px 0 0 -13px; border:2px solid rgba(0,0,0,.12); border-top-color:#5e7538; border-radius:50%; opacity:0; transition:opacity .2s ease; pointer-events:none; }
.stage.is-loading .stage__spinner { opacity:1; animation:stage-spin .8s linear infinite; }
@keyframes stage-spin { to { transform:rotate(360deg); } }

.stage__nav { position:absolute; top:50%; z-index:2; display:flex; align-items:center; justify-content:center; width:46px; height:46px; margin-top:-23px; padding:0; border:1px solid rgba(0,0,0,.07); border-radius:999px; background:rgba(255,255,255,.86); backdrop-filter:blur(10px); color:#1d1d1f; font-size:1.15rem; line-height:1; cursor:pointer; opacity:0; transform:scale(.94); transition:opacity .28s ease,transform .28s ease,background .2s ease; }
.stage:hover .stage__nav, .stage__nav:focus-visible { opacity:1; transform:scale(1); }
.stage__nav:hover { background:#fff; }
.stage__nav[hidden] { display:none; }
.stage__prev { left:16px; }
.stage__next { right:16px; }
/* Permanently visible on touch, so they need to hold up against the white
   background most product shots have. */
@media (hover:none) { .stage__nav { opacity:1; transform:scale(1); border-color:rgba(0,0,0,.14); background:rgba(255,255,255,.94); box-shadow:0 2px 10px rgba(0,0,0,.10); } }

.stage__count { position:absolute; right:16px; bottom:16px; z-index:2; padding:.34rem .74rem; border-radius:999px; background:rgba(255,255,255,.86); backdrop-filter:blur(10px); border:1px solid rgba(0,0,0,.06); color:#6e6e73; font:500 .66rem 'IBM Plex Mono',monospace; letter-spacing:.08em; pointer-events:none; }
.stage__zoom-hint { position:absolute; left:16px; bottom:16px; z-index:2; padding:.34rem .74rem; border-radius:999px; background:rgba(255,255,255,.86); backdrop-filter:blur(10px); border:1px solid rgba(0,0,0,.06); color:#6e6e73; font:500 .62rem 'IBM Plex Mono',monospace; letter-spacing:.08em; opacity:0; transition:opacity .28s ease; pointer-events:none; }
.stage:hover .stage__zoom-hint { opacity:1; }

.rail { position:relative; margin-top:1rem; }
.rail__track { display:flex; gap:.55rem; overflow-x:auto; scroll-behavior:smooth; padding:2px; scrollbar-width:none; }
.rail__track::-webkit-scrollbar { display:none; }
.rail__thumb { flex:0 0 auto; width:70px; height:70px; padding:4px; border:1px solid rgba(0,0,0,.09); border-radius:12px; background:var(--c-plate); opacity:.55; transition:opacity .25s ease,border-color .25s ease,transform .25s ease; }
.rail__thumb:hover { opacity:1; transform:translateY(-2px); }
.rail__thumb.is-active { opacity:1; border-color:#5e7538; box-shadow:0 0 0 1px #5e7538; }
.rail__thumb img { width:100%; height:100%; object-fit:contain; display:block; }
.rail__scroll { position:absolute; top:50%; z-index:2; display:flex; align-items:center; justify-content:center; width:32px; height:32px; margin-top:-16px; padding:0; border:1px solid rgba(0,0,0,.08); border-radius:999px; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); color:#1d1d1f; cursor:pointer; transition:opacity .25s ease,background .2s ease; }
.rail__scroll:hover { background:#fff; }
.rail__scroll[hidden] { display:none; }
.rail__prev { left:-6px; }
.rail__next { right:-6px; }

/* ---------- Lightbox ---------- */
.lightbox { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background:var(--c-lightbox); backdrop-filter:blur(20px); opacity:0; visibility:hidden; transition:opacity .3s ease,visibility .3s ease; }
.lightbox.is-open { opacity:1; visibility:visible; }
.lightbox__stage { position:relative; display:flex; align-items:center; justify-content:center; width:92vw; height:88vh; overflow:hidden; }
.lightbox__img { max-width:100%; max-height:100%; object-fit:contain; cursor:zoom-in; transition:transform .35s cubic-bezier(.4,0,.2,1); }
/* --lightbox-zoom is read back by product-gallery.js so touch panning moves the
   image by exactly the dragged distance. Keep the two in step. */
.lightbox__img.is-zoomed { --lightbox-zoom:2.4; cursor:zoom-out; transform:scale(2.4); }
.lightbox__img.is-panning { transition:none; }
.lightbox__close { position:absolute; top:22px; right:26px; z-index:2; display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:1px solid var(--c-line-thin); border-radius:999px; background:var(--c-lightbox-btn); color:var(--c-ink); font-size:1.2rem; cursor:pointer; }
.lightbox__close:hover { background:var(--c-lightbox-btn-hover); }
.lightbox__nav { position:absolute; top:50%; z-index:2; display:flex; align-items:center; justify-content:center; width:52px; height:52px; margin-top:-26px; padding:0; border:1px solid var(--c-line-thin); border-radius:999px; background:var(--c-lightbox-btn); color:var(--c-ink); font-size:1.3rem; cursor:pointer; transition:background .2s ease; }
.lightbox__nav:hover { background:var(--c-lightbox-btn-hover); }
.lightbox__nav[hidden] { display:none; }
.lightbox__prev { left:26px; }
.lightbox__next { right:26px; }
.lightbox__meta { position:absolute; right:0; bottom:20px; left:0; color:var(--c-sub); font:500 .68rem 'IBM Plex Mono',monospace; letter-spacing:.08em; text-align:center; }
.product-name-caption { margin:1.35rem 0 0; font-family:'Space Grotesk',Arial,sans-serif; font-size:1.25rem; font-weight:500; letter-spacing:-.03em; color:var(--c-ink); }
.product-desc { margin:0 0 2rem; color:var(--c-sub); font-size:1.05rem; line-height:1.8; }
.info-block { margin-bottom:1.25rem; padding:clamp(1.15rem,2.4vw,1.85rem); }
.info-block a { color:var(--c-accent); text-underline-offset:3px; }
.product-actions { display:flex; align-items:center; flex-wrap:wrap; gap:1rem 1.5rem; margin-top:1.6rem; }
.product-jump { color:var(--c-accent); font-size:.9rem; font-weight:600; text-decoration:none; padding:.65rem 0; }
.product-jump:hover { text-decoration:underline; text-underline-offset:4px; }
.product-hero { padding-bottom:clamp(2rem,4vw,3rem); }
.product-hero h1 { max-width:65rem; }
#specifications, #compare { scroll-margin-top:110px; }
.enquire-box.enquire-box--intro { margin:0 0 1.5rem; background:var(--c-tint-2) !important; border-color:var(--c-accent-line) !important; }
/* These are the page's section headings, so they are <h2> now rather than
   <p> -- a product page used to have an h1 and nothing under it. The size
   comes from the shared eyebrow, not from the h2 scale: they label a block
   in a two-column layout, they do not open a full-width section. */
h2.info-label { margin:0 0 1rem !important; color:var(--c-ink) !important; font:600 1.12rem 'Space Grotesk',Arial,sans-serif !important; letter-spacing:-.015em !important; text-transform:none; line-height:1.35 !important; }
.spec-table { width:100%; border-collapse:collapse; }
.spec-table tr { border-bottom:1px solid var(--c-line-soft); }
.spec-table tr:last-child { border-bottom:none; }
.spec-table td { padding:.7rem 0; font-size:.9rem; vertical-align:top; line-height:1.5; }
.spec-table td:first-child { width:44%; padding-right:1.25rem; color:var(--c-sub); }
.spec-table td:last-child { color:var(--c-ink); font-weight:500; }
.info-text { margin:0; color:var(--sub); font-size:.95rem; line-height:1.7; }
.enquire-box { margin-top:2.5rem; padding:1.75rem; border:1px solid var(--c-line); border-radius:18px; background:var(--c-surface-2); }
.enquire-box p { margin:0 0 1.25rem; color:var(--c-sub); font-size:.9rem; line-height:1.65; }
.enquire-actions { display:flex; flex-wrap:wrap; gap:.75rem; }
@media (min-width:1024px) { .product-body__inner { grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:start; } .gallery-col { position:sticky; top:112px; } }

/* On touch there is no hover, so the rail arrows sit permanently on top of the
   first and last thumbnail (and overhang the column by 6px). Dragging the rail
   is the natural gesture there, so drop them. */
@media (hover:none) { .rail__scroll { display:none; } }

@media (max-width:768px) {
    /* The site-wide mobile gutter is 20px, but the shared 8% rule in site.css
       is more specific than `main > section`, so these two need it restated. */
    .product-hero, .product-body-section { padding-left:20px !important; padding-right:20px !important; }
    .product-hero { padding-top:6.5rem !important; padding-bottom:1.65rem; }
    .product-hero h1 { overflow-wrap:anywhere; font-size:clamp(1.8rem,7.7vw,2.25rem) !important; line-height:1.08 !important; }
    .product-category { margin:1.5rem 0 1rem; }
    .product-body-section { padding-top:1.5rem; padding-bottom:4rem; }
    .product-body__inner { gap:2rem; }
    /* Product shots are square, so a square stage renders them ~40% larger than
       the old 4/3 box did without costing meaningful extra height. */
    .stage { aspect-ratio:1/1; border-radius:16px; }
    .stage__layer { padding:.65rem; }
    .stage__nav { width:40px; height:40px; margin-top:-20px; }
    .stage__prev { left:10px; }
    .stage__next { right:10px; }
    .stage__count { right:10px; bottom:10px; }
    .stage__zoom-hint { display:none; }
    .rail { margin-top:.75rem; }
    .rail__track { padding:2px 2px 4px; }
    .rail__thumb { width:56px; height:56px; }
    .product-name-caption { display:none; }
    .product-desc { margin-bottom:1.75rem; overflow-wrap:anywhere; font-size:1rem; line-height:1.7; }
    .info-block { margin-bottom:1.85rem; }
    .spec-table { table-layout:fixed; }
    .spec-table td { overflow-wrap:anywhere; font-size:.84rem; }
    .spec-table td:first-child { width:40%; padding-right:.75rem; }
    .info-text { overflow-wrap:anywhere; font-size:.92rem; line-height:1.7; }
    .enquire-box { margin-top:2rem; padding:1.25rem; }
    .enquire-actions .btn-elevation { width:100%; justify-content:center; }
}

@media (max-width:640px) {
    /* 88vh is measured against the *large* viewport, so on a phone with the
       browser toolbars showing the stage grew taller than the visible area and
       clipped the image top and bottom. Pad the dialog to the space the close
       button and counter leave free and let the stage fill exactly that. */
    .lightbox { height:100vh; height:100dvh; padding:calc(64px + env(safe-area-inset-top)) 10px calc(52px + env(safe-area-inset-bottom)); }
    .lightbox__stage { width:100%; height:100%; }
    .lightbox__nav { width:42px; height:42px; margin-top:-21px; }
    .lightbox__prev { left:10px; }
    .lightbox__next { right:10px; }
    .lightbox__close { top:calc(14px + env(safe-area-inset-top)); right:14px; }
    .lightbox__meta { bottom:calc(16px + env(safe-area-inset-bottom)); }
}

/* ---- Identity strip: manufacturer, part number, category ----
   Sits under the product name so a buyer confirming they have the right part
   does not have to read down the spec table to find who makes it. */
.ident { display:flex; flex-wrap:wrap; gap:0; margin:1.75rem 0 0; border:1px solid var(--c-line); background:var(--c-surface); }
.ident__row { flex:1 1 190px; padding:.9rem 1.15rem; border-right:1px solid var(--c-line-thin); }
.ident__row:last-child { border-right:0; }
.ident dt { margin:0 0 .35rem; color:var(--c-accent); font:500 .64rem 'IBM Plex Mono',monospace; letter-spacing:.14em; text-transform:uppercase; }
.ident dd { margin:0; color:var(--c-ink); font-size:.95rem; line-height:1.45; }
.ident dd a { color:var(--c-accent); font-weight:600; text-decoration:none; }
.ident dd a:hover { text-decoration:underline; text-underline-offset:2px; }
.ident .muted { color:var(--c-sub); }

/* ---- Applications list ---- */
.info-list { margin:.75rem 0 0; padding-left:1.2rem; color:var(--c-sub); font-size:.95rem; line-height:1.75; }
.info-list li { margin-bottom:.35rem; }
.info-list li:last-child { margin-bottom:0; }

/* ---- Links to the rest of the range ---- */
.related__links { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
/* The label above each group of neighbouring parts, so "Goes with this"
   reads as a parts list rather than an undifferentiated pile of links. */
/* What the specification table above is, and what it is not. A page with
   two identity rows must not imply the part has been specified. */
/* Breadcrumb. Wraps rather than scrolling, because a four-step trail with a
   long product name at the end is normal here and a phone must show it. */
.product-crumb { margin:0 0 1.1rem; }
.product-crumb ol { display:flex; flex-wrap:wrap; align-items:center; gap:.15rem .5rem; margin:0; padding:0; list-style:none; font:500 .78rem 'IBM Plex Mono',ui-monospace,monospace; }
.product-crumb li { display:flex; align-items:center; gap:.5rem; color:var(--c-sub); }
.product-crumb li:not(:last-child)::after { content:"/"; opacity:.45; }
.product-crumb a { color:var(--c-sub); text-decoration:none; }
.product-crumb a:hover { color:var(--c-accent); text-decoration:underline; text-underline-offset:2px; }
.product-crumb [aria-current="page"] { color:var(--c-ink); }
@media (max-width:768px) { .product-crumb ol { font-size:.72rem; } }

.spec-status { margin:.9rem 0 0; color:var(--c-sub); font-size:.86rem; line-height:1.65; }
.spec-status a { color:var(--c-accent); font-weight:600; }
.related__kind { margin:1.1rem 0 .5rem; color:var(--c-sub); font:600 .68rem 'IBM Plex Mono',monospace; letter-spacing:.1em; text-transform:uppercase; }
.related__kind:first-of-type { margin-top:.85rem; }
.related__links a { padding:.45rem .85rem; border:1px solid var(--c-line-mid); border-radius:999px; color:var(--c-sub); font-size:.82rem; text-decoration:none; }
.related__links a:hover { border-color:var(--c-accent); color:var(--c-accent); }
.related__guide { display:inline-block; color:var(--c-accent); font-weight:600; font-size:.9rem; text-decoration:none; }
.related__guide:hover { text-decoration:underline; text-underline-offset:2px; }

@media (max-width:768px) {
    .ident__row { flex:1 1 100%; border-right:0; border-bottom:1px solid var(--c-line-thin); }
    .ident__row:last-child { border-bottom:0; }
}

/* ---- Sticky quotation bar (mobile) ---- */
/* The enquiry box is beside the content on a desktop layout but stacks below
   the specification table on a phone, which can be several screens down. */
.quote-bar { display:none; }
@media (max-width:900px) {
    .quote-bar { position:fixed; left:0; right:0; bottom:0; z-index:90; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.25rem; background:var(--c-accent-fill); color:var(--c-on-accent); font:600 .82rem 'IBM Plex Mono',monospace; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; box-shadow:0 -6px 20px rgba(0,0,0,.14); }
    .quote-bar:active { background:var(--c-accent-fill-hover); }
    .quote-bar__cue { font-size:1.1rem; }
    /* Clear the bar so it never covers the last of the page. */
    body { padding-bottom:4.5rem; }
}

/* --- Comparison and questions ---------------------------------------------
   Two blocks added so that a product page answers the questions a buyer
   arrives with rather than only describing the part: how it sits against the
   rest of its range, and the handful of figures people ask for by name.
   Both are built from the same catalogue data as the specification table
   above, so they follow its typography rather than introducing a second one. */

.cmp-scroll { margin-top:1.5rem; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--c-line); border-radius:12px; }
.cmp-table { width:100%; min-width:64rem; border-collapse:separate; border-spacing:0; font-size:.88rem; }
.cmp-table th, .cmp-table td { padding:1rem; text-align:left; vertical-align:top; line-height:1.6; border-bottom:1px solid var(--c-line-soft); }
.cmp-table thead th { background:var(--c-surface-2); color:var(--c-sub); font:600 .72rem Inter,Arial,sans-serif; letter-spacing:0; text-transform:none; line-height:1.5; }
.cmp-table th[scope="row"] { min-width:16rem; width:26%; font-weight:500; background:var(--c-surface); }
.cmp-table tbody tr:first-child th { background:var(--c-tint-2); }
.cmp-table th[scope="row"] a { color:var(--c-ink); text-decoration:none; border-bottom:1px solid var(--c-line-firm); }
.cmp-table th[scope="row"] a:hover { color:var(--c-accent); border-color:var(--c-accent); }
.cmp-table td { color:var(--c-ink); }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom:none; }
/* The row the reader is already on, so the table has an anchor point. */
.cmp-table tbody tr:first-child { background:var(--c-tint-2); }
.cmp-this { font-weight:600; }
.cmp-tag { display:table; margin-top:.55rem; padding:.25rem .6rem; border-radius:999px; background:var(--c-accent-fill); color:var(--c-on-accent); font:600 .65rem Inter,Arial,sans-serif; }
/* Not an empty cell: the manufacturer does not quote that figure for that
   part, which is a different statement from the figure being zero. */
.cmp-na { color:var(--c-sub); }

.faq-item { border-bottom:1px solid var(--c-line-soft); }
.faq-item:last-child { border-bottom:none; }
.faq-item summary { padding:.8rem 1.6rem .8rem 0; color:var(--c-ink); font-size:.92rem; font-weight:500; line-height:1.5; cursor:pointer; list-style:none; position:relative; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; right:.25rem; top:.72rem; color:var(--c-accent); font-size:1.1rem; line-height:1; }
.faq-item[open] summary::after { content:"\2212"; }
.faq-item[open] summary { color:var(--c-accent); }
.faq-item summary:hover { color:var(--c-accent); }
.faq-item summary:focus-visible { outline:2px solid var(--c-accent); outline-offset:3px; border-radius:4px; }
.faq-item p { margin:0 0 1rem; padding-right:1.6rem; color:var(--sub); font-size:.9rem; line-height:1.7; }

@media (min-width:769px) {
    .cmp-table th:first-child { position:sticky; left:0; z-index:1; box-shadow:1px 0 0 var(--c-line); }
}
/* Keep real table headers for assistive technology, but give each option a
   readable labelled card on narrow screens. No sideways page scrolling. */
@media (max-width:768px) {
    .cmp-scroll { overflow:visible; border:0; border-radius:0; }
    .cmp-table { display:block; min-width:0; font-size:.87rem; }
    .cmp-table thead { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); }
    .cmp-table tbody { display:grid; gap:1rem; }
    .cmp-table tbody tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:1rem; gap:1rem; border:1px solid var(--c-line); border-radius:12px; }
    .cmp-table th[scope="row"] { grid-column:1/-1; width:auto; min-width:0; padding:0 0 .85rem; background:transparent; }
    .cmp-table tbody tr:first-child th { background:transparent; }
    .cmp-table td { min-width:0; padding:0; border:0; overflow-wrap:anywhere; }
    .cmp-table td::before { content:attr(data-label); display:block; margin-bottom:.3rem; color:var(--c-sub); font-size:.72rem; font-weight:600; }
    .product-actions .btn-elevation { width:100%; padding:.95rem 1rem !important; }
    .product-compare .info-block { padding:1.1rem; }
    .ident { border-radius:12px; overflow:hidden; }
    .info-block { margin-bottom:1rem; }
    .quote-bar { padding-bottom:calc(1rem + env(safe-area-inset-bottom)); }
    body { padding-bottom:calc(4.5rem + env(safe-area-inset-bottom)); }
    .has-comparison .product-body-section { padding-bottom:2rem; }
}

/* The comparison band sits below the two-column body because a table of five
   spec columns cannot be read inside a 370px column -- which is what it looked
   like when it was first put beside the specification list. */
.product-compare { padding:0 8% 4rem; background:var(--c-surface); }
.product-compare__inner { max-width:1180px; margin:0 auto; padding-top:2.5rem; border-top:1px solid var(--c-line-thin); }
.product-compare .info-block { margin-bottom:0; }
@media (max-width:768px) { .product-compare { padding:0 20px 3rem; } .product-compare__inner { padding-top:2rem; } }