:root {
  --fg:#000;
  --bg:#fff;
  --pad:40px;
  --radius:12px;
  --line:120ch;
  --fade-ms:260ms;

  /* Header heights */
  --band-h: 240px;
  --band-h-shrink: 140px;

  /* Scale controls */
  /* Initial values */
  --band-scale-initial-desktop: 1;
  --content-scale-initial-desktop: 0.90;

  --band-scale-initial-mobile-portrait: 0.85;
  --content-scale-initial-mobile-portrait: 0.70;

  --band-scale-initial-mobile-landscape: 0.7;
  --content-scale-initial-mobile-landscape: 0.5;

  /* Shrink values */
  --band-scale-shrink-desktop: 0.6;
  --content-scale-shrink-desktop: 0.5;

  --band-scale-shrink-mobile-portrait: 0.5;
  --content-scale-shrink-mobile-portrait: 0.45;

  --band-scale-shrink-mobile-landscape: 0.5;
  --content-scale-shrink-mobile-landscape: 0.35;

  /* Poster image sizing (floated product image in text) */
--poster-w-desktop: 12vw;  /* was 14vw */
--poster-min: 120px;       /* was 140px */
--poster-max: 200px;       /* was 220px */

--poster-w-mobile: 30vw;   /* was 34vw */
--poster-min-m: 150px;     /* was 160px */
--poster-max-m: 260px;     /* was 300px */}

[hidden]{ display:none !important; }

html, body { overflow-x:hidden; }
body{
  margin:0; color:var(--fg); background:var(--bg);
  font:16px/1.6 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

html.no-scroll, body.no-scroll{
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
html, body{
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

/* ===== Fixed header with separate white band + uniformly scaled content ===== */
.header-block{ position:fixed; top:0; left:0; right:0; z-index:1000; }

/* White band — height is base * scale; smooth height + shadow */
.header-band{
  height: calc(var(--band-h) * var(--band-scale-initial-desktop));
  background:#fff; border-bottom:1px solid #eaeaea;
  transition: height .28s ease, box-shadow .28s ease;
}
.header-block.shrink .header-band{
  height: calc(var(--band-h) * var(--band-scale-shrink-desktop));
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}

/* Content (logo + buttons) — uniform scale; height follows band */
.header-content{
  position:absolute; inset:0; pointer-events:none;
  display:flex; align-items:center; justify-content:center; /* center header-inner vertically & horizontally */
}
.header-inner{
  width:95vw; max-width:1440px; margin:0 auto; padding:0 2vw;
  height: calc(var(--band-h) * var(--band-scale-initial-desktop));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transform-origin: center center; 
  transform: scale(var(--content-scale-initial-desktop));
  transition: transform .28s ease, height .28s ease;
  pointer-events:auto;
}
.header-block.shrink .header-inner{
  height: calc(var(--band-h) * var(--band-scale-shrink-desktop));
  transform: scale(var(--content-scale-shrink-desktop));
}
@media (min-width:1280px) and (max-width:1439px){ .header-inner{ max-width:1280px; } }

/* Spacer — matches band height and animates (no snapping) */
#header-spacer{
  width:100%;
  height: calc(var(--band-h) * var(--band-scale-initial-desktop));
  transition: height .28s ease;
}
.header-block.shrink + #header-spacer{
  height: calc(var(--band-h) * var(--band-scale-shrink-desktop));
}

/* Logo */
header{ display:flex; justify-content:center; align-items:center; margin-bottom:20px; }
header img{ height:160px; width:auto; display:block; }

/* ---- Mobile PORTRAIT overrides ---- */
@media (max-width:768px){
  :root{ --band-h: 160px; }

  .header-band{ height: calc(var(--band-h) * var(--band-scale-initial-mobile-portrait)); }
  .header-block.shrink .header-band{ height: calc(var(--band-h) * var(--band-scale-shrink-mobile-portrait)); }

  .header-inner{
    height: calc(var(--band-h) * var(--band-scale-initial-mobile-portrait));
    transform: scale(var(--content-scale-initial-mobile-portrait));
  }
  .header-block.shrink .header-inner{
    height: calc(var(--band-h) * var(--band-scale-shrink-mobile-portrait));
    transform: scale(var(--content-scale-shrink-mobile-portrait));
  }

  #header-spacer{ height: calc(var(--band-h) * var(--band-scale-initial-mobile-portrait)); }
  .header-block.shrink + #header-spacer{ height: calc(var(--band-h) * var(--band-scale-shrink-mobile-portrait)); }

  header img{ height:88px; }
}

/* ---- Mobile LANDSCAPE overrides ---- */
@media (max-width:900px) and (orientation:landscape){
  :root{ --band-h: 120px; }

  .header-band{ height: calc(var(--band-h) * var(--band-scale-initial-mobile-landscape)); }
  .header-block.shrink .header-band{ height: calc(var(--band-h) * var(--band-scale-shrink-mobile-landscape)); }

  .header-inner{
    height: calc(var(--band-h) * var(--band-scale-initial-mobile-landscape));
    transform: scale(var(--content-scale-initial-mobile-landscape));
  }
  .header-block.shrink .header-inner{
    height: calc(var(--band-h) * var(--band-scale-shrink-mobile-landscape));
    transform: scale(var(--content-scale-shrink-mobile-landscape));
  }

  #header-spacer{ height: calc(var(--band-h) * var(--band-scale-initial-mobile-landscape)); }
  .header-block.shrink + #header-spacer{ height: calc(var(--band-h) * var(--band-scale-shrink-mobile-landscape)); }

  header img{ height:60px; }
}

/* Ultra-short landscape screens */
@media (max-width:900px) and (max-height:420px) and (orientation:landscape){
  :root{ --band-h: 110px; }
}

/* Product buttons (works for <a> or <button>) */
.tab{
  display:inline-block;
  text-decoration:none;
  flex:0 0 auto;
  min-width:190px;
  padding:14px 18px;
  border:1.5px solid #000; border-radius:12px;
  font-weight:700; font-size:22px;
  background:#fff; color:#000; cursor:pointer;
  text-align:center;
  transition:background .2s, color .2s, border-color .2s;
}
.tab[aria-selected="true"]{
  background:#000;
  color:#fff;
  text-decoration:none;
}
.tab:hover{ text-decoration:none; }
@media (max-width:768px){
  .tab{ font-size:16px; padding:10px 14px; min-width:140px; }
}

/* Action link (same look) */
.nav-link{
  display:inline-block;
  padding:14px 18px;
  border:1.5px solid #000;
  border-radius:12px;
  font-weight:700;
  font-size:22px;
  background:#fff;
  color:#000;
  text-decoration:none;
  line-height:1;
  transition:background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.nav-link:hover{ background:#000; color:#fff; }
.nav-link:active{ transform:translateY(1px); }
@media (max-width:768px){
  .nav-link{ font-size:16px; padding:10px 14px; }
}
.desc .nav-link{ margin:8px 6px; }

/* Page wrapper */
.page{ width:95vw; max-width:1440px; margin:0 auto; padding:var(--pad) 2vw; }
@media (min-width:1280px) and (max-width:1439px){ .page{ max-width:1280px; } }

/* Carousels */
.carousel{ display:flex; flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.carousel::-webkit-scrollbar{ display:none; }
/* Restore carousel slide sizing */
.slide{ min-width:100%; flex:0 0 100%; scroll-snap-align:start; }
.lb-track{ display:flex; width:100%; height:100%; gap:0; will-change:transform; }
.lb-slide{
  flex:0 0 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  padding:0;                 /* IMPORTANT: no padding on slides */
  box-sizing:border-box;     /* ensure 100% includes any future padding */
}
.media-h{ width:100%; height:800px; background:#000; overflow:hidden; }
@media (max-width:1400px){ .media-h{ height:600px; } }
@media (max-width:1024px){ .media-h{ height:480px; } }
@media (max-width:768px){ .media-h{ height:360px; } }
.media-h video{ width:100%; height:100%; object-fit:cover; display:block; }
.media-v{ width:100%; aspect-ratio:9/16; max-height:78svh; background:#000; margin:0 auto; overflow:hidden; }
.media-v video{ width:100%; height:100%; object-fit:cover; display:block; }

/* Descriptions */
.desc{ position:relative; margin:20px 0 0 0; max-width:none; width:100%; overflow:hidden; }
.desc-panel{ position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity var(--fade-ms) ease; }
.desc-panel.is-active{ opacity:1; pointer-events:auto; position:relative; }
.desc h1{ margin:0 0 10px; font-weight:700; font-size:52px; }
.desc h2{ margin:10px 0 10px; font-size:24px; font-weight:600; }
.desc p{ margin:0 0 12px; font-size:20px;}

/* Inline thumbnails */
.inline-img{
  width:120px; height:auto;
  border-radius:6px;
  margin:8px;
  cursor:zoom-in;
}
@media(max-width:768px){ .inline-img{ width:80px; } }

/* Tech specs */
.tech-specs{
  clear: both;                 /* ensure we escape any floated images */
  display: block;
  width: 100%;
  margin-top: 20px;
  overflow-x: auto;            /* keep wide tables scrollable on small screens */
  -webkit-overflow-scrolling: touch;
}
.tech-specs h2{ text-align:center; margin-bottom:10px; font-size:24px;}
.tech-specs table{ width:100%; max-width:100%; border-collapse:collapse; table-layout:fixed; }
.tech-specs th, .tech-specs td{ border:1px solid #ccc; padding:6px 10px; text-align:left; font-size:20px; word-break:break-word; overflow-wrap:anywhere; }

.tech-specs tr:nth-child(even){
  background-color: #f7f7f7;
}

@media (max-width:768px){
  .desc h1{ font-size:22px; }
  .desc h2{ font-size:18px; }
  .desc p{ font-size:16px; }
  .tech-specs th, .tech-specs td{ font-size:16px; }
}

/* Footer */
footer{ background:#f7f7f7; color:#000; padding:40px 2vw; border-top:1px solid #e0e0e0; }
.footer-content{ width:95vw; max-width:1440px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px; }
.footer-section h2{ margin:0 0 12px; font-size:18px; font-weight:700; text-transform:uppercase; }
.footer-section p, .footer-section a{ margin:0 0 8px; font-size:14px; line-height:1.5; color:#000; text-decoration:none; }
.footer-section a:hover{ text-decoration:underline; }
.footer-bottom{ margin-top:30px; text-align:center; font-size:13px; color:#555; }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; background:#fff;
  display:none; align-items:center; justify-content:center;
  z-index:100000; /* base stack */
  overflow:hidden;
  /* Ensure full coverage on iOS Safari when toolbars show/hide */
  height: 100svh;
  height: 100dvh;
  min-height: 100vh;
  overscroll-behavior: contain; /* stop rubber-banding inside overlay */
}
.lightbox.active{ display:flex; }
.lightbox-inner{
  position:relative; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  z-index:100001; /* sit above backdrop */
}
@media (max-width: 900px){
  .lightbox-inner{ padding: 0 8px; }
}
.lb-track{ display:flex; width:100%; height:100%; gap:0; will-change:transform; }
.lb-slide{
  flex:0 0 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  padding:0;                 /* IMPORTANT: no padding on slides */
  box-sizing:border-box;     /* ensure 100% includes any future padding */
}
.lightbox-media{
  max-width:90vw;
  /* fallback first, then modern units override when supported */
  max-height:90vh;
  max-height:88dvh;
  max-height:88svh;
  background:#fff;
  z-index:100001; /* media layer */
  position:relative;
}

/* Controls must be ABOVE the media */
.lb-close,.lb-arrow{
  position:absolute; 
  background:rgba(0,0,0,.6); 
  color:#fff; 
  border:none;
  border-radius:50%; 
  cursor:pointer; 
  font-size:28px; 
  width:48px; 
  height:48px;
  display:flex; 
  align-items:center; 
  justify-content:center;
  z-index:100002; /* ensure above media */

  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

}
.lb-close{ top:20px; right:20px; }
.lb-prev{ left:16px; padding-bottom:6px; }
.lb-next{ right:16px; padding-bottom:6px; }



/* ===== Centered PNG zoom icon overlay ===== */
.zoom-wrap{ position:relative; display:inline-block; cursor:zoom-in; }
.zoom-wrap::after{
  content:""; position:absolute; top:50%; left:50%;
  width:84px; height:84px; transform:translate(-50%,-50%);
  pointer-events:none; opacity:.95;
  background:center/contain no-repeat url("images/zoom-in-icon.png");
}
@media (max-width:480px){ .zoom-wrap::after{ width:34px; height:34px; } }

@media (max-width:768px){
  input[type="text"], input[type="email"], textarea {
    max-width: 90%;
  }
}

/* Poster images (main product visuals in text) */
.poster-img {
  width: clamp(165px, 15vw, 270px) !important; /* 50% larger */
  height: auto;
  margin: 0 12px 12px 0;
  cursor: zoom-in;
}

.poster-img.right { float: right; }
.poster-img.left  { float: left; }

@media (max-width: 768px) {
  .poster-img {
    width: clamp(140px, 28vw, 220px) !important;
    margin: 0 8px 8px 0;
  }
}

/* Make the wrapper float when the inner poster image carries .right / .left */
.zoom-wrap:has(> .poster-img.right) {
  float: right;
  margin: 0 12px 12px 0;
}

.zoom-wrap:has(> .poster-img.left) {
  float: left;
  margin: 0 12px 12px 0;
}

@media (max-width: 768px) {
  .zoom-wrap:has(> .poster-img.right),
  .zoom-wrap:has(> .poster-img.left) {
    margin: 0 8px 8px 0;
  }
}

.field-error { outline: none; }
.field-error-msg { line-height: 1.2; }