/* FloresYa — Product card styles (extracted from inline) */
/* ================================================================
		   WooCommerce Loop → CSS Grid (4 cols, Stitch Shop All)
		   ================================================================ */

		.woocommerce ul.products,
		.woocommerce-page ul.products {
			display: grid !important;
			grid-template-columns: repeat(4, 1fr);
			gap: 24px;
			list-style: none !important;
			padding: 0 !important;
			margin: 0 !important;
		}
		/* Resetear el li que WooCommerce flota y le pone width% */
		.woocommerce ul.products li.product,
		.woocommerce-page ul.products li.product {
			width: auto !important;
			float: none !important;
			margin: 0 !important;
			padding: 0 !important;
			/* Heredar el box-shadow del article.fy-card dentro */
			background: transparent;
			box-shadow: none;
			border-radius: 0;
			overflow: visible;
		}

		/* Tablet */
		@media (max-width: 1024px) {
			.woocommerce ul.products,
			.woocommerce-page ul.products {
				grid-template-columns: repeat(2, 1fr);
			}
		}
		/* Mobile */
		@media (max-width: 480px) {
			.woocommerce ul.products,
			.woocommerce-page ul.products {
				grid-template-columns: 1fr;
				gap: 16px;
			}
		}

		/* ================================================================
		   .fy-card — Artículo raíz
		   Base ya en design-tokens.css; aquí: overrides de li→article
		   ================================================================ */

		article.fy-card {
			display: flex;
			flex-direction: column;
			height: 100%;
		}

		/* ================================================================
		   .fy-card__image — Link-wrapper de la imagen
		   position:relative para badge + heart absolutos
		   ================================================================ */

		.fy-card__image {
			display: block;
			position: relative;
			/* aspect-ratio ya en design-tokens.css */
		}

		/* Imagen dentro del link (reemplaza el img sin clase) */
		.fy-card__img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
			transition: transform var(--fy-dur-slow, 500ms) var(--fy-ease, ease);
		}
		.fy-card:hover .fy-card__img { transform: scale(1.05); }

		/* ================================================================
		   .fy-card__badge — "Más vendido" / "Nuevo"
		   Top-left, pill, aparece siempre (no depende de hover)
		   ================================================================ */

		.fy-card__badge {
			position: absolute;
			top: 12px;
			left: 12px;
			height: 22px;
			padding: 0 10px;
			border-radius: var(--fy-r-full, 9999px);
			font-family: var(--fy-font-sans, 'Plus Jakarta Sans', sans-serif);
			font-size: 10px;
			font-weight: 700;
			letter-spacing: 0.06em;
			text-transform: uppercase;
			line-height: 22px;
			z-index: 2;
			white-space: nowrap;
		}
		.fy-card__badge--hot {
			background: var(--fy-rose, #c0284e);
			color: #fff;
		}
		.fy-card__badge--new {
			background: var(--fy-ink, #1a1a1a);
			color: #fff;
		}

		/* ================================================================
		   .fy-card__heart — Botón favorito (top-right, hover reveal)
		   Stitch: "absolute top-3 right-3 w-9 h-9 bg-white/80 opacity-0
		            group-hover:opacity-100 transition-opacity duration-150"
		   ================================================================ */

		.fy-card__heart {
			position: absolute;
			top: 10px;
			right: 10px;
			width: 36px;
			height: 36px;
			border-radius: var(--fy-r-full, 9999px);
			background: rgba(255, 255, 255, 0.82);
			backdrop-filter: blur(4px);
			-webkit-backdrop-filter: blur(4px);
			border: none;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			color: var(--fy-ink-soft, #4a4a4a);
			/* Oculto por default, aparece en hover del card */
			opacity: 0;
			transform: scale(0.8);
			transition:
				opacity var(--fy-dur-fast, 150ms) var(--fy-ease, ease),
				transform var(--fy-dur-fast, 150ms) var(--fy-ease, ease),
				color var(--fy-dur-fast, 150ms) var(--fy-ease, ease);
			z-index: 3;
		}
		.fy-card__heart .material-symbols-outlined { font-size: 18px; }

		.fy-card:hover .fy-card__heart {
			opacity: 1;
			transform: scale(1);
		}
		.fy-card__heart:hover,
		.fy-card__heart:focus-visible {
			color: var(--fy-rose, #c0284e);
		}
		.fy-card__heart:focus-visible {
			outline: none;
			box-shadow: var(--fy-shadow-focus, 0 0 0 3px rgba(192,40,78,0.25));
		}
		/* Estado activo (wishlisted) */
		.fy-card__heart.is-active {
			opacity: 1;
			transform: scale(1);
			color: var(--fy-rose, #c0284e);
		}
		.fy-card__heart.is-active .material-symbols-outlined {
			font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
		}

		/* ================================================================
		   .fy-card__body — Padding + flex column
		   ================================================================ */

		.fy-card__body {
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 6px;
			padding: 14px 16px 16px;
		}

		/* Título — link sin subrayado */
		.fy-card__title-link {
			text-decoration: none;
			color: inherit;
		}
		.fy-card__title {
			font-size: 15px;
			font-weight: 600;
			color: var(--fy-ink, #1a1a1a);
			margin: 0;
			line-height: 1.3;
			transition: color var(--fy-dur-fast, 150ms) ease;
		}
		.fy-card__title-link:hover .fy-card__title {
			color: var(--fy-rose, #c0284e);
		}

		/* Precio — rose bold (sobreescribe WC span.price) */
		.fy-card__price,
		.fy-card__price .woocommerce-Price-amount {
			font-size: 18px !important;
			font-weight: 700 !important;
			color: var(--fy-rose, #c0284e) !important;
			margin: 0;
		}
		.fy-card__price del {
			font-size: 13px !important;
			font-weight: 400 !important;
			color: var(--fy-ink-muted, #8a8a8a) !important;
			margin-right: 4px;
		}

		/* ================================================================
		   .fy-card__atc — Botón ATC, ancho completo, push al fondo
		   El estilo base (pill, rose, glow) viene de .fy-btn--primary
		   en design-tokens.css; aquí solo controlamos layout del card
		   ================================================================ */

		.fy-card__atc.fy-btn {
			width: 100%;
			margin-top: auto;
			padding-top: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 6px;
		}
		.fy-card__atc .material-symbols-outlined { font-size: 18px; }

		/* Estado loading (AJAX add-to-cart WooCommerce) */
		.fy-card__atc.loading {
			opacity: 0.7;
			pointer-events: none;
		}
		.fy-card__atc.added {
			background: var(--fy-rose-dark, #9c1e3f) !important;
		}

		/* ================================================================
		   Título de sección Shop (h2.woocommerce-loop-category__title, etc.)
		   ================================================================ */

		.woocommerce-products-header__title,
		.woocommerce-loop-product__title {
			/* Resetear en caso de que Blocksy los sobreescriba */
			margin: 0;
			padding: 0;
		}