:root {
      /* ── Neutral palette ── */
      --accent:       #111827;   /* near-black for accent elements */
      --accent-lite:  #374151;   /* dark charcoal for secondary accents */
      --accent-pale:  #f3f4f6;   /* light grey bg tint */
      --accent-muted: #e5e7eb;   /* border / muted bg */
      --black:        #111111;
      --gray-50:      #fafafa;
      --gray-100:     #f5f5f7;
      --gray-200:     #e8e8ed;
      --gray-300:     #d2d2d7;
      --gray-400:     #b0b0b8;
      --gray-500:     #86868b;
      --gray-700:     #515154;
      --white:        #ffffff;
      --radius:       14px;
      --radius-sm:    10px;
      --radius-xs:    7px;
      --shadow:       0 2px 16px rgba(0,0,0,.07);
      --shadow-lg:    0 8px 36px rgba(0,0,0,.12);
      --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      /* ── Vendor colours — stay colourful ── */
      --zis:      #dc2626;
      --atstore:  #1d4ed8;
      --mekline:  #15803d;
      --fontele:  #b45309;
      --itshop:   #7c3aed;
      --domod:    #0891b2;
      --mobishop: #ea580c;
      --iqmobile: #4f46e5;
      --cehajic:  #db2777;
      --abcshop:  #059669;
      --hustel:        #9333ea;
      --pacomoby:      #e11d48;
      --univerzalno:   #0d9488;
      --genelec:       #0f766e;
      --kam:           #c2410c;
      --mobitelstudio: #7e22ce;
      --omegashop:     #0369a1;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; overflow-x: clip; }
    body { font-family: var(--font); background: var(--gray-100); color: var(--black); }

    /* ─────────────────── TOPBAR ─────────────────── */
    #topbar {
      position: sticky; top: 0; z-index: 200;
      height: 52px;
      background: rgba(17,17,17,.95);
      backdrop-filter: saturate(180%) blur(24px);
      -webkit-backdrop-filter: saturate(180%) blur(24px);
      display: flex; align-items: center;
      padding: 0 28px; gap: 20px;
    }
    .tb-logo {
      display: flex; align-items: center; gap: 9px;
      text-decoration: none; color: var(--white);
    }
    .tb-logo svg { width: 20px; height: 20px; fill: var(--white); flex-shrink: 0; }
    .tb-logo-text { font-size: 16px; font-weight: 700; letter-spacing: -.2px; }
    .tb-logo-sep { width: 1px; height: 18px; background: rgba(255,255,255,.2); }
    .tb-logo-sub { font-size: 12px; color: rgba(255,255,255,.5); font-weight: 400; }
    .tb-spacer { flex: 1; }
    #tb-updated { font-size: 12px; color: rgba(255,255,255,.4); }
    #tb-refresh {
      display: flex; align-items: center; gap: 6px;
      padding: 6px 13px; border-radius: 20px;
      border: 1px solid rgba(255,255,255,.2);
      background: rgba(255,255,255,.08);
      color: rgba(255,255,255,.8); font-size: 12.5px; font-weight: 500;
      cursor: pointer; transition: all .18s; font-family: var(--font);
    }
    #tb-refresh:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.35); }
    #tb-refresh svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
    /* ── Hero donate starburst ── */
    /* 12-point starburst clip-path (outer R=50, inner R=36, angle step 15°) */
    /* Both donate elements start invisible — shown after 2min via body.donate-ready */
    #hero-donate-wrap,
    #hero-donate-inline { opacity: 0; pointer-events: none; transition: opacity .9s ease; }
    body.donate-ready #hero-donate-wrap,
    body.donate-ready #hero-donate-inline { opacity: 1; pointer-events: auto; }

    #hero-donate-wrap {
      position: absolute; right: 4%; top: 50%; transform: translateY(-50%);
    }
    #hero-donate {
      width: 210px; height: 210px;
      display: flex; align-items: center; justify-content: center;
      text-decoration: none;
      background: linear-gradient(145deg, #3b0a0a 0%, #6b1a1a 50%, #3b0a0a 100%);
      clip-path: polygon(50% 0%,59.3% 15.2%,75% 6.7%,75.5% 24.5%,93.3% 25%,84.8% 40.7%,100% 50%,84.8% 59.3%,93.3% 75%,75.5% 75.5%,75% 93.3%,59.3% 84.8%,50% 100%,40.7% 84.8%,25% 93.3%,24.5% 75.5%,6.7% 75%,15.2% 59.3%,0% 50%,15.2% 40.7%,6.7% 25%,24.5% 24.5%,25% 6.7%,40.7% 15.2%);
      transition: transform .25s ease, filter .25s ease;
    }
    #hero-donate:hover { transform: scale(1.07) rotate(7deg); filter: brightness(1.2); }
    #hero-donate::before {
      content: ''; position: absolute;
      width: 138px; height: 138px; border-radius: 50%;
      border: 1px solid rgba(255,255,255,.15);
      pointer-events: none;
    }
    .hd-inner {
      position: relative; z-index: 1;
      display: flex; flex-direction: column; align-items: center;
      gap: 6px; text-align: center;
      max-width: 108px;
    }
    .hd-heart  { font-size: 22px; color: #fca5a5; line-height: 1; }
    .hd-label  { font-size: 11px; color: rgba(255,255,255,.65); font-weight: 500; line-height: 1.35; word-break: break-word; }
    .hd-word   { font-size: 22px; color: #fff; font-weight: 800; letter-spacing: .04em; line-height: 1; text-transform: uppercase; }
    .hd-site   { font-size: 11px; color: #fca5a5; font-weight: 700; letter-spacing: .04em;
                 border-top: 1px solid rgba(255,255,255,.15); padding-top: 5px; margin-top: 1px; }
    @media (max-width: 960px) { #hero-donate-wrap { display: none; } }

    /* Prevent badge overlapping hero text on medium screens */
    @media (min-width: 961px) and (max-width: 1280px) {
      #hero { padding-right: 260px; }
    }

    /* ── Hero inline donate — replaces starburst on small screens ── */
    #hero-donate-inline { display: none; margin-top: 20px; }
    #hero-donate-inline a {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 9px 22px; border-radius: 26px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(155,40,40,.22);
      color: rgba(255,255,255,.78); text-decoration: none;
      font-size: 13.5px; font-weight: 500;
      transition: background .18s, border-color .18s;
    }
    #hero-donate-inline a:hover { background: rgba(155,40,40,.36); border-color: rgba(255,255,255,.32); }
    .hdm-heart { font-size: 15px; color: #fca5a5; }
    .hdm-label { color: rgba(255,255,255,.6); }
    .hdm-sep   { color: rgba(255,255,255,.25); }
    .hdm-word  { color: #f87171; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
    .hdm-site  { color: #fca5a5; font-weight: 700; font-size: 13px; }
    @media (max-width: 959px) { #hero-donate-inline { display: flex; justify-content: center; } }

    /* ─────────────────── LANG FLAGS ─────────────────── */
    #lang-flags { display: flex; gap: 4px; align-items: center; }
    #lang-flags button {
      background: none; border: none; cursor: pointer;
      font-size: 11px; font-weight: 700; font-family: var(--font);
      color: rgba(255,255,255,.45); letter-spacing: .03em;
      padding: 4px 6px; border-radius: 4px; line-height: 1;
      transition: color .15s, background .15s;
    }
    #lang-flags button:hover { color: rgba(255,255,255,.8); }
    #lang-flags button.active { color: #fff; background: rgba(255,255,255,.15); }

    /* ─────────────────── HERO ─────────────────── */
    #hero {
      background: var(--black);
      padding: 60px 28px 52px;
      text-align: center;
      position: relative; overflow: hidden;
    }
    #hero::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 60% 50% at 50% 110%, rgba(255,255,255,.04) 0%, transparent 70%);
      pointer-events: none;
    }
    .hero-eyebrow {
      display: inline-flex; align-items: center; gap: 7px;
      background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
      color: rgba(255,255,255,.7); font-size: 12px; font-weight: 600; letter-spacing: .06em;
      text-transform: uppercase; padding: 5px 14px; border-radius: 20px; margin-bottom: 20px;
      max-width: calc(100vw - 32px); text-align: center; flex-wrap: wrap; justify-content: center;
    }
    .hero-eyebrow span.pulse {
      display: inline-block; width: 7px; height: 7px; border-radius: 50%;
      background: #4ade80; animation: pulse 2s ease-in-out infinite;
    }
    @keyframes pulse {
      0%,100% { opacity: 1; transform: scale(1); }
      50% { opacity: .4; transform: scale(.65); }
    }
    #hero h1 {
      font-size: clamp(28px, 5vw, 52px); font-weight: 800; color: var(--white);
      letter-spacing: -.8px; line-height: 1.1; margin-bottom: 14px;
    }
    #hero h1 span { color: #d1d5db; }
    #hero p { font-size: 16px; color: rgba(255,255,255,.45); max-width: 520px; margin: 0 auto 28px; line-height: 1.6; padding: 0 4px; }
    #hero-cats-wrap { margin-bottom: 36px; }
    #hero-cats-wrap .cats { justify-content: center; flex-wrap: wrap; }
    #hero-cats-wrap .cat {
      border-color: rgba(255,255,255,.2);
      color: rgba(255,255,255,.65);
      background: rgba(255,255,255,.07);
    }
    #hero-cats-wrap .cat:hover {
      border-color: rgba(255,255,255,.5);
      color: var(--white);
      background: rgba(255,255,255,.14);
    }
    #hero-cats-wrap .cat.active {
      background: var(--white);
      border-color: var(--white);
      color: var(--black);
    }

    .vendor-pills { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
    .vp {
      display: flex; align-items: center; gap: 7px;
      padding: 7px 16px; border-radius: 22px;
      border: 1.5px solid; font-size: 13px; font-weight: 600;
      text-decoration: none; transition: transform .15s, opacity .15s;
    }
    .vp:hover { transform: translateY(-1px); opacity: .85; }
    .vp .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .vp-zis     { color: #fca5a5; border-color: rgba(252,165,165,.35); }
    .vp-zis .dot { background: var(--zis); }
    .vp-atstore { color: #93c5fd; border-color: rgba(147,197,253,.35); }
    .vp-atstore .dot { background: var(--atstore); }
    .vp-mekline { color: #86efac; border-color: rgba(134,239,172,.35); }
    .vp-mekline .dot { background: var(--mekline); }
    .vp-fontele { color: #fcd34d; border-color: rgba(252,211,77,.35); }
    .vp-fontele .dot { background: var(--fontele); }
    .vp-itshop   { color: #c4b5fd; border-color: rgba(196,181,253,.35); }
    .vp-itshop .dot  { background: var(--itshop); }
    .vp-domod    { color: #67e8f9; border-color: rgba(103,232,249,.35); }
    .vp-domod .dot   { background: var(--domod); }
    .vp-mobishop { color: #fdba74; border-color: rgba(253,186,116,.35); }
    .vp-mobishop .dot { background: var(--mobishop); }
    .vp-iqmobile { color: #a5b4fc; border-color: rgba(165,180,252,.35); }
    .vp-iqmobile .dot { background: var(--iqmobile); }
    .vp-cehajic  { color: #f9a8d4; border-color: rgba(249,168,212,.35); }
    .vp-cehajic .dot  { background: var(--cehajic); }
    .vp-abcshop  { color: #6ee7b7; border-color: rgba(110,231,183,.35); }
    .vp-abcshop .dot  { background: var(--abcshop); }
    .vp-hustel   { color: #d8b4fe; border-color: rgba(216,180,254,.35); }
    .vp-hustel .dot  { background: var(--hustel); }
    .vp-pacomoby { color: #fda4af; border-color: rgba(253,164,175,.35); }
    .vp-pacomoby .dot { background: var(--pacomoby); }
    .vp-univerzalno  { color: #5eead4; border-color: rgba(94,234,212,.35); }
    .vp-univerzalno .dot  { background: var(--univerzalno); }
    .vp-genelec       { color: #5eead4; border-color: rgba(15,118,110,.35); }
    .vp-genelec .dot  { background: var(--genelec); }
    .vp-kam           { color: #fdba74; border-color: rgba(194,65,12,.35); }
    .vp-kam .dot      { background: var(--kam); }
    .vp-mobitelstudio { color: #d8b4fe; border-color: rgba(126,34,206,.35); }
    .vp-mobitelstudio .dot { background: var(--mobitelstudio); }
    .vp-omegashop     { color: #7dd3fc; border-color: rgba(3,105,161,.35); }
    .vp-omegashop .dot { background: var(--omegashop); }

    /* ─────────────────── STATS ─────────────────── */
    #stats {
      background: var(--white);
      border-bottom: 1px solid var(--gray-200);
      padding: 18px 28px;
      display: flex; align-items: center; gap: 0;
      overflow-x: auto;
    }
    .stat { display: flex; flex-direction: column; align-items: center; padding: 0 24px; min-width: max-content; }
    .stat:first-child { padding-left: 0; }
    .stat-n { font-size: 24px; font-weight: 800; color: var(--accent); letter-spacing: -.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .stat-l { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--gray-500); margin-top: 1px; }
    .stat-sep { width: 1px; height: 40px; background: var(--gray-200); flex-shrink: 0; }
    .stat-clickable { cursor: pointer; border-radius: 8px; padding: 6px 24px; transition: background .15s, border .15s; border: 1px solid transparent; }
    .stat-clickable:hover { background: #f0fdf4; }
    .stat-clickable:hover .stat-n,
    .stat-clickable:hover .stat-l { color: #16a34a; }
    .stat-clickable.stat-active { background: #dcfce7; border-color: #86efac; }
    .stat-clickable.stat-active .stat-n,
    .stat-clickable.stat-active .stat-l { color: #15803d; }

    /* ─────────────────── DEALS BANNER ─────────────────── */
    #deals-wrap {
      background: var(--white); border-bottom: 1px solid var(--gray-200);
      padding: 12px 28px 14px;
    }
    .deals-head {
      display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
    }
    .deals-head-lbl {
      font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
      color: var(--accent-lite); display: flex; align-items: center; gap: 6px;
    }
    .deals-head-lbl svg { width: 14px; height: 14px; fill: currentColor; }
    #deals-scroller {
      display: flex; flex-wrap: wrap; gap: 8px;
    }

    .deal-chip {
      display: flex; align-items: center; gap: 8px;
      background: var(--accent-pale); border: 1px solid var(--accent-muted);
      border-radius: 10px; padding: 7px 13px; text-decoration: none; color: inherit;
      cursor: pointer; transition: background .15s, transform .1s;
      flex: 0 1 auto; min-width: 0; overflow: hidden;
    }
    .deal-chip:hover { background: var(--accent-muted); transform: translateY(-1px); }
    .deal-chip-disc {
      background: var(--accent); color: white; font-size: 11px; font-weight: 800;
      padding: 2px 7px; border-radius: 6px; white-space: nowrap; flex-shrink: 0;
    }
    .deal-chip-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .deal-chip-price { font-size: 13px; color: var(--accent-lite); font-weight: 700; white-space: nowrap; flex-shrink: 0; }

    /* ─────────────────── CATEGORY BAR ─────────────────── */
    #cat-bar {
      background: var(--white);
      border-bottom: none;
      padding: 10px 28px;
      position: sticky; top: 0; z-index: 210;
    }
    #cat-bar .cats { padding-bottom: 0; }

    /* ─────────────────── CONTROLS ─────────────────── */
    #controls {
      background: var(--white);
      border-bottom: 1px solid var(--gray-200);
      padding: 0 0 0;
      display: flex; flex-direction: column; gap: 0;
      z-index: 205;
    }
    .ctrl-row {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 28px;
    }
    .ctrl-row-1 { flex-wrap: nowrap; border-bottom: 1px solid var(--gray-100); padding-bottom: 8px; padding-top: 10px; }
    .ctrl-row-2 { flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }

    /* Vendor filter dropdown */
    .ctrl-row-2 { position: relative; }
    .vf-dropdown-wrap { position: relative; display: inline-block; }
    .vf-dropdown-btn {
      display: flex; align-items: center; gap: 7px;
      padding: 7px 14px; border-radius: var(--radius-xs); font-size: 13.5px; font-weight: 600;
      border: 1.5px solid var(--gray-300); background: var(--gray-100);
      cursor: pointer; font-family: var(--font); color: var(--gray-700);
      white-space: nowrap; transition: all .15s; user-select: none;
    }
    .vf-dropdown-btn:hover, .vf-dropdown-btn.open { border-color: var(--accent-lite); background: var(--white); color: var(--black); }
    .vf-dropdown-btn svg { flex-shrink: 0; }
    .vf-chevron { transition: transform .2s; }
    .vf-active-badge {
      background: var(--accent); color: var(--white); border-radius: 10px;
      padding: 1px 7px; font-size: 11px; font-weight: 700; min-width: 28px; text-align: center;
    }
    .vf-active-badge.all-active { background: #16a34a; }
    .vf-panel {
      display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 200;
      background: var(--white); border: 1.5px solid var(--gray-200); border-radius: var(--radius);
      box-shadow: 0 8px 24px rgba(0,0,0,.12); min-width: 220px; max-width: 320px;
      padding: 8px 0; overflow: hidden;
    }
    .vf-panel.open { display: block; }
    .vf-panel-header {
      display: flex; gap: 6px; padding: 8px 12px 10px;
      border-bottom: 1px solid var(--gray-100);
    }
    .vf-panel-sel, .vf-panel-desel {
      flex: 1; padding: 5px 8px; border-radius: 6px; font-size: 12px; font-weight: 700;
      cursor: pointer; font-family: var(--font); border: 1.5px solid transparent; transition: all .15s;
    }
    .vf-panel-sel { background: #f0fdf4; color: #15803d; border-color: #86efac; }
    .vf-panel-sel:hover { background: #dcfce7; }
    .vf-panel-desel { background: #fff1f2; color: #be123c; border-color: #fecdd3; }
    .vf-panel-desel:hover { background: #ffe4e6; }
    .vf-checklist { padding: 4px 0; max-height: 340px; overflow-y: auto; }
    .vf-item {
      display: flex; align-items: center; gap: 8px;
      padding: 7px 14px; cursor: pointer; transition: background .1s; user-select: none;
      font-size: 13.5px; font-weight: 500; color: var(--gray-500);
    }
    .vf-item:hover { background: var(--gray-100); }
    .vf-item.on { color: var(--black); }
    .vf-checkbox {
      width: 16px; height: 16px; border: 1.5px solid var(--gray-300); border-radius: 4px;
      flex-shrink: 0; display: flex; align-items: center; justify-content: center;
      transition: all .15s; background: var(--white);
    }
    .vf-item.on .vf-checkbox { background: var(--accent); border-color: var(--accent); }
    .vf-check-icon { display: none; width: 10px; height: 10px; color: white; }
    .vf-item.on .vf-check-icon { display: block; }
    .vf-item .vf-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .vf-item .vf-name { flex: 1; }
    .vf-item .vf-cnt { font-size: 11px; color: var(--gray-500); background: var(--gray-100); border-radius: 8px; padding: 1px 6px; }

    /* Category tabs — keep colourful */
    .cats { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 1px; flex-shrink: 0; }
    .cats::-webkit-scrollbar { display: none; }
    .cat {
      padding: 6px 16px; border-radius: 22px; font-size: 13.5px; font-weight: 500;
      border: 1.5px solid var(--gray-300); background: transparent;
      cursor: pointer; transition: all .15s; color: var(--gray-700); white-space: nowrap;
      font-family: var(--font);
    }
    .cat .cat-cnt { font-size: 11px; opacity: .6; margin-left: 1px; }
    .cat.active .cat-cnt { opacity: .8; }
    .cat:hover { border-color: var(--accent); color: var(--accent); }
    .cat.active { background: var(--accent); border-color: var(--accent); color: var(--white); font-weight: 600; }
    /* Per-category colour when active */
    .cat[data-cat="iPhone"].active  { background: #dc2626; border-color: #dc2626; }
    .cat[data-cat="iPad"].active    { background: #1d4ed8; border-color: #1d4ed8; }
    .cat[data-cat="Mac"].active     { background: #374151; border-color: #374151; }
    .cat[data-cat="Watch"].active   { background: #15803d; border-color: #15803d; }
    .cat[data-cat="AirPods"].active { background: #7c3aed; border-color: #7c3aed; }
    .cat[data-cat="AirTag"].active  { background: #0891b2; border-color: #0891b2; }

    /* Vendor filter pills */
    .vfilters { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
    .vfil {
      display: flex; align-items: center; gap: 5px;
      padding: 5px 11px; border-radius: 22px; font-size: 12.5px; font-weight: 600;
      border: 1.5px solid var(--gray-300); background: var(--white);
      cursor: pointer; transition: all .15s; font-family: var(--font); color: var(--gray-700);
    }
    .vfil .vf-dot { width: 7px; height: 7px; border-radius: 50%; opacity: .45; transition: opacity .15s; }
    .vfil .vf-cnt { font-size: 10.5px; opacity: .55; margin-left: 1px; }
    .vfil.on .vf-dot { opacity: 1; }
    .vfil.on .vf-cnt { opacity: .75; }
    .vfil.on { color: var(--black); }
    .vfil-zis.on     { border-color: var(--zis);     background: #fef2f2; color: #991b1b; }
    .vfil-atstore.on { border-color: var(--atstore); background: #eff6ff; color: #1e40af; }
    .vfil-mekline.on { border-color: var(--mekline); background: #f0fdf4; color: #166534; }
    .vfil-fontele.on { border-color: var(--fontele); background: #fffbeb; color: #92400e; }
    .vfil-itshop.on   { border-color: var(--itshop);   background: #f5f3ff; color: #5b21b6; }
    .vfil-domod.on    { border-color: var(--domod);    background: #ecfeff; color: #0e7490; }
    .vfil-mobishop.on { border-color: var(--mobishop); background: #fff7ed; color: #9a3412; }
    .vfil-iqmobile.on { border-color: var(--iqmobile); background: #eef2ff; color: #3730a3; }
    .vfil-cehajic.on  { border-color: var(--cehajic);  background: #fdf2f8; color: #9d174d; }
    .vfil-abcshop.on  { border-color: var(--abcshop);  background: #ecfdf5; color: #065f46; }
    .vfil-univerzalno.on { border-color: var(--univerzalno); background: #f0fdfa; color: #115e59; }

    .ctrl-sep { flex: 1; min-width: 12px; }

    .srch { position: relative; }
    .srch svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--gray-500); pointer-events: none; }
    #search {
      padding: 7px 12px 7px 31px;
      border: 1.5px solid var(--gray-300); border-radius: var(--radius-xs);
      font: 500 13.5px/1 var(--font); width: 200px; outline: none;
      background: var(--gray-100); color: var(--black); transition: all .15s;
    }
    #search:focus { border-color: var(--accent-lite); background: var(--white); box-shadow: 0 0 0 3px rgba(55,65,81,.1); }

    #sort {
      padding: 7px 11px; border: 1.5px solid var(--gray-300); border-radius: var(--radius-xs);
      font: 500 13.5px/1 var(--font); outline: none; background: var(--gray-100);
      color: var(--black); cursor: pointer; transition: border-color .15s;
    }
    #sort:focus { border-color: var(--accent-lite); }

    .vtog { display: flex; border: 1.5px solid var(--gray-300); border-radius: var(--radius-xs); overflow: hidden; }
    .vbtn { padding: 6px 10px; border: none; background: var(--gray-100); cursor: pointer; color: var(--gray-500); display: flex; align-items: center; transition: all .15s; }
    .vbtn svg { width: 16px; height: 16px; fill: currentColor; }
    .vbtn.on { background: var(--accent); color: var(--white); }

    /* ─────────────────── MAIN ─────────────────── */
    #main { max-width: 1440px; margin: 0 auto; padding: 28px; }

    #errbanner {
      display: none; background: #fff7ed; border: 1px solid #fed7aa;
      border-radius: var(--radius-xs); padding: 12px 16px; margin-bottom: 20px;
      font-size: 13px; color: #7c2d12;
    }

    #sale-filter-banner {
      display: none; align-items: center; gap: 10px;
      background: #dcfce7; border: 1px solid #86efac; border-radius: var(--radius-xs);
      padding: 10px 16px; margin-bottom: 20px; font-size: 13px; font-weight: 600; color: #15803d;
    }
    #sale-filter-banner svg { width: 16px; height: 16px; flex-shrink: 0; }
    #sale-filter-banner span { flex: 1; }
    #sale-filter-banner button {
      background: none; border: 1px solid #16a34a; border-radius: 6px;
      padding: 4px 10px; color: #15803d; font-size: 12px; font-weight: 700; cursor: pointer;
    }
    #sale-filter-banner button:hover { background: #bbf7d0; }

    .sec-lbl {
      font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
      color: var(--gray-500); margin: 28px 0 14px; padding-bottom: 10px;
      border-bottom: 2px solid var(--gray-200); display: flex; align-items: center; gap: 8px;
    }
    .sec-lbl::after { content: ''; flex: 1; height: 2px; background: var(--gray-200); }
    .sec-lbl .sec-cnt {
      background: var(--gray-200); color: var(--gray-700);
      font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 10px;
      margin-left: 6px;
    }
    /* Category section label colour accents */
    .sec-lbl[data-cat="iPhone"]  { border-bottom-color: #fecaca; }
    .sec-lbl[data-cat="iPad"]    { border-bottom-color: #bfdbfe; }
    .sec-lbl[data-cat="Mac"]     { border-bottom-color: #e5e7eb; }
    .sec-lbl[data-cat="Watch"]   { border-bottom-color: #bbf7d0; }
    .sec-lbl[data-cat="AirPods"] { border-bottom-color: #ddd6fe; }
    .sec-lbl[data-cat="AirTag"]  { border-bottom-color: #a5f3fc; }

    /* ─────────────────── GRID ─────────────────── */
    #grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 18px; }
    #grid.list { grid-template-columns: 1fr; }

    /* ─────────────────── CARD ─────────────────── */
    .card {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      transition: transform .2s, box-shadow .2s;
    }
    .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
    .card-highlight {
      animation: cardPulse 2s ease-out;
    }
    @keyframes cardPulse {
      0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
      20%  { box-shadow: 0 0 0 6px rgba(34,197,94,.35); }
      50%  { box-shadow: 0 0 0 4px rgba(34,197,94,.2); }
      100% { box-shadow: var(--shadow); }
    }

    .ch {
      padding: 17px 20px 15px;
      border-bottom: 1px solid var(--gray-200);
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
    }
    .ch-left { display: flex; flex-direction: column; gap: 2px; }
    .ch-name { font-size: 15.5px; font-weight: 700; letter-spacing: -.2px; line-height: 1.2; }
    .ch-cat  { font-size: 11px; color: var(--gray-500); font-weight: 500; }
    .ch-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
    .ch-storage {
      font-size: 12px; font-weight: 600;
      background: var(--accent-pale); color: var(--accent-lite); padding: 3px 9px; border-radius: 12px;
    }
    .ch-cnt {
      font-size: 11px; font-weight: 600; color: var(--gray-500);
      background: var(--gray-100); padding: 3px 8px; border-radius: 12px;
    }

    .cb { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }

    /* ── Vendor row — core ── */
    .vrow {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 12px; border-radius: var(--radius-xs);
      border: 1.5px solid var(--gray-200);
      text-decoration: none; color: inherit;
      transition: border-color .15s, background .15s, transform .1s;
      position: relative;
    }
    /* available rows are <a> tags → show pointer */
    a.vrow { cursor: pointer; }
    a.vrow:hover { border-color: var(--gray-400); background: var(--gray-100); transform: translateX(2px); }
    /* best-price row stays green */
    .vrow.best { border-color: #15803d; background: #f0fdf4; }
    a.vrow.best:hover { background: #dcfce7; border-color: #16a34a; }
    /* unavailable */
    .vrow.na { opacity: .38; }

    .vdot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
    .vname { font-size: 13px; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* discount badge — uses vendor colour indirectly, stays grey now */
    .dbadge { font-size: 11px; font-weight: 700; background: var(--accent-pale); color: var(--accent-lite); padding: 2px 6px; border-radius: 5px; white-space: nowrap; }
    .bestbadge { font-size: 11px; font-weight: 700; background: #dcfce7; color: #15803d; padding: 2px 7px; border-radius: 5px; white-space: nowrap; }

    .prices { display: flex; flex-direction: column; align-items: flex-end; }
    .p-cur  { font-size: 15.5px; font-weight: 700; letter-spacing: -.2px; white-space: nowrap; }
    .p-orig { font-size: 12px; color: var(--gray-500); text-decoration: line-through; white-space: nowrap; }
    .p-na   { font-size: 13px; color: var(--gray-500); font-style: italic; }

    /* external-link arrow icon shown on hover for <a> rows */
    .ext-icon {
      width: 11px; height: 11px; flex-shrink: 0; opacity: 0;
      fill: none; stroke: var(--gray-500); stroke-width: 1.8;
      transition: opacity .15s;
    }
    a.vrow:hover .ext-icon { opacity: 1; }
    a.vrow.best .ext-icon  { stroke: #15803d; }
    a.vrow.best:hover .ext-icon { opacity: 1; }

    .cf {
      padding: 11px 16px;
      border-top: 1px solid var(--gray-200);
      background: var(--gray-100);
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 38px;
    }
    .cf-lbl  { font-size: 12px; color: var(--gray-500); }
    .cf-val  { font-size: 13px; font-weight: 700; }
    .cf-val.diff { color: var(--accent-lite); }
    .cf-val.eq   { color: var(--gray-500); }
    .cf-disc { margin-left: auto; font-size: 11.5px; font-weight: 700; background: var(--accent-muted); color: var(--accent); padding: 3px 8px; border-radius: 6px; }

    /* List view */
    #grid.list .card { display: grid; grid-template-columns: 220px 1fr 180px; }
    #grid.list .ch { flex-direction: column; border-bottom: none; border-right: 1px solid var(--gray-200); justify-content: center; align-items: flex-start; }
    #grid.list .ch-right { flex-direction: column; align-items: flex-start; margin-top: 6px; }
    #grid.list .cb { padding: 12px 14px; }
    #grid.list .cf { border-top: none; border-left: 1px solid var(--gray-200); flex-direction: column; justify-content: center; align-items: flex-start; }

    /* ─────────────────── EMPTY ─────────────────── */
    #empty { display: none; text-align: center; padding: 80px 24px; color: var(--gray-500); }
    #empty svg { width: 60px; height: 60px; margin: 0 auto 16px; display: block; opacity: .2; }
    #empty h3 { font-size: 18px; font-weight: 600; color: var(--gray-700); margin-bottom: 6px; }

    /* ─────────────────── LOADING ─────────────────── */
    #loading {
      position: fixed; inset: 0; background: rgba(17,17,17,.8);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      z-index: 999; gap: 16px;
    }
    .spin { width: 44px; height: 44px; border: 3px solid rgba(255,255,255,.12); border-top-color: rgba(255,255,255,.7); border-radius: 50%; animation: rot .75s linear infinite; }
    @keyframes rot { to { transform: rotate(360deg); } }
    #loading p { font-size: 14px; color: rgba(255,255,255,.55); font-weight: 500; }

    /* ─────────────────── BRAND NAV ─────────────────── */
    #brand-nav {
      background: var(--white);
      border-bottom: 1px solid var(--gray-200);
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 0 20px;
      overflow-x: auto;
      scrollbar-width: none;
      position: sticky;
      top: 52px; /* JS syncs this to cat-bar height dynamically */
      z-index: 205;
    }
    #brand-nav::-webkit-scrollbar { display: none; }
    .bnav-item {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 600;
      color: var(--gray-700);
      text-decoration: none;
      border-bottom: 2.5px solid transparent;
      white-space: nowrap;
      transition: color .15s, border-color .15s;
      cursor: pointer;
    }
    .bnav-item:hover { color: var(--gray-900); }
    .bnav-item.active {
      color: var(--gray-900);
      border-bottom-color: var(--accent);
    }
    .bnav-soon {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--gray-400);
      background: var(--gray-100);
      padding: 1px 5px;
      border-radius: 10px;
      pointer-events: none;
    }
    .bnav-item.disabled { opacity: .55; cursor: default; pointer-events: none; }

    /* ─────────────────── TOPBAR CTA STRIP ─────────────────── */
    #top-vendor-cta {
      background: #f9fafb;
      border-bottom: 1px solid var(--gray-200);
      padding: 8px 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-size: 14px;
      font-weight: 500;
      color: var(--gray-600);
    }
    .cta-ovdje-btn {
      background: none; border: none; padding: 0;
      color: #111827; font-weight: 800; font-size: 14px;
      cursor: pointer; border-bottom: 2px solid #111827;
      transition: color .15s, border-color .15s;
    }
    .cta-ovdje-btn:hover { color: var(--accent); border-color: var(--accent); }

    /* ─────────────────── CONTACT BADGE (120s) ─────────────────── */
    .contact-badge {
      position: fixed; bottom: 28px; left: 24px; z-index: 8000;
      background: var(--white); border-radius: 14px;
      padding: 16px 20px 14px; min-width: 220px; max-width: 260px;
      box-shadow: 0 8px 32px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08);
      border: 1.5px solid var(--gray-200);
      display: flex; flex-direction: column; gap: 10px;
      transform: translateY(16px); opacity: 0;
      transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s;
      pointer-events: none;
    }
    .contact-badge.visible {
      transform: translateY(0); opacity: 1; pointer-events: auto;
    }
    .cb-close {
      position: absolute; top: 8px; right: 10px;
      background: none; border: none; font-size: 18px; line-height: 1;
      cursor: pointer; color: var(--gray-400); transition: color .15s;
    }
    .cb-close:hover { color: var(--gray-900); }
    .cb-text { font-size: 14px; font-weight: 600; color: var(--gray-800); margin: 0; }
    .cb-btn {
      background: var(--accent); color: white;
      border: none; border-radius: 8px; padding: 8px 14px;
      font-size: 13.5px; font-weight: 700; cursor: pointer;
      transition: background .15s;
    }
    .cb-btn:hover { background: #16a34a; }

    /* ─────────────────── CONTACT MODAL ─────────────────── */
    #contact-overlay {
      display: none; position: fixed; inset: 0; z-index: 9000;
      background: rgba(0,0,0,.55); backdrop-filter: blur(3px);
      align-items: center; justify-content: center;
    }
    #contact-overlay.open { display: flex; }
    #contact-modal {
      background: var(--white); border-radius: 16px;
      padding: 32px 36px 28px; width: 100%; max-width: 480px;
      position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.18);
      max-height: 90vh; overflow-y: auto;
    }
    .contact-close {
      position: absolute; top: 14px; right: 16px;
      background: none; border: none; font-size: 22px; line-height: 1;
      cursor: pointer; color: var(--gray-400); transition: color .15s;
    }
    .contact-close:hover { color: var(--gray-900); }
    #contact-modal h3 { font-size: 20px; font-weight: 700; margin: 0 0 6px; color: var(--gray-900); }
    .contact-sub { font-size: 13.5px; color: var(--gray-500); margin: 0 0 22px; }
    .cf-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
    .cf-row label { font-size: 13px; font-weight: 600; color: var(--gray-700); }
    .cf-opt { font-weight: 400; color: var(--gray-400); }
    .cf-row input, .cf-row textarea {
      border: 1.5px solid var(--gray-200); border-radius: 9px;
      padding: 9px 13px; font-size: 14px; font-family: inherit;
      color: var(--gray-900); background: var(--gray-50);
      transition: border-color .15s; resize: vertical;
    }
    .cf-row input:focus, .cf-row textarea:focus {
      outline: none; border-color: var(--accent); background: var(--white);
    }
    .cf-wordcount { font-size: 11.5px; color: var(--gray-400); text-align: right; margin-top: 4px; }
    .cf-wordcount.over { color: #ef4444; font-weight: 600; }
    .cf-submit {
      width: 100%; background: var(--accent); color: white;
      border: none; border-radius: 10px; padding: 12px;
      font-size: 15px; font-weight: 700; cursor: pointer;
      transition: background .15s, transform .1s; margin-top: 4px;
    }
    .cf-submit:hover { background: #16a34a; transform: translateY(-1px); }
    .cf-submit:active { transform: none; }

    /* ─────────────────── SCROLL ARROWS ─────────────────── */
    #scroll-arrows {
      position: fixed;
      bottom: 24px;
      right: 18px;
      z-index: 300;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .scroll-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--white);
      border: 1px solid var(--gray-200);
      box-shadow: 0 2px 8px rgba(0,0,0,.1);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--gray-500);
      font-size: 16px;
      line-height: 1;
      transition: background .15s, color .15s, box-shadow .15s, opacity .2s;
      opacity: 0;
      pointer-events: none;
    }
    .scroll-btn.visible { opacity: 1; pointer-events: auto; }
    .scroll-btn:hover { background: var(--gray-900); color: var(--white); box-shadow: 0 4px 12px rgba(0,0,0,.18); }
    @media (max-width: 1560px) {
      /* on narrow screens, move arrows left of ad banners (which are hidden anyway) */
      #scroll-arrows { right: 18px; bottom: 24px; }
    }

    /* ─────────────────── VENDOR CTA ─────────────────── */
    #vendor-cta {
      margin: 0 auto;
      max-width: 640px;
      text-align: center;
      padding: 28px 24px;
      border-top: 1px solid var(--gray-200);
    }
    .vcta-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--gray-700);
      margin-bottom: 6px;
    }
    .vcta-sub {
      font-size: 13px;
      color: var(--gray-500);
      margin-bottom: 12px;
      line-height: 1.5;
    }
    .vcta-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 18px;
      background: #111827;
      color: #ffffff;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      text-decoration: none;
      transition: background .15s;
    }
    .vcta-link:hover { background: #374151; }

    /* ─────────────────── FOOTER ─────────────────── */
    footer {
      text-align: center; padding: 36px 24px;
      font-size: 13px; color: var(--gray-500);
      border-top: 1px solid var(--gray-200); margin-top: 40px;
      line-height: 1.8;
    }
    footer a { color: var(--accent-lite); text-decoration: none; font-weight: 500; }
    footer a:hover { text-decoration: underline; }
    #donate-bar {
      display: inline-flex; align-items: center; gap: 6px;
      margin-top: 10px; padding: 6px 14px; border-radius: 20px;
      background: rgba(224,82,82,.08); border: 1px solid rgba(224,82,82,.2);
      font-size: 12px; color: var(--gray-400); text-decoration: none;
      transition: background .15s, border-color .15s, color .15s;
    }
    #donate-bar:hover { background: rgba(224,82,82,.15); border-color: rgba(224,82,82,.35); color: var(--gray-200); text-decoration: none; }
    #donate-bar .donate-heart { color: #e05252; font-size: 14px; }
    #donate-bar .donate-word  { color: #f87171; font-weight: 700; font-size: 12px; }
    #donate-bar .donate-sep   { color: var(--gray-600); }

    /* ─────────────────── STICKY AD BANNER ─────────────────── */
    #sticky-ad {
      position: fixed;
      right: 0;
      top: 50%;
      transform: translateY(-50%) translateX(100%);
      z-index: 50;
      width: 148px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 18px 14px;
      background: var(--white);
      border: 1.5px dashed var(--gray-300);
      border-right: none;
      border-radius: 10px 0 0 10px;
      box-shadow: -3px 0 18px rgba(0,0,0,.06);
      text-align: center;
      text-decoration: none;
      color: inherit;
      transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .2s;
      cursor: pointer;
    }
    #sticky-ad.visible {
      transform: translateY(-50%) translateX(0);
    }
    #sticky-ad:hover {
      box-shadow: -4px 0 24px rgba(0,0,0,.1);
    }
    #sticky-ad:hover .sad-cta {
      color: var(--accent);
    }
    .sad-icon {
      font-size: 26px;
      line-height: 1;
      opacity: .45;
    }
    .sad-tag {
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--gray-400);
      background: var(--gray-100);
      padding: 2px 7px;
      border-radius: 20px;
    }
    .sad-headline {
      font-size: 12px;
      font-weight: 700;
      color: var(--gray-700);
      line-height: 1.35;
    }
    .sad-sub {
      font-size: 10.5px;
      color: var(--gray-500);
      line-height: 1.4;
    }
    .sad-divider {
      width: 32px;
      height: 1px;
      background: var(--gray-200);
    }
    .sad-cta {
      font-size: 10px;
      font-weight: 600;
      color: var(--gray-500);
      letter-spacing: .03em;
      transition: color .15s;
      word-break: break-all;
    }
    /* Left-side mirror */
    #sticky-ad-left {
      position: fixed;
      left: 0;
      top: 50%;
      transform: translateY(-50%) translateX(-100%);
      z-index: 50;
      width: 148px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 18px 14px;
      background: var(--white);
      border: 1.5px dashed var(--gray-300);
      border-left: none;
      border-radius: 0 10px 10px 0;
      box-shadow: 3px 0 18px rgba(0,0,0,.06);
      text-align: center;
      text-decoration: none;
      color: inherit;
      transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .2s;
      cursor: pointer;
    }
    #sticky-ad-left.visible {
      transform: translateY(-50%) translateX(0);
    }
    #sticky-ad-left:hover {
      box-shadow: 4px 0 24px rgba(0,0,0,.1);
    }
    #sticky-ad-left:hover .sad-cta {
      color: var(--accent);
    }

    /* Only show on screens wide enough to have room beside content */
    @media (max-width: 1560px) { #sticky-ad, #sticky-ad-left { display: none; } }

    /* ─────────────────── RESPONSIVE ─────────────────── */

    /* ── Tablet ≤900px ── */
    @media (max-width: 900px) {
      #hero { padding: 40px 20px 36px; }
      #stats, #main { padding-left: 16px; padding-right: 16px; }
      #cat-bar { padding-left: 16px; padding-right: 16px; }
      #deals-wrap { padding-left: 16px; padding-right: 16px; }
      .ctrl-row { padding-left: 16px; padding-right: 16px; }
      #grid { grid-template-columns: 1fr; }
      #grid.list .card { grid-template-columns: 1fr; }
      #grid.list .ch { border-right: none; border-bottom: 1px solid var(--gray-200); flex-direction: row; }
      #grid.list .ch-right { flex-direction: row; margin-top: 0; }
      #grid.list .cf { border-left: none; border-top: 1px solid var(--gray-200); }
      .tb-logo-sub { display: none; }
      .tb-logo-sep { display: none; }
      #tb-updated { display: none; }
      #search { width: 150px; }
    }

    /* ── Large phones / small tablets ≤640px ── */
    @media (max-width: 640px) {
      /* Hero */
      #hero { padding: 28px 16px 24px; }
      #hero h1 { font-size: 28px; letter-spacing: -.5px; margin-bottom: 10px; }
      #hero p { font-size: 14px; margin-bottom: 18px; }

      /* Hero cats: wrap to 2 rows */
      #hero-cats-wrap { margin-bottom: 20px; }
      #hero-cats-wrap .cats { justify-content: center; flex-wrap: wrap; gap: 6px; }
      #hero-cats-wrap .cat { font-size: 12.5px; padding: 5px 12px; white-space: nowrap; }

      /* Cat-bar sticky on mobile */
      #cat-bar { top: 0; padding: 6px 12px; }
      #cat-bar .cats { flex-wrap: wrap; justify-content: center; }
      #cat-bar .cat { flex-shrink: 0; }

      /* Stats: 3×2 grid */
      #stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow: hidden;
        padding: 0;
      }
      .stat-sep { display: none; }
      .stat {
        padding: 10px 6px;
        border-right: 1px solid var(--gray-200);
        border-bottom: 1px solid var(--gray-200);
        min-width: 0; overflow: hidden;
      }
      #stats > .stat:nth-child(5),
      #stats > .stat:nth-child(11) { border-right: none; }
      #stats > .stat:nth-child(7),
      #stats > .stat:nth-child(9),
      #stats > .stat:nth-child(11) { border-bottom: none; }
      .stat-n { font-size: 16px; }
      .stat-l { font-size: 8px; letter-spacing: .02em; }

      /* Deals: horizontal scroll instead of stacking */
      #deals-wrap { padding: 10px 12px; }
      #deals-scroller { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; gap: 6px; }
      #deals-scroller::-webkit-scrollbar { height: 2px; }
      #deals-scroller::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 2px; }
      .deal-chip { flex-shrink: 0; padding: 6px 10px; }
      .deal-chip-disc { font-size: 10px; padding: 2px 5px; }
      .deal-chip-name { font-size: 12px; }
      .deal-chip-price { font-size: 12px; }

      /* Controls compact on mobile */
      .ctrl-row-1 { flex-wrap: wrap; gap: 6px; padding-top: 8px; padding-bottom: 6px; }
      .ctrl-sep { display: none; }
      #search { flex: 1 1 auto; min-width: 0; width: auto; }
      #sort { flex: 1 1 auto; min-width: 0; max-width: none; font-size: 12.5px; }
      .view-toggle { display: none; }

      /* Cat-bar: horizontal scroll */
      #cat-bar { padding: 6px 12px; }
      #cat-bar .cats { gap: 5px; flex-wrap: nowrap; }
      #cat-bar .cat { font-size: 12px; padding: 5px 10px; white-space: nowrap; flex-shrink: 0; }

      /* Cards */
      #main { padding: 14px 10px; }
      .ch { padding: 12px 12px 10px; }
      .ch-name { font-size: 15px; }
      .ch-tag { font-size: 10px; padding: 2px 6px; }
      .ch-right { gap: 5px; }
      .cb { padding: 4px 10px; }
      .vrow { padding: 8px 10px; }
      .vname { font-size: 12px; }
      .p-cur { font-size: 13px; }
      .p-orig { font-size: 11px; }
      .dbadge { font-size: 10px; padding: 1px 5px; }

      /* Top bar compact */
      #topbar { padding: 0 10px; gap: 4px; height: 44px; }
      #lang-flags button { padding: 3px 5px; font-size: 10px; }
      #tb-refresh span[data-i18n="refresh"] { display: none; }
      #tb-refresh { padding: 5px 8px; }
      #top-vendor-cta { font-size: 12px; padding: 5px 10px; gap: 6px; }

      /* Brand bar compact */
      #brand-bar { overflow-x: auto; flex-wrap: nowrap; gap: 0; padding: 0 8px; }
      #brand-bar::-webkit-scrollbar { display: none; }
      #brand-bar a { font-size: 12px; padding: 7px 10px; gap: 4px; flex-shrink: 0; white-space: nowrap; }
      #brand-bar img { width: 14px; height: 14px; }
      .brand-soon { font-size: 8px; }

      /* Contact badge full-width */
      .contact-badge { bottom: 12px; left: 10px; right: 10px; max-width: none; min-width: 0; }

      /* Vendor dropdown */
      .vf-panel { left: 0; min-width: 0; max-width: calc(100vw - 32px); }

      /* Sale banner */
      #sale-filter-banner { font-size: 13px; padding: 8px 12px; }

      /* Vendor CTA bottom */
      #vendor-cta { padding: 20px 16px; }
      .vcta-title { font-size: 15px; }
      .vcta-sub { font-size: 13px; }

      /* Footer */
      footer { padding: 14px 12px; }
      footer small { font-size: 11px; }
    }

    /* ── Small phones ≤400px ── */
    @media (max-width: 400px) {
      #hero h1 { font-size: 24px; }
      #hero p { font-size: 13px; }
      #hero-cats-wrap .cat { font-size: 11.5px; padding: 4px 10px; }
      .stat-n { font-size: 16px; }
      .stat-l { font-size: 8.5px; }
      .ch-name { font-size: 14px; }
      .vrow { padding: 7px 8px; }
      .vname { font-size: 11.5px; }
      .p-cur { font-size: 12.5px; }
      #brand-bar a { font-size: 11px; padding: 6px 8px; }
      #top-vendor-cta { font-size: 11px; }
      .deal-chip-name { font-size: 11px; }
      .deal-chip-price { font-size: 11px; }
    }

    /* ─────────────────── LARGE SCREENS ─────────────────── */

    /* ── Full HD+ ≥1920px ── */
    @media (min-width: 1920px) {
      #main { max-width: 1800px; }
      #hero { padding: 80px 40px 70px; }
      #hero h1 { font-size: clamp(52px, 3.5vw, 80px); }
      #hero-donate-wrap { right: 3%; }
      #grid { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }
      .stat-n { font-size: 28px; }
      .stat-l { font-size: 12px; }
      #stats { padding: 22px 40px; }
      #cat-bar { padding: 10px 40px; }
      #deals-wrap { padding: 12px 40px 14px; }
      .ctrl-row { padding-left: 40px; padding-right: 40px; }
    }

    /* ── 4K / 50" TV ≥2560px ── */
    @media (min-width: 2560px) {
      #main { max-width: 2300px; }
      #hero { padding: 100px 60px 90px; }
      #hero h1 { font-size: clamp(64px, 3vw, 100px); }
      #hero p  { font-size: 18px; max-width: 720px; }
      #hero-donate-wrap { right: 5%; width: 240px; height: 240px; }
      #hero-donate { width: 240px; height: 240px; }
      .hd-word { font-size: 26px; }
      .hd-label { font-size: 13px; }
      #grid { grid-template-columns: repeat(auto-fill, minmax(480px, 1fr)); gap: 24px; }
      .stat-n { font-size: 36px; }
      .stat-l { font-size: 13px; }
      #stats { padding: 28px 60px; }
      #cat-bar { padding: 12px 60px; }
      #deals-wrap { padding: 14px 60px 16px; }
      .ctrl-row { padding-left: 60px; padding-right: 60px; }
      .ch-name { font-size: 17px; }
      .p-cur { font-size: 18px; }
      .vrow { padding: 13px 16px; }
    }

    /* Samsung brand */
    body.brand-samsung .vendor-pills { display: none; }