/*
 * cart-checkout.css
 * Adatta i blocchi WooCommerce (woocommerce/cart + woocommerce/checkout) al look
 * dei mockup (carrello.html / checkout.html). CSS puro, riusa i token :root del
 * tema (definiti in critical.css). Nessun override dei template blocco: solo
 * stile mirato sulle classi .wc-block-* + display:none mirati per l'header.
 *
 * Mappa classi WC usate:
 *  Cart:     .wp-block-woocommerce-cart, .wc-block-cart, .wc-block-cart__main,
 *            .wc-block-cart__sidebar, .wc-block-cart-items, .wc-block-cart-item,
 *            .wc-block-components-quantity-selector, .wc-block-components-totals-*,
 *            .wc-block-cart__submit-button, .wc-block-components-totals-coupon.
 *  Checkout: .wp-block-woocommerce-checkout, .wc-block-checkout, .wc-block-checkout__main,
 *            .wc-block-components-sidebar, .wc-block-checkout__form,
 *            .wc-block-components-express-payment, .wc-block-components-radio-control,
 *            .wc-block-components-text-input, .wc-block-components-checkout-place-order-button.
 *
 * @package Peperibimbi
 */

/* ============================================================
 * 0bis. BLINDATURA HEADER su pagine WooCommerce
 * Gli stylesheet legacy di WC (woocommerce-layout.css ecc.) caricati
 * sul cart/checkout possono interferire con la barra. Riaffermiamo il
 * layout dell'header del tema (identico a critical.css) con priorita.
 * ============================================================ */
.woocommerce-cart .site-header .header-row,
.woocommerce-checkout .site-header .header-row {
	display: grid !important;
	grid-template-columns: 1fr auto 1fr !important;
	align-items: center !important;
	gap: 24px !important;
	height: 80px;
}
.woocommerce-cart .site-header .header-tools,
.woocommerce-checkout .site-header .header-tools {
	display: flex !important;
	justify-content: flex-end;
	align-items: center;
	gap: 14px;
}
.woocommerce-cart .site-header .tool,
.woocommerce-checkout .site-header .tool {
	position: relative;
	width: 40px;
	height: 40px;
	float: none;
}
.woocommerce-cart .site-header .tool .badge,
.woocommerce-checkout .site-header .tool .badge {
	position: absolute;
	top: 4px;
	right: 4px;
	min-width: 16px;
	height: 16px;
}

/* ============================================================
 * 0. CORNICE PAGINA - container e titoli in stile mockup
 * ============================================================ */
.woocommerce-cart .wc-block-cart,
.woocommerce-checkout .wc-block-checkout {
	max-width: var(--maxw, 1480px);
	margin: 0 auto;
	padding: 34px 24px 70px;
}

.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-cart .wp-block-post-title,
.woocommerce-checkout .wp-block-post-title {
	font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
	font-weight: 600;
	font-size: clamp(28px, 4vw, 38px);
	letter-spacing: -.01em;
	margin-bottom: 22px;
}

/* Titoli interni dei blocchi -> Cormorant Garamond */
.wc-block-cart__totals-title,
.wc-block-components-checkout-step__title,
.wc-block-components-order-summary .wc-block-components-title,
.wc-block-components-totals-wrapper .wc-block-components-title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title {
	font-family: var(--font-display, "Cormorant Garamond", Georgia, serif) !important;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--ink);
}

/* ============================================================
 * 1. CART - layout 2 colonne (items sx + totali sticky dx)
 * WC 10.x usa .wc-block-components-sidebar-layout (flex) con
 * .wc-block-components-main + .wc-block-components-sidebar.
 * ============================================================ */
.wp-block-woocommerce-cart .wc-block-cart,
.wc-block-cart.wc-block-components-sidebar-layout,
.wc-block-checkout.wc-block-components-sidebar-layout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 34px;
}

.wc-block-cart__main,
.wc-block-checkout__main,
.wc-block-components-main {
	flex: 1 1 480px;
	min-width: 0;
}

.wc-block-cart__sidebar,
.wc-block-components-sidebar {
	flex: 0 0 380px;
	max-width: 380px;
	width: 380px;
	position: sticky;
	top: 96px;
}

/* Card lista articoli */
.wc-block-cart-items {
	background: var(--white, #fff);
	border: 1px solid var(--line);
	border-radius: 14px;
	overflow: hidden;
}

.wc-block-cart-items__header {
	background: transparent;
	border-bottom: 1px solid var(--line);
	font-size: 13px;
	font-weight: 600;
	color: var(--mute);
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: 16px 22px;
}

/* Riga prodotto */
.wc-block-cart-items .wc-block-cart-items__row,
tr.wc-block-cart-items__row {
	border-bottom: 1px solid var(--line);
	padding: 8px 14px;
}

.wc-block-cart-items__row:last-child {
	border-bottom: none;
}

/* Thumb prodotto (mockup .ci-thumb 104x120, object-fit cover) */
.wc-block-cart-item__image,
.wc-block-cart-item__image img {
	border-radius: 10px;
	overflow: hidden;
	background: var(--bone-2);
}

.wc-block-cart-item__image img {
	width: 100%;
	aspect-ratio: 104 / 120;
	object-fit: cover;
}

/* Nome prodotto -> Cormorant Garamond */
.wc-block-cart-item__product-name,
.wc-block-components-product-name {
	font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
	font-size: 18px;
	font-weight: 600;
	color: var(--ink);
	line-height: 1.2;
}

.wc-block-cart-item__product-name:hover,
.wc-block-components-product-name:hover {
	color: var(--terra);
}

/* Metadati variante (taglia, colore) -> pill bone */
.wc-block-cart-item__product .wc-block-components-product-details li,
.wc-block-components-product-metadata__description ~ .wc-block-components-product-details li {
	font-size: 12px;
	color: var(--ink-soft);
}

/* Prezzo */
.wc-block-cart-item__total .wc-block-components-product-price,
.wc-block-components-product-price {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}

.wc-block-components-product-price__regular {
	color: var(--mute);
	text-decoration: line-through;
	font-weight: 500;
	margin-right: 6px;
}

.wc-block-components-product-price__value.is-discounted,
.wc-block-components-sale-badge {
	color: var(--terra);
}

/* ---- Stepper quantita (pill) ---- */
.wc-block-components-quantity-selector {
	border: 1px solid var(--line);
	border-radius: var(--radius-pill, 999px);
	overflow: hidden;
	background: var(--white, #fff);
	max-width: 120px;
}

.wc-block-components-quantity-selector__input {
	font-weight: 600;
	font-size: 15px;
	color: var(--ink);
	background: transparent;
}

.wc-block-components-quantity-selector__button {
	color: var(--ink-soft);
	font-size: 18px;
	transition: background .15s, color .15s;
}

.wc-block-components-quantity-selector__button:hover {
	background: var(--bone-2);
	color: var(--terra);
}

/* Link rimuovi */
.wc-block-cart-item__remove-link {
	color: var(--mute);
	font-size: 13px;
	transition: color .15s;
}

.wc-block-cart-item__remove-link:hover {
	color: var(--terra-deep);
}

/* ============================================================
 * STEPPER Carrello -> Spedizione -> Pagamento (mockup carrello.html)
 * Iniettato via render_block sopra il carrello/checkout a blocchi.
 * ============================================================ */
.pb-stepper-wrap {
	background: var(--bone-2);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 18px 0;
	margin: 0 0 22px;
}
.pb-stepper {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 640px;
	margin: 0 auto;
	padding: 0 18px;
}
.pb-step {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 14px;
	font-weight: 600;
	color: var(--mute);
	white-space: nowrap;
}
.pb-step .num {
	width: 30px;
	height: 30px;
	border-radius: 999px;
	border: 1.5px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	background: var(--white, #fff);
}
.pb-step.active { color: var(--ink); }
.pb-step.active .num {
	background: var(--ink);
	color: #fff;
	border-color: var(--ink);
}
.pb-step-line {
	flex: 1;
	height: 1.5px;
	background: var(--line);
	margin: 0 16px;
	min-width: 24px;
}

/* ============================================================
 * SHIP PROGRESS - card bianca con barra (mockup carrello.html)
 * ============================================================ */
.ship-progress {
	background: var(--white, #fff);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 18px 22px;
	margin-bottom: 22px;
}
.ship-progress .sp-top {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 12px;
}
.ship-progress .sp-top svg { color: var(--forest); flex-shrink: 0; }
.ship-progress .sp-amount { color: var(--terra); }
.ship-progress .sp-bar {
	height: 11px;
	background: var(--bone-2);
	border-radius: 999px;
	overflow: hidden;
	position: relative;
}
.ship-progress .sp-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--forest), var(--butter));
	border-radius: 999px;
	transition: width .5s ease;
}
.ship-progress.done .sp-fill {
	background: linear-gradient(90deg, var(--forest), var(--forest));
	width: 100% !important;
}
.ship-progress.done .sp-top { color: var(--forest); }

@media (max-width: 880px) {
	.pb-step { font-size: 13px; gap: 7px; }
	.pb-step-line { margin: 0 8px; }
}
@media (max-width: 520px) {
	.pb-step span:not(.num) { display: none; }
}

/* ---- Messaggio free-shipping nativo dei blocchi (ship-progress) ---- */
/* WC mostra il progresso free-shipping nel blocco "Free shipping" del totale.
 * Lo avviciniamo alla .ship-progress del mockup: card bianca + barra terra/forest. */
.wc-block-components-shipping-rates-control__package .wc-block-components-totals-shipping__fulfillment-icon,
.wc-block-components-totals-item__description .wc-block-components-totals-shipping__via {
	color: var(--forest);
}

.wp-block-woocommerce-cart .wc-block-components-notice-banner.is-info,
.wc-block-components-shipping-calculator__notice,
.wc-block-cart__totals-title + .wc-block-components-totals-item .wc-block-components-totals-shipping {
	border-radius: 12px;
}

/* Barra di avanzamento (se presente nel blocco free shipping) */
.wc-block-components-totals-shipping .wc-block-components-shipping-rates-control__package,
.wc-block-components-progress-bar__bar {
	background: var(--bone-2);
	border-radius: var(--radius-pill, 999px);
	overflow: hidden;
}

.wc-block-components-progress-bar__filled-bar {
	background: linear-gradient(90deg, var(--forest), var(--butter));
	border-radius: var(--radius-pill, 999px);
}

/* ============================================================
 * 2. TOTALI / RIEPILOGO (card sticky, condiviso cart+checkout)
 * IMPORTANTE: la card va SOLO sul contenitore esterno della sidebar,
 * mai sui singoli totals-wrapper (altrimenti ogni riga diventa una card
 * stretta e il coupon collassa in verticale).
 * ============================================================ */
.wp-block-woocommerce-cart-totals-block,
.wp-block-woocommerce-checkout-totals-block {
	background: var(--white, #fff);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 24px;
	box-shadow: 0 18px 40px -28px rgba(27, 20, 16, .4);
}

/* I singoli blocchi del riepilogo NON sono card: sfondo e bordi neutri. */
.wp-block-woocommerce-cart-totals-block .wc-block-components-totals-wrapper,
.wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-wrapper,
.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block,
.wp-block-woocommerce-cart-order-summary-block > div,
.wp-block-woocommerce-checkout-order-summary-block > div {
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

/* La sidebar deve mantenere la sua larghezza: niente min-width imposti. */
.wc-block-cart__sidebar,
.wc-block-components-sidebar {
	min-width: 0;
}

.wc-block-components-totals-item {
	font-size: 15px;
	color: var(--ink-soft);
	padding: 9px 0;
}

/* Riga coupon / spedizione gratuita -> forest */
.wc-block-components-totals-discount .wc-block-components-totals-item__value,
.wc-block-components-totals-item__value.is-discount,
.wc-block-components-totals-shipping .wc-block-components-totals-item__value {
	color: var(--forest);
	font-weight: 600;
}

/* Totale finale: linea ink + valore Cormorant Garamond grande */
.wc-block-components-totals-footer-item {
	border-top: 1.5px solid var(--ink);
	margin-top: 8px;
	padding-top: 16px;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
	font-size: 30px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-weight: 600;
	font-size: 16px;
	color: var(--ink);
}

/* Coupon (details/summary stile mockup) */
.wc-block-components-totals-coupon__form .wc-block-components-text-input input {
	border-radius: var(--radius-pill, 999px);
}

.wc-block-components-totals-coupon__button,
.wc-block-components-totals-coupon .wc-block-components-button {
	background: var(--ink);
	color: var(--bone);
	border-radius: var(--radius-pill, 999px);
	font-weight: 600;
}

.wc-block-components-totals-coupon-link {
	color: var(--terra);
	font-weight: 600;
}

/* ---- CTA "Vai al checkout" ---- */
.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button,
.wc-block-cart__submit-container .wc-block-components-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	background: var(--ink);
	color: #fff;
	border: none;
	padding: 17px;
	border-radius: var(--radius-pill, 999px);
	font-weight: 700;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: .06em;
	cursor: pointer;
	transition: background .15s, transform .1s;
}

.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-container .wc-block-components-button:hover {
	background: #3A3A36;
}

.wc-block-cart__submit-button:active {
	transform: scale(.99);
}

/* Messaggio pagamenti sotto la CTA, iniettato via hook PHP. */
.pb-pay-tease {
	text-align: center;
	font-size: 13px;
	color: var(--ink-soft);
	margin-top: 12px;
}

.pb-pay-tease strong {
	color: var(--berry);
}

/* badge pagamenti (iniettati via hook PHP, classe .pb-pay-badges) */
.pb-pay-badges {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 16px;
	flex-wrap: wrap;
}

.pb-pay-badges .pb {
	height: 26px;
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 3px 8px;
	display: flex;
	align-items: center;
	font-size: 11px;
	font-weight: 700;
	color: var(--ink-soft);
	background: var(--white, #fff);
	letter-spacing: .02em;
}

/* mini-trust sotto il riepilogo (iniettato via hook PHP, classe .pb-mini-trust) */
.pb-mini-trust {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}

.pb-mini-trust .mt {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--ink-soft);
}

.pb-mini-trust .mt svg {
	color: var(--forest);
	flex-shrink: 0;
	width: 17px;
	height: 17px;
}

/* ============================================================
 * 3. CHECKOUT - layout 2 colonne (form sx + riepilogo sticky dx)
 * ============================================================ */
.wp-block-woocommerce-checkout .wc-block-checkout__main {
	min-width: 0;
}

.wc-block-components-sidebar.wc-block-checkout__sidebar {
	position: sticky;
	top: 96px;
}

/* Express pay area (Apple/Google/PayPal) */
.wc-block-components-express-payment {
	background: var(--white, #fff);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 20px 24px;
	margin-bottom: 18px;
}

.wc-block-components-express-payment__title-container {
	color: var(--mute);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: 13px;
	font-weight: 600;
}

.wc-block-components-express-payment__event-buttons > li > * {
	border-radius: var(--radius-pill, 999px) !important;
}

/* Step / sezioni form come card mockup (.block) */
.wc-block-components-checkout-step {
	background: var(--white, #fff);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 24px;
	margin-bottom: 18px;
}

.wc-block-components-checkout-step__title {
	font-family: var(--font-display, "Cormorant Garamond", Georgia, serif) !important;
	font-size: 21px;
	font-weight: 600;
}

.wc-block-components-checkout-step__heading-content {
	color: var(--terra);
	font-weight: 600;
}

/* ---- Campi form stile mockup ---- */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-select .wc-blocks-components-select__select,
.wc-block-components-combobox .components-form-token-field__input {
	border: 1px solid var(--line) !important;
	border-radius: 10px !important;
	font: inherit;
	font-size: 15px;
	color: var(--ink);
	background: var(--white, #fff);
	transition: border-color .15s, box-shadow .15s;
}

.wc-block-components-text-input input:focus,
.wc-block-components-text-input.is-active input,
.wc-block-components-text-input textarea:focus,
.wc-block-components-select .wc-blocks-components-select__select:focus {
	outline: none;
	border-color: var(--terra) !important;
	box-shadow: 0 0 0 3px rgba(196, 74, 46, .12);
}

.wc-block-components-text-input label,
.wc-block-components-select label {
	color: var(--ink-soft);
}

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

/* ---- Radio card spedizione/pagamento (stile mockup .radio-card) ---- */
.wc-block-components-radio-control__option,
.wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__option {
	border: 1.5px solid var(--line);
	border-radius: 12px;
	padding: 15px 18px;
	margin-bottom: 11px;
	cursor: pointer;
	transition: border-color .15s, background .15s;
	background: var(--white, #fff);
}

.wc-block-components-radio-control__option:hover {
	border-color: var(--mute);
}

/* Stato selezionato */
.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control__option:has(input:checked) {
	border-color: var(--terra);
	background: rgba(196, 74, 46, .04);
}

.wc-block-components-radio-control__label {
	font-weight: 600;
	font-size: 15px;
	color: var(--ink);
}

.wc-block-components-radio-control__description,
.wc-block-components-radio-control__secondary-label {
	font-size: 13px;
	color: var(--mute);
}

/* Prezzo metodo (mockup .rc-price) */
.wc-block-components-radio-control__secondary-description,
.wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__label-group .wc-block-formatted-money-amount {
	font-weight: 700;
	color: var(--ink);
}

/* Prezzo "Gratis"/spedizione gratuita sul radio -> forest (mockup .rc-price.free) */
.wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__option:has(.wc-block-formatted-money-amount:empty) .wc-block-components-radio-control__secondary-description,
.wc-block-components-radio-control__option .wc-block-components-radio-control__secondary-description:empty,
.wc-block-components-shipping-rates-control .wc-block-formatted-money-amount.is-free {
	color: var(--forest);
	font-weight: 700;
}

/* radio accent terra */
.wc-block-components-radio-control input[type="radio"],
.wc-block-components-checkbox input[type="checkbox"] {
	accent-color: var(--terra);
}

/* checkbox / consensi */
.wc-block-components-checkbox__label {
	font-size: 14px;
	color: var(--ink-soft);
}

/* ---- Riepilogo ordine checkout (order summary) ---- */
.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-order-summary-item__total-price {
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}

.wc-block-components-order-summary-item__name {
	font-weight: 600;
	color: var(--ink);
	font-size: 13.5px;
}

.wc-block-components-order-summary-item__quantity {
	background: var(--ink);
	color: var(--bone);
	border: 2px solid var(--white, #fff);
	font-weight: 700;
}

/* Thumbnail riga riepilogo ordine (mockup .si-thumb) */
.wc-block-components-order-summary-item__image,
.wc-block-components-order-summary-item__image img {
	border-radius: 8px;
	overflow: hidden;
	background: var(--bone-2);
}

/* Variante/metadati riga riepilogo (mockup .si-var) */
.wc-block-components-order-summary-item__description .wc-block-components-product-metadata,
.wc-block-components-order-summary-item__description {
	font-size: 12px;
	color: var(--mute);
}

/* ---- CTA "Paga ora" ---- */
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout-actions-block .wc-block-components-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	background: var(--ink) !important;
	color: #fff !important;
	border: none;
	padding: 18px;
	border-radius: var(--radius-pill, 999px) !important;
	font-weight: 700;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: .05em;
	cursor: pointer;
	transition: background .15s, transform .1s;
}

.wc-block-components-checkout-place-order-button:hover {
	background: #3A3A36 !important;
}

.wc-block-components-checkout-place-order-button:active {
	transform: scale(.99);
}

/* trust SSL sotto la CTA (iniettato via hook PHP, classe .pb-trust-near) */
.pb-trust-near {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	font-size: 12.5px;
	color: var(--forest);
	margin-top: 12px;
	font-weight: 600;
	text-align: center;
}

.pb-trust-near svg {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
}

/* ============================================================
 * 4. HEADER SEMPLIFICATO SUL CHECKOUT (NON sul cart)
 *    WC aggiunge .woocommerce-checkout al <body>. Nascondiamo
 *    promo bar + mega-menu + trust-strip e centriamo il logo.
 * ============================================================ */
.woocommerce-checkout .urgency,
.woocommerce-checkout .site-header nav.nav,
.woocommerce-checkout .site-header .header-tools,
.woocommerce-checkout .site-header .hamburger,
.woocommerce-checkout .trust-strip {
	display: none !important;
}

.woocommerce-checkout .site-header .header-row {
	justify-content: center;
}

.woocommerce-checkout .site-header .logo {
	margin: 0 auto;
}

/* Badge "Checkout sicuro" accanto al logo */
.woocommerce-checkout .site-header .logo::after {
	content: "Checkout sicuro";
	display: inline-block;
	margin-left: 14px;
	font-family: var(--font-body, "Inter", system-ui, sans-serif);
	font-size: 13px;
	font-weight: 600;
	color: var(--forest);
	vertical-align: middle;
	letter-spacing: 0;
}

@media (max-width: 560px) {
	.woocommerce-checkout .site-header .logo::after {
		display: block;
		margin: 4px 0 0;
		font-size: 12px;
	}
}

/* ============================================================
 * 5. RESPONSIVE - mobile colonna singola + CTA sticky
 * ============================================================ */
@media (max-width: 1080px) {
	.wc-block-cart__sidebar,
	.wc-block-components-sidebar {
		flex-basis: 320px;
		width: 320px;
		max-width: 320px;
	}
}

@media (max-width: 880px) {
	.wc-block-cart__sidebar,
	.wc-block-components-sidebar,
	.wc-block-components-sidebar.wc-block-checkout__sidebar {
		position: static;
		order: -1;
		flex: 1 1 100%;
		width: 100%;
		max-width: 100%;
	}
}

@media (max-width: 781px) {
	/* Breakpoint nativo blocchi WC checkout: una colonna */
	.wc-block-components-sidebar.wc-block-checkout__sidebar {
		position: static;
	}
}

@media (max-width: 520px) {
	.wc-block-components-checkout-step,
	.wc-block-components-express-payment {
		padding: 18px;
	}

	/* iOS zoom-fix: input >=16px */
	.wc-block-components-text-input input,
	.wc-block-components-select .wc-blocks-components-select__select {
		font-size: 16px;
	}
}

/* ============================================================
 * CHECKOUT PROGRESSIVO (accordion propedeutico)
 * Attivo solo quando checkout.js aggiunge .pb-co-progressive al body.
 * Step compressi tranne quello aperto; bloccati finche il precedente
 * non e completato. Stato gestito via classi su .wc-block-components-checkout-step.
 * ============================================================ */
.pb-co-progressive .wc-block-components-checkout-step {
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--white, #fff);
	padding: 0;
	margin-bottom: 16px;
	transition: opacity .2s ease;
	overflow: hidden;
}

/* Heading dello step: barra cliccabile con numero. */
.pb-co-progressive .wc-block-components-checkout-step__heading,
.pb-co-progressive .wc-block-components-checkout-step__title {
	padding: 18px 22px;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Contenuto: padding interno + collasso. */
.pb-co-progressive .wc-block-components-checkout-step__content {
	padding: 0 22px 22px;
	max-height: 4000px;
	transition: max-height .35s ease, opacity .25s ease, padding .25s ease;
	overflow: hidden;
}

/* Step compresso: nasconde il contenuto, lascia solo l'intestazione. */
.pb-co-progressive .wc-block-components-checkout-step.pb-step-collapsed .wc-block-components-checkout-step__content {
	max-height: 0;
	opacity: 0;
	padding-top: 0;
	padding-bottom: 0;
}

/* Step bloccato: non interagibile, leggermente attenuato. */
.pb-co-progressive .wc-block-components-checkout-step.pb-step-locked {
	opacity: .55;
}
.pb-co-progressive .wc-block-components-checkout-step.pb-step-locked .wc-block-components-checkout-step__heading,
.pb-co-progressive .wc-block-components-checkout-step.pb-step-locked .wc-block-components-checkout-step__title {
	cursor: not-allowed;
}

/* Pallino/numero dello step (Woo lo mette in ::before del title number). */
.pb-co-progressive .wc-block-components-checkout-step__title-number {
	background: var(--bone-2);
	color: var(--ink-soft);
	border: 1.5px solid var(--line);
}
.pb-co-progressive .wc-block-components-checkout-step.pb-step-open .wc-block-components-checkout-step__title-number {
	background: var(--ink);
	color: #fff;
	border-color: var(--ink);
}

/* Step completato: numero -> spunta verde. */
.pb-co-progressive .wc-block-components-checkout-step.pb-step-done .wc-block-components-checkout-step__title-number {
	background: var(--forest);
	color: transparent;
	border-color: var(--forest);
	position: relative;
}
.pb-co-progressive .wc-block-components-checkout-step.pb-step-done .wc-block-components-checkout-step__title-number::after {
	content: "\2713";
	color: #fff;
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
}

/* Step in errore: bordo terra. */
.pb-co-progressive .wc-block-components-checkout-step.pb-step-error {
	border-color: var(--terra);
	box-shadow: 0 0 0 3px rgba(196, 74, 46, .12);
}

/* Bottone "Continua" iniettato in fondo a ogni step (tranne l'ultimo). */
.pb-step-continue {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 18px;
	background: var(--ink);
	color: #fff;
	border: none;
	padding: 14px 30px;
	border-radius: 999px;
	font-family: inherit;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .05em;
	cursor: pointer;
	transition: background .15s;
}
.pb-step-continue:hover { background: #3A3A36; }

/* ============================================================
 * FIX layout robusto (WC 10.x): forza sidebar larga + coupon
 * orizzontale a prescindere dalle classi runtime di React.
 * ============================================================ */
/* La colonna riepilogo (blocco totals) deve avere larghezza piena dentro la sidebar */
.wc-block-cart__sidebar > .wp-block-woocommerce-cart-totals-block,
.wp-block-woocommerce-cart-totals-block{
	width:100%;
	box-sizing:border-box;
}
/* Sidebar: larghezza garantita anche se le classi runtime cambiano */
.woocommerce-cart .wc-block-cart__sidebar,
.woocommerce-cart .wc-block-components-sidebar{
	flex:0 0 360px !important;
	width:360px !important;
	max-width:360px !important;
	min-width:0 !important;
}
/* I blocchi interni del riepilogo: niente card/larghezza minima, flusso normale */
.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-cart-order-summary-block > *,
.wp-block-woocommerce-cart-order-summary-subtotal-block,
.wp-block-woocommerce-cart-order-summary-shipping-block,
.wp-block-woocommerce-cart-order-summary-totals-block,
.wp-block-woocommerce-cart-order-summary-discount-block,
.wp-block-woocommerce-cart-order-summary-fee-block,
.wp-block-woocommerce-cart-order-summary-taxes-block,
.wp-block-woocommerce-cart-order-summary-coupon-form-block{
	width:100% !important;
	min-width:0 !important;
	background:transparent !important;
	border:none !important;
	box-shadow:none !important;
	border-radius:0 !important;
	padding:0 !important;
	writing-mode:horizontal-tb !important;
}
/* Coupon: input + bottone in riga, non collassati */
.wc-block-components-totals-coupon,
.wc-block-components-totals-coupon__content,
.wc-block-components-totals-coupon__form{
	width:100% !important;
	display:block !important;
}
.wc-block-components-totals-coupon__form{
	display:flex !important;
	gap:8px;
	align-items:center;
	flex-wrap:nowrap;
}
.wc-block-components-totals-coupon__form .wc-block-components-text-input{
	flex:1 1 auto;
	min-width:0;
	margin:0;
}
.wc-block-components-totals-coupon__form .wc-block-components-text-input input{
	width:100%;
}
.wc-block-components-totals-coupon__button{
	flex:0 0 auto !important;
	width:auto !important;
	white-space:nowrap;
	padding:12px 18px !important;
	border-radius:999px !important;
}
.wc-block-components-totals-coupon-link{
	display:inline-block;
	white-space:nowrap;
}
/* CTA checkout: non deve diventare cerchio (forza larghezza piena) */
.wp-block-woocommerce-proceed-to-checkout-block,
.wc-block-cart__submit,
.wc-block-cart__submit-container{
	width:100% !important;
	display:block !important;
}
.wc-block-cart__submit-button{
	width:100% !important;
	border-radius:999px !important;
	aspect-ratio:auto !important;
}
@media(max-width:900px){
	.woocommerce-cart .wc-block-cart__sidebar,
	.woocommerce-cart .wc-block-components-sidebar{
		flex:1 1 100% !important;
		width:100% !important;
		max-width:100% !important;
		position:static !important;
	}
}

/* ============================================================
 * FIX layout robusto CHECKOUT (WC 10.x) - speculare al cart.
 * ============================================================ */
.woocommerce-checkout .wc-block-checkout__sidebar,
.woocommerce-checkout .wc-block-components-sidebar{
	flex:0 0 380px !important;
	width:380px !important;
	max-width:380px !important;
	min-width:0 !important;
}
.woocommerce-checkout .wc-block-checkout__main,
.woocommerce-checkout .wc-block-components-main{
	flex:1 1 480px !important;
	min-width:0 !important;
}
/* Riepilogo ordine checkout: card solo sul contenitore, interni neutri */
.wp-block-woocommerce-checkout-totals-block{
	width:100%;box-sizing:border-box;
}
.wp-block-woocommerce-checkout-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block > *,
.wp-block-woocommerce-checkout-order-summary-cart-items-block,
.wp-block-woocommerce-checkout-order-summary-subtotal-block,
.wp-block-woocommerce-checkout-order-summary-shipping-block,
.wp-block-woocommerce-checkout-order-summary-totals-block,
.wp-block-woocommerce-checkout-order-summary-discount-block,
.wp-block-woocommerce-checkout-order-summary-fee-block,
.wp-block-woocommerce-checkout-order-summary-taxes-block,
.wp-block-woocommerce-checkout-order-summary-coupon-form-block{
	width:100% !important;
	min-width:0 !important;
	background:transparent !important;
	border:none !important;
	box-shadow:none !important;
	border-radius:0 !important;
	padding:0 !important;
	writing-mode:horizontal-tb !important;
}
/* Campi form checkout: griglia pulita, larghezza piena */
.wc-block-checkout__main .wc-block-components-text-input,
.wc-block-checkout__main .wc-block-components-select,
.wc-block-checkout__main .wc-block-components-country-input,
.wc-block-checkout__main .wc-block-components-state-input{
	width:100% !important;
	min-width:0 !important;
}
.wc-block-components-address-form,
.wc-block-components-form{
	width:100% !important;
}
/* Pulsante "Effettua ordine", larghezza piena */
.wc-block-checkout__actions_row,
.wp-block-woocommerce-checkout-actions-block{
	width:100% !important;
	display:block !important;
}
.wc-block-components-checkout-place-order-button,
.wc-block-checkout__actions button{
	width:100% !important;
	border-radius:999px !important;
	aspect-ratio:auto !important;
	background:var(--ink) !important;
	color:#fff !important;
	padding:17px !important;
	font-weight:700 !important;
}
.wc-block-components-checkout-place-order-button:hover{background:#3A3A36 !important}
@media(max-width:900px){
	.woocommerce-checkout .wc-block-checkout__sidebar,
	.woocommerce-checkout .wc-block-components-sidebar{
		flex:1 1 100% !important;width:100% !important;max-width:100% !important;position:static !important;
	}
}