/* =========================================================
   Home + catalog (product_list.html) — T-212, v3 "Field Clinic"

   Tokens only from style.css :root. No @layer/nesting/IDs/!important.
   Breakpoints used here are the four canonical ones (699 / 899-900 /
   1150) — see PLAN.md "Architecture decisions".

   ---- style.css selectors T-221 must delete once this file ships ----
   (dead now that product_list.html no longer renders the markup they
   styled; each verified to have no other template call site)
     style.css:1031-1050  .hero__panel, .hero__badge, .hero__badge img
                          — old circular-logo/paw hero panel, replaced
                          below by .hero__photo / .hero__media.
     style.css:1051-1055  the old `@media (max-width: 899px)` block that
                          collapsed .hero to one column and hid
                          .hero__panel — fully superseded by this file's
                          `@media (max-width: 1149px)` hero rules.
     style.css:1080       .hero__paw, .ticker { display: none; } — both
                          that markup blocks are gone outright.
     style.css:1120-1122  .cat-tile strong / .cat-tile__link /
                          .cat-tile:hover .cat-tile__link — the old
                          inline tile markup; store/templates/store/
                          _category_tiles.html renders .cat-tile__name /
                          .cat-tile__count instead.
   NOT listed (still live elsewhere, do not delete): .toolbar,
   .field-inline, select.select — admin_dashboard.html still uses all
   three for its range picker.

   css_gap #1 (for T-221): style.css's `.chip` rule (~line 1277) sets a
   fixed `height: 40px`, 4px under the >=44px hit-area floor (same defect
   class as `.btn--sm`, already fixed in style.css itself). This page
   turned `.chip` into its primary filter/sort surface (new "Clear" chip
   + the 5 sort chips that replaced the old <select>), so the gap is
   compensated below, scoped to this page via body.page--shop. T-221
   should raise `.chip` itself to `min-height: 44px` globally and delete
   the page-scoped override below once it does.
   ========================================================= */

/* ----------  Hero: phone card <1150, desktop split ≥1150  ----------
   .hero itself (dark gradient card, radius, .hero__content text block,
   .hero__eyebrow/h1/.lede/.btn-row, .hero__chip) is core v3 CSS from
   T-206a/b and stays as-is; only the breakpoint (900 -> 1150) and the
   photo/media markup are this page's own. */
.hero__photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 800 / 320;
    object-fit: cover;
}
.hero__media { display: none; }

@media (max-width: 1149px) {
    .hero { grid-template-columns: 1fr; }
    .hero__content { padding: 30px 24px 34px; }
}

@media (min-width: 1150px) {
    .hero__photo { display: none; }
    .hero__media {
        display: block;
        position: relative;
        overflow: hidden;
        min-height: 380px;
    }
    .hero__photo-desktop {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}

/* 56px square icon-only WhatsApp button next to "Browse products" */
.hero .btn-row .btn--light { flex: 1; }
.hero__wa-btn {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    padding: 0;
}

/* ----------  Section-head action groups (link + scroll-nav together) ---------- */
.section-head__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ----------  Value props (3-up card, landing only)  ---------- */
.value-props {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    text-align: center;
}
.value-props__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.value-props__item b { font-size: var(--fs-13); line-height: 1.25; }
.value-props__item > span:last-child { font-size: var(--fs-12); color: var(--muted); line-height: 1.3; }
.value-props__icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.value-props__icon--forest { background: var(--forest-50); color: var(--forest-800); }
.value-props__icon--teal { background: var(--teal-50); color: var(--teal-700); }
.value-props__icon--soil { background: var(--soil-100); color: var(--soil-800); }

@media (min-width: 700px) {
    .value-props { gap: 24px; }
}

/* ----------  Featured strip: 2-up grid <900, horizontal strip ≥900  ----------
   .featured-scroll's default (style.css) flex/scroll-snap row is the
   ≥900 behaviour; below 900 this page turns it into a plain 2-up grid
   and hides the (otherwise ≥700px) scroll-nav buttons, since there is
   nothing to scroll in a grid. */
@media (max-width: 899px) {
    .featured-scroll {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        overflow: visible;
        scroll-snap-type: none;
        padding: 0;
        margin: 0;
    }
    .featured-scroll .product-card {
        flex: initial;
        width: auto;
        scroll-snap-align: none;
    }
    body.page--shop .scroll-nav { display: none; }
}

/* ----------  Product grid: 2-up <700, 3-up 700-1149, 4-up >=1150  ---------- */
.product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
@media (min-width: 700px) and (max-width: 1149px) {
    .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}
@media (min-width: 1150px) {
    .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
}


/* ----------  Empty state: category tiles inset  ---------- */
.empty-state .hscroll {
    margin: 18px auto 6px;
    max-width: 560px;
    justify-content: center;
}

/* Orchestrator (post-T-212 visual QA): the phone hero is a dark forest-800
   card, so the .accent span must be a light tint there (forest-600 on
   forest-800 is ~1.9:1). The desktop split hero (≥1150) sits on paper and
   keeps the default forest-600 accent. */
.hero .accent { color: var(--forest-100); }
@media (min-width: 1150px) { .hero .accent { color: var(--forest-600); } }