/**
 * ANZO Store — WooCommerce.
 *
 * The theme deregisters `woocommerce-general` / `woocommerce-smallscreen`
 * (see inc/enqueue.php), so this file is the complete presentation layer for
 * every WooCommerce screen: shop loop, single product, cart, checkout,
 * my-account and notices. Behaviour still comes from WooCommerce's own JS.
 */

/* ---------------------------------------------------------------
 * Notices
 * --------------------------------------------------------------- */

.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	align-items: center;
	border: 1px solid var(--border);
	border-inline-start-width: 3px;
	border-radius: var(--radius-md);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	list-style: none;
	margin-block: var(--space-4);
	padding: var(--space-4) var(--space-5);
}

.woocommerce-message {
	background-color: var(--color-success-soft);
	border-color: var(--color-success);
}

.woocommerce-info {
	background-color: var(--color-accent-soft);
	border-color: var(--color-accent);
}

.woocommerce-error {
	background-color: var(--color-danger-soft);
	border-color: var(--color-danger);
	color: #7f2018;
}

.woocommerce-error li + li {
	margin-block-start: var(--space-2);
}

/* Checkout validation summary.
 *
 * WooCommerce answers a failed checkout with a list of every missing field, on
 * top of marking each field itself. That list is redundant on screen, so it is
 * hidden — but the hiding is deliberately narrow in three ways:
 *
 * 1. Only items WooCommerce tags with `data-id`. That attribute is how core
 *    marks "this message belongs to that input"; a gateway decline, an
 *    out-of-stock line or a coupon failure carries no data-id, has no field to
 *    point at, and stays visible. Hiding the whole `.woocommerce-error` box
 *    would swallow those and leave a dead submit button.
 * 2. Only inside the checkout notice group. The page-level notices wrapper
 *    reuses the same class for cart and account errors.
 * 3. Visually only, not display:none. The list carries role="alert"; taking it
 *    out of the box tree takes it out of the accessibility tree too, and a
 *    screen-reader user would get silence on a failed submit.
 */
.woocommerce-NoticeGroup-checkout .woocommerce-error li[data-id] {
	block-size: 1px;
	clip-path: inset(50%);
	inline-size: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
}

/* When every message was a field message, the box has nothing left worth
 * drawing — drop its chrome so no empty red bar is left behind. */
.woocommerce-NoticeGroup-checkout
	.woocommerce-error:not(:has(li:not([data-id]))) {
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
}

.woocommerce-message .button,
.woocommerce-info .button {
	margin-inline-start: auto;
}

/* ---------------------------------------------------------------
 * Buttons — map WooCommerce's classes onto the theme's button system
 * --------------------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button {
	align-items: center;
	background-color: var(--color-primary);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	color: var(--color-white);
	cursor: pointer;
	display: inline-flex;
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	gap: var(--space-2);
	justify-content: center;
	line-height: 1.2;
	min-block-size: 44px;
	padding-block: var(--space-3);
	padding-inline: var(--space-6);
	text-decoration: none;
	transition: background-color var(--duration-fast) var(--ease);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background-color: var(--color-primary-hover);
	color: var(--color-white);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order {
	background-color: var(--color-accent);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover {
	background-color: var(--color-accent-hover);
}

.woocommerce .button:disabled,
.woocommerce .button.disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

.woocommerce .button.loading {
	opacity: 0.7;
	pointer-events: none;
}

/* ---------------------------------------------------------------
 * Shop archive header, sorting & result count
 * --------------------------------------------------------------- */

.shop-toolbar {
	align-items: center;
	border-block-end: 1px solid var(--border);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	justify-content: space-between;
	margin-block-end: var(--space-8);
	padding-block-end: var(--space-4);
}

.woocommerce-result-count {
	color: var(--text-muted);
	font-size: var(--text-sm);
	margin: 0;
}

.woocommerce-ordering {
	margin: 0;
}

.woocommerce-ordering select {
	inline-size: auto;
	min-inline-size: 210px;
	font-size: var(--text-sm);
	padding-block: var(--space-2);
}

.shop-toolbar__filter-toggle {
	display: inline-flex;
}

@media (min-width: 1024px) {
	.shop-toolbar__filter-toggle {
		display: none;
	}
}

/* Filter sidebar: a real sidebar on desktop, a drawer below 1024px.
 * One markup, two behaviours — no duplicated widget area. */
@media (max-width: 1023px) {
	.drawer-on-mobile {
		background-color: var(--surface);
		display: flex;
		flex-direction: column;
		inset-block: 0;
		inset-inline-start: 0;
		max-inline-size: 88vw;
		position: fixed;
		inline-size: 340px;
		transform: translateX(-100%);
		transition: transform var(--duration-slow) var(--ease);
		visibility: hidden;
		z-index: var(--z-drawer);
	}

	[dir="rtl"] .drawer-on-mobile {
		transform: translateX(100%);
	}

	.drawer-on-mobile.is-open {
		transform: translateX(0);
		visibility: visible;
	}

	.drawer-on-mobile .drawer__body {
		flex: 1;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: var(--space-4) var(--space-5);
	}

	.drawer-on-mobile .drawer__body > * + * {
		margin-block-start: var(--space-8);
	}
}

@media (min-width: 1024px) {
	/* On desktop it is just a column; the drawer chrome is unnecessary. */
	.drawer-on-mobile .drawer__head {
		display: none;
	}

	.drawer-on-mobile .drawer__body {
		padding: 0;
	}

	.drawer-on-mobile .drawer__body > * + * {
		margin-block-start: var(--space-8);
	}
}

/* ---------------------------------------------------------------
 * Product loop
 * --------------------------------------------------------------- */

.woocommerce ul.products,
ul.products {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 768px) {
	.woocommerce ul.products,
	ul.products {
		gap: var(--space-6);
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.woocommerce ul.products.columns-4,
	ul.products.columns-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.woocommerce ul.products.columns-3,
	ul.products.columns-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* WooCommerce prints float/width helpers we do not want inside a grid. */
.woocommerce ul.products li.product {
	float: none;
	inline-size: auto;
	margin: 0;
}

/* The loop uses the theme's .product-card markup (see woocommerce/content-product.php). */

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

.single-product-layout {
	display: grid;
	gap: var(--space-8);
	grid-template-columns: minmax(0, 1fr);
	padding-block-start: var(--space-6);
}

@media (min-width: 900px) {
	.single-product-layout {
		gap: var(--space-16);
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		align-items: start;
	}

	/* The summary tracks the gallery on tall pages. */
	.single-product-layout .entry-summary {
		position: sticky;
		inset-block-start: calc(var(--header-offset) + var(--space-6));
	}
}

/* Sale flash sits on the gallery, not in the flow. */
.woocommerce div.product .single-product-layout__media {
	position: relative;
}

.woocommerce span.onsale {
	background-color: var(--color-sale);
	border-radius: var(--radius-sm);
	color: var(--color-white);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	inset-block-start: var(--space-4);
	inset-inline-start: var(--space-4);
	letter-spacing: var(--tracking-wide);
	line-height: 1;
	padding: 0.45rem var(--space-3);
	position: absolute;
	text-transform: uppercase;
	z-index: 2;
}

.woocommerce div.product .woocommerce-product-gallery {
	position: relative;
}

.woocommerce div.product .woocommerce-product-gallery__wrapper {
	border-radius: var(--radius-lg);
	overflow: hidden;
	background-color: var(--surface-muted);
}

.woocommerce div.product .woocommerce-product-gallery img {
	inline-size: 100%;
}

.woocommerce div.product .flex-control-thumbs {
	display: grid;
	gap: var(--space-3);
	grid-template-columns: repeat(5, minmax(0, 1fr));
	list-style: none;
	margin-block-start: var(--space-3);
	padding: 0;
}

.woocommerce div.product .flex-control-thumbs li {
	margin: 0;
	inline-size: auto;
}

.woocommerce div.product .flex-control-thumbs img {
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	cursor: pointer;
	opacity: 0.7;
	transition: opacity var(--duration-fast) var(--ease),
		border-color var(--duration-fast) var(--ease);
}

.woocommerce div.product .flex-control-thumbs img:hover,
.woocommerce div.product .flex-control-thumbs img.flex-active {
	border-color: var(--color-ink-900);
	opacity: 1;
}

.woocommerce div.product .product_title {
	font-size: var(--text-3xl);
	margin-block-end: var(--space-3);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--color-ink-900);
	display: block;
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: var(--weight-semibold);
	margin-block: var(--space-4);
}

.woocommerce div.product p.price del {
	color: var(--text-subtle);
	font-size: var(--text-lg);
	font-weight: var(--weight-normal);
	margin-inline-end: var(--space-3);
}

.woocommerce div.product p.price ins {
	color: var(--color-sale);
	text-decoration: none;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--text-muted);
	line-height: var(--leading-relaxed);
	margin-block-end: var(--space-6);
}

.product-meta-list {
	border-block-start: 1px solid var(--border);
	display: grid;
	gap: var(--space-2);
	font-size: var(--text-sm);
	margin-block-start: var(--space-6);
	padding-block-start: var(--space-5);
}

.product-meta-list__row {
	display: flex;
	gap: var(--space-3);
}

.product-meta-list__label {
	color: var(--text-muted);
	min-inline-size: 7rem;
}

.woocommerce div.product .stock {
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	margin: 0;
}

.woocommerce div.product .stock.in-stock {
	color: var(--color-success);
}

.woocommerce div.product .stock.out-of-stock {
	color: var(--color-danger);
}

/* Quantity + add to cart row */
.woocommerce div.product form.cart {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-block: var(--space-6);
}

.woocommerce div.product form.cart .button {
	flex: 1 1 200px;
	min-block-size: 52px;
}

.woocommerce .quantity {
	align-items: center;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-md);
	display: inline-flex;
	overflow: hidden;
}

.woocommerce .quantity .qty-btn {
	align-items: center;
	color: var(--color-ink-600);
	display: inline-flex;
	block-size: 50px;
	inline-size: 42px;
	justify-content: center;
}

.woocommerce .quantity .qty-btn:hover {
	background-color: var(--surface-muted);
}

.woocommerce .quantity input.qty {
	appearance: textfield;
	border: 0;
	border-radius: 0;
	block-size: 50px;
	inline-size: 52px;
	padding: 0;
	text-align: center;
}

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

.woocommerce .quantity input.qty:focus {
	box-shadow: none;
}

/* Variations */
.woocommerce div.product form.cart .variations {
	inline-size: 100%;
	margin-block-end: var(--space-4);
}

.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
	display: block;
	padding: 0;
	text-align: start;
}

.woocommerce div.product form.cart .variations tr + tr {
	display: block;
	margin-block-start: var(--space-4);
}

.woocommerce div.product form.cart .variations label {
	font-weight: var(--weight-semibold);
}

.woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	font-size: var(--text-sm);
	margin-block-start: var(--space-2);
}

.woocommerce div.product .woocommerce-variation-price {
	margin-block-end: var(--space-4);
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs {
	margin-block-start: var(--space-16);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-block-end: 1px solid var(--border);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-6);
	list-style: none;
	margin: 0 0 var(--space-8);
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--text-muted);
	display: block;
	font-weight: var(--weight-semibold);
	padding-block: var(--space-3);
	text-decoration: none;
	border-block-end: 2px solid transparent;
	margin-block-end: -1px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	border-block-end-color: var(--color-accent);
	color: var(--color-ink-900);
}

.woocommerce div.product .woocommerce-tabs .panel {
	max-inline-size: 78ch;
}

.woocommerce table.shop_attributes {
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
	border-block-end: 1px solid var(--border);
	padding: var(--space-3) var(--space-4);
	text-align: start;
}

.woocommerce table.shop_attributes th {
	background-color: var(--surface-muted);
	font-weight: var(--weight-semibold);
	inline-size: 30%;
}

.woocommerce table.shop_attributes tr:last-child th,
.woocommerce table.shop_attributes tr:last-child td {
	border-block-end: 0;
}

.woocommerce table.shop_attributes p {
	margin: 0;
}

/* Reviews */
.woocommerce #reviews #comments ol.commentlist {
	display: grid;
	gap: var(--space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce #reviews .comment_container {
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	display: flex;
	gap: var(--space-4);
	padding: var(--space-5);
}

.woocommerce #reviews .comment_container img.avatar {
	border-radius: var(--radius-pill);
	block-size: 44px;
	inline-size: 44px;
}

.woocommerce #reviews .comment-text p.meta {
	color: var(--text-muted);
	font-size: var(--text-sm);
}

.woocommerce #review_form_wrapper {
	margin-block-start: var(--space-10);
	max-inline-size: 640px;
}

.woocommerce #review_form .comment-form-rating,
.woocommerce #review_form p {
	margin-block-end: var(--space-4);
}

/* Star rating glyphs — WooCommerce renders these with its own font. */
.woocommerce .star-rating,
.woocommerce p.stars {
	color: #f5a623;
	font-size: var(--text-sm);
}

/* Related / upsells */
.related.products,
.upsells.products,
.up-sells.products,
.cross-sells {
	margin-block-start: var(--section-y);
}

.related.products > h2,
.upsells.products > h2,
.up-sells.products > h2,
.cross-sells > h2 {
	font-size: var(--text-2xl);
	margin-block-end: var(--space-8);
}

/* ---------------------------------------------------------------
 * Cart
 * --------------------------------------------------------------- */

.cart-layout {
	display: grid;
	gap: var(--space-10);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

@media (min-width: 1024px) {
	.cart-layout {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	}
}

.woocommerce table.shop_table {
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	border-collapse: separate;
	border-spacing: 0;
	inline-size: 100%;
	overflow: hidden;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-block-end: 1px solid var(--border);
	padding: var(--space-4);
	text-align: start;
	vertical-align: middle;
}

.woocommerce table.shop_table thead th {
	background-color: var(--surface-muted);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

.woocommerce table.shop_table tbody tr:last-child td {
	border-block-end: 0;
}

.woocommerce table.cart img {
	border-radius: var(--radius-md);
	inline-size: 72px;
}

/* Removing a line is destructive and irreversible in one click, so the
 * control is red at rest — not only once the pointer is already on it.
 * Scoped to a.remove wherever it appears (cart table and mini cart alike). */
.woocommerce a.remove,
.woocommerce a.remove.anzo-remove,
a.anzo-remove {
	align-items: center;
	background-color: var(--color-danger-soft);
	border-radius: var(--radius-pill);
	color: var(--color-danger);
	display: inline-flex;
	block-size: 32px;
	inline-size: 32px;
	justify-content: center;
	line-height: 1;
	text-decoration: none;
	transition: background-color var(--duration-fast) var(--ease),
		color var(--duration-fast) var(--ease);
}

.woocommerce a.remove:hover,
a.anzo-remove:hover,
.woocommerce a.remove:focus-visible,
a.anzo-remove:focus-visible {
	background-color: var(--color-danger);
	color: var(--color-white);
}

.woocommerce table.cart td.actions {
	background-color: var(--surface-muted);
}

.woocommerce .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.woocommerce .coupon input[type="text"] {
	inline-size: auto;
	flex: 1 1 180px;
}

.cart_totals,
.woocommerce-checkout-review-order {
	background-color: var(--surface-muted);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
}

/* Sticky only once there is a second column to stick beside. On a phone the
 * summary is just the last block on the page and must scroll away normally. */
@media (min-width: 1024px) {
	.cart_totals {
		position: sticky;
		inset-block-start: calc(var(--header-offset) + var(--space-4));
	}
}

.cart_totals h2,
.woocommerce-checkout-review-order h3 {
	font-size: var(--text-lg);
	margin-block-end: var(--space-5);
}

.cart_totals table.shop_table,
.woocommerce-checkout-review-order table.shop_table {
	background: transparent;
	border: 0;
}

.cart_totals table.shop_table th,
.cart_totals table.shop_table td,
.woocommerce-checkout-review-order table th,
.woocommerce-checkout-review-order table td {
	background: transparent;
	border-block-end: 1px solid var(--border);
	padding-block: var(--space-3);
	padding-inline: 0;
}

.cart_totals .order-total th,
.cart_totals .order-total td,
.woocommerce-checkout-review-order .order-total th,
.woocommerce-checkout-review-order .order-total td {
	border-block-end: 0;
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
}

.wc-proceed-to-checkout {
	margin-block-start: var(--space-5);
}

.wc-proceed-to-checkout .button {
	inline-size: 100%;
	min-block-size: 52px;
}

/* Cart table collapses into cards on small screens. */
@media (max-width: 767px) {
	.woocommerce table.shop_table thead {
		display: none;
	}

	.woocommerce table.shop_table tbody tr {
		display: grid;
		gap: var(--space-2);
		grid-template-columns: 88px minmax(0, 1fr);
		align-items: center;
		padding: var(--space-4);
		border-block-end: 1px solid var(--border);
	}

	.woocommerce table.shop_table tbody td {
		border: 0;
		padding: 0;
	}

	.woocommerce table.shop_table td.product-thumbnail {
		grid-row: span 4;
	}

	.woocommerce table.shop_table td.product-remove {
		grid-column: 2;
		justify-self: end;
	}

	.woocommerce table.shop_table td::before {
		color: var(--text-muted);
		content: attr(data-title) ": ";
		font-size: var(--text-xs);
	}

	.woocommerce table.shop_table td.product-thumbnail::before,
	.woocommerce table.shop_table td.product-remove::before,
	.woocommerce table.shop_table td.product-name::before {
		content: none;
	}

	.woocommerce table.shop_table td.actions {
		display: block;
		grid-column: 1 / -1;
	}
}

/* ---------------------------------------------------------------
 * Checkout
 * --------------------------------------------------------------- */

/* ⚠ NAME COLLISION — read before touching.
 *
 * WooCommerce's classic checkout wraps the billing column in `.col-1` and the
 * shipping/notes column in `.col-2`, inside `#customer_details.col2-set`.
 * Those are the SAME class names as the theme's 12-column utilities.
 *
 * So `.col2-set` must never be a grid container, and its two children get an
 * explicit reset here. Billing and shipping stack full width; the 12-column
 * grid lives one level deeper, on the __field-wrapper elements. */
.woocommerce-checkout .col2-set,
.woocommerce .col2-set {
	display: block;
}

.woocommerce .col2-set > .col-1,
.woocommerce .col2-set > .col-2 {
	display: block;
	float: none;
	grid-column: auto;
	inline-size: 100%;
	max-inline-size: 100%;
}

.woocommerce .col2-set > .col-2:not(:empty) {
	margin-block-start: var(--space-8);
}

/* Checkout page shell — expressed on the theme's 12 columns.
 *
 * Split is 6 / 6: customer details on the lead side, «طلبك» alongside.
 * To rebalance, change these two spans only (e.g. 7/5 or 8/4) and keep the
 * pair adding up to 12. */
.woocommerce-checkout .checkout {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--space-10);
	row-gap: var(--space-8);
	align-items: start;
	/* Row 1 must hug the «طلبك» heading. Without this it is an implicit `auto`
	 * row, and because #customer_details spans both rows, grid grows the two
	 * rows proportionally to fit that tall column — which pushed the summary
	 * table a long way below its own heading. Pinning row 1 to the heading's
	 * height and letting row 2 absorb the slack keeps the pair together. */
	grid-template-rows: min-content auto;
}

/* Mobile-first: one column under 1024px. */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
	grid-column: span 12;
	min-inline-size: 0;
}

@media (min-width: 1024px) {
	/* A heading belongs to the block under it. The generous row gap is for the
	 * stacked mobile layout; here it would read as a detached label. */
	.woocommerce-checkout .checkout {
		row-gap: var(--space-3);
	}

	.woocommerce-checkout #customer_details {
		grid-column: span 6;
		/* Spans both rows so the summary's heading and table sit beside it. */
		grid-row: 1 / span 2;
	}

	/* Explicit line numbers, not `span`, so the heading and the table always
	 * land in the same half. Grid lines follow the writing direction, so line
	 * 7 is the start of the left half in RTL and the right half in LTR — no
	 * direction-specific rule needed. */
	.woocommerce-checkout #order_review_heading {
		grid-column: 7 / span 6;
		grid-row: 1;
		margin-block: 0 var(--space-4);
	}

	.woocommerce-checkout #order_review {
		grid-column: 7 / span 6;
		grid-row: 2;
		position: sticky;
		inset-block-start: calc(var(--header-offset) + var(--space-4));
	}
}

/* The panel look (background, border, padding) is already applied by the
 * shared `.woocommerce-checkout-review-order` rule above — #order_review
 * carries that class. Only the column-specific bits live here. */

.woocommerce-checkout #order_review table.shop_table thead th {
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--text-muted);
	font-weight: var(--weight-semibold);
	/* A firmer rule under the header than between the rows, so the table has a
	 * clear top edge instead of four identical hairlines. */
	border-block-end: 1px solid var(--border-strong);
	padding-block-end: var(--space-3);
}

.woocommerce-checkout #order_review_heading {
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
}

/* ---------------------------------------------------------------
 * Order summary table — the money column has to be scannable
 * --------------------------------------------------------------- */

/* Numbers align on their own edge; the label column keeps the reading edge.
 * A price column that follows the text is the single biggest thing separating
 * a styled table from a professional one. */
.woocommerce-checkout-review-order table th,
.cart_totals table th {
	text-align: start;
	font-weight: var(--weight-medium);
	color: var(--text);
}

.woocommerce-checkout-review-order table td,
.cart_totals table td {
	text-align: end;
	/* Tabular figures keep the decimal points in a column across rows. */
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Line items carry the product name — they need the full weight of a row,
 * while the totals below them are supporting figures. */
.woocommerce-checkout-review-order .cart_item td.product-name,
.woocommerce-checkout-review-order .cart_item th.product-name {
	text-align: start;
	font-weight: var(--weight-medium);
	white-space: normal;
	line-height: var(--leading-snug);
}

/* WooCommerce prints the quantity as "× 3" inside the name cell. Pulling it
 * out as a muted chip stops it reading as part of the product title. */
.woocommerce-checkout-review-order .product-quantity {
	background-color: var(--surface-sunken);
	border-radius: var(--radius-sm);
	color: var(--text-muted);
	display: inline-block;
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	margin-inline-start: var(--space-2);
	padding: 1px 6px;
	font-variant-numeric: tabular-nums;
}

/* Breathing room between the item list and the totals block. */
.woocommerce-checkout-review-order tfoot tr:first-child th,
.woocommerce-checkout-review-order tfoot tr:first-child td {
	padding-block-start: var(--space-4);
}

/* The grand total is the one number the customer is deciding on. */
.woocommerce-checkout-review-order .order-total th,
.woocommerce-checkout-review-order .order-total td {
	border-block-start: 1px solid var(--border-strong);
	padding-block-start: var(--space-4);
	font-size: var(--text-xl);
}

.woocommerce-checkout-review-order .order-total td {
	color: var(--color-accent);
}

/* Shipping choices are a list of options, not a paragraph. */
.woocommerce-checkout-review-order .shipping td,
.woocommerce-checkout-review-order .woocommerce-shipping-totals td {
	text-align: end;
	white-space: normal;
}

.woocommerce-checkout-review-order ul#shipping_method {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-2);
}

.woocommerce-checkout-review-order ul#shipping_method li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	justify-content: flex-end;
}

.woocommerce-checkout-review-order ul#shipping_method label {
	margin: 0;
	cursor: pointer;
}

/* Grid children must be allowed to shrink, or long Arabic labels force the
 * whole column wider than its track and the layout overflows. */
.woocommerce-checkout .checkout > *,
.woocommerce-billing-fields__field-wrapper > *,
.woocommerce-shipping-fields__field-wrapper > *,
.woocommerce-address-fields__field-wrapper > * {
	min-inline-size: 0;
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
	font-size: var(--text-lg);
	margin-block: var(--space-8) var(--space-5);
}

/* Every WooCommerce field group is a 12-column row, so checkout, the account
 * address forms and login/register all share one layout vocabulary with the
 * rest of the theme (see .row / .col-* in layout.css).
 *
 * The per-field spans come from `col-*` classes added in inc/checkout-egypt.php.
 */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-address-fields__field-wrapper,
.woocommerce form.login .form-row-wrapper,
.woocommerce form.register .form-row-wrapper,
.woocommerce-EditAccountForm {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--space-4);
	row-gap: var(--space-4);
}

/* Wrapped in :where() so its specificity is zero and a `col-*` utility on the
 * same element wins. Without this, `.woocommerce form .form-row` would beat
 * `.col-md-6` and every field would stay full width. */
:where(.woocommerce form .form-row) {
	display: block;
	grid-column: span 12;
	margin: 0;
	padding: 0;
}

/* WooCommerce's own legacy width classes, mapped onto the same 12 columns
 * so third-party fields that use them still line up. */
@media (min-width: 768px) {
	:where(.woocommerce form .form-row-first),
	:where(.woocommerce form .form-row-last) {
		grid-column: span 6;
	}
}

/* NOTE: there is deliberately no `.form-row-wide { span 12 }` rule here.
 * The :where() base above already spans 12, and a real rule would outrank the
 * `col-*` utilities — every field carrying both classes would snap back to
 * full width. Width is decided by col-* alone. */

/* Non-.form-row children of a field group still need to span the full row. */
.woocommerce-EditAccountForm fieldset,
.woocommerce-EditAccountForm > p:not(.form-row) {
	grid-column: span 12;
}

.woocommerce form .form-row label {
	display: block;
}

.woocommerce form .form-row .required {
	color: var(--color-danger);
	text-decoration: none;
}

.woocommerce form .form-row.woocommerce-invalid input,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: var(--color-danger);
}

/* ---------------------------------------------------------------
 * WhatsApp block (inc/checkout-egypt.php)
 * --------------------------------------------------------------- */

.anzo-whatsapp {
	background-color: var(--surface-muted);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	display: grid;
	gap: var(--space-3);
	margin-block: var(--space-5);
	padding: var(--space-4) var(--space-5);
}

.anzo-whatsapp .form-row {
	margin: 0;
	padding: 0;
}

.anzo-whatsapp__same label {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-weight: var(--weight-medium);
	gap: var(--space-2);
	margin: 0;
}

.anzo-whatsapp__same input[type="checkbox"] {
	accent-color: var(--color-success);
	block-size: 18px;
	inline-size: 18px;
	margin: 0;
}

.anzo-whatsapp__number[hidden] {
	display: none;
}

/* ---------------------------------------------------------------
 * Field polish shared by every WooCommerce form
 * --------------------------------------------------------------- */

.woocommerce form .form-row label {
	color: var(--color-ink-700);
	display: block;
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	margin-block-end: var(--space-2);
	/* Labels stay on one line — "البريد الإلكتروني (اختياري)" wrapping to a
	 * second line pushed its field out of alignment with the field beside it.
	 * The longest label needs ~165px and the narrowest column is ~224px, so
	 * this cannot overflow at any supported width. */
	white-space: nowrap;
}

.woocommerce form .form-row .optional {
	color: var(--text-subtle);
	font-weight: var(--weight-normal);
}

/* ---------------------------------------------------------------
 * selectWoo / select2 — used by WooCommerce for المحافظة and الدولة
 *
 * WooCommerce replaces those <select> elements with a custom widget, so they
 * would otherwise look nothing like the plain <select> used for المدينة.
 * Everything below exists to make the two visually identical: same height,
 * border, radius, typography, arrow and focus ring.
 * --------------------------------------------------------------- */

.woocommerce .select2-container {
	inline-size: 100% !important; /* select2 writes an inline pixel width. */
}

.woocommerce .select2-container--default .select2-selection--single {
	background-color: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-md);
	block-size: auto;
	min-block-size: 46px;
	display: flex;
	align-items: center;
	transition: border-color var(--duration-fast) var(--ease),
		box-shadow var(--duration-fast) var(--ease);
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--text);
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: 1.4;
	padding-block: 0;
	padding-inline: var(--space-4) var(--space-10);
	text-align: start;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--text-subtle);
}

/* Replace select2's own triangle with the same chevron the native select uses. */
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
	block-size: 100%;
	inline-size: var(--space-10);
	inset-block-start: 0;
	inset-inline-end: 0;
	inset-inline-start: auto;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow b {
	display: none;
}

.woocommerce .select2-container--open .select2-selection--single,
.woocommerce .select2-container--focus .select2-selection--single {
	border-color: var(--color-accent);
	box-shadow: var(--ring);
}

/* Dropdown panel */
.select2-container--default .select2-dropdown {
	background-color: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	font-size: var(--text-base);
	padding: var(--space-2) var(--space-3);
}

.select2-container--default .select2-results__option {
	font-size: var(--text-base);
	padding: var(--space-3) var(--space-4);
	text-align: start;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background-color: var(--surface-muted);
	color: var(--color-ink-900);
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
	background-color: var(--color-accent);
	color: var(--color-white);
}

/* Native <select> in the same forms must match the widget exactly. */
.woocommerce form .form-row select {
	min-block-size: 46px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
	inline-size: 100%;
}

/* WooCommerce prints its inline error under the field. */
.woocommerce form .form-row .woocommerce-input-wrapper {
	display: block;
	inline-size: 100%;
}

.woocommerce form.login,
.woocommerce form.register {
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	margin-block-end: var(--space-8);
	padding: var(--space-6);
}

/* ---------------------------------------------------------------
 * Coupon — "هل لديك قسيمة؟"
 *
 * The <form> itself gets NO display rule. WooCommerce's slideToggle writes
 * `display: block` inline on it, which would win over anything declared here.
 * The grid lives on .coupon-form__fields inside it (see the template override
 * at woocommerce/checkout/form-coupon.php).
 * --------------------------------------------------------------- */

.woocommerce-form-coupon-toggle {
	margin-block-end: var(--space-5);
}

.woocommerce-form-coupon-toggle .woocommerce-info {
	align-items: center;
	background-color: var(--surface-muted);
	border: 1px dashed var(--border-strong);
	border-inline-start-width: 1px;
	color: var(--text);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: var(--space-4) var(--space-5);
}

.woocommerce-form-coupon-toggle .showcoupon {
	color: var(--color-accent);
	font-weight: var(--weight-semibold);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.woocommerce-form-coupon-toggle .showcoupon:hover {
	color: var(--color-accent-hover);
}

.woocommerce form.checkout_coupon {
	background-color: var(--surface-muted);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	margin-block-end: var(--space-8);
	padding: var(--space-5);
}

.coupon-form__fields {
	align-items: center;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--space-3);
	row-gap: var(--space-3);
}

.woocommerce form.checkout_coupon .coupon-form__fields .form-row {
	grid-column: span 12;
	margin: 0;
	padding: 0;
}

@media (min-width: 560px) {
	.woocommerce form.checkout_coupon .coupon-form__input {
		grid-column: span 8;
	}

	.woocommerce form.checkout_coupon .coupon-form__action {
		grid-column: span 4;
	}
}

.woocommerce form.checkout_coupon .input-text {
	background-color: var(--surface);
	inline-size: 100%;
	min-block-size: 46px;
}

.woocommerce form.checkout_coupon .button {
	inline-size: 100%;
	min-block-size: 46px;
}

.woocommerce-checkout #payment {
	background-color: transparent;
	margin-block-start: var(--space-6);
}

.woocommerce-checkout #payment ul.payment_methods {
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	list-style: none;
	margin: 0 0 var(--space-5);
	padding: var(--space-2);
}

.woocommerce-checkout #payment ul.payment_methods li {
	padding: var(--space-3);
}

.woocommerce-checkout #payment ul.payment_methods li + li {
	border-block-start: 1px solid var(--border);
}

.woocommerce-checkout #payment ul.payment_methods label {
	display: inline;
	font-weight: var(--weight-semibold);
	margin-inline-start: var(--space-2);
}

.woocommerce-checkout #payment div.payment_box {
	background-color: var(--surface);
	border-radius: var(--radius-md);
	color: var(--text-muted);
	font-size: var(--text-sm);
	margin-block-start: var(--space-3);
	padding: var(--space-4);
}

.woocommerce-checkout #payment div.payment_box p:last-child {
	margin-block-end: 0;
}

.woocommerce-terms-and-conditions-wrapper {
	font-size: var(--text-sm);
	margin-block-end: var(--space-5);
}

.woocommerce #place_order {
	inline-size: 100%;
	min-block-size: 54px;
}

/* Order received / thank-you */
.woocommerce-order .woocommerce-order-overview {
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	display: grid;
	gap: var(--space-4);
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	list-style: none;
	margin-block: var(--space-8);
	padding: var(--space-6);
}

.woocommerce-order .woocommerce-order-overview li {
	font-size: var(--text-xs);
	color: var(--text-muted);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

.woocommerce-order .woocommerce-order-overview li strong {
	color: var(--text);
	display: block;
	font-size: var(--text-md);
	letter-spacing: normal;
	margin-block-start: var(--space-1);
	text-transform: none;
}

/* ---------------------------------------------------------------
 * My Account
 * --------------------------------------------------------------- */

/* ---------------------------------------------------------------
 * Reorder — "اطلب مرة أخرى"
 * --------------------------------------------------------------- */

.reorder-list {
	display: grid;
	gap: var(--space-3);
	list-style: none;
	margin: var(--space-6) 0 0;
	padding: 0;
}

.reorder-item {
	align-items: center;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	display: grid;
	gap: var(--space-4);
	grid-template-columns: 64px minmax(0, 1fr);
	padding: var(--space-3) var(--space-4);
}

.reorder-item__media img {
	border-radius: var(--radius-md);
	background-color: var(--surface-muted);
	inline-size: 64px;
	block-size: 64px;
	object-fit: cover;
}

.reorder-item__title {
	color: var(--color-ink-900);
	font-weight: var(--weight-medium);
	text-decoration: none;
}

.reorder-item__title:hover {
	color: var(--color-accent);
}

.reorder-item__meta {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-block-start: var(--space-1);
}

.reorder-item__price {
	font-weight: var(--weight-semibold);
}

.reorder-item__count {
	color: var(--text-subtle);
	font-size: var(--text-xs);
}

.reorder-item__action {
	grid-column: 1 / -1;
}

.reorder-item__action .button {
	inline-size: 100%;
}

@media (min-width: 560px) {
	.reorder-item {
		grid-template-columns: 64px minmax(0, 1fr) auto;
	}

	.reorder-item__action {
		grid-column: auto;
	}

	.reorder-item__action .button {
		inline-size: auto;
		min-inline-size: 150px;
	}
}

/* ---------------------------------------------------------------
 * Pack size + highlights on the single product page
 * --------------------------------------------------------------- */

.product-pack {
	align-items: center;
	display: flex;
	gap: var(--space-2);
	font-size: var(--text-sm);
	margin-block: var(--space-3) 0;
}

.product-pack__label {
	color: var(--text-muted);
}

.product-pack__value {
	background-color: var(--surface-sunken);
	border-radius: var(--radius-sm);
	font-weight: var(--weight-semibold);
	padding: 0.2rem var(--space-3);
}

/* Bullets the shop owner writes in the short description become a scannable
 * highlights list — important for grooming machines and appliances. */
.product-highlights {
	display: grid;
	gap: var(--space-2);
	list-style: none;
	margin: var(--space-4) 0 0;
	padding: 0;
}

.product-highlights li {
	color: var(--text);
	padding-inline-start: var(--space-6);
	position: relative;
}

.product-highlights li::before {
	color: var(--color-success);
	content: "✓";
	font-weight: var(--weight-bold);
	inset-inline-start: 0;
	position: absolute;
}

/* ---------------------------------------------------------------
 * My Account
 * --------------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation {
	margin-block-end: var(--space-8);
}

@media (min-width: 900px) {
	.woocommerce-account .woocommerce {
		display: grid;
		gap: var(--space-12);
		grid-template-columns: 240px minmax(0, 1fr);
		align-items: start;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		margin-block-end: 0;
	}
}

.woocommerce-MyAccount-navigation ul {
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	list-style: none;
	margin: 0;
	overflow: hidden;
	padding: 0;
}

.woocommerce-MyAccount-navigation li + li {
	border-block-start: 1px solid var(--border);
}

.woocommerce-MyAccount-navigation a {
	display: block;
	font-weight: var(--weight-medium);
	padding: var(--space-3) var(--space-4);
	text-decoration: none;
}

.woocommerce-MyAccount-navigation a:hover {
	background-color: var(--surface-muted);
}

.woocommerce-MyAccount-navigation li.is-active a {
	background-color: var(--color-primary);
	color: var(--color-white);
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
	font-size: var(--text-lg);
	margin-block-end: var(--space-4);
}

.woocommerce-Addresses {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.woocommerce-Address {
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
}

.woocommerce-Address-title {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-block-end: var(--space-3);
}

/* ---------------------------------------------------------------
 * Price element
 * --------------------------------------------------------------- */

.woocommerce-Price-amount {
	white-space: nowrap;
}

/* ---------------------------------------------------------------
 * Widgets: price filter, layered nav, active filters
 * --------------------------------------------------------------- */

.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {
	background-color: var(--border);
	border: 0;
	border-radius: var(--radius-pill);
	block-size: 4px;
	margin-block-end: var(--space-5);
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-range {
	background-color: var(--color-accent);
	border-radius: var(--radius-pill);
}

/* A solid knob sitting on the track, the way a progress indicator reads: the
 * dot IS the position marker, so it is filled with the accent rather than
 * outlined, and ringed in the page background so it stays legible where it
 * overlaps the coloured range. 26px on a 4px track; `inset-block-start` and the
 * negative margin are half the size, which centres it. */
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
	background-color: var(--color-accent);
	border: 3px solid var(--surface);
	border-radius: 50%;
	block-size: 26px;
	inline-size: 26px;
	inset-block-start: -11px;
	margin-inline-start: -13px;
	cursor: grab;
	box-shadow: 0 0 0 1px var(--border-strong), 0 2px 5px rgb(0 0 0 / 20%);
	transition: transform var(--duration-fast) var(--ease),
		box-shadow var(--duration-fast) var(--ease);
	/* Lets the value bubble escape the 4px track without being clipped. */
	z-index: 2;
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-handle:hover {
	transform: scale(1.08);
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-handle:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px var(--color-accent-soft), 0 1px 3px rgb(0 0 0 / 18%);
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-handle:active {
	cursor: grabbing;
	transform: scale(1.12);
}

/* Value bubble.
 *
 * The text comes from a data attribute written by assets/js/price-slider.js —
 * CSS cannot read a slider's position. If that script does not run, the empty
 * attribute leaves an empty ::after, which the :not() below keeps invisible, so
 * the slider degrades to a plain (larger) handle rather than a blank chip. */
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle::after {
	content: attr(data-price);
	position: absolute;
	inset-block-end: calc(100% + 10px);
	inset-inline-start: 50%;
	transform: translateX(-50%);
	background-color: var(--color-ink-800);
	border-radius: var(--radius-sm);
	color: var(--color-white);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	line-height: 1.4;
	padding: 3px 8px;
	white-space: nowrap;
	pointer-events: none;
	/* Always on: this is a readout, not a tooltip. The whole point is knowing
	 * where you are standing without having to hover first. It is only faded
	 * out when the script has written nothing (see the empty-value rule below),
	 * which would otherwise leave a blank chip floating over the track. */
	opacity: 1;
	transition: opacity var(--duration-fast) var(--ease);
}

/* RTL note: translateX(-50%) is a physical transform and stays correct here
 * because inset-inline-start already resolves to the right edge in RTL — the
 * shift is relative to the handle's own box either way. */

/* Little arrow joining bubble to handle. */
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle::before {
	content: "";
	position: absolute;
	inset-block-end: calc(100% + 4px);
	inset-inline-start: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-block-start-color: var(--color-ink-800);
	pointer-events: none;
	opacity: 1;
	transition: opacity var(--duration-fast) var(--ease);
}

/* Nothing to read out — hide both parts so the slider degrades to a plain
 * (larger) knob rather than an empty chip. */
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle:not([data-price])::after,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle[data-price=""]::after,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle:not([data-price])::before,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle[data-price=""]::before {
	opacity: 0;
}

/* While dragging, lift the active handle's readout above the other one so the
 * two bubbles cannot be confused when the handles come close together. */
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle.is-dragging {
	z-index: 3;
}

/* Room for the always-on readouts. The bubble clears the track by roughly
 * 46px (13px half-knob + 10px gap + ~23px chip), so anything less clips it
 * against whatever sits above the widget. */
.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {
	margin-block-start: var(--space-12);
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce .widget_price_filter .ui-slider .ui-slider-handle,
	.woocommerce .widget_price_filter .ui-slider .ui-slider-handle::after,
	.woocommerce .widget_price_filter .ui-slider .ui-slider-handle::before {
		transition: none;
	}

	.woocommerce .widget_price_filter .ui-slider .ui-slider-handle:hover,
	.woocommerce .widget_price_filter .ui-slider .ui-slider-handle:active {
		transform: none;
	}
}

.woocommerce .widget_price_filter .price_slider_amount {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	font-size: var(--text-sm);
	justify-content: space-between;
}

.woocommerce .widget_price_filter .price_slider_amount .button {
	min-block-size: 36px;
	padding-inline: var(--space-4);
	font-size: var(--text-sm);
}

.widget_layered_nav ul li,
.woocommerce-widget-layered-nav-list__item {
	align-items: center;
	display: flex;
	gap: var(--space-2);
	justify-content: space-between;
}

.woocommerce-widget-layered-nav-list__item.chosen a {
	color: var(--color-accent);
	font-weight: var(--weight-semibold);
}

.woocommerce-widget-layered-nav-list__item .count {
	color: var(--text-subtle);
	font-size: var(--text-xs);
}

.widget_layered_nav_filters ul li a {
	align-items: center;
	background-color: var(--color-accent-soft);
	border-radius: var(--radius-pill);
	color: var(--color-accent-hover);
	display: inline-flex;
	font-size: var(--text-sm);
	gap: var(--space-2);
	padding-block: var(--space-1);
	padding-inline: var(--space-3);
}