/* =====================================================================
   pdp-clone.css - Copridivano Calmante per Cani (Felici Insieme)
   =====================================================================

   Correzioni sopra al CSS clonato dal tema Shopify americano, che resta
   il dump intoccato in assets/clone/. Qui dentro sta solo quello che il
   dump sbaglia: l'hero che taglia le scritte incise nell'immagine, la
   galleria riscritta senza swiper, gli stati che applica
   assets/js/pdp-clone.js (.is-selected, .is-hidden-color, .is-zero),
   la sezione recensioni nuova, i testi sotto i 14 px e le aree tappabili
   sotto i 44 px.

   Il file e' caricato in <head> dopo il CSS del tema. Alcune regole del
   tema vivono in un <style> inline nel <body>, quindi piu' in basso nel
   documento: contro quelle serve !important, e dove serve e' annotato.

   Indice
     1. Hero
     2. Galleria
     3. Stati applicati da pdp-clone.js
     4. Card set
     5. Riga pagamenti
     6. Recensioni
     7. Accessibilita': testi 14 px, aree tappabili 44 px
     8. Niente scroll orizzontale
   ===================================================================== */


/* --------------------------------------------------------------------
   1. Hero
   --------------------------------------------------------------------
   Nel dump l'immagine e' un background con `center / 1920px` e altezza
   fissa 536px: a 1440 px di viewport ritaglia 240 px per lato e taglia
   in basso, e le tre didascalie incise nella foto ("BORDI IMBOTTITI
   EXTRA" a destra, "IL CANE RESTA COMODO" in basso) spariscono.

   La foto sorgente e' integra: 3168x1344 su desktop, 2752x1536 su
   mobile. Qui l'altezza segue il rapporto della foto e la larghezza e'
   sempre il 100%: si vede tutta, su qualunque viewport, senza ritagli.
   -------------------------------------------------------------------- */

.cfpv2-hero {
    background-image: url(../img/pdp/hero-lifestyle.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    /* 3168x1344: nessun ritaglio a nessuna larghezza */
    aspect-ratio: 3168 / 1344;
    height: auto;
    min-height: 0;
}

/* la regola del tema a 1180px rimette height:382px e background-size:1180px */
@media only screen and (max-width: 1180px) {
    .cfpv2-hero {
        background-size: 100% auto;
        aspect-ratio: 3168 / 1344;
        height: auto;
    }
}

/* Il box di testo resta a sinistra, dove la foto e' vuota: le tre
   didascalie stanno nella metà destra e in basso al centro. */
.cfpv2-hero-container .text-box {
    align-self: center;
}

@media only screen and (max-width: 768px) {
    /* Su mobile il dump sovrappone i due bottoni alla didascalia
       "IMPERMEABILE E LAVABILE IN LAVATRICE" (h2 con margin-bottom:240px
       su una foto alta ~218px a 390px di viewport). Qui la foto sta in
       alto, intera, e testo e bottoni scorrono sotto: niente copertura e
       niente ritaglio. */
    .cfpv2-hero {
        background-image: none;
        background-color: #fff;
        aspect-ratio: auto;
        height: auto;
        min-height: 0;
        padding-bottom: 18px;
    }

    .cfpv2-hero::before {
        content: '';
        display: block;
        width: 100%;
        /* 2752x1536 */
        aspect-ratio: 2752 / 1536;
        background: url(../img/pdp/hero-lifestyle-mob.jpg) center center / 100% auto no-repeat;
    }

    .cfpv2-hero-container .text-box h1 {
        margin-top: 14px;
    }

    /* il margine che serviva a spingere i bottoni sopra la foto */
    .cfpv2-hero-container .text-box h2 {
        margin-bottom: 14px;
    }

    /* sulla foto il testo era bianco perche' stava sul pavimento scuro:
       qui sta su fondo bianco */
    .cfpv2-hero .comfy-dogs-wrapper {
        color: #003744;
        margin-top: 12px;
    }

    .cfpv2-hero .comfy-dogs-wrapper svg path {
        fill: #003744;
    }
}

/* "vedilo in azione": il tema lo scriveva bianco perche' stava sopra la
   foto scura. Adesso il bottone e' su fondo chiaro e restava invisibile. */
.cfpv2-hero .cta-wrapper > div#myBtn {
    color: #003744;
}

.cfpv2-hero .cta-wrapper > div#myBtn svg path {
    fill: #003744;
}

.cfpv2-hero .cta-wrapper > div#myBtn:hover {
    color: #003744;
}


/* --------------------------------------------------------------------
   2. Galleria
   --------------------------------------------------------------------
   Il carosello del dump aveva 42 slide con `srcset` su un placeholder
   SVG e il percorso vero in `data-rimg-*`: le immagini le scambiava
   atlantic.js, che nel clone era soltanto in preload e non veniva mai
   eseguito. Al suo posto: immagine grande + striscia di miniature, con
   gli hook data-fi-* che guida pdp-clone.js.
   -------------------------------------------------------------------- */

.fi-gallery {
    display: block;
}

.fi-gallery__stage {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background: #f4f4f4;
    aspect-ratio: 4 / 5;
}

.fi-gallery__main {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #f4f4f4;
}

.fi-gallery__thumbs {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding: 2px 0 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}

.fi-gallery__thumbs::-webkit-scrollbar {
    height: 4px;
}

.fi-gallery__thumbs::-webkit-scrollbar-thumb {
    background: #cfd8da;
    border-radius: 4px;
}

.fi-gallery__thumb {
    flex: 0 0 auto;
    /* 56x70 e' sopra i 44 px minimi di area tappabile */
    width: 56px;
    height: 70px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 5px;
    background: #f4f4f4;
    overflow: hidden;
    cursor: pointer;
    scroll-snap-align: start;
    -webkit-appearance: none;
    appearance: none;
}

.fi-gallery__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fi-gallery__thumb:focus-visible {
    outline: 2px solid #009bb4;
    outline-offset: 2px;
}

@media only screen and (min-width: 769px) {
    .fi-gallery__thumb {
        width: 64px;
        height: 80px;
    }
}


/* --------------------------------------------------------------------
   3. Stati applicati da pdp-clone.js
   --------------------------------------------------------------------
   Il modulo non tocca la grafica: mette tre classi e il CSS decide.
     .is-selected     pastiglia colore, taglia, card set e miniatura attiva
     .is-hidden-color miniature che appartengono a un altro colore
     .is-zero         il risparmio della card set da 1, sempre 0,00 €
   Nel dump lo stato attivo era attaccato a `input:checked`, che qui non
   si aggiorna piu' (il click e' gestito in JS con preventDefault).
   -------------------------------------------------------------------- */

.fi-gallery__thumb.is-hidden-color {
    display: none;
}

.fi-gallery__thumb.is-selected {
    border-color: #009bb4;
}

.option-value-color[data-fi-color] {
    cursor: pointer;
}

.option-value-color[data-fi-color].is-selected .png_swatch {
    border: 2px solid #fc0;
    border-radius: 50%;
    padding: 3px;
}

.option-value-color[data-fi-color].is-selected .option-swatch-name {
    display: block;
}

.option-value[data-fi-size] {
    cursor: pointer;
}

.option-value[data-fi-size].is-selected .option-value-name {
    color: #fff;
    background: #269db6;
    border: 1px solid #269db6;
    font-weight: 700;
}

/* il dump segnava la card set scelta con .cfp--item_selected */
.cfp--bundle-item[data-fi-bundle] {
    cursor: pointer;
}

.cfp--bundle-item[data-fi-bundle].is-selected {
    border-color: #009bb4;
    box-shadow: 0 0 0 1px #009bb4 inset;
}

.cfp--you-save .is-zero,
.cfp--you-save-amount.is-zero {
    visibility: hidden;
}

.cfp--bundle-item-1 .cfp--you-save:has(.is-zero) {
    visibility: hidden;
}


/* --------------------------------------------------------------------
   4. Card set
   --------------------------------------------------------------------
   Riga "Totale" nuova (hook [data-fi-bundle-price]) e badge dello
   sconto: sul set da 1 lo sconto e' zero, quindi il badge non c'e'.
   -------------------------------------------------------------------- */

.cfp--total {
    margin: 2px 0 0;
    font-family: 'Brandon Text', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    color: #003744;
}

.cfp--total-amount {
    font-weight: 700;
}

.cfp--bundle-tag-wrap--none {
    min-height: 0;
}

/* Il prezzo barrato dentro le card set e' statico nel dump (69,95 €) e il
   contratto data-fi-* non prevede un hook per aggiornarlo: su Lusso o
   Mucca resterebbe 69,95 € barrato accanto a un prezzo calcolato su
   89,95 €, cioe' un numero sbagliato in pagina. Meglio non mostrarlo: il
   risparmio lo dice gia' la riga "Risparmi". Per riportarlo servirebbe un
   hook [data-fi-bundle-was="n"] in pdp-clone.js. */
/* barrato del set: ora lo dipinge pdp-clone.js via [data-fi-bundle-full], quindi si mostra */
.cfp--each s.original,
.cfp--each s.original.money {
    display: inline !important;
}


/* --------------------------------------------------------------------
   5. Riga pagamenti
   --------------------------------------------------------------------
   Il dump mostrava Amex, Mastercard, Visa, Afterpay e un badge
   "+60000 HAPPY CUSTOMERS" con tre stelle. Afterpay in Italia non
   opera e quel badge si legge come un punteggio recensioni, che questo
   prodotto non ha. Restano i tre circuiti reali (pay-it.svg) e una
   scritta italiana.
   -------------------------------------------------------------------- */

.payment-icons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}

.payment-icons__cards {
    display: block;
    width: 148px;
    height: 26px;
}

.payment-icons__note,
.secure-transaction__text {
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #003744;
}

.payment-icons .secure-transaction {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}


/* --------------------------------------------------------------------
   6. Recensioni
   --------------------------------------------------------------------
   Nessun punteggio medio e nessun conteggio: il prodotto italiano non
   ha recensioni raccolte (Judge.me: 0 recensioni, media 0.00). In
   pagina ci sono solo i testi tradotti dalle recensioni originali.
   -------------------------------------------------------------------- */

.fi-reviews {
    padding: 40px 0;
    background: #f7fafb;
}

.fi-reviews__wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 18px;
}

.fi-reviews__title {
    margin: 0 0 8px;
    font-family: 'Brandon Text', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.2;
    color: #003744;
    text-align: center;
}

.fi-reviews__note {
    margin: 0 auto 26px;
    max-width: 620px;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    line-height: 21px;
    color: #4b6165;
    text-align: center;
}

/* aggregato + istogramma */
.fi-reviews__summary {
    display: grid;
    gap: 18px;
    align-items: center;
    margin: 0 0 26px;
    padding: 18px;
    background: #fff;
    border: 1px solid #e3ebed;
    border-radius: 8px;
}

.fi-reviews__score {
    text-align: center;
}

.fi-reviews__stars {
    display: block;
    font-size: 24px;
    line-height: 1;
    letter-spacing: 2px;
    color: #fc0;
}

.fi-reviews__avg {
    margin: 8px 0 0;
    font-family: 'Brandon Text', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    color: #003744;
}

.fi-reviews__count {
    margin: 2px 0 0;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #4b6165;
}

.fi-reviews__histogram {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fi-hist__row {
    display: grid;
    grid-template-columns: 76px 1fr 44px;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
}

.fi-hist__label,
.fi-hist__freq {
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #4b6165;
}

.fi-hist__freq {
    text-align: right;
}

.fi-hist__track {
    display: block;
    height: 10px;
    border-radius: 5px;
    background: #e3ebed;
    overflow: hidden;
}

.fi-hist__fill {
    display: block;
    height: 100%;
    background: #fc0;
}

/* striscia di foto delle recensioni */
.fi-reviews__photos {
    display: flex;
    gap: 8px;
    margin: 0 0 22px;
    overflow-x: auto;
}

.fi-reviews__photos img {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: 6px;
}

.fi-rev__meta {
    margin: 0 0 4px;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #4b6165;
}

.fi-rev__stars {
    color: #fc0;
    letter-spacing: 1px;
}

.fi-rev__verified {
    display: inline-block;
    margin-right: 4px;
    padding: 1px 6px;
    border-radius: 3px;
    background: #e6f6f9;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
    color: #007e94;
    text-transform: uppercase;
}

.fi-rev__photo {
    display: block;
    width: 120px;
    height: 120px;
    margin: 10px 0 0;
    object-fit: cover;
    border-radius: 6px;
}

.fi-rev__reply {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-left: 3px solid #009bb4;
    background: #f4fafb;
}

.fi-rev__reply-who {
    margin: 0 0 4px;
    font-family: 'Brandon Text', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: #007e94;
}

.fi-rev__reply-text {
    margin: 0;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    line-height: 21px;
    color: #003744;
}

.fi-rev__text + .fi-rev__text {
    margin-top: 8px;
}

/* le altre recensioni: <details>, senza JavaScript */
.fi-reviews__more {
    margin-top: 16px;
}

.fi-reviews__more > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid #009bb4;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-family: 'Brandon Text', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #007e94;
    text-align: center;
    list-style: none;
}

.fi-reviews__more > summary::-webkit-details-marker {
    display: none;
}

.fi-reviews__more[open] > summary {
    margin-bottom: 14px;
}

.fi-reviews__list {
    display: grid;
    gap: 14px;
}

.fi-rev {
    display: flex;
    gap: 14px;
    padding: 18px;
    background: #fff;
    border: 1px solid #e3ebed;
    border-radius: 8px;
}

.fi-rev__avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #009bb4;
    color: #fff;
    font-family: 'Brandon Text', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 44px;
    text-align: center;
}

.fi-rev__body {
    min-width: 0;
}

.fi-rev__name {
    margin: 0 0 6px;
    font-family: 'Brandon Text', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 20px;
    color: #003744;
}

.fi-rev__dog {
    margin: 0 0 2px;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #4b6165;
}

.fi-rev__title {
    margin: 8px 0 4px;
    font-family: 'Brandon Text', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #003744;
}

.fi-rev__text {
    margin: 0;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: #003744;
}

@media only screen and (min-width: 769px) {
    .fi-reviews__list {
        grid-template-columns: 1fr 1fr;
    }

    .fi-reviews__summary {
        grid-template-columns: 200px 1fr;
        gap: 30px;
    }
}


/* --------------------------------------------------------------------
   7. Accessibilita'
   --------------------------------------------------------------------
   Testi di contenuto a 14 px minimo e aree tappabili a 44 px di
   altezza. Le regole marcate !important combattono un <style> inline
   che il dump tiene nel <body>, quindi piu' in basso nel documento di
   questo foglio.
   -------------------------------------------------------------------- */

/* riga icone sotto l'hero: il dump la porta a 9 px su mobile */
.cp-icon.dynamic-icons h2 {
    font-size: 14px !important;
    line-height: 18px;
}

/* barra annunci: 12 px sui messaggi e 9 px su "soddisfatti o rimborsati" */
.pxs-announcement-bar,
.pxs-announcement-bar-message,
.pxs-announcement-bar-text-desktop,
.pxs-announcement-bar-text-mobile,
.pxs-announcement-bar .pxs-announcement-bar-message .satisfaction-text {
    font-size: 14px;
    line-height: 20px;
}

/* navigazione dell'header e liste di link: 12 px nel dump.
   Serve !important perche' il tema usa selettori piu' specifici
   (.main-header nav.full .nav-item>details .label). */
a.label,
.nav-item .label,
.main-header nav a.label,
.main-header nav .label,
.main-header--tools a,
.list-item > a,
.lsrp-header-title,
.cfpalp-announcement h1,
#cfpalp-nav-fw1-desktop a,
#cfpalp-nav-fw2-desktop a,
#cfpalp-nav-fw1-mobile a,
#cfpalp-nav-fw2-mobile a,
.cta-btn {
    font-size: 14px !important;
}

/* etichette dentro le card set e sulle pastiglie */
.cfp--each-label,
.cfp--each > .cfp--each-price > span.money,
.cfp--you-save,
.cfp--you-save-amount,
.cfp--you-save-amount .money,
.cfp--bundle-title,
.cfp--bundle-tag-wrap,
.cfp--bundle-tag-wrap .disc-amount,
.option-swatch-name,
.option-value-name,
.collapsible-tab__heading--text1,
.collapsible-tab__heading--text2,
.collapsible-tab__heading--text3,
.collapsible-tab__heading--text4,
.collapsible-tab__heading--text5,
.collapsible-tab__heading--text6,
.happy-owner-badge__text,
.secure-transaction__text,
.payment-icons .secure-transaction span,
.features__subheading,
.benefits__text,
.selling-point__text,
.nce-pdp--still-got-questions p,
.nce-pdp--still-got-questions .panel,
.nce-pdp--still-got-questions--right-part p {
    font-size: 14px !important;
    line-height: 1.4;
}

/* pastiglie di servizio: restano piu' piccole del corpo del testo ma
   leggibili (nel dump "Ed. limitata" era a 6 px) */
.switch-tag,
.cfp--bundle-tag,
.cfp-tag-value,
.product__price .badges-wrapper .badge {
    font-size: 12px !important;
    line-height: 1.3;
}

.switch-tag {
    white-space: nowrap;
}

/* le liste che splide avrebbe trasformato in carosello: il dump non ha
   scaricato il suo JS ne' il suo CSS (due 404), quindi restano liste.
   Le impaginiamo come strisce che scorrono: stesso lavoro, zero JS. */
.splide__list {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}

.splide__slide {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.splide__track {
    overflow: hidden;
}

.splide__arrows,
.splide__pagination {
    display: none;
}

.features__subheading,
.features__container .collapsible-tab__text p,
.features__container .collapsible-tab__text span,
.selling-point__text,
.benefits__text,
.whats-included__content .collapsible-tab__text,
.care__content,
.installation-step__content .collapsible-tab__text,
.shipping .collapsible-tab__text,
.guideline-url,
.happy-owner-badge__text,
.cfp--bundle-heading .info-box p,
.ppa-compare-at-price {
    font-size: 14px;
    line-height: 1.5;
}

.option-swatch-name,
.option-value-name,
.cfp--bundle-title,
.cfp--each,
.cfp--you-save,
.cfp--bundle-tag-wrap,
.cfp--bundle-tag-wrap .disc-amount {
    font-size: 14px;
    line-height: 1.35;
}

.cfp--each > .cfp--each-price > span.money {
    font-size: 16px !important;
}

.pxs-announcement-bar,
.pxs-announcement-bar .pxs-announcement-bar-message .satisfaction-text {
    font-size: 14px;
}

.selling-fast-tag {
    font-size: 14px !important;
}

.main-header nav.full .nav-item > details .label {
    font-size: 14px;
}

/* aree tappabili */
.option-value[data-fi-size] .option-value-name {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.option-value-color[data-fi-color] {
    min-width: 44px;
    min-height: 44px;
}

.product-submit,
.cfp-atc-button,
#atc-button {
    min-height: 52px;
}

/* Il tema teneva l'etichetta del bottone nascosta
   (.product-card-interaction-addtocart-available{display:none}) e la
   mostrava solo con la classe .addtocart-button-active messa da
   atlantic.js. Senza quel file il bottone restava una barra gialla
   vuota: qui l'etichetta e' visibile di default e restano nascosti
   l'errore e lo spinner, che nessuno accende piu'. */
[data-fi-atc] .product-card-interaction-addtocart-available {
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

[data-fi-atc] .product-card-interaction-addtocart-error,
[data-fi-atc] .product-card-interaction-addtocart-spinner,
[data-fi-atc] noscript {
    display: none !important;
}

.cfpv2-hero .cta-wrapper a.cta-btn,
.cfpv2-hero .cta-wrapper .cta-btn,
.cfpv2-hero .cta-wrapper > div,
.main-header--tools a.cta-btn {
    min-height: 44px;
    font-size: 14px;
}

@media only screen and (max-width: 768px) {
    .cfpv2-hero .cta-wrapper a.cta-btn,
    .cfpv2-hero .cta-wrapper .cta-btn,
    .cfpv2-hero .cta-wrapper > div {
        font-size: 14px;
        padding: 10px 8px;
    }
}

.footer__link-item,
.footer__linklist a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 14px;
}

#cfpalp-nav-fw1-desktop a,
#cfpalp-nav-fw2-desktop a,
#cfpalp-nav-fw1-mobile a,
#cfpalp-nav-fw2-mobile a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    cursor: pointer;
}

.accordion {
    min-height: 44px;
}

.social-links .social-link,
.mini-cart-wrap,
.main-header--tools .mini-cart-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

.footer__newsletter-form .form__field,
.footer__newsletter-form .form__submit {
    min-height: 44px;
    font-size: 14px;
}

/* Le frecce della barra annunci restano larghe 27 px: allargarle a 44
   le fa scivolare sopra il testo dello slide. L'altezza e' gia' 44.
   Il messaggio prende un po' di respiro ai lati per non finirci sotto. */
.pxs-announcement-bar .pxs-announcement-bar-message {
    padding-left: 30px;
    padding-right: 30px;
}

/* il logo nell'header: link alto 29 px nel dump */
.cfpalp-header-left > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* la galleria occupa tutta la colonna sinistra (738 px a 1440), come nel dump.
   Il tetto a 560 px compensava un </div> di troppo che schiacciava la colonna
   a tutta pagina: tolto quel </div> il tetto lasciava il bollino
   "Oltre 60.000 proprietari felici" fuori dalla foto, sopra il titolo. */


/* --------------------------------------------------------------------
   8. Niente scroll orizzontale
   --------------------------------------------------------------------
   Il dump aveva sezioni piu' larghe del viewport a 390 px. Le tabelle
   e i blocchi larghi scorrono dentro il proprio contenitore, non
   trascinando il body.
   -------------------------------------------------------------------- */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg,
video {
    max-width: 100%;
}

.fi-reviews,
.product-area,
.cfpv2-hero {
    max-width: 100%;
}

/* a 390 px questi due uscivano dal viewport: la pastiglia "Ed. limitata"
   sopra le pastiglie colore e il bollino "Oltre 60.000 proprietari felici" */
/* pastiglia "Ed. limitata" sopra le pastiglie colore: a 12 px non stava
   piu' nella larghezza del tema e il testo veniva tagliato */
/* "Ed. limitata" stava a 6 px per entrare nei 40 px della pastiglia. A 14
   px leggibili le quattro pastiglie limitate si sovrapponevano fra loro,
   quindi la scritta compare solo sul colore selezionato: una alla volta,
   leggibile, e nessuna sovrapposizione. */
.option-value-color .switch-tag {
    display: none;
}

.option-value-color.is-selected .switch-tag {
    display: inline-block;
    left: 0;
    right: auto;
    transform: none;
    width: auto;
    max-width: none;
    white-space: nowrap;
    padding: 1px 5px;
}

/* bollino "Oltre 60.000 proprietari felici": tondo a dimensione fissa nel
   tema, con il testo che a 390 px usciva dal viewport */
.happy-owner-badge {
    max-width: 100%;
    overflow: hidden;
}

.happy-owner-badge__text {
    padding: 0 6px;
    hyphens: manual;
    font-size: 12px !important;
    line-height: 1.15;
}

@media only screen and (max-width: 768px) {
    .happy-owner-badge {
        right: 6px;
    }

    .happy-owner-badge__text {
        font-size: 12px !important;
        line-height: 1.15;
    }
}

.external-pdp-video-section-video {
    display: block;
    width: 100%;
    height: auto;
}

/* Il diagramma della sezione "Innovazione per un comfort da coda che
   scodinzola" e' larga `width:100%` dentro un contenitore flex senza
   larghezza propria: finche' l'immagine non e' scaricata il box vale 0, e
   le sei etichette, che sono in position:absolute su misure fisse,
   finivano sopra la sezione successiva. Nel dump il box lo riservava il
   placeholder SVG del lazy loader del tema, che non c'e' piu': qui lo
   riserva il rapporto dell'immagine vera (407x322). */
.features__container--image {
    width: 350px;
    max-width: 100%;
}

.features__container--image img {
    width: 100%;
    height: auto;
    aspect-ratio: 407 / 322;
}

/* --------------------------------------------------------------------
   Strisce foto clienti che scorrono da sole (17/09)
   L'originale usa Splide con autoScroll: una fila verso sinistra e una
   verso destra. Qui e' un marquee CSS: la lista e' raddoppiata e il
   keyframe trasla del 50 percento, cosi' il giro riparte senza salto.
   -------------------------------------------------------------------- */
.fi-marquee-wrap { overflow: hidden; margin-top: 14px; }
.fi-marquee { overflow: hidden; width: 100%; margin-bottom: 6px; }
.fi-marquee__track {
    display: flex;
    gap: 6px;
    width: max-content;
    animation: fi-marquee 38s linear infinite;
}
.fi-marquee--right .fi-marquee__track { animation-direction: reverse; }
.fi-marquee__track img {
    width: 125px; height: 125px; object-fit: cover; flex: 0 0 auto;
    max-width: none !important;
}
@media only screen and (max-width: 768px) {
    .fi-marquee__track img { width: calc(50vw - 9px); height: calc(50vw - 9px); }
    .fi-marquee__track { animation-duration: 30s; }
}
@keyframes fi-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.fi-marquee:hover .fi-marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .fi-marquee__track { animation: none; }
}

/* Guida alle taglie accanto a "Taglia:", come "Size Guide?" nell'originale */
.fi-size-guide {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: 10px; padding: 4px 0; min-height: 28px;
    background: none; border: 0; cursor: pointer;
    color: #1f9bb5; font: inherit; font-size: 14px; font-weight: 600;
    text-decoration: underline; text-underline-offset: 2px;
}
.fi-size-guide svg { color: #1f9bb5; }
.fi-size-dialog {
    border: 0; border-radius: 12px; padding: 0; max-width: min(92vw, 560px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.fi-size-dialog::backdrop { background: rgba(0, 36, 45, .6); }
.fi-size-dialog img { display: block; width: 100%; height: auto; max-height: 86vh; object-fit: contain; }
.fi-size-dialog__close {
    position: absolute; top: 8px; right: 8px; width: 40px; height: 40px;
    border: 0; border-radius: 50%; background: #003744; color: #fff;
    font-size: 26px; line-height: 40px; cursor: pointer;
}

/* "Altre info" accanto a "Scegli il tuo set": era uno span con JS del tema, ora apre un dialog */
.cfp--bundle-heading button.info {
    background: none; border: 0; padding: 4px 0; min-height: 28px;
    font-family: inherit; text-transform: none;
}
.fi-info-dialog { padding: 28px 22px 22px; max-width: min(92vw, 420px); color: #003744; }
.fi-info-dialog h3 { margin: 0 44px 12px 0; font-size: 20px; line-height: 1.25; color: #003744; }
.fi-info-dialog p { margin: 0 0 10px; font-size: 15px; line-height: 1.5; }
.fi-info-dialog p:last-child { margin-bottom: 0; font-weight: 700; }

/* Immagini dei benefici: gli attributi width/height fissavano l'altezza (966/1446 px) e la foto si allungava */
.csv2-benefit .img-wrapper img { height: auto; }

/* Pallino colore selezionato: 42 + 2x3 padding + 2x2 bordo sforava il box da 48 e schiacciava la foto in 38x42 */
.option-value-color[data-fi-color].is-selected .png_swatch { padding: 1px; }

/* --------------------------------------------------------------------
   Ritocchi chiesti dal titolare, 17/09 sera
   -------------------------------------------------------------------- */

/* Barra annunci: le due frecce bianche del carosello finivano sopra il
   testo. I messaggi ruotano da soli, le frecce non servono. */
.announcement-swiper-button-next,
.announcement-swiper-button-prev {
    display: none !important;
}

/* Hero mobile: foto avvicinata del 20%, senza toccare il file. Con lo zoom
   al 120% restano visibili le tre didascalie incise (la piu' bassa sta
   intorno all'88% dell'altezza, il ritaglio arriva al 92%). Su desktop no:
   "BORDI IMBOTTITI EXTRA" sta al bordo destro e verrebbe tagliata. */
@media only screen and (max-width: 768px) {
    .cfpv2-hero::before {
        background-size: 120% auto;
        background-position: 50% 55%;
    }
}

/* Pastiglia "Ed. limitata": sporge a destra del colore scelto e la
   pastiglia successiva, disegnata dopo, la copriva (Lusso, Mucca). */
.option-value-color.is-selected {
    z-index: 3;
}
.option-value-color .switch-tag {
    z-index: 4;
}
