/* Each product is one transparent composition, so its ingredients scale with it. */
.container { width:min(1280px,calc(100% - 80px)); }
.hero-grid { grid-template-columns:40% 60%; height:auto; min-height:720px; padding:40px 0 78px; }
.hero-copy { max-width:420px; padding:0; }
.hero-brands { gap:13px; margin-bottom:24px; }
.hero-brands .brand-kobber-image { width:185px; height:69px; }
.hero-brands img { width:240px; }
.hero h1 .hero-kicker { font-size:26px; }
.hero-description { font-size:28px; margin-top:12px; }
.hero-products { width:108%; max-width:860px; height:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; align-items:end; align-self:center; margin:85px 0 -62px -4%; }
.hero-composition { width:100%; height:auto; min-width:0; max-width:none; }
.hero-composition-coco { transform:rotate(-3deg); }
.hero-composition-zero { transform:rotate(2deg); }
.product-section { padding:42px 0 34px; }
.product-grid { grid-template-columns:46% 50%; gap:4%; align-items:center; }
.product-zero .product-grid { grid-template-columns:50% 46%; }
.product-visual { align-self:center; }
.product-stage,.product-zero .product-stage { height:auto; max-width:620px; margin:0 auto; }
.product-stage::before,.product-stage::after { content:none; }
.product-composition { width:100%; height:auto; }
.product-coco .view-label,.product-zero .view-label { transform:none; margin:0 auto; font-size:14px; }
.product-zero .product-copy { align-self:center; }
.product-copy h2,.product-coco h2,.product-zero h2 { font-size:clamp(30px,3.7vw,54px); line-height:1.04; letter-spacing:-.025em; }
.eyebrow { font-size:15px; margin-bottom:15px; }
.product-description { font-size:clamp(17px,1.65vw,23px); line-height:1.34; }
.benefits { margin:27px 0; }
.benefits li { font-size:clamp(14px,1.45vw,20px); gap:10px; }
.benefits svg { width:clamp(40px,4.5vw,62px); height:clamp(40px,4.5vw,62px); }
.purchase-button { min-height:56px; font-size:20px; }
.product-details { margin-top:20px; }
.product-details summary { font-size:16px; min-height:58px; padding:18px 14px; }
.product-coco { margin-bottom:-20px; padding-bottom:47px; }
.product-zero { padding-top:48px; padding-bottom:36px; }
.coco-ribbon { top:10px; height:80%; width:47%; }
.zero-ribbon { height:calc(100% + 40px); }
.moments-section { padding:40px 0 22px; }
.moments-section .container { width:min(1280px,calc(100% - 80px)); }
.section-title { font-size:clamp(28px,3.2vw,44px); line-height:1.13; }
.moments-grid { gap:20px; }
.moment { border-radius:10px; }
.moment h3 { font-size:22px; }
.moment figcaption { padding:17px 12px; }
.faq-section { padding:25px 0 45px; }
.faq-grid { max-width:1120px; }
.faq-grid h2 { font-size:clamp(30px,3.3vw,44px); }
.faq-list summary { font-size:18px; min-height:60px; }
/* One shared backdrop continues through the purchase area and the page footer. */
.closing-scene { color:#fff8ef; background:#43170d url('assets/footer-backdrop-v2.webp') center/cover no-repeat; overflow:hidden; }
.buy-section { background:none; padding:42px 0 24px; }
.buy-inner { width:min(1280px,calc(100% - 80px)); }
.buy-inner>h2 { font-size:clamp(30px,3.6vw,48px); line-height:1.08; }
.buy-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:60px; margin-top:28px; }
.buy-product { grid-template-columns:minmax(0,51%) minmax(0,49%); gap:0; width:100%; max-width:none; }
.buy-visual,.buy-product:last-child .buy-visual { height:auto; min-width:0; }
.buy-composition { width:100%; height:auto; }
.buy-copy { padding:0 0 0 12px; min-width:0; }
.buy-product h3 { font-size:clamp(20px,1.85vw,27px); line-height:1.08; min-height:2.16em; }
.buy-weight { font-size:17px; margin-top:9px; }
.buy-product .button { display:flex; width:100%; max-width:250px; min-height:52px; padding:14px 16px; margin-top:19px; font-size:16px; line-height:1.2; white-space:nowrap; }
.site-footer { background:none; color:#fff8ef; padding:18px 0 28px; }
.footer-inner { width:min(1280px,calc(100% - 80px)); padding-top:20px; border-top:1px solid #fff8ef26; }
.site-footer .brand-kobber-image { background:#fff8ef; width:100px; height:37px; }
.site-footer .brand-lockup { gap:20px; }
.site-footer .brand-lockup .logo-havanna { width:145px; }
.site-footer .brand-divider { background:#fff8ef33; height:30px; }
.footer-links { font-size:14px; }
.footer-links a,.footer-links button { min-height:44px; display:inline-flex; align-items:center; }
.site-footer a:focus-visible,.site-footer button:focus-visible { outline-color:#fff8ef; }
@media (min-width:1600px) {
  .hero-grid { min-height:760px; }
}
@media (min-width:701px) and (max-width:1100px) {
  .container,.moments-section .container,.buy-inner,.footer-inner { width:calc(100% - 56px); }
  .hero-grid { min-height:580px; padding:34px 0 60px; }
  .hero-copy { max-width:360px; }
  .hero-brands { gap:12px; margin-bottom:22px; }
  .hero-brands .brand-kobber-image { width:150px; height:56px; }
  .hero-brands img { width:195px; }
  .hero h1 .hero-kicker { font-size:clamp(18px,2.2vw,24px); }
  .hero-description { font-size:clamp(20px,2.3vw,26px); }
  .hero-products { width:107%; gap:3px; margin-top:65px; margin-bottom:-40px; }
  .product-copy h2,.product-coco h2,.product-zero h2 { font-size:clamp(27px,3.7vw,40px); }
  .product-copy h2 br { display:none; }
  .product-description { font-size:17px; }
  .eyebrow { font-size:12px; }
  .benefits { margin:22px 0; }
  .benefits li { font-size:13px; padding-inline:7px; }
  .benefits svg { width:40px; height:40px; }
  .purchase-button { min-height:52px; font-size:18px; }
  .product-details summary { font-size:14px; padding-inline:10px; }
  .buy-grid { gap:30px; }
  .buy-product { grid-template-columns:minmax(0,48%) minmax(0,52%); }
  .buy-product h3 { font-size:20px; }
  .buy-copy { padding-left:8px; }
  .buy-product .button { font-size:13px; padding:13px 10px; min-height:48px; }
  .buy-weight { font-size:15px; }
  .moment h3 { font-size:19px; }
}
@media (max-width:700px) {
  .container,.moments-section .container,.buy-inner,.footer-inner { width:calc(100% - 40px); }
  .hero-grid { width:100%; display:flex; flex-direction:column; min-height:0; height:auto; padding:30px 0 40px; }
  .hero-copy { padding:0 25px; width:100%; max-width:375px; }
  .hero-brands { gap:12px; margin-bottom:24px; }
  .hero-brands .brand-kobber-image { width:156px; height:58px; }
  .hero-brands img { width:205px; }
  .hero h1 .hero-kicker { font-size:clamp(20px,5vw,25px); }
  .hero-lettering { margin-top:10px; }
  .hero-description { font-size:clamp(22px,5.4vw,27px); margin-top:8px; }
  .hero-products { width:100%; max-width:560px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; height:auto; margin:32px auto -19px; padding:0 16px; align-self:center; }
  .hero-composition-coco { transform:rotate(-3deg); }
  .hero-composition-zero { transform:rotate(2deg); }
  .hero { background-size:auto 100%; background-position:35% center; }
  .product-section { padding:30px 0 34px; }
  .product-grid,.product-zero .product-grid { display:flex; flex-direction:column; gap:20px; }
  .product-visual { width:100%; max-width:430px; align-self:center; }
  .product-stage,.product-zero .product-stage { width:100%; height:auto; }
  .product-coco .view-label,.product-zero .view-label { font-size:12px; margin-top:-6px; }
  .product-coco { padding-bottom:43px; margin-bottom:-18px; }
  .product-zero { padding-top:40px; }
  .product-copy { width:100%; max-width:500px; }
  .product-zero .product-visual { order:0; }
  .product-zero .product-copy { order:1; }
  .product-copy h2,.product-coco h2,.product-zero h2 { font-size:clamp(29px,7vw,39px); line-height:1.06; text-align:center; }
  .product-copy h2 br { display:none; }
  .eyebrow { font-size:12px; text-align:center; margin-bottom:11px; }
  .product-description { text-align:center; font-size:17px; line-height:1.42; margin-top:13px; letter-spacing:0; }
  .benefits { margin:25px 0; }
  .benefits li { font-size:13px; line-height:1.16; padding-inline:6px; }
  .benefits svg { width:38px; height:38px; }
  .purchase-button { min-height:54px; font-size:18px; }
  .product-details { margin-top:17px; }
  .product-details summary { font-size:15px; min-height:58px; padding:17px 7px; }
  .details-content { font-size:15px; padding:0 7px 22px; }
  .coco-ribbon { top:25px; width:100%; height:350px; left:-12%; }
  .zero-ribbon { width:110%; height:460px; top:0; right:-12%; mask-image:linear-gradient(to bottom,#000 72%,transparent); -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent); }
  .moments-section { padding:34px 0 22px; }
  .section-title { font-size:30px; line-height:1.08; }
  .moments-grid { grid-template-columns:1fr; max-width:440px; gap:18px; margin:25px auto 0; }
  .moment-image { aspect-ratio:1.5; }
  .moment h3 { font-size:22px; }
  .moment figcaption { padding:17px 12px; }
  .serving-note { text-align:center; font-size:10px; margin-top:13px; }
  .faq-section { padding:22px 0 35px; }
  .faq-grid h2 { font-size:31px; line-height:1.08; }
  .faq-list summary { font-size:15px; line-height:1.35; min-height:60px; padding:17px 6px; }
  .closing-scene { background-position:center; background-size:auto 100%; }
  .buy-section { padding:34px 0 18px; }
  .buy-inner>h2 { font-size:32px; line-height:1.08; max-width:460px; margin:auto; }
  .buy-inner>h2 br { display:none; }
  .buy-grid { grid-template-columns:1fr; max-width:470px; gap:25px; margin:26px auto 0; }
  .buy-product { grid-template-columns:minmax(0,47%) minmax(0,53%); gap:0; margin:0; }
  .buy-product:last-child { border:0; padding:0; }
  .buy-copy { padding:0 0 0 10px; }
  .buy-product h3 { font-size:clamp(21px,5.2vw,26px); min-height:0; }
  .buy-weight { font-size:16px; margin-top:7px; }
  .buy-product .button { min-height:48px; font-size:14px; line-height:1.2; padding:12px 10px; margin-top:16px; max-width:240px; }
  .site-footer { padding:14px 0 23px; }
  .footer-inner { flex-direction:column; gap:14px; padding-top:22px; }
  .site-footer .brand-lockup { gap:17px; }
  .site-footer .brand-kobber-image { width:91px; height:34px; }
  .site-footer .brand-lockup .logo-havanna { width:128px; }
  .footer-links { gap:30px; font-size:13px; }
  .dialog-top { padding:14px 16px; }
  .dialog-top h2 { font-size:15px; }
  .label-controls { flex-wrap:wrap; padding:13px 16px; }
  .label-image-wrap { padding:10px; }
  .label-image-wrap img { max-height:55dvh; }
  .privacy-content { padding:20px; font-size:15px; }
}
@media (max-width:360px) {
  .hero-copy { padding-inline:23px; }
  .hero-brands .brand-kobber-image { width:145px; height:54px; }
  .hero-brands img { width:190px; }
  .hero h1 .hero-kicker { font-size:19px; }
  .hero-description { font-size:21px; }
  .product-copy h2,.product-coco h2,.product-zero h2 { font-size:29px; }
  .benefits li { font-size:12px; }
  .buy-inner>h2 { font-size:29px; }
  .buy-product h3 { font-size:20px; }
  .buy-copy { padding-left:6px; }
  .buy-product .button { font-size:12px; padding-inline:8px; }
}