/* ==========================================================================
   Naqaa Organics — Responsive fine-tuning
   Bootstrap's grid handles most breakpoints; this file covers brand-specific
   components at small / large viewports (320px -> desktop).
   ========================================================================== */

/* Prevent any accidental horizontal scroll site-wide */
html, body { max-width: 100%; overflow-x: hidden; }

/* ---- Small phones (<=380px) ---- */
@media (max-width: 380px) {
  :root { --margin: 1rem; }
  .headline-display { font-size: 2.1rem; }
  .hero-section .btn-brand { padding: 0.75rem 1.25rem; font-size: 0.68rem; }
  .brand-word-ar { display: none; }
}

/* ---- Phones / small tablets ---- */
@media (max-width: 767.98px) {
  main { padding-top: 5.25rem; }
  .watermark-year { font-size: 6rem; }
  /* Calmer mobile hero: copy at the top over the empty wall, products visible
     below, badge + metric strip hidden, lead trimmed, stacked CTAs. */
  .hero-section {
    min-height: calc(100vh - 5.25rem);
    min-height: calc(100dvh - 5.25rem);
    align-items: flex-start;
    padding-block: 2.5rem 3rem;
  }
  .hero-overlay {
    background: linear-gradient(180deg, rgba(3, 34, 23, 0.86) 0%, rgba(3, 34, 23, 0.6) 45%, rgba(3, 34, 23, 0.15) 75%, rgba(3, 34, 23, 0.35) 100%);
  }
  .hero-section .headline-display { font-size: 2.5rem; line-height: 1.1; }
  .hero-lead {
    font-size: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hero-ctas { flex-direction: column; gap: 0.75rem !important; max-width: 20rem; margin-top: 4rem; }
  .hero-ctas .btn-brand { width: 100%; }

  /* Filter chips become one swipeable row that bleeds to the screen edge */
  .filter-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(var(--margin) * -1);
    padding-inline: var(--margin);
    padding-block: 0.25rem;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .filter-tabs::-webkit-scrollbar { display: none; }
  .filter-tab { scroll-snap-align: start; white-space: nowrap; }

  .category-tile > img { height: 10rem; }
  .hero-image-frame img { max-height: 18rem; }
  .cta-card .btn-brand { width: 100%; }
  .whatsapp-fab { bottom: 1rem; inset-inline-end: 1rem; }
}

@media (max-width: 575.98px) {
  .value-row { padding: 1rem 1.1rem; }
  .spec-grid { gap: 0.5rem; }
  .spec-tile { padding: 0.85rem; }
}

/* ---- Header collapses to mobile menu below lg ---- */
@media (max-width: 991.98px) {
  .main-nav { display: none; }
}

@media (min-width: 992px) {
  .mobile-menu-trigger { display: none; }
}

/* ---- Tablet ---- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .headline-display { font-size: 3.4rem; }
}

/* ---- Large desktop refinement ---- */
@media (min-width: 1400px) {
  .container-xl-custom { max-width: 1360px; }
}

/* ---- Gallery / spec tables never force page-wide horizontal scroll ---- */
.table-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }