/* ============================================================
   Homeware Mart — responsive overrides (tablet + mobile)

   The pages are a design-tool export built entirely from inline
   styles with a hard-coded desktop layout (min-width:1240px). This
   sheet unlocks that layout below 1240px without touching the markup.

   Rules are anchored on the stable [data-screen-label] / id hooks
   that survive the React render, and use !important because the
   framework applies every base style inline (inline wins otherwise).
   ============================================================ */

/* ------------------------------------------------------------
   1. Kill horizontal scroll on anything narrower than desktop.
   The page wrapper is locked to min-width:1240px and the hero
   pager bar has a fixed 1232px width — both overflow below 1240.
   ------------------------------------------------------------ */
@media (max-width: 1239px) {
  [data-dc-page] { min-width: 0 !important; }

  [data-screen-label="Hero"] > div:last-child {
    width: auto !important;
    left: 24px !important;
    right: 24px !important;
    transform: none !important;
    justify-content: center !important;
  }
}

/* ============================================================
   2. TABLET  (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {

  /* ---- shared chrome ---- */
  [data-screen-label="Nav"] > div > span { display: none !important; }      /* SSM registration line */
  [data-screen-label="Footer"] > div:first-child {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px 40px !important;
  }

  /* ---- home: hero ---- */
  [data-screen-label="Hero"] > div:first-child > div > div {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 46px 24px 58px !important;
  }
  [data-screen-label="Hero"] h1 { font-size: 50px !important; }
  [data-screen-label="Hero"] > div:first-child > div > div > div:last-child { height: 300px !important; }

  /* ---- home: product / card grids ---- */
  [data-screen-label="Categories"]  > div            { grid-template-columns: repeat(3, 1fr) !important; }
  [data-screen-label="Brands"]      > div            { grid-template-columns: repeat(3, 1fr) !important; }
  [data-screen-label="Instagram"]   > div:last-child { grid-template-columns: repeat(4, 1fr) !important; }
  [data-screen-label="Flash Deal"]  > div:last-child { grid-template-columns: repeat(3, 1fr) !important; }
  [data-screen-label="Most Wanted"] > div:nth-child(3) { grid-template-columns: repeat(3, 1fr) !important; }
  [data-screen-label="Services"]    > div            { grid-template-columns: repeat(2, 1fr) !important; }
  [data-screen-label="Testimonials"] > div:last-child { grid-template-columns: repeat(2, 1fr) !important; }
  [data-screen-label="Latest News"] > div:last-child { grid-template-columns: repeat(2, 1fr) !important; }

  /* ---- products page ---- */
  [data-screen-label="Product grid"] > div:first-child { grid-template-columns: repeat(3, 1fr) !important; }

  /* ---- product detail ---- */
  [data-screen-label="Product detail"] > div {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  [data-screen-label="Related products"] > div:last-child { grid-template-columns: repeat(3, 1fr) !important; }

  /* ---- about ---- */
  [data-screen-label="Our story"] > div {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  [data-screen-label="Our story"] > div > div:last-child { height: 340px !important; }
  [data-screen-label="What we do"] > div:last-child { grid-template-columns: repeat(2, 1fr) !important; }

  /* ---- contact ---- */
  [data-screen-label="Contact info + form"] > div {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* ---- inner page titles (Products / About / Contact) ---- */
  [data-screen-label="Page title"] > div:last-child {
    padding-top: 64px !important;
    padding-bottom: 60px !important;
  }
  [data-screen-label="Page title"] h1 { font-size: 40px !important; }
}

/* ============================================================
   3. MOBILE  (≤ 640px)
   ============================================================ */
@media (max-width: 640px) {

  /* ---- top bar: stack the two info lines ---- */
  [data-screen-label="Top bar"] > div {
    flex-direction: column !important;
    gap: 3px !important;
    text-align: center !important;
  }

  /* ---- header: logo + WhatsApp on row 1, full-width search on row 2 ---- */
  [data-screen-label="Header"] > div {
    flex-wrap: wrap !important;
    gap: 12px 16px !important;
  }
  [data-screen-label="Header"] form {
    order: 3 !important;
    flex: 1 1 100% !important;
    max-width: none !important;
  }
  /* mobile header: drop the WhatsApp icon/number block entirely (redundant with the
     top bar number + floating WhatsApp button) — leaves a clean logo + search header */
  [data-screen-label="Header"] > div > a:last-child { display: none !important; }

  /* ---- nav: one clean row, items spread edge-to-edge (scrolls only on <340px) ---- */
  [data-screen-label="Nav"] > div {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  [data-screen-label="Nav"] nav {
    flex: 1 !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  [data-screen-label="Nav"] nav a {
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 14px 8px !important;
  }

  /* ---- hero ---- */
  [data-screen-label="Hero"] > div:first-child > div > div {
    padding: 32px 20px 40px !important;
    gap: 22px !important;
  }
  [data-screen-label="Hero"] h1 { font-size: 34px !important; }
  [data-screen-label="Hero"] > div:first-child > div > div > div:last-child { height: 220px !important; }
  [data-screen-label="Hero"] > div:last-child { bottom: 12px !important; }
  /* hero CTAs: stack full-width instead of squeezing two per row (mid-word wrapping) */
  [data-screen-label="Hero"] > div:first-child > div > div > div:first-child > div {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 10px !important;
  }
  [data-screen-label="Hero"] > div:first-child > div > div > div:first-child > div > a {
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  /* ---- home grids down to 2 / 1 col ---- */
  [data-screen-label="Categories"] > div { grid-template-columns: repeat(2, 1fr) !important; }
  [data-screen-label="Brands"] > div {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 20px !important;
    gap: 16px !important;
  }
  [data-screen-label="Instagram"] > div:last-child { grid-template-columns: repeat(3, 1fr) !important; }

  [data-screen-label="Flash Deal"] > div:last-child {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  [data-screen-label="Flash Deal"] > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  [data-screen-label="Most Wanted"] > div:nth-child(3) {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  [data-screen-label="Services"] > div {
    grid-template-columns: 1fr !important;
    padding: 26px 24px !important;
    gap: 20px !important;
  }
  [data-screen-label="Testimonials"] > div:last-child { grid-template-columns: 1fr !important; }
  [data-screen-label="Latest News"] > div:last-child { grid-template-columns: 1fr !important; }

  /* ---- promo banner: stack + keep the photo from collapsing ---- */
  [data-screen-label="Promo banner"] > div { grid-template-columns: 1fr !important; }
  [data-screen-label="Promo banner"] > div > div:first-child { min-height: 240px !important; }
  [data-screen-label="Promo banner"] > div > div:last-child { padding: 32px 28px !important; }
  [data-screen-label="Promo banner"] h3 { font-size: 34px !important; }

  /* ---- wide banner ---- */
  [data-screen-label="Wide banner"] > div { height: 260px !important; }
  [data-screen-label="Wide banner"] > div > div:last-child {
    width: auto !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0 24px !important;
  }
  [data-screen-label="Wide banner"] h3 { font-size: 30px !important; }

  /* ---- footer ---- */
  [data-screen-label="Footer"] > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  [data-screen-label="Footer"] > div:last-child > div {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
  }
  [data-screen-label="Footer"] > div:last-child > div > div {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  /* ---- products page ---- */
  [data-screen-label="Product grid"] > div:first-child {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* ---- product detail ---- */
  [data-screen-label="Related products"] > div:last-child {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* ---- about ---- */
  [data-screen-label="Our story"] > div > div:last-child { height: 280px !important; }
  [data-screen-label="What we do"] > div:last-child { grid-template-columns: 1fr !important; }
  [data-screen-label="Stats"] > div {
    padding: 26px 16px !important;
    gap: 10px !important;
  }
  [data-screen-label="Stats"] > div > div > span:first-child { font-size: 32px !important; }
  [data-screen-label="Store gallery"] > div {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  [data-screen-label="Store gallery"] > div > div { height: 200px !important; }
  [data-screen-label="CTA"] > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
    padding: 32px 28px !important;
  }
  [data-screen-label="CTA"] h3 { font-size: 30px !important; }

  /* ---- contact ---- */
  [data-screen-label="Contact info + form"] > div > div:first-child > div:nth-child(2) {
    grid-template-columns: 1fr !important;
  }
  [data-screen-label="Map"] > div { height: 260px !important; }

  /* ---- inner page titles ---- */
  [data-screen-label="Page title"] > div:last-child {
    padding-top: 48px !important;
    padding-bottom: 44px !important;
  }
  [data-screen-label="Page title"] > div:last-child > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  [data-screen-label="Page title"] h1 { font-size: 30px !important; }
}