/* eTrade storefront CSS: Shared by every page: design tokens, reset, layout, header, footer, cart drawer, popups, buttons, page switching */
/* eTrade storefront stylesheet (base + header/footer/layout first, then page sections in page order) */
/* TOKENS */
:root{--blue:#2F6FED;--dark:#1F2430;--muted:#6B7280;--grey:#F4F6FA;--pink:#E5457A;--purple:#7B5CD6;--star:#F5B301;--bd:#EEF0F4;--peach:#FBEDE6}
*{box-sizing:border-box;margin:0;padding:0}
body{font:400 14px/1.5 "DM Sans",system-ui,sans-serif;color:var(--dark);background:#fff;overflow-x:hidden}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit;transition:.25s ease}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
/* LAYOUT */
#ann{--ab:linear-gradient(90deg,#F6A27A,#F08A5D);--af:#fff;background:var(--ab);color:var(--af);font-size:12px;line-height:1.35;min-height:30px;max-height:96px;padding:6px 46px;display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;position:relative;overflow:hidden;transition:max-height .3s,min-height .3s,padding .3s,opacity .3s}
#ann[hidden]{display:none}
#ann .ann-i{display:inline-grid;flex:none}
#ann .ann-i svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#ann .ann-m{min-width:0;overflow-wrap:anywhere;transition:opacity .25s}
#ann .ann-m.sw{opacity:0}
#ann a{font-weight:700;text-decoration:underline;white-space:nowrap;flex:none}
#ann button{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--af);font-size:18px;line-height:1}
#ann button:hover,#ann button:focus-visible{background:rgba(255,255,255,.2);outline:0}
@media (prefers-reduced-motion:reduce){
#ann,#ann .ann-m{transition:none}
}
.util{height:24px;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted)}
.util .r{display:flex;gap:16px}
.dd{position:relative;display:inline-block}
.dd>button{font-size:11px;color:var(--muted);padding:2px 4px}
.menu{position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--bd);border-radius:8px;box-shadow:0 8px 24px rgba(20,20,40,.1);min-width:140px;padding:6px;display:none;z-index:60}
.dd.open>.menu{display:block}
.menu a,.menu button{display:block;width:100%;text-align:left;padding:6px 10px;border-radius:4px;font-size:12px;color:var(--dark)}
.menu a:hover,.menu button:hover{background:var(--grey);color:var(--blue)}
.hero-bg{background:linear-gradient(135deg,var(--peach),#F7F1EE)}
header{position:sticky;top:0;z-index:50;padding-top:12px}
nav.bar{background:#fff;border-radius:8px;height:52px;box-shadow:0 4px 20px rgba(20,20,40,.06);display:flex;align-items:center;justify-content:space-between;padding:0 20px;transition:box-shadow .3s}
header.stuck nav.bar{box-shadow:0 8px 28px rgba(20,20,40,.14)}
.logo{display:flex;align-items:center;gap:6px;font-weight:700;font-size:18px}
.logo b{color:var(--blue)}
.links{display:flex;gap:28px;align-items:center}
.links>a,.links .dd>button{font-size:13px;font-weight:500;padding:4px 0;border-bottom:2px solid transparent}
.links .act{font-weight:700;border-color:var(--dark)}
.links>a:hover,.links .dd>button:hover{color:var(--blue)}
.icons{display:flex;gap:6px}
header#hd.nostick{position:relative}
.logo .logo-img{display:block;height:28px;width:auto;max-width:160px;object-fit:contain}
#mob .logo .logo-img{height:30px}
@media (min-width:769px){
nav.bar[data-lay=center]{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
nav.bar[data-lay=center] .links{grid-column:1;grid-row:1;justify-self:start}
nav.bar[data-lay=center] .logo{grid-column:2;grid-row:1;justify-self:center}
nav.bar[data-lay=center] .icons{grid-column:3;grid-row:1;justify-self:end}
nav.bar[data-lay=right]{justify-content:flex-start}
nav.bar[data-lay=right] .links{margin-left:auto;margin-right:24px}
}
.ib{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;position:relative}
.ib:hover{background:var(--grey);color:var(--blue)}
.ib i{position:absolute;top:0;right:0;min-width:15px;height:15px;border-radius:8px;background:var(--blue);color:#fff;font:600 9px/15px "DM Sans";text-align:center;font-style:normal;padding:0 3px}
.ib i:empty{display:none}
#burger{display:none}
/* MOBILE MENU: modern off-canvas drawer (markup in footer.php, built by index.php) */
#mobov{position:fixed;inset:0;background:rgba(20,20,40,.5);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:110;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
#mobov.open{opacity:1;visibility:visible}
#mob{position:fixed;top:0;right:0;bottom:0;width:min(88vw,360px);height:100vh;height:100dvh;background:#fff;z-index:111;display:flex;flex-direction:column;transform:translateX(100%);visibility:hidden;transition:transform .32s cubic-bezier(.2,.8,.2,1),visibility .32s;box-shadow:-18px 0 48px rgba(20,20,40,.18);border-radius:20px 0 0 20px;overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom)}
#mob.open{transform:none;visibility:visible}
.mb-h{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px;padding-top:max(16px,env(safe-area-inset-top))}
.mb-h .logo{font-size:18px}
.mb-x{width:40px;height:40px;border-radius:50%;background:var(--soft,#F3F4F8);display:grid;place-items:center;color:var(--dark);transition:background .2s,transform .2s}
.mb-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mb-x:hover{background:#E6E9F2}
.mb-x:active{transform:scale(.94)}
.mb-n{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 14px 14px;display:flex;flex-direction:column;gap:4px}
#mob a.mb-l,#mob button.mb-l{display:flex;align-items:center;gap:14px;width:100%;min-height:52px;padding:0 14px;border:0;border-radius:14px;background:none;font:600 16px/1 inherit;font-family:inherit;color:var(--dark);text-align:left;cursor:pointer;transition:background .2s,color .2s}
#mob .mb-l:hover,#mob .mb-l:focus-visible{background:#F3F6FE;outline:0}
#mob .mb-l.act{background:#EAF1FF;color:var(--blue,#2F6FED)}
#mob .mb-l svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#mob .mb-l .chev{margin-left:auto;width:18px;height:18px;transition:transform .25s}
#mob .mb-l[aria-expanded=true] .chev{transform:rotate(180deg)}
.mb-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.mb-sub.open{grid-template-rows:1fr}
.mb-sub>div{overflow:hidden;display:flex;flex-direction:column;gap:2px;margin-left:33px;border-left:2px solid var(--bd,#E7E9F0);padding-left:10px}
.mb-sub.open>div{margin-top:2px;margin-bottom:4px}
#mob .mb-sub a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;font-weight:500;font-size:15px;color:#4B5563}
#mob .mb-sub a:hover,#mob .mb-sub a:focus-visible{background:#F3F6FE;color:var(--blue,#2F6FED);outline:0}
.mb-q{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px 18px 6px;border-top:1px solid var(--bd,#E7E9F0)}
.mb-q button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:14px;background:var(--soft,#F3F4F8);font:600 12px/1.1 inherit;font-family:inherit;color:var(--dark);cursor:pointer;transition:background .2s}
.mb-q button:hover,.mb-q button:focus-visible{background:#E6EEFF;outline:0}
.mb-q svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mb-f{padding:8px 18px 16px;font-size:12px;color:#6B7280;display:flex;gap:14px;flex-wrap:wrap}
.mb-f a{color:inherit;text-decoration:underline;text-underline-offset:3px}
body.mb-lock{overflow:hidden}
@media (min-width:901px){
#mob,#mobov{display:none}
}
@media (prefers-reduced-motion:reduce){
#mob,#mobov,.mb-sub,.mb-l .chev{transition:none}
}
@media (max-width:340px){
#mob{width:100vw;border-radius:0}
.mb-q{gap:6px;padding-left:12px;padding-right:12px}
}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:var(--pink);padding:4px 12px 4px 4px;background:#fff;border-radius:20px}
.pill.plain{background:none;padding:0}
.dot-i{width:22px;height:22px;border-radius:50%;background:currentColor;display:grid;place-items:center}
.dot-i svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:2}
.cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.btn{background:#fff;border-radius:6px;padding:10px 20px;font-weight:600;font-size:13px;display:inline-flex;gap:8px;align-items:center;box-shadow:0 2px 8px rgba(20,20,40,.06)}
.btn:hover{background:var(--blue);color:#fff}
.btn.blue{background:var(--blue);color:#fff;border-radius:4px}
.btn>svg{width:16px;height:16px;flex:none}
.btn.blue:hover{background:#1f57c9}
.art{position:relative;height:100%;display:grid;place-items:center}
.art:before{content:"";position:absolute;right:-40px;top:0;bottom:0;width:80%;background:rgba(255,255,255,.45);transform:skewX(-14deg)}
.art>svg{position:relative;width:300px;max-width:100%;filter:drop-shadow(0 20px 20px rgba(20,20,40,.2));transform:rotate(-8deg)}
.badge{z-index:2;position:absolute;left:14%;top:26%;width:78px;height:78px;border-radius:50%;background:#fff;display:grid;place-content:center;text-align:center;box-shadow:0 6px 18px rgba(20,20,40,.12);font-size:10px;color:var(--muted);line-height:1.2}
.badge b{color:var(--blue);font-size:16px}
/* categories & products */
section{margin-top:60px}
.head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px}
.head h2{font-size:20px;margin-top:4px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.sw{display:flex;gap:5px;margin-top:6px}
.sw span{width:9px;height:9px;border-radius:50%;background:var(--pink)}
.sw span:first-child{background:#F59E42;box-shadow:0 0 0 2px #fff,0 0 0 3px #F59E42}
.sw span:last-child{background:var(--purple)}
.more{text-align:center;margin-top:28px}
.more button{background:var(--grey);border-radius:6px;padding:10px 24px;font-size:11px;font-weight:500}
.more button:hover{background:var(--blue);color:#fff}
/* NEW SECTIONS: reveal animation */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*90ms)}
.rv.in{opacity:1;transform:none}
.sec-t{text-align:center;max-width:520px;margin:0 auto 32px}
.sec-t h2{font-size:26px;line-height:1.25;margin-top:6px}
.sec-t p{color:var(--muted);margin-top:8px}
/* 1 benefits */
.ben{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#fff;border:1px solid var(--bd);border-radius:14px;box-shadow:0 10px 40px rgba(20,20,40,.06);overflow:hidden}
.bn{padding:28px 24px;display:flex;gap:14px;align-items:flex-start;position:relative;transition:background .3s}
.bn+.bn{border-left:1px solid var(--bd)}
.bn:hover{background:var(--grey)}
.bn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bn h3{font-size:14px}
.bn p{font-size:12px;color:var(--muted);margin-top:2px}
/* 3 testimonials */
.tm{background:linear-gradient(135deg,#1F2430,#2B3350);border-radius:20px;padding:48px 40px;color:#fff;position:relative;overflow:hidden}
.tm:before,.tm:after{content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;animation:float 9s ease-in-out infinite}
.tm:before{width:240px;height:240px;background:var(--blue);top:-80px;left:-60px}
.tm:after{width:220px;height:220px;background:var(--pink);bottom:-90px;right:-40px;animation-delay:-4s}
@keyframes float{50%{transform:translate(30px,20px) scale(1.15)}}
.tm .sec-t p{color:#B9C0D4}
.tvp{position:relative;overflow:hidden}
.ttrack{display:flex;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.tc{flex:0 0 33.333%;padding:0 8px}
.tc div{height:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);border-radius:14px;padding:24px;transition:background .3s,transform .3s}
.tc div:hover{background:rgba(255,255,255,.12);transform:translateY(-4px)}
.tc p{font-size:13px;line-height:1.7;color:#E5E9F5;margin:10px 0 18px}
.who{display:flex;align-items:center;gap:10px;font-size:12px}
.who b{display:block;font-size:13px}
.who span{color:#9AA3BC}
.who i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:700 13px "DM Sans";font-style:normal}
@media (max-width:1024px){
.ben{grid-template-columns:repeat(2,1fr)}
.bn:nth-child(3){border-left:0}
.bn:nth-child(n+3){border-top:1px solid var(--bd)}
.tc{flex-basis:50%}
}
@media (max-width:600px){
.ben{grid-template-columns:1fr}
.bn+.bn{border-left:0;border-top:1px solid var(--bd)}
.tm{padding:36px 20px;border-radius:16px}
.tc{flex-basis:100%}
.sec-t h2{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
.rv{opacity:1;transform:none}
.tm:before,.tm:after{animation:none}
}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tab{padding:7px 16px;border-radius:20px;background:var(--grey);font-size:12px;font-weight:500}
.tab:hover{color:var(--blue)}
.tab.on{background:var(--dark);color:#fff}
@keyframes bob{50%{transform:translateY(-10px) rotate(-5deg)}}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.96)}}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
/* RESPONSIVE HARDENING (all sections) */
html{overflow-x:clip;-webkit-text-size-adjust:100%}
img,svg,input{max-width:100%}
#ann{font-size:11.5px;padding:6px 40px;gap:6px;flex-wrap:wrap}
.head{flex-wrap:wrap;gap:12px}
.head h2,.sec-t h2{font-size:clamp(20px,2.4vw + 10px,28px)}
.tabs{max-width:100%;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
.tabs::-webkit-scrollbar{display:none}
.tab{white-space:nowrap;flex:none}
.grid{min-width:0}
#sbox{margin:72px 12px}
@media (min-width:1025px) and (max-width:1200px){
.links{gap:18px}
}
@media (max-width:1024px){
.wrap{padding:0 20px}
section{margin-top:48px}
.tm{padding:40px 28px}
}
@media (max-width:900px){
.art>svg{width:240px}
.badge{left:6%;width:68px;height:68px}
}
@media (max-width:768px){
.art{min-height:260px}
.art:before{width:90%;right:-20px}
.util{font-size:10px}
section{margin-top:40px}
.more{margin-top:20px}
.fg{gap:24px}
.bot{justify-content:center;text-align:center}
}
@media (max-width:480px){
.wrap{padding:0 14px}
nav.bar{padding:0 10px;height:48px}
.logo{font-size:16px}
.logo svg{width:22px;height:22px}
.icons{gap:0}
.ib{width:32px;height:32px}
.badge{left:4%;top:6%}
.cta{gap:12px}
.btn{padding:9px 16px}
.head h2{font-size:19px}
.ben .bn{padding:18px}
.tm .sec-t p{font-size:13px}
.tc div{padding:20px}
.bot{font-size:11px}
#drawer{width:100%}
}
@media (max-width:340px){
.logo span{font-size:15px}
.ib{width:28px;height:28px}
}
.fg>*{min-width:0}
@media (max-width:480px){
.fg{grid-template-columns:minmax(0,1fr)}
.nl{flex-wrap:wrap}
.nl .btn{width:100%;justify-content:center}
}
/* CONTACT PAGE */
#contactPage{display:none}
body.contact #contactPage{display:block}
body.contact #home{display:none}
.chero{padding:40px 0 96px;text-align:center}
.crumb{font-size:12px;color:var(--muted);display:flex;justify-content:center;gap:8px}
.crumb a:hover{color:var(--blue)}
.crumb b{color:var(--dark);font-weight:500}
.chero h1{font-size:clamp(28px,4vw + 8px,44px);line-height:1.15;margin:14px 0 10px;letter-spacing:-.02em}
.chero p{color:var(--muted);max-width:520px;margin:0 auto}
.cbody{background:#fff;padding-bottom:20px}
.cside h2{font-size:22px}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{margin-bottom:14px;min-width:0}
.fld label{display:block;font-size:12px;font-weight:600;margin-bottom:6px}
.fld input,.fld textarea{width:100%;border:1.5px solid var(--bd);border-radius:8px;padding:12px 14px;font:inherit;font-size:14px;background:var(--grey);transition:border-color .25s,background .25s,box-shadow .25s}
.fld textarea{min-height:130px;resize:vertical}
.fld input:focus,.fld textarea:focus{outline:0;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(47,111,237,.12)}
.fld.err input,.fld.err textarea{border-color:var(--pink);animation:shake .4s}
.fld small{display:none;color:var(--pink);font-size:11px;margin-top:4px}
.fld.err small{display:block}
.cside{display:grid;gap:16px;min-width:0}
@media (max-width:900px){
.cside{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
.chero{padding:32px 0 84px}
}
@media (max-width:600px){
.cside{grid-template-columns:1fr}
.fr{grid-template-columns:1fr;gap:0}
}
/* ABOUT PAGE */
#aboutPage{display:none}
body.about #aboutPage{display:block}
body.about #home{display:none}
.tl{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;padding-top:34px}
.tl:before{content:"";position:absolute;top:9px;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--purple),var(--pink));transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.2,.7,.2,1) .2s}
.tl.in:before{transform:none}
.ts{position:relative;min-width:0}
.ts:before{content:"";position:absolute;top:-34px;left:0;width:20px;height:20px;border-radius:50%;background:#fff;border:4px solid var(--blue);box-shadow:0 0 0 5px rgba(47,111,237,.12)}
.ts b{font-size:18px}
.ts h3{font-size:14px;margin:2px 0 4px}
.ts p{font-size:13px;color:var(--muted)}
@media (max-width:1024px){
.tl{grid-template-columns:1fr;padding:0 0 0 34px;row-gap:28px}
.tl:before{top:0;bottom:0;left:9px;right:auto;width:2px;height:auto;transform:scaleY(0);transform-origin:top}
.tl.in:before{transform:none}
.ts:before{top:2px;left:-34px}
.ts{max-width:600px}
}
@media (max-width:600px){
.tl{grid-template-columns:1fr;padding:0 0 0 34px;row-gap:26px}
.tl:before{top:0;bottom:0;left:9px;right:auto;width:2px;height:auto;transform:scaleY(0);transform-origin:top}
.tl.in:before{transform:none}
.ts:before{top:2px;left:-34px}
}
@media (prefers-reduced-motion:reduce){
.tl:before{transform:none}
}
/* CART PAGE */
#cartPage{display:none}
body.cart #cartPage{display:block}
body.cart #home{display:none}
.cpanel{background:#fff;border:1px solid var(--bd);border-radius:16px;box-shadow:0 12px 36px rgba(20,20,40,.06);min-width:0}
.trust{display:flex;justify-content:center;gap:6px 14px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:14px}
/* WISHLIST PAGE */
#wishPage{display:none}
body.wishlist #wishPage{display:block}
body.wishlist #home{display:none}
/* SHOP PAGE */
#shopPage{display:none}
body.shop #shopPage{display:block}
body.shop #home{display:none}
.prow{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.prow b{color:var(--dark)}
/* PRODUCT DETAIL PAGE */
#productPage{display:none}
body.product #productPage{display:block}
body.product #home{display:none}
.vsub{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.swr{display:flex;gap:10px}
.sw2{width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7),0 0 0 1px var(--bd);transition:.25s}
.sw2:hover{transform:scale(1.1)}
.sw2.on{box-shadow:inset 0 0 0 3px #fff,0 0 0 2px var(--blue)}
body.lb-lock{overflow:hidden;padding-right:var(--lbsw,0px)}
.lb{position:fixed;inset:0;z-index:1000;display:none;background:rgba(10,12,20,.97);color:#fff;overscroll-behavior:contain}
.lb.on{display:block;animation:lbIn .22s ease}
.lb [hidden]{display:none!important}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:76px 20px;overflow:hidden;touch-action:none}
.lb-fig{display:block;max-width:100%;max-height:100%;transform-origin:50% 50%;will-change:transform;cursor:zoom-in;user-select:none;-webkit-user-select:none}
.lb-fig img{display:block;width:auto;height:auto;max-width:calc(100vw - 40px);max-height:calc(100vh - 152px);max-height:calc(100dvh - 152px);border-radius:6px;pointer-events:none;-webkit-user-drag:none}
.lb-fig.art{width:min(78vw,calc(100vh - 160px))}
.lb-fig.art svg{display:block;width:100%;height:auto}
.lb-top{position:absolute;left:0;right:0;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:max(12px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 12px max(14px,env(safe-area-inset-left));pointer-events:none}
.lb-top button{pointer-events:auto}
.lb-cnt{font-size:13px;font-weight:600;background:rgba(255,255,255,.14);padding:7px 13px;border-radius:999px}
.lb-tools{display:flex;align-items:center;gap:8px;margin-left:auto}
.lb-b{height:42px;min-width:42px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:600;line-height:1;transition:background .2s,opacity .2s,transform .2s;-webkit-tap-highlight-color:transparent}
.lb-b:hover{background:rgba(255,255,255,.28)}
.lb-b:disabled{opacity:.35;cursor:default;background:rgba(255,255,255,.16)}
.lb-b svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lb-x{width:46px;height:46px;padding:0;background:#fff;color:#111}
.lb-x:hover{background:#fff;transform:scale(1.06)}
.lb-b:focus-visible{outline:3px solid #fff;outline-offset:2px}
.lb-nav{position:absolute;top:50%;margin-top:-23px;z-index:2;width:46px;height:46px;padding:0}
.lb-nav.prev{left:max(12px,env(safe-area-inset-left))}
.lb-nav.next{right:max(12px,env(safe-area-inset-right))}
.lb-hint{position:absolute;left:0;right:0;bottom:max(14px,env(safe-area-inset-bottom));text-align:center;font-size:12px;opacity:.65;pointer-events:none}
@media (max-width:600px){
.lb-stage{padding:72px 8px}
.lb-fig img{max-width:calc(100vw - 16px);max-height:calc(100vh - 144px);max-height:calc(100dvh - 144px)}
.lb-hint{display:none}
.lb-nav{width:40px;height:40px;margin-top:-20px}
}
@media (prefers-reduced-motion:reduce){
.lb.on{animation:none}
.lb-b{transition:none}
}
/* CHECKOUT PAGE */
#checkoutPage{display:none}
body.checkout #checkoutPage{display:block}
body.checkout #home{display:none}
.fld select{width:100%;border:1.5px solid var(--bd);border-radius:8px;padding:12px 14px;font:inherit;font-size:14px;background:var(--grey);color:var(--dark)}
.fld select:focus{outline:0;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(47,111,237,.12)}
.fr3{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:14px}
.ckplace{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px}
.ckplace span{font-size:13px;color:var(--muted)}
.ckplace b{font-size:22px;color:var(--dark);margin-left:6px}
.ckplace .btn{height:50px;padding:0 34px;font-size:15px;flex:1 1 200px;justify-content:center;max-width:320px}
.ckplace .btn.load{pointer-events:none;opacity:.8}
@media (max-width:600px){
.fr3{grid-template-columns:1fr;gap:0}
.ckplace .btn{max-width:none}
}
/* FAQ / TRACK / RETURNS PAGES */
#faqPage,#trackPage,#returnsPage{display:none}
body.faq #faqPage,body.track #trackPage,body.returns #returnsPage{display:block}
body.faq #home,body.track #home,body.returns #home{display:none}
.pgnote{font-size:11px;color:var(--muted);margin-top:12px}
.ktrust{list-style:none;display:grid;gap:8px;margin-top:16px;font-size:12px;color:var(--muted)}
.ktrust li{display:flex;align-items:center;gap:10px}
.ktrust svg{width:16px;height:16px;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* BLOG PAGE */
#blogPage{display:none}
body.blog #blogPage{display:block}
body.blog #home{display:none}
.bcimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* article: see SINGLE ARTICLE REDESIGN at the end of this file */
#rprog{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--blue),var(--pink));z-index:120;display:none}
/* footer */
footer{margin-top:70px;background:var(--grey);padding-top:48px}
.fg{display:grid;grid-template-columns:var(--fgt,1.5fr 1fr 1fr 1fr 1.5fr);gap:32px}
/* --fgt is set by the footer script when the admin hides a column or the newsletter */
footer h4{font-size:14px;margin-bottom:12px}
footer li{list-style:none;margin-bottom:8px;font-size:13px;color:var(--muted)}
footer li a:hover{color:var(--blue)}
footer p{font-size:13px;color:var(--muted);margin:10px 0}
.fct{font-size:13px;color:var(--muted);margin:10px 0}
.fct a{display:block;margin-bottom:4px;overflow-wrap:anywhere}
.fct a:hover{color:var(--blue)}
.soc{display:flex;gap:8px}
.soc a{width:30px;height:30px;border-radius:50%;background:#fff;display:grid;place-items:center;font-weight:700;font-size:11px}
.soc a:hover{background:var(--blue);color:#fff}
.nl{display:flex;gap:8px}
.nl input{flex:1;min-width:0;border:1px solid var(--bd);border-radius:6px;padding:9px 12px;font:inherit;font-size:13px}
.bot{margin-top:36px;padding:18px 0;border-top:1px solid #E3E6EC;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);flex-wrap:wrap;gap:10px}
.pay{display:flex;gap:6px}
.pay svg{width:38px;height:24px}
.btt{position:fixed;right:20px;bottom:calc(24px + env(safe-area-inset-bottom,0px));width:42px;height:42px;border-radius:50%;border:0;background:var(--blue);color:#fff;box-shadow:0 6px 18px rgba(20,20,40,.22);display:grid;place-items:center;cursor:pointer;z-index:60;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s,transform .25s,visibility .25s,background .2s}
.btt[hidden]{display:none}
.btt.show{opacity:1;visibility:visible;transform:none}
.btt.up{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
.btt:hover{background:var(--dark)}
.btt:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.btt svg{width:18px;height:18px}
@media (prefers-reduced-motion:reduce){
.btt{transition:none}
}
@media print{
.btt{display:none!important}
}
/* overlays */
#ov{position:fixed;inset:0;background:rgba(20,20,40,.5);display:none;z-index:90}
#ov.open{display:block}
#sbox{background:#fff;max-width:560px;margin:80px auto;border-radius:8px;padding:16px}
#sbox input{width:100%;border:1px solid var(--bd);border-radius:6px;padding:12px;font:inherit}
#sres{margin-top:8px;max-height:50vh;overflow:auto}
#sres a{display:flex;justify-content:space-between;padding:8px;border-radius:4px;font-size:13px}
#sres a:hover{background:var(--grey)}
#drawer{position:fixed;top:0;right:0;bottom:0;width:340px;max-width:100%;background:#fff;z-index:95;transform:translateX(100%);visibility:hidden;transition:transform .3s ease,visibility .3s,box-shadow .3s;display:flex;flex-direction:column;box-shadow:none}
#drawer.open{transform:none;visibility:visible;box-shadow:-8px 0 30px rgba(20,20,40,.15)}
#drawer header{position:static;padding:16px;display:flex;justify-content:space-between;font-weight:700;border-bottom:1px solid var(--bd)}
#items{flex:1;overflow:auto;padding:8px 16px}
.ci{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--bd);font-size:12px}
.ci .t{width:44px;height:44px;background:var(--grey);border-radius:6px;display:grid;place-items:center}
.ci .t svg{width:32px;height:32px}
.ci div:nth-child(2){flex:1}
.q{display:flex;align-items:center;gap:6px;margin-top:4px}
.q button{width:20px;height:20px;background:var(--grey);border-radius:4px}
.tot{padding:16px;border-top:1px solid var(--bd);display:flex;justify-content:space-between;font-weight:700}
#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:var(--dark);color:#fff;padding:10px 18px;border-radius:6px;font-size:13px;opacity:0;transition:.3s;z-index:99;pointer-events:none}
#toast.show{opacity:1;transform:translate(-50%,0)}
/* RESPONSIVE */
@media (max-width:1024px){
.grid{grid-template-columns:repeat(3,1fr)}
.fg{grid-template-columns:1fr 1fr}
.fg>.fnl{grid-column:1/-1}
}
@media (max-width:768px){
.links{display:none}
#burger{display:grid}
.grid{grid-template-columns:repeat(2,1fr)}
.art{min-height:240px}
.badge{left:10%;top:10%}
}
@media (max-width:480px){
.util{display:none}
.wrap{padding:0 16px}
.fg{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
*{transition:none!important}
}
.pimg{display:block;width:100%;height:100%;object-fit:contain}
.ci .t .pimg{padding:3px;box-sizing:border-box}
.psub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;color:var(--muted);line-height:1.35;margin:2px 0 6px}
.psub b{color:var(--dark);font-weight:600}
/* UI IMPROVEMENTS: hero gap, categories hover, top benefits strip (appended last so it layers over earlier rules) */
:root{--hero-gap:clamp(16px,2.4vw,24px)}
/* 1. consistent breathing room between the hero banner and the first element below it (all inner pages).
   The old negative margin on the first element collapsed through .cbody, so the white page area started exactly at the card's top edge.
   Now .cbody carries the overlap itself and keeps its own top padding, so the first element always sits --hero-gap below where the white area starts. */
.cbody{margin-top:-56px;padding-top:var(--hero-gap)}
@media (max-width:768px){
.cbody{margin-top:-48px}
}
/* TERMS & POLICIES PAGE */
#termsPage{display:none}
body.terms #termsPage{display:block}
body.terms #home{display:none}
@media print{
#ann,header,footer,.crumb{display:none!important}
.hero-bg{background:none}
.cbody{margin-top:0;padding-top:0}
}
/* INNER-PAGE HERO FIX (about, contact, blog, shop, product, track, faq, returns, terms, cart, wishlist, checkout).
   The hero element is "wrap chero": the .wrap shorthand padding (media queries) was overriding .chero's vertical padding, so the intro
   text slid under the white content card on phones, and the #page .chero shorthands zeroed the side padding on tablets.
   Longhand properties placed last keep vertical space and side gutters independent of each other at every width. */
.chero{padding-top:40px;padding-bottom:96px;padding-left:24px;padding-right:24px}
.crumb{flex-wrap:wrap;row-gap:4px}
.chero h1,.chero p{overflow-wrap:anywhere}
@media (max-width:1024px){
.chero{padding-left:20px;padding-right:20px}
}
@media (max-width:768px){
.chero{padding-top:32px;padding-bottom:84px}
}
@media (max-width:480px){
.chero{padding-left:16px;padding-right:16px}
}
/* FEATURED SHOWCASE: infinite-loop coverflow carousel (blue/lilac/peach theme). Card sizes/positions are set by JS from the container width. */
:root{--fp-serif:"Playfair Display",Georgia,"Times New Roman",serif}
.fp-sec{margin-top:clamp(48px,6vw,72px)}
.fp{position:relative;overflow:hidden;isolation:isolate;border-radius:clamp(16px,2.4vw,28px);padding:clamp(28px,4.5vw,54px) 0 clamp(20px,2.8vw,32px);background:linear-gradient(135deg,#F2F6FE 0%,#F6F1FC 55%,#FDF1EC 100%);border:1px solid var(--bd)}
.fp:before,.fp:after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none;animation:float 11s ease-in-out infinite}
.fp:before{width:300px;height:300px;background:#CFDDFB;top:-120px;left:-80px}
.fp:after{width:260px;height:260px;background:#F6D3E1;bottom:-110px;right:-60px;animation-delay:-5s}
.fp-head{text-align:center;max-width:640px;margin:0 auto clamp(6px,1.4vw,14px);padding:0 20px}
.fp-eye{display:block;font:600 clamp(10.5px,.25vw + 9.5px,12.5px)/1 "DM Sans",system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--purple)}
.fp-head h2{font-family:var(--fp-serif);font-weight:700;font-size:clamp(28px,3.6vw + 10px,54px);line-height:1.1;letter-spacing:-.01em;margin-top:12px;color:var(--dark)}
.fp-head p{color:var(--muted);margin-top:10px;font-size:clamp(13px,.4vw + 12px,16px)}
.fp-stage{position:relative;height:460px;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;outline:0}
.fp-stage:focus-visible{box-shadow:inset 0 0 0 2px var(--blue)}
.fp-card{position:absolute;left:50%;top:50%;display:flex;flex-direction:column;background:#fff;border:1px solid var(--bd);border-radius:clamp(16px,1.8vw,22px);padding:clamp(9px,1vw,12px) clamp(9px,1vw,12px) clamp(11px,1.2vw,15px);box-shadow:0 10px 28px rgba(20,20,40,.07);overflow:hidden;
transition:transform .7s cubic-bezier(.2,.7,.2,1),width .7s cubic-bezier(.2,.7,.2,1),height .7s cubic-bezier(.2,.7,.2,1),opacity .5s,visibility .5s,box-shadow .5s,border-color .4s}
.fp-card.nt{transition:none!important}
.fp-card.hid{opacity:0;visibility:hidden;pointer-events:none}
.fp-card.on{z-index:3;border-color:#C9D8FA;box-shadow:0 28px 56px rgba(47,111,237,.2),0 6px 16px rgba(20,20,40,.06)}
.fp-card:not(.on){cursor:pointer}
.fp-card:not(.on):hover{box-shadow:0 16px 36px rgba(20,20,40,.12)}
.fp-badge{position:absolute;top:clamp(16px,1.8vw,20px);left:clamp(16px,1.8vw,20px);z-index:2;font:700 clamp(9px,.2vw + 8px,10.5px)/1 "DM Sans",system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;padding:6px 10px;border-radius:20px;background:#EAF0FE;color:var(--blue);white-space:nowrap}
.fp-badge.b2{background:#FDE8EF;color:var(--pink)}
.fp-badge.b3{background:#F1EBFC;color:var(--purple)}
.fp-heart{position:absolute;top:clamp(14px,1.6vw,18px);right:clamp(14px,1.6vw,18px);z-index:2;width:clamp(28px,2.4vw,34px);height:clamp(28px,2.4vw,34px);border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(20,20,40,.1);color:var(--dark)}
.fp-heart svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.fp-heart:hover{background:var(--pink);color:#fff;transform:scale(1.08)}
.fp-heart.on{background:var(--pink);color:#fff}
.fp-heart.on svg{fill:#fff}
.fp-img{position:relative;flex:none;aspect-ratio:1/.9;border-radius:clamp(12px,1.4vw,16px);background:radial-gradient(circle at 50% 40%,#fff 0,#EEF2FD 74%);display:grid;place-items:center;overflow:hidden}
.fp-card.on .fp-img{aspect-ratio:1/.82}
.fp-img>svg{width:62%;height:62%;filter:drop-shadow(0 14px 14px rgba(20,20,40,.2));transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.fp-img>.pimg{position:absolute;inset:0;padding:10px;box-sizing:border-box;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .35s}
.fp-card.on .fp-img>svg,.fp-card.on .fp-img>.pimg{transform:scale(1.06)}
.fp-gd{display:flex;justify-content:center;gap:5px;margin-top:9px;min-height:6px}
.fp-gd button{width:6px;height:6px;border-radius:50%;background:#C9D2E6;transition:background .3s,transform .3s,width .3s}
.fp-gd button.on{background:var(--blue);width:14px;border-radius:4px}
.fp-card h3{font-family:var(--fp-serif);font-weight:600;font-size:clamp(14px,.5vw + 11px,16px);line-height:1.25;margin-top:clamp(8px,1vw,12px);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--dark)}
.fp-card.on h3{font-size:clamp(16px,.9vw + 12px,21px)}
.fp-d{font-size:clamp(11.5px,.2vw + 10.5px,13px);line-height:1.45;color:var(--muted);margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fp-d:empty{display:none}
.fp-rt{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);margin-top:7px;min-height:16px}
.fp-rt i{color:var(--star);font-style:normal;font-size:13px}
.fp-rt b{color:var(--dark);font-weight:600}
.fp-ft{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:10px}
.fp-pr{min-width:0}
.fp-pr b{font-size:clamp(16px,.5vw + 12px,19px);letter-spacing:-.01em;display:block;line-height:1.15}
.fp-pr s{display:block;font-size:11px;color:#9CA3AF;line-height:1.2}
.fp-card.on .fp-pr b{font-size:clamp(18px,.6vw + 13px,22px)}
.fp-ic{flex:none;width:clamp(34px,2.6vw,40px);height:clamp(34px,2.6vw,40px);border-radius:50%;background:#EAF0FE;color:var(--blue);display:grid;place-items:center}
.fp-ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
.fp-ic:hover{background:var(--blue);color:#fff;transform:translateY(-2px)}
.fp-add{display:none;flex:none;height:clamp(38px,2.8vw,42px);padding:0 clamp(11px,1vw,14px);border-radius:10px;background:var(--blue);color:#fff;font-weight:600;font-size:clamp(12px,.2vw + 11px,13px);align-items:center;justify-content:center;gap:6px;box-shadow:0 10px 20px rgba(47,111,237,.3);white-space:nowrap}
.fp-add svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;flex:none}
.fp-add:hover{background:#1f57c9;transform:translateY(-2px)}
.fp-card.on .fp-add{display:inline-flex}
.fp-card.on .fp-ic{display:none}
.fp-nav{position:absolute;top:50%;z-index:6;width:clamp(36px,3vw,44px);height:clamp(36px,3vw,44px);border-radius:50%;background:#fff;box-shadow:0 8px 22px rgba(20,20,40,.16);display:grid;place-items:center;font-size:22px;line-height:1;transform:translateY(-50%);color:var(--dark)}
.fp-nav:hover{background:var(--blue);color:#fff}
.fp-dots{display:flex;justify-content:center;gap:9px;padding:0 20px;flex-wrap:wrap;margin-top:2px}
.fp-dots button{width:9px;height:9px;border-radius:50%;background:#C9D2E6;transition:width .35s,background .35s}
.fp-dots button.on{width:26px;border-radius:5px;background:var(--blue)}
.fp-more{text-align:center;margin-top:18px}
.fp-more .btn{font-size:13px;background:#fff}
.fp-more .btn:hover{background:var(--blue);color:#fff}
@media (max-width:620px){
.fp-nav{display:none}
.fp-more{margin-top:14px}
}
@media (prefers-reduced-motion:reduce){
.fp:before,.fp:after{animation:none}
.fp-card{transition:none}
}
.sf-ov{display:none}
@media (max-width:900px){
.sf-ov{display:block;position:fixed;inset:0;z-index:2000;background:rgba(15,18,30,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s}
.sf-ov.on{opacity:1;pointer-events:auto}
body.sf-lock{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){
.sf-ov{transition:none!important}
}
/* ===== Home page motion layer =====
   Everything is gated behind html.hx-on, which the script below only sets when motion is allowed and
   IntersectionObserver exists, so content is never left hidden. Animations use fill-mode "backwards"
   so they release the element when finished and never fight the existing hover transforms. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.hx-on *,.hx-on *::before,.hx-on *::after{animation:none!important}
}
/* ===== STICKY HEADER =====
   Set up by the STICKY HEADER block in script.js: .fx = pinned to the top of the screen (the page keeps its layout through #hdsp),
   .stuck = scrolled, so the bar turns into a frosted-glass bar with a softer shadow. Only the look changes, never the size. */
:root{--hdh:64px;--hd-ease:cubic-bezier(.2,.7,.2,1)}
html{scroll-padding-top:calc(var(--hdh) + 12px)}
#hdsp{display:block;height:0;pointer-events:none}
header#hd.fx{position:fixed;top:0;left:0;right:0;width:100%}
header#hd nav.bar{transition:transform .45s var(--hd-ease),box-shadow .45s var(--hd-ease),background-color .45s var(--hd-ease),border-radius .45s var(--hd-ease),margin .45s var(--hd-ease),padding .45s var(--hd-ease),-webkit-backdrop-filter .45s,backdrop-filter .45s;will-change:transform}
/* Pinned: the bar grows to the full visible width (--vw, set in script.js; 100vw is the fallback). The negative margin pulls the edges out to the screen
   edges and the extra padding gives the same amount back, so the logo, links and icons stay exactly where they were. 100% = the width of the page column. */
header#hd.stuck nav.bar{background-color:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(170%) blur(14px);backdrop-filter:saturate(170%) blur(14px);border-radius:0;box-shadow:0 1px 0 rgba(20,20,40,.06),0 12px 30px rgba(20,20,40,.12);transform:translateY(-12px);margin-inline:calc((100% - var(--vw,100vw)) / 2);padding-inline:calc((var(--vw,100vw) - 100%) / 2 + 20px)}
header#hd.stuck .logo,header#hd.stuck .ib{transition:transform .45s var(--hd-ease)}
header#hd .ib{transition:background-color .25s,color .25s,transform .45s var(--hd-ease)}
header#hd .logo{transition:transform .45s var(--hd-ease)}
header#hd.stuck .logo{transform:scale(.96);transform-origin:left center}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
header#hd.stuck nav.bar{background-color:#fff}
}
@media (max-width:480px){
header#hd.stuck nav.bar{padding-inline:calc((var(--vw,100vw) - 100%) / 2 + 10px)}
}
@media (prefers-reduced-motion:reduce){
header#hd nav.bar,header#hd .logo,header#hd .ib{transition:none}
header#hd.stuck .logo{transform:none}
}
@media print{
#hdsp{display:none}
}
#wrec>.scard .n{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;min-width:0;line-height:1.4}
/* ===== CART DRAWER: modern, fully responsive ===== */
#drawer{width:420px;max-width:100%;height:100vh;height:100dvh;border-radius:20px 0 0 20px;overflow:hidden;z-index:96;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility .35s,box-shadow .35s}
#drawer.open{box-shadow:0 0 0 100vmax rgba(20,22,40,.42),-12px 0 40px rgba(20,20,40,.18)}
#drawer header{flex:0 0 auto;align-items:center;padding:18px 20px;padding-top:calc(18px + env(safe-area-inset-top,0px));font-size:17px;border-bottom:1px solid var(--bd);background:#fff}
#drawer .dttl{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--dark)}
#drawer .dttl em{font-style:normal;font-size:11px;font-weight:600;color:var(--blue);background:rgba(47,111,237,.1);padding:4px 10px;border-radius:999px}
#drawer .dttl em:empty{display:none}
#cx{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--grey);color:var(--dark);font-size:0;transition:background .2s,color .2s,transform .2s}
#cx:hover{background:var(--pink);color:#fff;transform:rotate(90deg)}
#drawer #items{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:12px 20px}
#drawer .ci{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:6px 14px;align-items:start;padding:14px 0;border-bottom:1px solid var(--bd);font-size:13px}
#drawer .ci:last-child{border-bottom:0}
#drawer .ci .t{width:64px;height:64px;border-radius:12px;overflow:hidden}
#drawer .ci .t svg{width:44px;height:44px}
#drawer .ci .cmeta{min-width:0;flex:none}
#drawer .cn{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.35;color:var(--dark);overflow-wrap:anywhere}
#drawer .vsub{display:block;font-size:11px;color:var(--muted);margin-top:2px}
#drawer .q{display:inline-flex;align-items:center;gap:0;margin-top:10px;border:1px solid var(--bd);border-radius:999px;background:#fff;overflow:hidden}
#drawer .q button{width:30px;height:30px;border-radius:0;background:transparent;font-size:15px;line-height:1;color:var(--dark);transition:background .2s,color .2s}
#drawer .q button:hover{background:var(--blue);color:#fff}
#drawer .q span{min-width:28px;text-align:center;font-weight:600;font-size:13px}
#drawer .cside{display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right}
#drawer .cp{font-weight:700;font-size:14px;color:var(--dark);white-space:nowrap}
#drawer .crm2{color:var(--pink);font-size:12px;font-weight:600;padding:4px 0;margin-top:auto}
#drawer .crm2:hover{text-decoration:underline}
#drawer .dempty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:56px 16px;color:var(--muted);font-size:13px}
#drawer .dempty svg{width:64px;height:64px;color:var(--blue);background:rgba(47,111,237,.08);border-radius:50%;padding:16px;box-sizing:border-box;margin-bottom:6px}
#drawer .dempty b{font-size:16px;color:var(--dark)}
#drawer .dempty .btn{margin-top:12px;padding:10px 22px}
#drawer .dfoot{flex:0 0 auto;padding:16px 20px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--bd);background:#fff;box-shadow:0 -10px 24px rgba(20,20,40,.05)}
#drawer .dfoot .tot{padding:0;border:0;font-size:16px;color:var(--dark)}
#drawer .dnote{margin:4px 0 14px;font-size:11px;color:var(--muted)}
#drawer #vc{display:flex;width:100%;justify-content:center;padding:14px;font-size:14px;border-radius:12px;box-sizing:border-box}
#drawer.empty .dfoot{display:none}
@media (max-width:768px){
#drawer{width:min(100%,400px)}
}
@media (max-width:480px){
#drawer{width:100%;border-radius:0}
#drawer.open{box-shadow:none}
#drawer header{padding:14px 16px;padding-top:calc(14px + env(safe-area-inset-top,0px))}
#drawer #items{padding:8px 16px}
#drawer .dfoot{padding:14px 16px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
#drawer .ci{grid-template-columns:56px minmax(0,1fr) auto;gap:6px 12px}
#drawer .ci .t{width:56px;height:56px}
#drawer .ci .t svg{width:38px;height:38px}
#drawer .q button{width:34px;height:34px}
}
@media (max-width:340px){
#drawer .ci{grid-template-columns:48px minmax(0,1fr)}
#drawer .ci .t{width:48px;height:48px}
#drawer .cside{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}
}
@media (prefers-reduced-motion:reduce){
#drawer,#cx{transition:none}
}
/* product names are real links (search engines follow them); they look exactly like the plain text did */
.n>a{color:inherit;text-decoration:none;font:inherit;letter-spacing:inherit}
.n>a:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:3px}
/* ===================================================================
   MODERN HEADER v2  (announcement bar + main nav + search overlay)
   Pure restyle: markup/JS hooks (#ann, #hd, .bar, .links, .ib, #burger, .stuck, .fx) are unchanged.
   Breakpoints: >1024 desktop (search pill) | 901-1024 compact desktop | <=900 burger + drawer | <=480 phone | <=360 small phone
   =================================================================== */
header#hd{--hdt:12px;--bp:22px;--bh:64px;padding-top:var(--hdt)}
/* ---------- announcement bar ---------- */
#ann{--ab:linear-gradient(90deg,#F2926A,#E9703F);font-size:13px;font-weight:500;letter-spacing:.01em;min-height:40px;padding:8px 52px;gap:10px;row-gap:4px;flex-wrap:wrap}
#ann a{display:inline-flex;align-items:center;gap:5px;text-decoration:none;font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);transition:background-color .2s}
#ann a::after{content:"\2192";display:inline-block;transition:transform .2s}
#ann a:hover,#ann a:focus-visible{background:rgba(255,255,255,.34)}
#ann a:hover::after{transform:translateX(3px)}
#ann button{right:12px;width:32px;height:32px}
/* ---------- main bar ---------- */
header#hd nav.bar{height:var(--bh);padding:0 var(--bp);gap:16px;border-radius:18px;background-color:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(160%) blur(12px);backdrop-filter:saturate(160%) blur(12px);box-shadow:0 0 0 1px rgba(20,20,40,.05),0 10px 32px rgba(20,20,40,.08)}
/* scrolled state: keeps the full-width frosted bar from script.js, re-aligned to the new padding / top gap */
header#hd.stuck nav.bar{border-radius:0;transform:translateY(calc(var(--hdt) * -1));margin-inline:calc((100% - var(--vw,100vw)) / 2);padding-inline:calc((var(--vw,100vw) - 100%) / 2 + var(--bp))}
/* logo */
header#hd .logo{gap:10px;flex:none;min-width:0;font-size:21px;font-weight:700;letter-spacing:-.025em;line-height:1}
header#hd .logo svg{flex:none;width:38px;height:38px;padding:7px;border-radius:12px;background:linear-gradient(135deg,#EEF4FF,#D8E5FF);box-shadow:inset 0 0 0 1px rgba(47,111,237,.16);transition:transform .35s var(--hd-ease)}
header#hd .logo:hover svg{transform:rotate(-6deg) scale(1.06)}
header#hd .logo .logo-img{height:34px;max-width:170px}
/* nav links */
header#hd .links{gap:4px}
header#hd .links>a,header#hd .links .dd>button{display:inline-flex;align-items:center;gap:4px;padding:9px 14px;border:0;border-radius:12px;font-size:14px;font-weight:500;line-height:1.2;color:#374151;transition:background-color .2s,color .2s}
header#hd .links>a:hover,header#hd .links .dd>button:hover,header#hd .links .dd.open>button{background:var(--grey);color:var(--dark)}
header#hd .links>a.act{background:#EAF1FF;color:var(--blue);font-weight:600;border:0}
/* dropdown panel (fades in; an invisible bridge keeps hover from dropping in the gap) */
header#hd .links .menu{display:block;top:calc(100% + 18px);left:0;min-width:210px;padding:8px;border:1px solid var(--bd);border-radius:16px;background:#fff;box-shadow:0 22px 50px rgba(20,20,40,.16);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility .2s}
header#hd .links .dd.open>.menu{opacity:1;visibility:visible;pointer-events:auto;transform:none}
header#hd .links .menu::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}
header#hd .links .menu a{padding:10px 12px;border-radius:10px;font-size:13.5px;font-weight:500;color:#374151}
header#hd .links .menu a:hover,header#hd .links .menu a:focus-visible{background:#F3F6FE;color:var(--blue)}
header#hd nav.bar[data-lay=right] .links .dd:last-child .menu{left:auto;right:0}
/* icon buttons */
header#hd .icons{gap:4px;align-items:center;flex:none}
header#hd .ib{width:42px;height:42px;border-radius:12px;color:#374151;-webkit-tap-highlight-color:transparent}
header#hd .ib svg{width:20px;height:20px;flex:none}
header#hd .ib:hover{background:var(--grey);color:var(--blue)}
header#hd .ib:active{transform:scale(.93)}
header#hd .ib i{top:3px;right:1px;min-width:17px;height:17px;padding:0 4px;font-size:10px;line-height:17px;background:linear-gradient(135deg,#F0598D,var(--pink));box-shadow:0 0 0 2px #fff}
header#hd.stuck .ib i{box-shadow:0 0 0 2px rgba(255,255,255,.9)}
header#hd #burger{background:var(--grey);margin-left:4px}
header#hd #burger:hover{background:#E6EEFF}
header#hd .ib-t{display:none}
/* ---------- wide desktop: search becomes a pill ---------- */
@media (min-width:1025px){
header#hd #sb{display:inline-flex;align-items:center;justify-content:flex-start;gap:10px;width:auto;min-width:200px;padding:0 16px 0 13px;margin-right:6px;background:var(--grey);color:var(--muted);box-shadow:inset 0 0 0 1px var(--bd)}
header#hd #sb:hover{background:#EDF2FD;color:var(--blue)}
header#hd #sb .ib-t{display:inline;font-size:13px;font-weight:500;white-space:nowrap}
}
/* ---------- compact desktop / large tablet ---------- */
@media (min-width:901px) and (max-width:1024px){
header#hd{--bp:18px}
header#hd .links{gap:2px}
header#hd .links>a,header#hd .links .dd>button{padding:8px 10px;font-size:13.5px}
}
/* ---------- tablet + phones: burger opens the off-canvas drawer ---------- */
@media (max-width:900px){
header#hd{--bp:16px;--bh:60px}
header#hd .links{display:none}
header#hd #burger{display:grid}
header#hd nav.bar[data-lay]{display:flex;justify-content:space-between}
}
/* ---------- phones ---------- */
@media (max-width:480px){
#ann{font-size:11.5px;padding:8px 38px;gap:6px 8px}
#ann a{font-size:11px;padding:3px 9px}
#ann button{right:6px}
header#hd{--hdt:10px;--bp:12px;--bh:56px}
header#hd nav.bar{border-radius:16px;gap:8px}
header#hd .logo{gap:8px;font-size:19px}
header#hd .logo svg{width:34px;height:34px;padding:6px;border-radius:11px}
header#hd .logo .logo-img{height:30px;max-width:130px}
header#hd .icons{gap:2px}
header#hd .ib{width:40px;height:40px}
header#hd #burger{margin-left:2px}
}
@media (max-width:360px){
header#hd{--bp:10px}
header#hd .logo{gap:6px;font-size:17px}
header#hd .logo svg{width:30px;height:30px;padding:5px;border-radius:10px}
header#hd .icons{gap:0}
header#hd .ib{width:36px;height:36px}
header#hd .ib svg{width:19px;height:19px}
header#hd .ib i{top:1px;right:0;min-width:16px;height:16px;line-height:16px}
}
@media (max-width:300px){
header#hd .logo span{display:none}
}
/* foldables: icon-only logo so nothing is pushed off-screen */
/* ---------- search overlay (opened from the header) ---------- */
#ov{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
#sbox{border-radius:20px;box-shadow:0 30px 80px rgba(20,20,40,.28)}
#sbox input{border-radius:12px;padding:14px 16px;font-size:16px;transition:border-color .2s,box-shadow .2s}
/* 16px stops iOS zooming on focus */
#sbox input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(47,111,237,.14)}
/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
#ann a,#ann a::after,header#hd .logo svg,header#hd .links .menu,header#hd .links>a,header#hd .ib{transition:none}
header#hd .logo:hover svg,header#hd .ib:active{transform:none}
}