/* =========================================================================
   Rose — WooCommerce styles (loaded only on shop/cart/checkout/account)
   Matches the theme's purple/pink design and the product/checkout reference.
   ========================================================================= */

.woocommerce-wrap { max-width: var(--container); }

/* WooCommerce pages must be full-width. If they fall through to page.php the
   content sits inside .container--narrow (760px) which crushes the checkout /
   cart / account layouts, so widen it back to the full container here. This
   sheet only loads on WooCommerce pages, so blog pages keep their narrow width. */
.woocommerce-page .container--narrow,
.woocommerce-checkout .container--narrow,
.woocommerce-cart .container--narrow,
.woocommerce-account .container--narrow,
body.woocommerce .container--narrow { max-width: var(--container); }

/* Shop filter note (Flash Sale / New Arrivals headings). */
.rose-shop-filter-note {
	display: inline-flex; align-items: center; gap: 0.4rem;
	margin: 0 0 1.2rem; padding: 0.55rem 1.1rem; border-radius: var(--radius-pill);
	background: var(--violet-soft); color: var(--violet-deep);
	font-weight: 700; font-size: 0.9rem;
}

/* Drop the big duplicate page-hero title on checkout/cart pages
   (WooCommerce already labels these; the giant heading just wastes space). */
.woocommerce-checkout .page-hero,
.woocommerce-cart .page-hero { display: none; }

/* --- Category strip (round-circle icons above the shop grid) ------------ */
.rose-cat-strip {
	display: flex; gap: 1rem; align-items: flex-start;
	overflow-x: auto; -webkit-overflow-scrolling: touch;
	padding: 0.25rem 0.25rem 0.9rem; margin: 0 0 1.4rem;
	scrollbar-width: none;
}
.rose-cat-strip::-webkit-scrollbar { display: none; }
.rose-cat-chip {
	flex: 0 0 auto; width: 68px;
	display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
	text-decoration: none; color: var(--ink);
}
.rose-cat-chip__img {
	width: 64px; height: 64px; border-radius: 50%;
	overflow: hidden; display: grid; place-items: center;
	background: var(--violet-soft); border: 2px solid transparent;
	transition: border-color var(--t), transform var(--t);
}
.rose-cat-chip__img img { width: 100%; height: 100%; object-fit: cover; }
.rose-cat-chip__img--all { color: var(--violet-deep); }
.rose-cat-chip__img--all .icon { width: 26px; height: 26px; }
.rose-cat-chip__initial {
	font-weight: 800; font-size: 1.5rem; color: var(--violet-deep); line-height: 1;
}
.rose-cat-chip__name {
	font-size: 0.75rem; font-weight: 600; text-align: center; line-height: 1.2;
	max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rose-cat-chip:hover .rose-cat-chip__img { transform: translateY(-2px); border-color: var(--violet-soft); }
.rose-cat-chip.is-active .rose-cat-chip__img { border-color: var(--violet); }
.rose-cat-chip.is-active .rose-cat-chip__name { color: var(--violet); font-weight: 800; }

/* Phone: hide the round-category strip and the shop page header (the big
   "Shop" title + "Showing N results") — they just waste space on mobile.
   Category archives keep their title so shoppers know which category they're in;
   only the result count is dropped there. */
@media (max-width: 640px) {
	.rose-cat-strip { display: none; }
	.woocommerce-shop .page-title,
	.woocommerce-shop .woocommerce-result-count,
	.tax-product_cat .woocommerce-result-count { display: none !important; }
}

/* --- Breadcrumb --------------------------------------------------------- */
.woocommerce-breadcrumb { color: var(--muted); font-size: 0.85rem; margin-bottom: 1.4rem; }
.woocommerce-breadcrumb a { color: var(--muted); }
.woocommerce-breadcrumb a:hover { color: var(--violet); }
.woocommerce-breadcrumb .crumb-sep { margin: 0 0.4rem; opacity: 0.5; }

/* --- Shop header (archive) --------------------------------------------- */
.woocommerce-products-header { margin-bottom: 1.8rem; }
.woocommerce-products-header__title { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 900; letter-spacing: -0.02em; }
.term-description { color: var(--muted); max-width: 60ch; }
.woocommerce-result-count { color: var(--muted); font-size: 0.85rem; margin: 0; }
.woocommerce-ordering select, .woocommerce select.orderby {
	font-family: inherit; font-size: 0.85rem; padding: 0.55rem 2rem 0.55rem 1rem;
	border: 1px solid var(--line); border-radius: var(--radius-pill); background: #fff; color: var(--ink);
}
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { display: inline-block; vertical-align: middle; }
.woocommerce-ordering { float: right; }

/* --- Shop grid: reuse the theme product-grid --------------------------- */
.woocommerce ul.products {
	display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 1.2rem;
	list-style: none; margin: 0; padding: 0;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none !important; }
.woocommerce ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; }
@media (max-width: 1100px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }

/* --- Single product (custom rose-product layout) ---------------------- */
.rose-product__grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start;
}
.rose-product__gallery { margin: 0; min-width: 0; }
.rose-product__gallery .woocommerce-product-gallery { margin: 0 !important; width: 100% !important; float: none !important; }
.rose-product__gallery .woocommerce-product-gallery__wrapper { border-radius: var(--radius-lg); overflow: hidden; margin: 0; }
.rose-product__gallery .woocommerce-product-gallery__image img { border-radius: var(--radius-lg); }
/* Gallery thumbnails: flexslider adds .flex-control-nav (often absolutely
   positioned with no margin), so force a static layout + a real gap below the
   main image. */
.rose-product__gallery .flex-control-thumbs,
.rose-product__gallery .flex-control-nav.flex-control-thumbs {
	position: static !important; display: flex !important; flex-wrap: wrap;
	gap: 0.6rem !important; margin: 0.9rem 0 0 !important; padding: 0 !important;
	list-style: none; width: auto !important;
}
.rose-product__gallery .flex-control-thumbs li { width: 68px !important; margin: 0 !important; float: none !important; }
.rose-product__gallery .flex-control-thumbs img { border-radius: var(--radius); cursor: pointer; opacity: 0.7; transition: opacity var(--t); display: block; width: 100%; }
.rose-product__gallery .flex-control-thumbs img:hover, .rose-product__gallery .flex-control-thumbs .flex-active { opacity: 1; }

.rose-product__summary { padding: 0; min-width: 0; width: auto !important; float: none !important; }
.rose-product__summary .product_title { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -0.02em; margin: 0.4rem 0 0.6rem; }
.rose-product__summary .woocommerce-product-rating { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.rose-product__summary .star-rating { color: var(--pink); }
/* Product price — big and prominent. Raised specificity so WooCommerce's
   default .price size can't shrink it. */
.single-product .rose-product__summary .price,
.woocommerce div.product .rose-product__summary .price {
	font-size: clamp(1.6rem, 3.5vw, 2.2rem) !important; font-weight: 900;
	line-height: 1.1; margin: 0.4rem 0 1rem !important;
	display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem;
}
.single-product .rose-product__summary .price,
.single-product .rose-product__summary .price .amount,
.single-product .rose-product__summary .price ins,
.single-product .rose-product__summary .price ins .amount { color: var(--pink) !important; }
.single-product .rose-product__summary .price ins { text-decoration: none; font-weight: 900; }
/* Old (struck-through) price: muted, a touch smaller than the sale price but
   still clearly readable. */
.single-product .rose-product__summary .price del {
	color: var(--muted) !important; font-weight: 500; font-size: 0.82em !important; text-decoration: line-through; order: -1;
}
.single-product .rose-product__summary .price del .amount { color: var(--muted) !important; font-weight: 500; }
/* Only the <del> draws the strike — stop the inner .amount adding a 2nd line. */
.single-product .rose-product__summary .price del .amount,
.single-product .rose-product__summary .price del bdi { text-decoration: none !important; }
/* Hide WooCommerce's screen-reader "Original price was…" duplicate text. */
.rose-product__summary .price .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.rose-product__summary .woocommerce-product-details__short-description { color: var(--body); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1rem 0; margin-bottom: 1.2rem; }
/* Short description typed line-by-line renders as a clean bullet list. */
.rose-product__summary .rose-short-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.rose-product__summary .rose-short-list li { position: relative; padding-left: 1.5rem; line-height: 1.5; }
.rose-product__summary .rose-short-list li::before { content: ""; position: absolute; left: 0.35rem; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--violet); }
.rose-product__summary .product_meta { font-size: 0.85rem; color: var(--muted); margin-top: 0.8rem; }
.rose-product__summary .product_meta a { color: var(--violet); }

/* keep the old .single-product selectors too, harmless fallback */
.single-product div.product { min-width: 0; }

/* Variations (color / size swatches area) */
.single-product .variations { border: 0; margin-bottom: 1rem; }
.single-product .variations th { text-align: left; vertical-align: middle; font-weight: 700; color: var(--ink); padding: 0.55rem 1rem 0.55rem 0; }
.single-product .variations td { padding: 0.55rem 0; }
.single-product .variations select { padding: 0.6rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }

/* Pretty swatches replacing the plain dropdowns (built by swatches.js).
   The real <select> is hidden but kept as the source of truth. */
.single-product .variations select.rose-select-hidden {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); border: 0;
}
.rose-swatches { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* Colour dots */
.rose-swatch--color {
	width: 30px; height: 30px; padding: 0; border-radius: 50%; cursor: pointer;
	background: var(--swatch-color, #ddd);
	border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line);
	transition: box-shadow var(--t), transform var(--t);
}
.rose-swatch--color:hover { transform: translateY(-1px); box-shadow: 0 0 0 2px var(--violet); }
.rose-swatch--color.is-active { box-shadow: 0 0 0 2px var(--violet), 0 0 0 4px var(--violet-soft); }

/* Hide WooCommerce's "Clear" link — swatches toggle off on re-click instead. */
.single-product .variations .reset_variations,
.single-product a.reset_variations { display: none !important; }

/* Size / text pills */
.rose-swatch--text {
	min-width: 44px; text-align: center; padding: 0.5rem 0.85rem; cursor: pointer;
	background: #fff; color: var(--ink); font-weight: 700; font-size: 0.85rem; line-height: 1;
	border: 1px solid var(--line); border-radius: var(--radius-pill);
	transition: all var(--t);
}
.rose-swatch--text:hover { border-color: var(--violet); color: var(--violet); }
.rose-swatch--text.is-active { background: var(--violet); border-color: var(--violet); color: #fff; }

/* Quantity + add to cart row */
.single-product form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
/* Variable products nest the buttons inside .woocommerce-variation-add-to-cart,
   so the form's gap doesn't reach them — give that inner row the same spacing. */
.single-product form.cart .woocommerce-variation-add-to-cart {
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem;
}
/* Hidden inputs inside that flex row would otherwise create stray gaps. */
.single-product form.cart .woocommerce-variation-add-to-cart > input[type="hidden"] { display: none; }
.single-product .quantity { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-pill); overflow: hidden; }
.single-product .quantity input.qty { width: 54px; text-align: center; border: 0; padding: 0.7rem 0; font-weight: 600; }
.single-product form.cart .button {
	background: var(--violet); color: #fff; border: 0; border-radius: var(--radius-pill);
	padding: 0.9rem 1.8rem; font-weight: 700; font-size: 0.95rem; transition: background var(--t), transform var(--t);
}
.single-product form.cart .button:hover { background: var(--violet-deep); transform: translateY(-2px); }
.single-product .rose-buy-now {
	display: inline-flex !important; align-items: center; justify-content: center;
	background: transparent !important; color: var(--pink) !important; border: 1.5px solid var(--pink) !important;
	border-radius: var(--radius-pill) !important;
	padding: 0.9rem 1.8rem !important; font-weight: 700; font-size: 0.95rem !important; line-height: 1 !important;
	transition: all var(--t);
}
.single-product .rose-buy-now:hover { background: var(--pink) !important; color: #fff !important; transform: translateY(-2px); }
/* Disabled until a variation is chosen — same size as enabled, just faded.
   (WooCommerce's own .disabled rule shrinks the padding; override it.) */
.single-product .rose-buy-now.disabled,
.single-product .rose-buy-now:disabled {
	opacity: 0.45; cursor: not-allowed;
	background: transparent !important; color: var(--pink) !important; transform: none !important;
	padding: 0.9rem 1.8rem !important; font-size: 0.95rem !important; line-height: 1 !important;
}


/* Product tag + sold + swatches (reference match) */
.product-tag { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--violet); background: var(--violet-soft); padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); margin-bottom: 0.5rem; }
.product-tag--feat { color: var(--pink); background: var(--pink-soft); }
.single-product .woocommerce-product-rating { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.product-sold { color: var(--muted); font-size: 0.85rem; font-weight: 600; }

/* Tabs */
.woocommerce-tabs { grid-column: 1 / -1; margin-top: 2.5rem; }
.woocommerce-tabs ul.tabs { display: flex; gap: 1.5rem; list-style: none; padding: 0 0 0.5rem; margin: 0 0 1.5rem; border-bottom: 1px solid var(--line); }
.woocommerce-tabs ul.tabs li { padding: 0; }
.woocommerce-tabs ul.tabs li a { color: var(--muted); font-weight: 600; padding-bottom: 0.6rem; position: relative; }
.woocommerce-tabs ul.tabs li.active a { color: var(--violet); }
.woocommerce-tabs ul.tabs li.active a::after { content: ""; position: absolute; left: 0; bottom: -0.55rem; width: 100%; height: 2px; background: var(--violet); }

/* Related products */
.related.products, .up-sells { grid-column: 1 / -1; margin-top: 2.5rem; }
.related.products > h2, .up-sells > h2 { font-size: 1.4rem; font-weight: 800; margin-bottom: 1.2rem; }

@media (max-width: 780px) {
	/* Stack the product gallery above the summary on tablet/mobile. */
	.rose-product__grid { grid-template-columns: 1fr; }
	.single-product div.product { grid-template-columns: 1fr; }
	.single-product .woocommerce-product-gallery { position: static; }
	.woocommerce-ordering { float: none; margin-top: 0.6rem; }
}

/* Phone: make the Add to cart + Buy Now buttons a bit smaller and sit
   side-by-side (Buy Now no longer wraps below). Only the two buttons are
   touched — the quantity box, colour/size swatches and everything else keep
   their normal layout. */
@media (max-width: 640px) {
	.single-product form.cart .single_add_to_cart_button,
	.single-product .rose-buy-now,
	.single-product .rose-buy-now.disabled,
	.single-product .rose-buy-now:disabled {
		padding: 0.7rem 1.1rem !important;
		font-size: 0.85rem !important;
	}

	/* Product info tabs: let them scroll sideways so none get cut off. */
	.woocommerce-tabs ul.tabs {
		flex-wrap: nowrap; overflow-x: auto !important; -webkit-overflow-scrolling: touch;
		gap: 1.2rem; scrollbar-width: none;
	}
	.woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
	.woocommerce-tabs ul.tabs li { flex: 0 0 auto; }
	.woocommerce-tabs ul.tabs li a { white-space: nowrap; font-size: 0.9rem; }
}

/* --- Buttons (generic WC) ---------------------------------------------- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce .button {
	background: var(--violet); color: #fff; border-radius: var(--radius-pill); padding: 0.8rem 1.5rem; font-weight: 700; border: 0; transition: background var(--t), transform var(--t);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button:hover { background: var(--violet-deep); color: #fff; transform: translateY(-2px); }
.woocommerce .button.alt { background: var(--pink); }
.woocommerce .button.alt:hover { background: #d13c85; color: #fff; }

/* --- Block Cart / Checkout buttons (Proceed to Checkout, Place Order) ---- *
 * The block-based cart & checkout render their own buttons that don't match
 * the theme's .woocommerce .button styling, so we brand them here. !important
 * beats the block editor's injected background/colour. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-cart .wc-block-components-button.contained,
.wp-block-woocommerce-checkout .wc-block-components-button.contained {
	background: var(--violet) !important;
	background-image: none !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--radius-pill) !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	transition: background var(--t), transform var(--t);
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-cart .wc-block-components-button.contained:hover,
.wp-block-woocommerce-checkout .wc-block-components-button.contained:hover {
	background: var(--violet-deep) !important;
	color: #fff !important;
	transform: translateY(-2px);
}
/* The button label span inherits colour in some block versions — force white. */
.wc-block-cart__submit-button .wc-block-components-button__text,
.wc-block-components-checkout-place-order-button .wc-block-components-button__text {
	color: #fff !important;
}

/* --- Notices ------------------------------------------------------------ */
/* Keep the notices wrapper clear of the sticky header and the page below. */
.woocommerce-notices-wrapper:not(:empty) { margin: 1.5rem 0; }
.woocommerce-notices-wrapper .woocommerce-message:last-child,
.woocommerce-notices-wrapper .woocommerce-info:last-child,
.woocommerce-notices-wrapper .woocommerce-error:last-child { margin-bottom: 0; }

.woocommerce-message, .woocommerce-info, .woocommerce-error {
	position: relative;
	display: flex;              /* align the ✓/i icon with the text and button */
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem 0.9rem;
	border-radius: var(--radius); border: 0; border-top: 3px solid var(--violet);
	background: var(--tint); padding: 1rem 1.4rem; margin: 0 0 1rem; list-style: none;
	line-height: 1.4;
}
/* WooCommerce injects a ::before icon via an icon font positioned absolutely,
   which overlaps our text. Neutralise it and use a clean inline marker instead. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	position: static;
	margin: 0;
	top: auto; left: auto;
	font-size: 1.1em;
	line-height: 1;
	flex-shrink: 0;
}
/* Push the "View cart" button to the right of the message text. */
.woocommerce-message .button,
.woocommerce-info .button { margin-left: auto; }

.woocommerce-error { border-top-color: #E5484D; background: #FEF2F2; }

/* --- Cart --------------------------------------------------------------- */
/* "Buy Now" per line — its own column after Subtotal. Checks out just this
   item and keeps the rest of the cart for later. */
.woocommerce-cart .product-buy-now { text-align: center; white-space: nowrap; }
.rose-buy-this {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
	padding: 0.55rem 1.15rem !important;
	font-size: 0.82rem !important; font-weight: 700 !important; line-height: 1 !important;
	color: #fff !important; background: var(--violet) !important;
	border: 1px solid transparent !important; border-radius: var(--radius-pill) !important;
	min-height: 0 !important; width: auto !important;
	box-shadow: 0 6px 14px -6px rgba(75,47,179,0.5);
	transition: background var(--t), color var(--t), transform var(--t), box-shadow var(--t);
}
.rose-buy-this:hover {
	background: var(--pink) !important; color: #fff !important;
	transform: translateY(-1px); box-shadow: 0 10px 18px -6px rgba(233,30,99,0.5);
}

/* Coupon input on the cart page was too narrow (text clipped to "Coupon co"). */
.woocommerce-cart .cart .actions .coupon { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.woocommerce-cart .cart .actions .coupon .input-text#coupon_code,
.woocommerce-cart .cart .actions .coupon input#coupon_code {
	width: auto; min-width: 200px; flex: 0 1 240px;
	padding: 0.7rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-pill); font-family: inherit;
}

.woocommerce table.shop_table { border: 1px solid var(--line); border-radius: var(--radius-lg); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.woocommerce table.shop_table th { background: var(--tint); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; color: var(--muted); }
.woocommerce table.shop_table td, .woocommerce table.shop_table th { padding: 1rem; }
.cart_totals h2 { font-size: 1.3rem; }
.cart-collaterals .cart_totals { background: var(--tint); border-radius: var(--radius-lg); padding: 1.5rem; }

/* --- Phone: turn the cart table into clean product cards ---------------- *
 * WooCommerce's default responsive table stacks every field on its own row
 * (Product: / Price: / Quantity: …) which looks clumsy. Instead each cart row
 * becomes a compact card: thumbnail + name on top, then price · qty · subtotal,
 * with Buy Now and a remove ✕ — matching the app-style design of the site. */
@media (max-width: 640px) {
	.woocommerce-cart-form table.shop_table { border: 0 !important; overflow: visible; }
	/* Hide the table head and the bottom actions row's borders. */
	.woocommerce-cart-form table.shop_table thead { display: none !important; }
	.woocommerce-cart-form table.shop_table,
	.woocommerce-cart-form table.shop_table tbody { display: block !important; }

	/* Each product row = a card. */
	.woocommerce-cart-form tr.cart_item {
		display: grid !important;
		grid-template-columns: 72px 1fr auto;
		grid-template-areas:
			"thumb name  remove"
			"thumb price price"
			"thumb qty   subtotal"
			"buy   buy   buy";
		gap: 0.5rem 0.8rem; align-items: center;
		position: relative;
		border: 1px solid var(--line); border-radius: var(--radius-lg);
		padding: 0.9rem; margin-bottom: 0.9rem; background: #fff;
	}
	.woocommerce-cart-form tr.cart_item td {
		display: block !important; padding: 0 !important; border: 0 !important; width: auto !important;
		background: transparent !important; /* kill WC's alternate-row striping */
	}
	/* Kill WooCommerce's data-title labels on phones. */
	.woocommerce-cart-form tr.cart_item td::before { content: none !important; }

	.woocommerce-cart-form td.product-thumbnail {
		grid-area: thumb; align-self: start;
	}
	.woocommerce-cart-form td.product-thumbnail img {
		width: 72px; height: 90px; object-fit: cover; border-radius: 10px; margin: 0;
	}
	.woocommerce-cart-form table.shop_table tr.cart_item td.product-name {
		grid-area: name; font-size: 0.9rem; font-weight: 600; line-height: 1.3; text-align: left !important;
	}
	.woocommerce-cart-form td.product-name a { color: var(--ink); }
	.woocommerce-cart-form td.product-name .variation { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }
	.woocommerce-cart-form td.product-name .variation p,
	.woocommerce-cart-form td.product-name .variation dd { margin: 0; }
	.woocommerce-cart-form td.product-price {
		grid-area: price; font-size: 0.85rem; color: var(--violet); font-weight: 700; text-align: left !important;
	}
	.woocommerce-cart-form td.product-quantity {
		grid-area: qty; text-align: left !important; justify-self: start;
	}
	.woocommerce-cart-form td.product-quantity .quantity { transform: scale(0.9); transform-origin: left center; }
	.woocommerce-cart-form td.product-subtotal {
		grid-area: subtotal; justify-self: end; align-self: center;
		font-weight: 800; color: var(--ink); font-size: 0.95rem; text-align: right !important;
	}
	.woocommerce-cart-form td.product-buy-now { grid-area: buy; }
	.woocommerce-cart-form td.product-buy-now .button { width: 100%; }
	/* Remove ✕ pinned to the card's top-right. */
	.woocommerce-cart-form td.product-remove {
		grid-area: remove; justify-self: end; align-self: start;
	}
	.woocommerce-cart-form td.product-remove a.remove {
		font-size: 1.1rem; width: 26px; height: 26px; line-height: 24px; text-align: center;
	}

	/* The coupon / update-cart actions row: full-width, stacked. */
	.woocommerce-cart-form td.actions {
		display: block; padding: 0.2rem 0 0;
	}
	/* Coupon input + Apply button side-by-side (never wrapping). */
	.woocommerce-cart-form td.actions .coupon {
		display: flex !important; flex-wrap: nowrap !important; align-items: stretch;
		gap: 0.5rem; margin-bottom: 0.7rem;
	}
	.woocommerce-cart-form td.actions .coupon .input-text {
		flex: 1 1 auto !important; min-width: 0 !important; width: auto !important;
	}
	.woocommerce-cart-form td.actions button[name="update_cart"] { width: 100%; }
	/* Apply button: fixed narrow width so the coupon input gets most of the row.
	   The long "Apply coupon" text is hidden; a short "Apply" label shows via
	   ::after. */
	.woocommerce-cart-form td.actions .coupon button[name="apply_coupon"] {
		flex: 0 0 84px !important; width: 84px !important; max-width: 84px !important;
		padding: 0.6rem 0 !important; white-space: nowrap; text-align: center;
		font-size: 0 !important; overflow: hidden;
	}
	.woocommerce-cart-form td.actions .coupon button[name="apply_coupon"]::after {
		content: "Apply"; font-size: 0.8rem; font-weight: 700;
	}
	/* Coupon input takes the remaining (larger) space. */
	.woocommerce-cart-form td.actions .coupon .input-text { padding: 0.6rem 0.8rem; }

	/* Cart totals: full-width, comfortable. */
	.cart-collaterals, .cart-collaterals .cart_totals { width: 100%; float: none; }
	.cart-collaterals .cart_totals { padding: 1.2rem; }
	/* Smaller Proceed to checkout button. */
	.cart_totals .checkout-button {
		width: 100%; padding: 0.85rem 1rem !important; font-size: 0.95rem !important;
	}
}

/* --- Checkout ----------------------------------------------------------- */
/* Hide the "View cart" button in the add-to-cart notice on the checkout page. */
.woocommerce-checkout .woocommerce-message a.button.wc-forward,
.woocommerce-checkout .woocommerce-message a.wc-forward { display: none; }

/* --- Two-step checkout -------------------------------------------------- */
.rose-step-nav { margin: 1.2rem 0 0; }
.rose-checkout__continue { width: 100%; }

/* "Back to shipping" link shown above the payment methods on step 2. */
.rose-checkout__back {
	display: inline-flex; align-items: center; gap: 0.45rem;
	background: var(--violet-soft); border: 0; border-radius: var(--radius-pill);
	padding: 0.6rem 1.1rem; margin: 0 0 1.2rem;
	color: var(--violet-deep); font-weight: 700; font-size: 0.88rem; cursor: pointer;
	transition: background var(--t), color var(--t);
}
.rose-checkout__back:hover { background: var(--violet); color: #fff; }
/* Only show the Back link on the payment step (it lives in the left column). */
.rose-checkout[data-step="1"] .rose-checkout__back { display: none; }

/* Step indicator: the "Shipping" step is clickable to jump back to step 1. */
.checkout-steps .cstep--clickable { cursor: pointer; }
.checkout-steps .cstep--clickable:hover .cstep__num { background: var(--violet); color: #fff; }
.checkout-steps .cstep--clickable:hover .cstep__text strong { color: var(--violet); }

/* The wallet-fields host lives in the left column; hidden on step 1. */
.rose-pay-fields-host { display: none; }

/* STEP 1 (Shipping): billing details on the left; the right column shows the
   "Your order" summary (product list + totals) so the customer can see what
   they're buying, with the Continue button below it. Only the payment box and
   coupon are held back for the payment step. */
.rose-checkout[data-step="1"] #payment,
.rose-checkout[data-step="1"] .rose-coupon-block { display: none !important; }
.rose-checkout[data-step="1"] #order_review_heading,
.rose-checkout[data-step="1"] #order_review { display: block; }
.rose-checkout[data-step="1"] .rose-step-nav { display: block; }

/* STEP 2 (Payment): billing form hidden; the LEFT column now hosts the wallet
   transaction fields, the RIGHT "Your order" card holds coupon + totals +
   payment options + Place Order. */
.rose-checkout[data-step="2"] #customer_details { display: none; }
.rose-checkout[data-step="2"] .rose-pay-fields-host { display: block; }
.rose-checkout[data-step="2"] #payment { display: block; }
.rose-checkout[data-step="2"] .rose-coupon-block { display: block; }
.rose-checkout[data-step="2"] .rose-step-nav { display: none; }

.rose-coupon-block { margin-bottom: 1.2rem; }

/* Before JS runs, avoid a flash of the step nav (no data-step yet). */
.rose-checkout:not([data-step]) .rose-step-nav { display: none; }

/* --- Step 2 payment options (inside the Your order card) --------------- */
/* Two-up grid: bKash + Nagad share the top row, Cash on delivery spans below.
   WooCommerce's source order is COD, bKash, Nagad — we reorder with `order`. */
#payment ul.payment_methods {
	list-style: none; margin: 0.4rem 0 1rem; padding: 0; border: 0;
	display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem;
}
/* Premium option tiles: the whole tile is the click target; a custom check
   dot replaces the default radio for a cleaner, more intentional look. */
#payment ul.payment_methods li {
	position: relative; margin: 0; padding: 0; background: var(--soft-white);
	border: 1.5px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
	transition: border-color var(--t), box-shadow var(--t), transform var(--t);
	align-self: start;
}
#payment ul.payment_methods li:hover { border-color: var(--lilac); transform: translateY(-1px); }

/* Explicit placement: bKash + Nagad row 1 (side by side), COD row 2 full-width. */
#payment ul.payment_methods li.payment_method_rose_bkash { grid-column: 1 !important; grid-row: 1 !important; }
#payment ul.payment_methods li.payment_method_rose_nagad { grid-column: 2 !important; grid-row: 1 !important; }
#payment ul.payment_methods li.payment_method_cod { grid-column: 1 / -1 !important; grid-row: 2 !important; }

/* Hide the native radio; we draw our own dot on the tile's top-right. */
#payment ul.payment_methods li input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
#payment ul.payment_methods li > label {
	display: flex; align-items: center; gap: 0.6rem; margin: 0 !important;
	padding: 0.95rem 2.2rem 0.95rem 1rem; /* right pad leaves room for the dot */
	font-weight: 700; color: var(--ink); cursor: pointer; line-height: 1.2; font-size: 0.92rem;
	min-height: 58px;
}
#payment ul.payment_methods li > label > img { display: none; }
/* Custom check dot (top-right). */
#payment ul.payment_methods li > label::after {
	content: ""; position: absolute; top: 50%; right: 0.9rem; transform: translateY(-50%);
	width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); background: #fff; transition: all var(--t);
}
#payment ul.payment_methods li:has(input:checked) { border-color: var(--violet); box-shadow: 0 6px 18px -10px rgba(124,92,224,0.5); }
#payment ul.payment_methods li:has(input:checked) > label::after {
	border-color: var(--violet); background: radial-gradient(circle, #fff 0 32%, var(--violet) 40% 100%);
}

/* Collapse the in-tile payment box (fields live in the left column). */
#payment ul.payment_methods li .payment_box { max-height: 0; padding: 0; margin: 0; overflow: hidden; }

/* Payment icon tiles — same shape for every method (icon first, then name). */
.rose-pay-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; }
.rose-pay-icon--cod { background: var(--violet-soft); color: var(--violet); }
.rose-pay-icon svg { width: 20px; height: 20px; }
/* Brand logo images (bKash / Nagad) sit on a light tile so the logo reads well. */
.rose-pay-icon--img { background: #fff; border: 1px solid var(--line); padding: 3px; }
.rose-pay-icon--img img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Phone: stack the payment methods one per row so the icon + name + radio dot
   never get cramped/overlapping in a narrow two-column tile. */
@media (max-width: 640px) {
	#payment ul.payment_methods { grid-template-columns: 1fr !important; }
	#payment ul.payment_methods li.payment_method_cod,
	#payment ul.payment_methods li.payment_method_rose_bkash,
	#payment ul.payment_methods li.payment_method_rose_nagad {
		grid-column: auto !important; grid-row: auto !important;
	}
	/* Smaller icons + shorter tiles so the payment rows aren't so tall. */
	#payment ul.payment_methods .rose-pay-icon--img { width: 34px; height: 34px; }
	#payment ul.payment_methods .rose-pay-icon { width: 32px; height: 32px; }
	#payment ul.payment_methods li > label {
		min-height: 46px; padding: 0.65rem 2rem 0.65rem 0.8rem; gap: 0.5rem; font-size: 0.88rem;
	}
}

/* Coupon: hide the redundant toggle; give the block equal top & bottom gap so
   it sits evenly between the "Your order" heading and the order totals, and
   align its side padding with the heading/totals (which live in a tinted card). */
.rose-coupon-block .woocommerce-form-coupon-toggle { display: none; }
.rose-checkout__summary .rose-coupon-block {
	background: var(--tint); padding: 0.55rem 1.5rem; margin: 0;
}
.rose-checkout__summary #order_review_heading { padding-bottom: 0.55rem; }
.rose-checkout__summary .rose-coupon-block .form-row { margin: 0; }

/* Gateway description box under a selected method: short note only. The wallet
   input fields are moved to the left column, so here we just show the note. */
#payment .payment_box { background: var(--tint); border: 0; border-radius: 0; box-shadow: none; padding: 0.7rem 1rem 0.9rem; margin: 0; font-size: 0.85rem; color: var(--body); }
#payment .payment_box::before { display: none; }
#payment .payment_box p { margin: 0; }
/* The moved wallet fields must never render inside the option row. */
#payment .payment_box .rose-wallet-pay { display: none; }

/* --- Left column: wallet transaction fields --------------------------- */
.rose-pay-fields-host { background: var(--soft-white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.4rem 1.5rem; box-shadow: var(--shadow-sm); }
/* Inputs inside the wallet card sit on white so they stand out against the
   tinted card. */
.rose-pay-fields-host input.input-text { background: #fff; }
.rose-pay-fields-host__empty { color: var(--muted); margin: 0; font-size: 0.92rem; }
.rose-pay-fields-host.has-fields .rose-pay-fields-host__empty { display: none; }
.rose-pay-fields-host .rose-wallet-pay { margin: 0; }

/* Short "how to pay" step-by-step manual shown above the wallet fields. */
.rose-wallet-guide { background: var(--violet-soft); border-radius: var(--radius); padding: 1rem 1.1rem 1rem 1.2rem; margin: 0 0 1.2rem; }
.rose-wallet-guide__title { display: flex; align-items: center; gap: 0.45rem; font-weight: 800; color: var(--violet-deep); font-size: 0.9rem; margin: 0 0 0.6rem; }
.rose-wallet-guide__title::before { content: "📖"; font-size: 1rem; }
.rose-wallet-guide__steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.rose-wallet-guide__steps li { counter-increment: step; position: relative; padding-left: 2rem; font-size: 0.86rem; color: var(--body); line-height: 1.45; }
.rose-wallet-guide__steps li::before {
	content: counter(step); position: absolute; left: 0; top: 0;
	width: 22px; height: 22px; border-radius: 50%; background: var(--violet); color: #fff;
	font-size: 0.72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.rose-wallet-guide__steps li strong { color: var(--violet-deep); }
/* Cash on delivery variant: truck icon + a small closing note. */
.rose-wallet-guide--cod .rose-wallet-guide__title::before { content: "🚚"; }
.rose-wallet-guide__note { margin: 0.8rem 0 0; padding-top: 0.7rem; border-top: 1px dashed rgba(124,92,224,0.35); font-size: 0.82rem; color: var(--violet-deep); font-weight: 600; }
.rose-pay-fields-host .form-row { margin-bottom: 1rem; }
.rose-pay-fields-host label { font-weight: 600; font-size: 0.85rem; color: var(--ink); margin-bottom: 0.3rem; display: block; }
.rose-pay-fields-host .input-text { width: 100%; padding: 0.8rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); font-family: inherit; }
.rose-pay-fields-host .input-text:focus { border-color: var(--violet); outline: none; box-shadow: 0 0 0 3px rgba(124,92,224,0.12); }

/* The checkout form itself must span the full container width. */
.woocommerce form.checkout.rose-checkout { width: 100%; display: block; }

/* Two-column shell: form details (left) + sticky order summary (right). */
.rose-checkout__grid { display: grid; width: 100%; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.rose-checkout__main { min-width: 0; }
.rose-checkout__aside { min-width: 0; }
.rose-checkout__summary { position: sticky; top: 90px; }

/* Inside the narrow left column, stack billing + shipping (do not split 2-up). */
.woocommerce-checkout #customer_details { display: block; }
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { width: auto; float: none; margin-bottom: 1.5rem; }
.woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { width: auto; float: none; }

.woocommerce-checkout h3#ship-to-different-address,
.woocommerce-checkout .col-1 > h3,
.woocommerce-checkout .col-2 > h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 1rem; }

.woocommerce form .form-row { margin-bottom: 1rem; }
.woocommerce form .form-row label { font-weight: 600; font-size: 0.85rem; color: var(--ink); margin-bottom: 0.3rem; display: block; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .select2-container .select2-selection {
	padding: 0.8rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; width: 100%; font-family: inherit;
}
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus { border-color: var(--violet); outline: none; box-shadow: 0 0 0 3px rgba(124, 92, 224, 0.12); }

/* Order summary card (right column) */
#order_review, #order_review_heading { background: var(--tint); }
#order_review_heading { border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 1.3rem 1.5rem 0; margin: 0; font-size: 1.2rem; }
#order_review { border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: 1.3rem 1.5rem 1.5rem; }
.woocommerce-checkout .rose-checkout__summary table.shop_table { border: 0; border-radius: 0; background: transparent; width: 100%; table-layout: fixed; }
.woocommerce-checkout .rose-checkout__summary table.shop_table th,
.woocommerce-checkout .rose-checkout__summary table.shop_table td { padding: 0.7rem 0; background: transparent; word-break: normal; overflow-wrap: break-word; }
/* Product name gets the flexible column; total stays snug and right-aligned. */
.woocommerce-checkout .rose-checkout__summary table.shop_table .product-name,
.woocommerce-checkout .rose-checkout__summary table.shop_table th:first-child { width: auto; text-align: left; }
.woocommerce-checkout .rose-checkout__summary table.shop_table .product-total,
.woocommerce-checkout .rose-checkout__summary table.shop_table td:last-child,
.woocommerce-checkout .rose-checkout__summary table.shop_table th:last-child { width: 90px; text-align: right; white-space: nowrap; vertical-align: top; }
.rose-checkout__summary .shop_table thead th { text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.05em; color: var(--muted); border-bottom: 1px solid var(--line); }
.rose-checkout__summary .shop_table tfoot th, .rose-checkout__summary .shop_table tfoot td { border-top: 1px solid var(--line); font-weight: 700; }
.rose-checkout__summary .product-name { color: var(--ink); font-weight: 600; }
.rose-checkout__summary .product-quantity { color: var(--muted); font-weight: 500; }
#payment { background: transparent; }
#payment ul.payment_methods { border: 0; padding: 0; margin: 0.5rem 0 1rem; }
#place_order { width: 100%; background: var(--violet); font-size: 1rem; padding: 1rem; }

@media (max-width: 980px) {
	.rose-checkout__grid { grid-template-columns: 1fr; }
	.rose-checkout__summary { position: static; }
}

/* --- My account (modern dashboard layout) ------------------------------ */
/* Hide the big "My account" page title — the dashboard has its own header. */
.woocommerce-account .page-hero,
.woocommerce-account .entry-title,
.woocommerce-account > .container > header,
.woocommerce-account .woocommerce-account__title { display: none; }

/* Personalised welcome header at the top of the dashboard. */
.rose-account-hello {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
	padding: 1.3rem 1.5rem; margin: 0 0 1.4rem; border-radius: var(--radius-lg);
	background: linear-gradient(120deg, var(--violet) 0%, var(--violet-deep) 120%); color: #fff;
	box-shadow: var(--shadow);
}
.rose-account-hello__eyebrow { margin: 0 0 0.2rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.8); }
.rose-account-hello__name { margin: 0; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; color: #fff; letter-spacing: -0.02em; }
/* White text on the gradient header — force it over the base .btn violet. */
.rose-account-hello .rose-account-hello__shop,
.rose-account-hello__shop { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.5); color: #fff !important; text-decoration: none !important; }
.rose-account-hello__shop:hover { background: #fff; color: var(--violet-deep) !important; border-color: #fff; text-decoration: none !important; }

.woocommerce-account .woocommerce {
	display: grid; grid-template-columns: 280px minmax(0, 1fr);
	gap: clamp(1.2rem, 3vw, 2rem); align-items: start;
}
/* Pin each panel to its column so the order/width can't get swapped. */
.woocommerce-account .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 1; }
.woocommerce-account .woocommerce-MyAccount-content { grid-column: 2; grid-row: 1; }

/* Sidebar navigation as a soft card. */
.woocommerce-MyAccount-navigation {
	width: auto !important; float: none !important;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	padding: 0.6rem; box-shadow: var(--shadow-sm); position: sticky; top: 90px;
}
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.woocommerce-MyAccount-navigation li { border: 0; margin: 0; }
.woocommerce-MyAccount-navigation li a {
	display: flex; align-items: center; gap: 0.7rem;
	padding: 0.8rem 1rem; border-radius: var(--radius); color: var(--body);
	font-weight: 600; font-size: 0.92rem; text-decoration: none !important;
	transition: background var(--t), color var(--t);
}
/* A small dot marker before each item — turns solid on the active tab. */
.woocommerce-MyAccount-navigation li a::before {
	content: ""; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
	background: currentColor; opacity: 0.35; transition: opacity var(--t), transform var(--t);
}
.woocommerce-MyAccount-navigation li a:hover::before { opacity: 0.7; }
.woocommerce-MyAccount-navigation li.is-active a::before { opacity: 1; transform: scale(1.25); }
.woocommerce-MyAccount-navigation li a:hover { background: var(--violet-soft); color: var(--violet-deep); }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--violet); color: #fff; }

/* Content card. */
.woocommerce-MyAccount-content {
	width: auto !important; float: none !important;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	padding: clamp(1.3rem, 3vw, 2rem); box-shadow: var(--shadow-sm); min-width: 0;
}
.woocommerce-MyAccount-content > p:first-child { margin-top: 0; }
.woocommerce-MyAccount-content a:not(.button) { color: var(--violet); font-weight: 600; }
.woocommerce-MyAccount-content .woocommerce-Message,
.woocommerce-MyAccount-content mark { background: var(--violet-soft); color: var(--violet-deep); padding: 0.1rem 0.4rem; border-radius: 4px; }

/* Dashboard intro line. */
.woocommerce-account .woocommerce-MyAccount-content strong { color: var(--ink); }

/* Orders / downloads tables inherit the shared .shop_table styling. */
.woocommerce-account .woocommerce-orders-table__cell,
.woocommerce-account .shop_table td { vertical-align: middle; }

/* Hide the "Confirm email address" prompt on the Orders page — customers here
   log in to order, so the guest-order email-verification notice isn't needed. */
.woocommerce-account.woocommerce-orders .woocommerce-MyAccount-content > .woocommerce-info {
	display: none;
}

/* Hide the "… has been added to your cart" success notice everywhere — the
   cart badge already updates, so the banner (with its "View cart" button) is
   just noise. Error notices (.woocommerce-error) and info notices are kept. */
.woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-message,
.wc-block-components-notice-banner.is-success {
	display: none !important;
}

/* Product thumbnails shown in the orders table "Products" column. */
.rose-order-thumbs { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.rose-order-thumb { display: inline-flex; }
.rose-order-thumb img {
	width: 44px; height: 44px; object-fit: cover; border-radius: 8px;
	border: 1px solid var(--line); display: block; margin: 0;
}
.rose-order-thumb--more {
	width: 44px; height: 44px; border-radius: 8px; background: var(--violet-soft);
	color: var(--violet-deep); font-weight: 800; font-size: 0.8rem;
	align-items: center; justify-content: center;
}

/* Dashboard stat cards. */
.rose-stats {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; margin: 0 0 1.6rem;
}
.rose-stat,
.woocommerce-account a.rose-stat {
	position: relative; overflow: hidden;
	display: flex; flex-direction: column; gap: 0.15rem;
	padding: 1.1rem 1.2rem; border-radius: var(--radius-lg);
	border: 1px solid var(--line);
	text-decoration: none !important; cursor: pointer;
	transition: transform var(--t), box-shadow var(--t);
}
.rose-stat:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.rose-stat *,
.rose-stat__label,
.rose-stat__value { text-decoration: none !important; }
.rose-stat__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 11px; margin-bottom: 0.4rem;
	background: #fff; box-shadow: var(--shadow-sm);
}
.rose-stat__value { font-size: 1.9rem; font-weight: 900; line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.rose-stat__label { font-size: 0.82rem; font-weight: 600; color: var(--muted); }

/* Per-status accent colours (kept specific enough to survive the link reset). */
.woocommerce-account .rose-stat--total    { background: var(--violet-soft); border-color: #DED3F5; }
.woocommerce-account .rose-stat--total .rose-stat__icon    { color: var(--violet); }
.woocommerce-account .rose-stat--done     { background: #E9F9EF; border-color: #CFF0DC; }
.woocommerce-account .rose-stat--done .rose-stat__icon     { color: #16A34A; }
.woocommerce-account .rose-stat--pending  { background: #FFF6E9; border-color: #F5E3C4; }
.woocommerce-account .rose-stat--pending .rose-stat__icon  { color: #D97706; }
.woocommerce-account .rose-stat--cancelled{ background: #FDECEC; border-color: #F6D2D2; }
.woocommerce-account .rose-stat--cancelled .rose-stat__icon{ color: #DC2626; }

/* Orders page: status filter tabs (All / Pending / Delivered / Cancelled). */
.rose-order-tabs {
	display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.4rem;
	padding-bottom: 1.1rem; border-bottom: 1px solid var(--line);
}
.rose-order-tab,
.woocommerce-account .rose-order-tab {
	display: inline-flex; align-items: center;
	padding: 0.5rem 1.1rem; border-radius: var(--radius-pill);
	border: 1px solid var(--line); background: #fff;
	color: var(--body) !important; font-size: 0.85rem; font-weight: 700; text-decoration: none !important;
	transition: all var(--t);
}
.rose-order-tab:hover { border-color: var(--violet); color: var(--violet) !important; }
.rose-order-tab.is-active { background: var(--violet); border-color: var(--violet); color: #fff !important; }

/* --- Addresses (My Account) -------------------------------------------- */
/* Intro line above the two address cards. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses + p,
.woocommerce-account .woocommerce-MyAccount-content > p:first-child { color: var(--muted); margin: 0 0 1.4rem; }

/* Two-up cards (billing + shipping) — flexbox is more predictable here than
   grid, since WooCommerce's .col2-set styles interfere with grid tracks. */
.woocommerce-account .woocommerce-Addresses {
	display: flex !important; flex-wrap: wrap; gap: 1.2rem; margin: 0; width: 100%;
}
.woocommerce-account .woocommerce-Addresses > * { flex: 1 1 0; min-width: 240px; }
.woocommerce-Addresses .woocommerce-Address,
.woocommerce-Addresses .col-1.woocommerce-Address,
.woocommerce-Addresses .col-2.woocommerce-Address,
.woocommerce-account .woocommerce-Addresses .col-1,
.woocommerce-account .woocommerce-Addresses .col-2 {
	/* Override WooCommerce's float/width so the grid controls the layout. */
	float: none !important; width: auto !important; margin: 0 !important; clear: none !important;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	padding: 1.4rem 1.5rem; box-shadow: var(--shadow-sm);
	display: flex; flex-direction: column;
}

/* Card header: title row (icon + name), with the edit/add button on its own
   line below — identical on both cards, so nothing ever wraps unevenly. */
.woocommerce-Address-title {
	display: block;
	margin: 0 0 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line);
}
.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	margin: 0 0 0.7rem; font-size: 1.05rem; font-weight: 800; color: var(--ink);
	display: flex; align-items: center; gap: 0.45rem;
}
.woocommerce-Address-title .edit {
	float: none !important; /* WooCommerce floats this right by default */
	display: inline-flex; align-items: center; gap: 0.35rem;
	padding: 0.45rem 0.9rem; border-radius: var(--radius-pill);
	background: var(--violet-soft); color: var(--violet-deep) !important;
	font-size: 0.8rem; font-weight: 700; text-decoration: none !important;
	transition: background var(--t), color var(--t);
}
.woocommerce-Address-title .edit:hover { background: var(--violet); color: #fff !important; }
/* A pin glyph before each address title. */
.woocommerce-Address-title h2::before,
.woocommerce-Address-title h3::before {
	content: ""; width: 20px; height: 20px; flex-shrink: 0;
	background: var(--violet); border-radius: 50%;
	-webkit-mask: center / 14px no-repeat url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"%3E%3Cpath d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5Z"/%3E%3C/svg%3E');
	mask: center / 14px no-repeat url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"%3E%3Cpath d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5Z"/%3E%3C/svg%3E');
}

/* Address body. */
.woocommerce-Address address {
	font-style: normal; color: var(--body); line-height: 1.7; margin: 0; font-size: 0.95rem;
}
/* Empty state ("You have not set up this type of address yet."). */
.woocommerce-Address p { font-style: normal; color: var(--muted); margin: 0; }

@media (max-width: 560px) {
	.woocommerce-Addresses { grid-template-columns: 1fr; }
}

/* --- Account details form ---------------------------------------------- */
/* Two-up rows for first/last name. */
.woocommerce-EditAccountForm .form-row-first { float: none !important; width: 48% !important; display: inline-block; margin-right: 3%; }
.woocommerce-EditAccountForm .form-row-last  { float: none !important; width: 48% !important; display: inline-block; margin-right: 0; }
.woocommerce-EditAccountForm .clear { display: none; }
.woocommerce-EditAccountForm label { font-weight: 600; font-size: 0.85rem; color: var(--ink); margin-bottom: 0.3rem; display: block; }
.woocommerce-EditAccountForm .woocommerce-input-wrapper { display: block; }
.woocommerce-EditAccountForm em { color: var(--muted); font-size: 0.8rem; font-style: normal; }

/* "Password change" fieldset as a soft tinted card. */
.woocommerce-EditAccountForm fieldset {
	margin: 1.6rem 0 0; padding: 1.4rem 1.5rem;
	background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.woocommerce-EditAccountForm fieldset legend {
	padding: 0; margin: 0 0 1rem; font-size: 1.02rem; font-weight: 800; color: var(--ink);
	display: flex; align-items: center; gap: 0.45rem; float: left; width: 100%;
}
.woocommerce-EditAccountForm fieldset legend::before {
	content: ""; width: 20px; height: 20px; flex-shrink: 0; background: var(--violet); border-radius: 50%;
	-webkit-mask: center / 13px no-repeat url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"%3E%3Cpath d="M17 8V7a5 5 0 0 0-10 0v1H5v14h14V8h-2Zm-8-1a3 3 0 0 1 6 0v1H9V7Zm3 11a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z"/%3E%3C/svg%3E');
	mask: center / 13px no-repeat url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"%3E%3Cpath d="M17 8V7a5 5 0 0 0-10 0v1H5v14h14V8h-2Zm-8-1a3 3 0 0 1 6 0v1H9V7Zm3 11a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z"/%3E%3C/svg%3E');
}
.woocommerce-EditAccountForm fieldset .form-row { clear: both; }

/* "Lost your password?" link inside the password card. */
.rose-forgot-pass { margin: 0.2rem 0 0; }
.rose-forgot-pass a { color: var(--violet) !important; font-weight: 600; font-size: 0.85rem; text-decoration: none !important; }
.rose-forgot-pass a:hover { color: var(--violet-deep) !important; text-decoration: underline !important; }

/* Save changes button. */
.woocommerce-EditAccountForm button[type="submit"] { margin-top: 1.4rem; }

/* --- "Log out" nav item gets its own colour ---------------------------- */
.woocommerce-MyAccount-navigation-link--customer-logout a {
	margin-top: 0.4rem; background: #FDECEC; color: #DC2626 !important;
}
.woocommerce-MyAccount-navigation-link--customer-logout a::before { background: #DC2626; opacity: 0.9; }
.woocommerce-MyAccount-navigation-link--customer-logout a:hover { background: #DC2626; color: #fff !important; }
.woocommerce-MyAccount-navigation-link--customer-logout a:hover::before { background: #fff; opacity: 1; }

@media (max-width: 640px) {
	.rose-stats { grid-template-columns: 1fr 1fr; }
	.woocommerce-EditAccountForm .form-row-first,
	.woocommerce-EditAccountForm .form-row-last { width: 100% !important; margin-right: 0; display: block; }
}

@media (max-width: 820px) {
	.woocommerce-account .woocommerce { grid-template-columns: 1fr; }
	/* Stack nav above content — clear the pinned columns/rows so they flow. */
	.woocommerce-account .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: auto; }
	.woocommerce-account .woocommerce-MyAccount-content { grid-column: 1; grid-row: auto; }
	.woocommerce-MyAccount-navigation { position: static; }
	.woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: wrap; }
	.woocommerce-MyAccount-navigation li a { padding: 0.6rem 0.85rem; font-size: 0.85rem; }
}

/* --- Phone: My Account clean app-style layout -------------------------- */
@media (max-width: 640px) {
	/* Drop the two-column grid entirely so nav + content are full-width blocks
	   (the grid was leaving an oversized column that overflowed the screen). */
	.woocommerce-account .woocommerce { display: block !important; }
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content { width: 100%; max-width: 100%; }
	.woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 1.2rem; }

	/* Make the content area a flat page (no outer card) so the cards INSIDE it
	   — order cards, address cards, form panels — read as clean single cards
	   instead of boxes-inside-a-box. */
	.woocommerce-account .woocommerce-MyAccount-content {
		background: transparent; border: 0; box-shadow: none; padding: 0;
	}
	/* Intro line above each section, tidy. */
	.woocommerce-MyAccount-content > .woocommerce-message,
	.woocommerce-MyAccount-content > p:first-child { margin-bottom: 1rem; }

	/* Nav pills scroll in one row instead of wrapping to several lines. */
	.woocommerce-MyAccount-navigation ul {
		flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
		align-items: center; gap: 0.4rem; padding-bottom: 0.3rem; scrollbar-width: none;
	}
	.woocommerce-MyAccount-navigation li { display: flex; align-items: center; }
	/* Log out is a plain pill in the horizontal row — drop its desktop top gap. */
	.woocommerce-MyAccount-navigation-link--customer-logout a { margin-top: 0; }
	.woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
	.woocommerce-MyAccount-navigation ul { cursor: grab; }
	.woocommerce-MyAccount-navigation ul.is-dragging { cursor: grabbing; user-select: none; }
	.woocommerce-MyAccount-navigation ul.is-dragging a { pointer-events: none; }
	.woocommerce-MyAccount-navigation li { flex: 0 0 auto; }
	.woocommerce-MyAccount-navigation li a { white-space: nowrap; font-size: 0.82rem; padding: 0.55rem 0.9rem; }

	/* Welcome banner a touch tighter. */
	.rose-account-hello { padding: 1.4rem 1.3rem; }

	/* Stat cards: 2 across, more compact. */
	.rose-stats { grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-bottom: 1.2rem; }
	.rose-stat { padding: 0.9rem 1rem; }
	.rose-stat__icon { width: 34px; height: 34px; margin-bottom: 0.3rem; }
	.rose-stat__value { font-size: 1.5rem; }
	.rose-stat__label { font-size: 0.75rem; }

	/* --- Orders page: each order row becomes a clean card --------------- */
	.woocommerce-orders-table { border: 0 !important; }
	.woocommerce-orders-table thead { display: none !important; }
	.woocommerce-orders-table, .woocommerce-orders-table tbody { display: block !important; }
	.woocommerce-orders-table tr {
		display: grid !important;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"products products"
			"date     status"
			"total    total"
			"action   action";
		gap: 0.6rem 0.8rem; align-items: center;
		border: 1px solid var(--line); border-radius: var(--radius-lg);
		padding: 1rem; margin-bottom: 0.9rem; background: #fff;
	}
	.woocommerce-orders-table__cell-order-products { grid-area: products; }
	.woocommerce-orders-table__cell-order-products::before { content: none !important; }
	.woocommerce-orders-table td {
		display: block !important; padding: 0 !important; border: 0 !important;
		width: auto !important; text-align: left !important; background: transparent !important;
	}
	.woocommerce-orders-table td::before {
		content: attr(data-title) ": "; font-weight: 700; color: var(--muted);
		font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em;
		display: block; margin-bottom: 2px;
	}
	.woocommerce-orders-table__cell-order-number { grid-area: date; }
	.woocommerce-orders-table__cell-order-date { grid-area: date; }
	.woocommerce-orders-table__cell-order-status { grid-area: status; justify-self: end; text-align: right !important; }
	.woocommerce-orders-table__cell-order-status::before { text-align: right; }
	.woocommerce-orders-table__cell-order-total { grid-area: total; font-weight: 700; color: var(--ink); }
	.woocommerce-orders-table__cell-order-actions { grid-area: action; }
	.woocommerce-orders-table__cell-order-actions::before { content: none; }
	.woocommerce-orders-table__cell-order-actions .button { width: 100%; text-align: center; }

	/* --- Addresses page: each address is a clean card, one per row ----- */
	.woocommerce-account .woocommerce-Addresses {
		grid-template-columns: 1fr !important; display: grid; gap: 1rem; margin: 0;
	}
	.woocommerce-account .woocommerce-Address {
		margin: 0; border: 1px solid var(--line); border-radius: var(--radius-lg);
		padding: 1.2rem; background: #fff;
	}
	/* Title row: heading left, Edit link below it — all flush-left & aligned. */
	.woocommerce-account .woocommerce-Address .woocommerce-Address-title {
		display: block; margin-bottom: 0.9rem;
	}
	.woocommerce-account .woocommerce-Address .woocommerce-Address-title h3 {
		margin: 0 0 0.7rem; font-size: 1.05rem;
	}
	.woocommerce-account .woocommerce-Address .woocommerce-Address-title .edit {
		display: inline-block; margin: 0;
	}
	.woocommerce-account .woocommerce-Address address {
		color: var(--body); line-height: 1.7; font-style: normal;
		margin: 0; padding-top: 0.9rem; border-top: 1px solid var(--line);
	}

	/* --- Account details / address forms: a single clean card -------- */
	.woocommerce-EditAccountForm,
	.woocommerce-address-fields,
	.woocommerce-account form.edit-account,
	.woocommerce-account form.woocommerce-address-fields__field-wrapper {
		border: 1px solid var(--line); border-radius: var(--radius-lg);
		padding: 1.3rem; background: #fff;
	}
	/* Full-width fields (no side-by-side squeeze on phones). */
	.woocommerce-EditAccountForm .form-row,
	.woocommerce-address-fields .form-row,
	.woocommerce-EditAccountForm .form-row-first,
	.woocommerce-EditAccountForm .form-row-last,
	.woocommerce-address-fields .form-row-first,
	.woocommerce-address-fields .form-row-last {
		width: 100% !important; float: none !important; margin-right: 0 !important;
	}
	/* The password-change fieldset shouldn't be another nested tinted box. */
	.woocommerce-EditAccountForm fieldset {
		border: 0; background: transparent; padding: 0; margin: 0.5rem 0 0;
	}
	.woocommerce-EditAccountForm fieldset legend { padding: 0; font-weight: 700; }
	.woocommerce-account form .button { width: 100%; margin-top: 0.5rem; }
}

/* --- Checkout top spacing ---------------------------------------------- */
/* The checkout content sits directly under the sticky header. Give the very
   first block (step indicator, coupon toggle, or a notice) clear breathing
   room so it never touches the menu bar. */
.checkout-steps,
.woocommerce-checkout .woocommerce > .woocommerce-form-coupon-toggle:first-child,
.woocommerce-checkout .woocommerce > .woocommerce-notices-wrapper:first-child:not(:empty) { margin-top: 1.5rem; }

.woocommerce-checkout .woocommerce-form-coupon-toggle { margin-bottom: 1.5rem; }

/* --- Phone: checkout form full-width, clean spacing -------------------- */
@media (max-width: 640px) {
	/* Stack First/Last name (and any paired fields) full-width. */
	.woocommerce-checkout .form-row-first,
	.woocommerce-checkout .form-row-last,
	.woocommerce-checkout .form-row.form-row-first,
	.woocommerce-checkout .form-row.form-row-last {
		width: 100% !important; float: none !important; margin-right: 0 !important;
	}
	/* The "Your order" summary sits in a soft card already — give it room. */
	.woocommerce-checkout .rose-checkout__summary { margin-top: 1.4rem; }
	/* Coupon + product read as ONE block: no gap between them. */
	.woocommerce-checkout #order_review { margin-top: 0; }
	.rose-checkout__summary .rose-coupon-block { margin: 0 0 0.2rem; }
	.woocommerce-checkout #order_review .shop_table { margin-top: 0; }

	/* Coupon input + Apply button side-by-side (button no longer wraps below).
	   Scoped to step 2 so it never overrides the step-1 hide rule. */
	.rose-checkout[data-step="2"] .rose-coupon-block {
		display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0.5rem;
	}
	.rose-coupon-block .form-row-first {
		flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; margin: 0 !important;
	}
	.rose-coupon-block .form-row-last {
		flex: 0 0 84px !important; width: 84px !important; margin: 0 !important;
	}
	.rose-coupon-block #coupon_code { width: 100% !important; }
	/* Smaller Apply button with a short "Apply" label. */
	.rose-coupon-block button[name="apply_coupon"] {
		width: 100% !important; padding: 0.6rem 0 !important; font-size: 0 !important; white-space: nowrap;
	}
	.rose-coupon-block button[name="apply_coupon"]::after {
		content: "Apply"; font-size: 0.8rem; font-weight: 700;
	}
}

/* --- Checkout order-review product thumbnail -------------------------- */
.rose-corev-thumb {
	display: inline-block; vertical-align: middle; margin-right: 0.6rem;
}
.rose-corev-thumb img {
	width: 40px; height: 40px; object-fit: cover; border-radius: 8px;
	border: 1px solid var(--line); display: inline-block; vertical-align: middle; margin: 0;
}
/* Align the product name cell so the thumbnail + text sit neatly together. */
.woocommerce-checkout-review-order-table .product-name,
#order_review .product-name { display: flex; align-items: center; flex-wrap: wrap; }

/* --- Checkout step indicator ------------------------------------------- */
.checkout-steps { margin-bottom: 2rem; }
.checkout-steps__inner {
	display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.1rem 1.5rem; box-shadow: var(--shadow-sm);
}
.cstep { display: flex; align-items: center; gap: 0.6rem; flex: 1; min-width: 150px; }
.cstep__num { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; background: var(--tint); color: var(--muted); }
.cstep__text { display: flex; flex-direction: column; line-height: 1.2; }
.cstep__text strong { color: var(--muted); font-size: 0.9rem; }
.cstep__text span { color: var(--muted); font-size: 0.75rem; }
.cstep--active .cstep__num { background: var(--violet); color: #fff; }
.cstep--active .cstep__text strong { color: var(--violet); }
.cstep--done .cstep__num { background: var(--violet-soft); color: var(--violet); }
.cstep--done .cstep__text strong { color: var(--ink); }
.cstep__sep { color: var(--muted); font-size: 1.4rem; opacity: 0.5; }

/* Phone: keep all three steps on ONE row (compact) instead of wrapping. */
@media (max-width: 640px) {
	.checkout-steps__inner {
		flex-wrap: nowrap; gap: 0; padding: 0.9rem 0.5rem; align-items: flex-start;
	}
	.cstep {
		flex: 1 1 0 !important; width: 0 !important; min-width: 0 !important;
		gap: 0.35rem; padding: 0 2px;
		flex-direction: column; align-items: center; text-align: center; overflow: hidden;
	}
	.cstep__text strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
	.cstep__num { width: 26px; height: 26px; font-size: 0.75rem; }
	.cstep__text { align-items: center; width: 100%; min-width: 0; }
	.cstep__text strong { font-size: 0.68rem; }
	/* Let the sub-label wrap to two lines instead of forcing the step wider. */
	.cstep__text span { font-size: 0.56rem; line-height: 1.15; white-space: normal; }
	/* The separators take too much room on a phone — hide them. */
	.cstep__sep { display: none; }
}

/* Shipping method: styled radio rows (native single-select toggle) */
#shipping_method { list-style: none; margin: 0; padding: 0; }
#shipping_method li { margin: 0 0 0.5rem; }
#shipping_method li label {
	display: flex; align-items: center; gap: 0.6rem; cursor: pointer;
	padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: var(--radius);
	transition: border-color var(--t), background var(--t);
}
#shipping_method li input[type="radio"] { accent-color: var(--violet); }
#shipping_method li input[type="radio"]:checked + label,
#shipping_method li label:has(input:checked) {
	border-color: var(--violet); background: var(--violet-soft);
}

/* Order review card polish */
.woocommerce-checkout #order_review { box-shadow: var(--shadow-sm); }
.woocommerce-checkout .shop_table .product-name { font-weight: 600; color: var(--ink); }
.woocommerce-checkout .order-total .amount { color: var(--violet); font-size: 1.2rem; white-space: nowrap; }
/* Keep the currency symbol from touching / clipping at the cell's right edge. */
.woocommerce-checkout .rose-checkout__summary .order-total td,
.woocommerce-checkout .order-total td { padding-right: 0.25rem; }

@media (max-width: 780px) {
	.checkout-steps__inner { gap: 0.8rem; }
	.cstep { min-width: 130px; }
	.cstep__sep { display: none; }
}

/* ======================================================================
   Order received / "Thank You" page
   The page after an order is placed (is_order_received_page). WooCommerce
   ships raw default markup here; give it the same clean-card language as the
   rest of the storefront — a success banner, clean overview rows, and the
   order-details / customer-details blocks as soft cards (matching the orders
   page). Base styling applies at all widths; a phone block below converts the
   order-details table into stacked cards.
   ====================================================================== */
.woocommerce-order { margin: 0 auto; }

/* --- Success banner: "Thank you. Your order has been received." --------- */
.woocommerce-order > .woocommerce-notice--success,
.woocommerce-order > p.woocommerce-thankyou-order-received {
	text-align: center; margin: 0 0 1.6rem; padding: 1.6rem 1.4rem 1.5rem;
	background: var(--soft-white); border: 1px solid var(--line);
	border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
	color: var(--ink); font-size: 1.15rem; font-weight: 700; line-height: 1.4;
}
/* A check glyph above the message — the "you're done" moment. No new asset. */
.woocommerce-order > .woocommerce-notice--success::before,
.woocommerce-order > p.woocommerce-thankyou-order-received::before {
	content: ""; display: block; width: 52px; height: 52px; margin: 0 auto 0.9rem;
	border-radius: 50%; background: var(--violet-soft);
	/* white check-mark drawn as a background image (violet stroke) */
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%237C5CE0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center;
}

/* --- Order overview: number / date / total / payment method ------------- */
.woocommerce-order .woocommerce-order-overview {
	list-style: none; margin: 0 0 1.6rem; padding: 1.2rem 1.4rem;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.woocommerce-order .woocommerce-order-overview li {
	border: 0 !important; padding: 0; margin: 0; float: none; text-align: left;
	display: flex; flex-direction: column; gap: 0.25rem;
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em;
	text-transform: uppercase; color: var(--muted); line-height: 1.3;
}
.woocommerce-order .woocommerce-order-overview li strong {
	font-size: 1rem; font-weight: 700; text-transform: none; letter-spacing: 0;
	color: var(--ink);
}

/* --- Order details + customer details: soft cards ----------------------- */
.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm); padding: 1.4rem 1.5rem; margin: 0 0 1.4rem;
}
.woocommerce-order .woocommerce-order-details__title,
.woocommerce-order .woocommerce-column__title {
	margin: 0 0 1rem; font-size: 1.15rem; color: var(--ink);
}

/* Order-details table: flat, no purple header / tint striping. */
.woocommerce-order .woocommerce-table--order-details {
	border: 0; margin: 0; width: 100%;
}
.woocommerce-order .woocommerce-table--order-details thead th {
	background: transparent; color: var(--muted);
	font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em;
	border: 0; border-bottom: 1px solid var(--line); padding: 0 0 0.7rem;
}
.woocommerce-order .woocommerce-table--order-details tbody td,
.woocommerce-order .woocommerce-table--order-details tbody th {
	background: transparent !important; border: 0; border-bottom: 1px solid var(--line);
	padding: 0.85rem 0; color: var(--body); vertical-align: top;
}
.woocommerce-order .woocommerce-table--order-details .product-name a {
	color: var(--ink); font-weight: 600;
}
.woocommerce-order .woocommerce-table--order-details tfoot th,
.woocommerce-order .woocommerce-table--order-details tfoot td {
	background: transparent !important; border: 0; border-top: 1px solid var(--line);
	padding: 0.7rem 0; color: var(--body);
}
.woocommerce-order .woocommerce-table--order-details tfoot th { color: var(--muted); font-weight: 700; }
.woocommerce-order .woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order .woocommerce-table--order-details tfoot tr:last-child td { padding-bottom: 0; }

/* Customer details block (billing address / phone / email, when shown). */
.woocommerce-order .woocommerce-customer-details address {
	font-style: normal; color: var(--body); line-height: 1.7;
	border: 0; padding: 0; margin: 0;
}

/* --- Phone: table → stacked cards, comfy spacing ------------------------ */
@media (max-width: 640px) {
	/* Breathing room under the sticky header (match checkout top gap). */
	.woocommerce-order { margin-top: 1.5rem; }

	/* Overview stacks into label/value rows. */
	.woocommerce-order .woocommerce-order-overview {
		grid-template-columns: 1fr; gap: 0.9rem; padding: 1.2rem 1.3rem;
	}
	.woocommerce-order .woocommerce-order-overview li {
		flex-direction: row; align-items: baseline; justify-content: space-between; gap: 0.8rem;
	}
	.woocommerce-order .woocommerce-order-overview li strong {
		text-align: right; font-size: 0.95rem;
	}

	/* Order-details table becomes stacked clean cards (like the orders page). */
	.woocommerce-order .woocommerce-table--order-details { display: block; }
	.woocommerce-order .woocommerce-table--order-details thead { display: none; }
	.woocommerce-order .woocommerce-table--order-details tbody,
	.woocommerce-order .woocommerce-table--order-details tfoot,
	.woocommerce-order .woocommerce-table--order-details tr { display: block; }

	/* Product row: name + line total on one row. */
	.woocommerce-order .woocommerce-table--order-details tbody tr {
		display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem;
		padding: 0.9rem 0; border-bottom: 1px solid var(--line);
	}
	.woocommerce-order .woocommerce-table--order-details tbody td {
		border: 0 !important; padding: 0 !important;
	}
	.woocommerce-order .woocommerce-table--order-details tbody td.product-total {
		text-align: right; white-space: nowrap; color: var(--ink); font-weight: 700;
	}

	/* tfoot rows: muted label left, value right. */
	.woocommerce-order .woocommerce-table--order-details tfoot tr {
		display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem;
		padding: 0.7rem 0; border: 0; border-top: 1px solid var(--line);
	}
	.woocommerce-order .woocommerce-table--order-details tfoot th,
	.woocommerce-order .woocommerce-table--order-details tfoot td {
		border: 0 !important; padding: 0 !important; text-align: left;
	}
	.woocommerce-order .woocommerce-table--order-details tfoot td { text-align: right; color: var(--ink); }
	/* The final total reads as the emphasis line. */
	.woocommerce-order .woocommerce-table--order-details tfoot .order-total th,
	.woocommerce-order .woocommerce-table--order-details tfoot .order-total td { font-size: 1.05rem; }
	.woocommerce-order .woocommerce-table--order-details tfoot .order-total td .amount { color: var(--violet); }
}