/*
 * WooCommerce overrides.
 * ---------------------------------------------------------------------------
 * WooCommerce ships a full stylesheet of its own, written for no theme in
 * particular: 4px radii, #a46497 purple, its own button and form conventions.
 * None of that belongs on this site, and it cannot simply be dequeued -- the
 * layout of the checkout grid and the cart table comes from the same file.
 *
 * So this maps WooCommerce's markup onto the theme's tokens rather than
 * replacing it. The rules that matter are the theme's, applied consistently:
 *
 *   interactive controls -> --r-pill
 *   cards and panels     -> --r-lg
 *   inputs and textareas -> --r-sm
 *
 * Loaded only on shop, cart, checkout and account pages (see inc/assets.php),
 * because nothing else in the theme renders any of this markup.
 */

/* ------------------------------------------------------------- Page shell */

/*
 * The header is fixed, so the shop wrapper needs the same top offset every
 * other inner page in the theme uses. Without it the first heading sits under
 * the header on load and looks like a rendering bug.
 */
.eg-shop {
	padding-block: calc(var(--header-h) + var(--sp-8)) var(--sp-9);
}

.eg-shop .woocommerce-notices-wrapper:empty {
	display: none;
}

/* ------------------------------------------------------------- Typography */

.eg-shop .product_title {
	font-family: var(--ff-display);
	font-size: var(--fs-h1);
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-h1);
	margin: 0 0 var(--sp-4);
}

.eg-shop h2,
.eg-shop h3 {
	font-family: var(--ff-display);
	line-height: var(--lh-heading);
}

.eg-shop h2 {
	font-size: var(--fs-h3);
	letter-spacing: var(--ls-h3);
}

.eg-shop p {
	max-width: var(--measure);
	line-height: var(--lh-body);
}

/* ----------------------------------------------------------------- Prices */

.eg-shop .price,
.eg-shop .amount {
	color: var(--c-ink);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.eg-shop .price del {
	color: var(--c-ink-3);
	font-weight: 400;
}

.eg-shop .price ins {
	text-decoration: none;
}

/* ---------------------------------------------------------------- Buttons */

/*
 * Every WooCommerce button, wherever it appears -- the add-to-cart button, the
 * place-order button, the cart's update button -- is redrawn as the theme's
 * primary pill. The selector list is long because WooCommerce does not use one
 * consistent class for them.
 */
.eg-shop .button,
.eg-shop button.button,
.eg-shop input.button,
.eg-shop a.button,
.eg-shop .wc-block-components-button,
.woocommerce-message .button,
.woocommerce-info .button,
#place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	border: 1px solid transparent;
	border-radius: var(--r-pill);
	padding: 0.78rem 1.5rem;
	background: var(--c-accent);
	color: var(--c-on-accent);
	font-family: var(--ff-sans);
	font-size: var(--fs-body);
	font-weight: 550;
	line-height: 1.2;
	letter-spacing: var(--ls-body);
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--d-fast) var(--e-out),
		transform var(--d-fast) var(--e-out);
}

.eg-shop .button:hover,
.eg-shop button.button:hover,
.eg-shop input.button:hover,
.eg-shop a.button:hover,
#place_order:hover {
	background: var(--c-accent-hover);
	color: var(--c-on-accent);
}

.eg-shop .button:active,
#place_order:active {
	transform: translateY(1px);
}

.eg-shop .button:focus-visible,
#place_order:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 32%, transparent);
}

.eg-shop .button:disabled,
.eg-shop .button.disabled,
#place_order:disabled {
	background: var(--c-line-strong);
	color: var(--c-ink-3);
	cursor: not-allowed;
}

/* The cart's secondary actions read as ghost buttons, not as second primaries. */
.eg-shop .button[name="update_cart"],
.eg-shop .wc-backward,
.eg-shop .checkout-button ~ .button {
	background: transparent;
	color: var(--c-ink);
	border-color: var(--c-line-strong);
}

.eg-shop .button[name="update_cart"]:hover,
.eg-shop .wc-backward:hover {
	background: var(--c-surface-2);
	color: var(--c-ink);
}

/* ------------------------------------------------------------------ Forms */

.eg-shop .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding: 0;
	margin: 0 0 var(--sp-4);
}

.eg-shop .form-row label {
	font-size: var(--fs-sm);
	font-weight: 550;
	color: var(--c-ink-2);
}

.eg-shop .required {
	color: var(--c-error);
	text-decoration: none;
	border: 0;
}

.eg-shop .form-row input[type="text"],
.eg-shop .form-row input[type="email"],
.eg-shop .form-row input[type="tel"],
.eg-shop .form-row input[type="password"],
.eg-shop .form-row input[type="number"],
.eg-shop .form-row textarea,
.eg-shop .select2-container .select2-selection--single,
.eg-shop .form-row select {
	width: 100%;
	background: var(--c-surface);
	color: var(--c-ink);
	border: 1px solid var(--c-control-line);
	border-radius: var(--r-sm);
	padding: 0.72rem 0.9rem;
	font-family: var(--ff-sans);
	font-size: var(--fs-body);
	line-height: 1.5;
	transition:
		border-color var(--d-fast) var(--e-out),
		box-shadow var(--d-fast) var(--e-out);
}

.eg-shop .form-row textarea {
	resize: vertical;
	min-height: 6.5rem;
}

.eg-shop .form-row input:hover,
.eg-shop .form-row textarea:hover,
.eg-shop .form-row select:hover {
	border-color: var(--c-ink-3);
}

.eg-shop .form-row input:focus,
.eg-shop .form-row textarea:focus,
.eg-shop .form-row select:focus {
	outline: none;
	border-color: var(--c-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 22%, transparent);
}

.eg-shop .form-row.woocommerce-invalid input,
.eg-shop .form-row.woocommerce-invalid select {
	border-color: var(--c-error);
}

.eg-shop .form-row .description {
	font-size: var(--fs-xs);
	color: var(--c-ink-3);
	line-height: 1.45;
}

/*
 * Select2 draws the country dropdown as a div, not a select, so its height and
 * its arrow have to be matched to the real inputs by hand or the country field
 * sits visibly shorter than the two fields either side of it.
 */
.eg-shop .select2-container .select2-selection--single {
	height: auto;
	display: flex;
	align-items: center;
}

.eg-shop .select2-container .select2-selection__rendered {
	padding: 0;
	color: var(--c-ink);
	line-height: 1.5;
}

.eg-shop .select2-container .select2-selection__arrow {
	top: 50%;
	transform: translateY(-50%);
	right: var(--sp-3);
}

.select2-dropdown {
	border-color: var(--c-line-strong);
	border-radius: var(--r-sm);
	overflow: hidden;
}

.select2-results__option--highlighted {
	background: var(--c-accent) !important;
	color: var(--c-on-accent) !important;
}

/* The two theme-added invoicing fields, grouped so they read as one block. */
.eg-shop .eg-checkout-field {
	margin-bottom: var(--sp-3);
}

/* ------------------------------------------------------------ Cart totals */

.eg-shop .cart_totals,
.eg-shop .woocommerce-checkout-review-order,
.eg-shop #order_review {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	padding: var(--sp-5);
	box-shadow: var(--sh-sm);
}

.eg-shop table.shop_table,
.eg-shop table.shop_attributes {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
	margin: 0;
}

.eg-shop table.shop_table th,
.eg-shop table.shop_table td {
	border: 0;
	border-bottom: 1px solid var(--c-line);
	padding: var(--sp-3) 0;
	text-align: left;
	font-size: var(--fs-sm);
	vertical-align: top;
}

.eg-shop table.shop_table th {
	color: var(--c-ink-2);
	font-weight: 550;
}

.eg-shop table.shop_table tr:last-child th,
.eg-shop table.shop_table tr:last-child td {
	border-bottom: 0;
}

.eg-shop table.shop_table .order-total th,
.eg-shop table.shop_table .order-total td {
	border-top: 1px solid var(--c-line-strong);
	padding-top: var(--sp-4);
	font-size: var(--fs-body);
	color: var(--c-ink);
}

/*
 * A cart table is a grid of columns on a laptop and an unreadable squeeze on a
 * phone. Below 640px each row becomes its own block with the column heading in
 * front of the value, which is what the data:: labels WooCommerce already
 * writes into the markup are for.
 */
@media (max-width: 640px) {
	.eg-shop table.shop_table_responsive thead {
		display: none;
	}

	.eg-shop table.shop_table_responsive tr {
		display: block;
		border-bottom: 1px solid var(--c-line);
		padding: var(--sp-3) 0;
	}

	.eg-shop table.shop_table_responsive td {
		display: flex;
		justify-content: space-between;
		gap: var(--sp-4);
		border: 0;
		padding: var(--sp-1) 0;
		text-align: right;
	}

	.eg-shop table.shop_table_responsive td::before {
		content: attr(data-title) ": ";
		color: var(--c-ink-3);
		font-weight: 550;
		text-align: left;
	}
}

/* ------------------------------------------------------- Payment methods */

.eg-shop #payment {
	background: transparent;
	border-radius: 0;
}

.eg-shop #payment ul.payment_methods {
	display: grid;
	gap: var(--sp-2);
	border: 0;
	padding: 0;
	margin: 0 0 var(--sp-5);
	list-style: none;
}

.eg-shop #payment ul.payment_methods li {
	background: var(--c-surface);
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-sm);
	padding: var(--sp-4);
	transition: border-color var(--d-fast) var(--e-out);
}

.eg-shop #payment ul.payment_methods li:hover {
	border-color: var(--c-ink-3);
}

/*
 * The selected method is marked by its accent border, not by a background
 * wash: the gateway boxes carry their own logos and a tinted panel behind a
 * PayPal or Stripe mark reads as a rendering error.
 */
.eg-shop #payment ul.payment_methods li:has(input:checked) {
	border-color: var(--c-accent);
	box-shadow: 0 0 0 1px var(--c-accent);
}

.eg-shop #payment ul.payment_methods label {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-weight: 550;
	cursor: pointer;
}

.eg-shop #payment .payment_box {
	background: var(--c-accent-soft);
	border: 0;
	border-radius: var(--r-sm);
	margin: var(--sp-3) 0 0;
	padding: var(--sp-3) var(--sp-4);
	font-size: var(--fs-sm);
	color: var(--c-ink-2);
}

/* WooCommerce draws a CSS triangle above the box; it does not survive theming. */
.eg-shop #payment .payment_box::before {
	display: none;
}

.eg-shop #payment .place-order {
	padding: 0;
}

/* ----------------------------------------------------------- Order tables */

.eg-shop .woocommerce-order,
.eg-shop .woocommerce-customer-details,
.eg-shop .woocommerce-order-details {
	margin-bottom: var(--sp-7);
}

.eg-shop ul.order_details {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-5);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	padding: var(--sp-5);
	margin: 0 0 var(--sp-6);
	list-style: none;
}

.eg-shop ul.order_details li {
	border: 0;
	padding: 0;
	margin: 0;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	color: var(--c-ink-3);
}

.eg-shop ul.order_details li strong {
	display: block;
	margin-top: var(--sp-1);
	font-size: var(--fs-body);
	text-transform: none;
	letter-spacing: var(--ls-body);
	color: var(--c-ink);
}

/* ---------------------------------------------------------------- Notices */

.eg-shop .woocommerce-message,
.eg-shop .woocommerce-info,
.eg-shop .woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
	border: 1px solid var(--c-line);
	border-left-width: 3px;
	border-radius: var(--r-sm);
	background: var(--c-surface);
	padding: var(--sp-4);
	margin: 0 0 var(--sp-5);
	font-size: var(--fs-sm);
	color: var(--c-ink-2);
	list-style: none;
}

/* WooCommerce's own icon is a pseudo-element positioned for its own padding. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	display: none;
}

.woocommerce-message {
	border-left-color: var(--c-accent);
	background: var(--c-accent-soft);
}

.woocommerce-info {
	border-left-color: var(--c-ink-3);
}

.woocommerce-error {
	border-left-color: var(--c-error);
	background: var(--c-error-soft);
	color: var(--c-error);
}

.woocommerce-error li {
	margin: 0;
}

/* -------------------------------------------------------- My account page */

.eg-shop .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	padding: 0;
	margin: 0 0 var(--sp-6);
	list-style: none;
}

.eg-shop .woocommerce-MyAccount-navigation li a {
	display: inline-block;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--r-pill);
	padding: 0.45rem 1rem;
	font-size: var(--fs-sm);
	color: var(--c-ink-2);
	text-decoration: none;
	transition:
		background-color var(--d-fast) var(--e-out),
		border-color var(--d-fast) var(--e-out);
}

.eg-shop .woocommerce-MyAccount-navigation li a:hover {
	border-color: var(--c-ink-3);
	background: var(--c-surface-2);
}

.eg-shop .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--c-on-accent);
}

/* ----------------------------------------------------------- Product page */

.eg-shop div.product {
	display: grid;
	gap: var(--sp-7);
}

@media (min-width: 900px) {
	.eg-shop div.product {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: start;
	}

	.eg-shop div.product .woocommerce-product-gallery {
		position: sticky;
		top: calc(var(--header-h) + var(--sp-5));
	}

	/* The tabs and long description span both columns beneath the fold. */
	.eg-shop div.product .woocommerce-tabs,
	.eg-shop div.product .product_meta {
		grid-column: 1 / -1;
	}
}

.eg-shop div.product .woocommerce-product-gallery img {
	border-radius: var(--r-lg);
}

.eg-shop div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
	margin: var(--sp-5) 0;
}

.eg-shop div.product .quantity input {
	width: 5rem;
	border: 1px solid var(--c-control-line);
	border-radius: var(--r-sm);
	padding: 0.72rem 0.6rem;
	text-align: center;
	font-size: var(--fs-body);
}

.eg-shop .product_meta {
	font-size: var(--fs-xs);
	color: var(--c-ink-3);
}

/* ------------------------------------------------------------ Dark scheme */

/*
 * The theme swaps token values rather than inverting sections, so almost
 * everything above follows automatically. The exceptions are the few places
 * WooCommerce hard-codes a light background in its own stylesheet.
 */
@media (prefers-color-scheme: dark) {
	.eg-shop .select2-dropdown,
	.eg-shop #payment ul.payment_methods li {
		background: var(--c-surface);
		color: var(--c-ink);
	}

	.eg-shop .woocommerce-product-gallery img {
		filter: brightness(0.92);
	}
}