/**
 * DeShop — product-card.css
 *
 * Product grid and the five card styles. The list carries two classes:
 *   .ds-cards--{minimal|luxury|featured}   applies from 768px up
 *   .ds-cards-m--{compact|horizontal}      applies below 768px
 * so one markup serves phones and desktops.
 *
 * @package DeShop
 */

/* Grid ------------------------------------------------------------------------ */

.ds-products {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ds-products:not(.ds-scroller) {
	display: grid;
	grid-template-columns: repeat(var(--ds-cols-sm, 2), minmax(0, 1fr));
	gap: var(--ds-space-xl) var(--ds-space-sm);
}

@media (min-width: 768px) {
	.ds-products:not(.ds-scroller) {
		grid-template-columns: repeat(var(--ds-cols-md, 3), minmax(0, 1fr));
		gap: var(--ds-space-2xl) var(--ds-space-lg);
	}
}

@media (min-width: 1024px) {
	.ds-products:not(.ds-scroller) {
		grid-template-columns: repeat(var(--ds-cols, 4), minmax(0, 1fr));
	}
}

/* Card ------------------------------------------------------------------------- */

.ds-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	--_title-font: var(--ds-font-body);
	--_title-size: var(--ds-fs-sm);
	--_title-weight: 500;
}

/* Whole card is clickable through the title link; buttons sit above it. */
.ds-product-card .ds-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.ds-product-card :is(.ds-product-card__cat, .ds-product-card__footer, .added_to_cart) {
	position: relative;
	z-index: 2;
}

/* Already absolutely positioned inside the media: only lift them. */
.ds-product-card :is(.ds-product-card__badges, .ds-product-card__actions, .ds-product-card__quick) {
	z-index: 2;
}

/* Media */
.ds-product-card__media {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: var(--ds-radius-md);
	overflow: hidden;
	background: var(--ds-muted);
}

.ds-product-card__image-link {
	position: absolute;
	inset: 0;
	display: block;
}

.ds-product-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition:
		opacity var(--ds-dur-slow) var(--ds-ease),
		transform var(--ds-dur-slow) var(--ds-ease);
}

.ds-product-card__img--hover {
	opacity: 0;
}

.ds-product-card.outofstock .ds-product-card__img {
	opacity: 0.6;
	filter: grayscale(0.4);
}

.ds-product-card__badges {
	position: absolute;
	top: var(--ds-space-xs);
	inset-inline-start: var(--ds-space-xs);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	pointer-events: none;
}

.ds-product-card__actions {
	position: absolute;
	top: var(--ds-space-xs);
	inset-inline-end: var(--ds-space-xs);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ds-product-card__actions:empty {
	display: none;
}

.ds-product-card__quick {
	position: absolute;
	right: var(--ds-space-xs);
	bottom: var(--ds-space-xs);
	width: 40px;
	height: 40px;
	color: var(--ds-primary);
}

[dir="rtl"] .ds-product-card__quick {
	right: auto;
	left: var(--ds-space-xs);
}

.ds-product-card__quick:hover {
	background: var(--ds-primary);
	color: var(--ds-on-primary);
}

.ds-product-card__quick.loading .ds-icon {
	animation: ds-spin 0.7s linear infinite;
}

.ds-product-card__quick.added {
	background: var(--ds-primary);
	color: var(--ds-on-primary);
}

/* WooCommerce adds a "View cart" link after an AJAX add; the toast covers it. */
.ds-product-card__media .added_to_cart {
	display: none;
}

/* Body */
.ds-product-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4px;
	padding-top: var(--ds-space-sm);
}

.ds-product-card__cat {
	align-self: flex-start;
	color: var(--ds-accent);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
}

.ds-product-card__cat:hover {
	color: var(--ds-primary);
}

.ds-product-card__title {
	margin: 0;
	font-family: var(--_title-font);
	font-size: var(--_title-size);
	font-weight: var(--_title-weight);
	line-height: 1.3;
	letter-spacing: 0;
	text-wrap: pretty;
}

.ds-product-card__title a {
	color: var(--ds-text);
	text-decoration: none;
}

.ds-product-card:hover .ds-product-card__title a {
	color: var(--ds-primary);
}

.ds-product-card__excerpt {
	display: none;
	color: var(--ds-text-muted);
	font-size: var(--ds-fs-sm);
	--ds-lines: 2;
}

.ds-product-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px var(--ds-space-sm);
	margin-top: 2px;
}

.ds-product-card__price {
	font-size: var(--ds-fs-sm);
}

.ds-product-card__price del {
	font-size: 0.9em;
}

.ds-product-card__rating {
	font-size: 11px;
}

.ds-product-card__footer {
	margin-top: auto;
	padding-top: var(--ds-space-sm);
}

.ds-product-card__footer .added_to_cart {
	display: inline-block;
	margin-top: var(--ds-space-xs);
	font-size: var(--ds-fs-xs);
	font-weight: 600;
}

/* Hover effects only where hovering exists. */
@media (hover: hover) {
	.ds-product-card:hover .ds-product-card__img {
		transform: scale(1.03);
	}
}

/* ==========================================================================
   Phones (< 768px)
   ========================================================================== */

@media (max-width: 767.98px) {
	/* Compact: 2 per row, quick add on the photo, no big button. */
	.ds-cards-m--compact .ds-product-card__footer,
	.ds-cards-m--compact .ds-product-card__excerpt,
	.ds-cards-m--compact .ds-product-card__cat {
		display: none;
	}

	.ds-cards-m--compact .ds-product-card__title {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.ds-cards-m--compact .ds-badge {
		padding: 0.2rem 0.5rem;
		font-size: 10px;
	}

	.ds-cards-m--compact .ds-badge:nth-child(n + 3) {
		display: none;
	}

	/* Horizontal: photo left, details right, one per row. */
	.ds-cards-m--horizontal .ds-product-card {
		display: grid;
		grid-template-columns: 112px minmax(0, 1fr);
		gap: var(--ds-space-md);
		align-items: start;
	}

	.ds-cards-m--horizontal .ds-product-card__media {
		aspect-ratio: 1;
	}

	.ds-cards-m--horizontal .ds-product-card__body {
		padding-top: 0;
	}

	.ds-cards-m--horizontal .ds-product-card__quick,
	.ds-cards-m--horizontal .ds-badge:not(:first-child) {
		display: none;
	}

	.ds-cards-m--horizontal .ds-product-card__excerpt {
		display: -webkit-box;
		--ds-lines: 1;
		font-size: var(--ds-fs-xs);
	}

	.ds-cards-m--horizontal .ds-product-card__footer {
		padding-top: var(--ds-space-xs);
	}

	.ds-cards-m--horizontal .ds-product-card__footer .ds-button {
		display: inline-flex;
		width: auto;
		min-height: 36px;
		padding: 0.5rem 1rem;
		font-size: var(--ds-fs-xs);
	}

	.ds-cards-m--horizontal .ds-badge {
		padding: 0.15rem 0.4rem;
		font-size: 9px;
	}

	.ds-cards-m--horizontal.ds-products:not(.ds-scroller) {
		gap: var(--ds-space-lg);
	}
}

/* ==========================================================================
   Desktop & tablet (≥ 768px)
   ========================================================================== */

@media (min-width: 768px) {
	/* Minimal: photo, name, price; quick add appears on hover. */
	.ds-cards--minimal .ds-product-card__footer,
	.ds-cards--minimal .ds-product-card__rating,
	.ds-cards--minimal .ds-product-card__excerpt {
		display: none;
	}

	/* Luxury: serif name, second photo and button revealed on hover. */
	.ds-cards--luxury .ds-product-card {
		--_title-font: var(--ds-font-heading);
		--_title-size: var(--ds-fs-lg);
		--_title-weight: 500;
	}

	.ds-cards--luxury .ds-product-card__quick {
		display: none;
	}

	.ds-cards--luxury .ds-product-card__footer .ds-button {
		--_bg: transparent;
		--_fg: var(--ds-primary);
		--_border: var(--ds-primary);
	}

	.ds-cards--luxury .ds-product-card__footer .ds-button:hover,
	.ds-cards--luxury .ds-product-card__footer .ds-button.added {
		--_bg: var(--ds-primary);
		--_fg: var(--ds-on-primary);
	}

	/* Featured: larger type, description and a solid button. */
	.ds-cards--featured .ds-product-card {
		--_title-font: var(--ds-font-heading);
		--_title-size: var(--ds-fs-xl);
		--_title-weight: 500;
	}

	.ds-cards--featured .ds-product-card__excerpt {
		display: -webkit-box;
		--ds-lines: 3;
	}

	.ds-cards--featured .ds-product-card__quick {
		display: none;
	}

	.ds-cards--featured .ds-product-card__price {
		font-size: var(--ds-fs-md);
	}
}

@media (min-width: 768px) and (hover: hover) {
	.ds-cards--luxury .ds-product-card:hover .ds-product-card__img--hover {
		opacity: 1;
	}

	.ds-cards--luxury .ds-product-card__footer {
		opacity: 0;
		transform: translateY(4px);
		transition:
			opacity var(--ds-dur) var(--ds-ease),
			transform var(--ds-dur) var(--ds-ease);
	}

	.ds-cards--luxury .ds-product-card:hover .ds-product-card__footer,
	.ds-cards--luxury .ds-product-card:focus-within .ds-product-card__footer {
		opacity: 1;
		transform: none;
	}

	.ds-cards--minimal .ds-product-card__quick {
		opacity: 0;
		transform: translateY(6px);
		transition:
			opacity var(--ds-dur) var(--ds-ease),
			transform var(--ds-dur) var(--ds-ease);
	}

	.ds-cards--minimal .ds-product-card:hover .ds-product-card__quick,
	.ds-cards--minimal .ds-product-card__quick:focus-visible,
	.ds-cards--minimal .ds-product-card__quick.loading,
	.ds-cards--minimal .ds-product-card__quick.added {
		opacity: 1;
		transform: none;
	}
}

/* Product rows in carousels (home, related): cards size to the scroller. */
.ds-products.ds-scroller {
	--ds-item-w: 46%;
}

@media (min-width: 768px) {
	.ds-products.ds-scroller {
		--ds-item-w: calc((100% - var(--ds-space-md) * 2) / 3);
	}
}

@media (min-width: 1024px) {
	.ds-products.ds-scroller {
		--ds-item-w: calc((100% - var(--ds-space-md) * 3) / 4);
	}
}