/*
  Menu a sezioni (MENUORDINA.aspx): categorie in verticale, prodotti in caroselli orizzontali con scroll-snap.
  Solo presentazione. Colori, font e raggi vengono dai token di app.css (stessa identita' del sito Astro).
*/
#menucards, #risultatiricerca { width: 100%; }
#menucards[hidden], #risultatiricerca[hidden], .mrail__arrow[hidden], .mresults__empty[hidden] { display: none !important; }

.mcat { padding-top: 22px; }
.mcat__head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 6px; border-bottom: 2px solid var(--ink-900); }
.mcat__title { margin: 0 !important; font: 900 var(--t-h1)/1 var(--ff-display) !important; letter-spacing: .005em; text-transform: uppercase; color: var(--red-600) !important; }

/* carosello: scroll orizzontale interno, lo scroll verticale della pagina non viene mai catturato */
.mrail { position: relative; margin: 12px -16px 0; overflow: hidden; }
.mrail__list {
  display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: 16px; padding: 4px 16px 12px; scroll-behavior: smooth;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; min-height: 120px;
}
.mrail__list::-webkit-scrollbar { display: none; }
.mrail__list:focus-visible { outline: 2px solid var(--red-600); outline-offset: -2px; }
.mrail__arrow { display: none; }
.mrail__retry { flex: 0 0 auto; min-height: var(--tap); padding: 0 18px; border: 1.5px solid var(--ink-900); border-radius: var(--r-md); background: var(--paper-50); font: 500 var(--t-label)/1 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; }

/* scheda prodotto */
.pcard {
  --pcard-w: min(78vw, 300px);
  flex: 0 0 var(--pcard-w); min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px;
  padding: 8px 8px 14px; background: var(--paper-50); border: 1.5px solid var(--line); border-radius: 18px;
}
.pcard__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: var(--paper-200); }
.pcard__media::before { content: ""; position: absolute; inset: 28%; background: url("../assets/images/logo/logo7.png") center / contain no-repeat; opacity: .14; filter: grayscale(1); }
.pcard__media img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; }
.pcard__media img[src=""] { display: none; }
.pcard__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 0 6px; }
.pcard__name { margin: 4px 0 0 !important; font: 700 var(--t-name)/1.05 var(--ff-display) !important; text-transform: uppercase; }
.pcard__name a { font: inherit !important; color: var(--ink-900) !important; text-decoration: none; pointer-events: none; }
.pcard__desc { font: 400 var(--t-small)/1.4 var(--ff-body); color: var(--smoke-600); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.6em; }
.pcard__gf { display: flex; align-items: center; gap: 8px; font: 500 var(--t-label)/1 var(--ff-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--red-600); }
.pcard__gf select { flex: 1; min-width: 0; min-height: 36px; padding: 0 6px; font: 500 12px var(--ff-mono); border: 1.5px solid var(--ink-900); border-radius: var(--r-md); background: var(--paper-50); }
.pcard__price { margin-top: auto !important; padding-top: 4px; }
.pcard__price strong { font: 900 var(--t-price)/1 var(--ff-display) !important; color: var(--red-600) !important; }
.pcard__buy { display: flex; align-items: center; gap: 6px; }
.pcard__buy input[type=text] { width: 42px !important; }
.pcard .personalizza { align-self: flex-start; margin-top: 4px !important; }
.pcard--skel { min-height: 330px; background: linear-gradient(100deg, var(--paper-50) 30%, var(--paper-200) 50%, var(--paper-50) 70%) 0 0 / 200% 100%; animation: pcardShimmer 1.4s linear infinite; }
@keyframes pcardShimmer { to { background-position: -200% 0; } }

/* barra categorie: categoria attiva */
.ricercacategoria.is-active { background: var(--red-600) !important; border-color: var(--red-600) !important; color: #fff !important; }
.ricercacategoria a { text-decoration: none; }

/* risultati ricerca */
.mresults { padding-top: 22px; }
.mresults__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; padding-top: 12px; }
.mresults__list .pcard { flex: initial; }
.mresults__empty { padding: 24px 0; color: var(--smoke-600); }

/* desktop / mouse: piu' schede visibili, frecce */
@media (hover: hover) and (min-width: 768px) {
  .mrail { margin-inline: 0; }
  .mrail__list { padding-inline: 0; scroll-padding-inline: 0; }
  .pcard { --pcard-w: 280px; }
  .mrail__arrow {
    position: absolute; top: 40%; transform: translateY(-50%); z-index: 2; display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: 50%; background: var(--paper-100); color: var(--ink-900);
    border: 1.5px solid var(--ink-900); box-shadow: 0 2px 8px rgb(23 19 15 / .18); cursor: pointer;
  }
  .mrail__arrow--prev { left: 8px; }
  .mrail__arrow--next { right: 8px; }
  .mrail__arrow:hover { background: var(--ink-900); color: var(--paper-100); }
}

@media (prefers-reduced-motion: reduce) {
  .mrail__list { scroll-behavior: auto; }
  .pcard--skel { animation: none; }
}

/* l'intestazione resta fissa in alto per tutta la lunghezza del menu (la barra categorie le si appoggia sotto) */
.ecommerce-header { position: sticky; top: 0; z-index: 90; }

.mcat__title, .mcat__head { box-shadow: none !important; background: none !important; text-shadow: none !important; }
.mcat__title { padding: 0 !important; }

.mnote { margin: 0 0 4px; font: 500 var(--t-label)/1.3 var(--ff-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--smoke-600); }