/* ═══════════════════════════════════════════════════════════
   TEVEL — Unified Product Page Design
   Cinematic dark editorial aesthetic
   Applied to all 65 product pages
   ═══════════════════════════════════════════════════════════ */

/* ── Reset & Base ────────────────────────────────────────── */
:root {
  --ink: #0a0a0b;
  --ink2: #13130f;
  --gold: #d4a843;
  --gold-bright: #e8c266;
  --gold-dim: rgba(212,168,67,0.08);
  --gold-border: rgba(212,168,67,0.18);
  --text: #ffffff;
  --body: rgba(255,255,255,0.72);
  --muted: rgba(255,255,255,0.45);
  --line: rgba(255,255,255,0.08);
}

html { scroll-behavior: smooth; }

body {
  background: var(--ink) !important;
  color: var(--text) !important;
  font-family: 'Noto Sans Hebrew', sans-serif !important;
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Subtle film grain texture */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.025;
  mix-blend-mode: overlay;
}

/* Hide marquee - too retro for new design */
.marquee-container { display: none !important; }

/* ── LOGO BANNER (top of page) ────────────────────────────── */
.logo-banner {
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 36px 20px 20px !important;
  background: transparent;
  width: 100%;
  position: relative;
  z-index: 10;
}

.brand-logo {
  width: 130px !important;
  height: 130px !important;
  display: block;
  border-radius: 50%;
  object-fit: contain;
  transition: transform 0.4s ease;
  box-shadow: 0 0 60px rgba(212,168,67,0.3);
  ring: 1px solid rgba(212,168,67,0.3);
}
.brand-logo:hover { transform: scale(1.04); }

@media (max-width: 600px) {
  .brand-logo { width: 100px !important; height: 100px !important; }
  .logo-banner { padding: 24px 16px 12px !important; }
}

/* ── HERO SECTION ────────────────────────────────────────── */
section.hero {
  padding: 20px 24px 100px !important;
  text-align: center !important;
  position: relative !important;
  max-width: 1100px;
  margin: 0 auto;
}

/* Hide misleading back-btn (home icon row) and breadcrumb from hero */
.hero .back-btn,
.hero nav[aria-label="breadcrumb"] {
  display: none !important;
}

/* ── HIDE ALL MISLEADING/PROMOTIONAL ELEMENTS ── */
.wa-cta-block,
#wa-cta-block,
.inner-ft,
footer.inner-ft,
.ft,
div.ft,
.back-to-top,
#btt,
button#btt,
.home-btn,
a.home-btn {
  display: none !important;
}

/* In "סחורות קשורות" section: hide everything EXCEPT h2 and the links grid */
.ch[style*="text-align:center"] > .cl,
.ch[style*="text-align:center"] > p,
.ch[style*="text-align:center"] > a[href*="contact"] {
  display: none !important;
}

/* Hero kicker label */
.hero-k {
  font-family: 'Space Mono', monospace !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.35em !important;
  color: var(--gold) !important;
  margin-bottom: 30px !important;
  text-transform: uppercase !important;
  display: block !important;
}

/* H1 title — MASSIVE in GOLD (extra-high specificity) */
body section.hero h1,
body .hero h1,
section.hero h1#sync-title,
.hero h1#sync-title {
  font-family: 'Frank Ruhl Libre', serif !important;
  font-weight: 900 !important;
  font-size: clamp(80px, 14vw, 200px) !important;
  color: #d4a843 !important;
  line-height: 0.92 !important;
  letter-spacing: -2px !important;
  margin: 0 0 24px !important;
  text-align: center !important;
}

/* Deck (subtitle) in WHITE (extra-high specificity) */
body section.hero .deck,
body .hero .deck,
section.hero p.deck,
.hero p.deck,
p#sync-desc {
  font-family: 'Frank Ruhl Libre', serif !important;
  font-size: clamp(18px, 2.2vw, 22px) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  color: #FAF7F0 !important;
  max-width: 640px !important;
  margin: 0 auto 50px !important;
  line-height: 1.6 !important;
  text-align: center !important;
  opacity: 1 !important;
}

/* Hero image wrap */
.hero-img-wrap {
  max-width: 1000px !important;
  margin: 0 auto -180px !important;
  height: 480px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6) !important;
  border: 1px solid var(--gold-border);
  background: var(--ink2);
}
.hero-img-wrap img,
.hero-img-wrap video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}
@media (max-width: 700px) {
  .hero-img-wrap { height: 280px !important; margin-bottom: -100px !important; }
  section.hero { padding-bottom: 80px !important; }
}

/* ── MAIN CONTENT (chapters container) ──────────────────── */
.con {
  max-width: 820px !important;
  margin: 0 auto !important;
  padding: 200px 28px 80px !important;
  position: relative;
}
@media (max-width: 700px) {
  .con { padding: 130px 20px 60px !important; }
}

/* ── CHAPTER ────────────────────────────────────────────── */
.ch {
  margin-bottom: 80px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  position: relative;
}

/* Chapter label (eyebrow) */
.cl {
  font-family: 'Space Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.35em !important;
  color: rgba(212,168,67,0.7) !important;
  text-transform: uppercase;
  margin-bottom: 16px !important;
  display: block !important;
}

/* Chapter H2 */
.ch h2 {
  font-family: 'Frank Ruhl Libre', serif !important;
  font-size: clamp(32px, 5vw, 56px) !important;
  font-weight: 900 !important;
  color: var(--text) !important;
  line-height: 1.05 !important;
  letter-spacing: -1px !important;
  margin: 0 0 32px !important;
  border: none !important;
  padding: 0 !important;
}

/* H3 sub-headings */
.ch h3 {
  font-family: 'Frank Ruhl Libre', serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin: 44px 0 16px !important;
  padding-right: 14px !important;
  border-right: 3px solid var(--gold) !important;
  line-height: 1.3 !important;
}

/* Paragraphs */
.ch p {
  color: var(--body) !important;
  font-size: 17px !important;
  line-height: 1.95 !important;
  margin-bottom: 20px !important;
  font-weight: 300 !important;
}

/* Drop cap paragraph (opening of chapter) */
.ch p.dc {
  font-size: 18px !important;
  line-height: 1.95 !important;
}
.ch p.dc::first-letter {
  font-family: 'Frank Ruhl Libre', serif !important;
  font-size: 3.5em !important;
  font-weight: 900 !important;
  color: var(--gold) !important;
  line-height: 1 !important;
  float: right !important;
  margin-left: 10px !important;
  padding-top: 4px !important;
}

/* Emphasis */
.ch em {
  color: rgba(212,168,67,0.95) !important;
  font-style: italic !important;
  font-weight: 500 !important;
}
.ch strong {
  color: var(--text) !important;
  font-weight: 700 !important;
}

/* ── PULL QUOTES ─────────────────────────────────────────── */
.pull {
  background: rgba(212,168,67,0.05) !important;
  border-right: 3px solid var(--gold) !important;
  border-left: none !important;
  padding: 28px 28px 28px 32px !important;
  margin: 36px 0 !important;
  border-radius: 8px !important;
}
.pull p {
  font-family: 'Frank Ruhl Libre', serif !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  font-style: italic !important;
  line-height: 1.5 !important;
  color: rgba(255,255,255,0.92) !important;
  margin: 0 !important;
}

/* ── ASIDE BOXES ─────────────────────────────────────────── */
.ab {
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid var(--gold-border) !important;
  border-radius: 14px !important;
  padding: 22px 26px !important;
  margin: 32px 0 !important;
}
.ab.ab-r {
  background: rgba(180,50,50,0.05) !important;
  border-color: rgba(184,48,48,0.3) !important;
}
.ab.ab-g {
  background: rgba(50,180,100,0.05) !important;
  border-color: rgba(74,222,128,0.3) !important;
}
.ab.ab-w {
  background: rgba(212,168,67,0.06) !important;
  border-color: rgba(212,168,67,0.3) !important;
}
.ab .tg {
  font-family: 'Space Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
}
.ab.ab-r .tg { color: #e06060 !important; }
.ab.ab-g .tg { color: #6ad896 !important; }
.ab p {
  font-size: 16px !important;
  line-height: 1.85 !important;
  margin: 0 !important;
  color: var(--body) !important;
}

/* ── NUMBER GRID ─────────────────────────────────────────── */
.ng {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 12px !important;
  margin: 32px 0 !important;
}
.ni {
  background: var(--ink2) !important;
  border: 1px solid var(--gold-border) !important;
  border-radius: 14px !important;
  padding: 22px 16px !important;
  text-align: center;
}
.nv {
  font-family: 'Frank Ruhl Libre', serif !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  color: var(--text) !important;
  line-height: 1 !important;
  margin-bottom: 4px;
}
.nu {
  font-family: 'Space Mono', monospace !important;
  font-size: 10px !important;
  text-transform: uppercase;
  letter-spacing: 0.15em !important;
  color: var(--gold) !important;
  margin-top: 6px !important;
  font-weight: 700;
}
.nl {
  font-size: 11px !important;
  color: var(--muted) !important;
  margin-top: 6px !important;
}

/* ── PROGRESS BAR CHART (country market share) ─────────── */
.pb-chart {
  background: var(--ink2) !important;
  border: 1px solid var(--gold-border) !important;
  border-radius: 14px !important;
  padding: 28px 24px !important;
  margin: 36px 0 !important;
}
.pb-row {
  display: flex !important;
  align-items: center;
  gap: 14px !important;
  margin-bottom: 14px !important;
}
.pb-meta {
  display: flex !important;
  align-items: center;
  gap: 10px !important;
  min-width: 180px !important;
  justify-content: flex-end !important;
}
.pb-flag { font-size: 18px !important; }
.pb-name {
  font-family: 'Space Mono', monospace !important;
  font-size: 12px !important;
  color: rgba(255,255,255,0.75) !important;
}
.pb-track {
  flex: 1 !important;
  background: rgba(0,0,0,0.4) !important;
  height: 12px !important;
  border-radius: 6px;
  overflow: hidden !important;
}
.pb-fill {
  height: 100% !important;
  border-radius: 6px;
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.pb-pct {
  font-family: 'Frank Ruhl Libre', serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  min-width: 44px !important;
  text-align: left !important;
}
.pb-note {
  text-align: center !important;
  font-family: 'Space Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase;
  color: var(--muted) !important;
  margin-top: 14px !important;
}

/* ── TABLES ──────────────────────────────────────────────── */
.gt {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 32px 0 !important;
  font-size: 14px;
}
.gt th {
  background: var(--ink2) !important;
  color: var(--gold) !important;
  padding: 14px 16px !important;
  text-align: right !important;
  font-family: 'Space Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--gold-border) !important;
  font-weight: 700 !important;
}
.gt td {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--body) !important;
}
.gt tr:nth-child(even) td {
  background: rgba(255,255,255,0.02) !important;
}

/* ── PROCESS STEPS ───────────────────────────────────────── */
.proc-steps {
  margin: 32px 0 !important;
}
.proc-step {
  display: flex !important;
  gap: 18px !important;
  align-items: flex-start !important;
  margin-bottom: 22px !important;
}
.proc-step-num {
  min-width: 40px !important;
  width: 40px !important;
  height: 40px !important;
  background: rgba(212,168,67,0.15) !important;
  border: 1px solid rgba(212,168,67,0.45) !important;
  color: var(--gold) !important;
  font-family: 'Space Mono', monospace !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
.proc-step-title {
  font-family: 'Frank Ruhl Libre', serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin-bottom: 6px !important;
}
.proc-step-body {
  font-size: 15px !important;
  color: var(--body) !important;
  line-height: 1.75 !important;
}

/* ── INLINE MEDIA SLOTS ─────────────────────────────────── */
.media-slot-inline {
  width: 100% !important;
  aspect-ratio: 16/9 !important;
  overflow: hidden !important;
  margin: 40px 0 !important;
  border: 1px solid var(--gold-border) !important;
  border-radius: 16px !important;
  background: var(--ink2);
}
.media-slot-inline img,
.media-slot-inline video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

/* Image placeholder (hide if no actual image) */
.img-ph {
  background: var(--ink2) !important;
  border: 1px dashed var(--gold-border) !important;
  border-radius: 14px !important;
  padding: 36px !important;
  margin: 32px 0 !important;
  text-align: center !important;
}
.img-ph-title {
  font-family: 'Space Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  margin-bottom: 6px !important;
}
.img-ph-desc {
  font-size: 13px !important;
  color: var(--muted) !important;
}

/* ── BACK-TO-TOP / HOME BUTTONS ────────────────────────── */
.back-to-top,
#btt,
.home-btn {
  position: fixed !important;
  bottom: 28px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: var(--gold) !important;
  color: #000 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 18px !important;
  border: none !important;
  z-index: 100 !important;
  text-decoration: none !important;
  font-family: 'Space Mono', monospace !important;
  transition: all 0.3s;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}
.back-to-top { left: 28px !important; right: auto !important; }
.back-to-top:hover, #btt:hover {
  background: var(--gold-bright) !important;
  transform: translateY(-2px);
}

.home-btn {
  width: auto !important;
  height: auto !important;
  right: 28px !important;
  left: auto !important;
  padding: 10px 18px !important;
  gap: 8px;
  background: rgba(10,10,11,0.85) !important;
  border: 1px solid rgba(212,168,67,0.3) !important;
  color: var(--gold) !important;
  font-size: 10px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase;
  border-radius: 999px !important;
}
.home-btn:hover {
  background: rgba(212,168,67,0.12) !important;
  border-color: var(--gold) !important;
}
.home-btn svg { width: 14px !important; height: 14px !important; }

/* ── FOOTER ──────────────────────────────────────────────── */
.inner-ft,
.ft,
footer {
  background: #000 !important;
  border-top: 1px solid var(--gold-border) !important;
  padding: 40px 28px !important;
  text-align: center !important;
  color: var(--muted) !important;
}
.inner-ft-logo,
footer .f-logo {
  font-family: 'Space Mono', monospace !important;
  font-size: 13px !important;
  letter-spacing: 0.2em !important;
  color: var(--gold) !important;
  text-decoration: none;
  margin-bottom: 12px !important;
  display: inline-block;
}
.inner-ft-copy {
  font-family: 'Space Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.25) !important;
  margin-top: 12px !important;
}
.inner-ft-links {
  display: flex !important;
  gap: 20px !important;
  justify-content: center !important;
  margin: 10px 0;
}
.inner-ft-links a {
  font-family: 'Space Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.15em !important;
  color: var(--muted) !important;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: color 0.2s;
}
.inner-ft-links a:hover { color: var(--gold) !important; }

/* ── WHATSAPP CTA BOX ───────────────────────────────────── */
.wa-cta-block {
  background: rgba(37,211,102,0.04) !important;
  border-top: 1px solid rgba(37,211,102,0.2) !important;
  border-bottom: 1px solid rgba(37,211,102,0.2) !important;
  padding: 48px 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px !important;
  flex-wrap: wrap !important;
  margin: 48px 0 !important;
  border-radius: 16px;
}
.wa-cta-text h3 {
  font-family: 'Frank Ruhl Libre', serif !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  color: var(--text) !important;
  margin-bottom: 8px !important;
}
.wa-cta-text p {
  color: var(--body) !important;
  font-size: 0.95rem !important;
}
.wa-cta-btn {
  background: #25D366 !important;
  color: #000 !important;
  font-family: 'Space Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 16px 28px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  transition: opacity 0.2s;
}
.wa-cta-btn:hover { opacity: 0.88; }

/* ── REVEAL ON SCROLL (progressive enhancement) ────────── */
.ch, .pull, .ab, .ng, .pb-chart, .gt {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.ch.revealed, .pull.revealed, .ab.revealed,
.ng.revealed, .pb-chart.revealed, .gt.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* If JS disabled, show everything */
.no-js .ch, .no-js .pull, .no-js .ab,
.no-js .ng, .no-js .pb-chart, .no-js .gt {
  opacity: 1;
  transform: none;
}

/* ── HIDE OLD MAIN NAV (if still present anywhere) ────── */
nav#mainNav { display: none !important; }
.mobile-menu { display: none !important; }
nav.side-nav { display: none !important; }
.hamburger { display: none !important; }

/* ── RESPONSIVE FINE-TUNING ─────────────────────────────── */
@media (max-width: 700px) {
  .hero h1 { font-size: clamp(64px, 16vw, 100px) !important; }
  .ch h2 { font-size: clamp(26px, 6vw, 40px) !important; }
  .pb-meta { min-width: 120px !important; }
  .pb-name { font-size: 11px !important; }
  .ng { grid-template-columns: repeat(2, 1fr) !important; }
  .wa-cta-block { padding: 28px 20px !important; }
}