/* ============================================================
   Good Nutrition Only — SHARED Mobile / Responsive Layer
   Loaded last at priority 50.
   ------------------------------------------------------------
   SCOPE POLICY (read before editing):
   This file holds ONLY site-wide, shared, structural responsive
   rules — things that apply across multiple pages or are driven
   by WooCommerce/theme templates (shop, product, cart, footer,
   generic grids).

   PAGE-SPECIFIC responsive rules do NOT belong here. They live in
   that page's own custom_css, next to the desktop rules they
   override:
     - Homepage hero / newsletter / blue glow → Home (#12) custom_css
     - About value cards / IG social grid     → About (#16) custom_css

   The header bar + mobile nav panel + logo are styled entirely in
   header_code (their single source of truth) — not here.
   ============================================================ */


/* ============================================================
   GLOBAL MOBILE BASELINE  (site-wide)
   ============================================================ */
@media (max-width: 860px) {
  * { -webkit-tap-highlight-color: transparent; }

  /* Container side padding */
  .gno-container,
  .gno-container--narrow {
    padding-inline: var(--gno-space-5) !important;
  }

  /* Section vertical rhythm */
  .gno-section {
    padding-block: clamp(3rem, 10vw, 5rem) !important;
  }

  /* Base heading scale (page-level <h1>/<h2>/<h3>, not display) */
  .gno h1 { font-size: clamp(2rem, 8vw, 3rem) !important; }
  .gno h2 { font-size: clamp(1.6rem, 6vw, 2.4rem) !important; }
  .gno h3 { font-size: clamp(1.2rem, 5vw, 1.6rem) !important; }
}


/* ============================================================
   HEADER BAR  (shared structure only)
   NOTE: .gno-logo + .gno-nav panel are in header_code, NOT here.
   Breakpoint 1099px — matches the burger breakpoint in header_code.
   ============================================================ */
@media (max-width: 1099px) {
  .gno-header__bar {
    min-height: 60px !important;
    gap: var(--gno-space-3) !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
  }

  .gno-icon svg { width: 22px !important; height: 22px !important; }

  .gno-cart-count {
    font-size: 10px !important;
    min-width: 16px !important;
    height: 16px !important;
    top: -6px !important;
    right: -6px !important;
  }
}


/* ============================================================
   INNER-PAGE HEROES  (shared: About, Contact, Articles, etc.)
   The homepage .gno-hero is NOT here — it's in Home custom_css.
   ============================================================ */
@media (max-width: 860px) {
  .gno-page-hero          { min-height: 50vw !important; }
  .gno-page-hero--short   { min-height: 38vw !important; }
  .gno-page-hero__inner   { padding-block: var(--gno-space-7) !important; }

  .gno-page-hero__inner h1,
  .gno-page-hero__inner h2 {
    font-size: clamp(1.8rem, 7vw, 2.8rem) !important;
  }
  .gno-page-hero__inner .gno-lead {
    font-size: var(--gno-fs-base) !important;
  }
}

@media (max-width: 480px) {
  .gno-page-hero { min-height: 55vw !important; }
}


/* ============================================================
   GENERIC GRIDS & SPLIT LAYOUTS  (shared component)
   ============================================================ */
@media (max-width: 768px) {
  .gno-grid,
  .gno-grid--2,
  .gno-grid--3,
  .gno-grid--4 {
    grid-template-columns: 1fr !important;
    gap: var(--gno-space-5) !important;
  }

  /* Split: image always stacks on top */
  .gno-split {
    grid-template-columns: 1fr !important;
    gap: var(--gno-space-5) !important;
  }
  .gno-split__media {
    order: -1 !important;
    min-height: 260px !important;
    width: 100% !important;
    border-radius: var(--gno-radius) !important;
  }
  .gno-split__body { text-align: center !important; }
  .gno-split__body .gno-eyebrow { display: block !important; }
  .gno-split__body .gno-btn {
    margin-top: var(--gno-space-4) !important;
    width: 100% !important;
    justify-content: center !important;
  }
}


/* ============================================================
   CARDS  (shared component)
   ============================================================ */
@media (max-width: 768px) {
  .gno-card { border-radius: var(--gno-radius) !important; }
  .gno-card[style*="padding:var(--gno-space-6)"] {
    padding: var(--gno-space-5) !important;
  }
}


/* ============================================================
   BRAND BUTTONS  (shared component)
   ============================================================ */
@media (max-width: 768px) {
  .gno a.gno-btn,
  .gno .gno-btn,
  .gno a.gno-btn--alt,
  .gno .gno-btn--alt {
    padding: 0.85em 1.6em !important;
    font-size: var(--gno-fs-sm) !important;
    letter-spacing: .05em !important;
    white-space: nowrap !important;
  }
}


/* ============================================================
   WOOCOMMERCE — SHOP ARCHIVE  (template-driven, shared)
   ============================================================ */
@media (max-width: 768px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--gno-space-4) !important;
    margin: 0 !important;
  }

  .woocommerce ul.products li.product a.button,
  .woocommerce ul.products li.product .button,
  .woocommerce-page ul.products li.product a.button,
  .woocommerce-page ul.products li.product .button {
    display: block !important;
    width: calc(100% - var(--gno-space-4) * 2) !important;
    padding: 0.8em 1em !important;
    font-size: 0.82rem !important;
    letter-spacing: .04em !important;
    margin: var(--gno-space-3) var(--gno-space-4) var(--gno-space-4) !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: var(--gno-fs-base) !important;
    padding: var(--gno-space-3) var(--gno-space-3) 0 !important;
  }

  .woocommerce ul.products li.product .price {
    font-size: var(--gno-fs-sm) !important;
    padding: 0 var(--gno-space-3) !important;
  }
}

@media (max-width: 480px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: 1fr !important;
    gap: var(--gno-space-4) !important;
  }
}


/* ============================================================
   WOOCOMMERCE — SINGLE PRODUCT  (template-driven, shared)
   ============================================================ */
@media (max-width: 768px) {
  .woocommerce div.product {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--gno-space-5) !important;
  }
  .woocommerce div.product > .woocommerce-product-gallery,
  .woocommerce div.product > .summary {
    flex-basis: 100% !important;
    width: 100% !important;
  }
  .woocommerce div.product .summary h1.product_title {
    font-size: clamp(1.8rem, 7vw, 2.6rem) !important;
  }
  .woocommerce div.product form.cart {
    display: flex !important;
    gap: var(--gno-space-3) !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }
  .woocommerce div.product form.cart .single_add_to_cart_button {
    flex: 1 !important;
    height: 52px !important;
    font-size: var(--gno-fs-sm) !important;
    padding: 0 1.4em !important;
  }
  .woocommerce div.product form.cart .quantity input.qty {
    height: 52px !important;
    width: 64px !important;
  }
  .woocommerce-tabs ul.tabs {
    gap: var(--gno-space-2) !important;
    flex-wrap: wrap !important;
  }
}


/* ============================================================
   WOOCOMMERCE — CART / CHECKOUT  (template-driven, shared)
   ============================================================ */
@media (max-width: 768px) {
  .woocommerce-cart table.cart td,
  .woocommerce-cart table.cart th {
    padding: var(--gno-space-3) var(--gno-space-2) !important;
    font-size: var(--gno-fs-sm) !important;
  }
  .woocommerce-cart .cart-collaterals {
    width: 100% !important;
    float: none !important;
  }
}


/* ============================================================
   SLIDE-OUT CART DRAWER  (shared component)
   Base styles live in assets/cart-drawer.css — these are the
   mobile-only width/stacking overrides.
   ============================================================ */
@media (max-width: 860px) {
  .gno-cart-drawer {
    width: 88vw !important;
    max-width: 360px !important;
  }
  .gno-cart-drawer__head {
    padding: var(--gno-space-4) var(--gno-space-5) !important;
  }
  .gno-cart-drawer__title {
    font-size: var(--gno-fs-base) !important;
  }
  .gno-cart-drawer .woocommerce-mini-cart__buttons {
    flex-direction: column !important;
    gap: var(--gno-space-2) !important;
  }
  .gno-cart-drawer .woocommerce-mini-cart__buttons a {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  .gno-cart-drawer { width: 92vw !important; }
}


/* ============================================================
   CONTACT — INFO + FORM  (Contact page; shared-style block)
   ============================================================ */
@media (max-width: 768px) {
  .gno-contact-socials { gap: var(--gno-space-4) !important; }
  .gno-contact-social  { font-size: var(--gno-fs-base) !important; }
  .gno-grid .gno-card[style*="padding:var(--gno-space-6)"] {
    padding: var(--gno-space-5) !important;
  }
}


/* ============================================================
   ARTICLES — CARD GRID  (Articles page; shared-style block)
   ============================================================ */
@media (max-width: 860px) {
  .gno-article-card__img { aspect-ratio: 16 / 10 !important; }
}


/* ============================================================
   FOOTER  (shared — footer markup lives in footer_code)
   ============================================================ */
@media (max-width: 860px) {
  .gno-footer__top {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--gno-space-6) !important;
    padding-block: var(--gno-space-7) var(--gno-space-6) !important;
  }
  .gno-footer__brand {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    padding-bottom: var(--gno-space-4) !important;
    border-bottom: 1px solid var(--gno-border) !important;
  }
  .gno-footer__social { justify-content: center !important; }
  .gno-footer__logo   { font-size: var(--gno-fs-xl) !important; }

  .gno-footer__form {
    flex-direction: column !important;
    gap: var(--gno-space-2) !important;
  }
  .gno-footer__form input { width: 100% !important; }
  .gno-footer__form .gno-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 520px) {
  .gno-footer__top { grid-template-columns: 1fr !important; }
  .gno-footer__bottom {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: var(--gno-space-3) !important;
  }
  .gno-footer__pay { justify-content: center !important; }
}


/* ============================================================
   PHONES — FINAL TIGHTEN  (site-wide)
   ============================================================ */
@media (max-width: 480px) {
  .gno-container,
  .gno-container--narrow {
    padding-inline: var(--gno-space-4) !important;
  }

  /* Base <h1> tighten (homepage .gno-display handled in Home custom_css) */
  h1 {
    font-size: clamp(2rem, 10vw, 3rem) !important;
    line-height: 1.05 !important;
  }

  .gno-section {
    padding-block: clamp(2.5rem, 8vw, 3.5rem) !important;
  }

  .gno-eyebrow {
    font-size: 0.65rem !important;
    letter-spacing: .14em !important;
  }
}