:root{
  --green-dark:#1F3D2B;
  --green-mid:#4F7A3A;
  --green-light:#9BCB6B;
  --bg:#FBF8F2;
  --ink:#2E3A31;
  --font-head:ui-sans-serif,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --font-body:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
body{font-family:var(--font-body);font-size:16px;line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--green-dark);text-decoration:none}
a:hover{color:var(--green-mid)}
img{max-width:100%;display:block}
input,textarea,select,button{font-family:inherit;font-size:inherit}
input[type=range]{accent-color:var(--green-dark)}
h1,h2,h3{font-family:var(--font-head)}
.hidden{display:none!important}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font-weight:600;cursor:pointer;border:none;text-align:center}
.btn-dark{background:var(--green-dark);color:#fff;padding:15px 26px}
.btn-dark:hover{background:#2C5A3D;color:#fff}
.btn-outline{border:1.5px solid var(--green-dark);color:var(--green-dark);padding:14px 26px;background:transparent}
.btn-outline:hover{background:var(--green-dark);color:#fff}
.btn-outline-soft{border:1.5px solid var(--green-dark);color:var(--green-dark);padding:9px 8px;background:#fff}
.btn-outline-soft:hover{background:#F5EFE3}
.btn-small-dark{background:var(--green-dark);color:#fff;border:none;border-radius:999px;padding:9px 8px;font-weight:600;cursor:pointer}
.btn-small-dark:hover{background:#2C5A3D}

/* nav / menus */
.nav-pill{padding:8px 14px;border-radius:999px;font-weight:600;font-size:15px;color:var(--green-dark)}
.nav-pill:hover{background:#E6F1D8}
.nav-pill.active{background:#E6F1D8}
.menu-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-weight:500}
.menu-row:hover{background:#F5EFE3}

/* cards */
.cat-tile{position:relative;overflow:hidden;border-radius:24px;padding:24px;min-height:220px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;transition:transform .15s ease}
.cat-tile:hover{transform:translateY(-4px)}
.cart-link-card{display:flex;align-items:center;gap:18px;background:#fff;border-radius:20px;padding:14px;border:1px solid #ECE4D4;transition:border-color .15s ease}
.cart-link-card:hover{border-color:var(--green-light)}
.footer-link{color:#DCE8D2;font-size:15px}
.footer-link:hover{color:var(--green-light)}

/* chips */
.chip{padding:9px 18px;border-radius:999px;border:1.5px solid var(--green-dark);font-weight:600;font-size:14px}

/* product image block */
.pimg{position:relative;overflow:hidden;container-type:inline-size}
.pimg .blob{position:absolute;border-radius:50%}
.glass-wrap{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:9%}
.glass{width:28%;display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 14px 16px rgba(31,61,43,.2))}
.glass .straw{width:44%;height:3.2cqw;border-radius:3px;background:var(--green-dark)}
.glass .rim{width:36%;height:7cqw}
.glass .body{width:100%;aspect-ratio:1/1.7;border-radius:30% 30% 12% 12%;display:flex;align-items:center;justify-content:center;box-shadow:inset 6px 0 0 rgba(255,255,255,.25)}
.glass .label{width:80%;background:#FFFDF8;border-radius:5px;padding:9% 3%;text-align:center;font-family:var(--font-head);font-weight:700;font-size:3.6cqw;color:var(--green-dark);line-height:1.1}
.badge{position:absolute;left:14px;top:14px;background:var(--green-dark);color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px}

/* dropdowns / drawer / toast / modal */
.dropdown{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(31,61,43,.15);padding:8px;z-index:60}
.cart-drawer-overlay{position:fixed;inset:0;background:rgba(20,35,25,.4);z-index:80}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--bg);z-index:90;display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(0,0,0,.15)}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--green-dark);color:#fff;padding:12px 20px;border-radius:999px;font-weight:600;z-index:95;box-shadow:0 12px 30px rgba(0,0,0,.2);display:flex;gap:12px;align-items:center}
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;max-width:560px;background:#fff;border-radius:22px;padding:22px;z-index:70;box-shadow:0 20px 60px rgba(31,61,43,.22);display:flex;flex-direction:column;gap:12px;border:1px solid #ECE4D4}

/* forms */
.field{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px;color:var(--green-dark)}
.field input,.field textarea{padding:13px 14px;border-radius:12px;border:1.5px solid #E2D9C6;outline:none;font-weight:400;color:var(--ink);background:#fff}
.field input:focus,.field textarea:focus{border-color:var(--green-light)}
.checkline{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#4A574D}
.checkline input{margin-top:4px;accent-color:var(--green-dark)}

/* nav responsive */
.desktop-nav{display:flex;gap:4px;margin-left:12px}
.hamburger{display:none}
.mobile-nav{display:none;flex-direction:column;padding:8px 24px 18px;gap:2px;border-top:1px solid #ECE4D4}
.mobile-nav.open{display:flex}
@media (max-width:979px){
  .desktop-nav{display:none}
  .hamburger{display:flex}
}
.catmenu-wrap,.searchbox-wrap{position:relative}

/* tabs */
.tab-btn{border:none;background:transparent;color:var(--green-dark);padding:8px 14px;border-radius:999px;font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap}
.tab-btn.active{background:var(--green-dark);color:#fff}
.tab-panel{display:none}
.tab-panel.active{display:flex;flex-direction:column;gap:10px}

/* faq */
.faq-item{background:#fff;border-radius:18px;overflow:hidden}
.faq-q{width:100%;text-align:left;border:none;background:transparent;padding:18px 22px;display:flex;justify-content:space-between;gap:16px;cursor:pointer;font-weight:700;font-size:16px;color:var(--green-dark)}
.faq-a{margin:0;padding:0 22px 20px;color:#4A574D;display:none}
.faq-item.open .faq-a{display:block}
.faq-sign{color:var(--green-mid);font-size:20px;line-height:1}

/* quiz */
.quiz-btn{text-align:left;border:2px solid transparent;background:#F5EFE3;border-radius:18px;padding:16px;cursor:pointer;display:flex;flex-direction:column;gap:6px}
.quiz-btn.active{background:#fff;border-color:var(--green-dark)}
.vol-btn{border:1.5px solid var(--green-light);background:transparent;color:#fff;border-radius:999px;padding:8px 16px;font-weight:600;cursor:pointer}
.vol-btn.active{background:var(--green-light);color:var(--green-dark)}

img.ph{width:100%;height:100%;object-fit:cover;display:block}
.skip-link{position:absolute;left:-999px;top:auto}
.skip-link:focus{left:8px;top:8px;background:#fff;color:var(--green-dark);padding:8px 14px;border-radius:8px;z-index:200}