/*
 * Product detail template (Phase B3) — used by product/ecoplasma.html and the generic
 * product/index.html?slug=... renderer. Hero/applications/technical/documentation/related
 * section shapes reuse css/product-pages.css (.detail-hero, .applications, .technical,
 * .specification-state, .documentation, .document-list, .related; .key-features and
 * .feature-grid too, for the standalone Key Features section below); this file adds what
 * B3 needs on top: the Hero photo box, the standalone "Overview + Gallery" two-column
 * section (gallery relocated out of the Hero — see js/product-page.js), the flat feature-
 * grid card variant, the technical specification table, the reference badge and the
 * not-found state.
 */

/* .detail-hero{display:grid} and [hidden]'s default display:none share the same
   specificity (0,1,0); as an author rule loaded after the UA stylesheet, .detail-hero
   would otherwise win the cascade and defeat `hidden` on #product-not-found /
   #product-content. Making the hidden state explicit here is what actually hides it. */
[hidden]{
display:none !important
}

.product-made-in-house{display:inline-flex;margin:16px 0 0;padding:4px var(--space-1);border-radius:var(--radius-sm);background:var(--color-teal-tint);color:var(--color-primary);font:600 var(--text-xs) var(--font-mono);letter-spacing:.2px}

/* The brand link opens the existing products-overview brand filter. */
.product-subnav{position:sticky;top:78px;z-index:calc(var(--z-header) - 1);display:flex;gap:var(--space-2);padding:var(--space-2) var(--page-padding);overflow-x:auto;border-bottom:1px solid var(--color-line);background:var(--color-paper);white-space:nowrap}
.product-subnav a{font:600 var(--text-xs) var(--font-mono);letter-spacing:.3px;text-transform:uppercase}
.spec-table--comparison{min-width:760px}

/* min-height:0 overrides a grid item's default automatic minimum size (which is based on
   its content's min-content size — here, the photo's own intrinsic height). Without it,
   the tall content would keep forcing #product-hero-media's grid row taller than
   .detail-hero's own bounded height (css/product-pages.css), no matter what height/
   max-height rules are set below — the exact mechanism behind the original overflow bug.
   min-width:0 is the same fix on the other axis: a grid item's default automatic minimum
   *width* is likewise based on its content's min-content size — here, a portrait-oriented
   photo's rendered width once max-height:100% (below) has scaled it up to fill the row's
   height. Without it, #product-hero-media's column (.detail-hero's grid-template-columns,
   css/product-pages.css) grows to fit the photo instead of letting max-width:100% (below)
   shrink it. Same bug class as documented in docs/ARCHITECTURE.md. */
.product-hero-media{
display:flex;
align-items:center;
justify-content:center;
height:100%;
min-height:0;
min-width:0
}

/* Sub-card treatment, real-photo state only: .detail-hero's own #edf4f2 mist background
   (css/product-pages.css) stays as the Hero's surface exactly as before; :has(img) scopes
   this to only when js/product-page.js has actually inserted a photo, leaving the 0-image
   placeholder pill (.product-hero-media span, below) sitting directly on that same mist
   background exactly as it already did — that state never had a photo to contrast against,
   so no sub-card is introduced for it. padding keeps the photo off the sub-card's own edges
   — that works through the img rule below unchanged, since max-width/max-height:100% there
   already resolves against the padded content box.
   width/height:calc(100% - 48px) + margin:24px — NOT plain height:100% + margin:24px: this
   element is a grid item under .detail-hero's own bounded height
   (calc(100vh - 133px), css/product-pages.css); margin sits *outside* an element's own
   height, so height:100% plus a 24px margin would ask for 48px more total vertical space
   than the grid row actually has, in the box model's strict reading. This visibly held up
   fine under direct measurement in this session's own testing (Chromium correctly
   subtracted the stretch-fit margin here), across ecoplasma, the most extreme portrait
   (0.667, dexis-orthopantomograph-op-3d-ex) and landscape (10.6, a near-flat 297x28 photo)
   ratios in the catalogue, and the documented short-viewport case (1280x610) — no engine
   difference was reproduced. The explicit calc() is applied anyway, on the reasoning behind
   the report: relying on a grid engine to *implicitly* net out margin against an explicit
   height:100% is exactly the kind of engine-specific behaviour this project's own overflow
   history (docs/ARCHITECTURE.md) warns against — computing the compensation
   explicitly removes that dependency entirely rather than trusting it held. */
.product-hero-media:has(img){
width:calc(100% - 48px);
height:calc(100% - 48px);
margin:24px;
padding:24px;
border-radius:var(--radius-lg);
background:#fff;
box-shadow:0 8px 24px rgba(15,47,47,.12)
}

/* The Hero's OTHER grid item (.detail-hero's text column, css/product-pages.css) has the
   identical missing-min-width:0 gap, independently: a product name containing one long,
   unbroken word (no space/hyphen to wrap at — e.g. "ORTHOPANTOMOGRAPH") sets that column's
   own automatic minimum width to the word's full rendered length at the H1's font size,
   which by itself was enough to force the whole .detail-hero grid — and the page — wider
   than the viewport, independently of the #product-hero-media fix above (confirmed: fixing
   only the media column left this one still overflowing at the exact same width). Scoped to
   #product-hero specifically (not the bare .detail-hero>div:first-child selector already
   shared with .page-hero/.category-hero in product-pages.css) so this stays a narrow,
   product-page-only override rather than touching that shared rule. Confirmed on 5 of 57
   products with a Hero image at 320px (the three DEXIS OP 3D variants, both Euronda
   Thermodisinfector Eurosafe models) before this fix, 0 after. */
#product-hero>div:first-child{
min-width:0
}

/* Responsive H1 size, narrow viewports only: min-width:0 above lets the text column shrink
   to fit the viewport, but a single unbroken word in the product name (e.g.
   "ORTHOPANTOMOGRAPH" — no space/hyphen to wrap at) has its own fixed rendered width at a
   given font-size, and no column can shrink an already-fitted word any further. Per the
   project owner's explicit direction: do not break/hyphenate the word — shrink the H1 font
   just enough, at just the narrow range where it's needed, using clamp() (no JS).
   Derivation (measured directly against the real word, letter-spacing included, via a
   temporary off-screen span at each viewport):
     - "ORTHOPANTOMOGRAPH" at the base --text-heading floor (38px, css/variables.css) renders
       386px wide.
     - At this viewport range .detail-hero is single-column (css/product-pages.css
       @media(max-width:780px)), so the text column's available width is (viewport - 15px)
       (measured directly), and 386px only fits once viewport >= ~401px — narrower than that,
       38px alone overflows.
     - The "just barely fits" font-size ceiling as a function of viewport v is
       38*(v-15)/386 = 0.09845v - 1.477 (px). This clamp uses that same slope
       (0.09845*100 = 9.8vw) shifted down by a flat 1px safety margin — i.e. parallel to,
       and consistently ~1px (≈10px of rendered word width) below, the true ceiling at every
       viewport in the affected range, not just at its endpoints.
     - 29px floor: the ceiling's own value at 320px (this site's narrowest supported width,
       docs/ARCHITECTURE.md) rounds to ~29px with the margin above; below that the
       expression itself would keep shrinking, but 320px is the floor this site targets, so a
       flat minimum there is the same "don't shrink further than needed" intent, just as a
       hard stop.
     - 38px ceiling: matches --text-heading's own already-existing floor exactly (no visual
       jump once the vw expression naturally exceeds it, around ~420px — beyond that this
       rule is inert and the previously-existing font-size is unchanged).
   Verified (word-width vs. column-width margin) at every tested width, not just 320/430:
   320px→10.4px margin, 360px→11.9px, 375px→~12px, 390px→12.1px, 410px+→already inert (>=38px
   ceiling reached, matching the unmodified previous behaviour). Confirmed on all 3 affected
   DEXIS OP 3D variants; confirmed inert (no size change) on every other tested product, whose
   shorter/space-separated names already fit at 38px well within this same clamp's floor.
   Scoped to @media(max-width:780px): the derivation above only holds for the single-column
   stacked Hero layout that exists in that range (css/product-pages.css); above 780px
   --text-heading (css/variables.css) resumes its own existing clamp(38px,4.5vw,68px) growth
   up to 68px on wide desktop screens, which this rule must not cap — an earlier, unscoped
   version of this rule accidentally pinned the Hero H1 at 38px on every viewport, including
   1024/1440px where it should grow past that; wrapping it here was the fix. */
@media(max-width:780px){
#product-hero h1{
font-size:clamp(29px,9.8vw - 2.5px,38px)
}
}

/* The product photo must always render in full, never cropped, regardless of its own
   aspect ratio (portrait/landscape/square) or the viewport-bounded height .detail-hero
   now enforces (css/product-pages.css). max-width/max-height:100% + width/height:auto
   lets the browser shrink the image to fit whichever dimension of #product-hero-media is
   tighter, and object-fit:contain is the belt-and-suspenders guard for the same intent —
   together they guarantee no scroll is ever needed inside the hero to see the whole photo. */
.product-hero-media img{
max-width:100%;
max-height:100%;
width:auto;
height:auto;
object-fit:contain
}

.product-hero-media span{
padding:14px 26px;
border:1px solid rgba(15,47,47,.22);
border-radius:999px;
background:rgba(255,255,255,.7);
color:var(--color-primary);
font:600 var(--text-sm) var(--font-mono);
letter-spacing:1.5px
}

/* Mobile: the two-column .detail-hero grid (css/product-pages.css) collapses to a single
   stacked column below 780px, consistent with the site's existing breakpoint. Forcing the
   whole stacked hero into the same viewport-bounded height used on desktop isn't practical
   once real body copy sits above the photo, so only the photo's own box is bounded here —
   to a fixed, definite height (45vh) so the max-height:100% rule above has something
   concrete to resolve against. This keeps the image itself short enough to avoid the
   original "image dictates the page's height" bug even on mobile, while letting the
   overall hero (and page) grow and scroll normally, the way every other section already
   does. This rule must stay in this file (loaded after css/product-pages.css) so it isn't
   defeated by the plain .product-hero-media{height:100%} rule above. */
@media(max-width:780px){
.product-hero-media{
height:45vh;
margin:24px 0 0
}
/* Same width/height:calc(...) - margin compensation as the base rule above, re-derived for
   this breakpoint's own values: height:45vh is the plain state's fixed cap (unchanged, not
   re-declared here — only overridden below), and margin goes from top-only (24px 0 0, the
   pre-existing full-bleed-to-the-viewport-edge treatment for this single-column mobile
   layout) to all sides for the sub-card case — a rounded white card with no side margin
   would have its left/right corners sit flush against the viewport edge, reading as clipped
   rather than a deliberately rounded floating card. */
.product-hero-media:has(img){
width:calc(100% - 48px);
height:calc(45vh - 48px);
margin:24px
}
}

/* Short-viewport laptops (css/product-pages.css' @media(max-height:900px) switches .detail-hero
   to height:auto so the text column can take whatever room it needs): the hero is still
   side-by-side here, since width is unaffected — only height is short. Without a bound,
   #product-hero-media would revert to the original bug (an unbounded photo forcing the row,
   and the whole page, taller than necessary). align-self:center (overriding the grid default
   of stretch, which would otherwise top-align a fixed-height item against a now-taller row)
   centers it nicely alongside the text column instead of pinning it to the top.
   55vh (raised from the mobile rule's 45vh, measured against real T14s-class laptop screenshots
   — 1536x760/1280x720/1280x610) is deliberately more generous than mobile's cap: with Part A's
   lighter hero (no description, smaller heading), the text column is short enough here that a
   45vh photo read as disproportionately small next to it. 55vh keeps the photo close to — but
   never taller than — the text column's own height across every product name length tested
   (short/medium/long), without risking the original overflow bug: it's still a plain, definite
   vh value the img's max-height:100% (above) resolves against, never a percentage of the row
   itself, so there is no reintroduced circular-sizing risk regardless of how tall future
   product names/photos get. */
@media(max-height:900px){
.product-hero-media{
height:55vh;
align-self:center;
margin:24px 0
}
/* Same reasoning as the mobile override above: height:55vh/align-self:center are the plain
   state's own values (unchanged); margin goes from vertical-only (24px 0) to all sides for
   the sub-card, so width now needs the same calc() compensation the vertical margin already
   had reason to use. */
.product-hero-media:has(img){
width:calc(100% - 48px);
height:calc(55vh - 48px);
margin:24px
}
}

/* Overview + Gallery (standalone two-column section — gallery relocated out of the Hero,
   see js/product-page.js). Same 1fr/1fr + 8vw pattern already used by the sibling
   .applications/.technical sections in css/product-pages.css, on a plain white background.
   .single-column is toggled by JS only when a product has zero images: the gallery column
   is removed entirely rather than shown as an empty tile, and the Overview text takes the
   full width — there is no other collapse case, since the Overview text itself is never
   empty (js/product-page.js always renders either real copy or its own "pending approval"
   fallback). */
.overview-gallery{
display:grid;
grid-template-columns:1fr 1fr;
gap:8vw;
background:#fff
}

.overview-gallery.single-column{
grid-template-columns:1fr
}

@media(max-width:780px){
.overview-gallery{
grid-template-columns:1fr
}
}

.gallery-visual,
.overview-gallery .overview-text{
min-width:0
}

.overview-gallery .overview-text p:not(.eyebrow){
max-width:610px;
margin-top:22px;
overflow-wrap:break-word;
color:var(--color-muted)
}

.gallery-visual{
display:flex;
flex-direction:column;
gap:16px
}

.gallery-media{
display:flex;
align-items:center;
justify-content:center;
height:420px;
min-height:0
}

.gallery-media img{
max-width:100%;
max-height:100%;
width:auto;
height:auto;
object-fit:contain
}

@media(max-width:780px){
.gallery-media{
height:280px
}
}

/* Wrapper solely so the prev/next arrow buttons can be positioned absolutely over the
   strip (overlaying it, not pushing layout) without affecting .gallery-thumbnails' own
   flex/scroll box. Hidden by JS exactly when .gallery-thumbnails itself used to be
   (images.length <= 1 — see js/product-page.js). */
.gallery-thumbnails-wrap{
position:relative
}

/* Same scrollable, no-visible-scrollbar thumbnail strip pattern as before, just under new
   class names (.gallery-thumbnail(s), not .product-thumbnail(s)) now that it lives in this
   section instead of the Hero. flex:none on each button keeps every thumbnail at a fixed
   size regardless of the strip's available width, so extra thumbnails overflow into the
   scrollable area instead of shrinking; min-width:0 on both this element and its parent
   .gallery-visual is what lets that scrolling work at all instead of forcing the whole
   section — and the page — wider than the viewport (the exact mechanism behind the
   sitewide overflow bug documented in docs/ARCHITECTURE.md). */
.gallery-thumbnails{
display:flex;
flex:none;
gap:10px;
min-width:0;
padding:2px;
overflow-x:auto;
scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;
scrollbar-width:none
}

.gallery-thumbnails::-webkit-scrollbar{
display:none
}

/* Toggled by js/product-page.js exactly when the strip has no horizontal overflow
   (scrollWidth <= clientWidth) — the same condition that hides both arrow buttons below —
   so a handful of thumbnails (e.g. 3, narrower than the strip) sit centered under the main
   image instead of stranded at the left edge. Left-aligned/scrollable remains the default
   whenever there IS overflow. */
.gallery-thumbnails.centered{
justify-content:center
}

/* Left/right arrow controls, shown only when the strip actually overflows (JS toggles
   [hidden] per-button based on scroll position — both start hidden here so they never
   flash visible before that first calculation runs). Positioned absolutely so they overlay
   the strip rather than reserving their own layout space; a small negative inset keeps them
   from crowding the thumbnails' own padding. Icons are Lucide chevron-left/chevron-right
   (docs/ICON-CREDITS.md's established UI-icon set), inline per this site's existing SVG
   convention rather than introduced as new image assets. */
.gallery-thumb-nav{
display:flex;
position:absolute;
top:50%;
z-index:1;
align-items:center;
justify-content:center;
width:32px;
height:32px;
padding:0;
transform:translateY(-50%);
border:1px solid var(--color-line);
border-radius:50%;
background:rgba(255,255,255,.92);
color:var(--color-primary);
cursor:pointer;
box-shadow:0 2px 6px rgba(15,47,47,.18)
}

.gallery-thumb-nav .icon{
display:block;
flex:none
}

.gallery-thumb-nav-prev{
left:-4px
}

.gallery-thumb-nav-next{
right:-4px
}

.gallery-thumb-nav:hover{
background:#fff
}

.gallery-thumb-nav:focus-visible{
outline:2px solid var(--color-teal-dark);
outline-offset:2px
}

@media(max-width:780px){
.gallery-thumb-nav{
width:28px;
height:28px
}
}

.gallery-thumbnail{
display:flex;
flex:none;
align-items:center;
justify-content:center;
width:88px;
height:88px;
padding:0;
overflow:hidden;
background:#fff;
border:2px solid var(--color-line);
border-radius:var(--radius-lg);
cursor:pointer
}

.gallery-thumbnail img{
width:100%;
height:100%;
object-fit:cover
}

.gallery-thumbnail[aria-current="true"]{
border-color:var(--color-teal-dark)
}

.gallery-thumbnail:focus-visible{
outline:2px solid var(--color-teal-dark);
outline-offset:2px
}

@media(max-width:780px){
.gallery-thumbnail{
width:64px;
height:64px
}
}

/* Flat feature grid: source data is an array of plain strings, not title+body pairs, so
   each card shows its index and the full feature text rather than an invented heading.
   min-width:0 + overflow-wrap keep long unbroken source tokens (patent numbers, model
   codes) from forcing the whole grid — and the page — wider than the viewport; the full
   text still renders, it just wraps instead of running off the edge. */
.feature-grid-flat article{
display:flex;
flex-direction:column;
min-width:0
}

.feature-grid-flat p{
margin-top:44px;
overflow-wrap:break-word;
font-size:13px;
line-height:1.6;
color:var(--color-muted)
}

.applications-list,
.related-body ul{
display:grid;
gap:14px;
padding:0;
margin:0;
list-style:none
}

.applications-list li{
min-width:0;
padding:18px 22px;
overflow-wrap:break-word;
background:#fff;
border:1px solid var(--color-line);
border-radius:var(--radius-lg);
font-size:13px;
color:var(--color-muted)
}

#applications-body{
max-width:440px;
align-self:end
}

/* Grid items default to min-width:auto, which lets a wide descendant (the spec table)
   push the whole .technical grid column — and the page — wider than the viewport before
   .spec-table-wrap's own overflow-x:auto ever gets a chance to scroll internally. Forcing
   min-width:0 on the grid item lets the column shrink first, so the table scrolls inside
   its own box instead of the page. */
#technical-body,
#applications-body{
min-width:0
}

.spec-table-wrap{
overflow-x:auto;
background:#174344;
border-radius:var(--radius-sm)
}

.spec-table{
width:100%;
min-width:520px;
border-collapse:collapse;
font-size:13px
}

.spec-table caption{
padding:16px 22px 0;
text-align:left;
color:#9ed5d3;
font:600 var(--text-xs) var(--font-mono);
letter-spacing:.5px
}

.spec-table th,
.spec-table td{
padding:14px 22px;
text-align:left;
border-bottom:1px solid rgba(255,255,255,.12);
vertical-align:top
}

.spec-table thead th{
color:#9ed5d3;
font:600 12px/1.35 var(--font-sans);
letter-spacing:.02em;
text-transform:uppercase
}

.spec-table tbody th{
color:#fff;
font-weight:600;
white-space:nowrap
}

.spec-table td{
color:#c8d9d7
}

.spec-group-row th{
padding-top:22px;
color:#9ed5d3;
font:600 var(--text-xs) var(--font-mono);
letter-spacing:.4px;
text-transform:uppercase;
border-bottom:1px solid rgba(255,255,255,.2)
}

.empty-panel{
padding:35px;
background:#174344;
color:#c8d9d7;
border-radius:var(--radius-sm);
font-size:13px
}

.related-body{
margin-top:20px
}

#product-not-found .actions{
display:flex;
flex-wrap:wrap;
gap:24px;
margin-top:35px
}

@media(max-width:780px){
.spec-table{
min-width:460px
}
}

/* Product-detail visual refresh: dense product facts remain tied to each product's
   existing technical rows, while the surrounding treatment stays within the established
   page palette and component system. */
.product-hero-media:has(.hero-quick-facts){
flex-direction:column;
align-items:stretch;
justify-content:flex-start;
gap:var(--space-2)
}

.hero-media-image{
display:flex;
flex:1 1 auto;
align-items:center;
justify-content:center;
min-height:0
}

.hero-media-image img{
max-height:100%
}

.hero-quick-facts{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--space-1);
margin:0
}

.hero-quick-facts div{
min-width:0;
padding:var(--space-1);
border-top:1px solid var(--color-line)
}

.hero-quick-facts dt{
color:var(--color-muted);
font:600 var(--text-xs) var(--font-mono);
letter-spacing:.35px;
text-transform:uppercase
}

.hero-quick-facts dd{
margin:4px 0 0;
overflow-wrap:anywhere;
color:var(--color-primary);
font:600 var(--text-sm) var(--font-sans)
}

.feature-grid{
grid-template-columns:repeat(2,minmax(0,1fr))
}

.feature-grid article{
min-height:190px;
padding:var(--space-4)
}

.feature-grid-flat p{
margin-top:var(--space-4);
font-size:var(--text-sm)
}

.technical{
background:var(--color-paper);
color:var(--color-text)
}

.technical .eyebrow{
color:var(--color-eyebrow)
}

.spec-table-wrap{
background:var(--color-paper);
border:1px solid var(--color-line);
border-radius:var(--radius-sm)
}

.spec-table thead{
background:var(--color-primary)
}

.spec-table th,
.spec-table td{
border-bottom:1px solid var(--color-line)
}

.spec-table thead th,
.spec-group-row th{
color:var(--color-paper)
}

.spec-table tbody th{
color:var(--color-primary)
}

.spec-table td{
color:var(--color-muted)
}

.document-list .document-type{
display:inline-flex;
padding:4px var(--space-1);
border-radius:var(--radius-sm);
background:var(--color-teal-tint);
color:var(--color-primary)
}

.document-list h3{
margin-top:var(--space-3)
}

.document-list p{
overflow:hidden;
margin:var(--space-1) 0 0;
text-overflow:ellipsis;
white-space:nowrap
}

.document-list .text-link{
display:inline-block;
margin-top:var(--space-3)
}

/* Registration-gated documentation panel (#restricted-documents, js/restricted-documents.js)
   — a deliberate, isolated Supabase integration scoped to product pages only, see
   docs/ARCHITECTURE.md. Reuses existing tokens/classes (.document-type, .text-link, .button,
   .field/.form-input/.form-status patterns already established by .product-enquiry-form and
   css/contact-page.css) rather than introducing a new visual language. */
.restricted-documents-panel{
margin-top:var(--space-5);
padding-top:var(--space-5);
border-top:1px solid var(--color-line)
}

.restricted-documents-panel>p{
max-width:640px;
margin:var(--space-2) 0 var(--space-4);
color:var(--color-muted)
}

.auth-tabs{
display:flex;
gap:var(--space-3);
margin-bottom:var(--space-3);
border-bottom:1px solid var(--color-line)
}

.auth-tab{
padding:var(--space-1) 0 var(--space-2);
border:0;
border-bottom:2px solid transparent;
background:transparent;
color:var(--color-muted);
font:600 var(--text-sm) var(--font-sans);
letter-spacing:0;
text-transform:none;
cursor:pointer
}

.auth-tab.is-active{
border-bottom-color:var(--color-primary);
color:var(--color-primary)
}

.auth-form{
display:grid;
gap:var(--space-3);
max-width:420px;
padding:var(--space-4);
background:var(--color-paper);
border:1px solid var(--color-line);
border-radius:var(--radius-md)
}

.auth-form .field{
display:flex;
flex-direction:column;
gap:var(--space-1)
}

.auth-form label{
color:var(--color-muted);
font:500 13px/1.35 var(--font-sans);
letter-spacing:.01em;
text-transform:uppercase
}

.auth-form .form-input{
padding:14px 16px;
border:1px solid var(--color-line);
border-radius:var(--radius-sm);
background:#fff;
color:var(--color-text);
font:var(--text-base) var(--font-sans)
}

.auth-form .form-input:focus-visible{
outline:3px solid var(--color-teal-dark);
outline-offset:2px
}

.auth-form .button{
justify-self:start
}

.restricted-documents-panel .form-status{
margin:0;
padding:var(--space-2) var(--space-3);
border:1px solid var(--color-line);
border-radius:var(--radius-sm);
background:var(--color-mist);
color:var(--color-primary);
font:var(--text-sm) var(--font-sans);
line-height:1.5
}

.restricted-documents-panel .form-status[data-state="error"]{
background:#fff
}

.restricted-document-list{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:var(--space-3);
max-width:none
}

.document-card{
display:flex;
flex-direction:column;
gap:var(--space-2);
padding:var(--space-3);
border:1px solid var(--color-line);
border-radius:var(--radius-md);
background:var(--color-paper);
cursor:pointer;
transition:border-color .2s ease, box-shadow .2s ease
}

.document-card:hover{
border-color:var(--color-teal-dark)
}

.document-card:focus-visible{
outline:3px solid var(--color-teal-dark);
outline-offset:2px
}

.document-card[aria-busy="true"]{
opacity:.6;
pointer-events:none
}

.document-cover{
  width:100%;
  height:190px;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  border-radius:8px;
  background:#f2f5f4;
}
.document-cover img{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain
}
.document-card-body{
  display:flex;
  flex:1;
  flex-direction:column;
  gap:var(--space-2);
  min-width:0
}

.document-icon{
width:36px;
height:36px;
border-radius:8px;
display:flex;
align-items:center;
justify-content:center;
background:#fff;
border:1px solid var(--color-line);
color:var(--color-primary)
}

.document-meta-row{
display:flex;
align-items:center;
gap:var(--space-1);
flex-wrap:wrap
}

.document-type-badge{
font:600 var(--text-xs) var(--font-mono);
letter-spacing:.3px;
text-transform:uppercase;
padding:3px 8px;
border-radius:999px;
background:var(--color-primary);
color:#fff
}
.document-type-badge--ifu{background:var(--color-teal-dark);color:var(--color-primary)}
.document-type-badge--certificate{background:var(--color-mist);color:var(--color-teal-dark)}
.document-type-badge--other{background:var(--color-line);color:var(--color-muted)}

.document-format{
font:var(--text-xs) var(--font-mono);
color:var(--color-muted)
}

.document-card h3{
margin:2px 0 0;
font-size:17px;
font-weight:600;
line-height:1.45;
letter-spacing:0;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow:hidden;
min-height:2.9em
}

.download-link{
display:inline-flex;
align-items:center;
gap:6px;
margin-top:auto;
padding:0;
border:0;
background:transparent;
color:var(--color-primary);
font:600 var(--text-sm) var(--font-sans);
cursor:pointer
}
.download-link:hover{text-decoration:underline}

.restricted-documents-panel>.text-link{
display:inline-block;
margin-top:var(--space-3)
}

/* Hub-only additions (ifu/index.html's unscoped, searchable listing) — the per-product
   panel never renders these two classes, see js/restricted-documents.js. */
.restricted-search-field{
max-width:420px;
margin-bottom:var(--space-4);
display:flex;
flex-direction:column;
gap:var(--space-1)
}

.restricted-search-field label{
color:var(--color-muted);
font:500 13px/1.35 var(--font-sans);
letter-spacing:.01em;
text-transform:uppercase
}

.restricted-search-field .form-input{
padding:14px 16px;
border:1px solid var(--color-line);
border-radius:var(--radius-sm);
background:#fff;
color:var(--color-text);
font:var(--text-base) var(--font-sans)
}

.restricted-search-field .form-input:focus-visible{
outline:3px solid var(--color-teal-dark);
outline-offset:2px
}

.document-product{
margin:0 0 var(--space-1);
color:var(--color-muted);
font:600 var(--text-xs) var(--font-mono);
letter-spacing:.3px;
text-transform:uppercase
}

@media(max-width:900px){
.restricted-document-list{grid-template-columns:repeat(2, 1fr)}
}

@media(max-width:780px){
.auth-form{max-width:none}
}

@media(max-width:600px){
.restricted-document-list{grid-template-columns:1fr}
}

.product-enquiry{
display:grid;
grid-template-columns:1fr 1fr;
gap:8vw;
background:var(--color-mist)
}

.product-enquiry-form{
display:grid;
gap:var(--space-3);
padding:var(--space-4);
background:var(--color-paper);
border:1px solid var(--color-line);
border-radius:var(--radius-md);
box-shadow:var(--shadow-soft)
}

.product-enquiry-form .field{
display:flex;
flex-direction:column;
gap:var(--space-1)
}

.product-enquiry-form label{
color:var(--color-muted);
font:500 13px/1.35 var(--font-sans);
letter-spacing:.01em;
text-transform:uppercase
}

.product-enquiry-form .form-input{
padding:14px 16px;
border:1px solid var(--color-line);
border-radius:var(--radius-sm);
background:var(--color-paper);
color:var(--color-text);
font:var(--text-base) var(--font-sans)
}

.product-enquiry-form .form-textarea{resize:vertical}
.product-enquiry-form .form-input:focus-visible{outline:3px solid var(--color-teal-dark);outline-offset:2px}
.product-enquiry-form .button{justify-self:start}

.product-enquiry-form .form-status{
margin:0;
padding:var(--space-2) var(--space-3);
border:1px solid var(--color-line);
border-radius:var(--radius-sm);
background:var(--color-mist);
color:var(--color-primary)
}

.product-enquiry-form .hp-field{position:absolute;width:1px;height:1px;overflow:hidden;left:-9999px}

@media(max-width:780px){
.hero-quick-facts{grid-template-columns:1fr}
.feature-grid{grid-template-columns:1fr}
.product-enquiry{grid-template-columns:1fr;gap:var(--space-4)}
.product-enquiry-form .button{justify-self:stretch}
}

/* Full-width technical reading layout: the heading no longer competes with the table for
   horizontal space, and tables wrap within the page instead of creating a scroll region. */
.technical{
display:block
}

#technical-body{
width:100%;
margin-top:var(--space-4)
}

#technical-body > .spec-table-wrap + .spec-table-wrap{
margin-top:2rem
}

.spec-table-wrap{
overflow:hidden
}

.spec-table,
.spec-table--comparison{
min-width:0;
table-layout:fixed
}

.spec-table th,
.spec-table td{
overflow-wrap:anywhere;
white-space:normal
}

.spec-table tbody th{
white-space:normal
}

.spec-table--comparison th:first-child,
.spec-table--comparison td:first-child{
width:28%
}

/* The enquiry surface uses the established primary-dark token; the form card and its fields
   retain distinct translucent layers without introducing a separate page colour. */
.product-enquiry{
background:var(--color-primary-dark);
color:var(--color-paper)
}

/* Product-detail-only override: other routes retain the shared mixed heading treatment. */
#product-content h2 em{
font-family:inherit;
font-style:normal;
font-weight:inherit;
letter-spacing:inherit
}

.product-enquiry .eyebrow{
color:var(--color-eyebrow)
}

.product-enquiry-form label{
color:var(--color-teal)
}

.product-enquiry h2,
.product-enquiry h2 em{
color:var(--color-paper)
}

.product-enquiry-intro>p:not(.eyebrow){
max-width:420px;
margin-top:var(--space-3);
color:var(--color-teal-tint)
}

.product-enquiry-details{
display:grid;
gap:var(--space-1);
margin-top:var(--space-4)
}

.product-enquiry-details a{
color:var(--color-paper);
font:500 15px/1.45 var(--font-sans)
}

.product-enquiry-form{
padding:var(--space-4);
background:rgba(255,255,255,.05);
border:.8px solid rgba(255,255,255,.13);
border-radius:14px;
box-shadow:none
}

.product-enquiry-form .form-input{
background:rgba(255,255,255,.06);
border:.8px solid rgba(255,255,255,.16);
border-radius:9px;
color:var(--color-paper)
}

.product-enquiry-form .form-input::placeholder{
color:var(--color-teal-tint)
}

.product-enquiry-form .button{
border-radius:999px;
background:var(--color-teal);
color:var(--color-primary)
}

.product-enquiry-form .form-status{
background:var(--color-teal-tint);
color:var(--color-primary)
}

/* Product-detail-only prototype refinements. These live here rather than in base.css so
   sitewide headings, buttons and hero patterns retain their existing treatment. */
#product-content #product-hero{
display:grid;
grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
height:auto;
min-height:0;
background:var(--color-paper);
color:var(--color-primary)
}

#product-content #product-hero>div:first-child{
max-width:760px;
padding:var(--space-7) var(--page-padding);
}

#product-content #product-hero h1{
font-size:50px;
line-height:56px;
font-weight:700;
letter-spacing:normal
}

#product-content h2{
font-size:36px;
font-weight:700;
letter-spacing:normal
}

#product-content .eyebrow{
font-size:12px;
font-weight:400
}

/* The modern product hero uses the paper surface, so its eyebrow follows the shared
   light-surface token rather than the conflicting legacy detail-hero declarations. */
#product-content .detail-hero .eyebrow{
color:var(--color-eyebrow)
}

.product-hero-pills{
display:flex;
flex-wrap:wrap;
gap:var(--space-1);
align-items:center;
margin-bottom:var(--space-3)
}

.product-hero-pills .product-made-in-house,
.product-category-pill,
.product-brand-pill{
display:inline-flex;
align-items:center;
width:max-content;
margin:0;
padding:5px 9px;
border-radius:999px;
font:500 var(--text-sm)/1.2 var(--font-mono);
letter-spacing:.3px;
text-transform:uppercase
}

.product-hero-pills .product-made-in-house{
background:var(--color-primary-dark);
color:#acf8ed;
font-weight:400;
text-transform:uppercase
}

.product-category-pill,
.product-brand-pill{
background:var(--color-teal-tint);
color:var(--color-teal-dark)
}

.product-brand-pill{margin:var(--space-2) 0 0}
.product-brand-pill:hover{text-decoration:underline}

#product-content #product-hero .actions{
display:flex;
flex-wrap:wrap;
gap:var(--space-2);
margin-top:var(--space-4)
}

#product-content .button-secondary{
border:1px solid var(--color-line);
background:transparent;
color:var(--color-primary)
}

#product-content #product-hero .product-hero-media{
align-self:center;
width:auto;
height:auto;
min-height:0;
margin:var(--space-6) var(--page-padding) var(--space-6) 0
}

#product-content #product-hero .product-hero-media:has(img){
width:auto;
height:auto;
padding:var(--space-4);
border:1px solid var(--color-line);
border-radius:var(--radius-lg);
background:#fff;
box-shadow:var(--shadow-soft)
}

#product-content #product-hero .hero-media-image{
display:flex;
align-items:center;
justify-content:center;
min-height:360px
}

#product-content #product-hero .product-hero-media img{
max-height:480px
}

.product-enquiry-form select.form-input{
color-scheme:dark
}

.product-enquiry-form select.form-input option{
background-color:var(--color-primary-dark);
color:var(--color-paper)
}

.product-enquiry-form .form-input:focus-visible{
outline:2px solid var(--color-teal);
outline-offset:2px
}

.product-enquiry-form .button:hover{
box-shadow:none
}

.product-enquiry-form .button:focus-visible{
outline:2px solid var(--color-teal-tint);
outline-offset:3px;
box-shadow:0 0 0 1px var(--color-primary-dark)
}

@media(max-width:780px){
#product-content #product-hero{
grid-template-columns:1fr
}

#product-content #product-hero>div:first-child{
padding:var(--space-6) var(--page-padding)
}

#product-content #product-hero h1{
font-size:50px;
line-height:56px
}

/* A handful of catalogue names contain one long, unbroken technical word. Preserve the
   approved 50px treatment for ordinary product titles, but let only those titles contract
   at phone widths rather than expanding the document wider than the viewport. */
#product-content #product-hero h1[data-responsive-title="true"]{
font-size:clamp(29px,9.8vw - 2.5px,38px);
line-height:1.1
}

#product-content #product-hero .product-hero-media,
#product-content #product-hero .product-hero-media:has(img){
width:auto;
height:auto;
margin:0 var(--page-padding) var(--space-5);
padding:var(--space-3)
}

#product-content #product-hero .hero-media-image{
min-height:240px
}

#product-content #product-hero .product-hero-media img{
max-height:360px
}
}

/* Keep long, unbroken catalogue terms inside the still two-column hero at the
   781–1015px intermediate band. Ordinary titles retain the approved 50px size. */
@media(min-width:781px) and (max-width:1015px){
#product-content #product-hero h1[data-responsive-title="true"]{
font-size:38px;
line-height:1.1
}
}

/* Hero layout: the media panel is first in document order and occupies the left column.
   Gallery markup is rendered here once, so thumbnail interaction is shared with the former
   Overview gallery rather than being duplicated. */
#product-content #product-hero{
grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
align-items:center
}

#product-content #product-hero .product-hero-media{
grid-column:1;
display:block;
width:auto;
height:auto;
min-height:0;
margin:var(--space-6) 0 var(--space-6) var(--page-padding);
padding:34px;
border:.8px solid rgb(233,239,238);
border-radius:14px;
background:rgb(241,248,246);
box-shadow:none
}

#product-content #product-hero .product-hero-media:has(img){
width:auto;
height:auto;
padding:34px;
border:.8px solid rgb(233,239,238);
border-radius:14px;
background:rgb(241,248,246);
box-shadow:none
}

#product-content #product-hero .product-hero-copy{
grid-column:2;
align-self:center;
min-width:0;
max-width:760px;
padding:var(--space-7) var(--page-padding)
}

#product-content #product-hero .gallery-media{
height:420px
}

#product-content #product-hero #product-hero-summary{
max-width:610px;
margin:var(--space-3) 0 0;
overflow-wrap:break-word
}

#product-content #product-hero .hero-quick-facts{
max-width:610px;
margin:var(--space-5) 0 0
}

#product-content #product-hero[data-has-gallery="false"]{
grid-template-columns:1fr
}

#product-content #product-hero[data-has-gallery="false"] .product-hero-media{
display:none
}

@media(max-width:780px){
#product-content #product-hero{
grid-template-columns:1fr
}

#product-content #product-hero .product-hero-media,
#product-content #product-hero .product-hero-media:has(img){
width:auto;
height:auto;
margin:var(--space-4) var(--page-padding) 0;
padding:34px
}

#product-content #product-hero .product-hero-copy{
grid-column:1;
padding:var(--space-5) var(--page-padding) var(--space-6)
}

#product-content #product-hero .gallery-media{
height:280px
}
}

@media(max-width:780px){
.spec-table th,
.spec-table td{
padding:var(--space-1);
font-size:var(--text-xs)
}

.spec-table thead th{
padding-right:3px;
padding-left:3px;
overflow-wrap:normal;
word-break:normal;
white-space:normal;
letter-spacing:0
}

.spec-table thead th:first-child{white-space:nowrap}
}

/* Product detail inherits the global Sterifast typography system. */
#product-content{
font-family:var(--font-sans)
}

#product-content button,
#product-content input,
#product-content select,
#product-content textarea{
font-family:var(--font-sans)
}

/* A product-detail wrapper mirrors .section-pad's usable content width exactly. */
#product-content #product-hero{
display:block
}

#product-content #product-hero>div.product-hero-grid{
display:grid;
grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
align-items:center;
width:auto;
max-width:none;
margin:0 max(var(--page-padding), calc((100vw - 1280px) / 2));
padding:0
}

#product-content #product-hero .product-hero-gallery{
grid-column:1;
min-width:0;
margin:var(--space-6) 0
}

#product-content #product-hero .product-hero-media{
margin:0;
grid-column:auto
}

#product-content #product-hero .product-hero-copy{
grid-column:2;
padding:var(--space-7) 0 var(--space-7) var(--space-6)
}

#product-content #product-hero[data-has-gallery="false"] .product-hero-grid{
grid-template-columns:1fr
}

/* Tabs receive explicit active affordance; aria-current is maintained by the product
   scroll-spy in product-gallery.js / product-page.js. */
#product-content .product-subnav{
gap:0;
padding:0 max(var(--page-padding), calc((100vw - 1280px) / 2))
}

#product-content .product-subnav a{
display:inline-flex;
align-items:center;
min-height:48px;
padding:16px var(--space-2) calc(16px - 1.6px);
border-bottom:1.6px solid transparent;
font:700 14.5px/1.2 var(--font-sans);
letter-spacing:0;
text-transform:none;
transition:border-bottom-color 0.15s ease
}

#product-content .product-subnav a:not([aria-current="true"]):hover{
border-bottom-color:color-mix(in srgb,var(--color-teal-dark) 40%,transparent)
}

#product-content .product-subnav a[aria-current="true"]{
border-bottom-color:var(--color-teal-dark)
}

/* Five fixed square slots are the gallery target. Short galleries centre their fixed-size
   group; galleries above five move into the scroll rail between edge-aligned controls. */
#product-content .gallery-thumbnails{
display:flex;
justify-content:center;
gap:10px;
padding:0;
overflow:visible
}

#product-content .gallery-thumbnail{
width:calc((100% - 40px) / 5);
height:auto;
aspect-ratio:1/1;
min-width:0;
border-radius:9px
}

#product-content .gallery-thumbnails--scrollable{
display:flex;
justify-content:flex-start;
gap:10px;
padding:0;
overflow-x:auto
}

#product-content .gallery-thumbnails--scrollable .gallery-thumbnail{
width:calc((100% - 40px) / 5);
min-width:calc((100% - 40px) / 5)
}

#product-content .gallery-thumbnails-wrap--scrollable{
display:grid;
grid-template-columns:32px minmax(0,1fr) 32px;
align-items:center;
column-gap:10px;
width:100%;
margin-left:0
}

#product-content .gallery-thumbnails-wrap--scrollable::after{
position:absolute;
top:0;
right:42px;
bottom:0;
width:54px;
content:'';
pointer-events:none;
background:linear-gradient(90deg,rgba(255,255,255,0),var(--color-paper))
}

#product-content .gallery-thumbnails-wrap{margin-top:var(--space-2)}

#product-content .gallery-thumb-nav{
position:static;
transform:none;
border-color:var(--color-line);
background:var(--color-paper);
box-shadow:none
}

#product-content .gallery-thumb-nav:disabled{
opacity:.42;
cursor:default
}

@media(max-width:780px){
#product-content .gallery-thumbnails-wrap--scrollable{
grid-template-columns:24px minmax(0,1fr) 24px;
column-gap:2px;
width:100%;
margin-left:0
}

#product-content .gallery-thumbnails-wrap--scrollable::after{right:26px}
#product-content .gallery-thumb-nav{width:24px;height:24px}
}

@media(max-width:360px){
#product-content .gallery-thumbnails-wrap--scrollable{
grid-template-columns:20px minmax(0,1fr) 20px;
column-gap:2px;
width:100%;
margin-left:0
}

#product-content .gallery-thumbnails-wrap--scrollable::after{right:22px}
#product-content .gallery-thumb-nav{width:20px;height:20px}
}

/* Three columns on desktop, then two and finally one as space narrows. */
#product-content .feature-grid{
grid-template-columns:repeat(3,minmax(0,1fr))
}

/* Overview keeps the editorial title and full product prose separate from the Hero gallery. */
#product-content .product-overview{display:block}

#product-content .product-overview-grid{
display:grid;
grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
gap:8vw;
align-items:start
}

#product-content .product-overview-copy p{
max-width:610px;
margin:0 0 var(--space-3);
color:var(--color-muted)
}

@media(min-width:781px) and (max-width:1015px){
#product-content .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:780px){
#product-content #product-hero>div.product-hero-grid{
grid-template-columns:1fr;
width:auto
}

#product-content #product-hero .product-hero-gallery{grid-column:1;margin:var(--space-4) 0 0}

#product-content #product-hero .product-hero-media,
#product-content #product-hero .product-hero-media:has(img){
margin:0
}

#product-content #product-hero .product-hero-copy{
grid-column:1;
padding:var(--space-5) 0 var(--space-6)
}

#product-content .feature-grid{grid-template-columns:1fr}

#product-content .product-overview-grid{grid-template-columns:1fr;gap:var(--space-5)}
}


/* Documents hub: compact finder/auth presentation. */
#documents-hub .restricted-documents-panel{margin-top:0;padding-top:0;border-top:0}
#documents-hub .section-head{margin-bottom:var(--space-4)}
#documents-hub .documents-access{max-width:760px;margin-bottom:var(--space-5)}
.documents-access-actions{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-3)}
.documents-auth-drawer{margin-top:var(--space-3)}
.documents-session{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin:0 0 var(--space-4);padding:12px 16px;border:1px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-mist);color:var(--color-muted);font-size:var(--text-sm)}
.documents-session .text-link{margin:0;border:0;background:transparent;color:var(--color-primary);font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.document-finder{display:grid;grid-template-columns:minmax(240px,1.6fr) repeat(3,minmax(150px,1fr));gap:var(--space-3);align-items:end;margin:0 0 var(--space-4)}
.document-finder .field{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.document-finder label{display:flex;flex-direction:column;gap:var(--space-1);color:var(--color-muted);font:600 12px/1.3 var(--font-sans);letter-spacing:.02em;text-transform:uppercase}
.document-finder .form-input{width:100%;min-height:46px;padding:10px 12px;border:1px solid var(--color-line);border-radius:var(--radius-sm);background:#fff;color:var(--color-text);font:var(--text-sm) var(--font-sans)}
@media(max-width:900px){.document-finder{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.document-finder{grid-template-columns:1fr}.documents-session{align-items:flex-start}}

/* Documents page spacing; the photo hero is styled in documents-hero.css. */
body:has(#documents-hub) #library{padding-top:64px}

.documents-session-actions{display:flex;align-items:center;gap:var(--space-4)}
.documents-session-actions .text-link{white-space:nowrap}
.documents-access>.documents-session{margin-bottom:var(--space-3)}
.documents-access>p{max-width:680px;margin:0 0 var(--space-3);color:var(--color-muted)}


/* Customer document access forms */
.documents-auth-drawer{max-width:720px;margin-top:18px;padding:24px;border:1px solid var(--color-line);border-radius:14px;background:#fff}
.documents-auth-drawer .auth-tabs{display:flex;gap:24px;margin:0 0 24px;padding:0;border-bottom:1px solid var(--color-line)}
.documents-auth-drawer .auth-tab{position:relative;padding:0 0 12px;border:0;background:transparent;color:var(--color-muted);font:600 var(--text-sm) var(--font-sans);cursor:pointer}
.documents-auth-drawer .auth-tab.is-active{color:var(--color-primary)}
.documents-auth-drawer .auth-tab.is-active:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--color-primary)}
.documents-auth-drawer .auth-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;max-width:none;padding:0;border:0;background:transparent}
.documents-auth-drawer .auth-form .field{display:flex;flex-direction:column;gap:7px;min-width:0}
.documents-auth-drawer .auth-form label{display:flex;flex-direction:column;gap:7px;color:var(--color-muted);font:600 12px/1.3 var(--font-sans);letter-spacing:.02em;text-transform:uppercase}
.documents-auth-drawer .auth-form .form-input{width:100%;min-height:48px;padding:11px 13px;border:1px solid var(--color-line);border-radius:8px;background:#fff;color:var(--color-text);font:var(--text-sm) var(--font-sans);transition:border-color .18s ease,box-shadow .18s ease}
.documents-auth-drawer .auth-form .form-input:focus{outline:0;border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(94,183,184,.16)}
.documents-auth-drawer .auth-form .form-status{grid-column:1/-1;margin:0}
.documents-auth-drawer .auth-form>.button{grid-column:1/-1;justify-self:start;min-height:44px;padding:10px 18px;border:1px solid var(--color-primary);border-radius:8px;background:var(--color-primary);color:#fff;font-weight:700;box-shadow:none}
.documents-auth-drawer .auth-form>.button:hover{background:var(--color-primary-dark,var(--color-primary));transform:none}
@media(max-width:680px){.documents-auth-drawer{padding:18px}.documents-auth-drawer .auth-form{grid-template-columns:1fr}}


/* Keep document results visually separated from customer access. */
.restricted-document-list + .documents-access,
.documents-access + .restricted-document-list{margin-top:28px}


/* Keep customer access session bar the same width in signed-in and signed-out states. */
.documents-access>.documents-session{width:100%;max-width:none;box-sizing:border-box}


/* Documents hub: access bar follows the full finder width in every auth state. */
#documents-hub .documents-access{max-width:none;width:100%}
#documents-hub .documents-access>.documents-session{width:100%}


/* Auth submit buttons use the same interaction language as site CTAs. */
.documents-auth-drawer .auth-form>.button{
  position:relative;
  overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.documents-auth-drawer .auth-form>.button:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(13,63,59,.16);
}
.documents-auth-drawer .auth-form>.button:active{
  transform:translateY(0);
  box-shadow:0 3px 8px rgba(13,63,59,.12);
}


/* Interactive auth actions should use the pointer cursor. */
.documents-auth-drawer .auth-form>.button,
.documents-access button,
.documents-access a[role="button"]{cursor:pointer}


/* Finder controls are interactive. */
.document-finder select.form-input{cursor:pointer}
.document-finder input[type="search"].form-input{cursor:text}


/* Documents hub: focused document-type navigation for launch. */
#documents-hub .document-type-tabs{
display:flex;
flex-wrap:wrap;
gap:.65rem;
margin:0 0 var(--space-4)
}
#documents-hub .document-type-tab{
min-width:9rem;
padding:.85rem 1.1rem;
border:1px solid var(--color-line);
border-radius:var(--radius-sm);
background:#fff;
color:var(--color-primary);
font:700 var(--text-sm) var(--font-sans);
cursor:pointer;
transition:border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease
}
#documents-hub .document-type-tab:hover{
border-color:var(--color-teal-dark);
transform:translateY(-1px)
}
#documents-hub .document-type-tab.is-active{
border-color:var(--color-primary);
background:var(--color-primary);
color:#fff
}
#documents-hub .document-finder{
grid-template-columns:minmax(240px,1.7fr) minmax(180px,1fr) minmax(150px,.8fr)
}
#documents-hub .documents-locked-state{
margin:0 0 var(--space-4);
padding:1.2rem 1.3rem;
border:1px solid var(--color-line);
border-left:4px solid var(--color-teal-dark);
background:var(--color-mist)
}
#documents-hub .documents-locked-state h3{
margin:0 0 .35rem;
font-size:1rem
}
#documents-hub .documents-locked-state p{
margin:0;
color:var(--color-muted)
}
@media (max-width:900px){
#documents-hub .document-finder{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
#documents-hub .document-type-tabs{display:grid;grid-template-columns:1fr}
#documents-hub .document-type-tab{width:100%}
#documents-hub .document-finder{grid-template-columns:1fr}
}


/* Documents hub refinement: stronger customer-access panel and site-aligned type controls. */
#documents-hub .documents-access{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:1.5rem;
width:100%;
margin:0 0 var(--space-4);
padding:1.25rem 1.35rem;
border:1px solid var(--color-line);
border-radius:var(--radius-md);
background:var(--color-mist)
}
#documents-hub .documents-access-copy{
display:grid;
gap:.22rem;
min-width:0
}
#documents-hub .documents-access-label{
color:var(--color-teal-dark);
font:700 var(--text-xs) var(--font-mono);
letter-spacing:.55px;
text-transform:uppercase
}
#documents-hub .documents-access-copy strong{
color:var(--color-primary);
font-size:1rem
}
#documents-hub .documents-access-copy p{
max-width:46rem;
margin:0;
color:var(--color-muted);
font-size:.86rem;
line-height:1.5
}
#documents-hub .documents-session-actions{
display:flex;
align-items:center;
justify-content:flex-end;
gap:.65rem
}
#documents-hub .documents-access-action{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:.7rem 1rem;
border-radius:var(--radius-md);
font:700 .82rem var(--font-sans);
cursor:pointer;
transition:transform var(--transition),background var(--transition),border-color var(--transition),color var(--transition)
}
#documents-hub .documents-access-action:hover{transform:translateY(-2px)}
#documents-hub .documents-access-action--primary{
border:1px solid var(--color-primary);
background:var(--color-primary);
color:#fff
}
#documents-hub .documents-access-action--primary:hover{
background:var(--color-teal-dark);
border-color:var(--color-teal-dark)
}
#documents-hub .documents-access-action--secondary{
border:1px solid var(--color-primary);
background:transparent;
color:var(--color-primary)
}
#documents-hub .documents-access-action--secondary:hover{
background:#fff
}

#documents-hub .document-type-tabs{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:.75rem;
margin:0 0 var(--space-4)
}
#documents-hub .document-type-tab{
display:flex;
align-items:center;
justify-content:center;
min-height:54px;
padding:.85rem 1rem;
border:1px solid var(--color-line);
border-radius:var(--radius-md);
background:#fff;
color:var(--color-primary);
font:700 .9rem var(--font-sans);
letter-spacing:0;
text-transform:none;
cursor:pointer;
box-shadow:none;
transition:transform var(--transition),border-color var(--transition),background var(--transition),color var(--transition)
}
#documents-hub .document-type-tab:hover{
border-color:var(--color-teal-dark);
transform:translateY(-2px)
}
#documents-hub .document-type-tab.is-active{
border-color:var(--color-primary);
background:var(--color-primary);
color:#fff
}
#documents-hub .document-type-tab span{
margin-left:.45rem;
font-size:.78rem
}

@media (max-width:780px){
#documents-hub .documents-access{
grid-template-columns:1fr;
align-items:start
}
#documents-hub .documents-session-actions{
justify-content:flex-start
}
}
@media (max-width:620px){
#documents-hub .document-type-tabs{
grid-template-columns:1fr
}
#documents-hub .documents-access-action{
flex:1
}
}


/* Shared customer-access treatment on product Documentation panels.
   /documents/ has its own wider hub layout below; product pages use this compact variant. */
#restricted-documents .documents-access{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:1.25rem;
margin:var(--space-4) 0;
padding:1.15rem 1.25rem;
border:1px solid var(--color-line);
border-radius:var(--radius-md);
background:var(--color-mist)
}
#restricted-documents .documents-access-copy{
display:grid;
gap:.2rem;
min-width:0
}
#restricted-documents .documents-access-label{
color:var(--color-teal-dark);
font:700 var(--text-xs) var(--font-mono);
letter-spacing:.55px;
text-transform:uppercase
}
#restricted-documents .documents-access-copy strong{
color:var(--color-primary);
font-size:1rem
}
#restricted-documents .documents-access-copy p{
max-width:42rem;
margin:0;
color:var(--color-muted);
font-size:.86rem;
line-height:1.5
}
#restricted-documents .documents-session-actions{
display:flex;
align-items:center;
gap:.65rem
}
#restricted-documents .documents-access-action{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:.65rem .95rem;
border-radius:var(--radius-md);
font:700 .8rem var(--font-sans);
cursor:pointer;
transition:transform var(--transition),background var(--transition),border-color var(--transition),color var(--transition)
}
#restricted-documents .documents-access-action:hover{transform:translateY(-2px)}
#restricted-documents .documents-access-action--primary{
border:1px solid var(--color-primary);
background:var(--color-primary);
color:#fff
}
#restricted-documents .documents-access-action--primary:hover{
background:var(--color-teal-dark);
border-color:var(--color-teal-dark)
}
#restricted-documents .documents-access-action--secondary{
border:1px solid var(--color-primary);
background:transparent;
color:var(--color-primary)
}
#restricted-documents .documents-access-action--secondary:hover{background:#fff}
#restricted-documents .documents-auth-drawer{
grid-column:1 / -1;
width:100%;
max-width:none
}
@media(max-width:780px){
#restricted-documents .documents-access{grid-template-columns:1fr}
#restricted-documents .documents-session-actions{justify-content:flex-start;flex-wrap:wrap}
}


/* Product enquiry submit: same visual language as the main Contact form. */
.product-enquiry-submit{
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
margin-top:.35rem;
padding:1rem 1.15rem;
border:1px solid var(--color-teal);
border-radius:var(--radius-sm);
background:var(--color-teal);
color:var(--color-primary);
font:700 .9rem var(--font-sans);
cursor:pointer;
transition:background var(--transition),border-color var(--transition),transform var(--transition)
}
.product-enquiry-submit:hover{
background:#fff;
border-color:#fff;
color:var(--color-primary);
transform:translateY(-2px)
}
.product-enquiry-submit:focus-visible{
outline:3px solid #fff;
outline-offset:3px
}
.product-enquiry-submit .icon{
flex:none
}


/* Public-form readability: interface labels use regular sans proportions rather than
   technical/mono styling. Keep technical metadata (eyebrows, refs, badges) separate. */
.product-enquiry-form label,
.auth-form label,
.restricted-search-field label,
.document-finder label,
.documents-auth-drawer .auth-form label{
font-weight:500;
font-size:13px;
line-height:1.35;
letter-spacing:.01em
}
.product-enquiry-details a{
font-size:15px;
font-weight:500;
line-height:1.5;
letter-spacing:0
}
.product-enquiry-form .form-input{
font-size:15px;
font-weight:400;
line-height:1.5
}
.product-enquiry-form .form-input::placeholder{
font-size:15px;
font-weight:400
}


/* Product features: accessible, borderless two-column checklist on EN/PT pages.
   Override the former numbered-card grid and its monospace span typography. */
#product-content .feature-grid{
  grid-template-columns:1fr;
  border:0
}
#product-content .feature-grid .feature-check-list{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(32px,5vw,72px);
  row-gap:18px;
  margin:0;
  padding:0;
  list-style:none;
  border:0
}
#product-content .feature-check-list li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:0;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none
}
#product-content .feature-check-list li svg{
  flex:none;
  width:20px;
  height:20px;
  margin-top:3px;
  color:#008080
}
#product-content .feature-check-list li span{
  min-width:0;
  overflow-wrap:anywhere;
  font:500 16px/1.7 var(--font-sans);
  color:var(--color-primary)
}
@media(max-width:780px){
  #product-content .feature-grid .feature-check-list{
    grid-template-columns:1fr;
    row-gap:16px
  }
  #product-content .feature-check-list li span{
    font-size:15px
  }
}


/* Bring application cards closer to the heading and let the copy use the
   available width. Applied to the shared product page in both locales. */
#product-content .applications{
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  column-gap:clamp(28px,4vw,60px);
  align-items:start
}
#product-content #applications-body{
  width:100%;
  max-width:none;
  min-width:0;
  align-self:start
}
@media(max-width:780px), (orientation:landscape) and (max-height:500px) and (max-width:1024px){
  #product-content .applications{
    grid-template-columns:minmax(0,1fr);
    row-gap:var(--space-4)
  }
}


/* Consistent product-section reading order: heading first, content below.
   Keep the already stacked Features, Technical, Documentation and Related layouts. */
#product-content .product-overview-grid{
  grid-template-columns:minmax(0,1fr);
  gap:var(--space-4)
}
#product-content .product-overview-copy{
  min-width:0;
  max-width:920px
}
#product-content .product-overview-copy p{
  max-width:none
}
#product-content .applications{
  grid-template-columns:minmax(0,1fr);
  row-gap:var(--space-4)
}
#product-content #applications-body{
  width:100%;
  max-width:920px;
  margin:0
}
#product-content .product-enquiry{
  grid-template-columns:minmax(0,1fr);
  row-gap:var(--space-4)
}
#product-content #product-enquiry-body{
  width:100%;
  max-width:920px;
  min-width:0
}


/* Documents hub: balanced editorial cards. Product-page document panels keep their compact layout. */
#documents-hub .restricted-document-list{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
#documents-hub .document-card{
  display:grid;
  grid-template-columns:minmax(108px,38%) minmax(0,1fr);
  gap:18px;
  align-items:stretch;
  min-height:242px;
  padding:20px;
  background:var(--color-paper);
  box-shadow:0 7px 22px rgba(13,49,45,.045);
}
#documents-hub .document-card:hover{
  box-shadow:0 12px 28px rgba(13,49,45,.09);
}
#documents-hub .document-cover,
#documents-hub .document-cover-placeholder{
  width:100%;
  height:100%;
  min-height:190px;
  max-height:248px;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  border-radius:6px;
  background:linear-gradient(145deg,#f6faf8,#edf5f2);
}
#documents-hub .document-cover img{
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:cover;
  object-position:center center;
}
#documents-hub .document-cover-placeholder{
  flex-direction:column;
  gap:12px;
  color:var(--color-teal-dark);
}
#documents-hub .document-cover-placeholder svg{
  width:45px;
  height:45px;
  stroke-width:1.2;
}
#documents-hub .document-cover-placeholder span{
  font:600 11px/1 var(--font-mono);
  letter-spacing:.13em;
}
#documents-hub .document-card-body{
  gap:12px;
  padding:8px 0 4px;
}
#documents-hub .document-meta-row{
  gap:8px;
  align-items:flex-start;
}
#documents-hub .document-card h3{
  margin:0;
  font-size:17px;
  line-height:1.38;
  min-height:0;
  -webkit-line-clamp:4;
  overflow-wrap:anywhere;
}
#documents-hub .download-link{
  display:flex;
  width:100%;
  align-items:center;
  gap:8px;
  border-top:1px solid var(--color-line);
  padding-top:14px;
}
#documents-hub .download-link::after{
  content:"→";
  margin-left:auto;
  font-size:17px;
}
@media(max-width:1280px){
  #documents-hub .restricted-document-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  #documents-hub .restricted-document-list{grid-template-columns:1fr}
  #documents-hub .document-card{grid-template-columns:minmax(110px,34%) minmax(0,1fr);min-height:215px;padding:16px}
  #documents-hub .document-cover,#documents-hub .document-cover-placeholder{min-height:175px;max-height:230px}
}
@media(max-width:420px){
  #documents-hub .document-card{grid-template-columns:110px minmax(0,1fr);gap:12px;padding:12px}
  #documents-hub .document-card h3{font-size:15px}
  #documents-hub .document-format{font-size:10px}
  #documents-hub .document-cover,#documents-hub .document-cover-placeholder{min-height:175px}
}
.product-enquiry-intro .eyebrow{color:var(--color-teal)}