/* =====================================================================
   responsive.css — White Boutique UAE
   Mobile and tablet responsive layer. Handles the top bar, header,
   hero, grids, and all page layouts. Load LAST on every page.
   ===================================================================== */


/* =====================================================================
   TABLET & MOBILE   (max-width: 768px)
   ===================================================================== */
@media (max-width: 768px) {

  /* ----- Top Bar ----- */
  .top-bar__inner {
    flex-direction: column;
    gap: 4px;
    text-align: center;
    padding: 6px 16px;
  }
  .top-bar__right {
    gap: 16px;
    font-size: 12px;
  }

  /* ----- Header ----- */
  .header-container {
    flex-wrap: wrap;
    padding: 14px 16px;
  }

  .menu-toggle {
    display: flex;
    margin-left: auto;
    order: 2;
  }

  header .logo {
    order: 1;
  }
  header .logo img {
    max-width: 130px;
  }

  /* Hide header CTA + social on mobile — in hamburger dropdown */
  .header-cta {
    display: none;
  }

  .main-nav,
  header .social-icons {
    flex-basis: 100%;
    width: 100%;
    display: none;
    order: 3;
  }

  /* When menu is open */
  .header-container.nav-open .main-nav {
    display: block;
  }
  .header-container.nav-open .social-icons {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 16px 0 6px;
    margin-top: 10px;
    border-top: 1px solid var(--wb-line, #e0e0e0);
  }

  .main-nav ul {
    flex-direction: column;
    gap: 0;
  }
  .main-nav li {
    width: 100%;
    border-top: 1px solid var(--wb-line, #e0e0e0);
  }
  .main-nav li a {
    display: block;
    padding: 14px 4px;
    font-size: 14px;
  }
  .main-nav li a::after {
    display: none;
  }


  /* ----- Hero ----- */
  .hero {
    height: 75vh;
    min-height: 400px;
  }
  .hero-overlay {
    max-width: 100%;
    padding: 40px 24px;
    align-items: flex-start;
    text-align: left;
    background: linear-gradient(
      0deg,
      rgba(10, 10, 10, .75) 0%,
      rgba(10, 10, 10, .5) 50%,
      rgba(10, 10, 10, .3) 100%
    );
    justify-content: flex-end;
  }
  .hero-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    max-width: 320px;
  }
  .hero-buttons .btn {
    width: 100%;
  }


  /* ----- Product & Solution Grids ----- */
  .tailored-solutions,
  .product-highlights {
    margin: 40px auto;
  }
  .tailored-solutions h2,
  .product-highlights h2 {
    font-size: 24px;
    margin-bottom: 20px;
  }
  .solutions-grid,
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .solution-card img,
  .product-card img {
    height: 150px;
  }
  .solution-card h3,
  .product-card h3 {
    font-size: 16px;
    margin: 12px 0;
  }
}


/* =====================================================================
   SMALL PHONES   (max-width: 480px)
   ===================================================================== */
@media (max-width: 480px) {

  body {
    font-size: 15px;
  }

  /* Hide top bar on very small phones */
  .top-bar {
    display: none;
  }

  .hero {
    height: 65vh;
    min-height: 360px;
  }

  .solutions-grid,
  .product-grid {
    grid-template-columns: 1fr;
  }
  .solution-card img,
  .product-card img {
    height: 200px;
  }

  .tailored-solutions,
  .product-highlights {
    padding: 0 16px;
    margin: 28px auto;
  }
}