/* ════════════════════════════════════════════════════════════════
   WooCommerce — restyle layer (Design System v3)
   ----------------------------------------------------------------
   Veste le pagine del funnel d'acquisto (Carrello, Checkout, Account)
   coi token del tema. Caricato SOLO su quelle pagine (vedi functions.php).

   Scope: body.commerce-page (impostato dal page template template-commerce.php).
   NOTA SPECIFICITÀ: il CSS di WooCommerce si carica dopo il tema, quindi
   su sfondi, bordi e colori serve !important. Qui c'è solo aspetto.
   Copre sia il checkout CLASSICO (shortcode) sia quello a BLOCCHI.
   Si adatta a dark/light perché usa i token del design system.
   ════════════════════════════════════════════════════════════════ */

body.commerce-page {
	background: var(--bg);
	color: var(--cream-2);
	font-family: var(--body);
}

/* ── Layout: spazio sotto la navbar fissa + blocco centrato ── */
.commerce-main {
	max-width: 1180px;
	margin: 0 auto;
	padding: clamp(6.5rem, 10vh, 9rem) clamp(1.25rem, 5vw, 4rem) clamp(3rem, 6vw, 6rem);
	min-height: 60vh;
}
.commerce-header { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.commerce-title {
	font-family: var(--display);
	font-weight: 800;
	font-size: clamp(2rem, 5vw, 3.4rem);
	letter-spacing: -.05em;
	line-height: 1;
	color: var(--cream);
}

/* ════ TITOLI E TESTO ═══════════════════════════════════════════ */
body.commerce-page .commerce-content,
body.commerce-page .woocommerce { color: var(--cream-3) !important; }
body.commerce-page h2,
body.commerce-page h3,
body.commerce-page .wc-block-components-title,
body.commerce-page .woocommerce-column__title,
body.commerce-page #order_review_heading,
body.commerce-page .cart_totals h2 {
	font-family: var(--display) !important;
	font-weight: 800 !important;
	letter-spacing: -.03em !important;
	color: var(--cream) !important;
}
body.commerce-page a,
body.commerce-page .woocommerce a { color: var(--acc-ll) !important; }
body.commerce-page a:hover { color: var(--acc) !important; }

/* ════ CARD / RIQUADRI (sfondi scuri) ═══════════════════════════ */
body.commerce-page #customer_details,
body.commerce-page #order_review,
body.commerce-page .woocommerce-checkout-review-order,
body.commerce-page .cart_totals,
body.commerce-page .woocommerce-MyAccount-navigation,
body.commerce-page .woocommerce-MyAccount-content,
body.commerce-page .woocommerce-form-login,
body.commerce-page .woocommerce-form-register,
body.commerce-page .woocommerce-order,
body.commerce-page .wc-block-components-panel,
body.commerce-page .wc-block-checkout__sidebar,
body.commerce-page .wc-block-components-totals-wrapper,
body.commerce-page .wc-block-cart__sidebar,
body.commerce-page .wc-block-components-order-summary {
	background: var(--s2) !important;
	border: 1px solid var(--border) !important;
	border-radius: 0 !important;
}

/* ════ TABELLE (ordine, carrello, totali) ═══════════════════════ */
body.commerce-page .shop_table,
body.commerce-page .woocommerce table.shop_table,
body.commerce-page table.cart,
body.commerce-page .wc-block-components-totals-item {
	background: transparent !important;
	border-color: var(--border) !important;
	color: var(--cream-3) !important;
}
body.commerce-page .shop_table th,
body.commerce-page .shop_table td,
body.commerce-page table.cart th,
body.commerce-page table.cart td {
	border-color: var(--bord-s) !important;
	color: var(--cream-3) !important;
}
body.commerce-page .order-total .amount,
body.commerce-page .wc-block-components-totals-footer-item {
	color: var(--cream) !important;
	font-family: var(--display) !important;
	font-weight: 800 !important;
}
body.commerce-page .woocommerce-Price-amount,
body.commerce-page .amount { color: var(--cream) !important; }

/* ════ INPUT / FORM ═════════════════════════════════════════════ */
body.commerce-page input[type="text"],
body.commerce-page input[type="email"],
body.commerce-page input[type="tel"],
body.commerce-page input[type="password"],
body.commerce-page input[type="number"],
body.commerce-page textarea,
body.commerce-page select,
body.commerce-page .wc-block-components-text-input input,
body.commerce-page .select2-container .select2-selection {
	background: var(--s1) !important;
	color: var(--cream) !important;
	border: 1px solid var(--border) !important;
	border-radius: 0 !important;
}
body.commerce-page input::placeholder,
body.commerce-page textarea::placeholder { color: var(--cream-4) !important; }
body.commerce-page input:focus,
body.commerce-page textarea:focus,
body.commerce-page select:focus { border-color: var(--acc-md) !important; outline: none !important; }
body.commerce-page label,
body.commerce-page .wc-block-components-text-input label { color: var(--cream-3) !important; }

/* ════ BOTTONI (come .btn-fill del tema) ════════════════════════ */
body.commerce-page .button,
body.commerce-page button.button,
body.commerce-page input.button,
body.commerce-page a.button,
body.commerce-page .checkout-button,
body.commerce-page #place_order,
body.commerce-page .wc-block-components-button {
	font-family: var(--display) !important;
	font-weight: 700 !important;
	letter-spacing: -.01em !important;
	background: var(--acc) !important;
	color: #0C0B08 !important;
	border: 1.5px solid var(--acc) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transition: background .25s, color .25s, border-color .25s, box-shadow .25s !important;
}
body.commerce-page .button:hover,
body.commerce-page button.button:hover,
body.commerce-page input.button:hover,
body.commerce-page a.button:hover,
body.commerce-page #place_order:hover,
body.commerce-page .wc-block-components-button:hover {
	background: transparent !important;
	color: var(--acc-ll) !important;
	box-shadow: 0 0 18px var(--acc-sm) !important;
}
/* Bottone secondario (es. "Aggiorna carrello") in outline */
body.commerce-page button[name="update_cart"],
body.commerce-page .wc-block-components-button.outlined {
	background: transparent !important;
	color: var(--acc-ll) !important;
	border: 1.5px solid var(--acc-md) !important;
}

/* ════ NAVIGAZIONE ACCOUNT (tab "Il mio account") ═══════════════ */
body.commerce-page .woocommerce-MyAccount-navigation ul { list-style: none !important; padding: 0 !important; }
body.commerce-page .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--bord-s) !important;
}
body.commerce-page .woocommerce-MyAccount-navigation li a {
	font-family: var(--display) !important;
	font-weight: 600 !important;
	color: var(--cream-3) !important;
	display: block;
	padding: .7rem .9rem !important;
}
body.commerce-page .woocommerce-MyAccount-navigation li.is-active a,
body.commerce-page .woocommerce-MyAccount-navigation li a:hover {
	color: var(--cream) !important;
	background: var(--acc-x) !important;
	border-left: 2px solid var(--acc) !important;
}

/* ════ NOTICE / MESSAGGI ════════════════════════════════════════ */
body.commerce-page .woocommerce-message,
body.commerce-page .woocommerce-info,
body.commerce-page .wc-block-components-notice-banner {
	background: var(--s3) !important;
	border-top: none !important;
	border-left: 2px solid var(--acc) !important;
	color: var(--cream-2) !important;
	border-radius: 0 !important;
}
body.commerce-page .woocommerce-error,
body.commerce-page .wc-block-components-validation-error {
	background: var(--cop-x) !important;
	border-left: 2px solid var(--cop) !important;
	color: var(--cream-2) !important;
	border-radius: 0 !important;
}

/* ════ MISC ═════════════════════════════════════════════════════ */
body.commerce-page .wc-block-components-radio-control,
body.commerce-page .wc-block-checkout__payment-method,
body.commerce-page .payment_methods,
body.commerce-page #payment {
	background: transparent !important;
	border-color: var(--border) !important;
}
body.commerce-page hr,
body.commerce-page .wc-block-components-totals-wrapper { border-color: var(--bord-s) !important; }