.hwpf-wrap { margin: 1.75rem 0; }
.hwpf-card {
--hwpf-radio: 16px;
--hwpf-boton-bg: #f5a623;      
--hwpf-boton-texto: #1a1a1a;
display: flex;
gap: .9rem;
padding: .8rem;
border: 1px solid rgba(128,128,128,.28);
border-radius: var(--hwpf-radio);
background: rgba(128,128,128,.06);
align-items: center;
position: relative;   
}
@supports (background: color-mix(in srgb, currentColor 6%, transparent)) {
.hwpf-card {
background: color-mix(in srgb, currentColor 6%, transparent);
border-color: color-mix(in srgb, currentColor 22%, transparent);
}
}
.hwpf-media { flex: 0 0 clamp(120px, 32%, 210px); }
.hwpf-media-enlace { display: block; }
.hwpf-img {
width: 100%; height: auto; display: block;
border-radius: calc(var(--hwpf-radio) - 6px);
background: #fff;              
object-fit: contain; max-height: 240px;
}
.hwpf-body { flex: 1 1 auto; min-width: 0; }
.hwpf-titulo { margin: 0 0 .1rem; font-size: 1.06rem; line-height: 1.3; text-wrap: balance; }
.hwpf-titulo a { color: inherit; text-decoration: none; }
.hwpf-titulo a:hover, .hwpf-titulo a:focus-visible { text-decoration: underline; }
.hwpf-precio {
margin: 0 0 .25rem; line-height: 1.05;
display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
font-variant-numeric: tabular-nums;
}
.hwpf-precio-antes { text-decoration: line-through; opacity: .55; font-size: .95rem; }
.hwpf-precio-ahora { font-size: 1.35rem; font-weight: 700; }
.hwpf-boton {
display: inline-flex; align-items: center; justify-content: center;
padding: .6rem 1.35rem; border-radius: 999px;
background: var(--hwpf-boton-bg); color: var(--hwpf-boton-texto) !important;
font-weight: 700; font-size: .95rem; text-decoration: none !important;
transition: filter .15s ease, transform .15s ease;
}
.hwpf-boton:hover { filter: brightness(1.06); transform: translateY(-1px); }
.hwpf-boton:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (max-width: 560px) {
.hwpf-card { flex-direction: column; align-items: stretch; }
.hwpf-media { flex: 0 0 auto; max-width: 240px; margin: 0 auto; }
.hwpf-boton { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.hwpf-boton { transition: none; }
.hwpf-boton:hover { transform: none; }
}
.hwpf-tienda {
position: absolute;
right: .8rem;
bottom: .6rem;
display: block;
width: 62px;
line-height: 0;
color: inherit;
text-decoration: none !important;
opacity: .82;
transition: opacity .18s ease, transform .18s ease, filter .18s ease;
}
.hwpf-tienda-img { display: block; width: 100%; height: auto; }
.hwpf-tienda-oscuro { display: none; }
.s-dark .hwpf-tienda-claro,
.site-s-dark .hwpf-tienda-claro { display: none; }
.s-dark .hwpf-tienda-oscuro,
.site-s-dark .hwpf-tienda-oscuro { display: block; }
.hwpf-tienda:hover,
.hwpf-tienda:focus-visible {
opacity: 1;
transform: translateY(-1px);
filter: drop-shadow(0 0 6px rgba(255,153,0,.55));
}
.hwpf-tienda:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }
@media (max-width: 560px) {
.hwpf-tienda { position: static; margin: .6rem 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
.hwpf-tienda { transition: none; }
.hwpf-tienda:hover { transform: none; }
}