/* ============================================================
   Stämm — Our Products (public site scaffold)
   Palette: #FFFFFF page bg · #272727 dark bands (header/footer) · #00DCA1 accent
   Font: Chivo
   ============================================================ */

:root{
  --bg: #FFFFFF;
  --bg-dark: #272727;
  --bg-dark-raised: #313131;
  --text: #272727;
  --text-soft: #5B5B5B;
  --text-on-dark: #FFFFFF;
  --text-on-dark-soft: #D8D8D8;
  --line: rgba(39,39,39,0.14);
  --line-on-dark: rgba(216,216,216,0.18);
  --accent: #00DCA1;
  --accent-ink: #04231A;
  --accent-2: #805AFF;
  --radius: 14px;
  --max-width: 1280px;
}

*{ box-sizing: border-box; }
html{ color-scheme: light; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Chivo", Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }

.visually-hidden{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link{
  position: absolute;
  left: 1rem; top: -3.5rem;
  background: var(--accent);
  color: var(--accent-ink);
  padding: .6rem 1rem;
  border-radius: 6px;
  font-weight: 700;
  z-index: 200;
  transition: top .15s ease;
}
.skip-link:focus{ top: 1rem; }

:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------- Buttons ---------------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1.3rem;
  border-radius: 999px;
  border: none;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-weight: 700;
  font-size: .9rem;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity .16s ease, transform .16s ease, background-color .16s ease, color .16s ease;
}
.btn svg{ width: 14px; height: 14px; }
.btn:hover{ transform: translateY(-1px); }

.btn-primary{
  background: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover{ opacity: .88; }

/* Secondary action: green outline only, no fill. Default text colour is
   white for use on the dark header/hero; put a `.btn-outline--dark` class
   on any instance placed on the white background instead. Both meet WCAG
   AA against their background (white on #272727, and #272727 on white). */
.btn-outline{
  background: transparent;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  padding: .55rem 1.3rem;
}
.btn-outline:hover{ background: rgba(0,220,161,0.14); }

.btn-outline--dark{ color: var(--text); }

/* ---------------- Header ---------------- */
.site-header{
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(39,39,39,0.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.header-inner{
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem 2rem;
}

.logo-link{ display: flex; }

/* Visually one continuous cluster — nav links, Contact us, EN — pinned to
   the right with a single consistent gap, matching the live site. Kept as
   two DOM children (.main-nav / .header-actions) so the mobile hamburger
   can still collapse just the links while Contact us and EN stay visible. */
.nav-group{
  display: flex;
  align-items: center;
  gap: 2rem;
}

.main-nav{
  display: flex;
  align-items: center;
  gap: 2rem;
  font-size: .92rem;
  color: var(--text-on-dark);
}
.main-nav > a{ transition: color .16s ease; }
.main-nav > a:hover{ color: var(--accent); }

.nav-dropdown{ position: relative; }
.nav-dropdown-trigger{
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: none;
  border: none;
  color: var(--text-on-dark);
  font-family: inherit;
  font-size: .92rem;
  cursor: pointer;
  padding: 0;
}
.nav-dropdown-trigger:hover{ color: var(--accent); }
.chevron{ font-size: .7em; }

.nav-dropdown-menu{
  position: absolute;
  top: calc(100% + .9rem);
  left: 0;
  min-width: 160px;
  background: var(--bg);
  color: var(--text);
  border-radius: 10px;
  box-shadow: 0 12px 28px -10px rgba(0,0,0,0.35);
  padding: .5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown-menu a{
  display: block;
  padding: .5rem .7rem;
  border-radius: 6px;
  font-size: .88rem;
}
.nav-dropdown-menu a:hover{ background: rgba(0,220,161,0.12); color: var(--accent-ink); }

.header-actions{ display: flex; align-items: center; gap: 1.4rem; }

/* Plain link pair instead of a dropdown: dropdowns need :hover/:focus-within,
   which touch devices can't reliably trigger on a <button>. Always visible,
   always tappable. */
.lang-switch{
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .92rem;
  color: var(--text-on-dark-soft);
}
.lang-switch-link{ transition: color .16s ease; }
.lang-switch-link:hover{ color: var(--accent); }
.lang-switch-link.is-current{ color: var(--text-on-dark); font-weight: 700; }
.lang-switch-sep{ opacity: .5; }

/* ---------------- Hero ---------------- */
.hero{
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--bg-dark);
}
.hero-media{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(39,39,39,0.55) 0%, rgba(39,39,39,0.15) 45%, rgba(39,39,39,0.75) 100%);
}
.hero-content{
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
  padding: 0 2rem 3.5rem;
  color: var(--text-on-dark);
}
/* ---------------- Breadcrumbs ---------------- */
/* Sits in normal page flow below the hero, on the white background —
   not inside the hero content, so it can't collide with the absolutely
   positioned header. */
.breadcrumb-bar{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.5rem 2rem 0;
}
.breadcrumbs{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  color: var(--text-soft);
}
.breadcrumbs a{ transition: color .16s ease; }
.breadcrumbs a:hover{ color: var(--accent); }
.breadcrumbs .sep{ opacity: .6; }
.breadcrumbs [aria-current="page"]{ color: var(--text); font-weight: 500; }

.hero-content h1{
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 900;
  margin: 0 0 .9rem;
}
.hero-content p{
  max-width: 620px;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--text-on-dark-soft);
  margin: 0;
}

/* ---------------- Products ---------------- */
.products{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 4.5rem 2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 2rem;
}

.product-row{
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.product-row:hover{
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 16px 32px rgba(39,39,39,0.12);
}
.product-info h2 a::after{
  content: '';
  position: absolute;
  inset: 0;
}

.product-media{
  aspect-ratio: 540 / 310;
  border-radius: 10px;
  background: #F0F0F0;
  border: 1px solid var(--line);
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.product-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.product-row:hover .product-media img{ transform: scale(1.05); }

.product-info h2{
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 .85rem;
}
.product-info h2 a{
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .16s ease;
}
.product-info h2 a:hover,
.product-row:hover .product-info h2 a{ color: var(--text); }
.product-info p{
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 1.4rem;
  max-width: 46ch;
}

.btn-icon{
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 38px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  transition: background-color .16s ease, color .16s ease, transform .16s ease;
}
.btn-icon svg{ width: 16px; height: 16px; }
.btn-icon:hover,
.product-row:hover .btn-icon{
  background: var(--bg-dark);
  color: var(--accent);
  transform: translateX(2px);
}

/* ---------------- Product detail page ---------------- */
.product-hero{
  position: relative;
  height: clamp(190px, 20vw, 260px);
  margin-top: 0;
  overflow: hidden;
  background: var(--bg-dark);
}
.product-hero-media{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.product-hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(39,39,39,0.85) 0%, rgba(39,39,39,0.55) 45%, rgba(39,39,39,0.25) 100%);
}
.product-hero-content{
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 0 2rem;
}
.product-hero-content h1{
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 400;
  color: var(--text-on-dark);
  margin: 0;
  line-height: 1.15;
}

.product-detail{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3rem 2rem 0;
}

.gallery-row{
  display: grid;
  grid-template-columns: 90px minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.gallery-thumbs{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.gallery-thumb{
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: 10px;
  border: 1px solid var(--line);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .16s ease;
}
.gallery-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb:hover{ border-color: var(--accent); }

.gallery-main{
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  overflow: hidden;
  background: #F0F0F0;
  cursor: pointer;
}
.gallery-slide{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.gallery-zoom{
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: var(--text);
  z-index: 1;
}
.gallery-zoom svg{ width: 17px; height: 17px; }

/* CSS-only carousel: radios live in .gallery-row, drive both the active
   thumbnail border and which slide is visible in .gallery-main. The last
   slide is always the video (real embed or placeholder), the rest photos. */
.gallery-row:has(#g-slide-1:checked) .slide-1,
.gallery-row:has(#g-slide-2:checked) .slide-2,
.gallery-row:has(#g-slide-3:checked) .slide-3,
.gallery-row:has(#g-slide-4:checked) .slide-4,
.gallery-row:has(#g-slide-5:checked) .slide-5,
.gallery-row:has(#g-slide-6:checked) .slide-6{
  display: block;
}
.gallery-row:has(#g-slide-1:checked) label[for="g-slide-1"],
.gallery-row:has(#g-slide-2:checked) label[for="g-slide-2"],
.gallery-row:has(#g-slide-3:checked) label[for="g-slide-3"],
.gallery-row:has(#g-slide-4:checked) label[for="g-slide-4"],
.gallery-row:has(#g-slide-5:checked) label[for="g-slide-5"],
.gallery-row:has(#g-slide-6:checked) label[for="g-slide-6"]{
  border-color: var(--accent);
}

.gallery-video iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.gallery-video--placeholder{ background: #F0F0F0; }
.video-placeholder-inner{
  position: absolute;
  inset: 0;
  background: #F0F0F0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  color: var(--text-soft);
}
.video-placeholder-inner .play-icon{
  width: 56px; height: 56px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-placeholder-inner .play-icon svg{ width: 20px; height: 20px; margin-left: 2px; }
.video-placeholder-inner span{ font-size: .9rem; font-weight: 700; }

.thumb-play-icon{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(39,39,39,0.35);
}
.thumb-play-icon svg{ width: 22px; height: 22px; color: #FFFFFF; margin-left: 2px; }
.gallery-thumb{ position: relative; }
.gallery-thumb .video-placeholder-inner{ gap: 0; }
.gallery-thumb .play-icon{ width: 28px; height: 28px; }
.gallery-thumb .play-icon svg{ width: 12px; height: 12px; }

.product-summary p{
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 1rem;
}
.product-summary p strong{ font-weight: 700; }
.product-price{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .2rem;
  margin: 0 0 1rem;
}
.product-price .price-amount{
  font-size: 1.85rem;
  font-weight: 900;
  line-height: 1.1;
  color: var(--text);
  white-space: nowrap;
}
.product-price .price-note{
  font-size: .85rem;
  line-height: 1.4;
  color: var(--text-soft);
  max-width: 42ch;
}
.price-maintenance{
  font-size: .88rem;
  color: var(--text-soft);
  margin: -.6rem 0 1rem;
}
.cta-row{ display: flex; gap: .8rem; margin-top: 1.4rem; flex-wrap: wrap; }

/* Segmented pill tabs, CSS-only via :has() */
.product-tabs-wrap{ margin-top: 3rem; }
.tabs-bar{
  display: inline-flex;
  flex-wrap: nowrap;
  gap: .3rem;
  background: var(--bg-dark);
  border-radius: 999px;
  padding: .4rem;
  max-width: 100%;
  overflow-x: auto;
}
.tabs-bar label{
  padding: .6rem 1.2rem;
  border-radius: 999px;
  color: var(--text-on-dark-soft);
  font-size: .92rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .16s ease, color .16s ease;
}
.product-tabs-wrap:has(#tab-description:checked) label[for="tab-description"],
.product-tabs-wrap:has(#tab-details:checked) label[for="tab-details"],
.product-tabs-wrap:has(#tab-technical:checked) label[for="tab-technical"],
.product-tabs-wrap:has(#tab-support:checked) label[for="tab-support"]{
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}

.tab-panel{ display: none; padding-top: 2.75rem; }
.product-tabs-wrap:has(#tab-description:checked) .panel-description{ display: block; }
.product-tabs-wrap:has(#tab-details:checked) .panel-details{ display: block; }
.product-tabs-wrap:has(#tab-technical:checked) .panel-technical{ display: block; }
.product-tabs-wrap:has(#tab-support:checked) .panel-support{ display: block; }

.tab-panel h2{ font-size: 2rem; font-weight: 700; margin: 0 0 1.5rem; }
.tab-panel p{ font-size: 1rem; line-height: 1.6; color: var(--text); margin: 0 0 1.1rem; max-width: 78ch; }
.tab-panel h3{ font-size: 1rem; font-weight: 700; margin: 1.6rem 0 .5rem; }

.offer-list{
  list-style: none;
  margin: .5rem 0 1.6rem;
  padding: 0;
  max-width: 78ch;
}
.offer-list li{
  position: relative;
  padding-left: 1.3rem;
  margin-bottom: .45rem;
  line-height: 1.5;
}
.offer-list li::before{
  content: "+";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.internal-note{
  color: var(--accent-2);
  border-left: 3px solid var(--accent-2);
  padding: .2rem 0 .2rem 1rem;
  margin: 1.5rem 0;
  max-width: 78ch;
  font-size: .95rem;
}

.spec-table{
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}
.spec-table tr{ border: 1px solid var(--line); }
.spec-table td{
  padding: .9rem 1.1rem;
  border: 1px solid var(--line);
  vertical-align: top;
  font-size: .95rem;
}
.spec-table td:first-child{ font-weight: 700; width: 30%; }

.doc-links{
  display: flex;
  flex-direction: column;
  gap: .9rem;
  margin: 0 0 1rem;
}
.doc-links a{
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 1.05rem;
}
.doc-links a:hover{ opacity: .8; }
.doc-links .doc-missing{
  color: var(--text);
  opacity: .55;
  font-size: 1.05rem;
}
.doc-links .doc-missing-tag{
  margin-left: .5rem;
  padding: .1rem .4rem;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  vertical-align: middle;
  opacity: .9;
}

.related{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3rem 2rem 4.5rem;
}
.related h2{ font-size: 2rem; font-weight: 700; margin: 0 0 1.5rem; }
.related-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 320px));
  gap: 1.5rem;
}
.related-card{
  display: block;
  padding: 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.related-card:hover{
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 16px 32px rgba(39,39,39,0.12);
}
.related-card .product-media{ margin-bottom: .85rem; }
.related-card:hover .product-media img{ transform: scale(1.05); }
.related-title{
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
  font-size: 1.05rem;
  transition: color .16s ease;
}
.related-card:hover .related-title{ color: var(--text); }

.faq{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3.5rem 2rem 5rem;
}
.faq h1,
.faq h2{ font-size: 2rem; font-weight: 700; margin: 0 0 1.5rem; max-width: 78ch; }

/* Photo carousel: native horizontal scroll-snap, arrows wired in assets/main.js */
.photo-carousel{ position: relative; margin: 0 0 2.5rem; }
.carousel-track{
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  padding-bottom: .5rem;
}
.carousel-track img{
  flex: 0 0 auto;
  height: 420px;
  width: auto;
  border-radius: 12px;
  background: var(--line);
  scroll-snap-align: start;
}
.carousel-btn{
  position: absolute;
  top: calc(50% - 1.5rem);
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--text);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  cursor: pointer;
}
.carousel-btn:hover{ background: var(--accent); color: var(--accent-ink); }
.carousel-btn svg{ width: 1.3rem; height: 1.3rem; }
.carousel-prev{ left: .75rem; }
.carousel-next{ right: .75rem; }
@media (max-width: 520px){
  .carousel-track img{ height: 260px; }
}
@media (prefers-reduced-motion: reduce){
  .carousel-track{ scroll-behavior: auto; }
}

.pitch{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3.5rem 2rem 5rem;
}
.pitch h2{ font-size: 2rem; font-weight: 700; margin: 0 0 1rem; max-width: 78ch; }
.pitch p{ font-size: 1.05rem; line-height: 1.6; margin: 0 0 1.6rem; max-width: 78ch; }
.pitch-actions{ display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.pitch-link{
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pitch-link:hover{ color: var(--text); }
.faq-item{
  max-width: 78ch;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
}
.faq-item:last-child{ border-bottom: none; padding-bottom: 0; }
.faq-item h3{
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 .5rem;
}
.faq-item h3::before{
  content: "+";
  color: var(--accent);
  font-weight: 900;
  flex-shrink: 0;
}
.faq-item p{
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
  padding-left: 1.4rem;
}

/* ---------------- Modals (contact form + image lightbox) ---------------- */
/* JS-driven (see assets/main.js) rather than the CSS-only radio/checkbox
   tricks used elsewhere: a dialog needs backdrop-click, Escape-to-close and
   focus handling, which pure CSS can't give reliably. */
.modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(20,20,20,0.6);
  backdrop-filter: blur(3px);
}
.modal-overlay[hidden]{ display: none; }

body.modal-open{ overflow: hidden; }

.modal-box{
  position: relative;
  background: var(--bg);
  color: var(--text);
  border-radius: 16px;
  padding: 1.5rem 2.25rem;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.45);
}

.modal-close{
  position: absolute;
  top: 1.1rem; right: 1.1rem;
  width: 38px; height: 38px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity .16s ease;
}
.modal-close svg{ width: 16px; height: 16px; }
.modal-close:hover{ opacity: .85; }

.modal-title{
  color: var(--accent);
  font-size: 1.5rem;
  font-weight: 900;
  margin: 0 0 .85rem;
}

.modal-intro{
  margin: 0 0 1.25rem;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--text);
}

.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem 1.25rem;
}
.form-field{ min-width: 0; }
.form-field--full{ grid-column: 1 / -1; }
.form-field label{
  display: block;
  font-size: .85rem;
  font-weight: 700;
  margin-bottom: .25rem;
}
.form-field .required{ color: #E5484D; }
.form-field input,
.form-field select,
.form-field textarea{
  width: 100%;
  padding: .5rem .7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: .9rem;
}
.form-field textarea{ resize: vertical; min-height: 52px; }
.form-field input[readonly]{
  background: rgba(39,39,39,0.05);
  color: var(--text-soft);
  cursor: default;
}

.phone-field{ display: flex; gap: .5rem; }
.phone-field select,
.phone-field input{ width: auto; }
.phone-field .phone-code-select{ flex: 0 0 132px; }
.phone-field input[type="tel"]{ flex: 1 1 auto; min-width: 0; }

.role-other-input{ margin-top: .4rem; }

.cart-builder{
  display: flex;
  flex-direction: column;
  gap: .35rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .55rem .8rem;
}
.cart-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.cart-item-check{
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
  min-width: 0;
}
.cart-item-check input[type="checkbox"]{
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--accent);
}
.cart-item input[type="number"]{
  width: 52px;
  flex-shrink: 0;
  padding: .3rem .4rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: .88rem;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.form-actions{
  display: flex;
  justify-content: flex-end;
  margin-top: .75rem;
}
.form-grid[hidden],
.form-actions[hidden]{ display: none; }

.btn:disabled{
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

.form-status{
  margin-top: .75rem;
  padding: .65rem .9rem;
  border-radius: 10px;
  font-size: .88rem;
  font-weight: 600;
}
.form-status[hidden]{ display: none; }
.form-status--sending{
  background: rgba(39,39,39,0.05);
  color: var(--text-soft);
}
.form-status--success{
  background: rgba(0,220,161,0.14);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
}
.form-status--error{
  background: rgba(229,72,77,0.1);
  color: #E5484D;
  border: 1px solid rgba(229,72,77,0.4);
}

.modal-overlay--lightbox{ padding: 2.5rem; }
.modal-overlay--lightbox img{
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  display: block;
}
.modal-overlay--lightbox img[hidden]{ display: none; }

.lightbox-video{
  width: min(90vw, 1100px);
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}
.lightbox-video iframe{ width: 100%; height: 100%; border: 0; display: block; }

.lightbox-video-placeholder{
  position: relative;
  width: min(90vw, 900px);
  aspect-ratio: 3 / 2;
  border-radius: 10px;
  overflow: hidden;
}

.lightbox-nav{
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: var(--text);
  z-index: 1;
  transition: opacity .16s ease, transform .16s ease;
}
.lightbox-nav:hover{ opacity: .85; }
.lightbox-nav svg{ width: 20px; height: 20px; }
.lightbox-prev{ left: 1.25rem; }
.lightbox-next{ right: 1.25rem; }

@media (max-width: 640px){
  .lightbox-nav{ width: 38px; height: 38px; }
  .lightbox-prev{ left: .6rem; }
  .lightbox-next{ right: .6rem; }
}

/* ---------------- Privacy / cookie consent ---------------- */
/* Shown once (tracked in localStorage, see assets/main.js); a persistent
   floating pill lets the visitor reopen it later to change their choice. */
.privacy-consent{
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 1200;
  width: calc(100% - 3rem);
  max-width: 900px;
  background: var(--bg-dark);
  color: var(--text-on-dark-soft);
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.6);
}
.privacy-consent[hidden]{ display: none; }

.privacy-consent__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.privacy-consent__copy{ max-width: 640px; }
.privacy-consent__title{
  color: var(--text-on-dark);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 .5rem;
}
.privacy-consent__copy p{ margin: 0; font-size: .86rem; line-height: 1.5; }

.privacy-consent__actions{ display: flex; gap: .75rem; flex-shrink: 0; }
.privacy-consent__actions .btn{ padding: .55rem 1.2rem; }

.privacy-consent-settings{
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 1100;
  padding: .5rem 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--line-on-dark);
  background: var(--bg-dark);
  color: var(--text-on-dark-soft);
  font-family: inherit;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,0.5);
  transition: border-color .16s ease, color .16s ease;
}
.privacy-consent-settings:hover{ border-color: var(--accent); color: var(--accent); }
.privacy-consent-settings[hidden]{ display: none; }

@media (max-width: 640px){
  .privacy-consent{ padding: 1.25rem; bottom: 1rem; width: calc(100% - 2rem); }
  .privacy-consent__inner{ flex-direction: column; align-items: stretch; gap: 1.25rem; }
  .privacy-consent__actions{ justify-content: flex-end; }
}

/* ---------------- Footer ---------------- */
.site-footer{
  background: var(--bg-dark);
  color: var(--text-on-dark-soft);
}
.footer-inner{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3rem 2rem;
}
/* Links pinned left, social+offices pinned right as their own block —
   same space-between pattern as the header, not a stretched grid column.
   No logo here: the live footer doesn't show one. */
.footer-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
}

.footer-links{
  display: flex;
  flex-direction: column;
  gap: .65rem;
  font-size: .92rem;
}
.footer-links a{ transition: color .16s ease; }
.footer-links a:hover{ color: var(--accent); }

.footer-secondary{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.5rem;
}

.footer-offices{
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.office{ display: flex; flex-direction: column; gap: .3rem; }
.office-name{
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.office-place{ font-size: .85rem; }

.social-row{ display: flex; align-items: center; gap: .9rem; }
.social-link{
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-on-dark-soft);
  transition: color .16s ease, transform .16s ease;
}
.social-link svg{ width: 100%; height: 100%; }
.social-link:hover{ color: var(--accent); transform: translateY(-2px); }

/* Legal strip below the main footer row: copyright + Privacy Policy. */
.footer-legal{
  max-width: var(--max-width);
  margin: 2rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-on-dark);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  font-size: .8rem;
  color: var(--text-on-dark-soft);
}
.footer-legal a{ transition: color .16s ease; }
.footer-legal a:hover{ color: var(--accent); }

/* ---------------- Mobile nav toggle ---------------- */
/* Hidden above 900px; below it, replaces the plain "nav disappears" gap —
   same checkbox/label trick as the tabs and gallery, no JS. */
.mobile-nav-toggle{
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--text-on-dark);
  cursor: pointer;
  flex-shrink: 0;
}
.mobile-nav-toggle svg{ width: 22px; height: 22px; }
.mobile-nav-toggle .icon-close{ display: none; }
.header-inner:has(#mobile-nav-toggle:checked) .mobile-nav-toggle .icon-open{ display: none; }
.header-inner:has(#mobile-nav-toggle:checked) .mobile-nav-toggle .icon-close{ display: block; }

/* ---------------- Responsive ---------------- */
@media (max-width: 900px){
  .mobile-nav-toggle{ display: flex; }
  .header-inner{ position: relative; }

  .main-nav{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg-dark);
    padding: .25rem 2rem 1.25rem;
    box-shadow: 0 16px 28px -14px rgba(0,0,0,0.5);
  }
  .header-inner:has(#mobile-nav-toggle:checked) .main-nav{ display: flex; }

  .main-nav > a{
    padding: .8rem 0;
    border-bottom: 1px solid var(--line-on-dark);
  }
  .main-nav .nav-dropdown{ border-bottom: 1px solid var(--line-on-dark); }
  .main-nav .nav-dropdown-trigger{
    width: 100%;
    justify-content: space-between;
    padding: .8rem 0;
  }
  /* On touch, the "Company" submenu can't rely on :hover — show it inline. */
  .main-nav .nav-dropdown-menu{
    position: static;
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: transparent;
    padding: 0 0 .6rem 1rem;
  }
  .main-nav .nav-dropdown-menu a{ color: var(--text-on-dark-soft); }
  .main-nav .nav-dropdown-menu a:hover{ background: transparent; color: var(--accent); }

  .products{ grid-template-columns: repeat(2, 1fr); }
  .footer-top{ flex-direction: column; gap: 2rem; }
  .footer-secondary{ align-items: flex-start; width: 100%; }
  .footer-offices{ gap: 1.75rem; }
  .gallery-row{ grid-template-columns: 1fr; }
  .gallery-thumbs{ flex-direction: row; }
  .gallery-thumb{ width: 90px; flex-shrink: 0; }
}

@media (max-width: 640px){
  .products{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
  .modal-box{ padding: 1.75rem 1.5rem; }
  .modal-title{ font-size: 1.6rem; }
  .phone-field{ flex-direction: column; }
  .phone-field .phone-code-select{ flex: 0 0 auto; width: 100%; }
  .phone-field input[type="tel"]{ flex: 0 0 auto; width: 100%; }
  .tabs-bar{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow: visible;
    border-radius: 18px;
  }
  .tabs-bar label{
    text-align: center;
    white-space: normal;
  }
}

@media (max-width: 520px){
  .header-inner{ padding: 1rem 1.25rem; }
  .hero-content{ padding: 0 1.25rem 2.5rem; }
  .products{ padding: 3rem 1.25rem; gap: 3rem; }
  .footer-inner{ padding: 2.5rem 1.25rem; }
  .product-hero-content{ padding: 0 1.25rem; }
  .breadcrumb-bar{ padding: 1.25rem 1.25rem 0; }
  .breadcrumbs{ font-size: .72rem; }
  .product-detail{ padding: 2.5rem 1.25rem 0; }
  .related{ padding: 2.5rem 1.25rem 3rem; }
  .faq,
  .pitch{ padding: 2.5rem 1.25rem 3.5rem; }
}

/* ---------------- :has() fallback ---------------- */
/* Tabs, the gallery carousel, and the mobile menu are all CSS-only widgets
   driven by :has(#radio:checked) -- on a browser old enough not to support
   :has() (full support only landed everywhere in Dec 2023), none of those
   rules ever match, and since ".tab-panel", ".gallery-slide" and the
   mobile ".main-nav" all default to hidden, the content doesn't degrade,
   it disappears completely with no error. This block detects that case and
   forces a plain, always-visible fallback instead of nothing at all. */
@supports not selector(:has(a)){
  /* Tabs: nothing can react to which radio is checked, so stop pretending
     to be a tab set and just show every section, stacked, with its own
     heading -- all the content, none of the interactivity. */
  .tabs-bar{ display: none; }
  .tab-panel{ display: block; }
  .tab-panel + .tab-panel{ margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }

  /* Gallery: always show the first photo and mark its thumbnail active.
     Thumbnails still work as plain radio labels, just without the visual
     "which one is showing" feedback :has() would normally drive. */
  .gallery-main .slide-1{ display: block; }
  .gallery-thumbs label[for$="-1"]{ border-color: var(--accent); }

  @media (max-width: 900px){
    /* Mobile nav: the hamburger can't reveal anything without :has(), so
       drop it and show the links inline instead of hiding them behind it. */
    .mobile-nav-toggle{ display: none; }
    .main-nav{
      display: flex;
      position: static;
      flex-direction: row;
      flex-wrap: wrap;
      background: transparent;
      padding: 0;
      box-shadow: none;
    }
    /* The "Company" submenu's own mobile fallback (always-visible, not
       hover-based) already applies unconditionally here -- see the plain
       @media (max-width: 900px) block above, not gated by :has(). */
  }
}

/* ---------------- Form consent note ---------------- */
/* One line above every form's submit button linking the Privacy Policy. */
.form-consent-note{
  margin: 0 0 .9rem;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--text-soft);
}
.form-consent-note a{ color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ---------------- Legal / policy pages ---------------- */
/* Legal pages have no hero, so the header can't be a translucent overlay:
   make it a solid, in-flow sticky bar instead (no overlap, clean scroll). */
.legal-page .site-header{
  position: sticky;
  background: var(--bg-dark);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.legal{
  max-width: 760px;
  margin: 0 auto;
  padding: 3.5rem 2rem 5rem;
}
.legal h1{ font-size: 2rem; font-weight: 900; margin: 0 0 .5rem; }
.legal .legal-updated{ color: var(--text-soft); font-size: .9rem; margin: 0 0 2.5rem; }
.legal h2{ font-size: 1.25rem; font-weight: 700; margin: 2.5rem 0 .75rem; }
.legal h3{ font-size: 1rem; font-weight: 700; margin: 1.5rem 0 .5rem; }
.legal p, .legal li{ font-size: .95rem; line-height: 1.65; }
.legal ul{ padding-left: 1.25rem; }
.legal li{ margin: .35rem 0; }
.legal a{ color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal table{ width: 100%; border-collapse: collapse; margin: 1rem 0; }
.legal th, .legal td{ border: 1px solid var(--line); padding: .6rem .8rem; text-align: left; font-size: .9rem; vertical-align: top; }
.legal .legal-placeholder{
  background: rgba(128,90,255,0.12);
  color: var(--accent-2);
  padding: .05rem .35rem;
  border-radius: 3px;
  font-weight: 700;
  font-size: .85em;
}

/* ---------------- Print ---------------- */
@media print{
  .site-header, .site-footer, .privacy-consent, .privacy-consent-settings,
  .skip-link, .mobile-nav-toggle{ display: none !important; }
  body{ color: #000; background: #fff; }
  .legal{ max-width: none; padding: 0; }
  .legal a{ color: #000; text-decoration: underline; }
  .legal .legal-placeholder{ background: none; color: #000; border: 1px solid #000; }
}