/* laptop.ro */
/* A polished marketplace in the manner of the big Romanian shops: white
   header with a large search, light grey page, white borderless cards that
   lift on hover, 14 px text, blue for every action, green as the second
   brand colour. */
:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --tint-blue: #eaf3fb;
  --tint-green: #e9f6f0;
  --tint-slate: #eef1f5;
  --text: #1d232b;
  --text-2: #3a434f;
  --muted: #5d6572;
  --icon: #6b7480;
  --border: #e3e6eb;
  --border-strong: #cfd4db;
  --field-border: #b9c0ca;
  --primary: #0369a1;
  --primary-hover: #075985;
  --primary-soft: #e6f1f9;
  --on-primary: #ffffff;
  --green: #047857;
  --link: #0369a1;
  --price: #1d232b;
  --differ: #fff8e6;
  --best: #e8f6ee;
  --best-text: #0b6b43;
  --radius: 8px;
  --radius-s: 6px;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-hover: 0 6px 20px rgba(16, 24, 40, .12);
  --shadow-pop: 0 18px 40px rgba(16, 24, 40, .16);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Liberation Sans", "Noto Sans", sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c1118;
    --surface: #141b24;
    --surface-2: #19212c;
    --tint-blue: #13263a;
    --tint-green: #122a24;
    --tint-slate: #1a2230;
    --text: #e7ebf0;
    --text-2: #c6ced8;
    --muted: #9ba5b3;
    --icon: #9ba5b3;
    --border: #243040;
    --border-strong: #334155;
    --field-border: #4b5a6d;
    --primary: #4fa8e0;
    --primary-hover: #7cc0ec;
    --primary-soft: #14304a;
    --on-primary: #061423;
    --green: #34d399;
    --link: #7cc0ec;
    --price: #f1f5f9;
    --differ: #2a2411;
    --best: #0e2c20;
    --best-text: #6ee7b7;
    --shadow-card: none;
    --shadow-hover: 0 6px 20px rgba(0, 0, 0, .5);
    --shadow-pop: 0 18px 40px rgba(0, 0, 0, .6);
  }
}

/* One colour per kind of information, the same everywhere its icon
   appears: a tinted tile behind a glyph in the full colour. */
.tone-blue { --tone: #0369a1; --tone-bg: #e4f0fa; }
.tone-teal { --tone: #0f766e; --tone-bg: #e0f4f1; }
.tone-green { --tone: #047857; --tone-bg: #e3f5ec; }
.tone-amber { --tone: #b45309; --tone-bg: #fdf0dc; }
.tone-violet { --tone: #6d28d9; --tone-bg: #efe8fd; }
.tone-slate { --tone: #475569; --tone-bg: #eef1f5; }
@media (prefers-color-scheme: dark) {
  .tone-blue { --tone: #7cc0ec; --tone-bg: #13304a; }
  .tone-teal { --tone: #5eead4; --tone-bg: #0f2f2c; }
  .tone-green { --tone: #6ee7b7; --tone-bg: #0f2e22; }
  .tone-amber { --tone: #fbbf24; --tone-bg: #33250e; }
  .tone-violet { --tone: #c4b5fd; --tone-bg: #2a1f47; }
  .tone-slate { --tone: #cbd5e1; --tone-bg: #1e2735; }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text);
  font: 400 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
main { flex: 1; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Links inside running text are underlined, not told apart by colour alone. */
p a:not([class]) { text-decoration: underline; text-underline-offset: 2px; }
img { max-width: 100%; height: auto; }
h1 { margin: 0 0 6px; font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
h2 { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 700; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* the decimal comma of a shop-style price (2.399<sup>99</sup>): not drawn,
   but in the text, so copying and screen readers get "2.399,99 lei" */
.dsep { font-size: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: 1520px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }
.note { color: var(--muted); font-size: 12px; margin: 16px 0 0; }
.lead { font-size: 16px; color: var(--muted); margin: 0 0 20px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 1.2em; height: 1.2em; flex: none; vertical-align: -.25em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: var(--radius-s); background: var(--primary); color: var(--on-primary); font-weight: 600; }
.skip:focus { top: 8px; }
.panel { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 20px; }

/* A strip above the header: what the site holds, how fresh it is, and how
   to reach the operator; a blue-to-green line under it (the footer's, mirrored). */
.util { position: relative; background: linear-gradient(90deg, #071a31 0%, #0b2545 50%, #0c3358 100%); color: #c7d2e0; font-size: 12.5px; }
.util::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: linear-gradient(90deg, #0ea5e9, #10b981 50%, #0ea5e9); }
.util-row { display: flex; align-items: center; gap: 12px 22px; min-height: 38px; padding-bottom: 2px; }
.util p { margin: 0; }
.util-facts { display: flex; flex: 1; align-items: center; gap: 0; min-width: 0; overflow: hidden; white-space: nowrap; }
.util-fact { display: inline-flex; align-items: center; gap: 7px; }
.util-fact + .util-fact::before { content: ""; width: 1px; height: 12px; margin: 0 14px; background: rgba(255, 255, 255, .22); }
.util-fact .i { width: 15px; height: 15px; color: #7dd3fc; }
.util-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .22); }
.util-facts .util-dot { margin-left: 3px; }
.util-contact { display: flex; align-items: center; gap: 18px; white-space: nowrap; }
.util p a { text-decoration: none; }
.util-contact a { display: inline-flex; align-items: center; gap: 7px; color: #ffffff; font-weight: 600; }
.util-contact a:hover { color: #7dd3fc; text-decoration: none; }
.util-contact .i { width: 15px; height: 15px; padding: 0; color: #34d399; }
.util-links { display: flex; gap: 18px; padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, .18); white-space: nowrap; }
.util-links a { color: #dbe4ee; }
.util-links a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 1240px) { .util-links, .util-wide { display: none; } }
@media (max-width: 860px) { .util-facts { display: none; } .util-contact { flex: 1; justify-content: space-between; } }
@media (max-width: 400px) { .util-email { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* Header: white, the logo, a large search, shortcuts; the category bar below */
.top { position: sticky; top: 0; z-index: 30; background: var(--surface); box-shadow: 0 1px 0 var(--border), 0 4px 16px rgba(16, 24, 40, .06); }
.top-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 44px; min-height: 84px; padding-top: 14px; padding-bottom: 14px; }
.brand { display: inline-flex; align-items: center; color: var(--text); }
.brand:hover { text-decoration: none; }
/* The logo: the mark (an open laptop seen from the side is an L; the green
   dot is the ".ro") and the wordmark, drawn letter by letter as vectors, so
   it is the same everywhere; its colours come from --logo-ink / --logo-tld. */
.logo { display: inline-flex; align-items: center; gap: 12px; --logo-ink: #0b1f3a; --logo-tld: #059669; }
.logo-mark { display: block; width: 48px; height: 48px; flex: none; filter: drop-shadow(0 6px 12px rgba(3, 105, 161, .3)); transition: transform .25s ease; }
.brand:hover .logo-mark { transform: rotate(-6deg) scale(1.05); }
/* Centred on its x-height and ascenders, not on the p's descenders. */
.logo-word { display: block; width: auto; height: 42px; aspect-ratio: 166 / 46; translate: 0 11%; }
.lw-ink { stroke: var(--logo-ink); }
.lw-tld { stroke: var(--logo-tld); }
@media (prefers-color-scheme: dark) { .logo { --logo-ink: #e7ebf0; --logo-tld: #34d399; } }
.search { position: relative; display: flex; width: 100%; max-width: 760px; min-width: 0; justify-self: center; }
.search input {
  flex: 1; width: 0; min-width: 0; height: 44px; padding: 0 60px 0 16px;
  border: 1px solid var(--field-border); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; font-size: 15px;
}
.search input::placeholder { color: #737b87; }
.search input:hover { border-color: #9aa3ae; }
.search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.search button {
  position: absolute; top: 4px; right: 4px; bottom: 4px; display: grid; place-items: center; width: 48px;
  border: 0; border-radius: var(--radius-s); background: var(--primary); color: var(--on-primary); cursor: pointer;
}
.search button:hover { background: var(--primary-hover); }
.search button .i { width: 20px; height: 20px; stroke-width: 2; }
/* The header's search: taller, a lens in the field, "Caută" on the button. */
.search-icon { position: absolute; top: 50%; left: 16px; display: flex; margin-top: -11px; color: var(--icon); pointer-events: none; }
.search-icon .i { width: 22px; height: 22px; }
.top .search { max-width: 780px; }
.top .search input { height: 52px; padding: 0 124px 0 50px; border: 2px solid color-mix(in srgb, var(--primary) 32%, var(--border)); border-radius: 12px; font-size: 15.5px; transition: border-color .15s, box-shadow .15s; }
.top .search input:hover { border-color: color-mix(in srgb, var(--primary) 60%, var(--border)); }
.top .search input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent); }
.top .search:focus-within .search-icon { color: var(--primary); }
.top .search button { top: 6px; right: 6px; bottom: 6px; display: inline-flex; gap: 8px; width: auto; padding: 0 22px; border-radius: 8px; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); font: inherit; font-size: 15px; font-weight: 700; box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent); transition: box-shadow .15s, transform .15s; }
.top .search button:hover { box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 42%, transparent); transform: translateY(-1px); }
.top .search button .i { display: none; }
.top-links { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.top-links a { display: flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 999px; color: var(--text); white-space: nowrap; transition: background .15s; }
.top-links a:hover, .top-links a[aria-current] { background: var(--surface-2); color: var(--link); text-decoration: none; }
.tl-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--primary-soft); color: var(--primary); transition: background .15s, color .15s; }
.tl-icon .i { width: 21px; height: 21px; }
.top-links a:hover .tl-icon, .top-links a[aria-current] .tl-icon { background: var(--primary); color: var(--on-primary); }
.tl-label { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
@media (max-width: 1100px) { .tl-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .top-links a { padding: 3px; } .top-row { gap: 12px 28px; } }
@media (max-width: 899px) {
  .top .search input { padding-right: 64px; }
  .top .search button { padding: 0 14px; }
  .top .search button .i { display: block; }
  .search-go { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 760px) {
  .top-row { grid-template-columns: auto 1fr; gap: 12px; min-height: 0; padding-top: 12px; padding-bottom: 12px; }
  .top-links { grid-row: 1; grid-column: 2; justify-self: end; gap: 2px; }
  .tl-icon { width: 40px; height: 40px; }
  .search { grid-column: 1 / -1; max-width: none; }
  .top .search input { height: 48px; }
  .logo-mark { width: 40px; height: 40px; }
  .logo-word { height: 35px; }
}
@media (max-width: 420px) { .logo-mark { width: 36px; height: 36px; } .logo-word { height: 31px; } .logo { gap: 9px; } .top .search input { padding-left: 42px; font-size: 15px; } .search-icon { left: 13px; } }
@media (prefers-reduced-motion: reduce) { .logo-mark, .top .search button { transition: none; } .brand:hover .logo-mark, .top .search button:hover { transform: none; } }

.navbar { background: var(--surface); border-top: 1px solid var(--border); }
.navbar-row { display: flex; align-items: center; gap: 10px; min-height: 54px; }
.quick { display: flex; gap: 2px; min-width: 0; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.quick::-webkit-scrollbar { display: none; }
.quick a { display: inline-flex; align-items: center; gap: 8px; min-height: 54px; padding: 0 12px; color: var(--text); font-weight: 600; font-size: 14px; }
.quick a:hover { color: var(--link); text-decoration: none; }
.quick a .i { width: 18px; height: 18px; color: var(--icon); transition: color .15s; }
.quick a:hover .i, .quick [aria-current] .i { color: var(--primary); }
.q-mono { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--text-2); font-size: 11px; font-weight: 700; }
.q-mono::before { content: attr(data-initial); }
.quick a:hover .q-mono, .quick [aria-current] .q-mono { color: var(--link); box-shadow: inset 0 0 0 1px var(--primary); }
.quick [aria-current] { color: var(--link); box-shadow: inset 0 -3px 0 var(--primary); }
.nav-note { display: flex; align-items: center; gap: 7px; flex: none; margin: 0 0 0 auto; padding-left: 16px; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.nav-note .i { width: 16px; height: 16px; color: var(--green); }
@media (max-width: 1240px) { .nav-note { display: none; } }
@media (max-width: 699px) { .top { position: static; } }

/* Mega menu: categories on the left; the pointed one's pages in columns,
   with counts; one real laptop; the page dims behind it. Phones: a drawer. */
.mega { position: relative; flex: none; }
.mega > summary {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px 0 16px; border-radius: var(--radius);
  background: var(--primary); color: var(--on-primary); font-weight: 700; font-size: 14px; cursor: pointer; list-style: none;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--primary) 28%, transparent); transition: background .15s;
}
.mega > summary::-webkit-details-marker { display: none; }
/* no filter or transform on the summary: either would trap the fixed dimming layer */
.mega > summary:hover { background: var(--primary-hover); color: var(--on-primary); }
.mega > summary > .i { width: 16px; height: 16px; transition: transform .2s; }
.mega[open] > summary { background: var(--primary-hover); color: var(--on-primary); }
.mega[open] > summary > .i { transform: rotate(180deg); }
.burger, .burger::before, .burger::after { display: block; width: 18px; height: 2px; border-radius: 1px; background: currentColor; }
.burger { position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -6px; }
.burger::after { top: 6px; }
.mega[open] > summary::before { content: ""; position: fixed; inset: 0; z-index: 35; background: rgba(16, 24, 40, .45); cursor: default; }
.mega-panel { z-index: 40; background: var(--surface); color: var(--text); }
.mega-drawer-head { display: none; }
.mega-all, .mega-tab {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 6px 14px; border: 0;
  background: none; color: var(--text); font: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer;
}
.mega-all:hover, .mega-tab:hover { background: var(--surface-2); color: var(--link); text-decoration: none; }
.mega-all .n { margin-left: auto; color: var(--muted); font-size: 12px; }
.mega-tab-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--tone-bg); color: var(--tone); }
.mega-tab-icon .i { width: 18px; height: 18px; }
.mega-tab-label { flex: 1; min-width: 0; }
.mega-tab > .i { width: 16px; height: 16px; color: var(--icon); transition: transform .2s; }
.mega-cats { margin: 0; padding: 0; list-style: none; }
.mega-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; }
.mega-head-title { font-size: 18px; font-weight: 700; }
.mega-seeall { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; font-weight: 500; }
.mega-seeall .i { width: 16px; height: 16px; }
.mega-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0 20px; margin: 0; padding: 0; list-style: none; }
.mega-links a { display: flex; align-items: center; gap: 12px; height: 100%; padding: 8px 6px; border-bottom: 1px solid var(--border); border-radius: 0; color: var(--text); }
.mega-links a:hover { text-decoration: none; background: var(--surface-2); }
.mega-links a:hover .ml-label { color: var(--link); }
.mega-links a:hover .ml-icon:not(.ml-mono) { background: var(--tone); color: var(--surface); }
.ml-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--radius); background: var(--tone-bg, var(--primary-soft)); color: var(--tone, var(--primary)); transition: background .15s, color .15s; }
.ml-icon .i { width: 20px; height: 20px; }
/* a brand's initial in a neutral circle, where a shop would show its logo;
   drawn from data-initial, so it is not part of the page's text */
.ml-mono::before { content: attr(data-initial); }
.ml-mono { border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--text-2); font-size: 15px; font-weight: 700; }
.mega-links a:hover .ml-mono { background: var(--surface); color: var(--link); box-shadow: inset 0 0 0 1px var(--primary); }
.ml-text { display: flex; flex-direction: column; min-width: 0; }
.ml-label { font-size: 14px; font-weight: 500; line-height: 1.3; }
.ml-meta { color: var(--muted); font-size: 12px; }

/* The laptop beside the links: a small shop window */
.mega-feature { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-card); transition: box-shadow .2s, border-color .2s; }
.mega-feature:hover { text-decoration: none; border-color: var(--border-strong); box-shadow: var(--shadow-hover); }
.mega-feature:hover .mf-name { color: var(--link); }
.mega-feature:hover .mf-go { background: var(--primary-hover); }
.mf-kicker { color: var(--primary); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.mf-media { position: relative; display: block; aspect-ratio: 4 / 3; padding: 10px; border-radius: 10px; background: var(--tint-blue); overflow: hidden; }
.mf-media img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .3s; }
.mega-feature:hover .mf-media img { transform: scale(1.05); }
.mf-media .badges { top: 8px; left: 8px; }
@media (prefers-color-scheme: dark) { .mf-media { background: #fff; } .mf-media img { mix-blend-mode: normal; } }
.mf-name { margin-top: 4px; font-size: 14px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mf-specs { color: var(--muted); font-size: 12px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mf-specs .sep { color: var(--border-strong); }
.mf-price { margin-top: 4px; font-size: 24px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.mf-price sup { font-size: .55em; vertical-align: .75em; margin-left: 1px; }
.mf-price small { font-size: .6em; font-weight: 600; }
.mf-shop { margin: 0; }
.mf-go { display: flex; align-items: center; justify-content: center; min-height: 38px; margin-top: 6px; border-radius: var(--radius-s); background: var(--primary); color: var(--on-primary); font-weight: 600; transition: background .15s; }

@media (min-width: 900px) {
  .mega-panel {
    position: absolute; top: calc(100% + 7px); left: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr); align-content: start;
    width: min(1320px, calc(100vw - 32px)); min-height: 500px; padding: 8px 0; overflow: hidden;
    border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-pop);
    background: linear-gradient(90deg, var(--surface) 250px, var(--border) 250px, var(--border) 251px, var(--surface) 251px);
  }
  .mega-all, .mega-cats { grid-column: 1; }
  .mega-all { font-weight: 600; }
  .mega-pane { position: absolute; top: 0; right: 0; bottom: 0; left: 251px; display: none; grid-template-columns: minmax(0, 1fr) 230px; gap: 28px; align-items: start; padding: 20px 24px; overflow-y: auto; }
  .mega-pane:not(:has(.mega-feature)) { grid-template-columns: minmax(0, 1fr); }
  /* without JS: hover or focus picks the category, the first shows by default */
  html:not(.js) .mega-cat:hover > .mega-pane,
  html:not(.js) .mega-cat:focus-within > .mega-pane,
  html:not(.js) .mega-cats:not(:hover):not(:focus-within) > .mega-cat:first-child > .mega-pane,
  .js .mega-cat.is-active > .mega-pane,
  .js .mega-cats:not(:has(.is-active)) > .mega-cat:first-child > .mega-pane { display: grid; }
  html:not(.js) .mega-cat:hover > .mega-tab,
  html:not(.js) .mega-cat:focus-within > .mega-tab,
  html:not(.js) .mega-cats:not(:hover):not(:focus-within) > .mega-cat:first-child > .mega-tab,
  .js .mega-cat.is-active > .mega-tab,
  .js .mega-cats:not(:has(.is-active)) > .mega-cat:first-child > .mega-tab { background: var(--primary-soft); color: var(--link); font-weight: 600; }
  html:not(.js) .mega-cat:hover > .mega-tab .i,
  html:not(.js) .mega-cat:focus-within > .mega-tab .i,
  .js .mega-cat.is-active > .mega-tab .i,
  .js .mega-cats:not(:has(.is-active)) > .mega-cat:first-child > .mega-tab .i { color: var(--primary); }
}

@media (max-width: 899px) {
  .mega-panel { position: fixed; top: 0; left: 0; bottom: 0; width: min(380px, 88vw); overflow-y: auto; overscroll-behavior: contain; padding: 0 0 24px; box-shadow: var(--shadow-pop); }
  .mega-drawer-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 6px 8px 6px 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
  .mega-drawer-title { font-size: 16px; font-weight: 700; }
  .mega-close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius-s); background: transparent; color: var(--text); cursor: pointer; }
  .mega-close:hover { background: var(--surface-2); }
  .mega-close .i { width: 22px; height: 22px; }
  .mega-all { border-bottom: 1px solid var(--border); font-weight: 600; }
  .mega-cat { border-bottom: 1px solid var(--border); }
  .mega-pane { display: none; padding: 0 12px 12px 14px; }
  html:not(.js) .mega-pane, .js .mega-cat.is-active > .mega-pane { display: block; }
  .js .mega-cat.is-active > .mega-tab { color: var(--link); font-weight: 600; }
  .js .mega-cat.is-active > .mega-tab > .i { transform: rotate(90deg); }
  .mega-head, .mega-feature { display: none; }
  .mega-links { grid-template-columns: minmax(0, 1fr); }
  .menu-open body { overflow: hidden; }
}

/* Home: on the left the categories and, right under them, the filters, in
   one card; on the right the carousel, brands, rows and the list. Phones:
   one column, the filters folded right above the list. */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "cats" "brands" "rows" "side" "results"; gap: 20px; margin-top: 16px; }
.home-side { grid-area: side; min-width: 0; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.hero { grid-area: hero; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
@media (min-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr) 270px; } }
.home-grid > .cats { grid-area: cats; }
.home-grid > .brands { grid-area: brands; }
.home-rows { grid-area: rows; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.home-grid > .listing { grid-area: results; min-width: 0; margin: 0; }
@media (min-width: 1150px) {
  .home-grid { grid-template-columns: 264px minmax(0, 1fr); grid-template-areas: "side hero" "side brands" "side rows" "side results"; align-items: start; }
}
.side-cats { display: none; }
@media (min-width: 1150px) { .side-cats { display: block; padding: 14px 0 10px; } }
.side-title { margin: 0 16px 6px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.side-cats ul { margin: 0; padding: 0; list-style: none; }
.side-cats a { display: flex; align-items: center; gap: 12px; min-height: 36px; padding: 2px 16px; color: var(--text); font-size: 14px; }
.side-cats a:hover { background: var(--surface-2); color: var(--link); text-decoration: none; }
.side-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 7px; background: var(--tone-bg); color: var(--tone); }
.side-icon .i { width: 17px; height: 17px; }
.side-label { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.side-cats .n { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
/* the filters inside the home card: no box of their own */
.home-side .filter-form { background: none; box-shadow: none; border-radius: 0; }
@media (min-width: 1150px) { .home-side .filter-form { border-top: 1px solid var(--border); } }
@media (max-width: 1149px) {
  .home-side .filters-summary { cursor: pointer; border-bottom: 0; }
  .home-side .filters-summary::after { display: inline; }
  .home-side .filters-body { display: none; }
  .home-side .filters-toggle:checked ~ .filters-body { display: block; }
}

.carousel { position: relative; }
.hero-carousel { min-width: 0; border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-card); }
.slides { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.slides::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; }
/* The shops' pictures are laptops on white: multiplied onto the banner's
   tint, the white disappears and the laptop stands on the colour. */
.banner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 100%; min-height: 360px; padding: 36px 64px 48px; overflow: hidden; color: var(--text); }
.banner:hover { color: var(--text); text-decoration: none; }
.banner:hover .banner-go { background: var(--primary-hover); }
.banner-deep { background: var(--tint-slate); }
.banner-ocean { background: var(--tint-blue); }
.banner-lagoon { background: var(--tint-green); }
.banner-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 30rem; }
.banner-kicker { color: var(--primary); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.banner-title { font-size: 38px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.banner-sub { color: var(--text-2); font-size: 16px; }
.banner-price { display: block; margin-top: 6px; }
.banner-from { margin-right: 4px; color: var(--text-2); font-size: 15px; }
.banner-amount { font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.banner-amount sup { font-size: .5em; vertical-align: .8em; margin-left: 1px; }
.banner-amount small { font-size: .5em; font-weight: 600; }
.banner-go { display: inline-flex; align-self: flex-start; align-items: center; margin-top: 14px; padding: 12px 22px; border-radius: var(--radius-s); background: var(--primary); color: var(--on-primary); font-weight: 600; font-size: 15px; }
.banner-media { flex: none; display: block; width: 330px; height: 330px; margin-right: -12px; }
.banner-media img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
@media (prefers-color-scheme: dark) {
  .banner-media { padding: 12px; background: #fff; border-radius: var(--radius); }
  .banner-media img { mix-blend-mode: normal; }
}
@media (max-width: 1250px) { .banner-title { font-size: 32px; } .banner-media { width: 270px; height: 270px; } }
@media (max-width: 600px) {
  .banner { min-height: 250px; padding: 22px 18px 40px; gap: 8px; }
  .banner-title { font-size: 24px; }
  .banner-sub { font-size: 14px; }
  .banner-amount { font-size: 24px; }
  .banner-media { width: 120px; height: 120px; margin-right: 0; }
  .banner-go { margin-top: 8px; padding: 10px 16px; font-size: 14px; }
}
.car-btn {
  position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; margin-top: -20px;
  border: 0; border-radius: 50%; background: var(--surface); color: var(--text-2); box-shadow: 0 2px 8px rgba(16, 24, 40, .18); cursor: pointer;
}
.car-btn:hover { color: var(--link); }
.car-btn .i { width: 20px; height: 20px; stroke-width: 2; }
.car-btn:disabled { opacity: 0; pointer-events: none; }
.car-prev { left: 14px; }
.car-next { right: 14px; }
@media (max-width: 700px) { .hero-carousel .car-btn { display: none; } }
.dots { position: absolute; left: 0; right: 0; bottom: 8px; z-index: 2; display: flex; justify-content: center; margin: 0; }
/* a 24 px target around a small dot */
.dots a { position: relative; display: block; width: 24px; height: 24px; }
.dots a::before { content: ""; position: absolute; left: 8px; right: 8px; top: 9px; height: 6px; border-radius: 3px; background: rgba(29, 35, 43, .25); }
@media (prefers-color-scheme: dark) { .dots a::before { background: rgba(255, 255, 255, .3); } }
.dots a[aria-current] { width: 40px; }
.dots a[aria-current]::before { background: var(--primary); }

.promos { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .promos { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr 1fr; } }
@media (max-width: 520px) { .promos { grid-template-columns: minmax(0, 1fr); } }
.promo { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 12px 16px 18px; overflow: hidden; border-radius: var(--radius); background: var(--tint-blue); color: var(--text); }
.promo + .promo { background: var(--tint-green); }
.promo:hover { color: var(--text); text-decoration: none; box-shadow: var(--shadow-hover); }
.promo:hover .promo-title { color: var(--link); }
.promo-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.promo-kicker { color: var(--primary); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.promo-title { font-size: 18px; font-weight: 700; line-height: 1.2; }
.promo-sub { color: var(--text-2); font-size: 13px; }
.promo-price { margin-top: 4px; font-size: 13px; color: var(--text-2); }
.promo-price > span:last-child { color: var(--text); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.promo-price sup { font-size: .55em; vertical-align: .75em; }
.promo-price small { font-size: .6em; font-weight: 600; }
.promo-media { flex: none; display: block; width: 110px; height: 110px; }
.promo-media img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
@media (prefers-color-scheme: dark) { .promo-media { padding: 6px; background: #fff; border-radius: var(--radius-s); } .promo-media img { mix-blend-mode: normal; } }

/* Section panels: categories, brands, rows of cards */
.section-head, .row-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
.cats h2, .brands h2 { margin-bottom: 14px; }
/* on wide screens the category column beside the carousel has the same links */
@media (min-width: 1150px) { .cats { display: none; } }
.cat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.cat { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; padding: 16px 10px 14px; text-align: center; border-radius: var(--radius); color: var(--text); background: var(--surface-2); }
.cat:hover { text-decoration: none; background: var(--primary-soft); }
.cat:hover .cat-label { color: var(--link); }
.cat-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--tone-bg); color: var(--tone); }
.cat-icon .i { width: 24px; height: 24px; }
.cat-label { font-weight: 600; font-size: 14px; line-height: 1.25; }
.cat-meta { color: var(--muted); font-size: 12px; }
@media (max-width: 600px) {
  .cat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cat { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 0 10px; padding: 10px; text-align: left; }
  .cat-icon { grid-row: 1 / span 2; width: 36px; height: 36px; }
  .cat-icon .i { width: 19px; height: 19px; }
  .cat-label { font-size: 13px; }
}

.brand-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.brand-tile { display: flex; align-items: center; gap: 12px; height: 100%; min-height: 68px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); background: var(--surface); }
.brand-tile .ml-mono { display: grid; place-items: center; width: 38px; height: 38px; flex: none; }
.brand-tile:hover .ml-mono { color: var(--link); box-shadow: inset 0 0 0 1px var(--primary); }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-tile:hover { text-decoration: none; border-color: var(--primary); box-shadow: var(--shadow-hover); }
.brand-name { font-weight: 700; font-size: 16px; line-height: 1.2; letter-spacing: -.01em; }
.brand-meta { color: var(--muted); font-size: 12px; white-space: nowrap; }
@media (max-width: 600px) {
  .panel { padding: 16px; }
  .brand-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .brand-tile { min-height: 56px; padding: 8px; }
  .brand-name { font-size: 15px; }
}

.see-all { display: inline-flex; align-items: center; gap: 2px; font-weight: 500; white-space: nowrap; }
.see-all .i { width: 16px; height: 16px; }
.row-viewport { position: relative; }
.row-cards {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 12px) / 5); gap: 12px;
  margin: 0; padding: 2px 2px 8px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; scrollbar-width: thin;
}
.js .row-cards { scrollbar-width: none; }
.js .row-cards::-webkit-scrollbar { display: none; }
.row-cards > li { scroll-snap-align: start; min-width: 0; }
.row-cards .card { box-shadow: none; border: 1px solid transparent; }
.row-cards .card:hover { border-color: var(--border); }
@media (max-width: 1200px) { .row-cards { grid-auto-columns: calc((100% - 3 * 12px) / 4); } }
/* beside the home page's filter column the rows are narrower: four cards */
@media (min-width: 1150px) { .home-rows .row-cards { grid-auto-columns: calc((100% - 3 * 12px) / 4); } }
@media (min-width: 1440px) { .home-rows .row-cards { grid-auto-columns: calc((100% - 4 * 12px) / 5); } }
@media (max-width: 900px) { .row-cards { grid-auto-columns: calc((100% - 2 * 12px) / 3); } }
@media (max-width: 640px) { .row-cards { grid-auto-columns: 46%; } }
.row .car-btn { top: 36%; }
.row .car-prev { left: -10px; }
.row .car-next { right: -10px; }
@media (max-width: 640px) { .row .car-btn { display: none; } }

/* Landing pages (gaming, price caps, brands, memory, screen): a hero on a
   deep gradient in the page's colour, with its numbers, how its prices are
   spread and its cheapest laptop; then "repere". */
.lp-hero { position: relative; margin-top: 16px; padding-top: 0; padding-bottom: 0; }
.lp-hero > .lp-inner, .lp-hero > .lp-related { position: relative; }
.lp-hero { --deep: linear-gradient(115deg, #0b2545 0%, #0a4d85 60%, #0369a1 100%); }
.lp-hero.tone-green { --deep: linear-gradient(115deg, #065f46 0%, #047857 50%, #14b8a6 100%); --glow: rgba(52, 211, 153, .35); --hi: #6ee7b7; }
.lp-hero.tone-violet { --deep: linear-gradient(115deg, #4c1d95 0%, #6d28d9 55%, #a78bfa 100%); --glow: rgba(196, 181, 253, .35); --hi: #c4b5fd; }
.lp-hero.tone-blue { --deep: linear-gradient(115deg, #0a4d85 0%, #0369a1 55%, #38bdf8 100%); --glow: rgba(125, 211, 252, .35); --hi: #7dd3fc; }
.lp-hero.tone-amber { --deep: linear-gradient(115deg, #7c2d12 0%, #b45309 55%, #f59e0b 100%); --glow: rgba(252, 211, 77, .3); --hi: #fcd34d; }
.lp-hero.tone-teal { --deep: linear-gradient(115deg, #115e59 0%, #0f766e 55%, #22d3ee 100%); --glow: rgba(94, 234, 212, .35); --hi: #5eead4; }
.lp-inner {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; padding: 28px 30px; overflow: hidden;
  border-radius: 20px 20px 0 0; background: var(--deep); color: #e6eef7; box-shadow: 0 18px 40px -24px rgba(6, 24, 44, .7);
}
.lp-hero:not(:has(.lp-related)) .lp-inner { border-radius: 20px; }
.lp-inner::before { content: ""; position: absolute; right: -80px; top: -140px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(closest-side, var(--glow), transparent); pointer-events: none; }
.lp-inner::after { content: ""; position: absolute; left: -120px; bottom: -220px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .08), transparent); pointer-events: none; }
.lp-text, .lp-media { position: relative; z-index: 1; min-width: 0; }
@media (min-width: 900px) { .lp-inner { grid-template-columns: minmax(0, 1fr) 380px; padding: 34px 40px; gap: 32px; } }
.lp-text .crumbs ol { margin-bottom: 16px; color: rgba(230, 238, 247, .7); }
.lp-text .crumbs a { color: rgba(255, 255, 255, .85); }
.lp-text .crumbs li + li::before { color: rgba(255, 255, 255, .5); }
.lp-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 4px 12px 4px 4px; border-radius: 999px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: var(--hi); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.lp-kicker-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #ffffff; }
.lp-kicker-icon .i { width: 15px; height: 15px; }
.lp-text h1 { margin: 0 0 10px; color: #ffffff; font-size: 44px; line-height: 1.05; letter-spacing: -.03em; }
.lp-lead { margin: 0 0 22px; max-width: 46rem; color: rgba(230, 238, 247, .88); font-size: 16px; line-height: 1.55; }
.lp-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lp-stats li { display: flex; flex-direction: column; justify-content: center; min-width: 120px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); backdrop-filter: blur(6px); }
.lp-stats strong { color: #ffffff; font-size: 24px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp-stats li:first-child strong { color: var(--hi); }
.lp-stats sup { font-size: .5em; vertical-align: .8em; margin-left: 1px; }
.lp-stats small { font-size: .55em; font-weight: 700; }
.lp-stats li > span { color: rgba(230, 238, 247, .75); font-size: 12px; }
.lp-stats .lp-stat-note strong { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: #ffffff; white-space: normal; }
.lp-stat-note .i { width: 18px; height: 18px; color: var(--hi); }
/* the price distribution: equal price ranges, a bar per range */
.lp-chart { margin: 22px 0 0; max-width: 560px; }
.lp-chart figcaption { margin-bottom: 8px; color: rgba(230, 238, 247, .75); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.lp-bars { display: flex; align-items: flex-end; gap: 4px; height: 64px; margin: 0; padding: 0 0 2px; list-style: none; border-bottom: 1px solid rgba(255, 255, 255, .25); }
.lp-bars li { flex: 1; min-height: 2px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--hi), rgba(255, 255, 255, .35)); opacity: .9; }
.lp-bars li.bar-0 { background: rgba(255, 255, 255, .15); }
.bar-0 { height: 2%; } .bar-10 { height: 10%; } .bar-20 { height: 20%; } .bar-30 { height: 30%; } .bar-40 { height: 40%; } .bar-50 { height: 50%; } .bar-60 { height: 60%; } .bar-70 { height: 70%; } .bar-80 { height: 80%; } .bar-90 { height: 90%; } .bar-100 { height: 100%; }
.lp-axis { display: flex; justify-content: space-between; margin: 6px 0 0; color: rgba(230, 238, 247, .8); font-size: 12px; font-variant-numeric: tabular-nums; }
.lp-axis sup { font-size: .7em; vertical-align: .5em; }
.lp-axis small { font-size: .85em; }
.lp-updated { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; color: rgba(230, 238, 247, .75); font-size: 12px; }
/* the cheapest laptop on a white disc, with its price on a tag */
.lp-media { display: flex; flex-direction: column; align-items: center; justify-self: center; width: min(100%, 360px); color: inherit; }
.lp-media:hover { text-decoration: none; }
.lp-disc { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; padding: 15%; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #ffffff 0%, #ffffff 58%, #eef3f8 100%); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .55), 0 0 0 10px rgba(255, 255, 255, .06), 0 0 0 22px rgba(255, 255, 255, .03); }
.lp-disc img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s; }
.lp-media:hover .lp-disc img { transform: scale(1.05) rotate(-1.5deg); }
.lp-tag { position: relative; z-index: 2; display: inline-flex; align-items: baseline; gap: 6px; margin-top: -26px; padding: 9px 16px; border-radius: 999px; background: #ffffff; color: #1d232b; font-size: 12px; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .55); }
.lp-tag-label { color: #5d6572; }
.lp-tag strong { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lp-tag sup { font-size: .55em; vertical-align: .75em; }
.lp-tag small { font-size: .65em; }
.lp-media:hover .lp-tag strong { color: var(--primary); }
@media (max-width: 700px) {
  .lp-inner { padding: 22px 18px; }
  .lp-text h1 { font-size: 30px; }
  .lp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-stats li { min-width: 0; padding: 10px 12px; }
  .lp-stats strong { font-size: 20px; }
  .lp-stats .lp-stat-note { grid-column: 1 / -1; }
  .lp-media { width: min(64%, 230px); }
  .lp-tag strong { font-size: 16px; }
}
.lp-related { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 28px; border-top: 1px solid var(--border); border-radius: 0 0 18px 18px; background: var(--surface); box-shadow: var(--shadow-card); }
.lp-related-title { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.lp-related ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lp-related a { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--border); }
.lp-related a:hover { text-decoration: none; color: var(--link); box-shadow: inset 0 0 0 1px var(--primary); background: var(--primary-soft); }
.lr-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tone-bg); color: var(--tone); }
.lr-icon .i { width: 13px; height: 13px; }
.lp-related .n { color: var(--muted); font-weight: 500; font-size: 12px; }
@media (max-width: 700px) {
  .lp-related { flex-wrap: nowrap; flex-direction: column; align-items: stretch; padding: 12px 0 12px 18px; }
  .lp-related ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-right: 18px; }
  .lp-related ul::-webkit-scrollbar { display: none; }
  .lp-related li { flex: none; }
}

.lp-picks { margin-top: 24px; }
.lp-picks h2 { font-size: 20px; }
.picks-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .picks-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1300px) {
  .picks-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  /* when the data gives fewer answers, the cards share the row */
  .picks-grid:not(:has(> :nth-child(6))) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .picks-grid:not(:has(> :nth-child(5))) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pick { display: flex; flex-direction: column; min-width: 0; }
.pick-label { display: flex; align-items: center; gap: 8px; min-height: 54px; margin: 0; padding: 8px 12px; border-radius: 12px 12px 0 0; background: var(--tone-bg); color: var(--text); font-size: 13px; font-weight: 700; line-height: 1.25; }
.pick-icon { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 7px; background: var(--surface); color: var(--tone); }
.pick-icon .i { width: 14px; height: 14px; }
.pick .card { flex: 1; border-radius: 0 0 12px 12px; box-shadow: var(--shadow-card), inset 0 3px 0 var(--tone); }
.pick .card:hover { box-shadow: var(--shadow-hover), inset 0 3px 0 var(--tone); }
.picks-note { margin: 12px 0 0; color: var(--muted); font-size: 12px; }

/* Header of landing pages, searches, the compare and about pages */
.page-head { padding-top: 14px; }
.page-lead { margin: 0; color: var(--text-2); font-size: 15px; max-width: 70rem; }
.page-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.page-facts .i { color: var(--icon); width: 17px; height: 17px; }
.page-facts span + .i { margin-left: 12px; }
.related { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.related-title { font-weight: 600; font-size: 13px; color: var(--muted); }
.related ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.related a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 13px; }
.related a:hover { border-color: var(--primary); color: var(--link); text-decoration: none; }
.related .n { color: var(--muted); }

.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--text-2); }
.crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--muted); }
@media (max-width: 699px) { .crumbs li:last-child { min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } }

/* Listing: filters on the left, results on the right */
.listing { margin-top: 20px; scroll-margin-top: 130px; }
.layout-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 1000px) { .layout-list { grid-template-columns: 250px minmax(0, 1fr); align-items: start; } }
.filter-form { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.filters-summary { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 16px; font-size: 16px; font-weight: 700; cursor: pointer; }
.f-icon { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; margin-right: 10px; border-radius: 8px; background: var(--tone-bg); color: var(--tone); vertical-align: middle; }
.f-icon .i { width: 16px; height: 16px; }
.filters-summary .f-icon { margin-right: 0; }
.filters-summary::after { content: "▾"; margin-left: auto; color: var(--muted); }
.filters-toggle:checked ~ .filters-summary::after { content: "▴"; }
.filters-toggle:focus-visible ~ .filters-summary { outline: 2px solid var(--primary); outline-offset: -2px; }
.filters-body { display: none; padding: 0 16px 16px; }
.filters-toggle:checked ~ .filters-body { display: block; }
@media (min-width: 1000px) { .filters-summary { cursor: default; border-bottom: 1px solid var(--border); } .filters-summary::after { display: none; } .filters-body { display: block; } }
.field { margin-top: 14px; }
.field label, legend { display: flex; align-items: center; margin-bottom: 10px; font-weight: 700; font-size: 14px; }
fieldset { margin: 16px 0 0; padding: 16px 0 0; border: 0; border-top: 1px solid var(--border); }
fieldset > legend { float: left; width: 100%; padding: 0; }
fieldset > legend + * { clear: both; }
.field input, .range input { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--field-border); border-radius: var(--radius-s); background: var(--surface); color: var(--text); font: inherit; }
.field input:focus, .range input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.range { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.range label { font-size: 12px; color: var(--muted); font-weight: 400; }
.options { margin: 0; padding: 0; list-style: none; max-height: 290px; overflow-y: auto; }
.options label { display: flex; align-items: center; gap: 10px; min-height: 32px; margin: 0 -6px; padding: 0 6px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.options label:hover { background: var(--surface-2); color: var(--link); }
.options input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }
.options .n { margin-left: auto; min-width: 26px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 11px; text-align: center; }
.options label:has(input:checked) { color: var(--link); font-weight: 600; }
.options label:has(input:checked) .n { background: var(--primary-soft); color: var(--link); }
.filter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.filter-actions .button { flex: 1; }
.filters-reset { font-weight: 500; }

/* The list's header: title and count, the sort drop-down, active filters,
   and the compare strip, in one white panel. */
.results-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 14px; padding: 16px 20px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.results-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.rh-icon { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 12px; background: var(--tone-bg, var(--primary-soft)); color: var(--tone, var(--primary)); }
.rh-icon .i { width: 24px; height: 24px; stroke-width: 1.8; }
.rh-text { min-width: 0; }
.results-head h1, .results-head h2 { margin: 0; font-size: 21px; line-height: 1.2; letter-spacing: -.01em; }
.count { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.results-head .count { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; padding: 3px 10px 3px 9px; border-radius: 999px; background: var(--tone-bg, var(--primary-soft)); color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.results-head .count::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tone, var(--primary)); }
.sort-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.sort-form label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 13px; font-weight: 600; }
.sort-form label .i { width: 17px; height: 17px; color: var(--icon); }
/* A drawn drop-down: the native arrow is small and grey, so it is replaced
   by the chevron icon in a blue square (the icon ignores the pointer, so a
   click on it opens the list). */
.select { position: relative; display: inline-flex; min-width: 0; max-width: 100%; }
.select select { -webkit-appearance: none; appearance: none; width: 100%; min-width: 210px; height: 42px; padding: 0 46px 0 14px; border: 1px solid var(--field-border); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 1px 2px rgba(16, 24, 40, .06); transition: border-color .15s, box-shadow .15s; }
.select select:hover { border-color: var(--primary); }
.select select:focus { outline: none; }
.select select:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.select select option { background: var(--surface); color: var(--text); font-weight: 400; }
.select > .i { position: absolute; top: 50%; right: 7px; width: 28px; height: 28px; padding: 5px; margin-top: -14px; border-radius: var(--radius-s); background: var(--primary-soft); color: var(--primary); stroke-width: 2.4; pointer-events: none; transition: background .15s, color .15s; }
.select:hover > .i, .select:focus-within > .i { background: var(--primary); color: var(--on-primary); }
.sort-apply { height: 42px; padding: 0 14px; border: 1px solid var(--primary); border-radius: var(--radius); background: var(--surface); color: var(--link); font: inherit; font-weight: 600; cursor: pointer; }
/* The compare strip closes the panel. */
.rh-compare { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; flex: 1 0 100%; margin: 2px -20px -16px; padding: 10px 20px; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); background: var(--surface-2); color: var(--muted); font-size: 13px; }
.rh-compare-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--tint-blue); color: var(--primary); }
.rh-compare-icon .i { width: 17px; height: 17px; }
.rh-compare .hint { flex: 1 1 180px; min-width: 0; }
.rh-compare .button { min-height: 34px; padding: 0 14px; font-size: 13px; }
@media (max-width: 640px) {
  .results-head { padding: 14px 16px; }
  .results-title { flex-basis: 100%; }
  .rh-icon { width: 40px; height: 40px; border-radius: 10px; }
  .rh-icon .i { width: 21px; height: 21px; }
  .results-head h1, .results-head h2 { font-size: 19px; }
  .sort-form { flex: 1 1 100%; flex-wrap: nowrap; }
  .select { flex: 1; }
  .select select { min-width: 0; }
  .rh-compare { flex-wrap: nowrap; margin: 2px -16px -14px; padding: 10px 16px; }
  .rh-compare-icon { display: none; }
  .rh-compare .hint { flex-basis: 0; }
  .rh-compare .button { flex: none; }
}
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex-basis: 100%; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; }
.active-title { color: var(--muted); }
.active-filters ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.active-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 8px 0 12px; border-radius: 15px; background: var(--primary-soft); color: var(--link); font-weight: 500; }
.active-chip:hover { text-decoration: none; background: color-mix(in srgb, var(--primary) 16%, var(--surface)); }
.active-chip .x { font-size: 16px; line-height: 1; }
.active-clear { font-weight: 500; }
.compare-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.similar .compare-bar { margin: 14px 0 0; }
.empty { padding: 40px 0; color: var(--muted); }

/* Product cards: white, borderless, lift on hover */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 480px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
@media (max-width: 339px) { .grid { grid-template-columns: minmax(0, 1fr); } }
/* Positioned, so the visually hidden text inside stays in a scrolling row. */
.card { position: relative; display: flex; flex-direction: column; height: 100%; padding: 14px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-card); transition: box-shadow .15s, border-color .15s; }
.card:hover { box-shadow: var(--shadow-hover); }
.card-link { display: flex; flex-direction: column; gap: 10px; color: var(--text); }
.card-link:hover { text-decoration: none; }
.card-link:hover .card-title { color: var(--link); }
.card-media { position: relative; display: block; aspect-ratio: 1 / 1; background: #fff; border-radius: var(--radius-s); overflow: hidden; }
.card-media img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.badges { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.badge-gaming { background: #1d232b; color: #fff; }
.badge-refurb { background: #fff1d6; color: #7a3e00; }
.card-title { font-size: 14px; line-height: 1.4; min-height: calc(2 * 1.4em); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-specs { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-specs .sep { color: var(--border-strong); }
.card-buy { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding-top: 12px; }
.card-price { margin: 0; color: var(--price); font-size: 20px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card-price sup, .price sup, .buybar-price sup { font-size: .55em; vertical-align: .75em; margin-left: 1px; }
.card-price small, .price small, .buybar-price small { font-size: .62em; font-weight: 600; }
/* availability: the laptop was in the shop's offer at the last read (the
   API sends no stock, so this never says "în stoc") */
.card-stock { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: #047857; font-size: 12px; font-weight: 500; white-space: nowrap; }
/* a narrow card says only "Ofertă activă" (the button names the shop) */
.card { container-type: inline-size; }
@container (max-width: 210px) { .stock-shop { display: none; } }
.card-stock .dot, .stock .dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, .18); }
@media (prefers-color-scheme: dark) { .card-stock { color: #6ee7b7; } }
.card-cta { display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 10px; border-radius: var(--radius-s); background: var(--primary); color: var(--on-primary); font-weight: 600; font-size: 14px; }
.card-cta:hover { background: var(--primary-hover); color: var(--on-primary); text-decoration: none; }

.compare-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 28px; margin-top: 2px; font-size: 12px; color: var(--muted); cursor: pointer; }
.compare-toggle:hover { color: var(--link); }
.compare-toggle input { width: 14px; height: 14px; margin: 0; accent-color: var(--primary); }
@media (max-width: 480px) { .card { padding: 10px; } .card-price { font-size: 18px; } }

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px;
  border: 1px solid transparent; border-radius: var(--radius-s); background: var(--primary); color: var(--on-primary); font: inherit; font-weight: 600; cursor: pointer;
}
.button:hover { background: var(--primary-hover); color: var(--on-primary); text-decoration: none; }
.button .i { width: 18px; height: 18px; }
.button-secondary { background: var(--surface); color: var(--link); border-color: var(--field-border); }
.button-secondary:hover { background: var(--surface-2); color: var(--link); border-color: var(--primary); }
.button:disabled { opacity: .5; cursor: not-allowed; }
.cta { background: var(--primary); color: var(--on-primary); }
.cta:hover { background: var(--primary-hover); color: var(--on-primary); }
.cta .i { width: 16px; height: 16px; }

.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; }
.pagination ul { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pagination li > *, .pagination > a { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 38px; height: 38px; padding: 0 10px; border-radius: var(--radius-s); background: var(--surface); box-shadow: var(--shadow-card); color: var(--text); font-weight: 500; }
.pagination > a .i { width: 16px; height: 16px; }
.pagination a:hover { color: var(--link); text-decoration: none; box-shadow: 0 0 0 1px var(--primary); }
.pagination [aria-current] { background: var(--primary); color: var(--on-primary); }

/* Product page: one white card holds the product. Picture on the left,
   following the scroll; on the right the model, the shop's full name, the
   offer between two rules, then "pe scurt" and the price position. Below
   the card, sections without boxes. */
.pd { padding-top: 14px; }
.pd-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 8px; padding: 20px; background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-card); }
/* Phones: the two columns melt into one list, in reading order: title,
   picture, offer, key facts, price position. */
.pd-col { display: contents; }
.pd-title { order: 1; min-width: 0; }
.pd-media { order: 2; min-width: 0; }
.pd-main .offer { order: 3; min-width: 0; }
.pd-facts { order: 4; min-width: 0; }
.pd-main .position { order: 5; min-width: 0; }
/* Wider: two independent columns, the picture and the price position on the
   left, the title, the offer and the key facts on the right. */
@media (min-width: 900px) {
  .pd-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 0 44px; padding: 32px; }
  .pd-col { display: flex; flex-direction: column; min-width: 0; }
  .pd-main .offer { margin-top: 22px; }
  .pd-facts { padding-top: 22px; }
}
/* the picture on a soft stage: the white of the shop's photo multiplies
   into the tint, and a floor shadow grounds the laptop */
.stage {
  position: relative; display: grid; place-items: center; width: 100%; max-width: 520px; margin: 0 auto; aspect-ratio: 1 / 1; padding: 8%; overflow: hidden; border-radius: 18px;
  background: radial-gradient(ellipse 75% 65% at 50% 42%, #ffffff 0%, #f3f7fb 55%, #e6eef6 100%);
}
.stage::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 11%; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(16, 24, 40, .16), transparent); }
.stage img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s ease; }
.stage:hover img { transform: scale(1.03); }
@media (prefers-color-scheme: dark) { .stage { background: radial-gradient(ellipse 75% 65% at 50% 42%, #ffffff 0%, #f1f4f8 60%, #dde5ee 100%); } }
.zoom { margin: 10px 0 0; text-align: center; font-size: 13px; }
.zoom a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.zoom a:hover { color: var(--link); }
.zoom .i { width: 15px; height: 15px; }
.stage.is-zoomable { cursor: zoom-in; }
/* the larger picture, over the page */
.lightbox { width: min(92vw, 860px); max-height: 92vh; padding: 24px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.lightbox::backdrop { background: rgba(16, 24, 40, .72); }
.lightbox img { display: block; width: 100%; height: auto; max-height: calc(92vh - 48px); object-fit: contain; }
.lightbox-close { position: absolute; top: 10px; right: 10px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(16, 24, 40, .08); color: #1d232b; cursor: pointer; }
.lightbox-close:hover { background: rgba(16, 24, 40, .16); }
.lightbox-close .i { width: 20px; height: 20px; }
.pd-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pd-tags .badge { position: static; padding: 4px 10px; border-radius: 999px; font-size: 12px; }
.brand-chip { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 13px; font-weight: 700; }
.brand-chip .ml-mono { display: grid; place-items: center; width: 26px; height: 26px; font-size: 12px; }
a.brand-chip:hover { text-decoration: none; border-color: var(--primary); color: var(--link); }
.pd-title h1 { margin: 14px 0 6px; font-size: 32px; line-height: 1.15; letter-spacing: -.02em; }
.pd-config { margin: 0 0 10px; color: var(--text-2); font-size: 15px; line-height: 1.55; }
.pd-code { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: 13px; }
/* a label that screen readers say and copying keeps, without drawing it */
.sr-label { font-size: 0; }
.pn { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.copy-btn { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--link); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.copy-btn:hover { border-color: var(--primary); }
.copy-btn .i { width: 14px; height: 14px; }
.copy-btn::after { content: attr(data-label); }
.copy-btn.is-done { border-color: #10b981; color: #047857; }

/* the offer: a buy box on an ice-blue ground */
.pd-main .offer { padding: 22px 22px 18px; border-radius: 16px; background: linear-gradient(160deg, #f4f9fe 0%, #eaf3fb 100%); }
@media (prefers-color-scheme: dark) { .pd-main .offer { background: linear-gradient(160deg, #13263a 0%, #0f2033 100%); } }
.buy-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.buy-top .verdict { gap: 4px; }
.buy-top .verdict .i { width: 13px; height: 13px; }
.price { margin: 0; color: var(--price); font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.price-note { margin: 8px 0 16px; color: var(--muted); font-size: 13px; }
.seller { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; padding: 12px 0; border-top: 1px solid rgba(3, 105, 161, .12); border-bottom: 1px solid rgba(3, 105, 161, .12); }
.seller-mono { display: grid; place-items: center; width: 34px; height: 34px; flex: none; font-size: 14px; background: var(--surface); }
.seller-text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.seller-label { color: var(--muted); font-size: 12px; }
.seller-text strong { font-size: 15px; }
.stock-line { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; border-radius: 999px; background: #ecfdf5; color: #047857; font-size: 13px; }
.stock-line strong { font-weight: 700; }
.stock-line .dot, .buybar .dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, .2); }
.stock-off { margin-bottom: 10px; background: #fef2f2; color: #b91c1c; }
.stock-off .dot { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .2); }
@media (prefers-color-scheme: dark) { .stock-line { background: #0f2e22; color: #6ee7b7; } .stock-off { background: #3a1616; color: #fca5a5; } }
.offer .cta { min-height: 40px; padding: 0 20px; gap: 7px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.offer .cta .i { width: 14px; height: 14px; }
.buy-facts { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--text-2); }
.buy-facts li { display: flex; align-items: center; gap: 10px; }
.bf-icon { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 7px; background: var(--tone-bg); color: var(--tone); }
.bf-icon .i { width: 14px; height: 14px; }
.refurb-note { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; font-size: 13px; color: var(--text-2); }
.refurb-note .i { width: 17px; height: 17px; margin-top: 1px; flex: none; color: var(--icon); }
.refurb-note { padding: 10px 12px; border-radius: 8px; background: #fff7ea; color: #7a3e00; }
.refurb-note .i { color: #b45309; }
@media (prefers-color-scheme: dark) { .refurb-note { background: #33250e; color: #fcd34d; } .refurb-note .i { color: #fbbf24; } }
.unavailable { margin: 0; font-weight: 600; }

/* "pe scurt": the key specifications, two by two, no boxes */
.pd-keys-title { margin: 0 0 14px; font-size: 16px; }
/* "pe scurt": a strip of key specifications, icon above, value, label */
.pd-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); margin: 0; padding: 0; list-style: none; }
.pd-keys li { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 6px 10px; text-align: center; }
.pd-keys li + li { border-left: 1px solid var(--border); }
.key-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 50%; background: var(--tone-bg); color: var(--tone); }
.key-icon .i { width: 21px; height: 21px; }
.key-value { font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.key-label { color: var(--muted); font-size: 12px; }
@media (max-width: 560px) { .pd-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; } .pd-keys li + li { border-left: 0; } }

/* Price position: where this laptop's price sits among the laptops with
   the same memory and screen (green cheap → red dear) */
.position { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.position-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.position-head h2 { font-size: 16px; }
.verdict { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.verdict-low { background: #dcfce7; color: #166534; }
.verdict-mid { background: #fef3c7; color: #92400e; }
.verdict-high { background: #fee2e2; color: #991b1b; }
@media (prefers-color-scheme: dark) { .verdict-low { background: #0f2e22; color: #86efac; } .verdict-mid { background: #33250e; color: #fcd34d; } .verdict-high { background: #3a1616; color: #fca5a5; } }
.position-intro { margin: 6px 0 14px; color: var(--muted); font-size: 13px; }
.position-bar { position: relative; height: 10px; margin: 0 9px; border-radius: 5px; background: linear-gradient(90deg, #22c55e 0%, #a3e635 30%, #facc15 55%, #fb923c 78%, #ef4444 100%); }
.position-mark { position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 4px solid var(--surface); border-radius: 50%; background: var(--text); box-shadow: 0 2px 6px rgba(16, 24, 40, .35); }
.pos-0 { left: 0%; } .pos-5 { left: 5%; } .pos-10 { left: 10%; } .pos-15 { left: 15%; } .pos-20 { left: 20%; } .pos-25 { left: 25%; } .pos-30 { left: 30%; } .pos-35 { left: 35%; } .pos-40 { left: 40%; } .pos-45 { left: 45%; } .pos-50 { left: 50%; } .pos-55 { left: 55%; } .pos-60 { left: 60%; } .pos-65 { left: 65%; } .pos-70 { left: 70%; } .pos-75 { left: 75%; } .pos-80 { left: 80%; } .pos-85 { left: 85%; } .pos-90 { left: 90%; } .pos-95 { left: 95%; } .pos-100 { left: 100%; }
.position-scale { display: flex; justify-content: space-between; gap: 12px; margin: 12px 0 0; color: var(--muted); font-size: 12px; }
.position-scale span:last-child { text-align: right; }
.position-scale strong { display: block; color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums; }
.position-scale sup { font-size: .6em; vertical-align: .7em; }
.position-scale small { font-size: .75em; }
.position-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 12px 0 0; font-size: 13px; }

/* Below the card: the specification sheet, then similar laptops */
.pd-section { margin: 20px 0 32px; scroll-margin-top: 130px; }
.pd-section h2 { font-size: 20px; }
/* Details: one white panel with professional tabs (Descriere,
   Specificații, Recenzii). Without JS the panels follow one another. */
.pd-details { background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-card); overflow: hidden; }
.tabs { border-bottom: 1px solid var(--border); background: var(--surface); }
.tabs ul { display: flex; gap: 4px; margin: 0; padding: 0 16px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.tabs ul::-webkit-scrollbar { display: none; }
.tabs a {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 58px; padding: 0 18px;
  color: var(--text-2); font-size: 15px; font-weight: 600; white-space: nowrap;
}
.tabs a .i { width: 18px; height: 18px; color: var(--icon); }
.tabs a:hover { color: var(--link); text-decoration: none; }
.tabs a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; }
.tabs a[aria-selected="true"] { color: var(--link); }
.tabs a[aria-selected="true"] .i { color: var(--primary); }
.tabs a[aria-selected="true"]::after { background: var(--primary); }
.tabs a:focus-visible { outline-offset: -4px; }
.tab-panel { padding: 24px 28px 26px; }
.tab-panel:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.tab-panel + .tab-panel { border-top: 1px solid var(--border); }
.panel-title { margin: 0 0 12px; font-size: 20px; }
/* as tabs, the tab names the panel: its heading is for screen readers */
.is-tabs .panel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.is-tabs .tab-panel + .tab-panel { border-top: 0; }
.desc { max-width: 60rem; }
.desc p { margin: 0 0 12px; color: var(--text-2); font-size: 15px; line-height: 1.7; }
.desc p:first-child { color: var(--text); font-size: 17px; line-height: 1.6; }
.panel-note { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; }
.panel-note .i { width: 15px; height: 15px; margin-top: 1px; color: var(--icon); }
.reviews-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 34rem; margin: 0 auto; padding: 18px 0 8px; text-align: center; }
.reviews-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 4px; border-radius: 50%; background: var(--tone-bg); color: var(--tone); }
.reviews-icon .i { width: 26px; height: 26px; }
.reviews-head { margin: 0; font-size: 17px; font-weight: 700; }
.reviews-text { margin: 0 0 8px; color: var(--muted); font-size: 14px; line-height: 1.6; }
@media (max-width: 600px) { .tabs ul { padding: 0 4px; } .tabs a { padding: 0 12px; font-size: 14px; } .tab-panel { padding: 18px 16px 20px; } }
.spec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 8px; }
.spec-head .panel-title { margin: 0; }
.spec-source { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: 13px; }
.spec-source .i { width: 15px; height: 15px; color: var(--icon); }
.spec-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 48px; }
@media (min-width: 900px) { .spec-cols { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.spec-group h3 { margin: 14px 0 4px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.spec-list { margin: 0; }
.spec-row { display: grid; grid-template-columns: minmax(0, 45%) minmax(0, 1fr); gap: 16px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border); }
.spec-list .spec-row:last-child { border-bottom: 0; }
.spec-row dt { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }
.spec-row dd { margin: 0; color: var(--text); font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.spec-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 8px; background: var(--tone-bg); color: var(--tone); }
.spec-icon .i { width: 17px; height: 17px; }
.spec-name { margin: 12px 0 0; padding-top: 4px; border-top: 1px solid var(--border-strong); }
.spec-name .spec-row { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); border-bottom: 0; }
.spec-name dd { color: var(--text-2); font-size: 14px; font-weight: 500; line-height: 1.5; }
@media (max-width: 600px) {
  .spec-row { grid-template-columns: minmax(0, 48%) minmax(0, 1fr); gap: 10px; padding: 10px 0; }
  .spec-row dt { gap: 10px; font-size: 13px; }
  .spec-row dd { font-size: 14px; }
  .spec-icon { width: 28px; height: 28px; border-radius: 7px; }
  .spec-icon .i { width: 15px; height: 15px; }
  .spec-name .spec-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .spec-name dd { padding-left: 38px; }
}
.spec-note { margin: 14px 0 0; color: var(--muted); font-size: 12px; }
.similar .row-cards .card { box-shadow: var(--shadow-card); }

.buybar { display: none; }
@media (max-width: 859px) {
  .buybar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); box-shadow: 0 -2px 12px rgba(16, 24, 40, .1);
  }
  .buybar-price { display: flex; flex-direction: column; min-width: 0; }
  .buybar-price strong { color: var(--price); font-size: 20px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .buybar-price > span { display: flex; align-items: center; gap: 6px; overflow: hidden; color: #047857; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
  .buybar .dot { width: 7px; height: 7px; }
  .buybar-cta { flex: none; min-height: 44px; }
  body:has(.buybar) .foot { padding-bottom: 76px; }
}
@media (max-width: 600px) { .pd-main { padding: 16px; } .pd-title h1 { font-size: 24px; } .price { font-size: 34px; } }

/* Compare */
.compare-page { margin-top: 16px; }
.compare-wrap { position: relative; overflow-x: auto; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.compare { width: 100%; min-width: 680px; border-collapse: collapse; }
.compare th, .compare td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; font-size: 14px; }
.compare thead th { vertical-align: bottom; }
.compare thead a { display: flex; flex-direction: column; gap: 6px; color: var(--text); }
.compare thead a:hover { text-decoration: none; }
.compare thead a:hover .cmp-title { color: var(--link); }
.cmp-media { display: block; max-width: 170px; aspect-ratio: 1 / 1; overflow: hidden; background: #fff; border-radius: var(--radius-s); }
.cmp-media img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.card-brand { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cmp-title { font-size: 13px; font-weight: 500; line-height: 1.4; }
.compare tbody th { position: sticky; left: 0; z-index: 1; background: var(--surface); color: var(--muted); font-weight: 400; white-space: nowrap; }
.compare .differ > * { background: var(--differ); }
.compare td.best { background: var(--best); color: var(--best-text); font-weight: 700; }
.best-tag { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: var(--surface); color: var(--best-text); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.best-tag .i { width: 12px; height: 12px; }
.cmp-actions td, .cmp-actions th { border-bottom: 0; }
.cmp-actions .cta { min-height: 40px; font-size: 14px; }

/* About */
.about { margin-top: 16px; }
.about-body { max-width: 52rem; padding: 8px 28px; }
.about-body section { padding: 18px 0; border-bottom: 1px solid var(--border); }
.about-body section:last-child { border-bottom: 0; }
.about-body h2 { margin-bottom: 6px; font-size: 16px; }
.about-body p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.65; }
@media (max-width: 560px) { .about-body { padding: 4px 18px; } }

/* Empty states: nothing to compare, page not found */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 16px; text-align: center; }
.notfound { margin-top: 24px; }
.search-inline { flex: none; width: 100%; max-width: 560px; margin: 8px 0 12px; }
.empty-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; border-radius: 50%; background: var(--surface-2); color: var(--primary); }
.empty-icon .i { width: 30px; height: 30px; }
.soon { max-width: 42rem; padding-top: 48px; padding-bottom: 48px; }

/* Footer: a deep navy close to the page. A search with the site's real
   numbers, the promises, the link columns (categories and specifications
   with their icons, brands as pills with their counts), then the legal bar
   with the price notice, the documents and a way back up. */
.foot { position: relative; margin-top: 40px; overflow: hidden; background: #0a1f3b; color: #b9c6d6; font-size: 13px; }
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #0369a1, #0ea5e9 45%, #10b981); }
.foot::after { content: ""; position: absolute; top: -220px; right: -160px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(closest-side, rgba(14, 165, 233, .16), transparent); pointer-events: none; }
.foot > * { position: relative; z-index: 1; }
.foot a { color: #dbe5f0; }
.foot a:hover { color: #ffffff; }

.foot-top { padding: 44px 0 0; }
.foot-top-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 56px; align-items: center; }
@media (min-width: 1000px) { .foot-top-row { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.foot .foot-pitch-title { margin: 0 0 6px; color: #ffffff; font-size: 28px; font-weight: 800; letter-spacing: -.02em; text-transform: none; }
.foot-pitch > p { margin: 0 0 16px; color: #b9c6d6; font-size: 15px; }
.foot-search { max-width: 560px; justify-self: start; }
.foot-search input { border-color: transparent; background: #ffffff; color: #1d232b; }
.foot-search input:focus { border-color: #7dd3fc; box-shadow: 0 0 0 3px rgba(125, 211, 252, .35); }
.foot-search button { background: #10b981; color: #052e1f; }
.foot-search button:hover { background: #34d399; }
.foot-pitch > .foot-updated { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: #93a4b8; font-size: 12px; }
.foot-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, .08); }
@media (min-width: 600px) { .foot-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.foot-stats li { display: flex; flex-direction: column; gap: 2px; padding: 18px 16px; background: #0d2646; }
.foot-stats strong { color: #ffffff; font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.foot-stats li:nth-child(1) strong { color: #7dd3fc; }
.foot-stats li:nth-child(4) strong { color: #6ee7b7; }
.foot-stats span { color: #93a4b8; font-size: 12px; line-height: 1.35; }

.foot-benefits { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 28px; margin: 36px auto 0; padding-top: 28px; padding-bottom: 32px; list-style: none; border-top: 1px solid rgba(255, 255, 255, .08); }
@media (min-width: 700px) { .foot-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .foot-benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.foot-benefits li { display: flex; align-items: flex-start; gap: 12px; color: #93a4b8; line-height: 1.5; }
.foot-benefits strong { display: block; color: #ffffff; font-size: 14px; font-weight: 700; }
.fb-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: rgba(255, 255, 255, .06); color: var(--tone); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.fb-icon .i { width: 20px; height: 20px; }
/* the tones, lightened for the dark ground */
.foot .tone-blue { --tone: #7dd3fc; }
.foot .tone-green { --tone: #6ee7b7; }
.foot .tone-amber { --tone: #fcd34d; }
.foot .tone-violet { --tone: #c4b5fd; }

.foot-main { background: #081a33; border-top: 1px solid rgba(255, 255, 255, .06); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 40px; padding-top: 40px; padding-bottom: 36px; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .foot-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); } }
.foot h2 { margin: 0 0 14px; color: #ffffff; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.foot-brand .logo { --logo-ink: #ffffff; --logo-tld: #34d399; }
.foot-brand .logo-mark { filter: drop-shadow(0 6px 14px rgba(14, 165, 233, .3)); }
.foot-contact { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.foot .foot-contact a { display: inline-flex; align-items: center; gap: 10px; color: #ffffff; font-weight: 600; }
.foot .foot-contact a:hover { color: #7dd3fc; text-decoration: none; }
.foot-contact .fl-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(16, 185, 129, .16); color: #34d399; }
.foot-contact .fl-icon .i { width: 16px; height: 16px; }
.foot-about p { margin: 14px 0 0; max-width: 28rem; color: #93a4b8; line-height: 1.6; }
.foot .foot-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: #7dd3fc; }
.foot-link .i { width: 16px; height: 16px; }
.foot-col ul { margin: 0; padding: 0; list-style: none; }
.foot .foot-col li a { display: flex; align-items: center; gap: 10px; padding: 5px 0; color: #c7d3e0; }
.foot .foot-col li a:hover { color: #ffffff; text-decoration: none; }
.foot-col li a:hover .fl-label { text-decoration: underline; text-underline-offset: 3px; }
.fl-icon { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 6px; background: rgba(255, 255, 255, .06); color: #7dd3fc; }
.fl-icon .i { width: 14px; height: 14px; }
.fl-label { flex: 1; min-width: 0; }
.foot-col .n { color: #8195ab; font-size: 11px; font-variant-numeric: tabular-nums; }
/* brands: pills with their counts */
.foot-brands ul { display: flex; flex-wrap: wrap; gap: 8px; }
.foot .foot-brands li a { gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); font-weight: 600; }
.foot .foot-brands li a:hover { background: rgba(14, 165, 233, .18); box-shadow: inset 0 0 0 1px rgba(125, 211, 252, .5); }
.foot-brands li a:hover .fl-label { text-decoration: none; }
.foot-brands .n { color: #93a4b8; font-weight: 500; }

.foot-legal { padding: 22px 0; background: #061429; border-top: 1px solid rgba(255, 255, 255, .06); color: #93a4b8; }
.foot-legal p { margin: 0; max-width: 78rem; line-height: 1.6; }
.foot-legal .foot-prices { font-size: 12px; }
.foot-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .08); }
.foot-bar .copy { color: #8195ab; }
.foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.foot .foot-links a { color: #b9c6d6; }
.foot .foot-links a:hover { color: #ffffff; }
.foot .to-top { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); font-weight: 600; }
.foot .to-top:hover { background: rgba(255, 255, 255, .12); text-decoration: none; }
.to-top .i { width: 15px; height: 15px; }
html { scroll-behavior: smooth; }
@media (max-width: 600px) { .foot .foot-pitch-title { font-size: 22px; } .foot-stats strong { font-size: 24px; } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
@media (forced-colors: active) { .button, .card-cta, .search button, .banner-go { border: 1px solid ButtonText; } }
/* The logo's sign (the laptop-L and its green ".ro" dot) at the left edge
   of the offer buttons (operator, 2026-09-29: "only the sign with the green
   dot, much further left"), in the button's text colour. */
/* beats ".offer .cta .i" and ".cta .i", which size the external-link icon */
:is(.button, .card-cta, .mf-go) > .i.i-mark { position: absolute; top: 50%; left: 12px; width: 22px; height: 22px; margin-top: -11px; --mark-dot: #6ee7b7; }
.mk-dot { fill: var(--mark-dot); }
.button-secondary > .i.i-mark { --mark-dot: var(--green); }
@media (prefers-color-scheme: dark) { :is(.button, .card-cta, .mf-go) > .i.i-mark { --mark-dot: #065f46; } .button-secondary > .i.i-mark { --mark-dot: var(--green); } }
:is(.button, .card-cta, .mf-go):has(> .i-mark) { position: relative; padding-left: 44px; }
:is(.card-cta, .mf-go):has(> .i-mark) { padding-right: 12px; }
/* The about page: the landing hero with the brand's mark on the disc, the
   three steps, the facts, what the site does not do, contact, documents. */
.about-disc { display: grid; place-items: center; padding: 20%; }
.about-mark { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 26px rgba(3, 105, 161, .35)); transition: transform .35s; }
.about-media:hover .about-mark { transform: rotate(-6deg) scale(1.04); }
.about-block { margin-top: 28px; }
.about-h2 { margin: 0 0 16px; font-size: 22px; line-height: 1.25; letter-spacing: -.01em; }
.how-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.how-steps li { position: relative; padding: 24px 24px 26px; overflow: hidden; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-card); counter-increment: step; }
/* the step's number, large and faint, drawn by CSS (decoration, not text) */
.how-steps li::after { content: counter(step); position: absolute; top: 6px; right: 18px; color: var(--tone-bg); font-size: 72px; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.how-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 15px; background: var(--tone-bg); color: var(--tone); }
.how-icon .i { width: 27px; height: 27px; }
.how-steps h3 { position: relative; z-index: 1; margin: 18px 0 6px; font-size: 17px; line-height: 1.3; }
.how-steps p { position: relative; z-index: 1; margin: 0; color: var(--text-2); line-height: 1.55; }
.fact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fact { padding: 22px 22px 24px; border-top: 3px solid var(--tone); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-card); }
.fact-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--tone-bg); color: var(--tone); }
.fact-icon .i { width: 22px; height: 22px; }
.fact h3 { margin: 14px 0 6px; font-size: 16px; }
.fact p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.6; }
.about-bottom { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.promise, .contact-card, .legal-card { padding: 26px; border-radius: 14px; }
.promise-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.promise-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; }
.pl-icon { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--best); color: var(--best-text); }
.pl-icon .i { width: 15px; height: 15px; stroke-width: 2.4; }
.about-side { display: grid; gap: 16px; }
.contact-card p { margin: 0; color: var(--text-2); }
.contact-lines, .legal-card ul { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.contact-lines a { display: inline-flex; align-items: center; gap: 12px; color: var(--text); font-size: 16px; font-weight: 700; }
.contact-lines a:hover { color: var(--link); text-decoration: none; }
.cl-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--tone-bg); color: var(--tone); }
.cl-icon .i { width: 19px; height: 19px; }
.legal-card ul { margin-top: 0; }
.legal-card a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); color: var(--text); font-weight: 600; }
.legal-card a:hover { background: var(--primary-soft); color: var(--link); text-decoration: none; }
.legal-card a > .i:last-child { width: 16px; height: 16px; margin-left: auto; color: var(--icon); }
.ll-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 8px; background: var(--surface); color: var(--primary); box-shadow: inset 0 0 0 1px var(--border); }
.ll-icon .i { width: 17px; height: 17px; }
@media (max-width: 1000px) { .fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .about-bottom { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .how-steps, .fact-grid { grid-template-columns: minmax(0, 1fr); } .promise, .contact-card, .legal-card { padding: 20px; } }
@media (prefers-reduced-motion: reduce) { .about-mark { transition: none; } .about-media:hover .about-mark { transform: none; } }

/* The legal documents: a tinted head with the other documents, a sticky
   table of contents, numbered sections in one white panel. */
.doc-hero { margin-top: 16px; }
.doc-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: start; padding: 28px 32px 30px; border-radius: 16px;
  background: linear-gradient(120deg, var(--tone-bg) 0%, color-mix(in srgb, var(--tone-bg) 45%, var(--surface)) 55%, var(--surface) 100%); box-shadow: var(--shadow-card); }
.doc-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 4px 14px 4px 4px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-2); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.doc-kicker-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tone-bg); color: var(--tone); }
.doc-kicker-icon .i { width: 16px; height: 16px; }
.doc-hero h1 { margin: 14px 0 8px; font-size: 36px; line-height: 1.15; letter-spacing: -.02em; }
.doc-lead { max-width: 760px; margin: 0; color: var(--text-2); font-size: 16px; line-height: 1.6; }
.doc-updated { display: inline-flex; align-items: center; gap: 7px; margin: 14px 0 0; color: var(--muted); font-size: 13px; }
.doc-updated .i { width: 15px; height: 15px; }
.doc-others { min-width: 270px; padding: 16px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-card); }
.doc-others-title, .doc-toc-title { margin: 0 0 8px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.doc-others ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.doc-others a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--text); font-weight: 600; }
.doc-others a:hover { background: var(--primary-soft); color: var(--link); text-decoration: none; }
.doc-others a > .i:last-child { width: 15px; height: 15px; margin-left: auto; color: var(--icon); }
.do-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--surface-2); color: var(--primary); }
.do-icon .i { width: 16px; height: 16px; }
.doc-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 20px; }
.doc-toc { position: sticky; top: 156px; padding: 18px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-card); }
.doc-toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.doc-toc li { counter-increment: toc; }
.doc-toc a { display: flex; align-items: flex-start; gap: 10px; padding: 7px 8px; border-radius: 8px; color: var(--text-2); font-size: 14px; line-height: 1.35; }
.doc-toc a::before { content: counter(toc); display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 700; }
.doc-toc a:hover { background: var(--primary-soft); color: var(--link); text-decoration: none; }
.doc-toc a:hover::before { background: var(--primary); color: var(--on-primary); }
.doc-body { padding: 8px 40px 20px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-card); }
.doc-section { padding: 26px 0; border-bottom: 1px solid var(--border); scroll-margin-top: 156px; }
.doc-section:last-child { border-bottom: 0; }
.doc-section h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 20px; line-height: 1.3; letter-spacing: -.01em; }
.doc-num { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--primary-soft); color: var(--primary); font-size: 15px; font-weight: 800; }
.doc-section p { max-width: 80ch; margin: 0 0 12px; color: var(--text-2); font-size: 15px; line-height: 1.7; }
.doc-list { display: grid; gap: 8px; max-width: 80ch; margin: 0 0 12px; padding: 0; list-style: none; }
.doc-list li { position: relative; padding-left: 26px; color: var(--text-2); font-size: 15px; line-height: 1.65; }
.doc-list li::before { content: ""; position: absolute; top: .62em; left: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.doc-section > :last-child { margin-bottom: 0; }
@media (max-width: 1000px) { .doc-hero-in { grid-template-columns: minmax(0, 1fr); } .doc-others { min-width: 0; } }
@media (max-width: 900px) { .doc-layout { grid-template-columns: minmax(0, 1fr); } .doc-toc { position: static; } }
@media (max-width: 700px) { .doc-hero-in { padding: 20px 18px 22px; } .doc-hero h1 { font-size: 28px; } .doc-body { padding: 0 18px 8px; } .doc-section { padding: 20px 0; scroll-margin-top: 16px; } .doc-section h2 { font-size: 18px; } }

/* The compare dock: fixed at the bottom while laptops are ticked (JS). */
.compare-dock { position: fixed; right: 0; bottom: 0; left: 0; z-index: 28; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: var(--surface);
  box-shadow: 0 -1px 0 var(--border), 0 -8px 24px rgba(16, 24, 40, .12); animation: dock-in .2s ease-out; }
.compare-dock[hidden] { display: none; }
@keyframes dock-in { from { transform: translateY(100%); } to { transform: none; } }
.compare-dock-row { display: flex; align-items: center; gap: 12px 16px; }
.cd-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--primary-soft); color: var(--primary); }
.cd-icon .i { width: 22px; height: 22px; }
.cd-text { display: flex; flex: 1; flex-direction: column; min-width: 0; margin: 0; line-height: 1.3; }
.cd-text strong { font-size: 16px; }
.cd-text span { color: var(--muted); font-size: 13px; }
.cd-clear { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text-2); font: inherit; font-weight: 600; cursor: pointer; }
.cd-clear:hover { border-color: var(--primary); color: var(--link); }
.cd-clear .i { width: 16px; height: 16px; }
.cd-go { min-height: 44px; padding: 0 22px; font-size: 15px; }
.cd-go:disabled { opacity: .45; cursor: not-allowed; }
/* The page's end stays visible above the dock, and the product page's buy
   bar gives way to it while comparing. */
.comparing .foot { padding-bottom: 76px; }
.comparing .buybar { display: none; }
@media (max-width: 600px) {
  .cd-icon { display: none; }
  .cd-clear span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cd-clear { padding: 0 11px; }
  .cd-go { padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) { .compare-dock { animation: none; } }

@media print { .top, .filters, .buybar, .compare-bar, .compare-dock, .foot, .car-btn, .dots { display: none; } body { background: #fff; } }