/*
 * Catania Calzature — cart, checkout (Shopify-like layout over WooCommerce's classic forms) and thank-you page.
 */

/* ---------- Cart ---------- */
.cc-cart { display: grid; gap: 24px; margin-top: 16px; }
.cc-cart__title { margin: 4px 0 16px; font-size: var(--wp--preset--font-size--xxl); }
.woocommerce-cart-form .shop_table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--c-line); }
.woocommerce-cart-form .shop_table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.woocommerce-cart-form .cart_item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-areas: "img name remove" "img qty subtotal"; column-gap: 14px; row-gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--c-line); }
.woocommerce-cart-form .cart_item td { display: block; padding: 0; border: 0; }
.woocommerce-cart-form .cart_item td::before { content: none !important; }
.woocommerce-cart-form .product-thumbnail { grid-area: img; }
.woocommerce-cart-form .product-thumbnail img { width: 96px; height: 96px; object-fit: contain; border: 1px solid var(--c-line); border-radius: 0; background: #fff; }
.woocommerce-cart-form .product-name { grid-area: name; display: grid !important; align-content: start; gap: 4px; color: var(--c-ink); font: 600 15px/1.3 var(--f-body); }
.woocommerce-cart-form .product-name a { color: inherit; text-decoration: none; }
.woocommerce-cart-form .product-name .variation, .woocommerce-cart-form .product-name dl { display: grid; grid-template-columns: auto 1fr; gap: 0 6px; margin: 0; color: var(--c-muted); font-size: 13px; font-weight: 400; }
.woocommerce-cart-form .product-name dl dd { margin: 0; }
.woocommerce-cart-form .product-name dl p { margin: 0; }
.woocommerce-cart-form .backorder_notification { display: none; } /* Same information as the theme's availability label. */
.woocommerce-cart-form .product-remove { grid-area: remove; justify-self: end; }
.woocommerce-cart-form .product-remove a.remove { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 0; color: var(--c-muted) !important; text-decoration: none; }
.woocommerce-cart-form .product-remove a.remove:hover { background: var(--c-soft); color: var(--c-danger) !important; }
.woocommerce-cart-form .product-remove .i { width: 18px; height: 18px; }
.woocommerce-cart-form .product-price { display: none !important; }
.woocommerce-cart-form .product-quantity { grid-area: qty; align-self: center; }
.woocommerce-cart-form .product-quantity .cc-qty { height: 40px; }
.woocommerce-cart-form .product-quantity .cc-qty__btn { width: 34px; }
.woocommerce-cart-form .product-quantity .qty { width: 34px; font-size: 14px; }
.woocommerce-cart-form .product-subtotal { grid-area: subtotal; align-self: center; color: var(--c-ink); font: 600 16px var(--f-head); text-align: right; }
.woocommerce-cart-form .product-subtotal del { color: var(--c-muted); font: 400 13px var(--f-body); }
.woocommerce-cart-form td.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px 0; border: 0; }
/* Coupon code: same field as at checkout (label inside, "Applica" beside it, error under it). */
.woocommerce-cart-form .coupon { display: grid; flex: 1 1 280px; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0 10px; }
.woocommerce-cart-form .coupon .form-row { margin: 0; }
.woocommerce-cart-form .coupon .button { min-height: 52px; padding: 0 18px; border: 1px solid var(--c-line-strong); background: #fff; color: var(--c-ink); }
.woocommerce-cart-form .coupon .button:hover { border-color: var(--c-ink); background: #fff; color: var(--c-ink); }
.woocommerce-cart-form .coupon > :not(.form-row):not(.button) { grid-column: 1 / -1; }
.woocommerce-cart-form [name="update_cart"] { min-height: 44px; border: 1px solid var(--c-line-strong); background: #fff; color: var(--c-ink); }
/* With JavaScript the quantities update by themselves (checkout.js clicks the button): hidden from the first paint
   (html.cc-js is set in <head>), so the summary does not move up when WooCommerce's cart script disables it. */
.cc-js .woocommerce-cart-form [name="update_cart"], .woocommerce-cart-form [name="update_cart"]:disabled { display: none; }

.cart_totals { display: grid; align-content: start; gap: 14px; padding: 20px; border-radius: var(--r-lg); background: var(--c-soft); }
.cc-cart__summary-title { margin: 0; font-size: var(--wp--preset--font-size--xl); }
.cart_totals .shop_table { width: 100%; border-collapse: collapse; }
.cart_totals .shop_table th, .cart_totals .shop_table td { padding: 6px 0; border: 0; font-size: 15px; text-align: left; vertical-align: top; }
.cart_totals .shop_table td { color: var(--c-ink); font-weight: 600; text-align: right; }
.cart_totals .shop_table td::before { content: none !important; }
.cart_totals .shop_table th { font-weight: 400; }
.cart_totals .order-total th, .cart_totals .order-total td { padding-top: 12px; border-top: 1px solid var(--c-line-strong); color: var(--c-ink); font: 600 19px var(--f-head); }
.cc-cart__vat { display: block; color: var(--c-muted); font: 400 12px var(--f-body); }
.cart_totals .cart-discount td { color: var(--c-success); }
.woocommerce-shipping-methods { margin: 0; padding: 0; list-style: none; text-align: left; }
.cart_totals tr.woocommerce-shipping-totals th { padding-right: 12px; }
.wc-proceed-to-checkout { display: grid; gap: 10px; padding: 0; }
.wc-proceed-to-checkout .checkout-button { width: 100%; min-height: 54px; font-size: 16px; }
.cc-cart__or { display: flex; align-items: center; gap: 12px; margin: 4px 0 0; color: var(--c-muted); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.cc-cart__or::before, .cc-cart__or::after { content: ""; flex: 1; height: 1px; background: var(--c-line-strong); }
.wc-proceed-to-checkout .ppcp-messages { margin-top: 4px; }
.cross-sells { margin-top: 44px; }
.cross-sells > h2 { margin: 0 0 14px; font-size: var(--wp--preset--font-size--xl); }
.cross-sells ul.products { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 1024px) {
	.cc-cart { grid-template-columns: minmax(0, 1fr) 400px; align-items: start; gap: 40px; }
	.cc-cart__title { margin-top: 12px; font-size: var(--wp--preset--font-size--xxxl); }
	.cc-cart__aside { position: sticky; top: calc(var(--header-h) + 16px); }
	.woocommerce-cart-form .cart_item { grid-template-columns: 120px minmax(0, 1fr) auto minmax(96px, auto) 36px; grid-template-areas: "img name qty subtotal remove"; align-items: center; column-gap: 20px; }
	.woocommerce-cart-form .product-thumbnail img { width: 120px; height: 120px; }
	.woocommerce-cart-form .product-name { align-self: center; }
	.woocommerce-cart-form .product-remove { align-self: center; }
	.cross-sells ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
}

/* ---------- Checkout (one page, as the approved design) ----------
   Phones: summary band at the top (collapsible), then the form. Desktop: form on the left (max 540 px, aligned to the
   page edge), summary on the right on a grey band that reaches the screen edge, sticky while scrolling. */
.cc-checkout-page.cc-main { padding-top: 0; padding-bottom: 0; }
.cc-checkout-page .wp-block-post-content > .woocommerce { margin: 0; }
.cc-co { display: flex; flex-direction: column; }
.cc-co__notices { padding: 16px var(--gutter) 0; }
.cc-co__notices:not(:has(.wc-block-components-notice-banner, .woocommerce-error, .woocommerce-message, .woocommerce-info, .woocommerce-form-login, .checkout_coupon)) { display: none; }
/* Messages above the form: the same space from the header as the form has, a normal gap before "Contatto". */
.cc-co__notices :is(.wc-block-components-notice-banner, .woocommerce-error, .woocommerce-message, .woocommerce-info) { margin: 0 0 10px; }
.cc-co__notices:has(.wc-block-components-notice-banner, .woocommerce-error, .woocommerce-message, .woocommerce-info) + .cc-co__form { padding-top: 8px; }
.cc-co__form { width: 100%; max-width: 600px; margin: 0 auto; padding: 20px var(--gutter) 48px; }
.cc-co__summary { order: -1; border-bottom: 1px solid var(--c-line); background: var(--c-soft); }
.cc-co__sumtoggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 0 var(--gutter); border: 0; background: none; color: var(--c-primary); font: 600 15px var(--f-body); cursor: pointer; }
.cc-co__sumtoggle > span { display: inline-flex; align-items: center; gap: 8px; }
.cc-co__sumtoggle .i { width: 20px; height: 20px; }
.cc-co__sumtoggle[aria-expanded="true"] > span > .i:last-child { transform: rotate(180deg); }
.cc-co__sumtoggle strong { color: var(--c-ink); font: 600 17px var(--f-head); }
.cc-co__summary-body { max-width: 600px; margin: 0 auto; padding: 4px var(--gutter) 20px; }
/* Phones and tablets: printed as checkout.js leaves it (html.cc-js is set in <head>), so the form does not jump when it
   starts: the button shown, the summary closed until the button opens it. Computers override both below. */
@media (max-width: 1023px) {
	.cc-js .cc-co__sumtoggle[hidden] { display: flex !important; }
	.cc-js .cc-co__summary:has(.cc-co__sumtoggle[aria-expanded="false"]) .cc-co__summary-body { display: none; }
}

/* Express payments. */
.cc-co-express__title { margin: 0 0 10px; color: var(--c-muted); font-size: 14px; text-align: center; }
.cc-co-express__buttons > * { margin: 0 0 8px; }
.cc-co-express #wc-stripe-express-checkout-button-separator { display: none !important; }
.cc-co-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 4px; color: var(--c-muted); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.cc-co-or::before, .cc-co-or::after { content: ""; flex: 1; height: 1px; background: var(--c-line-strong); }

/* Sections. */
.cc-co-step { margin-top: 28px; }
.cc-co__details > .cc-co-step:first-child { margin-top: 8px; }
.cc-co-step__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cc-co-step__title { margin: 0 0 14px; color: var(--c-ink); font-size: var(--wp--preset--font-size--xl); font-weight: 600; }
.cc-co-step__aside { color: var(--c-muted); font-size: 14px; }
a.cc-co-step__aside { color: var(--c-primary); font-weight: 600; }
.cc-co-step__hint, .cc-co-hint { display: flex; align-items: center; gap: 6px; color: var(--c-muted); font-size: 13px; }
.cc-co-step__hint { margin: -6px 0 12px; }
.cc-co-hint { align-items: flex-start; margin: 10px 0 14px; }
.cc-co-step__hint .i, .cc-co-hint .i { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.cc-co [hidden] { display: none !important; }

/* Fields: full-width address lines and phone, country first. */
.cc-co .cc-co-fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 12px; }
.cc-co .cc-co-fields > .form-row { grid-column: span 6; width: auto; margin: 0 0 12px; }
/* WooCommerce's half-width rows (first and last name) are placed by the grid, not by their own width. */
.woocommerce .cc-co .cc-co-fields > :is(.form-row-first, .form-row-last) { display: block; width: auto; margin-right: 0; }
.cc-co .cc-co-fields > :is(#billing_first_name_field, #billing_last_name_field, #shipping_first_name_field, #shipping_last_name_field) { grid-column: span 3; }
.cc-co .cc-co-fields > :is(#billing_postcode_field, #billing_city_field, #billing_state_field, #shipping_postcode_field, #shipping_city_field, #shipping_state_field) { grid-column: span 2; }
.cc-co .cc-co-fields > :is(#billing_address_1_field, #billing_address_2_field, #shipping_address_1_field, #shipping_address_2_field, #billing_phone_field, #shipping_phone_field, #billing_email_field) { grid-column: span 6; }
.cc-co .cc-co-fields .required { display: none; }
.cc-co .cc-co-fields .optional { display: inline; color: var(--c-muted); font-weight: 400; }
@media (max-width: 575px) {
	.cc-co .cc-co-fields { grid-auto-flow: row dense; }
	.cc-co .cc-co-fields > :is(#billing_postcode_field, #shipping_postcode_field, #billing_state_field, #shipping_state_field) { grid-column: span 3; }
	.cc-co .cc-co-fields > :is(#billing_city_field, #shipping_city_field) { grid-column: span 6; }
}

/* Option groups (delivery mode, shipping methods, stores, payment methods): one box with dividers.
   The chosen option gets a 2 px ring drawn as an outline over the box border and the dividers, with the same rounded
   corners as the box (the first and last option round their outer corners), so nothing is cut or doubled. Keyboard
   focus is a soft halo around the option; the radio itself shows no second ring. */
.cc-co-mode, .cc-rates, #payment .wc_payment_methods { --cc-in: calc(var(--r-sm) - 1px); }
.cc-co-mode__option, .cc-rate, #payment .wc_payment_method { position: relative; }
:is(.cc-co-mode__option, .cc-rate, #payment .wc_payment_method) > input[type="radio"]:focus-visible { outline: 0; }
:is(.cc-co-mode__option, .cc-rate, #payment .wc_payment_method):has(> input:checked) { z-index: 1; outline: 2px solid var(--c-primary); outline-offset: -1px; }
:is(.cc-co-mode__option, .cc-rate, #payment .wc_payment_method):has(> input:focus-visible) { z-index: 2; box-shadow: 0 0 0 4px rgb(31 30 28 / 45%); }

/* Delivery mode: two options side by side. */
.cc-co-mode { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 14px; padding: 0; border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); background: #fff; }
.cc-co-mode__option { display: flex; align-items: center; gap: 10px; min-height: 52px; margin: 0; padding: 0 14px; border-radius: 0; background: none; color: var(--c-ink); font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: none; }
.cc-co-mode__option:first-child { border-radius: var(--cc-in) 0 0 var(--cc-in); }
.cc-co-mode__option:last-child { border-radius: 0 var(--cc-in) var(--cc-in) 0; }
.cc-co-mode__option + .cc-co-mode__option { border-left: 1px solid var(--c-line-strong); }
.cc-co-mode__option input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--c-primary); }
.cc-co-mode__option .i { width: 22px; height: 22px; color: var(--c-primary); }
.cc-co-mode__option:has(input:checked) { background: var(--c-primary-50); }
.cc-co-mode__note { display: flex; align-items: flex-start; gap: 8px; margin: -4px 0 14px; padding: 10px 12px; background: var(--c-warning-50); color: var(--c-warning); font-size: 14px; line-height: 1.4; }
.cc-co-mode__note[hidden] { display: none; }
.cc-co-mode__note .i { flex: none; width: 18px; height: 18px; margin-top: 1px; }
@media (max-width: 419px) { .cc-co-mode__option .i { display: none; } }
.cc-co .cc-co-fields .description { margin: 6px 0 0; color: var(--c-muted); font-size: 13px; }
.cc-co-same { margin: 0 0 14px; }
.cc-co-same label { font-size: 15px; }
.cc-co-panel__label { margin: 0 0 8px; color: var(--c-ink); font-size: 14px; font-weight: 600; }
.cc-co-panel [data-cc-pickup-person] { margin-top: 4px; }

/* Shipping choices: courier rates and stores, as a list of options. */
.cc-rates { margin: 0; padding: 0; border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); background: #fff; list-style: none; }
.cc-rate { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0 14px; }
.cc-rate:first-child { border-top-left-radius: var(--cc-in); border-top-right-radius: var(--cc-in); }
.cc-rate:last-child { border-bottom-left-radius: var(--cc-in); border-bottom-right-radius: var(--cc-in); }
.cc-rate + .cc-rate { border-top: 1px solid var(--c-line-strong); }
.cc-rate > input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--c-primary); }
.cc-rate > label { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; margin: 0; padding: 12px 0; cursor: pointer; }
.cc-rate:has(> input:checked) { background: var(--c-primary-50); }
.cc-rates__package { margin: 12px 0 6px; color: var(--c-muted); font-size: 13px; }
.cc-ship { display: grid; gap: 2px; }
.cc-ship__name { color: var(--c-ink); font-size: 15px; font-weight: 600; }
.cc-ship__note { color: var(--c-muted); font-size: 13px; font-weight: 400; line-height: 1.35; }
.cc-ship__cost { color: var(--c-ink); font-weight: 600; white-space: nowrap; }
.cc-ship__cost.is-free { color: var(--c-ink); }
.cc-co-note { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; padding: 12px 14px; border-radius: var(--r-sm); background: var(--c-warning-50); color: var(--c-warning); font-size: 14px; line-height: 1.45; }
.cc-co-note .i { flex: none; width: 18px; height: 18px; margin-top: 1px; }

/* Delivery notes. */
.cc-co-extras .woocommerce-additional-fields { display: grid; gap: 10px; }
.cc-co-opt { padding: 0 14px; border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); background: #fff; }
.cc-co-opt > summary { display: flex; align-items: center; gap: 10px; min-height: 52px; color: var(--c-ink); font-weight: 600; list-style: none; cursor: pointer; }
.cc-co-opt > summary::-webkit-details-marker { display: none; }
.cc-co-opt > summary .i { width: 20px; height: 20px; }
.cc-co-opt > summary .i:first-child { color: var(--c-ink); }
.cc-co-opt > summary .i:last-child { margin-left: auto; color: var(--c-muted); transition: transform .2s; }
.cc-co-opt[open] > summary .i:last-child { transform: rotate(180deg); }
.cc-co-opt__body { padding: 2px 0 14px; }
.cc-co-opt__body > .form-row:last-child { margin-bottom: 0; }

/* Payment methods. */
.cc-co-pay { margin-top: 28px; }
#payment { border-radius: 0; background: transparent; }
#payment .wc_payment_methods { margin: 0 0 16px; padding: 0; border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); background: #fff; list-style: none; }
#payment .wc_payment_method { margin: 0; overflow: hidden; }
#payment .wc_payment_method:first-child { border-top-left-radius: var(--cc-in); border-top-right-radius: var(--cc-in); }
#payment .wc_payment_method:last-child { border-bottom-left-radius: var(--cc-in); border-bottom-right-radius: var(--cc-in); }
#payment .wc_payment_method + .wc_payment_method { border-top: 1px solid var(--c-line-strong); }
#payment .wc_payment_method > input[type="radio"] { position: absolute; top: 18px; left: 14px; z-index: 1; width: 18px; height: 18px; margin: 0; }
#payment .wc_payment_method > label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 54px; margin: 0; padding: 12px 14px 12px 44px; color: var(--c-ink); font-size: 15px; font-weight: 600; cursor: pointer; }
/* Cash on delivery fee next to the name (payment.php). */
#payment .cc-paymethod__fee { margin-left: auto; color: var(--c-text); font-weight: 500; white-space: nowrap; }
#payment .cc-paymethod__fee:empty { display: none; }
#payment .wc_payment_method > label img { max-height: 24px; width: auto; margin-left: auto; }
#payment .wc_payment_method:has(> input:checked) > label { background: var(--c-primary-50); }
#payment .payment_box { margin: 0; padding: 14px; border-top: 1px solid var(--c-line-strong); background: var(--c-soft); color: var(--c-text); font-size: 14px; }
#payment .payment_box p { margin: 0 0 8px; }
#payment .payment_box p:last-child { margin-bottom: 0; }
#payment .payment_box::before { content: none; }
#payment .form-row.place-order { margin: 0; padding: 0; }
#payment .woocommerce-terms-and-conditions-wrapper { margin: 0 0 16px; font-size: 14px; }
#payment .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox { position: relative; display: block !important; padding-left: 30px; font-size: 14px; font-weight: 400; }
#payment .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox input { position: absolute; top: 0; left: 0; }
#payment .woocommerce-terms-and-conditions-wrapper .required { color: var(--c-danger); text-decoration: none; border: 0; }
/* The terms opened from "termini e condizioni" (WooCommerce shows the page's text in place): a framed box that scrolls
   on its own, with the page's headings brought down to the size of the form. */
#payment .woocommerce-terms-and-conditions { max-height: 320px !important; margin: 0 0 14px; padding: 16px 18px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--c-line-strong); background: #fff; color: var(--c-text); font-size: 13px; line-height: 1.6; }
#payment .woocommerce-terms-and-conditions > :first-child { margin-top: 0; }
#payment .woocommerce-terms-and-conditions :is(h1, h2) { margin: 18px 0 6px; color: var(--c-ink); font: 500 15px/1.35 var(--f-body); letter-spacing: 0; text-transform: none; }
#payment .woocommerce-terms-and-conditions :is(h3, h4) { margin: 12px 0 4px; color: var(--c-ink); font: 500 13px/1.4 var(--f-body); }
#payment .woocommerce-terms-and-conditions :is(p, ul, ol) { margin: 0 0 8px; }
#payment .woocommerce-terms-and-conditions .cc-summary { margin: 0 0 12px; padding: 12px 14px; }
.cc-co-paytotal { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 12px; color: var(--c-ink); font: 600 18px var(--f-head); }
#place_order { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; font-size: 17px; }
#place_order::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5'/%3E%3C/svg%3E") center / contain no-repeat; }
#payment .woocommerce-privacy-policy-text { margin-top: 12px; }
#payment .woocommerce-privacy-policy-text p { margin: 0; color: var(--c-muted); font-size: 12px; line-height: 1.5; }

/* Order summary: products, coupon, totals. */
.woocommerce-checkout-review-order-table { width: 100%; margin: 0 0 18px; border-collapse: collapse; }
.woocommerce-checkout-review-order-table .cart_item td { padding: 7px 0; border: 0; vertical-align: middle; }
.woocommerce-checkout-review-order-table .product-name { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; column-gap: 14px; width: 100%; color: var(--c-ink); font-size: 14px; font-weight: 600; line-height: 1.3; }
.cc-co-item__info { display: grid; gap: 2px; min-width: 0; }
.woocommerce-checkout-review-order-table .product-quantity { display: none; }
.woocommerce-checkout-review-order-table .product-name dl { display: grid; grid-template-columns: auto 1fr; gap: 0 4px; margin: 2px 0 0; color: var(--c-muted); font-size: 13px; font-weight: 400; }
.woocommerce-checkout-review-order-table .product-name dl dd, .woocommerce-checkout-review-order-table .product-name dl p { margin: 0; }
.cc-co-item__thumb { position: relative; width: 64px; height: 64px; border: 1px solid var(--c-line); border-radius: 0; background: #fff; }
.cc-co-item__thumb img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.cc-co-item__qty { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: rgb(31 30 28 / 85%); color: #fff; font-size: 12px; font-weight: 700; }
.cc-co-item__status { color: var(--c-warning); font-size: 13px; font-weight: 400; }
.woocommerce-checkout-review-order-table .product-total { padding-left: 12px; color: var(--c-ink); font-size: 14px; font-weight: 600; text-align: right; white-space: nowrap; }
.woocommerce-checkout-review-order-table .product-total del { color: var(--c-muted); font-weight: 400; }
.cc-co-coupon { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px; margin: 0 0 18px; }
.cc-co-coupon .form-row { width: auto !important; margin: 0; }
.cc-co-coupon .button { min-height: 52px; padding: 0 18px; border: 1px solid var(--c-line-strong); background: #fff; color: var(--c-ink); }
.cc-co-coupon .button:hover { border-color: var(--c-ink); background: #fff; color: var(--c-ink); }
.cc-co__summary-body > .wc-block-components-notice-banner, #order_review > .wc-block-components-notice-banner, #order_review > .woocommerce-message { margin: 0 0 12px; }
.cc-co-totals__table { width: 100%; border-collapse: collapse; }
.cc-co-totals__table th, .cc-co-totals__table td { padding: 4px 0; border: 0; color: var(--c-text); font-size: 15px; font-weight: 400; text-align: left; vertical-align: top; }
.cc-co-totals__table td { color: var(--c-ink); font-weight: 600; text-align: right; }
.cc-co-totals__table .cart-discount td { color: var(--c-success); }
.cc-co-totals__table .woocommerce-remove-coupon { margin-left: 4px; color: var(--c-muted); font-size: 12px; font-weight: 400; }
.cc-co-totals__table .order-total th, .cc-co-totals__table .order-total td { padding-top: 14px; border-top: 1px solid var(--c-line-strong); color: var(--c-ink); font: 600 19px var(--f-head); vertical-align: baseline; }
.cc-co-totals__table .order-total th small { display: block; color: var(--c-muted); font: 400 12px var(--f-body); }
.cc-co-totals__table tr.order-total:first-child th, .cc-co-totals__table tr + tr.order-total th { margin-top: 6px; }
.cc-co-totals__currency { margin-right: 6px; color: var(--c-muted); font: 400 12px var(--f-body); }
.cc-co-totals__table .cc-muted { font-weight: 400; }

@media (min-width: 1024px) {
	.cc-co { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; min-height: calc(100vh - var(--header-h, 64px)); }
	/* Messages above the form, on the same column as the fields. */
	.cc-co__notices { grid-column: 1; grid-row: 1; width: 100%; padding: 36px 56px 0 max(var(--gutter), calc((100vw - 1120px) / 2)); }
	.cc-co__notices > * { max-width: 540px; margin-left: auto; }
	.cc-co__notices:has(.wc-block-components-notice-banner, .woocommerce-error, .woocommerce-message, .woocommerce-info) + .cc-co__form { padding-top: 14px; }
	.cc-co__form { grid-column: 1; grid-row: 2; max-width: none; margin: 0; padding: 36px 56px 64px max(var(--gutter), calc((100vw - 1120px) / 2)); }
	.cc-co__form > * { max-width: 540px; margin-left: auto; }
	.cc-co__summary { order: 0; grid-column: 2; grid-row: 1 / span 2; padding: 36px max(var(--gutter), calc((100vw - 1120px) / 2)) 64px 48px; border-bottom: 0; border-left: 1px solid var(--c-line); }
	.cc-co__summary-body { position: sticky; top: 24px; max-width: 440px; margin: 0; padding: 0; }
	.cc-co__sumtoggle { display: none !important; }
	.cc-co__summary-body[hidden] { display: block !important; }
	.cc-co-paytotal { display: none; }
}

/* ---------- Thank you ---------- */
.cc-ty { max-width: 760px; margin: 24px auto 0; }
.cc-ty__head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.cc-ty__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--c-success-50); color: var(--c-success); }
.cc-ty__number { margin: 0; color: var(--c-muted); font-size: 14px; }
.cc-ty__title { margin: 0; font-size: var(--wp--preset--font-size--xxl); }
.cc-ty__title--alone { margin-bottom: 16px; } /* Failed payment, order not found: the title above the message. */
.cc-ty .woocommerce-thankyou-order-received { margin: 6px 0 16px; padding: 0; border: 0; background: none; color: var(--c-text); }
.cc-ty__steps { display: grid; gap: 12px; margin: 0 0 18px; padding: 16px; border: 1px solid var(--c-line); border-radius: var(--r-md); list-style: none; }
.cc-ty__steps li { display: flex; align-items: flex-start; gap: 10px; color: var(--c-muted); font-size: 14px; }
.cc-ty__steps li > span:last-child { display: grid; }
.cc-ty__steps li strong { color: var(--c-ink); }
.cc-ty__dot { display: grid; flex: none; place-items: center; width: 24px; height: 24px; border: 2px solid var(--c-line-strong); border-radius: 50%; background: #fff; }
.cc-ty__steps .is-done .cc-ty__dot { border-color: var(--c-success); background: var(--c-success); color: #fff; }
.cc-ty__dot .i { width: 14px; height: 14px; }
.cc-ty__boxes { display: grid; gap: 12px; }
.cc-ty__box { padding: 16px; border-radius: var(--r-md); background: var(--c-soft); font-size: 14px; }
.cc-ty__box h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 16px; }
.cc-ty__box h2 .i { color: var(--c-primary); }
.cc-ty__box p { margin: 0 0 6px; }
.cc-ty__overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0; padding: 0; list-style: none; }
.cc-ty__overview li { display: grid; gap: 2px; padding: 12px; border: 1px solid var(--c-line); border-radius: var(--r-md); color: var(--c-muted); font-size: 13px; }
.cc-ty__overview strong { color: var(--c-ink); font-size: 15px; }
.cc-ty__account { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 24px 0 0; padding: 16px; border-radius: var(--r-md); background: var(--c-primary-50); font-size: 14px; }
.cc-ty__account span { flex: 1; min-width: 200px; }
.cc-ty__account .i { color: var(--c-primary); }
.cc-ty__continue { margin: 24px 0 0; text-align: center; }
@media (min-width: 640px) {
	.cc-ty__boxes { grid-template-columns: 1fr 1fr; }
	.cc-ty__steps { grid-template-columns: repeat(3, 1fr); }
	.cc-ty__overview { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* Thank-you page opened later or in another browser: WooCommerce first asks for the order e-mail (or a login). */
.cc-thankyou-page .woocommerce:has(> .woocommerce-verify-email) { max-width: 480px; margin: 0 auto; padding: clamp(24px, 5vw, 48px) 0 64px; }
.cc-thankyou-page .woocommerce:has(> .woocommerce-verify-email) > .woocommerce-thankyou-order-received { margin: 0 0 14px; padding: 0; border: 0; background: none; color: var(--c-ink); font: 600 var(--wp--preset--font-size--xl)/1.25 var(--f-head); }
.cc-thankyou-page .woocommerce-verify-email { display: grid; gap: 14px; padding: 22px; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: #fff; }
.cc-thankyou-page .woocommerce-verify-email > p { margin: 0; }
.cc-thankyou-page .woocommerce-verify-email .woocommerce-error, .cc-thankyou-page .woocommerce-verify-email .wc-block-components-notice-banner { margin: 0; }
.cc-thankyou-page .woocommerce-verify-email .button { width: 100%; min-height: 48px; }

/* "Added to cart" notices shown on the cart page itself: no "Vai al carrello" link. */
.woocommerce-cart .wc-block-components-notice-banner .wc-forward { display: none; }