/* Card sections ("تسوّق حسب الشكل" وأي قسم مخصص) — tall vertical cards in a
   horizontal scroller, reusing the theme's .y-section / .y-scroller rhythm. */

.yps-vsection__desc {
	margin: -8px 0 14px;
	color: var(--y-muted, #6E6E6E);
	font-size: .85rem;
	line-height: 1.5;
}

/* The caption is a band above the photo, painted the photo's own backdrop
   colour (sampled per card and passed in as --yps-card-bg). That keeps the
   card reading as one picture — no white header strip, and nothing landing on
   the model's face — while giving the text a calm, always-legible ground. */
.yps-vcard {
	/* A column so the photos of a row line up along one bottom edge: the flex
	   row stretches every card to the tallest caption, and that slack is taken
	   by the band above rather than left as a gap under the shortest photo. */
	display: flex;
	flex-direction: column;
	width: 168px;
	text-decoration: none;
	color: var(--y-ink, #111);
	background: var(--yps-card-bg, #E3E3E3);
	border-radius: var(--y-r-lg, 8px);
	overflow: hidden;
}
@media (min-width: 1024px) {
	.yps-vcard { width: 220px; }
}

.yps-vcard__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	padding: 16px 12px 12px;
}
.yps-vcard__title {
	display: block;
	font-weight: 700;
	font-size: .9rem;
	line-height: 1.3;
	margin-bottom: 3px;
	color: var(--y-ink, #111);
}
.yps-vcard__desc {
	display: block;
	font-size: .74rem;
	line-height: 1.4;
	color: var(--y-muted, #6E6E6E);
}
.yps-vcard__img {
	display: block;
	width: 100%;
	margin-block-start: auto;
	flex: 0 0 auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	/* Anchored to the top so all of the backdrop above the model stays in frame
	   and runs straight into the caption band with no seam. */
	object-position: center top;
}

/* Banners ("صانع البنرات") — a block of banner slots arranged by the layout the
   shop owner picked. Every layout decision arrives as a custom property on the
   grid, so one stylesheet serves a full-bleed strip and a four-up square grid
   alike; the mobile values are the base and the desktop ones override at 768px,
   keeping the phone layout the one that renders without a media query. */
.yps-bsec { overflow: hidden; }

.yps-bwrap { width: 100%; }
.yps-bwrap--narrow {
	max-width: 860px;
	margin-inline: auto;
	padding-inline: 16px;
}

.yps-bgrid {
	display: grid;
	grid-template-columns: repeat(var(--yps-b-cols-m, 1), minmax(0, 1fr));
	gap: var(--yps-b-gap, 16px);
}
@media (min-width: 768px) {
	.yps-bgrid {
		grid-template-columns: repeat(var(--yps-b-cols, 2), minmax(0, 1fr));
	}
}

.yps-bgrid__item {
	display: block;
	overflow: hidden;
	border-radius: var(--yps-b-radius, 8px);
	text-decoration: none;
	line-height: 0;
}
.yps-bgrid__item picture { display: block; }

/* "المقاس الأصلي للصورة" is just aspect-ratio:auto, so the no-crop option needs
   no class of its own — the renderer sets the variable to `auto` and the image
   keeps its own proportions on that device only. */
.yps-bgrid__img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: var(--yps-b-ratio-m, 1 / 1);
}
@media (min-width: 768px) {
	.yps-bgrid__img { aspect-ratio: var(--yps-b-ratio, 21 / 8); }
}