/* Shared refinements for the static pages, product renderer and admin. */
:root{--gold:#d9a62c;--gold-bright:#edc45b;--ink-70:#bec5d2;--ink-60:#aeb8ca;--r:12px;--r-btn:8px;--ui-border:#748198;--ui-shadow:0 12px 32px rgba(0,0,0,.16);--control-min-height:52px;--control-line-height:1.5;color-scheme:dark}
html{scroll-padding-block:1.5rem}
body{overflow-wrap:break-word}
main:focus{outline:none}
.site-header{background:var(--navy-2);gap:1rem}
.site-nav a{display:inline-flex;align-items:center;min-height:44px}
.site-nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:.55em;text-decoration-thickness:2px}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:44px}
.nav-toggle{width:44px;height:44px}
.hero-sub,.lede,.card p,.foot-about p{line-height:1.8}
.hero h1,.cat-hero h1{letter-spacing:-.015em}
html[dir="rtl"] .hero h1,html[dir="rtl"] .cat-hero h1{letter-spacing:normal}
.grid>*,.hero-grid>*,.form-grid>*,.foot-grid>*,.row2>*,.card-head>*{min-width:0}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.feature-card,.product-card,.market-card{box-shadow:var(--ui-shadow);border-color:var(--line-soft)}
.feature-card .icon-box,.feature-card>svg,.market-title svg,.pc-icon{box-shadow:none}
.product-card:hover,.product-card:focus-within{border-color:var(--gold)}
.product-card:hover .pc-photo img{transform:scale(1.025)}
.cat-hero h1,.cat-cta h2{text-shadow:none}
.pc-cta,.cat-cta .btn{box-shadow:none}
/* Shared geometry, not a fixed label width: long translations can wrap. */
.btn,.pc-cta{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-inline-size:0;max-inline-size:100%;height:auto;min-height:var(--control-min-height);padding:.75rem 1.25rem;font-family:inherit;font-size:1rem;font-weight:700;line-height:var(--control-line-height);border-radius:var(--r-btn);white-space:normal;overflow-wrap:anywhere;text-align:center}
.btn svg,.pc-cta svg{flex-shrink:0}
.btn-row{align-items:stretch;gap:.75rem}
.pc-btn-row{flex-wrap:wrap}
.pc-btn-row .pc-cta{flex:1 1 9rem}
.pc-title-row{align-items:flex-start}
.pc-body h3{overflow-wrap:anywhere}
.pc-facts{line-height:1.8;font-variant-numeric:tabular-nums}
.quote-form{animation:none;will-change:auto;box-shadow:var(--ui-shadow);border-color:var(--line-soft)}
.quote-form:focus-within{animation:none;box-shadow:var(--ui-shadow);border-color:var(--gold)}
.trust li:not(:last-child)::after{animation:none;box-shadow:none;transform:none}
.glow-under::after,.glow-under-light::after{animation:none;opacity:.25}
.field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),.field select,.field textarea,.quote-form .cc-trigger,.quote-form .cc-search,.lead-filters select{border-color:var(--ui-border);font-size:1rem}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-60)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,.quote-form .cc-trigger:focus-visible,.quote-form .cc-search:focus-visible,:focus-visible{outline:3px solid var(--gold-bright);outline-offset:3px}
.field select{padding-inline-end:2.5rem}
html[dir="ltr"] .field select{background-position:right 1.1rem top 1.35rem,right .75rem top 1.35rem}
.cc-list li{min-height:44px}
.quote-form .cc-list li .cc-name,.quote-form .cc-trigger-text{min-width:0;white-space:normal;overflow-wrap:anywhere}
.cc-list li.cc-active{outline:2px solid var(--gold);outline-offset:-2px}
.quote-form .cc-panel{max-height:min(22rem,65vh);overflow:auto}
/* Higher specificity keeps inline form copies from overriding shared rules. */
.quote-form .field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),.quote-form .field select,.quote-form .field textarea,.quote-form .cc-trigger,.quote-form .cc-search{min-height:var(--control-min-height);padding-block:.75rem;line-height:var(--control-line-height)}
/* The native country select stays in the DOM but is visually hidden behind the
   custom picker; the field rules above must not give it a 278px box (320px overflow). */
.field select.sr-only,.quote-form .field select.sr-only{width:1px;height:1px;min-height:0;padding:0;margin:-1px;border:0;overflow:hidden;clip:rect(0 0 0 0)}
.quote-form .field>label,.quote-form .choice legend{font-size:1rem;line-height:var(--control-line-height)}
.quote-form .radios{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:.75rem;align-items:stretch}
.quote-form .radio{min-width:0;min-height:var(--control-min-height);align-items:flex-start;padding:.75rem 1rem;gap:.65rem;font-size:1rem;line-height:var(--control-line-height);text-align:start}
.quote-form .radio input{width:18px;height:18px;min-height:18px;max-height:18px;padding:0;margin-block-start:.2rem}
.quote-form .phone-row input{min-width:0}
.cc-empty{margin:0;padding:.75rem;color:var(--ink-60)}
.cc-empty[hidden]{display:none}
button:disabled{opacity:.65;cursor:wait}
.social a{min-width:44px;min-height:44px}
.foot-col a,.contact-list a{overflow-wrap:anywhere}
.admin-card{box-shadow:var(--ui-shadow)}
.admin-card input[type="password"]{width:100%;padding:.8rem 1rem;background:var(--navy);border:1px solid var(--ui-border);border-radius:var(--r-btn);color:var(--ink);font:inherit}
.product-row,.product-row .actions,.lead-row{flex-wrap:wrap}
.product-row>*,.lead-detail dd{min-width:0;overflow-wrap:anywhere}
.status-actions button,.tab,.lead-filters select{min-height:44px}
.lead-filters>*,.lead-filters select{max-width:100%}
@media(max-width:680px){
  .site-header{display:grid;grid-template-columns:minmax(0,1fr) auto;padding-block:1rem;gap:.5rem .75rem}
  .site-header>a{grid-column:1;grid-row:1;justify-self:start}
  .site-header .nav-toggle{grid-column:2;grid-row:1}
  .site-header .lang{grid-column:1 / -1;grid-row:2;margin-inline-start:0;justify-content:flex-start}
  .site-header .site-nav{grid-column:1 / -1;grid-row:3;width:100%;margin-top:0}
  .site-nav a{display:flex;width:100%;min-height:48px}
  .lang{gap:.25rem}
  .brand-logo{max-width:42vw;height:auto}
  .nav-toggle{margin-inline-start:0}
  .btn-row>.btn{flex:1 1 100%;padding-inline:1rem}
  .cat-cta{padding:1.5rem;margin-top:3rem}
  .lead-detail dl{grid-template-columns:minmax(0,1fr);gap:.25rem}
  .lead-detail dd{margin-bottom:.75rem}
  .product-row .actions{width:100%}
  .product-row .actions .btn{flex:1;padding-inline:.75rem}
  .sticky-cta{align-items:stretch}
  .sticky-cta .btn{min-width:0;min-height:var(--control-min-height);font-size:1rem;padding:.65rem .75rem;line-height:var(--control-line-height)}
  body:has(.sticky-cta){padding-bottom:calc(8rem + env(safe-area-inset-bottom))}
  html:has(.sticky-cta){scroll-padding-bottom:calc(8rem + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .product-card:hover .pc-photo img{transform:none}
}

/* Header with 6 nav links + AR·DE·EN·FR switcher (2026-10-12): tighter gaps on laptop
   widths so the header stays on one row down to ~1220px (DE) / ~1060px (EN/FR); the logo
   uses the site's existing small size (46px) between 901 and 1380px. Spacing only. */
@media (min-width:681px) and (max-width:1440px){
  .site-header{gap:.9rem}
  .site-nav ul{column-gap:1.05rem}
  .lang{gap:.4rem}
}
@media (min-width:901px) and (max-width:1380px){
  .brand-logo{height:46px}
}