:root{ --base:#FFFFFF; --elev:#F3F7FC; --card:#FFFFFF; --carbon:#EDF3F9; --line:#E2EAF2; --line2:#D0DBE6; --hi:#0B2236; --mid:#56697B; --low:#8B9BAB; --ice:#1463E8; --ice-deep:#0B47B0; --ice-light:var(--ice-light); --ice-rgb:20,99,224; --platinum:#3E5163; --glow:rgba(var(--ice-rgb),.14); --shadow:0 24px 60px -28px rgba(11,34,54,.22); --shadow-sm:0 10px 30px -16px rgba(11,34,54,.18); --display:"Clash Display","Satoshi",ui-sans-serif,system-ui,sans-serif; --body:"Satoshi",ui-sans-serif,system-ui,-apple-system,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace; --maxw:1240px; --ease:cubic-bezier(.16,1,.3,1); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--body); background:var(--base); color:var(--hi); line-height:1.55; overflow-x:hidden; -webkit-font-smoothing:antialiased; font-feature-settings:"ss01","cv01"; } ::selection{background:rgba(var(--ice-rgb),.16);color:var(--ice-deep)} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} img{max-width:100%;display:block} h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.04;color:var(--hi)} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} .mono{font-family:var(--mono);font-weight:400} .eyebrow{ font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase; color:var(--ice);display:inline-flex;align-items:center;gap:10px; } .eyebrow::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,var(--ice),transparent)} .muted{color:var(--mid)} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font-weight:500;font-size:14.5px;letter-spacing:.01em;padding:14px 26px;border-radius:100px; transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .3s,border-color .3s; position:relative;white-space:nowrap; } .btn-primary{ background:linear-gradient(180deg,var(--ice-light),var(--ice));color:#fff;font-weight:700; box-shadow:0 14px 34px -12px rgba(var(--ice-rgb),.5),inset 0 1px 0 rgba(255,255,255,.25); } .btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 50px -14px rgba(var(--ice-rgb),.6)} .btn-ghost{border:1px solid var(--line2);color:var(--hi);background:#fff} .btn-ghost:hover{border-color:var(--ice);color:var(--ice);background:rgba(var(--ice-rgb),.05);transform:translateY(-2px)} .btn svg{width:16px;height:16px} /* ---------- announce bar ---------- */ .announce{ background:linear-gradient(90deg,rgba(var(--ice-rgb),.07),rgba(var(--ice-rgb),.02)); border-bottom:1px solid var(--line); font-size:12px; padding:8px 0; color:var(--mid); letter-spacing:.04em; position:relative; z-index:60; overflow:hidden; white-space:nowrap; } .announce-track{display:flex;flex-wrap:nowrap;width:max-content;animation:vanta-marquee 45s linear infinite;will-change:transform} .announce:hover .announce-track{animation-play-state:paused} .announce-half{flex:0 0 auto;display:flex;flex-wrap:nowrap;align-items:center} .announce-seq{flex:0 0 auto;display:inline-flex;align-items:center;white-space:nowrap;padding:0 4px} .announce b{color:var(--hi);font-weight:600} .announce .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ice); margin:0 14px;vertical-align:middle;box-shadow:0 0 8px rgba(var(--ice-rgb),.6);animation:pulse 2.4s infinite} @keyframes vanta-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion: reduce){.announce-track{animation:none;justify-content:center;width:100%}} @keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}} /* ---------- navbar ---------- */ .nav{position:sticky;top:0;z-index:50;transition:background .4s,border-color .4s,backdrop-filter .4s,box-shadow .4s} .nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px;border-bottom:1px solid transparent;transition:border-color .4s} .nav.scrolled{background:rgba(255,255,255,.8);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);box-shadow:0 6px 24px -16px rgba(11,34,54,.2)} .nav.scrolled .nav-inner{border-bottom-color:var(--line)} .logo{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:.02em;color:var(--hi)} .logo .mark{width:30px;height:30px;flex:0 0 30px} .logo span small{font-family:var(--mono);font-size:8.5px;letter-spacing:.3em;color:var(--ice);display:block;margin-top:-2px;font-weight:400} .nav-links{display:flex;align-items:center;gap:4px} .nav-links a, .nav-links .navitem{ font-size:14px;color:var(--mid);padding:9px 14px;border-radius:9px;transition:color .25s,background .25s; display:inline-flex;align-items:center;gap:5px;position:relative; } .nav-links a:hover,.nav-links .navitem:hover{color:var(--hi);background:rgba(11,34,54,.05)} .navitem .chev{width:13px;height:13px;transition:transform .3s;opacity:.7} .has-drop:hover .chev{transform:rotate(180deg)} .nav-actions{display:flex;align-items:center;gap:6px} .icon-btn{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;color:var(--mid);transition:.25s;position:relative} .icon-btn:hover{color:var(--hi);background:rgba(11,34,54,.05)} .icon-btn svg{width:19px;height:19px} .cart-count{position:absolute;top:5px;right:5px;min-width:17px;height:17px;border-radius:9px;background:var(--ice); color:#fff;font-family:var(--mono);font-size:10px;font-weight:500;display:grid;place-items:center;padding:0 4px; box-shadow:0 0 10px rgba(var(--ice-rgb),.5);transform:scale(0);transition:transform .35s var(--ease)} .cart-count.show{transform:scale(1)} /* mega dropdown */ .has-drop{position:relative} .drop{ position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px); width:560px;background:rgba(255,255,255,.98);backdrop-filter:blur(24px);border:1px solid var(--line2); border-radius:18px;padding:14px;opacity:0;visibility:hidden;transition:.32s var(--ease); box-shadow:0 30px 70px -20px rgba(11,34,54,.28);display:grid;grid-template-columns:1fr 1fr;gap:4px; } .has-drop:hover .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .drop::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px} .drop-item{padding:13px 14px;border-radius:12px;transition:background .25s;display:flex;gap:13px;align-items:flex-start} .drop-item:hover{background:rgba(var(--ice-rgb),.06)} .drop-item .di-ic{width:38px;height:38px;flex:0 0 38px;border-radius:10px;display:grid;place-items:center; background:rgba(var(--ice-rgb),.08);border:1px solid var(--line);color:var(--ice)} .drop-item .di-ic svg{width:18px;height:18px} .drop-item h5{font-family:var(--body);font-weight:700;font-size:14px;color:var(--hi);letter-spacing:0} .drop-item p{font-size:12px;color:var(--low);margin-top:2px;line-height:1.4} /* ---------- hero ---------- */ .hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:60px 0 80px;overflow:hidden; background:linear-gradient(180deg,#fff 0%,#eef4fc 100%)} #molecule{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.6} .hero-glow{position:absolute;border-radius:50%;filter:blur(90px);z-index:0;pointer-events:none} .hg1{width:560px;height:560px;background:radial-gradient(circle,rgba(var(--ice-rgb),.14),transparent 70%);top:-180px;right:-120px} .hg2{width:480px;height:480px;background:radial-gradient(circle,rgba(47,123,242,.1),transparent 70%);bottom:-160px;left:-140px} .hero-grid-tex{position:absolute;inset:0;z-index:0;opacity:.7; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:64px 64px;mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 75%); -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 75%)} .hero-wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:50px;align-items:center;width:100%} .hero-pill{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line2);background:#fff; border-radius:100px;padding:7px 7px 7px 16px;font-size:12.5px;color:var(--mid);margin-bottom:30px;box-shadow:var(--shadow-sm)} .hero-pill b{color:var(--hi);font-weight:600} .hero-pill .tag{background:rgba(var(--ice-rgb),.1);color:var(--ice);border:1px solid rgba(var(--ice-rgb),.25); font-family:var(--mono);font-size:10px;padding:3px 10px;border-radius:100px;letter-spacing:.08em} .hero h1{font-size:clamp(42px,6.2vw,80px);font-weight:600;margin-bottom:24px} .hero h1 .grad{background:linear-gradient(120deg,var(--ice-light),var(--ice) 50%,var(--ice-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .hero p.lead{font-size:clamp(16px,1.5vw,18.5px);color:var(--mid);max-width:520px;margin-bottom:38px;line-height:1.65} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:46px} .cred-row{display:flex;gap:30px;flex-wrap:wrap} .cred{display:flex;flex-direction:column;gap:3px} .cred .num{font-family:var(--mono);font-size:26px;color:var(--hi);font-weight:500;letter-spacing:-.02em} .cred .num .u{color:var(--ice);font-size:18px} .cred .lbl{font-size:11.5px;color:var(--low);letter-spacing:.04em} /* hero product render */ .hero-vis{position:relative;display:grid;place-items:center;min-height:460px} .vial-card{position:relative;width:300px;height:430px;border-radius:26px; background:linear-gradient(165deg,#ffffff,#f2f7fd);border:1px solid var(--line2); box-shadow:0 50px 110px -34px rgba(11,34,54,.3),inset 0 1px 0 #fff; display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:30px;overflow:hidden; animation:floaty 7s ease-in-out infinite} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}} .vial-card .ring{position:absolute;top:-90px;width:340px;height:340px;border-radius:50%; background:radial-gradient(circle,rgba(var(--ice-rgb),.18),transparent 65%)} .vial{width:96px;height:240px;position:relative;margin-bottom:auto;margin-top:34px;filter:drop-shadow(0 18px 36px rgba(var(--ice-rgb),.28))} .vial .glass{position:absolute;inset:0;top:34px;border-radius:14px 14px 18px 18px; background:linear-gradient(120deg,rgba(var(--ice-rgb),.06),rgba(255,255,255,.5)); border:1px solid rgba(11,34,54,.16);overflow:hidden} .vial .liquid{position:absolute;bottom:0;left:0;right:0;height:62%; background:linear-gradient(180deg,#4d8df5,#0b47b0); box-shadow:inset 0 4px 14px rgba(255,255,255,.35)} .vial .liquid::before{content:"";position:absolute;top:-6px;left:0;right:0;height:8px;background:#7aa9f7;border-radius:50%} .vial .cap{position:absolute;top:0;left:50%;transform:translateX(-50%);width:54px;height:40px; background:linear-gradient(180deg,#d6e0ec,#aebccb);border-radius:7px;border:1px solid var(--line2)} .vial .cap::after{content:"";position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:62px;height:12px;background:#c2cedb;border-radius:3px;border:1px solid var(--line)} .vial-card .v-meta{width:100%;border-top:1px solid var(--line);padding-top:18px;display:flex;justify-content:space-between;align-items:flex-end} .vial-card .v-meta h4{font-size:18px} .vial-card .v-meta .pur{font-family:var(--mono);font-size:12px;color:var(--ice)} .vial-card .v-meta .pr{font-family:var(--mono);font-size:20px;color:var(--hi)} .float-badge{position:absolute;background:rgba(255,255,255,.95);backdrop-filter:blur(14px);border:1px solid var(--line2); border-radius:14px;padding:11px 15px;display:flex;align-items:center;gap:10px;font-size:12.5px; box-shadow:var(--shadow);animation:floaty 7s ease-in-out infinite} .float-badge svg{width:18px;height:18px;color:var(--ice)} .float-badge b{font-weight:700;color:var(--hi)}.float-badge small{color:var(--low);display:block;font-size:10.5px} .fb1{top:34px;left:-26px;animation-delay:.8s} .fb2{bottom:60px;right:-30px;animation-delay:1.6s} /* ---------- trust strip ---------- */ .strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;background:var(--elev)} .strip-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap} .strip-item{display:flex;align-items:center;gap:11px;color:var(--mid);font-size:13.5px;letter-spacing:.02em} .strip-item svg{width:19px;height:19px;color:var(--ice);flex:0 0 19px} .strip-item b{color:var(--hi);font-weight:600} /* ---------- section base ---------- */ section.blk{padding:108px 0;position:relative} .sec-head{max-width:680px;margin-bottom:54px} .sec-head.center{margin:0 auto 56px;text-align:center} .sec-head h2{font-size:clamp(30px,3.6vw,46px);margin:18px 0 18px} .sec-head p{color:var(--mid);font-size:16px;line-height:1.6} .sec-head.center .eyebrow{justify-content:center} .sec-head.center .eyebrow::after{content:"";width:22px;height:1px;background:linear-gradient(90deg,transparent,var(--ice))} /* ---------- product grid ---------- */ .prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .pcard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px; transition:transform .55s var(--ease),border-color .4s,box-shadow .55s var(--ease);overflow:hidden;box-shadow:var(--shadow-sm)} .pcard::after{content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;opacity:0;transition:opacity .5s; background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(var(--ice-rgb),.08),transparent 60%)} .pcard:hover{transform:translateY(-7px);border-color:rgba(var(--ice-rgb),.4);box-shadow:0 34px 70px -28px rgba(11,34,54,.3)} .pcard:hover::after{opacity:1} .pcard-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px} .pc-cat{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--low)} .lab-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.06em; color:var(--ice);background:rgba(var(--ice-rgb),.08);border:1px solid rgba(var(--ice-rgb),.2);border-radius:100px;padding:4px 10px} .lab-badge svg{width:11px;height:11px} .pc-vis{height:168px;border-radius:14px;background: radial-gradient(circle at 50% 30%,rgba(var(--ice-rgb),.07),transparent 60%), linear-gradient(165deg,#f6faff,#eaf1f9); border:1px solid var(--line);display:grid;place-items:center;margin-bottom:18px;position:relative;overflow:hidden} .pc-vis .mini-vial{width:46px;height:118px;position:relative;transition:transform .6s var(--ease)} .pcard:hover .pc-vis .mini-vial{transform:translateY(-6px) scale(1.05)} .pc-vis .mini-vial .g{position:absolute;inset:0;top:18px;border-radius:8px 8px 11px 11px;background:linear-gradient(120deg,rgba(var(--ice-rgb),.06),rgba(255,255,255,.5));border:1px solid rgba(11,34,54,.14);overflow:hidden} .pc-vis .mini-vial .l{position:absolute;bottom:0;left:0;right:0;height:58%;background:linear-gradient(180deg,#4d8df5,#0b47b0)} .pc-vis .mini-vial .c{position:absolute;top:0;left:50%;transform:translateX(-50%);width:28px;height:22px;background:linear-gradient(180deg,#d6e0ec,#aebccb);border-radius:5px;border:1px solid var(--line2)} .pc-vis .pur-tag{position:absolute;top:12px;right:12px;font-family:var(--mono);font-size:11px;color:var(--ice)} .pcard h3{font-size:19px;font-family:var(--body);font-weight:700;letter-spacing:0;margin-bottom:5px} .pcard .sub{font-size:13px;color:var(--mid);margin-bottom:16px;min-height:38px} .pc-foot{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid var(--line)} .pc-price{font-family:var(--mono);font-size:22px;color:var(--hi)} .pc-price small{color:var(--low);font-size:12px} .add-btn{width:42px;height:42px;border-radius:12px;background:rgba(var(--ice-rgb),.08);border:1px solid rgba(var(--ice-rgb),.25); color:var(--ice);display:grid;place-items:center;transition:.3s} .add-btn:hover{background:var(--ice);color:#fff;transform:scale(1.08)} .add-btn svg{width:19px;height:19px} .stars{display:flex;gap:2px;margin-bottom:14px} .stars svg{width:13px;height:13px;color:var(--ice);fill:var(--ice)} .stars span{font-size:11.5px;color:var(--low);margin-left:6px;font-family:var(--mono)} /* ---------- science stats ---------- */ .science{background:var(--elev);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--card);box-shadow:var(--shadow-sm)} .stat{padding:38px 30px;border-right:1px solid var(--line);position:relative;overflow:hidden} .stat:last-child{border-right:none} .stat .sn{font-family:var(--mono);font-size:46px;font-weight:500;letter-spacing:-.03em;color:var(--hi);line-height:1} .stat .sn .u{color:var(--ice);font-size:30px} .stat .sl{color:var(--mid);font-size:13.5px;margin-top:12px} .sci-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:24px} .sci-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:30px;transition:.45s var(--ease);box-shadow:var(--shadow-sm)} .sci-card:hover{border-color:rgba(var(--ice-rgb),.35);transform:translateY(-5px);box-shadow:var(--shadow)} .sci-ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;margin-bottom:20px; background:rgba(var(--ice-rgb),.08);border:1px solid var(--line2);color:var(--ice)} .sci-ic svg{width:23px;height:23px} .sci-card h4{font-family:var(--body);font-weight:700;font-size:17px;margin-bottom:9px} .sci-card p{color:var(--mid);font-size:13.5px;line-height:1.6} /* ---------- categories ---------- */ .cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .cat-card{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);min-height:230px; display:flex;flex-direction:column;justify-content:flex-end;padding:26px;transition:.5s var(--ease);cursor:pointer; background:linear-gradient(165deg,#ffffff,#eef4fc);box-shadow:var(--shadow-sm)} .cat-card:hover{border-color:rgba(var(--ice-rgb),.4);transform:translateY(-5px);box-shadow:var(--shadow)} .cat-card .cglow{position:absolute;top:-40px;right:-40px;width:200px;height:200px;border-radius:50%; background:radial-gradient(circle,rgba(var(--ice-rgb),.16),transparent 65%);opacity:.6;transition:.5s} .cat-card:hover .cglow{opacity:1;transform:scale(1.15)} .cat-card .cnum{position:absolute;top:24px;left:26px;font-family:var(--mono);font-size:12px;color:var(--low)} .cat-card .cic{position:absolute;top:22px;right:24px;color:var(--ice);opacity:.7;transition:.5s} .cat-card:hover .cic{opacity:1;transform:translateY(-4px)} .cat-card .cic svg{width:26px;height:26px} .cat-card h3{font-size:24px;position:relative;z-index:2;margin-bottom:6px} .cat-card p{color:var(--mid);font-size:13px;position:relative;z-index:2;margin-bottom:14px} .cat-card .clink{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--ice);text-transform:uppercase; display:inline-flex;align-items:center;gap:7px;position:relative;z-index:2} .cat-card .clink svg{width:13px;height:13px;transition:transform .4s} .cat-card:hover .clink svg{transform:translateX(4px)} /* ---------- best sellers carousel ---------- */ .carousel-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:36px;gap:20px;flex-wrap:wrap} .car-nav{display:flex;gap:10px} .car-nav button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);color:var(--hi); display:grid;place-items:center;transition:.3s;background:#fff} .car-nav button:hover{border-color:var(--ice);color:var(--ice);background:rgba(var(--ice-rgb),.06)} .car-nav button svg{width:18px;height:18px} .car-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 28px 22px;margin:0 -28px; scrollbar-width:none} .car-track::-webkit-scrollbar{display:none} .car-item{scroll-snap-align:start;flex:0 0 300px} /* ---------- research (unused) ---------- */ .research{background:var(--elev);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} /* ---------- faq ---------- */ .faq-wrap{max-width:820px;margin:0 auto} .faq-item{border:1px solid var(--line);border-radius:16px;margin-bottom:13px;overflow:hidden;background:var(--card);transition:border-color .3s,box-shadow .3s;box-shadow:var(--shadow-sm)} .faq-item.open{border-color:rgba(var(--ice-rgb),.4)} .faq-q{width:100%;text-align:left;padding:22px 24px;display:flex;justify-content:space-between;align-items:center;gap:20px; font-family:var(--body);font-weight:700;font-size:16px;color:var(--hi)} .faq-q .fic{flex:0 0 28px;width:28px;height:28px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center; transition:.4s var(--ease);color:var(--ice)} .faq-item.open .fic{transform:rotate(45deg);background:rgba(var(--ice-rgb),.12);border-color:var(--ice)} .faq-q .fic svg{width:15px;height:15px} .faq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)} .faq-a div{padding:0 24px 24px;color:var(--mid);font-size:14.5px;line-height:1.7} /* ---------- newsletter band ---------- */ .nl-band{position:relative;border:1px solid var(--line2);border-radius:26px;padding:60px;overflow:hidden; background:linear-gradient(150deg,#eaf2fe,#f7faff);box-shadow:var(--shadow-sm)} .nl-band .nlglow{position:absolute;top:-120px;right:-80px;width:400px;height:400px;border-radius:50%; background:radial-gradient(circle,rgba(var(--ice-rgb),.16),transparent 65%)} .nl-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center} .nl-inner h2{font-size:clamp(28px,3vw,40px);margin-bottom:14px} .nl-inner p{color:var(--mid);font-size:15.5px;max-width:440px} .nl-form{display:flex;gap:11px;flex-wrap:wrap} .nl-form input{flex:1;min-width:200px;background:#fff;border:1px solid var(--line2);border-radius:100px; padding:15px 22px;color:var(--hi);font-family:var(--body);font-size:14.5px;outline:none;transition:.3s} .nl-form input:focus{border-color:var(--ice);box-shadow:0 0 0 3px rgba(var(--ice-rgb),.12)} .nl-form input::placeholder{color:var(--low)} .nl-note{font-family:var(--mono);font-size:11px;color:var(--low);margin-top:14px} /* ---------- footer ---------- */ footer{border-top:1px solid var(--line);padding:72px 0 0;background:var(--elev)} .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:40px;padding-bottom:54px;border-bottom:1px solid var(--line)} .foot-brand .logo{margin-bottom:18px} .foot-brand p{color:var(--mid);font-size:13.5px;max-width:300px;line-height:1.65;margin-bottom:22px} .foot-soc{display:flex;gap:10px} .foot-soc a{width:40px;height:40px;border-radius:11px;border:1px solid var(--line);display:grid;place-items:center; color:var(--mid);transition:.3s;background:#fff} .foot-soc a:hover{color:var(--ice);border-color:rgba(var(--ice-rgb),.4);background:rgba(var(--ice-rgb),.05)} .foot-soc svg{width:18px;height:18px} .foot-col h5{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--low);margin-bottom:20px} .foot-col a{display:block;color:var(--mid);font-size:14px;margin-bottom:13px;transition:color .25s,transform .25s} .foot-col a:hover{color:var(--ice);transform:translateX(3px)} .foot-bottom{display:flex;justify-content:space-between;align-items:center;padding:26px 0;flex-wrap:wrap;gap:16px} .foot-bottom p{font-size:12.5px;color:var(--low)} .foot-bottom .fb-links{display:flex;gap:24px} .foot-bottom .fb-links a{font-size:12.5px;color:var(--low);transition:.25s} .foot-bottom .fb-links a:hover{color:var(--mid)} .disclaimer{background:var(--base);border-top:1px solid var(--line);padding:18px 0;text-align:center} .disclaimer p{font-size:11px;color:var(--low);line-height:1.6;max-width:900px;margin:0 auto;font-family:var(--mono)} /* ---------- cart drawer ---------- */ .overlay{position:fixed;inset:0;background:rgba(11,34,54,.4);backdrop-filter:blur(4px);z-index:90;opacity:0;visibility:hidden;transition:.4s} .overlay.show{opacity:1;visibility:visible} .drawer{position:fixed;top:0;right:0;height:100%;width:420px;max-width:90vw;background:var(--base);border-left:1px solid var(--line2); z-index:100;transform:translateX(100%);transition:transform .5s var(--ease);display:flex;flex-direction:column; box-shadow:-30px 0 80px -20px rgba(11,34,54,.3)} .drawer.show{transform:translateX(0)} .drawer-head{display:flex;align-items:center;justify-content:space-between;padding:24px;border-bottom:1px solid var(--line)} .drawer-head h3{font-size:19px;display:flex;align-items:center;gap:10px} .drawer-head .dc{font-family:var(--mono);font-size:12px;color:var(--ice);background:rgba(var(--ice-rgb),.1);padding:2px 9px;border-radius:100px} .drawer-body{flex:1;overflow-y:auto;padding:18px 24px} .cart-line{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)} .cart-line .cl-vis{width:56px;height:56px;flex:0 0 56px;border-radius:12px;border:1px solid var(--line); background:radial-gradient(circle at 50% 30%,rgba(var(--ice-rgb),.1),transparent),#f6faff;display:grid;place-items:center;color:var(--ice)} .cart-line .cl-vis svg{width:22px;height:22px} .cart-line h5{font-family:var(--body);font-weight:700;font-size:14px} .cart-line small{font-family:var(--mono);font-size:11px;color:var(--low)} .cart-line .cl-price{margin-left:auto;font-family:var(--mono);color:var(--hi);font-size:14px} .empty-cart{text-align:center;padding:70px 24px;color:var(--low)} .empty-cart .ec-ic{width:70px;height:70px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center; margin:0 auto 22px;color:var(--low)} .empty-cart .ec-ic svg{width:30px;height:30px} .empty-cart h4{font-family:var(--body);font-weight:700;color:var(--mid);margin-bottom:8px} .empty-cart p{font-size:13px;margin-bottom:24px} .drawer-foot{padding:24px;border-top:1px solid var(--line)} .drawer-foot .row{display:flex;justify-content:space-between;margin-bottom:8px;color:var(--mid);font-size:13.5px} .drawer-foot .row.tot{color:var(--hi);font-size:17px;font-family:var(--mono);margin:14px 0 18px;padding-top:14px;border-top:1px solid var(--line)} .drawer-foot .btn{width:100%} /* ---------- mobile nav + sticky cta ---------- */ .hamburger{display:none;width:42px;height:42px;border-radius:11px;flex-direction:column;justify-content:center;align-items:center;gap:5px} .hamburger span{width:20px;height:1.8px;background:var(--hi);border-radius:2px;transition:.35s var(--ease)} .hamburger.active span:nth-child(1){transform:translateY(6.8px) rotate(45deg)} .hamburger.active span:nth-child(2){opacity:0} .hamburger.active span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)} .mobile-menu{position:fixed;inset:0;top:0;background:rgba(255,255,255,.98);backdrop-filter:blur(20px);z-index:80; transform:translateY(-100%);transition:transform .55s var(--ease);padding:100px 28px 40px;display:flex;flex-direction:column;overflow-y:auto} .mobile-menu.show{transform:translateY(0)} .mobile-menu a{font-family:var(--display);font-size:30px;font-weight:600;padding:14px 0;border-bottom:1px solid var(--line); display:flex;align-items:center;justify-content:space-between;color:var(--hi);opacity:0;transform:translateY(20px)} .mobile-menu a svg{width:20px;height:20px;color:var(--low)} .mobile-menu.show a{animation:mItem .5s var(--ease) forwards} @keyframes mItem{to{opacity:1;transform:translateY(0)}} .mobile-menu .mm-cta{margin-top:auto;padding-top:30px;display:flex;gap:12px} .mobile-menu .mm-cta .btn{flex:1;justify-content:center;text-align:center;font-family:var(--body);font-weight:700;font-size:16px;letter-spacing:.01em;padding:16px 22px;border-bottom:0} .sticky-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:70;padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.92);backdrop-filter:blur(20px);border-top:1px solid var(--line2);gap:12px;align-items:center; transform:translateY(120%);transition:transform .5s var(--ease);box-shadow:0 -10px 30px -16px rgba(11,34,54,.2)} .sticky-cta.show{transform:translateY(0)} .sticky-cta .sc-info{flex:1} .sticky-cta .sc-info small{font-family:var(--mono);font-size:10px;color:var(--low);display:block} .sticky-cta .sc-info b{font-size:14px;color:var(--hi)} .sticky-cta .btn{flex:0 0 auto} /* ---------- reveal ---------- */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .reveal.in{opacity:1;transform:none} .stagger>*{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .stagger.in>*{opacity:1;transform:none} .stagger.in>*:nth-child(1){transition-delay:.05s} .stagger.in>*:nth-child(2){transition-delay:.13s} .stagger.in>*:nth-child(3){transition-delay:.21s} .stagger.in>*:nth-child(4){transition-delay:.29s} .stagger.in>*:nth-child(5){transition-delay:.37s} .stagger.in>*:nth-child(6){transition-delay:.45s} /* ---------- responsive ---------- */ @media(max-width:1080px){ .hero-wrap{grid-template-columns:1fr;gap:60px} .hero-vis{order:-1;min-height:380px} } @media(max-width:900px){ .nav-links{display:none} .hamburger{display:flex} .desktop-only{display:none} .nav-actions a.icon-btn[aria-label="Account"]{display:grid} .nav-actions{gap:2px} .icon-btn{width:38px;height:38px} .prod-grid,.cat-grid,.sci-cards{grid-template-columns:1fr 1fr} .stat-grid{grid-template-columns:1fr 1fr} .stat:nth-child(2){border-right:none} .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)} .nl-inner{grid-template-columns:1fr;gap:28px} .foot-grid{grid-template-columns:1fr 1fr;gap:36px} .foot-brand{grid-column:1/-1} } @media(max-width:640px){ .wrap{padding:0 20px} section.blk{padding:74px 0} .prod-grid,.cat-grid,.sci-cards{grid-template-columns:1fr} .stat-grid{grid-template-columns:1fr 1fr} .stat{padding:28px 22px} .stat .sn{font-size:38px} .strip-inner{justify-content:flex-start;gap:14px 22px} .strip-item{font-size:12.5px} .hero{min-height:auto;padding:48px 0 40px} .hero-cta{flex-direction:column;align-items:stretch} .hero-cta .btn{width:100%} .cred-row{gap:22px} .sticky-cta{display:flex} .nl-band{padding:36px 26px} .float-badge{display:none} .vial-card{width:250px;height:380px} .foot-grid{grid-template-columns:1fr} .foot-bottom{flex-direction:column;align-items:flex-start} .has-footer-pad{padding-bottom:90px} } /* ============================================================ WOOCOMMERCE THEMING — match VANTA clinical white/blue brand ============================================================ */ .woocommerce-page main.wrap, .woocommerce main.wrap{padding:120px 0 90px} .woocommerce h1,.woocommerce h2{color:var(--hi)} .woocommerce-breadcrumb{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--low);margin-bottom:26px} .woocommerce-breadcrumb a{color:var(--ice)} .woocommerce .woocommerce-result-count{color:var(--mid);font-size:13px} .woocommerce .woocommerce-ordering select{background:#fff;border:1px solid var(--line2);border-radius:100px;padding:10px 16px;color:var(--hi);font-family:var(--body)} /* product loop -> VANTA cards */ .woocommerce ul.products{display:grid !important;grid-template-columns:repeat(4,1fr);gap:18px;margin:0;padding:0;list-style:none} .woocommerce ul.products li.product{width:auto !important;margin:0 !important;float:none !important;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow-sm);transition:transform .5s var(--ease),border-color .4s,box-shadow .5s var(--ease);position:relative;overflow:hidden;text-align:left} .woocommerce ul.products li.product:hover{transform:translateY(-7px);border-color:rgba(var(--ice-rgb),.4);box-shadow:0 34px 70px -28px rgba(11,34,54,.3)} .woocommerce ul.products li.product a img{border-radius:12px;margin:0 0 13px;background:linear-gradient(165deg,#f6faff,#eaf1f9);border:1px solid var(--line)} .woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--body) !important;font-weight:700;font-size:16px;color:var(--hi);padding:0 0 5px;line-height:1.3} .woocommerce ul.products li.product .price{color:var(--hi) !important;font-family:var(--mono);font-size:17px;display:block;margin-bottom:12px} .woocommerce ul.products li.product .price del{color:var(--low);opacity:.7;font-weight:400;margin-right:6px} .woocommerce ul.products li.product .price ins{text-decoration:none;color:var(--ice)} .woocommerce ul.products li.product .star-rating{margin:0 0 12px;color:var(--ice)} .woocommerce ul.products li.product .onsale{background:var(--ice);color:#fff;border-radius:100px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;min-height:auto;min-width:auto;padding:5px 12px;top:14px;right:14px;left:auto;margin:0;line-height:1.4} /* buttons */ .woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,.woocommerce .button.alt,.woocommerce #place_order{ background:linear-gradient(180deg,var(--ice-light),var(--ice)) !important;color:#fff !important;border-radius:100px !important;font-family:var(--body);font-weight:700;font-size:14px;padding:13px 26px !important;border:none;transition:transform .4s var(--ease),box-shadow .4s var(--ease);box-shadow:0 14px 34px -12px rgba(var(--ice-rgb),.5);text-shadow:none} .woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,.woocommerce .button.alt:hover,.woocommerce #place_order:hover{transform:translateY(-2px);box-shadow:0 22px 50px -14px rgba(var(--ice-rgb),.6);background:linear-gradient(180deg,var(--ice-light),var(--ice-deep)) !important} .woocommerce a.button.alt.disabled,.woocommerce button.button.disabled{opacity:.5} .woocommerce .button.wc-backward,.woocommerce a.added_to_cart{background:#fff !important;color:var(--ice) !important;border:1px solid var(--line2);box-shadow:none} /* notices */ .woocommerce-message,.woocommerce-info,.woocommerce-error{border-radius:14px;border:1px solid var(--line2);background:#fff;color:var(--hi);box-shadow:var(--shadow-sm);padding:16px 20px 16px 50px} .woocommerce-message{border-top:3px solid var(--ice)} .woocommerce-info{border-top:3px solid #4d8df5} .woocommerce-error{border-top:3px solid #e0556b} .woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{color:var(--ice);left:18px} /* forms / inputs */ .woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce .select2-container .select2-selection,.woocommerce-page #order_review input,.woocommerce form .form-row select{ background:#fff;border:1px solid var(--line2);border-radius:12px;padding:13px 16px;color:var(--hi);font-family:var(--body);box-shadow:none} .woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row textarea:focus{border-color:var(--ice);box-shadow:0 0 0 3px rgba(var(--ice-rgb),.12);outline:none} .woocommerce form .form-row label{color:var(--mid);font-size:13px;font-weight:500} /* tables (cart / order) */ .woocommerce table.shop_table{border:1px solid var(--line);border-radius:16px;border-collapse:separate;background:#fff;overflow:hidden} .woocommerce table.shop_table th{color:var(--hi);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:var(--elev)} .woocommerce table.shop_table td{border-top:1px solid var(--line);color:var(--mid)} .woocommerce .cart_totals h2,.woocommerce-checkout h3{color:var(--hi)} .woocommerce .cart-collaterals .cart_totals,.woocommerce-checkout #order_review,.woocommerce-checkout .woocommerce-checkout-review-order{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:var(--shadow-sm)} .woocommerce-checkout #payment{background:var(--elev);border-radius:16px} .woocommerce .quantity input.qty{background:#fff;border:1px solid var(--line2);border-radius:10px;color:var(--hi);padding:8px} /* single product */ .woocommerce div.product .product_title{font-family:var(--display);color:var(--hi)} .woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--hi);font-family:var(--mono);font-size:26px} .woocommerce div.product .woocommerce-tabs ul.tabs li{background:var(--elev);border-color:var(--line);border-radius:10px 10px 0 0} .woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:#fff} .woocommerce span.onsale{background:var(--ice);color:#fff} .woocommerce .woocommerce-product-gallery{border:1px solid var(--line);border-radius:18px;padding:14px;background:#fff} /* pagination */ .woocommerce nav.woocommerce-pagination ul{border:none;gap:6px;display:flex;justify-content:center} .woocommerce nav.woocommerce-pagination ul li{border:none} .woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{border:1px solid var(--line2);border-radius:10px;color:var(--hi);background:#fff} .woocommerce nav.woocommerce-pagination ul li span.current{background:var(--ice);color:#fff;border-color:var(--ice)} /* account */ .woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;padding:0} .woocommerce-account .woocommerce-MyAccount-navigation li{border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:#fff} .woocommerce-account .woocommerce-MyAccount-navigation li.is-active{border-color:var(--ice)} .woocommerce-account .woocommerce-MyAccount-navigation li a{display:block;padding:12px 16px;color:var(--mid)} .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{color:var(--ice)} /* homepage product loops inside our sections */ #carTrack ul.products{display:flex !important;grid-template-columns:none !important;flex-wrap:nowrap;gap:20px} #carTrack ul.products li.product{flex:0 0 290px;scroll-snap-align:start} @media(max-width:1100px){ .woocommerce ul.products{grid-template-columns:repeat(3,1fr)} } @media(max-width:820px){ .woocommerce ul.products{grid-template-columns:repeat(2,1fr)} } @media(max-width:560px){ .woocommerce ul.products{grid-template-columns:1fr} } @media(max-width:640px){ .woocommerce-page main.wrap,.woocommerce main.wrap{padding:100px 0 80px} } /* ============================================================ VIDEO HERO (top of homepage) — editable in Customizer ============================================================ */ .video-hero{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden;background:#05070a} .video-hero .vh-media{position:absolute;inset:0;z-index:0} .video-hero .vh-media video,.video-hero .vh-media img{width:100%;height:100%;object-fit:cover;display:block} .video-hero .vh-media iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:177.78vh;min-width:100%;height:56.25vw;min-height:100%;border:0;pointer-events:none} .video-hero .vh-overlay{position:absolute;inset:0;z-index:1} .video-hero.ov-light .vh-overlay{background:linear-gradient(180deg,rgba(5,7,10,.22),rgba(5,7,10,.38))} .video-hero.ov-medium .vh-overlay{background:linear-gradient(180deg,rgba(5,7,10,.45),rgba(5,7,10,.62))} .video-hero.ov-dark .vh-overlay{background:linear-gradient(180deg,rgba(5,7,10,.62),rgba(5,7,10,.8))} .video-hero .vh-content{position:relative;z-index:2;text-align:center;max-width:860px;margin:0 auto;padding:0 28px;color:#fff} .video-hero .vh-content .eyebrow{color:#9fc7ff;justify-content:center} .video-hero .vh-content .eyebrow::before{background:linear-gradient(90deg,#9fc7ff,transparent)} .video-hero .vh-content h1{color:#fff;font-size:clamp(40px,6vw,76px);font-weight:600;letter-spacing:-.02em;margin:18px 0 18px;text-shadow:0 2px 30px rgba(0,0,0,.3)} .video-hero .vh-content p{color:rgba(255,255,255,.84);font-size:clamp(16px,1.6vw,19px);line-height:1.6;max-width:620px;margin:0 auto 32px} .vh-scroll{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:2;color:rgba(255,255,255,.7);width:44px;height:44px;border:1px solid rgba(255,255,255,.25);border-radius:50%;display:grid;place-items:center;animation:vhbounce 2.2s ease-in-out infinite;transition:.3s} .vh-scroll:hover{color:#fff;border-color:rgba(255,255,255,.6)} .vh-scroll svg{width:20px;height:20px} @keyframes vhbounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}} @media(max-width:640px){ .video-hero{min-height:78vh} .vh-scroll{bottom:16px} } /* newsletter submit states */ .nl-note.is-success{color:var(--ice)} .nl-note.is-error{color:#d6455e} .nl-form button[disabled]{opacity:.65;pointer-events:none} /* uploaded logo image used as the brand mark */ .logo img.mark{width:auto;height:46px;flex:0 0 auto;object-fit:contain;display:block} /* ============================================================ VARIABLE PRODUCTS — dosage selector on the product page ============================================================ */ .woocommerce div.product form.cart .variations{margin:0 0 20px;border:none} .woocommerce div.product form.cart .variations td{padding:6px 0;vertical-align:middle;border:none} .woocommerce div.product form.cart .variations td.label{padding-right:16px} .woocommerce div.product form.cart .variations td.label label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--low);font-weight:500;margin:0} .woocommerce div.product form.cart .variations select{min-width:210px;background:#fff;border:1px solid var(--line2);border-radius:12px;padding:12px 16px;color:var(--hi);font-family:var(--body);font-size:14.5px;cursor:pointer;transition:.25s} .woocommerce div.product form.cart .variations select:focus{border-color:var(--ice);box-shadow:0 0 0 3px rgba(var(--ice-rgb),.12);outline:none} .woocommerce div.product form.cart a.reset_variations{display:inline-block;margin-top:6px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ice)} .woocommerce div.product .woocommerce-variation-price .price,.woocommerce div.product .single_variation .price{font-family:var(--mono);color:var(--hi);font-size:26px} .woocommerce div.product form.cart .woocommerce-variation-add-to-cart{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:6px} .woocommerce div.product form.cart .woocommerce-variation-add-to-cart .quantity input.qty{background:#fff;border:1px solid var(--line2);border-radius:10px;color:var(--hi);padding:10px} /* ── Countdown Bar (top of page) ─────────────────────────────── */ .vanta-cd{ --cd-bg:var(--hi); position:relative; z-index:60; overflow:hidden; color:#fff; padding:10px 18px; background:linear-gradient(100deg, var(--cd-bg) 0%, var(--ice-deep) 40%, var(--ice) 55%, var(--ice-deep) 70%, var(--cd-bg) 100%); background-size:220% 100%; animation:vcdFlow 9s ease-in-out infinite; border-bottom:1px solid rgba(255,255,255,.14); box-shadow:0 6px 24px -12px rgba(var(--ice-rgb),.7); } @keyframes vcdFlow{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } /* Moving light sweep */ .vanta-cd::before{ content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent); transform:skewX(-18deg);animation:vcdSweep 6.5s ease-in-out infinite;pointer-events:none;z-index:2} @keyframes vcdSweep{0%{left:-45%}55%{left:130%}100%{left:130%}} /* Flickering white lights */ .vcd-stars{position:absolute;inset:0;pointer-events:none;z-index:1} .vcd-stars span{position:absolute;width:2.5px;height:2.5px;background:#fff;border-radius:50%;opacity:0; box-shadow:0 0 7px rgba(255,255,255,.9);animation:vcdTwinkle 3s infinite} .vcd-stars span:nth-child(1){top:22%;left:6%;animation-delay:0s;animation-duration:2.6s} .vcd-stars span:nth-child(2){top:64%;left:11%;animation-delay:.5s;animation-duration:3.1s} .vcd-stars span:nth-child(3){top:34%;left:22%;animation-delay:1.1s;animation-duration:2.4s} .vcd-stars span:nth-child(4){top:74%;left:31%;animation-delay:.3s;animation-duration:3.4s} .vcd-stars span:nth-child(5){top:18%;left:44%;animation-delay:1.6s;animation-duration:2.7s} .vcd-stars span:nth-child(6){top:58%;left:52%;animation-delay:.8s;animation-duration:3.0s} .vcd-stars span:nth-child(7){top:28%;left:63%;animation-delay:2.0s;animation-duration:2.5s} .vcd-stars span:nth-child(8){top:70%;left:71%;animation-delay:1.3s;animation-duration:3.3s} .vcd-stars span:nth-child(9){top:20%;left:82%;animation-delay:.6s;animation-duration:2.8s} .vcd-stars span:nth-child(10){top:62%;left:90%;animation-delay:1.9s;animation-duration:3.2s} .vcd-stars span:nth-child(11){top:44%;left:36%;animation-delay:2.4s;animation-duration:2.6s} .vcd-stars span:nth-child(12){top:48%;left:78%;animation-delay:1.0s;animation-duration:3.5s} @keyframes vcdTwinkle{0%,100%{opacity:0;transform:scale(.7)}50%{opacity:1;transform:scale(1.5)}} @media (prefers-reduced-motion: reduce){ .vanta-cd{animation:none;background-position:50% 50%} .vanta-cd::before{display:none} .vcd-stars span{animation:none;opacity:.5} } .vcd-inner{ position:relative;z-index:3;max-width:var(--maxw);margin:0 auto; display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap} .vcd-head{display:inline-flex;align-items:center;gap:7px;font-size:.6rem;font-weight:800; letter-spacing:.2em;text-transform:uppercase;color:#fff;opacity:.8} .vcd-head::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff; box-shadow:0 0 8px #fff;animation:vcdPulse 2s infinite} @keyframes vcdPulse{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}} .vcd-offer{font-size:1rem;font-weight:900;letter-spacing:.01em;color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.28)} .vcd-use{font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)} /* Code button — glowing white pill, links to shop */ .vcd-code{display:inline-flex;align-items:center;gap:6px;text-decoration:none; background:#fff;color:var(--ice-deep);border-radius:30px;padding:5px 15px; font-size:.8rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase; box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:vcdGlow 2.4s ease-in-out infinite; transition:transform .15s} .vcd-code:hover{transform:translateY(-1px) scale(1.04)} .vcd-code svg{color:var(--ice)} @keyframes vcdGlow{0%,100%{box-shadow:0 0 10px 0 rgba(255,255,255,.35)}50%{box-shadow:0 0 20px 3px rgba(255,255,255,.65)}} /* Timer — boxed digits */ .vcd-timer{display:inline-flex;align-items:center;gap:5px} .vcd-seg{display:inline-flex;align-items:baseline;gap:2px; background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22); border-radius:8px;padding:3px 8px;font-size:.62rem;font-weight:600; color:rgba(255,255,255,.8);letter-spacing:.02em;backdrop-filter:blur(4px)} .vcd-seg b{color:#fff;font-weight:900;font-size:.92rem;font-variant-numeric:tabular-nums;min-width:2ch; display:inline-block;text-align:center;text-shadow:0 1px 6px rgba(0,0,0,.3)} .vcd-timer.vcd-ended{background:none;border:none;padding:5px 8px; color:#fff;font-weight:800;font-size:.82rem;letter-spacing:.06em} /* Extra CTA button */ .vcd-btn{display:inline-flex;align-items:center;gap:6px;text-decoration:none; background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff; border-radius:30px;padding:5px 15px;font-size:.76rem;font-weight:800;letter-spacing:.03em; transition:background .2s,transform .15s;backdrop-filter:blur(4px)} .vcd-btn:hover{background:rgba(255,255,255,.26);transform:translateY(-1px)} .vcd-btn svg{transition:transform .2s} .vcd-btn:hover svg{transform:translateX(3px)} @media (max-width:680px){ .vcd-inner{gap:9px} .vcd-head{display:none} .vcd-offer{font-size:.9rem;flex-basis:100%;text-align:center} .vcd-btn{display:none} .vcd-seg{padding:2px 6px} } /* ─────────────────────────────────────────────────────────────── */ /* ── Safeguard: preformatted/code content must wrap, never force page overflow ── If a description is accidentally pasted as a code/preformatted block, it would otherwise render as one non-wrapping line and stretch the whole product layout past the viewport. These rules make such content wrap and stay within its box. */ pre, code, .wp-block-preformatted, .wp-block-code, .vpdp-desc pre, .entry-content pre { white-space: pre-wrap; /* wrap long lines instead of a single overflowing line */ overflow-wrap: anywhere; /* break unbreakable strings (long URLs, tokens) */ word-break: break-word; max-width: 100%; } /* Keep any child of the product summary/description within its container width. */ .vpdp-desc { overflow-wrap: anywhere; } .vpdp-desc > *, .vpdp-desc img, .vpdp-desc pre { max-width: 100%; } /* ─────────────────────────────────────────────────────────────── */ /* ── Hero CTA stack (Shop + Discord) ─────────────────────────── */ .vh-ctas{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:-10px; /* lifts the pair slightly so Discord sits in the old whitespace */ } .vh-ctas .btn{ min-width:250px; justify-content:center; } /* Discord button — brand blurple, matches the site's rounded pill CTAs */ .btn-discord{ display:inline-flex;align-items:center;justify-content:center;gap:9px; background:#5865F2;color:#fff;border:1px solid #5865F2; border-radius:999px;padding:15px 34px; font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.82rem; text-decoration:none; box-shadow:0 6px 22px -8px rgba(88,101,242,.85); transition:background .2s,transform .15s,box-shadow .2s; } .btn-discord:hover{ background:#4752C4;border-color:#4752C4; transform:translateY(-2px); box-shadow:0 10px 28px -8px rgba(88,101,242,.95); } .btn-discord:active{ transform:translateY(0); } .btn-discord svg{ flex:0 0 auto; } @media (max-width:640px){ .vh-ctas{ gap:10px; margin-top:-6px; } .vh-ctas .btn{ min-width:0; width:min(84vw,300px); } .btn-discord{ padding:13px 24px; font-size:.78rem; } } /* ─────────────────────────────────────────────────────────────── */ /* ── Post-Purchase Survey (shortcode: [vanta_survey]) ────────────── */ /* Center the page title + content on any page using the survey shortcode */ body.vanta-survey-page .entry-title, body.vanta-survey-page .page-title, body.vanta-survey-page h1{text-align:center} body.vanta-survey-page .entry-content, body.vanta-survey-page .page-content{margin-left:auto;margin-right:auto} .vanta-survey{max-width:560px;margin:0 auto 10px;padding:6px 20px;text-align:center;box-sizing:border-box} /* ── Card shell: animated gradient border + glow ── */ .vs-card{position:relative;overflow:hidden;border-radius:26px;padding:2px; background:linear-gradient(130deg,var(--ice,#1463E8),#6f9bff,var(--ice-deep,#0B47B0),var(--ice,#1463E8)); background-size:300% 300%;animation:vsBorderFlow 8s ease infinite; box-shadow:0 18px 50px -22px rgba(20,99,232,.75)} @keyframes vsBorderFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} .vs-inner{position:relative;z-index:2;background:#fff;border-radius:24px;padding:34px 28px 30px} /* Twinkling stars behind the card content */ .vs-stars{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:26px;overflow:hidden} .vs-stars span{position:absolute;width:3px;height:3px;background:#fff;border-radius:50%;opacity:0; box-shadow:0 0 7px rgba(255,255,255,.95);animation:vsTwinkle 3s infinite} .vs-stars span:nth-child(1){top:8%;left:7%;animation-delay:0s;animation-duration:2.7s} .vs-stars span:nth-child(2){top:16%;left:88%;animation-delay:.5s;animation-duration:3.2s} .vs-stars span:nth-child(3){top:52%;left:3%;animation-delay:1.1s;animation-duration:2.5s} .vs-stars span:nth-child(4){top:76%;left:94%;animation-delay:.3s;animation-duration:3.4s} .vs-stars span:nth-child(5){top:92%;left:12%;animation-delay:1.6s;animation-duration:2.8s} .vs-stars span:nth-child(6){top:5%;left:46%;animation-delay:.9s;animation-duration:3.0s} .vs-stars span:nth-child(7){top:95%;left:60%;animation-delay:2.0s;animation-duration:2.6s} .vs-stars span:nth-child(8){top:36%;left:97%;animation-delay:1.3s;animation-duration:3.3s} .vs-stars span:nth-child(9){top:64%;left:1%;animation-delay:.7s;animation-duration:2.9s} .vs-stars span:nth-child(10){top:24%;left:29%;animation-delay:2.3s;animation-duration:3.1s} @keyframes vsTwinkle{0%,100%{opacity:0;transform:scale(.7)}50%{opacity:1;transform:scale(1.5)}} /* ── Offer banner (full-width, top of card) ── */ .vs-banner{position:relative;overflow:hidden; margin:-34px -28px 20px;padding:13px 18px; border-radius:24px 24px 0 0; background:linear-gradient(100deg,var(--ice-deep,#0B47B0),var(--ice,#1463E8) 48%,#4f8bff 62%,var(--ice-deep,#0B47B0)); background-size:220% 100%;animation:vsBtnFlow 7s ease infinite; color:#fff;display:flex;align-items:center;justify-content:center;gap:9px; box-shadow:0 8px 22px -14px rgba(20,99,232,.95)} .vs-banner svg{flex:0 0 auto;opacity:.95;animation:vsGiftBob 2.8s ease-in-out infinite} @keyframes vsGiftBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(-6deg)}} .vs-banner-text{font-size:.88rem;font-weight:900;letter-spacing:.07em;line-height:1.2; text-shadow:0 1px 8px rgba(0,0,0,.22)} .vs-banner-text em{font-style:normal;opacity:.75;margin:0 2px;font-weight:800} .vs-banner-shine{position:absolute;top:0;bottom:0;left:-45%;width:40%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent); transform:skewX(-18deg);animation:vsShine 4.2s ease-in-out infinite;pointer-events:none} /* ── Locked pill ── */ .vs-lock{display:inline-flex;align-items:center;gap:7px;margin-bottom:14px; padding:6px 14px;border-radius:999px;background:var(--elev,#f3f7fc); border:1px solid var(--line,#e4ecf4);color:var(--mid,#6b7f95); font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase} .vs-lock svg{animation:vsLockWiggle 3.4s ease-in-out infinite;transform-origin:center} @keyframes vsLockWiggle{0%,88%,100%{transform:rotate(0)}91%{transform:rotate(-9deg)}95%{transform:rotate(9deg)}} .vs-card h2{margin:0 0 8px;font-size:1.45rem;font-weight:900;color:var(--hi,#0B2236);line-height:1.22} .vs-sub{margin:0 0 22px;color:var(--mid,#6b7f95);font-size:.93rem} /* ── Options ── */ .vs-options{display:flex;flex-direction:column;gap:10px;margin-bottom:22px;text-align:left} .vs-opt{position:relative;display:flex;align-items:center;gap:12px;padding:14px 16px; border:1.5px solid var(--line,#e4ecf4);border-radius:14px;background:#fff; cursor:pointer;overflow:hidden; transition:border-color .2s,background .2s,box-shadow .2s,transform .18s} .vs-opt:hover{border-color:#9dbcf5;transform:translateX(3px)} .vs-opt input{position:absolute;opacity:0;pointer-events:none} .vs-opt-dot{flex:0 0 auto;width:19px;height:19px;border-radius:50%; border:2px solid var(--line2,#d6e0ea);background:#fff;position:relative;transition:border-color .2s} .vs-opt-dot::after{content:"";position:absolute;inset:3px;border-radius:50%; background:var(--ice,#1463E8);transform:scale(0);transition:transform .22s cubic-bezier(.34,1.56,.64,1)} .vs-opt-label{font-weight:700;color:var(--hi,#0B2236);font-size:.95rem} .vs-opt:has(input:checked){border-color:var(--ice,#1463E8);background:#f2f7ff; box-shadow:0 6px 18px -10px rgba(20,99,232,.85)} .vs-opt:has(input:checked) .vs-opt-dot{border-color:var(--ice,#1463E8)} .vs-opt:has(input:checked) .vs-opt-dot::after{transform:scale(1)} /* ── Submit button (shimmering) ── */ .vs-submit{position:relative;overflow:hidden;width:100%; display:inline-flex;align-items:center;justify-content:center;gap:9px; background:linear-gradient(100deg,var(--ice-deep,#0B47B0),var(--ice,#1463E8),var(--ice-deep,#0B47B0)); background-size:200% 100%;animation:vsBtnFlow 5s ease infinite; color:#fff;border:none;border-radius:999px;padding:16px 26px;cursor:pointer; font-size:.92rem;font-weight:800;letter-spacing:.05em; box-shadow:0 12px 30px -12px rgba(20,99,232,.95); transition:transform .16s,box-shadow .2s,opacity .2s} @keyframes vsBtnFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} .vs-submit::after{content:"";position:absolute;top:0;bottom:0;left:-45%;width:38%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent); transform:skewX(-18deg);animation:vsShine 3.6s ease-in-out infinite} @keyframes vsShine{0%{left:-45%}55%{left:130%}100%{left:130%}} .vs-submit:hover{transform:translateY(-2px);box-shadow:0 16px 36px -12px rgba(20,99,232,1)} .vs-submit:active{transform:translateY(0)} .vs-submit[disabled]{opacity:.72;cursor:default;transform:none} .vs-submit.is-loading::after{animation-duration:1.1s} .vs-err{margin:14px 0 0;color:#d64545;font-size:.85rem;font-weight:700} /* Shake when submitting with nothing selected */ .vs-shake{animation:vsShake .42s cubic-bezier(.36,.07,.19,.97)} @keyframes vsShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)} 30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}} /* Form exit */ .vs-card.is-opening{animation:vsOpenOut .42s ease forwards} @keyframes vsOpenOut{to{opacity:0;transform:scale(.94) translateY(-8px)}} /* ── Reveal panel ── */ .vs-reveal{opacity:0;transform:scale(.9)} .vs-reveal.is-in{animation:vsPop .55s cubic-bezier(.34,1.56,.64,1) forwards} @keyframes vsPop{to{opacity:1;transform:scale(1)}} .vs-reveal .vs-inner{background:linear-gradient(170deg,#fff 0%,#f4f8ff 100%)} /* Radiating rays behind the unlock icon */ .vs-rays{position:absolute;top:-40px;left:50%;width:340px;height:340px; transform:translateX(-50%);z-index:1;pointer-events:none;opacity:.5; background:conic-gradient(from 0deg,transparent 0deg,rgba(20,99,232,.16) 12deg,transparent 24deg, transparent 36deg,rgba(20,99,232,.16) 48deg,transparent 60deg, transparent 72deg,rgba(20,99,232,.16) 84deg,transparent 96deg, transparent 108deg,rgba(20,99,232,.16) 120deg,transparent 132deg, transparent 144deg,rgba(20,99,232,.16) 156deg,transparent 168deg, transparent 180deg,rgba(20,99,232,.16) 192deg,transparent 204deg, transparent 216deg,rgba(20,99,232,.16) 228deg,transparent 240deg, transparent 252deg,rgba(20,99,232,.16) 264deg,transparent 276deg, transparent 288deg,rgba(20,99,232,.16) 300deg,transparent 312deg, transparent 324deg,rgba(20,99,232,.16) 336deg,transparent 348deg); animation:vsSpin 22s linear infinite} @keyframes vsSpin{to{transform:translateX(-50%) rotate(360deg)}} .vs-unlocked{width:64px;height:64px;margin:0 auto 12px;border-radius:50%; background:linear-gradient(140deg,var(--ice,#1463E8),var(--ice-deep,#0B47B0));color:#fff; display:flex;align-items:center;justify-content:center; box-shadow:0 12px 30px -10px rgba(20,99,232,.9),0 0 0 8px rgba(20,99,232,.1); animation:vsUnlockPop .6s cubic-bezier(.34,1.56,.64,1) .1s both} @keyframes vsUnlockPop{from{transform:scale(0) rotate(-25deg)}to{transform:scale(1) rotate(0)}} .vs-unlocked-tag{display:inline-block;margin-bottom:8px; font-size:.66rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--ice,#1463E8)} .vs-big{font-size:2.5rem!important;letter-spacing:-.02em;margin:0 0 6px!important; background:linear-gradient(120deg,var(--ice,#1463E8),#5b8dff,var(--ice-deep,#0B47B0)); background-size:200% auto;-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;animation:vsBtnFlow 4s ease infinite} /* "+ FREE Research Water" line under the big 25% */ .vs-plus{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 14px} .vs-plus::before,.vs-plus::after{content:"";height:1px;flex:1;max-width:46px; background:linear-gradient(90deg,transparent,var(--line2,#d6e0ea),transparent)} .vs-plus span{font-size:.86rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase; color:var(--hi,#0B2236);white-space:nowrap} /* Code chip */ .vs-code{position:relative;display:inline-flex;align-items:center;gap:10px;margin:8px 0 4px; background:var(--hi,#0B2236);color:#fff;border:2px dashed rgba(255,255,255,.34); border-radius:14px;padding:14px 26px;cursor:pointer; font-size:1.15rem;font-weight:900;letter-spacing:.14em; box-shadow:0 12px 30px -12px rgba(11,34,54,.9);transition:transform .16s,background .2s} .vs-code:hover{background:var(--ice-deep,#0B47B0);transform:translateY(-2px)} .vs-code em{display:none;font-style:normal;position:absolute;top:-32px;left:50%;transform:translateX(-50%); background:var(--ice,#1463E8);color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.04em; padding:5px 12px;border-radius:9px;white-space:nowrap;box-shadow:0 6px 16px -6px rgba(20,99,232,.9)} .vs-code.is-copied em{display:block;animation:vsPop .3s ease} .vs-shop{display:inline-flex;align-items:center;gap:7px;margin:16px 0 0; color:var(--ice,#1463E8);font-weight:800;font-size:.92rem;text-decoration:none; transition:gap .18s} .vs-shop:hover{gap:11px} .vs-note{margin:12px 0 0;font-size:.78rem;color:var(--mid,#6b7f95)} @media (max-width:480px){ .vanta-survey{padding:6px 16px} .vs-inner{padding:30px 20px 26px;border-radius:20px} .vs-card{border-radius:22px} .vs-card h2{font-size:1.22rem} .vs-big{font-size:2.1rem!important} .vs-banner{margin:-30px -20px 18px;padding:12px 14px;gap:7px;border-radius:20px 20px 0 0} .vs-banner-text{font-size:.76rem;letter-spacing:.05em} .vs-plus span{font-size:.78rem} .vs-code{font-size:1rem;padding:13px 20px;letter-spacing:.1em} } @media (prefers-reduced-motion: reduce){ .vs-card,.vs-submit,.vs-banner,.vs-banner svg,.vs-rays,.vs-big,.vs-stars span,.vs-lock svg{animation:none!important} .vs-submit::after,.vs-banner-shine{display:none} .vs-reveal{opacity:1;transform:none} } /* ─────────────────────────────────────────────────────────────── */ /* ── Promo Popup ─────────────────────────────────────────────── */ .vpromo{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px} .vpromo[hidden]{display:none} .vpromo-veil{position:absolute;inset:0;background:rgba(11,34,54,.62);backdrop-filter:blur(3px); opacity:0;transition:opacity .26s} .vpromo.is-open .vpromo-veil{opacity:1} .vpromo-box{position:relative;z-index:2;width:100%;max-width:440px; border-radius:26px;padding:2px;overflow:hidden; background:linear-gradient(130deg,var(--ice,#1463E8),#6f9bff,var(--ice-deep,#0B47B0),var(--ice,#1463E8)); background-size:300% 300%;animation:vsBorderFlow 8s ease infinite; box-shadow:0 30px 70px -20px rgba(11,34,54,.7); opacity:0;transform:translateY(18px) scale(.96);transition:opacity .3s,transform .34s cubic-bezier(.34,1.4,.64,1)} .vpromo.is-open .vpromo-box{opacity:1;transform:translateY(0) scale(1)} .vpromo-in{position:relative;z-index:2;background:#fff;border-radius:24px;padding:36px 30px 26px;text-align:center} .vpromo-stars{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:26px;overflow:hidden} .vpromo-stars span{position:absolute;width:3px;height:3px;background:#fff;border-radius:50%;opacity:0; box-shadow:0 0 7px rgba(255,255,255,.95);animation:vsTwinkle 3s infinite} .vpromo-stars span:nth-child(1){top:6%;left:9%;animation-delay:0s} .vpromo-stars span:nth-child(2){top:14%;left:90%;animation-delay:.6s} .vpromo-stars span:nth-child(3){top:88%;left:6%;animation-delay:1.2s} .vpromo-stars span:nth-child(4){top:94%;left:86%;animation-delay:.4s} .vpromo-stars span:nth-child(5){top:46%;left:2%;animation-delay:1.8s} .vpromo-stars span:nth-child(6){top:58%;left:97%;animation-delay:.9s} .vpromo-stars span:nth-child(7){top:3%;left:52%;animation-delay:2.2s} .vpromo-stars span:nth-child(8){top:97%;left:44%;animation-delay:1.5s} .vpromo-x{position:absolute;top:12px;right:12px;z-index:5;width:32px;height:32px;border-radius:50%; border:none;background:rgba(255,255,255,.9);color:var(--hi,#0B2236);cursor:pointer; display:flex;align-items:center;justify-content:center; box-shadow:0 3px 10px -3px rgba(11,34,54,.4);transition:background .18s,transform .18s} .vpromo-x:hover{background:#fff;transform:rotate(90deg)} .vpromo-eyebrow{display:inline-block;margin-bottom:10px;padding:5px 14px;border-radius:999px; background:var(--elev,#f3f7fc);border:1px solid var(--line,#e4ecf4); font-size:.64rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--ice,#1463E8)} .vpromo-box h2{margin:0 0 10px;font-size:1.6rem;line-height:1.2;font-weight:900;letter-spacing:-.01em; background:linear-gradient(120deg,var(--ice,#1463E8),#5b8dff,var(--ice-deep,#0B47B0)); background-size:200% auto;-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;animation:vsBtnFlow 5s ease infinite} .vpromo-sub{margin:0 0 20px;font-size:.92rem;line-height:1.55;color:var(--mid,#6b7f95)} .vpromo-code{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 20px} .vpromo-code-lbl{font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mid,#6b7f95)} .vpromo-code-btn{position:relative;background:var(--hi,#0B2236);color:#fff;border:2px dashed rgba(255,255,255,.34); border-radius:12px;padding:11px 22px;cursor:pointer; font-size:1rem;font-weight:900;letter-spacing:.13em; box-shadow:0 10px 26px -12px rgba(11,34,54,.9);transition:background .2s,transform .16s} .vpromo-code-btn:hover{background:var(--ice-deep,#0B47B0);transform:translateY(-2px)} .vpromo-code-btn em{display:none;font-style:normal;position:absolute;top:-30px;left:50%;transform:translateX(-50%); background:var(--ice,#1463E8);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.03em; padding:4px 11px;border-radius:8px;white-space:nowrap} .vpromo-code-btn.is-copied em{display:block} .vpromo-cta{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:8px; background:linear-gradient(100deg,var(--ice-deep,#0B47B0),var(--ice,#1463E8),var(--ice-deep,#0B47B0)); background-size:200% 100%;animation:vsBtnFlow 5s ease infinite; color:#fff;border-radius:999px;padding:15px 26px;text-decoration:none; font-size:.9rem;font-weight:800;letter-spacing:.04em; box-shadow:0 12px 30px -12px rgba(20,99,232,.95);transition:transform .16s} .vpromo-cta::after{content:"";position:absolute;top:0;bottom:0;left:-45%;width:38%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent); transform:skewX(-18deg);animation:vsShine 3.8s ease-in-out infinite} .vpromo-cta:hover{transform:translateY(-2px)} .vpromo-no{display:block;width:100%;margin:12px 0 0;background:none;border:none;cursor:pointer; font-size:.8rem;font-weight:700;color:var(--mid,#6b7f95);text-decoration:underline;padding:6px} .vpromo-no:hover{color:var(--hi,#0B2236)} .vpromo-fine{margin:14px 0 0;font-size:.7rem;line-height:1.5;color:var(--mid,#6b7f95);opacity:.85} @media (max-width:480px){ .vpromo{padding:16px} .vpromo-in{padding:32px 22px 22px;border-radius:20px} .vpromo-box{border-radius:22px} .vpromo-box h2{font-size:1.35rem} .vpromo-sub{font-size:.86rem} } @media (prefers-reduced-motion: reduce){ .vpromo-box,.vpromo-cta,.vpromo-box h2,.vpromo-stars span{animation:none!important} .vpromo-cta::after{display:none} .vpromo-box{transition:opacity .2s} } /* ─────────────────────────────────────────────────────────────── */ /* ── Free Gift Picker ([vanta_free_gift]) ────────────────────── */ .vgift{margin:18px 0;padding:20px 22px;border-radius:18px; background:linear-gradient(150deg,#f2f7ff,#eaf1fe); border:1.5px solid #cfe0fb;box-shadow:0 10px 28px -18px rgba(20,99,232,.7)} .vgift-ico{font-size:1.15rem;line-height:1} .vgift-head{display:flex;align-items:center;gap:9px;margin-bottom:6px} .vgift-head strong{font-size:1.02rem;font-weight:900;color:var(--hi,#0B2236)} .vgift-sub{margin:0 0 16px;font-size:.86rem;line-height:1.5;color:var(--mid,#6b7f95)} .vgift-row{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap} .vgift-lbl{flex:0 0 auto;min-width:112px;font-size:.78rem;font-weight:800; letter-spacing:.05em;text-transform:uppercase;color:var(--ice,#1463E8)} .vgift-select{flex:1 1 200px;padding:11px 14px;border-radius:11px; border:1.5px solid #cfe0fb;background:#fff;color:var(--hi,#0B2236); font-size:.92rem;font-weight:600;cursor:pointer; transition:border-color .18s,box-shadow .18s} .vgift-select:focus{outline:none;border-color:var(--ice,#1463E8); box-shadow:0 0 0 3px rgba(20,99,232,.16)} .vgift-status{margin:10px 0 0;font-size:.8rem;font-weight:700;color:var(--ice,#1463E8);min-height:1.2em} .vgift-fine{margin:10px 0 0;font-size:.72rem;line-height:1.5;color:var(--mid,#6b7f95);opacity:.9} /* Progress state (not yet earned) */ .vgift-progress{display:flex;align-items:center;gap:9px; font-size:.88rem;font-weight:700;color:var(--hi,#0B2236); background:var(--elev,#f3f7fc);border-color:var(--line,#e4ecf4);box-shadow:none} @media (max-width:520px){ .vgift{padding:18px 16px;border-radius:15px} .vgift-lbl{min-width:0;flex:1 1 100%} .vgift-select{flex:1 1 100%} } /* ─────────────────────────────────────────────────────────────── */ /* ── Free Gift: upsell nudge + placement under the shipping bar ── */ .vgift-mount{margin:0} .vgift-mount .vgift{margin-top:14px} .vgift-upsell{display:flex;align-items:center;gap:9px;margin:14px 0 0; padding:11px 14px;border-radius:12px; background:#fff;border:1.5px dashed #cfe0fb; font-size:.86rem;font-weight:700;line-height:1.4;color:var(--hi,#0B2236)} .vgift-up-ico{font-size:1rem;line-height:1;flex:0 0 auto} /* "One away" gets urgency: solid accent border + soft pulse */ .vgift-upsell.is-close{ border-style:solid;border-color:var(--ice,#1463E8); background:linear-gradient(100deg,#eef5ff,#ffffff); box-shadow:0 0 0 0 rgba(20,99,232,.5); animation:vgiftPulse 2.4s ease-in-out infinite} @keyframes vgiftPulse{ 0%,100%{box-shadow:0 0 0 0 rgba(20,99,232,.34)} 50%{box-shadow:0 0 0 7px rgba(20,99,232,0)}} /* Progress state also sits nicely under the shipping bar */ .vgift-progress{margin-top:14px} @media (prefers-reduced-motion: reduce){ .vgift-upsell.is-close{animation:none} } @media (max-width:520px){ .vgift-upsell{font-size:.8rem;padding:10px 12px} } /* ─────────────────────────────────────────────────────────────── */ /* ── Free Research Water notice (THANKYOU25) ───────────── */ .vgift-bacwater{ background:linear-gradient(150deg,#eefaf4,#e6f6ef); border-color:#bfe6d4; box-shadow:0 10px 28px -18px rgba(26,127,55,.55)} .vgift-bacwater .vgift-head strong{color:#12603a} .vgift-bacwater .vgift-sub{color:#3f6b57} .vgift-bacwater .vgift-fine{color:#4a7a63} /* ─────────────────────────────────────────────────────────────── */ /* ── Subscribe & Save discount explainer ─────────────────────── */ .vgift-subnote{display:flex;align-items:flex-start;gap:8px; margin:10px 0 0;padding:11px 14px;border-radius:11px; background:var(--elev,#f3f7fc);border:1px solid var(--line,#e4ecf4); font-size:.78rem;line-height:1.5;color:var(--mid,#6b7f95)} .vgift-subnote-ico{flex:0 0 auto;font-size:.9rem;line-height:1.35;color:var(--ice,#1463E8);font-weight:900} @media (max-width:520px){.vgift-subnote{font-size:.74rem;padding:10px 12px}} /* ─────────────────────────────────────────────────────────────── */ /* ── Cash App / Zelle payment method ─────────────────────────── */ .vp2p-fields{margin-top:8px;padding:14px 16px;border-radius:12px; background:var(--elev,#f3f7fc);border:1px solid var(--line,#e4ecf4)} .vp2p-row{margin-bottom:6px;font-size:.9rem;color:var(--hi,#0B2236)} .vp2p-row code{background:#fff;border:1px solid var(--line,#e4ecf4);border-radius:6px; padding:2px 8px;font-weight:700;color:var(--ice,#1463E8)} .vp2p-instr{margin:10px 0 0;font-size:.82rem;color:var(--mid,#6b7f95)} .vp2p-note{margin:8px 0 0;font-size:.76rem;color:var(--mid,#6b7f95);font-style:italic} .vp2p-thankyou{margin:20px 0;padding:22px 24px;border-radius:16px; background:linear-gradient(150deg,#fff7e6,#fef3d9);border:1.5px solid #f0d999} .vp2p-thankyou h3{margin:0 0 8px;font-size:1.1rem;font-weight:900;color:var(--hi,#0B2236)} .vp2p-thankyou p{margin:0 0 10px;font-size:.9rem;color:#6b5a2e} .vp2p-ref{background:#fff;border-radius:10px;padding:12px 16px;margin:12px 0!important; border:1.5px dashed #d9a441} .vp2p-ref span{display:block;font-size:.72rem;font-weight:700;letter-spacing:.04em; text-transform:uppercase;color:#8a7238;margin-bottom:4px} .vp2p-ref strong{font-size:1.15rem;letter-spacing:.08em;color:var(--hi,#0B2236)} .vp2p-status{font-size:.82rem!important;color:#8a7238!important} /* ─────────────────────────────────────────────────────────────── */ /* ── Checkout Login / Sign-up page ───────────────────────────── */ .vlogin{max-width:460px;margin:0 auto;padding:0 0 40px} .vlogin-pane{display:none} .vlogin[data-mode="login"] .vlogin-pane[data-pane="login"], .vlogin[data-mode="register"] .vlogin-pane[data-pane="register"]{display:block} .vlogin-title{margin:0 0 26px;font-size:2.5rem;font-weight:800;letter-spacing:-.02em; color:#111;line-height:1.1} .vlogin-sub{margin:-16px 0 24px;font-size:.92rem;color:var(--mid,#6b7f95);line-height:1.5} .vlogin-error{margin:0 0 18px;padding:12px 15px;border-radius:10px; background:#fdecec;border:1px solid #f5c2c2;color:#b32d2e; font-size:.88rem;font-weight:600;line-height:1.45} .vlogin-label{display:block;margin:0 0 8px;font-size:1rem;font-weight:500;color:#333} .vlogin-input{width:100%;box-sizing:border-box; padding:17px 18px;margin:0 0 22px; border:1px solid #e2e6ea;border-radius:12px;background:#fff; font-size:1rem;color:#111; transition:border-color .18s,box-shadow .18s} .vlogin-input::placeholder{color:#9aa4ae} .vlogin-input:focus{outline:none;border-color:var(--ice,#1463E8); box-shadow:0 0 0 3px rgba(20,99,232,.13)} .vlogin-pwrap{position:relative} .vlogin-pwrap .vlogin-input{padding-right:52px} .vlogin-eye{position:absolute;top:17px;right:14px; background:none;border:none;padding:0;cursor:pointer;color:#8a949e; display:flex;align-items:center;justify-content:center;transition:color .18s} .vlogin-eye:hover,.vlogin-eye.is-on{color:var(--ice,#1463E8)} .vlogin-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 26px} .vlogin-check{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none} .vlogin-check input{position:absolute;opacity:0;pointer-events:none} .vlogin-box{width:24px;height:24px;border-radius:7px;border:2px solid #d6dde4;background:#fff; display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto; transition:background .18s,border-color .18s} .vlogin-box svg{opacity:0;transition:opacity .15s} .vlogin-check input:checked + .vlogin-box{background:var(--ice,#1463E8);border-color:var(--ice,#1463E8)} .vlogin-check input:checked + .vlogin-box svg{opacity:1} .vlogin-check-lbl{font-size:1rem;color:#333} .vlogin-forgot{font-size:1rem;color:var(--ice,#1463E8);text-decoration:none;font-weight:500;white-space:nowrap} .vlogin-forgot:hover{text-decoration:underline} .vlogin-btn{width:100%;padding:19px 24px;border:none;border-radius:999px;cursor:pointer; background:linear-gradient(180deg,#2c5cc5,#2450b4);color:#fff; font-size:1.1rem;font-weight:700;letter-spacing:.01em; box-shadow:0 10px 26px -12px rgba(36,80,180,.9); transition:transform .15s,box-shadow .2s,filter .2s} .vlogin-btn:hover{transform:translateY(-1px);filter:brightness(1.06)} .vlogin-btn:active{transform:translateY(0)} .vlogin-or{display:flex;align-items:center;gap:16px;margin:30px 0} .vlogin-or::before,.vlogin-or::after{content:"";flex:1;height:1px;background:#e2e6ea} .vlogin-or span{font-size:1rem;color:#8a949e} .vlogin-social{display:flex;flex-direction:column;gap:14px} .vlogin-social a,.vlogin-social .nsl-button{width:100%!important;border-radius:999px!important} .vlogin-alt{margin:34px 0 0;font-size:1rem;color:#333;text-align:left} .vlogin-alt a{color:var(--ice,#1463E8);font-weight:600;text-decoration:none} .vlogin-alt a:hover{text-decoration:underline} @media (max-width:480px){ .vlogin{padding:30px 20px 48px} .vlogin-title{font-size:2.1rem;margin-bottom:22px} } /* ─────────────────────────────────────────────────────────────── */ /* ── Slide-out Cart Drawer ───────────────────────────────────── */ body.vcd-lock{overflow:hidden} .vcart-drawer{position:fixed;inset:0;z-index:100000;visibility:hidden;pointer-events:none} .vcart-drawer.is-open{visibility:visible;pointer-events:auto} .vcd-veil{position:absolute;inset:0;background:rgba(11,34,54,.45);opacity:0;transition:opacity .3s} .vcart-drawer.is-open .vcd-veil{opacity:1} .vcd-panel{position:absolute;top:0;right:0;bottom:0;width:min(430px,100%); background:#fff;display:flex;flex-direction:column; transform:translateX(100%);transition:transform .34s cubic-bezier(.32,.72,0,1); box-shadow:-8px 0 40px -12px rgba(11,34,54,.4)} .vcart-drawer.is-open .vcd-panel{transform:translateX(0)} .vcd-head{display:flex;align-items:center;justify-content:space-between; padding:20px 22px;border-bottom:1px solid #eceff3;flex:0 0 auto} .vcd-head h2{margin:0;font-size:1.5rem;font-weight:800;color:#111;letter-spacing:-.01em} .vcd-close{background:none;border:none;padding:4px;cursor:pointer;color:#111; display:flex;transition:transform .18s,opacity .18s} .vcd-close:hover{transform:rotate(90deg);opacity:.6} .vcd-body{flex:1 1 auto;display:flex;flex-direction:column;min-height:0} .vcd-scroll{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch} .vcd-foot{flex:0 0 auto;border-top:1px solid #eceff3;padding:16px 20px 20px;background:#fff} /* Loading dots */ .vcd-loading{display:flex;align-items:center;justify-content:center;gap:7px;padding:60px 0} .vcd-loading span{width:9px;height:9px;border-radius:50%;background:var(--ice,#1463E8);opacity:.35; animation:vcdBounce 1.1s infinite} .vcd-loading span:nth-child(2){animation-delay:.15s} .vcd-loading span:nth-child(3){animation-delay:.3s} @keyframes vcdBounce{0%,80%,100%{transform:scale(.7);opacity:.3}40%{transform:scale(1);opacity:1}} /* Free shipping progress */ .vcd-ship{padding:16px 20px;border-bottom:1px solid #eceff3} .vcd-ship-txt{display:flex;align-items:center;gap:9px;font-size:.95rem;color:#333;margin-bottom:10px} .vcd-ship-txt svg{color:var(--ice,#1463E8);flex:0 0 auto} .vcd-ship-txt strong{color:var(--ice,#1463E8);font-weight:700} .vcd-ship-txt .is-done strong{color:#1a7f37} .vcd-ship-txt .amount{color:inherit} .vcd-ship-track{height:9px;border-radius:99px;background:#e8edf3;overflow:hidden} .vcd-ship-track span{display:block;height:100%;border-radius:99px; background:linear-gradient(90deg,var(--ice-deep,#0B47B0),var(--ice,#1463E8)); transition:width .4s ease} /* Items */ .vcd-items{padding:16px 20px;display:flex;flex-direction:column;gap:14px} .vcd-item{display:flex;gap:14px;padding:14px;border:1px solid #eceff3;border-radius:16px;background:#fff} .vcd-item-img{flex:0 0 74px;width:74px;height:74px;border-radius:12px;overflow:hidden;background:#f5f8fc} .vcd-item-img img{width:100%;height:100%;object-fit:contain;display:block} .vcd-item-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column} .vcd-item-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .vcd-item-name{font-size:1.02rem;font-weight:800;color:#111;line-height:1.25} .vcd-remove{background:none;border:none;padding:0;cursor:pointer;color:#9aa4ae;flex:0 0 auto; display:flex;transition:color .18s} .vcd-remove:hover{color:#b32d2e} .vcd-badge{align-self:flex-start;margin-top:6px;padding:3px 10px;border-radius:7px; background:#eaf1fe;color:var(--ice-deep,#0B47B0);font-size:.78rem;font-weight:700} .vcd-item-bot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:10px} .vcd-qty{display:inline-flex;align-items:center;gap:4px;border:1px solid #e2e6ea;border-radius:99px;padding:3px} .vcd-q{width:30px;height:30px;border:none;background:none;cursor:pointer;border-radius:50%; font-size:1.1rem;font-weight:700;color:#333;line-height:1; display:flex;align-items:center;justify-content:center;transition:background .18s} .vcd-q:hover{background:#f0f4f9} .vcd-qn{min-width:22px;text-align:center;font-weight:700;font-size:.95rem;color:#111} .vcd-item-price{text-align:right;white-space:nowrap} .vcd-was{color:#9aa4ae;text-decoration:line-through;font-size:.88rem} .vcd-now{font-weight:800;font-size:1.05rem;color:#111} /* Empty */ .vcd-empty{padding:70px 24px;text-align:center;color:#9aa4ae} .vcd-empty svg{color:#c8d2dc;margin-bottom:14px} .vcd-empty p{margin:0 0 16px;font-size:1rem} .vcd-shop-link{display:inline-block;padding:12px 26px;border-radius:99px; background:var(--ice,#1463E8);color:#fff;text-decoration:none;font-weight:700;font-size:.92rem} /* Recommended add-on */ .vcd-rec{display:flex;gap:13px;align-items:center;padding:13px;margin-bottom:14px; border-radius:14px;background:#f5f8fc;border:1px solid #e6edf5} .vcd-rec-img{flex:0 0 58px;width:58px;height:58px;border-radius:10px;overflow:hidden;background:#fff} .vcd-rec-img img{width:100%;height:100%;object-fit:contain;display:block} .vcd-rec-main{flex:1 1 auto;min-width:0} .vcd-rec-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px} .vcd-rec-name{font-size:.98rem;font-weight:800;color:#111} .vcd-rec-tag{flex:0 0 auto;padding:4px 11px;border-radius:99px;background:#e4ecf8; color:#4a5b6d;font-size:.72rem;font-weight:700} .vcd-rec-bot{display:flex;align-items:center;justify-content:space-between;gap:10px} .vcd-rec-price{font-weight:800;color:#111;font-size:1rem} .vcd-rec-price del{color:#9aa4ae;font-weight:500;font-size:.85rem} .vcd-rec-add{display:inline-flex;align-items:center;gap:6px;padding:9px 20px;border-radius:99px; background:#111;color:#fff;border:none;cursor:pointer;font-size:.92rem;font-weight:700; transition:background .18s,transform .15s} .vcd-rec-add:hover{background:#2a2a2a;transform:translateY(-1px)} .vcd-rec-add span{font-size:1.05rem;line-height:1} /* Promo */ .vcd-promo{display:flex;gap:0;margin-bottom:4px} .vcd-promo-in{flex:1 1 auto;min-width:0;padding:14px 16px;border:1px solid #e2e6ea; border-radius:12px 0 0 12px;border-right:none;font-size:.98rem;color:#111;background:#fff} .vcd-promo-in::placeholder{color:#9aa4ae} .vcd-promo-in:focus{outline:none;border-color:var(--ice,#1463E8)} .vcd-promo-btn{flex:0 0 auto;padding:14px 26px;border:none;border-radius:0 12px 12px 0;cursor:pointer; background:var(--ice-deep,#2450b4);color:#fff;font-size:.98rem;font-weight:700;transition:filter .18s} .vcd-promo-btn:hover{filter:brightness(1.1)} .vcd-promo-msg{margin:8px 0 0;font-size:.84rem;font-weight:600;min-height:1em} .vcd-promo-msg.is-ok{color:#1a7f37} .vcd-promo-msg.is-err{color:#b32d2e} .vcd-coupons{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 0} .vcd-coupon{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:99px; background:#eaf1fe;color:var(--ice-deep,#0B47B0);font-size:.8rem;font-weight:800;letter-spacing:.04em} .vcd-coupon-x{background:none;border:none;padding:0;cursor:pointer;color:inherit;font-size:1.05rem;line-height:1;opacity:.6} .vcd-coupon-x:hover{opacity:1} /* Totals */ .vcd-totals{margin:16px 0 0;padding-top:14px;border-top:1px solid #eceff3} .vcd-trow{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:5px 0;font-size:1rem;color:#333} .vcd-trow.is-save{color:var(--ice,#1463E8);font-weight:600} .vcd-trow.is-total{margin-top:8px;padding-top:12px;border-top:1px solid #eceff3; font-size:1.2rem;font-weight:800;color:#111} .vcd-checkout{display:flex;align-items:center;justify-content:center;gap:9px; margin:16px 0 0;padding:18px 24px;border-radius:99px;text-decoration:none; background:linear-gradient(180deg,#2c5cc5,#2450b4);color:#fff; font-size:1.08rem;font-weight:700; box-shadow:0 10px 26px -12px rgba(36,80,180,.9);transition:transform .15s,filter .2s} .vcd-checkout:hover{transform:translateY(-1px);filter:brightness(1.06)} .vcd-secure{display:flex;align-items:center;justify-content:center;gap:7px; margin:12px 0 0;font-size:.84rem;color:#8a949e} @media (max-width:480px){ .vcd-panel{width:100%} .vcd-head{padding:18px 18px} .vcd-head h2{font-size:1.35rem} .vcd-items,.vcd-ship{padding-left:16px;padding-right:16px} .vcd-foot{padding:14px 16px 18px} } @media (prefers-reduced-motion: reduce){ .vcd-panel{transition:none} .vcd-veil{transition:none} } /* ─────────────────────────────────────────────────────────────── */ /* ── Cart Drawer: tightened sizing (overrides the block above) ── */ .vcd-head{padding:15px 18px} .vcd-head h2{font-size:1.12rem;letter-spacing:.01em} .vcd-close svg{width:20px;height:20px} .vcd-ship{padding:12px 18px} .vcd-ship-txt{font-size:.84rem;margin-bottom:8px;gap:8px} .vcd-ship-txt svg{width:16px;height:16px} .vcd-ship-track{height:6px} .vcd-items{padding:12px 18px;gap:10px} .vcd-item{padding:10px;gap:11px;border-radius:13px} .vcd-item-img{flex:0 0 58px;width:58px;height:58px;border-radius:10px} .vcd-item-name{font-size:.9rem;font-weight:700;line-height:1.3} .vcd-remove svg{width:15px;height:15px} .vcd-badge{margin-top:4px;padding:2px 8px;border-radius:6px;font-size:.7rem} .vcd-item-bot{padding-top:8px;gap:8px} .vcd-qty{padding:2px} .vcd-q{width:25px;height:25px;font-size:.95rem} .vcd-qn{min-width:18px;font-size:.85rem} .vcd-was{font-size:.76rem} .vcd-now{font-size:.92rem} .vcd-foot{padding:12px 18px 16px} .vcd-rec{padding:10px;margin-bottom:10px;gap:10px;border-radius:12px} .vcd-rec-img{flex:0 0 46px;width:46px;height:46px;border-radius:8px} .vcd-rec-name{font-size:.86rem} .vcd-rec-tag{padding:3px 9px;font-size:.66rem} .vcd-rec-top{margin-bottom:4px} .vcd-rec-price{font-size:.88rem} .vcd-rec-add{padding:7px 16px;font-size:.82rem} .vcd-promo-in{padding:11px 14px;font-size:.88rem;border-radius:10px 0 0 10px} .vcd-promo-btn{padding:11px 20px;font-size:.88rem;border-radius:0 10px 10px 0} .vcd-promo-msg{font-size:.78rem} .vcd-coupon{padding:4px 10px;font-size:.74rem} .vcd-totals{margin-top:12px;padding-top:11px} .vcd-trow{padding:4px 0;font-size:.88rem} .vcd-trow.is-total{margin-top:6px;padding-top:9px;font-size:1.02rem} .vcd-checkout{margin-top:12px;padding:14px 22px;font-size:.98rem} .vcd-checkout svg{width:15px;height:15px} .vcd-secure{margin-top:9px;font-size:.76rem} /* Gift picker inside the drawer — compact variant */ .vcd-gift{margin:0 0 10px} .vcd-gift .vgift{margin:0 0 8px;padding:12px 13px;border-radius:12px} .vcd-gift .vgift-head strong{font-size:.86rem} .vcd-gift .vgift-sub{font-size:.75rem;margin-bottom:10px;line-height:1.45} .vcd-gift .vgift-row{gap:7px;margin-bottom:7px} .vcd-gift .vgift-lbl{min-width:0;flex:1 1 100%;font-size:.68rem} .vcd-gift .vgift-select{flex:1 1 100%;padding:9px 11px;font-size:.84rem;border-radius:9px} .vcd-gift .vgift-status{font-size:.74rem;margin-top:7px} .vcd-gift .vgift-fine,.vcd-gift .vgift-subnote{font-size:.68rem;margin-top:7px;padding:8px 10px} .vcd-gift .vgift-upsell{font-size:.76rem;padding:9px 11px;margin-top:9px} .vcd-gift .vgift-progress{font-size:.78rem;padding:11px 13px} @media (max-width:480px){ .vcd-items,.vcd-ship{padding-left:14px;padding-right:14px} .vcd-foot{padding:11px 14px 15px} .vcd-head{padding:13px 14px} } /* ─────────────────────────────────────────────────────────────── */ /* ── Cart Drawer: keep the item list visible ─────────────────── */ /* The footer is fixed height; cap it so a long promo/totals block can never squeeze the scrolling item list to zero. */ .vcd-scroll{flex:1 1 auto;min-height:120px;overflow-y:auto} .vcd-foot{max-height:55%;overflow-y:auto} .vcd-gift{margin:0 18px 12px} @media (max-width:480px){ .vcd-gift{margin:0 14px 10px} } /* ─────────────────────────────────────────────────────────────── */ /* ── Cart Drawer footer: condensed ───────────────────────────── */ .vcd-foot{padding:10px 18px 12px;max-height:48%} /* Applied-code row (replaces the input once a code is in use) */ .vcd-applied{display:flex;align-items:center;gap:7px; padding:8px 12px;border-radius:9px; background:#eef5ff;border:1px solid #d3e3fb;color:var(--ice-deep,#0B47B0)} .vcd-applied svg{flex:0 0 auto;color:#1a7f37} .vcd-applied-code{font-size:.8rem;font-weight:800;letter-spacing:.05em} .vcd-applied-txt{font-size:.76rem;opacity:.75} .vcd-applied .vcd-coupon-x{margin-left:auto;font-size:1.1rem;line-height:1} /* Tighter promo input */ .vcd-promo-in{padding:9px 13px;font-size:.85rem} .vcd-promo-btn{padding:9px 18px;font-size:.85rem} .vcd-promo-msg{margin-top:5px;font-size:.74rem;min-height:0} .vcd-promo-msg:empty{display:none} /* Tighter totals */ .vcd-totals{margin-top:9px;padding-top:9px} .vcd-trow{padding:3px 0;font-size:.85rem} .vcd-trow.is-total{margin-top:5px;padding-top:8px;font-size:.98rem} /* Tighter checkout area */ .vcd-checkout{margin-top:10px;padding:12px 20px;font-size:.94rem} .vcd-secure{margin-top:7px;font-size:.72rem} /* Give the reclaimed height back to the item list */ .vcd-scroll{min-height:180px} /* ─────────────────────────────────────────────────────────────── */ /* ── Cart Drawer: empty state ────────────────────────────────── */ .vcd-empty{display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;min-height:60vh;padding:40px 26px} .vcd-empty-title{margin:0 0 8px;font-size:1.62rem;font-weight:600;color:#1a1a1a;line-height:1.25} .vcd-empty-sub{margin:0 0 30px;font-size:1.02rem;font-weight:400;color:#9aa4ae} .vcd-empty-btn{display:inline-flex;align-items:center;gap:11px; padding:17px 40px;border-radius:999px;text-decoration:none; background:linear-gradient(135deg,#2f5fbd,#3f7fe0);color:#fff; font-size:1.08rem;font-weight:700; box-shadow:0 10px 26px -14px rgba(47,95,189,.9); transition:transform .15s,filter .2s} .vcd-empty-btn:hover{transform:translateY(-1px);filter:brightness(1.07)} .vcd-empty-btn svg{flex:0 0 auto} /* Empty cart has no footer content, so let the body fill the panel */ .vcd-scroll:has(.vcd-empty){display:flex;flex-direction:column;justify-content:center} /* ─────────────────────────────────────────────────────────────── */ /* ── Product Details: collapsed with expand toggle ───────────── */ .vanta-details.is-collapsible .vanta-details-body{ position:relative; max-height:200px;overflow:hidden; transition:max-height .45s ease} .vanta-details.is-collapsible .vanta-details-body::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:90px; background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 88%); pointer-events:none;transition:opacity .3s} .vanta-details.is-collapsible.is-open .vanta-details-body{max-height:none} .vanta-details.is-collapsible.is-open .vanta-details-body::after{opacity:0} .vanta-details-toggle{display:inline-flex;align-items:center;gap:7px; margin:14px 0 0;padding:10px 22px; background:#fff;border:1.5px solid var(--line,#e4ecf4);border-radius:999px; cursor:pointer;color:var(--ice,#1463E8); font-size:.88rem;font-weight:800;letter-spacing:.01em; transition:border-color .18s,background .18s,transform .15s} .vanta-details-toggle:hover{border-color:var(--ice,#1463E8);background:#f5f9ff;transform:translateY(-1px)} .vanta-details-toggle svg{transition:transform .3s} .vanta-details.is-open .vanta-details-toggle svg{transform:rotate(180deg)} .vanta-details-toggle .vd-less{display:none} .vanta-details.is-open .vanta-details-toggle .vd-more{display:none} .vanta-details.is-open .vanta-details-toggle .vd-less{display:inline} @media (max-width:640px){ .vanta-details.is-collapsible .vanta-details-body{max-height:160px} .vanta-details-toggle{width:100%;justify-content:center;padding:12px 20px} } @media (prefers-reduced-motion: reduce){ .vanta-details.is-collapsible .vanta-details-body{transition:none} .vanta-details-toggle svg{transition:none} } /* ─────────────────────────────────────────────────────────────── */ /* ── Footer contact block (replaces social icons) ────────────── */ .foot-contact{display:flex;flex-direction:column;gap:11px;margin-top:18px} .foot-contact-row{display:flex;align-items:flex-start;gap:10px; color:var(--mid,#6b7f95);font-size:.88rem;line-height:1.5;text-decoration:none; transition:color .18s} a.foot-contact-row:hover{color:var(--ice,#1463E8)} .foot-contact-row svg{flex:0 0 auto;width:17px;height:17px;margin-top:2px;color:var(--ice,#1463E8);opacity:.85} .foot-contact-row span{word-break:break-word} /* ─────────────────────────────────────────────────────────────── */ /* ── Blog / archive listing grid ─────────────────────────────── */ .post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} @media(max-width:900px){ .post-grid{grid-template-columns:repeat(2,1fr);gap:18px} } @media(max-width:600px){ .post-grid{grid-template-columns:1fr;gap:16px} } /* ─────────────────────────────────────────────────────────────── */ /* ── Sign-up: required marks and consent checkboxes ───────────── */ .vlogin-req{color:#d94a4a;font-weight:700} .vlogin-consent{display:flex;align-items:flex-start;gap:11px;margin:14px 0 0; font-family:var(--body,"Satoshi",sans-serif);font-size:14px;line-height:1.5; color:var(--hi,#0b2236);cursor:pointer} .vlogin-consent input[type="checkbox"]{flex:0 0 auto;width:20px;height:20px;margin:1px 0 0; accent-color:var(--ice,#1463e8);cursor:pointer} .vlogin-consent span{flex:1 1 auto} .vlogin-consent a{color:var(--ice,#1463e8);text-decoration:none} .vlogin-consent a:hover{text-decoration:underline} .vlogin-consent + .vlogin-btn{margin-top:20px} @media(max-width:560px){.vlogin-consent{font-size:13.5px}} /* ── Social login: full-width, centred, sized to match Sign in ────────── Nextend renders .nsl-container > .nsl-container-buttons > .nsl-button and sets inline sizing of its own, so the earlier width rule never reached the real button. These target its actual structure and override its defaults. */ .vlogin-social .nsl-container{width:100%!important;max-width:none!important;text-align:center!important} .vlogin-social .nsl-container-buttons{display:flex!important;flex-direction:column!important; align-items:stretch!important;justify-content:center!important; width:100%!important;max-width:none!important;gap:14px!important} .vlogin-social .nsl-container-buttons a, .vlogin-social .nsl-button{ display:flex!important;align-items:center!important;justify-content:center!important; width:100%!important;max-width:none!important; min-height:60px!important;height:auto!important; border-radius:999px!important;box-sizing:border-box!important; padding:0 22px!important;margin:0!important} /* Nextend sizes the label and icon independently of the button. */ .vlogin-social .nsl-button-label-container{ flex:0 1 auto!important;width:auto!important; font-family:var(--body,"Satoshi",sans-serif)!important; font-size:17px!important;font-weight:600!important;line-height:1.2!important; text-align:center!important;margin:0!important;padding:0!important} /* Nextend pads this container and sizes the svg inside it, so setting the container alone left the glyph small. Zero the padding, fix the box, and force the svg to fill it. */ .vlogin-social .nsl-button-svg-container{ flex:0 0 auto!important; display:flex!important;align-items:center!important;justify-content:center!important; width:34px!important;height:34px!important; min-width:34px!important;min-height:34px!important; padding:0!important;margin:0 14px 0 0!important} .vlogin-social .nsl-button-svg-container svg{ width:34px!important;height:34px!important; min-width:34px!important;min-height:34px!important; max-width:none!important;max-height:none!important;display:block!important} /* Some Nextend versions size the glyph via a custom property. */ .vlogin-social .nsl-button{--nsl-button-svg-size:34px!important} /* Centre the "Don't have an account? Sign up" line under it. */ .vlogin-alt{text-align:center} @media(max-width:560px){ .vlogin-social .nsl-button{min-height:56px!important} .vlogin-social .nsl-button-label-container{font-size:16px!important} .vlogin-social .nsl-button-svg-container, .vlogin-social .nsl-button-svg-container svg{ width:30px!important;height:30px!important; min-width:30px!important;min-height:30px!important} }