/* ==========================================================
   DASHT EMAD — Premium Design System
   Dark luxury · Gold accent · RTL Persian · Vazirmatn
   ========================================================== */

/* ── Vazirmatn @font-face ──────────────────────────────────── */
@font-face {
  font-family: 'Vazirmatn';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/Vazirmatn-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Vazirmatn';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/Vazirmatn-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Vazirmatn';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/Vazirmatn-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Vazirmatn';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/Vazirmatn-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Vazirmatn';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/Vazirmatn-700.woff2') format('woff2');
}

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  --c-bg:         #0C0C0C;
  --c-bg2:        #141414;
  --c-bg3:        #1C1B19;
  --c-gold:       #C4A25A;
  --c-gold-soft:  #D4B571;
  --c-gold-pale:  rgba(196,162,90,.14);
  --c-gold-border:rgba(196,162,90,.22);
  --c-gold-hover: rgba(196,162,90,.45);
  --c-text:       #F5F0E8;
  --c-text-muted: rgba(245,240,232,.58);
  --c-text-dim:   rgba(245,240,232,.32);

  /* Radius */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  /* Spacing */
  --sp-xs:  8px;
  --sp-sm:  16px;
  --sp-md:  24px;
  --sp-lg:  40px;
  --sp-xl:  64px;
  --sp-2xl: 96px;
  --section-py: clamp(72px, 11vw, 128px);

  /* Shadows */
  --sh-card:  0 1px 3px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.45), 0 20px 60px rgba(196,162,90,.06);
  --sh-hover: 0 2px 6px rgba(0,0,0,.5), 0 16px 48px rgba(196,162,90,.18), 0 32px 80px rgba(196,162,90,.08);
  --sh-gold:  0 0 0 1px var(--c-gold-border), 0 8px 32px rgba(196,162,90,.12);

  /* Max widths */
  --mw: 1240px;
  --mw-text: 68ch;

  /* Transitions */
  --t-fast: .15s ease;
  --t-base: .3s cubic-bezier(.4,0,.2,1);
  --t-slow: .55s cubic-bezier(.4,0,.2,1);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, video { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font: inherit; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; }

/* ── Base ──────────────────────────────────────────────────── */
html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: 'Vazirmatn', sans-serif;
  font-weight: 400;
  background: var(--c-bg);
  color: var(--c-text);
  direction: rtl;
  text-align: right;
  line-height: 2;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(196,162,90,.25); color: var(--c-text); }

:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--c-bg2); }
::-webkit-scrollbar-thumb { background: var(--c-gold-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-gold); }

/* ── Layout ────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--mw);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 56px);
}

.section { padding-block: var(--section-py); }

/* ── Typography ────────────────────────────────────────────── */
.display-heading {
  font-size: clamp(2.8rem, 6.5vw, 4.8rem);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: .04em;
  color: var(--c-text);
}

.section-heading {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 400;
  line-height: 1.4;
  color: var(--c-text);
}

.section-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .15em;
  color: var(--c-gold);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.section-intro {
  font-size: 1rem;
  font-weight: 400;
  line-height: 2;
  color: var(--c-text-muted);
  max-width: var(--mw-text);
}

/* Gold underline rule for section titles */
.heading-rule {
  display: inline-block;
  position: relative;
  padding-bottom: 16px;
}
.heading-rule::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60px;
  height: 1px;
  background: var(--c-gold);
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  font-family: 'Vazirmatn', sans-serif;
  font-size: .9rem;
  font-weight: 600;
  border-radius: var(--r-sm);
  transition: var(--t-base);
  white-space: nowrap;
}

.btn-ghost {
  border: 1px solid var(--c-gold-border);
  color: var(--c-text);
  background: transparent;
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  border-color: var(--c-gold);
  background: var(--c-gold-pale);
  color: var(--c-gold);
}

.btn-gold {
  border: 1px solid var(--c-gold);
  color: var(--c-bg);
  background: var(--c-gold);
  font-weight: 700;
}
.btn-gold:hover, .btn-gold:focus-visible {
  background: var(--c-gold-soft);
  border-color: var(--c-gold-soft);
  box-shadow: 0 4px 20px rgba(196,162,90,.35);
}

.btn-outline-gold {
  border: 1px solid var(--c-gold);
  color: var(--c-gold);
  background: transparent;
}
.btn-outline-gold:hover, .btn-outline-gold:focus-visible {
  background: var(--c-gold);
  color: var(--c-bg);
}

/* ── Gold divider ───────────────────────────────────────────── */
.gold-rule {
  height: 1px;
  background: var(--c-gold-border);
  border: none;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(16px, 4vw, 56px);
  height: 72px;
  background: rgba(12,12,12,.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--c-gold-border);
  transition: background var(--t-base), box-shadow var(--t-base);
}
.site-header.scrolled {
  background: rgba(10,10,10,.96);
  box-shadow: 0 4px 24px rgba(0,0,0,.45);
}

.header-logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 2px;
}
.header-logo .logo-fa {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--c-gold);
  letter-spacing: .04em;
}
.header-logo .logo-lat {
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .25em;
  color: var(--c-gold-border);
  text-transform: uppercase;
  direction: ltr;
  text-align: left;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.5vw, 32px);
}

.header-nav a {
  font-size: .8rem;
  font-weight: 600;
  color: var(--c-text-muted);
  letter-spacing: .04em;
  position: relative;
  transition: color var(--t-fast);
}
.header-nav a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  right: 0;
  width: 0;
  height: 1px;
  background: var(--c-gold);
  transition: width var(--t-base);
}
.header-nav a:hover,
.header-nav a.active {
  color: var(--c-gold);
}
.header-nav a:hover::after,
.header-nav a.active::after { width: 100%; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-phone {
  font-size: .8rem;
  color: var(--c-text-muted);
  direction: ltr;
  white-space: nowrap;
  transition: color var(--t-fast);
}
.header-phone:hover { color: var(--c-gold); }

/* Hamburger (mobile only) */
.btn-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--c-text);
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.btn-menu:hover { color: var(--c-gold); background: var(--c-gold-pale); }

/* ── Mobile Drawer ─────────────────────────────────────────── */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
}
.mobile-drawer.open { pointer-events: auto; }

.drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--t-base);
}
.mobile-drawer.open .drawer-overlay { opacity: 1; }

.drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(320px, 85vw);
  height: 100%;
  background: var(--c-bg2);
  border-left: 1px solid var(--c-gold-border);
  padding: 80px 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  transform: translateX(100%);
  transition: transform var(--t-slow);
}
.mobile-drawer.open .drawer-panel { transform: translateX(0); }

.drawer-close {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 40px;
  height: 40px;
  color: var(--c-text-muted);
  border-radius: var(--r-sm);
  transition: color var(--t-fast);
}
.drawer-close:hover { color: var(--c-gold); }

.drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.drawer-nav a {
  font-size: 1rem;
  font-weight: 500;
  color: var(--c-text-muted);
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: color var(--t-fast), padding-right var(--t-base);
}
.drawer-nav a:hover {
  color: var(--c-gold);
  padding-right: 8px;
}
.drawer-logo {
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--c-gold);
  letter-spacing: .06em;
  margin-bottom: 8px;
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('/assets/img/hero.webp');
  background-size: cover;
  background-position: center 30%;
  animation: hero-drift 16s ease-in-out infinite alternate;
}
@keyframes hero-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(12,12,12,.25) 0%,
    rgba(12,12,12,.4)  45%,
    rgba(12,12,12,.78) 85%,
    rgba(12,12,12,.97) 100%
  );
}

/* Thin gold inset frame */
.hero-frame {
  position: absolute;
  inset: 48px;
  border: 1px solid rgba(196,162,90,.35);
  pointer-events: none;
  z-index: 2;
}
.hero-frame::before,
.hero-frame::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--c-gold);
  border-style: solid;
  opacity: .7;
}
.hero-frame::before {
  top: -1px; right: -1px;
  border-width: 1px 1px 0 0;
}
.hero-frame::after {
  bottom: -1px; left: -1px;
  border-width: 0 0 1px 1px;
}

.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding-inline: clamp(20px, 5vw, 80px);
  max-width: 860px;
}

.hero-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3em;
  color: var(--c-gold);
  text-transform: uppercase;
  margin-bottom: 20px;
  opacity: 0;
  animation: fade-up .8s .2s forwards;
}

.hero-title {
  font-size: clamp(3.2rem, 7vw, 5.5rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: .06em;
  color: var(--c-text);
  margin-bottom: 16px;
  opacity: 0;
  animation: fade-up .9s .4s forwards;
}

.hero-sub {
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 400;
  color: var(--c-gold);
  letter-spacing: .04em;
  margin-bottom: 48px;
  opacity: 0;
  animation: fade-up .9s .6s forwards;
}

.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: fade-up .9s .8s forwards;
}

.hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--c-gold);
  opacity: .6;
  animation: scroll-bob 2.5s ease-in-out infinite;
}
.hero-scroll span {
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
}

@keyframes scroll-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   TRUST STRIP (stats under hero)
   ========================================================= */
.trust-strip {
  background: var(--c-bg2);
  border-top: 1px solid var(--c-gold-border);
  border-bottom: 1px solid var(--c-gold-border);
  padding-block: 32px;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--c-gold-border);
}

.trust-item {
  background: var(--c-bg2);
  text-align: center;
  padding: 24px 16px;
}

.trust-num {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 300;
  color: var(--c-gold);
  line-height: 1;
  margin-bottom: 6px;
}

.trust-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--c-text-muted);
  letter-spacing: .04em;
}

/* =========================================================
   VENUES SECTION
   ========================================================= */
.venues-section {
  padding-block: var(--section-py);
  background: var(--c-bg);
}

.venues-header {
  text-align: center;
  margin-bottom: clamp(40px, 6vw, 72px);
}

.venues-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-gold-border);
  border: 1px solid var(--c-gold-border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.venue-card {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  cursor: pointer;
  display: block;
}

.venue-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .65s cubic-bezier(.4,0,.2,1);
}
.venue-card:hover img { transform: scale(1.06); }

.venue-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(5,5,5,.95) 0%,
    rgba(5,5,5,.5)  45%,
    rgba(5,5,5,.1)  80%,
    transparent 100%
  );
  transition: var(--t-base);
}
.venue-card:hover .venue-card-overlay {
  background: linear-gradient(
    to top,
    rgba(5,5,5,.97) 0%,
    rgba(5,5,5,.65) 50%,
    rgba(196,162,90,.06) 100%
  );
}

.venue-card-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 24px;
}

.venue-cat {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--c-gold);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.venue-name {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--c-text);
  margin-bottom: 12px;
  line-height: 1.5;
}

.venue-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--c-gold);
  letter-spacing: .04em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-base), transform var(--t-base);
}
.venue-card:hover .venue-link {
  opacity: 1;
  transform: translateY(0);
}
.venue-link svg { transform: rotate(180deg); }

/* =========================================================
   ABOUT TEASER
   ========================================================= */
.about-teaser {
  padding-block: var(--section-py);
  background: var(--c-bg2);
}

.about-grid {
  display: grid;
  grid-template-columns: 55% 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.about-photo-wrap {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4/3;
}

.about-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gold corner accents */
.about-photo-wrap::before,
.about-photo-wrap::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  border-color: var(--c-gold);
  border-style: solid;
  z-index: 2;
  opacity: .8;
}
.about-photo-wrap::before {
  top: 12px; right: 12px;
  border-width: 1px 1px 0 0;
}
.about-photo-wrap::after {
  bottom: 12px; left: 12px;
  border-width: 0 0 1px 1px;
}

.about-text { display: flex; flex-direction: column; gap: 24px; }

.about-body {
  font-size: .95rem;
  line-height: 2.1;
  color: var(--c-text-muted);
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 8px;
}

.stat-card {
  border: 1px solid var(--c-gold-border);
  border-radius: var(--r-sm);
  padding: 20px 16px;
  background: var(--c-gold-pale);
  text-align: center;
}

.stat-num {
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  font-weight: 300;
  color: var(--c-gold);
  line-height: 1;
  margin-bottom: 6px;
}

.stat-label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--c-text-muted);
  letter-spacing: .05em;
}

/* =========================================================
   CAMEL PARK BANNER
   ========================================================= */
.camel-banner {
  position: relative;
  height: clamp(320px, 45vw, 520px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.camel-banner-bg {
  position: absolute;
  inset: 0;
  background-image: url('/assets/img/camel_park.webp');
  background-size: cover;
  background-position: center;
}

.camel-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(12,12,12,.8) 0%, rgba(12,12,12,.5) 100%);
}

.camel-banner-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-inline: 24px;
}

.camel-banner-title {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 300;
  color: var(--c-gold);
  letter-spacing: .06em;
  margin-bottom: 16px;
}

.camel-banner-sub {
  font-size: 1rem;
  color: var(--c-text-muted);
  margin-bottom: 28px;
}

/* =========================================================
   EVENTS SECTION
   ========================================================= */
.events-section {
  padding-block: var(--section-py);
  background: var(--c-bg);
}

.events-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(36px, 5vw, 60px);
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.event-card {
  background: var(--c-bg2);
  border: 1px solid var(--c-gold-border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-card);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.event-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-hover);
}

.event-img {
  aspect-ratio: 16/9;
  overflow: hidden;
}
.event-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.event-card:hover .event-img img { transform: scale(1.05); }

.event-body { padding: 24px; }

.event-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.event-date {
  font-size: .78rem;
  font-weight: 600;
  color: var(--c-gold);
  letter-spacing: .05em;
}

.event-tag {
  font-size: .7rem;
  padding: 2px 10px;
  border: 1px solid var(--c-gold-border);
  border-radius: 100px;
  color: var(--c-gold);
}

.event-title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--c-text);
  margin-bottom: 8px;
  line-height: 1.6;
}

.event-desc {
  font-size: .85rem;
  color: var(--c-text-muted);
  line-height: 1.8;
  margin-bottom: 16px;
}

.event-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--c-gold);
  transition: gap var(--t-fast);
}
.event-cta:hover { gap: 10px; }

/* =========================================================
   GALLERY TEASER
   ========================================================= */
.gallery-teaser {
  padding-block: var(--section-py);
  background: var(--c-bg2);
}

.gallery-header {
  text-align: center;
  margin-bottom: clamp(36px, 5vw, 60px);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 10px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.gallery-item:nth-child(1) { aspect-ratio: 4/3; }
.gallery-item:nth-child(2) { aspect-ratio: 3/4; grid-row: span 2; }
.gallery-item:nth-child(3) { aspect-ratio: 4/3; }
.gallery-item:nth-child(4) { aspect-ratio: 4/3; }
.gallery-item:nth-child(5) { aspect-ratio: 4/3; }
.gallery-item:nth-child(6) { aspect-ratio: 4/3; }

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.gallery-item:hover img { transform: scale(1.06); }

.gallery-item-overlay {
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  transition: border-color var(--t-base);
  pointer-events: none;
}
.gallery-item:hover .gallery-item-overlay { border-color: var(--c-gold); }

.gallery-footer {
  text-align: center;
  margin-top: clamp(32px, 4vw, 48px);
}

/* =========================================================
   SERVICES / ITEMS STRIP
   ========================================================= */
.services-section {
  padding-block: var(--section-py);
  background: var(--c-bg3);
}

.services-header {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.service-card {
  background: var(--c-bg2);
  border: 1px solid var(--c-gold-border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-card);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-hover);
  border-color: rgba(196,162,90,.4);
}

.service-img {
  aspect-ratio: 1;
  overflow: hidden;
}
.service-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.service-card:hover .service-img img { transform: scale(1.06); }

.service-body { padding: 20px; }

.service-cat {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--c-gold);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.service-name {
  font-size: .9rem;
  font-weight: 500;
  color: var(--c-text);
  margin-bottom: 8px;
  line-height: 1.6;
}

.service-price {
  font-size: .85rem;
  font-weight: 600;
  color: var(--c-gold-soft);
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--c-bg2);
  border-top: 1px solid var(--c-gold-border);
}

.footer-main {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  padding-block: clamp(56px, 8vw, 96px);
}

.footer-logo-fa {
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--c-gold);
  letter-spacing: .06em;
  margin-bottom: 6px;
}
.footer-logo-lat {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .25em;
  color: var(--c-text-dim);
  text-transform: uppercase;
  direction: ltr;
  margin-bottom: 16px;
}

.footer-tagline {
  font-size: .88rem;
  color: var(--c-text-muted);
  line-height: 2;
  max-width: 30ch;
}

.footer-col h4 {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 20px;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  font-size: .88rem;
  color: var(--c-text-muted);
  line-height: 1.7;
}
.footer-contact-item svg { flex-shrink: 0; margin-top: 3px; color: var(--c-gold); }

.footer-phone {
  direction: ltr;
  display: inline-block;
  color: var(--c-text);
  font-weight: 500;
  transition: color var(--t-fast);
}
.footer-phone:hover { color: var(--c-gold); }

.footer-nav { display: flex; flex-direction: column; gap: 10px; }
.footer-nav a {
  font-size: .88rem;
  color: var(--c-text-muted);
  transition: color var(--t-fast), padding-right var(--t-base);
}
.footer-nav a:hover {
  color: var(--c-gold);
  padding-right: 6px;
}

.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.footer-social a {
  width: 40px;
  height: 40px;
  border: 1px solid var(--c-gold-border);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-gold);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.footer-social a:hover {
  background: var(--c-gold-pale);
  border-color: var(--c-gold);
}

.footer-bottom {
  border-top: 1px solid var(--c-gold-border);
  padding-block: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-copy {
  font-size: .75rem;
  color: var(--c-text-dim);
  line-height: 1.8;
}

.footer-credits {
  font-size: .72rem;
  color: var(--c-text-dim);
  direction: ltr;
  text-align: left;
}

/* =========================================================
   STUB PAGES
   ========================================================= */
.stub-page {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--section-py);
}

.stub-inner {
  text-align: center;
  max-width: 560px;
}

.stub-icon {
  font-size: 3rem;
  margin-bottom: 24px;
  color: var(--c-gold);
  opacity: .6;
}

.stub-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 300;
  color: var(--c-gold);
  margin-bottom: 12px;
}

.stub-sub {
  font-size: .95rem;
  color: var(--c-text-muted);
  line-height: 2;
  margin-bottom: 32px;
}

/* =========================================================
   PAGE-SPECIFIC HERO (sub-pages)
   ========================================================= */
.page-hero {
  position: relative;
  height: clamp(300px, 40vw, 440px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: 72px;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(12,12,12,.4) 0%, rgba(12,12,12,.85) 100%);
}

.page-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

.page-hero-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 300;
  color: var(--c-gold);
  letter-spacing: .06em;
  margin-bottom: 8px;
}

.page-hero-sub {
  font-size: .95rem;
  color: var(--c-text-muted);
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  color: var(--c-text-dim);
  margin-bottom: var(--sp-lg);
  flex-wrap: wrap;
}
.breadcrumb a {
  color: var(--c-text-muted);
  transition: color var(--t-fast);
}
.breadcrumb a:hover { color: var(--c-gold); }
.breadcrumb .sep { color: var(--c-text-dim); }
.breadcrumb .current { color: var(--c-gold); }

/* =========================================================
   DECORATIVE ELEMENTS
   ========================================================= */
.orb-decor {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  opacity: .12;
  background: var(--c-gold);
}

/* =========================================================
   SCROLL REVEAL (JS targets)
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1);
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .hero-bg { animation: none; }
}

/* =========================================================
   RESPONSIVE — 900px breakpoint
   ========================================================= */
@media (max-width: 900px) {
  .header-nav, .header-phone { display: none; }
  .btn-menu { display: flex; }

  .venues-grid { grid-template-columns: repeat(2, 1fr); }
  .events-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .events-grid .event-card:last-child { display: none; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-main > :first-child { grid-column: span 2; }
  .about-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid .trust-item:nth-child(2) { border-bottom: 1px solid var(--c-gold-border); }
}

/* =========================================================
   RESPONSIVE — 640px breakpoint
   ========================================================= */
@media (max-width: 640px) {
  .venues-grid { grid-template-columns: 1fr; }
  .venue-card { aspect-ratio: 3/2; }
  .venue-card:nth-child(n+4) { display: none; }
  .venue-link { opacity: 1; transform: none; }
  .events-grid { grid-template-columns: 1fr; }
  .events-grid .event-card:last-child { display: flex; flex-direction: column; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item:nth-child(2) { grid-row: auto; aspect-ratio: 4/3; }
  .gallery-item:nth-child(n+5) { display: none; }
  .footer-main { grid-template-columns: 1fr; }
  .footer-main > :first-child { grid-column: 1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .about-stats { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   RESPONSIVE — 390px (mobile)
   ========================================================= */
@media (max-width: 420px) {
  .hero-frame { inset: 20px; }
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-actions .btn { width: 100%; max-width: 280px; }
  .services-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .about-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-item:nth-child(2) { aspect-ratio: 4/3; }
  .footer-social { flex-wrap: wrap; }
  .venues-header, .gallery-header, .events-header { text-align: right; }
  .events-header { flex-direction: column; align-items: flex-start; }
}

/* Experience landing pages — a continuous desert itinerary */
.xp-hero{min-height:620px;padding:150px 0 80px;display:flex;align-items:flex-end;position:relative;isolation:isolate;background:#111}.xp-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--xp-hero) center/cover}.xp-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,9,17,.97) 8%,rgba(7,9,17,.72) 52%,rgba(7,9,17,.22))}.xp-hero-content{width:100%}.xp-hero h1{font-size:clamp(2.6rem,6vw,5.8rem);font-weight:300;line-height:1.1;max-width:11ch;margin:14px 0 18px}.xp-hero-content>p:not(.section-eyebrow){max-width:54ch;color:#ddd;line-height:2;margin-bottom:28px}.xp-section{padding-block:90px}.xp-heading{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:36px}.xp-heading h2{font-size:clamp(1.8rem,4vw,3.2rem);font-weight:300;margin-top:9px}.xp-heading>p{color:var(--c-text-muted);line-height:2;max-width:52ch}.xp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.xp-grid:has(.xp-card:only-child){grid-template-columns:minmax(0,760px);justify-content:center}.xp-card{display:grid;grid-template-columns:42% 1fr;min-width:0;background:var(--c-bg2);border:1px solid var(--c-gold-border);border-radius:var(--r-md);overflow:hidden}.xp-card>img{width:100%;height:100%;min-height:410px;object-fit:cover}.xp-card-body{padding:26px;display:flex;min-width:0;flex-direction:column}.xp-card-top{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}.xp-price{color:var(--c-gold);font-weight:700}.xp-status{font-size:.7rem;color:#8ed39a;border:1px solid currentColor;border-radius:999px;padding:4px 9px}.xp-card h3{font-size:1.35rem;margin:22px 0 10px}.xp-card h3 small{display:block;color:var(--c-text-dim);font:600 .65rem Arial,sans-serif;letter-spacing:.14em;margin-top:4px}.xp-card p{color:var(--c-text-muted);font-size:.84rem;line-height:1.85}.xp-card ul{padding:0;margin:18px 0 26px;list-style:none;color:var(--c-text-dim);font-size:.76rem;line-height:2}.xp-card li::before{content:"—";color:var(--c-gold);margin-inline-end:8px}.xp-card .btn{margin-top:auto;width:100%;min-height:48px}.xp-journey{background:var(--c-bg2);border-block:1px solid var(--c-gold-border);padding:38px 0 46px}.xp-journey ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr)}.xp-journey li{display:flex;align-items:center;gap:12px;padding:12px 20px;border-inline-end:1px solid var(--c-gold-border)}.xp-journey li:first-child{border-inline-end:0}.xp-journey b{flex:0 0 38px;height:38px;border:1px solid var(--c-gold);border-radius:50%;display:grid;place-items:center;color:var(--c-gold)}.xp-journey span{font-size:.78rem;color:var(--c-text-muted)}

@media(max-width:900px){.xp-grid{grid-template-columns:1fr}.xp-journey ol{grid-template-columns:1fr 1fr}.xp-journey li:nth-child(3){border-inline-end:0}.xp-card>img{min-height:330px}}
@media(max-width:768px){.xp-hero{min-height:520px;padding-top:116px}.xp-section{padding-block:56px}.xp-heading{grid-template-columns:1fr;gap:14px}.xp-card{grid-template-columns:1fr}.xp-card>img{height:230px;min-height:0}.xp-card-body{padding:20px}.xp-card-top{order:-1}.xp-card .btn{width:100%}.xp-section,.xp-hero-content{scroll-margin-top:84px}.mobile-drawer:not(.open){visibility:hidden;display:none;pointer-events:none}.mobile-drawer.open{display:block;visibility:visible;pointer-events:auto}}
@media(max-width:540px){.xp-hero{min-height:480px;padding:104px 0 54px}.xp-hero h1{font-size:2.45rem}.xp-section{padding-inline:16px}.xp-card>img{height:200px}.xp-journey ol{grid-template-columns:1fr}.xp-journey li,.xp-journey li:nth-child(3){border-inline-end:0;border-bottom:1px solid var(--c-gold-border)}.xp-journey li:last-child{border-bottom:0}}
@media(max-width:390px){.site-header{height:68px;padding-inline:12px}.header-nav,.header-phone{display:none}.header-logo .logo-fa{font-size:1rem}.header-cart-btn,.header-user-btn,.btn-menu{width:40px;height:40px}.xp-hero{padding-top:100px}.xp-card-body{padding:17px}.xp-card-top{align-items:flex-start}.res-form{scroll-margin-top:82px}.res-service-copy{padding:15px}.res-service-top{flex-direction:column;align-items:flex-start}.res-service-action,.res-summary .btn{width:100%;min-height:48px}.res-summary{padding:12px}}

/* Integrated reservation — a desert itinerary, not a generic checkout */
.res-hero{min-height:420px;padding:150px 0 70px;background:linear-gradient(90deg,rgba(8,8,8,.93),rgba(8,8,8,.38)),url('../img/hero.webp') center/cover;display:flex;align-items:flex-end}.res-hero-inner{width:100%}.res-hero h1{font-size:clamp(2.3rem,6vw,5.5rem);font-weight:300;line-height:1.1;margin:12px 0;color:var(--c-text)}.res-hero p:last-child{color:var(--c-text-muted);font-size:1rem}.res-main{padding-block:64px 100px}.res-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);padding:0;margin:0 0 42px;counter-reset:x}.res-steps li{display:flex;align-items:center;gap:12px;color:var(--c-text-dim);border-bottom:1px solid var(--c-gold-border);padding:0 0 18px}.res-steps li b{border:1px solid var(--c-gold-border);width:34px;height:34px;border-radius:50%;display:grid;place-items:center}.res-steps li.active{color:var(--c-gold);border-color:var(--c-gold)}.res-type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.res-type{position:relative;isolation:isolate;min-height:230px;border:1px solid var(--c-gold-border);border-radius:var(--r-md);overflow:hidden;padding:24px;text-align:right;color:white;font:inherit;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;background:#171717}.res-type:before{content:"";position:absolute;inset:0;z-index:-2;background:var(--res-img) center/cover;transition:transform .35s}.res-type:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(0,0,0,.95),rgba(0,0,0,.08))}.res-type:hover:before,.res-type.selected:before{transform:scale(1.04)}.res-type.selected{outline:2px solid var(--c-gold);outline-offset:3px}.res-type span{font-size:1.1rem;font-weight:600}.res-type small{color:#ddd;margin-top:6px}.res-form{display:none;margin-top:64px;scroll-margin-top:96px}.res-form.is-open{display:block}.res-form-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}.res-form-head h2{font-size:1.8rem;font-weight:400;margin-top:8px}.res-live{color:#81c784;font-size:.78rem}.res-services{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:22px}.res-service{display:flex;align-items:center;gap:16px;background:var(--c-bg2);border:1px solid var(--c-gold-border);padding:12px;border-radius:var(--r-md);cursor:pointer}.res-service[hidden]{display:none!important}.res-service:has(input:checked){border-color:var(--c-gold);background:var(--c-gold-pale)}.res-service img{width:88px;height:68px;object-fit:cover;border-radius:8px}.res-service input{accent-color:var(--c-gold)}.res-service span{display:grid;gap:4px}.res-service small{color:var(--c-text-muted)}.res-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;background:var(--c-bg2);border:1px solid var(--c-gold-border);border-radius:var(--r-md);padding:28px}.res-fields label{display:grid;gap:7px}.res-fields label>span{font-size:.79rem;color:var(--c-text-muted)}.res-fields em{color:#f87171;font-style:normal}.res-fields input,.res-fields select,.res-fields textarea{width:100%;min-height:48px;background:var(--c-bg);border:1px solid var(--c-gold-border);border-radius:8px;color:var(--c-text);font:inherit;padding:10px 13px}.res-fields textarea{resize:vertical}.res-fields input:focus,.res-fields select:focus,.res-fields textarea:focus{outline:2px solid var(--c-gold);outline-offset:2px}.res-fields [aria-invalid=true]{border-color:#f87171}.res-wide{grid-column:1/-1}.restaurant-only,.hotel-only,.event-only,.camel-only{display:none!important}.res-form[data-type=restaurant] .restaurant-only,.res-form[data-type=hotel] .hotel-only,.res-form[data-type=event] .event-only,.res-form[data-type=camel] .camel-only{display:grid!important}.res-form[data-type=hotel] .timed-only{display:none}.res-summary{position:sticky;bottom:14px;margin:22px auto 0;background:color-mix(in srgb,var(--c-bg2) 94%,transparent);backdrop-filter:blur(14px);border:1px solid var(--c-gold);border-radius:var(--r-md);padding:18px 22px;display:grid;grid-template-columns:repeat(4,1fr) auto;align-items:center;gap:18px;z-index:5}.res-summary div{display:grid;gap:3px}.res-summary span{font-size:.7rem;color:var(--c-text-dim)}.res-summary strong{font-size:.85rem}.res-summary .btn{white-space:nowrap}.res-alert{padding:18px 22px;border:1px solid rgba(248,113,113,.4);background:rgba(248,113,113,.08);border-radius:var(--r-md);margin-bottom:24px;color:#fca5a5}.res-alert ul{margin:8px 20px 0}.res-confirm{max-width:760px;margin:auto;text-align:center;background:var(--c-bg2);border:1px solid var(--c-gold-border);padding:clamp(28px,6vw,64px);border-radius:var(--r-md)}.res-check{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;background:rgba(76,175,80,.12);border:1px solid #81c784;color:#81c784;font-size:2rem}.res-confirm h2{font-size:2rem;font-weight:400;margin:10px}.res-confirm>p{color:var(--c-text-muted)}.res-confirm dl{margin:32px 0;display:grid;grid-template-columns:1fr 1fr;text-align:right;border-top:1px solid var(--c-gold-border)}.res-confirm dl div{padding:14px;border-bottom:1px solid var(--c-gold-border);display:flex;justify-content:space-between;gap:12px}.res-confirm dt{color:var(--c-text-dim)}.res-code{color:var(--c-gold);font-weight:700}.ticket-qr{width:156px;height:156px;padding:10px;background:white;margin:0 auto 18px}.ticket-qr span{display:grid;grid-template-columns:repeat(21,1fr);width:100%;height:100%}.ticket-qr i{display:block}.res-help{font-size:.78rem;margin:12px auto 24px;max-width:52ch}
@media(max-width:900px){.res-type-grid{grid-template-columns:1fr 1fr}.res-fields{grid-template-columns:1fr 1fr}.res-summary{grid-template-columns:1fr 1fr}.res-summary .btn{grid-column:1/-1;width:100%}}
@media(max-width:768px){.res-hero{min-height:360px;padding-top:120px;background-attachment:scroll}.res-main{padding-block:38px 72px}.res-steps li{justify-content:center}.res-steps span{display:none}.res-type-grid{gap:10px}.res-type{min-height:180px;padding:16px}.res-form{margin-top:42px}.res-form-head{display:block}.res-live{display:block;margin-top:8px}.res-services,.res-fields{grid-template-columns:1fr}.res-fields{padding:18px}.res-summary{position:static;grid-template-columns:1fr}.res-summary .btn{grid-column:auto;width:100%}.res-confirm dl{grid-template-columns:1fr}.res-confirm dl div{padding-inline:0}.mobile-drawer{visibility:hidden;pointer-events:none}.mobile-drawer.open{visibility:visible;pointer-events:auto}}
@media(max-width:540px){.res-type-grid{grid-template-columns:1fr}.res-type{min-height:150px}.res-service img{width:72px}.res-hero h1{font-size:2.35rem}}
@media(prefers-reduced-motion:reduce){.res-type:before{transition:none!important}.res-type:hover:before{transform:none}}

/* Reservation product cards: explicit inventory, pricing and one clear action. */
.res-service{align-items:stretch;padding:0;overflow:hidden;position:relative;min-width:0}
.res-service>input{position:absolute;inset-inline-start:14px;top:14px;z-index:2;width:20px;height:20px}
.res-service>img{width:38%;height:auto;min-height:220px;border-radius:0}
.res-service-copy{display:flex!important;flex:1;min-width:0;flex-direction:column;padding:18px;gap:8px!important}
.res-service-top{display:flex!important;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.res-price{color:var(--c-gold);font-size:.92rem;font-weight:700;order:-1}
.res-availability{font-size:.68rem;padding:4px 9px;border-radius:999px;border:1px solid currentColor}
.res-availability.is-available{color:#8ed39a}.res-availability.is-unavailable{color:#e6aa7a}
.res-service-copy>b{font-size:1.05rem;line-height:1.5}.res-service-copy>b small{display:block;color:var(--c-text-dim);font-size:.68rem;letter-spacing:.12em}
.res-description{color:var(--c-text-muted);font-size:.79rem;line-height:1.7}.res-meta{color:var(--c-text-dim);font-size:.72rem;line-height:1.7}
.res-service-action{display:flex!important;align-items:center;justify-content:center;width:100%;min-height:44px;margin-top:auto;border:1px solid var(--c-gold);border-radius:7px;color:var(--c-gold);font-family:Arial,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.08em;white-space:nowrap}
.res-service:has(input:checked) .res-service-action{background:var(--c-gold);color:#111}
.hotel-confirm{display:none}.res-form[data-type=hotel] .default-confirm{display:none}.res-form[data-type=hotel] .hotel-confirm{display:inline;white-space:nowrap}
.mobile-drawer{visibility:hidden}.mobile-drawer.open{visibility:visible}
@media(max-width:768px){
 .res-services{display:flex;flex-direction:column}.res-service{display:flex;flex-direction:column;width:100%}
 .res-service>img{width:100%;height:180px;min-height:0}.res-service-copy{padding:16px}
 .res-service-top{order:-1}.res-price{font-size:1rem}.res-service-action{width:100%;white-space:nowrap}
 .res-summary{display:flex;flex-direction:column;align-items:stretch;padding:14px;gap:8px;background:var(--c-bg2)}
 .res-summary>div{padding:11px 12px;border:1px solid var(--c-gold-border);border-radius:8px;display:flex;justify-content:space-between;align-items:center;gap:14px;min-width:0}
 .res-summary strong{min-width:0;text-align:end;overflow-wrap:anywhere}.res-summary .btn{min-height:48px;white-space:nowrap}
}
@media(max-width:420px){
 .site-header{height:68px;padding-inline:14px}.header-actions{gap:4px}.header-logo .logo-lat{letter-spacing:.15em}
 .res-hero{padding-top:108px;min-height:340px}.res-hero h1{font-size:2.1rem}.res-main{padding-inline:16px}
 .res-type{min-height:144px}.res-form{scroll-margin-top:80px}.res-confirm{padding-inline:20px}
}

/* =========================================================
   HEADER — CART & USER ICONS
   ========================================================= */
.header-cart-btn,
.header-user-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--c-text-muted);
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
  flex-shrink: 0;
}
.header-cart-btn:hover,
.header-user-btn:hover {
  color: var(--c-gold);
  background: var(--c-gold-pale);
}
.cart-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--c-gold);
  color: var(--c-bg);
  font-size: .62rem;
  font-weight: 700;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.cart-badge-inline {
  position: static;
  display: inline-flex;
  margin-right: 4px;
  vertical-align: middle;
}

/* =========================================================
   PAGE CONTENT WRAPPER (for text-heavy pages)
   ========================================================= */
.page-content {
  padding-block: var(--section-py);
  background: var(--c-bg);
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */
.about-page-grid {
  display: grid;
  grid-template-columns: 55% 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  margin-bottom: var(--section-py);
}
.about-page-body p {
  font-size: .95rem;
  line-height: 2.1;
  color: var(--c-text-muted);
  margin-bottom: 20px;
}
.about-page-body h3 {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--c-gold);
  margin-bottom: 12px;
  margin-top: 8px;
}
.about-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-block: var(--section-py);
  background: var(--c-bg2);
}
.value-card {
  border: 1px solid var(--c-gold-border);
  border-radius: var(--r-md);
  padding: 32px 24px;
  background: var(--c-bg);
  text-align: center;
}
.value-card .value-icon {
  font-size: 2rem;
  margin-bottom: 16px;
  color: var(--c-gold);
}
.value-card h4 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--c-text);
  margin-bottom: 10px;
}
.value-card p {
  font-size: .85rem;
  color: var(--c-text-muted);
  line-height: 1.9;
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.contact-info-card {
  background: var(--c-bg2);
  border: 1px solid var(--c-gold-border);
  border-radius: var(--r-md);
  padding: clamp(28px, 4vw, 48px);
  position: sticky;
  top: 96px;
}
.contact-info-card h3 {
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--c-gold);
  margin-bottom: 24px;
}
.contact-info-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
  font-size: .9rem;
  color: var(--c-text-muted);
  line-height: 1.8;
}
.contact-info-row svg { color: var(--c-gold); flex-shrink: 0; margin-top: 3px; }
.contact-info-label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 4px;
}

/* Forms */
.form-card {
  background: var(--c-bg2);
  border: 1px solid var(--c-gold-border);
  border-radius: var(--r-md);
  padding: clamp(28px, 4vw, 48px);
}
.form-card h3 {
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--c-text);
  margin-bottom: 28px;
}
.form-group {
  margin-bottom: 20px;
}
.form-group label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--c-text-muted);
  margin-bottom: 8px;
  letter-spacing: .04em;
}
.form-control {
  display: block;
  width: 100%;
  background: var(--c-bg3);
  border: 1px solid var(--c-gold-border);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  color: var(--c-text);
  font-size: .9rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-control:focus {
  outline: none;
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(196,162,90,.12);
}
.form-control::placeholder { color: var(--c-text-dim); }
textarea.form-control {
  resize: vertical;
  min-height: 120px;
  line-height: 1.8;
}
select.form-control {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23C4A25A' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 14px center;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-alert {
  padding: 14px 18px;
  border-radius: var(--r-sm);
  font-size: .88rem;
  line-height: 1.7;
  margin-bottom: 20px;
}
.form-alert-success {
  background: rgba(76,175,80,.1);
  border: 1px solid rgba(76,175,80,.3);
  color: #81c784;
}
.form-alert-error {
  background: rgba(244,67,54,.1);
  border: 1px solid rgba(244,67,54,.3);
  color: #e57373;
}

/* =========================================================
   SHOP PAGE
   ========================================================= */
.shop-section { padding-block: var(--section-py); background: var(--c-bg); }

.shop-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: clamp(32px, 4vw, 52px);
}
.filter-btn {
  padding: 8px 20px;
  border: 1px solid var(--c-gold-border);
  border-radius: 100px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--c-text-muted);
  background: transparent;
  cursor: pointer;
  transition: all var(--t-fast);
  font-family: 'Vazirmatn', sans-serif;
}
.filter-btn:hover,
.filter-btn.active {
  border-color: var(--c-gold);
  color: var(--c-gold);
  background: var(--c-gold-pale);
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.shop-card {
  background: var(--c-bg2);
  border: 1px solid var(--c-gold-border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-card);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  display: flex;
  flex-direction: column;
}
.shop-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-hover);
  border-color: rgba(196,162,90,.4);
}
.shop-card-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
}
.shop-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.shop-card:hover .shop-card-img img { transform: scale(1.06); }
.shop-card-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shop-card-cat {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--c-gold);
  text-transform: uppercase;
}
.shop-card-name {
  font-size: .92rem;
  font-weight: 500;
  color: var(--c-text);
  line-height: 1.6;
  flex: 1;
}
.shop-card-price {
  font-size: .88rem;
  font-weight: 600;
  color: var(--c-gold-soft);
}
.shop-card-cta {
  display: block;
  text-align: center;
  padding: 10px;
  background: var(--c-gold-pale);
  border-top: 1px solid var(--c-gold-border);
  font-size: .8rem;
  font-weight: 600;
  color: var(--c-gold);
  transition: background var(--t-fast);
}
.shop-card:hover .shop-card-cta { background: rgba(196,162,90,.22); }
.shop-card[data-hidden] { display: none; }

/* =========================================================
   PRODUCT DETAIL PAGE
   ========================================================= */
.product-section {
  padding-block: var(--section-py);
  background: var(--c-bg);
  margin-top: 72px;
}
.product-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.product-gallery {
  position: sticky;
  top: 96px;
}
.product-gallery-main {
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4/3;
  border: 1px solid var(--c-gold-border);
  margin-bottom: 12px;
}
.product-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.product-gallery-main:hover img { transform: scale(1.03); }
.product-gallery-thumbs {
  display: flex;
  gap: 10px;
}
.product-thumb {
  flex: 1;
  aspect-ratio: 4/3;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--c-gold-border);
  cursor: pointer;
  transition: border-color var(--t-fast);
}
.product-thumb:hover,
.product-thumb.active { border-color: var(--c-gold); }
.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-info { display: flex; flex-direction: column; gap: 24px; }
.product-badge {
  display: inline-flex;
  padding: 4px 14px;
  border: 1px solid var(--c-gold-border);
  border-radius: 100px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--c-gold);
}
.product-title {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 400;
  color: var(--c-text);
  line-height: 1.5;
}
.product-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.product-price {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--c-gold);
}
.product-price-unit {
  font-size: .82rem;
  color: var(--c-text-muted);
}
.product-desc {
  font-size: .92rem;
  color: var(--c-text-muted);
  line-height: 2;
  border-top: 1px solid var(--c-gold-border);
  padding-top: 20px;
}
.product-form-card {
  background: var(--c-bg2);
  border: 1px solid var(--c-gold-border);
  border-radius: var(--r-md);
  padding: 28px;
}
.product-form-card h4 {
  font-size: .9rem;
  font-weight: 600;
  color: var(--c-gold);
  margin-bottom: 20px;
  letter-spacing: .05em;
}
.qty-control {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--c-gold-border);
  border-radius: var(--r-sm);
  overflow: hidden;
  width: fit-content;
}
.qty-btn {
  width: 40px;
  height: 40px;
  background: var(--c-bg3);
  color: var(--c-gold);
  font-size: 1.2rem;
  border: none;
  cursor: pointer;
  transition: background var(--t-fast);
  font-family: 'Vazirmatn', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qty-btn:hover { background: var(--c-gold-pale); }
.qty-val {
  width: 52px;
  text-align: center;
  background: var(--c-bg2);
  color: var(--c-text);
  font-size: .95rem;
  border: none;
  border-left: 1px solid var(--c-gold-border);
  border-right: 1px solid var(--c-gold-border);
  padding: 0 8px;
  height: 40px;
  outline: none;
}

/* =========================================================
   CART PAGE
   ========================================================= */
.cart-section { padding-block: var(--section-py); background: var(--c-bg); margin-top: 72px; }
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: start;
}
.cart-table {
  background: var(--c-bg2);
  border: 1px solid var(--c-gold-border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.cart-table-head {
  display: grid;
  grid-template-columns: 80px 1fr auto 100px 44px;
  gap: 12px;
  align-items: center;
  padding: 14px 20px;
  background: var(--c-bg3);
  border-bottom: 1px solid var(--c-gold-border);
  font-size: .75rem;
  font-weight: 600;
  color: var(--c-gold);
  letter-spacing: .08em;
}
.cart-row {
  display: grid;
  grid-template-columns: 80px 1fr auto 100px 44px;
  gap: 12px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--c-gold-border);
}
.cart-row:last-child { border-bottom: none; }
.cart-row-img {
  width: 80px;
  height: 60px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--c-gold-border);
  flex-shrink: 0;
}
.cart-row-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-row-name {
  font-size: .88rem;
  color: var(--c-text);
  font-weight: 500;
  line-height: 1.5;
}
.cart-row-opts {
  font-size: .75rem;
  color: var(--c-text-dim);
  margin-top: 4px;
}
.cart-row-qty {
  font-size: .88rem;
  color: var(--c-text-muted);
  text-align: center;
}
.cart-row-price {
  font-size: .88rem;
  font-weight: 600;
  color: var(--c-gold-soft);
  text-align: left;
  direction: rtl;
}
.cart-remove-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid rgba(244,67,54,.25);
  color: #e57373;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
  font-family: 'Vazirmatn', sans-serif;
}
.cart-remove-btn:hover {
  background: rgba(244,67,54,.12);
  border-color: rgba(244,67,54,.5);
}
.cart-empty {
  text-align: center;
  padding: 80px 24px;
  color: var(--c-text-dim);
  font-size: .95rem;
}
.cart-summary {
  background: var(--c-bg2);
  border: 1px solid var(--c-gold-border);
  border-radius: var(--r-md);
  padding: 28px;
  position: sticky;
  top: 96px;
}
.cart-summary h3 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--c-text);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-gold-border);
}
.cart-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: .88rem;
  color: var(--c-text-muted);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.cart-summary-row.total {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-gold);
  border-bottom: none;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--c-gold-border);
}

/* =========================================================
   CHECKOUT PAGE
   ========================================================= */
.checkout-section { padding-block: var(--section-py); background: var(--c-bg); margin-top: 72px; }
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 28px;
  align-items: start;
}
.checkout-items-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.checkout-item-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: var(--c-bg3);
  border-radius: var(--r-sm);
  border: 1px solid var(--c-gold-border);
}
.checkout-item-img {
  width: 52px;
  height: 42px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.checkout-item-img img { width: 100%; height: 100%; object-fit: cover; }
.checkout-item-name { font-size: .85rem; color: var(--c-text); flex: 1; line-height: 1.5; }
.checkout-item-price { font-size: .82rem; font-weight: 600; color: var(--c-gold-soft); white-space: nowrap; }
.checkout-total-bar {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 1px solid var(--c-gold-border);
  font-weight: 600;
  color: var(--c-gold);
}

/* =========================================================
   AUTH PAGES (Login / Register)
   ========================================================= */
.auth-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bg);
  padding: 96px 16px 40px;
}
.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--c-bg2);
  border: 1px solid var(--c-gold-border);
  border-radius: var(--r-lg);
  padding: clamp(32px, 5vw, 52px);
  box-shadow: var(--sh-gold);
}
.auth-logo {
  text-align: center;
  margin-bottom: 32px;
}
.auth-logo .logo-fa {
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--c-gold);
  letter-spacing: .06em;
}
.auth-logo .logo-lat {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .25em;
  color: var(--c-text-dim);
  direction: ltr;
  text-align: center;
  display: block;
  margin-top: 4px;
}
.auth-title {
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--c-text);
  margin-bottom: 6px;
  text-align: center;
}
.auth-sub {
  font-size: .85rem;
  color: var(--c-text-muted);
  text-align: center;
  margin-bottom: 28px;
}
.auth-divider {
  text-align: center;
  margin: 20px 0;
  position: relative;
}
.auth-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--c-gold-border);
}
.auth-divider span {
  position: relative;
  background: var(--c-bg2);
  padding: 0 12px;
  font-size: .75rem;
  color: var(--c-text-dim);
}
.auth-switch {
  text-align: center;
  margin-top: 20px;
  font-size: .85rem;
  color: var(--c-text-muted);
}
.auth-switch a { color: var(--c-gold); }
.auth-switch a:hover { text-decoration: underline; }

/* =========================================================
   ACCOUNT PAGE
   ========================================================= */
.account-section { padding-block: var(--section-py); background: var(--c-bg); margin-top: 72px; }
.account-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  align-items: start;
}
.account-sidebar {
  background: var(--c-bg2);
  border: 1px solid var(--c-gold-border);
  border-radius: var(--r-md);
  overflow: hidden;
  position: sticky;
  top: 96px;
}
.account-avatar {
  text-align: center;
  padding: 32px 24px;
  border-bottom: 1px solid var(--c-gold-border);
  background: var(--c-bg3);
}
.account-avatar-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--c-gold-pale);
  border: 1px solid var(--c-gold-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  color: var(--c-gold);
}
.account-name {
  font-size: 1rem;
  font-weight: 500;
  color: var(--c-text);
}
.account-email {
  font-size: .78rem;
  color: var(--c-text-dim);
  direction: ltr;
  margin-top: 4px;
}
.account-nav { padding: 12px 0; }
.account-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  font-size: .88rem;
  color: var(--c-text-muted);
  transition: color var(--t-fast), background var(--t-fast);
}
.account-nav a:hover,
.account-nav a.active {
  color: var(--c-gold);
  background: var(--c-gold-pale);
}
.account-main { display: flex; flex-direction: column; gap: 24px; }
.account-card {
  background: var(--c-bg2);
  border: 1px solid var(--c-gold-border);
  border-radius: var(--r-md);
  padding: 28px;
}
.account-card h3 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--c-gold);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-gold-border);
}
.order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: .86rem;
}
.order-row:last-child { border-bottom: none; }
.order-id { color: var(--c-gold); font-weight: 600; }
.order-date { color: var(--c-text-dim); }
.order-total { color: var(--c-gold-soft); font-weight: 600; }
.order-status {
  padding: 3px 12px;
  border-radius: 100px;
  font-size: .7rem;
  font-weight: 600;
  border: 1px solid;
}
.status-pending {
  border-color: rgba(255,167,38,.3);
  color: #ffa726;
  background: rgba(255,167,38,.08);
}
.status-confirmed {
  border-color: rgba(76,175,80,.3);
  color: #81c784;
  background: rgba(76,175,80,.08);
}
.no-orders {
  text-align: center;
  padding: 48px 0;
  color: var(--c-text-dim);
  font-size: .9rem;
}
.no-orders a { color: var(--c-gold); }

/* =========================================================
   404 PAGE
   ========================================================= */
.error-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bg);
  padding-top: 72px;
}
.error-page-inner {
  text-align: center;
  max-width: 520px;
  padding: 40px 24px;
}
.error-num {
  font-size: clamp(5rem, 14vw, 9rem);
  font-weight: 300;
  color: var(--c-gold);
  line-height: 1;
  opacity: .25;
  margin-bottom: 16px;
  letter-spacing: .06em;
}
.error-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 300;
  color: var(--c-text);
  margin-bottom: 12px;
}
.error-sub {
  font-size: .95rem;
  color: var(--c-text-muted);
  line-height: 2;
  margin-bottom: 36px;
}
.error-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* =========================================================
   SUCCESS PAGE (order / message confirmation)
   ========================================================= */
.success-box {
  text-align: center;
  padding: 48px 24px;
}
.success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(76,175,80,.1);
  border: 1px solid rgba(76,175,80,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: #81c784;
}
.success-title {
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--c-text);
  margin-bottom: 10px;
}
.success-sub {
  font-size: .9rem;
  color: var(--c-text-muted);
  line-height: 2;
  max-width: 40ch;
  margin: 0 auto 28px;
}

/* =========================================================
   RESPONSIVE — NEW PAGES
   ========================================================= */
@media (max-width: 1024px) {
  .shop-grid { grid-template-columns: repeat(3, 1fr); }
  .account-layout { grid-template-columns: 1fr; }
  .account-sidebar { position: static; }
}

@media (max-width: 900px) {
  .about-page-grid { grid-template-columns: 1fr; }
  .about-values-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-info-card { position: static; }
  .product-layout { grid-template-columns: 1fr; }
  .product-gallery { position: static; }
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
  .checkout-layout { grid-template-columns: 1fr; }
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .cart-table-head { display: none; }
  .cart-row {
    grid-template-columns: 64px 1fr 44px;
    grid-template-rows: auto auto;
  }
  .cart-row-qty, .cart-row-price { display: none; }
}

@media (max-width: 640px) {
  .shop-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .about-values-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .product-gallery-thumbs { display: none; }
}

@media (max-width: 420px) {
  .shop-grid { grid-template-columns: 1fr; }
  .auth-card { padding: 28px 20px; }
}