/* ==========================================================================
   WooCommerce Custom Styles — Cart, Checkout & Shop
   --------------------------------------------------------------------------
   Design System:
   - Headline: Sans Stack Headline (fallback: system sans)
   - Body:     Manrope
   - Primario: #113A54 | Testo: #434343 | Sfondo: #FAFAFA
   - Radio 1:  #2A8DC1 | Radio 2: #69AE28 | Radio 3: #771E76
   --------------------------------------------------------------------------
   NOTA: carica Manrope via functions.php (wp_enqueue_style) oppure
   decommenta l'@import qui sotto.
   ========================================================================== */

/* @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap'); */

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colori */
  --c-primary: #113A54;
  --c-text: #434343;
  --c-bg: #FAFAFA;
  --c-radio-1: #2A8DC1;
  --c-radio-2: #69AE28;
  --c-radio-3: #771E76;
  --c-btn-text: #F1F7FF;
  --c-link: var(--c-radio-1);          /* da definire: per ora Radio 1 */
  --c-border: #E2E2E2;
  --c-surface: #FFFFFF;
  --c-error: #B3261E;
  --c-success: var(--c-radio-2);

  /* Tipografia */
  --font-headline: 'Sans Stack Headline', -apple-system, BlinkMacSystemFont,
                   'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Helvetica, Arial, sans-serif;
  --fs-h1: 70px;
  --fs-h2: 60px;
  --fs-h3: 40px;
  --fs-body: 17px;

  /* Bottoni */
  --btn-bg: var(--c-primary);
  --btn-color: var(--c-btn-text);
  --btn-padding: 16px 24px;
  --btn-radius: 9999px;                /* arrotondato al massimo */
  /* Hover: da definire — per ora schiarisco leggermente il primario */
  --btn-bg-hover: #1A4F70;

  /* Spaziature e raggi */
  --radius-card: 12px;
  --radius-field: 8px;
}

/* --------------------------------------------------------------------------
   2. Base tipografica (scoped alle pagine Woo per non toccare il resto)
   -------------------------------------------------------------------------- */
.woocommerce-page,
.woocommerce {
  background-color: var(--c-bg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--c-text);
}

.woocommerce-page h1,
.woocommerce h1 {
  font-family: var(--font-headline);
  font-size: var(--fs-h1);
  font-weight: 700;
  color: var(--c-primary);
  line-height: 1.1;
}

.woocommerce-page h2,
.woocommerce h2 {
  font-family: var(--font-headline);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--c-primary);
  line-height: 1.15;
}

.woocommerce-page h3,
.woocommerce h3 {
  font-family: var(--font-headline);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--c-primary);
  line-height: 1.2;
}

.woocommerce-page p,
.woocommerce p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--c-text);
  line-height: 1.6;
}

.woocommerce-page a:not(.button):not(.wc-block-components-button):not(.elementor-button),
.woocommerce a:not(.button):not(.wc-block-components-button):not(.elementor-button) {
  color: var(--c-link);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.woocommerce-page a:not(.button):not(.wc-block-components-button):not(.elementor-button):hover,
.woocommerce a:not(.button):not(.wc-block-components-button):not(.elementor-button):hover {
  opacity: 0.8;               /* hover link da definire */
  text-decoration: none;
}

/* Nessuna sottolineatura su tutti i link, in ogni stato */
.woocommerce-page a,
.woocommerce a,
.wp-block-woocommerce-cart a,
.wp-block-woocommerce-checkout a,
.wc-block-components-checkout-step a,
.wc-block-components-totals-coupon-link {
  text-decoration: none !important;
}

/* I bottoni Elementor (header/footer/sezioni) mantengono il loro testo bianco
   anche nelle pagine WooCommerce */
.woocommerce-page a.elementor-button,
.woocommerce-page a.elementor-button .elementor-button-text,
.woocommerce a.elementor-button,
.woocommerce a.elementor-button .elementor-button-text {
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   3. Bottoni — classico + blocchi
   -------------------------------------------------------------------------- */
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce #respond input#submit.alt,
.woocommerce button.single_add_to_cart_button,
.woocommerce button[name="apply_coupon"],
.woocommerce button[name="update_cart"],
.woocommerce .checkout-button,
.woocommerce #place_order,
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  background-color: var(--btn-bg);
  color: var(--btn-color);
  padding: var(--btn-padding);
  border: none;
  border-radius: var(--btn-radius);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce button.single_add_to_cart_button:hover,
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover,
.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background-color: var(--btn-bg-hover);   /* hover da definire */
  color: var(--btn-color);
}

/* Bottoni disabilitati (es. "Aggiorna carrello" senza modifiche) */
.woocommerce .button:disabled,
.woocommerce .button.disabled,
.woocommerce .button:disabled[disabled],
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt.disabled {
  background-color: var(--btn-bg);
  color: var(--btn-color);
  opacity: 0.5;
  padding: var(--btn-padding);
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   4. Contenitore pagine Cart & Checkout
   -------------------------------------------------------------------------- */
/* Hello Elementor non applica padding laterale al contenuto: lo aggiungiamo
   qui, con una larghezza massima per centrare il contenuto su schermi grandi */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 4vw, 40px);
  padding-right: clamp(16px, 4vw, 40px);
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   5. Carrello classico ([woocommerce_cart])
   -------------------------------------------------------------------------- */
.woocommerce table.shop_table {
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

.woocommerce table.shop_table th {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--c-primary);
  background-color: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  padding: 14px 16px;
}

.woocommerce table.shop_table td {
  padding: 14px 16px;
  border-top: 1px solid var(--c-border);
  vertical-align: middle;
}

.woocommerce table.shop_table td.product-name a {
  color: var(--c-primary);
  font-weight: 600;
}

.woocommerce table.shop_table img {
  border-radius: var(--radius-field);
  width: 64px;
  height: auto;
}

/* Prezzi */
.woocommerce .amount,
.woocommerce-Price-amount {
  color: var(--c-primary);
  font-weight: 600;
}

/* Rimuovi prodotto (X) */
.woocommerce a.remove {
  color: var(--c-text) !important;
  font-weight: 400;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.woocommerce a.remove:hover {
  color: var(--c-surface) !important;
  background-color: var(--c-error);
}

/* Quantità */
.woocommerce .quantity .qty {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-field);
  padding: 10px 8px;
  background-color: var(--c-surface);
}

/* Coupon */
.woocommerce .coupon .input-text,
.woocommerce-cart table.cart td.actions .coupon .input-text {
  width: 280px;
  max-width: 100%;
  border: 1px solid var(--c-border);
  border-radius: var(--btn-radius);
  padding: 14px 20px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  margin-right: 8px;
  background-color: var(--c-surface);
  box-sizing: border-box;
}

/* Totali carrello */
.woocommerce .cart_totals h2 {
  font-size: var(--fs-h3);   /* h2 da 60px sarebbe eccessivo nel box totali */
}

.woocommerce .cart_totals table.shop_table {
  border-radius: var(--radius-card);
}

.woocommerce .cart_totals .order-total .amount {
  font-size: 22px;
  font-weight: 700;
}

.woocommerce .wc-proceed-to-checkout .checkout-button {
  display: block;
  font-size: var(--fs-body);
}

/* --------------------------------------------------------------------------
   5. Checkout classico ([woocommerce_checkout])
   -------------------------------------------------------------------------- */
.woocommerce form.checkout h3,
.woocommerce-additional-fields h3,
#order_review_heading {
  font-size: 28px;            /* scala ridotta per i sottotitoli del form */
}

/* Campi form */
.woocommerce form .form-row label {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--c-primary);
  margin-bottom: 4px;
}

.woocommerce form .form-row .required {
  color: var(--c-error);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce form .form-row .select2-container .select2-selection--single {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--c-text);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-field);
  padding: 12px 14px;
  height: auto;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce form .form-row .select2-container .select2-selection--single {
  display: flex;
  align-items: center;
}

.woocommerce form .form-row .select2-container .select2-selection__arrow {
  height: 100%;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: none;
  border-color: var(--c-radio-1);
  box-shadow: 0 0 0 3px rgba(42, 141, 193, 0.15);
}

/* Campi con errore di validazione */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
  border-color: var(--c-error);
}

.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select {
  border-color: var(--c-success);
}

/* Box riepilogo ordine */
.woocommerce-checkout #order_review {
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  padding: 24px;
}

.woocommerce-checkout #order_review table.shop_table {
  border: none;
}

/* Metodi di pagamento */
.woocommerce-checkout #payment {
  background-color: var(--c-bg);
  border-radius: var(--radius-card);
}

.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--c-border);
  padding: 16px;
}

.woocommerce-checkout #payment ul.payment_methods li label {
  font-weight: 600;
  color: var(--c-primary);
}

.woocommerce-checkout #payment div.payment_box {
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-field);
  color: var(--c-text);
  font-size: 15px;
}

.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--c-border);
}

.woocommerce-checkout #place_order {
  width: 100%;
  font-size: 18px;
}

/* Login / coupon toggle in cima al checkout */
.woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-form-coupon-toggle .woocommerce-info {
  border-top-color: var(--c-radio-1);
}

/* --------------------------------------------------------------------------
   6. Cart & Checkout Blocks (Gutenberg)
   -------------------------------------------------------------------------- */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--c-text);
}

.wc-block-components-title,
.wc-block-components-checkout-step__title {
  font-family: var(--font-headline);
  font-weight: 700;
  color: var(--c-primary);
}

.wc-block-components-product-name {
  color: var(--c-primary);
  font-weight: 600;
}

.wc-block-components-formatted-money-amount {
  color: var(--c-primary);
  font-weight: 600;
}

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox .components-combobox-control__input {
  font-family: var(--font-body);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-field);
  background-color: var(--c-surface);
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus {
  border-color: var(--c-radio-1);
  box-shadow: 0 0 0 3px rgba(42, 141, 193, 0.15);
}

.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-totals-wrapper {
  background-color: var(--c-surface);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--c-primary);
  font-weight: 700;
}

.wc-block-components-radio-control__option {
  font-family: var(--font-body);
}

/* --------------------------------------------------------------------------
   7. Notifiche WooCommerce
   -------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  background-color: var(--c-surface);
  border-radius: var(--radius-field);
  color: var(--c-text);
}

.woocommerce-message {
  border-top-color: var(--c-success);
}

.woocommerce-message::before {
  color: var(--c-success);
}

.woocommerce-info {
  border-top-color: var(--c-radio-1);
}

.woocommerce-info::before {
  color: var(--c-radio-1);
}

.woocommerce-error {
  border-top-color: var(--c-error);
}

.woocommerce-error::before {
  color: var(--c-error);
}

/* --------------------------------------------------------------------------
   8. Shop loop (griglia prodotti) — base
   -------------------------------------------------------------------------- */
.woocommerce ul.products li.product {
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  padding: 16px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.woocommerce ul.products li.product:hover {
  box-shadow: 0 8px 24px rgba(17, 58, 84, 0.10);
  transform: translateY(-2px);
}

.woocommerce ul.products li.product img {
  border-radius: var(--radius-field);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-headline);
  font-size: 20px;
  font-weight: 700;
  color: var(--c-primary);
}

.woocommerce ul.products li.product .price {
  color: var(--c-primary);
  font-weight: 600;
  font-size: var(--fs-body);
}

.woocommerce ul.products li.product .price del {
  color: var(--c-text);
  opacity: 0.6;
}

.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
  background-color: var(--c-radio-2);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-weight: 700;
  border-radius: var(--btn-radius);
  padding: 6px 14px;
  min-height: 0;
  min-width: 0;
  line-height: 1.3;
}

/* Breadcrumb */
.woocommerce .woocommerce-breadcrumb {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--c-text);
}

.woocommerce .woocommerce-breadcrumb a {
  color: var(--c-link);
}

/* Paginazione */
.woocommerce nav.woocommerce-pagination ul {
  border: none;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none;
  margin: 0 4px;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  font-family: var(--font-body);
  color: var(--c-primary);
  border-radius: var(--btn-radius);
  padding: 10px 16px;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background-color: var(--c-primary);
  color: var(--c-btn-text);
}

/* --------------------------------------------------------------------------
   9. Responsive — scala tipografica
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --fs-h1: 52px;
    --fs-h2: 44px;
    --fs-h3: 32px;
  }
}

@media (max-width: 768px) {
  :root {
    --fs-h1: 40px;
    --fs-h2: 34px;
    --fs-h3: 26px;
  }

  /* Carrello classico: tabella in modalità "stacked" più leggibile */
  .woocommerce table.shop_table_responsive tr td {
    border-top: 1px solid var(--c-border);
  }

  .woocommerce .coupon .input-text {
    width: 100%;
    margin: 0 0 8px;
  }

  .woocommerce .coupon .button {
    width: 100%;
  }

  .woocommerce-checkout #place_order,
  .woocommerce .wc-proceed-to-checkout .checkout-button {
    width: 100%;
  }
}