/*
 * od-category.css — restyle novembre 2026, area category: pagina categoria, risultati di ricerca,
 * barra filtri/ordinamento, pannello mobile "Filtra e ordina", griglia, card prodotto, paginazione.
 * Riferimento: pagina collezione di Malva (Dawn): organizzazione e comportamento, NON l'aspetto
 * (restano Poppins, arancione, teal, giallo). Token in od-base.css.
 *
 * Markup: templates/catalog/listing/{product-list,category,search}.tpl,
 *         templates/catalog/_partials/{category-header,products-top,products,miniatures/product}.tpl,
 *         templates/_partials/pagination.tpl,
 *         modules/ps_facetedsearch/views/templates/front/catalog/{facets,active-filters}.tpl.
 * Specificita': diverse regole partono da #wrapper (o da #wrapper #search_filters) per battere,
 * a parita' di peso e caricate dopo, quelle di custom.css (#category ..., #search ...) e di
 * theme.css di Classic (#search_filters ..., .product-miniature ...).
 */

/* ------------------------------------------------------------------ pagina */
#category #wrapper,
#search #wrapper,
#prices-drop #wrapper,
#new-products #wrapper,
#best-sales #wrapper,
#manufacturer #wrapper,
#supplier #wrapper {
  background: var(--od-surface);
}

#wrapper .od-plp { color: var(--od-ink); }
#wrapper #products.od-plp-products { color: var(--od-ink); }

/* Breadcrumb piccola e centrata, come la testata */
#category #wrapper .breadcrumb,
#search #wrapper .breadcrumb {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: var(--od-space-4) 0 0;
  background: transparent;
  font-size: var(--od-text-xs);
  color: var(--od-muted);
}
#category #wrapper .breadcrumb ol,
#search #wrapper .breadcrumb ol { margin: 0; padding: 0; }
#category #wrapper .breadcrumb li,
#search #wrapper .breadcrumb li { color: var(--od-muted); }
#category #wrapper .breadcrumb a,
#search #wrapper .breadcrumb a { color: var(--od-muted); }
#category #wrapper .breadcrumb a:hover,
#search #wrapper .breadcrumb a:hover { color: var(--od-ink); }

/* ------------------------------------------------------------------ testata (titolo) */
.od-plp-head {
  padding: var(--od-space-5) 0 var(--od-space-5);
  text-align: center;
}
.od-plp-head__title {
  margin: 0;
  font-family: var(--od-font);
  font-size: var(--od-text-2xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--od-teal);
}
.od-plp-head__query { color: var(--od-orange); }
.od-plp-head__desc {
  max-width: 640px;
  margin: var(--od-space-3) auto 0;
  font-size: var(--od-text-sm);
  line-height: 1.6;
  color: var(--od-muted);
}
.od-plp-head__desc p { margin: 0 0 var(--od-space-2); color: inherit; }
.od-plp-head__desc p:last-child { margin-bottom: 0; }
@media (min-width: 768px) {
  .od-plp-head { padding: var(--od-space-6) 0 var(--od-space-5); }
}

/* ------------------------------------------------------------------ elementi comuni dei controlli */
.od-check {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--od-space-3);
  min-height: 40px;
  margin: 0;
  cursor: pointer;
  font-size: var(--od-text-sm);
  color: var(--od-ink);
}
.od-check__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.od-check__box {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--od-muted);
  border-radius: 4px;
  background: var(--od-surface) center / 12px 12px no-repeat;
  transition: background-color var(--od-fast), border-color var(--od-fast);
}
.od-check__box--radio { border-radius: 50%; }
.od-check__swatch {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--od-line);
  background-size: cover;
}
.od-check:hover .od-check__box,
.od-sortlink:hover .od-check__box { border-color: var(--od-ink); }
.od-check__input:checked ~ .od-check__box,
.od-check.is-active .od-check__box {
  border-color: var(--od-orange);
  background-color: var(--od-orange);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.od-check__input:focus-visible ~ .od-check__box { outline: 2px solid var(--od-orange); outline-offset: 2px; }
.od-sortlink.is-current .od-check__box {
  border-color: var(--od-orange);
  background: radial-gradient(circle, var(--od-orange) 0 4px, var(--od-surface) 4.5px);
}
.od-check__swatch + .od-check__text,
.od-check__box + .od-check__text { flex: 1 1 auto; }
#wrapper #search_filters .od-check__text,
#wrapper .od-check__text {
  display: inline;
  margin: 0;
  font-size: var(--od-text-sm);
  color: var(--od-ink);
  text-decoration: none;
  pointer-events: none; /* il clic va all'input sottostante (stesso URL, un solo aggiornamento) */
}
.od-check__count {
  margin-left: auto;
  font-size: var(--od-text-xs);
  color: var(--od-muted);
}
.od-sortlink {
  display: flex;
  align-items: center;
  gap: var(--od-space-3);
  min-height: 40px;
  font-size: var(--od-text-sm);
  color: var(--od-ink);
  text-decoration: none;
}
.od-sortlink:hover, .od-sortlink:focus { color: var(--od-ink); text-decoration: none; }
#wrapper .od-sortlink .od-check__text { pointer-events: none; }

/* ------------------------------------------------------------------ filtri: struttura comune */
#wrapper #search_filters.od-facets {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#wrapper #search_filters .od-facet,
#wrapper .od-facet {
  position: relative;
  margin: 0;
  padding: 0;
}
.od-facet__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--od-space-2);
  margin: 0;
  border: 0;
  background: transparent;
  font-family: var(--od-font);
  color: var(--od-ink);
  cursor: pointer;
}
.od-facet__caret { flex: 0 0 auto; transition: transform 250ms var(--od-ease); }
.od-facet__trigger:focus:not(:focus-visible) { outline: none; }
.od-facet.is-open > .od-facet__trigger .od-facet__caret { transform: rotate(180deg); }
.od-facet__count { color: var(--od-orange); }
.od-facet__value { display: none; }
#wrapper .od-facet__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
#wrapper #search_filters .od-facet__list li,
#wrapper .od-facet__list li { margin: 0; padding: 0; list-style: none; }

/* Slider del prezzo (jQuery UI, inizializzato da ps_facetedsearch/front.js) */
#wrapper #search_filters .od-facet .faceted-slider {
  min-width: 0;
  margin: 0;
  padding: var(--od-space-2) var(--od-space-2) var(--od-space-4);
  list-style: none;
}
.od-facet__range {
  margin: 0 0 var(--od-space-4);
  font-size: var(--od-text-sm);
  font-weight: 600;
  color: var(--od-ink);
}
#wrapper .od-facet .ui-slider-horizontal {
  height: 4px;
  margin: 0 9px;
  border: 0;
  border-radius: var(--od-radius-pill);
  background: var(--od-line);
}
#wrapper .od-facet .ui-slider .ui-slider-range { background: var(--od-orange); border-radius: var(--od-radius-pill); }
#wrapper .od-facet .ui-slider .ui-slider-handle {
  top: -8px;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  border: 2px solid var(--od-orange);
  border-radius: 50%;
  background: var(--od-surface);
  cursor: grab;
}
#wrapper .od-facet .ui-slider .ui-slider-handle:focus-visible { outline: 2px solid var(--od-orange); outline-offset: 2px; }

/* ------------------------------------------------------------------ chip dei filtri attivi */
#wrapper #js-active-search-filters.od-chips {
  display: block;
  margin: 0;
  padding: 0;
  background: transparent;
}
#wrapper #js-active-search-filters.od-chips.hide { display: none; }
.od-chips__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--od-space-2);
  margin: 0;
  padding: var(--od-space-3) 0;
  list-style: none;
}
#wrapper #js-active-search-filters .filter-block {
  display: block;
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  font-size: inherit;
  color: inherit;
}
.od-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--od-space-2);
  height: 32px;
  padding: 0 var(--od-space-3);
  border: 1px solid var(--od-line);
  border-radius: var(--od-radius-pill);
  background: var(--od-surface);
  font-size: var(--od-text-xs);
  font-weight: 600;
  color: var(--od-ink);
  text-decoration: none;
  transition: background-color var(--od-fast), border-color var(--od-fast);
}
.od-chip:hover, .od-chip:focus { background: var(--od-surface-alt); border-color: var(--od-ink); color: var(--od-ink); text-decoration: none; }
.od-chips__clear {
  height: 32px;
  padding: 0 var(--od-space-2);
  border: 0;
  background: transparent;
  font-family: var(--od-font);
  font-size: var(--od-text-xs);
  font-weight: 600;
  letter-spacing: var(--od-label-tracking);
  text-transform: uppercase;
  color: var(--od-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.od-chips__clear:hover { color: var(--od-ink); }

/* ------------------------------------------------------------------ conteggio + ordinamento */
.od-plp-count {
  margin: 0;
  white-space: nowrap;
}
.od-plp-sort {
  display: flex;
  align-items: center;
  gap: var(--od-space-2);
}
.od-plp-sort__label { margin: 0; white-space: nowrap; }
.od-plp-sort__select {
  width: auto;
  max-width: 260px;
  field-sizing: content; /* larga quanto il valore scelto (Chrome/Edge); altrove quanto l'opzione piu' lunga */
  height: var(--od-control-h);
  padding: 0 22px 0 var(--od-space-2);
  border: 0;
  border-radius: var(--od-radius-sm);
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23292b2c' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 6px center / 10px 6px no-repeat;
  font-family: var(--od-font);
  font-size: var(--od-text-sm);
  font-weight: 600;
  color: var(--od-ink);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.od-plp-sort__select:hover { background-color: var(--od-surface-alt); }

/* ------------------------------------------------------------------ MOBILE (<768): bottone + pannello laterale */
@media (max-width: 767.98px) {
  .od-plp-top { padding-bottom: var(--od-space-4); }
  .od-plp-top__open {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--od-space-2);
    width: 100%;
    height: var(--od-control-h);
    margin: 0;
    padding: 0 var(--od-space-4);
    border: 1.5px solid var(--od-ink);
    border-radius: var(--od-radius-pill);
    background: var(--od-surface);
    font-family: var(--od-font);
    font-size: var(--od-text-sm);
    font-weight: 600;
    color: var(--od-ink);
    cursor: pointer;
  }
  .od-plp-top__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--od-radius-pill);
    background: var(--od-orange);
    font-size: var(--od-text-xs);
    font-weight: 700;
    color: #fff;
  }
  .od-plp-top__badge[hidden] { display: none; }
  .od-plp-count--mobile { padding-top: var(--od-space-3); }
  .od-plp-toolbar .od-plp-sort,
  .od-plp-toolbar > .od-plp-count,
  .od-plp-toolbar__label { display: none; }

  /* I chip restano visibili anche su mobile, sotto il bottone */
  .od-chips__list { padding-bottom: 0; }

  .od-fdrawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483100;
    background: var(--od-overlay);
    opacity: 0;
    transition: opacity 250ms ease;
  }
  .od-fdrawer-overlay[hidden] { display: block; visibility: hidden; pointer-events: none; }
  .od-plp-top.is-drawer-open .od-fdrawer-overlay { opacity: 1; visibility: visible; pointer-events: auto; }

  .od-fdrawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483101; /* sopra header e barra Valen */
    display: flex;
    flex-direction: column;
    width: min(88vw, 400px);
    background: var(--od-surface);
    box-shadow: var(--od-shadow);
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform 300ms var(--od-ease), visibility 0s linear 300ms;
  }
  .od-plp-top.is-drawer-open .od-fdrawer {
    transform: none;
    visibility: visible;
    transition: transform 300ms var(--od-ease), visibility 0s;
  }
  .od-plp-top.od-no-anim .od-fdrawer,
  .od-plp-top.od-no-anim .od-fdrawer-overlay { transition: none; }

  .od-fdrawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    min-height: 56px;
    padding: 0 var(--od-space-2) 0 var(--od-gutter);
    border-bottom: 1px solid var(--od-line);
  }
  .od-fdrawer__title {
    margin: 0;
    font-size: var(--od-text-md);
    font-weight: 700;
    color: var(--od-ink);
  }
  .od-fdrawer__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--od-control-h);
    height: var(--od-control-h);
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--od-ink);
    cursor: pointer;
  }
  .od-fdrawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .od-fdrawer .od-facet { border-bottom: 1px solid var(--od-line); }
  .od-fdrawer .od-facet__trigger {
    display: flex;
    width: 100%;
    min-height: 56px;
    padding: 0 var(--od-gutter);
    font-size: var(--od-text-sm);
    font-weight: 600;
    text-align: left;
  }
  .od-fdrawer .od-facet__name { flex: 0 1 auto; }
  .od-fdrawer .od-facet__value {
    display: block;
    flex: 1 1 auto;
    overflow: hidden;
    text-align: right;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 400;
    color: var(--od-muted);
  }
  .od-fdrawer .od-facet__caret { margin-left: auto; }
  .od-fdrawer .od-facet__value + .od-facet__caret { margin-left: 0; }
  .od-fdrawer .od-facet__panel { display: none; padding: 0 var(--od-gutter) var(--od-space-3); }
  .od-fdrawer .od-facet.is-open > .od-facet__panel { display: block; }

  .od-fdrawer__foot {
    display: flex;
    flex: 0 0 auto;
    gap: var(--od-space-3);
    padding: var(--od-space-3) var(--od-gutter) calc(var(--od-space-3) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--od-line);
    background: var(--od-surface);
  }
  .od-fdrawer__clear,
  .od-fdrawer__apply {
    flex: 1 1 0;
    white-space: nowrap;
    height: var(--od-control-h);
    padding: 0 var(--od-space-3);
    border-radius: var(--od-radius-pill);
    font-family: var(--od-font);
    font-size: var(--od-text-sm);
    font-weight: 600;
    cursor: pointer;
  }
  .od-fdrawer__clear {
    border: 1.5px solid var(--od-ink);
    background: var(--od-surface);
    color: var(--od-ink);
  }
  .od-fdrawer__clear[hidden] { display: none; }
  .od-fdrawer__apply {
    flex-grow: 1.5;
    border: 0;
    background: var(--od-orange);
    color: #fff;
  }
  .od-fdrawer__apply:hover { background: var(--od-orange-dark); }
}

/* ------------------------------------------------------------------ DESKTOP (>=768): barra orizzontale */
@media (min-width: 768px) {
  .od-plp-top__open,
  .od-plp-count--mobile,
  .od-fdrawer-overlay,
  .od-fdrawer__head,
  .od-fdrawer__foot,
  .od-fdrawer .od-facet--sort { display: none !important; }

  .od-plp-top { position: relative; z-index: 5; }
  .od-plp-toolbar {
    display: flex;
    align-items: center;
    gap: var(--od-space-5);
    min-height: calc(var(--od-control-h) + var(--od-space-2));
    border-top: 1px solid var(--od-line);
    border-bottom: 1px solid var(--od-line);
  }
  .od-fdrawer { flex: 1 1 auto; min-width: 0; }
  .od-fdrawer__body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--od-space-1);
  }
  .od-plp-toolbar__label { margin-right: var(--od-space-2); }
  #wrapper #search_filters.od-facets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--od-space-1);
  }
  .od-facet__trigger {
    height: var(--od-control-h);
    padding: 0 var(--od-space-3);
    border-radius: var(--od-radius-sm);
    font-size: var(--od-text-xs);
    font-weight: 600;
    letter-spacing: var(--od-label-tracking);
    text-transform: uppercase;
    color: var(--od-muted);
    transition: color 300ms ease, background-color 500ms ease;
  }
  .od-facet__trigger:hover,
  .od-facet.is-open > .od-facet__trigger,
  .od-facet.has-active > .od-facet__trigger { color: var(--od-ink); }
  .od-facet__trigger:hover,
  .od-facet.is-open > .od-facet__trigger { background: var(--od-surface-alt); }

  .od-facet__panel {
    position: absolute;
    top: calc(100% + var(--od-space-1));
    left: 0;
    z-index: 30;
    width: 300px;
    max-height: 420px;
    overflow-y: auto;
    padding: var(--od-space-2) var(--od-space-5);
    border: 1px solid var(--od-line);
    border-radius: var(--od-radius);
    background: var(--od-surface);
    box-shadow: var(--od-shadow);
    /* visibility/opacity e non display:none: lo slider jQuery UI misura la sua larghezza */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 150ms ease, transform 150ms ease, visibility 0s linear 150ms;
  }
  .od-facet.is-open > .od-facet__panel {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 150ms ease, transform 150ms ease, visibility 0s;
  }
  .od-facet[data-type="price"] .od-facet__panel { padding-top: var(--od-space-4); }

  .od-plp-toolbar > .od-plp-count { flex: 0 0 auto; }
  .od-plp-sort { flex: 0 0 auto; }
}

/* ------------------------------------------------------------------ griglia */
#wrapper .od-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--od-space-4);
  row-gap: var(--od-space-6);
  margin: 0;
  padding: var(--od-space-2) 0 0;
}
@media (min-width: 768px) {
  #wrapper .od-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--od-space-5);
    padding-top: var(--od-space-5);
  }
}
@media (min-width: 1200px) {
  #wrapper .od-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
#wrapper .od-grid > .od-grid__item {
  display: flex;
  float: none;
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------------------------ card prodotto */
#wrapper .product-miniature.od-pcard,
.product-miniature.od-pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: var(--od-radius);
  background: var(--od-surface-alt);
  color: var(--od-ink);
}
/* Via gli sfondi pastello a rotazione e l'effetto "sollevamento" di custom.css */
#wrapper .product-miniature.od-pcard .thumbnail-container,
.featured-products .product-miniature.od-pcard .thumbnail-container,
.products .product .product-miniature.od-pcard .thumbnail-container,
.product-miniature.od-pcard .thumbnail-container.od-pcard__media {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  background: var(--od-surface);
  box-shadow: none;
  transform: none;
}
.product-miniature.od-pcard:hover .thumbnail-container,
.product-miniature.od-pcard:focus-within .thumbnail-container { transform: none; box-shadow: none; }
.product-miniature.od-pcard .od-pcard__media-link {
  position: absolute;
  inset: 0;
  display: block;
  height: auto;
}
/* Specificita' alzata apposta (4 classi): il "position: relative" nativo di Classic
   su ".product-miniature .thumbnail-container .product-thumbnail img" (3 classi + 1 tag,
   quindi piu' specifico di 3 classi da sole) altrimenti vince e la seconda foto resta in
   flusso normale invece di sovrapporsi alla prima (bug reale: hover mostrava un riquadro
   vuoto, la foto alt scorreva sotto la card). */
.product-miniature.od-pcard .thumbnail-container .od-pcard__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  object-fit: cover;
  transition: opacity 300ms linear, transform 500ms ease;
}
.od-pcard__img--alt { opacity: 0; }
@media (hover: hover) and (min-width: 992px) {
  /* .alt-ready la mette od-category.js quando la seconda foto e' caricata (niente riquadro vuoto) */
  .od-pcard.alt-ready:hover .od-pcard__img:not(.od-pcard__img--alt) { opacity: 0; }
  .od-pcard.alt-ready:hover .od-pcard__img--alt { opacity: 1; transform: scale(1.03); }
  .od-pcard:not(.alt-ready):hover .od-pcard__img:not(.od-pcard__img--alt) { transform: scale(1.03); }
}
.od-pcard.is-soldout .od-pcard__img { opacity: 0.7; }

.od-pcard__badge {
  position: absolute;
  top: var(--od-space-2);
  left: var(--od-space-2);
  z-index: 2;
  padding: 4px 10px;
  border-radius: var(--od-radius-pill);
  background: var(--od-orange);
  font-size: var(--od-text-xs);
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  pointer-events: none;
}

/* Cuore wishlist (blockwishlist lo aggiunge in .thumbnail-container): in alto a destra, piccolo */
.product-miniature.od-pcard .wishlist-button-add {
  position: absolute;
  top: var(--od-space-2);
  right: var(--od-space-2);
  z-index: 3;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: none;
}
.product-miniature.od-pcard .wishlist-button-add i { font-size: 20px; color: var(--od-ink); }

#wrapper .product-miniature.od-pcard .product-description.od-pcard__body,
.product-miniature.od-pcard .product-description.od-pcard__body {
  position: static;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--od-space-1);
  width: auto;
  height: auto;
  padding: var(--od-space-3);
  background: transparent;
  text-align: left;
}
.product-miniature.od-pcard .product-description::after { display: none; }
.product-miniature.od-pcard .product-title.od-pcard__title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-family: var(--od-font);
  font-size: var(--od-text-md);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
}
#wrapper .product-miniature.od-pcard .product-title a,
.product-miniature.od-pcard .product-title a {
  font-size: inherit;
  font-weight: inherit;
  color: var(--od-ink);
  text-align: left;
  text-decoration: none;
}
.product-miniature.od-pcard .product-title a:hover { color: var(--od-orange-dark); }
.product-miniature.od-pcard .product-title a::after {
  /* tutta la card (tranne i bottoni e il cuore) porta alla scheda prodotto */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
@media (min-width: 1200px) {
  .product-miniature.od-pcard .product-title.od-pcard__title { font-size: var(--od-text-lg); }
}

.product-miniature.od-pcard .product-price-and-shipping.od-pcard__prices {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--od-space-2);
  font-weight: 600;
  text-align: left;
  color: var(--od-ink);
}
.product-miniature.od-pcard .od-pcard__price {
  font-size: var(--od-text-md);
  font-weight: 600;
  color: var(--od-ink);
}
.product-miniature.od-pcard .regular-price.od-pcard__old {
  font-size: var(--od-text-sm);
  font-weight: 400;
  color: var(--od-muted);
  text-decoration: line-through;
}
.product-miniature.od-pcard .product-list-reviews { margin: 0; text-align: left; }
.product-miniature.od-pcard .product-list-reviews:not(:has(.star-content, .star, .star-on)) { display: none; }

/* Bottone rapido "Scegli taglia" / "Aggiungi" + scelta taglia */
.od-pcard__quick {
  position: relative;
  z-index: 2; /* sopra il link a tutta card */
  margin-top: auto;
  padding-top: var(--od-space-2);
}
.od-pcard__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--od-space-2);
  width: 100%;
  min-height: var(--od-control-h);
  padding: 0 var(--od-space-3);
  border: 1.5px solid transparent;
  border-radius: var(--od-radius-pill);
  background: var(--od-surface);
  font-family: var(--od-font);
  font-size: var(--od-text-sm);
  font-weight: 600;
  line-height: 1.2;
  color: var(--od-teal);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--od-fast), color var(--od-fast), border-color var(--od-fast);
}
@media (hover: hover) {
  .od-pcard__btn:hover { background: var(--od-teal); color: #fff; text-decoration: none; }
  .od-pcard__size:hover { background: var(--od-ink); color: #fff; }
}
.od-pcard__btn:focus-visible { background: var(--od-teal); color: #fff; text-decoration: none; }
.od-pcard__btn[disabled] { background: transparent; border-color: var(--od-line); color: var(--od-muted); cursor: not-allowed; }
.od-pcard__btn.is-loading,
.od-pcard__size.is-loading { color: transparent !important; pointer-events: none; }
.od-pcard__btn.is-loading::after,
.od-pcard__size.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid var(--od-teal);
  border-right-color: transparent;
  border-radius: 50%;
  animation: od-spin 700ms linear infinite;
}
.od-pcard__btn.is-added,
.od-pcard__btn.is-added:hover { background: var(--od-teal); color: #fff; }
.od-pcard__quick.is-open > .od-pcard__btn { display: none; }
@keyframes od-spin { to { transform: rotate(360deg); } }

.od-pcard__picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--od-space-2);
}
.od-pcard__picker[hidden] { display: none; }
.od-pcard__size {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--od-control-h);
  padding: 0 var(--od-space-1);
  border: 1.5px solid var(--od-ink);
  border-radius: var(--od-radius-pill);
  background: var(--od-surface);
  font-family: var(--od-font);
  font-size: var(--od-text-sm);
  font-weight: 600;
  color: var(--od-ink);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--od-fast), color var(--od-fast);
}
.od-pcard__size:focus-visible { background: var(--od-ink); color: #fff; }
.od-pcard__size[disabled] {
  border-color: var(--od-line);
  background: transparent;
  color: var(--od-muted);
  text-decoration: line-through;
  cursor: not-allowed;
}
.od-pcard__size--wide { flex-basis: 100%; }
.od-pcard__msg {
  margin: 0;
  font-size: var(--od-text-xs);
  color: var(--od-orange-dark);
}
.od-pcard__msg:empty { display: none; }
.od-pcard__msg:not(:empty) { margin-top: var(--od-space-1); }

/* ------------------------------------------------------------------ paginazione: "Carica altri" */
.od-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--od-space-3);
  width: 100%;
  margin: var(--od-space-7) 0 var(--od-space-6);
}
.od-pagination__summary { margin: 0; }
.od-pagination__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  height: var(--od-control-h);
  padding: 0 var(--od-space-5);
  border-radius: var(--od-radius-pill);
  border: 2px solid var(--od-ink);
  background: var(--od-surface);
  color: var(--od-ink);
  font-weight: 700;
  font-size: var(--od-text-sm);
  cursor: pointer;
  transition: background-color var(--od-transition-fast, 150ms ease), color var(--od-transition-fast, 150ms ease);
}
.od-pagination__more:hover { background: var(--od-ink); color: #fff; }
.od-pagination__more:disabled { opacity: 0.6; cursor: default; background: var(--od-surface); color: var(--od-ink); }

/* ------------------------------------------------------------------ elenco vuoto */
.od-plp-empty {
  max-width: 520px;
  margin: var(--od-space-6) auto var(--od-space-7);
  text-align: center;
  font-size: var(--od-text-sm);
  color: var(--od-muted);
}
.od-plp-empty__title {
  margin: 0 0 var(--od-space-2);
  font-size: var(--od-text-xl);
  font-weight: 700;
  color: var(--od-ink);
}

/* Overlay di caricamento di ps_facetedsearch: piu' discreto */
.faceted-overlay { background: rgba(255, 255, 255, 0.45); }

@media (prefers-reduced-motion: reduce) {
  .od-fdrawer, .od-fdrawer-overlay, .od-facet__panel, .od-facet__caret, .od-pcard__img { transition: none !important; }
}

/* Card nei caroselli/griglie dei moduli (home "Prodotti popolari"): spazio fra le righe */
.featured-products .products > .js-product,
.product-accessories .products > .js-product { margin-bottom: var(--od-space-5); }