/* WOOD élite Studio - Release 0.3.1 */
/* Versione iniziale migliorata */

:root{
    --bg:#f7f5f2;
    --white:#fff;
    --black:#222;
    --text:#555;
    --wood:#b88a4b;
    --woodDark:#9d7238;
    --border:#ece8df;
    --shadow:0 12px 30px rgba(0,0,0,.08);
    --radius:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
    font-family:Inter,sans-serif;
    background:var(--bg);
    color:var(--black);
}
.header{
    position:sticky;
    top:0;
    background:#fff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:24px 40px;
    box-shadow:var(--shadow);
    z-index:1000;
}
.logoBox{display:flex;align-items:center;gap:12px}.logoBox{
    display:flex;
    align-items:center;
    gap:18px;
}
#logo{width:135px;
    height:auto;}
    
.logoBox h1{
    font:700 2rem Poppins,sans-serif;
    line-height:1.1;
}
.logoBox p{color:#888;margin-top:4px}
.headerRight{display:flex;gap:16px;align-items:center}
#searchBox{
    width:360px;
    padding:14px 18px;
    border:1px solid var(--border);
    border-radius:12px;
}
#adminButton,#btnInvia,.hero button,.btnPersonalizza{
    background:var(--wood);
    color:#fff;
    border:none;
    border-radius:12px;
    cursor:pointer;
    transition:.25s;
}
#adminButton:hover,#btnInvia:hover,.hero button:hover,.btnPersonalizza:hover{
    background:var(--woodDark);
}
#adminButton{padding:14px 22px}

.hero{
    width:calc(100% - 60px);
    max-width:1900px;
    min-height:240px;
    grid-template-columns:40% 60%;
    margin:25px auto;
    display:grid;
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:var(--shadow);
}
.heroText{
    padding:52px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.heroBadge{
    display:inline-block;
    padding:8px 16px;
    background:#fff4df;
    color:var(--woodDark);
    border-radius:999px;
    font-weight:600;
    margin-bottom:20px;
}
.hero h2{
    font-size:56px;
    line-height:1.02;
    margin-bottom:18px;
}
.hero p{color:#666;font-size:1.1rem;line-height:1.7}

.hero button{
    width:max-content;
    margin-top:20px;
    padding:13px 22px;
}
.heroSlider{
    min-height:300px;
    background-image:url("../hero/hero-home.webp");
    display:block;
    width:100%;
    height:100%;
    background-size: cover;
    background-color:#f4ede3;
    background-position:center center;
    padding:20px;
    background-repeat:no-repeat;
    border-radius:0 24px 24px 0;
    position:relative;
    overflow:hidden;
}

/*==========================================================
    HERO SLIDER - DISSOLVENZA IMMAGINI
==========================================================*/

.heroSlide {

    position: absolute;

    inset: 0;

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    opacity: 0;

    transform: scale(1.04);

    transition:
        opacity 1.4s ease,
        transform 6.5s ease;

    z-index: 1;

}

.heroSlide.active {

    opacity: 1;

    transform: scale(1);

    z-index: 2;

}

.heroSliderDots {

    position: absolute;

    right: 18px;

    bottom: 16px;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 7px;

}

.heroSliderDot {

    width: 8px;

    height: 8px;

    border: none;

    border-radius: 999px;

    background: rgba(255, 255, 255, .65);

    box-shadow: 0 2px 8px rgba(0,0,0,.25);

    cursor: pointer;

    transition:
        width .25s ease,
        background .25s ease;

}

.heroSliderDot.active {

    width: 24px;

    background: #d7b16a;

}

.heroSlider::before{
    content:"";
    position:absolute;
    inset:0;

    background:linear-gradient(
        to left,
        rgba(255,255,255,0),
        rgba(255,255,255,.08)
    );
}


.container,.layout{
    width:calc(100% - 60px);
    max-width:1900px;
    margin:25px auto;
}
.titoloSezione{
    font:700 1.8rem Poppins,sans-serif;
    margin-bottom:28px;
}
.occasioni,.categorie{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}
.occasioni button,.categorie button{
    background:#fff;
    border:none;
    border-radius:999px;
    padding:14px 22px;
    box-shadow:var(--shadow);
    cursor:pointer;
}
.layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 380px;
    gap:40px;
    align-items:start;
}
#catalogoContainer{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
    gap:18px;
}
.cardProdotto{

    border:1px solid transparent;
	
	position:relative;

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:var(--shadow);

    cursor:pointer;

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.cardProdotto:hover{

    transform:translateY(-6px);

    border-color:#d7c19b;

    box-shadow:0 16px 40px rgba(0,0,0,.15);

}

.badges{

    position:absolute;

    top:12px;

    left:12px;

    display:flex;

    flex-direction:column;

    gap:6px;

    z-index:100;

}

.badge{

    display:inline-flex;

    align-items:center;

    padding:6px 10px;

    border-radius:20px;

    font-size:11px;

    font-weight:700;

    color:#fff;

    letter-spacing:.4px;

    box-shadow:0 3px 8px rgba(0,0,0,.25);

    backdrop-filter:blur(4px);

}

.badgeNovita{

    background:#27ae60;

}

.badgeBestSeller{

    background:#f39c12;

}
.foto{
    height:280px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f8f8f8;
    overflow:hidden;
}
.foto img{
    max-width:92%;
    max-height:92%;
    object-fit:contain;
    transition:transform .35s ease;
}
.cardProdotto h3{padding:18px 18px 6px}
.codice{padding:0 18px;color:#888}
.prezzo{padding:12px 18px;color:var(--woodDark);font-weight:700}
.btnPersonalizza{
    margin:18px;
    width:calc(100% - 36px);
    padding:14px;
}

.cardProdotto:hover .foto img{
    transform:scale(1.05);
}

#carrello{
    position:sticky;
    top:120px;
    background:#fff;
    border-radius:20px;
    box-shadow:var(--shadow);
    padding:28px;
	border:1px solid #ece8df;
    height:max-content;
}
#carrello h3{margin-bottom:18px}
#carrelloProdotti{min-height:140px;color:#888}
.totale{
    display:flex;
    justify-content:space-between;
    margin:22px 0;
}
#btnInvia{

    width:100%;

    padding:16px;

    font-size:16px;

    font-weight:600;

}
.messaggioCarrello{
    margin-top:22px;
    border-top:1px solid var(--border);
    padding-top:20px;
    text-align:center;
    color:#777;
    line-height:1.7;
}
footer{
    margin-top:70px;
    background:#fff;
    text-align:center;
    padding:60px 20px;
}
footer h2{
    font:700 2rem Poppins,sans-serif;
    margin-bottom:12px;
}
footer p{color:#777}

/* =======================================================
   POPUP SCHEDA PRODOTTO
======================================================= */

.modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(4px);
    z-index:9999;

    justify-content:center;
    align-items:center;

    padding:30px;
}

.modalContent{

    width:min(950px,95vw);

    background:#fff;

    border-radius:22px;

    box-shadow:0 20px 60px rgba(0,0,0,.25);

    overflow:hidden;

    position:relative;

    animation:popup .25s ease;
}

@keyframes popup{

    from{

        opacity:0;

        transform:translateY(20px) scale(.97);

    }

    to{

        opacity:1;

        transform:none;

    }

}

#closeModal{

    position:absolute;

    top:18px;

    right:24px;

    font-size:34px;

    cursor:pointer;

    color:#666;

    transition:.2s;

}

#closeModal:hover{

    color:#000;

}

.modalGrid{

    display:grid;

    grid-template-columns:46% 54%;

}

.modalImage{

    background:#f7f7f7;

    display:flex;
    
    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:10px;

}

.modalMedia{

    position:relative;

    width:100%;

    aspect-ratio:1 / 1;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}

.modalMediaNav{

    position:absolute;

    top:50%;

    z-index:6;

    width:48px;

    height:48px;

    display:none;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(62, 42, 23, .16);

    border-radius:50%;

    padding:0 0 4px;

    background:rgba(255, 255, 255, .9);

    box-shadow:0 8px 24px rgba(35, 24, 13, .18);

    color:#2d2015;

    font-family:Arial, sans-serif;

    font-size:38px;

    font-weight:400;

    line-height:1;

    cursor:pointer;

    transform:translateY(-50%);

    transition:background .18s ease, transform .18s ease, box-shadow .18s ease;

    backdrop-filter:blur(6px);

}

.modalMediaNav:hover{

    background:#fff;

    box-shadow:0 10px 28px rgba(35, 24, 13, .24);

    transform:translateY(-50%) scale(1.06);

}

.modalMediaNav:focus-visible{

    outline:3px solid rgba(122, 86, 47, .32);

    outline-offset:3px;

}

.modalMediaNavPrev{

    left:14px;

}

.modalMediaNavNext{

    right:14px;

}

.modalImage img{

    width:100%;

    max-height:500px;

    object-fit:contain;

}

#modalVideo,
#modalLocalVideo{

    display:none;

    width:100%;

    aspect-ratio:16 / 9;

    border:0;

    border-radius:14px;

    background:#000;

}

.modalGallery{

    width:100%;

    display:flex;

    gap:10px;

    overflow-x:auto;

    padding:12px 0 2px;

}

.modalThumb{

    width:70px;

    height:70px;

    flex:0 0 70px;

    border:2px solid transparent;

    border-radius:10px;

    overflow:hidden;

    padding:0;

    background:#fff;

    cursor:pointer;

}

.modalThumb.active{

    border-color:var(--wood);

}

.modalThumb img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.modalThumb.videoThumb{

    position:relative;

    background:#111;

    color:#fff;

}

.modalThumb.videoThumb::after{

    content:"Play";

    position:absolute;

    inset:auto 8px 8px;

    padding:4px 6px;

    border-radius:6px;

    background:rgba(0,0,0,.72);

    color:white;

    font-size:11px;

    font-weight:700;

}

.modalInfo{

    padding:40px;

}

.modalInfo h2{

    font-family:Poppins,sans-serif;

    margin-bottom:20px;

    font-size:38px;

}

.modalInfo p{

    margin:12px 0;

    color:#555;

}

.modalInfo hr{

    margin:20px 0;

    border:none;

    border-top:1px solid #e5e5e5;

}

.modalInfo .btnPersonalizza{

    margin-top:30px;

    width:100%;

}

@media(max-width:900px){

    .modalGrid{

        grid-template-columns:1fr;

    }

}

@media(max-width:1100px){
    .hero,.layout{grid-template-columns:1fr}
    #carrello{position:relative;top:auto}
}

.schedaProdotto{

    margin:24px 0;

    border-top:1px solid #ececec;

    border-bottom:1px solid #ececec;

}

.riga{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:11px 0;

    border-bottom:1px solid #f3f3f3;

}

.riga:last-child{

    border-bottom:none;

}

.riga span{

    color:#666;

}

.riga strong{

    color:#222;

}

.logoRetroInfo{

    margin-top:18px;

    padding:14px 18px;

    background:#f8f5ef;

    border-left:4px solid var(--wood);

    border-radius:10px;

    font-size:.95rem;

    line-height:1.5;

}

.chip.active{

    background:#c49749;
    color:white;

}

#contatoreProdotti{

    font-size:.8em;

    font-weight:400;

    color:#888;

    margin-left:10px;

}

.nessunRisultato{

    width:100%;

    padding:80px 20px;

    text-align:center;

    color:#777;

}

.nessunRisultato h3{

    font-size:28px;

    margin-bottom:15px;

}

.nessunRisultato p{

    font-size:17px;

}

.codicePopup{

    color:#888;

    font-size:.95rem;

    margin-top:-12px;

    margin-bottom:18px;

    font-weight:600;

    letter-spacing:1px;

}

.popupTags{

    margin-bottom:12px;

    color:#666;

    line-height:1.6;

    font-size:.95rem;

}

.personalizzazione{

    margin-top:28px;

    padding-top:24px;

    border-top:1px solid #ececec;

}

.personalizzazione h3{

    font-family:Poppins,sans-serif;

    font-size:20px;

    margin-bottom:18px;

}

.campoPersonalizzazione{

    margin-bottom:18px;

}

.campoPersonalizzazione label{

    display:block;

    font-weight:600;

    margin-bottom:8px;

    color:#444;

}

.campoPersonalizzazione input,

.campoPersonalizzazione textarea{

    width:100%;

    padding:12px 14px;

    border:1px solid #ddd;

    border-radius:10px;

    font-family:Inter,sans-serif;

    font-size:15px;

}

.campoPersonalizzazione textarea{

    resize:vertical;

    min-height:90px;

}

/*=========================================
TAG E OCCASIONI NELLA SCHEDA PRODOTTO
=========================================*/

.modalSezione{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:6px;

    margin-bottom:10px;

}

.miniBadge{

    display:inline-flex;

    align-items:center;

    padding:4px 10px;

    border-radius:999px;

    font-size:12px;

    font-weight:600;

    line-height:1;

    user-select:none;

}

.miniBadge.occasione{

    background:#FFF5DE;

    color:#9A6A00;

    border:1px solid #F2D58A;

}

.miniBadge.tag{

    background:#F3F4F6;

    color:#555;

    border:1px solid #D9D9D9;

}

/*==========================================================
    ACCESSO CLIENTE - VETRINA PUBBLICA
==========================================================*/

.clienteBox {

    display: flex;

    align-items: center;

    gap: 10px;

}

#clienteStatus {

    padding: 8px 12px;

    border-radius: 999px;

    background: #f6efe4;

    color: var(--woodDark);

    font-size: 13px;

    font-weight: 600;

    white-space: nowrap;

}

#clienteLoginButton,
#clienteLogoutButton {

    padding: 12px 16px;

    border: none;

    border-radius: 12px;

    background: #222;

    color: #fff;

    cursor: pointer;

    font-weight: 600;

    transition: .25s;

}

#clienteLoginButton:hover,
#clienteLogoutButton:hover {

    background: var(--woodDark);

}

/*==========================================================
    POPUP ACCESSO CLIENTE
==========================================================*/

.clienteModal {

    display: none;

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,.55);

    backdrop-filter: blur(4px);

    z-index: 10000;

    justify-content: center;

    align-items: center;

    padding: 30px;

}

.clienteModalContent {

    width: min(420px, 95vw);

    background: #fff;

    border-radius: 22px;

    padding: 34px;

    box-shadow: 0 20px 60px rgba(0,0,0,.25);

    position: relative;

    animation: popup .25s ease;

}

.chiudiClienteModal {

    position: absolute;

    top: 14px;

    right: 18px;

    width: 36px;

    height: 36px;

    border: none;

    border-radius: 50%;

    background: #f3f3f3;

    font-size: 24px;

    line-height: 1;

    cursor: pointer;

}

.clienteModalContent h2 {

    font-family: Poppins, sans-serif;

    margin-bottom: 12px;

}

.clienteModalContent p {

    color: #666;

    line-height: 1.5;

    margin-bottom: 18px;

}

#passwordCliente {

    width: 100%;

    padding: 14px 16px;

    border: 1px solid var(--border);

    border-radius: 12px;

    font-size: 15px;

    margin-bottom: 12px;

}

.btnClienteLogin {

    width: 100%;

    padding: 14px 18px;

    border: none;

    border-radius: 12px;

    background: var(--wood);

    color: #fff;

    font-weight: 700;

    cursor: pointer;

    transition: .25s;

}

.btnClienteLogin:hover {

    background: var(--woodDark);

}

.messaggioLoginCliente {

    min-height: 20px;

    margin-bottom: 12px;

    font-size: 14px;

    color: #c0392b;

    font-weight: 600;

}

/*==========================================================
    PREZZI RISERVATI CLIENTE
==========================================================*/

.prezzo .prezzoPubblicoBarrato,
#modalPrice .prezzoPubblicoBarrato {

    display: inline-block;

    color: #888 !important;

    text-decoration: line-through !important;

    text-decoration-thickness: 2px;

    font-size: 14px;

    font-weight: 500 !important;

    opacity: 0.75;

    margin-bottom: 3px;

}

.prezzo strong {

    display: inline-block;

    color: var(--woodDark);

    font-size: 18px;

    font-weight: 800;

}

#modalPrice strong {

    color: var(--woodDark);

    font-size: 18px;

    font-weight: 800;

}

/*==========================================================
    BENVENUTO CLIENTE RISERVATO
==========================================================*/

.clienteWelcome {

    max-width: 520px;

    margin: 18px 14% 28px auto;

    padding: 22px 26px;

    background: linear-gradient(135deg, #fffaf2, #f6efe4);

    border: 1px solid rgba(181, 128, 48, .25);

    border-radius: 22px;

    box-shadow: 0 14px 35px rgba(0,0,0,.08);

}

.clienteWelcomeBadge {

    display: inline-block;

    padding: 7px 12px;

    margin-bottom: 10px;

    border-radius: 999px;

    background: rgba(181, 128, 48, .15);

    color: var(--woodDark);

    font-size: 13px;

    font-weight: 700;

}

.clienteWelcome h2 {

    margin: 0 0 8px 0;

    font-family: Poppins, sans-serif;

    font-size: 24px;

    color: #222;

}

.clienteWelcome p {

    margin: 0;

    color: #555;

    line-height: 1.5;

    font-size: 15px;

}

/*==========================================================
    COLORI PRODOTTO - VETRINA
==========================================================*/

.miniBadge.colore {

    display: inline-block;

    margin: 3px 4px 3px 0;

    padding: 5px 9px;

    border-radius: 999px;

    background: #f6efe4;

    color: var(--woodDark);

    font-size: 12px;

    font-weight: 700;

    border: 1px solid rgba(181, 128, 48, .25);

}

.rigaColori strong {

    text-align: right;

    line-height: 1.8;

}

/*==========================================================
    QUADRATINI COLORI - SCHEDA PRODOTTO VETRINA
==========================================================*/

.coloreVetrinaItem {

    display: inline-flex;

    flex-direction: column;

    align-items: center;

    gap: 5px;

    margin: 4px 6px 6px 0;

    vertical-align: top;

}

.coloreSwatchVetrina {

    width: 24px;

    height: 24px;

    border-radius: 7px;

    border: 1px solid rgba(0,0,0,.18);

    box-shadow: inset 0 1px 2px rgba(255,255,255,.45);

}

.colore-legno {

    background: linear-gradient(135deg, #c99a5a, #8b5a2b);

}

.colore-bianco {

    background: #ffffff;

}

.colore-rosso {

    background: #c62828;

}

.colore-verde {

    background: #2e7d32;

}

.colore-oro {

    background: linear-gradient(135deg, #f7d774, #b8872b);

}

.colore-argento {

    background: linear-gradient(135deg, #f2f2f2, #9e9e9e);

}

.colore-misti {

    background: conic-gradient(
        #c62828,
        #2e7d32,
        #f7d774,
        #9e9e9e,
        #ffffff,
        #c62828
    );

}

/*==========================================================
    COLORI PRODOTTO - LAYOUT ORDINATO
==========================================================*/

.coloriVetrinaGrid {

    display: grid;

    grid-template-columns: repeat(2, minmax(120px, 1fr));

    gap: 8px 14px;

    justify-content: end;

}

.coloreVetrinaItem {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 6px 8px;

    border-radius: 999px;

    background: #f6efe4;

    border: 1px solid rgba(181, 128, 48, .25);

    color: var(--woodDark);

    font-size: 13px;

    font-weight: 700;

    white-space: nowrap;

}

.coloreSwatchVetrina {

    width: 20px;

    height: 20px;

    border-radius: 6px;

    border: 1px solid rgba(0,0,0,.18);

    box-shadow: inset 0 1px 2px rgba(255,255,255,.45);

    flex: none;

}

.rigaColori strong {

    width: 100%;

}

/*==========================================================
    COLORI PRODOTTO - BADGE COMPATTI
==========================================================*/

.coloriVetrinaGrid {

    grid-template-columns: repeat(2, minmax(95px, 1fr));

    gap: 6px 10px;

}

.coloreVetrinaItem {

    padding: 5px 8px;

    border-radius: 14px;

    font-size: 12px;

    min-height: 34px;

    justify-content: center;

}

.coloreSwatchVetrina {

    width: 16px;

    height: 16px;

    border-radius: 5px;

}

.rigaColori {

    align-items: center;

}

.rigaColori strong {

    max-width: 420px;

}

/*==========================================================
    COLORI PRODOTTO - VARIANTE C
    Badge chiaro con barretta colore laterale
==========================================================*/

.coloriVetrinaGrid {

    display: grid;

    grid-template-columns: repeat(2, minmax(95px, 1fr));

    gap: 6px 10px;

}

.coloreVetrinaItem {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 32px;

    padding: 5px 10px 5px 14px;

    border-radius: 14px;

    background: #f6efe4;

    border: 1px solid rgba(181, 128, 48, .25);

    color: var(--woodDark);

    font-size: 12px;

    font-weight: 700;

    white-space: nowrap;

    overflow: hidden;

}

.coloreVetrinaItem::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    bottom: 0;

    width: 6px;

    background: #b8872b;

}

.coloreVetrinaItem.colore-legno::before {

    background: linear-gradient(180deg, #c99a5a, #8b5a2b);

}

.coloreVetrinaItem.colore-bianco::before {

    background: #ffffff;

    border-right: 1px solid #d0d0d0;

}

.coloreVetrinaItem.colore-rosso::before {

    background: #c62828;

}

.coloreVetrinaItem.colore-verde::before {

    background: #2e7d32;

}

.coloreVetrinaItem.colore-oro::before {

    background: linear-gradient(180deg, #f7d774, #b8872b);

}

.coloreVetrinaItem.colore-argento::before {

    background: linear-gradient(180deg, #f2f2f2, #9e9e9e);

}

.coloreVetrinaItem.colore-misti::before {

    background: linear-gradient(
        180deg,
        #c62828,
        #2e7d32,
        #f7d774,
        #9e9e9e
    );

}

.coloreSwatchVetrina {

    display: none;

}

.rigaColori {

    align-items: center;

}

.rigaColori strong {

    width: 100%;

}

/*==========================================================
    COLORI PRODOTTO - BADGE PIÙ COMPATTI
==========================================================*/

.coloriVetrinaGrid {

    grid-template-columns: repeat(2, max-content);

    justify-content: end;

    gap: 6px 10px;

}

.coloreVetrinaItem {

    min-width: 105px;

    padding: 5px 12px 5px 16px;

}

/*==========================================================
    SCHEDA PRODOTTO - SCELTE ORDINE
==========================================================*/

.sceltaColoreBox,
.quantitaOrdineBox {

    margin-top: 18px;

    padding: 14px 16px;

    border-radius: 16px;

    background: #f6efe4;

    border: 1px solid rgba(181, 128, 48, .25);

}

.sceltaColoreBox label,
.quantitaOrdineBox label {

    display: block;

    margin-bottom: 8px;

    font-size: 13px;

    font-weight: 800;

    color: var(--woodDark);

}

#coloreOrdine {

    width: 100%;

    padding: 10px 12px;

    border-radius: 12px;

    border: 1px solid rgba(181, 128, 48, .35);

    background: #fff;

    color: var(--woodDark);

    font-size: 14px;

    font-weight: 700;

}

.quantitaStepper {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    margin-top: 6px;

}

.quantitaStepper button {

    width: 38px;

    height: 38px;

    border: none;

    border-radius: 50%;

    background: var(--woodDark);

    color: #fff;

    font-size: 22px;

    font-weight: 800;

    cursor: pointer;

    line-height: 1;

}

.quantitaStepper button:hover {

    transform: scale(1.05);

}

#quantitaOrdine {

    min-width: 60px;

    text-align: center;

    font-size: 22px;

    font-weight: 900;

    color: var(--woodDark);

}

#quantitaInfo {

    display: block;

    margin-top: 8px;

    text-align: center;

    font-size: 12px;

    color: #7a6042;

}


/*==========================================================
    SCHEDA PRODOTTO - RIEPILOGO PERSONALIZZAZIONE
==========================================================*/

.riepilogoPersonalizzazione {

    margin-top: 18px;

    padding: 14px 16px;

    border-radius: 16px;

    background: #fffaf2;

    border: 1px solid rgba(181, 128, 48, .35);

}

.riepilogoPersonalizzazione h4 {

    margin: 0 0 8px;

    font-size: 14px;

    color: var(--woodDark);

}

#testoPersonalizzazioneScelta {

    margin: 0;

    padding: 10px 12px;

    border-radius: 12px;

    background: #fff;

    color: #333;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.4;

}

.azioniPersonalizzazione {

    display: flex;

    gap: 10px;

    margin-top: 12px;

}

.azioniPersonalizzazione button {

    flex: 1;

    padding: 9px 12px;

    border: none;

    border-radius: 999px;

    background: #eadcc8;

    color: var(--woodDark);

    font-weight: 800;

    cursor: pointer;

}

.azioniPersonalizzazione button:hover {

    background: #dfc9aa;

}


/*==========================================================
    SCHEDA PRODOTTO - AGGIUNGI AL CARRELLO
==========================================================*/

.btnAggiungiCarrello {

    width: 100%;

    margin-top: 20px;

    padding: 14px 18px;

    border: none;

    border-radius: 999px;

    background: var(--woodDark);

    color: #fff;

    font-size: 16px;

    font-weight: 900;

    cursor: pointer;

    box-shadow: 0 10px 25px rgba(0, 0, 0, .18);

}

.btnAggiungiCarrello:hover {

    transform: translateY(-1px);

    box-shadow: 0 14px 30px rgba(0, 0, 0, .22);

}

/*==========================================================
    SCHEDA PRODOTTO - VERSIONE COMPATTA
==========================================================*/

.schedaProdotto .riga {

    padding: 9px 0;

}

.coloriVetrinaGrid {

    gap: 5px 8px;

}

.coloreVetrinaItem {

    min-height: 28px;

    min-width: 96px;

    padding: 4px 10px 4px 14px;

    font-size: 12px;

}

.logoRetroInfo {

    margin-top: 12px;

    padding: 12px 16px;

}

.personalizzazione {

    margin-top: 16px;

    padding-top: 16px;

}

.personalizzazione h3 {

    margin-bottom: 12px;

    font-size: 22px;

}

.campoPersonalizzazione label {

    margin-bottom: 7px;

}

.campoPersonalizzazione input {

    padding: 11px 14px;

}

.btnPersonalizza {

    margin-top: 14px;

    padding: 11px 16px;

}

.quantitaOrdineBox {

    margin-top: 16px;

    padding: 12px 14px;

}

.quantitaOrdineBox label {

    margin-bottom: 4px;

}

.quantitaStepper {

    gap: 14px;

    margin-top: 2px;

}

.quantitaStepper button {

    width: 34px;

    height: 34px;

    font-size: 20px;

}

#quantitaOrdine {

    min-width: 44px;

    font-size: 20px;

}

#quantitaInfo {

    margin-top: 5px;

    font-size: 11px;

}

.btnAggiungiCarrello {

    margin-top: 14px;

    padding: 12px 16px;

}

/*==========================================================
    SCHEDA PRODOTTO - ALLINEAMENTO PERSONALIZZAZIONE
==========================================================*/

.personalizzazione {

    margin-top: 14px;

    padding-top: 14px;

    margin-bottom: 0;

}

.personalizzazione h3 {

    margin: 0 0 12px;

}

.campoPersonalizzazione {

    margin-bottom: 0;

}

.campoPersonalizzazione label {

    margin-bottom: 6px;

}

.campoPersonalizzazione input {

    margin-bottom: 0;

}

.btnPersonalizza {

    display: block;

    width: 100%;

    box-sizing: border-box;

    margin: 12px 0 0;

    padding: 12px 16px;

    border-radius: 16px;

}

.quantitaOrdineBox {

    margin-top: 14px;

}

.btnAggiungiCarrello {

    margin-top: 12px;

}

/*==========================================================
    COLORI PRODOTTO - QUANTITÀ COMPATTA
==========================================================*/

.coloriQuantitaGrid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 6px;

}

.coloreQuantitaItem {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}

.coloreQuantitaItem .coloreVetrinaItem {

    min-width: 96px;

}

.stepperColore {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    flex: none;

}

.stepperColore button {

    width: 26px;

    height: 26px;

    border: none;

    border-radius: 50%;

    background: var(--woodDark);

    color: #fff;

    font-size: 16px;

    font-weight: 900;

    cursor: pointer;

    line-height: 1;

}

.quantitaColoreValore {

    min-width: 24px;

    text-align: center;

    font-size: 15px;

    font-weight: 900;

    color: var(--woodDark);

}

/*==========================================================
    COLORI PRODOTTO - PULSANTI TONDI
==========================================================*/

.stepperColore button {

    width: 28px !important;

    height: 28px !important;

    min-width: 28px !important;

    max-width: 28px !important;

    padding: 0 !important;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 50% !important;

    line-height: 1 !important;

    aspect-ratio: 1 / 1;

}

.stepperColore {

    gap: 7px;

}

.quantitaColoreValore {

    min-width: 22px;

}

/*==========================================================
    COLORI PRODOTTO - QUANTITÀ CENTRATA TRA I PULSANTI
==========================================================*/

.stepperColore {

    display: grid !important;

    grid-template-columns: 30px 34px 30px;

    align-items: center;

    justify-items: center;

    gap: 8px;

}

.quantitaColoreValore {

    width: 34px !important;

    min-width: 34px !important;

    max-width: 34px !important;

    display: block;

    text-align: center !important;

    font-size: 16px;

    font-weight: 900;

    line-height: 1;

}

/*==========================================================
    TOAST VETRINA
==========================================================*/

.toastVetrina {

    position: fixed;

    right: 28px;

    bottom: 28px;

    z-index: 99999;

    max-width: 360px;

    padding: 14px 18px;

    border-radius: 16px;

    background: #fffaf2;

    border: 1px solid rgba(181, 128, 48, .35);

    border-left: 6px solid #b8872b;

    color: var(--woodDark);

    font-size: 14px;

    font-weight: 800;

    box-shadow: 0 14px 35px rgba(0, 0, 0, .22);

    opacity: 0;

    transform: translateY(20px);

    pointer-events: none;

    transition: opacity .25s ease, transform .25s ease;

}

.toastVetrina.show {

    opacity: 1;

    transform: translateY(0);

}

.toastVetrina.success {

    border-left-color: #32c766;

}

.toastVetrina.warning {

    border-left-color: #d99a2b;

}

.toastVetrina.error {

    border-left-color: #d44;

}

/*==========================================================
    TOAST VETRINA - CENTRATO A SCHERMO
==========================================================*/

.toastVetrina {

    left: 50%;

    right: auto;

    top: 50%;

    bottom: auto;

    width: calc(100% - 48px);

    max-width: 420px;

    text-align: center;

    transform: translate(-50%, calc(-50% + 20px));

}

.toastVetrina.show {

    transform: translate(-50%, -50%);

}

/*==========================================================
    CARRELLO - LAYOUT MIGLIORATO
==========================================================*/

@media (min-width: 1101px) {

    .layout {

        display: grid;

        grid-template-columns: minmax(0, 1fr) 380px;

        gap: 34px;

        align-items: start;

    }

    #carrello {

        width: 100%;

        margin-top: 54px;

        align-self: start;

        position: sticky;

        top: 110px;

    }

}

@media (min-width: 1500px) {

    .layout {

        grid-template-columns: minmax(0, 1fr) 420px;

    }

}


/*==========================================================
    CARRELLO - RIGHE PRODOTTI
==========================================================*/

#carrelloProdotti {

    display: flex;

    flex-direction: column;

    gap: 10px;

}

.rigaCarrello {

    display: grid;

    grid-template-columns: 56px minmax(0, 1fr) auto;

    gap: 12px;

    align-items: center;

    padding: 10px 0;

    border-bottom: 1px solid rgba(0, 0, 0, .08);

}

.rigaCarrelloMiniatura {

    width: 52px;

    height: 52px;

    border-radius: 14px;

    background: #faf7ef;

    border: 1px solid rgba(191, 143, 62, .22);

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 8px 18px rgba(0, 0, 0, .05);

}

.rigaCarrelloMiniatura img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    display: block;

}

.rigaCarrelloTesto {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 2px;

}

.rigaCarrelloTesto strong {

    display: block;

    max-width: 100%;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 13px;

    line-height: 1.25;

}

.rigaCarrelloTesto small {

    display: block;

    color: #6f6f6f;

    font-size: 12px;

    line-height: 1.25;

}

.rigaCarrelloAzioni {

    text-align: right;

    white-space: nowrap;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    justify-content: center;

    gap: 8px;

}

.rigaCarrelloAzioni strong {

    font-size: 13px;

    font-weight: 900;

}

.btnRimuoviCarrello {

    width: 24px;

    height: 24px;

    min-width: 24px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background: #eadcc8;

    color: var(--woodDark);

    font-size: 16px;

    font-weight: 900;

    cursor: pointer;

    line-height: 1;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    transition: transform .16s ease, background .16s ease;

}

.btnRimuoviCarrello:hover {

    background: #d8bd91;

    transform: scale(1.06);

}

.btnRimuoviCarrello:hover {

    background: #d44;

    color: #fff;

}


/*==========================================================
    CARRELLO - RESPONSIVE
==========================================================*/

@media (max-width: 1100px) {

    .layout {

        display: block;

    }

    #carrello {

        width: auto;

        margin-top: 28px;

        position: static;

    }

}

@media (max-width: 600px) {

    .rigaCarrello {

        grid-template-columns: 26px minmax(0, 1fr);

    }

    .rigaCarrelloAzioni {

        grid-column: 2;

        text-align: left;

        margin-top: 3px;

    }

}

/*==========================================================
    CARRELLO - ALLINEAMENTO CON SCHEDE PRODOTTO
==========================================================*/

@media (min-width: 1101px) {

    #carrello {

        margin-top: 72px;

    }

}

/*==========================================================
    CLIENTE - STATO ORDINI
==========================================================*/

.clienteOrdiniBox {

    margin-top: 18px;

    padding: 16px 18px;

    border-radius: 18px;

    background: #fffaf2;

    border: 1px solid rgba(181, 128, 48, .28);

    box-shadow: 0 10px 25px rgba(0, 0, 0, .06);

}

.clienteOrdiniHeader {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 14px;

}

.clienteOrdiniHeader h3 {

    margin: 0;

    font-size: 17px;

    color: var(--woodDark);

}

.clienteOrdiniHeader p {

    margin: 4px 0 0;

    color: #7a6042;

    font-size: 13px;

    line-height: 1.4;

}

.clienteOrdineStato {

    display: inline-block;

    padding: 7px 12px;

    border-radius: 999px;

    background: #e9f8ee;

    color: #1f7a3a;

    font-size: 12px;

    font-weight: 900;

    white-space: nowrap;

}

.btnClienteOrdine {

    margin-top: 12px;

    padding: 9px 14px;

    border: none;

    border-radius: 999px;

    background: var(--woodDark);

    color: #fff;

    font-size: 13px;

    font-weight: 900;

    cursor: pointer;

}

.btnClienteOrdine:hover {

    transform: translateY(-1px);

}

.clienteOrdineDettaglio {

    margin-top: 14px;

    padding-top: 12px;

    border-top: 1px solid rgba(181, 128, 48, .22);

}

.clienteOrdineRiga {

    display: grid;

    grid-template-columns: minmax(0, 1fr) auto;

    gap: 10px;

    padding: 8px 0;

    border-bottom: 1px solid rgba(0, 0, 0, .06);

}

.clienteOrdineRiga:last-child {

    border-bottom: none;

}

.clienteOrdineRiga strong {

    display: block;

    font-size: 13px;

    color: var(--woodDark);

}

.clienteOrdineRiga small {

    display: block;

    margin-top: 2px;

    color: #7a6042;

    font-size: 12px;

}

.clienteOrdineTotale {

    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin-top: 12px;

    font-size: 15px;

    font-weight: 900;

    color: var(--woodDark);

}

@media (max-width: 700px) {

    .clienteOrdiniHeader {

        display: block;

    }

    .clienteOrdineStato {

        margin-top: 10px;

    }

    .clienteOrdineRiga {

        grid-template-columns: 1fr;

    }

}

/*==========================================================
    CLIENTE - BADGE ORIZZONTALE SOTTO HERO
==========================================================*/

.clienteWelcome {

    max-width: 1280px;

    margin: 22px auto 28px;

    padding: 18px 22px;

    border-radius: 22px;

}

.clienteWelcome > div {

    display: grid;

    grid-template-columns: minmax(260px, .9fr) minmax(420px, 1.3fr);

    gap: 22px;

    align-items: center;

}

.clienteWelcomeBadge {

    grid-column: 1;

    width: fit-content;

}

#clienteWelcomeTitolo {

    grid-column: 1;

    margin: 10px 0 8px;

}

#clienteWelcomeTesto {

    grid-column: 1;

    margin: 0;

    line-height: 1.45;

}

.clienteOrdiniBox {

    grid-column: 2;

    grid-row: 1 / span 3;

    margin-top: 0;

    padding: 14px 16px;

    border-radius: 18px;

}

.clienteOrdiniHeader {

    display: grid;

    grid-template-columns: minmax(0, 1fr) auto;

    gap: 18px;

    align-items: center;

}

.clienteOrdiniHeader h3 {

    font-size: 16px;

}

.clienteOrdiniHeader p {

    font-size: 13px;

}

.btnClienteOrdine {

    margin-top: 10px;

}


/*==========================================================
    CLIENTE - BADGE ORIZZONTALE RESPONSIVE
==========================================================*/

@media (max-width: 900px) {

    .clienteWelcome {

        margin: 18px 16px 24px;

    }

    .clienteWelcome > div {

        display: block;

    }

    .clienteOrdiniBox {

        margin-top: 16px;

    }

}

@media (max-width: 600px) {

    .clienteWelcome {

        padding: 16px;

        border-radius: 18px;

    }

    .clienteOrdiniHeader {

        display: block;

    }

    .clienteOrdineStato {

        margin-top: 10px;

    }

}

/*==========================================================
    CLIENTE - BADGE LARGO COME HERO E PIÙ COMPATTO
==========================================================*/

.clienteWelcome {

    width: min(1280px, calc(100% - 48px)) !important;

    max-width: 1280px !important;

    margin: 20px auto 24px !important;

    padding: 14px 20px !important;

}

.clienteWelcome > div {

    display: grid !important;

    grid-template-columns: minmax(300px, .85fr) minmax(560px, 1.15fr) !important;

    gap: 24px !important;

    align-items: center !important;

}

#clienteWelcomeTitolo {

    margin: 8px 0 6px !important;

    font-size: 24px !important;

}

#clienteWelcomeTesto {

    font-size: 14px !important;

    line-height: 1.35 !important;

}

.clienteOrdiniBox {

    padding: 12px 14px !important;

}

.clienteOrdiniHeader {

    grid-template-columns: minmax(0, 1fr) auto !important;

    gap: 16px !important;

}

.clienteOrdiniHeader h3 {

    font-size: 15px !important;

}

.clienteOrdiniHeader p {

    font-size: 12px !important;

    line-height: 1.35 !important;

}

.clienteOrdineStato {

    padding: 6px 11px !important;

    font-size: 11px !important;

}

.btnClienteOrdine {

    margin-top: 8px !important;

    padding: 8px 13px !important;

    font-size: 12px !important;

}

/*==========================================================
    CLIENTE - BADGE ALLINEATO HERO DEFINITIVO
==========================================================*/

.clienteWelcome {

    width: min(1500px, calc(100% - 48px)) !important;

    max-width: 1500px !important;

    margin: 18px auto 24px !important;

    padding: 12px 18px !important;

}

.clienteWelcome > div {

    grid-template-columns: minmax(320px, .9fr) minmax(620px, 1.1fr) !important;

    gap: 26px !important;

}

#clienteWelcomeTitolo {

    font-size: 23px !important;

    margin: 6px 0 5px !important;

}

#clienteWelcomeTesto {

    font-size: 13px !important;

    line-height: 1.3 !important;

}

.clienteOrdiniBox {

    padding: 10px 14px !important;

}

.clienteOrdiniHeader h3 {

    font-size: 14px !important;

}

.clienteOrdiniHeader p {

    font-size: 11px !important;

}

.btnClienteOrdine {

    padding: 7px 12px !important;

}

/*==========================================================
    CLIENTE - BADGE PIÙ LARGO E PIÙ COMPATTO
==========================================================*/

.clienteWelcome {

    width: min(1900px, calc(100% - 48px)) !important;

    max-width: 1900px !important;

    margin: 16px auto 22px !important;

    padding: 10px 16px !important;

}

.clienteWelcome > div {

    grid-template-columns: minmax(340px, .85fr) minmax(680px, 1.15fr) !important;

    gap: 30px !important;

    align-items: center !important;

}

.clienteWelcomeBadge {

    margin-bottom: 0 !important;

    padding: 5px 10px !important;

    font-size: 11px !important;

}

#clienteWelcomeTitolo {

    margin: 2px 0 4px !important;

    font-size: 22px !important;

    line-height: 1.15 !important;

}

#clienteWelcomeTesto {

    margin-top: 0 !important;

    font-size: 12px !important;

    line-height: 1.25 !important;

}

.clienteOrdiniBox {

    padding: 9px 12px !important;

}

.clienteOrdiniHeader {

    gap: 14px !important;

}

.clienteOrdiniHeader h3 {

    margin-bottom: 2px !important;

    font-size: 14px !important;

}

.clienteOrdiniHeader p {

    margin-top: 0 !important;

    font-size: 11px !important;

    line-height: 1.25 !important;

}

.btnClienteOrdine {

    margin-top: 6px !important;

    padding: 6px 12px !important;

}

/*==========================================================
    CLIENTE - LISTA ORDINI MULTIPLI
==========================================================*/

.clienteOrdiniHeaderLista {

    margin-bottom: 8px;

}

.clienteOrdiniLista {

    display: flex;

    flex-direction: column;

    gap: 8px;

    max-height: 260px;

    overflow-y: auto;

    padding-right: 4px;

}

.clienteOrdineBlocco {

    border-radius: 14px;

}

.clienteOrdineCompatto {

    display: grid;

    grid-template-columns: minmax(0, 1fr) auto auto;

    gap: 10px;

    align-items: center;

    padding: 8px 10px;

    border-radius: 14px;

    background: #fffaf2;

    border: 1px solid rgba(181, 128, 48, .22);

}

.clienteOrdineNumero {

    min-width: 0;

}

.clienteOrdineNumero strong {

    display: block;

    color: var(--woodDark);

    font-size: 12px;

    font-weight: 900;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

.clienteOrdineNumero small {

    display: block;

    margin-top: 2px;

    color: #7a6042;

    font-size: 11px;

}

.clienteOrdineCompatto .clienteOrdineStato {

    padding: 5px 10px !important;

    font-size: 11px !important;

}

.clienteOrdineCompatto .btnClienteOrdine {

    margin-top: 0 !important;

    padding: 6px 11px !important;

    font-size: 11px !important;

}

.clienteOrdineBlocco .clienteOrdineDettaglio {

    margin: 8px 0 2px;

    padding: 10px;

    border-radius: 14px;

    background: rgba(255, 250, 242, .8);

    border: 1px solid rgba(181, 128, 48, .18);

}

@media (max-width: 700px) {

    .clienteOrdineCompatto {

        grid-template-columns: 1fr;

    }

    .clienteOrdineCompatto .clienteOrdineStato {

        width: fit-content;

    }

}

/*==========================================================
    VETRINA - TASSONOMIE COMPATTE
    Occasioni / Categorie / Tag
==========================================================*/

.occasioni,
.categorie,
.tagsVetrina {

    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 14px;
    margin-bottom: 8px;

}

/* Chip generali più piccoli */

.chip {

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    min-height: 0 !important;

    padding: 8px 14px !important;

    border-radius: 999px !important;

    font-size: 12px !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;

    white-space: nowrap;

}

/* Tag ancora più leggeri */

.tagsVetrina .chip,
.tagChip {

    padding: 6px 11px !important;

    font-size: 11px !important;

    opacity: .95;

}

/* Stato attivo più evidente ma compatto */

.chip.active {

    transform: translateY(-1px);

}

/*==========================================================
    POPUP PRODOTTO - BADGE TASSONOMIE COMPATTI
==========================================================*/

.popupTags {

    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin: 7px 0 9px;

}

.modalSezione {

    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 5px;

}

.miniBadge {

    display: inline-flex;
    align-items: center;

    gap: 4px;

    padding: 4px 8px !important;

    border-radius: 999px;

    font-size: 11px !important;
    line-height: 1.1 !important;
    font-weight: 600;

    white-space: nowrap;

}

/* Occasioni */

.miniBadge.occasione {

    background: #fff4df;

}

/* Tag */

.miniBadge.tag {

    background: #f2f2f2;

}

/* Categorie nel popup */

#modalCategorie {

    font-size: 12px;

    line-height: 1.4;

}

/*==========================================================
    MOBILE - CHIP ANCORA PIÙ COMPATTI
==========================================================*/

@media (max-width: 640px) {

    .occasioni,
    .categorie,
    .tagsVetrina {

        gap: 6px;

    }

    .chip {

        padding: 7px 11px !important;

        font-size: 11px !important;

    }

    .tagsVetrina .chip,
    .tagChip {

        padding: 5px 9px !important;

        font-size: 10.5px !important;

    }

    .miniBadge {

        padding: 4px 7px !important;

        font-size: 10.5px !important;

    }

}

/*==========================================================
    BANNER VETRINA PUBBLICA
==========================================================*/

.bannerVetrinaSection {

    margin-top: 10px;

    margin-bottom: 26px;

}

.bannerVetrinaGrid {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 16px;

}

.bannerVetrinaCard {

    width: 100%;

    aspect-ratio: 600 / 260;

    border: none;

    border-radius: 22px;

    overflow: hidden;

    padding: 0;

    background: #fff;

    box-shadow: var(--shadow);

    cursor: pointer;

    position: relative;

    transition:
        transform .22s ease,
        box-shadow .22s ease;

}

.bannerVetrinaCard img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}

.bannerVetrinaCard:hover {

    transform: translateY(-4px);

    box-shadow: 0 16px 38px rgba(0, 0, 0, .15);

}

.bannerVetrinaCard:active {

    transform: translateY(-1px);

}

/*==========================================================
    BANNER VETRINA - RESPONSIVE
==========================================================*/

@media (max-width: 1200px) {

    .bannerVetrinaGrid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}

@media (max-width: 640px) {

    .bannerVetrinaSection {

        width: calc(100% - 28px);

        margin-top: 12px;

        margin-bottom: 22px;

    }

    .bannerVetrinaGrid {

        display: flex;

        overflow-x: auto;

        gap: 12px;

        padding-bottom: 8px;

        scroll-snap-type: x mandatory;

    }

    .bannerVetrinaCard {

        min-width: 82%;

        border-radius: 18px;

        scroll-snap-align: start;

    }

}

/*==========================================================
    BARRA CATEGORIE VETRINA - STILE WOOD
==========================================================*/

.barraCategorieVetrina {

    width: 100%;

    background:
        linear-gradient(
            135deg,
            #241a12,
            #332313 48%,
            #21170f
        );

    border-top: 1px solid rgba(255, 255, 255, .08);

    border-bottom: 1px solid rgba(0, 0, 0, .28);

    box-shadow: 0 8px 22px rgba(0, 0, 0, .16);

    position: relative;

    z-index: 900;

}

.barraCategorieInner {

    width: calc(100% - 60px);

    max-width: 1900px;

    margin: 0 auto;

    position: relative;

}

.barraCategorieLista {

    display: flex;

    align-items: center;

    gap: 4px;

    overflow-x: auto;

    overflow-y: hidden;

    padding: 8px 0;

    scrollbar-width: thin;

    scrollbar-color: rgba(215, 177, 106, .65) transparent;

}

.barraCategorieLista::-webkit-scrollbar {

    height: 6px;

}

.barraCategorieLista::-webkit-scrollbar-track {

    background: transparent;

}

.barraCategorieLista::-webkit-scrollbar-thumb {

    background: rgba(215, 177, 106, .65);

    border-radius: 999px;

}

.barraCategorieVetrina .chip {

    flex: 0 0 auto;

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    min-height: 0 !important;

    padding: 9px 15px !important;

    border: 1px solid transparent !important;

    border-radius: 10px !important;

    background: transparent !important;

    color: #fff7e8 !important;

    box-shadow: none !important;

    font-size: 13px !important;

    font-weight: 800 !important;

    line-height: 1 !important;

    letter-spacing: .2px;

    white-space: nowrap;

    cursor: pointer;

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        transform .18s ease;

}

.barraCategorieVetrina .tutteTassonomieButton::before {

    content: none !important;

}

.tutteTassonomieButton {

    gap: 9px;

}

.tutteMenuIcon {

    position: relative;

    display: inline-block;

    width: 20px;

    height: 15px;

    flex: 0 0 20px;

}

.tutteMenuIcon::before,
.tutteMenuIcon::after,
.tutteMenuIcon > span {

    content: "";

    position: absolute;

    left: 0;

    width: 20px;

    height: 3px;

    border-radius: 999px;

    background: currentColor;

    box-shadow: 0 1px 0 rgba(0, 0, 0, .15);

}

.tutteMenuIcon::before {

    top: 0;

}

.tutteMenuIcon > span {

    top: 6px;

}

.tutteMenuIcon::after {

    top: 12px;

}

.tassonomieMenuFiltro {

    position: absolute;

    top: calc(100% + 8px);

    left: 0;

    width: min(380px, calc(100vw - 40px));

    max-height: min(68vh, 520px);

    overflow-y: auto;

    padding: 8px;

    border: 1px solid rgba(215, 177, 106, .42);

    border-radius: 16px;

    background: linear-gradient(145deg, #2b1e13, #1c130d);

    box-shadow: 0 18px 45px rgba(0, 0, 0, .38);

    z-index: 980;

}

.tassonomieMenuFiltro[hidden] {

    display: none !important;

}

.tassonomieMenuLista {

    display: flex;

    flex-direction: column;

    gap: 4px;

}

.tassonomieMenuVoce {

    width: 100%;

    min-height: 44px;

    display: grid;

    grid-template-columns: 30px minmax(0, 1fr);

    align-items: center;

    gap: 10px;

    padding: 9px 12px;

    border: 1px solid transparent;

    border-radius: 11px;

    background: transparent;

    color: #fff7e8;

    font-family: Inter, sans-serif;

    font-size: 14px;

    font-weight: 750;

    text-align: left;

    cursor: pointer;

}

.tassonomieMenuVoce:hover {

    background: rgba(255, 255, 255, .08);

    border-color: rgba(215, 177, 106, .25);

}

.tassonomieMenuVoce.active {

    background: linear-gradient(135deg, #b88a4b, #d7b16a);

    border-color: rgba(255, 255, 255, .25);

    color: #21170f;

}

.tassonomieMenuVoceIcona {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

}

.barraCategorieVetrina .chip:hover {

    background: rgba(255, 255, 255, .08) !important;

    border-color: rgba(215, 177, 106, .28) !important;

    color: #ffe6b0 !important;

    transform: translateY(-1px);

}

.barraCategorieVetrina .chip.active {

    background: linear-gradient(135deg, #b88a4b, #d7b16a) !important;

    color: #21170f !important;

    border-color: rgba(255, 255, 255, .25) !important;

    box-shadow: 0 5px 14px rgba(0, 0, 0, .22) !important;

}

/*==========================================================
    BARRA CATEGORIE - MOBILE
==========================================================*/

@media (max-width: 760px) {

    .barraCategorieInner {

        width: calc(100% - 22px);

    }

    .barraCategorieLista {

        padding: 7px 0;

        gap: 3px;

    }

    .barraCategorieVetrina .chip {

        padding: 8px 12px !important;

        font-size: 12px !important;

        border-radius: 9px !important;

    }

}

/*==========================================================
    BARRA CATEGORIE - STICKY SOTTO HEADER
==========================================================*/

.barraCategorieVetrina {

    position: sticky !important;

    top: var(--altezzaHeaderVetrina, 96px) !important;

    z-index: 950 !important;

}

.header {

    z-index: 1000 !important;

}

/*==========================================================
    CLIENTE - BADGE COMPATTO UNA RIGA
==========================================================*/

.clienteWelcomeCompatto {

    width: min(1900px, calc(100% - 60px)) !important;

    max-width: 1900px !important;

    margin: 14px auto 18px !important;

    padding: 8px 14px !important;

    border-radius: 16px !important;

    background: linear-gradient(135deg, #fffaf2, #f6efe4) !important;

    border: 1px solid rgba(181, 128, 48, .22) !important;

    box-shadow: 0 8px 22px rgba(0, 0, 0, .06) !important;

}

.clienteWelcomeCompatto > div {

    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

    min-width: 0 !important;

}

.clienteWelcomeCompatto .clienteWelcomeBadge {

    flex: 0 0 auto !important;

    margin: 0 !important;

    padding: 6px 10px !important;

    font-size: 12px !important;

    line-height: 1 !important;

}

.clienteWelcomeCompatto #clienteWelcomeTitolo {

    flex: 0 1 auto !important;

    margin: 0 !important;

    font-size: 14px !important;

    line-height: 1.2 !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

}

.clienteWelcomeCompatto #clienteWelcomeTesto {

    display: none !important;

}

.clienteWelcomeCompatto .clienteOrdiniBox {

    flex: 1 1 auto !important;

    min-width: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

}

.clienteOrdineMiniBar {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 8px;

    min-width: 0;

    width: 100%;

    color: #6d5030;

    font-size: 13px;

    font-weight: 700;

    white-space: nowrap;

}

.clienteOrdineMiniNumero {

    color: var(--woodDark);

    font-weight: 900;

}

.clienteOrdineMiniData,
.clienteOrdineMiniTesto {

    color: #7a6042;

    overflow: hidden;

    text-overflow: ellipsis;

}

.clienteOrdineMiniSeparatore {

    color: rgba(122, 96, 66, .55);

}

.clienteOrdineStatoMini {

    padding: 5px 10px !important;

    font-size: 11px !important;

    line-height: 1 !important;

    flex: 0 0 auto;

}

.clienteOrdineMiniTotale {

    color: var(--woodDark);

    font-weight: 900;

}

.btnClienteOrdiniPagina {

    flex: 0 0 auto;

    margin: 0 !important;

    padding: 7px 12px !important;

    font-size: 12px !important;

    border-radius: 999px !important;

}

/*==========================================================
    CLIENTE - BADGE COMPATTO MOBILE
==========================================================*/

@media (max-width: 900px) {

    .clienteWelcomeCompatto {

        width: calc(100% - 28px) !important;

        padding: 10px 12px !important;

    }

    .clienteWelcomeCompatto > div {

        flex-wrap: wrap !important;

        gap: 8px !important;

    }

    .clienteWelcomeCompatto .clienteOrdiniBox {

        flex-basis: 100% !important;

    }

    .clienteOrdineMiniBar {

        justify-content: flex-start;

        overflow-x: auto;

        padding-bottom: 2px;

    }

}

@media (max-width: 540px) {

    .clienteOrdineMiniData,
    .clienteOrdineMiniTesto,
    .clienteOrdineMiniSeparatore:nth-of-type(2),
    .clienteOrdineMiniSeparatore:nth-of-type(4) {

        display: none;

    }

}

/*==========================================================
    PAGINA ORDINI CLIENTE
==========================================================*/

.btnOrdiniClienteHeader {

    padding: 12px 18px;

    border: none;

    border-radius: 999px;

    background: var(--wood);

    color: #fff;

    font-size: 14px;

    font-weight: 900;

    cursor: pointer;

}

.btnOrdiniClienteHeader:hover {

    background: var(--woodDark);

}

.ordiniClientePagina {

    width: min(1300px, calc(100% - 60px));

    margin: 28px auto 50px;

}

.ordiniClienteHero {

    background: #fff;

    border-radius: 24px;

    padding: 34px 38px;

    box-shadow: var(--shadow);

    border: 1px solid var(--border);

    margin-bottom: 24px;

}

.ordiniClienteHero h2 {

    margin-top: 12px;

    margin-bottom: 8px;

    font-family: Poppins, sans-serif;

    font-size: 42px;

    line-height: 1.05;

}

.ordiniClienteHero p {

    color: #666;

    font-size: 16px;

    line-height: 1.6;

}

.ordiniClienteBox {

    background: #fff;

    border-radius: 24px;

    padding: 24px;

    box-shadow: var(--shadow);

    border: 1px solid var(--border);

}

.ordiniClienteMessaggio {

    padding: 24px;

    border-radius: 18px;

    background: #fffaf2;

    border: 1px solid rgba(181, 128, 48, .25);

    color: var(--woodDark);

    font-weight: 800;

    line-height: 1.6;

}

.ordiniClienteMessaggio.errore {

    background: #fff2f2;

    border-color: rgba(180, 55, 55, .25);

    color: #a33636;

}

.ordiniClienteMessaggio p {

    margin: 8px 0 16px;

    color: inherit;

    font-weight: 600;

}

.ordiniClienteLista {

    display: grid;

    gap: 16px;

}

.ordineClienteCard {

    border: 1px solid rgba(181, 128, 48, .18);

    border-radius: 22px;

    padding: 18px;

    background: linear-gradient(135deg, #fff, #fffaf2);

    box-shadow: 0 10px 24px rgba(0, 0, 0, .05);

}

.ordineClienteCardHeader {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 16px;

    margin-bottom: 16px;

}

.ordineClienteCardHeader h3 {

    margin: 0 0 4px;

    font-family: Poppins, sans-serif;

    font-size: 20px;

    color: #222;

}

.ordineClienteCardHeader p {

    margin: 0;

    color: #7a6042;

    font-size: 13px;

    font-weight: 700;

}

.ordineClienteStato {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 8px 13px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 900;

    white-space: nowrap;

}

.ordineClienteStato.stato-ricevuto {

    background: #e9f8ee;

    color: #1f7a3a;

}

.ordineClienteStato.stato-daConfermare {

    background: #fff4d9;

    color: #9a6500;

}

.ordineClienteStato.stato-confermato {

    background: #e8f1ff;

    color: #225da8;

}

.ordineClienteStato.stato-lavorazione {

    background: #f1e8ff;

    color: #6331a3;

}

.ordineClienteStato.stato-pronto {

    background: #e6fbff;

    color: #007181;

}

.ordineClienteStato.stato-consegnato {

    background: #eeeeee;

    color: #444;

}

.ordineClienteStato.stato-annullato {

    background: #fdecec;

    color: #bf3d3d;

}

.ordineClienteCardMeta {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 12px;

    margin-bottom: 14px;

}

.ordineClienteCardMeta div {

    padding: 12px 14px;

    border-radius: 16px;

    background: #fff;

    border: 1px solid rgba(181, 128, 48, .16);

}

.ordineClienteCardMeta small {

    display: block;

    margin-bottom: 4px;

    color: #8a755b;

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .4px;

}

.ordineClienteCardMeta strong {

    display: block;

    color: var(--woodDark);

    font-size: 15px;

    font-weight: 900;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.ordineClienteAzioni {

    display: flex;

    justify-content: flex-end;

}

.btnOrdiniCliente {

    padding: 10px 16px;

    border: none;

    border-radius: 999px;

    background: var(--woodDark);

    color: #fff;

    font-size: 13px;

    font-weight: 900;

    cursor: pointer;

}

.btnOrdiniCliente:hover {

    transform: translateY(-1px);

}

.ordineClienteDettaglio {

    margin-top: 16px;

    padding-top: 16px;

    border-top: 1px solid rgba(181, 128, 48, .22);

}

.ordineClienteDettaglio h4 {

    margin: 0 0 12px;

    color: var(--woodDark);

    font-family: Poppins, sans-serif;

}

.ordineClienteRighe {

    display: grid;

    gap: 8px;

}

.ordineClienteRiga {

    display: grid;

    grid-template-columns: minmax(0, 1fr) auto;

    gap: 14px;

    align-items: center;

    padding: 12px 0;

    border-bottom: 1px solid rgba(0, 0, 0, .06);

}

.ordineClienteRiga:last-child {

    border-bottom: none;

}

.ordineClienteRiga strong {

    display: block;

    color: #222;

    font-size: 14px;

}

.ordineClienteRiga small {

    display: block;

    margin-top: 3px;

    color: #7a6042;

    font-size: 12px;

    line-height: 1.35;

}

.ordineClienteRigaTotale {

    text-align: right;

    color: var(--woodDark);

    white-space: nowrap;

}

.ordineClienteNote {

    margin-top: 16px;

    padding: 14px 16px;

    border-radius: 16px;

    background: #fff;

    border: 1px solid rgba(181, 128, 48, .18);

}

.ordineClienteNote strong {

    color: var(--woodDark);

}

.ordineClienteNote p {

    margin-top: 6px;

    color: #555;

    line-height: 1.5;

}

/*==========================================================
    PAGINA ORDINI CLIENTE - MOBILE
==========================================================*/

@media (max-width: 760px) {

    .ordiniClientePagina {

        width: calc(100% - 28px);

        margin-top: 18px;

    }

    .ordiniClienteHero {

        padding: 26px 22px;

        border-radius: 20px;

    }

    .ordiniClienteHero h2 {

        font-size: 34px;

    }

    .ordiniClienteBox {

        padding: 14px;

        border-radius: 20px;

    }

    .ordineClienteCardHeader {

        display: block;

    }

    .ordineClienteStato {

        margin-top: 12px;

    }

    .ordineClienteCardMeta {

        grid-template-columns: 1fr;

    }

    .ordineClienteAzioni {

        justify-content: stretch;

    }

    .btnOrdiniCliente {

        width: 100%;

    }

    .ordineClienteRiga {

        grid-template-columns: 1fr;

    }

    .ordineClienteRigaTotale {

        text-align: left;

    }

}

/*==========================================================
    CARRELLO - STICKY CORRETTO SOTTO HEADER + BARRA CATEGORIE
==========================================================*/

@media (min-width: 1101px) {

    #carrello {

        position: sticky !important;

        top: calc(var(--altezzaHeaderVetrina, 96px) + 62px) !important;

        align-self: start !important;

        max-height: calc(100vh - var(--altezzaHeaderVetrina, 96px) - 86px) !important;

        overflow-y: auto !important;

    }

}

/*==========================================================
    NUOVE CREAZIONI - FILTRO RAPIDO CATALOGO
==========================================================*/

.badgeNuovaCreazione {

    background: linear-gradient(135deg, #e7f5dc, #cfe9b8);

    color: #355f25;

    border: 1px solid rgba(53, 95, 37, .18);

}

.filtroRapidoCatalogo {

    margin: 0 0 22px 0;

    padding: 14px 18px;

    border-radius: 18px;

    background: #fff7e6;

    border: 1px solid rgba(184, 132, 55, .22);

    box-shadow: 0 10px 24px rgba(0,0,0,.06);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

    color: #6f4b17;

    font-size: .95rem;

}

.filtroRapidoCatalogo strong {

    color: #3b2a14;

}

.filtroRapidoCatalogo button {

    border: none;

    border-radius: 999px;

    background: #b98a42;

    color: #ffffff;

    padding: 10px 16px;

    font-weight: 700;

    cursor: pointer;

    white-space: nowrap;

}

.filtroRapidoCatalogo button:hover {

    background: #9e7336;

}

@media (max-width: 700px) {

    .filtroRapidoCatalogo {

        flex-direction: column;

        align-items: flex-start;

    }

}




















/* STEP 4Q - Descrizione vetrina nel popup prodotto */
.modalDescrizioneVetrina{
    margin:16px 0 18px;
    padding:14px 16px;
    border-left:4px solid #b8872b;
    border-radius:14px;
    background:#fff8eb;
    color:#3f3528;
    font-size:15px;
    line-height:1.5;
    box-shadow:inset 0 0 0 1px rgba(184,135,43,.08);
}

/*==========================================================
    STEP 4T - COLORI VETRINA COME SCELTA + QUANTITÀ GENERALE
==========================================================*/

#modalColori {

    display: block;

    width: 100%;

}

.coloriSelezioneGrid {

    display: flex;

    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 8px;

}

.coloreSceltaButton {

    border: 1px solid rgba(181, 128, 48, .28);

    cursor: pointer;

    font-family: inherit;

    font-size: 14px;

    font-weight: 800;

    line-height: 1.1;

    text-align: center;

    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;

}

.coloreSceltaButton:hover {

    border-color: rgba(181, 128, 48, .75);

    box-shadow: 0 8px 18px rgba(120, 82, 28, .12);

    transform: translateY(-1px);

}

.coloreSceltaButton.active {

    border-color: var(--woodGold);

    box-shadow: 0 0 0 2px rgba(181, 128, 48, .16);

}

@media (max-width: 760px) {

    .coloriSelezioneGrid {

        justify-content: flex-start;

    }

}

/*==========================================================
    v0.9.41 - RIEPILOGO COLORE SELEZIONATO
==========================================================*/

.coloriSelezioneContenitore {

    width: 100%;

}

.coloreSceltaButton.active {

    padding-right: 34px;

    background: #fffaf0;

    border-width: 2px;

    box-shadow:
        0 0 0 3px rgba(181, 128, 48, .18),
        0 8px 18px rgba(120, 82, 28, .12);

}

.coloreSceltaButton.active::after {

    content: "✓";

    position: absolute;

    right: 9px;

    top: 50%;

    width: 18px;

    height: 18px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: var(--woodGold);

    color: #ffffff;

    font-size: 12px;

    line-height: 1;

    transform: translateY(-50%);

}

.coloreSelezionatoRiepilogo {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: flex-end;

    gap: 5px;

    margin-top: 11px;

    padding: 8px 11px;

    border: 1px solid rgba(181, 128, 48, .28);

    border-radius: 11px;

    background: #fff8eb;

    color: #5b4a35;

    font-size: 13px;

    font-weight: 700;

}

.coloreSelezionatoNome {

    color: var(--woodDark);

    font-size: 14px;

    font-weight: 900;

}

.coloreSelezionatoRiepilogo.vuoto .coloreSelezionatoNome {

    color: #7a7167;

}

@media (max-width: 760px) {

    .coloreSelezionatoRiepilogo {

        justify-content: flex-start;

    }

}

/*==========================================================
    STEP 5A - ACCESSO VETRINA PRIVATA
==========================================================*/

.paginaAccessoCliente {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(184,138,75,.22), transparent 32%),
        linear-gradient(135deg, #11100e 0%, #211b16 52%, #0c0c0c 100%);
    color: #f7f1e7;
}

.privateAccessPage {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 18px;
}

.privateAccessCard {
    width: min(480px, 100%);
    padding: 34px;
    border: 1px solid rgba(215,177,106,.28);
    border-radius: 26px;
    background: rgba(18, 17, 15, .92);
    box-shadow: 0 28px 80px rgba(0,0,0,.42);
    text-align: center;
}

.privateAccessLogoBox img {
    width: 138px;
    height: auto;
    margin-bottom: 18px;
}

.privateAccessEyebrow {
    display: inline-flex;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(215,177,106,.14);
    color: #e6c681;
    border: 1px solid rgba(215,177,106,.28);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.privateAccessCard h1 {
    margin: 16px 0 10px;
    font: 800 2rem Poppins, sans-serif;
    color: #fff8ea;
}

.privateAccessCard p,
.privateAccessCard small {
    color: rgba(247,241,231,.78);
    line-height: 1.65;
}

.privateAccessField {
    display: grid;
    gap: 8px;
    margin: 24px 0 12px;
    text-align: left;
    color: #f7f1e7;
    font-weight: 700;
}

.privateAccessField input {
    width: 100%;
    padding: 15px 16px;
    border-radius: 14px;
    border: 1px solid rgba(215,177,106,.3);
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: 1rem;
    outline: none;
}

.privateAccessField input:focus {
    border-color: #d7b16a;
    box-shadow: 0 0 0 3px rgba(215,177,106,.16);
}

.privateAccessButton {
    width: 100%;
    margin: 12px 0 18px;
    padding: 15px 18px;
    border: none;
    border-radius: 15px;
    background: linear-gradient(135deg, #d7b16a, #b88a4b);
    color: #1a1209;
    font-weight: 900;
    cursor: pointer;
}

.privateAccessButton:disabled {
    opacity: .7;
    cursor: wait;
}

.privateAccessMessage {
    min-height: 22px;
    margin-top: 8px;
    font-weight: 700;
    color: #ffb4a8;
}

.privateAccessMessage.ok {
    color: #a8f0bd;
}

.checkoutEmailBox {
    margin: 14px 0;
    padding: 13px;
    border-radius: 14px;
    background: #fff8ea;
    border: 1px solid #ead9b6;
}

.checkoutEmailBox label {
    display: block;
    font-weight: 800;
    margin-bottom: 7px;
    color: #3a2b1a;
}

.checkoutEmailBox input {
    width: 100%;
    padding: 12px 13px;
    border-radius: 11px;
    border: 1px solid #e2d2b3;
    font: inherit;
}

.checkoutEmailBox small {
    display: block;
    margin-top: 7px;
    color: #775f39;
    line-height: 1.4;
}

/*==========================================================
    STEP 5B - HEADER AREA RISERVATA E AVVISO POST LOGIN
==========================================================*/

.headerSubtitle {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    margin-top: 8px !important;
    color: #6f6f6f !important;
    line-height: 1.25 !important;
}

#headerTagline {
    display: block !important;
    color: #6f6f6f !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: .01em !important;
}

.headerReservedLine {
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    color: #2b241b !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
}

.headerReservedLine strong {
    font-family: Poppins, sans-serif !important;
    color: #1f1f1f !important;
    font-weight: 800 !important;
}

.headerReservedBadge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #d5a735, #f0d47a) !important;
    color: #24190a !important;
    border: 1px solid rgba(126, 88, 20, .18) !important;
    box-shadow: 0 8px 18px rgba(181, 128, 48, .18) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

#clienteStatus {
    background: linear-gradient(135deg, #fff2d4, #f8df9a) !important;
    border: 1px solid rgba(181, 128, 48, .28) !important;
    color: #6f4a12 !important;
    box-shadow: 0 7px 18px rgba(181, 128, 48, .16) !important;
}

.clienteWelcome {
    background: linear-gradient(135deg, #fff8ea, #f5ead5) !important;
    border: 1px solid rgba(181, 128, 48, .30) !important;
}

.clienteWelcomeBadge {
    background: linear-gradient(135deg, #d5a735, #f0d47a) !important;
    color: #24190a !important;
    border: 1px solid rgba(126, 88, 20, .20) !important;
}

#clienteWelcomeTitolo {
    color: #241f19 !important;
    font-weight: 800 !important;
}

#clienteWelcomeTesto {
    color: #6b5333 !important;
    font-weight: 650 !important;
}

.reservedNoticeModal {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 26px;
    background: rgba(11, 9, 7, .68);
    backdrop-filter: blur(8px);
}

.reservedNoticeCard {
    width: min(520px, 94vw);
    padding: 34px;
    border-radius: 28px;
    background: linear-gradient(145deg, #11100e, #211b14);
    color: #fff7e8;
    border: 1px solid rgba(213, 167, 53, .38);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .44);
    text-align: center;
    animation: reservedNoticeIn .22s ease-out;
}

.reservedNoticeBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: rgba(213, 167, 53, .18);
    color: #f5d875;
    border: 1px solid rgba(213, 167, 53, .45);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.reservedNoticeCard h2 {
    margin: 0 0 12px;
    font-family: Poppins, sans-serif;
    font-size: clamp(28px, 4vw, 38px);
    line-height: 1.1;
    color: #fffaf0;
}

.reservedNoticeCard p {
    margin: 0 auto 26px;
    max-width: 430px;
    color: #e7d8be;
    font-size: 18px;
    line-height: 1.55;
}

#reservedNoticeOk {
    width: 100%;
    padding: 15px 20px;
    border: none;
    border-radius: 18px;
    background: linear-gradient(135deg, #d5a735, #bd871d);
    color: #160f07;
    font-weight: 900;
    font-size: 17px;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(213, 167, 53, .26);
}

#reservedNoticeOk:hover {
    filter: brightness(1.04);
}

@keyframes reservedNoticeIn {
    from {
        transform: translateY(10px) scale(.98);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@media (max-width: 760px) {
    .headerSubtitle {
        gap: 6px !important;
    }

    #headerTagline {
        font-size: 13px !important;
    }

    .headerReservedLine {
        font-size: 14px !important;
    }

    .headerReservedBadge {
        padding: 6px 10px !important;
        font-size: 10px !important;
    }

    .reservedNoticeCard {
        padding: 26px 22px;
        border-radius: 24px;
    }

    .reservedNoticeCard p {
        font-size: 16px;
    }
}


/*==========================================================
    STEP 5B-FIX1 - RISERVATO SOLO NEL BANNER CENTRALE
==========================================================*/

.clienteWelcomeCompatto #clienteWelcomeTitolo {
    max-width: min(760px, 55vw) !important;
}

#clienteStatus:empty {
    display: none !important;
}

.clienteWelcomeCompatto .clienteWelcomeBadge {
    text-transform: none !important;
}

@media (max-width: 900px) {
    .clienteWelcomeCompatto #clienteWelcomeTitolo {
        max-width: 100% !important;
        white-space: normal !important;
    }
}

/*==========================================================
    STEP 6B - DETTAGLI ARTIGIANALI VETRINA
    Solo testata, testo hero e badge cliente riservato
==========================================================*/

#headerTagline {
    color: #766d63 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: .01em !important;
}

.hero .heroBadge {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 0 18px !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #8a5b24 !important;
    font-family: Poppins, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
}

.hero .heroBadge::after {
    content: "";
    display: block;
    flex: 1 1 auto;
    max-width: 92px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #c9902f, rgba(201, 144, 47, .12));
}

.hero h2 {
    margin-bottom: 18px !important;
    color: #342517 !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(40px, 3.25vw, 62px) !important;
    font-weight: 700 !important;
    line-height: .94 !important;
    letter-spacing: -.025em !important;
}

.heroTitleMain,
.heroTitleScript {
    display: block;
}

.heroTitleScript {
    margin-top: 6px;
    color: #bd7b13;
    font-family: Allura, "Brush Script MT", cursive !important;
    font-size: 1.16em;
    font-weight: 400;
    line-height: .9;
    letter-spacing: .01em;
}

.heroText > p {
    max-width: 650px;
    color: #625b53 !important;
    font-size: 1rem !important;
    line-height: 1.55 !important;
}

.clienteWelcome.clienteWelcomeCompatto {
    width: min(1900px, calc(100% - 60px)) !important;
    max-width: 1900px !important;
    margin: 14px auto 18px !important;
    padding: 0 !important;
    border: 1px solid rgba(181, 128, 48, .22) !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #fffdf9, #fbf5e9) !important;
    box-shadow: 0 8px 22px rgba(88, 57, 20, .08) !important;
    overflow: hidden !important;
}

.clienteWelcome.clienteWelcomeCompatto > .clienteWelcomeInner {
    display: grid !important;
    grid-template-columns: minmax(230px, 1.05fr) 1px minmax(220px, .9fr) 1px minmax(380px, 1.55fr) !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    min-height: 88px !important;
    padding: 0 !important;
}

.clienteWelcomeSegment {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 16px 26px;
}

.clienteWelcomeIcon {
    display: inline-flex;
    flex: 0 0 54px;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    color: #fff9e7;
    background: linear-gradient(145deg, #d5a735, #b97a16);
    box-shadow: 0 9px 20px rgba(181, 128, 48, .22);
}

.clienteWelcomeIcon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.clienteWelcomeIconTag,
.clienteWelcomeIconOrdine {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    color: #c18723;
    background: transparent;
    box-shadow: none;
}

.clienteWelcomeCopy,
.clienteOrdineMiniInfo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.clienteWelcomeLabel {
    display: block;
    margin: 0 0 4px;
    color: #5f554a;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
}

.clienteWelcome.clienteWelcomeCompatto #clienteWelcomeTitolo {
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #2d251d !important;
    font-family: Poppins, sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.clienteWelcome.clienteWelcomeCompatto #clienteWelcomeTesto {
    display: block !important;
    margin: 0 !important;
    color: #2d251d !important;
    font-family: Poppins, sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
}

.clienteWelcomeDivider {
    align-self: center;
    width: 1px;
    height: 58%;
    background: rgba(151, 116, 65, .22);
}

.clienteWelcome.clienteWelcomeCompatto .clienteOrdiniBox {
    display: flex;
    align-items: stretch !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.clienteWelcome.clienteWelcomeCompatto .clienteOrdineMiniBar {
    display: grid !important;
    grid-template-columns: 46px minmax(145px, 1fr) auto !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 14px 20px 14px 24px !important;
    overflow: visible !important;
    color: #2d251d !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: normal !important;
}

.clienteOrdineMiniMeta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-top: 3px;
}

.clienteWelcome.clienteWelcomeCompatto .clienteOrdineMiniNumero {
    overflow: hidden;
    color: #2d251d !important;
    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-weight: 700 !important;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clienteWelcome.clienteWelcomeCompatto .clienteOrdineMiniData {
    display: inline !important;
    overflow: visible !important;
    color: #706455 !important;
    font-size: 12px;
    font-weight: 500;
    text-overflow: clip !important;
}

.clienteWelcome.clienteWelcomeCompatto .clienteOrdineStatoMini {
    display: inline-flex !important;
    align-items: center;
    margin: 0 !important;
    padding: 4px 9px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    line-height: 1 !important;
}

.clienteWelcome.clienteWelcomeCompatto .btnClienteOrdiniPagina {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    min-width: 210px !important;
    margin: 0 !important;
    padding: 13px 20px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(79, 48, 21, .18) !important;
    background: linear-gradient(135deg, #4b2d17, #6b4323) !important;
    color: #fffaf0 !important;
    box-shadow: 0 8px 18px rgba(76, 45, 20, .16) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

.clienteWelcome.clienteWelcomeCompatto .btnClienteOrdiniPagina:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.clienteWelcome.clienteWelcomeCompatto .btnClienteOrdiniPagina span {
    font-size: 24px;
    font-weight: 400;
    line-height: .7;
}

@media (max-width: 1250px) {
    .clienteWelcome.clienteWelcomeCompatto > .clienteWelcomeInner {
        grid-template-columns: minmax(210px, 1fr) 1px minmax(190px, .8fr) 1px minmax(330px, 1.35fr) !important;
    }

    .clienteWelcomeSegment {
        padding-inline: 18px;
    }

    .clienteWelcome.clienteWelcomeCompatto .btnClienteOrdiniPagina {
        min-width: 170px !important;
        gap: 10px !important;
        padding-inline: 15px !important;
    }
}

@media (max-width: 980px) {
    .clienteWelcome.clienteWelcomeCompatto {
        width: calc(100% - 28px) !important;
    }

    .clienteWelcome.clienteWelcomeCompatto > .clienteWelcomeInner {
        grid-template-columns: 1fr 1px 1fr !important;
        min-height: 0 !important;
    }

    .clienteWelcome.clienteWelcomeCompatto .clienteOrdiniBox {
        grid-column: 1 / -1;
        border-top: 1px solid rgba(151, 116, 65, .18) !important;
    }

    .clienteWelcome.clienteWelcomeCompatto > .clienteWelcomeInner > .clienteWelcomeDivider:last-of-type {
        display: none;
    }
}

@media (max-width: 620px) {
    #headerTagline {
        font-size: 12px !important;
    }

    .hero .heroBadge {
        gap: 10px !important;
        font-size: 10px !important;
        letter-spacing: .1em !important;
    }

    .hero h2 {
        font-size: clamp(36px, 11vw, 48px) !important;
    }

    .clienteWelcome.clienteWelcomeCompatto > .clienteWelcomeInner {
        display: flex !important;
        flex-direction: column !important;
    }

    .clienteWelcomeDivider {
        width: calc(100% - 36px);
        height: 1px;
        margin: 0 auto;
    }

    .clienteWelcomeSegment {
        padding: 14px 18px;
    }

    .clienteWelcome.clienteWelcomeCompatto .clienteOrdineMiniBar {
        grid-template-columns: 42px minmax(0, 1fr) !important;
        padding: 14px 18px !important;
    }

    .clienteWelcome.clienteWelcomeCompatto .btnClienteOrdiniPagina {
        grid-column: 1 / -1;
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* =========================================================
   STEP 6D-FIX1 - Più spazio all'ultimo ordine nel badge cliente
   ========================================================= */

@media (min-width: 981px) {
    .clienteWelcome.clienteWelcomeCompatto > .clienteWelcomeInner {
        grid-template-columns:
            minmax(260px, 1.05fr)
            1px
            minmax(590px, 1.8fr)
            1px
            minmax(250px, .8fr) !important;
        grid-template-areas: "accesso separatoreUno ordini separatoreDue sconto" !important;
    }

    .clienteWelcome.clienteWelcomeCompatto .clienteWelcomeAccesso {
        grid-area: accesso;
    }

    .clienteWelcome.clienteWelcomeCompatto .clienteOrdiniBox {
        grid-area: ordini;
    }

    .clienteWelcome.clienteWelcomeCompatto .clienteWelcomeSconto {
        grid-area: sconto;
    }

    .clienteWelcome.clienteWelcomeCompatto > .clienteWelcomeInner > .clienteWelcomeDivider:first-of-type {
        grid-area: separatoreUno;
    }

    .clienteWelcome.clienteWelcomeCompatto > .clienteWelcomeInner > .clienteWelcomeDivider:last-of-type {
        grid-area: separatoreDue;
    }

    .clienteWelcome.clienteWelcomeCompatto .clienteOrdineMiniBar {
        grid-template-columns: 46px minmax(250px, 1fr) minmax(190px, 220px) !important;
        gap: 18px !important;
    }

    .clienteWelcome.clienteWelcomeCompatto .clienteOrdineMiniInfo {
        min-width: 250px !important;
    }

    .clienteWelcome.clienteWelcomeCompatto .clienteOrdineMiniNumero {
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
}

@media (min-width: 981px) and (max-width: 1350px) {
    .clienteWelcome.clienteWelcomeCompatto > .clienteWelcomeInner {
        grid-template-columns:
            minmax(210px, .95fr)
            1px
            minmax(470px, 1.7fr)
            1px
            minmax(220px, .75fr) !important;
    }

    .clienteWelcome.clienteWelcomeCompatto .clienteOrdineMiniBar {
        grid-template-columns: 42px minmax(210px, 1fr) minmax(165px, 185px) !important;
        gap: 12px !important;
        padding-inline: 16px !important;
    }

    .clienteWelcome.clienteWelcomeCompatto .clienteOrdineMiniInfo {
        min-width: 210px !important;
    }

    .clienteWelcome.clienteWelcomeCompatto .btnClienteOrdiniPagina {
        min-width: 165px !important;
        padding-inline: 14px !important;
    }
}

/* =========================================================
   STEP 7C - CORREZIONI MOBILE VETRINA
   Testata compatta, categorie senza scroll orizzontale,
   pagina ordini e scheda prodotto completamente scorrevole.
   ========================================================= */

.categorieMobileControl,
.btnOrdiniClienteMobile {
    display: none;
}

@media (max-width: 760px) {

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

    body.productModalOpen {
        overflow: hidden !important;
    }

    /* Testata vetrina più compatta su smartphone */
    .header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
    }

    .logoBox {
        min-width: 0 !important;
        gap: 10px !important;
    }

    #logo {
        width: 82px !important;
        flex: 0 0 82px !important;
    }

    .logoBox > div {
        min-width: 0 !important;
    }

    .logoBox h1 {
        margin: 0 !important;
        font-size: clamp(24px, 7.2vw, 31px) !important;
        line-height: 1.02 !important;
    }

    .logoBox p,
    .headerSubtitle,
    #headerTagline {
        margin-top: 4px !important;
        font-size: 11px !important;
        line-height: 1.28 !important;
    }

    .headerRight,
    .clienteBox {
        min-width: 0 !important;
        gap: 6px !important;
    }

    #clienteStatus {
        display: none !important;
    }

    #clienteLoginButton,
    #clienteLogoutButton,
    #adminButton {
        min-width: 0 !important;
        padding: 10px 12px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    #adminButton {
        width: 42px !important;
        height: 42px !important;
        padding: 0 !important;
        overflow: hidden !important;
        font-size: 0 !important;
    }

    #adminButton::before {
        content: "⚙";
        font-size: 18px;
    }

    /* Categorie: selettore nativo mobile, niente barra da trascinare */
    .barraCategorieInner {
        width: 100% !important;
        padding: 8px 14px !important;
    }

    .barraCategorieLista {
        display: none !important;
    }

    .categorieMobileControl {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 10px;
    }

    .categorieMobileControl label {
        color: #f7e7c7;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .categorieMobileControl select {
        width: 100%;
        min-width: 0;
        height: 42px;
        padding: 0 38px 0 14px;
        border: 1px solid rgba(215, 177, 106, .45);
        border-radius: 12px;
        background: #fff8ec;
        color: #2d2116;
        font-family: Inter, sans-serif;
        font-size: 14px;
        font-weight: 700;
        outline: none;
    }

    .categorieMobileControl select:focus {
        border-color: #d7b16a;
        box-shadow: 0 0 0 3px rgba(215, 177, 106, .18);
    }

    .tassonomieMenuFiltro {
        display: none !important;
    }

    /* Pagina ordini cliente: pulsante compatto e leggibile */
    .headerOrdiniCliente {
        grid-template-columns: minmax(0, 1fr) auto !important;
        position: sticky !important;
    }

    .headerOrdiniCliente .logoBox h1 {
        font-size: clamp(22px, 6.6vw, 29px) !important;
    }

    .headerOrdiniCliente .headerRight {
        justify-content: flex-end !important;
    }

    .headerOrdiniCliente .btnOrdiniClienteHeader {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        width: auto !important;
        max-width: 112px !important;
        min-height: 42px !important;
        padding: 9px 12px !important;
        border-radius: 12px !important;
        font-size: 12px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    .btnOrdiniClienteDesktop {
        display: none !important;
    }

    .btnOrdiniClienteMobile {
        display: inline !important;
    }

    /* Scheda prodotto: pagina intera, colonna singola e scroll interno */
    .modal {
        inset: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: rgba(0, 0, 0, .72) !important;
    }

    .modalContent {
        width: 100vw !important;
        max-width: none !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
    }

    #closeModal {
        position: fixed !important;
        top: max(10px, env(safe-area-inset-top)) !important;
        right: 12px !important;
        z-index: 10020 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        height: 42px !important;
        border: 1px solid rgba(0, 0, 0, .12) !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, .96) !important;
        color: #2d2116 !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .2) !important;
        font-size: 30px !important;
        line-height: 1 !important;
    }

    .modalGrid {
        display: block !important;
        min-height: 100% !important;
    }

    .modalImage {
        display: block !important;
        width: 100% !important;
        padding: calc(58px + env(safe-area-inset-top)) 14px 12px !important;
        background: #f7f7f7 !important;
    }

    .modalMedia {
        width: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        background: #fff !important;
    }

    .modalImage img {
        display: block;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        object-fit: contain !important;
    }

    #modalVideo,
    #modalLocalVideo {
        width: 100% !important;
        height: auto !important;
        max-height: 55dvh !important;
    }

    .modalGallery {
        gap: 8px !important;
        padding: 10px 0 2px !important;
        scroll-snap-type: x proximity;
    }

    .modalMediaNav {
        width: 42px !important;
        height: 42px !important;
        font-size: 34px !important;
    }

    .modalMediaNavPrev {
        left: 8px !important;
    }

    .modalMediaNavNext {
        right: 8px !important;
    }

    .modalThumb {
        width: 62px !important;
        height: 62px !important;
        flex-basis: 62px !important;
        scroll-snap-align: start;
    }

    .modalInfo {
        width: 100% !important;
        min-width: 0 !important;
        padding: 24px 18px calc(36px + env(safe-area-inset-bottom)) !important;
        overflow: visible !important;
    }

    .modalInfo h2 {
        margin: 0 50px 8px 0 !important;
        font-size: clamp(28px, 9vw, 38px) !important;
        line-height: 1.08 !important;
        overflow-wrap: anywhere !important;
    }

    .codicePopup {
        margin-bottom: 10px !important;
    }

    .popupTags,
    .modalSezione {
        max-width: 100% !important;
    }

    .schedaProdotto {
        margin: 18px 0 0 !important;
    }

    .schedaProdotto .riga {
        gap: 16px !important;
        align-items: flex-start !important;
    }

    .schedaProdotto .riga > span {
        flex: 1 1 44% !important;
        min-width: 0 !important;
    }

    .schedaProdotto .riga > strong {
        flex: 1 1 56% !important;
        min-width: 0 !important;
        text-align: right !important;
        overflow-wrap: anywhere !important;
    }

    .coloriSelezioneGrid,
    .coloriVetrinaGrid {
        justify-content: flex-start !important;
    }

    .personalizzazione,
    .quantitaOrdineBox,
    .btnAggiungiCarrello {
        width: 100% !important;
    }

    .btnAggiungiCarrello {
        min-height: 52px !important;
        margin-top: 16px !important;
        font-size: 16px !important;
    }
}

@media (max-width: 390px) {
    #logo {
        width: 72px !important;
        flex-basis: 72px !important;
    }

    .logoBox h1 {
        font-size: 23px !important;
    }

    .logoBox p,
    .headerSubtitle,
    #headerTagline {
        font-size: 10px !important;
    }

    #clienteLoginButton,
    #clienteLogoutButton {
        padding-inline: 10px !important;
    }
}


/* =========================================================
   STEP 7C-FIX1 - CARRELLO MOBILE RAGGIUNGIBILE E LEGGIBILE
   ========================================================= */

.mobileCartButton {
    display: none;
}

@keyframes carrelloMobileEvidenza {
    0%, 100% {
        box-shadow: var(--shadow);
    }
    35% {
        box-shadow:
            0 0 0 4px rgba(190, 143, 62, .2),
            0 22px 48px rgba(68, 42, 18, .18);
    }
}

@media (max-width: 760px) {

    .layout {
        padding-bottom: 86px !important;
    }

    #carrello {
        scroll-margin-top: 88px;
        padding: 22px 18px !important;
    }

    #carrello.carrelloMobileFocus {
        animation: carrelloMobileEvidenza 1.45s ease both;
    }

    #carrello h3 {
        margin-bottom: 14px !important;
        font-size: clamp(24px, 7.2vw, 30px) !important;
        line-height: 1.1 !important;
    }

    #carrelloProdotti {
        gap: 0 !important;
        min-height: 88px !important;
    }

    .rigaCarrello {
        grid-template-columns: 62px minmax(0, 1fr) 52px !important;
        gap: 10px !important;
        align-items: start !important;
        padding: 14px 0 !important;
    }

    .rigaCarrelloMiniatura {
        width: 58px !important;
        height: 58px !important;
        border-radius: 13px !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .rigaCarrelloTesto {
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        gap: 3px !important;
        padding-top: 1px !important;
    }

    .rigaCarrelloTesto strong {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
        font-size: 15px !important;
        line-height: 1.22 !important;
    }

    .rigaCarrelloTesto small {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        font-size: 12.5px !important;
        line-height: 1.28 !important;
    }

    .rigaCarrelloCodice {
        color: #777 !important;
    }

    .rigaCarrelloQuantita {
        color: #555 !important;
    }

    .rigaCarrelloAzioni {
        grid-column: 3 !important;
        grid-row: 1 !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
        align-self: stretch !important;
        min-width: 48px !important;
        margin: 0 !important;
        gap: 8px !important;
        text-align: right !important;
    }

    .rigaCarrelloAzioni strong {
        font-size: 14px !important;
        line-height: 1.15 !important;
    }

    .btnRimuoviCarrello {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        font-size: 18px !important;
    }

    .totale {
        align-items: center !important;
        margin: 20px 0 16px !important;
        font-size: 18px !important;
    }

    .totale strong {
        font-size: 21px !important;
    }

    #btnInvia {
        min-height: 54px !important;
        border-radius: 15px !important;
        font-size: 17px !important;
    }

    .mobileCartButton {
        position: fixed;
        right: 14px;
        bottom: max(14px, env(safe-area-inset-bottom));
        z-index: 9985;
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr) 28px;
        align-items: center;
        gap: 9px;
        width: min(260px, calc(100vw - 28px));
        min-height: 58px;
        padding: 9px 10px 9px 14px;
        border: 1px solid rgba(255, 255, 255, .18);
        border-radius: 18px;
        background: linear-gradient(135deg, #6f431f, #9f7134);
        color: #fff;
        box-shadow: 0 16px 34px rgba(35, 20, 9, .32);
        cursor: pointer;
        text-align: left;
        transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
    }

    .mobileCartButton:active {
        transform: scale(.98);
    }

    .mobileCartButton.is-hidden {
        opacity: 0;
        pointer-events: none;
        transform: translateY(18px);
    }

    .mobileCartButton.has-items {
        box-shadow:
            0 0 0 3px rgba(214, 171, 91, .16),
            0 16px 36px rgba(35, 20, 9, .38);
    }

    .mobileCartButtonIcon {
        font-size: 23px;
        line-height: 1;
    }

    .mobileCartButtonCopy {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .mobileCartButtonCopy strong {
        color: #fff !important;
        font-size: 14px !important;
        line-height: 1.1 !important;
    }

    .mobileCartButtonCopy small {
        max-width: 100%;
        color: rgba(255, 255, 255, .82);
        font-size: 11px;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobileCartButtonCount {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #fff5dc;
        color: #5a371b;
        font-size: 13px;
        font-weight: 900;
    }

    body.productModalOpen .mobileCartButton {
        display: none !important;
    }
}

@media (max-width: 370px) {

    .rigaCarrello {
        grid-template-columns: 56px minmax(0, 1fr) 46px !important;
        gap: 8px !important;
    }

    .rigaCarrelloMiniatura {
        width: 52px !important;
        height: 52px !important;
    }

    .rigaCarrelloTesto strong {
        font-size: 14px !important;
    }

    .rigaCarrelloTesto small {
        font-size: 11.5px !important;
    }

    .rigaCarrelloAzioni strong {
        font-size: 13px !important;
    }
}


/* =========================================================
   STEP 7C-FIX2 - BLOCCO SCROLL SFONDO SCHEDA PRODOTTO
   La pagina sottostante resta ferma su smartphone e tablet.
   Scorre esclusivamente il contenuto della scheda prodotto.
   ========================================================= */

html.productModalOpen,
body.productModalOpen {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

.modal {
    overscroll-behavior: none !important;
}

.modalContent {
    overscroll-behavior: contain !important;
}


/* =========================================================
   STEP 7C-FIX3 - SCHEDA PRODOTTO TABLET ORIZZONTALE
   Mantiene visibili titolo e dati iniziali anche con altezza ridotta.
   ========================================================= */

@media (min-width: 761px) and (max-width: 1180px) and (orientation: landscape) {

    .modal {
        align-items: center !important;
        justify-content: center !important;
        padding: 12px !important;
        overflow: hidden !important;
    }

    .modalContent {
        width: min(1100px, calc(100vw - 24px)) !important;
        max-width: none !important;
        height: auto !important;
        max-height: calc(100vh - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
        overflow: hidden !important;
    }

    .modalGrid {
        display: grid !important;
        grid-template-columns: minmax(0, 44%) minmax(0, 56%) !important;
        min-height: 0 !important;
        max-height: calc(100vh - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
    }

    .modalImage,
    .modalInfo {
        min-width: 0 !important;
        min-height: 0 !important;
        max-height: calc(100vh - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .modalImage {
        justify-content: flex-start !important;
        padding: 18px !important;
    }

    .modalMedia {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-height: calc(100vh - 132px) !important;
        max-height: calc(100dvh - 132px) !important;
    }

    .modalImage img {
        max-height: calc(100vh - 150px) !important;
        max-height: calc(100dvh - 150px) !important;
    }

    .modalInfo {
        padding: 54px 28px 28px !important;
    }

    .modalInfo h2 {
        margin: 0 48px 10px 0 !important;
        font-size: clamp(28px, 4vw, 38px) !important;
        line-height: 1.08 !important;
        overflow-wrap: anywhere !important;
    }

    #closeModal {
        z-index: 10030 !important;
    }
}

/* =========================================================
   STEP 7C-FIX4 - HEADER SCHEDA PRODOTTO TABLET SEMPRE VISIBILE
   Su tablet orizzontale il popup occupa il viewport reale,
   la foto resta nella colonna sinistra e titolo/codice restano
   fissi in alto mentre scorrono soltanto i dettagli a destra.
   ========================================================= */

.modalProductHeader {
    min-width: 0;
}

@media (min-width: 761px) and (max-width: 1180px) and (orientation: landscape) {

    .modal {
        inset: 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        overflow: hidden !important;
    }

    .modalContent {
        position: absolute !important;
        top: max(6px, env(safe-area-inset-top)) !important;
        right: max(6px, env(safe-area-inset-right)) !important;
        bottom: max(6px, env(safe-area-inset-bottom)) !important;
        left: max(6px, env(safe-area-inset-left)) !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    .modalGrid {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        grid-template-columns: minmax(0, 45%) minmax(0, 55%) !important;
    }

    .modalImage {
        display: grid !important;
        grid-template-rows: minmax(0, 1fr) auto !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: 100% !important;
        max-height: none !important;
        padding: 14px !important;
        overflow: hidden !important;
    }

    .modalMedia {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        overflow: hidden !important;
    }

    .modalImage img {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        object-fit: contain !important;
    }

    #modalVideo,
    #modalLocalVideo {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        object-fit: contain !important;
    }

    .modalGallery {
        flex: 0 0 auto !important;
        min-height: 72px !important;
        padding: 10px 0 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    .modalInfo {
        min-width: 0 !important;
        min-height: 0 !important;
        height: 100% !important;
        max-height: none !important;
        padding: 0 28px 28px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scroll-padding-top: 104px !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .modalProductHeader {
        position: sticky !important;
        top: 0 !important;
        z-index: 10022 !important;
        margin: 0 -28px 10px !important;
        padding: 16px 62px 12px 28px !important;
        background: rgba(255, 255, 255, .98) !important;
        border-bottom: 1px solid #ece7df !important;
        box-shadow: 0 7px 18px rgba(58, 38, 19, .08) !important;
        backdrop-filter: blur(8px) !important;
    }

    .modalProductHeader h2,
    .modalInfo h2 {
        margin: 0 !important;
        font-size: clamp(24px, 3.2vw, 34px) !important;
        line-height: 1.08 !important;
        overflow-wrap: anywhere !important;
    }

    .modalProductHeader .codicePopup {
        margin: 6px 0 0 !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
    }

    #closeModal {
        position: absolute !important;
        top: 10px !important;
        right: 14px !important;
        z-index: 10030 !important;
        width: 40px !important;
        height: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, .97) !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .18) !important;
        line-height: 1 !important;
    }
}

/* =========================================================
   STEP 7C-FIX5 - TABLET: POPUP ANCORATO AL VIEWPORT REALE
   La modalità tablet viene applicata da JavaScript in base a
   visualViewport + touch, senza dipendere dalla larghezza CSS
   dichiarata dal dispositivo. Evita il popup centrato e tagliato.
   ========================================================= */

.modal.modalTabletLandscape {
    position: fixed !important;
    inset: 0 !important;
    width: var(--wm-modal-viewport-width, 100vw) !important;
    height: var(--wm-modal-viewport-height, 100dvh) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 8px !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.modal.modalTabletLandscape .modalContent {
    position: relative !important;
    inset: auto !important;
    width: min(1180px, 100%) !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    animation: none !important;
    transform: none !important;
}

.modal.modalTabletLandscape .modalGrid {
    display: grid !important;
    grid-template-columns: minmax(0, 43%) minmax(0, 57%) !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

.modal.modalTabletLandscape .modalImage {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    padding: 14px !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
}

.modal.modalTabletLandscape .modalMedia {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
}

.modal.modalTabletLandscape .modalImage img,
.modal.modalTabletLandscape #modalVideo,
.modal.modalTabletLandscape #modalLocalVideo {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
}

.modal.modalTabletLandscape .modalGallery {
    flex: 0 0 auto !important;
    min-height: 66px !important;
    max-height: 82px !important;
    padding: 10px 0 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
}

.modal.modalTabletLandscape .modalThumb {
    width: 58px !important;
    height: 58px !important;
    flex-basis: 58px !important;
}

.modal.modalTabletLandscape .modalInfo {
    display: block !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    padding: 0 24px 26px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-gutter: stable !important;
    scroll-padding-top: 96px !important;
}

.modal.modalTabletLandscape .modalProductHeader {
    position: sticky !important;
    top: 0 !important;
    z-index: 10022 !important;
    min-height: 78px !important;
    margin: 0 -24px 10px !important;
    padding: 14px 62px 11px 24px !important;
    background: rgba(255, 255, 255, .99) !important;
    border-bottom: 1px solid #ece7df !important;
    box-shadow: 0 6px 16px rgba(58, 38, 19, .08) !important;
    backdrop-filter: blur(8px) !important;
}

.modal.modalTabletLandscape .modalProductHeader h2,
.modal.modalTabletLandscape .modalInfo h2 {
    margin: 0 !important;
    font-size: clamp(22px, 2.6vw, 32px) !important;
    line-height: 1.06 !important;
    overflow-wrap: anywhere !important;
}

.modal.modalTabletLandscape .modalProductHeader .codicePopup {
    margin: 5px 0 0 !important;
    font-size: 12.5px !important;
    line-height: 1.15 !important;
}

.modal.modalTabletLandscape #closeModal {
    position: absolute !important;
    top: 12px !important;
    right: 14px !important;
    z-index: 10030 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border: 1px solid rgba(0, 0, 0, .1) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .98) !important;
    color: #2d2116 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16) !important;
    font-size: 29px !important;
    line-height: 1 !important;
}

.modal.modalTabletLandscape .schedaProdotto {
    margin-top: 14px !important;
}

.modal.modalTabletLandscape .btnAggiungiCarrello {
    margin-bottom: 4px !important;
}


/* ==========================================================
   STEP 7M-A - logo retro e note cliente
========================================================== */
.logoRetroBox {
    margin-top: 12px;
    padding: 0;
    border: 0;
    background: transparent;
}

.logoRetroBoxNonDisponibile {
    padding: 15px 18px;
    border-left: 4px solid #9b948a;
    border-radius: 12px;
    background: #f5f2ed;
}

.logoRetroBoxNonDisponibile strong,
.logoRetroBoxNonDisponibile small {
    display: block;
}

.logoRetroScelta {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 17px 18px;
    border: 1px solid rgba(182, 130, 42, .32);
    border-left: 4px solid #bd8b3e;
    border-radius: 14px;
    background: #faf6ef;
    cursor: pointer;
}

.logoRetroScelta input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: #ae7b2d;
}

.logoRetroScelta span,
.logoRetroScelta strong,
.logoRetroScelta small {
    display: block;
}

.logoRetroScelta strong {
    color: #2a2825;
    font-size: 16px;
}

.logoRetroScelta small {
    margin-top: 4px;
    color: #8a6126;
    font-weight: 800;
}

.logoRetroDettagli {
    margin-top: 10px;
    padding: 16px 18px;
    border: 1px solid rgba(182, 130, 42, .25);
    border-radius: 14px;
    background: #fffdfa;
}

.logoRetroDettagli[hidden] {
    display: none !important;
}

.logoRetroDettagli label {
    display: block;
    margin: 10px 0 7px;
    color: #3c342a;
    font-weight: 800;
}

.logoRetroDettagli input[type="file"],
.logoRetroDettagli textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #ddd1c1;
    border-radius: 10px;
    background: #fff;
}

.logoRetroDettagli > small {
    display: block;
    margin-top: 6px;
    color: #796c5d;
}

.logoRetroPreview {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 10px;
    border-radius: 10px;
    background: #f5efe5;
}

.logoRetroPreview[hidden] {
    display: none !important;
}

.logoRetroPreview img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
}

.logoRetroPreview span {
    overflow-wrap: anywhere;
    font-weight: 800;
}

.logoRetroPreview small {
    color: #756957;
}

.logoRetroFileIcon {
    font-size: 28px;
}

.noteClienteOrdineBox {
    margin: 16px 0;
    padding: 16px;
    border: 1px solid rgba(182, 130, 42, .28);
    border-radius: 14px;
    background: #fbf7ef;
}

.noteClienteOrdineBox label,
.noteClienteOrdineBox small {
    display: block;
}

.noteClienteOrdineBox label {
    margin-bottom: 8px;
    font-weight: 900;
}

.noteClienteOrdineBox textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd1c1;
    border-radius: 10px;
    resize: vertical;
    background: #fff;
}

.noteClienteOrdineBox small {
    margin-top: 6px;
    color: #766a5a;
}

.rigaCarrelloLogoRetro {
    display: block;
    margin-top: 4px;
    color: #8a6126;
    font-weight: 700;
}


/* STEP 7M-A - storico ordini cliente completo */
.ordineClienteRigaCompleta {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
}

.ordineClienteRigaImmagine {
    width: 86px;
    height: 86px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(182, 130, 42, .25);
    border-radius: 12px;
    background: #fff;
    color: #8a8177;
    font-size: 11px;
    text-align: center;
}

.ordineClienteRigaImmagine img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ordineClienteRigaContenuto small {
    display: block;
    margin-top: 3px;
}

@media (max-width: 640px) {
    .ordineClienteRigaCompleta {
        grid-template-columns: 70px minmax(0, 1fr);
    }

    .ordineClienteRigaImmagine {
        width: 70px;
        height: 70px;
    }

    .ordineClienteRigaTotale {
        grid-column: 1 / -1;
        text-align: right;
    }
}

.ordineClienteLogoDownload {
    display: inline-flex;
    margin-top: 6px;
    color: #9b6b25;
    font-size: 12px;
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ==========================================================
   STEP 7M-A FIX1 - POPUP PRODOTTO DESKTOP SCORREVOLE
   I nuovi campi logo aumentano l'altezza della scheda.
   Su desktop il popup resta dentro il viewport e scorre
   soltanto la colonna dei dettagli fino al carrello.
========================================================== */
@media (min-width: 1181px) {
    .modal {
        align-items: center !important;
        justify-content: center !important;
        padding: 20px !important;
        overflow: hidden !important;
    }

    .modalContent {
        width: min(1180px, calc(100vw - 40px)) !important;
        max-width: none !important;
        height: min(920px, calc(100vh - 40px)) !important;
        height: min(920px, calc(100dvh - 40px)) !important;
        max-height: calc(100vh - 40px) !important;
        max-height: calc(100dvh - 40px) !important;
        overflow: hidden !important;
    }

    .modalGrid {
        grid-template-columns: minmax(0, 46%) minmax(0, 54%) !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .modalImage {
        display: grid !important;
        grid-template-rows: minmax(0, 1fr) auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: 100% !important;
        padding: 18px !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        overflow: hidden !important;
    }

    .modalMedia {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        overflow: hidden !important;
    }

    .modalImage img,
    #modalVideo,
    #modalLocalVideo {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        object-fit: contain !important;
    }

    .modalGallery {
        flex: 0 0 auto !important;
        min-height: 78px !important;
        max-height: 92px !important;
        padding: 12px 0 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    .modalInfo {
        display: block !important;
        min-width: 0 !important;
        min-height: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        padding: 0 32px 40px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-gutter: stable !important;
        scroll-padding-top: 108px !important;
    }

    .modalProductHeader {
        position: sticky !important;
        top: 0 !important;
        z-index: 10022 !important;
        margin: 0 -32px 12px !important;
        padding: 24px 66px 16px 32px !important;
        background: rgba(255, 255, 255, .99) !important;
        border-bottom: 1px solid #ece7df !important;
        box-shadow: 0 6px 16px rgba(58, 38, 19, .07) !important;
        backdrop-filter: blur(8px) !important;
    }

    .modalProductHeader h2,
    .modalInfo h2 {
        margin: 0 !important;
        font-size: clamp(30px, 3vw, 42px) !important;
        line-height: 1.08 !important;
        overflow-wrap: anywhere !important;
    }

    .modalProductHeader .codicePopup {
        margin: 7px 0 0 !important;
    }

    #closeModal {
        position: absolute !important;
        top: 18px !important;
        right: 22px !important;
        z-index: 10030 !important;
    }

    .btnAggiungiCarrello {
        margin-bottom: 8px !important;
    }
}

/* ==========================================================
   STEP 7M-A FIX2 - POPUP DESKTOP ADATTIVO
   Il popup usa l'altezza realmente necessaria e sfrutta quasi
   tutto il viewport. La barra verticale compare solo quando il
   contenuto supera davvero lo spazio disponibile.
========================================================== */
@media (min-width: 1181px) {
    .modal {
        padding: 8px !important;
    }

    .modalContent {
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100vh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
    }

    .modalGrid {
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100vh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        align-items: stretch !important;
    }

    .modalImage {
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100vh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
    }

    .modalMedia {
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100vh - 122px) !important;
        max-height: calc(100dvh - 122px) !important;
        aspect-ratio: 1 / 1 !important;
    }

    .modalImage img,
    #modalVideo,
    #modalLocalVideo {
        height: auto !important;
        max-height: calc(100vh - 142px) !important;
        max-height: calc(100dvh - 142px) !important;
    }

    .modalInfo {
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100vh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        scrollbar-gutter: auto !important;
    }
}

/* ==========================================================
   AREA LEGALE PUBBLICA - v0.9.44
========================================================== */

.footerLegalLinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
    margin-top: 20px;
    font-size: 13px;
}

.footerLegalLinks a {
    color: inherit;
    text-decoration: none;
    opacity: 0.86;
}

.footerLegalLinks a:hover,
.footerLegalLinks a:focus-visible {
    opacity: 1;
    text-decoration: underline;
}

.privateAccessLegalFooter {
    padding: 18px 16px 24px;
    color: rgba(255, 255, 255, 0.78);
    text-align: center;
}

.privateAccessLegalFooter .footerLegalLinks {
    margin-top: 0;
}

.legalCheckoutBox {
    display: grid;
    gap: 11px;
    margin: 14px 0;
    padding: 14px;
    border: 1px solid rgba(184, 137, 53, 0.36);
    border-radius: 12px;
    background: rgba(255, 249, 236, 0.92);
    color: #332a24;
}

.legalCheckoutBox[hidden],
.legalCheckoutRow[hidden] {
    display: none !important;
}

.legalCheckoutTitle {
    font-weight: 800;
    font-size: 14px;
}

.legalCheckoutRow {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 12.5px;
    line-height: 1.45;
    cursor: pointer;
}

.legalCheckoutRow input {
    flex: 0 0 auto;
    margin-top: 3px;
}

.legalCheckoutRow a,
.legalCheckoutNote a {
    color: #76551f;
    font-weight: 700;
}

.legalCheckoutNote {
    color: #6f645d;
    line-height: 1.45;
}