/* ============================================================
   shopin.city — caroselli a tutta larghezza e loghi reali
   Caricato dopo ui3.css.

   Idea: le vetrine non stanno più dentro una colonna con i
   margini, ma attraversano lo schermo da bordo a bordo e si
   toccano fra loro. Sembra uno scaffale continuo, e la fila
   che esce dallo schermo dice da sola "continua, scorri".
   ============================================================ */

/* ----------------------------------------------------------
   15. Loghi reali dei negozi
   Sono scritte orizzontali, non icone quadrate: vanno mostrate
   intere su fondo bianco, mai ritagliate al centro.
   ---------------------------------------------------------- */

.shop-mono.has-logo {
    background: #fff;
    border: 1px solid var(--line);
}

.shop-mono.has-logo .shop-mono-img {
    object-fit: contain;
    padding: 7px;
    background: #fff;
}

.shop-card-mono.has-logo {
    width: 84px;
    height: 62px;
    border-radius: 14px;
    border: 3px solid var(--bg);
    box-shadow: 0 6px 18px rgba(6, 8, 12, .16);
}

/* Sulla card prodotto l'avatar resta tondo e piccolo: lì il logo
   serve solo a dire "di chi è", non a farsi leggere. */
.product-card-mono.has-logo .shop-mono-img { padding: 5px; }

/* ----------------------------------------------------------
   16. Caroselli da bordo a bordo, senza spazi
   ---------------------------------------------------------- */

.shops-showcase .rail,
.cat-section .rail {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.shops-rail,
.rail .cat-strip {
    gap: 0;
    padding: 0;
    scroll-padding-left: 0;
}

/* Le card si toccano: al posto dello spazio, una linea sottile. */
.shops-rail > * {
    width: min(460px, 88vw);
    max-width: min(460px, 88vw);
    border-right: 1px solid var(--line);
}

.shops-rail > *:last-child { border-right: 0; }

.shops-rail .shop-card {
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.shops-rail .shop-card:hover {
    transform: none;
    box-shadow: none;
    background: var(--bg-soft);
}

.shops-rail .shop-card-cover { border-radius: 0; }

/* Le categorie diventano una fascia continua di immagini. */
.rail .cat-strip > * {
    width: min(300px, 62vw);
    max-width: min(300px, 62vw);
}

.rail .cat-strip .cat-strip-item {
    border-radius: 0;
    aspect-ratio: 3 / 4;
}

/* Le frecce restano dentro lo schermo, non più fuori dalla colonna. */
.shops-showcase .rail-prev,
.cat-section .rail-prev { left: 14px; }

.shops-showcase .rail-next,
.cat-section .rail-next { right: 14px; }

/* Le intestazioni restano allineate alla colonna dei contenuti. */
.shops-showcase > .wrap,
.cat-section > .wrap {
    padding-left: 16px;
    padding-right: 16px;
}

@media (min-width: 900px) {
    .shops-showcase > .wrap,
    .cat-section > .wrap {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* ----------------------------------------------------------
   17. Telefono: una vetrina alla volta, piena
   ---------------------------------------------------------- */

@media (max-width: 699px) {
    .shops-rail > *,
    .rail .cat-strip > * {
        width: 100vw;
        max-width: 100vw;
    }

    .rail .cat-strip .cat-strip-item { aspect-ratio: 5 / 4; }

    .shops-showcase .rail-btn,
    .cat-section .rail-btn { display: none !important; }
}

/* ----------------------------------------------------------
   18. Rifiniture
   ---------------------------------------------------------- */

.shops-showcase { padding-bottom: 8px; }
.cat-section { padding-top: 10px; }

/* Un filo di respiro fra le due fasce, senza rimettere i margini. */
.cat-section .rail { border-top: 1px solid var(--line); }