@charset "utf-8";
/* =====================================================================
   DLE Market  —  گالری تصاویر محصول و لایت‌باکس
   ===================================================================== */

/* ------------------------------------------------ ریل تصاویر */

.shop-gallery .files-box__head { justify-content: flex-start; }
.gal-nav { margin-inline-start: auto; }
.gal-nav .rail-btn { width: 32px; height: 32px; font-size: 13px; }

.gal-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 240px;
	gap: 12px;
	padding: 16px 20px 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	overscroll-behavior-x: contain;
}
.gal-rail::-webkit-scrollbar { height: 6px; }
.gal-rail::-webkit-scrollbar-track { background: var(--line-2); border-radius: 3px; }
.gal-rail::-webkit-scrollbar-thumb { background: var(--tx-3); border-radius: 3px; }

.gal-item {
	position: relative;
	scroll-snap-align: start;
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: var(--r-sm);
	overflow: hidden;
	background: var(--line-2);
	border: 1px solid var(--line);
	cursor: zoom-in;
	transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }

.gal-item:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--saffron); }
.gal-item:hover img { transform: scale(1.06); }

.gal-zoom {
	position: absolute;
	inset-inline-end: 8px;
	bottom: 8px;
	width: 30px; height: 30px;
	display: grid; place-items: center;
	border-radius: 8px;
	background: rgba(14, 22, 38, .78);
	backdrop-filter: blur(4px);
	color: #fff;
	font-size: 13px;
	opacity: 0;
	transform: translateY(6px);
	transition: .2s var(--ease);
}
.gal-item:hover .gal-zoom { opacity: 1; transform: none; }

/* ------------------------------------------------- لایت‌باکس */

.lb {
	position: fixed;
	inset: 0;
	z-index: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(8, 13, 24, .93);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s var(--ease), visibility .25s var(--ease);
}
.lb.open { opacity: 1; visibility: visible; }

.lb__stage {
	position: relative;
	max-width: min(1100px, 92vw);
	max-height: 82vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lb__img {
	max-width: 100%;
	max-height: 82vh;
	border-radius: var(--r);
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8);
	background: var(--ink-2);
	transition: opacity .18s var(--ease);
}
.lb.is-loading .lb__img { opacity: .35; }

/* دکمه‌ها */
.lb__btn {
	position: absolute;
	width: 46px; height: 46px;
	display: grid; place-items: center;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	cursor: pointer;
	font-size: 17px;
	transition: .18s var(--ease);
	z-index: 2;
}
.lb__btn:hover { background: var(--saffron); border-color: var(--saffron); color: #26190A; }
.lb__btn:disabled { opacity: .25; cursor: default; }
.lb__btn:disabled:hover { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.18); }

.lb__x { top: 20px; inset-inline-end: 20px; position: fixed; }

/* در راست‌به‌چپ «بعدی» سمت چپ است */
.lb__prev { inset-inline-start: -62px; }
.lb__next { inset-inline-end: -62px; }
.lb__prev .ic { transform: none; }
.lb__next .ic { transform: scaleX(-1); }

/* نوار پایین: توضیح و شمارنده */
.lb__bar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	padding: 16px 20px 20px;
	text-align: center;
	color: var(--tx-d2);
	font-size: 13.5px;
	background: linear-gradient(to top, rgba(8,13,24,.9), transparent);
	pointer-events: none;
}
.lb__cap { display: block; color: #fff; margin-bottom: 4px; }
.lb__count { font-family: var(--mono); font-size: 12px; direction: ltr; unicode-bidi: isolate; opacity: .7; }

/* بندانگشتی‌های پایین لایت‌باکس */
.lb__thumbs {
	position: fixed;
	inset-inline: 0;
	bottom: 62px;
	/* جهت صریح: لایت‌باکس به body چسبانده می‌شود و نباید
	   به ارث بردن جهت از جای دیگر تکیه کند */
	direction: rtl;
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 0 20px;
	overflow-x: auto;
	scrollbar-width: none;
}
.lb__thumbs::-webkit-scrollbar { display: none; }
.lb__thumb {
	width: 58px; height: 40px;
	flex: 0 0 auto;
	border: 2px solid transparent;
	border-radius: 6px;
	overflow: hidden;
	opacity: .45;
	cursor: pointer;
	background: none;
	padding: 0;
	transition: .18s var(--ease);
}
.lb__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lb__thumb:hover { opacity: .8; }
.lb__thumb.on { opacity: 1; border-color: var(--saffron); }

/* ------------------------------------- فهرست پیش‌نیازها */

.req-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.req-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.req-list a { font-weight: 600; color: var(--saffron-d); }
.req-list a:hover { text-decoration: underline; }
.req-list em {
	font-style: normal;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 5px;
}
.req-own   { background: rgba(14, 159, 110, .12); color: var(--jade-d); }
.req-free  { background: rgba(14, 159, 110, .12); color: var(--jade-d); }
.req-price { background: var(--line-2); color: var(--tx-2); }
.req-price .cur { font-weight: 400; }

/* ------------------------------------------------ واکنش‌گرا */

@media (max-width: 900px) {
	.lb__prev, .lb__next { inset-inline: auto; position: fixed; bottom: 120px; }
	.lb__prev { inset-inline-start: 20px; }
	.lb__next { inset-inline-end: 20px; }
}

@media (max-width: 620px) {
	.gal-rail { grid-auto-columns: 78vw; padding: 14px 16px 18px; }
	.lb__stage { max-width: 94vw; }
	.lb__thumbs { display: none; }
	.lb__btn { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
	.lb, .lb__img, .gal-item, .gal-item img, .gal-zoom { transition: none !important; }
}