/* ===== Man Root — shared site styles ===== */

:root{
  --ink:#1A0E11;
  --ink-2:#2B141C;
  --ink-3:#3A1E27;
  --parchment:#F8ECE7;
  --gold:#C98F6B;
  --gold-dim:#B37853;
  --oxblood:#9C1F45;
  --moss:#8C5B66;
  --bone:#F3DFD9;
  --bone-dim:#C9A7A0;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --serif:'Fraunces', Georgia, serif;
  --cond:'Oswald', Arial, sans-serif;
  --sans:'Inter', Arial, sans-serif;
  --maxw:1200px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{overflow-x:hidden; width:100%;}
html{scroll-behavior:smooth;}
body{background:var(--parchment); color:var(--ink); font-family:var(--sans); line-height:1.65; overflow-x:hidden; width:100%; -webkit-font-smoothing:antialiased;}
img{max-width:100%; display:block;}
a{color:inherit;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.eyebrow{font-family:var(--cond); text-transform:uppercase; letter-spacing:0.14em; font-size:12px; font-weight:600;}
::selection{background:var(--gold); color:var(--ink);}

/* ---------- promo strip ---------- */
.promo{background:var(--ink); color:var(--bone); font-family:var(--cond); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; overflow:hidden; position:relative; border-bottom:1px solid rgba(201,143,107,0.2);}
.promo-track{display:flex; width:max-content; animation:marquee 26s linear infinite;}
.promo-track span{padding:9px 36px; white-space:nowrap; display:flex; align-items:center; gap:10px;}
.promo-track span::before{content:"•"; color:var(--gold);}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.promo:hover .promo-track{animation-play-state:paused;}

/* ---------- header ---------- */
header{position:sticky; top:0; z-index:50; background:rgba(26,14,17,0.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid rgba(201,143,107,0.18); transition:background 0.3s ease, box-shadow 0.3s ease;}
header.scrolled{background:rgba(26,14,17,0.97); box-shadow:0 10px 30px rgba(26,14,17,0.35);}
.topbar{display:flex; align-items:center; justify-content:space-between; padding:16px 28px; gap:20px;}
.wordmark{font-family:var(--cond); color:var(--bone); font-size:19px; letter-spacing:0.06em; text-transform:uppercase; text-decoration:none; flex:none;}
.wordmark span{color:var(--gold);}
nav.main-nav{display:flex; align-items:center; gap:30px;}
nav.main-nav a.navlink{font-size:14px; color:var(--bone-dim); text-decoration:none; position:relative; padding:4px 0;}
nav.main-nav a.navlink::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform 0.3s var(--ease);}
nav.main-nav a.navlink:hover{color:var(--bone);}
nav.main-nav a.navlink:hover::after, nav.main-nav a.navlink.active::after{transform:scaleX(1); transform-origin:left;}
nav.main-nav a.navlink.active{color:var(--bone);}
.header-actions{display:flex; align-items:center; gap:16px;}
.icon-btn{background:none; border:none; color:var(--bone); cursor:pointer; position:relative; display:flex; align-items:center; justify-content:center; width:36px; height:36px;}
.icon-btn svg{width:20px; height:20px;}
.cart-count{position:absolute; top:-2px; right:-2px; background:var(--gold); color:var(--ink); font-family:var(--cond); font-size:10px; font-weight:600; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.menu-toggle{display:none; background:none; border:none; color:var(--bone); cursor:pointer; width:36px; height:36px; flex-direction:column; justify-content:center; gap:5px;}
.menu-toggle span{display:block; height:1px; background:var(--bone); width:100%;}

.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--cond); text-transform:uppercase; letter-spacing:0.08em; font-size:13px; font-weight:600; padding:13px 24px; border-radius:100px; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:transform 0.3s var(--ease), background 0.2s ease, border-color 0.2s ease, box-shadow 0.3s var(--ease);}
.btn:hover{transform:translateY(-2px);}
.btn-gold{background:var(--gold); color:var(--ink);}
.btn-gold:hover{background:#DAA57E; box-shadow:0 12px 24px rgba(201,143,107,0.35);}
.btn-outline{background:transparent; color:var(--bone); border-color:rgba(243,223,217,0.4);}
.btn-outline:hover{border-color:var(--gold); color:var(--gold);}
.btn-dark{background:var(--ink); color:var(--bone);}
.btn-dark:hover{background:var(--ink-2);}
.btn-sm{padding:10px 18px; font-size:11px;}
.btn-block{width:100%; justify-content:center;}

/* mobile nav panel */
.mobile-nav{position:fixed; inset:0; background:var(--ink); z-index:60; display:flex; flex-direction:column; padding:24px 28px; transform:translateX(100%); transition:transform 0.4s var(--ease); overflow-y:auto;}
.mobile-nav.open{transform:translateX(0);}
.mobile-nav .close-row{display:flex; justify-content:flex-end;}
.mobile-nav a{font-family:var(--serif); font-size:28px; color:var(--bone); text-decoration:none; padding:14px 0; border-bottom:1px solid rgba(201,143,107,0.15);}
.mobile-nav .mn-cta{margin-top:24px; width:100%; justify-content:center; padding:16px 24px; font-size:14px;}

/* ---------- hero ---------- */
.hero{background:var(--ink); color:var(--bone); position:relative; overflow:hidden;}
.hero .wrap{display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center; padding-top:72px; padding-bottom:80px; position:relative; z-index:2;}
.hero h1{font-family:var(--serif); font-weight:500; font-size:56px; line-height:1.04; letter-spacing:-0.01em;}
.hero h1 em{font-style:italic; font-weight:400; color:var(--gold);}
.hero p.lede{margin-top:22px; max-width:46ch; color:var(--bone-dim); font-size:17px;}
.hero .eyebrow{color:var(--gold); margin-bottom:16px; display:block;}
.hero-ctas{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;}
.hero-art{position:relative;}
.hero-art .frame{background:var(--ink-2); border:1px solid rgba(201,143,107,0.25); border-radius:20px; padding:36px; position:relative; overflow:hidden; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;}
.hero-art .frame img{width:100%; height:100%; object-fit:contain;}
.hero-badge{position:absolute; bottom:-22px; left:-22px; background:rgba(255,255,255,0.32); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%); color:var(--ink); border:1px solid rgba(255,255,255,0.55); border-radius:16px; padding:16px 20px; box-shadow:0 12px 32px rgba(26,14,17,0.14), inset 0 1px 0 rgba(255,255,255,0.5); max-width:210px;}
.hero-badge .num{font-family:var(--serif); font-size:26px; color:var(--oxblood); display:block;}
.hero-badge .label{font-size:12px; color:#4A3A38;}
.root-line{position:absolute; inset:0; width:100%; height:100%; opacity:0.3; pointer-events:none; z-index:1;}
.root-line path{stroke-dasharray:1; stroke-dashoffset:0; transition:stroke-dashoffset 1.7s var(--ease);}

/* ---------- full-width campaign banner ---------- */
.campaign-banner{width:100%; line-height:0; background:var(--parchment);}
.campaign-banner img{width:100%; height:auto; display:block;}

/* ---------- organic hero (image-cutout + coded branches/capsules) ---------- */
.hero-organic{background:var(--parchment); position:relative; overflow:visible;}
.branch-art{position:absolute; inset:0; width:100%; height:100%; z-index:1; opacity:0.9; pointer-events:none;}
.branch-art path{stroke-dasharray:1; stroke-dashoffset:0; transition:stroke-dashoffset 1.7s var(--ease);}
.hero-organic-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center; padding-top:64px; padding-bottom:76px; position:relative; z-index:2;}
.hero-organic-copy .eyebrow{color:var(--oxblood); display:block; margin-bottom:14px;}
.organic-h1{font-family:var(--serif); line-height:0.9; letter-spacing:-0.01em; margin-bottom:8px;}
.organic-h1 .line{display:block; text-transform:uppercase; color:var(--ink);}
.organic-h1 .line-1{font-family:'Alex Brush', cursive; font-style:normal; text-transform:none; font-weight:400; font-size:96px; line-height:0.75; color:var(--oxblood); display:block;}
.organic-h1 .line-2{font-weight:700; font-size:64px;}
.hero-organic-copy .lede{margin-top:20px; max-width:44ch; color:#6B4F55; font-size:16px;}
.hero-organic-copy .hero-ctas{margin-top:32px; display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.btn-lg{padding:17px 34px; font-size:14px; box-shadow:0 14px 34px rgba(201,143,107,0.4);}
.btn-lg:hover{box-shadow:0 18px 40px rgba(201,143,107,0.5);}
.text-link{font-family:var(--cond); font-size:13px; text-transform:uppercase; letter-spacing:0.06em; font-weight:600; color:var(--ink); text-decoration:underline; text-underline-offset:3px; opacity:0.7; transition:opacity 0.2s ease;}
.text-link:hover{opacity:1;}
.hero-trust{margin-top:26px; display:flex; align-items:center; gap:12px;}
.avatar-cluster{display:flex;}
.avatar{width:34px; height:34px; border-radius:50%; border:2px solid var(--parchment); margin-left:-10px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(26,14,17,0.15);}
.avatar:first-child{margin-left:0;}
.avatar svg{width:16px; height:16px; fill:none; stroke:var(--parchment); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.avatar-more{background:var(--parchment); color:var(--ink); font-family:var(--cond); font-size:12px; font-weight:700; border-color:var(--parchment); box-shadow:0 2px 6px rgba(26,14,17,0.15), inset 0 0 0 1px rgba(26,14,17,0.12);}
.hero-trust-label{font-size:12.5px; color:#6B4F55;}

.art-glow{position:absolute; inset:-10%; z-index:0; pointer-events:none; background:radial-gradient(circle at 55% 45%, rgba(201,143,107,0.35), transparent 60%);}
.hero-organic-art{position:relative; display:flex; justify-content:center; min-height:360px;}
.bottle-stage{position:relative; width:min(300px, 72%); flex:none;}
/* the cutout keeps its native proportions exactly — width drives sizing,
   height is automatic, nothing here stretches or squashes it */
.bottle-stage img{width:100%; height:auto; display:block; transform:rotate(-6deg); transform-origin:50% 88%;}

.capsule-wrap{position:absolute; width:15%; filter:drop-shadow(0 6px 10px rgba(26,14,17,0.15));}
.capsule-wrap.cap-1{top:4%; right:-9%; width:15%;}
.capsule-wrap.cap-2{top:35%; right:-15%; width:12%;}
.capsule-wrap.cap-3{bottom:10%; left:-13%; width:17%;}
.capsule-wrap svg{width:100%; height:auto; display:block;}
@keyframes capsule-float-a{0%,100%{transform:rotate(25deg) translateY(0);} 50%{transform:rotate(31deg) translateY(-8px);}}
@keyframes capsule-float-b{0%,100%{transform:rotate(-16deg) translateY(0);} 50%{transform:rotate(-22deg) translateY(7px);}}
@keyframes capsule-float-c{0%,100%{transform:rotate(34deg) translateY(0);} 50%{transform:rotate(28deg) translateY(-6px);}}
.float-a{display:block; transform-origin:50% 50%; animation:capsule-float-a 4.6s ease-in-out 1.2s infinite;}
.float-b{display:block; transform-origin:50% 50%; animation:capsule-float-b 5.3s ease-in-out 1.6s infinite;}
.float-c{display:block; transform-origin:50% 50%; animation:capsule-float-c 4.1s ease-in-out 1s infinite;}

.hero-badge.badge-mid{position:absolute; top:36%; left:-12%; right:auto; bottom:auto; max-width:200px;}
.hero-badge.badge-end{position:absolute; bottom:6%; right:-10%; left:auto; max-width:190px;}
.badge-row{display:contents;}

@media (prefers-reduced-motion: reduce){
  .float-a,.float-b,.float-c{animation:none;}
}

@keyframes reveal-up{from{opacity:0; transform:translateY(18px); filter:blur(6px);} to{opacity:1; transform:translateY(0); filter:blur(0);}}
@keyframes reveal-scale{from{opacity:0; transform:scale(0.94); filter:blur(8px);} to{opacity:1; transform:scale(1); filter:blur(0);}}
.reveal{opacity:0; animation:reveal-up 0.9s var(--ease) both;}
.reveal-scale{opacity:0; animation:reveal-scale 1.1s var(--ease) both;}
.delay-1{animation-delay:0.05s;} .delay-2{animation-delay:0.16s;} .delay-3{animation-delay:0.28s;} .delay-4{animation-delay:0.4s;} .delay-5{animation-delay:0.3s;} .delay-6{animation-delay:0.5s;}
.on-scroll{opacity:0; transform:translateY(28px); transition:opacity 0.8s var(--ease), transform 0.8s var(--ease);}
.on-scroll.is-visible{opacity:1; transform:translateY(0);}
.stagger-row > *:nth-child(2){transition-delay:0.09s;}
.stagger-row > *:nth-child(3){transition-delay:0.18s;}
.stagger-row > *:nth-child(4){transition-delay:0.27s;}
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-scale,.on-scroll{animation:none !important; opacity:1 !important; transform:none !important; filter:none !important; transition:none !important;}
  .root-line path{transition:none;}
  .promo-track{animation:none;}
}

/* ---------- trust strip ---------- */
.trust{background:var(--ink-2); border-bottom:1px solid rgba(201,143,107,0.15);}
.trust .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:22px 28px;}

.trust-cards{background:var(--ink); padding:56px 0;}
.tc-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.tc-card{background:var(--ink-2); border-radius:16px; padding:32px 28px; border:1px solid rgba(201,143,107,0.14);}
.tc-icon{width:44px; height:44px; color:var(--gold); margin-bottom:18px;}
.tc-card h3{font-family:var(--serif); font-weight:500; font-size:21px; color:var(--bone); margin-bottom:6px;}
.tc-card p{font-size:14.5px; color:var(--bone-dim);}
.trust-item{display:flex; align-items:center; gap:10px; color:var(--bone-dim); font-size:13px;}
.trust-item .dot{width:6px; height:6px; border-radius:50%; background:var(--gold); flex:none;}

/* ---------- section head ---------- */
.section-head{max-width:640px; margin-bottom:52px;}
.section-head .eyebrow{color:var(--oxblood); margin-bottom:12px; display:block;}
.section-head h2{font-family:var(--serif); font-weight:500; font-size:38px; letter-spacing:-0.01em;}
.section-head.on-dark h2{color:var(--bone);}
.section-head.on-dark .eyebrow{color:var(--gold);}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-foot{display:flex; justify-content:center; margin-top:44px;}

/* ---------- filters ---------- */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px;}
.filter-chip{font-family:var(--cond); font-size:12px; text-transform:uppercase; letter-spacing:0.06em; font-weight:600; padding:10px 18px; border-radius:100px; border:1px solid rgba(26,14,17,0.15); background:transparent; color:var(--ink); cursor:pointer; transition:all 0.25s var(--ease);}
.filter-chip:hover{border-color:var(--oxblood);}
.filter-chip.active{background:var(--ink); color:var(--bone); border-color:var(--ink);}

/* ---------- product grid ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 290px)); justify-content:center; gap:22px;}
.grid.grid-3{grid-template-columns:repeat(3,1fr);}
.card{background:#fff; border:1px solid rgba(26,14,17,0.08); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition:transform 0.4s var(--ease), box-shadow 0.4s var(--ease); position:relative;}
.card:hover{transform:translateY(-5px); box-shadow:0 18px 36px rgba(26,14,17,0.12);}
.card .shot{background:var(--bone); aspect-ratio:1/1; overflow:hidden; display:flex; align-items:center; justify-content:center; position:relative; padding:18px;}
.card .shot img{width:100%; height:100%; object-fit:contain; transition:transform 0.6s var(--ease);}
.card:hover .shot img{transform:scale(1.05);}
.card .quick-add{position:absolute; right:10px; bottom:10px; background:var(--ink); color:var(--bone); border:none; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transform:translateY(8px); transition:all 0.3s var(--ease); font-size:16px;}
.card:hover .quick-add{opacity:1; transform:translateY(0);}
.card .quick-add:hover{background:var(--oxblood);}
@media (hover: none){
  .card .quick-add{opacity:1; transform:none;}
}
.card .body{padding:16px 16px 18px; display:flex; flex-direction:column; gap:7px; flex:1;}
.card .tag{font-family:var(--cond); font-size:10px; text-transform:uppercase; letter-spacing:0.09em; color:var(--moss);}
.card h3{font-family:var(--serif); font-weight:500; font-size:18px;}
.card p.desc{color:#6B4F55; font-size:13px; flex:1;}
.card .foot{display:flex; align-items:center; justify-content:space-between; margin-top:4px; padding-top:12px; border-top:1px solid rgba(26,14,17,0.08);}
.price{font-family:var(--cond); font-weight:600; font-size:14px;}
.price.tbd{color:#A98F92; font-size:12px; font-weight:500; text-transform:none; letter-spacing:0; font-family:var(--sans);}
.mini-btn{font-family:var(--cond); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; font-weight:600; color:var(--oxblood); text-decoration:none; border-bottom:1px solid var(--oxblood); padding-bottom:2px; display:inline-block; transition:transform 0.25s var(--ease); background:none; border-top:none; border-left:none; border-right:none; cursor:pointer;}
.mini-btn:hover{transform:translateX(3px);}

/* ---------- cart drawer ---------- */
.cart-overlay{position:fixed; inset:0; background:rgba(26,14,17,0.5); z-index:70; opacity:0; pointer-events:none; transition:opacity 0.35s ease;}
.cart-overlay.open{opacity:1; pointer-events:auto;}
.cart-drawer{position:fixed; top:0; right:0; bottom:0; width:400px; max-width:92vw; background:var(--parchment); z-index:80; transform:translateX(100%); transition:transform 0.4s var(--ease); display:flex; flex-direction:column;}
.cart-drawer.open{transform:translateX(0);}
.cart-head{display:flex; justify-content:space-between; align-items:center; padding:22px 24px; border-bottom:1px solid rgba(26,14,17,0.1);}
.cart-head h3{font-family:var(--serif); font-size:22px;}
.cart-close{background:none; border:none; font-size:22px; cursor:pointer; color:var(--ink);}
.cart-items{flex:1; overflow-y:auto; padding:16px 24px;}
.cart-empty{color:#6B4F55; font-size:14px; padding:40px 0; text-align:center;}
.cart-line{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid rgba(26,14,17,0.08);}
.cart-line img{width:64px; height:64px; object-fit:cover; border-radius:10px; flex:none;}
.cart-line .info{flex:1;}
.cart-line h4{font-family:var(--serif); font-size:15px; font-weight:500;}
.cart-line .cart-price{font-size:13px; color:#6B4F55; margin-top:2px;}
.cart-line .qty-row{display:flex; align-items:center; gap:10px; margin-top:8px;}
.qty-btn{width:24px; height:24px; border-radius:50%; border:1px solid rgba(26,14,17,0.2); background:#fff; cursor:pointer; font-size:14px; line-height:1;}
.cart-remove{font-size:11px; color:var(--oxblood); text-decoration:underline; background:none; border:none; cursor:pointer; margin-left:auto;}
.cart-foot{padding:20px 24px; border-top:1px solid rgba(26,14,17,0.1);}
.cart-note{font-size:12px; color:#6B4F55; margin-bottom:14px;}
.cart-subtotal-row{display:flex; justify-content:space-between; align-items:center; font-family:var(--cond); font-size:16px; font-weight:600; color:var(--ink); margin-bottom:10px;}
.cart-continue{margin-top:10px; color:var(--ink); border-color:rgba(26,14,17,0.2);}
.cart-continue:hover{border-color:var(--oxblood); color:var(--oxblood);}

/* ---------- checkout modal ---------- */
.checkout-modal-overlay{position:fixed; inset:0; background:rgba(26,14,17,0.6); z-index:90; opacity:0; pointer-events:none; transition:opacity 0.3s ease;}
.checkout-modal-overlay.open{opacity:1; pointer-events:auto;}
.checkout-modal{position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.96); width:min(600px, 92vw); z-index:95; opacity:0; pointer-events:none; transition:opacity 0.3s var(--ease), transform 0.3s var(--ease);}
.checkout-modal.open{opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1);}
.cm-panel{background:var(--parchment); border-radius:20px; max-height:88vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 30px 80px rgba(26,14,17,0.35);}
.cm-head{display:flex; justify-content:space-between; align-items:center; padding:20px 26px; border-bottom:1px solid rgba(26,14,17,0.1); flex:none;}
.cm-head h3{font-family:var(--serif); font-size:21px;}
.cm-close{background:none; border:none; font-size:24px; line-height:1; cursor:pointer; color:var(--ink);}
.cm-body{overflow-y:auto; padding:20px 26px 28px;}
.cm-summary{margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid rgba(26,14,17,0.1);}
.cm-summary h4{font-family:var(--cond); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--moss); margin-bottom:10px;}
.cm-cart-line{display:flex; gap:12px; padding:8px 0; align-items:center;}
.cm-cart-line img{width:46px; height:46px; object-fit:cover; border-radius:8px; flex:none; background:var(--bone);}
.cm-cart-line .info{flex:1; font-size:13.5px; color:var(--ink); line-height:1.4;}
.cm-form select{width:100%; padding:13px 14px; border:1px solid rgba(26,14,17,0.15); border-radius:8px; font-family:var(--sans); font-size:14px; background:#fff; color:var(--ink);}
.cm-form textarea#cm-mpesa{min-height:64px;}


.product-detail{padding:36px 0 8px;}
.breadcrumb{font-size:13px; color:#6B4F55; margin-bottom:30px;}
.breadcrumb a{color:#6B4F55; text-decoration:none;}
.breadcrumb a:hover{color:var(--oxblood);}
.breadcrumb span{margin:0 6px; color:#C9A7A0;}
.pd-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
.pd-media{background:var(--bone); border-radius:20px; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:36px; overflow:hidden;}
.pd-media img{width:100%; height:100%; object-fit:contain;}
.pd-info .tag{font-family:var(--cond); font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--moss); display:block; margin-bottom:10px;}
.pd-info h1{font-family:var(--serif); font-weight:500; font-size:34px; margin-bottom:14px; line-height:1.1;}
.pd-info .price{font-family:var(--cond); font-weight:600; font-size:22px; display:block; margin-bottom:22px; color:var(--ink);}
.pd-info .price.tbd{font-family:var(--sans); font-size:16px; color:#A98F92; font-weight:500;}
.pd-longdesc{color:#6B4F55; font-size:15px; line-height:1.7; max-width:52ch; margin-bottom:28px;}
.pd-actions{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:32px;}
.pd-meta{border-top:1px solid rgba(26,14,17,0.1); padding-top:18px;}
.pd-meta-row{display:flex; justify-content:space-between; font-size:13.5px; padding:7px 0; color:#6B4F55;}
.pd-meta-row span:first-child{font-family:var(--cond); text-transform:uppercase; letter-spacing:0.06em; font-size:11px; color:#A98F92;}
.pd-loading, .pd-notfound{grid-column:1/-1; padding:60px 0; text-align:center; color:#6B4F55;}
.pd-notfound a{margin-top:16px; display:inline-block;}

/* ---------- checkout page ---------- */
.checkout-hero{padding:56px 0 8px;}
.checkout-hero h1{font-family:var(--serif); font-size:36px; font-weight:500;}
.checkout-section{padding:32px 0 100px;}
.checkout-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;}
.checkout-panel{background:#fff; border:1px solid rgba(26,14,17,0.08); border-radius:16px; padding:30px;}
.checkout-panel h2{font-family:var(--serif); font-size:21px; font-weight:500; margin-bottom:20px;}
.checkout-totals{margin-top:14px; padding-top:16px; border-top:1px solid rgba(26,14,17,0.1);}
.ct-row{display:flex; justify-content:space-between; font-size:14px; padding:6px 0; color:#6B4F55;}
.ct-total{font-family:var(--cond); font-weight:600; color:var(--ink); font-size:17px; border-top:1px solid rgba(26,14,17,0.1); margin-top:8px; padding-top:12px;}
.form-group{margin-bottom:18px;}
.form-group label{display:block; font-family:var(--cond); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:7px; color:#6B4F55;}
.form-group input, .form-group textarea{width:100%; padding:13px 14px; border:1px solid rgba(26,14,17,0.15); border-radius:8px; font-family:var(--sans); font-size:14px; background:#fff; color:var(--ink); transition:border-color 0.2s ease;}
.form-group input:focus, .form-group textarea:focus{outline:none; border-color:var(--oxblood);}
.form-group textarea{resize:vertical; min-height:76px;}
.form-error{display:none; color:var(--oxblood); font-size:13px; margin-bottom:14px;}
.payment-box{background:var(--bone); border-radius:12px; padding:20px 22px; margin:22px 0;}
.payment-box h3{font-family:var(--cond); font-size:12px; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:12px; color:var(--moss);}
.payment-box .pb-row{display:flex; justify-content:space-between; align-items:baseline; padding:5px 0;}
.payment-box .pb-label{color:#6B4F55; text-transform:uppercase; font-size:11px; letter-spacing:0.06em; font-family:var(--cond);}
.payment-box .pb-value{font-family:var(--cond); font-weight:600; font-size:16px; color:var(--ink);}
.payment-box p{font-size:12.5px; color:#6B4F55; margin-top:10px; line-height:1.5;}

@media (max-width: 860px){
  .checkout-grid{grid-template-columns:1fr;}
  .checkout-modal{width:94vw;}
  .cm-head{padding:16px 20px;}
  .cm-body{padding:16px 20px 22px;}
  .pd-grid{grid-template-columns:1fr; gap:26px;}
  .pd-media{padding:24px;}
  .pd-info h1{font-size:26px;}
  .pd-actions{flex-direction:column; align-items:stretch;}
  .pd-actions .btn{width:100%; justify-content:center;}
  .checkout-panel{padding:22px;}
  .checkout-hero h1{font-size:28px;}
  .checkout-hero{padding:40px 0 8px;}
}

/* ---------- why / value strip ---------- */
.why{background:var(--ink); color:var(--bone); padding:96px 0; position:relative;}
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:36px;}
.why-item{border-top:1px solid rgba(201,143,107,0.35); padding-top:20px;}
.why-item .num{font-family:var(--cond); color:var(--gold); font-size:13px; letter-spacing:0.1em;}
.why-item h3{font-family:var(--serif); font-weight:500; font-size:21px; margin:12px 0 10px;}
.why-item p{color:var(--bone-dim); font-size:14px;}

/* ---------- full-bleed story block ---------- */
.story{padding:100px 0;}
.story .wrap{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.story-media{border-radius:20px; overflow:hidden; aspect-ratio:1/1;}
.story-media img{width:100%; height:100%; object-fit:cover;}
.story-copy h2{font-family:var(--serif); font-size:34px; font-weight:500; margin-bottom:18px; letter-spacing:-0.01em;}
.story-copy p{color:#6B4F55; font-size:15px; max-width:48ch; margin-bottom:16px;}
.story.reverse .wrap{grid-template-columns:1fr 1fr;}
.story.reverse .story-media{order:2;}

/* ---------- blog ---------- */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.blog-card{background:#fff; border-radius:16px; overflow:hidden; border:1px solid rgba(26,14,17,0.08); transition:transform 0.4s var(--ease), box-shadow 0.4s var(--ease);}
.blog-card:hover{transform:translateY(-6px); box-shadow:0 24px 48px rgba(26,14,17,0.14);}
.blog-card .shot{aspect-ratio:4/3; background:var(--bone); overflow:hidden;}
.blog-card .shot img{width:100%; height:100%; object-fit:cover; transition:transform 0.6s var(--ease);}
.blog-card:hover .shot img{transform:scale(1.06);}
.blog-card .body{padding:22px;}
.blog-card .tag{font-family:var(--cond); font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--oxblood);}
.blog-card h3{font-family:var(--serif); font-size:20px; font-weight:500; margin:10px 0 8px;}
.blog-card p{color:#6B4F55; font-size:14px;}
.blog-card .meta{margin-top:14px; font-size:12px; color:#A98F92;}
.blog-hero{background:var(--ink); color:var(--bone); padding:80px 0 64px;}
.blog-hero .wrap{max-width:760px;}
.blog-hero h1{font-family:var(--serif); font-size:48px; font-weight:500;}
.blog-hero p{color:var(--bone-dim); margin-top:18px; font-size:16px; max-width:56ch;}
.notice-card{grid-column:1/-1; background:#fff; border:1px dashed rgba(26,14,17,0.25); border-radius:16px; padding:28px; text-align:center; color:#6B4F55; font-size:14px;}

/* ---------- faq ---------- */
.faq{padding:96px 0;}
.faq-list{max-width:720px;}
.faq-item{border-bottom:1px solid rgba(26,14,17,0.12);}
.faq-q{width:100%; text-align:left; background:none; border:none; padding:20px 0; display:flex; justify-content:space-between; align-items:center; font-family:var(--serif); font-size:17px; cursor:pointer; color:var(--ink);}
.faq-q .icon{font-family:var(--cond); color:var(--gold); font-size:20px; transition:transform 0.2s ease;}
.faq-item.open .faq-q .icon{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height 0.25s ease;}
.faq-a p{padding-bottom:20px; color:#6B4F55; font-size:14px; max-width:60ch;}

/* ---------- footer ---------- */
footer{background:var(--ink-2); color:var(--bone-dim); padding:64px 0 28px; border-top:1px solid rgba(201,143,107,0.2);}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:36px;}
.foot-grid .wordmark{margin-bottom:12px; display:inline-block;}
.foot-grid p{font-size:13px; max-width:36ch;}
.foot-col h4{font-family:var(--cond); text-transform:uppercase; letter-spacing:0.08em; font-size:12px; color:var(--bone); margin-bottom:14px;}
.foot-col a{display:block; font-size:13px; color:var(--bone-dim); text-decoration:none; margin-bottom:10px;}
.foot-col a:hover{color:var(--gold);}
.disclaimer{border-top:1px solid rgba(243,223,217,0.12); padding-top:20px; font-size:12px; color:var(--bone-dim); opacity:0.8; max-width:74ch;}

/* ---------- floating whatsapp ---------- */
.float-wa{position:fixed; right:20px; bottom:20px; z-index:40; background:#25D366; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; text-decoration:none; box-shadow:0 8px 22px rgba(37,211,102,0.45); transition:transform 0.25s var(--ease);}
.float-wa:hover{transform:scale(1.06);}
.float-wa svg{width:29px; height:29px; position:relative; z-index:1;}
.float-wa-ring{position:absolute; inset:0; border-radius:50%; background:#25D366; opacity:0.55; animation:wa-pulse 2.4s ease-out infinite;}
@keyframes wa-pulse{0%{transform:scale(1); opacity:0.55;} 100%{transform:scale(1.9); opacity:0;}}
@media (prefers-reduced-motion: reduce){
  .float-wa-ring{animation:none; display:none;}
}

@media (max-width: 980px){
  .story .wrap{grid-template-columns:1fr;}
  .story-media{order:-1 !important;}
  .grid.grid-3{grid-template-columns:repeat(2,1fr);}
  .blog-grid{grid-template-columns:repeat(2,1fr);}
  .organic-h1 .line-1{font-size:80px;}
  .organic-h1 .line-2{font-size:54px;}
}
@media (max-width: 860px){
  nav.main-nav{display:none;}
  .menu-toggle{display:flex;}
  .header-actions{gap:10px;}
  .header-actions > a.btn{display:none;}
  .topbar{padding:14px 20px;}
  .hero .wrap{grid-template-columns:1fr; padding-top:44px; padding-bottom:52px;}
  .hero h1{font-size:38px;}
  .hero-badge{position:static; margin-top:16px; max-width:none;}
  .hero-organic-grid{grid-template-columns:1fr; padding-top:40px; padding-bottom:48px; text-align:center;}
  .hero-organic-copy .hero-ctas{justify-content:center;}
  .hero-organic-copy .hero-ctas .btn-lg{width:100%; justify-content:center;}
  .hero-trust{justify-content:center;}
  .organic-h1 .line-1{font-size:72px;}
  .organic-h1 .line-2{font-size:42px;}

  /* reflow the hero so the bottle sits between the headline and the paragraph,
     shrunk down, instead of in its own block after all the copy */
  .hero-organic-copy, .hero-organic-art{display:contents;}
  .hero-organic-copy > .eyebrow{order:1;}
  .organic-h1{order:2;}
  .bottle-stage{order:3; width:min(160px, 44%); margin:8px auto 2px;}
  .badge-row{order:4; display:flex !important; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:6px;}
  .badge-row .hero-badge{position:static; margin-top:0; padding:9px 14px; max-width:150px; border-radius:12px;}
  .badge-row .hero-badge .num{font-size:17px;}
  .badge-row .hero-badge .label{font-size:9.5px; line-height:1.25;}
  .hero-organic-copy > .lede{order:5;}
  .hero-organic-copy > .hero-ctas{order:6;}
  .hero-organic-copy > .hero-trust{order:7;}

  .trust .wrap{grid-template-columns:repeat(2,1fr);}
  .grid, .grid.grid-3{grid-template-columns:1fr;}
  .blog-grid{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr; gap:26px;}
  .foot-grid{grid-template-columns:1fr 1fr; gap:28px;}
  .foot-grid > div:first-child{grid-column:1 / -1;}
  .section-head h2{font-size:29px;}
  .story-copy h2{font-size:27px;}
  .blog-hero{padding:56px 0 44px;}
  .blog-hero h1{font-size:32px;}
}

@media (max-width: 480px){
  .wrap{padding:0 18px;}
  .trust .wrap{grid-template-columns:1fr; gap:10px;}
  .tc-grid{grid-template-columns:1fr; gap:14px;}
  .tc-card{padding:26px 22px;}
  .organic-h1 .line-1{font-size:60px;}
  .organic-h1 .line-2{font-size:36px;}
  .hero-organic-copy .lede{font-size:15px;}
  .btn-lg{padding:15px 26px; font-size:13px;}
  .bottle-stage{width:min(140px, 46%);}
  .badge-row .hero-badge{max-width:130px; padding:8px 12px;}
  .foot-grid{grid-template-columns:1fr;}
  .foot-grid > div:first-child{grid-column:auto;}
  .pd-info h1{font-size:22px;}
  .pd-media{padding:18px;}
}