:root{
--white:#FFFFFF;
--gray:#F5F5F7;
--gray-2:#EDEDF0;
--ink:#1C1C1E;
--ink-2:#3A3A3C;
--muted:#6E6E73;
--line:#D2D2D7;
--blue:#007AFF;
--blue-press:#0062CC;
--shadow:0 0.625rem 2.5rem rgba(0,0,0,0.05);
--shadow-hover:0 1rem 3.125rem rgba(0,0,0,0.09);
--r-sm:0.875rem; --r-md:1.25rem; --r-lg:1.75rem; --r-xl:2.125rem;
--wrap:73.75rem;
--gutter:1.25rem;
--font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
margin:0;background:var(--white);color:var(--ink);
font-family:var(--font);font-size:1.0625rem;line-height:1.5;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
letter-spacing:-.011em;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.03em;line-height:1.06;font-family:var(--font)}
button,input,select,textarea{font-family:var(--font)}
p{margin:0}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
@media(min-width:40rem){ :root{--gutter:1.625rem} }
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.4375rem;
padding:.75rem 1.625rem;border-radius:61.25rem;font-size:1rem;font-weight:500;
letter-spacing:-.014em;white-space:nowrap;
transition:background .22s ease,color .22s ease,border-color .22s ease;
}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-press)}
.btn-secondary{background:var(--gray);color:var(--ink)}
.btn-secondary:hover{background:var(--gray-2)}
.btn-outline{border:1px solid var(--blue);color:var(--blue)}
.btn-outline:hover{background:var(--blue);color:#fff}
.btn-sm{padding:.5625rem 1.125rem;font-size:.875rem}
.btn,.btn-sm{min-height:2.75rem}
@media(min-width:64rem){ .btn-sm{min-height:2.25rem} }
.lnk-arrow{color:var(--blue);font-size:1.0625rem;font-weight:400;display:inline-flex;align-items:center;gap:.5rem}
.lnk-arrow svg{width:1.0625rem;height:1.0625rem;stroke:currentColor;stroke-width:1.9;fill:none;transition:transform .25s ease}
.lnk-arrow:hover{text-decoration:underline}
.lnk-arrow:hover svg{transform:translateX(.25rem)}
.sec{padding:4.5rem 0}
.sec-h{text-align:center;max-width:45rem;margin:0 auto 2.5rem}
.eyebrow{display:block;color:var(--blue);font-size:1.0625rem;font-weight:600;margin-bottom:.625rem}
.sec-h h2{font-size:clamp(1.875rem,7vw,3.125rem)}
.sec-h p{margin-top:.875rem;color:var(--muted);font-size:1.0625rem;line-height:1.48}
@media(min-width:40rem){ .sec{padding:5.5rem 0} .sec-h{margin-bottom:3rem} .sec-h p{font-size:1.1875rem;margin-top:1rem} }
@media(min-width:64rem){ .sec{padding:6.5rem 0} .sec-h{margin-bottom:3.5rem} } .announce{background:var(--gray);color:var(--ink-2);font-size:.8125rem}
.announce .wrap{display:flex;align-items:center;justify-content:center;gap:1.125rem;height:2.75rem;overflow:hidden}
.announce span{display:inline-flex;align-items:center;gap:.4375rem;white-space:nowrap}
.announce svg{width:.875rem;height:.875rem;flex:none;stroke:var(--blue);stroke-width:2;fill:none}
.announce .opt{display:none}
@media(min-width:40rem){ .announce .wrap{gap:1.625rem} .announce .opt{display:inline-flex} }
.nav{
position:sticky;top:0;z-index:80;background:rgba(255,255,255,.78);
backdrop-filter:saturate(180%) blur(1.25rem);-webkit-backdrop-filter:saturate(180%) blur(1.25rem);
border-bottom:1px solid rgba(0,0,0,.07);
}
.nav > .wrap{display:flex;align-items:center;height:3.5rem;gap:.625rem;position:relative}
.brand{font-size:1.1875rem;font-weight:700;letter-spacing:-.028em;display:flex;align-items:center;gap:.5625rem;flex:none;color:var(--blue)}
.brand:hover{color:var(--blue-press)}
.brand img{width:1.5rem;height:1.5rem;border-radius:.375rem}
.nav-links{display:none}
.nav-shop-btn{display:none}
.burger{display:grid}
.burger svg{transition:opacity .2s ease}
.burger .ic-x{display:none}
.burger[aria-expanded="true"] .ic-b{display:none}
.burger[aria-expanded="true"] .ic-x{display:block}
.mnav{
position:absolute;top:100%;left:0;right:0;z-index:79;background:var(--white);
border-bottom:1px solid var(--line);box-shadow:var(--shadow);
max-height:0;overflow:hidden;visibility:hidden;opacity:0;
transition:max-height .34s cubic-bezier(.4,0,.2,1),opacity .22s ease,visibility .34s;
}
.mnav.open{max-height:min(80vh,34rem);overflow-y:auto;visibility:visible;opacity:1}
.mnav > .wrap{display:block;height:auto;padding-top:.25rem;padding-bottom:1.25rem}
.mnav a{
display:flex;align-items:center;justify-content:space-between;
min-height:3.25rem;padding:.75rem .25rem;font-size:1.1875rem;font-weight:500;
letter-spacing:-.02em;border-bottom:1px solid rgba(0,0,0,.07);
}
.mnav a:last-child{border-bottom:0}
.mnav a svg{width:1rem;height:1rem;stroke:var(--muted);stroke-width:2;fill:none;flex:none}
.mnav a:active{color:var(--blue)}
.mnav .mn-count{
margin-left:auto;margin-right:.625rem;min-width:1.375rem;height:1.375rem;padding:0 .4375rem;
border-radius:61.25rem;background:var(--blue);color:#fff;font-size:.75rem;font-weight:600;
display:inline-flex;align-items:center;justify-content:center;
}
.mnav .mn-sec{
display:block;padding:1rem .25rem .375rem;font-size:.75rem;font-weight:600;
letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:0;min-height:0;
}
.mnav .mn-shop{color:var(--blue);font-weight:700}
.cart-toast{
position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,1rem);
display:flex;align-items:center;gap:.5rem;background:#34C759;color:#fff;
padding:.75rem 1.375rem;border-radius:61.25rem;font-size:.9375rem;font-weight:600;
letter-spacing:-.01em;box-shadow:0 .5rem 1.75rem rgba(52,199,89,.35);
opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;z-index:200;
}
.cart-toast svg{width:1.125rem;height:1.125rem;flex:none}
.cart-toast.show{opacity:1;transform:translate(-50%,0)}
.nav-ic{display:flex;align-items:center;gap:.125rem;margin-left:auto;flex:none}
.nav-ic a,.nav-ic button{width:2.75rem;height:2.75rem;display:grid;place-items:center;border-radius:.5625rem;position:relative;transition:background .18s}
.nav-ic a:hover,.nav-ic button:hover{background:rgba(0,0,0,.045)}
.nav-ic svg{width:1.1875rem;height:1.1875rem;stroke:var(--ink-2);stroke-width:1.7;fill:none}
.nav-ic .ic-cart{stroke:var(--blue)}
.cart-n{
position:absolute;top:.125rem;right:.0625rem;min-width:.9375rem;height:.9375rem;padding:0 .25rem;
border-radius:61.25rem;background:var(--blue);color:#fff;font-size:.59rem;font-weight:600;
display:grid;place-items:center;border:1.5px solid #fff;
}
@media(min-width:75rem){ .nav-links{gap:.375rem} .nav-links a{padding:.5rem 1.0625rem} }
@media(min-width:64rem){
.nav > .wrap{height:4.25rem}
.nav-shop-btn{display:inline-flex;margin-right:.375rem}
.nav-links{display:flex;align-items:center;gap:.125rem;margin:0 auto 0 0}
.nav-links a{padding:.5rem .8125rem;font-size:1.125rem;font-weight:500;color:var(--ink-2);
border-radius:.625rem;letter-spacing:-.018em;transition:color .18s,background .18s}
.nav-links a:hover{color:var(--ink);background:rgba(0,0,0,.045)}
.nav-ic{margin-left:0}
.nav-ic a,.nav-ic button{width:2.375rem;height:2.375rem}
.burger{display:none!important}
.mnav{display:none}
} .hero{background:var(--gray);padding:2.5rem 0 4rem}
.hero-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center}
.hero-txt{text-align:center}
.hero-txt h1{font-size:clamp(2.125rem,8vw,3.375rem);line-height:1.06;letter-spacing:-.035em}
@media(max-width:48rem){
.hero{padding-top:2.75rem;padding-bottom:3rem}
.hero-txt h1{letter-spacing:-.022em;line-height:1.16;word-spacing:.01em}
.hero-txt{padding:0 .25rem}
.slider{max-width:100vw}
}
.hero-txt .sub{margin:1rem auto 0;font-size:clamp(1.0625rem,3.4vw,1.25rem);line-height:1.45;color:var(--muted);max-width:30rem}
.hero-cta{margin-top:1.75rem;display:flex;justify-content:center}
.hero-cta-btn{
font-size:1.0625rem;font-weight:600;padding:.9375rem 2.125rem;
box-shadow:0 .625rem 1.875rem rgba(0,122,255,.3);
transition:background .22s ease,box-shadow .22s ease,transform .22s ease;
}
.hero-cta-btn:hover{box-shadow:0 .875rem 2.25rem rgba(0,98,204,.38);transform:translateY(-.0625rem)}
.hero-cta-btn svg{width:1.0625rem;height:1.0625rem;stroke:currentColor;stroke-width:1.9;fill:none;transition:transform .25s ease}
.hero-cta-btn:hover svg{transform:translateX(.25rem)}
@media(max-width:48rem){
.hero-cta{width:100%}
.hero-cta-btn{width:100%}
}
@media(min-width:40rem){ .hero{padding:3.25rem 0 4.5rem} }
@media(min-width:64rem){
.hero{padding:3.75rem 0 5rem}
.hero-grid{grid-template-columns:minmax(0,26rem) 1fr;gap:3rem}
.hero-txt{text-align:left}
.hero-txt .sub{margin-left:0;margin-right:0}
.hero-cta{justify-content:flex-start}
} .slider{position:relative;width:100%;max-width:100%;overflow:hidden}
.slider-vp{overflow:hidden;border-radius:var(--r-xl);width:100%;max-width:100%}
.slider-track{display:flex;width:100%;transition:transform .6s cubic-bezier(.65,0,.35,1)}
.slide{
flex:0 0 100%;min-width:0;max-width:100%;display:flex;flex-direction:column;overflow:hidden;
background:var(--white);border-radius:var(--r-xl);box-shadow:var(--shadow);
}
.slide-vis{background:var(--gray);position:relative;overflow:hidden;padding:0;border-radius:var(--r-xl) var(--r-xl) 0 0}
.slide-vis .frame{display:block;width:100%;aspect-ratio:4/3}
.slide-vis img{width:100%;height:100%;object-fit:cover;object-position:center}
.slide-txt{padding:1.75rem 1.5rem 2rem;text-align:center}
.slide-tag{display:inline-block;font-size:.8125rem;font-weight:600;color:var(--blue);margin-bottom:.625rem}
.slide h2{font-size:clamp(1.375rem,5vw,1.75rem);letter-spacing:-.03em;line-height:1.12}
.slide-desc{margin:.75rem auto 0;color:var(--muted);font-size:.9375rem;line-height:1.5;max-width:24rem}
.deal{display:flex;align-items:flex-end;justify-content:center;gap:1rem;margin-top:1.25rem}
.deal-off{font-size:clamp(1.5rem,6vw,2rem);font-weight:700;letter-spacing:-.04em;color:var(--blue);line-height:.95}
.deal-save{padding-bottom:.25rem;text-align:left}
.deal-save b{display:block;font-size:.8125rem;font-weight:600;color:var(--ink);white-space:nowrap}
.deal-save span{display:block;font-size:.75rem;color:var(--muted);margin-top:.0625rem}
.price-line{display:flex;align-items:baseline;justify-content:center;gap:.625rem;margin-top:1rem}
.price-now{font-size:1.5rem;font-weight:600;letter-spacing:-.03em}
.price-was{font-size:1rem;color:var(--muted);text-decoration:line-through}
.vat{margin-top:.3125rem;font-size:.7rem;color:var(--muted)}
.slide-cta{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-top:1.375rem}
.slide-cta .cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.5625rem;width:100%}
.slide-cta .btn{flex:1 1 auto}
.slide-cta .view-cart{
display:none;align-items:center;gap:.375rem;color:var(--blue);font-size:.875rem;font-weight:500;
}
.slide-cta .view-cart.show{display:inline-flex}
.slide-cta .view-cart svg{width:.9375rem;height:.9375rem;stroke:currentColor;stroke-width:2;fill:none}
@media(min-width:56rem){
.slide{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:20rem}
.slide-vis{order:2;height:100%}
.slide-vis .frame{aspect-ratio:auto;height:100%;width:100%}
.slide-txt{order:1;display:flex;flex-direction:column;justify-content:center;text-align:left;padding:2rem 2.25rem}
.slide-desc{margin-left:0;margin-right:0}
.deal{justify-content:flex-start}
.price-line{justify-content:flex-start}
.slide-cta{align-items:flex-start}
.slide-cta .cta-row{justify-content:flex-start}
}
.slider-bar{display:flex;flex-direction:column;align-items:center;gap:.875rem;margin-top:1.25rem}
.slider-arws{display:flex;gap:.625rem;order:2}
.arw{width:2.5rem;height:2.5rem;border-radius:50%;background:rgba(0,0,0,.05);display:grid;place-items:center;flex:none;transition:background .2s}
.arw:hover{background:rgba(0,0,0,.1)}
.arw svg{width:.9375rem;height:.9375rem;stroke:var(--ink-2);stroke-width:2;fill:none}
.sldnav{order:1;display:grid;grid-template-columns:1fr;gap:.5rem;width:100%}
.sldnav-i{
position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:.0625rem;
padding:.5625rem .875rem;min-height:2.75rem;background:var(--white);border:1px solid var(--line);
border-radius:var(--r-sm);text-align:left;transition:border-color .22s ease,box-shadow .22s ease;
}
.sldnav-i:hover{border-color:var(--blue);box-shadow:var(--shadow)}
.sldnav-i .sn-name{font-size:.8125rem;font-weight:600;color:var(--ink);line-height:1.3}
.sldnav-i .sn-price{font-size:.8125rem;color:var(--muted)}
.sldnav-i.on{border-color:var(--blue)}
.sldnav-i.on .sn-price{color:var(--blue);font-weight:600}
.sn-bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--blue);transform:scaleX(0);transform-origin:left}
.sldnav-i.on .sn-bar{animation:snfill 6s linear forwards}
.slider:hover .sldnav-i.on .sn-bar{animation-play-state:paused}
@keyframes snfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(min-width:34rem){ .slider-bar{flex-direction:row;justify-content:center;gap:.875rem} .sldnav{grid-template-columns:repeat(3,1fr);gap:.5rem;width:auto;flex:1 1 auto;max-width:32rem} }
@media(prefers-reduced-motion:reduce){ .sldnav-i.on .sn-bar{animation:none;transform:scaleX(1)} }
.qadd{
position:absolute;bottom:.875rem;right:.875rem;z-index:3;width:2.5rem;height:2.5rem;border-radius:50%;
background:var(--white);box-shadow:var(--shadow);display:grid;place-items:center;
transition:background .2s ease,transform .2s ease,opacity .25s ease;
}
.qadd svg{width:1rem;height:1rem;stroke:var(--blue);stroke-width:1.8;fill:none}
.qadd:hover{background:var(--blue);transform:scale(1.07)}
.qadd:hover svg{stroke:#fff}
.qadd.done{background:var(--blue)}
.qadd.done svg{stroke:#fff}
@media(hover:hover) and (min-width:64rem){ .card .qadd{opacity:0} .card:hover .qadd,.card:focus-within .qadd{opacity:1} }
@media(hover:none){ .card .qadd{display:none} } .overlap{position:relative;z-index:5;background:var(--white);padding-top:3.75rem}
@media(min-width:64rem){ .overlap{padding-top:5.625rem} }
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
@media(min-width:40rem){ .cat-grid{grid-template-columns:repeat(3,1fr);gap:.75rem} }
@media(min-width:64rem){ .cat-grid{grid-template-columns:repeat(4,1fr);gap:.875rem} }
.cat{display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.75rem 1rem 1.5rem;border-radius:var(--r-md);transition:background .25s ease,transform .25s ease,box-shadow .25s ease}
.cat:hover{background:var(--gray);transform:translateY(-.25rem);box-shadow:var(--shadow-hover)}
.cat-ic{width:3.75rem;height:3.75rem;border-radius:50%;background:var(--gray);display:grid;place-items:center;margin-bottom:.9375rem;transition:background .25s}
.cat:hover .cat-ic{background:var(--gray-2)}
.cat-ic svg{width:1.5rem;height:1.5rem;stroke:var(--blue);stroke-width:1.5;fill:none}
.cat h3{font-size:.9375rem;font-weight:600;letter-spacing:-.02em}
.cat span{margin-top:.3125rem;font-size:.8125rem;color:var(--muted)}
@media(min-width:64rem){ .cat{padding:2.125rem 1.125rem 1.75rem} .cat-ic{width:4.125rem;height:4.125rem;margin-bottom:1.0625rem} .cat-ic svg{width:1.6875rem;height:1.6875rem} .cat h3{font-size:1rem} } .prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.625rem}
@media(min-width:64rem){ .prod-grid{grid-template-columns:repeat(4,1fr);gap:1.125rem} }
.card{display:flex;flex-direction:column;padding:.875rem;border-radius:var(--r-lg);transition:background .25s,box-shadow .25s,transform .25s}
.card:hover{background:var(--gray);box-shadow:var(--shadow-hover);transform:translateY(-.25rem)}
.card-vis{position:relative;background:var(--gray);border-radius:var(--r-md);aspect-ratio:1/1;display:grid;place-items:center;padding:1.25rem;overflow:hidden}
.card-vis img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .45s cubic-bezier(.2,.8,.3,1)}
.card:hover .card-vis img{transform:scale(1.045)}
.card-body{display:flex;flex-direction:column;flex:1;padding:.875rem .25rem .25rem}
.card h3{font-size:.9375rem;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.card-price{display:flex;align-items:baseline;gap:.5rem;margin-top:.5rem}
.card-price .now{font-size:1.0625rem;font-weight:600;letter-spacing:-.02em}
.card-price .was{font-size:.8125rem;color:var(--muted);text-decoration:line-through}
.card-btn{
display:flex;align-items:center;justify-content:center;gap:.375rem;margin-top:.875rem;
width:100%;min-height:2.5rem;background:var(--gray);color:var(--ink);border-radius:61.25rem;
font-size:.875rem;font-weight:500;transition:background .2s ease,color .2s ease;
}
.card-btn svg{width:.9375rem;height:.9375rem;stroke:currentColor;fill:none}
.card-btn:hover,.card-btn.done{background:var(--blue);color:#fff}
.prod-more{display:flex;justify-content:center;margin-top:2.25rem} .social{background:var(--gray);padding:3.5rem 0}
@media(min-width:64rem){ .social{padding:4.5rem 0} }
.social-head{text-align:center;max-width:34rem;margin:0 auto 2.25rem}
.social-head h2{font-size:clamp(1.625rem,5.5vw,2.25rem);letter-spacing:-.03em}
.social-head p{margin-top:.875rem;color:var(--muted);font-size:1.0625rem;line-height:1.5}
.soc-cards{display:grid;grid-template-columns:1fr;gap:1rem;max-width:56rem;margin:0 auto}
@media(min-width:40rem){ .soc-cards{grid-template-columns:repeat(3,1fr);gap:1.25rem} }
.soc-card{
display:flex;flex-direction:column;align-items:center;text-align:center;gap:.875rem;
padding:2.25rem 1.5rem;border-radius:var(--r-lg);background:var(--white);border:1px solid var(--line);
transition:transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s ease,border-color .28s ease;
}
.soc-card:hover{transform:translateY(-.5rem);box-shadow:var(--shadow-hover);border-color:transparent}
.soc-ic{width:3.75rem;height:3.75rem;border-radius:50%;display:grid;place-items:center;flex:none;transition:transform .28s cubic-bezier(.2,.8,.3,1)}
.soc-card:hover .soc-ic{transform:scale(1.08)}
.soc-ic svg{width:1.75rem;height:1.75rem;fill:#fff}
.soc-ic.ig{background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%)}
.soc-ic.tt{background:var(--ink)}
.soc-ic.fb{background:#1877F2}
.soc-card h3{font-size:1.0625rem;font-weight:600;letter-spacing:-.02em}
.soc-card .soc-handle{font-size:.8125rem;color:var(--muted)}
.soc-card .soc-cta{margin-top:.375rem;display:inline-flex;align-items:center;gap:.375rem;font-size:.875rem;font-weight:500;color:var(--blue)}
.soc-card .soc-cta svg{width:.9375rem;height:.9375rem;stroke:currentColor;stroke-width:2;fill:none;transition:transform .25s ease}
.soc-card:hover .soc-cta svg{transform:translateX(.1875rem)} .action{padding:4.5rem 0}
@media(min-width:64rem){ .action{padding:6.5rem 0} }
.action-box{background:var(--gray);border-radius:var(--r-xl);padding:3.5rem 1.5rem;text-align:center}
@media(min-width:40rem){ .action-box{padding:4.5rem 2.5rem} }
@media(min-width:64rem){ .action-box{padding:5.5rem 3.5rem} }
.action-box h2{font-size:clamp(2rem,7.5vw,3.625rem);letter-spacing:-.035em;line-height:1.05}
.action-box p{margin:1.125rem auto 0;max-width:35rem;color:var(--muted);font-size:1.0625rem;line-height:1.48}
@media(min-width:40rem){ .action-box p{font-size:1.1875rem} }
.action-cta{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:2rem}
.action-pts{display:flex;flex-wrap:wrap;justify-content:center;gap:.875rem 2.25rem;margin-top:2.75rem;padding-top:2rem;border-top:1px solid var(--line)}
.action-pts div{display:flex;align-items:center;gap:.5625rem;font-size:.9375rem;color:var(--ink-2)}
.action-pts svg{width:1.0625rem;height:1.0625rem;stroke:var(--blue);stroke-width:2;fill:none;flex:none} .ft{background:var(--gray);font-size:.75rem;color:var(--muted);padding:2.75rem 0 2.125rem;line-height:1.6}
.ft-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:1.75rem;padding-bottom:2.125rem}
@media(min-width:48rem){ .ft-cols{grid-template-columns:repeat(4,1fr);gap:2.125rem} }
.ft h4{font-size:.75rem;font-weight:600;color:var(--ink);margin-bottom:.75rem}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:.5625rem}
.ft ul a:hover{text-decoration:underline;color:var(--ink-2)}
.ft-legal{border-top:1px solid var(--line);padding-top:1.375rem}
.ft-legal p{max-width:50rem}
.ft-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.875rem;margin-top:1.125rem;padding-top:1.125rem;border-top:1px solid var(--line)}
.ft-bot nav{display:flex;flex-wrap:wrap;gap:1.25rem}
.ft-bot a:hover{text-decoration:underline}
.ft-soc{display:flex;gap:1rem;margin-top:.875rem}
.ft-soc a{opacity:.55;transition:opacity .2s}
.ft-soc a:hover{opacity:1}
.ft-soc svg{width:1.0625rem;height:1.0625rem;fill:var(--ink-2)}
.js .rv{opacity:0;transform:translateY(1.375rem);transition:opacity .8s cubic-bezier(.2,.8,.3,1),transform .8s cubic-bezier(.2,.8,.3,1)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} .slider-track{transition:none} html{scroll-behavior:auto} } .about-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 3rem;
align-items: start;
max-width: 64rem;
margin: 0 auto;
}
.about-txt p {
color: var(--ink-2);
font-size: 1.0625rem;
line-height: 1.65;
margin-bottom: 1rem;
}
.about-txt p:last-child { margin-bottom: 0; }
.about-vis {
display: flex;
flex-direction: column;
gap: 1.5rem;
align-items: center;
position: sticky;
top: 6rem;
}
.about-icon {
width: 9rem;
height: 9rem;
border-radius: 50%;
background: var(--gray);
display: grid;
place-items: center;
}
.about-icon svg {
width: 4rem;
height: 4rem;
stroke: var(--blue);
stroke-width: 1.4;
fill: none;
}
.about-facts {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
width: 100%;
text-align: center;
}
.about-facts div {
background: var(--gray);
border-radius: var(--r-md);
padding: 1rem 1.25rem;
}
.about-facts strong {
display: block;
font-size: 1.5rem;
color: var(--blue);
font-weight: 700;
letter-spacing: -.02em;
}
.about-facts span {
display: block;
font-size: 0.8125rem;
color: var(--muted);
margin-top: 0.25rem;
}
@media (max-width: 48rem) {
.about-grid { grid-template-columns: 1fr; gap: 2rem; }
.about-vis { position: static; }
.about-icon { width: 6rem; height: 6rem; }
.about-icon svg { width: 2.75rem; height: 2.75rem; }
} .review-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(18rem, 22rem));
gap: 1.25rem;
justify-content: center;
max-width: 60rem;
margin: 0 auto;
}
.review-card {
background: var(--gray);
border-radius: var(--r-lg);
padding: 2rem 1.75rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.review-stars {
color: #34C759;
font-size: 1.375rem;
letter-spacing: 0.15rem;
line-height: 1;
}
.review-stars .star-empty {
color: var(--line);
}
.review-text {
color: var(--ink);
font-size: 1.0625rem;
line-height: 1.55;
font-style: italic;
}
.review-author {
color: var(--ink-2);
font-size: 0.9375rem;
font-weight: 600;
margin-top: auto;
}
.review-product {
color: var(--muted);
font-size: 0.8125rem;
margin-top: 0.25rem;
}
.reviews-note {
text-align: center;
margin-top: 2rem;
font-size: 0.8125rem;
color: var(--muted);
}
@media (max-width: 48rem) {
.review-grid { grid-template-columns: 1fr; gap: 1rem; }
.review-card { padding: 1.75rem 1.5rem; }
} @media(max-width:48rem){
.hero-txt h1{font-size:clamp(1.8rem,7vw,2.2rem);letter-spacing:-.02em;line-height:1.18}
.hero-txt .sub{font-size:1rem}
.slider-vp{border-radius:var(--r-lg)}
.slide{border-radius:var(--r-lg)}
.slide-vis{border-radius:var(--r-lg) var(--r-lg) 0 0}
.slide-vis .frame{aspect-ratio:16/10;width:100%}
.slide-txt{padding:1.125rem 1rem 1.375rem;text-align:center}
.slide-tag{font-size:.75rem;margin-bottom:.4375rem}
.slide h2{font-size:1.0625rem;line-height:1.2}
.slide-desc{font-size:.8125rem;line-height:1.4;margin-top:.4375rem}
.deal{margin-top:.75rem;gap:.625rem}
.deal-off{font-size:1.25rem}
.deal-save b{font-size:.71875rem}
.deal-save span{font-size:.65rem}
.price-line{margin-top:.625rem;gap:.5rem}
.price-now{font-size:1.1875rem}
.price-was{font-size:.8125rem}
.vat{font-size:.625rem}
.slide-cta{margin-top:.875rem;gap:.375rem}
.slide-cta .cta-row{gap:.4375rem}
.slide-cta .btn{min-height:2.375rem;font-size:.875rem;padding:.5625rem 1.125rem}
.slider-bar{margin-top:.875rem;gap:.625rem}
.sldnav{gap:.375rem}
.sldnav-i{padding:.4375rem .625rem;min-height:2.375rem}
.sldnav-i .sn-name{font-size:.75rem}
.sldnav-i .sn-price{font-size:.75rem}
.arw{width:2.125rem;height:2.125rem}
.sec{padding:3rem 0}
.hero{padding:2rem 0 2.75rem}
.overlap{padding-top:2.5rem}
.social{padding:2.75rem 0}
.action{padding:3rem 0}
}
@media(max-width:30rem){
.prod-grid{grid-template-columns:1fr;gap:.75rem}
.hero-txt h1{font-size:1.8rem}
.slide-vis .frame{aspect-ratio:16/11}
.slide-txt{padding:1rem .875rem 1.125rem}
.slide h2{font-size:1rem}
.deal-off{font-size:1.125rem}
.sldnav{grid-template-columns:1fr}
.wrap{padding:0 1rem}
}
@media(min-width:30.0625rem) and (max-width:48rem){
.cat-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:30rem){
.cat-grid{grid-template-columns:repeat(2,1fr);gap:.5rem}
}
@media(max-width:47.9375rem){
.ft-cols{grid-template-columns:1fr;gap:2rem}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .about-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 3rem;
align-items: start;
max-width: 64rem;
margin: 0 auto;
}
.about-txt p {
color: var(--ink-2);
font-size: 1.0625rem;
line-height: 1.65;
margin-bottom: 1rem;
}
.about-txt p:last-child { margin-bottom: 0; }
.about-vis {
display: flex;
flex-direction: column;
gap: 1.5rem;
align-items: center;
position: sticky;
top: 6rem;
}
.about-icon {
width: 9rem;
height: 9rem;
border-radius: 50%;
background: var(--gray);
display: grid;
place-items: center;
}
.about-icon svg {
width: 4rem;
height: 4rem;
stroke: var(--blue);
stroke-width: 1.4;
fill: none;
}
.about-facts {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
width: 100%;
text-align: center;
}
.about-facts div {
background: var(--gray);
border-radius: var(--r-md);
padding: 1rem 1.25rem;
}
.about-facts strong {
display: block;
font-size: 1.5rem;
color: var(--blue);
font-weight: 700;
letter-spacing: -.02em;
}
.about-facts span {
display: block;
font-size: 0.8125rem;
color: var(--muted);
margin-top: 0.25rem;
}
@media (max-width: 48rem) {
.about-grid { grid-template-columns: 1fr; gap: 2rem; }
.about-vis { position: static; }
.about-icon { width: 6rem; height: 6rem; }
.about-icon svg { width: 2.75rem; height: 2.75rem; }
} .review-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(18rem, 22rem));
gap: 1.25rem;
justify-content: center;
max-width: 60rem;
margin: 0 auto;
}
.review-card {
background: var(--gray);
border-radius: var(--r-lg);
padding: 2rem 1.75rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.review-stars {
color: #34C759;
font-size: 1.375rem;
letter-spacing: 0.15rem;
line-height: 1;
}
.review-stars .star-empty {
color: var(--line);
}
.review-text {
color: var(--ink);
font-size: 1.0625rem;
line-height: 1.55;
font-style: italic;
}
.review-author {
color: var(--ink-2);
font-size: 0.9375rem;
font-weight: 600;
margin-top: auto;
}
.review-product {
color: var(--muted);
font-size: 0.8125rem;
margin-top: 0.25rem;
}
.reviews-note {
text-align: center;
margin-top: 2rem;
font-size: 0.8125rem;
color: var(--muted);
}
@media (max-width: 48rem) {
.review-grid { grid-template-columns: 1fr; gap: 1rem; }
.review-card { padding: 1.75rem 1.5rem; }
} .hero-cta-btn{
font-size:1.0625rem;font-weight:600;padding:.9375rem 2.125rem;
box-shadow:0 .625rem 1.875rem rgba(0,122,255,.3);
transition:background .22s ease,box-shadow .22s ease,transform .22s ease;
}
.hero-cta-btn:hover{box-shadow:0 .875rem 2.25rem rgba(0,98,204,.38);transform:translateY(-.0625rem)}
.hero-cta-btn svg{width:1.0625rem;height:1.0625rem;stroke:currentColor;stroke-width:1.9;fill:none;transition:transform .25s ease}
.hero-cta-btn:hover svg{transform:translateX(.25rem)}
@media(max-width:48rem){
.hero-cta{width:100%}
.hero-cta-btn{width:100%}
}  .wpcf7 {
max-width: 40rem;
margin: 0 auto;
padding: 2.5rem 0;
} .wpcf7 p {
margin-bottom: 1.5rem;
display: flex;
flex-direction: column;
} .wpcf7 label {
display: block;
font-size: 0.9375rem;
font-weight: 600;
color: var(--ink);
margin-bottom: 0.5rem;
} .wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 select,
.wpcf7 textarea {
width: 100%;
min-height: 2.875rem;
padding: 0.75rem 1.125rem;
font-family: var(--font);
font-size: 1rem;
color: var(--ink);
background: var(--white);
border: 1px solid var(--line);
border-radius: 0.625rem;
transition: border-color .2s ease, box-shadow .2s ease;
} .wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
outline: none;
border-color: var(--blue);
box-shadow: 0 0 0 0.1875rem rgba(0,122,255,.14);
} .wpcf7 textarea {
min-height: 8rem;
resize: vertical;
padding: 0.875rem 1.125rem;
} .wpcf7 select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 1.125rem;
padding-right: 2.75rem;
} .wpcf7-radio {
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.wpcf7-radio .wpcf7-list-item {
margin: 0;
}
.wpcf7-radio input[type="radio"] {
margin-right: 0.5rem;
width: 1.125rem;
height: 1.125rem;
accent-color: var(--blue);
}
.wpcf7-radio label {
display: inline-flex;
align-items: center;
font-weight: 400;
font-size: 1rem;
cursor: pointer;
} .wpcf7-acceptance {
margin-bottom: 1rem;
}
.wpcf7-acceptance label {
display: flex;
align-items: flex-start;
gap: 0.625rem;
font-weight: 400;
font-size: 0.9375rem;
line-height: 1.5;
cursor: pointer;
}
.wpcf7-acceptance input[type="checkbox"] {
margin-top: 0.1875rem;
width: 1.125rem;
height: 1.125rem;
accent-color: var(--blue);
flex-shrink: 0;
cursor: pointer;
}
.wpcf7-acceptance a {
color: var(--blue);
text-decoration: underline;
} .wpcf7 input[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 3rem;
padding: 0.9375rem 2.125rem;
margin-top: 0.5rem;
font-family: var(--font);
font-size: 1.0625rem;
font-weight: 600;
color: #fff;
background: var(--blue);
border: 0;
border-radius: 61.25rem;
cursor: pointer;
transition: background .22s ease, box-shadow .22s ease, transform .22s ease;
box-shadow: 0 0.625rem 1.875rem rgba(0,122,255,.3);
}
.wpcf7 input[type="submit"]:hover {
background: var(--blue-press);
box-shadow: 0 0.875rem 2.25rem rgba(0,98,204,.38);
transform: translateY(-.0625rem);
} .hp-field {
position: absolute;
left: -9999px;
opacity: 0;
height: 0;
overflow: hidden;
} .wpcf7-response-output {
margin-top: 1.5rem !important;
padding: 1rem 1.25rem !important;
border-radius: 0.625rem !important;
font-size: 0.9375rem !important;
border: 0 !important;
}
.wpcf7-mail-sent-ok {
background: #E9F9EF;
color: #0B7A3E;
}
.wpcf7-validation-errors,
.wpcf7-mail-sent-ng,
.wpcf7-spam-blocked {
background: #FDEBEE;
color: #D6304A;
} .wpcf7-not-valid-tip {
display: block;
margin-top: 0.375rem;
font-size: 0.8125rem;
color: #D6304A;
} @media (max-width: 48rem) {
.wpcf7 {
padding: 1.5rem 1rem;
}
} .cart-toast{ max-width:22rem; }
.cart-toast .ct-row{ display:flex; align-items:flex-start; gap:.75rem; }
.cart-toast .ct-img{ width:48px; height:48px; border-radius:.5rem; object-fit:cover;
flex:0 0 auto; background:#F5F5F7; }
.cart-toast .ct-txt{ min-width:0; flex:1 1 auto; }
.cart-toast .ct-head{ display:flex; align-items:center; gap:.375rem;
font-weight:600; font-size:.8125rem; }
.cart-toast .ct-head svg{ width:1rem; height:1rem; flex:0 0 auto; color:#007AFF; }
.cart-toast .ct-name{ font-size:.8125rem; color:#3A3A3C; margin-top:.125rem;
overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.cart-toast .ct-x{ flex:0 0 auto; border:0; background:none; font-size:1.125rem;
line-height:1; color:#86868B; cursor:pointer; padding:0 0 0 .25rem; }
.cart-toast .ct-link{ display:inline-block; margin-top:.5rem; font-size:.8125rem;
font-weight:600; color:#007AFF; text-decoration:none; }
.cart-toast .ct-link:hover{ text-decoration:underline; }
@keyframes ctPulse{
0%{ transform:scale(1) } 30%{ transform:scale(1.35) }
60%{ transform:scale(.95) } 100%{ transform:scale(1) }
}
.ct-pulse{ animation:ctPulse .4s ease 2; }
.ct-busy{ opacity:.65; pointer-events:none; }
@media (prefers-reduced-motion: reduce){
.ct-pulse{ animation:none; }
}