/* ==========================================================================
   Kānchaya v2 — design system ported from the Lovable build.

   Values are the computed values read off the running preview, not eyeballed;
   see docs/lovable-design-tokens.md for the capture.

   Scoping contract: everything visual is nested under `.kchy` so a page opts
   in by carrying that class on its wrapper. Pages that have not been ported
   render exactly as before. Only the :root token block and the @font-face-ish
   family declarations are global, and neither has any effect until something
   references them.
   ========================================================================== */

:root {
	/* Brand ---------------------------------------------------------------- */
	--kchy-ivory: oklch(97.2% 0.013 85.5);
	--kchy-parchment: oklch(95.1% 0.017 84);
	--kchy-stone: oklch(90.6% 0.011 80);
	--kchy-clay: oklch(90.5% 0.024 72);
	--kchy-gold: oklch(72.2% 0.086 78);
	--kchy-forest: oklch(31.8% 0.043 152.5);
	--kchy-ink: oklch(17% 0.004 90);

	/* Semantic ------------------------------------------------------------- */
	--kchy-bg: var(--kchy-ivory);
	--kchy-fg: var(--kchy-forest);
	--kchy-card: oklch(98.8% 0.008 85.5);
	--kchy-muted: oklch(94.1% 0.016 82);
	--kchy-muted-fg: oklch(51.2% 0.028 145);
	--kchy-border: oklch(88.8% 0.019 82);
	--kchy-on-gold: oklch(24% 0.035 152);

	/* Type ----------------------------------------------------------------- */
	--kchy-display: "Cormorant Garamond", "Cormorant", Georgia, serif;
	--kchy-sans: "Jost", "Helvetica Neue", Arial, sans-serif;

	/* Measure -------------------------------------------------------------- */
	--kchy-container: 1280px;
	--kchy-prose: 768px;
	--kchy-gutter: 40px;
	--kchy-section-y: 96px;
}

/* Older engines without OKLCH get the hex approximations. Declared first so
   the OKLCH block above wins wherever it parses. */
@supports not (color: oklch(50% 0.1 90)) {
	:root {
		--kchy-ivory: #faf6ef;
		--kchy-parchment: #f5efe4;
		--kchy-stone: #e4ded5;
		--kchy-clay: #e7dacb;
		--kchy-gold: #c3a06a;
		--kchy-forest: #33463b;
		--kchy-ink: #232220;
		--kchy-card: #fcfaf6;
		--kchy-muted: #f2ece1;
		--kchy-muted-fg: #6b7a6f;
		--kchy-border: #e6ded1;
		--kchy-on-gold: #2b3a30;
	}
}

/* --------------------------------------------------------------------------
   Ground

   The v2 wrapper must carry BOTH `kchy` and `wp-block-group`. The second is
   load-bearing, not decoration: Astra's page-builder CSS sets
   `max-width: none` on `.entry-content > * > *` at (0,4,0) but exempts
   children of .wp-block-group. Drop it and every .kchy-container silently
   loses its 1280px measure and runs full width.
   -------------------------------------------------------------------------- */

.kchy {
	background: var(--kchy-bg);
	color: var(--kchy-fg);
	font-family: var(--kchy-sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
}

/* Astra paints the page white; let the ivory through on ported pages without
   touching the global rule that unported pages still rely on. `body` carries
   .kchy-page via the body_class filter in inc/design-system.php. */
body.kchy-page,
body.kchy-page .site,
body.kchy-page #content,
body.kchy-page .site-content,
body.kchy-page .ast-container,
body.kchy-page .entry-content {
	background: var(--kchy-bg);
}

/* The header and footer bars sit OUTSIDE .site-content, so the rule above never
   reached them: Astra paints the primary header bar #F9F6FE and the footer wrap
   #F9F9F9 from theme_mods. The giveaway is a pale band either side of the
   1240px header wrap, which is already ivory.

   Still scoped to .kchy-page — the header and footer are shared furniture, and
   every un-ported page must keep its current chrome untouched. */
body.kchy-page .ast-above-header-bar,
body.kchy-page .ast-primary-header-bar,
body.kchy-page .ast-below-header-bar,
body.kchy-page .site-above-footer-wrap,
body.kchy-page .site-primary-footer-wrap,
body.kchy-page .site-below-footer-wrap,
body.kchy-page .widget_shopping_cart,
body.kchy-page .astra-cart-drawer {
	background: var(--kchy-bg);
}

/* page-builder layout still leaves Astra's own padding on the wrappers, which
   double-counts against .kchy-section and .kchy-container.

   Note: do NOT add `max-width: none` to a `.entry-content > *` rule here. It
   outweighs .kchy-container (0,2,2 vs 0,1,0) and silently unbounds the measure
   — the v2 sections set their own width and need no help. */
body.kchy-page .site-content .ast-container,
body.kchy-page .entry-content,
body.kchy-page article.page {
	padding: 0;
	margin: 0;
	max-width: none;
}

body.kchy-page .entry-content > * {
	margin-block: 0;
}

/* Three gutters were compounding on mobile: Astra's article padding (20px),
   the .wp-block-group padding the wrapper inherits (24px), and .kchy-container
   (16px) — 60px a side on a 390px screen. Zero the outer two so the container
   is the single source of the gutter. Specificity is deliberately high; both
   defaults are set by theme rules that outweigh a bare class. */
body.kchy-page .site-content .site-main article,
body.kchy-page .entry-content > .kchy.wp-block-group {
	padding: 0;
}

/* Astra underlines every link in post content via
   `.ast-single-post .entry-content a` (0,2,1). v2 links carry their own
   affordances, so opt out at (0,2,2) — deliberately one notch above, not with
   !important, so individual components can still choose to underline. */
body.kchy-page .kchy a {
	text-decoration: none;
}

body.kchy-page .kchy .kchy-breadcrumb a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Type scale
   -------------------------------------------------------------------------- */

.kchy h1,
.kchy h2,
.kchy h3,
.kchy .kchy-display {
	font-family: var(--kchy-display);
	font-weight: 300;
	color: var(--kchy-fg);
	margin: 0;
}

.kchy h1 {
	font-size: 60px;
	line-height: 1;
	letter-spacing: 0.04em;
}

.kchy h2 {
	font-size: 48px;
	line-height: 1;
	letter-spacing: 0.04em;
}

.kchy h3 {
	font-size: 24px;
	line-height: 32px;
	letter-spacing: 0.005em;
}

.kchy p {
	margin: 0;
}

.kchy .kchy-lede {
	font-family: var(--kchy-display);
	font-size: 18px;
	font-style: italic;
	font-weight: 300;
	line-height: 28px;
	color: var(--kchy-muted-fg);
}

/* The signature: 11px uppercase Jost at .28em. Used for collection names,
   section labels, breadcrumbs. */
.kchy .kchy-eyebrow {
	font-family: var(--kchy-sans);
	font-size: 11px;
	font-weight: 400;
	line-height: 16.5px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--kchy-muted-fg);
}

.kchy .kchy-muted {
	color: var(--kchy-muted-fg);
}

/* Mobile display sizes. The 60px h1 is unreadable below ~640px. */
@media (max-width: 640px) {
	.kchy h1 {
		font-size: 40px;
	}

	.kchy h2 {
		font-size: 32px;
	}
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.kchy .kchy-container {
	max-width: var(--kchy-container);
	margin-inline: auto;
	padding-inline: 16px;
}

@media (min-width: 640px) {
	.kchy .kchy-container {
		padding-inline: 24px;
	}
}

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

.kchy .kchy-section {
	padding-block: 64px;
}

@media (min-width: 640px) {
	.kchy .kchy-section {
		padding-block: 80px;
	}
}

@media (min-width: 1024px) {
	.kchy .kchy-section {
		padding-block: var(--kchy-section-y);
	}
}

.kchy .kchy-prose {
	max-width: var(--kchy-prose);
	margin-inline: auto;
}

.kchy .kchy-rule {
	border: 0;
	border-top: 1px solid var(--kchy-border);
	margin: 0;
}

/* --------------------------------------------------------------------------
   Buttons — square, gold, wide-tracked. Radius really is 0 in the source
   even though --radius is .25rem.
   -------------------------------------------------------------------------- */

.kchy .kchy-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 36px;
	border: 1px solid transparent;
	border-radius: 0;
	background: var(--kchy-gold);
	color: var(--kchy-on-gold);
	font-family: var(--kchy-sans);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.kchy .kchy-btn:hover,
.kchy .kchy-btn:focus-visible {
	background: color-mix(in oklch, var(--kchy-gold) 85%, var(--kchy-ink));
	color: var(--kchy-on-gold);
}

.kchy .kchy-btn--outline {
	background: transparent;
	border-color: var(--kchy-fg);
	color: var(--kchy-fg);
}

.kchy .kchy-btn--outline:hover,
.kchy .kchy-btn--outline:focus-visible {
	background: var(--kchy-fg);
	color: var(--kchy-ivory);
	border-color: var(--kchy-fg);
}

.kchy .kchy-btn--block {
	display: flex;
	width: 100%;
}

.kchy .kchy-btn:focus-visible {
	outline: 2px solid var(--kchy-gold);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Product page
   -------------------------------------------------------------------------- */

.kchy .kchy-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding-top: 32px;
	font-size: 12px;
	color: var(--kchy-muted-fg);
}

.kchy .kchy-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.kchy .kchy-breadcrumb a:hover {
	color: var(--kchy-fg);
	text-decoration: underline;
}

.kchy .kchy-breadcrumb__sep {
	opacity: 0.5;
}

.kchy .kchy-product {
	display: grid;
	align-items: start;
	gap: 40px;
	padding-block: 40px;
}

@media (min-width: 1024px) {
	.kchy .kchy-product {
		grid-template-columns: 1fr 1fr;
		gap: 64px;
		padding-block: 56px;
	}
}

/* Gallery.

   The reference uses a fixed 4:5 portrait frame, which assumes 4:5 photography.
   Ours is 3:2, and a 4:5 frame with object-fit:cover crops it hard — exactly
   what Dhvani asked us not to do on 2026-08-02 ("blocks should not crop the
   images, rather adapt to them").

   So the frame carries no ratio of its own and takes the photograph's. That
   satisfies the instruction today AND lands on the reference's 4:5 by itself
   the day 4:5 photography replaces these files — no CSS change needed. */
.kchy .kchy-gallery__main {
	overflow: hidden;
	background: var(--kchy-bg);
}

.kchy .kchy-gallery__main img {
	width: 100%;
	height: auto;
	display: block;
	opacity: 1;
	transition: opacity 0.16s ease;
}

@media (prefers-reduced-motion: reduce) {
	.kchy .kchy-gallery__main img {
		transition: none;
	}
}

.kchy .kchy-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 16px;
	padding: 0;
	list-style: none;
}

/* Thumbnails and product cards keep a fixed box so the grids stay regular, but
   the image is contained rather than cropped, and the box takes the page ground
   so the letterboxing reads as the photograph floating rather than as a
   mis-sized frame. Same no-crop rule as the main gallery, different constraint. */
.kchy .kchy-gallery__thumbs li {
	margin: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--kchy-bg);
}

/* Each thumbnail is a real button: keyboard-reachable, and announced as a
   control rather than as decoration. The current one is marked with
   aria-current, which doubles as the styling hook. */
.kchy .kchy-gallery__thumb {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 0;
	background: var(--kchy-bg);
	cursor: pointer;
	opacity: 0.6;
	appearance: none;
	-webkit-appearance: none;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.kchy .kchy-gallery__thumb:hover {
	opacity: 1;
}

.kchy .kchy-gallery__thumb[aria-current="true"] {
	opacity: 1;
	border-color: var(--kchy-gold);
}

.kchy .kchy-gallery__thumb:focus-visible {
	outline: 2px solid var(--kchy-gold);
	outline-offset: 2px;
}

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

.kchy .kchy-gallery__thumbs img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	pointer-events: none;
}

.kchy .kchy-gallery__note {
	margin-top: 16px;
	font-size: 12px;
	line-height: 20px;
	color: var(--kchy-muted-fg);
}

@media (min-width: 1024px) {
	.kchy .kchy-product__info {
		padding-top: 24px;
	}
}

.kchy .kchy-product__title {
	margin-top: 12px;
	font-size: 30px;
}

@media (min-width: 640px) {
	.kchy .kchy-product__title {
		font-size: 36px;
	}
}

.kchy .kchy-product__tagline {
	margin-top: 12px;
}

.kchy .kchy-product__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px;
	margin-top: 24px;
	font-family: var(--kchy-display);
	font-size: 24px;
	font-weight: 300;
}

.kchy .kchy-product__desc {
	margin-top: 24px;
}

/* Spec table: two columns, hairline rules top and bottom. */
.kchy .kchy-specs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 24px;
	row-gap: 16px;
	margin-top: 32px;
	padding-block: 24px;
	border-top: 1px solid var(--kchy-border);
	border-bottom: 1px solid var(--kchy-border);
}

.kchy .kchy-specs dt {
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--kchy-muted-fg);
	margin: 0;
}

.kchy .kchy-specs dd {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 22px;
}

.kchy .kchy-product__block {
	margin-top: 36px;
}

.kchy .kchy-product__block > * + * {
	margin-top: 12px;
}

/* --------------------------------------------------------------------------
   Ink panel — the dark collection-story band
   -------------------------------------------------------------------------- */

/* Full-bleed regardless of what the theme wraps us in. Astra's own .alignfull
   only works on direct children of .entry-content, and the v2 sections are a
   level deeper inside the group wrapper. */
.kchy .kchy-bleed,
.kchy .kchy-ink-panel {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.kchy .kchy-ink-panel {
	background: var(--kchy-ink);
	color: var(--kchy-ivory);
}

.kchy .kchy-ink-panel .kchy-inner {
	max-width: 768px;
	margin-inline: auto;
	padding: 64px 24px;
	text-align: center;
}

@media (min-width: 640px) {
	.kchy .kchy-ink-panel .kchy-inner {
		padding-block: 80px;
	}
}

.kchy .kchy-ink-panel h2,
.kchy .kchy-ink-panel h3 {
	color: var(--kchy-ivory);
}

.kchy .kchy-ink-panel .kchy-eyebrow {
	color: inherit;
	opacity: 0.6;
}

.kchy .kchy-ink-panel p {
	color: inherit;
	opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Product grid (related / collection listing)
   -------------------------------------------------------------------------- */

.kchy .kchy-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 20px;
	row-gap: 48px;
	margin-top: 40px;
	padding: 0;
	list-style: none;
}

@media (min-width: 1024px) {
	.kchy .kchy-grid {
		grid-template-columns: repeat(4, 1fr);
		column-gap: 32px;
	}
}

.kchy .kchy-grid > li {
	margin: 0;
}

.kchy .kchy-card {
	display: block;
	text-decoration: none;
	color: inherit;
}

.kchy .kchy-card__media {
	display: block;
	overflow: hidden;
	background: var(--kchy-bg);
	/* 3:2 matches the photography we actually have, so landscape shots fill the
	   frame edge to edge instead of floating in a tall box. Change to 4 / 5 (the
	   reference value) the day portrait product photography replaces these. */
	aspect-ratio: 3 / 2;
}

.kchy .kchy-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transition: transform 0.6s ease;
}

.kchy .kchy-card:hover .kchy-card__media img {
	transform: scale(1.03);
}

.kchy .kchy-card__name {
	display: block;
	margin-top: 16px;
	font-family: var(--kchy-display);
	font-size: 20px;
	font-weight: 300;
	line-height: 28px;
}

.kchy .kchy-card__meta {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: var(--kchy-muted-fg);
}

/* --------------------------------------------------------------------------
   Form controls inside ported pages — colour select, quantity, add-to-cart.
   These override the Phase C `.kanchaya-product-cta` look for v2 pages only.
   -------------------------------------------------------------------------- */

.kchy select,
.kchy input[type="number"],
.kchy input[type="text"],
.kchy input[type="email"] {
	font-family: var(--kchy-sans);
	font-size: 14px;
	color: var(--kchy-fg);
	background: var(--kchy-card);
	border: 1px solid var(--kchy-border);
	border-radius: 0;
	min-height: 44px;
	padding: 0 12px;
}

.kchy select:focus-visible,
.kchy input:focus-visible {
	outline: 2px solid var(--kchy-gold);
	outline-offset: 2px;
}

/* The unpriced state. kanchaya_cta_email_fallback() emits a fixed h2 + mailto
   link; v2 presents that link as the primary button rather than underlined text. */
.kchy .kanchaya-product-cta-h {
	font-family: var(--kchy-sans);
	font-size: 11px;
	font-weight: 400;
	line-height: 16.5px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--kchy-muted-fg);
	margin: 0 0 12px;
}

.kchy .kanchaya-product-cta > p > a[href^="mailto:"] {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 36px;
	background: var(--kchy-gold);
	color: var(--kchy-on-gold);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
}

.kchy .kanchaya-cta-price {
	font-family: var(--kchy-display);
	font-size: 24px;
	font-weight: 300;
	color: var(--kchy-fg);
}

.kchy .kanchaya-cta-stock,
.kchy .kanchaya-cta-soldout {
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--kchy-muted-fg);
}

.kchy .kanchaya-product-cta button[type="submit"],
.kchy .kanchaya-product-cta .single_add_to_cart_button {
	background: var(--kchy-gold);
	color: var(--kchy-on-gold);
	font-family: var(--kchy-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	border: 0;
	border-radius: 0;
	min-height: 44px;
	padding: 0 36px;
	width: 100%;
}

/* --------------------------------------------------------------------------
   Colour / finish swatches — v2 treatment.
   Structure and behaviour come from inc/colour-option.php and the base rules
   in style.css; this only restates what v2 sees differently — the eyebrow
   label, the square chip, and the forest/gold palette. Selectors mirror the
   base ones with `.kchy` prepended so they always win.
   -------------------------------------------------------------------------- */

.kchy .kanchaya-cta-colour.kchy-colourfield {
	margin: 0;
}

.kchy .kanchaya-cta-colour .kchy-colourfield__label {
	font-family: var(--kchy-sans);
	font-size: 11px;
	font-weight: 400;
	line-height: 16.5px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--kchy-muted-fg);
}

.kchy .kanchaya-cta-colour .kchy-swatches label.kchy-swatch {
	border-color: var(--kchy-border);
	border-radius: 0;
}

.kchy .kanchaya-cta-colour .kchy-swatches label.kchy-swatch:hover {
	border-color: var(--kchy-muted-fg);
}

.kchy .kanchaya-cta-colour .kchy-swatches .kchy-swatch__name {
	font-family: var(--kchy-sans);
	font-size: 15px;
	color: var(--kchy-fg);
}

.kchy .kanchaya-cta-colour .kchy-swatches .kchy-swatch__input:checked + label.kchy-swatch {
	border-color: var(--kchy-fg);
}

.kchy .kanchaya-cta-colour .kchy-swatches .kchy-swatch__input:focus-visible + label.kchy-swatch {
	outline: 2px solid var(--kchy-gold);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Accordions — product details / dimensions / care / shipping.

   Native <details>/<summary>: open-close, keyboard operation and screen-reader
   announcement all come for free, and the content stays in the DOM (and so in
   search and in print) when collapsed. No JavaScript at all.
   -------------------------------------------------------------------------- */

.kchy .kchy-accordions {
	margin-top: 40px;
	border-top: 1px solid var(--kchy-border);
}

.kchy .kchy-accordion {
	border-bottom: 1px solid var(--kchy-border);
}

.kchy .kchy-accordion__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 0;
	cursor: pointer;
	font-family: var(--kchy-display);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--kchy-fg);
	/* Both are needed to drop the native disclosure triangle across engines. */
	list-style: none;
}

.kchy .kchy-accordion__summary::-webkit-details-marker {
	display: none;
}

.kchy .kchy-accordion__summary::after {
	content: "+";
	flex: 0 0 auto;
	font-family: var(--kchy-sans);
	font-size: 18px;
	font-weight: 300;
	line-height: 1;
	color: var(--kchy-muted-fg);
}

.kchy .kchy-accordion[open] .kchy-accordion__summary::after {
	content: "–";
}

.kchy .kchy-accordion__summary:focus-visible {
	outline: 2px solid var(--kchy-gold);
	outline-offset: 2px;
}

.kchy .kchy-accordion__body {
	padding: 0 0 24px;
	color: var(--kchy-muted-fg);
}

.kchy .kchy-accordion__body p + p {
	margin-top: 12px;
}

.kchy .kchy-accordion__body ul {
	margin: 0;
	padding-left: 20px;
	list-style: disc;
}

.kchy .kchy-accordion__body li {
	margin: 0 0 8px;
	padding: 0;
}

.kchy .kchy-accordion__body li:last-child {
	margin-bottom: 0;
}

/* A product with no photography yet still needs to hold the column, and should
   say why rather than showing an unexplained empty box. */
.kchy .kchy-gallery__empty {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 2;
	background: var(--kchy-muted);
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--kchy-muted-fg);
}

/* --------------------------------------------------------------------------
   Header and footer (v2 pages only — the markup itself is swapped in by
   inc/v2-chrome.php, so these selectors can never match on a v1 page).
   These sit OUTSIDE the .kchy content wrapper, so they carry their own type.
   -------------------------------------------------------------------------- */

.kchy-hdr {
	background: var(--kchy-bg);
	border-bottom: 1px solid var(--kchy-border);
	font-family: var(--kchy-sans);
	color: var(--kchy-fg);
}

.kchy-hdr__announce {
	margin: 0;
	padding: 8px 16px;
	background: var(--kchy-ink);
	color: var(--kchy-gold);
	font-size: 11px;
	line-height: 16.5px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	text-align: center;
}

.kchy-hdr__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	max-width: var(--kchy-container);
	margin-inline: auto;
	min-height: 72px;
	padding-inline: 16px;
}

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

.kchy-hdr__toggle {
	justify-self: start;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	width: 44px;
	height: 44px;
	padding: 0 6px;
	background: none;
	border: 0;
	cursor: pointer;
}

.kchy-hdr__toggle-line {
	display: block;
	width: 22px;
	height: 1px;
	background: var(--kchy-fg);
}

.kchy-hdr__wordmark {
	font-family: var(--kchy-display);
	font-size: 24px;
	font-weight: 400;
	letter-spacing: 0.22em;
	text-decoration: none;
	color: var(--kchy-fg);
	white-space: nowrap;
}

.kchy-hdr__actions {
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.kchy-hdr__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--kchy-fg);
	text-decoration: none;
}

/* Same contract as the v1 header cart: invisible while empty, but kept in the
   layout and the DOM so a fragment refresh can bring it back. */
.kchy-hdr__cart--empty {
	visibility: hidden;
}

.kchy-hdr__count {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: var(--kchy-gold);
	color: var(--kchy-on-gold);
	font-size: 10px;
	font-weight: 500;
	line-height: 16px;
	text-align: center;
}

.kchy-hdr__toggle:focus-visible,
.kchy-hdr__icon:focus-visible,
.kchy-drawer__close:focus-visible,
.kchy-drawer__menu a:focus-visible {
	outline: 2px solid var(--kchy-gold);
	outline-offset: 2px;
}

/* Drawer ------------------------------------------------------------------ */

.kchy-drawer-overlay {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: rgba(20, 18, 14, 0.45);
}

.kchy-drawer {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 61;
	width: min(320px, 85vw);
	padding: 24px;
	background: var(--kchy-bg);
	border-right: 1px solid var(--kchy-border);
	font-family: var(--kchy-sans);
	overflow-y: auto;
}

.kchy-drawer-open {
	overflow: hidden;
}

.kchy-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0 0 16px -10px;
	background: none;
	border: 0;
	font-size: 26px;
	font-weight: 300;
	line-height: 1;
	color: var(--kchy-fg);
	cursor: pointer;
}

.kchy-drawer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kchy-drawer__menu li {
	margin: 0;
	border-bottom: 1px solid var(--kchy-border);
}

.kchy-drawer__menu a {
	display: block;
	padding: 16px 4px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--kchy-fg);
}

.kchy-drawer__menu a:hover {
	color: var(--kchy-gold);
}

/* Footer ------------------------------------------------------------------ */

.kchy-ftr {
	background: var(--kchy-parchment);
	border-top: 1px solid var(--kchy-border);
	font-family: var(--kchy-sans);
	color: var(--kchy-fg);
}

.kchy-ftr__inner {
	display: grid;
	gap: 32px;
	max-width: var(--kchy-container);
	margin-inline: auto;
	padding: 56px 16px;
}

@media (min-width: 1024px) {
	.kchy-ftr__inner {
		grid-template-columns: 1fr auto 1fr;
		align-items: start;
		padding: 64px var(--kchy-gutter);
	}

	.kchy-ftr__copy {
		text-align: right;
	}
}

.kchy-ftr__wordmark {
	margin: 0 0 12px;
	font-family: var(--kchy-display);
	font-size: 20px;
	letter-spacing: 0.22em;
}

.kchy-ftr__lines {
	margin: 0;
	font-size: 14px;
	line-height: 24px;
	color: var(--kchy-muted-fg);
}

.kchy-ftr__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.kchy-ftr__menu a {
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--kchy-fg);
}

.kchy-ftr__menu a:hover {
	color: var(--kchy-gold);
}

.kchy-ftr__copy {
	margin: 0;
	font-size: 13px;
	color: var(--kchy-muted-fg);
}

/* --------------------------------------------------------------------------
   Collection page
   -------------------------------------------------------------------------- */

.kchy .kchy-collection__header {
	padding-block: 48px 40px;
	text-align: center;
}

@media (min-width: 1024px) {
	.kchy .kchy-collection__header {
		padding-block: 72px 56px;
	}
}

.kchy .kchy-collection__header h1 {
	margin-top: 16px;
}

.kchy .kchy-collection__lede {
	margin-top: 16px;
}

.kchy .kchy-collection__tagline {
	margin-top: 8px;
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--kchy-muted-fg);
}

/* Full-bleed band, same trick as the ink panel: Astra's .alignfull only works
   on direct children of .entry-content and this sits a level deeper.

   No max-height and no overflow clip. An earlier version capped this at 70vh,
   which silently hid 399px of the photograph on a 1440x800 laptop — the exact
   cropping Dhvani ruled out. A full-bleed editorial hero is tall by design;
   the fix for "too tall" is a wider crop of the source file, not a clip here. */
.kchy .kchy-collection__hero {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	background: var(--kchy-bg);
}

.kchy .kchy-collection__hero img {
	display: block;
	width: 100%;
	height: auto;
	/* No fixed ratio and no cover: the band takes the photograph's shape
	   rather than cropping it, same rule as the product gallery. */
}

.kchy .kchy-collection__intro {
	padding-block: 56px 0;
	text-align: center;
}

@media (min-width: 1024px) {
	.kchy .kchy-collection__intro {
		padding-block: 72px 0;
	}
}

.kchy .kchy-collection__intro p + p {
	margin-top: 16px;
}

/* A piece with no photography still holds its cell in the grid. */
.kchy .kchy-card__media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 2;
	background: var(--kchy-muted);
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--kchy-muted-fg);
	text-align: center;
}

/* --------------------------------------------------------------------------
   Home
   -------------------------------------------------------------------------- */

.kchy .kchy-hero {
	position: relative;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	background: var(--kchy-ink);
	isolation: isolate;
}

/* Uncropped, like every other image in v2: the band takes the photograph's
   shape rather than clipping it to a fixed height. */
.kchy .kchy-hero__img {
	display: block;
	width: 100%;
	height: auto;
}

/* The panel sits over the lower half of the photograph. The scrim is what
   makes the type legible over an unknown image — without it the wordmark
   depends on whatever happens to be behind it. */
.kchy .kchy-hero__panel {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 96px 24px 40px;
	text-align: center;
	background: linear-gradient(to top,
		oklch(17% 0.004 90 / 0.78) 0%,
		oklch(17% 0.004 90 / 0.55) 45%,
		oklch(17% 0.004 90 / 0) 100%);
}

.kchy .kchy-hero__eyebrow,
.kchy .kchy-hero__wordmark,
.kchy .kchy-hero__lede {
	color: var(--kchy-ivory);
}

.kchy .kchy-hero__eyebrow {
	opacity: 0.75;
}

.kchy .kchy-hero__wordmark {
	margin-top: 12px;
	font-family: var(--kchy-display);
	font-size: clamp(32px, 7vw, 68px);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: 0.22em;
	/* The macron sits high on the K; a touch of leading keeps it off the edge. */
	padding-top: 4px;
}

.kchy .kchy-hero__lede {
	margin-top: 12px;
	font-family: var(--kchy-display);
	font-size: clamp(16px, 2.2vw, 22px);
	font-style: italic;
	font-weight: 300;
	opacity: 0.92;
}

.kchy .kchy-home__manifesto,
.kchy .kchy-home__letter {
	text-align: center;
}

.kchy .kchy-home__manifesto h2 {
	margin-top: 16px;
}

.kchy .kchy-home__para {
	margin-top: 20px;
}

.kchy .kchy-home__quote {
	margin-top: 28px;
	color: var(--kchy-gold);
}

.kchy .kchy-pillars {
	display: grid;
	gap: 32px;
	margin: 56px 0 0;
	padding: 32px 0 0;
	border-top: 1px solid var(--kchy-border);
	list-style: none;
	text-align: center;
}

@media (min-width: 768px) {
	.kchy .kchy-pillars {
		grid-template-columns: repeat(3, 1fr);
		gap: 40px;
	}
}

.kchy .kchy-pillars li {
	margin: 0;
}

.kchy .kchy-pillars li p + p {
	margin-top: 8px;
	color: var(--kchy-muted-fg);
}

/* Collection cards ------------------------------------------------------- */

.kchy .kchy-cgrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 20px;
	row-gap: 48px;
	margin-top: 40px;
	padding: 0;
	list-style: none;
}

@media (min-width: 1024px) {
	.kchy .kchy-cgrid {
		grid-template-columns: repeat(4, 1fr);
		column-gap: 32px;
	}
}

.kchy .kchy-cgrid > li {
	margin: 0;
}

.kchy .kchy-ccard {
	display: block;
	text-decoration: none;
	color: inherit;
}

.kchy .kchy-ccard__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--kchy-bg);
}

.kchy .kchy-ccard__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transition: transform 0.6s ease;
}

.kchy .kchy-ccard:hover .kchy-ccard__media img {
	transform: scale(1.03);
}

.kchy .kchy-ccard__name {
	display: block;
	margin-top: 16px;
	font-family: var(--kchy-display);
	font-size: 22px;
	font-weight: 300;
	line-height: 28px;
}

.kchy .kchy-ccard__lede {
	display: block;
	margin-top: 4px;
	font-family: var(--kchy-display);
	font-size: 15px;
	font-style: italic;
	color: var(--kchy-muted-fg);
}

.kchy .kchy-home__categories {
	margin-top: 20px;
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
	.kchy .kchy-ccard__media img { transition: none; }
}


/* --------------------------------------------------------------------------
   Image edges

   Measured 2026-08-18: against the ivory ground (luminance 246), five of the
   eight collection photographs sit at 232-235 and the Cheese Platter shot at
   247 — the same brightness as the page. Without an edge those images simply
   dissolve and a card reads as empty.

   A hairline is the smallest fix that does not touch the photograph: nothing
   is cropped, tinted or boxed in. It does not rescue a white-on-ivory shot,
   it just stops the frame from disappearing. The real fix is the reshoot.
   -------------------------------------------------------------------------- */

.kchy .kchy-card__media,
.kchy .kchy-ccard__media,
.kchy .kchy-gallery__main {
	box-shadow: inset 0 0 0 1px var(--kchy-border);
}

/* --------------------------------------------------------------------------
   Our Story
   -------------------------------------------------------------------------- */

.kchy .kchy-story__letter {
	text-align: center;
	padding-block: 56px 72px;
}

.kchy .kchy-story__letter p {
	font-family: var(--kchy-display);
	font-size: clamp(18px, 2.1vw, 22px);
	font-weight: 300;
	line-height: 1.7;
}

.kchy .kchy-story__letter p + p {
	margin-top: 24px;
}

.kchy .kchy-story__block {
	text-align: center;
}

.kchy .kchy-story__close {
	text-align: center;
}

.kchy .kchy-story__close-line {
	margin-top: 8px;
}

.kchy .kchy-story__cta,
.kchy .kchy-home__more {
	margin-top: 32px;
}

/* --------------------------------------------------------------------------
   Shop
   -------------------------------------------------------------------------- */

.kchy .kchy-shop {
	padding-block: 0 24px;
}

@media (min-width: 1024px) {
	.kchy .kchy-shop {
		display: grid;
		grid-template-columns: 220px 1fr;
		gap: 48px;
		align-items: start;
	}
}

.kchy .kchy-shop__facets {
	display: grid;
	gap: 28px;
	margin-bottom: 40px;
}

@media (min-width: 1024px) {
	.kchy .kchy-shop__facets {
		position: sticky;
		top: 24px;
		margin-bottom: 0;
	}
}

.kchy .kchy-facet {
	border: 0;
	border-top: 1px solid var(--kchy-border);
	margin: 0;
	padding: 16px 0 0;
	min-width: 0;
}

.kchy .kchy-facet legend {
	padding: 0;
	margin-bottom: 12px;
}

.kchy .kchy-facet__opt {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 32px;
	font-size: 14px;
	cursor: pointer;
}

.kchy .kchy-facet__opt input {
	width: 15px;
	height: 15px;
	margin: 0;
	accent-color: var(--kchy-gold);
	flex: 0 0 auto;
}

.kchy .kchy-facet__opt input:focus-visible {
	outline: 2px solid var(--kchy-gold);
	outline-offset: 2px;
}

.kchy .kchy-shop__clear {
	justify-self: start;
	padding: 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--kchy-border);
	font-family: var(--kchy-sans);
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--kchy-muted-fg);
	cursor: pointer;
}

.kchy .kchy-shop__clear:hover {
	color: var(--kchy-fg);
	border-bottom-color: var(--kchy-fg);
}

.kchy .kchy-shop__count {
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--kchy-muted-fg);
}

.kchy .kchy-shop__grid {
	margin-top: 24px;
}

/* [hidden] needs help: .kchy-grid > li is a grid item, and display:grid on the
   list would otherwise override the attribute's display:none. */
.kchy .kchy-shop__grid > li[hidden] {
	display: none;
}

.kchy .kchy-shop__empty {
	margin-top: 32px;
	font-family: var(--kchy-display);
	font-size: 20px;
	font-style: italic;
	color: var(--kchy-muted-fg);
}

/* Filter disclosure. The panel is ~1400px tall, so it opens on desktop and
   stays collapsed on phones (handled in v2-shop.js, which knows the
   viewport). */
.kchy .kchy-shop__filters {
	margin-bottom: 32px;
}

.kchy .kchy-shop__filters-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--kchy-border);
	font-family: var(--kchy-sans);
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--kchy-fg);
	cursor: pointer;
	list-style: none;
}

.kchy .kchy-shop__filters-toggle::-webkit-details-marker {
	display: none;
}

.kchy .kchy-shop__filters-toggle::after {
	content: "+";
	margin-left: auto;
	font-size: 16px;
	letter-spacing: 0;
	color: var(--kchy-muted-fg);
}

.kchy .kchy-shop__filters[open] .kchy-shop__filters-toggle::after {
	content: "–";
}

.kchy .kchy-shop__filters-toggle:focus-visible {
	outline: 2px solid var(--kchy-gold);
	outline-offset: 2px;
}

.kchy .kchy-shop__filters[open] .kchy-shop__facets {
	margin-top: 24px;
}

@media (min-width: 1024px) {
	/* On desktop the panel is the sidebar; the toggle would be noise. */
	.kchy .kchy-shop__filters-toggle {
		display: none;
	}

	.kchy .kchy-shop__filters {
		position: sticky;
		top: 24px;
		margin-bottom: 0;
	}

	.kchy .kchy-shop__facets {
		margin-bottom: 0;
	}
}

/* Collections index ------------------------------------------------------ */

.kchy .kchy-collections__index .kchy-cgrid {
	margin-top: 0;
}

@media (min-width: 1024px) {
	/* Three across reads better than four here: eight cards make a clean
	   3-3-2, and each collection gets a larger frame than on the home strip. */
	.kchy .kchy-collections__index .kchy-cgrid {
		grid-template-columns: repeat(3, 1fr);
		column-gap: 32px;
		row-gap: 56px;
	}
}

.kchy .kchy-ccard__count {
	display: block;
	margin-top: 6px;
	font-family: var(--kchy-sans);
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--kchy-muted-fg);
}