/* =========================================================================
   Phone layout — loads after site.css and only applies below 768px.
   Desktop and tablet are untouched: every rule in this file sits inside a
   max-width media query, so nothing here can reach a wide screen.

   The markup is the same on every device. Only the presentation changes,
   which keeps one URL, one page in Google's index and one template to edit.
   ========================================================================= */

@media (max-width: 767px) {

    /* ---------------------------------------------------------------
       Shell — a shorter bar leaves more of the screen for content.
       --------------------------------------------------------------- */
    :root { --nav-h: 58px; }

    .logo-text { font-size: 21px; }
    .logo img { max-height: 32px; }

    .section { padding: 26px 0 34px; }

    /* On the store page the offers are the first thing on the screen, so the
       breadcrumb trail above them is hidden here. Other pages keep theirs. */
    .store-crumbs { display: none; }

    /* Elsewhere they scroll sideways instead of wrapping onto three lines. */
    .crumbs {
        padding-top: 12px;
        font-size: 12.5px;
        white-space: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .crumbs::-webkit-scrollbar { display: none; }

    /* ---------------------------------------------------------------
       Store detail — the codes and deals open the page.

       `display: contents` dissolves the hero grid, the two-column layout
       and the main column, so every block on the page becomes an item of
       one flex column and can be placed independently. The HTML itself is
       untouched: the H1 and the crawl order stay exactly as they are, only
       the paint order changes.
       --------------------------------------------------------------- */
    .store-wrap { display: flex; flex-direction: column; gap: 18px; }
    .store-hero,
    .store-layout,
    .store-main { display: contents; }

    .store-main > .content-block.offers-block { order: 1; }  /* codes & deals */
    .store-banner { order: 2; }                              /* H1 + counts   */
    .store-id-card { order: 3; }                             /* rating, review */
    .store-sidebar { order: 4; }                             /* summary widgets */
    .store-main > .content-block { order: 5; }               /* everything else */

    /* Spacing is the column's gap now, so the stacking margins come off. */
    .store-layout,
    .content-block + .content-block { margin-top: 0; }

    /* Section headings above the list — enough to label it, no more. */
    .store-main .block-head { margin-bottom: 2px; }
    .block-eyebrow { font-size: 11px; }
    .content-h2 { font-size: 18px; line-height: 1.3; margin-top: 6px; }
    .content-sub { font-size: 13.5px; margin-top: 5px; }

    .store-sidebar { gap: 14px; }

    /* ---------------------------------------------------------------
       Store strip — logo, name, rating and the review button, sitting
       under the offers rather than above them.
       --------------------------------------------------------------- */
    .store-id-card {
        display: grid;
        grid-template-columns: 54px minmax(0, 1fr) auto;
        grid-template-areas:
            "logo name   btn"
            "logo rating btn";
        align-items: center;
        column-gap: 12px;
        padding: 12px 14px;
        border-radius: 18px;
        text-align: left;
    }
    .store-id-logo {
        grid-area: logo;
        width: 54px; height: 54px;
        font-size: 18px;
    }
    .store-id-logo img { padding: 8px; }
    .store-id-name {
        grid-area: name;
        align-self: end;
        margin-top: 0;
        font-size: 17px;
        line-height: 1.25;
    }
    .store-id-rating {
        grid-area: rating;
        align-self: start;
        margin-top: 3px;
        font-size: 12.5px;
    }
    .store-review-btn {
        grid-area: btn;
        display: flex; align-items: center; justify-content: center;
        min-height: 38px;
        margin-top: 0;
        padding: 8px 13px;
        font-size: 12.5px;
        white-space: nowrap;
    }
    /* Inside the widgets further down it is a normal full-width button. */
    .widget .store-review-btn { width: 100%; min-height: 44px; margin-top: 14px; font-size: 14px; }

    /* ---------------------------------------------------------------
       Purple banner — same information, phone proportions.
       --------------------------------------------------------------- */
    .store-banner {
        gap: 12px;
        padding: 16px;
        border-radius: 18px;
    }
    .store-banner-pill { padding: 4px 11px; font-size: 10.5px; }
    .store-banner h1 { font-size: 20px; line-height: 1.25; }
    .store-banner-copy p {
        margin-top: 5px;
        font-size: 13px;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .store-banner-main { gap: 12px; }
    /* Counts read as two small chips rather than two stacked blocks. */
    .store-banner-stats { width: 100%; gap: 8px; }
    .store-stat {
        flex: 1;
        display: flex; align-items: baseline; justify-content: center; gap: 6px;
        padding: 8px 10px; border-radius: 11px;
    }
    .store-stat .num { font-size: 16px; }
    .store-stat .cap { margin-top: 0; font-size: 10px; }

    /* ---------------------------------------------------------------
       Filter tabs — pinned under the header while the list scrolls, and
       swipeable sideways so they never wrap.
       --------------------------------------------------------------- */
    /* Centring a strip that overflows would clip its first pill out of reach,
       so on a phone it always starts at the left edge. */
    .deals-tabs,
    .deals-tabs.is-centered {
        position: sticky;
        top: var(--nav-h);
        z-index: 20;
        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 8px;
        /* Full-bleed strip: the pills slide under the screen edge instead of
           stopping short of it, and the pinned background spans the width. */
        margin: 14px -20px 0;
        padding: 10px 20px;
        scroll-padding-inline: 20px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        background: var(--surface);
        box-shadow: 0 1px 0 var(--line);
    }
    .deals-tabs::-webkit-scrollbar { display: none; }
    .filter {
        flex: none;
        min-height: 38px;
        padding: 8px 15px;
        font-size: 13px;
        white-space: nowrap;
    }

    /* ---------------------------------------------------------------
       Offer card — badge and copy on one row, a full-width action bar
       underneath. The action is the widest tap target on the card.
       --------------------------------------------------------------- */
    .deal-list { gap: 12px; margin-top: 14px; }

    .deal-row {
        display: grid;
        grid-template-columns: 58px minmax(0, 1fr);
        grid-template-areas:
            "badge copy"
            "cta   cta";
        align-items: start;
        column-gap: 12px;
        row-gap: 14px;
        padding: 14px;
        border-radius: 18px;
    }
    .deal-row:active { transform: scale(.995); }

    .deal-badge {
        grid-area: badge;
        width: 58px; min-height: 58px;
        padding: 6px;
        border-radius: 14px;
    }
    .deal-badge .num { font-size: 17px; }
    .deal-badge .cap { font-size: 9.5px; letter-spacing: .02em; }

    .deal-copy { grid-area: copy; }
    .deal-tagrow { gap: 8px; }
    .deal-tag { padding: 3px 9px; font-size: 10px; }
    .deal-verified { font-size: 11.5px; }
    .deal-copy h3 { margin-top: 7px; font-size: 15.5px; line-height: 1.35; }
    .deal-copy p {
        margin-top: 5px;
        font-size: 13px;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .deal-cta {
        grid-area: cta;
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px;
        width: 100%;
    }
    .deal-btn { width: 100%; min-height: 46px; font-size: 15px; }
    .deal-exp { font-size: 11.5px; text-align: center; color: var(--muted); }

    /* The reveal control: taller for thumbs, and the code tail stays visible. */
    .deal-cta .code-reveal { height: 48px; }
    .deal-cta .code-btn { right: 52px; font-size: 15px; }
    .deal-cta .code-reveal .code-text { padding-right: 18px; font-size: 14px; }

    /* ---------------------------------------------------------------
       Sidebar widgets, once they are below the offers.
       --------------------------------------------------------------- */
    .widget { padding: 18px; border-radius: 18px; }
    .widget-title { font-size: 17px; }
    .summary-list li { padding: 8px 0; font-size: 13.5px; }
    .similar-grid { gap: 8px; }

    /* The activity chart is fixed-width by nature — let it scroll. */
    .chart-card .bar-wrap { overflow-x: auto; scrollbar-width: none; }
    .chart-card .bar-wrap::-webkit-scrollbar { display: none; }

    /* Footer clears the iPhone home indicator. */
    .footer-note { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
}

/* -------------------------------------------------------------------
   Touch devices have no hover, so the desktop hover animations either
   never fire or stick after a tap. Replace them with a press state.
   ------------------------------------------------------------------- */
@media (hover: none) and (max-width: 767px) {
    .deal-row:hover { border-color: #E6E6EF; box-shadow: none; }
    .code-reveal:hover .code-btn { right: 52px; background: var(--purple); }
    .code-btn:active { background: var(--purple-700); }
    .deal-btn:active { background: var(--purple-700); }

    .filter, .deal-btn, .code-btn, .store-review-btn {
        -webkit-tap-highlight-color: transparent;
    }
}

/* Very narrow phones (≤360px): shave the badge column. */
@media (max-width: 360px) {
    .deal-row { grid-template-columns: 52px minmax(0, 1fr); column-gap: 10px; }
    .deal-badge { width: 52px; min-height: 52px; }
    .deal-badge .num { font-size: 15.5px; }
    .store-id-card { grid-template-columns: 56px minmax(0, 1fr); }
    .store-id-logo { width: 56px; height: 56px; }
}