/*
 * WP Definitivo: store presentation.
 *
 * Loaded only while WooCommerce is active, right after style.css. Store page
 * styles (cart, checkout, account, product) load after this file.
 */

/* WooCommerce's general stylesheet, loaded on every page after the theme's,
   still hides screen reader text with the deprecated clip property, which
   style.css no longer uses. A focused skip link would stay clipped, so focus
   undoes it. */
.screen-reader-text:focus {
	clip: auto;
}

/* WooCommerce's block-theme stylesheet fixes these selects at height: 3em
   while padding them by .9em top and bottom, which leaves 1.2em for a line
   that needs about 1.33em and clips descenders. Letting the control size
   itself keeps the label whole; min-height above still guards the target. */
.wp-site-blocks .woocommerce table.variations tr td select {
	height: auto;
}

.wpdef-product-card {
	border: 1px solid var(--wp--preset--color--content-border);
	border-radius: 0.75rem;
	box-shadow: 0 0.625rem 1.75rem color-mix(in srgb, var(--wp--preset--color--foreground) 7%, transparent);
	overflow: hidden;
}

.woocommerce span.onsale {
	background-color: var(--wp--preset--color--error);
	border-radius: 0.375rem;
	color: var(--wp--preset--color--white);
	font-weight: 700;
	line-height: 1.25;
	min-height: 2.75rem;
	min-width: 2.75rem;
	padding: 0.625rem;
}

/* Columns stretch their children by default, which left the filter panel
   drawn down the whole height of the results grid. */
.wpdef-store-layout > .wpdef-store-sidebar {
	align-self: start;
}

.wpdef-store-sidebar .wc-block-product-filters {
	gap: var(--wp--preset--spacing--50);
	width: 100%;
}

.wpdef-store-sidebar .wc-block-product-filters__open-overlay {
	background-color: var(--wp--preset--color--accent);
	border-radius: 0.5rem;
	color: var(--wp--preset--color--white);
	font-weight: 600;
	justify-content: center;
	min-height: 3rem;
	padding: 0.625rem 1rem;
	width: 100%;
}

.wpdef-store-sidebar .wc-block-product-filters__close-overlay {
	min-height: 2.75rem;
}

/* Off-screen transforms alone leave the closed WooCommerce drawer tabbable.
 * Keep the desktop filters and blocks without a drawer available. Up to
 * WooCommerce 11.1 the drawer starts at 600px; from 11.2 it marks the block
 * with is-mobile-overlay and starts at 782px. */

@media (max-width: 600px) {
	.wc-block-product-filters:not(.is-overlay-opened) .wc-block-product-filters__overlay {
		visibility: hidden;
	}
}

@media (max-width: 782px) {
	.wc-block-product-filters.is-mobile-overlay:not(.is-overlay-opened) .wc-block-product-filters__overlay {
		visibility: hidden;
	}
}

/* The theme's generic fieldset rule is written for forms. WooCommerce renders
   each filter group as a fieldset, so that frame followed it into the sidebar,
   where the titles and spacing already separate the groups. */
.wpdef-store-sidebar fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

/* Each filter group already carries its own name in a legend, localised and
   correct for whichever taxonomy or attribute the store has, but WooCommerce
   marks it screen-reader-only. Revealing it beats hard-coding titles that
   could not know an attribute's name. The utility pins itself with an
   important declaration, so undoing it needs one too. */
.wpdef-store-sidebar legend.screen-reader-text:not(.wpdef-store-categories legend) {
	clip: auto;
	clip-path: none;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static !important;
	white-space: normal;
	width: auto;
}

.wpdef-store-sidebar .wc-block-product-filter-checkbox-list__items {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The whole row is the target, so it carries the theme's 44-pixel height. */
.wpdef-store-sidebar .wc-block-product-filter-checkbox-list__label {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 0.625rem;
	min-height: 2.75rem;
	padding: 0.25rem 0.5rem;
	border-radius: 0.25rem;
}

/* WooCommerce derives the box colour from the palette at runtime, which lands
   almost white against this panel. The theme states the colours instead. */
.wpdef-store-sidebar input.wc-block-product-filter-checkbox-list__input {
	-webkit-appearance: none;
	appearance: none;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0.3125rem;
	flex-shrink: 0;
	height: 1.25rem;
	margin: 0;
	min-height: 0;
	padding: 0;
	width: 1.25rem;
}

.wpdef-store-sidebar input.wc-block-product-filter-checkbox-list__input:checked {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

.wpdef-store-sidebar .wc-block-product-filter-checkbox-list__label:hover input.wc-block-product-filter-checkbox-list__input:not(:checked) {
	border-color: var(--wp--preset--color--accent);
}

.wpdef-store-sidebar .wc-block-product-filter-checkbox-list__mark {
	color: var(--wp--preset--color--white);
}

.wpdef-store-sidebar .wc-block-product-filter-checkbox-list__text {
	color: var(--wp--preset--color--foreground);
	overflow-wrap: anywhere;
}

/* The selected span of the slider defaults to currentColor, which takes the
   body text colour, and outside it the track is transparent. Naming the
   accent and adding a track gives the control a start and an end. */
.wpdef-store-sidebar .wc-block-product-filter-price-slider__range {
	--range-color: var(--wp--preset--color--accent);

	background-color: var(--wp--preset--color--border-subtle);
	border-radius: 999px;
}

/* WooCommerce caps the price fields at 60px beside an empty middle column,
   which cut values from four digits. Each field takes half the row instead,
   with the text size and spacing of the other fields. */
.wpdef-store-sidebar .wc-block-product-filter-price-slider__content:not(.wc-block-product-filter-price-slider__content--inline) {
	grid-template-areas: "price-slider price-slider" "left-input right-input";
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wpdef-store-sidebar .wc-block-product-filter-price-slider .text input[type="text"] {
	font-size: 0.875rem;
	max-width: none;
	padding: 0.625rem;
	width: 100%;
}

/* Visible labels the theme adds above the minimum and maximum price fields,
   far enough above them to stay clear of the field's focus ring. */
.wc-block-product-filter-price-slider .wpdef-price-filter__label {
	color: var(--wp--preset--color--muted);
	display: block;
	font-size: 0.8125rem;
	line-height: 1.4;
	margin-bottom: 0.5rem;
}

/* The two range inputs have no height and WooCommerce removes their outline,
   so the theme's focus shadow drew a thick band over the track and the handle
   only changed colour. The focused handle gets the store's 2px outline, with
   its white border as the gap. */
:is(.wp-site-blocks) .wc-block-product-filter-price-slider__range input[type="range"]:focus-visible {
	box-shadow: none;
}

:is(.wp-site-blocks) .wc-block-product-filter-price-slider__range input[type="range"]:focus-visible::-webkit-slider-thumb {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--white);
	box-shadow: 0 0 0 2px var(--wp--preset--color--secondary);
}

:is(.wp-site-blocks) .wc-block-product-filter-price-slider__range input[type="range"]:focus-visible::-moz-range-thumb {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--white);
	box-shadow: 0 0 0 2px var(--wp--preset--color--secondary);
}

/* Forced colours drop the gradient that draws the track and the shadow that
   marks the focused handle, so system colours draw both. */
@media (forced-colors: active) {
	.wpdef-store-sidebar .wc-block-product-filter-price-slider__range {
		--range-color: CanvasText;

		background-color: transparent;
		forced-color-adjust: none;
	}

	:is(.wp-site-blocks) .wc-block-product-filter-price-slider__range input[type="range"]:focus-visible::-webkit-slider-thumb {
		background: Highlight;
		border-color: Canvas;
		box-shadow: 0 0 0 2px Highlight;
	}

	:is(.wp-site-blocks) .wc-block-product-filter-price-slider__range input[type="range"]:focus-visible::-moz-range-thumb {
		background: Highlight;
		border-color: Canvas;
		box-shadow: 0 0 0 2px Highlight;
	}
}

.wpdef-store-toolbar {
	align-items: center;
	border: 1px solid var(--wp--preset--color--content-border);
	border-radius: 0.75rem;
	column-gap: var(--wp--preset--spacing--40);
	margin-block-end: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30);
	row-gap: var(--wp--preset--spacing--20);
}

/* A vertical list, not a pill row: a store with many long category names
   pushed the pills into four wrapped lines and buried the result count.
   The list item is the row, so the count stays beside the name instead of
   wrapping under it, and hover and current cover the whole row. */
.wpdef-store-categories .wc-block-product-categories-list {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wpdef-store-categories .wc-block-product-categories-list-item-count {
	color: var(--wp--preset--color--muted);
	flex-shrink: 0;
	font-size: var(--wp--preset--font-size--small);
}

/* The open archive is filled and bolder, so the state does not rest on colour
   alone, and aria-current states it for assistive technology. */
.wpdef-store-categories .wc-block-product-categories-list-item:has(> a[aria-current="page"]) {
	background-color: var(--wp--preset--color--accent);
	font-weight: 600;
}

.wpdef-store-categories__all {
	background-color: var(--wp--preset--color--soft);
	border: 1px solid var(--wp--preset--color--content-border);
	font-weight: 600;
	margin-block-end: var(--wp--preset--spacing--20);
}

.wpdef-store-categories .wc-block-product-categories-list-item > a {
	align-content: center;
	min-height: 2.75rem;
	overflow-wrap: anywhere;
}

.wpdef-store-toolbar__meta {
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	max-width: 100%;
	min-width: 0;
}

.wpdef-store-toolbar__meta .woocommerce-result-count {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

/* The theme adds a visible label before the sorting select. */
.woocommerce-ordering:has(.wpdef-catalog-sorting__label) {
	align-items: center;
	column-gap: 0.5rem;
	display: flex;
	flex-wrap: wrap;
}

.wpdef-catalog-sorting__label {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	white-space: nowrap;
}

.wpdef-product-card {
	--wpdef-icon-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 3a1 1 0 0 1 1-1h1.5a2 2 0 0 1 1.94 1.5L6.7 5H21a1 1 0 0 1 .97 1.24l-1.8 7.2A2.5 2.5 0 0 1 17.75 15H9.1a2.5 2.5 0 0 1-2.42-1.9L4.44 4H3a1 1 0 0 1-1-1Z'/%3E%3Ccircle cx='9.5' cy='19.5' r='1.8'/%3E%3Ccircle cx='17.5' cy='19.5' r='1.8'/%3E%3C/svg%3E");
	--wpdef-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.3 4.3a1 1 0 0 1 1.4 0l7 7a1 1 0 0 1 0 1.4l-7 7a1 1 0 0 1-1.4-1.4l5.3-5.3H4a1 1 0 1 1 0-2h13.6l-5.3-5.3a1 1 0 0 1 0-1.4Z'/%3E%3C/svg%3E");
	--wpdef-icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 11 13'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E");

	display: flex;
	flex-direction: column;
	height: 100%;
}

.wpdef-product-card:focus-within {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px var(--wp--preset--color--soft);
}

/* The media sits flush against the card edges; the rounded corners come from
   the card's own overflow, so the image itself carries no radius. */
.wpdef-product-card__media {
	margin: 0;
	position: relative;
}

.wpdef-product-card__media img {
	aspect-ratio: 1 / 1;
	border-radius: 0;
	display: block;
	object-fit: cover;
	width: 100%;
}

/* A small white pill with the label in the Error colour, so the sale shows without
   competing with the photo. The outer badge carries the pill, because its own
   background would otherwise clip a radius set on the inner label. */
.wpdef-product-card__media .wc-block-components-product-sale-badge {
	background-color: var(--wp--preset--color--white);
	border: 0;
	border-radius: 999px;
	box-shadow: 0 1px 3px color-mix(in srgb, var(--wp--preset--color--foreground) 18%, transparent);
	inset-block-start: var(--wp--preset--spacing--20);
	inset-inline-start: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0.125rem 0.5rem;
	position: absolute;
}

.wpdef-product-card__media .wc-block-components-product-sale-badge__text {
	color: var(--wp--preset--color--error);
	display: block;
	font-size: 0.75rem;
	font-weight: 650;
	letter-spacing: 0;
	line-height: 1.4;
	text-transform: none;
}

.wpdef-product-card__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--30);
}

.wpdef-product-card__category {
	color: var(--wp--preset--color--muted);
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
}

.wpdef-product-card__category a {
	color: inherit;
	text-decoration: none;
}

/* The card title is a heading that names the whole card rather than a link
   inside running text, so it carries no resting underline. */
.wpdef-product-card__title {
	margin-block: 0;
}

.wpdef-product-card__title a {
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
}

.wpdef-product-card__title a:visited {
	color: var(--wp--preset--color--foreground);
}

/* One step above the card title. The large preset jumps straight to 2rem,
   which would make the price outshout the product it belongs to. The single
   product page keeps its own larger size. */
.wpdef-product-card__price ins {
	font-size: 1.375rem;
}

.wpdef-product-card .wpdef-product-card__body > .wpdef-product-card__action {
	align-self: stretch;
	margin-block-start: auto;
	width: 100%;
}

.wpdef-product-card__action {
	padding-block-start: var(--wp--preset--spacing--20);
}

/* Product actions turn a lighter blue on hover, with no movement or shadow.
   The lighter tone keeps white text at 5:1. Keyboard focus keeps the button
   colour and shows the theme's two-colour ring. */
:is(.wp-site-blocks, .editor-styles-wrapper) .wpdef-product-card .wpdef-product-card__action :is(.wp-block-button__link, .wc-block-components-product-button__button):hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--secondary) 85%, var(--wp--preset--color--white));
	border-color: color-mix(in srgb, var(--wp--preset--color--secondary) 85%, var(--wp--preset--color--white));
	color: var(--wp--preset--color--white);
}

:is(.wp-site-blocks, .editor-styles-wrapper) .wpdef-product-card .wpdef-product-card__action :is(.wp-block-button__link, .wc-block-components-product-button__button):focus-visible {
	box-shadow: 0 0 0 6px var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

.wp-site-blocks .wpdef-product-card__action button::before {
	-webkit-mask: var(--wpdef-icon-cart) center / contain no-repeat;
	mask: var(--wpdef-icon-cart) center / contain no-repeat;
}

.wp-site-blocks .wpdef-product-card__action a::after {
	-webkit-mask: var(--wpdef-icon-arrow) center / contain no-repeat;
	mask: var(--wpdef-icon-arrow) center / contain no-repeat;
}

/* An external product's link opens in a new tab, which its name tells
   screen readers; the external link icon shows it too. */
.wp-site-blocks .wpdef-product-card__action a[target="_blank"]::after {
	-webkit-mask-image: var(--wpdef-icon-external);
	mask-image: var(--wpdef-icon-external);
}

.wp-site-blocks .wpdef-product-card__action .added_to_cart.wc_forward {
	align-items: center;
	background-color: var(--wp--preset--color--soft);
	border: 1px solid var(--wp--preset--color--content-border);
	border-radius: 0.5rem;
	box-sizing: border-box;
	color: var(--wp--preset--color--accent);
	display: flex;
	font-size: 0.8125rem;
	font-weight: 600;
	gap: 0.45rem;
	justify-content: center;
	line-height: 1.25;
	margin: 0.375rem 0 0;
	min-height: 2.5rem;
	padding: 0.5rem 0.75rem;
	text-decoration: none;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
	width: 100%;
}

.wp-site-blocks .wpdef-product-card__action .added_to_cart.wc_forward:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Grouped products: make each selectable product a clear, scannable row. */
.wp-block-woocommerce-add-to-cart-form form.cart.grouped_form {
	max-width: 100%;
	width: 100%;
}

.wp-block-woocommerce-add-to-cart-form .woocommerce-grouped-product-list {
	border-collapse: separate;
	border-spacing: 0;
	margin-block: var(--wp--preset--spacing--30);
	width: 100%;
}

.wp-block-woocommerce-add-to-cart-form .woocommerce-grouped-product-list td {
	border-block-end: 1px solid var(--wp--preset--color--content-border);
	padding-block: var(--wp--preset--spacing--30);
	vertical-align: middle;
}

.wp-block-woocommerce-add-to-cart-form .woocommerce-grouped-product-list tr:first-child td {
	border-block-start: 1px solid var(--wp--preset--color--content-border);
}

.wp-block-woocommerce-add-to-cart-form .woocommerce-grouped-product-list-item__quantity {
	padding-inline-end: var(--wp--preset--spacing--30);
	width: 5.5rem;
}

.wp-block-woocommerce-add-to-cart-form .woocommerce-grouped-product-list-item__quantity .quantity {
	margin: 0;
}

.wp-block-woocommerce-add-to-cart-form .woocommerce-grouped-product-list-item__label {
	padding-inline-end: var(--wp--preset--spacing--30);
}

.wp-block-woocommerce-add-to-cart-form .woocommerce-grouped-product-list-item__label a {
	font-weight: 700;
}

.wp-block-woocommerce-add-to-cart-form .woocommerce-grouped-product-list-item__price {
	min-width: 8.5rem;
	text-align: end;
	white-space: nowrap;
}

.wp-block-woocommerce-add-to-cart-form .woocommerce-grouped-product-list-item__price .stock {
	margin-block: var(--wp--preset--spacing--10) 0;
	white-space: normal;
}

.wp-block-woocommerce-add-to-cart-form .grouped_form > .single_add_to_cart_button {
	margin-block-start: var(--wp--preset--spacing--20);
}

@media (max-width: 40rem) {

	.wp-block-woocommerce-add-to-cart-form .woocommerce-grouped-product-list tr {
		border-block-start: 1px solid var(--wp--preset--color--content-border);
		padding-block: var(--wp--preset--spacing--30);
	}

	.wp-block-woocommerce-add-to-cart-form .woocommerce-grouped-product-list tr:last-child {
		border-block-end: 1px solid var(--wp--preset--color--content-border);
	}

	.wp-block-woocommerce-add-to-cart-form .woocommerce-grouped-product-list-item__quantity {
		margin-block-end: var(--wp--preset--spacing--20);
		width: auto;
	}

	.wp-block-woocommerce-add-to-cart-form .woocommerce-grouped-product-list-item__label {
		padding-inline-end: 0;
	}

	.wp-block-woocommerce-add-to-cart-form .woocommerce-grouped-product-list-item__price {
		margin-block-start: var(--wp--preset--spacing--10);
		min-width: 0;
		text-align: start;
	}
}

/* Keep a closed WooCommerce drawer from enlarging the page canvas. */
:where(.wc-block-components-drawer__screen-overlay--is-hidden) .wc-block-mini-cart__drawer {
	display: none;
}

/* Catalog layout: a light editorial banner, category shortcuts and compact cards. */
.wpdef-main--store {
	background-color: var(--wp--preset--color--white);
}

.wpdef-store-banner {
	background-color: var(--wp--preset--color--soft);
	background-image: linear-gradient(110deg, var(--wp--preset--color--background) 0%, var(--wp--custom--color--surface-3) 55%, var(--wp--custom--color--line-2) 100%);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin-block: 0;
}

/* The block layout zeroes the bottom margin of every child, so a plain class lost this space and the empty cart touched its banner. */
:is(.wp-site-blocks, .editor-styles-wrapper) :is(.wpdef-store-banner, .wpdef-cart-banner) {
	margin-block-end: var(--wp--preset--spacing--60);
}

.wpdef-store-banner__inner {
	align-content: center;
	min-height: clamp(17rem, 23vw, 22rem);
	padding-block: 2.5rem;
}

.wpdef-store-banner__copy {
	max-width: 42rem;
}

.wpdef-store-banner .wpdef-store-banner__title {
	color: var(--wp--preset--color--foreground);
	font-size: clamp(1.875rem, 3.3vw, 3rem);
	letter-spacing: -0.045em;
	line-height: 1.12;
	margin: 0;
	overflow-wrap: anywhere;
}

.wpdef-store-banner__lead {
	color: var(--wp--custom--color--ink);
	font-size: 1rem;
	line-height: 1.6;
	margin-block: 1rem 0;
	max-width: 26rem;
}

.wpdef-store-banner .wc-block-breadcrumbs {
	font-size: 0.8125rem;
	margin-block: 0 1rem;
}

.wpdef-store-explore {
	margin-block: 2rem;
	scroll-margin-top: 1rem;
}

.wpdef-store-explore__title {
	font-size: 1.25rem;
	margin: 0 0 1rem;
}

.wpdef-store-category-tiles {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}

.wpdef-store-category-tiles__all > a::after,
.wpdef-store-category-tiles .wc-block-product-categories-list-item > a::after,
.wpdef-store-category-tiles .cat-item > a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.wpdef-store-category-tiles .wc-block-product-categories-list-item-count,
.wpdef-store-category-tiles .wpdef-term-count {
	align-items: center;
	background: var(--wp--custom--color--surface-2);
	border-radius: 999px;
	color: var(--wp--preset--color--accent);
	display: inline-flex;
	font-size: 0.75rem;
	font-weight: 700;
	justify-content: center;
	line-height: 1;
	min-width: 1.5rem;
	padding: 0.25rem 0.375rem;
}

.wpdef-store-category-tiles .wc-block-product-categories-list-item:has([aria-current="page"]) .wc-block-product-categories-list-item-count,
.wpdef-store-category-tiles .cat-item:has([aria-current="page"]) .wpdef-term-count {
	background: color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
	color: inherit;
}

.wpdef-main--store .wpdef-store-layout {
	align-items: flex-start;
	margin-block-start: 2rem;
}

/* The 15rem sidebar grows with the text, and from 782px core keeps columns on
   one line, so with text-only zoom the results shrank to a sliver beside it.
   The results now wrap below the sidebar when they cannot keep 20rem. */
@media (min-width: 782px) {
	.wpdef-main--store .wp-block-columns.wpdef-store-layout {
		flex-wrap: wrap !important;
	}

	.wpdef-main--store .wp-block-columns.wpdef-store-layout > .wp-block-column.wpdef-store-results {
		flex: 1 1 20rem;
	}
}

.wpdef-main--store .wpdef-store-results {
	min-width: 0;
}

.wpdef-main--store .wpdef-store-toolbar {
	background: transparent;
	border: 0;
	border-radius: 0;
	gap: 0.75rem;
	margin: 0 0 1rem;
	min-height: 2.75rem;
	padding: 0;
}

.wpdef-store-toolbar .woocommerce-result-count {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	margin: 0;
}

.wpdef-store-toolbar :is(.wc-block-catalog-sorting, .woocommerce-ordering, select) {
	font-size: 0.8125rem;
	margin: 0;
	max-width: 100%;
	min-width: 0;
}

/* The product search results show their sorting outside the store toolbar.
   With wider text spacing, Chrome widened the select to its longest option,
   past the edge of a narrow screen. */
.wpdef-main--store :is(.wc-block-catalog-sorting, .woocommerce-ordering, .woocommerce-ordering select) {
	max-width: 100%;
	min-width: 0;
}

.wpdef-store-toolbar select {
	border-color: var(--wp--preset--color--border);
	padding-block: 0.5rem;
}

.wpdef-main--store .wpdef-store-sidebar {
	font-size: 0.875rem;
}

.wpdef-main--store .wpdef-store-sidebar .wc-block-product-filters__overlay-content {
	gap: 1.25rem;
}

.wpdef-store-filter-title {
	font-size: 1.0625rem;
	margin: 0;
}

.wpdef-store-price-filter > .wp-block-woocommerce-product-filter-price {
	margin-block-start: 1rem;
}

/* With no priced products WooCommerce hides the price filter; its heading goes with it, also in the open drawer, which WooCommerce sets to show every group. */
.wpdef-store-sidebar .wpdef-store-price-filter:has(> .wp-block-woocommerce-product-filter-price.wc-block-product-filter--hidden) {
	display: none;
}

.wpdef-main--store .wpdef-store-sidebar .wc-block-product-filter-checkbox-list__label {
	border: 1px solid transparent;
	border-radius: 0.5rem;
	font-weight: 400;
	gap: 0.625rem;
	padding: 0.5rem 0.625rem;
}

.wpdef-main--store .wpdef-store-sidebar .wc-block-product-filter-checkbox-list__items {
	gap: 0.25rem;
}

.wpdef-main--store .wpdef-store-sidebar .wc-block-product-filter-checkbox-list__label:hover {
	background: var(--wp--preset--color--background);
}

.wpdef-main--store .wpdef-store-sidebar .wc-block-product-filter-checkbox-list__label:has(input:checked) {
	background: var(--wp--preset--color--soft);
	border-color: var(--wp--custom--color--line-2);
	font-weight: 600;
}

.wpdef-main--store .wpdef-store-sidebar .wc-block-product-filter-checkbox-list__label:has(input:checked) .wc-block-product-filter-checkbox-list__text {
	color: var(--wp--preset--color--accent);
}

.wpdef-main--store .wpdef-store-sidebar .wc-block-product-filter-checkbox-list__count {
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	font-weight: 400;
}

.wpdef-main--store .wpdef-store-sidebar .wc-block-product-filter-checkbox-list__input-wrapper {
	flex: 0 0 1.125rem;
	height: 1.125rem;
	width: 1.125rem;
}

/* Remove WooCommerce's translucent square underneath the styled input. */
.wpdef-main--store .wpdef-store-sidebar .wc-block-product-filter-checkbox-list__input-wrapper::before {
	display: none;
}

.wpdef-main--store .wpdef-store-sidebar input.wc-block-product-filter-checkbox-list__input {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0.3125rem;
	box-shadow: 0 1px 2px color-mix(in srgb, var(--wp--preset--color--accent) 5%, transparent);
	height: 1.125rem;
	width: 1.125rem;
}

.wpdef-main--store .wpdef-store-sidebar input.wc-block-product-filter-checkbox-list__input:checked {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 1px 3px color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent);
}

.wpdef-main--store .wpdef-store-sidebar .wc-block-product-filter-checkbox-list__mark {
	color: var(--wp--preset--color--white);
	height: 1.125rem;
	padding: 0.1875rem;
	width: 1.125rem;
}

.wpdef-main--store .wpdef-store-sidebar input.wc-block-product-filter-checkbox-list__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary);
	outline-offset: 3px;
}

/* Applied filters: compact cards with a separate, clearly targeted remove action. */
.wpdef-store-sidebar .wc-block-product-filter-removable-chips__items {
	display: flex;
	gap: 0.5rem;
	width: 100%;
}

.wpdef-store-sidebar .wc-block-product-filter-removable-chips__items .wc-block-product-filter-removable-chips__item {
	background: var(--wp--preset--color--soft);
	border: 1px solid var(--wp--custom--color--line-2);
	border-radius: 0.625rem;
	color: var(--wp--preset--color--accent);
	display: grid;
	font-size: 0.8125rem;
	gap: 0.5rem;
	grid-template-columns: minmax(0, 1fr) 2.25rem;
	min-width: 0;
	padding: 0.375rem 0.375rem 0.375rem 0.75rem;
	width: 100%;
}

.wpdef-store-sidebar .wc-block-product-filter-removable-chips__label {
	font-weight: 600;
	line-height: 1.5;
	min-width: 0;
	overflow-wrap: anywhere;
}

.wpdef-store-sidebar .wc-block-product-filter-removable-chips__items .wc-block-product-filter-removable-chips__item .wc-block-product-filter-removable-chips__remove {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--custom--color--line-1);
	border-radius: 50%;
	color: var(--wp--preset--color--accent);
	height: 2.25rem;
	justify-content: center;
	min-height: 2.25rem;
	min-width: 2.25rem;
	width: 2.25rem;
}

.wpdef-store-sidebar .wc-block-product-filter-removable-chips__items .wc-block-product-filter-removable-chips__item .wc-block-product-filter-removable-chips__remove:hover {
	background: var(--wp--custom--color--line-1);
	border-color: var(--wp--custom--color--line-4);
}

.wpdef-store-sidebar .wc-block-product-filter-removable-chips__remove:focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary);
	outline-offset: 3px;
}

.wpdef-store-sidebar .wc-block-product-filter-removable-chips__remove-icon {
	height: 1.25rem;
	width: 1.25rem;
}

@media (forced-colors: active) {
	.wpdef-main--store .wpdef-store-sidebar input.wc-block-product-filter-checkbox-list__input {
		appearance: auto;
		box-shadow: none;
	}
	.wpdef-main--store .wpdef-store-sidebar input.wc-block-product-filter-checkbox-list__input:checked + .wc-block-product-filter-checkbox-list__mark {
		display: none;
	}
}

@media (pointer: coarse) {
	.wpdef-store-sidebar .wc-block-product-filter-removable-chips__items .wc-block-product-filter-removable-chips__item {
		grid-template-columns: minmax(0, 1fr) 2.75rem;
	}
	.wpdef-store-sidebar .wc-block-product-filter-removable-chips__items .wc-block-product-filter-removable-chips__item .wc-block-product-filter-removable-chips__remove {
		height: 2.75rem;
		width: 2.75rem;
	}
}

.wpdef-main--store .wpdef-store-categories__all {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--accent);
	font-size: 0.8125rem;
	margin-block-end: 0;
	padding-inline: 0;
}

.wpdef-main--store .wpdef-store-categories > .wpdef-store-categories__all + * {
	margin-block-start: 0.25rem;
}

.wpdef-main--store .wp-block-woocommerce-product-filter-clear-button .wp-block-button__link {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--accent);
	font-size: 0.8125rem;
	padding: 0.5rem 0;
	text-decoration: underline;
}

/* Each breakpoint sets the most columns the grid may use, and a column never
   narrows below 10rem. Larger text, as with Firefox's text-only zoom, drops
   columns instead of squeezing names, prices and buttons; at the default
   size every breakpoint keeps its column count. The 1px keeps rounding from
   dropping a column.
   The Product grid and Store front page patterns get the same grid on any
   page. WooCommerce's own grid keeps its columns at 150px, so larger text
   broke product names mid-word there. In the patterns the number of columns
   set in the editor is the most the grid uses, and a column never narrows
   below 13rem: their titles keep the size of a section heading, larger than
   the store's 15px, and at 200% text a long word no longer fitted 10rem. */
.wpdef-main--store .wp-block-woocommerce-product-collection > .wc-block-product-template,
.wpdef-product-grid .wp-block-woocommerce-product-collection > .wc-block-product-template,
.wp-block-woocommerce-product-collection.wpdef-store-home__collection > .wc-block-product-template {
	--wpdef-grid-columns: var(--wpdef-grid-max, 4);
	--wpdef-grid-gap: 1.25rem;

	display: grid;
	gap: var(--wpdef-grid-gap);
	grid-template-columns: repeat(auto-fill, minmax(max(min(var(--wpdef-grid-min, 10rem), 100%), calc((100% - (var(--wpdef-grid-columns) - 1) * var(--wpdef-grid-gap)) / var(--wpdef-grid-columns) - 1px)), 1fr));
	margin: 0;
}

:is(.wpdef-product-grid .wp-block-woocommerce-product-collection, .wp-block-woocommerce-product-collection.wpdef-store-home__collection) > .wc-block-product-template {
	--wpdef-grid-min: 13rem;
}

:is(.wpdef-product-grid .wp-block-woocommerce-product-collection, .wp-block-woocommerce-product-collection.wpdef-store-home__collection) > .wc-block-product-template.columns-1 {
	--wpdef-grid-max: 1;
}

:is(.wpdef-product-grid .wp-block-woocommerce-product-collection, .wp-block-woocommerce-product-collection.wpdef-store-home__collection) > .wc-block-product-template.columns-2 {
	--wpdef-grid-max: 2;
}

:is(.wpdef-product-grid .wp-block-woocommerce-product-collection, .wp-block-woocommerce-product-collection.wpdef-store-home__collection) > .wc-block-product-template.columns-3 {
	--wpdef-grid-max: 3;
}

:is(.wpdef-product-grid .wp-block-woocommerce-product-collection, .wp-block-woocommerce-product-collection.wpdef-store-home__collection) > .wc-block-product-template.columns-5 {
	--wpdef-grid-max: 5;
}

:is(.wpdef-product-grid .wp-block-woocommerce-product-collection, .wp-block-woocommerce-product-collection.wpdef-store-home__collection) > .wc-block-product-template.columns-6 {
	--wpdef-grid-max: 6;
}

.wpdef-main--store .wpdef-related-products > .wc-block-product-template > li {
	box-sizing: border-box;
	max-width: none;
	min-width: 0;
	width: 100%;
}

.wpdef-main--store .wpdef-related-products__title {
	margin-block: 0 1rem;
}
.wpdef-main--store .wpdef-product-card {
	border: 1px solid var(--wp--custom--color--surface-2);
	border-radius: 0.5rem;
	box-shadow: 0 6px 18px color-mix(in srgb, var(--wp--custom--color--ink) 8%, transparent);
}

.wpdef-main--store .wpdef-product-card__media img {
	aspect-ratio: 4 / 3;
}

.wpdef-main--store .wpdef-product-card__body {
	gap: 0.5rem;
	margin-block-start: 0;
	padding: 0.75rem;
}

.wpdef-main--store .wpdef-product-card__category {
	display: flex;
	flex-wrap: wrap;
	font-size: 0.75rem;
	gap: 0.25rem;
	letter-spacing: 0.035em;
	line-height: 1.5;
	margin: 0;
}

/* Each category is a separate pill, so the comma WordPress places between terms would float between them. */
.wpdef-main--store .wpdef-product-card__category .wp-block-post-terms__separator {
	display: none;
}

.wpdef-main--store .wpdef-product-card__category a {
	background: var(--wp--preset--color--soft);
	border-radius: 0.25rem;
	color: var(--wp--preset--color--accent);
	display: inline-block;
	font-weight: 600;
	padding: 0.25rem 0.5rem;
}

.wpdef-main--store .wpdef-product-card__title {
	font-size: 0.9375rem;
	line-height: 1.4;
}

.wpdef-main--store .wpdef-product-card__price del{
	font-size: 0.75rem;
}

.wpdef-main--store .wpdef-product-card__action {
	padding-block-start: 0.375rem;
}

.wp-site-blocks .wpdef-main--store .wpdef-product-card__action .wp-block-button__link {
	border-radius: 0.375rem;
	font-size: 0.8125rem;
	line-height: 1.35;
	padding: 0.5rem;
}
/* On the store pages the card action is a compact outlined button at the start of
   the card, so the photo, name and price lead. Focus keeps the theme's two-colour
   ring with the button's own blue text, which the shared rule turns white. */
.wpdef-main--store .wpdef-product-card .wpdef-product-card__body > .wpdef-product-card__action {
	align-self: flex-start;
	width: auto;
}
:is(.wp-site-blocks, .editor-styles-wrapper) .wpdef-main--store .wpdef-product-card .wpdef-product-card__action :is(.wp-block-button__link, .wc-block-components-product-button__button) {
	background-color: transparent;
	border: 1px solid var(--wp--custom--color--line-3);
	color: var(--wp--preset--color--accent);
	flex-grow: 0;
	font-weight: 650;
	min-height: 2.25rem;
	padding: 0.375rem 0.875rem;
	width: auto;
}
:is(.wp-site-blocks, .editor-styles-wrapper) .wpdef-main--store .wpdef-product-card .wpdef-product-card__action :is(.wp-block-button__link, .wc-block-components-product-button__button):is(:hover, :focus-visible) {
	background-color: var(--wp--custom--color--surface-2);
	border-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--accent);
}

.wpdef-main--store .wpdef-product-card__media .wc-block-components-product-sale-badge {
	inset-block-start: 0.625rem;
	inset-inline-start: 0.625rem;
}

@media (max-width: 1100px) {
	.wpdef-main--store .wp-block-woocommerce-product-collection > .wc-block-product-template,
	.wpdef-product-grid .wp-block-woocommerce-product-collection > .wc-block-product-template,
	.wp-block-woocommerce-product-collection.wpdef-store-home__collection > .wc-block-product-template {
		--wpdef-grid-columns: min(3, var(--wpdef-grid-max, 3));
	}
}

@media (min-width: 782px) and (max-width: 960px) {
	.wpdef-main--store .wp-block-woocommerce-product-collection > .wc-block-product-template,
	.wpdef-product-grid .wp-block-woocommerce-product-collection > .wc-block-product-template,
	.wp-block-woocommerce-product-collection.wpdef-store-home__collection > .wc-block-product-template {
		--wpdef-grid-columns: min(2, var(--wpdef-grid-max, 2));
	}
}

@media (max-width: 600px) {
	.wpdef-store-banner__inner {
		min-height: 0;
		padding-block: 2rem;
	}

	.wpdef-store-banner__copy {
		max-width: none;
	}

	.wpdef-store-category-tiles {
		gap: 0.75rem;
	}

	.wpdef-main--store .wp-block-woocommerce-product-collection > .wc-block-product-template,
	.wpdef-product-grid .wp-block-woocommerce-product-collection > .wc-block-product-template,
	.wp-block-woocommerce-product-collection.wpdef-store-home__collection > .wc-block-product-template {
		--wpdef-grid-columns: min(2, var(--wpdef-grid-max, 2));
	}
}

@media (max-width: 380px) {
	.wpdef-main--store .wp-block-woocommerce-product-collection > .wc-block-product-template,
	.wpdef-product-grid .wp-block-woocommerce-product-collection > .wc-block-product-template,
	.wp-block-woocommerce-product-collection.wpdef-store-home__collection > .wc-block-product-template {
		--wpdef-grid-columns: min(1, var(--wpdef-grid-max, 1));
	}
}

/* Match coupon controls in the native cart and checkout forms. */
/* The coupon toggle centres its label on the chevron, which WooCommerce centres absolutely, with a 44px target. */
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-coupon .wc-block-components-panel__button { align-items: center; display: flex; min-height: 2.75rem; }
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-coupon .wc-block-components-totals-coupon__form { align-items: flex-end; gap: 8px; }
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-coupon__form .wc-block-components-text-input.wc-block-components-totals-coupon__input { display: flex; flex-direction: column; flex: 1 1 120px; min-width: 0; margin: 0; }
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-coupon .wc-block-components-totals-coupon__input label { position: static; order: -1; margin: 0 0 6px; transform: none; font-size: 12px; line-height: 1.4; color: var(--wp--preset--color--muted); }
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-coupon__form .wc-block-components-text-input.wc-block-components-totals-coupon__input input { height: 44px; min-height: 44px; padding: 10px 12px; margin: 0; border: 1px solid var(--wp--preset--color--border); border-radius: 7px; background: var(--wp--preset--color--white); font-size: 14px; line-height: 1.4; }
/* WooCommerce adds top padding on focus to make room for its floating label. The label sits above the field here, so the text keeps the same place while typing. */
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-coupon__form .wc-block-components-text-input.wc-block-components-totals-coupon__input input:focus { padding: 10px 12px; }
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-coupon__form .wc-block-components-button.wc-block-components-totals-coupon__button { align-items: center; justify-content: center; flex: 0 0 auto; min-width: 88px; min-height: 44px; height: 44px; margin: 0; padding: 10px 18px; border: 1px solid var(--wp--preset--color--secondary); border-radius: 7px; background: var(--wp--preset--color--secondary); color: var(--wp--preset--color--white); box-shadow: none; font-size: 13px; font-weight: 650; line-height: 1.4; opacity: 1; }
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button:not(:disabled):not([aria-disabled="true"]):hover { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); }
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button:is(:disabled, [aria-disabled="true"]) { background: var(--wp--custom--color--surface-2) !important; border-color: var(--wp--custom--color--line-1) !important; color: var(--wp--preset--color--border) !important; cursor: not-allowed; box-shadow: none; opacity: 1; }
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-coupon__form :is(input, button):focus-visible { box-shadow: none; outline: 2px solid var(--wp--preset--color--secondary); outline-offset: 3px; }
/* Applied coupons read as small pills: the code, a divider and the remove button. */
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-discount__coupon-list { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0.375rem 0 0; }
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-discount .wc-block-components-chip,
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-discount .wc-block-components-chip:is(:hover, :focus, :active) {
	background: var(--wp--custom--color--surface-2);
	border: 0;
	color: var(--wp--preset--color--accent);
	gap: 0.25rem;
	margin: 0;
	min-height: 1.75rem;
	padding: 0.125rem 0.125rem 0.125rem 0.625rem;
}
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-discount .wc-block-components-chip .wc-block-components-chip__text {
	border-inline-end: 1px solid var(--wp--custom--color--line-2);
	font-size: 0.75rem;
	font-weight: 650;
	line-height: 1.4;
	padding-inline-end: 0.375rem;
}
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-discount .wc-block-components-chip .wc-block-components-chip__remove {
	align-items: center;
	background: transparent;
	border-radius: 50%;
	display: inline-flex;
	height: 1.5rem;
	justify-content: center;
	/* The theme's 44px button minimum would stretch the pill; the touch area below keeps 44px instead. */
	min-height: 1.5rem;
	position: relative;
	width: 1.5rem;
}
/* A 44px touch area around the 24px button, outside the layout, so the pill keeps its height on every screen. */
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-discount .wc-block-components-chip .wc-block-components-chip__remove::before { content: ""; inset: -0.625rem; position: absolute; }
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-discount .wc-block-components-chip .wc-block-components-chip__remove:hover { background: var(--wp--custom--color--line-1); }
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-discount .wc-block-components-chip .wc-block-components-chip__remove-icon { fill: currentColor; height: 1rem; width: 1rem; }
/* WooCommerce marks focused checkboxes and radios with a 1px outline, below the 2px minimum. */
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"], .wc-block-components-radio-control .wc-block-components-radio-control__input[type="radio"]):focus-visible { box-shadow: none; outline: 2px solid var(--wp--preset--color--secondary); outline-offset: 2px; }
/* WooCommerce paints the dot of a chosen radio with a background, which forced-colours modes override, so the choice looked empty; a system colour keeps it. */
@media (forced-colors: active) {
	:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before { background: CanvasText; }
}
/* Toggles such as "Add apartment" and the coupon panel are elements with a button role; give them the store's outline too. */
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) [role="button"]:focus-visible { box-shadow: none; outline: 2px solid var(--wp--preset--color--secondary); outline-offset: 3px; }

/* Cart template. These rules never target the header, footer or mini-cart. */
.wpdef-main--cart {
	--wpdef-cart-border: var(--wp--custom--color--surface-3);
	--wpdef-cart-muted: var(--wp--preset--color--muted);
	background: linear-gradient(180deg, var(--wp--preset--color--white) 0%, var(--wp--preset--color--background) 100%);
	color: var(--wp--preset--color--foreground);
}

/* Wins over the small-screen padding that every .wpdef-main receives, so the
 * full-width banners of the cart and the catalog meet the header. */
.wp-site-blocks .wpdef-main--cart,
.wp-site-blocks .wpdef-main--store:has(> .wpdef-store-banner:first-child) {
	padding-top: 0 !important;
}

.wpdef-cart-banner {
	background-color: var(--wp--preset--color--soft);
	background-image: linear-gradient(110deg, var(--wp--preset--color--background) 0%, var(--wp--custom--color--surface-3) 55%, var(--wp--custom--color--line-2) 100%);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin-block: 0;
}

.wpdef-cart-banner__inner {
	padding-block: clamp(1.5rem, 2.2vw, 2.25rem);
}

.wpdef-cart-banner .wpdef-cart-banner__title {
	color: var(--wp--custom--color--ink);
	font-size: clamp(1.75rem, 2.6vw, 2.5rem);
	letter-spacing: -0.035em;
	line-height: 1.12;
	margin: 0;
	max-width: 28rem;
}

.wpdef-cart-banner .wpdef-cart-banner__lead {
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	line-height: 1.55;
	margin-block: 0.625rem 0;
	max-width: 29rem;
}

.wpdef-main--cart .wp-block-woocommerce-cart {
	margin-top: 0;
}

.wpdef-main--cart .wc-block-cart {
	--wc-separator-color: var(--wpdef-cart-border);
	align-items: start;
	display: grid;
	font-size: 0.875rem;
	gap: 1.5rem;
	grid-template-columns: minmax(0, 1.7fr) minmax(20rem, 1fr);
	margin-bottom: 0;
}

.wpdef-main--cart .wc-block-cart__main {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wpdef-cart-border);
	border-radius: 0.75rem;
	box-shadow: 0 5px 24px color-mix(in srgb, var(--wp--preset--color--accent) 3%, transparent);
}

.wpdef-main--cart .wpdef-cart-toolbar {
	align-items: center;
	border-bottom: 1px solid var(--wpdef-cart-border);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	justify-content: space-between;
	margin: 0 1.25rem;
	padding-block: 1rem;
}

.wpdef-main--cart .wpdef-cart-toolbar__title {
	color: var(--wp--preset--color--accent);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.5;
	margin: 0;
}

.wpdef-main--cart .wc-block-cart table.wc-block-cart-items {
	border: 0;
	border-collapse: collapse;
	display: block;
	margin: 0;
	padding-inline: 1.25rem;
}

.wpdef-main--cart .wc-block-cart-items thead {
	/* Retain column headings for assistive technology. */
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.wpdef-main--cart .wc-block-cart-items tbody { display: block; }

.wpdef-main--cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
	align-items: start;
	border-bottom: 1px solid var(--wpdef-cart-border);
	display: grid;
	gap: 0.25rem 1rem;
	grid-template-columns: 6.5rem minmax(0, 1fr);
	padding: 1.125rem 0;
}

.wpdef-main--cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row > td {
	border: 0;
	min-width: 0;
	padding: 0;
	width: auto;
}

.wpdef-main--cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-item__image {
	grid-column: 1;
	grid-row: 1 / 3;
}

.wpdef-main--cart .wc-block-cart-item__image img {
	aspect-ratio: 4 / 3;
	border: 1px solid var(--wp--preset--color--soft);
	border-radius: 0.5rem;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.wpdef-main--cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-item__product {
	grid-column: 2;
	grid-row: 1;
}

.wpdef-main--cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-item__wrap {
	align-items: start;
	display: grid;
	gap: 0.25rem 1rem;
	grid-template-columns: minmax(0, 1fr) auto;
}

.wpdef-main--cart .wc-block-cart .wc-block-cart-items .wc-block-components-product-name {
	color: var(--wp--preset--color--accent);
	display: flex;
	flex-direction: column;
	font-size: 0.875rem;
	font-weight: 650;
	gap: 0.375rem;
	grid-column: 1;
	line-height: 1.4;
	text-decoration: none;
}

.wpdef-main--cart .wc-block-components-product-name:hover { text-decoration: underline; }

.wpdef-main--cart .wc-block-cart-item__prices { grid-column: 1; grid-row: 3; }
.wpdef-main--cart .wc-block-components-product-metadata { grid-column: 1; grid-row: 2; margin: 0; }
.wpdef-main--cart .wc-block-components-product-metadata__description { color: var(--wpdef-cart-muted); font-size: 0.75rem; line-height: 1.5; }
.wpdef-main--cart .wc-block-components-product-metadata__description p { margin: 0; }
.wpdef-main--cart .wc-block-components-product-price { color: var(--wp--custom--color--ink); font-size: 0.875rem; font-weight: 700; }
.wpdef-main--cart .wc-block-components-product-price del { color: var(--wpdef-cart-muted); font-size: 0.75rem; font-weight: 400; }
.wpdef-main--cart .wc-block-components-product-price ins { text-decoration: none; }

.wpdef-main--cart .wc-block-cart-item__prices ins {
	order: -1;
}

/* WooCommerce places the quantity on the second row with a rule of equal
   weight that loads later, which laid it over the description on phones.
   Naming the row outranks it. */
.wpdef-main--cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity {
	align-items: center;
	align-self: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem 0.75rem;
	grid-column: 2;
	grid-row: 1 / 4;
	padding: 0;
}

/* WooCommerce names the quantity field for screen readers only, so the cart
   shows "Quantity" above it, as the product page does. The translated text
   comes from functions.php, and screen readers skip it, as the field's name
   already says it. */
.wpdef-main--cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity::before {
	color: var(--wp--preset--color--muted);
	content: var(--wpdef-quantity-label);
	flex-basis: 100%;
	font-size: 0.8125rem;
	font-weight: 650;
	line-height: 1.4;
}

@supports (content: "a" / "") {
	.wpdef-main--cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity::before {
		content: var(--wpdef-quantity-label) / "";
	}
}

.wpdef-main--cart .wc-block-components-quantity-selector {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0.375rem;
	box-sizing: border-box;
	color: var(--wp--preset--color--accent);
	margin: 0;
	min-height: 2.5rem;
	width: 6.5rem;
}

.wpdef-main--cart .wc-block-components-quantity-selector::after { border: 0; }
.wpdef-main--cart .wc-block-components-quantity-selector__input { font-size: 0.8125rem; font-weight: 650; min-height: 2.5rem; }
.wpdef-main--cart .wc-block-components-quantity-selector__button { color: var(--wp--preset--color--accent); min-height: 2.5rem; min-width: 2rem; }

/* WooCommerce marks focus in this control with a 1px inset line, below the
   2px minimum. The ring sits inside because the control's border hugs it; the
   transparent outline shows in forced-colours modes. */
.wpdef-main--cart .wc-block-components-quantity-selector :is(.wc-block-components-quantity-selector__input, .wc-block-components-quantity-selector__button):focus-visible {
	box-shadow: inset 0 0 0 3px var(--wp--preset--color--accent);
	outline: 2px solid transparent;
	outline-offset: -2px;
}

.wpdef-main--cart .wc-block-cart-item__remove-link { align-items: center; border-radius: 0.25rem; color: var(--wp--preset--color--muted); display: inline-flex; justify-content: center; min-height: 2.5rem; min-width: 2rem; }
.wpdef-main--cart .wc-block-cart-item__remove-link:hover { background: var(--wp--custom--color--error-surface); color: var(--wp--preset--color--error); }
.wpdef-main--cart .wc-block-cart-item__remove-link svg { height: 1.125rem; width: 1.125rem; }

/* Item totals and savings remain in the order summary, not beside quantity.
   The column header goes with them, so screen readers do not find a Total
   column without cells. */
.wpdef-main--cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-item__total,
.wpdef-main--cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__header-total {
	display: none;
}

.wpdef-main--cart .wpdef-cart-continue {
	margin: 0;
	padding: 0.875rem 1.25rem 1.25rem;
}

.wpdef-main--cart .wpdef-cart-continue a {
	align-items: center;
	background: var(--wp--preset--color--soft);
	border: 1px solid var(--wp--custom--color--line-4);
	border-radius: 0.625rem;
	color: var(--wp--preset--color--accent);
	display: inline-flex;
	font-size: 0.875rem;
	font-weight: 650;
	gap: 0.625rem;
	justify-content: center;
	line-height: 1.4;
	max-width: 100%;
	min-height: 2.75rem;
	padding: 0.625rem 1rem;
	text-align: center;
	text-decoration: none;
}

.wpdef-main--cart .wpdef-cart-continue a::before {
	content: "←";
	flex: 0 0 auto;
	font-size: 1.25rem;
	line-height: 1;
}

.wpdef-main--cart .wpdef-cart-continue a:hover {
	background: var(--wp--custom--color--surface-3);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.wpdef-main--cart .wpdef-cart-continue a:active {
	background: var(--wp--custom--color--line-2);
}

@media (max-width: 480px) {
	.wpdef-main--cart .wpdef-cart-continue a { width: 100%; }
}

/* Store front page pattern: a product section with nothing to show, such as the
   offers when nothing is on sale, stays hidden on the site. The editors keep it
   visible so it can still be edited. */
.wp-site-blocks .wpdef-store-home__products:not(:has(.wc-block-product)) { display: none; }

/* Cross-sells under the cart items: a heading, a lead and the theme's product
   cards. A cart whose items have no cross-sells shows no section; the Site
   Editor keeps it visible so the template can still be edited. */
.wpdef-main--cart .wpdef-cart-cross-sells {
	border-top: 1px solid var(--wpdef-cart-border);
	margin: 0 1.25rem;
	padding-block: 1.25rem;
}
.wp-site-blocks .wpdef-main--cart .wpdef-cart-cross-sells:not(:has(.wc-block-product)) { display: none; }
.wpdef-main--cart .wpdef-cart-cross-sells__heading { margin: 0 0 1rem; }
.wpdef-main--cart .wpdef-cart-cross-sells__heading > * { margin: 0; }
.wpdef-main--cart .wpdef-cart-cross-sells__title { color: var(--wp--custom--color--ink); font-size: 1.125rem; font-weight: 750; line-height: 1.3; }
.wpdef-main--cart .wpdef-cart-cross-sells__lead { color: var(--wpdef-cart-muted); font-size: 0.9375rem; line-height: 1.5; margin-block-start: 0.25rem; }
.wpdef-main--cart .wpdef-cart-cross-sells > .wc-block-product-template {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
	margin: 0;
	padding: 0;
}
.wpdef-main--cart .wpdef-cart-cross-sells > .wc-block-product-template > li { margin: 0; max-width: none; min-width: 0; width: auto; }
.wpdef-main--cart .wpdef-cart-cross-sells .wpdef-product-card__media img { aspect-ratio: 4 / 3; }
.wpdef-main--cart .wpdef-cart-cross-sells .wpdef-product-card__body { gap: 0.375rem; padding: 0.75rem; }
.wpdef-main--cart .wpdef-cart-cross-sells .wpdef-product-card__title { font-size: 0.9375rem; line-height: 1.35; }
.wpdef-main--cart .wpdef-cart-cross-sells .wpdef-product-card__price { font-size: 0.9375rem; margin: 0.125rem 0; }
.wpdef-main--cart .wpdef-cart-cross-sells .wpdef-product-card__price ins { font-size: 1rem; }

.wpdef-main--cart .wc-block-cart .wc-block-cart__sidebar {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wpdef-cart-border);
	border-radius: 0.75rem;
	box-shadow: 0 5px 24px color-mix(in srgb, var(--wp--preset--color--accent) 3%, transparent);
	padding: 1.5rem;
}

.wpdef-main--cart .wc-block-cart .wc-block-cart__totals-title {
	color: var(--wp--preset--color--accent);
	display: block;
	font-size: 1.375rem;
	font-weight: 750;
	line-height: 1.3;
	margin: 0 0 1rem;
	padding: 0;
	text-transform: none;
}

.wpdef-main--cart .wc-block-components-totals-wrapper { border-color: var(--wpdef-cart-border); padding-block: 0.875rem; }
.wpdef-main--cart .wc-block-components-totals-item { color: var(--wpdef-cart-muted); padding-inline: 0; }
.wpdef-main--cart .wc-block-components-totals-footer-item { color: var(--wp--custom--color--ink); font-size: 1.125rem; font-weight: 750; }
.wpdef-main--cart .wc-block-components-totals-shipping .wc-block-components-totals-item__value { color: var(--wp--preset--color--success); }

/* Order summary rows: an icon tile beside each label, the value at the end and any
   detail, such as the applied coupons, under the label. Fees and taxes have no icon
   and keep the same indent. WooCommerce's markup and texts are unchanged. */
.wpdef-main--cart .wp-block-woocommerce-cart-order-summary-totals-block { padding-block: 0.5rem; }
.wpdef-main--cart .wp-block-woocommerce-cart-order-summary-totals-block .wc-block-components-totals-wrapper { border: 0; padding-block: 0.5rem; }
.wpdef-main--cart .wp-block-woocommerce-cart-order-summary-totals-block .wc-block-components-totals-item {
	--wpdef-cart-icon-surface: var(--wp--custom--color--surface-2);
	--wpdef-cart-icon-color: var(--wp--preset--color--secondary);
	align-items: center;
	column-gap: 0.875rem;
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr) auto;
	row-gap: 0.5rem;
}
.wpdef-main--cart .wp-block-woocommerce-cart-order-summary-totals-block .wc-block-components-totals-item__label { color: var(--wp--custom--color--ink); font-size: 0.9375rem; grid-column: 2; grid-row: 1; line-height: 1.4; }
.wpdef-main--cart .wp-block-woocommerce-cart-order-summary-totals-block .wc-block-components-totals-item__value { color: var(--wp--custom--color--ink); font-size: 0.9375rem; grid-column: 3; grid-row: 1; }
.wpdef-main--cart .wp-block-woocommerce-cart-order-summary-totals-block .wc-block-components-totals-shipping .wc-block-components-totals-item__value { color: var(--wp--preset--color--success); }
.wpdef-main--cart .wp-block-woocommerce-cart-order-summary-totals-block .wc-block-components-totals-item__description { grid-column: 2 / -1; grid-row: 2; }
.wpdef-main--cart .wp-block-woocommerce-cart-order-summary-totals-block .wc-block-components-totals-item__description:empty { display: none; }
.wpdef-main--cart .wp-block-woocommerce-cart-order-summary-totals-block :is(.wp-block-woocommerce-cart-order-summary-subtotal-block, .wp-block-woocommerce-cart-order-summary-discount-block, .wp-block-woocommerce-cart-order-summary-shipping-block) .wc-block-components-totals-item::before,
.wpdef-main--cart .wp-block-woocommerce-cart-order-summary-totals-block :is(.wp-block-woocommerce-cart-order-summary-subtotal-block, .wp-block-woocommerce-cart-order-summary-discount-block, .wp-block-woocommerce-cart-order-summary-shipping-block) .wc-block-components-totals-item::after {
	align-self: center;
	content: "";
	grid-column: 1;
	grid-row: 1;
	justify-self: center;
}
.wpdef-main--cart .wp-block-woocommerce-cart-order-summary-totals-block :is(.wp-block-woocommerce-cart-order-summary-subtotal-block, .wp-block-woocommerce-cart-order-summary-discount-block, .wp-block-woocommerce-cart-order-summary-shipping-block) .wc-block-components-totals-item::before {
	background: var(--wpdef-cart-icon-surface);
	border-radius: 0.625rem;
	height: 2.5rem;
	width: 2.5rem;
}
.wpdef-main--cart .wp-block-woocommerce-cart-order-summary-totals-block :is(.wp-block-woocommerce-cart-order-summary-subtotal-block, .wp-block-woocommerce-cart-order-summary-discount-block, .wp-block-woocommerce-cart-order-summary-shipping-block) .wc-block-components-totals-item::after {
	background: var(--wpdef-cart-icon-color);
	height: 1.25rem;
	mask: var(--wpdef-cart-icon) center / contain no-repeat;
	width: 1.25rem;
}
.wpdef-main--cart .wp-block-woocommerce-cart-order-summary-totals-block .wp-block-woocommerce-cart-order-summary-subtotal-block .wc-block-components-totals-item { --wpdef-cart-icon: url("../images/cart-bag.svg"); }
.wpdef-main--cart .wp-block-woocommerce-cart-order-summary-totals-block .wp-block-woocommerce-cart-order-summary-shipping-block .wc-block-components-totals-item { --wpdef-cart-icon: url("../images/product-truck.svg"); }
/* Shipping details that WooCommerce places after the row, such as the address form, line up with the label. */
.wpdef-main--cart .wp-block-woocommerce-cart-order-summary-totals-block .wc-block-components-totals-shipping > :not(.wc-block-components-totals-item) { margin-inline-start: 3.375rem; }

/* The discount stands out on a green panel, with the saving in green and each coupon as a pill.
   On the site the block and its row are one element; in the Site Editor the row sits inside the block. */
.wpdef-main--cart .wp-block-woocommerce-cart-order-summary-totals-block :is(.wp-block-woocommerce-cart-order-summary-discount-block.wc-block-components-totals-wrapper, .wp-block-woocommerce-cart-order-summary-discount-block > .wc-block-components-totals-wrapper) {
	background: color-mix(in srgb, var(--wp--preset--color--success) 6%, var(--wp--preset--color--white));
	border-radius: 0.75rem;
	margin: 0.5rem -0.75rem;
	padding: 0.875rem 0.75rem;
}
.wpdef-main--cart .wp-block-woocommerce-cart-order-summary-totals-block .wp-block-woocommerce-cart-order-summary-discount-block .wc-block-components-totals-item {
	--wpdef-cart-icon: url("../images/product-tag.svg");
	--wpdef-cart-icon-color: var(--wp--preset--color--success);
	--wpdef-cart-icon-surface: color-mix(in srgb, var(--wp--preset--color--success) 12%, var(--wp--preset--color--white));
}
/* Mixing the Success colour with white gives a greyish green, so browsers that can derive colours
   draw a light mint from its hue instead. The saving keeps 6:1 contrast on it. */
@supports (color: oklch(from red l c h)) {
	.wpdef-main--cart .wp-block-woocommerce-cart-order-summary-totals-block :is(.wp-block-woocommerce-cart-order-summary-discount-block.wc-block-components-totals-wrapper, .wp-block-woocommerce-cart-order-summary-discount-block > .wc-block-components-totals-wrapper) { background: oklch(from var(--wp--preset--color--success) 0.975 calc(c * 0.25) h); }
	.wpdef-main--cart .wp-block-woocommerce-cart-order-summary-totals-block .wp-block-woocommerce-cart-order-summary-discount-block .wc-block-components-totals-item { --wpdef-cart-icon-surface: oklch(from var(--wp--preset--color--success) 0.93 calc(c * 0.45) h); }
}
.wpdef-main--cart .wp-block-woocommerce-cart-order-summary-totals-block .wp-block-woocommerce-cart-order-summary-discount-block .wc-block-components-totals-item__value { color: var(--wp--preset--color--success); font-size: 1.125rem; font-weight: 750; }
/* On the mint panel the pill takes a deeper blue, so it still stands apart. */
.wpdef-main--cart .wc-block-components-totals-discount .wc-block-components-chip,
.wpdef-main--cart .wc-block-components-totals-discount .wc-block-components-chip:is(:hover, :focus, :active) { background: var(--wp--custom--color--surface-3); }
.wpdef-main--cart .wc-block-components-totals-discount .wc-block-components-chip .wc-block-components-chip__text { border-inline-end-color: var(--wp--custom--color--line-3); }

.wpdef-main--cart .wp-block-woocommerce-cart-order-summary-coupon-form-block {
	background: var(--wp--custom--color--surface-2);
	border: 0;
	border-radius: 0.75rem;
	margin-block: 0.5rem 1rem;
	padding: 0.5rem 1rem;
}
.wpdef-main--cart .wc-block-components-totals-coupon { padding: 0; }
/* In the Site Editor the coupon form keeps an inner row with its own rule and padding. */
.wpdef-main--cart .wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-totals-wrapper { border: 0; padding: 0; }
.wpdef-main--cart .wc-block-components-panel__button { color: var(--wp--preset--color--accent); font-size: 0.8125rem; font-weight: 650; min-height: 2.25rem; }
/* WooCommerce pins the button's start padding with !important, so the coupon icon is a flex item ahead of the text. */
.wpdef-main--cart .wc-block-components-totals-coupon .wc-block-components-panel__button { color: var(--wp--preset--color--secondary); font-size: 0.9375rem; font-weight: 700; gap: 0.875rem; }
.wpdef-main--cart .wc-block-components-totals-coupon .wc-block-components-panel__button::before {
	background: currentColor;
	content: "";
	flex: 0 0 1.5rem;
	height: 1.5rem;
	mask: url("../images/cart-coupon.svg") center / contain no-repeat;
}
.wpdef-main--cart .wc-block-components-totals-coupon__form { gap: 0.5rem; }
.wpdef-main--cart .wc-block-components-totals-coupon__input input { background: var(--wp--preset--color--white); border-color: var(--wp--preset--color--border); border-radius: 0.375rem; }
.wpdef-main--cart .wc-block-components-totals-coupon__button { border-radius: 0.375rem; font-size: 0.75rem; min-width: 5rem; padding: 0.5rem 0.75rem; }
.wpdef-main--cart .wc-block-cart__submit { margin: 0; padding: 0; }
.wpdef-main--cart .wc-block-cart__submit-container { background: transparent; padding: 0; }
.wpdef-main--cart .wc-block-cart__submit-container::before { display: none; }
.wpdef-main--cart .wc-block-cart__submit-button {
	background: linear-gradient(115deg, var(--wp--preset--color--secondary), var(--wp--preset--color--accent));
	border-radius: 0.5rem;
	color: var(--wp--preset--color--white);
	font-size: 0.875rem;
	font-weight: 700;
	gap: 0.75rem;
	min-height: 3rem;
	padding: 0.875rem 1rem;
	text-decoration: none;
}
.wpdef-main--cart .wc-block-cart__submit-button:hover { background: var(--wp--custom--color--ink); color: var(--wp--preset--color--white); }
.wpdef-main--cart .wc-block-cart__submit-button::after { content: "→"; }
.wpdef-main--cart .wc-block-cart__submit-button::before {
	background: currentColor;
	content: "";
	height: 1rem;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Crect x='5' y='10' width='14' height='11' rx='2'/%3E%3Cpath d='M8 10V6a4 4 0 0 1 8 0v4m-4 5v3'/%3E%3C/svg%3E") center / contain no-repeat;
	width: 1rem;
}

.wpdef-main--cart .wpdef-cart-help {
	border-top: 1px solid var(--wpdef-cart-border);
	margin-top: 1.25rem;
	padding-top: 1.125rem;
}
.wpdef-main--cart .wpdef-cart-help p { color: var(--wpdef-cart-muted); font-size: 0.75rem; line-height: 1.5; margin: 0 0 0.875rem; padding-inline-start: 2.25rem; position: relative; }
.wpdef-main--cart .wpdef-cart-help p:last-child { margin-bottom: 0; }
.wpdef-main--cart .wpdef-cart-help strong { color: var(--wp--preset--color--accent); font-weight: 650; }
.wpdef-cart-help p::before { background: var(--wp--custom--color--surface-3); border: 1px solid var(--wp--custom--color--line-2); border-radius: 50%; color: var(--wp--preset--color--secondary); content: "✓"; display: grid; font-size: 0.875rem; height: 1.625rem; inset-inline-start: 0; place-items: center; position: absolute; top: 0.125rem; width: 1.625rem; }
.wpdef-cart-help .wpdef-cart-help__shipping::before { content: "↗"; }
.wpdef-cart-help .wpdef-cart-help__payment::before { content: "→"; }

/* The arrows and marks are decorative. Browsers that understand the
   alternative text syntax announce nothing in their place; NVDA read them
   as "check mark" and "right arrow". */
@supports (content: "a" / "") {
	.wpdef-main--cart .wpdef-cart-continue a::before { content: "←" / ""; }
	.wpdef-main--cart .wc-block-cart__submit-button::after { content: "→" / ""; }
	.wpdef-cart-help p::before { content: "✓" / ""; }
	.wpdef-cart-help .wpdef-cart-help__shipping::before { content: "↗" / ""; }
	.wpdef-cart-help .wpdef-cart-help__payment::before { content: "→" / ""; }
}

.wpdef-main--cart .wp-block-woocommerce-empty-cart-block { background: var(--wp--preset--color--white); border: 1px solid var(--wpdef-cart-border); border-radius: 0.75rem; padding: clamp(1.5rem, 5vw, 4rem); }
.wpdef-main--cart :is(a, button, input):focus-visible { outline: 2px solid var(--wp--preset--color--secondary); outline-offset: 3px; }

@media (max-width: 1100px) {
	.wpdef-main--cart .wc-block-cart { grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 1fr); gap: 1rem; }
	.wpdef-main--cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row { grid-template-columns: 5rem minmax(0, 1fr); gap: 0.375rem 0.75rem; }
	.wpdef-main--cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-item__wrap { grid-template-columns: minmax(0, 1fr); }
	.wpdef-main--cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity { grid-column: 1; grid-row: 4; margin-top: 0.375rem; }
}

@media (max-width: 781px) {
	.wpdef-cart-banner { background-size: cover, auto 115%; }
	.wpdef-cart-banner__title, .wpdef-cart-banner__lead { width: 60%; }
	.wpdef-main--cart .wc-block-cart { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
	.wpdef-main--cart .wc-block-cart .wc-block-cart__sidebar { padding: 1.25rem; }
	.wpdef-main--cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row { grid-template-columns: 6rem minmax(0, 1fr); }
	/* WooCommerce fixes this bar to the bottom with a rule of equal weight that loads later; it covered the focused control. */
	.wpdef-main--cart .wc-block-cart .wc-block-cart__submit-container--sticky { position: static; }
}

@media (max-width: 480px) {
	.wpdef-cart-banner { margin-bottom: 1.25rem; }
	.wpdef-cart-banner__title, .wpdef-cart-banner__lead { width: 100%; }
	.wpdef-main--cart .wpdef-cart-toolbar { margin-inline: 1rem; }
	.wpdef-main--cart .wc-block-cart table.wc-block-cart-items { padding-inline: 1rem; }
	.wpdef-main--cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.375rem 0.75rem; }
	.wpdef-main--cart .wpdef-cart-toolbar__title { font-size: 0.8125rem; }
}

/* Correios Automático shipping results: the address with a pin, then each method as an outlined panel on
   the page background, like the purchase panels, with an icon tile, its name and delivery time, and the price at the end. The plugin's markup, texts and
   behaviour are unchanged. Its grid has no row element, so each card is drawn by its two cells, and the cell
   selectors outrank the plugin's own row colours. */
/* The postcode field grows so the row spans the same width as the purchase panels above it. */
.wp-site-blocks .infixs-correios-automatico-calculator .infixs-correios-automatico-calculate-box { gap: 0.75rem; width: 100%; }
.wp-site-blocks .infixs-correios-automatico-calculator .infixs-correios-automatico-input-text { flex: 1 1 auto; min-width: 0; }
.wp-site-blocks .infixs-correios-automatico-calculator input.infixs-correios-automatico-input { max-width: none; width: 100%; }
.wp-site-blocks .infixs-correios-automatico-calculator .infixs-correios-automatico-postcode-button-box { flex: 0 0 auto; }
.wp-site-blocks .infixs-correios-automatico-shipping-results {
	border-top: 1px solid var(--wp--custom--color--line-1);
	margin-top: 1rem;
	padding-top: 1rem;
}
.wp-site-blocks .infixs-correios-automatico-shipping-results-address {
	align-items: center;
	color: var(--wp--preset--color--muted);
	display: flex;
	font-size: 0.875rem;
	gap: 0.5rem;
	line-height: 1.4;
	margin-bottom: 0.75rem;
}
.wp-site-blocks .infixs-correios-automatico-shipping-results-address::before {
	background: currentColor;
	content: "";
	flex: 0 0 1.25rem;
	height: 1.25rem;
	mask: url("../images/account-pin.svg") center / contain no-repeat;
}
/* The method column keeps 10rem, so on a narrow screen a discounted price wraps its old value below instead of squeezing the name. */
.wp-site-blocks .infixs-correios-automatico-calculator .infixs-correios-automatico-shipping-results .infixs-correios-automatico-shipping-results-grid {
	display: grid;
	grid-template-columns: minmax(10rem, 1fr) auto;
	row-gap: 0.625rem;
	width: 100%;
}
/* The "Entrega" and "Custo" headings stay for screen readers; the cards make them redundant on screen. */
.wp-site-blocks .infixs-correios-automatico-calculator .infixs-correios-automatico-shipping-results .infixs-correios-automatico-shipping-results-grid > :nth-child(-n+2) {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}
.wp-site-blocks .infixs-correios-automatico-calculator .infixs-correios-automatico-shipping-results .infixs-correios-automatico-shipping-results-grid > :nth-child(n+3) {
	background: transparent;
	border: 1px solid var(--wp--custom--color--line-1);
}
/* Method cell: the start of the card, with the tile beside the name and the delivery time. */
.wp-site-blocks .infixs-correios-automatico-calculator .infixs-correios-automatico-shipping-results .infixs-correios-automatico-shipping-results-grid > :nth-child(2n+3) {
	align-items: center;
	border-end-start-radius: 0.75rem;
	border-inline-end: 0;
	border-start-start-radius: 0.75rem;
	column-gap: 0.875rem;
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	min-width: 0;
	padding: 0.875rem 0.75rem 0.875rem 0.875rem;
}
.wp-site-blocks .infixs-correios-automatico-calculator .infixs-correios-automatico-shipping-results .infixs-correios-automatico-shipping-results-grid > :nth-child(2n+3)::before,
.wp-site-blocks .infixs-correios-automatico-calculator .infixs-correios-automatico-shipping-results .infixs-correios-automatico-shipping-results-grid > :nth-child(2n+3)::after {
	align-self: center;
	content: "";
	grid-column: 1;
	grid-row: 1 / span 2;
	justify-self: center;
}
.wp-site-blocks .infixs-correios-automatico-calculator .infixs-correios-automatico-shipping-results .infixs-correios-automatico-shipping-results-grid > :nth-child(2n+3)::before {
	background: var(--wp--custom--color--surface-3);
	border-radius: 0.625rem;
	height: 2.75rem;
	width: 2.75rem;
}
.wp-site-blocks .infixs-correios-automatico-calculator .infixs-correios-automatico-shipping-results .infixs-correios-automatico-shipping-results-grid > :nth-child(2n+3)::after {
	background: var(--wp--preset--color--secondary);
	height: 1.375rem;
	mask: url("../images/product-truck.svg") center / contain no-repeat;
	width: 1.375rem;
}
.wp-site-blocks .infixs-correios-automatico-shipping-results-method {
	color: var(--wp--custom--color--ink);
	font-size: 1rem;
	font-weight: 750;
	grid-column: 2;
	line-height: 1.35;
}
/* A method without a delivery time sits level with its tile. */
.wp-site-blocks .infixs-correios-automatico-shipping-results-method:only-child { grid-row: 1 / span 2; }
.wp-site-blocks .infixs-correios-automatico-shipping-results-time {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	grid-column: 2;
	line-height: 1.4;
}
/* Price cell: the end of the card. With a shipping discount the plugin prints the old price in a
   <del> followed by the new one as bare text; the gap keeps them apart, and the old price follows the
   new one, smaller and muted, as in the product price. */
.wp-site-blocks .infixs-correios-automatico-calculator .infixs-correios-automatico-shipping-results .infixs-correios-automatico-shipping-results-grid > .infixs-correios-automatico-shipping-results-cost {
	align-content: center;
	align-items: baseline;
	border-end-end-radius: 0.75rem;
	border-inline-start: 0;
	border-start-end-radius: 0.75rem;
	color: var(--wp--preset--color--secondary);
	column-gap: 0.5rem;
	display: flex;
	flex-wrap: wrap;
	font-size: 1.125rem;
	font-weight: 750;
	justify-content: flex-end;
	padding: 0.875rem 1rem 0.875rem 0.5rem;
	white-space: nowrap;
}
.wp-site-blocks .infixs-correios-automatico-calculator .infixs-correios-automatico-shipping-results .infixs-correios-automatico-shipping-results-grid > .infixs-correios-automatico-shipping-results-cost del {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	font-weight: 400;
	order: 1;
}