/* ═══════════════════════════════════════════════════════════════
   MOBILE — bottom tab bar (every page) + home page card layout
   (home page only, gated on body.page-home).

   Loaded after stylo.css, so this only ADDS rules and overrides a
   handful of home-page section classes under a max-width query.
   Nothing here changes markup, data, routes or any page's desktop
   appearance — purely presentational, mobile-viewport only.
   ═══════════════════════════════════════════════════════════════ */

/* ── Bottom tab bar ────────────────────────────────────────────── */
.bottom-nav { display: none; }

/* New icon-circle badge in hub-header.blade.php — kept in the DOM but
   never shown; an earlier pass used it, the current mobile layout
   matches a simpler "Title ... View All" header instead, so this stays
   off at every width (harmless leftover hook, not deleted from the
   partial in case a later layout wants it back). */
.hub-icon-badge { display: none; }

/* New mobile-only blocks in home/index.blade.php — hidden until the
   mobile home-page rule below turns them on, so desktop keeps the
   trending-chips row and the scrolling pulse ticker exactly as before. */
.hero-chips-depts,
.mobile-stat-bar-wrap,
.hero-search-ic,
.hero-search-spark,
.hub-cta-short,
.mobile-live-trending { display: none; }

@media (max-width: 991.98px) {
    .bottom-nav {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1040;
        background: rgba(255, 255, 255, .96);
        backdrop-filter: saturate(180%) blur(14px);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        border-top: 1px solid var(--stylo-border);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    }
    .bottom-nav-item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 6px 2px;
        text-decoration: none;
        color: var(--stylo-muted);
        font-size: 10.5px;
        font-weight: 600;
        line-height: 1.2;
        border-radius: var(--radius-md);
        transition: color .15s;
    }
    .bottom-nav-item i { font-size: 20px; line-height: 1; }
    .bottom-nav-item:active { background: var(--stylo-surface); }
    .bottom-nav-item.is-active { color: var(--stylo-accent); }
    .bottom-nav-icon-wrap { position: relative; display: inline-flex; }
    .bottom-nav-icon-wrap .badge-dot { top: -1px; right: -3px; }

    /* The fixed bar sits over the last inch of every page — give the
       page room so the footer (and back-to-top button) aren't hidden
       behind it. */
    body.has-bottom-nav { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
    .btn-back-to-top { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Home page — card layout ───────────────────────────────────── */
@media (max-width: 991.98px) {
    /* A warm, tinted page background makes the white cards below read
       as cards. Sections themselves stay transparent — .hub-panel is
       already the real "white bordered card" on desktop, and boxing
       the section around it too just nested a card inside a card. */
    body.page-home { background: #fff; }
    body.page-home .section-pad { padding: 20px 12px; }

    /* ── Hero: search-first, exactly as the sample — no tinted band, no
       decorative backdrop, no display heading above the field. ─────── */
    body.page-home .stylo-hero {
        background: #fff;
        padding: 14px 0 4px;
    }
    body.page-home .hero-decor { display: none; }
    body.page-home .hero-search-glow { display: none; }
    body.page-home .hero-eyebrow,
    body.page-home .hero-subtitle { display: none; }
    /* The h1 still matters for search engines and screen readers, so it
       is taken out of the visual flow rather than removed outright. */
    body.page-home .hero-title {
        position: absolute;
        width: 1px; height: 1px;
        margin: -1px; padding: 0; border: 0;
        overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
        white-space: nowrap;
    }

    /* Grid instead of flex: a flex row let the input's content-based
       intrinsic width push the button past the right edge (flex-shrink
       math didn't reliably pull it back at every width tried). A grid
       track is a hard constraint — "the rest" and "the button" —
       regardless of what either child wants to be. */
    body.page-home .hero-search-form .input-group {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        width: 100%;
    }
    body.page-home .hero-search-ic {
        display: block;
        position: absolute;
        left: 16px; top: 50%;
        transform: translateY(-50%);
        z-index: 5;
        color: #9a948c;
        font-size: 15px;
        line-height: 1;
        pointer-events: none;
    }
    body.page-home .hero-search-input {
        border-radius: 999px !important;
        border: 1px solid var(--stylo-border) !important;
        width: 100%;
        min-width: 0;
        padding-left: 40px !important;
    }
    body.page-home .hero-search-btn {
        border-radius: 999px !important;
        min-width: 0;
        padding: 0 18px !important;
        font-size: 14px;
        gap: 6px;
    }
    /* The sample's button leads with a sparkle, not a magnifier — the
       magnifier moved inside the field above. */
    body.page-home .hero-search-btn > .bi-search { display: none; }
    body.page-home .hero-search-spark { display: inline-block; font-size: 15px; }
    body.page-home .hero-search-btn span {
        display: inline;
        max-width: none;
        opacity: 1;
        white-space: nowrap;
    }

    /* The big dark "Try Smart Search" CTA is dropped on mobile — the
       Smart Search button beside the field and the Search tab in the
       bottom bar both already open the same guided conversation, so it
       was a third copy of one action taking a full row above the fold. */
    body.page-home .hero-cta { display: none; }

    /* ── Sections carried on mobile ─────────────────────────────────
       Shop by Department, "What fashion is doing right now", the beauty
       hub and the accessories hub. Everything after those — the
       shopping hub, the brand rail and the "how Smart Search works"
       explainer — is dropped here: on a phone they add several screens
       of scrolling below the point where the page has already made its
       case, and each one is reachable from the header, the bottom bar
       or the footer. Desktop still shows all of them. */
    body.page-home .hub-shopping,
    body.page-home .brands-section,
    body.page-home .how-section { display: none; }

    /* Live & Trending moves out from beside the department tiles and
       runs last instead, so the three product carousels (fashion,
       beauty, accessories) follow the department grid uninterrupted and
       the page closes on the live deal panel, straight into the footer. */
    /* Scoped through .dept-section .row on purpose: stylo.css sets
       ".dept-section .row > [class*='col-'] { display: flex }", which
       outranks a plain ".page-home .dept-live-col" (three classes to
       two) and quietly kept this column visible. */
    body.page-home .dept-section .row > .dept-live-col { display: none; }
    body.page-home .mobile-live-trending {
        display: block;
        padding-bottom: 28px;
    }

    body.page-home .hero-chips-trending { display: none; }
    body.page-home .hero-chips-depts {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        margin-top: 14px;
        padding-bottom: 2px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    body.page-home .hero-chips-depts::-webkit-scrollbar { display: none; }
    body.page-home .dept-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex: 0 0 auto;
        padding: 8px 14px;
        border-radius: 999px;
        border: 1px solid var(--stylo-border);
        background: #fff;
        color: var(--stylo-dark);
        font-size: 12.5px;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
    }
    body.page-home .dept-pill-ic {
        display: inline-flex;
        width: 18px; height: 18px;
        border-radius: 50%;
        overflow: hidden;
        color: var(--stylo-accent);
        font-size: 12px;
        align-items: center; justify-content: center;
    }
    body.page-home .dept-pill-ic img { width: 100%; height: 100%; object-fit: cover; }

    /* ── Static stat card instead of the scrolling pulse ticker ─────── */
    body.page-home .pulse-bar { display: none; }
    body.page-home .mobile-stat-bar-wrap { display: block; padding: 16px 12px 0; }
    body.page-home .mobile-stat-bar {
        display: flex;
        background: #fff;
        border: 1px solid var(--stylo-border);
        border-radius: var(--radius-lg);
        padding: 14px 8px;
    }
    body.page-home .mobile-stat {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        text-align: center;
        border-right: 1px solid var(--stylo-border);
        padding: 0 4px;
    }
    body.page-home .mobile-stat:last-child { border-right: none; }
    body.page-home .mobile-stat i { color: var(--stylo-accent); font-size: 17px; margin-bottom: 2px; }
    body.page-home .mobile-stat strong { font-size: 15px; font-weight: 800; color: var(--stylo-dark); line-height: 1; }
    body.page-home .mobile-stat span { font-size: 10px; color: var(--stylo-muted); line-height: 1.2; }

    /* ── Section header — "Title ... View All →" on one row, matching
       the sample; no icon badge, no subtitle line. ──────────────────── */
    body.page-home .hub-header {
        display: flex;
        /* stylo.css stacks this into a column below 576px; the sample
           keeps title and "view all" on one line at every phone width. */
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        margin-bottom: 14px;
    }
    body.page-home .hub-eyebrow,
    body.page-home .hub-subtitle {
        display: none;
    }
    body.page-home .hub-heading { min-width: 0; }
    body.page-home .hub-title {
        font-family: var(--stylo-sans);
        /* Scales with the viewport so the longest title we have —
           "What fashion is doing right now" — still holds one line on a
           360px screen, without shrinking to nothing on a big phone. */
        font-size: clamp(13px, 3.8vw, 17px);
        font-weight: 800;
        margin: 0;
        line-height: 1.25;
    }
    body.page-home .hub-cta {
        flex: 0 0 auto;
        border: none;
        background: none;
        padding: 0;
        color: var(--stylo-accent);
        font-size: 12.5px;
        white-space: nowrap;
    }
    /* "View All" instead of "Explore accessories" — see hub-header.blade.php */
    body.page-home .hub-cta-long { display: none; }
    body.page-home .hub-cta-short { display: inline; }
    body.page-home .hub-cta:hover { background: none; color: var(--stylo-accent-hover); }

    /* ── Department grid — 4 across, icon + name + chart, no count ────
       The sample runs the tile grid straight under its section header,
       so the "Live & Trending" column that sits left of it on desktop
       moves below the tiles here rather than ahead of them. Order only
       — both columns keep all their content and links. */
    body.page-home .dept-section .row > .col-lg-7 { order: 1; }
    body.page-home .dept-section .row > .col-lg-5 { order: 2; }
    body.page-home .dept-grid { row-gap: 10px; }
    body.page-home .dept-grid > [class*="col-"] { width: 25%; flex: 0 0 25%; max-width: 25%; padding-inline: 4px; }
    body.page-home .deptx { padding: 8px 6px; border-radius: var(--radius-lg); text-align: center; }
    body.page-home .deptx-head { flex-direction: column; gap: 4px; }
    body.page-home .deptx-thumb { width: 30px; height: 30px; }
    body.page-home .deptx-title { align-items: center; }
    body.page-home .deptx-name { font-size: 11px; text-align: center; }
    body.page-home .deptx-count,
    body.page-home .deptx-arrow { display: none; }
    body.page-home .deptx:active {
        border-color: var(--stylo-accent);
        background: var(--stylo-accent-light);
    }
    /* The sample shows a small chart under every department tile — an
       existing narrow-screen rule (stylo.css) hides it below 576px to
       keep the old 2-across layout simple; this is a different, wider
       4-across layout built specifically to match the sample, so the
       chart comes back here. */
    body.page-home .deptx .mw-wrap { display: block; height: 20px; }
    body.page-home .deptx .mw { display: block; padding-top: 4px; border-top: none; margin-top: 2px; }
    body.page-home .deptx .mw-svg { height: 20px; }
    /* The sample's tile is icon + name + chart and nothing else — the
       "Led by <division>" caption is a line these narrow tiles have no
       room for. Still in the DOM, just not painted here. */
    body.page-home .deptx .mw-cap { display: none; }

    /* ── Everything else: tile radius + the audience filter's selected
       colour, same as the sample's tile language ────────────────────── */
    body.page-home .how-card,
    body.page-home .brand-card {
        border-radius: var(--radius-lg);
    }

    /* ── Hub sections — a bare product row, as the sample shows ──────
       On desktop each hub is a white "panel" card holding a titled
       product rail, an audience filter and a column of charts beside
       it. The sample has none of that furniture on mobile: just the
       section title, "View All", and the products. So the panel loses
       its card chrome, and the inner title bar, the audience tabs and
       the analytics column beside the rail are all dropped here. The
       products themselves — and every link on them — are untouched, and
       desktop keeps the full layout. */
    body.page-home .hub .hub-panel {
        background: none;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
    }
    body.page-home .hub .panel-head,
    body.page-home .hub .rail-tabs,
    body.page-home .hub > .container > .row > .col-lg-4 { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — category / listing pages
   Same rule as the block above: everything is inside a max-width
   query, so desktop keeps the sidebar-and-grid layout untouched.
   ═══════════════════════════════════════════════════════════════ */

/* Mobile-only blocks in category/show.blade.php — off by default so
   they never appear on desktop. */
.zn-mob-search,
.zn-filterbar,
.zn-activebar { display: none; }

@media (max-width: 991.98px) {
    /* ── Search bar, matching the home hero ─────────────────────── */
    .zn-mob-search {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        margin-bottom: 14px;
    }
    .zn-mob-search-ic {
        position: absolute;
        left: 16px; top: 50%;
        transform: translateY(-50%);
        z-index: 5;
        color: #9a948c;
        font-size: 15px;
        line-height: 1;
        pointer-events: none;
    }
    .zn-mob-search-input {
        border-radius: 999px;
        border: 1px solid var(--stylo-border);
        padding: 10px 16px 10px 40px;
        /* 16px keeps iOS from zooming the page in on focus */
        font-size: 16px;
        min-width: 0;
        width: 100%;
    }
    .zn-mob-search-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border-radius: 999px;
        padding: 0 18px;
        font-size: 14px;
        white-space: nowrap;
    }

    /* ── Title + sort ───────────────────────────────────────────── */
    .zn-listing-head {
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px;
    }
    .zn-listing-head h1 { font-size: clamp(19px, 5.6vw, 26px); }
    .zn-sort-wrap {
        flex: 0 0 auto;
        margin-top: 0 !important;
        gap: 0 !important;
        position: relative;
        border: 1px solid var(--stylo-border);
        border-radius: 999px;
        padding: 4px 10px 4px 12px;
    }
    .zn-sort-ic { color: var(--stylo-dark); font-size: 14px; }
    .zn-sort-wrap .form-select {
        border: none;
        background-image: none;
        box-shadow: none;
        padding: 0 4px;
        font-size: 12.5px;
        font-weight: 600;
        max-width: 104px;
    }

    /* ── Filter chip row ────────────────────────────────────────── */
    .zn-filterbar {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 2px;
        margin-bottom: 12px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .zn-filterbar::-webkit-scrollbar { display: none; }
    .zn-fchip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex: 0 0 auto;
        padding: 8px 15px;
        border-radius: 999px;
        border: 1px solid var(--stylo-border);
        background: #fff;
        color: var(--stylo-dark);
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
    }
    .zn-fchip i { font-size: 12px; }
    .zn-fchip-primary {
        color: var(--stylo-accent);
        border-color: var(--stylo-accent-light);
        background: var(--stylo-accent-light);
    }
    .zn-fchip-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 17px; height: 17px;
        padding: 0 4px;
        border-radius: 999px;
        background: var(--stylo-accent);
        color: #fff;
        font-size: 10.5px;
    }
    .zn-fchip-icon { padding: 8px 12px; }

    /* ── Active filters ─────────────────────────────────────────── */
    .zn-activebar { display: block; margin-bottom: 14px; }
    .zn-activebar-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
    }
    .zn-activebar-title { font-size: 14px; font-weight: 700; color: var(--stylo-dark); }
    .zn-clear-all {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        color: var(--stylo-accent);
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
    }
    .zn-activebar-chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .zn-achip {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 13px;
        border-radius: 999px;
        background: var(--stylo-surface);
        font-size: 12.5px;
        font-weight: 600;
        color: var(--stylo-dark);
    }
    .zn-achip a { color: var(--stylo-muted); text-decoration: none; display: inline-flex; }

    /* ── Range read-out + pager ─────────────────────────────────── */
    .zn-listing-foot {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-top: 18px;
        padding: 12px 14px;
        border: 1px solid var(--stylo-border);
        border-radius: var(--radius-lg);
    }
    .zn-showing { font-size: 12.5px; color: var(--stylo-muted); }
    .zn-pager { display: inline-flex; align-items: center; gap: 10px; }
    .zn-pager-at { font-size: 12px; color: var(--stylo-muted); }
    .zn-pager-btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 6px 13px;
        border-radius: 999px;
        border: 1px solid var(--stylo-border);
        color: var(--stylo-dark);
        font-size: 12.5px;
        font-weight: 600;
        text-decoration: none;
    }
}

/* Desktop keeps the plain read-out with no box around it. */
@media (min-width: 992px) {
    .zn-listing-foot {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-top: 20px;
    }
    .zn-showing { font-size: 13px; color: var(--stylo-muted); }
    .zn-pager { display: inline-flex; align-items: center; gap: 12px; }
    .zn-pager-at { font-size: 13px; color: var(--stylo-muted); }
    .zn-pager-btn {
        display: inline-flex; align-items: center; gap: 5px;
        padding: 7px 15px; border-radius: 999px;
        border: 1px solid var(--stylo-border);
        color: var(--stylo-dark); font-size: 13px;
        font-weight: 600; text-decoration: none;
    }
}

/* The discount label only ever shows on mobile listings (see
   product-card.blade.php); desktop keeps the SALE / NEW wording. */
.product-badge .pb-pct { display: none; }

@media (max-width: 991.98px) {
    /* ── Page order ─────────────────────────────────────────────────
       The sample goes search → breadcrumb → title → filters → products.
       The category blurb is real, indexable copy, so rather than hiding
       it, it moves below the grid: still on the page and still crawled,
       just not a wall of text between the shopper and the products. */
    .zn-catpage { display: flex; flex-direction: column; }
    .zn-catpage > *              { order: 5; }
    .zn-catpage > .zn-mob-search { order: 1; }
    .zn-catpage > nav            { order: 2; }
    .zn-catpage > .zn-listing-head { order: 3; }
    .zn-catpage > .zn-filterbar  { order: 4; }
    .zn-catpage > .zn-activebar  { order: 5; }
    .zn-catpage > .row           { order: 6; }
    /* The category blurb is a paragraph of prose between the shopper and
       the products — on a phone it is pure scrolling. Kept in the DOM so
       the copy stays crawlable, but not painted here. */
    .zn-catpage > .cat-intro     { display: none; }

    /* Subcategories already sit at the top of the filter drawer as
       "Shop in <category>", so the duplicate chip row is dropped here.
       !important because the element carries Bootstrap's .d-flex, whose
       own display rule is !important and would otherwise win. */
    .zn-subcats { display: none !important; }

    /* ── Product card, matching the sample ──────────────────────────
       brand → name → price → rating, with the colour/material chips
       dropped; the stock order puts rating above price and adds chips. */
    .zn-catpage .product-info { display: flex; flex-direction: column; }
    .zn-catpage .product-brand  { order: 1; }
    .zn-catpage .product-name   { order: 2; }
    .zn-catpage .product-price  { order: 3; margin-top: 2px; }
    .zn-catpage .product-rating { order: 4; }
    .zn-catpage .product-chips  { display: none; }
    .zn-catpage .price-current  { color: var(--stylo-accent); }

    .product-badge.has-pct .pb-word { display: none; }
    .product-badge.has-pct .pb-pct  { display: inline; }
}

/* ── Grid / List view switch (category listings) ───────────────── */
.zn-viewtoggle { display: inline-flex; gap: 6px; }
.zn-viewbtn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 15px; border-radius: 999px;
    border: 1px solid var(--stylo-border);
    color: var(--stylo-dark); font-size: 12.5px;
    font-weight: 600; text-decoration: none;
}
.zn-viewbtn i { font-size: 13px; }
.zn-viewbtn.is-on {
    color: var(--stylo-accent);
    border-color: var(--stylo-accent);
    background: var(--stylo-accent-light);
}

/* List view: one product per row, image left, details right. Same card
   markup and the same links — only the arrangement changes. */
.zn-view-list > [class*="col-"] { width: 100%; flex: 0 0 100%; max-width: 100%; }
.zn-view-list .product-card > a { display: flex; gap: 14px; align-items: flex-start; }
/* stylo.css sizes listing images with '[class*="col-"] > .product-card
   .product-img-wrapper { height: 300px }' (230px under 768px), which
   outranks a two-class selector — matched here so the row stays a row
   instead of a 230px-tall thumbnail. */
.zn-view-list > [class*="col-"] > .product-card .product-img-wrapper {
    flex: 0 0 132px; width: 132px; height: 132px; aspect-ratio: auto;
}
.zn-view-list .product-info { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.zn-view-list .product-actions { display: none; }
@media (max-width: 575.98px) {
    .zn-view-list > [class*="col-"] > .product-card .product-img-wrapper {
        flex: 0 0 108px; width: 108px; height: 108px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — Style Journal (blog listing)
   ═══════════════════════════════════════════════════════════════ */

/* Section header + save button exist at every width; the header only
   shows on mobile, the save button rides along on the card. */
.blog-listhead { display: none; }

.blog-save {
    border: none;
    background: none;
    padding: 4px;
    line-height: 1;
    color: var(--stylo-muted);
    align-self: flex-start;
    cursor: pointer;
}
.blog-save .bi-bookmark-fill { display: none; }
.blog-save.is-on { color: var(--stylo-accent); }
.blog-save.is-on .bi-bookmark      { display: none; }
.blog-save.is-on .bi-bookmark-fill { display: inline; }

@media (max-width: 991.98px) {
    /* Breadcrumb is one more line above the fold on a page whose title
       already says where you are. */
    .blog-crumbs { display: none; }
    .blog-masthead { padding-top: 4px; }
    /* .blog-wrap starts flush against the sticky header, so the search
       field was sitting directly on the header's bottom edge. */
    .blog-wrap > .container:first-child .zn-mob-search { margin-top: 14px; }

    /* Category pills stay on one scrolling line instead of wrapping to
       three rows of chips. */
    .blog-filters {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .blog-filters::-webkit-scrollbar { display: none; }
    .blog-chip { flex: 0 0 auto; white-space: nowrap; }

    /* Featured story: text over the image as one compact dark card,
       rather than a full-width photo stacked on a block of copy. */
    .blog-hero { position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; }
    .blog-hero-media { position: absolute; inset: 0; }
    .blog-hero-media img { width: 100%; height: 100%; object-fit: cover; }
    .blog-hero-tag { display: none; }
    .blog-hero-body {
        position: relative;
        z-index: 1;
        padding: 18px 16px;
        min-height: 240px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* Left-weighted scrim: copy stays readable, the picture still shows. */
        background: linear-gradient(100deg, rgba(20,20,22,.94) 0%, rgba(20,20,22,.88) 42%, rgba(20,20,22,.30) 78%, rgba(20,20,22,.12) 100%);
        color: #fff;
    }
    .blog-hero-body .blog-cat { color: rgba(255,255,255,.72); font-size: 10.5px; letter-spacing: 1.2px; }
    .blog-hero-title { color: #fff; font-size: 21px; max-width: 72%; margin: 6px 0 8px; }
    .blog-hero-excerpt { color: rgba(255,255,255,.82); font-size: 13px; max-width: 68%; margin: 0 0 10px; }
    .blog-hero-body .blog-meta { display: none; }
    .blog-hero-cta { color: var(--stylo-accent); font-weight: 700; font-size: 13.5px; }

    /* "Latest Articles ... View All" */
    .blog-listhead {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: 22px 0 12px;
    }
    .blog-listhead-title { font-size: 18px; font-weight: 800; margin: 0; }
    .blog-listhead-cta {
        border: none; background: none; padding: 0;
        color: var(--stylo-accent); font-size: 13px; font-weight: 700;
        display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    }

    /* Article rows: image left, copy right, save button on the end. */
    .blog-grid { display: flex; flex-direction: column; gap: 12px; }
    .blog-card {
        display: flex;
        /* stylo.css sets flex-direction: column on .blog-card at the same
           specificity — without restating it the row stayed a stack. */
        flex-direction: row;
        align-items: stretch;
        gap: 12px;
        padding: 10px;
        border: 1px solid var(--stylo-border);
        border-radius: var(--radius-lg);
        background: #fff;
    }
    .blog-card-media {
        position: relative;
        flex: 0 0 118px;
        width: 118px;
        /* the desktop card is a 16:9 banner; here it is a square thumb */
        aspect-ratio: auto;
        border-radius: var(--radius-md);
        overflow: hidden;
        align-self: flex-start;
    }
    .blog-card-media img { width: 100%; height: 118px; object-fit: cover; display: block; }
    .blog-card-cat {
        position: absolute; top: 6px; left: 6px;
        padding: 3px 8px; border-radius: 999px;
        background: var(--stylo-accent);
        /* stylo.css forces the accent colour with !important, which on the
           accent-filled pill left orange text on an orange chip. */
        color: #fff !important;
        font-size: 8.5px; font-weight: 800; letter-spacing: .6px;
        text-transform: uppercase; white-space: nowrap;
        max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis;
    }
    .blog-card-body {
        flex: 1 1 auto; min-width: 0;
        display: flex; flex-direction: column; gap: 4px;
        padding: 2px 0 0;   /* desktop pads 20px 22px; too much inside a row */
    }
    .blog-card-body .blog-meta { gap: 12px; font-size: 11px; margin: 0; }
    .blog-card-title { font-size: 15px; line-height: 1.3; margin: 0; }
    .blog-card-excerpt {
        font-size: 12.5px; line-height: 1.45; margin: 0;
        display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* The blog's own shop CTA repeats what the bottom bar already offers. */
    .blog-shop-cta { display: none; }
}

/* View switch above the products (see category/show.blade.php). */
.zn-viewbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}
@media (max-width: 991.98px) {
    .zn-viewbar { justify-content: flex-start; }
    .zn-viewbtn { padding: 6px 14px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — static pages (about, contact, legal, help …)
   These already reflow responsively; this pass is about the three
   things that cost the most vertical space on a phone.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    /* Hero blocks are sized for a desktop viewport. */
    .pg-hero { padding-top: 18px; padding-bottom: 18px; }
    .pg-section { padding-top: 22px; padding-bottom: 22px; }
    .pg-title { font-size: clamp(24px, 7vw, 34px); line-height: 1.15; }
    .pg-lead { font-size: 14px; }

    /* "On this page" was a five-row block of chips before a legal page
       even began. One scrolling line instead — every link still there. */
    .lg-toc {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 2px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .lg-toc::-webkit-scrollbar { display: none; }
    .lg-toc a { flex: 0 0 auto; white-space: nowrap; }
    .lg-rail-title { margin-bottom: 8px; }
    /* The rail's "ask us" card repeats the contact link that already
       closes every legal page. */
    .lg-help { display: none; }

    /* Forms: 16px keeps iOS from zooming the page in on focus, and the
       contact form's radio grid needs room to be tappable. */
    .pg-section input,
    .pg-section select,
    .pg-section textarea { font-size: 16px; }

    /* Long legal prose: keep code, tables and wide blocks inside the
       screen instead of forcing the whole page to scroll sideways. */
    .lg-body table { display: block; width: 100%; overflow-x: auto; }
    .lg-body pre { overflow-x: auto; }
    .lg-body img { max-width: 100%; height: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   Brands & stores listing
   ═══════════════════════════════════════════════════════════════ */

/* "Can't find your favourite brand?" prompt — shown at every width. */
.zn-brandask {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    background: var(--stylo-accent-light);
}
.zn-brandask-ic {
    display: flex;
    flex: 0 0 auto;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: var(--stylo-accent);
    font-size: 19px;
}
.zn-brandask-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.zn-brandask-text strong { font-size: 15px; color: var(--stylo-dark); }
.zn-brandask-text span { font-size: 13px; color: var(--stylo-body); }
.zn-brandask-btn {
    flex: 0 0 auto;
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--stylo-accent);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.zn-brandask-btn:hover { background: var(--stylo-accent-hover); color: #fff; }

@media (max-width: 991.98px) {
    .zn-brandpage { padding-top: 14px !important; }

    /* A–Z on one swipeable line instead of two wrapped rows. */
    .zn-alpha {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: 6px !important;
        padding-bottom: 2px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .zn-alpha::-webkit-scrollbar { display: none; }
    .zn-alpha .btn { flex: 0 0 auto; }

    /* Three across, compact — two columns of tall cards was most of a
       screen per four brands. */
    .zn-brandgrid { --bs-gutter-x: .5rem; --bs-gutter-y: .5rem; }
    .zn-brandgrid .brand-card {
        min-height: 0;
        padding: 14px 8px;
        border-radius: var(--radius-lg);
    }
    .zn-brandgrid .brand-logo { max-height: 26px; margin-bottom: 8px; }
    .zn-brandgrid .brand-initial { width: 36px; height: 36px; font-size: 14px; margin-bottom: 6px; }
    .zn-brandgrid .brand-name { font-size: 12px; line-height: 1.2; }
    .zn-brandgrid .brand-count { font-size: 10px; }

    /* The prompt stacks so the button is not squeezed to two words a line. */
    .zn-brandask { flex-wrap: wrap; padding: 14px; gap: 12px; }
    .zn-brandask-btn { flex: 1 1 100%; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — offers hub + shortening the long static pages
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    /* ── /offers ─────────────────────────────────────────────────── */
    .zn-offerspage { padding-top: 14px !important; }
    /* Three stacked btn-lg pills is a third of a screen before a single
       deal shows. One row of compact pills instead. */
    .zn-offerlinks {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: 8px !important;
        margin-bottom: 20px !important;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .zn-offerlinks::-webkit-scrollbar { display: none; }
    .zn-offerlinks .btn {
        flex: 0 0 auto;
        font-size: 13px !important;
        padding: 9px 16px !important;
        white-space: nowrap;
    }
    .zn-offerspage .row.g-3 { margin-bottom: 24px !important; }

    /* ── Long static pages ───────────────────────────────────────
       These read as marketing pages built for a wide screen: image
       collages, a scrolling logo wall and pull-quotes between every
       block of copy. On a phone they are several screens of scrolling
       before the point of the page. The decorative blocks come out;
       every heading and paragraph stays. */
    .pg-collage,
    .pg-figures,
    .pg-logos,
    .pg-quote { display: none !important; }

    /* Tighter rhythm throughout. */
    .pg-section { padding-top: 18px !important; padding-bottom: 18px !important; }
    .pg-hero { padding-top: 14px !important; padding-bottom: 14px !important; }
    .pg-h2 { font-size: clamp(18px, 5.2vw, 24px) !important; line-height: 1.2; }
    .pg-p, .pg-section p { font-size: 14px; line-height: 1.55; }
    .pg-steps, .pg-facts, .pg-grid { gap: 12px !important; }
    .pg-cta { padding-top: 22px !important; padding-bottom: 22px !important; }
    .pg-hero-actions .btn { font-size: 14px; }
}