/* od-product.css — restyle novembre 2026, area PAGINA PRODOTTO (riferimento: Malva/Dawn).
 * Token in od-base.css. Tutto e' limitato a body#product (id di Classic per la scheda prodotto).
 * Markup: templates/catalog/product.tpl + _partials/product-*.tpl, _partials/trustpilot-reviews.tpl,
 * modules/blockreassurance/views/templates/hook/displayBlockProduct.tpl. Comportamento: od-product.js.
 *
 * Indice: 1 breadcrumb · 2 layout · 3 galleria · 4 lightbox · 5 titolo/prezzo/rating · 6 taglie
 *         7 quantita'/carrello/wishlist · 8 info aggiuntive (condividi, Valen) · 9 rassicurazioni
 *         10 sezioni richiudibili · 11 accessori · 12 recensioni
 */

/* ---------- 1. Breadcrumb: piccolo e ordinato sopra il prodotto ---------- */
#product #wrapper { padding-top: var(--od-space-4); }
#product #wrapper .breadcrumb {
  margin: 0 0 var(--od-space-4);
  padding: 0;
  background: transparent;
  font-size: var(--od-text-xs);
  color: var(--od-muted);
}
#product #wrapper .breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--od-space-1) 0; margin: 0; padding: 0; }
#product #wrapper .breadcrumb li { display: inline-flex; align-items: center; }
#product #wrapper .breadcrumb li::after { content: "/"; margin: 0 var(--od-space-2); color: var(--od-line); }
#product #wrapper .breadcrumb li:last-child::after { content: none; }
#product #wrapper .breadcrumb a { color: var(--od-muted); }
#product #wrapper .breadcrumb a:hover { color: var(--od-orange-dark); }
#product #wrapper .breadcrumb li:last-child span { color: var(--od-ink); }

/* ---------- 2. Layout ---------- */
/* Classic: #product #content { max-width: 452px; margin: 0 auto } -> tolto */
#product #content { max-width: none; margin: 0; position: relative; }

.od-pdp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--od-space-5);
  margin: 0;
}
.od-pdp__media,
.od-pdp__info { min-width: 0; }

/* 768-991: una colonna, info centrata e non piu' larga di 640px */
@media (min-width: 768px) {
  .od-pdp__grid { row-gap: var(--od-space-6); }
  .od-pdp__info { width: 100%; max-width: 640px; margin: 0 auto; }
}

/* >=992: galleria ~58% a sinistra, info ~42% sticky a destra (scorre al suo interno se piu' alta) */
@media (min-width: 992px) {
  .od-pdp__grid {
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    column-gap: var(--od-space-6);
    align-items: start;
  }
  .od-pdp__info {
    max-width: none;
    margin: 0;
    position: sticky;
    top: calc(var(--od-header-h) + 24px);
    max-height: calc(100vh - var(--od-header-h) - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 0 var(--od-space-2) var(--od-space-4) var(--od-space-1);
  }
}
@media (min-width: 1200px) {
  .od-pdp__grid { column-gap: var(--od-space-7); }
}

/* ---------- 3. Galleria ---------- */
.od-gallery { position: relative; }
.od-gallery__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--od-space-3);
}
.od-gallery__item { margin: 0; }
/* prima foto a tutta larghezza; l'ultima a tutta larghezza se resta sola nella riga */
.od-gallery__item:first-child,
.od-gallery__item:last-child:nth-child(even) { grid-column: 1 / -1; }
.od-gallery__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--od-surface);
  border-radius: var(--od-radius-lg);
  overflow: hidden;
  cursor: zoom-in;
}
.od-gallery__zoom:focus-visible { outline: 2px solid var(--od-orange); outline-offset: 2px; }
.od-gallery__zoom picture { display: block; }
.od-gallery__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  transition: transform 500ms var(--od-ease);
}
@media (hover: hover) {
  .od-gallery__zoom:hover .od-gallery__img { transform: scale(1.03); }
}
.od-gallery__item--empty { border-radius: var(--od-radius-lg); overflow: hidden; background: var(--od-surface); }
.od-gallery__counter { display: none; }

/* bollini (es. "Non disponibile") sopra la prima foto */
#product .od-pdp__media .product-flags.js-product-flags { top: var(--od-space-3); left: var(--od-space-3); width: auto; max-width: calc(100% - 2 * var(--od-space-3)); }
#product .od-pdp__media .product-flags .product-flag { margin: 0; min-height: 0; min-width: 0; font-size: var(--od-text-xs); letter-spacing: 0; text-transform: none; padding: 4px 12px; box-shadow: none; }
#product .od-pdp__media .product-flags .product-flag.out_of_stock { background: var(--od-ink); }

/* Mobile: slider a tutta larghezza con scroll-snap e contatore "1 / N" */
@media (max-width: 767.98px) {
  .od-gallery { margin-inline: calc(50% - 50vw); }
  .od-gallery__track {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Esplicito: lo scorrimento orizzontale a dito deve restare possibile anche se il
       bottone-zoom (od-gallery__zoom) copre l'intera slide — senza questo, su alcuni
       browser mobili un trascinamento breve viene letto come tap sul bottone invece che
       come swipe (owner feedback: "non posso scrollare la foto"). */
    touch-action: pan-x;
  }
  .od-gallery__track::-webkit-scrollbar { display: none; }
  .od-gallery__item { flex: 0 0 100%; scroll-snap-align: start; }
  .od-gallery__zoom { border-radius: 0; cursor: pointer; touch-action: pan-x; }
  .od-gallery__counter {
    display: block;
    position: absolute;
    left: 50%;
    bottom: var(--od-space-3);
    transform: translateX(-50%);
    margin: 0;
    padding: 2px 10px;
    border-radius: var(--od-radius-pill);
    background: rgba(255, 255, 255, 0.92);
    color: var(--od-ink);
    font-size: var(--od-text-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
  }
  /* Frecce prev/next (come Malva: "prev/next arrow buttons" sotto lo slider mobile) —
     alternativa sempre funzionante allo swipe, stesso stile pillola del contatore. */
  .od-gallery__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: var(--od-space-3);
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--od-ink);
    box-shadow: 0 2px 6px rgba(41, 43, 44, 0.18);
    cursor: pointer;
  }
  .od-gallery__arrow--prev { left: var(--od-gutter); }
  .od-gallery__arrow--next { right: var(--od-gutter); }
  .od-gallery__arrow:disabled { opacity: 0.35; cursor: default; }
  #product .od-pdp__media .product-flags.js-product-flags { left: var(--od-gutter); }
}
@media (min-width: 768px) {
  .od-gallery__arrow { display: none; }
}

/* ---------- 4. Lightbox ---------- */
.od-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2147483100; /* sopra header e widget Valen */
  background: var(--od-surface);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.od-lightbox[hidden] { display: none; }
.od-lightbox__track {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--od-space-7) var(--od-space-4);
  display: grid;
  gap: var(--od-space-4);
}
.od-lightbox__track img { display: block; width: 100%; height: auto; border-radius: var(--od-radius-lg); background: var(--od-surface-alt); }
.od-lightbox__close {
  position: fixed;
  top: var(--od-space-4);
  right: var(--od-space-4);
  z-index: 1;
  width: var(--od-control-h);
  height: var(--od-control-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--od-line);
  border-radius: var(--od-radius-pill);
  background: var(--od-surface);
  color: var(--od-ink);
  cursor: pointer;
}
.od-lightbox__close:hover { border-color: var(--od-ink); }

/* ---------- 5. Titolo, prezzo, rating, descrizione breve ---------- */
#product .od-pdp__title {
  margin: 0 0 var(--od-space-2);
  font-size: var(--od-text-2xl);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--od-ink);
}
#product .od-pdp__info .product-prices {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--od-space-1) var(--od-space-3);
  margin: 0 0 var(--od-space-2);
}
#product .od-pdp__info .product-discount { order: 2; margin: 0; }
#product .od-pdp__info .product-discount .regular-price { margin: 0; font-size: var(--od-text-md); color: var(--od-muted); text-decoration: line-through; }
#product .od-pdp__info .product-price {
  order: 1;
  display: block;
  margin: 0;
  padding: 0;
  line-height: 1.2;
  color: var(--od-orange);
}
#product .od-pdp__info .product-price .current-price { display: flex; align-items: baseline; gap: var(--od-space-2); }
#product .od-pdp__info .current-price-value { font-size: var(--od-text-xl); font-weight: 700; color: var(--od-orange); }
#product .od-pdp__info .product-price .discount {
  margin: 0;
  padding: 2px 10px;
  border-radius: var(--od-radius-pill);
  background: var(--od-teal);
  color: #fff;
  font-size: var(--od-text-xs);
  font-weight: 600;
  text-transform: none;
}
#product .od-pdp__info .tax-shipping-delivery-label {
  order: 3;
  margin: 0;
  font-size: var(--od-text-xs);
  color: var(--od-muted);
}
#product .od-pdp__info .product-unit-price,
#product .od-pdp__info .product-without-taxes,
#product .od-pdp__info .product-pack-price,
#product .od-pdp__info .price-ecotax { order: 4; flex-basis: 100%; margin: 0; font-size: var(--od-text-xs); color: var(--od-muted); }

.od-pdp__rating {
  display: inline-flex;
  align-items: center;
  gap: var(--od-space-2);
  margin: 0 0 var(--od-space-4);
  font-size: var(--od-text-sm);
  color: var(--od-ink);
}
.od-pdp__rating:hover, .od-pdp__rating:focus { color: var(--od-ink); text-decoration: underline; text-underline-offset: 3px; }
.od-pdp__stars { color: #00b67a; letter-spacing: 1px; font-size: var(--od-text-md); line-height: 1; }

#product .product-information { font-size: var(--od-text-md); color: var(--od-ink); }
#product .od-pdp__short { margin: 0; color: var(--od-muted); font-size: var(--od-text-sm); }
#product .od-pdp__short:empty { display: none; }
#product .od-pdp__short p { margin: 0 0 var(--od-space-2); }

/* ---------- 6. Taglie a pillole ---------- */
#product .product-variants > .product-variants-item.od-variant { margin: var(--od-space-4) 0; padding: 0; border: 0; min-width: 0; }
.od-variant__legend {
  display: block;
  width: 100%;
  margin: 0 0 var(--od-space-3);
  padding: 0;
  border: 0;
  font-size: var(--od-text-sm);
  font-weight: 600;
  color: var(--od-ink);
}
.od-variant__value { font-weight: 400; color: var(--od-muted); }
.od-pills { display: flex; flex-wrap: wrap; gap: var(--od-space-2) var(--od-space-3); }
.od-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  min-height: var(--od-control-h);
  margin: 0;
  padding: var(--od-space-2) var(--od-space-5);
  border: 1px solid var(--od-line);
  border-radius: var(--od-radius-pill);
  background: var(--od-surface);
  color: var(--od-ink);
  font-size: var(--od-text-sm);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--od-fast), border-color var(--od-fast), color var(--od-fast);
}
@media (hover: hover) { .od-pill:hover { border-color: var(--od-ink); } }
.od-pill__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
/* Classic: .input-radio:checked+span { border:2px solid } -> niente bordo sul testo */
.od-pill .od-pill__input + .od-pill__text { border: 0; }
.od-pill:has(.od-pill__input:focus-visible) { outline: 2px solid var(--od-orange); outline-offset: 2px; }
.od-pill.is-selected,
.od-pill:has(.od-pill__input:checked) {
  background: var(--od-teal);
  border-color: var(--od-teal);
  color: #fff;
}
/* esaurita: barrata in diagonale (come Malva), testo attenuato; resta selezionabile */
.od-pill.is-soldout { color: var(--od-muted); background-image: linear-gradient(to top left, transparent calc(50% - 0.5px), var(--od-line) calc(50% - 0.5px), var(--od-line) calc(50% + 0.5px), transparent calc(50% + 0.5px)); }
.od-pill.is-soldout .od-pill__text { text-decoration: line-through; }
.od-pill.is-soldout.is-selected,
.od-pill.is-soldout:has(.od-pill__input:checked) {
  color: rgba(255, 255, 255, 0.85);
  background-image: linear-gradient(to top left, transparent calc(50% - 0.5px), rgba(255, 255, 255, 0.6) calc(50% - 0.5px), rgba(255, 255, 255, 0.6) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
/* gruppi colore: pallini */
.od-swatches { display: flex; flex-wrap: wrap; gap: var(--od-space-2); margin: 0; padding: 0; list-style: none; }
#product .product-variants > .product-variants-item .od-swatches li { margin: 0; }

/* ---------- 7. Quantita', carrello, wishlist ---------- */
#product .product-actions .product-add-to-cart { margin-top: var(--od-space-4); }
#product .product-quantity.od-buy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--od-space-2);
  flex-wrap: nowrap;
}
#product .od-buy .qty,
#product .od-buy .add { float: none; display: block; margin: 0; }
#product .od-buy__wish:empty { display: none; }

/* stepper: TouchSpin di Classic (bottoni impilati a destra) -> pillola [-] n [+] */
#product .od-buy .bootstrap-touchspin {
  display: flex;
  float: none;
  width: auto;
  height: 48px;
  align-items: stretch;
  border: 1px solid var(--od-line);
  border-radius: var(--od-radius-pill);
  background: var(--od-surface);
  overflow: hidden;
  box-shadow: none;
}
#product .od-buy .bootstrap-touchspin .input-group-addon { display: none !important; }
#product .od-buy .bootstrap-touchspin .input-group-btn-vertical { display: contents; }
#product .od-buy .bootstrap-touchspin #quantity_wanted {
  order: 2;
  float: none;
  width: 36px;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: var(--od-text-md);
  font-weight: 600;
  color: var(--od-ink);
  -moz-appearance: textfield;
  appearance: textfield;
}
#product .od-buy #quantity_wanted::-webkit-outer-spin-button,
#product .od-buy #quantity_wanted::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#product .od-buy .bootstrap-touchspin .btn-touchspin {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--od-ink);
}
#product .od-buy .bootstrap-touchspin .btn-touchspin:hover { background: var(--od-surface-alt); }
#product .od-buy .bootstrap-touchspin .bootstrap-touchspin-down { order: 1; margin-top: 0; }
#product .od-buy .bootstrap-touchspin .bootstrap-touchspin-up { order: 3; }
#product .od-buy .bootstrap-touchspin .btn-touchspin i { position: static; font-size: 18px; line-height: 1; }
#product .od-buy .bootstrap-touchspin .touchspin-up::after { content: "\E145"; }   /* material: add */
#product .od-buy .bootstrap-touchspin .touchspin-down::after { content: "\E15B"; } /* material: remove */
/* prima che TouchSpin parta (o se non parte): input semplice a pillola */
#product .od-buy .qty > #quantity_wanted {
  width: 72px;
  height: 48px;
  border: 1px solid var(--od-line);
  border-radius: var(--od-radius-pill);
  text-align: center;
}

/* Stesso stepper sulla pagina carrello (checkout/_partials/cart-detailed-product-line.tpl,
   mai restyled finora): TouchSpin genera lo stesso markup del prodotto (.bootstrap-touchspin,
   .btn-touchspin, .touchspin-up/-down) ma dentro ".qty" semplice, non ".od-buy", e l'input ha
   classe .js-cart-line-product-quantity invece di id #quantity_wanted — prima d'ora restava con
   lo stile grezzo di Classic (spinner nativo del browser, owner feedback: "fatto male"). */
#cart .qty .bootstrap-touchspin {
  display: flex;
  float: none;
  width: auto;
  height: 40px;
  align-items: stretch;
  border: 1px solid var(--od-line);
  border-radius: var(--od-radius-pill);
  background: var(--od-surface);
  overflow: hidden;
  box-shadow: none;
}
#cart .qty .bootstrap-touchspin .input-group-addon { display: none !important; }
#cart .qty .bootstrap-touchspin .input-group-btn-vertical { display: contents; }
#cart .qty .bootstrap-touchspin .js-cart-line-product-quantity {
  order: 2;
  float: none;
  width: 32px;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: var(--od-text-sm);
  font-weight: 600;
  color: var(--od-ink);
  -moz-appearance: textfield;
  appearance: textfield;
}
#cart .qty .js-cart-line-product-quantity::-webkit-outer-spin-button,
#cart .qty .js-cart-line-product-quantity::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#cart .qty .bootstrap-touchspin .btn-touchspin {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--od-ink);
}
#cart .qty .bootstrap-touchspin .btn-touchspin:hover { background: var(--od-surface-alt); }
#cart .qty .bootstrap-touchspin .bootstrap-touchspin-down { order: 1; margin-top: 0; }
#cart .qty .bootstrap-touchspin .bootstrap-touchspin-up { order: 3; }
#cart .qty .bootstrap-touchspin .btn-touchspin i { position: static; font-size: 16px; line-height: 1; }
#cart .qty .bootstrap-touchspin .touchspin-up::after { content: "\E145"; }   /* material: add */
#cart .qty .bootstrap-touchspin .touchspin-down::after { content: "\E15B"; } /* material: remove */
/* prima che TouchSpin parta (o se non parte): input semplice a pillola */
#cart .qty > .js-cart-line-product-quantity {
  width: 56px;
  height: 40px;
  border: 1px solid var(--od-line);
  border-radius: var(--od-radius-pill);
  text-align: center;
}

#product .od-buy__btn {
  width: 100%;
  min-height: 48px;
  height: 48px;
  padding: 0 var(--od-space-5);
  border-radius: var(--od-radius-pill);
  font-size: var(--od-text-md);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: none;
}
#product .od-buy__btn:hover { transform: none; box-shadow: none; }
#product .od-buy__btn:disabled,
#product .od-buy__btn.disabled {
  opacity: 1;
  background: #ececec;
  border-color: #ececec;
  color: var(--od-muted);
  cursor: not-allowed;
}

/* cuore wishlist (blockwishlist, hook displayProductActions): tondo 48px dentro la riga */
#product .od-buy__wish .wishlist-button-add,
#product .od-buy__wish .wishlist-button-product {
  width: 48px;
  height: 48px;
  margin: 0;
  border: 1px solid var(--od-line);
  border-radius: var(--od-radius-pill);
  background: var(--od-surface);
  box-shadow: none;
}
#product .od-buy__wish .wishlist-button-add:hover { border-color: var(--od-ink); }
#product .od-buy__wish .wishlist-button-add i { color: var(--od-ink); }

#product .od-availability { display: block; margin-top: var(--od-space-2); font-size: var(--od-text-sm); font-weight: 500; }
#product .od-availability:empty { display: none; }
#product .od-availability--unavailable { color: var(--od-muted); }
#product .od-availability--last_remaining_items { color: var(--od-orange-dark); }
#product .od-availability--available { color: var(--od-teal); }
#product .product-minimal-quantity { margin: var(--od-space-2) 0 0; font-size: var(--od-text-xs); color: var(--od-muted); }
#product .product-minimal-quantity:empty { display: none; }

@media (max-width: 399.98px) {
  #product .od-buy .bootstrap-touchspin .btn-touchspin { width: 32px; }
  #product .od-buy .bootstrap-touchspin #quantity_wanted { width: 28px; }
  #product .od-buy__btn { padding: 0 var(--od-space-3); font-size: var(--od-text-sm); }
}

/* ---------- 8. Info aggiuntive: blocco Valen, condivisione ---------- */
#product .product-additional-info { display: flex; flex-direction: column; }
/* il blocco Valen (abbinamenti) subito sotto il carrello, con respiro; interni non toccati */
#product #valen_bundle_pdp { order: -1; }
#product #valen_bundle_pdp:not(:empty) { margin: var(--od-space-5) 0 var(--od-space-2); }
#product .social-sharing {
  display: flex;
  align-items: center;
  gap: var(--od-space-2);
  margin: var(--od-space-4) 0 0;
  font-size: var(--od-text-sm);
  color: var(--od-muted);
}
#product .social-sharing > span { margin-right: var(--od-space-1); }
#product .social-sharing ul { display: flex; gap: var(--od-space-1); margin: 0; padding: 0; }
#product .social-sharing li {
  width: 32px;
  height: 32px;
  margin: 0;
  background-color: transparent;
  background-size: 22px 22px;
  background-position: center;
  border: 1px solid var(--od-line);
  box-shadow: none;
}
#product .social-sharing li:hover { border-color: var(--od-ink); }

/* ---------- 9. Rassicurazioni: elenco compatto, una riga per voce (override blockreassurance) ---------- */
.od-reassure {
  list-style: none;
  margin: var(--od-space-5) 0 0;
  padding: var(--od-space-4) 0;
  display: grid;
  gap: var(--od-space-2);
  border-top: 1px solid var(--od-line);
}
.od-reassure__item { display: flex; align-items: center; gap: var(--od-space-3); min-width: 0; }
.od-reassure__icon { flex: 0 0 auto; display: inline-flex; color: var(--od-teal); }
.od-reassure__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--od-space-2); min-width: 0; line-height: 1.4; }
.od-reassure__title { font-size: var(--od-text-sm); font-weight: 600; color: var(--od-ink); }
a.od-reassure__title:hover { color: var(--od-orange-dark); }
.od-reassure__desc { font-size: var(--od-text-sm); color: var(--od-muted); }

/* ---------- 10. Descrizione e dettagli: sezioni richiudibili (+/-) ---------- */
.od-acc-group { border-top: 1px solid var(--od-line); }
.od-acc { border-bottom: 1px solid var(--od-line); }
.od-acc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--od-space-3);
  min-height: var(--od-control-h);
  padding: var(--od-space-4) 0;
  list-style: none;
  cursor: pointer;
  font-size: var(--od-text-md);
  font-weight: 600;
  color: var(--od-ink);
}
.od-acc__summary::-webkit-details-marker { display: none; }
.od-acc__summary::marker { content: ""; }
@media (hover: hover) { .od-acc__summary:hover { color: var(--od-orange-dark); } }
.od-acc__icon { position: relative; flex: 0 0 auto; width: 12px; height: 12px; }
.od-acc__icon::before,
.od-acc__icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(50% - 0.75px);
  width: 12px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 250ms var(--od-ease), opacity 250ms var(--od-ease);
}
.od-acc__icon::after { transform: rotate(90deg); }
.od-acc[open] .od-acc__icon::after { transform: rotate(0deg); opacity: 0; }
.od-acc__body { padding: 0 0 var(--od-space-6); font-size: var(--od-text-sm); line-height: 1.6; color: var(--od-ink); }
.od-acc__body .product-description,
.od-acc__body .product-description li { color: var(--od-ink); font-size: var(--od-text-sm); }
/* .product-description e' anche una classe delle card di Classic (sfondo bianco, filetto ::after) */
#product .od-pdp__info .product-description { padding: 0; background: transparent; }
#product .od-pdp__info .product-description::after { content: none; }
.od-acc__body .product-description p { margin: 0 0 var(--od-space-3); }
.od-acc__body .product-description ul { margin: 0 0 var(--od-space-3); padding-left: 1.2em; }
.od-acc__body .product-description li { list-style: disc; margin-bottom: var(--od-space-1); }
/* dettagli (#product-details, product-details.tpl di Classic: era una tab "fade") */
#product .od-acc #product-details { display: block; opacity: 1; }
#product .od-acc #product-details > div:not(:empty),
#product .od-acc #product-details .product-features { margin: 0 0 var(--od-space-3); }
#product .od-acc #product-details .label { display: inline-block; min-width: 120px; margin: 0; text-align: left; font-weight: 600; color: var(--od-muted); font-size: var(--od-text-sm); }
#product .od-acc .product-features { margin-left: 0; }
#product .od-acc .product-features > .h6 { margin: 0 0 var(--od-space-2); font-size: var(--od-text-sm); font-weight: 600; text-transform: none; }
#product .od-acc .product-features > dl.data-sheet { margin: 0; gap: 0; }
#product .od-acc .product-features > dl.data-sheet dt.name,
#product .od-acc .product-features > dl.data-sheet dd.value {
  flex: 1 0 40%;
  min-height: 0;
  margin: 0;
  padding: var(--od-space-2) 0;
  border-bottom: 1px solid var(--od-line);
  background: transparent;
  text-transform: none;
  font-weight: 400;
}
#product .od-acc .product-features > dl.data-sheet dt.name { font-weight: 600; color: var(--od-muted); }
#product .od-acc .product-manufacturer img { max-height: 48px; width: auto; }

/* ---------- 11. Accessori ("Ti potrebbe piacere") ---------- */
.od-pdp__accessories { margin-top: var(--od-space-8); }
.od-pdp__section-title,
#product .od-reviews__title {
  margin: 0 0 var(--od-space-4);
  font-size: var(--od-text-xl);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--od-ink);
}

/* ---------- 12. Recensioni Trustpilot ---------- */
.od-reviews {
  margin: var(--od-space-8) 0 var(--od-space-6);
  scroll-margin-top: calc(var(--od-header-h) + 24px);
}
.od-reviews__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--od-space-3) var(--od-space-5);
  margin-bottom: var(--od-space-5);
}
#product .od-reviews__title { margin-bottom: var(--od-space-2); }
.od-reviews__score { display: flex; flex-wrap: wrap; align-items: center; gap: var(--od-space-2); margin: 0; font-size: var(--od-text-sm); color: var(--od-muted); }
.od-reviews__score strong { font-size: var(--od-text-lg); font-weight: 700; color: var(--od-ink); }
.od-reviews__stars { color: #00b67a; letter-spacing: 1px; font-size: var(--od-text-md); line-height: 1; }
.od-reviews__star-off { color: var(--od-line); }
.od-reviews__all { font-size: var(--od-text-sm); font-weight: 600; color: var(--od-orange-dark); }
.od-reviews__all:hover { text-decoration: underline; text-underline-offset: 3px; }
.od-reviews__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--od-space-4);
}
.od-reviews__card {
  display: flex;
  flex-direction: column;
  gap: var(--od-space-3);
  padding: var(--od-space-5);
  border-radius: var(--od-radius-lg);
  background: var(--od-surface);
}
.od-reviews__text { flex: 1 1 auto; margin: 0; font-size: var(--od-text-sm); line-height: 1.55; color: var(--od-ink); }
.od-reviews__author { margin: 0; font-size: var(--od-text-xs); color: var(--od-muted); }
@media (max-width: 1199.98px) {
  .od-reviews__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* mobile: fila a scorrimento orizzontale, la card successiva si intravede */
@media (max-width: 767.98px) {
  .od-reviews { margin-top: var(--od-space-7); }
  .od-reviews__list {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(50% - 50vw);
    padding: 0 var(--od-gutter);
    scroll-padding: 0 var(--od-gutter);
  }
  .od-reviews__list::-webkit-scrollbar { display: none; }
  .od-reviews__card { flex: 0 0 82%; scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  .od-gallery__img, .od-acc__icon::before, .od-acc__icon::after, .od-pill { transition: none; }
  .od-gallery__zoom:hover .od-gallery__img { transform: none; }
}

/* ---------- 13. Commenti nativi (productcomments) nascosti ----------
 * "Commenti (0) - Ancora nessuna recensione" contraddiceva le recensioni Trustpilot.
 * Il modulo resta agganciato a displayFooterProduct perche' quel template definisce le
 * variabili JS (productCommentMandatoryMessage...) che il suo post-comment.js, caricato
 * comunque in pagina, si aspetta: togliendo l'hook si avrebbe un errore JS. Si nascondono
 * solo l'intestazione e la lista; le modali restano chiuse (nessun bottone le apre piu':
 * l'hook displayProductAdditionalInfo del modulo e' stato tolto). */
#product #product-comments-list-header,
#product #empty-product-comment,
#product #product-comments-list,
#product #product-comments-list-footer { display: none !important; }
