/* Homepage product sections.
 *
 * The card below is rebuilt from the supplied reference screenshot. Every card
 * dimension is expressed in cqw (1cqw = 1% of the card's own width), so one card
 * keeps the reference proportions whether the grid shows two columns or four.
 * Reference card: 477 x 848 px, header 288 (60.4% of the width), body padding
 * 8% of the width. No stacked !important overrides live in this file.
 */

.pp-product-section { padding: 28px 0 36px; background: var(--pp-section-bg, #f5f4fa); }
.pp-product-section > .pp-container { min-width: 0; }
.pp-product-section .pp-section-empty { margin:0; padding:22px 18px; border:1px dashed #d8dce6; border-radius:16px; background:#fff; color:#667086; font-size:13px; text-align:center; }
.pp-product-section .pp-section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 18px; padding:12px 16px; border-radius:16px; background:var(--pp-section-header-bg, transparent); }
.pp-product-section .pp-section-head > div { min-width:0; }
.pp-product-section .pp-section-head h2 { margin:0; color:#11172a; font-size:clamp(18px,2vw,25px); line-height:1.55; }
.pp-product-section .pp-section-head span { display:none; }
.pp-product-section .pp-section-head > a { flex:0 0 auto; color:#5364c9; font-size:12px; font-weight:700; text-decoration:none; }
.pp-product-section .pp-section-products { display:grid !important; grid-template-columns:repeat(var(--pp-columns,4),minmax(0,1fr)); align-items:stretch; gap:18px; width:100%; max-width:100%; min-width:0; overflow:visible; padding:0; direction:rtl; }

/* ---------------------------------------------------------------- card shell */
/* Some legacy stylesheets on this theme set content-box on these elements, which
   silently broke the widths and paddings below. Keep the card self-contained. */
.pp-product-section .pp-section-card,
.pp-product-section .pp-section-card *,
.pp-product-section .pp-section-card *::before,
.pp-product-section .pp-section-card *::after { box-sizing: border-box; }

.pp-product-section .pp-section-card {
	container-type: inline-size;
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 100%;
	/* the reference card is 477 x 848; content may still grow a card taller */
	aspect-ratio: 477 / 848;
	overflow: hidden;
	border: 0;
	/* percentages keep the 55px/477px reference radius on the container itself,
	   where cqw would resolve against an outer container instead. */
	border-radius: 11.5% / 6.5%;
	background: #fff;
	box-shadow: 0 18px 40px rgba(27,38,84,.10), 0 2px 6px rgba(27,38,84,.05);
}

/* ------------------------------------------------------------------- header */
.pp-product-section .pp-section-card .pc-cover {
	position: relative;
	display: block;
	width: 100%;
	flex: 0 0 auto;
	min-height: 0;
	margin: 0;
	overflow: hidden;
	border: 0;
	border-radius: 0;
	aspect-ratio: 477 / 288;
	background: linear-gradient(45deg, var(--c1,#6b76bd) 0%, var(--c2,#101538) 100%);
	text-decoration: none;
}
/* star field */
.pp-product-section .pp-section-card .pc-cover::before {
	content:"";
	position:absolute;
	inset:0;
	background-image: radial-gradient(circle, rgba(255,255,255,.9) 0 .5cqw, transparent .55cqw);
	background-size: 11cqw 11cqw;
	opacity:.16;
	pointer-events:none;
}
.pp-product-section .pp-section-card .pp-card-header { position:absolute; inset:0; padding:0; background:transparent; color:#fff; }
.pp-product-section .pp-section-card .pc-wm {
	position:absolute;
	left:0;
	right:0;
	bottom:-1.5cqw;
	z-index:1;
	overflow:hidden;
	color:rgba(255,255,255,.13);
	font-size:33cqw;
	font-weight:900;
	line-height:1;
	letter-spacing:-.03em;
	white-space:nowrap;
	text-align:left;
	direction:ltr;
}
/* product logo tile, centred in the header */
.pp-product-section .pp-section-card .btile {
	position:absolute;
	top:16.8cqw;
	left:50%;
	z-index:2;
	width:29.4cqw;
	height:29.4cqw;
	transform:translateX(-50%);
	overflow:hidden;
	border-radius:24%;
	background:#fff;
	box-shadow:0 2cqw 4cqw rgba(9,15,45,.30);
}
.pp-product-section .pp-section-card .btile picture,
.pp-product-section .pp-section-card .btile img { display:block; width:100%; height:100%; object-fit:contain; }
.pp-product-section .pp-section-card .btile .pp-category-placeholder { display:grid; width:100%; height:100%; place-items:center; }

/* ------------------------------------------------------ delivery/badge pills */
.pp-product-section .pp-section-card .pc-tags {
	position:absolute;
	top:5cqw;
	right:5cqw;
	left:5cqw;
	z-index:3;
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:2cqw;
}
.pp-product-section .pp-section-card .pill {
	display:inline-flex;
	align-items:center;
	gap:1.6cqw;
	height:11cqw;
	padding:0 3.8cqw;
	border:.4cqw solid rgba(255,255,255,.45);
	border-radius:999px;
	background:rgba(11,16,40,.50);
	color:#fff;
	font-size:6.3cqw;
	font-weight:700;
	line-height:1;
	white-space:nowrap;
}
.pp-product-section .pp-section-card .pill-time { order:1; }
.pp-product-section .pp-section-card .pill-time svg { flex:0 0 auto; width:6.3cqw; height:6.3cqw; margin:0; }
.pp-product-section .pp-section-card .pill-badge { order:2; border-color:#fff; background:#fff; color:#263044; }

/* --------------------------------------------------------------------- body */
.pp-product-section .pp-section-card .pc-body {
	display:flex;
	flex:1 1 auto;
	flex-direction:column;
	min-width:0;
	min-height:0;
	padding:6.3cqw 8cqw 5.7cqw;
	direction:rtl;
	text-align:right;
}
.pp-product-section .pp-section-card .pc-eyebrow {
	min-width:0;
	margin:0 0 5cqw;
	overflow:hidden;
	color:#232c47;
	font-size:6.3cqw;
	font-weight:800;
	line-height:1.45;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.pp-product-section .pp-section-card .pc-company { display:none; }
.pp-product-section .pp-section-card .pc-title {
	display:-webkit-box;
	min-width:0;
	min-height:3.8em;
	margin:0;
	overflow:hidden;
	color:#141c33;
	font-size:8.4cqw!important;
	font-weight:800;
	line-height:1.9;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}
.pp-product-section .pp-section-card .pc-title a { color:inherit; text-decoration:none; }
.pp-product-section .pp-section-card .feat { display:grid; gap:1.6cqw; margin:2.5cqw 0 0; padding:0; list-style:none; }
.pp-product-section .pp-section-card .feat li { display:flex; align-items:flex-start; min-width:0; gap:1.6cqw; color:#536077; font-size:4.6cqw; line-height:1.65; }
.pp-product-section .pp-section-card .pp-card-benefit-text { min-width:0; overflow-wrap:anywhere; }
.pp-product-section .pp-section-card .ck { display:inline-grid; flex:0 0 3.4cqw; width:3.4cqw; height:3.4cqw; place-items:center; border-radius:50%; background:#e7f8f1; color:#09a56c; }
.pp-product-section .pp-section-card .ck svg { width:2.2cqw; height:2.2cqw; }

/* ------------------------------------------------ price + CTA (bottom block) */
/* Negative inline margins let the dashed rule run edge to edge like the reference. */
.pp-product-section .pp-section-card .pc-foot {
	display:flex;
	flex-direction:column;
	align-items:stretch;
	gap:3.6cqw;
	margin:auto -5cqw 0;
	padding:4.5cqw 5cqw 0;
	border-top:.45cqw dashed #dfe0e6;
}
.pp-product-section .pp-section-card .pc-price {
	min-width:0;
	color:#141c33;
	font-size:13.5cqw!important;
	white-space:nowrap;
	font-weight:900;
	line-height:1.25;
	text-align:center;
}
.pp-product-section .pp-section-card .pc-price del { display:block; color:#9aa1b1; font-size:8.4cqw; font-weight:600; text-decoration:line-through; }
.pp-product-section .pp-section-card .pc-price ins,
.pp-product-section .pp-section-card .pc-price ins * { color:inherit; font-size:inherit!important; font-weight:inherit; text-decoration:none; }
.pp-product-section .pp-section-card .pc-price .pp-price-unit {
	margin-inline-start:1.2cqw;
	color:#8b92a3;
	font-size:7.8cqw!important;
	font-weight:700;
}
.pp-product-section .pp-section-card .pc-price .screen-reader-text { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.pp-product-section .pp-section-card .pc-btn {
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	min-height:22cqw;
	padding:1cqw 4cqw;
	border:0;
	border-radius:6.3cqw;
	background:linear-gradient(135deg,#141b45 0%,#2f40a0 100%);
	color:#fff;
	font-size:9.6cqw;
	font-weight:800;
	line-height:1.3;
	text-align:center;
	text-decoration:none;
	box-shadow:0 1.6cqw 3.4cqw rgba(31,45,110,.28);
}
.pp-product-section .pp-section-card .pc-btn:hover,
.pp-product-section .pp-section-card .pc-btn:focus { background:linear-gradient(135deg,#0f1536 0%,#273789 100%); color:#fff; }
.pp-product-section .pp-section-card .pp-card-cta-label { order:1; }
.pp-product-section .pp-section-card .pp-card-cta-icon { order:2; font-size:7cqw; line-height:1; }

/* --------------------------------------------------------- unavailable state */
.pp-product-section .pp-section-card.pp-card-unavailable { box-shadow:0 12px 28px rgba(27,38,84,.07); }
.pp-product-section .pp-section-card.pp-card-unavailable .pc-cover { background:linear-gradient(45deg,#eef1f6 0%,#dbe2ec 100%); }
.pp-product-section .pp-section-card.pp-card-unavailable .pc-cover::before { opacity:0; }
.pp-product-section .pp-section-card.pp-card-unavailable .pc-wm { color:rgba(71,85,105,.10); }
.pp-product-section .pp-section-card.pp-card-unavailable .btile { opacity:.66; box-shadow:0 1cqw 2.4cqw rgba(71,85,105,.12); }
.pp-product-section .pp-section-card.pp-card-unavailable .pc-title { color:#687386; }
.pp-product-section .pp-section-card.pp-card-unavailable .pc-price { color:#687386; }
.pp-product-section .pp-section-card .pp-card-cta-disabled,
.pp-product-section .pp-section-card .pp-card-cta-disabled:hover { background:#eef1f5; color:#8993a2; box-shadow:none; cursor:not-allowed; }

/* ------------------------------------------------------------------ columns */
@media (min-width:1001px) {
 .pp-product-section .pp-section-products { grid-template-columns:repeat(var(--pp-columns,4),minmax(0,1fr)) !important; }
}
@media (max-width:1000px) and (min-width:651px) {
 .pp-product-section .pp-section-products { gap:14px; grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:650px) {
 .pp-product-section { padding:18px 0 26px; }
 .pp-product-section > .pp-container { width:calc(100% - 24px); }
 .pp-product-section .pp-section-head { margin-bottom:11px; padding:8px 10px; }
 .pp-product-section .pp-section-head h2 { font-size:16px; }
 .pp-product-section .pp-section-head > a { font-size:10px; }
 .pp-product-section .pp-section-products { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px; }
}
@media (max-width:360px) { .pp-product-section .pp-section-products { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } }

/* --------------------------------------------------------------- dark theme */
html[data-theme="dark"] .pp-product-section { background:#101211; }
html[data-theme="dark"] .pp-product-section .pp-section-head h2 { color:#f4f4f4; }
html[data-theme="dark"] .pp-product-section .pp-section-card { background:#1b1d1c; box-shadow:0 18px 40px rgba(0,0,0,.35); }
html[data-theme="dark"] .pp-product-section .pp-section-card .pc-title { color:#f3f3f3; }
html[data-theme="dark"] .pp-product-section .pp-section-card .pc-price { color:#f3f3f3; }
html[data-theme="dark"] .pp-product-section .pp-section-card .pc-price .pp-price-unit { color:#9aa1b1; }
html[data-theme="dark"] .pp-product-section .pp-section-card .pc-eyebrow { color:#c8cede; }
html[data-theme="dark"] .pp-product-section .pp-section-card .feat li { color:#c1c7d0; }
html[data-theme="dark"] .pp-product-section .pp-section-card .pc-foot { border-top-color:#2f3332; }

/* ---------------------------------------------------------------------------
   Light-theme lock: product-card-reference.css ships html[data-theme="light"]
   rules for the loop cards that also match these section cards and out-rank the
   selectors above (an extra attribute selector). Keep the reference header and
   text colours on top of them.
   --------------------------------------------------------------------------- */
html[data-theme="light"] .pp-product-section .pp-section-card,
html[data-theme="dark"] .pp-product-section .pp-section-card { background:#fff; box-shadow:0 18px 40px rgba(27,38,84,.10), 0 2px 6px rgba(27,38,84,.05); }
html[data-theme="dark"] .pp-product-section .pp-section-card { background:#1b1d1c; }
html[data-theme="light"] .pp-product-section .pp-section-card .pp-card-header,
html[data-theme="dark"] .pp-product-section .pp-section-card .pp-card-header { background:transparent; min-height:0; padding:0; }
html[data-theme="light"] .pp-product-section .pp-section-card .pc-price,
html[data-theme="dark"] .pp-product-section .pp-section-card .pc-price { color:#141c33; }
html[data-theme="dark"] .pp-product-section .pp-section-card .pc-price { color:#f3f3f3; }
html[data-theme="dark"] .pp-product-section .pp-section-card .pc-price .pp-price-unit { color:#9aa1b1; }
html[data-theme="light"] .pp-product-section .pp-section-card .pc-title,
html[data-theme="dark"] .pp-product-section .pp-section-card .pc-title { color:#141c33; }
html[data-theme="dark"] .pp-product-section .pp-section-card .pc-title { color:#f3f3f3; }
html[data-theme="light"] .pp-product-section .pp-section-card .pc-eyebrow { color:#232c47; }
html[data-theme="dark"] .pp-product-section .pp-section-card .pc-eyebrow { color:#c8cede; }
html[data-theme="light"] .pp-product-section .pp-section-card .feat li,
html[data-theme="dark"] .pp-product-section .pp-section-card .feat li { color:#536077; }
html[data-theme="dark"] .pp-product-section .pp-section-card .feat li { color:#c1c7d0; }

/* ------------------------------------------------- browsers without cqw (old) */
@supports not (container-type: inline-size) {
 .pp-product-section .pp-section-card { border-radius:28px; }
 .pp-product-section .pp-section-card .pc-wm { font-size:99px; }
 .pp-product-section .pp-section-card .btile { top:50px; width:88px; height:88px; border-radius:22px; box-shadow:0 6px 12px rgba(9,15,45,.30); }
 .pp-product-section .pp-section-card .pc-tags { top:15px; right:15px; left:15px; }
 .pp-product-section .pp-section-card .pill { height:33px; padding:0 11px; border-width:1px; font-size:19px; gap:5px; }
 .pp-product-section .pp-section-card .pill-time svg { width:19px; height:19px; }
 .pp-product-section .pp-section-card .pc-body { padding:19px 24px 17px; }
 .pp-product-section .pp-section-card .pc-eyebrow { margin-bottom:15px; font-size:19px; }
 .pp-product-section .pp-section-card .pc-title { font-size:20px; }
 .pp-product-section .pp-section-card .pc-foot { margin-inline:-24px; padding:15px 24px 0; border-top-width:1px; gap:11px; }
 .pp-product-section .pp-section-card .pc-price { font-size:33px; }
 .pp-product-section .pp-section-card .pc-price .pp-price-unit { font-size:22px; }
 .pp-product-section .pp-section-card .pc-btn { min-height:66px; border-radius:19px; font-size:29px; }
}