/* ==============================
   Mobile Responsiveness Fixes
   Loaded after main.css — overrides template defaults for small screens
   ============================== */

/* Images should never exceed their container */
img {
  max-width: 100%;
}

/* ============================================================
   SCROLL INDICATOR DOTS
   Shared styles for both Swiper pagination and custom CSS-scroll
   dots (.aq-scroll-dots). Uses the brand pill-dot style:
   inactive = small grey circle, active = wider green pill.
   ============================================================ */

/* --- Swiper built-in pagination overrides --- */
.swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  background: #ccc;
  opacity: 1;
  transition: background 0.3s, width 0.3s, border-radius 0.3s;
}
.swiper-pagination-bullet-active {
  background: #003D29 !important;
  width: 20px !important;
  border-radius: 10px !important;
}

/* Categories has a dark green background — use white dots */
.aqf-categories-active .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.4);
}
.aqf-categories-active .swiper-pagination-bullet-active {
  background: #fff !important;
}

/* Categories: add bottom padding so dots sit below the icons */
@media (max-width: 1399px) {
  .aqf-categories-active {
    padding-bottom: 16px;
  }
}

/* Hero: dots always visible, brand green */
.grc-hero-style .swiper-pagination {
  bottom: 14px;
}

/* Product / Deals Swipers: dot indicators shown at every breakpoint */
.grc-slider-active-2,
.grc-deals-slider-active {
  padding-bottom: 32px;
}
.popular-swiper-pagination {
  text-align: center;
  margin-top: 10px;
}

/* --- Custom CSS-scroll dots (added by scroll-dots.js) --- */
.aq-scroll-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding-top: 14px;
  padding-bottom: 4px;
}
.aq-scroll-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ccc;
  transition: background 0.3s, width 0.3s, border-radius 0.3s;
  cursor: pointer;
  display: inline-block;
}
.aq-scroll-dot.active {
  background: #003D29;
  width: 20px;
  border-radius: 10px;
}

/* ---- Body padding to clear fixed bottom nav (visible on < 768px) ---- */
@media (max-width: 767px) {
  body {
    padding-bottom: 72px;
  }
}

/* ---- Live-sales toast: clear bottom nav + back-to-top button ----
   Bottom nav (~65px) is at bottom: 0. Toast's default is bottom: 20px
   which hides it behind the nav. Lift it above.
   Also shrink max-width so it doesn't reach the back-to-top button
   (which sits at inset-inline-end: 15px, width: 46px → rightmost 61px). ---- */
@media (max-width: 767px) {
  .product-details-live-sales-box {
    bottom: 80px !important;
    inset-inline-start: 10px !important;
    inset-inline-end: auto !important;
    max-width: calc(100% - 80px) !important;
    z-index: 1000;
  }
}

/* ---- Back-to-top (.progress-wrap): reposition on mobile ----
   Default: inset-inline-end 50px, bottom 116px, z-index 99.
   On mobile: the bottom nav is ~65px, and the WhatsApp button sits
   below it at bottom:90px, so this is lifted above both.
   Also tuck it closer to the right edge (15px) and raise z-index
   above the nav (999) so it's always tappable. ---- */
@media (max-width: 767px) {
  .progress-wrap {
    inset-inline-end: 15px !important;
    bottom: 164px !important;
    z-index: 1001 !important;
  }
}

/* ============================================================
   HERO SECTION
   On mobile (<992px): text on top, image below.
   Remove the large decorative ::before circle (overflows on mobile),
   constrain image height, and tighten padding.
   main.css already handles: pt 100 at ≤1199px, pb 50 at ≤991px,
   title 44px at ≤767px.
   ============================================================ */
@media (max-width: 991px) {
  /* Drop bottom-align so columns just stack naturally */
  .grc-hero-slider-item .row {
    align-items: flex-start;
  }

  /* Remove the giant decorative circle — it overflows on mobile */
  .grc-hero-thumb-wrap::before {
    display: none !important;
  }

  /* Image sits below text: constrain height, full width */
  .grc-hero-thumb-wrap {
    padding: 0 0 30px 0;
  }
  .grc-hero-thumb-wrap img {
    max-height: 320px;
    object-fit: cover;
    object-position: center top;
    border-radius: 12px;
  }

  /* Tighten content padding on tablet */
  .grc-hero-content {
    padding-top: 60px !important;
    padding-bottom: 30px !important;
  }
}

@media (max-width: 479px) {
  .grc-hero-title {
    font-size: 28px !important;
    margin-bottom: 15px;
  }
  .grc-hero-subtitle {
    font-size: 15px !important;
  }
  .grc-hero-content {
    padding-top: 35px !important;
    padding-bottom: 20px !important;
  }
  .grc-hero-thumb-wrap img {
    max-height: 220px;
  }
}

/* ============================================================
   FEATURE SECTION
   On tablet (sm–md): 2-column grid.
   On xs: single column.
   ============================================================ */
@media (min-width: 576px) and (max-width: 991px) {
  .grc-feature-style .aqf-shop-feature-wrap {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 575px) {
  .grc-feature-style .aqf-shop-feature-wrap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    padding: 10px 5px 10px 5px;
  }
  .grc-feature-style .aqf-shop-feature-wrap::-webkit-scrollbar {
    display: none;
  }
  .grc-feature-style .aqf-shop-feature-item {
    flex: 0 0 200px !important;
    width: 200px !important;
    min-width: 200px;
    border-right: none !important;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    padding: 15px !important;
  }
}

/* ============================================================
   DEALS SECTION
   Left banner is hidden on mobile via d-none d-lg-block (template).
   Reset excessive top margin and fix countdown row overflow.
   ============================================================ */
@media (max-width: 991px) {
  .grc-deals-wrapper {
    margin-top: 20px !important;
  }
  .aq-product-3-top-right {
    flex-wrap: wrap !important;
    gap: 8px;
  }
  .aqf-deals-countbox {
    flex-wrap: wrap !important;
    gap: 4px;
    justify-content: flex-start !important;
  }
}

@media (max-width: 575px) {
  .aqf-deals-slider-top .aq-countdown-text {
    display: none;
  }
  .aq-countdown-style-2 .count-box span {
    font-size: 18px;
  }
}

/* ============================================================
   POPULAR PRODUCTS — CATEGORY DROPDOWN
   ============================================================ */
@media (max-width: 991px) {
  /* On tablet/mobile, left-align the dropdown + arrows row */
  .grc-product-top .d-flex.align-items-center.justify-content-lg-end {
    justify-content: flex-start !important;
    flex-wrap: wrap;
  }
}

/* ============================================================
   BANNER SECTION
   Horizontal scroll on tablet and below instead of wrapping.
   ============================================================ */
@media (max-width: 991px) {
  .grc-banner-style .row {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  .grc-banner-style .row::-webkit-scrollbar {
    display: none;
  }
  .grc-banner-style .row > [class*="col-"] {
    flex: 0 0 270px !important;
    width: 270px !important;
    max-width: none !important;
    padding: 0 8px;
  }
  .aqf-banner-2-content .aq-section-title,
  .aqf-banner-2-content .fs-40 {
    font-size: 28px !important;
    margin-bottom: 12px;
  }
}

@media (max-width: 575px) {
  .grc-banner-style .row > [class*="col-"] {
    flex: 0 0 240px !important;
    width: 240px !important;
  }
  .aqf-banner-2-content .aq-section-title,
  .aqf-banner-2-content .fs-40 {
    font-size: 22px !important;
  }
}

/* ============================================================
   DISCOUNT SECTION
   Horizontal scroll on tablet and below instead of stacking.
   ============================================================ */
@media (max-width: 991px) {
  .grc-discount-ptb .row {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  .grc-discount-ptb .row::-webkit-scrollbar {
    display: none;
  }
  .grc-discount-ptb .row > [class*="col-"] {
    flex: 0 0 300px !important;
    width: 300px !important;
    max-width: none !important;
    padding: 0 8px;
  }
  /* Tall enough to fit the overlaid subtitle/title/text/button stack
     without it spilling past the box (which, combined with overflow-x
     above, was making the whole row vertically scrollable). */
  .grc-discount-ptb .aqf-banner-2-box {
    height: 340px !important;
  }
  .grc-discount-item .aqf-banner-2-thumb {
    height: 340px !important;
  }
}

@media (max-width: 575px) {
  .grc-discount-ptb .row > [class*="col-"] {
    flex: 0 0 260px !important;
    width: 260px !important;
  }
  .grc-discount-ptb .aqf-banner-2-box {
    height: 300px !important;
  }
  .grc-discount-item .aqf-banner-2-thumb {
    height: 300px !important;
  }
}

/* ============================================================
   BLOG SECTION
   Horizontal scroll on mobile instead of 2-column wrap.
   Targets only the cards row, not the heading row above it.
   ============================================================ */
@media (max-width: 767px) {
  .grc-blog-ptb .container-1630 > .row {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  .grc-blog-ptb .container-1630 > .row::-webkit-scrollbar {
    display: none;
  }
  .grc-blog-ptb .container-1630 > .row > [class*="col-"] {
    flex: 0 0 250px !important;
    width: 250px !important;
    max-width: none !important;
    padding: 0 8px;
  }
}

/* ============================================================
   CATEGORIES SECTION (Swiper view — below 1400px)
   Shrink icons and labels so more items are comfortably visible.
   ============================================================ */
@media (max-width: 1399px) {
  .grc-categories-icon {
    height: 20px;
    margin-bottom: 6px;
  }
  .grc-categories-icon svg {
    width: 20px !important;
    height: auto !important;
  }
  .grc-categories-title {
    font-size: 13px !important;
  }
}

@media (max-width: 767px) {
  .grc-categories-icon {
    height: 16px;
    margin-bottom: 5px;
  }
  .grc-categories-icon svg {
    width: 16px !important;
    height: auto !important;
  }
  .grc-categories-title {
    font-size: 11px !important;
  }
}

/* ============================================================
   FOOTER
   Center copyright + payment on xs. Fix payment image overflow.
   ============================================================ */
@media (max-width: 575px) {
  .aq-copyright-text {
    text-align: center !important;
  }
  .aq-copyright-payment {
    text-align: center !important;
    margin-top: 12px;
  }
  .aq-copyright-payment img {
    max-width: 100%;
    height: auto;
  }
}

/* ============================================================
   HEADER
   Logo cap on very narrow phones.
   ============================================================ */
@media (max-width: 359px) {
  .aq-header-logo img {
    max-width: 90px;
  }
  .grc-header-right-option ul li:not(.aq-header-top-cart):not(.aq-header-top-bar) {
    display: none !important;
  }
}

/* ============================================================
   GENERAL OFFCANVAS / CART DRAWERS
   Ensure full-width on mobile.
   ============================================================ */
@media (max-width: 575px) {
  .aq-offcanvas-area,
  .aq-cartmini-area,
  .aq-wishlist-popup {
    width: 100% !important;
    max-width: 100% !important;
  }
}