/* =========================================================
   RAMBLA WOO STYLE — SOLO PAGINA CATEGORIA / SHOP
   Tema: Flatsome (markup .product-small .box, NON ul.products li.product).
   La scheda prodotto (single product) NON viene toccata: resta come da tema.
   Colore accento iniettato via variabili: --rambla-accent / --rambla-accent-hover
   ========================================================= */
:root{
  --rambla-accent:#eb048c;
  --rambla-accent-hover:#c80378;
  --rambla-ink:#1F1F1F;
  --rambla-muted:#737373;
  --rambla-line:#EAEAEA;
  --rambla-soft:#F5F5F5;
  --rambla-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* Font Inter sulle pagine archivio/shop (il CSS è caricato solo lì dal PHP) */
.tax-product_cat,
.post-type-archive-product,
.woocommerce.archive{
  font-family:var(--rambla-font);
}

/* =========================================================
   A) TITOLO CATEGORIA + CONTEGGIO
   ========================================================= */
.woocommerce-products-header__title,
.tax-product_cat h1.page-title,
.archive.woocommerce h1.page-title,
.woocommerce .shop-page-title{
  font-family:var(--rambla-font)!important;
  font-weight:900!important;
  color:var(--rambla-ink)!important;
  letter-spacing:-.01em;
}
.woocommerce .woocommerce-result-count{
  font-family:var(--rambla-font);
  font-size:14px;
  color:var(--rambla-muted);
}

/* =========================================================
   B) CARD PRODOTTO (Flatsome: .product-small.col > .col-inner > .product-small.box)
   Card della stessa altezza: la colonna e il box si allungano, il bottone
   "Dettagli" resta ancorato in basso.
   ========================================================= */
.woocommerce .product-small.col .col-inner{
  height:100%;
}
.woocommerce .product-small.box{
  display:flex!important;
  flex-direction:column!important;
  height:100%!important;
  background:#fff!important;
  border:1px solid var(--rambla-line)!important;   /* bordo visibile come l'originale */
  border-radius:20px!important;
  overflow:hidden!important;
  box-shadow:0 10px 25px rgba(0,0,0,.06)!important;
  transition:transform .3s ease, box-shadow .3s ease!important;
}
/* Rimuove bordi + ombra "box prodotto" di Flatsome (row-box-shadow / has-shadow)
   che disegnava il riquadro/bordo attorno alla card. Resta solo l'ombra
   morbida della nostra .box. */
.woocommerce .product-small.col,
.woocommerce .product-small.col .col-inner,
.woocommerce .product-small .box-image,
.woocommerce .product-small .box-text{
  border:none!important;
}
.woocommerce .products.has-shadow .col-inner,
.woocommerce .products.row-box-shadow-1 .col-inner,
.woocommerce .row-box-shadow-1 .col-inner,
.woocommerce .product-small.col .col-inner{
  box-shadow:none!important;
}
.woocommerce .product-small.col:hover .product-small.box,
.woocommerce .product-small.box:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px rgba(0,0,0,.08)!important;
}

/* ---- IMMAGINE: area uniforme, immagine intera (no deformazione/crop) ---- */
.woocommerce .product-small .box-image{
  position:relative;
  flex:0 0 auto;
  margin:0!important;
  background:#fff;
  aspect-ratio:4/3;
  overflow:hidden;
}
.woocommerce .product-small .box-image .image-fade_in_back,
.woocommerce .product-small .box-image > a,
.woocommerce .product-small .box-image .image-fade_in_back > a{
  display:block;
  width:100%;
  height:100%;
  position:relative;
  z-index:2;          /* il link immagine sta SOPRA gli overlay */
  cursor:pointer;
}
/* Gli overlay strumenti di Flatsome (spesso vuoti) NON devono coprire/bloccare
   il click sull'immagine */
.woocommerce .product-small .box-image .image-tools{
  pointer-events:none;
}
.woocommerce .product-small .box-image img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;   /* mostra tutta l'immagine, niente taglio */
  object-position:center;
  transition:transform 600ms cubic-bezier(.22,1,.36,1)!important;  /* zoom morbido come originale */
}

/* No fade / niente "seconda immagine" Flatsome: opacità sempre piena. */
.woocommerce .product-small .box-image img,
.woocommerce .product-small .image-fade_in_back img{
  opacity:1!important;
  filter:none!important;
}
/* HOVER come l'originale: zoom dell'immagine (la stessa, non una seconda). */
.woocommerce .product-small.box:hover .box-image img,
.woocommerce .product-small.col:hover .box-image img{
  transform:scale(1.12)!important;
}
/* Nasconde un'eventuale seconda immagine hover di Flatsome */
.woocommerce .product-small .box-image img.show-on-hover,
.woocommerce .product-small .box-image .back-image,
.woocommerce .product-small .box-image img:nth-child(2){
  display:none!important;
}

/* ---- TESTO CARD: cresce per riempire, bottone in fondo ---- */
.woocommerce .product-small .box-text{
  flex:1 1 auto!important;
  display:flex!important;
  flex-direction:column!important;
  padding:18px 20px 20px!important;
  text-align:left!important;
}

/* Etichetta categoria sopra al titolo (se attiva in Flatsome) */
.woocommerce .product-small .box-text .category{
  font-size:11px!important;
  font-weight:700!important;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--rambla-muted)!important;
  margin:0 0 4px!important;
}

/* Titolo prodotto */
.woocommerce .product-small .product-title,
.woocommerce .product-small .name.product-title,
.woocommerce .product-small .woocommerce-loop-product__title{
  font-family:var(--rambla-font)!important;
  font-size:17px!important;
  font-weight:600!important;
  font-style:normal!important;
  line-height:1.3!important;
  letter-spacing:normal!important;
  color:#14181F!important;              /* nero-blu profondo, premium */
  margin:0 0 10px!important;
  padding:0!important;
  text-align:left!important;
  text-transform:lowercase!important;   /* tutto minuscolo... */
  display:block!important;
  overflow:hidden;
}
/* Il testo del titolo è dentro il link <a>, su cui il tema mette uppercase.
   text-transform NON è ereditata se il figlio ha un proprio valore → va
   forzata DIRETTAMENTE sul link. */
.woocommerce .product-small .product-title a,
.woocommerce .product-small .name.product-title a,
.woocommerce .product-small .woocommerce-loop-product__title a{
  text-transform:lowercase!important;
  font-style:normal!important;
  color:inherit!important;
}
/* ...tranne la PRIMA lettera, maiuscola (es. "Cartoon castello") */
.woocommerce .product-small .product-title a::first-letter,
.woocommerce .product-small .name.product-title a::first-letter,
.woocommerce .product-small .woocommerce-loop-product__title a::first-letter{
  text-transform:uppercase!important;
}
.woocommerce .product-small .product-title a{
  color:inherit!important;
  text-decoration:none!important;
  transition:color .2s;
}
.woocommerce .product-small .product-title a:hover{
  color:var(--rambla-accent)!important;
}

/* Prezzo */
.woocommerce .product-small .price-wrapper,
.woocommerce .product-small .price{
  text-align:left!important;
}
.woocommerce .product-small .price{
  display:block;
  margin:0 0 16px!important;
  font-family:var(--rambla-font)!important;
  font-size:19px!important;             /* prezzo più piccolo */
  font-weight:900!important;
  letter-spacing:-.01em!important;
}
/* Il colore va forzato sugli elementi interni (.amount/bdi): il colore del
   contenitore .price NON viene ereditato perché hanno un proprio valore. */
.woocommerce .product-small .price,
.woocommerce .product-small .price .amount,
.woocommerce .product-small .price .woocommerce-Price-amount,
.woocommerce .product-small .price bdi,
.woocommerce .product-small .price ins,
.woocommerce .product-small .price ins .amount{
  color:#eb048c!important;             /* rosa logo */
}
.woocommerce .product-small .price .woocommerce-Price-currencySymbol{
  font-size:.7em!important;             /* simbolo € più piccolo, raffinato */
  font-weight:700!important;
  vertical-align:baseline;
  margin-left:1px;
}
.woocommerce .product-small .price del,
.woocommerce .product-small .price del .amount{
  color:#b0b0b0!important;
  font-weight:500!important;
  font-size:14px!important;
  opacity:1;
}
.woocommerce .product-small .price ins,
.woocommerce .product-small .price ins .amount{
  text-decoration:none!important;
  color:#eb048c!important;
}

/* ---- PULSANTE "DETTAGLI" (ancorato in basso) ---- */
.woocommerce .product-small .rambla-details-wrap{
  margin-top:auto!important;   /* spinge il bottone in fondo alla card */
  text-align:left;
  padding-top:6px;
}
.woocommerce .product-small a.rambla-details-btn,
.woocommerce .product-small .button.rambla-details-btn{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  padding:9px 18px!important;
  border-radius:10px!important;
  border:1px solid var(--rambla-line)!important;
  background:transparent!important;
  color:var(--rambla-ink)!important;
  font-family:var(--rambla-font)!important;
  font-size:14px!important;
  font-weight:600!important;
  text-decoration:none!important;
  text-transform:none!important;
  letter-spacing:0!important;
  box-shadow:none!important;
  transition:all .2s!important;
  margin:0!important;
  min-height:auto!important;
  line-height:1.4!important;
}
.woocommerce .product-small a.rambla-details-btn:hover{
  background:#eb048c!important;       /* rosa logo all'hover */
  border-color:#eb048c!important;
  color:#fff!important;
  transform:translateY(-1px);
}

/* =========================================================
   C) BADGE "IN OFFERTA" (Flatsome: .badge-inner / .onsale)
   ========================================================= */
.woocommerce .product-small .badge-container .badge-inner,
.woocommerce .product-small .callout .badge-inner,
.woocommerce .product-small span.onsale{
  background:var(--rambla-accent)!important;
  color:#fff!important;
  font-family:var(--rambla-font)!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:1!important;
  padding:7px 14px!important;
  border-radius:999px!important;
  box-shadow:0 4px 10px rgba(0,0,0,.15)!important;
}

/* =========================================================
   D) PAGINAZIONE
   ========================================================= */
.woocommerce nav.woocommerce-pagination{margin:40px 0 20px;}
.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul li{
  border:none!important;
  margin:0!important;
}
.woocommerce nav.woocommerce-pagination ul{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  display:inline-flex!important;
  align-items:center;justify-content:center;
  min-width:40px;height:40px;
  padding:0 14px!important;
  border-radius:10px!important;
  border:1px solid var(--rambla-line)!important;
  font-family:var(--rambla-font);
  font-size:14px;font-weight:500;
  color:var(--rambla-ink)!important;
  background:#fff!important;
  transition:all .2s;
}
.woocommerce nav.woocommerce-pagination ul li a:hover{
  background:var(--rambla-soft)!important;border-color:#ccc!important;
}
.woocommerce nav.woocommerce-pagination ul li span.current{
  background:var(--rambla-accent)!important;
  border-color:var(--rambla-accent)!important;
  color:#fff!important;
}

/* =========================================================
   E) ORDINAMENTO (select Woo)
   ========================================================= */
.woocommerce .woocommerce-ordering select{
  font-family:var(--rambla-font);
  font-size:14px;font-weight:500;
  color:var(--rambla-ink);
  background:#fff;
  border:1px solid var(--rambla-line);
  border-radius:10px;
  padding:10px 16px;
  cursor:pointer;transition:all .2s;
}
.woocommerce .woocommerce-ordering select:focus{
  outline:none;
  border-color:var(--rambla-accent);
  box-shadow:0 0 0 2px rgba(235,4,140,.15);
}

/* =========================================================
   F) RESPONSIVE
   ========================================================= */
@media(max-width:768px){
  .woocommerce .product-small .box-text{padding:14px 16px 16px!important;}
  .woocommerce .product-small .price{font-size:18px!important;}
}