/* Hallmark · WooCommerce — carrello, checkout, account.
 *
 * Qui non sovrascriviamo i template del plugin: li vestiamo. Riscrivere
 * checkout.php a mano significa reimplementare validazione, gateway e
 * calcolo spedizioni, e romperli al primo aggiornamento di WooCommerce.
 * Ogni valore passa dai token: nessun colore inline.
 */

/* ---- Impalcatura delle pagine WooCommerce ------------------------------- */

.woocommerce-cart .site-content,
.woocommerce-checkout .site-content,
.woocommerce-account .site-content { padding-block: var(--space-xl); }

.woocommerce-cart main > .woocommerce,
.woocommerce-checkout main > .woocommerce,
.woocommerce-account main > .woocommerce,
.woocommerce-cart main .entry-content,
.woocommerce-checkout main .entry-content,
.woocommerce-account main .entry-content {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-xl) var(--space-2xl);
}

.woocommerce .page-title,
.woocommerce-page h1.entry-title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  margin-bottom: var(--space-lg);
}

/* ---- Il clearfix di WooCommerce contro CSS Grid --------------------------
 * woocommerce-layout.css mette ::before e ::after con content:'' su
 * ul.products per il vecchio layout a float. In un contenitore grid quei due
 * pseudo-elementi diventano celle vere e spingono la prima riga di una
 * posizione, lasciando un buco in alto a sinistra.
 * ------------------------------------------------------------------------- */

.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after { content: none; }

/* ---- Avvisi -------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-xs);
  font-size: var(--text-sm);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
}
.woocommerce-message { border-color: var(--color-success); }
.woocommerce-error   { border-color: var(--color-danger); }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }
.woocommerce-message .button,
.woocommerce-info .button { margin-left: auto; }

/* ---- Le variabili di WooCommerce ------------------------------------------
 * Il plugin colora da sé una parte dell'interfaccia leggendo queste custom
 * property. Ridefinirle qui evita che il viola di WooCommerce spunti nei
 * punti che non abbiamo previsto uno per uno.
 * ------------------------------------------------------------------------- */

:root {
  --wc-primary:        var(--color-accent-deep);
  --wc-primary-text:   var(--color-accent-ink);
  --wc-secondary:      var(--color-paper-2);
  --wc-secondary-text: var(--color-ink);
  --wc-highlight:      var(--color-accent);
  --wc-highlight-text: var(--color-accent-ink);
  --wc-content-bg:     var(--color-paper);
  --wc-subtext:        var(--color-muted);
  --wc-green:          var(--color-success);
  --wc-red:            var(--color-danger);
  --wc-form-border-color: var(--color-rule);
  --wc-form-color-text:   var(--color-ink);
}

/* ---- Bottoni del plugin -------------------------------------------------- */

/* La variante .alt è quella dell'azione principale (aggiungi al carrello,
 * procedi all'ordine). WooCommerce la colora con una regola a quattro classi:
 * per riprendercela serve la stessa specificità, non una inferiore. */

.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  background: var(--color-accent-deep);
  border-color: var(--color-accent-deep);
  color: var(--color-accent-ink);
}
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

/* Prima che il formato sia scelto il bottone è inerte: deve sembrarlo.
 * Lasciato bordeaux, invitava a un clic che non faceva nulla. */
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt.disabled:hover,
.woocommerce button.button.alt:disabled:hover,
.woocommerce a.button.alt.disabled,
.woocommerce input.button.alt.disabled,
.woocommerce #respond input#submit.alt.disabled {
  background: var(--color-paper-3);
  border-color: var(--color-rule);
  color: var(--color-muted);
  cursor: not-allowed;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: var(--space-2xs) var(--space-md);
  background: var(--color-accent-deep);
  color: var(--color-accent-ink);
  border: var(--rule-hair) solid var(--color-accent-deep);
  border-radius: var(--radius-xs);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out),
              transform var(--dur-short) var(--ease-out);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #respond input#submit:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}
.woocommerce a.button:active,
.woocommerce button.button:active { transform: translateY(1px); }

.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible {
  outline: var(--rule-frame) solid var(--color-focus);
  outline-offset: 3px;
}

.woocommerce button.button:disabled,
.woocommerce button.button.disabled {
  background: var(--color-rule);
  border-color: var(--color-rule);
  color: var(--color-muted);
  opacity: 1;
  cursor: not-allowed;
}

/* Il bottone "aggiorna carrello" non è l'azione principale */
.woocommerce button[name="update_cart"] {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-rule);
}
.woocommerce button[name="update_cart"]:hover {
  background: var(--color-paper-2);
  border-color: var(--color-ink);
  color: var(--color-ink);
}

/* ---- Tabella del carrello ------------------------------------------------ */

.woocommerce table.shop_table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
  margin-bottom: var(--space-lg);
  font-variant-numeric: tabular-nums;
}
.woocommerce table.shop_table th {
  padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) 0;
  border-bottom: var(--rule-frame) solid var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-muted);
  text-align: left;
}
.woocommerce table.shop_table td {
  padding: var(--space-sm) var(--space-2xs) var(--space-sm) 0;
  border-top: 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  vertical-align: middle;
}
.woocommerce table.shop_table td.product-thumbnail img {
  width: 72px;
  border: var(--rule-hair) solid var(--color-rule);
}
.woocommerce table.shop_table td.product-name a {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  text-decoration: none;
}
.woocommerce table.shop_table td.product-name a:hover { color: var(--color-accent-deep); }
.woocommerce a.remove {
  width: 32px; height: 32px;
  display: inline-grid;
  place-items: center;
  color: var(--color-muted) !important;
  font-weight: 400;
  border-radius: var(--radius-xs);
}
.woocommerce a.remove:hover {
  background: var(--color-paper-3);
  color: var(--color-danger) !important;
}

.woocommerce .quantity input.qty {
  width: 4rem;
  min-height: 46px;
  padding: var(--space-2xs);
  text-align: center;
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-xs);
  font-variant-numeric: tabular-nums;
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals { width: 100%; float: none; }

.woocommerce .cart_totals h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  margin-bottom: var(--space-sm);
}
.woocommerce .cart_totals table.shop_table th { border-bottom: var(--rule-hair) solid var(--color-rule); }
.woocommerce .cart_totals .order-total .amount {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
}

.woocommerce .wc-proceed-to-checkout { padding-top: var(--space-md); }
.woocommerce .wc-proceed-to-checkout a.checkout-button { width: 100%; }

/* Il carrello a due colonne: articoli a sinistra, totali a destra */
@media (min-width: 60rem) {
  .woocommerce-cart .woocommerce > form.woocommerce-cart-form,
  .woocommerce-cart .woocommerce > .cart-collaterals {
    display: inline-block;
    vertical-align: top;
  }
  .woocommerce-cart .woocommerce > form.woocommerce-cart-form { width: 62%; padding-right: var(--space-2xl); }
  .woocommerce-cart .woocommerce > .cart-collaterals {
    width: 36%;
    background: var(--color-paper-2);
    padding: var(--space-md);
    border: var(--rule-hair) solid var(--color-rule);
  }
}

/* Il carrello su telefono: ogni riga diventa una scheda leggibile */
@media (max-width: 48rem) {
  .woocommerce table.shop_table_responsive thead { display: none; }
  .woocommerce table.shop_table_responsive tr {
    display: block;
    padding-block: var(--space-sm);
    border-bottom: var(--rule-hair) solid var(--color-rule);
  }
  .woocommerce table.shop_table_responsive td {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-3xs) 0;
    border: 0;
    text-align: right;
  }
  .woocommerce table.shop_table_responsive td::before {
    content: attr(data-title);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-muted);
    text-align: left;
  }
  .woocommerce table.shop_table_responsive td.product-remove::before { content: ''; }
}

/* ---- Checkout ------------------------------------------------------------ */

.woocommerce-checkout h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-2xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.woocommerce form .form-row { margin-bottom: var(--space-sm); padding: 0; }
.woocommerce form .form-row label {
  display: block;
  margin-bottom: var(--space-3xs);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-2);
}
.woocommerce form .form-row .required { color: var(--color-accent); text-decoration: none; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  width: 100%;
  min-height: 46px;
  padding: var(--space-2xs) var(--space-xs);
  background: var(--color-paper);
  color: var(--color-ink);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-xs);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color var(--dur-short) var(--ease-out);
}
.woocommerce form .form-row input.input-text:hover,
.woocommerce form .form-row textarea:hover { border-color: var(--color-neutral); }
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--color-danger); }
.woocommerce form .form-row.woocommerce-validated input.input-text { border-color: var(--color-success); }

.woocommerce .select2-container .select2-selection--single {
  display: flex;
  align-items: center;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; }

#order_review_heading { margin-top: var(--space-xl); }

.woocommerce-checkout #payment {
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-xs);
  padding: var(--space-md);
}
.woocommerce-checkout #payment ul.payment_methods {
  padding: 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.woocommerce-checkout #payment ul.payment_methods li { list-style: none; padding-block: var(--space-2xs); }
.woocommerce-checkout #payment div.payment_box {
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-xs);
  font-size: var(--text-sm);
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment #place_order { width: 100%; margin-top: var(--space-sm); }

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin-bottom: var(--space-sm); font-size: var(--text-sm); }

/* Checkout a due colonne su desktop */
@media (min-width: 60rem) {
  .woocommerce-checkout form.checkout > .col2-set { width: 58%; float: left; padding-right: var(--space-2xl); }
  .woocommerce-checkout form.checkout #order_review_heading,
  .woocommerce-checkout form.checkout #order_review { width: 42%; float: right; clear: right; }
  .woocommerce-checkout form.checkout::after { content: ''; display: table; clear: both; }
  .woocommerce-checkout form.checkout .col2-set .col-1,
  .woocommerce-checkout form.checkout .col2-set .col-2 { width: 100%; float: none; }
  #order_review_heading { margin-top: 0; }
}

/* ==========================================================================
 * Carrello e pagamento a blocchi
 *
 * WooCommerce 11 serve carrello e checkout con i blocchi (.wc-block-*), non
 * più con gli shortcode: il CSS classico qui sopra su queste due pagine non
 * aggancia niente. Sono le pagine che incassano, quindi vanno vestite bene.
 * ========================================================================== */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout { max-width: none; }

.wc-block-cart,
.wc-block-checkout { margin-top: var(--space-lg); }

/* -- impaginato a due colonne ---------------------------------------------- */

.woocommerce-page .wc-block-cart__sidebar,
.woocommerce-page .wc-block-checkout__sidebar {
  background-color: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-xs);
  padding: var(--space-md);
}
.wc-block-cart__sidebar .wc-block-components-sidebar-layout,
.wc-block-components-sidebar { background: none; }

/* -- righe prodotto -------------------------------------------------------- */

.wc-block-cart-items { border-collapse: collapse; }
.wc-block-cart-items__header {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-muted);
  border-bottom: var(--rule-frame) solid var(--color-ink);
}
.wc-block-cart-items__row { border-bottom: var(--rule-hair) solid var(--color-rule); }
.wc-block-cart-items__row td { padding-block: var(--space-md); }

.wc-block-cart-item__image img {
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: 0;
}

.wc-block-components-product-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  text-decoration: none;
  color: var(--color-ink);
}
.wc-block-components-product-name:hover { color: var(--color-accent-deep); }

.wc-block-components-product-metadata,
.wc-block-components-product-metadata__description { font-size: var(--text-sm); color: var(--color-muted); }

.wc-block-components-product-price,
.wc-block-components-product-price__value,
.wc-block-components-formatted-money-amount { font-variant-numeric: tabular-nums; }

.wc-block-cart-item__total-price-and-sale-badge-wrapper .wc-block-components-product-price__value {
  font-family: var(--font-display);
  font-weight: 700;
}

.wc-block-cart-item__remove-link {
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.wc-block-cart-item__remove-link:hover { color: var(--color-danger); }

/* -- selettore quantità ---------------------------------------------------- */

.wc-block-components-quantity-selector {
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-xs);
  background: var(--color-paper);
}
.wc-block-components-quantity-selector::after { display: none; }
.wc-block-components-quantity-selector__input {
  background: transparent;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.wc-block-components-quantity-selector__button {
  min-width: 40px;
  min-height: 40px;
  color: var(--color-ink);
  background: var(--color-paper-2);
  transition: background-color var(--dur-short) var(--ease-out);
}
.wc-block-components-quantity-selector__button:hover { background: var(--color-paper-3); }

/* -- totali ---------------------------------------------------------------- */

.wc-block-components-totals-item {
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
}
.wc-block-components-totals-item__label { color: var(--color-ink-2); }
.wc-block-components-totals-wrapper { border-top-color: var(--color-rule); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
}

/* -- bottoni --------------------------------------------------------------- */

.wc-block-components-button:not(.is-link) {
  min-height: 48px;
  padding-inline: var(--space-md);
  background: var(--color-accent-deep);
  color: var(--color-accent-ink);
  border: var(--rule-hair) solid var(--color-accent-deep);
  border-radius: var(--radius-xs);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out),
              transform var(--dur-short) var(--ease-out);
}
.wc-block-components-button:not(.is-link):hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}
.wc-block-components-button:not(.is-link):active { transform: translateY(1px); }
.wc-block-components-button:not(.is-link):focus-visible {
  outline: var(--rule-frame) solid var(--color-focus);
  outline-offset: 3px;
}
.wc-block-components-button.is-link { color: var(--color-ink); text-decoration-color: var(--color-accent); }

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button { width: 100%; }

/* -- campi -----------------------------------------------------------------
 * Gli stili dei blocchi vengono caricati dopo i nostri e con la stessa
 * specificità, quindi vincevano loro: campi bianchi pieni e angoli a 4 px su
 * una pagina di carta avorio. Il prefisso .woocommerce-page ci ridà la mano. */

body.woocommerce-page .wc-block-components-form .wc-block-components-text-input input,
body.woocommerce-page .wc-block-components-text-input input,
body.woocommerce-page .wc-block-components-textarea,
body.woocommerce-page .wc-block-components-combobox-control input.components-combobox-control__input,
body.woocommerce-page .wc-blocks-components-select .wc-blocks-components-select__select {
  min-height: 48px;
  background-color: var(--color-paper);
  color: var(--color-ink);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-xs);
  font-family: var(--font-body);
  font-size: var(--text-base);
  box-shadow: none;
}
body.woocommerce-page .wc-block-components-form .wc-block-components-text-input input:focus,
body.woocommerce-page .wc-block-components-text-input input:focus,
body.woocommerce-page .wc-blocks-components-select .wc-blocks-components-select__select:focus {
  box-shadow: none;
  border-color: var(--color-neutral);
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input label { color: var(--color-muted); }
.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus {
  outline: var(--rule-frame) solid var(--color-focus);
  outline-offset: 1px;
}

/* -- pannelli (coupon, spedizione) ----------------------------------------- */

.wc-block-components-panel__button {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
}
.wc-block-components-panel { border-top-color: var(--color-rule); }

/* -- passi del checkout ---------------------------------------------------- */

.wc-block-components-checkout-step {
  border-bottom: var(--rule-hair) solid var(--color-rule);
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.wc-block-components-checkout-step__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}
.wc-block-components-checkout-step__description { color: var(--color-ink-2); }
.wc-block-components-checkout-step__heading { margin-bottom: var(--space-2xs); }

.wc-block-components-radio-control__option { border-color: var(--color-rule); }
.wc-block-components-radio-control-accordion-option { border-color: var(--color-rule); }

.wc-block-components-order-summary-item__image img { border: var(--rule-hair) solid var(--color-rule); }

/* -- carrello vuoto --------------------------------------------------------
 * L'icona predefinita è una faccina triste nera a tutta pagina: è fuori
 * registro con qualsiasi marchio. Al suo posto il falco del logo (più sotto,
 * sezione "Carrello vuoto"). */

.wp-block-woocommerce-empty-cart-block > .wp-block-image { display: none; }

.wc-block-cart__empty-cart__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  text-align: left;
}
.wp-block-woocommerce-empty-cart-block { text-align: left; }

/* -- avvisi dei blocchi ----------------------------------------------------- */

.wc-block-components-notice-banner {
  border-radius: var(--radius-xs);
  border-color: var(--color-rule);
  background: var(--color-paper-2);
  font-size: var(--text-sm);
}
.wc-block-components-notice-banner.is-error { border-color: var(--color-danger); }
.wc-block-components-notice-banner.is-success { border-color: var(--color-success); }

@media (prefers-reduced-motion: reduce) {
  .wc-block-components-button:not(.is-link):active { transform: none; }
}

/* ---- Area account -------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 var(--space-lg); padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: flex;
  align-items: center;
  min-height: 48px;
  text-decoration: none;
  font-weight: 600;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--color-accent-deep); }

@media (min-width: 60rem) {
  .woocommerce-account .woocommerce-MyAccount-navigation { width: 24%; float: left; }
  .woocommerce-account .woocommerce-MyAccount-content { width: 72%; float: right; }
}

/* ---- Ordinamento del catalogo -------------------------------------------- */

.woocommerce .woocommerce-ordering select {
  padding: var(--space-2xs) var(--space-xs);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-xs);
  font-family: var(--font-body);
}

/* ---- Prezzi -------------------------------------------------------------- */

.woocommerce .price,
.woocommerce .amount { font-variant-numeric: tabular-nums; }
.woocommerce .price del { color: var(--color-muted); }
.woocommerce .price ins { text-decoration: none; }

/* ---- La scheda prodotto è una griglia, non due colonne flottanti ----------
 * WooCommerce impagina ancora div.product con float e larghezze al 48%.
 * La nostra scheda è un grid: se i float restano attivi la colonna immagine
 * collassa, la cornice resta vuota e il titolo va a capo dentro la parola.
 * ------------------------------------------------------------------------- */

.woocommerce div.product.pdp,
.woocommerce div.product.pdp .pdp__media,
.woocommerce div.product.pdp div.images,
.woocommerce div.product.pdp div.summary,
.woocommerce div.product.pdp .woocommerce-product-gallery {
  width: auto;
  float: none;
  margin-left: 0;
  margin-right: 0;
}

.woocommerce div.product.pdp div.images,
.woocommerce div.product.pdp .woocommerce-product-gallery { width: 100%; }

.woocommerce div.product.pdp::before,
.woocommerce div.product.pdp::after { content: none; }

/* La griglia del template resta l'autorità sulle colonne. */
.woocommerce div.product.pdp {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-2xl);
  align-items: start;
}

@media (max-width: 60rem) {
  .woocommerce div.product.pdp { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Selettore delle varianti -------------------------------------------- */

.woocommerce div.product form.cart table.variations {
  width: 100%;
  border: 0;
  margin-bottom: var(--space-sm);
}
.woocommerce div.product form.cart table.variations td,
.woocommerce div.product form.cart table.variations th {
  display: block;
  padding: 0;
  border: 0;
  vertical-align: top;
}
.woocommerce div.product form.cart table.variations th.label {
  margin-bottom: var(--space-3xs);
  text-align: left;   /* le celle th della tabella varianti sono centrate di default */
}
.woocommerce div.product form.cart table.variations th.label label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-2);
}
.woocommerce div.product form.cart table.variations td.value { margin-bottom: var(--space-sm); }
.woocommerce div.product form.cart table.variations select {
  width: 100%;
  max-width: 22rem;
  min-height: 46px;
  padding: var(--space-2xs) var(--space-xs);
  background: var(--color-paper);
  color: var(--color-ink);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-xs);
  font-family: var(--font-body);
  font-size: var(--text-base);
}
.woocommerce div.product form.cart .reset_variations {
  display: inline-block;
  margin-top: var(--space-3xs);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.woocommerce div.product form.cart .woocommerce-variation-price {
  margin-bottom: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.woocommerce div.product form.cart .woocommerce-variation-availability { font-size: var(--text-sm); }

/* ---- Galleria prodotto --------------------------------------------------- */

.woocommerce div.product div.images .woocommerce-product-gallery__image img { border-radius: 0; }
.woocommerce div.product div.images .flex-control-thumbs li img {
  border: var(--rule-hair) solid var(--color-rule);
  opacity: 0.7;
  transition: opacity var(--dur-short) var(--ease-out);
}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li img:hover { opacity: 1; }

/* ---- Movimento ridotto --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .woocommerce a.button:active,
  .woocommerce button.button:active { transform: none; }
}

/* ------------------------------------------------------------------------
   Carrello vuoto — il blocco di WooCommerce porta bottoni tondi grigi e
   titoli sottolineati: qui torna al passo del catalogo. Al posto
   dell'icona del carrello, il falco del logo.
   ------------------------------------------------------------------------ */
body.woocommerce-page .wc-block-cart__empty-cart__title {
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  margin-block: var(--space-lg) var(--space-2xs);
}
body.woocommerce-page .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
  content: '';
  display: block;
  width: 8rem;
  height: 6.5rem;
  margin: 0 auto var(--space-md);
  background: url("../img/falco-emblem.webp") center / contain no-repeat;
  -webkit-mask: none;
  mask: none;
}
body.woocommerce-page .wp-block-woocommerce-empty-cart-block > .wp-block-separator {
  display: block;
  border: 0;
  height: 40px;
  max-width: 24rem;
  margin: var(--space-lg) auto;
  background: url("../img/filigrana-banda.svg") repeat-x 0 50% / 120px 40px;
  opacity: 0.45;
}
body.woocommerce-page .wp-block-woocommerce-empty-cart-block > .wp-block-separator::before { content: none; }
body.woocommerce-page .wp-block-woocommerce-empty-cart-block > h2:not(.wc-block-cart__empty-cart__title) {
  font-family: var(--font-ui);
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-lg);
}
/* Griglia vera al posto dei flex a percentuale: con il gap il quarto
   prodotto andava a capo da solo. */
body.woocommerce-page .wc-block-grid__products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13.5rem, 100%), 1fr));
  gap: var(--space-lg) var(--space-md);
  margin: 0;
}
/* Woo fissa larghezza e max-width al 25% con .has-4-columns: serve la
   stessa classe nel selettore per vincere. */
body.woocommerce-page .wc-block-grid[class*="has-"] .wc-block-grid__product {
  border: 0; padding: 0; margin: 0; max-width: none; flex: none; width: auto;
}
body.woocommerce-page .wc-block-grid__product-link { text-decoration: none; color: var(--color-ink); }
body.woocommerce-page .wc-block-grid__product-image { margin-bottom: var(--space-sm); }
body.woocommerce-page .wc-block-grid__product-image img { aspect-ratio: 1; object-fit: cover; width: 100%; }
body.woocommerce-page .wc-block-grid__product-title {
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink);
}
body.woocommerce-page .wc-block-grid__product-price {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-ink);
  margin-block: var(--space-3xs) var(--space-sm);
}
body.woocommerce-page .wc-block-grid__product-add-to-cart .wp-block-button__link {
  border-radius: 0;
  background: var(--color-accent-deep);
  color: var(--color-on-accent);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  padding: var(--space-xs) var(--space-md);
  transition: background-color var(--dur-short) var(--ease-out);
}
body.woocommerce-page .wc-block-grid__product-add-to-cart .wp-block-button__link:hover { background: var(--color-accent); }

/* ------------------------------------------------------------------------
   Modulo d'acquisto — scheda prodotto e anteprima rapida
   ------------------------------------------------------------------------ */
:is(.pdp, .quick) form.cart { margin-bottom: var(--space-md); }
:is(.pdp, .quick) form.cart .quantity { display: inline-block; margin-right: var(--space-2xs); vertical-align: top; }
:is(.pdp, .quick) form.cart .quantity input.qty {
  width: 4.5rem; min-height: 46px;
  padding: var(--space-2xs);
  text-align: center;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-xs);
  background: var(--color-paper);
  font-variant-numeric: tabular-nums;
}
:is(.pdp, .quick) form.cart button.single_add_to_cart_button {
  min-height: 46px;
  padding: var(--space-2xs) var(--space-lg);
  background: var(--color-accent-deep);
  color: var(--color-accent-ink);
  border: var(--rule-hair) solid var(--color-accent-deep);
  border-radius: var(--radius-xs);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out),
              transform var(--dur-short) var(--ease-out);
}
:is(.pdp, .quick) form.cart button.single_add_to_cart_button:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
:is(.pdp, .quick) form.cart button.single_add_to_cart_button:active { transform: translateY(1px); }
:is(.pdp, .quick) form.cart button.single_add_to_cart_button:disabled { background: var(--color-rule); border-color: var(--color-rule); color: var(--color-muted); cursor: not-allowed; }

/* ------------------------------------------------------------------------
   Mini-carrello laterale
   ------------------------------------------------------------------------ */
.drawer-veil {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-overlay) - 1);
  background: var(--color-scrim-soft);
}
.drawer-veil[hidden], .drawer[hidden] { display: none; }
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  width: min(26rem, 100vw);
  background: var(--color-paper);
  border-left: 3px solid var(--color-accent-deep);
  box-shadow: -24px 0 48px -32px var(--color-scrim);
  isolation: isolate;
  overflow: hidden;
}
/* La rosetta della filigrana anche qui, in fondo al cassetto. */
.drawer::after {
  content: '';
  position: absolute;
  right: -10rem;
  bottom: -10rem;
  width: 24rem;
  aspect-ratio: 1;
  background: url("../img/filigrana-rosa.svg") center / contain no-repeat;
  opacity: 0.12;
  z-index: -1;
  pointer-events: none;
}
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.drawer__title {
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  margin: 0;
}
.drawer__close, .quick__close {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none;
  border: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink);
  font-size: var(--text-xl);
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.drawer__close:hover, .quick__close:hover { border-color: var(--color-accent-deep); color: var(--color-accent-deep); }
.drawer__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.falco-minicart { display: flex; flex-direction: column; min-height: 100%; }

.mc__ship { padding: var(--space-sm) var(--space-md); background: var(--color-paper-2); font-size: var(--text-sm); }
.mc__ship p { margin-bottom: var(--space-2xs); color: var(--color-ink-2); }
.mc__ship strong { color: var(--color-ink); }
.mc__track { display: block; height: 4px; background: var(--color-paper-3); overflow: hidden; }
.mc__fill { display: block; height: 100%; background: var(--color-accent-deep); transition: width var(--dur-long) var(--ease-out); }

.mc__list { list-style: none; margin: 0; padding: 0 var(--space-md); }
.mc__item {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.mc__img img { width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; background: var(--color-paper-2); }
.mc__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-right: 4.5rem; }
.mc__name {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.mc__name a { color: var(--color-ink); text-decoration: none; }
.mc__meta { font-size: var(--text-xs); color: var(--color-muted); }
.mc__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: auto; padding-top: var(--space-2xs); }
.mc__qty { display: inline-flex; align-items: center; border: var(--rule-hair) solid var(--color-rule); }
.mc__qty button {
  width: 34px; height: 34px;
  background: none; border: 0;
  font-size: var(--text-lg); line-height: 1;
  color: var(--color-ink);
  cursor: pointer;
}
.mc__qty button:hover { background: var(--color-paper-2); }
.mc__n { min-width: 2ch; text-align: center; font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
.mc__price { font-family: var(--font-ui); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--color-ink); }
.mc__remove {
  position: absolute;
  top: var(--space-sm); right: 0;
  background: none; border: 0; padding: 0;
  font-size: var(--text-xs);
  color: var(--color-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.mc__remove:hover { color: var(--color-danger); }
.mc__item.is-busy { opacity: 0.5; pointer-events: none; }

.mc__foot {
  margin-top: auto;
  position: sticky;
  bottom: 0;
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-md);
  background: var(--color-paper);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.mc__total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-family: var(--font-ui); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.mc__total strong { font-size: var(--text-xl); font-weight: 500; color: var(--color-ink); }
.mc__note { margin: 0 0 var(--space-2xs); font-size: var(--text-xs); color: var(--color-muted); }
.mc__foot .btn { width: 100%; }

.mc__empty { display: grid; justify-items: center; gap: var(--space-2xs); padding: var(--space-2xl) var(--space-md); text-align: center; }
.mc__empty-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--color-ink); }
.mc__empty .btn { margin-top: var(--space-sm); }

/* ------------------------------------------------------------------------
   Anteprima rapida
   ------------------------------------------------------------------------ */
.card__quick {
  position: absolute;
  z-index: 2;              /* sopra il link che copre tutta la scheda */
  left: var(--space-2xs); right: var(--space-2xs);
  bottom: var(--space-2xs);
  min-height: 40px;
  background: var(--color-paper);
  color: var(--color-ink);
  border: 0;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.card__quick:hover { background: var(--color-accent-deep); color: var(--color-on-accent); }
/* Con il mouse compare passando sulla scheda; al tocco resta sempre lì. */
@media (hover: hover) and (pointer: fine) {
  .card__quick { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out), background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
  .card:hover .card__quick, .card__quick:focus-visible { opacity: 1; transform: none; }
}
@media (max-width: 40rem) {
  .card__quick { left: auto; right: var(--space-3xs); bottom: var(--space-3xs); width: auto; min-height: 34px; padding-inline: var(--space-2xs); }
}

.quick {
  width: min(60rem, calc(100vw - 2 * var(--gutter)));
  max-height: min(42rem, calc(100svh - 2 * var(--gutter)));
  padding: 0;
  border: 0;
  border-top: 3px solid var(--color-accent-deep);
  background: var(--color-paper);
  color: var(--color-ink-2);
  overflow: auto;
  overscroll-behavior: contain;
}
.quick::backdrop { background: var(--color-scrim-soft); }
.quick__close { position: absolute; top: var(--space-sm); right: var(--space-sm); z-index: 2; background: var(--color-paper); }
.quick__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 100%; }
.quick__media { background: var(--color-paper-2); }
.quick__media img { width: 100%; height: 100%; max-height: 42rem; object-fit: cover; }
.quick__info { padding: var(--space-xl) var(--space-lg) var(--space-lg); }
.quick__title { font-size: var(--text-3xl); line-height: var(--leading-snug); margin-bottom: var(--space-2xs); color: var(--color-ink); }
.quick__meta { color: var(--color-muted); font-size: var(--text-sm); margin-bottom: var(--space-sm); }
.quick__price { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--color-ink); margin-bottom: var(--space-sm); }
.quick__price del { color: var(--color-muted); font-size: var(--text-lg); }
.quick__price ins { text-decoration: none; }
.quick__short { font-size: var(--text-base); margin-bottom: var(--space-md); }
.quick__more { display: inline-block; margin-top: var(--space-xs); }
.quick__loading { display: grid; place-items: center; min-height: 20rem; }
.quick__loading .falco-mark { animation: falco-hover 1.6s ease-in-out infinite alternate; }
@keyframes falco-hover { to { transform: translateY(-8px); } }
@media (max-width: 48rem) {
  .quick { width: 100vw; max-width: 100vw; max-height: 92svh; margin: auto 0 0; }
  .quick__inner { grid-template-columns: minmax(0, 1fr); }
  .quick__media img { max-height: 40svh; }
  .quick__info { padding: var(--space-lg) var(--gutter); }
}
.quick[open]::backdrop { animation: falco-veil var(--dur-long) var(--ease-out); }
@keyframes falco-veil { from { opacity: 0; } }

/* Modalità vetrina: al posto del modulo d'acquisto, l'invito al contatto. */
.vetrina-cta {
  display: grid;
  gap: var(--space-xs);
  justify-items: start;
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  background: var(--color-paper-2);
  border-left: 3px solid var(--color-accent-deep);
}
.vetrina-cta p { margin: 0; color: var(--color-ink); }

/* Galleria della scheda: WooCommerce la fa partire a opacity 0 e la accende
   con una transizione quando lo slider è pronto. Con la transizione fra
   pagine (@view-transition) quella transizione può restare ferma al primo
   fotogramma e la foto resta slavata o invisibile. La prima foto è già
   quella giusta: si mostra subito, senza aspettare lo script. */
.woocommerce-product-gallery {
  opacity: 1 !important;
  transition: none !important;
}