/* ==========================================================================
   Gaayu Foods — responsive system
   Breakpoints: small phones 320-480, large phones 481-767,
   tablets 768-1024, desktop 1025+ (unchanged from the existing design).
   Loaded after styles.css / animations.css, so rules here win by source
   order without needing !important. Desktop (min-width:1025px) is left
   alone throughout — every rule below only narrows the viewport down.
   ========================================================================== */

/* ---------- safety net: never allow horizontal scroll ---------- */
html, body{
  max-width: 100%;
  overflow-x: hidden;
}
*{ min-width: 0; }

/* ---------- fluid type (clamp max stays identical, so desktop is
   pixel-identical to before — only the small-screen floor changes) ---------- */
.hero-copy h1{ font-size: clamp(2rem, 8vw, 3.6rem); }
.page-hero h1{ font-size: clamp(1.75rem, 7vw, 3rem); }
.pdetail h1{ font-size: clamp(1.75rem, 6.5vw, 2.8rem); }
h2{ font-size: clamp(1.6rem, 5.5vw, 2.7rem); }
.banner h2{ font-size: clamp(1.6rem, 6vw, 2.8rem); }
.bulk h2{ font-size: clamp(1.5rem, 5vw, 2.3rem); }

/* ---------- text overflow safety (long emails/numbers/words) ---------- */
.foot-contact span,
.contact-details dd,
.price-list li,
.field input,
.field textarea,
.brand-word{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---------- touch targets ---------- */
@media (max-width: 1024px){
  .nav a:not(.brand):not(.btn){ min-height: 44px; display: inline-flex; align-items: center; }
  .link{ min-height: 44px; }
  .field input, .field select, .field textarea, .btn{ font-size: 16px; }
}

/* =========================================================================
   HEADER — compact on mobile
   ========================================================================= */
@media (max-width: 767px){
  .nav{ padding: 10px 0; }
  .brand svg{ width: 34px; height: 34px; }
  .brand-word{ font-size: 1.05rem; }
}

/* =========================================================================
   HERO
   ========================================================================= */
@media (max-width: 1024px){
  .hero-grid{ grid-template-columns: 1fr; gap: 32px; }
  .compose{ order: 0; height: 320px; } /* text first, image second (DOM order) */
  .hero .blob{ width: 380px; height: 380px; top: -160px; right: -140px; }
  .hero .blob-soft{ width: 220px; height: 220px; }
}
@media (max-width: 767px){
  .hero{ padding: 40px 0 24px; }
  .hero-grid{ padding: 20px 0 40px; gap: 28px; }
  .compose{ height: 280px; }
  .hero .blob{ width: 300px; height: 300px; top: -130px; right: -110px; }
}
@media (max-width: 480px){
  .compose{ height: 240px; }
  .hero .blob{ width: 240px; height: 240px; top: -100px; right: -90px; }
  .hero .blob-soft{ width: 160px; height: 160px; left: -80px; bottom: -80px; }
  .tagline span:not(:last-child)::after{ margin-left: 10px; }
  .actions{ flex-direction: column; align-items: stretch; }
  .actions .btn{ width: 100%; justify-content: center; }
}
@media (max-width: 1024px){
  .facts{ grid-template-columns: 1fr; }
}

/* =========================================================================
   PAGE HERO (Products / About / Bulk Orders / Contact)
   ========================================================================= */
@media (max-width: 1024px){
  .page-hero .blob{ width: 320px; height: 320px; top: -150px; right: -130px; }
}
@media (max-width: 767px){
  .page-hero{ padding: 40px 0; }
  .page-hero .blob{ width: 240px; height: 240px; top: -110px; right: -90px; }
}

/* =========================================================================
   SECTION SPACING — desktop untouched, mobile tightened
   ========================================================================= */
@media (max-width: 767px){
  .products, .brandmsg, .why, .how, .cooking, .banner, .bulk, .section{
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .pdetail{ padding: 32px 0 48px; }
  .related{ padding-bottom: 48px; }
  .section-head{ margin-bottom: 28px !important; }
}

/* =========================================================================
   PRODUCT CARDS
   ========================================================================= */
@media (max-width: 1024px){
  .pcards{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px){
  .pcards{ grid-template-columns: 1fr; }
}

/* =========================================================================
   BRAND MESSAGE / STORY — image on top, text below, centered spacing
   ========================================================================= */
@media (max-width: 1024px){
  .brandmsg .wrap{ grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .brandmsg .ph{ aspect-ratio: 16/10; }
  .brandmsg .actions{ justify-content: center; }
  .story .wrap{ grid-template-columns: 1fr; gap: 32px; }
  .story-photos{ height: 360px; margin-inline: auto; max-width: 420px; width: 100%; }
}
@media (max-width: 480px){
  .story-photos{ height: 300px; }
}

/* =========================================================================
   WHY CHOOSE — 1 col small phones, 2 col large phones/tablets, 3 col desktop
   ========================================================================= */
@media (max-width: 1024px){
  .why-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px){
  .why-grid{ grid-template-columns: 1fr; }
}

/* =========================================================================
   HOW IT WORKS — vertical on mobile, 2x2 on tablet, 4-across on desktop
   ========================================================================= */
@media (max-width: 1024px){
  .how ol{ grid-template-columns: 1fr 1fr; row-gap: 40px; }
}
@media (max-width: 767px){
  .how ol{ grid-template-columns: 1fr; }
}

/* =========================================================================
   COOKING GUIDE — 1 col mobile, 2 col tablet, 3 col desktop
   ========================================================================= */
@media (max-width: 1024px){
  .cook-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px){
  .cook-grid{ grid-template-columns: 1fr; }
}

/* =========================================================================
   CTA BANNER + BULK ORDERS — stack, full-width button, tags wrap
   ========================================================================= */
@media (max-width: 1024px){
  .bulk .card{ grid-template-columns: 1fr; text-align: center; padding: 44px 32px; }
  .bulk .card .eyebrow, .bulk .card p{ text-align: center; }
  .bulk .tags{ justify-content: center; display: flex; flex-wrap: wrap; gap: 4px 0; }
  .banner .blob.b1{ width: 280px; height: 280px; top: -140px; left: -140px; }
  .banner .blob.b2{ width: 240px; height: 240px; bottom: -140px; right: -120px; }
}
@media (max-width: 767px){
  .bulk .card{ padding: 36px 24px; }
  .banner .btn, .bulk .card .btn{ width: 100%; justify-content: center; }
}

/* =========================================================================
   PRODUCT DETAIL PAGE — image on top, info below
   ========================================================================= */
@media (max-width: 1024px){
  .pdetail .wrap{ grid-template-columns: 1fr; gap: 28px; }
  .pdetail .ph{ aspect-ratio: 4/3; }
}

/* =========================================================================
   CONTACT PAGE + BULK ORDERS ENQUIRY — inline-styled 2-col wraps stack
   ========================================================================= */
@media (max-width: 1024px){
  .wrap[style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

/* =========================================================================
   FOOTER — 1 col phones, 2 col tablets, bigger tap areas, centered copyright
   ========================================================================= */
@media (max-width: 1024px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px){
  .footer-grid{ grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .footer-brand{ justify-content: center; }
  footer p{ margin-inline: auto; }
  .foot-contact li{ justify-content: center; }
  footer li{ margin-bottom: 2px; }
  footer li a{ display: inline-flex; align-items: center; min-height: 44px; padding: 6px 4px; }
  .foot-bottom{ flex-direction: column; text-align: center; gap: 8px; }
}

/* =========================================================================
   FORMS — large inputs, no iOS zoom, comfortable spacing on mobile
   ========================================================================= */
@media (max-width: 767px){
  .form-card{ padding: 24px 20px; }
  .field-row{ grid-template-columns: 1fr; gap: 16px; }
  .field input, .field select, .field textarea{ padding: 14px 16px; font-size: 16px; }
  .form-card .btn{ width: 100%; justify-content: center; }
}

/* =========================================================================
   MOBILE STICKY ORDER BAR (Call + WhatsApp) — phones only
   ========================================================================= */
.mobile-bar{
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 55;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -12px 30px -22px rgba(18, 32, 56, .4);
  padding: 8px max(12px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right));
  gap: 10px;
}
.mobile-bar a{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  border-radius: 14px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  white-space: nowrap;
}
.mobile-bar svg{ width: 18px; height: 18px; flex: none; }
.mobile-bar .bar-call{
  background: var(--mist);
  color: var(--blue-deep);
  border: 1px solid var(--line);
}
.mobile-bar .bar-order{
  background: var(--green);
  color: #fff;
}
@media (max-width: 767px){
  .mobile-bar{ display: flex; }
  body{ padding-bottom: 74px; }
}
body.menu-open .mobile-bar{ display: none; }

@media (hover: hover) and (pointer: fine){
  .mobile-bar a:hover{ filter: brightness(1.05); }
}
.mobile-bar a:active{ transform: scale(.97); }

/* ---------- reduced motion: bottom bar / menu need no extra rule —
   the global reduced-motion block in animations.css already zeroes out
   every transition-duration and animation-duration on the page. ---------- */