/**
 * Cart and Checkout pages — the block-based Cart (woocommerce/cart) and
 * Checkout (woocommerce/checkout). Only enqueued on is_cart() / is_checkout()
 * — see inc/enqueue/styles.php. Wording: inc/woocommerce/cart-checkout.php.
 *
 * Cart-only rules are scoped under .wc-block-cart, checkout-only rules under
 * .wc-block-checkout, and the order summary / totals / coupon rules both
 * pages share under :is(.wc-block-cart, .wc-block-checkout) — so nothing
 * leaks into the mini-cart, which uses the same component classes.
 */

/* ======================================================================
   Page heading
   ====================================================================== */

:is(.woocommerce-cart, .woocommerce-checkout) .entry-header {
	margin-block-end: clamp(28px, 2.6vw, 44px);
}

:is(.woocommerce-cart, .woocommerce-checkout) .entry-title {
	font-size: clamp(32px, 2.4vw, 44px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--color-heading);
}

/* ======================================================================
   Layout — items on the left, summary as a card on the right.
   ====================================================================== */

/* No gap on the layout: WooCommerce sizes the columns in percentages
   (65% main incl. its own right padding / 35% sidebar), so a gap would wrap
   the sidebar under the items. */
.wc-block-cart .wc-block-cart__sidebar {
	box-sizing: border-box;
	align-self: flex-start;
	padding: clamp(24px, 2vw, 32px);
	border: 1px solid var(--color-border);
	border-radius: 10px;
	background-color: var(--color-surface);
}

/* ======================================================================
   Items table
   ====================================================================== */

.wc-block-cart table.wc-block-cart-items {
	margin: 0;
}

.wc-block-cart table.wc-block-cart-items th,
.wc-block-cart .wc-block-cart__totals-title {
	padding-block: 0 14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__header {
	border-bottom: 1px solid var(--color-border);
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
	border-bottom: 1px solid var(--color-border);
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row td {
	padding-block: clamp(20px, 1.8vw, 28px);
}

/* Thumbnail on the same white tile as the product cards. */
.wc-block-cart table.wc-block-cart-items .wc-block-cart-item__image img {
	aspect-ratio: 1;
	padding: 6px;
	border-radius: 8px;
	background-color: #fff;
	object-fit: contain;
}

.wc-block-cart .wc-block-components-product-name {
	display: inline-block;
	margin-block-end: 6px;
	font-size: clamp(16px, 1.05vw, 18px);
	font-weight: 500;
	line-height: 1.35;
	color: var(--color-heading);
	text-decoration: none;
	transition: color 160ms ease;
}

.wc-block-cart .wc-block-components-product-name:hover,
.wc-block-cart .wc-block-components-product-name:focus {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wc-block-cart .wc-block-cart-item__prices {
	font-size: 15px;
	color: var(--color-text-muted);
}

/* The product's full description under every line repeated the product
   page and pushed the quantity control down; variation data (size, colour)
   is a separate element and stays. */
.wc-block-cart .wc-block-components-product-metadata__description {
	display: none;
}

.wc-block-cart .wc-block-cart-item__total {
	font-size: clamp(16px, 1.05vw, 18px);
	font-weight: 600;
	color: var(--color-heading);
}

/* Quantity stepper — same border/radius family as the product page's
   quantity box (pages/single-product.css). */
.wc-block-cart .wc-block-cart-item__quantity {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-block-start: 14px;
}

.wc-block-cart .wc-block-components-quantity-selector {
	width: 116px;
	height: 44px;
	margin: 0;
	border: 1px solid var(--color-border);
	border-radius: 6px;
	background-color: var(--color-background);
}

.wc-block-cart .wc-block-components-quantity-selector::after {
	border: 0;
}

.wc-block-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	font-size: 15px;
	font-weight: 600;
	color: var(--color-text);
}

.wc-block-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	min-width: 36px;
	color: var(--color-text-muted);
	opacity: 1;
	transition: color 160ms ease;
}

.wc-block-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover:not(:disabled) {
	color: var(--color-primary);
}

.wc-block-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled {
	opacity: 0.35;
}

/* Bin icon — muted until hover, red on hover. */
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: var(--color-text-muted);
	transition: color 160ms ease, background-color 160ms ease;
}

.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover {
	background-color: var(--color-surface-alt);
	color: var(--color-error);
}

/* ======================================================================
   Summary card
   ====================================================================== */

.wc-block-cart .wc-block-cart__totals-title {
	margin: 0;
	text-align: start;
	border-bottom: 1px solid var(--color-border);
}

:is(.wc-block-cart, .wc-block-checkout) .wc-block-components-totals-wrapper {
	padding-block: 16px;
	border-top: 0;
	border-bottom: 1px solid var(--color-border);
}

:is(.wc-block-cart, .wc-block-checkout) .wc-block-components-totals-wrapper:empty {
	display: none;
}

:is(.wc-block-cart, .wc-block-checkout) .wc-block-components-totals-item {
	font-size: 15px;
	color: var(--color-text);
}

:is(.wc-block-cart, .wc-block-checkout) .wc-block-components-totals-item__description {
	color: var(--color-text-muted);
}

/* Coupon toggle */
:is(.wc-block-cart, .wc-block-checkout) .wc-block-components-panel__button {
	margin: 0;
	padding-block: 2px;
	font-size: 15px;
	font-weight: 500;
	color: var(--color-text);
}

:is(.wc-block-cart, .wc-block-checkout) .wc-block-components-panel__button:hover {
	color: var(--color-primary);
}

:is(.wc-block-cart, .wc-block-checkout) .wc-block-components-totals-coupon__form {
	gap: 8px;
}

:is(.wc-block-cart, .wc-block-checkout) .wc-block-components-text-input input {
	border: 1px solid var(--color-border);
	border-radius: 6px;
	background-color: var(--color-background);
}

:is(.wc-block-cart, .wc-block-checkout) .wc-block-components-text-input input:focus {
	border-color: var(--color-primary);
	box-shadow: none;
}

:is(.wc-block-cart, .wc-block-checkout) .wc-block-components-text-input.is-active label,
:is(.wc-block-cart, .wc-block-checkout) .wc-block-components-text-input label {
	color: var(--color-text-muted);
}

:is(.wc-block-cart, .wc-block-checkout) .wc-block-components-totals-coupon__button {
	border-radius: 6px;
	background-color: var(--color-primary);
	color: var(--color-background);
	font-weight: 600;
}

:is(.wc-block-cart, .wc-block-checkout) .wc-block-components-totals-coupon__button:hover:not([disabled]) {
	background-color: var(--color-primary-hover);
}

/* Grand total */
:is(.wc-block-cart, .wc-block-checkout) .wc-block-components-totals-footer-item {
	align-items: baseline;
}

:is(.wc-block-cart, .wc-block-checkout) .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-size: 18px;
	font-weight: 600;
	color: var(--color-heading);
}

:is(.wc-block-cart, .wc-block-checkout) .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: clamp(22px, 1.5vw, 26px);
	font-weight: 600;
	color: var(--color-heading);
}

/* Proceed button — the site's primary green instead of WordPress's
   default #32373c .wp-element-button. */
.wc-block-cart .wc-block-cart__submit-container {
	padding-block-start: 20px;
}

.wc-block-cart .wc-block-cart__submit-button.wc-block-components-button {
	min-height: 56px;
	padding: 0 24px;
	border: 0;
	border-radius: 6px;
	background-color: var(--color-primary);
	color: var(--color-background);
	font-size: 17px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 180ms ease;
}

.wc-block-cart .wc-block-cart__submit-button.wc-block-components-button:hover {
	background-color: var(--color-primary-hover);
	color: var(--color-background);
}

.wc-block-cart .wc-block-cart__submit-button.wc-block-components-button:focus {
	box-shadow: none;
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* Sticky mobile version of the same button keeps the page background. */
.wc-block-cart .wc-block-cart__submit-container--sticky {
	background-color: var(--color-background);
}

/* ======================================================================
   Empty cart
   ====================================================================== */

.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
	font-size: clamp(24px, 1.8vw, 32px);
	font-weight: 500;
	color: var(--color-heading);
}

.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	background-color: var(--color-text-muted);
}

.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots::before {
	color: var(--color-border);
}

.wp-block-woocommerce-empty-cart-block > h2:not(.wc-block-cart__empty-cart__title) {
	margin-block: clamp(32px, 3vw, 48px) clamp(24px, 2vw, 32px);
	font-size: clamp(24px, 1.8vw, 32px);
	font-weight: 500;
	color: var(--color-heading);
}

/* ======================================================================
   Checkout — layout
   ====================================================================== */

/* The order-summary block draws its own border, so the card styling goes on
   that block (see "order summary" below), not on the sidebar around it —
   styling both gave a box inside a box. */

/* ======================================================================
   Checkout — steps (Στοιχεία επικοινωνίας, Διεύθυνση, Πληρωμή …)
   ====================================================================== */

.wc-block-checkout .wc-block-components-checkout-step {
	margin-block-end: clamp(32px, 3vw, 48px);
}

.wc-block-checkout .wc-block-components-checkout-step__heading {
	margin-block-end: 6px;
}

.wc-block-checkout .wc-block-components-checkout-step__title,
.wc-block-checkout .wc-block-components-checkout-order-summary__title-text {
	font-size: clamp(20px, 1.3vw, 24px);
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--color-heading);
}

.wc-block-checkout .wc-block-components-checkout-step__description {
	margin-block-end: 16px;
	font-size: 15px;
	color: var(--color-text-muted);
}

/* Step numbers, when enabled in the block, in the brand green. */
.wc-block-checkout .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__title::before {
	color: var(--color-primary);
}

.wc-block-checkout .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__container::after {
	border-color: var(--color-border);
}

.wc-block-checkout .wc-block-checkout__guest-checkout-notice {
	font-size: 14px;
	color: var(--color-text-muted);
}

.wc-block-checkout .wc-block-checkout__login-prompt {
	font-size: 14px;
	font-weight: 500;
	color: var(--color-primary);
}

/* ======================================================================
   Checkout — form fields
   ====================================================================== */

/* WooCommerce scopes its inputs as `.wc-block-components-form
   .wc-block-components-text-input input[type=…]`; the extra
   .wc-block-checkout class outranks that without !important. */
.wc-block-checkout .wc-block-components-form .wc-block-components-text-input input:is([type="text"], [type="email"], [type="tel"], [type="password"], [type="url"], [type="number"]),
.wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-checkout .wc-block-components-textarea {
	border: 1px solid var(--color-border);
	border-radius: 6px;
	background-color: #fff;
	color: var(--color-text);
	box-shadow: none;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.wc-block-checkout .wc-block-components-form .wc-block-components-text-input input:is([type="text"], [type="email"], [type="tel"], [type="password"], [type="url"], [type="number"]):focus,
.wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__select:focus,
.wc-block-checkout .wc-block-components-textarea:focus {
	border: 1px solid var(--color-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
	outline: none;
}

/* The select's own wrapper draws a second border around the native select. */
.wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__container {
	border: 0;
	border-radius: 6px;
	background: none;
}

.wc-block-checkout .wc-block-components-text-input label,
.wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__label {
	color: var(--color-text-muted);
}

.wc-block-checkout .wc-block-components-address-form__address_2-toggle {
	color: var(--color-primary);
}

/* Validation */
.wc-block-checkout .wc-block-components-text-input.has-error input {
	border-color: var(--color-error);
}

.wc-block-checkout .wc-block-components-validation-error {
	color: var(--color-error);
}

/* Checkboxes — rounded square, green when checked. */
.wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	border: 1px solid var(--color-border);
	border-radius: 4px;
	background-color: #fff;
}

.wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	border-color: var(--color-primary);
	background-color: var(--color-primary);
}

.wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked + .wc-block-components-checkbox__mark {
	fill: var(--color-background);
}

.wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:focus {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* Address card shown once an address is saved (logged-in customers). */
.wc-block-checkout .wc-block-components-address-card {
	border: 1px solid var(--color-border);
	border-radius: 8px;
	background-color: #fff;
}

.wc-block-checkout .wc-block-components-address-card__edit {
	color: var(--color-primary);
}

/* ======================================================================
   Checkout — shipping & payment options (radio cards)
   ====================================================================== */

.wc-block-checkout .wc-block-components-radio-control--highlight-checked,
.wc-block-checkout .wc-block-components-radio-control-accordion-option,
.wc-block-checkout .wc-block-checkout__shipping-method-option {
	border-color: var(--color-border);
	border-radius: 8px;
	background-color: #fff;
}

.wc-block-checkout .wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-checkout .wc-block-checkout__shipping-method-option--selected {
	border-color: var(--color-primary);
	box-shadow: inset 0 0 0 1px var(--color-primary);
}

.wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input {
	border-color: var(--color-border);
	background-color: #fff;
}

.wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
	border-color: var(--color-primary);
}

.wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before {
	background: var(--color-primary);
}

.wc-block-checkout .wc-block-components-radio-control__label {
	font-weight: 500;
	color: var(--color-text);
}

.wc-block-checkout .wc-block-components-radio-control__description,
.wc-block-checkout .wc-block-components-radio-control__secondary-description {
	color: var(--color-text-muted);
}

/* Notices inside the form (e.g. "no payment methods", shipping messages)
   in the site palette instead of WooCommerce's blue. */
.wc-block-checkout .wc-block-components-notice-banner {
	border: 1px solid var(--color-border);
	border-left-width: 4px;
	border-radius: 6px;
	background-color: var(--color-background);
	color: var(--color-text);
}

.wc-block-checkout .wc-block-components-notice-banner.is-info {
	border-left-color: var(--color-primary);
}

.wc-block-checkout .wc-block-components-notice-banner.is-info > svg {
	background-color: var(--color-primary);
}

.wc-block-checkout .wc-block-components-notice-banner.is-warning {
	border-left-color: var(--color-warning);
}

.wc-block-checkout .wc-block-components-notice-banner.is-error {
	border-left-color: var(--color-error);
}

/* ======================================================================
   Checkout — terms + actions (Επιστροφή στο καλάθι / Ολοκλήρωση)
   ====================================================================== */

.wc-block-checkout .wc-block-checkout__terms {
	font-size: 14px;
	color: var(--color-text-muted);
}

.wc-block-checkout .wc-block-checkout__terms a {
	color: var(--color-primary);
}

.wc-block-checkout .wc-block-checkout__actions_row {
	align-items: center;
	gap: 16px;
}

.wc-block-checkout .wc-block-components-checkout-return-to-cart-button {
	font-size: 15px;
	font-weight: 500;
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color 160ms ease;
}

.wc-block-checkout .wc-block-components-checkout-return-to-cart-button:hover {
	color: var(--color-primary);
}

.wc-block-checkout .wc-block-components-checkout-return-to-cart-button svg {
	fill: currentColor;
}

.wc-block-checkout .wc-block-components-checkout-place-order-button.wc-block-components-button {
	min-height: 56px;
	padding: 0 32px;
	border: 0;
	border-radius: 6px;
	background-color: var(--color-primary);
	color: var(--color-background);
	font-size: 17px;
	font-weight: 600;
	transition: background-color 180ms ease;
}

.wc-block-checkout .wc-block-components-checkout-place-order-button.wc-block-components-button:hover:not(:disabled) {
	background-color: var(--color-primary-hover);
	color: var(--color-background);
}

.wc-block-checkout .wc-block-components-checkout-place-order-button.wc-block-components-button:focus {
	box-shadow: none;
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.wc-block-checkout .wc-block-components-checkout-place-order-button.wc-block-components-button:disabled {
	opacity: 0.5;
}

/* ======================================================================
   Checkout — order summary (sidebar)
   ====================================================================== */

/* Desktop: one card — WooCommerce's own order-summary block, re-skinned. On
   phones (< 700px container) WooCommerce turns it into a collapsible bar
   without a border; that version is left alone. */
@container (min-width: 700px) {
	.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block {
		overflow: hidden;
		border: 1px solid var(--color-border);
		border-radius: 10px;
		background-color: var(--color-surface);
		font-size: 15px;
	}

	.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title {
		margin: 0;
		padding: 22px 24px 18px;
		border-bottom: 1px solid var(--color-border);
	}

	.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text {
		margin: 0;
	}

	.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary {
		padding: 0 24px;
	}

	.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .checkout-order-summary-block-fill .wc-block-components-totals-coupon,
	.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .checkout-order-summary-block-fill .wc-block-components-totals-item,
	.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-coupon,
	.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item {
		padding-inline: 24px;
	}

	/* Grand total row gets its own breathing room at the bottom of the card. */
	.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item {
		padding-block: 20px 22px;
	}

	.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper:last-child {
		border-bottom: 0;
	}
}

.wc-block-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item {
	align-items: flex-start;
	gap: 0;
	padding-block: 14px;
}

.wc-block-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item + .wc-block-components-order-summary-item {
	border-top: 1px solid var(--color-border);
}

/* Thumbnail on a white tile like the cart; quantity badge in brand green. */
.wc-block-checkout .wc-block-components-order-summary-item__image {
	width: 56px;
}

.wc-block-checkout .wc-block-components-order-summary-item__image img {
	width: 56px;
	max-width: 56px;
	aspect-ratio: 1;
	padding: 4px;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	background-color: #fff;
	object-fit: contain;
}

.wc-block-checkout .wc-block-components-order-summary-item__quantity {
	min-width: 22px;
	height: 22px;
	border: 2px solid var(--color-surface);
	background-color: var(--color-primary);
	color: var(--color-background);
	font-size: 12px;
	font-weight: 600;
	box-shadow: none;
}

.wc-block-checkout .wc-block-components-order-summary-item__description {
	padding-inline: 16px 12px;
}

.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__description .wc-block-components-product-name {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--color-heading);
}

.wc-block-checkout .wc-block-components-order-summary-item__individual-prices {
	font-size: 14px;
	color: var(--color-text-muted);
}

/* Same as the cart: no full product description under each line. */
.wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-metadata__description {
	display: none;
}

.wc-block-checkout .wc-block-components-order-summary-item__total-price {
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--color-heading);
}

/* ======================================================================
   Checkout — place-order button under the summary card (desktop)
   ====================================================================== */

/* The real Actions block can only live inside the form column (WooCommerce
   restricts its parent), so assets/js/modules/checkout-place-order.js puts a
   stand-in button under the summary card that clicks the real one. On
   desktop the stand-in shows and the real row hides; on phones (single
   column) the real row stays where WooCommerce put it and the stand-in is
   hidden. The terms line moves with the button only when it is plain text
   (no checkbox) — the script adds .myshop-checkout-cta--has-terms then. */
.myshop-checkout-cta {
	display: none;
}

@container (min-width: 700px) {
	.wp-block-woocommerce-checkout.myshop-has-checkout-cta .wc-block-checkout__actions {
		display: none;
	}

	.wp-block-woocommerce-checkout.myshop-has-checkout-cta.myshop-checkout-cta--has-terms .wc-block-checkout__terms {
		display: none;
	}

	.myshop-checkout-cta {
		display: block;
		margin-block-start: 20px;
	}
}

.myshop-checkout-cta__terms {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-text-muted);
}

.myshop-checkout-cta__terms a {
	color: var(--color-primary);
}

.myshop-checkout-cta__button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	padding: 0 24px;
	border: 0;
	border-radius: 6px;
	background-color: var(--color-primary);
	color: var(--color-background);
	font-size: 17px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 180ms ease;
}

.myshop-checkout-cta__button:hover:not(:disabled) {
	background-color: var(--color-primary-hover);
}

.myshop-checkout-cta__button:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.myshop-checkout-cta__button:disabled {
	cursor: default;
	opacity: 0.5;
}

/* Mirrors WooCommerce's own loading state: label hidden, spinner shown. */
.myshop-checkout-cta__button.is-loading .wc-block-components-button__text {
	visibility: hidden;
}

.myshop-checkout-cta__button .wc-block-components-spinner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ======================================================================
   Order received ("thank you") — WooCommerce's classic checkout/thankyou.php,
   on the checkout page's order-received endpoint.
   ====================================================================== */

.woocommerce-order-received .entry-header {
	text-align: center;
}

.woocommerce-order-received .woocommerce-order {
	max-width: 880px;
	margin-inline: auto;
}

/* Success line as a centred confirmation with a green tick. */
.woocommerce-order-received .woocommerce-thankyou-order-received {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin: 0 0 clamp(28px, 3vw, 44px);
	font-size: clamp(18px, 1.3vw, 22px);
	font-weight: 500;
	text-align: center;
	color: var(--color-heading);
}

.woocommerce-order-received .woocommerce-thankyou-order-received::before {
	content: "";
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fdfbf6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 30px no-repeat;
}

/* Overview: order number / date / email / total / payment as small cards. */
.woocommerce-order-received ul.woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
	gap: 12px;
	margin: 0 0 clamp(32px, 3.4vw, 48px);
	padding: 0;
	list-style: none;
}

.woocommerce-order-received ul.woocommerce-order-overview::before,
.woocommerce-order-received ul.woocommerce-order-overview::after {
	content: none;
}

.woocommerce-order-received ul.woocommerce-order-overview li {
	float: none;
	margin: 0;
	padding: 16px 18px;
	border: 1px solid var(--color-border);
	border-radius: 10px;
	background-color: var(--color-surface);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.woocommerce-order-received ul.woocommerce-order-overview li strong {
	display: block;
	margin-block-start: 4px;
	font-size: 16px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--color-heading);
	overflow-wrap: anywhere;
}

.woocommerce-order-received .woocommerce-order h2 {
	margin: 0 0 14px;
	font-size: clamp(20px, 1.35vw, 24px);
	font-weight: 500;
	color: var(--color-heading);
}

/* Order details table — same look as the account's order tables. */
.woocommerce-order-received table.shop_table {
	width: 100%;
	margin: 0 0 clamp(32px, 3.4vw, 48px);
	border: 1px solid var(--color-border);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 10px;
	overflow: hidden;
	background-color: var(--color-background);
	font-size: 15px;
}

.woocommerce-order-received table.shop_table th,
.woocommerce-order-received table.shop_table td {
	padding: 14px 18px;
	border: 0;
	border-top: 1px solid var(--color-border);
	vertical-align: top;
}

.woocommerce-order-received table.shop_table thead th {
	border-top: 0;
	background-color: var(--color-surface);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.woocommerce-order-received table.shop_table td.product-name a {
	font-weight: 500;
	color: var(--color-heading);
	text-decoration: none;
}

.woocommerce-order-received table.shop_table td.product-name a:hover {
	color: var(--color-primary);
}

.woocommerce-order-received table.shop_table .product-quantity {
	font-weight: 600;
	color: var(--color-text-muted);
}

.woocommerce-order-received table.shop_table tfoot th {
	font-weight: 500;
	color: var(--color-text-muted);
}

.woocommerce-order-received table.shop_table tfoot tr:last-child th,
.woocommerce-order-received table.shop_table tfoot tr:last-child td {
	font-size: 18px;
	font-weight: 600;
	color: var(--color-heading);
}

/* Customer details: addresses as cards, side by side. */
.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 20px;
}

.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns::before,
.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns::after {
	content: none;
}

.woocommerce-order-received .woocommerce-customer-details .woocommerce-column {
	float: none;
	width: auto;
	max-width: none;
}

.woocommerce-order-received .woocommerce-customer-details address {
	margin: 0;
	padding: 18px 20px;
	border: 1px solid var(--color-border);
	border-radius: 10px;
	background-color: var(--color-background);
	font-style: normal;
	line-height: 1.7;
	color: var(--color-text);
}

.woocommerce-order-received .woocommerce-customer-details address p {
	margin: 6px 0 0;
}