/* ==========================================================================
   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.
   ========================================================================== */

/* "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-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; }
  /* Room for the bar lives inside the footer, so the black runs on behind the
     bar instead of leaving a white strip under the footer. */
  body { padding-bottom: 0; }
  .site-footer { padding-bottom: calc(66px + var(--sp-3) + env(safe-area-inset-bottom, 0px)) !important; }
  /* A product page also has its buy bar riding above this one. */
  body:has([data-buybar]) .site-footer { padding-bottom: calc(66px + 4.5rem + env(safe-area-inset-bottom, 0px)) !important; }
  /* Dark, like the footer it sits over: black glass, a red hairline along the
     top edge, light icons, and Get a quote as the one red button. */
  .mobile-bar {
    position: fixed; z-index: 60; left: 0; right: 0; bottom: 0;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(8, 8, 8, .92);
    backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
    border-top: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 -10px 28px -14px rgba(0, 0, 0, .7);
  }
  .mobile-bar::before {
    content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(228, 28, 33, .9) 30%, rgba(255, 90, 95, 1) 50%, rgba(228, 28, 33, .9) 70%, transparent);
  }
  .mobile-bar-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 54px; padding: 4px 2px; border-radius: 14px;
    color: rgba(255, 255, 255, .78); font-size: .6875rem; font-weight: 650; line-height: 1.1; text-align: center;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
  }
  .mobile-bar-item:hover, .mobile-bar-item:focus-visible { color: #fff; text-decoration: none; }
  .mobile-bar-item:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 1px; }
  .mobile-bar-item:active { background: rgba(255, 255, 255, .08); transform: scale(.96); }
  .mobile-bar-item.is-active { color: #ff5a5f; }
  .mobile-bar-item svg { width: 23px; height: 23px; }
  .mobile-bar-wa svg { color: #25d366; }
  .mobile-bar-quote {
    background: linear-gradient(180deg, #f0262c, var(--c-brand)); color: var(--c-brand-ink);
    box-shadow: 0 6px 18px -6px rgba(228, 28, 33, .75), inset 0 1px 0 rgba(255, 255, 255, .22);
  }
  .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-quote:active { 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;
    box-shadow: 0 0 0 2px rgba(8, 8, 8, .92);
  }
  .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; }
}