/*
 * kl-commerce/assets/css/woocommerce.css
 *
 * Shop archive, single product, cart and checkout. Loaded on WooCommerce
 * pages only.
 */

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

.klc-shop__head {
	margin-block-end: var(--klc-space-lg);
}

.klc-shop__title {
	font-size: var(--klc-size-h2);
	margin: 0;
}

.klc-shop__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--klc-space-lg);
	align-items: start;
}

@media (min-width: 1024px) {

	.klc-shop__layout {
		grid-template-columns: 16rem minmax(0, 1fr);
		gap: var(--klc-space-xl);
	}

	/* No widgets in the filter area: one column, nothing else changes. */
	.klc-shop--wide .klc-shop__layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

.klc-shop__sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--klc-space-lg);
}

@media (min-width: 1024px) {

	.klc-shop__sidebar {
		position: sticky;
		inset-block-start: var(--klc-space-md);
	}
}

.klc-shop-widget__title {
	margin-block: 0 var(--klc-space-2xs);
	text-transform: uppercase;
}

.klc-shop__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--klc-space-2xs);
	margin-block-end: var(--klc-space-md);
	padding-block-end: var(--klc-space-2xs);
	border-block-end: var(--klc-border-width) solid var(--klc-color-border);
	font-family: var(--klc-font-nav);
	font-size: var(--klc-size-sm);
	color: var(--klc-color-muted);
}

.klc-shop__toolbar .woocommerce-result-count {
	margin: 0;
}

.klc-shop__toolbar select {
	padding-block: var(--klc-space-3xs);
	padding-inline: var(--klc-space-2xs);
	background-color: var(--klc-color-bg);
	color: var(--klc-color-text);
	border: var(--klc-border-width) solid var(--klc-color-border);
	border-radius: var(--klc-radius-none);
	font-size: var(--klc-size-sm);
}

/*
 * Woo prints ul.products and its own stylesheet sets that to flex with
 * percentage widths on the items. Those selectors carry the same specificity
 * as an obvious .klc-shop__results ul.products would, so which one wins comes
 * down to print order — and a CSS-combining cache plugin is free to change
 * that. The extra class here decides it on specificity instead, so the grid
 * holds whatever order the two sheets end up in.
 */
.klc-shop .klc-shop__results ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--klc-space-md) var(--klc-space-sm);
	margin-block: 0;
	padding-inline-start: 0;
	list-style: none;
}

@media (min-width: 768px) {

	.klc-shop .klc-shop__results ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--klc-space-lg) var(--klc-space-md);
	}
}

@media (min-width: 1440px) {

	.klc-shop.klc-shop--wide .klc-shop__results ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.klc-shop .klc-shop__results ul.products::before,
.klc-shop .klc-shop__results ul.products::after {
	content: none;
}

/*
 * Let the grid track set the width. Woo hands the item a percentage width and
 * a float; both have to go, and 'auto' is what a grid item should be — the
 * old 100% here was what turned every card into its own row once Woo's flex
 * rule won.
 */
.klc-shop .klc-shop__results ul.products li.product,
.klc-shop .klc-shop__item {
	inline-size: auto !important;
	min-inline-size: 0;
	margin: 0 !important;
	padding: 0;
	float: none !important;
	clear: none !important;
}

.klc-shop__empty {
	padding-block: var(--klc-space-xl);
}

.woocommerce-pagination {
	margin-block-start: var(--klc-space-xl);
}

.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--klc-space-3xs);
	justify-content: center;
	margin: 0;
	padding-inline-start: 0;
	list-style: none;
	border: 0;
}

.woocommerce-pagination .page-numbers li {
	border: 0;
}

.woocommerce-pagination .page-numbers .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2.5em;
	padding-block: var(--klc-space-3xs);
	padding-inline: var(--klc-space-2xs);
	border: var(--klc-border-width) solid var(--klc-color-border);
	font-family: var(--klc-font-nav);
	font-size: var(--klc-size-sm);
}

.woocommerce-pagination .page-numbers .page-numbers.current {
	background-color: var(--klc-color-accent);
	color: var(--klc-color-bg);
	border-color: var(--klc-color-accent);
}

/* ---- Single product ------------------------------------------------ */

.klc-product__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"gallery"
		"buy"
		"details";
	gap: var(--klc-space-lg);
}

@media (min-width: 1024px) {

	/*
	 * Details / gallery / buy. The gallery is the widest column because it is
	 * the only one whose content is not text.
	 */
	.klc-product__layout {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr) minmax(0, 0.85fr);
		grid-template-areas: "details gallery buy";
		gap: var(--klc-space-xl);
		align-items: start;
	}
}

.klc-product__details {
	grid-area: details;
	display: flex;
	flex-direction: column;
	gap: var(--klc-space-sm);
	min-inline-size: 0;
}

.klc-product__gallery {
	grid-area: gallery;
	min-inline-size: 0;
}

.klc-product__buy {
	grid-area: buy;
	min-inline-size: 0;
}

@media (min-width: 1024px) {

	.klc-product__buy-inner {
		position: sticky;
		inset-block-start: var(--klc-space-md);
	}

	.klc-product__details,
	.klc-product__buy-inner {
		max-block-size: calc(100svh - var(--klc-space-xl));
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.klc-product__details {
		position: sticky;
		inset-block-start: var(--klc-space-md);
	}
}

.klc-product__title {
	font-size: var(--klc-size-h3);
	margin: 0;
}

.klc-product__excerpt {
	color: var(--klc-color-muted);
	font-size: var(--klc-size-sm);
}

/* ---- Gallery ------------------------------------------------------- */

.klc-gallery {
	position: relative;
}

/*
 * One image in view. The slides stack absolutely inside this window; the
 * script only moves an is-active class, so nothing here reflows when the
 * gallery advances.
 */
.klc-gallery__window {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background-color: var(--klc-color-surface);
	margin-block: 0;
	padding-inline-start: 0;
	list-style: none;
	cursor: pointer;
}

.klc-gallery__slide {
	position: absolute;
	inset: 0;
	z-index: 0;
	visibility: hidden;
	/* Desktop: the next image rises from below. */
	transform: translateY(100%);
	transition:
		transform var(--klc-duration-slide) var(--klc-ease),
		visibility 0s linear var(--klc-duration-slide);
}

.klc-gallery__slide.is-active {
	z-index: 2;
	visibility: visible;
	transform: translateY(0);
	transition:
		transform var(--klc-duration-slide) var(--klc-ease),
		visibility 0s;
}

/* The outgoing image keeps moving in the same direction rather than snapping
   back, so the sequence reads as one continuous travel. */
.klc-gallery__slide.is-leaving {
	z-index: 1;
	visibility: visible;
	transform: translateY(-100%);
}

@media (max-width: 767px) {

	.klc-gallery__slide {
		transform: translateX(100%);
	}

	.klc-gallery__slide.is-active {
		transform: translateX(0);
	}

	.klc-gallery__slide.is-leaving {
		transform: translateX(-100%);
	}
}

/* RTL: travel follows the reading direction on mobile. */
@media (max-width: 767px) {

	[dir="rtl"] .klc-gallery__slide {
		transform: translateX(-100%);
	}

	[dir="rtl"] .klc-gallery__slide.is-active {
		transform: translateX(0);
	}

	[dir="rtl"] .klc-gallery__slide.is-leaving {
		transform: translateX(100%);
	}
}

.klc-gallery__img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.klc-gallery__slide--empty {
	background-color: var(--klc-color-surface);
}

.klc-gallery__flag {
	position: absolute;
	inset-block-start: var(--klc-space-2xs);
	inset-inline-start: var(--klc-space-2xs);
	z-index: 3;
	padding-block: var(--klc-space-3xs);
	padding-inline: var(--klc-space-2xs);
	background-color: var(--klc-color-bg);
	color: var(--klc-color-text);
	font-family: var(--klc-font-nav);
	letter-spacing: var(--klc-tracking-nav);
	text-transform: uppercase;
	pointer-events: none;
}

/* ---- Gallery dots -------------------------------------------------- */

.klc-gallery__dots {
	display: flex;
	justify-content: center;
	gap: var(--klc-space-2xs);
	padding-block-start: var(--klc-space-2xs);
}

.klc-gallery__dot {
	position: relative;
	inline-size: var(--klc-space-md);
	block-size: var(--klc-border-width);
	padding: 0;
	background-color: var(--klc-color-border);
	border: 0;
	cursor: pointer;
	transition: background-color var(--klc-duration-fast) var(--klc-ease);
}

/* A hairline is too small to hit, so give it a transparent target. */
.klc-gallery__dot::before {
	content: "";
	position: absolute;
	inline-size: var(--klc-space-md);
	block-size: var(--klc-space-md);
	transform: translateY(calc(var(--klc-space-md) / -2));
}

.klc-gallery__dot[aria-selected="true"] {
	background-color: var(--klc-color-accent);
}

.klc-gallery__dot:focus-visible {
	outline: var(--klc-ring-width) solid var(--klc-color-accent);
	outline-offset: var(--klc-ring-offset);
}

.klc-gallery.is-paused .klc-gallery__dots {
	opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {

	.klc-gallery__slide {
		transition: none;
	}
}

/* ---- Buy box ------------------------------------------------------- */

.woocommerce div.product .klc-product__buy .price,
.klc-product__buy .price {
	display: block;
	margin-block-end: var(--klc-space-sm);
	font-family: var(--klc-font-price);
	font-weight: var(--klc-weight-price);
	font-size: var(--klc-size-xl);
	font-variant-numeric: tabular-nums;
	color: var(--klc-color-text);
}

.klc-product__buy .price del {
	margin-inline-end: var(--klc-space-2xs);
	font-size: var(--klc-size-lg);
	color: var(--klc-color-muted);
}

.klc-product__buy .price ins {
	text-decoration: none;
}

.klc-product__buy form.cart {
	display: flex;
	flex-direction: column;
	gap: var(--klc-space-sm);
	margin-block-end: var(--klc-space-md);
}

.klc-product__buy table.variations {
	inline-size: 100%;
	border-collapse: collapse;
}

.klc-product__buy table.variations th,
.klc-product__buy table.variations td {
	display: block;
	padding: 0;
	text-align: start;
}

.klc-product__buy table.variations th {
	padding-block-end: var(--klc-space-3xs);
	font-family: var(--klc-font-nav);
	font-size: var(--klc-size-sm);
	font-weight: var(--klc-weight-nav);
	letter-spacing: var(--klc-tracking-nav);
	text-transform: uppercase;
}

.klc-product__buy table.variations td {
	padding-block-end: var(--klc-space-sm);
}

.klc-product__buy select,
.klc-product__buy .quantity input[type="number"] {
	inline-size: 100%;
	padding-block: var(--klc-space-xs);
	padding-inline: var(--klc-space-2xs);
	background-color: var(--klc-color-bg);
	color: var(--klc-color-text);
	border: var(--klc-border-width) solid var(--klc-color-border);
	border-radius: var(--klc-radius-none);
	font-size: var(--klc-size-sm);
}

.klc-product__buy .quantity {
	inline-size: 6rem;
	flex: none;
}

.klc-product__buy .quantity input[type="number"] {
	text-align: center;
}

/* Woo's add-to-cart button, wearing the theme's button. */
.woocommerce .klc-product__buy .button,
.woocommerce .klc-product__buy button.button,
.klc-product__buy .button,
.klc-product__buy button[type="submit"],
.klc-woo .button,
.woocommerce-cart .button,
.woocommerce-checkout .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-block: var(--klc-space-xs);
	padding-inline: var(--klc-space-md);
	background-color: var(--klc-color-accent);
	color: var(--klc-color-bg);
	border: var(--klc-border-width) solid var(--klc-color-accent);
	border-radius: var(--klc-radius-none);
	font-family: var(--klc-font-button);
	font-weight: var(--klc-weight-button);
	font-size: var(--klc-size-sm);
	letter-spacing: var(--klc-tracking-button);
	line-height: var(--klc-leading-tight);
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background-color var(--klc-duration-fast) var(--klc-ease),
		color var(--klc-duration-fast) var(--klc-ease);
}

.klc-product__buy .single_add_to_cart_button {
	inline-size: 100%;
}

.klc-product__buy .button:hover,
.klc-woo .button:hover {
	background-color: transparent;
	color: var(--klc-color-accent);
}

.klc-product__buy .button:disabled,
.klc-product__buy .button.disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.klc-product__buy .product_meta {
	padding-block-start: var(--klc-space-sm);
	border-block-start: var(--klc-border-width) solid var(--klc-color-border);
	font-size: var(--klc-size-sm);
	color: var(--klc-color-muted);
}

.klc-product__buy .product_meta > span {
	display: block;
	margin-block-end: var(--klc-space-3xs);
}

.klc-product__buy .stock.out-of-stock {
	color: var(--klc-color-danger, var(--klc-color-muted));
}

/* ---- Tabs ---------------------------------------------------------- */

.klc-product__tabs .wc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--klc-space-sm);
	margin-block: 0 var(--klc-space-sm);
	padding-inline-start: 0;
	list-style: none;
	border-block-end: var(--klc-border-width) solid var(--klc-color-border);
}

.klc-product__tabs .wc-tabs li {
	margin: 0;
}

.klc-product__tabs .wc-tabs li a {
	display: block;
	padding-block-end: var(--klc-space-2xs);
	border-block-end: var(--klc-ring-width) solid transparent;
	font-family: var(--klc-font-nav);
	font-size: var(--klc-size-sm);
	letter-spacing: var(--klc-tracking-nav);
	text-transform: uppercase;
	color: var(--klc-color-muted);
}

.klc-product__tabs .wc-tabs li.active a {
	border-block-end-color: var(--klc-color-accent);
	color: var(--klc-color-text);
}

.klc-product__tabs .woocommerce-Tabs-panel h2 {
	font-size: var(--klc-size-h6);
	margin-block-end: var(--klc-space-2xs);
}

.klc-product__tabs .woocommerce-Tabs-panel {
	font-size: var(--klc-size-sm);
}

/* ---- Related / upsells --------------------------------------------- */

.related,
.upsells {
	margin-block-start: var(--klc-space-2xl);
	padding-block-start: var(--klc-space-lg);
	border-block-start: var(--klc-border-width) solid var(--klc-color-border);
}

.related > h2,
.upsells > h2 {
	font-size: var(--klc-size-h3);
	margin-block-end: var(--klc-space-md);
}

.klc-product .related ul.products,
.klc-product .upsells ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--klc-space-md) var(--klc-space-sm);
	margin-block: 0;
	padding-inline-start: 0;
	list-style: none;
}

@media (min-width: 1024px) {

	.klc-product .related ul.products,
	.klc-product .upsells ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--klc-space-lg) var(--klc-space-md);
	}
}

/*
 * Woo puts a clearfix on ul.products. Those pseudo-elements are invisible in a
 * float layout, but in a grid they are grid items and each one eats a cell —
 * which is why the first slot renders empty and the last row wraps early.
 */
.klc-product .related ul.products::before,
.klc-product .related ul.products::after,
.klc-product .upsells ul.products::before,
.klc-product .upsells ul.products::after {
	content: none;
}

.klc-product .related ul.products li.product,
.klc-product .upsells ul.products li.product {
	inline-size: auto !important;
	min-inline-size: 0;
	margin: 0 !important;
	float: none !important;
}

/* ---- Notices ------------------------------------------------------- */

.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
	margin-block-end: var(--klc-space-md);
	padding: var(--klc-space-sm);
	background-color: var(--klc-color-surface);
	border-inline-start: var(--klc-ring-width) solid var(--klc-color-accent);
	font-size: var(--klc-size-sm);
	list-style: none;
}

.woocommerce-notices-wrapper .woocommerce-error {
	border-inline-start-color: var(--klc-color-danger, var(--klc-color-accent));
}

/* ---- Cart and checkout --------------------------------------------- */

.klc-woo table.shop_table {
	inline-size: 100%;
	margin-block-end: var(--klc-space-lg);
	border: var(--klc-border-width) solid var(--klc-color-border);
	border-collapse: collapse;
	font-size: var(--klc-size-sm);
}

.klc-woo table.shop_table th,
.klc-woo table.shop_table td {
	padding: var(--klc-space-2xs);
	border-block-end: var(--klc-border-width) solid var(--klc-color-border);
	text-align: start;
}

.klc-woo table.shop_table th {
	font-family: var(--klc-font-nav);
	letter-spacing: var(--klc-tracking-nav);
	text-transform: uppercase;
}

.klc-woo input[type="text"],
.klc-woo input[type="email"],
.klc-woo input[type="tel"],
.klc-woo input[type="password"],
.klc-woo input[type="number"],
.klc-woo textarea,
.klc-woo select {
	inline-size: 100%;
	padding-block: var(--klc-space-xs);
	padding-inline: var(--klc-space-2xs);
	background-color: var(--klc-color-bg);
	color: var(--klc-color-text);
	border: var(--klc-border-width) solid var(--klc-color-border);
	border-radius: var(--klc-radius-none);
	font-size: var(--klc-size-sm);
}

.klc-woo .form-row {
	margin-block-end: var(--klc-space-sm);
}

.klc-woo label {
	display: block;
	margin-block-end: var(--klc-space-3xs);
	font-family: var(--klc-font-nav);
	font-size: var(--klc-size-sm);
}