/*
 * Stephy100 - ProductCard (Sprint 0)
 * Traduction fidele de la maquette Claude Design. Variables de design
 * dediees a ce composant (prefixees --s100-card-*) pour rester isolees
 * du reste du site tant que le design system global n'est pas realigne.
 */

:root {
	--s100-card-bg: #FBF0E8;
	--s100-card-text: #241E1B;
	--s100-card-text-secondary: #4A4038;
	--s100-card-accent: #C97B4A;
	--s100-card-bg-soft: #F3E4D8;
	--s100-card-bg-placeholder: #EDE1D5;
	--s100-card-badge-tan-bg: #F0C9AC;
	--s100-card-badge-tan-text: #5A3821;
	--s100-card-badge-green-bg: #DCE9DC;
	--s100-card-badge-green-text: #3C6B3E;
	--s100-card-white: #FFFDFB;
}

.s100-card {
	width: 100%;
	max-width: 270px;
	font-family: 'Inter', sans-serif;
}

.s100-card.reveal-on-scroll {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.s100-card.reveal-on-scroll.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.s100-card.reveal-on-scroll {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Consigne de la marque : ne jamais recadrer les photos produit -- afficher
   l'image WooCommerce telle qu'elle a ete uploadee, sans crop force. Plus de
   aspect-ratio fixe ni d'object-fit:cover : la hauteur de la carte s'adapte
   au ratio naturel de chaque photo (les cartes d'une meme rangee peuvent donc
   avoir des hauteurs legerement differentes, c'est attendu). */
.s100-card__media-wrap {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--s100-card-bg-placeholder);
}

.s100-card__media-link {
	display: block;
	width: 100%;
	text-decoration: none;
}

.s100-card__media {
	width: 100%;
	overflow: hidden;
}

.s100-card__img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 500ms ease-out;
}

.s100-card__media-wrap:hover .s100-card__img {
	transform: scale(1.04);
}

/* Badges haut-gauche */
.s100-card__badges {
	position: absolute;
	top: 14px;
	left: 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	pointer-events: none;
	z-index: 2;
}

.s100-badge {
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	letter-spacing: 0.01em;
	padding: 5px 10px;
	line-height: 1.4;
	width: fit-content;
	border-radius: 4px;
}

.s100-badge--tan {
	background: var(--s100-card-badge-tan-bg);
	color: var(--s100-card-badge-tan-text);
}

.s100-badge--green {
	background: var(--s100-card-badge-green-bg);
	color: var(--s100-card-badge-green-text);
}

.s100-badge--dark {
	background: #241E1B;
	color: #FFFDFB;
}

/* Coeur wishlist haut-droite */
.s100-card__wishlist {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255, 253, 251, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 3;
	transition: transform 0.2s ease;
}

.s100-card__wishlist:hover {
	transform: scale(1.06);
}

.s100-card__heart-icon {
	fill: none;
	stroke: var(--s100-card-text);
	stroke-width: 1.6;
	transition: fill 0.2s ease, stroke 0.2s ease;
}

.s100-card__wishlist.is-active .s100-card__heart-icon {
	fill: var(--s100-card-accent);
	stroke: var(--s100-card-accent);
}

/* Barre bas - swatches + ajouter au panier, cachee par defaut */
.s100-card__hover-bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--s100-card-white);
	padding: 10px 12px 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	transform: translateY(100%);
	transition: transform 0.35s ease;
	z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
	.s100-card__media-wrap:hover .s100-card__hover-bar {
		transform: translateY(0);
	}
}

.s100-card__swatches {
	display: flex;
	align-items: center;
	gap: 6px;
}

.s100-card__swatch {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px rgba(36, 30, 27, 0.15);
}

.s100-card__swatch-extra {
	font-size: 10px;
	color: var(--s100-card-text-secondary);
	margin-left: 2px;
}

.s100-card__add-btn {
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--s100-card-text);
	text-decoration: none;
	cursor: pointer;
	background: none;
	border: none;
	font-family: 'Inter', sans-serif;
}

.s100-card__info-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.s100-card__info {
	padding-top: 16px;
}

.s100-card__name {
	font-size: 15px !important;
	font-weight: 400;
	margin: 0 0 6px;
	color: var(--s100-card-text);
	font-family: "Inter", sans-serif !important;
}

.s100-card__price {
	font-family: 'Cormorant Garamond', serif;
	font-size: 18px;
	margin: 0;
	color: var(--s100-card-accent);
}

/* WooCommerce entoure parfois le prix d'un <ins> (normalement reserve a
   l'affichage promo) meme sans prix barre reel sur ce produit -- <ins>/<del>
   sont soulignes/barres par defaut par le navigateur, ce qui donnait un faux
   air de prix promotionnel. On neutralise cette decoration par defaut. */
.s100-card__price ins,
.s100-card__price del,
.s100-card__price ins *,
.s100-card__price del * {
	text-decoration: none;
}

/* Grille bestsellers (touche mobile: 2 colonnes) */
.s100-card-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

@media (max-width: 767px) {
	.s100-card-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	.s100-card {
		max-width: none;
	}

	/* Tactile : la barre "ajouter au panier" reste visible en permanence
	   sur mobile (pas de hover), pour ne pas cacher un CTA inatteignable. */
	.s100-card__hover-bar {
		transform: translateY(0);
		position: static;
		background: transparent;
		padding: 8px 0 0;
	}

	.s100-card__add-btn {
		display: none;
	}
}