/* ═══════════════════════════════════════════════════════════════════════════
   Online store — the PWA layer ONLY.

   WHAT THIS FILE USED TO BE, AND WHY THAT WAS WRONG
   -------------------------------------------------
   It was a copy of the DRIVER app's stylesheet. It styled `.stop`, `.cash` and
   the delivery sync chip — none of which exist in a shop — and, fatally, it
   declared its own `:root` palette in v2 navy and a `body` rule using it.

   _StoreApp loads it AFTER shop.css, so those two rules repainted the entire
   storefront navy over the green it has always been. The shop looked like a
   different product, and every green button, chip and heading in shop.css was
   fighting a background that no longer matched.

   shop.css OWNS THE STOREFRONT'S LOOK. Its palette is --g-primary #2E7D32,
   --g-accent #43A047, --g-soft #E8F5E9 — deep grocery green on white — and it
   is not overridden here. This file now adds only what shop.css cannot know
   about: the things that are true because the page is running as an INSTALLED
   APP rather than a browser tab.
   ═══════════════════════════════════════════════════════════════════════════ */

/* iOS notch and home indicator. Without these the top bar sits under the status
   bar and the bottom of the page under the home bar — R4. Applied as padding on
   the existing chrome rather than as a new layout, so nothing moves in a browser
   where the insets are zero. */
.shop-topbar { padding-top: env(safe-area-inset-top); }
.shop-main   { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
body         { padding-left: env(safe-area-inset-left);
               padding-right: env(safe-area-inset-right); }

/* Installed, there is no browser chrome to pull down on, so overscroll must not
   bounce the whole document — it reads as the app coming loose. */
@media (display-mode: standalone) {
    html, body { overscroll-behavior-y: contain; }
}

/* Field density (Part 6.5) for the touch targets only. A shopper is one-handed
   and moving; 44px is the floor on any touch surface. Colour is deliberately
   NOT set here — shop.css decides that. */
.shop-topbar .shop-bag,
.btn-shop-primary,
.btn-shop-secondary { min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────────
   shop.css centres content in a 560px column, which is right on a phone and
   right on a desktop — a grocery list does not want to be 1900px wide.

   What it did NOT have is behaviour BELOW that width, because it was written
   against a phone and never resized. On a narrow window (a docked browser, a
   split screen, an emulator at 380px) the 16px gutters plus the fixed 60px
   category tiles overflowed and the page scrolled sideways. A horizontal
   scrollbar on a shop is how a customer loses the "Add" button.                */

/* Nothing may be wider than the window. The single most common cause of
   sideways scroll is one child that forgot. */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, table { max-width: 100%; }

@media (max-width: 420px) {
    .shop-container      { padding-left: 12px; padding-right: 12px; }
    .shop-topbar .brand  { font-size: 17px; }
    .shop-topbar .icons  { gap: 12px; }
    .cat-pill            { width: 64px; }
    .cat-pill .ic        { width: 52px; height: 52px; border-radius: 15px; }
}

/* Tablet and desktop: the column stays 560px, but the bottom tab bar should not
   stretch across a 27-inch monitor — it aligns with the content it belongs to. */
@media (min-width: 561px) {
    .shop-bottomnav { max-width: 560px; margin: 0 auto; left: 0; right: 0; }
}

/* The tab bar is fixed, so the last row of content must clear it or the final
   product in a list is permanently unreachable behind it. */
.shop-main { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

/* ── .btn-shop-secondary — a class that was referenced and never defined ─────
   shop.css has .btn-shop-primary and .btn-shop-dark. Several views, including
   the landing page and the guest checkout panel, use .btn-shop-secondary, which
   matched no rule at all — so "Sign in" and "Create an account" rendered as bare
   blue anchor text next to a green button.

   Defined here in the storefront's own palette: a green OUTLINE button. Outline
   rather than solid because the page already has one solid green primary ("Shop
   as a guest") and two solid buttons of equal weight is a screen that has not
   decided what it wants you to do.                                             */
.btn-shop-secondary {
    display: inline-block;
    padding: 13px 16px;
    border-radius: 12px;
    border: 1.5px solid var(--g-primary);
    background: #fff;
    color: var(--g-primary);
    font-weight: 700;
    font-size: 14px;
    font-family: inherit;
    text-align: center;
    text-decoration: none;
    min-height: 44px;
    cursor: pointer;
}
.btn-shop-secondary:hover  { background: var(--g-soft); color: var(--g-primary); }
.btn-shop-secondary:focus-visible { outline: 2px solid var(--g-primary); outline-offset: 2px; }

/* The cart badge inside the bottom tab. shop.css styles .count for the top bar,
   where it sits over a 40px icon button; in the tab bar the anchor is a column
   (icon over label), so it needs its own placement or it lands under the word. */
.shop-bottomnav a > .count {
    position: absolute;
    top: 2px;
    left: 50%;
    margin-left: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--g-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}