/* ==========================================================================
   MOBILE — INNER PAGES REFINEMENT
   Loaded on every page EXCEPT index.html (see that page's own dedicated,
   already-audited mobile-homepage.css), and only at <=640px.

   Covers the chrome shared by every inner page (header / nav-drawer /
   floating chat — identical treatment to the homepage's, so the header
   feels like one continuous system across the whole site) plus the
   page-specific sections the brief calls out by name: compact page
   heroes, the Products catalogue, Product Detail, Cart, Checkout and
   Contact. Nothing here touches desktop (everything sits inside this
   file's own <=640px media query, loaded only via the same-width
   <link> tag as a second guarantee), product data, prices, images,
   or any cart/checkout/payment/quote logic.
   ========================================================================== */

@media (max-width: 640px) {

  /* ---- Header: a touch tighter and calmer on a phone-width bar ----
     Identical to the homepage's own header polish, so the bar itself
     never changes character from page to page. ---- */
  .header-inner { padding: 14px 0; }
  .site-header.is-scrolled .header-inner { padding: 9px 0; }
  .logo img { height: 36px; }
  .header-actions { gap: 2px; }
  .icon-btn { width: 38px; height: 38px; border-radius: 10px; }
  .icon-btn:active { background: var(--color-grey-light); transform: scale(.94); }

  /* ---- Mobile nav drawer: same rounded, editorial-feeling panel as the
     homepage — kicker-style "Menu" label, breathing room, quiet accent
     line for the Products submenu. ---- */
  .mobile-menu-backdrop { background: rgba(10, 16, 28, .5); }
  .mobile-menu {
    width: min(84vw, 360px);
    border-radius: 20px 0 0 20px;
    padding: 22px 22px calc(22px + env(safe-area-inset-bottom, 0px));
    box-shadow: -24px 0 48px -28px rgba(10, 16, 28, .4);
  }
  .mobile-menu-header { padding-bottom: 14px; margin-bottom: 8px; }
  .mobile-menu-header strong {
    font-family: var(--font-heading); font-size: 12px; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase; color: var(--color-grey-text);
  }
  .mobile-menu-header .icon-btn { width: 34px; height: 34px; margin-right: -6px; }
  .mobile-menu > ul > li > a,
  .mobile-menu > ul > li > button.mm-toggle {
    padding: 15px 2px; font-family: var(--font-display); font-size: 18px;
    font-weight: 500; color: var(--color-charcoal);
  }
  .mobile-menu > ul > li > a:active,
  .mobile-menu > ul > li > button.mm-toggle:active { opacity: .55; }
  .mobile-submenu { border-left: 2px solid var(--color-border); margin-left: 2px; padding-left: 16px; }
  .mobile-submenu li a { padding: 12px 4px; }
  .mobile-menu-footer { padding-top: 18px; margin-top: 6px; }
  .mobile-menu-footer p:first-child { font-weight: 600; color: var(--color-charcoal); }

  /* ---- Chatbot / WhatsApp / back-to-top: keep clear of the home
     indicator and hide while the nav drawer is open, exactly as on the
     homepage. ---- */
  .float-stack { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .chat-window { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  body:has(#mobile-menu.is-open) .float-stack { opacity: 0; visibility: hidden; pointer-events: none; }

  /* ---- Compact / dark page hero (About, Contact, FAQ, Products,
     Request a Quote, Affiliate Register) — quieter scale and a tighter
     measure so it reads as a deliberate title card, not a shrunk banner. ---- */
  .hero--compact { padding: 56px 0 44px; }
  .hero--compact .hero-eyebrow { font-size: 12px; margin-bottom: 10px; }
  .hero--compact h1 { font-size: var(--fs-h1); line-height: 1.16; }
  .hero--compact p.lead { font-size: 16px; line-height: 1.6; max-width: 34ch; margin-left: auto; margin-right: auto; }

  /* ---- Standard two-column hero (Healthcare / Auto company pages,
     Affiliate Program) — image now reads as a supporting frame beneath
     a shorter, calmer measure of copy rather than a squeezed sidebar. ---- */
  .hero:not(.hero--compact) .container { gap: var(--sp-4); }
  .hero:not(.hero--compact) h1 { font-size: var(--fs-h1); }
  .hero:not(.hero--compact) p.lead { max-width: 40ch; }

  /* ---- Visual (photo-background) category hero — Healthcare Products,
     Organic Skincare, Agricultural Commodities. ---- */
  .visual-hero h1 { font-size: var(--fs-h1); }
  .visual-hero p.lead { max-width: 34ch; }

  /* ---- Breadcrumb: a touch more room below it before the page title ---- */
  .breadcrumb { margin-bottom: var(--sp-2); font-size: 12px; }

  /* ======================================================================
     PRODUCTS CATALOGUE PAGE
     ====================================================================== */
  .catalogue-page .catalogue-toolbar { gap: var(--sp-2); margin-bottom: var(--sp-3); }

  /* Filter pills as a single quiet horizontal strip instead of a wrapped,
     crowded cluster — the premium, editorial reading of a category rail. */
  .catalogue-page .filter-pills {
    flex-wrap: nowrap; overflow-x: auto; gap: 8px;
    padding-bottom: 2px; scrollbar-width: none;
  }
  .catalogue-page .filter-pills::-webkit-scrollbar { display: none; }
  .catalogue-page .filter-pill { flex-shrink: 0; padding: 9px 16px; font-size: 13px; }

  .catalogue-count { margin: var(--sp-1) 0 var(--sp-3); }

  /* ======================================================================
     PRODUCT DETAIL PAGE
     Reading order is already image → category → name → price →
     description → purchase action in the markup; this just tunes the
     scale and spacing so nothing crowds the CTA. ====================== */
  .gallery-arrow { width: 40px; height: 40px; }
  .gallery-thumbs { gap: 8px; }
  .product-info .card-category { font-size: 12px; }
  .product-info h1 { margin-bottom: 8px; }
  .product-info .text-muted { margin-bottom: var(--sp-2); }
  .product-price { margin-bottom: var(--sp-2); }
  .product-desc { margin-bottom: var(--sp-3); }
  .add-to-cart-row { gap: 10px; margin-bottom: var(--sp-1); }
  .add-to-cart-row .btn { min-height: 54px; }
  .info-block { margin-top: var(--sp-3); padding-top: var(--sp-3); }
  .related-heading { margin-top: var(--sp-5); }

  /* ======================================================================
     CART & CHECKOUT
     ====================================================================== */
  .cart-item-name { font-size: 15px; }
  .cart-summary-card, .summary-card { padding: var(--sp-3); }
  .cart-checkout-btn, .checkout-submit-btn { min-height: 54px; }

  .checkout-steps { gap: var(--sp-2); margin-bottom: var(--sp-3); justify-content: center; }
  .checkout-step { font-size: 12px; }
  .checkout-section { margin-bottom: var(--sp-2); }
  .checkout-section-title { font-size: 17px; margin-bottom: var(--sp-2); }
  .payment-option { padding: 14px; }

  /* ======================================================================
     CONTACT PAGE
     ====================================================================== */
  .contact-layout { gap: var(--sp-5); }
  .contact-detail-list { gap: var(--sp-2); margin-bottom: var(--sp-3); }
  .contact-detail-item h4 { margin-bottom: 3px; }
  .map-placeholder { aspect-ratio: 4/3; }
  #contact-form-wrap.form-card, .form-card { padding: var(--sp-3); }

  /* Comfortable form rhythm site-wide (Contact, Checkout, Request a
     Quote, Affiliate Register all share these classes). */
  .form-group { margin-bottom: var(--sp-2); }
  .form-group input, .form-group select, .form-group textarea { height: 50px; }
  .form-group textarea { height: auto; min-height: 110px; }
}