/* ============================================================
   BEKINTEK — Military/Tactical Night Vision Brand CSS
   Design: Olive Drab · Khaki · Dark Earth · Combat Green
   ============================================================ */

:root {
  /* ── Core Dark Palette ── */
  --black:      #080b08;
  --dark:       #0d110d;
  --dark-2:     #141a13;
  --dark-3:     #1c231b;
  --dark-4:     #232c22;

  /* ── Military Green System ── */
  --olive:      #5a6b3a;          /* classic olive drab */
  --olive-lt:   #6e8245;          /* lighter olive */
  --khaki:      #8b9d5a;          /* khaki accent */
  --camo-grn:   #4a5e2e;          /* deep camo green */
  --lime-tac:   #7ab22e;          /* tactical bright lime (CTA only) */
  --lime-glow:  rgba(var(--theme-primary-rgb),0.12);

  /* ── Accent Colors ── */
  --amber:      #c8901a;          /* brass/amber */
  --amber-lt:   #e8a82a;
  --red-tac:    #c0392b;
  --tan:        #b8a882;          /* khaki tan */
  --tan-lt:     #d4c49e;

  /* ── Text ── */
  --text:       #d8dfcc;          /* slightly warm off-white */
  --text-muted: #8a9478;
  --text-dim:   #4e5947;

  /* ── Borders ── */
  --border:          rgba(var(--theme-primary-dim-rgb),0.2);
  --border-glow:     rgba(var(--theme-primary-rgb),0.3);

  /* ── Shadows ── */
  --shadow:          0 4px 24px rgba(var(--theme-bg-rgb),0.5);
  --shadow-olive:    0 0 40px rgba(var(--theme-primary-dim-rgb),0.2);

  /* ── Typography ── */
  --font-main:    'Inter', sans-serif;
  --font-display: 'Rajdhani', sans-serif;
  --font-mono:    'Orbitron', sans-serif;

  /* ── Utils ── */
  --radius:     5px;
  --radius-lg:  10px;
  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);

  /* ════════════════════════════════════════════════════════════════
     THEME DESIGN TOKENS (vDS1)
     Abstract layer for dynamic color preset switching.
     Override these in theme-preset-*.css via html[data-visual-preset].
     ════════════════════════════════════════════════════════════════ */
  /* Backgrounds */
  --theme-bg:            var(--black);
  --theme-bg-soft:       var(--dark);
  --theme-bg-elevated:   var(--dark-2);
  --theme-bg-surface:    var(--dark-3);
  --theme-bg-input:      var(--dark-4);
  /* Primary / Accent */
  --theme-primary:       var(--lime-tac);
  --theme-primary-soft:  var(--khaki);
  --theme-primary-dim:   var(--olive);
  --theme-primary-glow:  var(--lime-glow);
  /* Accent colors */
  --theme-accent:        var(--amber);
  --theme-accent-soft:   var(--amber-lt);
  --theme-danger:        var(--red-tac);
  --theme-tan:           var(--tan);
  --theme-tan-soft:      var(--tan-lt);
  /* Text */
  --theme-text:          var(--text);
  --theme-text-muted:    var(--text-muted);
  --theme-text-dim:      var(--text-dim);
  --theme-text-heading:  #ffffff;
  --theme-text-inverse:  #0d110d;
  /* Border */
  --theme-border:        var(--border);
  --theme-border-glow:   var(--border-glow);
  /* Shadows */
  --theme-shadow:        var(--shadow);
  --theme-shadow-glow:   var(--shadow-olive);
  /* Decorative gradients */
  --theme-hero-gradient: linear-gradient(160deg, var(--theme-bg) 0%, var(--theme-bg-soft) 45%, var(--theme-bg) 100%);

  /* RGB components for rgba() usage */
  --theme-bg-rgb: 8, 11, 8;
  --theme-bg-soft-rgb: 13, 17, 13;
  --theme-primary-rgb: 122, 178, 46;
  --theme-primary-dim-rgb: 90, 107, 58;
  --theme-accent-rgb: 200, 144, 26;
  --theme-text-heading-rgb: 255, 255, 255;
  --theme-text-inverse-rgb: 13, 17, 13;
  --theme-text-rgb: 216, 223, 204;
  --theme-danger-rgb: 192, 57, 43;
  --theme-image-bg: #ffffff;

  /* Legacy aliases used by existing CMS/Page Builder sections. */
  --bg: var(--theme-bg);
  --bg-soft: var(--theme-bg-soft);
  --bg-dark: var(--theme-bg);
  --lime: var(--theme-primary);
}

/* ─── Reset & Base ─────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;}
body{
  background:var(--theme-bg);
  color:var(--theme-text);
  font-family:var(--font-main);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
button{cursor:pointer;border:none;background:none;font:inherit;}
button:disabled{cursor:default !important;pointer-events:none;}
input,textarea{font:inherit;}

/* Scrollbar */
@media(hover:hover){
  ::-webkit-scrollbar{width:5px;}
  ::-webkit-scrollbar-track{background:var(--theme-bg-soft);}
  ::-webkit-scrollbar-thumb{background:var(--theme-bg-input);border-radius:3px;}
  ::-webkit-scrollbar-thumb:hover{background:var(--theme-primary-dim);}
}
/* Touch devices - hide scrollbar but keep functionality */
@media(hover:none){
  ::-webkit-scrollbar{width:0px;background:transparent;}
  body{-ms-overflow-style:none;scrollbar-width:none;}
}

/* ─── Typography ─────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.15;letter-spacing:0.02em;}
h1{font-size:clamp(2.8rem,6vw,5rem);}
h2{font-size:clamp(2rem,4vw,3rem);}
h3{font-size:clamp(1.05rem,2vw,1.35rem);}

.accent{color:var(--lime-tac);}

.section-tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:0.65rem;
  letter-spacing:0.22em;
  color:var(--khaki);
  border:1px solid var(--olive);
  padding:4px 14px;
  border-radius:2px;
  margin-bottom:16px;
  background:rgba(var(--theme-primary-dim-rgb),0.12);
}

.section-header{text-align:center;max-width:700px;margin:0 auto 60px;}
.section-header p{color:var(--text-muted);font-size:1.05rem;margin-top:16px;line-height:1.7;}
.section-header.light h2{color:var(--theme-text-heading);}
.section-header.light p{color:var(--theme-text-muted);opacity:0.6;}

/* ─── Buttons ─────────────────────────────────── */
.btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--lime-tac);
  color:var(--theme-text-inverse);
  font-family:var(--font-display);font-size:1rem;font-weight:700;
  letter-spacing:0.1em;padding:14px 32px;
  border-radius:var(--radius);
  transition:var(--transition);position:relative;overflow:hidden;
  text-transform:uppercase;
}
.btn-primary::before{
  content:'';position:absolute;inset:0;
  background:rgba(var(--theme-text-heading-rgb),0.12);
  transform:translateX(-100%);transition:transform 0.3s;
}
.btn-primary:hover::before{transform:translateX(0);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(var(--theme-primary-rgb),0.3);}

.btn-secondary{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;
  color:var(--tan-lt);
  font-family:var(--font-display);font-size:1rem;font-weight:600;
  letter-spacing:0.08em;padding:13px 30px;
  border:1px solid var(--olive);
  border-radius:var(--radius);
  transition:var(--transition);
}
.btn-secondary:hover{border-color:var(--lime-tac);color:var(--lime-tac);transform:translateY(-2px);}

.btn-shop{
  background:var(--lime-tac);color:var(--theme-text-inverse);
  font-family:var(--font-display);font-weight:700;font-size:0.82rem;
  letter-spacing:0.12em;padding:9px 22px;
  border-radius:var(--radius);transition:var(--transition);text-transform:uppercase;
}
.btn-shop:hover{background:var(--khaki);transform:translateY(-1px);}

.btn-view{
  background:var(--lime-tac);color:var(--theme-text-inverse);
  font-family:var(--font-display);font-weight:700;font-size:0.82rem;
  letter-spacing:0.08em;padding:10px 22px;
  border-radius:var(--radius);transition:var(--transition);
}
.btn-view:hover{background:var(--khaki);}

.btn-product{
  display:inline-block;width:100%;text-align:center;
  background:var(--dark-4);color:var(--text);
  font-family:var(--font-display);font-weight:600;font-size:0.88rem;
  letter-spacing:0.08em;padding:11px;
  border-radius:var(--radius);border:1px solid var(--border);
  transition:var(--transition);margin-top:12px;
}
.btn-product:hover{background:var(--lime-tac);color:var(--theme-text-inverse);border-color:var(--lime-tac);transform:translateY(-1px);}

/* v109: Universal button press feedback — tactile damping with transition */
.btn-primary:active,.btn-secondary:active,.btn-shop:active,.btn-view:active,.btn-product:active{
  transform:scale(0.97);opacity:0.9;
  transition:transform 0.10s ease,opacity 0.10s ease;
}
/* v109: Lightweight press class for inline-styled buttons */
.btn-press{
  transition:transform 0.12s ease,opacity 0.12s ease;
}
.btn-press:active{transform:scale(0.97);opacity:0.9;}
/* v109: PayPal option labels — subtle press feedback */
.paypal-option-label{
  transition:transform 0.12s ease,opacity 0.12s ease;
}
.paypal-option-label:active{transform:scale(0.985);opacity:0.92;}
@media(hover:none){
  button,a{-webkit-tap-highlight-color:transparent;}
}

/* v110: Advanced tactile press effect — extracted from PDP Buy Now button
   translateY + scale + inset shadow for authentic "pressed down" feel.
   Applied to all critical action buttons site-wide. */
.btn-press-effect{
  transition:transform 0.15s cubic-bezier(0.34,1.56,0.64,1),
             box-shadow 0.15s cubic-bezier(0.34,1.56,0.64,1),
             opacity 0.15s ease;
}
button.btn-press-effect:active,
a.btn-press-effect:active,
label.btn-press-effect:active{
  transform:translateY(2px) scale(0.97);
  box-shadow:inset 0 3px 8px rgba(var(--theme-bg-rgb),0.2);
  opacity:0.88;
}
/* v111: Loading-state cursor lock — never show pointer on disabled/processing buttons */
button.btn-press-effect:disabled,
button.btn-press-effect[disabled]{
  pointer-events:none !important;
  cursor:default !important;
}

/* v110: Inline button spinner — minimal CSS-only loading indicator
   Replaces old "..." text and external spinners. Color inherits from button text. */
.btn-spinner{
  display:inline-block;
  width:1em;
  height:1em;
  border:2px solid currentColor;
  border-top-color:transparent;
  border-radius:50%;
  animation:btn-spin 0.6s linear infinite;
  vertical-align:middle;
  flex-shrink:0;
}
@keyframes btn-spin{to{transform:rotate(360deg);}}

/* ─── TOP BAR ─────────────────────────────────── */
.topbar{
  background:var(--camo-grn);
  color:var(--tan-lt);
  text-align:center;padding:8px 20px;
  font-family:var(--font-display);font-size:0.76rem;font-weight:600;letter-spacing:0.1em;
  position:relative;z-index:100;
  border-bottom:1px solid var(--olive);
}
.topbar-inner{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;}

/* ─── NAVIGATION ─────────────────────────────────── */
.navbar{
  position:sticky;top:0;z-index:90;
  background:rgba(var(--theme-bg-rgb),0.95);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  transition:var(--transition);
}
.navbar.scrolled{background:rgba(var(--theme-bg-rgb),0.99);box-shadow:0 4px 30px rgba(var(--theme-bg-rgb),0.6);}

.nav-inner{
  max-width:1300px;margin:0 auto;padding:0 40px;
  height:68px;display:flex;align-items:center;gap:40px;
}

.logo{display:flex;align-items:center;gap:10px;}
.logo-icon{color:var(--khaki);font-size:1.3rem;}
.logo-text{font-family:var(--font-mono);font-size:1.25rem;font-weight:900;letter-spacing:0.12em;color:var(--theme-text-heading);}
.logo-accent{color:var(--lime-tac);}

.nav-links{display:flex;align-items:center;gap:32px;margin-left:auto;}
.nav-link-wrapper{position:relative;}
.nav-links a{
  font-family:var(--font-display);font-weight:600;font-size:0.85rem;
  letter-spacing:0.12em;color:var(--text-muted);transition:color 0.2s;
  position:relative;text-transform:uppercase;
  display:flex;align-items:center;gap:6px;
}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--lime-tac);transition:width 0.3s;}
.nav-links a:hover{color:var(--tan-lt);}
.nav-links a:hover::after{width:100%;}

/* Dropdown arrow */
.dropdown-arrow{display:flex;align-items:center;transition:transform 0.2s;}
.nav-link-wrapper:hover .dropdown-arrow{transform:rotate(180deg);}

/* Dropdown menu */
.nav-dropdown{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);
  background:var(--dark-2);border:1px solid var(--border);
  border-radius:var(--radius);min-width:200px;
  padding:8px 0;opacity:0;visibility:hidden;
  transition:all 0.2s ease;z-index:100;
  box-shadow:0 10px 40px rgba(var(--theme-bg-rgb),0.5);
}
.nav-link-wrapper:hover .nav-dropdown{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.nav-dropdown-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 16px;font-size:0.8rem;
  color:var(--text-muted);transition:all 0.2s;
}
.nav-dropdown-item:hover{
  background:var(--lime-glow);color:var(--tan-lt);
}
.nav-dropdown-icon{display:flex;align-items:center;color:var(--khaki);}

.nav-actions{margin-left:24px;}
.nav-toggle{display:none;color:var(--text);font-size:1.4rem;margin-left:auto;}

/* Mobile menu
   NOTE: mobileMenu is rendered OUTSIDE <header> in HomeClient.tsx to avoid
   iOS Safari's backdrop-filter stacking context bug (which clipped fixed children).
   So we always use position:fixed here — no parent stacking context to fight.
*/
.mobile-menu{
  display:none;
  flex-direction:column;
  background:var(--dark-2);
  border-top:1px solid var(--border);
  position:fixed;
  /* Default desktop: offscreen — only shown on mobile via media query */
  top:-9999px;
  left:0;right:0;
  z-index:999;              /* Above everything, including navbar (z-index:90) */
  overflow-y:auto;
  max-height:calc(100vh - 60px);
}
.mobile-menu .mobile-nav-item{border-bottom:1px solid var(--border);}
.mobile-menu a{padding:15px 40px;font-family:var(--font-display);font-weight:600;font-size:0.95rem;letter-spacing:0.1em;color:var(--text-muted);transition:all 0.2s;text-transform:uppercase;display:block;}
.mobile-menu a:hover{color:var(--lime-tac);background:var(--lime-glow);}
.mobile-submenu{background:var(--dark-3);padding-left:20px;}
.mobile-submenu a{font-size:0.85rem;padding:12px 40px;border-bottom:1px solid var(--dark-4);}

/* On mobile: position menu just below navbar (60px header height) */
@media(max-width:900px){
  .mobile-menu{
    top:-9999px;           /* Hidden by default */
    left:0;right:0;bottom:0;
  }
  .mobile-menu.open{
    display:flex !important;
    top:60px;              /* Snap below the navbar */
  }
}

/* ─── HERO ─────────────────────────────────── */
.hero{
  position:relative;min-height:100vh;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}

.hero-bg{position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 60% 40%, rgba(var(--theme-primary-dim-rgb),0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 20% 80%, rgba(var(--theme-primary-dim-rgb),0.1) 0%, transparent 50%),
    var(--theme-hero-gradient);
}
.hero-overlay{
  position:absolute;inset:0;
  background:url('https://images.unsplash.com/photo-1446776877081-d282a0f896e2?w=1920&q=50') center/cover no-repeat;
  opacity:0.07;
  mix-blend-mode:luminosity;
}

/* Tactical grid */
.nv-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(var(--theme-primary-dim-rgb),0.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--theme-primary-dim-rgb),0.06) 1px,transparent 1px);
  background-size:80px 80px;
  animation:gridPan 40s linear infinite;
}
@keyframes gridPan{from{background-position:0 0;}to{background-position:80px 80px;}}

.nv-scanline{
  position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(var(--theme-primary-dim-rgb),0.02) 3px,rgba(var(--theme-primary-dim-rgb),0.02) 4px);
  pointer-events:none;
}

/* Crosshair decoration */
.nv-crosshair{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(70vw,700px);height:min(70vw,700px);
  border:1px solid rgba(var(--theme-primary-dim-rgb),0.06);
  border-radius:50%;pointer-events:none;
}
.nv-crosshair::before,.nv-crosshair::after{
  content:'';position:absolute;background:rgba(var(--theme-primary-dim-rgb),0.06);
}
.nv-crosshair::before{width:100%;height:1px;top:50%;left:0;}
.nv-crosshair::after{width:1px;height:100%;left:50%;top:0;}

.hero-content{
  position:relative;z-index:2;text-align:center;
  max-width:900px;padding:0 24px;
}

.hero-badge{
  display:inline-block;
  font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.25em;
  color:var(--khaki);border:1px solid var(--olive);
  padding:6px 20px;border-radius:2px;margin-bottom:28px;
  background:rgba(var(--theme-primary-dim-rgb),0.08);
  animation:fadeInDown 0.8s ease both;
}

.hero-title{color:var(--theme-text-heading);margin-bottom:20px;animation:fadeInUp 0.8s ease 0.1s both;}
.hero-accent{
  color:var(--lime-tac);display:block;
  text-shadow:0 0 80px rgba(var(--theme-primary-rgb),0.35);
}

.hero-subtitle{
  color:var(--text-muted);font-size:clamp(0.9rem,1.5vw,1.1rem);
  line-height:1.75;margin-bottom:44px;
  animation:fadeInUp 0.8s ease 0.2s both;
}

.hero-stats{
  display:flex;justify-content:center;align-items:center;
  gap:0;margin-bottom:48px;
  background:rgba(var(--theme-bg-soft-rgb),0.7);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:26px 40px;
  animation:fadeInUp 0.8s ease 0.3s both;
  flex-wrap:wrap;
  backdrop-filter:blur(10px);
}
.stat{text-align:center;padding:0 28px;}
.stat-num{
  display:block;font-family:var(--font-mono);
  font-size:clamp(1.5rem,3vw,2.2rem);font-weight:700;
  color:var(--lime-tac);line-height:1;
}
.stat-unit{font-size:0.7em;color:var(--khaki);}
.stat-label{display:block;font-family:var(--font-display);font-size:0.65rem;letter-spacing:0.18em;color:var(--text-dim);margin-top:7px;text-transform:uppercase;}
.stat-divider{width:1px;height:44px;background:var(--border);}

.hero-cta{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;animation:fadeInUp 0.8s ease 0.4s both;}

.hero-scroll-hint{
  position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;z-index:2;
  animation:fadeInUp 1s ease 0.8s both;
}
.hero-scroll-hint span{font-family:var(--font-mono);font-size:0.58rem;letter-spacing:0.3em;color:var(--text-dim);}
.scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,var(--olive),transparent);animation:scrollBounce 1.5s ease-in-out infinite;}
@keyframes scrollBounce{0%,100%{transform:scaleY(0.5);opacity:0.4;}50%{transform:scaleY(1);opacity:1;}}

/* ─── FEATURE STRIP ─────────────────────────────────── */
.feature-strip{
  background:var(--dark-2);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:28px 40px;
}
.strip-inner{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
.strip-item{display:flex;align-items:center;gap:16px;padding:14px 24px;border-right:1px solid var(--border);}
.strip-item:last-child{border-right:none;}
.strip-icon{width:42px;height:42px;color:var(--khaki);flex-shrink:0;}
.strip-icon svg{width:100%;height:100%;}
.strip-item strong{display:block;font-family:var(--font-display);font-size:0.92rem;font-weight:700;color:var(--tan-lt);line-height:1.2;}
.strip-item span{display:block;font-size:0.78rem;color:var(--text-muted);margin-top:3px;}

/* ─── PRODUCTS ─────────────────────────────────── */
.products{padding:100px 40px;max-width:1300px;margin:0 auto;}

.product-tabs{display:flex;gap:8px;justify-content:center;margin-bottom:60px;flex-wrap:wrap;}
.tab-btn{
  font-family:var(--font-display);font-weight:700;font-size:0.82rem;
  letter-spacing:0.12em;padding:10px 28px;
  border-radius:var(--radius);border:1px solid var(--border);
  color:var(--text-muted);transition:var(--transition);background:transparent;
  text-transform:uppercase;
}
.tab-btn:hover{border-color:var(--olive);color:var(--khaki);}
.tab-btn.active{background:var(--olive);color:var(--tan-lt);border-color:var(--olive);}

.product-grid{display:none;grid-template-columns:repeat(3,1fr);gap:24px;}
.product-grid.active{display:grid;}

.product-card{
  position:relative;
  background:var(--dark-2);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;transition:var(--transition);
  display:flex;flex-direction:column;height:100%;
}
.product-card:hover{
  border-color:rgba(var(--theme-primary-rgb),0.4);
  transform:translateY(-5px);
  box-shadow:0 16px 50px rgba(var(--theme-bg-rgb),0.45), 0 0 30px rgba(var(--theme-primary-dim-rgb),0.1);
}

/* Corner decoration on hover */
.product-card::before,.product-card::after{
  content:'';position:absolute;width:16px;height:16px;
  border-color:var(--olive);border-style:solid;
  opacity:0;transition:opacity 0.3s;z-index:2;pointer-events:none;
}
.product-card::before{top:8px;left:8px;border-width:1px 0 0 1px;}
.product-card::after{bottom:8px;right:8px;border-width:0 1px 1px 0;}
.product-card:hover::before,.product-card:hover::after{opacity:1;}

.product-badge{
  position:absolute;top:12px;left:12px;z-index:3;
  background:var(--olive);color:var(--tan-lt);
  font-family:var(--font-mono);font-size:0.62rem;font-weight:700;
  letter-spacing:0.1em;padding:3px 9px;border-radius:2px;
  text-transform:uppercase;
}
.product-badge.new{background:var(--amber);color:var(--theme-text-heading);}

.product-img-wrap{
  position:relative;aspect-ratio:1/1;overflow:hidden;
  background:var(--theme-image-bg);
}
.product-img-wrap img{width:100%;height:100%;object-fit:contain;transition:transform 0.5s ease;}
.product-card:hover .product-img-wrap img{transform:scale(1.05);}
.no-img{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:3rem;opacity:0.3;}

.product-img-overlay{
  position:absolute;inset:0;
  background:rgba(var(--theme-bg-rgb),0.65);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity 0.3s;
}
.product-card:hover .product-img-overlay{opacity:1;}

/* v50: Touch devices — completely hide and disable overlay
   Uses @media (hover: none) and (pointer: coarse) for precise
   touch-screen targeting (phones + tablets). This ensures:
   1. Overlay DOM is visually removed
   2. No hidden :hover states can intercept taps
   3. Shop Now button gets 100% reliable single-tap behavior */
@media (hover: none) and (pointer: coarse) {
  .product-img-overlay,
  .product-card:hover .product-img-overlay,
  .product-card:active .product-img-overlay {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

.product-info{padding:22px;display:flex;flex-direction:column;flex:1;}

.product-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px;}
.product-tags span{
  font-family:var(--font-mono);font-size:0.58rem;letter-spacing:0.08em;
  color:var(--khaki);border:1px solid var(--olive);
  padding:2px 7px;border-radius:2px;
  background:rgba(var(--theme-primary-dim-rgb),0.1);
}

.product-info h3{color:var(--tan-lt);font-size:1rem;margin-bottom:8px;line-height:1.3;}
.product-info p{color:var(--text-muted);font-size:0.82rem;line-height:1.6;margin-bottom:14px;}

.product-specs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.product-specs span{font-size:0.72rem;color:var(--text-dim);background:var(--dark-3);padding:3px 9px;border-radius:3px;border:1px solid var(--border);}

.product-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:4px;}
.price-current{font-family:var(--font-mono);font-size:1.35rem;font-weight:700;color:var(--lime-tac);}
.price-orig{font-size:0.82rem;color:var(--text-dim);text-decoration:line-through;}
.price-save{font-size:0.72rem;color:var(--amber-lt);background:rgba(var(--theme-accent-rgb),0.1);padding:2px 7px;border-radius:3px;border:1px solid rgba(var(--theme-accent-rgb),0.2);}

.products-cta{text-align:center;margin-top:60px;}

/* ─── CATALOG CTA BUTTON (Bug#3) ─────────────────────────────────── */
.catalog-cta{
  text-align:center;margin-top:72px;padding-top:40px;
}
.btn-catalog{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--font-mono);font-size:0.78rem;font-weight:700;
  letter-spacing:0.18em;color:var(--tan-lt);
  border:1px solid var(--olive);padding:18px 42px;
  border-radius:var(--radius);transition:var(--transition);
  text-transform:uppercase;background:transparent;position:relative;overflow:hidden;
}
.btn-catalog::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(var(--theme-primary-dim-rgb),0) 0%,rgba(var(--theme-primary-dim-rgb),0.12) 50%,rgba(var(--theme-primary-dim-rgb),0) 100%);
  transform:translateX(-100%);transition:transform 0.5s ease;
}
.btn-catalog:hover{border-color:var(--lime-tac);color:var(--lime-tac);box-shadow:0 0 30px rgba(var(--theme-primary-rgb),0.15);}
.btn-catalog:hover::before{transform:translateX(100%);}
.btn-catalog svg{transition:transform 0.3s;}
.btn-catalog:hover svg{transform:translateX(5px);}
.catalog-cta-sub{margin-top:16px;font-size:0.78rem;color:var(--text-dim);letter-spacing:0.06em;}

/* ─── TECHNOLOGY ─────────────────────────────────── */
.technology{
  background:linear-gradient(135deg,var(--dark) 0%,var(--dark-2) 50%,var(--dark) 100%);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:100px 40px;position:relative;overflow:hidden;
}
.technology::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle 700px at 10% 50%,rgba(var(--theme-primary-dim-rgb),0.05) 0%,transparent 70%),
    radial-gradient(circle 700px at 90% 50%,rgba(var(--theme-primary-dim-rgb),0.05) 0%,transparent 70%);
}

.tech-inner{max-width:1300px;margin:0 auto;position:relative;}

.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}

.tech-card{
  background:rgba(var(--theme-bg-soft-rgb),0.6);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:34px 26px;
  transition:var(--transition);position:relative;overflow:hidden;
  backdrop-filter:blur(4px);
}
.tech-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--olive),transparent);
  opacity:0;transition:opacity 0.3s;
}
.tech-card:hover{border-color:rgba(var(--theme-primary-rgb),0.25);background:rgba(var(--theme-primary-dim-rgb),0.05);transform:translateY(-3px);}
.tech-card:hover::before{opacity:1;}
.tech-icon{width:50px;height:50px;color:var(--khaki);margin-bottom:18px;opacity:0.9;}
.tech-icon svg{width:100%;height:100%;}
.tech-card h3{color:var(--tan-lt);font-size:1.02rem;margin-bottom:10px;}
.tech-card p{color:var(--text-muted);font-size:0.85rem;line-height:1.65;}

/* ─── ABOUT ─────────────────────────────────── */
.about{padding:100px 40px;max-width:1300px;margin:0 auto;}

.about-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}

.about-visual{position:relative;}

.about-img-frame{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);}
.about-img-frame img{width:100%;height:480px;object-fit:cover;filter:saturate(0.6) brightness(0.8);}
.about-img-frame::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(var(--theme-primary-dim-rgb),0.15) 0%,transparent 50%,rgba(var(--theme-bg-rgb),0.35) 100%);
}

.about-img-badge{
  position:absolute;bottom:22px;right:22px;
  background:rgba(var(--theme-bg-rgb),0.9);border:1px solid var(--olive);
  border-radius:var(--radius-lg);padding:14px 22px;text-align:center;z-index:2;
}
.badge-num{display:block;font-family:var(--font-mono);font-size:1.7rem;font-weight:700;color:var(--lime-tac);line-height:1;}
.badge-text{display:block;font-size:0.68rem;color:var(--text-muted);margin-top:4px;letter-spacing:0.06em;}

.about-metrics{display:flex;gap:14px;margin-top:18px;}
.metric{flex:1;background:var(--dark-2);border:1px solid var(--border);border-radius:var(--radius);padding:16px;text-align:center;}
.metric-val{display:block;font-family:var(--font-mono);font-size:1.3rem;font-weight:700;color:var(--lime-tac);}
.metric-label{display:block;font-size:0.7rem;color:var(--text-muted);margin-top:4px;letter-spacing:0.08em;}

.about-text .section-tag{margin-bottom:14px;}
.about-text h2{color:var(--theme-text-heading);margin-bottom:18px;}
.about-text p{color:var(--text-muted);font-size:0.93rem;line-height:1.75;margin-bottom:14px;}
.about-text p strong{color:var(--tan-lt);}
.about-text .lead{font-size:1.02rem;color:var(--text);}

.about-pillars{display:flex;flex-direction:column;gap:12px;margin:26px 0 30px;}
.pillar{display:flex;align-items:center;gap:16px;background:var(--dark-2);border:1px solid var(--border);border-radius:var(--radius);padding:12px 18px;transition:border-color 0.2s;}
.pillar:hover{border-color:var(--olive);}
.pillar-icon{font-size:1.3rem;}
.pillar strong{display:block;font-family:var(--font-display);font-size:0.92rem;font-weight:700;color:var(--tan-lt);}
.pillar span{display:block;font-size:0.78rem;color:var(--text-muted);margin-top:2px;}

/* ─── GUARANTEE ─────────────────────────────────── */
.guarantee{background:var(--dark-2);border-top:1px solid var(--border);padding:80px 40px;}
.guarantee-inner{max-width:1300px;margin:0 auto;}

.guarantee-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.guarantee-card{
  background:var(--dark-3);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:30px 22px;text-align:center;transition:var(--transition);
}
.guarantee-card:hover{border-color:var(--olive);transform:translateY(-4px);box-shadow:var(--shadow-olive);}
/* Bug#4 Fix: .g-icon supports both SVG and emoji */
.g-icon{
  width:52px;height:52px;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
  color:var(--khaki);font-size:2rem;
  background:rgba(var(--theme-primary-dim-rgb),0.1);border:1px solid var(--border);border-radius:var(--radius-lg);
}
.g-icon svg{width:28px;height:28px;}
.guarantee-card h3{color:var(--tan-lt);font-size:1.05rem;margin-bottom:8px;}
.guarantee-card p{color:var(--text-muted);font-size:0.83rem;line-height:1.65;}

/* ─── TESTIMONIALS ─────────────────────────────────── */
.testimonials{
  background:linear-gradient(135deg,var(--dark) 0%,var(--dark-2) 50%,var(--dark) 100%);
  border-top:1px solid var(--border);padding:100px 40px;
}
.test-inner{max-width:1300px;margin:0 auto;}
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.test-card{
  background:rgba(var(--theme-bg-soft-rgb),0.5);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:30px 26px;transition:var(--transition);
}
.test-card:hover{border-color:var(--olive);transform:translateY(-3px);}
.stars{color:var(--amber-lt);font-size:0.95rem;letter-spacing:2px;margin-bottom:14px;}
.test-card p{color:var(--text-muted);font-size:0.87rem;line-height:1.7;font-style:italic;margin-bottom:18px;}
.test-author{display:flex;align-items:center;gap:12px;}
.test-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--camo-grn),var(--dark-3));display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:0.72rem;font-weight:700;color:var(--khaki);flex-shrink:0;border:1px solid var(--olive);}
.test-author strong{display:block;font-family:var(--font-display);font-size:0.92rem;font-weight:700;color:var(--tan-lt);}
.test-author span{display:block;font-size:0.75rem;color:var(--text-muted);margin-top:2px;}

/* ─── CONTACT ─────────────────────────────────── */
.contact{padding:100px 40px;max-width:1300px;margin:0 auto;}
.contact-inner{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:start;}
.contact-info .section-tag{margin-bottom:14px;}
.contact-info h2{color:var(--theme-text-heading);margin-bottom:14px;}
.contact-info>p{color:var(--text-muted);font-size:0.93rem;line-height:1.7;margin-bottom:34px;}
.contact-details{display:flex;flex-direction:column;gap:16px;}
.c-item{display:flex;align-items:flex-start;gap:14px;padding:14px 18px;background:var(--dark-2);border:1px solid var(--border);border-radius:var(--radius);transition:border-color 0.2s;}
.c-item:hover{border-color:var(--olive);}
.c-icon{font-size:1.2rem;}
.c-item strong{display:block;font-family:var(--font-display);font-size:0.78rem;font-weight:700;letter-spacing:0.1em;color:var(--text-dim);text-transform:uppercase;margin-bottom:3px;}
.c-item a,.c-item span{font-size:0.88rem;color:var(--text);word-break:break-word;}
.c-item a:hover{color:var(--lime-tac);}

.contact-form-wrap{background:var(--dark-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:38px;}
.contact-form h3{color:var(--tan-lt);font-size:1.35rem;margin-bottom:26px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.contact-form input,.contact-form textarea{
  width:100%;background:var(--dark-3);border:1px solid var(--border);
  border-radius:var(--radius);padding:11px 14px;color:var(--text);font-size:0.88rem;
  transition:border-color 0.2s;display:block;margin-bottom:14px;
}
.contact-form .form-row input{margin-bottom:0;}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--olive);box-shadow:0 0 0 3px rgba(var(--theme-primary-dim-rgb),0.1);}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--text-dim);}
.contact-form textarea{resize:vertical;min-height:120px;}
.contact-form .btn-primary{width:100%;justify-content:center;}

/* ─── FOOTER ─────────────────────────────────── */
.footer{background:var(--dark);border-top:1px solid var(--border);padding-top:80px;}

.footer-inner{
  max-width:1300px;margin:0 auto;padding:0 40px 60px;
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:60px;
}

.footer-brand .logo{margin-bottom:18px;}
.footer-brand p{color:var(--text-muted);font-size:0.83rem;line-height:1.7;margin-bottom:22px;max-width:280px;}
.footer-social{display:flex;gap:10px;}
.footer-social a{width:36px;height:36px;border:1px solid var(--border);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:var(--transition);}
.footer-social a svg{width:16px;height:16px;}
.footer-social a:hover{border-color:var(--olive);color:var(--khaki);}

.footer-links{
  display:contents;
}
.footer-col h4{font-family:var(--font-display);font-size:0.8rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--tan);margin-bottom:18px;}
.footer-col ul{display:flex;flex-direction:column;gap:9px;}
.footer-col a{font-size:0.83rem;color:var(--text-muted);transition:color 0.2s;}
.footer-col a:hover{color:var(--khaki);}

.footer-bottom{
  max-width:1300px;margin:0 auto;padding:22px 40px;
  border-top:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
}
.footer-bottom p{font-size:0.78rem;color:var(--text-dim);}
.payment-icons{display:flex;gap:8px;}
.payment-icons span{font-family:var(--font-display);font-size:0.65rem;font-weight:700;letter-spacing:0.1em;color:var(--text-dim);border:1px solid var(--border);padding:3px 9px;border-radius:3px;}

/* ─── ANIMATIONS ─────────────────────────────────── */
@keyframes fadeInDown{from{opacity:0;transform:translateY(-20px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}

.reveal{opacity:0;transform:translateY(28px);transition:opacity 0.7s ease,transform 0.7s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}

/* ─── RESPONSIVE ─────────────────────────────────── */
/* Tablet (≤1100px) */
@media(max-width:1100px){
  .tech-grid{grid-template-columns:repeat(2,1fr);}
  .footer-inner{grid-template-columns:1fr 1fr;gap:40px;}
  .about-inner{gap:50px;}
}

/* Small Tablet & Large Phone (≤900px) */
@media(max-width:900px){
  .nav-links,.nav-actions,.site-search-desktop{display:none !important;}
  .site-search-mobile{display:flex !important;}
  .nav-toggle{display:block;}
  .strip-inner{grid-template-columns:repeat(2,1fr);}
  .strip-item{border-bottom:1px solid var(--border);}
  .strip-item:nth-child(2n){border-right:none;}
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .about-inner{grid-template-columns:1fr;gap:40px;}
  .about-img-frame img{height:320px;}
  .guarantee-grid{grid-template-columns:repeat(2,1fr);}
  .test-grid{grid-template-columns:repeat(2,1fr);}
  .contact-inner{grid-template-columns:1fr;gap:40px;}
}

/* Phone (≤768px) */
@media(max-width:768px){
  /* Topbar */
  .topbar-inner{flex-direction:column;gap:6px;font-size:0.7rem;line-height:1.5;}
  
  /* Navigation */
  .nav-inner{height:60px;padding:0 20px;}
  .nav-toggle{font-size:1.5rem;}
  .mobile-menu a{padding:16px 24px;font-size:0.9rem;}
  
  /* Hero Section */
  .hero{min-height:90vh;padding:100px 20px 60px;}
  .hero-content{padding:0 16px;}
  .hero-badge{font-size:0.58rem;padding:5px 16px;margin-bottom:20px;}
  .hero-title{font-size:clamp(2rem,8vw,3.5rem);margin-bottom:16px;}
  .hero-subtitle{font-size:0.88rem;margin-bottom:32px;line-height:1.6;}
  
  /* Hero Stats */
  .hero-stats{
    flex-direction:column;gap:20px;padding:24px 20px;
    margin-bottom:36px;max-width:280px;margin-left:auto;margin-right:auto;
  }
  .stat{padding:12px 0;border-bottom:1px solid var(--border);width:100%;}
  .stat:last-child{border-bottom:none;}
  .stat-divider{display:none;}
  .stat-num{font-size:clamp(1.8rem,5vw,2.5rem);}
  
  /* Hero CTA */
  .hero-cta{flex-direction:column;align-items:stretch;gap:12px;max-width:300px;margin:0 auto;}
  .btn-primary,.btn-secondary{width:100%;justify-content:center;padding:14px 24px;}
  
  /* Hero Scroll Hint */
  .hero-scroll-hint{bottom:24px;}
  
  /* Feature Strip */
  .feature-strip{padding:20px 16px;}
  .strip-inner{grid-template-columns:1fr;gap:0;}
  .strip-item{border-right:none;border-bottom:1px solid var(--border);padding:16px 12px;gap:12px;}
  .strip-item:last-child{border-bottom:none;}
  .strip-icon{width:36px;height:36px;}
  .strip-item strong{font-size:0.88rem;}
  .strip-item span{font-size:0.74rem;}
  
  /* Products Section */
  .products{padding:70px 16px;}
  .section-header{margin-bottom:40px;padding:0 12px;}
  .section-header p{font-size:0.95rem;}
  .product-tabs{margin-bottom:40px;gap:6px;}
  .tab-btn{font-size:0.75rem;padding:10px 20px;}
  .product-grid{grid-template-columns:1fr;gap:16px;}
  .product-info{padding:16px;}
  .product-info h3{font-size:0.95rem;}
  .product-info p{font-size:0.8rem;}
  .product-tags span{font-size:0.54rem;padding:2px 6px;}
  .product-specs span{font-size:0.68rem;}
  .price-current{font-size:1.25rem;}
  .products-cta{margin-top:40px;}
  
  /* Technology Section */
  .technology{padding:70px 16px;}
  .tech-grid{grid-template-columns:1fr;gap:16px;}
  .tech-card{padding:24px 20px;}
  .tech-icon{width:44px;height:44px;margin-bottom:14px;}
  .tech-card h3{font-size:0.98rem;margin-bottom:8px;}
  .tech-card p{font-size:0.82rem;}
  
  /* About Section */
  .about{padding:70px 16px;}
  .about-inner{gap:40px;}
  .about-img-frame img{height:280px;}
  .about-metrics{flex-direction:column;gap:12px;}
  .metric{padding:14px;}
  .metric-val{font-size:1.2rem;}
  .about-text h2{font-size:clamp(1.6rem,5vw,2.2rem);}
  .about-text .lead{font-size:0.98rem;}
  .about-pillars{gap:10px;margin:20px 0 24px;}
  .pillar{padding:10px 14px;gap:12px;}
  .pillar-icon{font-size:1.2rem;}
  .pillar strong{font-size:0.88rem;}
  
  /* Guarantee Section */
  .guarantee{padding:70px 16px;}
  .guarantee-grid{grid-template-columns:1fr;gap:16px;}
  .guarantee-card{padding:24px 20px;}
  .g-icon{font-size:1.8rem;margin-bottom:12px;}
  .guarantee-card h3{font-size:0.98rem;margin-bottom:6px;}
  .guarantee-card p{font-size:0.8rem;}
  
  /* Testimonials */
  .testimonials{padding:70px 16px;}
  .test-grid{grid-template-columns:1fr;gap:16px;}
  .test-card{padding:24px 20px;}
  .test-card p{font-size:0.84rem;}
  
  /* Contact Section */
  .contact{padding:70px 16px;}
  .contact-info>p{font-size:0.88rem;margin-bottom:24px;}
  .contact-details{gap:12px;}
  .c-item{padding:12px 14px;gap:12px;}
  .c-icon{font-size:1.1rem;}
  .c-item strong{font-size:0.74rem;}
  .c-item a,.c-item span{font-size:0.84rem;}
  .contact-form-wrap{padding:24px 20px;}
  .contact-form h3{font-size:1.2rem;margin-bottom:20px;}
  .form-row{grid-template-columns:1fr;gap:12px;}
  .contact-form input,.contact-form textarea{font-size:0.86rem;padding:12px 14px;}
  
  /* Footer */
  .footer{padding-top:60px;}
  .footer-inner{grid-template-columns:1fr;gap:32px;padding:0 20px 40px;}
  .footer-brand p{max-width:100%;}
  .footer-col h4{font-size:0.78rem;}
  .footer-col a{font-size:0.8rem;}
  .footer-bottom{padding:20px;flex-direction:column;text-align:center;gap:12px;}
  .footer-bottom p{font-size:0.75rem;}
  .payment-icons span{font-size:0.62rem;}
  
  /* Buttons */
  .section-tag{font-size:0.58rem;padding:4px 12px;margin-bottom:12px;}
  
  /* Section Headers */
  .section-header{margin-bottom:40px;}
  .section-header p{font-size:0.9rem;}
}

/* Small Phone (≤480px) */
@media(max-width:480px){
  /* Typography */
  h1{font-size:clamp(1.8rem,10vw,3rem);}
  h2{font-size:clamp(1.4rem,6vw,2.2rem);}
  h3{font-size:clamp(0.95rem,3vw,1.15rem);}
  
  /* Hero */
  .hero{padding:80px 16px 50px;}
  .hero-badge{font-size:0.54rem;}
  .hero-subtitle{font-size:0.82rem;}
  
  /* Hero Stats */
  .hero-stats{padding:20px 16px;gap:16px;}
  .stat{padding:10px 0;}
  .stat-num{font-size:1.6rem;}
  .stat-label{font-size:0.6rem;}
  
  /* Products */
  .products{padding:60px 12px;}
  .product-card{border-radius:var(--radius);}
  .product-info{padding:14px;}
  .product-info h3{font-size:0.92rem;line-height:1.25;}
  .product-tags span{font-size:0.52rem;padding:2px 5px;}
  .price-current{font-size:1.15rem;}
  
  /* Technology */
  .technology{padding:60px 12px;}
  .tech-card{padding:20px 16px;}
  
  /* About */
  .about{padding:60px 12px;}
  .about-visual{margin:0 -12px;width:calc(100% + 24px);max-width:calc(100% + 24px);}
  .about-visual img{width:100%;height:auto;display:block;}
  .about-img-frame img{height:240px;}
  .about-img-badge{padding:12px 18px;bottom:16px;right:16px;}
  .badge-num{font-size:1.4rem;}
  
  /* Contact */
  .contact{padding:60px 12px;}
  .contact-form-wrap{padding:20px 16px;}
  
  /* Footer */
  .footer-inner{padding:0 16px 36px;}
  .footer-bottom{padding:18px 16px;}

  /* Bug 4 Fix: Video Wide — minimal horizontal padding on mobile */
  .video-wide { padding: 48px 0; }
  .video-wide-inner { padding: 0 16px; }

  /* Bug 4 Fix: Media Dual — minimal horizontal padding, images full-bleed */
  .media-dual { padding: 48px 0; }
  .media-dual-inner { padding: 0 16px; }
  .panel-visual { margin: 0 -16px; width: calc(100% + 32px); max-width: calc(100% + 32px); }
  .panel-visual img { width: 100%; display: block; }

  /* Bug 4 Fix: Media/Video Text — images full-bleed */
  .media-text-visual, .video-text-visual { margin: 0 -12px; width: calc(100% + 24px); max-width: calc(100% + 24px); }
  .media-text-visual img, .video-text-visual img { width: 100%; height: auto; display: block; }
}

/* ─── CMS DYNAMIC SECTIONS ────────────────────────── */
.media-text {
  padding: 80px 40px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.media-text-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  gap: 60px;
  align-items: center;
  flex-wrap: wrap;
}
.media-text-inner.layout-right {
  flex-direction: row-reverse;
}
.media-text-visual {
  flex: 1;
  min-width: 300px;
}
.media-text-visual img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(var(--theme-bg-rgb),0.3);
}
.media-text-content {
  flex: 1;
  min-width: 300px;
}
.media-text-content h2 {
  font-size: 2.5rem;
  margin: 15px 0 25px;
  line-height: 1.2;
}
.media-text-content p {
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 30px;
}
.media-text-bullets {
  list-style: none;
  margin-bottom: 35px;
}
.media-text-bullets li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 15px;
  color: var(--text);
  font-weight: 500;
}
.media-text-bullets li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--lime);
  font-weight: 900;
}

.video-wide {
  padding: 100px 40px;
  background: var(--theme-bg);
}
.video-wide-inner {
  max-width: 1300px;
  margin: 0 auto;
}
.video-wrap {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(var(--theme-bg-rgb),0.6);
  border: 1px solid var(--border);
}
.video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-text {
  padding: 80px 40px;
  background: var(--bg-soft);
}
.video-text-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  gap: 60px;
  align-items: center;
}
.video-text-inner.layout-right {
  flex-direction: row-reverse;
}
.video-text-visual {
  flex: 1.2;
  min-width: 0;
}
.video-text-content {
  flex: 0.8;
  min-width: 0;
}

.media-dual {
  padding: 80px 40px;
  background: var(--bg);
}
.media-dual-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  gap: 30px;
}
.media-panel {
  flex: 1;
  background: var(--bg-soft);
  border-radius: 20px;
  padding: 40px;
  border: 1px solid var(--border);
}
.panel-visual {
  margin-bottom: 30px;
  border-radius: 12px;
  overflow: hidden;
}
.panel-visual img {
  width: 100%;
  display: block;
}

/* ============================================================
   CMS ADMIN BUTTON
   ============================================================ */

/* ============================================================
   MOBILE RESPONSIVE FIXES — Media Query Only (Desktop Frozen)
   All rules below are strictly scoped to ≤900px or ≤768px or ≤480px
   ============================================================ */

/* ── Problem 2: video-text + media-dual — 垂直堆叠 ─────────── */
@media (max-width: 900px) {
  /* Video+Text: stack vertically, media first */
  .video-text { padding: 56px 20px; }
  .video-text-inner,
  .video-text-inner.layout-right {
    flex-direction: column !important;
    gap: 28px;
  }
  .video-text-visual,
  .video-text-content {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  /* layout-right: still media first on mobile */
  .video-text-inner.layout-right .video-text-visual { order: 1; }
  .video-text-inner.layout-right .video-text-content { order: 2; }
  /* Bug 3 Fix: Center-align text when stacked on mobile */
  .video-text-content { text-align: center !important; }

  /* Media+Text: stack vertically */
  .media-text { padding: 56px 20px; }
  .media-text-inner,
  .media-text-inner.layout-right {
    flex-direction: column !important;
    gap: 28px;
  }
  .media-text-visual,
  .media-text-content {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .media-text-inner.layout-right .media-text-visual { order: 1; }
  .media-text-inner.layout-right .media-text-content { order: 2; }
  /* Bug 3 Fix: Center-align text when stacked on mobile */
  .media-text-content { text-align: center !important; }

  /* Dual Media: stack vertically */
  .media-dual { padding: 56px 20px; }
  .media-dual-inner {
    flex-direction: column !important;
    gap: 20px;
  }
  .media-panel {
    width: 100% !important;
    padding: 24px 20px;
  }
  /* Bug 3 Fix: Center-align panel text when stacked on mobile */
  .panel-content { text-align: center !important; }

  /* Video Wide */
  .video-wide { padding: 56px 20px; }
  .video-wide-inner { padding: 0; }

  /* Bug 4 Fix: About — visual full-bleed on mobile */
  .about-inner { padding: 0 16px !important; }
  .about-visual { margin: 0 -16px; width: calc(100% + 32px); max-width: calc(100% + 32px); }
  .about-visual img { width: 100%; height: auto; display: block; }
}

/* ── Problem 1: Video 视频异常放大/黑屏/滑动回退 ────────────── */
/* 根因: video-wrap 的 aspect-ratio 在 flex 子元素压缩时触发渲染层爆炸
   修复: 确保 video-text-visual 下的 video-wrap 有明确宽度约束，
         防止 GPU 合成层 overflow 导致黑屏 */
@media (max-width: 900px) {
  .video-text-visual .video-wrap,
  .media-text-visual .video-wrap {
    width: 100% !important;
    max-width: 100% !important;
    /* 强制触发新 GPU 层，隔离渲染上下文，防止黑屏传染下方内容 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: auto; /* 不预分配 will-change 避免过多层 */
    overflow: hidden;
    border-radius: 10px;
  }

  /* 问题 B: 滑动回退 — 360° viewer 的 touch-action:pan-y 不会引起视频回退，
     但 Framer Motion 的 AnimatePresence 3D transform 在 mobile 上会创建
     巨大合成层并导致页面滚动 jank。
     对 TabbedImages 的 ti-tab-desc-wrap 在移动端关闭 3D，降低层压力。 */
  .ti-tab-desc-wrap {
    overflow: hidden !important;
    perspective: none !important;
  }
  .ti-tab-desc-slot {
    transform: none !important;
    will-change: opacity !important;
  }
}

/* ── Problem 2 (v2): 价格字号与 Products Grid 卡片对齐 ────────────── */
@media (max-width: 768px) {
  /* 价格与 Products Grid .price-current 完全对齐: 1.25rem (≈20px) */
  .d360s-price {
    font-size: clamp(18px, 4.5vw, 1.25rem) !important;
    letter-spacing: -0.2px !important;
  }
  .d360s-orig-price {
    font-size: 0.85rem !important;
  }
  .d360s-product-name {
    font-size: clamp(20px, 5vw, 28px) !important;
    margin: 6px 0 10px !important;
  }
  .d360s-subtitle {
    font-size: 13px !important;
    margin-bottom: 14px !important;
    line-height: 1.6 !important;
  }
  .d360s-features li {
    font-size: 13px !important;
  }
}
@media (max-width: 480px) {
  /* 480px 断点: 与 Products Grid .price-current (1.15rem ≈18px) 对齐 */
  .d360s-price {
    font-size: clamp(17px, 4vw, 1.15rem) !important;
  }
}

/* ── Problem 3B: 副文本/描述过大 (media-text, video-text, media-dual) ── */
@media (max-width: 768px) {
  /* Media+Text desc */
  .media-text-content p {
    font-size: 0.88rem !important;
    line-height: 1.65 !important;
    margin-bottom: 20px !important;
  }
  .media-text-content h2 {
    font-size: clamp(1.4rem, 5vw, 2rem) !important;
    margin: 10px 0 16px !important;
  }

  /* Video+Text desc */
  .video-text-content p {
    font-size: 0.88rem !important;
    line-height: 1.65 !important;
    margin-bottom: 20px !important;
  }
  .video-text-content h2 {
    font-size: clamp(1.4rem, 5vw, 2rem) !important;
    margin: 10px 0 16px !important;
  }
  .video-text-content .section-tag { margin-bottom: 8px; }

  /* Dual Media desc */
  .media-panel p {
    font-size: 0.88rem !important;
    line-height: 1.65 !important;
  }
  .media-panel h2 {
    font-size: clamp(1.3rem, 4.5vw, 1.8rem) !important;
    margin-bottom: 12px !important;
  }
  .panel-visual { margin-bottom: 18px; }
}

/* ── Problem 4: 产品目录按钮区域间距过大/黑屏空白 ─────────────── */
@media (max-width: 768px) {
  .catalog-cta {
    margin-top: 36px !important;
    padding-top: 20px !important;
  }
  .btn-catalog {
    padding: 14px 24px !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.12em !important;
    gap: 10px !important;
  }
  .catalog-cta-sub {
    font-size: 0.72rem !important;
    margin-top: 10px !important;
  }
}
@media (max-width: 480px) {
  .catalog-cta {
    margin-top: 28px !important;
    padding-top: 16px !important;
  }
  .btn-catalog {
    padding: 12px 18px !important;
    font-size: 0.62rem !important;
    white-space: normal !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* ── 其他版块移动端通用间距收紧 ────────────────────────────────── */
@media (max-width: 768px) {
  /* Grid Feature section padding */
  .grid-feature { padding: 50px 0 !important; }
  .grid-feature-inner { padding: 0 16px !important; }

  /* Video Grid section padding */
  .video-grid { padding: 50px 0 !important; }
  .video-grid-inner { padding: 0 16px !important; }
  /* Video grid: 9:16 类视频保持2列, 16:9类改为1列 */
  .video-grid-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* FadeCarousel mobile */
  .fc-content { padding: 60px 20px 40px !important; }
  .fade-carousel { min-height: 380px !important; }
  .fc-track, .fc-slide { min-height: 380px !important; }

  /* TabbedImages mobile: 图片在上，tabs在下 */
  .tabbed-images { padding: 50px 0 !important; }
  .ti-inner { padding: 0 16px !important; }
  .ti-image-panel { min-height: 220px !important; }
  .ti-image-slide img { min-height: 220px !important; }
  .ti-tab { padding: 10px 14px !important; }
  .ti-tab-label { font-size: 13px !important; margin-bottom: 4px !important; }
  .ti-tab-num { font-size: 9px !important; margin-bottom: 2px !important; }
  .ti-tab-desc { font-size: 11px !important; }
}

@media (max-width: 480px) {
  /* Video grid: 很小屏下也保持2列（9:16视频适合2列） */
  .video-grid-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .video-grid-wrap[style*="repeat(1"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Problem 3: Products Grid → 移动端水平 Carousel ────────────
   严格约束 ≤767px，不触碰 768px+ 的 grid 布局
   ──────────────────────────────────────────────────────────────
   KEY FIXES vs previous attempt:
   1. REMOVED overflow:hidden from .products — it was clipping the carousel.
   2. Use negative margin + padding technique to let carousel bleed to screen edges
      while keeping section's other content (header, tabs, CTA) at normal indent.
   3. .product-grid.active has its own overflow-x:scroll — that's all it needs.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* 1. DO NOT add overflow:hidden to .products — let carousel scroll freely.
        The existing padding from ≤768px rule (padding:70px 16px) is fine for header/tabs;
        we will punch the grid out of it via negative margin. */

  /* 2. 产品 grid 改为 flex 横向滚动 carousel */
  .product-grid {
    display: none;                     /* 默认隐藏（tab 切换时由 .active 控制） */
    grid-template-columns: unset;      /* 清除 768/900px 断点设的 grid 列数 */
  }
  .product-grid.active {
    display: flex !important;          /* 覆盖 display:grid → flex */
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;   /* Force consistent height */

    /* 用负 margin 突破父级 section 的 16px 左右 padding，让 carousel 满屏宽 */
    margin-left: -16px !important;
    margin-right: -16px !important;

    /* 横向滚动 */
    overflow-x: scroll !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;  /* iOS 惯性滚动 */

    /* CSS Scroll Snapping */
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth;

    /* 左边 padding 留出第一张卡片的起始空白；
       右边 padding 让最后一张滚过去后有收尾空白 */
    padding: 0 16px 20px !important;
    gap: 12px !important;              /* 用 gap 代替 margin-right，更干净 */

    /* 隐藏滚动条 */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .product-grid.active::-webkit-scrollbar {
    display: none !important;
  }

  /* 3. 每张卡片：固定宽度 82vw → 右侧自然露出下一张左边缘 */
  .product-grid.active .product-card {
    flex: 0 0 82vw !important;         /* vw 单位：与屏幕宽度绑定，不受 padding 影响 */
    width: 82vw !important;
    max-width: 300px !important;
    min-width: 220px !important;
    scroll-snap-align: start !important;
    height: auto !important; /* Safari flex-stretch bug fix */
    align-self: stretch !important;
  }

  /* 4. 过滤隐藏的卡片：display:none 即可（JS inline style），flex 布局下生效 */
  .product-grid.active .product-card[style*="display: none"] {
    display: none !important;
  }
}

/* ── Problem 4: click_to_play 视频移动端黑屏封面 ─────────────
   修复思路：
   - 视频 `poster` 属性是最可靠的封面方案，但部分移动端在无 poster 时不渲染第一帧。
   - 用 CSS 确保 .video-player-container 的背景不是透明的（防止看穿到黑色 video 底色）。
   - 同时通过 JS（在 VideoPlayer.tsx）在 canplay 时设置 currentTime=0.001 强制渲染首帧。
   - 以下 CSS 只在 hover:none（触摸设备）上生效，Desktop 完全不受影响。
   ──────────────────────────────────────────────────────────── */
@media (hover: none) {
  /* 让 click_to_play 视频容器在未播放时有深色背景（而非透明/黑屏空洞感） */
  .video-player-container {
    background: var(--theme-bg-soft);   /* Theme-aware fallback while video frame decodes */
  }

  /* 播放按钮在移动端始终可见（不依赖 hover），确保用户知道可交互 */
  .video-player-container > div[style*="cursor: pointer"] {
    opacity: 1 !important;
  }
}

/* ── Task 6: Video Grid Gallery — Full border-radius clipping ──────────────
   Root cause: The .video-grid-cell container has border-radius + overflow:hidden,
   but the <video> element inside does NOT inherit border-radius, so it visually
   bleeds through the container's rounded corners on the bottom half.
   Fix: Force all video elements inside .video-grid-cell (and the VideoPlayer
   container) to inherit border-radius. Using isolation:isolate creates a new
   stacking context on the cell, ensuring the browser clips child content correctly.
   ──────────────────────────────────────────────────────────────────────────── */
.video-grid-cell {
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;    /* new stacking context → guarantees child clipping */
}

/* Propagate radius down through VideoPlayer wrapper → <video> element */
.video-grid-cell .video-player-container,
.video-grid-cell video {
  border-radius: inherit;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════
   IMAGE PROTECTION — Anti right-click download
   Prevents casual image saving via right-click > Save Image As
   ══════════════════════════════════════════════════════════════ */
img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Also protect video elements from right-click context menu */
video {
  -webkit-user-drag: none;
  user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ── BFCache v16: Force reset ALL hover transforms when restoring from BFCache ──
   The .bf-cache-restoring class is added to <html> by the global pageshow handler
   and removed after a short delay. During that window, ALL CSS :hover transforms
   are neutralized to prevent the "frozen zoom" ghost effect. */
html.bf-cache-restoring .product-card:hover .product-img-wrap img,
html.bf-cache-restoring .grid-feature-item:hover .gf-cover-img,
html.bf-cache-restoring .ti-image-slide:hover img,
html.bf-cache-restoring .fc-arrow:hover,
html.bf-cache-restoring *:hover {
  transform: none !important;
}

/* ════════════════════════════════════════════════════════════════════════════════
   v49: Product Detail Page — Mobile Layout Reordering + Touch Fix
   ──────────────────────────────────────────────────────────────────────────────
   Moved from unreliable JSX <style> tags to global CSS for 100% browser
   compatibility. Covers both real mobile (@media) and PreviewPanel (@container).
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Default flex order — desktop (no change) ── */
.pdp-gallery { order: 1; }
.pdp-info     { order: 2; }
.pdp-specs    { order: 3; }
.pdp-description { order: 4; }

.pdh-gallery { order: 1; }
.pdh-info     { order: 2; }
.pdh-specs    { order: 3; }

/* ── Real mobile: viewport-based @media (<768px) ── */
@media (max-width: 767px) {
  .pdp-main {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }
  .pdp-gallery,
  .pdp-info,
  .pdp-specs {
    width: 100% !important;
    flex: none !important;
    min-width: auto !important;
  }
}

/* ── PreviewPanel: container-based @container (frame name) ──
   PreviewPanel sets containerName: 'frame' on its device-scroll div.
   These rules fire when the preview canvas is ≤768px (tablet/mobile mode). */
@container frame (max-width: 768px) {
  .pdp-main {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }
  .pdp-gallery,
  .pdp-info,
  .pdp-specs {
    width: 100% !important;
    flex: none !important;
    min-width: auto !important;
  }
  /* product_detail_header section inside PreviewPanel */
  .product-detail-header {
    flex-direction: column !important;
    gap: 32px !important;
    padding: 32px 20px !important;
  }
  .product-detail-header > div:first-child,
  .product-detail-header > div:last-child {
    flex: none !important;
    min-width: 0 !important;
    width: 100% !important;
  }
}

@container frame (max-width: 375px) {
  .product-detail-header {
    padding: 24px 16px !important;
    gap: 20px !important;
  }
}

/* ── Touch device fix: eliminate 300ms tap delay on CTA buttons ──
   iOS Safari waits 300ms after a tap to detect double-tap zoom.
   touch-action: manipulation tells the browser to handle the gesture
   as a tap immediately, eliminating the delay and the "double-tap to
   navigate" user experience issue. */
.btn-product {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}