/* HubIrish — Homepage Product Showcase (frontend)
 * Premium editorial product grid. Fully self-scoped under .hps-section so it
 * never collides with Flatsome/WooCommerce. Fixed image ratio => no CLS.
 * 4 columns desktop · 2 tablet · 2 mobile · 1 on very small screens. No carousel.
 */

.hps-section{
	--hps-green:#0b3d2e;
	--hps-green-deep:#072a20;
	--hps-cream:#f7f3e8;
	--hps-navy:#13233f;
	--hps-gold:#c8a14b;
	--hps-ink:#1d2a24;
	--hps-muted:#5d6b63;
	--hps-line:rgba(11,61,46,.12);
	--hps-radius:16px;
	box-sizing:border-box;width:100%;margin:0 auto;
	padding:clamp(26px,4vw,52px) clamp(16px,4vw,40px);
	background:
		radial-gradient(120% 120% at 100% 0%, rgba(200,161,75,.10) 0%, rgba(200,161,75,0) 45%),
		linear-gradient(165deg, var(--hps-green) 0%, var(--hps-green-deep) 100%);
	border-top:3px solid var(--hps-gold);
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	color:var(--hps-cream);
}
.hps-section *{box-sizing:border-box;}
.hps-inner{max-width:1180px;margin:0 auto;}

/* Header */
.hps-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:clamp(18px,2.4vw,28px);}
.hps-eyebrow{display:inline-block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--hps-gold);margin-bottom:8px;}
.hps-title{margin:0;font-size:clamp(22px,3.2vw,34px);line-height:1.1;font-weight:800;color:#fff;letter-spacing:-.01em;}
.hps-subtitle{margin:8px 0 0;color:rgba(247,243,232,.78);font-size:clamp(14px,1.5vw,15.5px);max-width:60ch;}
.hps-shopall{flex:0 0 auto;white-space:nowrap;text-decoration:none;font-size:13px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--hps-cream);border-bottom:2px solid var(--hps-gold);padding-bottom:3px;transition:color .15s ease;}
.hps-shopall:hover{color:var(--hps-gold);}

/* Grid: exactly 4 across on desktop, single clean row by default */
.hps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px);}

/* Card */
.hps-card{background:#fff;border:1px solid var(--hps-line);border-radius:var(--hps-radius);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.hps-card-link{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;}

/* Image tile — fixed ratio prevents layout shift; contain keeps jerseys whole */
.hps-thumb{position:relative;display:block;aspect-ratio:1/1;background:linear-gradient(160deg,#fbfaf5,#f1eee3);overflow:hidden;}
.hps-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:10px;transition:transform .35s ease;}
.hps-card:hover .hps-img{transform:scale(1.04);}
.hps-badge{position:absolute;top:10px;left:10px;z-index:2;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:rgba(11,61,46,.92);padding:4px 9px;border-radius:999px;line-height:1;}
.hps-saleflag{position:absolute;top:10px;right:10px;z-index:2;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#2a2310;background:var(--hps-gold);padding:4px 9px;border-radius:999px;line-height:1;}

/* Body */
.hps-body{display:flex;flex-direction:column;gap:7px;padding:14px 15px 16px;flex:1;}
.hps-name{font-size:14.5px;line-height:1.3;font-weight:700;color:var(--hps-ink);
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;}
.hps-card:hover .hps-name{color:var(--hps-green);}

/* Stars */
.hps-stars{position:relative;display:inline-block;font-size:13px;line-height:1;color:#d9d4c4;letter-spacing:1px;}
.hps-stars::before{content:"★★★★★";}
.hps-stars-on{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:var(--hps-gold);}
.hps-stars-on::before{content:"★★★★★";}
.hps-rcount{font-size:11px;color:var(--hps-muted);margin-left:4px;vertical-align:1px;}

/* Price */
.hps-price{font-size:15px;font-weight:800;color:var(--hps-navy);}
.hps-price del{color:var(--hps-muted);font-weight:600;opacity:.7;margin-right:6px;font-size:13px;}
.hps-price ins{text-decoration:none;color:#a8121a;}
.hps-price .woocommerce-Price-amount{white-space:nowrap;}

/* Trust */
.hps-trust{font-size:11.5px;color:var(--hps-green);font-weight:600;}

/* Button (styled span, one per card) */
.hps-btn{margin-top:auto;align-self:stretch;text-align:center;font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--hps-green);background:var(--hps-cream);border:1.5px solid rgba(11,61,46,.18);padding:9px 12px;border-radius:999px;transition:all .15s ease;}
.hps-card:hover .hps-btn{background:var(--hps-green);color:var(--hps-cream);border-color:var(--hps-green);}

/* Desktop hover lift */
@media (min-width:881px){
	.hps-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -20px rgba(11,61,46,.5);border-color:rgba(11,61,46,.22);}
}

/* Tablet: 2 per row */
@media (max-width:880px){
	.hps-grid{grid-template-columns:repeat(2,1fr);}
	.hps-head{flex-direction:column;align-items:flex-start;}
}

/* Mobile: 2 per row, tighter */
@media (max-width:600px){
	.hps-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
	.hps-body{padding:12px 12px 13px;}
	.hps-name{font-size:13.5px;}
	.hps-btn{padding:9px 8px;font-size:12px;}
}

/* Very small screens: 1 per row */
@media (max-width:380px){
	.hps-grid{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion:reduce){
	.hps-card,.hps-img,.hps-btn{transition:none;}
	.hps-card:hover{transform:none;}
	.hps-card:hover .hps-img{transform:none;}
}
