/* ==========================================================================
   Sitewide polish, mostly for phones (almost all traffic is mobile).
   Loaded after theme.css / wc-compat.css / store-ui.css.
   ========================================================================== */

/* ---------- Product card buttons: one size everywhere ----------
   On shop/category/search pages WooCommerce's own `.woocommerce a.button`
   (16px bold) outranked the card style, so "SELECT OPTIONS" wrapped onto
   two lines and cards in one row had different heights. */
.product-card a.product-card__quick-add.button,
.product-card button.product-card__quick-add.button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 8px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .05em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-radius: 0;
}

/* ---------- Taps: bigger hit areas without changing the look ---------- */
.hero__dots button,
.product-gallery__dots button { position: relative; }
.hero__dots button::after,
.product-gallery__dots button::after {
	content: '';
	position: absolute;
	inset: -14px -6px;
}
.drawer-close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.wc-block-cart .wc-block-components-quantity-selector__button { min-width: 40px; min-height: 40px; }
.wc-block-cart .wc-block-cart-item__remove-link { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- Cart on phones ----------
   Each cell carried a 14px page-coloured bottom border (the desktop spacing between
   items), which showed as three broken cream bars under the row; and cell padding plus
   table spacing made the table 32px wider than its column, pushing the price off small screens. */
@media (max-width: 749px) {
	.wc-block-cart .wc-block-cart-items,
	.wc-block-cart .wc-block-cart-items > tbody { display: block !important; width: 100% !important; border-spacing: 0 !important; }
	.wc-block-cart .wc-block-cart-items__row { width: 100%; box-sizing: border-box; }
	.wc-block-cart .wc-block-cart-items__row { margin-bottom: 12px; }
	.wc-block-cart .wc-block-cart-items__row > td { border-bottom: 0 !important; background: transparent !important; }
	.wc-block-cart .wc-block-cart-items__row > td.wc-block-cart-item__image { flex: 0 0 auto; padding: 16px 10px 16px 14px !important; }
	.wc-block-cart .wc-block-cart-items__row > td.wc-block-cart-item__product { flex: 1 1 0 !important; min-width: 0; }
	.wc-block-cart .wc-block-cart-items__row > td.wc-block-cart-item__total { flex: 0 0 auto; padding: 20px 14px 20px 8px !important; }
}

/* ---------- Product page ---------- */
/* Before a colour/size is picked, WooCommerce greys out Add to cart as if the
   item were unavailable. Tapping it already explains what to choose (main.js),
   so keep it looking like the live button it is. */
.product-info button.single_add_to_cart_button.button.disabled,
.product-info button.single_add_to_cart_button.button.disabled:hover {
	background: var(--color-accent) !important;
	border-color: var(--color-accent);
	color: #fff;
	cursor: pointer;
	opacity: 1;
}

/* ---------- Checkout ---------- */
/* WooCommerce borders the dropdown's wrapper; a second border on the select
   inside it drew a double box on State / Country. */
.wc-block-checkout .wc-blocks-components-select__select { border: 0 !important; box-shadow: none !important; }
.wc-block-checkout .wc-blocks-components-select__container { border: 1px solid var(--color-border) !important; border-radius: 0 !important; background: #fff; }
.wc-block-checkout .wc-blocks-components-select__container:focus-within { border-color: var(--color-accent) !important; box-shadow: 0 0 0 1px var(--color-accent); }
/* The order summary is not a step: don't number it. */
.wc-block-checkout__main [class*="order-summary"] .wc-block-components-checkout-step__title::before { content: none; counter-increment: none; }
/* On phones the summary sits between the terms line and the button; close the terms box. */
.wc-block-checkout__terms:not(:has(+ .wc-block-checkout__actions)) {
	border-bottom: 1px solid var(--color-border) !important;
	padding-bottom: 20px !important;
	margin-bottom: 16px !important;
}
.wc-block-checkout__terms:not(:has(+ .wc-block-checkout__actions)) + * + .wc-block-checkout__actions,
.wc-block-checkout__main [class*="order-summary"] + .wc-block-checkout__actions { border-top: 1px solid var(--color-border); }

@media (max-width: 749px) {
	/* Number field and Verify on one line on phones too. */
	#contact > .wc-block-components-address-form__utsavika-phone { flex: 1 1 0; min-width: 0; }
	#contact .wacb-otp__send--inline { padding: 0 16px; }
	/* PIN code and Country each took half the row with an empty half beside them. */
	.wc-block-checkout .wc-block-components-address-form__postcode,
	.wc-block-checkout .wc-block-components-address-form__country { flex: 1 1 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
	.wc-block-checkout__main .wc-block-components-checkout-step { padding: 22px 18px !important; }
	.wc-block-checkout__actions, .wc-block-checkout__terms { padding-left: 18px !important; padding-right: 18px !important; }
}

/* ---------- Phones ---------- */
@media (max-width: 749px) {
	/* iPhones zoom the page in when a field under 16px is tapped, and the
	   shopper has to pinch back out. */
	input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="file"]),
	select,
	textarea { font-size: 16px !important; }

	/* WhatsApp button: smaller so it covers less of the page, and hidden where
	   the page already has its own WhatsApp step (login, checkout, contact) or
	   where it was covering totals and buttons (cart). */
	.whatsapp-float { width: 48px; height: 48px; right: 14px; }
	.whatsapp-float svg { width: 24px; height: 24px; }
	body.woocommerce-cart .whatsapp-float,
	body.woocommerce-checkout .whatsapp-float,
	body.woocommerce-account .whatsapp-float,
	body.page-id-2590 .whatsapp-float { display: none; }

	/* Footer links were 22px tall: easy to mis-tap. */
	.footer-col ul li { margin-bottom: 4px; }
	.footer-col ul li a { min-height: 40px; }

	/* Product photo dots duplicate the thumbnail strip right under them. */
	.product-gallery__dots { display: none; }

	/* Size chart is an image of a table: let it be swiped sideways at a readable size. */
	body.page-id-2589 .content-block p:has(> img),
	body.page-id-2589 .content-block figure { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px 8px; }
	body.page-id-2589 .content-block p:has(> img) img,
	body.page-id-2589 .content-block figure img { max-width: none !important; width: 760px; height: auto; }
	body.page-id-2589 .content-block p:has(> img)::before,
	body.page-id-2589 .content-block figure::before {
		content: 'Swipe to see the full chart →';
		display: block;
		margin-bottom: 8px;
		font-size: 13px;
		color: var(--color-text-muted);
	}
}

/* ---------- Homepage: carousels run edge to edge ----------
   They sat inside the page container, so cards were cropped at its side margins.
   Now they bleed to the screen edges while the first card still lines up with the
   headings above. */
.category-marquee {
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}
.product-grid--scroll {
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	padding-left: max(24px, calc(50vw - (var(--max-width) / 2) + 24px)) !important;
	padding-right: max(24px, calc(50vw - (var(--max-width) / 2) + 24px)) !important;
	scroll-padding-left: max(24px, calc(50vw - (var(--max-width) / 2) + 24px)) !important;
}
.product-grid--scroll .product-card:last-child { margin-right: 0 !important; }
@media (max-width: 749px) {
	.product-grid--scroll { padding-left: 12px !important; padding-right: 12px !important; scroll-padding-left: 12px !important; }
	.category-marquee__track { padding-left: 0 !important; }
}

/* ---------- Homepage: reviews column never taller than the text beside it ----------
   `contain: size` stops the long scrolling review list from stretching the row; the
   column then takes the text column's height and the list scrolls inside it. */
@media (min-width: 901px) {
	.reviews-content-split { align-items: stretch; }
	.reviews-content-split__reviews { contain: size; overflow: hidden; }
}

/* ---------- Checkout: payment options ----------
   One card per option: radio, name (+ offer badge) and a one-line explainer on the
   left, the amount payable on the right. The selected card gets the accent border
   and a warm tint; the explainer shows only for the selected one. */
#payment-method .wc-block-components-radio-control { display: flex; flex-direction: column; gap: 12px; border: 0 !important; }
#payment-method .wc-block-components-radio-control-accordion-option {
	position: relative;
	margin: 0 !important;
	background: #fff !important;
	border: 1px solid var(--color-border) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transition: border-color .15s ease, background-color .15s ease;
}
#payment-method .wc-block-components-radio-control-accordion-option::after,
#payment-method .wc-block-components-radio-control-accordion-option::before { display: none !important; }
#payment-method .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-color: var(--color-accent) !important;
	box-shadow: inset 0 0 0 1px var(--color-accent) !important;
	background: #fcf7f5 !important;
}
#payment-method .wc-block-components-radio-control__option {
	display: flex !important;
	align-items: center;
	gap: 12px;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 16px 18px 16px 52px !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
}
#payment-method .wc-block-components-radio-control__input {
	position: absolute !important;
	left: 18px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 20px !important;
	height: 20px !important;
	margin: 0 !important;
}
#payment-method .wc-block-components-radio-control__option-layout { flex: 1 1 0; min-width: 0; width: auto !important; padding: 0 !important; }
#payment-method .wc-block-components-radio-control__label-group { display: block; width: auto; }
#payment-method .wc-block-components-payment-method-label {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	color: var(--color-text);
}
/* Gateway logo image (Cashfree): the explainer names it, the big logo only crowded the row. */
#payment-method .wc-block-components-payment-method-label img,
#payment-method .wc-block-components-payment-method-icons { display: none !important; }
.utsv-pay-badge {
	display: inline-block;
	padding: 3px 7px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1;
	color: #fff;
	background: #1e7a3d;
}
.utsv-pay-amount {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 3px;
	margin-left: auto;
	text-align: right;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}
.utsv-pay-amount strong { font-size: 18px; font-weight: 700; color: var(--color-text); white-space: nowrap; }
.utsv-pay-amount small { font-size: 12px; font-weight: 500; color: var(--color-text-muted); white-space: nowrap; }
.utsv-pay-amount.is-saving small { color: #1e7a3d; font-weight: 700; }
.utsv-pay-amount small[hidden] { display: none; }
#payment-method .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted .utsv-pay-amount strong { color: var(--color-accent); }
#payment-method .wc-block-components-radio-control-accordion-content {
	margin: 0 !important;
	padding: 0 18px 16px 52px !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-text-muted);
}
#payment-method .wc-block-components-radio-control-accordion-content:empty { display: none; }
#payment-method .wc-block-components-radio-control-accordion-content * { font-size: inherit !important; font-weight: 400 !important; color: inherit !important; margin: 0 !important; }
#payment-method .wc-block-components-radio-control-accordion-option + .wc-block-components-radio-control-accordion-option { margin-top: 12px !important; }
#payment-method .wc-block-components-radio-control__input {
	-webkit-appearance: none !important;
	appearance: none !important;
	border: 1.5px solid #b9aaa4 !important;
	border-radius: 50% !important;
	background: #fff !important;
	box-shadow: none !important;
	outline-offset: 3px;
}
#payment-method .wc-block-components-radio-control__input::before { display: none !important; }
#payment-method .wc-block-components-radio-control::after,
#payment-method .wc-block-components-radio-control::before { display: none !important; }
#payment-method .wc-block-components-radio-control__input:focus { outline: none !important; }
#payment-method .wc-block-components-radio-control__input:focus-visible { outline: 2px solid var(--color-accent) !important; }
#payment-method .wc-block-components-radio-control__input:checked {
	border-color: var(--color-accent) !important;
	background: radial-gradient(circle, var(--color-accent) 0 5px, #fff 5.5px) !important;
}
@media (max-width: 480px) {
	#payment-method .wc-block-components-radio-control__option { padding: 14px 14px 14px 46px !important; gap: 10px; }
	#payment-method .wc-block-components-radio-control__input { left: 14px !important; }
	#payment-method .wc-block-components-radio-control-accordion-content { padding: 0 14px 14px 46px !important; }
	#payment-method .wc-block-components-payment-method-label { font-size: 14px; }
	.utsv-pay-amount strong { font-size: 17px; }
}

/* ---------- Cart / checkout: sticky total + button on phones ---------- */
.utsv-sticky-pay { display: none; }
@media (max-width: 749px) {
	.utsv-sticky-pay:not([hidden]) {
		display: flex;
		align-items: center;
		gap: 12px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 120;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
		background: #fff;
		border-top: 1px solid var(--color-border);
		box-shadow: 0 -6px 20px rgba(43, 24, 16, .08);
	}
	.utsv-sticky-pay__total { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
	.utsv-sticky-pay__total span { font-size: 12px; color: var(--color-text-muted); }
	.utsv-sticky-pay__total strong { font-size: 18px; font-variant-numeric: tabular-nums; }
	.utsv-sticky-pay__btn {
		flex: 1;
		height: 50px;
		border: 0;
		background: var(--color-accent);
		color: #fff;
		font: inherit;
		font-size: 14px;
		font-weight: 700;
		letter-spacing: .06em;
		text-transform: uppercase;
		cursor: pointer;
	}
	body.has-sticky-pay { padding-bottom: 80px; }
	body.has-sticky-pay .mobile-dock { display: none !important; }
}

/* ---------- Contact page ---------- */
body.page-id-2590 .content-block { max-width: 1100px !important; }
.utsv-contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; padding-top: 12px; }
.utsv-contact__chat { background: var(--color-accent); color: #fff; padding: 28px; }
.utsv-contact__chat-icon { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; }
.utsv-contact__chat h2 { color: #fff; font-size: 24px; margin: 16px 0 8px; }
.utsv-contact__chat p { color: rgba(255, 255, 255, .85); margin: 0 0 20px; font-size: 15px; line-height: 1.55; }
.utsv-contact__chat-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; background: #25d366; color: #0b3d20 !important; font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none !important; }
.utsv-contact__chat-btn:hover { background: #20bd5a; }
.utsv-contact__chat .utsv-contact__call { margin: 16px 0 0; font-size: 14px; }
.utsv-contact__call a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.utsv-contact__help-title { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin: 28px 0 10px; color: var(--color-text-muted); }
.utsv-contact__help { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.utsv-contact__help li { border-bottom: 1px solid var(--color-border); margin: 0; }
.utsv-contact__help a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 4px; min-height: 56px; color: var(--color-text); text-decoration: none; }
.utsv-contact__help a:hover strong { color: var(--color-accent); }
.utsv-contact__help span { display: flex; flex-direction: column; gap: 2px; }
.utsv-contact__help strong { font-size: 15px; font-weight: 600; }
.utsv-contact__help em { font-style: normal; font-size: 13px; color: var(--color-text-muted); }
.utsv-contact__help .icon { width: 16px; height: 16px; flex: none; color: var(--color-text-muted); }
.utsv-contact__form { background: #fff; border: 1px solid var(--color-border); padding: 28px 32px; }
.utsv-contact__form h2 { font-size: 24px; margin: 0 0 6px; }
.utsv-contact__form-intro { margin: 0 0 20px; color: var(--color-text-muted); font-size: 15px; }
.utsv-contact__form .utsv-wa-contact { max-width: none; margin: 0; }
.utsv-contact__form .utsv-wa-contact button { align-self: stretch; justify-content: center; }
@media (max-width: 860px) {
	.utsv-contact { grid-template-columns: 1fr; gap: 28px; }
	.utsv-contact__chat, .utsv-contact__form { padding: 22px 18px; }
}

/* ---------- Checkout on phones: less chrome, summary last, one Place order ----------
   WooCommerce shows the summary twice on small screens: a collapsible one at the
   top (sidebar) and a full copy after the fields. Keep only the one after the
   fields, so shoppers start typing straight away. The in-page Place order button is
   hidden too: the sticky bar's button presses it, so validation still applies. */
@media (max-width: 749px) {
	body.woocommerce-checkout .page-hero { padding: 10px 0 !important; margin-bottom: 0 !important; }
	body.woocommerce-checkout .page-hero h1 { font-size: 22px; }
	body.woocommerce-checkout .page-hero + .wrap { padding-top: 12px !important; }
	.wp-block-woocommerce-checkout { padding-top: 0 !important; }
	.wc-block-checkout__sidebar { display: none !important; }
	.wc-block-checkout__actions_row { display: none !important; }
	.wc-block-checkout__actions { padding: 8px 18px 4px !important; }
}

/* ---------- Thank-you page: "confirm on WhatsApp" note (inc/order-confirmation.php) ---------- */
.utsv-confirm-note { margin: 0 0 20px; padding: 14px 16px; background: #eef7f0; border: 1px solid #b7dcc2; border-left: 4px solid #1e7a3d; font-size: 14px; line-height: 1.5; color: #1c3b26; }

/* ---------- Brand name in the theme colour (header + mobile menu) ---------- */
.site-logo-text,
.site-logo-text:visited { color: var(--color-accent); }
.site-logo-text:hover { color: var(--color-accent); opacity: .85; }

/* ---------- Thank-you page: summary, addresses, additional information ---------- */
/* WooCommerce's list clearfix (::before) becomes a grid item and pushes the order number
   into the second column: drop it. */
.woocommerce-order-received ul.woocommerce-order-overview::before,
.woocommerce-order-received ul.woocommerce-order-overview::after { content: none !important; display: none !important; }
.woocommerce-order-received ul.woocommerce-order-overview {
	gap: 1px;
	padding: 0;
	overflow: hidden;
	background: var(--color-border);
}
.woocommerce-order-received ul.woocommerce-order-overview li {
	background: #fff;
	padding: 16px 20px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	list-style: none;
}
.woocommerce-order-received ul.woocommerce-order-overview li strong {
	margin-top: 6px;
	font-size: 16px;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	color: var(--color-text);
}

/* Billing + shipping: two equal cards. */
.woocommerce-order-received .woocommerce-customer-details { margin: 0 0 32px; }
.woocommerce-order-received .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
	width: 100%;
	float: none;
}
.woocommerce-order-received .woocommerce-columns--addresses::before,
.woocommerce-order-received .woocommerce-columns--addresses::after { content: none !important; display: none !important; }
.woocommerce-order-received .woocommerce-columns--addresses .woocommerce-column {
	float: none;
	width: auto;
	max-width: none;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 10px;
	padding: 18px 20px;
}
.woocommerce-order-received .woocommerce-customer-details h2.woocommerce-column__title {
	margin: 0 0 12px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--color-border);
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.woocommerce-order-received .woocommerce-customer-details .woocommerce-column address {
	flex: 1;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.65;
	overflow-wrap: anywhere;
}
.woocommerce-order-received .woocommerce-customer-details .woocommerce-customer-details--phone {
	margin: 14px 0 0;
	padding: 14px 0 0;
	border-top: 1px dashed var(--color-border);
	font-size: 15px;
	font-weight: 600;
}
.woocommerce-order-received .woocommerce-customer-details .woocommerce-customer-details--phone::before {
	content: 'Mobile / WhatsApp' !important;
	display: block;
	position: static;
	margin: 0 0 2px;
	font-family: inherit !important;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

/* Additional information: a tidy label / value card. */
.woocommerce-order-received .wc-block-order-confirmation-additional-fields-wrapper { margin: 0 0 32px; }
.woocommerce-order-received .wc-block-order-confirmation-additional-fields-wrapper > h2 { font-size: 20px; margin: 0 0 16px; }
.woocommerce-order-received .wc-block-components-additional-fields-list {
	display: grid;
	grid-template-columns: 1fr auto;
	margin: 0;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 10px;
	overflow: hidden;
}
.woocommerce-order-received .wc-block-components-additional-fields-list dt,
.woocommerce-order-received .wc-block-components-additional-fields-list dd {
	margin: 0;
	padding: 14px 20px;
	border-bottom: 1px solid var(--color-border);
	font-size: 14px;
	line-height: 1.4;
}
.woocommerce-order-received .wc-block-components-additional-fields-list dt { font-weight: 600; color: var(--color-text); }
.woocommerce-order-received .wc-block-components-additional-fields-list dd { text-align: right; font-weight: 600; color: var(--color-accent); }
.woocommerce-order-received .wc-block-components-additional-fields-list dt:nth-last-of-type(1),
.woocommerce-order-received .wc-block-components-additional-fields-list dd:nth-last-of-type(1) { border-bottom: 0; }
@media (max-width: 600px) {
	.woocommerce-order-received ul.woocommerce-order-overview li { padding: 14px 16px; }
	.woocommerce-order-received ul.woocommerce-order-overview li strong { font-size: 15px; }
	.woocommerce-order-received .woocommerce-columns--addresses { grid-template-columns: 1fr; }
}

/* ---------- My Account: dashboard, addresses ---------- */
.woocommerce-account .woocommerce-MyAccount-content { min-width: 0; }

.utsv-dash { display: flex; flex-direction: column; gap: 20px; }
.utsv-dash__hello h2 { margin: 0 0 6px; font-size: 28px; line-height: 1.2; }
.utsv-dash__hello p { margin: 0; color: var(--color-text-muted); font-size: 15px; line-height: 1.5; }
.utsv-dash__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.utsv-dash__stats > div { background: #fff; border: 1px solid var(--color-border); border-radius: 10px; padding: 16px 18px; }
.utsv-dash__stats strong { display: block; font-size: 30px; line-height: 1.1; color: var(--color-accent); }
.utsv-dash__stats span { display: block; margin-top: 4px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }

.utsv-dash__card { background: #fff; border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; }
.utsv-dash__card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--color-border); }
.utsv-dash__card h3 { margin: 0; font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.utsv-dash__card > header a { font-size: 13px; font-weight: 600; color: var(--color-accent); text-decoration: none; }
.utsv-dash__card > header a:hover { text-decoration: underline; }
.utsv-dash__body { padding: 16px 20px 20px; font-size: 15px; line-height: 1.6; }
.utsv-dash__body p { margin: 0 0 14px; }
.utsv-dash__body address { font-style: normal; }
.utsv-muted { color: var(--color-text-muted); }

.utsv-dash__orders { list-style: none; margin: 0; padding: 0; }
.utsv-dash__orders li { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid var(--color-border); }
.utsv-dash__orders li:last-child { border-bottom: 0; }
.utsv-dash__order-main { flex: 1 1 200px; min-width: 0; }
.utsv-dash__order-main strong { display: block; font-size: 16px; }
.utsv-dash__order-main span { font-size: 13px; color: var(--color-text-muted); }
.utsv-dash__view { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent); text-decoration: none; padding: 8px 14px; border: 1px solid var(--color-accent); }
.utsv-dash__view:hover { background: var(--color-accent); color: #fff; }
.utsv-dash__empty { padding: 26px 20px; text-align: center; }
.utsv-dash__empty p { margin: 0 0 14px; color: var(--color-text-muted); }
.utsv-dash__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.utsv-dash__wa { display: inline-flex; align-items: center; gap: 8px; }
.utsv-dash__perk { margin: 0; padding: 13px 16px; background: #fcf7f5; border-left: 4px solid var(--color-accent); font-size: 14px; }

.utsv-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; color: #50575e; background: #f0f0f1; }
.utsv-pill--processing, .utsv-pill--shipped { color: #1d4f91; background: #e5eefb; }
.utsv-pill--on-hold, .utsv-pill--pending { color: #8a5300; background: #fff3dc; }
.utsv-pill--completed { color: #1e6b34; background: #e6f4ea; }
.utsv-pill--cancelled, .utsv-pill--failed, .utsv-pill--refunded { color: #8a1f11; background: #fbeaea; }

.utsv-addr-phone { display: block; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px dashed var(--color-border); font-size: 15px; font-weight: 600; }
.utsv-addr-phone::before { content: 'Mobile / WhatsApp'; display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }

/* Addresses: two equal cards */
.woocommerce-account .u-columns.woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
	width: 100%;
	float: none;
	margin: 20px 0 0;
}
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after { content: none !important; display: none !important; }
.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
	float: none;
	width: auto;
	max-width: none;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 10px;
	padding: 18px 20px;
}
.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	float: none;
	width: auto;
	margin: 0 0 12px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--color-border);
}
.woocommerce-account .woocommerce-Address-title h2 {
	margin: 0;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.woocommerce-account .woocommerce-Address-title a.edit {
	float: none;
	padding: 6px 16px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--color-accent);
	text-decoration: none;
	border: 1px solid var(--color-accent);
}
.woocommerce-account .woocommerce-Address-title a.edit:hover { background: var(--color-accent); color: #fff; }
.woocommerce-account .woocommerce-Address address {
	flex: 1;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	font-style: normal;
	font-size: 15px;
	line-height: 1.65;
	overflow-wrap: anywhere;
}
@media (max-width: 600px) {
	.utsv-dash__hello h2 { font-size: 24px; }
	.utsv-dash__stats { gap: 8px; }
	.utsv-dash__stats > div { padding: 12px 12px; }
	.utsv-dash__stats strong { font-size: 24px; }
	.utsv-dash__stats span { font-size: 10px; letter-spacing: .05em; }
	.utsv-dash__grid { grid-template-columns: 1fr; }
	.utsv-dash__orders li { padding: 12px 16px; }
}

.utsv-dash .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	background: var(--color-accent);
	border: 0;
	border-radius: 0;
}
.utsv-dash .button:hover { opacity: .9; color: #fff; }
.woocommerce-account .woocommerce-Address-title h2 { padding: 0; text-align: left; flex: 1 1 auto; }

.woocommerce .utsv-dash a.button,
.woocommerce-account .utsv-dash a.utsv-dash__wa { background: var(--color-accent) !important; color: #fff !important; border: 0 !important; }
.woocommerce-account .woocommerce-Address-title h2 { white-space: nowrap; }
@media (max-width: 600px) {
	.utsv-dash__order-main { flex: 1 1 100%; }
	.utsv-dash__orders li .utsv-pill { margin-right: auto; }
	.woocommerce-account .woocommerce-Address-title a.edit { padding: 6px 14px; white-space: nowrap; }
}

/* ---------- Product page: details & reviews ---------- */
.reviews-description-grid { align-items: start; gap: 24px; }
.reviews-description-grid > * { min-width: 0; }
.reviews-description-grid__description,
.reviews-description-grid__reviews { border: 0 !important; padding: 0 !important; }

/* Left: each accordion item is its own card. */
.details-accordion { display: flex; flex-direction: column; gap: 14px; }
.details-accordion__item { background: #fff; border: 1px solid var(--color-border) !important; border-radius: 10px; overflow: hidden; }
.details-accordion__trigger { padding: 16px 20px; font-size: 13px; letter-spacing: .08em; }
.details-accordion__panel { padding: 0 20px 18px; font-size: 15px; line-height: 1.7; color: var(--color-text-muted); }
.details-accordion__panel p { margin: 0 0 12px; }
.details-accordion__panel p:last-child { margin-bottom: 0; }
.product-specs__table { width: 100%; border-collapse: collapse; }
.product-specs__table th,
.product-specs__table td { padding: 11px 14px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--color-border); }
.product-specs__table tr:last-child th,
.product-specs__table tr:last-child td { border-bottom: 0; }
.product-specs__table th { width: 38%; font-weight: 600; color: var(--color-text); background: #fcf7f5; }

/* Right: one review card. */
.reviews-description-grid__reviews .woocommerce-Reviews { background: #fff; border: 1px solid var(--color-border); border-radius: 10px; padding: 24px; }
.woocommerce-Reviews .woocommerce-Reviews-title { margin: 0 0 14px; font-size: 24px; line-height: 1.2; }
.woocommerce-Reviews .woocommerce-noreviews {
	margin: 0 0 22px;
	padding: 14px 16px;
	background: #fcf7f5;
	border-left: 4px solid var(--color-accent);
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-text-muted);
}
.woocommerce-Reviews #reply-title {
	display: block;
	margin: 0 0 16px;
	padding-top: 20px;
	border-top: 1px solid var(--color-border);
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.woocommerce-Reviews .comment-form { display: flex; flex-direction: column; gap: 16px; }
.woocommerce-Reviews .comment-form > p { margin: 0; }
.woocommerce-Reviews .comment-form label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text); }
.woocommerce-Reviews .comment-form-rating p.stars { margin: 0; }
.woocommerce-Reviews .comment-form textarea {
	width: 100%;
	min-height: 130px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 0;
	font: inherit;
	font-size: 15px;
	line-height: 1.5;
	resize: vertical;
}
.woocommerce-Reviews .comment-form textarea:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: var(--color-accent); }
.woocommerce-Reviews .comment-form-photo input[type="file"] { width: 100%; font-size: 14px; color: var(--color-text-muted); }
.woocommerce-Reviews .comment-form-photo input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 10px 16px;
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--color-accent);
	background: #fff;
	border: 1px solid var(--color-accent);
	cursor: pointer;
}
.woocommerce-Reviews .comment-form-photo input[type="file"]::file-selector-button:hover { background: var(--color-accent); color: #fff; }
.woocommerce-Reviews .form-submit { margin-top: 4px; }
.woocommerce-Reviews .form-submit input[type="submit"] { width: 100%; padding: 15px 24px; }
@media (max-width: 900px) {
	.reviews-description-grid__reviews .woocommerce-Reviews { padding: 18px; }
}

.woocommerce-Reviews #respond #reply-title { font-family: inherit !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--color-text-muted) !important; }
.woocommerce-Reviews .comment-form textarea,
.woocommerce-Reviews .comment-form input[type="text"] { background: #fff !important; border: 1px solid var(--color-border) !important; border-radius: 0 !important; box-shadow: none !important; }
.woocommerce-Reviews .comment-form input[type="text"] { width: 100%; padding: 12px 14px; font-size: 15px; }

/* ---------- Product tags (Best Seller / High Demand / New Arrival) ---------- */
.product-tag {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff;
	background: var(--color-accent);
	box-shadow: 0 2px 6px rgba(20, 10, 8, .18);
}
.product-tag .icon { width: 12px; height: 12px; }
.product-tag--demand { background: #b4530a; }
.product-tag--trending { background: #7a3b8f; }
.product-tag--new { background: #1e6b34; }
.product-tag--limited { background: #2b2b2b; }
/* When a card has both a tag and the Sale badge, the Sale badge moves below. */
.product-tag + .product-card__badge { top: 42px; }
.pill--bestseller .icon { vertical-align: -2px; }

/* ---------- Home hero: sized for the new full-resolution slides ---------- */
@media (min-width: 750px) {
	.hero { height: min(50vw, 82vh); min-height: 420px; }
}

/* ---------- Home hero: per-slide captions ---------- */
.hero__captions { display: grid; }
.hero__caption { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s; }
.hero__caption.is-active { opacity: 1; visibility: visible; }
.hero__content .hero__title {
	margin: 0 0 14px;
	font-family: 'Fraunces', serif;
	font-style: italic;
	font-weight: 600;
	font-size: clamp(30px, 5vw, 56px);
	line-height: 1.1;
	text-shadow: 0 2px 18px rgba(20, 10, 8, .45);
}
.hero__content .eyebrow, .hero__content .hero__sub { text-shadow: 0 1px 12px rgba(20, 10, 8, .55); }
.hero__content .hero__sub { max-width: 34em; line-height: 1.5; }
@media (max-width: 749px) {
	.hero__content .hero__title { font-size: 32px; }
	.hero__content .hero__sub { font-size: 13px; margin-bottom: 16px; }
}

@media (min-width: 750px) {
	.hero__content { max-width: 820px; }
	.hero__content .hero__sub { max-width: none; }
}
@media (max-width: 749px) {
	/* A soft dark fade under the caption so it reads over any part of the picture. */
	.hero__slide::after { background: linear-gradient(0deg, rgba(20, 10, 8, .82) 0%, rgba(20, 10, 8, .5) 30%, rgba(20, 10, 8, .12) 55%, rgba(20, 10, 8, 0) 70%); }
}