/** Shopify CDN: Minification failed

Line 66:0 Unexpected "{"

**/
:root{
--ink:#0F172A; --muted:#475569; --bg:#F8FAFF; --card:#FFFFFF; --bd:#E5E7EB;
--primary:#334BFF; --primary-600:#3C5BFF; --accent:#FFD15A; --ok:#18A957;
--radius:16px; --shadow:0 8px 28px rgba(15,23,42,.06)
}
html,body{overflow-x:hidden}
img,video{max-width:100%;height:auto;display:block}
#pdpx,#pdpx .wrap{overflow-x:hidden}
#pdpx{font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink)}
#pdpx .wrap{max-width:1100px;margin:auto;padding:12px clamp(12px,3vw,24px)}
h1,h2{line-height:1.12;margin:0 0 10px}
h1{font-size:32px;letter-spacing:-.02em}
h2{font-size:22px;margin-top:18px}
.sub{color:var(--muted);font-size:14px}
.price-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0 2px}
.price-now{font-weight:900;font-size:30px}
.price-was{color:#94A3B8;text-decoration:line-through}
.sale-pill{padding:6px 10px;border-radius:999px;border:1.5px solid var(--primary);color:var(--primary);font-weight:800;font-size:12px}
.stars{display:flex;align-items:center;gap:8px;margin-top:6px}
.stars .set{display:inline-flex;gap:2px}
.stars svg{width:16px;height:16px;color:#FFC83D}
.stars .count{color:#64748B;font-size:14px}
.lead-bullets{display:grid;grid-template-columns:1fr;gap:8px;margin:8px 0 12px}
.lead-bullets .li{
width:100%;padding:8px 12px;border:1.25px solid #CBD5FF;border-radius:12px;background:#F7FAFF;
display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;line-height:1.25;color:#0F172A;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 1px 6px rgba(51,75,255,.04)
}
.lead-bullets .dot{width:8px;height:8px;border-radius:50%;background:#334BFF;flex:none}
@media (min-width:900px){ .lead-bullets{grid-template-columns:repeat(3,1fr)} }
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--radius);box-shadow:var(--shadow)}
.buy{padding:16px}
.divider{display:flex;align-items:center;gap:10px;color:#142261;font-weight:900;margin:12px 0 10px}
.divider::before,.divider::after{content:"";height:1px;flex:1;background:#CBD5FF}
.bundles{display:grid;gap:8px}
.bundle{position:relative;display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1.25px solid #E2E8F0;border-radius:12px;background:#FBFDFF;column-gap:10px}
.bundle:hover{border-color:var(--primary)}
.bundle.active{border-color:var(--primary);box-shadow:0 0 0 3px rgba(51,75,255,.12);background:#fff}
.b-left{display:flex;align-items:center;gap:10px;min-width:0}
.radio{width:15px;height:15px;border:2px solid #94A3B8;border-radius:999px;position:relative;flex:none}
.bundle.active .radio{border-color:var(--primary)}
.bundle.active .radio::after{content:"";position:absolute;inset:3px;border-radius:999px;background:var(--primary)}
.b-title{font-size:14px;font-weight:900}
.b-sub{font-size:11px;color:var(--muted);margin-top:2px}
.b-right{display:flex;align-items:center;gap:10px}
.b-prices{display:flex;flex-direction:column;align-items:flex-end;line-height:1}
.b-prices .now{font-size:14px;font-weight:900}
.b-prices .was{font-size:10px;color:#94A3B8;text-decoration:line-through}
.ribbon{position:absolute;right:12px;top:-4px;padding:1px 6px;border-radius:7px;font-size:9px;font-weight:900;color:#fff}
.ribbon.pop{background:var(--primary)} .ribbon.value{background:var(--ok)}
.badge{font-size:9.5px;font-weight:800;padding:2px 6px;border-radius:999px;background:#E6ECFF;color:#1B2A7A}
.cta{margin-top:14px}
.btn{width:100%;display:inline-flex;justify-content:center;align-items:center;gap:10px;border:none;border-radius:16px;padding:16px;background:var(--primary);color:#fff;font-weight:900;font-size:16px;cursor:pointer}
.btn .svg{width:18px;height:18px}
.note{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--bg);border:1px dashed #CBD5F1;font-size:13px}
.stack{margin-top:22px}
.strip{margin:10px 0 14px;padding:12px;border:1px solid var(--bd);border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:900}
.strip .stars svg{width:14px;height:14px;color:#FFC83D}
.as-seen{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center;margin:8px 0 16px}
.as-seen .logo{height:22px;opacity:.7;filter:grayscale(1)} .as-seen .logo img{height:100%;display:block}
{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
.story .lead{font-weight:600}
.story .hl{background:linear-gradient(180deg,transparent 60%,#E8EDFF 60%)}
.muted{color:#64748B}
.feats{display:grid;gap:16px;margin-top:16px}
.feat{display:grid;grid-template-columns:1fr;gap:12px;align-items:center}
@media(min-width:900px){.feat{grid-template-columns:1.25fr 1fr}}
.fig{border:1px dashed #CBD5FF;border-radius:14px;overflow:hidden;background:#EEF2FF;min-height:230px;display:grid;place-items:center;color:#1C2CFF}
.fig img,.fig video{width:100%;height:100%;object-fit:cover}
.fcopy{background:#fff;border:1px solid #E5E7EB;border-radius:14px;padding:14px}
.fcopy h3{margin:0 0 6px;font-size:18px}
.fcopy ul{margin:8px 0 0 18px;color:#475569;font-size:14px}
.fcopy li{margin:4px 0}
#pdpx .fcopy ul{list-style:disc;list-style-position:outside;margin-left:1.25rem}
#pdpx .fcopy li{display:list-item;line-height:1.55}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.ba .bslot{border:1px dashed #CBD5FF;border-radius:14px;min-height:200px;background:#EEF2FF;display:grid;place-items:center}
.ba .lbl{text-align:center;margin-top:6px;color:#475569}
.collage{margin-top:18px}
.collage .wrap{border:1px solid var(--bd);border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.collage img{width:100%;display:block;aspect-ratio:1/1;object-fit:cover;background:#EEF2FF}
.collage .cap{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 12px;font-weight:900}
.collage .stars{display:inline-flex;gap:2px}
.collage .stars svg{width:16px;height:16px;color:#FFC83D}
.collage .sub{color:#475569;font-weight:800}
.clin{margin-top:16px;padding:14px;border:1px solid #C7D2FE;border-radius:14px;background:linear-gradient(0deg,#F7FAFF,#fff)}
.clin .row{display:flex;gap:10px;align-items:center}
.clin .avatar{width:40px;height:40px;border-radius:50%;background:#E2E8F0}
.clin .name{font-weight:900}
.trust{margin-top:16px;display:grid;gap:10px}
@media(min-width:760px){.trust{grid-template-columns:repeat(4,1fr)}}
.tcard{padding:12px;border:1px solid var(--bd);border-radius:12px;background:#fff}
.tcard .tt{font-weight:800}
.faq{margin-top:18px}
.ac{border:1px solid var(--bd);border-radius:12px;overflow:hidden}
.ai + .ai{border-top:1px solid var(--bd)}
.ab{width:100%;text-align:left;padding:18px;background:#fff;border:0;font-weight:900;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:17px}
.acont{max-height:0;overflow:hidden;transition:max-height .25s ease}
.ai.open .acont{max-height:420px}
.ai .sub{font-size:15px}
.sticky{position:fixed;left:0;right:0;bottom:-90px;z-index:9999;transition:bottom .25s ease}
.sticky.show{bottom:calc(env(safe-area-inset-bottom))}
.sticky .inner{background:#fff;border-top:1px solid #CBD5FF;box-shadow:0 -10px 24px rgba(15,23,42,.10)}
.sticky .bar{height:64px;display:flex;align-items:center}
.sticky .wrap{max-width:1100px;margin:0 auto;padding:0 14px}
.sticky .title{font-weight:900;color:var(--ink);margin-right:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky .sprice{font-weight:900;color:var(--primary);margin-right:12px}
.sticky .sbtn{margin-left:auto;background:var(--primary);color:#fff;border:none;cursor:pointer;border-radius:12px;padding:10px 14px;font-weight:900;display:inline-flex;gap:8px;align-items:center}
.sticky .sbtn svg{width:18px;height:18px}
@media (max-width:420px){ .sticky .title{display:none} .sticky .sprice{margin-right:8px} }
body.sticky-on #pdpx .wrap{padding-bottom:80px}
.microcopy{margin:8px 0 16px;color:#334155;font-size:14px;line-height:1.55}
.proof{ margin-top:16px; }
.proof-collage{
margin:0;
border:1px solid var(--bd);
border-radius:16px;
overflow:hidden;
background:#EFF3FF;
}
.proof-collage img{
display:block;
width:100%;
height:auto;
}
.proofMeta{ display:none !important; }
.proofCard{ margin-bottom:0 !important; }
.reviews-xl{ margin-top:22px }
.reviews-xl h2{ margin:0 0 14px }
.reviews-xl .rev-pages{
border:1px solid var(--bd);
border-radius:16px;
background:#fff;
box-shadow:var(--shadow);
padding:14px;
}
.reviews-xl .rev-page{ display:none; grid-template-columns:1fr; gap:12px }
.reviews-xl .rev-page.on{ display:grid }
@media(min-width:760px){ .reviews-xl .rev-page{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:1060px){ .reviews-xl .rev-page{ grid-template-columns:repeat(3,1fr) } }
.rev-card{
border:1px solid #E2E8F0; border-radius:14px; background:#FBFDFF;
padding:12px;
}
.rev-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px }
.ava{
width:40px;height:40px;border-radius:50%;
display:grid;place-items:center;
background:#E6ECFF;color:#1B2A7A;font-weight:900
}
.name{ font-weight:900 }
.meta .badge{
font-size:11px;font-weight:800;padding:2px 6px;border-radius:999px;
background:#E6ECFF;color:#1B2A7A
}
.rev-stars{ display:inline-flex; gap:2px; margin:2px 0 6px }
.rev-stars svg{ width:16px;height:16px;color:#FFC83D }
.rev-stars svg.off{ color:#E2E8F0 }
.rev-text{ color:#334155; line-height:1.55 }
.rev-nav{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:12px }
.rev-btn{
width:36px;height:36px;border-radius:10px;border:1px solid #CBD5FF;background:#fff;
color:#334BFF;font-weight:900;cursor:pointer
}
.rev-dots{ display:inline-flex; gap:8px }
.rev-dot{
width:8px;height:8px;border-radius:999px;border:1.5px solid #334BFF;background:#fff;cursor:pointer
}
.rev-dot.on{ background:#334BFF }
#pdpx .fcopy{ text-align:left !important; }
#pdpx .fcopy ul{
list-style: disc;
list-style-position: outside;
margin: 8px 0 0 !important;
padding-left: 1.05rem !important;
}
#pdpx .fcopy li{
display:list-item;
text-align:left !important;
line-height:1.55;
}
.trust{ display:none !important; }
.trust-pills{
display:flex; flex-wrap:wrap; gap:10px;
margin: 14px 0 8px;
}
.tpill{
display:inline-flex; align-items:center; gap:8px;
padding:10px 12px; border:1px solid #CBD5FF;
background:#F7FAFF; border-radius:999px;
font-weight:800; color:#0F172A;
}
.tpill svg{ width:18px; height:18px; color:#18A957; }
.stitle{
display:flex; align-items:center; justify-content:center; gap:12px;
text-align:center; margin:20px 0 12px; font-size:24px; letter-spacing:-.01em;
}
.stitle::before,.stitle::after{
content:""; height:1px; flex:1; background:#CBD5FF;
}
.stitle span{
font-weight:900; color:#0F172A; background:#fff; padding:2px 10px; border-radius:10px;
border:1px solid #E5E7EB;
}
.reviews{ margin-top: 8px !important; margin-bottom: 12px !important; }
.faq{ margin-top: 10px !important; }
.trust{ display:none !important; }
.trustV2{
display:grid; gap:12px; margin:16px 0 6px;
grid-template-columns:1fr;
}
@media (min-width:720px){ .trustV2{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .trustV2{ grid-template-columns:repeat(4,1fr); } }
.t2{
display:flex; gap:12px; align-items:flex-start;
padding:14px; background:#fff;
border:1px solid var(--bd); border-radius:14px;
box-shadow:0 6px 22px rgba(15,23,42,.04);
height:100%;
}
.t2 .i{
width:36px; height:36px; border-radius:10px; flex:none;
display:grid; place-items:center;
background:#EEF2FF; border:1px solid #CBD5FF; color:#334BFF;
}
.t2 .i svg{ width:20px; height:20px; }
.t2 .tt{ font-weight:900; color:#0F172A; }
.t2 .sub{ font-size:14px; color:#475569; margin-top:2px; }
.collage .wrap{ position:relative; }
.collage img{
display:block; width:100%; height:auto;
border-radius:14px; border:1px solid #E6ECFF; background:#F7FAFF;
}
.collage .cap{
position:absolute; right:12px; bottom:12px;
background:rgba(255,255,255,.95);
border:1px solid #E5E7EB; border-radius:12px;
padding:6px 10px; display:flex; align-items:center; gap:8px;
box-shadow:0 8px 20px rgba(15,23,42,.10);
}
.collage .cap .stars{ display:inline-flex; gap:2px; }
.collage .cap .stars svg{ width:14px; height:14px; color:#FFC83D; }
.collage .cap .sub{ font-weight:800; color:#0F172A; font-size:13px; }
.strip{
padding:6px 0; margin:6px 0 12px;
background:transparent; border:0;
font-weight:800; color:#0F172A;
}
.strip .stars svg{ width:16px; height:16px; }
.section-pill{
display:flex; align-items:center; justify-content:center;
gap:12px; margin:18px 0 12px;
}
.section-pill::before,.section-pill::after{
content:""; height:1px; flex:1; background:#CBD5FF;
}
.section-pill span{
display:inline-block; padding:8px 14px; border:1px solid #CBD5FF;
border-radius:999px; background:#fff; font-weight:900; color:#0F172A;
}
.cover-slider{ position:relative; width:100%; height:100%; background:#EEF2FF; border-radius:14px; overflow:hidden; }
.cover-slider .track{
display:flex; width:100%; height:100%; overflow-x:auto; scroll-snap-type:x mandatory;
scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
}
.cover-slider .track::-webkit-scrollbar{ display:none; }
.cover-slider .slide{
min-width:100%; height:100%; position:relative; scroll-snap-align:center;
display:grid; place-items:center; background:#F5F7FF;
}
.cover-slider img{ width:100%; height:100%; object-fit:cover; display:block; }
.cover-slider figcaption{
position:absolute; left:12px; bottom:12px;
padding:6px 10px; border:1px solid #CBD5FF; background:#fff; border-radius:999px;
font-weight:900; color:#0F172A; font-size:12px;
}
.cover-slider .nav{
position:absolute; top:50%; transform:translateY(-50%);
width:40px; height:40px; border-radius:999px; background:#fff; border:1px solid #CBD5FF;
display:grid; place-items:center; cursor:pointer; box-shadow:0 4px 14px rgba(15,23,42,.08);
}
.cover-slider .nav svg{ width:20px; height:20px; color:var(--primary,#334BFF); }
.cover-slider .nav.prev{ left:10px; }
.cover-slider .nav.next{ right:10px; }
.cover-slider .nav:active{ transform:translateY(-50%) scale(.98); }
.lead-bullets{
display:grid;
grid-template-columns:1fr;
gap:8px;
margin:8px 0 12px;
}
.lead-bullets .li{
width:100%;
padding:10px 12px;
border:1.25px solid #CBD5FF;
border-radius:12px;
background:#F7FAFF;
display:flex;
align-items:flex-start;
gap:10px;
font-size:14px;
font-weight:800;
line-height:1.28;
color:#0F172A;
box-shadow:0 1px 6px rgba(51,75,255,.04);
}
.lead-bullets .dot{
width:8px;height:8px;border-radius:50%;
background:#334BFF;flex:none;margin-top:6px;
}
.lead-bullets .t{
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
@media (min-width:900px){
.lead-bullets{ grid-template-columns:repeat(3,1fr) }
}
.lead-bullets .li{
align-items: flex-start;
white-space: normal !important;
gap: 10px;
}
.lead-bullets .dot{
margin-top: 6px;
}
.lead-bullets .t{
flex: 1;
min-width: 0;
white-space: normal !important;
word-break: break-word;
hyphens: auto;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.28;
}
@media (max-width: 420px){
.lead-bullets .li{ font-size: 13.5px; }
}
.compare-intro{
border:1px solid #CBD5FF;
border-radius:14px;
padding:16px;
background:linear-gradient(180deg,#F7FAFF 0%,#FFFFFF 100%);
box-shadow:0 8px 28px rgba(15,23,42,.06);
margin-bottom:12px;
}
.compare-intro h3{ margin:0 0 6px; font-size:20px; font-weight:900; }
.compare-intro p{ margin:0 0 10px; color:#475569; }
.mini-points{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.mini-points li{ display:flex; align-items:flex-start; gap:8px; font-weight:700; color:#0F172A; }
.mini-points svg{ width:18px; height:18px; color:var(--ok); flex:none; margin-top:2px; }
.compare-block{
border:1px solid var(--bd);
border-radius:14px;
background:#fff;
overflow:hidden;
box-shadow:0 8px 28px rgba(15,23,42,.06);
}
.compare-block img{ width:100%; height:auto; display:block; }
.compare-block .hint{
padding:10px 12px; font-size:13px; color:#475569; border-top:1px solid #E5E7EB;
}
.footnote.sub{ margin-top:8px; font-size:12px; color:#64748B; }
#pdpx .collective{
margin:18px 0;
padding:16px;
border:1px solid #CBD5FF;
border-radius:16px;
background:linear-gradient(0deg,#F8FAFF,#FFFFFF);
}
#pdpx .collective h2{
margin:0 0 12px;
font-size:22px;
line-height:1.15;
}
#pdpx .kpis{display:grid;gap:12px}
@media(min-width:700px){#pdpx .kpis{grid-template-columns:1fr}}
#pdpx .kpi{
display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;
padding:18px;border:1px solid #E5E7EB;border-radius:14px;background:#fff;
}
#pdpx .kpi + .kpi{margin-top:8px}
#pdpx .kpi .num{
font-weight:900;
font-size:44px; line-height:1;
color:var(--primary,#334BFF);
min-width:88px;
}
#pdpx .kpi .cap{color:#0F172A;font-size:18px;line-height:1.35}
#pdpx .kpi .cap small{display:block;color:#64748B;font-size:15px;margin-top:8px}
#pdpx .kpi-note{
margin-top:10px;color:#64748B;font-size:14px;
}
.compare-intro h3{
font-size: clamp(22px, 5.2vw, 30px);
line-height: 1.15;
letter-spacing: -0.01em;
}
@media (max-width: 390px){
.compare-intro h3{ font-size: 20px; }
}
@media (max-width: 340px){
.compare-intro h3{ font-size: 18px; }
}
.brand-video { padding: 10px 0 6px; }
.brand-video .wrap { max-width: 760px; margin: 0 auto; padding: 0 12px; }
.bv-title{
text-align:center;
font-weight:800;
letter-spacing:.2px;
margin: 0 0 12px;
font-size: clamp(24px, 5.6vw, 36px);
}
.bv-frame{
position: relative;
border-radius: 22px;
overflow: hidden;
background: #000;
}
.brand-video .wrap { padding-inline: 8px; }
.bv-frame video{
display:block;
width:100%;
height:auto;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.bv-play{
position:absolute; inset:0;
margin:auto; width:86px; height:86px;
border-radius:999px; border:0;
background:#fff;
display:flex; align-items:center; justify-content:center;
box-shadow:0 6px 20px rgba(0,0,0,.25);
cursor:pointer;
transition: transform .15s ease;
}
.bv-play:active{ transform: scale(.98); }
.bv-play.is-hidden{ display:none; }
@media (min-width:768px){
.brand-video .wrap{ max-width: 900px; }
.bv-frame{ border-radius: 24px; }
}
#pdpx{ margin-top:16px; }
#pdpx h1{ margin-top:8px; }
@media (max-width:768px){
#pdpx{ margin-top:10px; }
#pdpx h1{ margin-top:6px; }
}
.story{ margin-top:24px; }
.feats{ display:flex; flex-direction:column; gap:24px; }
.section-pill{
display:flex; align-items:center; gap:24px; margin:28px 0 16px;
}
.section-pill::before, .section-pill::after{
content:""; height:1px; background:#D9E2FF; flex:1 1 auto;
}
.section-pill>span{
padding:12px 24px; border:1.6px solid #D9E2FF; border-radius:999px; background:#fff;
font-weight:800; letter-spacing:.2px; line-height:1;
box-shadow:0 8px 24px rgba(59,90,255,.08);
}
#coverSlider{ position:relative; border-radius:16px; background:#F7F9FF; overflow:hidden; }
#coverSlider .track{
display:flex; gap:12px; overflow-x:auto; overflow-y:hidden;
scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
touch-action:pan-x; overscroll-behavior-x:contain; overscroll-behavior-y:none;
padding:12px;
}
#coverSlider .track::-webkit-scrollbar{ display:none; }
#coverSlider .slide{ flex:0 0 100%; scroll-snap-align:center; position:relative; border-radius:12px; overflow:hidden; background:#fff; }
#coverSlider .slide img{ width:100%; height:100%; object-fit:cover; display:block; }
#coverSlider .slide figcaption{
position:absolute; left:12px; bottom:12px; padding:8px 12px; background:#fff; border:1.6px solid #D9E2FF; border-radius:999px;
font-weight:800; box-shadow:0 8px 24px rgba(59,90,255,.08);
}
#coverSlider .nav{
position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px;
display:grid; place-items:center; border-radius:999px; border:1.6px solid #D9E2FF; background:#fff;
box-shadow:0 8px 24px rgba(59,90,255,.08); cursor:pointer;
}
#coverSlider .prev{ left:12px; }  #coverSlider .next{ right:12px; }
.trustV2 .t2{ display:flex; align-items:flex-start; gap:12px; }
.trustV2 .i{
width:44px; height:44px; display:grid; place-items:center;
border:1.6px solid #D9E2FF; border-radius:12px; background:#fff;
box-shadow:0 8px 24px rgba(59,90,255,.08);
}
.trustV2 .i svg{ width:22px; height:22px; }
#brand-video{ margin-bottom:24px; }
.faq{ margin-top:0; margin-bottom:24px; }
.collage .stitle{
display:flex; align-items:center; gap:24px; margin:32px 0 16px; font-weight:800;
}
.collage .stitle::before, .collage .stitle::after{
content:""; height:1px; background:#D9E2FF; flex:1 1 auto;
}
.collage .stitle>span{
padding:12px 24px; border:1.6px solid #D9E2FF; border-radius:999px; background:#fff;
box-shadow:0 8px 24px rgba(59,90,255,.08);
}
.shopify-section:has(+ #pdpx){
padding-bottom: 8px !important;
margin-bottom: 8px !important;
}
.product__media,
.product__media-wrapper,
.product__media-list,
.product-media,
.product-media--container,
.media-gallery,
.thumbnail-slider,
.product-gallery,
.product-grid__media{
margin-bottom: 8px !important;
}
#pdpx{ margin-top: 8px !important; }
#pdpx .wrap > *:first-child{ margin-top: 0 !important; }
#pdpx{
margin-top: -28px !important;
padding-top: 0 !important;
}
#pdpx .wrap{ margin-top: 0 !important; padding-top: 0 !important; }
#pdpx h1{ margin-top: 6px !important; }
#pdpx .stars{ margin-top: 6px !important; }
#pdpx .price-row{ margin-top: 10px !important; }
@media (min-width: 768px){
#pdpx{ margin-top: -36px !important; }
}
@media (min-width: 1200px){
#pdpx{ margin-top: -44px !important; }
}
.section-pill{
display:flex; align-items:center; gap:12px;
margin:12px 0 8px;
}
.section-pill::before,
.section-pill::after{ content:""; height:1px; background:#E6EDFF; flex:1 1 auto; }
.section-pill > span{
padding:8px 18px;
border:1.4px solid #D7E1FF;
border-radius:999px;
background:#fff;
box-shadow:0 2px 8px rgba(59,90,255,.06);
font-weight:800; line-height:1; white-space:nowrap;
}
@media (max-width:768px){
.section-pill{ margin:10px 0 6px; gap:10px; }
.section-pill > span{ padding:8px 16px; }
}
.feats .section-pill + .feat{ margin-top: 4px !important; }
.feats{ gap: 16px; }
.section-pill{ padding:0 !important; }
.section-pill + .feat .fig{ margin-top:0 !important; }
.section-pill + .feat .fcopy{ margin-top:8px; }
:root{
--pill-line: #CBD5FF;
--pill-text: #0F172A;
--pill-shadow: 0 10px 26px rgba(59,90,255,.08);
--pill-pad-y: 12px;
--pill-pad-x: 26px;
--pill-fs-min: 20px;
--pill-fs-max: 30px;
}
#pdpx .section-pill{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:16px !important;
margin:22px 0 12px !important;
padding:0 !important;
}
#pdpx .section-pill::before,
#pdpx .section-pill::after{
content:"" !important;
height:1px !important;
background:var(--pill-line) !important;
flex:1 1 auto !important;
}
#pdpx .section-pill > span{
display:inline-block;
max-width:100%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
padding:var(--pill-pad-y) var(--pill-pad-x) !important;
border:1.6px solid var(--pill-line) !important;
border-radius:9999px !important;
background:#fff !important;
box-shadow:var(--pill-shadow) !important;
color:var(--pill-text) !important;
font-weight:800 !important;
font-size:clamp(var(--pill-fs-min), 2.6vw, var(--pill-fs-max)) !important;
line-height:1 !important;
letter-spacing:.2px !important;
}
#pdpx .section-pill + *{ margin-top:10px !important; }
#pdpx .section-pill.pill--xl > span{
padding:14px 30px !important;
font-size:clamp(22px, 3vw, 32px) !important;
}
#pdpx .section-pill.pill--sm > span{
padding:10px 20px !important;
font-size:clamp(18px, 2.2vw, 24px) !important;
}
@media (max-width:380px){
:root{ --pill-pad-y:10px; --pill-pad-x:20px; --pill-fs-min:18px; }
}
#pdpx .section-pill{
display:flex; align-items:center; justify-content:center;
gap:14px; margin:22px 0 12px;
}
#pdpx .section-pill::before,
#pdpx .section-pill::after{
content:""; height:1px; background:#CBD5FF;
flex:1 1 24px;
}
#pdpx .section-pill > span{
flex:0 1 auto;
min-width:0; max-width:100%;
padding:12px 24px;
border:1.6px solid #CBD5FF; border-radius:9999px; background:#fff;
box-shadow:0 10px 26px rgba(59,90,255,.08);
color:#0F172A; font-weight:800;
font-size:clamp(20px, 2.6vw, 28px);
line-height:1.15;
white-space:normal;
overflow:visible; text-overflow:unset;
text-align:center;
}
@media (max-width:430px){
#pdpx .section-pill{ gap:10px; }
#pdpx .section-pill::before, #pdpx .section-pill::after{ flex-basis:16px; }
#pdpx .section-pill > span{
padding:10px 18px;
font-size:clamp(18px, 5.2vw, 22px);
}
}
#pdpx .section-pill.pill--tight > span{
padding:8px 16px;
font-size:clamp(16px, 4.6vw, 20px);
}
#pdpx .brand-video{
padding: 22px 0 8px !important;
}
@media (min-width:768px){
#pdpx .brand-video{ padding: 28px 0 10px !important; }
}
#pdpx .bv-title{
margin: 0 auto 14px !important;
max-width: 28ch;
text-align: center;
font-weight: 900;
letter-spacing: .01em;
color: var(--ink);
white-space: normal;
line-height: 1.15;
font-size: clamp(24px, 5.2vw, 34px);
}
#pdpx .trustV2{ margin-bottom: 12px !important; }
#pdpx .brand-video{ padding-bottom: 6px !important; margin-bottom: 8px !important; }
#pdpx .faq{ margin-top: 0px !important; }
#pdpx #brand-video{
padding-bottom: 0 !important;
margin-bottom: 2px !important;
}
#pdpx #brand-video .bv-frame{
margin-bottom: 0 !important;
}
#pdpx #brand-video + .faq{
margin-top: 4px !important;
}
#pdpx #brand-video + .faq .section-pill{
margin-top: -60px !important;
margin-bottom: 8px !important;
}
#pdpx .faq{ margin-bottom: 6px !important; }
#pdpx .faq .ac{ margin-bottom: 0 !important; }
#pdpx .faq .ai:last-child{ margin-bottom: 0 !important; }
#pdpx .faq + .reviews-xl{ margin-top: 6px !important; }
#pdpx .reviews-xl{ margin-top: 6px !important; }
#pdpx .reviews-xl .section-pill{
margin: 6px 0 8px !important;
}
#pdpx .reviews-xl .section-pill > span{
padding: 12px 26px !important;
font-size: clamp(22px, 3.2vw, 28px) !important;
line-height: 1.12 !important;
white-space: normal !important;
}
#pdpx .reviews-xl h2,
#pdpx .reviews-xl h2::before,
#pdpx .reviews-xl h2::after{
all: unset !important;
}
#pdpx{ margin-bottom: 6px !important; }
#reviews-xl{ margin-top: 4px !important; }
.shopify-section:has(> #pdpx){
padding-bottom: 6px !important;
margin-bottom: 0 !important;
}
.shopify-section:has(> #reviews-xl){
padding-top: 0 !important;
margin-top: 0 !important;
}
.shopify-section:has(> #pdpx) + .shopify-section{
margin-top: 0 !important;
padding-top: 0 !important;
}
#reviews-xl .section-pill{ margin: 6px 0 8px !important; }
#reviews-xl .section-pill > span{
padding: 12px 26px !important;
font-size: clamp(22px, 3.2vw, 28px) !important;
line-height: 1.12 !important;
white-space: normal !important;
}
@media (max-width: 420px){
#reviews-xl .section-pill > span{
padding: 10px 20px !important;
font-size: clamp(18px, 5.2vw, 22px) !important;
}
}
#pdpx .faq{ margin-bottom: 4px !important; }
#pdpx .faq .ac{ margin-bottom: 0 !important; }
.shopify-section:has(> #pdpx){ padding-bottom: 4px !important; margin-bottom: 0 !important; }
.shopify-section:has(> #reviews-xl){ padding-top: 0 !important; margin-top: 0 !important; }
.shopify-section:has(> #pdpx) + .shopify-section:has(> #reviews-xl){
margin-top: 0 !important; padding-top: 0 !important;
}
#reviews-xl{ margin-top: 0 !important; }
#reviews-xl .section-pill{ margin-top: 2px !important; }
#reviews-xl{ margin-top: -65px !important; }
#reviews-xl .section-pill > span{
padding: 12px 26px !important;
font-size: clamp(22px, 3.2vw, 28px) !important;
line-height: 1.12 !important;
}
#coverSlider, .cover-slider{
border-radius: 16px;
overflow: hidden;
}
#coverSlider .track, .cover-slider .track{
padding: 0 !important;
gap: 0 !important;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
touch-action: pan-x;
overscroll-behavior-x: contain;
overscroll-behavior-y: none;
}
#coverSlider .slide, .cover-slider .slide{
flex: 0 0 100%;
min-width: 100%;
aspect-ratio: 16 / 9;
position: relative;
overflow: hidden;
background: #fff;
}
#coverSlider .slide img,
.cover-slider .slide img,
#coverSlider .slide picture,
.cover-slider .slide picture{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
#coverSlider .slide figcaption,
.cover-slider .slide figcaption{
position: absolute;
left: 12px;
bottom: 12px;
padding: 6px 10px;
border: 1.5px solid #D9E2FF;
background: #fff;
border-radius: 999px;
font-weight: 800;
}
#coverSlider .nav, .cover-slider .nav{ top: 50%; transform: translateY(-50%); }
#coverSlider figure,
.cover-slider figure,
#coverSlider .slide,
.cover-slider .slide{
margin: 0 !important;
}
#coverSlider,
.cover-slider,
#coverSlider .track,
.cover-slider .track{
padding: 0 !important;
border: 0 !important;
}
#coverSlider .slide,
.cover-slider .slide{
flex: 0 0 100%;
min-width: 100%;
aspect-ratio: 16 / 9;
position: relative;
overflow: hidden;
}
#coverSlider .slide img,
.cover-slider .slide img{
display: block !important;
width: 100%;
height: 100%;
object-fit: cover;
}
#coverSlider .slide figcaption,
.cove
#pdpx .feats .section-pill{
margin: 6px 0 6px !important;
gap: 12px !important;
}
#pdpx .feats .section-pill > span{
padding: 10px 22px !important;
}
#pdpx .feats .section-pill + .feat{
margin-top: 4px !important;
}
#pdpx .feats{ gap: 12px !important; }
/* === FIX: slider не блокує вертикальний скрол на мобільних === */
/* даємо вертикальному свайпу пройти до сторінки */
#coverSlider .track{
  overflow-y: hidden !important;
  overscroll-behavior-y: auto !important;   /* було none — через це сторінка “залипала” */
  /* overscroll-behavior-x: contain; залишаємо, ок */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x !important;           /* тут тільки горизонтальні жести */
}

/* інколи подія ловиться дочірнім елементом (img/figure), дублюємо */
#coverSlider,
#coverSlider .slide,
#coverSlider .slide *,
#coverSlider img,
#coverSlider figure {
  touch-action: pan-x !important;           /* вертикальні жести віддаємо сторінці */
  -webkit-user-drag: none;
  user-select: none;
}
/* === COVER SLIDER: не блокуємо вертикальний скрол сторінки === */
#coverSlider,
#coverSlider .track,
#coverSlider .slide,
#coverSlider .slide *{
  touch-action: auto !important;             /* дозволяємо і x, і y — далі JS динамічно обмежить */
}

#coverSlider .track{
  overflow-y: hidden !important;              /* у самого треку нема вертикального скролу */
  overscroll-behavior-y: auto !important;     /* вертикальний свайп передається сторінці */
  overscroll-behavior-x: contain !important;  /* горизонталь не “висмикує” сторінку */
  -webkit-overflow-scrolling: touch;
}
/* Контейнер секції */
.blk--press .wrap{
  padding: 12px 16px;
}
/* === PRESS AUTO MARQUEE =================================== */
.blk--press .wrap{ padding:12px 16px; }

.press-auto{
  --logo-h: clamp(36px, 5vw, 56px); /* однакова висота логотипів */
  --gap: clamp(32px, 6vw, 64px);
  --speed: 28s;                     /* швидкість прокрутки */
  background:#fff;
  border:1px solid #E6EAF7;
  border-radius:22px;
  box-shadow:0 8px 24px rgba(12,22,44,.06);
  padding: clamp(14px, 3vw, 22px);
  overflow:hidden;
}

.press-auto .track{
  display:flex;
  align-items:center;
  gap:var(--gap);
  width:max-content;               /* ширина дорівнює сумі елементів */
  animation: press-scroll var(--speed) linear infinite;
}

.press-auto:hover .track{ animation-play-state: paused; }

.press-auto .logo{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  height:var(--logo-h);
}

.blk--press .logo img{
  height:100%;
  width:auto !important;           /* не розтягувати по ширині */
  max-width:none !important;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.9;
  transition:opacity .2s ease, filter .2s ease;
}
.blk--press .logo img:hover{ opacity:1; filter:grayscale(0); }

/* нескінченний безшовний рух (треба дублювати сет у HTML) */
@keyframes press-scroll{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); } /* рухаємо на половину (бо 2 ідентичні сети) */
}

/* accessibility: люди з reduced motion – без анімації */
@media (prefers-reduced-motion: reduce){
  .press-auto .track{ animation: none; }
}
/* === PRESS: full-bleed, no capsule, tighter spacing ================== */

/* зняти внутрішні відступи обгортки секції */
.blk--press .wrap{
  padding: 0 !important;
}

/* зробити блок edge-to-edge (повністю на ширину вікна) */
#press .press-auto{
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;

  /* full-bleed трюк: вийти за контентну ширину контейнера */
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;       /* тягнемося до лівого краю вікна */
}

/* трохи менше місця навколо секції */
#press{
  margin-top: 8px;
  margin-bottom: 12px;      /* зменшений нижній відступ */
}

/* можна ще трохи стишити вертикальний "повітряний прошарок" у треку */
#press .press-auto .track{
  padding-block: 6px;       /* було 14–22px; тепер компактніше */
}
/* FIG: clean production style */
.fig{
  border: 0 !important;
  background:#fff !important;
  border-radius:14px;
  overflow:hidden;
  /* бажано тримати сталу пропорцію */
  aspect-ratio: 4 / 3;
}
.fig img,.fig video{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
}
/* Caption під слайдером (лише рядок тексту) */
.howtoCaption{
  margin: 10px 12px 0;
  text-align: center;
  font: 600 clamp(14px,3.2vw,18px)/1.35 Inter, system-ui;
  color: rgba(15,23,42,.8); /* спокійний темний */
}
/* HOW-TO slider: показуємо фото повністю по висоті, без кропу */
#coverSlider,
#coverSlider .track,
#coverSlider .slide{
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:auto !important;   /* скасовуємо фіксовану рамку */
}

/* саме фото тягнеться по ширині, висота як у зображення */
#coverSlider .slide img{
  width:100% !important;
  height:auto !important;
  object-fit: contain !important; /* не ріжемо нічого */
  display:block;
  border-radius:16px;              /* скруглення переносимо на саме фото */
  background:#fff;
}

/* якщо десь контейнер .fig задає фіксовану пропорцію — вимикаємо її тільки тут */
.feat .fig:has(#coverSlider){
  aspect-ratio:auto !important;
  overflow:visible !important;     /* щоб нічого не “з’їдалося” рамкою */
}

/* стрілки — по центру відносно фактичної висоти фото */
#coverSlider .nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}
/* === BEFORE / AFTER — квадрати 1:1 ====================== */
#pdpx .ba{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
  align-items:start;
}

#pdpx .ba > div{ display:flex; flex-direction:column; }

#pdpx .ba .bslot{
  position:relative;
  aspect-ratio:1 / 1 !important;   /* головне — квадрат */
  min-height:0 !important;         /* скасовує старий min-height:200px */
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  border:1px solid #E6EAF7;        /* або прибери, якщо не треба рамки */
}

#pdpx .ba .bslot img{
  position:absolute; inset:0;      /* заповнюємо весь квадрат */
  width:100%; height:100%;
  object-fit:cover;                /* постав 'contain', якщо не хочеш кропу */
  display:block;
}

#pdpx .ba .lbl{
  margin-top:10px;
  text-align:center;
  font:600 16px/1.25 Inter,system-ui;
  color:#475569;
}
#pdpx .ba .bslot{
  box-shadow: 0 6px 18px rgba(15,23,42,.06);
  border: 1px solid #E9EDF7;
}
/* Comparison card */
.compCard{border-radius:16px;background:#fff;box-shadow:0 10px 28px rgba(15,23,42,.06);overflow:hidden}
.compTable{width:100%;border-collapse:collapse}
.compTable th,.compTable td{padding:16px 18px;border-bottom:1px solid #E9EDF7}
.compTable thead th{background:linear-gradient(90deg,#EEF2FF,#FAFBFF);font:800 16px/1.2 Inter,system-ui;color:#0F172A}
.compTable .brandCol{color:#3d4df2}
.compTable .featCol{width:60%}
.compTable th[scope=row]{text-align:left;font:700 16px/1.3 Inter,system-ui;color:#0F172A;background:#fff}
.compTable td{width:20%;text-align:center}
.compTable svg{width:22px;height:22px;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.ok svg{stroke:#22c55e}.no svg{stroke:#0F172A;opacity:.35}
.note{margin:10px 14px 14px;color:#64748B;font:500 13px/1.35 Inter,system-ui}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:640px){
  .compTable th,.compTable td{padding:14px 12px}
  .compTable .featCol{width:55%}
}
.comp{ 
  margin-block: 28px;            /* top + bottom */
}
@media (min-width: 768px){
  .comp{ margin-block: 40px; }
}
/* UGC — компактні картки, ~2 на екрані, скрол вбік */
.ugc{
  display:flex; gap:12px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:4px;
}
.ugc .tile{
  position:relative;
  flex:0 0 clamp(160px, 45%, 220px); /* РОЗМІР: ~45% ширини екрана */
  aspect-ratio: 9 / 16;              /* вертикальний формат, як Reels/TikTok */
  border:1px solid #E2E8F0;
  border-radius:14px; overflow:hidden; background:#fff;
  scroll-snap-align:start;
}
.ugc .tile img, .ugc .tile video{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* кнопка Play менша, чиста */
.ugc .play{
  position:absolute; right:10px; bottom:10px;
  width:42px; height:42px; border-radius:999px;
  background:#fff; border:1px solid #CBD5FF;
  display:grid; place-items:center;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}
.ugc .tile.is-playing .play{ display:none; } /* ховаємо коли грає */
/* Brand video — зсунути видиму зону вниз, щоб було видно нижній текст */
#brand-video .bv-frame video{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: 50% 60%; /* було 50% 50%; 60% = фокус нижче */
}

/* можна тонше під мобілки/десктоп */
@media (max-width: 480px){
  #brand-video .bv-frame video{ object-position: 50% 65%; }
}