/* Digital Hub — product card (catalog grid / archive / related products).
   Structure + values copied from plati.market's real #itemsList / .card
   markup (see /opt/papa.market/website/donor-reference/html/02_category.html):
   square image (forced via CSS regardless of our source file's real size —
   we'll swap in proper catalog images later), bold price, 2-line title,
   real "Продано N" sold count, BLUE "Купить" button (confirmed on live
   product/category pages — orange is nav-only, blue is the real buy color),
   circular favorite heart overlain on the image corner. */

.woocommerce ul.products li.product {
	background-color: var(--color-surface);
	border-radius: 12px 12px 8px 8px;
	padding: 0.75rem 0.75rem 1rem;
	text-align: center;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
	box-shadow: 0 1px 2px rgba(11, 13, 18, 0.06);
	position: relative;
	/* Cards with a 1-line title vs. a 2-line title otherwise end up
	   different heights, so "Купить" sits at a different Y per card in
	   the same row. li.product is already row-stretched to equal height
	   by its container (align-items:stretch on the carousels/popular
	   grid) — flex-column here + flex:1 on the link + margin-top:auto on
	   the button below uses that equal height to pin the button to the
	   same bottom edge everywhere. */
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product a.woocommerce-loop-product__link {
	flex: 1 1 auto;
}

.woocommerce ul.products li.product:hover {
	box-shadow: 0 8px 24px rgba(11, 13, 18, 0.12);
	transform: translateY(-2px);
}

/* Forced square image, matches donor's .preview-image (aspect-ratio:1/1,
   width:100%, object-fit:contain) — our current source images are small
   FKwallet icons, forcing the box keeps layout consistent regardless. */
.woocommerce ul.products li.product img {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
	object-fit: contain;
	background-color: var(--color-bg);
	border-radius: 12px;
	margin-bottom: 0.6rem;
}

/* Reorder to match donor: image, price, title, sold, button — the default
   Woo template order is image/title/price, so we flex+order the link body. */
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product .price {
	display: block;
	font-size: 20px;
	font-weight: 700;
	line-height: 28px;
	color: var(--color-text);
	order: 1;
	margin-bottom: 0.2rem;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-family);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: var(--color-text);
	margin: 0 0 0.35rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	order: 2;
}

/* Real "Продано N" — WooCommerce's own total_sales meta, output via
   digitalhub_product_sold_count() hooked after the title (functions.php). */
.dh-sold-count {
	display: block;
	font-size: 12px;
	color: var(--color-text-secondary);
	margin-bottom: 0.5rem;
	order: 3;
}

.woocommerce ul.products li.product .button {
	background-color: var(--color-brand);
	color: #ffffff;
	border-radius: 8px;
	font-family: var(--font-family);
	font-size: 14px;
	font-weight: 600;
	border: none;
	padding: 0.6rem 1rem;
	width: 100%;
	margin-top: auto;
}

.woocommerce ul.products li.product .button:hover {
	background-color: var(--color-brand-hover);
	color: #ffffff;
}

.woocommerce ul.products li.product .ti-wishlist-icon-move-to-wishlist {
	font-family: var(--font-family);
	font-size: 0.85rem;
	color: var(--color-text-secondary);
}

/* Wishlist heart as a circular overlay on the image corner (matches
   plati.market's "card-favorite" pattern) instead of a text link under the price. */
.woocommerce ul.products li.product .tinv-wraper.tinvwl-loop-button-wrapper {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 2;
}

.woocommerce ul.products li.product .tinvwl_add_to_wishlist_button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--color-surface);
	box-shadow: 0 1px 3px rgba(11, 13, 18, 0.15);
	color: var(--color-text-secondary);
}

.woocommerce ul.products li.product .tinvwl_add_to_wishlist_button:hover {
	color: var(--color-accent);
}

.woocommerce ul.products li.product .tinvwl_add_to_wishlist-text,
.woocommerce ul.products li.product .tinvwl-tooltip {
	display: none;
}

/* Desktop grid column count: donor's real #itemsList uses
   `.scroll-wrapper+.content .section-list__item{width:22.3%}` at >=1470px
   WHEN a sidebar precedes it (our shop always has one, see
   shop-sidebar.css) — that's 4 columns (4*22.3%=89.2%, remainder as gaps
   via justify-content:space-between), not Storefront's default 3-column
   float layout. Forcing a real grid sidesteps fighting Storefront's
   `.columns-3` percentage/float CSS for an equivalent result. */
@media (min-width: 992px) {
	/* .dh-shop-main sits INSIDE WooCommerce's own .woocommerce wrapper div
	   (opened by woocommerce_output_content_wrapper before our sidebar hook
	   runs), not the other way round — .woocommerce is an ancestor here, so
	   it must not appear in this selector at all. */
	/* auto-fill + minmax instead of a rigid repeat(4,1fr): a fixed 4-column
	   grid inside .dh-shop-main (narrower than the full content width once
	   the .dh-shop-sidebar column is subtracted — see shop-sidebar.css's
	   .archive.right-sidebar fix above) rendered cards at ~149px, visibly
	   smaller than every other product-card carousel on the site (the
	   "Рекомендуем" row's cards run ~250-270px). minmax(220px,1fr) keeps
	   cards in that same size range and lets column count self-adjust to
	   whatever width is actually available, still filling the row edge to
	   edge (1fr distributes leftover space, doesn't leave a gap). */
	.dh-shop-main ul.products {
		display: grid !important;
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
		gap: 1.5rem !important;
	}

	.dh-shop-main ul.products::before,
	.dh-shop-main ul.products::after {
		content: none !important;
		display: none !important;
	}

	.dh-shop-main ul.products li.product {
		width: 100% !important;
		margin: 0 !important;
	}
}

/* Below 710px WooCommerce switches li.product to display:list-item/float:none,
   which stacks cards in 1 column regardless of width. Force a real 2-col grid
   (same fix as the homepage popular grid) instead of fighting float/width.
   Excludes .dh-popular-grid — that one stays a horizontal scroll carousel
   on mobile too (see home.css), it must not be forced into a grid here. */
@media (max-width: 709px) {
	.woocommerce ul.products:not(.dh-popular-grid),
	.woocommerce-page ul.products:not(.dh-popular-grid) {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 1rem !important;
	}

	.woocommerce ul.products:not(.dh-popular-grid)::before,
	.woocommerce ul.products:not(.dh-popular-grid)::after,
	.woocommerce-page ul.products:not(.dh-popular-grid)::before,
	.woocommerce-page ul.products:not(.dh-popular-grid)::after {
		content: none !important;
		display: none !important;
	}

	.woocommerce ul.products:not(.dh-popular-grid) li.product,
	.woocommerce-page ul.products:not(.dh-popular-grid) li.product {
		width: 100% !important;
		margin: 0 !important;
	}
}