/* Product card + grid: one stylesheet for every page with template-parts/product-card.php
   (home, /sklep/, categories, product page "Podobne herbaty", article teas).
   Page files only adjust spacing for their context (shop.css, library.css). Badges, omnibus line, sold-out
   and loading states live in main.css. */

.jc-products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.25rem; }
.jc-products[hidden], .jc-products > li[hidden] { display: none; }

.jc-product { position: relative; display: flex; flex-direction: column; gap: .75rem; text-align: center; }
.jc-product__frame { position: relative; overflow: hidden; }
.jc-product__media { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--jc-bg-alt); overflow: hidden; }
.jc-product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--jc-ease); }
.jc-product:hover .jc-product__media img { transform: scale(1.06); }

.jc-product__cta {
	position: absolute; left: 0; right: 0; bottom: 0;
	height: 3rem; display: grid; place-items: center; transform: translateY(100%);
	background: var(--jc-accent); color: var(--jc-white); font-size: .75rem; letter-spacing: var(--jc-tracking-btn); text-transform: uppercase; text-decoration: none;
	transition: transform .35s var(--jc-ease);
}
.jc-product:hover .jc-product__cta, .jc-product__cta:focus-visible { transform: none; }
.jc-product__cta:hover { color: var(--jc-white); background: var(--jc-accent-dark); }
.jc-product__cta.added { display: none; }

.jc-product__name { font-size: 1rem; font-weight: 500; color: var(--jc-text); text-decoration: none; }
.jc-product__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.jc-product__price { font-size: .875rem; }
/* Sale price: <ins> from WooCommerce (simple products), .jc-price-sale from justcha_price_label() ("od … / 10 g"). */
.jc-product__price ins, .jc-product__price .jc-price-sale { text-decoration: none; color: var(--jc-accent); }

@media (max-width: 960px) {
	.jc-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.jc-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem .625rem; }
	.jc-product__name { font-size: .875rem; }
	.jc-product__price { font-size: .8125rem; }
	/* No hover on phones: the button stays visible under the photo. */
	.jc-product__cta { position: static; transform: none; height: 2.5rem; border: 1px solid var(--jc-black); background: none; color: var(--jc-black); }
	.jc-product__cta:hover { background: var(--jc-black); }
}
@media (hover: none) {
	.jc-product__cta { position: static; transform: none; height: 2.5rem; border: 1px solid var(--jc-black); background: none; color: var(--jc-black); }
}