/* Ultimate Cleaning blocks and product cards. Tokens come from theme.json (front end and editor alike).
   The world ("Everyday clarity"): white ground, rounded surfaces, one accent (lime, black text) on Add and
   the cart pill, 1px dividers, product photography on white, zone colours only as small dots and tags. */

:root {
	--ucp-line: var(--wp--preset--color--theme-border);
	--ucp-surface: var(--wp--preset--color--theme-surface-alt);
	--ucp-ink: var(--wp--preset--color--theme-black);
	--ucp-muted: var(--wp--preset--color--theme-muted-text);
	--ucp-lime: var(--wp--preset--color--theme-primary);
	--ucp-radius: var(--wp--custom--radius--md, 12px);
	--ucp-radius-sm: var(--wp--custom--radius--sm, 8px);
	--ucp-pill: var(--wp--custom--radius--pill, 999px);
	--ucp-shadow: var(--wp--custom--shadow--raised, 0 4px 16px rgba(17, 17, 17, 0.08));
	--ucp-control-h: 2.75rem;
}

:where(.ucp-zone-tiles, .ucp-category-grid, .ucp-brand-list, .ucp-industry-grid, .ucp-code-search, .ucp-order-pad) ul,
:where(.product-grid) {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------------- Zone tag (admin column, product page) ---------------- */
.zone-tag {
	align-items: center;
	background: var(--ucp-surface);
	border-radius: var(--ucp-pill);
	color: var(--ucp-ink);
	display: inline-flex;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	gap: 0.5em;
	line-height: 1;
	padding: 0.45em 0.75em;
}
.zone-tag i { border-radius: 50%; display: block; height: 0.5rem; width: 0.5rem; }
.zone-tag--red i { background: var(--wp--custom--zone--red); }
.zone-tag--blue i { background: var(--wp--custom--zone--blue); }
.zone-tag--green i { background: var(--wp--custom--zone--green); }
.zone-tag--yellow i { background: var(--wp--custom--zone--yellow); }
.zone-tag--neutral i { background: var(--wp--custom--zone--neutral); }

/* ---------------- Code pill ---------------- */
.code-pill {
	align-self: flex-start;
	background: var(--ucp-surface);
	border-radius: var(--ucp-pill);
	color: var(--ucp-muted);
	display: inline-block;
	font-size: var(--wp--preset--font-size--x-small);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	line-height: 1.2;
	max-width: 100%;
	overflow-wrap: anywhere;
	padding: 0.3em 0.7em;
}

/* ---------------- Product grid ---------------- */
.product-grid,
ul.products {
	display: grid;
	gap: 1.125rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.product-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.product-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 72em) {
	.product-grid, ul.products, .product-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 48em) {
	.product-grid, ul.products, .product-grid--5, .product-grid--3 { gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Woo's own float/width rules for ul.products li */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	clear: none;
	float: none;
	margin: 0;
	padding: 1rem; /* Woo's li.product reset zeroes padding at higher specificity than .product-card */
	width: auto;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
@media (max-width: 48em) {
	.woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .product-card { padding: 0.75rem; }
}
/* two cards across a phone: the stepper takes its own line above a full-width Add */
@media (max-width: 30em) {
	.product-card__buy { flex-wrap: wrap; }
	.product-card__buy .stepper { width: 100%; }
	.product-card__buy .stepper input.stepper__input { flex: 1 1 auto; width: auto; }
	.product-card__buy .product-card__add { flex-basis: 100%; }
}

/* ---------------- Product card ---------------- */
.product-card {
	background: var(--wp--preset--color--theme-white);
	border: 1px solid var(--ucp-line);
	border-radius: var(--ucp-radius);
	display: flex;
	flex-direction: column;
	margin: 0;
	min-width: 0;
	padding: 1rem;
	position: relative;
	transition: border-color var(--wp--custom--transition--fast), box-shadow var(--wp--custom--transition--fast);
}
.product-card:hover, .product-card:focus-within { border-color: var(--ucp-ink); box-shadow: var(--ucp-shadow); }
.product-card.is-error { border-color: var(--wp--custom--zone--red); }

.product-card__image {
	aspect-ratio: 1 / 1;
	display: block;
	margin-bottom: 0.5rem;
	overflow: hidden;
}
.product-card__image img {
	height: 100%;
	object-fit: contain;
	padding: 1.25rem 1.5rem;
	transition: transform var(--wp--custom--transition--base);
	width: 100%;
}
.product-card:hover .product-card__image img { transform: scale(1.035); }

.product-card__product { display: grid; gap: 0.3rem; margin-top: 0.6rem; }
.product-card__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin: 0;
	min-height: 2.6em;
}
.product-card__name a { color: var(--ucp-ink); text-decoration: none; }
.product-card__name a:hover, .product-card__name a:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }
.product-card__name a::after { content: ""; inset: 0; position: absolute; }
.product-card__brand { color: var(--ucp-muted); font-size: var(--wp--preset--font-size--x-small); }
.product-card__error { color: #8f2119; font-size: var(--wp--preset--font-size--x-small); font-weight: 600; }

/* controls sit above the name link's stretched hit area */
.product-card__pack, .product-card__buy, .product-card__price { position: relative; z-index: 1; }

.product-card__pack { font-size: var(--wp--preset--font-size--x-small); margin: auto 0 0.6rem; min-height: var(--ucp-control-h); }
.product-card__pack-label, .product-card__more {
	align-items: center;
	color: var(--ucp-muted);
	display: inline-flex;
	min-height: var(--ucp-control-h);
}
.product-card__more { color: var(--ucp-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.product-card__pack select.product-card__variant {
	appearance: auto;
	background: var(--wp--preset--color--theme-white);
	border: 1px solid var(--ucp-line);
	border-radius: var(--ucp-radius-sm);
	color: var(--ucp-ink);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	height: var(--ucp-control-h);
	line-height: 1.2;
	padding: 0 0.7rem;
	width: 100%;
}
.product-card__pack select.product-card__variant:focus { border-color: var(--ucp-ink); outline: 2px solid var(--ucp-ink); outline-offset: 1px; }

.product-card__price { align-items: baseline; display: flex; flex-wrap: wrap; gap: 0.15rem 0.4rem; margin-bottom: 0.75rem; }
.product-card__price-value,
.product-card__price-value .amount {
	color: var(--ucp-ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
}
.product-card__price-value del, .product-card__price-value del .amount { color: var(--ucp-muted); font-size: 0.65em; font-weight: 500; }
.product-card__price-value ins { text-decoration: none; }
.product-card__gst { color: var(--ucp-muted); font-size: var(--wp--preset--font-size--x-small); white-space: nowrap; }

.product-card__buy { align-items: center; display: flex; gap: 0.5rem; }

/* the Add pill (button or, for products that need the page, a link) */
.product-card__add {
	align-items: center;
	background: var(--ucp-lime);
	border: 0;
	border-radius: var(--ucp-pill);
	color: var(--ucp-ink);
	cursor: pointer;
	display: inline-flex;
	flex: 1 1 auto;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	height: var(--ucp-control-h);
	justify-content: center;
	line-height: 1;
	padding: 0 1rem;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition--fast), color var(--wp--custom--transition--fast);
	white-space: nowrap;
}
.product-card__add:hover, .product-card__add:focus-visible { background: #9bd54e; color: var(--ucp-ink); }
.product-card__add:disabled { cursor: default; opacity: 0.7; }
.product-card.is-added .product-card__add { background: var(--ucp-ink); color: var(--wp--preset--color--theme-white); opacity: 1; }
.product-card__add--link { background: transparent; border: 1px solid var(--ucp-ink); }
.product-card__add--link:hover, .product-card__add--link:focus-visible { background: var(--ucp-ink); color: var(--wp--preset--color--theme-white); }

/* ---------------- Stepper ---------------- */
.stepper {
	align-items: center;
	border: 1px solid var(--ucp-line);
	border-radius: var(--ucp-pill);
	display: flex;
	flex: 0 0 auto;
	height: var(--ucp-control-h);
	overflow: hidden;
	width: 7rem;
}
.stepper__step {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--ucp-ink);
	cursor: pointer;
	display: flex;
	flex: 1 1 0;
	font-size: var(--wp--preset--font-size--base);
	height: 100%;
	justify-content: center;
	line-height: 1;
	min-width: 2rem;
	padding: 0;
}
.stepper__step:hover, .stepper__step:focus-visible { background: var(--ucp-surface); color: var(--ucp-ink); outline-offset: -2px; }
.stepper input.stepper__input,
.stepper input.stepper__input:not([type="submit"]) {
	appearance: textfield;
	-moz-appearance: textfield;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--ucp-ink);
	flex: 0 0 2.25rem;
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	height: 100%;
	min-width: 0;
	outline: 0;
	padding: 0;
	text-align: center;
	width: 2.25rem;
}
.stepper input.stepper__input::-webkit-inner-spin-button, .stepper input.stepper__input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.stepper:focus-within { border-color: var(--ucp-ink); }

/* ---------------- List view (the compact order pad) ---------------- */
.product-grid.is-list, ul.products.is-list { display: flex; flex-direction: column; gap: 0.75rem; }
.is-list .product-card {
	align-items: center;
	display: grid;
	gap: 1rem;
	grid-template-columns: 4.5rem minmax(5rem, auto) minmax(9rem, 1fr) 9rem 6rem 13rem;
	padding: 0.75rem 1.125rem;
}
.is-list .product-card__image { aspect-ratio: auto; height: 4rem; margin: 0; width: 4rem; }
.is-list .product-card__image img { padding: 0.25rem; }
.is-list .code-pill { align-self: center; justify-self: start; overflow-wrap: normal; white-space: nowrap; }
.is-list .product-card__price-value, .is-list .product-card__price-value .amount { font-size: var(--wp--preset--font-size--medium); }
.is-list .product-card__product { margin: 0; }
.is-list .product-card__name { font-size: var(--wp--preset--font-size--small); min-height: 0; }
.is-list .product-card__brand { display: none; }
.is-list .product-card__pack { margin: 0; }
.is-list .product-card__price { margin: 0; }
.is-list .product-card__gst { display: none; }
.is-list .product-card__buy { justify-self: end; }
@media (max-width: 72em) {
	.is-list .product-card { grid-template-columns: 3.5rem 4.5rem minmax(8rem, 1fr) 6rem 9.5rem; }
	.is-list .code-pill { white-space: normal; }
	.is-list .code-pill { grid-column: 3; grid-row: 2; }
	.is-list .product-card__image { grid-row: 1 / 3; }
	.is-list .product-card__product { grid-column: 3; grid-row: 1; }
	.is-list .product-card__pack { grid-column: 2; grid-row: 1 / 3; }
	.is-list .product-card__price { grid-column: 4; grid-row: 1 / 3; }
	.is-list .product-card__buy { grid-column: 5; grid-row: 1 / 3; }
}
@media (max-width: 48em) {
	.is-list .product-card { grid-template-columns: 3.5rem minmax(0, 1fr) auto; padding: 0.75rem; }
	.is-list .product-card__image { grid-row: 1 / 4; }
	.is-list .code-pill { grid-column: 2; grid-row: 2; }
	.is-list .product-card__product { grid-column: 2 / 4; grid-row: 1; }
	.is-list .product-card__pack { grid-column: 2; grid-row: 3; }
	.is-list .product-card__price { grid-column: 3; grid-row: 2; justify-self: end; }
	.is-list .product-card__buy { grid-column: 3; grid-row: 3; }
	.is-list .stepper { width: 6rem; }
}

/* ---------------- Listing toolbar (shop, category, brand, industry, search) ---------------- */
.shop-tools {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-bottom: 1rem;
}
.shop-tools__chips { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.shop-chip,
.shop-tools select,
.shop-tools .orderby {
	align-items: center;
	background: var(--wp--preset--color--theme-white);
	border: 1px solid var(--ucp-line);
	border-radius: var(--ucp-pill);
	color: var(--ucp-ink);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	height: var(--ucp-control-h);
	line-height: 1;
	padding: 0 1rem;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition--fast), border-color var(--wp--custom--transition--fast);
	white-space: nowrap;
}
.shop-chip:hover, .shop-chip:focus-visible { border-color: var(--ucp-ink); color: var(--ucp-ink); }
.shop-chip.is-active { background: var(--ucp-ink); border-color: var(--ucp-ink); color: var(--wp--preset--color--theme-white); }
.shop-tools select, .shop-tools .orderby { max-width: 14rem; padding-right: 2.25rem; width: auto; }
.shop-tools select:focus, .shop-tools .orderby:focus { border-color: var(--ucp-ink); outline: 2px solid var(--ucp-ink); outline-offset: 1px; }
.shop-tools__right { align-items: center; display: flex; gap: 0.625rem; margin-left: auto; }
.shop-tools .woocommerce-ordering { float: none; margin: 0; }

.view-toggle {
	align-items: center;
	border: 1px solid var(--ucp-line);
	border-radius: var(--ucp-pill);
	display: inline-flex;
	flex-shrink: 0;
	padding: 3px;
}
.view-toggle button {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: var(--ucp-pill);
	color: var(--ucp-ink);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	gap: 0.5rem;
	height: 2.375rem;
	justify-content: center;
	line-height: 1;
	min-width: 2.75rem;
	padding: 0 0.8rem;
}
.view-toggle button svg { height: 1rem; width: 1rem; }
.view-toggle button:hover { background: var(--ucp-surface); color: var(--ucp-ink); }
.view-toggle button.is-active { background: var(--ucp-ink); color: var(--wp--preset--color--theme-white); }

.shop-meta {
	align-items: center;
	color: var(--ucp-muted);
	display: flex;
	font-size: var(--wp--preset--font-size--x-small);
	font-variant-numeric: tabular-nums;
	gap: 1rem;
	justify-content: space-between;
	margin-bottom: 1.25rem;
}
.shop-meta .woocommerce-result-count { float: none; margin: 0; }

/* ---------------- Order pad block (a card grid with a heading; used on the home page) ---------------- */
.order-pad__heading { margin-bottom: 1rem; }
.order-pad__zone { color: var(--ucp-muted); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--small); font-weight: 600; margin: 1.5rem 0 0.75rem; }
.order-pad__empty { color: var(--ucp-muted); }
.pad-tabs { display: none; }

/* ---------------- Zone tiles (landing pages; four tinted, rounded tiles) ---------------- */
.zone-tiles { display: grid; gap: 0.875rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zone-tile { aspect-ratio: 1; border-radius: var(--ucp-radius); overflow: hidden; position: relative; }
.zone-tile--red { background: var(--wp--custom--zone--red-soft); --zone: var(--wp--custom--zone--red); --zone-ink: #8f2119; }
.zone-tile--blue { background: var(--wp--custom--zone--blue-soft); --zone: var(--wp--custom--zone--blue); --zone-ink: #1f4c86; }
.zone-tile--green { background: var(--wp--custom--zone--green-soft); --zone: var(--wp--custom--zone--green); --zone-ink: #1c6b3e; }
.zone-tile--yellow { background: var(--wp--custom--zone--yellow-soft); --zone: var(--wp--custom--zone--yellow); --zone-ink: #6b5300; }
.zone-tile__link { color: var(--ucp-ink); display: flex; flex-direction: column; height: 100%; justify-content: space-between; padding: var(--wp--preset--spacing--30); text-decoration: none; }
.zone-tile__zone { align-items: center; color: var(--zone-ink, var(--zone)); display: inline-flex; font-size: var(--wp--preset--font-size--x-small); font-weight: 600; gap: 0.5em; }
.zone-tile__zone::before { background: var(--zone); border-radius: 50%; content: ""; height: 0.5rem; width: 0.5rem; }
.zone-tile__img { height: 56%; left: 11%; mix-blend-mode: multiply; object-fit: contain; position: absolute; top: 22%; transition: transform var(--wp--custom--transition--base); width: 78%; }
.zone-tile:hover .zone-tile__img { transform: scale(1.04); }
.zone-tile__name { align-items: center; display: flex; font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--medium); font-weight: 600; gap: 0.5em; justify-content: space-between; line-height: 1.15; }
.zone-tile__count { background: var(--wp--preset--color--theme-white); border-radius: var(--ucp-pill); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--x-small); font-variant-numeric: tabular-nums; font-weight: 600; padding: 0.3em 0.7em; }

/* ---------------- Category tiles ---------------- */
.category-grid { display: grid; gap: 0.875rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40em) { .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 56em) {
	.category-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.category-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.category-grid--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.category-grid--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.category-grid--cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media (min-width: 56em) and (max-width: 72em) { .category-grid--cols-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.category-card { --zone: var(--wp--custom--zone--neutral); margin: 0; }
.category-card--red { --zone: var(--wp--custom--zone--red); }
.category-card--blue { --zone: var(--wp--custom--zone--blue); }
.category-card--green { --zone: var(--wp--custom--zone--green); }
.category-card--yellow { --zone: var(--wp--custom--zone--yellow); }
.category-card__link {
	align-items: center;
	border: 1px solid var(--ucp-line);
	border-radius: var(--ucp-radius);
	color: var(--ucp-ink);
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0.75rem 0.625rem 1rem;
	text-align: center;
	text-decoration: none;
	transition: border-color var(--wp--custom--transition--fast), box-shadow var(--wp--custom--transition--fast);
}
.category-card__link:hover, .category-card__link:focus-visible { border-color: var(--ucp-ink); box-shadow: var(--ucp-shadow); }
.category-card__zone { display: none; }
.category-card__media { display: block; height: 6rem; margin-bottom: 0.75rem; width: 100%; }
.category-card__media img { height: 100%; object-fit: contain; transition: transform var(--wp--custom--transition--base); width: 100%; }
.category-card__link:hover .category-card__media img { transform: scale(1.04); }
.category-card__name { font-size: var(--wp--preset--font-size--x-small); font-weight: 600; line-height: 1.35; }
.category-card__count { color: var(--ucp-muted); font-size: var(--wp--preset--font-size--x-small); font-variant-numeric: tabular-nums; margin-top: 0.25rem; }
.category-grid__all { margin: var(--wp--preset--spacing--30) 0 0; }
.category-grid__all a { color: var(--ucp-ink); font-weight: 600; }

/* ---------------- Brand chips ---------------- */
.brand-list { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.brand-chip {
	align-items: baseline;
	border: 1px solid var(--ucp-line);
	border-radius: var(--ucp-pill);
	color: var(--ucp-ink);
	display: inline-flex;
	gap: 0.6rem;
	min-height: 3rem;
	padding: 0.75rem 1.375rem;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition--fast), border-color var(--wp--custom--transition--fast);
}
.brand-chip:hover, .brand-chip:focus-visible { background: var(--ucp-surface); border-color: var(--ucp-ink); }
.brand-chip__name { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--medium); font-weight: 500; letter-spacing: -0.01em; }
.brand-chip__count { color: var(--ucp-muted); font-size: var(--wp--preset--font-size--x-small); font-variant-numeric: tabular-nums; font-weight: 600; }
/* a chip carrying the brand's own mark: a fixed-height tile so mixed logo shapes sit on one line */
.brand-chip--logo { align-items: center; border-radius: var(--ucp-radius); flex: 0 1 auto; justify-content: center; min-height: 4.5rem; min-width: 8.5rem; padding: 0.875rem 1.375rem; }
.brand-chip__logo { display: block; filter: grayscale(1); height: 2rem; max-width: 8.5rem; object-fit: contain; opacity: 0.85; transition: filter var(--wp--custom--transition--fast), opacity var(--wp--custom--transition--fast); width: auto; }
.brand-chip__logo--invert { filter: grayscale(1) invert(1); }
.brand-chip--logo:hover .brand-chip__logo, .brand-chip--logo:focus-visible .brand-chip__logo { filter: none; opacity: 1; }
.brand-chip--logo:hover .brand-chip__logo--invert, .brand-chip--logo:focus-visible .brand-chip__logo--invert { filter: invert(1); }
.brand-chip--logo .brand-chip__count { margin-left: 0.5rem; }
/* the long tail: its own full-width row under the wall of chips, label on the left, names flowing across */
.brand-list__more { border-top: 1px solid var(--ucp-line); color: var(--ucp-muted); display: flex; flex-wrap: wrap; font-size: var(--wp--preset--font-size--small); gap: 0.25rem 1.25rem; line-height: 1.75; margin: 1.5rem 0 0; padding-top: 1rem; }
.brand-list__more-label { color: var(--ucp-ink); flex: 0 0 auto; font-weight: 600; }
.brand-list__more-list { flex: 1 1 24rem; min-width: 0; }
.brand-list__more a { color: var(--ucp-ink); text-decoration: underline; text-decoration-color: var(--ucp-line); text-underline-offset: 0.2em; }
.brand-list__more a:hover, .brand-list__more a:focus-visible { text-decoration-color: currentColor; }

/* ---------------- Industry tiles ---------------- */
.industry-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 64em) { .industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40em) { .industry-grid { gap: 0.875rem; grid-template-columns: 1fr; } }
.industry-card { margin: 0; }
.industry-card__link {
	align-content: start;
	background: var(--ucp-surface);
	border-radius: var(--ucp-radius);
	color: var(--ucp-ink);
	display: grid;
	gap: 0.25rem 1rem;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto auto 1fr;
	height: 100%;
	min-height: 15rem;
	padding: 1.5rem 1.5rem 1.375rem;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition--fast);
}
.industry-card__link:hover, .industry-card__link:focus-visible { background: #e9eee2; }
.industry-card__link::after { align-self: start; content: "\2192"; font-size: var(--wp--preset--font-size--medium); grid-column: 2; grid-row: 2; }
/* a cluster of the industry's best sellers: cut-outs multiplied into the tint, overlapping so three shapes read as one picture */
.industry-card__media { align-items: flex-end; display: flex; grid-column: 1 / -1; grid-row: 1; height: 6.5rem; justify-content: flex-start; margin: 0 0 1rem; position: relative; }
.industry-card__media img { display: block; height: 100%; max-width: 46%; mix-blend-mode: multiply; object-fit: contain; transition: transform var(--wp--custom--transition--base); width: auto; }
.industry-card__media--n2 img:nth-child(2), .industry-card__media--n3 img:nth-child(2) { height: 88%; margin-left: -0.75rem; }
.industry-card__media--n3 img:nth-child(3) { height: 74%; margin-left: -0.75rem; }
.industry-card__media--single img { max-width: 100%; }
.industry-card__link:hover .industry-card__media img { transform: translateY(-3px); }
.industry-card__media--empty { border-bottom: 1px dashed var(--ucp-line); height: 3rem; }
.industry-card__name { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--medium); font-weight: 600; grid-column: 1; grid-row: 2; letter-spacing: -0.01em; line-height: 1.25; }
.industry-card__desc { color: var(--ucp-muted); font-size: var(--wp--preset--font-size--x-small); grid-column: 1 / -1; grid-row: 3; line-height: 1.5; margin-top: 0.25rem; }
.industry-card__count { align-self: end; color: var(--ucp-muted); font-size: var(--wp--preset--font-size--x-small); font-variant-numeric: tabular-nums; grid-column: 1; grid-row: 4; margin-top: 0.75rem; }

/* ---------------- Code search (the search pill, block version) ---------------- */
.code-search {
	align-items: center;
	background: var(--ucp-surface);
	border: 1px solid var(--ucp-line);
	border-radius: var(--ucp-pill);
	display: flex;
	gap: 0.5rem;
	height: 3.25rem;
	padding: 0 0.375rem 0 1.1rem;
	transition: background-color var(--wp--custom--transition--fast), border-color var(--wp--custom--transition--fast);
}
.code-search:focus-within { background: var(--wp--preset--color--theme-white); border-color: var(--ucp-ink); box-shadow: inset 0 0 0 1px var(--ucp-ink); }
.code-search__icon { align-items: center; color: var(--ucp-ink); display: flex; }
.code-search input[type="search"] {
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	flex: 1;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	height: 100%;
	min-width: 0;
	outline: none;
	padding: 0 0.5rem;
	width: auto;
}
.code-search input[type="search"]::placeholder { color: var(--ucp-muted); font-weight: 400; }
.code-search input[type="search"]::-webkit-search-cancel-button { appearance: none; }
.code-search__submit {
	background: var(--ucp-ink);
	border: 0;
	border-radius: var(--ucp-pill);
	color: var(--wp--preset--color--theme-white);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	height: 2.5rem;
	line-height: 1;
	padding: 0 1.25rem;
	transition: background-color var(--wp--custom--transition--fast), color var(--wp--custom--transition--fast);
}
.code-search__submit:hover, .code-search__submit:focus-visible { background: var(--ucp-lime); color: var(--ucp-ink); }
.code-search--large { height: 4rem; padding-left: 1.5rem; }
.code-search--large input[type="search"] { font-size: var(--wp--preset--font-size--base); }
.code-search--large .code-search__submit { height: 3.25rem; padding: 0 1.75rem; }
.code-search--compact { height: 2.75rem; }
.code-search--compact .code-search__submit { height: 2.125rem; padding: 0 0.9rem; }

/* ---------------------------------------------------------------- predictive search (ucp-suggest.js) */
form.has-suggest { position: relative; }
.ucp-suggest {
	background: var(--wp--preset--color--theme-white);
	border: 1px solid var(--ucp-line);
	border-radius: var(--ucp-radius);
	box-shadow: var(--ucp-shadow);
	color: var(--ucp-ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	left: 0;
	max-height: min(70vh, 34rem);
	overflow-y: auto;
	padding: 0.375rem;
	position: absolute;
	right: 0;
	text-align: left;
	top: calc(100% + 0.375rem);
	z-index: 80;
}
.ucp-suggest[hidden] { display: none; }
.ucp-suggest__group + .ucp-suggest__group { border-top: 1px solid var(--ucp-line); margin-top: 0.25rem; padding-top: 0.25rem; }
.ucp-suggest__label { color: var(--ucp-muted); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; margin: 0; padding: 0.5rem 0.75rem 0.25rem; text-transform: uppercase; }
.ucp-suggest__list { list-style: none; margin: 0; padding: 0; }
.ucp-suggest__item {
	align-items: center;
	border-radius: var(--ucp-radius-sm);
	color: inherit;
	display: flex;
	gap: 0.75rem;
	padding: 0.5rem 0.75rem;
	text-decoration: none;
}
.ucp-suggest__item.is-active, .ucp-suggest__item:hover { background: var(--ucp-surface); }
.ucp-suggest__img { background: var(--ucp-surface); border-radius: var(--ucp-radius-sm); flex-shrink: 0; height: 3rem; object-fit: contain; width: 3rem; }
.ucp-suggest__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.125rem; min-width: 0; }
.ucp-suggest__name { font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ucp-suggest__name mark { background: transparent; color: inherit; font-weight: 700; padding: 0; }
.ucp-suggest__meta { color: var(--ucp-muted); display: flex; flex-wrap: wrap; font-size: 0.75rem; gap: 0.75rem; }
.ucp-suggest__sku { font-variant-numeric: tabular-nums; }
.ucp-suggest__price { flex-shrink: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.ucp-suggest__item--term .ucp-suggest__name { flex: 1 1 auto; }
.ucp-suggest__kind { background: var(--ucp-surface); border-radius: var(--ucp-pill); color: var(--ucp-muted); font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.5rem; text-transform: uppercase; letter-spacing: 0.04em; }
.ucp-suggest__item.is-active .ucp-suggest__kind, .ucp-suggest__item:hover .ucp-suggest__kind { background: var(--wp--preset--color--theme-white); }
.ucp-suggest__count { color: var(--ucp-muted); font-size: 0.75rem; }
.ucp-suggest__all { border-top: 1px solid var(--ucp-line); color: var(--ucp-ink); display: block; font-weight: 600; margin-top: 0.25rem; padding: 0.75rem; text-decoration: none; }
.ucp-suggest__all.is-active, .ucp-suggest__all:hover { background: var(--ucp-surface); border-radius: 0 0 var(--ucp-radius-sm) var(--ucp-radius-sm); }
.ucp-suggest__empty { color: var(--ucp-muted); margin: 0; padding: 0.75rem; }
form.is-loading .ucp-search__icon, form.is-loading .code-search__icon { opacity: 0.5; }
@media (max-width: 600px) {
	.ucp-suggest { max-height: 60vh; }
	.ucp-suggest__price { display: none; }
}