/* Coelli's Deli — reusable section components */

/* ---------- VIDEO HERO (home) ---------- */
.hero{position:relative; height:92vh; min-height:560px; overflow:hidden;}
.hero video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,15,8,0.15) 0%, rgba(20,15,8,0.15) 45%, rgba(20,15,8,0.75) 100%);
}
.hero-content{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:0 32px 64px; color:var(--band-ink);}
.hero-eyebrow{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--band-ink-soft); margin-bottom:18px; display:flex; gap:18px; flex-wrap:wrap;
}
.hero h1{font-size:clamp(2.6rem,6vw,4.6rem); line-height:1.02; max-width:16ch; color:var(--band-ink);}
.hero p.lede{font-family:var(--font-display); font-size:clamp(1.05rem,2vw,1.3rem); color:var(--band-ink-soft); max-width:46ch; margin-top:18px;}
.hero-actions{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}

/* ---------- PROVENANCE / PULL QUOTE ---------- */
.provenance{background:var(--surface); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);}
.provenance-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
@media (max-width:900px){ .provenance-grid{grid-template-columns:1fr; gap:36px;} }
blockquote{font-family:var(--font-display); font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.35; margin:0; color:var(--ink); font-weight:500;}
blockquote::before{content:"\201C"; color:var(--gold); font-size:1.3em;}
.provenance-facts{display:flex; flex-direction:column; gap:22px; margin-top:32px;}
.fact{display:flex; gap:16px; align-items:baseline;}
.fact .n{font-family:var(--font-mono); color:var(--gold); font-size:13px; min-width:2.4em;}
.fact .t{font-size:0.98rem; color:var(--ink-soft);}
.fact .t strong{color:var(--ink); font-weight:600;}

/* ---------- ESTATES ---------- */
.estates-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line);}
@media (max-width:900px){ .estates-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .estates-grid{grid-template-columns:1fr;} }
.estate-card{background:var(--surface); padding:40px 32px; position:relative; min-height:280px; display:flex; flex-direction:column; justify-content:flex-end;}
.estate-card .num{font-family:var(--font-mono); font-size:12px; color:var(--gold); position:absolute; top:28px; left:32px;}
.estate-card h3{font-size:1.5rem; margin-bottom:8px;}
.estate-card .region{font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--olive); margin-bottom:14px;}
.estate-card p{color:var(--ink-soft); font-size:0.92rem; line-height:1.55;}
.estate-card a.more{margin-top:14px; font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--gold); text-decoration:none; font-weight:600;}

/* ---------- ESTATE PROFILE (estates.html, full detail) ---------- */
.estate-profile{display:grid; grid-template-columns:280px 1fr; gap:48px; padding:56px 0; border-top:1px solid var(--line-soft);}
.estate-profile:first-of-type{border-top:none;}
@media (max-width:760px){ .estate-profile{grid-template-columns:1fr; gap:20px;} }
.estate-profile .glyph{
  width:100%; aspect-ratio:4/3; background:var(--surface-2); border:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:14px;
  color:var(--ink-soft); text-align:center; padding:16px; overflow:hidden;
}
.estate-profile .glyph img{width:100%; height:100%; object-fit:cover; display:block;}
.estate-profile .num{font-family:var(--font-mono); font-size:12px; color:var(--gold); display:block; margin-bottom:10px;}
.estate-profile h2{font-size:1.9rem; margin-bottom:6px;}
.estate-profile .region{font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--olive); margin-bottom:18px;}
.estate-profile p{color:var(--ink-soft); font-size:0.98rem; line-height:1.65; max-width:60ch;}
.estate-profile p + p{margin-top:14px;}
.estate-stats{display:flex; gap:28px; margin-top:22px; flex-wrap:wrap;}
.estate-stats div{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft);}
.estate-stats strong{display:block; color:var(--ink); font-size:0.95rem; font-family:var(--font-body); font-weight:600; margin-bottom:2px;}

/* ---------- JOURNEY ---------- */
.journey{background:var(--band-bg); color:var(--band-ink);}
.journey .eyebrow{color:var(--band-gold);}
.journey .section-head h2{color:var(--band-ink);}
.journey .section-head p{color:var(--band-ink-soft);}
.journey-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:32px;}
@media (max-width:900px){ .journey-steps{grid-template-columns:repeat(2,1fr); gap:40px;} }
@media (max-width:560px){ .journey-steps{grid-template-columns:1fr;} }
.step{border-top:2px solid var(--band-gold); padding-top:20px;}
.step .n{font-family:var(--font-mono); color:var(--band-gold); font-size:13px;}
.step h3{font-size:1.15rem; margin:10px 0 10px; color:var(--band-ink);}
.step p{color:var(--band-ink-soft); font-size:0.9rem; line-height:1.6;}

/* ---------- PRODUCTS ---------- */
.products-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:36px;}
@media (max-width:1000px){ .products-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .products-grid{grid-template-columns:1fr;} }
.product-card{border:1px solid var(--line-soft); background:var(--surface); padding:0; display:flex; flex-direction:column;}
.product-shot{aspect-ratio:4/5; background:linear-gradient(180deg, var(--surface-2), var(--surface)); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;}
.product-shot img{width:100%; height:100%; object-fit:cover; display:block;}
.bottle{width:64px; height:170px; position:relative;}
.bottle::before{content:""; position:absolute; inset:0; border-radius:6px 6px 3px 3px; background:linear-gradient(180deg, var(--olive-dim), var(--olive)); box-shadow:inset -8px 0 16px rgba(0,0,0,0.18), 0 12px 24px rgba(0,0,0,0.18);}
.bottle::after{content:""; position:absolute; top:-22px; left:50%; transform:translateX(-50%); width:14px; height:28px; background:var(--ink-soft); border-radius:2px 2px 0 0;}
.product-label{position:absolute; bottom:36px; left:50%; transform:translateX(-50%); background:var(--paper); color:var(--ink); font-family:var(--font-mono); font-size:9.5px; padding:5px 8px; text-align:center; letter-spacing:0.04em; width:52px;}
.product-info{padding:24px 24px 28px; display:flex; flex-direction:column; flex:1;}
.product-info .region{font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--olive);}
.product-info h3{font-size:1.25rem; margin:8px 0 6px;}
.product-info .desc{color:var(--ink-soft); font-size:0.88rem; margin-bottom:16px; flex:1;}
.product-info .price-row{display:flex; justify-content:space-between; align-items:center;}
.product-info .price{font-family:var(--font-mono); font-size:1.05rem; font-weight:600;}
.product-info .crush{font-family:var(--font-mono); font-size:10.5px; color:var(--ink-soft);}
.product-card .btn{margin-top:16px; width:100%; text-align:center;}

/* ---------- GUARANTEE ---------- */
.guarantee{background:var(--surface-2);}
.guarantee-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:48px;}
@media (max-width:800px){ .guarantee-grid{grid-template-columns:1fr; gap:36px;} }
.guarantee-item .mark{width:44px; height:44px; border:1.5px solid var(--olive); border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:20px; font-family:var(--font-display); font-size:20px; color:var(--olive);}
.guarantee-item h3{font-size:1.2rem; margin-bottom:10px;}
.guarantee-item p{color:var(--ink-soft); font-size:0.92rem; line-height:1.6;}

/* ---------- SIGNUP ---------- */
.signup{background:var(--band-bg); color:var(--band-ink); text-align:center; padding:130px 0;}
.signup .eyebrow{color:var(--band-gold); justify-content:center; display:flex;}
.signup h2{font-size:clamp(2rem,4vw,3rem); max-width:16ch; margin:0 auto; color:var(--band-ink);}
.signup p{color:var(--band-ink-soft); max-width:48ch; margin:20px auto 40px; font-size:1.05rem;}
.signup-form{display:flex; gap:10px; max-width:440px; margin:0 auto; flex-wrap:wrap; justify-content:center;}
.signup-form input{flex:1; min-width:220px; padding:15px 18px; border:1.5px solid var(--band-line); background:transparent; color:var(--band-ink); font-family:var(--font-body); font-size:14px; border-radius:2px;}
.signup-form input::placeholder{color:var(--band-ink-soft);}
.signup-note{font-size:11.5px; color:var(--band-ink-soft); margin-top:18px;}

/* ---------- STORY CHAPTERS (our-story.html) ---------- */
.story-hero{position:relative; min-height:70vh; display:flex; align-items:flex-end; overflow:hidden; background:var(--band-bg);}
.story-hero .texture{position:absolute; inset:0; background:radial-gradient(ellipse at 30% 20%, rgba(184,134,43,0.18), transparent 60%);}
.story-hero-content{position:relative; z-index:2; padding:80px 0 64px; color:var(--band-ink);}
.story-hero .eyebrow{color:var(--band-gold);}
.story-hero h1{font-size:clamp(2.4rem,5.5vw,4rem); max-width:16ch; color:var(--band-ink);}
.story-hero p{font-family:var(--font-display); font-size:clamp(1.1rem,2vw,1.35rem); color:var(--band-ink-soft); max-width:48ch; margin-top:18px;}

.chapter{padding:96px 0; border-bottom:1px solid var(--line-soft);}
.chapter:last-of-type{border-bottom:none;}
@media (max-width:640px){ .chapter{padding:64px 0;} }
.chapter-inner{display:grid; grid-template-columns:120px 1fr; gap:48px;}
@media (max-width:760px){ .chapter-inner{grid-template-columns:1fr; gap:20px;} }
.chapter-num{font-family:var(--font-mono); font-size:13px; color:var(--gold); letter-spacing:0.1em;}
.chapter-body{max-width:64ch;}
.chapter-body h2{font-size:clamp(1.6rem,3vw,2.3rem); margin-bottom:22px;}
.chapter-body p{color:var(--ink-soft); font-size:1.05rem; line-height:1.75;}
.chapter-body p + p{margin-top:18px;}
.chapter-body p strong{color:var(--ink); font-weight:600;}
.chapter.dark{background:var(--band-bg); color:var(--band-ink); border-bottom:none;}
.chapter.dark .chapter-body p{color:var(--band-ink-soft);}
.chapter.dark .chapter-body p strong{color:var(--band-ink);}
.chapter.dark .chapter-num{color:var(--band-gold);}
.chapter.dark blockquote{color:var(--band-ink);}
.chapter.dark blockquote::before{color:var(--band-gold);}

.story-cta{text-align:center; padding:100px 0;}
.story-cta h2{font-size:clamp(1.9rem,3.5vw,2.6rem); max-width:20ch; margin:0 auto 20px;}
.story-cta p{color:var(--ink-soft); max-width:52ch; margin:0 auto 32px; font-size:1.05rem;}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1.2fr; gap:64px;}
@media (max-width:820px){ .contact-grid{grid-template-columns:1fr; gap:40px;} }
.contact-info h3{font-size:1.1rem; margin-bottom:8px;}
.contact-info p{color:var(--ink-soft); font-size:0.95rem; margin-bottom:28px; line-height:1.6;}
.contact-form{display:flex; flex-direction:column; gap:18px;}
.field label{display:block; font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); margin-bottom:8px;}
.field input, .field textarea{
  width:100%; padding:14px 16px; border:1.5px solid var(--line); background:var(--surface);
  color:var(--ink); font-family:var(--font-body); font-size:15px; border-radius:2px; resize:vertical;
}
.field input:focus, .field textarea:focus{border-color:var(--gold);}

/* ---------- QUANTITY STEPPER (product cards + cart drawer + checkout) ---------- */
.qty{display:flex; align-items:center; border:1.5px solid var(--line); border-radius:2px; overflow:hidden;}
.qty button{background:var(--surface-2); border:none; width:36px; height:40px; font-size:16px; color:var(--ink);}
.qty span{width:36px; text-align:center; font-family:var(--font-mono); font-size:14px;}
.product-actions{display:flex; gap:10px; margin-top:16px; align-items:stretch;}
.product-actions .btn{margin-top:0; flex:1;}
.stock-note{font-size:11px; color:var(--olive); text-transform:uppercase; letter-spacing:0.06em; margin-top:10px;}

/* ---------- CHECKOUT ---------- */
.checkout-steps{display:flex; gap:0; margin-bottom:56px; border-bottom:1px solid var(--line-soft);}
.checkout-step{flex:1; text-align:center; padding-bottom:16px; border-bottom:2px solid transparent; color:var(--ink-soft);}
.checkout-step.active{color:var(--ink); border-bottom-color:var(--gold); font-weight:600;}
.checkout-step.done{color:var(--olive);}
.checkout-step .step-n{font-family:var(--font-mono); font-size:11px; display:block; margin-bottom:4px;}
.checkout-grid{display:grid; grid-template-columns:1fr 380px; gap:56px; align-items:flex-start;}
@media (max-width:900px){ .checkout-grid{grid-template-columns:1fr;} }
.order-summary{background:var(--surface-2); border:1px solid var(--line-soft); padding:28px;}
.order-summary h3{font-size:1rem; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:20px;}
.order-summary .cart-line{padding:14px 0;}
.order-summary .cart-line-controls{gap:8px;}
.order-line-total{display:flex; justify-content:space-between; padding-top:16px; margin-top:8px; border-top:1px solid var(--line); font-size:1.1rem; font-weight:600;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:520px){ .field-row{grid-template-columns:1fr;} }
.payment-options{display:flex; flex-direction:column; gap:12px;}
.payment-option{
  display:flex; align-items:center; gap:12px; padding:16px; border:1.5px solid var(--line);
  border-radius:2px; cursor:pointer;
}
.payment-option input{accent-color:var(--gold);}
.payment-option.selected{border-color:var(--gold); background:var(--surface-2);}
.demo-notice{
  background:var(--surface-2); border-left:3px solid var(--gold); padding:14px 18px;
  font-size:0.88rem; color:var(--ink-soft); margin-top:24px;
}
.checkout-empty{text-align:center; padding:80px 0;}
.checkout-empty p{color:var(--ink-soft); margin:16px 0 28px;}
.order-confirmation{text-align:center; max-width:560px; margin:0 auto; padding:40px 0;}
.order-confirmation .mark{
  width:64px; height:64px; border-radius:50%; background:var(--olive); color:var(--surface);
  display:flex; align-items:center; justify-content:center; font-size:28px; margin:0 auto 28px;
}
.order-confirmation h1{font-size:2rem; margin-bottom:14px;}
.order-confirmation .order-num{font-family:var(--font-mono); font-size:0.95rem; color:var(--olive); margin-bottom:24px;}
.order-confirmation p.lead{color:var(--ink-soft); margin-bottom:36px;}

/* ---------- CHECKOUT LINE-ITEM THUMBNAIL (compact bottle illustration) ---------- */
#checkout-line-items .cart-line{display:grid; grid-template-columns:56px 1fr auto; gap:20px; align-items:center;}
.cart-line-thumb{
  width:56px; height:84px; border-radius:2px; position:relative;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  display:flex; align-items:center; justify-content:center;
}
.cart-line-thumb .mini-bottle{width:26px; height:68px; position:relative;}
.cart-line-thumb .mini-bottle::before{
  content:""; position:absolute; inset:0; border-radius:4px 4px 2px 2px;
  background:linear-gradient(180deg, var(--olive-dim), var(--olive));
  box-shadow:inset -3px 0 6px rgba(0,0,0,0.18), 0 4px 8px rgba(0,0,0,0.18);
}
.cart-line-thumb .mini-bottle::after{
  content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  width:6px; height:11px; background:var(--ink-soft); border-radius:1px 1px 0 0;
}
.cart-line-thumb .mini-label{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  background:var(--paper); color:var(--ink); font-family:var(--font-mono); font-size:5.5px;
  line-height:1.3; padding:2px 3px; text-align:center; letter-spacing:0.02em; width:20px; white-space:pre-line;
}
@media (max-width:420px){
  #checkout-line-items .cart-line{grid-template-columns:44px 1fr; row-gap:10px;}
  #checkout-line-items .cart-line-controls{grid-column:2 / 3;}
  .cart-line-thumb{width:44px; height:66px;}
}