*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --amber:#F5A623;
  --amber-dark:#D4860A;
  --brown:#2C1A06;
  --brown-mid:#6B3A1F;
  --cream:#FDF6EC;
  --cream2:#FFF8F0;
  --choco:#4A2208;
  --maroon:#8A2030;
  --green:#2D7A4F;
  --white:#FFFFFF;
  --shadow:rgba(44,26,6,0.18);
}
html{scroll-behavior:smooth;}
body{
  background:var(--cream);
  color:var(--brown);
  font-family:'Nunito',sans-serif;
  overflow-x:hidden;
}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:var(--cream);}
::-webkit-scrollbar-thumb{background:var(--amber);border-radius:4px;}

/* ─── ANNOUNCE ─── */
.announce{
  background:linear-gradient(90deg,var(--maroon),var(--amber-dark),var(--maroon));
  background-size:200% 100%;
  animation:gradShift 4s linear infinite;
  color:#fff;text-align:center;
  font-family:'Space Mono',monospace;font-size:.75rem;letter-spacing:.06em;
  padding:10px 44px;position:relative;z-index:100;
}
@keyframes gradShift{0%{background-position:0%}100%{background-position:200%}}
.announce__close{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#fff;font-size:1.1rem;padding:2px 6px;cursor:pointer;}

/* ─── NAV ─── */
.site-header{
  position:sticky;top:0;z-index:90;
  background:rgba(253,246,236,0.85);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:2px solid rgba(245,166,35,0.2);
  box-shadow:0 2px 20px rgba(44,26,6,0.08);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 5vw;}
.nav-logo img{height:50px;width:auto;filter:drop-shadow(0 2px 6px rgba(44,26,6,.2));}
.nav-links{display:flex;gap:32px;}
.nav-links a{
  font-weight:700;font-size:.9rem;letter-spacing:.02em;color:var(--brown);
  text-decoration:none;position:relative;transition:color .2s;
}
.nav-links a::after{
  content:'';position:absolute;bottom:-3px;left:0;width:0;height:2px;
  background:var(--amber);border-radius:2px;transition:width .3s;
}
.nav-links a:hover{color:var(--amber-dark);}
.nav-links a:hover::after{width:100%;}
.nav-right{display:flex;align-items:center;gap:16px;}
.cart-btn{
  display:flex;align-items:center;gap:8px;
  background:var(--amber);color:#fff;
  font-family:'Space Mono',monospace;font-size:.75rem;letter-spacing:.05em;
  padding:10px 18px;border-radius:50px;border:none;cursor:pointer;
  box-shadow:0 4px 14px rgba(245,166,35,.4),0 2px 0 var(--amber-dark);
  transition:transform .15s,box-shadow .15s;font-weight:700;
}
.cart-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(245,166,35,.5),0 2px 0 var(--amber-dark);}
.cart-btn:active{transform:translateY(1px);box-shadow:0 2px 8px rgba(245,166,35,.4),0 1px 0 var(--amber-dark);}
.cart-count{
  background:#fff;color:var(--amber-dark);
  font-family:'Space Mono',monospace;font-size:.68rem;font-weight:700;
  width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.nav-toggle{display:none;font-size:1.5rem;background:none;border:none;cursor:pointer;color:var(--brown);}
@media(max-width:768px){
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--cream2);flex-direction:column;padding:20px 5vw;gap:20px;border-bottom:2px solid rgba(245,166,35,.2);}
  .nav-links.open{display:flex;}
  .nav-toggle{display:block;}
}

/* ─── HERO ─── */
.hero{
  position:relative;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
#hero-canvas{position:absolute;inset:0;z-index:0;}
.hero-left{
  position:relative;z-index:2;
}
.hero-logo{
  margin-bottom:12px;
  animation:floatLogo 4s ease-in-out infinite;
  filter:drop-shadow(0 8px 32px rgba(44,26,6,.28)) drop-shadow(0 2px 6px rgba(245,166,35,.4));
}
.hero-logo img{height:clamp(100px,22vw,220px);width:auto;}
@keyframes floatLogo{0%,100%{transform:translateY(0) rotate(-1deg);}50%{transform:translateY(-14px) rotate(1deg);}}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.7);backdrop-filter:blur(8px);
  border:1.5px solid rgba(245,166,35,.4);border-radius:50px;
  padding:7px 18px;font-size:.8rem;font-weight:700;color:var(--brown-mid);
  margin-bottom:22px;letter-spacing:.04em;
  box-shadow:0 2px 12px rgba(44,26,6,.1);
}
.hero-badge span{color:var(--amber-dark);}
.hero h1{
  font-family:'Fredoka One',cursive;
  font-size:clamp(2.4rem,6vw,5.5rem);
  line-height:1.1;color:var(--brown);
  text-shadow:3px 3px 0 rgba(245,166,35,.25),0 6px 24px rgba(44,26,6,.12);
  margin-bottom:18px;
}
.hero h1 em{
  color:var(--amber-dark);font-style:normal;
  position:relative;
}
.hero h1 em::after{
  content:'';position:absolute;bottom:-4px;left:0;right:0;height:5px;
  background:var(--amber);border-radius:3px;opacity:.7;
}
.hero-sub{
  max-width:520px;color:var(--brown-mid);font-size:1.05rem;font-weight:600;
  margin-bottom:34px;line-height:1.6;
}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.btn-3d{
  font-family:'Fredoka One',cursive;font-size:1.1rem;letter-spacing:.02em;
  padding:14px 34px;border-radius:50px;border:none;cursor:pointer;
  position:relative;transition:transform .15s,box-shadow .15s;
  text-decoration:none;display:inline-flex;align-items:center;gap:8px;
}
.btn-3d-primary{
  background:linear-gradient(135deg,var(--amber),var(--amber-dark));
  color:#fff;
  box-shadow:0 8px 0 var(--choco),0 10px 24px rgba(44,26,6,.3);
}
.btn-3d-primary:hover{transform:translateY(-3px);box-shadow:0 11px 0 var(--choco),0 14px 30px rgba(44,26,6,.35);}
.btn-3d-primary:active{transform:translateY(4px);box-shadow:0 4px 0 var(--choco),0 6px 14px rgba(44,26,6,.25);}
.btn-3d-outline{
  background:rgba(255,255,255,.8);backdrop-filter:blur(8px);
  color:var(--brown);border:2px solid var(--amber);
  box-shadow:0 6px 0 rgba(245,166,35,.4),0 8px 18px rgba(44,26,6,.15);
}
.btn-3d-outline:hover{transform:translateY(-3px);box-shadow:0 9px 0 rgba(245,166,35,.4),0 12px 24px rgba(44,26,6,.2);}
.btn-3d-outline:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(245,166,35,.4);}

.hero-scroll{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;z-index:2;
}
.hero-scroll span{font-size:.75rem;font-weight:700;color:var(--brown-mid);letter-spacing:.08em;}
.scroll-dot{
  width:28px;height:44px;border:2px solid var(--amber);border-radius:14px;
  position:relative;
}
.scroll-dot::before{
  content:'';position:absolute;top:7px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;background:var(--amber);border-radius:50%;
  animation:scrollPulse 1.6s ease-in-out infinite;
}
@keyframes scrollPulse{0%{top:7px;opacity:1;}100%{top:22px;opacity:0;}}

/* ─── TRUST STRIP ─── */
.trust-strip{
  background:linear-gradient(135deg,var(--brown),var(--choco));
  padding:20px 5vw;overflow:hidden;position:relative;
}
.trust-track{
  display:flex;gap:60px;align-items:center;
  animation:trustScroll 20s linear infinite;
  width:max-content;
}
.trust-strip:hover .trust-track{animation-play-state:paused;}
@keyframes trustScroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
.trust-item{
  display:flex;align-items:center;gap:10px;white-space:nowrap;
  font-family:'Space Mono',monospace;font-size:.78rem;letter-spacing:.07em;color:var(--amber);
}
.trust-item svg{width:16px;height:16px;flex-shrink:0;}

/* ─── SECTION SHELL ─── */
.section{padding:100px 5vw;}
.section-head{text-align:center;max-width:640px;margin:0 auto 64px;}
.eyebrow{
  display:inline-block;font-family:'Space Mono',monospace;
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber-dark);margin-bottom:12px;
}
.section-head h2{
  font-family:'Fredoka One',cursive;
  font-size:clamp(2rem,4.5vw,3.2rem);
  color:var(--brown);line-height:1.15;margin-bottom:16px;
  text-shadow:2px 2px 0 rgba(245,166,35,.15);
}
.section-head p{color:var(--brown-mid);font-size:1rem;font-weight:600;}

/* ─── PRODUCT CARDS ─── */
.shop-bg{background:linear-gradient(175deg,var(--cream2) 0%,#fce9cc 100%);position:relative;}
.shop-bg::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 20% 50%,rgba(245,166,35,.07) 0%,transparent 60%),
             radial-gradient(circle at 80% 30%,rgba(138,32,48,.05) 0%,transparent 50%);
}
.shop-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:36px;
  perspective:1400px;
}
@media(max-width:900px){.shop-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto;}}

.product-card{
  position:relative;
  background:#fff;
  border-radius:28px;
  padding:0 0 28px;
  box-shadow:0 12px 0 rgba(44,26,6,.12),0 20px 50px rgba(44,26,6,.12),0 2px 8px rgba(44,26,6,.08);
  transform-style:preserve-3d;
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s;
  cursor:pointer;overflow:hidden;
}
.product-card:hover{
  box-shadow:0 20px 0 rgba(44,26,6,.15),0 30px 70px rgba(44,26,6,.18),0 2px 8px rgba(44,26,6,.08);
}
.card-glow{
  position:absolute;top:0;left:0;right:0;bottom:0;border-radius:28px;
  background:radial-gradient(circle at 50% 30%,rgba(255,255,255, 0) 0%,transparent 70%);
  pointer-events:none;z-index:1;
}
.card-top{ border-radius:28px 28px 0 0; position:relative; overflow:hidden; }


.card-jar:hover{animation-play-state:paused;}
@keyframes jarFloat{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-10px) rotate(2deg);}}
.card-jar:nth-child(1){animation-delay:0s;}

/* ── Jar SVGs drawn inline ── */
.jar-body{
  width:100%;height:100%;
}

/* card body */
.card-body{padding:20px 24px 0;position:relative;z-index:2;}
.card-tag{
  display:inline-block;
  font-family:'Space Mono',monospace;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 12px;border-radius:50px;margin-bottom:12px;font-weight:700;
}
.tag-family{background:#FFF3E0;color:#E65100;}
.tag-women{background:#FCE4EC;color:#880E4F;}
.tag-raw{background:#E8F5E9;color:#1B5E20;}
.card-name{font-family:'Fredoka One',cursive;font-size:1.55rem;color:var(--brown);margin-bottom:8px;line-height:1.2;}
.card-hook{font-size:.9rem;color:var(--brown-mid);font-weight:600;margin-bottom:16px;min-height:52px;}
.price-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px;}
.price{font-family:'Fredoka One',cursive;font-size:1.6rem;color:var(--amber-dark);}
.price-size{font-size:.8rem;color:#999;font-weight:700;}

.add-btn{
  width:100%;padding:13px;border:none;border-radius:50px;cursor:pointer;
  font-family:'Fredoka One',cursive;font-size:1rem;letter-spacing:.02em;
  background:linear-gradient(135deg,var(--amber),var(--amber-dark));
  color:#fff;
  box-shadow:0 5px 0 var(--choco),0 6px 16px rgba(44,26,6,.2);
  transition:transform .15s,box-shadow .15s;position:relative;overflow:hidden;
}
.add-btn::after{
  content:'';position:absolute;top:-50%;left:-50%;width:60%;height:200%;
  background:rgba(255,255,255,.25);transform:skewX(-20deg);
  transition:left .4s;
}
.add-btn:hover::after{left:140%;}
.add-btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--choco),0 8px 20px rgba(44,26,6,.25);}
.add-btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--choco),0 3px 8px rgba(44,26,6,.2);}
.add-btn.is-added{background:linear-gradient(135deg,#2D7A4F,#1a5235);}

/* benefits pills */
.benefits{display:flex;flex-wrap:wrap;gap:6px;margin:0 24px 20px;position:relative;z-index:2;}
.benefit-pill{
  font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:50px;
  background:var(--cream);color:var(--brown-mid);border:1px solid rgba(44,26,6,.1);
  display:flex;align-items:center;gap:4px;
}
.benefit-pill .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}

/* card divider */
.card-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(44,26,6,.08),transparent);margin:0 24px 16px;}

/* ─── INGREDIENT LEDGER ─── */
.ledger{margin:0 24px;position:relative;z-index:2;}
.ledger summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brown-mid);padding:10px 0 4px;
}
.ledger summary::-webkit-details-marker{display:none;}
.ledger summary::after{content:'＋';color:var(--amber-dark);font-size:1rem;transition:transform .3s;}
.ledger[open] summary::after{content:'－';}
.ledger-row{
  display:flex;justify-content:space-between;
  font-family:'Space Mono',monospace;font-size:.74rem;color:var(--brown);
  padding:5px 0;border-bottom:1px dotted rgba(44,26,6,.1);
}
.ledger-row span:last-child{color:var(--amber-dark);}

/* ─── STORY ─── */
.story-section{
  background:linear-gradient(135deg,var(--brown) 0%,var(--choco) 100%);
  position:relative;overflow:hidden;
}
.story-section::before{
  content:'';position:absolute;
  top:-100px;right:-100px;width:400px;height:400px;
  background:radial-gradient(circle,rgba(245,166,35,.15) 0%,transparent 70%);
  border-radius:50%;
}
.story-section::after{
  content:'';position:absolute;
  bottom:-80px;left:-80px;width:300px;height:300px;
  background:radial-gradient(circle,rgba(245,166,35,.1) 0%,transparent 70%);
  border-radius:50%;
}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;position:relative;z-index:1;}
@media(max-width:760px){.story-grid{grid-template-columns:1fr;}}
.story-text .eyebrow{color:var(--amber);}
.story-text h2{
  font-family:'Fredoka One',cursive;font-size:clamp(1.9rem,3.5vw,2.8rem);
  color:#fff;line-height:1.15;margin:14px 0 22px;
}
.story-text p{color:rgba(255,255,255,.78);margin-bottom:16px;font-size:.97rem;font-weight:600;}
.story-text strong{color:var(--amber);}
.story-art{
  perspective:800px;
}
.story-box{
  background:rgba(255,255,255,.07);
  border:1.5px solid rgba(245,166,35,.25);
  border-radius:24px;
  padding:36px;
  transform:rotateY(-8deg) rotateX(4deg);
  transition:transform .4s ease;
  backdrop-filter:blur(8px);
}
.story-art:hover .story-box{transform:rotateY(0deg) rotateX(0deg);}
.story-stat{margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid rgba(245,166,35,.2);}
.story-stat:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none;}
.story-stat-num{font-family:'Fredoka One',cursive;font-size:2.8rem;color:var(--amber);line-height:1;}
.story-stat-label{font-size:.88rem;color:rgba(255,255,255,.65);font-weight:600;margin-top:4px;}

/* ─── BENEFITS GRID ─── */
.benefits-section{position:relative;}
.benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:900px){.benefits-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.benefits-grid{grid-template-columns:1fr;}}
.benefit-card{
  background:#fff;border-radius:20px;padding:28px 24px;
  box-shadow:0 6px 0 rgba(44,26,6,.08),0 12px 32px rgba(44,26,6,.08);
  transition:transform .3s,box-shadow .3s;
  border:1.5px solid rgba(245,166,35,.15);
}
.benefit-card:hover{
  transform:translateY(-6px) rotateX(3deg);
  box-shadow:0 12px 0 rgba(44,26,6,.1),0 20px 44px rgba(44,26,6,.14);
}
.benefit-icon{font-size:2.2rem;margin-bottom:14px;}
.benefit-name{font-family:'Fredoka One',cursive;font-size:1.1rem;color:var(--brown);margin-bottom:6px;}
.benefit-desc{font-size:.86rem;color:var(--brown-mid);font-weight:600;}

/* ─── TESTIMONIALS ─── */
.testimonials-section{background:linear-gradient(175deg,#fce9cc,var(--cream2));}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:760px){.testi-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto;}}
.testi-card{
  background:#fff;border-radius:20px;padding:28px;
  box-shadow:0 6px 0 rgba(44,26,6,.08),0 12px 30px rgba(44,26,6,.08);
  transition:transform .3s,box-shadow .3s;position:relative;
}
.testi-card::before{
  content:'"';font-family:'Fredoka One',cursive;font-size:6rem;
  color:rgba(245,166,35,.15);position:absolute;top:-10px;left:16px;line-height:1;
}
.testi-card:hover{transform:translateY(-5px) rotateZ(-1deg);box-shadow:0 12px 0 rgba(44,26,6,.1),0 20px 40px rgba(44,26,6,.14);}
.stars{color:var(--amber);font-size:.95rem;margin-bottom:14px;letter-spacing:.1em;}
.testi-card p{color:var(--brown);font-size:.95rem;margin-bottom:20px;font-weight:600;position:relative;z-index:1;}
.testi-who{display:flex;align-items:center;gap:12px;}
.testi-initial{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--amber),var(--amber-dark));
  color:#fff;font-family:'Fredoka One',cursive;font-size:1rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 0 var(--choco);
}
.testi-name{font-size:.85rem;font-weight:700;color:var(--brown-mid);}

/* ─── FAQ ─── */
.faq-wrap{max-width:760px;margin:0 auto;}
.faq-item{
  background:#fff;border-radius:16px;margin-bottom:14px;overflow:hidden;
  box-shadow:0 4px 0 rgba(44,26,6,.07),0 6px 20px rgba(44,26,6,.06);
  transition:transform .25s,box-shadow .25s;
}
.faq-item:hover{transform:translateX(4px);box-shadow:0 4px 0 rgba(44,26,6,.1),0 8px 24px rgba(44,26,6,.1);}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:20px 24px;font-size:1.02rem;font-weight:800;color:var(--brown);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:'＋';font-size:1.2rem;color:var(--amber-dark);flex-shrink:0;
  background:rgba(245,166,35,.12);width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-family:'Space Mono',monospace;
}
.faq-item[open] summary::after{content:'－';}
.faq-item[open] summary{border-bottom:1px solid rgba(44,26,6,.07);}
.faq-body{padding:18px 24px 22px;color:var(--brown-mid);font-size:.95rem;font-weight:600;}

/* ─── NEWSLETTER ─── */
.newsletter{
  background:linear-gradient(135deg,var(--brown),var(--choco));
  position:relative;overflow:hidden;text-align:center;
}
.newsletter::before{
  content:'🥜';font-size:8rem;position:absolute;top:-20px;left:-30px;opacity:.08;
  animation:spinPea 20s linear infinite;
}
.newsletter::after{
  content:'🍫';font-size:8rem;position:absolute;bottom:-20px;right:-20px;opacity:.08;
  animation:spinPea 25s linear infinite reverse;
}
@keyframes spinPea{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.newsletter .eyebrow{color:var(--amber);}
.newsletter h2{font-family:'Fredoka One',cursive;font-size:clamp(2rem,4vw,3rem);color:#fff;margin:14px 0 16px;}
.newsletter p{color:rgba(255,255,255,.75);margin-bottom:30px;max-width:480px;display:inline-block;font-weight:600;}
.nl-form{display:flex;max-width:440px;margin:0 auto;border-radius:50px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.25);}
.nl-form input{
  flex:1;background:#fff;border:none;padding:15px 22px;
  font-family:'Nunito',sans-serif;font-size:.95rem;color:var(--brown);
}
.nl-form input:focus{outline:none;}
.nl-form button{
  background:linear-gradient(135deg,var(--amber),var(--amber-dark));
  color:#fff;border:none;padding:15px 26px;cursor:pointer;
  font-family:'Fredoka One',cursive;font-size:1rem;transition:background .2s;
}
.nl-form button:hover{background:linear-gradient(135deg,var(--amber-dark),#a06008);}
.form-msg{margin-top:16px;font-family:'Space Mono',monospace;font-size:.78rem;color:var(--amber);min-height:1.2em;}

/* ─── FOOTER ─── */
.site-footer{
  background:var(--brown);padding:40px 5vw 30px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;
}
.footer-logo img{height:82px;}
.footer-links{display:flex;gap:22px;}
.footer-links a{color:rgba(255,255,255,.5);transition:color .2s;}
.footer-links a:hover{color:var(--amber);}
.footer-links svg{width:20px;height:20px;}
.copyright{font-family:'Space Mono',monospace;font-size:.72rem;color:rgba(255,255,255,.4);}

/* ─── CART DRAWER ─── */
.cart-overlay{position:fixed;inset:0;background:rgba(44,26,6,.45);opacity:0;visibility:hidden;transition:opacity .3s;z-index:200;}
.cart-overlay.open{opacity:1;visibility:visible;}
.cart-drawer{
  position:fixed;top:0;right:0;height:100%;width:380px;max-width:92vw;
  background:var(--cream2);border-left:2px solid rgba(245,166,35,.25);
  z-index:201;transform:translateX(100%);transition:transform .35s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;
  box-shadow:-8px 0 40px rgba(44,26,6,.15);
}
.cart-drawer.open{transform:translateX(0);}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:2px solid rgba(44,26,6,.08);}
.cart-head h3{font-family:'Fredoka One',cursive;font-size:1.4rem;color:var(--brown);}
.cart-close{font-size:1.5rem;color:var(--brown-mid);background:none;border:none;cursor:pointer;transition:transform .2s;}
.cart-close:hover{transform:rotate(90deg);}
.cart-items{flex:1;overflow-y:auto;padding:18px 24px;}
.cart-empty{text-align:center;color:var(--brown-mid);padding:40px 0;font-weight:700;}
.cart-empty .emoji{font-size:3rem;display:block;margin-bottom:12px;}
.cart-item{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid rgba(44,26,6,.07);align-items:center;}
.cart-item-name{font-size:.9rem;font-weight:800;color:var(--brown);margin-bottom:4px;}
.cart-item-price{font-family:'Fredoka One',cursive;font-size:.95rem;color:var(--amber-dark);}
.cart-item-info{flex:1;}
.cart-qty{display:flex;align-items:center;gap:8px;margin-top:8px;}
.qty-btn{width:24px;height:24px;border-radius:50%;border:1.5px solid rgba(44,26,6,.15);background:#fff;cursor:pointer;font-size:.85rem;font-weight:900;display:flex;align-items:center;justify-content:center;color:var(--brown);}
.qty-btn:hover{background:var(--amber);color:#fff;border-color:var(--amber);}
.qty-num{font-family:'Space Mono',monospace;font-size:.85rem;font-weight:700;width:20px;text-align:center;}
.cart-remove{font-size:.72rem;color:#ccc;text-decoration:underline;cursor:pointer;display:inline-block;margin-top:4px;}
.cart-remove:hover{color:var(--maroon);}
.cart-foot{padding:18px 24px 24px;border-top:2px solid rgba(44,26,6,.08);}
.cart-total-row{display:flex;justify-content:space-between;font-family:'Fredoka One',cursive;font-size:1.2rem;color:var(--brown);margin-bottom:16px;}
.checkout-btn{
  width:100%;padding:14px;border:none;border-radius:50px;cursor:pointer;
  background:linear-gradient(135deg,var(--amber),var(--amber-dark));
  color:#fff;font-family:'Fredoka One',cursive;font-size:1.1rem;
  box-shadow:0 5px 0 var(--choco),0 6px 18px rgba(44,26,6,.2);
  transition:transform .15s,box-shadow .15s;
}
.checkout-btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--choco),0 10px 24px rgba(44,26,6,.25);}
.checkout-note{font-size:.75rem;color:#aaa;text-align:center;margin-top:10px;}

/* ─── FLOATING BLOBS ─── */
.blob{
  position:absolute;border-radius:50%;pointer-events:none;
  filter:blur(60px);opacity:.25;z-index:0;
}

/* ─── REVEAL ANIMATION ─── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}
.reveal-delay-1{transition-delay:.1s;}
.reveal-delay-2{transition-delay:.2s;}
.reveal-delay-3{transition-delay:.3s;}

  /* hero two-column layout */
  .hero-inner{
    position:relative;z-index:2;
    width:100%;max-width:1200px;margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;
    padding:80px 5vw 80px;gap:40px;
  }
  .hero-left{
    flex:1;min-width:0;
    display:flex;flex-direction:column;align-items:flex-start;
    text-align:left;
  }
  .hero-left .hero-badge{ align-self:flex-start; }
  .hero-left .hero-ctas{ justify-content:flex-start; }
  .hero-right{
    flex:0 0 auto;
    position:relative;
    display:flex;flex-direction:column;align-items:center;
    animation:jarFloat2 3.8s ease-in-out infinite;
  }
  @keyframes jarFloat2{0%,100%{transform:translateY(0) rotate(-1.5deg);}50%{transform:translateY(-16px) rotate(1.5deg);}}
  .hero-right-jar{
    height:clamp(220px,30vw,380px);width:auto;
    filter:drop-shadow(0 12px 36px rgba(44,26,6,.45)) drop-shadow(0 4px 10px rgba(245,166,35,.4));
    display:block;
  }
  .butter-drip-container{
    position:absolute;top:4px;left:0;right:0;
    pointer-events:none;height:100%;
  }
  .butter-drip{
    position:absolute;
    width:10px;
    background:linear-gradient(to bottom,#F5A623,#D4860A,rgba(212,134,10,0));
    border-radius:0 0 50% 50%;
    top:18px;
    animation:dripDown 2.6s cubic-bezier(.45,.05,.55,.95) infinite;
    opacity:0.75;
  }
  @keyframes dripDown{
    0%{height:0;opacity:0;}
    20%{opacity:0.8;}
    70%{height:60px;opacity:0.7;}
    100%{height:90px;opacity:0;}
  }
  @media(max-width:800px){
    .hero-inner{flex-direction:column;text-align:center;padding:60px 5vw 60px;}
    .hero-left{align-items:center;}
    .hero-left .hero-badge,.hero-left .hero-ctas{align-self:center;justify-content:center;}
    .hero-right-jar{height:clamp(160px,45vw,260px);}
  }


  /* product showcase right */
  .product-showcase{
    position:relative;
    display:flex;flex-direction:column;align-items:center;gap:16px;
  }
  .product-hero-img{
    width:clamp(280px,36vw,480px);height:auto;
    border-radius:24px;
    box-shadow:
      0 24px 60px rgba(44,26,6,.40),
      0 8px 20px rgba(245,166,35,.28),
      0 2px 6px rgba(44,26,6,.18);
    transform:perspective(900px) rotateY(-6deg) rotateX(2deg);
    transition:transform .4s ease,box-shadow .4s ease;
    animation:jarFloat2 4s ease-in-out infinite;
  }
  .product-hero-img:hover{
    transform:perspective(900px) rotateY(0deg) rotateX(0deg) scale(1.03);
    box-shadow:0 32px 80px rgba(44,26,6,.45),0 12px 28px rgba(245,166,35,.35);
  }
  .product-badge-row{
    display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
  }
  .p-badge{
    font-family:'Space Mono',monospace;font-size:.68rem;letter-spacing:.05em;
    padding:5px 12px;border-radius:50px;
    background:rgba(245,166,35,.15);
    border:1.5px solid rgba(245,166,35,.4);
    color:var(--brown-mid);font-weight:700;
    backdrop-filter:blur(6px);
    white-space:nowrap;
  }
  .p-badge-pink{background:rgba(220,100,140,.12);border-color:rgba(220,100,140,.35);color:#8a2050;}
  .p-badge-choco{background:rgba(100,50,10,.1);border-color:rgba(100,50,10,.3);color:#5c2a08;}

  /* hero-right override for product photo */
  .hero-right{ animation:none; }


  
  .product-card-img{
    width:100%;
    height:260px;
    object-fit:contain;
    object-position:center bottom;
    display:block;
    padding:0 8px;
    filter:drop-shadow(0 10px 24px rgba(44,26,6,.26));
    transition:transform .4s ease,filter .4s ease;
  }
  .product-card:hover .product-card-img{
    transform:scale(1.07) translateY(-8px);
    filter:drop-shadow(0 18px 36px rgba(44,26,6,.34));
  }
  .card-jar{
    height:auto;
    min-height:260px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding:0;
    overflow:hidden;
  }
  .card-top{
    min-height:260px !important;
    padding:0 0 0 !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
  }


  /* real product images in shop cards */
  .card-top{
    border-radius:28px 28px 0 0 !important;
    padding:0 !important;
    min-height:320px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    position:relative;
  }
  .card-top::after{
    content:'';position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);
    width:110%;height:32px;background:#fff;border-radius:50%;z-index:2;
  }
  .card-jar{
    width:100% !important;
    height:320px !important;
    min-height:320px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
  }
  .product-card-img{
    width:100% !important;
    height:320px !important;
    max-width:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    display:block !important;
    padding:0 !important;
    filter:drop-shadow(0 10px 24px rgba(44,26,6,.18));
    transition:transform .4s ease,filter .4s ease;
  }
  .product-card:hover .product-card-img{
    transform:scale(1.06) translateY(-6px);
    filter:drop-shadow(0 18px 36px rgba(44,26,6,.3));
  }

  /* WhatsApp floating button */
  .wa-float{
    position:fixed;bottom:28px;right:28px;z-index:999;
    width:60px;height:60px;border-radius:50%;
    background:linear-gradient(135deg,#25D366,#128C7E);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 20px rgba(37,211,102,.5),0 3px 0 rgba(18,140,126,.6);
    animation:waPulse 2.5s ease-in-out infinite;
    text-decoration:none;transition:transform .2s;
  }
  .wa-float:hover{transform:scale(1.12);}
  .wa-float svg{width:32px;height:32px;fill:#fff;}
  .wa-float-tooltip{
    position:absolute;right:70px;
    background:var(--brown);color:#fff;
    font-family:'Nunito',sans-serif;font-size:.8rem;font-weight:700;
    padding:6px 12px;border-radius:8px;white-space:nowrap;
    opacity:0;pointer-events:none;transition:opacity .2s;
  }
  .wa-float-tooltip::after{
    content:'';position:absolute;left:100%;top:50%;transform:translateY(-50%);
    border:6px solid transparent;border-left-color:var(--brown);
  }
  .wa-float:hover .wa-float-tooltip{opacity:1;}
  @keyframes waPulse{
    0%,100%{box-shadow:0 6px 20px rgba(37,211,102,.5),0 3px 0 rgba(18,140,126,.6);}
    50%{box-shadow:0 6px 32px rgba(37,211,102,.7),0 3px 0 rgba(18,140,126,.6);}
  }


  /* Legal modals */
  .legal-modal-overlay{
    position:fixed;inset:0;background:rgba(44,26,6,.6);
    z-index:500;opacity:0;visibility:hidden;
    transition:opacity .3s;display:flex;align-items:center;justify-content:center;
    padding:20px;
  }
  .legal-modal-overlay.open{opacity:1;visibility:visible;}
  .legal-modal{
    background:#fff;border-radius:20px;
    width:100%;max-width:720px;max-height:85vh;
    overflow-y:auto;padding:40px;
    box-shadow:0 20px 60px rgba(44,26,6,.3);
    position:relative;
  }
  .legal-modal h2{font-family:'Fredoka One',cursive;font-size:1.8rem;color:var(--brown);margin-bottom:6px;}
  .legal-modal .legal-date{font-size:.8rem;color:#aaa;margin-bottom:24px;font-family:'Space Mono',monospace;}
  .legal-modal h3{font-family:'Fredoka One',cursive;font-size:1.1rem;color:var(--brown);margin:20px 0 8px;}
  .legal-modal p{color:var(--brown-mid);font-size:.93rem;margin-bottom:12px;line-height:1.7;}
  .legal-modal ul{color:var(--brown-mid);font-size:.93rem;margin:0 0 12px 20px;line-height:1.8;}
  .legal-close{
    position:sticky;top:0;float:right;
    background:var(--amber);color:#fff;border:none;
    font-family:'Fredoka One',cursive;font-size:1rem;
    padding:8px 18px;border-radius:50px;cursor:pointer;
    box-shadow:0 4px 0 var(--choco);
  }
  .legal-close:hover{background:var(--amber-dark);}
  /* footer legal links */
  .footer-legal{
    display:flex;gap:18px;flex-wrap:wrap;justify-content:center;
    padding:18px 5vw;
    background:rgba(44,26,6,.06);
    border-top:1px solid rgba(44,26,6,.08);
  }
  .footer-legal a{
    font-family:'Space Mono',monospace;font-size:.72rem;
    color:var(--brown-mid);text-decoration:underline;cursor:pointer;
    transition:color .2s;
  }
  .footer-legal a:hover{color:var(--amber-dark);}
  /* FSSAI badge */
  .fssai-badge{
    background:rgba(245,166,35,.1);border:1.5px solid rgba(245,166,35,.35);
    border-radius:10px;padding:10px 18px;
    font-family:'Space Mono',monospace;font-size:.72rem;color:var(--brown-mid);
    display:inline-flex;align-items:center;gap:8px;
  }
  .fssai-badge strong{color:var(--brown);}


/* ── CUSTOM CURSOR ─────────────────────────────────────────────────────── */
*{ cursor: none !important; }

.cursor-outer{
  position:fixed;
  width:38px;height:38px;
  border-radius:50%;
  border:2.5px solid var(--amber);
  pointer-events:none;
  z-index:99999;
  transform:translate(-50%,-50%);
  transition:width .25s ease,height .25s ease,border-color .25s ease,background .25s ease,opacity .2s;
  mix-blend-mode:multiply;
}
.cursor-dot{
  position:fixed;
  width:8px;height:8px;
  background:var(--amber-dark);
  border-radius:50%;
  pointer-events:none;
  z-index:99999;
  transform:translate(-50%,-50%);
  transition:transform .08s ease,background .2s;
}
.cursor-peanut{
  position:fixed;
  font-size:18px;
  pointer-events:none;
  z-index:99999;
  transform:translate(-50%,-130%) rotate(0deg);
  transition:opacity .2s, transform .08s ease;
  opacity:0;
  line-height:1;
}

/* hover states */
body.cursor-hover .cursor-outer{
  width:56px;height:56px;
  border-color:var(--maroon);
  background:rgba(245,166,35,0.1);
}
body.cursor-hover .cursor-dot{
  background:var(--maroon);
  transform:translate(-50%,-50%) scale(1.6);
}
body.cursor-hover .cursor-peanut{
  opacity:1;
  transform:translate(-50%,-140%) rotate(15deg);
}

/* click burst */
.cursor-burst{
  position:fixed;
  pointer-events:none;
  z-index:99998;
  transform:translate(-50%,-50%);
  animation:burstOut .5s ease forwards;
}
@keyframes burstOut{
  0%  { opacity:1; transform:translate(-50%,-50%) scale(0); }
  60% { opacity:0.6; transform:translate(-50%,-50%) scale(1.4); }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1.8); }
}

/* trail drops */
.cursor-trail{
  position:fixed;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--amber);
  pointer-events:none;
  z-index:99997;
  transform:translate(-50%,-50%);
  animation:trailFade .55s ease forwards;
}
@keyframes trailFade{
  0%  { opacity:0.55; transform:translate(-50%,-50%) scale(1); }
  100%{ opacity:0;    transform:translate(-50%,-50%) scale(0.2) translateY(10px); }
}


/* ═══════════════════════════════════════════════════════
   MOBILE RESPONSIVE — full overhaul for all screen sizes
   ═══════════════════════════════════════════════════════ */

/* ── 1. HERO ── */
@media(max-width:900px){
  .hero{ min-height:auto; padding:0; }
  .hero-inner{
    flex-direction:column !important;
    padding:70px 5vw 50px !important;
    gap:30px !important;
    text-align:center !important;
  }
  .hero-left{
    align-items:center !important;
    text-align:center !important;
    order:1;
  }
  .hero-left .hero-badge{ align-self:center !important; }
  .hero-left .hero-ctas{ justify-content:center !important; flex-wrap:wrap; }
  .hero h1{ font-size:clamp(2rem,7vw,3.2rem) !important; }
  .hero-sub{ font-size:.95rem !important; }
  .hero-right{
    order:2;
    width:100%;
    justify-content:center !important;
  }
  .product-hero-img{
    width:clamp(240px,80vw,400px) !important;
  }
  .hero-scroll{ display:none; }
}

/* ── 2. TRUST STRIP ── */
@media(max-width:600px){
  .trust-item{ font-size:.7rem; gap:6px; }
}

/* ── 3. SHOP GRID ── */
@media(max-width:1000px){
  .shop-grid{
    grid-template-columns: repeat(2,1fr) !important;
    gap:20px !important;
  }
}
@media(max-width:640px){
  .shop-grid{
    grid-template-columns: 1fr !important;
    max-width:420px;
    margin:0 auto;
    gap:24px !important;
  }
}

/* ── 4. PRODUCT CARDS ── */
@media(max-width:900px){
  .product-card{ border-radius:20px; }
  .card-top{ min-height:240px !important; }
  .card-jar{ height:240px !important; min-height:240px !important; }
  .product-card-img{ height:240px !important; }
  .card-name{ font-size:1.35rem; }
  .benefits{ gap:4px; }
  .benefit-pill{ font-size:.68rem; padding:3px 8px; }
}
@media(max-width:480px){
  .card-top{ min-height:220px !important; }
  .card-jar{ height:220px !important; min-height:220px !important; }
  .product-card-img{ height:220px !important; }
  .card-body{ padding:14px 16px 0; }
  .ledger{ margin:0 16px; }
  .add-btn{ font-size:.9rem; padding:11px; }
}

/* ── 5. STORY SECTION ── */
@media(max-width:760px){
  .story-grid{
    grid-template-columns:1fr !important;
    gap:36px !important;
  }
  .story-text h2{ font-size:clamp(1.7rem,6vw,2.4rem); }
  .story-box{ transform:none !important; padding:24px; }
  .story-stat-num{ font-size:2.2rem; }
}

/* ── 6. BENEFITS GRID ── */
@media(max-width:900px){
  .benefits-grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:16px;
  }
}
@media(max-width:480px){
  .benefits-grid{
    grid-template-columns:1fr !important;
  }
  .benefit-card{ padding:20px 18px; }
}

/* ── 7. TESTIMONIALS ── */
@media(max-width:900px){
  .testi-grid{
    grid-template-columns:1fr !important;
    max-width:440px;
    margin:0 auto;
  }
}

/* ── 8. NAV ── */
@media(max-width:768px){
  .nav{ padding:12px 5vw; }
  .nav-logo img{ height:40px; }
  .cart-btn span:not(.cart-count){ display:none; }
  .cart-btn{ padding:9px 14px; }
}

/* ── 9. SECTION SPACING ── */
@media(max-width:768px){
  .section{ padding:64px 5vw; }
  .section-head{ margin-bottom:40px; }
  .section-head h2{ font-size:clamp(1.7rem,6vw,2.4rem); }
}

/* ── 10. FAQ ── */
@media(max-width:600px){
  .faq-item summary{ font-size:.92rem; padding:16px 18px; }
  .faq-body{ padding:14px 18px 18px; font-size:.88rem; }
}

/* ── 11. NEWSLETTER ── */
@media(max-width:560px){
  .nl-form{
    flex-direction:column;
    border-radius:14px;
    overflow:hidden;
  }
  .nl-form input{
    border-radius:0;
    border-bottom:1px solid rgba(44,26,6,.1);
    padding:14px 18px;
  }
  .nl-form button{
    border-radius:0;
    padding:13px;
    font-size:1rem;
  }
}

/* ── 12. FOOTER ── */
@media(max-width:600px){
  .site-footer{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:14px;
    padding:28px 5vw 24px;
  }
  .footer-legal{
    gap:12px;
    font-size:.68rem;
    padding:14px 5vw;
    flex-wrap:wrap;
    justify-content:center;
  }
  .fssai-badge{
    font-size:.67rem;
    padding:8px 12px;
    text-align:center;
  }
}

/* ── 13. CART DRAWER ── */
@media(max-width:480px){
  .cart-drawer{ width:100vw; max-width:100vw; }
}

/* ── 14. LEGAL MODALS ── */
@media(max-width:600px){
  .legal-modal{
    padding:24px 18px;
    border-radius:16px;
    max-height:90vh;
  }
  .legal-modal h2{ font-size:1.4rem; }
  .legal-modal h3{ font-size:1rem; }
  .legal-modal p,.legal-modal ul{ font-size:.87rem; }
}

/* ── 15. WHATSAPP BUTTON ── */
@media(max-width:480px){
  .wa-float{ width:52px; height:52px; bottom:20px; right:16px; }
  .wa-float svg{ width:26px; height:26px; }
  .wa-float-tooltip{ display:none; }
}

/* ── 16. HERO CANVAS (hide heavy canvas on tiny screens) ── */
@media(max-width:480px){
  #hero-canvas{ opacity:0.5; }
}

/* ── 17. ANNOUNCE BAR ── */
@media(max-width:480px){
  .announce{ font-size:.68rem; padding:8px 36px; }
}

/* ── 18. HERO BUTTONS ── */
@media(max-width:400px){
  .btn-3d{ font-size:.95rem; padding:12px 22px; }
  .hero-ctas{ gap:10px; }
}

/* ── 19. PRODUCT BADGE ROW (under hero jar) ── */
@media(max-width:640px){
  .product-badge-row{ gap:6px; }
  .p-badge{ font-size:.62rem; padding:4px 10px; }
}

/* ── 20. STORY SECTION BUTTON ── */
@media(max-width:600px){
  .story-text .btn-3d{ align-self:center; }
  .story-text{ text-align:center; }
  .story-text p{ text-align:left; }
}


/* Hide custom cursor on touch devices */
@media(hover:none),(pointer:coarse){
  .cursor-outer,.cursor-dot,.cursor-peanut,.cursor-trail{ display:none !important; }
  *{ cursor:auto !important; }
}


/* ── CHECKOUT MODAL ──────────────────────────────────────── */
.checkout-overlay{
  position:fixed;inset:0;background:rgba(44,26,6,.6);
  z-index:600;opacity:0;visibility:hidden;
  transition:opacity .3s;
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.checkout-overlay.open{opacity:1;visibility:visible;}
.checkout-modal{
  background:#fff;border-radius:24px;
  width:100%;max-width:540px;max-height:92vh;
  overflow-y:auto;padding:36px 32px;
  box-shadow:0 24px 70px rgba(44,26,6,.28);
  position:relative;
}
.checkout-modal h2{
  font-family:'Fredoka One',cursive;font-size:1.8rem;
  color:var(--brown);margin-bottom:4px;
}
.checkout-modal .co-sub{color:var(--taupe);font-size:.88rem;margin-bottom:24px;}
.co-close{
  position:absolute;top:20px;right:20px;
  background:rgba(44,26,6,.08);border:none;border-radius:50%;
  width:34px;height:34px;font-size:1.1rem;cursor:pointer;color:var(--brown);
  display:flex;align-items:center;justify-content:center;
}
.co-close:hover{background:rgba(44,26,6,.15);}
.co-section{margin-bottom:20px;}
.co-section h3{
  font-family:'Fredoka One',cursive;font-size:1rem;
  color:var(--brown);margin-bottom:12px;
  padding-bottom:6px;border-bottom:2px solid rgba(245,166,35,.25);
}
.co-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.co-grid.full{grid-template-columns:1fr;}
.co-field{display:flex;flex-direction:column;gap:5px;}
.co-field label{font-size:.78rem;font-weight:800;color:var(--brown-mid);letter-spacing:.03em;}
.co-field input,.co-field select{
  border:1.5px solid rgba(44,26,6,.15);border-radius:10px;
  padding:10px 14px;font-family:'Nunito',sans-serif;font-size:.92rem;color:var(--brown);
  background:#fdf6ec;outline:none;transition:border-color .2s;
}
.co-field input:focus,.co-field select:focus{border-color:var(--amber);}
.co-field input.error{border-color:#e53935;}
.pay-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.pay-option{
  border:2px solid rgba(44,26,6,.12);border-radius:12px;
  padding:14px;cursor:pointer;text-align:center;transition:all .2s;
}
.pay-option:hover{border-color:var(--amber);}
.pay-option.selected{border-color:var(--amber);background:rgba(245,166,35,.08);}
.pay-option .pay-icon{font-size:1.6rem;display:block;margin-bottom:4px;}
.pay-option .pay-label{font-size:.82rem;font-weight:800;color:var(--brown);}
.pay-option .pay-desc{font-size:.72rem;color:var(--taupe);}
.co-order-summary{
  background:#fdf6ec;border-radius:14px;padding:16px;margin-bottom:20px;
}
.co-summary-row{
  display:flex;justify-content:space-between;
  font-size:.88rem;color:var(--brown-mid);padding:4px 0;
}
.co-summary-row.total{
  font-family:'Fredoka One',cursive;font-size:1.1rem;
  color:var(--brown);border-top:1.5px solid rgba(44,26,6,.1);
  margin-top:8px;padding-top:10px;
}
.co-summary-row.free{color:var(--green);}
.co-submit{
  width:100%;padding:15px;border:none;border-radius:50px;cursor:pointer;
  background:linear-gradient(135deg,var(--amber),var(--amber-dark));
  color:#fff;font-family:'Fredoka One',cursive;font-size:1.1rem;
  box-shadow:0 5px 0 var(--choco),0 6px 18px rgba(44,26,6,.2);
  transition:transform .15s,box-shadow .15s;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.co-submit:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--choco),0 10px 24px rgba(44,26,6,.25);}
.co-submit:active{transform:translateY(3px);box-shadow:0 2px 0 var(--choco);}
.co-submit:disabled{opacity:.6;cursor:not-allowed;transform:none;}
.co-error{
  background:#fff3f3;border:1.5px solid #e53935;border-radius:10px;
  padding:10px 14px;color:#c62828;font-size:.85rem;font-weight:700;
  margin-bottom:14px;display:none;
}
.co-error.show{display:block;}
.co-success{
  text-align:center;padding:30px 20px;
}
.co-success .success-icon{font-size:4rem;display:block;margin-bottom:14px;}
.co-success h3{font-family:'Fredoka One',cursive;font-size:1.6rem;color:var(--brown);margin-bottom:8px;}
.co-success p{color:var(--taupe);margin-bottom:6px;}
.co-success .order-num{
  font-family:'Space Mono',monospace;font-size:1rem;
  background:#fdf6ec;border:1.5px dashed var(--amber);
  border-radius:10px;padding:10px 18px;display:inline-block;
  color:var(--brown);margin:12px 0;
}
.co-success .wa-follow{
  display:inline-flex;align-items:center;gap:8px;
  background:#25D366;color:#fff;padding:12px 24px;border-radius:50px;
  font-family:'Fredoka One',cursive;font-size:1rem;text-decoration:none;
  margin-top:14px;
}
@media(max-width:540px){
  .checkout-modal{padding:24px 18px;border-radius:16px;}
  .co-grid{grid-template-columns:1fr;}
  .pay-options{grid-template-columns:1fr 1fr;}
}


/* ── CHECKOUT MODAL ──────────────────────────────────────────────────── */
.co-overlay{
  position:fixed;inset:0;background:rgba(44,26,6,.65);
  z-index:300;opacity:0;visibility:hidden;
  transition:opacity .3s;
  display:flex;align-items:center;justify-content:center;
  padding:16px;
}
.co-overlay.open{opacity:1;visibility:visible;}
.co-modal{
  background:#fff;border-radius:24px;
  width:100%;max-width:520px;max-height:92vh;
  overflow-y:auto;padding:32px 28px 28px;
  box-shadow:0 24px 60px rgba(44,26,6,.3);
  position:relative;
}
.co-modal h3{
  font-family:'Fredoka One',cursive;font-size:1.6rem;
  color:var(--brown);margin-bottom:6px;
}
.co-modal .co-sub{font-size:.85rem;color:var(--taupe);margin-bottom:22px;}
.co-section{font-family:'Space Mono',monospace;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--amber-dark);
  margin:20px 0 10px;
}
.co-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
.co-row.full{grid-template-columns:1fr;}
.co-field{display:flex;flex-direction:column;gap:5px;}
.co-field label{font-size:.8rem;font-weight:700;color:var(--brown);}
.co-field input,.co-field select{
  border:1.5px solid rgba(44,26,6,.15);
  border-radius:10px;padding:11px 14px;
  font-family:'Nunito',sans-serif;font-size:.92rem;color:var(--brown);
  background:#fdf6ec;transition:border-color .2s;
}
.co-field input:focus,.co-field select:focus{
  outline:none;border-color:var(--amber);background:#fff;
}
.co-pay-options{display:flex;gap:12px;margin-bottom:20px;}
.co-pay-opt{
  flex:1;border:2px solid rgba(44,26,6,.12);border-radius:12px;
  padding:12px;cursor:pointer;text-align:center;transition:all .2s;
}
.co-pay-opt input[type=radio]{display:none;}
.co-pay-opt.selected{border-color:var(--amber);background:rgba(245,166,35,.08);}
.co-pay-opt .pay-icon{font-size:1.5rem;display:block;margin-bottom:4px;}
.co-pay-opt .pay-label{font-size:.8rem;font-weight:700;color:var(--brown);}
.co-pay-opt .pay-sub{font-size:.7rem;color:var(--taupe);}
.co-order-summary{
  background:var(--cream);border-radius:12px;
  padding:14px 16px;margin-bottom:20px;
}
.co-order-summary .co-sum-row{
  display:flex;justify-content:space-between;
  font-size:.88rem;color:var(--brown-mid);padding:4px 0;
}
.co-order-summary .co-sum-row.total{
  font-family:'Fredoka One',cursive;font-size:1.1rem;
  color:var(--brown);border-top:1px dashed rgba(44,26,6,.15);
  margin-top:8px;padding-top:10px;
}
.co-submit{
  width:100%;padding:15px;border:none;border-radius:50px;cursor:pointer;
  background:linear-gradient(135deg,var(--amber),var(--amber-dark));
  color:#fff;font-family:'Fredoka One',cursive;font-size:1.1rem;
  box-shadow:0 5px 0 var(--choco),0 6px 18px rgba(44,26,6,.2);
  transition:transform .15s,box-shadow .15s;
}
.co-submit:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--choco),0 10px 24px rgba(44,26,6,.25);}
.co-submit:disabled{opacity:.6;cursor:not-allowed;transform:none;}
.co-close{
  position:absolute;top:16px;right:20px;
  background:none;border:none;font-size:1.4rem;
  color:var(--taupe);cursor:pointer;transition:transform .2s;
}
.co-close:hover{transform:rotate(90deg);}
.co-error{
  background:#fff0f0;border:1px solid #ffcccc;border-radius:10px;
  padding:10px 14px;color:#cc2200;font-size:.85rem;
  margin-bottom:14px;display:none;
}
.co-error.show{display:block;}
.co-success{
  text-align:center;padding:20px 0 10px;
}
.co-success .co-tick{font-size:3.5rem;display:block;margin-bottom:12px;}
.co-success h4{font-family:'Fredoka One',cursive;font-size:1.4rem;color:var(--brown);margin-bottom:8px;}
.co-success p{color:var(--taupe);font-size:.9rem;}
@media(max-width:500px){
  .co-modal{padding:24px 16px 20px;}
  .co-row{grid-template-columns:1fr;}
}