/* ============================================================
   Matera — dedicated mobile layer (loaded after pages.css)
   Every rule is scoped to max-width: 768px (with finer
   sub-breakpoints inside). Desktop ≥769px is untouched.
   ============================================================ */

@media (max-width: 768px) {

  /* ---------------- 1 · Header & navigation drawer ---------------- */
  .header__bar { height: 60px; gap: 10px; }
  .burger { width: 44px; height: 44px; border-radius: 13px; }
  .lang-switch { padding: 8px 12px; }

  .mobile-nav {
    display: flex;
    position: fixed;
    top: 60px;
    inset-inline: 0;
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px);
    z-index: 39;
    padding: 14px 20px calc(28px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    border-bottom: 0;
    background: #fff;
    gap: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out), visibility 0.22s;
  }
  .mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .mobile-nav a {
    padding: 15px 16px;
    font-size: 16.5px;
    border-bottom: var(--border-w) solid var(--border-faint);
    border-radius: 0;
    color: var(--text-strong);
  }
  .mobile-nav a:last-child { border-bottom: 0; }
  .mobile-nav a.nav__link--active {
    color: var(--brand-primary);
    background: none;
  }
  body.nav-open { overflow: hidden; }

  /* ---------------- 2 · Homepage hero ---------------- */
  .hero__grid { padding: 26px 20px 40px; gap: 22px; }
  .hero__eyebrow { font-size: 12.5px; }
  .hero__title { font-size: 31px; line-height: 1.4; margin-top: 12px; }
  .hero__copy > p, .hero__lead { font-size: 15.5px; line-height: 1.9; }
  .hero__ctas { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 22px; }
  .hero__ctas .btn { width: 100%; height: 52px; }
  .hero__claims { gap: 8px; margin-top: 18px; }
  .claim { font-size: 12px; padding-block: 6px; }

  /* ---------------- 3 · Typography scale ---------------- */
  .section-title { font-size: 24px; }
  .page-hero__title { font-size: 29px; }
  .section-sub { font-size: 14.5px; margin: 8px 0 20px; }
  .pd-block__title { font-size: 18px; }
  .cta-panel { padding: 34px 22px; border-radius: 22px; }
  .cta-panel h2 { font-size: 22px; }
  .cta-panel p { font-size: 14.5px; }
  .cta-panel__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .cta-panel__actions .btn { width: 100%; }
  .final-cta__title { font-size: 25px; }

  /* ---------------- 4 · Section rhythm ---------------- */
  .promise { padding: 38px 0 16px; }
  .categories { padding: 36px 0 8px; }
  .products { padding: 38px 0; }
  .groups { padding: 36px 0 42px; }
  .why { padding: 38px 0 18px; }
  .education { padding: 36px 0 20px; }
  .education .section-head { margin-bottom: 18px; }
  .final-cta { padding: 36px 0 44px; }
  .final-cta__panel { padding: 38px 22px; }
  .page-hero__inner { padding-block: 26px 30px; }
  .page-section { padding: 34px 0 8px; }
  .page-section--last { padding-bottom: 48px; }
  .section-head { margin-bottom: 16px; }
  .grid-3, .grid-4 { gap: 12px; }
  .feature-card, .why-card { padding: 18px 16px; }
  .edu-card__body { padding: 16px 16px 18px; }

  /* ---------------- 5 · Product family cards ---------------- */
  .cats-grid { gap: 10px; }
  .cat-card { min-height: 54px; justify-content: center; }

  /* ---------------- 6 · Product cards ---------------- */
  .pcard, .ccard { height: 100%; }
  .pcard:active, .ccard:active, .cat-card:active, .mini-card:active, .rel-card:active {
    transform: scale(0.985);
  }

  /* ---------------- 8 · Hajj & Umrah bundle ---------------- */
  .group { padding: 22px 18px 24px; gap: 24px; border-radius: 22px; }
  .group__title { font-size: 21px; }
  .group__desc { font-size: 14.5px; }
  .group__benefit { font-size: 13.5px; }
  .group__cta .btn { width: 100%; }

  /* ---------------- 9 · Product detail pages ---------------- */
  .pd-hero__grid { gap: 18px; padding-bottom: 26px; }
  .pd-hero__img { max-height: 330px; }
  .pd-hero__title { font-size: 25px; }
  .pd-hero__ctas { margin-top: 20px; }
  .pd-hero__ctas .btn { flex: 1 1 auto; justify-content: center; }
  .size-btn { min-height: 46px; padding-inline: 20px; }
  .pd-block { border-radius: 18px; }
  .pd-2col { gap: 14px; }
  .related-grid { gap: 12px; }

  /* ---------------- 10 · About / guide / contact ---------------- */
  .guide-card { padding: 18px 16px; border-radius: 18px; }
  .guide-card__body p { font-size: 15px; line-height: 1.95; }
  .contact-grid { gap: 16px; }
  .form-card { padding: 20px 16px; border-radius: 18px; }
  .field input, .field select { min-height: 48px; font-size: 16px; }
  .field textarea { min-height: 150px; font-size: 16px; }
  .form-row { gap: 12px; }
  #contact-form .btn[type="submit"] { width: 100%; min-height: 50px; }
  #contact-form .pd-note { text-align: center; }

  /* success pages: easy-reach return button */
  .page-hero .pd-hero__ctas .btn { width: 100%; }

  /* ---------------- 11 · Footer: grouped, designed stack ---------------- */
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 18px 16px;
    padding-block: 26px 10px;
  }
  .footer__grid > div:first-child {
    grid-column: 1 / -1;
    padding-bottom: 14px;
    border-bottom: var(--border-w) solid var(--border-faint);
  }
  .footer__grid > div:last-child { grid-column: 1 / -1; }
  .footer__about { margin-top: 8px; max-width: none; }
  .footer__heading { margin-bottom: 4px; }
  .footer__links { font-size: 13.5px; }
  .footer__contact { font-size: 13px; }
  .footer__social { gap: 12px; }
  .footer__social a { width: 44px; height: 44px; }
  .footer__legal { justify-content: center; text-align: center; padding-block: 12px 18px; }
}

/* ---------------- narrow phones (≤374px) ---------------- */
@media (max-width: 374px) {
  .hero__title { font-size: 28px; }
  .pcard__img { height: 158px; }
  .ccard__img { height: 150px; }
  .pcard__name { font-size: 13px; }
  html[lang="ar"] .pcard__name { font-size: 13.5px; }
  .ccard__name { font-size: 13.5px; }
  html[lang="ar"] .cat-card .tag { font-size: 12px; padding: 7px 10px; }
  .cat-card .tag { font-size: 11.5px; letter-spacing: 0.03em; padding: 4px 8px; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__grid > div:first-child { grid-column: auto; }
  .footer__grid > div:last-child { grid-column: auto; }
}

/* ---------------- reduced motion: drawer appears instantly ---------------- */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .mobile-nav { transition: none; transform: none; }
  .pcard:active, .ccard:active, .cat-card:active, .mini-card:active, .rel-card:active {
    transform: none;
  }
}