/* ==========================================================================
   Desibal — "warm heritage" design system. Hand-written, no framework.
   One self-hosted variable font for headings (Fraunces); body stays on the
   system font stack for performance. WooCommerce's bundled stylesheets are
   dequeued (see inc/woocommerce-hooks.php) so every WooCommerce structural
   class below is styled from scratch.
   ========================================================================== */

@font-face {
	font-family: "Fraunces";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/fraunces-variable.woff2") format("woff2");
}

:root {
	/* Warm blush palette — dusty rose accent + near-black on clean cream,
	   replacing the earlier rust/gold "warm heritage" direction. Gold is
	   kept only for its universal rating-star meaning (see
	   .desibal-rating__stars), not used as a brand/UI color anymore. */
	--color-bg: #fbf4ef;
	--color-bg-alt: #f3e9e2;
	--color-surface: #ffffff;
	--color-ink: #231f1c;
	--color-ink-soft: #6b625c;
	--color-border: #e8dfd8;

	--color-primary: #8c5a66;
	--color-primary-dark: #6e4550;
	--color-primary-light: #e3b8c2;
	--color-gold: #c98a2b;
	--color-gold-light: #e8b559;
	--color-accent-green: #55684a;

	--font-serif: "Fraunces", Georgia, "Times New Roman", serif;
	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--container-width: 1160px;
	--radius: 10px;
	--radius-lg: 22px;
	--radius-pill: 999px;

	--shadow-sm: 0 1px 2px rgba(43, 33, 27, 0.07), 0 1px 1px rgba(43, 33, 27, 0.05);
	--shadow-md: 0 10px 28px rgba(43, 33, 27, 0.12);
	--shadow-lg: 0 24px 60px rgba(43, 33, 27, 0.22);

	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.75rem;
	--space-4: 3rem;
	--space-5: 5rem;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-bg: #1c1712;
		--color-bg-alt: #241c15;
		--color-surface: #2a2119;
		--color-ink: #f3e9da;
		--color-ink-soft: #c9b8a4;
		--color-border: #3b2e22;
		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
		--shadow-md: 0 10px 28px rgba(0, 0, 0, 0.35);
		--shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);
	}
}

/* Reset ------------------------------------------------------------------ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-sans);
	font-size: 1.05rem;
	line-height: 1.65;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The reset above is meant for component/nav lists (header, footer, product
 * grids, etc.) — real prose content (page/post bodies, including WooCommerce's
 * own default Refund and Returns Policy template) still needs normal visible
 * bullets/numbers, otherwise list items read as indistinguishable text lines.
 */
.entry-content ul {
	list-style: disc;
	margin: 0 0 var(--space-2);
	padding-left: 1.4em;
}

.entry-content ol {
	list-style: decimal;
	margin: 0 0 var(--space-2);
	padding-left: 1.4em;
}

.entry-content li {
	margin-bottom: 0.3em;
}

a {
	color: var(--color-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--color-primary-dark);
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-serif);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 var(--space-2);
	color: var(--color-ink);
}

h1 {
	font-size: clamp(2.2rem, 4.5vw, 3.5rem);
	line-height: 1.06;
}

h2 {
	font-size: clamp(1.5rem, 3vw, 2.15rem);
}

h3 {
	font-size: 1.2rem;
}

p {
	margin: 0 0 var(--space-2);
}

.screen-reader-text {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	background: var(--color-primary);
	color: #fff;
	padding: var(--space-1) var(--space-2);
	z-index: 100;
}

.skip-link:focus {
	top: 0;
}

.container {
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--space-2);
}

/* Buttons ------------------------------------------------------------------ */
.button,
a.button,
button.button,
input.button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
#btn-razorpay,
#btn-razorpay-cancel {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 1px solid var(--color-ink);
	background: var(--color-ink);
	color: var(--color-bg);
	padding: 0.85rem 1.6rem;
	border-radius: var(--radius-pill);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	text-decoration: none;
	box-shadow: var(--shadow-sm);
	transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.button:hover,
a.button:hover,
button.button:hover,
input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
#btn-razorpay:hover {
	background: color-mix(in srgb, var(--color-ink) 82%, white);
	border-color: color-mix(in srgb, var(--color-ink) 82%, white);
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
	text-decoration: none;
	color: var(--color-bg);
}

/**
 * AJAX add-to-cart states. WooCommerce's own add-to-cart.js toggles
 * `.loading` while the request is in flight and `.added` once it succeeds;
 * we dropped WooCommerce's default stylesheet (which supplies the spinner
 * for these) so they need their own visual treatment here.
 */
.add_to_cart_button.loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}

.add_to_cart_button.loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1rem;
	height: 1rem;
	margin: -0.5rem 0 0 -0.5rem;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: desibal-spin 0.6s linear infinite;
}

@keyframes desibal-spin {
	to {
		transform: rotate(360deg);
	}
}

.add_to_cart_button.added::before {
	content: "\2713";
	margin-right: 0.3rem;
}

/**
 * WooCommerce auto-inserts this "View cart" link as a sibling right after
 * the Add to Cart button on success — redundant here since the mini-cart
 * drawer already opens with its own prominent View Cart/Checkout buttons.
 */
.added_to_cart.wc-forward {
	display: none;
}

/**
 * Bare `.button--ghost`/`.buy-now-button` are class-only selectors
 * (specificity 0,1,0) but the base `.button` rule above matches via
 * compound element+class selectors like `button.button` (0,1,1) — higher
 * specificity wins regardless of source order, so without the matching
 * `a.button--ghost`/`button.button--ghost` compounds below, these overrides
 * silently lose everywhere the page isn't wrapped in `.woocommerce` (e.g.
 * the homepage Featured Products loop, which isn't WooCommerce-page
 * context at all). Matching the same element+class specificity here means
 * these overrides work everywhere, with no dependency on ancestor context.
 */
.button--ghost,
a.button--ghost,
button.button--ghost,
input.button--ghost,
.woocommerce a.button--ghost,
.woocommerce button.button--ghost,
.woocommerce input.button--ghost,
#btn-razorpay-cancel {
	background: transparent;
	color: var(--color-ink);
	border-color: var(--color-border);
	box-shadow: none;
}

.button--ghost:hover,
a.button--ghost:hover,
button.button--ghost:hover,
input.button--ghost:hover,
.woocommerce a.button--ghost:hover,
.woocommerce button.button--ghost:hover,
.woocommerce input.button--ghost:hover,
#btn-razorpay-cancel:hover {
	background: var(--color-surface);
	color: var(--color-ink);
	border-color: var(--color-ink-soft);
}

/**
 * Buy Now: neutral ink outline (not the brand accent color) — real jewelry
 * DTC sites (Mejuri, Gorjana) skip a colored secondary button entirely, so
 * this stays visually quiet and lets Add to Cart's solid black keep top
 * billing, rather than competing with it as a second colored button.
 */
.buy-now-button,
a.buy-now-button,
button.buy-now-button,
.woocommerce a.buy-now-button,
.woocommerce button.buy-now-button {
	border-color: var(--color-ink);
	color: var(--color-ink);
}

.buy-now-button:hover,
a.buy-now-button:hover,
button.buy-now-button:hover,
.woocommerce a.buy-now-button:hover,
.woocommerce button.buy-now-button:hover {
	background: var(--color-ink);
	border-color: var(--color-ink);
	color: var(--color-bg);
}

/* Site header ---------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 30;
	background: color-mix(in srgb, var(--color-bg) 92%, transparent);
	backdrop-filter: saturate(160%) blur(8px);
	border-bottom: 1px solid transparent;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.site-header.is-scrolled {
	border-color: var(--color-border);
	box-shadow: var(--shadow-sm);
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding-block: var(--space-2);
}

.site-branding a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--color-ink);
	font-family: var(--font-serif);
	font-size: 1.8rem;
	font-weight: 700;
	text-decoration: none;
	letter-spacing: -0.02em;
}

.site-branding__mark {
	flex-shrink: 0;
}

/**
 * Distraction-free checkout header — logo + a small reassurance note, no
 * nav/search/cart to click away through. See is_checkout() branch in
 * template-parts/header/site-header.php.
 */
.site-header__secure-note {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	color: var(--color-ink-soft);
	font-size: 0.85rem;
	font-weight: 600;
}

.site-header__secure-note svg {
	width: 1.1rem;
	height: 1.1rem;
	color: var(--color-accent-green);
	flex-shrink: 0;
}

.primary-nav {
	position: relative;
	margin-inline-start: auto;
}

.nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: transparent;
	cursor: pointer;
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
	content: "";
	display: block;
	width: 1.25rem;
	height: 2px;
	background: currentColor;
	position: relative;
}

.nav-toggle__bar::before {
	position: absolute;
	top: -6px;
}

.nav-toggle__bar::after {
	position: absolute;
	top: 6px;
}

#primary-menu {
	display: none;
	flex-direction: column;
	position: absolute;
	right: 0;
	top: calc(100% + 0.5rem);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	min-width: 200px;
	padding: var(--space-1);
	z-index: 20;
}

#primary-menu.is-open {
	display: flex;
}

#primary-menu li a {
	display: block;
	padding: var(--space-1) var(--space-2);
	color: var(--color-ink);
	text-decoration: none;
	border-radius: var(--radius);
}

#primary-menu li a:hover {
	background: var(--color-bg-alt);
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin-inline-start: var(--space-2);
}

.icon-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--color-ink);
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.icon-button:hover {
	background: var(--color-bg-alt);
}

.icon-button svg {
	width: 1.3rem;
	height: 1.3rem;
}

.cart-count {
	position: absolute;
	top: 0.15rem;
	right: 0.15rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.1rem;
	height: 1.1rem;
	padding-inline: 0.2rem;
	border-radius: 999px;
	background: var(--color-primary);
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
	line-height: 1;
}

.header-search {
	display: none;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	order: 10;
	margin-top: var(--space-1);
	padding-bottom: var(--space-1);
}

.header-search.is-open {
	display: flex;
}

.header-search input[type="search"] {
	flex: 1;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-ink);
	font-family: inherit;
	font-size: 1rem;
}

.header-search input[type="search"]:focus {
	outline: none;
	border-color: var(--color-primary);
}

.header-search button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	flex-shrink: 0;
	border: none;
	border-radius: 50%;
	background: var(--color-primary);
	color: #fff;
	cursor: pointer;
}

.header-search button svg {
	width: 1.1rem;
	height: 1.1rem;
}

@media (min-width: 720px) {
	.nav-toggle {
		display: none;
	}

	#primary-menu {
		display: flex;
		flex-direction: row;
		position: static;
		border: none;
		box-shadow: none;
		background: transparent;
		padding: 0;
		gap: var(--space-3);
	}

	#primary-menu li a:hover {
		background: transparent;
		color: var(--color-primary);
	}
}

/* Breadcrumbs ------------------------------------------------------------ */
.breadcrumbs,
.woocommerce-breadcrumb {
	padding-block: var(--space-2);
	font-size: 0.85rem;
	color: var(--color-ink-soft);
}

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.breadcrumbs li:not(:last-child)::after {
	content: "/";
	margin-inline-start: 0.35rem;
	color: var(--color-border);
}

.woocommerce-breadcrumb a {
	color: var(--color-ink-soft);
	text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
	color: var(--color-primary);
}

/* Hero -------------------------------------------------------------------- */
.hero {
	position: relative;
	isolation: isolate;
	padding-block: var(--space-5);
	text-align: center;
	color: #fdf6ea;
	overflow: hidden;
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Temporary: hotlinked to the live product photo until dedicated hero
	 * photography exists (see inc/site-content.php doc comment). Swap for a
	 * theme-local file the same way as any other image once that's ready. */
	background-image: linear-gradient(180deg, rgba(20, 12, 14, 0.15), rgba(20, 12, 14, 0.55)),
		url("https://desibal.com/wp-content/uploads/2026/08/Rihanna-Hoop-Earrings.jpeg");
	background-size: cover;
	background-position: center 30%;
}

.hero__eyebrow {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-primary-light);
	margin-bottom: var(--space-2);
}

.hero h1 {
	color: #fff;
	max-width: 42ch;
	margin-inline: auto;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}

.hero__lede {
	max-width: 55ch;
	margin-inline: auto;
	color: rgba(253, 246, 234, 0.88);
	font-size: 1.1rem;
}

.hero__actions {
	display: flex;
	justify-content: center;
	gap: var(--space-2);
	margin-top: var(--space-3);
	flex-wrap: wrap;
}

/**
 * Hero buttons sit on a photo, not a flat color, so a thin/transparent
 * outline can disappear depending on what's behind it. Both get a solid
 * backdrop instead — Shop Now already had one from the base .button rule,
 * See Products gets a dark frosted fill here so it stays legible no matter
 * which part of the photo it lands on.
 */
.hero .button--ghost {
	background: rgba(20, 12, 14, 0.45);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.7);
}

.hero .button--ghost:hover {
	background: rgba(20, 12, 14, 0.65);
	color: #fff;
	border-color: #fff;
}

/* Sections ------------------------------------------------------------------ */
.featured-products,
.trust-signals {
	padding-block: var(--space-4);
}

#featured-heading,
#trust-heading {
	text-align: center;
}

.section-lede {
	text-align: center;
	max-width: 55ch;
	margin: -0.5rem auto var(--space-3);
	color: var(--color-ink-soft);
}

.featured-products__cta {
	text-align: center;
	margin-top: var(--space-3);
}

.trust-signals__list {
	display: grid;
	gap: var(--space-3);
	grid-template-columns: 1fr;
	text-align: center;
	margin-top: var(--space-3);
}

.trust-signals__item {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-3) var(--space-2);
	box-shadow: var(--shadow-sm);
}

.trust-signals__icon {
	width: 2.5rem;
	height: 2.5rem;
	margin: 0 auto var(--space-1);
	color: var(--color-primary);
}

.trust-signals__item strong {
	display: block;
	font-family: var(--font-serif);
	font-size: 1.05rem;
	font-weight: 600;
	margin-bottom: 0.2rem;
}

.trust-signals__item span {
	color: var(--color-ink-soft);
	font-size: 0.92rem;
}

@media (min-width: 720px) {
	.trust-signals__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Product grid & cards (WooCommerce structural classes, styled from scratch) */
ul.products {
	display: grid;
	gap: var(--space-3);
	grid-template-columns: repeat(2, 1fr);
	margin-top: var(--space-3);
}

@media (min-width: 720px) {
	ul.products.columns-3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

ul.products li.product {
	list-style: none;
}

.product-card__inner {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-2);
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	box-shadow: var(--shadow-sm);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card__inner:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

.product-card__inner a {
	text-decoration: none;
	color: inherit;
}

/**
 * `.product-card__inner a` above and the base `.button` rule's `a.button`
 * both match Add to Cart's <a class="button..."> at equal specificity, so
 * whichever is declared later in the file wins — this restores the
 * button's own light text color when that's the loser. Ghost-style
 * buttons (Buy Now) are excluded since they intentionally keep the
 * accent-colored text from their own rule in the resting state.
 */
.product-card__inner a.button:not(.button--ghost) {
	color: var(--color-bg);
}

.product-card__inner img {
	border-radius: var(--radius);
	margin-bottom: 0.4rem;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/*
 * Subtle zoom-on-hover, contained by overflow:hidden on the link that wraps
 * the image so it doesn't spill outside the rounded corners. The image sits
 * flush at the anchor's top with only main.css's own 0.4rem bottom margin as
 * clearance before the title below, so the scale is kept small (1.04) to
 * stay within that gap rather than visibly overlapping the title text.
 */
.woocommerce-loop-product__link {
	display: block;
	overflow: hidden;
	border-radius: var(--radius);
}

.woocommerce-loop-product__link img {
	transition: transform 0.4s ease;
}

.product-card__inner:hover .woocommerce-loop-product__link img {
	transform: scale(1.04);
}

.product-card__inner .woocommerce-loop-product__title,
.product-card__inner h2,
.product-card__inner h3 {
	font-size: 1.05rem;
	font-family: var(--font-serif);
	font-weight: 600;
	margin: 0;
}

.product-card__inner .price {
	font-weight: 700;
	color: var(--color-primary);
	font-size: 1.05rem;
}

/**
 * WooCommerce always wraps sale prices as <del>original</del> <ins>sale</ins>
 * — <ins> carries a browser-default underline that was never overridden
 * (showed up as an underlined sale price), and nothing distinguished the
 * two prices in size/weight on the single product page, just color.
 */
.price ins {
	text-decoration: none;
}

.price del {
	text-decoration: line-through;
}

.product-card__inner .price del {
	color: var(--color-ink-soft);
	opacity: 0.7;
	font-weight: 400;
}

.product-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: auto;
}

.product-card__inner .button {
	align-self: flex-start;
}

.onsale {
	display: inline-block;
	background: var(--color-primary);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	margin-bottom: 0.35rem;
}

.desibal-rating {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: -0.1rem 0 0.1rem;
}

.desibal-rating__stars {
	display: inline-flex;
	gap: 0.1rem;
}

.desibal-rating__stars svg {
	width: 0.9rem;
	height: 0.9rem;
	color: var(--color-border);
}

.desibal-rating__stars .is-filled svg {
	color: var(--color-gold);
}

.desibal-rating__count {
	font-size: 0.8rem;
	color: var(--color-ink-soft);
}

/**
 * Review-form star picker. WooCommerce's own single-product.js progressively
 * enhances the real #rating <select> into this `p.stars` widget (5 links,
 * text "1 of 5 stars" etc for screen readers) and toggles `.active`/
 * `.selected` classes on click — we only need to supply the visual styling.
 * Core WooCommerce does this with an icon webfont via its own stylesheet,
 * which this theme deliberately doesn't load (see woocommerce_enqueue_styles
 * filter in inc/woocommerce-hooks.php); this uses plain unicode stars
 * instead, following the same hover/active sibling-selector logic so the
 * fill state matches what was clicked with no JS changes needed.
 */
.comment-form-rating .stars {
	display: flex;
	gap: 0.15em;
	margin: 0.5rem 0;
}

.comment-form-rating .stars a {
	position: relative;
	display: inline-block;
	width: 1.4rem;
	height: 1.4rem;
	text-indent: -999em;
	overflow: hidden;
	text-decoration: none;
}

.comment-form-rating .stars a::before {
	content: "\2606";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 1.4rem;
	height: 1.4rem;
	text-indent: 0;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--color-border);
}

.comment-form-rating .stars:hover a::before {
	content: "\2605";
	color: var(--color-gold);
}

.comment-form-rating .stars a:hover ~ a::before {
	content: "\2606";
	color: var(--color-border);
}

.comment-form-rating .stars.selected a:not(.active)::before,
.comment-form-rating .stars.selected a.active::before {
	content: "\2605";
	color: var(--color-gold);
}

.comment-form-rating .stars.selected a.active ~ a::before {
	content: "\2606";
	color: var(--color-border);
}

/* Single product ----------------------------------------------------------- */
.single-product .summary {
	margin-top: var(--space-3);
}

.single-product .product_title {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.single-product .price {
	font-size: 1.5rem;
	color: var(--color-primary);
	font-weight: 700;
}

/**
 * On sale, the original price should read as secondary information, not
 * compete with the actual (lower) price a customer will pay — smaller,
 * muted, and un-bolded, same hierarchy already used on product cards.
 */
.single-product .price del {
	font-size: 1.05rem;
	font-weight: 400;
	color: var(--color-ink-soft);
	opacity: 0.7;
	margin-right: 0.4rem;
}

.single-product .price ins {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-primary);
}

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

.woocommerce-product-gallery__wrapper {
	position: relative;
}

.woocommerce-product-gallery img {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

/*
 * Thumbnail strip WooCommerce's gallery JS (wc-single-product, FlexSlider)
 * injects client-side when a product has more than one image — invisible
 * without this since we dequeued WooCommerce's own CSS.
 */
.flex-control-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: var(--space-2) 0 0;
	padding: 0;
	list-style: none;
}

.flex-control-nav li {
	width: 4rem;
}

.flex-control-nav img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--radius);
	border: 2px solid transparent;
	cursor: pointer;
	opacity: 0.65;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.flex-control-nav .flex-active img,
.flex-control-nav img:hover {
	opacity: 1;
	border-color: var(--color-primary);
}

/*
 * WooCommerce's own zoom-trigger markup/icon relies on its bundled CSS
 * (dequeued in inc/woocommerce-hooks.php) — without this it renders as a
 * bare magnifying-glass glyph in the document flow. Style it as a small
 * circular button instead.
 */
.woocommerce-product-gallery__trigger {
	position: absolute;
	top: var(--space-1);
	right: var(--space-1);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	background: rgba(255, 255, 255, 0.92);
	border-radius: 50%;
	box-shadow: var(--shadow-sm);
	text-decoration: none;
	font-size: 1rem;
}

.single-product .woocommerce-product-details__short-description {
	color: var(--color-ink-soft);
}

.woocommerce-product-attributes.shop_attributes {
	width: 100%;
	max-width: 45ch;
	border-collapse: collapse;
	margin-top: var(--space-2);
}

.woocommerce-product-attributes.shop_attributes th,
.woocommerce-product-attributes.shop_attributes td {
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--color-border);
	text-align: left;
	vertical-align: top;
}

.woocommerce-product-attributes.shop_attributes th {
	width: 40%;
	font-weight: 600;
	color: var(--color-ink);
}

.woocommerce-product-attributes.shop_attributes td {
	color: var(--color-ink-soft);
}

.woocommerce-product-attributes.shop_attributes p {
	margin: 0;
}

/* Forms, cart, checkout (unstyled by WooCommerce core CSS, so styled here) - */
.woocommerce form .form-row {
	margin-bottom: var(--space-2);
}

.woocommerce form label {
	display: block;
	margin-bottom: 0.3rem;
	font-weight: 600;
	font-size: 0.92rem;
}

.woocommerce form input.input-text,
.woocommerce form select,
.woocommerce form textarea,
.woocommerce table.shop_table input.qty {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface);
	color: var(--color-ink);
	font-family: inherit;
	font-size: 1rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.woocommerce form input.input-text:focus,
.woocommerce form select:focus,
.woocommerce form textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

/**
 * WooCommerce's own checkout.js already adds .woocommerce-invalid to a
 * field's .form-row the moment it fails validation (required/email/phone) —
 * it just ships with no visual treatment, so a customer gets no signal
 * until they scroll up to the one consolidated error notice at the top.
 */
.woocommerce form .form-row.woocommerce-invalid label {
	color: var(--color-primary);
}

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid textarea {
	border-color: var(--color-primary);
	background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
}

.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select,
.woocommerce form .form-row.woocommerce-validated textarea {
	border-color: var(--color-accent-green);
}

/**
 * Country is forced to a hidden field (see woocommerce_checkout_fields in
 * inc/woocommerce-hooks.php) since selling/shipping only covers India —
 * hidden inputs render fine on their own, but WooCommerce's form-field
 * template still prints the field's <label>, leaving an orphaned
 * "Country / Region *" caption with nothing under it. Hide the whole row.
 * State stays visible (restricted to Haryana only via the woocommerce_states
 * filter) so the customer can still see it confirmed, not hidden alongside it.
 */
#billing_country_field,
#shipping_country_field {
	display: none;
}

table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--space-3);
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

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

table.shop_table th {
	font-family: var(--font-serif);
	font-weight: 600;
	background: var(--color-bg-alt);
}

/**
 * The cart table has 6 columns (remove/thumbnail/name/price/quantity/
 * subtotal) — WooCommerce's own stylesheet normally collapses a table
 * carrying .shop_table_responsive into a stacked card layout below ~700px
 * (using the data-title attributes cart.php already puts on each <td> for
 * exactly this), but that stylesheet is dequeued sitewide (see
 * woocommerce_enqueue_styles filter in inc/woocommerce-hooks.php) in favour
 * of this theme's own CSS — which never added the mobile half of that
 * pattern, so the 6-column table just stayed full width and forced
 * horizontal scroll on the whole page. The order-review and order-details
 * tables elsewhere only have 2 columns (Product/Total) so they were never
 * at risk the same way and don't need this.
 */
@media (max-width: 699px) {
	table.shop_table_responsive thead {
		display: none;
	}

	table.shop_table_responsive tr {
		position: relative;
		display: block;
		padding: var(--space-2);
		border-bottom: 1px solid var(--color-border);
	}

	table.shop_table_responsive td {
		display: block;
		padding: 0.2rem 0;
		border-bottom: none;
	}

	table.shop_table_responsive td[data-title]::before {
		content: attr(data-title) ": ";
		font-weight: 600;
		color: var(--color-ink-soft);
	}

	table.shop_table_responsive td.product-remove {
		position: absolute;
		top: var(--space-2);
		right: var(--space-2);
		padding: 0;
	}

	table.shop_table_responsive td.product-thumbnail {
		display: inline-block;
		vertical-align: middle;
		margin-right: var(--space-2);
	}

	table.shop_table_responsive td.product-thumbnail img {
		width: 60px;
		height: 60px;
		object-fit: cover;
		border-radius: var(--radius);
	}

	table.shop_table_responsive td.product-name {
		display: inline-block;
		vertical-align: middle;
		width: calc(100% - 76px);
	}
}

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

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

/**
 * The "Have a coupon?" prompt reuses the same .woocommerce-info notice
 * markup as real alert messages elsewhere — boxed, bordered, shadowed —
 * which reads as "something happened" rather than "here's an optional
 * action." Scoped to this specific toggle so genuine info notices
 * elsewhere (e.g. cart/checkout) keep their normal treatment.
 */
.woocommerce-form-coupon-toggle .woocommerce-info {
	background: none;
	border-left: none;
	box-shadow: none;
	padding: 0;
	margin-bottom: var(--space-3);
	font-size: 0.92rem;
	color: var(--color-ink-soft);
}

.woocommerce-form-coupon-toggle .showcoupon {
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: underline;
}

/* Footer -------------------------------------------------------------------- */
.site-footer {
	position: relative;
	background: var(--color-ink);
	color: rgba(251, 243, 230, 0.82);
	margin-top: var(--space-5);
}

.site-footer::before {
	content: "";
	display: block;
	height: 4px;
	background: linear-gradient(90deg, var(--color-primary), var(--color-gold), var(--color-accent-green));
}

.site-footer a {
	color: #fdf6ea;
}

.site-footer__inner {
	padding-block: var(--space-4);
	display: grid;
	gap: var(--space-3);
}

@media (min-width: 720px) {
	.site-footer__inner {
		grid-template-columns: 1.2fr 0.7fr 0.9fr 0.9fr 0.9fr;
	}

	.site-footer__copy {
		grid-column: 1 / -1;
	}
}

.site-footer h2 {
	color: #fff;
	font-size: 1.05rem;
	margin-bottom: var(--space-1);
}

.site-footer__about strong {
	font-family: var(--font-serif);
	font-size: 1.3rem;
	color: #fff;
}

.site-footer address {
	font-style: normal;
	color: rgba(251, 243, 230, 0.65);
}

.footer-nav ul,
.footer-info ul {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.footer-info ul {
	color: rgba(251, 243, 230, 0.72);
	font-size: 0.92rem;
}

.site-footer__copy {
	color: rgba(251, 243, 230, 0.55);
	font-size: 0.875rem;
	margin: 0;
	padding-top: var(--space-2);
	border-top: 1px solid rgba(251, 243, 230, 0.12);
}

/* 404 ------------------------------------------------------------------------ */
.error-404 {
	padding-block: var(--space-4);
	text-align: center;
}

/* Announcement bar --------------------------------------------------------- */
.announcement-bar {
	background: var(--color-ink);
	color: var(--color-primary-light);
	text-align: center;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 0.55rem var(--space-2);
}

/* Brand story ---------------------------------------------------------------- */
.brand-story {
	padding-block: var(--space-4);
}

.brand-story__inner {
	display: grid;
	gap: var(--space-4);
	align-items: center;
}

.brand-story__image {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 55%;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

.brand-story__text h2 {
	margin-bottom: var(--space-2);
}

.brand-story__text p {
	color: var(--color-ink-soft);
	font-size: 1.05rem;
	line-height: 1.7;
	max-width: 42ch;
}

@media (min-width: 720px) {
	.brand-story__inner {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-5);
	}

	.brand-story__image {
		aspect-ratio: 1 / 1;
	}
}

/* How it works -------------------------------------------------------------- */
.how-it-works {
	padding-block: var(--space-4);
	background: var(--color-bg-alt);
}

.how-it-works__list {
	display: grid;
	gap: var(--space-3);
	grid-template-columns: 1fr;
	margin: var(--space-3) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

.how-it-works__item {
	position: relative;
	text-align: center;
	padding: var(--space-3) var(--space-2);
}

.how-it-works__item::before {
	counter-increment: step;
	content: counter(step);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0 auto var(--space-2);
	border-radius: 50%;
	background: var(--color-primary);
	color: #fff;
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 1.15rem;
}

.how-it-works__item strong {
	display: block;
	font-family: var(--font-serif);
	font-size: 1.1rem;
	margin-bottom: 0.25rem;
}

.how-it-works__item span {
	color: var(--color-ink-soft);
	font-size: 0.92rem;
}

@media (min-width: 720px) {
	.how-it-works__list {
		grid-template-columns: repeat(3, 1fr);
	}

	.how-it-works__item:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 1.4rem;
		left: calc(50% + 2.75rem);
		width: calc(100% - 2.75rem);
		height: 1px;
		background: var(--color-border);
	}
}

/* Single product: two-column layout ----------------------------------------- */
@media (min-width: 900px) {
	div.product.type-product {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--space-4);
		align-items: start;
	}

	div.product.type-product .woocommerce-tabs,
	div.product.type-product .related.products,
	div.product.type-product .upsells.products {
		grid-column: 1 / -1;
	}

	/**
	 * WooCommerce outputs the sale badge (.onsale) as a direct sibling of
	 * .images/.summary, hooked in before either of them. Left in normal
	 * grid flow, it auto-places into its own grid cell and — since a grid
	 * item's inline-block display gets "blockified" to block per spec — it
	 * stretches to fill the entire column width instead of sitting as a
	 * small ribbon. Taking it out of grid flow with absolute positioning
	 * puts it back to a normal-sized badge overlaid on the product image
	 * corner, which is what it's meant to look like.
	 */
	div.product.type-product {
		position: relative;
	}

	div.product.type-product > .onsale {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		width: auto;
	}
}

.stock {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0.25rem 0.7rem;
	border-radius: var(--radius-pill);
}

.stock.in-stock {
	background: color-mix(in srgb, var(--color-accent-green) 16%, transparent);
	color: var(--color-accent-green);
}

.stock.out-of-stock {
	background: color-mix(in srgb, var(--color-primary) 14%, transparent);
	color: var(--color-primary);
}

.product_meta {
	margin-top: var(--space-2);
	font-size: 0.88rem;
	color: var(--color-ink-soft);
}

.product_meta > span {
	display: block;
	margin-bottom: 0.25rem;
}

/* Quantity stepper ------------------------------------------------------------ */
.quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	overflow: hidden;
	background: var(--color-surface);
}

.quantity .qty {
	width: 3.2rem;
	flex-shrink: 0;
	border: none !important;
	border-radius: 0 !important;
	text-align: center;
	-moz-appearance: textfield;
}

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

/**
 * flex-shrink: 0 matters here specifically — without it, these buttons
 * quietly compress below their set width whenever the surrounding flex
 * context is tight (e.g. the cart table's narrower quantity cell), which
 * is exactly how they ended up as ~23-27px tap targets on mobile despite
 * this width, well under the ~44px minimum recommended for touch.
 */
.quantity__step {
	border: none;
	background: transparent;
	color: var(--color-ink);
	width: 2.75rem;
	flex-shrink: 0;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.quantity__step:hover {
	background: var(--color-bg-alt);
}

.single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
}

/**
 * Real jewelry DTC sites (Mejuri, Gorjana, Kendra Scott) skip a quantity
 * selector on the product page entirely — buying multiples of the exact
 * same piece is rare, so it's one less decision before Add to Cart. Hidden
 * here rather than removed from the markup: the input keeps its default
 * value of 1 and still submits normally, and quantity stays editable on the
 * Cart page as usual.
 */
.single-product form.cart .quantity {
	display: none;
}

/**
 * Groups Add to Cart + Buy Now so they wrap as a pair rather than
 * independently — without this, Buy Now could drop to its own line while
 * Add to Cart stayed attached to the quantity stepper above it.
 */
.pdp-cart-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
}

/* Trust badges under Add to Cart --------------------------------------------- */
.product-trust-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: var(--space-3) 0;
	padding-top: var(--space-2);
	border-top: 1px solid var(--color-border);
}

.product-trust-badges li {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.85rem;
	color: var(--color-ink-soft);
}

.product-trust-badges svg {
	width: 1.2rem;
	height: 1.2rem;
	color: var(--color-primary);
	flex-shrink: 0;
}

/* Shipping/payment/returns accordion (single product) ------------------------ */
.product-info-accordion {
	max-width: 45ch;
	margin-top: var(--space-2);
}

.product-info-accordion details {
	border-bottom: 1px solid var(--color-border);
}

.product-info-accordion summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 0;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.product-info-accordion summary::-webkit-details-marker {
	display: none;
}

.product-info-accordion summary::after {
	content: "+";
	font-size: 1.2rem;
	color: var(--color-ink-soft);
	transition: transform 0.2s ease;
}

.product-info-accordion details[open] summary::after {
	transform: rotate(45deg);
}

.product-info-accordion p {
	margin: 0 0 0.9rem;
	color: var(--color-ink-soft);
	font-size: 0.92rem;
}

/* WooCommerce tabs ------------------------------------------------------------ */
.woocommerce-tabs {
	margin-top: var(--space-4);
}

.woocommerce-tabs ul.tabs {
	display: flex;
	gap: var(--space-3);
	border-bottom: 1px solid var(--color-border);
	margin-bottom: var(--space-3);
}

.woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 0.75rem 0;
	color: var(--color-ink-soft);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
	color: var(--color-ink);
	border-bottom-color: var(--color-primary);
}

.woocommerce-tabs .panel {
	max-width: 70ch;
}

.woocommerce-tabs .panel:not(.wc-tab-active) {
	display: none;
}

section.related.products,
section.upsells.products {
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
}

/* Cart page: two-column layout ------------------------------------------------ */
.woocommerce-cart .woocommerce {
	display: grid;
	gap: var(--space-3);
}

@media (min-width: 900px) {
	.woocommerce-cart .woocommerce {
		grid-template-columns: 2fr 1fr;
		align-items: start;
	}

	/*
	 * .woocommerce also wraps an always-present (often empty)
	 * .woocommerce-notices-wrapper as a 3rd child before the cart form —
	 * without explicit placement, grid auto-placement shunts the cart form
	 * itself into the narrow second column. Pin all three explicitly.
	 */
	.woocommerce-cart .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
	}

	.woocommerce-cart .woocommerce-cart-form {
		grid-column: 1;
		grid-row: 2;
	}

	.woocommerce-cart .cart-collaterals {
		grid-column: 2;
		grid-row: 2;
	}
}

.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	background: var(--color-bg-alt);
	color: var(--color-primary) !important;
	text-decoration: none !important;
	font-size: 1.1rem;
	line-height: 1;
}

.product-remove a.remove:hover {
	background: var(--color-primary);
	color: #fff !important;
}

.cart .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.cart .coupon .input-text {
	width: auto;
	min-width: 180px;
}

tr.actions .button {
	margin-top: var(--space-1);
}

/**
 * Quantity changes recalculate the cart automatically (see main.js) once JS
 * has run, making the manual "Update cart" button redundant — hidden only
 * behind the js-cart-quantity-live body class main.js adds, so the button
 * (and full working functionality) stays put if JS fails to load.
 */
body.js-cart-quantity-live .woocommerce-cart-form .actions button[name="update_cart"] {
	display: none;
}

body.cart-is-updating .woocommerce-cart-form,
body.cart-is-updating .cart-collaterals {
	opacity: 0.6;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.cart-collaterals {
	position: sticky;
	top: calc(4.5rem + var(--space-2));
}

.cart-collaterals .cart_totals,
#order_review {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-3);
	box-shadow: var(--shadow-sm);
}

.cart_totals h2,
#order_review_heading {
	font-size: 1.2rem;
}

.cart_totals table,
#order_review table {
	box-shadow: none;
	margin-bottom: var(--space-2);
}

.wc-proceed-to-checkout .checkout-button {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: var(--space-2);
}

/* Checkout page: two-column layout ------------------------------------------- */
@media (min-width: 900px) {
	form.checkout.woocommerce-checkout {
		display: grid;
		grid-template-columns: 1.4fr 1fr;
		gap: var(--space-4);
		align-items: start;
	}

	form.checkout.woocommerce-checkout #customer_details {
		grid-column: 1;
	}
}

/*
 * Same card treatment as #order_review (surface bg, border, radius,
 * shadow) — before this, the order summary sat in an obvious white card
 * while the billing form sat directly on the page background with
 * nothing to contain it, so the two columns didn't read as siblings of
 * the same layout. Applied outside the grid media query since the card
 * look is just as appropriate stacked on mobile.
 */
#customer_details {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-3);
	box-shadow: var(--shadow-sm);
}

@media (min-width: 900px) {

	/*
	 * main.js wraps #order_review_heading + #order_review (separate
	 * top-level siblings in WooCommerce's own template, no shared wrapper)
	 * in this element, so column 2 is a single grid item with its own
	 * natural height — sharing grid rows with #customer_details directly
	 * caused CSS Grid's auto-row-sizing to distribute customer_details'
	 * full height ambiguously across those rows, leaving a large blank gap
	 * above the order review box.
	 *
	 * Deliberately NOT capping this with max-height + overflow-y: auto —
	 * that traps the payment method radio, terms checkbox, and Place Order
	 * button inside a second, easy-to-miss scrollbar nested inside the page
	 * scrollbar, which is exactly the "can't find the pay button" problem.
	 * Letting it grow to its natural height means there's only ever one
	 * scrollbar (the page's), and position: sticky already degrades
	 * gracefully on its own once the box is taller than the viewport — it
	 * just stops being stuck and scrolls normally with the page, which is
	 * the same trade-off checkouts on Shopify etc. make.
	 */
	form.checkout.woocommerce-checkout .order-review-sticky {
		grid-column: 2;
		position: sticky;
		top: 6rem;
	}
}

#customer_details .col-1,
#customer_details .col-2 {
	margin-bottom: var(--space-3);
}

.wc_payment_methods {
	margin-bottom: var(--space-2);
}

/**
 * A plain top divider rather than a full bordered box — with Razorpay as
 * the only method, a box implies a choice that isn't there, and a second
 * fully-boxed element sitting inside the already-boxed #order_review card
 * read as a card nested inside a card. A divider keeps the section visually
 * distinct without that nesting.
 */
.wc_payment_method {
	border: none;
	border-top: 1px solid var(--color-border);
	border-radius: 0;
	padding: var(--space-2) 0 0;
	margin-bottom: var(--space-2);
}

/**
 * Razorpay is the only payment method — nothing to actually choose between —
 * so the radio button is vestigial. Hidden rather than removed from the DOM
 * since WooCommerce still needs it present (checked) for the form to submit
 * correctly; revisit if a second gateway is ever added.
 */
.wc_payment_method input[type="radio"] {
	display: none;
}

.wc_payment_method label {
	display: inline;
	font-weight: 600;
}

.payment_box {
	margin-top: 0.6rem;
	padding-top: 0.6rem;
	border-top: 1px dashed var(--color-border);
	color: var(--color-ink-soft);
	font-size: 0.92rem;
}

#place_order {
	width: 100%;
	justify-content: center;
	font-size: 1.02rem;
	padding: 1rem 1.6rem;
}

/**
 * WooCommerce's checkout.js adds .processing to form.checkout and blocks it
 * with a plain white 60%-opacity overlay (no spinner, no "Processing…"
 * text) while the order submits — reuses the same spinner treatment as the
 * AJAX add-to-cart loading state for a consistent loading affordance.
 */
form.checkout.processing #place_order {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}

form.checkout.processing #place_order::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.1rem;
	height: 1.1rem;
	margin: -0.55rem 0 0 -0.55rem;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: desibal-spin 0.6s linear infinite;
}

.checkout-trust-strip {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: var(--space-2);
	color: var(--color-ink-soft);
	font-size: 0.85rem;
	line-height: 1.4;
}

.checkout-trust-strip svg {
	width: 1.2rem;
	height: 1.2rem;
	flex-shrink: 0;
	color: var(--color-accent-green);
}

.woocommerce-privacy-policy-text {
	font-size: 0.82rem;
	color: var(--color-ink-soft);
}

/* Mini-cart drawer ----------------------------------------------------------- */
.mini-cart-drawer {
	position: fixed;
	inset: 0;
	z-index: 1000;
	visibility: hidden;
	pointer-events: none;
}

.mini-cart-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}

.mini-cart-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 14, 9, 0.45);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.mini-cart-drawer.is-open .mini-cart-drawer__backdrop {
	opacity: 1;
}

.mini-cart-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min(420px, 100%);
	overflow-x: hidden;
	background: var(--color-bg);
	box-shadow: var(--shadow-lg);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.3s ease;
}

.mini-cart-drawer.is-open .mini-cart-drawer__panel {
	transform: translateX(0);
}

.mini-cart-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-2) var(--space-3);
	border-bottom: 1px solid var(--color-border);
	flex-shrink: 0;
}

.mini-cart-drawer__header h2 {
	margin: 0;
	font-size: 1.2rem;
}

.mini-cart-drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: var(--space-3);
}

body.mini-cart-open {
	overflow: hidden;
}

.woocommerce-mini-cart {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}

.woocommerce-mini-cart-item {
	position: relative;
	display: grid;
	grid-template-columns: 3.5rem 1fr;
	grid-template-rows: auto auto;
	gap: 0.2rem var(--space-2);
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--color-border);
}

.woocommerce-mini-cart-item img {
	grid-column: 1;
	grid-row: 1 / 3;
	width: 3.5rem;
	height: 3.5rem;
	object-fit: cover;
	border-radius: var(--radius);
}

.woocommerce-mini-cart-item a:not(.remove) {
	display: contents;
}

/**
 * The product name is raw text (not wrapped in an element by WooCommerce's
 * own template), so it can't be targeted by CSS at all — desibal_mini_cart_item_name_wrapper()
 * in inc/woocommerce-hooks.php wraps it in this span via the
 * woocommerce_cart_item_name filter specifically so it can be pinned here.
 */
.mini-cart-item-name {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
	overflow-wrap: break-word;
}

/**
 * Without an explicit column, .quantity (a sibling of the name-wrapping <a>,
 * not a child of it) auto-places into row 2's FIRST column — i.e. the
 * narrow 3.5rem image column — where its "1 x ₹899.00" text has no room and
 * overflows silently past the drawer's own edge. Pin it to column 2.
 */
.woocommerce-mini-cart-item .quantity {
	grid-column: 2;
	grid-row: 2;
	display: block;
	min-width: 0;
	overflow-wrap: break-word;
	border: none;
	background: none;
	color: var(--color-ink-soft);
	font-size: 0.88rem;
	border-radius: 0;
}

.woocommerce-mini-cart-item .remove.remove_from_cart_button {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--color-bg-alt);
	color: var(--color-primary) !important;
	text-decoration: none !important;
	font-size: 1rem;
	line-height: 1;
}

.woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	font-weight: 700;
	font-size: 1.1rem;
	padding-top: var(--space-2);
	border-top: 1px solid var(--color-border);
}

.woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.woocommerce-mini-cart__buttons a {
	justify-content: center;
}

.woocommerce-mini-cart__empty-message {
	color: var(--color-ink-soft);
	text-align: center;
	padding-block: var(--space-4);
}

/* Motion polish ---------------------------------------------------------- */
.reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
	opacity: 1;
	transform: none;
}

.button:active,
.icon-button:active,
.quantity__step:active {
	transform: scale(0.94);
}

#primary-menu {
	transition: opacity 0.2s ease, transform 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Sticky add-to-cart bar (product pages) --------------------------------- */
.sticky-atc {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 950;
	background: var(--color-bg);
	border-top: 1px solid var(--color-border);
	box-shadow: var(--shadow-lg);
	transform: translateY(100%);
	transition: transform 0.3s ease;
}

.sticky-atc.is-visible {
	transform: translateY(0);
}

.sticky-atc__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding-block: var(--space-1);
}

.sticky-atc__info {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
}

.sticky-atc__info img {
	width: 2.75rem;
	height: 2.75rem;
	object-fit: cover;
	border-radius: var(--radius);
	flex-shrink: 0;
}

.sticky-atc__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sticky-atc__text strong {
	font-family: var(--font-serif);
	font-size: 0.95rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sticky-atc__text .price {
	font-weight: 700;
	color: var(--color-primary);
	font-size: 0.9rem;
}

.sticky-atc .button {
	flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
	.sticky-atc {
		transition: none;
	}
}

/* My Account ---------------------------------------------------------------
 * WooCommerce's own myaccount templates (uncopied, styled entirely from their
 * stable classes). Scoped to `.woocommerce-account` (the body class WC adds
 * only on this page) so the layout doesn't leak onto other .entry-content
 * pages, e.g. the Refund and Returns Policy page uses the same wrapper. */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-2);
	box-shadow: var(--shadow-sm);
}

.woocommerce-MyAccount-navigation-link a {
	position: relative;
	display: block;
	padding: 0.65rem 0.75rem 0.65rem 2.2rem;
	border-radius: var(--radius);
	color: var(--color-ink-soft);
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.woocommerce-MyAccount-navigation-link a::before {
	content: "";
	position: absolute;
	left: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1.05rem;
	height: 1.05rem;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
}

.woocommerce-MyAccount-navigation-link a:hover {
	background: var(--color-bg);
	color: var(--color-ink);
}

.woocommerce-MyAccount-navigation-link.is-active a {
	background: var(--color-primary);
	color: #fff;
}

.woocommerce-MyAccount-navigation-link--dashboard a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7'/%3E%3Cpath d='M6 10v9h12v-9'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7'/%3E%3Cpath d='M6 10v9h12v-9'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--orders a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1 13H7z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1 13H7z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--downloads a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--edit-address a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-7.5 7-12a7 7 0 1 0-14 0c0 4.5 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-7.5 7-12a7 7 0 1 0-14 0c0 4.5 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.3'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--payment-methods a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--edit-account a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--customer-logout a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='M10 17l5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='M10 17l5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-content {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-3);
	box-shadow: var(--shadow-sm);
	margin-top: var(--space-3);
}

.woocommerce-MyAccount-content .woocommerce-orders-table {
	margin-top: var(--space-2);
}

.woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
	margin-top: var(--space-3);
}

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

.woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	margin-bottom: 0.5rem;
}

.woocommerce-Address-title h2 {
	font-size: 1.1rem;
	margin: 0;
}

.woocommerce-Address address {
	font-style: normal;
	color: var(--color-ink-soft);
	line-height: 1.6;
}

/**
 * Logged-out My Account view (registration is disabled in settings, so
 * this is just the bare Login heading + form — no .woocommerce-MyAccount-*
 * classes exist yet for the usual My Account styling above to hook into).
 * Card-wraps heading + form together, the same treatment as every other
 * form on the site, instead of two unstyled elements sitting directly on
 * the page background.
 */
body.woocommerce-account:not(.logged-in) .entry-content .woocommerce {
	max-width: 26rem;
	margin-inline: auto;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-3);
	box-shadow: var(--shadow-sm);
}

body.woocommerce-account:not(.logged-in) .entry-content .woocommerce h2 {
	margin-top: 0;
	font-size: 1.3rem;
}

.woocommerce-form-login .form-row {
	margin-bottom: var(--space-2);
}

.woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 400;
	margin-bottom: var(--space-2);
}

.woocommerce-LostPassword {
	margin-top: var(--space-2);
	font-size: 0.9rem;
}

/**
 * WooCommerce's own frontend JS (not something we can easily unhook)
 * always wraps password fields in .password-input and appends an empty
 * .show-password-input toggle button, expecting WooCommerce's bundled CSS
 * to supply the eye icon — but that stylesheet is deliberately dequeued
 * everywhere on this site (see woocommerce_enqueue_styles filter), so the
 * button rendered with no icon at all. Styled here with the same
 * hand-drawn icon technique used for the account nav icons above.
 */
.password-input {
	position: relative;
	display: block;
}

.password-input input[type="password"],
.password-input input[type="text"] {
	padding-right: 2.75rem;
}

/**
 * The visible icon stays 1.6rem (set on ::before below), but the button
 * itself is sized to a full ~44px touch target and centers the icon inside
 * — growing the clickable box without the icon itself looking oversized
 * next to the password field's text.
 */
.show-password-input {
	position: absolute;
	top: 50%;
	right: 0.15rem;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	color: var(--color-ink-soft);
}

.show-password-input::before {
	content: "";
	display: block;
	width: 1.6rem;
	height: 1.6rem;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.show-password-input.display-password::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.94 10.94 0 0112 19c-6.5 0-10-7-10-7a18.5 18.5 0 015.06-5.94M9.9 4.24A10.4 10.4 0 0112 4c6.5 0 10 7 10 7a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24'/%3E%3Cpath d='M2 2l20 20'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.94 10.94 0 0112 19c-6.5 0-10-7-10-7a18.5 18.5 0 015.06-5.94M9.9 4.24A10.4 10.4 0 0112 4c6.5 0 10 7 10 7a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24'/%3E%3Cpath d='M2 2l20 20'/%3E%3C/svg%3E");
}

@media (min-width: 900px) {
	/*
	 * Scoped to body.logged-in specifically, not just .woocommerce-account —
	 * this grid assumes exactly two children (the nav sidebar, then the
	 * content card), which is only true for the logged-in dashboard view.
	 * Logged out, the same .woocommerce div instead contains the "Login"
	 * <h2> and the login <form> as its two children, and this grid
	 * scrambled those into its 220px/1fr column tracks too — the login
	 * form's fields squeezed into the narrow nav-sidebar column while the
	 * heading landed alone in the wide content column, which is what made
	 * "Login" look oddly indented instead of sitting above its own form.
	 */
	body.logged-in.woocommerce-account .entry-content .woocommerce {
		display: grid;
		grid-template-columns: 220px 1fr;
		align-items: start;
		gap: var(--space-4);
	}

	.woocommerce-MyAccount-content {
		margin-top: 0;
	}

	.woocommerce-Addresses.col2-set {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Order Received / Thank You page ------------------------------------------- */

/* The generic page <h1> ("Order received", from the Checkout page's own
   title) duplicates our own "Order Confirmed" banner heading right below
   it — hide it here specifically, using the body class WooCommerce adds
   only on this exact endpoint (order-pay and cart-review states of the
   same Checkout page keep their own title as normal). */
body.woocommerce-order-received article > h1 {
	display: none;
}

/* A "Checkout" breadcrumb makes little sense once the order is already
   placed — nowhere useful for it to lead back to at this point. */
body.woocommerce-order-received .breadcrumbs {
	display: none;
}

.woocommerce-order {
	max-width: 640px;
	margin: 0 auto;
}

.thankyou-banner {
	text-align: center;
	margin-bottom: var(--space-2);
}

.thankyou-banner__icon {
	display: inline-flex;
	color: var(--color-accent-green);
	margin-bottom: var(--space-1);
}

.thankyou-banner__icon svg {
	width: 3.5rem;
	height: 3.5rem;
}

.thankyou-banner h1 {
	margin: 0;
}

.woocommerce-thankyou-order-received {
	text-align: center;
	max-width: 45ch;
	margin-left: auto;
	margin-right: auto;
}

/* Total and payment method are repeated in the itemised order table right
   below this card — keep only the details that don't appear again. */
.woocommerce-order-overview__total,
.woocommerce-order-overview__payment-method {
	display: none;
}

ul.woocommerce-order-overview,
ul.order_details {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
	margin: var(--space-3) 0;
	padding: var(--space-3);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

.woocommerce-order-overview li,
.order_details li {
	font-size: 0.9rem;
	color: var(--color-ink-soft);
}

.woocommerce-order-overview li strong,
.order_details li strong {
	display: block;
	color: var(--color-ink);
	font-size: 1rem;
}

.woocommerce-order address {
	font-style: normal;
	color: var(--color-ink-soft);
	line-height: 1.6;
}

/**
 * "Pay for order" page (checkout/order-pay/{id}) — reached by retrying a
 * failed or abandoned payment from an order confirmation email or account
 * order history. The Razorpay plugin injects its own intro text and Pay
 * Now/Cancel buttons here with no theme hooks to add classes, so those
 * elements are styled directly by ID above and via :has()/sibling selectors
 * below rather than through markup we control.
 */
body.woocommerce-order-pay .entry-content {
	max-width: 45ch;
	margin-inline: auto;
	text-align: center;
}

body.woocommerce-order-pay ul.order_details {
	text-align: left;
}

body.woocommerce-order-pay ul.order_details + p {
	color: var(--color-ink-soft);
	margin-bottom: var(--space-3);
}

body.woocommerce-order-pay p:has(#btn-razorpay) {
	display: flex;
	justify-content: center;
	gap: var(--space-2);
	flex-wrap: wrap;
}

body.woocommerce-order-pay #msg-razorpay-success {
	background: color-mix(in srgb, var(--color-accent-green) 14%, var(--color-surface)) !important;
	color: var(--color-ink) !important;
	border: 1px solid var(--color-border) !important;
	border-radius: var(--radius-lg) !important;
	padding: var(--space-2) var(--space-3) !important;
	margin-bottom: var(--space-2) !important;
}

/**
 * Every section on this page — overview stats, the itemised order table,
 * the address, and "what happens next" — now gets the same card treatment
 * (surface background, border, radius, shadow, consistent spacing) so the
 * page reads as one coherent stack of panels instead of a mix of styled
 * and unstyled default-WooCommerce fragments.
 */
.woocommerce-order-details,
.woocommerce-customer-details {
	margin-top: var(--space-3);
	padding: var(--space-3);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

.woocommerce-order-details__title,
.woocommerce-customer-details h2 {
	font-size: 1.2rem;
	margin-top: 0;
}

/* The table already has its own card styling (background/shadow/radius)
   for use elsewhere (e.g. the cart page) — strip that back to a plain
   table now that it sits inside the section's own card. */
.woocommerce-order-details table.shop_table {
	box-shadow: none;
	border-radius: 0;
	margin-bottom: 0;
}

.thankyou-next-steps {
	margin-top: var(--space-3);
	padding: var(--space-3);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	text-align: center;
}

.thankyou-next-steps h2 {
	font-size: 1.2rem;
	margin-top: 0;
}

.thankyou-next-steps ul {
	list-style: none;
	margin: 0 0 var(--space-2);
	padding-left: 0;
	display: inline-block;
	text-align: left;
}

.thankyou-next-steps li {
	position: relative;
	padding-left: 1.4rem;
	margin-bottom: 0.5rem;
	color: var(--color-ink-soft);
}

.thankyou-next-steps li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: var(--color-primary);
}

.thankyou-support {
	font-size: 0.88rem;
	color: var(--color-ink-soft);
	margin-bottom: var(--space-2);
}

.thankyou-next-steps .button {
	margin-top: var(--space-1);
}