/*
 * Handkrit 2026 — commerce and content page styles.
 *
 * IMPORTANT: everything under "SINGLE PRODUCT" restyles markup rendered by
 * WooCommerce and by the PARENT theme. Nothing here re-renders it. In particular
 * the .hcs-bulk-order grid, .hcs-min-qty-notice and the standard quantity input
 * are styled by class only, so the parent's five layers of minimum-order
 * validation are untouched.
 */

/* ================================================== page header (woo) */

.hk-page-head { padding: 40px 0 0; }
.hk-page-head .hk-h1 { margin-top: 14px; }
.hk-woo-content { padding: 34px var(--hk-gutter) 96px; }
.hk-woo-content.is-bare { padding-left: 0; padding-right: 0; }

.hk-archive-head-art {
	width: 300px;
	max-width: 40vw;
	border-radius: 180px 180px 18px 18px;
	overflow: hidden;
	aspect-ratio: 3 / 3.4;
	box-shadow: 0 24px 48px rgba(46, 36, 29, 0.16);
	flex-shrink: 0;
}

.hk-archive-head-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* price filter */

.hk-price-row { display: flex; align-items: center; gap: 8px; margin-top: 14px; }

body.hk .hk-price-row input {
	flex: 1;
	min-width: 0;
	padding: 11px 14px;
	border-radius: 999px;
	border: 1px solid var(--hk-dash);
	background: var(--hk-cream);
	font-family: var(--hk-sans);
	font-size: 14.5px;
	color: var(--hk-ink);
}

.hk-price-dash { color: var(--hk-tan); }

.hk-clear-filters {
	display: inline-block;
	margin-top: 12px;
	font-size: 13.5px;
	color: var(--hk-muted);
	border-bottom: 1px solid var(--hk-dash);
}

.hk-clear-filters:hover { color: var(--hk-accent); }

/* WooCommerce prints the loop as <ul class="products"> — the grid is applied
   to it directly so the markup stays semantic. */
body.hk ul.products {
	display: grid;
	grid-template-columns: repeat(var(--hk-cols, 3), minmax(0, 1fr));
	gap: 36px 26px;
	margin: 34px 0 0;
	padding: 0;
	list-style: none;
}

/*
 * Wrestling the column count back from the parent theme.
 *
 * It forces `grid-template-columns: repeat(5, …) !important` on
 * `.woocommerce ul.products[class*="columns-"]`, and repeats that at two
 * breakpoints, so --hk-cols above was being ignored everywhere: the Related
 * Products strip laid four products across FIVE tracks, which is why the
 * cards came out different widths.
 *
 * The attribute selector is matched here so this lands at (0,3,2) against
 * the parent's (0,3,1) — enough to win at every breakpoint, while still
 * driving the count from --hk-cols so the theme's own media queries work.
 */
body.hk ul.products,
body.hk ul.products[class*="columns-"] {
	grid-template-columns: repeat(var(--hk-cols, 3), minmax(0, 1fr)) !important;
}

/*
 * A grid item's default min-width is auto, meaning it refuses to shrink below
 * its longest unbreakable content — so each card was as wide as its own title
 * and category line demanded (230, 248, 233 and 308px in one row) rather than
 * the width of its track. min-width: 0 lets every card take its track's width.
 */
body.hk ul.products > .hk-product,
body.hk ul.products > li.product,
body.hk .hk-products > .hk-product {
	min-width: 0;
	/*
	 * width: 100% as well as min-width: 0.
	 *
	 * min-width alone left the last card 308px wide in a 292px track, hanging
	 * 16px past the strip. Neither max-width: 100% nor justify-self: stretch
	 * corrected it — only an explicit width did. The cards are border-box, so
	 * 100% is exactly the track and every card ends up identical.
	 */
	width: 100%;
}

body.hk.tax-product_cat ul.products,
body.hk .hk-archive-body.is-full ul.products { --hk-cols: 4; }

/*
 * Responsive column counts for the MAIN grids.
 *
 * These never had their own: the parent theme's !important rules were doing
 * the responsive work (3 columns at 1024, 2 at 768). Taking the column count
 * back above meant taking that job on too — without these, the shop rendered
 * three 103px cards across a phone and a category four 74px ones.
 *
 * Related and upsells are deliberately not listed: their own rules further
 * down carry the same specificity and come later, so they keep their wider
 * cards on small screens.
 */
@media (max-width: 1024px) {
	body.hk ul.products,
	body.hk.tax-product_cat ul.products,
	body.hk .hk-archive-body.is-full ul.products { --hk-cols: 3; }
}

@media (max-width: 720px) {
	body.hk ul.products,
	body.hk.tax-product_cat ul.products,
	body.hk .hk-archive-body.is-full ul.products { --hk-cols: 2; }
}

body.hk ul.products::before,
body.hk ul.products::after { content: none; display: none; }

body.hk ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}

/* ==================================================== SINGLE PRODUCT */

.hk-woo-content.is-bare .product {
	max-width: var(--hk-max);
	margin: 0 auto;
	padding: 30px var(--hk-gutter) 0;
}

/*
 * Two-column layout.
 *
 * The grid goes on .hk-product-grid — the PARENT theme's wrapper inside
 * div.product — not on div.product itself. The parent's content-single-product.php
 * places three direct children in it: h1.product_title (row 1), the gallery and
 * the summary (row 2). Tabs, upsells and related are siblings of that wrapper, so
 * they flow full width below without needing any grid-column rules.
 *
 * (This theme's own loop grid is .hk-products. It was renamed from
 * .hk-product-grid precisely because the parent already owns that name here.)
 */
body.hk.single-product .hk-product-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
	gap: 20px 56px;
	align-items: start;
}

body.hk.single-product .hk-product-grid > .product_title { grid-column: 1 / -1; }

body.hk.single-product .hk-product-grid > .woocommerce-product-gallery {
	grid-column: 1;
	position: sticky;
	top: 96px;
}

body.hk.single-product .hk-product-grid > .summary { grid-column: 2; margin: 0; }

/*
 * GALLERY — thumbnails in a column on the LEFT at 1:1, main image at 4:5.
 *
 * These rules style markup this theme renders itself, in
 * woocommerce/single-product/product-image.php. The previous attempt targeted
 * flexslider's runtime DOM (.flex-viewport, .flex-control-thumbs) and lost to it —
 * width applied while height, aspect-ratio and flex-direction did not, because
 * flexslider writes inline styles after CSS is resolved. Owning the markup makes
 * this deterministic. The .flex-* rules further down are retained only as a
 * fallback in case a plugin re-enables the slider.
 */
body.hk .hk-gallery {
	position: sticky;
	top: 96px;
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	opacity: 1 !important;
}

/* Main stage — 4:5, exactly as the comp. */
body.hk .hk-gallery-stage {
	position: relative;
	grid-column: 2;
	grid-row: 1;
	border-radius: var(--hk-r-lg);
	overflow: hidden;
	background: var(--hk-cream-2);
	/*
	 * Ratio comes from the product's own main photo — product-image.php sets
	 * --hk-stage-ratio, clamped to 0.75–1.2. A fixed 4:5 frame suited a
	 * catalogue shot to 4:5; this one is mostly square, so cover-cropping into
	 * portrait discarded 20% of a square photo and 47% of a landscape one.
	 * The 4/5 fallback keeps the old shape if the var is ever missing.
	 */
	aspect-ratio: var(--hk-stage-ratio, 0.8);
	min-width: 0;
	box-shadow: 0 26px 54px rgba(46, 36, 29, 0.12);
}

body.hk .hk-gallery-shot {
	position: absolute;
	inset: 0;
	margin: 0;
	display: none;
}

body.hk .hk-gallery-shot.is-active { display: block; }

/*
 * contain, not cover.
 *
 * The frame is now cut to the main photo's own proportions, so that photo
 * fills it edge to edge with nothing cropped and no letterboxing. Additional
 * gallery photos that were shot at a different ratio show a little of the
 * cream backdrop rather than losing their edges — on a handmade piece, seeing
 * the whole object matters more than filling every pixel of the frame.
 */
body.hk .hk-gallery-shot img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	border-radius: 0;
}

/*
 * Thumbnail rail — 1:1, stacked, left, six at a time.
 *
 * The rail is a native scroll container rather than a translated track. Native
 * scrolling keeps the wheel, the keyboard and touch working for free, and means
 * a thumbnail selected by the arrow keys can be brought into view with
 * scrollIntoView instead of arithmetic the JS would have to keep in sync with
 * the CSS. The arrows just page it.
 */
/*
 * The rail ends where the main image ends.
 *
 * Now that the stage's height follows each product's own photo, a wide photo
 * makes a short stage — and a fixed six-thumbnail column then hung well below
 * it. height: 0 keeps the rail out of the grid row's own sizing so the stage
 * alone decides how tall the row is, and min-height: 100% then stretches the
 * rail back to exactly that height. The thumbnails scroll inside it as before.
 */
body.hk .hk-gallery-rail {
	/*
	 * Applies to EVERY rail, not just paged ones. Scoping it to .is-paged (more
	 * than six photos) left a six-photo product's 554px column hanging 134px
	 * below a wide product's short stage.
	 */
	height: 0;
	min-height: 100%;
}

body.hk .hk-gallery-rail {
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
	display: grid;
	gap: 6px;
	justify-items: center;
}

body.hk .hk-gallery-thumbs {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	overflow: hidden;
}

/*
 * Cap the rail at N thumbs: N tall plus the N-1 gaps between them. Set from the
 * template so PHP and CSS cannot disagree about how many fit.
 */
body.hk .hk-gallery-rail .hk-gallery-thumbs {
	--hk-thumb-size: 84px;
	/*
	 * min() of the two limits: the six-per-page cap the design asks for, and
	 * the height of the main image beside it. Whichever is smaller wins, so the
	 * rail never shows more than six and never outruns the stage.
	 */
	max-height: min(
		calc(
			(var(--hk-thumb-size) * var(--hk-thumbs-per-page, 6)) +
			(10px * (var(--hk-thumbs-per-page, 6) - 1))
		),
		100%
	);
	overflow-y: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;           /* Firefox */
	-ms-overflow-style: none;        /* legacy Edge */
}

/* The arrows are the affordance; a scrollbar beside them is visual noise. */
body.hk .hk-gallery-rail .hk-gallery-thumbs::-webkit-scrollbar {
	width: 0;
	height: 0;
}

body.hk .hk-rail-arrow {
	width: 84px;
	height: 26px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid var(--hk-line-2);
	border-radius: var(--hk-r-sm);
	background: var(--hk-cream-2);
	color: var(--hk-ink);
	cursor: pointer;
	transition: border-color 0.15s ease, opacity 0.15s ease;
}

body.hk .hk-rail-arrow:hover { border-color: var(--hk-accent); }
body.hk .hk-rail-arrow[hidden] { display: none; }

/* Reachable by keyboard, and visibly so. */
body.hk .hk-rail-arrow:focus-visible,
body.hk .hk-zoom-btn:focus-visible {
	outline: 2px solid var(--hk-accent);
	outline-offset: 2px;
}

body.hk .hk-gallery-thumb {
	width: 84px;
	height: 84px;
	padding: 0;
	overflow: hidden;
	border-radius: var(--hk-r-sm);
	border: 1px solid var(--hk-line-2);
	background: var(--hk-cream-2);
	cursor: pointer;
	flex: 0 0 auto;
	transition: border-color 0.15s ease;
}

body.hk .hk-gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

body.hk .hk-gallery-thumb.is-active { border: 2px solid var(--hk-accent); }
body.hk .hk-gallery-thumb:hover { border-color: var(--hk-accent); }

/* The rotating seal, bottom-right of the main image. */
body.hk .hk-gallery-stage .hk-seal {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 2;
}

body.hk .hk-gallery-stage .hk-seal-mark { font-size: 21px; }
body.hk .hk-gallery-stage .hk-seal-spin text { font-size: 8.4px; letter-spacing: 2.4px; }

body.hk .hk-gallery .onsale {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 3;
	margin: 0;
	padding: 8px 15px;
	border-radius: 999px;
	background: var(--hk-accent);
	color: var(--hk-cream);
	font-size: 11.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1;
	min-height: 0;
	min-width: 0;
}

body.hk .hk-gallery-stage > .onsale { top: 16px; left: 16px; }
body.hk .hk-gallery-hook { grid-column: 1 / -1; }

/*
 * "Ships from USA / UK" — shown only to shoppers standing next to the stock.
 *
 * Rendered hidden by PHP and revealed by theme.js, because the product page is
 * cached and the server cannot know who is reading it.
 */
body.hk .hk-ships-from {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(74, 122, 89, 0.12);
	color: #3d6b4c;
	font-size: 12px;
	letter-spacing: 0.04em;
	line-height: 1.4;
	white-space: nowrap;
}

body.hk .hk-ships-from[hidden] { display: none; }

body.hk .hk-ships-from::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
 * Gallery: zoom control, swipe counter, lightbox
 * ---------------------------------------------------------------------- */

body.hk .hk-zoom-btn {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid rgba(46, 36, 29, 0.12);
	border-radius: 999px;
	background: rgba(255, 253, 250, 0.9);
	color: var(--hk-ink);
	cursor: zoom-in;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: background 0.15s ease, transform 0.15s ease;
}

body.hk .hk-zoom-btn:hover { background: var(--hk-cream); transform: scale(1.05); }

/*
 * Desktop gets magnify-on-hover as well as the lightbox: it is the gesture
 * people already expect on a product photo, and on a handmade piece the stitch
 * detail is the thing being sold. Driven by --hk-zoom-x/y, which theme.js sets
 * from the pointer. Touch never triggers :hover, so this stays desktop-only by
 * construction rather than by a breakpoint guess.
 */
@media (hover: hover) and (pointer: fine) {
	body.hk .hk-gallery-shot.is-active img {
		transition: transform 0.25s ease;
		transform-origin: var(--hk-zoom-x, 50%) var(--hk-zoom-y, 50%);
	}

	body.hk .hk-gallery-stage.is-magnifying .hk-gallery-shot.is-active img {
		transform: scale(1.9);
		transition: transform 0.12s ease-out;
	}

	body.hk .hk-gallery-stage.is-magnifying { cursor: zoom-in; }
}

@media (prefers-reduced-motion: reduce) {
	body.hk .hk-gallery-shot.is-active img { transition: none; }
	body.hk .hk-gallery-stage.is-magnifying .hk-gallery-shot.is-active img { transform: none; }
}

/* "3 / 10" under the stage on touch — tells the shopper swiping is possible. */
body.hk .hk-gallery-count {
	display: none;
	margin: 0;
	text-align: center;
	font-size: 12.5px;
	letter-spacing: 0.08em;
	color: var(--hk-ink-soft, #7a6a5d);
}

/* Lightbox. */
body.hk .hk-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	grid-template-rows: auto 1fr auto;
	background: rgba(28, 22, 18, 0.94);
	/*
	 * Light text set on the ROOT, not on each strip.
	 *
	 * Only .hk-lightbox-bar used to declare it, so the close button inherited a
	 * readable cream while the four buttons in the footer inherited the page's
	 * dark ink — near-black icons on a near-black backdrop, leaving four blank
	 * circles. Declaring it once here means anything added to this overlay later
	 * is legible by default rather than by remembering to repeat it.
	 */
	color: rgba(255, 253, 250, 0.92);
	opacity: 0;
	transition: opacity 0.18s ease;
	touch-action: none;
}

body.hk .hk-lightbox.is-open { opacity: 1; }
body.hk .hk-lightbox[hidden] { display: none; }

body.hk .hk-lightbox-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	color: rgba(255, 253, 250, 0.92);
	font-size: 13px;
	letter-spacing: 0.08em;
}

body.hk .hk-lightbox-btn {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	padding: 0;
	/*
	 * A brighter ring and a faint fill. At 0.28 alpha on transparent the circles
	 * read as smudges against a photo showing through the backdrop rather than as
	 * controls; these give them an edge at any brightness of image behind.
	 */
	border: 1px solid rgba(255, 253, 250, 0.55);
	border-radius: 999px;
	background: rgba(255, 253, 250, 0.1);
	color: rgba(255, 253, 250, 0.96);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

body.hk .hk-lightbox-btn:hover {
	background: rgba(255, 253, 250, 0.22);
	border-color: rgba(255, 253, 250, 0.85);
}
body.hk .hk-lightbox-btn:focus-visible { outline: 2px solid var(--hk-cream); outline-offset: 2px; }
body.hk .hk-lightbox-btn[disabled] { opacity: 0.35; cursor: default; }

body.hk .hk-lightbox-stage {
	position: relative;
	overflow: hidden;
	min-height: 0;
}

/*
 * Absolutely positioned, not a centred grid item.
 *
 * As a grid item the image's `max-height: 100%` never resolved — a percentage
 * max-height against a grid area Chrome treats as indefinite is dropped — so a
 * 1200x1600 photo rendered at full 1600px height inside a 758px stage. It hung
 * far below the fold with its middle underneath the button bar, which is why
 * dragging it did nothing: the pointer went down on the toolbar, not the photo.
 *
 * Insets of 0 with `margin: auto` give a definite containing block, so the
 * percentages resolve, and centre it in both axes. Width and height stay auto so
 * the element box remains exactly the photo box — which the pan clamp measures,
 * and which object-fit would have hidden behind letterboxing.
 */
body.hk .hk-lightbox-img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	/*
	 * The transform is written by JS on every pan frame, so it must not be
	 * transitioned — an eased transform lags a finger and feels broken. The
	 * class-based zoom steps opt back in.
	 */
	transform-origin: center center;
	cursor: zoom-in;
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
}

body.hk .hk-lightbox-img.is-zoomed { cursor: grab; }
body.hk .hk-lightbox-img.is-eased { transition: transform 0.2s ease; }
body.hk .hk-lightbox.is-panning .hk-lightbox-img { cursor: grabbing; }

body.hk .hk-lightbox-foot {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px 16px 18px;
}

body.hk .hk-lightbox-hint {
	color: rgba(255, 253, 250, 0.6);
	font-size: 12px;
	letter-spacing: 0.06em;
}

@media (max-width: 720px) {
	body.hk .hk-gallery { position: static; top: auto; grid-template-columns: minmax(0, 1fr); gap: 10px; }
	body.hk .hk-gallery-stage { grid-column: 1; grid-row: 1; }

	/*
	 * The rail turns horizontal and its arrows turn with it: left and right
	 * either side of the track, three explicit columns.
	 *
	 * Explicit, because letting the track size itself did not work. As an
	 * auto-width flex container it shrink-to-fit to its 952px of content instead
	 * of filling the 342px parent, so clientWidth equalled scrollWidth: nothing
	 * to scroll, and the row spilled out past both edges of the phone. A
	 * minmax(0, 1fr) track plus an explicit width pins it to the container and
	 * gives the overflow somewhere to go.
	 */
	/*
	 * Undo the desktop height trick: the phone rail is a horizontal row.
	 * Must match the base selector, not .is-paged — the desktop rule applies to
	 * every rail, so scoping the reset narrower collapsed any rail with six or
	 * fewer photos to zero height on a phone.
	 */
	body.hk .hk-gallery-rail { height: auto; min-height: 0; }
	body.hk .hk-gallery-rail .hk-gallery-thumbs { max-height: none; }

	body.hk .hk-gallery-rail {
		grid-column: 1;
		grid-row: 2;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		justify-items: stretch;
		/* No gap: a hidden arrow collapses its track to zero, and a surviving
		   gap would shift the row off centre. The arrows carry their own margin. */
		gap: 0;
		min-width: 0;
	}

	body.hk .hk-gallery-count { display: block; grid-column: 1; grid-row: 3; }

	/* Arrows flank the row rather than capping a column. */
	body.hk .hk-rail-arrow {
		width: 26px;
		height: 64px;
		margin: 0 4px;
	}

	body.hk .hk-rail-arrow.is-prev { grid-column: 1; }
	body.hk .hk-rail-arrow.is-next { grid-column: 3; }
	/*
	 * -90, not +90. The markup ships an up-chevron for "earlier" and a
	 * down-chevron for "more", which is right for the desktop column. Turning
	 * them clockwise pointed earlier-photos to the RIGHT and more-photos to the
	 * LEFT — each arrow denying the direction it actually scrolls. Anticlockwise
	 * maps up to left and down to right, which is what the row needs.
	 */
	body.hk .hk-rail-arrow svg { transform: rotate(-90deg); }

	body.hk .hk-gallery-rail .hk-gallery-thumbs {
		grid-column: 2;
		grid-row: 1;
		width: 100%;
		min-width: 0;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-behavior: smooth;
		/* The arrows are the affordance; a scrollbar under the row is noise. */
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	body.hk .hk-gallery-rail .hk-gallery-thumbs::-webkit-scrollbar {
		width: 0;
		height: 0;
	}

	/* Row 1 for everything, so nothing can auto-place onto a second row. */
	body.hk .hk-rail-arrow { grid-row: 1; }

	/*
	 * The stage owns horizontal gestures so a swipe changes the photo instead of
	 * scrolling the page; pan-y keeps vertical scrolling on the image itself.
	 */
	body.hk .hk-gallery-stage {
		touch-action: pan-y;
	}

	body.hk .hk-gallery-thumbs {
		/*
		 * No grid placement here.
		 *
		 * This rule used to say `grid-column: 1; grid-row: 2`, from when the
		 * thumbnails were a direct child of .hk-gallery and had to sit under the
		 * main image. They are now a child of .hk-gallery-rail, so that row 2 was
		 * being applied inside the RAIL's grid instead — pinning the strip to a
		 * second row and leaving the arrows to auto-place into the first, which is
		 * why the arrow floated above the thumbnails rather than beside them.
		 * The rail places its own children; this rule only styles them.
		 */
		flex-direction: row;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	body.hk .hk-gallery-thumb { width: 64px; height: 64px; }
	body.hk .hk-gallery-stage .hk-seal { width: 72px !important; height: 72px !important; right: 12px; bottom: 12px; }
}

/*
 * FALLBACK ONLY — flexslider layout, in case a plugin re-enables the gallery
 * slider theme supports. Not used by this theme's own template.
 */
body.hk.single-product .woocommerce-product-gallery {
	/*
	 * sticky, not relative. This selector outscores the earlier
	 * `.hk-product-grid > .woocommerce-product-gallery` rule, so declaring
	 * `position: relative` here would silently kill the sticky gallery the comp
	 * specifies. Sticky still establishes the containing block the sale badge
	 * needs.
	 */
	position: sticky;
	top: 96px;
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	gap: 14px;
	align-items: start;

	/*
	 * The parent theme's product-image.php ships inline `opacity: 0`, revealed
	 * by WooCommerce's gallery JS. If that script is ever blocked or deferred the
	 * gallery stays invisible, so force it visible.
	 */
	opacity: 1 !important;
}

/* Main image area — 4:5. */
body.hk.single-product .woocommerce-product-gallery .flex-viewport,
body.hk.single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	grid-column: 2;
	grid-row: 1;
	border-radius: var(--hk-r-lg);
	overflow: hidden;
	background: var(--hk-cream-2);
	aspect-ratio: 4 / 5;
	/* flexslider writes an inline pixel height while animating. */
	height: auto !important;
	min-width: 0;
}

body.hk.single-product .flex-viewport > .woocommerce-product-gallery__wrapper { height: 100%; }

body.hk.single-product .woocommerce-product-gallery__image,
body.hk.single-product .woocommerce-product-gallery__image > a {
	display: block;
	height: 100%;
}

/*
 * Only the selected photo is ever on screen.
 *
 * The rule directly above is (0,3,1) and applies to the FIRST figure, which
 * carries WooCommerce's .woocommerce-product-gallery__image class. It beat
 * `body.hk .hk-gallery-shot { display: none }` at (0,2,1), so photo 1 stayed
 * displayed forever — sitting behind every other photo the shopper picked.
 * While the shots were object-fit: cover that was invisible, because the
 * selected photo covered every pixel of the frame. Switching to contain gave
 * the newer photo letterbox margins, and photo 1 showed through them.
 *
 * (0,4,1) so it outranks that rule whichever order the files load in.
 */
body.hk.single-product .hk-gallery-shot:not(.is-active) {
	display: none;
}

/*
 * Kept in step with .hk-gallery-shot img above — contain, not cover.
 *
 * This selector is (0,3,1) and quietly outscored the (0,2,1) rule that
 * switched the gallery to contain, so the FIRST shot (the one WooCommerce
 * tags .woocommerce-product-gallery__image, i.e. the one every shopper sees
 * first) carried on cropping while the rest did not.
 */
body.hk.single-product .woocommerce-product-gallery__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0;
	display: block;
}

/* Thumbnail column — 1:1, stacked, left. */
body.hk.single-product .woocommerce-product-gallery .flex-control-thumbs {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.hk.single-product .flex-control-thumbs li {
	margin: 0;
	width: 84px;
	list-style: none;
}

body.hk.single-product .flex-control-thumbs li::before { content: none; }

body.hk.single-product .flex-control-thumbs img {
	width: 84px;
	height: 84px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	border-radius: var(--hk-r-sm);
	border: 1px solid var(--hk-line-2);
	background: var(--hk-cream-2);
	opacity: 1;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

body.hk.single-product .flex-control-thumbs img.flex-active,
body.hk.single-product .flex-control-thumbs img:hover { border: 2px solid var(--hk-accent); }

/* Sale badge — the parent renders it inside the gallery for this reason. */
body.hk.single-product .woocommerce-product-gallery .onsale {
	position: absolute;
	top: 16px;
	left: calc(84px + 14px + 16px);
	z-index: 2;
	margin: 0;
	padding: 8px 15px;
	border-radius: 999px;
	background: var(--hk-accent);
	color: var(--hk-cream);
	font-size: 11.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	min-height: 0;
	min-width: 0;
	line-height: 1;
}

/* Zoom/lightbox trigger sits over the image. */
body.hk.single-product .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
}

body.hk.single-product .product_title {
	font-family: var(--hk-serif);
	font-weight: 400;
	font-size: clamp(32px, 3.6vw, 50px);
	line-height: 1.04;
	letter-spacing: -0.01em;
	margin: 14px 0 0;
	text-wrap: pretty;
}

/*
 * PRICE — the parent renders it inside .hcs-live-price so two scripts can find
 * it (the personalisation plugin reads `.summary .price`, the parent's theme.js
 * updates `.hcs-live-price p.price` on variation change). That wrapper is
 * reused verbatim in the new position rather than replaced. See the note in
 * inc/woocommerce.php.
 */
body.hk.single-product .hcs-live-price .price {
	font-family: var(--hk-serif);
	font-size: 30px;
	line-height: 1;
	color: var(--hk-accent);
	margin: 0;
}

/*
 * Price under the title, at the comp's scale. Repositioned in
 * inc/woocommerce.php; see the note there on why the parent's markup is reused.
 */
body.hk.single-product .hk-price-row {
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
	margin: 18px 0 0;
}

body.hk.single-product .hk-price-row .hcs-live-price { margin: 0; }

body.hk.single-product .hk-price-row .price {
	font-family: var(--hk-serif);
	font-size: clamp(32px, 3.4vw, 42px);
	line-height: 1;
	color: var(--hk-accent);
	margin: 0;
}

body.hk.single-product .hk-price-note { font-size: 14.5px; color: var(--hk-muted); }

/* Rating row: stars, review count, then the category. Sits above the title. */
body.hk.single-product .woocommerce-product-rating { flex-wrap: wrap; }

body.hk.single-product .hk-rating-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 14px;
	color: var(--hk-muted);
	margin: 0;
}

body.hk.single-product .hk-stars { letter-spacing: 2px; line-height: 1; }
body.hk.single-product .hk-star { color: var(--hk-line); }
body.hk.single-product .hk-star.is-on { color: var(--hk-gold); }
body.hk.single-product .hk-rating-count { color: var(--hk-muted); }
body.hk.single-product .hk-rating-count:hover { color: var(--hk-accent); }
body.hk.single-product .hk-rating-sep { color: var(--hk-tan); }
body.hk.single-product .hk-rating-cat { color: var(--hk-muted); }
body.hk.single-product .hk-rating-cat:hover { color: var(--hk-accent); }

body.hk.single-product .woocommerce-review-link { color: var(--hk-muted); font-size: 14px; }

/* Breadcrumb above the grid. */
body.hk.single-product .hk-crumbs {
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hk-muted);
	margin: 0 0 26px;
}

body.hk.single-product .hk-crumbs a { color: var(--hk-muted); }
body.hk.single-product .hk-crumbs a:hover { color: var(--hk-accent); }
body.hk.single-product .hk-crumb-sep { margin: 0 8px; color: var(--hk-tan); }

/* Short description, directly under the price. */
body.hk.single-product .hk-blurb {
	margin: 18px 0 0;
	max-width: 520px;
}

body.hk.single-product .hk-blurb p {
	font-size: 17px;
	line-height: 1.65;
	color: var(--hk-body);
	margin: 0 0 10px;
}

body.hk.single-product .hk-blurb p:last-child { margin-bottom: 0; }

/* The three reassurance pills. */
body.hk.single-product .hk-chips-row {
	display: flex;
	gap: 10px;
	margin: 22px 0 0;
	flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   OPTIONS CARD
   The bordered card wrapping the personalisation fields, quantity and
   Add to cart. Only the wrapper is ours — everything inside is rendered by
   WooCommerce, the parent theme and the personalisation plugin, so the rules
   below reach in and restyle rather than expecting any particular markup.
   --------------------------------------------------------------------------- */

body.hk.single-product .hk-buybox {
	margin: 30px 0 0;
	border: 1px solid var(--hk-line);
	border-radius: 20px;
	background: var(--hk-panel);
	padding: 28px 28px 26px;
}

body.hk.single-product .hk-buybox-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

body.hk.single-product .hk-buybox-title {
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hk-accent);
}

body.hk.single-product .hk-buybox-min { font-size: 13px; color: var(--hk-muted); }

/*
 * The parent also prints the minimum inside form.cart, so with the card header
 * showing it the page said "Minimum order: 5 pieces" twice, two lines apart.
 * Hide the parent's copy only when the header is actually carrying the message.
 *
 * Its node is left in the DOM untouched — it is part of the parent's min-qty
 * machinery, and if this rule ever stops matching the result is a duplicate
 * message, not a missing one.
 *
 * Note this is the PRODUCT page notice, which the parent renders server-side and
 * never rewrites. The cart's .hcs-cart-min-qty-notice IS updated by the parent's
 * JS and is deliberately not touched here.
 */
body.hk.single-product .hk-buybox:has(.hk-buybox-min) form.cart .hcs-min-qty-notice {
	display: none;
}

body.hk.single-product .hk-buybox-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 18px 0 0;
	padding: 16px 0 0;
	border-top: 1px dashed var(--hk-line);
	font-size: 13.5px;
	color: var(--hk-muted);
}

body.hk.single-product .hk-buybox-wa { font-size: 13.5px; color: var(--hk-accent); }

/*
 * The parent also prints the delivery timeline inside form.cart, so the same
 * sentence appeared twice in the card. Hide its copy only when the foot is
 * carrying the message — same guard as the minimum-order note above, and the
 * same failure mode: a duplicate, never a blank.
 */
body.hk.single-product .hk-buybox:has(.hk-buybox-lead) .hcs-delivery-timeline {
	display: none;
}

/* The form sheds its own frame — the card is the frame now. */
body.hk.single-product .hk-buybox form.cart {
	margin: 20px 0 0;
	padding: 0;
	border: 0;
	background: none;
}

/* Quantity stepper: a pill with − and + around the native input. */
body.hk.single-product .hk-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--hk-dash);
	border-radius: 999px;
	overflow: hidden;
	background: var(--hk-cream);
}

body.hk.single-product .hk-qty-btn {
	width: 46px;
	height: 50px;
	border: 0;
	background: transparent;
	color: var(--hk-ink);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

body.hk.single-product .hk-qty-btn:hover:not(:disabled) { background: var(--hk-cream-2); }
body.hk.single-product .hk-qty-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/*
 * .quantity is styled elsewhere as a standalone pill, for contexts with no
 * stepper around it. Once the stepper wraps it, that pill became a second
 * rounded outline drawn inside the first — so it gives up its own frame here
 * and the .hk-qty shell is the only border.
 */
body.hk.single-product .hk-qty .quantity {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	display: block !important;
	width: auto !important;
	min-width: 0 !important;
}

/*
 * The parent sets the quantity input with `!important` on width, padding,
 * border-radius and font-size, and gives it a surface background — so inside the
 * stepper it drew a second rounded box around the number, a pill within a pill.
 * These must be !important to erase it; the stepper shell is the only frame.
 */
body.hk.single-product .hk-qty input.qty,
body.hk.single-product .hk-qty .quantity input.qty {
	width: 56px !important;
	height: 50px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	text-align: center !important;
	font-family: var(--hk-sans) !important;
	font-size: 17px !important;
	color: var(--hk-ink) !important;
	-moz-appearance: textfield;
	appearance: textfield;
}

body.hk.single-product .hk-qty input.qty:focus {
	outline: 2px solid var(--hk-accent);
	outline-offset: -4px;
}

body.hk.single-product .hk-qty input.qty::-webkit-outer-spin-button,
body.hk.single-product .hk-qty input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Quantity and Add to cart share one row; the button takes the slack. */
body.hk.single-product .hk-buybox .hk-cart-row {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 26px 0 0;
}

body.hk.single-product .hk-buybox .hk-cart-row .single_add_to_cart_button {
	flex: 1 1 220px;
	margin: 0;
}

/* Assurance bullets below the card. */
body.hk.single-product .hk-assure {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 26px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

body.hk.single-product .hk-assure-item {
	position: relative;
	padding-left: 16px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--hk-body);
}

body.hk.single-product .hk-assure-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--hk-accent);
}

/* ---------------------------------------------------------------------------
   TABS — pill row, per the comp. WooCommerce's own markup, restyled only.
   --------------------------------------------------------------------------- */

body.hk.single-product .woocommerce-tabs { margin: 92px 0 0; }

body.hk.single-product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0;
	padding: 0 0 14px;
	border: 0;
	border-bottom: 1px dashed var(--hk-dash);
	list-style: none;
}

body.hk.single-product .woocommerce-tabs ul.tabs::before,
body.hk.single-product .woocommerce-tabs ul.tabs::after,
body.hk.single-product .woocommerce-tabs ul.tabs li::before,
body.hk.single-product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

body.hk.single-product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 0;
	box-shadow: none;
}

body.hk.single-product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 11px 22px;
	border: 1px solid var(--hk-dash);
	border-radius: 999px;
	background: transparent;
	color: var(--hk-ink);
	font-size: 14.5px;
	font-weight: 400;
	text-decoration: none;
}

body.hk.single-product .woocommerce-tabs ul.tabs li a:hover { background: var(--hk-cream-2); }

body.hk.single-product .woocommerce-tabs ul.tabs li.active a {
	background: var(--hk-ink);
	border-color: var(--hk-ink);
	color: var(--hk-cream);
}

/*
 * Panel widths follow the comp: the Description is a full-width layout, while
 * Additional information and Reviews are single columns of prose and are capped
 * so the lines stay readable. A blanket max-width here would squash a rich
 * description into a column.
 */
body.hk.single-product .woocommerce-tabs .panel { margin: 44px 0 0; }

body.hk.single-product .woocommerce-tabs #tab-additional_information { max-width: 780px; }
body.hk.single-product .woocommerce-tabs #tab-reviews { max-width: 820px; }

body.hk.single-product .woocommerce-tabs .panel > h2:first-child {
	font-family: var(--hk-serif);
	font-weight: 400;
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.1;
	margin: 0 0 22px;
}

/*
 * WooCommerce prints "Description" as the panel's own <h2>. The rich
 * descriptions carry their own headings, so the generic one is redundant.
 */
body.hk.single-product .woocommerce-tabs #tab-description > h2:first-child:not(.hk-keep) {
	display: none;
}

/* ---------------------------------------------------------------------------
   RICH PRODUCT DESCRIPTIONS (.hk-desc)
   The layout itself is inline-styled in the description content so it survives
   independently of this theme. Only the handful of things an inline style
   cannot express live here.
   --------------------------------------------------------------------------- */

/* Safari keeps its own disclosure triangle; `list-style: none` alone misses it. */
body.hk .hk-desc summary::-webkit-details-marker { display: none; }

body.hk .hk-desc summary::marker { content: ""; }

body.hk .hk-desc summary { position: relative; padding-right: 28px; }

body.hk .hk-desc summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	color: var(--hk-accent);
	font-size: 20px;
	line-height: 1;
}

body.hk .hk-desc details[open] > summary::after { content: "\2212"; }

body.hk .hk-desc a { color: var(--hk-accent); }
body.hk .hk-desc h2 { color: inherit; }

/* The theme's prose bullets must not reach the description's own layout. */
body.hk .hk-desc ul,
body.hk .hk-desc li { list-style: none; }

@media (max-width: 720px) {
	body.hk .hk-desc h2 { font-size: 30px !important; }
	body.hk .hk-desc [style*="padding: 48px 40px"] { padding: 32px 22px !important; }
	body.hk .hk-desc [style*="padding: 36px 36px 32px"] { padding: 26px 22px !important; }
}

body.hk.single-product .hcs-live-price .price del { font-size: 20px; opacity: 0.5; margin-right: 8px; }
body.hk.single-product .hcs-live-price .price ins { text-decoration: none; }
body.hk.single-product .hcs-live-price .price small { font-size: 13px; color: var(--hk-muted); }

/* PARENT — info box: short description plus the trust lines. */
body.hk .hcs-info-box { margin: 18px 0 0; }

body.hk .woocommerce-product-details__short-description {
	font-size: 17px;
	line-height: 1.65;
	color: var(--hk-body);
	margin: 0;
	max-width: 520px;
}

body.hk .woocommerce-product-details__short-description p { margin: 0 0 12px; }

body.hk .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: var(--hk-muted);
	margin: 0;
}

body.hk .star-rating { color: var(--hk-gold); }

/* The options card: WooCommerce's add-to-cart form, dressed as the design's
   "Personalise this piece" panel. */
body.hk.single-product form.cart,
body.hk.single-product .hcs-bulk-order {
	margin: 30px 0 0;
	border: 1px solid var(--hk-line);
	border-radius: 20px;
	background: var(--hk-panel);
	padding: 28px;
}

body.hk.single-product form.cart::after { content: ''; display: table; clear: both; }

/* PARENT — the "Minimum order: N pieces" notice. */
body.hk .hcs-min-qty-notice {
	display: inline-block;
	margin: 0 0 14px;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--hk-pill);
	color: var(--hk-accent);
	font-size: 13px;
	letter-spacing: 0.04em;
}

/* PARENT — quantity + price row wrapper. */
body.hk .hcs-qty-price-row {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

body.hk.single-product .quantity {
	display: flex;
	align-items: center;
	border: 1px solid var(--hk-dash);
	border-radius: 999px;
	overflow: hidden;
	background: var(--hk-cream);
}

body.hk.single-product .quantity input.qty {
	width: 74px;
	height: 50px;
	border: 0;
	background: transparent;
	text-align: center;
	font-family: var(--hk-sans);
	font-size: 17px;
	color: var(--hk-ink);
	-moz-appearance: textfield;
}

body.hk.single-product .quantity input.qty::-webkit-outer-spin-button,
body.hk.single-product .quantity input.qty::-webkit-inner-spin-button {
	opacity: 1;
	height: 34px;
}

/*
 * ADD TO CART — every declaration below needs !important.
 *
 * The parent theme's assets/css/woocommerce.css sets this button with
 * `!important` on width, display, background, padding, font-size, font-weight
 * and box-shadow. Importance beats source order, so the ordinary rules that
 * used to live here never applied — which is why the button rendered with the
 * parent's pale pink halo (`rgba(232,165,152,.35)`, the old accent) and, more
 * damagingly, `width: 100% !important; display: block !important`, forcing it
 * onto its own line so the quantity stepper could never sit beside it.
 *
 * Matching that with !important at equal specificity means source order decides,
 * and hk-commerce is enqueued after the parent's sheet, so these win.
 */
body.hk.single-product .single_add_to_cart_button,
body.hk.single-product form.cart .single_add_to_cart_button,
body.hk.single-product .single_add_to_cart_button.button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	flex: 1 1 220px !important;
	min-width: 220px !important;
	min-height: 54px !important;
	padding: 17px 30px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--hk-accent) !important;
	color: var(--hk-cream) !important;
	font-family: var(--hk-sans) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.04em !important;
	text-align: center !important;
	cursor: pointer !important;
	box-shadow: 0 12px 26px rgba(180, 85, 47, 0.24) !important;
	transition: background-color 0.18s ease, box-shadow 0.18s ease !important;
	transform: none !important;
}

body.hk.single-product .single_add_to_cart_button:hover,
body.hk.single-product form.cart .single_add_to_cart_button:hover,
body.hk.single-product .single_add_to_cart_button.button:hover {
	background: var(--hk-accent-dark) !important;
	box-shadow: 0 14px 30px rgba(180, 85, 47, 0.32) !important;
	transform: none !important;
}

/*
 * On a variable product WooCommerce disables this button until an option is
 * chosen. The old rule dropped it to 55% opacity, which read as a washed-out
 * button rather than a deliberate one. A solid muted fill says "not yet"
 * without looking broken or low-contrast.
 */
body.hk.single-product .single_add_to_cart_button.disabled,
body.hk.single-product .single_add_to_cart_button.wc-variation-selection-needed,
body.hk.single-product form.cart .single_add_to_cart_button.disabled {
	opacity: 1 !important;
	background: var(--hk-tan) !important;
	color: #43362B !important;
	box-shadow: none !important;
	cursor: not-allowed !important;
}

/* Variation selects + personalisation fields from the add-ons plugin. */
body.hk.single-product table.variations { width: 100%; margin: 0 0 20px; border: 0; }
body.hk.single-product table.variations th,
body.hk.single-product table.variations td { padding: 0; border: 0; display: block; text-align: left; }
body.hk.single-product table.variations th.label { padding: 0 0 8px; }

/*
 * The parent styles this label as a bold uppercase 0.77rem eyebrow. Setting only
 * size and colour here left its font-weight, text-transform and letter-spacing
 * in place, so "Select Name Color" shouted while "Enter Name" beside it did not.
 * Every inherited property is reset explicitly.
 */
body.hk.single-product table.variations label {
	display: block;
	font-family: var(--hk-sans);
	font-size: 14.5px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.4;
	color: var(--hk-ink);
	margin-bottom: 0;
}

/*
 * The comp's caret sits inside the field, so the native arrow is replaced with
 * one drawn as a background image — a select cannot hold a pseudo-element.
 */
body.hk.single-product .hk-buybox table.variations select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23786650' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
}

body.hk.single-product .hk-buybox table.variations select:focus {
	border-color: var(--hk-accent);
	box-shadow: 0 0 0 3px rgba(180, 85, 47, 0.14);
	outline: none;
}

/*
 * WooCommerce only reveals .woocommerce-variation-add-to-cart once an option is
 * picked. The name field is moved out of it (see theme.js) so it is always
 * visible, which is what the comp shows; this keeps the remaining row tidy.
 */
body.hk.single-product .hk-buybox .woocommerce-variation-add-to-cart { margin: 0; }
body.hk.single-product .hk-buybox .single_variation_wrap { margin: 0; }
body.hk.single-product .hk-buybox .woocommerce-variation-price { margin: 0 0 16px; }

body.hk.single-product table.variations select,
body.hk .wapf-field-input input[type="text"],
body.hk .wapf-field-input input[type="number"],
body.hk .wapf-field-input textarea,
body.hk .wapf-field-input select {
	width: 100%;
	box-sizing: border-box;
	padding: 14px 18px;
	border-radius: var(--hk-r-sm);
	border: 1px solid var(--hk-dash);
	background: var(--hk-cream);
	font-family: var(--hk-sans);
	font-size: 16px;
	color: var(--hk-ink);
}

body.hk .wapf-field-label label {
	font-size: 14.5px;
	color: var(--hk-ink);
	margin-bottom: 8px;
}

body.hk .wapf--inner { margin-bottom: 18px; }
body.hk .reset_variations { font-size: 13.5px; color: var(--hk-muted); }

/* ------------------------------------- PARENT: bulk-order grid (variable) */

body.hk .hcs-bulk-order__list { display: flex; flex-direction: column; gap: 10px; }

body.hk .hcs-bulk-order__row {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) 118px;
	gap: 14px;
	align-items: center;
	padding: 10px;
	border: 1px solid var(--hk-line);
	border-radius: var(--hk-r-sm);
	background: var(--hk-cream);
}

body.hk .hcs-bulk-order__thumb {
	width: 56px;
	height: 56px;
	border-radius: 10px;
	object-fit: cover;
	display: block;
	background: var(--hk-cream-2);
}

body.hk .hcs-bulk-order__label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body.hk .hcs-bulk-order__name { font-family: var(--hk-serif); font-size: 18px; line-height: 1.2; color: var(--hk-ink); }
body.hk .hcs-bulk-order__price { font-size: 14px; color: var(--hk-body); }

body.hk .hcs-bulk-order__input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border-radius: 999px;
	border: 1px solid var(--hk-dash);
	background: var(--hk-cream);
	font-family: var(--hk-sans);
	font-size: 15px;
	text-align: center;
	color: var(--hk-ink);
}

body.hk .hcs-bulk-order__footer {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px dashed var(--hk-dash);
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
}

body.hk .hcs-bulk-order__summary { display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; color: var(--hk-body); }
body.hk .hcs-bulk-order__total-label,
body.hk .hcs-bulk-order__total-price-label,
body.hk .hcs-bulk-order__min-label {
	font-size: 12.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hk-muted);
}

body.hk .hcs-bulk-order__total-value,
body.hk .hcs-bulk-order__min-value { color: var(--hk-ink); font-size: 16px; }
body.hk .hcs-bulk-order__total-price-value { font-family: var(--hk-serif); font-size: 24px; color: var(--hk-accent); }

/* The gate: red-ish while short, green-ish once met. */
body.hk .hcs-bulk-order__remaining {
	margin-top: 4px;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--hk-pill);
	color: var(--hk-accent);
	font-size: 13.5px;
	align-self: flex-start;
}

body.hk .hcs-bulk-order__remaining--met { background: #E7EDE0; color: #5E6E4C; }
body.hk .hcs-bulk-order__remaining-value { font-weight: 500; }
body.hk .hcs-bulk-order__remaining--met-icon { margin-right: 4px; }

body.hk .hcs-bulk-order__submit {
	padding: 17px 34px;
	border-radius: 999px;
	border: 0;
	background: var(--hk-accent);
	color: var(--hk-cream);
	font-family: var(--hk-sans);
	font-size: 16px;
	letter-spacing: 0.04em;
	cursor: pointer;
	box-shadow: 0 12px 26px rgba(180, 85, 47, 0.24);
	transition: background-color 0.18s ease;
}

body.hk .hcs-bulk-order__submit:hover:not([disabled]) { background: var(--hk-accent-dark); }
body.hk .hcs-bulk-order__submit[disabled] { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

body.hk .hcs-bulk-order-notice { margin: 0 0 14px; border-radius: var(--hk-r-sm); }

/*
 * PARENT — out-of-stock variation rows in the bulk grid, and the wrapper class
 * the parent adds to form.variations_form while the grid is active. When active
 * the parent's own inline CSS hides .variations, .single_variation_wrap,
 * .reset_variations and .hcs-qty-price-row, so the bulk grid fully replaces the
 * standard variation UI — and the live price is hidden with it. That is the
 * parent's behaviour and is left exactly as is.
 */
body.hk .hcs-bulk-order__row--disabled { opacity: 0.5; }
body.hk .hcs-bulk-order__input--disabled { background: var(--hk-cream-2); cursor: not-allowed; }

body.hk .hcs-bulk-order__oos {
	font-size: 12.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hk-muted);
}

body.hk .hcs-bulk-order__minimum,
body.hk .hcs-bulk-order__total,
body.hk .hcs-bulk-order__total-price { display: flex; align-items: baseline; gap: 8px; }

body.hk .hcs-min-qty-options { margin-bottom: 16px; }

/* PARENT — free-shipping note beside the price. */
body.hk .hcs-shipping-note {
	display: inline-block;
	font-size: 13px;
	color: var(--hk-sage);
	margin-left: 8px;
}

/* PARENT — order cancellation window notice, shown on account/order views. */
body.hk .hcs-cancel-notice {
	margin: 18px 0;
	padding: 14px 18px;
	border-radius: var(--hk-r-sm);
	border-left: 3px solid var(--hk-accent);
	background: var(--hk-panel);
	font-size: 14.5px;
	color: var(--hk-body);
}

body.hk .hcs-cancel-notice--eligible { border-left-color: var(--hk-sage); }
body.hk .hcs-cancel-notice--expired { border-left-color: var(--hk-dash); color: var(--hk-muted); }
body.hk .hcs-cancel-notice__time { color: var(--hk-ink); }

body.hk .hcs-cancel-notice__action {
	display: inline-block;
	margin-top: 10px;
	font-size: 13.5px;
	border-bottom: 1px solid var(--hk-dash);
}

body.hk .hcs-checkout-btn {
	padding: 15px 28px;
	border-radius: 999px;
	border: 0;
	background: var(--hk-accent);
	color: var(--hk-cream);
	font-family: var(--hk-sans);
	font-size: 16px;
	cursor: pointer;
}

body.hk .hcs-delivery-timeline--page { border-top: 0; padding-top: 0; margin-top: 12px; }
body.hk .hcs-wide { max-width: var(--hk-max); margin-left: auto; margin-right: auto; }

/* ========== PERSONALISATION BLOCK (crochet-personalization-pricing) ======
 *
 * The plugin adopts the tokens remapped in theme.css, so its colours are already
 * right. These rules align its spacing and type with the comp's options card, and
 * drop its own frame: it sits INSIDE form.cart, which is already the bordered
 * cream panel, so its border read as a box inside a box.
 */
body.hk .cpp-personalization-block {
	margin: 0 0 20px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	font-family: var(--hk-sans);
}

/*
 * Field labels, per the comp: sentence case, 14.5px, ink — NOT the uppercase
 * terracotta treatment, which in this design belongs to the card heading
 * ("PERSONALISE YOURS") alone. Using it on every field made three competing
 * eyebrows stack down the card.
 */
body.hk .cpp-label,
body.hk .cpp-notes-label {
	display: block;
	font-family: var(--hk-sans);
	font-size: 14.5px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--hk-ink);
	margin-bottom: 8px;
}

body.hk .cpp-required { color: var(--hk-accent); }
body.hk .cpp-notes-optional { text-transform: none; letter-spacing: 0; color: var(--hk-soft); }

/*
 * The plugin lays the field out as a flex ROW — input beside its character
 * counter — which left the input about two-thirds width while every other field
 * in the card ran full width. The comp has full-width inputs with the hint
 * pinned right, so the wrapper becomes a column and the counter sits under the
 * field, right-aligned.
 */
body.hk .cpp-field-wrapper {
	display: block;
	gap: 0;
	margin-bottom: 0;
}

body.hk .cpp-char-count-wrapper {
	display: block;
	text-align: right;
	margin-top: 6px;
}

body.hk .cpp-personalization-input,
body.hk .cpp-notes-input {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--hk-dash);
	border-radius: var(--hk-r-sm);
	background: var(--hk-cream);
	color: var(--hk-ink);
	font-family: var(--hk-sans);
	font-size: 16px;
	padding: 14px 18px;
}

body.hk .cpp-personalization-input:focus,
body.hk .cpp-notes-input:focus {
	border-color: var(--hk-accent);
	box-shadow: 0 0 0 3px rgba(180, 85, 47, 0.14);
}

body.hk .cpp-char-count-wrapper { font-size: 12.5px; color: var(--hk-soft); }
body.hk .cpp-char-count { font-weight: 400; color: var(--hk-ink); }
body.hk .cpp-validation-msg { font-style: normal; font-size: 13px; }

body.hk .cpp-pricing-display.is-active {
	border-top: 1px dashed var(--hk-dash);
	margin-top: 18px;
	padding-top: 16px;
}

body.hk .cpp-breakdown-row { font-size: 14px; color: var(--hk-body); }
body.hk .cpp-breakdown-value { color: var(--hk-ink); font-weight: 400; }

body.hk .cpp-total-row {
	background: var(--hk-cream-3);
	border: 1px solid var(--hk-line);
	border-radius: var(--hk-r-sm);
	padding: 12px 16px;
}

body.hk .cpp-total-label {
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: 0.1em;
	color: var(--hk-muted);
}

body.hk .cpp-total-price-amount {
	font-family: var(--hk-serif);
	font-weight: 400;
	font-size: 24px;
	color: var(--hk-accent);
}

body.hk .cpp-notes-block,
body.hk .cpp-second-name-block,
body.hk .cpp-photo-upload-block {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px dashed var(--hk-dash);
}

body.hk .cpp-file-dropzone {
	border: 2px dashed var(--hk-dash);
	border-radius: var(--hk-r-sm);
	background: var(--hk-cream);
}

body.hk .cpp-file-dropzone:hover,
body.hk .cpp-file-dropzone:focus { border-color: var(--hk-accent); background: var(--hk-cream-3); }
body.hk .cpp-dropzone-text { font-weight: 400; color: var(--hk-ink); font-size: 15px; }
body.hk .cpp-dropzone-hint { color: var(--hk-soft); font-size: 12.5px; }
body.hk .cpp-customizable-badge { border-radius: 999px; letter-spacing: 0.08em; }

/*
 * PARENT — trust lines.
 *
 * These are <span class="hcs-trust-signals__line"> inside a <div>, NOT list
 * items. Targeting `li` here silently matched nothing.
 */
body.hk .hcs-trust-signals {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 26px;
	margin: 20px 0 0;
}

body.hk .hcs-trust-signals__line {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--hk-body);
}

body.hk .hcs-trust-signals__line::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--hk-accent);
	margin-top: 8px;
	flex-shrink: 0;
}

/* PARENT — delivery timeline: icon + text, after the add-to-cart form. */
body.hk .hcs-delivery-timeline {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px dashed var(--hk-dash);
	font-size: 13.5px;
	color: var(--hk-muted);
}

body.hk .hcs-delivery-timeline__icon { color: var(--hk-accent); flex-shrink: 0; }
body.hk .hcs-delivery-timeline__text { line-height: 1.4; }

/* tabs */

body.hk .woocommerce-tabs { margin-top: 92px; }

body.hk .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	padding: 0 0 14px;
	margin: 0;
	border-bottom: 1px dashed var(--hk-dash);
	list-style: none;
}

body.hk .woocommerce-tabs ul.tabs::before { display: none; }

body.hk .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	border-radius: 999px;
}

body.hk .woocommerce-tabs ul.tabs li::before,
body.hk .woocommerce-tabs ul.tabs li::after { display: none; }

body.hk .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 11px 22px;
	border-radius: 999px;
	border: 1px solid var(--hk-dash);
	color: var(--hk-ink);
	font-size: 14.5px;
	font-weight: 400;
}

body.hk .woocommerce-tabs ul.tabs li.active a { background: var(--hk-ink); color: var(--hk-cream); border-color: var(--hk-ink); }
body.hk .woocommerce-tabs .panel { margin-top: 34px; max-width: 820px; }
body.hk .woocommerce-tabs .panel h2 { font-family: var(--hk-serif); font-weight: 400; font-size: 40px; line-height: 1.1; margin: 0 0 20px; }
body.hk .woocommerce-tabs .panel p { font-size: 17px; line-height: 1.7; color: var(--hk-body); }

body.hk .shop_attributes { width: 100%; border: 0; border-top: 1px dashed var(--hk-dash); }
body.hk .shop_attributes tr { border-bottom: 1px dashed var(--hk-dash); }

body.hk .shop_attributes th {
	width: 220px;
	padding: 16px 24px 16px 0;
	text-align: left;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hk-muted);
	background: transparent;
}

body.hk .shop_attributes td { padding: 16px 0; font-size: 16px; color: var(--hk-ink); font-style: normal; }
body.hk .shop_attributes td p { margin: 0; }

/* related */

body.hk .related,
body.hk .upsells { margin-top: 92px; padding-bottom: 96px; }

body.hk .related > h2,
body.hk .upsells > h2 {
	font-family: var(--hk-serif);
	font-weight: 400;
	font-size: clamp(30px, 3.2vw, 44px);
	line-height: 1.06;
	margin: 0 0 36px;
}

body.hk .related ul.products,
body.hk .upsells ul.products { --hk-cols: 4; margin-top: 0; }

/* ============================================================== CART */

body.hk .woocommerce-cart-form { margin: 0; }

/* ---------------------------------------------------------------------------
   CART PAGE FURNITURE
   The Cart block renders the rows, totals and buttons. Everything below is the
   theme's own markup from template-parts/cart.php, slotted into the block's
   two columns by theme.js.
   --------------------------------------------------------------------------- */

body.hk .hk-cart-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	margin-top: 14px;
}

body.hk .hk-cart-subline {
	font-size: 15px;
	color: var(--hk-body);
	margin: 0;
}

body.hk .hk-ship-bar {
	border: 1px solid var(--hk-line);
	border-radius: 18px;
	background: var(--hk-panel);
	padding: 18px 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 26px;
}

body.hk .hk-ship-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

body.hk .hk-ship-msg { font-size: 15px; color: var(--hk-ink); }
body.hk .hk-ship-goal { font-size: 13.5px; color: var(--hk-muted); }
body.hk .hk-ship-track { height: 7px; border-radius: 999px; background: var(--hk-pill); overflow: hidden; }
body.hk .hk-ship-fill { height: 100%; border-radius: 999px; background: var(--hk-accent); transition: width 0.35s ease; }
body.hk .hk-ship-bar.is-met .hk-ship-fill { background: var(--hk-sage); }

/*
 * Once the threshold is met the bar has nothing left to measure, and a meter
 * pinned at 100% reads as broken rather than as good news. Drop the track and
 * the target, and let the sentence stand on its own as reassurance.
 *
 * This matters more here than it looks: the store's free-shipping minimum is 40
 * in store currency — ₹40 — which every single product already exceeds, so this
 * is the state the bar is almost always in.
 */
body.hk .hk-ship-bar.is-met .hk-ship-track,
body.hk .hk-ship-bar.is-met .hk-ship-goal { display: none; }

body.hk .hk-ship-bar.is-met { padding: 15px 22px; }
body.hk .hk-ship-bar.is-met .hk-ship-msg { color: var(--hk-sage-ink, var(--hk-ink)); }

/* Continue shopping · help link. */
body.hk .hk-cart-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin: 26px 0 0;
}

body.hk .hk-cart-back {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	color: var(--hk-accent);
}

body.hk .hk-cart-help { font-size: 15px; color: var(--hk-muted); }
body.hk .hk-cart-help:hover { color: var(--hk-accent); }

/* "Add a little something". */
body.hk .hk-cart-upsell { margin: 54px 0 0; }

body.hk .hk-cart-upsell-title {
	font-family: var(--hk-serif);
	font-weight: 400;
	font-size: 30px;
	line-height: 1.1;
	margin: 0;
}

body.hk .hk-cart-upsell-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 20px 0 0;
}

body.hk .hk-upsell-card {
	display: flex;
	gap: 14px;
	border: 1px solid var(--hk-line);
	border-radius: 16px;
	background: var(--hk-panel);
	padding: 14px;
}

body.hk .hk-upsell-media {
	width: 68px;
	height: 68px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--hk-cream-2);
	flex-shrink: 0;
}

body.hk .hk-upsell-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

body.hk .hk-upsell-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

body.hk .hk-upsell-title {
	font-family: var(--hk-serif);
	font-size: 17px;
	line-height: 1.2;
	color: var(--hk-ink);
}

body.hk .hk-upsell-title:hover { color: var(--hk-accent); }

body.hk .hk-upsell-price { font-size: 14px; color: var(--hk-muted); }
body.hk .hk-upsell-price .amount { color: inherit; font-size: inherit; }

body.hk .hk-upsell-add {
	margin-top: 4px;
	align-self: flex-start;
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid var(--hk-dash);
	background: transparent;
	color: var(--hk-ink);
	font-size: 12.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

body.hk .hk-upsell-add:hover {
	background: var(--hk-ink);
	border-color: var(--hk-ink);
	color: var(--hk-cream);
}

/* "Made to order — what to expect", under the order summary. */
body.hk .hk-cart-notes {
	border-radius: 22px;
	background: var(--hk-cream-2);
	padding: 26px 26px 24px;
	margin: 0;
}

body.hk .hk-cart-notes-title {
	font-family: var(--hk-serif);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.2;
	margin: 0;
}

body.hk .hk-cart-notes-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

body.hk .hk-cart-notes-list li {
	position: relative;
	padding-left: 16px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--hk-body);
}

body.hk .hk-cart-notes-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--hk-accent);
}

body.hk .hk-cart-policy {
	display: inline-block;
	font-size: 14.5px;
	margin-top: 16px;
	color: var(--hk-accent);
	border-bottom: 1px solid var(--hk-accent);
	padding-bottom: 2px;
}

@media (max-width: 780px) {
	body.hk .hk-cart-upsell-grid { grid-template-columns: minmax(0, 1fr); }
}

body.hk table.shop_table.cart {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	border-top: 1px dashed var(--hk-dash);
	margin: 0;
}

body.hk table.shop_table.cart thead { display: none; }

body.hk table.shop_table.cart tr.woocommerce-cart-form__cart-item {
	border-bottom: 1px dashed var(--hk-dash);
}

body.hk table.shop_table.cart td {
	padding: 26px 0;
	border: 0;
	vertical-align: top;
	background: transparent;
}

body.hk td.product-thumbnail { width: 116px; padding-right: 22px; }

body.hk td.product-thumbnail img {
	width: 116px;
	height: 116px;
	border-radius: 14px;
	object-fit: cover;
	display: block;
	background: var(--hk-cream-2);
}

body.hk td.product-name a {
	font-family: var(--hk-serif);
	font-size: 24px;
	line-height: 1.2;
	color: var(--hk-ink);
}

body.hk td.product-name a:hover { color: var(--hk-accent); }

/* Personalisation values WooCommerce prints under the item name. */
body.hk td.product-name .variation,
body.hk td.product-name dl.variation {
	margin: 12px 0 0;
	border-left: 2px solid var(--hk-line-2);
	padding-left: 14px;
	font-size: 14px;
	color: var(--hk-body);
}

body.hk td.product-name dl.variation dt { color: var(--hk-soft); font-weight: 400; float: none; margin: 0; clear: both; }
body.hk td.product-name dl.variation dd { margin: 0 0 5px; }
body.hk td.product-name dl.variation p { margin: 0; }

body.hk td.product-name .hk-cart-min {
	display: inline-block;
	margin-top: 10px;
	font-size: 13.5px;
	color: var(--hk-accent);
}

body.hk td.product-quantity { width: 200px; }

body.hk td.product-quantity .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--hk-dash);
	border-radius: 999px;
	overflow: hidden;
	background: var(--hk-cream);
}

body.hk td.product-quantity input.qty {
	width: 68px;
	height: 44px;
	border: 0;
	background: transparent;
	text-align: center;
	font-family: var(--hk-sans);
	font-size: 16px;
	color: var(--hk-ink);
}

body.hk td.product-subtotal { text-align: right; white-space: nowrap; }

body.hk td.product-subtotal .woocommerce-Price-amount {
	font-family: var(--hk-serif);
	font-size: 26px;
	color: var(--hk-ink);
}

body.hk .hk-cart-each { display: block; font-size: 13px; color: var(--hk-muted); margin-top: 4px; }

body.hk td.product-remove,
body.hk th.product-remove { display: none; }

body.hk .hk-cart-remove {
	display: inline-block;
	margin-left: 16px;
	border: 0;
	background: transparent;
	color: var(--hk-muted);
	font-family: var(--hk-sans);
	font-size: 14px;
	cursor: pointer;
	padding: 0;
	border-bottom: 1px solid var(--hk-dash);
	text-decoration: none;
}

body.hk .hk-cart-remove:hover { color: var(--hk-accent); }

body.hk .hk-cart-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 26px; flex-wrap: wrap; }

/*
 * CART LAYOUT — achieved in CSS, with no cart.php override.
 *
 * A deliberate decision: WooCommerce's default cart.php renders the form and
 * .cart-collaterals as siblings, and gridding them here gets the design's
 * two-column layout without replacing the template. That leaves the cart
 * quantity inputs exactly as WooCommerce renders them, so the parent theme's
 * per-product min attribute and its cart-update validation are untouched. An
 * override would have put the site's minimum-order rules at risk for a purely
 * visual gain.
 */
/*
 * Only the SHORTCODE cart gets this two-column grid. This store uses the
 * WooCommerce Cart *block*, which brings its own two-column layout
 * (.wc-block-cart__main / __sidebar) — forcing a grid on its wrapper fights it.
 * :has() keeps the rule to carts that actually contain the shortcode form.
 */
body.hk.woocommerce-cart .hk-woo-content > .woocommerce:has(> form.woocommerce-cart-form) {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

body.hk.woocommerce-cart .hk-woo-content > .woocommerce:has(> form.woocommerce-cart-form) > .woocommerce-notices-wrapper,
body.hk.woocommerce-cart .hk-woo-content > .woocommerce:has(> form.woocommerce-cart-form) > .hk-ship-bar { grid-column: 1 / -1; }

body.hk.woocommerce-cart .hk-woo-content > .woocommerce:has(> form.woocommerce-cart-form) > form.woocommerce-cart-form { grid-column: 1; min-width: 0; }

body.hk.woocommerce-cart .cart-collaterals {
	grid-column: 2;
	width: auto;
	float: none;
	position: sticky;
	top: 96px;
	min-width: 0;
}

body.hk .cart-collaterals .cart_totals { width: auto; float: none; }
body.hk .cart-collaterals .cross-sells { grid-column: 1 / -1; }

body.hk .cart_totals > h2 {
	font-family: var(--hk-serif);
	font-weight: 400;
	font-size: 30px;
	margin: 0 0 4px;
}

/* The totals panel gets the design's card treatment. */
body.hk .cart_totals {
	border: 1px solid var(--hk-line);
	border-radius: var(--hk-r-lg);
	background: var(--hk-panel);
	padding: 30px 28px;
}

.hk-cart-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.hk-cart-aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.hk-summary {
	border: 1px solid var(--hk-line);
	border-radius: var(--hk-r-lg);
	background: var(--hk-panel);
	padding: 30px 28px;
}

.hk-summary-title { font-family: var(--hk-serif); font-size: 30px; }

body.hk .hk-summary table.shop_table {
	width: 100%;
	border: 0;
	margin: 22px 0 0;
	border-collapse: collapse;
}

body.hk .hk-summary table.shop_table th,
body.hk .hk-summary table.shop_table td {
	border: 0;
	padding: 6px 0;
	font-size: 15.5px;
	font-weight: 400;
	color: var(--hk-body);
	background: transparent;
}

body.hk .hk-summary table.shop_table td { text-align: right; color: var(--hk-ink); }
body.hk .hk-summary tr.cart-discount td { color: var(--hk-sage); }

body.hk .hk-summary tr.order-total th,
body.hk .hk-summary tr.order-total td {
	padding-top: 18px;
	border-top: 1px dashed var(--hk-dash);
}

body.hk .hk-summary tr.order-total th {
	font-size: 15px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hk-muted);
}

body.hk .hk-summary tr.order-total .woocommerce-Price-amount {
	font-family: var(--hk-serif);
	font-size: 38px;
	color: var(--hk-accent);
}

body.hk .wc-proceed-to-checkout { padding: 0; margin-top: 22px; }

body.hk .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	padding: 17px 26px;
	border-radius: 999px;
	background: var(--hk-accent);
	color: var(--hk-cream);
	font-family: var(--hk-sans);
	font-size: 16.5px;
	letter-spacing: 0.04em;
	text-align: center;
	box-shadow: 0 12px 26px rgba(180, 85, 47, 0.24);
	margin: 0;
}

body.hk .wc-proceed-to-checkout a.checkout-button:hover { background: var(--hk-accent-dark); color: var(--hk-cream); }

.hk-summary-note { font-size: 13px; color: var(--hk-muted); text-align: center; margin-top: 12px; }

body.hk .hk-coupon { margin-top: 24px; padding-top: 20px; border-top: 1px dashed var(--hk-dash); }

.hk-coupon-title {
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hk-muted);
}

body.hk .hk-coupon-row { display: flex; gap: 10px; margin-top: 10px; }

body.hk .hk-coupon-row input {
	flex: 1;
	min-width: 0;
	padding: 13px 16px;
	border-radius: 999px;
	border: 1px solid var(--hk-dash);
	background: var(--hk-cream);
	font-family: var(--hk-sans);
	font-size: 15px;
	color: var(--hk-ink);
}

body.hk .hk-coupon-row button {
	padding: 13px 20px;
	border-radius: 999px;
	border: 1px solid var(--hk-ink);
	background: transparent;
	color: var(--hk-ink);
	font-family: var(--hk-sans);
	font-size: 14px;
	cursor: pointer;
}

body.hk .hk-coupon-row button:hover { background: var(--hk-ink); color: var(--hk-cream); }

.hk-aside-card { border-radius: var(--hk-r-lg); background: var(--hk-cream-2); padding: 26px 26px 24px; }
.hk-aside-title { font-family: var(--hk-serif); font-size: 22px; }

.hk-cart-empty {
	border: 1px dashed var(--hk-dash);
	border-radius: var(--hk-r-xl);
	background: var(--hk-panel);
	padding: 76px 40px;
	text-align: center;
}

.hk-cart-empty-title { font-family: var(--hk-serif); font-size: 42px; line-height: 1.1; }
.hk-cart-empty-text { font-size: 17px; line-height: 1.6; color: var(--hk-body); margin: 14px auto 0; max-width: 440px; }

.hk-upsell-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }

.hk-upsell {
	display: flex;
	gap: 14px;
	border: 1px solid var(--hk-line);
	border-radius: var(--hk-r-md);
	background: var(--hk-panel);
	padding: 14px;
}

.hk-upsell-thumb { width: 68px; height: 68px; border-radius: var(--hk-r-sm); overflow: hidden; background: var(--hk-cream-2); flex-shrink: 0; }
.hk-upsell-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hk-upsell-title { font-family: var(--hk-serif); font-size: 17px; line-height: 1.2; }
.hk-upsell-price { font-size: 14px; color: var(--hk-muted); }

body.hk .hk-upsell .button {
	margin-top: 4px;
	align-self: flex-start;
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid var(--hk-dash);
	background: transparent;
	color: var(--hk-ink);
	font-family: var(--hk-sans);
	font-size: 12.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

body.hk .hk-upsell .button:hover { background: var(--hk-ink); color: var(--hk-cream); border-color: var(--hk-ink); }

/* ========================================================== CHECKOUT */

.hk-checkout-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 52px;
	align-items: start;
	max-width: 1200px;
	margin: 0 auto;
	padding: 42px var(--hk-gutter) 100px;
}

.hk-checkout-main { min-width: 0; }

.hk-step {
	margin-top: 20px;
	border: 1px solid var(--hk-line);
	border-radius: var(--hk-r-lg);
	background: var(--hk-panel);
	padding: 30px;
}

.hk-step:first-of-type { margin-top: 34px; }
.hk-step-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.hk-step-n { font-family: var(--hk-serif); font-size: 20px; color: var(--hk-tan); }
.hk-step-title { font-family: var(--hk-serif); font-size: 28px; }

.hk-chat-bar {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 26px;
	padding: 16px 20px;
	border-radius: var(--hk-r-md);
	background: var(--hk-cream-3);
	border: 1px solid var(--hk-line);
	flex-wrap: wrap;
	font-size: 14.5px;
	color: var(--hk-body);
}

body.hk .woocommerce-billing-fields h3,
body.hk .woocommerce-shipping-fields h3,
body.hk .woocommerce-additional-fields h3 { display: none; }

body.hk .woocommerce-checkout .form-row { padding: 0; margin: 0 0 16px; }

body.hk .woocommerce-checkout .form-row label {
	display: block;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hk-muted);
	margin-bottom: 8px;
}

body.hk .woocommerce-checkout .form-row label.checkbox { text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--hk-ink); }

body.hk .woocommerce-checkout .input-text,
body.hk .woocommerce-checkout select,
body.hk .woocommerce-checkout textarea,
body.hk .select2-container .select2-selection--single {
	width: 100%;
	box-sizing: border-box;
	padding: 14px 18px;
	height: auto;
	border-radius: var(--hk-r-sm);
	border: 1px solid var(--hk-dash);
	background: var(--hk-cream);
	font-family: var(--hk-sans);
	font-size: 16px;
	color: var(--hk-ink);
	outline: none;
}

body.hk .select2-container .select2-selection--single .select2-selection__rendered { padding: 0; line-height: 1.4; color: var(--hk-ink); }
body.hk .select2-container .select2-selection--single .select2-selection__arrow { top: 12px; right: 12px; }

body.hk .woocommerce-checkout .form-row-first,
body.hk .woocommerce-checkout .form-row-last { width: 48.5%; }

body.hk #order_review_heading { display: none; }

.hk-checkout-aside { position: sticky; top: 24px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }

body.hk .hk-order-review table.shop_table {
	width: 100%;
	border: 0;
	margin: 20px 0 0;
	border-collapse: collapse;
	border-top: 1px dashed var(--hk-dash);
}

body.hk .hk-order-review table.shop_table th,
body.hk .hk-order-review table.shop_table td {
	border: 0;
	border-bottom: 1px dashed var(--hk-dash);
	padding: 16px 0;
	font-size: 15.5px;
	font-weight: 400;
	background: transparent;
}

body.hk .hk-order-review td.product-name { color: var(--hk-ink); }
body.hk .hk-order-review .product-quantity { color: var(--hk-muted); font-size: 13px; }
body.hk .hk-order-review td.product-total,
body.hk .hk-order-review td[data-title] { text-align: right; white-space: nowrap; }
body.hk .hk-order-review tfoot th { color: var(--hk-body); }

body.hk .hk-order-review tfoot tr.order-total th {
	font-size: 14.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hk-muted);
}

body.hk .hk-order-review tfoot tr.order-total .woocommerce-Price-amount {
	font-family: var(--hk-serif);
	font-size: 36px;
	color: var(--hk-accent);
}

body.hk ul.wc_payment_methods {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	border: 0;
}

body.hk ul.wc_payment_methods li {
	padding: 16px 20px;
	border-radius: 14px;
	border: 1px solid var(--hk-dash);
	background: var(--hk-cream);
	margin: 0;
}

body.hk ul.wc_payment_methods li input[type="radio"]:checked + label { color: var(--hk-accent); }
body.hk ul.wc_payment_methods li label { font-size: 16px; color: var(--hk-ink); display: inline; }
body.hk .payment_box { background: transparent; padding: 10px 0 0; font-size: 14px; color: var(--hk-body); }
body.hk .payment_box::before { display: none; }

body.hk #place_order {
	width: 100%;
	margin-top: 20px;
	padding: 17px 26px;
	border-radius: 999px;
	border: 0;
	background: var(--hk-accent);
	color: var(--hk-cream);
	font-family: var(--hk-sans);
	font-size: 16.5px;
	letter-spacing: 0.04em;
	cursor: pointer;
	box-shadow: 0 12px 26px rgba(180, 85, 47, 0.24);
}

body.hk #place_order:hover { background: var(--hk-accent-dark); }

/* order received */

.hk-thanks { max-width: 820px; margin: 0 auto; padding: 90px var(--hk-gutter) 120px; text-align: center; }
.hk-thanks .hk-seal { margin: 0 auto; }
.hk-thanks-title { font-family: var(--hk-serif); font-weight: 400; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.04; margin: 30px 0 0; }

body.hk ul.woocommerce-order-overview {
	list-style: none;
	margin: 34px 0 0;
	padding: 26px;
	border: 1px solid var(--hk-line);
	border-radius: var(--hk-r-lg);
	background: var(--hk-panel);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 18px;
	text-align: left;
}

body.hk ul.woocommerce-order-overview li {
	border: 0;
	font-size: 12.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hk-muted);
	padding: 0;
}

body.hk ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 8px;
	font-family: var(--hk-serif);
	font-size: 22px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--hk-ink);
}

/* ======================================================== MY ACCOUNT */

.hk-account-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 48px; align-items: start; }

body.hk .woocommerce-MyAccount-navigation {
	width: auto;
	float: none;
	position: sticky;
	top: 96px;
}

body.hk .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

body.hk .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 12px 16px;
	border-radius: 10px;
	color: var(--hk-ink);
	font-size: 15.5px;
}

body.hk .woocommerce-MyAccount-navigation li a:hover { background: var(--hk-cream-2); }
body.hk .woocommerce-MyAccount-navigation li.is-active a { background: var(--hk-pill); color: var(--hk-accent); }

body.hk .woocommerce-MyAccount-content { width: auto; float: none; min-width: 0; }

.hk-account-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }

.hk-account-card {
	border: 1px solid var(--hk-line);
	border-radius: 20px;
	background: var(--hk-panel);
	padding: 26px 24px;
}

.hk-account-card-label { font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hk-muted); }
.hk-account-card-value { font-family: var(--hk-serif); font-size: 40px; line-height: 1; margin-top: 10px; }
.hk-account-card-note { font-size: 14px; color: var(--hk-body); margin-top: 6px; }

.hk-auth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }

.hk-auth-card {
	border: 1px solid var(--hk-line);
	border-radius: var(--hk-r-xl);
	background: var(--hk-panel);
	padding: 38px 36px 34px;
}

.hk-auth-card.is-tinted { background: var(--hk-cream-2); border-color: transparent; }
.hk-auth-title { font-family: var(--hk-serif); font-size: 32px; }

body.hk table.woocommerce-orders-table,
body.hk table.shop_table_responsive {
	width: 100%;
	border: 1px solid var(--hk-line);
	border-radius: var(--hk-r-lg);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--hk-panel);
}

body.hk table.woocommerce-orders-table th {
	background: var(--hk-cream-3);
	padding: 16px 26px;
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hk-muted);
	text-align: left;
	border: 0;
}

body.hk table.woocommerce-orders-table td {
	padding: 20px 26px;
	border: 0;
	border-top: 1px dashed var(--hk-line);
	font-size: 15px;
	color: var(--hk-body);
}

body.hk table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-number a { color: var(--hk-ink); }

body.hk .woocommerce-orders-table .button,
body.hk .woocommerce-MyAccount-content .button {
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px solid var(--hk-dash);
	background: transparent;
	color: var(--hk-ink);
	font-family: var(--hk-sans);
	font-size: 13.5px;
}

body.hk .woocommerce-MyAccount-content .button:hover { background: var(--hk-ink); color: var(--hk-cream); border-color: var(--hk-ink); }

body.hk .woocommerce-MyAccount-content form .button,
body.hk .woocommerce-form-login .button,
body.hk .woocommerce-form-register .button {
	padding: 16px 30px;
	border-radius: 999px;
	border: 0;
	background: var(--hk-accent);
	color: var(--hk-cream);
	font-size: 16px;
	box-shadow: 0 12px 26px rgba(180, 85, 47, 0.22);
}

body.hk .woocommerce-form-login .button:hover,
body.hk .woocommerce-form-register .button:hover { background: var(--hk-accent-dark); color: var(--hk-cream); }

body.hk .woocommerce-Address {
	border: 1px solid var(--hk-line);
	border-radius: 20px;
	background: var(--hk-panel);
	padding: 26px 24px;
}

body.hk .woocommerce-Address address { font-style: normal; font-size: 15.5px; line-height: 1.6; color: var(--hk-body); }
body.hk .woocommerce-Address h2,
body.hk .woocommerce-Address h3 { font-family: var(--hk-serif); font-weight: 400; font-size: 22px; margin: 0 0 12px; }
body.hk .u-columns.addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
body.hk .u-columns.addresses .u-column1,
body.hk .u-columns.addresses .u-column2 { width: auto; float: none; }

/* ============================================ WooCommerce Cart / Checkout BLOCKS
 *
 * This store uses the block-based Cart and Checkout. Their own layout is left
 * alone — only typography, colours, panels and buttons are brought in line with
 * the design. Nothing here changes quantities, totals or validation.
 */

body.hk .wp-block-woocommerce-cart,
body.hk .wp-block-woocommerce-checkout { max-width: var(--hk-max); margin: 0 auto; }

body.hk .wc-block-components-title,
body.hk .wc-block-cart__empty-cart__title,
body.hk .wp-block-woocommerce-cart h2,
body.hk .wp-block-woocommerce-checkout h2 {
	font-family: var(--hk-serif) !important;
	font-weight: 400 !important;
	letter-spacing: 0;
	color: var(--hk-ink);
}

body.hk .wc-block-cart__empty-cart__title {
	font-size: clamp(30px, 4vw, 42px) !important;
	line-height: 1.1 !important;
}

body.hk .wc-block-components-product-name {
	font-family: var(--hk-serif);
	font-size: 24px;
	line-height: 1.2;
	color: var(--hk-ink);
	text-decoration: none;
}

body.hk .wc-block-components-product-name:hover { color: var(--hk-accent); }

body.hk .wc-block-components-product-metadata,
body.hk .wc-block-components-product-details { font-size: 13.5px; color: var(--hk-muted); }

/* ---------------------------------------------------------------------------
   CART BLOCK ROWS — restyled to the comp's proportions.
   Presentation only. The quantity stepper, the remove control and the totals
   are the block's own, so minimums and money keep behaving exactly as
   WooCommerce intends.
   --------------------------------------------------------------------------- */

body.hk .wc-block-cart-items { border-top: 1px dashed var(--hk-dash); }
body.hk .wc-block-cart-items__header { display: none; }

body.hk .wc-block-cart-items__row {
	border-bottom: 1px dashed var(--hk-dash);
	padding: 26px 0;
}

body.hk .wc-block-cart-items__row td { padding-top: 0; padding-bottom: 0; border: 0; }

body.hk .wc-block-cart-item__image {
	width: 116px;
	padding-right: 22px;
}

body.hk .wc-block-cart-item__image img {
	width: 116px;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 14px;
	background: var(--hk-cream-2);
}

body.hk .wc-block-cart-item__total {
	text-align: right;
	white-space: nowrap;
}

body.hk .wc-block-cart-item__total .wc-block-components-product-price__value {
	font-family: var(--hk-serif);
	font-size: 26px;
	color: var(--hk-ink);
}

/* The block calls the unit price "each" price; the comp shows it beneath. */
body.hk .wc-block-cart-item__total .wc-block-components-sale-badge { display: none; }

body.hk .wc-block-cart-item__prices {
	font-size: 13px;
	color: var(--hk-muted);
	margin-top: 4px;
}

body.hk .wc-block-cart-item__prices .wc-block-components-product-price__value {
	font-family: var(--hk-sans);
	font-size: 13px;
	color: var(--hk-muted);
}

body.hk .wc-block-cart-item__wrap > * + * { margin-top: 5px; }

body.hk .wc-block-cart-item__quantity {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 16px;
}

body.hk .wc-block-cart-item__remove-link {
	color: var(--hk-muted);
	font-family: var(--hk-sans);
	font-size: 14px;
	border-bottom: 1px solid var(--hk-dash);
	text-decoration: none;
	padding: 0;
}

body.hk .wc-block-cart-item__remove-link:hover { color: var(--hk-accent); }

/* Personalisation shows here as product details — give it the design's rule. */
body.hk .wc-block-components-product-details {
	border-left: 2px solid var(--hk-line-2);
	padding-left: 14px;
	margin: 10px 0 0;
	list-style: none;
}

body.hk .wc-block-components-product-details__name { color: var(--hk-soft); }

body.hk .wc-block-components-totals-item__label { color: var(--hk-body); }
body.hk .wc-block-components-totals-item__value { color: var(--hk-ink); }

body.hk .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--hk-serif);
	font-size: 34px;
	color: var(--hk-accent);
}

/* ---------------------------------------------------------------------------
   ORDER SUMMARY (cart + checkout sidebar)

   This used to put a border, a radius and a panel background on EVERY
   .wc-block-components-totals-wrapper in the sidebar. Each row — the coupon
   form, shipping, the total — then drew its own rounded box, so the column read
   as a stack of unrelated cards with a lone "FREE" floating in one of them.

   The comp has one card holding plain rows separated by a dashed rule. So the
   card moves to the column, and the wrappers give up their frames.
   --------------------------------------------------------------------------- */

body.hk .wp-block-woocommerce-cart-totals-block,
body.hk .wp-block-woocommerce-checkout-order-summary-block {
	border: 1px solid var(--hk-line);
	border-radius: 22px;
	background: var(--hk-panel);
	padding: 30px 28px;
}

/*
 * ORDERING — done at two levels, deliberately.
 *
 * An earlier attempt put `display: contents` on the order summary so its
 * children became siblings of the checkout button. That backfired: the block
 * does not render one row per placeholder div, it renders the rows as its own
 * wrappers, and hoisting them left every row with no `order` at all — so
 * Subtotal, Shipping and Estimated total jumped to the top of the column, above
 * the heading. Keeping the summary as a real box and ordering INSIDE it means
 * every row keeps its place whatever the block renders.
 */
body.hk .wc-block-cart__sidebar,
body.hk .wp-block-woocommerce-cart-totals-block {
	display: flex;
	flex-direction: column;
	/* Keeps the reassurance box off the summary card rather than touching it. */
	gap: 20px;
}

/* Column level. */
body.hk .wc-block-cart__sidebar .hk-cart-notes { order: 1; margin-top: 0; }
body.hk .wp-block-woocommerce-cart-order-summary-block { order: 2; }
body.hk .wp-block-woocommerce-cart-express-payment-block { order: 3; }
body.hk .wp-block-woocommerce-proceed-to-checkout-block { order: 4; }
body.hk .wc-block-cart__sidebar .hk-summary-note { order: 5; margin: 0; }
body.hk .wp-block-woocommerce-cart-accepted-payment-methods-block { order: 6; }

/* Inside the summary card. */
body.hk .wp-block-woocommerce-cart-order-summary-block {
	display: flex;
	flex-direction: column;
}

body.hk .wp-block-woocommerce-cart-order-summary-heading-block { order: 1; }
body.hk .wp-block-woocommerce-cart-order-summary-totals-block { order: 2; }

/* Rows the block renders itself, rather than into the placeholder divs. */
body.hk .wp-block-woocommerce-cart-order-summary-block > .wc-block-components-totals-wrapper { order: 2; }

body.hk .wp-block-woocommerce-cart-order-summary-block > .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) { order: 3; }

body.hk .wp-block-woocommerce-cart-order-summary-coupon-form-block,
body.hk .wp-block-woocommerce-cart-order-summary-block > .wc-block-components-totals-wrapper:has(.wc-block-components-totals-coupon) { order: 4; }

/* Rows: no frames, just a dashed rule under the group. */
body.hk .wc-block-cart__sidebar .wc-block-components-totals-wrapper,
body.hk .wc-block-checkout__sidebar .wc-block-components-totals-wrapper {
	border: 0;
	border-radius: 0;
	background: none;
	padding: 0;
}

/*
 * Separators are hung off the rows themselves, not off the placeholder
 * container. The container is often empty — the block renders its rows as its
 * own siblings — and an empty box with a rule above and below is exactly the
 * pair of stray lines with nothing between them that this produced before.
 */
body.hk .wp-block-woocommerce-cart-order-summary-totals-block:empty,
body.hk .wp-block-woocommerce-checkout-order-summary-totals-block:empty {
	display: none;
}

body.hk .wp-block-woocommerce-cart-order-summary-totals-block,
body.hk .wp-block-woocommerce-checkout-order-summary-totals-block {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
}

/* First money row sits below the heading. */
body.hk .wp-block-woocommerce-cart-order-summary-block > .wc-block-components-totals-wrapper { margin: 12px 0 0; }
body.hk .wp-block-woocommerce-cart-order-summary-heading-block + * { margin-top: 22px; }

/* Estimated total: ruled off above, and the last thing before the coupon. */
body.hk .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) {
	margin: 18px 0 0;
	padding: 18px 0 0;
	border-top: 1px dashed var(--hk-dash);
}

body.hk .wc-block-components-totals-item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	font-size: 15.5px;
	padding: 0;
	margin: 0;
}

/* The shipping row's method name, printed under the label. */
body.hk .wc-block-components-totals-shipping__via,
body.hk .wc-block-components-totals-item__description {
	font-size: 13px;
	color: var(--hk-muted);
	flex-basis: 100%;
	margin: 2px 0 0;
}

/* Grand total. */
body.hk .wc-block-components-totals-footer-item {
	margin: 18px 0 0;
	padding: 0;
	border: 0;
}

body.hk .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-size: 15px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hk-muted);
}

/* Coupon, at the foot of the card. */
body.hk .wp-block-woocommerce-cart-order-summary-coupon-form-block {
	margin: 24px 0 0;
	padding: 20px 0 0;
	border-top: 1px dashed var(--hk-dash);
}

body.hk .wc-block-components-panel__button {
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hk-muted);
	padding: 0;
}

body.hk .wc-block-components-panel__button:hover { color: var(--hk-accent); }

body.hk .wc-block-components-totals-coupon__form { margin: 10px 0 0; gap: 10px; }

body.hk .wc-block-components-totals-coupon__input input {
	border-radius: 999px;
	border: 1px solid var(--hk-dash);
	background: var(--hk-cream);
	font-family: var(--hk-sans);
	font-size: 15px;
	color: var(--hk-ink);
}

body.hk .wc-block-components-totals-coupon__button {
	border-radius: 999px !important;
	border: 1px solid var(--hk-ink) !important;
	background: transparent !important;
	color: var(--hk-ink) !important;
	box-shadow: none !important;
	padding: 13px 20px !important;
	min-height: 0 !important;
}

body.hk .wc-block-components-totals-coupon__button:hover {
	background: var(--hk-ink) !important;
	color: var(--hk-cream) !important;
}

/* Summary heading — serif, sentence case, at the comp's scale. */
body.hk .wp-block-woocommerce-cart-order-summary-heading-block,
body.hk .wc-block-cart__totals-title,
body.hk .wc-block-components-checkout-order-summary__title {
	font-family: var(--hk-serif) !important;
	font-weight: 400 !important;
	font-size: 30px !important;
	line-height: 1.1 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--hk-ink) !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.hk .wp-block-woocommerce-proceed-to-checkout-block { margin: 0; }

/*
 * The reassurance line the comp puts under the button. It is placed just below
 * the summary card rather than inside it: the card's interior belongs to React,
 * and a line of text is not worth reaching into someone else's render tree for.
 */
body.hk .hk-summary-note {
	font-size: 13px;
	color: var(--hk-muted);
	text-align: center;
	margin: 12px 0 0;
}

body.hk .wc-block-components-button,
body.hk .wc-block-cart__submit-button,
body.hk .wc-block-components-checkout-place-order-button {
	border-radius: 999px !important;
	background: var(--hk-accent) !important;
	color: var(--hk-cream) !important;
	font-family: var(--hk-sans) !important;
	font-weight: 400 !important;
	font-size: 16.5px !important;
	padding: 17px 30px !important;
	box-shadow: 0 12px 26px rgba(180, 85, 47, 0.24);
	border: 0 !important;
}

body.hk .wc-block-components-button:hover,
body.hk .wc-block-cart__submit-button:hover,
body.hk .wc-block-components-checkout-place-order-button:hover { background: var(--hk-accent-dark) !important; }

body.hk .wc-block-components-button--outlined,
body.hk .wc-block-components-button.outlined {
	background: transparent !important;
	color: var(--hk-ink) !important;
	border: 1px solid var(--hk-ink) !important;
	box-shadow: none;
}

body.hk .wc-block-components-text-input input,
body.hk .wc-block-components-textarea,
body.hk .wc-block-components-form .wc-block-components-text-input input {
	border-radius: var(--hk-r-sm) !important;
	border: 1px solid var(--hk-dash) !important;
	background: var(--hk-cream) !important;
	font-family: var(--hk-sans) !important;
	color: var(--hk-ink) !important;
}

body.hk .wc-block-components-quantity-selector {
	border-radius: 999px;
	border: 1px solid var(--hk-dash);
	background: var(--hk-cream);
	overflow: hidden;
	margin: 0;
	width: auto;
	min-width: 0;
}

body.hk .wc-block-components-quantity-selector::after { display: none; }

body.hk .wc-block-components-quantity-selector__input {
	color: var(--hk-ink);
	font-family: var(--hk-sans);
	font-size: 16px;
	min-width: 36px;
	width: 36px;
	padding: 0;
	background: transparent;
	border: 0;
}

body.hk .wc-block-components-quantity-selector__button {
	width: 40px;
	height: 44px;
	color: var(--hk-ink);
	font-size: 19px;
	background: transparent;
	border: 0;
	opacity: 1;
}

body.hk .wc-block-components-quantity-selector__button:hover:not(:disabled) { background: var(--hk-cream-2); }
body.hk .wc-block-components-quantity-selector__button:disabled { opacity: 0.35; }

body.hk .wc-block-components-notice-banner { border-radius: var(--hk-r-sm); font-family: var(--hk-sans); }

/*
 * "New in store" product grid on the empty cart. Its own block grid handles
 * columns; this only restyles the cards. It is emphatically NOT a prose list —
 * see the note on .hk-info-body lists above.
 */
body.hk .wc-block-grid__products {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
}

body.hk .wc-block-grid__product {
	display: flex;
	flex-direction: column;
	text-align: left;
	margin: 0;
}

body.hk .wc-block-grid__product::before { content: none !important; }

body.hk .wc-block-grid__product-image img {
	border-radius: var(--hk-r-md);
	background: var(--hk-cream-2);
	width: 100%;
	height: auto;
}

body.hk .wc-block-grid__product-title {
	font-family: var(--hk-serif) !important;
	font-weight: 400;
	font-size: 19px;
	line-height: 1.2;
	color: var(--hk-ink);
	margin-top: 14px;
}

body.hk .wc-block-grid__product-price { font-size: 16px; color: var(--hk-body); margin-top: 6px; }
body.hk .wc-block-grid__product-price del { opacity: .55; margin-right: 6px; }
body.hk .wc-block-grid__product-price ins { text-decoration: none; color: var(--hk-accent); }

body.hk .wc-block-grid__product-add-to-cart { margin-top: 14px; }

body.hk .wc-block-grid__product-add-to-cart .wp-block-button__link,
body.hk .wc-block-grid__product-add-to-cart a.button {
	display: block;
	width: 100%;
	padding: 12px 18px !important;
	border-radius: 999px !important;
	border: 1px solid var(--hk-dash) !important;
	background: transparent !important;
	color: var(--hk-ink) !important;
	font-family: var(--hk-sans) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	white-space: normal;
	box-shadow: none;
}

body.hk .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
body.hk .wc-block-grid__product-add-to-cart a.button:hover {
	background: var(--hk-ink) !important;
	color: var(--hk-cream) !important;
	border-color: var(--hk-ink) !important;
}

body.hk .wp-block-separator.is-style-dots { border: 0; }
body.hk .wp-block-separator.is-style-dots::before { color: var(--hk-tan); letter-spacing: 1em; }

@media (max-width: 720px) {
	body.hk .wc-block-grid.has-4-columns .wc-block-grid__products { gap: 18px; }
	body.hk .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 28px; }
}

/* ================================================ notices (WooCommerce) */

body.hk .woocommerce-message,
body.hk .woocommerce-info,
body.hk .woocommerce-error,
body.hk .wc-block-components-notice-banner {
	border: 1px solid var(--hk-line);
	border-top-width: 1px;
	border-left: 3px solid var(--hk-accent);
	border-radius: var(--hk-r-sm);
	background: var(--hk-panel);
	color: var(--hk-ink);
	font-size: 15px;
	padding: 16px 20px;
	margin: 0 0 22px;
	list-style: none;
}

body.hk .woocommerce-message::before,
body.hk .woocommerce-info::before,
body.hk .woocommerce-error::before { display: none; }

body.hk .woocommerce-error { border-left-color: #b32d2e; background: var(--hk-error-bg); }
body.hk .woocommerce-message { border-left-color: var(--hk-sage); }

body.hk .woocommerce-message .button,
body.hk .woocommerce-info .button {
	padding: 9px 16px;
	border-radius: 999px;
	border: 1px solid var(--hk-dash);
	background: transparent;
	color: var(--hk-ink);
	font-size: 13.5px;
	float: right;
}

/* ===================================================== CONTACT PAGE */

.hk-contact-head { position: relative; overflow: hidden; border-bottom: 1px solid var(--hk-line); }

.hk-contact-head-inner {
	position: relative;
	max-width: var(--hk-max);
	margin: 0 auto;
	padding: 48px var(--hk-gutter) 54px;
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
}

.hk-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px dashed var(--hk-dash); }
.hk-method { padding: 28px 28px 8px; border-right: 1px dashed var(--hk-dash); }
.hk-method:first-child { padding-left: 0; }
.hk-method:last-child { padding-right: 0; border-right: 0; }
.hk-method-eyebrow { font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hk-accent); }
.hk-method-title { font-family: var(--hk-serif); font-size: 26px; margin-top: 10px; }
.hk-method-text { font-size: 15.5px; line-height: 1.6; color: var(--hk-body); margin: 8px 0 12px; }

.hk-enquiry-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: start; }

.hk-enquiry {
	min-width: 0;
	border: 1px solid var(--hk-line);
	border-radius: var(--hk-r-xl);
	background: var(--hk-panel);
	padding: 40px 40px 36px;
}

.hk-enquiry-aside { min-width: 0; display: flex; flex-direction: column; gap: 18px; }

.hk-faq { border-bottom: 1px dashed var(--hk-dash); padding-bottom: 10px; }

.hk-faq-q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	border: 0;
	background: transparent;
	padding: 10px 0;
	font-family: var(--hk-sans);
	font-size: 15.5px;
	color: var(--hk-ink);
	text-align: left;
	cursor: pointer;
}

.hk-faq-sign { color: var(--hk-accent); font-size: 19px; }
.hk-faq-a { font-size: 14.5px; line-height: 1.6; color: var(--hk-body); margin: 4px 0 6px; }
.hk-faq details > summary { list-style: none; }
.hk-faq details > summary::-webkit-details-marker { display: none; }

/* Enquiry form controls. */

.hk-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.hk-chip-radio { display: inline-flex; cursor: pointer; }

/* The radio itself is hidden but still focusable, so keyboard use works and the
   focus ring lands on the visible chip. */
.hk-chip-radio input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.hk-chip-radio .hk-chip { display: inline-block; }
.hk-chip-radio input:checked + .hk-chip { background: var(--hk-ink); color: var(--hk-cream); border-color: var(--hk-ink); }

.hk-chip-radio input:focus-visible + .hk-chip {
	outline: 2px solid var(--hk-accent);
	outline-offset: 3px;
}

/* Honeypot: removed from view and from the accessibility tree, but still
   submitted — so a bot that fills every field gives itself away. */
.hk-honeypot {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hk-form-foot { display: flex; align-items: center; gap: 18px; margin-top: 22px; flex-wrap: wrap; }
.hk-form-note { font-size: 14px; color: var(--hk-muted); }
.hk-enquiry-thanks { padding: 30px 0; animation: hk-rise 0.3s ease both; }
.hk-enquiry-thanks .hk-cta-row { margin-top: 24px; }

.hk-steps-list { display: flex; flex-direction: column; margin-top: 16px; border-top: 1px dashed var(--hk-dash); }
.hk-step-row { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px dashed var(--hk-dash); }
.hk-step-row:last-child { border-bottom: 0; }
.hk-step-num { font-family: var(--hk-serif); color: var(--hk-tan); flex-shrink: 0; }
.hk-step-text { font-size: 15px; line-height: 1.55; color: var(--hk-body); }

/* ======================================================== INFO PAGES */

.hk-info-head { position: relative; border-bottom: 1px solid var(--hk-line); overflow: hidden; }
.hk-info-head-inner { position: relative; max-width: var(--hk-max-narrow); margin: 0 auto; padding: 46px var(--hk-gutter) 44px; }
.hk-info-meta { display: flex; gap: 22px; margin-top: 22px; font-size: 13.5px; color: var(--hk-muted); flex-wrap: wrap; }
.hk-info-meta-sep { color: var(--hk-tan); }

.hk-info-layout {
	max-width: var(--hk-max-narrow);
	margin: 0 auto;
	padding: 48px var(--hk-gutter) 100px;
	display: grid;
	grid-template-columns: 244px minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

.hk-info-layout.is-full { grid-template-columns: minmax(0, 1fr); }

.hk-toc-wrap { position: sticky; top: 96px; min-width: 0; }
.hk-toc { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }

.hk-toc a {
	padding: 9px 12px;
	border-radius: 9px;
	font-size: 14.5px;
	line-height: 1.4;
	color: var(--hk-body);
}

.hk-toc a:hover { background: var(--hk-cream-2); color: var(--hk-accent); }
.hk-toc a.is-current { background: var(--hk-cream-2); color: var(--hk-accent); }

.hk-info-body { min-width: 0; }

body.hk .hk-info-body h2.hk-info-h2 {
	display: flex;
	align-items: baseline;
	gap: 14px;
	font-family: var(--hk-serif);
	font-weight: 400;
	font-size: 34px;
	line-height: 1.15;
	margin: 34px 0 0;
	padding-top: 34px;
	border-top: 1px dashed var(--hk-dash);
	scroll-margin-top: 100px;
}

body.hk .hk-info-body h2.hk-info-h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.hk-info-n { font-family: var(--hk-serif); font-size: 19px; color: var(--hk-tan); flex-shrink: 0; }

body.hk .hk-info-body h3 { font-family: var(--hk-serif); font-weight: 400; font-size: 24px; margin: 26px 0 0; }

body.hk .hk-info-body p {
	font-size: 17px;
	line-height: 1.75;
	color: var(--hk-ink-3);
	margin: 16px 0 0;
	max-width: 720px;
	text-wrap: pretty;
}

/*
 * Prose lists.
 *
 * These are deliberately narrowed with :not() guards. Unguarded, they matched
 * WooCommerce and block lists too — turning every product in the block cart's
 * "New in store" grid into a flex row with an injected bullet, which squeezed
 * each card to a few pixels wide. `page.php` no longer wraps commerce pages in
 * .hk-info-body at all; these guards are the second line of defence for any
 * block that renders a list inside editorial content.
 */
body.hk .hk-info-body ul:not([class*="wc-"]):not([class*="woocommerce"]):not([class*="product"]),
body.hk .hk-info-body ol:not([class*="wc-"]):not([class*="woocommerce"]):not([class*="product"]) {
	margin: 18px 0 0;
	padding-left: 0;
	list-style: none;
	max-width: 720px;
}

body.hk .hk-info-body ul:not([class*="wc-"]):not([class*="woocommerce"]):not([class*="product"]) > li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--hk-ink-3);
	margin-bottom: 10px;
}

body.hk .hk-info-body ul:not([class*="wc-"]):not([class*="woocommerce"]):not([class*="product"]) > li::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--hk-accent);
	margin-top: 9px;
	flex-shrink: 0;
}

body.hk .hk-info-body ol:not([class*="wc-"]):not([class*="woocommerce"]):not([class*="product"]) { counter-reset: hk-ol; }

body.hk .hk-info-body ol:not([class*="wc-"]):not([class*="woocommerce"]):not([class*="product"]) > li {
	counter-increment: hk-ol;
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--hk-ink-3);
	margin-bottom: 10px;
	padding-left: 34px;
	position: relative;
}

body.hk .hk-info-body ol:not([class*="wc-"]):not([class*="woocommerce"]):not([class*="product"]) > li::before {
	content: counter(hk-ol, decimal-leading-zero);
	position: absolute;
	left: 0;
	font-family: var(--hk-serif);
	color: var(--hk-tan);
}

/* Nested lists inside a prose list must not inherit the flex row. */
body.hk .hk-info-body li > ul > li,
body.hk .hk-info-body li > ol > li { display: list-item; }

body.hk .hk-info-body table {
	margin: 20px 0 0;
	border: 1px solid var(--hk-line);
	border-radius: var(--hk-r-md);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--hk-panel);
	max-width: 720px;
	width: 100%;
}

body.hk .hk-info-body table th,
body.hk .hk-info-body table td { padding: 15px 22px; border: 0; border-bottom: 1px dashed var(--hk-line); text-align: left; }

body.hk .hk-info-body table th {
	width: 240px;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hk-muted);
}

body.hk .hk-info-body table td { font-size: 16px; color: var(--hk-ink); }

body.hk .hk-info-body blockquote {
	margin: 20px 0 0;
	border-radius: var(--hk-r-md);
	background: var(--hk-cream-2);
	padding: 20px 24px;
	max-width: 720px;
	border: 0;
}

body.hk .hk-info-body blockquote p { margin: 0; font-size: 16px; }

.hk-info-cta {
	margin-top: 44px;
	border-radius: var(--hk-r-lg);
	background: var(--hk-ink);
	color: var(--hk-cream-2);
	padding: 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	flex-wrap: wrap;
}

.hk-info-cta-title { font-family: var(--hk-serif); font-size: 30px; line-height: 1.15; color: var(--hk-cream); }
.hk-info-cta-text { font-size: 16px; line-height: 1.6; color: #C0AE97; margin: 8px 0 0; max-width: 460px; }
.hk-info-cta .hk-btn-outline { border-color: #6C5B4B; color: var(--hk-cream-2); }
.hk-info-cta .hk-btn-outline:hover { background: var(--hk-cream-2); color: var(--hk-ink); }

/* ==================================================== 404 / search */

.hk-basic { max-width: 820px; margin: 0 auto; padding: 90px var(--hk-gutter) 110px; text-align: center; }
.hk-basic-title { font-family: var(--hk-serif); font-weight: 400; font-size: clamp(38px, 5vw, 62px); line-height: 1.05; margin: 24px 0 0; }
.hk-basic-text { font-size: 17px; line-height: 1.65; color: var(--hk-body); margin: 14px auto 0; max-width: 480px; }
.hk-basic .hk-cta-row { justify-content: center; }

.hk-results { max-width: var(--hk-max); margin: 0 auto; padding: 40px var(--hk-gutter) 96px; }
.hk-result { padding: 26px 0; border-bottom: 1px dashed var(--hk-dash); }
.hk-result-title { font-family: var(--hk-serif); font-size: 26px; line-height: 1.2; }
.hk-result-title a { color: var(--hk-ink); }
.hk-result-title a:hover { color: var(--hk-accent); }
.hk-result-excerpt { font-size: 16px; line-height: 1.65; color: var(--hk-body); margin: 8px 0 0; max-width: 720px; }

/* ==================================================== pagination */

body.hk .woocommerce-pagination ul,
body.hk .hk-pagination { display: flex; gap: 8px; justify-content: center; margin: 46px 0 0; padding: 0; list-style: none; border: 0; }

body.hk .woocommerce-pagination ul li { border: 0; margin: 0; }

body.hk .woocommerce-pagination a,
body.hk .woocommerce-pagination span,
body.hk .hk-pagination a,
body.hk .hk-pagination span {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1px solid var(--hk-dash);
	color: var(--hk-ink);
	font-size: 15px;
}

body.hk .woocommerce-pagination .current,
body.hk .hk-pagination .current { background: var(--hk-ink); color: var(--hk-cream); border-color: var(--hk-ink); }

/* ======================================================= responsive */

@media (max-width: 1024px) {
	/* The grid lives on the parent theme's .hk-product-grid, not on div.product. */
	body.hk.single-product .hk-product-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	body.hk.single-product .hk-product-grid > .woocommerce-product-gallery,
	body.hk.single-product .hk-product-grid > .summary { grid-column: 1; }
	body.hk.single-product .woocommerce-product-gallery { position: static; top: auto; }

	body.hk.woocommerce-cart .hk-woo-content > .woocommerce { grid-template-columns: minmax(0, 1fr); gap: 34px; }
	body.hk.woocommerce-cart .hk-woo-content > .woocommerce > form.woocommerce-cart-form,
	body.hk.woocommerce-cart .cart-collaterals { grid-column: 1; position: static; }

	.hk-cart-layout,
	.hk-checkout-layout,
	.hk-account-layout,
	.hk-enquiry-layout,
	.hk-info-layout { grid-template-columns: minmax(0, 1fr); gap: 34px; }

	.hk-cart-aside,
	.hk-checkout-aside,
	.hk-toc-wrap { position: static; }

	body.hk .woocommerce-MyAccount-navigation { position: static; }
	body.hk .woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: wrap; }

	.hk-auth-grid { grid-template-columns: minmax(0, 1fr); }
	.hk-methods { grid-template-columns: minmax(0, 1fr); }
	.hk-method { padding: 24px 0; border-right: 0; border-bottom: 1px dashed var(--hk-dash); }
	.hk-contact-head-inner { grid-template-columns: minmax(0, 1fr); gap: 34px; }
	.hk-upsell-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.hk .related ul.products,
	body.hk .upsells ul.products { --hk-cols: 2; }
	body.hk .u-columns.addresses { grid-template-columns: minmax(0, 1fr); }
	.hk-archive-head-art { width: 220px; }
}

@media (max-width: 720px) {
	/*
	 * Gallery on small screens: the 84px side column would eat too much width, so
	 * the image goes full width and the thumbnails sit under it, scrolling
	 * sideways. Still 1:1 thumbs, still a 4:5 main image.
	 */
	body.hk.single-product .woocommerce-product-gallery { grid-template-columns: minmax(0, 1fr); gap: 10px; }

	body.hk.single-product .woocommerce-product-gallery .flex-viewport,
	body.hk.single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
		grid-column: 1;
		grid-row: 1;
	}

	body.hk.single-product .woocommerce-product-gallery .flex-control-thumbs {
		grid-column: 1;
		grid-row: 2;
		flex-direction: row;
		overflow-x: auto;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
	}

	body.hk.single-product .flex-control-thumbs li { flex: 0 0 auto; width: 64px; }
	body.hk.single-product .flex-control-thumbs img { width: 64px; height: 64px; }
	body.hk.single-product .woocommerce-product-gallery .onsale { left: 16px; }

	body.hk .hcs-bulk-order__row { grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: 'thumb label' 'qty qty'; }
	body.hk .hcs-bulk-order__thumb { grid-area: thumb; width: 48px; height: 48px; }
	body.hk .hcs-bulk-order__label { grid-area: label; }
	body.hk .hcs-bulk-order__qty { grid-area: qty; }
	body.hk .hcs-bulk-order__footer { flex-direction: column; align-items: stretch; }
	body.hk .hcs-bulk-order__submit { width: 100%; }
	body.hk .hcs-trust-signals { grid-template-columns: minmax(0, 1fr); }

	body.hk table.shop_table.cart td { display: block; padding: 0; }
	body.hk table.shop_table.cart tr.woocommerce-cart-form__cart-item { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 22px 0; }
	body.hk td.product-thumbnail { width: 88px; padding: 0; }
	body.hk td.product-thumbnail img { width: 88px; height: 88px; }
	body.hk td.product-name,
	body.hk td.product-quantity,
	body.hk td.product-subtotal { grid-column: 2; width: auto; }
	body.hk td.product-quantity { margin-top: 12px; }
	body.hk td.product-subtotal { text-align: left; margin-top: 10px; }

	body.hk .woocommerce-checkout .form-row-first,
	body.hk .woocommerce-checkout .form-row-last { width: 100%; }

	.hk-step { padding: 24px 20px; }
	.hk-enquiry { padding: 26px 22px; }
	.hk-info-cta { padding: 28px 24px; }
	.hk-upsell-grid { grid-template-columns: minmax(0, 1fr); }
	body.hk .related ul.products,
	body.hk .upsells ul.products { --hk-cols: 1; }
	body.hk .shop_attributes th { width: auto; display: block; padding-bottom: 4px; }
	body.hk .shop_attributes td { display: block; padding-top: 0; }
	body.hk .hk-info-body table th,
	body.hk .hk-info-body table td { display: block; width: auto; }
	body.hk .hk-info-body table th { padding-bottom: 4px; border-bottom: 0; }
}

/* ---------------------------------------------------------------------------
   CHECKOUT — theme furniture around the Checkout block.
   --------------------------------------------------------------------------- */

body.hk .hk-checkout-intro {
	font-size: 17px;
	line-height: 1.65;
	color: var(--hk-body);
	max-width: 620px;
	margin: 14px 0 0;
}

body.hk .hk-checkout-chat {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 18px 0 0;
	padding: 10px 18px;
	border: 1px solid var(--hk-line);
	border-radius: 999px;
	background: var(--hk-panel);
}

body.hk .hk-checkout-chat-text { font-size: 14.5px; color: var(--hk-body); }
body.hk .hk-checkout-chat-link { font-size: 14.5px; color: var(--hk-accent); }

/* The reassurance card is shared with the cart; it only needs its top gap here. */
body.hk .hk-woo-content.is-checkout .hk-cart-notes { margin-top: 20px; }

/* ---------------------------------------------------------------------------
   CHECKOUT ORDER SUMMARY — vertical rhythm

   The earlier rules were written against the CART block's class names
   (wp-block-woocommerce-cart-order-summary-*). Checkout uses its own
   (…-checkout-order-summary-*), so none of the spacing reached it: the coupon
   toggle sat flush against the line items above it and flush against Subtotal
   below, while the money rows drifted apart. Spacing values follow the comp.
   --------------------------------------------------------------------------- */

/* Same column treatment as the cart, so the reassurance card clears the card. */
body.hk .wc-block-checkout__sidebar {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

body.hk .wc-block-checkout__sidebar .hk-cart-notes { margin: 0; }

body.hk .wp-block-woocommerce-checkout-order-summary-block:not(.checkout-order-summary-block-fill-wrapper) {
	display: flex;
	flex-direction: column;
}

body.hk .wp-block-woocommerce-checkout-order-summary-cart-items-block { order: 1; }
body.hk .wp-block-woocommerce-checkout-order-summary-subtotal-block,
body.hk .wp-block-woocommerce-checkout-order-summary-discount-block,
body.hk .wp-block-woocommerce-checkout-order-summary-fee-block,
body.hk .wp-block-woocommerce-checkout-order-summary-shipping-block,
body.hk .wp-block-woocommerce-checkout-order-summary-taxes-block,
body.hk .wp-block-woocommerce-checkout-order-summary-totals-block { order: 2; }

body.hk .wp-block-woocommerce-checkout-order-summary-block > .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) { order: 3; }

/*
 * The coupon goes last, as it does on the cart. Between the basket and the
 * subtotal it interrupted the one sequence a shopper actually reads — what is
 * in the order, then what it costs.
 */
body.hk .wp-block-woocommerce-checkout-order-summary-coupon-form-block { order: 4; }

/* Line items: dashed rule above the list, one under each row. */
body.hk .wp-block-woocommerce-checkout-order-summary-cart-items-block {
	margin: 20px 0 0;
	border-top: 1px dashed var(--hk-dash);
}

body.hk .wc-block-components-order-summary-item {
	padding: 16px 0;
	border-bottom: 1px dashed var(--hk-dash);
	margin: 0;
}

body.hk .wc-block-components-order-summary-item__description .wc-block-components-product-name {
	font-size: 17.5px;
	line-height: 1.2;
}

body.hk .wc-block-components-order-summary-item__quantity { font-size: 13px; color: var(--hk-muted); }

/* Money rows: one band, evenly spaced, ruled off underneath. */
body.hk .wp-block-woocommerce-checkout-order-summary-subtotal-block { margin-top: 18px; }

body.hk .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item { margin: 0 0 11px; }

body.hk .wp-block-woocommerce-checkout-order-summary-taxes-block,
body.hk .wp-block-woocommerce-checkout-order-summary-shipping-block {
	padding-bottom: 5px;
	border-bottom: 1px dashed var(--hk-dash);
}

body.hk .wp-block-woocommerce-checkout-order-summary-block > .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) {
	margin: 16px 0 0;
	padding: 0;
	border: 0;
}

/* Coupon band, clear of the total above it. */
body.hk .wp-block-woocommerce-checkout-order-summary-coupon-form-block {
	margin: 22px 0 0;
	padding: 20px 0 0;
	border-top: 1px dashed var(--hk-dash);
}

/* The summary is collapsible on narrow screens; keep its trigger legible. */
body.hk .wc-block-components-checkout-order-summary__title-text {
	font-family: var(--hk-serif);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.1;
	text-transform: none;
	letter-spacing: 0;
	color: var(--hk-ink);
}

/* ---------------------------------------------------------------------------
   ORDER SUMMARY — compact rhythm (cart + checkout)

   The rows sat much further apart than the values set above, because
   WooCommerce gives .wc-block-components-totals-wrapper its own vertical
   padding and a ::after rule. Zeroing both here means the spacing below is the
   only spacing there is, rather than being added on top of the block's.
   Roughly half the previous gaps.
   --------------------------------------------------------------------------- */

body.hk .wc-block-cart__sidebar .wc-block-components-totals-wrapper,
body.hk .wc-block-checkout__sidebar .wc-block-components-totals-wrapper,
body.hk .wc-block-components-sidebar .wc-block-components-totals-wrapper {
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
}

/* WooCommerce draws the wrapper's divider as ::after; ours are explicit. */
body.hk .wc-block-cart__sidebar .wc-block-components-totals-wrapper::after,
body.hk .wc-block-checkout__sidebar .wc-block-components-totals-wrapper::after,
body.hk .wc-block-components-sidebar .wc-block-components-totals-wrapper::after {
	display: none !important;
}

/* Money rows. */
body.hk .wc-block-cart__sidebar .wc-block-components-totals-item,
body.hk .wc-block-checkout__sidebar .wc-block-components-totals-item {
	margin: 0 0 6px !important;
	padding: 0 !important;
	min-height: 0;
}

/* First row, below the heading or the basket list. */
body.hk .wp-block-woocommerce-checkout-order-summary-subtotal-block,
body.hk .wp-block-woocommerce-cart-order-summary-totals-block { margin-top: 10px !important; }

body.hk .wp-block-woocommerce-cart-order-summary-block > .wc-block-components-totals-wrapper { margin-top: 6px !important; }

/* Last row before the rule. */
body.hk .wp-block-woocommerce-checkout-order-summary-shipping-block,
body.hk .wp-block-woocommerce-checkout-order-summary-taxes-block {
	padding-bottom: 10px;
	border-bottom: 1px dashed var(--hk-dash);
}

/* Grand total. */
body.hk .wc-block-cart__sidebar .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item),
body.hk .wc-block-checkout__sidebar .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) {
	margin: 10px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

body.hk .wc-block-components-totals-footer-item { margin: 0 !important; }

/* Coupon band. */
body.hk .wp-block-woocommerce-checkout-order-summary-coupon-form-block,
body.hk .wp-block-woocommerce-cart-order-summary-coupon-form-block {
	margin: 14px 0 0 !important;
	padding: 12px 0 0 !important;
	border-top: 1px dashed var(--hk-dash);
}

/* ---------------------------------------------------------------------------
   ORDER SUMMARY — the actual source of the gaps

   Read from WooCommerce's own checkout.css rather than guessed at:

     .wc-block-components-totals-wrapper { border-top: 1px solid …; padding: 16px 0 }

   and, decisively, each block placeholder ALSO carries that class:

     .wp-block-woocommerce-checkout-order-summary-cart-items-block.wc-block-components-totals-wrapper

   So the always-present-but-empty Discount and Fee wrappers sitting between
   Subtotal and Shipping were contributing 32px of padding each, plus a border —
   which is the ~80px hole that survived two rounds of tightening. Earlier
   resets were scoped to a sidebar class that does not match here, so they never
   applied.

   Unscoped now (still under body.hk), and any wrapper with nothing in it is
   taken out of the layout rather than merely un-padded.
   --------------------------------------------------------------------------- */

body.hk .wc-block-components-totals-wrapper {
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
}

body.hk .wc-block-components-totals-wrapper::after,
body.hk .wc-block-components-totals-wrapper::before {
	display: none !important;
	border: 0 !important;
}

/* A wrapper holding no row, no coupon and no basket list contributes nothing. */
body.hk .wc-block-components-totals-wrapper:not(:has(.wc-block-components-totals-item)):not(:has(.wc-block-components-totals-coupon)):not(:has(.wc-block-components-order-summary)):not(:has(.wc-block-components-panel)) {
	display: none !important;
}

body.hk .wc-block-components-totals-item {
	margin: 0 0 6px !important;
	padding: 0 !important;
	min-height: 0 !important;
}

body.hk .wc-block-components-totals-item:last-child { margin-bottom: 0 !important; }

/* Total: the one dashed rule in the money block. */
body.hk .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) {
	margin: 10px 0 0 !important;
	padding: 10px 0 0 !important;
	border-top: 1px dashed var(--hk-dash) !important;
}

/* Coupon band, kept clear of the total above it. */
body.hk .wc-block-components-totals-wrapper:has(.wc-block-components-totals-coupon),
body.hk .wp-block-woocommerce-checkout-order-summary-coupon-form-block,
body.hk .wp-block-woocommerce-cart-order-summary-coupon-form-block {
	margin: 12px 0 0 !important;
	padding: 12px 0 0 !important;
	border-top: 1px dashed var(--hk-dash) !important;
}

/* Basket list inside the checkout summary. */
body.hk .wp-block-woocommerce-checkout-order-summary-cart-items-block {
	margin: 10px 0 0 !important;
	padding: 0 !important;
	border-top: 1px dashed var(--hk-dash) !important;
}

/* ---------------------------------------------------------------------------
   COUPON PANEL — alignment and spacing

   WooCommerce indents the coupon by 16px:

     .wc-block-components-panel,
     .wc-block-components-sidebar .wc-block-components-totals-coupon,
     .wc-block-components-sidebar .wc-block-components-totals-item { padding-left: 16px; padding-right: 16px }

   The rows above had that zeroed already, so "Add coupons" alone sat inset from
   Subtotal. Zeroed here too, so the label, the chevron and every money row share
   one left edge.

   It also gets the same 6px below it that separates the money rows, instead of
   sitting flush against Subtotal.

   NOTE: the coupon stays where WooCommerce puts it — above the rows. Earlier
   rules tried to order it last; they never matched this markup, and leaving
   dead ordering in place would be a trap for the next change. They are
   overridden below rather than left to look intentional.
   --------------------------------------------------------------------------- */

body.hk .wc-block-components-totals-coupon,
body.hk .wc-block-components-panel,
body.hk .wc-block-components-sidebar .wc-block-components-panel,
body.hk .wc-block-components-sidebar .wc-block-components-totals-coupon,
body.hk .wc-block-components-panel__button,
body.hk .wc-block-components-panel__content {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Same rhythm as between Subtotal and Free shipping. */
body.hk .wc-block-components-totals-wrapper:has(.wc-block-components-totals-coupon),
body.hk .wp-block-woocommerce-checkout-order-summary-coupon-form-block,
body.hk .wp-block-woocommerce-cart-order-summary-coupon-form-block {
	order: 0 !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
	border: 0 !important;
}

body.hk .wc-block-components-totals-coupon { margin-bottom: 0 !important; }

/* The toggle row: label left, chevron right, on the shared left edge. */
body.hk .wc-block-components-panel__button {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	text-align: left;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Checkout delivery estimate — the reassurance card, with real dates in it. */
body.hk .hk-delivery-dates {
	font-family: var(--hk-serif);
	font-weight: 400;
	font-size: 26px;
	line-height: 1.2;
	color: var(--hk-accent);
	margin: 10px 0 0;
}

body.hk .hk-delivery-note {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--hk-muted);
	margin: 8px 0 0;
}

/* ---------------------------------------------------------------------------
   PERSONALISATION FIELDS — tighter rhythm

   The gaps were bigger than any single value suggested, because three things
   stacked up between "Enter Name" and "Select Name Color":

     .cpp-validation-msg { min-height: 1.2em; margin: .2rem 0 0 }  ← always
       present and usually EMPTY, so ~22px of reserved empty space
     .cpp-personalization-block { margin-bottom }
     table.variations { margin-bottom }

   The empty message now collapses until it actually has something to say, and
   the remaining margins are halved.
   --------------------------------------------------------------------------- */

body.hk .cpp-validation-msg {
	min-height: 0 !important;
	margin: 4px 0 0 !important;
}

body.hk .cpp-validation-msg:empty {
	margin: 0 !important;
	display: none !important;
}

body.hk .cpp-personalization-block { margin: 0 0 10px !important; }
body.hk.single-product table.variations { margin: 0 0 6px !important; }
body.hk .cpp-char-count-wrapper { margin-top: 4px !important; }

body.hk .cpp-notes-block,
body.hk .cpp-second-name-block,
body.hk .cpp-photo-upload-block {
	margin-top: 6px !important;
	padding-top: 8px !important;
}

body.hk .cpp-pricing-display.is-active {
	margin-top: 10px !important;
	padding-top: 10px !important;
}

/* The label-to-field gap, halved to match. */
body.hk .cpp-label,
body.hk .cpp-notes-label { margin-bottom: 4px !important; }
body.hk.single-product table.variations th.label { padding: 0 0 4px; }

/*
 * Air between one attribute and the next.
 *
 * The th/td of each row are display: block, so consecutive attributes ran
 * flush together — the second label started at exactly the pixel the first
 * select ended (measured 0px), which read as one control with a stray caption
 * rather than two separate choices. Only rows AFTER the first get the space,
 * so nothing is added above the first attribute.
 */
body.hk.single-product table.variations tr + tr th.label { padding-top: 18px; }

/*
 * The variation "Clear" link reserved a whole line under the select even with
 * nothing selected — WooCommerce hides it with `visibility: hidden`, which
 * still occupies flow. That was ~18px plus its line box, the single largest
 * part of the gap before Additional Notes.
 *
 * WooCommerce toggles it by writing an inline style, so the inline value is
 * what gets matched: collapsed by default (and before its JS runs), shown only
 * once it is genuinely usable. A "Clear" control with nothing to clear was
 * never worth the space anyway.
 */
body.hk.single-product .reset_variations { display: none; }

body.hk.single-product .reset_variations[style*="visible"] {
	display: inline-block;
	margin-top: 6px;
	font-size: 13.5px;
	color: var(--hk-muted);
}

body.hk.single-product .reset_variations[style*="visible"]:hover { color: var(--hk-accent); }

/* ---------------------------------------------------------------------------
   MOBILE — product page spacing

   Values tuned for the desktop column read badly at phone width: the assurance
   bullets kept two columns and broke short lines across three, the tab gap and
   the description's own 56px section padding stacked into a screen-height void,
   and the options-card foot put its two items on separate lines with a full
   row gap between them.
   --------------------------------------------------------------------------- */

@media (max-width: 720px) {
	/* One column — two made "100% handmade to order in India" wrap three times. */
	body.hk.single-product .hk-assure {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		margin-top: 20px;
	}

	/* Lead time and chat link stack; they do not need a 16px row gap doing it. */
	body.hk.single-product .hk-buybox-foot {
		gap: 6px 16px;
		margin-top: 14px;
		padding-top: 12px;
	}

	body.hk.single-product .hk-buybox { padding: 22px 20px 20px; }

	/* 92px between the summary and the tabs is most of a phone screen. */
	body.hk.single-product .woocommerce-tabs,
	body.hk .woocommerce-tabs { margin-top: 40px !important; }

	body.hk.single-product .woocommerce-tabs .panel { margin-top: 26px; }

	/*
	 * The description's section rhythm is inline-styled in the product content,
	 * so it is matched on the declaration itself rather than on a class.
	 */
	body.hk .hk-desc [style*="padding: 56px 0 0"] { padding-top: 34px !important; }
	body.hk .hk-desc [style*="padding: 48px 0 8px"] { padding-top: 30px !important; }
	body.hk .hk-desc [style*="margin-top: 56px"] { margin-top: 34px !important; }
	body.hk .hk-desc [style*="gap: 44px"] { gap: 24px !important; }
	body.hk .hk-desc [style*="margin-top: 32px"] { margin-top: 20px !important; }

	body.hk .hk-desc { font-size: 15.5px; }
}

@media (max-width: 480px) {
	body.hk.single-product .hk-buybox { padding: 20px 16px 18px; }
	body.hk .hk-desc [style*="padding: 24px 26px"] { padding: 20px 18px !important; }
}

/*
 * PRODUCT TABS — put the nav back.
 *
 * The parent theme carries `.woocommerce-tabs ul.tabs { display: none !important }`
 * ("single description tab, nav hidden"), which was written for a build that
 * stacked every panel. It no longer matches reality: WooCommerce's
 * single-product.js still hides all but the first panel, so with the nav gone
 * the Additional information tab — size, materials, colours — was rendered and
 * then made unreachable. No link, no control, no way to read it.
 *
 * Restoring the nav fixes that and is what the design asks for. It needs
 * !important purely to outrank the parent's, and the pill styling further up
 * this file only ever applied to markup nobody could see.
 */
body.hk.single-product .woocommerce-tabs ul.tabs {
	display: flex !important;
}

@media (max-width: 720px) {
	body.hk.single-product .woocommerce-tabs ul.tabs {
		gap: 6px;
		padding-bottom: 10px;
	}

	body.hk.single-product .woocommerce-tabs ul.tabs li a {
		padding: 9px 16px;
		font-size: 13.5px;
	}
}

/* ---------------------------------------------------------------------------
   CHECKOUT — the duplicated order summary

   WooCommerce renders the summary TWICE and picks one with container queries:

     @container (min-width: 700px) { …-order-summary-block.checkout-order-summary-block-fill-wrapper { display: none } }
     @container (max-width: 699px) { …the fill copy is the one that shows }

   The rule further up this file — `body.hk .wp-block-woocommerce-checkout-order-summary-block { display: flex }`
   — is specificity (0,2,1) against WooCommerce's (0,2,0), so it beat the
   `display: none` and forced BOTH copies visible: one above the address fields
   and one below, which is the duplicate reported on mobile.

   The flex is only needed on the copy actually being laid out, so it now
   excludes the fill wrapper and leaves WooCommerce's own toggle alone.
   --------------------------------------------------------------------------- */

/*
 * ONE summary, and it is the sidebar copy.
 *
 * WooCommerce keeps two in the DOM and swaps them by container width:
 *
 *   @container (min-width: 700px) { …fill-wrapper { display: none } }
 *   @container (max-width: 699px) { .wc-block-checkout__sidebar { order: 0 } }
 *
 * So on a phone the SIDEBAR copy is the one lifted to the top of the page, and
 * the fill copy is the one that lands down in the form beside the Place order
 * button. Hiding the fill copy outright therefore leaves exactly one summary at
 * every width — at the top on mobile, in the right-hand column on desktop —
 * and keeps the delivery estimate with it, since that lives in the sidebar.
 */
body.hk .wp-block-woocommerce-checkout-order-summary-block.checkout-order-summary-block-fill-wrapper {
	display: none !important;
}

/* ---------------------------------------------------------------------------
   MOBILE CART — quantity and remove on one line

   `.wc-block-cart-item__quantity` was given `flex-wrap: wrap` up this file,
   which let the remove control drop onto its own line at phone width. It is a
   24×24 icon button, not the text link the styling above assumed, so the
   underline treatment was wrong for it too.
   --------------------------------------------------------------------------- */

body.hk .wc-block-cart-item__quantity {
	flex-wrap: nowrap;
	gap: 12px;
}

body.hk .wc-block-cart-item__remove-link {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border-bottom: 0;
	color: var(--hk-soft);
	line-height: 0;
}

body.hk .wc-block-cart-item__remove-link:hover { color: var(--hk-accent); }
body.hk .wc-block-cart-item__remove-link svg { width: 20px; height: 20px; }

@media (max-width: 720px) {
	body.hk .wc-block-cart-item__image { width: 88px; padding-right: 14px; }
	body.hk .wc-block-cart-item__image img { width: 88px; }
	body.hk .wc-block-components-product-name { font-size: 19px; }
	body.hk .wc-block-cart-items__row { padding: 18px 0; }
	body.hk .wc-block-cart-item__quantity { margin-top: 12px; }
	body.hk .wc-block-cart-item__total .wc-block-components-product-price__value { font-size: 21px; }
}

/*
 * Checkout head: the "order over chat" bar is off, so the space it used to
 * occupy between the intro and the form closes up rather than being left behind
 * as a gap. Scoped to checkout so the cart's own head keeps its rhythm.
 */
body.hk.woocommerce-checkout .hk-page-head { padding-top: 34px; }
body.hk.woocommerce-checkout .hk-checkout-intro { margin-top: 10px; }
body.hk .hk-woo-content.is-checkout { padding-top: 22px; }

@media (max-width: 720px) {
	body.hk.woocommerce-checkout .hk-page-head { padding-top: 24px; }
	body.hk .hk-woo-content.is-checkout { padding-top: 16px; }
}

/*
 * Place order button — 30% wider.
 *
 * WooCommerce only forces width:100% below a 400px container, so at every other
 * size the button is auto-width and sat at 145px ("Place Order" plus its 30px
 * padding). 145 × 1.3 = 188px, applied as a MIN-width so a longer label — the
 * order total appended, a translated string — still grows the button instead of
 * being clipped.
 *
 * inline-flex with centring is declared alongside it because the computed
 * display here was inline-block, so the label would otherwise sit left of centre
 * in the extra space.
 */
body.hk .wc-block-components-checkout-place-order-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 188px !important;
}

/*
 * Place order on phones — full width.
 *
 * The 30% bump above took it from 145px to 188px at every size, but in a
 * 312–364px phone column that is only about 55% of the width: a half-width
 * primary action with dead space beside it. WooCommerce has its own
 * `@container (max-width: 399px) { width: 100% }` for this, which was not
 * firing here, so the intent is stated directly instead of inherited.
 *
 * min-width is released so 188px cannot hold the button wider than a very
 * narrow column.
 */
@media (max-width: 720px) {
	body.hk .wc-block-components-checkout-place-order-button {
		width: 100% !important;
		min-width: 0 !important;
	}

	/* The cart's primary action gets the same treatment. */
	body.hk .wc-block-cart__submit-button,
	body.hk .wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button {
		width: 100% !important;
	}
}

/* -------------------------------------------------------------------------
 * Price Based on Country — no waiting for base-region shoppers
 *
 * The plugin renders the base price into the cached HTML and then hides it:
 *
 *     .wcpbc-price.loading                        { visibility: hidden }
 *     .wcpbc-price.loading *:not(.wcpbc-placeholder) { display: none }
 *
 * …swapping in flashing dots until its AJAX call returns the visitor's real
 * currency. That is the right default when one cached page must serve every
 * region — but for a shopper in the base region the hidden price is already
 * correct, so the wait shows them dots instead of the number they came for.
 *
 * hk_price_reveal_hint() adds .hk-base-region to <html> in the head, before
 * first paint, when the browser's timezone is a base-region one. Only then do
 * these rules apply. Outscores the plugin on specificity — (0,4,1) against
 * (0,3,0) — so no !important is needed, and nothing changes for anyone else:
 * a visitor abroad still waits for the real conversion rather than being shown
 * a price in the wrong currency.
 * ---------------------------------------------------------------------- */
html.hk-base-region .wcpbc-price.loading {
	visibility: visible;
}

/*
 * revert, not `inline`. Everything the plugin wraps here is inline in the UA
 * stylesheet — <span>, <bdi>, <del>, <ins> — and reverting restores each to its
 * own default instead of flattening a future block-level child to inline.
 */
html.hk-base-region .wcpbc-price.loading *:not(.wcpbc-placeholder) {
	display: revert;
}

html.hk-base-region .wcpbc-price.loading .wcpbc-placeholder {
	display: none;
}