/* Self-hosted Inter (variable font) — no render-blocking third-party fonts. */
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url('/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url('/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url('/fonts/inter-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* DigiWarranty storefront — palette mirrors the Flutter mobile app theme
   (lib/ui/theme/app_color_tokens.dart + gradient_colors.dart). */
:root {
    /* Brand */
    --brand: #821692;            /* primaryLight */
    --brand-strong: #6B21A8;
    --brand-2: #4E3BC9;          /* secondary */
    --brand-grad: linear-gradient(135deg, #9B2FAF 0%, #6B21A8 50%, #4E3BC9 100%); /* brandGradient */
    --brand-ink: #ffffff;        /* onPrimary */

    /* Offer / discount accent (offerGradient + accentAmber) */
    --offer-grad: linear-gradient(135deg, #FF9500 0%, #FF5F00 100%);
    --offer: #FF5F00;

    /* Surfaces (light) */
    --bg: #F8F7FC;               /* scaffoldLight */
    --surface: #FFFFFF;
    --surface-2: #F3F3F8;        /* surfaceLight2 */
    --hero-grad: linear-gradient(160deg, #F9F6FE 0%, #F0E7FA 100%); /* backgroundGradient light */
    --card-grad: linear-gradient(180deg, #FFFFFF 0%, #F5F0FC 100%); /* surfaceGradientLight */
    --chip: #F7F1FC;             /* chipBackgroundLight */

    /* Text */
    --ink: rgba(0,0,0,.87);      /* textPrimaryLight */
    --ink-2: rgba(0,0,0,.54);    /* textSecondaryLight */
    --muted: rgba(0,0,0,.45);
    --line: #ECE6F3;             /* soft lavender border */

    /* Semantic */
    --success: #1FA971;
    --warning: #F59E0B;

    --radius: 16px;
    --shadow: 0 1px 2px rgba(60,20,80,.05), 0 10px 30px rgba(80,30,110,.07);
    --shadow-hover: 0 16px 40px rgba(80,30,110,.16);
    --maxw: 1180px;
}

/* Dark theme — opt-in via a manual toggle only (never OS-forced). Default = light. */
:root[data-theme="dark"] {
    --bg: #100C15;
    --surface: #17131D;
    --surface-2: #1C1C21;
    --hero-grad: linear-gradient(160deg, #100C15 0%, #24183A 100%);
    --card-grad: linear-gradient(180deg, #1C1A26 0%, #17131D 100%);
    --chip: #231C2E;
    --ink: #FFFFFF;
    --ink-2: rgba(255,255,255,.72);
    --muted: rgba(255,255,255,.55);
    --line: #2A2334;
    --brand: #B14FC4;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
    --shadow-hover: 0 16px 40px rgba(0,0,0,.55);
}

/* Logo swaps to its light-on-dark version in dark mode.
   Compound selectors (.a.b) so these beat the base `.brand-logo{display:block}`. */
.brand-logo.brand-logo-dark, .footer-logo.footer-logo-dark { display: none; }
:root[data-theme="dark"] .brand-logo.brand-logo-light,
:root[data-theme="dark"] .footer-logo.footer-logo-light { display: none; }
:root[data-theme="dark"] .brand-logo.brand-logo-dark,
:root[data-theme="dark"] .footer-logo.footer-logo-dark { display: block; }

/* Theme toggle button */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: none; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 1.05rem; line-height: 1; color: var(--ink-2); }
.theme-toggle:hover { border-color: var(--brand); color: var(--brand); }
.theme-icon-dark { display: none; }
:root[data-theme="dark"] .theme-icon-light { display: none; }
:root[data-theme="dark"] .theme-icon-dark { display: inline; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip; /* guard against any off-canvas horizontal scroll (keeps sticky working) */
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { line-height: 1.18; margin: 0 0 .4em; letter-spacing: -.02em; color: var(--ink); }
h1 { font-size: clamp(1.75rem, 3.2vw, 2.75rem); font-weight: 800; }
h2 { font-size: clamp(1.35rem, 2vw, 1.8rem); font-weight: 700; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.link { color: var(--brand); font-weight: 600; }
.brand-dot { color: var(--offer); }
.section { padding: 44px 0; }
.empty-state { padding: 56px 0; text-align: center; }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: .95rem; padding: 11px 20px;
    border-radius: 12px; border: 1px solid transparent; cursor: pointer;
    transition: transform .08s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background-image: var(--brand-grad); color: var(--brand-ink); box-shadow: 0 6px 18px rgba(130,22,146,.28); }
.btn-primary:hover { box-shadow: 0 10px 26px rgba(130,22,146,.38); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--chip); border-color: var(--brand); }
.btn-lg { padding: 14px 26px; font-size: 1.02rem; border-radius: 14px; }

/* App install banner (top) — content centered, close pinned right */
.app-banner { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 44px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.app-banner[hidden] { display: none; }
.app-banner-icon { width: 40px; height: 40px; border-radius: 9px; flex: none; }
.app-banner-text { min-width: 0; line-height: 1.25; }
.app-banner-text strong { display: block; font-size: .92rem; }
.app-banner-text span { font-size: .8rem; color: var(--muted); }
.app-banner .btn { padding: 8px 16px; font-size: .88rem; flex: none; }
.app-banner-close { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 1.1rem; color: var(--muted); cursor: pointer; padding: 4px 8px; }

/* Header */
.site-header { background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.brand-logo { height: 28px; width: auto; display: block; }
.header-nav { display: flex; align-items: center; gap: 12px; }
.header-nav a:not(.btn) { color: var(--ink-2); font-weight: 500; }
.header-nav a:not(.btn):hover { color: var(--brand); }

/* Language switcher */
.lang-switcher { position: relative; }
.lang-switcher summary { list-style: none; cursor: pointer; color: var(--ink-2); font-weight: 600; font-size: .9rem; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; }
.lang-switcher summary::-webkit-details-marker { display: none; }
.lang-switcher summary:hover { color: var(--brand); border-color: var(--brand); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-hover); padding: 6px; min-width: 170px; z-index: 40; display: flex; flex-direction: column; }
.lang-menu a { padding: 9px 12px; border-radius: 8px; color: var(--ink); font-weight: 500; }
.lang-menu a:hover { background: var(--chip); }
.lang-menu a.active { color: var(--brand); font-weight: 700; }

/* Hamburger + mobile nav (shown ≤760px) */
.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; background: none; border: none; cursor: pointer; }
.nav-toggle span { display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
    position: fixed; top: 0; right: 0; bottom: 0; width: 84%; max-width: 340px; z-index: 60;
    background: var(--surface); box-shadow: var(--shadow-hover); padding: 18px;
    display: flex; flex-direction: column; gap: 4px; overflow-y: auto;
    transform: translateX(100%); transition: transform .25s ease; visibility: hidden;
}
body.nav-open .mobile-nav { transform: translateX(0); visibility: visible; }
.mobile-nav-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mobile-nav-head strong { font-size: 1.05rem; }
.mobile-nav-head-actions { display: flex; align-items: center; gap: 8px; }
.nav-close { background: none; border: none; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--ink-2); width: 40px; height: 40px; }
.mobile-nav > a { padding: 13px 8px; border-radius: 10px; font-weight: 600; color: var(--ink); }
.mobile-nav > a:hover { background: var(--chip); color: var(--brand); }
.mobile-nav-label { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 14px 8px 6px; }
.mobile-nav-langs { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.mobile-nav-langs a { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: .88rem; font-weight: 600; color: var(--ink-2); }
.mobile-nav-langs a.active { border-color: var(--brand); color: var(--brand); }
.mobile-nav-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.mobile-nav-cta .btn { width: 100%; padding: 13px; }
.nav-backdrop { display: none; }
body.nav-open .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 55; }
body.nav-open { overflow: hidden; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); margin-top: 56px; padding: 36px 0 26px; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; padding-bottom: 22px; }
.footer-logo { height: 30px; margin-bottom: 10px; }
.footer-nav { display: flex; flex-direction: column; gap: 9px; }
.footer-nav a { color: var(--ink-2); }
.footer-nav a:hover { color: var(--brand); }

/* Hero */
.hero { background-image: var(--hero-grad); padding: 72px 0 56px; text-align: center; }
.hero-sub { color: var(--ink-2); font-size: 1.12rem; max-width: 660px; margin: 0 auto 30px; }
.hero-search { display: flex; gap: 10px; max-width: 580px; margin: 0 auto; }
.hero-search input { flex: 1; }

/* Forms */
input, select {
    font: inherit; padding: 12px 15px; border: 1px solid var(--line);
    border-radius: 12px; background: var(--surface); color: var(--ink);
}
input::placeholder { color: var(--muted); }
input:focus, select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(130,22,146,.15); }
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.filters input[type="search"] { flex: 1; min-width: 200px; }
.filters input[type="number"] { width: 120px; }

.section-head, .page-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; gap: 16px; }

/* Deal grid + cards */
.deal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 22px; }
.deal-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.deal-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.deal-media { position: relative; aspect-ratio: 4/3; background: #ffffff; border-bottom: 1px solid var(--line); overflow: hidden; }
.deal-media img { width: 100%; height: 100%; object-fit: contain; padding: 14px; transition: transform .3s ease; }
.deal-card:hover .deal-media img { transform: scale(1.05); }
.deal-media-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-weight: 700; }
.deal-badge { position: absolute; top: 11px; left: 11px; background-image: var(--offer-grad); color: #fff; font-weight: 800; font-size: .82rem; padding: 5px 11px; border-radius: 999px; box-shadow: 0 4px 12px rgba(255,95,0,.35); }
.deal-badge-lg { font-size: 1.15rem; padding: 8px 15px; }
.deal-body { padding: 15px 17px 19px; display: flex; flex-direction: column; flex: 1 1 auto; }
.deal-brand { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--brand); font-weight: 700; }
.deal-title { font-size: 1rem; font-weight: 600; margin: 5px 0 11px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; color: var(--ink); transition: color .15s ease; }
.deal-card:hover .deal-title { color: var(--brand); }
.deal-prices { display: flex; align-items: baseline; gap: 9px; }
.money { font-weight: 800; font-size: 1.2rem; color: var(--brand); }
.deal-was { color: var(--muted); text-decoration: line-through; font-size: .9rem; }
.deal-was .money { font-weight: 500; font-size: .9rem; color: var(--muted); }
.deal-meta { color: var(--ink-2); font-size: .84rem; margin-top: auto; padding-top: 9px; }
.flag { font-size: 1.05em; line-height: 1; vertical-align: -1px; }

.pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 40px; }

/* ---------- Faceted filtering ---------- */
.deals-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.sort-form { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.sort-label { color: var(--ink-2); font-size: .9rem; }
.filter-toggle { display: none; align-items: center; gap: 8px; }
.filter-count { background-image: var(--brand-grad); color: #fff; border-radius: 999px; font-size: .72rem; font-weight: 700; padding: 1px 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--chip); color: var(--brand); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: .85rem; font-weight: 600; }
.chip:hover { border-color: var(--brand); }
.chip-clear { background: transparent; color: var(--ink-2); }

.deals-layout { display: grid; grid-template-columns: 268px 1fr; gap: 28px; align-items: start; }
.deals-results { min-width: 0; }

.filters-panel { position: sticky; top: 84px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.filters-head { display: none; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.filter-close { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--ink-2); }
.filter-group { padding: 14px 0; border-bottom: 1px solid var(--line); }
.filter-group:last-of-type { border-bottom: none; }
.filter-group h4 { margin: 0 0 10px; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.filter-group input[type="search"] { width: 100%; }
.range-row { display: flex; align-items: center; gap: 8px; }
.range-row input { width: 100%; min-width: 0; }
.range-row span { color: var(--muted); font-size: .85rem; white-space: nowrap; }

.facet-search { width: 100%; margin-bottom: 8px; }
.facet-list { max-height: 240px; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.facet-list::-webkit-scrollbar { width: 8px; }
.facet-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.facet-row { display: flex; align-items: center; gap: 9px; padding: 6px 4px; border-radius: 8px; cursor: pointer; }
.facet-row:hover { background: var(--chip); }
.facet-row input { width: 16px; height: 16px; accent-color: var(--brand); flex: none; }
.facet-name { flex: 1; font-size: .9rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facet-count { color: var(--muted); font-size: .8rem; background: var(--surface-2); border-radius: 999px; padding: 1px 8px; }
.filters-actions { display: flex; gap: 8px; padding-top: 16px; }
.filters-actions .btn { flex: 1; }

.filter-backdrop { display: none; }

@media (max-width: 900px) {
    .deals-layout { grid-template-columns: 1fr; }
    .filter-toggle { display: inline-flex; }
    .filters-panel {
        position: fixed; top: 0; left: 0; bottom: 0; width: 86%; max-width: 340px; z-index: 60;
        border-radius: 0; overflow-y: auto; transform: translateX(-100%); transition: transform .25s ease;
    }
    .filters-head { display: flex; }
    body.filters-open .filters-panel { transform: translateX(0); }
    body.filters-open .filter-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 50; }
    body.filters-open { overflow: hidden; }
}

/* Auto-rotating preview carousel (mirrors mobile DiscountsPreview) */
.preview-viewport {
    display: flex; gap: 22px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    padding: 4px 2px 8px; margin: 0 -2px;
    -ms-overflow-style: none; scrollbar-width: none;
}
.preview-viewport::-webkit-scrollbar { display: none; }
.preview-item { flex: 0 0 calc((100% - 22px) / 2); scroll-snap-align: start; } /* mobile: 2 */
@media (min-width: 640px)  { .preview-item { flex-basis: calc((100% - 2 * 22px) / 3); } } /* 3 */
@media (min-width: 900px)  { .preview-item { flex-basis: calc((100% - 3 * 22px) / 4); } } /* 4 */
@media (min-width: 1200px) { .preview-item { flex-basis: calc((100% - 4 * 22px) / 5); } } /* 5 */

/* Error page */
.error-page { text-align: center; padding: 88px 0; }
.error-code { font-size: clamp(4rem, 12vw, 7rem); font-weight: 800; line-height: 1; background-image: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.error-page .cta-actions { justify-content: center; margin-top: 26px; }

/* Tag cloud (categories / brands) */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.tag { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 9px 15px; font-weight: 600; color: var(--ink); box-shadow: var(--shadow); transition: border-color .12s ease, transform .12s ease; }
.tag:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }
.tag span { color: var(--muted); font-size: .8rem; font-weight: 500; }

/* Deal detail */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 26px 0 8px; color: var(--ink-2); font-size: .9rem; }
.breadcrumb a:hover { color: var(--brand); }
.deal-detail { padding-bottom: 24px; }
.detail-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: start; margin-top: 12px; }
.detail-media { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.detail-media img { width: 100%; aspect-ratio: 4/3; object-fit: contain; }
.detail-info h1 { margin-top: 6px; }
.price-panel { display: flex; align-items: baseline; flex-wrap: wrap; gap: 15px; margin: 20px 0; }
.price-now .money { font-size: 2.4rem; }
.price-was { color: var(--muted); }
.price-save { background-image: var(--offer-grad); color: #fff; font-weight: 800; padding: 5px 14px; border-radius: 999px; font-size: .9rem; box-shadow: 0 4px 12px rgba(255,95,0,.3); }
.urgency { color: var(--offer); font-weight: 700; margin: 4px 0 22px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 26px; }
.retailer-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.retailer-card:hover { border-color: var(--brand); }
.retailer-card strong { display: block; }
.detail-description { margin-top: 44px; max-width: 820px; }
.detail-description p { color: var(--ink-2); }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: .93rem; }
.spec-table th { width: 38%; color: var(--ink-2); font-weight: 600; }
.spec-table td { color: var(--ink); }

/* Retailer directory grid + tiles */
.retailer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; }
.retailer-tile {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
    background-image: var(--card-grad); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 24px 18px; box-shadow: var(--shadow); transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.retailer-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--brand); }
.retailer-tile-logo {
    position: relative;
    width: 92px; height: 92px; border-radius: 18px; background: #fff; border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
/* Logo overlays the initial; if it fails to load (onerror) it hides, revealing the initial. */
.retailer-tile-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 12px; background: #fff; }
.logo-initial { font-size: 2rem; font-weight: 800; color: var(--brand); }
.retailer-tile-name { font-weight: 700; color: var(--ink); }

/* Retailer page */
.retailer-head { display: flex; align-items: center; gap: 18px; margin-bottom: 30px; }
.retailer-logo-box {
    position: relative; flex: none; width: 72px; height: 72px; border-radius: 14px;
    border: 1px solid var(--line); background: #fff; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.retailer-logo-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8px; background: #fff; }
.retailer-logo-box .logo-initial { font-size: 1.6rem; }

/* CTA band */
.cta-band { background-image: var(--brand-grad); color: #fff; text-align: center; padding: 60px 0; margin-top: 56px; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.85); margin: 0 auto 26px; max-width: 540px; }
.cta-band .cta-actions { justify-content: center; }
.cta-band .btn-primary { background: #fff; background-image: none; color: var(--brand); box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.cta-band .btn-ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }

@media (max-width: 760px) {
    .detail-grid { grid-template-columns: 1fr; gap: 24px; }
    .price-now .money { font-size: 1.9rem; }
    .brand-logo { height: 24px; }
    /* Mobile header: hide desktop nav, show hamburger (opens the mobile menu). */
    .header-inner { height: 60px; gap: 10px; }
    .header-nav { display: none; }
    .nav-toggle { display: inline-flex; }
    .section { padding: 34px 0; }
    .hero { padding: 48px 0 40px; }
    .hero-sub { font-size: 1rem; margin-bottom: 22px; }
    .cta-band { padding: 46px 0; margin-top: 40px; }
    .section-head, .page-head { margin-bottom: 16px; }
    .btn-lg { padding: 12px 18px; font-size: .98rem; }
    .breadcrumb { padding-top: 18px; }
}

@media (max-width: 600px) {
    /* Two deal columns on phones (matches the 2-up preview carousel). */
    .deal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .container { padding: 0 16px; }
    .deal-title { font-size: .92rem; min-height: 2.4em; }
    .money { font-size: 1.05rem; }
    .deal-body { padding: 12px 13px 15px; }
    .hero-search { flex-direction: column; }
    .hero-search .btn { width: 100%; }
    .deals-toolbar { flex-wrap: wrap; }
    .sort-form { margin-left: 0; width: 100%; }
    .sort-form select { flex: 1; }
    .filter-toggle { flex: 1; }
    .retailer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .cta-actions { flex-direction: column; }
    .cta-actions .btn { width: 100%; }
    .footer-inner { flex-direction: column; gap: 18px; }
}

@media (max-width: 600px) {
    /* Stack the spec table so nothing overflows on narrow screens. */
    .spec-table tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); }
    .spec-table th, .spec-table td { display: block; width: auto; border: none; padding: 2px 0; }
    .spec-table th { color: var(--ink-2); }
}

@media (max-width: 360px) {
    .deal-grid, .retailer-grid { grid-template-columns: 1fr; }
}

/* ---------- Legal / policy pages ---------- */
.policy-page { padding: 48px 0 60px; }
.policy-hero { margin-bottom: 28px; }
.policy-kicker { display: inline-block; color: var(--brand); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; margin-bottom: 6px; }
.policy-hero h1 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 0; }
.section-lead { color: var(--muted); }
.policy-page .toc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 28px; box-shadow: var(--shadow); }
.policy-page .toc ul { columns: 2; margin: 10px 0 0; padding-left: 18px; }
.policy-page .toc a { color: var(--ink-2); }
.policy-page .toc a:hover { color: var(--brand); }
.policy-content { max-width: 820px; }
.policy-content h3 { margin-top: 32px; font-size: 1.2rem; }
.policy-content p { color: var(--ink-2); }
.policy-content a { color: var(--brand); font-weight: 600; }
.policy-content code { background: var(--surface-2); padding: 1px 6px; border-radius: 6px; font-size: .88em; }
.list-brand { color: var(--ink-2); padding-left: 20px; }
.list-brand li { margin: 6px 0; }
.list-rows { display: flex; flex-direction: column; gap: 2px; margin: 12px 0; }
.list-rows .row { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.list-rows .term { font-weight: 700; color: var(--ink); }
.list-rows .detail { color: var(--ink-2); }
@media (max-width: 680px) {
    .policy-page .toc ul { columns: 1; }
    .list-rows .row { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Cookie consent banner ---------- */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; display: flex; justify-content: center; }
.cookie-banner[hidden] { display: none; }
.cookie-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-hover); padding: 18px 22px; max-width: 760px; width: 100%; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cookie-text { flex: 1; min-width: 240px; color: var(--ink-2); font-size: .92rem; }
.cookie-text strong { color: var(--ink); display: block; margin-bottom: 2px; }
.cookie-text a { color: var(--brand); font-weight: 600; }
.cookie-actions { display: flex; gap: 10px; }
@media (max-width: 560px) { .cookie-actions { width: 100%; } .cookie-actions .btn { flex: 1; } }