/* ==========================================================================
   yallah — minimal storefront design system
   White surfaces, hairline borders, almost no shadow, compact spacing, RTL-first.
   ========================================================================== */

:root {
	--y-ink: #111111;
	--y-ink-soft: #3A3A3A;
	--y-muted: #6E6E6E;
	--y-line: #EAEAEA;
	--y-line-strong: #D8D8D8;
	--y-bg: #FFFFFF;
	--y-soft: #FAFAF9;
	/* Shipped default only — the live value is set from لوحة التحكم ← لون المتجر,
	   which overrides this variable at runtime. */
	--y-accent: #66c7cc;
	--y-sale: #E53935;

	--y-r: 4px;
	--y-r-lg: 8px;

	--y-pad: 16px;
	--y-gap: 12px;

	--y-header-h: 56px;
	--y-tabbar-h: 60px;
}
@media (min-width: 1024px) {
	:root { --y-pad: 24px; --y-gap: 16px; --y-header-h: 60px; }
}

/* --- base ---------------------------------------------------------------- */
body {
	background: var(--y-bg);
	color: var(--y-ink);
	-webkit-font-smoothing: antialiased;
}
body .wp-site-blocks > * { margin-block: 0; }
img { max-width: 100%; height: auto; }

.y-container {
	width: 100%;
	max-width: 1360px;
	margin-inline: auto;
	padding-inline: var(--y-pad);
	box-sizing: border-box;
}

.y-section { padding-block: 28px; }
.y-section--tight { padding-block: 20px; }
@media (min-width: 1024px) { .y-section { padding-block: 40px; } }

.y-section__head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 12px; margin-bottom: 14px;
}
.y-section__title { font-size: 1.0625rem; font-weight: 700; margin: 0; line-height: 1.3; }
@media (min-width: 1024px) { .y-section__title { font-size: 1.25rem; } }
.y-section__link { font-size: .8125rem; color: var(--y-muted); text-decoration: none; white-space: nowrap; }
.y-section__link:hover { color: var(--y-accent); }

/* Horizontal scrollers share one behaviour: native snap, no visible scrollbar. */
.y-scroller {
	--y-scroller-pad: max(var(--y-pad), calc((100vw - 1360px) / 2 + var(--y-pad)));
	display: flex; gap: var(--y-gap); margin: 0;
	padding: 0 var(--y-scroller-pad) 2px;
	list-style: none;
	overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: x proximity; scroll-padding-inline-start: var(--y-scroller-pad);
	overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
	scrollbar-width: none; -ms-overflow-style: none;
}
.y-scroller::-webkit-scrollbar { width: 0; height: 0; display: none; }
.y-scroller > * { flex: 0 0 auto; scroll-snap-align: start; }

/* --- announcement bar ---------------------------------------------------- */
.y-announce {
	background: var(--y-ink); color: #fff;
	font-size: .75rem; line-height: 1.5; text-align: center;
	padding: 7px var(--y-pad);
}
.y-announce p { margin: 0; }
.y-announce a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.y-announce:has(.yps-run) { overflow: hidden; white-space: nowrap; }
.y-announce .yps-run { display: inline-block; animation: yps-marquee 8s linear infinite; }
@keyframes yps-marquee {
	0% { transform: translateX(100%); }
	100% { transform: translateX(-100%); }
}

/* --- header ---------------------------------------------------------------
   A real, independent navigation bar: fixed vertical space, sticky on
   scroll, never absolutely positioned over content below it. The logo is
   centered via inset-inline auto-margins (not transform/left/right) so it
   stays centered under RTL and regardless of how wide either icon cluster
   is; every icon button keeps its normal place in flow. */
.y-header {
	position: sticky; top: 0; z-index: 90;
	background: #fff; border-bottom: 1px solid var(--y-line);
	transition: box-shadow .15s ease;
}
.y-header.is-stuck { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.y-header__bar {
	position: relative;
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	height: var(--y-header-h);
}
.y-header__logo {
	position: absolute; inset-inline: 0; margin-inline: auto; z-index: 1;
	width: fit-content;
	font-size: 1.0625rem; font-weight: 800; letter-spacing: .06em;
	text-decoration: none; color: var(--y-ink); white-space: nowrap;
}
.y-header__side {
	position: relative; z-index: 2;
	display: flex; align-items: center; gap: 2px; flex: 0 0 auto;
}
/* حسابي / المفضلة / السلة: مسافة واضحة بينهم بدل التلاصق، حتى في أضيق شاشة. */
.y-header__side--end { justify-content: flex-end; gap: 10px; }
/* على الموبايل، nav مخفي فيصير .y-header__side هو العنصر الوحيد داخل
   .y-header__bar (flex + space-between)، فمكانه الافتراضي flex-start
   يعني يمين في RTL. margin-inline-start: auto يدفعه لليسار (end) دايمًا،
   في الموبايل والديسكتوب على حد سواء. */
.y-header__side--end { margin-inline-start: auto; }

.y-iconbtn {
	position: relative;
	width: 40px; height: 40px; padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
	background: none; border: 0; border-radius: var(--y-r);
	color: var(--y-ink); cursor: pointer; text-decoration: none;
}
.y-iconbtn:hover { color: var(--y-accent); }
.y-header__login-label { display: none; }
@media (min-width: 1024px) {
	.y-header__login {
		width: auto; gap: 6px; padding: 0 12px; font-size: .8125rem; font-weight: 700; font-family: inherit;
	}
	.y-header__login-label { display: inline; }
}
.y-badge {
	position: absolute; top: 4px; inset-inline-end: 3px;
	min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
	background: var(--y-accent); color: #fff;
	font-size: .625rem; font-weight: 700; line-height: 16px; text-align: center;
	border-radius: 999px;
}

/* Desktop: logo goes back to the start (in flow, not centered), nav takes
   the middle, actions sit at the end. */
@media (min-width: 1024px) {
	.y-header__logo {
		position: static; margin-inline: 0;
		font-size: 1.375rem;
	}
	.y-header__menu-btn { display: none; }
	.y-nav { flex: 1; }
	.y-header__side { gap: 4px; }
	.y-header__side--end { gap: 16px; }
}

/* primary nav */
.y-nav { display: none; }
@media (min-width: 1024px) {
	.y-nav { display: flex; justify-content: center; gap: 22px; }
	.y-nav a {
		font-size: .875rem; text-decoration: none; color: var(--y-ink);
		padding: 6px 0; border-bottom: 2px solid transparent;
	}
	.y-nav a:hover, .y-nav a.is-active { border-bottom-color: var(--y-ink); color: var(--y-ink); }
}

/* mobile drawer nav */
.y-drawer { position: fixed; inset: 0; z-index: 200; display: none; }
.y-drawer[data-open="true"] { display: block; }
.y-drawer__scrim { position: absolute; inset: 0; background: rgba(17,17,17,.4); }
.y-drawer__panel {
	position: absolute; inset-block: 0; inset-inline-start: 0;
	width: min(84vw, 320px); background: #fff;
	display: flex; flex-direction: column;
	transform: translateX(var(--y-drawer-out, -100%));
	transition: transform .22s ease;
}
[dir="rtl"] .y-drawer__panel { --y-drawer-out: 100%; }
.y-drawer[data-open="true"] .y-drawer__panel { transform: translateX(0); }
.y-drawer__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 10px 12px 10px var(--y-pad); border-bottom: 1px solid var(--y-line);
}
.y-drawer__title { font-size: .9375rem; font-weight: 700; }
.y-drawer__list { list-style: none; margin: 0; padding: 6px 0; overflow-y: auto; }
.y-drawer__list a {
	display: block; padding: 12px var(--y-pad);
	font-size: .9375rem; text-decoration: none; color: var(--y-ink);
}
.y-drawer__list a:hover { background: var(--y-soft); }

/* --- chips --------------------------------------------------------------- */
.y-chips { padding-block: 10px; }
.y-chip {
	display: inline-flex; align-items: center; height: 32px; padding-inline: 14px;
	font-size: .8125rem; line-height: 1; white-space: nowrap; text-decoration: none;
	color: var(--y-ink); background: #fff;
	border: 1px solid var(--y-line); border-radius: 999px;
}
.y-chip:hover { border-color: var(--y-line-strong); color: var(--y-ink); }
.y-chip.is-active { background: var(--y-ink); border-color: var(--y-ink); color: #fff; }

/* --- product card -------------------------------------------------------- */
.y-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px var(--y-gap);
	margin: 0; padding: 0; list-style: none;
}
@media (min-width: 600px)  { .y-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .y-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; } }
@media (min-width: 1360px) { .y-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Carousel variant: same card, horizontal on small screens. */
.y-grid--scroll { display: flex; }
@media (min-width: 768px) {
	.y-grid--scroll {
		display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
		overflow: visible; padding-inline: 0; scroll-snap-type: none;
	}
	.y-grid--scroll > * { width: auto; }
}
@media (min-width: 1360px) { .y-grid--scroll { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.y-grid--scroll > .y-card-slot { width: clamp(150px, 44vw, 200px); }

.y-card { position: relative; display: flex; flex-direction: column; height: 100%; }
.y-card__top { position: relative; display: block; }
.y-card__media {
	position: relative; display: block;
	aspect-ratio: 1 / 1; overflow: hidden;
	background: #fff; border: 1px solid var(--y-line); border-radius: var(--y-r-lg);
}
.y-card__media img {
	width: 100%; height: 100%; object-fit: contain; display: block;
}
.y-card__body { padding-top: 8px; display: flex; flex-direction: column; flex: 1 1 auto; }
.y-card__title {
	font-size: .8125rem; font-weight: 600; line-height: 1.4; margin: 0;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.y-card__title a { text-decoration: none; color: inherit; }
.y-card__brand {
	margin-top: 2px; font-size: .6875rem; line-height: 1.4;
	color: var(--y-muted); letter-spacing: .02em;
}
.y-card__price {
	margin-top: 6px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
	font-size: .875rem; font-weight: 700; line-height: 1.3;
}
.y-card__price .screen-reader-text, .y-pdp__price .screen-reader-text { order: 0; }
/* WooCommerce prints <del> (was) before <ins> (now); show the payable price first. */
.y-card__price del { order: 2; font-size: .75rem; font-weight: 400; color: var(--y-muted); text-decoration: line-through; }
.y-card__price ins { order: 1; text-decoration: none; color: var(--y-ink); font-weight: 700; }
.y-card__price .woocommerce-Price-currencySymbol { font-weight: 400; font-size: .8em; }

.y-card__badge {
	position: absolute; top: 8px; inset-inline-start: 8px; z-index: 3;
	background: var(--y-ink); color: #fff;
	font-size: .6875rem; font-weight: 700; line-height: 1;
	padding: 4px 7px; border-radius: 999px;
}
.y-card__badge--sale { background: var(--y-sale); }

.y-card__fav {
	position: absolute; top: 6px; inset-inline-end: 6px; z-index: 3;
	width: 28px; height: 28px; padding: 0;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.9); border: 0; border-radius: 50%;
	color: var(--y-ink); cursor: pointer;
}
.y-card__fav svg { width: 15px; height: 15px; }
.y-card__fav[aria-pressed="true"] svg { fill: var(--y-accent); stroke: var(--y-accent); }

.y-card.is-outofstock .y-card__top::after {
	content: 'غير متوفر'; position: absolute; inset: 0; z-index: 2;
	background: rgba(255,255,255,.78); color: var(--y-ink);
	display: flex; align-items: center; justify-content: center;
	font-size: .75rem; font-weight: 700;
}
.y-card.is-outofstock .y-card__media img { filter: grayscale(.5); opacity: .8; }

/* --- toolbar (filter / sort) --------------------------------------------- */
.y-toolbar {
	display: flex; align-items: stretch; gap: 10px;
	padding-block: 10px;
	border-block: 1px solid var(--y-line);
}
.y-toolbar__btn {
	flex: 1 1 0; min-width: 0;
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	height: 38px; padding-inline: 12px;
	background: #fff; border: 1px solid var(--y-line); border-radius: var(--y-r);
	font: inherit; font-size: .8125rem; font-weight: 600; color: var(--y-ink);
	cursor: pointer; text-decoration: none;
}
.y-toolbar__btn:hover { border-color: var(--y-line-strong); }
.y-toolbar__count {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 18px; height: 18px; padding-inline: 5px; box-sizing: border-box;
	background: var(--y-ink); color: #fff; border-radius: 999px;
	font-size: .625rem; font-weight: 700;
}
.y-toolbar__results { display: none; }
@media (min-width: 1024px) {
	.y-toolbar { align-items: center; }
	.y-toolbar__btn { flex: 0 0 auto; }
	.y-toolbar__btn--filter { display: none; }
	.y-toolbar__results { display: block; margin-inline-end: auto; font-size: .8125rem; color: var(--y-muted); }
}

/* --- filters ------------------------------------------------------------- */
.y-layout { display: block; }
@media (min-width: 1024px) {
	.y-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 32px; align-items: start; }
}

.y-filters__group { border-bottom: 1px solid var(--y-line); }
.y-filters__group:last-child { border-bottom: 0; }
.y-filters__toggle {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding: 14px 0; background: none; border: 0;
	font: inherit; font-size: .875rem; font-weight: 700; color: var(--y-ink);
	cursor: pointer; text-align: start;
}
.y-filters__toggle svg { flex: 0 0 auto; transition: transform .18s ease; }
.y-filters__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.y-filters__panel { padding-bottom: 14px; }
.y-filters__toggle[aria-expanded="false"] + .y-filters__panel { display: none; }
.y-filters__opt {
	display: flex; align-items: center; gap: 9px;
	padding: 7px 0; font-size: .8125rem; cursor: pointer; color: var(--y-ink);
}
.y-filters__opt input {
	width: 16px; height: 16px; margin: 0; flex: 0 0 auto;
	accent-color: var(--y-ink); cursor: pointer;
}
.y-filters__opt-count { margin-inline-start: auto; font-size: .75rem; color: var(--y-muted); }
.y-filters__price { display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.y-filters__price input {
	width: 100%; min-width: 0; height: 36px; padding-inline: 10px;
	border: 1px solid var(--y-line); border-radius: var(--y-r);
	font: inherit; font-size: .8125rem; background: #fff; color: var(--y-ink);
}
.y-filters__price span { color: var(--y-muted); font-size: .8125rem; }

.y-filters__desktop { display: none; }
@media (min-width: 1024px) {
	.y-filters__desktop { display: block; position: sticky; top: calc(var(--y-header-h) + 12px); }
	.y-filters__desktop .y-filters__head { padding-bottom: 10px; border-bottom: 1px solid var(--y-line); }
}

/* mobile bottom sheet */
.y-sheet { position: fixed; inset: 0; z-index: 210; display: none; }
.y-sheet[data-open="true"] { display: block; }
.y-sheet__scrim { position: absolute; inset: 0; background: rgba(17,17,17,.4); }
.y-sheet__panel {
	position: absolute; inset-inline: 0; bottom: 0;
	max-height: 86dvh; display: flex; flex-direction: column;
	background: #fff; border-radius: 14px 14px 0 0;
	transform: translateY(100%); transition: transform .22s ease;
}
.y-sheet[data-open="true"] .y-sheet__panel { transform: translateY(0); }
.y-sheet__head {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding: 12px 10px 12px var(--y-pad); border-bottom: 1px solid var(--y-line);
}
.y-sheet__title { font-size: .9375rem; font-weight: 700; }
.y-sheet__body { padding: 0 var(--y-pad); overflow-y: auto; flex: 1 1 auto; }
.y-sheet__foot {
	display: flex; gap: 10px; padding: 12px var(--y-pad);
	padding-bottom: calc(12px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--y-line); background: #fff;
}
.y-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding-inline: 20px;
	font: inherit; font-size: .875rem; font-weight: 700; text-decoration: none;
	border-radius: var(--y-r); border: 1px solid var(--y-ink);
	background: var(--y-ink); color: #fff; cursor: pointer;
}
.y-btn:hover { background: #000; color: #fff; }
.y-btn--ghost { background: #fff; color: var(--y-ink); border-color: var(--y-line-strong); }
.y-btn--ghost:hover { background: var(--y-soft); color: var(--y-ink); }
.y-btn--block { width: 100%; }
.y-btn--grow { flex: 1 1 0; }

/* sort sheet options */
.y-sortopt {
	display: flex; align-items: center; gap: 10px;
	padding: 14px 0; border-bottom: 1px solid var(--y-line);
	font-size: .875rem; color: var(--y-ink); text-decoration: none;
}
.y-sortopt:last-child { border-bottom: 0; }
.y-sortopt.is-active { font-weight: 700; }
.y-sortopt.is-active::after { content: '✓'; margin-inline-start: auto; }

/* active filter pills */
.y-active { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 12px; }
.y-active__pill {
	display: inline-flex; align-items: center; gap: 6px;
	height: 28px; padding-inline: 10px;
	background: var(--y-soft); border: 1px solid var(--y-line); border-radius: 999px;
	font-size: .75rem; color: var(--y-ink); text-decoration: none;
}
.y-active__pill span { font-size: 1rem; line-height: 1; color: var(--y-muted); }
.y-active__clear { font-size: .75rem; color: var(--y-muted); text-decoration: underline; align-self: center; }

/* --- home ---------------------------------------------------------------- */
.y-hero { position: relative; overflow: hidden; background: var(--y-soft); }
.y-hero__viewport {
	position: relative; overflow: hidden;
	aspect-ratio: 16 / 10; background: var(--y-soft);
}
@media (min-width: 768px)  { .y-hero__viewport { aspect-ratio: auto; height: clamp(300px, 30vw, 400px); } }
.y-hero__media {
	position: absolute; inset: 0; display: block; overflow: hidden;
	opacity: 0; pointer-events: none; transform: scale(1.012);
	transition: opacity .5s ease, transform 1.2s ease;
}
.y-hero__media.is-active { opacity: 1; pointer-events: auto; transform: scale(1); z-index: 1; }
.y-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.y-hero__body {
	position: absolute; inset-block-end: 0; inset-inline-start: 0;
	width: 100%; padding: var(--y-pad);
	background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
	color: #fff;
}
@media (min-width: 768px) {
	.y-hero__body {
		inset-block: 0; width: min(46%, 520px);
		display: flex; flex-direction: column; justify-content: center;
		padding: 40px;
		background: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,.55));
	}
	[dir="rtl"] .y-hero__body { background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.55)); }
}
.y-hero__eyebrow { font-size: .6875rem; letter-spacing: .14em; opacity: .9; }
.y-hero__title { font-size: 1.375rem; font-weight: 700; line-height: 1.25; margin: 6px 0 10px; }
@media (min-width: 768px) { .y-hero__title { font-size: 2rem; } }
.y-hero__cta {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 40px; padding-inline: 22px; align-self: flex-start;
	background: #fff; color: var(--y-ink); text-decoration: none;
	font-size: .8125rem; font-weight: 700; border-radius: var(--y-r);
}
.y-hero__cta:hover { background: var(--y-ink); color: #fff; }
.y-hero__control {
	position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
	width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid rgba(255,255,255,.55); border-radius: 999px;
	background: rgba(0,0,0,.26); color: #fff; cursor: pointer;
	backdrop-filter: blur(8px);
}
.y-hero__control:hover { background: rgba(0,0,0,.42); }
.y-hero__control--prev { inset-inline-start: 12px; }
.y-hero__control--next { inset-inline-end: 12px; }
.y-hero__control--prev svg { transform: rotate(-90deg); }
.y-hero__control--next svg { transform: rotate(90deg); }
.y-hero__dots {
	position: absolute; inset-inline: 0; inset-block-end: 12px; z-index: 3;
	display: flex; justify-content: center; gap: 8px; pointer-events: none;
}
.y-hero__dots button {
	width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px;
	background: rgba(255,255,255,.55); cursor: pointer; pointer-events: auto;
}
.y-hero__dots button.is-active { width: 22px; background: #fff; }
@media (max-width: 767px) {
	.y-hero__control { display: none; }
	.y-hero__dots { inset-block-end: 8px; }
}

.y-tile { display: block; width: 84px; text-align: center; text-decoration: none; color: var(--y-ink); }
.y-tile__img {
	display: block; width: 84px; height: 84px; margin-bottom: 6px;
	border-radius: 50%; overflow: hidden;
	background: var(--y-soft) center/cover no-repeat;
	border: 1px solid var(--y-line);
}
.y-tile span { display: block; font-size: .75rem; line-height: 1.3; }

/* Home-page category row: compact circles, tight even spacing, no section title. */
.y-section--catrow { padding-block: 14px 10px; }
.y-scroller--catrow { gap: 10px; }
.y-tile--compact { width: 66px; }
.y-tile--compact .y-tile__img { width: 66px; height: 66px; margin-bottom: 5px; }
.y-tile--compact span { font-size: .6875rem; }
@media (min-width: 1024px) {
	.y-tile--compact { width: 84px; }
	.y-tile--compact .y-tile__img { width: 84px; height: 84px; margin-bottom: 6px; }
	.y-tile--compact span { font-size: .75rem; }
}

.y-shape { display: block; width: 116px; text-align: center; text-decoration: none; color: var(--y-ink); }
.y-shape__img {
	display: flex; align-items: center; justify-content: center;
	height: 68px; margin-bottom: 6px;
	background: var(--y-soft); border: 1px solid var(--y-line); border-radius: var(--y-r-lg);
	color: var(--y-ink);
}
.y-shape span { display: block; font-size: .75rem; }

.y-promo { position: relative; display: block; overflow: hidden; text-decoration: none; }
.y-promo__media { aspect-ratio: 16 / 9; background: var(--y-soft); }
@media (min-width: 768px) { .y-promo__media { aspect-ratio: auto; height: clamp(180px, 17vw, 240px); } }
.y-promo__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.y-promo__body {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 8px; text-align: center; color: #fff; background: rgba(0,0,0,.32); padding: var(--y-pad);
}
.y-promo__title { font-size: 1.25rem; font-weight: 700; }
@media (min-width: 768px) { .y-promo__title { font-size: 1.75rem; } }

.y-benefits {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
	background: var(--y-line); border-block: 1px solid var(--y-line);
}
@media (min-width: 768px) { .y-benefits { grid-template-columns: repeat(4, 1fr); } }
.y-benefit {
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	padding: 18px 10px; background: #fff; text-align: center;
	font-size: .75rem; line-height: 1.4; color: var(--y-ink);
}
.y-benefit svg { color: var(--y-ink); }

/* --- product page -------------------------------------------------------- */
.y-pdp { padding-bottom: 24px; }
@media (min-width: 1024px) {
	.y-pdp__cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
	.y-pdp__gallery { position: sticky; top: calc(var(--y-header-h) + 16px); }
}
.y-pdp__title { font-size: 1.125rem; font-weight: 700; line-height: 1.35; margin: 6px 0 4px; }
@media (min-width: 1024px) { .y-pdp__title { font-size: 1.5rem; } }
.y-pdp__brand { font-size: .8125rem; color: var(--y-muted); }
.y-pdp__price { margin: 12px 0 16px; font-size: 1.25rem; font-weight: 700; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.y-pdp__price del { order: 2; font-size: .9375rem; font-weight: 400; color: var(--y-muted); text-decoration: line-through; }
.y-pdp__price ins { order: 1; text-decoration: none; color: var(--y-ink); }
.y-pdp__off {
	order: 3; background: var(--y-sale); color: #fff;
	font-size: .75rem; font-weight: 700; line-height: 1;
	padding: 5px 8px; border-radius: 999px;
}

.y-acc { border-top: 1px solid var(--y-line); }
.y-acc:last-of-type { border-bottom: 1px solid var(--y-line); }
.y-acc__toggle {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 16px 0; background: none; border: 0;
	font: inherit; font-size: .875rem; font-weight: 700; color: var(--y-ink);
	text-align: start; cursor: pointer;
}
.y-acc__toggle svg { flex: 0 0 auto; transition: transform .18s ease; }
.y-acc__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.y-acc__panel { padding-bottom: 18px; font-size: .875rem; line-height: 1.75; color: var(--y-ink-soft); }
.y-acc__toggle[aria-expanded="false"] + .y-acc__panel { display: none; }
.y-acc__panel p:first-child { margin-top: 0; }
.y-acc__panel p:last-child { margin-bottom: 0; }

/* --- footer -------------------------------------------------------------- */
.y-footer { border-top: 1px solid var(--y-line); background: #fff; padding-block: 32px 20px; }
.y-footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
@media (min-width: 768px) { .y-footer__cols { grid-template-columns: repeat(4, 1fr); } }
.y-footer h4 { font-size: .8125rem; font-weight: 700; margin: 0 0 10px; }
.y-footer ul { list-style: none; margin: 0; padding: 0; }
.y-footer li { margin-bottom: 8px; }
.y-footer a { font-size: .8125rem; color: var(--y-muted); text-decoration: none; }
.y-footer a:hover { color: var(--y-ink); }
.y-footer__bottom {
	margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--y-line);
	display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between;
	font-size: .75rem; color: var(--y-muted);
}

/* --- utilities ----------------------------------------------------------- */
.y-visually-hidden {
	position: absolute !important; width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.y-empty { padding: 48px var(--y-pad); text-align: center; color: var(--y-muted); font-size: .875rem; }

/* Keep the fixed bottom tab bar from covering the last row of content. */
@media (max-width: 767px) {
	body { padding-bottom: var(--y-tabbar-h); }
}

/* --- shop / category page ------------------------------------------------ */
.y-shop { padding-top: 14px; }
.y-shop__title { font-size: 1.125rem; font-weight: 700; margin: 0; line-height: 1.3; }
@media (min-width: 1024px) { .y-shop__title { font-size: 1.5rem; } }
.y-shop__desc { margin-top: 6px; font-size: .8125rem; color: var(--y-muted); }
.y-shop .y-grid { padding-block: 18px; }

.y-pagination { padding-block: 8px 32px; }
.y-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.y-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 36px; height: 36px; padding-inline: 10px;
	border: 1px solid var(--y-line); border-radius: var(--y-r);
	font-size: .8125rem; text-decoration: none; color: var(--y-ink); background: #fff;
}
.y-pagination .page-numbers.current { background: var(--y-ink); border-color: var(--y-ink); color: #fff; }
.y-pagination .page-numbers:hover { border-color: var(--y-line-strong); }
.y-pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* WooCommerce breadcrumbs, trimmed to a quiet line of text. */
.wc-block-breadcrumbs, .woocommerce-breadcrumb {
	padding-block: 10px; font-size: .75rem; color: var(--y-muted);
}
.wc-block-breadcrumbs a, .woocommerce-breadcrumb a { color: var(--y-muted); text-decoration: none; }
.wc-block-breadcrumbs a:hover, .woocommerce-breadcrumb a:hover { color: var(--y-ink); }

/* --- product page: gallery ----------------------------------------------- */
.y-pdp__cols { padding-block: 4px 8px; }
.y-pdp__meta {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	margin-bottom: 16px; font-size: .8125rem; color: var(--y-muted);
}
.y-pdp__meta .wc-block-components-product-rating { margin: 0; }

/* Mobile: the gallery is a swipeable, snapping strip of full-width images. */
.woocommerce-product-gallery { margin: 0 !important; }
.woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce-product-gallery__image img { width: 100%; height: auto; display: block; }
.wp-block-woocommerce-product-image-gallery .flex-control-thumbs {
	display: flex; gap: 8px; list-style: none; margin: 10px 0 0; padding: 0;
	overflow-x: auto; scrollbar-width: none;
}
.wp-block-woocommerce-product-image-gallery .flex-control-thumbs::-webkit-scrollbar { display: none; }
.wp-block-woocommerce-product-image-gallery .flex-control-thumbs li {
	flex: 0 0 auto; width: 60px; margin: 0;
}
.wp-block-woocommerce-product-image-gallery .flex-control-thumbs img {
	width: 60px; height: 60px; object-fit: contain;
	border: 1px solid var(--y-line); border-radius: var(--y-r); background: #fff;
	cursor: pointer; opacity: .65;
}
.wp-block-woocommerce-product-image-gallery .flex-control-thumbs img.flex-active,
.wp-block-woocommerce-product-image-gallery .flex-control-thumbs img:hover { opacity: 1; border-color: var(--y-line-strong); }
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image--placeholder {
	border: 1px solid var(--y-line); border-radius: var(--y-r-lg); overflow: hidden; background: #fff;
}

/* --- product page: buy box ----------------------------------------------- */
.yallah-buybox { margin-block: 4px 20px; }
.yallah-buybox .quantity input {
	height: 46px; width: 76px; padding-inline: 8px; text-align: center;
	border: 1px solid var(--y-line-strong); border-radius: var(--y-r); background: #fff; color: var(--y-ink);
}
.yallah-buybox form.cart { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin: 0; }
.yallah-buybox form.variations_form { display: block; }
/* The one action on this page that matters is "buy this" — it gets the same
   solid ink/white hero treatment as every primary CTA elsewhere on the site
   (map/checkout/lens steps' .yef-btn--primary), not the lighter brand accent,
   so it reads unmistakably as the primary action next to the quantity field. */
.yallah-buybox .single_add_to_cart_button {
	flex: 1 1 200px; min-height: 46px;
	background: var(--y-ink); color: #fff; border: 0; border-radius: var(--y-r);
	font-size: .9375rem; font-weight: 700; cursor: pointer;
}
.yallah-buybox .single_add_to_cart_button:hover { background: #000; }
.yallah-buybox table.variations { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.yallah-buybox table.variations th,
.yallah-buybox table.variations td { padding: 6px 0; text-align: start; font-size: .8125rem; vertical-align: middle; }
.yallah-buybox table.variations select {
	width: 100%; height: 42px; padding-inline: 10px;
	border: 1px solid var(--y-line-strong); border-radius: var(--y-r); background: #fff; color: var(--y-ink); font: inherit;
}

/* --- size & fit guide inside the accordion ------------------------------- */
.yallah-specs { margin: 0; }
.yallah-specs__title { font-size: .875rem; font-weight: 700; margin: 0 0 10px; }
.yallah-specs__title + .yallah-specs__title { margin-top: 20px; }
.yallah-specs__measurements {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 6px;
}
@media (min-width: 600px) { .yallah-specs__measurements { grid-template-columns: repeat(4, 1fr); } }
.yallah-specs__measure {
	display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
	padding: 12px 6px; border: 1px solid var(--y-line); border-radius: var(--y-r-lg);
}
.yallah-specs__measure-label { font-size: .6875rem; color: var(--y-muted); }
.yallah-specs__measure-value { font-size: .8125rem; font-weight: 700; }
.yallah-specs__table { border-top: 1px solid var(--y-line); }
.yallah-specs__row {
	display: flex; justify-content: space-between; gap: 16px;
	padding: 10px 0; border-bottom: 1px solid var(--y-line); font-size: .8125rem;
}
.yallah-specs__row-label { color: var(--y-muted); }

/* --- misc plugin surfaces ------------------------------------------------ */
.wc-block-components-notice-banner { border-radius: var(--y-r); font-size: .875rem; }
.wc-block-mini-cart__badge { background: var(--y-ink); }
.woocommerce-result-count, .woocommerce-ordering { display: none; }

/* --- overflow safety net -------------------------------------------------- */
/* `clip` (not `hidden`) keeps position:sticky working on the header. */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }

/* The gallery zoom overlay is disabled, but stay defensive about stray absolute art. */
.woocommerce-product-gallery { position: relative; overflow: hidden; max-width: 100%; }
.woocommerce-product-gallery img { max-width: 100%; height: auto; }
.woocommerce-product-gallery .zoomImg { display: none !important; }

/* The add-to-cart form already prints a stock line; one is enough. */
.yallah-buybox .stock { display: none; }

/* --- root layout containment ---------------------------------------------
   Block themes make body a grid; a grid item defaults to min-width:auto, so any
   wide descendant stretches the whole page. Letting it shrink is the real fix. */
body { min-width: 0; }
.wp-site-blocks { min-width: 0; max-width: 100%; }
/* WooCommerce wraps single-product templates in its own group, so main is not
   always a direct child — cap the width on the landmark itself as well. */
.wp-site-blocks > *,
.wp-site-blocks .wp-block-group.woocommerce,
main { min-width: 0; max-width: 100%; }
main { width: 100%; box-sizing: border-box; }

.y-hero__body { box-sizing: border-box; }

/* --- wishlist page -------------------------------------------------------- */
.yallah-wishlist-grid { margin-top: 18px; }
.yallah-wishlist-empty { padding: 40px 0; text-align: center; color: var(--y-muted); font-size: .875rem; }