/* ═══════════════════════════════════════════════════════════════
   Visual Library — site-wide theme
   Loaded LAST on every page, so it overrides each page's inline <style>.
   Put new design decisions here instead of in per-page styles.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Radius scale — use only these */
  --r-xs:6px;
  --r-sm:10px;
  --r:16px;
  --r-lg:20px;
  --r-pill:999px;

  /* Surfaces & lines */
  --bg:#000;
  --surface-1:rgba(255,255,255,0.04);
  --surface-2:rgba(255,255,255,0.07);
  --surface-3:rgba(255,255,255,0.12);
  --line:rgba(255,255,255,0.10);
  --line-strong:rgba(255,255,255,0.18);

  /* Text */
  --text:#fff;
  --text-2:rgba(255,255,255,0.68);
  --text-3:rgba(255,255,255,0.46);
  --text-4:rgba(255,255,255,0.32);

  /* Accent */
  --gold:#f0cd6e;
  --gold-hover:#f5d98a;
  --gold-dim:rgba(240,205,110,0.14);
  --gold-border:rgba(240,205,110,0.38);
  --on-gold:#1a1a1a;

  /* Layout */
  --gutter:clamp(20px,5.5vw,80px);
  --content:1240px;

  /* Type */
  --font:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --tracking-tight:-0.025em;
  --tracking-eyebrow:0.18em;
}

html,body{font-family:var(--font);}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

/* ── Typography: one heading style everywhere ─────────────────── */
h1,h2,h3,
.product-hero-title,.hero-title,.info-title,.page-title,.section-title,
.nl-title,.modal-title,.cart-title{
  font-family:var(--font)!important;
  font-weight:500!important;
  letter-spacing:var(--tracking-tight)!important;
  line-height:1.1;
  color:var(--text);
  font-style:normal;
}
.hero-title{font-weight:600!important;letter-spacing:-0.035em!important;}

.section-eyebrow,.page-eyebrow,.info-eyebrow,.specs-title,.nl-eyebrow,.footer-col-title,.form-label{
  font-size:11px!important;
  letter-spacing:var(--tracking-eyebrow)!important;
  text-transform:uppercase;
  color:var(--text-3)!important;
  font-weight:500;
}
.section-eyebrow{text-align:center;margin-bottom:14px;}
.section-title{font-size:clamp(28px,3vw,40px);text-align:center;margin-bottom:44px;}

/* Body copy: a touch more contrast */
.info-desc,.page-sub,.product-card-desc,.vsl-review-text,.modal-sub,.nl-sub{color:var(--text-2)!important;}
.feature-list li{color:var(--text-2)!important;}
.feature-list li::before{
  content:''!important;width:14px;height:14px;flex-shrink:0;background:var(--gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── Buttons: three types ─────────────────────────────────────
   .btn-primary  gold, the one main action (buy / download)
   .btn-solid    white, account actions (sign up, sign in)
   .btn-ghost    outline, everything secondary                 */
.btn,a.btn{text-decoration:none!important;border-radius:var(--r-pill)!important;font-family:var(--font);font-weight:500;justify-content:center;white-space:nowrap;}
.btn-primary,.btn-gold,.btn-blue,.pcard-buy-btn{
  background:var(--gold)!important;border:1px solid var(--gold)!important;color:var(--on-gold)!important;font-weight:600!important;
  backdrop-filter:none!important;box-shadow:none;
}
.btn-primary:hover,.btn-gold:hover,.btn-blue:hover,.pcard-buy-btn:hover{
  background:var(--gold-hover)!important;border-color:var(--gold-hover)!important;color:var(--on-gold)!important;transform:translateY(-1px);
}
.btn-ghost,.pcard-free-btn{background:transparent!important;border:1px solid var(--line-strong)!important;color:var(--text)!important;}
.btn-ghost:hover,.pcard-free-btn:hover{background:var(--surface-2)!important;border-color:rgba(255,255,255,0.3)!important;}
.btn-lg{padding:13px 28px!important;font-size:14px!important;}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.btn svg{flex-shrink:0;}

/* ── Nav: aligned to the page gutter, no magic margins ───────── */
nav{padding:0 var(--gutter)!important;z-index:600!important;background:rgba(0,0,0,0.92)!important;border-bottom-color:rgba(255,255,255,0.06)!important;}
.nav-logo-img{margin-left:0!important;}
.nav-actions{margin-right:0!important;}
.nav-links{position:absolute;left:50%;transform:translateX(-50%);}
.nav-chevron{display:inline-flex!important;align-items:center;font-size:0!important;opacity:.6;}
.nav-dropdown a svg{opacity:.6;flex-shrink:0;}
.cart-btn{color:var(--text-2)!important;}
.cart-btn:hover{color:var(--text)!important;}
.cart-btn svg{display:block;}

/* Close / remove buttons use SVG icons now */
.modal-close,.cart-close,.cart-remove{line-height:0;}
.modal-close svg,.cart-close svg,.cart-remove svg{display:block;}

/* Mobile menu (built by js/vsl-ui.js) */
.nav-burger{display:none;width:38px;height:38px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:transparent;color:var(--text);align-items:center;justify-content:center;cursor:pointer;margin-left:8px;flex-shrink:0;}
.nav-burger:hover{background:var(--surface-2);}
.mobile-menu{display:none;}
@media(max-width:768px){
  .nav-links{position:static;transform:none;}
  .nav-burger{display:inline-flex;}
  .mobile-menu{
    display:flex;flex-direction:column;position:fixed;left:0;right:0;top:var(--nav-h,56px);bottom:0;z-index:599;
    padding:16px var(--gutter) 40px;background:rgba(10,10,10,0.98);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s;overflow-y:auto;
  }
  body.menu-open .mobile-menu{opacity:1;visibility:visible;transform:none;}
  body.menu-open{overflow:hidden;}
  .mobile-menu-link{display:flex;align-items:center;gap:12px;padding:16px 4px;font-size:18px;color:var(--text)!important;text-decoration:none;border-bottom:1px solid var(--line);}
  .mobile-menu-link svg{opacity:.6;}
}

/* ── Home hero (inset card + floating collage) ─────────────────── */
.vl-hero{padding:82px 12px 0;}
.vl-hero-card{
  position:relative;overflow:hidden;isolation:isolate;
  height:clamp(560px,calc(100vh - 94px),900px);
  height:clamp(560px,calc(100svh - 94px),900px);
  border-radius:28px;background:#050505;border:1px solid var(--line);
}

/* Collage */
.vl-collage{position:absolute;inset:0;z-index:0;--mx:0;--my:0;}
.vl-tile{
  position:absolute;left:var(--x);top:var(--y);width:var(--w);
  transform:translate(calc(var(--mx) * var(--d) * -28px),calc(var(--my) * var(--d) * -20px)) rotate(var(--r));
  transition:transform .6s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.vl-tile > *{display:block;width:100%;animation:vl-float 9s ease-in-out infinite;animation-delay:var(--t);}
.vl-tile-video > video{aspect-ratio:16/9;object-fit:cover;border-radius:12px;background:#111;box-shadow:0 18px 50px rgba(0,0,0,0.6),0 0 0 1px rgba(255,255,255,0.08);}
.vl-tile-box > img{height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,0.65));}
@keyframes vl-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Shade keeps the copy and price card readable over the collage */
.vl-hero-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(ellipse 55% 60% at 18% 88%,rgba(5,5,5,0.97) 0%,rgba(5,5,5,0.85) 40%,rgba(5,5,5,0) 100%),
  radial-gradient(ellipse 40% 40% at 88% 90%,rgba(5,5,5,0.8) 0%,rgba(5,5,5,0) 100%),
  linear-gradient(180deg,rgba(5,5,5,0) 55%,rgba(5,5,5,0.6) 100%);}

/* Announcement pill */
.vl-pill{
  position:absolute;z-index:3;top:28px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:14px;padding:7px 8px 7px 22px;border-radius:var(--r-pill);
  background:rgba(236,236,236,0.86);color:#141414;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 10px 40px rgba(0,0,0,0.35);white-space:nowrap;font-size:14px;font-weight:500;
}
.vl-pill[hidden]{display:none;}
.vl-pill-text{display:inline-flex;align-items:center;gap:9px;}
.vl-pill-dot{width:7px;height:7px;border-radius:50%;background:#d9a92e;box-shadow:0 0 0 3px rgba(217,169,46,0.25);}
.vl-pill-btn{padding:8px 16px;border-radius:var(--r-pill);background:#111;color:#fff;font-size:13px;font-weight:600;text-decoration:none;transition:background .2s;}
.vl-pill-btn:hover{background:#2a2a2a;}
.vl-pill-close{width:30px;height:30px;border-radius:50%;border:none;background:transparent;color:#333;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.vl-pill-close:hover{background:rgba(0,0,0,0.08);}

/* Copy */
.vl-hero-copy{
  position:absolute;z-index:2;left:clamp(24px,8vw,150px);bottom:clamp(36px,7vh,72px);
  /* stop before the price card so the two never overlap */
  right:calc(clamp(20px,5vw,110px) + 290px);max-width:720px;display:grid;
}
.vl-slide{grid-area:1/1;align-self:end;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1),visibility .6s;}
.vl-slide.is-active{opacity:1;visibility:visible;transform:none;}
.vl-kicker{font-size:clamp(17px,1.5vw,22px);font-weight:600;color:var(--text);margin-bottom:10px;letter-spacing:-0.01em;}
.vl-title{font-size:clamp(40px,min(4.8vw,8.5vh),80px)!important;font-weight:700!important;letter-spacing:-0.04em!important;line-height:1!important;margin-bottom:22px;text-shadow:0 2px 30px rgba(0,0,0,0.5);}
.vl-desc{font-size:clamp(15px,1.15vw,17px);line-height:1.55;color:rgba(255,255,255,0.86);max-width:520px;margin-bottom:28px;}
.vl-ctas{display:flex;gap:12px;flex-wrap:wrap;}

/* Dots */
.vl-dots{grid-area:2/1;display:flex;gap:10px;align-items:center;margin-top:40px;}
.vl-dot{border:none;background:transparent;padding:6px 0;cursor:pointer;}
.vl-dot span{display:block;width:8px;height:8px;border-radius:var(--r-pill);background:rgba(255,255,255,0.35);overflow:hidden;position:relative;transition:width .35s cubic-bezier(.22,1,.36,1),background .2s;}
.vl-dot:hover span{background:rgba(255,255,255,0.6);}
.vl-dot.is-active span{width:36px;background:rgba(255,255,255,0.28);}
.vl-dot.is-active span::after{content:'';position:absolute;inset:0;background:#fff;border-radius:inherit;transform-origin:left;transform:scaleX(1);}
.is-playing .vl-dot.is-active span::after{animation:vl-dot-progress var(--dot-duration,7000ms) linear forwards;}
@keyframes vl-dot-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Price card */
.vl-price-card{
  position:absolute;z-index:2;right:clamp(20px,5vw,110px);bottom:clamp(28px,6vh,56px);width:250px;
  padding:26px 24px 24px;border-radius:24px;text-align:center;
  background:rgba(30,30,32,0.82);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid var(--line);box-shadow:0 30px 70px rgba(0,0,0,0.55);
}
.vl-price-from{font-size:17px;font-weight:600;color:var(--text);}
.vl-price{font-size:48px;font-weight:700;letter-spacing:-0.04em;line-height:1.1;margin:4px 0 10px;color:var(--text);}
.vl-price-note{font-size:13px;line-height:1.5;color:var(--text-2);margin-bottom:18px;}
.vl-price-card .btn{width:100%;}

/* Tablet */
@media(max-width:1100px){
  .vl-price-card{width:220px;padding:22px 20px 20px;}
  .vl-price{font-size:40px;}
  .vl-hero-copy{right:calc(clamp(20px,5vw,110px) + 250px);}
}

/* Short laptop screens: keep everything above the fold */
@media(max-height:760px) and (min-width:769px){
  .vl-kicker{margin-bottom:6px;}
  .vl-title{margin-bottom:16px;}
  .vl-desc{margin-bottom:20px;}
  .vl-dots{margin-top:24px;}
  .vl-price-card{padding:20px 20px 18px;}
  .vl-price{font-size:38px;margin:2px 0 12px;}
  .vl-price-note{display:none;}
}

/* Phone: collage on top, copy and price card stacked below */
@media(max-width:768px){
  .vl-hero{padding:64px 8px 0;}
  .vl-hero-card{height:auto;border-radius:22px;display:flex;flex-direction:column;}
  .vl-collage{position:relative;inset:auto;height:300px;flex-shrink:0;}
  .vl-hide-sm{display:none;}
  .vl-tile-video{--w:44%!important;}
  .vl-tile-box{--w:27%!important;}
  .vl-tile:nth-child(1){--x:4%!important;--y:24%!important;}
  .vl-tile:nth-child(2){--x:52%!important;--y:4%!important;}
  .vl-tile:nth-child(3){--x:50%!important;--y:50%!important;}
  .vl-tile:nth-child(4){--x:80%!important;--y:22%!important;}
  .vl-tile:nth-child(7){--x:-6%!important;--y:66%!important;}
  .vl-hero-shade{background:linear-gradient(180deg,rgba(5,5,5,0) 0%,rgba(5,5,5,0) 150px,rgba(5,5,5,0.9) 290px,#050505 330px);}
  .vl-pill{top:14px;padding:5px 5px 5px 14px;gap:8px;font-size:12px;}
  .vl-pill-btn{padding:6px 12px;font-size:12px;}
  .vl-hero-copy{position:relative;left:auto;right:auto;bottom:auto;width:auto;max-width:none;padding:4px 22px 0;margin-top:-20px;}
  .vl-title{font-size:clamp(38px,11vw,52px)!important;margin-bottom:14px;}
  .vl-kicker{font-size:15px;margin-bottom:8px;}
  .vl-desc{font-size:15px;margin-bottom:22px;}
  .vl-ctas .btn{flex:1 1 auto;}
  .vl-dots{margin-top:26px;}
  .vl-price-card{position:relative;right:auto;bottom:auto;width:auto;margin:28px 14px 14px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:16px;text-align:left;align-items:center;padding:18px 18px;}
  .vl-price-from{grid-column:1;grid-row:1;font-size:13px;color:var(--text-3);font-weight:500;}
  .vl-price{grid-column:1;grid-row:2;font-size:32px;margin:0;}
  .vl-price-note{grid-column:2;grid-row:1/3;margin:0;font-size:12px;}
  .vl-price-card .btn{grid-column:1/-1;margin-top:14px;}
}

@media(prefers-reduced-motion:reduce){
  .vl-tile > *,.is-playing .vl-dot.is-active span::after{animation:none!important;}
  .vl-slide,.vl-tile{transition:none!important;}
}

/* ── Product cards ───────────────────────────────────────────── */
.pcard{border-radius:var(--r-lg)!important;}
.pcard-tags{display:flex;align-items:center;gap:6px;margin:4px 0 12px;flex-wrap:wrap;}
.pcard-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-pill);font-size:11px;line-height:1.4;color:var(--text-3);background:var(--surface-1);border:1px solid var(--line);}
.pcard-tag img{border-radius:3px;}
.pcard-tag-free{color:#9fe0a8;background:rgba(80,200,110,0.08);border-color:rgba(80,200,110,0.25);}
.pcard-tag-pro{color:var(--gold);background:var(--gold-dim);border-color:var(--gold-border);}
.product-card-name{font-weight:500!important;font-size:18px!important;letter-spacing:-0.01em;}
.product-card-desc{font-size:13px!important;line-height:1.6!important;-webkit-line-clamp:2;}
.pcard-price{display:flex;flex-direction:column;gap:2px;font-size:20px!important;font-weight:400!important;}
.pcard-price-note{font-size:12px;color:var(--text-3);text-decoration:none;font-weight:400;}
a.pcard-price-note:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px;}
@media(max-width:768px){.product-card-desc{display:-webkit-box!important;}}

/* ── Reviews ─────────────────────────────────────────────────── */
.vsl-review-card{border-radius:var(--r)!important;}
.vsl-review-name{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--text-2)!important;}
.vsl-review-verified{display:inline-flex;align-items:center;gap:4px;}
.vsl-review-verified svg{color:#7fd48f;}
.vsl-review-product{color:var(--text-4)!important;}

/* ── YouTube section (shared markup on home + product pages) ── */
.yt-section{padding:120px var(--gutter);border-top:1px solid var(--line);}
.yt-flex{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:56px;}
.yt-flex>*{flex:1;min-width:0;}
.yt-flex>#yt-videos{flex:1.15;}
.yt-section .section-eyebrow{text-align:left;}
.yt-section h2{font-size:clamp(30px,3.4vw,42px);margin-bottom:28px;}
.yt-card{display:block;border-radius:var(--r-lg)!important;overflow:hidden;background:var(--surface-1);border:1px solid var(--line);text-decoration:none;color:inherit;transition:transform .25s ease,border-color .25s ease;}
.yt-card:hover{transform:translateY(-4px);border-color:var(--line-strong);}
.yt-loading{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--text-4);}
.yt-fallback-art{position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#1c1c1c 0%,#050505 75%);}
.yt-fallback-logo{height:18px;width:auto;opacity:.9;position:absolute;left:22px;top:20px;}
.yt-play{width:64px;height:64px;border-radius:50%;background:rgba(255,68,68,0.92);display:flex;align-items:center;justify-content:center;box-shadow:0 0 40px rgba(255,68,68,0.3);padding-left:3px;}
.yt-caption{padding:16px 18px 18px;}
.yt-title{font-size:15px;color:var(--text);line-height:1.4;margin-bottom:5px;}
.yt-meta{font-size:12px;color:var(--text-4);}
@media(max-width:860px){.yt-flex{flex-direction:column;align-items:stretch;gap:32px;}.yt-flex>*{width:100%;}}
@media(max-width:768px){.yt-section{padding:64px var(--gutter);}}

/* ── Footer ──────────────────────────────────────────────────── */
footer{padding-left:var(--gutter)!important;padding-right:var(--gutter)!important;}
.footer-brand{display:inline-block;margin-bottom:12px;}
.footer-logo{height:16px;width:auto;display:block;}
.footer-tagline{color:var(--text-3)!important;font-size:13px;line-height:1.6;max-width:240px;}
.footer-col a{color:var(--text-3)!important;}
.footer-col a:hover{color:var(--text)!important;}
.footer-copy{color:var(--text-4)!important;}

/* ── Consistent radii on shared surfaces ─────────────────────── */
.modal,.nl-inner,.lib-card,.tier-card{border-radius:var(--r-lg)!important;}
.form-input,.nav-dropdown{border-radius:var(--r-sm)!important;}
.nav-dropdown a,.nav-links > li > a,.nav-links > li > button{border-radius:var(--r-xs)!important;}
.app-tag,.product-badge,.pcard-badge{border-radius:var(--r-pill)!important;}
.showcase-panel video{border-radius:var(--r-sm)!important;}

/* ── Section wrappers on the home page ───────────────────────── */
.home-section{padding:96px var(--gutter);border-top:1px solid var(--line);}
.home-section-inner{max-width:var(--content);margin:0 auto;}
@media(max-width:768px){.home-section{padding:56px var(--gutter);}}

/* ── Legal pages: let wide tables scroll inside themselves on phones ── */
@media(max-width:768px){.cookie-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}}

/* ── Mobile refinements ─────────────────────────────────────── */
@media(max-width:768px){
  /* Account buttons live in the menu on phones; nav keeps logo, cart, menu */
  body.has-mobile-account #account-menu-content{display:none!important;}
  nav .nav-actions{margin-left:auto!important;}
  .mobile-menu-account{display:flex;flex-direction:column;gap:10px;margin-top:24px;}
  .mobile-menu-account .btn{width:100%;padding:13px 20px!important;font-size:14px!important;}
  .mobile-menu-account span{font-size:13px!important;color:var(--text-3)!important;max-width:none!important;padding:0 4px 4px;}


  /* Review carousel: readable cards instead of half-width slivers */
  .vsl-reviews-track{padding-left:4px!important;padding-right:4px!important;}
  .vsl-reviews-track .vsl-review-card{flex:0 0 82%!important;scroll-snap-align:center!important;padding:18px 20px!important;}
}

/* ═══ Nav v2: Effects mega menu, active state, scroll behaviour ═══ */
nav{transition:transform .35s cubic-bezier(.22,1,.36,1),background-color .25s,border-color .25s,height .25s;}
nav.nav-hidden{transform:translateY(-100%);}
nav.nav-scrolled{background:rgba(8,8,8,0.82)!important;backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);border-bottom-color:rgba(255,255,255,0.08)!important;}
.nav-links{gap:2px!important;}
.nav-links > li > a,.nav-trigger{
  display:inline-flex!important;align-items:center;gap:6px;padding:8px 14px!important;border-radius:var(--r-pill)!important;
  font-family:var(--font);font-size:14px!important;font-weight:500;color:var(--text-2)!important;background:none;border:none;cursor:pointer;
  text-decoration:none;transition:color .2s,background .2s;
}
.nav-links > li > a:hover,.nav-trigger:hover,.nav-has-menu:hover > .nav-trigger,.nav-has-menu.is-open > .nav-trigger{color:var(--text)!important;background:var(--surface-2)!important;}
.nav-links a[aria-current="page"],.nav-has-menu.is-current > .nav-trigger{color:var(--text)!important;}
.nav-has-menu:hover .nav-chevron,.nav-has-menu.is-open .nav-chevron{transform:rotate(180deg);}
.nav-has-menu.is-open .nav-dropdown,.nav-has-menu:focus-within .nav-dropdown{display:block;}
.nav-dropdown{padding:8px!important;background:rgba(14,14,16,0.97)!important;border:1px solid var(--line)!important;box-shadow:0 24px 60px rgba(0,0,0,0.6)!important;animation:vl-drop .18s ease;}
@keyframes vl-drop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.nav-dropdown a{border-radius:var(--r-sm)!important;}
.nav-mega{left:50%!important;transform:translateX(-50%);width:560px;}
@keyframes vl-drop-c{from{opacity:0;transform:translate(-50%,-4px)}to{opacity:1;transform:translateX(-50%)}}
.nav-mega{animation-name:vl-drop-c;}
.nav-mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;}
.nav-mega-item{display:flex!important;align-items:center;gap:12px!important;padding:10px 12px!important;white-space:normal!important;}
.nav-mega-item img{width:36px;height:auto;flex-shrink:0;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.5));transition:transform .2s;}
.nav-mega-item:hover img{transform:scale(1.08) rotate(-3deg);}
.nav-mega-item span{display:flex;flex-direction:column;gap:1px;}
.nav-mega-item strong{font-size:14px;font-weight:500;color:var(--text);}
.nav-mega-item small{font-size:12px;color:var(--text-3);}
.nav-mega-all{display:flex!important;justify-content:center;margin-top:6px;padding:11px!important;border-top:1px solid var(--line);border-radius:0 0 var(--r-sm) var(--r-sm)!important;font-size:13px!important;color:var(--gold)!important;}
.nav-mega-all:hover{background:var(--gold-dim)!important;}

/* anchors land below the fixed nav */
#free-effects,#reviews,#about{scroll-margin-top:84px;}

/* Mobile menu groups */
@media(max-width:768px){
  .mobile-menu-label{font-size:11px;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-4);padding:22px 4px 6px;}
  .mobile-menu-effect{font-size:16px!important;padding:10px 4px!important;gap:14px!important;border-bottom:none!important;}
  .mobile-menu-effect img{width:30px;height:auto;}
  .mobile-menu-effect span{display:flex;flex-direction:column;}
  .mobile-menu-effect small{font-size:12px;color:var(--text-3);}
  .mobile-menu-sub{font-size:16px!important;padding:12px 4px!important;border-bottom:none!important;}
  .mobile-menu-sub svg{opacity:.6;}
  .mobile-menu .nav-mega-all{justify-content:flex-start;border-top:none;color:var(--gold)!important;font-size:15px!important;padding:12px 4px!important;}
  nav.nav-hidden{transform:none;}
  body.menu-open nav{transform:none!important;}
}

/* ═══ Scroll reveal (driven by js/vsl-ui.js; off for reduced motion) ═══ */
html.vl-reveal .vl-r{
  opacity:0;transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--rd,0ms);
}
html.vl-reveal .vl-r.is-in{opacity:1;transform:none;}
@media(max-width:768px){.mobile-menu-effect strong{font-weight:500;}}

/* ── Black design placeholders on product pages (2026-10-04) ── */
.vsl-placeholder{display:block;width:100%;aspect-ratio:16/9;max-height:100%;background:#000;border:1px solid rgba(255,255,255,0.08);border-radius:var(--r-sm);margin:0 auto;}

/* ── Product card hover: pop-out 16:9 video (2026-10-04) ── */
.vsl-hover-pop{position:fixed;z-index:900;pointer-events:none;background:#000;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,0.14);box-shadow:0 30px 80px rgba(0,0,0,0.75),0 0 0 1px rgba(0,0,0,0.4);opacity:0;transform:scale(.82);transition:opacity .22s ease,transform .32s cubic-bezier(.22,1.25,.36,1);}
.vsl-hover-pop.is-open{opacity:1;transform:scale(1);}
.vsl-hover-pop video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;}
.vsl-hover-pop video.is-active{display:block;}

/* ── Hero camera: zoom onto the featured product box (2026-10-04) ── */
.vl-collage{overflow:hidden;}
.vl-cam{position:absolute;inset:0;transform-origin:0 0;transition:transform 1.5s cubic-bezier(.65,0,.25,1);}
.vl-cam .vl-tile{transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .9s ease,filter .9s ease;}
.vl-cam.is-zoomed .vl-tile{will-change:auto;}
.vl-cam.is-zoomed .vl-tile:not(.is-focus){opacity:.22;filter:blur(1.5px);}
.vl-cam .vl-tile.is-focus{--r:0deg!important;--d:0!important;z-index:2;}
.vl-cam .vl-tile.is-focus > img{animation-duration:6s;filter:drop-shadow(0 6px 14px rgba(0,0,0,0.6));}
@media(prefers-reduced-motion:reduce){.vl-cam,.vl-cam .vl-tile{transition:none!important;}}