/* Cinematic editorial layer
   - dark, high-contrast palette
   - oversized type + uppercase micro-labels
   - rounded “glass” panels + subtle grain
   - gentle scroll reveal
*/

:root{
  /* lifted blacks for readability */
  --cin-bg: #eaf2ff;
  --cin-bg-2: #dfeafb;
  --cin-surface: rgba(255,255,255,.06);
  --cin-surface-2: rgba(255,255,255,.09);
  --cin-border: rgba(255,255,255,.14);
  --cin-ink: #0f172a;
  --cin-muted: #334155;
  --cin-faint: #64748b;
  --cin-accent: #b9ff3b;
  --cin-accent-2: #6ee7ff;
  --cin-radius: 18px;
  --cin-shadow: 0 18px 70px rgba(0,0,0,.45);
  --cin-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --cin-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --cin-scroll-p: 0;
  --cin-scroll-y: 0px;
}

/* Global backdrop (keep content width from existing layout) */
html, body{
  background:
    radial-gradient(1100px 780px at 18% 6%, rgba(110,231,255,.20), transparent 62%),
    radial-gradient(980px 720px at 82% 5%, rgba(185,255,59,.14), transparent 60%),
    radial-gradient(1400px 980px at 50% 28%, rgba(255,255,255,.38), transparent 72%),
    linear-gradient(180deg, var(--cin-bg) 0%, var(--cin-bg-2) 100%) !important;
}

body{
  font-family: var(--cin-font) !important;
  color: #0f172a !important;
}

/* Slightly brighter reading baseline */
body, #right-main, #home_update {
  filter: none;
}

/* Cinema page transitions (enabled by JS via html.cin-transitions) */
html.cin-transitions body{
  transition: opacity .22s ease, transform .22s ease, filter .22s ease;
}
html.cin-transitions body.cin-enter{
  opacity: 0.001;
  transform: translateY(8px);
  filter: saturate(1.05) contrast(1.03);
}
html.cin-transitions body.cin-enter.cin-enter-active{
  opacity: 1;
  transform: translateY(0);
}
html.cin-transitions body.cin-leave{
  opacity: 0.001;
  transform: translateY(8px);
  filter: blur(0.5px) saturate(1.05);
}

/* Subtle grain overlay */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .03;
  background-image:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.20) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 30%, rgba(255,255,255,.16) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,.14) 0 1px, transparent 2px);
  background-size: 120px 120px, 160px 160px, 200px 200px;
  mix-blend-mode: overlay;
}

/* Moving cinematic haze controlled by scroll JS vars */
body::after{
  content:"";
  position: fixed;
  inset: -8% -10%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 520px at 50% 18%, rgba(255,255,255,.30), transparent 70%),
    radial-gradient(800px 500px at 20% 28%, rgba(110,231,255,.07), transparent 72%),
    radial-gradient(800px 500px at 80% 30%, rgba(185,255,59,.05), transparent 72%);
  transform: translateY(calc(var(--cin-scroll-p) * -36px));
  opacity: calc(.55 + (var(--cin-scroll-p) * .10));
  transition: transform .2s linear, opacity .25s ease;
}

/* Spotlight behind the main content column */
#zwrapper{
  position: relative;
}
#zwrapper::before{
  content:"";
  position:absolute;
  left: -160px;
  right: -160px;
  top: -120px;
  height: 720px;
  pointer-events:none;
  z-index: 0;
  background:
    radial-gradient(closest-side at 50% 24%, rgba(255,255,255,.30), transparent 72%),
    radial-gradient(closest-side at 35% 10%, rgba(110,231,255,.18), transparent 76%),
    radial-gradient(closest-side at 65% 12%, rgba(185,255,59,.12), transparent 80%);
  filter: blur(0px);
  transform: translateY(calc(var(--cin-scroll-p) * -24px));
  opacity: calc(.96 + (var(--cin-scroll-p) * .04));
  transition: transform .2s linear, opacity .25s ease;
}

/* Ensure main app stacks above grain */
.zk-app,
#zwrapper,
#right-page,
#right-content,
#right-main{
  position: relative;
  z-index: 1;
}

/* Give the home product-center a “stage” so it doesn't float on black */
#product-center .container,
.product-center-section .container{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  padding: 18px 18px 22px;
  box-shadow: 0 12px 40px rgba(15,23,42,.16);
  transform: translateY(calc(var(--cin-scroll-p) * -10px));
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

/* Lift general content surfaces so pages aren't “too dark” */
#right-main{
  background: rgba(255,255,255,.45);
  border-radius: 18px;
}

#home_update{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  padding: 14px 14px 6px;
  transform: translateY(calc(var(--cin-scroll-p) * -8px));
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

/* Improve readability for legacy paragraphs in dark theme */
p, li, td, th, div{
  color: inherit;
}

/* Make product tabs readable on dark theme */
.product-center-section .tabs-container{
  background: rgba(255,255,255,.94) !important;
  border-color: rgba(15,23,42,.10) !important;
}
.product-center-section .tab-btn{
  color: #0f172a !important;
}
.product-center-section .tab-btn.active{
  background: linear-gradient(90deg, rgba(185,255,59,.92), rgba(110,231,255,.82)) !important;
  color: rgba(4,6,8,.92) !important;
}

/* Make legacy “center” safe */
center{ color: inherit; }

/* Links */
a{ color: #0f172a; }
a:hover{ color: #0b5fff; }

/* Header: glassy sticky bar */
#header.zk-top-header{
  position: sticky !important;
  top: 0;
  z-index: 20000001 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,250,255,.78)) !important;
  border-bottom: 1px solid rgba(15,23,42,.12) !important;
  box-shadow: 0 10px 28px rgba(15,23,42,.12) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Logo slab: higher contrast for dark header */
#header.zk-top-header .zk-header-logo-slab{
  background: rgba(255,255,255,.95) !important;
  border-color: rgba(15,23,42,.12) !important;
}

/* Ensure nav area stays clickable above media layers */
#header.zk-top-header *{
  pointer-events: auto;
}

#header.zk-top-header .fen_nav ul.zk-topnav > li > a.menu_button,
#header.zk-top-header .fen_nav ul.zk-topnav.nav > li > a.menu_button{
  color: #0f172a !important;
  border-bottom-color: transparent !important;
}

#header.zk-top-header .fen_nav ul.zk-topnav > li:hover > a.menu_button,
#header.zk-top-header .fen_nav ul.zk-topnav > li > a.menu_button:hover{
  color: #0f172a !important;
  border-bottom-color: transparent !important;
}

/* Cinema nav: pill buttons with glow (clearer than underline) */
#header.zk-top-header .fen_nav ul.zk-topnav{
  gap: 6px !important;
}

#header.zk-top-header .fen_nav ul.zk-topnav > li > a.menu_button{
  padding: 10px 14px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 6px 16px rgba(15,23,42,.10) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  font-weight: 650 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease !important;
}

#header.zk-top-header .fen_nav ul.zk-topnav > li > a.menu_button:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.96) !important;
  border-color: rgba(15,23,42,.16) !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.14), 0 0 0 1px rgba(185,255,59,.12) inset !important;
}

#header.zk-top-header .fen_nav a.menu_button.is-active{
  background: linear-gradient(90deg, rgba(185,255,59,.92), rgba(110,231,255,.82)) !important;
  border-color: transparent !important;
  color: rgba(4,6,8,.92) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.10) inset !important;
}

/* Dropdown hover-bridge: prevents “gap” flicker when moving to menu */
#header.zk-top-header .fen_nav ul.zk-topnav > li{
  position: relative !important;
  padding-bottom: 12px; /* creates a safe hover runway */
}

#header.zk-top-header .fen_nav ul.zk-topnav > li::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px; /* bridge between button and dropdown */
  background: transparent;
}

/* Pull dropdown up to overlap the bridge slightly */
#header.zk-top-header .fen_nav .downmenu{
  top: calc(100% - 10px) !important;
}

/* Dropdown: cinema glass panel */
#header.zk-top-header .fen_nav .downmenu{
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  box-shadow: 0 18px 48px rgba(15,23,42,.18) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

#header.zk-top-header .zk-mega-heading{
  background: transparent !important;
  border-bottom: 1px solid rgba(15,23,42,.10) !important;
  color: #0f172a !important;
}

#header.zk-top-header .zk-mega-heading a{
  color:var(--zk-accent);
}
#header.zk-top-header .fen_nav .downmenu a:hover{
  color:var(--zk-accent);
}

.zk-header-search-inner #toplabel{ color: rgba(255,255,255,.62) !important; }
.zk-header-search-inner .zk-search-addon{ color: rgba(255,255,255,.78) !important; }

.zk-header-search-inner #topinput{
  color: rgba(255,255,255,.92) !important;
  -webkit-text-fill-color: rgba(255,255,255,.92) !important;
}
.zk-header-search-inner #toplabel{ color: rgba(255,255,255,.55) !important; }
.zk-header-search-inner .zk-search-addon{ color: rgba(255,255,255,.65) !important; }
#header.zk-top-header .zk-header-search-inner #topinput{
  padding-left: 6px !important;
}

#header.zk-top-header .zk-header-search-inner{
  left: 60px !important;
  color: #64748b !important;
}

#toplabel{
  left: 10px !important;
  color: #64748b !important;
}

/* Floating label behavior for top search */
#header.zk-top-header .zk-header-search-inner .input-label-top{
  opacity: 1 !important;
  z-index: 2 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  padding-top: 0 !important;
  transition: all .18s ease !important;
  pointer-events: none;
}

#header.zk-top-header .zk-header-search-inner #toplabel.input-label-floating-top{
  top: 6px !important;
  left: 46px !important;
  transform: none !important;
  font-size: 10px !important;
  color: #475569 !important;
  letter-spacing: .02em;
}

/* Panels become “glass” */
#myslider,
.news_mid,
.right_content,
.lay_right,
.right_title,
.mmenu1box,
.zk-m-about-block{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: var(--cin-shadow) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}


/* Hero strip: more cinematic */
.zk-hero-strip{
  border: 1px solid rgba(255,255,255,.10) !important;
  background:
    radial-gradient(900px 450px at 10% 20%, rgba(110,231,255,.18), transparent 55%),
    radial-gradient(700px 380px at 80% 20%, rgba(185,255,59,.16), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.03)) !important;
  box-shadow: var(--cin-shadow) !important;
}

.zk-kicker{
  font-family: var(--cin-mono) !important;
  letter-spacing: .16em !important;
  color: rgba(255,255,255,.70) !important;
}

.zk-hero-title{
  font-weight: 750 !important;
  letter-spacing: -0.035em !important;
  font-size: clamp(2rem, 4.5vw, 3.2rem) !important;
  line-height: 1.06 !important;
}

.zk-hero-sub{
  color: rgba(255,255,255,.74) !important;
  font-size: 1.05rem !important;
}

/* Buttons */
.zk-btn{
  border: 1px solid rgba(255,255,255,.12);
  gap: 10px;
}
.zk-btn-primary{
  background: linear-gradient(90deg, rgba(185,255,59,.92), rgba(110,231,255,.82)) !important;
  color: rgba(4,6,8,.92) !important;
  border: none !important;
}
.zk-btn-primary:hover{
  transform: translateY(-2px) scale(1.01);
}
.zk-btn-secondary{
  border-color: rgba(255,255,255,.24) !important;
}
.zk-btn-secondary:hover{
  border-color: rgba(255,255,255,.42) !important;
}

/* Section headings: mono microcopy + accent bar */
.zk-section-heading,
#hot-products label{
  color: rgba(255,255,255,.92) !important;
}
.zk-section-heading::after,
#hot-products label::after{
  background: linear-gradient(90deg, var(--cin-accent), var(--cin-accent-2)) !important;
}

/* Footer: slightly lighter than bg with border */
#footer{
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: var(--cin-shadow) !important;
}
#footer a{ color: rgba(255,255,255,.72) !important; }
#footer a:hover{ color: #fff !important; }
#footer h3, #footer h3 a{ color: rgba(255,255,255,.90) !important; }

/* Scroll-reveal (progressive enhancement) */
html:not(.cin-reveal-ready) [data-cin-reveal]{
  opacity: 1;
  transform: none;
}
html.cin-reveal-ready [data-cin-reveal]{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}
html.cin-reveal-ready [data-cin-reveal].is-inview{
  opacity: 1;
  transform: translateY(calc(var(--cin-scroll-p) * -6px));
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  [data-cin-reveal]{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Mobile tweaks */
@media (max-width: 640px){
  .zk-hero-title{ font-size: 1.75rem !important; }
  .zk-hero-sub{ font-size: .95rem !important; }
}

/* Sticky sidebar: anchor to viewport right corner on desktop */
@media (min-width: 901px){
  #sticky-sidebar.sticky-sidebar,
  #sticky-sidebar.cin-sidebar-anchored{
    position: fixed !important;
    top: 50vh !important;
    bottom: auto !important;
    left: auto !important;
    right: 10px !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    transform: translateY(-50%) !important;
    z-index: 10000001 !important;
    margin: 0 !important;
  }

  /* When live chat panel is open, lift sidebar above it */
  html.cin-chat-open #sticky-sidebar.sticky-sidebar,
  html.cin-chat-open #sticky-sidebar.cin-sidebar-anchored{
    top: auto !important;
    bottom: calc(80px + min(80vh, 560px) + 14px) !important;
    transform: none !important;
  }
}