/*
Theme Name: DPS Theme
Theme URI: https://example.com/
Author: DPS
Description: Block theme for the SoftHubKey store (DPS). Presentation only - store features live in the dps-storefront plugin.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.4.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dps-theme
*/

/*
 * Identity "Iris & Gold" (docs/DESIGN-DIRECTION.md §8, ADR-021 - replaces
 * "One code away"): an iris-violet action colour, a night colour for dark
 * surfaces, gold for savings and deals, quiet neutrals, Outfit headings.
 * Category colours appear only as small accents (icons, tints, dots) and are
 * always paired with the category's name.
 *
 * Tokens live in theme.json; this file holds what theme.json cannot express.
 * Sections: tokens · base · wordmark · header · shop menu · sections · hero ·
 * category tiles · product cards · product info · platforms · how it works ·
 * FAQ · catalog · single product · buy bar · footer · cart/checkout · target
 * sizes · WooCommerce fixes · responsive · reduced motion.
 */

/* ---------- Tokens used by components ------------------------------------- */

:root {
	--dps-ink: var(--wp--preset--color--ink);
	--dps-ink-soft: var(--wp--preset--color--ink-soft);
	--dps-canvas: var(--wp--preset--color--canvas);
	--dps-card: var(--wp--preset--color--card);
	--dps-line: var(--wp--preset--color--line);
	--dps-line-strong: var(--wp--preset--color--line-strong);
	--dps-primary: var(--wp--preset--color--primary);
	--dps-primary-deep: var(--wp--preset--color--primary-deep);
	--dps-primary-tint: var(--wp--preset--color--primary-tint);
	--dps-primary-soft: var(--wp--preset--color--primary-soft);
	--dps-night: var(--wp--preset--color--night);
	--dps-night-soft: var(--wp--preset--color--night-soft);
	--dps-gold: var(--wp--preset--color--gold);
	--dps-gold-tint: var(--wp--preset--color--gold-tint);
	--dps-gold-deep: #7a4a00; /* gold-family TEXT colour: 6.9:1 on gold tint */
	--dps-success: var(--wp--preset--color--success);
	--dps-success-tint: var(--wp--preset--color--success-tint);

	--dps-radius-card: var(--wp--custom--radius--card, 12px);
	--dps-radius-tile: var(--wp--custom--radius--tile, 18px);
	--dps-radius-button: var(--wp--custom--radius--button, 10px);
	--dps-radius-small: var(--wp--custom--radius--small, 8px);
	--dps-radius-pill: 999px;
	--dps-border: 1px solid var(--dps-line);
	--dps-shadow-sm: var(--wp--preset--shadow--sm);
	--dps-shadow-md: var(--wp--preset--shadow--md);
	--dps-shadow-lg: var(--wp--preset--shadow--lg);
	--dps-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--dps-speed: 160ms;

	/* Layers, lowest to highest. */
	--dps-z-buybar: 40;
	--dps-z-header: 50;
	--dps-z-panel: 60;
	--dps-z-scrim: 70;
	--dps-z-drawer: 80;

	/* Focus ring colour: iris on light surfaces; .dps-on-dark switches it. */
	--dps-focus: var(--dps-primary);

	/* Category accent - iris by default; .dps-cat-* classes override it. */
	--dps-cat: var(--dps-primary);
	--dps-cat-tint: var(--dps-primary-tint);
}

.dps-cat-subscriptions {
	--dps-cat: var(--wp--preset--color--cat-subscriptions);
	--dps-cat-tint: var(--wp--preset--color--cat-subscriptions-tint);
}

.dps-cat-games {
	--dps-cat: var(--wp--preset--color--cat-games);
	--dps-cat-tint: var(--wp--preset--color--cat-games-tint);
}

.dps-cat-software {
	--dps-cat: var(--wp--preset--color--cat-software);
	--dps-cat-tint: var(--wp--preset--color--cat-software-tint);
}

.dps-cat-gift-cards {
	--dps-cat: var(--wp--preset--color--cat-gift-cards);
	--dps-cat-tint: var(--wp--preset--color--cat-gift-cards-tint);
}

/* ---------- Base ----------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

html.dps-no-scroll {
	overflow: hidden;
}

h1,
h2,
h3 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--dps-focus);
	outline-offset: 2px;
	box-shadow: none;
}

.dps-on-dark {
	--dps-focus: var(--dps-primary-soft);
}

/* White cards inside a dark band are light surfaces again: iris ring
   (design review 2026-10-14: the soft ring measured 1.7:1 on white). */
.dps-on-dark :is(.dps-status, .dps-spotlight__card) {
	--dps-focus: var(--dps-primary);
}

.screen-reader-text:not(:focus) {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	white-space: nowrap;
}

.wp-element-button,
.wp-block-button__link {
	cursor: pointer;
	touch-action: manipulation;
	transition: background-color var(--dps-speed) var(--dps-ease), color var(--dps-speed) var(--dps-ease), box-shadow var(--dps-speed) var(--dps-ease);
}

.wp-element-button:disabled,
.wp-element-button.disabled,
.single_add_to_cart_button.disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Selectable looks for owner-edited content. */
.is-style-dps-card {
	background: var(--dps-card);
	border: var(--dps-border);
	border-radius: var(--dps-radius-card);
	box-shadow: var(--dps-shadow-sm);
}

/* Secondary button: outlined iris. */
.wp-block-button.is-style-dps-ghost .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: var(--dps-card);
	color: var(--dps-primary-deep);
	box-shadow: inset 0 0 0 1.5px var(--dps-primary);
}

.wp-block-button.is-style-dps-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--dps-primary-tint);
	color: var(--dps-primary-deep);
}

/* ---------- Wordmark (placeholder brand) ----------------------------------- */

.dps-wordmark {
	margin: 0;
}

.dps-wordmark a {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 44px;
	color: var(--dps-ink);
	text-decoration: none;
	font-size: 1.375rem;
	white-space: nowrap;
}

/* The mark: an iris tile with a key. */
.dps-wordmark a::before {
	content: "";
	flex: none;
	width: 2rem;
	height: 2rem;
	border-radius: 9px;
	background: var(--dps-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='m10.8 12.2 8.7-8.7M16 6l2 2M14 8l2 2'/%3E%3C/svg%3E") center / 62% no-repeat;
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}

/* ---------- Header ---------------------------------------------------------- */

.dps-header {
	position: relative; /* menu panels hang from the header's bottom edge */
	background: var(--dps-card);
	border-bottom: var(--dps-border);
}

/* WordPress puts its block gap between the header and the page; the homepage
   hero must sit flush under the header (other pages pad their own main). */
.wp-site-blocks > header.wp-block-template-part + * {
	margin-block-start: 0;
}

/* Pinned on tablets/desktops. Sticky sits on the template-part <header>: the
   inner group is as tall as its wrapper, so it would have no room to stick. */
@media (min-width: 782px) {
	header.wp-block-template-part:has(> .dps-header) {
		position: sticky;
		top: 0;
		z-index: var(--dps-z-header);
	}

	.admin-bar header.wp-block-template-part:has(> .dps-header) {
		top: var(--wp-admin--admin-bar--height, 0px);
	}
}

.dps-header__bar {
	align-items: center;
	padding-block: 0.75rem 0;
}

.dps-header__bar > .dps-wordmark {
	order: 1;
}

.dps-header__bar > .dps-search {
	order: 2;
}

.dps-header__bar > .dps-header-icons {
	order: 3;
}

.dps-search {
	flex: 1 1 24rem;
	max-width: 44rem;
}

.dps-search .wp-block-search__inside-wrapper {
	border: 1.5px solid var(--dps-line-strong);
	border-radius: var(--dps-radius-button);
	background: var(--dps-card);
	padding: 4px;
	transition: border-color var(--dps-speed) var(--dps-ease), box-shadow var(--dps-speed) var(--dps-ease);
}

.dps-search .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--dps-primary);
	box-shadow: 0 0 0 3px var(--dps-primary-tint);
}

.dps-search .wp-block-search__input {
	border: 0;
	background: transparent;
	padding: 0.5rem 0.75rem;
	/* 16px stops iOS from zooming into the field. */
	font-size: 1rem;
	min-width: 0;
	color: var(--dps-ink);
}

.dps-search .wp-block-search__input::placeholder {
	color: var(--dps-ink-soft);
}

.dps-search .wp-block-search__input:focus-visible {
	outline: none;
}

.dps-search .wp-block-search__button {
	margin-left: 4px;
	padding: 0.5rem 1.15rem;
	min-height: 40px;
	border-radius: calc(var(--dps-radius-button) - 3px);
	font-size: 0.9375rem;
}

/* Account + cart: 44x44 targets. */
.dps-header-icons .wc-block-customer-account a,
.dps-header-icons .wc-block-customer-account__link,
.dps-header-icons .wc-block-mini-cart__button {
	min-width: 44px;
	min-height: 44px;
	display: inline-grid;
	place-items: center;
	border-radius: var(--dps-radius-button);
	color: var(--dps-ink);
}

.dps-header-icons .wc-block-customer-account a:hover,
.dps-header-icons .wc-block-mini-cart__button:hover {
	background: var(--dps-canvas);
}

.wc-block-mini-cart__badge {
	background: var(--dps-primary) !important;
	color: #fff !important;
	border-color: var(--dps-card) !important;
}

/* ---------- Shop menu (dps/mega-menu) --------------------------------------- */

/* The block's wrapper steps aside so its two children sit in the header bar
   itself: the phone "Menu" button left of the logo, the <nav> on its own row. */
.dps-megamenu {
	display: contents;
}

.dps-menu-toggle {
	order: 0;
	display: none;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	padding: 0 0.7rem 0 0.55rem;
	border: 1.5px solid var(--dps-line);
	border-radius: var(--dps-radius-button);
	background: var(--dps-card);
	color: var(--dps-ink);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.dps-shopnav {
	order: 10;
	flex: 1 1 100%;
	min-width: 0;
}

.dps-shopnav__head,
.dps-shopnav__scrim {
	display: none;
}

.dps-shopnav__list {
	display: flex;
	align-items: stretch;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dps-shopnav__item--plain {
	margin-left: auto;
}

.dps-shopnav__trigger,
.dps-shopnav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 52px;
	padding: 0 0.85rem;
	border: 0;
	border-radius: var(--dps-radius-button) var(--dps-radius-button) 0 0;
	background: transparent;
	color: var(--dps-ink);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--dps-speed) var(--dps-ease), color var(--dps-speed) var(--dps-ease);
}

.dps-shopnav__icon {
	display: inline-grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: var(--dps-radius-small);
	background: var(--dps-cat-tint);
	color: var(--dps-cat);
}

.dps-shopnav__item--deals .dps-shopnav__icon {
	background: var(--dps-gold);
	color: var(--dps-night);
}

.dps-shopnav__item--plain .dps-shopnav__icon {
	background: var(--dps-canvas);
	color: var(--dps-ink-soft);
}

.dps-shopnav__chevron {
	display: inline-flex;
	color: var(--dps-ink-soft);
	transition: transform var(--dps-speed) var(--dps-ease);
}

.dps-shopnav__trigger:hover,
.dps-shopnav__link:hover {
	background: var(--dps-canvas);
	color: var(--dps-ink);
}

.dps-shopnav__item.is-open > .dps-shopnav__trigger {
	background: var(--dps-primary-tint);
	color: var(--dps-primary-deep);
}

.dps-shopnav__item.is-open .dps-shopnav__chevron {
	transform: rotate(180deg);
	color: var(--dps-primary-deep);
}

/* You are here: an iris bar under the current section. */
.dps-shopnav__item.is-current > .dps-shopnav__trigger::after,
.dps-shopnav__item.is-current > .dps-shopnav__link::after {
	content: "";
	position: absolute;
	left: 0.85rem;
	right: 0.85rem;
	bottom: 0;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: var(--dps-primary);
}

/* Panels (computers): full width, hanging from the header. */
.dps-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: var(--dps-z-panel);
	max-height: calc(100vh - 8rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--dps-card);
	border-top: var(--dps-border);
	border-bottom: var(--dps-border);
	box-shadow: var(--dps-shadow-lg);
	animation: dps-panel-in 140ms var(--dps-ease);
}

@keyframes dps-panel-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
}

/* Without the script (or before it runs) panels still open on hover/focus. */
.dps-shopnav:not(.is-ready) .dps-shopnav__item:hover > .dps-panel[hidden],
.dps-shopnav:not(.is-ready) .dps-shopnav__item:focus-within > .dps-panel[hidden] {
	display: block;
}

.dps-panel__inner {
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin: 0 auto;
	padding: 1.5rem var(--wp--style--root--padding-right, 1.5rem) 1.75rem;
}

.dps-panel__head {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding-bottom: 1.1rem;
	margin-bottom: 1.25rem;
	border-bottom: var(--dps-border);
}

.dps-panel__icon {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 12px;
	background: var(--dps-cat-tint);
	color: var(--dps-cat);
}

.dps-shopnav__item--deals .dps-panel__icon {
	background: var(--dps-gold);
	color: var(--dps-night);
}

.dps-panel__titles {
	min-width: 0;
}

.dps-panel__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
}

.dps-panel__intro {
	margin: 0.1rem 0 0;
	color: var(--dps-ink-soft);
	font-size: var(--wp--preset--font-size--small);
}

.dps-panel__all {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	margin-left: auto;
	padding: 0 1rem;
	border-radius: var(--dps-radius-button);
	background: var(--dps-primary-tint);
	color: var(--dps-primary-deep);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	white-space: nowrap;
}

.dps-panel__all:hover {
	background: var(--dps-primary);
	color: #fff;
}

.dps-panel__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 18rem;
	gap: 2rem;
}

.dps-panel__cols {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: 1.5rem 1.25rem;
	align-content: start;
}

.dps-panel__heading {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 0.45rem;
	padding-left: 0.6rem;
	color: var(--dps-ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.dps-panel__heading svg {
	color: var(--dps-cat);
}

.dps-panel__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dps-panel__col a {
	display: flex;
	align-items: center;
	min-height: 36px;
	padding: 0.35rem 0.6rem;
	border-radius: var(--dps-radius-small);
	color: var(--dps-ink);
	font-size: 0.9375rem;
	text-decoration: none;
}

.dps-panel__col a:hover {
	background: var(--dps-canvas);
	color: var(--dps-primary-deep);
}

.dps-panel__feature {
	padding: 1rem;
	border-radius: var(--dps-radius-card);
	background: var(--dps-canvas);
	align-self: start;
}

.dps-panel__feature .dps-panel__heading {
	padding-left: 0;
}

.dps-panel__feature .dps-panel__heading svg {
	color: var(--dps-gold-deep);
}

.dps-panel__deals {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dps-panel__foot,
.dps-panel__empty {
	margin: 1rem 0 0;
	color: var(--dps-ink-soft);
	font-size: var(--wp--preset--font-size--small);
}

/* Mini product card (menu panels). */
.dps-minicard {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	padding: 0.6rem;
	border: var(--dps-border);
	border-radius: var(--dps-radius-card);
	background: var(--dps-card);
	color: var(--dps-ink);
	text-decoration: none;
	transition: border-color var(--dps-speed) var(--dps-ease), box-shadow var(--dps-speed) var(--dps-ease);
}

.dps-minicard:hover {
	border-color: var(--dps-primary-soft);
	box-shadow: var(--dps-shadow-md);
	color: var(--dps-ink);
}

.dps-minicard__img {
	flex: none;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 10px;
	overflow: hidden;
	background: var(--dps-canvas);
}

.dps-minicard__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dps-minicard__body {
	display: grid;
	gap: 0.1rem;
	min-width: 0;
}

.dps-minicard__name {
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.dps-minicard__meta {
	color: var(--dps-ink-soft);
	font-size: var(--wp--preset--font-size--x-small);
}

.dps-minicard__price {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1rem;
}

.dps-minicard__price del {
	font-family: var(--wp--preset--font-family--system);
	font-weight: 400;
	font-size: 0.8125rem;
	color: var(--dps-ink-soft);
}

.dps-minicard__price ins {
	text-decoration: none;
}

.dps-minicard__price .dps-price-note {
	display: none;
}

/* ---------- Section rhythm -------------------------------------------------- */

.dps-section {
	margin-top: var(--wp--preset--spacing--80);
}

.dps-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	margin-bottom: 1.25rem;
}

.dps-section__head h2 {
	margin: 0;
}

.dps-section__head p {
	margin: 0;
}

.dps-section__lead {
	color: var(--dps-ink-soft);
}

.dps-more a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding-block: 0.3rem;
	color: var(--dps-primary-deep);
	font-weight: 600;
	text-decoration: none;
}

.dps-more a::after {
	content: "→";
	transition: transform var(--dps-speed) var(--dps-ease);
}

.dps-more a:hover {
	color: var(--dps-primary);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.dps-more a:hover::after {
	transform: translateX(3px);
}

/* ---------- Homepage hero --------------------------------------------------- */

.dps-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-color: var(--dps-night);
	color: #e2dcff;
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

/* Texture: a faint dot grid and one soft iris glow (no loud gradients). */
.dps-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(60rem 30rem at 85% 0%, rgba(91, 53, 213, 0.45), transparent 70%),
		radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1.5px) 0 0 / 22px 22px;
}

.dps-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.dps-hero__intro {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	min-width: 0;
}

.dps-hero__intro > * {
	margin: 0;
}

.dps-hero h1 {
	color: #fff;
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.05;
	letter-spacing: -0.025em;
	max-width: 16ch;
}

.dps-hero h1 em {
	font-style: normal;
	color: var(--dps-primary-soft); /* gold is reserved for savings */
}

.dps-hero__lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	max-width: 44ch;
}

.dps-hero .dps-search {
	flex: none;
	width: 100%;
	max-width: 36rem;
}

.dps-hero .dps-search .wp-block-search__inside-wrapper {
	border-color: transparent;
	padding: 5px;
	box-shadow: var(--dps-shadow-lg);
}

.dps-hero .dps-search .wp-block-search__input {
	font-size: 1.0625rem;
	padding: 0.75rem 1rem;
}

.dps-hero .dps-search .wp-block-search__button {
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
	min-height: 48px;
}

.dps-popular {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
}

.dps-popular__label {
	color: #b8b1d6;
	margin-right: 0.25rem;
}

.dps-popular a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0.3rem 0.85rem;
	border-radius: var(--dps-radius-pill);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: #fff;
	text-decoration: none;
	transition: background-color var(--dps-speed) var(--dps-ease), border-color var(--dps-speed) var(--dps-ease);
}

.dps-popular a:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
}

.dps-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0.25rem 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
	color: #d6cff5;
}

.dps-hero__facts li {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.dps-hero__facts svg {
	color: var(--dps-primary-soft);
	flex: none;
}

/* Spotlight deal (dps/spotlight-deal). */
.dps-spotlight__label {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 0.75rem;
	color: var(--dps-gold);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}

.dps-spotlight__card {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
	gap: 1.25rem;
	align-items: center;
	padding: 1rem;
	border-radius: var(--dps-radius-tile);
	background: var(--dps-card);
	color: var(--dps-ink);
	text-decoration: none;
	box-shadow: var(--dps-shadow-lg);
	transition: transform var(--dps-speed) var(--dps-ease);
}

.dps-spotlight__card:hover {
	transform: translateY(-3px);
	color: var(--dps-ink);
}

.dps-spotlight__media {
	position: relative;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 1;
	background: var(--dps-canvas);
}

.dps-spotlight__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dps-spotlight__body {
	display: grid;
	gap: 0.4rem;
	min-width: 0;
}

.dps-spotlight__meta {
	color: var(--dps-ink-soft);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
}

.dps-spotlight__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.2;
}

.dps-spotlight__price {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	font-weight: 700;
}

.dps-spotlight__price del {
	font-family: var(--wp--preset--font-family--system);
	font-size: 0.6em;
	font-weight: 400;
	color: var(--dps-ink-soft);
}

.dps-spotlight__price ins {
	text-decoration: none;
}

.dps-spotlight__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 44px;
	margin-top: 0.4rem;
	padding: 0 1.1rem;
	border-radius: var(--dps-radius-button);
	background: var(--dps-primary);
	color: #fff;
	font-weight: 600;
	justify-self: start;
	transition: background-color var(--dps-speed) var(--dps-ease);
}

.dps-spotlight__card:hover .dps-spotlight__cta {
	background: var(--dps-primary-deep);
}

/* ---------- Category tiles (dps/category-tiles) ------------------------------ */

.dps-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.dps-tile {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	padding: 1.25rem;
	border: var(--dps-border);
	border-radius: var(--dps-radius-tile);
	background: var(--dps-card);
	color: var(--dps-ink);
	text-decoration: none;
	box-shadow: var(--dps-shadow-sm);
	transition: transform var(--dps-speed) var(--dps-ease), box-shadow var(--dps-speed) var(--dps-ease), border-color var(--dps-speed) var(--dps-ease);
}

.dps-tile:hover {
	transform: translateY(-2px);
	box-shadow: var(--dps-shadow-md);
	border-color: var(--dps-cat-tint);
	color: var(--dps-ink);
}

.dps-tile__icon {
	display: inline-grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 12px;
	background: var(--dps-cat-tint);
	color: var(--dps-cat);
}

.dps-tile__icon svg {
	width: 24px;
	height: 24px;
}

.dps-tile__name,
.dps-tile__blurb {
	display: block;
}

.dps-tile__name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.2;
}

.dps-tile__blurb {
	margin-top: 0.3rem;
	color: var(--dps-ink-soft);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.dps-tile__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.75rem;
	border-top: var(--dps-border);
}

.dps-tile__count {
	color: var(--dps-ink-soft);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.dps-tile__go {
	display: inline-grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--dps-canvas);
	color: var(--dps-ink);
	transition: background-color var(--dps-speed) var(--dps-ease), color var(--dps-speed) var(--dps-ease);
}

.dps-tile:hover .dps-tile__go {
	background: var(--dps-primary);
	color: #fff;
}

/* Compact tiles (404, empty states). */
.dps-tiles--compact .dps-tile {
	padding: 1rem;
}

.dps-tiles--compact .dps-tile__blurb {
	display: none;
}

/* ---------- Product cards (product collections) ------------------------------ */

.wp-block-woocommerce-product-template .wc-block-product {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--dps-card);
	border: var(--dps-border);
	border-radius: var(--dps-radius-card);
	padding: 0 0 1rem;
	box-shadow: var(--dps-shadow-sm);
	transition: box-shadow var(--dps-speed) var(--dps-ease), transform var(--dps-speed) var(--dps-ease), border-color var(--dps-speed) var(--dps-ease);
}

.wp-block-woocommerce-product-template .wc-block-product:hover {
	box-shadow: var(--dps-shadow-md);
	border-color: #d9d4ec;
	transform: translateY(-2px);
}

.wc-block-product .wc-block-components-product-image,
.wc-block-product .wp-block-woocommerce-product-image {
	position: relative;
	margin: 0 0 0.85rem;
}

.wc-block-product .wc-block-components-product-image img,
.wc-block-product .wp-block-woocommerce-product-image img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0;
}

/* The saving chip in the price says it better than a "Sale" badge. */
.wc-block-product .wc-block-components-product-sale-badge {
	display: none;
}

.wc-block-product > :not(.wc-block-components-product-image):not(.wp-block-woocommerce-product-image) {
	margin-left: 1rem;
	margin-right: 1rem;
}

.wc-block-product .wp-block-post-title {
	font-family: var(--wp--preset--font-family--system);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
	margin-top: 0.55rem;
	margin-bottom: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wc-block-product .wp-block-post-title a {
	color: var(--dps-ink);
	text-decoration: none;
}

/* The whole card opens the product - a large target instead of a small link. */
.wc-block-product .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.wc-block-product .wp-block-post-title a:focus-visible {
	outline: none;
}

.wc-block-product:has(.wp-block-post-title a:focus-visible) {
	outline: 2px solid var(--dps-focus);
	outline-offset: 2px;
}

.wc-block-product .wc-block-components-product-price,
.wc-block-product .wp-block-woocommerce-product-price {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 700;
	margin-top: auto;
	padding-top: 0.6rem;
	font-variant-numeric: tabular-nums;
}

/* Buttons stay clickable above the card-wide link. */
.wc-block-product .wc-block-components-product-button,
.wc-block-product .wp-block-woocommerce-product-button {
	position: relative;
	z-index: 2;
	margin-top: 0.75rem;
}

.wc-block-product .wc-block-components-product-button {
	width: auto;
}

/* Card buttons are secondary (iris tint); the solid iris button is kept for
   the one main action of a page (Add to cart on the product page). */
.wc-block-product .wc-block-components-product-button .wc-block-components-product-button__button {
	width: 100%;
	min-height: 44px;
	padding: 0.6rem 0.9rem;
	border-radius: var(--dps-radius-button);
	background: var(--dps-primary-tint);
	color: var(--dps-primary-deep);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.wc-block-product .wc-block-components-product-button .wc-block-components-product-button__button:hover {
	background: var(--dps-primary);
	color: #fff;
}

/* ---------- Prices (everywhere) ---------------------------------------------- */

.wc-block-components-product-price del,
.price del {
	color: var(--dps-ink-soft);
	font-family: var(--wp--preset--font-family--system);
	font-weight: 400;
	font-size: max(0.72em, 0.75rem);
}

.wc-block-components-product-price ins,
.price ins {
	text-decoration: none;
}

/* "-30%" saving chip (plugin: includes/catalog.php). */
.dps-save {
	display: inline-block;
	margin-left: 0.15rem;
	padding: 0.05rem 0.4rem;
	border-radius: 6px;
	background: var(--dps-gold);
	color: var(--dps-night);
	font-family: var(--wp--preset--font-family--system);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.5;
	vertical-align: 0.2em;
	white-space: nowrap;
}

/* "Sale: 5 devices" under a "From" price when the discount is on a dearer
   option (plugin: includes/catalog.php). */
.dps-price-note {
	display: block;
	margin-top: 0.15rem;
	font-family: var(--wp--preset--font-family--system);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: 1.4;
	color: var(--dps-gold-deep);
}

/* ---------- Product info (rendered by dps-storefront) ------------------------ */

.dps-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dps-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.1rem 0.5rem;
	border-radius: 6px;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: 1.6;
	background: var(--dps-canvas);
	color: var(--dps-ink-soft);
	white-space: nowrap;
}

.dps-badge--platform {
	background: var(--dps-card);
	color: var(--dps-ink);
	box-shadow: inset 0 0 0 1px var(--dps-line);
}

/* "+2": further platforms, listed in full for screen readers and on the
   product page. */
.dps-badge--more {
	padding-inline: 0.4rem;
}

.dps-badge--type {
	background: var(--dps-primary-tint);
	color: var(--dps-primary-deep);
}

/* Region: filled dot = worldwide, hollow ring = region-locked (shape, not
   only colour, carries the difference). */
.dps-badge--region::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--dps-success);
}

.dps-badge--region.is-restricted::before {
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--dps-ink-soft);
}

.dps-delivery {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0.35rem 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	color: var(--dps-primary-deep);
}

.dps-delivery svg {
	flex: none;
}

.dps-delivery--large {
	font-size: var(--wp--preset--font-size--small);
}

.dps-region-notice {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	padding: 0.8rem 1rem;
	border-radius: 12px;
	background: var(--dps-gold-tint);
	color: var(--dps-ink);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

.dps-region-notice svg {
	flex: none;
	margin-top: 0.1rem;
	color: var(--dps-gold-deep);
}

.dps-region-notice.is-global {
	background: var(--dps-success-tint);
	color: var(--dps-success);
}

.dps-region-notice.is-global svg {
	color: var(--dps-success);
}

.dps-region-notice p {
	margin: 0;
}

.dps-region-notice p + p {
	margin-top: 0.25rem;
}

/* Fact tiles: the four answers a buyer needs, scannable at a glance. */
.dps-facttiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	/* Top margin left to the buy box's block gap (margin:0 would glue the
	   tiles to the price). */
	margin-inline: 0;
	margin-bottom: 0;
}

.dps-facttile {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	padding: 0.7rem 0.8rem;
	border-radius: 12px;
	background: var(--dps-canvas);
}

.dps-facttile svg {
	flex: none;
	margin-top: 0.15rem;
	color: var(--dps-primary);
}

.dps-facttile dt {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--dps-ink-soft);
	font-weight: 500;
}

.dps-facttile dd {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.35;
}

.dps-facts {
	display: grid;
	grid-template-columns: max-content 1fr;
	margin: 0;
	border: var(--dps-border);
	border-radius: var(--dps-radius-card);
	background: var(--dps-card);
	overflow: hidden;
	font-size: var(--wp--preset--font-size--small);
}

.dps-facts dt,
.dps-facts dd {
	margin: 0;
	padding: 0.65rem 1rem;
	border-bottom: var(--dps-border);
}

.dps-facts dt {
	color: var(--dps-ink-soft);
	font-weight: 500;
	padding-right: 2rem;
}

.dps-facts dd {
	font-weight: 600;
}

.dps-facts dt:nth-last-of-type(1),
.dps-facts dd:nth-last-of-type(1) {
	border-bottom: 0;
}

.dps-requirements {
	margin-top: 0.75rem;
	font-size: var(--wp--preset--font-size--small);
}

.dps-requirements summary {
	cursor: pointer;
	font-weight: 600;
	min-height: 32px;
	display: flex;
	align-items: center;
}

.dps-guide ol {
	counter-reset: dps-redeem;
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.85rem;
}

.dps-guide li {
	counter-increment: dps-redeem;
	display: grid;
	grid-template-columns: 2rem 1fr;
	gap: 0.85rem;
	align-items: start;
}

.dps-guide li::before {
	content: counter(dps-redeem);
	width: 2rem;
	height: 2rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--dps-primary-tint);
	color: var(--dps-primary-deep);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
}

.dps-guide__platform {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--dps-ink-soft);
	margin: 0 0 0.85rem;
}

.dps-guide__note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--dps-ink-soft);
	margin: 1rem 0 0;
}

/* ---------- Shop by platform (dps/platform-links) ---------------------------- */

.dps-platforms {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.dps-platform {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	min-height: 56px;
	padding: 0.6rem 1rem;
	border-radius: 12px;
	background: var(--dps-card);
	border: var(--dps-border);
	color: var(--dps-ink);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	box-shadow: var(--dps-shadow-sm);
	transition: border-color var(--dps-speed) var(--dps-ease), box-shadow var(--dps-speed) var(--dps-ease);
}

.dps-platform span {
	min-width: 1.75rem;
	padding: 0.05rem 0.45rem;
	border-radius: var(--dps-radius-pill);
	background: var(--dps-canvas);
	color: var(--dps-ink-soft);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	text-align: center;
}

.dps-platform:hover {
	border-color: var(--dps-primary-soft);
	box-shadow: var(--dps-shadow-md);
	color: var(--dps-primary-deep);
}

/* ---------- How it works (pattern delivery-steps) ----------------------------- */

.dps-howto {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 1rem;
}

.dps-howto__steps,
.dps-howto__checks {
	padding: clamp(1.25rem, 3vw, 2rem);
	border-radius: var(--dps-radius-tile);
	border: var(--dps-border);
	background: var(--dps-card);
	box-shadow: var(--dps-shadow-sm);
}

.dps-howto h2 {
	margin: 0 0 1.25rem;
}

.dps-howto h3 {
	margin: 0 0 0.9rem;
	font-size: var(--wp--preset--font-size--large);
}

.dps-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dps-steps li {
	position: relative;
	display: grid;
	gap: 0.35rem;
	align-content: start;
}

.dps-steps__icon {
	display: inline-grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: 0.4rem;
	border-radius: 12px;
	background: var(--dps-primary-tint);
	color: var(--dps-primary-deep);
}

/* A thin line joins the steps (computers). */
.dps-steps li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 1.5rem;
	left: 3.75rem;
	right: -0.5rem;
	height: 2px;
	background: var(--dps-line);
}

.dps-steps strong {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
	font-weight: 700;
}

.dps-steps span:not(.dps-steps__icon) {
	color: var(--dps-ink-soft);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.dps-howto__checks {
	background: var(--dps-primary-tint);
	border-color: transparent;
	box-shadow: none;
}

.dps-checks {
	display: grid;
	gap: 0.6rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.dps-checks li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-weight: 500;
}

.dps-checks svg {
	flex: none;
	margin-top: 0.15rem;
	padding: 2px;
	border-radius: 50%;
	background: var(--dps-primary);
	color: #fff;
}

/* ---------- FAQ grid ----------------------------------------------------------- */

.dps-faq {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	align-items: start;
}

.dps-faq .wp-block-details {
	margin: 0;
	border-radius: 12px;
}

.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	min-height: 28px;
}

.wp-block-details summary:hover {
	color: var(--dps-primary-deep);
}

/* ---------- Catalog: category band, chips, filters ----------------------------- */

.dps-catband {
	position: relative;
	overflow: hidden;
	background: var(--dps-primary-tint);
	border-radius: var(--dps-radius-tile);
	padding: clamp(1.25rem, 3vw, 2.25rem);
}

.dps-catband .wp-block-query-title,
.dps-catband h1 {
	font-size: var(--wp--preset--font-size--xx-large);
	margin: 0.35rem 0 0;
}

.dps-catband .wp-block-term-description,
.dps-catband .wp-block-term-description p {
	margin: 0.4rem 0 0;
	max-width: 62ch;
	color: var(--dps-ink-soft);
}

.dps-catband .woocommerce-breadcrumb,
.dps-catband .wc-block-breadcrumbs {
	color: var(--dps-ink-soft);
}

.dps-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin: 1.1rem 0 0;
}

.dps-chip a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 40px;
	padding: 0.4rem 0.95rem;
	border-radius: var(--dps-radius-pill);
	background: var(--dps-card);
	border: 1px solid var(--dps-line);
	color: var(--dps-ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--dps-speed) var(--dps-ease), color var(--dps-speed) var(--dps-ease);
}

.dps-chip a:hover {
	border-color: var(--dps-primary);
	color: var(--dps-primary-deep);
}

.dps-chip__count {
	font-weight: 500;
	color: var(--dps-ink-soft);
	font-size: var(--wp--preset--font-size--x-small);
}

.dps-chip.is-current a {
	background: var(--dps-primary);
	border-color: var(--dps-primary);
	color: #fff;
}

.dps-chip.is-current .dps-chip__count {
	color: #fff;
}

.dps-filters {
	background: var(--dps-card);
	border: var(--dps-border);
	border-radius: var(--dps-radius-card);
	padding: var(--wp--preset--spacing--50);
	position: sticky;
	top: 8.5rem;
	box-shadow: var(--dps-shadow-sm);
}

.dps-filters h2 {
	font-size: var(--wp--preset--font-size--large);
}

.dps-filters h3 {
	font-family: var(--wp--preset--font-family--system);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0;
}

.wc-block-catalog-sorting select,
.woocommerce-ordering select {
	min-height: 44px;
	padding: 0.45rem 2rem 0.45rem 0.9rem;
	border: 1.5px solid var(--dps-line-strong);
	border-radius: var(--dps-radius-button);
	background-color: var(--dps-card);
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--60);
	gap: 0.35rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.wp-block-query-pagination-numbers .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-grid;
	place-items: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding-inline: 0.75rem;
	border-radius: var(--dps-radius-button);
	border: 1px solid var(--dps-line);
	background: var(--dps-card);
	color: var(--dps-ink);
	text-decoration: none;
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--dps-primary);
	border-color: var(--dps-primary);
	color: #fff;
}

/* ---------- Single product ------------------------------------------------------ */

.dps-product-top {
	align-items: flex-start;
}

.dps-gallery .wp-block-woocommerce-product-image-gallery {
	max-width: none;
}

.dps-gallery .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
}

.dps-gallery .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	border-radius: var(--dps-radius-tile);
}

.dps-gallery span.onsale {
	background: var(--dps-gold);
	color: var(--dps-night);
	border-radius: var(--dps-radius-small);
	min-width: 0;
	min-height: 0;
	padding: 0.25rem 0.75rem;
	line-height: 1.5;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	top: 0.85rem !important;
	left: 0.85rem !important;
	right: auto !important;
	margin: 0 !important;
}

.dps-buybox {
	position: sticky;
	top: 9rem;
	background: var(--dps-card);
	border: var(--dps-border);
	border-radius: var(--dps-radius-tile);
	box-shadow: var(--dps-shadow-md);
}

.dps-buybox .wp-block-post-title {
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0;
}

.dps-buybox .wc-block-components-product-price,
.dps-buybox .wp-block-woocommerce-product-price {
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.dps-buybox .price del,
.dps-buybox del {
	/* Floor: in the smaller chosen-option price, half size fell to 11.6px. */
	font-size: max(0.5em, 0.8125rem);
	vertical-align: middle;
	margin-left: 0.2rem;
}

.dps-buybox .dps-save {
	font-size: 0.875rem;
	vertical-align: middle;
}

/* Divider between "what it is" and "buy it". */
.dps-perf {
	border: 0 !important;
	height: 1px !important;
	margin: 0.4rem 0 !important;
	background: var(--dps-line) !important;
	opacity: 1 !important;
	width: auto !important;
	max-width: none !important;
}

.dps-buybox form.cart,
.dps-buybox .wc-block-add-to-cart-form form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: stretch;
	margin: 0;
}

/* WooCommerce's clearfix pseudo-elements become invisible flex items, each
   adding a gap. The ID beats WooCommerce's own (more specific) rule. */
#dps-buy form.cart::before,
#dps-buy form.cart::after {
	content: none;
	display: none;
}

.dps-buybox .single_add_to_cart_button {
	white-space: nowrap;
}

/* Products with options wrap quantity + button in their own div inside
   .single_variation_wrap, a flex item that shrinks to its content: without
   these rules the button stays a short pill. */
#dps-buy .single_variation_wrap {
	flex: 1 1 100%;
	min-width: 0;
}

#dps-buy .woocommerce-variation-add-to-cart {
	display: flex;
	gap: 0.6rem;
	align-items: stretch;
}

#dps-buy .woocommerce-variation-add-to-cart .single_add_to_cart_button {
	flex: 1 1 8rem;
	min-height: 52px;
}

.dps-buybox form.cart .single_add_to_cart_button,
.dps-buybox .wc-block-add-to-cart-form .single_add_to_cart_button {
	flex: 1 1 8rem;
	min-height: 52px;
	padding: 0.85rem 1.4rem;
	font-size: 1.0625rem;
	border-radius: var(--dps-radius-button);
}

.dps-buybox .quantity input.qty {
	height: 100%;
	min-height: 52px;
	width: 4rem;
	border: 1.5px solid var(--dps-line-strong);
	border-radius: var(--dps-radius-button);
	text-align: center;
	font-size: 1rem;
}

.dps-buybox table.variations {
	width: 100%;
	border: 0;
	margin-bottom: 0.5rem;
}

.dps-buybox table.variations tr,
.dps-buybox table.variations tbody {
	display: block;
}

.dps-buybox table.variations th,
.dps-buybox table.variations td {
	display: block;
	padding: 0;
	text-align: left;
	border: 0;
}

.dps-buybox table.variations th.label {
	padding: 0 0 0.3rem;
	line-height: 1.3;
}

.dps-buybox table.variations td.value {
	padding: 0;
	line-height: 1;
}

.dps-buybox table.variations label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.dps-buybox table.variations select {
	width: 100%;
	min-height: 48px;
	padding: 0.6rem 0.9rem;
	border: 1.5px solid var(--dps-line-strong);
	border-radius: var(--dps-radius-button);
	background-color: #fff;
	margin: 0;
	font-size: 1rem;
}

.dps-buybox .reset_variations {
	display: inline-block;
	margin-top: 0.15rem;
	font-size: var(--wp--preset--font-size--x-small);
}

/* WooCommerce hides "Clear" with visibility, which still reserves its height. */
.dps-buybox .reset_variations[style*="hidden"] {
	display: none;
}

/* WooCommerce reserves room for the variation price before an option is
   chosen; collapse it until there is something to show. */
.dps-buybox .single_variation_wrap .woocommerce-variation:empty,
.dps-buybox .single_variation_wrap .woocommerce-variation[style*="display: none"] {
	display: none !important;
}

/* Products with options show ONE price: the plugin script copies the chosen
   option's price into the top price (design review v0.3, L-A). WooCommerce's
   own option price stays for screen readers (a live region), hidden visually;
   "Clear" would only return the form to the disabled state. */
#dps-buy .woocommerce-variation-price {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

#dps-buy .reset_variations {
	display: none !important;
}

/* With its price hidden, the option box holds nothing visible: drop its 20px
   margin and the table's 16px so the button sits close to the select. */
#dps-buy .woocommerce-variation {
	margin: 0 !important;
}

#dps-buy table.variations {
	margin-bottom: 0.25rem !important;
}

.dps-buybox .woocommerce-variation-price .price {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
}

.dps-buybox .stock {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--dps-success);
}

.dps-panel-card,
.woocommerce-Reviews {
	background: var(--dps-card);
	border: var(--dps-border);
	border-radius: var(--dps-radius-card);
	padding: var(--wp--preset--spacing--50);
}

/* WooCommerce tabs (Description / Reviews): underline tabs. */
.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	padding: 0 !important;
	margin: 0 0 1.25rem !important;
	border: 0 !important;
	border-bottom: var(--dps-border) !important;
}

.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
	display: none !important;
}

.woocommerce-tabs ul.tabs li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
}

.woocommerce-tabs ul.tabs li a {
	display: inline-flex !important;
	align-items: center;
	min-height: 44px;
	padding: 0.4rem 1rem !important;
	color: var(--dps-ink-soft) !important;
	text-decoration: none;
	font-weight: 600;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
}

.woocommerce-tabs ul.tabs li a:hover {
	color: var(--dps-ink) !important;
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--dps-primary-deep) !important;
	border-bottom-color: var(--dps-primary);
}

/* ---------- Sticky buy bar on phones (dps/buy-bar) ----------------------------- */

.dps-buybar {
	display: none;
}

@media (max-width: 781px) {
	.dps-buybar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: var(--dps-z-buybar);
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		padding: 0.65rem var(--wp--preset--spacing--50) calc(0.65rem + env(safe-area-inset-bottom, 0px));
		background: var(--dps-card);
		border-top: var(--dps-border);
		box-shadow: 0 -10px 30px -16px rgba(23, 20, 43, 0.4);
		transform: translateY(110%);
		visibility: hidden;
		transition: transform 220ms var(--dps-ease), visibility 0s linear 220ms;
	}

	.dps-buybar.is-visible {
		transform: translateY(0);
		visibility: visible;
		transition: transform 220ms var(--dps-ease), visibility 0s;
	}

	.dps-buybar__info {
		min-width: 0;
	}

	.dps-buybar__name {
		display: block;
		font-size: var(--wp--preset--font-size--x-small);
		color: var(--dps-ink-soft);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.dps-buybar__price {
		font-family: var(--wp--preset--font-family--display);
		font-weight: 700;
		font-size: 1.125rem;
	}

	/* One line in the bar: the struck price, the saving chip and the sale
	   note stay in the buy box. */
	.dps-buybar__price del,
	.dps-buybar__price .dps-save,
	.dps-buybar__price .dps-price-note {
		display: none;
	}

	.dps-buybar .wp-element-button {
		flex: none;
		min-height: 48px;
		padding: 0.7rem 1.3rem;
		text-decoration: none;
	}

	/* Keep the footer's last line clear of the bar. */
	body:has(.dps-buybar) .dps-footer {
		padding-bottom: 6rem !important;
	}
}

/* ---------- Footer -------------------------------------------------------------- */

.dps-footer {
	border-top: var(--dps-border);
	color: var(--dps-ink);
}

.dps-footer .dps-wordmark a {
	font-size: 1.375rem;
}

.dps-footer__about {
	color: var(--dps-ink-soft);
	max-width: 38ch;
}

.dps-footer__heading {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	letter-spacing: 0;
	margin-bottom: 0.75rem;
}

.dps-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.15rem;
	font-size: var(--wp--preset--font-size--small);
}

.dps-footer__list a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 32px;
	color: var(--dps-ink-soft);
	text-decoration: none;
}

.dps-footer__list a:hover {
	color: var(--dps-primary-deep);
	text-decoration: underline;
}

.dps-footer__list li[class*="dps-cat-"] a::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--dps-cat);
}

.dps-fineprint {
	border-top: var(--dps-border);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--dps-ink-soft);
}

/* ---------- Checkout header, cart, forms ----------------------------------------- */

.dps-secure-note {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	color: var(--dps-ink-soft);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.dps-secure-note svg {
	color: var(--dps-primary);
}

.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	display: none;
}

.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
	font-size: var(--wp--preset--font-size--large);
	margin-top: var(--wp--preset--spacing--60);
}

.wp-block-woocommerce-empty-cart-block p.has-text-align-center a {
	display: inline-block;
	background: var(--dps-primary);
	color: #fff;
	padding: 0.75rem 1.4rem;
	border-radius: var(--dps-radius-button);
	font-weight: 600;
	text-decoration: none;
}

/* WooCommerce form fields: visible 3:1 boundary. */
.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-blocks-components-select .wc-blocks-components-select__select {
	border-color: var(--dps-line-strong) !important;
}

/* ---------- Target sizes (WCAG 2.2 target size: 24px minimum; 44px on phones) ---- */

.wc-block-product .wp-block-post-title a,
.woocommerce-breadcrumb a,
.wc-block-breadcrumbs a {
	display: inline-block;
	padding-block: 0.2rem;
}

/* Filter checkboxes: 20px box; the whole label row is the target. */
.wc-block-product-filter-checkbox-list__input-wrapper,
.wc-block-product-filter-checkbox-list__input {
	width: 20px !important;
	height: 20px !important;
}

.wc-block-product-filter-checkbox-list__label {
	min-height: 28px;
	align-items: center;
	cursor: pointer;
}

/* "Show 3 more" under a long filter list (was 22px tall). */
.wc-block-product-filter-checkbox-list__show-more-button {
	min-height: 32px;
	padding: 0.25rem 0;
	color: var(--dps-primary-deep);
	font-weight: 600;
	cursor: pointer;
}

.wc-block-product-filters__open-overlay {
	min-height: 44px;
	padding: 0.5rem 1rem;
	border: 1.5px solid var(--dps-line-strong);
	border-radius: var(--dps-radius-button);
	background: var(--dps-card);
	font-weight: 600;
}

.dps-search .wp-block-search__button,
.dps-chip a {
	min-height: 44px;
}

.wc-block-mini-cart__button,
.wc-block-product-filters__open-overlay,
.wc-block-product-filters__close-overlay,
.single_add_to_cart_button:not(.disabled) {
	cursor: pointer;
}

/* Cart, mini-cart and checkout controls WooCommerce draws under 24px. */
.wc-block-components-panel__button {
	min-height: 44px;
}

a.wc-block-components-product-name,
.wc-block-components-notice-banner a,
.wc-block-components-product-button a.added_to_cart {
	display: inline-block;
	padding-block: 0.3rem !important;
}

/* WooCommerce zeroes this link's padding with !important on a longer
   selector; match it so the link is a 24px+ target. */
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content a.wc-forward {
	padding-block: 0.3rem !important;
}

/* The cart thumbnail's link is inline, so it measured one text line (21px)
   although the 64px image inside it is what people tap. */
.wc-block-cart-item__image a {
	display: block;
}

/* Checkout checkboxes: the label is the target. */
.wc-block-components-checkbox label {
	min-height: 24px;
	align-items: center;
}

/* ---------- WooCommerce component fixes ------------------------------------------ */

/* Filter checkboxes: WooCommerce draws them at ~1.2:1 contrast; give them a
   3:1+ boundary and an iris fill when ticked. */
.dps-filters .wc-block-product-filter-checkbox-list__input-wrapper::before {
	display: none;
}

.dps-filters input[type="checkbox"].wc-block-product-filter-checkbox-list__input {
	border: 1.5px solid var(--dps-line-strong);
	background: var(--dps-card);
	border-radius: 5px;
}

.dps-filters input[type="checkbox"].wc-block-product-filter-checkbox-list__input:checked {
	background: var(--dps-primary);
	border-color: var(--dps-primary);
}

.dps-filters .wc-block-product-filter-checkbox-list__input:checked + .wc-block-product-filter-checkbox-list__mark {
	color: #fff;
}

.wc-block-product-filter-removable-chips__item {
	border-radius: var(--dps-radius-pill) !important;
	border: 1px solid var(--dps-line) !important;
	background: var(--dps-card) !important;
}

/* Cart on small phones: WooCommerce's phone row needs ~364px, which spills
   past a 360px screen. Two columns: thumbnail, then product + total stacked. */
@media (max-width: 480px) {
	table.wc-block-cart-items .wc-block-cart-items__row {
		grid-template-columns: 64px minmax(0, 1fr) !important;
		column-gap: 12px !important;
	}

	table.wc-block-cart-items .wc-block-cart-item__image {
		padding-right: 0 !important;
	}

	table.wc-block-cart-items .wc-block-cart-item__product {
		grid-column: 2 !important;
	}

	table.wc-block-cart-items .wc-block-cart-item__total {
		grid-column: 2 !important;
		grid-row: 2 !important;
		justify-content: flex-start !important;
	}

	table.wc-block-cart-items .wc-block-cart-item__total .wc-block-components-product-price,
	table.wc-block-cart-items .wc-block-cart-item__total-price-and-sale-badge-wrapper {
		align-items: flex-start !important;
		text-align: left !important;
	}
}

/* ---------- Responsive ---------------------------------------------------------- */

@media (max-width: 1100px) {
	.dps-spotlight__price {
		font-size: 1.3125rem;
	}

	.dps-panel__body {
		grid-template-columns: minmax(0, 1fr);
	}

	.dps-panel__feature {
		display: none;
	}

	.dps-shopnav__trigger,
	.dps-shopnav__link {
		padding: 0 0.6rem;
	}
}

/* The hero keeps its two columns on laptops; one column from 860px down
   (design review v0.3, L1: at 1024px a single column left a large empty
   dark area). */
@media (max-width: 860px) {
	/* minmax(0, …): a plain 1fr column will not shrink below its content's
	   natural width - the search field pushed the hero 22px past a 360px
	   screen (hidden by the hero's overflow clip, so no page scroll). */
	.dps-hero__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.dps-spotlight {
		max-width: 34rem;
	}
}

@media (max-width: 1024px) {
	.dps-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dps-howto {
		grid-template-columns: minmax(0, 1fr);
	}

	.dps-filters,
	.dps-buybox {
		position: static;
	}
}

/* Computers and tablets: the menu row. */
@media (min-width: 782px) {
	.dps-shopnav {
		margin-top: 0.4rem;
	}

	/* The Activation help link icon only matters on phones. */
	.dps-shopnav__item--plain .dps-shopnav__icon {
		display: none;
	}
}

/* 782-900px: six items must fit one row - drop the section icons. */
@media (min-width: 782px) and (max-width: 900px) {
	.dps-shopnav__trigger .dps-shopnav__icon {
		display: none;
	}
}

@media (max-width: 781px) {
	/* Phone header: Menu · brand · icons on one row, search below. */
	.dps-header__bar {
		row-gap: 0.65rem;
		column-gap: 0.5rem;
		padding-bottom: 0.75rem;
	}

	/* Right of the cart, matching the source order so keyboard focus follows
	   what you see (design review v0.3, M1). */
	.dps-menu-toggle {
		display: inline-flex;
		order: 4;
	}

	.dps-header__bar > .dps-wordmark {
		margin-right: auto;
	}

	.dps-header__bar > .dps-search {
		order: 20;
		flex-basis: 100%;
		max-width: none;
	}

	/* The menu becomes a drawer from the right (where its button is). */
	.dps-shopnav {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		z-index: var(--dps-z-drawer);
		width: min(88vw, 23rem);
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--dps-card);
		box-shadow: var(--dps-shadow-lg);
		transform: translateX(102%);
		visibility: hidden;
		transition: transform 240ms var(--dps-ease), visibility 0s linear 240ms;
	}

	.dps-megamenu.is-drawer-open .dps-shopnav {
		transform: none;
		visibility: visible;
		transition: transform 240ms var(--dps-ease), visibility 0s;
	}

	.dps-shopnav__head {
		position: sticky;
		top: 0;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0.6rem 0.75rem 0.6rem 1.25rem;
		background: var(--dps-card);
		border-bottom: var(--dps-border);
	}

	.dps-shopnav__title {
		font-family: var(--wp--preset--font-family--display);
		font-size: 1.25rem;
		font-weight: 700;
	}

	.dps-shopnav__close {
		display: inline-grid;
		place-items: center;
		width: 44px;
		height: 44px;
		border: 0;
		border-radius: var(--dps-radius-button);
		background: var(--dps-canvas);
		color: var(--dps-ink);
		cursor: pointer;
	}

	.dps-shopnav__scrim {
		display: block;
		position: fixed;
		inset: 0;
		z-index: var(--dps-z-scrim);
		background: rgba(25, 17, 46, 0.55);
	}

	.dps-shopnav__scrim[hidden] {
		display: none;
	}

	.dps-shopnav__list {
		flex-direction: column;
		gap: 0;
		padding: 0.5rem 0.75rem 1.5rem;
	}

	.dps-shopnav__item {
		border-bottom: var(--dps-border);
	}

	.dps-shopnav__item--plain {
		margin-left: 0;
		border-bottom: 0;
	}

	.dps-shopnav__trigger,
	.dps-shopnav__link {
		width: 100%;
		min-height: 56px;
		padding: 0 0.5rem;
		border-radius: var(--dps-radius-button);
		font-size: 1rem;
	}

	.dps-shopnav__chevron {
		margin-left: auto;
	}

	.dps-shopnav__item.is-current > .dps-shopnav__trigger::after,
	.dps-shopnav__item.is-current > .dps-shopnav__link::after {
		left: 0;
		right: auto;
		top: 0.9rem;
		bottom: 0.9rem;
		width: 3px;
		height: auto;
		border-radius: 0 3px 3px 0;
	}

	/* Panels open in place, as lists. */
	.dps-panel {
		position: static;
		max-height: none;
		overflow: visible;
		border: 0;
		box-shadow: none;
		animation: none;
	}

	.dps-panel__inner {
		padding: 0.25rem 0.5rem 1rem;
	}

	.dps-panel__head {
		display: block;
		padding: 0;
		margin: 0 0 0.75rem;
		border: 0;
	}

	.dps-panel__icon,
	.dps-panel__titles {
		display: none;
	}

	.dps-panel__all {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.dps-panel__body {
		display: block;
	}

	.dps-panel__cols {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.dps-panel__heading {
		padding-left: 0.6rem;
	}

	.dps-panel__col a {
		min-height: 44px;
		font-size: 1rem;
	}

	.dps-panel__deals {
		grid-template-columns: 1fr;
	}

	/* Phone homepage. The header's search is right above, so the hero does
	   not repeat it (design review v0.3, L5); popular searches stay. */
	.dps-hero {
		padding-block: 2rem 2.5rem;
	}

	.dps-hero .dps-search {
		display: none;
	}

	.dps-hero__facts {
		gap: 0.4rem 1rem;
	}

	.dps-spotlight__card {
		grid-template-columns: 7.5rem minmax(0, 1fr);
		gap: 0.9rem;
		padding: 0.75rem;
	}

	.dps-spotlight__name {
		font-size: 1.0625rem;
	}

	.dps-spotlight__price {
		font-size: 1.25rem;
	}

	.dps-tiles {
		gap: 0.75rem;
	}

	.dps-tile {
		padding: 1rem;
		gap: 0.6rem;
	}

	.dps-tile__icon {
		width: 2.5rem;
		height: 2.5rem;
	}

	.dps-tile__icon svg {
		width: 20px;
		height: 20px;
	}

	.dps-tile__name {
		font-size: 1.0625rem;
	}

	.dps-tile__blurb {
		display: none;
	}

	.dps-tile__foot {
		padding-top: 0.55rem;
	}

	.dps-steps {
		grid-template-columns: 1fr;
	}

	.dps-steps li {
		grid-template-columns: 3rem 1fr;
		column-gap: 0.9rem;
	}

	.dps-steps__icon {
		grid-row: span 2;
		margin: 0;
	}

	.dps-steps li:not(:last-child)::after {
		display: none;
	}

	.dps-faq {
		grid-template-columns: 1fr;
	}

	/* Shelf chips scroll sideways instead of stacking six rows. */
	.dps-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin-inline: -0.25rem;
		padding: 0.15rem 0.25rem 0.35rem;
	}

	.dps-chips::-webkit-scrollbar {
		display: none;
	}

	.dps-chip {
		flex: none;
	}

	/* Product page: title, price and facts before the image. */
	.dps-product-top > .dps-gallery {
		order: 2;
	}

	/* Centred: the selector must out-rank WordPress's
	   `body .is-layout-flex > * { margin: 0 }`. */
	.dps-product-top > .wp-block-column.dps-gallery {
		max-width: 28rem;
		margin-inline: auto;
	}

	/* Phone catalog: the closed filter panel is just its button; no empty
	   card. The result count is noise on a phone; drawer rows get 44px. */
	.dps-filters {
		background: transparent;
		border: 0;
		padding: 0;
		box-shadow: none;
	}

	.dps-filters .wc-block-product-filters__overlay-dialog {
		background: var(--dps-card);
	}

	.wc-block-product-results-count {
		display: none;
	}

	/* The CLOSED filter drawer sits just off-screen; its footer shadow would
	   leak back onto the screen. Shadow only while it is open. */
	.wc-block-product-filters:not(.is-overlay-opened) .wc-block-product-filters__overlay-footer {
		box-shadow: none;
	}

	.wc-block-product-filters__overlay .wc-block-product-filter-checkbox-list__label {
		min-height: 44px;
	}

	.wc-block-product-filters__overlay .wc-block-product-filter-checkbox-list__show-more-button {
		min-height: 44px;
	}

	.wc-block-product-filters__close-overlay {
		min-width: 44px;
		min-height: 44px;
		display: inline-grid;
		place-items: center;
	}

	.wc-block-components-checkbox label {
		min-height: 44px;
	}
}

@media (max-width: 600px) {
	/* Two product columns on phones (WooCommerce drops to one under ~320px
	   of content width; a 360px phone has 312px). */
	.wp-block-woocommerce-product-template.wc-block-product-template__responsive.wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
	}

	.wc-block-product .wc-block-components-product-button__button {
		white-space: nowrap;
		padding-inline: 0.5rem !important;
	}

	.wp-block-woocommerce-product-template .wc-block-product {
		padding-bottom: 0.75rem;
	}

	.wc-block-product > :not(.wc-block-components-product-image):not(.wp-block-woocommerce-product-image) {
		margin-left: 0.7rem;
		margin-right: 0.7rem;
	}

	.wc-block-product .dps-badges {
		gap: 0.25rem;
	}

	.wc-block-product .dps-badge {
		padding: 0.05rem 0.4rem;
		font-size: 0.75rem;
		gap: 0.25rem;
	}

	.wc-block-product .wp-block-post-title {
		font-size: 0.875rem;
	}

	.wc-block-product .wc-block-components-product-price,
	.wc-block-product .wp-block-woocommerce-product-price {
		font-size: 1.125rem;
	}

	.dps-facts {
		grid-template-columns: 1fr;
	}

	.dps-facts dt {
		border-bottom: 0;
		padding-bottom: 0;
	}
}

/* Narrow phones. */
@media (max-width: 400px) {
	/* "Menu" stays the button's name for screen readers; the icon carries it
	   visually where space is short. */
	.dps-menu-toggle span {
		clip: rect(1px, 1px, 1px, 1px);
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		white-space: nowrap;
	}

	.dps-menu-toggle {
		width: 44px;
		justify-content: center;
		padding: 0;
	}

	.dps-wordmark a {
		font-size: 1.1875rem;
		gap: 0.45rem;
	}

	.dps-wordmark a::before {
		width: 1.75rem;
		height: 1.75rem;
		border-radius: 8px;
	}

	/* Fact tiles: icon over text so words like "Subscription" never break. */
	.dps-facttile {
		flex-direction: column;
		gap: 0.3rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dps-tile,
	.wc-block-product,
	.dps-buybar,
	.dps-shopnav,
	.dps-spotlight__card,
	.dps-minicard {
		transition: none;
	}

	.dps-panel {
		animation: none;
	}

	.dps-tile:hover,
	.dps-spotlight__card:hover,
	.wp-block-woocommerce-product-template .wc-block-product:hover {
		transform: none;
	}
}

/* ==========================================================================
   Company site (store preview mode, ADR-024)
   Header navigation, company hero, range, promise, business band, contact
   band, Products page sections, and the page styles used by About, Contact,
   For business and the policies. Same tokens as the store.
   ========================================================================== */

/* ---------- Company header ------------------------------------------------- */

.dps-header--company .dps-header__bar {
	padding-block: 0.75rem;
	min-height: 4.25rem;
}

/* The store header reorders its items for the shop menu; the company header
   keeps source order: wordmark left, navigation right. (Its navigation block
   also declines WooCommerce's auto-inserted cart and account icons through
   ignoredHookedBlocks: nothing can be bought in preview.) */
.dps-header--company .dps-header__bar > .dps-wordmark {
	order: 0;
	margin-right: auto;
}

.dps-sitenav {
	font-weight: 600;
	font-size: 0.9375rem;
}

.dps-sitenav .wp-block-navigation__container {
	gap: 0.25rem;
	align-items: center;
}

.dps-sitenav .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 0.85rem;
	border-radius: var(--dps-radius-button);
	color: var(--dps-ink);
	text-decoration: none;
	transition: background-color var(--dps-speed) var(--dps-ease), color var(--dps-speed) var(--dps-ease);
}

.dps-sitenav .wp-block-navigation-item__content:hover {
	background: var(--dps-canvas);
	color: var(--dps-primary-deep);
}

/* You are here: iris text and a short bar under the label. */
.dps-sitenav .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--dps-primary-deep);
	box-shadow: inset 0 -3px 0 var(--dps-primary);
	border-radius: var(--dps-radius-button) var(--dps-radius-button) 0 0;
}

/* "Contact" is the one action in the header: a solid button. */
.dps-sitenav .dps-sitenav__cta .wp-block-navigation-item__content {
	margin-left: 0.35rem;
	background: var(--dps-primary);
	color: #fff;
}

.dps-sitenav .dps-sitenav__cta .wp-block-navigation-item__content:hover {
	background: var(--dps-primary-deep);
	color: #fff;
}

.dps-sitenav .dps-sitenav__cta .wp-block-navigation-item__content[aria-current="page"] {
	box-shadow: none;
	border-radius: var(--dps-radius-button);
}

/* Phone menu (core navigation overlay, below 600px - WordPress's own
   breakpoint): a 44px button, a roomy list. The size rules sit inside the
   media query: outside it they would override core's "hide the button on
   wide screens" rule and show a menu button on computers. */
@media (max-width: 599px) {
	.dps-sitenav .wp-block-navigation__responsive-container-open,
	.dps-sitenav .wp-block-navigation__responsive-container-close {
		display: inline-grid;
		place-items: center;
		width: 44px;
		height: 44px;
		border-radius: var(--dps-radius-button);
		color: var(--dps-ink);
	}

	.dps-sitenav .wp-block-navigation__responsive-container-open:hover {
		background: var(--dps-canvas);
	}

	.dps-sitenav .wp-block-navigation__responsive-container.is-menu-open {
		padding: 1rem var(--wp--preset--spacing--50) 2rem;
	}

	.dps-sitenav .is-menu-open .wp-block-navigation__container {
		gap: 0.25rem;
		width: 100%;
	}

	.dps-sitenav .is-menu-open .wp-block-navigation-item {
		width: 100%;
	}

	.dps-sitenav .is-menu-open .wp-block-navigation-item__content {
		width: 100%;
		min-height: 52px;
		padding: 0 1rem;
		font-size: 1.125rem;
		border-bottom: var(--dps-border);
		border-radius: 0;
	}

	.dps-sitenav .is-menu-open .dps-sitenav__cta .wp-block-navigation-item__content {
		margin: 1rem 0 0;
		justify-content: center;
		border-radius: var(--dps-radius-button);
		border-bottom: 0;
	}
}

/* ---------- Company hero ----------------------------------------------------- */

.dps-eyebrow {
	color: var(--dps-primary-soft);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.dps-hero--company h1 {
	max-width: 18ch;
}

.dps-hero__actions {
	gap: 0.75rem;
	margin-top: 0.25rem;
}

.dps-hero__actions .wp-block-button__link {
	min-height: 48px;
	display: inline-flex;
	align-items: center;
}

/* Ghost button on the night band: white outline, white text. */
.dps-on-dark .wp-block-button.is-style-dps-ghost .wp-block-button__link {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}

.dps-on-dark .wp-block-button.is-style-dps-ghost .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	box-shadow: inset 0 0 0 1.5px #fff;
}

/* Store status card. */
.dps-status {
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border-radius: var(--dps-radius-tile);
	background: var(--dps-card);
	color: var(--dps-ink);
	box-shadow: var(--dps-shadow-lg);
}

.dps-status > * {
	margin: 0;
}

.dps-status > * + * {
	margin-top: 0.75rem;
}

.dps-status__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.3rem 0.75rem;
	border-radius: var(--dps-radius-pill);
	background: var(--dps-primary-tint);
	color: var(--dps-primary-deep);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
}

.dps-status__dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--dps-primary);
}

.dps-status__title {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25;
}

.dps-status__text {
	color: var(--dps-ink-soft);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.dps-status__facts {
	display: grid;
	gap: 0.5rem;
	padding: 0.9rem 0 0;
	border-top: var(--dps-border);
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.dps-status__facts li {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	min-width: 0;
}

.dps-status__facts svg {
	flex: none;
	color: var(--dps-primary);
}

.dps-status__facts a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	color: var(--dps-primary-deep);
	overflow-wrap: anywhere;
}

/* ---------- Promise (four commitments) ------------------------------------- */

.dps-promise {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dps-promise__item {
	padding: 1.25rem;
	border: var(--dps-border);
	border-radius: var(--dps-radius-tile);
	background: var(--dps-card);
	box-shadow: var(--dps-shadow-sm);
}

.dps-promise__title {
	margin: 0.4rem 0 0.35rem;
	font-size: 1.0625rem;
}

.dps-promise__text {
	margin: 0;
	color: var(--dps-ink-soft);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	overflow-wrap: anywhere;
}

/* ---------- Business band ------------------------------------------------------ */

.dps-band {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: clamp(1.25rem, 4vw, 3rem);
	align-items: center;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border-radius: var(--dps-radius-tile);
	background: var(--dps-primary-tint);
}

.dps-band h2 {
	margin: 0 0 0.6rem;
}

.dps-band p {
	margin: 0 0 1rem;
	max-width: 56ch;
}

.dps-band .dps-checks {
	margin: 0;
}

.dps-band__actions {
	display: grid;
	gap: 0.75rem;
	justify-items: start;
}

.dps-band__primary {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	text-decoration: none;
}

.dps-band__primary:hover {
	background: var(--dps-primary-deep);
	color: #fff;
}

.dps-band__secondary {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--dps-primary-deep);
	font-weight: 600;
}

/* ---------- Contact band ------------------------------------------------------- */

.dps-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem 2rem;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border-radius: var(--dps-radius-tile);
	background: var(--dps-night);
	color: #e2dcff;
}

.dps-cta__title {
	margin: 0 0 0.4rem;
	color: #fff;
}

.dps-cta__text {
	margin: 0;
	overflow-wrap: anywhere;
}

.dps-cta__text a {
	color: #fff;
	font-weight: 600;
}

.dps-cta__button {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	text-decoration: none;
	background: #fff;
	color: var(--dps-primary-deep);
}

.dps-cta__button:hover {
	background: var(--dps-primary-tint);
	color: var(--dps-primary-deep);
}

/* ---------- Products page: the range in detail -------------------------------- */

.dps-range {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.dps-range__family {
	display: flex;
	flex-direction: column;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border: var(--dps-border);
	border-top: 4px solid var(--dps-cat);
	border-radius: var(--dps-radius-tile);
	background: var(--dps-card);
	box-shadow: var(--dps-shadow-sm);
	/* The header is sticky on computers: land anchors below it. */
	scroll-margin-top: 6rem;
}

.dps-range__head {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.dps-range__head h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
}

.dps-range__blurb {
	margin: 0.9rem 0 1rem;
	color: var(--dps-ink-soft);
}

.dps-range__items {
	margin-bottom: 1.25rem;
}

.dps-range__items svg {
	background: var(--dps-cat);
}

.dps-range__ask {
	margin: auto 0 0;
	padding-top: 0.9rem;
	border-top: var(--dps-border);
}

/* ---------- Page content (About, Contact, For business, policies) --------------- */

.dps-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	color: var(--dps-ink-soft);
}

.dps-updated {
	color: var(--dps-ink-soft);
	font-size: var(--wp--preset--font-size--small);
}

/* Contact routes: four cards, two by two. */
.dps-contact-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.dps-contact-grid > .wp-block-group {
	margin: 0;
	padding: 1.25rem;
}

.dps-contact-grid h2,
.dps-contact-grid h3 {
	margin: 0 0 0.4rem;
	font-size: 1.125rem;
}

.dps-contact-grid p {
	margin: 0 0 0.5rem;
	color: var(--dps-ink-soft);
	font-size: var(--wp--preset--font-size--small);
}

.dps-contact-grid p:last-child {
	margin-bottom: 0;
}

.dps-contact-grid a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* Company facts (About, Contact). */
.dps-company-facts {
	padding: 1.25rem 1.5rem;
}

.dps-company-facts ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.4rem;
}

.dps-company-facts strong {
	display: inline-block;
	min-width: 9rem;
	color: var(--dps-ink-soft);
	font-weight: 600;
}

/* Label/value rows (Business details on About and Contact). Not .dps-facts:
   that is the product facts table. */
.dps-factlist li {
	display: grid;
	grid-template-columns: 9rem minmax(0, 1fr);
	column-gap: 1rem;
}

.dps-factlist strong {
	min-width: 0;
}

/* Long-form policy text: comfortable measure (about 75 characters, set by
   the 620px group in the page content) and spacing. */
.dps-legal {
	font-size: 1.0625rem;
}

.dps-legal .dps-company-facts > .wp-block-heading {
	margin: 0 0 0.75rem;
	font-size: var(--wp--preset--font-size--large);
}

.dps-legal .dps-company-facts strong {
	display: inline;
	min-width: 0;
	color: var(--dps-ink);
}

.dps-legal h2 {
	margin-top: 2.25rem;
	font-size: var(--wp--preset--font-size--x-large);
}

.dps-legal h3 {
	margin-top: 1.5rem;
	font-size: var(--wp--preset--font-size--large);
}

.dps-legal li + li {
	margin-top: 0.35rem;
}

/* Footer contact lines. */
.dps-footer__contact {
	color: var(--dps-ink-soft);
	line-height: 1.9;
}

.dps-footer__contact a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	color: var(--dps-primary-deep);
	font-weight: 600;
}

/* Page helpers: action rows hold a button and a link, checklists get iris
   ticks. (Readable line length on the wide Products page comes from a
   left-aligned 760px group in the page content, not from max-width here:
   WordPress centres every child of a constrained column with !important
   margins, so a narrower paragraph would sit indented.) */
.dps-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin-top: var(--wp--preset--spacing--60);
}

.dps-actions .wp-element-button {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	text-decoration: none;
}

.dps-actions .wp-element-button:hover {
	background: var(--dps-primary-deep);
	color: #fff;
}

.dps-actions__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
}

.dps-checklist {
	padding-left: 0;
	list-style: none;
}

.dps-checklist li {
	position: relative;
	padding-left: 2rem;
}

.dps-checklist li + li {
	margin-top: 0.6rem;
}

.dps-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2rem;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--dps-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* ---------- Company site: responsive ----------------------------------------- */

@media (max-width: 1024px) {
	.dps-promise {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	.dps-band {
		grid-template-columns: minmax(0, 1fr);
	}

	.dps-status {
		max-width: 34rem;
	}
}

@media (max-width: 781px) {
	/* The store hides tile blurbs on phones; on the company site the blurb
	   is the point - it says what each family is. */
	.dps-tiles--range .dps-tile__blurb {
		display: block;
	}
}

@media (max-width: 700px) {
	.dps-range,
	.dps-contact-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 480px) {
	.dps-tiles--range {
		grid-template-columns: minmax(0, 1fr);
	}

	.dps-factlist li {
		grid-template-columns: minmax(0, 1fr);
	}

	.dps-factlist {
		gap: 0.75rem;
	}
}

@media (max-width: 560px) {
	.dps-promise {
		grid-template-columns: minmax(0, 1fr);
	}

	.dps-hero__actions .wp-block-button {
		width: 100%;
	}

	.dps-hero__actions .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}

	.dps-cta__button,
	.dps-band__primary {
		width: 100%;
		justify-content: center;
	}

	.dps-band__actions {
		justify-items: stretch;
	}
}