/* Manarchy component layout — mobile-first, no framework, ~4kb uncompressed */

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wp--preset--color--paper);
}

.site-header__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	border-bottom: 1px solid var(--wp--preset--color--line);
	position: relative;
}

@media (min-width: 1024px) {
	.site-header__row {
		padding: 16px 24px;
	}
}

/* Wordmark logo — Anton, uppercase, tight tracking (matches the Nike swoosh's visual weight) */
.site-header__brand {
	display: flex;
	gap: 32px;
	align-items: center;
}

.site-logo {
	font-family: var(--wp--preset--font-family--display);
	font-size: 22px;
	letter-spacing: 0.02em;
	color: var(--manarchy--fg);
	line-height: 1;
	white-space: nowrap;
}

@media (min-width: 1024px) {
	.site-logo {
		font-size: 26px;
	}
}

/* Desktop primary nav — sits inline next to the logo, Nike-style */
.site-nav {
	display: none;
}

@media (min-width: 1024px) {
	.site-nav {
		display: flex;
		gap: 24px;
		list-style: none;
		margin: 0;
		padding: 0;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	.site-nav a {
		font-size: 14px;
		font-weight: 500;
		text-transform: capitalize;
	}
	.site-nav a:hover {
		color: var(--wp--preset--color--smoke);
	}
}

/* Icon cluster */
.site-header__icons {
	display: flex;
	gap: 8px;
	align-items: center;
}

.header-icon,
.menu-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: none;
	border: 0;
	color: var(--manarchy--fg);
	padding: 0;
}

@media (max-width: 1023px) {
	.header-icon--theme-toggle-desktop {
		display: none;
	}
}

/* Theme toggle: show the sun in dark mode ("switch to light") and the moon
   in light mode ("switch to dark") — the icon always represents the mode
   you'll get if you click it. */
.header-icon--theme-toggle .icon-sun,
.header-icon--theme-toggle .icon-moon {
	display: none;
}

:root:not([data-theme="dark"]) .header-icon--theme-toggle .icon-moon {
	display: block;
}

:root[data-theme="dark"] .header-icon--theme-toggle .icon-sun {
	display: block;
}



.header-icon--cart .cart-count {
	position: absolute;
	top: 2px;
	right: 2px;
	background: var(--wp--preset--color--ink);
	color: #fff;
	font-size: 9px;
	line-height: 1;
	border-radius: 999px;
	padding: 2px 5px;
	min-width: 15px;
	text-align: center;
}

.header-icon--wishlist .wishlist-count {
	position: absolute;
	top: 2px;
	right: 2px;
	background: var(--wp--preset--color--ink);
	color: #fff;
	font-size: 9px;
	line-height: 1;
	border-radius: 999px;
	padding: 2px 5px;
	min-width: 15px;
	text-align: center;
}

.header-icon--wishlist .wishlist-count:empty,
.header-icon--wishlist .wishlist-count[data-count="0"] {
	display: none;
}

/* Mobile hamburger — icon-only, matches header-icon sizing */
@media (min-width: 1024px) {
	.menu-toggle {
		display: none;
	}
}

/* Search overlay */
.search-overlay {
	position: absolute;
	inset: 0 0 auto 0;
	background: var(--wp--preset--color--paper);
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 16px;
	z-index: 60;
}

.search-overlay[hidden] {
	display: none;
}

.search-overlay__form {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 700px;
	margin: 0 auto;
}

.search-overlay__field {
	position: relative;
	flex: 1;
}

.search-overlay__field input {
	width: 100%;
	border: 0;
	border-bottom: 1px solid var(--manarchy--fg);
	padding: 8px 4px;
	font-size: 18px;
	background: transparent;
}

.search-overlay__field input:focus {
	outline: none;
}

.search-overlay__close {
	background: none;
	border: 0;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

/* Live product suggestions — populated by search.js from the WooCommerce
   Store API as the visitor types. Products only: no posts/pages, matching
   the "search should only work for products" requirement. */
.search-suggestions {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	max-height: 70vh;
	overflow-y: auto;
	z-index: 61;
}

.search-suggestions[hidden] {
	display: none;
}

.search-suggestions__item a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
}

.search-suggestions__item a:hover,
.search-suggestions__item a.is-active {
	background: var(--wp--preset--color--bone);
}

.search-suggestions__thumb {
	width: 44px;
	height: 44px;
	object-fit: cover;
	background: var(--wp--preset--color--bone);
	flex: none;
}

.search-suggestions__info {
	min-width: 0;
}

.search-suggestions__name {
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.search-suggestions__price {
	font-size: 12px;
	color: var(--wp--preset--color--smoke);
}

.search-suggestions__more a,
.search-suggestions__empty {
	display: block;
	padding: 10px 12px;
	font-size: 13px;
}

.search-suggestions__more a {
	font-weight: 600;
	text-decoration: underline;
}

.search-suggestions__empty {
	color: var(--wp--preset--color--smoke);
}

/* Mobile fullscreen nav — plain markup now, one hamburger button in the icon cluster
   opens it, one close button (×) inside it closes it. app.js toggles the [hidden] attr. */
.mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: var(--wp--preset--color--paper);
	padding: 24px;
	display: flex;
	flex-direction: column;
}

.mobile-nav[hidden] {
	display: none;
}

.mobile-nav__close {
	align-self: flex-end;
	background: none;
	border: 0;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	margin-bottom: 24px;
}

.mobile-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mobile-nav__list a {
	font-size: 20px;
	font-weight: 600;
}

/* ---------- Mobile nav theme-toggle row ---------- */
.mobile-nav__theme-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: auto;
	padding-top: 24px;
	border-top: 1px solid var(--wp--preset--color--line);
	background: none;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
	cursor: pointer;
	color: var(--manarchy--fg);
	font-family: var(--wp--preset--font-family--body);
}

.mobile-nav__theme-toggle-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	font-weight: 600;
}

.mobile-nav__theme-toggle .icon-sun,
.mobile-nav__theme-toggle .icon-moon,
.mobile-nav__theme-toggle .theme-toggle-text-light,
.mobile-nav__theme-toggle .theme-toggle-text-dark {
	display: none;
}

:root:not([data-theme="dark"]) .mobile-nav__theme-toggle .icon-moon,
:root:not([data-theme="dark"]) .mobile-nav__theme-toggle .theme-toggle-text-light {
	display: inline-flex;
}

:root[data-theme="dark"] .mobile-nav__theme-toggle .icon-sun,
:root[data-theme="dark"] .mobile-nav__theme-toggle .theme-toggle-text-dark {
	display: inline-flex;
}

/* Switch pill — visual state only, driven by aria-pressed (set in app.js) */
.mobile-nav__theme-toggle-switch {
	position: relative;
	flex: none;
	width: 42px;
	height: 24px;
	border-radius: 999px;
	background: var(--wp--preset--color--line);
	transition: background-color 0.15s ease;
}

.mobile-nav__theme-toggle-switch::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--wp--preset--color--paper);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease;
}

.mobile-nav__theme-toggle[aria-pressed="true"] .mobile-nav__theme-toggle-switch {
	background: var(--wp--preset--color--riot);
}

.mobile-nav__theme-toggle[aria-pressed="true"] .mobile-nav__theme-toggle-switch::before {
	transform: translateX(18px);
}

@media (min-width: 1024px) {
	.mobile-nav {
		display: none !important;
	}
}

/* ---------- Footer ---------- */
.site-footer {
	background: var(--wp--preset--color--ink);
	color: var(--manarchy--on-dark);
	padding: 48px 0 24px;
	margin-top: 64px;
}

.site-footer__row {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.site-footer__col h4 {
	font-size: var(--wp--preset--font-size--sm);
	text-transform: uppercase;
	margin-bottom: 12px;
}

.footer-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: var(--wp--preset--font-size--sm);
}

.site-footer__newsletter {
	max-width: 320px;
}

.site-footer__newsletter p {
	font-size: var(--wp--preset--font-size--sm);
}

.site-footer__bottom {
	padding-top: 24px;
	font-size: var(--wp--preset--font-size--xs);
}

.text-center {
	text-align: center;
}

/* ---------- Badges ---------- */
.manarchy-badge {
	display: inline-block;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.manarchy-badge--sale {
	background: var(--wp--preset--color--ink);
	color: #fff;
}

/* Badges live inside .product-gallery (both the "Member Love Deal" span
   markup adds and WooCommerce's own .onsale sale-flash, which core fires
   into this same wrapper — see content-single-product.php). app.js moves
   them into .flex-viewport (flexslider's wrapper around just the main
   image, not the thumbnail rail) once it exists, so they overlay the
   big/active image specifically. */
.flex-viewport > .manarchy-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
}

/* Stack the sale badge below the deal badge when a product has both,
   rather than letting them overlap. */
.flex-viewport > .manarchy-badge--deal + .manarchy-badge--sale {
	top: 44px;
}

@media (max-width: 781px) {
	.flex-viewport > .manarchy-badge {
		top: 8px;
		left: 8px;
	}

	.flex-viewport > .manarchy-badge--deal + .manarchy-badge--sale {
		top: 38px;
	}
}

/* No-JS fallback: if app.js hasn't moved the badges yet (or is unavailable),
   they're still direct children of .product-gallery — pin them to its
   top-left corner too so they're never just floating unstyled inline. */
.product-gallery {
	position: relative;
}

.product-gallery > .manarchy-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
}

/* ---------- Newsletter form ---------- */
.newsletter-form {
	display: flex;
	gap: 8px;
	margin-top: 12px;
	flex-wrap: wrap;
}

.newsletter-form input[type="email"] {
	flex: 1 1 180px;
	padding: 10px 12px;
	background: transparent;
	border: 1px solid var(--wp--preset--color--smoke);
	color: var(--manarchy--on-dark);
}

/* Background/text intentionally use the fixed on-dark/ink pair, not
   paper/fg — this button sits on the footer, which is always solid black
   regardless of mode (see .site-footer). paper/fg would flip to a dark
   button with light text in dark mode and nearly vanish against the black
   footer; on-dark/ink keeps it a light pill with dark text in both modes. */
.newsletter-form button {
	padding: 10px 18px;
	background: var(--manarchy--on-dark);
	color: var(--wp--preset--color--ink);
	border: 0;
	border-radius: 999px;
	font-weight: 500;
}

/* ---------- Shop layout ---------- */
.shop-layout {
	gap: 32px;
}

@media (max-width: 781px) {
	.shop-filters {
		flex-basis: 100% !important;
	}
}

/* ---------- Cart & Checkout ---------- */

/* The cart & checkout pages are plain WP Pages (with the WooCommerce
   shortcode/block content) rendered through page.php — they use
   .site-main > .entry-content, NOT the .manarchy-container-wrapped
   <main> that woocommerce_before_main_content only injects on the
   archive/single-product templates. That wrapper had no container
   styling at all, so the content ran full-bleed edge to edge. */
body.woocommerce-cart .entry-content,
body.woocommerce-checkout .entry-content {
	margin-inline: auto;
	padding-inline: 16px;
}

@media (min-width: 782px) {
	body.woocommerce-cart .entry-content,
	body.woocommerce-checkout .entry-content {
		max-width: var(--manarchy--content-size);
	}
}

/* ---------- My Account (login, register, lost/reset password) ---------- */

/* Same fix as the cart/checkout pages above: this is also a plain WP Page
   (the [woocommerce_my_account] shortcode) rendered through page.php, using
   .site-main > .entry-content with no container styling of its own — that's
   why the login form ran full-bleed against the left edge with no
   maximum width. */
body.woocommerce-account .entry-content {
	margin-inline: auto;
	padding-inline: 16px;
}

@media (min-width: 782px) {
	body.woocommerce-account .entry-content {
		max-width: var(--manarchy--content-size);
	}
}

/* Account dashboard nav tabs (Orders / Downloads / Addresses / Account
   details / Logout) shown once a customer is logged in. Unstyled by
   default, it rendered as a plain bulleted list. */
.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	list-style: none;
	margin: 0 0 32px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.woocommerce-MyAccount-navigation a {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	color: var(--wp--preset--color--smoke);
}

.woocommerce-MyAccount-navigation a:hover {
	color: var(--manarchy--fg);
}

.woocommerce-MyAccount-navigation .is-active a {
	color: var(--manarchy--fg);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Login, Register, Lost password and Reset password all use these same
   base classes/markup, so one ruleset covers every account form. Each is
   styled as a centered card (bordered, padded, rounded) rather than plain
   floating form fields, and centered as a group via #customer_login /
   .woocommerce-ResetPassword-wrap below. */
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	max-width: 420px;
	margin: 16px auto 0;
	padding: 32px;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
}

.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row,
.woocommerce-ResetPassword .form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.woocommerce-form-login label,
.woocommerce-form-register label,
.woocommerce-ResetPassword label {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
}

.woocommerce-form-login .required,
.woocommerce-form-register .required,
.woocommerce-ResetPassword .required {
	color: var(--wp--preset--color--riot);
	text-decoration: none;
}

.woocommerce-form-login input.input-text,
.woocommerce-form-register input.input-text,
.woocommerce-ResetPassword input.input-text,
.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="email"],
.woocommerce-form-login input[type="password"],
.woocommerce-form-register input[type="text"],
.woocommerce-form-register input[type="email"],
.woocommerce-form-register input[type="password"],
.woocommerce-ResetPassword input[type="text"],
.woocommerce-ResetPassword input[type="email"],
.woocommerce-ResetPassword input[type="password"] {
	width: 100%;
	padding: 12px 14px;
	background: var(--wp--preset--color--bone);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	color: var(--manarchy--fg);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
}

.woocommerce-form-login input.input-text:focus,
.woocommerce-form-register input.input-text:focus,
.woocommerce-ResetPassword input.input-text:focus {
	outline: none;
	border-color: var(--wp--preset--color--riot);
}

.woocommerce-form-login .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
}

.woocommerce-form-login .woocommerce-form-login__rememberme input[type="checkbox"] {
	accent-color: var(--wp--preset--color--riot);
	width: 16px;
	height: 16px;
}

.woocommerce-form-login .form-row.woocommerce-form-login__submit,
.woocommerce-form-register .form-row:last-of-type,
.woocommerce-ResetPassword .form-row:last-of-type {
	margin-top: 4px;
}

.woocommerce-form-login button[type="submit"],
.woocommerce-form-register button[type="submit"],
.woocommerce-ResetPassword button[type="submit"] {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--ink);
	color: #fff;
	border: 0;
	border-radius: 100px;
	padding: 12px 28px;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

.woocommerce-form-login button[type="submit"]:hover,
.woocommerce-form-register button[type="submit"]:hover,
.woocommerce-ResetPassword button[type="submit"]:hover {
	background: var(--wp--preset--color--charcoal);
}

:root[data-theme="dark"] .woocommerce-form-login button[type="submit"],
:root[data-theme="dark"] .woocommerce-form-register button[type="submit"],
:root[data-theme="dark"] .woocommerce-ResetPassword button[type="submit"] {
	background: var(--manarchy--on-dark);
	color: var(--wp--preset--color--ink);
}

:root[data-theme="dark"] .woocommerce-form-login button[type="submit"]:hover,
:root[data-theme="dark"] .woocommerce-form-register button[type="submit"]:hover,
:root[data-theme="dark"] .woocommerce-ResetPassword button[type="submit"]:hover {
	background: #e5e5e5;
}

.woocommerce-LostPassword {
	margin: 4px 0 0;
	font-size: var(--wp--preset--font-size--sm);
}

.woocommerce-LostPassword a,
.woocommerce-form-row a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.woocommerce-LostPassword a:hover {
	color: var(--wp--preset--color--riot);
}

/* Login/register success or error banners (wrong password, existing
   email, etc.) — plain <ul> by default. */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
	list-style: none;
	margin: 0 0 20px;
	padding: 14px 16px;
	border-radius: 8px;
	font-size: var(--wp--preset--font-size--sm);
	background: var(--wp--preset--color--bone);
	border: 1px solid var(--wp--preset--color--line);
}

.woocommerce-error {
	border-color: var(--wp--preset--color--riot);
}

.woocommerce-error li {
	margin: 0;
}

/* "Register" section heading + the login/register two-column layout
   WooCommerce renders when both forms are enabled on the same page
   (Settings > Accounts > "Allow customers to create an account"). Centered
   as a group — including when registration is disabled and only the
   single Login column renders — rather than left-aligned against the page
   edge. */
.u-columns.woocommerce-Addresses,
.u-columns.col2-set {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 48px;
	margin: 32px auto 0;
}

.u-columns.col2-set .u-column1,
.u-columns.col2-set .u-column2 {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 1 420px;
}

/* Set by app.js once it finds both columns — shows one form at a time
   instead of both permanently side by side. If JS never runs, this
   attribute is never set and both columns render normally. */
#customer_login[data-account-view="login"] .u-column2,
#customer_login[data-account-view="register"] .u-column1 {
	display: none;
}

.account-toggle-link {
	margin-top: 16px;
	font-size: var(--wp--preset--font-size--sm);
	text-align: center;
}

.account-toggle-link a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.account-toggle-link a:hover {
	color: var(--wp--preset--color--riot);
}

body.woocommerce-account .entry-content h2 {
	text-align: center;
	margin-bottom: 4px;
}

/* ---------- Product page (PDP) ---------- */

/* Full-bleed on mobile: the gallery image should touch the screen edges,
   like the AE-style reference. The outer container's padding is removed
   only here (not sitewide), and a small gutter is put back just on the
   text content (summary/tabs) so titles and body copy don't literally
   touch the edge. */
@media (max-width: 781px) {
	/* The real outer wrapper around all page content is <main class="manarchy-container
	   woocommerce-main"> (see the woocommerce_before_main_content hook in functions.php) —
	   zeroing only the inner containers (below) still left this outer 16px gutter in place.
	   Scoped to the single-product body class only, so no other WooCommerce page is affected. */
	body.single-product main.woocommerce-main {
		padding-inline: 0;
	}

	/* Only the gallery goes fully edge-to-edge; everything else (title, price,
	   variations, tabs/description, related products) keeps a normal gutter. */
	.product-page__layout.manarchy-container,
	.product-page__tabs.manarchy-container {
		padding-inline: 0;
		max-width: none;
	}

	.product-summary {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	.product-page__tabs.manarchy-container {
		padding-inline: 16px;
	}
}

.product-page__layout {
	padding-top: 24px;
	padding-bottom: 32px;
}

/* Cap the single-product content area (gallery/summary + tabs) at ~1050px.
   Desktop only — the mobile full-bleed behavior above is left untouched. */
@media (min-width: 782px) {
	.product-page__layout.manarchy-container--wide,
	.product-page__tabs.manarchy-container--wide {
		max-width: 1050px;
	}
}

@media (min-width: 782px) {
	.product-page__layout {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		gap: 48px;
		align-items: start;
	}
}

/* Native WooCommerce gallery markup (.woocommerce-product-gallery), reflowed:
   large square main image, thumbnail row underneath. Zoom/lightbox JS is
   WooCommerce core's own (enqueued automatically via the wc-product-gallery-*
   theme supports in functions.php) — only layout/spacing is themed here. */
.woocommerce-product-gallery__wrapper {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-product-gallery__image {
	background: var(--wp--preset--color--bone);
}

.woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

/* Prev/next chevron overlay — built by buildGalleryNavArrows() in app.js,
   appended into WooCommerce's own .flex-viewport (the main-image slide
   container), so it sits over just the photo, not the whole gallery
   (thumbnail rail included). Fixed white circles/dark icon regardless of
   color mode, matching .wishlist-toggle's treatment elsewhere: both overlay
   product photography, which doesn't change between modes. */
.flex-viewport {
	position: relative;
}

.product-gallery__nav {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: flex;
	gap: 8px;
	z-index: 2;
}

.product-gallery__nav-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, 0.92);
	color: var(--wp--preset--color--ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

@media (max-width: 781px) {
	.product-gallery__nav {
		right: 8px;
		bottom: 8px;
		gap: 6px;
	}

	.product-gallery__nav-btn {
		width: 34px;
		height: 34px;
	}

	.product-gallery__nav-btn svg {
		width: 16px;
		height: 16px;
	}
}

.flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.flex-control-thumbs li {
	width: 56px;
}

.flex-control-thumbs img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	cursor: pointer;
	opacity: 0.6;
}

.flex-control-thumbs img.flex-active {
	opacity: 1;
	/* --manarchy--fg (not --ink): --ink is fixed black by design and drops to
	   a ~1.15:1 contrast ring against the dark-mode surface, making the
	   "active" state effectively invisible. --fg adapts (light in dark mode). */
	outline: 2px solid var(--manarchy--fg);
	outline-offset: -2px;
}

/* Desktop gallery: vertical thumbnail rail beside the main image, matching
   the reference PDP. Scoped to min-width so the mobile dots gallery
   (max-width: 781px block below) is completely untouched.
   .flex-viewport / .flex-control-thumbs are WooCommerce's own flexslider
   markup — flexslider appends the thumbnail nav as a sibling of the image
   viewport inside .woocommerce-product-gallery once it initializes, so no
   template changes are needed to reach into this structure.
   Graceful degradation: a product with only one image never gets a
   .flex-control-thumbs element at all (flexslider only builds thumb nav for
   2+ slides), so .flex-viewport simply fills the full width on its own —
   no extra CSS branching required for the 1-image case. */
@media (min-width: 782px) {
	.woocommerce-product-gallery {
		display: flex;
		align-items: flex-start;
		gap: 12px;
	}

	.flex-viewport {
		flex: 1;
		min-width: 0;
	}

	.woocommerce-product-gallery .flex-control-thumbs {
		/* order: -1 puts the rail before the main image visually regardless
		   of DOM order (flexslider always appends it after .flex-viewport). */
		order: -1;
		flex: 0 0 64px;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 8px;
		margin: 0;
		max-height: 640px;
		overflow-y: auto;
		align-self: stretch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
		display: none;
	}

	.woocommerce-product-gallery .flex-control-thumbs li {
		width: 100%;
		flex: none;
	}
}

/* Mobile gallery: swap the thumbnail row for slide dots. The main image
   itself still swipes via WooCommerce's own flexslider (touch swipe is a
   built-in flexslider behavior) — only the control-nav UI changes here.
   Dots are built in app.js as a small remote-control layer over the
   existing (hidden) .flex-control-thumbs so we don't have to reimplement
   slide-switching ourselves. */
.product-gallery__dots {
	display: none;
}

@media (max-width: 781px) {
	.flex-control-thumbs {
		display: none;
	}

	.product-gallery__dots {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 8px;
		margin: 12px 0 0;
		padding: 0;
		list-style: none;
	}

	.product-gallery__dots li {
		display: flex;
	}

	.product-gallery__dots button {
		width: 8px;
		height: 8px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--wp--preset--color--smoke);
		opacity: 0.5;
		cursor: pointer;
	}

	.product-gallery__dots button.is-active {
		opacity: 1;
		background: var(--manarchy--fg);
	}
}

/* Buy box */
.product-summary {
	padding: 24px 0 0;
}

/* Related products heading (default WooCommerce related.php template output,
   .related.products > h2 — no theme override file for it). */
.related.products > h2 {
	font-size: 18px;
	font-weight: 500;
}

/* Space the related/upsell sections off from the description/reviews tabs
   above them — both are rendered into the same .product-page__tabs
   container (woocommerce_after_single_product_summary hooks), so without
   this they sit right on top of each other. */
.upsells.products,
.related.products {
	margin-top: 56px;
}

/* ---------- Wishlist ---------- */
/* Heart toggle button — shared markup/behavior between shop cards
   (.shop-card .wishlist-toggle positions it, see shop-archive.css) and the
   PDP (.product-summary__wishlist below). State (filled/outline) is just a
   CSS class flip driven by wishlist.js; no server round-trip. */
.wishlist-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: rgba(255, 255, 255, 0.85);
	border: 0;
	border-radius: 50%;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}

.wishlist-toggle svg {
	width: 18px;
	height: 18px;
}

.wishlist-toggle[aria-pressed="true"] svg {
	fill: var(--wp--preset--color--riot);
	stroke: var(--wp--preset--color--riot);
}

/* Full-width outlined pill, stacked directly below the (also full-width)
   Add to Bag button — see .product-page__layout markup in
   content-single-product.php, which already renders this button right
   after woocommerce_template_single_add_to_cart(). row-reverse puts the
   heart icon after the label, matching the reference "Favourite ♡" order,
   while keeping the button's content centered either way. */
.product-summary__wishlist {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	background: none;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 100px;
	padding: 16px 24px;
	margin-top: 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--manarchy--fg);
	cursor: pointer;
}

.product-summary__wishlist svg {
	width: 16px;
	height: 16px;
	flex: none;
}

.product-summary__wishlist[aria-pressed="true"] svg {
	fill: var(--wp--preset--color--riot);
	stroke: var(--wp--preset--color--riot);
}

/* Wishlist page (page-wishlist.php): reuses .shop-card / ul.products markup
   (built client-side by wishlist.js) so it automatically matches the shop
   grid styling in shop-archive.css. Only the empty state lives here. */
.wishlist-page {
	padding: 32px 0 64px;
}

.wishlist-page__empty {
	padding: 48px 0;
	text-align: center;
	color: var(--wp--preset--color--smoke);
}

.wishlist-page__empty a {
	text-decoration: underline;
}

/* ---------- Search results (search.php) ---------- */
.search-results {
	padding: 32px 0 64px;
}

.search-results__heading {
	margin: 0 0 8px;
}

.search-results__count {
	color: var(--wp--preset--color--smoke);
	margin: 0 0 24px;
}

.search-results__grid {
	margin-top: 0;
}

.search-results__empty {
	padding: 48px 0;
	text-align: center;
	color: var(--wp--preset--color--smoke);
}

.search-results__empty a {
	text-decoration: underline;
}

@media (min-width: 782px) {
	.product-summary {
		padding: 0;
		position: sticky;
		top: 88px;
	}
}

.manarchy-badge--deal {
	background: var(--manarchy--deal);
	color: #fff;
}

.product-summary__eyebrow {
	color: var(--wp--preset--color--smoke);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	margin: 0 0 4px;
}

.product-summary h1.product_title {
	font-size: 18px;
	font-weight: 400;
	letter-spacing: -0.01em;
	margin: 0 0 6px;
}

.product-summary__fabric {
	color: var(--wp--preset--color--smoke);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0 0 16px;
}

.product-summary__price-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.product-summary__price-label {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--smoke);
}

.product-summary .price {
	font-size: 15px;
	font-weight: 600;
	color: var(--manarchy--fg);
}

.product-summary .price ins {
	text-decoration: none;
}

.product-summary .price del {
	color: var(--wp--preset--color--smoke);
	font-weight: 400;
	margin-right: 6px;
}

/* Rating (moved below the add-to-cart form via functions.php hook priority) */
.product-summary .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 16px 0 8px;
}

/* Star rating — WooCommerce's own CSS (which supplies the icon-font glyphs
   for this) is dequeued site-wide, so without this the widget was
   completely invisible everywhere it's used (product summary, review list,
   shop archive cards). Built from plain unicode stars instead of a font,
   using WC's existing markup: an outer .star-rating with 5 empty stars,
   and an inner <span style="width:X%"> (the % WC already outputs) for the
   filled overlay. */
.star-rating {
	position: relative;
	display: inline-block;
	overflow: hidden;
	width: 5.4em;
	height: 1em;
	line-height: 1;
	font-size: 14px;
	letter-spacing: 0.2em;
}

.star-rating::before {
	content: "\2605\2605\2605\2605\2605";
	display: block;
	color: var(--wp--preset--color--line);
}

.star-rating span {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	height: 100%;
}

.star-rating span::before {
	content: "\2605\2605\2605\2605\2605";
	display: block;
	color: #e0a527;
}

.product-summary .star-rating {
	font-size: 15px;
}

.product-summary__size-details {
	margin: 0 0 16px;
	font-size: var(--wp--preset--font-size--sm);
}

.product-summary__size-details a {
	text-decoration: underline;
}

/* Real WooCommerce variation form */
.variations {
	border: 0;
	margin: 0 0 16px;
	width: 100%;
}

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

.variations tr {
	display: block;
	margin-bottom: 16px;
}

.variations .label label {
	display: block;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	margin-bottom: 8px;
}

/* Plain (non-color) variation dropdowns — e.g. Size */
.variations select:not(.variation-swatch-select) {
	width: 100%;
	max-width: 260px;
	padding: 12px 14px;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--md);
}

/* Color swatches — the real WooCommerce variation <select> is kept only as
   a data store the swatch buttons drive (see shop.js); it's not a
   'screen-reader-text' element on purpose, since WooCommerce's "Clear"
   reset flow can programmatically focus it, and this hiding must hold in
   every state (including :focus), not just at rest. */
.variation-swatch-select {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	pointer-events: none !important;
}

.variation-swatches {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.variation-swatch {
	width: 32px;
	height: 32px;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--line);
	background-color: var(--wp--preset--color--bone);
	padding: 0;
	cursor: pointer;
}

/* Photo swatches — used when manarchy_swatch_photo() (functions.php) finds a
   real variation image for this color, matching the reference design's small
   product-photo swatches instead of a flat color dot. Bigger and
   rounded-square rather than circular, since a garment photo reads poorly
   cropped into a circle. */
.variation-swatch--photo {
	width: 56px;
	height: 56px;
	border-radius: 12px;
	background-size: cover;
	background-position: center;
}

/* Text-button swatches — used for non-color attributes (Size, etc.) instead
   of the native <select> dropdown. Rectangular rather than circular/photo,
   since these show a text label, not a color/garment. */
.variation-swatch--text {
	width: auto;
	height: 48px;
	min-width: 48px;
	padding: 0 16px;
	border-radius: 8px;
	background-color: var(--wp--preset--color--paper);
	color: var(--manarchy--fg);
	font-size: 14px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Filled selected state (not the outline used for color/photo swatches
   below) — a clearer "chosen size" affordance than an outline would be on a
   text button, and avoids outline-vs-border double-borders. Higher
   specificity than the shared [aria-pressed="true"] rule below, so this
   wins for text swatches without needing !important. */
.variation-swatch--text[aria-pressed="true"] {
	outline: none;
	background-color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: #fff;
}

.variation-swatch[aria-pressed="true"] {
	/* --manarchy--fg, not --ink: --ink is fixed black and reduces to a
	   ~1.15:1 outline contrast against the dark-mode surface. --fg adapts. */
	outline: 2px solid var(--manarchy--fg);
	outline-offset: 2px;
}

.variation-swatches__selected-label {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--smoke);
	margin: 8px 0 0;
}

.reset_variations {
	display: inline-block;
	font-size: var(--wp--preset--font-size--xs);
	text-decoration: underline;
	margin-top: 8px;
}

/* Quantity + add-to-cart row */
/* Quantity + add-to-cart row — stacked (quantity compact on its own row,
   Add to Bag full-width beneath it), matching the reference PDP layout
   rather than the previous side-by-side wrapping row. */
.cart {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	margin: 0 0 16px;
}

.quantity {
	display: inline-flex;
	align-items: stretch;
	align-self: flex-start;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 100px;
	overflow: hidden;
}

.quantity .qty {
	width: 56px;
	border: 0;
	text-align: center;
	font-size: 18px;
	padding: 10px 0;
	-moz-appearance: textfield;
}

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

.quantity__step {
	width: 40px;
	border: 0;
	background: var(--wp--preset--color--bone);
	font-size: 18px;
	padding: 10px 0;
	cursor: pointer;
}

@media (max-width: 781px) {
	.quantity .qty {
		width: 60px;
		font-size: 19px;
		padding: 12px 0;
	}

	.quantity__step {
		width: 44px;
		font-size: 19px;
		padding: 12px 0;
	}
}

.single_add_to_cart_button {
	flex: none;
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--wp--preset--color--ink);
	color: #fff;
	border: 0;
	border-radius: 100px;
	padding: 16px 24px;
	font-size: 15px;
	font-weight: 600;
	text-transform: none;
	line-height: 1;
	cursor: pointer;
}

@media (max-width: 781px) {
	.single_add_to_cart_button {
		padding: 19px 28px;
		font-size: 16px;
	}
}

.single_add_to_cart_button:hover {
	background: var(--wp--preset--color--charcoal);
}

/* Dark mode: invert to a white pill with dark text rather than a black
   button on an already-dark page (which would read as barely-there). Uses
   fixed values here (not --ink/--paper) since --ink stays black by design
   in dark mode and --paper is a dark surface color, not white. */
:root[data-theme="dark"] .single_add_to_cart_button {
	background: var(--manarchy--on-dark);
	color: var(--wp--preset--color--ink);
}

:root[data-theme="dark"] .single_add_to_cart_button:hover {
	background: #e5e5e5;
}

.single_add_to_cart_button:disabled,
.single_add_to_cart_button.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.woocommerce-variation-add-to-cart {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.woocommerce-variation-availability,
.woocommerce-variation-price {
	flex-basis: 100%;
	font-size: var(--wp--preset--font-size--sm);
}

/* Description / reviews tabs below the fold */
.product-page__tabs {
	padding-bottom: 64px;
}

/* ---------- PDP accordion (Description / Reviews) ---------- */
/* Built server-side in content-single-product.php (each .pdp-accordion__panel
   starts with the `hidden` attribute, so rows are collapsed by default with
   no dependency on JS running first) — app.js only wires up the
   click-to-toggle on [data-pdp-accordion] .pdp-accordion__trigger. */
.product-summary__accordion {
	margin-top: 24px;
	border-top: 1px solid var(--wp--preset--color--line);
}

.pdp-accordion__item {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.pdp-accordion__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 0;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 400;
	color: var(--manarchy--fg);
	text-align: left;
	cursor: pointer;
}

.pdp-accordion__right {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.pdp-accordion__chevron {
	display: inline-flex;
	flex-shrink: 0;
	transition: transform 0.15s ease;
}

.pdp-accordion__trigger[aria-expanded="true"] .pdp-accordion__chevron {
	transform: rotate(180deg);
}

.pdp-accordion__panel {
	padding: 0 0 20px;
}

.woocommerce-tabs ul.tabs {
	display: flex;
	gap: 24px;
	list-style: none;
	margin: 0 0 24px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.woocommerce-tabs ul.tabs li a {
	font-weight: 600;
}

.woocommerce-tabs ul.tabs li.active a {
	text-decoration: underline;
}

/* ---------- Reviews (list + form) ---------- */
#reviews {
	max-width: 640px;
}

#reviews .woocommerce-Reviews-title {
	font-size: var(--wp--preset--font-size--lg);
	margin: 0 0 20px;
}

#reviews .woocommerce-noreviews {
	color: var(--wp--preset--color--smoke);
	margin-bottom: 4px;
}

/* Submitted reviews list */
#reviews .commentlist {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
}

#reviews .commentlist .comment_container {
	display: flex;
	gap: 14px;
	padding: 20px 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

#reviews .commentlist li:first-child .comment_container {
	padding-top: 0;
}

#reviews .commentlist img.avatar {
	width: 44px;
	height: 44px;
	border-radius: 100px;
	flex: none;
}

#reviews .commentlist .comment-text {
	flex: 1;
	min-width: 0;
}

#reviews .commentlist .star-rating {
	margin-bottom: 8px;
}

#reviews .commentlist .description p {
	margin: 0 0 8px;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.6;
}

#reviews .commentlist .meta,
#reviews .commentlist .woocommerce-review__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--smoke);
}

#reviews .commentlist .woocommerce-review__author {
	font-weight: 600;
	color: var(--manarchy--fg);
}

#reviews .commentlist .woocommerce-review__dash {
	display: none;
}

/* Review form */
#reviews #review_form_wrapper {
	padding-top: 28px;
	border-top: 1px solid var(--wp--preset--color--line);
}

#reviews .comment-reply-title {
	display: block;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	margin: 0 0 16px;
}

#reviews .comment-notes {
	color: var(--wp--preset--color--smoke);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0 0 20px;
}

#reviews .comment-form-rating,
#reviews .comment-form-comment,
#reviews .comment-form-author,
#reviews .comment-form-email,
#reviews .comment-form-cookies-consent {
	margin: 0 0 18px;
}

#reviews .comment-form-rating label,
#reviews .comment-form-comment label,
#reviews .comment-form-author label,
#reviews .comment-form-email label {
	display: block;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	margin-bottom: 6px;
}

#reviews .required {
	color: var(--manarchy--deal);
	text-decoration: none;
}

/* The accessible rating control WooCommerce ships is a plain <select> —
   left unstyled it renders as bare browser chrome, so give it the same
   look as the other form fields with a custom dropdown arrow. */
#reviews #rating {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	max-width: 280px;
	padding: 11px 36px 11px 14px;
	background: var(--wp--preset--color--bone) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23757575' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
	background-size: 11px 7px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	color: var(--manarchy--fg);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	cursor: pointer;
}

#reviews #respond input[type="text"],
#reviews #respond input[type="email"],
#reviews #respond textarea {
	width: 100%;
	max-width: 480px;
	padding: 12px 14px;
	background: var(--wp--preset--color--bone);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	color: var(--manarchy--fg);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
}

#reviews #respond textarea {
	min-height: 140px;
	resize: vertical;
}

#reviews #rating:focus,
#reviews #respond input[type="text"]:focus,
#reviews #respond input[type="email"]:focus,
#reviews #respond textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--riot);
}

:root[data-theme="dark"] #reviews #rating {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a3a3a3' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
}

/* The actual rating control WooCommerce renders here is link-based, not the
   <select> above (that's only WC's no-JS fallback and isn't what showed in
   the screenshot). Each <a> is "star-1".."star-5" and its visible text is
   the full accessible label ("1 of 5 stars", "2 of 5 stars"…) — normally
   swapped for a star glyph by WooCommerce's own (dequeued) CSS, so with no
   styling at all it rendered as that raw sentence, five times in a row. */
#reviews .comment-form-rating .stars {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
}

/* WooCommerce wraps the star links in an inner <span>, so flex on .stars
   above only lays out that one wrapper — it doesn't reach the links inside
   it. Flex that span too, and make the links inline-block as a fallback,
   so they sit in a row either way. */
#reviews .comment-form-rating .stars span {
	display: flex;
	gap: 4px;
}

#reviews .comment-form-rating .stars a {
	position: relative;
	display: inline-block;
	width: 22px;
	height: 22px;
	font-size: 0;
	line-height: 0;
	text-decoration: none;
}

#reviews .comment-form-rating .stars a::before {
	content: "\2605";
	position: absolute;
	top: 0;
	left: 0;
	font-size: 20px;
	line-height: 1;
	color: var(--wp--preset--color--line);
}

/* Fill the hovered star and every star before it (lower numbers), and keep
   it filled once a rating is picked — WooCommerce's own script adds one of
   these classes to the chosen star, the exact name varies by version so all
   the common ones are covered. */
#reviews .comment-form-rating .stars a:hover::before,
#reviews .comment-form-rating .stars a:has(~ a:hover)::before,
#reviews .comment-form-rating .stars a.active::before,
#reviews .comment-form-rating .stars a:has(~ a.active)::before,
#reviews .comment-form-rating .stars a.selected::before,
#reviews .comment-form-rating .stars a:has(~ a.selected)::before,
#reviews .comment-form-rating .stars a.current::before,
#reviews .comment-form-rating .stars a:has(~ a.current)::before {
	color: #e0a527;
}

#reviews .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--smoke);
}

#reviews .comment-form-cookies-consent label {
	margin: 0;
}

#reviews .comment-form-cookies-consent input[type="checkbox"] {
	margin-top: 3px;
	accent-color: var(--wp--preset--color--riot);
}

#reviews .form-submit {
	margin: 0;
}

#reviews .form-submit #submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--ink);
	color: #fff;
	border: 0;
	border-radius: 100px;
	padding: 14px 32px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

#reviews .form-submit #submit:hover {
	background: var(--wp--preset--color--charcoal);
}

:root[data-theme="dark"] #reviews .form-submit #submit {
	background: var(--manarchy--on-dark);
	color: var(--wp--preset--color--ink);
}

:root[data-theme="dark"] #reviews .form-submit #submit:hover {
	background: #e5e5e5;
}

/* ---------- Screen-reader-only utility ---------- */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}