/**
 * Styling for WooCommerce's own default markup on pages we deliberately did
 * NOT template-override (cart, my account, single product gallery/tabs/
 * variations) — see inc/woocommerce.php for why. Those selectors all target
 * WooCommerce's own stable core classes, nothing custom.
 *
 * The one exception is the checkout section, which pairs with the wrapper
 * markup in woocommerce/checkout/ — those rules mix core classes with the
 * few `checkout-*` ones those two templates add.
 */

/* --- Notices --- */
.woocommerce-notices-wrapper {
	margin-block: var(--space-lg);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	list-style: none;
	background: var(--color-surface);
	border-left: 4px solid var(--color-accent-secondary);
	border-radius: var(--radius-sm);
	padding: var(--space-md) var(--space-lg);
	margin-bottom: var(--space-lg);
	box-shadow: var(--shadow-soft);
}

.woocommerce-error {
	border-left-color: var(--color-sale);
}

/* --- Forms --- */
.woocommerce form .form-row label {
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	margin-bottom: var(--space-xs);
	display: block;
}

.woocommerce form .input-text,
.woocommerce form select,
.woocommerce form textarea,
.woocommerce table.shop_table select {
	width: 100%;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-md);
	background: var(--color-surface);
	color: var(--color-text);
}

.woocommerce form .input-text:focus,
.woocommerce form select:focus,
.woocommerce form textarea:focus {
	border-color: var(--color-accent-primary);
}

.quantity .qty {
	width: 4.5em;
	text-align: center;
}

/* --- Single product --- */
.product .summary {
	padding-top: var(--space-lg);
}

.product_title {
	font-size: var(--text-2xl);
}

.woocommerce-product-gallery {
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.woocommerce-product-gallery__image {
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-bg-alt);
}

/* Between ~670px and the two-column switch at 64em the gallery box gets
   wider than the product image itself (600px woocommerce_single size);
   as a block element the image then parks at one edge and the leftover
   space piles up on the other side. Center it instead. */
.woocommerce-product-gallery__image img {
	margin-inline: auto;
}

/* Scoped to the product page's summary column only — a bare `.product .price`
   selector also matches every product-card <li> (they carry the generic
   `product` class too) and was blowing card prices up to 22px. */
.product .summary .price {
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	display: block;
	margin-block: var(--space-md);
}

.product .summary .price del {
	color: var(--color-text-muted);
	opacity: 0.7;
	margin-right: var(--space-sm);
}

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

.woocommerce-variation-add-to-cart,
form.cart {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
	flex-wrap: wrap;
	margin-block: var(--space-lg);
}

/* Variable products: the form contains the whole variations table plus the
   add-to-cart wrap — as flex children they sit side-by-side and their
   intrinsic width can exceed the summary column, which made the page
   horizontally scrollable. Stack the form; the inner
   .woocommerce-variation-add-to-cart row keeps qty + button inline. */
form.cart.variations_form {
	display: block;
}

form.cart .variations,
.single-product div.product .summary {
	max-width: 100%;
	min-width: 0;
}

.variations {
	width: 100%;
	margin-bottom: var(--space-md);
}

.variations td.label {
	font-weight: var(--weight-medium);
	padding-right: var(--space-md);
}

.variations select {
	border-radius: var(--radius-pill);
}

.single_add_to_cart_button {
	flex: 1;
	min-width: 200px;
}

/* Disabled until a variation is chosen (assets/js/variation-swatches.js). */
.single_add_to_cart_button:disabled,
.single_add_to_cart_button.is-selection-needed {
	background: var(--color-bg-alt);
	color: var(--color-text-muted);
	cursor: not-allowed;
	box-shadow: none;
}

.stock {
	display: inline-block;
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	margin-bottom: var(--space-md);
}

.stock.out-of-stock {
	color: var(--color-text-muted);
}

/* Tabs (Description / Size & Fit / Fabric & Care / Returns & Exchange Policy) — reviews are disabled store-wide, see inc/woocommerce.php */
.woocommerce-tabs ul.tabs {
	display: flex;
	gap: var(--space-lg);
	border-bottom: 1px solid var(--color-border);
	margin-block: var(--space-2xl) 0;
	overflow-x: auto;
}

.woocommerce-tabs ul.tabs li {
	padding-bottom: var(--space-md);
	font-weight: var(--weight-medium);
	color: var(--color-text-muted);
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}

.woocommerce-tabs ul.tabs li.active {
	color: var(--color-text);
	border-bottom-color: var(--color-accent-primary);
}

.woocommerce-tabs ul.tabs li a {
	display: block;
}

.woocommerce-tabs .panel {
	padding-block: var(--space-xl);
	max-width: 72ch;
}

/* --- Shop pagination -----------------------------------------------------
   We replaced WooCommerce's stylesheet, so its pagination list needs layout:
   numbers in a centered row of pill buttons, current page filled. */
.woocommerce-pagination {
	margin-top: var(--space-2xl);
	text-align: center;
}

.woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-pagination ul.page-numbers li {
	margin: 0;
}

.woocommerce-pagination a.page-numbers,
.woocommerce-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--space-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	transition: border-color var(--duration-fast) var(--ease-soft), background var(--duration-fast) var(--ease-soft), color var(--duration-fast) var(--ease-soft);
}

.woocommerce-pagination a.page-numbers:hover {
	border-color: var(--color-text);
}

.woocommerce-pagination span.page-numbers.current {
	background: var(--color-text);
	border-color: var(--color-text);
	color: var(--color-bg);
}

.woocommerce-pagination .page-numbers.dots {
	border: none;
	background: transparent;
	min-width: auto;
}

/* Related / upsell products */
.related.products,
.up-sells.upsells.products {
	margin-top: var(--space-3xl);
}

/* Only two related picks — cap the row width so two cards don't stretch
   into billboards on wide screens. Higher specificity than the ul.products
   breakpoint rules, so this wins at every width. */
.related.products ul.products {
	grid-template-columns: repeat(2, 1fr);
	max-width: 720px;
}

.related.products > h2,
.up-sells.upsells.products > h2 {
	font-size: var(--text-xl);
	margin-bottom: var(--space-xl);
}

/* --- Cart page --- */
table.cart,
table.shop_table {
	width: 100%;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-soft);
	border-collapse: collapse;
}

table.cart th,
table.cart td,
table.shop_table th,
table.shop_table td {
	padding: var(--space-lg);
	border-bottom: 1px solid var(--color-border);
	text-align: left;
	vertical-align: middle;
}

table.cart img,
table.shop_table img {
	border-radius: var(--radius-md);
	width: 72px;
	height: 90px;
	object-fit: cover;
}

table.cart td.actions {
	background: transparent;
	border-bottom: none;
}

/* "Update cart" is redundant once assets/js/cart-page.js applies quantity
   changes on its own. Hidden rather than removed: WooCommerce needs the
   button's name/value in the POST to process quantities at all, and the class
   is only added by that script — so with JS off the button reappears and the
   cart still works.
   The class sits on <body> because WooCommerce swaps out the cart form node
   on every refresh; a class on the form itself survives exactly one update. */
.cart-auto-update [name="update_cart"] {
	display: none;
}

/* Coupon row: space beneath the whole group, plus space under the field and
   button individually so they don't collide when they wrap onto two lines on
   a narrow screen. */
table.cart td.actions .coupon {
	margin-bottom: var(--space-xl);
}

table.cart td.actions .coupon #coupon_code,
table.cart td.actions .coupon .button {
	margin-bottom: var(--space-sm);
}

.woocommerce a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	color: var(--color-text-muted) !important;
	font-size: 1.1rem;
}

.woocommerce a.remove:hover {
	background: var(--color-bg-alt);
	color: var(--color-sale) !important;
}

.cart-collaterals {
	display: grid;
	gap: var(--space-xl);
	margin-top: var(--space-2xl);
}

.cart_totals {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: var(--space-xl);
	box-shadow: var(--shadow-soft);
}

.cart_totals h2 {
	font-size: var(--text-lg);
}

.cart_totals table {
	width: 100%;
}

/* Horizontal padding so the label and amount sit inside the row rule rather
   than running out to its ends. */
.cart_totals table th,
.cart_totals table td {
	padding: var(--space-sm) var(--space-md);
	border-bottom: 1px solid var(--color-border);
}

.wc-proceed-to-checkout .checkout-button {
	display: block;
	text-align: center;
	width: 100%;
}

/* --- Checkout ------------------------------------------------------------
   Layout: address forms on the left as separate cards (billing, shipping,
   order notes), order summary on the right in one card that sticks to the
   viewport on desktop so the total and the pay button stay reachable while
   the form is being filled in. Below 64em the summary simply stacks under
   the form. Markup wrappers come from woocommerce/checkout/form-checkout.php;
   everything inside them is still WooCommerce's own.

   All of this applies to the classic [woocommerce_checkout] page only — the
   Checkout block renders its own React markup with `wc-block-components-*`
   class names and is untouched by any of it. */
.checkout-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-2xl);
	/* start, not stretch: a stretched grid item is full-height, and position:
	   sticky inside one has nothing left to travel against. */
	align-items: start;
	margin-bottom: var(--space-2xl);
}

@media (min-width: 64em) {
	.checkout-layout {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		column-gap: var(--space-3xl);
	}

	.checkout-column-summary {
		position: sticky;
		top: calc(var(--header-height) + var(--space-lg));
	}
}

/* Billing / shipping / order-notes each get their own card. The col2-set
   grid core wraps them in is flattened to a single column: it's inside the
   left column now, so its two halves stack rather than sit side by side. */
.woocommerce-checkout .col2-set {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

.checkout-column-details .woocommerce-billing-fields,
.checkout-column-details .woocommerce-account-fields,
.checkout-column-details .woocommerce-shipping-fields,
.checkout-column-details .woocommerce-additional-fields {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: var(--space-xl);
	box-shadow: var(--shadow-soft);
	margin-bottom: var(--space-xl);
}

/* "Ship to a different address?" is a bare checkbox with no fields under it
   until it's ticked — as a full card it read as an empty box. */
.checkout-column-details .woocommerce-shipping-fields {
	padding-block: var(--space-lg);
}

.checkout-column-details h3 {
	font-size: var(--text-lg);
	margin: 0 0 var(--space-lg);
}

/* The shipping card's heading *is* the toggle, so it carries no bottom
   margin of its own unless the address fields below it are showing. */
.checkout-column-details #ship-to-different-address {
	margin-bottom: 0;
	font-size: var(--text-base);
}

.checkout-column-details #ship-to-different-address label {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin: 0;
	cursor: pointer;
}

.checkout-column-details .shipping_address {
	padding-top: var(--space-lg);
}

/* Field grid: everything full width except the first/last name pair, which
   core marks form-row-first / form-row-last. */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-lg);
}

.woocommerce-checkout .form-row {
	margin: 0;
	padding: 0;
}

.woocommerce-checkout .form-row-wide,
.woocommerce-checkout .form-row.notes,
.woocommerce-checkout .form-row.create-account {
	grid-column: 1 / -1;
}

/* Single column on a phone: two name fields side by side leaves neither one
   wide enough to read what's been typed into it. */
@media (max-width: 30em) {
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper,
	.woocommerce-additional-fields__field-wrapper {
		grid-template-columns: minmax(0, 1fr);
	}
}

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

.woocommerce-checkout textarea {
	min-height: 100px;
}

/* Country/state pickers are enhanced by selectWoo (select2), which draws its
   own box rather than the <select> the rules above style — without these it's
   the one control on the form with square corners and a different height. */
.woocommerce-checkout .select2-container .select2-selection--single {
	height: auto;
	padding: var(--space-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
}

.woocommerce-checkout .select2-container .select2-selection__rendered {
	padding: 0;
	line-height: 1.4;
	color: var(--color-text);
}

.woocommerce-checkout .select2-container .select2-selection__arrow {
	top: 50%;
	right: var(--space-md);
	transform: translateY(-50%);
}

/* Login / coupon prompts that core prints above the form as notices. */
.woocommerce-checkout .checkout_coupon,
.woocommerce-checkout .woocommerce-form-login {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: var(--space-xl);
	box-shadow: var(--shadow-soft);
	margin-bottom: var(--space-xl);
}

.woocommerce-checkout .checkout_coupon .form-row {
	margin-bottom: var(--space-md);
}

/* --- Checkout: order summary card --- */
.checkout-column-summary {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: var(--space-xl);
	box-shadow: var(--shadow-soft);
}

#order_review_heading {
	font-size: var(--text-lg);
	margin: 0 0 var(--space-lg);
}

/* The summary reads as rows in a card, not as a table.

   The markup stays a real <table> — WooCommerce's totals helpers print <tr>s
   and the fragment replacement keys off the table's class, so the elements
   have to be there — but every part of it is laid out as flex rows instead.
   That's not cosmetic: a table makes the item rows and the totals rows share
   column widths, and the two want opposite things. An item row needs the
   width on the left for a product name; the shipping row needs it on the
   right for a method list. Sharing means one of them is always squeezed, and
   at phone width it was squeezing a product name into 30px. As independent
   flex rows each one sizes itself.

   The `.woocommerce-checkout` prefix throughout is load-bearing: the shared
   rules further up this file are written as `table.shop_table td`, which
   outweighs a bare single-class selector. */
.woocommerce-checkout .woocommerce-checkout-review-order-table,
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr,
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td {
	display: block;
	width: auto;
	background: transparent;
	box-shadow: none;
	border: none;
	border-radius: 0;
	overflow: visible;
	padding: 0;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tr {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-lg);
	padding-block: var(--space-md);
	border-bottom: 1px solid var(--color-border);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr:first-child {
	padding-top: 0;
}

/* Item rows: the thumbnail is tall enough that a baseline would leave the
   price stranded at the top of it. */
.woocommerce-checkout .woocommerce-checkout-review-order-table .cart_item {
	align-items: center;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name {
	flex: 1;
	min-width: 0;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
	flex-shrink: 0;
	text-align: right;
}

/* --- Checkout: one line item (thumbnail + name + variation + quantity) --- */
.checkout-item {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
}

.checkout-item-media {
	position: relative;
	flex-shrink: 0;
}

/* Beats `table.shop_table img` (which sizes the cart page's larger thumbs). */
.woocommerce-checkout-review-order-table .checkout-item-media img {
	display: block;
	width: 56px;
	height: 70px;
	object-fit: cover;
	border-radius: var(--radius-md);
	background: var(--color-bg-alt);
}

/* Quantity rides the corner of the photo rather than trailing the name, so
   the name gets the full width of the column. */
.checkout-item-qty {
	position: absolute;
	top: -6px;
	right: -8px;
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: var(--radius-pill);
	background: var(--color-text);
	color: var(--color-bg);
	font-size: 0.68rem;
	line-height: 1.5;
	white-space: nowrap;
}

.checkout-item-qty .product-quantity {
	font-weight: var(--weight-bold);
}

.checkout-item-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.checkout-item-name {
	font-family: var(--font-display);
	font-weight: var(--weight-medium);
	line-height: 1.3;
}

.checkout-item-variants {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* Extra cart item data (wc_get_formatted_cart_item_data) — label/value pairs
   from add-ons and gift-message style plugins. */
.checkout-item-info .variation {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0 var(--space-xs);
	margin: 0;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.checkout-item-info .variation dt {
	font-weight: var(--weight-medium);
}

.checkout-item-info .variation dd,
.checkout-item-info .variation dd p {
	margin: 0;
}

/* --- Checkout: totals --- */
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th {
	font-weight: var(--weight-regular);
	color: var(--color-text-muted);
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total {
	border-bottom: none;
	padding-top: var(--space-lg);
	padding-bottom: 0;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td {
	font-size: var(--text-md);
	font-weight: var(--weight-bold);
	color: var(--color-text);
}

/* Shipping is the one row whose value is a list of choices rather than a
   figure. `flex: 1 1 13rem` lets it sit beside its label while there's room
   for a line of it, and drop to its own full-width line when there isn't,
   instead of wrapping "Standard shipping: AED 25.00" into three ragged
   fragments against the right edge. */
.woocommerce-checkout .woocommerce-checkout-review-order-table .woocommerce-shipping-totals {
	flex-wrap: wrap;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table .woocommerce-shipping-totals td {
	flex: 1 1 13rem;
	/* A method name is a description, not a headline figure — it reads at the
	   same size as the options list it turns into once there's more than one
	   method to choose from. */
	font-size: var(--text-sm);
}

.woocommerce-checkout-review-order-table #shipping_method {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-checkout-review-order-table #shipping_method li {
	margin-bottom: var(--space-xs);
}

.woocommerce-checkout-review-order-table #shipping_method li:last-child {
	margin-bottom: 0;
}

.woocommerce-checkout-review-order-table #shipping_method label {
	display: inline;
	margin: 0;
	font-size: var(--text-sm);
	font-weight: var(--weight-regular);
}

.woocommerce-shipping-destination,
.woocommerce-checkout-review-order-table .woocommerce-shipping-calculator {
	margin-top: var(--space-xs);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	white-space: normal;
}

/* --- Checkout: payment --- */
.woocommerce-checkout-payment {
	margin-top: var(--space-lg);
}

.woocommerce-checkout-payment ul.payment_methods {
	list-style: none;
	margin: 0 0 var(--space-lg);
	padding: 0;
	display: grid;
	gap: var(--space-sm);
}

.woocommerce-checkout-payment li.wc_payment_method {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-sm);
	padding: var(--space-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-bg);
	transition: border-color var(--duration-fast) var(--ease-soft);
}

.woocommerce-checkout-payment li.wc_payment_method:has(input:checked) {
	border-color: var(--color-accent-primary);
}

.woocommerce-checkout-payment li.wc_payment_method > label {
	flex: 1;
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin: 0;
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	cursor: pointer;
}

.woocommerce-checkout-payment li.wc_payment_method > label img {
	max-height: 24px;
	width: auto;
}

/* Gateway instructions / card fields: full-width row beneath the label. */
.woocommerce-checkout-payment .payment_box {
	flex-basis: 100%;
	margin: 0;
	padding: var(--space-md);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.woocommerce-checkout-payment .payment_box p:last-child {
	margin-bottom: 0;
}

.woocommerce-checkout-payment .woocommerce-privacy-policy-text,
.woocommerce-checkout-payment .woocommerce-terms-and-conditions-wrapper {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.woocommerce-checkout-payment .woocommerce-terms-and-conditions-checkbox-text {
	font-size: var(--text-sm);
}

.woocommerce-checkout-payment .form-row.place-order {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	margin-top: var(--space-lg);
}

/* The trust line (inc/woocommerce.php, woocommerce_review_order_before_submit)
   reads as a caption to the pay button, so it goes under it rather than
   above — flex order, not markup, so the hook keeps its documented position. */
.woocommerce-checkout-payment .checkout-trust-message {
	order: 1;
	justify-content: center;
	margin: 0;
}

#place_order {
	width: 100%;
}

/* --- My account --- */
.woocommerce-account .account-nav ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: var(--space-sm);
	box-shadow: var(--shadow-soft);
}

.woocommerce-account .account-nav li a {
	display: block;
	padding: var(--space-md) var(--space-lg);
	border-radius: var(--radius-md);
	font-weight: var(--weight-medium);
}

.woocommerce-account .account-nav li.is-active a {
	background: var(--color-bg-alt);
	color: var(--color-accent-primary-dark);
}

.woocommerce-account .account-nav li a:hover {
	background: var(--color-bg-alt);
}

.woocommerce-MyAccount-content {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: var(--space-xl);
	box-shadow: var(--shadow-soft);
}

.woocommerce-MyAccount-content table.shop_table {
	box-shadow: none;
}

.woocommerce-account .account-nav li a {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.woocommerce-account .account-nav li a .icon {
	width: 1.1em;
	height: 1.1em;
	flex-shrink: 0;
	opacity: 0.7;
}

/* --- My account: dashboard --- */
.account-dashboard-title {
	margin-bottom: var(--space-xs);
}

.account-dashboard-subtitle {
	color: var(--color-text-muted);
	margin-bottom: var(--space-xl);
}

/* Approximate conversion beside the checkout total. Deliberately quieter and
   on its own line: the AED figure above it is the one being charged, and this
   must never compete with it for primacy. */
.currency-approx {
	display: block;
	/* Rendered empty and hidden; assets/js/currency.js fills it in and unhides
	   it only when a conversion is actually in effect. Without this the
	   display:block above would defeat the hidden attribute. */
}

.currency-approx[hidden] {
	display: none;
	margin-top: 2px;
	font-size: var(--text-sm);
	font-weight: var(--weight-regular);
	color: var(--color-text-muted);
	white-space: nowrap;
}

/* Currency notes: quiet by design — informative, not a warning. */
.price-conversion-note,
.currency-charge-notice {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--space-lg);
}

/* Welcome discount callout — sits above the order summary because a new
   registration lands here with no orders yet, and the code is the one thing
   they came for. Dashed border reads as "voucher" without needing artwork. */
.account-welcome-coupon {
	padding: var(--space-lg);
	border: 1px dashed var(--color-accent-primary);
	border-radius: var(--radius-md);
	background: color-mix(in srgb, var(--color-accent-primary) 8%, transparent);
	margin-bottom: var(--space-xl);
}

.account-welcome-coupon-label {
	margin: 0;
	font-weight: var(--weight-semibold);
}

.account-welcome-coupon-code {
	margin: var(--space-xs) 0;
	font-family: var(--font-display);
	font-size: var(--text-xl);
	letter-spacing: 0.08em;
	color: var(--color-accent-primary-dark);
	/* Selectable in one gesture — customers copy this, they don't retype it. */
	user-select: all;
}

.account-welcome-coupon-note {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.account-recent-order {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	padding: var(--space-lg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-xl);
}

a.account-recent-order:hover {
	border-color: var(--color-accent-primary);
}

.account-recent-order--empty {
	flex-direction: column;
	align-items: flex-start;
	background: var(--color-bg-alt);
	border: none;
}

.account-recent-order--empty p {
	margin: 0;
}

.account-recent-order-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.account-recent-order-label {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
}

.account-recent-order-meta {
	font-weight: var(--weight-medium);
}

.account-recent-order-total {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.account-order-status {
	flex-shrink: 0;
	padding: var(--space-xs) var(--space-md);
	border-radius: var(--radius-pill);
	background: var(--color-bg-alt);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
}

.account-order-status.status-completed {
	background: color-mix(in srgb, var(--color-success) 18%, white);
	color: var(--color-success);
}

.account-order-status.status-processing {
	background: var(--color-accent-tertiary);
}

.account-order-status.status-cancelled,
.account-order-status.status-failed {
	background: color-mix(in srgb, var(--color-sale) 14%, white);
	color: var(--color-sale);
}

.account-quick-links {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--space-lg);
}

.account-quick-link {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-lg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.account-quick-link:hover {
	border-color: var(--color-accent-primary);
	background: var(--color-bg);
}

.account-quick-link-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: var(--radius-pill);
	background: var(--color-bg-alt);
	color: var(--color-accent-primary-dark);
}

.account-quick-link-icon .icon {
	width: 1.2em;
	height: 1.2em;
}

.account-quick-link-copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.account-quick-link-label {
	font-weight: var(--weight-semibold);
}

.account-quick-link-text {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* --- My account: wishlist tab --- */
.account-wishlist-intro {
	color: var(--color-text-muted);
}

/* --- My account: login / register (logged-out view of the same page) --- */
.woocommerce-account #customer_login {
	display: grid;
	gap: var(--space-xl);
}

@media (min-width: 48em) {
	.woocommerce-account #customer_login {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}

.woocommerce-account #customer_login .u-column1,
.woocommerce-account #customer_login .u-column2,
.woocommerce-account .entry-content > .woocommerce > form.woocommerce-form-login {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: var(--space-xl);
	box-shadow: var(--shadow-soft);
}

/* Registration disabled: the lone login form gets a single centered card. */
.woocommerce-account .entry-content > .woocommerce > form.woocommerce-form-login {
	max-width: 480px;
	margin-inline: auto;
}

.woocommerce-account #customer_login h2 {
	font-size: var(--text-lg);
	margin-bottom: var(--space-lg);
}

.woocommerce-form-login .woocommerce-form-login__rememberme {
	display: block;
	margin-bottom: var(--space-md);
}

.woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce-form-register .woocommerce-form-register__submit {
	width: 100%;
}

.woocommerce-LostPassword {
	margin-top: var(--space-md);
	margin-bottom: 0;
	font-size: var(--text-sm);
}

.woocommerce-LostPassword a {
	color: var(--color-text-muted);
	text-decoration: underline;
}

/* --- Single product: page structure -------------------------------------
   WooCommerce's single-product template renders gallery + summary as
   siblings inside div.product; without its default stylesheet they stack
   full-width. Grid them side by side on desktop, tabs/related span both. */
.single-product-main {
	padding-bottom: var(--space-2xl);
}

.single-product div.product {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-2xl);
	margin-top: var(--space-xl);
}

.single-product div.product .woocommerce-tabs,
.single-product div.product .related.products,
.single-product div.product .up-sells {
	grid-column: 1 / -1;
}

.single-product div.product .summary {
	padding-top: 0;
}

/* Sale badge on the product page (absolute over the gallery corner). */
.single-product div.product > .monatesmir-sale-badge {
	position: absolute;
	top: var(--space-md);
	left: var(--space-md);
	z-index: 5;
}

@media (min-width: 64em) {
	.single-product div.product {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		column-gap: var(--space-4xl);
	}
}

/* Gallery: we removed WooCommerce's stylesheet, so restore the flexslider
   essentials its gallery JS expects (viewport clipping + thumbnail strip). */
.woocommerce-product-gallery {
	position: relative;
}

.woocommerce-product-gallery .flex-viewport {
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-bg-alt);
}

.woocommerce-product-gallery__trigger {
	position: absolute;
	top: var(--space-md);
	right: var(--space-md);
	z-index: 9;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-surface);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-soft);
	font-size: 0;
}

.woocommerce-product-gallery__trigger::before {
	content: "";
	width: 18px;
	height: 18px;
	background-color: var(--color-text);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E") no-repeat center / contain;
}

.flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-sm);
	margin-top: var(--space-sm);
}

.flex-control-thumbs img {
	border-radius: var(--radius-md);
	cursor: pointer;
	opacity: 0.6;
	transition: opacity var(--duration-fast) var(--ease-soft);
}

.flex-control-thumbs img:hover,
.flex-control-thumbs img.flex-active {
	opacity: 1;
}

/* --- Variation swatches (assets/js/variation-swatches.js) ---------------
   The native selects stay in the DOM for WooCommerce's JS; hide them
   without display:none so change events and form semantics keep working. */
.variation-select-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.variation-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.variation-swatch {
	min-width: 48px;
	min-height: 44px;
	padding: var(--space-sm) var(--space-lg);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	color: var(--color-text);
	transition: border-color var(--duration-fast) var(--ease-soft), background var(--duration-fast) var(--ease-soft), color var(--duration-fast) var(--ease-soft);
}

.variation-swatch:hover:not(:disabled) {
	border-color: var(--color-text);
}

.variation-swatch.is-active {
	background: var(--color-text);
	border-color: var(--color-text);
	color: var(--color-bg);
}

.variation-swatch:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	text-decoration: line-through;
}

.variation-swatch--color {
	min-width: 44px;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	background: var(--swatch-color, #ccc);
	border: 2px solid var(--color-border);
	box-shadow: inset 0 0 0 3px var(--color-surface);
}

.variation-swatch--color:hover:not(:disabled) {
	border-color: var(--color-text-muted);
}

.variation-swatch--color.is-active {
	background: var(--swatch-color, #ccc);
	border-color: var(--color-text);
}

.variation-swatch--color:disabled {
	text-decoration: none;
}

/* Variations table: stacked label-over-swatches rows instead of a table. */
.variations,
.variations tbody,
.variations tr,
.variations th,
.variations td {
	display: block;
	text-align: left;
}

.variations tr {
	margin-bottom: var(--space-lg);
}

.variations th.label {
	font-weight: var(--weight-bold);
	font-size: var(--text-sm);
	padding-bottom: var(--space-sm);
}

.reset_variations {
	display: inline-block;
	margin-top: var(--space-sm);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	text-decoration: underline;
}

.woocommerce-variation-price {
	margin-bottom: var(--space-md);
}

/* --- Shop toolbar: count left, sort right -------------------------------- */
.shop-toolbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-md);
	margin-bottom: var(--space-xl);
}

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

.woocommerce-ordering {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin: 0;
}

.woocommerce-ordering-label {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	white-space: nowrap;
}

.woocommerce-ordering .orderby {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-sm) var(--space-md);
	background: var(--color-surface);
	font-size: var(--text-sm);
	color: var(--color-text);
}

/* --- Filter widgets ------------------------------------------------------ */

/* Price slider (WooCommerce "Filter by price" widget). */
.price_slider_wrapper {
	padding-top: var(--space-sm);
}

/* The widget ships raw min/max text inputs that its JS hides after init —
   without core's stylesheet they flash visible on every reload before the
   slider takes over. Hide them from first paint; the slider writes to them
   and they still submit their values. */
.price_slider_amount input#min_price,
.price_slider_amount input#max_price {
	display: none;
}

/* Inverse flash: the widget prints .price_slider and .price_label with
   inline display:none and its JS .show()s them after init, so the slider
   vanished for a beat on every reload. Force them visible from first paint
   (!important is required to beat the inline style); the jQuery UI handles
   simply attach onto the already-visible track. */
.price_slider_wrapper .price_slider,
.price_slider_amount .price_label {
	display: block !important;
}

.price_slider {
	position: relative;
	height: 4px;
	background: var(--color-border);
	border-radius: var(--radius-pill);
	margin: var(--space-md) 9px var(--space-xl);
}

.price_slider .ui-slider-range {
	position: absolute;
	height: 100%;
	background: var(--color-text);
	border-radius: var(--radius-pill);
}

.price_slider .ui-slider-handle {
	position: absolute;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-left: -9px;
	transform: translateY(-50%);
	background: var(--color-surface);
	border: 2px solid var(--color-text);
	border-radius: 50%;
	cursor: grab;
}

.price_slider .ui-slider-handle:active {
	cursor: grabbing;
}

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

.price_slider_amount .price_label {
	color: var(--color-text-muted);
}

/* The Filter button is redundant: releasing a slider handle applies the
   range automatically (assets/js/filters.js). */
.price_slider_amount .button {
	display: none;
}

/* Attribute filters (WooCommerce layered nav) as a checkbox-style list. */
.woocommerce-widget-layered-nav-list li {
	padding-block: 5px;
}

.woocommerce-widget-layered-nav-list a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	font-size: var(--text-sm);
	color: var(--color-text);
}

.woocommerce-widget-layered-nav-list a::before {
	content: "";
	flex-shrink: 0;
	width: 17px;
	height: 17px;
	border: 1.5px solid var(--color-border);
	border-radius: 5px;
	background: var(--color-surface);
	transition: background var(--duration-fast) var(--ease-soft), border-color var(--duration-fast) var(--ease-soft);
}

.woocommerce-widget-layered-nav-list a:hover::before {
	border-color: var(--color-text);
}

.woocommerce-widget-layered-nav-list li.chosen a::before {
	background-color: var(--color-text);
	border-color: var(--color-text);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 13 9 18 20 6'/%3E%3C/svg%3E");
	background-size: 11px;
	background-position: center;
	background-repeat: no-repeat;
}

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

/* Collapsed long filter lists (colour, category). The class is only added by
   filters.js, so without JS every option stays visible and reachable. */
.woocommerce-widget-layered-nav-list.filter-list--collapsed li:nth-child(n+6) {
	display: none;
}

.filter-list-toggle {
	margin-top: var(--space-xs);
	padding: 0;
	border: none;
	background: none;
	font-size: var(--text-sm);
	color: var(--color-accent-primary-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.filter-list-toggle:hover {
	color: var(--color-text);
}

/* --- WooCommerce pages rendered through page.php (cart/checkout/account):
   lift the 72ch prose width — tables and checkout grids need the room. */
.woocommerce-cart .static-page-content,
.woocommerce-checkout .static-page-content,
.woocommerce-account .static-page-content {
	max-width: none;
}

/* --- My Account: side nav + content on desktop. Scoped to .logged-in —
   the logged-out view of the same page is the login/register form, which
   has no side nav and would otherwise land in the 240px nav column. --- */
@media (min-width: 64em) {
	.woocommerce-account.logged-in .static-page-content .woocommerce {
		display: grid;
		grid-template-columns: 240px minmax(0, 1fr);
		gap: var(--space-2xl);
		align-items: start;
	}
}