/*
 * Elenco prodotti SAF, grafica v2 (mockup approvato il 12/10/2026 sul modello delle immagini di
 * riferimento): colonna sinistra con "La tua auto" e i filtri in riquadri bianchi, testata della
 * categoria azzurra, una riga per prodotto (foto | dati | dati tecnici | riquadro acquisto grigio),
 * vista "griglia" a riquadri compatti. Importato da custom.css; colori dalle sue variabili.
 */

/* ---------- colonna sinistra ---------- */
.saf-side {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.saf-side__title {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--saf-navy);
}

.saf-sidecar,
.saf-sidebox,
.saf-side .ps-facetedsearch:not(.offcanvas),
.saf-side .left-block:not(.offcanvas) {
  padding: 0.9rem 1rem;
  background: #ffffff;
  border: 1px solid #d9dfe8;
  border-radius: 0.6rem;
}

.saf-side .ps-facetedsearch.left-block {
  margin-bottom: 0;
}

.saf-sidecar__card {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: center;
  padding: 0.6rem;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--saf-muted);
  background: var(--saf-panel);
  border-radius: 0.5rem;
}

.saf-sidecar__card img {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
  background: #ffffff;
  border-radius: 0.3rem;
}

.saf-sidecar__card > .material-icons {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  font-size: 2rem;
  color: var(--saf-blue);
  background: #ffffff;
  border-radius: 0.3rem;
}

.saf-sidecar__card b {
  display: block;
  color: var(--saf-navy);
}

.saf-sidecar__links {
  display: block;
  margin-top: 0.2rem;
  font-weight: 600;
}

.saf-sidecar__none {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  color: var(--saf-muted);
}

.saf-sidecar__btn {
  width: 100%;
}

.saf-sidelist {
  padding: 0;
  margin: 0;
  font-size: 0.85rem;
  list-style: none;
}

.saf-sidelist li {
  display: flex;
  gap: 0.4rem;
  justify-content: space-between;
  padding: 0.25rem 0;
}

.saf-sidelist__n {
  font-size: 0.75rem;
  color: #8a94a3;
}

/* filtri di ps_facetedsearch nei riquadri */
.saf-side #search-filters > .h6 {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--saf-navy);
  text-transform: none;
}

.saf-side .facet {
  padding: 0.6rem 0 0;
  margin: 0.4rem 0 0;
  border-top: 1px solid #eef1f5;
}

.saf-side .facet-title {
  margin: 0 0 0.3rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--saf-navy);
}

.saf-side .facet ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.saf-side .facet-label {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.15rem 0;
  margin: 0;
  font-size: 0.8rem;
}

.saf-side .facet-label .magnitude {
  color: #8a94a3;
}

.saf-side .facet-label .search-link {
  color: var(--saf-text);
  text-decoration: none;
}

.saf-side .facet-label.active .search-link {
  font-weight: 600;
}

.saf-side .clear-all-wrapper {
  order: 99;
  margin-top: 0.8rem;
}

.saf-side .js-search-filters-clear-all {
  width: 100%;
  font-weight: 600;
  color: var(--saf-navy);
  border: 1px solid #c9d2df;
  border-radius: 0.4rem;
}

.saf-side #search-filters {
  display: flex;
  flex-direction: column;
}

/* ---------- testata della categoria ---------- */
.saf-cathead {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  background: var(--saf-panel);
  border-radius: 0.6rem;
}

.saf-cathead--noimg {
  grid-template-columns: 1fr;
}

.saf-cathead__media {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  background: #ffffff;
  border-radius: 0.4rem;
}

.saf-cathead__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.saf-cathead .page-title-section {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--saf-navy);
}

.saf-cathead .page-title-section small {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--saf-blue);
}

.saf-cathead__text {
  margin: 0.3rem 0 0.8rem;
  color: var(--saf-muted);
}

.saf-cathead__adv {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding: 0;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--saf-navy);
  list-style: none;
}

.saf-cathead__adv li {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

.saf-cathead__adv .material-icons {
  font-size: 1.5rem;
  color: var(--saf-blue);
}

/* la pagina categoria di Hummingbird mette da sola titolo e descrizione: via il doppione */
.saf-catpage .sv-vehicle {
  display: none;
}

/* ---------- testata dell'elenco: numero prodotti, ordinamento, Lista/Griglia ---------- */
.saf-listtop {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  margin: 0.5rem 0 0.75rem;
}

.saf-listtop__count {
  font-size: 0.95rem;
  color: var(--saf-muted);
}

.saf-listtop__count b {
  color: var(--saf-navy);
}

.saf-listtop__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-left: auto;
}

.saf-listtop__label {
  font-size: 0.8rem;
  color: var(--saf-muted);
}

.saf-listtop__sort {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

.saf-listtop .form-select,
.saf-listtop .sort-by__select {
  width: auto;
  font-size: 0.85rem;
  border-color: #c9d2df;
}

.saf-view {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid #c9d2df;
  border-radius: 0.4rem;
}

.saf-view__btn {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2rem;
  padding: 0;
  color: var(--saf-muted);
  background: #ffffff;
  border: 0;
}

.saf-view__btn .material-icons {
  font-size: 1.2rem;
}

.saf-view__btn.is-active {
  color: #ffffff;
  background: var(--saf-blue);
}

/* ---------- lista: una riga per prodotto ---------- */
.products.saf-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}

.saf-row {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1.1fr) minmax(0, 1.1fr) 12.5rem;
  gap: 1rem;
  padding: 0.9rem;
  background: #ffffff;
  border: 1px solid #d9dfe8;
  border-radius: 0.6rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.saf-row > * {
  min-width: 0;
}

.saf-row:hover {
  border-color: var(--saf-blue);
  box-shadow: 0 6px 18px rgba(7, 22, 43, 0.08);
}

.saf-row__pic {
  position: relative;
}

.saf-row__pic .product-miniature__image-container {
  overflow: hidden;
  background: var(--saf-gray);
  border-radius: 0.4rem;
}

.saf-row__pic .product-miniature__image {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.saf-row__pic .product-flags {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  z-index: 1;
}

.saf-row__main {
  display: grid;
  gap: 0.35rem;
  align-content: start;
}

.saf-row__brand {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.8rem;
  color: var(--saf-muted);
}

.saf-row__logo {
  max-width: 6rem;
  height: 1.6rem;
  padding: 0.1rem 0.3rem;
  object-fit: contain;
  background: #ffffff;
  border: 1px solid #e4e8ef;
  border-radius: 0.25rem;
}

.saf-row__title,
.saf-row__title:hover {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--saf-navy);
  text-decoration: none;
}

.saf-row__title:hover {
  color: var(--saf-blue);
}

.saf-row__codes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0;
  font-size: 0.8rem;
  color: var(--saf-muted);
}

.saf-row__codes b {
  font-weight: 600;
  color: var(--saf-text);
}

.saf-row__codes span + span::before {
  margin: 0 0.4rem;
  color: #c9d2df;
  content: "·";
}

/* compatibilità con l'auto scelta: spunta verde tonda */
.saf-fit {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  width: fit-content;
  font-size: 0.78rem;
  font-weight: 700;
}

.saf-fit .material-icons {
  display: grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  font-size: 0.8rem;
  color: #ffffff;
  border-radius: 50%;
}

.saf-fit--yes {
  color: var(--saf-green);
}

.saf-fit--yes .material-icons {
  background: var(--saf-green);
}

.saf-fit--no {
  color: #b42318;
}

.saf-fit--no .material-icons {
  background: #b42318;
}

.saf-fit--uni {
  color: var(--saf-blue);
}

.saf-fit--uni .material-icons {
  background: var(--saf-blue);
}

.saf-row__oe {
  margin: 0;
  font-size: 0.78rem;
  color: #6b7686;
}

.saf-row__oe b {
  font-weight: 600;
  color: var(--saf-muted);
}

.saf-row__more {
  display: inline-flex;
  gap: 0.1rem;
  align-items: center;
  width: fit-content;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--saf-blue);
}

.saf-row__more .material-icons {
  font-size: 1.1rem;
}

/* colonna "Dati tecnici" */
.saf-row__data-title {
  margin: 0 0 0.3rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--saf-navy);
}

.saf-row__data dl {
  margin: 0;
  font-size: 0.75rem;
}

.saf-row__data dl div {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  padding: 0.2rem 0;
  border-bottom: 1px solid #eef1f5;
}

.saf-row__data dt {
  font-weight: 400;
  color: var(--saf-muted);
}

.saf-row__data dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

.saf-row__desc {
  margin: 0;
  font-size: 0.78rem;
  color: var(--saf-muted);
}

/* riquadro acquisto grigio */
.saf-row__buy {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: 0.8rem;
  background: var(--saf-gray);
  border-radius: 0.5rem;
}

.saf-row__price {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--saf-navy);
}

.saf-row__price small {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--saf-muted);
}

.saf-row__old {
  font-size: 0.8rem;
  color: #8a94a3;
}

.saf-row__old .product-miniature__regular-price {
  text-decoration: line-through;
}

.saf-stock {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.5rem;
  align-items: center;
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--saf-green);
}

.saf-stock .material-icons {
  grid-row: span 2;
  font-size: 1.4rem;
}

.saf-stock b {
  font-weight: 700;
}

.saf-stock small {
  color: var(--saf-muted);
}

.saf-stock--last_remaining_items {
  color: #b45309;
}

.saf-stock--unavailable {
  color: var(--saf-muted);
}

.saf-row__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.saf-row__form .quantity-button {
  flex: 0 0 auto;
}

.saf-row__form .quantity-button__group .form-control {
  width: 2.8rem;
  text-align: center;
}

.saf-row__add {
  display: inline-flex;
  flex: 1 1 auto;
  gap: 0.3rem;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
}

.saf-row__add .material-icons {
  font-size: 1.1rem;
}

/* pagine (pagina categoria per auto del modulo veicoli) */
.saf-pages .pagination {
  justify-content: center;
  margin-top: 1.2rem;
}

/* ---------- vista griglia: riquadri compatti, senza i dettagli ---------- */
.products.saf-list.saf-list--grid {
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.products.saf-list.saf-list--grid .saf-row {
  grid-template-columns: 1fr;
  gap: 0.6rem;
}

.saf-list--grid .saf-row__pic {
  max-width: 12rem;
  margin-inline: auto;
}

.saf-list--grid .saf-row__codes,
.saf-list--grid .saf-row__data,
.saf-list--grid .saf-row__oe,
.saf-list--grid .saf-row__more {
  display: none;
}

/* ---------- telefono e tablet ---------- */
@media (max-width: 991.98px) {
  .saf-row {
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: 0.8rem;
  }

  .saf-row__data,
  .saf-row__buy {
    grid-column: 1 / -1;
  }

  .saf-row__buy {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .saf-row__form {
    grid-column: 1 / -1;
  }

  .saf-cathead {
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: 0.9rem;
    padding: 0.9rem;
  }

  .saf-cathead .page-title-section {
    font-size: 1.3rem;
  }

  .saf-listtop__tools {
    margin-left: 0;
  }
}

@media (max-width: 767.98px) {
  /* colonna sinistra: solo "La tua auto"; i filtri si aprono dal pulsante Filtri */
  .saf-side {
    margin-bottom: 1rem;
  }

  .saf-side .ps-facetedsearch:not(.offcanvas) {
    display: none;
  }
}
/* SAF-ARANCIONE inizio: compatibile con condizioni (note di applicazione TecDoc) */
.saf-fit--conditional { color: #c2410c; }
.saf-fit--conditional .material-icons { background: #ea580c; color: #fff; }
.saf-row__conditions summary { color: #c2410c; cursor: pointer; }
/* SAF-ARANCIONE fine */