/* Kaltbloc Shop: product card. Every look-and-feel value is a CSS variable,
   overridden by Woo > Card design (printed after this file as :root{...}).
   Typography rules are scoped to .kb-card:not(.kb-card--theme): with "Match theme
   typography" on, the card declares no fonts/sizes and the theme's styles apply. */
:root {
	--kb-card-max: 420px; --kb-pad: 32px; --kb-block-gap: 48px; --kb-spec-gap: 28px; --kb-actions-gap: 48px; --kb-grid-gap: 24px; --kb-row-gap: 24px; --kb-grid-justify: center;
	--kb-img-scale: 100; --kb-img-y: 0px; --kb-img-hw: .75; --kb-title-pull: 0px; /* img-scale = % of card width, img-hw = height/width */
	--kb-font: "Antonio", "Oswald", "Arial Narrow", sans-serif;
	--kb-title-size: 48px; --kb-price-size: 24px; --kb-label-size: 20px; --kb-value-size: 36px; --kb-btn-size: 28px;
	--kb-title-weight: 400; --kb-tracking: .01em; --kb-transform: none;
	--kb-card: #fff; --kb-ink: #000; --kb-muted: #777;
	--kb-solid: #767676; --kb-solid-text: #fff; --kb-ghost-border: #767676; --kb-ghost-text: #000;
	--kb-hover-bg: #000; --kb-hover-text: #fff;
	--kb-radius: 40px; --kb-btn-radius: 100px; --kb-btn-border: 3px; --kb-btn-pad-y: 14px; --kb-btn-gap: 16px;
	--kb-shadow-blur: 0px; --kb-shadow-opacity: 0;
}

/* Columns are exactly as wide as the card (never wider), so the gap you set is the gap you get
   on any screen size. Extra space goes to the outside, aligned by --kb-grid-justify. */
.kb-grid {
	display: grid;
	grid-template-columns: repeat(var(--kb-cols, 3), minmax(0, var(--kb-card-max)));
	justify-content: var(--kb-grid-justify);
	column-gap: var(--kb-grid-gap);
	row-gap: var(--kb-row-gap); /* each card reserves its own image overhang, see .kb-card margin-top */
}
@media (max-width: 900px) { .kb-grid { grid-template-columns: repeat(2, minmax(0, var(--kb-card-max))); } }
@media (max-width: 560px) { .kb-grid { grid-template-columns: repeat(1, minmax(0, var(--kb-card-max))); } }

/* ---- structure & colors (always applied) ----
   .kb-cell is a size container: 1cqw = 1% of the card's width, so the image geometry scales with
   the card and looks identical on desktop and mobile. */
.kb-cell {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--kb-card-max);
	margin-inline: auto;
}
.kb-card {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1;
	width: 100%;
	/* Reserve the part of the image that sticks out above the card: half its height, minus your offset. */
	margin-top: max(0px, calc(.5 * var(--kb-img-scale) * var(--kb-img-hw) * 1cqw - var(--kb-img-y)));
	background: var(--kb-card);
	border-radius: var(--kb-radius);
	box-shadow: 0 calc(var(--kb-shadow-blur) * .3) var(--kb-shadow-blur) rgba(0, 0, 0, var(--kb-shadow-opacity));
	color: var(--kb-ink);
	box-sizing: border-box;
}
.kb-card *, .kb-card *::before, .kb-card *::after { box-sizing: border-box; }
.kb-card [hidden] { display: none !important; }

/* The image's CENTER is anchored on the card's top edge. --kb-img-y then moves it down (+) or up (-).
   The negative bottom margin removes the layout space of the half that hangs above the edge. */
.kb-card__media {
	display: block;
	width: calc(var(--kb-img-scale) * 1cqw);
	height: calc(var(--kb-img-scale) * var(--kb-img-hw) * 1cqw);
	margin: 0 auto calc(-.5 * var(--kb-img-scale) * var(--kb-img-hw) * 1cqw);
	transform: translateY(calc(-50% + var(--kb-img-y)));
	line-height: 0;
}
.kb-card__img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }

/* Body sits above the image; --kb-title-pull moves it up into the image's transparent shadow area. */
.kb-card__body {
	position: relative; z-index: 1;
	margin-top: calc(var(--kb-title-pull) * -1);
	padding: var(--kb-pad);
	display: flex; flex-direction: column; flex: 1;
}

.kb-card__title { margin: 0; color: inherit; }
.kb-card__price { margin: 4px 0 0; color: var(--kb-muted); }

.kb-card__specs { margin: var(--kb-block-gap) 0 0; display: grid; gap: var(--kb-spec-gap); }
.kb-card__specs:not(:has(.kb-spec:not([hidden]))) { display: none; }
.kb-spec dt { color: var(--kb-muted); margin: 0; }
.kb-spec dd { margin: 0; line-height: 1.1; }

.kb-card__actions { margin-top: auto; padding-top: var(--kb-actions-gap); display: flex; gap: var(--kb-btn-gap); }
.kb-card__actions:not(:has(.kb-btn:not([hidden]))) { display: none; }

.kb-btn {
	flex: 1;
	display: inline-flex; align-items: center; justify-content: center;
	padding: var(--kb-btn-pad-y) 16px;
	border: var(--kb-btn-border) solid transparent;
	border-radius: var(--kb-btn-radius);
	font: inherit; line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}
.kb-btn--ghost { background: transparent; border-color: var(--kb-ghost-border); color: var(--kb-ghost-text); }
.kb-btn--solid { background: var(--kb-solid); border-color: var(--kb-solid); color: var(--kb-solid-text); }
.kb-btn:hover { background: var(--kb-hover-bg); border-color: var(--kb-hover-bg); color: var(--kb-hover-text); }
.kb-btn:focus-visible { outline: 3px solid var(--kb-ink); outline-offset: 3px; }

/* Classes Woo toggles during AJAX add-to-cart */
.kb-btn.loading { opacity: .6; pointer-events: none; }
.kb-btn.added { background: var(--kb-hover-bg); border-color: var(--kb-hover-bg); color: var(--kb-hover-text); }
.kb-card .added_to_cart { display: none; }

/* ---- custom typography (skipped when "Match theme typography" is on) ---- */
.kb-card:not(.kb-card--theme) { font-family: var(--kb-font); text-transform: var(--kb-transform); }
.kb-card:not(.kb-card--theme) .kb-card__title { font-size: var(--kb-title-size); line-height: 1; font-weight: var(--kb-title-weight); letter-spacing: var(--kb-tracking); }
.kb-card:not(.kb-card--theme) .kb-card__price { font-size: var(--kb-price-size); }
.kb-card:not(.kb-card--theme) .kb-spec dt { font-size: var(--kb-label-size); }
.kb-card:not(.kb-card--theme) .kb-spec dd { font-size: var(--kb-value-size); }
.kb-card:not(.kb-card--theme) .kb-btn { font-size: var(--kb-btn-size); }

/* ---- theme typography: inherit the theme's font; title keeps the theme's h3 style.
        Other text scales relative to the theme's base size. ---- */
.kb-card--theme .kb-card__price { font-size: 1em; }
.kb-card--theme .kb-spec dt { font-size: .85em; }
.kb-card--theme .kb-spec dd { font-size: 1.35em; }
.kb-card--theme .kb-btn { font-size: 1em; }

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