/* theme/assets/css/woocommerce.css — overrides Woo's default markup into the
   MeterDesk visual language (near-black surfaces, mono labels, hairline borders,
   accent blue, signal-zone notices). Loaded only on Woo pages (see functions.php). */

/* ---------- VAT explainer notice (cart / checkout / product) ---------- */
.md-vat-notice {
	max-width: 1200px;
	margin: 0 auto 16px;
	padding: 12px 16px;
	background: var(--surf2);
	border: 1px solid var(--border2);
	border-left: 3px solid var(--accent);
	border-radius: var(--r-control);
	color: var(--text);
	font-size: 13px;
	line-height: 1.5;
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.md-vat-notice__label {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--accent2);
	padding: 4px 10px;
	border: 1px solid var(--border);
	border-radius: var(--r-control);
	flex-shrink: 0;
	background: var(--surf3);
}
.md-vat-notice__body {
	flex: 1;
	color: var(--text);
}
.md-vat-notice__body strong {
	color: var(--text);
	font-weight: 700;
}

/* WC's automatic price suffix — make it visually subordinate to the price. */
.woocommerce-price-suffix {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text2);
	margin-left: 6px;
	font-weight: 400;
}

/* ---------- Single product page — image only, leave layout to Woo blocks --
   Strip every border/background/shadow off the wrappers that the block-based
   single-product template wraps around the image, shrink the container to fit
   the image so we don't get a wide rectangle around a square placeholder. */
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image,
.single-product .wp-block-woocommerce-product-image-gallery,
.single-product .wp-block-woocommerce-product-image,
.single-product .wc-block-components-product-image,
.single-product .wp-block-image,
.single-product figure.wp-block-image,
.single-product figure.woocommerce-product-gallery__wrapper,
.single-product .wp-block-cover {
	background: transparent !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: fit-content !important;
	max-width: 320px !important;
}

/* The actual image */
.single-product .woocommerce-product-gallery img,
.single-product .wp-block-woocommerce-product-image img,
.single-product .wc-block-components-product-image img,
.single-product .wp-block-image img,
.single-product .wp-post-image,
.single-product img.attachment-woocommerce_single,
.single-product img.attachment-shop_single {
	display: block;
	width: 320px !important;
	max-width: 100% !important;
	height: auto !important;
	background: transparent !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
}

/* Same treatment for related-product image tiles, so the placeholders below
   don't get a similar rectangle around them. */
.single-product .related .wp-block-woocommerce-product-image,
.single-product .related .wc-block-components-product-image,
.single-product .related .wp-block-image,
.single-product .related figure {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* Nuclear option: strip every border/outline/shadow off any wrapper around an
   image on the single-product page. Catches whatever block class we hadn't
   anticipated (and there are several — block themes ship custom border styles
   via theme.json that target figure/.wp-block-image). */
.single-product figure,
.single-product figure *,
.single-product img,
.single-product [class*="product-image"],
.single-product [class*="product-image"] *,
.single-product [class*="gallery"],
.single-product [class*="gallery"] * {
	border: 0 !important;
	border-color: transparent !important;
	border-width: 0 !important;
	border-style: none !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}

/* Title and price live in the same column but inherit different left-edge
   offsets from the block theme. Pin both to the column's left edge. */
.single-product .wp-block-post-title,
.single-product .wp-block-woocommerce-product-title,
.single-product .wp-block-woocommerce-product-price,
.single-product .wc-block-components-product-price,
.single-product .wc-block-grid__product-price,
.single-product .wp-block-post-excerpt,
.single-product .wp-block-woocommerce-product-summary {
	margin-left: 0 !important;
	padding-left: 0 !important;
	text-align: left !important;
}
.single-product .wp-block-woocommerce-product-price,
.single-product .wc-block-components-product-price {
	display: block !important;
	width: 100% !important;
}

/* ---------- Layout: account wrapper + My Account 2-column ---------- */
.md-account-wrap {
	max-width: 1200px !important;
	margin: 0 auto;
	padding: clamp(16px, 3vw, 32px) 24px clamp(48px, 8vw, 80px);
}
/* Defeat block-theme's is-layout-flow children max-width (theme.json contentSize
   would cap inner content at 768px otherwise). */
.md-account-wrap > .wp-block-post-content,
.md-account-wrap .wp-block-post-content,
.md-account-wrap .wp-block-post-content > *,
.md-account-wrap > * {
	max-width: 100% !important;
}
.md-account-wrap .woocommerce,
.md-account-wrap .woocommerce > * {
	max-width: 100% !important;
	width: auto;
}

/* My Account 2-column: nav left, content right (only when logged in — when
   logged out, Woo shows the login + register forms in u-columns instead). */
.woocommerce-account.logged-in .md-account-wrap .woocommerce {
	display: grid !important;
	grid-template-columns: 240px 1fr;
	gap: 32px;
	align-items: start;
}
.woocommerce-account.logged-in .md-account-wrap .woocommerce::before,
.woocommerce-account.logged-in .md-account-wrap .woocommerce::after { display: none; }

/* Kill Woo legacy floats that ship in woocommerce-layout.css. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none !important;
	width: auto !important;
}

@media (max-width: 720px) {
	.woocommerce-account.logged-in .md-account-wrap .woocommerce {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* ---------- My Account: sidebar nav ---------- */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-MyAccount-navigation a {
	display: block;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text2);
	background: var(--surf2);
	border: 1px solid var(--border);
	border-radius: var(--r-control);
	padding: 10px 14px;
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.woocommerce-MyAccount-navigation a:hover {
	color: var(--text);
	border-color: var(--accent2);
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--is-active a {
	color: var(--accent-text);
	background: var(--accent);
	border-color: var(--accent);
}

/* ---------- My Account: content panel ---------- */
.woocommerce-MyAccount-content {
	background: var(--surf2);
	border: 1px solid var(--border2);
	border-radius: var(--r-frame);
	box-shadow: var(--shadow-frame);
	padding: 28px;
	color: var(--text);
}
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
	font-family: var(--mono);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	margin: 0 0 16px;
}
.woocommerce-MyAccount-content p { color: var(--text); margin-bottom: 1em; }
.woocommerce-MyAccount-content a { color: var(--accent2); }
.woocommerce-MyAccount-content a:hover { color: var(--accent); }

/* ---------- Forms (login, register, address, payment) ---------- */
.woocommerce form.woocommerce-form,
.woocommerce form.checkout,
.woocommerce form.lost_reset_password,
.woocommerce form.edit-account {
	background: var(--surf2);
	border: 1px solid var(--border2);
	border-radius: var(--r-frame);
	padding: 28px;
	color: var(--text);
}

.woocommerce form .form-row {
	display: block;
	margin: 0 0 16px;
}
.woocommerce form .form-row label {
	display: block;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text2);
	margin: 0 0 6px;
}
.woocommerce form .form-row label .required { color: var(--text3); margin-left: 4px; }

/* Inputs are "punched into" the card surface — background matches the page bg, so
   inputs feel inset rather than raised. Border is hairline, focus is a quiet accent. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	width: 100%;
	background: var(--bg);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: var(--r-control);
	padding: 10px 12px;
	font-family: var(--body);
	font-size: 14px;
	line-height: 1.4;
	transition: border-color var(--dur) var(--ease);
}
.woocommerce form .form-row input.input-text::placeholder,
.woocommerce form .form-row textarea::placeholder {
	color: var(--text3);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: none;
	border-color: var(--accent2);
}

.woocommerce form .form-row .woocommerce-input-wrapper { display: block; width: 100%; }

/* Two-column layouts: login+register on /account/, and Billing+Shipping on
   /account/edit-address/. Both use Woo's .u-columns / .col2-set markup. */
.woocommerce .u-columns,
.woocommerce-account .u-columns,
.woocommerce .col2-set,
.woocommerce-account .col2-set,
.woocommerce-account .addresses {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin: 0 0 24px;
	float: none !important;
	width: 100% !important;
}
.woocommerce .u-columns::before,
.woocommerce .u-columns::after,
.woocommerce .col2-set::before,
.woocommerce .col2-set::after,
.woocommerce-account .addresses::before,
.woocommerce-account .addresses::after { display: none; }

@media (max-width: 720px) {
	.woocommerce .u-columns,
	.woocommerce-account .u-columns,
	.woocommerce .col2-set,
	.woocommerce-account .col2-set,
	.woocommerce-account .addresses { grid-template-columns: 1fr; }
}
.woocommerce .u-column1,
.woocommerce .u-column2,
.woocommerce .col-1,
.woocommerce .col-2,
.woocommerce-account .col-1,
.woocommerce-account .col-2 {
	width: auto !important;
	float: none !important;
	max-width: 100% !important;
}
.woocommerce h2.u-column1-h2,
.woocommerce h2.u-column2-h2,
.woocommerce-account h2 {
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent2);
	margin: 0 0 14px;
}

/* Address cards (Billing / Shipping) */
.woocommerce-Address {
	background: var(--surf2);
	border: 1px solid var(--border2);
	border-radius: var(--r-frame);
	padding: 24px;
	box-shadow: var(--shadow-frame);
}
.woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	border-bottom: 1px solid var(--border);
	padding-bottom: 12px;
	margin-bottom: 14px;
}
.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	font-family: var(--mono);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--accent2);
	margin: 0;
}
.woocommerce-Address-title .edit {
	font-family: var(--mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--text2);
	border: 1px solid var(--border);
	padding: 4px 10px;
	border-radius: var(--r-control);
}
.woocommerce-Address-title .edit:hover {
	color: var(--text);
	border-color: var(--accent2);
}
.woocommerce-Address address {
	font-style: normal;
	font-family: var(--mono);
	font-size: 13px;
	line-height: 1.6;
	color: var(--text);
	margin: 0;
}

/* Remember-me + "Lost your password" link */
.woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 8px; }
.woocommerce-form-login__rememberme input { accent-color: var(--accent); }
.woocommerce-LostPassword a { color: var(--accent2); font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- Buttons (Woo overrides our .md-btn convention) ---------- */
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce-page button.button,
.woocommerce-page a.button,
.woocommerce-page input.button {
	display: inline-block;
	font-family: var(--mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--text);
	background: var(--surf3);
	border: 1px solid var(--border);
	padding: 12px 20px;
	border-radius: var(--r-control);
	cursor: pointer;
	transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
	text-decoration: none;
}
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover {
	border-color: var(--accent2);
	color: var(--text);
}
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce button[type="submit"] {
	background: var(--accent);
	color: var(--accent-text);
	border-color: var(--accent);
}
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce button[type="submit"]:hover {
	background: color-mix(in srgb, var(--accent) 85%, white);
	border-color: var(--accent2);
}

/* ---------- Tables (orders, downloads, address book, cart) ---------- */
.woocommerce table.shop_table {
	background: var(--surf2);
	border: 1px solid var(--border2);
	border-radius: var(--r-frame);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	margin: 0 0 20px;
	color: var(--text);
}
.woocommerce table.shop_table thead { background: var(--surf3); }
.woocommerce table.shop_table th {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text2);
	text-align: left;
	padding: 12px 16px;
	border: 0;
	border-bottom: 1px solid var(--border);
}
.woocommerce table.shop_table td {
	padding: 14px 16px;
	border: 0;
	border-top: 1px solid var(--border);
	color: var(--text);
	font-size: 13px;
}
.woocommerce table.shop_table tbody tr:first-child td { border-top: 0; }
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
	background: var(--surf3);
	border-top: 1px solid var(--border);
}

/* ---------- Notices (success / info / error) ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper > div {
	background: var(--surf2);
	border: 1px solid var(--border2);
	border-left-width: 3px;
	border-radius: var(--r-control);
	color: var(--text);
	padding: 12px 16px;
	margin: 0 0 16px;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 12px;
}
.woocommerce-message  { border-left-color: var(--green); }
.woocommerce-info     { border-left-color: var(--accent); }
.woocommerce-error    { border-left-color: var(--red); }
.woocommerce-message a, .woocommerce-info a, .woocommerce-error a { color: var(--accent2); }
.woocommerce-message a:hover, .woocommerce-info a:hover, .woocommerce-error a:hover { color: var(--accent); }

/* ---------- WC Block-based Checkout / Cart -----------------------------
   The Cart and Checkout pages use Woo's React-rendered block components, which
   ship with their own light-theme CSS. We override them into the MeterDesk
   dark theme. Selectors prefixed `.wc-block-` are the block-components system. */

/* Page wrappers */
.wc-block-checkout,
.wc-block-cart {
	color: var(--text);
}

/* Two-column checkout: form left, order summary right */
.wp-block-woocommerce-checkout.wc-block-checkout {
	background: transparent;
}
.wc-block-checkout__main {
	background: var(--surf2);
	border: 1px solid var(--border2);
	border-radius: var(--r-frame);
	padding: 28px;
	box-shadow: var(--shadow-frame);
}
.wc-block-checkout__sidebar,
.wp-block-woocommerce-checkout-order-summary-block {
	background: var(--surf2);
	border: 1px solid var(--border2);
	border-radius: var(--r-frame);
	padding: 24px;
	box-shadow: var(--shadow-frame);
}

/* Section titles */
.wc-block-components-checkout-step__title,
.wc-block-components-title {
	font-family: var(--mono) !important;
	font-size: 13px !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: var(--accent2) !important;
	font-weight: 400 !important;
}
.wc-block-components-checkout-step__description {
	color: var(--text2) !important;
}

/* Text inputs (email, name, address, city, postcode, …) — labels pinned to the
   top, classic-form style. Disables Woo's floating-label animation which was
   leaving label + value overlapping. */
.wc-block-components-text-input,
.wc-block-components-select,
.wc-block-components-textarea {
	margin-bottom: 14px;
	display: flex;
	flex-direction: column;
	position: relative;
}
.wc-block-components-text-input label,
.wc-block-components-select label,
.wc-block-components-textarea label {
	position: static !important;
	transform: none !important;
	top: auto !important;
	left: auto !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
	background: transparent !important;
	color: var(--text2) !important;
	font-family: var(--mono) !important;
	font-size: 11px !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	pointer-events: auto !important;
	max-width: none !important;
	order: -1;
}
.wc-block-components-text-input input,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-textarea textarea,
.wc-block-components-select select,
input.wc-block-components-text-input__input {
	background: var(--bg) !important;
	color: var(--text) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--r-control) !important;
	padding: 11px 12px !important;
	font-family: var(--body) !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	box-shadow: none !important;
	transition: border-color var(--dur) var(--ease);
}
.wc-block-components-text-input input::placeholder,
.wc-block-components-textarea textarea::placeholder {
	color: var(--text3) !important;
	opacity: 1;
}
.wc-block-components-text-input input:focus,
.wc-block-components-text-input input:focus-visible,
.wc-block-components-textarea textarea:focus,
.wc-block-components-select select:focus {
	outline: none !important;
	border-color: var(--accent2) !important;
	box-shadow: none !important;
}

/* Checkboxes (e.g. Use shipping as billing) + radio (payment method choice) */
.wc-block-components-checkbox__input,
.wc-block-components-radio-control__input {
	accent-color: var(--accent);
}
.wc-block-components-checkbox__label,
.wc-block-components-radio-control__label {
	color: var(--text) !important;
	font-family: var(--body) !important;
	font-size: 14px !important;
}

/* Payment-method tiles — flex layout so the radio circle + label + logo never
   overlap. Padding on the left makes room for the radio so the text starts
   after it, not on top of it. */
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
	background: var(--surf3) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--r-control) !important;
	padding: 14px 16px 14px 44px !important;
	margin-bottom: 8px;
	display: flex !important;
	align-items: center;
	gap: 12px;
	position: relative;
}
.wc-block-components-radio-control__input,
.wc-block-components-radio-control-accordion-option input[type="radio"] {
	position: absolute !important;
	left: 14px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	margin: 0 !important;
	accent-color: var(--accent);
	width: 16px;
	height: 16px;
}
.wc-block-components-radio-control__label,
.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option-content {
	flex: 1;
	min-width: 0;
	color: var(--text) !important;
	font-family: var(--body) !important;
	font-size: 14px !important;
	line-height: 1.3;
}
.wc-block-components-radio-control-accordion-option.is-selected,
.wc-block-components-radio-control__option--checked {
	border-color: var(--accent) !important;
	background: var(--surf2) !important;
}

/* Mollie Components credit-card fields. Mollie's own stylesheet sets the field
   labels (Name on card, Card number, …) to #222, which is unreadable on our
   dark checkout surface. Recolour just the labels; the input boxes stay white
   with dark text (Mollie's styling) so they remain legible. */
.mollie-component-label,
.mollie-components .mollie-component-label {
	color: var(--text) !important;
}
.mollie-components-description {
	color: var(--text2);
}

/* Order summary line items + totals */
.wc-block-components-order-summary-item__description,
.wc-block-components-order-summary-item__quantity,
.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
	color: var(--text) !important;
}
.wc-block-components-totals-item {
	border-bottom: 1px solid var(--border);
	padding: 12px 0;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--mono) !important;
	font-size: 18px !important;
	color: var(--text) !important;
}

/* Primary CTA (Place order, Proceed) — match our .md-btn--primary */
.wc-block-components-button,
.wc-block-components-checkout-place-order-button,
button.wp-element-button {
	background: var(--accent) !important;
	color: var(--accent-text) !important;
	border: 1px solid var(--accent) !important;
	border-radius: var(--r-control) !important;
	font-family: var(--mono) !important;
	font-size: 11px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	padding: 14px 24px !important;
	box-shadow: none !important;
	transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease) !important;
}
.wc-block-components-button:hover,
.wc-block-components-checkout-place-order-button:hover,
button.wp-element-button:hover {
	background: color-mix(in srgb, var(--accent) 85%, white) !important;
	border-color: var(--accent2) !important;
}

/* Inline notices in the checkout form */
.wc-block-components-notice-banner,
.wc-block-components-validation-error {
	background: var(--surf2) !important;
	color: var(--text) !important;
	border: 1px solid var(--border2) !important;
	border-left-width: 3px !important;
	border-radius: var(--r-control) !important;
}
.wc-block-components-notice-banner.is-error,
.wc-block-components-validation-error { border-left-color: var(--red) !important; }
.wc-block-components-notice-banner.is-success { border-left-color: var(--green) !important; }
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-warning { border-left-color: var(--accent) !important; }

/* Mini-cart drawer (when Woo's mini-cart block is used) */
.wc-block-mini-cart__drawer,
.wc-block-components-drawer__content {
	background: var(--surf2) !important;
	color: var(--text);
	border-left: 1px solid var(--border2) !important;
}

/* ---------- Empty / status states ---------- */
.woocommerce-Message--info,
.cart-empty {
	background: var(--surf2);
	border: 1px solid var(--border2);
	border-radius: var(--r-frame);
	padding: 28px;
	text-align: center;
	color: var(--text2);
}