/* =============================================================================
   DKT Store — Destacados (Home Premium v3.2 · DEC-W048/W051)
   Fondo VINO var(--dkt-vino) (v3.3; antes noche) + dcards blancas de 400px con hover-reveal:
   imagen translateY(-8%) scale(.88) + panel info como OVERLAY absoluto con
   gradiente blanco (opacity/transform). ⚠️ PROHIBIDO animar flex-basis
   (causaba saltos — lección v3.1). dcard--zoom = imagen ampliada (Prudence).
   En táctil (@media hover:none) el estado revelado es FIJO.
   ============================================================================= */

.dkt-home__featured { background: var(--dkt-vino); width: 100%; }   /* v3.3: vino (antes noche #2B0518) */

.dkt-featured {
	max-width: 1180px;
	margin: 0 auto;
	padding: 84px 24px 92px;
}

/* ---------- Cabecera clara sobre noche (AA) ---------- */
.dkt-featured__head { text-align: center; margin-bottom: 44px; }
.dkt-featured__eyebrow {
	font: 600 0.78rem/1 var(--dkt-font-titles, 'Poppins', sans-serif);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #FFB8D6;
}
.dkt-featured__title {
	font-family: var(--dkt-font-titles, 'Poppins', sans-serif);
	font-size: clamp(1.7rem, 3.2vw, 2.5rem);
	font-weight: 700;
	color: var(--dkt-white);
	margin: 0.45rem 0 0;
}
.dkt-featured__arco { width: 88px; height: 14px; margin: 16px auto 0; display: block; max-width: none; }
.dkt-featured__arco path { fill: none; stroke: #FFB8D6; stroke-width: 3; stroke-linecap: round; }

.dkt-featured__empty { text-align: center; color: #D9A9C2; }

/* ---------- Grid ---------- */
.dkt-featured__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------- dcard ---------- */
.dkt-dcard {
	position: relative;
	background: var(--dkt-white);
	border-radius: 22px;
	height: 400px;
	overflow: hidden;
	box-shadow: 0 8px 24px -8px rgba(95,14,57,0.18);
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.dkt-dcard:hover,
.dkt-dcard:focus-within { transform: translateY(-6px); box-shadow: 0 26px 60px -16px rgba(95,14,57,0.26); }

/* Imagen full-card (link). El <img> lo genera WC ($product->get_image). */
.dkt-dcard__imgwrap {
	position: absolute;
	inset: 0;
	display: block;
	transition: transform 0.55s var(--ease);
}
.dkt-dcard__imgwrap img {
	position: absolute;
	inset: 16px;
	margin: auto;
	max-height: calc(100% - 32px);
	max-width: calc(100% - 32px);
	width: auto;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 16px 22px rgba(95,14,57,0.22));
}
.dkt-dcard--zoom .dkt-dcard__imgwrap img {
	inset: 2px;
	max-height: calc(100% - 4px);
	max-width: calc(100% - 4px);
	transform: scale(1.1);
}
.dkt-dcard:hover .dkt-dcard__imgwrap,
.dkt-dcard:focus-within .dkt-dcard__imgwrap { transform: translateY(-8%) scale(0.88); }

/* Panel info: OVERLAY absoluto con gradiente blanco (nunca flex-basis) */
.dkt-dcard__info {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 30px 18px 22px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 32%, #fff 100%);
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
	pointer-events: none;
}
.dkt-dcard:hover .dkt-dcard__info,
.dkt-dcard:focus-within .dkt-dcard__info { opacity: 1; transform: none; pointer-events: auto; }

/* Táctil: estado revelado FIJO (v3.2 #7) */
@media (hover: none) {
	.dkt-dcard__imgwrap { transform: translateY(-8%) scale(0.88); }
	.dkt-dcard__info { opacity: 1; transform: none; pointer-events: auto; }
}

.dkt-dcard__name { margin: 0; font-size: 1.14rem; font-weight: 600; line-height: 1.25; }
.dkt-dcard__name a { color: var(--dkt-ink); text-decoration: none; }
.dkt-dcard__name a:hover { color: var(--dkt-magenta); }
.dkt-dcard__price { margin: 0; font: 700 2rem/1 var(--dkt-font-titles, 'Poppins', sans-serif); color: var(--dkt-magenta); }
.dkt-dcard__price del { opacity: 0.55; font-size: 0.6em; }
.dkt-dcard__price ins { text-decoration: none; }
/* v3.3: sin sufijo "Incluido IVA" en las dcards del Home. SOLO aquí —
   el sufijo global de WC (shop/fichas/carrito) queda intacto. */
.dkt-dcard__price .woocommerce-price-suffix { display: none; }

/* CTA (es <a>, no le pega el clobber legacy de <button>) */
.dkt-dcard__add {
	display: inline-block;
	font: 600 0.84rem/1 var(--dkt-font-titles, 'Poppins', sans-serif);
	color: var(--dkt-white);
	background: var(--dkt-magenta);
	border-radius: 999px;
	padding: 0.75em 1.5em;
	text-decoration: none;
	transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.dkt-dcard__add:hover { background: var(--dkt-magenta-mid, #87114A); color: var(--dkt-white); transform: translateY(-1px); }
/* Feedback del AJAX nativo de WC */
.dkt-dcard__add.loading { opacity: 0.6; pointer-events: none; }
.dkt-dcard__add.added::after { content: " ✓"; }
/* WC inyecta un link "Ver carrito" tras añadir — el drawer ya se abre solo (header.js) */
.dkt-dcard__info .added_to_cart { display: none; }

/* ---------- Responsive (breakpoints canónicos DEC-W067) ---------- */
@media (max-width: 1024px) {
	.dkt-featured__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.dkt-featured__grid { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.dkt-dcard,
	.dkt-dcard__imgwrap,
	.dkt-dcard__info,
	.dkt-dcard__add { transition: none !important; }
	.dkt-dcard:hover,
	.dkt-dcard:focus-within { transform: none; }
	.dkt-dcard__add:hover { transform: none; }
}