/*
 * DevArtStore — WooCommerce block components.
 *
 * WooCommerce's cart, checkout, mini-cart and add-to-cart components ship their own
 * hard-coded field colours (#fff, #2b2d2f) and 4px radii that theme.json cannot reach.
 * This file maps them back onto theme.json presets. Do not put raw colours or font
 * names here: change the palette / font families in theme.json instead.
 *
 * Selectors are prefixed with `html body` (and a doubled class where needed) so they
 * beat WooCommerce's own specificity regardless of stylesheet load order.
 */

:root {
	--das-field-bg: var(--wp--preset--color--surface);
	--das-field-border: var(--wp--preset--color--contrast-2);
	--das-field-text: var(--wp--preset--color--contrast);
	--das-field-label: var(--wp--preset--color--contrast-2);
	--das-rule: var(--wp--preset--color--line);
}

/* ------------------------------------------------------------------
 * 1. Form fields
 * ------------------------------------------------------------------ */

html body .wc-block-components-text-input.wc-block-components-text-input input:is([type="text"], [type="email"], [type="tel"], [type="number"], [type="password"], [type="url"], [type="date"]),
html body .wc-blocks-components-select.wc-blocks-components-select .wc-blocks-components-select__select,
html body .wc-block-components-textarea.wc-block-components-textarea,
html body .wc-block-components-combobox.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input,
html body .wp-block-woocommerce-add-to-cart-form .quantity input.qty,
html body .wp-block-woocommerce-add-to-cart-form table.variations select,
html body .wp-block-woocommerce-catalog-sorting select.orderby,
html body .wp-block-search .wp-block-search__input,
html body .woocommerce form .form-row :is(input.input-text, textarea, select) {
	background-color: var(--das-field-bg);
	border: 1px solid var(--das-field-border);
	border-radius: 0;
	box-shadow: none;
	color: var(--das-field-text);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem; /* 16px minimum stops iOS zooming into fields */
}

html body .wc-block-components-text-input.wc-block-components-text-input input:is([type="text"], [type="email"], [type="tel"], [type="number"], [type="password"], [type="url"], [type="date"]):focus,
html body .wc-blocks-components-select.wc-blocks-components-select .wc-blocks-components-select__select:focus,
html body .wc-block-components-textarea.wc-block-components-textarea:focus,
html body .wc-block-components-combobox.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input:focus,
html body .wp-block-woocommerce-add-to-cart-form .quantity input.qty:focus,
html body .wp-block-woocommerce-add-to-cart-form table.variations select:focus,
html body .wp-block-woocommerce-catalog-sorting select.orderby:focus,
html body .wp-block-search .wp-block-search__input:focus {
	background-color: var(--das-field-bg);
	border-color: var(--wp--preset--color--contrast);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--contrast);
	color: var(--das-field-text);
	outline: 2px solid transparent;
}

/* Floating labels and helper text inside checkout fields. */
html body .wc-block-components-text-input label,
html body .wc-blocks-components-select .wc-blocks-components-select__label,
html body .wc-block-components-combobox .wc-block-components-combobox-control label {
	color: var(--das-field-label);
	font-family: var(--wp--preset--font-family--body);
}

/* Select chevrons inherit text colour. */
html body .wc-blocks-components-select .wc-blocks-components-select__expand {
	fill: var(--das-field-text);
}

/* Validation errors use the accent rather than WooCommerce's default red. */
html body .wc-block-components-validation-error,
html body .has-error .wc-block-components-text-input label {
	color: var(--wp--preset--color--accent);
}
html body .wc-block-components-text-input.has-error input {
	border-color: var(--wp--preset--color--accent) !important;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent) !important;
}

/* Checkboxes and radios. */
html body .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	background-color: var(--das-field-bg);
	border-color: var(--das-field-border);
	border-radius: 0;
}
html body .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
}
html body .wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: var(--wp--preset--color--base);
}
html body .wc-block-components-radio-control .wc-block-components-radio-control__input {
	background-color: var(--das-field-bg);
	border-color: var(--das-field-border);
}
html body .wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before {
	background: var(--wp--preset--color--contrast);
}
html body .wc-block-components-radio-control--highlight-checked::after,
html body .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
html body .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted {
	border-radius: 0;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--contrast);
}
html body .wc-block-components-radio-control--highlight-checked {
	border-radius: 0;
}
html body .wc-block-components-radio-control--highlight-checked::after {
	border-color: var(--das-rule);
}

/* Quantity stepper in cart / mini-cart. */
html body .wc-block-components-quantity-selector.wc-block-components-quantity-selector {
	border-radius: 0;
	background: var(--das-field-bg);
}
html body .wc-block-components-quantity-selector.wc-block-components-quantity-selector::after {
	border-color: var(--das-field-border);
	border-radius: 0;
}
html body .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	color: var(--das-field-text);
	font-family: var(--wp--preset--font-family--mono);
}
html body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	color: var(--das-field-text);
}

/* ------------------------------------------------------------------
 * 2. Buttons — WooCommerce adds .wp-element-button, so theme.json's button
 *    element styles apply. These rules only undo WooCommerce's radius/colour
 *    overrides inside its components.
 * ------------------------------------------------------------------ */

html body .wc-block-components-button:not(.is-link).wp-element-button,
html body .wp-block-woocommerce-add-to-cart-form .single_add_to_cart_button.wp-element-button,
html body .wc-block-mini-cart__footer-actions .wc-block-components-button.wp-element-button {
	border-radius: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	letter-spacing: 0.02em;
}

/* Secondary (outlined) buttons: mini-cart "View cart", etc. */
html body .wc-block-components-button.outlined.wp-element-button,
html body .wc-block-components-button.is-style-outline .wp-element-button,
html body .wc-block-mini-cart__footer-cart.wc-block-components-button.wp-element-button {
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--contrast);
	box-shadow: none;
	color: var(--wp--preset--color--contrast);
}
html body .wc-block-components-button.outlined.wp-element-button:hover,
html body .wc-block-mini-cart__footer-cart.wc-block-components-button.wp-element-button:hover {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Product-card button: full width under the card, quieter outline style. */
html body .wp-block-woocommerce-product-button .wp-block-button__link.wp-element-button {
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
	width: 100%;
}
html body .wp-block-woocommerce-product-button .wp-block-button__link.wp-element-button:hover,
html body .wp-block-woocommerce-product-button .wp-block-button__link.wp-element-button:focus-visible {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}
html body .wp-block-woocommerce-product-button .added_to_cart {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--accent);
}

/* ------------------------------------------------------------------
 * 3. Prices and money — always mono, ink colour.
 * ------------------------------------------------------------------ */

html body .wc-block-components-product-price,
html body .wc-block-components-formatted-money-amount,
html body .wc-block-components-totals-item__value,
html body .wc-block-mini-cart__amount,
html body .wp-block-woocommerce-add-to-cart-form .woocommerce-variation-price .price,
html body .wc-block-components-product-metadata__description + .wc-block-components-product-price {
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--contrast);
}
html body :is(.wc-block-components-product-price, .wp-block-woocommerce-product-price) del {
	color: var(--wp--preset--color--contrast-2);
	opacity: 1;
}
html body :is(.wc-block-components-product-price, .wp-block-woocommerce-product-price) ins {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}
html body .wc-block-components-sale-badge,
html body .wc-block-components-product-badge {
	background: var(--wp--preset--color--base-2);
	border: 0;
	border-radius: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------
 * 4. Cart & checkout layout
 * ------------------------------------------------------------------ */

html body :is(.wc-block-cart, .wc-block-checkout) {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
}

/* Section headings ("Contact information", "Order summary", "Cart totals"). */
html body .wc-block-components-title.wc-block-components-title,
html body .wc-block-components-checkout-step__title,
html body .wc-block-cart__totals-title.wc-block-cart__totals-title,
html body .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title-text {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	text-transform: none;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
}
html body .wc-block-cart__totals-title.wc-block-cart__totals-title {
	font-size: var(--wp--preset--font-size--large);
}
html body .wc-block-components-checkout-step__description,
html body .wc-block-components-product-metadata,
html body .wc-block-components-totals-item__description,
html body .wc-block-components-address-card {
	color: var(--wp--preset--color--contrast-2);
}

/* Table header row of the cart ("Product", "Total"). */
html body table.wc-block-cart-items .wc-block-cart-items__header {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--contrast-2);
}

/* Hairlines use the theme's rule colour instead of 20% currentColor. */
html body :is(
	table.wc-block-cart-items .wc-block-cart-items__row,
	table.wc-block-cart-items .wc-block-cart-items__header,
	.wc-block-components-totals-wrapper,
	.wc-block-components-order-summary-item,
	.wc-block-components-panel,
	.wp-block-woocommerce-checkout-order-summary-block,
	.wc-block-checkout__actions,
	.wc-block-components-checkout-order-summary__title
) {
	border-color: var(--das-rule) !important;
}
html body .wp-block-woocommerce-checkout-order-summary-block {
	border-radius: 0;
}

/* Product names in line items. */
html body .wc-block-components-product-name {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	text-decoration: none;
}
html body a.wc-block-components-product-name:hover {
	color: var(--wp--preset--color--accent);
}
html body .wc-block-cart-item__remove-link,
html body .wc-block-components-totals-coupon-link,
html body .wc-block-components-checkout-return-to-cart-button {
	color: var(--wp--preset--color--contrast-2) !important;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small) !important;
}

/* Order-summary thumbnails: square, no radius. */
html body .wc-block-components-order-summary-item__image img,
html body .wc-block-cart-item__image img {
	border-radius: 0;
	aspect-ratio: 1;
	object-fit: cover;
}
html body .wc-block-components-order-summary-item__quantity {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--mono);
	box-shadow: none;
}

/* Notices. */
html body .wc-block-components-notice-banner {
	border-radius: 0;
	font-family: var(--wp--preset--font-family--body);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
}

/* Phone width: give the cart/checkout breathing room and stack the summary cleanly. */
@media (max-width: 699px) {
	html body .wc-block-cart .wc-block-cart__sidebar,
	html body .wc-block-checkout .wc-block-checkout__sidebar {
		margin-top: var(--wp--preset--spacing--40);
	}
	html body .wc-block-components-sidebar-layout.wc-block-components-sidebar-layout {
		margin-left: 0;
		margin-right: 0;
	}
	html body .wc-block-components-sidebar-layout .wc-block-components-main,
	html body .wc-block-components-sidebar-layout .wc-block-components-sidebar {
		padding-left: 0;
		padding-right: 0;
	}
	html body .wp-block-woocommerce-checkout-order-summary-block {
		margin-left: 0;
		margin-right: 0;
	}
	/* Sticky "Proceed to checkout" bar on phones: paper background, not white. */
	html body .wc-block-cart__submit-container--sticky {
		background: var(--wp--preset--color--base);
		border-top: 1px solid var(--das-rule);
	}
	html body .wc-block-cart__submit-container--sticky::before {
		display: none;
	}
}

/* ------------------------------------------------------------------
 * 5. Mini-cart (header button + drawer)
 * ------------------------------------------------------------------ */

html body .wc-block-mini-cart__button {
	color: var(--wp--preset--color--contrast);
	padding: 0.25em;
}
html body .wc-block-mini-cart__button:hover:not([disabled]) {
	opacity: 1;
	color: var(--wp--preset--color--accent);
}
html body .wc-block-mini-cart__badge {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
}
html body .wc-block-mini-cart__drawer .components-modal__content,
html body .wc-block-mini-cart__drawer .wc-block-mini-cart__template-part,
html body .wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-contents {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}
html body .wc-block-mini-cart__title,
html body .wp-block-woocommerce-mini-cart-title-block {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--large);
}
html body .wc-block-mini-cart__footer {
	border-top: 1px solid var(--das-rule);
}
html body .wc-block-mini-cart__footer::after {
	display: none;
}
html body .wc-block-mini-cart__empty-cart-wrapper .wc-block-mini-cart__shopping-button {
	text-align: center;
}

/* ------------------------------------------------------------------
 * 6. Shop: product cards, filters, sorting
 * ------------------------------------------------------------------ */

html body .wc-block-components-product-image img,
html body .wp-block-woocommerce-product-image img {
	border-radius: 0;
	background: var(--wp--preset--color--base-2);
}

/* Card titles: tighter rhythm than article headings. */
html body .wc-block-product .wp-block-post-title {
	margin-top: var(--wp--preset--spacing--30);
	margin-bottom: 0.25rem;
	line-height: 1.25;
}
html body .wc-block-product .wp-block-woocommerce-product-price {
	margin-top: 0;
}

/* Category / price filter. */
html body .wp-block-woocommerce-product-filters {
	font-size: var(--wp--preset--font-size--small);
}
html body .wp-block-woocommerce-product-filters h3 {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
}
html body .wc-block-product-filter-checkbox-list__input-wrapper::before,
html body .wc-block-product-filter-checkbox-list__input {
	border-radius: 0 !important;
}
html body .wc-block-product-filter-checkbox-list__input:checked {
	background: var(--wp--preset--color--contrast) !important;
	border-color: var(--wp--preset--color--contrast) !important;
}
html body .wc-block-product-filter-checkbox-list__count {
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--contrast-2);
}
html body .wc-block-product-filters__open-overlay {
	background: transparent;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	padding: 0.6rem 1rem;
}
html body .wc-block-product-filters__overlay-dialog {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}
html body .wc-block-product-filters__overlay-footer {
	border-color: var(--das-rule);
	box-shadow: none;
}
html body .wc-block-product-filter-removable-chips__item {
	border-radius: 0;
	border-color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
}
html body .wc-block-product-filter-price-slider .text input[type="text"] {
	border-radius: 0;
	border-color: var(--das-field-border);
	background: var(--das-field-bg);
	font-family: var(--wp--preset--font-family--mono);
}
html body .wc-block-product-filter-price-slider input[type="range"]::-webkit-slider-thumb {
	background: var(--wp--preset--color--contrast);
}

/* ------------------------------------------------------------------
 * 7. Single product
 * ------------------------------------------------------------------ */

/* Variation picker (classic add-to-cart form). */
html body .wp-block-woocommerce-add-to-cart-form table.variations {
	margin-bottom: var(--wp--preset--spacing--30);
	border: 0;
}
html body .wp-block-woocommerce-add-to-cart-form table.variations :is(th, td) {
	display: block;
	padding: 0;
	text-align: left;
	border: 0;
	background: none;
}
html body .wp-block-woocommerce-add-to-cart-form table.variations th.label label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
}
html body .wp-block-woocommerce-add-to-cart-form table.variations select {
	width: 100%;
	max-width: 22rem;
	min-height: 3rem;
	padding: 0 2.5rem 0 0.875rem;
	margin: 0.4rem 0 0.75rem;
}
html body .wp-block-woocommerce-add-to-cart-form .reset_variations {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-2);
}
html body .wp-block-woocommerce-add-to-cart-form .woocommerce-variation-price {
	font-size: var(--wp--preset--font-size--large);
	margin-bottom: var(--wp--preset--spacing--20);
}
html body .wp-block-woocommerce-add-to-cart-form :is(form.cart, .woocommerce-variation-add-to-cart) {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.75rem;
}
html body .wp-block-woocommerce-add-to-cart-form form.variations_form {
	display: block;
}
html body .wp-block-woocommerce-add-to-cart-form .quantity input.qty {
	width: 4.5rem;
	min-height: 3rem;
	height: 100%;
	text-align: center;
	font-family: var(--wp--preset--font-family--mono);
}
html body .wp-block-woocommerce-add-to-cart-form .single_add_to_cart_button.wp-element-button {
	flex: 1 1 12rem;
	min-height: 3rem;
	font-size: var(--wp--preset--font-size--medium);
	margin: 0;
}
html body .wp-block-woocommerce-add-to-cart-form .stock {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-2);
}
html body .wp-block-woocommerce-add-to-cart-form .stock.out-of-stock {
	color: var(--wp--preset--color--accent);
}

/* Gallery. */
html body .wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery {
	margin-bottom: 0;
}
html body .wp-block-woocommerce-product-image-gallery img {
	background: var(--wp--preset--color--base-2);
}
html body .wp-block-woocommerce-product-image-gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.5rem;
	margin-top: 0.5rem;
}
html body .wp-block-woocommerce-product-image-gallery .flex-control-thumbs li {
	width: auto !important;
	margin: 0 !important;
}
html body .wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery__trigger {
	border-radius: 0;
	background: var(--wp--preset--color--base);
}

/* Single product: keep the buy column readable on wide screens. */
html body .das-product-summary {
	max-width: 34rem;
}

/* Downloads / account tables. */
html body .woocommerce table.shop_table {
	border-radius: 0;
	border-color: var(--das-rule);
}