/* Layout: storefront rows. One horizontal shelf per store, cards scroll sideways, header and summary stay quiet. Single dark look on purpose. */
:root {
  color-scheme: dark;
  --bg: #0c1320;
  --shelf: #111b2b;
  --card: #162236;
  --card-hover: #1c2a40;
  --line: #243349;
  --ink: #eef0f3;
  --muted: #94a3b8;
  --faint: #64748b;
  --deal: #3d7a1f;          /* discount green: price badges and active controls */
  --deal-ink: #d9f99d;
  --got: #22c55e;           /* claimed */
  --got-veil: rgba(34, 197, 94, .26);
  --got-edge: rgba(34, 197, 94, .85);
  --urgent: #f05252;
  --soon: #e2e8f0;
  --font-display: "Inter Tight", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --radius: 10px;
}
* { box-sizing: border-box; }
/* deep navy page with a soft blue glow at the top: calm and trustworthy, so the amber prices stand out */
body { background: radial-gradient(1400px 620px at 50% -180px, rgba(56, 108, 196, .38), transparent 72%), linear-gradient(180deg, #14213a 0, var(--bg) 720px) var(--bg); background-repeat: no-repeat; color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.45; overflow-x: clip; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg); }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--deal); outline-offset: 3px; }

.page {
  max-width: 1320px; margin: 0 auto;
  padding-block: 0 64px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 22px;
}
/* the bar's background runs edge to edge of the window while its contents stay aligned with the page.
   It reaches 36px below the bar and fades out there like frosted glass: no line, no visible end. */
.topbar::before { content: ""; position: absolute; top: 0; bottom: -36px; left: calc(50% - 50vw); right: calc(50% - 50vw); z-index: -1; pointer-events: none;
  background: rgba(16, 26, 44, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(#000 calc(100% - 56px), rgba(0, 0, 0, .55) calc(100% - 30px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 56px), rgba(0, 0, 0, .55) calc(100% - 30px), transparent); }
.brand { font-family: var(--font-display); font-stretch: 118%; font-weight: 800; font-size: 20px; letter-spacing: -.01em; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.brand .tld { color: var(--muted); }
.brand { position: relative; }
.tag-bl { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.brand-tag { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 60; }
.tag-tip { position: fixed; z-index: 61; white-space: nowrap; pointer-events: none; font-family: var(--font-body); font-stretch: 100%; font-size: 12px; font-weight: 600; letter-spacing: 0;
  color: var(--ink); background: #0b1220; border: 1px solid var(--line); padding: 5px 9px; border-radius: 6px; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .6); }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; color: var(--muted); font-size: 14px; user-select: none; }
.switch input { appearance: none; width: 38px; height: 22px; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; margin: 0; transition: background .15s; }
.switch input::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); transition: transform .15s; }
.switch input:checked { background: var(--got); }
.switch input:checked::after { transform: translateX(16px); }

/* ---------- intro ---------- */
.intro { padding-block: 8px 8px; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
/* the one column never grows past the page: wide content inside (rows, chips) scrolls in its own box instead of
   stretching the whole intro (2026-11-10: on phones the featured slide sat 280px to the right, off screen) */
.intro > * { min-width: 0; }
#summary { display: none; }
#heading { margin-top: 18px; }
.intro h1 { margin: 0; font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: clamp(28px, 4vw, 40px); line-height: 1.05; letter-spacing: -.02em; }
.summary { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); font-size: 15px; }
.summary b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.summary .mine b { color: var(--got); }

/* ---------- store shelves ---------- */
.shelf { margin-top: 45px; display: grid; gap: 14px; position: relative; isolation: isolate; grid-template-columns: minmax(0, 1fr); }
.shelf > * { min-width: 0; }   /* a shelf never grows wider than the page (same fix as .intro) */
html { overflow-x: clip; }
/* a soft white light behind each whole section, spreading far and fading out slowly */
.shelf::before, .feat-stage::before { content: ""; position: absolute; inset: -70px -90px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03) 55%, transparent 100%); }
/* featured carousel: one large slide, its neighbours dimmed at the sides, over a blurred wash of the current image */
.feat { margin-top: 44px; display: grid; gap: 10px; }
.feat-head h2 { margin: 0; font-family: var(--font-display); font-stretch: 108%; font-weight: 750; font-size: 30px; line-height: 1.1; }
/* search: looks through every collected deal as you type; the panel's footer opens the same query on each store's own search */
.feat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.search { position: relative; flex: 0 1 420px; min-width: 0; }
.search > svg { position: absolute; left: 14px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.search input { width: 100%; box-sizing: border-box; height: 42px; padding: 0 14px 0 40px; border-radius: 999px; border: 1px solid var(--line); background: #131d2e; color: var(--ink); font: inherit; font-size: 14.5px; outline: none; transition: border-color .15s, background .15s; }
.search input::placeholder { color: var(--faint); }
.search input:focus { border-color: #4a6a9c; background: #16223a; }
.search input::-webkit-search-cancel-button { filter: invert(.7); cursor: pointer; }
.sr-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: max(100%, 380px); max-width: calc(100vw - 32px); max-height: min(70vh, 560px); overflow: auto; background: rgba(16, 25, 41, .98); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); padding: 6px; }
.sr-item { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; padding: 7px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.sr-item:hover, .sr-item.on { background: #1d2a3f; }
.sr-item img.th { width: 72px; height: 45px; object-fit: cover; border-radius: 6px; background: var(--shelf); display: block; }
.sr-t { font-weight: 600; font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-m { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 0; }
.sr-m .store-mark { height: 13px; width: auto; opacity: .85; }
.sr-m b { color: var(--deal); font-weight: 700; }
.sr-note { padding: 10px 9px; font-size: 13.5px; color: var(--muted); }
.sr-past-h { border-top: 1px solid var(--line); margin-top: 4px; padding-bottom: 4px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.sr-foot { border-top: 1px solid var(--line); margin-top: 4px; padding: 9px 7px 5px; display: grid; gap: 8px; }
.sr-foot span { font-size: 12.5px; color: var(--muted); }
.sr-stores { display: flex; flex-wrap: wrap; gap: 6px; }
.sr-stores a { font-size: 13px; color: var(--ink); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.sr-stores a:hover { border-color: var(--muted); background: #1d2a3f; }
@media (max-width: 640px) { .search { flex-basis: 100%; } .feat-head h2 { font-size: 26px; } }
/* the stage breaks out of the page width so the neighbouring slides can show at the screen edges */
.feat-stage { position: relative; isolation: isolate; padding-block: 22px; width: 100vw; margin-left: calc(50% - 50vw); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.feat-bg { display: none; }
/* the current slide's own image, heavily blurred behind it, so the asset seems to give off light in its own colours */
.feat-glow { display: none; }
.feat-glow img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .6s ease; }
.feat-bg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 100% at center, rgba(120, 140, 170, .10), transparent 75%); }
.feat-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--bg), transparent 22%, transparent 78%, var(--bg)), radial-gradient(ellipse 75% 100% at center, transparent 40%, var(--bg) 100%); }
.feat-frame { position: relative; width: min(100%, 1288px); margin: 0 auto; display: grid; }
.feat-slide { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); grid-template-rows: minmax(460px, 1fr); text-decoration: none; color: inherit; border-radius: 0; overflow: hidden; box-shadow: 0 28px 60px -24px rgba(0, 0, 0, .8); opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.feat-slide.on { opacity: 1; visibility: visible; transition: opacity .45s ease; }
.feat-media { position: relative; height: 100%; background: #07080a; overflow: hidden; }
.feat-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease, transform 4s ease-out; }
.feat-media img.on { opacity: 1; }
/* hovering the big image plays the asset's gallery like a short preview, each image slowly zooming in */
.feat-media.playing img.on { transform: scale(1.06); }
.feat-count { display: none; position: absolute; right: 10px; bottom: 10px; z-index: 2; padding: 4px 9px; background: rgba(10, 12, 15, .72); color: var(--ink); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; border: 1px solid rgba(255, 255, 255, .16); pointer-events: none; }
@media (hover: none) { .feat-count { display: inline-flex; align-items: center; gap: 6px; } }
.feat-media.playing .feat-count, .feat-media.manual .feat-count { display: inline-flex; align-items: center; gap: 6px; }
.feat-count svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.feat-vbtn { position: absolute; right: 12px; top: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 10px; border-radius: 0; background: rgba(10, 12, 15, .78); color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; border: 1px solid rgba(255, 255, 255, .18); transition: background .15s, border-color .15s; }
.feat-vbtn:hover { background: rgba(10, 12, 15, .95); border-color: rgba(255, 255, 255, .45); }
.feat-vbtn svg { width: 14px; height: 14px; fill: currentColor; }
.feat-info { background: linear-gradient(165deg, #34507a 0%, #263d5f 55%, #1f3352 100%); padding: 20px 18px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.feat-title { font-family: var(--font-display); font-stretch: 104%; font-weight: 700; font-size: 22px; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feat-sub { color: var(--muted); font-size: 13px; margin-top: -4px; }
.feat-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.feat-thumbs img { width: 100%; aspect-ratio: 16 / 10; max-width: 100%; object-fit: cover; border-radius: 0; opacity: .72; transition: opacity .15s, box-shadow .15s; display: block; }
.feat-thumbs img.sel { opacity: 1; box-shadow: 0 0 0 2px var(--ink); }
@media (hover: hover) { .feat-thumbs img:hover { opacity: 1; box-shadow: 0 0 0 2px var(--ink); } }
.feat-contents { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; font-size: 13px; }
.feat-contents li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 9px; background: rgba(255, 255, 255, .06); border-radius: 0; }
.feat-contents li span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feat-contents li span:last-child { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.feat-contents .label { background: none; padding: 0 0 2px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.feat-contents .more-line { background: none; padding: 2px 0 0; color: var(--muted); }
.feat-foot { margin-top: auto; padding-top: 6px; display: grid; gap: 10px; }
.feat-why { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-family: var(--font-display); font-size: 17px; font-weight: 700; line-height: 1.25; color: #fff; letter-spacing: -.005em; text-wrap: balance; }
.why-ic { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: var(--deal); }
.why-ic svg { width: 15px; height: 15px; fill: var(--deal-ink); }

.feat-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
/* how long the deal lasts is one of the most important facts, so it reads as a solid tag, not a footnote */
.feat-time { display: inline-flex; gap: 7px; align-items: center; min-height: 34px; padding: 0 12px; background: rgba(255, 255, 255, .1); color: var(--ink); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.feat-time svg { width: 16px; height: 16px; }
.feat-time.soon { background: rgba(255, 255, 255, .16); }
.feat-time.urgent { background: var(--urgent); color: #fff; }
/* 2026-11-11 (user): the time box looks like the flags: their colour, square corners, a stitched seam inside */
.feat-time { --flag: #2f5fb8; --flag-ink: #fff; --stitch: rgba(255, 255, 255, .45); position: relative; background: var(--flag) !important; color: var(--flag-ink) !important; border-radius: 1px; padding: 0 14px; min-height: 38px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .35); }
.feat-time::after { content: ""; position: absolute; inset: 3px; border: 1.3px dashed var(--stitch); pointer-events: none; }
.feat-time.t-day { --flag: #e0393e; }
.feat-time.t-3d { --flag: #ee6a12; }
.feat-time.t-week { --flag: #f2b417; --flag-ink: #2a1d00; --stitch: rgba(70, 45, 0, .4); }
.feat-time.over { --flag: #4a5568; --flag-ink: #cbd5e1; }
.feat-price { margin-left: auto; display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; background: #1d2a3f; border-radius: 0; overflow: hidden; min-height: 40px; }
.feat-price .pill { align-self: stretch; display: flex; align-items: center; border-radius: 0; font-size: 16px; padding: 0 4px; letter-spacing: 0; }
.feat-price .old { padding-left: 9px; font-size: 13px; color: var(--muted); }
.feat-price .now { padding: 0 12px 0 8px; font-size: 19px; font-weight: 700; }
.feat-price .plain { padding-right: 10px; }
.feat-price .plain { color: var(--muted); font-size: 13px; }
.feat-side { position: absolute; top: 44px; bottom: 44px; width: calc(((100% - 1288px) / 2 - 26px) * .75); border: 0; padding: 0; background: none; cursor: pointer; overflow: hidden; border-radius: 0; display: none; }
.feat-side.prev { right: calc(50% + 644px + 26px); }
.feat-side.next { left: calc(50% + 644px + 26px); }
.feat-side img { width: 100%; height: 100%; object-fit: cover; opacity: .45; filter: saturate(.5) brightness(.7); transition: opacity .25s, filter .25s; display: block; }
.feat-side.prev img { object-position: right center; -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 30%, #000 75%); mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 30%, #000 75%); }
.feat-side.next img { object-position: left center; -webkit-mask-image: linear-gradient(to left, transparent 0%, rgba(0,0,0,.35) 30%, #000 75%); mask-image: linear-gradient(to left, transparent 0%, rgba(0,0,0,.35) 30%, #000 75%); }
.feat-side:hover img { opacity: .75; filter: saturate(.8) brightness(.9); }
.feat-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 56px; height: 88px; border: 0; border-radius: 6px; background: none; color: var(--ink); cursor: pointer; display: grid; place-items: center; opacity: .75; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); transition: opacity .15s, background .15s; }
.feat-arrow:hover { opacity: 1; }
.feat-arrow svg { width: 40px; height: 40px; }
.feat-arrow.prev { left: max(6px, calc((100% - 1288px) / 2 - 64px)); }
.feat-arrow.next { right: max(6px, calc((100% - 1288px) / 2 - 64px)); }
.feat-dots { display: flex; justify-content: center; gap: 6px; }
.feat-dots button { width: 16px; height: 8px; border-radius: 3px; border: 0; padding: 0; background: var(--line); cursor: pointer; transition: background .2s, width .2s; }
.feat-dots button:hover { background: var(--faint); }
.feat-dots button[aria-current="true"] { background: var(--ink); width: 28px; }
/* the current slide's dot is a bar that fills in 7 s; when it is full the carousel moves on (same as the free strip).
   Hovering or focusing the slide pauses it; reduced motion shows a full bar and never moves on its own */
.feat-dots button { position: relative; overflow: hidden; }
/* 2026-11-10 (user): no filling bar any more, the current dot is plain white; the invisible bar still keeps the
   7-second timer (its animationend turns the slide), so pausing on hover keeps working */
.feat-dots.run button[aria-current="true"] { background: var(--ink); width: 28px; }
.feat-dots.run button[aria-current="true"]::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; background: transparent; animation: dot-fill 7s linear forwards; }
.feat.paused .feat-dots button[aria-current="true"]::after { animation-play-state: paused; }
@media (min-width: 1500px) { .feat-side { display: block; } }
@media (max-width: 820px) {
  .feat-stage { padding-block: 0; }
  .feat-bg { display: none; }
  .feat-slide { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .feat-media { height: auto; aspect-ratio: 16 / 9; max-width: 100%; }
  .feat-thumbs { grid-template-columns: repeat(4, 1fr); }
  .feat-arrow { display: none; }
  .feat-title { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .feat-slide, .feat-slide.on { transition: none; } }

/* the free strip: the site's shop window, set apart as one band above the filters */
.featured { margin-top: 22px; }
.featured .shelf-title h2 { font-size: 26px; }
@media (max-width: 560px) { .featured .shelf-title h2 { font-size: 22px; } }
/* "39 / assets free right now" (2026-11-10, user: the number on top, in the middle): a big glowing number over a
   quiet caption. No green box any more: the box looked like the green price buttons right under it. */
.featured .shelf-title h2.free-head { display: grid; justify-items: center; gap: 2px; margin: 0; line-height: 1; }
.fh-text { display: grid; justify-items: center; gap: 6px; min-width: 0; }
.fh-num { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(64px, 8vw, 104px); line-height: .95; letter-spacing: -.035em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #f4ffe0 0%, #c8f57a 45%, #7fcf3a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(140, 220, 80, .45)) drop-shadow(0 6px 30px rgba(61, 122, 31, .5)); animation: fh-glow 3.2s ease-in-out infinite; }
@keyframes fh-glow { 50% { filter: drop-shadow(0 0 26px rgba(160, 235, 95, .65)) drop-shadow(0 6px 40px rgba(61, 122, 31, .65)); } }
@media (prefers-reduced-motion: reduce) { .fh-num { animation: none; } }
.fh-cap { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 1.6vw, 20px); letter-spacing: .16em; text-transform: uppercase; color: #cfdcec; text-wrap: balance; }
.fh-cap::before, .fh-cap::after { content: ""; display: inline-block; vertical-align: middle; width: 28px; height: 1px; margin: 0 12px; background: linear-gradient(90deg, transparent, rgba(200, 245, 122, .7)); }
.fh-cap::after { background: linear-gradient(90deg, rgba(200, 245, 122, .7), transparent); }
@media (max-width: 560px) { .fh-cap { letter-spacing: .1em; } .fh-cap::before, .fh-cap::after { width: 16px; margin: 0 8px; } }
/* the headline sits in the middle of the page (2026-11-10, user); the strip's empty tools box would push it off-centre */
#free .shelf-head { justify-content: center; }
#free .shelf-tools { display: none; }
#free .shelf-title { justify-items: center; text-align: center; }
#free .shelf-title h2.free-head { justify-content: center; }
.shelf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.shelf-title { display: grid; gap: 7px; min-width: 0; }
.shelf-title h2 { margin: 0; font-family: var(--font-display); font-stretch: 108%; font-weight: 750; font-size: 24px; line-height: 1.1; display: flex; align-items: center; gap: 10px; transition: color .2s; }
.shelf-title p { margin: 0; color: var(--muted); font-size: 14px; }
.shelf.all-got h2 { color: var(--got); }
.all-chip { display: none; font-family: var(--font-body); font-stretch: 100%; font-size: 12px; font-weight: 600; color: var(--got); border: 1px solid var(--got-edge); border-radius: 999px; padding: 2px 9px; align-items: center; gap: 5px; }
.all-chip svg { width: 12px; height: 12px; }
.shelf.all-got .all-chip { display: inline-flex; }
.shelf-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* "0 / 10 alındı" counters are hidden on the user's request (2026-11-09); the shelf still turns green when everything is claimed */
.progress { display: none; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.progress b { color: var(--ink); font-weight: 600; }
.shelf.all-got .progress b { color: var(--got); }
.more { font-size: 13px; color: var(--muted); text-decoration: none; border: 1px solid var(--line); padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.more:hover { color: var(--ink); border-color: var(--muted); }
/* the store logo in a shelf header is the link to that store's deals; hovering lifts it and slides in a small "go to deals ↗" hint */
.shelf-link { position: relative; display: inline-flex; align-items: center; text-decoration: none; color: inherit; border-radius: 8px; }
.shelf-link .store-mark { transition: opacity .15s, transform .15s; opacity: .92; }
.shelf-link:hover .store-mark, .shelf-link:focus-visible .store-mark { opacity: 1; transform: translateY(-1px); }
.shelf-link .go { font-family: var(--font-body); font-stretch: 100%; font-size: 13px; font-weight: 600; color: var(--ink); background: #1d2a3f; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 6; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; pointer-events: none; }
.shelf-link:hover .go, .shelf-link:focus-visible .go { opacity: 1; transform: none; }

.arrows { display: none; gap: 6px; }
.arrow { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); cursor: pointer; display: grid; place-items: center; }
.arrow:hover:not(:disabled) { border-color: var(--muted); }
.arrow:disabled { opacity: .35; cursor: default; }
.arrow svg { width: 14px; height: 14px; }
@media (min-width: 820px) and (hover: hover) { .arrows { display: inline-flex; } }

.row-wrap { position: relative; container-type: inline-size; --per: 4; --gap: 22px; }
/* a row shows exactly --per cards and pages with the side arrows; it never scrolls freely */
.row {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); gap: var(--gap);
  overflow: hidden; scroll-snap-type: x mandatory; padding-bottom: 4px;
}
.row-arrow {
  position: absolute; z-index: 5; top: calc((100cqw - (var(--per) - 1) * var(--gap)) / var(--per) * .3125); transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); background: rgba(16, 18, 22, .9); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 20px rgba(0, 0, 0, .5); transition: background .15s, border-color .15s;
}
.row-arrow:hover { background: rgba(32, 36, 43, .96); border-color: rgba(255, 255, 255, .35); }
/* the hidden attribute always wins: several boxes here set display:grid/flex, which would otherwise keep "hidden" ones on screen */
[hidden] { display: none !important; }
/* every deal of a store: "show all" turns the shelf's row into a grid that grows 48 cards at a time */
.shelf-all { font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; cursor: pointer; white-space: nowrap; }
.shelf-all:hover { border-color: var(--muted); }
.shelf.expanded .row { grid-auto-flow: row; grid-template-columns: repeat(var(--per), minmax(0, 1fr)); overflow: visible; row-gap: 30px; scroll-snap-type: none; }
.shelf.expanded .row-arrow { display: none; }
.shelf-more { display: block; margin: 20px auto 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); background: #1d2a3f; border: 1px solid var(--line); border-radius: 999px; padding: 9px 20px; cursor: pointer; }
.shelf-more:hover { border-color: var(--muted); }
.row-arrow svg { width: 18px; height: 18px; }
.row-arrow.prev { left: max(-20px, calc((100cqw - 100vw) / 2 + 4px)); }
.row-arrow.next { right: max(-20px, calc((100cqw - 100vw) / 2 + 4px)); }
@media (max-width: 1000px) { .row-wrap { --per: 3; } }
@media (max-width: 640px) { .row-wrap { --per: 2; --gap: 14px; } .row-arrow { width: 38px; height: 38px; } .row-arrow.prev { left: 4px; } .row-arrow.next { right: 4px; } }
/* free strip: three big panels per page, plain arrows outside the panels and page dots below */
/* a Steam-like panel behind the free cards, in the same steel blue as the featured info panel */
.featured .row-wrap { --per: 3; padding: 18px 22px 16px; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(150, 180, 230, .14); background: linear-gradient(180deg, rgba(96, 128, 176, .34) 0%, rgba(62, 92, 136, .36) 45%, rgba(38, 58, 92, .42) 100%); }
.featured .thumb, .featured .thumb-ui, .featured .veil { aspect-ratio: 4 / 3; }
.featured .title { font-size: 19px; }

.featured .row-arrow { top: calc(20px + (100cqw - (var(--per) - 1) * var(--gap)) / var(--per) * .375); width: 48px; height: 84px; border-radius: 8px; border: 0; background: none; box-shadow: none; opacity: .8; }
.featured .row-arrow:hover { background: rgba(255, 255, 255, .06); opacity: 1; }
.featured .row-arrow svg { width: 34px; height: 34px; }
.featured .row-arrow.prev { left: max(-68px, calc((100cqw - 100vw) / 2 + 4px)); }
.featured .row-arrow.next { right: max(-68px, calc((100cqw - 100vw) / 2 + 4px)); }
.row-dots { display: flex; justify-content: center; gap: 6px; margin-top: 6px; }
.row-dots button { width: 16px; height: 8px; border-radius: 3px; border: 0; padding: 0; background: var(--line); cursor: pointer; transition: background .2s, width .2s; }
.row-dots button:hover { background: var(--faint); }
.row-dots button.on { background: var(--ink); width: 28px; }
/* free strip: the current page's dot is a bar that fills up; when it is full the strip moves to the next page (7 s, like the featured carousel).
   Hovering or focusing the strip pauses it; reduced motion shows a full bar and never moves on its own */
#free .row-dots button { position: relative; overflow: hidden; }
#free .row-dots button.on { background: var(--ink); width: 28px; }   /* plain white, no filling bar (2026-11-10); the invisible bar is the timer */
#free .row-dots button.on::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; background: transparent; animation: dot-fill 7s linear forwards; }
#free:hover .row-dots button.on::after, #free:focus-within .row-dots button.on::after { animation-play-state: paused; }
@keyframes dot-fill { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { #free .row-dots button.on::after { animation: none; width: 100%; } }
@media (max-width: 1000px) { .featured .row-wrap { --per: 2; } }
@media (max-width: 640px) { .featured .row-wrap { --per: 1; padding: 12px; } .featured .row-arrow { width: 40px; height: 56px; background: rgba(16, 18, 22, .8); } .featured .row-arrow.prev { left: 4px; } .featured .row-arrow.next { right: 4px; } }
.empty-note { color: var(--muted); font-size: 14px; padding: 18px; border: 1px dashed var(--line); border-radius: var(--radius); }

/* ---------- card ---------- */
/* store-style cards: just a rounded image with the text underneath, no panel behind it */
.card { position: relative; scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0; }

.card-link { display: flex; flex-direction: column; flex: 1; text-decoration: none; border-radius: var(--radius); min-width: 0; }
.thumb { position: relative; aspect-ratio: 16 / 10; max-width: 100%; border-radius: 10px; overflow: hidden; background: var(--shelf); }
.thumb::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0); transition: background .2s; pointer-events: none; }
.card:hover .thumb::after { background: rgba(255, 255, 255, .08); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .2s, transform .3s; }

/* time-left flag hanging from the image's top edge; its colour says how close the end is */
.time {
  --flag: #2f5fb8; --flag-ink: #fff; --stitch: rgba(255, 255, 255, .38);
  position: absolute; left: 14px; top: 0; z-index: 2; width: 46px; height: 68px; pointer-events: auto;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); transform-origin: 50% 0;
}
.time .flag-bg { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 1; }
.f-base { fill: var(--flag); }
.f-stitch { fill: none; stroke-width: .9; stroke-dasharray: 2.2 2; stroke-linecap: round; stroke-linejoin: round; }
.f-stitch { stroke: var(--stitch); }
.time .flag {
  position: relative; display: flex; flex-direction: column; align-items: center; height: 100%; padding-top: 9px; box-sizing: border-box;
  color: var(--flag-ink); font-variant-numeric: tabular-nums;
}
.time .flag svg { width: 11px; height: 11px; margin-bottom: 2px; opacity: .92; }
.time b { font-family: var(--font-display); font-weight: 800; font-size: 18px; line-height: 1; }
.time small { font-size: 10px; font-weight: 700; line-height: 1.25; opacity: .92; }
.time.t-day { --flag: #e0393e; }
.time.t-3d { --flag: #ee6a12; }
.time.t-week { --flag: #f2b417; --flag-ink: #2a1d00; --stitch: rgba(70, 45, 0, .35); }
.time.over { --flag: #4a5568; --flag-ink: #cbd5e1; }
.card:hover .time { animation: flag-sway 1.1s ease-out; }
/* the closer the end, the harder the flag shakes when the card is hovered; each shake dies down and stops */
.card:hover .time.t-week { --amp: 3deg; animation: flag-shake 1.6s ease-out; }
.card:hover .time.t-3d { --amp: 5.5deg; animation: flag-shake 1.35s ease-out; }
.card:hover .time.t-day { --amp: 9deg; animation: flag-shake 1.1s ease-out; }
.card:hover .time.over { animation: none; }
@keyframes flag-shake {
  0%, 100% { transform: rotate(0); } 8% { transform: rotate(var(--amp)); } 18% { transform: rotate(calc(var(--amp) * -.85)); }
  29% { transform: rotate(calc(var(--amp) * .68)); } 40% { transform: rotate(calc(var(--amp) * -.52)); } 52% { transform: rotate(calc(var(--amp) * .37)); }
  64% { transform: rotate(calc(var(--amp) * -.24)); } 76% { transform: rotate(calc(var(--amp) * .13)); } 88% { transform: rotate(calc(var(--amp) * -.05)); } }
@keyframes flag-sway { 0% { transform: rotate(0); } 25% { transform: rotate(5deg); } 55% { transform: rotate(-3deg); } 80% { transform: rotate(1.2deg); } 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .card:hover .time, .card:hover .time.t-week, .card:hover .time.t-3d, .card:hover .time.t-day { animation: none; } }

.body { padding: 0 2px 0; display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.kicker { display: flex; align-items: center; gap: 6px; justify-content: center; min-width: 0; color: var(--muted); font-size: 13px; }
.body .title, .body .facts, .body .tiers { text-align: center; }
.body .tiers .from { justify-content: center; }
.kicker span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kicker .engine { width: auto; height: auto; background: none; border-radius: 0; }
.kicker .engine svg { width: 14px; height: 14px; fill: var(--muted); }
.title { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.seller { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tags { display: flex; gap: 5px; flex-wrap: wrap; }
.engine { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--line); }
.engine svg { width: 17px; height: 17px; fill: var(--ink); display: block; }
.tag { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; line-height: 18px; }
.facts { color: #c9d3e0; font-size: 14.5px; font-weight: 500; line-height: 1.45; letter-spacing: .005em; font-variant-numeric: tabular-nums; }
.facts b { color: var(--ink); font-weight: 600; }
/* on mouse devices the description leaves the card and follows the cursor as a small tooltip */
.tip { position: fixed; z-index: 40; pointer-events: none; max-width: 280px; padding: 8px 11px; border-radius: 6px; background: rgba(16, 25, 41, .97); border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(0, 0, 0, .5); color: #dbe3ee; font-size: 14px; font-weight: 500; line-height: 1.45; }
.tip b { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .card .facts { display: none; } }
#free .card .facts { display: none; }
/* store-style price block: the discount sits flush against a dark box holding the old and new price, aligned right */
.price { order: -1; margin: 8px 0 6px; align-self: flex-end; display: inline-flex; align-items: center; background: #1d2a3f; border-radius: 6px; overflow: hidden; font-variant-numeric: tabular-nums; min-height: 38px; }
.price + .kicker, .price + .title { margin-top: 4px; }
.price .pill { align-self: stretch; display: flex; align-items: center; border-radius: 0; font-size: 18px; padding: 0 5px; letter-spacing: 0; }
.price .old { padding-left: 12px; font-size: 13px; color: var(--muted); }
.price .now { padding: 0 12px 0 8px; font-size: 17.5px; font-weight: 700; }
.price .pill + .now { padding-left: 12px; }
.price.free-block .now { align-self: stretch; display: flex; align-items: center; background: var(--deal); color: var(--deal-ink); padding: 0 12px; }
.price.free-block .old { padding-right: 10px; }
.price .strip-pill { display: none; }
.price .pcol { display: contents; }
/* shelf cards: a quieter price block than the free strip's */
#shelves .price, .about-grid .price { min-height: 30px; border-radius: 5px; }
#shelves .price .pill, .about-grid .price .pill { font-size: 14px; padding: 0 6px; }
#shelves .price .old, .about-grid .price .old { font-size: 12px; padding-left: 9px; }
#shelves .price .now, .about-grid .price .now { font-size: 14.5px; padding: 0 10px 0 7px; }
#shelves .price .pill + .now, .about-grid .price .pill + .now { padding-left: 9px; }
.pill { font-size: 12px; font-weight: 700; background: var(--deal); color: var(--deal-ink); border-radius: 4px; padding: 1px 6px; letter-spacing: .02em; }
.old { color: var(--faint); text-decoration: line-through; font-size: 14px; }
.now { font-weight: 600; font-size: 16px; }
.now.free { color: var(--ink); }
.tiers { margin-top: auto; padding-top: 6px; display: grid; gap: 3px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tiers .from { display: flex; align-items: baseline; gap: 8px; }
.tiers .from b { color: var(--ink); font-size: 16px; font-weight: 600; }

.thumb.collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; }
.thumb.collage img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.feat-info .eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
/* store wordmarks: one base height per place, scaled per logo so they look the same size */
.store-mark { --mh: 16px; display: block; flex: none; width: auto; height: var(--mh); }
.store-mark.sm-fab { height: calc(var(--mh) * 1.7); }
.store-mark.sm-itch { height: calc(var(--mh) * 1.3); }
.store-mark.sm-humble { height: calc(var(--mh) * 1.25); }
.store-mark.sm-synty { height: calc(var(--mh) * 1.3); }
.store-mark.sm-bundlefoundry { height: calc(var(--mh) * 1.25); }
.store-mark.sm-superhive { height: calc(var(--mh) * 1.3); }
.store-mark.sm-kitbash, .store-mark.sm-leartes, .store-mark.sm-ase, .store-mark.sm-boom { height: calc(var(--mh) * 1.05); }
/* an image that fails to load (e.g. a store's own CDN) leaves a quiet colour field instead of a broken icon */
.thumb.noimg { background: linear-gradient(135deg, #1d2a3f, #2b3f63); }
.shelf-title h2 .store-mark { --mh: 22px; }
.feat-info .eyebrow .store-mark { --mh: 19px; }
.kicker .store-mark { --mh: 13px; }
.eb-sep { width: 1px; height: 16px; background: rgba(255,255,255,.28); }
.feat-info .eyebrow { font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #b8c6da; }
.cta { color: var(--muted); font-size: 13px; margin-top: 2px; transition: color .15s; }
.card:hover .cta { color: var(--ink); }
/* campaign label as a gradient band along the bottom of the image */
.band { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 6px 10px; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.3; color: #fff; background: #2b54c9; }
.thumb-ui { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 16 / 10; max-width: 100%; pointer-events: none; z-index: 3; }
.coupon { position: absolute; left: 10px; bottom: 10px; pointer-events: auto; display: flex; align-items: center; gap: 7px; background: rgba(10, 12, 15, .88); border: 1px dashed rgba(255, 255, 255, .35); border-radius: 6px; padding: 3px 3px 3px 9px; }
.coupon span { font-size: 11px; color: var(--muted); }
.coupon code { font-family: var(--font-mono); font-size: 13px; color: var(--ink); letter-spacing: .04em; }
.copy { border: 0; background: var(--line); color: var(--ink); border-radius: 4px; font-size: 12px; padding: 3px 8px; cursor: pointer; white-space: nowrap; }
.shelf-badge { font-family: var(--font-body); font-stretch: 100%; font-size: 13px; font-weight: 700; background: var(--deal); color: var(--deal-ink); border-radius: 5px; padding: 1px 7px; letter-spacing: .01em; }
.copy:hover { background: var(--faint); }
.card.got .coupon { display: none; }
.card-link .body > .pslot.has-code { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 8px; }
/* the price slot is its own size container here, so the code and price can size to the card */
.card-link .body > .pslot.has-code { container-type: inline-size; }
.pslot.has-code { --code-fs: clamp(14px, calc(100cqw * .046), 18px); }   /* code size follows the card width */
.pslot.has-code > .price { flex: none; }
.pslot.has-code .price .old { font-size: clamp(11px, calc(100cqw * .036), 13px); padding-left: clamp(6px, calc(100cqw * .03), 12px); padding-right: 6px; }
/* the price says "Kuponla ücretsiz" on one line (user 2026-11-10); the code is sized so both fit */
.pslot.has-code .price.free-block .now { white-space: nowrap; padding: 0 clamp(9px, calc(100cqw * .03), 12px); }
.code-chip { flex: 0 1 auto; min-width: 0; margin-top: 10px; height: 38px; box-sizing: border-box; display: inline-flex; align-items: baseline; gap: 5px; padding: 0 clamp(6px, calc(100cqw * .032), 12px); line-height: 38px;
  border: 0; border-radius: 6px; background: rgba(255, 255, 255, .06); color: var(--ink); cursor: copy; font: inherit; transition: background .15s, border-color .15s; }
.code-chip:hover { background: rgba(255, 255, 255, .12); }
.code-chip span { flex: none; font-family: var(--font-mono); font-size: var(--code-fs); font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.code-chip code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: var(--code-fs); font-weight: 500; letter-spacing: .03em; }
.code-chip.done { background: rgba(34, 197, 94, .22); }
.card.got .code-chip { opacity: .5; }
.pslot.has-code.no-old .price .old { display: none; }   /* set by fitCodes() when the code would be cut off */
.pslot.has-code.no-label .code-chip span { display: none; }
.pslot.has-code.wrap .price.free-block .now { white-space: normal; width: min-content; line-height: 1.1; text-align: center; }

/* claim button + veil */
.claim {
  position: absolute; right: 10px; top: 10px; z-index: 4;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  background: rgba(10, 12, 15, .72); border: 1.5px solid rgba(255, 255, 255, .55);
  display: grid; place-items: center; transition: background .15s, border-color .15s, transform .15s;
}
.claim svg { width: 16px; height: 16px; stroke: rgba(255, 255, 255, .8); }
.claim:hover { border-color: #fff; transform: scale(1.06); }
.claim:hover svg { stroke: #fff; }
.claim[aria-pressed="true"] { background: var(--got); border-color: var(--got); }
.claim[aria-pressed="true"] svg { stroke: #fff; }
.veil {
  position: absolute; inset: 0 0 auto 0; aspect-ratio: 16 / 10; z-index: 2; pointer-events: none; border-radius: 10px;
  background: var(--got-veil); box-shadow: inset 0 0 0 2px var(--got-edge);
  opacity: 0; transition: opacity .2s;
}
.got-mark { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 8px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.veil-mark { width: 72px; height: 72px; border-radius: 50%; background: rgba(34, 197, 94, .92); display: grid; place-items: center; box-shadow: 0 8px 28px rgba(0, 0, 0, .35); transform: scale(.8); transition: transform .2s; }
.veil-mark svg { width: 38px; height: 38px; stroke: #fff; }
.veil-label { font-size: 12px; font-weight: 600; color: #fff; background: rgba(10, 30, 18, .75); padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.card.got .veil, .card.got .got-mark { opacity: 1; }
.card.got .veil-mark { transform: scale(1); }
.card.got .thumb img { filter: saturate(.5) brightness(.75); }
/* gallery scrub: thin segments along the image's bottom edge, shown while the mouse is over the image */
.gbar { position: absolute; left: 10px; right: 10px; bottom: 8px; z-index: 2; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; pointer-events: none; }
.gbar i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .35); box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.gbar i.on { background: #fff; }
.thumb[data-gal]:hover .gbar { opacity: 1; }
.card.got .gbar { display: none; }

/* text above the image (2026-11-09 trial): the text block comes first and sits right on top of the image;
   all images in a row line up at the bottom, so everything pinned to the image is measured from the card's bottom */
.row-wrap, .about-grid, .freeall-grid { --pad-b: 0px; --cw: calc((100cqw - (var(--per) - 1) * var(--gap)) / var(--per)); --img-h: calc(var(--cw) * .625); }
.featured .row-wrap { --pad-b: 16px; --below: 48px; --img-h: calc(var(--cw) * .75); }
/* free strip: one-line titles so a long title on another page doesn't push every card's text down (full title on hover) */
.featured .title { -webkit-line-clamp: 1; }
@media (max-width: 640px) { .featured .row-wrap { --pad-b: 12px; border-radius: 12px; } }
/* the price stays under the image (as before) in a fixed-height slot (--below), so overlays can still be measured from the bottom;
   the slot fits a price box that wraps to two lines on narrow cards */
.row-wrap, .about-grid { --below: 60px; }
.freeall-grid { --below: 48px; }   /* the strip's taller price box needs less room than a wrapped shelf price */
.card-link .body { display: contents; }
.card-link .body > * { order: -1; }
.card-link .body > .title, .card-link .body > .facts { margin-top: 5px; }
.card-link .body > :first-child { margin-top: auto; }
.card-link .thumb { margin-top: 10px; }
.card-link .body > .pslot { order: 1; margin: 0; height: var(--below); overflow: hidden; display: flex; flex-direction: column; align-items: flex-end; padding: 0 2px; }
.pslot > .price { order: 0; margin: 8px 0 0; }
.pslot > .tiers { align-self: stretch; margin: 0; padding-top: 6px; }
.card .veil, .card .thumb-ui { top: auto; bottom: var(--below); }
.card .claim, .card .wish, .card .share { top: calc(100% - var(--below) - var(--img-h) + 10px); }
.row-wrap .row-arrow, .featured .row-wrap .row-arrow { top: auto; bottom: calc(var(--pad-b) + 4px + var(--below) + var(--img-h) / 2); transform: translateY(50%); }

/* filters */
.filters { display: grid; gap: 12px; margin-top: 20px; }
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; max-width: 100%; overflow-x: auto; justify-self: start; scrollbar-width: none; }
.seg button { border: 0; background: transparent; color: var(--muted); padding: 6px 14px; border-radius: 999px; cursor: pointer; font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); font-weight: 600; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.fbtn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 8px; padding: 8px 14px; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
  color: var(--ink); background: rgba(255, 255, 255, .07); transition: background-color .15s; }
.fbtn:hover { background: rgba(255, 255, 255, .11); }
.fbtn[aria-expanded="true"] { background: rgba(255, 255, 255, .14); }
.fbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.fcount { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ink); color: var(--bg); font-size: 11.5px; font-weight: 700; display: inline-grid; place-items: center; }
.fcount[hidden] { display: none; }
.ftags { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ftag { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255, 255, 255, .14); background: transparent; color: var(--ink); border-radius: 8px; padding: 5px 8px 5px 10px; font: inherit; font-size: 13.5px; cursor: pointer; }
.ftag:hover { border-color: rgba(255, 255, 255, .3); }
.ftag .ci { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ftag i { font-style: normal; opacity: .6; font-size: 15px; line-height: 1; }
/* "one list" (2026-11-10, user): every deal that passes the filters, all stores mixed in one grid, biggest saving first */
.mix-toggle { margin-left: auto; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; cursor: pointer; white-space: nowrap; }
.mix-toggle:hover { border-color: var(--muted); }
.mix-toggle[aria-pressed="true"] { background: rgba(255, 255, 255, .12); }
#shelves.mixing > .shelf:not(#mix) { display: none !important; }
#mix .kicker .store-mark, #mix .kicker svg { opacity: .9; }
.fpanel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; animation: fpanel-in .18s ease-out; }
.fpanel[hidden] { display: none; }
@keyframes fpanel-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.fmax { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fmax label { color: rgba(255, 255, 255, .65); font-size: 14.5px; font-weight: 500; padding-left: 14px; }
.fmax-box { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 6px 0 12px; border-radius: 8px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.fmax-box:focus-within { border-color: rgba(255, 255, 255, .35); }
#max-sym { color: var(--muted); font-size: 14.5px; }
#max-price { width: 110px; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
#max-price::-webkit-outer-spin-button, #max-price::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#max-price::placeholder { color: rgba(255, 255, 255, .35); }
#max-clear { border: 0; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; width: 24px; height: 24px; border-radius: 6px; cursor: pointer; }
#max-clear:hover { color: var(--ink); background: rgba(255, 255, 255, .08); }
#max-clear[hidden] { display: none; }
/* category tabs (2026-11-09, the user disliked pill shapes and liked Fab's top menu): icon + text side by side; the selected
   one sits on a softly rounded, see-through light rectangle (like Fab's "Explore"). When more tabs hide past an edge, that edge fades out and a small arrow appears there. */
.chips-wrap { position: relative; min-width: 0; }
.chips-wrap.more-r .chips { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 80px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 80px), transparent); }
.chips-wrap.more-l .chips { -webkit-mask-image: linear-gradient(90deg, transparent, #000 80px); mask-image: linear-gradient(90deg, transparent, #000 80px); }
.chips-wrap.more-l.more-r .chips { -webkit-mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent); mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent); }
.chips-arrow { position: absolute; top: 0; bottom: 4px; margin: auto 0; z-index: 1; width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(22, 32, 52, .85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink); }
.chips-arrow:hover { background: rgba(44, 58, 84, .95); border-color: rgba(255, 255, 255, .25); }
.chips-arrow svg { width: 15px; height: 15px; }
.chips-arrow.prev { left: 0; }
.chips-arrow.next { right: 0; }
.chips-arrow[hidden] { display: none; }
.chips { gap: 6px; }
/* filter groups: one labelled row each (type, subject, style); the choices wrap instead of scrolling */
#cat-chips { display: grid; gap: 12px; overflow: visible; padding-bottom: 0; -webkit-mask-image: none !important; mask-image: none !important; }
.fgroup { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.fg-label { flex: none; width: 64px; padding: 8px 0 0 14px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.fg-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.fg-clear { justify-self: start; margin-left: 90px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 600; padding: 4px 6px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.fg-clear:hover { color: var(--ink); }
@media (max-width: 640px) {
  .fgroup { flex-direction: column; gap: 6px; }
  .fg-label { width: auto; padding: 0 0 0 4px; }
  .fg-clear { margin-left: 0; }
}
.chip { flex: none; position: relative; border: 0; background: transparent; color: rgba(255, 255, 255, .65); border-radius: 8px; padding: 7px 14px; font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer;
  display: inline-flex; gap: 7px; align-items: center; white-space: nowrap; transition: color .15s, background-color .15s; }
.chip .ci { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.chip[aria-pressed="true"] .ci { opacity: 1; }
.chip:hover:not(:disabled) { color: #fff; background: rgba(255, 255, 255, .06); }
.chip .n { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"], .chip[aria-pressed="true"]:hover:not(:disabled) { color: #fff; background: rgba(255, 255, 255, .13); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.chip:disabled { opacity: .35; cursor: default; }
.no-results { margin-top: 36px; padding: 28px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); display: grid; gap: 12px; justify-items: start; }
.no-results b { color: var(--ink); font-size: 17px; }
.reset { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 14px; cursor: pointer; font-size: 14px; }
.reset:hover { border-color: var(--muted); }

/* share (left of the wishlist button) */
.share {
  position: absolute; right: 94px; top: 10px; z-index: 4;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  background: rgba(10, 12, 15, .72); border: 1.5px solid rgba(255, 255, 255, .55);
  display: grid; place-items: center; transition: background .15s, border-color .15s, transform .15s;
}
.share svg { width: 15px; height: 15px; stroke: rgba(255, 255, 255, .85); fill: none; }
.share:hover { border-color: #fff; transform: scale(1.06); }
.share[data-solo] { right: 52px; }
.wish[data-solo] { right: 10px; }
/* wishlist */
.wish {
  position: absolute; right: 52px; top: 10px; z-index: 4;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  background: rgba(10, 12, 15, .72); border: 1.5px solid rgba(255, 255, 255, .55);
  display: grid; place-items: center; transition: background .15s, border-color .15s, transform .15s;
}
.wish svg { width: 15px; height: 15px; stroke: rgba(255, 255, 255, .85); fill: none; }
.wish:hover { border-color: #fff; transform: scale(1.06); }
.wish[aria-pressed="true"] { background: var(--deal); border-color: var(--deal); }
.wish[aria-pressed="true"] svg { stroke: var(--deal-ink); fill: var(--deal-ink); }
.top-right { display: flex; align-items: center; gap: 18px; }
/* the four stores as small icons right of the wordmark; each jumps to its shelf */
.nav-free { margin-left: 0; padding: 7px 10px; border-radius: 8px; font-size: 14px; font-weight: 600; color: #c7d3e3; text-decoration: none; white-space: nowrap; transition: color .15s, background .15s; }
.nav-free:hover, .nav-free:focus-visible { color: #fff; background: rgba(255, 255, 255, .07); }
.nav-free[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .1); }
.brand-stores { display: flex; align-items: center; gap: 0; margin-left: -10px; padding-left: 4px; border-left: 1px solid var(--line); margin-right: auto; }
.brand-stores a { display: grid; place-items: center; width: 29px; height: 32px; border-radius: 8px; color: #9fb0c8; transition: color .15s, background .15s; }
.brand-stores a:hover, .brand-stores a:focus-visible { color: #fff; background: rgba(255,255,255,.07); }
.brand-stores svg { width: 20px; height: 20px; fill: currentColor; }
.brand-stores .bs-fab svg { width: 23px; height: 23px; }
/* tablets and phones: "Always free", the store icons and the hide switch move to a slim row under the wordmark
   row (owner's choice), so nothing is pushed off the right edge and no link disappears */
@media (max-width: 1000px) {
  /* a fixed two-row grid instead of a wrapping flex row: no button can ever drop onto a row of its own,
     whatever the phone's width or font. Row 1: wordmark … wishlist, claims, currency, language.
     Row 2: "Always free", the store icons (scroll sideways if short of room), the hide switch. */
  .topbar { display: grid; grid-template-columns: auto minmax(0, 1fr) repeat(4, auto); column-gap: 10px; row-gap: 6px; padding-block: 8px 12px; }
  .top-right { display: contents; }
  .brand { grid-area: 1 / 1; justify-self: start; }
  .topbar { grid-template-columns: auto minmax(0, 1fr) repeat(5, auto); }
  .about-link { grid-area: 1 / 3; }
  .about-link .label { display: none; }
  .wish-view { grid-area: 1 / 4; }
  .claims-link { grid-area: 1 / 5; }
  .cur { grid-area: 1 / 6; }
  .lang { grid-area: 1 / 7; }
  .nav-free { grid-area: 2 / 1; justify-self: start; margin: 0 0 0 -10px; padding: 6px 10px; }
  .brand-stores { grid-area: 2 / 2 / 3 / 7; display: flex; margin: 0; padding-left: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .top-right > .switch { grid-area: 2 / 7; justify-self: end; }
}
@media (max-width: 560px) {
  .topbar { column-gap: 6px; }
  .nav-free { margin-left: -8px; padding: 6px 8px; }
  .brand-stores a { width: 26px; }
  .lang-toggle .chev { display: none; }
}

/* ---- "My claims" page (#claimed): every asset the viewer ticked, newest first, with the money it saved */
/* nav items: plain text + icon, no pill; the count is a small badge that only shows when it is above 0 */
.claims-link, .wish-view, .about-link { position: relative; display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; border-radius: 8px; padding: 7px 10px;
  font: inherit; font-size: 14px; font-weight: 600; color: #c7d3e3; text-decoration: none; white-space: nowrap; cursor: pointer; transition: color .15s, background .15s; }
.claims-link:hover, .wish-view:hover, .about-link:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.claims-link svg, .wish-view svg, .about-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; }
.claims-link .count, .wish-view .count { position: absolute; top: 1px; left: 19px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: #0b1220; background: #f5b81c; box-shadow: 0 0 0 2px #0f1a2c; }
.claims-link .count.zero, .wish-view .count.zero { display: none; }
.claims-link[aria-current="page"], .wish-view[aria-current="page"], .about-link[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--deal-ink); border-radius: 8px 8px 2px 2px; }
.claims-link[aria-current="page"] svg { stroke: var(--got); }
.wish-view[aria-current="page"] svg { stroke: var(--deal-ink); fill: var(--deal-ink); }
.claims-page { display: none; }
.page.on-claims .intro, .page.on-claims #shelves, .page.on-claims #no-results, .page.on-claims .cc0-page,
.page.on-wish .intro, .page.on-wish #shelves, .page.on-wish #no-results, .page.on-wish .cc0-page { display: none !important; }
.page.on-claims #claims-page, .page.on-wish #wish-page { display: grid; gap: 22px; padding-top: 18px; }
/* wishlist page (#wishlist, 2026-11-09: its own page like My claims instead of filtering the shelves) */
.claim-row .price-now { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.claim-row .price-now b { color: var(--deal-ink); }
.claim-row.ended { opacity: .6; }
.claim-row .left { white-space: nowrap; }
.claim-row .left.urgent { color: #f87171; } .claim-row .left.soon { color: #fb923c; }
.claims-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.claims-hero h1 { margin: 0 0 6px; font-family: var(--font-display); font-stretch: 108%; font-weight: 800; font-size: 40px; line-height: 1.05; }
.claims-hero p { margin: 0; color: #c7d3e3; font-size: 16px; }
.claims-total { display: grid; gap: 2px; padding: 12px 18px; border-radius: 12px; background: rgba(34, 197, 94, .12); border: 1px solid rgba(34, 197, 94, .35); }
.claims-total span { font-size: 12.5px; color: #a7d9b8; font-weight: 600; }
.claims-total b { font-family: var(--font-display); font-size: 28px; color: #86efac; font-variant-numeric: tabular-nums; }
.claims-month { margin: 10px 0 0; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.claims-list { display: grid; gap: 8px; }
.claim-row { display: grid; grid-template-columns: 112px 1fr auto; gap: 16px; align-items: center; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.claim-row img.th, .claim-row .th { width: 112px; height: 70px; border-radius: 8px; object-fit: cover; background: linear-gradient(135deg, #1d2a3f, #2b3f63); display: block; }
.claim-row .t { font-weight: 650; font-size: 15.5px; line-height: 1.3; color: var(--ink); text-decoration: none; }
.claim-row .t:hover { text-decoration: underline; }
.claim-row .m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 5px; font-size: 13px; color: var(--muted); }
.claim-row .m .store-mark { --mh: 13px; opacity: .85; }
.claim-row .saved { text-align: right; display: grid; gap: 6px; justify-items: end; }
.claim-row .saved b { color: #86efac; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.claim-row .undo { border: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; padding: 3px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.claim-row .undo:hover { color: var(--ink); border-color: var(--muted); }
.claims-empty { padding: 28px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); display: grid; gap: 12px; justify-items: start; font-size: 15px; }
.claims-empty a, .claims-back { color: var(--ink); font-weight: 600; text-decoration: none; }
@media (max-width: 640px) { .claim-row { grid-template-columns: 80px 1fr; } .claim-row img.th, .claim-row .th { width: 80px; height: 50px; } .claim-row .saved { grid-column: 2; justify-items: start; text-align: left; grid-auto-flow: column; align-items: center; } .claims-hero h1 { font-size: 30px; } .claims-link .label { display: none; } .claims-link { padding: 6px 9px; } .wish-view .label { display: none; } }

/* "See all" under the free strip (2026-11-10, user): the page dots stay in the middle, the button on the right */
.free-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 6px; }
.free-foot .row-dots { grid-column: 2; margin-top: 0; }
.free-all { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s; }
.free-all:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); }
.free-all span { transition: transform .15s; }
.free-all:hover span { transform: translateX(3px); }
@media (max-width: 640px) {
  .free-foot { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .free-foot .row-dots { grid-column: 1; }
  .free-all { grid-column: 1; justify-self: stretch; justify-content: center; }
}
/* the page with every free asset as cards (#free-now) */
.freeall-page { display: none; }
.page.on-freeall .intro, .page.on-freeall #shelves, .page.on-freeall #no-results { display: none !important; }
.page.on-freeall #freeall-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; padding-top: 18px; }
.freeall-head { display: grid; justify-items: center; gap: 6px; text-align: center; margin: 6px 0 8px; }
.freeall-head .fh-text { display: grid; justify-items: center; gap: 6px; }
.freeall-grid { --per: 4; --gap: 22px; container-type: inline-size; display: grid; grid-template-columns: repeat(var(--per), minmax(0, 1fr)); gap: 34px var(--gap); }
/* these are the strip's big cards (store logo, code chip, big price), so they need room: fewer per row than the shelves */
@media (max-width: 1240px) { .freeall-grid { --per: 3; } }
@media (max-width: 1000px) { .freeall-grid { --per: 2; } }
@media (max-width: 640px) { .freeall-grid { --per: 1; --gap: 14px; } }

/* ---- About page (#about, 2026-11-10): what the site does, then each store's current giveaways under its own logo */
.about-page { display: none; }
.page.on-about .intro, .page.on-about #shelves, .page.on-about #no-results { display: none !important; }
.page.on-about #about-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 46px; padding-top: 22px; }
.about-hero { max-width: 860px; }
.about-kicker { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--deal-ink); }
.about-hero h1 { margin: 0 0 14px; font-family: var(--font-display); font-stretch: 108%; font-weight: 800; font-size: 46px; line-height: 1.04; letter-spacing: -.01em; }
.about-hero > p { margin: 0; max-width: 68ch; color: #c7d3e3; font-size: 17px; line-height: 1.6; }
.about-stats { display: flex; flex-wrap: wrap; gap: 12px 36px; margin-top: 24px; }
.about-stats div { display: grid; gap: 2px; }
.about-stats b { font-family: var(--font-display); font-size: 32px; font-weight: 800; line-height: 1.05; color: #fff; font-variant-numeric: tabular-nums; }
.about-stats div:last-child b { color: var(--deal-ink); }
.about-stats span { font-size: 13px; font-weight: 600; color: var(--muted); }
.about-points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.about-points li { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: 14px; background: linear-gradient(165deg, rgba(52, 80, 122, .45), rgba(31, 51, 82, .45)); border: 1px solid rgba(255, 255, 255, .06); }
.about-points svg { width: 26px; height: 26px; color: var(--deal-ink); margin-bottom: 4px; }
.about-points h3 { margin: 0; font-size: 16.5px; font-weight: 700; }
.about-points p { margin: 0; font-size: 14.5px; line-height: 1.5; color: #c7d3e3; }
.about-free { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.about-free > header h2 { margin: 0 0 6px; font-family: var(--font-display); font-stretch: 108%; font-size: 30px; font-weight: 800; }
.about-free > header p { margin: 0; color: var(--muted); font-size: 15px; }
.about-store { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.about-store-head { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.about-store-head .st { display: inline-flex; align-items: center; }
.about-store-head .store-mark { --mh: 24px; transition: opacity .15s; opacity: .95; }
.about-store-head .st:hover .store-mark { opacity: 1; }
.about-store-head .n { font-size: 13px; font-weight: 700; color: var(--deal-ink); background: rgba(61, 122, 31, .4); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.about-store-head .go { margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; }
.about-store-head .go:hover { color: #fff; }
.about-grid { --per: 4; --gap: 22px; container-type: inline-size; display: grid; grid-template-columns: repeat(var(--per), minmax(0, 1fr)); gap: 30px var(--gap); }
.about-more { justify-self: center; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); background: #1d2a3f; border: 1px solid var(--line); border-radius: 999px; padding: 9px 20px; cursor: pointer; }
.about-more:hover { border-color: var(--muted); }
.about-none { display: grid; gap: 14px; padding: 20px 22px; border-radius: 14px; border: 1px dashed var(--line); }
.about-none h3 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.about-none div { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.about-none a { display: inline-flex; padding: 4px 0; }
.about-none .store-mark { --mh: 17px; opacity: .7; transition: opacity .15s; }
.about-none a:hover .store-mark { opacity: 1; }
.about-empty { margin: 0; padding: 24px; border-radius: 14px; border: 1px dashed var(--line); color: var(--muted); }
/* laptops: the About button shows only its icon so the language button never falls off the right edge */
@media (min-width: 1001px) and (max-width: 1240px) { .about-link .label { display: none; } .top-right { gap: 10px; } }
@media (max-width: 1000px) { .about-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } .about-grid { --per: 3; } .about-hero h1 { font-size: 38px; } }
@media (max-width: 640px) {
  .about-points { grid-template-columns: minmax(0, 1fr); }
  .about-points li { padding: 16px; }
  .about-grid { --per: 2; --gap: 14px; row-gap: 22px; }
  .about-hero h1 { font-size: 31px; }
  .about-hero > p { font-size: 15.5px; }
  .about-stats b { font-size: 26px; }
  .about-free > header h2 { font-size: 24px; }
  .about-store-head .store-mark { --mh: 20px; }
  .about-store-head .go { margin-left: 0; flex-basis: 100%; }
}
/* ---- asset page (#asset/<id>, 2026-11-10 try-out): a card opens its own page with the deal and its price history */
.asset-page { display: none; }
.page.on-asset .intro, .page.on-asset #shelves, .page.on-asset #no-results, .page.on-asset .cc0-page, .page.on-asset .claims-page, .page.on-asset .about-page, .page.on-asset .freeall-page { display: none !important; }
.page.on-asset .asset-page { display: grid; gap: 26px; padding-top: 18px; grid-template-columns: minmax(0, 1fr); }
/* the top is the featured slide's own build (image left, blue info side, stitched time box, tag + price): square corners, no tiles */
.ap-slide { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); box-shadow: 0 28px 60px -24px rgba(0, 0, 0, .8); }
.ap-slide .feat-media { min-height: 440px; }
.ap-slide .feat-media img { transition: opacity .25s ease; }
.ap-slide .feat-info { gap: 10px; padding: 20px 18px 18px; }
.ap-store { display: flex; align-items: center; gap: 10px; color: #c7d3e3; font-size: 13px; min-width: 0; }
.ap-store .store-mark { --mh: 18px; }
.ap-store i { flex: none; width: 1px; height: 14px; background: rgba(255, 255, 255, .3); }
.ap-store span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-slide h1 { margin: 0; font-family: var(--font-display); font-stretch: 104%; font-weight: 700; font-size: 26px; line-height: 1.15; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ap-cats { display: flex; flex-wrap: wrap; gap: 4px 14px; color: #c7d3e3; font-size: 13px; }
.ap-cats span { display: inline-flex; align-items: center; gap: 6px; }
.ap-cats .ci { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ap-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.ap-thumbs button { padding: 0; border: 0; background: #07080a; cursor: pointer; aspect-ratio: 16 / 10; opacity: .72; transition: opacity .15s, box-shadow .15s; }
.ap-thumbs button:hover, .ap-thumbs button[aria-current="true"] { opacity: 1; }
.ap-thumbs button[aria-current="true"] { box-shadow: 0 0 0 2px var(--ink); }
.ap-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-facts { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: #fff; }
.ap-slide .feat-foot { gap: 12px; }
.ap-slide .feat-price { background: none; overflow: visible; gap: 10px; min-height: 38px; font-family: Lato, var(--font-body); }
.ap-slide .feat-price .pill { align-self: center; height: 26px; padding: 0 8px 0 14px; font-size: 16px; font-weight: 900; background: #e6ecf4; color: #0c1320; clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%); border-radius: 0 3px 3px 0; }
.ap-slide .feat-price .old { padding: 0; font-size: 17px; color: #a9b8cd; text-decoration: line-through; }
.ap-slide .feat-price .now { padding: 0; font-size: 28px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.ap-slide .feat-price .now.free { color: var(--deal-ink); }
.ap-slide .feat-price { flex-wrap: wrap; justify-content: flex-end; gap: 4px 10px; min-width: 0; }
.ap-slide .feat-price .pill, .ap-slide .feat-time { flex: none; }
.ap-slide .feat-price .now.long { font-size: 21px; }
.ap-code { align-self: start; display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 12px; border: 1.3px dashed rgba(255, 255, 255, .45); border-radius: 1px; background: none; color: #c7d3e3; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .08em; cursor: pointer; }
.ap-code b { font-family: var(--font-mono); font-size: 17px; letter-spacing: .02em; color: #fff; }
.ap-code:hover { border-color: #fff; }
.ap-actions { display: flex; gap: 8px; }
.ap-open { flex: 1 1 auto; display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 1px; background: #e6ecf4; color: #0c1320; font-weight: 700; text-decoration: none; font-size: 15px; transition: background .15s; }
.ap-open:hover { background: #fff; }
.ap-btn { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 1px; background: rgba(10, 12, 15, .45); color: var(--ink); cursor: pointer; transition: background .15s, color .15s; }
.ap-btn:hover { background: rgba(10, 12, 15, .7); }
.ap-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ap-btn[aria-pressed="true"] { background: var(--got); color: #04210f; }
.ap-btn.wishb[aria-pressed="true"] { background: rgba(10, 12, 15, .7); color: var(--deal-ink); }
.ap-btn.wishb[aria-pressed="true"] svg { fill: currentColor; }
/* price history: a shelf heading, numbers in the price face on one ruled line, the chart on the cards' dark panel */
.ap-hist { display: grid; gap: 16px; }
.ap-hist .shelf-title h2 { font-size: 24px; }
.ap-stats { display: flex; flex-wrap: wrap; gap: 14px 0; }
.ap-stats div { display: grid; gap: 4px; align-content: start; padding: 0 28px; border-left: 1px solid var(--line); min-width: 0; }
.ap-stats div:first-child { padding-left: 0; border-left: 0; }
.ap-stats span { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ap-stats b { font-family: Lato, var(--font-body); font-size: 24px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-stats .struck b { color: #8a9bb3; text-decoration: line-through; text-decoration-thickness: 1.5px; font-weight: 400; }
.ap-stats small { font-size: 12px; color: var(--muted); }
.ap-stats .low b { color: var(--deal-ink); }
.ap-chart { background: #172133; padding: 14px 12px 6px 4px; box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset; }
.ap-chart svg { display: block; width: 100%; height: auto; }
.ap-chart text { font-family: Lato, var(--font-body); font-size: 12.5px; fill: #8a9bb3; }
.ap-note { margin: 0; font-size: 13px; color: var(--muted); }
@media (max-width: 900px) { .ap-slide { grid-template-columns: minmax(0, 1fr); } .ap-slide .feat-media { min-height: 0; aspect-ratio: 16 / 10; } .ap-thumbs { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .ap-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 0; } .ap-stats div { padding: 0 14px; } .ap-stats div:nth-child(odd) { padding-left: 0; border-left: 0; } .ap-stats b { font-size: 20px; } .ap-slide h1 { font-size: 22px; } .ap-slide .feat-price .now { font-size: 24px; } }

/* ---- "Always free" (CC0) page; shown instead of the deals when the URL ends in #always-free */
.cc0-page { display: none; }
.page.on-free .intro, .page.on-free #shelves, .page.on-free #no-results { display: none !important; }
.page.on-free .cc0-page { display: grid; gap: 40px; padding-top: 18px; }
.cc0-hero { display: grid; gap: 10px; justify-items: start; }
.cc0-mark { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: .06em; color: var(--deal-ink); background: var(--deal); padding: 4px 8px; border-radius: 6px; }
.cc0-hero h1 { margin: 0; font-family: var(--font-display); font-stretch: 108%; font-weight: 800; font-size: 40px; line-height: 1.05; }
.cc0-hero p { margin: 0; max-width: 62ch; color: #c7d3e3; font-size: 17px; line-height: 1.5; }
.cc0-explain { display: grid; gap: 22px; padding: 26px; border-radius: 14px; background: linear-gradient(165deg, rgba(52, 80, 122, .55), rgba(31, 51, 82, .55)); border: 1px solid rgba(255, 255, 255, .06); }
.cc0-explain h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: 22px; font-weight: 750; }
.cc0-what p { margin: 0; max-width: 75ch; color: #d5deea; font-size: 15.5px; line-height: 1.55; }
.cc0-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.cc0-cols h3 { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cc0-cols ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.cc0-cols li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--ink); }
.cc0-cols li svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.cc0-can li svg { color: #86d65b; }
.cc0-care li svg { color: #f5b81c; }
.cc0-legal { margin: 0; font-size: 12.5px; color: var(--faint); }
.cc0-sources { display: grid; gap: 18px; }
.cc0-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cc0-head h2 { margin: 0; font-family: var(--font-display); font-stretch: 108%; font-size: 26px; font-weight: 750; }
.cc0-head h2 span { color: var(--faint); font-weight: 600; font-size: 18px; }
/* the CC0 type filter uses the same .chips/.chip look as the category row on the deals page */
.cc0-chips { min-width: 0; max-width: 100%; }
/* the chip row scrolls sideways inside its own box; without these the grid columns grow to fit it and the cards spill off a phone screen */
.page.on-free .cc0-page, .cc0-sources { grid-template-columns: minmax(0, 1fr); }
/* one source per row: the coloured name panel on the left, what the source offers on the right */
.cc0-grid { display: grid; gap: 16px; }
.cc0-card { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 26px; align-items: stretch; padding: 14px; border-radius: 14px;
  background: none; border: 0; color: inherit; text-decoration: none; transition: background .15s; }
.cc0-card:hover { background: rgba(255, 255, 255, .03); }
.cc0-tile { position: relative; min-height: 150px; border-radius: 10px; overflow: hidden; display: grid; align-content: center; justify-items: center; gap: 4px; padding: 10px; text-align: center;
  background: none; }
.cc0-card > .cc0-body { align-content: center; padding-block: 4px; }
/* the source's own logo above its name */
.cc0-logo { position: relative; z-index: 1; display: block; height: 84px; width: auto; max-width: 85%; object-fit: contain; margin-bottom: 6px; }
.cc0-logo.wm { height: auto; width: min(220px, 90%); margin-bottom: 8px; }
.cc0-logo.crop { width: 66px; height: 84px; object-fit: cover; object-position: left center; }
.cc0-tile .cc0-name { font-size: 26px; }
.cc0-name { position: relative; z-index: 1; font-family: var(--font-display); font-stretch: 110%; font-weight: 800; font-size: 32px; color: #fff; letter-spacing: -.01em; }
.cc0-host { position: relative; z-index: 1; font-size: 13px; color: rgba(255, 255, 255, .72); }
.cc0-tag { position: absolute; z-index: 1; left: 12px; top: 12px; font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: .06em; color: var(--deal-ink); background: rgba(10, 14, 20, .55); padding: 3px 7px; border-radius: 5px; }
.cc0-body { display: grid; gap: 10px; }
.cc0-badge { display: inline-flex; align-items: center; gap: 6px; justify-self: start; font-size: 13px; font-weight: 700; color: var(--deal-ink); }
.cc0-badge svg { width: 15px; height: 15px; color: #86d65b; }
.cc0-body p { margin: 0; color: #c7d3e3; font-size: 14.5px; line-height: 1.5; }
.cc0-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cc0-tags span { font-size: 12px; font-weight: 600; color: #c7d3e3; background: rgba(255, 255, 255, .06); border-radius: 5px; padding: 3px 8px; }
.cc0-tags span.st { color: #cbd5ff; background: rgba(99, 125, 255, .14); }
.cc0-visit { display: inline-flex; align-items: center; gap: 6px; justify-self: start; font-size: 14px; font-weight: 700; color: #fff; }
.cc0-visit svg { width: 15px; height: 15px; transition: transform .15s; }
.cc0-card:hover .cc0-visit svg { transform: translate(2px, -2px); }
.cc0-verified { margin: 0; font-size: 13px; color: var(--faint); }
.foot-free { color: var(--muted); text-decoration: none; font-weight: 600; justify-self: start; margin-top: 6px; }
.foot-free:hover { color: #fff; }
.foot-cats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; }
.foot-cats b { color: var(--muted); font-weight: 600; margin-right: 2px; }
.foot-cats a { color: var(--faint); text-decoration: none; }
.foot-cats a:hover { color: #fff; }
/* a category page's list as plain HTML (scripts/seo.py), for programs that don't run the page; removed as the page starts */
.seo-static { max-width: 900px; margin: 24px auto; color: var(--muted); font-size: 14px; }
@media (max-width: 760px) { .cc0-cols { grid-template-columns: 1fr; } .cc0-hero h1 { font-size: 32px; } .cc0-explain { padding: 20px; } }
/* phones: the name panel narrows but stays on the left */
@media (max-width: 640px) {
  .cc0-card { grid-template-columns: 108px minmax(0, 1fr); gap: 14px; padding: 10px; }
  .cc0-tile { min-height: 0; padding: 26px 6px 10px; }
  .cc0-tile .cc0-name { font-size: 16px; overflow-wrap: anywhere; }
  .cc0-logo { height: 40px; margin-bottom: 2px; }
  .cc0-logo.wm { width: 92%; }
  .cc0-logo.crop { width: 31px; height: 40px; }
  .cc0-host { font-size: 11px; overflow-wrap: anywhere; }
  .cc0-tag { left: 8px; top: 8px; }
  .cc0-body p { font-size: 14px; }
}
/* currency (2026-11-09, the user wanted it like the language menu): a button with the currency's symbol; it opens the
   same kind of list, each currency in the page language with its symbol on the right */
.cur { position: relative; }
.cur-sym { display: grid; place-items: center; min-width: 22px; height: 22px; font-size: 17px; font-weight: 600; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lang-menu.lang-menu button small { color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.lang-menu.lang-menu button[aria-checked="true"] small { color: var(--ink); }
/* language: a globe button (icon only); it opens a scrollable list of languages written in their own names */
#lang-cur, .lang-toggle .chev { display: none; }
.lang-toggle.lang-toggle { border: 0; border-radius: 8px; padding: 7px; background: transparent; }
.lang-toggle.lang-toggle:hover, .lang-toggle.lang-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, .08); }
.lang-toggle.lang-toggle .globe { width: 22px; height: 22px; stroke-width: 1.6; }
.lang-menu.lang-menu { min-width: 230px; max-height: min(440px, 70vh); overflow-y: auto; padding: 8px; gap: 2px; border-radius: 14px; background: #1b2232; border-color: rgba(255, 255, 255, .08); scrollbar-width: thin; scrollbar-color: #4a5568 transparent; }
.lang-menu.lang-menu button { font-size: 15px; font-weight: 500; padding: 11px 16px; border-radius: 8px; }
.lang-menu.lang-menu button:hover, .lang-menu.lang-menu button:focus-visible { background: rgba(255, 255, 255, .08); }
.lang-menu.lang-menu button[aria-checked="true"] { background: rgba(255, 255, 255, .12); font-weight: 700; }
.lang { position: relative; }
.lang-toggle { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 999px; padding: 5px 10px 5px 8px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s; }
.lang-toggle:hover, .lang-toggle[aria-expanded="true"] { border-color: var(--muted); background: rgba(255, 255, 255, .05); }
.lang-toggle .globe { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lang-toggle .chev { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .7; transition: transform .15s; }
.lang-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 150px; display: grid; gap: 2px; padding: 4px; background: rgba(16, 25, 41, .98); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 32px rgba(0, 0, 0, .5); }
.lang-menu button { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 7px; cursor: pointer; text-align: left; }
.lang-menu button:hover, .lang-menu button:focus-visible { background: #1d2a3f; outline: none; }
.lang-menu button small { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; }
.lang-menu button[aria-checked="true"] { background: #1d2a3f; }
.lang-menu button[aria-checked="true"] small { color: var(--deal); }
.wish-view.bump .count { animation: bump .35s; }
@keyframes bump { 50% { transform: scale(1.35); } }

.foot { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--faint); font-size: 13px; display: grid; gap: 4px; }

.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--bg); font-weight: 600; font-size: 14px; padding: 8px 14px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 20; }
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* card buttons: on mouse devices show only on hover/focus, or when already pressed */
@media (hover: hover) and (pointer: fine) {
  .card .wish, .card .claim, .card .share { opacity: 0; transition: opacity .15s, background .15s, border-color .15s, transform .15s; }
  .card:hover .wish, .card:hover .claim, .card:hover .share,
  .card:focus-within .wish, .card:focus-within .claim, .card:focus-within .share,
  .card .wish[aria-pressed="true"], .card .claim[aria-pressed="true"] { opacity: 1; }
}
@media (max-width: 560px) {
  .intro { padding-block: 4px 4px; }
  .shelf { margin-top: 35px; }
  .shelf-title h2 { font-size: 21px; }
  .shelf-title h2 .store-mark { --mh: 18px; }
  .switch span { display: none; }
  .switch::before { content: none; }
  .brand { font-size: 15px; gap: 6px; }
  .top-right { gap: 6px; }
  .lang-toggle { padding: 5px 8px; }
  .lang-toggle #lang-cur { display: none; }
  .wish-view { padding: 6px 9px; }
  .wish-view .label { display: none; }
  /* keep currency and language together at the top right on ~360px phones too (they used to wrap onto a row of their own) */
  .wish-view, .claims-link, .about-link { gap: 5px; padding: 6px 8px; }
}
@media (max-width: 350px) {
  .topbar { column-gap: 4px; }
  .wish-view, .claims-link, .about-link { gap: 3px; padding: 6px 6px; }

  .lang-toggle { padding: 5px 6px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* ---------- phones (2026-11-09 mobile pass) ---------- */
/* touch screens: shelves scroll natively with the finger (snapping to cards), a slice of the next card peeks in
   so it is clear the row goes on, and the round side arrows (which covered the cards' buttons) are gone */
@media (hover: none) and (pointer: coarse) {
  .row { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .row::-webkit-scrollbar { display: none; }
  .row-arrow { display: none !important; }
}
@media (hover: none) and (pointer: coarse) and (max-width: 640px) { .row-wrap { --per: 2.12; } }
/* a grid ("show all", the one-list view) needs a whole number of columns: 2.12 is only for the swiping rows */
@media (hover: none) and (pointer: coarse) and (max-width: 640px) { .shelf.expanded .row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1120px) {
/* narrow store cards (phones, tablets, small windows up to ~1120px, where a card is under ~250px wide): the price box
   no longer runs past the card: the old price gets its own small line, the rest wraps. Store shelves only: the wide
   cards of the free strip keep the one-line box. */
  #shelves .row-wrap, .about-grid { --below: 80px; }
  #shelves .price, .about-grid .price { max-width: 100%; flex-wrap: wrap; justify-content: flex-end; min-height: 34px; }
  #shelves .price .old, .about-grid .price .old { order: -1; flex-basis: 100%; text-align: right; padding: 5px 8px 0; font-size: 11.5px; line-height: 1.2; }
  #shelves .price.free-block .old, .about-grid .price.free-block .old { padding-right: 8px; }
  #shelves .price .pill, .about-grid .price .pill { font-size: 14px; padding: 6px 5px; }
  #shelves .price .now, .about-grid .price .now { flex: 1 1 0; min-width: 0; font-size: 14.5px; padding: 6px 8px; white-space: normal; text-align: right; line-height: 1.15; }
  #shelves .price .pill + .now, .about-grid .price .pill + .now { padding-left: 8px; }
}
@media (max-width: 640px) {
  /* free strip: code chip and price share one row on a phone card, both a little tighter */
  .card-link .body > .pslot.has-code { gap: 6px; }
  .pslot.has-code .price.free-block .now { padding: 0 9px; }
  /* coupon chip fits inside the image */
  .coupon { left: 6px; right: 6px; bottom: 6px; gap: 5px; padding: 2px 2px 2px 7px; }
  .coupon span { display: none; }
  .coupon code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  .copy { padding: 3px 6px; font-size: 11.5px; }
  /* shorter text above the images, so one long card doesn't leave a tall empty band over the whole row */
  .title { font-size: 14.5px; }
  .card .facts { font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .kicker { font-size: 12px; }
  /* time flag and the two round buttons a bit smaller on small images */
  .time { left: 8px; scale: .8; }
  /* phone cards are narrow: the three buttons get smaller so they fit in one row right of the time flag */
  .card .claim, .card .wish, .card .share { width: 26px; height: 26px; border-width: 1.2px; top: calc(100% - var(--below) - var(--img-h) + 7px); }
  .card .claim svg { width: 13px; height: 13px; }
  .card .wish svg, .card .share svg { width: 12px; height: 12px; }
  .card .claim { right: 6px; }
  .card .wish, .card .share[data-solo] { right: 36px; }
  .card .share { right: 66px; }
  .card .wish[data-solo] { right: 6px; }
  /* the wide cards of the "Free right now" strip keep the full-size buttons */
  .featured .card .claim, .featured .card .wish, .featured .card .share, .freeall-grid .card .claim, .freeall-grid .card .wish, .freeall-grid .card .share { width: 34px; height: 34px; border-width: 1.5px; scale: .88; top: calc(100% - var(--below) - var(--img-h) + 10px); }
  .featured .card .claim svg, .freeall-grid .card .claim svg { width: 16px; height: 16px; }
  .featured .card .wish svg, .featured .card .share svg, .freeall-grid .card .wish svg, .freeall-grid .card .share svg { width: 15px; height: 15px; }
  .featured .card .claim, .freeall-grid .card .claim { right: 10px; }
  .featured .card .wish, .featured .card .share[data-solo], .freeall-grid .card .wish, .freeall-grid .card .share[data-solo] { right: 52px; }
  .featured .card .share, .freeall-grid .card .share { right: 94px; }
  .featured .card .wish[data-solo], .freeall-grid .card .wish[data-solo] { right: 10px; }
  /* featured: price and time right under the text, not pushed to the bottom by the tallest slide (left a big empty gap) */
  .feat-foot { margin-top: 12px; }
}
/* font trial (artifact only): Chequered Ink fonts on the logo and headings; missing letters (ş ğ İ) fall back to Inter Tight */
@font-face { font-family: "Provicali"; src: url("webfonts/provicali.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Play Pretend"; src: url("webfonts/play-pretend.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Sanseriffic"; src: url("webfonts/sanseriffic.woff2") format("woff2"); font-display: swap; }
html[data-hf="provicali"] { --font-head: "Provicali"; --hf-ls: .01em; --hf-scale: 1.08; }
html[data-hf="play-pretend"] { --font-head: "Play Pretend"; --hf-ls: .02em; --hf-scale: .95; }
html[data-hf="sanseriffic"] { --font-head: "Sanseriffic"; --hf-ls: .01em; --hf-scale: 1.02; }
html[data-hf] :is(.intro h1, .feat-head h2, .fh-num, .fh-cap, .shelf-title h2, .claims-hero h1, .claims-total b, .about-hero h1, .about-stats b, .about-free > header h2, .cc0-hero h1, .cc0-explain h2, .cc0-head h2) {
  font-family: var(--font-head), "Inter Tight", Inter, sans-serif; font-stretch: 100%; font-synthesis: none; letter-spacing: var(--hf-ls); }
html[data-hf] :is(.feat-head h2, .shelf-title h2, .about-free > header h2, .cc0-head h2) { font-size: calc(30px * var(--hf-scale)); }
/* free-strip headline in Clicky Bricks 3 (Chequered Ink, personal-use trial, artifact only; the caption is big enough for the studs to read); missing ş ğ İ Ü fall back to Inter Tight */
/* the number: Peg Holes (Chequered Ink), now Vengeance at Sea (rough brush, goes with the brush-stroke logo); tried before: Bittypix Countdown, Peg Holes (dot matrix), Digital Display (LCD) */
@font-face { font-family: "Bittypix Countdown"; src: url("webfonts/bittypix-countdown.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Peg Holes"; src: url("webfonts/peg-holes.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Digital Display"; src: url("webfonts/digital-display.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Clicky Bricks"; src: url("webfonts/clicky-bricks.woff2") format("woff2"); font-display: swap; }
html:root .free-head .fh-num { font-family: "N vengeance_at_sea", "Inter Tight", Inter, sans-serif; font-weight: 400; font-synthesis: none; letter-spacing: .06em; font-size: clamp(72px, 9vw, 120px); line-height: 1; padding-bottom: .1em; }
html:root .free-head .fh-cap { font-family: "Clicky Bricks", "Inter Tight", Inter, sans-serif; font-weight: 400; font-synthesis: none; letter-spacing: .05em; font-size: clamp(24px, 3vw, 36px); line-height: 1.1; color: #e6eef8; }
/* count-up font flip (artifact only): 33 Chequered Ink fonts, digits only (~4 KB each); each shows once per count */
@font-face { font-family: "N arcane_nine"; src: url("webfonts/n/arcane-nine.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "N astrolab"; src: url("webfonts/n/astrolab.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "N blaze_of_glory"; src: url("webfonts/n/blaze-of-glory.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "N breathe_fire_v"; src: url("webfonts/n/breathe-fire-v.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "N bring_me_a_helicopter"; src: url("webfonts/n/bring-me-a-helicopter.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "N call_of_ops_duty"; src: url("webfonts/n/call-of-ops-duty.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "N chopsic"; src: url("webfonts/n/chopsic.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "N deadknight"; src: url("webfonts/n/deadknight.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "N decaydence"; src: url("webfonts/n/decaydence.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "N equalize"; src: url("webfonts/n/equalize.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "N excess_v"; src: url("webfonts/n/excess-v.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "N fast_hand"; src: url("webfonts/n/fast-hand.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "N futuristic_armour"; src: url("webfonts/n/futuristic-armour.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "N hunters_k_pop"; src: url("webfonts/n/hunters-k-pop.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "N nau_sea"; src: url("webfonts/n/nau-sea.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "N o_k_retro"; src: url("webfonts/n/o-k-retro.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "N one_slice"; src: url("webfonts/n/one-slice.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "N punk_metal"; src: url("webfonts/n/punk-metal.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "N relidux"; src: url("webfonts/n/relidux.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "N revamped"; src: url("webfonts/n/revamped.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "N robot_roc"; src: url("webfonts/n/robot-roc.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "N sacred_hertz"; src: url("webfonts/n/sacred-hertz.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "N shizuoka_cyberpunk"; src: url("webfonts/n/shizuoka-cyberpunk.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "N tabloid_scuzzball"; src: url("webfonts/n/tabloid-scuzzball.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "N the_macabre"; src: url("webfonts/n/the-macabre.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "N vengeance_at_sea"; src: url("webfonts/n/vengeance-at-sea.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "N vermin_vibes"; src: url("webfonts/n/vermin-vibes.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "N provicali"; src: url("webfonts/n/provicali.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "N play_pretend"; src: url("webfonts/n/play-pretend.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "N sanseriffic"; src: url("webfonts/n/sanseriffic.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "N clicky_bricks"; src: url("webfonts/n/clicky-bricks.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "N digital_display"; src: url("webfonts/n/digital-display.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "N peg_holes"; src: url("webfonts/n/peg-holes.woff2") format("woff2"); font-display: block; }
/* logo in Cursed Cavalcade (Chequered Ink, personal-use trial, artifact only; tried before: PixelFlag, Clicky Bricks 3, Member Kinglify) */
@font-face { font-family: "Cursed Cavalcade"; src: url("webfonts/cursed-cavalcade.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "PixelFlag"; src: url("webfonts/pixelflag.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Member Kinglify"; src: url("webfonts/member-kinglify.woff2") format("woff2"); font-display: swap; }
html:root a.brand { font-family: "Cursed Cavalcade", "Inter Tight", Inter, sans-serif; font-weight: 400; font-stretch: 100%; font-synthesis: none; letter-spacing: .02em; }
html:root a.brand > span { font-size: 1.3em; line-height: 1; }   /* the studs need size to read; on the inner span so the $0 tag keeps its size */
/* top-bar links in The Inevitable End (Chequered Ink, personal-use trial, artifact only); ş ğ İ fall back to Inter */
@font-face { font-family: "The Inevitable End"; src: url("webfonts/the-inevitable-end.woff2") format("woff2"); font-display: swap; }
html:root :is(.nav-free, .claims-link, .wish-view, .about-link, #hide-label > span) { font-family: "The Inevitable End", Inter, sans-serif; font-weight: 400; font-synthesis: none; font-size: 16.7px; letter-spacing: .02em; }
html:root :is(.claims-link, .wish-view) .count { font-family: var(--font-body); font-size: 10.5px; letter-spacing: 0; }
/* the first store icon sits as far from the divider as "Always free" does on the other side (16 px), 2026-11-11 comment */
@media (min-width: 1000px) { html:root .brand-stores { padding-left: 12px; } }
/* panel cards (2026-11-11 trial, artifact only, html[data-cards="panel"]; user: "like isthereanydeal, simple"): the image sits
   flush on a dark panel; on the panel the title is small and muted on the left, the discount is a pale tag with a
   point and the price is big on the right, the seller / store line under the price; no old price */
html[data-cards="panel"] .card-link { position: relative; background: #172133; border-radius: 9px; overflow: hidden; box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset; transition: background .15s; }
html[data-cards="panel"] .card:hover .card-link { background: #1c2840; }
html[data-cards="panel"] .card-link .thumb { margin-top: 0; border-radius: 0; }
html[data-cards="panel"] .card-link .body > :first-child { margin-top: 0; }
/* 2026-11-11 (user): the name is back at the top of the card, always visible (it used to show only on hover, over the image).
   One line above the image, so everything measured from the card's bottom (buttons, veil, arrows) stays where it was. */
html[data-cards="panel"] .card-link .body > .title { display: block; margin: 0; padding: 9px 12px 8px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 13.5px; font-weight: 650; line-height: 1.25; color: #e6ecf4; }
html[data-cards="panel"] .card-link .body > .facts { display: none; }
html[data-cards="panel"] .card-link .body > .kicker { position: absolute; right: 12px; bottom: 7px; max-width: 52%; margin: 0; justify-content: flex-end; font-size: 12.5px; color: #8a9bb3; }
html[data-cards="panel"] .card-link .body > .kicker::after { content: ""; flex: none; width: 6px; height: 6px; border-radius: 1px; background: var(--deal-ink); opacity: .8; }
html[data-cards="panel"] .card-link .body > .pslot { padding: 0 12px; }
html[data-cards="panel"] .pslot > .price { margin: 7px 0 0; background: none; min-height: 0; border-radius: 0; overflow: visible; gap: 9px; }
html[data-cards="panel"] .price .old { padding: 0; font-size: 15px; color: #8a9bb3; text-decoration: line-through; white-space: nowrap; }   /* the normal price, struck, before the price now */
html[data-cards="panel"] .price .pill { align-self: center; height: 22px; padding: 0 7px 0 13px; font-size: 14px; font-weight: 700; background: #e6ecf4; color: #0c1320;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%); border-radius: 0 3px 3px 0; letter-spacing: 0; }
html[data-cards="panel"] .price .now, html[data-cards="panel"] .price .pill + .now { padding: 0; font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
html[data-cards="panel"] .price .now.free { color: var(--deal-ink); }
html[data-cards="panel"] .pslot.has-code { padding-top: 0; }
html[data-cards="panel"] .pslot.has-code > .code-chip { margin-top: 7px; }
html[data-cards="panel"] .featured .card-link .body > .kicker { right: auto; left: 12px; bottom: auto; top: calc(100% - var(--below) + 15px); max-width: 45%; justify-content: flex-start; }
html[data-cards="panel"] .featured .card-link .body > .kicker::after { display: none; }
html[data-cards="panel"] .card-link .body > .kicker:has(~ .pslot.has-code) { display: none; }   /* the code sits on the left there */
html[data-cards="panel"] .price.free-block { gap: 10px; background: none; align-items: center; }
html[data-cards="panel"] .price .strip-pill { display: flex; }
html[data-cards="panel"] .featured .row-wrap, html[data-cards="panel"] .freeall-grid { --below: 62px; }   /* room for the struck price above the word */
html[data-cards="panel"] .featured .card-link .body > .kicker { top: calc(100% - var(--below) + 21px); }
html[data-cards="panel"] .pslot.has-code .price.free-block .now { font-size: 18px; }
html[data-cards="panel"] .price.free-block .pcol { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
html[data-cards="panel"] .price.free-block .old { display: block; padding: 0; font-size: 18px; color: #8a9bb3; text-decoration: line-through; text-decoration-thickness: 1.5px; }
html[data-cards="panel"] .price.free-block .now { display: block; background: none; padding: 0; height: auto; font-size: 21px; font-weight: 700; color: var(--deal-ink); white-space: nowrap; }
/* prices in Lato, the face GOG's prices use (open licence) */
html[data-cards="panel"] :is(.price .now, .price .old, .price .pill, .tiers b, .tiers .from) { font-family: Lato, var(--font-body); }
html[data-cards="panel"] .price .now { font-weight: 700; }
html[data-cards="panel"] .price .pill { font-weight: 900; }
html[data-cards="panel"] .card .veil { border-radius: 0; }
/* free strip, "free with a coupon" cards (2026-11-11 comment): the code sits on the image, centred at its bottom edge, in a loud
   colour ("CODE: XXXX"), so nobody misses that a code is needed; pressing it copies. It used to sit small, left of the price. */
.card-link:has(.pslot.img-code) { position: relative; }
.pslot.img-code > .code-chip { position: absolute; left: 50%; bottom: calc(var(--below) + 12px); transform: translateX(-50%); z-index: 3; margin: 0; height: auto; line-height: 1;
  padding: 9px 16px 8px; gap: 8px; max-width: calc(100% - 24px); border: 0; border-radius: 5px; background: #f2ff00; color: #0a0d12; cursor: pointer;
  box-shadow: 0 0 0 2px #0a0d12, 0 6px 22px rgba(242, 255, 0, .45); transition: transform .15s, background .15s; }
.pslot.img-code > .code-chip:hover { background: #fff; transform: translateX(-50%) scale(1.05); }
.pslot.img-code > .code-chip span, .pslot.img-code > .code-chip code { font-family: var(--font-mono); font-size: clamp(15px, 1.45vw, 21px); font-weight: 800; letter-spacing: .04em; color: inherit; }
.pslot.img-code > .code-chip span { opacity: .7; }
.pslot.img-code > .code-chip.done { background: #4ade80; box-shadow: 0 0 0 2px #0a0d12, 0 6px 22px rgba(74, 222, 128, .45); }
@media (max-width: 640px) { .pslot.img-code > .code-chip span, .pslot.img-code > .code-chip code { font-size: 18px; } html[data-cards="panel"] .card-link .body > .kicker:has(~ .pslot.img-code) { display: none; } }   /* phones: "Free with a coupon" needs the store logo's room */
/* card-edge trial (2026-11-11 comment: "the cards run together, but lines between them would be ugly"; artifact only, html[data-edge]):
   the panel a tone lighter than the page, a thin pale edge on each card (an outline, so it also runs over the image) and a soft shadow */
html[data-edge][data-cards="panel"] .card-link { background: #1b2841; outline: 1px solid rgba(165, 195, 240, .16); outline-offset: -1px; box-shadow: 0 3px 10px rgba(0, 0, 0, .38); transition: background .15s, outline-color .15s; }
html[data-edge][data-cards="panel"] .card:hover .card-link { background: #223255; outline-color: rgba(165, 195, 240, .34); }
/* same trial (user: "not between the cards, between the stores, a little"): 45 -> 84 px above each store's shelf (64 first, then "a bit more"), 35 -> 60 on phones */
html[data-edge] #shelves .shelf { margin-top: 84px; }
@media (max-width: 560px) { html[data-edge] #shelves .shelf { margin-top: 60px; } }
/* "Hide claimed" without a switch (2026-11-11, user: "the words should erase right to left, like turning to ash"):
   an eye and the words; pressing burns the letters away one by one from the right (they grey, drift up and crumble
   into specks), the eye closes; the words' place stays, and hovering shows them faintly; pressing again brings them back */
#hide-label.hg { position: relative; gap: 0; padding: 6px 8px; border-radius: 8px; transition: background .15s, color .15s; }
#hide-label.hg:hover { background: rgba(255, 255, 255, .06); color: var(--ink); }
#hide-label.hg:has(input:focus-visible) { outline: 2px solid var(--deal-ink); outline-offset: 2px; }
#hide-label.hg input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; }
#hide-label.hg input::after { content: none; }
.hg-eye { display: grid; place-items: center; width: 18px; height: 18px; flex: none; }
.hg-eye svg { grid-area: 1 / 1; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: opacity .25s, transform .25s; }
.hg-eye .hg-shut { opacity: 0; transform: scaleY(.4); }
#hide-label.is-hidden .hg-eye .hg-open { opacity: 0; transform: scaleY(.2); }
#hide-label.is-hidden .hg-eye .hg-shut { opacity: 1; transform: none; color: var(--deal-ink); }
/* once burnt the words fold away so what is on their left slides over (2026-11-11, user: the gap looked odd) */
#hide-label > span[data-i18n] { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: middle; margin-left: 7px; transition: max-width .38s ease, margin-left .38s ease; }
#hide-label.is-hidden > span[data-i18n] { max-width: 0; margin-left: 0; opacity: 0; }
.hg-l { display: inline-block; white-space: pre; will-change: transform, opacity, filter; }
@media (max-width: 560px) { #hide-label.hg .hg-eye { display: grid; } #hide-label.hg { padding: 6px; } #hide-label.hg > span[data-i18n] { display: none; } }   /* phones: just the eye (2026-11-11: the words came back with the fold-away rule above and pushed the whole bar wider than the screen) */
@media (max-width: 560px) { html:root .free-head .fh-cap { font-size: clamp(15px, 5.1vw, 24px); letter-spacing: .03em; white-space: nowrap; } html:root .free-head .fh-cap::before, html:root .free-head .fh-cap::after { content: none; } }
.hg-ash { position: absolute; width: 2.4px; height: 2.4px; border-radius: 50%; background: #9aa6b6; pointer-events: none; z-index: 2; }
.hf-pick { position: fixed; left: 14px; bottom: 14px; z-index: 90; display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px;
  background: rgba(12, 19, 32, .92); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 8px 28px rgba(0, 0, 0, .45); backdrop-filter: blur(8px); font-size: 12.5px; }
.hf-pick span { color: var(--muted); padding: 0 6px 0 8px; font-weight: 600; }
.hf-pick button { font: inherit; font-weight: 600; color: var(--ink); background: transparent; border: 0; border-radius: 999px; padding: 6px 11px; cursor: pointer; }
.hf-pick button:hover { background: rgba(255, 255, 255, .08); }
.hf-pick .hf-cards { margin-left: 4px; border-left: 1px solid rgba(255, 255, 255, .14); border-radius: 0; color: #c8f57a; }
.hf-pick .hf-mode { margin-left: 0; border-left: 1px solid rgba(255, 255, 255, .14); border-radius: 0; color: #9fb0c8; }
.hf-pick .hf-play { margin-left: 0; border-left: 1px solid rgba(255, 255, 255, .14); border-radius: 0 999px 999px 0; color: #c8f57a; }
.hf-pick button[aria-pressed="true"] { background: var(--deal); color: var(--deal-ink); }
.hf-pick button[data-f="provicali"] { font-family: "Provicali", sans-serif; font-size: 14px; }
.hf-pick button[data-f="play-pretend"] { font-family: "Play Pretend", sans-serif; }
.hf-pick button[data-f="sanseriffic"] { font-family: "Sanseriffic", sans-serif; font-size: 13.5px; }
@media (max-width: 560px) { .hf-pick { left: 8px; right: 8px; bottom: 8px; justify-content: center; } .hf-pick span { display: none; } .hf-pick button { padding: 6px 8px; } }