/*
|--------------------------------------------------------------------------
| Public site theme
|--------------------------------------------------------------------------
|
| A thin layer over Bootstrap 5: brand tokens, then the handful of pieces
| Bootstrap has no utility for (the header strips, the coupon and code
| cards, the A-Z bar, the pill filters and the FAQ accordion).
|
*/

:root {
    --navy: #093d77;
    --navy-dark: #062c58;
    --yellow: #f4d35f;
    --yellow-dark: #e8c34d;
    --yellow-soft: #f9e9ae;
    --cream: #faf0d6;
    --cream-light: #fff9f6;
    --peach: #ffece5;
    --ink: #101418;
    --ink-soft: #45536b;
    --muted: #64728c;
    --muted-light: #93a2b5;
    --line: #e9ecf2;
    --line-strong: #dde3ec;
    --surface: #ffffff;
    --surface-2: #f6f7f9;
    --surface-3: #f3f3f3;
    --grey-pill: #e8e8e8;
    --green: #16a34a;
    --green-soft: #e2f5ea;
    --red: #d7263d;
    --red-soft: #fdeaed;
    --mint: #dcf1e8;

    --radius-sm: 12px;
    --radius: 20px;
    --radius-lg: 26px;
    /* Two-stop shadows: a tight contact shadow under a soft ambient one, so
       cards read as lifted rather than as a grey halo. */
    --shadow-sm: 0 1px 2px rgba(18, 38, 63, .04), 0 2px 8px rgba(18, 38, 63, .05);
    --shadow: 0 2px 6px rgba(18, 38, 63, .05), 0 8px 24px rgba(18, 38, 63, .07);
    --shadow-lg: 0 4px 12px rgba(18, 38, 63, .06), 0 18px 44px rgba(18, 38, 63, .10);

    --speed: .18s;
    --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ---------------------------------------------------------------- base */

body {
    font-family: 'Jost', 'Century Gothic', 'Segoe UI', system-ui, sans-serif;
    color: var(--ink);
    background: var(--surface);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { text-decoration: none; transition: color var(--speed) var(--ease); }

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--ink);
    line-height: 1.25;
    letter-spacing: -.011em;
}

::selection { background: var(--yellow-soft); color: var(--ink); }

/* One focus ring for every control, so a keyboard user gets the same cue
   wherever they land. The outline follows each element's own radius. */
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.topbar :focus-visible,
.site-footer :focus-visible,
.hero-panel :focus-visible,
.news-band :focus-visible,
.news-wide :focus-visible,
.news-mini :focus-visible { outline-color: var(--yellow); }

.text-navy { color: var(--navy) !important; }
.bg-navy { background-color: var(--navy) !important; }
.bg-yellow { background-color: var(--yellow) !important; }
.bg-surface-2 { background-color: var(--surface-2) !important; }

.eyebrow {
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--muted);
}

.section-title {
    font-size: clamp(1.35rem, 1.1rem + .7vw, 1.55rem);
    font-weight: 700;
    letter-spacing: -.018em;
    line-height: 1.3;
    margin: 0;
}

.section-sub {
    font-size: .95rem;
    line-height: 1.5;
    color: var(--muted);
    margin: .55rem 0 0;
    max-width: 31rem;
}

.view-all {
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
}
.view-all i { font-size: 1.15rem; }
.view-all:hover { color: var(--navy-dark); }

/* The category header pairs its label with a chevron set right beside it,
   rather than the arrow held at arm's length the other sections use. */
.view-all-chevron { gap: .45rem; font-size: 1rem; }
.view-all-chevron i { font-size: .95rem; }

/* Grid gutters. Bootstrap draws a row's gutter with negative margins, so a
   gutter wider than the container's own padding would push the page sideways
   on a narrow screen — the artwork's wider gutters only apply from the
   desktop breakpoint up, where the container has room to spare. */
.row-gutter-wide, .row-gutter-cards, .row-gutter-tiles, .row-gutter-rows {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}
@media (min-width: 1200px) {
    .row-gutter-wide { --bs-gutter-x: 3.5rem; --bs-gutter-y: 1.75rem; }
    .row-gutter-cards { --bs-gutter-x: 2.25rem; --bs-gutter-y: 2.75rem; }
    .row-gutter-tiles { --bs-gutter-x: 2.25rem; --bs-gutter-y: 2.25rem; }
    .row-gutter-rows { --bs-gutter-x: 2rem; --bs-gutter-y: 2rem; }
}

.clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* -------------------------------------------------------------- header */

.topbar {
    background: var(--navy);
    color: #fff;
    font-size: 1rem;
}
.topbar a { color: #fff; }
.topbar .mail-ico { color: var(--yellow); font-size: 1.15rem; }
.topbar .social {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--peach);
    color: var(--navy);
    font-size: 1.05rem;
}
.topbar .social { transition: background-color var(--speed) var(--ease), transform var(--speed) var(--ease); }
.topbar .social:hover { background: #fff; transform: translateY(-1px); }

.site-header { background: #fff; }

/* The brand and blog cells share the leftover width, so the search bar lands
   on the page's centre line as it does on the artwork. */
@media (min-width: 768px) {
    .header-cell { flex: 1 1 0; min-width: 0; }
}

/* Brand lockup: a honeycomb mark beside the wordmark, whose second half
   carries the accent colour. .brand-invert is the version for dark panels. */
.brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--navy);
    line-height: 1;
}
.brand:hover { color: var(--navy); }

.brand-mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: inherit;
    font-size: 1.95rem;
    transition: transform .25s ease;
}
.brand:hover .brand-mark { transform: rotate(-8deg); }

.brand-word {
    font-size: 1.95rem;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: uppercase;
    white-space: nowrap;
}
.brand-accent { color: inherit; }

/* The newsletter band and the footer carry the same lockup one step larger. */
.brand-lg .brand-mark, .brand-lg .brand-word { font-size: 2.6rem; }

.brand-invert { color: #fff; }
.brand-invert:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .brand-mark, .brand:hover .brand-mark { transition: none; transform: none; }
}

.search-shell {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--navy);
    border-radius: 999px;
    background: #fff;
    height: 40px;
    width: 100%;
    max-width: 530px;
    transition: box-shadow var(--speed) var(--ease);
}
/* The pill must not clip its own children: the category menu is absolutely
   positioned inside it, and an overflow:hidden here swallows it whole. The
   children carry no background of their own, so nothing spills past the
   rounded ends. */
.search-shell > .dropdown { position: relative; }
.search-shell .dropdown-menu { z-index: 1030; }
.search-shell:focus-within { box-shadow: 0 0 0 3px rgba(3, 60, 118, .14); }
.search-shell :focus-visible { outline: 0; }
.search-shell .cat-toggle {
    border: 0;
    background: transparent;
    font-size: 1rem;
    padding: 0 .85rem 0 1.15rem;
    color: var(--ink);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.search-shell .divider { width: 1px; height: 22px; background: var(--line); }
.search-shell input {
    border: 0;
    outline: 0;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 .9rem;
    font-size: .95rem;
    color: var(--ink);
    background: transparent;
}
.search-shell input::placeholder { color: var(--muted-light); }
.search-shell .go {
    border: 0;
    background: transparent;
    color: var(--navy);
    padding: 0 1.1rem 0 .5rem;
    font-size: 1.05rem;
    transition: color var(--speed) var(--ease);
}
.search-shell .go:hover { color: var(--navy-dark); }
.search-shell .cat-toggle { transition: color var(--speed) var(--ease); }
.search-shell .cat-toggle:hover { color: var(--navy); }

.btn-blog {
    display: inline-flex;
    align-items: center;
    height: 40px;
    background: var(--navy);
    color: #fff;
    border-radius: 999px;
    font-size: 1.05rem;
    font-weight: 600;
    padding: 0 1.9rem;
}
.btn-blog:hover { background: var(--navy-dark); color: #fff; box-shadow: var(--shadow-sm); }

/* The yellow band under the header: pill links, three on the left and one on
   the right. The pill carries hover and current-page state, so a label never
   changes width when its page becomes active and the row never reflows. */
.navstrip {
    background: var(--yellow);
    border-bottom: 1px solid rgba(9, 61, 119, .10);
}
.navstrip .nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem 2rem;
    flex-wrap: wrap;
    padding: .5rem 0;
}
.navstrip .nav-group { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
/* Pull the outer pills' own padding back, so their labels sit on the same
   vertical line as the brand and the blog button in the header above. */
.navstrip .nav-group-start { margin-left: -1.05rem; }
.navstrip .nav-group-end { margin-right: -1.05rem; }
.navstrip a {
    display: inline-block;
    padding: .45rem 1.05rem;
    border-radius: 999px;
    color: var(--navy);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .005em;
    line-height: 1.35;
    white-space: nowrap;
    transition: background-color var(--speed) var(--ease),
                color var(--speed) var(--ease),
                box-shadow var(--speed) var(--ease);
}
.navstrip a:hover { background: rgba(255, 255, 255, .62); color: var(--navy-dark); }
.navstrip a.is-active {
    background: var(--navy);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.navstrip a.is-active:hover { background: var(--navy-dark); color: #fff; }

/* Phones swap the pill row for a hamburger. The row itself becomes the panel
   the hamburger opens, so both layouts are served by one set of links. */
.navstrip .nav-toggle {
    display: none;
    align-items: center;
    gap: .6rem;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--navy);
    font-size: .95rem;
    font-weight: 600;
    padding: .65rem 0;
}
.navstrip .nav-toggle-bars {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 22px; flex: 0 0 auto;
}
.navstrip .nav-toggle-bars span {
    display: block; width: 100%; height: 2px; border-radius: 2px; background: var(--navy);
    transition: transform var(--speed) var(--ease), opacity var(--speed) var(--ease);
}
.navstrip .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.navstrip .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.navstrip .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* -------------------------------------------------------------- footer */

.site-footer { background: var(--navy); color: #fff; }
.site-footer h5 {
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    margin-bottom: 1.1rem;
}
.site-footer a { color: rgba(255, 255, 255, .88); font-size: .88rem; }
.site-footer a:hover { color: var(--yellow); }
.site-footer .footer-list li { margin-bottom: .35rem; }
.site-footer .newsletter {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 999px;
    padding: 4px;
    max-width: 470px;
    transition: box-shadow var(--speed) var(--ease);
}
.site-footer .newsletter:focus-within { box-shadow: 0 0 0 3px rgba(242, 210, 94, .35); }
.site-footer .newsletter :focus-visible { outline: 0; }
.site-footer .newsletter input {
    border: 0; outline: 0; flex: 1 1 auto; min-width: 0;
    padding: .45rem 1.1rem; font-size: .9rem; background: transparent; color: var(--ink);
}
.site-footer .newsletter button {
    border: 0; border-radius: 999px; background: var(--navy);
    color: #fff; font-size: .8rem; letter-spacing: .04em;
    padding: .5rem 1.35rem; white-space: nowrap;
}
.site-footer .newsletter button:hover { background: var(--navy-dark); }
.site-footer .social-round {
    width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--yellow); color: var(--navy); font-size: .95rem;
}
.site-footer .social-round { transition: background-color var(--speed) var(--ease), transform var(--speed) var(--ease); }
.site-footer .social-round:hover { background: #fff; color: var(--navy); transform: translateY(-1px); }
.footer-legal { border-top: 1px solid rgba(255, 255, 255, .15); font-size: .85rem; }
.footer-legal a { color: #fff; }

/* --------------------------------------------------------------- pills */

.pill-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill {
    border: 0;
    border-radius: 999px;
    padding: .5rem 1.4rem;
    font-size: .95rem;
    font-weight: 600;
    background: var(--grey-pill);
    color: var(--ink);
    white-space: nowrap;
}
.pill { transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease); }
.pill:hover { background: var(--line-strong); color: var(--ink); }
.pill.is-active { background: var(--navy); color: #fff; }
.pill-amber { background: var(--yellow-soft); color: var(--navy); }
.pill-amber:hover { background: var(--yellow); color: var(--navy); }
.pill-amber.is-active { background: var(--navy); color: #fff; }

/* Every pill button shares one transition, hover lift and press, so the
   yellow, navy, outline and ghost variants feel like one family. */
.btn-load, .btn-navy, .btn-navy-outline, .btn-ghost,
.code-card .copy-btn, .coupon-code .copy-btn, .product-card .cta, .btn-blog,
.news-band .form button, .news-wide .form button, .news-mini button,
.site-footer .newsletter button, .hero-search button {
    transition: background-color var(--speed) var(--ease),
                border-color var(--speed) var(--ease),
                color var(--speed) var(--ease),
                box-shadow var(--speed) var(--ease),
                transform var(--speed) var(--ease);
}
.btn-load:hover, .btn-navy:hover, .btn-navy-outline:hover, .btn-ghost:hover,
.code-card .copy-btn:hover, .coupon-code .copy-btn:hover, .product-card .cta:hover, .btn-blog:hover,
.news-band .form button:hover, .news-wide .form button:hover, .news-mini button:hover,
.site-footer .newsletter button:hover, .hero-search button:hover { transform: translateY(-1px); }

.btn-load:active, .btn-navy:active, .btn-navy-outline:active, .btn-ghost:active,
.code-card .copy-btn:active, .coupon-code .copy-btn:active, .product-card .cta:active, .btn-blog:active,
.news-band .form button:active, .news-wide .form button:active, .news-mini button:active,
.site-footer .newsletter button:active, .hero-search button:active { transform: translateY(0); }

.btn-load {
    background: var(--yellow);
    color: var(--navy);
    border: 0;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    padding: .75rem 2.1rem;
}
.btn-load:hover { background: var(--yellow-dark); color: var(--navy); box-shadow: var(--shadow-sm); }

.btn-navy {
    background: var(--navy);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 600;
    padding: .55rem 1.6rem;
}
.btn-navy:hover { background: var(--navy-dark); color: #fff; box-shadow: var(--shadow-sm); }

.btn-navy-outline {
    background: transparent;
    color: var(--navy);
    border: 1.5px dashed var(--navy);
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .5rem 1.4rem;
}
.btn-navy-outline:hover { background: var(--navy); color: #fff; }

.btn-ghost {
    border: 0;
    border-radius: 999px;
    background: var(--grey-pill);
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 600;
    padding: .6rem 1.6rem;
    width: 100%;
}
.btn-ghost:hover { background: var(--line-strong); color: var(--ink); box-shadow: var(--shadow-sm); }

.badge-verified {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--green-soft);
    color: var(--green);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: .28rem .75rem;
}

.badge-navy {
    display: inline-flex;
    align-items: center;
    background: var(--navy);
    color: #fff;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .3rem .85rem;
}

.badge-amber {
    display: inline-flex;
    align-items: center;
    background: var(--yellow);
    color: var(--navy);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .3rem .85rem;
}

/* --------------------------------------------------------- coupon card */

/* Every offer card lifts by the same amount on hover, and every card image
   creeps in by the same amount, so the grids feel like one component set. */
.coupon-card, .code-card, .product-card, .event-card,
.store-row-card, .store-tile, .cat-card, .cat-list-card, .offer-row {
    transition: box-shadow var(--speed) var(--ease),
                transform var(--speed) var(--ease),
                border-color var(--speed) var(--ease);
}
.coupon-card:hover, .code-card:hover, .product-card:hover, .event-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}

.coupon-card .media img, .event-card .media img, .article-card .media img {
    transition: transform .5s var(--ease);
}
.coupon-card:hover .media img, .event-card:hover .media img, .article-card:hover .media img {
    transform: scale(1.045);
}

.coupon-card {
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
}
.coupon-card .media {
    position: relative;
    aspect-ratio: 2 / 1;
    background: var(--surface-2);
    overflow: hidden;
    flex: 0 0 auto;
}
.coupon-card .media img { width: 100%; height: 100%; object-fit: cover; }
.coupon-card .media .badges {
    position: absolute;
    top: .95rem; left: .95rem;
    display: flex; gap: .5rem;
}
/* On the artwork the two flags are square-cornered rather than pills. */
.coupon-card .media .badges .badge-navy,
.coupon-card .media .badges .badge-amber { border-radius: 6px; padding: .3rem .72rem; }
/* The artwork runs edge to edge; the yellow rule starts underneath it and
   carries on down both sides of the body, as it does on the reference. */
.coupon-card .body {
    padding: 1.35rem 1.4rem 1.4rem;
    display: flex; flex-direction: column; flex: 1 1 auto;
    border: 1px solid var(--yellow);
    border-radius: 0 0 var(--radius) var(--radius);
}
.coupon-card .store-row { display: flex; align-items: center; gap: .8rem; }
.coupon-card .store-name { font-size: 1rem; font-weight: 700; line-height: 1.2; }
.coupon-card .store-cat { font-size: .85rem; color: var(--muted); }
.coupon-card .title, .code-card .title, .product-card .title,
.event-card .title, .article-card .title { line-height: 1.35; }

.coupon-card .title { font-size: 1.45rem; font-weight: 700; margin: .95rem 0 .5rem; }
.coupon-card .desc { font-size: .9rem; color: var(--muted); line-height: 1.6; }
.coupon-card .foot {
    margin-top: auto;
    padding-top: 1.15rem;
    border-top: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.coupon-card .expiry { font-size: .82rem; color: var(--muted-light); }

/* Stand-in for a card image that has not been uploaded yet, so the media area
   reads as deliberate rather than as a failed image. */
.media-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    text-align: center;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted-light);
    background: repeating-linear-gradient(
        135deg,
        var(--surface-2),
        var(--surface-2) 10px,
        #f1f2f5 10px,
        #f1f2f5 20px
    );
}

.store-avatar {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--navy);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .82rem; font-weight: 700;
    overflow: hidden;
    flex: 0 0 auto;
    padding: 5px;
}
.store-avatar img { width: 100%; height: 100%; object-fit: contain; }

.wish {
    border: 0; background: transparent; color: var(--muted-light); font-size: 1.35rem; margin-left: auto;
    transition: color var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.wish:hover { color: var(--navy); transform: scale(1.12); }
/* Saved offers keep the heart filled in the brand colour. */
.wish.is-active { color: var(--navy); }
.wish.is-active:hover { color: var(--navy-dark); }

/* ----------------------------------------------------------- code card */

.code-card {
    background: #fff;
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.6rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.code-card .head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.code-card .logo {
    width: 76px; height: 76px;
    border-radius: 18px;
    background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; color: var(--navy);
    overflow: hidden;
    flex: 0 0 auto;
    padding: 6px;
    box-shadow: var(--shadow);
}
.code-card .logo img { width: 100%; height: 100%; object-fit: contain; }
.code-card .amount { font-size: 1.85rem; font-weight: 700; color: var(--ink); line-height: 1.05; margin-top: .55rem; }
.code-card .amount-label {
    font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.code-card .title { font-size: 1.12rem; font-weight: 700; margin: 1.1rem 0 .5rem; }
.code-card .desc { font-size: .9rem; color: var(--muted); line-height: 1.55; }
.code-card .actions { margin-top: auto; padding-top: 1.25rem; display: flex; align-items: stretch; gap: .6rem; }
.code-card .code-chip, .coupon-code .code-chip {
    flex: 1 1 auto;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px dashed var(--muted-light);
    background: var(--cream);
    border-radius: 12px;
    padding: .8rem .5rem;
    text-align: center;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--navy);
    word-break: break-all;
}
.code-card .copy-btn, .coupon-code .copy-btn {
    border: 0;
    border-radius: 999px;
    background: var(--navy);
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    padding: .7rem 1.25rem;
    display: inline-flex; align-items: center; gap: .4rem;
    white-space: nowrap;
    /* The artwork gives the copy button a soft amber halo. */
    box-shadow: 0 0 16px rgba(244, 211, 95, .85);
}
.code-card .copy-btn:hover, .coupon-code .copy-btn:hover { background: var(--navy-dark); }
.code-card .meta {
    margin-top: .75rem;
    text-align: right;
    display: flex; align-items: center; justify-content: flex-end; gap: .4rem;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

/* -------------------------------------------------------- product card */

.product-card {
    background: #fff;
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    height: 100%;
    display: flex; flex-direction: column;
}
.product-card .media {
    position: relative;
    aspect-ratio: 7 / 6;
    background: var(--surface-2);
    flex: 0 0 auto;
}
.product-card .media img { width: 100%; height: 100%; object-fit: cover; }
.product-card .save {
    position: absolute; top: .95rem; left: .95rem;
    background: var(--navy); color: #fff;
    border-radius: 999px;
    font-size: .95rem; font-weight: 600;
    padding: .4rem 1rem;
}
.product-card .body { padding: 1.5rem 1.55rem 1.55rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.product-card .from {
    font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-light);
}
.product-card .title { font-size: 1.1rem; font-weight: 700; margin: .55rem 0 .9rem; }
.product-card .price { font-size: 1.35rem; font-weight: 700; color: var(--navy); }
.product-card .price-old { font-size: .95rem; color: var(--muted-light); text-decoration: line-through; margin-left: 1.1rem; }
.product-card .cta {
    margin-top: auto;
    display: block;
    text-align: center;
    background: var(--navy);
    color: #fff;
    border-radius: 999px;
    font-size: 1.05rem;
    font-weight: 600;
    padding: .8rem 1rem;
}
.product-card .cta:hover { background: var(--navy-dark); color: #fff; }

/* ------------------------------------------------------ product detail */

/* The product page: artwork on one side, everything the product form holds
   on the other, then its label/value pairs underneath. */
.crumbs {
    display: flex; align-items: center; flex-wrap: wrap; gap: .45rem;
    font-size: .8rem; color: var(--muted);
    margin-bottom: 1.6rem;
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--navy); }
.crumbs i { font-size: .6rem; color: var(--muted-light); }
.crumbs span { color: var(--ink); font-weight: 600; }

.product-stage {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--cream-light) 0%, #fff 100%);
    padding: 1.5rem 0 3.25rem;
}
/* A soft amber wash behind the artwork, the same light the cards sit in. */
.product-stage::before {
    content: '';
    position: absolute;
    top: -9rem; left: -7rem;
    width: 26rem; height: 26rem;
    border-radius: 50%;
    background: var(--yellow-soft);
    opacity: .45;
    pointer-events: none;
}
.product-stage > .container-xl { position: relative; }

/* Capped so the artwork stays a product shot rather than a billboard on a
   wide screen; it centres itself once the columns stack. */
.product-figure { position: relative; padding-bottom: 2rem; max-width: 420px; }
@media (max-width: 991.98px) { .product-figure { margin-inline: auto; } }
.product-figure .frame {
    position: relative;
    aspect-ratio: 7 / 6;
    background: var(--surface-2);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.product-figure img { width: 100%; height: 100%; object-fit: cover; }
.product-figure .save {
    position: absolute; top: 1.1rem; left: 1.1rem;
    background: var(--navy); color: #fff;
    border-radius: 999px;
    font-size: .95rem; font-weight: 600;
    padding: .45rem 1.15rem;
    box-shadow: var(--shadow-sm);
}
/* The store sits on a chip riding the bottom edge of the artwork. */
.product-figure .seller-chip {
    position: absolute; left: 1.5rem; bottom: 0;
    display: inline-flex; align-items: center; gap: .7rem;
    background: #fff;
    border-radius: 999px;
    box-shadow: var(--shadow);
    padding: .5rem 1.35rem .5rem .5rem;
    color: var(--ink);
    max-width: calc(100% - 3rem);
}
.product-figure .seller-chip:hover .store-name { color: var(--navy); }
.product-figure .from {
    font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-light);
}
.product-figure .store-name { font-size: .92rem; font-weight: 600; line-height: 1.3; }

.product-detail .tags { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.product-detail .badge-save {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--green-soft); color: var(--green);
    border-radius: 999px;
    font-size: .78rem; font-weight: 700; letter-spacing: .06em;
    padding: .3rem .9rem;
}
.product-detail h1 { font-size: 2.05rem; font-weight: 700; line-height: 1.25; margin: 1.15rem 0 0; }
.product-detail .product-name { font-size: .9rem; color: var(--muted); margin: .55rem 0 0; }
.product-detail .price-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.15rem 1.4rem;
    margin-top: 1.6rem;
    display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.1rem;
}
.product-detail .price { font-size: 2.1rem; font-weight: 700; color: var(--navy); line-height: 1; }
.product-detail .price-old { font-size: 1.05rem; color: var(--muted-light); text-decoration: line-through; }
.product-detail .price-save {
    margin-left: auto;
    background: var(--green-soft); color: var(--green);
    border-radius: 999px;
    font-size: .8rem; font-weight: 600;
    padding: .35rem 1rem;
}
.product-detail .detail { font-size: .95rem; color: var(--muted); line-height: 1.75; margin: 1.4rem 0 0; }
.product-detail .actions { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }
.btn-lg-pill { padding: .75rem 1.9rem; font-size: .95rem; }
/* The coupon page's code row and its small-print terms. The chip and the
   copy button are the promo card's, listed alongside it above. */
.coupon-code {
    display: flex; align-items: stretch; gap: .6rem;
    max-width: 420px;
    margin-top: 1.6rem;
}
.terms-note {
    font-size: .82rem;
    color: var(--muted-light);
    line-height: 1.7;
    margin: 1.4rem 0 0;
}
.product-detail .note {
    display: flex; align-items: center; gap: .5rem;
    font-size: .8rem; color: var(--muted-light);
    margin: 1.4rem 0 0;
}
.product-detail .note i { color: var(--green); font-size: .95rem; }

.spec-card {
    background: #fff;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    padding: 1.1rem 1.3rem;
    height: 100%;
    border-left: 3px solid var(--yellow);
    transition: box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.spec-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.spec-card .label {
    display: block;
    font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-light);
}
.spec-card .value {
    display: block;
    font-size: .98rem; font-weight: 600; color: var(--ink);
    margin-top: .45rem;
    overflow-wrap: anywhere;
}

/* ----------------------------------------------------------- store row */

.store-row-card {
    background: #fff;
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.2rem 1.35rem;
    display: flex; align-items: center; gap: 1.1rem;
    height: 100%;
}
.store-row-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.store-row-card .logo {
    width: 54px; height: 54px; border-radius: 50%;
    background: var(--surface-2);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; color: var(--navy); font-size: .95rem;
    overflow: hidden; flex: 0 0 auto;
}
.store-row-card .logo img { width: 100%; height: 100%; object-fit: cover; }
.store-row-card .name { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.store-row-card .count { font-size: .95rem; font-weight: 600; color: var(--navy); }

/* --------------------------------------------------------- store tiles */

.store-tile {
    display: flex; align-items: center; gap: .8rem;
    border: 1px solid var(--yellow-soft);
    border-radius: 12px;
    background: #fff;
    padding: .8rem 1rem;
    height: 100%;
}
.store-tile:hover { box-shadow: var(--shadow-sm); border-color: var(--yellow); transform: translateY(-2px); }
.store-tile .letter {
    width: 34px; height: 34px; border-radius: 8px;
    background: var(--yellow); color: var(--navy);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: .95rem; flex: 0 0 auto;
    overflow: hidden;
}
.store-tile .letter img { width: 100%; height: 100%; object-fit: cover; }
.store-tile .name {
    font-size: .82rem; font-weight: 600; color: var(--ink);
    text-transform: uppercase; letter-spacing: .02em; line-height: 1.2;
}
.store-tile .meta {
    font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
/* The two counts are separate spans so a narrow tile can put them on their own
   lines; side by side they read as one sentence, as before. Laying them out as
   flex items means a tight tile wraps between the counts rather than inside
   one of them. */
.store-tile .meta { display: flex; flex-wrap: wrap; column-gap: .3rem; }
.store-tile .meta > span + span::before { content: '&'; padding-right: .3rem; }

/* ---------------------------------------------------------- brand ring */

.brand-ring {
    width: 120px; height: 120px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow);
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden;
    font-weight: 700; font-size: 1.1rem; color: var(--navy);
    border: 0;
    padding: 14px;
}
.brand-ring img { width: 100%; height: 100%; object-fit: contain; }

/* ---------------------------------------------------------- carousels */

/* One track for the top-store rings and the category bubbles alike: it
   scrolls a page at a time and swipes on touch. Its padding is pulled back
   out with a matching negative margin, so the first and last item keep their
   whole shadow — and their whole circle — instead of being clipped at the
   edge of the scrolling box. The .75rem across matches the container gutter,
   so the track still reaches the edge of the page without pushing it
   sideways. */
.carousel { position: relative; }
.carousel-track {
    --carousel-gap: 1.5rem;
    --carousel-view: 6;
    display: flex;
    gap: var(--carousel-gap);
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scroll-padding-left: .75rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 1.25rem .75rem;
    margin: -1.25rem -.75rem;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide {
    flex: 0 0 calc((100% - (var(--carousel-view) - 1) * var(--carousel-gap)) / var(--carousel-view));
    text-align: center;
    scroll-snap-align: start;
}
.carousel-categories { --carousel-gap: 1.4rem; --carousel-view: 8; }

/* Fewer items per view as the viewport narrows; ordered widest first so the
   narrower rule wins where both match. */
@media (max-width: 1199.98px) {
    .carousel-stores { --carousel-view: 5; }
    .carousel-categories { --carousel-view: 7; }
}
@media (max-width: 991.98px) {
    .carousel-stores { --carousel-view: 4; }
    .carousel-categories { --carousel-view: 5; }
}
@media (max-width: 767.98px) {
    .carousel-stores { --carousel-view: 3; --carousel-gap: 1rem; }
    .carousel-categories { --carousel-view: 3; --carousel-gap: 1rem; }
}

.carousel-nav { display: inline-flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.carousel-nav .scroll-btn:disabled { opacity: .35; }
.carousel-nav .scroll-btn:disabled:hover { border-color: var(--line); color: var(--ink); box-shadow: none; }

/* ------------------------------------------------------- category tile */

.cat-card {
    border: 1px solid var(--yellow);
    border-radius: 16px;
    background: #fff;
    padding: 1.5rem 1rem;
    text-align: center;
    height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.cat-card, .cat-card:hover { color: var(--ink); }
.cat-card:hover { box-shadow: var(--shadow); border-color: var(--yellow-dark); transform: translateY(-2px); }
.cat-card .ico {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: var(--yellow);
    color: var(--navy);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    overflow: hidden;
}
.cat-card .ico img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.cat-card .name { font-size: .92rem; font-weight: 600; line-height: 1.2; margin-top: 1rem; }
.cat-card .sub {
    font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: .3rem;
}

/* Width comes from .carousel-slide, so a row always holds a whole number of
   bubbles at every breakpoint. Only the ring inside is a fixed size; it is
   centred in whatever the per-view sizing gives the slide. */
.cat-bubble { text-align: center; }
.cat-bubble .ring {
    width: 110px; height: 110px; margin: 0 auto;
    border-radius: 50%;
    background: var(--cream-light);
    border: 1px solid var(--navy);
    color: var(--navy);
    display: flex; align-items: center; justify-content: center;
    font-size: 2.6rem;
    overflow: hidden;
}
.cat-bubble .ring img { width: 62%; height: 62%; object-fit: contain; }
.cat-bubble .label {
    margin-top: 1rem; font-size: .88rem; color: var(--ink); line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.scroll-btn {
    width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid var(--line); background: #fff; color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center;
}
.scroll-btn { transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease), box-shadow var(--speed) var(--ease); }
.scroll-btn:hover { border-color: var(--navy); color: var(--navy); box-shadow: var(--shadow-sm); }

/* ------------------------------------------------------- category list */

.cat-list-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.25rem; }
.cat-list-card .row-item { display: flex; align-items: center; gap: .8rem; padding: .5rem 0; }
.cat-list-card .row-item .ico {
    width: 28px; height: 28px; border-radius: 7px;
    background: var(--yellow-soft); color: var(--navy);
    display: inline-flex; align-items: center; justify-content: center; font-size: .9rem;
    flex: 0 0 auto;
}
.cat-list-card .row-item .name { font-size: .92rem; font-weight: 600; color: var(--ink); }
.cat-list-card .row-item .meta { font-size: .66rem; color: var(--muted); }

/* --------------------------------------------------------- event cards */

.event-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    height: 100%;
    display: flex; flex-direction: column;
}
.event-card .media { aspect-ratio: 16 / 9; background: var(--surface-2); position: relative; flex: 0 0 auto; }
.event-card .media img { width: 100%; height: 100%; object-fit: cover; }
.event-card .body { padding: 1.1rem 1.15rem 1.25rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.event-card .status {
    font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
    font-weight: 600; color: var(--navy);
}
.event-card .date { font-size: .72rem; color: var(--muted); }
.event-card .title { font-size: 1.05rem; font-weight: 600; margin: .5rem 0 .35rem; }
.event-card .title a { color: inherit; }
.event-card .title a:hover { color: var(--navy); }
.event-card .desc { font-size: .78rem; color: var(--muted); line-height: 1.5; }
.event-card .cta { margin-top: auto; padding-top: 1rem; }

/* ------------------------------------------------------- article cards */

.article-card { display: block; height: 100%; }
.article-card .media {
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--surface-2);
    position: relative;
}
.article-card .media img { width: 100%; height: 100%; object-fit: cover; }
.article-card .chip {
    position: absolute; top: .95rem; left: .95rem;
    background: #f0eeec;
    color: var(--ink);
    border-radius: 999px;
    font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
    padding: .35rem .95rem;
}
.article-card .kicker {
    font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
    margin-top: .85rem;
}
.article-card .title { font-size: 1.35rem; font-weight: 700; margin: .5rem 0; color: var(--ink); line-height: 1.3; }
.article-card .desc { font-size: .95rem; color: var(--muted); line-height: 1.55; }
.article-card .date {
    font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: .35rem;
}
.read-more { font-size: 1rem; font-weight: 600; color: var(--navy); display: inline-flex; gap: .5rem; align-items: center; }

.article-mini { display: flex; gap: .85rem; align-items: flex-start; }
.article-mini .thumb {
    width: 84px; height: 84px; border-radius: 12px; overflow: hidden;
    background: var(--surface-2); flex: 0 0 auto;
}
.article-mini .thumb img { width: 100%; height: 100%; object-fit: cover; }
.article-mini .title { font-size: .85rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
.article-mini .date {
    font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: .35rem;
}

.rule-heading {
    display: inline-flex; align-items: center; gap: .6rem;
    font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
}
.rule-heading::before { content: ''; width: 4px; height: 18px; background: var(--navy); border-radius: 2px; }

/* ---------------------------------------------------------- hero panel */

.hero-panel {
    background: var(--navy);
    border-radius: var(--radius-lg);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.hero-panel h1, .hero-panel h2 { color: #fff; }
.hero-eyebrow {
    display: inline-block;
    background: var(--yellow);
    color: var(--navy);
    border-radius: 999px;
    font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
    padding: .5rem 1.15rem;
}
/* The store search is one pill: the field runs the full width and the yellow
   button caps its right end at the pill's own height. */
.hero-search {
    display: flex; align-items: stretch;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    padding: 0 0 0 1.35rem;
    max-width: 554px;
    overflow: hidden;
}
.hero-search input {
    border: 0; background: transparent; outline: 0; color: #fff;
    flex: 1 1 auto; min-width: 0; font-size: .95rem; padding: .72rem 0;
}
.hero-search input::placeholder { color: rgba(255, 255, 255, .65); }
.hero-search button {
    border: 0; border-radius: 999px; background: var(--yellow); color: var(--navy);
    font-size: 1rem; font-weight: 600; padding: 0 2.05rem; white-space: nowrap;
}

/* ------------------------------------------------- single event hero */

.event-hero .event-hero-copy { padding: 1.5rem 3rem 1.8rem; }
.event-hero-title {
    font-size: 3rem;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 2rem 0 0;
}
.event-hero-title .hl { color: var(--yellow); }
.event-hero-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.event-hero-status {
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
    padding: .5rem 1.15rem;
    color: #fff;
}
/* A finished season reads as muted rather than as another live badge. */
.event-hero-status.is-past { background: rgba(255, 255, 255, .14); border-color: transparent; color: rgba(255, 255, 255, .75); }
.event-hero-dates {
    margin: .9rem 0 0;
    font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
    color: rgba(255, 255, 255, .7);
}
.event-hero-lead {
    margin: 1.2rem 0 0;
    max-width: 37rem;
    font-size: 1.06rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .85);
}
.event-hero .hero-search { margin-top: 2rem; }
.event-hero-art { padding: 1.5rem 3rem 1.5rem 0; }
.event-hero-art img {
    display: block;
    width: 100%;
    max-height: 17rem;
    object-fit: contain;
}

/* The offers grid runs on wider gutters than the rest of the page. */
.offers-grid { --bs-gutter-x: 3.7rem; --bs-gutter-y: 1.9rem; }

/* Promotional banner strip. The artwork an admin uploads can be any shape, so
   the frame owns the proportions and the image is cropped into it — otherwise a
   tall upload renders as a page-swallowing block instead of a banner. */
.banner-strip {
    display: block;
    position: relative;
    aspect-ratio: 554 / 223;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface-2);
    box-shadow: var(--shadow);
}
.banner-strip img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform .45s ease;
}
a.banner-strip:hover img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
    .banner-strip img { transition: none; }
    a.banner-strip:hover img { transform: none; }
}

/* Nothing added above should move for a reader who asked for stillness; the
   colour and shadow changes still carry the hover state. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; }
    .coupon-card:hover, .code-card:hover, .product-card:hover, .event-card:hover,
    .store-row-card:hover, .store-tile:hover, .cat-card:hover,
    .topbar .social:hover, .site-footer .social-round:hover, .wish:hover,
    .btn-load:hover, .btn-navy:hover, .btn-navy-outline:hover, .btn-ghost:hover,
    .code-card .copy-btn:hover, .coupon-code .copy-btn:hover, .product-card .cta:hover, .btn-blog:hover,
    .news-band .form button:hover, .news-wide .form button:hover, .news-mini button:hover,
    .site-footer .newsletter button:hover, .hero-search button:hover { transform: none; }
    .coupon-card:hover .media img, .event-card:hover .media img,
    .article-card:hover .media img { transform: none; }
}

/* ------------------------------------------------------ newsletter cta */

.news-band { background: var(--navy); color: #fff; border-radius: var(--radius-lg); }
.news-band .form { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.news-band .form input {
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .12);
    border-radius: 999px;
    color: #fff; font-size: .85rem;
    padding: .6rem 1.2rem;
    flex: 1 1 220px; min-width: 0; outline: 0;
}
.news-band .form input::placeholder { color: rgba(255, 255, 255, .65); }
.news-band .form button {
    border: 0; border-radius: 999px; background: #fff; color: var(--ink);
    font-size: .85rem; padding: .6rem 1.6rem; white-space: nowrap;
}
.news-band .fine { font-size: .65rem; color: rgba(255, 255, 255, .6); margin-top: .5rem; }

.news-wide { background: var(--navy); color: #fff; }
.news-wide h2 {
    color: #fff;
    font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -.01em;
}
.news-wide .lead { font-size: 1.15rem; line-height: 1.45; color: rgba(255, 255, 255, .92); }
.news-wide .form { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.news-wide .form input {
    border: 0; border-radius: 999px; padding: .8rem 1.5rem; font-size: 1rem;
    min-width: 0; flex: 0 1 374px; outline: 0;
}
.news-wide .form button {
    border: 0; border-radius: 999px; background: var(--yellow); color: var(--navy);
    font-size: 1.05rem; font-weight: 700; padding: .8rem 2.1rem;
}

.news-mini { background: var(--navy); border-radius: var(--radius); color: #fff; padding: 1.25rem; }
.news-mini input {
    width: 100%; border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .12); border-radius: 8px;
    color: #fff; font-size: .82rem; padding: .55rem .9rem; outline: 0;
}
.news-mini input::placeholder { color: rgba(255, 255, 255, .6); }
.news-mini button {
    width: 100%; border: 0; border-radius: 8px; background: #fff; color: var(--ink);
    font-size: .85rem; font-weight: 500; padding: .55rem 1rem; margin-top: .6rem;
}

/* ----------------------------------------------------------- faq block */

.faq-item {
    background: var(--surface-3);
    border-radius: 22px;
    margin-bottom: .9rem;
    overflow: hidden;
    transition: background-color var(--speed) var(--ease);
}
.faq-item:hover { background: var(--line); }
.faq-item.is-open { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.faq-item > button {
    width: 100%; border: 0; background: transparent;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    text-align: left; padding: 1.35rem 1.75rem; font-size: 1.05rem; color: var(--ink);
}
.faq-item > button i { transition: transform .2s ease; color: var(--muted); }
.faq-item.is-open > button i { transform: rotate(180deg); }
.faq-item .answer { padding: 0 1.75rem 1.35rem; font-size: .95rem; color: var(--muted); line-height: 1.6; }

/* ----------------------------------------------------- browse by event */

.browse-band { background: var(--surface-2); }
.browse-band a {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .82rem; color: var(--ink); padding: .28rem 0;
}
.browse-band a:hover { color: var(--navy); }
.browse-band a i { font-size: .7rem; color: var(--muted); }

/* ------------------------------------------------------------- a-z bar */

.az-bar {
    border: 1px solid var(--yellow-soft);
    border-radius: var(--radius);
    padding: .75rem 1rem;
    display: flex; flex-wrap: wrap; align-items: center;
    gap: .25rem; justify-content: space-between;
}
.az-bar a {
    min-width: 32px; height: 32px; padding: 0 .5rem;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .88rem; color: var(--ink);
}
.az-bar a { transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease); }
.az-bar a:hover { background: var(--yellow-soft); color: var(--navy); }
.az-bar a.is-active { background: var(--navy); color: #fff; }

.inline-search {
    display: flex; align-items: center; gap: .55rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: .45rem .85rem;
    background: #fff;
    min-width: 260px;
}
.inline-search { transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease); }
.inline-search:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(3, 60, 118, .12); }
.inline-search input { border: 0; outline: 0; flex: 1 1 auto; min-width: 0; font-size: .82rem; background: transparent; }
.inline-search :focus-visible { outline: 0; }
/* The clear control below replaces the browser's own, which only emptied the
   box and left the filtered results in place. */
.inline-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.inline-search .search-clear {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto;
    background: var(--surface-2); color: var(--muted); font-size: .62rem;
}
.inline-search .search-clear { transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease); }
.inline-search .search-clear:hover { background: var(--line-strong); color: var(--ink); }

/* ---------------------------------------------------------- pagination */

.pagination { gap: .4rem; }
.pagination .page-link {
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    min-width: 36px;
    text-align: center;
    font-size: .85rem;
    padding: .4rem .6rem;
    transition: background-color var(--speed) var(--ease),
                border-color var(--speed) var(--ease),
                color var(--speed) var(--ease);
}
.pagination .page-link:hover { background: var(--surface-2); border-color: var(--line-strong); color: var(--navy); }
.pagination .page-item.active .page-link { background: var(--navy); border-color: var(--navy); color: #fff; }
.pagination .page-item.disabled .page-link { color: var(--muted-light); background: transparent; }

/* -------------------------------------------------------- store detail */

.store-hero {
    background: linear-gradient(90deg, var(--yellow) 0%, #f7e08a 100%);
    border-radius: var(--radius);
    padding: 1.6rem 1.8rem;
}
.store-hero h1 { font-size: 1.6rem; font-weight: 600; margin: 0; }
.store-hero p { font-size: .85rem; margin: .5rem 0 0; color: #4a4330; }
.verified-pill {
    display: inline-flex; align-items: center; gap: .4rem;
    background: #fff; color: var(--green);
    border-radius: 999px; font-size: .78rem; font-weight: 500;
    padding: .35rem 1rem; margin-top: .9rem;
}

.offer-strip {
    background: var(--yellow);
    border-radius: var(--radius);
    padding: 1.1rem 1.3rem;
    display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
}
.offer-strip .badge-box {
    width: 84px; height: 84px; border-radius: 14px;
    background: var(--navy); color: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
.offer-strip .badge-box .val { font-size: 1.4rem; font-weight: 600; line-height: 1; }
.offer-strip .badge-box .lbl { font-size: .55rem; letter-spacing: .14em; text-transform: uppercase; margin-top: .3rem; }
.offer-strip .title { font-size: 1.1rem; font-weight: 600; }
.offer-strip .desc { font-size: .76rem; color: #4a4330; margin: .3rem 0 0; }

.offer-row {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: flex; align-items: stretch; gap: 1.2rem;
    padding: 1rem;
    box-shadow: var(--shadow-sm);
}
.offer-row .amount-box {
    width: 130px; border-radius: 12px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex: 0 0 auto; padding: 1.2rem .5rem;
}
.offer-row .amount-box.is-code { background: var(--mint); color: #12775a; }
.offer-row .amount-box.is-deal { background: var(--yellow-soft); color: var(--ink); }
.offer-row .amount-box .val { font-size: 1.5rem; font-weight: 600; line-height: 1; }
.offer-row .amount-box .lbl { font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; margin-top: .35rem; }
.offer-row .main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.offer-row .title { font-size: 1rem; font-weight: 600; margin: .5rem 0 .3rem; }
.offer-row .desc { font-size: .78rem; color: var(--muted); line-height: 1.5; }
.offer-row .side {
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
    min-width: 170px;
}
.offer-row .side .note { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

.side-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.4rem; }
.side-card .store-logo {
    width: 96px; height: 96px; border-radius: 50%;
    background: var(--surface-2); overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.6rem; font-weight: 600; color: var(--navy);
}
.side-card .store-logo img { width: 100%; height: 100%; object-fit: cover; }
.side-card .stars { color: var(--yellow-dark); font-size: .8rem; }
.side-card .info-row { display: flex; gap: .6rem; font-size: .8rem; color: var(--ink); margin-top: .6rem; }
.side-card .info-row i { color: var(--navy); }
.side-card .policy-title {
    font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 1.4rem 0 .7rem;
}
.side-card .policy { display: flex; align-items: center; gap: .5rem; font-size: .82rem; margin-bottom: .45rem; }
.side-card .policy i { color: var(--green); font-size: .85rem; }

.guide-panel { background: var(--surface-2); border-radius: var(--radius); padding: 2rem 2.2rem; }
.guide-body { font-size: .85rem; line-height: 1.8; color: var(--ink-soft); }
.guide-body p { margin-bottom: 1rem; }
.guide-body h2, .guide-body h3, .guide-body h4 { font-size: .95rem; font-weight: 600; color: var(--ink); margin: 1.4rem 0 .6rem; }
.guide-clamped { max-height: 320px; overflow: hidden; }

/* --------------------------------------------------------- article page */

.article-hero { border-radius: var(--radius); overflow: hidden; position: relative; background: var(--surface-2); }
.article-hero img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
.article-hero .overlay {
    position: absolute; inset: auto 0 0 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
    padding: 2.5rem 2rem 2.6rem;
}
.article-hero h1 { color: #fff; font-size: 1.9rem; font-weight: 600; margin: 0; }
.article-hero .meta-bar {
    background: rgba(0, 0, 0, .35);
    color: rgba(255, 255, 255, .9);
    font-size: .72rem;
    padding: .55rem 2rem;
    position: absolute; left: 0; right: 0; bottom: 0;
}
.article-body { font-size: .9rem; line-height: 1.85; color: var(--ink-soft); }
.article-body p { margin-bottom: 1.1rem; }
.article-body h2 { font-size: 1.15rem; font-weight: 600; color: var(--ink); margin: 1.8rem 0 .8rem; }
.article-body h3 { font-size: 1rem; font-weight: 600; color: var(--ink); margin: 1.5rem 0 .7rem; }
.article-body ul, .article-body ol { margin-bottom: 1.1rem; padding-left: 1.2rem; }
.article-body li { margin-bottom: .4rem; }
.article-body img { max-width: 100%; height: auto; border-radius: var(--radius); }

.topic-chip {
    display: inline-block;
    background: var(--surface-2);
    color: var(--ink);
    border-radius: 999px;
    font-size: .75rem;
    padding: .35rem .9rem;
    margin: 0 .35rem .5rem 0;
}
.topic-chip:hover { background: var(--line); color: var(--ink); }

/* ------------------------------------------------------------ features */

/* ------------------------------------------------ all-categories page */

/* The heading runs a shade heavier and wider than the site's other titles,
   so it keeps its own size rather than borrowing .section-title. */
.cat-hero-section { padding-top: 1.75rem; }

.cat-hero-title {
    font-size: 3.05rem;
    font-weight: 700;
    letter-spacing: normal;
    margin: 0;
}
.cat-hero-sub {
    max-width: 38rem;
    margin: .9rem auto 0;
    font-size: 1.1rem;
    letter-spacing: .03em;
    color: var(--ink-soft);
}

/* Search pill: one white capsule holding the glyph, the field and the
   solid Find Deals button, lifted off the page by its own shadow. */
.cat-hero-search {
    display: flex;
    align-items: center;
    gap: .55rem;
    max-width: 42rem;
    margin-top: 2.65rem;
    padding: .5rem .5rem .5rem .9rem;
    background: #fff;
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
}
.cat-hero-search > i { color: var(--muted); font-size: 1.05rem; }
.cat-hero-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: .95rem;
}
.cat-hero-search input::placeholder { color: var(--muted-light); }
.cat-hero-search .btn-navy { padding: .4rem 1.35rem; flex: 0 0 auto; }

.cat-grid-section { padding-top: 2.45rem; padding-bottom: 3.4rem; }
.cat-grid-head { margin-bottom: 2.65rem; }
.cat-feature-band { margin-top: 2.5rem; }

.feature-band { background: var(--surface-2); border-radius: 16px; padding: 2.9rem 2rem; }
/* Three even columns sit on a 2rem gutter rather than the grid's usual 1.5rem,
   which is what puts each lockup on the reference's own column line. */
.feature-band .row { --bs-gutter-x: 2rem; }
.feature-band .ico {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--yellow); color: var(--navy);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
    flex: 0 0 auto;
}
.feature-band .name { font-size: 1rem; font-weight: 600; line-height: 1.4; }
.feature-band .copy { font-size: .93rem; color: var(--muted-light); }

/* ----------------------------------------------------------- offer popup */

/* The dialog a home-page "Get Deal" opens: the same card furniture, one step
   larger, while the affiliate link loads in its own tab. */
.offer-modal .modal-content {
    position: relative;
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 1.75rem;
}
.offer-modal-close {
    position: absolute; top: .9rem; right: .9rem;
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff; color: var(--muted);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .8rem;
    transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.offer-modal-close:hover { color: var(--navy); border-color: var(--navy); }
.offer-modal-head { display: flex; align-items: center; gap: .7rem; padding-right: 2.5rem; }
.offer-modal-head .store-name { font-size: .95rem; font-weight: 600; color: var(--ink); }
.offer-modal-head .store-cat { font-size: .75rem; color: var(--muted); }
.offer-modal-head .badge-verified { margin-left: auto; }
.offer-modal .title { font-size: 1.25rem; font-weight: 700; margin: 1.15rem 0 .5rem; }
.offer-modal .desc { font-size: .92rem; color: var(--muted); line-height: 1.6; margin: 0; }
.offer-modal .terms { font-size: .8rem; color: var(--muted-light); line-height: 1.6; margin: .9rem 0 0; }
.offer-modal-code { display: flex; align-items: stretch; gap: .6rem; margin-top: 1.25rem; }
.offer-modal .code-chip {
    flex: 1 1 auto;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px dashed var(--muted-light);
    background: var(--cream);
    border-radius: 12px;
    padding: .8rem .5rem;
    text-align: center;
    font-size: .95rem; font-weight: 700; letter-spacing: .06em;
    color: var(--navy);
    word-break: break-all;
}
.offer-modal .copy-btn {
    border: 0;
    border-radius: 999px;
    background: var(--navy);
    color: #fff;
    font-size: .95rem; font-weight: 600;
    padding: .7rem 1.25rem;
    display: inline-flex; align-items: center; gap: .4rem;
    white-space: nowrap;
}
.offer-modal .copy-btn:hover { background: var(--navy-dark); }
.offer-modal-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    margin-top: 1.5rem;
}
.offer-modal .expiry { font-size: .82rem; color: var(--muted-light); }
.offer-modal .view-all { gap: .45rem; font-size: .85rem; margin-top: 1rem; }

/* ---------------------------------------------------------- responsive */

@media (max-width: 991.98px) {
    /* Below the desktop breakpoint the frame matches the artwork's own 2:1
       proportions, so nothing of the subject is cropped away. */
    .banner-strip { aspect-ratio: 2 / 1; border-radius: var(--radius); }
    .offer-row { flex-direction: column; }
    .offer-row .amount-box { width: 100%; padding: .9rem; flex-direction: row; gap: .6rem; }
    .offer-row .amount-box .lbl { margin-top: 0; }
    .offer-row .side { min-width: 0; align-items: flex-start; }
    .article-hero h1 { font-size: 1.4rem; }
    .store-hero { padding: 1.2rem 1.3rem; }
    .store-hero h1 { font-size: 1.25rem; }

    /* Stacked, the hero keeps its rhythm but drops to a readable heading and
       puts the artwork back under the copy. */
    .event-hero .event-hero-copy { padding: 1.5rem 2rem 1.6rem; }
    .event-hero-title { font-size: 2.1rem; }
    .event-hero-art { padding: 0 2rem 1.75rem; }
    .event-hero-art img { max-height: 13rem; }
    .offers-grid { --bs-gutter-x: 1.5rem; }

    /* Six tiles across becomes three, and the hero steps down with it. */
    .cat-hero-title { font-size: 2.2rem; }
    .cat-hero-sub { font-size: 1.05rem; }
    .cat-grid-head { margin-bottom: 1.9rem; }
    .feature-band { padding: 2rem 1.6rem; }
    .feature-band .row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
}

@media (max-width: 1199.98px) {
    /* The header lockup, search and blog button share one row from the tablet
       breakpoint up, so below the desktop width they all step down. */
    .brand-mark, .brand-word { font-size: 1.4rem; }
    .brand-lg .brand-mark, .brand-lg .brand-word { font-size: 2rem; }
    .search-shell { max-width: 340px; }
    .btn-blog { font-size: .95rem; padding: 0 1.35rem; }
    .navstrip .nav-row { gap: .4rem 1.5rem; }
    .navstrip .nav-group { gap: .25rem; }
    .navstrip .nav-group-start { margin-left: -.9rem; }
    .navstrip .nav-group-end { margin-right: -.9rem; }
    .navstrip a { padding: .42rem .9rem; font-size: .92rem; }
    .brand-ring { width: 92px; height: 92px; padding: 10px; }
    .cat-bubble .ring { width: 92px; height: 92px; font-size: 2.1rem; }
    .coupon-card .title { font-size: 1.25rem; }
    .article-card .title { font-size: 1.15rem; }
    .event-hero-title { font-size: 2.4rem; }
    .offers-grid { --bs-gutter-x: 2.4rem; }
    .cat-hero-title { font-size: 2.6rem; }
}

@media (max-width: 767.98px) {
    /* Touch has no hover to reveal the carousel arrows, and at 30px in a hairline
       grey they read as decoration. On phones they carry their own weight: a
       proper tap target in the brand colour, which is what tells a visitor the
       row scrolls. The disabled end keeps its faded state, so which way there is
       more to see stays obvious. */
    .carousel-nav { gap: .45rem; }
    .carousel-nav .scroll-btn {
        width: 40px; height: 40px;
        border-color: var(--navy); color: var(--navy);
        font-size: 1.1rem;
    }

    .search-shell { max-width: none; }
    .brand-word { font-size: 1.5rem; }
    .brand-mark { font-size: 1.5rem; }
    .brand-lg .brand-mark, .brand-lg .brand-word { font-size: 1.9rem; }
    .brand-ring { width: 74px; height: 74px; padding: 8px; }
    .cat-bubble .ring { width: 80px; height: 80px; font-size: 1.8rem; }
    .cat-bubble .label { font-size: .8rem; margin-top: .7rem; }
    .coupon-card .title { font-size: 1.15rem; }
    .event-hero .event-hero-copy { padding: 1.4rem 1.5rem; }
    .event-hero-title { font-size: 1.75rem; }
    .event-hero-lead { font-size: .95rem; }
    .event-hero-art { padding: 0 1.5rem 1.5rem; }
    .hero-search { max-width: none; }
    .code-card { padding: 1.25rem; }
    .code-card .logo { width: 60px; height: 60px; }
    .code-card .amount { font-size: 1.5rem; }
    .product-card .body { padding: 1.1rem 1.15rem 1.15rem; }
    .product-stage { padding: 1.25rem 0 2.5rem; }
    .product-detail h1 { font-size: 1.45rem; }
    .product-detail .price { font-size: 1.7rem; }
    .product-detail .price-save { margin-left: 0; }
    .product-detail .actions .btn-navy, .product-detail .actions .btn-navy-outline { width: 100%; text-align: center; }
    .product-figure .seller-chip { left: 1rem; }
    .spec-card { padding: .9rem 1rem; }
    .article-card .title { font-size: 1.05rem; }
    .faq-item > button { padding: 1rem 1.25rem; font-size: .95rem; }
    /* Phone: the four pills fold into the hamburger panel, one link per line,
       so the strip stays a single quiet row until it is opened. */
    .navstrip .nav-toggle { display: flex; }
    .navstrip .nav-row {
        flex-direction: column; align-items: stretch;
        gap: 0; flex-wrap: nowrap; padding: 0;
        overflow: hidden;
        max-height: 0;
        transition: max-height .28s var(--ease);
    }
    .navstrip .nav-row.is-open { max-height: 22rem; }
    .navstrip .nav-group { flex-direction: column; align-items: stretch; gap: .15rem; flex-wrap: nowrap; }
    .navstrip .nav-group-start { margin-left: 0; padding-top: .35rem; }
    .navstrip .nav-group-end { margin-right: 0; padding-bottom: .75rem; }
    .navstrip a { display: block; padding: .5rem .9rem; font-size: .92rem; }
    .az-bar { justify-content: flex-start; gap: .15rem; }
    .az-bar a { min-width: 28px; height: 28px; font-size: .8rem; }
    .section-title { font-size: 1.2rem; }
    .article-hero .overlay { padding: 1.6rem 1rem 2.4rem; }
    .article-hero .meta-bar { padding: .5rem 1rem; }
    .guide-panel { padding: 1.25rem; }
    .feature-band { padding: 1.25rem; }

    /* Phone: two tiles across, the search pill keeps its capsule shape and the
       three assurances stack, each still icon-beside-copy. */
    .cat-hero-section { padding-top: 1.25rem; }
    .cat-hero-title { font-size: 1.85rem; }
    .cat-hero-sub { font-size: .95rem; margin-top: .75rem; }
    .cat-hero-search { margin-top: 1.75rem; padding: .35rem .35rem .35rem .8rem; }
    .cat-hero-search > i { font-size: .95rem; }
    .cat-hero-search input { font-size: .85rem; }
    .cat-hero-search .btn-navy { padding: .4rem .95rem; font-size: .85rem; }
    .cat-grid-section { padding-top: 1.75rem; padding-bottom: 2.25rem; }
    .cat-grid-head { margin-bottom: 1.35rem; }
    .cat-feature-band { margin-top: 1.75rem; }
    .view-all-chevron { font-size: .9rem; }
    .feature-band .row { --bs-gutter-y: 1.15rem; }
}

/* Phone, two cards to a row. At this width the product card's desktop type no
   longer fits its column: "Go to Deal" broke onto a second line, which the
   999px radius turned into a tall oval, and the store line wrapped so the
   titles beneath it started at different heights across a row. Everything here
   just scales the card's own type down to the space it actually has. */
@media (max-width: 575.98px) {
    /* Two tiles to a row leaves about 70-90px for the text, so the counts
       stack instead of wrapping mid-phrase, and a long store name breaks
       rather than running out of its tile. */
    .store-tile { padding: .7rem .8rem; gap: .6rem; }
    .store-tile .name { font-size: .78rem; overflow-wrap: anywhere; }
    .store-tile .meta { font-size: .58rem; letter-spacing: .04em; }
    .store-tile .meta { flex-direction: column; }
    .store-tile .meta > span + span::before { content: none; }

    .product-card .save { top: .7rem; left: .7rem; font-size: .78rem; padding: .3rem .7rem; }
    .product-card .from {
        font-size: .72rem; letter-spacing: .08em;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .product-card .title { font-size: 1rem; margin: .45rem 0 .75rem; }
    .product-card .price { font-size: 1.15rem; }
    .product-card .price-old { font-size: .85rem; margin-left: .55rem; }
    .product-card .cta { font-size: .9rem; padding: .7rem .55rem; white-space: nowrap; }
}

/* Very narrow phones leave no room for the arrow beside the label. */
@media (max-width: 359.98px) {
    .product-card .cta i { display: none; }
}


/* ----------------------------------------------------------- site toast */

/* The popup that answers a newsletter signup. One per page, bottom right,
   with the accent colour carrying success or failure. */
.site-toast-wrap { z-index: 1090; }
.site-toast {
    border: 0; border-left: 4px solid var(--green);
    border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink);
    box-shadow: var(--shadow-lg);
    width: min(92vw, 370px);
}
.site-toast.is-error { border-left-color: var(--red); }
.site-toast .toast-body {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .95rem 1rem; font-size: .88rem; line-height: 1.45;
}
.site-toast .toast-body > i { color: var(--green); font-size: 1.05rem; line-height: 1.3; }
.site-toast.is-error .toast-body > i { color: var(--red); }
.site-toast .btn-close-toast {
    border: 0; background: none; padding: 0; margin-left: auto;
    color: var(--muted-light); font-size: .75rem; line-height: 1.6;
}
.site-toast .btn-close-toast:hover { color: var(--ink); }