/*
 * Shopo component styles.
 *
 * theme.json emits the palette, type scale, spacing scale and block defaults.
 * This file is only the components those presets cannot describe: the header,
 * the product card and grid, the department bar, the shop layout and the
 * product page. Every value below reads a preset, so the design system stays
 * in theme.json and this file never hard-codes a colour or a step.
 */

/* ================================================================ header == */

.shopo-hdr {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.shopo-hdr__wrap {
	max-width: 1320px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--md);
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--md);
}

/* -- announcement strip -- */

.shopo-hdr__strip {
	background: var(--wp--preset--color--night);
	color: var(--wp--preset--color--rule);
	font-size: var(--wp--preset--font-size--micro);
}

.shopo-hdr__strip .shopo-hdr__wrap {
	justify-content: space-between;
	min-height: 38px;
}

.shopo-hdr__promise {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.shopo-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #35d07f;
	box-shadow: 0 0 0 3px rgba(53, 208, 127, 0.18);
	flex: 0 0 auto;
}

.shopo-hdr__mini {
	display: flex;
	gap: var(--wp--preset--spacing--md);
}

.shopo-hdr__mini a {
	color: var(--wp--preset--color--rule);
	font-weight: 500;
}

.shopo-hdr__mini a:hover {
	color: var(--wp--preset--color--surface);
	text-decoration: none;
}

/* -- main bar -- */

.shopo-hdr__main .shopo-hdr__wrap {
	min-height: 76px;
	gap: var(--wp--preset--spacing--md);
}

.shopo-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	flex: 0 0 auto;
	color: var(--wp--preset--color--ink);
	font-size: 1.5rem;
	letter-spacing: -0.035em;
	line-height: 1;
}

.shopo-brand:hover {
	text-decoration: none;
}

.shopo-brand__mark {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
	flex: 0 0 auto;
}

.shopo-brand__word b {
	font-weight: 800;
}

.shopo-brand__word i {
	font-style: normal;
	font-weight: 500;
	color: var(--wp--preset--color--silver);
}

/* -- search -- */

/*
 * The search field is the widest control in the header and the primary way
 * into a 400-product catalogue, so it takes the leftover space rather than
 * sitting at a fixed width.
 */
.shopo-search {
	flex: 1 1 auto;
	min-width: 0;
	display: block;
}

.shopo-search form {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--wp--preset--color--canvas);
	border: 1.5px solid transparent;
	border-radius: 999px;
	padding: 0.3rem 0.3rem 0.3rem 1rem;
	transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.shopo-search form:focus-within {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--accent);
	box-shadow: var(--wp--preset--shadow--ring);
}

.shopo-search > form > .shopo-i {
	color: var(--wp--preset--color--silver);
	flex: 0 0 auto;
}

.shopo-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 0.7rem 0.25rem;
	font: inherit;
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--ink);
}

.shopo-search input[type="search"]::placeholder {
	color: var(--wp--preset--color--silver);
}

.shopo-search input[type="search"]:focus {
	outline: none;
}

.shopo-search input[type="search"]::-webkit-search-cancel-button {
	cursor: pointer;
}

/* Department scope sits inside the field so the control reads as one unit. */
.shopo-search__scope {
	position: relative;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	padding-inline-start: 0.85rem;
	border-inline-start: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--slate);
}

.shopo-search__scope select {
	appearance: none;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	color: inherit;
	padding: 0.35rem 1.4rem 0.35rem 0.15rem;
	max-width: 11rem;
	cursor: pointer;
}

.shopo-search__scope select:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 4px;
}

.shopo-search__scope .shopo-i {
	position: absolute;
	inset-inline-end: 0.25rem;
	pointer-events: none;
}

.shopo-search__go {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	flex: 0 0 auto;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
	border: 0;
	border-radius: 999px;
	padding: 0.7rem 1.35rem;
	font: inherit;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	transition: background 120ms ease;
}

.shopo-search__go:hover {
	background: var(--wp--preset--color--accent-press);
}

/* -- tools -- */

.shopo-hdr__tools {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	flex: 0 0 auto;
}

.shopo-tool,
.shopo-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.6rem;
	border-radius: 10px;
	color: var(--wp--preset--color--ink);
	line-height: 1.15;
}

.shopo-tool:hover,
.shopo-cart:hover {
	background: var(--wp--preset--color--canvas);
	text-decoration: none;
}

.shopo-tool__label,
.shopo-cart__text {
	display: flex;
	flex-direction: column;
}

.shopo-tool__label small,
.shopo-cart__text small {
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--slate);
}

.shopo-tool__label b,
.shopo-cart__text b {
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 700;
	white-space: nowrap;
}

.shopo-cart {
	background: var(--wp--preset--color--accent-wash);
	padding-inline: 0.85rem;
}

.shopo-cart:hover {
	background: var(--wp--preset--color--accent-wash);
	box-shadow: var(--wp--preset--shadow--hairline);
}

.shopo-cart__icon {
	position: relative;
	display: inline-flex;
	color: var(--wp--preset--color--accent);
}

/* `display:grid` below would otherwise beat the user-agent rule for [hidden],
   leaving a permanent "0" on the compare, wishlist and cart icons. */
.shopo-badge[hidden] {
	display: none;
}

.shopo-badge {
	position: absolute;
	top: -6px;
	inset-inline-end: -8px;
	min-width: 18px;
	height: 18px;
	padding-inline: 4px;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
	font-size: 0.625rem;
	font-weight: 700;
	display: grid;
	place-items: center;
	line-height: 1;
}

.shopo-tool--icon {
	padding: 0.55rem;
}

.shopo-hdr__burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	flex: 0 0 auto;
}

/* -- department bar -- */

.shopo-depts {
	border-top: 1px solid var(--wp--preset--color--rule-soft);
}

.shopo-depts ul {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 2.2vw, 2.25rem);
	list-style: none;
	margin: 0;
	padding: 0;
	min-height: 48px;
	overflow-x: auto;
	scrollbar-width: none;
}

.shopo-depts ul::-webkit-scrollbar {
	display: none;
}

.shopo-depts li {
	margin: 0;
	flex: 0 0 auto;
}

.shopo-depts a {
	display: block;
	padding: 0.5rem 0;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	color: var(--wp--preset--color--ink-soft);
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}

.shopo-depts a:hover,
.shopo-depts a[aria-current="page"] {
	color: var(--wp--preset--color--accent);
	border-bottom-color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.shopo-depts__lead {
	color: var(--wp--preset--color--accent) !important;
}

/* -- header responsive -- */

@media (max-width: 1080px) {
	.shopo-search__scope {
		display: none;
	}

	.shopo-tool__label,
	.shopo-cart__text small {
		display: none;
	}
}

/* Menu-only links (compare, saved) — the phone menu carries them because the
   phone header drops those icons. */
.shopo-depts__extra {
	display: none;
}

/* WordPress's block gap put a band of page background between the header and
   whatever follows it; the page content supplies its own top spacing. */
.wp-site-blocks > header.wp-block-template-part + * {
	margin-block-start: 0;
}

@media (max-width: 860px) {
	/* The open menu spans the full width, not the shrink-wrapped flex item. */
	.shopo-depts .shopo-hdr__wrap {
		display: block;
	}

	/*
	 * Phone header: two compact rows — menu, brand, account and cart; then
	 * search. The floating bottom bar already carries Home, Shop, Search, Saved
	 * and Cart, so the header scrolls away instead of pinning a fifth of the
	 * screen, and compare / saved move into the menu.
	 */
	.shopo-hdr {
		position: relative;
	}

	.shopo-hdr__strip {
		display: none;
	}

	.shopo-hdr__wrap {
		padding-inline: var(--wp--preset--spacing--sm);
	}

	.shopo-hdr__main .shopo-hdr__wrap {
		flex-wrap: wrap;
		min-height: 0;
		padding-block: 0.55rem 0.7rem;
		gap: 0.55rem 0.15rem;
	}

	.shopo-hdr__burger {
		display: inline-flex;
		order: 0;
		width: 40px;
		height: 40px;
		margin-inline-start: -0.45rem;
		border: 0;
		background: transparent;
	}

	.shopo-brand {
		order: 1;
		margin-inline-end: auto;
		gap: 0.5rem;
		font-size: 1.2rem;
	}

	.shopo-brand__mark {
		width: 34px;
		height: 34px;
		border-radius: 10px;
	}

	.shopo-brand__mark .shopo-i {
		width: 18px;
		height: 18px;
	}

	.shopo-hdr__tools {
		order: 2;
		gap: 0.1rem;
		margin-inline-end: -0.45rem;
	}

	.shopo-hdr__tools .shopo-tool--icon {
		display: none;
	}

	.shopo-tool,
	.shopo-cart {
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
	}

	.shopo-cart,
	.shopo-cart:hover {
		background: transparent;
		box-shadow: none;
	}

	.shopo-cart__text {
		display: none;
	}

	/* Search gets its own full-width row rather than being squeezed. */
	.shopo-search {
		order: 3;
		flex-basis: 100%;
	}

	.shopo-search form {
		padding: 0.2rem 0.2rem 0.2rem 0.85rem;
	}

	/* 16px keeps iOS Safari from zooming the page when the field is tapped. */
	.shopo-search input[type="search"] {
		padding: 0.5rem 0.25rem;
		font-size: 16px;
	}

	.shopo-search__go span {
		display: none;
	}

	.shopo-search__go {
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
	}

	.shopo-depts {
		display: none;
	}

	.shopo-depts__extra {
		display: block;
	}

	.shopo-depts.is-open {
		display: block;
	}

	.shopo-depts ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-block: var(--wp--preset--spacing--2-xs);
	}

	.shopo-depts a {
		padding: 0.7rem 0;
		border-bottom: 1px solid var(--wp--preset--color--rule-soft);
	}
}

/* ================================================================== hero == */

/*
 * The track is a scroll-snap list, not a transform carousel. That means it
 * works with no JavaScript, supports native swipe and trackpad gestures, and
 * keeps every slide in the accessibility tree instead of hiding all but one.
 */
.shopo-hero {
	position: relative;
	background: var(--wp--preset--color--night);
	color: var(--wp--preset--color--surface);
}

.shopo-hero__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
}

.shopo-hero__track::-webkit-scrollbar {
	display: none;
}

.shopo-hero__track:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -4px;
}

.shopo-hero__slide {
	flex: 0 0 100%;
	min-width: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.shopo-hero__wrap {
	max-width: 1320px;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	gap: var(--wp--preset--spacing--xl);
}

.shopo-hero__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--silver);
}

.shopo-hero__title {
	margin: 0 0 var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--banner);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--surface);
}

.shopo-hero__body {
	margin: 0 0 var(--wp--preset--spacing--md);
	max-width: 46ch;
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--rule);
}

.shopo-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2-xs);
	margin: 0;
}

/* On a phone the two calls to action share the row as equal halves instead of
   wrapping to two different widths. */
@media (max-width: 600px) {
	.shopo-hero__cta {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.shopo-hero__cta .shopo-btn {
		padding-inline: 0.75rem;
		text-align: center;
	}
}

.shopo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.9rem 1.5rem;
	border-radius: 8px;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 1.2;
	transition: background 130ms ease, color 130ms ease, border-color 130ms ease;
}

.shopo-btn:hover {
	text-decoration: none;
}

.shopo-btn--solid {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
	border: 1.5px solid var(--wp--preset--color--accent);
}

.shopo-btn--solid:hover {
	background: var(--wp--preset--color--accent-press);
	border-color: var(--wp--preset--color--accent-press);
	color: var(--wp--preset--color--surface);
}

.shopo-btn--ghost {
	background: transparent;
	color: var(--wp--preset--color--surface);
	border: 1.5px solid rgba(255, 255, 255, 0.32);
}

.shopo-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--surface);
}

/* -- slide product rail -- */

.shopo-hero__rail {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.shopo-hero__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
	margin: 0;
	padding: var(--wp--preset--spacing--xs);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	border-radius: 14px;
}

.shopo-hero__card-media {
	display: block;
	aspect-ratio: 1;
	border-radius: 10px;
	overflow: hidden;
	background: var(--wp--preset--color--canvas);
}

.shopo-hero__card-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.shopo-hero__card-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
}

.shopo-hero__card-title a {
	color: var(--wp--preset--color--ink-soft);
	overflow-wrap: anywhere;
}

/* The title anchor covers the card, so the media link above is inert. */
.shopo-hero__card-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.shopo-hero__card-price {
	font-size: var(--wp--preset--font-size--body);
	font-weight: 800;
	letter-spacing: -0.02em;
	overflow-wrap: anywhere;
}

.shopo-hero__card-price del {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 400;
	color: var(--wp--preset--color--silver);
	display: block;
}

.shopo-hero__card-price ins {
	text-decoration: none;
}

.shopo-hero__card-price br {
	display: none;
}

.shopo-hero__card-price .product-price-installments-not-in-variation,
.shopo-hero__card-price .product-price-installments {
	display: block;
	margin: 0.3rem 0 0 !important;
	padding-top: 0.3rem !important;
	font-size: 0.625rem !important;
	line-height: 1.5 !important;
	color: var(--wp--preset--color--slate) !important;
}

.shopo-hero__card-price .product-price-installments-not-in-variation:first-of-type {
	border-top: 1px dashed var(--wp--preset--color--rule);
}

.shopo-hero__card-price .mintpay-logo,
.shopo-hero__card-price .koko-logo {
	height: 11px !important;
	vertical-align: middle !important;
}

.shopo-hero__card-price .mintpay-info-icon,
.shopo-hero__card-price .koko-info {
	display: none !important;
}

.shopo-hero__flag {
	position: absolute;
	top: 0.85rem;
	inset-inline-start: 0.85rem;
	z-index: 2;
	padding: 0.15rem 0.45rem;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* -- controls -- */

/*
 * Controls sit in normal flow beneath the track rather than floating over it.
 * Absolutely positioned they overlapped whichever slide element happened to
 * reach lowest — the CTA on a short slide, the product rail on a tall one.
 * In flow they cannot collide with anything, at the cost of a row of height.
 */
.shopo-hero__controls {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--wp--preset--spacing--xs);
	max-width: 1320px;
	margin-inline: auto;
	padding: 0 var(--wp--preset--spacing--md) var(--wp--preset--spacing--md);
}

.shopo-hero__arrow {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.08);
	color: var(--wp--preset--color--surface);
}

.shopo-hero__arrow:hover {
	background: rgba(255, 255, 255, 0.18);
}

[data-shopo-hero-prev] .shopo-i {
	transform: rotate(90deg);
}

[data-shopo-hero-next] .shopo-i {
	transform: rotate(-90deg);
}

.shopo-hero__dots {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.shopo-hero__dots li {
	margin: 0;
}

.shopo-hero__dots button {
	display: block;
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.34);
	transition: width 160ms ease, background 160ms ease;
}

.shopo-hero__dots button[aria-current="true"] {
	width: 26px;
	background: var(--wp--preset--color--surface);
}

@media (max-width: 900px) {
	.shopo-hero__wrap {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--md);
		padding-top: var(--wp--preset--spacing--lg);
		padding-bottom: var(--wp--preset--spacing--xl);
	}

	.shopo-hero__body {
		font-size: var(--wp--preset--font-size--base);
	}

	.shopo-hero__rail {
		gap: var(--wp--preset--spacing--2-xs);
	}
}


/* ================================================================== card == */

.shopo-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: var(--wp--preset--spacing--sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

.shopo-card {
	color: var(--wp--preset--color--ink);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
	margin: 0;
	padding: var(--wp--preset--spacing--xs);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 14px;
	transition: border-color 140ms ease, box-shadow 140ms ease;
}

.shopo-card:hover {
	border-color: var(--wp--preset--color--rule-soft);
	box-shadow: var(--wp--preset--shadow--raised);
}

/* -- bottom row: department and the save/compare actions -- */

/* The class keeps its old name; the row now closes the card, under the
   instalment line, so the product photo is the first thing seen. */
.shopo-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	min-height: 20px;
	margin-top: 0.4rem;
	padding-top: 0.45rem;
	border-top: 1px solid var(--wp--preset--color--rule-soft);
}

.shopo-card__dept {
	flex: 1 1 auto;
	min-width: 0;
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--silver);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.shopo-card__acts {
	display: flex;
	gap: 0.15rem;
	flex: 0 0 auto;
}

/*
 * The actions sit above the card-wide title overlay, and stay visible on touch
 * where there is no hover to reveal them.
 */
.shopo-act {
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--wp--preset--color--silver);
	transition: color 120ms ease, background 120ms ease;
}

.shopo-act:hover {
	background: var(--wp--preset--color--canvas);
	color: var(--wp--preset--color--ink);
}

.shopo-act.is-on {
	color: var(--wp--preset--color--accent);
}

.shopo-act.is-on .shopo-i {
	fill: currentColor;
	fill-opacity: 0.16;
}

/* -- media -- */

.shopo-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1;
	border-radius: 10px;
	overflow: hidden;
	background: var(--wp--preset--color--canvas);
}

.shopo-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* Catalogue shots carry their own white backgrounds; multiply drops them
	   onto the tile instead of stacking two different whites. */
	mix-blend-mode: multiply;
}

.shopo-card__flag {
	position: absolute;
	top: 0.5rem;
	inset-inline-start: 0.5rem;
	padding: 0.15rem 0.45rem;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.4;
}

/* -- title -- */

.shopo-card__title {
	flex: 1 0 auto;
	margin: 0;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
}

/* Full product names: shoppers compare near-identical items by the words at
   the end of the name, which a two-line clamp was cutting off. */
.shopo-card__title a {
	color: var(--wp--preset--color--ink-soft);
	overflow-wrap: anywhere;
}

/* The title anchor is the card's hit area and its accessible name, so the
   media link is inert and no second link competes with it. */
.shopo-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	z-index: 1;
}

/* -- price and buy -- */

/* Titles run to one or two lines and not every product carries an instalment
   line, so the foot is pushed down to keep prices on a common baseline. */
.shopo-card__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: auto;
}

.shopo-card__price {
	min-width: 0;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.25;
	/* A price never breaks mid-number ("Rs. 16,200.0" / "0"). */
	white-space: nowrap;
}

.shopo-card__price del {
	display: block;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 400;
	color: var(--wp--preset--color--silver);
}

.shopo-card__price ins {
	text-decoration: none;
}

/* One instalment line for both gateways, built in shopo_compact_price_html(). */
.shopo-pay {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin-top: 0.35rem;
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--wp--preset--color--slate);
}

.shopo-pay img {
	height: 11px;
	width: auto;
	vertical-align: middle;
}

/* On a card the line sits under the price row. It runs to one or two lines
   depending on the amount, so two are always reserved and prices across a row
   stay on a common baseline. */
.shopo-card > .shopo-pay {
	align-content: flex-start;
	min-height: 2.1rem;
}

.shopo-card__buy {
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: 10px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
	transition: background 130ms ease, transform 130ms ease;
}

.shopo-card__buy:hover {
	background: var(--wp--preset--color--accent-press);
	color: var(--wp--preset--color--surface);
	text-decoration: none;
}

.shopo-card__buy:active {
	transform: scale(0.94);
}

.shopo-card__buy.loading {
	opacity: 0.6;
}

/* WooCommerce appends a "View cart" link after an AJAX add; the bar and the
   header cart already say the same thing. */
.shopo-card .added_to_cart {
	display: none;
}

@media (max-width: 600px) {
	.shopo-cards {
		grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
		gap: var(--wp--preset--spacing--2-xs);
	}

	.shopo-card {
		padding: 0.6rem;
		border-radius: 12px;
	}

	/* Two-up phone cards are about 160px wide: a smaller price and button keep
	   both on one row. */
	.shopo-card__price {
		font-size: 1rem;
	}

	.shopo-card__buy {
		width: 36px;
		height: 36px;
		border-radius: 9px;
	}
}

/* -- pagination -- */

.shopo-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.35rem;
	margin-top: var(--wp--preset--spacing--xl);
}

.shopo-pager .page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 0.7rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
}

.shopo-pager .page-numbers:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.shopo-pager .page-numbers.current {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
}

.shopo-pager .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

.shopo-empty {
	padding: var(--wp--preset--spacing--xl) 0;
}

/* ============================================================= notices == */

/* WooCommerce's notice banners: inside the page width and quieter than the
   default heavy green box — a card with a coloured edge. */
.wc-block-store-notices,
.woocommerce-notices-wrapper {
	max-width: var(--wp--style--global--wide-size, 1320px);
	margin-inline: auto;
}

.wc-block-components-notice-banner {
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 var(--wp--preset--spacing--sm) !important;
	padding: 0.75rem 1rem !important;
	border: 1px solid var(--wp--preset--color--rule) !important;
	border-inline-start: 4px solid var(--wp--preset--color--positive) !important;
	border-radius: 12px !important;
	background: var(--wp--preset--color--surface) !important;
	box-shadow: var(--wp--preset--shadow--raised);
	color: var(--wp--preset--color--ink-soft) !important;
	font-size: var(--wp--preset--font-size--tiny);
}

/* WooCommerce focuses a new notice so screen readers announce it; the banner
   is not interactive, so the browser's heavy focus ring is dropped. */
.wc-block-components-notice-banner:focus,
.wc-block-components-notice-banner:focus-visible {
	outline: none !important;
}

.wc-block-components-notice-banner.is-error {
	border-inline-start-color: #d92d20 !important;
}

.wc-block-components-notice-banner.is-info {
	border-inline-start-color: var(--wp--preset--color--accent) !important;
}

.wc-block-components-notice-banner.is-warning {
	border-inline-start-color: var(--wp--preset--color--notice) !important;
}

.wc-block-components-notice-banner > svg {
	flex: none;
	width: 20px;
	height: 20px;
	padding: 3px;
	border-radius: 50%;
	background: var(--wp--preset--color--positive) !important;
	fill: var(--wp--preset--color--surface) !important;
}

.wc-block-components-notice-banner.is-error > svg {
	background: #d92d20 !important;
}

.wc-block-components-notice-banner.is-info > svg {
	background: var(--wp--preset--color--accent) !important;
}

.wc-block-components-notice-banner.is-warning > svg {
	background: var(--wp--preset--color--notice) !important;
}

.wc-block-components-notice-banner__content .wc-forward,
.wc-block-components-notice-banner__content .button {
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: var(--wp--preset--color--accent) !important;
	font-weight: 600;
	text-decoration: none !important;
	opacity: 1 !important;
}

/* ================================================ wishlist and compare == */

.shopo-saved__status {
	color: var(--wp--preset--color--slate);
}

.shopo-saved__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.5rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.shopo-saved__price del {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 400;
	color: var(--wp--preset--color--silver);
}

.shopo-saved__price .shopo-pay {
	flex-basis: 100%;
	margin-top: 0;
}

.shopo-saved__buy,
.shopo-saved__remove {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 0.9rem;
	border-radius: 10px;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
}

.shopo-saved__buy {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
}

.shopo-saved__buy:hover {
	background: var(--wp--preset--color--accent-press);
	color: var(--wp--preset--color--surface);
	text-decoration: none;
}

.shopo-saved__remove {
	border: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--slate);
	cursor: pointer;
}

.shopo-saved__remove:hover {
	border-color: var(--wp--preset--color--ink-soft);
	color: var(--wp--preset--color--ink);
}

.shopo-card .shopo-saved__remove {
	min-height: 28px;
	padding: 0 0.55rem;
	font-size: var(--wp--preset--font-size--micro);
}

.shopo-card .shopo-saved__buy {
	margin-top: 0.35rem;
}

.shopo-compare {
	overflow-x: auto;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 14px;
	background: var(--wp--preset--color--surface);
}

.shopo-compare table {
	width: 100%;
	min-width: calc(8.5rem + var(--n, 2) * 12rem);
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--wp--preset--font-size--tiny);
}

.shopo-compare th,
.shopo-compare td {
	padding: 0.75rem;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	text-align: start;
	vertical-align: top;
}

.shopo-compare tr:last-child > * {
	border-bottom: 0;
}

/* The row labels stay put while a long comparison scrolls sideways. */
.shopo-compare tbody th,
.shopo-compare thead td {
	position: sticky;
	inset-inline-start: 0;
	z-index: 1;
	width: 8.5rem;
	background: var(--wp--preset--color--canvas);
	color: var(--wp--preset--color--slate);
	font-weight: 600;
}

.shopo-compare__product a {
	display: grid;
	gap: 0.5rem;
	color: var(--wp--preset--color--ink);
}

.shopo-compare__product img {
	width: 100%;
	max-width: 10rem;
	aspect-ratio: 1;
	object-fit: contain;
	border-radius: 10px;
	background: var(--wp--preset--color--canvas);
	mix-blend-mode: multiply;
}

.shopo-compare__name {
	font-weight: 600;
	line-height: 1.35;
}

.shopo-compare__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* ==================================================== floating mobile bar = */

/*
 * Fixed to the bottom of the viewport inside the thumb arc. Hidden on wider
 * screens, where the header's own tools row is always reachable.
 */
.shopo-bar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 90;
	display: none;
	background: color-mix(in srgb, var(--wp--preset--color--surface) 88%, transparent);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-top: 1px solid var(--wp--preset--color--rule);
	padding-bottom: env(safe-area-inset-bottom);
}

.shopo-bar__tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.15rem;
	flex: 1 1 0;
	min-width: 0;
	padding: 0.5rem 0.25rem 0.45rem;
	color: var(--wp--preset--color--slate);
	font-size: 0.625rem;
	font-weight: 600;
}

.shopo-bar__tab:hover {
	text-decoration: none;
}

.shopo-bar__tab.is-current {
	color: var(--wp--preset--color--accent);
}

.shopo-bar__icon {
	position: relative;
	display: inline-flex;
}

.shopo-bar__label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.shopo-badge--bar {
	top: -5px;
	inset-inline-end: -9px;
}

@media (max-width: 860px) {
	.shopo-bar {
		display: flex;
	}

	/* Reserve the bar's height so it never covers the end of a page. */
	body {
		padding-bottom: calc(60px + env(safe-area-inset-bottom));
	}
}

/* ========================================================= category grid == */

.shopo-depts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: var(--wp--preset--spacing--sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

.shopo-depts-grid li {
	margin: 0;
}

.shopo-depts-grid a {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	height: 100%;
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 12px;
	color: var(--wp--preset--color--ink);
	transition: border-color 140ms ease, box-shadow 140ms ease;
}

.shopo-depts-grid a:hover {
	border-color: var(--wp--preset--color--accent);
	box-shadow: var(--wp--preset--shadow--raised);
	text-decoration: none;
}

/* No department has artwork, so the tile is drawn: a stable hue per slug and
   the department's initial. Cheaper than an image and never breaks. */
.shopo-depts-grid__tile {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	flex: 0 0 auto;
	border-radius: 10px;
	background: hsl(var(--h) 78% 96%);
	color: hsl(var(--h) 62% 38%);
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1;
}

.shopo-depts-grid__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.shopo-depts-grid__text b {
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 1.25;
}

.shopo-depts-grid__text small {
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--silver);
}

.shopo-cats ul,
.shopo-cats .wc-block-product-categories-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: var(--wp--preset--spacing--sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

.shopo-cats li {
	margin: 0;
}

.shopo-cats li a {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 12px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	transition: border-color 140ms ease, box-shadow 140ms ease;
}

.shopo-cats li a:hover {
	border-color: var(--wp--preset--color--accent);
	box-shadow: var(--wp--preset--shadow--raised);
	text-decoration: none;
}

.shopo-cats img {
	width: 48px;
	height: 48px;
	object-fit: contain;
	flex: 0 0 auto;
	border-radius: 8px;
	background: var(--wp--preset--color--canvas);
}

.shopo-cats .wc-block-product-categories-list-item-count {
	margin-inline-start: auto;
	color: var(--wp--preset--color--silver);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 500;
}

/* ============================================================ shop layout = */

.shopo-shop__layout {
	align-items: flex-start;
}

.shopo-shop__filters {
	position: sticky;
	top: calc(76px + var(--wp--preset--spacing--sm));
}

.shopo-facets ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--tiny);
}

/* WooCommerce renders the count as a sibling of the link, not inside it, so the
   row is laid out on the <li> and the count is pushed to the trailing edge. */
.shopo-facets li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin: 0;
}

.shopo-facets li a {
	padding: 0.3rem 0;
	color: var(--wp--preset--color--slate);
	flex: 1 1 auto;
	min-width: 0;
}

.shopo-facets .wc-block-product-categories-list-item-count {
	color: var(--wp--preset--color--silver);
	font-size: var(--wp--preset--font-size--micro);
	flex: 0 0 auto;
}

.shopo-facets .wc-block-product-categories-list-item-count::before {
	content: "(";
}

.shopo-facets .wc-block-product-categories-list-item-count::after {
	content: ")";
}

/* The nested list is a child of the <li>, which is now a flex row; it has to
   span the full row rather than sit beside the parent link. */
.shopo-facets li > ul {
	flex: 1 0 100%;
}

.shopo-facets li a:hover,
.shopo-facets .current-cat > a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.shopo-facets ul ul {
	padding-inline-start: 0.85rem;
	border-inline-start: 1px solid var(--wp--preset--color--rule);
	margin-block: 0.25rem;
}

/* The sorting control is a bare <select>; give it the same treatment as the
   rest of the form controls so it does not read as an unstyled default. */
.shopo-toolbar select,
.woocommerce-ordering select {
	appearance: none;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 8px;
	padding: 0.5rem 2rem 0.5rem 0.75rem;
	font: inherit;
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 17px) 51%, calc(100% - 12px) 51%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.shopo-toolbar select:hover,
.woocommerce-ordering select:hover {
	border-color: var(--wp--preset--color--rule);
	box-shadow: var(--wp--preset--shadow--hairline);
}

.shopo-filters {
	margin-top: var(--wp--preset--spacing--2-xs);
}

.shopo-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--sm);
	padding-bottom: var(--wp--preset--spacing--xs);
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

/* Added by shopo.js; the desktop sidebar never shows it. */
.shopo-filter-toggle {
	display: none;
}

@media (max-width: 781px) {
	.shopo-shop__filters {
		position: static;
		background: var(--wp--preset--color--surface);
		border: 1px solid var(--wp--preset--color--rule);
		border-radius: 12px;
		padding: var(--wp--preset--spacing--sm);
	}

	/* Folded behind one toggle so products are on the first screen. */
	.shopo-shop__filters.is-collapsible {
		padding: 0;
	}

	.shopo-shop__filters.is-collapsible > :not(.shopo-filter-toggle) {
		margin-inline: var(--wp--preset--spacing--sm);
	}

	.shopo-shop__filters.is-collapsible.is-open {
		padding-bottom: var(--wp--preset--spacing--sm);
	}

	.shopo-shop__filters.is-collapsible:not(.is-open) > :not(.shopo-filter-toggle) {
		display: none;
	}

	.shopo-filter-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem;
		width: 100%;
		padding: 0.85rem var(--wp--preset--spacing--sm);
		border: 0;
		border-radius: 12px;
		background: transparent;
		color: var(--wp--preset--color--ink);
		font: inherit;
		font-size: var(--wp--preset--font-size--tiny);
		font-weight: 700;
		cursor: pointer;
	}

	.shopo-filter-toggle .shopo-i {
		transition: transform 150ms ease;
	}

	.is-open > .shopo-filter-toggle .shopo-i {
		transform: rotate(180deg);
	}
}

/* ================================================================ footer == */

.shopo-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.shopo-footer__links li {
	margin-bottom: 0.5rem;
}

.shopo-footer__links a {
	color: var(--wp--preset--color--rule);
}

.shopo-footer__links a:hover {
	color: var(--wp--preset--color--surface);
}

/* ================================================================== a11y == */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* ========================================================== product page = */

/*
 * Implements the Product Page Redesign artboards. Two columns above the fold —
 * gallery and a single buy area — then a tabbed body with a help rail, and a
 * sticky buy bar that appears once the buy area scrolls out of view.
 */

.pp {
	padding-top: var(--wp--preset--spacing--sm);
}

/* With no notice to show, the empty notices wrapper still pushed the
   breadcrumb down by a full block gap. */
.pp > .wc-block-store-notices:not(:has(.wc-block-components-notice-banner, .woocommerce-message, .woocommerce-error, .woocommerce-info)) {
	display: none;
}

.pp > .wc-block-store-notices:not(:has(.wc-block-components-notice-banner, .woocommerce-message, .woocommerce-error, .woocommerce-info)) + .wc-block-breadcrumbs {
	margin-block-start: 0;
}

.pp-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
	gap: var(--wp--preset--spacing--xl);
	align-items: start;
	margin-top: var(--wp--preset--spacing--sm);
}

/* ---------------------------------------------------------- gallery ----- */

.pp-gallery__stage {
	position: relative;
	background: var(--wp--preset--color--canvas);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 18px;
	aspect-ratio: 1;
	overflow: hidden;
	display: grid;
	place-items: center;
}

.pp-gallery__frame {
	margin: 0;
	width: 100%;
	height: 100%;
	grid-area: 1 / 1;
}

.pp-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.pp-gallery__flags {
	position: absolute;
	top: var(--wp--preset--spacing--xs);
	inset-inline-start: var(--wp--preset--spacing--xs);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4rem;
}

.pp-flag {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.3rem 0.6rem;
	border-radius: 8px;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	line-height: 1.4;
}

.pp-flag--save {
	background: var(--wp--preset--color--positive);
	color: var(--wp--preset--color--surface);
	letter-spacing: 0.04em;
}

.pp-flag--genuine {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink-soft);
	border: 1px solid var(--wp--preset--color--rule);
	font-weight: 600;
}

.pp-flag--genuine .shopo-i {
	color: var(--wp--preset--color--positive);
}

.pp-gallery__count {
	position: absolute;
	top: var(--wp--preset--spacing--xs);
	inset-inline-end: var(--wp--preset--spacing--xs);
	margin: 0;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	color: var(--wp--preset--color--slate);
}

.pp-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
	gap: 0.5rem;
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
}

.pp-gallery__thumbs li {
	margin: 0;
}

.pp-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	padding: 0.3rem;
	border: 1.5px solid var(--wp--preset--color--rule);
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
}

.pp-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.pp-thumb.is-active {
	border-color: var(--wp--preset--color--accent);
	box-shadow: var(--wp--preset--shadow--ring);
}

/* ---------------------------------------------------------- buy area ---- */

.pp-identity {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-bottom: 0.6rem;
}

.pp-identity__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	color: var(--wp--preset--color--ink-soft);
}

.pp-identity__brand b {
	display: inline-grid;
	place-items: center;
	height: 20px;
	padding-inline: 8px;
	border-radius: 6px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
	font-size: 0.5625rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.pp-identity__sku {
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--silver);
}

.pp-title {
	margin: 0 0 var(--wp--preset--spacing--2-xs);
	font-size: var(--wp--preset--font-size--section);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.03em;
}

.pp-lede {
	margin: 0 0 var(--wp--preset--spacing--2-xs);
	max-width: 58ch;
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--slate);
}

.pp-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 0.9rem;
	margin: 0 0 var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--tiny);
}

.pp-stars {
	color: #f0a020;
	letter-spacing: 0.06em;
}

.pp-stock {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--wp--preset--color--positive);
	font-weight: 600;
}

.pp-stock i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.pp-stock.is-out {
	color: var(--wp--preset--color--notice);
}

/* -- price card -- */

.pp-price-card {
	padding: var(--wp--preset--spacing--sm);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 16px;
	background: var(--wp--preset--color--surface);
}

.pp-price-row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.pp-price {
	font-size: var(--wp--preset--font-size--section);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.pp-price-was {
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--silver);
	font-weight: 500;
}

.pp-save-chip {
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--positive) 12%, transparent);
	color: var(--wp--preset--color--positive);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
}

.pp-price-note {
	margin: 0.5rem 0 0;
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--slate);
}

.pp-instalment {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: var(--wp--preset--spacing--xs);
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 10px;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	color: var(--wp--preset--color--ink-soft);
}

.pp-instalment .shopo-i {
	color: var(--wp--preset--color--accent);
	flex: 0 0 auto;
}

/*
 * WooCommerce's own add-to-cart form supplies the quantity input and the
 * submit button; these rules restyle it in place rather than replacing it,
 * so variation handling and stock validation keep working.
 */
.pp-cart {
	margin-top: var(--wp--preset--spacing--xs);
}

.pp-cart form.cart {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
}

.pp-cart .quantity {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 10px;
	overflow: hidden;
}

.pp-cart .quantity input {
	width: 62px;
	border: 0;
	padding: 0.85rem 0.5rem;
	text-align: center;
	font: inherit;
	font-weight: 700;
	background: transparent;
}

.pp-cart .single_add_to_cart_button {
	flex: 1 1 240px;
	min-height: 54px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
	border: 0;
	border-radius: 10px;
	padding-inline: var(--wp--preset--spacing--md);
	font: inherit;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	transition: background 130ms ease;
}

.pp-cart .single_add_to_cart_button:hover {
	background: var(--wp--preset--color--accent-press);
}

.pp-buynow {
	display: block;
	margin-top: 0.6rem;
	padding: 0.95rem 1rem;
	border-radius: 10px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
	text-align: center;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
}

.pp-buynow:hover {
	background: var(--wp--preset--color--night);
	color: var(--wp--preset--color--surface);
	text-decoration: none;
}

/* -- assurance row -- */

.pp-assure {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--wp--preset--spacing--sm);
	list-style: none;
	margin: var(--wp--preset--spacing--sm) 0 0;
	padding: var(--wp--preset--spacing--sm) 0 0;
	border-top: 1px solid var(--wp--preset--color--rule-soft);
}

.pp-assure li {
	display: flex;
	gap: 0.6rem;
	margin: 0;
}

.pp-assure__icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	border-radius: 9px;
	background: var(--wp--preset--color--accent-wash);
	color: var(--wp--preset--color--accent);
}

.pp-assure b {
	display: block;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 700;
	line-height: 1.3;
}

.pp-assure small {
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--slate);
}

/* -- payment rail -- */

.pp-rail {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: var(--wp--preset--spacing--sm) 0 0;
	padding-top: var(--wp--preset--spacing--sm);
	border-top: 1px solid var(--wp--preset--color--rule-soft);
	font-size: var(--wp--preset--font-size--micro);
}

.pp-rail > span {
	color: var(--wp--preset--color--silver);
	margin-inline-end: 0.25rem;
}

.pp-rail i {
	font-style: normal;
	padding: 0.25rem 0.55rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 6px;
	color: var(--wp--preset--color--ink-soft);
	font-weight: 600;
}

/* ------------------------------------------------------------- body ----- */

.pp-tabs {
	display: flex;
	gap: var(--wp--preset--spacing--md);
	margin-top: var(--wp--preset--spacing--xl);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	overflow-x: auto;
	scrollbar-width: none;
}

.pp-tabs::-webkit-scrollbar {
	display: none;
}

.pp-tabs a {
	padding: 0.85rem 0;
	white-space: nowrap;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	color: var(--wp--preset--color--slate);
	border-bottom: 2px solid transparent;
}

.pp-tabs a:hover,
.pp-tabs a.is-active {
	color: var(--wp--preset--color--ink);
	border-bottom-color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.pp-cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--wp--preset--spacing--xl);
	align-items: start;
	margin-top: var(--wp--preset--spacing--lg);
}

.pp-section {
	margin-bottom: var(--wp--preset--spacing--xl);
	scroll-margin-top: 150px;
}

.pp-eyebrow {
	margin: 0 0 0.35rem;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--silver);
}

.pp-section h2 {
	margin: 0 0 var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--title);
}

.pp-prose {
	color: var(--wp--preset--color--ink-soft);
}

.pp-prose img {
	border-radius: 10px;
}

.pp-prose table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/* -- spec table -- */

/* The frame sits on the wrapper: border-radius cannot clip a collapsed table. */
.pp-specs-wrap {
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 12px;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}

.pp-specs {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--tiny);
}

.pp-specs th,
.pp-specs td {
	padding: 0.85rem 1rem;
	text-align: start;
	vertical-align: top;
	border-bottom: 1px solid var(--wp--preset--color--rule-soft);
}

.pp-specs tr:last-child th,
.pp-specs tr:last-child td {
	border-bottom: 0;
}

.pp-specs th {
	width: 34%;
	font-weight: 500;
	color: var(--wp--preset--color--slate);
	background: var(--wp--preset--color--canvas);
}

.pp-specs td {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

/* -- delivery facts -- */

.pp-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--wp--preset--spacing--sm);
}

.pp-facts > div {
	padding: var(--wp--preset--spacing--sm);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
}

.pp-facts b {
	display: block;
	margin-bottom: 0.3rem;
	font-size: var(--wp--preset--font-size--tiny);
}

.pp-facts p {
	margin: 0;
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--slate);
}

/* -- faq -- */

.pp-faq {
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 12px;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}

.pp-faq details {
	border-bottom: 1px solid var(--wp--preset--color--rule-soft);
}

.pp-faq details:last-child {
	border-bottom: 0;
}

.pp-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem;
	cursor: pointer;
	list-style: none;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
}

.pp-faq summary::-webkit-details-marker {
	display: none;
}

.pp-faq summary span {
	color: var(--wp--preset--color--accent);
	font-size: 1.1rem;
	transition: transform 140ms ease;
}

.pp-faq details[open] summary span {
	transform: rotate(45deg);
}

.pp-faq p {
	margin: 0;
	padding: 0 1rem 1rem;
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--slate);
}

/* -- help rail -- */

.pp-side {
	position: sticky;
	top: 150px;
	display: grid;
	gap: var(--wp--preset--spacing--sm);
}

.pp-help {
	padding: var(--wp--preset--spacing--md);
	border-radius: 16px;
	background: var(--wp--preset--color--night);
	color: var(--wp--preset--color--surface);
}

.pp-help__icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.1);
	color: var(--wp--preset--color--surface);
	margin-bottom: var(--wp--preset--spacing--xs);
}

.pp-help h2 {
	margin: 0 0 0.4rem;
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--surface);
}

.pp-help p {
	margin: 0 0 var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--rule);
}

.pp-help__wa,
.pp-help__call {
	display: block;
	padding: 0.8rem 1rem;
	border-radius: 10px;
	text-align: center;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 700;
}

.pp-help__wa {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
	margin-bottom: 0.5rem;
}

.pp-help__wa:hover {
	background: var(--wp--preset--color--accent-press);
	color: var(--wp--preset--color--surface);
	text-decoration: none;
}

.pp-help__call {
	background: rgba(255, 255, 255, 0.1);
	color: var(--wp--preset--color--surface);
}

.pp-help__call:hover {
	background: rgba(255, 255, 255, 0.18);
	color: var(--wp--preset--color--surface);
	text-decoration: none;
}

.pp-help small {
	display: block;
	margin-top: 0.6rem;
	text-align: center;
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--silver);
}

.pp-stockcard {
	padding: var(--wp--preset--spacing--sm);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 14px;
	background: var(--wp--preset--color--surface);
}

.pp-stockcard b {
	font-size: var(--wp--preset--font-size--tiny);
}

.pp-stockcard p {
	margin: 0.3rem 0 0;
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--slate);
}

/* ------------------------------------------------------- sticky buy bar - */

.pp-sticky {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 95;
	background: color-mix(in srgb, var(--wp--preset--color--surface) 92%, transparent);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-top: 1px solid var(--wp--preset--color--rule);
}

.pp-sticky[hidden] {
	display: none;
}

.pp-sticky__wrap {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
	max-width: 1320px;
	margin-inline: auto;
	padding: 0.7rem var(--wp--preset--spacing--md);
}

.pp-sticky__media {
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	border-radius: 8px;
	overflow: hidden;
	background: var(--wp--preset--color--canvas);
}

.pp-sticky__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.pp-sticky__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin-inline-end: auto;
}

.pp-sticky__text b {
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.pp-sticky__text small {
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--slate);
}

.pp-sticky__acts {
	display: flex;
	gap: 0.5rem;
	flex: 0 0 auto;
}

.pp-sticky__buy,
.pp-sticky__cart {
	padding: 0.75rem 1.25rem;
	border-radius: 10px;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 700;
	white-space: nowrap;
}

.pp-sticky__buy {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
}

.pp-sticky__cart {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
}

.pp-sticky__buy:hover,
.pp-sticky__cart:hover {
	color: var(--wp--preset--color--surface);
	text-decoration: none;
	filter: brightness(1.08);
}

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 1080px) {
	.pp-cols {
		grid-template-columns: minmax(0, 1fr);
	}

	.pp-side {
		position: static;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	}
}

@media (max-width: 900px) {
	.pp-top {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--md);
	}

	.pp-title {
		font-size: var(--wp--preset--font-size--title);
	}

	.pp-price {
		font-size: var(--wp--preset--font-size--title);
	}
}

@media (max-width: 860px) {
	/* Product pages drop the mobile bar (mobile-bar.php), so this bar takes the
	   bottom edge itself. */
	.pp-sticky {
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.pp-sticky__text {
		display: none;
	}

	.pp-sticky__acts {
		flex: 1 1 auto;
	}

	.pp-sticky__buy,
	.pp-sticky__cart {
		flex: 1 1 0;
		text-align: center;
	}
}

/* ------------------------------------------------- payment comparison --- */

/*
 * A <details> so the comparison is closed by default and needs no JavaScript
 * to open. The summary carries the headline instalment; the panel shows what
 * each option actually costs, because paying in three costs more here.
 */
.pp-pay {
	margin-top: var(--wp--preset--spacing--xs);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
}

.pp-pay > summary {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem 0.9rem;
	cursor: pointer;
	list-style: none;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	color: var(--wp--preset--color--ink-soft);
}

.pp-pay > summary::-webkit-details-marker {
	display: none;
}

.pp-pay > summary > .shopo-i {
	color: var(--wp--preset--color--accent);
	flex: 0 0 auto;
}

.pp-pay__lead {
	flex: 1 1 auto;
	min-width: 0;
}

.pp-pay__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	flex: 0 0 auto;
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}

.pp-pay__toggle .shopo-i {
	transition: transform 140ms ease;
}

.pp-pay[open] .pp-pay__toggle .shopo-i {
	transform: rotate(180deg);
}

.pp-pay__panel {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0.6rem;
	padding: 0 0.9rem 0.9rem;
}

.pp-pay__opt {
	padding: 0.8rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 10px;
	background: var(--wp--preset--color--canvas);
}

.pp-pay__opt--best {
	border-color: var(--wp--preset--color--positive);
	background: color-mix(in srgb, var(--wp--preset--color--positive) 6%, transparent);
}

.pp-pay__kind {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.4rem;
	margin: 0 0 0.35rem;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--silver);
}

.pp-pay__kind i {
	font-style: normal;
	padding: 0.1rem 0.4rem;
	border-radius: 999px;
	background: var(--wp--preset--color--positive);
	color: var(--wp--preset--color--surface);
	font-size: 0.5625rem;
	letter-spacing: 0.06em;
}

.pp-pay__amt {
	margin: 0;
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
}

/* The amount and its qualifier are too wide together in a ~180px column, and
   breaking mid-phrase reads as "Rs. 6,000.00 /" — so the qualifier gets a line. */
.pp-pay__amt small {
	display: block;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 500;
	color: var(--wp--preset--color--slate);
}

.pp-pay__note {
	margin: 0.2rem 0 0;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	color: var(--wp--preset--color--ink-soft);
}

.pp-pay__methods {
	margin: 0.3rem 0 0;
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--slate);
}

.pp-pay__foot {
	grid-column: 1 / -1;
	margin: 0;
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--silver);
}

/* ==================================================== quantity stepper == */

/* − / + around WooCommerce's quantity field (woocommerce.php, shopo.js). */
.shopo-qty__btn {
	display: grid;
	place-items: center;
	align-self: stretch;
	width: 44px;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: 1.35rem;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background 120ms ease;
}

.shopo-qty__btn:hover {
	background: var(--wp--preset--color--canvas);
}

.pp-cart .quantity input.qty {
	width: 44px;
	padding-inline: 0;
	-moz-appearance: textfield;
	appearance: textfield;
}

.pp-cart .quantity input.qty::-webkit-inner-spin-button,
.pp-cart .quantity input.qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Sold-individually products render a hidden field: no stepper at all. */
.pp-cart .quantity:has(input[type="hidden"]) {
	display: none;
}

@media (max-width: 600px) {
	/* Stepper and Add to cart share one row; Buy it now spans below. */
	.pp-cart form.cart:not(.variations_form),
	.pp-cart .woocommerce-variation-add-to-cart {
		display: flex;
		flex-wrap: nowrap;
		gap: 0.5rem;
	}

	.pp-cart .single_add_to_cart_button {
		flex: 1 1 0;
		min-width: 0;
		min-height: 52px;
		padding-inline: 0.75rem;
	}

	.shopo-qty__btn {
		width: 40px;
	}

	.pp-cart .quantity input.qty {
		width: 36px;
	}
}

/* ============================================================ hero v2 == */

/* Each slide carries its own colour, so a swipe reads as a new department. */
.shopo-hero__slide--tone-0 {
	background: radial-gradient(900px 420px at 85% 15%, rgba(80, 120, 255, 0.18), transparent 60%), linear-gradient(135deg, #0b0d12 0%, #17213d 100%);
}

.shopo-hero__slide--tone-1 {
	background: radial-gradient(900px 420px at 85% 15%, rgba(255, 255, 255, 0.16), transparent 60%), linear-gradient(135deg, #1b4dff 0%, #0b2a99 100%);
}

.shopo-hero__slide--tone-2 {
	background: radial-gradient(900px 420px at 85% 15%, rgba(164, 248, 107, 0.14), transparent 60%), linear-gradient(135deg, #0f3d3e 0%, #0a5c55 100%);
}

.shopo-hero__slide--tone-3 {
	background: radial-gradient(900px 420px at 85% 15%, rgba(255, 190, 120, 0.14), transparent 60%), linear-gradient(135deg, #2a1650 0%, #5b3494 100%);
}

.shopo-hero__slide--tone-1 .shopo-hero__eyebrow,
.shopo-hero__slide--tone-2 .shopo-hero__eyebrow,
.shopo-hero__slide--tone-3 .shopo-hero__eyebrow {
	color: rgba(255, 255, 255, 0.72);
}

/* On the blue slide the solid button would vanish into the background. */
.shopo-hero__slide--tone-1 .shopo-btn--solid {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent);
}

/* Cards float on the slide: no border, a soft lift, and no category row. */
.shopo-hero__rail .shopo-card {
	border: 0;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.shopo-hero__rail .shopo-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.34);
}

.shopo-hero__rail .shopo-card {
	transition: transform 160ms ease, box-shadow 160ms ease;
}

.shopo-hero__rail .shopo-card__top {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.shopo-hero__rail .shopo-card,
	.shopo-hero__rail .shopo-card:hover {
		transform: none;
		transition: none;
	}
}

@media (max-width: 600px) {
	/* Phones: headline, buttons and two products all above the fold. */
	.shopo-hero__wrap {
		padding-top: var(--wp--preset--spacing--md);
		padding-bottom: var(--wp--preset--spacing--md);
		gap: var(--wp--preset--spacing--sm);
	}

	.shopo-hero__title {
		font-size: clamp(1.85rem, 8.5vw, 2.4rem);
	}

	.shopo-hero__body {
		display: none;
	}

	.shopo-hero__rail {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.shopo-hero__rail > li:nth-child(n + 3) {
		display: none;
	}
}

/* ========================================================== my account == */

/* The account page runs on the 720px page template; it needs a wider canvas. */
.woocommerce-account .wp-block-post-content > .woocommerce {
	max-width: 1080px;
}

/* Signed in: section list on the left, the chosen section on the right. */
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--lg);
	align-items: start;
}

.woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none !important;
	width: auto !important;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0.4rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 14px;
}

.woocommerce-MyAccount-navigation li {
	margin: 0;
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.7rem 0.85rem;
	border-radius: 10px;
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-MyAccount-navigation a:hover {
	background: var(--wp--preset--color--canvas);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.woocommerce-MyAccount-navigation .is-active a {
	background: var(--wp--preset--color--accent-wash);
	color: var(--wp--preset--color--accent);
}

.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 0.25rem !important;
	padding-top: 0.25rem;
	border-top: 1px solid var(--wp--preset--color--rule-soft);
}

.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--wp--preset--color--slate);
}

.woocommerce-MyAccount-content {
	padding: var(--wp--preset--spacing--md);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 14px;
}

.woocommerce-MyAccount-content > :first-child {
	margin-top: 0;
}

/* -- dashboard (woocommerce/myaccount/dashboard.php) -- */

.shopo-acct__hello {
	margin: 0;
	font-size: var(--wp--preset--font-size--title);
}

.shopo-acct__lede {
	margin: 0.25rem 0 var(--wp--preset--spacing--md);
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--tiny);
}

.shopo-acct__tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: var(--wp--preset--spacing--xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.shopo-acct__tiles a {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.75rem;
	align-items: center;
	height: 100%;
	padding: 0.9rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 12px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: border-color 130ms ease, box-shadow 130ms ease;
}

.shopo-acct__tiles a:hover {
	border-color: var(--wp--preset--color--accent);
	box-shadow: var(--wp--preset--shadow--raised);
	text-decoration: none;
}

.shopo-acct__icon {
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--wp--preset--color--accent-wash);
	color: var(--wp--preset--color--accent);
}

.shopo-acct__tiles b {
	font-size: var(--wp--preset--font-size--tiny);
}

.shopo-acct__tiles small {
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--micro);
}

.shopo-acct__recent {
	margin-top: var(--wp--preset--spacing--lg);
}

.shopo-acct__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var(--wp--preset--spacing--xs);
}

.shopo-acct__head h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
}

.shopo-acct__head a {
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
}

.shopo-acct__orders {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 12px;
	overflow: hidden;
}

.shopo-acct__orders li + li {
	border-top: 1px solid var(--wp--preset--color--rule-soft);
}

.shopo-acct__orders a {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.15rem 0.75rem;
	align-items: center;
	padding: 0.8rem 0.95rem;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--tiny);
	text-decoration: none;
}

.shopo-acct__orders a:hover {
	background: var(--wp--preset--color--canvas);
	text-decoration: none;
}

.shopo-acct__order-id {
	font-weight: 700;
}

.shopo-acct__order-date {
	grid-column: 1;
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--micro);
}

.shopo-acct__status {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	background: var(--wp--preset--color--canvas);
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 700;
}

.shopo-acct__status--completed,
.shopo-acct__status--processing {
	background: color-mix(in srgb, var(--wp--preset--color--positive) 14%, transparent);
	color: var(--wp--preset--color--positive);
}

.shopo-acct__status--on-hold,
.shopo-acct__status--pending {
	background: color-mix(in srgb, var(--wp--preset--color--notice) 14%, transparent);
	color: var(--wp--preset--color--notice);
}

.shopo-acct__orders strong {
	grid-column: 2;
	justify-self: end;
}

.shopo-acct__empty {
	margin: 0;
	padding: var(--wp--preset--spacing--sm);
	border: 1px dashed var(--wp--preset--color--rule);
	border-radius: 12px;
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--tiny);
}

/* -- forms: sign in, create account, addresses, account details -- */

/* Signed out: "Sign in" and "Create account" as two cards side by side. */
.woocommerce-account #customer_login {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--wp--preset--spacing--md);
}

.woocommerce-account #customer_login::before,
.woocommerce-account #customer_login::after {
	display: none;
}

.woocommerce-account #customer_login > div,
.woocommerce-account .woocommerce > form.woocommerce-form-login,
.woocommerce-account .woocommerce > form.lost_reset_password,
.woocommerce-account .woocommerce > form.woocommerce-ResetPassword {
	float: none;
	width: auto;
	padding: var(--wp--preset--spacing--md);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 14px;
}

/* With registration off the sign-in form stands alone: keep it compact. */
.woocommerce-account .woocommerce > form.woocommerce-form-login,
.woocommerce-account .woocommerce > form.lost_reset_password {
	max-width: 440px;
	margin-inline: auto;
}

.woocommerce-account #customer_login h2 {
	margin: 0 0 var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--title);
}

.woocommerce-account form .form-row {
	margin: 0 0 0.9rem;
	padding: 0;
}

.woocommerce-account form label {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
}

.woocommerce-account form label.woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 500;
}

/* 16px text stops iOS zooming the page on focus. */
.woocommerce-account input.input-text,
.woocommerce-account select,
.woocommerce-account textarea {
	width: 100%;
	min-height: 46px;
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: 16px;
}

.woocommerce-account input.input-text:focus,
.woocommerce-account select:focus,
.woocommerce-account textarea:focus {
	border-color: var(--wp--preset--color--accent);
	box-shadow: var(--wp--preset--shadow--ring);
	outline: none;
}

.woocommerce-account .woocommerce .button,
.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 1.25rem;
	border: 0;
	border-radius: 10px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
	font: inherit;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.woocommerce-account .woocommerce .button:hover {
	background: var(--wp--preset--color--accent-press);
	color: var(--wp--preset--color--surface);
}

.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit {
	width: 100%;
	margin-top: 0.5rem;
}

.woocommerce-account .woocommerce-LostPassword {
	margin: 0.75rem 0 0;
	font-size: var(--wp--preset--font-size--tiny);
}

/* Addresses as two cards. */
.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--wp--preset--spacing--sm);
}

.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after {
	display: none;
}

.woocommerce-account .woocommerce-Address {
	float: none !important;
	width: auto !important;
	padding: var(--wp--preset--spacing--sm);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 12px;
}

/* Orders table. */
.woocommerce-account .woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--tiny);
}

.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .woocommerce-orders-table td {
	padding: 0.7rem 0.5rem;
	border-bottom: 1px solid var(--wp--preset--color--rule-soft);
	text-align: start;
}

.woocommerce-account .woocommerce-orders-table .button {
	min-height: 36px;
	padding-inline: 0.85rem;
}

@media (max-width: 781px) {
	.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--sm);
	}

	/* Section list becomes a row of swipeable chips. */
	.woocommerce-MyAccount-navigation ul {
		display: flex;
		gap: 0.25rem;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.woocommerce-MyAccount-navigation a {
		white-space: nowrap;
	}

	.woocommerce-MyAccount-navigation-link--customer-logout {
		margin: 0 !important;
		padding: 0;
		border: 0;
	}

	.woocommerce-MyAccount-content {
		padding: var(--wp--preset--spacing--sm);
	}
}

/* =========================================================== cart page == */

/* Empty cart (content set by the cart-page script): a plain message, one clear
   action, then this week's arrivals in the site's own cards. */
.shopo-empty-cart {
	padding-block: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--sm);
}

.shopo-empty-cart__title {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--title);
}

.shopo-empty-cart__text {
	margin: 0 0 var(--wp--preset--spacing--md);
	color: var(--wp--preset--color--slate);
}

.shopo-empty-cart__cta .wp-block-button__link {
	padding: 0.85rem 1.5rem;
	border-radius: 10px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
	font-weight: 700;
}

.shopo-empty-cart__cta .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent-press);
}

.shopo-empty-cart__rail-title {
	margin: var(--wp--preset--spacing--xl) 0 var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--title);
}

/* ======================================================= review fixes 1 == */

/* WooCommerce's clearfix pseudo-elements became grid items and pushed the
   account menu into the second column. */
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation)::before,
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation)::after {
	content: none;
	display: none;
}

/* WooCommerce frames the login and register forms itself; inside our cards
   that read as a box within a box. */
.woocommerce-account #customer_login form.login,
.woocommerce-account #customer_login form.register {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.woocommerce-MyAccount-navigation a,
.woocommerce-MyAccount-navigation .is-active a {
	text-decoration: none;
}

/* Hero controls float on the bottom of the slide instead of sitting on a flat
   band of page colour beneath it. The slide reserves the room. */
.shopo-hero__wrap {
	padding-bottom: calc(var(--wp--preset--spacing--lg) + 36px + var(--wp--preset--spacing--md));
}

.shopo-hero__controls {
	position: relative;
	z-index: 2;
	margin-top: calc(-36px - var(--wp--preset--spacing--md));
}

@media (max-width: 900px) {
	.shopo-hero__wrap {
		padding-bottom: calc(var(--wp--preset--spacing--lg) + 36px + var(--wp--preset--spacing--md));
	}
}

@media (max-width: 600px) {
	.shopo-hero__wrap {
		padding-bottom: calc(var(--wp--preset--spacing--sm) + 36px + var(--wp--preset--spacing--md));
	}
}

/* Dashboard tiles: the row stretches to the tile. A percentage height on the
   link could not resolve inside the grid row, so each tile spilled over the
   top of the next one. */
.shopo-acct__tiles > li {
	display: flex;
}

.shopo-acct__tiles a {
	flex: 1 1 auto;
	height: auto;
}

/* Account menu: fixed spacing between items (another stylesheet gave the list
   items large margins) and no underline on the current section. */
.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.woocommerce-MyAccount-navigation li {
	margin: 0 !important;
	padding: 0 !important;
}

.woocommerce-MyAccount-navigation a,
.woocommerce-MyAccount-navigation a[aria-current] {
	text-decoration: none !important;
}

@media (max-width: 781px) {
	.woocommerce-MyAccount-navigation ul {
		flex-direction: row;
	}
}

/* ===================================================== account sizing == */

/* Account pages: the title and the account area share one 1080px column. The
   page template held both to the 720px reading width, which squeezed the
   dashboard and left the title and the boxes on different edges. */
.woocommerce-account main.wp-block-group > .wp-block-post-title,
.woocommerce-account main.wp-block-group > .wp-block-post-content {
	max-width: 1080px;
}

.woocommerce-MyAccount-navigation a {
	padding: 0.8rem 1rem;
	font-size: var(--wp--preset--font-size--base);
}

.shopo-acct__lede {
	font-size: var(--wp--preset--font-size--base);
}

.shopo-acct__tiles {
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: var(--wp--preset--spacing--sm);
}

.shopo-acct__tiles a {
	padding: 1.1rem;
}

.shopo-acct__icon {
	width: 44px;
	height: 44px;
}

.shopo-acct__tiles b {
	font-size: var(--wp--preset--font-size--base);
}

.shopo-acct__tiles small {
	font-size: var(--wp--preset--font-size--tiny);
}

.shopo-acct__head h3 {
	font-size: var(--wp--preset--font-size--lead);
}

.shopo-acct__orders a {
	padding: 1rem 1.1rem;
	font-size: var(--wp--preset--font-size--base);
}

.shopo-acct__order-date {
	font-size: var(--wp--preset--font-size--tiny);
}

.shopo-acct__status {
	font-size: var(--wp--preset--font-size--tiny);
}

/* Four account tiles sit as a clean 2 × 2 instead of three and an orphan. */
.shopo-acct__tiles {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 600px) {
	.shopo-acct__tiles {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Card names: two lines, the rest behind an ellipsis (the full name is the
   link's tooltip and the product page heading). Two lines are always reserved
   so prices across a row stay level. */
.shopo-card__title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(2 * 1.4em);
}

/* "From" in front of a variable product's lowest price. */
.shopo-card__from {
	margin-inline-end: 0.15rem;
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: 0;
}

/* ========================================================= cart drawer == */

/* Floating "View cart" button (desktop only; phones use the bar's Cart tab). */
.shopo-fcart {
	position: fixed;
	inset-inline-end: 24px;
	bottom: 24px;
	z-index: 150;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.7rem 1.15rem 0.7rem 0.9rem;
	border: 0;
	border-radius: 18px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
	font: inherit;
	text-align: start;
	box-shadow: 0 14px 32px rgba(27, 77, 255, 0.35);
	cursor: pointer;
	transition: background 130ms ease, transform 130ms ease;
}

.shopo-fcart[hidden] {
	display: none;
}

.shopo-fcart:hover {
	background: var(--wp--preset--color--accent-press);
	transform: translateY(-2px);
}

.shopo-fcart__icon {
	position: relative;
	display: inline-flex;
}

.shopo-fcart__count {
	position: absolute;
	top: -8px;
	inset-inline-end: -9px;
	display: grid;
	place-items: center;
	min-width: 18px;
	height: 18px;
	padding-inline: 4px;
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent);
	font-size: 0.625rem;
	font-weight: 800;
	line-height: 1;
}

.shopo-fcart__text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.shopo-fcart__text small {
	font-size: var(--wp--preset--font-size--micro);
	opacity: 0.85;
}

.shopo-fcart__text b {
	font-size: var(--wp--preset--font-size--base);
	font-weight: 800;
}

/* Clear of the product page's sticky buy bar while it is showing. */
body:has(.pp-sticky:not([hidden])) .shopo-fcart {
	bottom: 96px;
}

/* The drawer. */
.shopo-drawer[hidden] {
	display: none;
}

.shopo-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
}

.shopo-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(10, 12, 16, 0.45);
	opacity: 0;
	transition: opacity 220ms ease;
}

.shopo-drawer__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	inset-inline-end: 0;
	display: flex;
	flex-direction: column;
	width: min(420px, 100%);
	background: var(--wp--preset--color--surface);
	box-shadow: -24px 0 48px rgba(0, 0, 0, 0.18);
	transform: translateX(100%);
	transition: transform 230ms ease;
}

.shopo-drawer.is-open .shopo-drawer__scrim {
	opacity: 1;
}

.shopo-drawer.is-open .shopo-drawer__panel {
	transform: none;
}

.shopo-drawer__panel.is-busy .shopo-drawer__body {
	opacity: 0.55;
	pointer-events: none;
}

html.shopo-drawer-lock {
	overflow: hidden;
}

.shopo-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.shopo-drawer__head h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--lead);
}

.shopo-drawer__head h2 span {
	color: var(--wp--preset--color--slate);
	font-weight: 500;
}

.shopo-drawer__close {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}

.shopo-drawer__close:hover {
	background: var(--wp--preset--color--canvas);
}

.shopo-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 0.25rem 1.25rem;
	transition: opacity 150ms ease;
}

.shopo-drawer__status,
.shopo-drawer__empty {
	padding: 2rem 0;
	color: var(--wp--preset--color--slate);
	text-align: center;
}

.shopo-drawer__empty a {
	font-weight: 700;
}

.shopo-drawer__error {
	margin: 0.75rem 0 0;
	padding: 0.6rem 0.8rem;
	border-radius: 10px;
	background: color-mix(in srgb, #d92d20 10%, transparent);
	color: #b42318;
	font-size: var(--wp--preset--font-size--tiny);
}

.shopo-drawer__items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.shopo-drawer__item {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	gap: 0.85rem;
	align-items: start;
	padding: 0.95rem 0;
	border-bottom: 1px solid var(--wp--preset--color--rule-soft);
}

.shopo-drawer__media {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 10px;
	background: var(--wp--preset--color--canvas);
	overflow: hidden;
}

.shopo-drawer__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.shopo-drawer__info {
	min-width: 0;
}

.shopo-drawer__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	line-height: 1.35;
}

.shopo-drawer__variation {
	display: block;
	margin-top: 0.2rem;
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--micro);
}

.shopo-drawer__row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

.shopo-drawer__qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 8px;
}

.shopo-drawer__qty button {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: 1rem;
	cursor: pointer;
}

.shopo-drawer__qty button:disabled {
	color: var(--wp--preset--color--silver);
	cursor: default;
}

.shopo-drawer__qty b {
	min-width: 24px;
	font-size: var(--wp--preset--font-size--tiny);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.shopo-drawer__remove {
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--slate);
	font: inherit;
	font-size: var(--wp--preset--font-size--micro);
	text-decoration: underline;
	cursor: pointer;
}

.shopo-drawer__remove:hover {
	color: #b42318;
}

.shopo-drawer__line {
	font-size: var(--wp--preset--font-size--tiny);
	white-space: nowrap;
}

.shopo-drawer__foot {
	padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
	border-top: 1px solid var(--wp--preset--color--rule);
}

.shopo-drawer__foot[hidden] {
	display: none;
}

.shopo-drawer__subtotal {
	display: flex;
	justify-content: space-between;
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
}

.shopo-drawer__subtotal b {
	font-size: var(--wp--preset--font-size--body);
	font-weight: 800;
}

.shopo-drawer__note {
	margin: 0.3rem 0 0.9rem;
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--micro);
}

.shopo-drawer__checkout {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	border-radius: 12px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
	font-weight: 700;
}

.shopo-drawer__checkout:hover {
	background: var(--wp--preset--color--accent-press);
	color: var(--wp--preset--color--surface);
	text-decoration: none;
}

.shopo-drawer__cart {
	display: block;
	margin-top: 0.65rem;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.shopo-drawer__scrim,
	.shopo-drawer__panel,
	.shopo-fcart {
		transition: none;
	}
}

/* ============================================= phone bar (floating, dark) == */

@media (max-width: 860px) {
	.shopo-fcart {
		display: none !important;
	}

	.shopo-bar {
		inset-inline: 10px;
		bottom: calc(10px + env(safe-area-inset-bottom));
		gap: 2px;
		padding: 6px;
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 20px;
		background: var(--wp--preset--color--night);
		box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.shopo-bar__tab {
		padding: 0.55rem 0.25rem 0.5rem;
		border-radius: 14px;
		color: rgba(255, 255, 255, 0.7);
		transition: background 130ms ease, color 130ms ease;
	}

	.shopo-bar__tab:hover {
		color: var(--wp--preset--color--surface);
	}

	.shopo-bar__tab.is-current {
		background: rgba(255, 255, 255, 0.1);
		color: var(--wp--preset--color--surface);
	}

	.shopo-badge--bar {
		box-shadow: 0 0 0 2px var(--wp--preset--color--night);
	}

	/* Reserve the floating bar's height plus its gap. */
	body {
		padding-bottom: calc(84px + env(safe-area-inset-bottom));
	}
}

/* Hero rails carry a pool of up to six products (inc/hero.php). shopo.js shuffles
   it per visitor; three show on wide screens, two on phones. */
.shopo-hero__rail > li:nth-child(n + 4) {
	display: none;
}

/* =================================================================
   Payment marks, home promises, product buy box, photo viewer
   ================================================================= */

/* -- payment marks (shopo_payment_marks) -- */

.shopo-marks {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
}

.shopo-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	height: 26px;
	min-width: 40px;
	padding: 0 0.45rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 6px;
	background: #fff;
	color: var(--wp--preset--color--ink-soft);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	box-sizing: border-box;
}

.shopo-mark svg {
	display: block;
	flex: 0 0 auto;
}

.shopo-mark--visa {
	color: #1a1f71;
	font-size: 0.8125rem;
	font-style: italic;
	font-weight: 900;
	letter-spacing: 0.02em;
}

.shopo-mark--amex {
	border-color: #1f72cd;
	background: #1f72cd;
	color: #fff;
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.06em;
}

.shopo-mark--img img {
	display: block;
	height: 14px;
	width: auto;
}

.shopo-mark--cash {
	color: #047857;
}

/* -- home promises (inc/values.php) -- */

.shopo-values2 {
	padding-block: var(--wp--preset--spacing--sm);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--surface);
}

.shopo-values2__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--md);
	box-sizing: content-box;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 var(--wp--style--root--padding-right, 1.25rem) 0 var(--wp--style--root--padding-left, 1.25rem);
	list-style: none;
}

.shopo-values2__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
	margin: 0;
}

.shopo-values2__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--wp--preset--color--accent-wash);
	color: var(--wp--preset--color--accent);
}

.shopo-values2__item:nth-child(2) .shopo-values2__icon {
	background: #f3e8ff;
	color: #7c3aed;
}

.shopo-values2__item:nth-child(3) .shopo-values2__icon {
	background: #dcfce7;
	color: #047857;
}

.shopo-values2__item:nth-child(4) .shopo-values2__icon {
	background: #ffedd5;
	color: #c2410c;
}

.shopo-values2__text {
	min-width: 0;
}

.shopo-values2__text b {
	display: block;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 700;
	line-height: 1.25;
}

.shopo-values2__text small {
	display: block;
	margin-top: 0.1rem;
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--micro);
	line-height: 1.35;
}

.shopo-values2__marks {
	display: block;
	margin-top: 0.3rem;
}

.shopo-values2 .shopo-mark {
	height: 20px;
	min-width: 0;
	padding: 0 0.3rem;
	border-radius: 5px;
	font-size: 0.5625rem;
}

.shopo-values2 .shopo-mark--visa {
	font-size: 0.6875rem;
}

.shopo-values2 .shopo-mark--mc svg {
	width: 21px;
	height: 13px;
}

.shopo-values2 .shopo-mark--img img {
	height: 11px;
}

@media (max-width: 960px) {
	.shopo-values2__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem var(--wp--preset--spacing--sm);
	}
}

/* On a phone the four promises become a 2 × 2 of small tiles. */
@media (max-width: 600px) {
	.shopo-values2 {
		padding-block: 0.75rem;
	}

	.shopo-values2__list {
		gap: 0.5rem;
		padding-inline: 16px;
	}

	.shopo-values2__item {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
		padding: 0.75rem;
		border: 1px solid var(--wp--preset--color--rule);
		border-radius: 14px;
		background: var(--wp--preset--color--canvas);
	}

	.shopo-values2__icon {
		width: 34px;
		height: 34px;
		border-radius: 10px;
	}

	.shopo-values2__icon .shopo-i {
		width: 18px;
		height: 18px;
	}
}

/* -- "Genuine" mark on cards -- */

.shopo-card__genuine {
	position: absolute;
	left: 0.5rem;
	bottom: 0.5rem;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	padding: 0.22rem 0.5rem 0.22rem 0.35rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
	color: #047857;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1;
	pointer-events: none;
}

.shopo-card__genuine .shopo-i {
	width: 11px;
	height: 11px;
	stroke-width: 3;
}

/* -- product page: instalment line with logos -- */

.pp-pay__lead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.4rem;
}

.pp-pay__logos {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.pp-pay__logos img {
	display: block;
	height: 15px;
	width: auto;
}

.pp-pay__methods {
	margin-top: 0.5rem;
}

.pp-pay__methods .shopo-mark {
	height: 24px;
}

/* -- product page: save / compare -- */

.pp-save {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.6rem;
	margin-top: 0.6rem;
}

.pp-save__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	min-height: 46px;
	padding: 0 0.8rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.pp-save__btn:hover {
	border-color: var(--wp--preset--color--ink-soft);
}

.pp-save__on,
.pp-save__btn.is-on .pp-save__off {
	display: none;
}

.pp-save__btn.is-on .pp-save__on {
	display: inline;
}

.pp-save__btn[data-shopo-toggle="wishlist"].is-on {
	border-color: #fda4af;
	background: #fff1f2;
	color: #e11d48;
}

.pp-save__btn[data-shopo-toggle="wishlist"].is-on .shopo-i path {
	fill: currentColor;
}

.pp-save__btn[data-shopo-toggle="compare"].is-on {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
	background: var(--wp--preset--color--accent-wash);
	color: var(--wp--preset--color--accent);
}

.pp-save__btn.is-on .shopo-i {
	animation: pp-pop 0.32s ease;
}

@keyframes pp-pop {
	50% {
		transform: scale(1.3);
	}
}

.pp-save__links {
	display: none;
	justify-content: center;
	gap: 1.25rem;
	margin: 0.55rem 0 0;
	font-size: 0.8125rem;
	font-weight: 600;
}

.pp-save__go {
	display: none;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.pp-price-card:has(.pp-save__btn.is-on) .pp-save__links {
	display: flex;
}

.pp-price-card:has([data-shopo-toggle="wishlist"].is-on) .pp-save__go--wishlist,
.pp-price-card:has([data-shopo-toggle="compare"].is-on) .pp-save__go--compare {
	display: inline;
}

/* -- product page: assurance panel -- */

.pp-assure {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	padding: 0;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 14px;
	background: var(--wp--preset--color--surface);
	overflow: hidden;
}

.pp-assure li {
	align-items: flex-start;
	padding: 0.85rem 0.9rem;
}

.pp-assure li + li {
	border-left: 1px solid var(--wp--preset--color--rule-soft);
}

.pp-assure li:nth-child(2) .pp-assure__icon {
	background: #dcfce7;
	color: #047857;
}

.pp-assure li:nth-child(3) .pp-assure__icon {
	background: #f3e8ff;
	color: #7c3aed;
}

.pp-assure b {
	font-size: 0.8125rem;
}

.pp-assure small {
	display: block;
	margin-top: 0.1rem;
	line-height: 1.4;
}

@media (max-width: 600px) {
	.pp-assure {
		grid-template-columns: 1fr;
	}

	.pp-assure li {
		align-items: center;
		padding: 0.7rem 0.85rem;
	}

	.pp-assure li + li {
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--rule-soft);
	}
}

/* -- product page: secure checkout rail -- */

.pp-rail {
	gap: 0.5rem;
}

.pp-rail > .pp-rail__lead {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-inline-end: 0.2rem;
	color: var(--wp--preset--color--slate);
	font-weight: 600;
}

/* -- product page: gallery zoom -- */

.pp-gallery__stage {
	position: relative;
}

.pp-gallery__frame {
	cursor: zoom-in;
}

.pp-gallery__zoom {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	transition: transform 0.15s ease;
}

.pp-gallery__zoom:hover {
	transform: scale(1.06);
}

/* -- photo viewer -- */

html.pp-lb-open {
	overflow: hidden;
}

.pp-lb {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	background: #fff;
	color: var(--wp--preset--color--ink);
}

/* The viewer's own display:grid outranks the browser's [hidden] rule, which
   left it on screen after closing. */
.pp-lb[hidden] {
	display: none;
}

.pp-lb__bar {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.6rem 0.75rem 0.6rem 1.1rem;
	padding-top: max(0.6rem, env(safe-area-inset-top));
}

.pp-lb__count {
	font-size: 0.875rem;
	font-weight: 700;
}

.pp-lb__hint {
	flex: 1 1 auto;
	color: var(--wp--preset--color--slate);
	font-size: 0.75rem;
}

.pp-lb__close {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--canvas);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}

.pp-lb__stage {
	position: relative;
	overflow: hidden;
	touch-action: none;
	user-select: none;
}

.pp-lb__img {
	position: absolute;
	inset: 0;
	max-width: calc(100% - 2rem);
	max-height: calc(100% - 1rem);
	margin: auto;
	object-fit: contain;
	transform-origin: center;
	transition: transform 0.22s ease, opacity 0.2s ease;
	cursor: zoom-in;
	-webkit-user-drag: none;
}

.pp-lb__img.is-still {
	transition: opacity 0.2s ease;
}

.pp-lb__img.is-zoomed {
	cursor: grab;
}

.pp-lb__img.is-loading {
	opacity: 0.35;
}

.pp-lb__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.1);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	transform: translateY(-50%);
}

.pp-lb__nav--prev {
	left: 1rem;
}

.pp-lb__nav--next {
	right: 1rem;
}

.pp-lb__strip {
	display: flex;
	justify-content: safe center;
	gap: 0.5rem;
	padding: 0.7rem 1rem;
	padding-bottom: max(0.7rem, env(safe-area-inset-bottom));
	overflow-x: auto;
	scrollbar-width: none;
	border-top: 1px solid var(--wp--preset--color--rule-soft);
}

.pp-lb__thumb {
	flex: 0 0 auto;
	width: 58px;
	height: 58px;
	padding: 3px;
	border: 2px solid transparent;
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}

.pp-lb__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pp-lb__thumb.is-active {
	border-color: var(--wp--preset--color--accent);
	opacity: 1;
}

@media (max-width: 600px) {
	.pp-lb__nav {
		width: 40px;
		height: 40px;
	}

	.pp-lb__nav--prev {
		left: 0.5rem;
	}

	.pp-lb__nav--next {
		right: 0.5rem;
	}

	.pp-lb__thumb {
		width: 50px;
		height: 50px;
	}
}

/* -- shop refine form (inc/shop-filters.php) -- */

.shopo-refine {
	display: grid;
	gap: 1.1rem;
	margin-top: var(--wp--preset--spacing--2-xs);
}

.shopo-refine__group {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.shopo-refine__group legend {
	margin-bottom: 0.5rem;
	padding: 0;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 700;
}

.shopo-refine__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 0.65rem;
}

.shopo-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.38rem 0.7rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink-soft);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.shopo-chip:hover {
	border-color: var(--wp--preset--color--ink-soft);
	color: var(--wp--preset--color--ink);
}

.shopo-chip.is-on {
	border-color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ink);
	color: #fff;
}

.shopo-refine__range {
	display: flex;
	align-items: flex-end;
	gap: 0.4rem;
}

.shopo-refine__range label {
	display: grid;
	flex: 1 1 0;
	gap: 0.25rem;
	min-width: 0;
	color: var(--wp--preset--color--slate);
	font-size: 0.6875rem;
	font-weight: 600;
}

.shopo-refine__range input {
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	padding: 0 0.6rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: 0.875rem;
	-moz-appearance: textfield;
}

.shopo-refine__range input::-webkit-inner-spin-button,
.shopo-refine__range input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.shopo-refine__range input:focus {
	border-color: var(--wp--preset--color--accent);
	outline: 2px solid color-mix(in srgb, var(--wp--preset--color--accent) 25%, transparent);
	outline-offset: 0;
}

.shopo-refine__range > span {
	padding-bottom: 0.65rem;
	color: var(--wp--preset--color--silver);
}

.shopo-check {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.3rem 0;
	font-size: 0.875rem;
	cursor: pointer;
}

.shopo-check input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--wp--preset--color--accent);
}

.shopo-refine__acts {
	display: flex;
	align-items: center;
	gap: 0.9rem;
}

.shopo-refine__apply {
	flex: 1 1 auto;
	height: 42px;
	border: 0;
	border-radius: 10px;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	cursor: pointer;
}

.shopo-refine__apply:hover {
	background: var(--wp--preset--color--accent-press);
}

.shopo-refine__clear {
	color: var(--wp--preset--color--slate);
	font-size: 0.8125rem;
	font-weight: 600;
}

/* Instalment line wraps as one row; the provider total lives in the Compare panel. */
.shopo-pay { flex-wrap: wrap; }

/* Live search dropdown */
.shopo-search { position: relative; }

.shopo-quicksearch {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	background: var(--wp--preset--color--surface, #fff);
	border: 1px solid var(--wp--preset--color--rule, #e2e6ec);
	border-radius: 0.75rem;
	box-shadow: 0 12px 32px rgba(16, 20, 24, 0.14);
	padding: 0.5rem;
	max-height: 70vh;
	overflow-y: auto;
	z-index: 60;
}

.shopo-quicksearch__group + .shopo-quicksearch__group {
	margin-top: 0.5rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--wp--preset--color--rule-soft, #eef1f5);
}

.shopo-quicksearch__label {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--slate, #616b7a);
	padding: 0.25rem 0.5rem;
}

.shopo-quicksearch__cat {
	display: block;
	padding: 0.5rem;
	border-radius: 0.5rem;
	color: var(--wp--preset--color--ink, #101418);
	text-decoration: none;
}

.shopo-quicksearch__cat:hover { background: var(--wp--preset--color--canvas, #f6f7f9); }

.shopo-quicksearch__cat span {
	color: var(--wp--preset--color--slate, #616b7a);
	font-size: 0.85rem;
}

.shopo-quicksearch__product {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem;
	border-radius: 0.5rem;
	text-decoration: none;
	color: inherit;
}

.shopo-quicksearch__product:hover { background: var(--wp--preset--color--canvas, #f6f7f9); }

.shopo-quicksearch__product img {
	width: 44px;
	height: 44px;
	object-fit: contain;
	border-radius: 0.375rem;
	background: #fff;
	flex-shrink: 0;
}

.shopo-quicksearch__info { display: flex; flex-direction: column; min-width: 0; }

.shopo-quicksearch__name {
	font-size: 0.9rem;
	color: var(--wp--preset--color--ink, #101418);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.shopo-quicksearch__price {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent, #1b4dff);
}

.shopo-quicksearch__hint {
	padding: 0.5rem 0.5rem 0;
	color: var(--wp--preset--color--slate, #616b7a);
	font-size: 0.8rem;
	font-style: italic;
	margin: 0;
}

.shopo-quicksearch__empty {
	padding: 0.75rem;
	color: var(--wp--preset--color--slate, #616b7a);
	font-size: 0.9rem;
	margin: 0;
}