/* ===================================================================
   RESPONSIVE.CSS — Zala Fashion
   Mobile-first breakpoints using Bootstrap 3 grid conventions
   xs: < 768px | sm: 768px | md: 992px | lg: 1200px
   =================================================================== */

/* ========================== GLOBAL ================================= */
img {
  max-width: 100%;
  height: auto;
}

.layout_padding {
  padding: 70px 0;
}

.layout_padding2 {
  padding: 45px 0;
}

/* ========================== NAVBAR ================================= */
/* Ensure header never overflows on small screens */
.header_section {
  position: sticky !important;
  top: 0;
  z-index: 1000;
}

.habesha-nav-inner {
  flex-wrap: wrap;
}

/* ========================== HERO SECTION =========================== */
@media (max-width: 991px) {
  .slider_section {
    min-height: auto !important;
  }

  .slider_section .detail-box {
    padding: 100px 0 75px !important;
  }

  .slider_section .detail-box h1 {
    font-size: 3rem !important;
  }
}

@media (max-width: 767px) {
  .slider_section .detail-box {
    padding: 80px 15px 60px !important;
  }

  .slider_section .detail-box h1 {
    font-size: 2.4rem !important;
    letter-spacing: 2px !important;
  }

  .slider_section .detail-box p {
    width: 100% !important;
    font-size: 0.95rem !important;
  }

  .slider_section .slider_bg_box img {
    object-position: 25% center;
  }

  .slider_section .detail-box .slider-link {
    padding: 14px 32px !important;
    font-size: 0.82rem !important;
  }
}

@media (max-width: 480px) {
  .slider_section .detail-box h1 {
    font-size: 2rem !important;
    letter-spacing: 1px !important;
  }

  .slider_section .slider_bg_box img {
    object-position: 40% center;
  }
}

@media (max-width: 376px) {
  .slider_section .detail-box h1 {
    font-size: 1.7rem !important;
  }
}

/* ========================== SECTION HEADINGS ====================== */
@media (max-width: 991px) {
  .heading_container h2 {
    font-size: 1.9rem !important;
  }
}

@media (max-width: 767px) {
  .heading_container h2 {
    font-size: 1.6rem !important;
  }

  .layout_padding {
    padding: 55px 0;
  }

  .layout_padding2 {
    padding: 35px 0;
  }
}

@media (max-width: 376px) {
  .heading_container h2 {
    font-size: 1.35rem !important;
  }
}

/* ========================== PRODUCT CARDS ========================= */
@media (max-width: 767px) {
  .shop_section .box .img-box {
    height: 220px !important;
  }

  .navbar-brand span {
    font-size: 1.2rem !important;
  }
}

@media (max-width: 575px) {
  .shop_section .box .img-box {
    height: 180px !important;
  }

  /* Ensure buy-btn is large enough for thumbs */
  .buy-btn {
    padding: 14px 10px !important;
    font-size: 0.82rem !important;
  }
}

/* ========================== CATEGORY TILES ======================== */
/* The category grid is now Bootstrap cols so it handles itself —
   these rules fine-tune heights and spacing */
@media (max-width: 767px) {
  .category-tile {
    aspect-ratio: 16/9;
  }

  .category-tile.wide {
    aspect-ratio: 16/9;
  }

  .category-tiles-section {
    padding: 50px 0;
  }
}

@media (max-width: 480px) {
  .category-tile {
    aspect-ratio: 4/3;
  }

  .category-tile.wide {
    aspect-ratio: 4/3;
  }
}

/* ========================== ABOUT SECTION ========================= */
@media (max-width: 767px) {
  .about_section .img-box {
    margin-bottom: 40px;
  }

  .about_section .img-box::before {
    width: 55px;
    height: 55px;
  }

  .about_section .img-box::after {
    width: 55px;
    height: 55px;
  }
}

@media (max-width: 480px) {
  .about_section .img-box::before {
    width: 45px;
    height: 45px;
  }

  .about_section .img-box::after {
    width: 45px;
    height: 45px;
  }
}

/* ========================== SERVICES SECTION ====================== */
@media (max-width: 991px) {
  .offer_section .box {
    margin: 5px;
  }
}

@media (max-width: 767px) {
  .offer_section .box {
    margin: 0 0 20px 0 !important;
  }
}

/* ========================== BLOG SECTION ========================= */
@media (max-width: 767px) {
  .blog_section .box {
    margin-bottom: 30px;
  }
}

/* ========================== TESTIMONIALS ========================= */
@media (max-width: 767px) {
  .client_section .box {
    flex-direction: column;
    text-align: center;
    margin: 40px 10px;
  }

  .client_section .box .detail-box {
    align-items: center;
  }

  .client_section .box .img-box {
    margin-right: 0;
    margin-bottom: 20px;
  }
}

@media (max-width: 480px) {
  .client_section .box {
    margin: 28px 4px;
    padding: 22px 14px;
  }
}

/* ========================== INFO / FOOTER ========================= */
@media (max-width: 767px) {
  .info_main_row>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 30px;
  }

  .info_main_row>div:last-child {
    margin-bottom: 0;
  }

  .info_section .social_box {
    justify-content: center;
    margin-top: 20px;
  }

  .info_section .info_contact {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .info_section .info_links_menu {
    text-align: center;
  }

  .info_form_social_row .col-md-4 {
    margin-top: 20px;
  }
}

@media (max-width: 575px) {
  .info_section .info_insta .insta_box {
    flex-direction: column;
  }

  .info_section .info_insta .insta_box .img-box {
    margin-right: 0;
    margin-bottom: 10px;
  }
}

/* ========================== CART & MODALS ======================== */
/* Hiding floating admin link on mobile as it's in the menu */
@media (max-width: 767px) {
  .admin-floating-link {
    display: none !important;
  }
}

@media (max-width: 575px) {
  .cart-sidebar {
    max-width: 100%;
  }

  .cart-btn-fab {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }

  .cart-icon-container {
    bottom: 20px;
    right: 15px;
  }

  .chat-custom-icon {
    width: 50px !important;
    height: 50px !important;
    bottom: 20px !important;
    left: 15px !important;
    font-size: 20px !important;
  }

  /* Ensure detail box headings don't wrap too early */
  .shop_section .box .detail-box h6 {
    font-size: 0.85rem !important;
  }
}

/* ========================== GLOBAL CONTAINER ====================== */
@media (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}