:root{
  color-scheme:light;
  --brown:#6B4423; --tan:#C99A5B; --leaf:#6E9A45; --hibiscus:#8B1538; --orange:#EE8A1F; --wa:#25D366;
  --bg:#FFFAF2; --hero:#FBEEDB; --ink:#3A2414; --ink-soft:#7A6250; --surface:#FFFFFF; --line:#EEDFC8; --soft:#FDF3E4;
  --display:"Lilita One","Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;
  --body:"Lora",Georgia,"Times New Roman",serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
[hidden]{display:none!important}
html{height:auto; scroll-behavior:smooth; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px); background:var(--bg)}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:1.0625rem; line-height:1.65; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--orange); outline-offset:3px; border-radius:6px}
.wrap{width:min(1180px,100% - 2.5rem); margin-inline:auto}
h1,h2,h3{font-family:var(--display); font-weight:400; line-height:1.05; margin:0; letter-spacing:.01em}

/* Header */
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:rgba(255,250,242,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; height:68px}
.logo{font-family:var(--display); font-size:1.85rem; color:var(--brown); text-decoration:none; transform:rotate(-3deg); display:inline-block}
.nav{display:flex; gap:1.6rem; align-items:center}
.nav a{text-decoration:none; font-weight:600; font-size:.98rem}
.nav a:hover{text-decoration:underline; text-underline-offset:4px}
.cart-btn{font-family:var(--body); font-weight:600; font-size:.95rem; background:var(--brown); color:#fff; border:0; border-radius:999px; padding:.55rem 1.05rem; cursor:pointer; display:flex; gap:.5rem; align-items:center}
.cart-btn .count{background:var(--orange); color:#fff; min-width:1.5rem; height:1.5rem; border-radius:999px; display:grid; place-items:center; font-size:.8rem}
@media (max-width:720px){ .nav a{display:none} }

/* ---------- Wrapped bottle ---------- */
.btl{--w:120px; --ar:1.5; --liq:#EAD6B6; --cap:#6B4423;
  width:var(--w); display:flex; flex-direction:column; align-items:center; position:relative}
.btl .cap{width:44%; height:calc(var(--w)*.17); background:var(--cap); border-radius:6px 6px 3px 3px;
  background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.12) 0 2px,transparent 2px 6px)}
.btl .ring{width:50%; height:calc(var(--w)*.05); background:var(--cap); filter:brightness(.85); border-radius:2px}
.btl .neck{width:40%; height:calc(var(--w)*.2); background:var(--liq); position:relative;
  box-shadow:inset 3px 0 0 rgba(255,255,255,.45), inset -4px 0 0 rgba(0,0,0,.07)}
.btl .body{width:100%; position:relative; background:var(--liq);
  border-radius:46% 46% 12% 12% / calc(var(--w)*.34) calc(var(--w)*.34) calc(var(--w)*.1) calc(var(--w)*.1);
  padding-top:calc(var(--w)*.42); padding-bottom:calc(var(--w)*.14);
  box-shadow:0 22px 30px -18px rgba(70,40,15,.45)}
.btl .body::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
  background:linear-gradient(90deg,rgba(0,0,0,.16) 0%,rgba(255,255,255,.0) 14%,rgba(255,255,255,.38) 26%,rgba(255,255,255,0) 40%,rgba(0,0,0,0) 72%,rgba(0,0,0,.2) 100%)}
.btl .sticker{display:block; width:100%; aspect-ratio:calc(var(--ar)/2);
  background-image:var(--lbl); background-repeat:repeat-x; background-size:200% 100%; background-position:100% 0;
  box-shadow:0 1px 0 rgba(0,0,0,.08), 0 -1px 0 rgba(0,0,0,.08)}
.btl.spin .sticker{animation:turn 9s linear infinite}
@keyframes turn{from{background-position:100% 0} to{background-position:300% 0}}

/* Hero */
.hero{position:relative; overflow:hidden; background:var(--hero)}
.hero::before{content:""; position:absolute; right:-10%; top:-30%; width:70%; aspect-ratio:1; border-radius:50%; background:#F6E0C0; z-index:0}
.hero .wrap{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1.1fr; gap:2rem; align-items:end; padding-block:4rem 0}
.hero-copy{padding-bottom:6rem}
.tag{font-family:var(--display); color:var(--leaf); font-size:1.4rem; margin:0 0 .6rem}
.wordmark{font-size:clamp(4.5rem,12vw,10rem); color:var(--brown); transform:rotate(-4deg); transform-origin:left bottom; margin:0 0 1.4rem -.2rem; line-height:.88}
.lead{font-size:clamp(1.15rem,1.8vw,1.35rem); max-width:30ch; margin:0 0 2rem}
.btn{font-family:var(--body); font-weight:600; font-size:1.02rem; border-radius:999px; padding:.95rem 1.6rem; border:2px solid var(--brown); text-decoration:none; display:inline-flex; align-items:center; gap:.6rem; cursor:pointer; transition:transform .15s}
.btn:active{transform:scale(.97)}
.btn-solid{background:var(--brown); color:#fff}
.btn-ghost{background:#fff; color:var(--brown)}
.btn-row{display:flex; gap:.8rem; flex-wrap:wrap}
.shelf{display:flex; justify-content:center; align-items:flex-end; gap:clamp(.4rem,1.6vw,1.2rem); padding-top:1.5rem; margin-bottom:28px}
.shelf a{text-decoration:none; display:block; transition:transform .25s; animation:drop .9s cubic-bezier(.2,1.4,.4,1) both}
.shelf a:nth-child(2){animation-delay:.12s} .shelf a:nth-child(3){animation-delay:.24s} .shelf a:nth-child(4){animation-delay:.36s}
.shelf a:hover,.shelf a:focus-visible{transform:translateY(-10px) rotate(-2deg)}
.shelf .btl{--w:clamp(70px,10.5vw,128px)}
@keyframes drop{from{transform:translateY(-60px); opacity:0} to{transform:none; opacity:1}}
.wave{display:block; width:100%; height:60px; margin-top:-30px; position:relative; z-index:1}
.wave path{fill:var(--bg)}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr; padding-top:3rem}
  .hero-copy{padding-bottom:0}
  .shelf .btl{--w:clamp(70px,21vw,120px)}
}

section{padding-block:5rem}
.sec-head{max-width:44rem; margin:0 0 3rem}
.sec-head h2{font-size:clamp(2.4rem,5vw,3.6rem); color:var(--brown); margin-bottom:.8rem}
.sec-head p{margin:0; color:var(--ink-soft); font-size:1.12rem}

/* Products */
.drinks{display:grid; gap:2.2rem}
.drink{--c:var(--brown); --tint:#F6E7D3; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); border-radius:28px; overflow:hidden; background:var(--surface); border:1px solid var(--line)}
.drink:nth-child(even){grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.drink:nth-child(even) .d-art{order:2}
.d-art{background:var(--tint); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; padding:2.4rem 1.5rem 1.6rem; cursor:pointer; position:relative}
.d-art::after{content:""; position:absolute; bottom:1.4rem; left:50%; width:190px; height:18px; transform:translateX(-50%) translateY(-34px); background:radial-gradient(closest-side,rgba(70,40,15,.18),transparent); z-index:0}
.d-art .btl{--w:clamp(150px,17vw,190px); z-index:1}
.turn-hint{font-size:.85rem; color:var(--ink-soft); font-style:italic; background:none; border:0; font-family:var(--body); cursor:pointer; padding:.3rem .6rem; border-radius:999px; z-index:1}
.turn-hint:hover{background:rgba(255,255,255,.6)}
.d-info{padding:clamp(1.6rem,3.5vw,2.8rem); display:flex; flex-direction:column; gap:1rem}
.d-info h3{font-size:clamp(2rem,3.6vw,2.7rem); color:var(--c)}
.d-info .sub{font-style:italic; color:var(--ink-soft); margin:-.4rem 0 0}
.d-info p{margin:0; max-width:60ch}
.ingr{font-size:.98rem}
.ingr b{font-weight:600}
.chips{display:flex; flex-wrap:wrap; gap:.45rem; list-style:none; padding:0; margin:0}
.chips li{font-size:.85rem; padding:.3rem .75rem; border-radius:999px; background:var(--tint)}
.care{font-size:.92rem; color:var(--ink-soft); border-left:3px solid var(--tint); padding-left:.8rem}
.buy{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:auto; padding-top:.6rem}
.size{font-family:var(--display); font-size:1.35rem; color:var(--c)}
.price{font-weight:600}
.stepper{display:inline-flex; align-items:center; border:2px solid var(--line); border-radius:999px; overflow:hidden; background:#fff}
.stepper button{background:none; border:0; width:2.6rem; height:2.6rem; font-size:1.3rem; cursor:pointer; color:var(--ink)}
.stepper button:hover{background:var(--soft)}
.stepper output{min-width:2rem; text-align:center; font-weight:600}
.add{background:var(--c); color:#fff; border:0; border-radius:999px; padding:.8rem 1.35rem; font-family:var(--body); font-weight:600; font-size:1rem; cursor:pointer}
.add.done{background:var(--leaf)}
@media (max-width:820px){
  .drink,.drink:nth-child(even){grid-template-columns:1fr}
  .drink:nth-child(even) .d-art{order:0}
}

/* Steps */
.how{background:var(--soft); border-block:1px solid var(--line)}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; list-style:none; margin:0; padding:0; counter-reset:s}
.steps li{counter-increment:s; position:relative; padding:4.4rem 1.6rem 1.6rem; background:#fff; border-radius:24px; border:1px solid var(--line)}
.steps li::before{content:counter(s); position:absolute; top:1.2rem; left:1.6rem; font-family:var(--display); font-size:3rem; line-height:1; color:var(--tan)}
.steps h3{font-size:1.55rem; margin-bottom:.5rem; color:var(--brown)}
.steps p{margin:0; color:var(--ink-soft)}
@media (max-width:760px){ .steps{grid-template-columns:1fr} }

/* Visit */
.visit-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:3rem; align-items:start}
.visit-card{background:#FBE9EC; border-radius:28px; padding:2.2rem}
.visit-card h3{font-size:1.7rem; color:var(--hibiscus); margin-bottom:.6rem}
.visit-card address{font-style:normal; margin-bottom:1.4rem}
.contacts{list-style:none; padding:0; margin:0; display:grid; gap:.7rem}
.contacts a{font-weight:600; text-underline-offset:3px}
.contacts span{display:inline-block; min-width:6.5rem; color:var(--ink-soft)}
.promise{font-family:var(--display); font-size:clamp(2rem,4vw,3rem); line-height:1.05; color:var(--leaf); margin:0 0 1rem}
@media (max-width:820px){ .visit-grid{grid-template-columns:1fr} }

footer{border-top:1px solid var(--line); padding-block:2rem 6rem; color:var(--ink-soft); font-size:.92rem}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem}

/* Floating WhatsApp */
.wa-fab{position:fixed; right:calc(20px + env(safe-area-inset-right,0px)); bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:60; width:62px; height:62px; border-radius:50%; background:var(--wa); display:grid; place-items:center; box-shadow:0 10px 26px -6px rgba(0,0,0,.35); text-decoration:none; transition:transform .15s}
.wa-fab svg{width:34px; height:34px}
.wa-fab::after{content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--wa); animation:ping 2.4s ease-out 1.5s 3}
@keyframes ping{from{transform:scale(1); opacity:.8} to{transform:scale(1.6); opacity:0}}
.wa-fab:hover{transform:scale(1.06)}

.order-bar{position:fixed; left:calc(16px + env(safe-area-inset-left,0px)); bottom:calc(24px + env(safe-area-inset-bottom,0px)); z-index:55; background:var(--brown); color:#fff; border:0; border-radius:999px; padding:.85rem 1.3rem; font-family:var(--body); font-weight:600; font-size:1rem; cursor:pointer; box-shadow:0 12px 28px -8px rgba(0,0,0,.35); transform:translateY(140%); visibility:hidden; transition:transform .3s, visibility .3s; max-width:calc(100% - 110px)}
.order-bar.show{transform:none; visibility:visible}

/* Drawer */
.scrim{position:fixed; inset:0; background:rgba(60,35,15,.35); z-index:70; opacity:0; pointer-events:none; transition:opacity .25s}
.scrim.open{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(440px,100%); background:var(--bg); z-index:80; transform:translateX(100%); transition:transform .3s cubic-bezier(.2,.8,.2,1); display:flex; flex-direction:column; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
.drawer.open{transform:none}
.dr-head{display:flex; justify-content:space-between; align-items:center; padding:1.2rem 1.4rem; border-bottom:1px solid var(--line)}
.dr-head h2{font-size:2rem; color:var(--brown)}
.x{background:none; border:0; font-size:1.8rem; cursor:pointer; color:var(--ink); width:2.6rem; height:2.6rem; border-radius:50%}
.dr-body{flex:1; overflow-y:auto; padding:1.2rem 1.4rem; display:flex; flex-direction:column; gap:1.3rem}
.lines{list-style:none; margin:0; padding:0; display:grid; gap:.9rem}
.line{display:grid; grid-template-columns:44px 1fr auto; gap:.8rem; align-items:center}
.line .btl{--w:30px; margin-inline:auto}
.line .btl .body{box-shadow:none}
.line .nm{font-weight:600; line-height:1.25}
.line .nm small{display:block; font-weight:400; color:var(--ink-soft)}
.line .stepper button{width:2.1rem; height:2.1rem; font-size:1.1rem}
.empty{color:var(--ink-soft); text-align:center; padding:2rem 0}
.empty button{margin-top:1rem}
.field{display:grid; gap:.35rem; margin-bottom:1rem}
.field label,.field .lab{font-weight:600; font-size:.95rem}
.field input,.field textarea{font:inherit; font-size:1rem; color:var(--ink); background:#fff; border:2px solid var(--line); border-radius:14px; padding:.7rem .9rem}
.field input:focus,.field textarea:focus{border-color:var(--tan); outline:none}
.seg{display:grid; grid-template-columns:1fr 1fr; gap:.5rem}
.seg label{border:2px solid var(--line); border-radius:14px; padding:.7rem; text-align:center; cursor:pointer; font-weight:600; font-size:.95rem; background:#fff; position:relative}
.seg input{position:absolute; opacity:0; pointer-events:none}
.seg label:has(input:checked){border-color:var(--brown); background:var(--soft); color:var(--brown)}
.seg label:has(input:focus-visible){outline:3px solid var(--orange); outline-offset:2px}
.total{display:flex; justify-content:space-between; font-weight:600; font-size:1.1rem; border-top:1px dashed var(--line); padding-top:1rem}
.dr-foot{padding:1rem 1.4rem 1.4rem; border-top:1px solid var(--line)}
.send{width:100%; justify-content:center; background:var(--wa); border-color:var(--wa); color:#fff; font-size:1.05rem}
.send[disabled]{opacity:.45; cursor:not-allowed}
.note{font-size:.85rem; color:var(--ink-soft); text-align:center; margin:.6rem 0 0}
.err{color:var(--hibiscus); font-size:.9rem; margin:0 0 .6rem}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  html{scroll-behavior:auto}
}