/*
 * Catalog, product, filters and wishlist.
 * All presentation colors resolve through tokens.css.
 */

.woocommerce .kramo-main,
.woocommerce-page .kramo-main {
	width: var(--size-full);
	max-width: var(--container-max);
	min-width: var(--size-0);
	margin-inline: var(--size-auto);
	padding-block: var(--space-4) var(--section-gap);
	padding-inline: var(--inset-inline);
	box-sizing: border-box;
}

/*
 * Full-bleed catalog.
 *
 * The product grid runs to both edges of the viewport, so the page container
 * stops constraining the width and every row that is *not* the grid carries the
 * inset itself. Widening the grid with 100vw instead would add the scrollbar
 * width to the page and produce a horizontal scroll on every desktop.
 */
.kramo-bleed .site.grid-container {
	max-width: none;
}

.kramo-bleed.woocommerce .kramo-main,
.kramo-bleed.woocommerce-page .kramo-main {
	max-width: none;
	padding-inline: var(--space-0);
}

.kramo-bleed .kramo-main > .woocommerce-breadcrumb,
.kramo-bleed .kramo-main > .woocommerce-products-header,
.kramo-bleed .kramo-main > .woocommerce-notices-wrapper,
.kramo-bleed .kramo-main > .kramo-catalog-toolbar,
.kramo-bleed .kramo-main > .kramo-catalog-results__status,
.kramo-bleed .kramo-main > .kramo-recent,
.kramo-bleed .kramo-catalog-results > .woocommerce-pagination,
.kramo-bleed .kramo-catalog-results > .woocommerce-info,
.kramo-bleed .kramo-catalog-results > .kramo-empty {
	max-width: var(--container-max);
	margin-inline: var(--size-auto);
	padding-inline: var(--inset-inline);
	box-sizing: border-box;
}

.woocommerce img,
.woocommerce-page img {
	max-width: var(--media-max-width);
	height: var(--media-height);
}

.woocommerce a {
	color: var(--color-link);
}

.woocommerce a:hover {
	color: var(--color-link-hover);
}

.woocommerce .woocommerce-breadcrumb {
	color: var(--color-text-muted);
}

.woocommerce .woocommerce-breadcrumb a {
	color: var(--color-link);
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce button.button.alt,
.woocommerce button.button.alt.disabled,
.woocommerce button.button.disabled,
.woocommerce div.product form.cart .button,
.woocommerce input.button {
	min-height: var(--button-min-height);
	padding: var(--button-padding-block) var(--button-padding-inline);
	border: var(--button-border-width) var(--border-style) var(--color-primary);
	border-radius: var(--button-radius);
	background-color: var(--color-primary);
	color: var(--color-on-primary);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce button.button.alt.disabled:hover,
.woocommerce button.button.disabled:hover,
.woocommerce div.product form.cart .button:hover,
.woocommerce input.button:hover {
	border-color: var(--color-primary-hover);
	background-color: var(--color-primary-hover);
	color: var(--color-on-primary);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
	color: var(--color-price);
}

.woocommerce span.onsale {
	top: var(--space-1);
	left: var(--space-1);
	z-index: 3;
	min-width: var(--size-0);
	min-height: var(--size-0);
	padding: var(--space-half) var(--space-1);
	border-radius: var(--catalog-media-radius);
	background-color: var(--color-sale);
	color: var(--color-on-sale);
	font-size: var(--text-xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--tracking-caps);
	line-height: var(--leading-heading);
	text-transform: var(--transform-case-upper);
}

.woocommerce ul.products li.product .onsale {
	top: var(--space-1);
	right: var(--size-auto);
	left: var(--space-1);
	margin: var(--space-0);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
	border-color: var(--color-border);
	background-color: var(--color-surface);
	color: var(--color-text);
}

.woocommerce ul.products li.product,
.wc-block-grid__product {
	position: relative;
	padding: var(--catalog-card-padding);
	border: var(--catalog-card-border-width) var(--border-style) var(--card-border-color);
	border-radius: var(--catalog-card-radius);
	overflow: var(--catalog-card-overflow);
	background-color: var(--catalog-card-bg);
	box-shadow: var(--catalog-card-shadow);
	transform: var(--card-transform);
	transition:
		box-shadow var(--transition-duration) var(--transition-easing),
		transform var(--transition-duration) var(--transition-easing);
}

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(var(--catalog-columns-mobile), minmax(var(--size-0), 1fr));
	gap: var(--catalog-gap-row) var(--catalog-gap-column);
	margin: var(--space-3) var(--space-0) var(--space-0);
	padding: var(--space-0);
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none;
}

.woocommerce ul.products[class*="columns-"] li.product {
	float: none;
	width: var(--size-auto);
	margin: var(--space-0);
}

.woocommerce ul.products li.product .woocommerce-loop-product__link {
	display: block;
	color: var(--color-text);
	text-decoration: none;
}

/* Under the photo the tile is text only: quiet caption, same left edge as the
   image. Home rails are already inset with the section title; the shop grid
   stays flush, so the caption inset is what keeps copy off the viewport. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .kramo-card-swatches {
	padding-inline: var(--space-2);
	box-sizing: border-box;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: var(--space-2) var(--space-0) var(--space-0);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--font-body-tracking);
	line-height: var(--leading-heading);
	text-transform: var(--transform-case-none);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a {
	color: inherit;
	text-decoration: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a:hover {
	color: var(--color-link);
}

.woocommerce ul.products li.product .price {
	display: block;
	margin-block: var(--space-half) var(--space-0);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	font-variant-numeric: tabular-nums;
}

/* The buying action lives in the bar over the photo, so the only buttons left
   in the caption belong to markup this theme does not control. */
.woocommerce ul.products li.product .button {
	width: var(--size-full);
	margin-top: var(--space-1);
	text-align: center;
}

.woocommerce ul.products li.product::before,
.wc-block-grid__product::before {
	position: absolute;
	z-index: 1;
	inset: var(--space-0) var(--space-2) var(--size-auto);
	height: var(--card-glow-height);
	background-color: var(--color-card-glow);
	content: "";
	opacity: var(--card-glow-opacity);
	transition: opacity var(--transition-duration) var(--transition-easing);
}

.woocommerce ul.products li.product:hover,
.woocommerce ul.products li.product:focus-within,
.wc-block-grid__product:hover,
.wc-block-grid__product:focus-within {
	transform: var(--catalog-card-transform-hover);
}

.woocommerce ul.products li.product:hover::before,
.woocommerce ul.products li.product:focus-within::before,
.wc-block-grid__product:hover::before,
.wc-block-grid__product:focus-within::before {
	opacity: var(--opacity-visible);
}

/* The frame is the photo and everything that sits on top of it: the sale flag,
   the wishlist heart, the stock badge and the action bar. It is also the
   clipping context the bar slides in from. */
.woocommerce .kramo-card__frame {
	position: relative;
	display: block;
	overflow: var(--overflow-hidden);
	border-radius: var(--catalog-media-radius);
}

.woocommerce .kramo-card__media-link {
	display: block;
}

.woocommerce .kramo-product-media {
	position: relative;
	display: block;
	width: calc(var(--size-full) + var(--product-image-offset-inline));
	aspect-ratio: var(--catalog-media-ratio);
	margin-inline: calc(var(--product-image-offset-inline) / -2);
	overflow: var(--overflow-hidden);
	border-radius: var(--catalog-media-radius);
	background-color: var(--color-media-bg);
}

.woocommerce .kramo-product-media img {
	position: absolute;
	inset: var(--space-0);
	width: var(--size-full);
	height: var(--size-full);
	max-width: none;
	margin: var(--space-0);
	object-fit: cover;
	transition: opacity var(--transition-duration) var(--transition-easing);
}

.woocommerce .kramo-product-media .kramo-product-image--primary {
	width: var(--size-full);
}

.woocommerce .kramo-product-image--secondary {
	opacity: var(--opacity-hidden);
}

/* Buying actions ride over the bottom of the photo and only appear on intent,
   so the resting grid is nothing but photography, name and price. Pointer
   devices get them on hover, keyboards on focus, and touch devices — which
   have neither — keep them visible, see the (hover: none) rule below. */
.woocommerce .kramo-card__actions {
	position: absolute;
	z-index: 3;
	inset-block-end: var(--space-0);
	inset-inline: var(--space-0);
	display: grid;
	background-color: var(--catalog-actions-bg);
	opacity: var(--opacity-hidden);
	transform: var(--catalog-actions-hidden);
	transition:
		opacity var(--duration-standard) var(--ease-standard),
		transform var(--duration-standard) var(--ease-out);
}

.woocommerce .kramo-card__frame:hover .kramo-card__actions,
.woocommerce .kramo-card__frame:focus-within .kramo-card__actions {
	opacity: var(--opacity-visible);
	transform: var(--translate-none);
}

.woocommerce ul.products li.product .kramo-card__actions .button,
.woocommerce ul.products li.product .kramo-card__actions .kramo-quick-view-trigger {
	width: var(--size-full);
	min-height: var(--size-auto);
	margin: var(--space-0);
	padding: var(--space-1) var(--space-2);
	border: var(--border-style-none);
	border-radius: var(--radius-none);
	background-color: var(--transparent);
	color: var(--color-text);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-caps);
	text-align: center;
	text-decoration: none;
	text-transform: var(--transform-case-upper);
}

.woocommerce ul.products li.product .kramo-card__actions .button:hover,
.woocommerce ul.products li.product .kramo-card__actions .kramo-quick-view-trigger:hover {
	background-color: var(--color-primary);
	box-shadow: var(--shadow-none);
	color: var(--color-on-primary);
}

.woocommerce ul.products li.product .kramo-card__actions .kramo-quick-view-trigger {
	border-block-start: var(--border-width) var(--border-style) var(--color-border);
	color: var(--color-text-muted);
}

/* WooCommerce appends the "view cart" link after a successful add; inside the
   bar it becomes the third row rather than a stray link over the photo. */
.woocommerce ul.products li.product .kramo-card__actions a.added_to_cart {
	margin: var(--space-0);
	padding: var(--space-1) var(--space-2);
	border-block-start: var(--border-width) var(--border-style) var(--color-border);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-caps);
	text-align: center;
	text-transform: var(--transform-case-upper);
}

@media (hover: none) {
	.woocommerce .kramo-card__actions {
		opacity: var(--opacity-visible);
		transform: var(--translate-none);
	}
}

.woocommerce .kramo-card-swatches {
	display: flex;
	gap: var(--space-1);
	align-items: center;
	margin-top: var(--space-1);
}

.woocommerce .kramo-card-swatch {
	width: var(--space-2);
	aspect-ratio: 1;
	border: var(--border-width) var(--border-style) var(--color-border);
	border-radius: var(--size-full);
	background-color: var(--color-swatch-default);
}

.woocommerce .kramo-card-swatch--bezowy,
.kramo-swatch--bezowy {
	background-color: var(--swatch-beige);
}

.woocommerce .kramo-card-swatch--czarny,
.kramo-swatch--czarny {
	background-color: var(--swatch-black);
}

.woocommerce .kramo-card-swatch--bialy,
.kramo-swatch--bialy {
	background-color: var(--swatch-white);
}

.woocommerce .kramo-card-swatch--niebieski,
.kramo-swatch--niebieski {
	background-color: var(--swatch-blue);
}

.woocommerce .kramo-card-swatch--zielony,
.kramo-swatch--zielony {
	background-color: var(--swatch-green);
}

.woocommerce .kramo-card-swatch--czerwony,
.kramo-swatch--czerwony {
	background-color: var(--swatch-red);
}

.woocommerce .kramo-wishlist-toggle {
	position: absolute;
	z-index: 4;
	top: var(--space-1);
	right: var(--space-1);
	display: grid;
	width: var(--wishlist-button-size);
	min-width: var(--wishlist-button-size);
	height: var(--wishlist-button-size);
	min-height: var(--wishlist-button-size);
	padding: var(--space-0);
	border: var(--border-width) var(--border-style) var(--color-border);
	border-radius: var(--size-full);
	place-items: center;
	background-color: var(--color-surface);
	color: var(--color-text);
	font-size: var(--text-xl);
	line-height: var(--leading-tight);
}

/* Over a photo the heart needs no outline; the disc alone separates it. */
.woocommerce .kramo-wishlist-toggle--card {
	border: var(--border-style-none);
	background-color: var(--catalog-actions-bg);
}

.woocommerce .kramo-wishlist-toggle[aria-pressed="true"] {
	border-color: var(--color-primary);
	background-color: var(--color-primary);
	color: var(--color-on-primary);
}

.kramo-size-guide {
	overflow-x: auto;
}

.kramo-size-guide__table {
	width: var(--size-full);
	border-collapse: collapse;
	font-size: var(--text-sm);
}

.kramo-size-guide__table th,
.kramo-size-guide__table td {
	padding: var(--space-1) var(--space-2);
	border-bottom: var(--border-width) var(--border-style) var(--color-border);
	text-align: left;
	font-variant-numeric: tabular-nums;
}

.kramo-size-guide__table thead th {
	color: var(--color-text);
	font-weight: var(--font-weight-semibold);
}

.kramo-size-guide__table tbody th {
	font-weight: var(--font-weight-semibold);
}

.woocommerce div.product .kramo-availability {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-3);
	margin: var(--space-0) var(--space-0) var(--space-2);
	padding: var(--space-0);
	list-style: none;
}

.woocommerce div.product .kramo-availability__item {
	display: inline-flex;
	gap: var(--space-1);
	align-items: center;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.woocommerce div.product .kramo-availability__dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: var(--size-full);
	background-color: currentColor;
}

.woocommerce div.product .kramo-availability__item--in,
.woocommerce div.product .kramo-availability__item--backorder {
	color: var(--color-trust);
}

.woocommerce div.product .kramo-availability__item--low {
	color: var(--color-primary);
	font-weight: var(--font-weight-semibold);
}

.woocommerce div.product .kramo-availability__item--out {
	color: var(--color-text-muted);
}

.kramo-wishlist-toggle__icon::before {
	content: "\2661";
}

.kramo-wishlist-toggle[aria-pressed="true"] .kramo-wishlist-toggle__icon::before {
	content: "\2665";
}

.woocommerce div.product .kramo-wishlist-toggle--single {
	position: static;
	display: inline-flex;
	gap: var(--space-1);
	align-items: center;
	justify-content: center;
	width: var(--size-auto);
	min-width: var(--size-0);
	height: var(--size-auto);
	min-height: var(--button-min-height);
	margin-block: var(--space-2);
	padding: var(--button-padding-block) var(--button-padding-inline);
	border-radius: var(--button-radius);
	font-size: var(--text-sm);
	line-height: var(--leading-body);
}

.woocommerce div.product .kramo-wishlist-toggle--single .screen-reader-text {
	position: static !important;
	width: var(--size-auto);
	height: var(--size-auto);
	margin: var(--space-0);
	clip: auto;
	clip-path: none;
	overflow: visible;
	white-space: nowrap;
}

.woocommerce div.product .product_meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-2);
	margin-top: var(--space-2);
	padding-top: var(--space-2);
	border-top: var(--border-width) var(--border-style) var(--color-border);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.woocommerce div.product .product_meta > span {
	display: inline-flex;
	gap: var(--space-1);
}

.woocommerce div.product div.summary {
	padding: var(--product-summary-padding);
	border-radius: var(--card-radius);
	background-color: var(--product-summary-bg);
}

.woocommerce div.product div.images,
.woocommerce div.product div.summary {
	margin-bottom: var(--space-6);
}

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
	margin: var(--space-0);
}

.woocommerce div.product div.images .woocommerce-product-gallery__image img {
	aspect-ratio: var(--catalog-media-ratio);
	object-fit: cover;
}

.woocommerce div.product div.images .flex-control-thumbs {
	display: flex;
	gap: var(--space-1);
	margin-top: var(--space-2);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}

.woocommerce div.product div.images .flex-control-thumbs li {
	flex: 0 0 var(--gallery-thumbnail-width);
	width: var(--gallery-thumbnail-width);
	scroll-snap-align: start;
}

.woocommerce div.product div.images .flex-control-thumbs img {
	border: var(--border-width) var(--border-style) var(--color-border);
	border-radius: var(--input-radius);
	opacity: var(--opacity-disabled);
}

.woocommerce div.product div.images .flex-control-thumbs img.flex-active {
	border-color: var(--color-primary);
	opacity: var(--opacity-visible);
}

.woocommerce div.product form.cart .variations {
	margin-bottom: var(--space-2);
}

.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
	display: block;
	padding: var(--space-0) var(--space-0) var(--space-1);
	text-align: left;
}

.woocommerce .kramo-native-select {
	inset-inline-start: var(--space-0);
	position: absolute !important;
	width: var(--border-width) !important;
	min-width: var(--border-width) !important;
	max-width: var(--border-width) !important;
	height: var(--border-width) !important;
	min-height: var(--border-width) !important;
	max-height: var(--border-width) !important;
	padding: var(--space-0) !important;
	margin: calc(var(--border-width) * -1) !important;
	clip: rect(var(--size-0), var(--size-0), var(--size-0), var(--size-0));
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

.woocommerce .kramo-variation-options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
}

.woocommerce .kramo-variation-option {
	display: inline-grid;
	min-width: var(--variation-swatch-size);
	min-height: var(--variation-swatch-size);
	padding: var(--space-1);
	border: var(--border-width) var(--border-style) var(--color-border);
	border-radius: var(--button-radius);
	place-items: center;
	background-color: var(--color-surface);
	color: var(--color-text);
}

.woocommerce .kramo-variation-option--color {
	width: var(--variation-swatch-size);
	padding: var(--space-0);
	border-radius: var(--size-full);
	background-color: var(--color-swatch-default);
}


/* Colour modifiers must outrank the generic swatch background. */
.woocommerce .kramo-variation-option--color.kramo-swatch--bezowy {
	background-color: var(--swatch-beige);
}

.woocommerce .kramo-variation-option--color.kramo-swatch--czarny {
	background-color: var(--swatch-black);
}

.woocommerce .kramo-variation-option--color.kramo-swatch--bialy {
	background-color: var(--swatch-white);
}

.woocommerce .kramo-variation-option--color.kramo-swatch--niebieski {
	background-color: var(--swatch-blue);
}

.woocommerce .kramo-variation-option--color.kramo-swatch--zielony {
	background-color: var(--swatch-green);
}

.woocommerce .kramo-variation-option--color.kramo-swatch--czerwony {
	background-color: var(--swatch-red);
}

.woocommerce .kramo-variation-option[aria-pressed="true"] {
	border-color: var(--color-primary);
	outline: var(--border-width-strong) var(--border-style) var(--color-primary);
	outline-offset: var(--focus-ring-offset);
}

.woocommerce .kramo-variation-option.is-disabled {
	opacity: var(--opacity-disabled);
	text-decoration: line-through;
}

.woocommerce div.product form.cart .button {
	margin-right: var(--space-1);
}

.woocommerce div.product form.cart .kramo-buy-now {
	border-color: var(--color-primary);
	background-color: var(--transparent);
	color: var(--color-primary);
}

.woocommerce div.product form.cart .kramo-buy-now:hover {
	background-color: var(--color-primary);
	color: var(--color-on-primary);
}

.woocommerce .woocommerce-tabs .kramo-accordion-toggle {
	display: block;
	width: var(--size-full);
	margin-top: var(--space-1);
	border-color: var(--color-border);
	background-color: var(--color-surface);
	color: var(--color-text);
	text-align: left;
}

.woocommerce .woocommerce-tabs .tabs {
	display: none;
}

.woocommerce .woocommerce-tabs .kramo-accordion-toggle::after {
	float: right;
	content: "+";
}

.woocommerce .woocommerce-tabs .kramo-accordion-toggle[aria-expanded="true"]::after {
	content: "−";
}

.woocommerce .woocommerce-tabs .woocommerce-Tabs-panel {
	padding: var(--space-3);
	border: var(--border-width) var(--border-style) var(--color-border);
	background-color: var(--color-surface);
}

.woocommerce .kramo-video-slide {
	aspect-ratio: var(--catalog-media-ratio);
}

.woocommerce .kramo-video-trigger {
	display: grid;
	width: var(--size-full);
	height: var(--size-full);
	border: var(--size-0);
	border-radius: var(--size-0);
	place-content: center;
	gap: var(--space-2);
	background-color: var(--color-media-bg);
	color: var(--color-text);
	text-align: center;
}

.woocommerce .kramo-video-trigger__icon {
	font-size: var(--text-4xl);
}

.woocommerce .kramo-product-video {
	display: block;
	width: var(--size-full);
	aspect-ratio: var(--video-ratio);
	border: var(--size-0);
}

/*
 * Catalog toolbar.
 *
 * A boxed panel of labelled dropdowns competed with the photography behind it.
 * The controls are now a single line of small capitals on a hairline rule: the
 * same fields and the same behaviour, with the visual weight moved back to the
 * grid.
 */
.kramo-catalog-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-3);
	align-items: center;
	margin-block-end: var(--space-2);
	padding-block-end: var(--space-1);
	border-block-end: var(--border-width) var(--border-style) var(--color-border);
}

.kramo-catalog-toolbar .kramo-search {
	flex: 0 1 14rem;
	max-width: 16rem;
}

.kramo-catalog-toolbar .kramo-search__input {
	min-height: var(--size-auto);
	padding: var(--space-half) var(--space-0);
	border: var(--border-style-none);
	border-radius: var(--radius-none);
	background-color: var(--transparent);
	font-size: var(--text-sm);
}

.kramo-catalog-toolbar .kramo-search__form button,
.kramo-filters__actions button,
.kramo-filters__reset,
.kramo-catalog-density__option {
	min-height: var(--size-auto);
	padding: var(--space-half) var(--space-0);
	border: var(--border-style-none);
	border-radius: var(--radius-none);
	background-color: var(--transparent);
	color: var(--color-text-muted);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-caps);
	text-decoration: none;
	text-transform: var(--transform-case-upper);
}

.kramo-catalog-toolbar .kramo-search__form button:hover,
.kramo-filters__actions button:hover,
.kramo-filters__reset:hover,
.kramo-catalog-density__option:hover {
	background-color: var(--transparent);
	box-shadow: var(--shadow-none);
	color: var(--color-primary);
}

.kramo-filters {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-3);
	align-items: center;
}

.kramo-filters__fields {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-3);
	align-items: center;
}

.kramo-filter-field select {
	min-height: var(--size-auto);
	padding: var(--space-half) var(--space-0);
	border: var(--border-style-none);
	border-radius: var(--radius-none);
	background-color: var(--transparent);
	color: var(--color-text);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-caps);
	text-transform: var(--transform-case-upper);
}

.kramo-filter-price {
	display: flex;
	gap: var(--space-1);
	align-items: center;
	padding: var(--space-0);
	border: var(--size-0);
}

.kramo-filter-price legend {
	padding-inline: var(--space-0) var(--space-1);
	color: var(--color-text-muted);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-caps);
	text-transform: var(--transform-case-upper);
}

.kramo-filter-price input {
	width: 4.5rem;
	min-height: var(--size-auto);
	padding: var(--space-half) var(--space-0);
	border: var(--border-style-none);
	border-block-end: var(--border-width) var(--border-style) var(--color-border);
	border-radius: var(--radius-none);
	background-color: var(--transparent);
	font-size: var(--text-xs);
}

.kramo-filters__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	align-items: center;
}

/* Result count and grid density close the row, the way a listing header does
   in the reference storefronts: state on the left, view controls on the right. */
.kramo-catalog-view {
	display: flex;
	gap: var(--space-2);
	align-items: center;
	margin-inline-start: var(--size-auto);
	color: var(--color-text-muted);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-caps);
	text-transform: var(--transform-case-upper);
}

.kramo-catalog-view__count {
	margin: var(--space-0);
	font-variant-numeric: tabular-nums;
}

.kramo-catalog-density {
	display: flex;
	gap: var(--space-1);
	align-items: center;
}

.kramo-catalog-density__option[aria-pressed="true"] {
	color: var(--color-text);
	font-weight: var(--font-weight-semibold);
}

/* Two columns on a phone is already the densest useful grid. */
@media (max-width: 47.999rem) {
	.kramo-catalog-density {
		display: none;
	}
}

.kramo-catalog-results {
	position: relative;
	min-height: var(--space-12);
}

.kramo-catalog-results[aria-busy="true"] {
	pointer-events: none;
}

.kramo-catalog-results[aria-busy="true"] > ul.products,
.kramo-catalog-results[aria-busy="true"] > .woocommerce-pagination,
.kramo-catalog-results[aria-busy="true"] > .woocommerce-info,
.kramo-catalog-results[aria-busy="true"] > .kramo-empty {
	display: none;
}

/* The density control writes the column count onto this container, and the
   grid and its skeleton both read it from there. */
.kramo-catalog-results[data-columns="2"] {
	--catalog-columns-tablet: 2;
	--catalog-columns-desktop: 2;
}

.kramo-skeleton-grid {
	display: grid;
	gap: var(--catalog-gap-row) var(--catalog-gap-column);
	grid-template-columns: repeat(var(--catalog-columns-mobile), minmax(0, 1fr));
	margin: var(--space-3) var(--space-0) var(--space-0);
	padding: var(--space-0);
	list-style: none;
}

.kramo-skeleton-card {
	display: grid;
	gap: var(--space-1);
	padding: var(--catalog-card-padding);
}

.kramo-skeleton-card__media {
	aspect-ratio: var(--catalog-media-ratio);
}

.kramo-skeleton-card__line {
	height: var(--space-2);
}

.kramo-skeleton-card__line--short {
	width: 40%;
}

@media (min-width: 48rem) {
	.kramo-skeleton-grid {
		grid-template-columns: repeat(var(--catalog-columns-tablet), minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.kramo-skeleton-grid {
		grid-template-columns: repeat(var(--catalog-columns-desktop), minmax(0, 1fr));
	}
}

.kramo-wishlist {
	max-width: var(--container-max);
	margin-inline: var(--size-auto);
	padding-block: var(--section-gap);
	padding-inline: var(--inset-inline);
	box-sizing: border-box;
}

.kramo-wishlist__products ul.products {
	display: grid;
}

.kramo-personalization {
	display: grid;
	gap: var(--space-1);
	margin-block: var(--space-3);
	padding: var(--space-3);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--input-radius);
	background: var(--color-surface-alt);
}

.kramo-personalization legend {
	float: left;
	width: var(--size-full);
	margin-bottom: var(--space-1);
	padding: var(--space-0);
	color: var(--color-text);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

.kramo-personalization legend + * {
	clear: both;
}

.kramo-personalization label {
	color: var(--color-text);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold);
}

.kramo-personalization__input {
	display: grid;
	grid-template-columns: minmax(var(--size-0), 1fr) auto;
	gap: var(--space-1);
	align-items: center;
}

.kramo-personalization__counter {
	min-width: 4.5rem;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	text-align: end;
}

.kramo-personalization__price {
	margin: var(--space-1) var(--space-0) var(--space-0);
	color: var(--color-text);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold);
}

@media (hover: hover) {
	.woocommerce ul.products li.product:hover .kramo-product-image--primary,
	.woocommerce ul.products li.product:focus-within .kramo-product-image--primary {
		opacity: var(--opacity-hidden);
	}

	.woocommerce ul.products li.product:hover .kramo-product-image--secondary,
	.woocommerce ul.products li.product:focus-within .kramo-product-image--secondary {
		opacity: var(--opacity-visible);
	}
}

@media (min-width: 48rem) {
	.woocommerce ul.products {
		grid-template-columns: repeat(var(--catalog-columns-tablet), minmax(var(--size-0), 1fr));
	}

	.woocommerce .woocommerce-tabs .kramo-accordion-toggle {
		display: none;
	}

	.woocommerce .woocommerce-tabs .tabs {
		display: block;
	}
}

@media (min-width: 64rem) {
	.woocommerce ul.products {
		grid-template-columns: repeat(var(--catalog-columns-desktop), minmax(var(--size-0), 1fr));
	}

	.woocommerce div.product div.images {
		display: grid;
		grid-template-columns: var(--gallery-thumbnail-width) minmax(var(--size-0), 1fr);
		gap: var(--space-2);
	}

	.woocommerce div.product div.images .flex-viewport,
	.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
		grid-column: 2;
		grid-row: 1;
	}

	.woocommerce div.product div.images .flex-control-thumbs {
		grid-column: 1;
		grid-row: 1;
		flex-direction: column;
		margin-top: var(--space-0);
		overflow-x: visible;
		overflow-y: auto;
	}

	.woocommerce div.product > span.onsale {
		left: calc(var(--gallery-thumbnail-width) + var(--space-3));
	}
}

/* Reserve the gallery box before flexslider initialises: without this the
   stacked slides collapse into one on init and push the page up. */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
	aspect-ratio: var(--catalog-media-ratio);
	overflow: var(--overflow-hidden);
}

.woocommerce div.product div.images .flex-viewport {
	aspect-ratio: var(--catalog-media-ratio);
}

/* Mobile galleries are swipe-driven, so the thumbnail strip flexslider injects
   after load would only push the summary down and cost CLS. Desktop keeps the
   side thumbnails defined in the 64rem breakpoint above. */
@media (max-width: 63.999rem) {
	.woocommerce div.product div.images .flex-control-thumbs {
		display: none;
	}

	/* Reserve the gallery box on the container that exists both before and
	   after flexslider initialises, so the summary below never moves. */
	.woocommerce div.product div.images {
		aspect-ratio: var(--catalog-media-ratio);
		overflow: var(--overflow-hidden);
	}
}

/* Keep the variation summary and reset link from resizing the form when
   WooCommerce injects price and availability after selection. */
.woocommerce div.product form.cart .woocommerce-variation {
	min-height: var(--variation-summary-min-height);
}

.woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	min-height: var(--text-lg);
	visibility: hidden;
}

.woocommerce div.product form.cart .reset_variations[style*="visible"],
.woocommerce div.product form.cart .reset_variations:focus-visible {
	visibility: visible;
}

/* FAQ accordion — used on product tabs and local-service pages. */
.kramo-faq {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.kramo-faq__item {
	border: var(--border-width) var(--border-style) var(--color-border);
	border-radius: var(--card-radius);
	padding: var(--space-2);
	background: var(--color-surface);
}

.kramo-faq__question {
	cursor: pointer;
	font-weight: var(--font-weight-semibold);
	color: var(--color-text);
}

.kramo-faq__answer {
	margin-top: var(--space-1);
	color: var(--color-text-muted);
	line-height: var(--leading-body);
}

/* Local-service landing page. */
.kramo-local-service {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--inset-inline);
	box-sizing: border-box;
}

.kramo-local-service__title {
	font-size: var(--text-hero);
	line-height: var(--leading-tight);
}

.kramo-local-service__price {
	color: var(--color-text-muted);
	font-size: var(--text-lg);
}

.kramo-local-service > * + *,
.kramo-local-service__article > * + * {
	margin-top: var(--section-gap);
}

.kramo-local-service__area ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-2);
	list-style: none;
	padding: var(--space-0);
}

.kramo-local-service__cta-button {
	display: inline-block;
	background: var(--color-primary);
	color: var(--color-on-primary);
	padding: var(--button-padding-block) var(--button-padding-inline);
	border-radius: var(--button-radius);
	min-height: var(--button-min-height);
}

/* Motion and finishing pass. Every transition is disabled by the
   prefers-reduced-motion rule in base.css. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce div.product form.cart .button,
.kramo-wishlist-toggle,
.kramo-variation-option {
	transition:
		background-color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		box-shadow var(--duration-fast) var(--ease-standard),
		transform var(--duration-fast) var(--ease-standard);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce div.product form.cart .button:hover {
	box-shadow: var(--shadow-soft);
}

.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce div.product form.cart .button:active,
.kramo-wishlist-toggle:active,
.kramo-variation-option:active {
	transform: var(--scale-press);
}

.woocommerce ul.products li.product:hover {
	box-shadow: var(--catalog-card-shadow-hover);
}

.woocommerce .kramo-product-media img {
	transition:
		opacity var(--duration-standard) var(--ease-standard),
		transform var(--duration-slow) var(--ease-out);
}

.woocommerce ul.products li.product:hover .kramo-product-image--primary {
	transform: var(--scale-media-hover);
}

.woocommerce .kramo-wishlist-toggle:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.woocommerce .kramo-variation-option:hover {
	border-color: var(--color-primary);
}

.woocommerce div.product .woocommerce-tabs .panel {
	animation: kramo-fade-rise var(--duration-standard) var(--ease-out) both;
}

.kramo-faq__item {
	transition: border-color var(--duration-fast) var(--ease-standard);
}

.kramo-faq__item[open],
.kramo-faq__item:hover {
	border-color: var(--color-primary);
}

.kramo-faq__item[open] .kramo-faq__answer {
	animation: kramo-fade-rise var(--duration-fast) var(--ease-out) both;
}

.woocommerce a.button.loading,
.woocommerce button.button.loading,
.woocommerce input.button.loading {
	position: relative;
	color: var(--transparent);
	pointer-events: none;
}

.woocommerce a.button.loading::before,
.woocommerce button.button.loading::before,
.woocommerce input.button.loading::before {
	position: absolute;
	inset: 50% var(--size-auto) var(--size-auto) 50%;
	width: var(--spinner-size);
	height: var(--spinner-size);
	margin: var(--spinner-offset) var(--space-0) var(--space-0) var(--spinner-offset);
	border: var(--border-width-strong) var(--border-style) var(--color-on-primary);
	border-block-start-color: var(--transparent);
	border-radius: var(--radius-pill);
	content: "";
	animation: kramo-spin var(--duration-spin) var(--ease-linear) var(--motion-iteration-infinite);
}

.woocommerce a.button.loading::after,
.woocommerce button.button.loading::after,
.woocommerce input.button.loading::after {
	content: none;
}

.woocommerce a.button.added:not(.loading)::after {
	display: inline-block;
	margin-inline-start: var(--space-1);
	content: "\2713";
	font-family: var(--font-body);
	animation: kramo-pop var(--duration-standard) var(--ease-spring) both;
}

.woocommerce a.added_to_cart {
	display: inline-block;
	margin-top: var(--space-1);
	color: var(--color-link);
	font-size: var(--text-sm);
	animation: kramo-fade-rise var(--duration-standard) var(--ease-out) both;
}

.kramo-wishlist-toggle__icon {
	display: block;
	line-height: var(--leading-tight);
}

.woocommerce .kramo-wishlist-toggle.is-toggled[aria-pressed="true"] .kramo-wishlist-toggle__icon {
	animation: kramo-heart var(--duration-slow) var(--ease-spring);
}

@keyframes kramo-heart {
	0% {
		transform: var(--translate-none);
	}

	35% {
		transform: scale(0.82);
	}

	70% {
		transform: scale(1.18);
	}

	100% {
		transform: var(--translate-none);
	}
}

.woocommerce .kramo-product-media .kramo-product-image--primary.is-pending {
	opacity: var(--opacity-hidden);
}

.woocommerce .kramo-product-media .kramo-product-image--primary.is-decoded {
	opacity: var(--opacity-visible);
}

.kramo-stock-badge {
	position: absolute;
	z-index: 4;
	inset-block-end: var(--space-1);
	inset-inline-start: var(--space-1);
	padding: 0.125rem var(--space-1);
	border-radius: var(--stock-badge-radius);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: var(--text-xs);
	font-weight: var(--font-weight-semibold);
	line-height: var(--leading-body);
}

.kramo-stock-badge--low {
	background: var(--color-sale);
	color: var(--color-on-sale);
}

.kramo-stock-badge--out {
	background: var(--color-surface-alt);
	color: var(--color-text-muted);
}

.kramo-empty {
	display: grid;
	gap: var(--space-2);
	justify-items: center;
	padding-block: var(--section-gap);
	padding-inline: var(--inset-inline);
	border: var(--border-width) var(--border-style) var(--color-border);
	border-radius: var(--card-radius);
	background: var(--color-surface);
	text-align: center;
	animation: kramo-fade-rise var(--duration-standard) var(--ease-out) both;
	box-sizing: border-box;
}

.kramo-empty__icon {
	width: 3rem;
	height: 3rem;
	color: var(--color-text-muted);
}

.kramo-empty__title {
	margin: var(--space-0);
	font-size: var(--text-xl);
}

.kramo-empty__text {
	max-width: 42ch;
	margin: var(--space-0);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.kramo-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	justify-content: center;
}

.kramo-sticky-cart {
	position: fixed;
	inset-block-end: var(--space-0);
	inset-inline: var(--space-0);
	z-index: var(--layer-sticky);
	display: flex;
	gap: var(--space-2);
	align-items: center;
	justify-content: space-between;
	padding-block: var(--space-1);
	padding-inline: var(--inset-inline);
	padding-bottom: max(var(--space-1), env(safe-area-inset-bottom, 0px));
	border-top: var(--border-width) var(--border-style) var(--color-border);
	background: var(--color-surface);
	box-shadow: var(--sticky-bar-shadow);
	animation: kramo-slide-in-block-end var(--duration-standard) var(--ease-out) both;
}

.kramo-sticky-cart[hidden] {
	display: none;
}

.kramo-sticky-cart__info {
	display: grid;
	min-width: var(--size-0);
}

.kramo-sticky-cart__name {
	overflow: hidden;
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kramo-sticky-cart__price {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	font-variant-numeric: tabular-nums;
}

.kramo-sticky-cart__price .amount {
	color: var(--color-price);
}

.kramo-sticky-cart__action {
	flex: none;
}

@media (min-width: 48rem) {
	.kramo-sticky-cart {
		display: none;
	}
}

.kramo-quick-view {
	width: min(var(--modal-max-width), calc(100vw - var(--space-4)));
	max-width: none;
	max-height: calc(100vh - var(--space-4));
	padding: var(--space-0);
	border: var(--border-width) var(--border-style) var(--color-border);
	border-radius: var(--card-radius);
	background: var(--color-surface);
	color: var(--color-text);
}

.kramo-quick-view::backdrop {
	background: var(--color-scrim);
}

.kramo-quick-view[open] {
	animation: kramo-fade-rise var(--duration-standard) var(--ease-out) both;
}

.kramo-quick-view__close {
	position: absolute;
	z-index: var(--layer-base);
	inset-block-start: var(--space-1);
	inset-inline-end: var(--space-1);
	width: var(--wishlist-button-size);
	min-width: var(--wishlist-button-size);
	height: var(--wishlist-button-size);
	min-height: var(--wishlist-button-size);
	padding: var(--space-0);
	border: var(--border-width) var(--border-style) var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-text);
}

.kramo-quick-view__close:hover {
	border-color: var(--color-primary);
	background: var(--color-surface);
	color: var(--color-primary);
}

.kramo-quick-view__body {
	display: grid;
	gap: var(--space-3);
	padding: var(--space-3);
}

.kramo-quick-view__media img {
	width: var(--size-full);
	aspect-ratio: var(--catalog-media-ratio);
	border-radius: var(--card-radius);
	object-fit: cover;
}

.kramo-quick-view__title {
	margin-block-end: var(--space-1);
	font-size: var(--text-xl);
}

.kramo-quick-view__price {
	margin-block-end: var(--space-2);
	color: var(--color-price);
	font-variant-numeric: tabular-nums;
	font-weight: var(--font-weight-semibold);
}

.kramo-quick-view__excerpt {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.kramo-quick-view__full {
	display: inline-block;
	margin-block-start: var(--space-2);
	font-size: var(--text-sm);
}

.kramo-quick-view__skeleton {
	display: grid;
	gap: var(--space-2);
	padding: var(--space-3);
}

.kramo-quick-view__skeleton .kramo-skeleton-card__media {
	aspect-ratio: var(--video-ratio);
}

@media (min-width: 48rem) {
	.kramo-quick-view__body {
		grid-template-columns: var(--modal-media-width) minmax(0, 1fr);
	}
}

.kramo-recent {
	max-width: var(--container-max);
	margin-inline: var(--size-auto);
	padding-block: var(--section-gap) var(--space-0);
}

.kramo-recent[hidden] {
	display: none;
}

.kramo-recent__title {
	font-size: var(--heading-h2-size);
}

.kramo-recent__track {
	display: grid;
	gap: var(--grid-gap);
	grid-auto-columns: var(--recent-card-width);
	grid-auto-flow: column;
	overflow-x: auto;
	padding-block-end: var(--space-1);
	scroll-snap-type: x proximity;
}

.kramo-recent__card {
	display: grid;
	gap: var(--space-1);
	color: var(--color-text);
	scroll-snap-align: start;
	text-decoration: none;
	animation: kramo-fade-rise var(--duration-standard) var(--ease-out) both;
}

.kramo-recent__card img {
	width: var(--size-full);
	aspect-ratio: var(--catalog-media-ratio);
	border-radius: var(--catalog-media-radius);
	object-fit: cover;
	transition: transform var(--duration-slow) var(--ease-out);
}

.kramo-recent__card:hover img {
	transform: var(--scale-media-hover);
}

.kramo-recent__media {
	overflow: var(--overflow-hidden);
	border-radius: var(--catalog-media-radius);
}

.kramo-recent__name {
	font-size: var(--text-sm);
	line-height: var(--leading-heading);
}

.kramo-recent__price {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	font-variant-numeric: tabular-nums;
}

.kramo-checkout-steps {
	display: grid;
	gap: var(--space-1);
	margin-block-end: var(--space-3);
	padding: var(--space-0);
	list-style: none;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
}

.kramo-checkout-steps__item {
	display: grid;
	gap: var(--space-1);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.kramo-checkout-steps__item::before {
	height: var(--progress-track-height);
	border-radius: var(--radius-pill);
	background: var(--color-border);
	content: "";
	transform: var(--scale-hidden);
	transform-origin: left center;
	transition: transform var(--duration-standard) var(--ease-out);
}

.kramo-checkout-steps__item--done::before,
.kramo-checkout-steps__item--current::before {
	background: var(--color-primary);
	transform: var(--scale-visible);
}

.kramo-checkout-steps__item--current {
	color: var(--color-text);
	font-weight: var(--font-weight-semibold);
}

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: var(--color-danger);
}

.woocommerce form .form-row.kramo-shake {
	animation: kramo-shake var(--duration-shake) var(--ease-standard);
}

@keyframes kramo-shake {
	0%,
	100% {
		transform: var(--translate-none);
	}

	25% {
		transform: translateX(calc(var(--shake-distance) * -1));
	}

	75% {
		transform: translateX(var(--shake-distance));
	}
}

/* WooCommerce floats the submit button and leaves the remember-me checkbox to
   flow around it, so the two end up side by side with the label wrapping under
   its own checkbox. The label takes the row above the button instead, and the
   selectors carry the body class to outrank the plugin stylesheet. */
.woocommerce-account .woocommerce form .form-row label.woocommerce-form-login__rememberme {
	display: flex;
	gap: var(--space-1);
	align-items: center;
	margin-block-end: var(--space-2);
	font-size: var(--text-sm);
}

.woocommerce-account .woocommerce form .form-row label.woocommerce-form-login__rememberme input {
	margin: var(--space-0);
}

.woocommerce-account .woocommerce form .form-row .woocommerce-form-login__submit {
	float: none;
}

.woocommerce ul.products li.product .kramo-product-media {
	view-transition-name: var(--kramo-view-name, none);
}

.woocommerce div.product .woocommerce-product-gallery__image:first-child {
	view-transition-name: var(--kramo-view-name, none);
}