/* Protein Paradise - Blockbuster deal banners */

.pp-db{background:#fff;padding:34px 0 10px;}
.pp-db *,.pp-db *::before,.pp-db *::after{box-sizing:border-box;}
.pp-db-in{max-width:1240px;margin:0 auto;padding:0 20px;}

.pp-db-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}

/* ---------- card ---------- */
.pp-db .pp-db-card{
	position:relative;
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	aspect-ratio:530/740;
	padding:24px 22px 0;
	border-radius:12px;
	overflow:hidden;
	isolation:isolate;
	text-decoration:none;
	background:linear-gradient(160deg,var(--pp-db-bg1) 0%,var(--pp-db-bg2) 100%);
	color:var(--pp-db-fg);
	transition:box-shadow .22s ease,transform .22s ease;
}
.pp-db .pp-db-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(20,20,20,.16);}
.pp-db .pp-db-card:focus-visible{outline:3px solid #141414;outline-offset:3px;}

/* soft sheen so flat gradients do not look like plain blocks */
.pp-db .pp-db-card::before{
	content:"";position:absolute;top:-28%;right:-22%;width:72%;height:62%;
	border-radius:50%;background:var(--pp-db-sheen);pointer-events:none;
}

.pp-db .pp-db-copy{position:relative;z-index:5;}
.pp-db .pp-db-eyebrow{display:block;font-size:10.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--pp-db-soft);margin:0 0 9px;line-height:1;}
.pp-db .pp-db-name{margin:0 0 14px;font-size:21px;line-height:1.2;font-weight:800;letter-spacing:-.01em;color:var(--pp-db-fg);}

.pp-db .pp-db-offerbox{display:inline-block;padding:9px 13px 10px;border-radius:9px;background:var(--pp-db-box);}
.pp-db .pp-db-upto{display:block;font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--pp-db-boxsoft);line-height:1;margin:0 0 5px;}
.pp-db .pp-db-pct{display:block;font-size:26px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--pp-db-boxfg);font-variant-numeric:tabular-nums;}

.pp-db .pp-db-code{display:inline-block;margin:10px 0 0;padding:6px 10px;border-radius:6px;background:var(--pp-db-chip);color:var(--pp-db-chipfg);font-size:11px;font-weight:800;letter-spacing:.06em;line-height:1;}

.pp-db .pp-db-from{margin:12px 0 0;font-size:12.5px;font-weight:600;color:var(--pp-db-soft);line-height:1.3;}
.pp-db .pp-db-from .amount{color:var(--pp-db-fg);font-weight:800;}

.pp-db .pp-db-cta{display:inline-flex;align-items:center;gap:6px;margin:14px 0 0;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--pp-db-fg);line-height:1;}
.pp-db .pp-db-cta svg{transition:transform .22s ease;}
.pp-db .pp-db-card:hover .pp-db-cta svg{transform:translateX(4px);}

/* ---------- product shots ---------- */
.pp-db .pp-db-shots{position:absolute;left:0;right:0;bottom:0;height:53%;pointer-events:none;}
/* Catalogue photos are shot on white. Multiplying them onto the light gradient
   drops that white away, so the product reads as a cut-out. */
.pp-db .pp-db-shot{position:absolute;bottom:-4%;display:block;object-fit:contain;object-position:bottom;mix-blend-mode:multiply;}
.pp-db .pp-db-shot-a{right:2%;width:62%;height:100%;z-index:2;}
.pp-db .pp-db-shot-b{left:2%;width:50%;height:86%;z-index:1;}
.pp-db .pp-db-card.has-one .pp-db-shot-a{right:50%;transform:translateX(50%);width:72%;}

/* a card using an uploaded creative instead of generated copy */
.pp-db .pp-db-card.is-image{padding:0;background:#f4f4f1;}
.pp-db .pp-db-card.is-image img{width:100%;height:100%;object-fit:cover;display:block;}

/* ---------- colour themes ---------- */
/* All four stay light so the multiplied product cut-outs read cleanly.
   Text, offer box and chip are identical across themes; only the wash changes. */
.pp-db .pp-db-card{
	--pp-db-fg:#141414;
	--pp-db-soft:rgba(20,20,20,.58);
	--pp-db-sheen:rgba(255,255,255,.52);
	--pp-db-box:#141414;
	--pp-db-boxfg:#F3C21A;
	--pp-db-boxsoft:rgba(255,255,255,.70);
	--pp-db-chip:rgba(20,20,20,.08);
	--pp-db-chipfg:#141414;
}
.pp-db .pp-db-t1{--pp-db-bg1:#FFF8E6;--pp-db-bg2:#FFE3A4;}
.pp-db .pp-db-t2{--pp-db-bg1:#FFF3E8;--pp-db-bg2:#FAD5B4;}
.pp-db .pp-db-t3{--pp-db-bg1:#F1F5F8;--pp-db-bg2:#D6E2EB;}
.pp-db .pp-db-t4{--pp-db-bg1:#F3F6EF;--pp-db-bg2:#DCE8D5;}

/* ---------- responsive ---------- */
@media(max-width:1199px){
	.pp-db .pp-db-name{font-size:19px;}
	.pp-db .pp-db-pct{font-size:23px;}
	.pp-db .pp-db-card{padding:20px 18px 0;}
}
@media(max-width:991px){
	.pp-db-row{grid-template-columns:repeat(2,1fr);gap:14px;}
	.pp-db .pp-db-name{font-size:21px;}
	.pp-db .pp-db-pct{font-size:26px;}
}
@media(max-width:767px){
	.pp-db{padding:26px 0 6px;}
	.pp-db-in{padding:0 16px;}
	.pp-db-row{
		display:flex;grid-template-columns:none;gap:12px;
		overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;-webkit-overflow-scrolling:touch;
		scrollbar-width:none;-ms-overflow-style:none;
		margin:0 -16px;padding:0 16px 6px;
	}
	.pp-db-row::-webkit-scrollbar{display:none;}
	.pp-db .pp-db-card{flex:0 0 66%;scroll-snap-align:start;}
	.pp-db .pp-db-name{font-size:19px;}
	.pp-db .pp-db-pct{font-size:24px;}
}
@media(max-width:420px){
	.pp-db .pp-db-card{flex-basis:76%;}
}

@media(prefers-reduced-motion:reduce){
	.pp-db .pp-db-card:hover{transform:none;}
	.pp-db .pp-db-card:hover .pp-db-cta svg{transform:none;}
}