/* ==========================================================================
   Heritage Buddies — stylesheet
   Same structural grammar as Makhana Buddies (spacing, breakpoints,
   animation timing) so the two sites feel like siblings — only the
   palette and imagery differ, per the brand PRD.
   ========================================================================== */

:root{
  --hb-green:#1b4d3e;
  --hb-green-dark:#0f3226;
  --hb-gold:#a9781f;
  --hb-gold-dark:#8a5f14;
  --hb-cream:#faf6ec;
  --hb-cream-alt:#f3ead9;
  --hb-brown:#3e2b1f;
}

/* ========== RESET & BASE (Mobile-First 320px+) ========== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;line-height:1.6;color:#333;background:var(--hb-cream);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
img{max-width:100%;height:auto;display:block}

/* ========== NAVBAR ========== */
.navbar{position:fixed;width:100%;top:0;left:0;z-index:1000;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.navbar .container{display:flex;justify-content:space-between;align-items:center;padding:.6rem 16px}
.logo-link{display:flex;align-items:center;gap:.55rem;text-decoration:none}
.logo-mark{height:38px;width:38px;border-radius:8px;object-fit:cover;display:block}
.logo-text{font-size:1.1rem;font-weight:700;color:var(--hb-green);letter-spacing:.01em}
.nav-right{display:flex;gap:.75rem;align-items:center}
.cart-btn{background:var(--hb-green);color:#fff;border:none;padding:.5rem 1rem;border-radius:25px;cursor:pointer;min-height:44px;font-size:.9rem;font-weight:600;transition:background .3s}
.cart-btn:hover{background:var(--hb-green-dark)}
.hamburger{display:flex;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;min-height:44px;min-width:44px;justify-content:center;align-items:center}
.hamburger span{display:block;width:24px;height:2px;background:#333;transition:.3s;border-radius:2px}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(0,7px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(0,-7px)}
.nav-links{display:none}
.nav-links.active{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:#fff;padding:1rem;box-shadow:0 4px 12px rgba(0,0,0,.1);gap:0}
.nav-links a{text-decoration:none;color:#333;padding:.75rem 1rem;min-height:44px;display:flex;align-items:center;border-bottom:1px solid #f0f0f0;transition:background .2s}
.nav-links a:last-child{border-bottom:none}
.nav-links a:hover{background:#f8f9fa}
.brand-switch-link{color:var(--hb-gold-dark)!important;font-weight:700}

/* ========== CROSS-BRAND HANDOFF BANNER ========== */
.handoff-banner{position:fixed;top:70px;left:50%;transform:translateX(-50%);background:var(--hb-green);color:#fff;padding:.65rem 1.25rem;border-radius:30px;font-size:.85rem;font-weight:600;box-shadow:0 4px 15px rgba(0,0,0,.25);z-index:2500;transition:opacity .6s ease;text-align:center;max-width:90vw}
.handoff-banner.fade-out{opacity:0}

/* ========== HERO SECTION ==========
   No photography asset yet (see PRD Section 11 — needs editorial-quality
   commercial photography). Using a premium gradient placeholder so launch
   isn't blocked; swap in a real hero photo later without touching layout. */
.hero-section{background:linear-gradient(135deg,var(--hb-green) 0%,var(--hb-green-dark) 55%,var(--hb-brown) 100%);color:#fff;padding:80px 16px 40px}
.main-hero-title{text-align:center;font-size:1.75rem;margin-bottom:.75rem;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3);font-weight:800}
.main-hero-subtitle{text-align:center;font-size:1rem;margin-bottom:2rem;color:rgba(255,255,255,.9)}
.hero-grid-two{display:grid;grid-template-columns:1fr;gap:1.5rem}
.hero-left{display:flex;flex-direction:column;gap:1.5rem;justify-content:center}
.hero-tagline p{font-size:1.1rem;line-height:1.8;background:rgba(255,255,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:1.25rem 1.5rem;border-radius:12px;border:1px solid rgba(255,255,255,.2);color:#fff;font-weight:500}
.product-hero{order:-1}

/* ========== SHIPPING STRIP ========== */
.shipping-strip{display:flex;flex-direction:column;gap:.75rem;padding:1rem 0}
.shipping-strip-item{display:flex;align-items:center;gap:.5rem;background:#fff;padding:1rem;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.08);flex:1}
.shipping-strip-item p{margin:0;color:#555;font-size:.8rem}
.shipping-strip-item strong{color:var(--hb-green);font-size:.9rem}
.shipping-strip-icon{font-size:1.5rem}

/* ========== PRODUCT HERO ========== */
.product-hero{background:#fff;padding:1.25rem;border-radius:15px;text-align:center}
.product-image{width:100%;max-height:420px;height:auto;border-radius:10px;margin-bottom:1rem;object-fit:contain;background:var(--hb-cream-alt)}
.product-hero h3{color:var(--hb-green);font-size:1.2rem;margin-bottom:.5rem;font-weight:700}
.product-description{font-size:.85rem;line-height:1.6;color:#555;margin:.75rem 0;text-align:left}
.product-highlights-hero{display:flex;gap:.3rem;margin:.75rem 0;flex-wrap:wrap;justify-content:center}
.badge{background:var(--hb-cream-alt);color:var(--hb-green);padding:.4rem .6rem;border-radius:20px;font-size:.7rem;font-weight:600}

/* ========== PACK CARDS ========== */
.pack-selection-text{font-size:1rem;font-weight:700;color:var(--hb-green);margin:1.25rem 0 .5rem;text-align:center}
.pack-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.pack-card{background:rgba(255,255,255,.9);border:2px solid rgba(27,77,62,.3);border-radius:12px;padding:.9rem;text-align:center;cursor:pointer;transition:.3s;position:relative;box-shadow:0 2px 8px rgba(0,0,0,.1);min-height:44px}
.pack-card:hover{border-color:var(--hb-green)}
.pack-card.popular{border-color:var(--hb-gold)}
.pack-card.selected{border-color:var(--hb-green);background:rgba(27,77,62,.1);box-shadow:0 0 15px rgba(27,77,62,.25)}
.pack-badge{position:absolute;top:-8px;right:-8px;background:var(--hb-gold);color:#fff;padding:.15rem .5rem;border-radius:15px;font-size:.6rem;font-weight:700}
.pack-size{font-size:1.1rem;font-weight:700;color:var(--hb-green);margin-bottom:.2rem}
.pack-price{font-size:.95rem;color:#333;font-weight:700;margin-bottom:.2rem}
.pack-label{font-size:.7rem;color:#666}
.pack-qty-controls{display:flex;align-items:center;justify-content:center;gap:.4rem;margin-top:.4rem}
.pack-qty-controls button{width:32px;height:32px;min-height:44px;min-width:44px;border:1px solid var(--hb-green);background:#fff;color:var(--hb-green);border-radius:50%;cursor:pointer;font-size:1rem;font-weight:bold;display:flex;align-items:center;justify-content:center;touch-action:manipulation;transition:.2s}
.pack-qty-controls button:hover{background:var(--hb-green);color:#fff}
.pack-qty-controls span{font-weight:bold;font-size:1rem;min-width:20px;text-align:center}
.pack-card-img{width:100%;max-height:80px;object-fit:cover;border-radius:8px;margin-bottom:.4rem}
.pack-card.out-of-stock{opacity:.55}
.out-of-stock-label{margin-top:.4rem;font-size:.75rem;font-weight:700;color:#dc3545}

.selection-message{font-size:.85rem;color:var(--hb-green);font-weight:600;text-align:center;margin:.25rem 0 .5rem;min-height:1.5rem}
.add-to-cart-btn-hero{background:var(--hb-green);color:#fff;border:none;padding:.9rem 2rem;font-size:1rem;border-radius:25px;cursor:pointer;width:100%;min-height:48px;font-weight:600;touch-action:manipulation;transition:.3s}
.add-to-cart-btn-hero:hover{background:var(--hb-green-dark)}
.add-to-cart-btn-hero:active{transform:scale(.98)}

.welcome-tagline{margin-top:1.25rem;padding:.75rem;background:linear-gradient(135deg,var(--hb-green),var(--hb-green-dark));color:#fff;border-radius:10px;font-weight:600;font-size:.85rem;line-height:1.6;text-align:center}

/* ========== WHATSAPP (shared brand pattern) ========== */
.whatsapp-support{margin-top:1.25rem;padding:1rem;background:var(--hb-cream-alt);border-radius:10px;border:1px solid #25d366}
.support-text{font-size:.85rem;line-height:1.6;color:#333;margin-bottom:.75rem;text-align:left}
.whatsapp-support-btn,.whatsapp-visit-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:#25d366;color:#fff;padding:.75rem 1.25rem;border-radius:25px;text-decoration:none;font-weight:600;min-height:48px;transition:.3s}
.whatsapp-support-btn:hover,.whatsapp-visit-btn:hover{background:#128c7e}
.whatsapp-icon-inline{width:22px;height:22px}
.whatsapp-visit-btn{display:inline-flex;margin-top:1.25rem;box-shadow:0 4px 15px rgba(37,211,102,.3)}

/* ========== WHY HERITAGE BUDDIES / ABOUT ========== */
.who-we-are-about{padding:3rem 16px;background:#fff}
.about-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
.about-card{background:var(--hb-cream);padding:1.5rem;border-radius:15px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.about-card h2{color:var(--hb-green);font-size:1.5rem;margin-bottom:1rem;font-weight:700}
.about-card p{color:#555;font-size:.95rem;line-height:1.8;margin-bottom:.75rem}
.about-card p:last-child{margin-bottom:0}
.benefits-card{background:var(--hb-cream);padding:1.5rem;border-radius:15px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.benefits-card .benefits-title{color:var(--hb-green);font-size:1.2rem;margin-bottom:1rem;text-align:center;font-weight:700}
.benefits-grid-compact{display:grid;grid-template-columns:1fr;gap:.6rem}
.benefit-chip{background:#fff;padding:.75rem 1rem;border-radius:10px;font-size:.88rem;line-height:1.5;color:#333;border-left:3px solid var(--hb-gold)}
.benefit-chip strong{color:var(--hb-green)}

/* ========== REGION STORY ========== */
.region-section{background:linear-gradient(#f8f6f0,var(--hb-cream-alt));padding:3rem 16px}
.region-section h2{text-align:center;font-size:1.75rem;margin-bottom:.5rem;color:var(--hb-green);font-weight:800}
.region-subtitle{text-align:center;color:#666;font-size:.9rem;margin-bottom:2rem;max-width:600px;margin-left:auto;margin-right:auto}
.region-card{max-width:700px;margin:0 auto;background:#fff;border-radius:15px;padding:1.75rem;box-shadow:0 2px 12px rgba(0,0,0,.06);display:flex;flex-direction:column;gap:.75rem}
.region-card-title{color:var(--hb-gold-dark);font-weight:700;font-size:1.1rem;display:flex;align-items:center;gap:.5rem}
.region-card p{color:#555;font-size:.9rem;line-height:1.7}
.region-map-note{text-align:center;color:#999;font-size:.8rem;margin-top:1.5rem;font-style:italic}

/* ========== NUTRITION TABLE ========== */
.nutrition-section{padding:3rem 16px;background:#fff}
.nutrition-section h2{text-align:center;font-size:1.75rem;margin-bottom:2rem;color:var(--hb-green);font-weight:800}
.nutrition-wrap{max-width:600px;margin:0 auto;overflow-x:auto}
.nutrition-table{width:100%;border-collapse:collapse;background:var(--hb-cream);border-radius:10px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.nutrition-table caption{text-align:left;padding:1rem 1rem .5rem;font-weight:700;color:var(--hb-green)}
.nutrition-table th,.nutrition-table td{padding:.65rem 1rem;text-align:left;font-size:.85rem;border-bottom:1px solid #e8e0d0}
.nutrition-table th{color:var(--hb-brown);font-weight:600}
.nutrition-table td:last-child,.nutrition-table th:last-child{text-align:right}
.nutrition-note{text-align:center;color:#999;font-size:.75rem;margin-top:.75rem}

/* ========== COMING SOON ========== */
.coming-soon-section{padding:3rem 16px;background:var(--hb-cream-alt)}
.coming-soon-section h2{text-align:center;font-size:1.75rem;margin-bottom:.5rem;color:var(--hb-green);font-weight:800}
.coming-soon-subtitle{text-align:center;color:#666;font-size:.9rem;margin-bottom:2rem}
.coming-soon-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;max-width:900px;margin:0 auto}
.coming-soon-card{background:#fff;padding:1.25rem 1rem;border-radius:12px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.06);position:relative;opacity:.85}
.coming-soon-card .cs-icon{font-size:1.75rem;margin-bottom:.4rem}
.coming-soon-card h4{font-size:.85rem;color:var(--hb-brown);font-weight:600}
.coming-soon-tag{position:absolute;top:.5rem;right:.5rem;background:var(--hb-gold);color:#fff;font-size:.6rem;padding:.15rem .4rem;border-radius:10px;font-weight:700}

/* ========== FAQ ========== */
.faq-section{padding:3rem 16px;background:#fff}
.faq-section h2{text-align:center;font-size:1.75rem;margin-bottom:2rem;color:var(--hb-green);font-weight:800}
.faq-container{max-width:800px;margin:0 auto}
.faq-item{background:#fff;border:1px solid #eee;border-radius:10px;margin-bottom:.75rem;overflow:hidden}
.faq-question{padding:1rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:600;color:var(--hb-green);min-height:48px}
.faq-question:hover{background:var(--hb-cream)}
.faq-icon{font-size:1.25rem;font-weight:bold;transition:.3s}
.faq-item.active .faq-icon{transform:rotate(45deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-item.active .faq-answer{max-height:500px}
.faq-answer p{padding:0 1rem 1rem;color:#666;line-height:1.6;font-size:.9rem}

/* ========== REFUND POLICY ========== */
.refund-policy-section{padding:3rem 16px;background:var(--hb-cream)}
.refund-policy-section h2{text-align:center;color:var(--hb-green);margin-bottom:.75rem;font-size:1.75rem;font-weight:800}
.refund-intro{text-align:center;max-width:700px;margin:0 auto 1.5rem;color:#555;font-size:.9rem}
.refund-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-bottom:1.5rem}
.refund-card{background:#fff;padding:1.25rem;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.refund-card h3{color:var(--hb-green);margin-bottom:.4rem;font-size:1rem}
.refund-contact{text-align:center;color:#555;font-size:.9rem}
.refund-contact a{color:var(--hb-green);font-weight:600;text-decoration:none}

/* ========== WHATSAPP FLOAT ========== */
.whatsapp-float{position:fixed;bottom:80px;right:16px;width:56px;height:56px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 15px rgba(37,211,102,.4);z-index:999;transition:.3s;text-decoration:none}
.whatsapp-float:hover{transform:scale(1.1)}
.whatsapp-float-icon{width:30px;height:30px;color:#fff}

/* ========== CART SIDEBAR ========== */
.cart-sidebar{position:fixed;right:-100%;top:0;width:100%;height:100%;background:#fff;box-shadow:-4px 0 20px rgba(0,0,0,.15);transition:right .3s ease;z-index:2000;display:flex;flex-direction:column}
.cart-sidebar.active{right:0}
.cart-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem;border-bottom:1px solid #ddd}
.close-btn{background:none;border:none;font-size:2rem;cursor:pointer;color:#333;min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center}
.cart-items{flex:1;overflow-y:auto;padding:1.25rem}
.cart-item{display:flex;justify-content:space-between;padding:.75rem 0;border-bottom:1px solid #eee;align-items:center}
.cart-footer{padding:1.25rem;border-top:2px solid #ddd}
.cart-total{display:flex;justify-content:space-between;font-size:1.3rem;font-weight:bold;margin-bottom:.75rem}
.checkout-btn{width:100%;background:var(--hb-green);color:#fff;border:none;padding:.9rem;font-size:1rem;border-radius:5px;cursor:pointer;min-height:48px;font-weight:600;transition:.3s}
.checkout-btn:hover{background:var(--hb-green-dark)}

/* ========== MODAL / CHECKOUT ========== */
.modal{display:none;position:fixed;z-index:3000;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.5);overflow-y:auto}
.modal.active{display:block}
.modal-content{background:#fff;margin:0;padding:1.5rem;width:100%;border-radius:0;position:relative;min-height:100vh}
.modal-content .close-btn{position:absolute;right:.75rem;top:.75rem}
.form-group{margin-bottom:1.25rem}
.form-group label{display:block;margin-bottom:.4rem;font-weight:600;font-size:.9rem}
.form-group input,.form-group textarea{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:8px;font-size:1rem;min-height:48px;-webkit-appearance:none;font-family:inherit}
.form-group textarea{min-height:80px;resize:vertical}
.order-summary{background:var(--hb-cream);padding:1.25rem;border-radius:8px;margin:1.5rem 0}
.summary-total{display:flex;justify-content:space-between;font-size:1.2rem;font-weight:bold;margin-top:.75rem;padding-top:.75rem;border-top:2px solid #ddd}
.submit-btn{width:100%;background:var(--hb-green);color:#fff;border:none;padding:1rem;font-size:1.1rem;border-radius:8px;cursor:pointer;min-height:52px;font-weight:600;transition:.3s}
.submit-btn:hover{background:var(--hb-green-dark)}
.submit-btn:disabled{opacity:.6;cursor:not-allowed}

/* OTP verification step (checkout) */
.payment-qr-section{background:var(--hb-cream-alt);border:1px solid #e2d5bc;border-radius:10px;padding:1.25rem;margin:1.5rem 0;text-align:center}
.payment-qr-section h3{color:var(--hb-green);font-size:1rem;margin-bottom:.75rem}
.payment-qr-img{width:170px;height:170px;object-fit:contain;background:#fff;border:1px solid #ddd;border-radius:8px;padding:.5rem;margin:0 auto .75rem}
.payment-qr-section p{font-size:.8rem;color:#666;line-height:1.5}

.cross-sell{background:var(--hb-cream-alt);border-radius:10px;padding:1rem;margin:1.5rem 0}
.cross-sell-title{font-weight:700;color:var(--hb-green);font-size:.95rem;margin-bottom:.15rem}
.cross-sell-subtitle{font-size:.8rem;color:#777;margin-bottom:.75rem}
.cross-sell-items{display:flex;flex-direction:column;gap:.6rem}
.cross-sell-item{display:flex;justify-content:space-between;align-items:center;background:#fff;padding:.65rem .85rem;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.cross-sell-item strong{display:block;font-size:.85rem;color:var(--hb-brown)}
.cross-sell-item span{font-size:.8rem;color:#888}
.cross-sell-item button{background:var(--hb-gold);color:#fff;border:none;padding:.5rem .9rem;border-radius:20px;font-size:.8rem;font-weight:600;cursor:pointer;white-space:nowrap;min-height:36px}
.cross-sell-item button:hover{background:var(--hb-gold-dark)}
.cross-sell-explore-inline{color:var(--hb-gold-dark);font-weight:700;text-decoration:underline}
.cross-sell-explore-inline:hover{color:var(--hb-brown)}

.otp-step{background:var(--hb-cream-alt);border:1px dashed var(--hb-gold);border-radius:10px;padding:1rem;margin:1.5rem 0}
.otp-step p{font-size:.85rem;color:#555;margin-bottom:.75rem}
.otp-row{display:flex;gap:.5rem}
.otp-row input{flex:1;padding:.75rem 1rem;border:2px solid #ddd;border-radius:8px;font-size:1.1rem;letter-spacing:.2em;min-height:48px;text-align:center}
.otp-row input:focus{border-color:var(--hb-green);outline:none}
.otp-row button{background:var(--hb-green);color:#fff;border:none;padding:.75rem 1.25rem;border-radius:8px;font-weight:600;cursor:pointer;min-height:48px;font-size:1rem;white-space:nowrap}
.otp-row button:hover{background:var(--hb-green-dark)}
.otp-row button:disabled{opacity:.6;cursor:not-allowed}
#otp-message{font-size:.85rem;margin-top:.5rem;min-height:1.2rem;font-weight:600}
.payment-note{font-size:.8rem;color:#777;text-align:center;margin-top:.75rem;line-height:1.5}

/* ========== STICKY BUY BAR (mobile only) ========== */
.sticky-buy-bar{display:block;position:fixed;bottom:0;left:0;right:0;background:#fff;box-shadow:0 -2px 10px rgba(0,0,0,.1);z-index:998;padding:.75rem 16px;padding-bottom:calc(.75rem + env(safe-area-inset-bottom));transition:transform .3s}
.sticky-buy-inner{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto}
.sticky-buy-info{display:flex;flex-direction:column}
.sticky-buy-info strong{font-size:.9rem;color:#333}
.sticky-buy-info span{font-size:.8rem;color:var(--hb-green);font-weight:600}
.sticky-buy-bar button{background:var(--hb-green);color:#fff;border:none;padding:.75rem 2rem;border-radius:25px;font-size:1rem;font-weight:600;cursor:pointer;min-height:48px;touch-action:manipulation;transition:.3s}
.sticky-buy-bar button:hover{background:var(--hb-green-dark)}

/* ========== FOOTER ========== */
footer{background:var(--hb-brown);color:#fff;text-align:center;padding:2rem 16px;margin-bottom:70px}
footer a{color:var(--hb-gold);text-decoration:none}
footer p{font-size:.85rem;margin-bottom:.4rem}

/* ========== ANIMATIONS ========== */
.fade-in{animation:fadeIn 1s ease-in}
.fade-in-delay{animation:fadeIn 1s ease-in .3s backwards}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ========== TABLET BREAKPOINT (768px+) ========== */
@media(min-width:768px){
  .hamburger{display:none}
  .nav-links{display:flex!important;flex-direction:row;position:static;box-shadow:none;padding:0;gap:2rem}
  .nav-links a{padding:0;border-bottom:none;min-height:auto}
  .coming-soon-grid{grid-template-columns:repeat(4,1fr)}
  .pack-cards{grid-template-columns:repeat(2,1fr);gap:.8rem;max-width:420px;margin:0 auto}
  .shipping-strip{flex-direction:row;gap:1.5rem}
  .cart-sidebar{width:400px;right:-400px}
  .cart-sidebar.active{right:0}
  .modal-content{margin:50px auto;width:90%;max-width:600px;border-radius:10px;min-height:auto}
  .sticky-buy-bar{display:none}
  .whatsapp-float{bottom:30px;right:30px}
  footer{margin-bottom:0}
  .refund-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .badge{font-size:.8rem}
}

/* ========== DESKTOP BREAKPOINT (1024px+) ========== */
@media(min-width:1024px){
  .logo-mark{height:44px;width:44px}
  .logo-text{font-size:1.25rem}
  .hero-section{padding:110px 20px 70px}
  .main-hero-title{font-size:3rem}
  .main-hero-subtitle{font-size:1.3rem;margin-bottom:3rem}
  .hero-grid-two{grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
  .hero-left{gap:2rem}
  .product-hero{order:0;padding:1.5rem}
  .product-hero h3{font-size:1.3rem}
  .badge{font-size:.9rem}
  .pack-size{font-size:1.3rem}
  .pack-price{font-size:1.1rem}
  .pack-label{font-size:.8rem}
  .pack-card{padding:1.1rem}
  .whatsapp-support{padding:1.5rem}
  .welcome-tagline{font-size:.95rem}
  .shipping-strip-icon{font-size:2rem}
  .who-we-are-about{padding:4rem 20px}
  .about-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .about-card{padding:2.5rem}
  .about-card h2{font-size:1.75rem}
  .benefits-card{padding:2.5rem}
  .benefits-grid-compact{grid-template-columns:1fr 1fr;gap:.75rem}
  .region-section{padding:4rem 20px}
  .region-section h2{font-size:2.5rem}
  .nutrition-section{padding:4rem 20px}
  .nutrition-section h2{font-size:2.5rem}
  .coming-soon-section{padding:4rem 20px}
  .coming-soon-section h2{font-size:2.5rem}
  .faq-section{padding:4rem 20px}
  .faq-section h2{font-size:2.5rem}
  .faq-question{padding:1.5rem}
  .faq-answer p{padding:0 1.5rem 1.5rem}
  .refund-policy-section{padding:4rem 20px}
  .refund-policy-section h2{font-size:2.5rem}
}

@media(min-width:768px) and (max-width:1023px){
  .main-hero-title{font-size:2.25rem}
}