/* design.css — restyle RegnoTech (7 novembre 2026).
   Palette ricavata dal logo (blu notte #12224a + blu #3464b4), testata bianca che mostra il logo nei suoi colori,
   carattere Inter (sans-serif da e-commerce, sulla linea di MediaWorld/Amazon) servito in locale da /fonts.
   Servito da index.js come ultimo foglio di stile nel <head> (cascata per ordine). Nessuna variabile o classe
   del sito viene rinominata o rimossa: cambiano solo i valori, così cart-feedback.js, pages-ui.js e i template
   catturati seguono la nuova palette da soli.
   Ogni blocco è indipendente: per tornare a un pezzo basta cancellare il blocco.
   Versione precedente ("carta, blu oceano e senape") salvata in .old-brand-assets/design.prev.css. */

/* 0 — Carattere: Inter variabile (OFL, licenza in /fonts/Inter-OFL.txt) */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/inter-latin-wght-normal.woff2) format("woff2-variations"), url(/fonts/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations"), url(/fonts/inter-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 1 — Palette dal logo: blu RegnoTech per bottoni/link, blu notte per fasce scure e footer,
       grigio-azzurro chiaro come sfondo, rosso per sconti e prezzo barrato */
:root {
  --color-porcelain: #f3f5f9;          /* sfondo pagina */
  --color-porcelain-deep: #e7ebf2;
  --color-studio: #ffffff;             /* pannelli */
  --color-line: #dde2ea;
  --color-line-strong: #b8c0cf;
  --color-ink: #121a2f;                /* testo */
  --color-ink-soft: #3c465c;
  --color-ink-mute: #5f6a80;
  --color-night: #12224a;              /* blu notte del logo: fasce scure, footer */
  --color-ultramarine: #2f5fb3;        /* blu del logo: bottoni primari, link, stati attivi */
  --color-ultramarine-700: #254c91;
  --color-ultramarine-900: #12224a;
  --color-ultramarine-50: #e8eef9;
  --color-saffron: #f2b705;            /* accento caldo: etichette "Novità", dettagli */
  --color-pomegranate: #d4242f;        /* sconti e prezzo barrato */
  --color-pomegranate-50: #fde8e9;
  --color-maiolica: #1f8a70;
  --color-maiolica-ink: #166650;
  --color-maiolica-50: #e2f3ee;
  --color-pav-telefonia: #2f5fb3;
  --color-pav-informatica: #12224a;
  --color-pav-componenti-pc: #e0662a;
  --color-pav-tv-audio: #6a4fc4;
  --color-pav-elettrodomestici: #1f8a70;
  --color-pav-gaming: #d4242f;
  --color-vice-pink: #e2367f;          /* bottone e banner GTA VI */
  --color-vice-orange: #f59a23;
  --color-vice-teal: #3fc1c9;
}

/* 2 — Caratteri: tutto in Inter, titoli in grassetto con spaziatura stretta (niente serif, niente Archivo espanso) */
:root {
  --font-sans: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
html { font-feature-settings: "cv11", "ss01"; }
h1, h2, h3, .t-display, .text-display {
  font-family: var(--font-sans);
  font-weight: 800;
  font-stretch: 100%;
  letter-spacing: -0.02em;
}
.t-display, .stretch-expanded { font-stretch: 100%; }
article h3,
footer h2,
.promo-tag h2 {
  font-weight: 700;
  letter-spacing: -0.005em;
}
.tabular { font-variant-numeric: tabular-nums; }

/* 3 — Forme: angoli morbidi ma contenuti */
:root {
  --radius-panel: 10px;
  --radius-button: 8px;
  --radius-field: 8px;
  --radius-well: 8px;
  --radius-chip: 999px;
}
[class*="rounded-[22px]"],
[class*="rounded-[26px]"],
.rounded-2xl { border-radius: 12px; }
.rounded-xl { border-radius: 10px; }

/* 4 — Testata bianca: il logo resta nei suoi colori, campo di ricerca grigio chiaro, menu reparti su fondo bianco */
header.sticky {
  background-color: rgb(255 255 255 / 0.96);
  border-bottom-color: var(--color-line);
  color: var(--color-ink);
  box-shadow: 0 6px 18px -16px rgb(18 34 74 / 0.45);
}
header.sticky .hover\:bg-studio:hover:not(dialog *) { background-color: var(--color-porcelain); }
header.sticky nav[aria-label="Categorie"] { border-top-color: var(--color-line); }
header.sticky input {
  background-color: var(--color-porcelain);
  border-color: var(--color-line);
  color: var(--color-ink);
}
header.sticky input:focus { background-color: #fff; border-color: var(--color-ultramarine); }
header.sticky input::placeholder { color: var(--color-ink-mute); }
header.sticky a[href="/gta-6"] { color: #fff; }

/* 5 — Copertina chiara: sfumatura azzurra del brand al posto del blu elettrico */
section[aria-labelledby="hero-title"] {
  background: linear-gradient(180deg, var(--color-ultramarine-50) 0%, var(--color-porcelain) 100%);
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-line);
}
section[aria-labelledby="hero-title"] > div.absolute { display: none; }
section[aria-labelledby="hero-title"] .text-white { color: var(--color-ink); }
section[aria-labelledby="hero-title"] .text-white\/85 { color: var(--color-ink-soft); }
section[aria-labelledby="hero-title"] .text-white\/70 { color: var(--color-ink-mute); }
section[aria-labelledby="hero-title"] .text-white\/90 { color: var(--color-ink); }
section[aria-labelledby="hero-title"] .border-white\/25 { border-color: var(--color-line-strong); }
section[aria-labelledby="hero-title"] .hover\:border-white:hover { border-color: var(--color-ink); }
section[aria-labelledby="hero-title"] .bg-white\/10 { background-color: var(--color-studio); }
section[aria-labelledby="hero-title"] .hover\:bg-white\/10:hover { background-color: var(--color-porcelain-deep); }
section[aria-labelledby="hero-title"] :focus-visible { outline-color: var(--color-ultramarine); }
section[aria-labelledby="hero-title"] h1.text-display {
  font-size: clamp(2.5rem, 5vw, 4.4rem);
  line-height: 1.02;
}
section[aria-labelledby="hero-title"] .promo-tag { box-shadow: inset 0 0 0 1px var(--color-line); }
section[aria-labelledby="hero-title"] .promo-tag-swing { filter: drop-shadow(0 18px 24px rgb(18 34 74 / 0.16)); }
section[aria-labelledby="hero-title"] .promo-tag .bg-night { background-color: var(--color-ultramarine); }
section[aria-labelledby="hero-title"] .hero-float {
  border: 1px solid var(--color-line);
  box-shadow: 0 24px 40px -24px rgb(18 34 74 / 0.35);
}
section[aria-labelledby="hero-title"] div.rounded-full.blur-2xl {
  background: radial-gradient(closest-side, rgb(47 95 179 / 0.30), rgb(18 34 74 / 0.10) 55%, transparent);
}
section[aria-labelledby="hero-title"] input {
  box-shadow: inset 0 0 0 1px var(--color-line), 0 18px 40px -24px rgb(18 34 74 / 0.3);
}
@media (min-width: 768px) {
  main > section.container-shop.pt-24,
  main > section.container-shop.md\:pt-24,
  main > section.container-shop.md\:pt-20 {
    padding-top: 4.25rem;
  }
}

/* 6 — Card reparto: bordo sottile, barra colorata verticale a sinistra */
section[aria-labelledby="padiglioni-title"] article {
  box-shadow: inset 0 0 0 1px var(--color-line);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
section[aria-labelledby="padiglioni-title"] article:hover {
  box-shadow: inset 0 0 0 1px var(--color-ultramarine), 0 14px 30px -22px rgb(18 34 74 / 0.5);
  transform: translateY(-2px);
}
section[aria-labelledby="padiglioni-title"] article > div.h-1\.5 { inset: 0 auto 0 0; height: auto; width: 6px; }
section[aria-labelledby="padiglioni-title"] article > div.blur-2xl { display: none; }
section[aria-labelledby="padiglioni-title"] a > span.h-1 { inset: 0 auto 0 0; height: auto; width: 5px; }
section[aria-labelledby="padiglioni-title"] a.bg-studio { box-shadow: inset 0 0 0 1px var(--color-line); }

/* 7 — Insegna promozionale che scorre: rimossa su richiesta del titolare */
aside:has(> a.bg-pomegranate),
aside > a.bg-pomegranate { display: none; }

/* 8 — Prezzi in inchiostro; badge sconto e prezzo barrato in rosso */
main .text-pomegranate.font-extrabold { color: var(--color-ink); }

/* 9 — Card prodotto: riquadro foto bianco con bordo, ombra leggera al passaggio */
article .studio-well { background: #fff; box-shadow: inset 0 0 0 1px var(--color-line); }
article .text-pomegranate .text-\[1\.3rem\] { font-size: 1.2rem; }
@media (min-width: 400px) {
  article .text-pomegranate .min-\[400px\]\:text-\[1\.55rem\] { font-size: 1.35rem; }
}
article h3.line-clamp-2 { font-size: 15px; }

/* 10 — Scheda prodotto: riquadro foto bianco con bordo come le card */
main .studio-well { background: #fff; box-shadow: inset 0 0 0 1px var(--color-line); }

/* 11 — Impegni e footer: filetto blu del brand, footer blu notte */
section[aria-labelledby="impegni-title"] li { border-top: 3px solid var(--color-ultramarine); }
footer.on-dark {
  background-color: var(--color-night);
  border-top: 4px solid var(--color-ultramarine);
}

/* 12 — Bottone "Confronta" attivo (come l'originale: pieno in inchiostro) */
button[aria-pressed="true"][data-cmp] { background-color: var(--color-ink); color: #fff; border-color: var(--color-ink); --tw-ring-color: var(--color-ink); }

/* 13 — Simbolo RegnoTech al posto degli archi del vecchio marchio (img[data-mark] messe al posto degli svg) */
img[data-mark] { display: inline-block; }
section[aria-labelledby="hero-title"] img[data-mark] { filter: drop-shadow(0 18px 40px rgb(47 95 179 / 0.35)); }

/* ---- cifre che rotolano (motion.js: .rt-roll) ----
   Ogni cifra e' una finestra alta 1em che mostra una sola cifra della colonna 0-9; senza queste regole
   la colonna compariva per intero in orizzontale (es. "30123456789") per la durata dell'animazione. */
.rt-roll { display: inline-flex; vertical-align: top; line-height: 1; white-space: nowrap; }
.rt-roll > span { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: top; }
.rt-roll > span > span { display: flex; flex-direction: column; animation: tb-roll 620ms var(--ease-arch, cubic-bezier(.22, 1, .36, 1)) both; }
.rt-roll > span > span > span { display: block; height: 1em; line-height: 1; }

/* ---- prestazioni liste lunghe (/offerte ha 1.119 schede, /cerca e le categorie molte) ----
   Il browser salta layout e disegno delle schede fuori schermo e le prepara quando si avvicinano.
   Il padding/margine negativo in alto evita di tagliare il leggero "sollevamento" della foto al passaggio del mouse. */
main article.group.flex-col.w-full {
  content-visibility: auto;
  contain-intrinsic-size: auto 480px;
  padding-top: 8px;
  margin-top: -8px;
}