/* ==========================================================================
   Amino World — global design tokens & shared styles
   Light / clean / clinical-trust aesthetic (blue-on-white).
   Load order: Bootstrap CSS -> this file -> page-specific CSS (if any)
   ========================================================================== */
:root{
  --bg:#f6f8fc;
  --surface:#ffffff;
  --lavender:#eef2fb;       /* light fill for icon circles, hover states, badges */
  --ink:#111827;             /* primary text — dark navy, not pure black */
  --violet:#2454e8;          /* primary brand blue */
  --indigo:#1638b0;
  --grad: linear-gradient(120deg, var(--violet), var(--indigo));
  --chrome: linear-gradient(120deg, #2454e8, #1638b0);  /* kept name for compatibility — now just the brand blue gradient, not a metallic chrome effect */
  --line: rgba(16,24,40,.12);
  --paper:#f6f8fc;
  --berry:#a8286b;
  --citrus:#e6a714;
  --muted:#5b6472;
  --shadow: 0 20px 45px -20px rgba(36,84,232,.28);
  --ease: cubic-bezier(.22,.88,.35,1);
}
*{box-sizing:border-box;}
body{
  font-family:'Inter', sans-serif;
  color:var(--ink);
  background:var(--bg);
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:'Unbounded', sans-serif; line-height:1.05; }

.eyebrow{
  font-family:'Rajdhani', sans-serif;
  font-size:13.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--violet);
}
.chrome-text{
  background:var(--chrome);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  display:inline-block;
}

.btn-vp{
  display:inline-flex; align-items:center; gap:8px;
  padding:16px 30px; border-radius:100px; font-weight:700; font-size:15px;
  border:none; cursor:pointer; transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn-vp-primary{ background:var(--grad); color:#fff; box-shadow:var(--shadow);}
.btn-vp-primary:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 26px 50px -16px rgba(36,84,232,.4); color:#fff;}
.btn-vp-ghost{ background:#fff; color:var(--ink); border:1.5px solid var(--line);}
.btn-vp-ghost:hover{ border-color:var(--violet); color:var(--violet);}

[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in{ opacity:1; transform:translateY(0); }
[data-reveal="scale"]{ transform:translateY(20px) scale(.94); }
[data-reveal="scale"].in{ transform:translateY(0) scale(1); }
[data-reveal="left"]{ transform:translateX(-40px); }
[data-reveal="left"].in{ transform:translateX(0); }
[data-reveal="right"]{ transform:translateX(40px); }
[data-reveal="right"].in{ transform:translateX(0); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* ---------------- utility ticker ---------------- */
.ticker{
  background:var(--ink); color:#fff; overflow:hidden; white-space:nowrap;
  padding:9px 0; font-family:'Rajdhani', sans-serif; font-size:12.5px; font-weight:700; letter-spacing:.08em;
}
.ticker-track{ display:inline-flex; animation: vpScrollLeft 26s linear infinite; }
.ticker-track span{ padding:0 34px; display:inline-flex; align-items:center; gap:8px; opacity:.92;}
.ticker-track span svg{ color:#6f9bff; flex-shrink:0;}
@keyframes vpScrollLeft{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------------- header / nav ---------------- */
header.site-header{
  position:sticky; top:0; z-index:50; background:rgba(246,248,252,.88);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
  transition: box-shadow .3s;
}
header.site-header.scrolled{ box-shadow:0 8px 26px -18px rgba(16,24,40,.25); }
.vp-logo{ display:flex; align-items:center; gap:10px; font-family:'Unbounded', sans-serif; font-weight:800; font-size:19px; letter-spacing:.02em; color:var(--ink);}
.vp-logo .mark{ height:38px; width:auto; display:block; flex-shrink:0; }
.vp-logo .full-mark{ height:38px; width:auto; display:block; }
.vp-navlinks{ display:flex; gap:28px; font-family:'Rajdhani', sans-serif; font-size:15px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; margin:0; padding:0; list-style:none;}
.vp-navlinks a{ position:relative; padding:4px 0; color:#374151;}
.vp-navlinks a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--grad);
  transition:width .3s var(--ease);
}
.vp-navlinks a:hover::after{width:100%;}
.vp-icon-btn{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--lavender); position:relative; border:none; color:var(--ink);}
.vp-cart-count{
  position:absolute; top:-4px; right:-4px; background:var(--violet); color:#fff;
  font-size:10px; width:17px; height:17px; border-radius:50%; display:grid; place-items:center; font-weight:700;
}
@media(max-width:860px){ .vp-navlinks{display:none;} }

/* search bar (always visible, row 1 of the header) */
.vp-search-form{
  display:flex; align-items:center; background:#fff; border:1.5px solid var(--line);
  border-radius:100px; padding:4px 4px 4px 18px; max-width:520px; margin:0 auto;
}
.vp-search-form input{
  flex:1; border:none; outline:none; background:transparent; font-size:14px; color:var(--ink);
}
.vp-search-form input::placeholder{ color:var(--muted); }
.vp-search-form button{
  width:38px; height:38px; border-radius:50%; border:none; background:var(--grad); color:#fff;
  display:grid; place-items:center; flex-shrink:0; cursor:pointer;
}

/* row 2: nav links row, sits under the logo/search/account row */
.vp-navrow{ border-top:1px solid var(--line); padding:12px 0;}
.vp-navrow .vp-navlinks{ display:flex; gap:30px; justify-content:flex-start;}

.vp-auth-link{ font-size:14px; font-weight:600; color:var(--ink); padding:8px 4px;}
.vp-auth-link:hover{ color:var(--violet);}
.vp-auth-btn{ padding:9px 20px; font-size:13.5px;}

/* ---------------- auth pages (login / register) ---------------- */
.auth-section{ padding:70px 0 100px;}
.auth-card{ max-width:460px; margin:0 auto; background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:44px; box-shadow:var(--shadow);}
.auth-card h1{ font-size:28px; font-weight:800; margin-bottom:6px;}
.auth-card p.sub{ color:var(--muted); font-size:14px; margin-bottom:28px;}
.auth-card label{ font-size:13px; font-weight:700; margin-bottom:6px; display:block;}
.auth-card .form-control{ background:#fff; color:var(--ink); border-radius:12px; border:1.5px solid var(--line); padding:12px 14px; font-size:14.5px;}
.auth-card .form-control:focus{ background:#fff; color:var(--ink); border-color:var(--violet); box-shadow:0 0 0 3px rgba(36,84,232,.14);}
.auth-row{ margin-bottom:18px;}
.auth-alt{ text-align:center; margin-top:22px; font-size:14px; color:var(--muted);}
.auth-alt a{ color:var(--violet); font-weight:700;}
.auth-error{ background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; padding:12px 16px; border-radius:12px; font-size:13.5px; margin-bottom:22px;}
.auth-success{ background:#f0fdf4; border:1px solid #bbf7d0; color:#15803d; padding:12px 16px; border-radius:12px; font-size:13.5px; margin-bottom:22px;}
.auth-hint{ font-size:12px; color:var(--muted); margin-top:-12px; margin-bottom:18px;}

/* ---------------- account page ---------------- */
.account-hero{ padding:60px 0 10px;}
.account-hero h1{ font-size:clamp(26px,3.4vw,34px); font-weight:800;}
.account-hero p{ color:var(--muted); margin-top:6px; font-size:14.5px;}
.account-section{ padding:40px 0 100px;}
.account-card{ background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:28px;}
.account-card h3{ font-family:'Unbounded'; font-size:16px; font-weight:700; margin-bottom:18px;}
.account-field{ display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line); font-size:14px;}
.account-field:last-child{ border-bottom:none;}
.account-field span:first-child{ color:var(--muted);}
.account-field span:last-child{ font-weight:600;}
.order-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 18px; border:1px solid var(--line); border-radius:14px; margin-bottom:12px;
  transition:border-color .3s, box-shadow .3s;
}
.order-row:hover{ border-color:var(--violet); box-shadow:0 10px 24px -18px rgba(36,84,232,.3);}
.order-row .oid{ font-weight:700; font-size:14px;}
.order-row .odate{ font-size:12.5px; color:var(--muted); margin-top:2px;}
.order-total-vp{ font-family:'Unbounded'; font-weight:700; font-size:14.5px;}
.status-pill{
  font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
}
.status-pending{ background:#fff7e6; color:#b7791f;}
.status-processing{ background:#eef2fb; color:#2454e8;}
.status-shipped{ background:#e6f0ff; color:#1c6fd6;}
.status-delivered{ background:#e9fbef; color:#15803d;}
.status-cancelled{ background:#fef2f2; color:#b91c1c;}
.status-default{ background:var(--lavender); color:var(--muted);}
.account-empty{ text-align:center; padding:50px 20px; color:var(--muted); font-size:14px;}
.account-empty a{ color:var(--violet); font-weight:700;}

/* ---------------- hero ---------------- */
.hero{ position:relative; overflow:hidden; padding:64px 0 90px;
  background:radial-gradient(120% 100% at 78% 20%, #101a35 0%, #05070f 55%);
}
.hero .container{ position:relative; z-index:1; }
.hero .eyebrow{ color:#7ea2ff; }
.hero h1{ font-size:clamp(38px,5.2vw,60px); font-weight:800; letter-spacing:-.01em; color:#fff;}
.hero p.lead-vp{ font-size:16.5px; color:#aab4cc; max-width:440px; margin:20px 0 30px; line-height:1.65;}
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap;}
.hero-badges{ display:flex; gap:30px; margin-top:44px; flex-wrap:wrap;}
.hero-badges .badge{ display:flex; align-items:center; gap:10px;}
.hero-badges .badge b{ color:#fff;}
.hero-badges .badge span{ color:#8b96b3;}
.badge-icon{ width:40px; height:40px; border-radius:12px; background:rgba(63,125,255,.14); display:grid; place-items:center; font-size:17px; color:#7ea2ff;}
.badge b{ display:block; font-size:13.5px;}
.badge span{ font-size:12px; color:var(--muted);}

/* orbit / molecule visual */
.orbit{ position:relative; height:520px; display:flex; align-items:center; justify-content:center;}
.orbit-ring{ position:absolute; border-radius:50%; border:1.5px dashed rgba(126,162,255,.28);}
.orbit-ring.r1{ width:430px; height:430px;}
.orbit-ring.r2{ width:330px; height:330px;}

/* floating product cluster — drop 3 real product photos at
   /images/hero-product-1.png, hero-product-2.png, hero-product-3.png
   (update the file extension in index.php if yours are .jpg) */
.hero-vial-tilt{
  position:relative; z-index:5; width:100%; height:100%;
}
.hero-product{
  position:absolute;
  filter:drop-shadow(0 26px 34px rgba(36,84,232,.22));
  animation: floatTilt var(--dur, 5s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}
@keyframes floatTilt{
  0%{ transform:translateY(0) rotate(var(--tilt, 0deg)); }
  100%{ transform:translateY(-20px) rotate(var(--tilt, 0deg)); }
}
.hp-1{
  --tilt:-6deg; --dur:5.5s; --delay:0s;
  width:270px; z-index:3;
  left:50%; top:54%; margin-left:-135px; margin-top:-175px;
}
.hp-2{
  --tilt:-16deg; --dur:6.5s; --delay:.4s;
  width:175px; z-index:1; opacity:.96;
  left:10%; top:20%;
}
.hp-3{
  --tilt:13deg; --dur:4.8s; --delay:.8s;
  width:185px; z-index:2; opacity:.98;
  right:24%; top:40%;
}
.hero-product img{ display:block; width:100%; height:auto; }
@media(max-width:960px){
  .hp-2, .hp-3{ display:none; } /* keep it simple on small screens */
}
@media(max-width:960px){ .orbit{ height:400px;} }

/* ---------------- section shell ---------------- */
.section-vp{ padding:90px 0;}
.section-head{ text-align:center; max-width:600px; margin:0 auto 50px;}
.section-head h2{ font-size:clamp(26px,3.4vw,36px); font-weight:800; margin-top:12px; letter-spacing:-.01em; color:var(--ink);}
.section-head p{ color:var(--muted); margin-top:14px; font-size:15.5px;}
.divider-vp{ height:3px; width:70px; background:var(--grad); border-radius:10px; margin:0 auto;}

/* ---------------- products ---------------- */
.product-card{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:20px; height:100%; transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s; position:relative;}
.product-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:rgba(36,84,232,.3);}
.pc-thumb{ height:150px; border-radius:14px; margin-bottom:16px; position:relative; overflow:hidden; display:grid; place-items:center; background:var(--lavender);}
.pc-thumb img{ max-height:100%; max-width:100%; object-fit:contain;}
.mini-bottle{ width:52px; height:84px;}
.mini-bottle .cap{ width:26px; height:14px; background:var(--grad); margin:0 auto; border-radius:3px 3px 1px 1px;}
.mini-bottle .body{ width:52px; height:70px; background:linear-gradient(180deg,#2c3341,#111827); border:1px solid rgba(36,84,232,.25); border-radius:8px; margin-top:-2px; display:grid; place-items:center;}
.mini-bottle .body::after{ content:""; width:30px; height:38px; background:#fff; border-radius:4px;}
.pc-tag{ position:absolute; top:10px; left:10px; z-index:2; background:var(--grad); color:#fff; font-size:9.5px; font-weight:800; letter-spacing:.08em; padding:5px 9px; border-radius:100px; text-transform:uppercase;}
.product-card h3{ font-family:'Inter'; font-size:15px; font-weight:700;}
.product-card .cat{ font-size:12px; color:var(--muted); margin:4px 0 8px;}
.stars-vp{ font-size:12px; color:var(--citrus); display:flex; align-items:center; gap:6px;}
.stars-vp span{ color:var(--muted); font-weight:600;}
.pc-bottom{ display:flex; align-items:center; justify-content:space-between; margin-top:14px;}
.price-vp{ font-family:'Unbounded'; font-weight:700; font-size:17px; color:var(--ink);}
.add-btn{ width:38px; height:38px; border-radius:50%; background:var(--grad); color:#fff; display:grid; place-items:center; border:none; cursor:pointer; transition:transform .3s var(--ease);}
.add-btn:hover{ transform:scale(1.12) rotate(90deg);}

/* ---------------- stats band ---------------- */
.stats-vp{ position:relative; padding:80px 0; color:#fff; overflow:hidden; background:#04070d;}
.stats-vp::before{ content:""; position:absolute; inset:-20%; background:var(--grad); opacity:.18; filter:blur(100px);}
.stat-vp{ position:relative; text-align:center;}
.stat-vp b{ font-family:'Unbounded'; font-size:clamp(28px,3.6vw,42px); font-weight:800; display:block; color:#fff;}
.stat-vp span{ font-family:'Rajdhani', sans-serif; font-size:13px; color:#8b96b3; letter-spacing:.07em; text-transform:uppercase; font-weight:700;}

/* ---------------- trust band (sits right under the hero) ---------------- */
.feat-band{ background:var(--surface); border-bottom:1px solid var(--line); padding:34px 0;}
.feat-band .row > div{ border-right:1px solid var(--line);}
.feat-band .row > div:last-child{ border-right:none;}
@media(max-width:860px){ .feat-band .row > div{ border-right:none;} }

.feat-vp{ text-align:center; padding:6px 16px;}
.feat-icon{ width:46px; height:46px; border-radius:50%; overflow:hidden; display:grid; place-items:center; margin:0 auto 12px;}
.feat-icon img{ width:100%; height:100%; object-fit:cover; display:block; }
.feat-vp h4{ font-size:13px; font-weight:700; margin-bottom:5px; text-transform:uppercase; letter-spacing:.02em; color:var(--ink);}
.feat-vp p{ font-size:12px; color:var(--muted); line-height:1.5;}

/* ---------------- marquee ---------------- */
.marquee-section{ padding:30px 0; background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden;}
.marquee-track{ display:flex; gap:20px; width:max-content; animation:vpScrollLeft2 34s linear infinite;}
@keyframes vpScrollLeft2{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.m-card{ width:150px; height:90px; border-radius:14px; background:var(--bg); border:1px solid var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; flex-shrink:0;}
.m-card .swatch{ width:16px; height:16px; border-radius:50%; background:url('/images/sphere-blue.png') center/cover; box-shadow:0 0 10px rgba(36,84,232,.4);}
.m-card span{ font-size:11.5px; font-weight:700; text-align:center; padding:0 10px; color:var(--ink);}

/* ---------------- newsletter ---------------- */
.newsletter{
  background:var(--grad); border-radius:24px; padding:52px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; color:#fff;
}
.newsletter h3{ font-size:24px; font-weight:800; max-width:360px;}
.newsletter p{ opacity:.9; margin-top:8px; font-size:14px;}
.n-form{ display:flex; gap:10px; flex-wrap:wrap;}
.n-form input{ padding:13px 18px; border-radius:100px; border:none; width:260px; font-size:14px;}
.n-form button{ padding:13px 24px; border-radius:100px; border:none; background:var(--ink); color:#fff; font-weight:700; cursor:pointer;}

/* ---------------- footer ---------------- */
footer.site-footer{ background:var(--surface); color:var(--muted); padding:60px 0 26px; margin-top:60px; border-top:1px solid var(--line);}
footer.site-footer .vp-logo{ color:var(--ink);}
footer.site-footer .vp-logo .full-mark{ height:52px;}
footer.site-footer p.desc{ font-size:13.5px; margin-top:14px; line-height:1.6; max-width:280px; color:var(--muted);}
footer.site-footer h5{ color:var(--ink); font-family:'Rajdhani', sans-serif; font-size:13px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:16px;}
footer.site-footer ul{ list-style:none; padding:0; margin:0;}
footer.site-footer ul li{ margin-bottom:10px; font-size:13.5px;}
footer.site-footer ul li a:hover{ color:var(--violet);}
.foot-legal{ font-size:11.5px; color:var(--muted); line-height:1.7; border-top:1px solid var(--line); padding-top:20px; margin-top:32px;}
.foot-bottom{ border-top:1px solid var(--line); padding-top:22px; margin-top:18px; display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--muted); flex-wrap:wrap; gap:16px;}
.foot-badges{ display:flex; gap:18px; flex-wrap:wrap;}
.foot-badges span{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted);}
.foot-badges svg{ color:var(--violet); flex-shrink:0;}
.foot-social{ display:flex; gap:10px;}
.foot-social a{
  width:32px; height:32px; border-radius:50%; background:var(--lavender); color:var(--ink);
  display:grid; place-items:center; transition:background .3s, color .3s;
}
.foot-social a:hover{ background:var(--grad); color:#fff;}

/* ==========================================================================
   v2 REBUILD — dark-first header/hero/footer/products/photo-bands
   Rules here intentionally override matching selectors above (header,
   footer, .hero, .eyebrow) for the pages rebuilt to match the new logo
   and reference design. Pages not yet rebuilt still use the rules above
   this block — that's expected until each page gets its own pass.
   ========================================================================== */
/* ==========================================================================
   Amino World — v2 design system
   Dark-first, matching the new logo (built for dark surfaces only) and the
   new homepage reference. "Popular Products" is a light section embedded
   in an otherwise dark page — everything else is dark.
   ========================================================================== */
:root{
  --bg:#05070d;
  --surface:#0d1220;
  --surface-2:#131a2c;
  --ink:#eef2f8;
  --blue:#3f8cff;
  --blue-deep:#1f5fd6;
  --grad: linear-gradient(120deg, var(--blue), var(--blue-deep));
  --line: rgba(255,255,255,.12);
  --muted:#9aa7c9;
  --shadow: 0 20px 55px -18px rgba(63,140,255,.45);
  --ease: cubic-bezier(.22,.88,.35,1);
}
*{box-sizing:border-box;}
body{ font-family:'Inter', sans-serif; color:var(--ink); background:var(--bg); overflow-x:hidden;}
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:'Unbounded', sans-serif; line-height:1.05; }

.eyebrow{ font-family:'Rajdhani', sans-serif; font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--blue);}
.chrome-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block;}

.btn-vp{ display:inline-flex; align-items:center; gap:8px; padding:15px 28px; border-radius:100px; font-weight:700; font-size:14.5px; border:none; cursor:pointer; transition:transform .35s var(--ease), box-shadow .35s var(--ease);}
.btn-vp-primary{ background:var(--grad); color:#fff; box-shadow:var(--shadow);}
.btn-vp-primary:hover{ transform:translateY(-3px) scale(1.02); color:#fff;}
.btn-vp-ghost{ background:transparent; color:#fff; border:1.5px solid var(--line);}
.btn-vp-ghost:hover{ border-color:var(--blue); color:var(--blue);}
.btn-vp-outline-light{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.4);}
.btn-vp-outline-light:hover{ border-color:#fff; background:rgba(255,255,255,.08);}

[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
[data-reveal].in{ opacity:1; transform:translateY(0);}
[data-reveal="scale"]{ transform:translateY(20px) scale(.94);}
[data-reveal="scale"].in{ transform:translateY(0) scale(1);}
[data-reveal="left"]{ transform:translateX(-40px);}
[data-reveal="left"].in{ transform:translateX(0);}
[data-reveal="right"]{ transform:translateX(40px);}
[data-reveal="right"].in{ transform:translateX(0);}
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important;} }

/* ---------------- header ---------------- */
header.site-header{ position:sticky; top:0; z-index:50; background:rgba(5,7,13,.85); backdrop-filter:blur(14px); border-bottom:1px solid var(--line);}
header.site-header.scrolled{ box-shadow:0 8px 30px -18px rgba(0,0,0,.6);}
.vp-logo{ display:flex; align-items:center;}
.vp-logo .full-mark{ height:100px; width:auto; display:block;}
@media(max-width:900px){ .vp-logo .full-mark{ height:70px;} }
.vp-navlinks{ display:flex; gap:26px; font-family:'Rajdhani', sans-serif; font-size:14.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; margin:0; padding:0; list-style:none;}
.vp-navlinks a{ position:relative; padding:4px 0; color:#c7cee0;}
.vp-navlinks a:hover{ color:#fff;}
@media(max-width:900px){ .vp-navlinks{display:none;} }
.vp-icon-btn{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--surface-2); position:relative; border:none; color:#fff;}
.vp-cart-count{ position:absolute; top:-4px; right:-4px; background:var(--blue); color:#fff; font-size:10px; width:17px; height:17px; border-radius:50%; display:grid; place-items:center; font-weight:700;}
.vp-auth-link{ font-size:13.5px; font-weight:600; color:#fff; padding:8px 4px;}
.vp-auth-link:hover{ color:var(--blue);}
.vp-auth-btn{ padding:9px 20px; font-size:13px;}

/* ---------------- hero ---------------- */
.hero{ position:relative; overflow:hidden; padding:70px 0 90px;
  background:
    linear-gradient(120deg, rgba(6,9,18,.75) 0%, rgba(4,6,12,.9) 70%),
    url('/images/hero-bg.png') center / cover no-repeat;
  background-color:#04060c;
}
.hero .container{ position:relative; z-index:1;}
.hero h1{ font-size:clamp(38px,5.6vw,58px); font-weight:900; letter-spacing:-.01em; color:#fff; text-transform:uppercase;}
.hero p.lead-vp{ font-size:16px; color:#aab4cc; max-width:420px; margin:18px 0 28px; line-height:1.7;}
.hero-tagline-side{ position:absolute; right:6%; top:38%; font-family:'Rajdhani',sans-serif; font-size:12px; letter-spacing:.3em; color:#7b87a8; text-align:right; line-height:2.4; z-index:1;}
.hero-tagline-side::after{ content:""; display:block; width:34px; height:1px; background:var(--blue); margin:10px 0 0 auto;}
.hero-trail{ display:flex; gap:10px; align-items:center; font-family:'Rajdhani',sans-serif; font-size:11.5px; letter-spacing:.2em; color:#7b87a8; text-transform:uppercase; margin-top:50px; flex-wrap:wrap;}
.hero-trail span:not(:last-child)::after{ content:"›"; margin-left:10px; color:#3a4568;}
.hero-scroll{ position:absolute; right:6%; bottom:36px; display:flex; align-items:center; gap:10px; font-family:'Rajdhani',sans-serif; font-size:11px; letter-spacing:.2em; color:#7b87a8; text-transform:uppercase;}
.hero-scroll::after{ content:""; width:1px; height:34px; background:linear-gradient(180deg, var(--blue), transparent);}

/* hero product image placeholder — swap /images/hero-product.png for the real photo */
.hero-visual{ position:relative; display:flex; align-items:center; justify-content:center; min-height:420px;}
.hero-product-tilt{ transition: transform .5s cubic-bezier(.22,.88,.35,1); will-change:transform;}
.hero-visual img{ max-width:100%; max-height:460px; width:auto; display:block; filter:drop-shadow(0 30px 50px rgba(63,140,255,.3)); animation: vialFloat 5s ease-in-out infinite alternate;}
@keyframes vialFloat{ 0%{ transform:translateY(0);} 100%{ transform:translateY(-18px);} }

/* ---------------- popular products (light section on an otherwise dark page) ---------------- */
.products-light{ background:#fff; color:#0f1220; padding:80px 0;}
.products-light .eyebrow{ color:var(--blue);}
.products-light h2{ color:#0f1220; font-size:clamp(26px,3.2vw,34px); font-weight:800;}
.products-light p.sub{ color:#6b7280; font-size:14px; margin-top:4px;}
.view-all-link{ font-weight:700; color:var(--blue); font-size:14px;}

.product-card-v2{ border:1px solid #eceef3; border-radius:14px; padding:18px; height:100%; background:#fff; transition:box-shadow .4s, transform .4s; position:relative;}
.product-card-v2:hover{ transform:translateY(-6px); box-shadow:0 24px 40px -20px rgba(15,18,32,.18);}
.pc-tag-v2{ position:absolute; top:12px; left:12px; background:var(--grad); color:#fff; font-size:9.5px; font-weight:800; letter-spacing:.06em; padding:5px 10px; border-radius:100px; text-transform:uppercase; z-index:2;}
.pc-thumb-v2{ height:140px; border-radius:10px; margin-bottom:14px; background:#f7f8fb; display:grid; place-items:center; overflow:hidden;}
.pc-thumb-v2 img{ max-height:100%; max-width:100%; object-fit:contain;}
.product-card-v2 h3{ font-size:14.5px; font-weight:700; color:#0f1220; margin-bottom:2px;}
.product-card-v2 .cat{ font-size:12px; color:#8b93a8; margin-bottom:6px;}
.stars-v2{ font-size:12px; color:#f5a623; display:flex; align-items:center; gap:5px; margin-bottom:8px;}
.stars-v2 span{ color:#8b93a8; font-weight:600;}
.price-v2{ font-family:'Unbounded'; font-weight:700; font-size:16px; color:#0f1220; margin-bottom:10px; display:block;}
.btn-addcart{ width:100%; padding:9px; border-radius:8px; border:1.5px solid #e3e6ee; background:#fff; color:#0f1220; font-size:13px; font-weight:700; cursor:pointer; transition:background .3s, color .3s, border-color .3s;}
.btn-addcart:hover{ background:var(--grad); color:#fff; border-color:transparent;}

/* ---------------- full-bleed photo bands ---------------- */
.photo-band{ position:relative; min-height:480px; display:flex; align-items:center; overflow:hidden; background:#0a0d16;}
.photo-band .band-bg{ position:absolute; inset:-8% 0; background-size:cover; background-position:center; opacity:.55; background-color:#0a0d16; transition:transform .6s cubic-bezier(.22,.88,.35,1); will-change:transform;}
.band-bg-standard{ background-image:url('/images/standard-bg.png'); }
.band-bg-transparency{ background-image:url('/images/transparency-bg.png'); }
.photo-band .band-overlay{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(5,7,13,.95) 20%, rgba(5,7,13,.55) 60%, rgba(5,7,13,.15) 100%);}
.photo-band .container{ position:relative; z-index:1;}
.photo-band .eyebrow{ color:var(--blue);}
.photo-band h2{ font-size:clamp(28px,3.6vw,42px); font-weight:800; color:#fff; max-width:480px;}
.photo-band p{ color:#c3cbe0; max-width:440px; margin:16px 0 26px; line-height:1.7; font-size:15px;}
.photo-band-side{ position:absolute; right:6%; top:50%; transform:translateY(-50%); font-family:'Rajdhani',sans-serif; font-size:12px; letter-spacing:.3em; color:#6b7690; text-align:right; line-height:2.4;}

/* ---------------- newsletter over earth photo ---------------- */
.newsletter-band{ position:relative; padding:90px 0; overflow:hidden; background:#04060c;}
.newsletter-band .band-bg{ position:absolute; inset:0; background:url('/images/hero-earth.jpg') center 30% / cover no-repeat; opacity:.5;}
.newsletter-band .band-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(4,6,12,.7) 0%, rgba(4,6,12,.92) 100%);}
.newsletter-band .container{ position:relative; z-index:1;}
.newsletter-band h2{ font-size:clamp(26px,3.4vw,38px); font-weight:800; color:#fff;}
.newsletter-band .eyebrow{ color:var(--blue);}
.nb-form{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px;}
.nb-form input{ flex:1; min-width:220px; padding:14px 20px; border-radius:100px; border:1px solid var(--line); background:rgba(255,255,255,.06); color:#fff; font-size:14px;}
.nb-form input::placeholder{ color:#8b93a8;}
.nb-form button{ padding:14px 26px; border-radius:100px; border:none; background:var(--grad); color:#fff; font-weight:700; cursor:pointer;}
.nb-note{ font-size:12px; color:#7b87a8; margin-top:10px;}

/* ---------------- footer ---------------- */
footer.site-footer{ background:#04060c; color:#8b93a8; padding:60px 0 26px; border-top:1px solid var(--line);}
footer.site-footer .vp-logo .full-mark{ height:32px;}
footer.site-footer p.desc{ font-size:13px; margin-top:14px; line-height:1.6; max-width:260px; color:#6d7690;}
footer.site-footer h5{ color:#fff; font-family:'Rajdhani', sans-serif; font-size:12.5px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:16px;}
footer.site-footer ul{ list-style:none; padding:0; margin:0;}
footer.site-footer ul li{ margin-bottom:10px; font-size:13px;}
footer.site-footer ul li a:hover{ color:#fff;}
.foot-social{ display:flex; gap:10px; margin-top:16px;}
.foot-social a{ width:32px; height:32px; border-radius:50%; background:var(--surface-2); color:#fff; display:grid; place-items:center; transition:background .3s;}
.foot-social a:hover{ background:var(--grad);}
.foot-legal{ font-size:11px; color:#565f78; line-height:1.7; border-top:1px solid var(--line); padding-top:20px; margin-top:32px;}
.foot-bottom{ border-top:1px solid var(--line); padding-top:20px; margin-top:16px; display:flex; justify-content:space-between; font-size:12px; color:#565f78; flex-wrap:wrap; gap:10px;}