/* ==========================================================================
   Negozio — il catalogo dentro il mondo del sigillo.
   Riscrive il minimo indispensabile della veste WooCommerce di serie.
   ========================================================================== */

.page-band__nota {
  margin: var(--step-0) 0 0;
  color: var(--text-secondary);
  max-width: 52ch;
}

/* --- Barra laterale del negozio ------------------------------------------- */

/* Widget nativi di WooCommerce (ricerca prodotto, categorie prodotto) dentro
   la sidebar "Filtri negozio" registrata in functions.php — non piu' markup
   fatto in casa.
   Il posizionamento a due colonne torna alla griglia: i float (usati in un
   primo tentativo) mandavano in crisi ul.products, che essendo display:grid
   apre un proprio contesto di formattazione a blocchi — per spec, un
   contesto cosi' non puo' sovrapporsi a un float nello stesso contesto
   padre, quindi scendeva sotto la sidebar invece di restarle a fianco,
   ignorando il margin-left pensato per aggirare il float. Con la griglia
   qui non c'e' nessun float da scansare, il problema sparisce alla radice. */
@media (min-width: 52rem) {
  .woo-layout {
    display: grid;
    grid-template-columns: 15.5rem minmax(0, 1fr);
    gap: var(--step-3);
    align-items: start;
  }
}

.shop-filters { margin-bottom: var(--step-2); }

@media (min-width: 52rem) {
  .shop-filters { margin-bottom: 0; }
}

.shop-filters .widget + .widget { margin-top: var(--step-2); }

.shop-filters .widgettitle {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 108%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze);
  margin: 0 0 var(--step-0);
}

/* Modulo di ricerca prodotto (WC_Widget_Product_Search) */
.shop-filters .woocommerce-product-search {
  display: flex;
  gap: 0.5rem;
}

.shop-filters .woocommerce-product-search .search-field {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  padding: 0.6rem 0.8rem;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.shop-filters .woocommerce-product-search .search-field:focus-visible { border-color: var(--honey-deep); }

.shop-filters .woocommerce-product-search button {
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--honey);
  color: oklch(24% 0.04 58);
  cursor: pointer;
  transition: background-color 160ms var(--ease-press);
}

.shop-filters .woocommerce-product-search button:hover { background: var(--gold); }

/* Elenco categorie (WC_Widget_Product_Categories) */
.shop-filters .product-categories {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-subtle);
}

.shop-filters .product-categories li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.1rem;
  border-bottom: 1px solid var(--border-subtle);
}

.shop-filters .product-categories a {
  text-decoration: none;
  color: var(--text-secondary);
}

.shop-filters .product-categories li.current-cat > a { color: var(--honey-deep); font-weight: 600; }

.shop-filters .product-categories .count {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* --- Griglia del catalogo ------------------------------------------------ */

/* WooCommerce mette due pseudo-elementi di clearfix sulla lista: in una
   griglia diventano celle a tutti gli effetti e spingono il primo prodotto
   nella seconda colonna. */
.woo ul.products::before,
.woo ul.products::after { content: none; display: none; }

/* Il catalogo e' una schiera di schede: la definizione della griglia e del
   componente sta in theme.css, qui si applica soltanto alla lista che stampa
   WooCommerce e si smontano i suoi valori a colonne fisse. */
.woo ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--step-2) var(--step-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.woo ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
}

/* WooCommerce mette il titolo del ciclo anche dove non serve piu': la scheda
   ha il suo. Qui restano solo i pezzi che pubblica di suo, come il bollino
   "In offerta". */
.woo ul.products li.product > .woocommerce-loop-product__title,
.woo ul.products li.product > .price { display: none; }

/* Il margine di 1em che WooCommerce mette sotto la fotografia del ciclo: qui la
   foto riempie una cornice quadrata e sotto non ci va niente. Il selettore
   pareggia il suo (`.woocommerce ul.products li.product a img`). */
.woo ul.products li.product .scheda__cornice img { margin: 0; }

.woo ul.products li.product .onsale {
  position: absolute;
  z-index: 3;
  inset-block-start: 0.7rem;
  inset-inline-start: 0.7rem;
  margin: 0;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius);
  background: var(--honey);
  color: oklch(24% 0.04 58);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  font-stretch: 108%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  min-height: 0;
  min-width: 0;
}

@media (max-width: 40rem) {
  .woo ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--step-1) 0.75rem;
  }
}

/* --- Ordinamento e conteggio -------------------------------------------- */

.woo .woocommerce-result-count,
.woo .woocommerce-ordering {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: var(--step-2);
}

.woo .woocommerce-ordering select {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--text);
}

/* --- Scheda prodotto ----------------------------------------------------- */

/* La traccia sopra il titolo. Non e' una fascia: e' un filo. */
.woo-traccia { padding-top: var(--step-1); }

.traccia {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 108%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.traccia a { color: var(--bronze); text-decoration: none; }
.traccia a:hover { color: var(--honey-deep); text-decoration: underline; }

/* Il separatore e' un esagono minuscolo, non una barra: lo stesso segno del
   cartiglio, usato alla scala piu' piccola che regge. */
.traccia .traccia__voce + .traccia__voce::before {
  content: "";
  display: inline-block;
  width: 0.32rem;
  height: 0.36rem;
  margin-inline-end: 0.5rem;
  vertical-align: 0.02em;
  background: var(--comb);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* --- L'impaginato della scheda ------------------------------------------- */
/* Il riassunto era molto piu' corto della fotografia e sotto restavano
   quattrocento pixel di niente prima delle schede informative. Il vuoto si e'
   chiuso dando alla colonna qualcosa da dire (i tre fatti di produzione, vedi
   inc/woocommerce.php), non allungando i margini: ora le due colonne finiscono
   quasi insieme. La fotografia prende la parte piu' larga, che e' giusto —
   e' lei il motivo per cui si e' arrivati qui. */

.woo div.product {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  /* Righe piu' strette delle colonne: il `gap` verticale si sommava ai margini
     delle sezioni a tutta larghezza e fra un blocco e l'altro restavano
     centosettanta pixel di niente. Ora lo stacco lo fa solo la griglia. */
  gap: var(--step-3) var(--step-4);
  align-items: start;
}

.woo div.product .woocommerce-product-gallery {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  /* Niente `position: sticky` qui: con `align-items: start` la cella e' alta
     quanto la fotografia e non le resta nessuno spazio dentro cui restare
     appesa. Il vuoto si e' chiuso riempiendo la colonna accanto, non
     agganciando questa. */
}

/* La stessa cornice della griglia, alla scala della scheda: chi arriva qui
   riconosce l'oggetto che ha appena cliccato. */
.woo div.product .woocommerce-product-gallery__wrapper {
  position: relative;
  overflow: clip;
  border: 1px solid var(--border-subtle);
  border-radius: calc(var(--radius) * 2);
  background: var(--wax);
  box-shadow: var(--shadow-far);
  isolation: isolate;
}

.woo div.product .woocommerce-product-gallery__wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(115% 80% at 50% -12%, oklch(from var(--gold) l c h / 0.20) 0%, transparent 58%),
    radial-gradient(100% 100% at 50% 52%, transparent 48%, oklch(from var(--propoli) l c h / 0.22) 100%);
}

[data-tema="scuro"] .woo div.product .woocommerce-product-gallery__wrapper::after {
  background:
    radial-gradient(115% 80% at 50% -12%, oklch(from var(--gold) l c h / 0.14) 0%, transparent 58%),
    radial-gradient(100% 100% at 50% 52%, transparent 54%, oklch(from var(--propoli) l c h / 0.36) 100%);
}

/* --- Piu' foto: lo slider di WooCommerce ----------------------------------
   Con una sola foto la cornice sta sul contenitore delle slide, come sopra.
   Con piu' foto WooCommerce avvolge il contenitore in `.flex-viewport`, la
   finestra che mostra una slide per volta, e le slide diventano fluttuanti: il
   contenitore, che non le contiene, restava alto due pixel e il suo
   `overflow: clip` tagliava via tutte le fotografie. La cornice e la lampada
   passano quindi alla finestra, che ha l'altezza giusta e gia' nasconde il
   resto. Non c'era mai stato un prodotto con galleria, e questo non si vedeva. */

.woo div.product .flex-viewport {
  border: 1px solid var(--border-subtle);
  border-radius: calc(var(--radius) * 2);
  background: var(--wax);
  box-shadow: var(--shadow-far);
  isolation: isolate;
}

.woo div.product .flex-viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(115% 80% at 50% -12%, oklch(from var(--gold) l c h / 0.20) 0%, transparent 58%),
    radial-gradient(100% 100% at 50% 52%, transparent 48%, oklch(from var(--propoli) l c h / 0.22) 100%);
}

.woo div.product .flex-viewport .woocommerce-product-gallery__wrapper {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.woo div.product .flex-viewport .woocommerce-product-gallery__wrapper::after { content: none; }

/* Le miniature: la stessa cornice in piccolo. Quella attiva e' piena e col
   bordo scuro, le altre sono attenuate, come i nomi nella testata. */
.woo div.product div.images .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr));
  gap: 0.6rem;
  margin: var(--step-0) 0 0;
  padding: 0;
  list-style: none;
  overflow: visible;
}

/* Su telefono cinque miniature (la foto principale piu' quattro) stanno su
   una riga: quattro colonne ne lasciavano una sola a capo. */
@media (max-width: 40rem) {
  .woo div.product div.images .flex-control-thumbs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.4rem;
  }
}

.woo div.product div.images .flex-control-thumbs li {
  width: auto;
  float: none;
  margin: 0;
}

.woo div.product div.images .flex-control-thumbs img {
  display: block;
  aspect-ratio: 1;
  object-fit: cover;
  margin: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--wax);
  opacity: 0.6;
  cursor: pointer;
  transition: opacity var(--t-state) var(--ease-press), border-color var(--t-state) var(--ease-press);
}

.woo div.product div.images .flex-control-thumbs img:hover { opacity: 1; }

.woo div.product div.images .flex-control-thumbs img.flex-active {
  opacity: 1;
  border-color: var(--honey-deep);
}

/* E' il bersaglio della transizione fra la griglia e questa pagina: il
   barattolo cliccato si sposta qui invece di dissolversi. */
@media (prefers-reduced-motion: no-preference) {
  /* `img.wp-post-image` e non `img`: dentro la stessa cella WooCommerce inserisce
     anche `img.zoomImg` per l'ingrandimento, quindi il selettore generico
     assegnava lo stesso nome di transizione a due elementi. Un nome duplicato
     annulla la transizione per l'intera pagina — la console diceva "Unexpected
     duplicate view-transition-name: prodotto" e il barattolo, invece di
     spostarsi dalla griglia alla scheda, si dissolveva e basta. */
  .woo div.product .woocommerce-product-gallery__image:first-child img.wp-post-image { view-transition-name: prodotto; }
}

.woo div.product .woocommerce-product-gallery img { width: 100%; }

/* La lente di WooCommerce: dentro il mondo, non un bottone di sistema.
   Il selettore ripete `.woocommerce-product-gallery` per pareggiare quello di
   serie, che le assegna `z-index: 99` senza stacking context intorno — cioe' un
   valore che compete alla radice e passava sopra la testata appesa (40). Su
   telefono la lente finiva a cavallo del pulsante del menu. */
.woo div.product div.images .woocommerce-product-gallery__trigger {
  z-index: 3;
  inset-block-start: 0.85rem;
  inset-inline-end: 0.85rem;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: oklch(from var(--surface-raised) l c h / 0.9);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-near);
  color: var(--text);
  font-size: 1rem;
  text-decoration: none;
  transition: transform var(--t-state) var(--ease-press), background-color var(--t-state) var(--ease-press);
}

.woo div.product .woocommerce-product-gallery__trigger:hover { transform: scale(1.06); background: var(--surface-raised); }

.woo div.product .summary {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding-top: var(--step-1);
}

.woo div.product .product_title {
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  margin-bottom: var(--step-1);
}

/* Il prezzo e' la seconda cosa che si cerca dopo il nome: qui ha la scala del
   punzone, non quella di una riga di testo. */
.woo div.product p.price,
.woo div.product span.price {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--honey-deep);
  margin: 0 0 var(--step-1);
}

.woo div.product p.price .woocommerce-Price-amount { white-space: nowrap; }
.woo div.product p.price del { opacity: 0.5; font-size: 0.6em; margin-inline-end: 0.4rem; }
.woo div.product p.price ins { text-decoration: none; }

.woo div.product .woocommerce-product-details__short-description {
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: var(--step-2);
  max-width: 46ch;
}

/* Il posto del prezzo, finche' il listino non c'e'. */
.woo-listino {
  border-block: 1px solid var(--border-subtle);
  padding-block: var(--step-0);
  margin-block: var(--step-1);
  color: var(--text-secondary);
}

.woo-listino p { margin: 0; }
.woo-listino p + p { margin-top: 0.5rem; }
.woo-listino a { font-weight: 600; }

.woo-listino__formati {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.woo-listino__formati .struck {
  display: block;
  margin-bottom: 0.15rem;
}

/* Al posto del pulsante d'acquisto quando il prodotto e' esaurito.
   Testo --honey-deep su --honey-wash: 49 punti di L, valido per il corpo. */
.woo-esaurito {
  margin-block: var(--step-1);
  padding: var(--step-0) var(--step-1);
  background: var(--honey-wash);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  color: var(--honey-deep);
  font-weight: 600;
}

/* Il titolo della scheda ha bisogno d'aria: qui non c'e' la fascia. */
.woo div.product .product_title { margin-top: 0; }
.woo.stack-page { padding-top: var(--step-3); }

/* Selettore pezzatura. La tabella di WooCommerce mette etichetta e menu su una
   riga sola, stretti: 50 / 250 / 500 / 1000 g e' la seconda decisione della
   pagina dopo "lo prendo", e merita una riga sua e un bersaglio grosso. */
.woo div.product form.cart .variations { border: 0; margin: 0 0 var(--step-1); width: 100%; }
.woo table.variations tbody, .woo table.variations tr { display: block; }

.woo div.product form.cart .variations td,
.woo div.product form.cart .variations th {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  line-height: 1.5;
  text-align: start;
  vertical-align: baseline;
}

.woo div.product form.cart .variations td.label { padding: 0 0 0.35rem; }

.woo div.product form.cart .variations label {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 108%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze);
}

.woo div.product form.cart .variations select {
  font: inherit;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 22rem;
  margin-right: 0;
  padding: 0.85rem 2.4rem 0.85rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--text);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* La freccia e' disegnata col reticolo delle altre icone del tema, non
     lasciata al widget di sistema che cambia da un browser all'altro. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23846C48' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 10 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.15rem;
  transition: border-color var(--t-state) var(--ease-press), box-shadow var(--t-state) var(--ease-press);
}

.woo div.product form.cart .variations select:hover { border-color: var(--comb); }
.woo div.product form.cart .variations select:focus-visible { border-color: var(--honey-deep); }

.woo .reset_variations {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Finche' non e' stata scelta una pezzatura questi contenitori sono vuoti ma
   portano i margini di WooCommerce: fra il menu e il pulsante restavano
   settanta pixel di niente, che leggevano come un pezzo mancante. */
.woo .single_variation_wrap { margin: 0; }
.woo .woocommerce-variation { margin: 0; }
.woo .woocommerce-variation:not(:empty) { margin-bottom: var(--step-0); }
.woo .woocommerce-variation-price { margin: 0; }
.woo .woocommerce-variation-price .price { font-size: 1.4rem; margin: 0 0 var(--step-0); }

/* Il meta di serie ("COD: N/A Categoria: Mieli") e' la riga piu' brutta della
   pagina, e per meta' non dice niente. La categoria e' gia' nella traccia in
   alto; il codice non esiste ancora. */
.woo div.product .product_meta { display: none; }

/* Quantita' e "Aggiungi al carrello" sulla stessa riga, stessa altezza: senza
   lo stretch il pulsante (testo piu' piccolo, meno padding verticale) restava
   visibilmente piu' basso del box del numero. */
.woo form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem;
}

.woo form.cart .quantity { margin: 0; }

.woo form.cart .qty {
  width: 4.75rem;
  height: 3.25rem;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
}

/* --- L'azione principale della pagina ------------------------------------ */
/* Era alto 44px con il testo a 15px, sotto un prezzo da 32: la cosa piu'
   importante della pagina sembrava un comando di servizio. E cambiava misura
   fra i due stati — 174x36 finche' non si sceglie la pezzatura, 192x44 dopo —
   quindi appena si sceglieva, saltava. Qui la scatola e' la stessa sempre. */
.woo div.product form.cart .single_add_to_cart_button,
.woo div.product form.cart button.single_add_to_cart_button {
  min-height: 3.25rem;
  padding: 0 2rem;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.01em;
  border-radius: var(--radius);
}

/* Lo stato disabilitato cambia colore, non ingombro: e' lo stesso pulsante che
   aspetta una scelta, non un pulsante diverso. */
.woo div.product form.cart .single_add_to_cart_button.disabled,
.woo div.product form.cart button.single_add_to_cart_button:disabled {
  min-height: 3.25rem;
  padding: 0 2rem;
  font-size: 1rem;
  background: var(--honey-wash);
  color: var(--honey-deep);
  /* WooCommerce lo porta a opacita' .5: il colore, gia' scelto per il contrasto
     (49 punti di L), arrivava dimezzato e il pulsante principale spariva. */
  opacity: 1;
  box-shadow: inset 0 0 0 1px var(--comb);
}

.woo form.cart .single_add_to_cart_button { margin: 0; }

/* --- Schede informative --------------------------------------------------- */
/* WooCommerce disegna queste linguette come pastiglie grigie con gli angoli
   stondati e due pseudo-elementi che gli attaccano un raccordo curvo ai lati:
   un widget di sistema del 2013, l'unica cosa in tutta la pagina che non
   appartiene a questo sito. I selettori qui sotto ricalcano i suoi, perche' i
   suoi pesano quanto i nostri e vince chi arriva dopo — per questo il foglio
   del tema dichiara le maniglie di WooCommerce fra le proprie dipendenze
   (functions.php). Ricalcarli e' anche il motivo per cui non serve un !important. */

.woo div.product .woocommerce-tabs { grid-column: 1 / -1; }

.woo div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--step-2);
  list-style: none;
  margin: 0 0 var(--step-2);
  padding: 0 0 0.9rem;
  border-bottom: 1px solid var(--border-subtle);
}

.woo div.product .woocommerce-tabs ul.tabs::before { content: none; }

.woo div.product .woocommerce-tabs ul.tabs li {
  position: relative;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* I due raccordi curvi ai fianchi della linguetta. */
.woo div.product .woocommerce-tabs ul.tabs li::before,
.woo div.product .woocommerce-tabs ul.tabs li::after { content: none; }

.woo div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 0;
  text-decoration: none;
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  font-stretch: 108%;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-shadow: none;
  transition: color var(--t-state) var(--ease-press);
}

.woo div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--honey-deep); }

/* Il segno della scheda attiva si traccia sotto la voce e si sposta con lei:
   e' lo stesso filetto del menu, alla stessa velocita'. */
.woo div.product .woocommerce-tabs ul.tabs li a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -0.9rem;
  height: 2px;
  background: var(--honey);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-move) var(--ease-press);
}

.woo div.product .woocommerce-tabs ul.tabs li.active a { color: var(--text); }
.woo div.product .woocommerce-tabs ul.tabs li.active a::after { transform: scaleX(1); }

.woo .woocommerce-tabs .panel { max-width: var(--measure-lungo); margin-bottom: 0; }
.woo .woocommerce-tabs h2 { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem); margin-bottom: var(--step-0); }

/* Il titolo "Descrizione" ripete la linguetta appena sopra. */
.woo .woocommerce-tabs #tab-description > h2:first-child { display: none; }

.woo .woocommerce-tabs .shop_attributes th { width: 12rem; }

/* Etichetta del prodotto: ingredienti, valori nutrizionali, avvertenze. La
   tabella e' quella di "Informazioni aggiuntive" (stesse classi, stesso aspetto);
   qui si aggiunge solo il rientro delle voci "di cui". */
.woo-etichetta h3 {
  margin: var(--step-2) 0 var(--step-0);
  font-size: 1.05rem;
  color: var(--text);
}

.woo-inci { overflow-wrap: anywhere; }
.woo-inci strong { color: var(--text); }

/* Gli stessi pesi dei selettori di sopra e di WooCommerce (table.shop_attributes th),
   e dopo di loro: a specificita' pari vince l'ultimo. La colonna delle voci
   non ha la larghezza fissa di "Informazioni aggiuntive": con 12rem piu' il
   valore su una riga sola la tabella usciva dallo schermo a 320 px. */
.woo .woocommerce-tabs .woo-nutrizione th { width: auto; }
.woo-nutrizione td { text-align: right; white-space: nowrap; }
.woo .woocommerce-tabs .woo-nutrizione__figlia th { padding-left: 1.5rem; font-weight: 400; color: var(--text-secondary); }

.woo-avvertenze { margin: 0 0 0.5rem; color: var(--text-secondary); }

/* Prodotti con un'etichetta per gusto (le caramelle): un blocco apribile per
   gusto, con i confini della tabella di "Informazioni aggiuntive". */
.woo-etichetta__gusto { border-bottom: 1px solid var(--border-subtle); padding: var(--step-0) 0; }
.woo-etichetta__gusto summary { cursor: pointer; font-weight: 600; color: var(--text); }
.woo-etichetta__gusto[open] summary { margin-bottom: var(--step-0); }

/* Volume o peso dei cosmetici, subito sotto il pulsante: stessa etichetta
   incisa di "Confezioni", valore nel carattere dei titoli. */
.woo-contenuto {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin: var(--step-1) 0 0;
}

.woo-contenuto__valore {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* --- Come e' fatto ------------------------------------------------------- */
/* Tre fatti di produzione, non tre riquadri con un'icona ciascuno. L'esagono e'
   quello del cartiglio sul vetro, ridotto al minimo: marca la riga, non la
   decora. */

.woo-garanzie {
  list-style: none;
  margin: var(--step-2) 0 0;
  padding: 0;
  border-top: 1px solid var(--border-subtle);
}

.woo-garanzie li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.woo-garanzie li::before {
  content: "";
  width: 0.5rem;
  height: 0.57rem;
  margin-top: 0.42em;
  background: var(--comb);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.woo section.related,
.woo section.upsells { grid-column: 1 / -1; margin-top: var(--step-2); }

.woo section.related > h2,
.woo section.upsells > h2 {
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  margin-bottom: var(--step-2);
}

@media (max-width: 52rem) {
  .woo div.product { grid-template-columns: 1fr; gap: var(--step-2); }
  .woo div.product .woocommerce-product-gallery { position: static; }
  .woo div.product .summary { padding-top: 0; }
}

/* --- Avvisi e paginazione ------------------------------------------------ */

.woo .woocommerce-message,
.woo .woocommerce-info,
.woo .woocommerce-error {
  background: var(--honey-wash);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: var(--step-0) var(--step-1);
  margin-bottom: var(--step-1);
  list-style: none;
}

.woo .woocommerce-error { background: oklch(from var(--danger) 94% 0.04 h); }

.woo nav.woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: var(--step-3) 0 0;
  padding: 0;
  border: 0;
}

.woo nav.woocommerce-pagination li { border: 0; }

/* `body` e `ul li` in piu': WooCommerce colora la pagina corrente di viola
   (#816f98 su #e9e6ed, 3,6:1) con `.woocommerce nav ul li span.current`, che a
   parita' di classi vinceva sulla nostra. */
body .woo nav.woocommerce-pagination ul li :is(a, span) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
}

body .woo nav.woocommerce-pagination ul li span.current {
  background: var(--honey);
  border-color: var(--honey);
  color: oklch(24% 0.04 58);
  font-weight: 600;
}

/* --- Carrello, cassa, account -------------------------------------------- */
/* WooCommerce arriva con tabelle e moduli suoi: qui prendono i colori, i
   caratteri e i filetti del resto del sito senza riscriverne i template. */

.woo table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: 0;
  border-top: 1px solid var(--border);
  margin-bottom: var(--step-2);
}

.woo table.shop_table th,
.woo table.shop_table td {
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--step-0) 0.6rem;
  text-align: start;
  background: transparent;
}

.woo table.shop_table th {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 108%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze);
}

.woo table.shop_table img { width: 4rem; height: auto; }

.woo .cart_totals h2,
.woo .cross-sells h2,
.woo #order_review_heading,
.woo .woocommerce-billing-fields h3,
.woo .woocommerce-additional-fields h3 {
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.8rem);
  margin-bottom: var(--step-1);
}

.woo .cart-collaterals .cart_totals { max-width: 26rem; margin-inline-start: auto; }

.woo .coupon { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--step-1); }

.woo input[type="text"],
.woo input[type="email"],
.woo input[type="tel"],
.woo input[type="password"],
.woo input[type="number"],
.woo textarea,
.woo select,
.woo .select2-selection {
  font: inherit;
  padding: 0.7rem 0.85rem;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.woo label { font-weight: 500; }

.woo .button,
.woo button.button,
.woo a.button,
.woo input.button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.85rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--honey);
  color: oklch(24% 0.04 58);
  text-decoration: none;
  box-shadow: var(--shadow-near);
  transition: background-color 160ms var(--ease-press), transform 160ms var(--ease-press);
}

.woo .button:hover,
.woo button.button:hover,
.woo a.button:hover,
.woo input.button:hover { background: var(--gold); transform: translateY(-1px); }

/* Il pulsante principale del negozio e' lo stesso pulsante principale del sito:
   ambra su bruno, come "Vedi i mieli" in home (.btn--primary in theme.css).
   Era marrone scuro, l'unico bottone di quel colore in tutto il sito, e su una
   pagina il cui accento e' l'ambra leggeva severo invece che invitante. */
.woo .button.alt,
.woo button.button.alt {
  background: var(--honey);
  color: oklch(24% 0.04 58);
}

.woo .button.alt:hover,
.woo button.button.alt:hover {
  background: var(--gold);
  color: oklch(24% 0.04 58);
}

/* "Aggiungi al carrello" finche' non e' stata scelta una pezzatura: WooCommerce
   gli mette la sua classe .disabled con tanto di viola di serie (#7f54b3), a
   parita' di specificita' con la nostra .alt ma con una classe in piu' — qui
   la bilanciamo per restare nella palette invece di tornare al viola. */
.woo .button.alt.disabled,
.woo button.button.alt.disabled,
.woo .button.alt:disabled,
.woo button.button.alt:disabled {
  background: var(--honey-wash);
  color: var(--honey-deep);
  opacity: 1;
  box-shadow: inset 0 0 0 1px var(--comb);
  cursor: not-allowed;
}

.woo .button.alt.disabled:hover,
.woo button.button.alt.disabled:hover { background: var(--honey-wash); transform: none; }

.woo .checkout_coupon,
.woo .woocommerce-form-login,
.woo .woocommerce-form-register {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: var(--step-1);
  margin-bottom: var(--step-2);
  background: var(--surface);
}

/* Account: la navigazione laterale come registro, non come menu di sistema. */
.woo .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.woo .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--border-subtle); }
.woo .woocommerce-MyAccount-navigation a { display: block; padding: 0.7rem 0; text-decoration: none; color: var(--text); }
.woo .woocommerce-MyAccount-navigation li.is-active a { color: var(--honey-deep); font-weight: 600; }

@media (min-width: 52rem) {
  .woo .woocommerce-account-fields,
  .woo .woocommerce-MyAccount-content { min-width: 0; }

  .woo .woocommerce-MyAccount-navigation { float: none; width: auto; }

  /* `woocommerce-account` e' una classe del <body>, quindi ANTENATO di `.woo`,
     non discendente: scritto al contrario il selettore non matchava niente e
     l'area cliente restava a colonna unica, con il menu largo quanto la pagina
     e il contenuto che gli finiva sotto. */
  .woocommerce-account .woo .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: var(--step-3);
    align-items: start;
  }

  /* Le due colonne si assegnano a mano, e le larghezze di WooCommerce si
     azzerano con selettori del suo stesso peso (`.woocommerce-account
     .woocommerce-MyAccount-content` = due classi, questi ne hanno tre).
     Lasciate correre, il contenuto restava largo il 68% della colonna
     STRETTA — centocinquanta pixel — e le due colonne finivano scambiate. */
  .woocommerce-account .woo .woocommerce-MyAccount-navigation {
    grid-column: 1;
    float: none;
    width: auto;
    margin: 0;
  }

  .woocommerce-account .woo .woocommerce-MyAccount-content {
    grid-column: 2;
    float: none;
    width: auto;
    margin: 0;
  }

  /* Da ospite la pagina non e' menu + contenuto ma Accedi + Registrati
     (#customer_login), figlio diretto della stessa griglia: senza queste
     regole finiva nella colonna da 14rem, con i due moduli larghi 48%
     ciascuno di quella colonna. Occupa tutta la riga, i moduli affiancati. */
  .woocommerce-account .woo .woocommerce > .woocommerce-notices-wrapper,
  .woocommerce-account .woo #customer_login {
    grid-column: 1 / -1;
  }

  .woocommerce-account .woo .woocommerce > .woocommerce-notices-wrapper:empty { display: none; }

  .woocommerce-account .woo #customer_login {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--step-3);
    align-items: start;
  }

  .woocommerce-account .woo #customer_login::before,
  .woocommerce-account .woo #customer_login::after { content: none; }

  .woocommerce-account .woo #customer_login > .u-column1,
  .woocommerce-account .woo #customer_login > .u-column2 {
    float: none;
    width: auto;
    margin: 0;
  }
}

/* --- Il premio, accanto al titolo ---------------------------------------- */
/* Le gocce sono le stesse dell'elenco in home (.awards__drops): stesso segno,
   stessa forma, perche' sono la stessa cosa detta in due posti. */

.premio {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 var(--step-1);
  max-width: none;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  font-stretch: 108%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--honey-deep);
}

.premio__gocce { display: inline-flex; gap: 0.2rem; flex: none; }

.premio__gocce i {
  width: 0.7rem;
  height: 0.88rem;
  display: block;
  background: var(--gold);
  clip-path: polygon(50% 0%, 88% 42%, 100% 72%, 76% 100%, 24% 100%, 0% 72%, 12% 42%);
}

/* --- La scheda: provenienza e uso ---------------------------------------- */
/* Sta fra il riassunto e le linguette, a tutta larghezza. Non e' un riquadro:
   e' un foglio di dati appoggiato alla pagina, con il filetto sopra che lo
   separa dall'acquisto e niente cornice intorno. */

.scheda-miele {
  grid-column: 1 / -1;
  padding-top: var(--step-2);
  border-top: 1px solid var(--border-subtle);
}

.scheda-miele__griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--step-3);
  align-items: start;
}

.scheda-miele h2.struck { margin: 0 0 var(--step-0); }

.scheda-miele .register { margin-bottom: 0; }

.scheda-miele__tavola {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.05rem + 0.6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  max-width: 34ch;
  margin: 0;
}

.scheda-miele__nota {
  margin: var(--step-1) 0 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
  max-width: 44ch;
}

/* L'avvertenza sui lattanti non e' un avviso d'errore e non deve allarmare:
   e' una riga di servizio, tenuta bassa di tono e alta di leggibilita'. */
/* Senza "in tavola" la colonna resta vuota e la griglia si sbilancia: qui
   scivola sotto al registro invece di lasciare un buco a fianco. */
.scheda-miele__uso:empty { display: none; }

/* --- Premi ---------------------------------------------------------------- */
/* I premi vinti da quel miele, come l'elenco della home ma senza il nome del miele,
   che e' la pagina stessa: anno, gocce, edizione. Un elenco battuto, non card. */

.premi-scheda { grid-column: 1 / -1; }

.premi-scheda h2.struck { margin: 0 0 var(--step-0); }

.premi-scheda h3 {
  margin: var(--step-1) 0 0.5rem;
  font-size: 1.1rem;
  letter-spacing: -0.015em;
}

.premi-scheda h2 + h3 { margin-top: 0; }

.premi-scheda__elenco {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-subtle);
  max-width: var(--measure);
}

.premi-scheda__elenco li {
  display: grid;
  grid-template-columns: 4.5rem auto 1fr;
  gap: var(--step-0);
  align-items: baseline;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--border-subtle);
}

.premi-scheda__anno {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--honey-deep);
  letter-spacing: -0.02em;
}

.premi-scheda__meta { color: var(--text-secondary); font-size: 0.9rem; }

/* Campania Melix non ha le gocce: l'esito (le stelle) prende il posto accanto all'anno. */
.premi-scheda__anno + .premi-scheda__meta { grid-column: 2 / -1; }


/* ==========================================================================
   Carrello e cassa: i blocchi di WooCommerce dentro il mondo del sigillo.

   Queste due pagine non usano i template classici ma i blocchi
   (`wp:woocommerce/cart` e `wp:woocommerce/checkout`), quindi tutto il foglio
   qui sopra — scritto per `table.shop_table`, `.cart_totals`,
   `.woocommerce-billing-fields` — su di loro non aveva presa: ereditavano i
   caratteri e per il resto restavano WooCommerce di serie, con il pulsante
   principale grigio ferro.

   Si veste il componente, non il markup: i blocchi cambiano struttura fra una
   versione e l'altra, ma le classi `.wc-block-components-*` sono la loro
   interfaccia pubblica e reggono. Tutto e' agganciato a `.woo-blocchi`
   (page.php) perche' non tocchi nient'altro.
   ========================================================================== */

/* Il blocco porta gia' i suoi margini: sommati al passo della pagina lasciavano
   centotrenta pixel di bianco fra la fascia del titolo e la prima riga. */
.woo-blocchi { padding-top: 0; }
.woo-blocchi > .wp-block-woocommerce-cart,
.woo-blocchi > .wp-block-woocommerce-checkout { margin-block: 0; }

/* I titoli di sezione: gia' in Vollkorn per eredita', qui prendono la scala. */
.woo-blocchi .wc-block-components-title,
.woo-blocchi .wc-block-components-checkout-step__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
}

/* --- Campi --------------------------------------------------------------- */
/* Di serie hanno bordo scuro spesso e angoli vivi. Qui prendono il filetto e il
   fondo dei moduli del resto del sito (vedi .modulo in pagine.css). */

.woo-blocchi .wc-block-components-text-input input[type="text"],
.woo-blocchi .wc-block-components-text-input input[type="email"],
.woo-blocchi .wc-block-components-text-input input[type="tel"],
.woo-blocchi .wc-block-components-text-input input[type="number"],
.woo-blocchi .wc-block-components-textarea,
.woo-blocchi .wc-block-components-combobox-control input.components-combobox-control__input,
.woo-blocchi .wc-blocks-components-select__select {
  font-family: var(--font-ui);
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
  transition: border-color var(--t-state) var(--ease-press);
}

.woo-blocchi .wc-block-components-text-input.is-active input,
.woo-blocchi .wc-block-components-text-input input:focus,
.woo-blocchi .wc-block-components-textarea:focus,
.woo-blocchi .wc-blocks-components-select__select:focus { border-color: var(--honey-deep); outline: none; }

.woo-blocchi .wc-block-components-text-input label,
.woo-blocchi .wc-blocks-components-select__label {
  font-family: var(--font-ui);
  color: var(--text-muted);
}

.woo-blocchi .wc-block-components-text-input.is-active label { color: var(--bronze); }

/* --- Il riepilogo: un foglio, non una card di sistema -------------------- */

.woo-blocchi .wc-block-components-sidebar .wc-block-components-order-summary,
.woo-blocchi .wp-block-woocommerce-checkout-order-summary-block {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: calc(var(--radius) * 2);
  box-shadow: var(--shadow-near);
  /* Niente `overflow: clip` qui, ed e' il motivo per cui c'era un taglio: la
     pastiglia con la quantita' sporge dall'angolo della miniatura, e ritagliare
     il riquadro le mangiava un pezzo. Il raggio non ha bisogno del ritaglio,
     perche' dentro non c'e' niente che arrivi al bordo. */
}

.woo-blocchi .wc-block-components-totals-item {
  font-family: var(--font-ui);
  color: var(--text-secondary);
}

/* Il totale e' la cifra che conta: prende il punzone, come il prezzo sulla
   scheda prodotto. */
.woo-blocchi .wc-block-components-totals-footer-item,
.woo-blocchi .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.woo-blocchi .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.woo-blocchi .wc-block-components-product-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
}

.woo-blocchi .wc-block-components-product-price,
.woo-blocchi .wc-block-components-product-metadata { color: var(--text-secondary); }

/* La pastiglia con la quantita' sulla miniatura: quella del carrello in testata. */
.woo-blocchi .wc-block-components-order-summary-item__quantity {
  background: var(--honey);
  border-color: var(--canvas);
  color: oklch(24% 0.04 58);
  font-family: var(--font-ui);
  font-weight: 700;
}

/* Le fotografie prodotto qui sono minuscole: la cornice calda le tiene insieme
   come nella griglia, alla scala di un francobollo. */
.woo-blocchi .wc-block-components-order-summary-item__image img,
.woo-blocchi .wc-block-cart-item__image img {
  border-radius: var(--radius);
  background: var(--wax);
}

/* --- Pulsanti ------------------------------------------------------------ */
/* "Procedi al pagamento" era grigio ferro (#3c3c3c): l'unico bottone del sito
   fuori dalla palette, e per giunta quello che chiude la vendita. */

.woo-blocchi .wc-block-components-button:not(.is-link) {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  min-height: 3.25rem;
  border-radius: var(--radius);
  background: var(--honey);
  color: oklch(24% 0.04 58);
  border: 1px solid transparent;
  box-shadow: var(--shadow-near);
  transition: background-color var(--t-state) var(--ease-press),
              transform var(--t-state) var(--ease-press);
}

.woo-blocchi .wc-block-components-button:not(.is-link):hover {
  background: var(--gold);
  color: oklch(24% 0.04 58);
  transform: translateY(-1px);
}

.woo-blocchi .wc-block-components-button:not(.is-link):active { transform: translateY(0); }

.woo-blocchi .wc-block-components-button.is-link { color: var(--honey-deep); }

/* --- Pannelli a scomparsa: buono sconto, note ---------------------------- */

.woo-blocchi .wc-block-components-panel__button {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.woo-blocchi .wc-block-components-panel__button:hover { color: var(--honey-deep); }

/* --- Avvisi -------------------------------------------------------------- */
/* Anche l'avviso di errore resta caldo: il rosso di sistema accanto all'ambra
   vira otticamente e sembra un allarme di un altro sito. */

.woo-blocchi .wc-block-components-notice-banner {
  border-radius: var(--radius);
  font-family: var(--font-ui);
  align-items: center;
}

.woo-blocchi .wc-block-components-notice-banner.is-error {
  background: oklch(from var(--danger) 96% 0.03 h);
  border-color: oklch(from var(--danger) 78% 0.08 h);
  color: oklch(from var(--danger) 38% 0.09 h);
}

.woo-blocchi .wc-block-components-notice-banner.is-info,
.woo-blocchi .wc-block-components-notice-banner.is-success {
  background: var(--honey-wash);
  border-color: var(--comb);
  color: var(--text);
}

/* --- Selettore quantita' nel carrello ------------------------------------ */

.woo-blocchi .wc-block-components-quantity-selector {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.woo-blocchi .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--text);
}

.woo-blocchi .wc-block-components-quantity-selector__button { color: var(--bronze); }
.woo-blocchi .wc-block-components-quantity-selector__button:hover { color: var(--honey-deep); }

/* --- Righe del carrello --------------------------------------------------- */

.woo-blocchi .wc-block-cart-items__row { border-color: var(--border-subtle); }
.woo-blocchi table.wc-block-cart-items th { border-color: var(--border-subtle); }

.woo-blocchi .wc-block-cart-item__product-name,
.woo-blocchi .wc-block-components-product-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* --- Area cliente -------------------------------------------------------- */

.woo-blocchi .woocommerce-form-login,
.woo-blocchi .woocommerce-form-register {
  border: 1px solid var(--border-subtle);
  border-radius: calc(var(--radius) * 2);
  background: var(--surface);
}

@media (max-width: 52rem) {
  .woo-blocchi .wc-block-components-sidebar { margin-top: var(--step-2); }
}

/* --- Miniature, quantita' e riepilogo: le rifiniture ---------------------- */

/* Le foto qui erano nude, sole in tutto il sito: ovunque il barattolo sta in
   una cornice quadrata con il piano di cera e la luce calda dall'alto (vedi
   .scheda__cornice in theme.css), e in carrello e cassa no. Stesso trattamento,
   alla scala di un francobollo. */
.woo-blocchi .wc-block-cart-item__image img,
.woo-blocchi .wc-block-components-order-summary-item__image img {
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--wax);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
}

.woo-blocchi .wc-block-cart-item__image { padding-block: var(--step-0); }
.woo-blocchi .wc-block-cart-item__image img { width: 4.5rem; height: 4.5rem; }

/* La descrizione del prodotto nel riepilogo: WooCommerce ne infila i primi
   caratteri e poi tronca a meta' frase. In un riepilogo d'ordine non serve
   sapere che cos'e' la propoli — quello si e' letto due schermate fa — serve
   sapere che cosa si sta comprando e quanto costa. Restano nome, pezzatura,
   quantita' e prezzo; la frase mozzata va via. */
.woo-blocchi .wc-block-components-product-metadata__description { display: none; }

/* --- Selettore della quantita' -------------------------------------------- */
/* Era alto 55px con il numero a 18px e i segni a 16: un comando da tastiera
   numerica intorno a una cifra piccola. Qui l'altezza scende, il numero sale e
   i tre elementi finiscono sulla stessa scala. */

.woo-blocchi .wc-block-components-quantity-selector {
  display: inline-flex;
  align-items: stretch;
  width: auto;
  min-width: 0;
  height: 2.5rem;
  overflow: clip;
}

.woo-blocchi .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
  width: 2.5rem;
  min-width: 0;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  text-align: center;
  border: 0;
  background: transparent;
}

.woo-blocchi .wc-block-components-quantity-selector__button {
  width: 2.1rem;
  min-width: 0;
  padding: 0;
  font-size: 1.05rem;
  line-height: 1;
  opacity: 1;
  transition: background-color var(--t-state) var(--ease-press), color var(--t-state) var(--ease-press);
}

.woo-blocchi .wc-block-components-quantity-selector__button:hover:not(:disabled) {
  background: var(--honey-wash);
  color: var(--honey-deep);
}

.woo-blocchi .wc-block-components-quantity-selector__button:disabled { opacity: 0.35; }

/* I due segni sono disegnati con dei bordi: senza questo restano tarati sul
   font-size di prima e sbilanciano il gruppo. */
.woo-blocchi .wc-block-components-quantity-selector__button--minus::before,
.woo-blocchi .wc-block-components-quantity-selector__button--plus::before,
.woo-blocchi .wc-block-components-quantity-selector__button--plus::after { border-color: currentColor; }

/* ==========================================================================
   Area cliente.

   Qui NON ci sono blocchi: accesso, registrazione e dashboard sono ancora i
   moduli classici di WooCommerce, quindi valgono i suoi selettori storici e
   bisogna pareggiarli. Prima il riquadro d'accesso era largo quanto la pagina
   con dentro due campi: 1216 pixel di cornice intorno a un modulo da 26rem.
   ========================================================================== */

/* La fascia del titolo porta gia' il suo stacco: qui sopra restavano
   centosettanta pixel di bianco prima della prima voce del menu. */
.woocommerce-account .woo.stack-page { padding-top: 0; }
.woo .woocommerce-account-fields { padding-top: var(--step-1); }

/* Il riquadro d'accesso e' un modulo, non una sezione: prende la larghezza di
   quello che contiene e si centra. */
.woo .woocommerce-form-login,
.woo .woocommerce-form-register,
.woo .woocommerce-ResetPassword {
  /* Allineato a sinistra come tutto il resto del sito, non centrato: centrare
     il riquadro dentro la sua colonna e il titolo dentro la pagina li metteva
     su due assi diversi, sfalsati di trecento pixel. */
  max-width: 30rem;
  padding: var(--step-2);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: calc(var(--radius) * 2);
  box-shadow: var(--shadow-near);
}

/* "Accedi" era alla scala di un titolo di pagina sopra un modulo da due campi. */
.woocommerce-account .woo h2 {
  font-size: clamp(1.3rem, 1.15rem + 0.8vw, 1.75rem);
  max-width: 30rem;
  margin-bottom: var(--step-0);
}

.woo .woocommerce-form-login .form-row,
.woo .woocommerce-form-register .form-row,
.woo .woocommerce-ResetPassword .form-row { margin: 0 0 var(--step-0); padding: 0; }

/* WooCommerce dichiara `.woocommerce form .form-row input.input-text` (0,3,2):
   il nostro `.woo input[type="text"]` (0,1,1) perdeva, e i campi restavano con
   il bordo scuro spesso di serie. Qui si ricalca il suo peso. */
.woo form .form-row input.input-text,
.woo form .form-row textarea,
.woo form .form-row select {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 0.75rem 0.9rem;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
  transition: border-color var(--t-state) var(--ease-press);
}

.woo form .form-row input.input-text:focus,
.woo form .form-row textarea:focus { border-color: var(--honey-deep); outline: none; }

.woo form .form-row label {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  font-stretch: 108%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bronze);
}

/* L'asterisco: un segno di servizio, non un allarme rosso. */
.woo .required { color: var(--text-muted); text-decoration: none; border: 0; }

.woo form .form-row label.woocommerce-form-login__rememberme,
.woo form .form-row label.woocommerce-form-register__rememberme,
.woo form label.woocommerce-form-login__rememberme,
.woo form label.woocommerce-form-register__rememberme {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.woo .woocommerce-form-login__submit,
.woo .woocommerce-form-register__submit { margin-inline-end: var(--step-0); }

/* Il pulsante che entra nell'account e' lo stesso che chiude la cassa. */
.woo .woocommerce-form-login button.button,
.woo .woocommerce-form-register button.button,
.woo .woocommerce-ResetPassword button.button {
  background: var(--honey-deep);
  color: var(--canvas);
}

.woo .woocommerce-form-login button.button:hover,
.woo .woocommerce-form-register button.button:hover,
.woo .woocommerce-ResetPassword button.button:hover {
  background: oklch(from var(--honey-deep) calc(l - 0.06) c h);
  color: var(--canvas);
}

.woo .woocommerce-LostPassword {
  max-width: 30rem;
  margin: var(--step-0) 0 0;
  font-size: 0.9rem;
}

/* La dashboard, una volta dentro. */
.woo .woocommerce-MyAccount-content p:first-child { color: var(--text-secondary); }

/* Gli ultimi ordini sotto il saluto (inc/woocommerce.php). */
.woo .account-ultimi-ordini { margin-top: var(--step-2); }
.woo .account-ultimi-ordini__tutti { margin-top: var(--step-0); }

/* Corriere e codice nel dettaglio di un ordine spedito (inc/spedizione.php). */
.woo .spedizione-ordine { margin-block: var(--step-1) var(--step-2); }

/* Tabella ordini da telefono: il numero d'ordine e' l'unica cella <th> della
   riga, e il foglio «smallscreen» di WooCommerce nasconde tutti i <th> del
   corpo delle tabelle responsive. Restava una scheda senza numero d'ordine,
   nella bacheca come nella scheda «Ordini». Torna visibile come le altre
   righe, con la sua etichetta a sinistra. Stesso limite di WooCommerce. */
@media (max-width: 768px) {
  .woocommerce table.shop_table_responsive.woocommerce-orders-table tbody th.woocommerce-orders-table__cell-order-number {
    display: block;
    text-align: right;
  }

  .woocommerce table.shop_table_responsive.woocommerce-orders-table tbody th.woocommerce-orders-table__cell-order-number::before {
    content: attr(data-title) ": ";
    float: left;
    font-weight: 700;
  }
}

/* Lo scostamento passa da `translate`, non dal padding. Animare il padding
   avrebbe rifluito la lista a ogni passaggio del mouse — lo stesso difetto che
   c'era sulla testata e sul campo di ricerca. Qui il compositore sposta il link
   e nessun altro elemento se ne accorge. */
.woo .woocommerce-MyAccount-navigation a {
  transition: color var(--t-state) var(--ease-press), translate var(--t-move) var(--ease-press);
}

.woo .woocommerce-MyAccount-navigation a:hover { color: var(--honey-deep); translate: 0.35rem 0; }

/* ==========================================================================
   Carrello vuoto.

   Qui WooCommerce stampa un blocco "Novita' in negozio" che non e' ne' il ciclo
   del catalogo ne' il componente scheda: e' una griglia Gutenberg a se
   (`.wc-block-grid__products`), con markup tutto suo. Per questo era l'unico
   punto del sito con le fotografie nude, i nomi come link sottolineati e un
   pulsante a pastiglia grigia.

   Non si puo' riusare `.scheda` cambiando le classi — il markup lo genera il
   blocco — quindi si riscrive il suo con lo stesso vocabolario: cornice
   quadrata, piano di cera, luce calda dall'alto, targa sotto.
   ========================================================================== */

/* Il muso triste dentro il cerchio scuro: e' l'icona di serie del blocco, e in
   questo sito non c'e' nessun'altra faccia disegnata. Il messaggio si regge da
   solo, e sotto c'e' gia' la cosa giusta da fare — quattro prodotti. */
.woo-blocchi .wc-block-cart__empty-cart__title.with-empty-cart-icon::before { content: none; }

.woo-blocchi .wp-block-woocommerce-empty-cart-block { padding-top: var(--step-2); }

/* Allineato a sinistra come tutto il resto: il blocco nasce centrato, ma su
   questo sito il centrato non esiste da nessun'altra parte. */
.woo-blocchi .wp-block-woocommerce-empty-cart-block .has-text-align-center { text-align: start; }

.woo-blocchi .wc-block-cart__empty-cart__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 1.08;
  color: var(--text);
  margin: 0 0 var(--step-0);
}

/* Il separatore a puntini di serie: qui il filo e' un filo. */
.woo-blocchi .wp-block-woocommerce-empty-cart-block .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: var(--step-2) 0;
  max-width: none;
}

.woo-blocchi .wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots::before { content: none; }

/* "Da provare" era piu' grande del messaggio principale. */
.woo-blocchi .wp-block-woocommerce-empty-cart-block > h2:not(.wc-block-cart__empty-cart__title) {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 108%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze);
  margin: 0 0 var(--step-1);
}

/* --- La griglia: le stesse schede del catalogo --------------------------- */

/* `.woo.woo-blocchi` sono due classi sullo stesso elemento (vedi page.php):
   servono per pareggiare `.wc-block-grid.has-4-columns .wc-block-grid__product`,
   che di classi ne ha tre. Senza, vinceva il suo `max-width: 25%` — e in una
   griglia quel 25% si calcola sulla cella, non sulla riga: 25% di 290px fa
   72px, ed erano esattamente 72px le schede schiacciate a colonna di lettere. */
.woo.woo-blocchi .wc-block-grid .wc-block-grid__products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--step-2) var(--step-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.woo.woo-blocchi .wc-block-grid .wc-block-grid__product {
  display: flex;
  flex: 1 1 auto;
  width: auto;
  flex-direction: column;
  max-width: none;
  padding: 0;
  margin: 0;
  text-align: start;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: calc(var(--radius) * 2);
  overflow: clip;
  box-shadow: var(--shadow-near);
  transition: transform var(--t-move) var(--ease-press),
              box-shadow var(--t-move) var(--ease-press),
              border-color var(--t-move) var(--ease-press);
}

.woo.woo-blocchi .wc-block-grid .wc-block-grid__product:hover,
.woo.woo-blocchi .wc-block-grid .wc-block-grid__product:focus-within {
  transform: translateY(-5px);
  box-shadow: var(--shadow-far);
  border-color: var(--comb);
}

.woo-blocchi .wc-block-grid__product-link { text-decoration: none; color: inherit; }

/* La cornice: stessa lampada delle schede del catalogo. */
.woo-blocchi .wc-block-grid__product-image {
  position: relative;
  display: block;
  aspect-ratio: 1;
  min-height: 0;
  margin: 0;
  overflow: clip;
  background: var(--wax);
  isolation: isolate;
}

.woo-blocchi .wc-block-grid__product-image img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  transition: transform 620ms var(--ease-press);
}

.woo-blocchi .wc-block-grid__product-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(115% 80% at 50% -12%, oklch(from var(--gold) l c h / 0.24) 0%, transparent 58%),
    radial-gradient(100% 100% at 50% 52%, transparent 44%, oklch(from var(--propoli) l c h / 0.28) 100%);
}

@media (prefers-reduced-motion: no-preference) {
  .woo.woo-blocchi .wc-block-grid__product:hover .wc-block-grid__product-image img,
  .woo.woo-blocchi .wc-block-grid__product:focus-within .wc-block-grid__product-image img { transform: scale(1.055); }
}

/* La targa: nome in Vollkorn, prezzo in ambra. Il nome era un link sottolineato
   in bronzo, l'unico posto del sito in cui un prodotto si presenta cosi'. */
.woo-blocchi .wc-block-grid__product-title {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--text);
  text-decoration: none;
  padding: var(--step-0) var(--step-0) 0.2rem;
  margin: 0;
  border-top: 1px solid var(--border-subtle);
  text-wrap: balance;
}

.woo-blocchi .wc-block-grid__product-price {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--honey-deep);
  padding: 0 var(--step-0);
  margin: 0 0 var(--step-0);
}

.woo-blocchi .wc-block-grid__product-price .woocommerce-Price-amount { white-space: nowrap; }

/* Il pulsante era una pastiglia grigio ferro, tonda: qui prende la forma e il
   colore dei bottoni del sito, e sta al fondo della targa. */
.woo-blocchi .wc-block-grid__product-add-to-cart { margin: auto 0 0; padding: 0 var(--step-0) var(--step-0); }

.woo-blocchi .wc-block-grid__product-add-to-cart .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.7rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  box-shadow: none;
  transition: background-color var(--t-state) var(--ease-press),
              border-color var(--t-state) var(--ease-press),
              color var(--t-state) var(--ease-press);
}

.woo-blocchi .wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
  background: var(--honey);
  border-color: var(--honey);
  color: oklch(24% 0.04 58);
}

.woo-blocchi .wc-block-grid__product-add-to-cart .wp-block-button__link.added { border-color: var(--honey-deep); color: var(--honey-deep); }

@media (max-width: 40rem) {
  .woo.woo-blocchi .wc-block-grid .wc-block-grid__products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--step-1) 0.75rem;
  }

  .woo-blocchi .wc-block-grid__product-title { padding: 0.75rem 0.75rem 0.2rem; font-size: 0.95rem; }
  .woo-blocchi .wc-block-grid__product-price { padding-inline: 0.75rem; }
  .woo-blocchi .wc-block-grid__product-add-to-cart { padding: 0 0.75rem 0.75rem; }
}

/* --- Area cliente: i riquadri ------------------------------------------- */

/* "Modifica password" era un <fieldset> con <legend>: il riquadro lo disegnava
   il browser, con il suo filetto grigio e l'incavo per l'etichetta. E' l'unico
   contenitore del sito non disegnato da noi, e si vedeva. Qui diventa una
   sezione con un filo sopra e l'etichetta incisa, come i registri. */
.woo fieldset {
  margin: var(--step-2) 0 var(--step-1);
  padding: var(--step-1) 0 0;
  border: 0;
  border-top: 1px solid var(--border-subtle);
  min-width: 0;
}

.woo fieldset legend {
  padding: 0;
  margin-bottom: var(--step-0);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 108%;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bronze);
}

/* Gli indirizzi salvati e quelli in fondo a un ordine: erano riquadri col
   bordo di sistema, lilla su fondo caldo. */
.woo address,
.woo .woocommerce-customer-details address {
  font-style: normal;
  padding: var(--step-1);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: calc(var(--radius) * 2);
  line-height: 1.7;
  color: var(--text-secondary);
}

.woo .woocommerce-columns--addresses .woocommerce-column__title,
.woo .woocommerce-Address-title h2,
.woo .woocommerce-order-details__title,
.woo .spedizione-ordine h2,
.woo .woocommerce-column__title {
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem);
  margin-bottom: var(--step-0);
}

/* Le note sotto un campo ("Questo è il modo in cui il tuo nome verrà...")
   erano in corsivo di sistema. */
.woo .form-row span.description,
.woo fieldset span.description,
.woo .woocommerce-MyAccount-content em {
  display: block;
  margin-top: 0.35rem;
  font-style: normal;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* I campi larghi devono riempire la colonna, non fermarsi al 68%. */
.woo .form-row-wide,
.woo .form-row-first,
.woo .form-row-last { box-sizing: border-box; }

.woo .woocommerce-MyAccount-content .form-row-wide input.input-text,
.woo .woocommerce-MyAccount-content .form-row-wide select,
.woo .woocommerce-MyAccount-content fieldset .form-row input.input-text { max-width: 34rem; }

/* --- Tabella degli ordini ------------------------------------------------ */

.woo table.woocommerce-orders-table td,
.woo table.woocommerce-orders-table th { vertical-align: middle; }

.woo .woocommerce-orders-table__cell-order-number a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.woo .woocommerce-orders-table__cell-order-number a:hover { text-decoration: underline; }

/* Lo stato dell'ordine e' un dato, non una frase: pastiglia in cera. */
.woo .woocommerce-orders-table__cell-order-status {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 108%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--honey-deep);
}

/* "Visualizza" e' l'azione di una riga, non il pulsante principale della
   pagina: resta un bottone quieto, o venti righe fanno venti bottoni pieni. */
.woo .woocommerce-orders-table__cell-order-actions a.button,
.woo .woocommerce-orders-table__cell-order-actions a.woocommerce-button {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
  box-shadow: none;
  padding: 0.55rem 1rem;
  font-size: 0.85rem;
}

.woo .woocommerce-orders-table__cell-order-actions a.button:hover,
.woo .woocommerce-orders-table__cell-order-actions a.woocommerce-button:hover {
  background: var(--honey-wash);
  border-color: var(--honey-deep);
  color: var(--honey-deep);
  transform: none;
}

/* --- Avvisi dell'area cliente -------------------------------------------- */
/* L'icona di serie e' un glifo posizionato in assoluto che finiva sopra la
   prima parola. Via il glifo, e il riquadro prende i colori della casa. */

.woo .woocommerce-message,
.woo .woocommerce-info,
.woo .woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  gap: var(--step-0);
  align-items: center;
  justify-content: space-between;
  padding: var(--step-0) var(--step-1);
}

.woo .woocommerce-message::before,
.woo .woocommerce-info::before,
.woo .woocommerce-error::before { content: none; }

/* WooCommerce chiude gli avvisi con un elemento vuoto (`::after`, il vecchio
   clearfix). Dentro una riga flessibile e' un elemento a tutti gli effetti: con la
   distribuzione agli estremi il pulsante finiva tra lui e il testo, cioe' al
   centro. */
.woo .woocommerce-message::after,
.woo .woocommerce-info::after,
.woo .woocommerce-error::after { content: none; display: none; }

.woo .woocommerce-message .button,
.woo .woocommerce-info .button { margin: 0; }

/* Il pulsante "mostra password" e' ancorato al bordo del suo contenitore, non
   del campo: stringendo il campo restava a fluttuare cento pixel piu' in la'.
   Si stringe il contenitore, e il campo lo riempie. */
/* Il contenitore si chiama `.password-input`, non `.woocommerce-password-input`:
   con il nome sbagliato il limite di larghezza finiva sul campo e il pulsante
   restava ancorato al bordo del contenitore, cento pixel piu' in la'. */
.woo .password-input {
  position: relative;
  display: block;
  max-width: 34rem;
}

.woo .password-input input.input-text,
.woo .password-input input.woocommerce-Input { max-width: none; width: 100%; }

.woo .show-password-input {
  position: absolute;
  inset-inline-end: 0.75rem;
  inset-block-start: 50%;
  translate: 0 -50%;
  color: var(--text-muted);
}

.woo .show-password-input:hover { color: var(--honey-deep); }

/* Il pulsante ("Visualizza carrello") sta sempre per primo, all'estremo
   sinistro, e il testo gli segue. Si fa con `order` e non invertendo l'asse:
   WooCommerce stampa il pulsante prima o dopo il testo a seconda del messaggio, e
   cosi' il risultato e' lo stesso in entrambi i casi. */
.woo .woocommerce-message,
.woo .woocommerce-info {
  flex-direction: row;
  justify-content: flex-start;
  text-align: start;
}

.woo .woocommerce-message .button,
.woo .woocommerce-info .button { order: -1; flex: none; }

/* Bersagli di tocco ------------------------------------------------------- */
@media (pointer: coarse) {
  .traccia a { display: inline-block; padding-block: 0.8rem; }
  .shop-filters .product-categories a { display: inline-block; padding-block: 0.7rem; }
  .woo div.product .woocommerce-tabs ul.tabs li a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .woo .woocommerce-ordering select { min-height: 2.75rem; }
  .woo .reset_variations, .woo .woocommerce-LostPassword a { display: inline-block; padding-block: 0.7rem; }
  .woo .show-password-input { min-width: 2.75rem; min-height: 2.75rem; }
  .woo div.product div.images .woocommerce-product-gallery__trigger { min-width: 2.75rem; min-height: 2.75rem; }
  body .woo nav.woocommerce-pagination ul li :is(a, span) { min-width: 2.75rem; min-height: 2.75rem; }
}