/* ============================================================
   Kenklin — Shared component styles
   Markup that's rendered on multiple pages (cards, etc.) gets
   styled here once. Per-page layout lives in components/*.css.
   ============================================================ */

/* ============================================================
   Product card — shared markup styles
   Used by template-parts/product-card.php on home + shop pages.
   Layout (grid columns, hover effects) lives per-page.
   ============================================================ */

.kk-card {
	position: relative;
	background-color: transparent;
}

.kk-card__link {
	display: block;
	color: inherit;
}

.kk-card__link:hover { opacity: 1; }

/* ---- Media (gradient placeholder; real <img> swaps in later) ---- */

.kk-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	box-sizing: border-box;
	background-color: #ffffff;
	/* Page bg is #f9f9f9; pure-white cards need a hairline to read as distinct. */
	border: 1px solid var(--kk-outline-variant);
}

/* Real product photo — give it 16px padding and contain it so the whole
   product is visible (no crop) and there's breathing room from the edges. */
.kk-card__media--has-image {
	padding: 16px;
}

.kk-card__media--has-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
}

/* Gradient placeholder — no padding; the gradient + silhouette clip-path
   fill the full square. */
.kk-card__media--placeholder {
	padding: 0;
}

.kk-card__shape {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* ---- Silhouette clip-paths ---- */

.kk-shape--sneaker-low {
	clip-path: polygon(
		18% 70%, 26% 60%, 40% 58%, 50% 50%, 64% 50%,
		74% 56%, 82% 66%, 84% 74%, 76% 78%, 24% 78%
	);
}

.kk-shape--sneaker-high {
	clip-path: polygon(
		20% 76%, 28% 50%, 42% 46%, 50% 34%, 64% 34%,
		70% 46%, 82% 64%, 82% 76%, 22% 76%
	);
}

.kk-shape--shoe-low {
	clip-path: polygon(
		16% 70%, 24% 60%, 50% 56%, 70% 58%, 84% 66%,
		86% 74%, 80% 78%, 22% 78%
	);
}

.kk-shape--bag {
	/* Structured envelope/clutch — rectangle body + flap. */
	clip-path: polygon(
		22% 42%, 78% 42%, 78% 70%, 22% 70%,
		22% 42%, 32% 30%, 68% 30%, 78% 42%
	);
}

.kk-shape--coat {
	/* Vertical garment column with shoulders. */
	clip-path: polygon(
		36% 18%, 64% 18%, 72% 30%, 72% 92%, 28% 92%, 28% 30%
	);
}

/* ---- Meta block ---- */

.kk-card__meta {
	padding-top: var(--kk-space-1);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* Cancel default <p> margin from base.css so flex gap is the only
   source of vertical rhythm here. */
.kk-card__meta p { margin: 0; }

.kk-card__brand { color: var(--kk-on-surface-variant); }
.kk-card__name  { color: var(--kk-on-background); }
.kk-card__price { color: var(--kk-on-background); }

/* ---- Status tag (LATEST / NEW / EXCLUSIVE / SALE) ---- */

.kk-card__tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--kk-on-background);
}

.kk-card__tag-bullet {
	display: inline-block;
	width: 6px;
	height: 6px;
	background-color: currentColor;
	flex-shrink: 0;
}

.kk-card__tag--sale {
	color: var(--kk-secondary-container); /* electric blue */
}

/* ---- Wishlist heart ---- */

.kk-card__wishlist {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 40px;
	height: 40px;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--kk-on-primary);
	cursor: pointer;
	z-index: 2;
	letter-spacing: normal;
	text-transform: none;
}

.kk-card__wishlist > svg {
	width: 20px;
	height: 20px;
	transition: fill var(--kk-transition-fast), color var(--kk-transition-fast),
				transform var(--kk-transition-fast);
}

/* Active "loved" state — heart fills red regardless of underlying card tone. */
.kk-card__wishlist[aria-pressed="true"] {
	color: var(--kk-wishlist);
}

.kk-card__wishlist[aria-pressed="true"] > svg {
	fill: var(--kk-wishlist);
	stroke: var(--kk-wishlist);
}

/* Pop animation — added by JS on every toggle, removed after it ends. */
.kk-card__wishlist.is-popping > svg {
	animation: kk-wishlist-pop 320ms ease-out;
}

@keyframes kk-wishlist-pop {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.4); }
	70%  { transform: scale(0.92); }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.kk-card__wishlist.is-popping > svg { animation: none; }
}

@media (hover: hover) and (pointer: fine) {
	.kk-card__wishlist:hover { opacity: 0.65; }
}

/* ============================================================
   404 page
   ============================================================ */

.kk-404 {
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--kk-space-6) var(--kk-container-margin-mobile);
	background-color: var(--kk-background);
}

@media (min-width: 1024px) {
	.kk-404 { min-height: 70vh; padding-inline: var(--kk-container-margin-desktop); }
}

.kk-404__inner {
	max-width: 560px;
	text-align: center;
}

.kk-404__big {
	margin: 0 0 var(--kk-space-2);
	font-family: var(--kk-font-display);
	font-size: 96px;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--kk-outline-variant);
}

@media (min-width: 1024px) {
	.kk-404__big { font-size: var(--kk-display-lg-size); line-height: var(--kk-display-lg-line-height); }
}

.kk-404__title {
	margin: 0 0 var(--kk-space-2);
	font-family: var(--kk-font-display);
	font-size: 28px;
	line-height: 32px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--kk-on-background);
}

@media (min-width: 1024px) {
	.kk-404__title { font-size: 36px; line-height: 40px; }
}

.kk-404__body {
	margin: 0 0 var(--kk-space-4);
	color: var(--kk-on-surface-variant);
	font-family: var(--kk-font-body);
	font-size: 15px;
	line-height: 24px;
}

.kk-404__ctas {
	display: flex;
	flex-direction: column;
	gap: var(--kk-space-1);
	margin-bottom: var(--kk-space-4);
}

@media (min-width: 480px) {
	.kk-404__ctas {
		flex-direction: row;
		justify-content: center;
		gap: var(--kk-space-2);
	}
}

.kk-404__cta { min-width: 180px; height: 56px; }

.kk-404__quicklinks-label {
	margin: 0 0 var(--kk-space-1);
	color: var(--kk-on-surface-variant);
}

.kk-404__quicklinks-list {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--kk-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kk-404__quicklinks-list a {
	font-family: var(--kk-font-body);
	font-size: 14px;
	color: var(--kk-on-background);
	border-bottom: 1px solid var(--kk-on-background);
	padding-bottom: 1px;
}

.kk-404__quicklinks-list a:hover { opacity: 0.65; }

/* ============================================================
   Icon badge — small electric-blue counter chip used on the
   header wishlist heart and bottom-nav wishlist heart. The bag
   badge in the header is identical but uses its own class for
   historical reasons (.kk-bag-badge); keep the visual contract
   in sync.
   ============================================================ */

.kk-icon-badge {
	position: absolute;
	top: 4px;
	right: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	background-color: var(--kk-secondary-container);
	color: var(--kk-on-secondary);
	font-family: var(--kk-font-body);
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	pointer-events: none;
}

.kk-icon-badge--hidden { display: none; }

/* Mobile bottom-nav variant — items are larger so the badge sits
   relative to the icon rather than the button corner. */
.kk-icon-badge--mobile-nav {
	top: 8px;
	right: calc(50% - 18px);
}

/* ============================================================
   Toast — site-wide bottom notification
   Triggered via window.KenklinToast.show("message").
   ============================================================ */

.kk-toast {
	position: fixed;
	left: 50%;
	bottom: 32px;
	transform: translate(-50%, 24px);
	z-index: var(--kk-z-toast);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: calc(100% - 40px);
	padding: 14px 20px;
	background-color: var(--kk-primary);
	color: var(--kk-on-primary);
	font-family: var(--kk-font-body);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease, transform 200ms ease;
}

.kk-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* Sit above the mobile bottom-nav (64px + safe area). */
@media (max-width: 767px) {
	.kk-toast {
		bottom: calc(80px + env(safe-area-inset-bottom));
	}

	/* On pages that hide the bottom nav (PDP/cart/checkout), drop back to viewport-bottom. */
	body.kk-pdp .kk-toast,
	body.kk-cart .kk-toast,
	body.kk-checkout .kk-toast {
		bottom: calc(88px + env(safe-area-inset-bottom));
	}
}

@media (prefers-reduced-motion: reduce) {
	.kk-toast { transition: opacity 200ms ease; }
}