/* Mercantico V246 - stabilizzazione vetrina produzione */
body.public-storefront-body > .shop-header{
  position:sticky!important;
  top:0!important;
  z-index:2500!important;
}
body.public-storefront-body:not(.shop-detail-body) > .shop-header{
  overflow:visible!important;
}
#categorie,#vetrina-articoli,#come-funziona{
  scroll-margin-top:118px;
}
.shop-qty-residue{
  display:block;
  margin-top:3px;
  font-size:.72rem;
  font-weight:750;
  opacity:.72;
}
@media(max-width:620px){
  #categorie,#vetrina-articoli,#come-funziona{scroll-margin-top:88px}
}

/* Mercantico V257 - correzioni vetrina produzione */
/* Il contenitore hero non deve avere un'ombra propria: l'ombra resta alle card/call-to-action. */
body.public-storefront-body .shop-hero,
body.public-storefront-body .shop-hero-grid{
  box-shadow:none!important;
  filter:none!important;
}

/* Il badge di disponibilità mantiene il colore standard anche per articoli scontati.
   Gli stati prenotato/in prenotazione continuano ad usare le rispettive classi. */
body.public-storefront-body .shop-product-status:not(.is-booked):not(.is-pending){
  background:var(--shop-accent,#249fcb)!important;
  color:#fff!important;
}

/* Brand Mercantico nel footer: versione monocromatica bianca sul fondo scuro. */
body.public-storefront-body .shop-footer-logo img{
  filter:brightness(0) invert(1)!important;
  opacity:1!important;
}

/* Le categorie sono controlli di filtro reali, non semplici elementi decorativi. */
body.public-storefront-body .shop-category-pill{cursor:pointer}



/* Mercantico V258 - rifiniture produzione vetrina */
/* Evita sovrapposizioni tra i passaggi "Come vendere" e il pulsante informazioni. */
@media (max-width:1180px){
  body.public-storefront-body .shop-sell-banner{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    grid-template-areas:
      "mark copy"
      "steps steps"
      "cta cta"!important;
    align-items:center!important;
    column-gap:18px!important;
    row-gap:16px!important;
  }
  body.public-storefront-body .shop-sell-mark{grid-area:mark!important;align-self:start!important}
  body.public-storefront-body .shop-sell-copy{grid-area:copy!important;min-width:0!important}
  body.public-storefront-body .shop-steps{
    grid-area:steps!important;
    position:static!important;
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:flex-start!important;
    gap:10px 18px!important;
    margin:0!important;
  }
  body.public-storefront-body .shop-steps li{min-width:0!important;flex:0 1 auto!important}
  body.public-storefront-body .shop-sell-banner > .shop-btn{
    grid-area:cta!important;
    position:static!important;
    justify-self:start!important;
    width:auto!important;
    max-width:100%!important;
    margin:0!important;
  }
}
@media (max-width:680px){
  body.public-storefront-body .shop-sell-banner{
    grid-template-columns:1fr!important;
    grid-template-areas:"copy" "steps" "cta"!important;
  }
  body.public-storefront-body .shop-sell-mark{display:none!important}
  body.public-storefront-body .shop-steps{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  body.public-storefront-body .shop-steps li{width:auto!important}
}

/* Il filtro categoria si aggiorna senza il vecchio ricaricamento con salto su/giù. */
body.public-storefront-body.shop-filter-loading #categorie,
body.public-storefront-body.shop-filter-loading #vetrina-articoli{
  opacity:.68;
  pointer-events:none;
  transition:opacity .12s ease;
}


/* Mercantico V259 - stabilizzazione finale vetrina produzione */
/* Su viewport intermedi nessun elemento di "Come vendere" può sovrapporsi al bottone CTA. */
@media (min-width:681px) and (max-width:1320px){
  body.public-storefront-body .shop-sell-banner{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"copy" "steps" "cta"!important;
    gap:16px!important;
    padding-right:clamp(20px,4vw,44px)!important;
  }
  body.public-storefront-body .shop-sell-mark{display:none!important;}
  body.public-storefront-body .shop-sell-copy{grid-area:copy!important;max-width:none!important;}
  body.public-storefront-body .shop-steps{
    grid-area:steps!important;position:static!important;display:flex!important;flex-wrap:wrap!important;
    gap:10px 16px!important;width:100%!important;max-width:none!important;margin:0!important;
  }
  body.public-storefront-body .shop-sell-banner > .shop-btn{
    grid-area:cta!important;position:static!important;justify-self:start!important;margin:0!important;
  }
}
/* Lo stato attivo viene assegnato da un unico scrollspy JS; nessuna voce deve restare
   visivamente selezionata solo per il markup iniziale dopo lo scroll. */
body.public-storefront-body .shop-main-nav a.active{position:relative;}


/* Mercantico V260 - identità negozio nel footer + link piattaforma */
body.public-storefront-body .shop-footer-bottom-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
body.public-storefront-body .shop-platform-link{
  color:inherit;
  text-decoration:none;
  font-weight:800;
  opacity:.88;
}
body.public-storefront-body .shop-platform-link:hover{
  text-decoration:underline;
  opacity:1;
}
@media (max-width:680px){
  body.public-storefront-body .shop-footer-bottom-row{justify-content:center;text-align:center;}
}

/* Mercantico V261 - rifiniture produzione: footer leggibile + Come vendere robusto */
/* Nel footer del negozio il logo del negozio resta a colori: niente filtro che lo
   trasformi in una sagoma bianca illeggibile. Il fallback Mercantico resta monocromatico. */
body.public-storefront-body .shop-footer-logo.has-shop-logo{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:72px!important;
  height:58px!important;
  padding:4px 6px!important;
  background:#fff!important;
  border-radius:12px!important;
  overflow:hidden!important;
}
body.public-storefront-body .shop-footer-logo.has-shop-logo img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  filter:none!important;
  opacity:1!important;
}
body.public-storefront-body .shop-footer-logo:not(.has-shop-logo) img{
  filter:brightness(0) invert(1)!important;
  opacity:1!important;
}

/* Da desktop medio fino a tablet largo il banner usa due righe vere:
   testo sopra, passaggi + CTA sotto. Nessun elemento puo sovrapporsi a Vendiamo. */
@media (min-width:1021px) and (max-width:1500px){
  body.public-storefront-body .shop-sell-banner{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) max-content!important;
    grid-template-areas:"copy copy" "steps cta"!important;
    align-items:center!important;
    column-gap:24px!important;
    row-gap:18px!important;
    padding:28px 32px!important;
  }
  body.public-storefront-body .shop-sell-mark{display:none!important;}
  body.public-storefront-body .shop-sell-copy{grid-area:copy!important;min-width:0!important;max-width:none!important;}
  body.public-storefront-body .shop-steps{
    grid-area:steps!important;
    position:static!important;
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    gap:10px 18px!important;
    margin:0!important;
    padding:0!important;
  }
  body.public-storefront-body .shop-steps li{flex:0 0 auto!important;min-width:0!important;white-space:nowrap!important;}
  body.public-storefront-body .shop-sell-banner > .shop-btn{
    grid-area:cta!important;
    position:static!important;
    justify-self:end!important;
    align-self:center!important;
    width:auto!important;
    max-width:100%!important;
    margin:0!important;
    white-space:nowrap!important;
  }
}

/* Sotto 1020px la CTA ha una riga propria: e la soluzione sicura anche con
   testi piu lunghi o zoom del browser. */
@media (min-width:681px) and (max-width:1020px){
  body.public-storefront-body .shop-sell-banner{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-areas:"copy" "steps" "cta"!important;
    align-items:start!important;
    gap:16px!important;
    padding:26px 28px!important;
  }
  body.public-storefront-body .shop-sell-mark{display:none!important;}
  body.public-storefront-body .shop-sell-copy{grid-area:copy!important;min-width:0!important;max-width:none!important;}
  body.public-storefront-body .shop-steps{
    grid-area:steps!important;position:static!important;display:flex!important;flex-wrap:wrap!important;
    justify-content:flex-start!important;gap:10px 16px!important;width:100%!important;margin:0!important;padding:0!important;
  }
  body.public-storefront-body .shop-steps li{flex:0 0 auto!important;white-space:nowrap!important;}
  body.public-storefront-body .shop-sell-banner > .shop-btn{
    grid-area:cta!important;position:static!important;justify-self:start!important;width:auto!important;margin:0!important;
  }
}

@media (max-width:680px){
  body.public-storefront-body .shop-sell-banner{grid-template-areas:"copy" "steps" "cta"!important;}
  body.public-storefront-body .shop-sell-banner > .shop-btn{width:100%!important;justify-self:stretch!important;}
}

/* Mercantico V262 - Come vendere: layout anti-sovrapposizione definitivo
   Il banner non dipende più dalla larghezza del viewport per separare CTA e passaggi.
   Testo, passaggi e pulsante hanno sempre righe proprie: nessun overlap possibile. */
body.public-storefront-body .shop-sell-banner{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-areas:"copy" "steps" "cta"!important;
  align-items:start!important;
  gap:16px!important;
  padding:clamp(22px,2.2vw,32px)!important;
}
body.public-storefront-body .shop-sell-mark{display:none!important;}
body.public-storefront-body .shop-sell-copy{
  grid-area:copy!important;
  min-width:0!important;
  max-width:none!important;
}
body.public-storefront-body .shop-steps{
  grid-area:steps!important;
  position:static!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  align-items:center!important;
  justify-content:stretch!important;
  gap:10px 14px!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}
body.public-storefront-body .shop-steps li{
  min-width:0!important;
  width:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:7px!important;
  white-space:nowrap!important;
}
body.public-storefront-body .shop-steps li:not(:last-child)::after{
  margin-left:auto!important;
  padding-left:6px!important;
}
body.public-storefront-body .shop-sell-banner > .shop-btn{
  grid-area:cta!important;
  position:static!important;
  justify-self:start!important;
  align-self:start!important;
  width:auto!important;
  max-width:100%!important;
  margin:0!important;
  white-space:normal!important;
}
@media (max-width:760px){
  body.public-storefront-body .shop-steps{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.public-storefront-body .shop-steps li:not(:last-child)::after{display:none!important;}
}
@media (max-width:420px){
  body.public-storefront-body .shop-sell-banner{gap:13px!important;padding:20px 18px!important;}
  body.public-storefront-body .shop-steps{grid-template-columns:1fr!important;gap:8px!important;}
  body.public-storefront-body .shop-sell-banner > .shop-btn{width:100%!important;justify-self:stretch!important;text-align:center!important;}
}