/* ============================================================
   Wall & Floor — Design System
   Global stylesheet entry point. Consumers link THIS file.
   ============================================================ */
@import url("tokens/fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/base.css");
@import url("components/ui.css");

/* ============================================================
   MOBILE RESPONSIVE OVERRIDES  (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {

  /* 1. HEADER */
  .header-nav-desktop {
    display: none !important;
  }
  header div[style*="display:grid"] {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  /* 2. CATEGORY SECTIONS
     Keep height:100vh so the background image fills the screen.
     But reduce the bottom padding so there is enough room for buttons to wrap.
     overflow stays hidden — buttons simply wrap within the section. */
  section[style*="height:100vh"] > div[style*="position:relative"][style*="z-index:2"],
  section[style*="height:100svh"] > div[style*="position:relative"][style*="z-index:2"] {
    padding-block: 1.5rem 2rem !important;
  }

  /* 3. CHIP BUTTONS — don't stretch, wrap naturally
     Works because flex-wrap:wrap is now in the inline HTML style */
  .wf-hero-chip,
  .wf-btn.wf-btn--gold[style*="flex:1"],
  .wf-btn.wf-btn--primary[style*="flex:1"] {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 0.62rem !important;
    padding: 0.35rem 0.65rem !important;
  }

  /* 4. TEXT — allow wrapping on narrow screens */
  h1[style*="white-space:nowrap"],
  h2[style*="white-space:nowrap"],
  p[style*="white-space:nowrap"] {
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  /* 5. GRIDS */
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns:1fr 1.5fr"],
  div[style*="grid-template-columns: 1fr 1.5fr"],
  div[style*="grid-template-columns:1.5fr 1fr"],
  div[style*="grid-template-columns: 1.5fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* 6. FOOTER */
  footer div[style*="display:flex"] {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
}