/* =========================================================
   GYM THEME - DESIGN TOKENS
   All pixel values below were measured directly from the client's
   reference design file (1920 x 3610 canvas) via pixel-color analysis,
   not estimated. Every fixed-size element uses clamp(min, fluid-vw, exact-px)
   so the layout is IDENTICAL, pixel for pixel, to the reference at 1920px
   width and scales down at the exact same proportions on smaller screens
   (rather than reflowing or changing spacing ratios). Do not round these
   off in future revisions without checking the source file again.

   Formula used: clamp(MIN, calc(V / 19.2 * 1vw), Vpx)
   (1920px = 100vw, so 1px = 0.05208vw; V*0.05208vw scales V proportionally)
   ========================================================= */
:root {
	--color-yellow: #FCB827;   /* measured 252,184,39 */
	--color-yellow-dark: #E3A31F;
	--color-dark: #222222;    /* measured 34,34,34 */
	--color-bg: #534F4E;      /* measured 83,79,78 */
	--color-white: #FFFFFF;
	--color-text-on-dark: #FFFFFF;
	--color-text-on-yellow: #222222;

	--design-width: 1920px;
	--container-padding: clamp(20px, 3.4375vw, 66px); /* measured 66px */
	--container-width: 1920px;

	/* Shared with .hero below so the slider can extend upward to sit
	   exactly behind the header (same values used in both places). */
	--header-pad: clamp(16px, 2.08vw, 40px);
	--header-logo-h: clamp(90px, 12.55vw, 241px);
	--header-total-h: calc(var(--header-pad) * 2 + var(--header-logo-h));

	--radius-lg: 60px;
	--radius-md: clamp(12px, 1.25vw, 24px);
	--radius-pill: 999px;

	/* یک فاصله‌ی یکسان و پیش‌بینی‌پذیر بین هر سکشن و سکشن بعدی — قبلاً
	   هر سکشن هم padding-top هم padding-bottom داشت که روی هم جمع
	   می‌شدند و فاصله‌ها نامنظم/گاهی خیلی زیاد می‌شدند (مثلاً بین
	   آموزش و خدمات ~۱۰۰-۲۱۵ پیکسل، بین خدمات و فروشگاه ~۱۱۰-۲۳۵
	   پیکسل). الان هر سکشن فقط از بالا این فاصله را می‌گیرد. */
	--section-gap: clamp(56px, 6.25vw, 120px);

	--font-base: 'Vazirmatn', 'IRANSans', Tahoma, sans-serif;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	font-family: var(--font-base);
	background: var(--color-bg);
	color: var(--color-text-on-dark);
	direction: rtl;
	overflow-x: hidden;
}

/* Form controls don't inherit the page font by default in most browsers'
   UA stylesheets — this guarantees every button/input/select/textarea
   anywhere on the site (current or future) renders in Vazirmatn/IRANSans
   like everything else, instead of the browser's own default font. */
button, input, select, textarea {
	font-family: inherit;
}

/* Smooth scroll for the footer's back-to-top anchor (and any other
   in-page # links); disabled below under prefers-reduced-motion. */
html { scroll-behavior: smooth; }

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
h1, h2, h3 { margin: 0 0 16px; font-weight: 700; }

.container {
	width: 100%;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}

.site-main {
	display: flow-root; /* prevents hero's negative top margin from collapsing through this wrapper */
}

/* =========================================================
   HEADER — rebuilt from the client's reference image (header.png).
   Structure: three-column flex bar (left cluster / logo / right
   cluster), all on one continuous dark pill — cart icon, ورود/ثبت‌نام
   pill, and a real search field on the left; home icon + main nav
   (with chic hover dropdowns for آموزش/فروشگاه) on the right.
   ========================================================= */
.site-header {
	background: transparent; /* the hero slider shows through here */
	position: relative;
	z-index: 5;
	padding: var(--header-pad) 0;
}

.site-header__inner {
	position: relative;
	height: var(--header-logo-h);
	display: flex;
	align-items: center;
}

.site-header__bar {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--color-dark);
	border-radius: var(--radius-pill);
	height: clamp(44px, 4.69vw, 90px);
	/* اندازه‌ی نوار متناسب با محتوای واقعی داخلش است (max-content) نه یک
	   عرض ثابت — تا فضای خالی بین گوشه‌ها و اجزا ایجاد نشود، درست مطابق
	   تصویر مرجع که نوار دقیقاً به دور محتوایش می‌چسبد. */
	width: max-content;
	max-width: 96vw;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 clamp(10px, 1.2vw, 22px);
	gap: clamp(20px, 2.6vw, 48px);
}

.hdr-cluster {
	display: flex;
	align-items: center;
	gap: clamp(6px, 0.8vw, 14px);
	flex: 0 0 auto;
}

.hdr-menu-toggle { display: none; } /* فقط موبایل — نمایش واقعی در media query پایین تعریف شده */

.hdr-cluster--right {
	justify-content: flex-start;
}

.hdr-cluster--left {
	justify-content: flex-end;
}

.hdr-icon-btn {
	position: relative;
	background: var(--color-white);
	border: 1.5px solid rgba(30, 30, 30, 0.15);
	border-radius: 50%;
	width: clamp(32px, 3vw, 52px);
	height: clamp(32px, 3vw, 52px);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: var(--color-dark);
	transition: box-shadow 0.25s ease, transform 0.2s ease, border-color 0.25s ease;
}

.hdr-icon-btn:hover,
.hdr-icon-btn:focus-visible {
	transform: scale(1.08);
	border-color: var(--color-yellow);
	box-shadow: 0 0 0 3px rgba(252, 184, 39, 0.35);
}

.hdr-cart-count {
	position: absolute;
	top: -4px;
	left: -4px;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: 999px;
	background: var(--color-yellow);
	color: var(--color-text-on-yellow);
	font-size: 9.5px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	border: 2px solid var(--color-dark);
}

.hdr-cart-count.is-hidden {
	display: none;
}

.hdr-auth-btn {
	flex: 0 0 auto;
	white-space: nowrap;
	background: var(--color-dark);
	color: var(--color-yellow) !important;
	border: 1.5px solid var(--color-yellow);
	border-radius: var(--radius-pill);
	padding: clamp(6px, 0.7vw, 11px) clamp(12px, 1.3vw, 20px);
	font-size: clamp(11px, 0.78vw, 13.5px);
	font-weight: 700;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.hdr-auth-btn:hover,
.hdr-auth-btn:focus-visible {
	background: var(--color-yellow);
	color: var(--color-text-on-yellow) !important;
	transform: translateY(-1px);
}

.hdr-search {
	position: relative;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	width: clamp(160px, 15vw, 260px);
	background: var(--color-white);
	border: 1.5px solid var(--color-yellow);
	border-radius: var(--radius-pill);
	overflow: hidden;
}

.hdr-search__input {
	flex: 1 1 auto;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	padding: clamp(6px, 0.7vw, 11px) clamp(10px, 1vw, 16px);
	font-family: inherit;
	font-size: clamp(11.5px, 0.8vw, 13.5px);
	color: var(--color-dark);
}

.hdr-search__btn {
	flex: 0 0 auto;
	border: none;
	background: transparent;
	color: var(--color-dark);
	padding: 0 clamp(10px, 1vw, 16px);
	display: flex;
	align-items: center;
	cursor: pointer;
	transition: color 0.2s ease;
}

.hdr-search__btn:hover,
.hdr-search__btn:focus-visible {
	color: var(--color-yellow-dark);
}

.hdr-search__results {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	left: 0;
	background: rgba(34, 34, 34, 0.98);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(252, 184, 39, 0.25);
	border-radius: var(--radius-md);
	padding: 8px;
	max-height: 340px;
	overflow-y: auto;
	display: none;
	flex-direction: column;
	gap: 2px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
	z-index: 30;
}

.hdr-search__results.is-open {
	display: flex;
}

.hdr-search__result {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 12px;
	border-radius: 8px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 12.5px;
	font-weight: 600;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.hdr-search__result:hover,
.hdr-search__result:focus-visible {
	background: rgba(252, 184, 39, 0.12);
	color: var(--color-yellow);
}

.hdr-search__result-type {
	flex: 0 0 auto;
	font-size: 10.5px;
	color: rgba(255, 255, 255, 0.4);
}

.hdr-search__result-empty {
	padding: 10px 12px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
	text-align: center;
}

.hdr-nav {
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.2vw, 22px);
}

.hdr-nav > a,
.hdr-nav__item > a {
	color: var(--color-white);
	font-size: clamp(11.5px, 0.85vw, 14px);
	font-weight: 600;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.hdr-nav > a:hover,
.hdr-nav > a:focus-visible,
.hdr-nav__item > a:hover,
.hdr-nav__item > a:focus-visible {
	color: var(--color-yellow);
}

.hdr-nav__item {
	position: relative;
}

.hdr-nav__item--dropdown > a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.hdr-nav__item--dropdown > a::after {
	content: '';
	width: 6px;
	height: 6px;
	border-inline-end: 1.5px solid currentColor;
	border-block-end: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
}

.hdr-nav__item--dropdown:hover > a::after {
	transform: translateY(2px) rotate(225deg);
}

/* چیک، شیشه‌ای، منوی آبشاری — با هاور روی هر آیتم نوار اصلی که
   زیرمجموعه‌ی واقعی دارد (آموزش، فروشگاه) باز می‌شود. */
.hdr-dropdown {
	position: absolute;
	top: 100%;
	right: 50%;
	transform: translateX(50%) translateY(4px);
	min-width: 180px;
	/* فاصله‌ی بصری تا زیر دکمه، بدون ایجاد یک منطقه‌ی مرده بین دکمه و
	   منو — چون دقیقاً همان "پریدن منو موقع انتخاب" که مشتری گزارش داد
	   از همین‌جا می‌آمد: قبلاً با top:calc(100% + 14px) یک شکاف نامرئی
	   ایجاد می‌شد که موس موقع حرکت مورب به‌سمت گزینه‌ها از آن رد می‌شد و
	   منو زودتر از موعد بسته می‌شد. */
	padding: 14px 10px 10px;
	background: rgba(34, 34, 34, 0.98);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(252, 184, 39, 0.25);
	border-radius: var(--radius-md);
	display: flex;
	flex-direction: column;
	gap: 2px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 20;
}

.hdr-nav__item--dropdown:hover .hdr-dropdown,
.hdr-nav__item--dropdown:focus-within .hdr-dropdown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(50%) translateY(0);
}

.hdr-dropdown a {
	color: rgba(255, 255, 255, 0.82);
	font-size: 12.5px;
	font-weight: 600;
	padding: 8px 12px;
	border-radius: 8px;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.hdr-dropdown a:hover,
.hdr-dropdown a:focus-visible {
	background: rgba(252, 184, 39, 0.12);
	color: var(--color-yellow);
}

.site-header__logo {
	width: clamp(120px, 11vw, 210px);
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	transition: transform 0.25s ease;
}

.site-header__logo:hover,
.site-header__logo:focus-within {
	transform: scale(1.05);
}

.site-header__logo-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: clamp(8px, 1vw, 16px);
}

.site-header__logo-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
	/* لوگوی خام مشکی روی زمینه‌ی خط را سفید نمایش می‌دهد تا دقیقاً مثل
	   تصویر مرجع (بدون جعبه‌ی سفید پشت لوگو) دیده شود. */
	filter: brightness(0) invert(1);
}

@media (max-width: 900px) {
	.hdr-nav__item--dropdown .hdr-dropdown { position: fixed; left: 12px; right: 12px; top: auto; transform: none; }
	.hdr-nav__item--dropdown:hover .hdr-dropdown, .hdr-nav__item--dropdown:focus-within .hdr-dropdown { transform: none; }
}

/* =========================================================
   HERO — header+hero form one continuous yellow block
   measuring ~1010px total; both bottom corners curve
   symmetrically (measured ~160px radius); sub-nav pill
   measured 1323x94, sitting 50px above the curved edge.
   ========================================================= */
.hero {
	background: var(--color-yellow);
	/* The header-overlap zone (padding-top below) is now ADDED on top of the
	   original hero height, not absorbed by it — otherwise min-height caps
	   the total and the visible slider area shrinks by the header's height,
	   which is exactly the bug from v0.1.8. */
	min-height: calc(clamp(260px, 38.54vw, 740px) + var(--header-total-h));
	border-radius: 0 0 clamp(40px, 8.33vw, 160px) clamp(40px, 8.33vw, 160px);
	position: relative;
	overflow: hidden; /* clips slider media to the existing rounded shape — shape/size itself is untouched */
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: clamp(20px, 2.6vw, 50px);
	/* Extends the box upward by exactly the header's height and shifts it
	   up by the same amount, so the top edge now reaches the very top of
	   the page (behind the header) while the bottom edge — the pill's
	   position, the curved corners — stays exactly where it was before. */
	padding-top: var(--header-total-h);
	margin-top: calc(-1 * var(--header-total-h));
}

.hero__pill {
	position: relative;
	z-index: 3;
	background: var(--color-dark);
	border-radius: var(--radius-pill);
	width: max-content;      /* shrinks to fit the buttons instead of stretching, per request */
	max-width: 100%;         /* still wraps/shrinks safely on very small screens */
	height: clamp(56px, 4.9vw, 94px);
	padding: 0 clamp(16px, 2.08vw, 40px);
	display: flex;
	align-items: center;
	gap: clamp(6px, 0.83vw, 16px);
	justify-content: center;
	flex-wrap: wrap;
	font-weight: 700;
	font-size: clamp(13px, 0.9375vw, 18px);
}

.hero__pill a {
	color: var(--color-text-on-dark);
	padding: clamp(6px, 0.625vw, 10px) clamp(12px, 1.25vw, 20px);
	border-radius: var(--radius-pill);
	white-space: nowrap;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.hero__pill a:hover,
.hero__pill a:focus-visible {
	background-color: var(--color-yellow);
	color: var(--color-text-on-yellow);
	transform: translateY(-2px);
}

/* =========================================================
   HERO SLIDER — lives inside the existing .hero box, fills it
   completely (position:absolute, inset:0), clipped to the box's
   own rounded corners via overflow:hidden on .hero. Nothing about
   .hero's own size/shape/color was changed to add this.
   ========================================================= */
.hero__slider {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1s ease;
	pointer-events: none;
}

.hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 1;
}

/* Outer wrapper: CSS-only Ken Burns zoom, triggered purely by .is-active.
   Kept separate from the parallax layer below so JS-driven scroll updates
   never fight with this 6s transition on the same `transform` property. */
.hero__slide-media-wrap {
	position: absolute;
	inset: -8%;
	overflow: hidden;
	transform: scale(1.08);
	transition: transform 6s ease-out;
}

.hero__slide.is-active .hero__slide-media-wrap {
	transform: scale(1);
}

/* Inner layer: JS moves this one's transform on scroll for the parallax
   effect. No CSS transition here on purpose — scroll-linked motion needs
   to track the scroll position immediately, not ease over several seconds. */
.hero__slide-media {
	position: absolute;
	inset: -10%;
	background-color: var(--color-yellow-dark);
	background-size: cover;
	background-position: center;
	will-change: transform;
}

/* Fallback slides (no image uploaded yet) get a subtle brand-colored gradient
   instead of a flat block, so the slider still looks intentional pre-content. */
.hero__slide-media.hero__slide-media--placeholder,
.hero__slide-media--placeholder {
	background-image: linear-gradient(135deg, var(--color-yellow-dark) 0%, var(--color-yellow) 55%, var(--color-yellow-dark) 100%);
}

.hero__slide-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0) 75%);
}

/* Fixed brand-yellow tint over every slide (image or video), at the
   client's specified 40% opacity — sits above the media, below the
   dark legibility gradient above it doesn't need to change per-slide. */
.hero__slide-tint {
	position: absolute;
	inset: 0;
	background: var(--color-yellow);
	opacity: 0.4;
	mix-blend-mode: normal;
	pointer-events: none;
}

.hero__slide-media--video {
	position: absolute;
	inset: -10%;
	width: 120%;
	height: 120%;
	object-fit: cover;
	will-change: transform;
}

.hero__slide-content {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	text-align: right;
	max-width: 640px;
	padding: 0 clamp(24px, 5vw, 90px);
	/* Excludes the header-overlap zone from the centering area, so text
	   always centers within the same visual space as before — never
	   drifting up under the header. */
	padding-top: var(--header-total-h);
	padding-bottom: clamp(90px, 12vw, 170px); /* keeps text clear of the sub-nav pill */
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.7s ease 0.15s, transform 0.7s ease 0.15s;
}

/* Text position, editable per-slide from the admin panel. */
.hero__slide-content--center {
	align-items: center;
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
}

.hero__slide-content--left {
	align-items: flex-end;
	text-align: left;
	margin-inline-start: auto;
}

.hero__slide.is-active .hero__slide-content {
	opacity: 1;
	transform: translateY(0);
}

.hero__slide-title {
	color: var(--color-white);
	font-size: clamp(22px, 2.6vw, 44px);
	margin-bottom: 12px;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.hero__slide-subtitle {
	color: var(--color-white);
	font-size: clamp(14px, 1.1vw, 19px);
	line-height: 1.8;
	margin: 0 0 20px;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

.hero__slide-cta {
	display: inline-block;
	background: var(--color-yellow);
	color: var(--color-text-on-yellow);
	font-weight: 700;
	padding: 12px 28px;
	border-radius: var(--radius-pill);
	transition: background-color 0.25s ease, transform 0.2s ease;
}

.hero__slide-cta:hover,
.hero__slide-cta:focus-visible {
	background: var(--color-white);
	transform: translateY(-2px);
}

/* Dots */
.hero__slider-dots {
	position: absolute;
	z-index: 2;
	bottom: clamp(90px, 13vw, 175px);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
}

.hero__slider-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.hero__slider-dot.is-active {
	background: var(--color-white);
	transform: scale(1.3);
}

/* Arrows */
.hero__slider-arrow {
	position: absolute;
	z-index: 2;
	top: 50%;
	transform: translateY(-50%);
	width: clamp(32px, 3vw, 44px);
	height: clamp(32px, 3vw, 44px);
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.85);
	color: var(--color-text-on-yellow);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.hero__slider-arrow:hover,
.hero__slider-arrow:focus-visible {
	background: var(--color-white);
	transform: translateY(-50%) scale(1.08);
}

.hero__slider-arrow--prev { left: clamp(16px, 2.5vw, 40px); }
.hero__slider-arrow--next { right: clamp(16px, 2.5vw, 40px); }

@media (prefers-reduced-motion: reduce) {
	.hero__slide,
	.hero__slide-media,
	.hero__slide-content,
	.hero__slider-dot,
	.hero__slider-arrow {
		transition: none !important;
	}
	.hero__slide.is-active .hero__slide-media { transform: none !important; }
}

@media (max-width: 640px) {
	.hero__slide-content { text-align: center; align-items: center; max-width: 100%; }
	.hero__slider-arrow { display: none; } /* swipe handles navigation on touch screens */
}

/* =========================================================
   EDUCATION SECTION — 3x2 checkerboard, tiles keep the
   measured 423:292 ratio; grid track scaled down to max 620px
   (from 1368px) and gaps tightened to read as smaller/minimal
   per v0.2.0 revision, sitting beside the text down to 480px.
   ========================================================= */
.education { padding: var(--section-gap) 0 0; }

.education__inner {
	display: grid;
	/* col 1 = right side (text), col 2 = left side (image grid) — RTL places
	   the first listed column at the right edge. Grid-column below pins each
	   element explicitly so this isn't dependent on DOM order. align-items:
	   start keeps both columns pinned to the row's top edge regardless of
	   how tall the text column grows — it can never push down or compress
	   the box grid, which sizes itself independently (aspect-ratio tiles). */
	grid-template-columns: 1fr clamp(220px, 44vw, 620px);
	gap: clamp(12px, 1.8vw, 26px);
	align-items: start;
}

.education__content { grid-column: 1; grid-row: 1; }
.education__grid { grid-column: 2; grid-row: 1; }

.education__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr);
	column-gap: clamp(6px, 1.15vw, 22px);
	row-gap: clamp(8px, 1.4vw, 28px);
}

/* آموزش — کارت‌های هاور طبق کد تحویلی مشتری (Uiverse by Dailleer)،
   با رنگ‌بندی و پالت خودِ قالب به‌جای گرادیان اصلی نمونه، و عکس واقعی
   پس‌زمینه (عکس شاخص خودِ آموزش، یا یک عکس پیش‌فرض باشگاه در نبود آن)
   به‌جای رنگ تخت. آیکون در حالت عادی دیده می‌شود؛ با هاور، یک پنل تیره
   با چرخش ۴۵ درجه باز می‌شود و عنوان + توضیح را نشان می‌دهد. */
.edu-card {
	position: relative;
	width: 100%;
	aspect-ratio: 423 / 292;
	border-radius: clamp(12px, 1.25vw, 22px);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: box-shadow 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.edu-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(-45deg, rgba(34, 34, 34, 0.6) 0%, rgba(252, 184, 39, 0.35) 100%);
	transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.edu-card:hover {
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

.edu-card svg {
	position: relative;
	z-index: 1;
	width: clamp(28px, 2.6vw, 46px);
	height: clamp(28px, 2.6vw, 46px);
	color: var(--color-white);
	transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), scale 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.edu-card:hover svg {
	scale: 0;
	transform: rotate(-45deg);
}

.edu-card__content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
	width: 100%;
	height: 100%;
	padding: clamp(12px, 1.3vw, 20px);
	box-sizing: border-box;
	background-color: var(--color-dark);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	opacity: 0;
	transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.edu-card:hover .edu-card__content {
	transform: translate(-50%, -50%) rotate(0deg);
	opacity: 1;
}

.edu-card__title {
	margin: 0;
	font-size: clamp(13px, 1vw, 17px);
	color: var(--color-yellow);
	font-weight: 800;
}

.edu-card__description {
	margin: 8px 0 0;
	font-size: clamp(10.5px, 0.75vw, 12.5px);
	color: rgba(255, 255, 255, 0.78);
	line-height: 1.6;
}

.education__more-btn {
	display: inline-block;
	margin-top: clamp(14px, 1.6vw, 22px);
	background: var(--color-yellow);
	color: var(--color-text-on-yellow);
	border-radius: var(--radius-pill);
	padding: clamp(9px, 0.85vw, 13px) clamp(22px, 2vw, 32px);
	font-size: clamp(12px, 0.85vw, 14px);
	font-weight: 700;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.education__more-btn:hover,
.education__more-btn:focus-visible {
	background: var(--color-white);
	transform: translateY(-2px);
}

.education__content h2 { color: var(--color-yellow); font-size: clamp(22px, 1.5625vw, 30px); line-height: 1; }
.education__content p { margin: 0; line-height: 2; font-size: clamp(13px, 0.78125vw, 15px); }

@media (prefers-reduced-motion: reduce) {
	.edu-card,
	.edu-card svg,
	.edu-card__content { transition: none !important; }
}

/* =========================================================
   SERVICES SECTION — multi-card carousel (3 cards desktop / 2
   tablet / 1 mobile, matching the theme's existing 992px/768px
   breakpoints). Infinite loop via cloned buffer cards (main.js),
   real pointer drag + swipe, autoplay paused on hover, hover
   scale+glow per card, arrows fade in on slider hover.
   ========================================================= */
.services { padding: var(--section-gap) 0 0; }

.services__title { color: var(--color-yellow); font-size: clamp(22px, 1.5625vw, 30px); margin-bottom: clamp(20px, 2.08vw, 40px); }

.services__slider {
	position: relative;
	--services-visible: 4;
	--services-gap: clamp(12px, 1.3vw, 20px);
}

.services__viewport {
	overflow: hidden;
	padding: 4px; /* small breathing room so the hover glow never clips */
}

.services__track {
	display: flex;
	gap: var(--services-gap);
	will-change: transform;
	/* JS toggles this off during live drag, and off for one frame when
	   snapping across the clone boundary, then restores it. */
	transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
	cursor: grab;
	touch-action: pan-y; /* keep vertical page scroll working, JS owns horizontal drag */
}

.services__track.is-dragging {
	transition: none;
	cursor: grabbing;
}

.services__card {
	flex: 0 0 calc((100% - (var(--services-visible) - 1) * var(--services-gap)) / var(--services-visible));
	min-width: 0;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 4.4;
	border-radius: clamp(18px, 2vw, 36px);
	border: 1.5px solid rgba(252, 184, 39, 0.25);
	user-select: none; /* avoid text-selection while dragging */
}

/* کارت‌های خدمات — طرح جدید ساده‌تر: عکس واقعی که کل کارت را پر می‌کند
   (نه فلیپ سه‌بعدی) + عنوان + توضیح کوتاه + دکمه‌ی «نمایش بیشتر» با یک
   هاور نرمال و مینیمال (فقط زوم ملایم عکس + کمی روشن‌شدن دکمه) —
   طبق درخواست صریح مشتری که فلیپ قبلی را "به‌درد نمی‌خورد" دانست و
   خواست چیزی ساده‌تر و همیشه-خوانا جایگزینش شود. */
.services__card-media {
	position: absolute;
	inset: 0;
	background-color: rgba(255, 255, 255, 0.06);
	background-size: cover;
	background-position: center;
	transition: transform 0.5s ease;
}

.services__card:hover .services__card-media,
.services__card:focus-within .services__card-media {
	transform: scale(1.06);
}

.services__card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.05) 100%);
	pointer-events: none;
}

.services__card-body {
	position: relative;
	z-index: 1;
	margin-top: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: clamp(14px, 1.6vw, 24px);
	text-align: center;
}

.services__card-title {
	display: block;
	font-weight: 700;
	font-size: clamp(13px, 0.85vw, 16px);
	color: var(--color-white);
	line-height: 1.4;
}

.services__card-desc {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	font-size: clamp(11px, 0.7vw, 12.5px);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
}

.services__card-btn {
	display: inline-block;
	margin-top: 4px;
	border-radius: var(--radius-pill);
	padding: clamp(6px, 0.6vw, 10px) clamp(18px, 1.8vw, 28px);
	font-size: clamp(11px, 0.7vw, 13px);
	font-weight: 700;
	color: var(--color-text-on-yellow);
	background: var(--color-yellow);
	border: 1.5px solid var(--color-yellow);
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.services__card:hover .services__card-btn,
.services__card:focus-visible .services__card-btn {
	background: transparent;
	color: var(--color-white);
	transform: translateY(-1px);
}

/* Arrows: soft, low-opacity yellow, hidden until the slider is hovered */
.services__arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: clamp(36px, 3.2vw, 48px);
	height: clamp(36px, 3.2vw, 48px);
	transform: translateY(-50%);
	border-radius: 50%;
	border: none;
	background: rgba(252, 184, 39, 0.16);
	color: var(--color-yellow);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}

.services__slider:hover .services__arrow,
.services__arrow:focus-visible { opacity: 1; }

.services__arrow:hover,
.services__arrow:focus-visible {
	background: var(--color-yellow);
	color: var(--color-text-on-yellow);
	transform: translateY(-50%) scale(1.08);
}

.services__arrow--prev { left: clamp(-8px, -1vw, -20px); }
.services__arrow--next { right: clamp(-8px, -1vw, -20px); }

/* Touch devices have no hover: keep arrows dimly visible instead of hidden */
@media (hover: none) {
	.services__arrow { opacity: 0.55; }
}

.services__dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: clamp(20px, 2.08vw, 32px);
}

.services__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.35);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.services__dot.is-active {
	background: var(--color-yellow);
	transform: scale(1.3);
}

@media (max-width: 1200px) {
	.services__slider { --services-visible: 3; }
}

@media (max-width: 992px) {
	.services__slider { --services-visible: 2; }
}

@media (max-width: 768px) {
	.services__slider { --services-visible: 1; }
	.services__arrow { display: none; } /* swipe/drag handles navigation on small touch screens */
}

@media (prefers-reduced-motion: reduce) {
	.services__track,
	.services__card-inner,
	.services__arrow,
	.services__dot { transition: none !important; }
}

/* =========================================================
   SHOP SECTION — custom 3D coverflow carousel (no library).
   Center card flat/full-size; side cards fan out via inline
   rotateY/skewY/scale/translateZ set by main.js, animated by
   these transitions. Card face style adapted from Uiverse.io
   by alexruix (gradient border + blurred glow + dark panel).
   ========================================================= */
.shop { padding: var(--section-gap) 0 0; }

.shop__title { color: var(--color-yellow); font-size: clamp(22px, 1.5625vw, 30px); margin-bottom: clamp(20px, 2.08vw, 40px); }

.shop__slider {
	position: relative;
	display: flex;
	align-items: center;
	gap: clamp(8px, 1.5vw, 24px);
}

.shop__slider-track-wrap {
	overflow: hidden;
	flex: 1 1 auto;
	padding: clamp(20px, 3vw, 50px) 0; /* breathing room so scaled/rotated side cards don't clip top/bottom */
}

.shop__slider-track {
	position: relative; /* so each card's offsetLeft is measured relative to the track itself */
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.08vw, 40px);
	perspective: 1400px; /* must sit on the cards' direct parent for their rotateY to read correctly */
	transition: transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
	will-change: transform;
}

/* Used only for the instant, invisible re-anchor after a loop step lands
   on a cloned card (see main.js) — transitions off for one frame so the
   index correction never animates or flashes. No effect on normal use. */
.shop__slider-track.is-snapping,
.shop__slider-track.is-snapping .shop__card {
	transition: none !important;
}

/* Card face */
.shop__card {
	--card-gradient: linear-gradient(to left, var(--color-yellow) 0%, #ea5358 100%);
	flex: 0 0 auto;
	width: clamp(160px, 15.1vw, 290px);
	aspect-ratio: 190 / 254;
	padding: 5px;
	border-radius: 1rem;
	background: var(--card-gradient);
	position: relative;
	z-index: 1;
	transform-style: preserve-3d;
	transform-origin: center center;
	transition: transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.55s ease;
	will-change: transform, opacity;
}

.shop__card::after {
	position: absolute;
	content: '';
	top: 30px;
	left: 0;
	right: 0;
	z-index: -1;
	height: 100%;
	width: 100%;
	transform: scale(0.8);
	filter: blur(25px);
	background: var(--card-gradient);
	transition: opacity 0.5s;
}

.shop__card:hover::after { opacity: 0; }

.shop__card-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: clamp(8px, 1vw, 14px);
	width: 100%;
	height: 100%;
	padding: clamp(12px, 1.3vw, 20px) clamp(10px, 1vw, 16px);
	box-sizing: border-box;
	background: var(--color-dark);
	border-radius: 0.7rem;
	text-align: center;
	overflow: hidden;
}

.shop__card-thumb {
	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
	background-color: rgba(255, 255, 255, 0.06);
	background-size: cover;
	background-position: center;
	border-radius: 0.5rem;
}

.shop__card-title {
	font-weight: 700;
	letter-spacing: 0.02em;
	font-size: clamp(13px, 0.9375vw, 16px);
	color: var(--color-white);
}

.shop__card:hover .shop__card-title { color: var(--color-yellow); transition: color 0.4s ease; }

.shop__card-price {
	font-size: clamp(11.5px, 0.8vw, 13.5px);
	font-weight: 700;
	color: rgba(255, 255, 255, 0.85);
	margin: 2px 0 0;
}

.shop__card-price ins {
	text-decoration: none;
	color: var(--color-yellow);
}

.shop__card-price del {
	opacity: 0.55;
	font-weight: 500;
	margin-inline-end: 4px;
}

.shop__card-actions {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
}

.shop__card-btn {
	display: block;
	width: 100%;
	border: none;
	border-radius: var(--radius-pill);
	padding: clamp(6px, 0.6vw, 10px) 10px;
	font-size: clamp(11px, 0.73vw, 13px);
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.shop__card-btn:hover,
.shop__card-btn:focus-visible { transform: translateY(-1px); }

.shop__card-btn--more {
	background: transparent;
	color: var(--color-yellow);
	border: 1.5px solid var(--color-yellow);
}

.shop__card-btn--cart {
	background: var(--color-yellow);
	color: var(--color-text-on-yellow);
}

.shop__card-btn--cart.is-added { opacity: 0.7; cursor: default; }

/* Arrows (reuses hero__slider-arrow visual language). Explicit order so
   the prev/next buttons sit on the correct physical side regardless of
   DOM order — prev (skips backward/left) on the left, next (skips
   forward/right) on the right, per explicit client request. */
.shop__slider-arrow {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	width: clamp(32px, 3vw, 44px);
	height: clamp(32px, 3vw, 44px);
	border-radius: 50%;
	border: none;
	background: var(--color-dark);
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.shop__slider-arrow--prev { order: 3; }
.shop__slider-track-wrap { order: 2; }
.shop__slider-arrow--next { order: 1; }

.shop__slider-arrow:hover,
.shop__slider-arrow:focus-visible {
	background: var(--color-yellow);
	color: var(--color-text-on-yellow);
	transform: scale(1.08);
}

.shop__slider-arrow[disabled] { opacity: 0.35; cursor: default; }
.shop__slider-arrow[disabled]:hover { background: var(--color-dark); color: var(--color-white); transform: none; }

/* Dots */
.shop__slider-dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: clamp(20px, 2.08vw, 32px);
}

.shop__slider-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.35);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.shop__slider-dot.is-active {
	background: var(--color-yellow);
	transform: scale(1.3);
}

@media (prefers-reduced-motion: reduce) {
	.shop__slider-track,
	.shop__card { transition: none !important; }
}

/* =========================================================
   ABOUT SECTION — measured: image block exactly 899x484,
   116px top padding after shop section.
   ========================================================= */
.about { padding: var(--section-gap) 0 var(--section-gap); }

.about__inner {
	display: grid;
	grid-template-columns: 1fr clamp(180px, 46.82vw, 899px); /* 899/1920 = 46.82% */
	gap: clamp(24px, 3.4375vw, 66px);
	align-items: start;
}

.about h2 { color: var(--color-yellow); font-size: clamp(20px, 1.354vw, 26px); }

/* Text tidy-up only: rhythm/spacing/accent — font-size and line-height
   values below are unchanged from before, per client's explicit request
   not to touch the standard/size. */
.about__text { display: flex; flex-direction: column; gap: 2px; }
.about__text p {
	position: relative;
	margin: 0;
	padding-inline-end: 16px;
	font-size: clamp(13px, 0.78125vw, 15px);
	line-height: 2;
	letter-spacing: .01em;
}
.about__text p::before {
	content: "";
	position: absolute;
	inset-inline-end: 0;
	top: 0.85em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--color-yellow);
}
.about__text p:last-child {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid rgba(252, 184, 39, 0.25);
	color: var(--color-yellow);
	font-weight: 700;
}

/* =========================================================
   ABOUT SLIDER — glow-border card, per client-supplied Uiverse
   component (adapted to the theme's own tokens/RTL). Outer box
   keeps the exact original 899x484 size/ratio/position; only the
   surface treatment changes from a flat box to this card.
   ========================================================= */
.about__media {
	--about-card-a: var(--color-yellow);
	--about-card-b: #EA5358;
	width: 100%;
	aspect-ratio: 899 / 484; /* measured ratio — unchanged */
}

.about-slider.card {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	padding: 5px;
	border-radius: var(--radius-md);
	overflow: visible;
	background: linear-gradient(to left, var(--about-card-a) 0%, var(--about-card-b) 100%);
}

.about-slider__glow {
	position: absolute;
	content: "";
	top: 30px;
	left: 0;
	right: 0;
	z-index: -1;
	height: 100%;
	width: 100%;
	transform: scale(0.8);
	filter: blur(25px);
	background: linear-gradient(to left, var(--about-card-a) 0%, var(--about-card-b) 100%);
	transition: opacity .5s;
}
.about-slider.card:hover .about-slider__glow { opacity: 0; }

.about-slider__info {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: calc(var(--radius-md) - 5px);
	background: var(--color-dark);
}

.about-slider__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .6s ease;
}
.about-slider__slide.is-active { opacity: 1; }
.about-slider__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.about-slider__slide--placeholder {
	background: linear-gradient(135deg, var(--color-dark) 0%, #2c2c2c 100%);
}

.about-slider__dots {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 2;
}
.about-slider__dots :where(button) {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
	cursor: pointer;
	transition: background .25s, transform .25s;
}
.about-slider__dots :where(button.is-active) {
	background: var(--color-yellow);
	transform: scale(1.2);
}

.about-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	color: var(--color-white);
	cursor: pointer;
	z-index: 2;
	transition: background .25s, color .25s, transform .25s;
}
.about-slider__arrow:hover {
	background: var(--color-yellow);
	color: var(--color-text-on-yellow);
	transform: translateY(-50%) scale(1.08);
}
.about-slider__arrow--prev { left: 12px; }
.about-slider__arrow--next { right: 12px; }

/* =========================================================
   FOOTER — three-column layout: contact info (right), trust
   badges اینماد/ساماندهی (middle), logo+slogan (left), with the
   copyright strip at the very bottom of the yellow box. The
   dark nav-pill menu that used to sit in the middle was removed
   per client request — navigation lives only in the header now.
   Yellow box color and rounded-top-corners are unchanged.
   ========================================================= */
.site-footer__curve {
	background: var(--color-yellow);
	border-radius: clamp(50px, 7.29vw, 140px) clamp(50px, 7.29vw, 140px) 0 0;
	padding: clamp(30px, 3.125vw, 60px) 0 0;
	position: relative; /* anchors the back-to-top button without touching the inner layout */
}

/* Back-to-header button: sits centered on the curve's own top edge (half
   in, half out) so it never competes with the layout inside — same
   circular language as the header's home icon, with a more pronounced
   lift/shadow on hover per request. */
.site-footer__back-to-top {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	width: clamp(38px, 3.4vw, 58px);
	height: clamp(38px, 3.4vw, 58px);
	border-radius: 50%;
	background: var(--color-dark);
	color: var(--color-text-on-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
	z-index: 2;
}

.site-footer__back-to-top:hover,
.site-footer__back-to-top:focus-visible {
	background: var(--color-dark);
	color: var(--color-yellow);
	transform: translate(-50%, -50%) translateY(-5px) scale(1.1);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), 0 0 0 4px rgba(34, 34, 34, 0.18);
}

.site-footer__back-to-top:active {
	transform: translate(-50%, -50%) translateY(-2px) scale(1.03);
}

.site-footer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: clamp(18px, 2.2vw, 36px);
	padding-bottom: clamp(24px, 2.6vw, 44px);
}

/* Explicit visual order (independent of source order) so the three
   columns land exactly where intended regardless of RTL flex defaults —
   same defensive fix used previously for this exact class of bug
   (see the education-grid / nav-pill history in CHANGELOG). */
.site-footer__contact { order: 1; } /* right */
.site-footer__trust   { order: 2; } /* middle */
.site-footer__brand   { order: 3; } /* left */

/* --- Brand: logo image placeholder + small slogan underneath --- */
.site-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	flex: 0 0 auto;
}

.site-footer__logo-img {
	display: block;
	height: clamp(48px, 4.2vw, 80px);
	width: auto;
	max-width: clamp(140px, 12vw, 220px);
	object-fit: contain;
}

.site-footer__slogan {
	margin: 0;
	font-size: clamp(11px, 0.83vw, 15px);
	font-weight: 600;
	color: rgba(34, 34, 34, 0.65);
}

/* --- Contact info with icons --- */
.site-footer__contact {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	flex: 0 0 auto;
}

.site-footer__contact-item {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-weight: 700;
	color: var(--color-text-on-yellow);
}

.site-footer__contact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(24px, 1.9vw, 30px);
	height: clamp(24px, 1.9vw, 30px);
	border-radius: 50%;
	background: rgba(34, 34, 34, 0.1);
	color: var(--color-text-on-yellow);
	flex: 0 0 auto;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

/* Links wrap real tel:/mailto: targets; hover fades the icon to dark/yellow
   and underlines the text, no layout shift. */
.site-footer__contact-item a {
	transition: color 0.2s ease;
}

.site-footer__contact-item:hover .site-footer__contact-icon {
	background: var(--color-dark);
	color: var(--color-yellow);
	transform: scale(1.08);
}

.site-footer__contact-item a:hover,
.site-footer__contact-item a:focus-visible {
	color: var(--color-white);
	text-decoration: underline;
}

/* --- Trust badges (اینماد + ساماندهی) — placeholder boxes only, each
   sized to hold a typical seal image once the client provides one; now
   sits as the middle column of the top row instead of a separate
   full-width strip. Distinct lift+shadow hover so they read as
   clickable trust seals rather than static decoration. --- */
.site-footer__trust {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(10px, 1.1vw, 20px);
	flex: 0 0 auto;
}

.site-footer__trust-badge {
	width: clamp(56px, 4.5vw, 84px);
	height: clamp(56px, 4.5vw, 84px);
	border: 2px dashed rgba(34, 34, 34, 0.35);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 6px;
	color: var(--color-text-on-yellow);
	opacity: 0.75;
	background: rgba(255, 255, 255, 0.15);
	transition: transform 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.site-footer__trust-badge:hover {
	opacity: 1;
	transform: translateY(-4px) scale(1.05);
	border-color: var(--color-dark);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.site-footer__trust-label {
	font-size: clamp(10px, 0.7vw, 12px);
	font-weight: 700;
	line-height: 1.4;
}

/* Copyright: moved inside the yellow box per request — now its own
   bottom-most strip, separated by a thin hairline instead of living
   outside the curve on the page background. */
.site-footer__bottom {
	text-align: center;
	padding: clamp(12px, 1.3vw, 20px) var(--container-padding);
	border-top: 1px solid rgba(34, 34, 34, 0.15);
}

.site-footer__copyright {
	margin: 0;
	font-size: clamp(11px, 0.73vw, 14px);
	font-weight: 600;
	color: rgba(34, 34, 34, 0.75);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.site-footer__back-to-top,
	.site-footer__contact-icon,
	.site-footer__trust-badge {
		transition: none !important;
	}
}

/* =========================================================
   RESPONSIVE — layout re-flow only (stacking columns, nav
   direction) for very small screens; all sizes above already
   scale proportionally via clamp() so nothing needs to be
   redefined here except the parts that must genuinely reflow.
   ========================================================= */
@media (max-width: 900px) {
	.about__inner { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
	.education__inner { grid-template-columns: 1fr; }
	.education__content,
	.education__grid { grid-column: 1; }
	.education__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.site-header__inner { height: auto; }
	.site-header__bar {
		position: static;
		transform: none;
		flex-direction: column;
		align-items: stretch;
		height: auto;
		width: 100%;
		border-radius: clamp(20px, 6vw, 32px);
		padding: 12px 16px 14px;
		gap: 10px;
	}

	/* ردیف بالا: لوگو در وسط + دکمه‌ی همبرگری برای باز/بسته کردن منو —
	   دقیقاً الگوی هدر یک اپلیکیشن واقعی روی موبایل، نه فهرست درهم. */
	.site-header__logo {
		order: -1;
		width: 120px;
		height: 56px;
		margin: 0 auto;
	}
	.hdr-cluster { width: 100%; justify-content: space-between !important; gap: 8px; }
	.hdr-cluster--right { order: -2; }
	.hdr-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 4px; }
	.hdr-nav.is-open { display: flex; }
	.hdr-nav > a, .hdr-nav__item > a {
		display: block; width: 100%; padding: 10px 6px; text-align: center;
		border-radius: 10px;
	}
	.hdr-nav > a:hover, .hdr-nav__item > a:hover { background: rgba(255, 255, 255, 0.06); }
	.hdr-nav__item--dropdown .hdr-dropdown { position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none; box-shadow: none; border: none; background: rgba(0, 0, 0, 0.2); margin-top: 4px; display: none; }
	.hdr-nav__item--dropdown.is-open .hdr-dropdown { display: flex; }
	.hdr-nav__item--dropdown:hover .hdr-dropdown { display: none; } /* هاور روی موبایل بی‌معناست؛ فقط با تپ باز می‌شود */
	.hdr-nav__item--dropdown.is-open .hdr-dropdown { display: flex !important; }

	.hdr-menu-toggle {
		display: flex; align-items: center; justify-content: center;
		width: 38px; height: 38px; border-radius: 50%; border: none;
		background: rgba(255, 255, 255, 0.08); color: var(--color-white);
		flex: 0 0 auto;
	}
	.hdr-search { flex: 1 1 100%; width: auto; max-width: none; order: 3; }
	.hdr-cluster--left { order: 6; flex-wrap: wrap; row-gap: 8px; }
	.hdr-auth-btn { order: 1; }
	.hdr-cluster--left > .hdr-icon-btn { order: 2; }
	.shop__card { width: clamp(140px, 42vw, 220px); }
	.shop__slider-arrow { display: none; } /* swipe handles navigation on touch screens */

	.site-footer__top {
		flex-direction: column;
		text-align: center;
	}
	.site-footer__brand { align-items: center; }
	.site-footer__contact { align-items: center; }
}