/* ==========================================================================
   Certified Bling — WooCommerce Blocks + account forms
   Styles the parts of the store woocommerce.css never reached: the Cart and
   Checkout blocks (WooCommerce Blocks — these pages use
   <!-- wp:woocommerce/cart --> / <!-- wp:woocommerce/checkout -->, not
   shortcodes), and the classic My Account / login / register / address /
   orders markup. Same visual language as the rest of the site: rectangular,
   no radius, mono-uppercase labels, hairline borders, invert-on-hover.

   Scope: colour/typography/spacing only. WooCommerce Blocks' own responsive
   CSS (columns → stacked below its internal breakpoint) is left alone —
   nothing here changes layout structure, only how it looks.

   Loaded after woocommerce.css wherever that one loads (see inc/assets.php).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Page container — Cart / Checkout / My Account are regular Pages
   (page.php → .entry--page, max-width 46rem). That width was sized for blog-
   style reading copy, not a two-column cart/checkout layout — at 46rem the
   Cart and Checkout blocks never have room to lay out side-by-side and render
   permanently "mobile-stacked" even on desktop. Widen the container only on
   these three page types; every other page keeps its 46rem reading width.
   -------------------------------------------------------------------------- */
body.woocommerce-cart .entry--page,
body.woocommerce-checkout .entry--page {
	max-width: var(--cb-wide);
}
body.woocommerce-account .entry--page {
	max-width: 64rem;
}
body.woocommerce-cart .entry__title,
body.woocommerce-checkout .entry__title,
body.woocommerce-account .entry__title {
	font-size: var(--cb-text-2xl);
}

/* WooCommerce core's own inline "required" asterisk color (a saturated
   `red`) — tone it to the same error tone used everywhere else on the site. */
.woocommerce .required,
.woocommerce-page .required {
	color: var(--cb-error-on-dark);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   1. Shared primitives reused across Blocks + classic markup
   -------------------------------------------------------------------------- */

/* Base text field look, applied to every kind of input WooCommerce renders. */
.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-address-form input,
.wc-block-components-form input[type="text"],
.wc-block-components-form input[type="email"],
.wc-block-components-form input[type="tel"],
.woocommerce-Input,
.woocommerce form .input-text,
.woocommerce-page form .input-text,
.woocommerce form select,
.woocommerce-page form select,
.select2-container .select2-selection--single {
	/* !important: WooCommerce's own core CSS targets these same fields with a
	   more specific selector (e.g. ".woocommerce form .form-row input.input-text")
	   and would otherwise win the cascade and force them back to a plain white
	   HTML input. */
	background-color: var(--cb-ink) !important;
	color: var(--cb-white) !important;
	border: 1px solid var(--cb-line-soft) !important;
	border-radius: 0 !important;
	font-family: var(--cb-font-body);
	font-size: var(--cb-text-base);
	padding: 0.85em 1em;
	line-height: 1.3;
	transition: border-color var(--cb-transition);
	appearance: none;
	-webkit-appearance: none;
}
.woocommerce form select,
.woocommerce-page form select {
	background-image: linear-gradient(45deg, transparent 50%, var(--cb-mute) 50%),
		linear-gradient(135deg, var(--cb-mute) 50%, transparent 50%);
	background-position: calc(100% - 1.3em) center, calc(100% - 1em) center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 2.5em;
}
input::placeholder, textarea::placeholder { color: var(--cb-mute); opacity: 1; }

.wc-block-components-text-input input:focus,
.wc-block-components-address-form input:focus,
.wc-block-components-form input:focus,
.woocommerce-Input:focus,
.woocommerce form .input-text:focus,
.woocommerce form select:focus {
	/* No outline:none here — the site-wide :focus-visible ring (style.css)
	   must keep working for keyboard users; this only adds a border cue. */
	border-color: var(--cb-white) !important;
}

/* Classic form labels (Login/Account/Address — static, never animated) — mono,
   uppercase, quiet, matching the rest of the site. WC Blocks' own floating
   labels (Checkout) are deliberately left alone: they animate between a
   placeholder position and a floated caption via transform:scale(), already
   read cleanly in a quiet sentence-case gray, and forcing a different font/
   case onto a scaling element risks the label's width miscalculating mid-
   animation for no visible benefit — not a bug, just a different (and fine)
   native component. */
.woocommerce-form-row label,
.woocommerce-form__label {
	font-family: var(--cb-font-mono);
	font-size: var(--cb-text-2xs);
	text-transform: uppercase;
	letter-spacing: var(--cb-tracking-label);
	color: var(--cb-mute);
}

/* Checkboxes — WC Blocks (“Save this information…”) and classic
   (“Remember me”). Square, rectangular, no radius; checked = inverted fill. */
.wc-block-components-checkbox__input,
.woocommerce-form__input-checkbox {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border: 1px solid var(--cb-line-soft);
	border-radius: 0;
	background: var(--cb-ink);
	display: inline-block;
	vertical-align: middle;
	position: relative;
	cursor: pointer;
}
.wc-block-components-checkbox__input:checked,
.woocommerce-form__input-checkbox:checked {
	background: var(--cb-white);
	border-color: var(--cb-white);
}
.wc-block-components-checkbox__input:checked::after,
.woocommerce-form__input-checkbox:checked::after {
	content: "";
	position: absolute;
	left: 5px; top: 1px;
	width: 5px; height: 10px;
	border: solid var(--cb-black);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.wc-block-components-checkbox__mark { display: none; } /* WC's own SVG check — replaced by ::after above */

/* Buttons — the .wc-block-components-button family (Cart, Checkout, Place
   order, Apply coupon…). Same shape/voice as .cb-btn. */
.wc-block-components-button,
.wc-block-components-totals-coupon__button {
	--_bg: var(--cb-white);
	--_fg: var(--cb-black);
	--_bd: var(--cb-white);
	font-family: var(--cb-font-mono) !important;
	font-size: var(--cb-text-xs) !important;
	font-weight: 400 !important;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	border-radius: 0 !important;
	background: var(--_bg) !important;
	color: var(--_fg) !important;
	border: 1px solid var(--_bd) !important;
	box-shadow: none !important;
	padding-block: 0.9em !important;
	transition: background var(--cb-transition), color var(--cb-transition), border-color var(--cb-transition);
}
.wc-block-components-button:hover:not(:disabled):not([aria-disabled="true"]),
.wc-block-components-totals-coupon__button:hover:not(:disabled) {
	background: transparent !important;
	color: var(--cb-white) !important;
	border-color: var(--cb-white) !important;
}
.wc-block-components-button.is-outlined,
.wc-block-components-button--outlined {
	--_bg: transparent;
	--_fg: var(--cb-white);
	--_bd: color-mix(in srgb, var(--cb-white) 45%, transparent);
}
.wc-block-components-button.is-outlined:hover,
.wc-block-components-button--outlined:hover {
	background: var(--cb-white) !important;
	color: var(--cb-black) !important;
	border-color: var(--cb-white) !important;
}
.wc-block-components-button:disabled,
.wc-block-components-button[aria-disabled="true"] {
	opacity: 0.4 !important;
	cursor: not-allowed;
}
.wc-block-components-button .wc-block-components-spinner {
	border-color: currentColor transparent currentColor transparent;
}

/* --------------------------------------------------------------------------
   2. Notices — WC Blocks' own banner component (Cart/Checkout errors,
   coupon-applied confirmations, shipping/payment errors) and classic
   .woocommerce-* messages are handled in woocommerce.css; this covers the
   Blocks variant which renders directly on the dark canvas.
   -------------------------------------------------------------------------- */
.wc-block-components-notice-banner {
	border: 1px solid var(--cb-line-soft);
	border-left-width: 3px;
	border-radius: 0;
	background: var(--cb-ink);
	color: var(--cb-white);
	font-size: var(--cb-text-sm);
	padding: 1em 1.2em;
}
.wc-block-components-notice-banner.is-error {
	border-left-color: var(--cb-error-on-dark);
}
.wc-block-components-notice-banner.is-error .wc-block-components-notice-banner__icon {
	fill: var(--cb-error-on-dark);
}
.wc-block-components-notice-banner.is-success {
	border-left-color: var(--cb-white);
}
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-warning {
	border-left-color: var(--cb-mute);
}
.wc-block-components-notice-banner .wc-block-components-button {
	--_bg: transparent;
	--_fg: var(--cb-white);
	--_bd: var(--cb-line-soft);
}

/* Field-level validation text under an invalid input. */
.wc-block-components-validation-error,
.wc-block-components-validation-error p {
	color: var(--cb-error-on-dark);
	font-size: var(--cb-text-xs);
	margin-top: 0.4em;
}
.wc-block-components-text-input.has-error input,
[aria-invalid="true"] {
	border-color: var(--cb-error-on-dark) !important;
}

/* Classic notice list used inside the WC Blocks tree for global cart/checkout
   errors (e.g. "please fix the errors below"). */
.wc-block-components-notices {
	margin-bottom: var(--cb-space-m);
}

/* --------------------------------------------------------------------------
   3. Cart block
   -------------------------------------------------------------------------- */
.wp-block-woocommerce-cart {
	color: var(--cb-white);
}
.wc-block-cart-items {
	border-top: 1px solid var(--cb-line-soft);
}
.wc-block-cart-items__header {
	font-family: var(--cb-font-mono);
	font-size: var(--cb-text-2xs);
	text-transform: uppercase;
	letter-spacing: var(--cb-tracking-label);
	color: var(--cb-mute);
}
.wc-block-cart-items__row {
	border-bottom: 1px solid var(--cb-line-soft);
}
.wc-block-cart-item__image img {
	border-radius: 0;
	background: var(--cb-paper);
}
.wc-block-cart-item__product-name,
.wc-block-components-product-name {
	font-family: var(--cb-font-mono);
	font-size: var(--cb-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cb-white);
	text-decoration: none;
}
a.wc-block-components-product-name:hover { opacity: 0.6; }
.wc-block-cart-item__prices,
.wc-block-components-product-price {
	font-family: var(--cb-font-mono);
	color: var(--cb-white);
}
.wc-block-components-product-metadata,
.wc-block-components-product-details,
.wc-block-components-product-details__name,
.wc-block-components-product-details__value {
	font-size: var(--cb-text-xs);
	color: var(--cb-mute);
}
.wc-block-cart-item__remove-link,
.wc-block-cart-item__wc-item-remove {
	font-family: var(--cb-font-mono);
	font-size: var(--cb-text-2xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cb-mute) !important;
	border-bottom: 1px solid transparent;
}
.wc-block-cart-item__remove-link:hover { color: var(--cb-white) !important; border-color: var(--cb-white); }

/* Quantity stepper */
.wc-block-components-quantity-selector {
	border: 1px solid var(--cb-line-soft);
	border-radius: 0;
	background: transparent;
}
.wc-block-components-quantity-selector__input {
	background: transparent;
	color: var(--cb-white);
	font-family: var(--cb-font-mono);
	border: 0;
}
.wc-block-components-quantity-selector__button {
	background: transparent;
	color: var(--cb-white);
	border-radius: 0;
}
.wc-block-components-quantity-selector__button:hover:not(:disabled) {
	background: var(--cb-line-soft);
}
.wc-block-components-quantity-selector__button:disabled {
	opacity: 0.3;
}

/* Order summary / totals sidebar */
.wc-block-components-totals-wrapper {
	border-top: 1px solid var(--cb-line-soft);
}
.wc-block-components-totals-item {
	color: var(--cb-white);
}
.wc-block-components-totals-item__label {
	font-family: var(--cb-font-mono);
	font-size: var(--cb-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cb-mute);
}
.wc-block-components-totals-item__value {
	font-family: var(--cb-font-mono);
	color: var(--cb-white);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--cb-white);
	font-size: var(--cb-text-lg);
	text-transform: none;
	letter-spacing: 0;
	font-family: var(--cb-font-display);
	font-weight: 700;
}

/* Coupon — collapsed link that reveals a bordered input row */
.wc-block-components-totals-coupon-link {
	font-family: var(--cb-font-mono);
	font-size: var(--cb-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cb-white);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.wc-block-components-totals-coupon__content {
	padding-top: var(--cb-space-s);
}
.wc-block-components-totals-coupon__button {
	padding-inline: 1.4em !important;
}

.wc-block-cart__submit-container,
.wc-proceed-to-checkout {
	margin-top: var(--cb-space-m);
}

/* Empty cart — replace the default illustrated glyph with the site's plain
   editorial voice (no emoji-style icon; restrained, on-brand). */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	display: none;
}
.wc-block-cart__empty-cart__title {
	font-family: var(--cb-font-display) !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--cb-tracking-tight);
	font-size: var(--cb-text-xl) !important;
	line-height: 1.1 !important;
	color: var(--cb-white);
	padding-top: 0 !important;
}
.wp-block-woocommerce-empty-cart-block hr {
	border-top: 1px solid var(--cb-line-soft);
	opacity: 1;
}
.wp-block-woocommerce-empty-cart-block .wp-block-heading:not(.wc-block-cart__empty-cart__title) {
	font-size: var(--cb-text-lg);
	margin-top: var(--cb-space-l);
}

/* --------------------------------------------------------------------------
   4. Checkout block
   -------------------------------------------------------------------------- */
.wc-block-checkout__main {
	border-right: 0;
}
.wc-block-components-checkout-step {
	border-top: 1px solid var(--cb-line-soft);
	padding-block: var(--cb-space-l);
}
.wc-block-components-checkout-step:first-child {
	border-top: 0;
	padding-top: 0;
}
.wc-block-components-checkout-step__title {
	font-family: var(--cb-font-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--cb-tracking-tight);
	font-size: var(--cb-text-lg);
	color: var(--cb-white);
}
.wc-block-components-checkout-step__description {
	color: var(--cb-mute);
	font-size: var(--cb-text-sm);
}
.wc-block-components-checkout-step__heading-content .wc-block-components-checkout-step__badge {
	background: var(--cb-white);
	color: var(--cb-black);
	border-radius: 0;
	font-family: var(--cb-font-mono);
}

/* Shipping + payment method lists — radio rows */
.wc-block-components-radio-control__option {
	border: 1px solid var(--cb-line-soft);
	border-radius: 0;
	background: transparent;
	padding: 1em 1.1em;
	margin-bottom: -1px; /* collapse hairlines between stacked options */
}
.wc-block-components-radio-control__option.wc-block-components-radio-control__option-checked {
	border-color: var(--cb-white);
	position: relative;
	z-index: 1;
}
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option-layout {
	color: var(--cb-white);
}
.wc-block-components-radio-control__input {
	accent-color: var(--cb-white);
}
.wc-block-components-radio-control__label,
.wc-block-components-payment-method-label {
	font-family: var(--cb-font-body);
	color: var(--cb-white);
}
.wc-block-components-radio-control__secondary-label,
.wc-block-components-radio-control__description {
	font-family: var(--cb-font-mono);
	font-size: var(--cb-text-xs);
	color: var(--cb-mute);
}
.wc-block-components-payment-method-icons {
	filter: grayscale(1) contrast(1.1) brightness(1.4);
	opacity: 0.85;
}

/* Order summary panel in the checkout sidebar */
.wc-block-components-order-summary {
	border-top: 1px solid var(--cb-line-soft);
	padding-top: var(--cb-space-m);
}
.wc-block-components-order-summary-item__quantity {
	background: var(--cb-line-soft);
	color: var(--cb-white);
	border-radius: 0;
	font-family: var(--cb-font-mono);
}
.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-order-summary-item__total-price {
	font-family: var(--cb-font-mono);
	color: var(--cb-white);
}

/* --------------------------------------------------------------------------
   5. My Account — classic markup (login, registration, dashboard,
   address forms, account navigation, order tables)
   -------------------------------------------------------------------------- */
.woocommerce-form-row,
.form-row {
	margin-bottom: var(--cb-space-s);
}
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-EditAccountForm,
.woocommerce-address-fields {
	max-width: 32rem;
}
.woocommerce-form-login__rememberme,
.woocommerce-form-register__rememberme {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--cb-font-mono);
	font-size: var(--cb-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cb-mute);
}
.woocommerce-LostPassword {
	font-family: var(--cb-font-mono);
	font-size: var(--cb-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.woocommerce-LostPassword a { text-decoration: underline; text-underline-offset: 0.2em; }

/* Password reveal toggle (classic login/register/lost-password forms) */
.woocommerce form .show-password-input {
	background: transparent;
	border: 0;
}
.woocommerce form .password-input { position: relative; }

/* Account navigation — vertical, mono labels, current state underlined. No
   boxed "tabs" look. */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--cb-line-soft);
}
.woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--cb-line-soft);
}
.woocommerce-MyAccount-navigation-link a {
	display: block;
	padding-block: 0.9em;
	font-family: var(--cb-font-mono);
	font-size: var(--cb-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cb-mute);
}
.woocommerce-MyAccount-navigation-link a:hover { color: var(--cb-white); }
.woocommerce-MyAccount-navigation-link.is-active a {
	color: var(--cb-white);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}
.woocommerce-MyAccount-content { margin-top: var(--cb-space-l); }

@media (min-width: 900px) {
	.woocommerce-MyAccount-navigation { float: left; width: 15rem; }
	.woocommerce-MyAccount-content { float: right; width: calc(100% - 17rem); margin-top: 0; }
}

/* Addresses screen — the theme's global h1-h4 rule (style.css) made the
   "Billing/Shipping address" <h2> a block element, which broke WooCommerce's
   float-based title+edit-link header (the "Add address" link dropped to its
   own line instead of sitting beside the heading). Force it back to a row
   regardless of what either side floats. */
.woocommerce-Address-title {
	/* Stacked, not a space-between row — the address columns are narrow
	   enough (two-up) that heading + "Add/Edit address" link rarely both fit
	   on one line at any width, so stacking is the layout that never wraps
	   awkwardly. */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35em;
}
.woocommerce-Address-title h2 {
	margin: 0;
	font-size: var(--cb-text-lg);
}
.woocommerce-Address-title .edit {
	font-family: var(--cb-font-mono);
	font-size: var(--cb-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cb-mute);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	white-space: nowrap;
}
.woocommerce-Address-title .edit:hover { color: var(--cb-white); }
.woocommerce-Addresses address {
	font-style: normal;
	color: var(--cb-mute);
}

/* Order tables (order history + single-order line items) */
.woocommerce-orders-table,
.woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--cb-text-sm);
}
.woocommerce-orders-table thead th,
.woocommerce-table--order-details thead th {
	font-family: var(--cb-font-mono);
	font-size: var(--cb-text-2xs);
	text-transform: uppercase;
	letter-spacing: var(--cb-tracking-label);
	color: var(--cb-mute);
	text-align: left;
	padding: 0.75em 0.5em;
	border-bottom: 1px solid var(--cb-line-soft);
}
.woocommerce-orders-table tbody td,
.woocommerce-table--order-details tbody td {
	padding: 0.9em 0.5em;
	border-bottom: 1px solid var(--cb-line-soft);
	color: var(--cb-white);
}
.woocommerce-orders-table__cell-order-status mark {
	background: none;
	color: var(--cb-mute);
	font-family: var(--cb-font-mono);
	font-size: var(--cb-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.woocommerce-orders-table__cell-order-actions .button {
	margin: 0.15em 0.15em 0.15em 0;
}
.woocommerce-order-overview {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--cb-space-m) var(--cb-space-l);
	padding: 0;
	margin: 0 0 var(--cb-space-l);
	border-top: 1px solid var(--cb-line-soft);
	border-bottom: 1px solid var(--cb-line-soft);
	padding-block: var(--cb-space-m);
}
.woocommerce-order-overview__label {
	display: block;
	font-family: var(--cb-font-mono);
	font-size: var(--cb-text-2xs);
	text-transform: uppercase;
	letter-spacing: var(--cb-tracking-label);
	color: var(--cb-mute);
}
.woocommerce-customer-details address {
	font-style: normal;
	border: 1px solid var(--cb-line-soft);
	padding: 1em 1.2em;
}

/* --------------------------------------------------------------------------
   6. Mobile — let WC Blocks' own stacking do the work; only tighten spacing
   and keep the wide container from earlier from forcing horizontal scroll.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.wc-block-components-checkout-step { padding-block: var(--cb-space-m); }
	.woocommerce-orders-table thead { display: none; }
	.woocommerce-orders-table tbody td {
		display: flex;
		justify-content: space-between;
		gap: var(--cb-space-s);
	}
	.woocommerce-orders-table tbody td::before {
		content: attr(data-title);
		font-family: var(--cb-font-mono);
		font-size: var(--cb-text-2xs);
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: var(--cb-mute);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wc-block-components-button,
	.wc-block-cart-item__remove-link,
	.wc-block-components-quantity-selector__button {
		transition: none;
	}
}