/* ==========================================================================
   VAYA — responsive.css
   الأولوية: آيفون ← أندرويد ← تابلت ← سطح المكتب
   سطح المكتب ليس تمديداً لواجهة الجوال، بل تخطيط أوسع بنفس الهوية.
   ========================================================================== */

/* ==========================================================================
   0. الحالة الافتراضية لعناصر تتغيّر حسب المقاس
   يجب أن تأتي قبل استعلامات الوسائط، وإلا تغلّبت على القواعد الأوسع.
   ========================================================================== */
.gallery__thumbs {
  display: none;
  gap: 10px;
  margin-block-start: 14px;
}
.gallery__thumb {
  width: 68px; height: 68px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-3);
  box-shadow: 0 0 0 1px var(--line) inset;
  transition: box-shadow var(--t-fast) var(--ease);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb.is-on { box-shadow: 0 0 0 2px var(--ink) inset; }

/* عناصر تظهر على سطح المكتب فقط */
.only-desktop { display: none !important; }

/* زر الشراء داخل الصفحة — يظهر على سطح المكتب فقط (الجوال يستخدم الشريط الثابت) */
.pdp__buy { display: none; gap: 12px; margin-block-start: 26px; }
.pdp__buy .btn { flex: 1; }

/* ============================================ 1. شاشات صغيرة جداً (≤ 360px) */
@media (max-width: 360px) {
  :root { --pad: 14px; --gap: 11px; }
  .hero__title { font-size: 30px; }
  .tabbar__item { font-size: 9.5px; }
  .rail .pcard { width: 52vw; }
}

/* ================================================= 2. جوال كبير (≥ 480px) */
@media (min-width: 480px) {
  :root { --pad: 22px; --gap: 16px; }
  .rail .pcard { width: 40vw; }
}

/* ==================================================== 3. تابلت (≥ 700px) */
@media (min-width: 700px) {
  :root { --pad: 28px; --gap: 18px; --sec: 52px; --h-header: 62px; }

  body { font-size: 15.5px; }

  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rail .pcard { width: 210px; max-width: none; }

  .tiles { grid-template-columns: repeat(4, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .trust { grid-template-columns: repeat(3, 1fr); }

  .hero { border-radius: var(--r-2xl); }
  .hero__in { padding: 44px 34px 40px; }
  .hero__sub { font-size: 16px; }

  .band__in { padding: 30px 34px 34px; }

  .pdp__head, .pdp__section { padding-inline: 0; }
  .pdp-wrap { max-width: 720px; margin-inline: auto; padding-inline: var(--pad); }

  .empty { padding-block: 76px; }
  .done { padding-block-start: 60px; }

  .sheet__panel { border-radius: var(--r-2xl); margin-block-end: 20px; max-width: 600px; }
  .sheet { align-items: flex-end; }
}

/* =============================================== 4. سطح المكتب (≥ 1024px) */
@media (min-width: 1024px) {
  :root {
    --pad: 40px;
    --gap: 22px;
    --sec: 72px;
    --h-header: 72px;
    --h-tabbar: 0px;
  }

  body {
    font-size: 16px;
    padding-block-end: 0;
  }

  /* --- الهيدر: تنقّل أفقي بدل الشريط السفلي --- */
  .tabbar { display: none; }

  .app-header__in { gap: 10px; }
  .brand__logo { height: 20px; }
  .brand { margin-inline-end: 34px; }

  .app-nav {
    display: flex; align-items: center; gap: 4px;
    margin-inline-end: auto;
  }
  .app-nav a {
    padding: 9px 14px;
    border-radius: var(--r-pill);
    font-size: 14px; font-weight: 500;
    color: var(--ink-3);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  }
  .app-nav a:hover { background: rgba(35,31,38,.05); color: var(--ink); }
  .app-nav a.is-active { color: var(--ink); font-weight: 600; }

  /* --- الشبكات --- */
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rail .pcard { width: 248px; }
  .pcard__name { font-size: 14.5px; }
  .pcard__price { font-size: 15px; }
  .pcard__add { width: 40px; height: 40px; opacity: 0; transform: translateY(6px); }
  .pcard:hover .pcard__add,
  .pcard__add:focus-visible { opacity: 1; transform: none; }

  /* --- الهيرو: عمودان --- */
  .hero__in {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 56px;
    padding: 68px 56px;
    min-height: 460px;
  }
  .hero__title { font-size: clamp(46px, 4.4vw, 62px); }
  .hero__sub { font-size: 17px; max-width: 40ch; }
  .plate { margin-block-start: 0; padding: 44px 30px 32px; border-radius: var(--r-xl); }
  .plate__text { font-size: clamp(34px, 3vw, 46px); }
  .hero__mark { inset-block-start: 34px; inset-inline-end: 40px; height: 16px; }

  /* --- شريط أفقي للبانر العريض --- */
  .band__in {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: center;
    padding: 0 64px;
    max-width: 560px;
  }
  .band { position: relative; }
  .band__img { aspect-ratio: 3.2 / 1; }
  .band__title { font-size: 32px; }

  .steps { grid-template-columns: repeat(4, 1fr); }
  .step { flex-direction: column; gap: 12px; padding: 24px; }

  /* --- صفحة المنتج: عمودان --- */
  .pdp-wrap { max-width: var(--wrap); padding-inline: var(--pad); }
  .pdp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 64px;
    align-items: start;
  }
  .pdp-media { position: sticky; inset-block-start: calc(var(--h-header) + 28px); }
  .gallery { border-radius: var(--r-xl); overflow: hidden; }
  .gallery__slide { cursor: zoom-in; }
  .gallery__thumbs { display: flex; }
  .pdp__head { padding-block-start: 4px; }
  .pdp__name { font-size: 34px; }
  .buybar { display: none; }
  .pdp__buy { display: flex; }
  .only-desktop { display: flex !important; }

  /* --- السلة والدفع: عمودان --- */
  .two-col {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
    gap: 48px;
    align-items: start;
  }
  .two-col__aside { position: sticky; inset-block-start: calc(var(--h-header) + 28px); }

  .citem__media { width: 104px; height: 104px; }

  /* --- البحث: نافذة مركزية بدل ملء الشاشة --- */
  .search { padding-block-start: 8vh; background: rgba(20,18,24,.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .search__panel {
    width: min(720px, calc(100% - 80px));
    margin-inline: auto;
    max-height: 76vh;
    background: var(--bg);
    border-radius: var(--r-2xl);
    box-shadow: 0 40px 90px -30px rgba(20,18,24,.6);
    overflow: hidden;
    display: flex; flex-direction: column;
  }
  .search__top { border-start-start-radius: var(--r-2xl); border-start-end-radius: var(--r-2xl); padding-block-start: 14px; }
  .search__results-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }

  /* --- الشيت في المنتصف --- */
  .sheet { align-items: center; }
  .sheet__panel {
    max-width: 520px;
    border-radius: var(--r-2xl);
    transform: translateY(24px) scale(.98);
    opacity: 0;
    transition: transform var(--t) var(--ease-out), opacity var(--t) var(--ease);
  }
  .sheet.is-open .sheet__panel { transform: none; opacity: 1; }
  .sheet__grab { display: none; }
  .sheet__head { padding-block-start: 20px; }

  /* --- التنبيهات --- */
  .toasts { inset-block-end: 28px; }

  /* --- التذييل --- */
  .footer { padding-block: 48px 56px; }
  .footer__links { gap: 8px 28px; }

  /* --- شريط الأدوات --- */
  .toolbar__row { gap: 10px; }
  .page-hero { padding-block-start: 44px; }
  .page-hero__title { font-size: 52px; }

  .prose { font-size: 16px; }
  .contact-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ================================================ 5. شاشات واسعة (≥ 1400px) */
@media (min-width: 1400px) {
  :root { --pad: 56px; }
  .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hero__in { padding: 82px 72px; min-height: 520px; }
}

/* ============================================= 6. الطباعة / Print (basic) */
@media print {
  .app-header, .tabbar, .buybar, .toasts, .sheet, .search, .splash { display: none !important; }
  body { padding: 0; background: #fff; }
}

/* ================================= 7. أجهزة تدعم التمرير بالفأرة فقط */
@media (hover: none) {
  .pcard:hover .pcard__img { transform: none; }
}