/* ============================================================
   xlinkcore-mobile.css — Mobile & Responsive Layout
   ============================================================
   Improves mobile experience for xlinkcore.com (PbootCMS)
   - Product grid (homepage categories)
   - Product listing page (2 columns on mobile)
   - Product detail page (image + info stacking)
   - Sidebar behavior on mobile
   - Navigation mobile optimizations
   - General mobile typography & spacing
   - Table horizontal scroll
   ============================================================ */

/* ──────────────────────────────────────────────
   1. HOME — Product Category Grid
      Used on homepage every-stage section
   ────────────────────────────────────────────── */
.product-grid-full {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  padding: 0 28px !important;
  max-width: 1400px;
  margin: 0 auto !important;
}

.product-grid-item {
  padding: 0 !important;
}

.product-grid-link {
  display: block !important;
  text-decoration: none !important;
}

.product-grid-img {
  background: #f1f1f1 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  aspect-ratio: 1 / 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-grid-img img {
  max-width: 80% !important;
  max-height: 80% !important;
  object-fit: contain !important;
  display: block !important;
}

.product-grid-item:hover .product-grid-img {
  transform: scale(1.03);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.product-grid-text {
  text-align: center !important;
  padding: 12px 4px 6px !important;
  font-size: 15px !important;
  color: #333 !important;
  line-height: 1.35 !important;
}

/* ──────────────────────────────────────────────
   2. PRODUCT LISTING PAGE
      Product cards in responsive grid
   ────────────────────────────────────────────── */

/* Ensure all product card images are square-cropped */
.blog-one__img {
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  background: #f1f1f1 !important;
}

.blog-one__img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.5s ease;
}

.blog-one__single:hover .blog-one__img img {
  transform: scale(1.05);
}

.blog-one__single {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.blog-one__single > a {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.blog-content {
  flex: 1 1 auto !important;
  padding: 16px 14px 20px !important;
}

/* ──────────────────────────────────────────────
   3. PRODUCT DETAIL PAGE
      Stack image + info on mobile
   ────────────────────────────────────────────── */

/* Product detail slider — full width on mobile */
.product_view_slider {
  width: 100% !important;
}

.product_feature_img_slider_2 .swiper-slide img {
  width: 100% !important;
  height: auto !important;
  border-radius: 8px;
}

.product_thumb_slider_2 .swiper-slide {
  cursor: pointer;
}

.product_thumb_slider_2 .swiper-slide img {
  width: 100% !important;
  height: 80px !important;
  object-fit: cover !important;
  border-radius: 4px;
}

/* Description/content */
.adminbuy_cn table {
  display: block !important;
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.adminbuy_cn img {
  max-width: 100% !important;
  height: auto !important;
}

/* Contact Now / Back buttons on mobile */
.item-inputs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.item-inputs .thm-btn {
  flex: 1 1 auto !important;
  min-width: 120px !important;
  text-align: center !important;
}

/* ──────────────────────────────────────────────
   4. SIDEBAR — mobile behavior
   ────────────────────────────────────────────── */
@media (max-width: 991px) {
  .sidebar {
    margin-top: 40px !important;
  }
}

/* ──────────────────────────────────────────────
   5. TABLES — horizontal scroll on mobile
   ────────────────────────────────────────────── */
table {
  display: block !important;
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

table td,
table th {
  white-space: nowrap !important;
  min-width: 80px !important;
  padding: 8px 12px !important;
}

/* ──────────────────────────────────────────────
   6. PAGE HEADER — mobile banner
   ────────────────────────────────────────────── */
@media (max-width: 767px) {
  .page-header {
    min-height: 200px !important;
    height: auto !important;
    padding: 100px 0 50px !important;
  }

  .page-header__inner h2,
  .page-header__title {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }
}

/* ──────────────────────────────────────────────
   7. BLOG-SIDEBAR — mobile product list area
   ────────────────────────────────────────────── */
.blog-sidebar.huibg {
  padding: 60px 0 !important;
}

/* ──────────────────────────────────────────────
   8. NAVIGATION — mobile sticky header + hamburger menu
   ────────────────────────────────────────────── */

/* Make the main header sticky on mobile (<1200px) so nav follows scroll */
@media (max-width: 1024px) {
  /* Allow sticky positioning to work (page-wrapper has overflow:hidden which breaks position:sticky) */
  .page-wrapper {
    overflow: visible !important;
  }

  header.main-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    background-color: var(--mibooz-black, #17161a) !important;
    /* Subtle shadow for depth when scrolling */
    box-shadow: 0 2px 20px rgba(0,0,0,0.15);
  }

  .main-menu .main-menu__list {
    display: none !important;
  }

  .main-menu {
    position: relative;
    z-index: 91;
  }

  .main-menu-wrapper__main-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-left: auto !important;
    width: auto !important;
  }

  .main-menu .mobile-nav__toggler {
    display: inline-block !important;
    font-size: 22px !important;
    color: #fff !important;
    padding: 10px 0 !important;
    cursor: pointer !important;
  }

  .main-menu-two .mobile-nav__toggler:hover {
    color: var(--mibooz-black, #17161a) !important;
  }

  .main-menu-wrapper__search-box {
    display: flex !important;
    order: 1;
  }

  .main-menu-wrapper__call {
    display: flex !important;
    order: 2;
  }

  .stricky-header .sticky-header__content {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }
}

/* ──────────────────────────────────────────────
   9. MOBILE BREAKPOINT: Tablets (768-991px)
   ────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 991px) {
  .blog-sidebar .col-md-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* ──────────────────────────────────────────────
   10. MOBILE BREAKPOINT: Small (576-767px)
   ────────────────────────────────────────────── */
@media (min-width: 576px) and (max-width: 767px) {
  .product-grid-full {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    padding: 0 18px !important;
  }

  .product-view_slider.pe-5 {
    padding-right: 0 !important;
  }
}

/* ──────────────────────────────────────────────
   11. MOBILE BREAKPOINT: Phone (< 576px)
   ────────────────────────────────────────────── */
@media (max-width: 575px) {
  /* Product category grid: 2 columns */
  .product-grid-full {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 0 16px !important;
  }

  .product-grid-text {
    font-size: 13px !important;
    padding: 8px 2px 4px !important;
  }

  /* Product detail: stack vertically */
  .product_view_slider.pe-5 {
    padding-right: 0 !important;
  }

  /* Product listing: full width cards in single column */
  .blog-sidebar .col-sm-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  .blog-content {
    padding: 12px 10px 16px !important;
  }

  .blog-one__title {
    font-size: 14px !important;
    -webkit-line-clamp: 2 !important;
  }

  .blog-one__tt {
    font-size: 12px !important;
    -webkit-line-clamp: 2 !important;
  }

  /* Typography */
  body {
    font-size: 14px !important;
  }

  .section-title__title {
    font-size: 24px !important;
    line-height: 32px !important;
  }

  /* Footer */
  .site-footer__top {
    padding: 30px 0 20px !important;
  }

  .footer-widget__title {
    font-size: 18px !important;
  }

  .footer-widget__newsletter .footer-widget__title {
    font-size: 18px !important;
  }

  /* Buttons */
  .thm-btn {
    padding: 10px 20px !important;
    font-size: 14px !important;
  }
}

/* ──────────────────────────────────────────────
   12. MOBILE BREAKPOINT: Very small (< 400px)
   ────────────────────────────────────────────── */
@media (max-width: 400px) {
  .product-grid-full {
    gap: 8px !important;
    padding: 0 12px !important;
  }

  .product-grid-text {
    font-size: 12px !important;
  }

  .blog-one__title {
    font-size: 13px !important;
  }

  .pagination .page-item {
    padding: 8px 14px !important;
    font-size: 14px !important;
    min-width: 40px !important;
  }
}

/* ──────────────────────────────────────────────
   13. PAGINATION — mobile friendly
   ────────────────────────────────────────────── */
@media (max-width: 767px) {
  .pagebar {
    margin-top: 24px !important;
  }

  .pagination {
    gap: 6px !important;
  }

  .pagination .page-item {
    padding: 10px 16px !important;
    font-size: 14px !important;
    min-width: 42px !important;
  }

  .pagination .page-item.hidden-sm {
    display: none !important;
  }
}

/* ──────────────────────────────────────────────
   14. IMAGES — all site images responsive
   ────────────────────────────────────────────── */
img {
  max-width: 100% !important;
  height: auto !important;
}

/* ──────────────────────────────────────────────
   15. FIX: product detail pe-5 causing overflow
   ────────────────────────────────────────────── */
@media (max-width: 767px) {
  .pe-5 {
    padding-right: 0 !important;
  }
}