/* ==========================================================================
   Storefront on phones — loaded after shop.css by the shop layout.

   Below 768px the header is compact and scrolls away with the page (pinned,
   it covered half a phone screen), and the actions a shopper reaches for sit
   in a bar at the bottom where a thumb lands: Call, WhatsApp, Get a quote,
   Basket (partials/mobile-bar.php). Larger screens are unchanged.
   ========================================================================== */

/* The phone number in the top bar, with its icon; tapping it calls. */
.site-phone { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; white-space: nowrap; }
.site-phone svg { width: 14px; height: 14px; flex: none; }

/* "Can't find the part?" — black with white text, the red button stands out on it. */
.cta-band { background: var(--c-black); border-block: 0; color: var(--c-on-black); }
.cta-band h2 { color: var(--c-on-black); }
.cta-band p { color: var(--c-on-black-2); }

/* The bottom bar exists for phones only. */
.mobile-bar { display: none; }

@media (max-width: 767.98px) {
  /* ---- Header: compact, and it scrolls away ---- */
  .site-header { position: static; }
  .site-header-top .container { justify-content: center; padding-block: .45rem; }
  .site-hours, .site-email { display: none; }
  .site-header-top .site-phone { color: var(--c-on-black); font-size: var(--fs-base); }

  .site-header-main { flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); padding-block: var(--sp-2) var(--sp-3); }
  .site-logo-img { height: 32px; }
  .site-actions { margin-left: auto; gap: var(--sp-2); }
  .site-quote { display: none; }            /* in the bottom bar instead */
  .site-account, .site-cart {
    width: 42px; height: 42px; min-height: 42px; padding: 0; justify-content: center; border-radius: 50%;
  }
  .site-cart { margin-left: 0; position: relative; }
  .site-cart .site-cart-count { position: absolute; top: -4px; right: -4px; }
  .site-search { order: 3; flex-basis: 100%; max-width: none; }
  .site-search input { height: 44px; }

  .site-nav a, .site-nav .nav-menu > summary { padding: .6rem .7rem; font-size: var(--fs-sm); }

  /* iOS zooms into any field under 16px and leaves the page zoomed: never let it. */
  input, select, textarea, .form-control, .form-select { font-size: 16px !important; }

  /* ---- Bottom action bar ---- */
  .wa-fab { display: none; }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  .mobile-bar {
    position: fixed; z-index: 60; left: 0; right: 0; bottom: 0;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--c-surface); border-top: 1px solid var(--c-border);
    box-shadow: 0 -6px 20px -12px rgba(0, 0, 0, .35);
  }
  .mobile-bar-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 54px; padding: 4px 2px; border-radius: var(--r-lg);
    color: var(--c-ink-2); font-size: .6875rem; font-weight: 650; line-height: 1.1; text-align: center;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-bar-item:hover, .mobile-bar-item:focus-visible { color: var(--c-ink); text-decoration: none; }
  .mobile-bar-item:active { background: var(--c-surface-2); }
  .mobile-bar-item.is-active { color: var(--c-brand); }
  .mobile-bar-item svg { width: 24px; height: 24px; }
  .mobile-bar-wa svg { color: #25d366; }
  .mobile-bar-quote { background: var(--c-brand); color: var(--c-brand-ink); margin-inline: 2px; }
  .mobile-bar-quote:hover, .mobile-bar-quote:focus-visible, .mobile-bar-quote.is-active { color: var(--c-brand-ink); background: var(--c-brand-dark); }
  .mobile-bar-icon { position: relative; display: inline-flex; }
  .mobile-bar-count {
    position: absolute; top: -6px; right: -10px; min-width: 18px; height: 18px; padding-inline: 4px;
    display: inline-grid; place-items: center; border-radius: 999px;
    background: var(--c-brand); color: var(--c-brand-ink); font-size: .625rem; font-weight: 800;
  }
  .mobile-bar-count[hidden] { display: none; }

  /* ---- The CTA band stacks, its button full width ---- */
  .cta-band .container { flex-direction: column; align-items: stretch; gap: var(--sp-4); }
  .cta-band .btn { width: 100%; }

}

@media print { .mobile-bar { display: none; } }

/* Short screens (a phone on its side, a small laptop window): a pinned header
   would cover half the page, so it scrolls away here too. */
@media (max-height: 500px) {
  .site-header { position: static; }
}