/* ============================================================
   PATITA — Moda para todos · catálogo mayorista de sandalias
   Paleta: amarillo sol + verde hoja (del logo) + aqua piscina + coral
   ============================================================ */
:root{
  --sun:#FFD43B; --sun-2:#FFE680; --sun-3:#FFF4C2; --sun-4:#FFFAE0;
  --leaf:#2E7D32; --leaf-d:#1B4D2A; --leaf-l:#7BC47F;
  --ink:#14301C; --ink-2:#3C5A45;
  --aqua:#19C3C9; --aqua-d:#0E9AA3; --aqua-s:#D9F7F5; --aqua-s2:#BDEFEC;
  --coral:#FF6B5B; --pink:#FF8FB1; --lilac:#B9A6FF;
  --wa:#25D366; --wa-d:#128C4A;
  --bg:#FFFBEA; --card:#FFFFFF; --line:rgba(20,48,28,.12);
  --r-s:14px; --r-m:22px; --r-l:32px;
  --shadow-s:0 4px 14px rgba(20,48,28,.08);
  --shadow-m:0 14px 34px rgba(20,48,28,.14);
  --shadow-l:0 30px 70px rgba(20,48,28,.22);
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --hh:76px;
  --f-d:'Fredoka','Baloo 2','Trebuchet MS',system-ui,sans-serif;
  --f-b:'Nunito','Segoe UI',system-ui,-apple-system,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--f-b);color:var(--ink);background:var(--bg);line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-d);font-weight:700;line-height:1.05;margin:0;letter-spacing:-.01em}
p{margin:0}
:focus-visible{outline:3px solid var(--aqua);outline-offset:3px;border-radius:8px}
.wrap{width:min(1200px,100% - 40px);margin-inline:auto}
section[id]{scroll-margin-top:calc(var(--hh) - 6px)}
::selection{background:var(--sun);color:var(--ink)}

/* ---------- preloader / progress ---------- */
.loader{position:fixed;inset:0;z-index:200;background:var(--sun);display:grid;place-items:center;transition:transform .9s var(--ease),opacity .4s .5s}
.loader.done{transform:translateY(-100%);opacity:0;pointer-events:none}
.loader__inner{text-align:center;color:var(--leaf)}
.loader__duck{width:120px;margin:0 auto;animation:bob 1.2s ease-in-out infinite}
.loader__duck svg{width:100%;height:auto;color:var(--leaf);fill:currentColor}
.loader__word{font-family:var(--f-d);font-weight:700;font-size:44px;margin-top:6px;letter-spacing:-.02em}
.loader__bar{width:150px;height:8px;border-radius:99px;background:rgba(46,125,50,.2);margin:14px auto 0;overflow:hidden}
.loader__bar i{display:block;height:100%;width:100%;background:var(--leaf);border-radius:99px;transform-origin:left;animation:load 1.1s var(--ease) forwards}
@keyframes load{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}
.progress{position:fixed;left:0;top:0;height:4px;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--aqua),var(--sun),var(--coral));z-index:120}

/* ---------- header ---------- */
.header{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--hh);display:flex;align-items:center;transition:background .35s,box-shadow .35s,height .35s}
.header.scrolled{background:rgba(255,251,234,.86);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);box-shadow:0 6px 24px rgba(20,48,28,.08);--hh:66px;height:66px}
.header__row{display:flex;align-items:center;gap:22px;justify-content:space-between}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand__mark{width:46px;height:46px;border-radius:50%;background:var(--leaf);display:grid;place-items:center;transition:transform .5s var(--spring);flex:none}
.brand:hover .brand__mark{transform:rotate(-14deg) scale(1.08)}
.brand__mark .duck{width:30px;height:30px;color:var(--sun);fill:currentColor}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__txt b{font-family:var(--f-d);font-size:28px;color:var(--leaf);letter-spacing:-.02em}
.brand__txt small{font-weight:800;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--leaf);opacity:.85;margin-top:3px}
.nav{display:flex;gap:6px;background:rgba(255,255,255,.7);padding:6px;border-radius:99px;backdrop-filter:blur(8px);box-shadow:var(--shadow-s)}
.nav a{text-decoration:none;font-weight:800;font-size:14.5px;padding:9px 16px;border-radius:99px;color:var(--ink-2);transition:background .25s,color .25s}
.nav a:hover{background:var(--sun-3);color:var(--ink)}
.nav a.is-active{background:var(--leaf);color:#fff}
.header__actions{display:flex;align-items:center;gap:10px}
.cartbtn{position:relative;display:flex;align-items:center;gap:9px;background:var(--ink);color:#fff;padding:11px 18px 11px 15px;border-radius:99px;font-weight:800;font-size:14.5px;box-shadow:var(--shadow-m);transition:transform .3s var(--spring),background .3s}
.cartbtn:hover{background:var(--leaf);transform:translateY(-2px)}
.cartbtn__total{background:var(--sun);color:var(--ink);border-radius:99px;padding:2px 9px;font-size:13px}
.cartbtn__badge,.fab__badge{position:absolute;top:-7px;left:-5px;min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:var(--coral);color:#fff;font-size:12px;font-weight:900;display:grid;place-items:center;border:2px solid var(--bg);transform:scale(0);transition:transform .35s var(--spring)}
.cartbtn.has .cartbtn__badge,.fab.has .fab__badge{transform:scale(1)}
.bump{animation:bump .6s var(--spring)}
@keyframes bump{0%{transform:scale(1)}30%{transform:scale(1.22) rotate(-6deg)}60%{transform:scale(.95) rotate(3deg)}100%{transform:scale(1)}}
.burger{display:none;width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:var(--shadow-s);flex-direction:column;gap:5px;align-items:center;justify-content:center}
.burger i{display:block;width:20px;height:2.5px;border-radius:2px;background:var(--ink);transition:transform .35s var(--ease),opacity .2s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--f-d);font-weight:600;font-size:18px;padding:16px 28px;border-radius:99px;text-decoration:none;position:relative;overflow:hidden;transition:transform .35s var(--spring),box-shadow .35s,background .3s,color .3s;will-change:transform}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn:hover::after{transform:translateX(120%)}
.btn--primary{background:var(--leaf);color:#fff;box-shadow:0 10px 0 var(--leaf-d),0 18px 30px rgba(27,77,42,.3)}
.btn--primary:hover{transform:translateY(-3px);box-shadow:0 13px 0 var(--leaf-d),0 24px 36px rgba(27,77,42,.35)}
.btn--primary:active{transform:translateY(7px);box-shadow:0 3px 0 var(--leaf-d)}
.btn--ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2.5px var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff;transform:translateY(-3px)}
.btn--wa{background:var(--wa);color:#fff;box-shadow:0 8px 0 var(--wa-d),0 16px 30px rgba(18,140,74,.35)}
.btn--wa:hover{transform:translateY(-3px);box-shadow:0 11px 0 var(--wa-d),0 22px 34px rgba(18,140,74,.4)}
.btn--wa:active{transform:translateY(6px);box-shadow:0 2px 0 var(--wa-d)}
.btn--block{width:100%}
.linkbtn{display:block;margin:10px auto 0;font-weight:800;font-size:13.5px;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:var(--coral)}

/* ---------- hero ---------- */
.hero{position:relative;background:linear-gradient(180deg,var(--sun) 0%,#FFDF63 60%,#FFE680 100%);padding:calc(var(--hh) + 54px) 0 150px;overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.sun{position:absolute;right:-110px;top:-130px;width:560px;height:560px}
.sun__core{position:absolute;inset:130px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFF6B8,#FFC928 70%);box-shadow:0 0 90px 40px rgba(255,255,255,.55);animation:pulse 4.5s ease-in-out infinite}
.sun__rays{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.55) 0 7deg,transparent 7deg 22deg);-webkit-mask:radial-gradient(circle,transparent 24%,#000 25%,#000 70%,transparent 71%);mask:radial-gradient(circle,transparent 24%,#000 25%,#000 70%,transparent 71%);animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{transform:scale(1.07)}}
.bubble{position:absolute;bottom:-60px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.95),rgba(255,255,255,.25));border:2px solid rgba(255,255,255,.65);animation:rise linear infinite}
.b1{left:6%;width:36px;height:36px;animation-duration:13s}
.b2{left:18%;width:20px;height:20px;animation-duration:9s;animation-delay:-4s}
.b3{left:38%;width:48px;height:48px;animation-duration:16s;animation-delay:-8s}
.b4{left:58%;width:24px;height:24px;animation-duration:11s;animation-delay:-2s}
.b5{left:76%;width:40px;height:40px;animation-duration:14s;animation-delay:-6s}
.b6{left:90%;width:18px;height:18px;animation-duration:10s;animation-delay:-9s}
@keyframes rise{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:1}50%{transform:translateY(-420px) translateX(20px)}100%{transform:translateY(-880px) translateX(-14px);opacity:0}}
.spark{position:absolute;fill:#fff;opacity:.9;animation:twinkle 3s ease-in-out infinite}
.s1{left:46%;top:18%;width:26px}.s2{left:8%;top:44%;width:18px;animation-delay:-1s}.s3{right:30%;top:68%;width:22px;animation-delay:-2s}
@keyframes twinkle{0%,100%{transform:scale(.4) rotate(0);opacity:.3}50%{transform:scale(1) rotate(90deg);opacity:1}}

.hero__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:30px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:9px;background:#fff;border-radius:99px;padding:8px 16px 8px 12px;font-weight:800;font-size:13.5px;box-shadow:var(--shadow-s);color:var(--leaf-d)}
.pill .dot{width:10px;height:10px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 0 rgba(255,107,91,.7);animation:ping 1.8s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(255,107,91,0)}100%{box-shadow:0 0 0 0 rgba(255,107,91,0)}}
.hero h1{font-size:clamp(46px,7.2vw,98px);color:var(--leaf-d);margin:20px 0 18px;text-shadow:0 3px 0 rgba(255,255,255,.4)}
.swash{position:relative;display:inline-block;color:var(--leaf)}
.swash::after{content:"";position:absolute;left:-2%;right:-2%;bottom:-.12em;height:.22em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M0 7 Q15 0 30 6 T60 6 T90 6 T120 6' fill='none' stroke='%2319C3C9' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;animation:wiggle 3s ease-in-out infinite}
@keyframes wiggle{50%{transform:translateX(5px) scaleX(.97)}}
.hl{background:linear-gradient(transparent 58%,var(--sun) 58%);padding:0 .08em;border-radius:6px}
.hero .hl{background:linear-gradient(transparent 55%,rgba(255,255,255,.75) 55%)}
.lead{font-size:clamp(17px,1.9vw,21px);max-width:540px;color:var(--ink);font-weight:600}
.hero__cta{display:flex;gap:16px;flex-wrap:wrap;margin:30px 0 34px}
.stats{list-style:none;display:flex;gap:28px;padding:0;margin:0;flex-wrap:wrap}
.stats li{display:flex;flex-direction:column;line-height:1.1}
.stats b{font-family:var(--f-d);font-size:38px;color:var(--leaf-d);font-weight:700}
.stats b i{font-style:normal}
.stats span{font-weight:800;font-size:13px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em}
.fine{font-size:12px;color:var(--ink-2);margin-top:12px;font-weight:600;opacity:.8}

.hero__stage{position:relative;aspect-ratio:1/1.02;max-width:560px;width:100%;margin-inline:auto}
.stage__disc{position:absolute;inset:6% 6% 8% 6%;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff 0,#FFF6C7 35%,#FFE06B 100%);box-shadow:inset 0 -18px 40px rgba(255,170,0,.25),0 30px 80px rgba(180,120,0,.25)}
.stage__ring{position:absolute;inset:0;border-radius:50%;border:3px dashed rgba(255,255,255,.9);animation:spinr 50s linear infinite reverse}
@keyframes spinr{to{rotate:360deg}}
.float{position:absolute;filter:drop-shadow(0 22px 24px rgba(20,48,28,.3));transition:transform .25s ease-out;will-change:transform}
.f1{width:58%;left:-4%;top:6%;--r:-10deg;animation:floaty 6s ease-in-out infinite}
.f2{width:68%;right:-6%;top:28%;--r:8deg;animation:floaty 7s ease-in-out -2s infinite;z-index:2}
.f3{width:54%;left:12%;bottom:-2%;--r:-4deg;animation:floaty 8s ease-in-out -4s infinite}
@keyframes floaty{0%,100%{rotate:var(--r)}50%{rotate:calc(var(--r) * -.6);translate:0 -14px}}
.tag{position:absolute;z-index:3;background:#fff;border-radius:18px;box-shadow:var(--shadow-m);padding:10px 16px;font-weight:800}
.tag--price{left:2%;top:50%;display:flex;flex-direction:column;line-height:1.05;background:var(--leaf);color:#fff;animation:swing 4s ease-in-out infinite;transform-origin:top center}
.tag--price small{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--sun)}
.tag--price b{font-family:var(--f-d);font-size:30px}
.tag--wa{right:0;top:7%;display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--wa-d);animation:floaty2 5s ease-in-out infinite}
.tag--wa svg{color:var(--wa)}
@keyframes swing{0%,100%{rotate:-4deg}50%{rotate:4deg}}
@keyframes floaty2{50%{translate:0 -10px}}
.mascot{position:absolute;right:4%;bottom:-3%;width:25%;z-index:4;animation:bob 3.4s ease-in-out infinite;filter:drop-shadow(0 14px 14px rgba(20,48,28,.25))}
.mascot svg{width:100%;height:auto;color:var(--leaf);fill:currentColor}

.waves{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:140px;z-index:1;pointer-events:none}
.waves .w{animation:waveX 9s ease-in-out infinite alternate}
.w1{fill:rgba(25,195,201,.35)}.w2{fill:rgba(25,195,201,.55);animation-duration:7s!important;animation-direction:alternate-reverse!important}
.w3{fill:var(--bg);animation-duration:11s!important}
@keyframes waveX{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
.waves{overflow:visible}

/* ---------- marquee ---------- */
.marquee{background:var(--leaf);color:var(--sun);overflow:hidden;transform:rotate(-1.2deg);margin:-26px -10px 0;position:relative;z-index:3;box-shadow:0 12px 30px rgba(20,48,28,.2);border-block:4px solid var(--ink)}
.marquee__track{display:flex;align-items:center;gap:26px;width:max-content;padding:14px 0;animation:marq 32s linear infinite;font-family:var(--f-d);font-weight:700;font-size:26px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.marquee i{width:22px;height:22px;flex:none;background:var(--sun);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='103.7 47.8 87.2 81.5'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M181.42,127.30C179.21,126.98 177.42,126.19 177.04,125.39C176.73,124.74 176.70,124.87 177.91,121.42C179.69,116.35 178.57,110.07 174.85,104.25C173.93,102.81 169.36,98.12 167.17,96.37C161.72,92.03 159.33,89.25 159.33,87.27C159.33,86.27 160.24,86.07 161.23,86.85C161.45,87.02 162.08,87.42 162.61,87.73C163.15,88.03 164.57,88.85 165.77,89.54C166.97,90.23 168.28,90.97 168.68,91.17C169.09,91.38 169.90,91.86 170.50,92.25C171.10,92.63 172.33,93.39 173.25,93.93C175.52,95.25 177.27,96.68 179.25,98.82C183.49,103.40 185.13,106.27 186.65,111.83C187.54,115.10 187.57,121.25 186.70,124.02C186.52,124.60 186.29,125.46 186.18,125.92C185.82,127.49 184.75,127.80 181.42,127.30ZM125.00,125.06C119.72,124.25 116.06,122.88 113.39,120.68C113.09,120.45 112.50,119.99 112.06,119.67C111.62,119.35 110.99,118.80 110.67,118.45C110.35,118.10 109.67,117.38 109.17,116.85C105.51,113.00 104.77,110.06 107.79,111.41C109.25,112.06 112.29,112.67 114.06,112.67C116.36,112.67 117.13,112.17 118.46,109.82C118.75,109.31 119.15,108.75 119.35,108.57C119.55,108.40 120.05,107.80 120.47,107.25C121.40,106.02 124.04,103.39 125.22,102.52C125.69,102.17 126.20,101.75 126.33,101.58C126.62,101.23 130.35,98.78 132.20,97.72C134.12,96.63 138.45,94.96 139.93,94.74C141.85,94.46 142.23,93.80 141.39,92.23C141.15,91.78 140.86,91.08 140.74,90.67C140.62,90.25 140.38,89.50 140.20,89.00C139.54,87.21 139.41,82.25 139.94,79.33C140.54,76.03 143.88,70.73 146.49,68.96C146.91,68.67 147.59,68.16 148.00,67.82C150.91,65.44 157.66,64.42 161.83,65.73C166.51,67.20 170.08,70.53 171.34,74.58C171.68,75.69 172.61,77.39 173.11,77.84C175.66,80.14 180.94,81.98 184.42,81.78C188.03,81.57 189.00,81.99 189.00,83.76C189.00,84.83 188.67,85.20 186.35,86.70C185.15,87.47 179.95,88.30 177.45,88.11C176.70,88.05 175.56,87.97 174.92,87.92C174.27,87.87 173.07,87.72 172.25,87.58C171.43,87.45 170.20,87.26 169.54,87.17C168.08,86.96 165.20,86.07 164.78,85.70C164.28,85.25 164.59,84.71 166.26,83.10C168.26,81.18 168.31,80.90 166.89,79.75C163.15,76.70 156.87,76.45 152.92,79.18C149.14,81.79 148.37,86.19 150.88,90.80C152.03,92.91 153.48,94.21 155.17,94.67C155.58,94.78 156.40,95.11 156.99,95.41C157.59,95.71 158.38,96.05 158.75,96.17C159.72,96.48 161.62,97.59 162.58,98.40C163.04,98.79 163.75,99.34 164.17,99.62C168.89,102.88 173.00,110.27 173.28,116.00C173.55,121.55 172.55,122.89 170.34,119.92C169.70,119.05 169.11,118.33 169.04,118.33C168.97,118.33 168.73,118.05 168.51,117.71C168.28,117.36 167.86,116.81 167.56,116.48C167.27,116.14 166.76,115.47 166.43,114.98C165.50,113.60 164.53,112.30 164.02,111.75C163.76,111.48 163.43,111.07 163.28,110.85C161.69,108.46 155.91,104.25 152.38,102.90C144.83,100.03 133.86,101.00 129.16,104.95C128.03,105.90 129.63,106.17 131.54,105.35C131.96,105.17 132.97,104.94 133.78,104.85C134.59,104.75 135.93,104.59 136.75,104.49C142.19,103.82 148.79,105.33 153.24,108.26C155.75,109.91 155.80,110.92 153.42,112.14C153.05,112.33 152.36,112.77 151.87,113.12C151.02,113.73 146.02,117.29 145.17,117.88C144.94,118.04 144.15,118.62 143.42,119.16C137.69,123.41 130.11,125.84 125.00,125.06ZM160.18,74.51C161.39,73.30 159.92,71.28 158.23,71.84C157.53,72.07 157.33,72.42 157.33,73.41C157.33,74.96 159.07,75.63 160.18,74.51ZM142.06,67.56C136.83,64.03 136.40,62.14 140.80,62.04C143.88,61.97 143.75,62.12 143.99,58.58C144.30,53.82 144.99,52.99 147.10,54.83C147.62,55.29 148.11,55.67 148.19,55.67C148.27,55.67 148.74,56.04 149.25,56.50C150.71,57.82 151.03,57.81 152.18,56.33C153.43,54.74 154.71,53.34 155.02,53.24C155.95,52.95 156.66,54.01 156.68,55.73C156.68,56.29 156.74,57.31 156.81,58.00C157.20,61.82 156.78,62.63 154.23,63.06C151.19,63.57 147.70,65.18 144.70,67.46C143.78,68.15 142.98,68.18 142.06,67.56ZM135.10,62.57C134.54,62.02 135.00,60.83 135.76,60.83C136.28,60.83 136.83,61.38 136.83,61.89C136.83,62.69 135.67,63.15 135.10,62.57ZM143.16,52.41C142.63,51.77 143.07,50.67 143.87,50.67C144.27,50.67 144.83,51.25 144.83,51.67C144.83,52.45 143.63,52.98 143.16,52.41ZM155.40,51.25C155.15,50.87 155.15,50.80 155.39,50.43C155.88,49.69 156.84,49.73 157.09,50.51C157.39,51.47 155.96,52.10 155.40,51.25Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='103.7 47.8 87.2 81.5'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M181.42,127.30C179.21,126.98 177.42,126.19 177.04,125.39C176.73,124.74 176.70,124.87 177.91,121.42C179.69,116.35 178.57,110.07 174.85,104.25C173.93,102.81 169.36,98.12 167.17,96.37C161.72,92.03 159.33,89.25 159.33,87.27C159.33,86.27 160.24,86.07 161.23,86.85C161.45,87.02 162.08,87.42 162.61,87.73C163.15,88.03 164.57,88.85 165.77,89.54C166.97,90.23 168.28,90.97 168.68,91.17C169.09,91.38 169.90,91.86 170.50,92.25C171.10,92.63 172.33,93.39 173.25,93.93C175.52,95.25 177.27,96.68 179.25,98.82C183.49,103.40 185.13,106.27 186.65,111.83C187.54,115.10 187.57,121.25 186.70,124.02C186.52,124.60 186.29,125.46 186.18,125.92C185.82,127.49 184.75,127.80 181.42,127.30ZM125.00,125.06C119.72,124.25 116.06,122.88 113.39,120.68C113.09,120.45 112.50,119.99 112.06,119.67C111.62,119.35 110.99,118.80 110.67,118.45C110.35,118.10 109.67,117.38 109.17,116.85C105.51,113.00 104.77,110.06 107.79,111.41C109.25,112.06 112.29,112.67 114.06,112.67C116.36,112.67 117.13,112.17 118.46,109.82C118.75,109.31 119.15,108.75 119.35,108.57C119.55,108.40 120.05,107.80 120.47,107.25C121.40,106.02 124.04,103.39 125.22,102.52C125.69,102.17 126.20,101.75 126.33,101.58C126.62,101.23 130.35,98.78 132.20,97.72C134.12,96.63 138.45,94.96 139.93,94.74C141.85,94.46 142.23,93.80 141.39,92.23C141.15,91.78 140.86,91.08 140.74,90.67C140.62,90.25 140.38,89.50 140.20,89.00C139.54,87.21 139.41,82.25 139.94,79.33C140.54,76.03 143.88,70.73 146.49,68.96C146.91,68.67 147.59,68.16 148.00,67.82C150.91,65.44 157.66,64.42 161.83,65.73C166.51,67.20 170.08,70.53 171.34,74.58C171.68,75.69 172.61,77.39 173.11,77.84C175.66,80.14 180.94,81.98 184.42,81.78C188.03,81.57 189.00,81.99 189.00,83.76C189.00,84.83 188.67,85.20 186.35,86.70C185.15,87.47 179.95,88.30 177.45,88.11C176.70,88.05 175.56,87.97 174.92,87.92C174.27,87.87 173.07,87.72 172.25,87.58C171.43,87.45 170.20,87.26 169.54,87.17C168.08,86.96 165.20,86.07 164.78,85.70C164.28,85.25 164.59,84.71 166.26,83.10C168.26,81.18 168.31,80.90 166.89,79.75C163.15,76.70 156.87,76.45 152.92,79.18C149.14,81.79 148.37,86.19 150.88,90.80C152.03,92.91 153.48,94.21 155.17,94.67C155.58,94.78 156.40,95.11 156.99,95.41C157.59,95.71 158.38,96.05 158.75,96.17C159.72,96.48 161.62,97.59 162.58,98.40C163.04,98.79 163.75,99.34 164.17,99.62C168.89,102.88 173.00,110.27 173.28,116.00C173.55,121.55 172.55,122.89 170.34,119.92C169.70,119.05 169.11,118.33 169.04,118.33C168.97,118.33 168.73,118.05 168.51,117.71C168.28,117.36 167.86,116.81 167.56,116.48C167.27,116.14 166.76,115.47 166.43,114.98C165.50,113.60 164.53,112.30 164.02,111.75C163.76,111.48 163.43,111.07 163.28,110.85C161.69,108.46 155.91,104.25 152.38,102.90C144.83,100.03 133.86,101.00 129.16,104.95C128.03,105.90 129.63,106.17 131.54,105.35C131.96,105.17 132.97,104.94 133.78,104.85C134.59,104.75 135.93,104.59 136.75,104.49C142.19,103.82 148.79,105.33 153.24,108.26C155.75,109.91 155.80,110.92 153.42,112.14C153.05,112.33 152.36,112.77 151.87,113.12C151.02,113.73 146.02,117.29 145.17,117.88C144.94,118.04 144.15,118.62 143.42,119.16C137.69,123.41 130.11,125.84 125.00,125.06ZM160.18,74.51C161.39,73.30 159.92,71.28 158.23,71.84C157.53,72.07 157.33,72.42 157.33,73.41C157.33,74.96 159.07,75.63 160.18,74.51ZM142.06,67.56C136.83,64.03 136.40,62.14 140.80,62.04C143.88,61.97 143.75,62.12 143.99,58.58C144.30,53.82 144.99,52.99 147.10,54.83C147.62,55.29 148.11,55.67 148.19,55.67C148.27,55.67 148.74,56.04 149.25,56.50C150.71,57.82 151.03,57.81 152.18,56.33C153.43,54.74 154.71,53.34 155.02,53.24C155.95,52.95 156.66,54.01 156.68,55.73C156.68,56.29 156.74,57.31 156.81,58.00C157.20,61.82 156.78,62.63 154.23,63.06C151.19,63.57 147.70,65.18 144.70,67.46C143.78,68.15 142.98,68.18 142.06,67.56ZM135.10,62.57C134.54,62.02 135.00,60.83 135.76,60.83C136.28,60.83 136.83,61.38 136.83,61.89C136.83,62.69 135.67,63.15 135.10,62.57ZM143.16,52.41C142.63,51.77 143.07,50.67 143.87,50.67C144.27,50.67 144.83,51.25 144.83,51.67C144.83,52.45 143.63,52.98 143.16,52.41ZM155.40,51.25C155.15,50.87 155.15,50.80 155.39,50.43C155.88,49.69 156.84,49.73 157.09,50.51C157.39,51.47 155.96,52.10 155.40,51.25Z'/%3E%3C/svg%3E") center/contain no-repeat}
@keyframes marq{to{transform:translateX(-50%)}}
.marquee:hover .marquee__track{animation-play-state:paused}

/* ---------- sections ---------- */
.section{padding:110px 0;position:relative}
.sechead{text-align:center;margin-bottom:46px}
.eyebrow{display:inline-block;font-weight:900;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--leaf);background:var(--sun-2);padding:7px 14px;border-radius:99px;margin-bottom:16px}
.sechead h2{font-size:clamp(34px,5vw,60px)}
.sechead p{margin-top:14px;font-size:18px;color:var(--ink-2);max-width:620px;margin-inline:auto;font-weight:600}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tile{position:relative;text-align:left;border-radius:var(--r-l);min-height:340px;padding:26px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;box-shadow:var(--shadow-m);transition:box-shadow .4s,transform .5s var(--ease);isolation:isolate}
.tile:hover{box-shadow:var(--shadow-l)}
.tile::before{content:"";position:absolute;inset:0;z-index:-2}
.tile--dama{color:var(--ink)}.tile--dama::before{background:linear-gradient(160deg,#FFB7CE,#FF8FB1)}
.tile--kids{color:var(--ink)}.tile--kids::before{background:linear-gradient(160deg,#7FE6E6,#19C3C9)}
.tile--men{color:#fff}.tile--men::before{background:linear-gradient(160deg,#3E9A4A,#1B4D2A)}
.tile::after{content:"";position:absolute;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,.28);right:-90px;top:-90px;z-index:-1;transition:transform .7s var(--ease)}
.tile:hover::after{transform:scale(1.35)}
.tile__img{position:absolute;right:0;top:6px;width:78%;height:72%;display:grid;place-items:center;transition:transform .6s var(--spring)}
.tile__img img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 18px rgba(20,48,28,.28));rotate:-8deg}
.tile:hover .tile__img{transform:scale(1.1) rotate(4deg)}
.tile__img--duck{width:52%;right:8%;top:10%}
.tile__img--duck svg{width:100%;height:auto;fill:currentColor;opacity:.92;animation:bob 4s ease-in-out infinite}
.tile--kids .tile__img--duck svg{color:#fff}.tile--men .tile__img--duck svg{color:var(--sun)}
.tile__body{display:flex;flex-direction:column;gap:3px}
.tile__body small{font-weight:900;text-transform:uppercase;letter-spacing:.14em;font-size:11.5px;opacity:.85}
.tile__body b{font-family:var(--f-d);font-size:46px;line-height:1}
.tile__body em{font-style:normal;font-weight:700;opacity:.85}
.tile__arrow{position:absolute;right:20px;bottom:20px;width:50px;height:50px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;transition:transform .4s var(--spring)}
.tile:hover .tile__arrow{transform:translateX(5px) rotate(-35deg) scale(1.1)}

/* ---------- catalog ---------- */
.section--catalog{background:var(--bg);padding-top:90px}
.seg{position:relative;display:flex;width:max-content;max-width:100%;margin:0 auto 30px;background:#fff;border-radius:99px;padding:6px;box-shadow:var(--shadow-m)}
.seg button{position:relative;z-index:1;font-family:var(--f-d);font-weight:600;font-size:18px;padding:10px 30px;border-radius:99px;color:var(--ink-2);transition:color .3s}
.seg button.is-active{color:#fff}
.seg__pill{position:absolute;top:6px;bottom:6px;left:6px;width:80px;border-radius:99px;background:var(--leaf);transition:transform .5s var(--spring),width .5s var(--spring);box-shadow:0 6px 14px rgba(46,125,50,.4)}

.toolbar{position:sticky;top:var(--hh);z-index:50;background:rgba(255,251,234,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:14px 0 12px;margin:0 -20px;padding-inline:20px;border-bottom:2px solid transparent;transition:border-color .3s,box-shadow .3s}
.toolbar.stuck{border-color:var(--line);box-shadow:0 10px 22px rgba(20,48,28,.07);padding-top:8px;padding-bottom:4px}
.toolbar.stuck .select span{display:none}
.toolbar.stuck .select{padding:9px 14px;min-width:130px}
.toolbar.stuck .search input{padding:10px 0}
.toolbar.stuck .chips{margin-top:6px;padding-bottom:4px}
.toolbar .select,.toolbar .search input,.toolbar .chips{transition:all .3s var(--ease)}
.toolbar__row{display:flex;gap:14px;flex-wrap:wrap}
.search{flex:1 1 320px;position:relative;display:flex;align-items:center;gap:10px;background:#fff;border-radius:99px;padding:0 18px;box-shadow:var(--shadow-s);box-shadow:inset 0 0 0 2px var(--line),var(--shadow-s);transition:box-shadow .3s}
.search:focus-within{box-shadow:inset 0 0 0 2.5px var(--aqua),0 8px 22px rgba(25,195,201,.25)}
.search svg{color:var(--ink-2);flex:none}
.search input{flex:1;border:0;background:none;font:inherit;font-weight:700;padding:14px 0;outline:none;color:var(--ink);min-width:0}
.search input::placeholder{color:#8a9d8f;font-weight:600}
.search input::-webkit-search-cancel-button{display:none}
.search__clear{width:28px;height:28px;border-radius:50%;background:var(--sun-2);font-size:20px;line-height:1;font-weight:800}
.selects{display:flex;gap:10px;flex-wrap:wrap}
.select{display:flex;flex-direction:column;background:#fff;border-radius:18px;padding:5px 14px 4px;box-shadow:inset 0 0 0 2px var(--line);min-width:150px}
.select span{font-size:10.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.select select{border:0;background:none;font:inherit;font-weight:800;padding:2px 0 3px;outline:none;color:var(--ink);cursor:pointer}
.chips{display:flex;gap:9px;margin-top:12px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:8px;background:#fff;box-shadow:inset 0 0 0 2px var(--line);border-radius:99px;padding:9px 16px;font-weight:800;font-size:14.5px;transition:transform .3s var(--spring),background .25s,color .25s,box-shadow .25s;white-space:nowrap}
.chip small{font-size:11.5px;background:var(--sun-3);padding:1px 7px;border-radius:99px;font-weight:900;transition:background .25s}
.chip:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 2px var(--leaf)}
.chip.on{background:var(--leaf);color:#fff;box-shadow:0 8px 18px rgba(46,125,50,.35);transform:translateY(-2px)}
.chip.on small{background:rgba(255,255,255,.25)}
.resultbar{display:flex;justify-content:space-between;align-items:center;margin:20px 4px 18px;font-weight:800;color:var(--ink-2);gap:14px;flex-wrap:wrap}
.resultbar #resultCount{font-family:var(--f-d);font-size:20px;color:var(--ink)}
.resultbar .hint{font-size:13.5px;opacity:.8}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:26px}
.card{position:relative;background:var(--card);border-radius:var(--r-l);box-shadow:var(--shadow-s);display:flex;flex-direction:column;opacity:0;transform:translateY(34px) scale(.97);transition:opacity .7s var(--ease),transform .7s var(--ease),box-shadow .4s;transition-delay:calc(var(--i,0) * 55ms)}
.card.in{opacity:1;transform:none}
.card.in.settled{transition-delay:0s}
.card:hover{box-shadow:var(--shadow-l);z-index:2}
.card__media{position:relative;margin:10px 10px 0;aspect-ratio:1/1;border-radius:calc(var(--r-l) - 8px);overflow:hidden;cursor:pointer;background:var(--tone);isolation:isolate;transform-style:preserve-3d}
.tone0{--tone:linear-gradient(150deg,#FFF3B8,#FFD84F)}
.tone1{--tone:linear-gradient(150deg,#D6F8F5,#7FDDD8)}
.tone2{--tone:linear-gradient(150deg,#FFE0EA,#FFB0C8)}
.tone3{--tone:linear-gradient(150deg,#E6F8D2,#B5E48C)}
.tone4{--tone:linear-gradient(150deg,#ECE4FF,#C6B5FF)}
.tone5{--tone:linear-gradient(150deg,#FFE7D2,#FFC49C)}
.card__media::before{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.55);left:50%;top:50%;transform:translate(-50%,-50%) scale(.8);transition:transform .7s var(--spring);z-index:-1}
.card:hover .card__media::before{transform:translate(-50%,-50%) scale(1.15)}
.card__img{position:absolute;inset:0;width:100%;height:100%;transition:opacity .45s,transform .7s var(--spring)}
.card__img--cut{object-fit:contain;padding:11%;filter:drop-shadow(0 14px 12px rgba(20,48,28,.28))}
.card__img--photo{object-fit:cover}
.card__img.alt{opacity:0}
.card:hover .card__img.alt{opacity:1}
.card:hover .card__img.main.has-alt{opacity:0}
.card:hover .card__img--cut{transform:scale(1.07) rotate(-3deg)}
.card:hover .card__img--photo{transform:scale(1.08)}
.card__glare{position:absolute;inset:0;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.55),transparent 55%);opacity:0;transition:opacity .3s;pointer-events:none;mix-blend-mode:soft-light}
.card__media:hover .card__glare{opacity:1}
.badges{position:absolute;left:10px;top:10px;display:flex;gap:6px;z-index:2;flex-wrap:wrap}
.badge{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:99px;background:#fff;color:var(--ink);box-shadow:var(--shadow-s)}
.badge--deal{background:var(--coral);color:#fff}
.badge--goma{background:var(--ink);color:var(--sun)}
.colors{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.92);border-radius:99px;padding:5px 11px;font-size:12px;font-weight:900;z-index:2;box-shadow:var(--shadow-s)}
.colors i{width:11px;height:11px;border-radius:50%;background:conic-gradient(var(--coral),var(--sun),var(--leaf-l),var(--aqua),var(--lilac),var(--coral))}
.view{position:absolute;left:50%;bottom:12px;transform:translate(-50%,20px);opacity:0;background:var(--ink);color:#fff;font-weight:800;font-size:13px;padding:8px 16px;border-radius:99px;transition:transform .4s var(--spring),opacity .3s;z-index:3;white-space:nowrap}
.card__media:hover .view{transform:translate(-50%,0);opacity:1}
.card__body{padding:14px 18px 18px;display:flex;flex-direction:column;gap:2px;flex:1}
.card__cat{font-size:11.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--aqua-d)}
.card__name{font-size:22px;line-height:1.1;margin-top:2px}
.card__ref{font-size:12.5px;font-weight:700;color:#789080}
.price{display:flex;align-items:baseline;gap:7px;margin-top:10px;flex-wrap:wrap}
.price b{font-family:var(--f-d);font-size:32px;color:var(--leaf-d);line-height:1}
.price span{font-weight:800;font-size:13px;color:var(--ink-2)}
.price__sub{font-size:12.5px;font-weight:700;color:var(--ink-2);margin-top:3px}
.price__sub u{text-decoration:none;background:var(--sun-3);padding:1px 7px;border-radius:99px;font-weight:900;color:var(--ink)}
.card__buy{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.unit{position:relative;display:flex;background:var(--sun-3);border-radius:99px;padding:4px}
.unit button{position:relative;z-index:1;flex:1;font-weight:900;font-size:13px;padding:8px 6px;border-radius:99px;color:var(--ink-2);transition:color .25s;white-space:nowrap}
.unit button.on{color:#fff}
.unit i{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:99px;background:var(--leaf);transition:transform .4s var(--spring);box-shadow:0 4px 10px rgba(46,125,50,.35)}
.unit[data-u="h"] i{transform:translateX(100%)}
.add{display:flex;align-items:center;justify-content:center;gap:7px;background:var(--ink);color:#fff;font-weight:900;font-size:14px;border-radius:99px;padding:0 14px;transition:transform .3s var(--spring),background .3s;min-height:42px;position:relative;overflow:hidden}
.add:hover{background:var(--leaf);transform:translateY(-2px)}
.add:active{transform:scale(.94)}
.add svg{transition:transform .4s var(--spring)}
.add:hover svg{transform:rotate(90deg) scale(1.15)}
.add.ok{background:var(--wa)}
.incart{position:absolute;top:10px;right:10px;z-index:3;background:var(--wa);color:#fff;font-weight:900;font-size:12px;padding:5px 10px;border-radius:99px;transform:scale(0);transition:transform .4s var(--spring);box-shadow:var(--shadow-s)}
.card.has .incart{transform:scale(1)}

.more{text-align:center;margin-top:46px}
.empty{text-align:center;padding:60px 20px}
.empty__duck{width:130px;margin:0 auto 10px;animation:bob 3s ease-in-out infinite}
.empty__duck svg{width:100%;height:auto;fill:currentColor;color:var(--leaf-l)}
.empty h3{font-size:32px}.empty p{margin:10px 0 24px;color:var(--ink-2);font-weight:600}

/* ---------- aqua section ---------- */
.section--aqua{background:linear-gradient(180deg,var(--aqua-s),var(--aqua-s2));padding-top:140px}
.wave-top{position:absolute;left:0;right:0;top:-1px;height:70px;background:var(--bg);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V30C1320 70 1200 70 1080 40S840 0 720 30 480 70 360 40 120 0 0 30Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V30C1320 70 1200 70 1080 40S840 0 720 30 480 70 360 40 120 0 0 30Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.feat{background:#fff;border-radius:var(--r-l);padding:30px 26px;box-shadow:var(--shadow-s);transition:box-shadow .4s}
.feat:hover{box-shadow:var(--shadow-m)}
.feat__ico{width:76px;height:76px;border-radius:24px;display:grid;place-items:center;margin-bottom:20px;transition:transform .6s var(--spring)}
.feat:hover .feat__ico{transform:rotate(-10deg) scale(1.12)}
.ico-sun{background:var(--sun-2);color:#C98A00}.ico-drop{background:var(--aqua-s2);color:var(--aqua-d)}.ico-tag{background:#FFD9E3;color:#D9486F}.ico-wa{background:#CFF6DD;color:var(--wa-d)}
.feat h3{font-size:24px;margin-bottom:8px}
.feat p{color:var(--ink-2);font-weight:600;font-size:15.5px}

/* ---------- steps ---------- */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;position:relative;counter-reset:s}
.steps::before{content:"";position:absolute;left:12%;right:12%;top:38px;border-top:4px dashed var(--sun);z-index:0}
.step{position:relative;z-index:1;text-align:center;padding:0 12px}
.step__n{width:78px;height:78px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;font-family:var(--f-d);font-weight:700;font-size:38px;background:var(--leaf);color:var(--sun);box-shadow:0 8px 0 var(--leaf-d);transition:transform .5s var(--spring)}
.step:hover .step__n{transform:translateY(-6px) rotate(-8deg)}
.step h3{font-size:25px;margin-bottom:8px}
.step p{color:var(--ink-2);font-weight:600;max-width:300px;margin-inline:auto}

/* ---------- cta ---------- */
.cta{padding:30px 0 110px}
.cta__inner{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:center;background:var(--leaf);color:#fff;border-radius:44px;padding:44px 50px;overflow:hidden;box-shadow:0 14px 0 var(--leaf-d),var(--shadow-l)}
.cta__inner::before,.cta__inner::after{content:"";position:absolute;border-radius:50%;background:rgba(255,212,59,.16)}
.cta__inner::before{width:360px;height:360px;right:-90px;top:-170px}
.cta__inner::after{width:220px;height:220px;left:30%;bottom:-130px}
.cta__duck{width:120px;color:var(--sun);animation:bob 3.4s ease-in-out infinite;position:relative;z-index:1}
.cta__duck svg{width:100%;height:auto;fill:currentColor}
.cta__copy{position:relative;z-index:1}
.cta h2{font-size:clamp(28px,4vw,46px);color:var(--sun)}
.cta p{margin-top:8px;font-weight:700;opacity:.92;font-size:18px}
.cta .btn{position:relative;z-index:1}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:#d8e6dc;padding:54px 0 28px}
.footer__row{display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:center}
.footer__brand{display:flex;align-items:center;gap:12px}
.footer__brand b{font-family:var(--f-d);font-size:30px;color:var(--sun);display:block;line-height:1}
.footer__brand small{font-weight:800;letter-spacing:.18em;font-size:10px;text-transform:uppercase;color:#9bb8a4}
.footer nav{display:flex;gap:20px;flex-wrap:wrap}
.footer nav a{font-weight:800;text-decoration:none;color:#fff;opacity:.85}
.footer nav a:hover{color:var(--sun);opacity:1}
.footer__legal{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;opacity:.7}

/* ---------- fab ---------- */
.fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:90;display:none;align-items:center;gap:10px;background:var(--ink);color:#fff;padding:14px 20px 14px 16px;border-radius:99px;font-weight:900;box-shadow:var(--shadow-l);transform:translateY(120px) scale(.8);opacity:0;transition:transform .5s var(--spring),opacity .3s}
.fab.show{transform:none;opacity:1}
.fab .fab__total{background:var(--sun);color:var(--ink);padding:2px 10px;border-radius:99px;font-size:14px}
.fab:hover{background:var(--leaf)}

/* ---------- drawer ---------- */
.overlay{position:fixed;inset:0;background:rgba(20,48,28,.5);backdrop-filter:blur(3px);z-index:140;opacity:0;pointer-events:none;transition:opacity .4s}
.overlay.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(470px,100vw);background:var(--bg);z-index:150;display:flex;flex-direction:column;transform:translateX(105%);transition:transform .6s var(--ease);box-shadow:-30px 0 80px rgba(20,48,28,.3);border-radius:32px 0 0 32px}
.drawer.open{transform:none}
.drawer__head{display:flex;justify-content:space-between;align-items:center;padding:24px 24px 16px;border-bottom:2px dashed var(--line)}
.drawer__head h3{font-size:32px;color:var(--leaf-d)}
.drawer__head small{font-weight:700;color:var(--ink-2)}
.iconbtn{width:44px;height:44px;border-radius:50%;background:#fff;font-size:28px;line-height:1;box-shadow:var(--shadow-s);transition:transform .4s var(--spring)}
.iconbtn:hover{transform:rotate(90deg) scale(1.1);background:var(--sun-2)}
.drawer__body{flex:1;overflow-y:auto;padding:16px 20px;overscroll-behavior:contain}
.cempty{text-align:center;padding:50px 20px}
.cempty .empty__duck{width:110px}
.cempty h4{font-size:26px;margin:8px 0 6px}.cempty p{color:var(--ink-2);font-weight:600;margin-bottom:20px}
.line{display:grid;grid-template-columns:84px 1fr;gap:14px;background:#fff;border-radius:22px;padding:12px;margin-bottom:12px;box-shadow:var(--shadow-s);animation:lineIn .5s var(--spring);position:relative}
@keyframes lineIn{from{opacity:0;transform:translateX(40px) scale(.95)}}
.line.out{animation:lineOut .35s forwards}
@keyframes lineOut{to{opacity:0;transform:translateX(60px) scale(.9);height:0;margin:0;padding:0}}
.line__img{width:84px;height:84px;border-radius:16px;overflow:hidden;background:var(--tone);display:grid;place-items:center}
.line__img img{width:100%;height:100%;object-fit:contain;padding:6%}
.line__img img.photo{object-fit:cover;padding:0}
.line__top{display:flex;justify-content:space-between;gap:8px}
.line__name{font-family:var(--f-d);font-weight:600;font-size:18px;line-height:1.1}
.line__ref{font-size:12px;font-weight:700;color:#789080}
.line__x{width:28px;height:28px;border-radius:50%;background:#FFE3DF;color:var(--coral);font-weight:900;font-size:18px;line-height:1;flex:none;transition:transform .3s var(--spring)}
.line__x:hover{transform:rotate(90deg) scale(1.15);background:var(--coral);color:#fff}
.line__bot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;gap:8px;flex-wrap:wrap}
.step-q{display:flex;align-items:center;background:var(--sun-3);border-radius:99px;padding:3px}
.step-q button{width:30px;height:30px;border-radius:50%;background:#fff;font-weight:900;font-size:18px;line-height:1;box-shadow:var(--shadow-s);transition:transform .25s var(--spring)}
.step-q button:hover{transform:scale(1.15);background:var(--sun)}
.step-q output{min-width:34px;text-align:center;font-weight:900}
.line__unit{font-size:12px;font-weight:800;color:var(--ink-2)}
.line__unit button{background:var(--aqua-s);color:var(--aqua-d);padding:2px 9px;border-radius:99px;font-weight:900;font-size:12px}
.line__sub{font-family:var(--f-d);font-weight:700;font-size:20px;color:var(--leaf-d)}
.drawer__foot{padding:16px 22px calc(18px + env(safe-area-inset-bottom));border-top:2px dashed var(--line);background:#fff;border-radius:28px 0 0 0;box-shadow:0 -16px 30px rgba(20,48,28,.07)}
.drawer__foot.hide{display:none}
.form{margin-bottom:10px}
.form summary{cursor:pointer;list-style:none;font-weight:900;font-size:13.5px;color:var(--aqua-d);display:flex;align-items:center;gap:8px;padding:4px 0}
.form summary::-webkit-details-marker{display:none}
.form summary::before{content:"+";width:22px;height:22px;border-radius:50%;background:var(--aqua-s);display:grid;place-items:center;font-size:16px;line-height:1;transition:transform .35s var(--spring)}
.form[open] summary::before{transform:rotate(45deg)}
.form summary em{font-style:normal;color:var(--ink-2);font-weight:700}
.form__in{display:grid;gap:10px;margin-top:10px;animation:lineIn .4s var(--ease)}
.form label span{display:block;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-bottom:3px}
.form input,.form textarea{width:100%;border:0;background:var(--sun-4);border-radius:14px;padding:11px 14px;font:inherit;font-weight:700;box-shadow:inset 0 0 0 2px var(--line);outline:none;resize:none;color:var(--ink)}
.form input:focus,.form textarea:focus{box-shadow:inset 0 0 0 2.5px var(--aqua)}
.sum{margin:0 0 14px}
.sum div{display:flex;justify-content:space-between;font-weight:800;color:var(--ink-2);padding:3px 0}
.sum dt,.sum dd{margin:0}
.sum__total{font-size:18px;color:var(--ink)!important;border-top:2px solid var(--line);margin-top:6px;padding-top:9px!important}
.sum__total dd{font-family:var(--f-d);font-size:32px;color:var(--leaf-d);line-height:1}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:160;display:grid;place-items:center;padding:18px;visibility:hidden}
.modal.open{visibility:visible}
.modal__scrim{position:absolute;inset:0;background:rgba(20,48,28,.6);backdrop-filter:blur(5px);opacity:0;transition:opacity .4s}
.modal.open .modal__scrim{opacity:1}
.modal__card{position:relative;width:min(960px,100%);max-height:calc(100vh - 36px);overflow:auto;background:var(--bg);border-radius:36px;box-shadow:var(--shadow-l);display:grid;grid-template-columns:1.05fr 1fr;transform:translateY(60px) scale(.94);opacity:0;transition:transform .6s var(--spring),opacity .35s}
.modal.open .modal__card{transform:none;opacity:1}
.m__x{position:absolute;right:14px;top:14px;z-index:5}
.m__gal{padding:18px;display:flex;flex-direction:column;gap:12px}
.m__stage{position:relative;aspect-ratio:1/1;border-radius:26px;background:var(--tone);overflow:hidden;display:grid;place-items:center}
.m__stage::before{content:"";position:absolute;width:72%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.55);animation:pulse 5s ease-in-out infinite}
.m__stage img{position:relative;width:100%;height:100%;object-fit:contain;padding:9%;filter:drop-shadow(0 18px 16px rgba(20,48,28,.28));animation:pop .6s var(--spring)}
.m__stage img.photo{object-fit:cover;padding:0;filter:none}
@keyframes pop{from{opacity:0;transform:scale(.85) rotate(-6deg)}}
.m__thumbs{display:flex;gap:10px;overflow-x:auto;padding:4px}
.m__thumb{flex:none;width:68px;height:68px;border-radius:16px;overflow:hidden;background:var(--tone);box-shadow:inset 0 0 0 3px transparent;transition:transform .3s var(--spring),box-shadow .25s;position:relative}
.m__thumb img{width:100%;height:100%;object-fit:contain;padding:6%}
.m__thumb img.photo{object-fit:cover;padding:0}
.m__thumb:hover{transform:translateY(-4px)}
.m__thumb.on{box-shadow:0 0 0 3px var(--leaf)}
.m__info{padding:34px 34px 30px 14px;display:flex;flex-direction:column}
.m__info .card__cat{margin-top:4px}
.m__info h3{font-size:clamp(30px,4vw,44px);margin:6px 0 4px}
.m__tags{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.m__tags span{font-weight:800;font-size:13px;background:#fff;box-shadow:inset 0 0 0 2px var(--line);padding:6px 12px;border-radius:99px}
.m__prices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 18px}
.pbox{border-radius:20px;padding:14px 16px;background:#fff;box-shadow:inset 0 0 0 2.5px var(--line);text-align:left;transition:transform .35s var(--spring),box-shadow .25s,background .25s}
.pbox small{display:block;font-weight:900;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.pbox b{font-family:var(--f-d);font-size:30px;color:var(--leaf-d);line-height:1.1;display:block}
.pbox em{font-style:normal;font-weight:700;font-size:12.5px;color:var(--ink-2)}
.pbox:hover{transform:translateY(-3px)}
.pbox.on{background:var(--sun-3);box-shadow:inset 0 0 0 3px var(--leaf)}
.m__qty{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.m__qty .step-q button{width:38px;height:38px}
.m__qty output{font-size:20px}
.m__total{font-weight:800;color:var(--ink-2)}
.m__total b{font-family:var(--f-d);font-size:30px;color:var(--leaf-d);margin-left:6px}
.m__info .btn{font-size:17px;padding:15px 22px}
.m__note{font-size:12.5px;color:var(--ink-2);font-weight:600;margin-top:14px}

/* ---------- toasts / confetti / reveal ---------- */
.toasts{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:210;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none}
.toast{background:var(--ink);color:#fff;font-weight:800;padding:12px 20px;border-radius:99px;box-shadow:var(--shadow-l);display:flex;align-items:center;gap:10px;animation:toastIn .5s var(--spring);font-size:14.5px}
.toast.out{animation:toastOut .35s forwards}
.toast i{width:22px;height:22px;border-radius:50%;background:var(--wa);display:grid;place-items:center;font-style:normal;font-size:13px}
@keyframes toastIn{from{opacity:0;transform:translateY(30px) scale(.8)}}
@keyframes toastOut{to{opacity:0;transform:translateY(20px) scale(.9)}}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:300}
.flyer{position:fixed;z-index:250;pointer-events:none;border-radius:50%;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.3))}

.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
.tilt{transform-style:preserve-3d}
.reveal.tilt.in{transition:opacity .8s var(--ease) var(--d,0s),transform .5s var(--ease)}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .feats{grid-template-columns:repeat(2,1fr)}
  .nav a{padding:9px 12px}
  .cartbtn__label{display:none}
}
@media (max-width:900px){
  :root{--hh:66px}
  .burger{display:flex}
  .nav{position:fixed;left:16px;right:16px;top:calc(var(--hh) + 8px);flex-direction:column;border-radius:26px;padding:12px;background:rgba(255,255,255,.97);box-shadow:var(--shadow-l);transform:translateY(-14px) scale(.96);opacity:0;pointer-events:none;transition:transform .4s var(--spring),opacity .25s}
  .nav.open{transform:none;opacity:1;pointer-events:auto}
  .nav a{font-size:18px;padding:13px 18px;font-family:var(--f-d)}
  .hero{padding-top:calc(var(--hh) + 30px);padding-bottom:120px}
  .hero__grid{grid-template-columns:1fr}
  .hero__stage{max-width:420px;margin:26px auto 0;width:88%}
  .sun{right:-200px;top:-200px}
  .tiles{grid-template-columns:1fr}
  .tile{min-height:230px}
  .tile__img{width:50%;height:100%;top:0}
  .steps{grid-template-columns:1fr;gap:34px}
  .steps::before{display:none}
  .cta__inner{grid-template-columns:1fr;text-align:center;justify-items:center;padding:36px 24px}
  .cta__duck{width:90px}
  .footer__row{grid-template-columns:1fr;justify-items:start}
  .modal__card{grid-template-columns:1fr}
  .m__info{padding:6px 22px 26px}
  .section{padding:80px 0}
  .fab{display:flex}
}
@media (max-width:640px){
  .wrap{width:min(1200px,100% - 28px)}
  .cartbtn{padding:10px 14px 10px 12px}
  .cartbtn__total{display:none}
  .brand__txt b{font-size:25px}
  .grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .card__name{font-size:18px}
  .price b{font-size:25px}
  .card__body{padding:10px 12px 14px}
  .unit button{font-size:12px}
  .add{min-height:42px}
  .view{display:none}
  .colors{font-size:11px;padding:4px 9px}
  .badge{font-size:9.5px;padding:4px 8px}
  .feats{grid-template-columns:1fr}
  .hero__cta{gap:12px;flex-wrap:nowrap}
  .hero__cta .btn{flex:1;padding:14px 12px;font-size:16px;white-space:nowrap}
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stats b{font-size:28px}.stats span{font-size:10.5px;letter-spacing:.03em}
  .seg button{padding:10px 20px;font-size:16px}
  .select{min-width:0;flex:1}
  .selects{width:100%}
  .toolbar{margin:0 -14px;padding-inline:14px}
  .resultbar .hint{display:none}
  .drawer{border-radius:0}
  .line{grid-template-columns:70px 1fr}.line__img{width:70px;height:70px}
  .marquee__track{font-size:20px}
}
@media (max-width:640px){
  .toolbar{position:static;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;margin:0;padding-inline:0;box-shadow:none!important}
  .toolbar.stuck .select span{display:block}
}
@media (max-width:340px){.grid{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal,.card{opacity:1;transform:none}
}