/*
Theme Name:         A5TRATTO Theme Child v9
Theme URI:          https://www.astratto.agency
Description:        Another Wordpress Starter Child Theme 
Template:           a5tratto-theme-v9
Version:            V.9.0.0
Author:             Giuseppe Checchia - Giorgio Rizza
License:            MIT License
License URI:        http://opensource.org/licenses/MIT
*/

#carousel-owl-home-1 .carousel-inner-bg,
.container-fluid.my-2.d-flex.align-items-center.flex-row-reverse {
  background-position: 50% 0% !important;
}

/* LCP home: owl.carousel.css nasconde il carosello (display:none) finché il JS non lo inizializza.
   Prima dell'init mostriamo solo il primo slide, così l'immagine compare senza aspettare il JS. */
#carousel-owl-home-1:not(.owl-loaded) {
  display: block;
}
#carousel-owl-home-1:not(.owl-loaded) > .item-carousel:not(:first-child) {
  display: none;
}

/* Accessibilità: area cliccabile dei dots almeno 24x24px (prima 8x8 e 12x24), aspetto invariato.
   Home: il pallino da 8px è lo sfondo ritagliato al contenuto, il padding allarga solo l'area di tocco. */
#carousel-owl-home-1 .owl-dots button.owl-dot { /* "button": il main.css del padre arriva dopo con la stessa specificità */
  box-sizing: content-box;
  padding: 8px !important; /* owl.carousel.css forza padding:0 !important sui dots */
  margin: 0;
  background-clip: content-box !important; /* anche sul dot .active, che ridefinisce background con specificità maggiore */
}
.slider_products .owl-dots .owl-dot {
  min-width: 24px;
  min-height: 24px;
  margin: 0;
}

/* Pallini Swiper nelle card prodotto: stessa tecnica (8px visibili, 24px cliccabili); il margine negativo li lascia dov'erano */
.tease-product .preview_media .swiper-pagination .swiper-pagination-bullet {
  box-sizing: content-box;
  padding: 8px;
  margin: -8px 0;
  background-clip: content-box;
}

/* Link "nome marca" nella pagina prodotto: era alto 18px, inline-block lo porta all'altezza della riga */
.section_slider_marca .box_product_marca .innerbox .nome_marca {
  display: inline-block;
  min-height: 24px;
}

/* YITH Wishlist con template PHP (vedi functions.php): stessa posizione del pulsante React nelle card
   (in basso a destra, solo icona). Le regole per .yith-add-to-wishlist-button-block restano in prods.css del padre. */
body .tease-product .yith-wcwl-add-to-wishlist {
  position: absolute;
  bottom: 2px;
  right: 15px;
  margin: 0;
}
/* Testo nascosto alla vista ma non agli screen reader (con display:none il link restava senza nome accessibile) */
body .tease-product .yith-wcwl-add-to-wishlist span,
body .tease-product .yith-wcwl-add-to-wishlist .feedback {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Come il pulsante React: cuore della stessa grandezza visiva; nella scheda prodotto allineato a sinistra.
   YITH impagina .yith-wcwl-add-button come colonna flex centrata. "body" perché il CSS di YITH arriva dopo questo file. */
body .yith-wcwl-add-to-wishlist svg.yith-wcwl-icon-svg {
  width: 32px;
  height: 32px;
}
body .tease-product .yith-wcwl-add-to-wishlist svg.yith-wcwl-icon-svg {
  width: 28px;
  height: 28px;
}
body .yith-wcwl-add-to-wishlist--single .yith-wcwl-add-button {
  align-items: flex-start;
}
/* Scheda prodotto: cuore a metà tra "Aggiungi al carrello" e i pulsanti PayPal (sopra ci sono già ~26px),
   grande come nell'originale */
body .yith-wcwl-add-to-wishlist--single {
  margin: 0 0 26px;
}
@media (max-width: 767.98px) {
  body .yith-wcwl-add-to-wishlist--single {
    margin: 10px 0 32px;
  }
}
body .yith-wcwl-add-to-wishlist--single svg.yith-wcwl-icon-svg {
  width: 30px;
  height: 30px;
}
body .yith-wcwl-add-to-wishlist--single a.add_to_wishlist,
body .yith-wcwl-add-to-wishlist--single a.view-wishlist {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body .yith-wcwl-add-to-wishlist--single a.add_to_wishlist svg.yith-wcwl-icon-svg,
body .yith-wcwl-add-to-wishlist--single a.view-wishlist svg.yith-wcwl-icon-svg {
  margin: 0;
}
/* Stato "già in lista" (template in woocommerce/add-to-wishlist-*.php del child): cuore pieno come l'originale */
body .yith-wcwl-add-to-wishlist a.view-wishlist {
  color: inherit;
  text-decoration: none;
}
/* Pagina lista desideri, versione mobile di YITH: il cestino per togliere un prodotto è <i class="fa fa-trash">,
   che dipendeva da Font Awesome (tolto). Stessa icona FA5 come maschera SVG, colore del testo. */
body .wishlist_table i.fa-trash {
  display: inline-block;
  width: 14px;
  height: 16px;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Avviso "aggiunto alla lista": stesso aspetto dell'avviso della wishlist originale (React).
   La posizione verticale (vicino al cuore cliccato) la imposta lo script in functions.php. */
body #yith-wcwl-popup-message {
  width: 300px;
  max-width: calc(100vw - 32px);
  left: 50%;
  margin-left: 0 !important;
  transform: translateX(-50%);
  padding: 10px 17px;
  border-radius: 8px;
  box-shadow: 0 2px 7px 1px rgba(77, 152, 209, .12);
  font-size: .8rem;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(0, 0, 0, .87);
  text-align: center;
  z-index: 999;
}

/* Filtri shop (Search & Filter): nasconde le voci senza prodotti (conteggio 0), tranne "Tutti" (sf-item-0).
   Il conteggio lo aggiorna Search & Filter a ogni scelta, quindi restano visibili solo le combinazioni che danno risultati. */
.searchandfilter li[data-sf-count="0"]:not(.sf-item-0) {
  display: none !important; /* il CSS dei filtri del tema impone il display delle voci */
}

/* Logo: width/height nel markup servono solo a riservare lo spazio (proporzioni); la misura la decidono
   max-height del tema, quindi la larghezza resta automatica */
header img.logo,
footer img.logo-footer {
  width: auto;
}
/* Logo footer (lazy): altezza fissa = quella che già aveva (max-height 60px del tema), così lo spazio è riservato
   anche prima che l'immagine arrivi (252x60) */
footer img.logo-footer {
  height: 60px;
}

/* Titolo slider prodotti: ora è h2.h4 (ordine titoli), stesso aspetto del vecchio h4 */
.title_slider h2.h4 {
  font-size: 1.5rem;
  font-weight: normal;
}

/* Lista desideri su mobile (template mobile di YITH): una card per prodotto */
/* Un solo titolo: resta quello della pagina (h1), si nasconde il nome della lista di YITH (h2 + "Modifica titolo") */
body .yith-wcwl-form .wishlist-title-container { display: none; }
body .wishlist_table.mobile { margin: 0; padding: 0; list-style: none; }
body .wishlist_table.mobile li {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  column-gap: 16px;
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}
body .wishlist_table.mobile li .item-wrapper { display: contents; }
body .wishlist_table.mobile li .item-wrapper .product-thumbnail { grid-column: 1; grid-row: 1 / span 2; max-width: none; margin: 0; }
body .wishlist_table.mobile .product-thumbnail img { width: 96px; height: 128px; object-fit: cover; max-width: none; }
body .wishlist_table.mobile li .item-wrapper .item-details { grid-column: 2; width: auto; padding-right: 28px; }
body .wishlist_table.mobile .product-name h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 600; line-height: 1.3; }
body .wishlist_table.mobile .product-name h3 a { color: inherit; text-decoration: none; }
body .wishlist_table.mobile table { margin: 0; border: 0; width: auto; }
body .wishlist_table.mobile li td { padding: 0; font-size: inherit; border: 0; text-align: left; background: none; }
body .wishlist_table.mobile td.label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
body .wishlist_table.mobile .item-details-table td.value { font-size: 1rem; }
body .wishlist_table.mobile li .additional-info-wrapper { grid-column: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; }
body .wishlist_table.mobile .additional-info td.value { font-size: .8rem; }
body .wishlist_table.mobile li .additional-info-wrapper .product-add-to-cart { margin: 4px 0 0; width: 100%; }
body .wishlist_table.mobile .product-add-to-cart a {
  display: block;
  width: 100%;
  padding: 8px 16px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
  text-align: center;
  text-decoration: none;
  font-size: .9rem;
}
body .wishlist_table.mobile .product-remove { position: absolute; top: 16px; right: 0; margin: 0; }
body .wishlist_table.mobile .product-remove a { display: block; padding: 4px; color: inherit; }

/* Filtri shop desktop a tendina (22/10/2026). Backup del file precedente: Coloriamoci/backup/filtri-tendina-20261022/.
   Da 768px: ogni filtro è una voce con freccia; la lista dei valori si apre in una tendina sotto la voce
   (classe .open_filter, aggiunta dal toggle già presente in custom.js; la chiusura delle altre voci è in functions.php).
   Colori: solo quelli già usati dal tema (#333333, #ffffff, ombra rgba(0,0,0,.16)). Mobile invariato. */
@media (min-width: 768px) {
  .before-shop-loop #box_search_product .searchandfilter > ul > li {
    position: relative;
    max-width: none;
  }
  .before-shop-loop #box_search_product .searchandfilter > ul > li > h4 {
    position: relative;
    margin: 0;
    padding: 0 28px 10px 0;
    border-bottom: 1px solid #333333;
    cursor: pointer;
    user-select: none;
  }
  .before-shop-loop #box_search_product .searchandfilter > ul > li > h4:after {
    content: ">";
    position: absolute;
    right: 2px;
    top: -2px;
    font-size: 22px;
    line-height: 1;
    color: #333333;
    transform: rotate(90deg);
    transition: transform .3s;
  }
  .before-shop-loop #box_search_product .searchandfilter > ul > li.open_filter > h4:after {
    transform: rotate(270deg);
  }
  .before-shop-loop #box_search_product .searchandfilter > ul > li > ul {
    display: none;
    position: absolute;
    z-index: 5;
    top: 100%;
    left: 15px;
    right: 15px;
    min-width: 200px;
    max-height: 360px;
    overflow-y: auto;
    margin: 0;
    padding: 14px 14px 6px;
    background: #ffffff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .16);
  }
  .before-shop-loop #box_search_product .searchandfilter > ul > li.open_filter > ul {
    display: block;
  }
}

/* Carrello e checkout a blocchi (26/10/2026): stessi pulsanti e titoli del checkout classico
   (valori del tema: assets/main.css, pulsanti .woocommerce .button). Solo colori già del tema. */
.wc-block-components-button.wc-block-cart__submit-button,
.wc-block-components-button.wc-block-components-checkout-place-order-button {
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #ffffff;
  background: #fd8552;
  border: 2px solid #fd8552;
  border-radius: 30px;
  transition: all 0.3s ease;
}
.wc-block-components-button.wc-block-cart__submit-button:not(.is-link):hover,
.wc-block-components-button.wc-block-components-checkout-place-order-button:not(.is-link):hover {
  color: #333333;
  background: #ffffff;
  border-color: #fd8552;
}
.wp-block-woocommerce-checkout .wc-block-components-title.wc-block-components-title,
.wp-block-woocommerce-cart .wc-block-cart__totals-title {
  font-size: 28px;
  font-weight: 400;
}

/* Contatore carrello header: lo span è sempre presente (cache condivisa), vuoto = nascosto. 27/10/2026 */
.btn-cart .n_cart_items:empty {
  display: none;
}