/* ============================================================
   shopin.city — tema scuro
   Caricato per ultimo: vince su tutti i fogli precedenti.

   Il sito è costruito su variabili CSS, quindi il passaggio al
   nero si fa ribaltando i token in un punto solo invece di
   riscrivere centinaia di regole. Qui sotto restano soltanto le
   correzioni ai punti in cui il bianco era scritto a mano.

   Direzione: nero profondo che sale appena verso il blu notte,
   con un alone di blu elettrico molto diluito. Non deve
   sembrare blu: deve sembrare nero con dentro una luce fredda.
   ============================================================ */

:root {
    /* Superfici */
    --bg: #08090E;
    --bg-soft: #101219;
    --line: rgba(255, 255, 255, .10);

    /* Testo */
    --ink: #F5F7FA;
    --muted: rgba(245, 247, 250, .62);

    /* Accento: il blu elettrico resta, il notte diventa la base */
    --night: #2C40A8;
    --night-deep: #070A16;
    --blue: #4C6BFF;
    --blue-soft: rgba(76, 107, 255, .18);

    /* Semantici, schiariti per reggere sul nero */
    --ok: #2FD39B;
    --ok-soft: rgba(47, 211, 155, .14);
    --danger: #FF5C72;
    --danger-soft: rgba(255, 92, 114, .14);
    --warn: #F0B34A;
    --warn-soft: rgba(240, 179, 74, .14);

    /* Ombre: sul nero servono più profonde per leggersi */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, .55);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, .6);
    --shadow-lg: 0 28px 70px rgba(0, 0, 0, .7);

    /* Superfici del tema scuro, usate qui sotto */
    --d-surface: #101219;
    --d-surface-2: #171A26;
    --d-hair: rgba(255, 255, 255, .10);
}

/* ------------------------------------------------------------
   1. Fondo pagina
   Nero con due aloni freddi appena percettibili, fissi rispetto
   allo scorrimento: danno profondità senza disturbare la lettura.
   ------------------------------------------------------------ */

html { background: var(--bg); }

body {
    background-color: var(--bg);
    background-image:
        radial-gradient(90% 60% at 15% -5%, rgba(76, 107, 255, .10) 0%, rgba(8, 9, 14, 0) 60%),
        radial-gradient(80% 50% at 100% 0%, rgba(44, 64, 168, .12) 0%, rgba(8, 9, 14, 0) 55%);
    background-attachment: fixed;
    color: var(--ink);
}

/* ------------------------------------------------------------
   2. Header
   ------------------------------------------------------------ */

/* Niente backdrop-filter qui: creerebbe un contenitore per gli
   elementi in posizione fissa e il menu a scomparsa, che è fisso,
   verrebbe ancorato all'header invece che alla finestra. */
.site-header {
    background: #08090E;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    border-bottom: 1px solid var(--d-hair);
}

.hdr-top {
    background: transparent;
}

/* La barra delle categorie: nera, con la luce fredda che scivola
   da sinistra a destra. */
.hdr-nav,
.hdr-rail {
    background:
        linear-gradient(100deg, #05070F 0%, #0B1024 38%, #141C4A 72%, #1B2A6E 100%);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .10);
}

.site-header .hdr-nav .nav-link,
.site-header .hdr-rail .nav-link {
    color: rgba(255, 255, 255, .88);
}

.site-header .hdr-nav .nav-link:hover,
.site-header .hdr-rail .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .10);
}

.site-header .hdr-nav .nav-link.is-active,
.site-header .hdr-rail .nav-link.is-active {
    color: #fff;
    box-shadow: inset 0 -2px 0 var(--blue);
}

/* "OFFERTE": sul nero la pastiglia piena in blu elettrico è la
   cosa che si vede per prima, ed è giusto così. */
.site-header .hdr-nav .nav-link.nav-link-hot,
.site-header .hdr-nav .nav-link.nav-link-hot.is-active,
.site-header .hdr-rail .nav-link.nav-link-hot {
    background: var(--blue);
    color: #fff;
    box-shadow: 0 4px 18px rgba(76, 107, 255, .45);
}

.site-header .hdr-nav .nav-link.nav-link-hot:hover,
.site-header .hdr-rail .nav-link.nav-link-hot:hover {
    background: #6B84FF;
    color: #fff;
}

/* Ricerca */
.hdr-search {
    background: var(--d-surface-2);
    border: 1px solid var(--d-hair);
}

.hdr-search-input {
    background: transparent;
    color: var(--ink);
}

.hdr-search-input::placeholder { color: var(--muted); }

.hdr-search-btn {
    background: var(--blue);
    color: #fff;
}

.hdr-search-btn:hover { background: #6B84FF; }

.hdr-act,
.hdr-act-label,
.cart-link,
.acct-toggle { color: var(--ink); }

.hdr-act:hover { color: #fff; }

.hdr-act-badge {
    background: var(--blue);
    color: #fff;
}

/* Il marchio è nero su trasparente: sul fondo scuro va invertito. */
.brand-logo { filter: invert(1) brightness(1.9) contrast(1.05); }

/* ------------------------------------------------------------
   3. Fasce dei titoli
   ------------------------------------------------------------ */

.band {
    background: #05070F;
    background-image:
        radial-gradient(120% 160% at 50% 0%, rgba(76, 107, 255, .22) 0%, rgba(5, 7, 15, 0) 62%),
        linear-gradient(180deg, rgba(27, 42, 110, .35) 0%, rgba(5, 7, 15, 0) 100%);
    border-top: 1px solid var(--d-hair);
    border-bottom: 1px solid var(--d-hair);
}

@supports (-webkit-text-stroke: 1px #fff) {
    .band-title { -webkit-text-stroke-width: 1.8px; }
}

@media (min-width: 900px) {
    @supports (-webkit-text-stroke: 1px #fff) {
        .band-title { -webkit-text-stroke-width: 2.4px; }
    }
}

/* ------------------------------------------------------------
   4. Card prodotto
   L'area della foto resta chiara: gli scatti hanno fondo bianco
   o beige da studio, e incastonarli in un riquadro scuro li
   farebbe sembrare toppe attaccate sopra la card.
   ------------------------------------------------------------ */

.product-card { background: transparent; }

.product-card-visual {
    background: #EDEFF3;
    border: 1px solid var(--d-hair);
}

.product-card-name a,
.product-card-title a { color: var(--ink); }
.product-card-name a:hover { color: #fff; }

.product-card-brand { color: var(--muted); }
.product-card-shop a { color: var(--muted); }
.product-card-shop a:hover { color: var(--ink); }

.price-now { color: var(--ink); }
.product-card-prices.is-offer .price-now { color: var(--danger); }
.price-old { color: var(--muted); }

.badge-sale {
    background: var(--danger);
    color: #fff;
}

.card-add {
    background: var(--blue);
    color: #fff;
}

.card-add:hover { background: #6B84FF; color: #fff; }

.card-sizes {
    background: var(--d-surface-2);
    border-color: var(--d-hair);
}

.card-size {
    background: transparent;
    border-color: var(--d-hair);
    color: var(--ink);
}

.card-size:hover {
    background: #fff;
    border-color: #fff;
    color: #08090E;
}

.wish-btn {
    background: rgba(8, 9, 14, .72);
    border: 1px solid rgba(255, 255, 255, .28);
}

.wish-btn svg { fill: none; stroke: #fff; }
.wish-btn.is-on svg { fill: var(--danger); stroke: var(--danger); }

/* ------------------------------------------------------------
   5. Card negozio
   ------------------------------------------------------------ */

.shop-card { background: var(--d-surface); }
.shops-rail .shop-card:hover,
.shop-card:hover { background: var(--d-surface-2); }

.shop-card-title a { color: var(--ink); }
.shop-card-title a:hover { color: #fff; }
.shop-card-line,
.shop-card-address,
.shop-rating-count { color: var(--muted); }
.shop-card-line strong { color: var(--ink); }
.shop-card-offers { color: var(--danger); }
.shop-card-pin { stroke: var(--muted); }
.shop-rating { color: var(--ink); }
.shop-rating-stars .star { color: rgba(255, 255, 255, .22); }
.shop-rating-stars .star.is-on { color: #F5A623; }

/* L'avatar resta bianco: i loghi dei marchi sono neri su fondo
   chiaro e su un cerchio scuro sparirebbero. */
.shop-card-mono,
.shop-card-mono.has-logo {
    background: #fff;
    box-shadow:
        0 0 0 5px rgba(8, 9, 14, .9),
        0 10px 26px rgba(0, 0, 0, .6);
}

.shop-peek-item a,
.shop-peek-more a { background: #EDEFF3; }
.shop-peek-more a {
    background: transparent;
    border-color: var(--d-hair);
    color: var(--muted);
}
.shop-peek-more a:hover { color: var(--ink); border-color: var(--blue); }

/* ------------------------------------------------------------
   6. Categorie
   Sulle foto chiare il testo bianco ha bisogno di più velatura.
   ------------------------------------------------------------ */

.cat-strip-item.has-photo::after {
    background: linear-gradient(
        to top,
        rgba(3, 5, 10, .92) 0%,
        rgba(3, 5, 10, .58) 36%,
        rgba(3, 5, 10, .18) 66%,
        rgba(3, 5, 10, .04) 100%
    );
}

.cat-strip-item { background: var(--d-surface); }

/* ------------------------------------------------------------
   7. Filtri, pannelli, menu, chat
   ------------------------------------------------------------ */

#catalog-filters,
.filter-bar {
    background: var(--bg);
    border-bottom-color: var(--d-hair);
}

.filter-chip {
    background: transparent;
    border-color: var(--d-hair);
    color: var(--ink);
}

.filter-chip:hover { background: rgba(255, 255, 255, .06); }

.filter-chip.is-active {
    border-color: var(--blue);
    box-shadow: inset 0 -2px 0 var(--blue);
}

.filter-chip-badge { background: var(--blue); color: #fff; }

.filter-panel,
.city-menu-panel,
.acct-menu,
.chat-panel {
    background: var(--d-surface-2);
    border: 1px solid var(--d-hair);
    color: var(--ink);
    box-shadow: var(--shadow-lg);
}

.filter-option,
.city-menu-link,
.acct-menu a { color: var(--ink); }

.filter-option:hover,
.city-menu-link:hover,
.acct-menu a:hover { background: rgba(255, 255, 255, .07); }

.filter-option input,
.filter-range input,
.input,
.select,
.textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
select,
textarea {
    background: var(--d-surface-2);
    border-color: var(--d-hair);
    color: var(--ink);
}

::placeholder { color: var(--muted); }

.filter-tag {
    background: rgba(255, 255, 255, .08);
    color: var(--ink);
}

.rail-btn {
    background: rgba(16, 18, 25, .94);
    border-color: var(--d-hair);
    color: var(--ink);
}

.rail-btn:hover { background: var(--d-surface-2); }

.catalog-count,
.catalog-sort,
.pager-progress { color: var(--muted); }
.catalog-count strong { color: var(--ink); }

.btn-more {
    border-color: var(--d-hair);
    color: var(--ink);
}

.btn-more:hover { background: rgba(255, 255, 255, .07); }

/* ------------------------------------------------------------
   8. Bottoni
   ------------------------------------------------------------ */

.btn-primary {
    background: var(--blue);
    color: #fff;
}

.btn-primary:hover { background: #6B84FF; color: #fff; }

.btn-ghost,
.btn-outline {
    border-color: var(--d-hair);
    color: var(--ink);
    background: transparent;
}

.btn-ghost:hover,
.btn-outline:hover { background: rgba(255, 255, 255, .08); color: #fff; }

.pill {
    background: rgba(255, 255, 255, .08);
    color: var(--muted);
}

/* ------------------------------------------------------------
   9. Sezioni chiare rimaste, footer, tabelle
   ------------------------------------------------------------ */

.section-soft { background: var(--d-surface); }
.section-line { border-top-color: var(--d-hair); }

.card,
.empty,
.cart-group,
.cart-summary,
.order-card,
.kpi,
.success-box {
    background: var(--d-surface);
    border-color: var(--d-hair);
    color: var(--ink);
}

.table th,
.table td { border-color: var(--d-hair); color: var(--ink); }
.table th { color: var(--muted); }

.site-footer {
    background: #05070F;
    border-top: 1px solid var(--d-hair);
}

/* ------------------------------------------------------------
   10. Accessibilità
   Sul nero il contorno di fuoco deve essere chiaro.
   ------------------------------------------------------------ */

:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.shop-card:focus-within { outline-color: var(--blue); }

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; }
}