:root{
--red:#D9272E; --red-dark:#B71E25; --red-tint:#FCE9EA;
--yellow:#F4C542; --yellow-dark:#E0AE24; --yellow-tint:#FEF5D6;
--green:#24604A; --green-dark:#184434; --green-2:#2F7A5B; --green-tint:#E6F0EA;
--teal:#287C78; --teal-dark:#1E6360; --teal-tint:#E3F1EF;
--white:#FFFFFF; --cream:#FFF8EE; --cream-2:#FBEFDC;
--ink:#303846; --ink-2:#6B7280; --line:#E8E5E0;
--r:14px; --gutter:16px;
--paper:linear-gradient(rgba(36,96,74,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(36,96,74,.075) 1px,transparent 1px);
--font-display:'Bricolage Grotesque','Arial Narrow',system-ui,sans-serif;
--font-body:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.5}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0;text-align:inherit}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.1;margin:0;text-wrap:balance;font-weight:800;letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--yellow-dark);outline-offset:2px;border-radius:6px}
.wrap{max-width:1260px;margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{top:8px}
.ic{flex:none;display:block}
[id]{scroll-margin-top:150px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 22px;border-radius:10px;font-weight:800;font-size:15px;text-align:center;border:2px solid transparent}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:var(--red-dark)}
.btn-yellow{background:var(--yellow);color:var(--ink)}.btn-yellow:hover{background:var(--yellow-dark)}
.btn-green{background:var(--green);color:#fff}.btn-green:hover{background:var(--green-dark)}
.btn-line{border-color:var(--ink);color:var(--ink)}.btn-line:hover{background:var(--ink);color:#fff}
.btn-line-w{border-color:#fff;color:#fff}.btn-line-w:hover{background:#fff;color:var(--green-dark)}
.btn-sm{min-height:40px;padding:6px 14px;font-size:14px}
.btn[disabled]{background:var(--line);color:var(--ink-2);cursor:not-allowed;border-color:transparent}
.txtbtn{font-weight:800;color:var(--red);display:inline-flex;gap:4px;align-items:center}
.txtbtn:hover{text-decoration:underline}
.on-green .txtbtn{color:var(--yellow)}
.ribbon{background:var(--green-dark);color:#DCEBE3;font-size:12.5px;text-align:center}
.ribbon .wrap{padding-block:6px}
.strip{background:var(--green);color:#fff;overflow:hidden;white-space:nowrap;font-size:13px;font-weight:700}
.strip-in{display:inline-flex;animation:tk 32s linear infinite}
.strip-in span{display:inline-flex;align-items:center;gap:10px;padding:9px 30px}
.strip-in b{background:#fff;color:var(--green-dark);font-size:11px;letter-spacing:.06em;padding:2px 8px;border-radius:4px}
@keyframes tk{to{transform:translateX(-50%)}}

.hdr-wrap{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:#fff;box-shadow:0 1px 0 var(--line)}
.hdr{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"menu logo act" "search search search";gap:8px 10px;align-items:center;padding-block:8px}
.hbtn{grid-area:menu}
.logo{grid-area:logo;display:block;justify-self:start;line-height:0}
.logo img{height:74px;width:auto;display:block;mix-blend-mode:multiply;filter:saturate(1.5) contrast(1.1)}
.searchf{grid-area:search;display:flex;min-width:0;border:1.5px solid #CFD6D1;border-radius:999px;overflow:hidden;background:#fff;transition:border-color .15s,box-shadow .15s}
.searchf:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(36,96,74,.14)}
.searchf select{display:none;border:0;border-right:1px solid var(--line);padding:0 14px;background:#F6F8F6;max-width:190px;font-weight:700;font-size:14px}
.searchf input{flex:1;min-width:0;border:0;padding:12px 18px;background:transparent;outline:none}
.searchf button{background:var(--green);color:#fff;padding:0 22px;display:grid;place-items:center}
.searchf button:hover{background:var(--green-dark)}
.acts{grid-area:act;display:flex;gap:2px;align-items:center;margin-left:auto}
.ab{position:relative;display:flex;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:0 8px;justify-content:center;border-radius:12px;font-weight:700;font-size:14px;color:var(--ink)}
.ab:hover{background:var(--green-tint)}
.ab small{display:none;color:var(--ink-2);font-size:12px;font-weight:700}
.ab span.lbl{display:none}
.cnt{position:absolute;top:2px;right:0;min-width:20px;height:20px;border-radius:10px;background:var(--red);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;padding-inline:5px}
.cnt.y{background:var(--green);color:#fff}
.ab small+.cnt,.ab .lbl+.cnt{position:static}
@media (min-width:900px){
.hdr{grid-template-columns:auto minmax(280px,1fr) auto;grid-template-areas:"logo search act";gap:36px;padding-block:12px}
.hbtn{display:none}.logo img{height:106px}
.searchf select{display:block}
.ab span.lbl{display:inline}.ab small{display:block}
.cnt{position:static;margin-left:-2px}
.ab{padding:0 10px}
}
.navbar{display:none;position:relative;background:#fff;border-top:1px solid var(--line)}
@media (min-width:900px){.navbar{display:block}}
.nav{display:flex;gap:4px;align-items:center;justify-content:center}
.nav>*{font-weight:700;font-size:14.5px;padding:12px 16px;display:inline-flex;gap:6px;align-items:center;border-bottom:3px solid transparent;color:var(--ink)}
.nav>*:hover,.nav>[aria-expanded="true"]{color:var(--green);border-bottom-color:var(--green)}
.nav .hot{color:var(--red)}
.nav .hot:hover{color:var(--red-dark);border-bottom-color:var(--red)}
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);border-bottom:3px solid var(--green);box-shadow:0 18px 30px -18px rgba(24,68,52,.45);z-index:5}
.mega .wrap{display:grid;grid-template-columns:1fr 1fr 300px;gap:28px;padding-block:22px}
.mega h4{font-size:13px;color:var(--ink-2);margin-bottom:8px;letter-spacing:.08em;font-family:var(--font-body);font-weight:800}
.mega ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mi{display:flex;justify-content:space-between;gap:8px;width:100%;padding:8px 10px;border-radius:8px;font-weight:700}
.mi small{color:var(--ink-2);font-weight:700}
.mi:hover{background:var(--green-tint)}
.mega-promo{border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.mega-promo.k{background:var(--green-tint)}.mega-promo.o{background:var(--teal-tint)}
.mega-promo h3{font-size:22px}
.mmenu{position:fixed;inset:0;z-index:60;background:rgba(24,68,52,.55);display:flex}
.mmenu .panel{width:min(360px,92%);background:#fff;height:100%;overflow:auto;padding:16px;padding-top:calc(16px + env(safe-area-inset-top,0px));display:grid;gap:6px;align-content:start}
.mmenu details{border-bottom:1px solid var(--line)}
.mmenu summary{list-style:none;padding:12px 4px;font-weight:800;font-family:var(--font-display);font-size:21px;display:flex;justify-content:space-between;cursor:pointer}
.mmenu summary::-webkit-details-marker{display:none}
.mmenu details[open] summary .ic{transform:rotate(180deg)}
.mmenu .mi{padding:10px 8px}
.mmenu .plain{display:block;width:100%;padding:12px 4px;font-weight:800;font-family:var(--font-display);font-size:21px;border-bottom:1px solid var(--line)}
.hero{padding-block:18px 6px}
.slider{position:relative;border-radius:18px;overflow:hidden;background:#EEF3EF}
.slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.slides::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:start;position:relative;aspect-ratio:16/11;min-height:290px;display:block;width:100%;text-align:left}
@media (min-width:760px){.slide{aspect-ratio:20/7;min-height:0}}
.slide.img img{width:100%;height:100%;object-fit:cover;display:block}
.slide.d{display:flex;align-items:center;padding:0 clamp(22px,6vw,88px) 30px;isolation:isolate;color:#fff}
@media (min-width:760px){.slide.d{padding-bottom:0}}
@media (max-width:759px){.slide .btn{min-height:40px;padding:6px 16px;font-size:14px}.slide{aspect-ratio:auto;min-height:310px}}
.slide .txt{position:relative;z-index:2;display:grid;gap:12px;justify-items:start;max-width:min(560px,62%)}
@media (min-width:760px){.slide .txt{max-width:min(560px,52%)}}
.slide .kick{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.9}
.slide h2{font-size:clamp(25px,4.4vw,56px);line-height:1.04;font-weight:800}
.slide h2 em{font-style:normal;color:var(--yellow)}
.slide p{font-size:clamp(14px,1.45vw,19px);max-width:38ch;opacity:.95}
.slide .art{position:absolute;right:0;top:0;bottom:0;width:48%;z-index:1}
.slide .art svg{position:absolute;width:var(--w);left:var(--x);top:var(--y);transform:rotate(var(--r));height:auto;filter:drop-shadow(0 14px 16px rgba(0,0,0,.2))}
.s1{background:linear-gradient(105deg,#163F31 0,#24604A 55%,#3A8566 100%)}
.s2{background:linear-gradient(105deg,#1B5A57 0,#287C78 55%,#4CB0A8 100%)}
.s3{background:linear-gradient(105deg,#FBE6D9 0,#F8D2BE 60%,#F4BFA2 100%);color:var(--ink)}
.s3 h2 em{color:var(--red)}
.s4{background:linear-gradient(105deg,#F7D45E 0,#F4C542 60%,#EDB52A 100%);color:var(--ink)}
.s4 h2 em{color:var(--red)}
.s-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 2px 10px rgba(0,0,0,.2);display:none;place-items:center;color:var(--ink)}
.s-nav:hover{background:#fff}
.s-nav.p{left:14px}.s-nav.n{right:14px}
@media (min-width:760px){.s-nav{display:grid}}
.s-dots{position:absolute;left:0;right:0;bottom:12px;z-index:4;display:flex;justify-content:center;gap:8px}
.s-dots button{width:10px;height:10px;border-radius:5px;background:rgba(255,255,255,.65);box-shadow:0 0 0 1px rgba(0,0,0,.12);transition:width .25s,background .25s}
.s-dots button[aria-current="true"]{width:28px;background:#fff}
.btn-on-d{background:#fff;color:var(--green-dark)}.btn-on-d:hover{background:var(--yellow)}
.s3 .btn-on-d,.s4 .btn-on-d{background:var(--ink);color:#fff}.s3 .btn-on-d:hover,.s4 .btn-on-d:hover{background:#000}
.sec{padding-block:34px}
.sec.paper{background:#F6F7F4}
.sec.tint{background:var(--green-tint)}
.sh{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.sh h2{font-size:clamp(23px,2.6vw,32px)}
.sh p{color:var(--ink-2);margin-top:4px;font-size:15px}
.ruler-u{display:none}
.sh.c{justify-content:center;text-align:center}
.sh.c h2{position:relative;display:inline-block;padding-inline:20px;background:inherit}
.hline{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.hline::before,.hline::after{content:"";height:1px;background:#DAD8D1;flex:1}
.hline h2{font-size:clamp(18px,2vw,22px);font-weight:700;letter-spacing:0;font-family:var(--font-body)}
.grp{display:none}
.tgrid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.tgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}}
.ct{position:relative;display:flex;align-items:center;width:100%;aspect-ratio:3/2;min-height:128px;border-radius:16px;padding:clamp(12px,1.6vw,20px);background:var(--bg,#F1F1EE);overflow:hidden;text-align:left;box-shadow:0 1px 2px rgba(48,56,70,.06),0 8px 18px -12px rgba(48,56,70,.35);transition:transform .2s,box-shadow .2s;isolation:isolate}
.ct:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(48,56,70,.08),0 16px 26px -14px rgba(48,56,70,.45)}
.ct .lab{position:relative;z-index:2;display:grid;gap:5px;align-content:center;max-width:54%}
.ct .lab strong{font-family:var(--font-display);font-size:clamp(16px,1.9vw,25px);line-height:1.06;color:var(--ink);font-weight:800}
.ct .lab small{font-size:12px;color:#596270;font-weight:600;line-height:1.3;display:none}
.ct .go{display:inline-block;background:var(--ink);color:#fff;font-size:12px;font-weight:700;padding:5px 12px;border-radius:6px;justify-self:start;margin-top:6px}
.ct .im{position:absolute;right:-1%;top:7%;bottom:7%;width:52%;z-index:1;display:grid;place-items:center}
.ct .im svg,.ct .im img{width:100%;height:100%;display:block;object-fit:contain;transition:transform .3s}
.ct .im svg{filter:drop-shadow(0 8px 10px rgba(0,0,0,.14))}
.ct .im img{mix-blend-mode:multiply}
.ct:hover .im svg,.ct:hover .im img{transform:scale(1.06) rotate(-2deg)}
@media (min-width:700px){.ct .lab small{display:block}}
@media (prefers-reduced-motion:reduce){.ct,.ct .im svg,.ct .im img{transition:none}.ct:hover{transform:none}.ct:hover .im svg,.ct:hover .im img{transform:none}}
.more-cats{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:20px}
.more-cats button{border:1.5px solid #D5D9D4;background:#fff;border-radius:999px;padding:7px 16px;font-weight:700;font-size:14px;color:var(--ink)}
.more-cats button:hover{border-color:var(--green);color:var(--green);background:var(--green-tint)}
.promos{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.promos{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-rows:1fr 1fr}.pr-big{grid-row:span 2;min-height:420px}}
.pr{position:relative;border-radius:18px;overflow:hidden;padding:clamp(20px,2.8vw,36px);display:flex;flex-direction:column;justify-content:center;gap:10px;min-height:190px;isolation:isolate;text-align:left;align-items:flex-start}
.pr>*:not(.art){position:relative;z-index:2;max-width:56%}
.pr .kick{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.pr h3{font-size:clamp(22px,2.7vw,40px);line-height:1.05}
.pr p{font-size:15px;color:#4a5361;max-width:32ch}
.pr .art{position:absolute;right:0;top:0;bottom:0;width:48%;z-index:1}
.pr .art svg{position:absolute;width:var(--w);left:var(--x);top:var(--y);transform:rotate(var(--r));height:auto;filter:drop-shadow(0 12px 14px rgba(0,0,0,.18))}
.pr-a{background:linear-gradient(120deg,#DDEBF5,#C6DDF0)}
.pr-b{background:linear-gradient(120deg,#FBEFD0,#F7DFA0)}
.pr-c{background:linear-gradient(120deg,#DCEFE6,#BFE0CF)}
.pr-big h3{font-size:clamp(28px,3.8vw,56px)}
.pr-big .kick{color:var(--green)}
.pr .btn{margin-top:6px}
.bgrid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){.bgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1000px){.bgrid{grid-template-columns:repeat(8,minmax(0,1fr))}}
.bc{position:relative;border-radius:14px;background:var(--bg,#F1F1EE);aspect-ratio:3/2;display:grid;place-items:center;text-align:center;padding:10px;overflow:hidden;transition:transform .2s,box-shadow .2s;isolation:isolate}
.bc:hover{transform:translateY(-2px);box-shadow:0 12px 20px -14px rgba(48,56,70,.5)}
.bc strong{position:relative;z-index:2;font-family:var(--font-display);font-size:clamp(14px,1.4vw,18px);line-height:1.1;font-weight:800;color:var(--ink);overflow-wrap:anywhere}
.bc small{display:block;font-family:var(--font-body);font-weight:600;font-size:12px;color:#596270;margin-top:4px}
.bc .im{position:absolute;right:-10%;bottom:-14%;width:50%;opacity:.28;z-index:1}
.bc .im svg{width:100%;height:auto;display:block}
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px}
@media (min-width:720px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 18px}}
@media (min-width:1040px){.pgrid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pc{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid #E9E8E3;border-radius:14px;overflow:hidden;transition:box-shadow .2s,border-color .2s}
.pc:hover{box-shadow:0 14px 26px -16px rgba(48,56,70,.45);border-color:#D6D4CC}
.pimg{position:relative;aspect-ratio:1/1;overflow:hidden;background:#FAFAF8}
.pimg.o{background:#F5FAF9}
.pimg>button.open{position:absolute;inset:0;width:100%;display:grid;place-items:center;padding:11%}
.pimg svg,.pimg img{width:100%;height:100%;display:block;transition:transform .3s}
.pimg img{object-fit:contain}
.pimg:hover svg,.pimg:hover img{transform:scale(1.05)}
.pimg:has(img){background:#fff}
.pimg>button.open:has(img){padding:5%}
@media (prefers-reduced-motion:reduce){.pimg svg,.pimg img{transition:none}.pimg:hover svg,.pimg:hover img{transform:none}}
.tags{position:absolute;left:8px;top:8px;display:flex;flex-direction:column;gap:5px;align-items:flex-start;z-index:2}
.tag{font-size:11.5px;font-weight:800;padding:2px 9px;border-radius:5px;line-height:1.5}
.tag.deal{background:var(--red);color:#fff}.tag.best{background:var(--yellow);color:var(--ink)}.tag.new{background:var(--green);color:#fff}
.fav{position:absolute;right:8px;top:8px;width:38px;height:38px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--ink);z-index:2;box-shadow:0 1px 4px rgba(48,56,70,.18)}
.fav[aria-pressed="true"]{color:var(--red)}
.fav[aria-pressed="true"] svg{fill:var(--red)}
.fav svg{width:19px;height:19px}
.out-flag{position:absolute;left:0;right:0;bottom:0;background:rgba(48,56,70,.88);color:#fff;text-align:center;font-weight:800;font-size:13px;padding:6px;z-index:2}
.pc.oos .pimg>button.open{opacity:.55}
.pb{display:grid;gap:3px;min-width:0;flex:1;align-content:start;padding:12px 14px 14px;border-top:1px solid #F0EFEA}
.pbrand{font-size:11.5px;font-weight:800;color:var(--ink-2);letter-spacing:.04em;text-transform:uppercase}
.pn{font-size:15px;line-height:1.3;min-height:2.6em;font-family:var(--font-body);font-weight:700;letter-spacing:0}
.pn button{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.pn button:hover{color:var(--green)}
.pm{font-size:12.5px;color:var(--ink-2);min-height:1.3em}
.pp{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:4px}
.pp b{font-family:var(--font-display);font-size:21px;font-weight:800;color:var(--ink)}
.pp s{color:var(--ink-2);font-size:13.5px}
.off{background:var(--red-tint);color:var(--red);font-weight:800;font-size:12px;padding:1px 7px;border-radius:5px}
.ps{font-size:12px;font-weight:700;color:var(--green-2)}
.ps.low{color:var(--red)}.ps.out{color:var(--ink-2)}
.pb .btn{margin-top:8px}
.btn-add{min-height:40px;padding:6px 14px;font-size:14px;background:#fff;color:var(--green);border-color:var(--green)}
.btn-add:hover{background:var(--green);color:#fff}
.btn-add[disabled]{background:#F3F3F0;color:var(--ink-2);border-color:transparent}
.car{position:relative}
.track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.track .pc{flex:0 0 calc((100% - 14px)/2);scroll-snap-align:start}
@media (min-width:720px){.track{gap:18px}.track .pc{flex:0 0 calc((100% - 36px)/3)}}
@media (min-width:1040px){.track .pc{flex:0 0 calc((100% - 54px)/4)}}
.cb{position:absolute;top:34%;z-index:3;width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 4px 12px rgba(48,56,70,.2);display:none;place-items:center;color:var(--ink)}
.cb:hover{background:var(--green);color:#fff;border-color:var(--green)}
.cb.l{left:-14px}.cb.r{right:-14px}
@media (min-width:720px){.cb{display:grid}}
@media (min-width:1300px){.cb.l{left:-22px}.cb.r{right:-22px}}
.agechips{display:flex;gap:8px;flex-wrap:wrap}
.agechips button{min-height:42px;padding:6px 18px;border-radius:999px;border:1.5px solid #CFD6D1;background:#fff;color:var(--ink);font-weight:700;font-size:14px}
.agechips button:hover{border-color:var(--teal);color:var(--teal-dark)}
.agechips button[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
.sgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.sc{background:#fff;color:var(--ink);border-radius:16px;padding:20px;display:grid;gap:12px;align-content:start;box-shadow:0 8px 20px -16px rgba(24,68,52,.5)}
.sc h3{font-size:22px;color:var(--green)}
.sc ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.sc li{display:flex;gap:10px;align-items:center;font-size:15px;font-weight:600}
.sc li::before{content:"";width:14px;height:14px;border:2px solid var(--green);border-radius:3px;flex:none;background:linear-gradient(135deg,transparent 45%,var(--green) 46% 56%,transparent 57%)}
.sc .btn{justify-self:start;margin-top:4px}
.cgrid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.cgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cl{border-radius:16px;padding:18px;display:grid;gap:10px;background:var(--bg,#F1F1EE);text-align:left;align-content:space-between;min-height:200px;transition:transform .2s}
.cl:hover{transform:translateY(-3px)}
.cl svg{width:96px;height:auto;justify-self:end;filter:drop-shadow(0 8px 10px rgba(0,0,0,.14))}
.cl .ct2{display:block;font-family:var(--font-display);font-size:21px;font-weight:800;line-height:1.15}
.cl small{display:block;color:#596270;font-weight:700}
.clay{display:grid;gap:18px}
@media (min-width:1000px){.clay{grid-template-columns:250px minmax(0,1fr);gap:32px}}
.fpanel{display:none;gap:20px;align-content:start;background:#F6F7F4;border-radius:14px;padding:16px}
.fpanel.open{display:grid}
@media (min-width:1000px){.fpanel{display:grid}.ftoggle{display:none}}
.fg h4{font-size:15px;margin-bottom:8px;font-family:var(--font-body);font-weight:800;color:var(--green)}
.fg .opt{display:flex;width:100%;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;font-weight:700;font-size:14px}
.fg .opt:hover{background:var(--green-tint)}
.fg .opt[aria-pressed="true"]{background:var(--green);color:#fff}
.fg .opt.sub{padding-left:24px;font-weight:600}
.chk{display:flex;gap:10px;align-items:center;font-weight:700;font-size:14px;padding:4px 2px}
.chk input{width:18px;height:18px;accent-color:var(--green)}
.prange{display:flex;gap:8px;align-items:center}
.prange input{width:100%;min-width:0;padding:8px 10px;border:1.5px solid var(--line);border-radius:8px;background:#fff}
.ctool{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px}
.ctool select{padding:9px 12px;border:1.5px solid var(--line);border-radius:8px;background:#fff}
.afl{display:flex;gap:8px;flex-wrap:wrap}
.afl button{display:inline-flex;gap:6px;align-items:center;background:var(--green-tint);color:var(--green-dark);border-radius:6px;padding:4px 10px;font-size:13px;font-weight:800}
.afl button:hover{background:#D3E5DB}
.empty{border:2px dashed var(--line);border-radius:var(--r);padding:36px 16px;text-align:center;color:var(--ink-2);display:grid;gap:12px;justify-items:center}
.more{display:grid;place-items:center;margin-top:28px}
.trust{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.tr{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:16px;background:#fff}
.tr .ti{width:48px;height:48px;border-radius:12px;background:var(--green);color:#fff;display:grid;place-items:center;flex:none}
.tr h3{font-size:18px}.tr p{font-size:14px;color:var(--ink-2);margin-top:2px}
.note{font-size:13px;color:var(--ink-2);margin-top:12px}
footer{background:var(--green-dark);color:#fff;margin-top:0;position:relative}
.fgrid{display:grid;gap:28px;padding-block:44px 24px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.fgrid h4{font-size:16px;margin-bottom:10px;color:var(--yellow)}
.fgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fgrid .lk{color:#fff;font-size:14px;opacity:.92;display:inline-block;padding:2px 0;text-align:left}
.fgrid .lk:hover{text-decoration:underline;opacity:1}
.fgrid .bio{font-size:14px;opacity:.88;max-width:34ch;margin-top:10px}
.fgrid .draft{font-size:12px;background:rgba(244,197,66,.2);color:var(--yellow);padding:2px 8px;border-radius:5px;margin-left:6px}
.flogo{display:inline-block;background:#fff;border-radius:12px;padding:8px 14px}
.flogo img{height:90px;width:auto;display:block;mix-blend-mode:multiply;filter:saturate(1.5) contrast(1.1)}
.fbot{border-top:1px solid rgba(255,255,255,.2);padding-block:16px;font-size:13px;opacity:.9;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.scrim{position:fixed;inset:0;background:rgba(24,68,52,.55);z-index:70;display:flex}
.drawer{margin-left:auto;width:min(440px,100%);height:100%;background:#fff;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom,0px)}
.drawer header{display:flex;justify-content:space-between;align-items:center;padding:16px;padding-top:calc(16px + env(safe-area-inset-top,0px));border-bottom:1px solid var(--line);background:var(--green);color:#fff}
.drawer header .ab{color:#fff}.drawer header .ab:hover{background:var(--green-dark)}
.drawer h2{font-size:24px}
.dbody{flex:1;overflow:auto;padding:8px 16px;min-height:0}
.dfoot{border-top:1px solid var(--line);padding:16px;display:grid;gap:10px;background:var(--cream)}
.line{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);align-items:center}
.line .th{width:64px;height:64px;border-radius:10px;background:var(--cream);padding:4px;overflow:hidden}
.line .th.o{background:var(--teal-tint)}
.line .th svg,.line .th img{width:100%;height:100%;object-fit:contain}
.line h4{font-size:15px;font-family:var(--font-body);font-weight:800;overflow-wrap:anywhere;letter-spacing:0}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:8px;overflow:hidden;margin-top:6px}
.qty button{width:34px;height:34px;display:grid;place-items:center;background:var(--cream)}
.qty span{min-width:32px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
.ckf label{display:block;font-weight:700;font-size:14px;margin:12px 0 4px}
.ckf label small{font-weight:400;color:var(--ink-2)}
.ckf input,.ckf textarea{width:100%;padding:11px 12px;border:1.5px solid var(--line);border-radius:10px;font:inherit;font-size:16px;color:var(--ink);background:#fff}
.ckf input:focus,.ckf textarea:focus{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}
.ckf textarea{min-height:76px;resize:vertical}
.cerr{background:#FDECEC;border:1px solid #F3B8BA;color:#8E1A1F;border-radius:10px;padding:10px 12px;font-size:14px;margin-bottom:6px}
.cok{text-align:center;padding:24px 8px;display:grid;gap:10px;justify-items:center}
.cok .no{font-family:var(--font-display);font-size:30px;font-weight:800;color:var(--green)}
.tot{display:flex;justify-content:space-between;font-family:var(--font-display);font-size:24px;font-weight:800}
.modal{margin:auto;width:min(780px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;background:#fff;border-radius:var(--r);position:relative}
.modal .x{position:absolute;right:12px;top:12px;z-index:3;width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 1px 4px rgba(48,56,70,.2)}
.qv{display:grid;gap:20px;padding:20px}
@media (min-width:640px){.qv{grid-template-columns:1fr 1fr;padding:28px}}
.qv .pimg{border-radius:12px}
.qv h2{font-size:30px;margin-block:4px 8px}
.qv .info{display:grid;gap:10px;align-content:start}
.qv .pp b{font-size:32px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--green-dark);color:#fff;padding:11px 20px;border-radius:10px;z-index:90;font-weight:700;max-width:calc(100% - 32px);text-align:center}
@media (prefers-reduced-motion:no-preference){.drawer{animation:slide .2s ease-out}@keyframes slide{from{transform:translateX(24px);opacity:.5}}}

.fgrid a.lk{text-decoration:none}.fgrid a.lk:hover{text-decoration:underline}
.docm{width:min(720px,calc(100% - 24px))}
.docbody{padding:28px 24px 32px}
.docbody h2{font-size:28px;margin:0 0 14px;padding-right:48px}
.docbody h3{font-size:18px;margin:22px 0 6px}
.docbody p,.docbody li{font-size:15px;line-height:1.65;color:var(--ink)}
.docbody p{margin:0 0 10px}.docbody ul{padding-left:20px;margin:6px 0 10px}
.docbody a{color:var(--green);font-weight:800}
@media (min-width:640px){.docbody{padding:36px 40px 40px}}

/* Marka logoları */
.bgrid .bl{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:112px;padding:14px 10px 10px;background:#fff;border:1px solid #eadfcb;border-radius:16px;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s;font:inherit;color:var(--ink,#303846)}
.bgrid .bl:hover,.bgrid .bl:focus-visible{transform:translateY(-2px);box-shadow:0 8px 20px rgba(48,56,70,.12);border-color:#287C78}
.bgrid .bl .bli{display:block;width:100%;max-width:130px;height:56px;object-fit:contain}
.bgrid .bl .blw{display:flex;align-items:center;justify-content:center;height:56px;font-weight:900;font-size:16px;letter-spacing:.05em;text-transform:uppercase;text-align:center;line-height:1.1;color:#303846}
.bgrid .bl small{font-size:11px;font-weight:600;color:#7a7f89}

/* Marka logoları ek */
.bgrid .bl .bli{mix-blend-mode:multiply}
.bgrid .bl .bli[alt="Kangaro"]{filter:brightness(1.14) contrast(1.05)}