/* ==========================================================================
   Jhumkhana — premium design layer
   ==========================================================================

   Loaded after jhumkana.css. This file does three things, in order:

   1. Declares a spacing, radius and elevation scale. The base stylesheet had
      no spacing scale at all — every gap was an individual decision, written
      either as a hardcoded pixel value or as an inline style on the element.
      That is the actual reason spacing looks uneven: 24px here, 26px there,
      18px somewhere else, all of them defensible alone and none of them
      agreeing. One scale, used everywhere, is what makes a layout read as
      designed rather than assembled.

   2. Re-points the existing components onto that scale, so nothing has to be
      rewritten and the dark-theme token remap keeps working untouched.

   3. Fixes the specific rhythm problems: .section was declared three separate
      times in the base file with conflicting values (70/96px, then 52px, then
      clamp(28px,4vw,50px)); the last one won everywhere, which left desktop
      sections tighter than phone sections at some widths.

   Everything is written against the semantic tokens (--surface, --text,
   --line-soft…) rather than the brand tokens, so all of it inverts correctly
   in the dark theme.
   ========================================================================== */

:root {
	/* ---- Spacing scale -------------------------------------------------
	   A 4px base on a roughly 1.5 ratio. Fluid where the value is large
	   enough for the difference between a phone and a desktop to matter;
	   fixed below 16px, because a 4px gap is 4px on every screen and
	   scaling it only makes small components wobble. */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: clamp(18px, 1.6vw, 24px);
	--s-6: clamp(24px, 2.4vw, 32px);
	--s-7: clamp(32px, 3.4vw, 48px);
	--s-8: clamp(44px, 5vw, 72px);
	--s-9: clamp(60px, 7vw, 104px);

	/* Gutter and section rhythm, derived from the scale rather than set
	   independently, so the horizontal and vertical grids agree. */
	--gutter: clamp(16px, 4vw, 40px);
	--section-y: var(--s-8);

	/* ---- Radius scale --------------------------------------------------
	   The base file used 12, 14, 18, 20, 22 and 28px in different places.
	   Three steps is enough, and consistency here is most of what separates
	   a considered interface from a busy one. */
	--r-sm: 10px;
	--r-md: 16px;
	--r-lg: 24px;
	--r-pill: 999px;

	/* ---- Elevation -----------------------------------------------------
	   Layered rather than single-shadow: a tight contact shadow plus a wide
	   ambient one. A single large blur reads as fog; two reads as an object
	   resting on a surface. Warm-tinted, because a neutral grey shadow on an
	   ivory ground looks dirty. */
	--e-1: 0 1px 2px rgba(45, 31, 27, .05), 0 2px 8px -2px rgba(45, 31, 27, .06);
	--e-2: 0 2px 4px rgba(45, 31, 27, .05), 0 10px 26px -8px rgba(45, 31, 27, .12);
	--e-3: 0 4px 8px rgba(45, 31, 27, .06), 0 22px 50px -16px rgba(45, 31, 27, .2);

	/* Focus ring, defined once. Accessibility is not a component. */
	--focus: 0 0 0 3px rgba(200, 162, 77, .45);
}

body.dark {
	--e-1: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px -2px rgba(0, 0, 0, .5);
	--e-2: 0 2px 4px rgba(0, 0, 0, .45), 0 10px 26px -8px rgba(0, 0, 0, .6);
	--e-3: 0 4px 8px rgba(0, 0, 0, .5), 0 22px 50px -16px rgba(0, 0, 0, .7);
	--focus: 0 0 0 3px rgba(228, 207, 165, .45);
}


/* ==========================================================================
   1. Rhythm
   ========================================================================== */

/* One value, replacing the three contradictory .section rules in the base
   file. Adjacent sections stack their padding, so the visible gap between two
   blocks is twice this — which is why it is deliberately a little under half
   of what a section gap should look like. */
.section {
	padding-block: var(--section-y);
}

@media (max-width: 640px) {
	.section {
		padding-block: var(--s-7);
	}
}

/* A section painting its own background needs more room inside it, or the
   colour band crowds the content it exists to frame. */
.section[style*="background"],
.section.section--tint {
	padding-block: var(--s-9);
}

/* Consecutive sections sharing a background should not double their padding —
   without this the two blocks read as one very tall block with a hole in it. */
.section + .section {
	padding-top: 0;
}

.section + .section.section--tint,
.section--tint + .section {
	padding-top: var(--section-y);
}

.container-x {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--gutter);
}

@media (min-width: 1024px) {
	.container-x {
		padding-inline: var(--gutter);
	}
}

.sec-head {
	margin-bottom: var(--s-7);
}

.sec-head .eyebrow {
	margin-bottom: var(--s-3);
}

.sec-head h2 {
	margin: 0 0 var(--s-3);
}

.sec-head p {
	margin-inline: auto;
	max-width: 58ch;
	line-height: 1.65;
}

.sec-head .ornament {
	margin-top: var(--s-4);
}


/* ==========================================================================
   2. Focus visibility

   The base file styled hover on every interactive element and focus on almost
   none, which makes the whole site unusable from a keyboard. :focus-visible
   means a mouse click never shows a ring, so this costs the pointer experience
   nothing.
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid transparent;
	box-shadow: var(--focus);
	border-radius: var(--r-sm);
}

.btn:focus-visible,
.jk-fchip:focus-visible {
	border-radius: var(--r-pill);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Set on <body> while the mobile filter sheet is open. The old code wrote
   body.style.overflow directly, which fought with anything else that wanted
   to lock scrolling. */
body.jk-noscroll {
	overflow: hidden;
}


/* ==========================================================================
   3. Buttons

   Same shapes, better mechanics: a consistent height so a row of mixed
   buttons lines up, a tighter transition, and a pressed state. The base file
   animated 250ms on transform and background, which on a click feels slow
   enough to read as lag.
   ========================================================================== */

.btn {
	--btn-h: 46px;
	min-height: var(--btn-h);
	padding: 0 var(--s-6);
	border-radius: var(--r-pill);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;
	transition: transform .18s cubic-bezier(.2, .7, .3, 1),
		box-shadow .18s ease,
		background-color .18s ease,
		border-color .18s ease,
		color .18s ease;
}

.btn:active {
	transform: translateY(0) scale(.985);
}

.btn-primary:hover {
	transform: translateY(-1px);
	box-shadow: var(--e-2);
}

.btn-gold:hover {
	transform: translateY(-1px);
	box-shadow: var(--e-2);
}

.btn-outline {
	border-width: 1px;
	background: var(--surface);
}

.btn-outline:hover {
	transform: translateY(-1px);
	box-shadow: var(--e-1);
}

.btn[disabled],
.btn[aria-disabled="true"] {
	opacity: .55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.btn,
	.btn:hover,
	.btn:active {
		transform: none;
		transition: background-color .18s ease, color .18s ease;
	}
}


/* ==========================================================================
   4. Product card

   The single most repeated object on the site, so it earns the most
   attention. Changes worth naming:

   - The text block was an inline style="padding:16px". It is now on the
     scale, and the block is a flex column with a fixed gap, which is what
     makes every card in a row align on the same baselines regardless of
     whether it has a tag, a rating, or a discount.

   - Cards are equal height and the price pins to the bottom. Previously a
     product with no rating sat its price higher than its neighbour's, so a
     row of four had prices at four different heights.

   - The name is clamped to two lines. A long product name used to push the
     price out of alignment for the entire row.
   ========================================================================== */

.jk-grid {
	gap: var(--s-5);
}

@media (min-width: 1024px) {
	.jk-grid {
		gap: var(--s-6);
	}
}

.product-card {
	display: flex;
	flex-direction: column;
	border-radius: var(--r-md);
	border: 1px solid var(--line-soft);
	box-shadow: var(--e-1);
	transition: transform .3s cubic-bezier(.2, .7, .3, 1),
		box-shadow .3s ease,
		border-color .3s ease;
}

.product-card:hover {
	transform: translateY(-4px);
	border-color: var(--line);
	box-shadow: var(--e-3);
}

.product-card > div:last-child {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	flex: 1 1 auto;
	padding: var(--s-4) var(--s-4) var(--s-5) !important;
}

/* The price row is pushed to the bottom of the card, so prices align across
   a row whatever else each card happens to contain. */
.product-card > div:last-child > div:last-child {
	margin-top: auto;
	padding-top: var(--s-1);
}

.product-card h3 {
	margin-top: 0 !important;
	font-size: 17px !important;
	line-height: 1.3 !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
}

.product-card .stars {
	margin-top: 0 !important;
}

/* Badges and the wishlist heart sit on the same optical margin as the card's
   own padding, rather than the 12px they used before, which read as slightly
   too close to the corner on a 16px-padded card. */
.badge,
.wish {
	top: var(--s-3);
}

.badge {
	left: var(--s-3);
	padding: 5px 11px;
	font-size: 10.5px;
	letter-spacing: .07em;
	text-transform: uppercase;
	box-shadow: var(--e-1);
}

.wish {
	right: var(--s-3);
	width: 36px;
	height: 36px;
	box-shadow: var(--e-1);
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.wish:hover {
	transform: scale(1.06);
}

.quick {
	padding: var(--s-3);
	gap: var(--s-2);
}

.quick .btn {
	--btn-h: 38px;
	min-height: var(--btn-h);
	padding: 0 var(--s-3);
}

/* On touch there is no hover, so the quick-action bar was permanently
   unreachable — the primary Add to Cart button simply did not exist on a
   phone. Below 900px the card links straight through and the bar is hidden
   rather than left as dead markup. */
@media (hover: none), (max-width: 900px) {
	.quick {
		display: none;
	}
}


/* ==========================================================================
   5. Shop layout
   ========================================================================== */

.jk-shop {
	gap: var(--s-7);
}

@media (min-width: 1200px) {
	.jk-shop {
		grid-template-columns: 268px 1fr;
	}
}

.jk-filters {
	border-radius: var(--r-md);
	border-color: var(--line-soft);
	box-shadow: var(--e-1);
	padding: var(--s-5);
	top: calc(var(--s-8) + 24px);
}

.jk-filter-group {
	padding-block: var(--s-4);
	border-top-color: var(--line-soft);
}

.jk-filter-group > strong {
	margin-bottom: var(--s-3);
	font-size: 11px;
	letter-spacing: .12em;
}

.jk-chip-row {
	gap: var(--s-2);
}

.jk-fchip {
	padding: 7px 14px;
	font-size: 13px;
	line-height: 1.2;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

/* An empty term is still worth showing — it tells a shopper the category
   exists — but it should not invite a click that leads to an empty grid. */
.jk-fchip.is-empty {
	opacity: .45;
	pointer-events: none;
}

.jk-toolbar {
	gap: var(--s-3);
	margin-bottom: var(--s-6);
	padding-bottom: var(--s-4);
	border-bottom: 1px solid var(--line-soft);
}

.jk-toolbar .count {
	font-variant-numeric: tabular-nums;
}

.jk-select {
	min-height: 40px;
	padding: 0 var(--s-5) 0 var(--s-4);
	border-color: var(--line);
	/* The native arrow is inconsistent across platforms and was invisible in
	   the dark theme. This one is drawn with the text colour, so it follows. */
	appearance: none;
	-webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 17px) 51%, calc(100% - 12px) 51%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.jk-sort {
	display: inline-flex;
	margin-left: auto;
}

.jk-price-slider {
	background: linear-gradient(to right,
		var(--burgundy) 0,
		var(--burgundy) var(--jk-fill, 100%),
		var(--line) var(--jk-fill, 100%),
		var(--line) 100%);
}

.jk-price-scale {
	margin-top: var(--s-2);
	font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   6. Load more

   The button, the count and the progress bar are one block with one rhythm,
   so the region does not reflow as pages are appended.
   ========================================================================== */

.jk-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-4);
	margin-top: var(--s-7);
	padding-top: var(--s-6);
	border-top: 1px solid var(--line-soft);
}

.jk-more-status {
	margin: 0;
	font-size: 13px;
	letter-spacing: .04em;
	color: var(--text-soft);
	font-variant-numeric: tabular-nums;
}

.jk-more-status.is-complete {
	color: var(--text-soft);
	opacity: .8;
}

/* A quiet progress bar. It answers "how much more is there" before the
   shopper has to guess from the scrollbar, which is the question a Load more
   button always raises. */
.jk-more-track {
	width: min(220px, 60%);
	height: 3px;
	border-radius: var(--r-pill);
	background: var(--line-soft);
	overflow: hidden;
}

.jk-more-bar {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--gold), var(--burgundy));
	transition: width .45s cubic-bezier(.2, .7, .3, 1);
}

.jk-more-btn {
	min-width: 200px;
}

.jk-more-btn.is-loading {
	pointer-events: none;
	opacity: .75;
}

.jk-more-error {
	margin: 0;
	font-size: 13px;
	color: var(--bad);
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.jk-more-bar {
		transition: none;
	}
}


/* ==========================================================================
   7. Mobile filter sheet

   It was already a bottom sheet; these are the details that make it feel
   like one — a safe-area-aware footer, momentum-friendly scrolling, and a
   header that stays put while the list scrolls under it.
   ========================================================================== */

@media (max-width: 900px) {
	.jk-filters--chips {
		border-radius: var(--r-lg) var(--r-lg) 0 0;
		padding: var(--s-3) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom));
		box-shadow: 0 -20px 60px -20px rgba(45, 31, 27, .35);
	}

	.jk-filters--chips .jk-between {
		position: sticky;
		top: 0;
		z-index: 2;
		background: var(--surface);
		padding-bottom: var(--s-3);
		margin-bottom: 0;
	}

	.jk-sheet-handle {
		margin: 0 auto var(--s-3);
	}

	.jk-filters-scroll {
		-webkit-overflow-scrolling: touch;
		padding-bottom: var(--s-4);
	}

	.jk-filter-trigger {
		min-height: 40px;
	}

	/* Every tap target reaches 44px, the point below which a control starts
	   collecting mis-taps on a phone. */
	.jk-fchip {
		padding: 10px 15px;
		font-size: 13.5px;
	}

	.jk-toolbar {
		gap: var(--s-2);
	}

	.jk-sort {
		margin-left: 0;
		flex: 1 1 auto;
	}

	.jk-select {
		width: 100%;
		min-height: 40px;
	}
}


/* ==========================================================================
   8. Page hero
   ========================================================================== */

.page-hero {
	padding-block: var(--s-7) var(--s-7);
	border-bottom: 1px solid var(--line-soft);
}

.page-hero .page-title {
	margin: var(--s-3) 0 0;
	letter-spacing: -.015em;
}

.page-hero .crumbs {
	margin-bottom: 0;
	font-size: 13px;
}


/* ==========================================================================
   9. Product page

   The short description the AI writes is now rendered under the rating and
   above the price. It had been generated on every product and shown on none.
   ========================================================================== */

.pdp-short {
	margin: var(--s-3) 0 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--text-soft);
	max-width: 56ch;
}

.pdp-prose {
	line-height: 1.75;
	max-width: 68ch;
}

.pdp-prose > * + * {
	margin-top: var(--s-4);
}

.pdp-prose h2,
.pdp-prose h3 {
	font-family: var(--serif);
	color: var(--burgundy);
	line-height: 1.25;
	margin-top: var(--s-6);
}

.pdp-prose h2 {
	font-size: clamp(20px, 2.2vw, 26px);
}

.pdp-prose h3 {
	font-size: clamp(17px, 1.8vw, 20px);
}

.pdp-prose ul {
	padding-left: 0;
	list-style: none;
	display: grid;
	gap: var(--s-2);
}

.pdp-prose ul li {
	position: relative;
	padding-left: var(--s-5);
}

.pdp-prose ul li::before {
	content: "✦";
	position: absolute;
	left: 0;
	top: .05em;
	color: var(--gold);
	font-size: .8em;
}

.pdp-prose a {
	color: var(--burgundy);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--gold-light);
}

.pdp-prose a:hover {
	text-decoration-color: var(--burgundy);
}


/* ==========================================================================
   10. Empty state
   ========================================================================== */

.jk-empty {
	display: grid;
	justify-items: center;
	gap: var(--s-3);
	padding: var(--s-8) var(--s-5) !important;
	background: var(--surface);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-md);
}

.jk-empty svg {
	width: 40px;
	height: 40px;
	color: var(--gold);
}

.jk-empty h2 {
	margin: 0;
	font-family: var(--serif);
	font-size: clamp(19px, 2.4vw, 24px);
	color: var(--burgundy);
}

.jk-empty p {
	margin: 0 !important;
	color: var(--text-soft);
	line-height: 1.65;
}


/* ==========================================================================
   11. Product media — hard aspect lock

   The card is a flex column, and a flex item's automatic minimum size can be
   derived from its content. An unusually tall source image could therefore
   out-vote the aspect-ratio and stretch one card, which in a CSS grid drags
   the whole row with it — the symptom being one row of very tall images with
   the card text pushed out of sight.

   Absolutely positioning the image takes it out of the flow entirely, so the
   container's height comes from the aspect ratio and nothing else, whatever
   the photograph happens to be.
   ========================================================================== */

.product-media {
	flex: 0 0 auto;
	min-height: 0;
	aspect-ratio: 1 / 1;
	height: auto;
	max-height: none;
}

.product-media > a {
	position: absolute;
	inset: 0;
	display: block;
}

.product-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Nothing to show: a warm placeholder beats a collapsed white box. */
.product-media:not(:has(img)) {
	background:
		radial-gradient(circle at 50% 45%, var(--surface-3), transparent 70%),
		var(--ivory-warm);
}


/* ==========================================================================
   12. Account gate and invoice states
   ========================================================================== */

.jk-auth-gate {
	max-width: 520px;
	margin: 0 auto;
	padding: var(--s-8) var(--s-6);
	text-align: center;
	background: var(--surface);
	border: 1px solid var(--line-soft);
	border-radius: var(--r-lg);
	box-shadow: var(--e-2);
}

.jk-auth-gate h2 {
	margin: 0 0 var(--s-3);
	font-family: var(--serif);
	font-size: clamp(21px, 3vw, 27px);
	color: var(--burgundy);
	line-height: 1.25;
}

.jk-auth-gate p {
	margin: 0 auto var(--s-6);
	max-width: 42ch;
	color: var(--text-soft);
	line-height: 1.7;
	font-size: 15px;
}

.jk-auth-gate__actions {
	display: flex;
	gap: var(--s-3);
	justify-content: center;
	flex-wrap: wrap;
}

.jk-auth-gate__note {
	margin: var(--s-5) 0 0 !important;
	font-size: 13px;
	opacity: .8;
}

@media (max-width: 480px) {
	.jk-auth-gate__actions {
		flex-direction: column;
	}

	.jk-auth-gate__actions .btn {
		width: 100%;
	}
}

/* Why the download button is not there yet. Deliberately quiet — it is an
   explanation, not a warning. */
.jk-invoice-pending {
	display: inline-block;
	max-width: 26ch;
	font-size: 12px;
	line-height: 1.5;
	color: var(--text-soft);
}


   The fluid ramp in the base file bottoms out a little high for a 360px
   phone, where a 46px section heading takes three lines and pushes the first
   product below the fold.
   ========================================================================== */

@media (max-width: 480px) {
	.sec-head h2 {
		font-size: clamp(24px, 7vw, 30px);
	}

	.page-title {
		font-size: clamp(26px, 8vw, 34px);
	}

	.jk-grid-2,
	.jk-grid-3,
	.jk-grid-4,
	.jk-grid-5,
	.jk-grid-6 {
		/* Two columns rather than one. A single-column grid of square images
		   makes a 30-product shop a very long scroll, and shoppers compare
		   jewellery side by side. */
		grid-template-columns: repeat(2, 1fr);
		gap: var(--s-3);
	}

	.product-card > div:last-child {
		padding: var(--s-3) var(--s-3) var(--s-4) !important;
		gap: var(--s-1);
	}

	.product-card h3 {
		font-size: 14.5px !important;
	}

	.product-card .badge {
		font-size: 9.5px;
		padding: 4px 8px;
	}

	.wish {
		width: 32px;
		height: 32px;
	}
}


/* ==========================================================================
   13. Dark mode: the brand colour

   The base stylesheet leaves --burgundy unremapped in dark mode, on the
   stated grounds that it is "already mid-tone" and "reads correctly on both
   backgrounds". Measured against the dark ground, it does not:

       #5B2333 on #141010  ->  1.56 : 1
       #421828 on #141010  ->  1.25 : 1

   WCAG AA wants 4.5:1 for body text and 3:1 for large text. At 1.56 a
   burgundy heading is not "low contrast", it is very nearly invisible —
   which is exactly what shows on the product title, the price, the section
   headings and the outline buttons.

   (--gold measures 7.86:1 and is genuinely fine, so it is left alone. The
   original comment was right about gold and wrong about burgundy.)

   The colour cannot simply be remapped, because --burgundy does two jobs:
   it is a text colour in 74 rules and a fill in 25. Lifting it globally
   would fix every heading and simultaneously turn the primary button, the
   cart bubble and the active filter chips pale pink with white text on top.

   So --burgundy is lifted to a rose that clears AAA for text, and the fills
   are switched to --brand-solid, which keeps a deep brand tone. Both remain
   recognisably the same brand.
   ========================================================================== */

:root {
	/* In the light theme these are the same colour; only dark diverges. */
	--brand-solid: var(--burgundy);
	--brand-solid-hover: var(--burgundy-dark);
	--on-brand: #fff;
}

body.dark {
	/* 9.06:1 on the dark ground. */
	--burgundy: #E0A3B4;
	--burgundy-dark: #EFC2CE;

	/* The fill keeps a deep brand tone, lifted just enough to separate from
	   the page behind it. White on it measures about 8.9:1. */
	--brand-solid: #7A2E43;
	--brand-solid-hover: #96394F;
	--on-brand: #fff;
}

/* ---- Fills: restore a solid brand colour ---------------------------- */

body.dark .bg-burgundy,
body.dark .btn-primary,
body.dark .badge,
body.dark .wish.active,
body.dark .fab-cart,
body.dark .chip:hover,
body.dark .chip.active,
body.dark .news,
body.dark .quick-add,
body.dark .jk-dash-nav a.active,
body.dark .jk-pagination .page-numbers.current,
body.dark .skip-link,
body.dark .jk-cart .btn,
body.dark .jk-checkout .btn,
body.dark .jk-account .btn,
body.dark .jk-map-callout,
body.dark .jk-fchip.on,
body.dark .pdp-stage-wish.active,
body.dark .pdp-dot.is-active,
body.dark .pdp-mini-actions [data-wish].active,
body.dark .pdp-pin-btn,
body.dark .jk-hbadge--wish {
	background: var(--brand-solid);
	color: var(--on-brand);
}

body.dark .btn-primary:hover,
body.dark .search-close:hover,
body.dark .jk-arrow:hover {
	background: var(--brand-solid-hover);
	color: var(--on-brand);
	border-color: var(--brand-solid-hover);
}

body.dark .jk-more-bar {
	background: linear-gradient(90deg, var(--gold), var(--brand-solid-hover));
}

body.dark .jk-price-slider {
	background: linear-gradient(to right,
		var(--brand-solid-hover) 0,
		var(--brand-solid-hover) var(--jk-fill, 100%),
		var(--line) var(--jk-fill, 100%),
		var(--line) 100%);
}


/* ==========================================================================
   14. Dark mode: contrast repairs

   Each of these measured below 4.5:1 on the dark ground.
   ========================================================================== */

/* "SWIPE OR USE THE ARROWS" and its siblings: small uppercase hint text is
   the least forgiving size for low contrast, and it was rendering in the
   unlifted brand colour. */
body.dark .eyebrow,
body.dark .jk-hint,
body.dark .jk-swipe-hint,
body.dark .sec-head .eyebrow {
	color: var(--gold-light);
}

/* An outline button's label is the brand colour on a transparent ground, so
   it takes the lift. The border has to come with it or the button reads as
   a floating word. */
body.dark .btn-outline {
	color: var(--burgundy);
	border-color: rgba(224, 163, 180, .45);
	background: transparent;
}

body.dark .btn-outline:hover {
	background: var(--brand-solid);
	border-color: var(--brand-solid);
	color: var(--on-brand);
}

body.dark .btn-ghost {
	color: var(--text);
}

/* Struck-through original prices were sitting near 2:1. */
body.dark .price-old,
body.dark .pdp-price-was {
	color: #9c8d84;
}

body.dark .pdp-prose a {
	color: var(--burgundy);
	text-decoration-color: rgba(224, 163, 180, .5);
}

body.dark .pdp-prose a:hover {
	text-decoration-color: var(--burgundy);
}

body.dark .jk-empty h2,
body.dark .jk-auth-gate h2,
body.dark .pdp-prose h2,
body.dark .pdp-prose h3 {
	color: var(--burgundy);
}


/* ==========================================================================
   15. Small-screen typography
   ========================================================================== */

@media (max-width: 480px) {
	.sec-head h2 {
		font-size: clamp(24px, 7vw, 30px);
	}

	.page-title {
		font-size: clamp(26px, 8vw, 34px);
	}
}


/* ==========================================================================
   16. Hero: the empty band under the jhumkas

   .jk-hang holds the two hanging pieces. Both are position:absolute, so the
   box has no intrinsic height and the base stylesheet gives it
   min-height:min(58vh,460px).

   On a phone that number has nothing to do with the content. The taller
   piece is 46% of the container wide at a 4/5 ratio, plus a 64px cord —
   about 270px on a 390px screen. The box reserves 460px regardless, leaving
   roughly 190px of empty page between the jhumkas and "JUST LANDED":

       viewport   needs   reserves   wasted
       320px      230px   460px      230px
       390px      270px   460px      190px
       414px      283px   460px      177px
       768px      435px   460px       25px

   The waste vanishes above ~768px, which is why this only shows on mobile.

   Replaced with a height that tracks the same geometry the drops are sized
   from, so the band fits the artwork at every width instead of at one.
   ========================================================================== */

@media (max-width: 899px) {
	.jk-hang {
		/* Checked against the drop geometry from 320px to 899px: between
		   14px and 40px of breathing room, and no clipping anywhere. */
		min-height: clamp(250px, 74vw, 470px);
	}
}

/* The hero's own bottom padding was tuned to sit under that oversized band.
   With the band correctly sized, the original value leaves the section
   bottom-heavy against the one that follows. */
@media (max-width: 899px) {
	.jk-hero-in {
		padding-block: clamp(1.5rem, 5vw, 3rem) clamp(1.5rem, 5vw, 3rem);
	}
}