:root{
  --cream:#F6EEDC;
  --bg:#FBF8F2;
  --green:#506B2F;
  --green-dark:#3E5624;
  --beige:#E8D4A2;
  --brown:#3B2418;
  --brown-muted:#6B5744;
  --white:#FFFFFF;
  --line:#E4DAC6;
  --danger:#A8432F;
  --serif:'Fraunces', serif;
  --sans:'Inter', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--brown);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:var(--sans); cursor:pointer; border:none; background:none;}
input,textarea,select{font-family:var(--sans);}
.wrap{max-width:1280px; margin:0 auto; padding:0 80px; position:relative; z-index:2;}
.eyebrow{
  font-size:13px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--green); margin-bottom:16px; display:inline-flex; align-items:center; gap:10px;
}
h1,h2,h3{font-family:var(--serif); font-weight:500; color:var(--brown); letter-spacing:-0.3px;}
h2{font-size:42px; line-height:1.15; margin-bottom:16px;}
.section-head{max-width:640px; margin:0 auto 64px; text-align:center; position:relative; z-index:2;}
.section-head p{color:var(--brown-muted); font-size:17px;}
section{padding:130px 0; position:relative; overflow:hidden;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:17px 36px; border-radius:100px; font-size:15px; font-weight:600;
  letter-spacing:0.3px; transition:all .35s cubic-bezier(.34,1.4,.64,1); white-space:nowrap;
}
.btn-primary{background:var(--green); color:var(--cream);}
.btn-primary:hover{background:var(--green-dark); transform:translateY(-3px) scale(1.03); box-shadow:0 16px 32px rgba(80,107,47,.32);}
.btn-outline{background:transparent; color:var(--green); border:1.5px solid var(--green);}
.btn-outline:hover{background:var(--green); color:var(--cream); border-radius:40% 60% 60% 40%/60% 40% 60% 40%;}
.btn-ghost{color:var(--brown); font-weight:600; position:relative; padding:8px 0; background:none; border:none;}
.btn-ghost::after{content:''; position:absolute; left:0; right:100%; bottom:2px; height:1px; background:var(--brown); transition:right .3s ease;}
.btn-ghost:hover::after{right:0;}

/* ===== FLUID BACKGROUND BLOBS ===== */
.blob-bg{position:absolute; z-index:0; pointer-events:none;}
@keyframes morph{
  0%,100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%;}
  25%{border-radius:30% 70% 70% 30%/50% 50% 50% 50%;}
  50%{border-radius:70% 30% 50% 50%/30% 60% 40% 70%;}
  75%{border-radius:40% 60% 30% 70%/70% 40% 60% 30%;}
}
@keyframes float-slow{
  0%,100%{transform:translate(0,0) rotate(0deg);}
  50%{transform:translate(20px,-30px) rotate(8deg);}
}
@keyframes float-slow2{
  0%,100%{transform:translate(0,0) rotate(0deg);}
  50%{transform:translate(-25px,25px) rotate(-6deg);}
}

/* ===== WAVE DIVIDERS ===== */
.wave{position:relative; width:100%; height:90px; margin-top:-1px; z-index:1;}
.wave svg{width:100%; height:100%; display:block;}

/* ===== NAV ===== */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(251,248,242,0.0);
  transition:background .3s ease, box-shadow .3s ease;
}
header.scrolled{background:rgba(251,248,242,0.94); backdrop-filter:blur(10px); box-shadow:0 8px 30px rgba(59,36,24,.06);}
nav.wrap{display:flex; align-items:center; justify-content:space-between; padding-top:22px; padding-bottom:22px;}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--serif); font-size:24px; color:var(--brown); font-weight:600;}
.logo svg, .logo img{width:44px; height:44px; object-fit:contain;}
.nav-links{display:flex; gap:40px; font-size:15px; font-weight:500;}
.nav-links a{position:relative; padding:6px 0;}
.nav-links a:hover{color:var(--green);}
.nav-icons{display:flex; align-items:center; gap:6px;}
.icon-btn{width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .3s cubic-bezier(.34,1.4,.64,1); position:relative;}
.icon-btn:hover{background:var(--beige); border-radius:40% 60% 60% 40%/60% 40% 60% 40%; transform:scale(1.08);}
.icon-btn svg{width:20px; height:20px; stroke:var(--brown); fill:none; stroke-width:1.6;}
.icon-btn.active{background:var(--green);}
.icon-btn.active svg{stroke:var(--cream);}
.cart-badge{position:relative;}
.badge,.cart-badge span{position:absolute; top:2px; right:2px; background:var(--green); color:var(--cream); font-size:10px; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700;}

/* ===== SHARED PAGE HERO (inner pages) ===== */
.page-hero{padding:64px 0 40px; position:relative; overflow:hidden;}
.ph-blob{width:320px; height:320px; background:var(--beige); opacity:.35; top:-140px; right:-40px; animation:morph 14s ease-in-out infinite;}
.breadcrumb{font-size:13px; color:var(--brown-muted); margin-bottom:16px;}
.breadcrumb a:hover{color:var(--green);}
.page-hero h1{font-size:40px;}
.page-hero .sub, .page-hero .count{color:var(--brown-muted); font-size:15px; margin-top:6px;}

/* ===== FOOTER ===== */
footer{background:var(--brown); color:var(--cream); margin-top:120px; position:relative;}
.footer-top{padding:80px 0 56px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px;}
.footer-brand .logo{color:var(--cream); margin-bottom:16px;}
.footer-brand p{color:#C9B89A; font-size:14px; max-width:260px;}
.footer-col h4{font-size:13px; text-transform:uppercase; letter-spacing:1.5px; color:#C9B89A; margin-bottom:20px;}
.footer-col ul li{margin-bottom:13px; font-size:14.5px; color:#E9E0CC;}
.footer-col ul li a:hover{color:var(--beige);}
.footer-contact li{display:flex; align-items:center; gap:10px; margin-bottom:16px; font-size:14px; color:#E9E0CC;}
.footer-contact svg{width:16px; height:16px; stroke:var(--beige); fill:none; stroke-width:1.6; flex-shrink:0;}
.footer-bottom{border-top:1px solid rgba(246,238,220,.12); padding:26px 0; display:flex; justify-content:space-between; align-items:center; font-size:13px; color:#C9B89A;}
.pay-icons{display:flex; gap:10px;}
.pay-icons span{background:rgba(246,238,220,.1); padding:5px 12px; border-radius:6px; font-size:11px; font-weight:600;}

/* ===== REVEAL-ON-SCROLL ===== */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);}
.reveal.in{opacity:1; transform:translateY(0);}

/* ===== TOASTS (Django messages) ===== */
.toast-stack{position:fixed; top:88px; right:24px; z-index:1000; display:flex; flex-direction:column; gap:10px; max-width:320px;}
.toast{background:var(--white); border-left:4px solid var(--green); border-radius:12px; padding:14px 18px; font-size:13.5px; box-shadow:0 14px 30px rgba(59,36,24,.14); animation:toast-in .3s ease;}
.toast-error{border-left-color:var(--danger);}
.toast-success{border-left-color:var(--green);}
@keyframes toast-in{from{opacity:0; transform:translateX(16px);} to{opacity:1; transform:translateX(0);}}

/* ===== FORM FIELDS (shared shell used by accounts/checkout later) ===== */
.field{display:flex; flex-direction:column; gap:8px;}
.field label{font-size:13px; font-weight:600; color:var(--brown-muted);}
.field input, .field textarea, .field select{
  padding:14px 18px; border-radius:14px; border:1px solid var(--line);
  background:var(--bg); font-size:14.5px; outline:none; color:var(--brown); width:100%;
}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--green);}
.field .errorlist{list-style:none; color:var(--danger); font-size:12.5px; margin-top:2px;}
.non-field-errors{background:#f4e6e0; color:var(--danger); border-radius:14px; padding:14px 18px; font-size:13.5px; margin-bottom:18px;}

@media (max-width:1100px){
  .wrap, nav.wrap{padding:0 40px;}
  .nav-links{display:none;}
  .footer-top{grid-template-columns:1fr 1fr; row-gap:40px;}
}
@media (max-width:680px){
  .wrap, nav.wrap{padding:0 20px;}
  section{padding:80px 0;}
  h2{font-size:28px;}
  .footer-top{grid-template-columns:1fr; padding:56px 0 40px;}
  .footer-bottom{flex-direction:column; gap:14px; text-align:center;}
  .toast-stack{right:12px; left:12px; max-width:none;}
}