.kl-elementor-product-card .elementor-widget-image img,
.kl-elementor-product-card .kl-elementor-card__image,
.elementor-156 .elementor-widget-image img,
.elementor-156 .kl-elementor-card__image {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: contain;
	object-position: center;
	background: #fff;
}

.elementor-156 .elementor-widget-woocommerce-product-title,
.elementor-156 .elementor-widget-theme-post-title {
	margin-bottom: 0 !important;
}

.elementor-156 .elementor-widget-woocommerce-product-price,
.elementor-156 .kl-elementor-card__price {
	margin-top: 6px !important;
	margin-bottom: 12px !important;
}

.elementor-156 .kl-elementor-card__subtitle:empty {
	display: none !important;
}

.elementor-156 .elementor-widget-kl-product-card-cart {
	margin-top: auto !important;
}

.kl-card-cart { width: 100% !important; font-family: "DM Sans", sans-serif; }
.kl-card-cart button { cursor: pointer; font: inherit; }
.kl-card-cart button:disabled { cursor: wait; opacity: .65; }
/* Ukrywanie MUSI miec wyzsza specyficznosc niz reguly ukladu ponizej: widget
   przelacza przycisk i steper atrybutem `hidden`, a `display: flex/grid` na
   dwuczlonowym selektorze mialoby ta sama specyficznosc co `.kl-card-cart
   [hidden]` i - bedac pozniej w pliku - pokazywaloby oba naraz. */
.kl-card-cart .kl-card-cart__add[hidden],
.kl-card-cart .kl-card-cart__stepper[hidden],
.kl-card-cart .kl-card-cart__options[hidden],
.kl-card-cart [hidden] { display: none !important; }
.kl-card-cart button:focus-visible,
.kl-card-cart__options:focus-visible { outline: 3px solid rgb(27 40 69 / 30%); outline-offset: 2px; }

/* Selektory sa celowo dwuczlonowe: reset motywu styluje `[type="button"]`, co ma
   te sama specyficznosc co pojedyncza klasa, a laduje sie pozniej - jednoczlonowy
   `.kl-card-cart__add` przegrywal z nim obramowanie i zaokraglenie.
   Tlo i kolor tekstu ustawia widget Elementora (button_background/button_color);
   jego selektor jest jeszcze bardziej szczegolowy, stad `!important` przy hoverze. */
.kl-card-cart .kl-card-cart__add,
.kl-card-cart .kl-card-cart__options,
.kl-card-cart .kl-card-cart__unavailable {
	display: flex !important;
	width: 100% !important;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 9px 12px;
	border: 1px solid #ded7cc;
	border-radius: 6px;
	background: #fff;
	color: #000;
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
}
.kl-card-cart .kl-card-cart__add:hover,
.kl-card-cart .kl-card-cart__options:hover {
	border-color: #c9c0b2;
	background: #fbf9f5 !important;
}
.kl-card-cart__add svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.kl-card-cart .kl-card-cart__unavailable { border-color: #e3ddd7; background: #eee9e5; color: #665f59; }

.kl-card-cart .kl-card-cart__stepper {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(44px, 1fr));
	width: 100% !important;
	min-height: 44px;
	border: 1px solid #ded7cc;
	border-radius: 6px;
	background: #fff;
	color: #000;
	overflow: hidden;
	box-sizing: border-box;
}
.kl-card-cart .kl-card-cart__stepper button,
.kl-card-cart .kl-card-cart__stepper span {
	display: grid;
	min-height: 44px;
	place-items: center;
	border: 0;
	border-right: 1px solid #ded7cc;
	background: transparent;
	color: inherit;
	font-weight: 700;
}
.kl-card-cart .kl-card-cart__stepper button:last-child { border-right: 0; }
.kl-card-cart .kl-card-cart__stepper button:hover { background: #fbf9f5 !important; }

/*
 * 2026-08-13: mobile horizontal page scroll on /sklep/ and every category
 * archive (both use the shared Products Archive template, condition
 * include/product_archive — this file already loads globally, so this rule
 * reaches all of them without touching that template's own data).
 *
 * Root cause, confirmed live via computed style: Elementor Pro's Loop Grid
 * widget sets `grid-template-columns: repeat(2, minmax(0, 1fr))` for its
 * columns_mobile:2 setting (elementor-pro/assets/css/widget-loop-grid.min.css)
 * — but the resolved column width (verified via getComputedStyle) came out
 * to ~196.8px each against a 355px-wide grid box, i.e. `minmax(0, 1fr)`
 * wasn't actually flexing down to fit; the grid element's own
 * `scrollWidth` (404px) exceeded its `clientWidth` (355px) by exactly the
 * page's own horizontal overflow. Tested and ruled out a stray-looking
 * `_element_custom_width_mobile: 49px` widget setting first (its value was
 * suspiciously close to the ~49px gap) — removed it via the Elementor API,
 * verified the overflow was completely unchanged, so that wasn't it; this
 * is a plain CSS Grid track-sizing quirk with `minmax(0, 1fr)`, not an
 * Elementor data/settings problem. Forcing an explicit `calc()` width per
 * column (rather than trusting `1fr` to divide the container) fixes it —
 * confirmed live no card content is clipped or forced to wrap awkwardly
 * at this width, so nothing was actually relying on the wider column.
 *
 * :not(.swiper) excludes the homepage's Loop Carousel widgets, which also
 * render with these same two classes (`elementor-loop-container
 * elementor-grid`) but are a different, already-working layout (fixed with
 * a `custom_css` rule earlier this session) that this fix must not touch.
 */
@media (max-width: 767px) {
	body.archive .elementor-loop-container.elementor-grid:not(.swiper) {
		grid-template-columns: repeat(2, minmax(0, calc(50% - 5px)));
	}
}