/**
 * Layali checkout / cart / thank-you restyling.
 *
 * Scoped to body.woocommerce-checkout, body.woocommerce-cart,
 * body.woocommerce-order-received so it never touches the rest of the site.
 *
 * Covers both WC Blocks markup (the recommended setup — wc-block-*) AND
 * classic shortcode markup (.woocommerce-checkout-review-order, .woocommerce-
 * cart-form, .woocommerce-order). The Blocks selectors match WC ≥ 8.x.
 *
 * Design notes:
 *   - Minimal centered logo header (above) on white
 *   - Two-column body: form left (white), summary right (soft lavender)
 *   - Pill inputs with plum focus ring
 *   - Plum "Place order" pill button
 *   - Typography inherits theme tokens
 */

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

.ly-checkout-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 32px;
	background: #ffffff;
	border-bottom: 1px solid var(--ly-color-border, #ece6e0);
	z-index: 10;
}

.ly-checkout-header__home,
.ly-checkout-header .custom-logo-link {
	display: inline-flex !important;
	align-items: center !important;
	color: var(--ly-color-primary, #53225e);
	text-decoration: none !important;
	max-width: 240px !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
}

/* WP outputs `<img class="custom-logo" width="X" height="Y">` at the upload
   dimensions. Clamp aggressively so a 2000×600 logo file collapses to a
   sensible header height regardless. */
.ly-checkout-header img,
.ly-checkout-header .custom-logo,
.ly-checkout-header .custom-logo-link img {
	display: block !important;
	height: 40px !important;
	max-height: 40px !important;
	width: auto !important;
	max-width: 240px !important;
	object-fit: contain !important;
	margin: 0 !important;
}

.ly-checkout-header__site-name {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ly-color-primary, #53225e);
}

.ly-checkout-header__cart {
	position: absolute;
	right: 32px;
	top: 50%;
	transform: translateY( -50% );
	display: inline-flex;
	align-items: center;
	color: var(--ly-color-primary, #53225e);
	text-decoration: none;
	transition: opacity 150ms ease;
}

.ly-checkout-header__cart:hover {
	opacity: 0.75;
}

@media ( max-width: 600px ) {
	.ly-checkout-header {
		padding: 18px 20px;
	}
	.ly-checkout-header__cart {
		right: 20px;
	}
}

/* =============================================================================
   Page background — soft sand so the white form column reads as a card
   ========================================================================== */

body.woocommerce-checkout,
body.woocommerce-cart,
body.woocommerce-order-received {
	background: #faf6f1;
	/* Horizontal overflow protection lives at the ROOT (style.css:
	   html { overflow-x: clip }) — the single site-wide safety net. The
	   former body-level duplicate was removed after the real overflow
	   cause (alignwide on the checkout/cart blocks) was fixed in the page
	   content itself. */
}

/* =============================================================================
   Width-chain fix (verified via headless Chrome at 430px)
   --------------------------------------------------------------------------
   Hello Elementor sizes .site-main / .page-content / the block at
   `width: 100%` CONTENT-box — each level then overflows the viewport by
   its own horizontal padding (430 → 450 → 468px scrollWidth), causing
   horizontal panning on phones. NOT an alignwide issue (removing the
   block alignment alone was tested and did not fix it): the cure is
   width:auto + border-box down the chain. Do not remove without re-running
   the 430px headless scrollWidth check.
   ============================================================================= */

body.woocommerce-checkout main.site-main,
body.woocommerce-cart main.site-main,
body.woocommerce-order-received main.site-main,
body.woocommerce-checkout .page-header,
body.woocommerce-checkout .page-content,
body.woocommerce-cart .page-header,
body.woocommerce-cart .page-content {
	width: auto !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* min() preserves the 1280px desktop cap set further down. */
body.woocommerce-checkout .wp-block-woocommerce-checkout,
body.woocommerce-cart .wp-block-woocommerce-cart {
	width: auto !important;
	max-width: min( 1280px, 100% ) !important;
	box-sizing: border-box !important;
}

/* =============================================================================
   Layout — WC Blocks two-column
   ========================================================================== */

body.woocommerce-checkout .wp-block-woocommerce-checkout,
body.woocommerce-cart .wp-block-woocommerce-cart {
	max-width: 1280px;
	margin: 0 auto;
	padding: 48px 32px;
}

/* Visible gap between the white form card and the lavender summary card.
   WC Blocks uses a flex layout with `.wc-block-components-main { width:65% }`
   and `.wc-block-components-sidebar { width:35% }` — they sum to exactly
   100%, so any margin added to either pushes the second column below the
   first. Solution: transparent border on the form card's right side.
   With box-sizing:border-box (WC default), the border counts inside the
   65% width — no wrap — and background-clip:padding-box clips the white
   bg to the padding edge so the border area shows the cream page bg
   underneath instead of extending the white. */
/* 720px, not 769px — WC's container query keeps TWO columns down to
   ~728px viewport (700px container + page padding), so a 769px media query
   left a band where the columns touched with no gap. */
@media ( min-width: 720px ) {
	body.woocommerce-checkout .wc-block-checkout__main,
	body.woocommerce-cart .wc-block-cart__main {
		border-right: 32px solid transparent !important;
		background-clip: padding-box !important;
	}
}

body.woocommerce-checkout .wc-block-checkout__main,
body.woocommerce-cart .wc-block-cart__main {
	background: #ffffff;
	border-radius: 16px;
	padding: 40px;
}

body.woocommerce-checkout .wc-block-checkout__sidebar,
body.woocommerce-cart .wc-block-cart__sidebar {
	background: #f4eef5;
	border-radius: 16px;
	padding: 32px;
}

/* Sticky summary on desktop */
@media ( min-width: 1024px ) {
	body.woocommerce-checkout .wc-block-checkout__sidebar,
	body.woocommerce-cart .wc-block-cart__sidebar {
		position: sticky;
		top: 32px;
		align-self: start;
	}
}

@media ( max-width: 768px ) {
	body.woocommerce-checkout .wp-block-woocommerce-checkout,
	body.woocommerce-cart .wp-block-woocommerce-cart {
		padding: 20px 8px;
	}
	body.woocommerce-checkout .wc-block-checkout__main,
	body.woocommerce-cart .wc-block-cart__main,
	body.woocommerce-checkout .wc-block-checkout__sidebar,
	body.woocommerce-cart .wc-block-cart__sidebar {
		padding: 18px;
		border-radius: 14px;
	}
	/* The order summary card was only ~88% wide on phones (wrapper + card
	   padding). Fill the row so the collapsible summary at the top spans the
	   width like the rest of the checkout. */
	body.woocommerce-checkout .wc-block-checkout__sidebar,
	body.woocommerce-cart .wc-block-cart__sidebar {
		width: 100% !important;
		max-width: 100% !important;
	}
	/* Keep a gap so the two stacked cards don't touch — but the stacking order
	   differs by page. Checkout: the summary sits ABOVE the form, so the gap
	   goes below it. Cart: the totals sit BELOW the items, so the gap goes
	   above it. */
	body.woocommerce-checkout .wc-block-checkout__sidebar {
		margin: 0 0 16px !important;
	}
	body.woocommerce-cart .wc-block-cart__sidebar {
		margin: 16px 0 0 !important;
	}
	/* When collapsed, the summary header is just a tap bar
	   ("Order summary | total | ⌄"). Its default 20px padding + 16px top margin
	   (plus the card's own padding) left the label floating with a lot of dead
	   space and an asymmetric gap above it. Tighten it to a compact, symmetric
	   bar on mobile. */
	body.woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title,
	body.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-checkout-order-summary__title {
		margin: 0 !important;
		padding: 6px 0 !important;
	}
	/* Remove the DUPLICATE order summary WooCommerce renders into the main
	   column on mobile (a slot fill). The collapsible summary in the sidebar at
	   the top of the page is the one we keep. */
	body.woocommerce-checkout .wc-block-checkout__main .checkout-order-summary-block-fill-wrapper {
		display: none !important;
	}
}

/* =============================================================================
   Page-level "Checkout" / "Cart" heading (auto-rendered above the block)
   ========================================================================== */

/* Wide net — Hello Elementor + variants render the page title in several
   different containers depending on configuration. Hit them all. */
body.woocommerce-checkout h1.entry-title,
body.woocommerce-checkout .entry-title,
body.woocommerce-checkout .page-header h1,
body.woocommerce-checkout .page-title,
body.woocommerce-checkout .wp-block-post-title,
body.woocommerce-checkout main > article > header h1,
body.woocommerce-checkout main > article > h1,
body.woocommerce-cart h1.entry-title,
body.woocommerce-cart .entry-title,
body.woocommerce-cart .page-header h1,
body.woocommerce-cart .page-title,
body.woocommerce-cart .wp-block-post-title,
body.woocommerce-cart main > article > header h1,
body.woocommerce-cart main > article > h1 {
	color: var(--ly-color-primary, #53225e);
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0;
	padding: 0;
}

/* The title's container — same max-width and padding as the block grid so
   "Checkout" / "Cart" lines up with the form-column left edge. */
body.woocommerce-checkout .page-header,
body.woocommerce-checkout main > article > header,
body.woocommerce-cart .page-header,
body.woocommerce-cart main > article > header {
	max-width: 1280px;
	margin: 48px auto 0;
	padding: 0 32px;
}

@media ( max-width: 600px ) {
	body.woocommerce-checkout .page-header,
	body.woocommerce-checkout main > article > header,
	body.woocommerce-cart .page-header,
	body.woocommerce-cart main > article > header {
		margin-top: 20px;
		padding: 0 14px;
	}
	body.woocommerce-checkout h1.entry-title,
	body.woocommerce-checkout .entry-title,
	body.woocommerce-checkout .page-title,
	body.woocommerce-cart h1.entry-title,
	body.woocommerce-cart .entry-title,
	body.woocommerce-cart .page-title {
		font-size: 1.55rem;
	}
}

/* =============================================================================
   Section headings
   ========================================================================== */

body.woocommerce-checkout .wc-block-components-title,
body.woocommerce-checkout .wc-block-components-checkout-step__title,
body.woocommerce-cart .wc-block-components-title,
body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block h2 {
	color: var(--ly-color-primary, #53225e);
	font-weight: 700;
	font-size: 1.2rem;
	letter-spacing: -0.005em;
}

body.woocommerce-checkout .wc-block-components-checkout-step__description {
	color: var(--ly-color-text-muted, #4a4a52);
}

/* =============================================================================
   Inputs
   ========================================================================== */

/* Blocks inputs: only style the chrome (border/radius/color). DO NOT touch
   padding — WC Blocks uses asymmetric padding (more top, less bottom) so its
   floating label has room to float without overlapping the typed value. */
body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-checkout .wc-block-components-select select,
body.woocommerce-checkout .wc-block-components-combobox input {
	border-radius: 12px !important;
	border: 1.5px solid var(--ly-color-border, #ece6e0) !important;
	background: #ffffff !important;
	box-shadow: none !important;
	transition: border-color 150ms ease;
}

/* Classic-checkout inputs (single shop input markup) — safe to set padding
   because there's no floating-label dance happening. */
body.woocommerce-cart input[type="text"],
body.woocommerce-cart input[type="email"],
body.woocommerce-cart input[type="number"],
body.woocommerce-cart select,
body.woocommerce-checkout .form-row input[type="text"],
body.woocommerce-checkout .form-row input[type="email"],
body.woocommerce-checkout .form-row input[type="tel"] {
	border-radius: 12px !important;
	border: 1.5px solid var(--ly-color-border, #ece6e0) !important;
	padding: 16px !important;
	font-size: 1rem !important;
	background: #ffffff !important;
	box-shadow: none !important;
}

body.woocommerce-checkout .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-block-components-select select:focus,
body.woocommerce-checkout .wc-block-components-text-input.is-active input,
body.woocommerce-cart input:focus,
body.woocommerce-checkout input:focus {
	border-color: var(--ly-color-primary, #53225e) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba( 83, 34, 94, 0.12 ) !important;
}

/* Error state — our !important border/shadow overrides above killed WC's
   `.has-error` red border, leaving invalid fields visually identical to
   valid ones (only the small text below signalled the problem). Re-add at
   higher specificity, AFTER the focus rules so an errored+focused field
   stays red. */
body.woocommerce-checkout .wc-block-components-text-input.has-error input,
body.woocommerce-checkout .wc-block-components-select.has-error select,
body.woocommerce-checkout .wc-block-components-combobox.has-error input {
	border-color: #cc1818 !important;
}

body.woocommerce-checkout .wc-block-components-text-input.has-error input:focus,
body.woocommerce-checkout .wc-block-components-select.has-error select:focus {
	border-color: #cc1818 !important;
	box-shadow: 0 0 0 3px rgba( 204, 24, 24, 0.15 ) !important;
}

body.woocommerce-checkout .wc-block-components-text-input label,
body.woocommerce-checkout .wc-block-components-select label,
body.woocommerce-checkout .wc-block-components-combobox label {
	color: var(--ly-color-text-muted, #4a4a52);
}

/* Inline action links — "+ Add apartment, suite, etc.", "Sign in", etc. */
body.woocommerce-checkout .wc-block-components-address-form a,
body.woocommerce-checkout .wc-block-checkout__contact-fields a,
body.woocommerce-checkout .wc-block-components-button.link,
body.woocommerce-checkout button.wc-block-components-button.link {
	color: var(--ly-color-primary, #53225e) !important;
	text-decoration: underline !important;
	font-weight: 500;
}

/* =============================================================================
   Buttons
   ========================================================================== */

body.woocommerce-checkout .wc-block-components-checkout-place-order-button,
body.woocommerce-cart .wc-block-cart__submit-button,
body.woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button,
body.woocommerce-checkout button.wc-block-components-button.contained,
body.woocommerce-cart button.wc-block-components-button.contained {
	background: var(--ly-color-primary, #53225e) !important;
	background-color: var(--ly-color-primary, #53225e) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 18px 32px !important;
	font-size: 1.05rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	box-shadow: none !important;
	transition: background-color 150ms ease, transform 150ms ease !important;
}

body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
body.woocommerce-cart .wc-block-cart__submit-button:hover,
body.woocommerce-checkout button.wc-block-components-button.contained:hover,
body.woocommerce-cart button.wc-block-components-button.contained:hover {
	background: var(--ly-color-primary-dark, #3d1846) !important;
	background-color: var(--ly-color-primary-dark, #3d1846) !important;
	transform: translateY( -1px );
}

/* Secondary buttons (outlined plum) */
body.woocommerce-checkout button.wc-block-components-button.outlined,
body.woocommerce-cart button.wc-block-components-button.outlined {
	border: 1.5px solid var(--ly-color-primary, #53225e) !important;
	color: var(--ly-color-primary, #53225e) !important;
	background: transparent !important;
	border-radius: 999px !important;
	padding: 12px 22px !important;
}

/* Coupon "Apply" — WC tags this button `.contained`, so it inherited the big
   place-order styling (18×32 padding, full pill, 1.05rem) and dwarfed the slim
   "Enter code" field next to it. Scale it down to pair with the field: same
   50px height, top-aligned with the field box (which sits at the top of its
   60px wrapper — the extra 10px is WC's error-message reserve), matching 12px
   radius, tighter padding. Same specificity as the `.contained` rule and it
   comes later in the file, so it wins. Stays filled plum. */
body.woocommerce-cart button.wc-block-components-button.wc-block-components-totals-coupon__button,
body.woocommerce-checkout button.wc-block-components-button.wc-block-components-totals-coupon__button {
	flex: 0 0 auto;
	align-self: flex-start;
	height: 50px;
	min-height: 0 !important;
	padding: 0 22px !important;
	font-size: 0.95rem !important;
	border-radius: 12px !important;
	white-space: nowrap;
}

/* =============================================================================
   Order summary / totals
   ========================================================================== */

/* Tighter row spacing — was 10px top+bottom which compounded across rows. */
body.woocommerce-checkout .wc-block-components-totals-item,
body.woocommerce-cart .wc-block-components-totals-item {
	color: var(--ly-color-text, #1f1f23);
	padding: 6px 0;
	font-size: 0.95rem;
}

/* Subtle Total divider — softer than a 1px solid border. */
body.woocommerce-checkout .wc-block-components-totals-footer-item,
body.woocommerce-cart .wc-block-components-totals-footer-item {
	border-top: 1px solid rgba( 83, 34, 94, 0.12 );
	padding: 18px 0 4px;
	margin-top: 14px;
}

/* Total: smaller than before so the AED suffix doesn't overflow the card.
   The bidi mix of LTR digits + RTL currency stretches wide; 1.1rem fits. */
body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-formatted-money-amount,
body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--ly-color-primary, #53225e);
	font-weight: 700;
	font-size: 1.1rem;
	white-space: nowrap;
}

body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	color: var(--ly-color-primary, #53225e);
	font-weight: 700;
	font-size: 1.1rem;
}

/* HIDE only the long product short-description and individual unit prices —
   NOT the whole `__description` wrapper (that's the right-side column
   containing the product NAME, which we want visible). Previous broader
   selector hid the name and left rows looking like "image | price" with
   nothing in between. */
body.woocommerce-checkout .wc-block-components-product-metadata,
body.woocommerce-checkout .wc-block-components-product-metadata__description,
body.woocommerce-checkout .wc-block-components-product-details,
body.woocommerce-checkout .wc-block-components-order-summary-item__individual-prices {
	display: none !important;
}

/* Item row layout: image (left) | name (flex 1) | total price (right).
   CHECKOUT SUMMARY ONLY — the cart page's row class is
   `.wc-block-cart-items__row` (plural) and has more children (qty stepper,
   remove link), so this 3-column grid was never correct for it; the cart
   keeps WC's native table layout. */
body.woocommerce-checkout .wc-block-components-order-summary-item {
	display: grid !important;
	grid-template-columns: 64px minmax( 0, 1fr ) auto;
	gap: 14px;
	align-items: center;
	border: none;
	padding: 14px 0;
}

/* Image — larger, rounded. WC ships `margin-top: 8px; padding-bottom: 16px`
   on this wrapper which distorts the box geometry the badge positions
   against — reset both. NOT overflow:hidden so the badge can straddle the
   corner. */
body.woocommerce-checkout .wc-block-components-order-summary-item__image {
	position: relative;
	width: 64px !important;
	height: 64px;
	margin: 0 !important;
	padding: 0 !important;
}

body.woocommerce-checkout .wc-block-components-order-summary-item__image > img {
	max-width: 64px !important;
	width: 64px !important;
}

body.woocommerce-checkout .wc-block-components-order-summary-item__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 10px;
	padding: 5px;
	box-sizing: border-box;
	background: #ffffff;
	box-shadow: inset 0 0 0 1px rgba( 83, 34, 94, 0.08 );
}

/* Quantity badge — fixed 22px circle straddling the thumb's top-right
   corner. CRITICAL: WC positions the badge with `top:0; right:0;
   transform: translate(50%,-50%)` — earlier override set top/right
   negative WITHOUT resetting the transform, so the two stacked and the
   badge floated far above the image. Keep WC's top/right 0 and tame the
   translate to a gentle corner-straddle instead. */
body.woocommerce-checkout .wc-block-components-order-summary-item__quantity {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	transform: translate( 35%, -35% ) !important;
	width: 22px !important;
	height: 22px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 999px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: var( --ly-color-primary, #53225e ) !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	box-shadow: 0 0 0 2px #f4eef5 !important;
	z-index: 1;
}

/* WC colors the number via an inner <span> reading a preset variable —
   force it white to match our plum badge. */
body.woocommerce-checkout .wc-block-components-order-summary-item__quantity span {
	color: #ffffff !important;
	padding: 0 !important;
}

/* Product name — readable, bold, plum on hover. */
body.woocommerce-checkout .wc-block-components-product-name,
body.woocommerce-cart .wc-block-components-product-name {
	display: block;
	color: var( --ly-color-text, #1f1f23 );
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	line-height: 1.35;
}

body.woocommerce-checkout .wc-block-components-product-name:hover,
body.woocommerce-cart .wc-block-components-product-name:hover {
	color: var( --ly-color-primary, #53225e );
}

/* Per-item total price — plum, bold, right-aligned. */
body.woocommerce-checkout .wc-block-components-product-price,
body.woocommerce-checkout .wc-block-components-order-summary-item__total-price {
	color: var( --ly-color-primary, #53225e );
	font-weight: 700;
	font-size: 0.95rem;
	white-space: nowrap;
	text-align: end;
}

/* Trim the summary card's own internal padding — it's a card inside a card.
   Keep enough breathing room but lose the 32px×2 the default ships with. */
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block,
body.woocommerce-checkout .wc-block-components-checkout-order-summary {
	padding: 0;
}

/* Blanket reset — WC Blocks ships dividers on multiple inner wrappers
   (totals-coupon, totals-wrapper, panel, order-summary, etc). The only
   divider we want inside the summary is the one above Total. Kill them
   all here, then re-add the Total divider in the footer-item rule above. */
/* ALL sides — WC's inner order-summary wrapper carries a full 1px border,
   so killing only top/bottom left vertical lines running down the panel's
   left and right edges. Inputs inside the coupon panel keep their borders
   via the higher-specificity input rules earlier in this file. */
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block *,
body.woocommerce-checkout .wc-block-components-checkout-order-summary,
body.woocommerce-checkout .wc-block-components-checkout-order-summary *,
body.woocommerce-checkout .wc-block-components-totals-wrapper,
body.woocommerce-checkout .wc-block-components-totals-wrapper *,
body.woocommerce-checkout .wc-block-components-totals-coupon,
body.woocommerce-checkout .wc-block-components-panel,
body.woocommerce-checkout .wc-block-components-panel__button,
/* Cart sidebar ships the same redundant dividers (border-top/bottom on the
   order-summary, coupon-form and totals sub-blocks). Same blanket reset; the
   Total divider is re-added below and the coupon input keeps its border via
   the higher-specificity input rule. */
body.woocommerce-cart .wp-block-woocommerce-cart-totals-block *,
body.woocommerce-cart .wc-block-components-totals-coupon,
body.woocommerce-cart .wc-block-components-panel,
body.woocommerce-cart .wc-block-components-panel__button {
	border: none !important;
}

/* Coupon row — tighter, no borders (handled by blanket reset above). */
body.woocommerce-checkout .wc-block-components-totals-coupon,
body.woocommerce-checkout .wc-block-components-panel__button {
	padding: 10px 0 !important;
	font-size: 0.95rem;
	color: var(--ly-color-text, #1f1f23);
}

/* Re-establish the Total divider (the blanket reset above zapped it too).
   Higher specificity to win against the reset. */
body.woocommerce-checkout .wc-block-components-totals-footer-item,
body.woocommerce-cart .wc-block-components-totals-footer-item {
	border-top: 1px solid rgba( 83, 34, 94, 0.14 ) !important;
}

/* =============================================================================
   Cart line items — quantity stepper + remove control
   ========================================================================== */

/* WC's quantity control is a 3-cell box. Our generic cart `input[type=number]`
   rule (border + radius:12px + 16px padding) was ALSO hitting the inner number
   field, drawing a rounded box-within-a-box and bloating the height so the +
   button spilled outside the control. Reset the field (the container-scoped
   selector outranks that generic rule) and present the whole thing as one
   clean plum-bordered pill: [ − | n | + ]. `order` fixes the visual order
   regardless of WC's DOM order (input, minus, plus). */
body.woocommerce-cart .wc-block-cart-item__quantity {
	display: flex;
	align-items: center;
	gap: 10px;
}

body.woocommerce-cart .wc-block-components-quantity-selector {
	display: flex !important;
	align-items: stretch;
	width: 118px !important;
	max-width: 118px !important;
	min-height: 46px;
	border: 1.5px solid var(--ly-color-border, #ece6e0) !important;
	border-radius: 999px !important;
	overflow: hidden !important;
	background: #ffffff !important;
	box-shadow: none !important;
}

body.woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
	order: 2;
	flex: 1 1 auto;
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	text-align: center;
	color: var(--ly-color-text, #1f1f23) !important;
	font-size: 1rem !important;
	font-weight: 600;
	-moz-appearance: textfield;
}

body.woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input:focus {
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
}

/* Strip the native number spinners (they'd fight the − / + buttons). */
body.woocommerce-cart .wc-block-components-quantity-selector__input::-webkit-outer-spin-button,
body.woocommerce-cart .wc-block-components-quantity-selector__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

body.woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	flex: 0 0 38px;
	width: 38px;
	padding: 0 !important;
	border: none !important;
	background: transparent;
	color: var(--ly-color-primary, #53225e) !important;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 150ms ease;
}

body.woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover {
	background: rgba( 83, 34, 94, 0.08 );
}

body.woocommerce-cart .wc-block-components-quantity-selector__button--minus {
	order: 1;
}

body.woocommerce-cart .wc-block-components-quantity-selector__button--plus {
	order: 3;
}

/* Remove ("trash") control — muted, warms to coral on hover. */
body.woocommerce-cart .wc-block-cart-item__remove-link {
	color: var(--ly-color-text-muted, #4a4a52) !important;
	transition: color 150ms ease;
}

body.woocommerce-cart .wc-block-cart-item__remove-link:hover {
	color: var(--ly-color-secondary, #ff7477) !important;
}

/* =============================================================================
   Oman field layout — hide country, side-by-side phone fields, +968 chip
   ========================================================================== */

/* Country/Region — store sells to Oman only, the value is fixed; the select
   is pure noise. Hidden, not removed: the form still submits AE. */
body.woocommerce-checkout .wc-block-components-address-form__country {
	display: none !important;
}

/* Page H1 ("Checkout" / "Cart") removed — the minimal logo header + the
   form/items already say where you are. Thank-you shares the checkout page. */
body.woocommerce-checkout .page-header,
body.woocommerce-checkout h1.entry-title,
body.woocommerce-cart .page-header,
body.woocommerce-cart h1.entry-title {
	display: none;
}

/* WhatsApp + Calls numbers side by side. Their wrappers are generic
   text-input divs — match via the input id WC generates from the field id
   (contains the registered slug). Inline-block at 50% keeps the parent's
   layout untouched. */
body.woocommerce-checkout .wc-block-components-text-input:has( input[id*="whatsapp-number"] ),
body.woocommerce-checkout .wc-block-components-text-input:has( input[id*="calls-number"] ) {
	display: inline-block;
	width: calc( 50% - 8px );
	box-sizing: border-box;
	vertical-align: top;
}

body.woocommerce-checkout .wc-block-components-text-input:has( input[id*="whatsapp-number"] ) {
	margin-right: 12px;
}

/* WC Blocks floats the LABEL inside an empty field (it acts as the
   placeholder until focus). Our registered placeholder ("5X XXX XXXX")
   must stay invisible until the label has floated up (.is-active = focused
   or filled) — both at once render as overlapping garbage. */
body.woocommerce-checkout .wc-block-components-text-input:not( .is-active ) input[id*="whatsapp-number"]::placeholder,
body.woocommerce-checkout .wc-block-components-text-input:not( .is-active ) input[id*="calls-number"]::placeholder {
	color: transparent;
	opacity: 0;
}

/* Stack the phone fields below 860px viewport — at 50% width each field
   loses ~100px to the chip's padding, so side-by-side only works when the
   main column is wide. 600px was too late: between 600–860px the visible
   typing area shrank to ~70–120px. */
@media ( max-width: 860px ) {
	body.woocommerce-checkout .wc-block-components-text-input:has( input[id*="whatsapp-number"] ),
	body.woocommerce-checkout .wc-block-components-text-input:has( input[id*="calls-number"] ) {
		display: block;
		width: 100%;
		margin-right: 0;
	}
}

/* Interactive country-code chip (rendered by checkout-phone.js as a
   sibling button inside the field wrapper — React never touches it).
   Chip sits on the LEFT of the field; the input's value and WC's floating
   label are both shifted right (padding-left / label left) to clear it, so
   they never overlap in either the empty (inline-label) or filled (floated)
   state. WC's label is position:absolute;left:10px and floats via translateY
   with a top-left origin, so overriding its `left` keeps the float intact.
   `:has( .ly-dial-chip )` instead of a JS-added wrapper class: React wipes
   manually added wrapper classes on re-render, but the chip NODE survives
   (it's our sibling element) — the chip itself is the marker. :has() is
   already a hard dependency of this stylesheet (phone-field layout above). */
.wc-block-components-text-input:has( .ly-dial-chip ) {
	position: relative;
}

.wc-block-components-text-input:has( .ly-dial-chip ) input {
	padding-left: 96px !important;
	padding-right: 12px !important;
}

.wc-block-components-text-input:has( .ly-dial-chip ) label {
	left: 96px !important;
}

.ly-dial-chip {
	position: absolute;
	left: 10px;
	right: auto;
	top: 50%;
	transform: translateY( -50% );
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 8px;
	border: none;
	border-radius: 8px;
	background: rgba( 83, 34, 94, 0.07 );
	color: var( --ly-color-primary, #53225e );
	font-size: 0.85rem;
	font-weight: 600;
	font-family: inherit;
	line-height: 1;
	cursor: pointer;
	transition: background-color 150ms ease;
}

.ly-dial-chip:hover,
.ly-dial-chip[aria-expanded="true"] {
	background: rgba( 83, 34, 94, 0.14 );
}

.ly-dial-chip__flag {
	font-size: 1rem;
	line-height: 1;
}

/* Dropdown panel — appended to <body>, positioned under the chip. */
.ly-dial-panel {
	position: absolute;
	z-index: 99999;
	width: 300px;
	/* 70vh cap keeps the panel on-screen on short landscape phones. */
	max-height: min( 320px, 70vh );
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid var( --ly-color-border, #ece6e0 );
	border-radius: 12px;
	box-shadow: 0 8px 28px rgba( 0, 0, 0, 0.14 );
	overflow: hidden;
}

.ly-dial-panel__search {
	margin: 10px;
	padding: 10px 12px !important;
	border: 1.5px solid var( --ly-color-border, #ece6e0 ) !important;
	border-radius: 8px !important;
	/* 16px minimum — anything smaller makes iOS Safari auto-zoom the page
	   when the search field is focused, jolting the whole checkout. */
	font-size: 16px !important;
	font-family: inherit;
	outline: none;
}

.ly-dial-panel__search:focus {
	border-color: var( --ly-color-primary, #53225e ) !important;
}

.ly-dial-panel__list {
	/* min-height: 0 lets this flex child shrink below its content height —
	   without it the list silently overflows the max-height panel (clipped
	   by overflow:hidden) and never becomes scrollable. The explicit
	   max-height is a fallback so the list still scrolls even if the panel
	   isn't in flex mode (e.g. an inline display override). */
	flex: 1 1 auto;
	min-height: 0;
	max-height: 252px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 6px 8px;
}

.ly-dial-panel__item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 9px 10px;
	border: none;
	border-radius: 8px;
	background: transparent;
	font-family: inherit;
	font-size: 0.9rem;
	color: var( --ly-color-text, #1f1f23 );
	text-align: left;
	cursor: pointer;
}

.ly-dial-panel__item:hover,
.ly-dial-panel__item:focus-visible {
	background: rgba( 83, 34, 94, 0.07 );
	outline: none;
}

.ly-dial-panel__flag {
	font-size: 1.05rem;
	flex-shrink: 0;
}

.ly-dial-panel__name {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ly-dial-panel__code {
	color: var( --ly-color-text-muted, #4a4a52 );
	font-weight: 600;
	flex-shrink: 0;
}

/* =============================================================================
   Payment method — COD row
   ========================================================================== */

body.woocommerce-checkout .wc-block-components-payment-methods,
body.woocommerce-checkout .wc-block-components-radio-control {
	border-radius: 12px;
}

body.woocommerce-checkout .wc-block-components-radio-control__option {
	position: relative;
	border: 1.5px solid var(--ly-color-border, #ece6e0);
	border-radius: 12px;
	/* Left padding RESERVES room for the radio indicator that's absolutely
	   positioned at left:~18px by WC Blocks. Without it the radio sits ON
	   TOP of the label text ("e shipping", "sh on delivery"). */
	padding: 18px 20px 18px 56px;
	margin-bottom: 10px;
	transition: border-color 150ms ease, background-color 150ms ease;
}

/* Tint the native radio control plum. accent-color is the modern,
   single-property way and Safari/Chrome/Firefox all support it. */
body.woocommerce-checkout .wc-block-components-radio-control input[type="radio"],
body.woocommerce-checkout input[type="radio"],
body.woocommerce-checkout input[type="checkbox"] {
	accent-color: var(--ly-color-primary, #53225e);
}

body.woocommerce-checkout .wc-block-components-radio-control__option.wc-block-components-radio-control__option-checked,
body.woocommerce-checkout .wc-block-components-radio-control__option:has( input:checked ) {
	border-color: var(--ly-color-primary, #53225e);
	background: rgba( 83, 34, 94, 0.04 );
}

/* =============================================================================
   Classic checkout / cart fallback (when WC Blocks isn't active)
   ========================================================================== */

body.woocommerce-checkout .woocommerce,
body.woocommerce-cart .woocommerce {
	max-width: 1280px;
	margin: 0 auto;
	padding: 48px 32px;
}

body.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 32px;
}

@media ( max-width: 900px ) {
	body.woocommerce-checkout form.checkout {
		grid-template-columns: 1fr;
	}
}

body.woocommerce-checkout #customer_details {
	background: #ffffff;
	border-radius: 16px;
	padding: 40px;
}

body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout #order_review {
	background: #f4eef5;
	border-radius: 16px;
	padding: 32px;
}

body.woocommerce-checkout #order_review_heading {
	border-radius: 16px 16px 0 0;
	padding-bottom: 0;
	margin: 0;
}

body.woocommerce-checkout #order_review {
	border-radius: 0 0 16px 16px;
	padding-top: 16px;
	margin-top: 0;
}

body.woocommerce-checkout .form-row input,
body.woocommerce-checkout .form-row select,
body.woocommerce-checkout .form-row textarea {
	border-radius: 12px !important;
	border: 1.5px solid var(--ly-color-border, #ece6e0) !important;
	padding: 14px 16px !important;
	font-size: 1rem !important;
	background: #ffffff !important;
}

body.woocommerce-checkout .form-row input:focus,
body.woocommerce-checkout .form-row select:focus,
body.woocommerce-checkout .form-row textarea:focus {
	border-color: var(--ly-color-primary, #53225e) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba( 83, 34, 94, 0.12 ) !important;
}

body.woocommerce-checkout #place_order,
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	background: var(--ly-color-primary, #53225e) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 18px 32px !important;
	font-size: 1.05rem !important;
	font-weight: 600 !important;
	width: 100% !important;
}

body.woocommerce-checkout #place_order:hover,
body.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
	background: var(--ly-color-primary-dark, #3d1846) !important;
}

/* =============================================================================
   Thank-you (order received)
   ========================================================================== */

body.woocommerce-order-received .wp-block-woocommerce-order-confirmation,
body.woocommerce-order-received .woocommerce-order {
	max-width: 820px;
	margin: 48px auto;
	padding: 48px;
	background: #ffffff;
	border-radius: 16px;
}

body.woocommerce-order-received .wc-block-order-confirmation-status,
body.woocommerce-order-received p.woocommerce-notice,
body.woocommerce-order-received p.woocommerce-thankyou-order-received {
	color: var(--ly-color-primary, #53225e);
	font-size: 1.75rem;
	font-weight: 700;
	text-align: center;
	margin-bottom: 32px;
}

body.woocommerce-order-received ul.order_details,
body.woocommerce-order-received .wc-block-order-confirmation-summary {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 160px, 1fr ) );
	gap: 16px;
	background: #faf6f1;
	border-radius: 12px;
	padding: 24px;
	list-style: none;
	margin: 0 0 32px;
}

body.woocommerce-order-received ul.order_details li {
	border-right: none;
	padding-right: 0;
	font-size: 0.85rem;
	color: var(--ly-color-text-muted, #4a4a52);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

body.woocommerce-order-received ul.order_details li strong {
	display: block;
	margin-top: 6px;
	color: var(--ly-color-primary, #53225e);
	font-size: 1.05rem;
	text-transform: none;
	letter-spacing: 0;
}

body.woocommerce-order-received .woocommerce-customer-details,
body.woocommerce-order-received .wc-block-order-confirmation-totals,
body.woocommerce-order-received .wc-block-order-confirmation-shipping-wrapper,
body.woocommerce-order-received .wc-block-order-confirmation-billing-wrapper {
	margin-top: 32px;
}

body.woocommerce-order-received h2,
body.woocommerce-order-received h3 {
	color: var(--ly-color-primary, #53225e);
}

@media ( max-width: 600px ) {
	body.woocommerce-order-received .wp-block-woocommerce-order-confirmation,
	body.woocommerce-order-received .woocommerce-order {
		margin: 16px;
		padding: 24px;
	}
}

/* Custom-gateway (Card Payment) logos — Visa / Mastercard / G Pay / Apple Pay.
   Rendered via CSS ::after rather than the gateway's own icon setting (that
   self-registering gateway renders its icon unreliably), so it always shows.
   Strip lives in the plugin; a root-relative URL works on any domain. */
.wp-block-woocommerce-checkout-payment-block label[for$="alg_custom_gateway_1"] .wc-block-components-payment-method-label::after,
.wc-block-checkout label[for$="alg_custom_gateway_1"] .wc-block-components-payment-method-label::after {
	content: "";
	display: inline-block;
	height: 24px;
	width: 71px;
	margin-left: 8px;
	vertical-align: middle;
	/* ?v bump when cards.png changes — the background URL isn't versioned by the
	   stylesheet, so browsers would otherwise keep the old cached strip. */
	background: url( /wp-content/plugins/layali-core/assets/img/pay/cards.png?v=2 ) left center / contain no-repeat;
}