/* ==========================================================================
   KoolAllure Storefront — WS17 Storefront Unification design system.

   One warm, luminous, premium surface for the catalog routes (Shop,
   category archives, canonical product detail). Ivory/warm-white — never
   clinical white, never the heavy dark-grey legacy appearance. Scoped to
   the canonical storefront components; the shared ka-nav chrome lives in
   experience.css and is intentionally untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The --kas-* palette MOVED to assets/css/tokens.css.

   Every name below was a second definition of a colour, radius, shadow, font
   or easing that already existed under another prefix — --kas-bg and --imm-bg
   were the same hex, --kas-accent and --ka-accent were the same gold, and
   --kas-radius was a third opinion about what a card's corner is. The names
   still work; they are aliases now, so nothing in this file needed editing.

   What stays here is the watermark, because it is not a palette: it is one
   specific treatment with its own opacity, blur, saturate and veil, consumed
   by this file AND by immersive-store.css so the boutique filigrane is
   identical on every product display (owner directive 2026-08-07 §4).
   -------------------------------------------------------------------------- */
:root {
	--ka-watermark-opacity: 0.30;
	--ka-watermark-blur: 3px;
	--ka-watermark-saturate: 0.85;
	--ka-watermark-veil: linear-gradient(180deg, rgba(245, 240, 231, 0.70) 0%, rgba(245, 240, 231, 0.82) 100%);
}

/*
 * The shared watermark component. One fixed layer under the whole page:
 * the boutique scene at low opacity with a gentle blur, read through a
 * warm-ivory veil. It never receives pointer events, never reserves layout,
 * and never competes with the product, which stays the foreground.
 */
.ka-watermark {
	position: fixed;
	inset: 0;
	z-index: 0;
	margin: 0;
	overflow: hidden;
	pointer-events: none;
}
.ka-watermark picture,
.ka-watermark img {
	display: block;
	width: 100%;
	height: 100%;
}
.ka-watermark img {
	object-fit: cover;
	opacity: var(--ka-watermark-opacity);
	filter: blur(var(--ka-watermark-blur)) saturate(var(--ka-watermark-saturate));
}
.ka-watermark::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--ka-watermark-veil);
}

body.tax-product_cat,
body.post-type-archive-product,
body.single-product {
	background: var(--kas-bg);
	font-family: var(--kas-font-ui);
}

/* --------------------------------------------------------------------------
   Archive shell
   -------------------------------------------------------------------------- */
.ka-arch {
	max-width: 1440px;
	margin: 0 auto;
	padding: calc(var(--ka-nav-clear) + 40px) clamp(16px, 4vw, 56px) 96px;
}

.ka-arch__crumbs {
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	color: var(--kas-muted);
	margin-bottom: 18px;
}
.ka-arch__crumbs a { color: var(--kas-muted); text-decoration: none; }
.ka-arch__crumbs a:hover, .ka-arch__crumbs a:focus-visible { color: var(--kas-accent-deep); text-decoration: underline; }
.ka-arch__crumbs [aria-current] { color: var(--kas-ink); }

.ka-arch__head {
	display: flex;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 22px;
}
.ka-arch__title {
	font-family: var(--kas-font-display);
	font-weight: 400;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.1;
	margin: 0;
	color: var(--kas-ink);
}
.ka-arch__count {
	margin: 0;
	font-size: 0.9rem;
	color: var(--kas-muted);
	letter-spacing: 0.03em;
}

.ka-arch__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
}
.ka-arch__chip {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border-radius: var(--ka-radius-pill);
	border: 1px solid var(--kas-line);
	background: var(--kas-panel);
	color: var(--kas-ink);
	font-size: 0.86rem;
	text-decoration: none;
	transition: border-color 0.25s var(--kas-ease), background 0.25s var(--kas-ease), transform 0.25s var(--kas-ease);
}
.ka-arch__chip:hover, .ka-arch__chip:focus-visible {
	border-color: var(--kas-accent);
	background: var(--kas-accent-soft);
	transform: translateY(-1px);
}
.ka-arch__chip.is-active {
	background: var(--kas-ink);
	border-color: var(--kas-ink);
	color: var(--kas-panel);
}

.ka-arch__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 14px 0;
	border-top: 1px solid var(--kas-line);
	border-bottom: 1px solid var(--kas-line);
	margin-bottom: 28px;
}
.ka-arch__sort {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.ka-arch__sort-label {
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kas-muted);
	margin-right: 8px;
}
.ka-arch__sort-opt,
.ka-arch__filter {
	padding: 7px 14px;
	border-radius: var(--ka-radius-pill);
	font-size: 0.85rem;
	color: var(--kas-ink);
	text-decoration: none;
	border: 1px solid transparent;
	transition: border-color 0.25s var(--kas-ease), background 0.25s var(--kas-ease);
}
.ka-arch__sort-opt:hover, .ka-arch__sort-opt:focus-visible,
.ka-arch__filter:hover, .ka-arch__filter:focus-visible {
	border-color: var(--kas-accent);
	background: var(--kas-accent-soft);
}
.ka-arch__sort-opt.is-active {
	background: var(--kas-accent-soft);
	border-color: var(--kas-accent);
	color: var(--kas-accent-deep);
	font-weight: 500;
}
.ka-arch__filter {
	border: 1px solid var(--kas-line);
	background: var(--kas-panel);
}
.ka-arch__filter.is-active {
	background: var(--kas-accent);
	border-color: var(--kas-accent);
	color: #fffdf6;
}

.ka-arch__empty {
	font-family: var(--kas-font-display);
	font-size: 1.4rem;
	color: var(--kas-muted);
	padding: 80px 0;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Product grid + canonical card
   -------------------------------------------------------------------------- */
.ka-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 26px 22px;
}
@media (max-width: 1180px) { .ka-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .ka-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; } }

.ka-card { min-width: 0; }
.ka-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--kas-panel);
	border: 1px solid var(--kas-line);
	border-radius: var(--kas-radius);
	overflow: hidden;
	text-decoration: none;
	color: var(--kas-ink);
	box-shadow: none;
	transition: box-shadow 0.3s var(--kas-ease), transform 0.3s var(--kas-ease), border-color 0.3s var(--kas-ease);
}
.ka-card__link:hover, .ka-card__link:focus-visible {
	box-shadow: var(--kas-shadow-hover);
	transform: translateY(-3px);
	border-color: var(--ka-gold-35);
	outline: none;
}
.ka-card__link:focus-visible {
	outline: var(--ka-focus-width) solid hsl(var(--ka-focus));
	outline-offset: 3px;
}

.ka-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	background: linear-gradient(160deg, #f3ecdf 0%, #ece2d0 100%);
	overflow: hidden;
}
.ka-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--kas-ease);
}
.ka-card__link:hover .ka-card__media img { transform: scale(1.04); }
.ka-card__placeholder {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(circle at 50% 38%, var(--ka-gold-12), transparent 62%),
		linear-gradient(160deg, #f3ecdf 0%, #ece2d0 100%);
}
.ka-card__placeholder::after {
	content: "✦";
	font-size: 2rem;
	color: rgba(143, 106, 32, 0.5);
}
.ka-card__media.is-fallback .ka-card__placeholder { display: flex; }

.ka-card__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 4px 10px;
	border-radius: var(--ka-radius-pill);
	background: var(--kas-accent);
	color: #fffdf6;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.05em;
}
.ka-card__oos {
	position: absolute;
	bottom: 10px;
	left: 10px;
	padding: 4px 10px;
	border-radius: var(--ka-radius-pill);
	background: rgba(36, 28, 17, 0.72);
	color: #f6efe2;
	font-size: 0.72rem;
	letter-spacing: 0.05em;
}

.ka-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px 16px;
	flex: 1;
}
.ka-card__title {
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.7em;
}
.ka-card__prices { display: flex; align-items: baseline; gap: 8px; }
.ka-card__price {
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--kas-ink);
	white-space: nowrap;
}
.ka-card__was {
	font-size: 0.82rem;
	color: var(--kas-muted);
}
.ka-card__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.78rem;
	color: var(--kas-muted);
}
.ka-card__rating { color: var(--kas-accent-deep); }
.ka-card__ship {
	font-size: 0.76rem;
	color: var(--kas-muted);
	letter-spacing: 0.02em;
	margin-top: auto;
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.ka-arch__pages { margin-top: 44px; }
.ka-arch__pages-list {
	display: flex;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ka-arch__pages-list a,
.ka-arch__pages-list span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	border-radius: var(--ka-radius-pill);
	border: 1px solid var(--kas-line);
	background: var(--kas-panel);
	color: var(--kas-ink);
	font-size: 0.88rem;
	text-decoration: none;
}
.ka-arch__pages-list a:hover, .ka-arch__pages-list a:focus-visible {
	border-color: var(--kas-accent);
	background: var(--kas-accent-soft);
}
.ka-arch__pages-list span.current {
	background: var(--kas-ink);
	border-color: var(--kas-ink);
	color: var(--kas-panel);
}

@media (max-width: 600px) {
	.ka-arch { padding-top: calc(var(--ka-nav-clear) + 24px); }
	.ka-arch__controls { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   Canonical product detail (WS17) — one renderer for Browse and AI-opened
   products. Shares card tokens and the ka-sku picker look from
   experience.css; layout/panel only here.
   -------------------------------------------------------------------------- */
.ka-pd {
	max-width: 1280px;
	margin: 0 auto;
	padding: calc(var(--ka-nav-clear) + 40px) clamp(16px, 4vw, 56px) 96px;
	/* Above the shared boutique watermark layer (z-index 0). */
	position: relative;
	z-index: 1;
}
.ka-pd__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
}
@media (max-width: 900px) {
	.ka-pd__layout { grid-template-columns: 1fr; }
}

.ka-pd__stage {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: var(--kas-radius);
	overflow: hidden;
	background: linear-gradient(160deg, #f3ecdf 0%, #ece2d0 100%);
	border: 1px solid var(--kas-line);
}
.ka-pd__stage img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.25s var(--kas-ease);
}
.ka-pd__stage img.fading { opacity: 0.35; }
.ka-pd__placeholder { display: none; }
.ka-pd__stage.is-fallback .ka-pd__placeholder { display: flex; }
.ka-pd__badge { top: 14px; left: 14px; font-size: 0.8rem; }

.ka-pd__views {
	display: flex;
	gap: 10px;
	margin-top: 14px;
	flex-wrap: wrap;
}
.ka-pd__views .ka-view {
	width: 68px;
	height: 68px;
	border-radius: var(--kas-radius-sm);
	border: 1px solid var(--kas-line);
	background: var(--kas-panel);
	padding: 0;
	overflow: hidden;
	cursor: pointer;
	transition: border-color 0.25s var(--kas-ease), transform 0.25s var(--kas-ease);
}
.ka-pd__views .ka-view img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ka-pd__views .ka-view:hover, .ka-pd__views .ka-view:focus-visible { border-color: var(--kas-accent); transform: translateY(-1px); }
.ka-pd__views .ka-view.active { border-color: var(--kas-accent); box-shadow: 0 0 0 2px var(--kas-accent-soft); }

.ka-pd__panel {
	background: var(--kas-panel);
	border: 1px solid var(--kas-line);
	border-radius: var(--kas-radius);
	padding: clamp(22px, 3vw, 36px);
	box-shadow: var(--kas-shadow);
	position: sticky;
	top: calc(var(--ka-nav-clear) + 16px);
}
@media (max-width: 900px) { .ka-pd__panel { position: static; } }

.ka-pd__kicker {
	display: inline-block;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kas-accent-deep);
	text-decoration: none;
	margin-bottom: 10px;
}
.ka-pd__kicker:hover, .ka-pd__kicker:focus-visible { text-decoration: underline; }
.ka-pd__title {
	font-family: var(--kas-font-display);
	font-weight: 400;
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	line-height: 1.15;
	margin: 0 0 10px;
	color: var(--kas-ink);
}
.ka-pd__meta {
	display: flex;
	gap: 6px;
	font-size: 0.88rem;
	color: var(--kas-muted);
	margin: 0 0 16px;
}
.ka-pd__prices {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 20px;
}
.ka-pd__price { font-size: 1.7rem; font-weight: 500; color: var(--kas-ink); }
.ka-pd__was { font-size: 1rem; color: var(--kas-muted); }

.ka-pd__form { margin: 0 0 8px; }
.ka-pd__sku-group { border: 0; padding: 0; margin: 0 0 14px; }
.ka-pd__sku-group legend {
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kas-muted);
	margin-bottom: 8px;
	padding: 0;
}

.ka-pd__stock { font-size: 0.88rem; margin: 0 0 14px; }
.ka-pd__stock--in { color: #4a6b3a; }
.ka-pd__stock--low { color: var(--kas-accent-deep); font-weight: 500; }
.ka-pd__stock--out { color: #8c3b2e; }

.ka-pd__buy {
	width: 100%;
	padding: 15px 20px;
	font-size: 1rem;
	border-radius: var(--ka-radius-pill);
	cursor: pointer;
}
.ka-pd__buy:disabled { opacity: 0.55; cursor: not-allowed; }

.ka-pd__assurances {
	list-style: none;
	margin: 18px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--kas-line);
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 0.86rem;
	color: var(--kas-muted);
}
.ka-pd__assurances a { color: var(--kas-accent-deep); text-decoration: none; }
.ka-pd__assurances a:hover, .ka-pd__assurances a:focus-visible { text-decoration: underline; }

.ka-pd__details, .ka-pd__description { margin-top: 64px; max-width: 880px; }
.ka-pd__h2 {
	font-family: var(--kas-font-display);
	font-weight: 400;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	margin: 0 0 18px;
	color: var(--kas-ink);
}
.ka-pd__specs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
	margin: 0;
}
.ka-pd__specs > div {
	background: var(--kas-panel);
	border: 1px solid var(--kas-line);
	border-radius: var(--kas-radius-sm);
	padding: 14px 16px;
}
.ka-pd__specs dt {
	font-size: 0.76rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kas-muted);
	margin-bottom: 4px;
}
.ka-pd__specs dd { margin: 0; font-size: 0.95rem; color: var(--kas-ink); }
.ka-pd__description-body { font-size: 0.95rem; line-height: 1.7; color: var(--kas-ink); }
/*
 * Owner review 2026-08-07: description media is now classified server-side —
 * gallery images (and their duplicates) live only in the canonical gallery,
 * so the long trailing image stream is gone by construction, not by a
 * blanket shrink. This rule is only a safety bound for any residual inline
 * image (badges, icons) that survives filtering.
 */
.ka-pd__description-body img {
	border-radius: var(--kas-radius-sm);
	max-width: 100%;
	max-height: 200px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* The stage opens the lightbox — the image reads as zoomable. */
.ka-pd__stage img { cursor: zoom-in; }

/*
 * Stage lightbox (owner review 2026-08-07): full, uncropped view of any
 * gallery image — product photo or information graphic (size chart,
 * measurement diagram). Information is never cropped away.
 */
.ka-lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(36, 28, 17, 0.82);
	backdrop-filter: blur(6px);
	cursor: zoom-out;
	padding: 4vh 4vw;
}
.ka-lightbox img {
	max-width: 92vw;
	max-height: 92vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--kas-radius-sm);
	background: #fff;
}
.ka-lightbox__close {
	position: absolute;
	top: 18px;
	right: 22px;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: var(--ka-radius-pill);
	background: rgba(248, 245, 239, 0.94);
	color: #241c11;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}