/*
 * CC Storefront basket and checkout. Layout in :where() (zero specificity) so any site rule
 * wins; colours are variables a site can set:
 *   --cc-steps-accent     current and done steps (default: the text colour)
 *   --cc-steps-on-accent  the current step's number on the accent
 *   --cc-steps-text       done steps' labels
 *   --cc-steps-muted      steps still to come
 *   --cc-steps-line       the line between steps and the numbers' rings
 */

/* Basket page with quantities that save by themselves: no "Update basket" button. */
.cc-basket-auto-update .woocommerce-cart-form [name="update_cart"] { display: none !important; }

/* "Continue shopping" at the end of the basket actions. */
:where(.woocommerce-cart-form .actions .cc-continue-shopping) { float: right; }

/* Basket → Checkout → Order complete. */
:where(.cc-steps) { margin: 0 0 32px; }
:where(.cc-steps__list) { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
:where(.cc-steps__step) { display: flex; align-items: center; margin: 0; }
:where(.cc-steps__step + .cc-steps__step)::before {
	content: ""; width: 48px; height: 1px; margin: 0 16px;
	background: var(--cc-steps-line, color-mix(in srgb, currentColor 25%, transparent));
}
:where(.cc-steps__step.is-done + .cc-steps__step)::before { background: var(--cc-steps-accent, currentColor); }
.cc-steps .cc-steps__item, .cc-steps a.cc-steps__item {
	display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; text-decoration: none;
	color: var(--cc-steps-muted, color-mix(in srgb, currentColor 55%, transparent));
}
:where(.cc-steps__num) {
	display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
	border: 1px solid var(--cc-steps-line, color-mix(in srgb, currentColor 35%, transparent)); border-radius: 50%; letter-spacing: 0;
}
.cc-steps .is-done .cc-steps__item { color: var(--cc-steps-text, inherit); }
:where(.cc-steps .is-done .cc-steps__num) { border-color: var(--cc-steps-accent, currentColor); color: var(--cc-steps-accent, currentColor); }
.cc-steps .is-current .cc-steps__item { color: var(--cc-steps-accent, inherit); }
:where(.cc-steps .is-current .cc-steps__num) {
	border-color: var(--cc-steps-accent, currentColor); background: var(--cc-steps-accent, currentColor); color: var(--cc-steps-on-accent, Canvas);
}
.cc-steps a.cc-steps__item:hover, .cc-steps a.cc-steps__item:focus-visible { color: var(--cc-steps-accent, inherit); }
:where(.cc-steps a.cc-steps__item:hover .cc-steps__num, .cc-steps a.cc-steps__item:focus-visible .cc-steps__num) {
	border-color: var(--cc-steps-accent, currentColor); color: var(--cc-steps-accent, currentColor);
}
/* Phones: each label under its number, so the labels keep a readable size. */
@media (max-width: 767px) {
	:where(.cc-steps) { margin-bottom: 24px; }
	:where(.cc-steps__list) { align-items: flex-start; justify-content: space-between; }
	:where(.cc-steps__step) { align-items: flex-start; }
	:where(.cc-steps__step:not(:first-child)) { flex: 1 1 auto; }
	:where(.cc-steps__step + .cc-steps__step)::before { flex: 1 1 auto; width: auto; min-width: 10px; margin: 14px 8px 0; }
	.cc-steps .cc-steps__item, .cc-steps a.cc-steps__item { flex-direction: column; gap: 8px; }
	:where(.cc-steps__num) { width: 28px; height: 28px; }
}

/* Checkout order summary: a small − / + at the end of the product name cell. */
/* Name and quantity in one line, the quantity straight after the name. */
:where(td.product-name:has(> .cc-checkout-qty)) { display: flex; align-items: center; gap: 12px; }
:where(.cc-checkout-qty) { display: inline-flex; flex: none; margin: -2px 0 -4px; }
/* Tablet and up: the name on one line (it wrapped while the row had room to spare). */
@media (min-width: 768px) {
	:where(td.product-name:has(> .cc-checkout-qty)) { white-space: nowrap; }
}
.cc-checkout-qty .cc-qty button.cc-qty__step { width: 24px; min-height: 24px; font-size: 0.875rem; }
:where(.cc-checkout-qty .cc-qty__value) { min-width: 22px; font-size: 0.8125rem; }

/* Under the checkout email field when checkout creates an account. */
:where(.cc-account-note) { display: block; margin: 8px 0 0; font-size: 0.875em; opacity: 0.8; }

/*
 * Order addresses (order received, View order): WooCommerce gives the phone line a paragraph gap,
 * so the email sat apart from it. Phone and email together, a little apart from the address;
 * icons in --cc-contact-icon-color.
 */
.cc-contact-lines .woocommerce-customer-details address :is(.woocommerce-customer-details--phone, .woocommerce-customer-details--email) { margin: 0; }
.cc-contact-lines .woocommerce-customer-details address > p:first-of-type { margin-top: 10px; }
.cc-contact-lines .woocommerce-customer-details address :is(.woocommerce-customer-details--phone, .woocommerce-customer-details--email)::before { color: var(--cc-contact-icon-color, currentColor); }