:root{
  --forest:#123D24;
  --forest-2:#0C2D1A;
  --leaf:#4F8A2F;
  --orange:#D96B22;
  --orange-2:#F28A32;
  --cream:#FFF8EA;
  --paper:#FFFCF5;
  --gold:#C9A23A;
  --ink:#172019;
  --muted:#6B736C;
  --line:rgba(18,61,36,.13);
  --shadow:0 24px 70px rgba(25,54,29,.14);
  --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
body.locked{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
.splash{position:fixed;inset:0;background:linear-gradient(145deg,var(--cream),#fff);z-index:999;display:grid;place-items:center;transition:opacity .55s ease,visibility .55s ease}
.splash.hide{opacity:0;visibility:hidden}
.splash img{width:min(44vw,240px);border-radius:50%;z-index:2;filter:drop-shadow(0 16px 28px rgba(18,61,36,.15))}
.splash-ring{position:absolute;width:min(58vw,320px);aspect-ratio:1;border:1px solid rgba(201,162,58,.45);border-radius:50%;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.08);opacity:.35}}
.site-header{position:fixed;left:50%;top:14px;transform:translateX(-50%);width:min(94%,1180px);height:66px;display:grid;grid-template-columns:56px 1fr 56px;align-items:center;background:rgba(255,248,234,.82);border:1px solid rgba(255,255,255,.65);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);z-index:70;border-radius:22px;box-shadow:0 10px 32px rgba(18,61,36,.08);transition:.3s ease}
.site-header.scrolled{top:8px;height:58px;background:rgba(18,61,36,.94);border-color:rgba(255,255,255,.12)}
.brand{justify-self:center}
.brand img{width:54px;height:54px;object-fit:cover;border-radius:50%;transition:.3s ease}
.site-header.scrolled .brand img{width:46px;height:46px}
.icon-btn{width:44px;height:44px;border:0;background:transparent;border-radius:14px;font-size:22px;color:var(--forest);display:grid;place-items:center;position:relative}
.site-header.scrolled .icon-btn{color:white}
.cart-count{position:absolute;right:2px;top:0;background:var(--orange);color:white;border-radius:20px;min-width:19px;height:19px;padding:0 5px;font-size:11px;display:grid;place-items:center;font-weight:800}
.side-menu{position:fixed;left:0;top:0;bottom:0;width:min(86vw,360px);background:var(--cream);z-index:100;padding:28px;transform:translateX(-105%);transition:transform .4s cubic-bezier(.2,.8,.2,1);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px}
.side-menu.open{transform:none}
.side-menu a{padding:14px 8px;border-bottom:1px solid var(--line);font-weight:700}
.side-menu a:hover{color:var(--orange)}
.menu-logo{width:110px;margin:14px auto 22px}
.menu-logo img{border-radius:50%}
.menu-close,.cart-head button,.dialog-close{margin-left:auto;border:0;background:none;font-size:34px;line-height:1;color:var(--forest)}
.backdrop{position:fixed;inset:0;background:rgba(5,20,12,.44);opacity:0;visibility:hidden;z-index:90;transition:.3s}
.backdrop.show{opacity:1;visibility:visible}
.hero{min-height:100svh;position:relative;overflow:hidden;background:
  radial-gradient(circle at 75% 25%,rgba(242,138,50,.23),transparent 34%),
  radial-gradient(circle at 20% 80%,rgba(79,138,47,.19),transparent 32%),
  linear-gradient(145deg,#fffaf0 0%,#f7f3e4 54%,#eef3e6 100%);display:flex;align-items:center}
#hero3d{position:absolute;inset:0;width:100%;height:100%;z-index:1;touch-action:none}
.hero-glow{position:absolute;inset:auto 8% 8% auto;width:46vw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(217,107,34,.18),transparent 65%);filter:blur(8px);z-index:0}
.hero-content{position:relative;z-index:2;width:min(92%,1180px);margin:0 auto;padding:130px 0 80px;pointer-events:none}
.hero-content>*{max-width:600px}
.eyebrow,.kicker{font-size:12px;font-weight:900;letter-spacing:.18em;color:var(--orange);text-transform:uppercase}
.hero h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(48px,8vw,94px);line-height:.92;margin:18px 0 24px;color:var(--forest);letter-spacing:-.045em}
.hero h1 span{color:var(--orange)}
.hero p{font-size:clamp(17px,2vw,21px);line-height:1.65;color:#4f5b51;max-width:560px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;pointer-events:auto}
.btn{border:0;border-radius:16px;padding:15px 21px;font-weight:850;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .22s ease,box-shadow .22s ease,background .22s ease}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(135deg,var(--orange),var(--orange-2));color:#fff;box-shadow:0 14px 32px rgba(217,107,34,.28)}
.btn-ghost{background:rgba(255,255,255,.55);border:1px solid rgba(18,61,36,.18);color:var(--forest);backdrop-filter:blur(8px)}
.btn-light{background:var(--cream);color:var(--forest)}
.full{width:100%}
.trust-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;color:var(--forest);font-size:12px;font-weight:750}
.trust-row span{padding:8px 10px;border:1px solid rgba(18,61,36,.11);border-radius:999px;background:rgba(255,255,255,.42)}
.drag-tip{position:absolute;right:22px;bottom:22px;z-index:3;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(18,61,36,.65)}
.statement{padding:84px 24px;text-align:center;background:var(--forest);color:white}
.statement h2{font-family:Georgia,serif;font-size:clamp(34px,5vw,60px);max-width:900px;margin:14px auto 18px;line-height:1.04}
.statement p{max-width:780px;margin:auto;color:rgba(255,255,255,.75);line-height:1.7}
.kicker.light{color:#ffc283}
.section{width:min(92%,1180px);margin:0 auto;padding:90px 0}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:34px;margin-bottom:38px}
.section-heading.compact{align-items:center}
.section-heading h2{font-family:Georgia,serif;color:var(--forest);font-size:clamp(38px,5.8vw,64px);line-height:1.02;margin:10px 0 0}
.section-heading>p{max-width:440px;line-height:1.7;color:var(--muted)}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.product-card{background:linear-gradient(180deg,#fff,var(--cream));border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 16px 45px rgba(18,61,36,.07);transition:.3s ease}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.product-art{height:220px;position:relative;overflow:hidden;display:grid;place-items:center;background:
radial-gradient(circle at 50% 80%,rgba(18,61,36,.16),transparent 38%),
linear-gradient(150deg,#f8f2da,#eef4df)}
.product-art .bowl{width:112px;height:55px;background:linear-gradient(#fffdf8,#e7dec9);border-radius:16px 16px 55px 55px;border:3px solid #d7c9ae;position:absolute;bottom:37px;box-shadow:0 16px 20px rgba(18,61,36,.12)}
.sprout{position:absolute;width:3px;height:74px;background:#69a33e;bottom:83px;border-radius:4px;transform-origin:bottom}
.sprout::before,.sprout::after{content:"";position:absolute;top:0;width:22px;height:12px;background:var(--sprout-color,#5a9a35);border-radius:100% 0 100% 0}
.sprout::before{right:1px;transform:rotate(20deg)}
.sprout::after{left:1px;transform:scaleX(-1) rotate(20deg)}
.product-meta{padding:20px}
.product-meta .tag{font-size:10px;font-weight:900;letter-spacing:.12em;color:var(--orange)}
.product-meta h3{font-family:Georgia,serif;font-size:25px;color:var(--forest);margin:6px 0}
.product-meta p{font-size:13px;color:var(--muted);line-height:1.55;min-height:42px}
.price-row{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-top:18px}
.price-row strong{font-size:22px;color:var(--forest)}
.price-row small{display:block;color:var(--muted);margin-top:2px}
.add-btn{border:0;background:var(--forest);color:white;width:46px;height:46px;border-radius:15px;font-size:24px;box-shadow:0 10px 22px rgba(18,61,36,.22)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step-card{position:relative;padding:32px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);min-height:260px}
.step-num{position:absolute;right:22px;top:18px;font:700 52px Georgia,serif;color:rgba(18,61,36,.07)}
.step-icon{font-size:42px}
.step-card h3{font-family:Georgia,serif;color:var(--forest);font-size:28px;margin:28px 0 10px}
.step-card p{color:var(--muted);line-height:1.65}
.living-banner{width:min(94%,1240px);margin:20px auto 0;padding:54px;border-radius:34px;background:
radial-gradient(circle at 15% 20%,rgba(242,138,50,.2),transparent 25%),
linear-gradient(135deg,var(--forest),#1f5d34);color:#fff;display:flex;align-items:center;gap:34px;box-shadow:var(--shadow)}
.living-banner h2{font-family:Georgia,serif;font-size:clamp(34px,5vw,58px);margin:10px 0;line-height:1}
.living-banner p{color:rgba(255,255,255,.72)}
.living-orb{width:150px;aspect-ratio:1;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#b8e27e,#44802b 55%,#163c24 70%);box-shadow:inset 0 0 0 10px rgba(255,255,255,.06),0 16px 40px rgba(0,0,0,.2)}
.living-orb span{font-weight:950;letter-spacing:.22em;font-size:15px}
.care-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.care-grid article{padding:26px;border-radius:24px;background:var(--cream);border:1px solid var(--line)}
.care-grid b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--orange);color:white}
.care-grid h3{color:var(--forest);margin:28px 0 8px}
.care-grid p{color:var(--muted);line-height:1.6;font-size:14px}
.sub-card{background:linear-gradient(135deg,var(--orange),#b94d16);padding:54px;border-radius:34px;color:white;display:flex;align-items:end;justify-content:space-between;gap:30px;box-shadow:0 24px 70px rgba(217,107,34,.25)}
.sub-card h2{font-family:Georgia,serif;font-size:clamp(38px,5.4vw,62px);line-height:1;margin:12px 0}
.sub-card p{max-width:620px;color:rgba(255,255,255,.78);line-height:1.6}
.story-card{display:grid;grid-template-columns:.72fr 1.28fr;gap:44px;align-items:center;padding:46px;background:#fff;border:1px solid var(--line);border-radius:34px;box-shadow:0 18px 60px rgba(18,61,36,.07)}
.story-logo img{border-radius:50%;box-shadow:0 18px 60px rgba(18,61,36,.12)}
.story-copy h2{font-family:Georgia,serif;color:var(--forest);font-size:clamp(38px,5vw,58px);margin:10px 0}
.story-copy p{color:var(--muted);line-height:1.75}
blockquote{margin:24px 0 0;padding-left:18px;border-left:3px solid var(--orange);font:italic 26px Georgia,serif;color:var(--forest)}
.faq-list{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line);padding:20px 4px}
summary{font-weight:820;color:var(--forest);cursor:pointer}
details p{color:var(--muted);line-height:1.6}
.support-card{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:38px;border:1px solid var(--line);border-radius:30px;background:var(--cream)}
.support-card h2{font-family:Georgia,serif;color:var(--forest);font-size:36px;margin:8px 0}
.support-card p{color:var(--muted)}
footer{padding:60px 24px;text-align:center;background:var(--forest-2);color:white}
footer img{width:104px;border-radius:50%;margin:0 auto 16px}
footer p{font:24px Georgia,serif;color:#ffd2a8}
footer small{color:rgba(255,255,255,.5)}
.cart-drawer{position:fixed;right:0;top:0;bottom:0;width:min(92vw,430px);background:var(--paper);z-index:110;transform:translateX(105%);transition:transform .4s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;box-shadow:var(--shadow)}
.cart-drawer.open{transform:none}
.cart-head{padding:22px 24px;display:flex;align-items:center;border-bottom:1px solid var(--line)}
.cart-head h2{font:34px Georgia,serif;color:var(--forest);margin:0}
.cart-items{padding:16px 22px;overflow:auto;flex:1}
.cart-empty{padding:42px 28px;color:var(--muted);text-align:center}
.cart-item{display:grid;grid-template-columns:1fr auto;gap:12px;padding:15px 0;border-bottom:1px solid var(--line)}
.cart-item h4{margin:0 0 4px;color:var(--forest)}
.cart-item small{color:var(--muted)}
.qty{display:flex;align-items:center;gap:8px}
.qty button{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:#fff}
.cart-summary{padding:20px 24px;border-top:1px solid var(--line);background:#fff}
.cart-summary>div{display:flex;justify-content:space-between;font-size:18px}
.cart-summary p{font-size:12px;line-height:1.5;color:var(--muted)}
.checkout-dialog{width:min(92vw,480px);border:0;border-radius:28px;padding:0;box-shadow:0 30px 100px rgba(0,0,0,.25);background:var(--paper)}
.checkout-dialog::backdrop{background:rgba(6,22,13,.62);backdrop-filter:blur(4px)}
.checkout-dialog form{padding:28px;position:relative}
.checkout-dialog h2{font:38px Georgia,serif;color:var(--forest);margin:8px 0 20px}
.checkout-dialog label{display:block;margin:12px 0;color:var(--forest);font-size:13px;font-weight:800}
.checkout-dialog input,.checkout-dialog select{width:100%;margin-top:7px;padding:13px 14px;border:1px solid var(--line);border-radius:13px;background:#fff;outline:none}
.checkout-dialog input:focus,.checkout-dialog select:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(217,107,34,.12)}
.dialog-close{position:absolute;right:20px;top:18px}
.checkout-total{display:flex;justify-content:space-between;padding:16px 0;font-size:18px;border-top:1px solid var(--line);margin-top:14px}
.demo-note{font-size:11px;line-height:1.5;color:var(--muted);background:var(--cream);padding:12px;border-radius:12px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);opacity:0;z-index:200;background:var(--forest);color:white;padding:13px 18px;border-radius:14px;font-weight:750;box-shadow:var(--shadow);transition:.3s;max-width:88vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .care-grid{grid-template-columns:repeat(2,1fr)}
  .section-heading{align-items:start;flex-direction:column}
  .story-card{grid-template-columns:1fr}
  .story-logo{max-width:260px;margin:auto}
}
@media(max-width:650px){
  .site-header{top:10px;height:60px}
  .hero{min-height:820px;align-items:start}
  .hero-content{padding-top:118px}
  .hero-content>*{max-width:92%}
  .hero h1{font-size:58px}
  .hero p{font-size:16px;max-width:92%}
  #hero3d{top:250px;height:580px}
  .drag-tip{bottom:16px;right:16px}
  .statement{padding:64px 20px}
  .section{padding:68px 0}
  .section-heading h2{font-size:44px}
  .product-grid{grid-template-columns:1fr 1fr;gap:10px}
  .product-art{height:165px}
  .product-meta{padding:15px}
  .product-meta h3{font-size:20px}
  .product-meta p{display:none}
  .price-row{align-items:center}
  .price-row strong{font-size:18px}
  .add-btn{width:40px;height:40px}
  .steps{grid-template-columns:1fr}
  .step-card{min-height:220px}
  .living-banner{padding:30px 24px;flex-direction:column;align-items:flex-start}
  .living-orb{width:105px}
  .care-grid{grid-template-columns:1fr 1fr;gap:10px}
  .care-grid article{padding:18px}
  .sub-card{padding:32px 24px;display:block}
  .sub-card .btn{margin-top:12px}
  .story-card{padding:26px}
  .support-card{align-items:flex-start;flex-direction:column}
}
@media(max-width:390px){
  .hero h1{font-size:50px}
  .product-grid{grid-template-columns:1fr}
  .product-art{height:190px}
  .product-meta p{display:block}
  .care-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}


/* ===== Separate-page additions ===== */
.page-shell{min-height:100vh;background:
  radial-gradient(circle at 88% 5%,rgba(242,138,50,.14),transparent 27%),
  radial-gradient(circle at 10% 35%,rgba(79,138,47,.10),transparent 24%),
  var(--paper)}
.page-hero{padding:145px 24px 70px;text-align:center;background:
  radial-gradient(circle at 80% 10%,rgba(242,138,50,.16),transparent 34%),
  linear-gradient(160deg,var(--cream),#f7f6e9)}
.page-hero .page-icon{font-size:52px;margin-bottom:14px}
.page-hero h1{font-family:Georgia,serif;color:var(--forest);font-size:clamp(46px,7vw,78px);line-height:.98;letter-spacing:-.035em;margin:12px auto 18px;max-width:920px}
.page-hero h1 span{color:var(--orange)}
.page-hero p{max-width:720px;margin:0 auto;color:var(--muted);font-size:18px;line-height:1.7}
.page-content{width:min(92%,1080px);margin:0 auto;padding:66px 0 95px}
.page-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.info-card{background:#fff;border:1px solid var(--line);border-radius:26px;padding:28px;box-shadow:0 16px 45px rgba(18,61,36,.055)}
.info-card h2,.info-card h3{font-family:Georgia,serif;color:var(--forest);margin-top:0}
.info-card h2{font-size:34px}.info-card h3{font-size:25px}
.info-card p,.info-card li{color:var(--muted);line-height:1.7}
.info-card ul{padding-left:20px}
.premium-strip{border-radius:30px;padding:38px;background:linear-gradient(135deg,var(--forest),#245f38);color:white;margin:24px 0}
.premium-strip h2{font:42px/1.05 Georgia,serif;margin:8px 0 12px}
.premium-strip p{color:rgba(255,255,255,.74);line-height:1.7}
.breadcrumb{display:flex;justify-content:center;gap:8px;font-size:12px;color:var(--muted);margin-top:20px}
.breadcrumb a{color:var(--forest);font-weight:800}
.page-nav-current{color:var(--orange)!important}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.plan-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:28px;padding:30px;box-shadow:0 14px 50px rgba(18,61,36,.07)}
.plan-card.featured{background:linear-gradient(150deg,var(--forest),#245f38);color:white;transform:translateY(-8px)}
.plan-card.featured h3,.plan-card.featured .plan-price{color:white}
.plan-card.featured p,.plan-card.featured li{color:rgba(255,255,255,.74)}
.plan-badge{display:inline-block;background:var(--orange);color:#fff;border-radius:999px;padding:7px 11px;font-size:10px;font-weight:900;letter-spacing:.1em}
.plan-card h3{font:30px Georgia,serif;color:var(--forest);margin:16px 0 8px}
.plan-price{font-size:38px;font-weight:900;color:var(--forest)}
.plan-card ul{padding-left:18px;color:var(--muted);line-height:1.75}
.timeline{display:grid;gap:18px}
.timeline-row{display:grid;grid-template-columns:62px 1fr;gap:18px;align-items:start}
.timeline-num{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--orange);color:white;font-weight:900;font-size:18px;box-shadow:0 10px 24px rgba(217,107,34,.24)}
.timeline-row h3{font:28px Georgia,serif;color:var(--forest);margin:0 0 7px}
.timeline-row p{margin:0;color:var(--muted);line-height:1.7}
.story-quote{font:italic clamp(28px,5vw,48px)/1.18 Georgia,serif;color:var(--forest);text-align:center;padding:45px 20px}
.support-options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.support-option{background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px}
.support-option .support-icon{font-size:34px}
.support-option h3{font:25px Georgia,serif;color:var(--forest);margin:14px 0 8px}
.support-option p{color:var(--muted);line-height:1.6;font-size:14px}
@media(max-width:800px){
  .page-grid,.plan-grid,.support-options{grid-template-columns:1fr}
  .plan-card.featured{transform:none}
}
@media(max-width:650px){
  .page-hero{padding:120px 18px 54px}
  .page-hero h1{font-size:48px}
  .page-hero p{font-size:16px}
  .page-content{padding:48px 0 74px}
  .timeline-row{grid-template-columns:50px 1fr;gap:12px}
  .timeline-num{width:44px;height:44px}
}

/* Exact round-logo display */
.brand img,
.menu-logo img,
.splash img,
.story-logo img,
footer img{
  aspect-ratio:1/1;
  object-fit:contain;
  border-radius:50%;
}
.menu-logo{
  aspect-ratio:1/1;
}

/* Animated bottom popup cart */
.bottom-cart-bar{
 position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));
 transform:translate(-50%,130%);width:min(calc(100% - 24px),560px);
 min-height:68px;z-index:85;display:grid;grid-template-columns:auto 1fr auto;
 align-items:center;gap:12px;padding:10px 12px 10px 14px;border-radius:22px;
 background:linear-gradient(135deg,rgba(18,61,36,.98),rgba(31,93,52,.98));
 color:#fff;border:1px solid rgba(255,255,255,.12);
 box-shadow:0 18px 50px rgba(10,43,24,.35);opacity:0;visibility:hidden;
 transition:transform .48s cubic-bezier(.2,.9,.25,1.18),opacity .28s ease,visibility .28s ease;
 backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)
}
.bottom-cart-bar.show{transform:translate(-50%,0);opacity:1;visibility:visible}
.bottom-cart-bar.bump{animation:cartBump .55s cubic-bezier(.2,.9,.25,1.2)}
@keyframes cartBump{
 0%{transform:translate(-50%,0) scale(1)}
 35%{transform:translate(-50%,-8px) scale(1.025)}
 70%{transform:translate(-50%,2px) scale(.995)}
 100%{transform:translate(-50%,0) scale(1)}
}
.bottom-cart-icon{
 width:46px;height:46px;border-radius:15px;display:grid;place-items:center;
 background:linear-gradient(135deg,var(--orange),var(--orange-2));
 font-size:22px;box-shadow:0 10px 24px rgba(217,107,34,.3);position:relative
}
.bottom-cart-badge{
 position:absolute;right:-5px;top:-5px;min-width:20px;height:20px;padding:0 5px;
 display:grid;place-items:center;border-radius:999px;background:var(--cream);
 color:var(--forest);font-size:11px;font-weight:900;border:2px solid var(--forest)
}
.bottom-cart-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.bottom-cart-copy strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bottom-cart-copy span{font-size:12px;color:rgba(255,255,255,.72)}
.bottom-cart-action{
 border:0;background:var(--cream);color:var(--forest);font-weight:900;
 border-radius:14px;padding:12px 14px;box-shadow:0 8px 22px rgba(0,0,0,.13)
}
.bottom-cart-action:active{transform:scale(.97)}
body.has-bottom-cart footer{padding-bottom:130px}

@media(max-width:650px){
 .cart-drawer{
  left:0;right:0;top:auto;bottom:0;width:100%;height:min(78svh,720px);
  border-radius:28px 28px 0 0;transform:translateY(105%);
  box-shadow:0 -24px 80px rgba(8,28,17,.30);overflow:hidden
 }
 .cart-drawer.open{transform:translateY(0)}
 .cart-head{position:relative;padding-top:28px}
 .cart-head::before{
  content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:46px;height:5px;border-radius:999px;background:rgba(18,61,36,.18)
 }
 .cart-items{overscroll-behavior:contain}
}


/* =========================================================
   KIBO BOWL V2 — VISUAL DESIGN SYSTEM
   Premium Organic / Orange + Forest Green / Mobile First
   ========================================================= */

/* 1. BRAND TOKENS */
:root{
  /* Core brand */
  --kb-green-950:#082516;
  --kb-green-900:#0C2D1A;
  --kb-green-800:#123D24;
  --kb-green-700:#1E5A34;
  --kb-green-600:#327245;
  --kb-leaf-500:#4F8A2F;
  --kb-leaf-400:#6FAE3F;
  --kb-leaf-300:#91C869;

  --kb-orange-700:#B94D16;
  --kb-orange-600:#D96B22;
  --kb-orange-500:#F28A32;
  --kb-orange-300:#F8B270;

  --kb-gold-600:#B68A20;
  --kb-gold-500:#C9A23A;
  --kb-gold-300:#E5C86F;

  --kb-cream-50:#FFFCF5;
  --kb-cream-100:#FFF8EA;
  --kb-cream-200:#F7EEDB;
  --kb-white:#FFFFFF;

  --kb-ink:#172019;
  --kb-text:#304036;
  --kb-muted:#6B736C;
  --kb-line:rgba(18,61,36,.13);

  /* Semantic */
  --kb-success:#2F7D45;
  --kb-warning:#D96B22;
  --kb-danger:#B94132;
  --kb-info:#365E7D;

  /* Gradients */
  --kb-gradient-green:linear-gradient(135deg,var(--kb-green-800),var(--kb-green-700));
  --kb-gradient-orange:linear-gradient(135deg,var(--kb-orange-600),var(--kb-orange-500));
  --kb-gradient-cream:linear-gradient(160deg,var(--kb-cream-100),var(--kb-cream-50));
  --kb-gradient-premium:
    radial-gradient(circle at 85% 8%,rgba(242,138,50,.16),transparent 32%),
    radial-gradient(circle at 10% 70%,rgba(79,138,47,.12),transparent 28%),
    linear-gradient(155deg,#fffaf0,#f8f4e8 55%,#eef4e7);

  /* Typography */
  --kb-font-body:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --kb-font-display:Georgia,"Times New Roman",serif;

  --kb-text-xs:12px;
  --kb-text-sm:14px;
  --kb-text-md:16px;
  --kb-text-lg:18px;
  --kb-text-xl:22px;
  --kb-display-sm:34px;
  --kb-display-md:48px;
  --kb-display-lg:64px;

  /* Spacing — 4px system */
  --kb-space-1:4px;
  --kb-space-2:8px;
  --kb-space-3:12px;
  --kb-space-4:16px;
  --kb-space-5:20px;
  --kb-space-6:24px;
  --kb-space-7:28px;
  --kb-space-8:32px;
  --kb-space-10:40px;
  --kb-space-12:48px;
  --kb-space-16:64px;
  --kb-space-20:80px;
  --kb-space-24:96px;

  /* Radius */
  --kb-radius-sm:10px;
  --kb-radius-md:14px;
  --kb-radius-lg:18px;
  --kb-radius-xl:24px;
  --kb-radius-2xl:30px;
  --kb-radius-pill:999px;

  /* Shadows */
  --kb-shadow-xs:0 4px 14px rgba(18,61,36,.06);
  --kb-shadow-sm:0 10px 28px rgba(18,61,36,.08);
  --kb-shadow-md:0 18px 48px rgba(18,61,36,.11);
  --kb-shadow-lg:0 28px 78px rgba(18,61,36,.15);
  --kb-shadow-orange:0 14px 32px rgba(217,107,34,.28);

  /* Motion */
  --kb-ease:cubic-bezier(.2,.8,.2,1);
  --kb-ease-pop:cubic-bezier(.2,.9,.25,1.18);
  --kb-fast:160ms;
  --kb-normal:280ms;
  --kb-slow:460ms;

  /* Layout */
  --kb-container:1180px;
  --kb-content:1080px;
  --kb-header-height:66px;
}

/* Backward-compatible aliases */
:root{
  --forest:var(--kb-green-800);
  --forest-2:var(--kb-green-900);
  --leaf:var(--kb-leaf-500);
  --orange:var(--kb-orange-600);
  --orange-2:var(--kb-orange-500);
  --cream:var(--kb-cream-100);
  --paper:var(--kb-cream-50);
  --gold:var(--kb-gold-500);
  --ink:var(--kb-ink);
  --muted:var(--kb-muted);
  --line:var(--kb-line);
  --shadow:var(--kb-shadow-lg);
  --radius:var(--kb-radius-2xl);
}

/* 2. GLOBAL BRAND RULES */
body{
  font-family:var(--kb-font-body);
  background:var(--kb-cream-50);
  color:var(--kb-ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,.display-font{
  font-family:var(--kb-font-display);
}
::selection{
  background:rgba(242,138,50,.24);
  color:var(--kb-green-900);
}
:focus-visible{
  outline:3px solid rgba(242,138,50,.45);
  outline-offset:3px;
}

/* 3. TYPOGRAPHY */
.kb-eyebrow,
.kicker,
.eyebrow{
  font-family:var(--kb-font-body);
  font-size:var(--kb-text-xs);
  line-height:1.25;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--kb-orange-600);
}
.kb-display{
  margin:0;
  color:var(--kb-green-800);
  font-family:var(--kb-font-display);
  font-size:clamp(42px,7vw,76px);
  line-height:.98;
  letter-spacing:-.035em;
}
.kb-title{
  margin:0;
  color:var(--kb-green-800);
  font-family:var(--kb-font-display);
  font-size:clamp(32px,5vw,52px);
  line-height:1.03;
  letter-spacing:-.025em;
}
.kb-body{
  color:var(--kb-muted);
  font-size:var(--kb-text-md);
  line-height:1.7;
}
.kb-caption{
  color:var(--kb-muted);
  font-size:var(--kb-text-xs);
  line-height:1.5;
}

/* 4. LAYOUT */
.kb-container{
  width:min(92%,var(--kb-container));
  margin-inline:auto;
}
.kb-content{
  width:min(92%,var(--kb-content));
  margin-inline:auto;
}
.kb-section{
  padding-block:clamp(64px,9vw,96px);
}
.kb-stack-8{display:grid;gap:var(--kb-space-2)}
.kb-stack-16{display:grid;gap:var(--kb-space-4)}
.kb-stack-24{display:grid;gap:var(--kb-space-6)}
.kb-stack-32{display:grid;gap:var(--kb-space-8)}

/* 5. BUTTON SYSTEM */
.btn,
.kb-btn{
  min-height:48px;
  border:0;
  border-radius:var(--kb-radius-lg);
  padding:13px 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--kb-font-body);
  font-size:14px;
  font-weight:850;
  line-height:1;
  cursor:pointer;
  transition:
    transform var(--kb-fast) var(--kb-ease),
    box-shadow var(--kb-normal) var(--kb-ease),
    background var(--kb-normal) var(--kb-ease),
    border-color var(--kb-normal) var(--kb-ease);
}
.btn:hover,.kb-btn:hover{transform:translateY(-2px)}
.btn:active,.kb-btn:active{transform:translateY(0) scale(.98)}
.btn-primary,.kb-btn--primary{
  background:var(--kb-gradient-orange);
  color:var(--kb-white);
  box-shadow:var(--kb-shadow-orange);
}
.btn-primary:hover,.kb-btn--primary:hover{
  box-shadow:0 18px 38px rgba(217,107,34,.34);
}
.btn-ghost,.kb-btn--secondary{
  background:rgba(255,255,255,.68);
  color:var(--kb-green-800);
  border:1px solid rgba(18,61,36,.16);
  box-shadow:var(--kb-shadow-xs);
}
.kb-btn--green{
  background:var(--kb-gradient-green);
  color:var(--kb-white);
  box-shadow:0 14px 32px rgba(18,61,36,.22);
}
.kb-btn--text{
  min-height:auto;
  padding:6px 0;
  border-radius:0;
  background:none;
  color:var(--kb-green-800);
  box-shadow:none;
}

/* 6. CARD SYSTEM */
.product-card,
.info-card,
.step-card,
.support-option,
.plan-card,
.kb-card{
  border:1px solid var(--kb-line);
  border-radius:var(--kb-radius-xl);
  box-shadow:var(--kb-shadow-sm);
  transition:
    transform var(--kb-normal) var(--kb-ease),
    box-shadow var(--kb-normal) var(--kb-ease),
    border-color var(--kb-normal) var(--kb-ease);
}
.product-card:hover,
.info-card:hover,
.step-card:hover,
.support-option:hover,
.plan-card:hover,
.kb-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--kb-shadow-md);
  border-color:rgba(18,61,36,.18);
}
.kb-card{
  background:var(--kb-white);
  padding:var(--kb-space-6);
}
.kb-card--cream{
  background:var(--kb-cream-100);
}
.kb-card--green{
  background:var(--kb-gradient-green);
  color:var(--kb-white);
  border-color:rgba(255,255,255,.10);
}

/* 7. CHIP / BADGE SYSTEM */
.kb-chip,
.plan-badge,
.product-meta .tag{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  border-radius:var(--kb-radius-pill);
  padding:6px 10px;
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.kb-chip--orange,.plan-badge{
  background:var(--kb-orange-600);
  color:var(--kb-white);
}
.kb-chip--green{
  background:rgba(79,138,47,.12);
  color:var(--kb-green-700);
}
.kb-chip--cream{
  background:var(--kb-cream-100);
  color:var(--kb-green-800);
}

/* 8. FORMS */
input,select,textarea,.kb-input{
  min-height:48px;
  width:100%;
  border:1px solid var(--kb-line);
  border-radius:var(--kb-radius-md);
  background:var(--kb-white);
  color:var(--kb-ink);
  padding:12px 14px;
  transition:
    border-color var(--kb-fast) var(--kb-ease),
    box-shadow var(--kb-fast) var(--kb-ease);
}
input:focus,select:focus,textarea:focus,.kb-input:focus{
  border-color:var(--kb-orange-600);
  box-shadow:0 0 0 4px rgba(217,107,34,.12);
  outline:none;
}
label{
  color:var(--kb-green-800);
  font-size:13px;
  font-weight:800;
}

/* 9. NAVIGATION */
.site-header{
  border-radius:var(--kb-radius-xl);
  box-shadow:var(--kb-shadow-sm);
}
.side-menu{
  background:var(--kb-cream-100);
}
.side-menu a{
  border-bottom:1px solid var(--kb-line);
  transition:
    color var(--kb-fast) var(--kb-ease),
    padding-left var(--kb-fast) var(--kb-ease);
}
.side-menu a:hover{
  color:var(--kb-orange-600);
  padding-left:14px;
}

/* 10. PRODUCT PRESENTATION */
.product-art{
  background:
    radial-gradient(circle at 50% 80%,rgba(18,61,36,.16),transparent 38%),
    linear-gradient(150deg,#fbf4df,#edf4df);
}
.product-meta h3{
  letter-spacing:-.015em;
}
.price-row strong{
  color:var(--kb-green-800);
}
.add-btn{
  background:var(--kb-gradient-green);
  border-radius:var(--kb-radius-md);
  transition:
    transform var(--kb-fast) var(--kb-ease-pop),
    box-shadow var(--kb-normal) var(--kb-ease);
}
.add-btn:hover{transform:translateY(-2px) scale(1.04)}
.add-btn:active{transform:scale(.96)}

/* 11. PREMIUM SECTIONS */
.page-hero{
  background:var(--kb-gradient-premium);
}
.statement{
  background:
    radial-gradient(circle at 12% 10%,rgba(242,138,50,.16),transparent 25%),
    linear-gradient(140deg,var(--kb-green-900),var(--kb-green-800));
}
.premium-strip,
.living-banner{
  background:
    radial-gradient(circle at 10% 20%,rgba(242,138,50,.20),transparent 27%),
    linear-gradient(135deg,var(--kb-green-800),var(--kb-green-700));
}

/* 12. BOTTOM CART */
.bottom-cart-bar{
  border-radius:var(--kb-radius-xl);
  box-shadow:0 22px 60px rgba(8,37,22,.30);
}
.bottom-cart-action{
  border-radius:var(--kb-radius-md);
}

/* 13. MOTION STANDARD */
@keyframes kbFadeUp{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
.kb-enter{
  animation:kbFadeUp .55s var(--kb-ease) both;
}
@media(prefers-reduced-motion:reduce){
  .kb-enter{animation:none}
}

/* 14. MOBILE RULES */
@media(max-width:650px){
  :root{
    --kb-header-height:60px;
  }
  .btn,.kb-btn{
    min-height:46px;
    padding:12px 16px;
  }
  .kb-section{
    padding-block:64px;
  }
  .kb-card{
    padding:20px;
  }
}

/* 15. DESIGN SYSTEM PREVIEW PAGE */
.ds-page{
  min-height:100vh;
  background:var(--kb-cream-50);
}
.ds-hero{
  padding:130px 24px 60px;
  text-align:center;
  background:var(--kb-gradient-premium);
}
.ds-hero img{
  width:112px;
  margin:0 auto 18px;
  border-radius:50%;
}
.ds-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.ds-swatch{
  min-height:130px;
  border-radius:22px;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  box-shadow:var(--kb-shadow-xs);
  border:1px solid rgba(18,61,36,.10);
}
.ds-swatch b{font-size:14px}
.ds-swatch span{font-size:11px;opacity:.72;margin-top:4px}
.ds-demo{
  padding:24px;
  background:#fff;
  border:1px solid var(--kb-line);
  border-radius:26px;
  box-shadow:var(--kb-shadow-sm);
}
.ds-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}
@media(max-width:850px){
  .ds-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:430px){
  .ds-grid{grid-template-columns:1fr}
}


/* =========================================================
   STEP 3 — COMPLETE CUSTOMER UI
   ========================================================= */
.ui-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ui-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.ui-panel{background:#fff;border:1px solid var(--kb-line);border-radius:var(--kb-radius-xl);padding:24px;box-shadow:var(--kb-shadow-sm)}
.ui-panel h2,.ui-panel h3{color:var(--kb-green-800);margin-top:0}
.ui-panel p{color:var(--kb-muted);line-height:1.65}
.ui-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ui-divider{height:1px;background:var(--kb-line);margin:18px 0}
.ui-muted{color:var(--kb-muted)}
.ui-status{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;font-size:11px;font-weight:900}
.ui-status--orange{background:rgba(217,107,34,.12);color:var(--kb-orange-700)}
.ui-status--green{background:rgba(79,138,47,.12);color:var(--kb-green-700)}
.ui-status--gray{background:rgba(23,32,25,.07);color:#4c5650}
.ui-iconbox{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:var(--kb-cream-100);font-size:23px}
.account-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.account-link{display:flex;align-items:center;gap:14px;padding:20px;background:#fff;border:1px solid var(--kb-line);border-radius:22px;box-shadow:var(--kb-shadow-xs)}
.account-link strong{display:block;color:var(--kb-green-800)}
.account-link small{display:block;color:var(--kb-muted);margin-top:4px;line-height:1.4}
.account-link:hover{transform:translateY(-3px);box-shadow:var(--kb-shadow-sm)}
.cart-page-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);gap:24px;align-items:start}
.cart-line{display:grid;grid-template-columns:76px 1fr auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--kb-line)}
.cart-thumb{width:76px;height:76px;border-radius:18px;background:linear-gradient(145deg,#f7efdc,#edf4df);display:grid;place-items:center;font-size:34px}
.cart-line h3{margin:0;color:var(--kb-green-800);font-size:22px}
.cart-line p{margin:5px 0;color:var(--kb-muted);font-size:13px}
.qty-inline{display:flex;align-items:center;gap:8px;margin-top:9px}
.qty-inline button{width:30px;height:30px;border-radius:9px;border:1px solid var(--kb-line);background:#fff}
.summary-sticky{position:sticky;top:90px}
.summary-line{display:flex;justify-content:space-between;gap:16px;padding:10px 0;color:var(--kb-muted)}
.summary-line.total{color:var(--kb-green-800);font-weight:900;font-size:20px;border-top:1px solid var(--kb-line);margin-top:6px;padding-top:16px}
.checkout-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:24px;align-items:start}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.form-field{display:grid;gap:7px}
.form-field.full{grid-column:1/-1}
.slot-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.slot-card{border:1px solid var(--kb-line);border-radius:18px;padding:16px;background:#fff;cursor:pointer}
.slot-card input{width:auto;min-height:auto;margin-right:8px}
.order-success{max-width:720px;margin:0 auto;text-align:center}
.success-orb{width:110px;height:110px;border-radius:50%;margin:0 auto 20px;display:grid;place-items:center;font-size:48px;background:linear-gradient(145deg,#e8f6d9,#fff8ea);box-shadow:var(--kb-shadow-md)}
.timeline-track{position:relative;margin-top:28px}
.track-step{display:grid;grid-template-columns:48px 1fr;gap:14px;position:relative;padding-bottom:26px}
.track-step:not(:last-child)::before{content:"";position:absolute;left:23px;top:46px;width:2px;height:calc(100% - 16px);background:rgba(18,61,36,.13)}
.track-dot{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--kb-cream-100);border:2px solid rgba(18,61,36,.12);z-index:1}
.track-step.active .track-dot,.track-step.done .track-dot{background:var(--kb-green-800);color:#fff;border-color:var(--kb-green-800)}
.track-step.done:not(:last-child)::before{background:var(--kb-leaf-500)}
.track-step h3{margin:2px 0 6px;color:var(--kb-green-800);font-size:19px}
.track-step p{margin:0;color:var(--kb-muted);font-size:13px;line-height:1.55}
.order-card{background:#fff;border:1px solid var(--kb-line);border-radius:24px;padding:22px;box-shadow:var(--kb-shadow-xs)}
.order-card+.order-card{margin-top:14px}
.order-card h3{margin:0;color:var(--kb-green-800)}
.order-meta{display:flex;flex-wrap:wrap;gap:8px 16px;color:var(--kb-muted);font-size:12px;margin-top:8px}
.address-card{background:#fff;border:1px solid var(--kb-line);border-radius:22px;padding:22px}
.address-card h3{margin:0 0 8px;color:var(--kb-green-800)}
.address-card p{color:var(--kb-muted);line-height:1.6;margin:0}
.product-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.product-visual{min-height:430px;border-radius:32px;background:radial-gradient(circle at 50% 70%,rgba(79,138,47,.16),transparent 36%),linear-gradient(145deg,#fbf4df,#edf4df);display:grid;place-items:center;position:relative;overflow:hidden}
.product-visual .hero-bowl{font-size:150px;filter:drop-shadow(0 20px 20px rgba(18,61,36,.15))}
.product-info h1{font:clamp(46px,6vw,72px)/.98 var(--kb-font-display);color:var(--kb-green-800);margin:8px 0 14px}
.product-price{font-size:30px;font-weight:900;color:var(--kb-green-800)}
.product-points{display:grid;gap:12px;margin:24px 0}
.product-point{display:flex;gap:12px;align-items:flex-start}
.product-point i{font-style:normal;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(79,138,47,.12)}
.privacy-content{max-width:850px;margin:0 auto}
.privacy-content h2{font:32px var(--kb-font-display);color:var(--kb-green-800);margin:34px 0 10px}
.privacy-content p,.privacy-content li{color:var(--kb-muted);line-height:1.75}
@media(max-width:820px){
 .cart-page-layout,.checkout-layout,.product-detail-grid{grid-template-columns:1fr}
 .summary-sticky{position:static}
 .ui-grid-3{grid-template-columns:1fr}
 .ui-grid-2,.account-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
 .form-grid,.slot-grid{grid-template-columns:1fr}
 .cart-line{grid-template-columns:62px 1fr}
 .cart-line>strong{grid-column:2}
 .cart-thumb{width:62px;height:62px}
 .product-visual{min-height:330px}
 .product-visual .hero-bowl{font-size:110px}
}