/**
 * Boutique — Product card
 *
 * @package parfumsabsoluta
 * @since   1.0.0
 */


/* ================================================================
   CARD CONTAINER
   ================================================================ */

.pa-boutique__card {
	position: relative;
	display: flex;
	flex-direction: column;
}


/* ================================================================
   IMAGE ZONE
   ================================================================ */

.pa-boutique__card-link {
	display: block;
	text-decoration: none;
}

.pa-boutique__card-img {
	position: relative;
	aspect-ratio: var(--pa-card-img-ratio);
	overflow: hidden;
	/* Transparent, not --color-primary-3: a backing colour darker than the
	   page would read as a rectangle exactly where the edge dissolve is
	   trying to hide one. */
	background: transparent;
	border-radius: 2px;
}

.pa-boutique__card-img-real {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* ── Portrait ranges: Parfums d'Intérieur + Brumes ──
   Prestige is photographed SQUARE (1024x1024 sources) and sits in the 1/1
   frame exactly as shot. These two ranges are photographed PORTRAIT
   (1006x1536), and the square frame was being fed by WooCommerce's
   `woocommerce_thumbnail` — a HARD 310x310 crop. WordPress was therefore
   throwing away the top and bottom of every bottle and serving the enlarged
   middle: that, not any CSS, was the "too zoomed in". card.php now requests
   an uncropped size for these two ranges (see the has_term() branch there),
   and the frame below carries the source's own ratio, so object-fit: cover
   crops nothing and the photograph keeps the air the photographer left in it.

   Ratio is the exact source ratio, not a rounded 2/3 — at 2/3 the frame is
   fractionally wider than the file and cover would shave the top and bottom
   again, which is the whole bug in miniature. */

.pa-boutique__section--parfums-interieur .pa-boutique__card-img,
.pa-boutique__section--brumes .pa-boutique__card-img {
	aspect-ratio: 1006 / 1536;
}


/* ── Edge dissolve ──
   Four gradients painted in the page's OWN background colour over the
   photo's outer edges, so each image melts into the page instead of
   ending on a hard rectangle. Bottom is weighted hardest: the photo
   dissolves down into its caption rather than stopping above it. A fifth,
   radial pass takes the corners, which read brightest against black.

   A painted scrim, deliberately — not mask-image. This sits on the static
   container while the <img> beneath it scales on hover, and a mask here
   would force the whole group to re-rasterise every frame: the same trap
   as putting filter: on an animating layer. */

.pa-boutique__card-img::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: var(--pa-image-dissolve);
	transition: opacity 400ms ease;
}


/* ── Hover: the scrim lifts and the photo steps forward ── */

@media (hover: hover) and (pointer: fine) {
	.pa-boutique__card-link:hover .pa-boutique__card-img::after {
		opacity: 0.5;
	}

	.pa-boutique__card-link:hover .pa-boutique__card-img-real {
		transform: scale(1.045);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pa-boutique__card-img-real,
	.pa-boutique__card-img::after {
		transition: none;
	}

	.pa-boutique__card-link:hover .pa-boutique__card-img-real {
		transform: none;
	}
}

/* ── Hover slideshow ──
   Track is injected by boutique-card-hover.js on first hover. Sits at
   z-index 0: beneath the dissolve scrim (1), the watermark (2) and the
   "Voir le produit" overlay (3), so the images slide BEHIND the callout. */

.pa-boutique__card-slides {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
	width: 100%;
	height: 100%;
	transform: translateX(0);
	transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
}

.pa-boutique__card-slide {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The featured <img> hides only once the track exists and is running, so a
   card with no gallery — or before the 1.5s dwell — is untouched. */
.pa-boutique__card.is-slideshow .pa-boutique__card-img-real {
	opacity: 0;
}

.pa-boutique__card-img-real {
	transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1),
		opacity 300ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.pa-boutique__card-slides {
		transition: none;
	}
}


/* ── Decorative N° watermark ── */

.pa-boutique__card-num {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--font-display);
	font-size: clamp(80px, 12vw, 140px);
	font-weight: 300;
	color: rgba(var(--color-accent-rgb), 0.06);
	pointer-events: none;
	line-height: 1;
	/* Above the edge-dissolve scrim (1), below the hover overlay (3). */
	z-index: 2;
}


/* ── Hover overlay (desktop only) ── */

.pa-boutique__card-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Radial, not a flat fill: a uniform rectangle at 0.85 would reinstate
	   the hard edge the dissolve just removed. Densest at the centre where
	   the CTA sits, lightest at the perimeter where the page shows through. */
	background: radial-gradient(80% 62% at 50% 50%,
		rgba(var(--color-primary-rgb), 0.9) 0%,
		rgba(var(--color-primary-rgb), 0.74) 62%,
		rgba(var(--color-primary-rgb), 0.46) 100%);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 200ms ease, transform 300ms ease;
	pointer-events: none;
	z-index: 3;
}

@media (hover: hover) and (pointer: fine) {
	.pa-boutique__card-link:hover .pa-boutique__card-overlay {
		opacity: 1;
		transform: translateY(0);
	}
}

.pa-boutique__card-cta {
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--color-accent);
}

.pa-boutique__card-arrow {
	margin-left: 6px;
}


/* ================================================================
   INFO ZONE
   ================================================================ */

.pa-boutique__card-info {
	padding: 12px 0 0;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.pa-boutique__card-eyebrow {
	font-family: var(--font-body);
	font-size: 8px;
	font-weight: 400;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--color-muted);
	margin: 0 0 4px;
}

.pa-boutique__card-family {
	font-family: var(--font-body);
	font-size: 9px;
	font-weight: 400;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-accent);
	margin: 0 0 6px;
}

.pa-boutique__card-name {
	font-family: var(--font-display);
	font-size: clamp(16px, 2vw, 20px);
	font-weight: 400;
	color: var(--color-neutral);
	margin: auto 0 8px;
	line-height: 1.3;
}

.pa-boutique__card-name a {
	color: inherit;
	text-decoration: none;
}

.pa-boutique__card-name a:hover {
	color: var(--color-accent);
}


/* ── Footer: price + Ajouter ── */

.pa-boutique__card-foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.pa-boutique__card-price {
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.5px;
	color: var(--color-accent);
}

.pa-boutique__card-add {
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--color-accent);
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 4px 0;
	text-decoration: none;
	transition: opacity 0.2s ease;
	white-space: nowrap;
}

.pa-boutique__card-add:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pa-boutique__card-add[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
	text-decoration: none;
}

.pa-boutique__card-add span[aria-hidden] {
	margin-right: 2px;
}


/* ================================================================
   RESPONSIVE TWEAKS
   ================================================================ */

@media (max-width: 600px) {
	.pa-boutique__card-name {
		font-size: 15px;
	}

	.pa-boutique__card-foot {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
}