/* ==========================================================================
   Home page («الرئيسية», includes/home-page.php): static styles that are not Divi settings.
   - icon badges: inline SVG line icons in the brand blue
   - best sellers: a horizontal rail (scroll-snap) with larger cards, IKEA-style, instead of the grid
   ========================================================================== */

/* ---------- Icon badges ---------- */
.yn-badge p { display: flex; align-items: center; justify-content: center; margin: 0; }
.yn-badge svg { display: block; width: 26px; height: 26px; }

/* ---------- Best sellers rail ---------- */
#bestsellers .et_pb_shop { overflow: visible; }
html body #bestsellers ul.products.yn-grid {
	display: flex !important;
	gap: clamp(14px, 1.6vw, 22px);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0;
	padding: 8px 0 20px !important;
	margin: 0 !important;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
}
html body #bestsellers ul.products.yn-grid::-webkit-scrollbar { display: none; }
html body #bestsellers ul.products.yn-grid.is-dragging { cursor: grabbing; scroll-snap-type: none; }
html body #bestsellers ul.products.yn-grid.is-dragging li { pointer-events: none; }
html body #bestsellers ul.products.yn-grid > li.product {
	flex: 0 0 clamp(240px, 27vw, 340px);
	scroll-snap-align: start;
}
@media (max-width: 767px) {
	html body #bestsellers ul.products.yn-grid { margin-inline: -16px !important; padding-inline: 16px !important; scroll-padding-inline: 16px; }
	html body #bestsellers ul.products.yn-grid > li.product { flex-basis: 72vw; }
}

/* Arrows + progress under the rail (added by home.js). */
.yn-rail__nav { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.yn-rail__bar { position: relative; flex: 1; height: 3px; border-radius: 3px; background: rgba(30, 41, 59, .1); overflow: hidden; }
.yn-rail__bar i { position: absolute; inset-block: 0; inset-inline-start: 0; width: 30%; border-radius: 3px; background: var(--yn-primary, #0258A2); transition: transform .2s ease-out, width .2s; }
.yn-rail__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 100px;
	background: #FFFFFC;
	color: var(--yn-heading, #1E293B);
	box-shadow: 0 1px 0 rgba(30, 41, 59, .05), 0 10px 24px -14px rgba(2, 88, 162, .45), inset 0 0 0 1.5px var(--yn-border, #D1D5DB);
	cursor: pointer;
	transition: background-color .2s, color .2s, box-shadow .2s;
}
.yn-rail__btn svg { width: 20px; height: 20px; }
.yn-rail__btn:hover, .yn-rail__btn:focus-visible { background: var(--yn-primary, #0258A2); color: #FFFFFC; box-shadow: inset 0 0 0 1.5px var(--yn-primary, #0258A2); outline: none; }
.yn-rail__btn:focus-visible { outline: 3px solid var(--yn-yellow, #FDDC00); outline-offset: 2px; }
.yn-rail__btn[disabled] { opacity: .35; cursor: default; background: #FFFFFC; color: var(--yn-heading, #1E293B); box-shadow: inset 0 0 0 1.5px var(--yn-border, #D1D5DB); }
.yn-rail__btn svg { transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.yn-rail__btn--prev:hover svg { transform: translateX(2px); }
.yn-rail__btn--next:hover svg { transform: translateX(-2px); }