/* ======================================================
   mobile.css (include AFTER desktop.css)
   Obiettivo: niente “tagli”, niente overflow, layout pulito
====================================================== */

/* ---------- BASE: anti taglio / anti overflow ---------- */
html, body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

*, *::before, *::after{
  box-sizing: border-box;
}

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

table{
  width: 100%;
  max-width: 100%;
}

.page-wrapper{
  min-height: 100dvh;
}

/* evita il classico bug da 100vw su mobile */
@media (max-width: 980px){
  .page-wrapper,
  .navbar,
  .site-footer,
  .banner-wrapper{
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ---------- BREAKPOINT: TABLET/MOBILE ---------- */
@media (max-width: 980px){

  :root{
    --nav-h: 58px;
  }

  /* ---------------- NAVBAR ---------------- */
  .navbar{
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  z-index: 10000;

  height: var(--nav-h);
  min-height: var(--nav-h);

  padding: 0 .9rem;
  gap: .75rem;

  overflow: visible;

  transform: translateZ(0);
}

.page-wrapper{
  padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
}

  /* logo fisso a sinistra, tutto il resto a destra */
.navbar{
  justify-content: flex-start;
}

.nav-brand{
  margin-right: auto;
}

/* il gruppo icone (hamburger + carrello + omino) tutto a destra */
.nav-actions{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}

  /* logo: non deve sforare */
  .navbar .logo,
  .navbar .brand,
  .navbar .navbar-logo{
    max-width: 170px;
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
  }

  .navbar .logo img,
  .navbar .brand img,
  .navbar .navbar-logo img{
    max-height: 30px;
    width: auto;
    display: block;
  }

  /* hamburger: visibile solo mobile (desktop.css lo nasconde) */
  .nav-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    color: #fff;
    cursor: pointer;
    flex: 0 0 auto;
  }

  .nav-toggle:hover{
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.24);
  }

  /* azioni a destra: niente overflow */
  .nav-actions{
    gap: .5rem;
    flex: 0 0 auto;
  }
  .cart-btn, .user-btn{
    width: 34px;
    height: 34px;
  }

  /* drawer menu: scrollabile e non tagliato */
  .nav-links{
    position: fixed;
    left: 12px;
    right: 12px;
    top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 12px);
    max-height: calc(100dvh - var(--nav-h) - 24px);

    display: none;
    flex-direction: column;
    gap: 8px;

    padding: 12px;
    margin: 0;

    background: rgba(15,15,18,.98);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;

    overflow: auto;
    -webkit-overflow-scrolling: touch;

    z-index: 9999;
  }

  /* apertura menu */
  body.nav-open .nav-links{
    display: flex;
  }

  .nav-links a{
    width: 100%;
    padding: 12px 12px;
    border-radius: 12px;
    text-decoration: none;

    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
  }

  /* dropdown su mobile: niente hover volante */
  .dropdown-menu{
    position: static !important;
    inset: auto !important;
    transform: none !important;

    width: 100% !important;
    margin: 6px 0 0;
    border-radius: 12px;
    padding: 8px;

    display: none;

    background: rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.10);
  }

  .dropdown.open > .dropdown-menu{
    display: block;
  }

  /* backdrop */
  .nav-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 9998;
    display: none;
  }
  body.nav-open .nav-backdrop{
    display: block;
  }

  /* ---------------- BANNER ---------------- */
  .banner-wrapper{
    margin: 0;
    padding: 0;
    line-height: 0;
  }
  .banner-wrapper img{
    display: block;
    width: 100%;
    height: auto;
  }

  /* ---------------- HERO ---------------- */
  .hero{
    height: auto !important;
    min-height: 320px;
    padding: 24px 0;
  }
  .hero-container{
    padding: 0 1rem;
    gap: 1.25rem;
  }

  /* hero home: usa dvh (niente 100vh che taglia) */
  .hero.hero-home{
    min-height: 100dvh;
    height: auto !important;
  }

  /* ---------------- LAYOUT PAGINE ---------------- */
  .galleria-container,
  .carrello-container,
  .checkout-wrapper,
  .lavora-container,
  .contatti-container,
  .admin-form-wrapper{
    width: 100%;
    max-width: 100%;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* contatti: 2 colonne -> 1 */
  .contatti-container{
    grid-template-columns: 1fr !important;
  }

  /* lavora: sezioni -> 1 colonna */
  .lavora-section,
  .lavora-section.reverse{
    grid-template-columns: 1fr !important;
  }
  .lavora-section.reverse .lavora-img-wrapper,
  .lavora-section.reverse .lavora-text{
    order: 0 !important;
  }

  /* tabelle: scroll orizzontale */
  .carrello-tabella,
  .checkout-preview table{
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .carrello-tabella thead th,
  .carrello-tabella tbody td,
  .checkout-preview thead th,
  .checkout-preview tbody td{
    white-space: nowrap;
  }

  /* ---------------- FOOTER ---------------- */
  .site-footer{
    padding: 1.5rem 1rem;
  }
  .footer-container{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    text-align: center;
  }
  .footer-brand{
    justify-self: center;
  }
  .footer-nav{
    justify-content: center;
    justify-self: center;
    gap: .9rem;
  }

  /* ---------------- TOAST ---------------- */
  .toast-container{
    right: 12px;
    left: 12px;
    bottom: 14px;
    width: auto;
    max-width: none;
  }
  .toast{
    width: 100%;
  }
}

/* ---------- EXTRA SMALL ---------- */
@media (max-width: 560px){
  :root{ --nav-h: 56px; }

  .hero{ min-height: 280px; }

  .admin-form-wrapper{
    padding: 1.5rem 1rem 2.25rem !important;
    border-radius: 14px;
  }

  .pm-box{
    width: 100%;
    border-radius: 14px;
  }
}

/* ======================================================
   MOBILE CONTENT OVERRIDES (append to mobile.css)
====================================================== */

@media (max-width: 980px){

  /* ---------- tipografia e spaziatura base ---------- */
  h1{ font-size: 1.45rem; line-height: 1.15; }
  h2{ font-size: 1.25rem; line-height: 1.2; }
  h3{ font-size: 1.1rem;  line-height: 1.25; }

  p, li, input, textarea, select, button{
    font-size: 1rem;
  }

  /* cards/sezioni: meno padding e più leggibilità */
  .galleria-section,
  .contatti-info,
  .contatti-form-wrapper,
  .lavora-section,
  .checkout-preview,
  .checkout-form,
  .admin-form-wrapper{
    padding: 1rem !important;
    border-radius: 14px;
  }

  /* ---------- GALLERIA: carosello più “mobile” ---------- */
  .carousel-track{
    padding: 10px 8px !important;     /* niente spazio bottoni */
    gap: 12px !important;
    scroll-snap-type: x mandatory;
  }

  .carousel-btn{ display:none !important; } /* swipe only */

  .carousel-image{
    width: min(78vw, 360px) !important;
    aspect-ratio: 16/10;
  }
  .carousel-video{
    width: min(86vw, 520px) !important;
    aspect-ratio: 16/9;
  }

  /* ---------- CONTATTI: form più “touch” ---------- */
  .contatti-form input,
  .contatti-form textarea,
  .lavora-form input,
  .lavora-form textarea,
  .admin-form input[type="text"],
  .admin-form input[type="number"],
  .admin-form select,
  .admin-form textarea{
    padding: .95rem 1rem !important;
    border-radius: 12px;
  }

  .contatti-info li{
    padding: .75rem .8rem !important;
    gap: .65rem;
  }

  /* ---------- LAVORA: immagine più alta e testo sotto ---------- */
  .lavora-img{
    aspect-ratio: 16/9 !important;
  }
  .lavora-text h2{ font-size: 1.35rem !important; }
  .lavora-text p{ font-size: 1rem !important; }

  /* ---------- CARRELLO: layout “stacked” ---------- */
  .carrello-container h2{ margin-bottom: .75rem !important; }

  .carrello-totale{
    justify-content: space-between !important;
    font-size: 1.05rem;
  }

  .carrello-azioni{
    justify-content: stretch !important;
  }
  .btn-checkout{
    width: 100%;
    padding: 1rem 1rem;
    border-radius: 12px;
  }

  /* ---------- CHECKOUT: form più lineare ---------- */
  .checkout-wrapper{ gap: 1rem !important; }
  .checkout-title{ font-size: 1.3rem !important; }

  .form-grid{
    grid-template-columns: 1fr !important;
    gap: .8rem !important;
  }

  /* ---------- ADMIN: griglie ---------- */
  .form-two,
  .form-grid{
    grid-template-columns: 1fr !important;
  }

  .btn-save,
  .btn-submit{
    width: 100%;
    padding: 1rem 1rem;
  }

  .btn-add-account{
    width: 100%;
    justify-content: center;
    padding: .9rem 1rem;
  }

  /* ---------- BOT DISCORD / PLANS (se usi .plans .plan) ---------- */
  .plans{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .plan{
    padding: 1rem !important;
    border-radius: 14px !important;
  }
  .plan h3{ font-size: 1.15rem !important; }
  .plan .price{ font-size: 1.25rem !important; }

  /* ---------- SHOP GRID (se hai griglia prodotti) ---------- */
  .products-grid,
  .shop-grid,
  .merch-grid{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .product-card,
  .shop-card{
    border-radius: 14px !important;
  }

  /* evita elementi che sfondano lo schermo */
  .hero-container,
  .lavora-container,
  .contatti-container,
  .carrello-container,
  .checkout-wrapper,
  .galleria-container{
    min-width: 0;
  }
}

@media (max-width: 560px){
  /* ancora più compatto */
  .galleria-section h2,
  .contatti-info h2,
  .lavora-text h2{
    font-size: 1.15rem !important;
  }

  .carousel-image{ width: 84vw !important; }
  .carousel-video{ width: 92vw !important; }
}

/* ===================== HOME (mobile) ===================== */
@media (max-width: 980px){

  /* HERO (solo home) */
  .hero.hero-home{
    min-height: auto;
    padding: 1.2rem 0 1.8rem;
    align-items: stretch;
  }

  .hero.hero-home .hero-container{
    padding: 0 1rem;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
  }

  .hero.hero-home .hero-text h1{
    font-size: clamp(2rem, 8vw, 2.7rem);
    line-height: 1.08;
  }

  .hero.hero-home .hero-text p{
    font-size: 1.05rem;
  }

  .hero.hero-home .hero-cta{
    width: 100%;
    max-width: 420px;
    display: grid;
    grid-template-columns: 1fr;
    gap: .7rem;
  }

  .hero.hero-home .hero-img img{
    width: min(70vw, 260px);
    margin-top: .6rem;
  }

  /* sezioni sotto hero */
  .hero.hero-home + .container{ margin-top: 1.2rem; }

  .trust-band{
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1.6rem 0;
  }

  .services-grid{
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .showcase{ margin: 2.4rem 0; }

  .show-item{
    flex: 0 0 85vw;
    scroll-snap-align: center;
  }

  .show-actions{
    flex-direction: column;
    gap: .8rem;
  }

  .steps{
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .merchandising-wrapper{
    margin: 3rem 0;
    padding: 2rem 1rem;
  }

  .merch-item{
    flex: 0 0 80vw;
    scroll-snap-align: center;
  }

  .merch-btn{
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 1.2rem auto 0;
    text-align: center;
  }

  .about-quick{
    text-align: left;
    margin: 2.5rem auto;
  }

  .cta-banner{
    padding: 1.6rem 1rem;
    margin-bottom: 3rem;
  }

  .cta.big{
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    text-align: center;
  }
}

/* ===================== HOME (mobile override) ===================== */
@media (max-width: 980px){

  /* container: se sfora, taglia tutto */
  .container{
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 1rem !important;
  }

  /* HERO */
  .hero.hero-home{
    min-height: 100dvh;
    height: auto !important;
    padding: 18px 0 22px;
  }

  .hero-container{
    padding: 0 1rem !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    text-align: center;
  }

  .hero-text h1{
    font-size: clamp(1.95rem, 7.5vw, 2.7rem) !important;
    line-height: 1.08 !important;
  }

  .hero-text p{
    font-size: 1.02rem !important;
    line-height: 1.5;
  }

  .hero-cta{
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .hero-img img{
    width: min(68vw, 260px) !important;
    max-width: 100% !important;
  }

  /* TRUST BAND */
  .trust-band{
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin: 1.3rem 0 1.6rem !important;
  }
  .trust-item{
    padding: 1rem !important;
    border-radius: 14px !important;
    max-width: 100% !important;
  }

  /* SERVIZI */
  .services-grid{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin: 1.6rem 0 !important;
  }
  .service-card{
    max-width: 100% !important;
  }
  .service-card img{
    height: 170px !important;
  }
  .svc-actions{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .btn-link{
    display: block !important;
    width: 100%;
    text-align: center;
    padding: .75rem .9rem;
    border-radius: 12px;
    text-decoration: none;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
  }

  /* SHOWCASE */
  .showcase-head{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .5rem !important;
  }
  .showcase-row{
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;

    gap: 12px !important;
    padding: .75rem 0 .25rem !important;
  }
  .show-item{
    flex: 0 0 82vw !important;
    max-width: 360px;
    scroll-snap-align: start;
  }
  .show-item img{
    height: 200px !important;
  }
  .show-actions{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .btn-primary,
  .btn-ghost{
    width: 100%;
    text-align: center;
    padding: .9rem 1rem !important;
    border-radius: 12px !important;
  }

  /* PROCESS */
  .process{
    text-align: left !important;
    margin: 2rem 0 !important;
  }
  .steps{
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .step{
    padding: 1rem !important;
    border-radius: 14px !important;
    max-width: 100% !important;
  }

  /* MERCH */
  .merchandising-wrapper{
    margin: 2.2rem 0 !important;
    padding: 2rem 1rem !important;
    border-radius: 14px !important;
    max-width: 100% !important;
  }
  .merch-title h2{
    font-size: clamp(1.3rem, 7vw, 1.9rem) !important;
    letter-spacing: 2px !important;
    -webkit-text-stroke: 1px #fff !important;
  }
  .merch-carousel{
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;

    gap: 12px !important;
    padding: .8rem 0 1rem !important;
  }
  .merch-item{
    flex: 0 0 72vw !important;
    max-width: 260px;
    scroll-snap-align: start;
  }
  .merch-btn{
    width: 100% !important;
    max-width: 420px;
    padding: .95rem 1rem !important;
    border-radius: 12px !important;
  }

  /* ABOUT + CTA */
  .about-quick{
    text-align: left !important;
    margin: 2rem auto !important;
  }
  .cta-banner{
    padding: 1.6rem 1rem !important;
    border-radius: 14px !important;
  }
  .cta.big{
    width: 100%;
    max-width: 420px;
    display: inline-block;
    text-align: center;
    padding: .95rem 1rem !important;
    border-radius: 12px !important;
  }
}

@media (max-width: 560px){
  .trust-band{ grid-template-columns: 1fr !important; }
  .steps{ grid-template-columns: 1fr !important; }

  .show-item{ flex-basis: 88vw !important; }
  .merch-item{ flex-basis: 78vw !important; }

}

/* ===================== MERCH LIST (mobile) ===================== */
@media (max-width: 980px){

  /* admin button: non deve stare “sparato” in alto a destra */
  .admin-actions.top-right{
    position: static !important;
    margin: 1rem auto 0 !important;
    max-width: 1100px;
    padding: 0 1rem;
    display: flex;
    justify-content: stretch;
  }
  .admin-actions.top-right .btn-add-account{
    width: 100%;
    justify-content: center;
  }

  /* FILTRI: stack + input full width */
  .filters-wrapper{
    margin: 1.25rem auto 1.25rem !important;
    padding: 0 1rem;
    max-width: 100% !important;

    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .75rem !important;
  }

  .filters-wrapper input,
  .filters-wrapper select,
  .filters-wrapper .btn-reset{
    width: 100% !important;
    min-width: 0;
    padding: .9rem 1rem !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
  }

  /* GRIGLIA: 1 colonna stabile */
  .product-grid{
    padding: 0 1rem !important;
    margin: 0 auto 3rem !important;
    max-width: 100% !important;

    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* CARD: più compatta, thumb più basso */
  .product-card{
    padding: 1rem !important;
    border-radius: 14px !important;
    gap: .65rem !important;
  }

  .prod-thumb{
    height: 180px !important;
    border-radius: 12px !important;
  }

  .prod-title{
    font-size: 1.1rem !important;
    margin: .35rem 0 0 !important;
  }

  .prod-price{
    font-size: 1.05rem !important;
    margin-bottom: .2rem !important;
  }

  /* bottone: full width, facile da toccare */
  .btn-buy{
    width: 100% !important;
    padding: .95rem 1rem !important;
    border-radius: 12px !important;
  }

  /* IMPORTANTISSIMO: l’overlay .card-click non deve “mangiarsi” il tap sul bottone */
  .card-click{
    z-index: 1;
  }
  .btn-buy{
    z-index: 2;
    position: relative;
    pointer-events: auto;
  }
}

@media (max-width: 560px){
  .prod-thumb{ height: 165px !important; }
  .product-card{ padding: .95rem !important; }
}

/* ===================== RECENSIONI (mobile) ===================== */
@media (max-width: 980px){

  /* wrapper pagina */
  .reviews-page{
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 1.25rem 1rem 2.25rem !important;
  }

  /* bottone “aggiungi recensione” */
  .review-actions{
    max-width: 100% !important;
    margin: 1rem auto 0 !important;
    padding: 0 1rem !important;
    justify-content: stretch !important;
  }
  .add-review-btn{
    width: 100% !important;
    padding: .95rem 1rem !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    text-align: center;
  }

  /* griglia recensioni: 4 colonne -> 1/2 colonne */
  .reviews-grid{
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    justify-items: stretch !important;
  }

  /* card: niente width fissa (era 250px), niente height fissa (era 160px) */
  .review-card{
    width: 100% !important;
    height: auto !important;
    min-height: 160px;
    border-radius: 14px !important;
    padding: 1rem !important;
  }

  .review-card .stars{
    font-size: 1.05rem !important;
  }

  .review-card .date{
    font-size: .85rem !important;
  }

  .review-card .comment{
    font-size: .98rem !important;
    line-height: 1.35;
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }

  .review-card .product{
    font-size: .95rem !important;
  }

  /* paginazione: “wrap” */
  .pagination{
    margin-top: 1.75rem !important;
    padding: 0 .25rem;
  }
  .pagination a{
    padding: .55rem .85rem !important;
    margin: .25rem .2rem !important;
    border-radius: 10px !important;
  }

  /* modale: più comoda su mobile */
  .modal-content{
    margin: 18% auto !important;
    padding: 1.25rem !important;
    width: calc(100% - 24px) !important;
    max-width: 520px;
    border-radius: 14px !important;
  }

  .modal-content input,
  .modal-content textarea,
  .modal-content select{
    padding: .85rem .9rem !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
  }

  .modal-content button{
    width: 100% !important;
    padding: .95rem 1rem !important;
    border-radius: 12px !important;
  }

  .modal-content .close{
    right: 14px !important;
    top: 12px !important;
    font-size: 1.7rem !important;
  }
}

@media (max-width: 560px){
  .reviews-grid{
    grid-template-columns: 1fr !important;
  }
}

/* ===================== AUTH (mobile) ===================== */
@media (max-width: 980px){
  .auth-logo{
    top: 12px;
    left: 12px;
  }
  .auth-logo img{
    height: 30px;
  }

  .auth-wrapper{
    padding: 4.5rem 1rem 2rem;
    align-items: flex-start;
  }

  .auth-container{
    max-width: 520px;
    padding: 1.5rem;
    border-radius: 14px;
  }

  .auth-container h2{
    font-size: 1.35rem;
  }

  .toast-container{
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 14px;
  }
  .toast{
    max-width: none;
    width: 100%;
  }
}

@media (max-width: 560px){
  .auth-container{
    padding: 1.25rem;
  }
  .auth-container input{
    padding: .95rem 1rem;
  }
}

/* ===================== PRODUCT DETAIL (merch) — mobile ===================== */
@media (max-width: 980px){

  /* ───── ANTI TAGLIO GLOBALE (FONDAMENTALE) ───── */
  .product-detail,
  .product-detail *{
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* ───── ADMIN ACTIONS ───── */
  .admin-actions{
    padding: 0 1rem !important;
    margin: 1rem auto 0 !important;
    justify-content: stretch !important;
  }

  .btn-delete-product{
    width: 100% !important;
    padding: .85rem 1rem !important;
    border-radius: 12px !important;
    font-weight: 800;
  }

  /* ───── LAYOUT: 1 COLONNA REALE ───── */
  .product-detail{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 1.2rem auto 2.4rem !important;
    padding: 0 1rem !important;

    overflow: visible !important;
  }

  /* ───── GALLERIA ───── */
  .detail-gallery{
    width: 100% !important;
  }

  .detail-gallery .gallery-main{
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
  }

  .detail-gallery .gallery-main img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
  }

  /* thumbs: swipe orizzontale */
  .gallery-thumbs{
    display: flex !important;
    flex-wrap: nowrap !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;

    gap: 10px !important;
    padding: 10px 0 2px !important;
    margin-top: 10px !important;

    scroll-snap-type: x mandatory;
  }

  .gallery-thumbs img{
    flex: 0 0 auto;
    width: 72px !important;
    height: 72px !important;
    border-radius: 12px !important;
    scroll-snap-align: start;
  }

  /* ───── BOX AZIONI ───── */
  .detail-actions{
    padding: 1.25rem !important;
    border-radius: 14px !important;
  }

  .prod-title{
    font-size: 1.25rem !important;
    line-height: 1.15;
  }

  .detail-subtitle{
    margin-bottom: .85rem !important;
  }

  .detail-actions select{
    width: 100%;
    padding: .9rem 1rem !important;
    border-radius: 12px !important;
    margin-top: .35rem !important;
  }

  .checkout-price{
    font-size: 1.55rem !important;
    margin: .85rem 0 !important;
  }

  .btn-buy{
    width: 100% !important;
    padding: 1rem !important;
    border-radius: 12px !important;
  }

  .stock-note{
    text-align: left !important;
    margin-top: .7rem !important;
  }

  /* ───── COLONNA EXTRA ───── */
  .info-extra{
    padding: 1.25rem !important;
    border-radius: 14px !important;
    font-size: .95rem !important;
  }

  .info-extra h3{ font-size: 1.05rem !important; }
  .info-extra h4{ font-size: .98rem !important; }

  /* ───── DESCRIZIONE / SPECIFICHE ───── */
  .detail-description{
    margin-top: 1.4rem !important;
    font-size: 1rem !important;
    line-height: 1.6;
  }

  .detail-specs{
    margin-top: 1.2rem !important;
  }

  .size-guide{
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 14px !important;
  }

  /* ───── CORRELATI (SWIPE) ───── */
  .related-wrapper{
    margin-top: 2rem !important;
  }

  .related-grid{
    display: flex !important;
    flex-wrap: nowrap !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;

    gap: 12px !important;
    padding-bottom: .4rem !important;
  }

  .related-card{
    flex: 0 0 82vw !important;
    max-width: 320px !important;
    padding: 1rem !important;
    border-radius: 14px !important;
  }

  .related-card img{
    width: 100%;
    height: 190px !important;
    object-fit: cover;
    border-radius: 12px !important;
  }

  /* ───── MODALE ───── */
  .modal-box{
    width: calc(100% - 24px) !important;
    max-width: 520px !important;
    padding: 1.25rem !important;
    border-radius: 14px !important;
  }

  .modal-actions{
    display: flex;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .btn-modal-cancel,
  .btn-modal-confirm{
    width: 100% !important;
    padding: .9rem 1rem !important;
    border-radius: 12px !important;
    font-weight: 800;
  }

  /* ───── TOAST ───── */
  #toast.toast{
    left: 12px;
    right: 12px;
    bottom: 14px;
    width: auto;
    max-width: none;
  }
}

@media (max-width: 560px){
  .detail-gallery .gallery-main{
    aspect-ratio: 4 / 5;
  }

  .related-card{
    flex-basis: 88vw !important;
  }
}

/* ===================== LIGHTBOX CONFIG — MOBILE ===================== */
@media (max-width: 960px){

  .config-container{
    margin: 1.2rem auto;
    padding: 0 1rem;
  }

  .config-container h1{
    font-size: 1.5rem;
    line-height: 1.15;
    margin-bottom: .6rem;
  }

  .config-container .lead{
    font-size: .95rem;
    line-height: 1.4;
    margin-bottom: 1rem;
  }

  .config-grid{
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  fieldset{
    padding: .9rem;
    border-radius: 10px;
    margin-bottom: .85rem;
  }

  fieldset legend{
    font-size: .95rem;
  }

  label{
    margin: .55rem 0;
    font-size: .95rem;
  }

  input[type="number"],
  input[type="text"],
  select,
  textarea{
    padding: .7rem .75rem;
    border-radius: 10px;
    font-size: 16px; /* evita zoom iOS */
  }

  input[type="file"]{
    width: 100%;
  }

  /* radio: più “tap-friendly” */
  fieldset input[type="radio"]{
    transform: scale(1.15);
    margin-right: .55rem;
  }

  /* riga prezzo + bottone: a colonna */
  .price-row{
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
    margin-top: .85rem;
  }

  .price-row .actions{
    width: 100%;
  }

  .btn-primary{
    width: 100%;
    padding: .85rem 1rem;
    border-radius: 12px;
    font-size: 1rem;
  }

  /* preview: full width, canvas responsive */
  .preview{
    padding: .9rem;
    border-radius: 12px;
  }

  .preview h3{
    font-size: 1.05rem;
    margin: 0 0 .6rem;
  }

  .preview-box{
    width: 100%;
    min-height: unset;
    padding: .75rem;
    border-radius: 12px;
  }

  #previewCanvas{
    width: 100%;
    height: auto;
    max-width: 520px; /* evita che diventi enorme su telefoni grandi */
    display: block;
    touch-action: none; /* IMPORTANT: drag fluido su mobile */
  }

  .preview-note{
    font-size: .88rem;
    line-height: 1.35;
    margin-top: .55rem;
  }
}

/* ancora più stretto */
@media (max-width: 420px){
  .config-container{ padding: 0 .85rem; }
  fieldset{ padding: .8rem; }
  .preview-box{ padding: .6rem; }
}