/* THE DOORMANS — site stylesheet. Colors/fonts come from CSS vars printed
   by partials/theme-vars.php — this file never hardcodes brand color. */
:root{
  --sage-soft:#DCEEDD;
  --cream-2:#EAE8D8;
  --gold:#C7A24A;
  --ink:#16241A;
  --font-display:'Fraunces', serif;
  --font-body:'Space Grotesk', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden; max-width:100%;}
body{font-family:var(--font-body); background:var(--light); color:var(--ink); line-height:1.5; overflow-x:hidden;}
h1,h2,h3,.display{font-family:var(--font-display);}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
img{max-width:100%; display:block;}
video{max-width:100%; display:block;}
input,select,textarea{font-family:inherit;}

/* ---------- Ticker ---------- */
.ticker-bar{background:var(--dark); color:var(--light); overflow:hidden; white-space:nowrap; font-size:.76rem; letter-spacing:.04em; padding:7px 0; position:relative; z-index:50;}
.ticker-track{display:inline-block; padding-left:100%; animation:scrollTicker 26s linear infinite;}
@keyframes scrollTicker{0%{transform:translateX(0);} 100%{transform:translateX(-100%);}}
.ticker-track span{margin-right:3.5rem; color:var(--gold);}

/* ---------- Header / nav ---------- */
header{position:sticky; top:0; z-index:40; background:rgba(244,247,238,.94); backdrop-filter:blur(8px); border-bottom:1px solid rgba(18,43,27,.08);}
.nav-wrap{max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 20px;}
.logo{display:flex; align-items:center; gap:9px; font-size:1.15rem; font-weight:600; flex-shrink:0; white-space:nowrap;}
.logo svg{width:28px; height:28px;}
.logo-img{height:36px; width:auto; max-width:120px; object-fit:contain;}
nav#nav-menu{
  display:flex; align-items:center; gap:18px; font-size:.86rem;
  overflow-x:auto; white-space:nowrap; scrollbar-width:none; -ms-overflow-style:none;
}
nav#nav-menu::-webkit-scrollbar{display:none;}
nav a{opacity:.75; transition:opacity .2s; flex-shrink:0;}
nav a:hover, nav a.active{opacity:1; color:var(--primary-dark);}
.cart-link{display:flex; align-items:center; gap:6px;}
.cart-badge{background:var(--accent); color:var(--light); font-size:.68rem; min-width:18px; height:18px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; padding:0 4px;}

@media (max-width:640px){
  .nav-wrap{padding:10px 14px; gap:10px;}
  .logo span{display:none;} /* icon/logo image only on very narrow phones — keeps the row on one line */
  .logo-img{height:32px;}
  nav#nav-menu{gap:12px; font-size:.78rem;}
}

/* ---------- Hero ---------- */
.hero{position:relative; padding:60px 24px 36px; max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.05fr .95fr; gap:36px; align-items:center;}
.hero-eyebrow{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:14px; display:flex; align-items:center; gap:8px;}
.hero-eyebrow::before{content:''; width:22px; height:1px; background:var(--accent);}
.hero h1{font-size:clamp(2.1rem,5vw,3.4rem); font-weight:500; line-height:1.06; letter-spacing:-.01em; color:var(--primary-dark); margin-bottom:18px;}
.hero h1 em{font-style:italic; color:var(--accent);}
.hero p.lede{font-size:1rem; color:#3d4a3f; max-width:46ch; margin-bottom:8px;}
.proverb-line{font-family:var(--font-display); font-style:italic; font-size:.98rem; color:var(--primary-dark); margin:16px 0 6px; opacity:.85;}
.disclaimer-note{font-size:.72rem; color:#6b7a6d; max-width:40ch; margin-bottom:24px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
.btn-primary{background:var(--accent); color:var(--light); padding:15px 28px; border-radius:999px; font-weight:600; font-size:.92rem; display:inline-flex; align-items:center; gap:8px; box-shadow:0 0 0 0 rgba(179,69,47,.5); animation:pulseGlow 2.4s ease-in-out infinite;}
@keyframes pulseGlow{0%{box-shadow:0 0 0 0 rgba(179,69,47,.45);} 70%{box-shadow:0 0 0 16px rgba(179,69,47,0);} 100%{box-shadow:0 0 0 0 rgba(179,69,47,0);}}
.btn-ghost{padding:15px 22px; border-radius:999px; font-weight:500; font-size:.88rem; border:1px solid var(--primary-dark); color:var(--primary-dark);}
.hero-art{position:relative; height:400px;}
.hero-art svg{width:100%; height:100%;}
.leaf-drift{animation:drift 7s ease-in-out infinite;}
@keyframes drift{0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-14px) rotate(3deg);}}

/* ---------- Ad space ---------- */
.ad-space{max-width:1180px; margin:0 auto 10px; padding:0 24px;}
.ad-track{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px;}
.ad-track::-webkit-scrollbar{height:6px;}
.ad-card{scroll-snap-align:start; flex:0 0 min(560px,88vw); background:var(--dark); border-radius:var(--radius); overflow:hidden; position:relative; color:var(--light);}
.ad-card video, .ad-card img{width:100%; height:220px; object-fit:cover; display:block;}
.ad-caption{position:absolute; left:0; right:0; bottom:0; padding:16px 18px; background:linear-gradient(to top, rgba(0,0,0,.65), transparent); font-size:.88rem;}
.ad-banner-text{background:var(--primary); color:var(--light); border-radius:var(--radius); padding:22px 26px; font-family:var(--font-display); font-style:italic; font-size:1.1rem; height:220px; display:flex; align-items:center;}

/* ---------- Products ---------- */
.section-label{max-width:1180px; margin:56px auto 6px; padding:0 24px; font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--accent); font-weight:600;}
.section-title{max-width:1180px; margin:0 auto 30px; padding:0 24px; font-size:1.8rem; color:var(--primary-dark);}
.products{max-width:1180px; margin:0 auto; padding:0 24px 20px; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px;}
.product-card{background:var(--dark); color:var(--light); border-radius:24px; padding:0; position:relative; overflow:hidden; display:flex; flex-direction:column; min-height:440px;}
.product-media{height:200px; width:100%; overflow:hidden; position:relative; background:var(--primary-dark);}
.product-media img, .product-media video{width:100%; height:100%; object-fit:cover;}
.product-media .khat-fallback{width:100%; height:100%; display:flex; align-items:center; justify-content:center;}
.product-body{padding:26px; display:flex; flex-direction:column; flex:1;}
.product-tag{font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:10px;}
.product-card h3{font-size:1.5rem; font-weight:500; margin-bottom:8px;}
.product-card .desc{font-size:.88rem; opacity:.78; max-width:34ch; margin-bottom:auto;}
.stock-flag{display:inline-block; font-size:.68rem; padding:4px 10px; border-radius:999px; margin-bottom:10px; width:fit-content;}
.stock-flag.low{background:#5a4a1a; color:#f0d98a;}
.stock-flag.out{background:#5a1a1a; color:#f0a8a8;}
.product-bottom{display:flex; align-items:flex-end; justify-content:space-between; margin-top:22px;}
.price{font-family:var(--font-display); font-size:1.6rem;}
.price span{font-size:.82rem; opacity:.65; font-family:var(--font-body);}
.buy-btn{background:var(--accent); color:var(--light); padding:12px 20px; border-radius:999px; font-weight:600; font-size:.86rem; animation:pulseGlow 2.2s ease-in-out infinite;}
.buy-btn:disabled{animation:none; opacity:.5; cursor:not-allowed;}

/* ---------- Bulk pre-order ---------- */
.bulk-section{max-width:1180px; margin:64px auto; padding:0 24px;}
.bulk-card{background:var(--sage-soft); border-radius:26px; padding:38px; display:grid; grid-template-columns:.9fr 1.1fr; gap:32px;}
.bulk-card h2{color:var(--primary-dark); font-size:1.6rem; margin-bottom:10px; font-weight:500;}
.bulk-card p{font-size:.9rem; color:#374a3a; max-width:40ch;}
.bulk-badge{display:inline-block; background:var(--primary-dark); color:var(--light); font-size:.7rem; padding:5px 12px; border-radius:999px; margin-top:14px; letter-spacing:.05em;}
form.bulk-form{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
form.bulk-form .full{grid-column:1/-1;}
form.bulk-form input, form.bulk-form select, form.bulk-form textarea{width:100%; padding:12px 14px; border-radius:10px; border:1px solid #b9c8b3; background:#fff; font-size:.86rem;}
form.bulk-form label{font-size:.74rem; color:#465a48; margin-bottom:5px; display:block; font-weight:500;}
.bulk-submit{grid-column:1/-1; background:var(--accent); color:var(--light); padding:14px; border-radius:12px; font-weight:600; margin-top:4px;}

/* ---------- About page ---------- */
.about-hero{max-width:820px; margin:60px auto 18px; padding:0 24px;}
.about-hero h1{font-size:2.2rem; color:var(--primary-dark); margin-bottom:16px;}
.about-content{max-width:820px; margin:0 auto; padding:0 24px 80px; font-size:1rem; color:#33402f;}
.about-content p{margin-bottom:16px; white-space:pre-wrap;}

/* ---------- Cart page ---------- */
.cart-wrap{max-width:900px; margin:50px auto 90px; padding:0 24px;}
.cart-wrap h1{color:var(--primary-dark); font-size:1.9rem; margin-bottom:28px;}
.cart-row{display:grid; grid-template-columns:64px 1fr auto auto; gap:16px; align-items:center; padding:16px 0; border-bottom:1px solid rgba(18,43,27,.1);}
.cart-row img{width:64px; height:64px; object-fit:cover; border-radius:10px; background:var(--sage-soft);}
.cart-row .name{font-weight:600;}
.cart-row .price{font-size:.85rem; opacity:.7; font-family:var(--font-body);}
.qty-stepper{display:flex; align-items:center; gap:10px;}
.qty-stepper button{width:30px; height:30px; border-radius:50%; background:var(--sage-soft); color:var(--primary-dark); font-weight:700;}
.remove-link{font-size:.78rem; color:var(--accent); margin-left:14px;}
.cart-empty{text-align:center; padding:60px 20px; color:#5a6a5c;}
.cart-summary{margin-top:26px; display:flex; justify-content:space-between; align-items:center; font-size:1.2rem; font-weight:600; color:var(--primary-dark);}
.checkout-form{margin-top:30px; background:var(--sage-soft); border-radius:20px; padding:28px; display:grid; gap:14px;}
.checkout-form label{font-size:.76rem; font-weight:600; color:#465a48;}
.checkout-form input, .checkout-form textarea{width:100%; padding:12px 14px; border-radius:10px; border:1px solid #b9c8b3; font-size:.88rem;}
.location-btn{display:inline-flex; align-items:center; gap:6px; font-size:.8rem; background:var(--primary); color:var(--light); padding:9px 16px; border-radius:999px; width:fit-content;}
.checkout-submit{background:var(--accent); color:var(--light); padding:15px; border-radius:12px; font-weight:600; font-size:.95rem; animation:pulseGlow 2.2s ease-in-out infinite;}

/* ---------- Track order ---------- */
.track-wrap{max-width:700px; margin:60px auto 90px; padding:0 24px;}
.track-wrap h1{color:var(--primary-dark); font-size:1.9rem; margin-bottom:10px;}
.track-form{display:flex; gap:10px; margin:26px 0; flex-wrap:wrap;}
.track-form input{flex:1; min-width:200px; padding:13px 16px; border-radius:10px; border:1px solid #b9c8b3; font-size:.9rem;}
.track-form button{background:var(--primary); color:var(--light); padding:13px 22px; border-radius:10px; font-weight:600;}
.timeline{margin-top:30px; border-left:2px solid var(--sage-soft); padding-left:24px; display:grid; gap:26px;}
.timeline-step{position:relative;}
.timeline-step::before{content:''; position:absolute; left:-31px; top:2px; width:14px; height:14px; border-radius:50%; background:var(--sage-soft); border:2px solid var(--light);}
.timeline-step.done::before{background:var(--primary);}
.timeline-step.just-ticked::before{animation:tickPulse 1.2s ease-out;}
@keyframes tickPulse{
  0%{box-shadow:0 0 0 0 rgba(46,158,82,.6); transform:scale(1);}
  50%{transform:scale(1.3);}
  100%{box-shadow:0 0 0 14px rgba(46,158,82,0); transform:scale(1);}
}
.timeline-step .t-status{font-weight:600; text-transform:capitalize; color:var(--primary-dark);}
.timeline-step .t-time{font-size:.78rem; opacity:.6;}
.order-summary-box{background:var(--sage-soft); border-radius:16px; padding:22px; margin-top:20px;}
.order-summary-box .row{display:flex; justify-content:space-between; font-size:.9rem; padding:6px 0;}

/* ---------- Buy Modal ---------- */
.modal-overlay{position:fixed; inset:0; background:rgba(18,43,27,.6); z-index:80; display:none; align-items:center; justify-content:center; padding:20px;}
.modal-overlay.open{display:flex;}
.modal-box{background:var(--light); border-radius:20px; padding:30px; max-width:400px; width:100%;}
.modal-box h3{color:var(--primary-dark); font-size:1.25rem; margin-bottom:4px;}
.modal-box .sub{font-size:.84rem; color:#5a6a5c; margin-bottom:18px;}
.qty-row{display:flex; align-items:center; gap:16px; margin-bottom:20px;}
.qty-btn{width:38px; height:38px; border-radius:50%; background:var(--sage-soft); color:var(--primary-dark); font-size:1.05rem; display:flex; align-items:center; justify-content:center; font-weight:600;}
.qty-val{font-size:1.15rem; font-weight:600; min-width:24px; text-align:center;}
.modal-total{font-size:.98rem; margin-bottom:20px; color:var(--primary-dark); font-weight:600;}
.modal-go{width:100%; background:var(--accent); color:var(--light); padding:14px; border-radius:12px; font-weight:600; font-size:.92rem;}
.modal-cancel{width:100%; text-align:center; margin-top:12px; font-size:.8rem; color:#5a6a5c;}

/* ---------- WhatsApp transition ---------- */
.wa-overlay{position:fixed; inset:0; background:var(--dark); z-index:100; display:none; align-items:center; justify-content:center; flex-direction:column; color:var(--light); text-align:center; padding:16px; overflow-y:auto;}
.wa-overlay.open{display:flex;}
.glass{width:clamp(110px, 26vh, 170px); height:clamp(158px, 37vh, 244px); border:3px solid var(--light); border-radius:10px 10px 24px 24px; position:relative; overflow:hidden; margin-bottom:clamp(14px, 3.5vh, 28px); box-shadow:0 0 50px rgba(255,255,255,.08); flex-shrink:0;}
.glass-fill{position:absolute; bottom:0; left:0; right:0; height:0%; background:linear-gradient(180deg, var(--accent), var(--primary-dark)); animation:pourFill 2.2s ease-in-out forwards;}
@keyframes pourFill{0%{height:0%;} 100%{height:92%;}}
.wa-overlay p{font-family:var(--font-display); font-style:italic; font-size:clamp(1rem, 3.6vh, 1.4rem); opacity:.95; padding:0 10px; text-align:center; color:var(--light); margin:0;}
.wa-overlay .small{font-family:var(--font-body); font-style:normal; font-size:.8rem; opacity:.6; margin-top:8px; color:var(--light);}
.wa-continue-btn{
  margin-top:clamp(14px, 3vh, 26px); background:var(--gold); color:#1A1400;
  padding:clamp(14px, 2.4vh, 19px) 20px; width:min(340px, 88vw); border-radius:999px;
  font-weight:800; font-size:clamp(.95rem, 2.6vh, 1.1rem);
  display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 6px 24px rgba(0,0,0,.35); flex-shrink:0;
}

/* ---------- Footer ---------- */
footer{background:var(--dark); color:var(--light); margin-top:50px; padding:46px 24px 26px;}
.footer-inner{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:32px;}
footer h4{font-family:var(--font-display); font-size:1.15rem; margin-bottom:10px;}
footer p{font-size:.84rem; opacity:.75; max-width:34ch;}
footer .col a{display:block; font-size:.84rem; opacity:.8; margin-bottom:8px;}
.footer-bottom{max-width:1180px; margin:30px auto 0; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); font-size:.7rem; opacity:.55;}

@media (max-width:860px){
  .hero{grid-template-columns:1fr; padding-top:34px;}
  .hero-art{height:240px; order:-1;}
  .products{grid-template-columns:1fr;}
  .bulk-card{grid-template-columns:1fr;}
  form.bulk-form{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr;}
  .cart-row{grid-template-columns:50px 1fr; row-gap:8px;}
  .cart-row .qty-stepper{grid-column:1/-1;}
}