/*
Theme Name:   Negozio Child
Theme URI:    https://example.com
Description:  Tema child per archivio prodotti in lista con filtri a faccette
Author:       Marco
Template:     storefront
Version:      7.0.0
Text Domain:  negozio-child
*/

/* ============================================================
   1. TOKEN — cambia solo questi valori per ri-brandizzare tutto
   ============================================================ */
:root {
  --ms-ink:        #14161a;   /* testo principale */
  --ms-ink-soft:   #5b6270;   /* testo secondario */
  --ms-line:       #e3e6ea;   /* bordi e separatori */
  --ms-bg:         #ffffff;
  --ms-accent:     #e03131;   /* CTA principale */
  --ms-accent-dk:  #c92a2a;   /* CTA hover */
  --ms-promo:      #e03131;   /* badge sconto + prezzo scontato */
  --ms-good:       #0e7a3c;   /* disponibilità, spedizione gratuita */
  --ms-star:       #f5a623;

  --ms-radius:     10px;
  --ms-radius-pill: 999px;
  --ms-gap:        24px;

  --ms-font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --ms-font-body:    "Public Sans", system-ui, -apple-system, sans-serif;
}

body.woocommerce,
body.woocommerce-page {
  font-family: var(--ms-font-body);
  color: var(--ms-ink);
}

/* ============================================================
   2. GRIGLIA DI PAGINA — sidebar filtri + contenuto
   ============================================================ */
.woocommerce-page #primary,
.woocommerce-page #secondary {
  float: none;
  width: auto;
  margin: 0;
}

/* UNICO layout catalogo con Grid: header a tutta larghezza in cima,
   filtri e prodotti su due colonne sotto. Il .col-full è già
   limitato a 1260px e centrato → margini bianchi ai lati. */
.woocommerce-page #content > .col-full {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  grid-template-areas:
    "header header"
    "filters products";
  column-gap: 40px;
  row-gap: 8px;
  align-items: start;
}

.woocommerce-page #content > .col-full > .ms-catalog-header {
  grid-area: header;
  min-width: 0;
}

.woocommerce-page #content > .col-full > .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
}

#secondary {
  grid-area: filters;
  min-width: 0;
}

/* Sidebar senza widget: layout a colonna singola */
.woocommerce-page #content > .col-full:not(:has(#secondary .widget)) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "header"
    "products";
}

#secondary:empty,
#secondary:not(:has(.widget)) {
  display: none;
}

#primary {
  grid-area: products;
  min-width: 0;
}

@media (max-width: 900px) {
  /* Filtri in drawer: griglia a colonna singola, header sopra */
  .woocommerce-page #content > .col-full {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "header"
      "products" !important;
    row-gap: 0;
  }
}

/* ============================================================
   3. SIDEBAR FILTRI
   ============================================================ */
#secondary .widget {
  padding: 0 0 22px;
  margin: 0 0 22px;
  border-bottom: 1px solid var(--ms-line);
}

#secondary .widget:last-child {
  border-bottom: 0;
}

#secondary .widget-title,
#secondary .widgettitle {
  font-family: var(--ms-font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: var(--ms-ink);
  text-transform: none;
}

/* Voci di filtro con checkbox e contatore allineato a destra */
#secondary .widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#secondary .widget ul li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 14px;
  line-height: 1.3;
}

#secondary .widget ul li a {
  flex: 1;
  color: var(--ms-ink);
  text-decoration: none;
}

#secondary .widget ul li a:hover {
  color: var(--ms-accent);
}

/* Il conteggio che WooCommerce stampa come <span class="count">(8)</span> */
#secondary .widget ul li .count {
  color: var(--ms-ink-soft);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* Finto checkbox davanti a ogni voce del layered nav */
.widget_layered_nav ul li a::before,
.widget_rating_filter ul li a::before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-right: 10px;
  vertical-align: -3px;
  border: 1.5px solid #b9bfc9;
  border-radius: 4px;
  background: #fff;
}

.widget_layered_nav ul li.chosen a::before,
.widget_rating_filter ul li.chosen a::before {
  border-color: var(--ms-accent);
  background: var(--ms-accent)
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}

/* Chip dei filtri attivi (widget "Filtri attivi") */
.widget_layered_nav_filters ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.widget_layered_nav_filters ul li {
  padding: 0 !important;
}

.widget_layered_nav_filters ul li a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: var(--ms-radius-pill);
  background: var(--ms-ink);
  color: #fff !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.widget_layered_nav_filters ul li a::after {
  content: "✕";
  font-size: 11px;
  opacity: 0.75;
}

/* Slider di prezzo */
.price_slider_wrapper .ui-slider {
  height: 4px;
  background: var(--ms-line);
  border-radius: 2px;
  margin: 18px 0 22px;
}

.price_slider_wrapper .ui-slider .ui-slider-range {
  background: var(--ms-accent);
}

.price_slider_wrapper .ui-slider .ui-slider-handle {
  width: 16px;
  height: 16px;
  top: -6px;
  border: 3px solid var(--ms-accent);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.price_slider_amount .price_label {
  font-size: 13px;
  color: var(--ms-ink-soft);
}

.price_slider_amount .button {
  border-radius: var(--ms-radius-pill);
  background: var(--ms-ink);
  color: #fff;
  font-size: 13px;
  padding: 8px 18px;
}

/* ============================================================
   4. TESTATA ARCHIVIO
   ============================================================ */
.woocommerce-products-header__title {
  font-family: var(--ms-font-display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.term-description {
  max-width: 62ch;
  color: var(--ms-ink-soft);
  font-size: 15px;
  line-height: 1.55;
}

.ms-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--ms-line);
  margin-bottom: 4px;
}

.ms-toolbar .woocommerce-result-count {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.ms-toolbar .woocommerce-ordering {
  margin: 0;
}

.ms-toolbar select {
  border: 1px solid var(--ms-line);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  background: #fff;
}

/* ============================================================
   5. CARD PRODOTTO — 3 colonne: media / info / acquisto
   ============================================================ */
ul.products.ms-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}

ul.products.ms-list li.product {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 26px 0;
  border-bottom: 1px solid var(--ms-line);
  display: grid;
  grid-template-columns: minmax(110px, 210px) minmax(170px, 1fr) minmax(185px, 250px);
  gap: 20px;
  align-items: start;
}

/* Senza questo i figli della griglia non si comprimono e il testo va a capo
   una lettera per riga */
ul.products.ms-list li.product > * {
  min-width: 0;
}

.ms-card__title,
.ms-points ul li {
  overflow-wrap: anywhere;
}

@media (max-width: 820px) {
  ul.products.ms-list li.product {
    grid-template-columns: minmax(100px, 170px) minmax(0, 1fr);
  }
  .ms-card__buy {
    grid-column: 1 / -1;
    border-top: 1px solid var(--ms-line);
    padding-top: 16px;
  }
}

/* --- colonna media --- */
.ms-card__media {
  position: relative;
  text-align: center;
}

.ms-card__media img {
  width: 100%;
  height: auto;
  margin: 0;
  mix-blend-mode: multiply; /* pulisce i PNG con fondo bianco */
}

.ms-badge-top {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: var(--ms-ink);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 6px 11px;
  border-radius: 6px;
}

.ms-repair {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--ms-ink-soft);
}

.ms-repair__score {
  background: #56b336;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  padding: 3px 7px;
  border-radius: 5px;
}

/* --- colonna info --- */
.ms-card__title {
  font-family: var(--ms-font-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}

.ms-card__title a {
  color: var(--ms-ink);
  text-decoration: none;
}

.ms-card__title a:hover {
  color: var(--ms-accent);
}

.ms-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  margin-bottom: 16px;
}

.ms-rating .star-rating {
  color: var(--ms-star);
  font-size: 15px;
  margin: 0;
}

.ms-rating__value {
  font-weight: 600;
}

.ms-rating__count a {
  color: var(--ms-accent);
  text-decoration: underline;
}

.ms-points__label {
  font-family: var(--ms-font-display);
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 8px;
}

.ms-points ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ms-points ul li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 1.45;
  color: #2b303a;
}

.ms-points ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ms-accent);
}

/* --- colonna acquisto --- */
.ms-card__buy {
  font-size: 14px;
}

.ms-seller {
  color: var(--ms-ink-soft);
  margin-bottom: 14px;
}

.ms-seller strong {
  color: var(--ms-ink);
}

.ms-price {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.ms-price__badge {
  background: var(--ms-promo);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  padding: 5px 7px;
  border-radius: 5px;
  white-space: nowrap;
}

.ms-price__now {
  font-family: var(--ms-font-display);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ms-promo);
}

.ms-price__now.is-regular {
  color: var(--ms-ink);
}

.ms-price__was {
  color: var(--ms-ink-soft);
  text-decoration: line-through;
  font-size: 14px;
}

.ms-price__note {
  color: #8b929d;
  font-size: 12px;
  margin-top: 2px;
}

.ms-ship {
  margin: 14px 0 12px;
  font-size: 13.5px;
}

.ms-ship strong {
  color: var(--ms-good);
}

/* Bottone aggiungi al carrello */
ul.products.ms-list li.product .button {
  display: block;
  width: 100%;
  text-align: center;
  padding: 15px 18px;
  border: 0;
  border-radius: var(--ms-radius-pill);
  background: var(--ms-accent);
  color: #fff;
  font-family: var(--ms-font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.15s ease;
}

ul.products.ms-list li.product .button:hover {
  background: var(--ms-accent-dk);
}

ul.products.ms-list li.product .button:focus-visible {
  outline: 3px solid var(--ms-ink);
  outline-offset: 2px;
}

ul.products.ms-list li.product .added_to_cart {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-size: 13px;
  color: var(--ms-accent);
}

.ms-delivery {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--ms-ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* ============================================================
   6. SIDEBAR ADESIVA + HOVER DI RIGA
   ============================================================ */
@media (min-width: 901px) {
  #secondary {
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

ul.products.ms-list li.product {
  transition: background 0.15s ease;
}

ul.products.ms-list li.product:hover {
  background: #fafbfc;
  box-shadow: 0 0 0 12px #fafbfc;
}

/* ============================================================
   7. DESCRIZIONE CATEGORIA CON "MOSTRA DI PIÙ"
   ============================================================ */
.ms-term-desc {
  max-width: 62ch;
  color: var(--ms-ink-soft);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ms-term-desc.is-open {
  -webkit-line-clamp: unset;
  overflow: visible;
}

.ms-term-desc__toggle {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ms-accent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

/* ============================================================
   8. PANNELLO FILTRI SU MOBILE
   ============================================================ */
.ms-filters-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1.5px solid var(--ms-ink);
  border-radius: var(--ms-radius-pill);
  background: #fff;
  color: var(--ms-ink);
  font-family: var(--ms-font-display);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.ms-filters-toggle__count {
  background: var(--ms-accent);
  color: #fff;
  font-size: 12px;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
}

.ms-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(12, 15, 20, 0.45);
}

.ms-filters-close {
  display: none;
}

@media (max-width: 900px) {
  .ms-filters-toggle {
    display: inline-flex;
  }

  #secondary {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: min(340px, 88vw);
    height: 100%;
    padding: 20px;
    background: #fff;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }

  .ms-filters-open #secondary {
    transform: translateX(0);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.18);
  }

  .ms-filters-open .ms-backdrop {
    display: block;
  }

  .ms-filters-open {
    overflow: hidden;
  }

  .ms-filters-close {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 20px;
    padding: 0 0 16px;
    border: 0;
    border-bottom: 1px solid var(--ms-line);
    background: none;
    font-family: var(--ms-font-display);
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
  }

  ul.products.ms-list li.product:hover {
    background: none;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #secondary {
    transition: none;
  }
}

/* ============================================================
   9. SCHEDA SU MOBILE
   ============================================================ */
@media (max-width: 700px) {

  ul.products.ms-list li.product {
    position: relative;
    grid-template-columns: 124px minmax(0, 1fr);
    grid-template-areas:
      "media info"
      "media buy";
    gap: 4px 18px;
    padding: 22px 0 26px;
    align-content: start;
  }

  .ms-card__media { grid-area: media; align-self: start; }
  .ms-card__info  { grid-area: info; }
  .ms-card__buy   { grid-area: buy; padding-right: 62px; }

  /* --- immagine principale + miniature accessorie --- */
  .ms-card__media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 26px;
    gap: 6px;
    align-items: start;
  }

  .ms-card__gallery {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .ms-card__gallery img {
    width: 26px;
    height: auto;
    mix-blend-mode: multiply;
  }

  .ms-badge-top {
    font-size: 10.5px;
    padding: 5px 8px;
    border-radius: 5px;
  }

  .ms-repair {
    grid-column: 1 / -1;
    margin-top: 8px;
    font-size: 11px;
    gap: 6px;
  }

  .ms-repair__score { font-size: 11px; padding: 2px 6px; }

  /* --- testo --- */
  .ms-card__title {
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .ms-rating { font-size: 12.5px; gap: 6px; margin-bottom: 10px; }
  .ms-rating .star-rating { font-size: 13px; }

  /* i punti di forza restano solo sulla scheda prodotto */
  .ms-points { display: none; }

  .ms-seller { display: none; }

  /* --- prezzo --- */
  .ms-price { gap: 8px; margin-bottom: 2px; }
  .ms-price__badge { font-size: 10.5px; padding: 4px 6px; }
  .ms-price__now { font-size: 23px; }
  .ms-price__was { font-size: 13px; }
  .ms-price__note { font-size: 11.5px; }

  .ms-ship { margin: 10px 0 0; font-size: 13px; line-height: 1.4; }
  .ms-delivery { display: none; }

  /* --- CTA circolare in basso a destra --- */
  ul.products.ms-list li.product .button {
    position: absolute;
    right: 0;
    bottom: 22px;
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    color: transparent;
    background-color: var(--ms-accent);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16l-1.5 9.5a2 2 0 0 1-2 1.7H7.5a2 2 0 0 1-2-1.7L4 7z'/%3E%3Cpath d='M8.5 7V5.5a3.5 3.5 0 0 1 7 0V7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    box-shadow: 0 3px 10px rgba(224, 49, 49, 0.32);
  }

  ul.products.ms-list li.product .added_to_cart {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 11px;
  }

  ul.products.ms-list li.product:hover {
    background: none;
    box-shadow: none;
  }
}

@media (max-width: 380px) {
  ul.products.ms-list li.product {
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 4px 14px;
  }
  .ms-card__media { grid-template-columns: minmax(0, 1fr) 22px; }
  .ms-card__gallery img { width: 22px; }
  .ms-price__now { font-size: 21px; }
}

/* ============================================================
   10. RESET ALLINEAMENTO — Storefront centra tutto nel loop
   ============================================================ */
ul.products.ms-list li.product,
ul.products.ms-list li.product h2,
ul.products.ms-list li.product p,
ul.products.ms-list li.product ul,
ul.products.ms-list li.product li,
ul.products.ms-list li.product .ms-card__media,
ul.products.ms-list li.product .ms-card__info,
ul.products.ms-list li.product .ms-card__buy,
ul.products.ms-list li.product .price,
ul.products.ms-list li.product .ms-price__note,
ul.products.ms-list li.product .ms-ship {
  text-align: left;
}

/* La riga separatrice che Storefront infila sotto il titolo */
ul.products.ms-list li.product h2 {
  border: 0;
  padding-bottom: 0;
}

ul.products.ms-list li.product .ms-card__info::after,
ul.products.ms-list li.product .ms-card__buy::before {
  content: none;
}

/* Immagine allineata a sinistra nella sua colonna */
.ms-card__media img {
  display: block;
  margin-left: 0;
  margin-right: auto;
}

.ms-badge-top { left: 0; right: auto; }

/* Il bottone resta centrato: su desktop è una pillola a tutta larghezza,
   su mobile è il cerchio in basso a destra */
ul.products.ms-list li.product .button {
  text-align: center;
}

@media (max-width: 700px) {
  ul.products.ms-list li.product .ms-card__buy {
    padding-right: 62px;
  }
  /* il cerchio non si sposta: è in posizione assoluta */
  ul.products.ms-list li.product .button {
    right: 0;
    left: auto;
    margin: 0;
  }
}

/* ============================================================
   11. TESTATA DELLA CATEGORIA
   ============================================================ */
.woocommerce-breadcrumb {
  margin: 0 0 18px;
  padding: 0;
  font-size: 13px;
  color: #8b929d;
}

.woocommerce-breadcrumb a {
  color: #8b929d;
  text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
  color: var(--ms-accent);
  text-decoration: underline;
}

.woocommerce-products-header {
  margin-bottom: 6px;
}

.woocommerce-products-header__title.page-title {
  font-family: var(--ms-font-display);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 14px;
  text-align: left;
}

/* --- toolbar: conteggio a sinistra, ordinamento a destra --- */
.ms-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-top: 26px;
  padding: 16px 0;
  border-top: 1px solid var(--ms-line);
  border-bottom: 1px solid var(--ms-line);
}

.ms-toolbar .woocommerce-result-count {
  order: 1;
  margin: 0;
  font-size: 14.5px;
  color: var(--ms-ink-soft);
  white-space: nowrap;
}

.ms-toolbar .ms-count strong {
  color: var(--ms-ink);
  font-weight: 700;
}

.ms-toolbar .ms-count__term::before {
  content: "·";
  margin: 0 7px;
  color: #c3c8d0;
}

.ms-toolbar .ms-filters-toggle {
  order: 2;
}

.ms-toolbar .woocommerce-ordering {
  order: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 0 auto;
}

.ms-orderby__label {
  font-size: 14px;
  color: var(--ms-ink-soft);
  white-space: nowrap;
}

.ms-toolbar select.orderby {
  appearance: none;
  -webkit-appearance: none;
  min-width: 190px;
  padding: 10px 38px 10px 14px;
  border: 1px solid var(--ms-line);
  border-radius: 8px;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6270' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ms-ink);
  cursor: pointer;
}

.ms-toolbar select.orderby:focus-visible {
  outline: 2px solid var(--ms-accent);
  outline-offset: 1px;
}

@media (max-width: 700px) {
  .woocommerce-products-header__title.page-title { font-size: 26px; }
  .woocommerce-breadcrumb { font-size: 12px; }

  .ms-toolbar {
    margin-top: 18px;
    padding: 14px 0;
  }
  .ms-toolbar .woocommerce-ordering {
    order: 4;
    width: 100%;
    margin-left: 0;
  }
  .ms-toolbar select.orderby {
    flex: 1;
    min-width: 0;
  }
}

/* ============================================================
   12. HEADER SNELLO
   ============================================================ */
.site-header {
  padding: 0 !important;
  border: 0 !important;
  background: #fff !important;
}

.site-header::before,
.site-header::after {
  content: none !important;
}

.ms-header {
  position: sticky;   /* togli questa riga se non lo vuoi agganciato */
  top: 0;
  z-index: 900;
  background: #fff;
  border-bottom: 1px solid var(--ms-line);
}

/* .col-full è il contenitore del tema padre: riusandolo, header e
   contenuto restano larghi uguale su ogni breakpoint. Se il tuo tema
   padre non è Storefront, sostituisci "col-full" in functions.php
   con la classe contenitore del tuo tema. */
.ms-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 12px;
  padding-bottom: 12px;
  min-height: 64px;
}

/* La larghezza e i margini laterali arrivano da .col-full: qui non
   vanno reimpostati. Fallback se .col-full non esistesse. */
.ms-header__inner:not(.col-full) {
  max-width: 1170px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* --- logo --- */
.ms-logo {
  flex: 0 0 auto;
  line-height: 0;
}

.ms-logo img,
.ms-logo .custom-logo {
  display: block;
  width: auto;
  max-height: 40px;
  margin: 0;
}

.ms-logo__text {
  font-family: var(--ms-font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ms-ink);
  text-decoration: none;
  white-space: nowrap;
}

/* --- ricerca --- */
.ms-search {
  position: relative;
  flex: 1 1 auto;
  max-width: 620px;
  margin: 0;
  display: flex;
}

.ms-search__field {
  width: 100%;
  height: 44px;
  padding: 0 52px 0 18px;
  border: 1.5px solid var(--ms-line);
  border-radius: var(--ms-radius-pill);
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  color: var(--ms-ink);
  transition: border-color 0.15s ease;
}

.ms-search__field::placeholder { color: #9aa1ac; }

.ms-search__field:focus {
  outline: none;
  border-color: var(--ms-ink);
}

.ms-search__submit {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ms-accent);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ms-search__submit:hover { background: var(--ms-accent-dk); }
.ms-search__submit svg { width: 18px; height: 18px; }

/* --- carrello --- */
.ms-cart {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--ms-ink);
  text-decoration: none;
}

.ms-cart:hover { color: var(--ms-accent); }
.ms-cart__icon svg { width: 25px; height: 25px; display: block; }

.ms-cart__count {
  position: absolute;
  top: 2px;
  right: 1px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: var(--ms-radius-pill);
  background: var(--ms-accent);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* --- mobile: ricerca su riga propria --- */
@media (max-width: 640px) {
  .ms-header__inner {
    flex-wrap: wrap;
    gap: 10px 14px;
    padding-top: 10px;
    padding-bottom: 10px;
    min-height: 0;
  }
  .ms-logo { order: 1; margin-right: auto; }
  .ms-cart { order: 2; }
  .ms-search { order: 3; flex-basis: 100%; max-width: none; }
  .ms-search__field { height: 40px; font-size: 14px; }
  .ms-search__submit { width: 32px; height: 32px; top: 4px; }
  .ms-logo__text { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .ms-search__field,
  .ms-search__submit { transition: none; }
}

/* ============================================================
   13. SCHEDA PRODOTTO
   ============================================================ */
.single-product div.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 340px;
  column-gap: 40px;
  row-gap: 48px;
  align-items: start;
}

.single-product div.product::before,
.single-product div.product::after { content: none; }

.single-product .woocommerce-product-gallery { grid-column: 1; grid-row: 1; }
.single-product .summary.entry-summary      { grid-column: 2; grid-row: 1; }
.single-product .ms-buybox                  { grid-column: 3; grid-row: 1; }

/* Tutte le sezioni sotto occupano l'intera larghezza */
.single-product .ms-section,
.single-product .woocommerce-tabs,
.single-product .related.products,
.single-product .up-sells.products {
  grid-column: 1 / -1;
}

/* Storefront usa i float: vanno azzerati */
.single-product .woocommerce-product-gallery,
.single-product .summary.entry-summary,
.single-product .woocommerce-tabs,
.single-product .related.products {
  float: none !important;
  width: auto !important;
  margin-left: 0;
  margin-right: 0;
}

/* --- galleria con miniature in colonna a sinistra --- */
.single-product .woocommerce-product-gallery {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.single-product .woocommerce-product-gallery__wrapper {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}

.single-product .flex-control-thumbs {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.single-product .flex-control-thumbs li {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  list-style: none;
}

.single-product .flex-control-thumbs img {
  width: 100%;
  height: auto;
  border: 1.5px solid var(--ms-line);
  border-radius: 8px;
  opacity: 1;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.single-product .flex-control-thumbs img.flex-active,
.single-product .flex-control-thumbs img:hover {
  border-color: var(--ms-ink);
}

.single-product .woocommerce-product-gallery__image img {
  border-radius: 10px;
}

/* --- colonna informativa --- */
.single-product .product_title {
  font-family: var(--ms-font-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 0 0 12px;
}

.single-product .woocommerce-product-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  font-size: 14px;
}

.single-product .woocommerce-product-rating .star-rating {
  color: var(--ms-star);
  margin: 0;
  float: none;
}

.single-product .woocommerce-review-link { color: var(--ms-accent); }

.single-product .summary .ms-points__label {
  font-family: var(--ms-font-display);
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 10px;
}

.single-product .woocommerce-product-details__short-description ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.single-product .woocommerce-product-details__short-description ul li {
  position: relative;
  padding-left: 17px;
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.5;
}

.single-product .woocommerce-product-details__short-description ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ms-accent);
}

/* --- box acquisto --- */
.ms-buybox__inner {
  position: sticky;
  top: 88px;   /* header alto 64px + aria */
  padding: 22px;
  border: 1px solid var(--ms-line);
  border-radius: 12px;
  background: #fff;
}

.ms-buybox .ms-seller { margin-bottom: 12px; font-size: 14px; }

.ms-buybox .ms-price__badge {
  display: inline-block;
  margin-bottom: 10px;
}

.ms-buybox__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}

.ms-buybox .ms-price__now { font-size: 32px; }
.ms-buybox .ms-price__was { font-size: 15px; }
.ms-buybox .ms-price__note { margin: 2px 0 0; }

.ms-saving {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ms-good);
}

.ms-buybox .ms-ship {
  margin: 16px 0 18px;
  font-size: 14px;
  line-height: 1.45;
}

/* quantità + bottone */
.ms-buybox form.cart {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}

.ms-buybox .quantity {
  display: flex;
  align-items: center;
  width: fit-content;
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius-pill);
  overflow: hidden;
}

.ms-buybox .quantity input.qty {
  width: 62px;
  height: 46px;
  border: 0;
  text-align: center;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  background: #fff;
  -moz-appearance: textfield;
}

.ms-buybox .quantity input.qty::-webkit-outer-spin-button,
.ms-buybox .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ms-buybox button.single_add_to_cart_button {
  width: 100%;
  padding: 16px 20px;
  border: 0;
  border-radius: var(--ms-radius-pill);
  background: var(--ms-accent);
  color: #fff;
  font-family: var(--ms-font-display);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ms-buybox button.single_add_to_cart_button:hover { background: var(--ms-accent-dk); }

.ms-buybox button.single_add_to_cart_button:focus-visible {
  outline: 3px solid var(--ms-ink);
  outline-offset: 2px;
}

/* rassicurazioni */
.ms-reassurance {
  list-style: none;
  margin: 18px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--ms-line);
}

.ms-reassurance li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 9px;
  font-size: 13.5px;
  color: #2b303a;
}

.ms-reassurance li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230e7a3c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8.5l3.2 3.2L13.5 4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ms-buybox .product_meta {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ms-line);
  font-size: 12.5px;
  color: var(--ms-ink-soft);
}

/* --- tablet: galleria + info sopra, box acquisto sotto --- */
@media (max-width: 1080px) {
  .single-product div.product {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 32px;
    row-gap: 32px;
  }
  .single-product .ms-buybox { grid-column: 1 / -1; grid-row: auto; }
  .ms-buybox__inner { position: static; }
}

/* --- mobile: tutto impilato --- */
@media (max-width: 780px) {
  .single-product div.product {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 26px;
  }
  .single-product .woocommerce-product-gallery,
  .single-product .summary.entry-summary,
  .single-product .ms-buybox {
    grid-column: 1;
    grid-row: auto;
  }

  .single-product .woocommerce-product-gallery {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .single-product .woocommerce-product-gallery__wrapper { grid-column: 1; }
  .single-product .flex-control-thumbs {
    grid-column: 1;
    grid-row: 2;
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .single-product .flex-control-thumbs li { width: 62px !important; flex: 0 0 62px; }

  .single-product .product_title { font-size: 23px; }
  .ms-buybox__inner { padding: 18px; }
  .ms-buybox .ms-price__now { font-size: 28px; }
}

/* ============================================================
   14. PRODOTTI CONSIGLIATI / CORRELATI
   ============================================================ */
.related.products,
.up-sells.products {
  padding-top: 34px;
  border-top: 1px solid var(--ms-line);
}

.related.products > h2,
.up-sells.products > h2 {
  font-family: var(--ms-font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  text-align: left;
}

.related.products ul.products,
.up-sells.products ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* La scheda torna verticale: immagine sopra, testo sotto */
.related.products li.product,
.up-sells.products li.product {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 14px;
  border: 1px solid var(--ms-line);
  border-bottom: 1px solid var(--ms-line);
  border-radius: 12px;
  background: #fff;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.related.products li.product:hover,
.up-sells.products li.product:hover {
  border-color: #cdd3db;
  box-shadow: 0 4px 16px rgba(16, 20, 28, 0.08);
  background: #fff;
}

.related.products .ms-card__media,
.up-sells.products .ms-card__media {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.related.products .ms-card__media img,
.up-sells.products .ms-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.related.products .ms-card__title,
.up-sells.products .ms-card__title {
  font-size: 15px;
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related.products .ms-rating,
.up-sells.products .ms-rating {
  font-size: 12.5px;
  margin: 6px 0 0;
}

.related.products .ms-card__buy,
.up-sells.products .ms-card__buy {
  margin-top: auto;
}

.related.products .ms-price__now,
.up-sells.products .ms-price__now { font-size: 20px; }

.related.products .ms-price__was,
.up-sells.products .ms-price__was { font-size: 13px; }

.related.products li.product .button,
.up-sells.products li.product .button {
  margin-top: 12px;
  padding: 11px 16px;
  font-size: 14px;
}

/* Fuori posto in una card piccola */
.related.products .ms-card__gallery,
.related.products .ms-seller,
.related.products .ms-points,
.related.products .ms-price__note,
.related.products .ms-ship,
.related.products .ms-delivery,
.related.products .ms-repair,
.up-sells.products .ms-card__gallery,
.up-sells.products .ms-seller,
.up-sells.products .ms-points,
.up-sells.products .ms-price__note,
.up-sells.products .ms-ship,
.up-sells.products .ms-delivery,
.up-sells.products .ms-repair {
  display: none;
}

@media (max-width: 1080px) {
  .related.products ul.products,
  .up-sells.products ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}

/* Su mobile diventa una riga scorrevole */
@media (max-width: 780px) {
  .related.products ul.products,
  .up-sells.products ul.products {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    margin-inline: -16px;
    padding-inline: 16px;
  }

  .related.products li.product,
  .up-sells.products li.product {
    flex: 0 0 168px;
    scroll-snap-align: start;
  }

  .related.products > h2,
  .up-sells.products > h2 { font-size: 19px; }

  /* il cerchio del carrello qui non serve */
  .related.products li.product .button,
  .up-sells.products li.product .button {
    position: static;
    width: 100%;
    height: auto;
    border-radius: var(--ms-radius-pill);
    font-size: 13px;
    color: #fff;
    background-image: none;
    box-shadow: none;
  }
}

/* ============================================================
   15. RIFINITURE CARD CONSIGLIATI
   ============================================================ */

/* Solo le stelle, senza il voto numerico e il numero di recensioni */
.related.products .ms-rating__value,
.related.products .ms-rating__count,
.up-sells.products .ms-rating__value,
.up-sells.products .ms-rating__count {
  display: none;
}

.related.products .ms-rating,
.up-sells.products .ms-rating {
  margin: 8px 0 0;
}

.related.products .ms-rating .star-rating,
.up-sells.products .ms-rating .star-rating {
  font-size: 14px;
}

/* Il badge percentuale affolla una card piccola: resta il prezzo rosso */
.related.products .ms-price__badge,
.up-sells.products .ms-price__badge {
  display: none;
}

.related.products .ms-price,
.up-sells.products .ms-price {
  margin-bottom: 0;
}

/* Più respiro dentro la card, come nello screenshot */
.related.products li.product,
.up-sells.products li.product {
  padding: 16px 16px 18px;
  gap: 6px;
}

.related.products .ms-card__media,
.up-sells.products .ms-card__media {
  margin-bottom: 8px;
}

.related.products .ms-card__title,
.up-sells.products .ms-card__title {
  font-weight: 400;
  font-family: var(--ms-font-body);
  min-height: 2.7em;
}

.related.products li.product .button,
.up-sells.products li.product .button {
  margin-top: 10px;
}

/* ============================================================
   16. SEZIONI DELLA SCHEDA PRODOTTO
   ============================================================ */
.ms-section {
  padding-top: 40px;
  border-top: 1px solid var(--ms-line);
}

.ms-section__title {
  font-family: var(--ms-font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  text-align: left;
}

/* --- 16a. Caratteristiche --- */
.ms-specs .woocommerce-product-attributes {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  margin: 0;
}

.ms-specs .woocommerce-product-attributes tbody {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 48px;
}

.ms-specs .woocommerce-product-attributes-item {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--ms-line);
}

.ms-specs .woocommerce-product-attributes-item th,
.ms-specs .woocommerce-product-attributes-item td {
  padding: 0;
  border: 0;
  background: none;
  font-size: 14.5px;
  line-height: 1.45;
  text-align: left;
}

.ms-specs .woocommerce-product-attributes-item th {
  font-weight: 400;
  color: var(--ms-ink-soft);
}

.ms-specs .woocommerce-product-attributes-item td {
  font-weight: 600;
  color: var(--ms-ink);
}

.ms-specs .woocommerce-product-attributes-item td p { margin: 0; }

/* --- 16b. Blocchi immagine + testo --- */
.ms-boxes {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.ms-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--ms-line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.ms-box.is-reversed .ms-box__media { order: 2; }

.ms-box__media {
  background: #f6f7f9;
  min-height: 260px;
}

.ms-box__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}

.ms-box__body {
  align-self: center;
  padding: 36px 40px;
}

.ms-box__title {
  font-family: var(--ms-font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 12px;
}

.ms-box__text {
  font-size: 15px;
  line-height: 1.6;
  color: #2b303a;
}

.ms-box__text p:last-child { margin-bottom: 0; }

/* --- 16c. Descrizione --- */
.ms-description__body {
  max-width: 78ch;
  font-size: 15.5px;
  line-height: 1.65;
  color: #2b303a;
}

.ms-description__body h2,
.ms-description__body h3 {
  font-family: var(--ms-font-display);
  letter-spacing: -0.015em;
  margin-top: 1.6em;
}

.ms-description__body img { border-radius: 10px; }

/* --- 16d. Recensioni --- */
.ms-reviews #reviews { max-width: 800px; }

.ms-reviews #comments > h2,
.ms-reviews #review_form_wrapper .comment-reply-title {
  font-family: var(--ms-font-display);
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 18px;
}

.ms-reviews .commentlist {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
}

.ms-reviews .commentlist li.review,
.ms-reviews .commentlist li.comment {
  margin: 0 0 18px;
  padding: 18px 20px;
  border: 1px solid var(--ms-line);
  border-radius: 12px;
  background: #fff;
}

.ms-reviews .comment-text { margin: 0; border: 0; padding: 0; }
.ms-reviews .comment-text .star-rating { color: var(--ms-star); float: none; margin: 0 0 8px; }
.ms-reviews .comment-text .meta { font-size: 13px; color: var(--ms-ink-soft); }
.ms-reviews .comment-text p { font-size: 15px; line-height: 1.6; }
.ms-reviews .avatar { border-radius: 50%; }

.ms-reviews #respond input[type="text"],
.ms-reviews #respond input[type="email"],
.ms-reviews #respond textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--ms-line);
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
}

.ms-reviews #respond input:focus,
.ms-reviews #respond textarea:focus {
  outline: none;
  border-color: var(--ms-ink);
}

.ms-reviews #respond .submit {
  padding: 13px 28px;
  border: 0;
  border-radius: var(--ms-radius-pill);
  background: var(--ms-accent);
  color: #fff;
  font-family: var(--ms-font-display);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.ms-reviews #respond .submit:hover { background: var(--ms-accent-dk); }

.ms-reviews .stars a { color: var(--ms-star); }

/* --- responsive --- */
@media (max-width: 900px) {
  .ms-specs .woocommerce-product-attributes tbody {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }
}

@media (max-width: 780px) {
  .ms-section { padding-top: 28px; }
  .ms-section__title { font-size: 20px; margin-bottom: 16px; }

  .ms-box,
  .ms-box.is-reversed {
    grid-template-columns: minmax(0, 1fr);
  }
  .ms-box.is-reversed .ms-box__media { order: 0; }
  .ms-box__media { min-height: 0; aspect-ratio: 16 / 9; }
  .ms-box__body { padding: 22px 20px; }
  .ms-box__title { font-size: 18px; }

  .ms-specs .woocommerce-product-attributes-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
    padding: 11px 0;
  }
}

/* ============================================================
   17. FOOTER
   ============================================================ */
.site-footer {
  padding: 0 !important;
  background: #fff !important;
  color: inherit !important;
}

.ms-footer {
  padding: 56px 0 0;
  border-top: 1px solid var(--ms-line);
  background: #fff;
  font-size: 14.5px;
}

/* --- colonne di link --- */
.ms-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  padding-bottom: 44px;
}

.ms-footer__heading {
  font-family: var(--ms-font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ms-ink);
  margin: 0 0 16px;
  text-transform: none;
}

.ms-footer .widget {
  margin: 0 0 28px;
  padding: 0;
  border: 0;
}

.ms-footer .widget:last-child { margin-bottom: 0; }

.ms-footer .widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ms-footer .widget ul li {
  margin: 0 0 11px;
  padding: 0;
  border: 0;
  line-height: 1.4;
}

.ms-footer .widget a {
  color: var(--ms-ink-soft);
  text-decoration: none;
}

.ms-footer .widget a:hover {
  color: var(--ms-ink);
  text-decoration: underline;
}

/* --- metodi di pagamento --- */
.ms-footer__pay {
  padding: 28px 0;
  border-top: 1px solid var(--ms-line);
}

.ms-pay {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-pay__item {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--ms-line);
  border-radius: 7px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #3d434e;
  white-space: nowrap;
}

/* --- barra in basso --- */
.ms-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 28px;
  padding: 20px 0 28px;
  border-top: 1px solid var(--ms-line);
}

.ms-footer__copy {
  margin: 0;
  font-size: 13px;
  color: #8b929d;
}

.ms-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-footer__legal li { margin: 0; }

.ms-footer__legal a {
  font-size: 13px;
  color: #8b929d;
  text-decoration: none;
}

.ms-footer__legal a:hover {
  color: var(--ms-ink);
  text-decoration: underline;
}

/* --- responsive --- */
@media (max-width: 900px) {
  .ms-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
}

@media (max-width: 560px) {
  .ms-footer { padding-top: 36px; }
  .ms-footer__cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    padding-bottom: 30px;
  }
  .ms-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   18. LARGHEZZA PAGINA
   ============================================================ */
:root {
  --ms-container: 1400px;
}

.col-full {
  max-width: var(--ms-container) !important;
}

/* ============================================================
   19. CORREZIONI CARD CONSIGLIATI
   ============================================================ */

/* La griglia deve vincere sul layout a float/flex del tema padre */
.related.products ul.products,
.up-sells.products ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch;
}

.related.products ul.products::before,
.related.products ul.products::after,
.up-sells.products ul.products::before,
.up-sells.products ul.products::after {
  content: none !important;
}

.related.products li.product,
.up-sells.products li.product {
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  float: none !important;
  margin: 0 !important;
  clear: none !important;
  text-align: left;
}

.related.products li.product *,
.up-sells.products li.product * {
  text-align: left;
}

/* Titolo della sezione a sinistra, non centrato */
.related.products > h2,
.up-sells.products > h2 {
  text-align: left !important;
}

/* Il bottone qui non eredita né il colore né la forma del catalogo */
.related.products li.product .button,
.up-sells.products li.product .button {
  display: block;
  width: 100%;
  position: static !important;
  height: auto !important;
  padding: 11px 14px !important;
  border: 0;
  border-radius: 10px !important;
  background-color: var(--ms-accent) !important;
  background-image: none !important;
  color: #fff !important;
  font-family: var(--ms-font-display);
  font-size: 13.5px !important;
  font-weight: 700;
  line-height: 1.3;
  text-align: center !important;
  box-shadow: none !important;
}

.related.products li.product .button:hover,
.up-sells.products li.product .button:hover {
  background-color: var(--ms-accent-dk) !important;
}

.related.products li.product .price,
.up-sells.products li.product .price {
  font-family: var(--ms-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ms-ink);
}

@media (max-width: 1180px) {
  .related.products ul.products,
  .up-sells.products ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 780px) {
  /* Riga scorrevole allineata al contenuto: niente margini negativi,
     erano loro a tagliare la prima card */
  .related.products ul.products,
  .up-sells.products ul.products {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-left: 0;
    margin: 0 !important;
    padding: 0 0 10px !important;
  }

  .related.products li.product,
  .up-sells.products li.product {
    flex: 0 0 160px;
    scroll-snap-align: start;
  }

  .related.products li.product .button,
  .up-sells.products li.product .button {
    padding: 10px 8px !important;
    font-size: 12.5px !important;
    border-radius: 8px !important;
  }
}

/* ============================================================
   20. LARGHEZZA 1600 + BOTTONE CONSIGLIATI SU MOBILE
   ============================================================ */
:root {
  --ms-container: 1600px;
}

@media (max-width: 780px) {

  /* Card più larga: a 160px il testo del bottone non ci stava */
  .related.products li.product,
  .up-sells.products li.product {
    flex: 0 0 204px;
  }

  .related.products li.product .button,
  .up-sells.products li.product .button {
    padding: 11px 10px !important;
    font-size: 13px !important;
    white-space: nowrap;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none;
  }
}

/* ============================================================
   21. ETICHETTA OFFERTA E SPAZI SU MOBILE
   ============================================================ */

/* Rete di sicurezza se un plugin la rimette */
.single-product > .onsale,
.single-product div.product > .onsale,
.single-product .woocommerce-product-gallery .onsale {
  display: none !important;
}

@media (max-width: 780px) {
  .single-product .woocommerce-breadcrumb {
    margin-bottom: 12px;
  }

  .single-product div.product {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .single-product .woocommerce-product-gallery {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .single-product .woocommerce-product-gallery__wrapper {
    margin-top: 0;
  }

  /* Storefront aggiunge spazio sopra al contenuto principale */
  .single-product .site-main,
  .single-product #primary {
    padding-top: 0 !important;
  }
}

/* ============================================================
   22. CATALOGO: SOLO LA PRIMA FOTO
   ============================================================ */
.ms-card__gallery {
  display: none !important;
}

/* La colonna immagine torna a una griglia semplice */
@media (max-width: 700px) {
  .ms-card__media {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 380px) {
  .ms-card__media {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   23. MINIATURE GALLERIA DI RISERVA
   ============================================================ */
.ms-thumbs {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-thumbs li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-thumbs__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 1.5px solid var(--ms-line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  line-height: 0;
  transition: border-color 0.15s ease;
}

.ms-thumbs__btn img {
  display: block;
  width: 100%;
  height: auto;
}

.ms-thumbs__btn:hover,
.ms-thumbs__btn.is-active {
  border-color: var(--ms-ink);
}

.ms-thumbs__btn:focus-visible {
  outline: 2px solid var(--ms-accent);
  outline-offset: 2px;
}

@media (max-width: 780px) {
  .ms-thumbs {
    grid-column: 1;
    grid-row: 2;
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .ms-thumbs li { flex: 0 0 62px; }
}

@media (prefers-reduced-motion: reduce) {
  .ms-thumbs__btn { transition: none; }
}

/* ============================================================
   24. COLONNA INFORMATIVA DELLA SCHEDA PRODOTTO
   ============================================================ */

/* --- sopratitolo --- */
.ms-eyebrow {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 400;
  color: var(--ms-ink-soft);
  line-height: 1.3;
}

.single-product .product_title { margin-bottom: 10px; }

/* --- stelline + SKU --- */
.ms-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 18px;
  font-size: 13.5px;
}

.ms-meta-row__rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ms-meta-row .star-rating {
  color: var(--ms-star);
  float: none;
  margin: 0;
  font-size: 15px;
}

.ms-meta-row .ms-rating__value { font-weight: 600; }

.ms-meta-row__link {
  color: var(--ms-accent);
  text-decoration: underline;
}

.ms-meta-row__sku {
  color: #9aa1ac;
  font-size: 13px;
}

.ms-meta-row__sku span { color: var(--ms-ink-soft); }

/* --- box indice di riparabilità --- */
.ms-repair-box {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  padding: 11px 16px 11px 12px;
  border-radius: 10px;
  background: #f3f5f7;
}

.ms-repair-box__score {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 6px;
  background: #56b336;
  color: #fff;
  font-family: var(--ms-font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
}

.ms-repair-box__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}

.ms-repair-box__body strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ms-ink);
}

.ms-repair-box__note {
  font-size: 12.5px;
  color: var(--ms-ink-soft);
}

/* --- punti di forza: pallini gialli, testo più piccolo --- */
.single-product .summary .ms-points__label {
  font-size: 15.5px;
  margin: 0 0 9px;
}

.single-product .woocommerce-product-details__short-description ul li {
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: 7px;
  padding-left: 16px;
}

.single-product .woocommerce-product-details__short-description ul li::before {
  background: var(--ms-star);
  width: 6px;
  height: 6px;
  top: 7px;
}

/* --- box garanzia estesa --- */
.ms-warranty {
  margin: 24px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--ms-line);
  border-radius: 12px;
}

.ms-warranty__title {
  font-family: var(--ms-font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}

.ms-warranty__option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.ms-warranty__option input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--ms-accent);
  cursor: pointer;
}

.ms-warranty__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ms-warranty__label {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ms-ink);
  line-height: 1.4;
}

.ms-warranty__price {
  color: var(--ms-promo);
  white-space: nowrap;
}

.ms-warranty__price .amount { font-weight: 700; }

.ms-warranty__desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ms-ink-soft);
}

.ms-warranty__option.is-checked .ms-warranty__label { color: var(--ms-ink); }

/* ============================================================
   25. SPAZI SU MOBILE: PERCORSO E CAROSELLO
   ============================================================ */
@media (max-width: 780px) {
  .single-product .woocommerce-breadcrumb {
    margin-bottom: 4px !important;
  }

  .single-product div.product {
    row-gap: 20px;
  }

  .single-product .woocommerce-product-gallery,
  .single-product .woocommerce-product-gallery__wrapper,
  .single-product .woocommerce-product-gallery__image {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .single-product .woocommerce-product-gallery__image img {
    margin-top: 0;
  }

  .ms-eyebrow { font-size: 13px; }
  .ms-repair-box { margin-bottom: 18px; }
  .ms-warranty { padding: 15px 16px; }
}

/* ============================================================
   26. BOX ACQUISTO PIÙ COMPATTO + SELETTORE QUANTITÀ
   ============================================================ */
.ms-buybox__inner {
  padding: 16px 16px 18px;
}

.ms-buybox .ms-seller { margin-bottom: 8px; font-size: 13px; }
.ms-buybox .ms-price__badge { margin-bottom: 6px; }
.ms-buybox .ms-price__now { font-size: 28px; }
.ms-buybox .ms-price__note { font-size: 11.5px; }
.ms-buybox .ms-saving { margin-top: 4px; font-size: 13px; }
.ms-buybox .ms-ship { margin: 11px 0 13px; font-size: 13.5px; }

.ms-buybox form.cart { gap: 10px; }

.ms-buybox button.single_add_to_cart_button {
  padding: 13px 18px;
  font-size: 15px;
}

.ms-reassurance {
  margin-top: 14px;
  padding-top: 14px;
}

.ms-reassurance li {
  margin-bottom: 7px;
  font-size: 13px;
}

.ms-buybox .product_meta {
  margin-top: 12px;
  padding-top: 11px;
  font-size: 12px;
}

/* --- quantità: - campo + --- */
.ms-buybox .quantity {
  height: 44px;
  border-radius: var(--ms-radius-pill);
  overflow: hidden;
}

.ms-buybox .quantity input.qty {
  width: 46px;
  height: 100%;
  font-size: 15px;
}

.ms-qty__btn {
  width: 40px;
  height: 100%;
  padding: 0;
  border: 0;
  background: #fff;
  color: var(--ms-ink);
  font-family: var(--ms-font-body);
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ms-qty__btn:hover { background: #f2f4f6; }

.ms-qty__btn:focus-visible {
  outline: 2px solid var(--ms-accent);
  outline-offset: -2px;
}

/* ============================================================
   27. BLOCCHI IMMAGINE + TESTO — titolo sopra, testo sotto
   ============================================================ */
.ms-box {
  display: block;
  padding: 30px 32px 34px;
  border: 1px solid #ece7d9;
  border-radius: 14px;
  background: #fdfbf4;   /* avorio chiarissimo */
  text-align: center;
}

.ms-box.is-reversed .ms-box__media { order: 0; }

.ms-box__title {
  font-family: var(--ms-font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 0 0 24px;
  text-align: center;
}

.ms-box__media {
  min-height: 0;
  margin: 0 auto 24px;
  max-width: 720px;
  background: none;
  border-radius: 10px;
  overflow: hidden;
}

.ms-box__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  margin: 0;
}

.ms-box__text {
  max-width: 68ch;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.65;
  color: #3d434e;
  text-align: center;
}

@media (max-width: 780px) {
  .ms-box { padding: 22px 18px 24px; }
  .ms-box__title { font-size: 21px; margin-bottom: 18px; }
  .ms-box__media { margin-bottom: 18px; }
  .ms-box__text { font-size: 14.5px; }
}

/* ============================================================
   28. BOTTONE CONSIGLIATI A LARGHEZZA PIENA
   ============================================================ */
.related.products li.product .button,
.up-sells.products li.product .button {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 780px) {
  .related.products li.product .button,
  .up-sells.products li.product .button {
    font-size: 12.5px !important;
    padding: 10px 6px !important;
  }
}

/* ============================================================
   29. RIEPILOGO RECENSIONI
   ============================================================ */
.ms-review-summary {
  margin: 0 0 32px;
  padding: 0 0 28px;
  border-bottom: 1px solid var(--ms-line);
  text-align: center;
}

.ms-review-summary__score {
  margin: 0 0 8px;
  line-height: 1;
}

.ms-review-summary__avg {
  font-family: var(--ms-font-display);
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ms-ink);
}

.ms-review-summary__max {
  font-family: var(--ms-font-display);
  font-size: 21px;
  font-weight: 700;
  color: #9aa1ac;
}

.ms-review-summary .star-rating {
  display: inline-block;
  float: none;
  margin: 0 auto 10px;
  color: var(--ms-star);
  font-size: 18px;
}

.ms-review-summary__count {
  margin: 0 0 10px;
  font-size: 13.5px;
  color: var(--ms-ink-soft);
}

.ms-review-summary__happy {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ms-good);
}

/* ============================================================
   30. RECENSIONI SENZA RIQUADRI
   ============================================================ */
.ms-reviews .commentlist li.review,
.ms-reviews .commentlist li.comment {
  margin: 0 !important;
  padding: 22px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ms-line) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.ms-reviews .commentlist li.review:first-child,
.ms-reviews .commentlist li.comment:first-child {
  padding-top: 0 !important;
}

.ms-reviews .commentlist li.review:last-child,
.ms-reviews .commentlist li.comment:last-child {
  border-bottom: 0 !important;
}

.ms-reviews .commentlist { margin-bottom: 28px; }

.ms-reviews .comment_container {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: 0;
  background: none;
}

.ms-reviews .comment_container > img.avatar {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
}

.ms-reviews .comment-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

/* ============================================================
   31. STELLINE SEMPRE GIALLE
   ============================================================ */
.star-rating,
.star-rating span,
.star-rating::before,
.ms-reviews .star-rating,
.ms-reviews .comment-text .star-rating,
.ms-review-summary .star-rating,
.ms-meta-row .star-rating,
p.stars a,
p.stars a::before,
p.stars.selected a.active,
p.stars.selected a:not(.active),
p.stars:hover a {
  color: var(--ms-star) !important;
}

p.stars a:hover,
p.stars.selected a.active ~ a { color: #d8dce2 !important; }

/* ============================================================
   32. PUNTI DI FORZA NELLA SCHEDA PRODOTTO
   ============================================================ */
.single-product .summary .ms-points {
  margin: 0 0 4px;
}

.single-product .summary .ms-points__label {
  font-family: var(--ms-font-display);
  font-size: 15.5px;
  font-weight: 700;
  margin: 0 0 9px;
}

.single-product .summary .ms-points ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.single-product .summary .ms-points ul li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 7px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #2b303a;
  list-style: none;
}

.single-product .summary .ms-points ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ms-star);
}

/* ============================================================
   33. CORREZIONI BLOCCHI IMG+TESTO E RIEPILOGO RECENSIONI
   ============================================================ */

/* L'immagine non va mai ritagliata */
.ms-box__media {
  aspect-ratio: auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible;
  background: none !important;
}

.ms-box__media img {
  width: auto !important;
  max-width: 100%;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto;
}

@media (max-width: 780px) {
  .ms-box__media,
  .ms-box__media img {
    aspect-ratio: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* Riepilogo anche senza recensioni */
.ms-review-summary.is-empty .ms-review-summary__avg { color: #b9bfc9; }
.ms-review-summary.is-empty .star-rating { opacity: 0.45; }
.ms-review-summary.is-empty .ms-review-summary__count { margin-bottom: 0; }

/* ============================================================
   34. SPAZIO SOTTO IL PERCORSO ANCHE SU DESKTOP
   ============================================================ */
.single-product .woocommerce-breadcrumb {
  margin-bottom: 10px;
}

.single-product .site-content,
.single-product .site-main,
.single-product #primary,
.single-product #content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.single-product div.product {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.single-product .woocommerce-product-gallery,
.single-product .summary.entry-summary,
.single-product .ms-buybox {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image,
.single-product .flex-control-thumbs,
.single-product .ms-thumbs {
  margin-top: 0 !important;
}

/* Il primo elemento della colonna informativa non deve staccarsi */
.single-product .summary > *:first-child {
  margin-top: 0 !important;
}

/* ============================================================
   35. LARGHEZZA IMMAGINE NEI BLOCCHI IMG+TESTO
   ============================================================ */
:root {
  --ms-box-media: 360px;   /* cambia qui per ingrandire o ridurre */
}

.ms-box__media {
  max-width: min(var(--ms-box-media), 100%);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 480px) {
  .ms-box__media {
    max-width: 100%;
  }
}

/* ============================================================
   36. PROPORZIONI DEI BLOCCHI IMG+TESTO
   ============================================================ */
:root {
  --ms-box-inner: 860px;   /* larghezza del contenuto dentro il riquadro */
  --ms-box-media: 400px;   /* larghezza massima dell'immagine */
}

.ms-box {
  padding: 40px 32px 44px;
}

/* Titolo, immagine e testo condividono la stessa colonna centrale */
.ms-box__title,
.ms-box__media,
.ms-box__text {
  max-width: min(var(--ms-box-inner), 100%);
  margin-left: auto;
  margin-right: auto;
}

.ms-box__title {
  font-size: 26px;
  margin-bottom: 26px;
}

.ms-box__media {
  max-width: min(var(--ms-box-media), 100%);
  margin-bottom: 26px;
}

/* Il testo poco più largo dell'immagine: la incornicia invece di
   allinearsi, così il blocco ha una gerarchia leggibile */
.ms-box__text {
  max-width: min(480px, 100%);
  font-size: 15px;
}

@media (max-width: 780px) {
  .ms-box { padding: 26px 20px 28px; }
  .ms-box__title { font-size: 20px; margin-bottom: 18px; }
  .ms-box__media { margin-bottom: 18px; }
}

@media (max-width: 480px) {
  .ms-box__media { max-width: 100%; }
}

/* ============================================================
   37. STELLINE: TRACCIA GRIGIA, PIENE GIALLE
   ============================================================ */

/* Strato di fondo: le cinque stelle vuote */
.star-rating::before,
.ms-reviews .star-rating::before,
.ms-review-summary .star-rating::before,
.ms-meta-row .star-rating::before,
.ms-rating .star-rating::before,
.widget_rating_filter .star-rating::before {
  color: #d5d9e0 !important;
}

/* Strato sopra: la porzione piena, tagliata alla percentuale del voto */
.star-rating span,
.star-rating span::before,
.ms-reviews .star-rating span::before,
.ms-review-summary .star-rating span::before,
.ms-meta-row .star-rating span::before,
.ms-rating .star-rating span::before,
.widget_rating_filter .star-rating span::before {
  color: var(--ms-star) !important;
}

/* --- selettore a stelle nel form recensione --- */
p.stars a {
  color: #d5d9e0 !important;
}

p.stars:hover a,
p.stars a:hover,
p.stars a.active,
p.stars.selected a.active,
p.stars.selected a:not(.active) {
  color: var(--ms-star) !important;
}

/* Le stelle dopo quella scelta tornano grigie */
p.stars a:hover ~ a,
p.stars.selected a.active ~ a {
  color: #d5d9e0 !important;
}

/* ============================================================
   38. PUNTI DI FORZA VISIBILI SU MOBILE NELLA SCHEDA PRODOTTO
   ============================================================ */
@media (max-width: 700px) {

  /* Nascosti solo nella lista catalogo, dove rubano spazio */
  ul.products.ms-list li.product .ms-points {
    display: none;
  }

  /* Nella scheda prodotto devono esserci */
  .single-product .summary .ms-points {
    display: block !important;
  }

  .single-product .summary .ms-points ul li {
    font-size: 14px;
    margin-bottom: 8px;
  }
}

/* ============================================================
   39. MOBILE: IMMAGINE A TUTTA LARGHEZZA NEI BLOCCHI
   ============================================================ */
@media (max-width: 780px) {

  /* Il padding passa dal riquadro ai singoli testi, così
     l'immagine può arrivare ai bordi */
  .ms-box {
    padding-left: 0;
    padding-right: 0;
  }

  .ms-box__title,
  .ms-box__text {
    padding-left: 20px;
    padding-right: 20px;
  }

  .ms-box__media {
    max-width: 100% !important;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
  }

  .ms-box__media img {
    width: 100% !important;
    max-width: 100%;
    border-radius: 0;
  }
}

/* ============================================================
   40. CARRELLO ALL'ESTREMA DESTRA DELL'HEADER
   ============================================================ */
.ms-cart {
  margin-left: auto;
}

/* La ricerca resta centrata e non si allarga oltre il suo limite */
.ms-search {
  flex: 0 1 620px;
}

@media (max-width: 640px) {
  .ms-search {
    flex: 1 1 100%;
  }
  .ms-cart {
    margin-left: 0;
  }
}

/* ============================================================
   41. MARGINI HERO PIÙ STRETTI
   ============================================================ */

/* --- Desktop: sopra e sotto la hero --- */
.single-product .site-content,
.single-product .content-area {
  padding-top: 18px !important;
}

.single-product div.product {
  margin-bottom: 8px !important;
}

/* La prima sezione sotto la hero si stacca meno */
.single-product div.product > .ms-section:first-of-type,
.single-product div.product > .related.products,
.single-product div.product > .up-sells.products {
  padding-top: 28px;
}

/* --- Mobile --- */
@media (max-width: 780px) {

  .single-product .site-content,
  .single-product .content-area {
    padding-top: 8px !important;
  }

  /* percorso ↔ carosello */
  .single-product .woocommerce-breadcrumb {
    margin-bottom: 6px !important;
  }

  /* gap generale della griglia: carosello ↔ titolo */
  .single-product div.product {
    row-gap: 14px !important;
    margin-bottom: 4px !important;
  }

  /* sopra il carosello */
  .single-product .woocommerce-product-gallery {
    margin-top: 0 !important;
  }

  /* sotto il carosello (prima del titolo) */
  .single-product .woocommerce-product-gallery__wrapper {
    margin-bottom: 0 !important;
  }

  .single-product .ms-thumbs {
    margin-top: 8px !important;
  }

  /* il titolo non si stacca dall'alto */
  .single-product .summary > *:first-child,
  .single-product .ms-eyebrow {
    margin-top: 0 !important;
  }
}

/* ============================================================
   42. CATALOGO: BULLET GIALLI + RECENSIONI A SINISTRA
   ============================================================ */

/* Pallini dei punti di forza gialli come nella scheda prodotto */
ul.products.ms-list li.product .ms-points ul li::before {
  background: var(--ms-star);
}

/* Riga voto allineata a sinistra */
ul.products.ms-list li.product .ms-rating {
  justify-content: flex-start;
  text-align: left;
}

/* ============================================================
   43. HOME: CARD SENZA PUNTI DI FORZA
   ============================================================ */
.home ul.products li.product .ms-points,
.page-template-front-page ul.products li.product .ms-points {
  display: none !important;
}

/* ============================================================
   44. HEADER SEMPRE VISIBILE (sticky su tutto il sito)
   ============================================================ */
.ms-header {
  position: sticky;
  top: 0;
  z-index: 900;
}

/* Se un elemento fisso del tema padre copre l'header, lo neutralizza */
.site-header {
  position: static !important;
}

/* ============================================================
   45. IMMAGINE HERO HOME CON BORDI ARROTONDATI
   ============================================================ */
.home .hero img,
.home .page-hero img,
.home .wp-block-cover,
.home .wp-block-cover img,
.home .wp-block-image img,
.home .hero-image img {
  border-radius: 16px;
  overflow: hidden;
}

/* ============================================================
   46. FIX OVERFLOW ORIZZONTALE SU MOBILE
   ============================================================ */
@media (max-width: 780px) {

  /* Nessun elemento può superare la larghezza dello schermo */
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* L'immagine dei blocchi img+testo stava dentro un contenitore
     con padding: width:100% la faceva sbordare. La riporto dentro. */
  .ms-box {
    padding-left: 16px;
    padding-right: 16px;
  }

  .ms-box__title,
  .ms-box__text {
    padding-left: 4px;
    padding-right: 4px;
  }

  .ms-box__media,
  .ms-box__media img {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 10px;
  }

  /* Griglie e contenitori non devono spingere oltre il bordo */
  .single-product div.product,
  .ms-buybox,
  .ms-buybox__inner,
  .summary.entry-summary,
  ul.products.ms-list li.product {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Le righe scorrevoli restano dentro lo schermo */
  .related.products ul.products,
  .up-sells.products ul.products {
    max-width: 100%;
  }
}

/* ============================================================
   47. PULSANTE "ACHETER MAINTENANT"
   ============================================================ */
.ms-buy-now {
  width: 100%;
  margin-top: 10px !important;
  padding: 15px 20px !important;
  border: 1.5px solid var(--ms-ink) !important;
  border-radius: var(--ms-radius-pill) !important;
  background: var(--ms-ink) !important;
  color: #fff !important;
  font-family: var(--ms-font-display) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.ms-buy-now:hover { opacity: 0.88; }

/* ============================================================
   48. CHECKOUT A DUE COLONNE (stile Shopify)
   ============================================================ */
.ms-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: 56px;
  align-items: start;
  max-width: 1120px;
  margin: 0 auto;
}

/* la colonna sinistra è aperta dentro il form */
.woocommerce-checkout .ms-checkout > form.checkout {
  display: contents;
}

.ms-checkout__main {
  grid-column: 1;
  min-width: 0;
}

.ms-checkout__aside {
  grid-column: 2;
  min-width: 0;
}

.ms-checkout__summary {
  position: sticky;
  top: 88px;
  padding: 24px;
  border: 1px solid var(--ms-line);
  border-radius: 14px;
  background: #fcfcfd;
}

.ms-checkout__summary-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--ms-font-display);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 18px;
}

.ms-checkout__summary-title span {
  font-family: var(--ms-font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--ms-ink-soft);
}

/* --- intestazioni di sezione --- */
.woocommerce-checkout .ms-checkout h3 {
  font-family: var(--ms-font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
  float: none;
  width: 100%;
  padding: 0;
}

/* --- campi form --- */
.woocommerce-checkout .form-row {
  margin: 0 0 16px;
  padding: 0;
}

.woocommerce-checkout .form-row label {
  display: block;
  margin-bottom: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ms-ink);
}

.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.woocommerce-checkout .select2-selection {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1.5px solid var(--ms-line);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  color: var(--ms-ink);
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  outline: none;
  border-color: var(--ms-ink);
}

.woocommerce-checkout .select2-selection--single {
  display: flex;
  align-items: center;
}

/* --- riepilogo: tabella prodotti --- */
.ms-checkout__summary .shop_table {
  width: 100%;
  border: 0;
  margin: 0 0 4px;
}

.ms-checkout__summary .shop_table th,
.ms-checkout__summary .shop_table td {
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--ms-line);
  font-size: 14px;
  background: none;
}

.ms-checkout__summary .shop_table .product-name {
  color: var(--ms-ink);
  font-weight: 500;
}

.ms-checkout__summary .shop_table .product-total {
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
}

.ms-checkout__summary .cart-subtotal th,
.ms-checkout__summary .cart-subtotal td,
.ms-checkout__summary .woocommerce-shipping-totals th,
.ms-checkout__summary .woocommerce-shipping-totals td {
  font-size: 14px;
  color: var(--ms-ink-soft);
  font-weight: 400;
}

.ms-checkout__summary .order-total th {
  font-family: var(--ms-font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ms-ink);
}

.ms-checkout__summary .order-total td {
  text-align: right;
}

.ms-checkout__summary .order-total .amount {
  font-family: var(--ms-font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ms-ink);
}

/* --- box metodi di pagamento --- */
.ms-checkout__summary #payment,
.ms-checkout .woocommerce-checkout-payment {
  background: none;
  border-radius: 0;
  margin-top: 18px;
}

.ms-checkout__summary #payment ul.payment_methods,
.ms-checkout .payment_methods {
  border: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-checkout .payment_methods li {
  margin: 0 0 8px;
  padding: 14px 16px;
  border: 1.5px solid var(--ms-line);
  border-radius: 10px;
  list-style: none;
}

.ms-checkout .payment_methods li input[type="radio"] {
  accent-color: var(--ms-accent);
  margin-right: 8px;
}

.ms-checkout .payment_box {
  background: #f6f7f9 !important;
  border-radius: 8px;
  margin-top: 12px;
  font-size: 13px;
}

.ms-checkout .payment_box::before { display: none !important; }

/* --- pulsante ordine --- */
.ms-checkout #place_order {
  width: 100%;
  margin-top: 16px;
  padding: 16px 20px;
  border: 0;
  border-radius: var(--ms-radius-pill);
  background: var(--ms-accent);
  color: #fff;
  font-family: var(--ms-font-display);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ms-checkout #place_order:hover { background: var(--ms-accent-dk); }

/* --- badge sicurezza --- */
.ms-checkout__secure {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--ms-ink-soft);
}

.ms-checkout__secure svg { width: 17px; height: 17px; }

/* --- responsive --- */
@media (max-width: 900px) {
  .ms-checkout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  /* Il riepilogo va sopra il form, come su mobile Shopify */
  .ms-checkout__aside {
    grid-column: 1;
    grid-row: 1;
  }

  .ms-checkout__main {
    grid-column: 1;
    grid-row: 2;
  }

  .ms-checkout__summary {
    position: static;
  }
}

/* ============================================================
   49. ACCORDION RIEPILOGO CHECKOUT SU MOBILE
   ============================================================ */

/* Su desktop la barra a fisarmonica non serve */
.ms-checkout__toggle { display: none; }

@media (max-width: 900px) {

  .ms-checkout__summary {
    padding: 0;
    overflow: hidden;
  }

  .ms-checkout__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 20px;
    border: 0;
    background: #f6f7f9;
    cursor: pointer;
    font-family: inherit;
  }

  .ms-checkout__toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ms-accent);
    font-size: 14.5px;
    font-weight: 600;
  }

  .ms-checkout__toggle-label svg {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
  }

  .ms-checkout__toggle[aria-expanded="true"] .ms-checkout__toggle-label svg {
    transform: rotate(180deg);
  }

  .ms-checkout__toggle-total {
    font-family: var(--ms-font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--ms-ink);
  }

  .ms-checkout__collapsible {
    padding: 20px;
    border-top: 1px solid var(--ms-line);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ms-checkout__toggle-label svg { transition: none; }
}

/* ============================================================
   50. SCHEDA PRODOTTO: PULSANTE UNICO VERSO IL CHECKOUT
   ============================================================ */
.ms-buy-now { display: none !important; }

/* ============================================================
   51. HOME "OFFERTE SPECIALI": CARD A SINISTRA + CTA ROSSA
   ============================================================ */

/* Allineamento a sinistra di tutti i contenuti della card */
.home ul.products li.product,
.home ul.products li.product * {
  text-align: left;
}

.home ul.products li.product {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.home ul.products li.product .star-rating {
  margin-left: 0;
}

.home ul.products li.product .price {
  font-family: var(--ms-font-display);
  font-weight: 700;
}

/* Pulsante rosso arrotondato come nel catalogo */
.home ul.products li.product .button,
.home ul.products li.product .add_to_cart_button {
  display: inline-block;
  width: 100%;
  margin-top: 12px;
  padding: 12px 18px !important;
  border: 0 !important;
  border-radius: var(--ms-radius-pill) !important;
  background: var(--ms-accent) !important;
  background-image: none !important;
  color: #fff !important;
  font-family: var(--ms-font-display) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-align: center !important;
  box-shadow: none !important;
  transition: background 0.15s ease;
}

.home ul.products li.product .button:hover,
.home ul.products li.product .add_to_cart_button:hover {
  background: var(--ms-accent-dk) !important;
}

/* Spinge la CTA in fondo così le card restano allineate tra loro */
.home ul.products li.product {
  height: 100%;
}

.home ul.products li.product .button,
.home ul.products li.product .added_to_cart {
  margin-top: auto;
}

/* ============================================================
   52. HOME: MENO SPAZIO TRA HEADER E HERO
   ============================================================ */
.home .site-content,
.home .content-area,
.home #primary,
.home #content,
.home-page .site-content,
.page-template-template-homepage .site-content {
  padding-top: 12px !important;
  margin-top: 0 !important;
}

.home .site-main > *:first-child,
.home #primary > *:first-child {
  margin-top: 0 !important;
}

@media (max-width: 780px) {
  .home .site-content,
  .home .content-area,
  .home #primary,
  .home #content {
    padding-top: 6px !important;
  }
}

/* ============================================================
   53. LANDING: SPAZIO SOPRA LA HERO (override Elementor kit)
   ============================================================ */
.single-product #content.site-content {
  padding-top: 14px !important;
  margin-top: 0 !important;
}

/* Elementor applica il padding tramite il kit globale sul contenitore:
   lo neutralizziamo alla radice del contenuto */
.single-product #page > #content.site-content {
  padding-top: 14px !important;
}

.single-product .storefront-breadcrumb {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.single-product .storefront-breadcrumb + #content,
.single-product #content > .col-full:first-child {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

@media (max-width: 780px) {
  .single-product #content.site-content,
  .single-product #page > #content.site-content {
    padding-top: 8px !important;
  }
}

/* ============================================================
   54. LANDING: MARGINE SOTTO LE BREADCRUMB
   ============================================================ */
.single-product .storefront-breadcrumb {
  margin-bottom: 8px !important;
  padding-bottom: 0 !important;
}

/* Storefront mette il breadcrumb dentro un .col-full con padding proprio */
.single-product .storefront-breadcrumb .col-full {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

@media (max-width: 780px) {
  .single-product .storefront-breadcrumb {
    margin-bottom: 4px !important;
  }
}

/* ============================================================
   55. MOBILE: MARGINE SOTTO IL CAROSELLO
   ============================================================ */
@media (max-width: 780px) {
  .single-product .woocommerce-product-gallery {
    margin-bottom: 0 !important;
  }
}

/* ============================================================
   56. SPAZIO TRA CAROSELLO E MINIATURE
   ============================================================ */

/* flexslider avvolge le slide in .flex-viewport, che ha un margine
   inferiore prima della riga di miniature */
.single-product .flex-viewport {
  margin-bottom: 8px !important;
}

.single-product .flex-control-thumbs,
.single-product .ms-thumbs {
  margin-top: 8px !important;
}

@media (max-width: 780px) {
  .single-product .flex-viewport {
    margin-bottom: 6px !important;
  }
  .single-product .flex-control-thumbs,
  .single-product .ms-thumbs {
    margin-top: 6px !important;
  }
}

/* ============================================================
   57. HOME: MARGINE SOTTO L'HEADER
   ============================================================ */
.home #masthead.site-header,
.home .site-header {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.home #content.site-content {
  padding-top: 10px !important;
  margin-top: 0 !important;
}

@media (max-width: 780px) {
  .home #content.site-content {
    padding-top: 6px !important;
  }
}

/* ============================================================
   58. HOME: IMMAGINE HERO (sfondo container Elementor) ARROTONDATA
   ============================================================ */
.home .hostinger-ai-hero-for-online-store-6,
.home .hostinger-ai-background-image.hostinger-ai-hero-for-online-store-6 {
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* Elementor rende lo sfondo con uno pseudo-elemento ::before:
   deve ereditare lo stesso raggio, altrimenti gli angoli restano dritti */
.home .hostinger-ai-hero-for-online-store-6::before {
  border-radius: 16px !important;
}

/* ============================================================
   59. CATALOGO: MARGINI STELLINE
   ============================================================ */
ul.products.ms-list li.product .ms-rating {
  margin: 0 0 14px !important;
}

ul.products.ms-list li.product .ms-rating .star-rating {
  margin: 0 !important;
  float: none !important;
}

/* Il ::before di Storefront può aggiungere spazio sotto */
ul.products.ms-list li.product .star-rating::before {
  margin: 0 !important;
}

/* ============================================================
   60. SIDEBAR A SINISTRA + SLIDER PREZZO
   ============================================================ */

/* Sposta la colonna filtri prima del contenuto */
.woocommerce-page.right-sidebar #primary,
body.woocommerce-page #primary {
  order: 2;
}

body.woocommerce-page #secondary,
.woocommerce-page.right-sidebar #secondary {
  order: 1;
}

/* Se il tema padre usa i float invece del flex */
.woocommerce-page.right-sidebar #secondary {
  float: left !important;
}

/* --- maniglie dello slider prezzo --- */
.price_slider_wrapper .ui-slider {
  position: relative;
  height: 4px;
  margin: 20px 6px 24px;
  background: var(--ms-line);
  border: 0;
  border-radius: 2px;
}

.price_slider_wrapper .ui-slider .ui-slider-range {
  position: absolute;
  height: 100%;
  background: var(--ms-accent);
  border-radius: 2px;
}

.price_slider_wrapper .ui-slider .ui-slider-handle {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  transform: translateY(-50%);
  border: 3px solid var(--ms-accent);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  cursor: grab;
  outline: none;
}

.price_slider_wrapper .ui-slider .ui-slider-handle:active { cursor: grabbing; }

/* ============================================================
   61. DRAWER FILTRI MOBILE: PIÙ LARGO + PULSANTE LEGGIBILE
   ============================================================ */
@media (max-width: 900px) {

  /* Barra più larga */
  #secondary,
  .ms-filter-area {
    width: min(440px, 92vw) !important;
  }

  /* Pulsante di chiusura: testo scuro, non bianco su bianco */
  .ms-filters-close {
    color: var(--ms-ink) !important;
    background: none !important;
  }

  .ms-filters-close span {
    color: var(--ms-ink) !important;
  }

  /* La X un po' più grande e cliccabile */
  .ms-filters-close span[aria-hidden="true"] {
    font-size: 26px;
    line-height: 1;
    color: var(--ms-ink-soft) !important;
  }
}

/* ============================================================
   62. MARGINE SOPRA LA LISTA (desktop)
   ============================================================ */
.woocommerce-products-header {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.woocommerce-page .storefront-breadcrumb {
  margin-bottom: 6px !important;
}

.woocommerce-page .storefront-breadcrumb .col-full {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ============================================================
   63. FILTRI: DRAWER GIÀ SOTTO I 1024px + NIENTE DOPPIONI
   ============================================================ */

/* Tra 901 e 1024px la griglia a due colonne si stringe troppo:
   passiamo al drawer mobile già qui, invece che a 900. */
@media (min-width: 901px) and (max-width: 1024px) {

  .ms-filters-toggle { display: inline-flex !important; }

  #secondary,
  .ms-filter-area {
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 999;
    width: min(440px, 92vw) !important;
    height: 100%;
    padding: 20px;
    background: #fff;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }

  .ms-filters-open #secondary,
  .ms-filters-open .ms-filter-area {
    transform: translateX(0);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.18);
  }

  .ms-filters-open .ms-backdrop { display: block; }
  .ms-filters-open { overflow: hidden; }

  .ms-filters-close {
    display: flex !important;
    color: var(--ms-ink) !important;
  }

  /* Filtri fuori dal flusso (drawer): la griglia resta a colonna
     singola con header sopra e prodotti sotto */
  .woocommerce-page #content > .col-full {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "header"
      "products" !important;
  }
  #primary { width: 100%; }
}

/* Nasconde una eventuale seconda sidebar di Storefront con dentro
   dei filtri duplicati: teniamo solo la nostra .ms-filter-area */
.woocommerce-page #secondary:not(.ms-filter-area) .widget_layered_nav,
.woocommerce-page #secondary:not(.ms-filter-area) .widget_price_filter,
.woocommerce-page #secondary:not(.ms-filter-area) .widget_rating_filter,
.woocommerce-page #secondary:not(.ms-filter-area) .widget_layered_nav_filters {
  display: none;
}

/* ============================================================
   64. SLIDER PREZZO: MANIGLIE NON TAGLIATE E ALLINEATE
   ============================================================ */
.price_slider_wrapper {
  padding: 0 9px;   /* spazio perché le maniglie non escano dal box */
}

.price_slider_wrapper .price_slider,
.price_slider_wrapper .ui-slider {
  position: relative;
  height: 4px !important;
  margin: 18px 0 24px !important;
  background: var(--ms-line) !important;
  border: 0 !important;
  border-radius: 2px !important;
}

.price_slider_wrapper .ui-slider .ui-slider-range {
  position: absolute;
  top: 0;
  height: 100% !important;
  background: var(--ms-accent) !important;
  border-radius: 2px;
}

.price_slider_wrapper .ui-slider .ui-slider-handle {
  position: absolute !important;
  top: 2px !important;          /* centro sulla barra alta 4px */
  width: 16px !important;
  height: 16px !important;
  margin: 0 0 0 -8px !important; /* metà larghezza, per centrare sul punto */
  transform: translateY(-50%);
  border: 3px solid var(--ms-accent) !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  cursor: grab;
  outline: none;
  box-sizing: border-box;
}

/* La maniglia al minimo non deve uscire dal bordo sinistro */
.price_slider_wrapper .ui-slider .ui-slider-handle:first-of-type {
  margin-left: -8px !important;
}

/* ============================================================
   65. LARGHEZZA SITO 1260 + BILANCIAMENTO CATALOGO/SCHEDA
   ============================================================ */

/* Larghezza massima di tutto il sito */
:root {
  --ms-container: 1260px;
}

.col-full {
  max-width: 1260px !important;
}

/* --- Filtri: contenuto allineato a sinistra --- */
#secondary .widget,
#secondary .widget * {
  text-align: left;
}

.price_slider_amount {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
}

.price_slider_amount .button {
  order: 2;
  margin: 0;
}

.price_slider_amount .price_label {
  order: 1;
  text-align: left;
}

/* --- Scheda prodotto più larga, soprattutto la colonna centrale --- */
@media (min-width: 1025px) {
  .single-product div.product {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr) 320px;
    column-gap: 36px;
  }
}

/* ============================================================
   66. DESCRIZIONE FISSA SOPRA IL CATALOGO
   ============================================================ */
.ms-shop-desc {
  max-width: 70ch;
  margin: 0 0 8px;
  color: var(--ms-ink-soft);
  font-size: 15px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ms-shop-desc.is-open {
  -webkit-line-clamp: unset;
  overflow: visible;
}

.ms-shop-desc__toggle,
.ms-term-desc__toggle {
  margin: 6px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ms-accent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

/* ============================================================
   67. INTESTAZIONE CATALOGO DA CAMPO DEDICATO
   ============================================================ */
.ms-catalog-header {
  grid-column: 1 / -1;
  margin-bottom: 8px;
}

.ms-catalog-header__title {
  font-family: var(--ms-font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 12px;
}

.ms-catalog-header__desc {
  max-width: 70ch;
  color: var(--ms-ink-soft);
  font-size: 15px;
  line-height: 1.55;
}

.ms-catalog-header__desc p { margin: 0 0 8px; }
.ms-catalog-header__desc p:last-child { margin: 0; }

@media (max-width: 780px) {
  .ms-catalog-header__title { font-size: 24px; }
}

/* ============================================================
   68. NASCONDE TITOLO SHOP E CONTENUTO PAGINA NEGOZIO
   ============================================================ */
.post-type-archive-product .woocommerce-products-header__title,
.post-type-archive-product .page-title,
body.woocommerce-shop .woocommerce-products-header__title {
  display: none !important;
}

/* Eventuale contenuto residuo della pagina Shop (h2/p incollati prima) */
.post-type-archive-product .woocommerce-archive-description,
.post-type-archive-product .term-description,
.post-type-archive-product .page-description {
  display: none !important;
}

/* ============================================================
   69. TABELLA SPECIFICHE NELLA DESCRIZIONE (ul.tecnique)
   ============================================================ */
.ms-description__body ul.tecnique,
ul.tecnique {
  list-style: none;
  margin: 20px 0;
  padding: 0;
  border-top: 1px solid var(--ms-line);
}

.ms-description__body ul.tecnique li,
ul.tecnique li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ms-line);
  list-style: none;
}

/* Righe alternate: la dispari con sfondo grigio chiaro */
.ms-description__body ul.tecnique li:nth-child(odd),
ul.tecnique li:nth-child(odd) {
  background: #f6f7f9;
}

.ms-description__body ul.tecnique li .name,
ul.tecnique li .name {
  flex: 1 1 auto;
  color: var(--ms-ink-soft);
  font-size: 14px;
  line-height: 1.4;
}

.ms-description__body ul.tecnique li .val,
ul.tecnique li .val {
  flex: 0 0 auto;
  text-align: right;
  color: var(--ms-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

@media (max-width: 600px) {
  .ms-description__body ul.tecnique li,
  ul.tecnique li {
    gap: 16px;
    padding: 12px 12px;
  }
}



/* Stessa cosa per la descrizione categoria e la woocommerce notices */
.woocommerce-page #content > .col-full > .woocommerce-notices-wrapper {
  flex: 0 0 100%;
  width: 100%;
  order: -1;
}

/* ============================================================
   72. HEADER SENZA MARGINI LATERALI (a tutta larghezza)
   ============================================================ */
.ms-header__inner.col-full {
  max-width: none !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (max-width: 640px) {
  .ms-header__inner.col-full {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ============================================================
   73. HEADER: PADDING LATERALE A ZERO (tenendo sopra/sotto)
   ============================================================ */
.ms-header {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Storefront/Elementor mettono il padding sul .site-header esterno */
.site-header,
#masthead.site-header {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ============================================================
   74. BARRA DI NAVIGAZIONE SOTTO L'HEADER
   ============================================================ */
.ms-navbar {
  background: #fff;
  border-bottom: 1px solid var(--ms-line);
}

.ms-navbar__inner {
  max-width: none !important;
  padding: 0 24px;
}

.ms-navbar__menu {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-navbar__menu li {
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

.ms-navbar__menu a {
  display: block;
  padding: 13px 0;
  color: var(--ms-ink);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.ms-navbar__menu a:hover {
  color: var(--ms-accent);
}

.ms-navbar__menu li.current-menu-item a,
.ms-navbar__menu li.current_page_item a {
  color: var(--ms-accent);
  border-bottom-color: var(--ms-accent);
}

/* --- mobile: carosello orizzontale scorrevole --- */
@media (max-width: 900px) {
  .ms-navbar__inner {
    padding: 0 16px;
  }

  .ms-navbar__menu {
    gap: 22px;
    overflow-x: auto;
    scrollbar-width: none;           /* Firefox */
    -ms-overflow-style: none;        /* IE/Edge */
    scroll-snap-type: x proximity;
  }

  .ms-navbar__menu::-webkit-scrollbar {
    display: none;                    /* Chrome/Safari */
  }

  .ms-navbar__menu li {
    scroll-snap-align: start;
  }

  .ms-navbar__menu a {
    padding: 12px 0;
    font-size: 13.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ms-navbar__menu a { transition: none; }
}

/* ============================================================
   75. TOOLBAR CATALOGO: SEMPRE IMPILATA (no accavallamento)
   ============================================================ */
.ms-toolbar {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

.ms-toolbar .woocommerce-ordering {
  order: 1 !important;
  margin: 0 !important;
}

.ms-toolbar .woocommerce-result-count {
  order: 2 !important;
}

.ms-toolbar .ms-filters-toggle {
  order: 0 !important;
}

/* ============================================================
   76. CATALOGO: SOPRATITOLO CATEGORIA + TITOLO GRASSETTO
   ============================================================ */
.ms-card__eyebrow {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ms-ink-soft);
  line-height: 1.3;
}

ul.products.ms-list li.product .ms-card__title,
ul.products.ms-list li.product .ms-card__title a {
  font-weight: 700 !important;
}