/* ====================================================================
   kwaai styles

   How it layers, from general to specific (later rules win at equal specificity):

   1. TOKENS        Colours and sizes as custom properties on :root, light first.
   2. Dark          The same tokens for dark mode: once for "follow the device"
                    (media query) and once for a dark choice (data-theme="dark").
   3. SEASONS       Each month only swaps --accent, --accent-2 and --accent-ink.
   4. Components    Everything below uses the tokens, never raw colours, so themes
                    and seasons work everywhere without extra rules.
   5. Looks         Glass and 1999 are blocks near the end, scoped to
                    :root[data-look="..."], that restyle components.

   The page state lives on <html> as attributes, set by a small script in
   index.html before the first paint (so there's no flash) and by app.js after:

     data-theme="light|dark"   absent = follow the device
     data-season="jan".."dec"  absent = seasons off
     data-look="glass|1999"    absent = the default modern look
     data-landing              present until the first search

   Adding a component: style it with tokens, then check it in light, dark and the
   three looks. If it needs to look different in 1999, add a rule to that block.
   ==================================================================== */

/* TOKENS */
:root {
   color-scheme: light;
   --bg: #EEF2F7;
   --surface: rgba(255, 255, 255, 0.66);
   --surface-strong: rgba(255, 255, 255, 0.86);
   --surface-solid: #FFFFFF;
   --ink: #0F1B2A;
   --muted: #566476;
   --line: rgba(15, 27, 42, 0.11);
   --edge: rgba(255, 255, 255, 0.85);
   --shadow: 0 1px 2px rgba(15, 27, 42, 0.04), 0 12px 32px rgba(15, 27, 42, 0.08);
   /* Behind product photos. Stays light in dark mode too, because most shop photos have white backgrounds */
   --photo-bg: #F3F5F8;
   --button: #0F1B2A;
   --button-ink: #FFFFFF;
   --link: #1E5BC6;
   --focus: #2E62C9;
   --backdrop: rgba(8, 14, 22, 0.38);
   --grade-n: #6B4FB8;
   --grade-a: #0B7A6B;
   --grade-b: #2E62C9;
   --grade-c: #A86F00;
   --grade-d: #A8412F;
   --grade-u: #6E7B8B;

   /* Accent pair; the seasons below swap these */
   --accent: #06B6D4;
   --accent-2: #3B6CF6;
   --accent-ink: #FFFFFF;

   --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   --hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;
   --radius: 16px;
   --radius-small: 10px;
   --glass: blur(22px) saturate(170%);
}

/* Dark follows the device unless the person picked light */
@media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
      color-scheme: dark;
      --bg: #080D14;
      --surface: rgba(22, 30, 42, 0.62);
      --surface-strong: rgba(26, 35, 49, 0.88);
      --surface-solid: #141C27;
      --ink: #E7EDF4;
      --muted: #95A3B4;
      --line: rgba(255, 255, 255, 0.09);
      --edge: rgba(255, 255, 255, 0.12);
      --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 40px rgba(0, 0, 0, 0.35);
      --photo-bg: #EEF1F4;
      --button: #E7EDF4;
      --button-ink: #080D14;
      --link: #86B4FF;
      --focus: #86B4FF;
      --backdrop: rgba(0, 0, 0, 0.55);
      --grade-n: #B09CF0;
      --grade-a: #3CC2AE;
      --grade-b: #86B4FF;
      --grade-c: #E8B54A;
      --grade-d: #EF8B78;
      --grade-u: #95A3B4;
   }
}

/* The same dark tokens again for someone who picked Dark. CSS can't share one block between a
   media query and an attribute selector, so keep the two dark blocks identical when editing */
:root[data-theme="dark"] {
   color-scheme: dark;
   --bg: #080D14;
   --surface: rgba(22, 30, 42, 0.62);
   --surface-strong: rgba(26, 35, 49, 0.88);
   --surface-solid: #141C27;
   --ink: #E7EDF4;
   --muted: #95A3B4;
   --line: rgba(255, 255, 255, 0.09);
   --edge: rgba(255, 255, 255, 0.12);
   --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 40px rgba(0, 0, 0, 0.35);
   --photo-bg: #EEF1F4;
   --button: #E7EDF4;
   --button-ink: #080D14;
   --link: #86B4FF;
   --focus: #86B4FF;
   --backdrop: rgba(0, 0, 0, 0.55);
   --grade-n: #B09CF0;
   --grade-a: #3CC2AE;
   --grade-b: #86B4FF;
   --grade-c: #E8B54A;
   --grade-d: #EF8B78;
   --grade-u: #95A3B4;
}

/* SEASONS: one accent pair per month, set on <html data-season> by the script in index.html */
:root[data-season="jan"] { --accent: #F5B400; --accent-2: #14B8A6; --accent-ink: #10202A; }
:root[data-season="feb"] { --accent: #F43F5E; --accent-2: #EC4899; }
:root[data-season="mar"] { --accent: #F97316; --accent-2: #B45309; }
:root[data-season="apr"] { --accent: #A78BFA; --accent-2: #34D399; --accent-ink: #1A1530; }
:root[data-season="may"] { --accent: #EC4899; --accent-2: #F59E0B; }
:root[data-season="jun"] { --accent: #38BDF8; --accent-2: #6366F1; }
:root[data-season="jul"] { --accent: #6366F1; --accent-2: #0EA5E9; }
:root[data-season="aug"] { --accent: #9333EA; --accent-2: #E879F9; }
:root[data-season="sep"] { --accent: #F97316; --accent-2: #16A34A; }
:root[data-season="oct"] { --accent: #F97316; --accent-2: #7C3AED; }
:root[data-season="nov"] { --accent: #FACC15; --accent-2: #334155; --accent-ink: #111827; }
:root[data-season="dec"] { --accent: #E11D48; --accent-2: #16A34A; }

/* BASE */
*,
*::before,
*::after {
   box-sizing: border-box;
}

html {
   -webkit-text-size-adjust: 100%;
}

body {
   min-height: 100vh;
   margin: 0;
   background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
      radial-gradient(60vw 55vh at 8% -12%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
      radial-gradient(55vw 50vh at 102% 4%, color-mix(in srgb, var(--accent-2) 24%, transparent), transparent 70%),
      radial-gradient(50vw 40vh at 50% 110%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
      var(--bg);
   /* Fixed, so the colour wash stays put while the list scrolls over it */
   background-attachment: fixed;
   color: var(--ink);
   font-family: var(--font);
   font-size: 15px;
   line-height: 1.45;
}

body.has-modal {
   overflow: hidden;
}

button,
input,
select {
   font: inherit;
   color: inherit;
}

a {
   color: inherit;
}

:focus-visible {
   outline: 2px solid var(--focus);
   outline-offset: 2px;
}

.visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
}

.sprite {
   position: absolute;
   width: 0;
   height: 0;
   overflow: hidden;
}

.icon {
   width: 20px;
   height: 20px;
   flex: none;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.8;
   stroke-linecap: round;
   stroke-linejoin: round;
}

/* Frosted panel with a lit top edge */
.topbar,
.source,
.filters,
.list,
.arrivals,
.menu-panel,
.sheet,
.season {
   background: var(--surface);
   border: 1px solid var(--line);
   box-shadow: inset 0 1px 0 var(--edge), var(--shadow);
   -webkit-backdrop-filter: var(--glass);
   backdrop-filter: var(--glass);
}

/* TOP BAR */
.topbar {
   position: sticky;
   top: 10px;
   z-index: 10;
   display: grid;
   grid-template-columns: auto auto minmax(0, 1fr) auto;
   align-items: center;
   gap: 14px;
   max-width: 1220px;
   margin: 10px auto 0;
   padding: 10px 12px 10px 14px;
   border-radius: 22px;
}

.brand {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   text-decoration: none;
}

.brand-logo {
   width: 34px;
   height: 34px;
   filter: drop-shadow(0 4px 10px color-mix(in srgb, #2F86F6 35%, transparent));
}

.brand-name {
   font-size: 25px;
   font-weight: 800;
   font-stretch: 112%;
   letter-spacing: -0.04em;
   line-height: 1;
}

.season {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 2px 12px 2px 8px;
   background: color-mix(in srgb, var(--accent) 18%, var(--surface-strong));
   border-radius: 8px;
   font-family: var(--hand);
   font-size: 19px;
   font-weight: 700;
   line-height: 1.3;
   white-space: nowrap;
   transform: rotate(-2deg);
}

.season[hidden] {
   display: none;
}

.season .icon {
   width: 17px;
   height: 17px;
   color: var(--accent);
   stroke-width: 2;
}

.search {
   display: flex;
   justify-self: center;
   width: 100%;
   max-width: 560px;
   padding: 4px;
   background: var(--surface-strong);
   border: 1px solid var(--line);
   border-radius: 999px;
}

.search:focus-within {
   border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
   box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

.search input {
   flex: 1;
   min-width: 0;
   height: 38px;
   padding: 0 14px;
   background: transparent;
   border: 0;

   /* 16px or more stops iPhones zooming the page in when the box is tapped */
   font-size: 16px;
}

.search input:focus-visible {
   outline: none;
}

.search button {
   height: 38px;
   padding: 0 18px;
   background: var(--button);
   color: var(--button-ink);
   border: 0;
   border-radius: 999px;
   font-weight: 700;
   cursor: pointer;
}

.actions {
   display: flex;
   align-items: center;
   gap: 6px;
}

.icon-button {
   display: inline-grid;
   place-items: center;
   width: 40px;
   height: 40px;
   padding: 0;
   background: transparent;
   border: 1px solid transparent;
   border-radius: 999px;
   color: var(--ink);
   cursor: pointer;
   list-style: none;
}

.icon-button::-webkit-details-marker {
   display: none;
}

.icon-button:hover,
.menu[open] > .icon-button {
   background: var(--surface-strong);
   border-color: var(--line);
}

/* Deal buttons look like a sticker slapped on the page: flat colour, ink outline, hard shadow */
.deal-button,
.deal-hero {
   position: relative;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: var(--accent);
   color: var(--accent-ink);
   border: 2px solid var(--ink);
   border-radius: 12px;
   box-shadow: 3px 3px 0 var(--ink);
   font-weight: 800;
   white-space: nowrap;
   cursor: pointer;
   transition: transform 0.12s, box-shadow 0.12s;
}

.deal-button {
   height: 40px;
   padding: 0 14px 0 11px;
   transform: rotate(-1.5deg);
}

.deal-button-short {
   display: none;
}

.deal-hero {
   margin: 4px 0 26px;
   padding: 13px 22px 13px 18px;
   font-size: 17px;
   transform: rotate(-1deg);
}

.deal-hero .icon {
   width: 22px;
   height: 22px;
}

.deal-button:hover,
.deal-hero:hover {
   box-shadow: 5px 5px 0 var(--ink);
   transform: translate(-2px, -2px) rotate(-1.5deg);
}

.deal-button:active,
.deal-hero:active {
   box-shadow: 1px 1px 0 var(--ink);
   transform: translate(2px, 2px);
}

/* THEME MENU */
.menu {
   position: relative;
}

.menu > summary {
   cursor: pointer;
}

.menu-panel {
   position: absolute;
   top: calc(100% + 8px);
   right: 0;
   z-index: 30;
   width: 270px;
   max-width: calc(100vw - 24px);
   padding: 14px;
   background: var(--surface-strong);
   border-radius: var(--radius);
}

.segmented {
   margin: 0 0 14px;
   padding: 0;
   border: 0;
}

.segmented legend {
   margin-bottom: 8px;
   padding: 0;
   font-size: 13px;
   font-weight: 700;
}

.segmented-track {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 3px;
   padding: 3px;
   background: color-mix(in srgb, var(--ink) 6%, transparent);
   border-radius: 12px;
}

.segmented label {
   position: relative;
   cursor: pointer;
}

.segmented input {
   position: absolute;
   opacity: 0;
}

.segmented span {
   display: block;
   padding: 6px 0;
   border-radius: 9px;
   font-size: 13px;
   text-align: center;
}

.segmented input:checked + span {
   background: var(--surface-solid);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
   font-weight: 700;
}

.segmented input:focus-visible + span {
   outline: 2px solid var(--focus);
}

/* SHOPS */
.sources {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   max-width: 1220px;
   margin: 0 auto;
   padding: 16px 20px 0;
}

.source {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 6px 12px 6px 10px;
   border-radius: 999px;
   font-size: 14px;
   cursor: pointer;
}

.source[aria-pressed="false"] {
   background: transparent;
   box-shadow: none;
   color: var(--muted);
   text-decoration: line-through;
}

.source-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: var(--site);
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--site) 22%, transparent);
}

.source-count {
   min-width: 1.5em;
   font-weight: 700;
   font-variant-numeric: tabular-nums;
   text-align: right;
}

.source.is-loading .source-count {
   animation: pulse 1s ease-in-out infinite;
}

.source.is-error {
   border-color: var(--grade-d);
}

.source.is-error .source-count {
   color: var(--grade-d);
}

.source.is-timeout .source-count {
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 0.04em;
}

/* A shop that just answered */
.source.just-arrived {
   animation: arrived 1.2s ease-out;
}

/* A shop whose results are waiting in the arrivals bar */
.source.has-pending {
   border-color: var(--focus);
}

@keyframes arrived {
   0% {
      border-color: var(--grade-a);
      box-shadow: 0 0 0 5px color-mix(in srgb, var(--grade-a) 30%, transparent);
   }

   100% {
      box-shadow: inset 0 1px 0 var(--edge), var(--shadow);
   }
}

@keyframes pulse {
   50% {
      opacity: 0.3;
   }
}

/* Results that came in while the list was being read */
.arrivals {
   position: fixed;
   left: 50%;
   bottom: 18px;
   z-index: 20;
   display: flex;
   align-items: center;
   gap: 14px;
   width: max-content;
   max-width: calc(100vw - 32px);
   padding: 10px 10px 10px 18px;
   background: var(--surface-strong);
   border-radius: 999px;
   transform: translateX(-50%);
}

.arrivals[hidden] {
   display: none;
}

.arrivals p {
   margin: 0;
}

.arrivals button {
   flex: none;
   padding: 8px 16px;
   background: var(--button);
   color: var(--button-ink);
   border: 0;
   border-radius: 999px;
   font-weight: 700;
   cursor: pointer;
}

.problems {
   max-width: 1220px;
   margin: 0 auto;
   padding: 8px 20px 0;
   color: var(--muted);
   font-size: 13px;
}

.problems p {
   margin: 2px 0;
}

/* LAYOUT */
.layout {
   display: grid;
   grid-template-columns: 240px minmax(0, 1fr);
   gap: 28px;
   max-width: 1220px;
   margin: 0 auto;
   padding: 22px 20px 56px;
}

/* FILTERS: stick beside the results on wide screens and scroll on their own when taller than the window */
.filters {
   position: sticky;
   top: 92px;
   align-self: start;
   max-height: calc(100vh - 110px);
   overflow-y: auto;
   padding: 18px 16px 16px;
   border-radius: var(--radius);
   scrollbar-width: thin;
}

.filters summary {
   display: none;
}

.filter-group {
   margin: 0 0 20px;
   padding: 0;
   border: 0;
}

.filter-title {
   display: block;
   margin-bottom: 8px;
   padding: 0;
   font-weight: 700;
   font-size: 13px;
   letter-spacing: 0.01em;
}

.filters select,
.money-input {
   width: 100%;
   height: 40px;
   background: var(--surface-strong);
   border: 1px solid var(--line);
   border-radius: var(--radius-small);
}

.filters select {
   padding: 0 10px;
}

.money-input {
   display: flex;
   align-items: center;
   padding-left: 12px;
   color: var(--muted);
}

.money-input input {
   flex: 1;
   min-width: 0;
   height: 100%;
   padding: 0 10px 0 6px;
   background: transparent;
   border: 0;
   font-variant-numeric: tabular-nums;
}

.money-input:focus-within {
   border-color: var(--focus);
}

.money-input input:focus-visible {
   outline: none;
}

.option-list {
   display: grid;
   gap: 5px;
}

.option {
   display: flex;
   align-items: center;
   gap: 9px;
   font-size: 14px;
   cursor: pointer;
}

.option input,
.toggle input {
   width: 16px;
   height: 16px;
   margin: 0;
   accent-color: var(--accent-2);
}

.option-mark {
   display: inline-grid;
   place-items: center;
   width: 20px;
   height: 20px;
   border: 1.5px solid currentColor;
   border-radius: 5px;
   font-size: 12px;
   font-weight: 800;
}

.option-count {
   margin-left: auto;
   color: var(--muted);
   font-variant-numeric: tabular-nums;
}

.option.is-empty {
   color: var(--muted);
}

.option.is-indented {
   padding-left: 25px;
}

.option-group {
   margin-top: 4px;
   font-weight: 700;
}

.option-group:first-child {
   margin-top: 0;
}

.filter-empty {
   margin: 0;
   color: var(--muted);
   font-size: 13px;
}

.filter-note {
   margin: 6px 0 0;
   color: var(--muted);
   font-size: 12px;
}

.facet-more {
   margin-top: 6px;
   font-size: 13px;
}

.storage-list {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
}

.chip {
   padding: 4px 11px;
   background: var(--surface-strong);
   border: 1px solid var(--line);
   border-radius: 999px;
   font-size: 13px;
   cursor: pointer;
}

.chip[aria-pressed="true"] {
   background: var(--button);
   border-color: var(--button);
   color: var(--button-ink);
}

.toggle {
   display: flex;
   align-items: center;
   gap: 9px;
   margin-bottom: 16px;
   font-size: 14px;
   cursor: pointer;
}

.menu-field {
   display: grid;
   gap: 8px;
   font-size: 13px;
   font-weight: 700;
}

.menu-field select {
   width: 100%;
   height: 36px;
   padding: 0 8px;
   background: var(--surface-solid);
   border: 1px solid var(--line);
   border-radius: var(--radius-small);
   font-size: 13px;
   font-weight: 400;
}

.link-button {
   padding: 0;
   background: none;
   border: 0;
   color: var(--link);
   font-size: 14px;
   text-decoration: underline;
   text-underline-offset: 3px;
   cursor: pointer;
}

/* RESULTS */
.summary {
   min-height: 1.45em;
   margin: 2px 0 12px;
   color: var(--muted);
}

.summary strong {
   color: var(--ink);
}

.list {
   margin: 0;
   padding: 0;
   list-style: none;
   border-radius: var(--radius);
}

.list:empty {
   display: none;
}

.row {
   display: grid;
   grid-template-columns: 124px minmax(0, 1fr) auto;
   gap: 20px;
   padding: 18px 20px;
   border-top: 1px solid var(--line);
   transition: background-color 0.15s;
}

.row:first-child {
   border-top: 0;
}

.row:hover {
   background: color-mix(in srgb, var(--surface-solid) 45%, transparent);
}

.row:first-child:hover {
   border-radius: var(--radius) var(--radius) 0 0;
}

.row:last-child:hover {
   border-radius: 0 0 var(--radius) var(--radius);
}

.row.is-soldout {
   opacity: 0.55;
}

/* The grade stamp sits on the corner of the photo, like a QC sticker on a refurbished box */
.row-photo {
   position: relative;
   width: 124px;
   height: 124px;
   padding: 0;
   background: var(--photo-bg);
   border: 0;
   border-radius: 12px;
   cursor: zoom-in;
}

.row-photo img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   border-radius: 12px;

   /* Makes the white around product shots melt into the photo tile instead of showing as a box */
   mix-blend-mode: multiply;
}

.row-nophoto {
   display: grid;
   place-items: center;
   height: 100%;

   /* A fixed grey, not a token: the photo tile stays light in dark mode too */
   color: #6E7B8B;
   font-size: 13px;
}

.stamp {
   position: absolute;
   top: -8px;
   left: -8px;
   display: grid;
   place-items: center;
   width: 40px;
   height: 40px;
   background: var(--surface-solid);
   border: 2.5px solid currentColor;
   border-radius: 8px;
   box-shadow: 0 0 0 3px var(--surface-solid);
   font-size: 21px;
   font-weight: 800;
   font-stretch: 85%;
   line-height: 1;
   transform: rotate(-7deg);
}

.grade-N {
   color: var(--grade-n);
}

.grade-A {
   color: var(--grade-a);
}

.grade-B {
   color: var(--grade-b);
}

.grade-C {
   color: var(--grade-c);
}

.grade-D {
   color: var(--grade-d);
}

.grade-U {
   color: var(--grade-u);
}

.row-body {
   min-width: 0;
}

.row-title {
   display: block;
   font-size: 16px;
   font-weight: 600;
   line-height: 1.3;
   text-decoration: none;
}

.row-title:hover {
   text-decoration: underline;
   text-underline-offset: 3px;
}

.row-facts {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin-top: 9px;
}

.fact {
   padding: 2px 9px;
   background: color-mix(in srgb, var(--ink) 4%, transparent);
   border: 1px solid var(--line);
   border-radius: 999px;
   font-size: 13px;
   white-space: nowrap;
}

.fact-grade {
   border-color: currentColor;
   font-weight: 700;
}

.fact-grade small {
   font-weight: 400;
   opacity: 0.85;
}

.row-notes {
   margin: 8px 0 0;
   color: var(--muted);
   font-size: 13px;
}

.row-shop {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 7px;
   margin-top: 10px;
   color: var(--muted);
   font-size: 13px;
}

.row-shop .source-dot {
   flex: none;
}

/* Trust rating badges on cards and details */
.trust-badge {
   display: inline-flex;
   align-items: center;
   gap: 3px;
   padding: 1px 7px;
   border-radius: 999px;
   font-size: 11px;
   font-weight: 700;
   line-height: 1.45;
   letter-spacing: 0.01em;
   white-space: nowrap;
   cursor: help;
   user-select: none;
}

.trust-badge.is-trusted {
   color: var(--grade-a);
   background: color-mix(in srgb, var(--grade-a) 12%, transparent);
   border: 1px solid color-mix(in srgb, var(--grade-a) 28%, transparent);
}

.trust-badge.is-established {
   color: var(--muted);
   background: color-mix(in srgb, var(--ink) 5%, transparent);
   border: 1px solid var(--line);
}

.trust-badge.is-caution {
   color: var(--grade-c);
   background: color-mix(in srgb, var(--grade-c) 14%, transparent);
   border: 1px solid color-mix(in srgb, var(--grade-c) 35%, transparent);
}

.trust-badge.is-warning {
   color: var(--grade-d);
   background: color-mix(in srgb, var(--grade-d) 14%, transparent);
   border: 1px solid color-mix(in srgb, var(--grade-d) 35%, transparent);
}

.soldout {
   color: var(--grade-d);
   font-weight: 700;
}

.row-price {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 2px;
   text-align: right;
}

.price {
   font-size: 28px;
   font-weight: 700;
   font-stretch: 72%;
   line-height: 1.05;
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
}

.price-from {
   display: block;
   color: var(--muted);
   font-size: 12px;
   font-weight: 400;
   font-stretch: 100%;
}

.price-was {
   color: var(--muted);
   font-size: 13px;
   text-decoration: line-through;
   font-variant-numeric: tabular-nums;
}

.row-price .link-button {
   margin-top: auto;
   padding-top: 10px;
}

/* EMPTY STATES */
.empty {
   max-width: 660px;
   padding: 28px 0;
}

.empty h1 {
   margin: 0 0 12px;
   font-size: 46px;
   font-weight: 800;
   font-stretch: 78%;
   line-height: 1.02;
   letter-spacing: -0.02em;
}

.empty p {
   margin: 0 0 22px;
   max-width: 54ch;
   color: var(--muted);
   font-size: 17px;
}

.empty ul {
   margin: 0;
   padding-left: 18px;
   color: var(--muted);
}

.empty li {
   margin-bottom: 10px;
}

.example {
   padding: 2px 10px;
   background: var(--surface-strong);
   border: 1px solid var(--line);
   border-radius: 999px;
   color: var(--ink);
   cursor: pointer;
}

/* FOOTER */
.footer {
   max-width: 760px;
   margin: 0 auto;
   padding: 8px 20px 40px;
   color: var(--muted);
   font-size: 13px;
   text-align: center;
}

.footer p {
   margin: 0 0 6px;
}

.footer .link-button {
   font-size: 13px;
}

.made {
   margin-top: 14px !important;
   font-family: var(--hand);
   font-size: 20px;
   transform: rotate(-1deg);
}

.made span {
   color: var(--accent);
}

/* SHEETS (help and deal dialogs) */
.sheet {
   width: min(680px, calc(100vw - 24px));
   max-height: min(86vh, 900px);
   padding: 0;
   background: var(--surface-strong);
   border-radius: 24px;
   color: var(--ink);
}

/* Only style the open state: a closed <dialog> must keep the browser's display: none */
.sheet[open] {
   display: flex;
   flex-direction: column;
   animation: sheet-in 0.22s ease-out;
}

.sheet::backdrop {
   background: var(--backdrop);
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
}

@keyframes sheet-in {
   from {
      opacity: 0;
      transform: translateY(12px) scale(0.98);
   }
}

.sheet-head {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 16px 14px 10px 24px;
}

.sheet-head h2 {
   flex: 1;
   margin: 0;
   font-size: 22px;
   font-weight: 800;
   font-stretch: 85%;
   letter-spacing: -0.01em;
}

.sheet-body {
   overflow-y: auto;
   padding: 4px 24px 24px;
}

.prose h3 {
   margin: 20px 0 6px;
   font-size: 15px;
}

.prose h3:first-child {
   margin-top: 4px;
}

.prose p {
   margin: 0 0 10px;
   color: var(--muted);
}

/* DEAL FINDER */
.deal-progress {
   padding: 28px 0 12px;
   text-align: center;
}

.deal-progress p {
   margin: 14px 0 0;
   color: var(--muted);
}

.deal-orb {
   width: 64px;
   height: 64px;
   margin: 0 auto;
   background: conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--accent));
   border-radius: 50%;
   -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%);
   mask: radial-gradient(circle, transparent 54%, #000 56%);
   animation: spin 1.1s linear infinite;
}

@keyframes spin {
   to {
      transform: rotate(1turn);
   }
}

.meter {
   height: 6px;
   margin-top: 16px;
   overflow: hidden;
   background: color-mix(in srgb, var(--ink) 8%, transparent);
   border-radius: 999px;
}

.meter span {
   display: block;
   height: 100%;
   background: linear-gradient(90deg, var(--accent), var(--accent-2));
   border-radius: inherit;
   transition: width 0.3s;
}

.deal-card {
   display: grid;
   grid-template-columns: 200px minmax(0, 1fr);
   gap: 22px;
}

.deal-photo {
   position: relative;
   aspect-ratio: 1;
   background: var(--photo-bg);
   border-radius: 18px;
}

.deal-photo img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   border-radius: 18px;
   mix-blend-mode: multiply;
}

.deal-verdict {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   margin-bottom: 10px;
   padding: 3px 12px 3px 9px;
   border: 2.5px solid currentColor;
   border-radius: 6px;
   color: var(--grade-d);
   font-size: 14px;
   font-weight: 800;
   font-stretch: 85%;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   transform: rotate(-3deg);
}

.deal-verdict .icon {
   width: 16px;
   height: 16px;
}

.deal-title {
   margin: 0;
   font-size: 20px;
   font-weight: 700;
   line-height: 1.25;
}

.deal-prices {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   gap: 4px 12px;
   margin: 12px 0 4px;
}

.deal-prices .price {
   font-size: 38px;
}

.deal-saving {
   color: var(--grade-a);
   font-weight: 700;
}

.deal-typical {
   margin: 0;
   color: var(--muted);
   font-size: 14px;
}

.deal-reasons {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin: 14px 0 0;
   padding: 0;
   list-style: none;
}

.deal-shop {
   display: flex;
   align-items: center;
   gap: 7px;
   margin-top: 12px;
   color: var(--muted);
   font-size: 13px;
}

.deal-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-top: 22px;
}

.button {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   height: 42px;
   padding: 0 18px;
   background: var(--surface-solid);
   border: 1px solid var(--line);
   border-radius: 999px;
   color: var(--ink);
   font-weight: 700;
   text-decoration: none;
   cursor: pointer;
}

.button-primary {
   background: var(--button);
   border-color: var(--button);
   color: var(--button-ink);
}

.deal-note {
   margin: 18px 0 0;
   color: var(--muted);
   font-size: 12px;
}

/* SEASONAL DOODLES: the month's icon, big and faint, roughened to look hand-drawn (filter #wobble in
   index.html). z-index -1 puts them behind the page; this works because <html> itself has no background */
.doodles {
   position: fixed;
   inset: 0;
   z-index: -1;
   overflow: hidden;
   pointer-events: none;
}

.doodle {
   position: absolute;
   fill: none;
   stroke: var(--accent);
   stroke-width: 1.1;
   stroke-linecap: round;
   stroke-linejoin: round;
   opacity: 0.22;
   filter: url(#wobble);
}

/* Bits that only show in one view */
.masthead,
.dateline,
.ticker,
.nineties,
.landing-note {
   display: none;
}

/* LANDING: nothing searched yet, so the search is the whole page.
   Keyed on <html> rather than <body> because the head script sets it before <body> exists */
:root[data-landing] .topbar {
   /* Static, so the help and theme buttons below are placed against the page, not this box */
   position: static;
   top: 0;
   grid-template-columns: minmax(0, 1fr);
   justify-items: center;
   gap: 16px;
   max-width: 720px;
   margin: 15vh auto 0;
   padding: 0 16px;
   background: transparent;
   border-color: transparent;
   box-shadow: none;
   -webkit-backdrop-filter: none;
   backdrop-filter: none;
}

:root[data-landing] .brand-logo {
   width: 64px;
   height: 64px;
}

:root[data-landing] .brand-name {
   font-size: 64px;
}

:root[data-landing] .season {
   padding: 2px 14px 2px 10px;
}

:root[data-landing] .season span {
   display: inline;
}

:root[data-landing] .landing-note {
   display: flex;
   align-items: flex-end;
   gap: 4px;
   justify-self: start;
   max-width: 100%;
   margin: 14px 0 -18px 12%;
   font-family: var(--hand);
   font-size: 24px;
   font-weight: 700;
   line-height: 1;
   transform: rotate(-3deg);
}

.landing-arrow {
   width: 46px;
   height: 46px;
   margin-bottom: -26px;
   fill: none;
   stroke: currentColor;
   stroke-width: 2.4;
   stroke-linecap: round;
   transform: scaleX(-1) rotate(-20deg);
}

:root[data-landing] .search {
   max-width: 680px;
   padding: 6px;
   box-shadow: inset 0 1px 0 var(--edge), var(--shadow);
}

:root[data-landing] .search input {
   height: 52px;
   padding: 0 20px;
   font-size: 19px;
}

:root[data-landing] .search button {
   height: 52px;
   padding: 0 26px;
   font-size: 17px;
}

:root[data-landing] .actions {
   /* Top-right of the page; absolute rather than fixed so they scroll away instead of covering the footer */
   position: absolute;
   top: 14px;
   right: 16px;
}

:root[data-landing] .deal-button,
:root[data-landing] .sources,
:root[data-landing] .problems,
:root[data-landing] .filters,
:root[data-landing] .summary,
:root[data-landing] .list,
:root[data-landing] .empty h1 {
   display: none;
}

:root[data-landing] .layout {
   grid-template-columns: 1fr;
   padding-top: 10px;
}

:root[data-landing] .empty {
   margin: 0 auto;
   text-align: center;
}

:root[data-landing] .empty p {
   margin-left: auto;
   margin-right: auto;
}

:root[data-landing] .empty ul {
   padding: 0;
   list-style: none;
}

/* CLICKABLE CARDS: the whole card opens the listing sheet */
.row {
   cursor: pointer;
}

.row:hover .row-title {
   text-decoration: underline;
   text-underline-offset: 3px;
}

/* LISTING SHEET: photos beside the facts on wide screens, stacked on phones */
.sheet-item {
   width: min(980px, calc(100vw - 24px));
}

.sheet-item .sheet-head h2 {
   display: -webkit-box;
   overflow: hidden;
   font-size: 19px;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}

.item-top {
   display: grid;
   grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
   gap: 24px;
   align-items: start;
}

.item-price {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   gap: 4px 12px;
   margin-bottom: 4px;
}

.item-price .price {
   font-size: 40px;
}

.item-info .row-facts {
   margin-top: 12px;
}

/* Shop trust & reputation card in the listing sheet */
.item-trust {
   margin-top: 22px;
   padding: 14px 16px;
   border-radius: var(--radius-small);
   background: color-mix(in srgb, var(--surface-strong) 80%, transparent);
   border: 1px solid var(--line);
}

.item-trust.is-trusted {
   border-color: color-mix(in srgb, var(--grade-a) 35%, var(--line));
   background: color-mix(in srgb, var(--grade-a) 6%, var(--surface-strong));
}

.item-trust.is-caution {
   border-color: color-mix(in srgb, var(--grade-c) 45%, var(--line));
   background: color-mix(in srgb, var(--grade-c) 7%, var(--surface-strong));
}

.item-trust.is-warning {
   border-color: color-mix(in srgb, var(--grade-d) 50%, var(--line));
   background: color-mix(in srgb, var(--grade-d) 8%, var(--surface-strong));
}

.item-trust-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 6px;
}

.item-trust-title {
   margin: 0;
   font-size: 14px;
   font-weight: 700;
   color: var(--ink);
}

.item-trust-sources {
   margin: 0 0 4px;
   font-size: 13px;
   font-weight: 600;
   color: var(--ink);
}

.item-trust-summary {
   margin: 0;
   font-size: 13px;
   line-height: 1.45;
   color: var(--muted);
}

.item-trust-link {
   margin: 8px 0 0;
   font-size: 12px;
}

.item-trust-link a {
   color: var(--link);
   font-weight: 600;
   text-decoration: none;
}

.item-trust-link a:hover {
   text-decoration: underline;
}

.item-section {
   margin-top: 26px;
}

.item-section h3 {
   margin: 0 0 8px;
   font-size: 15px;
}

/* The shop's text keeps its own line breaks and bullets */
.item-description {
   margin: 0;
   color: var(--muted);
   white-space: pre-line;
}

.spec-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 14px;
}

.spec-table th,
.spec-table td {
   padding: 7px 0;
   border-top: 1px solid var(--line);
   text-align: left;
   vertical-align: top;
}

.spec-table th {
   width: 38%;
   padding-right: 12px;
   color: var(--muted);
   font-weight: 600;
}

/* CAROUSEL: a native scroll-snap strip, so phones swipe without any script; arrows and thumbnails drive it on desktop */
.carousel {
   min-width: 0;
}

.carousel-stage {
   position: relative;
}

.carousel-track {
   display: flex;
   overflow-x: auto;
   aspect-ratio: 1;
   background: var(--photo-bg);
   border-radius: 18px;
   scroll-snap-type: x mandatory;
   scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar {
   display: none;
}

.slide {
   display: grid;
   place-items: center;
   flex: 0 0 100%;
   margin: 0;
   overflow: hidden;
   scroll-snap-align: center;
}

.slide img {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
   mix-blend-mode: multiply;
   cursor: zoom-in;
   transition: transform 0.2s;
}

/* Zoomed: twice the size, centred on the pointer (set from JS as --zoom-x and --zoom-y) */
.slide.is-zoomed img {
   cursor: zoom-out;
   transform: scale(2.2);
   transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
}

.carousel-nav {
   position: absolute;
   top: 50%;
   display: grid;
   place-items: center;
   width: 40px;
   height: 40px;
   padding: 0 0 3px;
   background: var(--surface-strong);
   border: 1px solid var(--line);
   border-radius: 999px;
   box-shadow: var(--shadow);
   color: var(--ink);
   font-size: 26px;
   line-height: 1;
   cursor: pointer;
   transform: translateY(-50%);
}

.carousel-nav:disabled {
   opacity: 0;
   pointer-events: none;
}

.carousel-prev {
   left: 10px;
}

.carousel-next {
   right: 10px;
}

.carousel-count {
   position: absolute;
   right: 12px;
   bottom: 12px;
   padding: 2px 9px;
   background: rgba(0, 0, 0, 0.55);
   border-radius: 999px;
   color: #FFFFFF;
   font-size: 12px;
   font-variant-numeric: tabular-nums;
}

.carousel-count:empty {
   display: none;
}

.carousel-thumbs {
   display: flex;
   gap: 8px;
   margin-top: 10px;
   padding-bottom: 2px;
   overflow-x: auto;
   scrollbar-width: thin;
}

.thumb {
   flex: none;
   width: 58px;
   height: 58px;
   padding: 0;
   background: var(--photo-bg);
   border: 2px solid transparent;
   border-radius: 10px;
   cursor: pointer;
   opacity: 0.65;
}

.thumb img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   border-radius: 8px;
   mix-blend-mode: multiply;
}

.thumb[aria-current="true"] {
   border-color: var(--accent-2);
   opacity: 1;
}

.carousel-hint {
   margin: 6px 0 0;
   color: var(--muted);
   font-size: 12px;
}

.carousel.is-empty {
   display: grid;
   place-items: center;
   aspect-ratio: 1;
   padding: 24px;
   background: var(--photo-bg);
   border-radius: 18px;
   color: #6E7B8B;
   text-align: center;
}

/* The deal card's photo is a button that opens the listing sheet */
button.deal-photo {
   padding: 0;
   border: 0;
   cursor: zoom-in;
}

/* MEDIUM SCREENS: the season badge gives way to the search */
@media (max-width: 1080px) {
   .season {
      padding: 7px;
   }

   .season span {
      display: none;
   }
}

/* SMALL SCREENS */
@media (max-width: 820px) {
   .topbar {
      top: 0;
      grid-template-columns: auto auto 1fr;
      gap: 10px;
      margin: 0;
      padding: 10px 12px;
      border-width: 0 0 1px;
      border-radius: 0;
   }

   .search {
      grid-column: 1 / -1;
      grid-row: 2;
      max-width: none;
   }

   .actions {
      justify-self: end;
   }

   .deal-button-long {
      display: none;
   }

   .deal-button-short {
      display: inline;
   }

   .sources,
   .problems {
      padding-left: 16px;
      padding-right: 16px;
   }

   /* One row that scrolls sideways, so a long shop list doesn't push the results down */
   .sources {
      flex-wrap: nowrap;
      overflow-x: auto;
      padding-bottom: 4px;
      scrollbar-width: none;
   }

   .sources::-webkit-scrollbar {
      display: none;
   }

   .source {
      flex: none;
   }

   .layout {
      grid-template-columns: 1fr;
      gap: 16px;
      padding: 14px 16px 40px;
   }

   .filters {
      position: static;
      max-height: none;
      padding: 12px 14px;
   }

   .filters summary {
      display: list-item;
      font-weight: 700;
      cursor: pointer;
   }

   .filters[open] summary {
      margin-bottom: 14px;
   }

   .row {
      grid-template-columns: 92px minmax(0, 1fr);
      gap: 14px;
      padding: 16px 14px;
   }

   .row-photo {
      width: 92px;
      height: 92px;
   }

   .stamp {
      width: 34px;
      height: 34px;
      font-size: 18px;
   }

   .row-price {
      grid-column: 2;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 4px 10px;
      text-align: left;
   }

   .row-price .link-button {
      margin: 0 0 0 auto;
      padding: 0;
   }

   .price {
      font-size: 24px;
   }

   .price-from {
      display: inline;
   }

   .empty h1 {
      font-size: 34px;
   }

   .sheet {
      max-height: 92vh;
   }

   .sheet-body {
      padding: 4px 18px 20px;
   }

   .deal-card {
      grid-template-columns: 1fr;
   }

   .deal-photo {
      max-width: 220px;
   }

   /* minmax(0, ...) so a long row of thumbnails can't stretch the column past the sheet */
   .item-top {
      grid-template-columns: minmax(0, 1fr);
   }
}

/* The sparkle icon only belongs to the glass look */
.icon-spark {
   display: none;
}

/* ====================================================================
   GLASS: the clean first version, kept as a look of its own. Glossy gradient
   pills, the sparkle, and none of the hand-made touches. <html data-look="glass">
   ==================================================================== */
:root[data-look="glass"] body {
   background:
      radial-gradient(60vw 55vh at 8% -12%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
      radial-gradient(55vw 50vh at 102% 4%, color-mix(in srgb, var(--accent-2) 24%, transparent), transparent 70%),
      radial-gradient(50vw 40vh at 50% 110%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
      var(--bg);
   background-attachment: fixed;
}

:root[data-look="glass"] .doodles,
:root[data-look="glass"] .landing-note,
:root[data-look="glass"] .made,
:root[data-look="glass"] .icon-deal {
   display: none;
}

:root[data-look="glass"] .icon-spark {
   display: inline-block;
}

:root[data-look="glass"] .season {
   padding: 5px 11px 5px 8px;
   background: var(--surface);
   border-radius: 999px;
   font-family: var(--font);
   font-size: 13px;
   font-weight: 600;
   line-height: 1.45;
   transform: none;
}

:root[data-look="glass"] .deal-button,
:root[data-look="glass"] .deal-hero,
:root[data-look="glass"] .deal-verdict {
   overflow: hidden;
   background: linear-gradient(135deg, var(--accent), var(--accent-2));
   color: var(--accent-ink);
   border: 0;
   border-radius: 999px;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 22px color-mix(in srgb, var(--accent) 35%, transparent);
   font-weight: 700;
   transform: none;
}

/* The glossy top half */
:root[data-look="glass"] .deal-button::after,
:root[data-look="glass"] .deal-hero::after {
   content: "";
   position: absolute;
   inset: 0 0 50% 0;
   background: linear-gradient(rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
   pointer-events: none;
}

:root[data-look="glass"] .deal-button {
   padding: 0 16px 0 13px;
}

:root[data-look="glass"] .deal-hero {
   padding: 14px 24px 14px 20px;
}

:root[data-look="glass"] .deal-button:hover,
:root[data-look="glass"] .deal-hero:hover,
:root[data-look="glass"] .deal-button:active,
:root[data-look="glass"] .deal-hero:active {
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 22px color-mix(in srgb, var(--accent) 35%, transparent);
   filter: brightness(1.06) saturate(1.1);
   transform: none;
}

:root[data-look="glass"] .deal-verdict {
   padding: 4px 12px 4px 9px;
   font-size: 13px;
   font-stretch: 100%;
   letter-spacing: 0.02em;
}

/* NARROW PHONES (iPhone SE, budget Androids): the deal button becomes an icon so the top row fits */
@media (max-width: 400px) {
   .topbar {
      gap: 6px;
   }

   .actions {
      gap: 2px;
   }

   .deal-button {
      justify-content: center;
      width: 40px;
      padding: 0;
   }

   .deal-button-short {
      display: none;
   }

   .icon-button {
      width: 36px;
   }
}

@media (prefers-reduced-motion: reduce) {
   .source.is-loading .source-count,
   .source.just-arrived,
   .sheet[open],
   .deal-orb {
      animation: none;
   }
}

/* Older browsers without backdrop blur get solid panels so text stays readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
   :root {
      --surface: var(--surface-solid);
      --surface-strong: var(--surface-solid);
   }
}

/* LANDING ON PHONES */
@media (max-width: 820px) {
   :root[data-landing] .topbar {
      margin-top: 9vh;
   }

   :root[data-landing] .search {
      grid-row: auto;
   }

   :root[data-landing] .brand-logo {
      width: 48px;
      height: 48px;
   }

   :root[data-landing] .brand-name {
      font-size: 48px;
   }

   :root[data-landing] .landing-note {
      margin-left: 4%;
      font-size: 21px;
   }
}

/* ====================================================================
   1999: the whole site as a newspaper classifieds page, with the home-made
   web of the late 90s around it (blue links, grey bevelled buttons, a ticker,
   a visitor counter). Switched on by <html data-look="1999">.

   This block must stay at the end of the file: its selectors have the same
   specificity as the dark-theme and season rules, so it only wins by coming later.
   Every token is overridden, so it looks the same whatever theme is picked.
   ==================================================================== */
:root[data-look="1999"] {
   color-scheme: light;
   --bg: #F2ECDB;
   --surface: #FBF7EA;
   --surface-strong: #FBF7EA;
   --surface-solid: #FBF7EA;
   --ink: #171612;
   --muted: #4B473D;
   --line: #171612;
   --edge: transparent;
   --shadow: none;
   --photo-bg: #FBF7EA;
   --button: #171612;
   --button-ink: #FBF7EA;
   --link: #0000EE;
   --focus: #0000EE;
   --backdrop: rgba(23, 22, 18, 0.45);
   --grade-n: #4B2E83;
   --grade-a: #1D5E2E;
   --grade-b: #1E3A8A;
   --grade-c: #7A5200;
   --grade-d: #A11D1D;
   --grade-u: #4B473D;
   --font: "Old Standard TT", Georgia, "Times New Roman", serif;
   --paper-type: "Special Elite", "Courier New", monospace;
   --blackletter: "UnifrakturMaguntia", "Old English Text MT", serif;
   --nineties: Tahoma, Verdana, "MS Sans Serif", sans-serif;
   --radius: 0;
   --radius-small: 0;
   --glass: none;
}

:root[data-look="1999"] body {
   background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E"),
      var(--bg);
   font-size: 15px;
}

:root[data-look="1999"] .doodles,
:root[data-look="1999"] .landing-note,
:root[data-look="1999"] .brand-logo,
:root[data-look="1999"] .brand-name,
:root[data-look="1999"] .season .icon,
:root[data-look="1999"] .look-link,
:root[data-look="1999"] .made {
   display: none;
}

/* Flat paper everywhere: no blur, no shadows, no rounding */
:root[data-look="1999"] .topbar,
:root[data-look="1999"] .source,
:root[data-look="1999"] .filters,
:root[data-look="1999"] .list,
:root[data-look="1999"] .season {
   background: transparent;
   border: 0;
   border-radius: 0;
   box-shadow: none;
   -webkit-backdrop-filter: none;
   backdrop-filter: none;
}

/* MASTHEAD */
:root[data-look="1999"] .topbar,
:root[data-look="1999"][data-landing] .topbar {
   position: static;
   grid-template-columns: minmax(0, 1fr) auto;
   justify-items: stretch;
   gap: 10px 14px;
   max-width: 1100px;
   margin: 18px auto 0;
   padding: 0 16px;
}

:root[data-look="1999"] .brand {
   grid-column: 1 / -1;
   justify-self: center;
}

:root[data-look="1999"] .masthead {
   display: block;
   font-family: var(--blackletter);
   font-size: clamp(38px, 8vw, 86px);
   line-height: 1;
   text-align: center;
}

:root[data-look="1999"] .season {
   grid-column: 1 / -1;
   justify-self: center;
   padding: 0;
   font-family: var(--font);
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   transform: none;
}

:root[data-look="1999"] .season span {
   display: inline;
}

:root[data-look="1999"] .season::before {
   content: "\2605  Special edition: ";
}

:root[data-look="1999"] .dateline {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 4px 16px;
   grid-column: 1 / -1;
   margin: 0;
   padding: 5px 0;
   border-top: 1px solid var(--ink);
   border-bottom: 4px double var(--ink);
   font-size: 12px;
   font-style: italic;
   letter-spacing: 0.06em;
   text-transform: uppercase;
}

/* "WANTED:" form field and a grey bevelled button */
:root[data-look="1999"] .search,
:root[data-look="1999"][data-landing] .search {
   grid-column: 1;
   grid-row: auto;
   align-items: center;
   max-width: none;
   padding: 4px;
   background: var(--surface);
   border: 2px solid var(--ink);
   border-radius: 0;
   box-shadow: none;
}

:root[data-look="1999"] .search::before {
   content: "WANTED:";
   padding: 0 4px 0 8px;
   font-family: var(--paper-type);
   font-size: 17px;
}

:root[data-look="1999"] .search input {
   height: 40px;
   font-family: var(--paper-type);
   font-size: 17px;
}

:root[data-look="1999"] .search button,
:root[data-look="1999"] .icon-button,
:root[data-look="1999"] .arrivals button,
:root[data-look="1999"] .button {
   height: 36px;
   padding: 0 14px;
   background: #C0C0C0;
   color: #000000;
   border: 2px outset #FFFFFF;
   border-radius: 0;
   box-shadow: 1px 1px 0 #000000;
   font-family: var(--nineties);
   font-size: 13px;
   font-weight: 400;
}

:root[data-look="1999"] .search button:active,
:root[data-look="1999"] .icon-button:active,
:root[data-look="1999"] .button:active {
   border-style: inset;
}

:root[data-look="1999"] .icon-button {
   width: 36px;
   padding: 0;
}

:root[data-look="1999"] .actions,
:root[data-look="1999"][data-landing] .actions {
   position: static;
}

/* The deal button as a supermarket "SALE!" starburst */
:root[data-look="1999"] .deal-button,
:root[data-look="1999"] .deal-hero {
   height: auto;
   padding: 16px 22px;
   background: #FFE600;
   color: #B00000;
   border: 0;
   border-radius: 0;
   box-shadow: none;
   font-family: var(--font);
   font-size: 13px;
   font-weight: 700;
   text-transform: uppercase;
   clip-path: polygon(50% 0%, 57% 12%, 69% 4%, 71% 18%, 85% 15%, 81% 29%, 95% 32%, 87% 43%, 100% 50%, 87% 57%, 95% 68%, 81% 71%, 85% 85%, 71% 82%, 69% 96%, 57% 88%, 50% 100%, 43% 88%, 31% 96%, 29% 82%, 15% 85%, 19% 71%, 5% 68%, 13% 57%, 0% 50%, 13% 43%, 5% 32%, 19% 29%, 15% 15%, 29% 18%, 31% 4%, 43% 12%);
   transform: rotate(-6deg);
}

:root[data-look="1999"] .deal-hero {
   margin: 6px 0 22px;
   padding: 30px 46px;
   font-size: 16px;
}

:root[data-look="1999"] .deal-button:hover,
:root[data-look="1999"] .deal-hero:hover {
   box-shadow: none;
   transform: rotate(-3deg) scale(1.04);
}

/* Theme menu as a Windows 98 dialog */
:root[data-look="1999"] .menu-panel {
   padding: 0 12px 12px;
   background: #C0C0C0;
   border: 2px outset #FFFFFF;
   border-radius: 0;
   box-shadow: 2px 2px 0 #000000;
   -webkit-backdrop-filter: none;
   backdrop-filter: none;
   color: #000000;
   font-family: var(--nineties);
}

:root[data-look="1999"] .menu-panel::before {
   content: "Display Properties";
   display: block;
   margin: 0 -12px 12px;
   padding: 3px 6px;
   background: linear-gradient(90deg, #000080, #1084D0);
   color: #FFFFFF;
   font-size: 12px;
   font-weight: 700;
}

:root[data-look="1999"] .segmented-track {
   background: transparent;
   border-radius: 0;
}

:root[data-look="1999"] .segmented input:checked + span {
   background: #FFFFFF;
   border: 2px inset #FFFFFF;
   border-radius: 0;
   box-shadow: none;
}

/* Ticker under the masthead */
:root[data-look="1999"] .ticker {
   display: block;
   max-width: 1068px;
   margin: 10px auto 0;
   overflow: hidden;
   background: #000000;
   color: #FFE600;
   font-family: var(--paper-type);
   font-size: 14px;
   white-space: nowrap;
}

.ticker p {
   display: inline-block;
   margin: 0;
   /* Starts just off the right edge, then slides its full width to the left */
   padding: 4px 0 4px 100%;
   animation: ticker 40s linear infinite;
}

@keyframes ticker {
   to {
      transform: translateX(-100%);
   }
}

/* Shop list as a line of blue links: "In today's paper: iStore (0) Swopp (12) ..." */
:root[data-look="1999"] .sources {
   max-width: 1100px;
   padding-top: 12px;
   font-family: var(--font);
}

:root[data-look="1999"] .sources::before {
   content: "In today's paper:";
   flex: none;
   align-self: center;
   font-style: italic;
   white-space: nowrap;
}

:root[data-look="1999"] .source {
   padding: 0;
   color: var(--link);
   font-size: 15px;
   text-decoration: underline;
}

:root[data-look="1999"] .source-dot {
   display: none;
}

:root[data-look="1999"] .source-count {
   min-width: 0;
   color: var(--ink);
   font-weight: 400;
   text-decoration: none;
}

:root[data-look="1999"] .source-count::before {
   content: "(";
}

:root[data-look="1999"] .source-count::after {
   content: ")";
}

:root[data-look="1999"] .source.is-error {
   color: var(--grade-d);
}

/* PAGE */
:root[data-look="1999"] .layout {
   grid-template-columns: 210px minmax(0, 1fr);
   max-width: 1100px;
}

:root[data-look="1999"] .filters {
   top: 12px;
   padding: 10px 12px;
   border: 2px solid var(--ink);
   background: var(--surface);
}

:root[data-look="1999"] .filters::before {
   content: "Index";
   display: block;
   margin-bottom: 12px;
   padding-bottom: 4px;
   border-bottom: 3px double var(--ink);
   font-family: var(--blackletter);
   font-size: 28px;
   text-align: center;
}

:root[data-look="1999"] .filter-title {
   font-size: 12px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
}

:root[data-look="1999"] .filters select,
:root[data-look="1999"] .money-input {
   background: #FFFFFF;
   border: 2px inset #FFFFFF;
}

:root[data-look="1999"] .option input,
:root[data-look="1999"] .toggle input {
   accent-color: #000000;
}

:root[data-look="1999"] .chip {
   background: transparent;
   border: 1px solid var(--ink);
   border-radius: 0;
}

:root[data-look="1999"] .chip[aria-pressed="true"] {
   background: var(--ink);
   color: var(--surface);
}

:root[data-look="1999"] .summary {
   padding-bottom: 6px;
   border-bottom: 1px solid var(--ink);
   font-style: italic;
}

:root[data-look="1999"] .summary::before {
   content: "Classifieds";
   display: block;
   margin-bottom: 6px;
   padding: 4px 0;
   border-top: 4px double var(--ink);
   border-bottom: 1px solid var(--ink);
   color: var(--ink);
   font-family: var(--blackletter);
   font-size: 40px;
   font-style: normal;
   line-height: 1.1;
   text-align: center;
}

/* Every listing is its own boxed ad, three columns across */
:root[data-look="1999"] .list {
   column-count: 3;
   column-gap: 16px;
   column-rule: 1px solid var(--ink);
}

:root[data-look="1999"] .row,
:root[data-look="1999"] .row:first-child,
:root[data-look="1999"] .row:last-child {
   display: block;
   margin: 0 0 14px;
   padding: 10px;
   background: var(--surface);
   border: 1.5px solid var(--ink);
   border-radius: 0;
   break-inside: avoid;
   transition: none;
}

:root[data-look="1999"] .row:hover {
   background: #FFF6C4;
   border-radius: 0;
}

:root[data-look="1999"] .row::after {
   content: "";
   display: block;
   clear: both;
}

:root[data-look="1999"] .row-photo {
   float: right;
   width: 78px;
   height: 78px;
   margin: 0 0 6px 10px;
   background: transparent;
   border: 1px solid var(--ink);
   border-radius: 0;
}

/* Newsprint photos: grey, punchy, slightly blotchy */
:root[data-look="1999"] .row-photo img,
:root[data-look="1999"] .deal-photo img {
   border-radius: 0;
   filter: grayscale(1) contrast(1.25) brightness(1.05);
}

:root[data-look="1999"] .stamp {
   top: -7px;
   left: -7px;
   width: 26px;
   height: 26px;
   background: var(--surface);
   border-width: 2px;
   border-radius: 50%;
   box-shadow: none;
   font-family: var(--font);
   font-size: 13px;
}

:root[data-look="1999"] .row-title {
   font-size: 15px;
   font-weight: 700;
   letter-spacing: 0.02em;
   line-height: 1.2;
   text-transform: uppercase;
}

:root[data-look="1999"] .row-facts {
   display: block;
   margin-top: 6px;
   font-size: 13px;
}

:root[data-look="1999"] .fact {
   display: inline;
   padding: 0;
   background: none;
   border: 0;
   border-radius: 0;
   white-space: normal;
}

:root[data-look="1999"] .fact + .fact::before {
   content: " \00B7  ";
   color: var(--ink);
}

:root[data-look="1999"] .row-notes {
   font-style: italic;
}

:root[data-look="1999"] .row-shop {
   font-size: 12px;
}

:root[data-look="1999"] .row-shop::before {
   content: "Enquiries:";
   font-weight: 700;
}

:root[data-look="1999"] .row-shop .source-dot {
   display: none;
}

:root[data-look="1999"] .row-price {
   flex-direction: row;
   align-items: baseline;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 4px 10px;
   margin-top: 8px;
   padding-top: 6px;
   border-top: 1px dashed var(--ink);
   text-align: left;
}

:root[data-look="1999"] .price,
:root[data-look="1999"] .price-was {
   font-family: var(--paper-type);
   font-stretch: 100%;
}

:root[data-look="1999"] .price {
   font-size: 22px;
}

:root[data-look="1999"] .row-price .link-button {
   margin: 0 0 0 auto;
   padding: 0;
}

/* FRONT PAGE (nothing searched yet) */
:root[data-look="1999"][data-landing] .empty,
:root[data-look="1999"] .empty {
   max-width: 760px;
   margin: 0;
   text-align: left;
}

:root[data-look="1999"][data-landing] .empty h1,
:root[data-look="1999"] .empty h1 {
   display: block;
   padding-bottom: 8px;
   border-bottom: 1px solid var(--ink);
   font-size: 46px;
   font-stretch: 100%;
   letter-spacing: -0.01em;
}

:root[data-look="1999"] .empty p {
   margin-left: 0;
   color: var(--ink);
   font-size: 17px;
}

:root[data-look="1999"] .empty p::first-letter {
   float: left;
   padding: 6px 8px 0 0;
   font-family: var(--blackletter);
   font-size: 3.4em;
   line-height: 0.8;
}

:root[data-look="1999"] .empty ul {
   padding-left: 18px;
   color: var(--ink);
   list-style: square;
}

:root[data-look="1999"] .example {
   padding: 0;
   background: none;
   border: 0;
   border-radius: 0;
   color: var(--link);
   text-decoration: underline;
}

:root[data-look="1999"] .arrivals {
   background: #FFE600;
   color: #000000;
   border: 2px solid #000000;
   border-radius: 0;
   box-shadow: 3px 3px 0 #000000;
   font-family: var(--font);
}

:root[data-look="1999"] .arrivals p::before {
   content: "STOP PRESS! ";
   font-weight: 700;
}

/* FOOTER: the 90s web bits */
:root[data-look="1999"] .footer {
   max-width: 1100px;
   border-top: 4px double var(--ink);
   padding-top: 14px;
   color: var(--ink);
   font-family: var(--font);
}

:root[data-look="1999"] .nineties {
   display: block;
   margin-top: 14px;
   font-family: var(--nineties);
   font-size: 12px;
}

.counter span {
   display: inline-block;
   padding: 1px 6px;
   background: #000000;
   color: #33FF33;
   font-family: "Courier New", monospace;
   letter-spacing: 0.2em;
}

/* DIALOGS: clippings with a hard shadow */
:root[data-look="1999"] .sheet {
   background: var(--surface);
   border: 2px solid var(--ink);
   border-radius: 0;
   box-shadow: 8px 8px 0 rgba(23, 22, 18, 0.85);
   -webkit-backdrop-filter: none;
   backdrop-filter: none;
   font-family: var(--font);
}

:root[data-look="1999"] .sheet-head {
   border-bottom: 4px double var(--ink);
}

:root[data-look="1999"] .sheet-head h2 {
   font-family: var(--blackletter);
   font-size: 34px;
   font-weight: 400;
   font-stretch: 100%;
}

:root[data-look="1999"] .prose h3 {
   font-size: 13px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
}

:root[data-look="1999"] .prose p {
   color: var(--ink);
}

:root[data-look="1999"] .deal-photo {
   border: 1px solid var(--ink);
   border-radius: 0;
}

:root[data-look="1999"] .deal-verdict {
   border-width: 3px;
   font-family: var(--paper-type);
   font-size: 16px;
   transform: rotate(-5deg);
}

:root[data-look="1999"] .button-primary {
   font-weight: 700;
}

:root[data-look="1999"] .meter {
   height: 16px;
   background: #FFFFFF;
   border: 2px inset #FFFFFF;
   border-radius: 0;
}

:root[data-look="1999"] .meter span {
   background: repeating-linear-gradient(90deg, #000080 0 10px, transparent 10px 12px);
   border-radius: 0;
}

:root[data-look="1999"] .deal-orb {
   display: none;
}

/* Each ad says it can be opened, like "continued on page 4" */
:root[data-look="1999"] .row-price .link-button::after {
   content: " \00BB";
}

:root[data-look="1999"] .row:hover {
   box-shadow: 3px 3px 0 var(--ink);
}

:root[data-look="1999"] .trust-badge {
   border-radius: 0;
   border: 1px solid var(--ink);
   background: transparent;
   color: var(--ink);
   font-family: var(--font);
}

:root[data-look="1999"] .item-trust {
   border-radius: 0;
   border: 1px solid var(--ink);
   background: transparent;
}

:root[data-look="1999"] .item-trust-title {
   font-family: var(--font);
   text-transform: uppercase;
}

/* The listing sheet as the ad blown up: ruled tables, grey photos, a dashed coupon edge */
:root[data-look="1999"] .sheet-item .sheet-head h2 {
   font-family: var(--font);
   font-size: 22px;
   font-weight: 700;
   text-transform: uppercase;
}

:root[data-look="1999"] .carousel-track,
:root[data-look="1999"] .carousel.is-empty {
   background: var(--surface);
   border: 1px solid var(--ink);
   border-radius: 0;
}

:root[data-look="1999"] .slide img,
:root[data-look="1999"] .thumb img {
   filter: grayscale(1) contrast(1.25) brightness(1.05);
}

:root[data-look="1999"] .carousel-nav {
   background: #C0C0C0;
   border: 2px outset #FFFFFF;
   border-radius: 0;
   box-shadow: none;
   color: #000000;
}

:root[data-look="1999"] .carousel-count {
   background: #000000;
   border-radius: 0;
   font-family: var(--paper-type);
}

:root[data-look="1999"] .thumb {
   background: var(--surface);
   border: 1px solid var(--ink);
   border-radius: 0;
}

:root[data-look="1999"] .thumb[aria-current="true"] {
   outline: 3px double var(--ink);
}

:root[data-look="1999"] .item-price .price {
   font-family: var(--paper-type);
}

:root[data-look="1999"] .item-section {
   padding-top: 12px;
   border-top: 2px dashed var(--ink);
}

:root[data-look="1999"] .item-section h3 {
   font-size: 13px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
}

:root[data-look="1999"] .item-description {
   color: var(--ink);
   font-family: var(--paper-type);
   font-size: 14px;
}

:root[data-look="1999"] .spec-table th,
:root[data-look="1999"] .spec-table td {
   border-top: 1px dotted var(--ink);
}

:root[data-look="1999"] .spec-table th {
   color: var(--ink);
   font-style: italic;
}

@media (max-width: 1100px) {
   :root[data-look="1999"] .list {
      column-count: 2;
   }
}

@media (max-width: 820px) {
   :root[data-look="1999"] .topbar,
   :root[data-look="1999"][data-landing] .topbar {
      grid-template-columns: minmax(0, 1fr) auto;
      margin-top: 10px;
      padding: 0 12px;
      border: 0;
   }

   :root[data-look="1999"] .dateline span:last-child {
      display: none;
   }

   :root[data-look="1999"] .actions {
      grid-column: 1 / -1;
      grid-row: auto;
      justify-self: end;
   }

   :root[data-look="1999"] .layout {
      grid-template-columns: 1fr;
   }

   :root[data-look="1999"] .list {
      column-count: 1;
   }

   :root[data-look="1999"] .filters summary {
      font-family: var(--font);
      text-transform: uppercase;
   }

   :root[data-look="1999"] .filters::before {
      display: none;
   }
}

@media (prefers-reduced-motion: reduce) {
   .ticker p {
      padding-left: 0;
      animation: none;
   }
}

/* SUPPORT: the Buy Me a Coffee button in the footer (drawn by its own script, so only spacing is styled here) */
.coffee {
   margin: 18px auto 6px;
}

.coffee p {
   margin-bottom: 10px;
}