.hwpe-grid{
	display:grid;
	grid-template-columns:repeat(var(--hwpe-cols-desktop,4),minmax(0,1fr));
	align-items:stretch;
}

.hwpe-card{
	position:relative;
	display:flex;
	flex-direction:column;
	min-width:0;
	overflow:hidden;
	background:#fff;
	border:1px solid rgba(0,0,0,.08);
	border-radius:26px;
	box-shadow:0 7px 16px rgba(0,0,0,.25);
	color:#111;
	font-family:inherit;
}

.hwpe-card__top{
	position:relative;
	z-index:2;
	padding:10px 8px 9px;
	background:#ffd106;
	font-size:clamp(16px,1.6vw,25px);
	font-weight:900;
	line-height:1;
	text-align:center;
	text-transform:uppercase;
}

.hwpe-card__product-image{
	display:flex;
	align-items:center;
	justify-content:center;
	aspect-ratio:1/1;
	padding:12px 14px 4px;
	background:linear-gradient(180deg,#fff 68%,#f4f4f4 100%);
}

.hwpe-card__image{
	display:block;
	width:100%;
	height:100%;
	object-fit:contain;
}

/* Banderín negro generado completamente con CSS. */
.hwpe-card__ribbon{
	position:relative;
	z-index:2;
	display:flex;
	align-items:center;
	justify-content:center;
	width:74%;
	min-height:38px;
	margin:0 auto;
	padding:5px 12% 5px 8%;
	background:#050505;
	clip-path:polygon(0 0,76% 0,82% 28%,100% 28%,93% 100%,7% 100%);
}

.hwpe-card__discount{
	display:flex;
	align-items:baseline;
	justify-content:center;
	gap:8px;
	width:100%;
	color:#ffd106;
	font-weight:900;
	line-height:1;
	text-transform:uppercase;
}

.hwpe-card__discount strong{font-size:clamp(14px,1.45vw,23px)}
.hwpe-card__discount span{font-size:clamp(8px,.78vw,12px)}

/* Banderín inferior con degradado naranja → amarillo y forma de trapecio escaleno. */
.hwpe-card__location{
	position:relative;
	z-index:1;
	width:78%;
	margin:-1px auto 0;
	padding:7px 12% 9px 10%;
	background:linear-gradient(90deg,#ff9f00 0%,#ffc400 48%,#ffe600 100%);
	clip-path:polygon(0 0,82% 0,100% 100%,8% 100%);
	color:#111;
	font-size:clamp(12px,1.25vw,19px);
	font-weight:900;
	line-height:1.08;
	text-align:center;
	text-transform:uppercase;
}

.hwpe-card__content{
	display:flex;
	flex:1;
	flex-direction:column;
	align-items:center;
	padding:16px 14px 24px;
	text-align:center;
}

.hwpe-card__title{
	margin:0 0 8px;
	font-size:clamp(14px,1.25vw,20px);
	font-weight:800;
	line-height:1.2;
	text-transform:uppercase;
}

.hwpe-card__prices{
	display:flex;
	flex-wrap:wrap;
	align-items:baseline;
	justify-content:center;
	gap:7px;
	margin-bottom:14px;
	font-size:clamp(13px,1.12vw,18px);
	font-weight:800;
	line-height:1.2;
}

.hwpe-card__regular{
	color:#e22222;
	font-weight:600;
	text-decoration:line-through;
}

.hwpe-card__sale{
	color:#00a928;
	font-weight:900;
}

.hwpe-card__prices .woocommerce-Price-currencySymbol{font-size:.86em}

.hwpe-card__button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:32px;
	margin-top:auto;
	padding:7px 22px;
	background:#ffd106;
	color:#111;
	font-size:13px;
	font-weight:600;
	line-height:1;
	text-decoration:none;
	transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease;
}

.hwpe-card__button:hover,.hwpe-card__button:focus-visible{
	background:#111;
	color:#fff;
	box-shadow:0 5px 12px rgba(0,0,0,.18);
	transform:translateY(-1px);
}

.hwpe-card__button:focus-visible{outline:3px solid rgba(255,209,6,.55);outline-offset:3px}
.hwpe-editor-message{padding:18px;border:1px dashed #bbb;background:#fafafa;text-align:center}

@media (max-width:1024px){
	.hwpe-grid{grid-template-columns:repeat(var(--hwpe-cols-tablet,2),minmax(0,1fr))}
}

@media (max-width:767px){
	.hwpe-grid{grid-template-columns:repeat(var(--hwpe-cols-mobile,2),minmax(0,1fr))}
	.hwpe-card{border-radius:16px}
	.hwpe-card__top{padding:7px 4px 6px;font-size:clamp(11px,3.5vw,16px)}
	.hwpe-card__product-image{padding:7px 7px 2px}
	.hwpe-card__ribbon{width:88%;min-height:29px;padding:4px 9% 4px 6%}
	.hwpe-card__discount{gap:3px}
	.hwpe-card__discount strong{font-size:clamp(11px,3.7vw,16px)}
	.hwpe-card__discount span{font-size:clamp(6px,2vw,9px)}
	.hwpe-card__location{width:88%;padding:5px 9% 6px 8%;font-size:clamp(9px,3vw,13px)}
	.hwpe-card__content{padding:10px 7px 14px}
	.hwpe-card__title{font-size:clamp(10px,3.1vw,14px)}
	.hwpe-card__prices{gap:4px;margin-bottom:9px;font-size:clamp(10px,3vw,14px)}
	.hwpe-card__button{min-height:28px;padding:6px 10px;font-size:10px}
}

/* Clickable product photography */
.hwpe-card__image-link{display:block;width:100%;text-decoration:none;cursor:pointer}
.hwpe-card__image-link:focus-visible{outline:3px solid #ffd106;outline-offset:2px}