/* =====================================================================
   نظام ليلى — تصميم الصفحات والمكوّنات الخاصة
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. القسم الافتتاحي (Hero)
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 520px at 88% -12%, rgba(var(--primary-rgb), .16), transparent 62%),
    radial-gradient(760px 520px at -8% 108%, rgba(var(--secondary-rgb), .16), transparent 62%),
    var(--bg);
}

.hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 90px;
  background: linear-gradient(180deg, transparent, var(--bg));
  pointer-events: none;
}

.hero-inner {
  position: relative;
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  /* عموديًا فقط — الأفقي يأتي من فئة container (هوامش 18px)
     لا نضع 0 أفقيًا هنا كي لا يلغيها ويلتصق المحتوى بحواف الشاشة */
  padding-top: clamp(12px, 2vw, 24px);
  padding-bottom: clamp(52px, 7vw, 96px);
  grid-template-columns: 1fr;
  z-index: 2;
}

@media (min-width: 900px) {
  .hero-inner { grid-template-columns: 1.05fr .95fr; }
}

/* الهاتف والتابلت: صورة العارض أعلى الهيرو ثم النص تحتها —
   الترتيب الطبيعي للقراءة على الشاشات الضيقة */
@media (max-width: 899px) {
  .hero-slider-wrap { order: 1; }
  .hero-content { order: 2; }

  /* حاجز صارم: لا حركة إطلاقًا للصورة والنص على الشاشات الضيقة —
     !important تُلغي حتى التحويلات المكتوبة inline من جافاسكربت،
     فلا يمكن لأي سبب (كاش قديم أو بارالاكس) أن يجعل الصورة
     تنزلق فوق النص أو خلفه */
  .hero-slider-wrap,
  .hero-content { transform: none !important; }
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(var(--primary-rgb), .18);
  color: var(--primary);
  font-size: .84rem;
  font-weight: 700;
  margin-bottom: 20px;
  box-shadow: var(--shadow-xs);
}

.hero h1 { margin-bottom: .45em; }

.hero h1 .accent {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-lead {
  font-size: clamp(1rem, 1.6vw, 1.14rem);
  color: var(--muted);
  max-width: 560px;
  line-height: 2;
  margin-bottom: 30px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 4vw, 42px);
}

.hero-stat strong {
  display: block;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 800;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.2;
}

.hero-stat span { font-size: .84rem; color: var(--muted); font-weight: 600; }

/* عارض الشرائح */
.hero-slider {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3.4;
  background: var(--gradient-soft);
}

@media (min-width: 900px) { .hero-slider { aspect-ratio: 1 / 1.02; } }

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .9s ease, transform 6s linear;
  pointer-events: none;
}

.hero-slide.is-active { opacity: 1; transform: scale(1); pointer-events: auto; }

.hero-slide img { width: 100%; height: 100%; object-fit: cover; }

.hero-slide-caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 60px 26px 26px;
  background: linear-gradient(180deg, transparent, rgba(43, 26, 47, .82));
  color: #fff;
}

.hero-slide-caption h3 { color: #fff; font-size: 1.15rem; margin-bottom: .3em; }
.hero-slide-caption p { font-size: .88rem; opacity: .85; margin: 0; }

.hero-dots {
  position: absolute;
  bottom: 16px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  display: flex;
  gap: 7px;
  z-index: 3;
}

.hero-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, .5);
  cursor: pointer;
  transition: all var(--t);
}

.hero-dots button.is-active { width: 26px; background: #fff; }

/* بطاقة عائمة فوق الشرائح */
.hero-float {
  position: absolute;
  inset-inline-start: -14px;
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 18px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  z-index: 4;
  animation: float-y 4.5s ease-in-out infinite;
}

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-11px); }
}

.hero-float .hf-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--gradient);
  color: #fff;
}

.hero-float strong { display: block; font-size: .92rem; }
.hero-float span { font-size: .76rem; color: var(--muted); }

@media (max-width: 560px) { .hero-float { display: none; } }

/* ---------------------------------------------------------------------
   2. بطاقات الأقسام
   --------------------------------------------------------------------- */
.cat-grid {
  display: grid;
  gap: clamp(14px, 2vw, 22px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}

.cat-card {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t);
  color: var(--dark);
  isolation: isolate;
}

.cat-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); color: var(--dark); }

.cat-card-media {
  position: relative;
  aspect-ratio: 4 / 3.2;
  overflow: hidden;
  background: var(--gradient-soft);
}

.cat-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}

.cat-card:hover .cat-card-media img { transform: scale(1.09); }

.cat-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(43, 26, 47, .72));
}

.cat-card-icon {
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .92);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.cat-card-body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 20px;
  z-index: 2;
  color: #fff;
}

.cat-card-body h3 { color: #fff; font-size: 1.1rem; margin-bottom: .25em; }

.cat-card-body p {
  font-size: .82rem;
  opacity: .82;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cat-card-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 11px;
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: all var(--t);
}

.cat-card:hover .cat-card-more { opacity: 1; transform: none; }

@media (hover: none) { .cat-card-more { opacity: 1; transform: none; } }

/* شريط تصنيفات فرعية أفقي */
.chip-scroller {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.chip-scroller::-webkit-scrollbar { display: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--pill);
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: .88rem;
  font-weight: 600;
  white-space: nowrap;
  transition: all var(--t-fast);
}

.chip:hover { border-color: var(--primary); color: var(--primary); }

.chip.is-active {
  background: var(--gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px rgba(var(--primary-rgb), .26);
}

.chip.is-active:hover { color: #fff; }

/* ---------------------------------------------------------------------
   3. بطاقة المنتج
   --------------------------------------------------------------------- */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: rgba(var(--primary-rgb), .22);
}

.product-media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--gradient-soft);
}

.product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}

.product-card:hover .product-media img { transform: scale(1.07); }

.product-flags {
  position: absolute;
  top: 11px;
  inset-inline-start: 11px;
  display: grid;
  gap: 6px;
  z-index: 2;
  justify-items: start;
}

.product-quick {
  position: absolute;
  top: 11px;           /* فوق الصورة (أعلى البطاقة) كي لا يغطي السعر أسفلها */
  inset-inline-end: 11px;
  z-index: 2;
  display: grid;
  gap: 7px;
  opacity: 0;
  transform: translateY(-8px);
  transition: all var(--t);
}

.product-card:hover .product-quick { opacity: 1; transform: none; }
@media (hover: none) { .product-quick { opacity: 1; transform: none; } }

.product-quick button,
.product-quick a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .96);
  color: var(--dark);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--t-fast);
}

.product-quick button:hover,
.product-quick a:hover { background: var(--gradient); color: #fff; }

.product-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 15px;
  gap: 7px;
}

.product-cat {
  font-size: .75rem;
  color: var(--primary);
  font-weight: 700;
}

.product-title {
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.1em;
}

.product-title a { color: var(--dark); }
.product-title a:hover { color: var(--primary); }

.product-price {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 6px;
}

.price-now { font-size: 1.08rem; font-weight: 800; color: var(--primary); }

.price-old {
  font-size: .85rem;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: rgba(var(--primary-rgb), .5);
}

.product-actions { display: flex; gap: 8px; margin-top: 12px; }
.product-actions .btn { flex: 1; padding: 11px 14px; font-size: .87rem; }

.product-stock {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .78rem;
  font-weight: 600;
}

.product-stock.in { color: var(--success); }
.product-stock.low { color: var(--warning); }
.product-stock.out { color: var(--muted); }

@media (max-width: 560px) {
  .product-body { padding: 12px; }
  .product-title { font-size: .9rem; min-height: 2.9em; }
  .price-now { font-size: 1rem; }
  .product-actions .btn { padding: 10px; font-size: .8rem; }
  .product-actions .btn span { display: none; }
}

/* ---------------------------------------------------------------------
   4. صفحة المتجر
   --------------------------------------------------------------------- */
.shop-layout {
  display: grid;
  gap: 26px;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 992px) {
  .shop-layout { grid-template-columns: 268px 1fr; }
}

.shop-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 18px);
  display: none;
}

@media (min-width: 992px) { .shop-sidebar { display: block; } }

.filter-block { margin-bottom: 26px; }

.filter-block h4 {
  font-size: .95rem;
  margin-bottom: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-list li { margin-bottom: 3px; }

.filter-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 13px;
  border-radius: var(--radius-xs);
  color: var(--text);
  font-size: .9rem;
  font-weight: 600;
  transition: all var(--t-fast);
}

.filter-list a:hover { background: rgba(var(--primary-rgb), .07); color: var(--primary); }
.filter-list a.is-active { background: var(--gradient); color: #fff; }

.filter-list .count {
  font-size: .76rem;
  opacity: .7;
  font-weight: 700;
}

.filter-list .sub { padding-inline-start: 14px; }

.shop-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  margin-bottom: 22px;
}

.shop-toolbar .result-count { font-size: .89rem; color: var(--muted); font-weight: 600; }
.shop-toolbar .form-select { width: auto; min-width: 160px; padding-block: 9px; font-size: .88rem; }
.filter-toggle { display: inline-flex; }

@media (min-width: 992px) { .filter-toggle { display: none; } }

/* لوحة الفلاتر على الجوال */
.filter-sheet {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1001;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 20px 18px 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform .34s var(--ease);
  box-shadow: 0 -18px 50px rgba(43, 26, 47, .22);
}

.filter-sheet.is-open { transform: translateY(0); }

.filter-sheet-handle {
  width: 46px;
  height: 5px;
  border-radius: var(--pill);
  background: var(--line-strong);
  margin: 0 auto 18px;
}

/* ---------------------------------------------------------------------
   5. صفحة المنتج
   --------------------------------------------------------------------- */
.product-layout {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 900px) { .product-layout { grid-template-columns: 1.05fr 1fr; } }

.product-gallery { position: sticky; top: calc(var(--header-h) + 18px); }

/* على الجوال (عمود واحد): خاصية sticky تجعل الصورة تظل معلّقة أعلى
   الشاشة وتغطي الوصف أثناء التمرير — تُفعَّل فقط على الشاشات الواسعة */
@media (max-width: 899px) {
  .product-gallery { position: static; }
}

.gallery-main {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--gradient-soft);
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
}

.gallery-main img { width: 100%; height: 100%; object-fit: cover; }

.gallery-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.gallery-thumbs::-webkit-scrollbar { display: none; }

.gallery-thumb {
  flex: 0 0 78px;
  width: 78px;
  height: 78px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2.5px solid transparent;
  cursor: pointer;
  background: var(--gradient-soft);
  padding: 0;
  transition: all var(--t-fast);
}

.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb.is-active { border-color: var(--primary); }

.product-detail h1 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: .3em; }

.product-price-lg {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 18px 0;
}

.product-price-lg .price-now { font-size: 1.9rem; }
.product-price-lg .price-old { font-size: 1.05rem; }

.product-meta {
  display: grid;
  gap: 11px;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: rgba(var(--primary-rgb), .04);
  border: 1px solid var(--line);
  margin: 20px 0;
}

.product-meta-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .9rem;
}

.product-meta-row svg { color: var(--primary); flex-shrink: 0; }
.product-meta-row strong { font-weight: 700; }

.qty-control {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--line);
  border-radius: var(--pill);
  overflow: hidden;
  background: var(--surface);
}

.qty-control button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 46px;
  border: none;
  background: none;
  color: var(--dark);
  cursor: pointer;
  transition: all var(--t-fast);
}

.qty-control button:hover:not(:disabled) { background: rgba(var(--primary-rgb), .09); color: var(--primary); }
.qty-control button:disabled { opacity: .35; cursor: not-allowed; }

.qty-control input {
  width: 52px;
  height: 46px;
  border: none;
  text-align: center;
  font-family: inherit;
  font-weight: 800;
  font-size: 1rem;
  background: none;
  color: var(--dark);
  -moz-appearance: textfield;
}

.qty-control input::-webkit-outer-spin-button,
.qty-control input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.buy-row { display: flex; gap: 11px; flex-wrap: wrap; margin: 22px 0; }
.buy-row .btn { flex: 1; min-width: 160px; }

.product-tabs { margin-top: 30px; }

.tab-nav {
  display: flex;
  gap: 5px;
  border-bottom: 1.5px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}

.tab-nav::-webkit-scrollbar { display: none; }

.tab-nav button {
  padding: 13px 20px;
  border: none;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-weight: 700;
  font-size: .93rem;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1.5px;
  white-space: nowrap;
  transition: all var(--t-fast);
}

.tab-nav button:hover { color: var(--primary); }
.tab-nav button.is-active { color: var(--primary); border-bottom-color: var(--primary); }

.tab-panel { display: none; padding-top: 22px; line-height: 2; }
.tab-panel.is-active { display: block; animation: fade-up .4s var(--ease); }

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

/* ---------------------------------------------------------------------
   6. معرض الأعمال
   --------------------------------------------------------------------- */
.gallery-grid {
  display: grid;
  gap: clamp(10px, 1.5vw, 18px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}

.gallery-item {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--gradient-soft);
  cursor: zoom-in;
  box-shadow: var(--shadow-xs);
  transition: transform var(--t), box-shadow var(--t);
}

.gallery-item:nth-child(6n + 1) { grid-row: span 2; aspect-ratio: 1 / 2.05; }

@media (max-width: 620px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item:nth-child(6n + 1) { grid-row: auto; aspect-ratio: 1 / 1; }
}

.gallery-item:hover { transform: translateY(-5px); box-shadow: var(--shadow); }

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}

.gallery-item:hover img { transform: scale(1.08); }

.gallery-item-caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 40px 16px 16px;
  background: linear-gradient(180deg, transparent, rgba(43, 26, 47, .85));
  color: #fff;
  opacity: 0;
  transform: translateY(10px);
  transition: all var(--t);
}

.gallery-item:hover .gallery-item-caption { opacity: 1; transform: none; }
@media (hover: none) { .gallery-item-caption { opacity: 1; transform: none; } }

.gallery-item-caption strong { display: block; font-size: .93rem; }
.gallery-item-caption span { font-size: .76rem; opacity: .8; }

.gallery-item.is-hidden { display: none; }

/* عارض الصور (Lightbox) موجود في main.css لأن لوحة الإدارة تستخدمه أيضًا */

/* ---------------------------------------------------------------------
   7. المزايا وآراء العملاء
   --------------------------------------------------------------------- */
.feature-card {
  position: relative;
  padding: 26px 22px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform var(--t), box-shadow var(--t);
  overflow: hidden;
}

.feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 3px;
  background: var(--gradient);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t);
}

.feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.feature-card:hover::before { transform: scaleX(1); }

.feature-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--gradient-soft);
  color: var(--primary);
  margin-bottom: 16px;
  transition: all var(--t);
}

.feature-card:hover .feature-icon { background: var(--gradient); color: #fff; transform: rotate(-6deg); }

.feature-card h3 { font-size: 1.05rem; margin-bottom: .4em; }
.feature-card p { color: var(--muted); font-size: .92rem; margin: 0; line-height: 1.85; }

/* التقييمات */
.reviews-scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(88vw, 340px), 1fr);
  gap: 16px;
  overflow-x: auto;
  padding: 4px 4px 16px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.reviews-scroller::-webkit-scrollbar { display: none; }

@media (min-width: 900px) {
  .reviews-scroller {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    overflow: visible;
  }
}

.review-card {
  scroll-snap-align: start;
  padding: 26px 22px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  position: relative;
  transition: transform var(--t), box-shadow var(--t);
}

.review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.review-card .quote-mark {
  position: absolute;
  top: 16px;
  inset-inline-end: 20px;
  font-size: 3.4rem;
  line-height: 1;
  color: rgba(var(--primary-rgb), .12);
  font-family: Georgia, serif;
}

.review-card p {
  font-size: .94rem;
  line-height: 1.95;
  color: var(--text);
  margin-bottom: 18px;
}

.review-author { display: flex; align-items: center; gap: 12px; }

.review-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gradient);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.review-author strong { display: block; font-size: .93rem; }
.review-author span { font-size: .78rem; color: var(--muted); }

.stars { display: inline-flex; gap: 2px; margin-bottom: 12px; }
.stars .star { color: #ddd3dd; display: inline-flex; }
.stars .star.is-filled { color: var(--accent); }
.stars .star.is-filled svg { fill: var(--accent); }

/* ---------------------------------------------------------------------
   8. قسم النبذة والتصميم المخصص
   --------------------------------------------------------------------- */
.about-split {
  display: grid;
  gap: clamp(26px, 4vw, 52px);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 860px) { .about-split { grid-template-columns: 1fr 1fr; } }

.about-media {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4 / 3.2;
  box-shadow: var(--shadow);
  background: var(--gradient-soft);
}

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

.about-badge {
  position: absolute;
  bottom: 18px;
  inset-inline-start: 18px;
  padding: 13px 20px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
}

.about-badge strong { display: block; font-size: 1.3rem; color: var(--primary); }
.about-badge span { font-size: .78rem; color: var(--muted); }

.about-points { display: grid; gap: 14px; margin: 24px 0; }

.about-point {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .95rem;
}

.about-point .tick {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(var(--primary-rgb), .1);
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 2px;
}

/* بانر التصميم المخصص */
.custom-cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--gradient);
  color: #fff;
  padding: clamp(32px, 5vw, 62px);
  box-shadow: var(--shadow-lg);
}

.custom-cta::before,
.custom-cta::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  pointer-events: none;
}

.custom-cta::before { width: 320px; height: 320px; top: -130px; inset-inline-end: -90px; }
.custom-cta::after { width: 220px; height: 220px; bottom: -110px; inset-inline-start: -60px; }

.custom-cta-inner {
  position: relative;
  display: grid;
  gap: 26px;
  align-items: center;
  grid-template-columns: 1fr;
  z-index: 2;
}

@media (min-width: 860px) { .custom-cta-inner { grid-template-columns: 1.3fr .7fr; } }

.custom-cta h2 { color: #fff; margin-bottom: .4em; }
.custom-cta p { opacity: .9; font-size: 1.02rem; line-height: 1.95; margin-bottom: 0; }

.custom-steps { display: grid; gap: 14px; margin-top: 24px; }

.custom-step {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: .94rem;
  font-weight: 600;
}

.custom-step .num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .2);
  font-weight: 800;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   9. السلة وإتمام الطلب
   --------------------------------------------------------------------- */
.cart-layout {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 940px) { .cart-layout { grid-template-columns: 1fr 370px; } }

.cart-item {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 15px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.cart-item:last-child { border-bottom: none; }

.cart-item-media {
  width: 92px;
  height: 92px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--gradient-soft);
}

.cart-item-media img { width: 100%; height: 100%; object-fit: cover; }

.cart-item h4 { font-size: .98rem; margin-bottom: 5px; }

.cart-item-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 9px;
}

.cart-item-options span {
  font-size: .74rem;
  padding: 3px 10px;
  border-radius: var(--pill);
  background: rgba(var(--primary-rgb), .07);
  color: var(--primary);
  font-weight: 600;
}

.cart-item-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.cart-item .line-total { font-weight: 800; color: var(--primary); font-size: 1.02rem; }

.cart-remove {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: all var(--t-fast);
}

.cart-remove:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); }

.summary {
  position: sticky;
  top: calc(var(--header-h) + 18px);
}

.summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  font-size: .95rem;
  border-bottom: 1px dashed var(--line);
}

.summary-row:last-of-type { border-bottom: none; }
.summary-row .label { color: var(--muted); }
.summary-row .value { font-weight: 700; }
.summary-row.is-discount .value { color: var(--success); }

.summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0 4px;
  margin-top: 8px;
  border-top: 2px solid var(--line);
  font-size: 1.05rem;
  font-weight: 800;
}

.summary-total .value { color: var(--primary); font-size: 1.35rem; }

.coupon-form { display: flex; gap: 8px; margin: 16px 0; }
.coupon-form .form-input { flex: 1; padding-block: 11px; }

.coupon-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 15px;
  border-radius: var(--radius-sm);
  background: var(--success-bg);
  border: 1px dashed #85d3ac;
  color: var(--success);
  font-size: .89rem;
  font-weight: 700;
  margin: 16px 0;
}

.coupon-applied button {
  border: none;
  background: none;
  color: var(--success);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 2px;
}

/* خطوات إتمام الطلب */
.steps {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 28px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.steps::-webkit-scrollbar { display: none; }

.step {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border-radius: var(--pill);
  background: var(--surface);
  border: 1.5px solid var(--line);
  font-size: .86rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--t);
}

.step .step-num {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--line);
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
}

.step.is-active {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(var(--primary-rgb), .06);
}

.step.is-active .step-num { background: var(--gradient); color: #fff; }
.step.is-done { color: var(--success); border-color: #a9e5c3; background: var(--success-bg); }
.step.is-done .step-num { background: var(--success); color: #fff; }

.steps .step-line { flex: 1; min-width: 14px; height: 2px; background: var(--line); }

/* ---------------------------------------------------------------------
   10. نموذج الطلب المخصص
   --------------------------------------------------------------------- */
.custom-form-wrap {
  display: grid;
  gap: 26px;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 1000px) { .custom-form-wrap { grid-template-columns: 1fr 320px; } }

.custom-aside { position: sticky; top: calc(var(--header-h) + 18px); display: grid; gap: 16px; }

.form-step { display: none; animation: fade-up .35s var(--ease); }
.form-step.is-active { display: block; }

.form-step-head { margin-bottom: 22px; }
.form-step-head h3 { margin-bottom: .25em; }
.form-step-head p { color: var(--muted); font-size: .92rem; margin: 0; }

.form-nav {
  display: flex;
  gap: 11px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.form-nav .btn { flex: 1; }

/* منطقة رفع الصور */
.dropzone {
  position: relative;
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 34px 20px;
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  background: rgba(var(--primary-rgb), .025);
  text-align: center;
  cursor: pointer;
  transition: all var(--t-fast);
}

.dropzone:hover,
.dropzone.is-dragover {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), .07);
}

.dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.dropzone .dz-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 20px;
  background: var(--gradient-soft);
  color: var(--primary);
}

.dropzone strong { font-size: 1rem; }
.dropzone span { font-size: .84rem; color: var(--muted); }

.preview-grid {
  display: grid;
  gap: 11px;
  grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
  margin-top: 16px;
}

.preview-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--gradient-soft);
  border: 1px solid var(--line);
}

.preview-item img { width: 100%; height: 100%; object-fit: cover; }

.preview-item button {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(43, 26, 47, .72);
  color: #fff;
  cursor: pointer;
  transition: background var(--t-fast);
}

.preview-item button:hover { background: var(--danger); }

.preview-item .size {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 12px 7px 5px;
  background: linear-gradient(transparent, rgba(43, 26, 47, .8));
  color: #fff;
  font-size: .66rem;
  text-align: center;
}

/* ملخّص جانبي للطلب المخصص */
.aside-note {
  padding: 20px;
  border-radius: var(--radius);
  background: var(--gradient-soft);
  border: 1px dashed rgba(var(--primary-rgb), .3);
}

.aside-note h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .95rem;
  margin-bottom: 10px;
}

.aside-note p { font-size: .87rem; color: var(--muted); line-height: 1.85; margin: 0; }

/* ---------------------------------------------------------------------
   11. صفحات النجاح والحساب
   --------------------------------------------------------------------- */
.success-box {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(30px, 5vw, 52px);
}

.success-icon {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success);
  animation: pop-in .55s var(--ease);
}

@keyframes pop-in {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.14); }
  100% { transform: scale(1); opacity: 1; }
}

.ref-number {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  background: var(--gradient-soft);
  border: 1px dashed rgba(var(--primary-rgb), .35);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--primary);
  margin: 18px 0;
  letter-spacing: .06em;
}

.account-layout {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 900px) { .account-layout { grid-template-columns: 260px 1fr; } }

.account-nav { display: grid; gap: 4px; }

.account-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 15px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-weight: 600;
  font-size: .93rem;
  transition: all var(--t-fast);
}

.account-nav a:hover { background: rgba(var(--primary-rgb), .07); color: var(--primary); }
.account-nav a.is-active { background: var(--gradient); color: #fff; box-shadow: var(--shadow-sm); }

/* بطاقة طلب في حساب العميل */
.order-row {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: all var(--t-fast);
}

.order-row:hover { border-color: rgba(var(--primary-rgb), .3); box-shadow: var(--shadow-xs); }

.order-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.order-row-num { font-weight: 800; font-size: 1rem; letter-spacing: .04em; }

.order-row-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .85rem;
  color: var(--muted);
}

.order-row-meta span { display: inline-flex; align-items: center; gap: 6px; }

/* الخط الزمني لحالة الطلب */
.timeline { display: grid; gap: 0; margin-top: 12px; }

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  padding-bottom: 20px;
}

.timeline-item:last-child { padding-bottom: 0; }

.timeline-item::before {
  content: "";
  position: absolute;
  inset-inline-start: 16px;
  top: 32px;
  bottom: 0;
  width: 2px;
  background: var(--line);
}

.timeline-item:last-child::before { display: none; }

.timeline-dot {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gradient);
  color: #fff;
  z-index: 1;
}

.timeline-dot.is-muted { background: var(--line); color: var(--muted); }
.timeline-body strong { display: block; font-size: .93rem; }
.timeline-body span { font-size: .8rem; color: var(--muted); }

/* ---------------------------------------------------------------------
   12. صفحة التواصل والخريطة
   --------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 940px) { .contact-grid { grid-template-columns: 1fr 1fr; } }

.contact-cards { display: grid; gap: 13px; }

.contact-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: all var(--t-fast);
  color: var(--text);
}

.contact-card:hover {
  border-color: rgba(var(--primary-rgb), .3);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  transform: translateX(-4px);
}

.contact-card .cc-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: var(--gradient-soft);
  color: var(--primary);
  flex-shrink: 0;
}

.contact-card strong { display: block; font-size: .95rem; }
.contact-card span { font-size: .86rem; color: var(--muted); word-break: break-word; }

.map-frame {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  min-height: 260px;
  background: var(--gradient-soft);
}

.map-frame iframe { width: 100%; height: 100%; min-height: 260px; border: 0; display: block; }

/* ---------------------------------------------------------------------
   13. بانر تثبيت التطبيق (PWA)
   --------------------------------------------------------------------- */
.pwa-banner {
  position: fixed;
  inset-inline: 12px;
  bottom: calc(var(--bottom-nav-h) + 12px);
  bottom: calc(var(--bottom-nav-h) + 12px + env(safe-area-inset-bottom, 0px));
  z-index: 950;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  transform: translateY(140%);
  transition: transform .45s var(--ease);
}

.pwa-banner.is-visible { transform: translateY(0); }

/* display:flex يلغي مفعول سمة hidden — نعيد فرضها حتى يجهزها JavaScript */
.pwa-banner[hidden] { display: none; }

.pwa-banner .pwa-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: var(--gradient);
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}

.pwa-banner .pwa-icon img { width: 100%; height: 100%; object-fit: cover; }

.pwa-banner strong { display: block; font-size: .93rem; }
.pwa-banner p { font-size: .78rem; color: var(--muted); margin: 0; line-height: 1.5; }
.pwa-banner .btn { padding: 9px 18px; font-size: .84rem; }

.pwa-banner .pwa-close {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
}

.pwa-banner .pwa-close:hover { background: var(--line); }

@media (min-width: 1080px) {
  .pwa-banner { inset-inline: auto 20px; bottom: 20px; max-width: 400px; }
}

/* تعليمات التثبيت */
.ios-guide {
  position: fixed;
  inset: 0;
  z-index: 1250;
  display: grid;
  place-items: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(43, 26, 47, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: all var(--t);
  padding: 16px;
}

.ios-guide.is-open { opacity: 1; visibility: visible; }

.ios-guide-box {
  width: min(460px, 100%);
  /* تمركز آمن: عند كبر المحتوى عن الشاشة تبقى البطاقة قابلة للتمرير كاملة
     بدل أن تُقص من الأعلى (كانت مثبّتة بالأسفل سابقًا) */
  margin: auto;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  transform: translateY(30px);
  transition: transform var(--t);
}

.ios-guide.is-open .ios-guide-box { transform: none; }

/* مجموعة الخطوات الخفية (ios أو android حسب الجهاز) —
   display:grid على ‎.ios-steps يلغي مفعول hidden فنفرضه */
.ios-guide [hidden] { display: none !important; }

.ios-steps { display: grid; gap: 14px; margin: 20px 0; text-align: start; }

.ios-step {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  background: rgba(var(--primary-rgb), .05);
  font-size: .9rem;
  font-weight: 600;
}

.ios-step .num {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gradient);
  color: #fff;
  font-weight: 800;
  font-size: .82rem;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   إخفاء دعوة التثبيت داخل التطبيق المثبَّت
   ---------------------------------------------------------------------
   خط الدفاع الأول (قبل تنفيذ أي JS): إن كانت الصفحة تعمل كتطبيق مستقل
   فلا معنى لعرض زر التثبيت. نغطّي كل أنماط العرض التي تستخدمها المتصفحات
   بعد التثبيت (standalone على أندرويد/iOS، minimal-ui على سامسونج،
   fullscreen، وwindow-controls-overlay على سطح المكتب).
   --------------------------------------------------------------------- */
@media (display-mode: standalone),
       (display-mode: minimal-ui),
       (display-mode: fullscreen),
       (display-mode: window-controls-overlay) {
  .pwa-banner,
  .ios-guide { display: none !important; }
}

/* خط الدفاع الثاني: صنف يضيفه pwa.js على <html> عند اكتشاف وضع التطبيق
   (يشمل الحالات التي لا يطابق فيها المتصفح استعلام display-mode) */
.is-pwa .pwa-banner,
.is-pwa .ios-guide { display: none !important; }

/* ---------------------------------------------------------------------
   14. صفحات الأخطاء
   --------------------------------------------------------------------- */
.error-page {
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(50px, 10vw, 110px) 20px;
}

.error-code {
  font-size: clamp(4.5rem, 16vw, 9rem);
  font-weight: 800;
  line-height: 1;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 12px;
}

/* ---------------------------------------------------------------------
   15. صفحات الدخول والتسجيل
   --------------------------------------------------------------------- */
.auth-wrap {
  display: grid;
  place-items: center;
  /* dvh يتجاوب مع شريط أدوات المتصفح المتحرّك على الجوال؛ vh قيمة احتياطية */
  min-height: calc(100vh - var(--header-h) - 100px);
  min-height: calc(100dvh - var(--header-h) - 100px);
  padding: 40px 18px;
}

.auth-card {
  width: min(460px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 4vw, 40px);
  box-shadow: var(--shadow);
}

.auth-head { text-align: center; margin-bottom: 28px; }

.auth-head .auth-mark {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 16px;
  border-radius: 20px;
  background: var(--gradient);
  color: #fff;
  box-shadow: 0 12px 26px rgba(var(--primary-rgb), .3);
}

.auth-head p { color: var(--muted); font-size: .92rem; margin: 0; }

.auth-switch {
  text-align: center;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: .9rem;
  color: var(--muted);
}

.pass-field { position: relative; }

.pass-toggle {
  position: absolute;
  inset-inline-end: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.pass-toggle:hover { color: var(--primary); background: rgba(var(--primary-rgb), .07); }

/* =====================================================================
   16. توافُق الأجهزة الأقدم
   ---------------------------------------------------------------------
   الأجهزة التي تعمل بـ iOS 14 وما قبله، أو أندرويد بمتصفح قديم/WebView
   قديم، لا تدعم aspect-ratio. بدونها تصبح حاويات الصور بارتفاع صفر
   فتظهر الصفحة «مكسورة» على هذه الأجهزة وسليمة على غيرها — وهذا سبب
   اختلاف العرض بين جهاز وآخر. البديل هنا هو حيلة padding-top الكلاسيكية.
   ===================================================================== */
@supports not (aspect-ratio: 1 / 1) {

  .hero-slider,
  .cat-card-media,
  .product-media,
  .gallery-main,
  .gallery-item,
  .about-media,
  .preview-item {
    height: 0;
    overflow: hidden;
  }

  /* النسبة = الارتفاع ÷ العرض */
  .hero-slider    { padding-top: 85%; }   /* 4 / 3.4 */
  .cat-card-media { padding-top: 80%; }   /* 4 / 3.2 */
  .about-media    { padding-top: 80%; }   /* 4 / 3.2 */
  .product-media,
  .gallery-main,
  .gallery-item,
  .preview-item   { padding-top: 100%; }  /* 1 / 1 */

  @media (min-width: 900px) {
    .hero-slider { padding-top: 102%; }   /* 1 / 1.02 */
  }

  /* على الهاتف: نفس نسبة 4/2.2 المطبقة أعلاه في قسم الهاتف المضغوط —
     بدون هذا السطر تبقى الصورة مربعًا ضخمًا على المتصفحات القديمة */
  @media (max-width: 640px) {
    .hero-slider { padding-top: 55%; }    /* 4 / 2.2 */
  }

  .gallery-item:nth-child(6n + 1) { padding-top: 205%; }

  @media (max-width: 620px) {
    .gallery-item:nth-child(6n + 1) { padding-top: 100%; }
  }

  /* الصورة تُرفع فوق الحاوية بالتمركز المطلق كي لا يدفعها padding للأسفل.
     نستهدف الصور فقط — العناصر الأخرى (كالتعليق أسفل عناصر المعرض) لها
     تمركزها الخاص أصلًا ولا يصح تمديدها على كامل المساحة. */
  .hero-slider > img,
  .cat-card-media > img,
  .product-media > img,
  .gallery-main > img,
  .gallery-item > img,
  .about-media > img,
  .preview-item > img {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* حاويات التمرير الأفقي — تمرير سلس على iOS ومنع سحب الصفحة معها */
.chip-scroller,
.gallery-thumbs,
.tab-nav,
.reviews-scroller,
.steps {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}

/* ---------------------------------------------------------------------
   الوضع الداكن — تجاوزات صفحات الموقع فقط
   (المتغيّرات الأساسية في main.css + theme_css())
   --------------------------------------------------------------------- */
[data-theme="dark"] .hero-eyebrow { background: rgba(var(--surface-rgb), .8); }
[data-theme="dark"] .hero-float,
[data-theme="dark"] .about-badge { background: rgba(var(--surface-rgb), .94); }
[data-theme="dark"] .cat-card-icon { background: rgba(var(--surface-rgb), .92); }
[data-theme="dark"] .product-quick button,
[data-theme="dark"] .product-quick a { background: var(--surface); color: var(--text); }

/* =====================================================================
   17. حماية الشبكات من التمرير الأفقي
   ---------------------------------------------------------------------
   مسار الشبكة 1fr يعني minmax(auto, 1fr) — فإذا احتوى أحد الأعمدة عنصرًا
   لا يمكن لفّه (كخطوات نموذج الطلب المخصص أو أزرار تبويبات المنتج،
   وكلاهما nowrap بقصد للتمرير الداخلي) يتمدّد المسار كاملًا ويصبح أعرض
   من الشاشة (قِسناها 864px على شاشة 360px) فيُقصّ المحتوى من اليسار.
   الحل القياسي: إلغاء الحد الأدنى التلقائي لعناصر الشبكة.
   ===================================================================== */
.product-layout > *,
.custom-form-wrap > *,
.account-layout > *,
.cart-layout > *,
.shop-layout > *,
.contact-grid > *,
.about-split > *,
.hero-inner > *,
.custom-cta-inner > * {
  min-width: 0;
}

.reviews-more { text-align: center; margin-top: 28px; }

/* =====================================================================
   18. تخطيط مدمج للهواتف — الصفحة الرئيسية
   ---------------------------------------------------------------------
   على الشاشات الضيقة كان كل عنصر يظهر فوق الآخر فيصبح التمرير عموديًا
   طويلًا ومملًا. هنا نُعيد تقسيم الأقسام لتظهر بجانب بعضها:
   أقسام الخدمات شبكة 2×2 مدمجة، المزايا عمودان، الزران متجاوران،
   شرائح الهيرو أقصر، وهوامش الأقسام أضيق — بلا تغيير على الحاسوب.
   ===================================================================== */
@media (max-width: 640px) {

  /* هوامش أقسام أضيق كي يقترب المحتوى من بعضه */
  .section { padding: 30px 0; }
  .section--tight { padding: 22px 0; }
  .section-head { margin-bottom: 18px; }
  .section-head p { font-size: .92rem; }
  .section-bar { margin-bottom: 16px; }

  /* الهيرو: زرّان متجاوران + نص أقصر مسافات + شرائح أقل ارتفاعًا
     (شريط الخدمات أسفل الهيرو يعوّض تقليل الحشوة السفلية) */
  .hero-inner { padding-top: 22px; padding-bottom: 30px; }
  .hero-lead { margin-bottom: 20px; line-height: 1.8; }
  .hero-actions { flex-wrap: nowrap; gap: 9px; margin-bottom: 22px; }
  .hero-actions .btn {
    flex: 1;
    min-width: 0;
    padding: 12px 10px;
    font-size: .9rem;
    gap: 6px;
    white-space: nowrap;
  }

  /* هواتف ضيقة جدًا: خط أصغر كي لا يفيض نص الزرّين المتجاورين */
  @media (max-width: 380px) {
    .hero-actions .btn { font-size: .82rem; padding-inline: 8px; }
    .hero-actions .btn svg { width: 16px; height: 16px; }
  }
  .hero-stats { gap: 12px 18px; }
  .hero-stat span { font-size: .78rem; }
  .hero-slider { aspect-ratio: 4 / 2.2; max-height: 205px; }
  .hero-slide-caption { padding: 46px 16px 16px; }
  .hero-slide-caption p { display: none; }

  /* أقسام الخدمات: بطاقتان بكل صف (بدل بطاقة ضخمة بكل صف) —
     نُبقي الاسم فقط لأن الصورة هي اللافتة، والوصف يظهر داخل صفحة القسم */
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cat-card-media { aspect-ratio: 1 / 1.05; }
  .cat-card-icon { top: 10px; inset-inline-start: 10px; width: 38px; height: 38px; border-radius: 12px; }
  .cat-card-icon svg { width: 19px; height: 19px; }
  .cat-card-body { padding: 11px 12px 13px; }
  .cat-card-body h3 { font-size: .97rem; margin-bottom: 0; }
  .cat-card-body p,
  .cat-card-more { display: none; }

  /* عدد فردي من الأقسام: البطاقة الأخيرة تمتد بعرض الصف بشكل بانر */
  .cat-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cat-grid > :last-child:nth-child(odd) .cat-card-media { aspect-ratio: 21 / 10; }

  /* لماذا تختارنا: عمودان ببطاقات مختصرة (يخدم صفحة "من نحن" أيضًا) */
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .feature-card { padding: 16px 14px; }
  .feature-icon { width: 42px; height: 42px; border-radius: 14px; margin-bottom: 10px; }
  .feature-icon svg { width: 22px; height: 22px; }
  .feature-card h3 { font-size: .95rem; }
  .feature-card p {
    font-size: .82rem;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* نبذة عن المحل: صورة أقصر ونقاط أضيق */
  .about-media { aspect-ratio: 4 / 2.7; }
  .about-points { gap: 10px; margin: 18px 0; }
  .about-point { font-size: .88rem; }

  /* بانر التصميم المخصص: خطوات أضيق */
  .custom-cta { padding: 24px 18px; }
  .custom-steps { gap: 9px; margin-top: 16px; }
  .custom-step { font-size: .86rem; gap: 10px; }
  .custom-step .num { width: 28px; height: 28px; border-radius: 9px; font-size: .85rem; }

  /* آراء العملاء: بطاقة أضيق قليلًا كي يظهر جزء من البطاقة التالية */
  .reviews-scroller { grid-auto-columns: minmax(min(82vw, 310px), 1fr); gap: 12px; }
  .review-card { padding: 18px 16px; }
  .review-card p { font-size: .88rem; line-height: 1.8; margin-bottom: 12px; }

  /* زر "شاركنا تجربتك" أقرب للبطاقات */
  .reviews-more { margin-top: 18px; }
}

/* =====================================================================
   19. لمسات حركة احترافية ثلاثية الأبعاد
   ---------------------------------------------------------------------
   حركات مدروسة تناسب هوية المحل (بالونات وزهور وهدايا):
   زخارف عائمة في الهيرو، إمالة ثلاثية الأبعاد للبطاقات، لمعان ضوئي،
   عدّاد أرقام، وشريط خدمات متحرك. كلها transform/opacity فقط
   (أداء سلس على الهواتف) وتتوقف تلقائيًا مع prefers-reduced-motion
   أو إيقاف الحركات من إعدادات الموقع.
   ===================================================================== */

/* زخارف الهيرو العائمة */
.hero-decor { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.hero-decor-item {
  position: absolute;
  top: var(--y, 20%);
  inset-inline-start: var(--x, 10%);
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .65);
  border: 1px solid rgba(var(--primary-rgb), .14);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: decor-float var(--dur, 7s) ease-in-out var(--delay, 0s) infinite;
}

.hero-decor-item--alt { color: var(--secondary); border-color: rgba(var(--secondary-rgb), .16); }

/* بارالاكس التمرير: الخاصية المستقلة translate كي لا تتعارض مع
   حركة decor-float (transform) — المتصفحات القديمة تتجاهلها بأمان */
.hero-decor-item { translate: 0 var(--parallax, 0px); }

/* غلاف عارض الهيرو — طبقة الإمالة ثلاثية الأبعاد عند التمرير
   (منفصلة عن العارض نفسه كي لا تتصادم مع إمالة الماوس data-tilt) */
.hero-slider-wrap {
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) translateY(var(--ty, 0px));
  transform-origin: 50% 100%;
  will-change: transform;
}

/* المحتوى النصي يتحرك بعمق مختلف (أبطأ) — إحساس الطبقات */
.hero-content { will-change: transform; }

@keyframes decor-float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-14px) rotate(4deg); }
}

/* الهاتف: زخارف أصغر وعدد أقل (٣ كافية) */
@media (max-width: 640px) {
  .hero-decor-item { width: 40px; height: 40px; }
  .hero-decor-item:nth-child(n + 4) { display: none; }
}

/* شارة "توصيل وتغليف" فوق العارض تتمايل بلطف */
.hero-float { animation: decor-float 5.5s ease-in-out 1s infinite; }

/* شريط الخدمات المتحرك أسفل الهيرو
   الاتجاه ltr على الشريط نفسه كي تكون حلقة التكرار سلسة مع translateX(-50%)،
   بينما كل عبارة داخله rtl طبيعية */
.hero-marquee {
  position: relative;
  z-index: 2;
  direction: ltr;
  overflow: hidden;
  border-top: 1px solid rgba(var(--primary-rgb), .1);
  padding: 11px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.hero-marquee-track { display: flex; width: max-content; animation: marquee-slide 30s linear infinite; }

.hero-marquee:hover .hero-marquee-track { animation-play-state: paused; }

.hero-marquee-group { display: flex; align-items: center; }

.hero-marquee-group span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 26px;
  direction: rtl;
  font-size: .9rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

.hero-marquee-group span svg { color: var(--primary); flex-shrink: 0; }

@keyframes marquee-slide { to { transform: translateX(-50%); } }

/* إمالة ثلاثية الأبعاد تفاعلية (data-tilt يُحرَّك من main.js على الحاسوب فقط)
   نُبقي انتقالية opacity من [data-reveal] كي لا يفقد العنصر تلاشيه عند الظهور */
[data-tilt] { transition: transform .2s ease-out, opacity .7s var(--ease); will-change: transform; }

/* إمالة ولمعان البطاقات — على أجهزة المؤشر فقط (لا معنى لها باللمس) */
@media (hover: hover) and (pointer: fine) {

  .cat-card:hover {
    transform: perspective(900px) rotateX(3.5deg) translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-lg);
  }

  /* مسحة ضوء تعبر البطاقة مع المرور */
  .cat-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .32) 50%, transparent 58%);
    transform: translateX(130%);
    transition: transform .9s ease;
  }

  .cat-card:hover::after { transform: translateX(-130%); }

  .product-card:hover {
    transform: perspective(900px) rotateX(2.5deg) translateY(-8px);
    box-shadow: var(--shadow-lg);
  }

  .feature-card:hover {
    transform: perspective(900px) rotate(-.6deg) translateY(-6px);
    box-shadow: var(--shadow);
  }

  .review-card:hover {
    transform: perspective(900px) rotate(.5deg) translateY(-5px);
    box-shadow: var(--shadow);
  }
}

/* خط تحت عناوين الأقسام يُرسم عند ظهور العنوان */
.section-head h2::after {
  content: "";
  display: block;
  width: 58px;
  height: 4px;
  margin: 12px auto 0;
  border-radius: var(--pill);
  background: var(--gradient);
}

.section-head--start h2::after { margin-inline-start: 0; }

.section-head[data-reveal] h2::after {
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .55s var(--ease) .2s;
}

.section-head[data-reveal].is-visible h2::after { transform: scaleX(1); }

/* دوائر بانر التصميم تنجرف ببطء */
@keyframes cta-drift { 50% { transform: translate(20px, -16px) scale(1.07); } }

.custom-cta::before { animation: cta-drift 13s ease-in-out infinite; }
.custom-cta::after  { animation: cta-drift 10s ease-in-out infinite reverse; }

/* إيقاف الحركات من إعدادات الموقع (prefers-reduced-motion مغطى في main.css) */
body.no-animations .hero-decor,
body.no-animations .hero-marquee { display: none; }

body.no-animations .hero-float,
body.no-animations .hero-decor-item,
body.no-animations .hero-marquee-track,
body.no-animations .custom-cta::before,
body.no-animations .custom-cta::after { animation: none; }

body.no-animations .hero-inner { padding-bottom: clamp(52px, 7vw, 96px); }