/* Tablet View */
@media (min-width: 768px) and (max-width: 1024px) {

  .mobile-signin {
font-size: 17px;
    color: var(--text-dark);
    text-decoration: none;
  }

  .mobile-cart {
position: relative;
    color: var(--text-dark);
    font-size: 24px;
  }

  .mobile-cart .cart-count {
    position: absolute;
    top: -6px;
    right: -10px;
    background: var(--search-btn);
    color: var(--text-dark);
    font-size: 11px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 50%;
  }

  .location-icon{
    margin-top: -36px;
    margin-right: 11px;
  }

  .header-location .delivery-info {
display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: bold;
  }

  .header-location .update-location {
    font-size: 14px;
    font-weight: bold;
  }

.search-form {
  display: flex;
  width: 100%;
  height: 38px;
  border: 1px solid var(--border-default);
  overflow: hidden;
}

  .search-dropdown {
    width: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .search-dropdown select {
    border: none;
    background: transparent;
    width: 100%;
    font-size: 12px;
  }

.search-button {
  border: none;
  padding: 0 10px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

  .mobile-nav-links .nav-link {
color: var(--text-dark);
    text-decoration: none;
    font-size: 16px;
    padding: 0 10px;
    white-space: nowrap;
    font-weight: bold;
  }

  .mobile-nav-links .nav-link:hover {
    color: var(--search-btn); 
  }

  .header-location .update-location:hover {
  color: var(--search-btn);
}

  .header div.header-bottom div.header-container nav#navmenu.navmenu{
    margin-left: 0;
  }

.header .logo img {
  width: 125px;
  margin-left: 0;
}
.header-location {
  padding: 0;
}

  .header-container {
    padding: 0;
  }

  .header-items {
    margin-right: 0;
  }

  .header-option {
    padding: 0 !important;
  }
  .option-line-2 {
  font-size: 14px;
  }

  #product-detail.product-container div.container.mb-5 div.a-section.a-spacing-medium.a-spacing-top-small{
    margin-left: 0;
  }

    .product-container {
    display: block;
  }

}

  @media (max-width: 767px) {
  .header-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
  }

  /* ===== Top Row: Menu | Logo | Cart ===== */
  .header-top-row {
    order: 1;
    display: flex;
    align-items: center;

    width: 100%;
    padding: 8px 12px;
    background-color: var(--surface-color);
    border-bottom: 1px solid var(--border-default);
  }

  .mobile-menu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    background: transparent !important;
    border: none !important;
    color: var(--text-dark) !important;
  }

  .header-logo img {
    width: 140px !important;
    height: 40px !important;
    margin: 0 !important;
  }

.mobile-header-right {
display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    justify-content: flex-end;
    flex-shrink: 0;
    padding-right: 106px;
    transform: translateX(101px);
     margin-left: auto;
}

  .mobile-signin {
font-size: 17px;
    color: var(--text-dark);
    text-decoration: none;
  }

  .mobile-cart {
position: relative;
    color: var(--text-dark);
    font-size: 24px;
  }

  .mobile-cart .cart-count {
position: absolute;
    top: -6px;
    right: 4px;
    color: var(--search-btn);
    font-size: 12px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 50%;
  }

  /* ===== LOCATION ROW ===== */
  .header-location {
order: 4;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 8px 16px;
    background-color: var(--header-location-bg);
    box-sizing: border-box;
    left: 0;
    right: 0;
    flex-direction: row;
    height: 54px;

  }

  .location-icon{
    margin-top: -39px;
    margin-right: 11px;
  }

  .header-bottom{
    display: none;
  }

  .header-location .delivery-info {
display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: bold;
  }

  html body.index-page header#header.header div.header-top div.header-container div.header-location div.delivery-info span.location-icon i.bi.bi-geo-alt-fill{
    margin-right: 11px;
  }

  .header-location .update-location {
    font-size: 14px;
    font-weight: bold;
  }

  /* ===== SEARCH BAR ===== */
  .header-search {
    order: 2;
    width: 100%;
    padding: 18px 12px;
    background: var(--surface-color);
  }

.search-form {
  display: flex;
  width: 100%;
  height: 38px;
  border: 1px solid var(--border-default);
  overflow: hidden;
}

  .search-dropdown {
    width: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background-color);
    border-right: 1px solid var(--border-default);
  }

  .search-dropdown select {
    border: none;
    background: transparent;
    width: 100%;
    font-size: 12px;
    padding: 0;
  }

.search-input {
  flex: 1;
  border: none;
  padding: 0 10px;
  font-size: 14px;
}

.search-button {
  background: var(--search-btn);
  border: none;
  padding: 0 10px;
  font-size: 16px;
  cursor: pointer;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* for item  */

  .mobile-nav-links {
order: 3;
    display: flex;
    justify-content: flex-start;
    padding: 10px 0;
   margin-right: auto;
    margin-bottom: 10px;
    margin-top: -19px;
  }

  .mobile-nav-links .nav-link {
color: var(--text-dark);
    text-decoration: none;
    font-size: 16px;
    padding: 0 10px;
    white-space: nowrap;
    font-weight: bold;
  }

.mobile-nav-links a.nav-link small{
    font-size: 12px;
  }

  .mobile-nav-links .nav-link:hover {
    color: var(--search-btn); 
  }

.header-top div.header-container div.mobile-nav-links a.nav-link{
    margin-top: 10px;
  }

  /* Hide desktop header items */

    .search-dropdown {
    display: none;
  }
  .header-items {
    display: none;
  }

  .header-location .update-location:hover {
  color: var(--search-btn);
}

  /* Reduce header height */
  .header {
height: 252px;
  }

  .header-top, .header-bottom {
    padding: 5px 0;
  }

  /* porfolio card image height issue  */

  .img-fluid {
  max-width: 100%;
  height: 250px;
}

.container.checkout-layout {
  display: grid;
  /* padding-top: 145px; */
}

  #product-detail.product-container div.container.mb-5 div.a-section.a-spacing-medium.a-spacing-top-small{
    margin-left: 0;
  }

  .product-container {
    display: block;
  }

  html body.index-page div.page-layout section#hero-slider.hero.section {
  padding: 160px 0 51px;
}

section.grid {
  margin: 0;
}

}

/* for menu  */

/* Chrome/Edge only – desktop */
@media (min-width: 769px) {
  @supports (-webkit-appearance: none) and (not (-moz-appearance: none)) {
    .Jrockhub-menu {
      margin-left: 0;
    }
  }
}

/* All browsers – mobile */
@media (max-width: 768px) {
  .Jrockhub-menu {
    margin-left: 10px;
  }
}


@media (max-width: 410px){

  .mobile-header-right{
            margin-left: -31px;
  }
  
  .header-location{
            padding: 6px 17px;

  }
}
@media (max-width: 320px) {
  .mobile-header-right {
            margin-left: -75px;
  }
}

@media (max-width: 360px) {
  .header-location {
    padding: 5px 12px; 
  }

  
.header-location .location-text{
  font-size: 12px;
}

.header-location .update-location{
  font-size: 12px;
}
}

@media (min-width: 768px) {
  .desktop-sidebar {
    display: block; 
  }
  .mobile-menu-toggle {
    display: none; 
  }
}

@media (max-width: 767px) {
  .desktop-sidebar {
    display: none; 
  }
  .mobile-menu-toggle {
    display: block; 
  }
}

/* for hero section , banner and sliding  */

/* --- Mobile-First Approach: Styles for screens up to 767px (mobile) --- */
@media (max-width: 767px) {

  /* Adjust hero content layout to be centered */
  .hero-content {
    text-align: center;
  }

  /* Heading adjustments for mobile readability */
  .hero .hero-content h1 {
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 10px;
  }

  /* Adjustments for the Call-to-action buttons */
  .hero .hero-cta {
    display: flex;
    flex-direction: row; 
    justify-content: center; 
    align-items: center;
    gap: 15px; 
    margin-top: 20px;
    flex-wrap: wrap; 
  }

  .aos-init.aos-animate a.btn-primary.big-btn,
  .aos-animate a.btn-secondary.glightbox {
    width: auto; 
    max-width: 208px; 
  }

  /* Adjustments for the stats cards layout */
  .hero .hero-stats {
    flex-direction: column;
    gap: 10px;
  }

  .hero-stats .stat-card {
    min-width: 200px;
    flex: 1 1 auto;
    box-shadow: var(--shadow-sm);
    margin: auto;
  }

  /* **Updated Hero Image Styles for Mobile** */
  .hero-image {
    display: block; 
    margin-top: 30px; 
  }

  .hero .hero-image img {
    width: 100% !important; 
    height: auto !important;
    margin-left: 0 !important; 

    transform: none;
    margin-top: -45px;
  }

  /* Hide floating elements for mobile to prevent clutter */
  .floating-diya {
    display: none;
  }
}


/* --- Styles for screens from 768px to 991px (tablet) --- */
@media (min-width: 768px) and (max-width: 991px) {

  /* Adjustments for heading sizes on tablets */
  .hero .hero-content h1 {
    font-size: 2.5rem;
  }

  /* Adjustments for the stats cards layout */
  .hero .hero-stats {
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
  }

    .hero .hero-cta {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 20px; 
  }

.aos-init.aos-animate a.btn-primary.big-btn,
  .aos-animate a.btn-secondary.glightbox {
    width: auto;
    max-width: 250px;
  }

  .hero-stats .stat-card{
    min-width: 150px;
    margin: auto;
  }

  /* **Updated Hero Image Styles for Tablet** */
  .hero-image {
    margin-left: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  .hero .hero-image img{
    transform: scale(1);
    margin-left: 0;
    width: 100%;
    height: auto;
  }
  .hero-image[data-aos='fade-left'] {
    width: 100%;
    margin-top: 30px;
  }

  /* Floating elements for tablet */
  .floating-diya {
    --size: 40px;
    --delay: 0.2s;
  }
}


/* --- Styles for screens 992px and up (desktop) --- */
@media (min-width: 992px) {

  .hero .hero-content h1 {
    font-size: 3rem;
  }

  .hero .hero-stats {
    flex-wrap: wrap;
  }

  .hero-image[data-aos='fade-left'] {
    margin-left: 101px;
    width: auto;
  }

  .hero .hero-image img {
    transform: scale(1.05);
  }
}

/* Specific iPad Pro (Portrait & Landscape) */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

  .hero .hero-content h1 {
    font-size: 2.6rem;
  }

  
  .hero-image[data-aos='fade-left'] {
    margin-left: 0;          
    width: 100%;             
  }

    .hero .hero-image img {
    transform: scale(1);     
    width: 81%;
    height: auto;
    object-fit: cover;       
  }

    /* If you have a sliding banner wrapper */
  .hero-slider, .swiper-slide, .carousel-item {
    overflow: hidden;
  }
}



/* ===== Responsive Design ===== */

/* Tablet adjustments (≤ 992px) */
@media (max-width: 992px) {
  .col-lg-3 {
    width: 100% !important;
    margin: 0 !important;
  }



  .filter-sidebar {
    /* margin: 0 !important; */
    box-shadow: var(--shadow-sm);
  }

  .product-card img {
    height: 280px;
  }

  .category-nav-mobile {
    gap: 24px;
  }

  #mobileFilters {
    margin-bottom: 1rem;
  }
}

/* Mobile view (≤ 768px) */
@media (max-width: 768px) {

  .filter-toggle {
    position: sticky;
    top: 60px;
    z-index: 20;
    background-color: var(--surface-color);
  }

  .filter-sidebar.p-4.rounded.shadow-sm.bg-white {
    padding: 1rem !important;
    border-radius: 8px !important;
    margin: auto;
    margin-right: 11px;
    margin-left: -11px;

  margin-top: -48px;
  }

  .product-card img {
    height: 240px;
    padding: 16px;
  }

  .product-card h6 {
    font-size: 0.9rem;
  }

  .product-card .btn {
    font-size: 0.75rem;
  }

  .category-link {
    font-size: 0.85rem;
  }
}

/* Small mobile view (≤ 576px) */
@media (max-width: 576px) {
  .col-md-3, .col-sm-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  html body.index-page main.main div.container.mb-5 div#product-detail.product-container div.row.g-4 div.col-md-3{
    width: auto;
  }

  .filter-toggle button {
    font-size: 0.85rem;
  }

  .filter-sidebar h5, .filter-sidebar h6 {
    font-size: 0.9rem;
  }

  .filter-sidebar ul li {
    font-size: 0.85rem;
  }

  .product-card img {
    height: 200px;
  }

  .product-card .p-3 {
    padding: 0.75rem !important;
  }

  #categorySuggestions {
    margin-top: 0;
  }
}

/* Hide all categories except active on mobile */
@media (max-width: 768px) {
  .category-nav-mobile .category-link {
    display: none; /* hide all */
  }

  .category-nav-mobile .category-link.active {
    display: inline-block; /* show only active */
  }
}
@media (max-width: 1866px) {

    #product-detail.product-container div.container.mb-5 div.a-section.a-spacing-medium.a-spacing-top-small{
    margin-left: 0;
  }


  /* Show mobile filter bar */
  .mobile-filter-bar {
    display: block;

    z-index: 10;
    background: var(--surface-color);
    padding: 11px 9px;
    overflow-x: auto;
    white-space: nowrap;
    margin-top: -75px;
    
    
  }

  .mobile-filter-bar::-webkit-scrollbar {
    height: 4px;
  }

  .mobile-filter-bar::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: 4px;
  }

  /* For Webkit browsers (Chrome, Safari, Edge) */
.mobile-filter-bar .filter-options-scroll::-webkit-scrollbar {
    display: flex; 
    margin-bottom: 14px;
}

/* For Firefox */



.section.py-5.light-background div.container.aos-init.aos-animate div.row div.col-lg-9 div.d-flex.justify-content-between.align-items-center.mb-4 div.mb-3 select#sortSelect.form-select.border-0.shadow-sm{
  margin-top: 21px;
}



  .mobile-filter-bar .filter-btn.active,
  .mobile-filter-bar .filter-btn:focus {
    background: var(--accent);
    color: var(--surface-color);
    border-color: var(--accent);
  }

  /* Collapsible filter panels */
  .mobile-filter-options {
    display: block !important;
    background: var(--surface-color);
    border-top: 1px solid var(--border-light);
    margin-bottom: 10px;
  }

  .mobile-filter-options .filter-content {
    background: var(--surface-color);
    border-bottom: 1px solid var(--border-light);
    padding: 10px 12px;
  }

  .mobile-filter-options ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mobile-filter-options ul li {
    padding: 6px 0;
    font-size: 14px;
    border-bottom: 1px dashed var(--background-color);
  }

  .mobile-filter-options ul li:last-child {
    border-bottom: none;
  }

  /* Price buttons inside mobile filter */
  .mobile-filter-options .btn-outline-secondary {
    font-size: 13px;
    border-radius: 20px;
    padding: 5px 10px;
    margin: 4px;
  }

  .mobile-filter-options .btn-outline-secondary.active-price {
    background-color: var(--accent);
    color: var(--surface-color);
    border-color: var(--accent);
  }

  /* Minor spacing for better visual separation */
  .mobile-filter-options .filter-content + .filter-content {
    margin-top: 4px;
  }

  /* Smooth collapse */
.mobile-filter-options .filter-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}

.mobile-filter-options .filter-content.show {
  max-height: 500px;
}

/* for detail page  */

html body.index-page main.main div.container.mb-5 div#product-detail.product-container div.row.g-4 div.col-md-5.d-flex.align-items-start{
  margin-left: 0;
}

}

/* Desktop only: hide mobile filter bar */
@media (min-width: 1100px) {
  .mobile-filter-bar,
  .mobile-filter-options {
    display: none !important;
  }

  .filter-sidebar {
    display: block !important;
  }
}
@media (min-width: 768px) and (max-width: 1124px) {

  /* Each product should take 50% width (2 per row) */
  .row.g-4 > [class*="col-md-3"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  /* Optional: On landscape iPads, show 3 cards per row */
  @media (min-width: 992px) and (max-width: 1124px) {
    .row.g-4 > [class*="col-md-3"] {
      flex: 0 0 33.3333% !important;
      max-width: 33.3333% !important;
    }

    
  }

  /* Adjust product card look */
  .product-card {
    margin-bottom: 20px;
  }

  .product-card img {
    height: 220px;
    object-fit: contain;
  }

  .product-card h6 {
    font-size: 1rem;
  }

   .category-nav-mobile .category-link {
    display: none; 
  }

  .category-nav-mobile .category-link.active {
    display: inline-block; 
  }

    .mobile-filter-bar {
          margin-top: -47px;
    }
}

/* Tablet / iPad view (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .mobile-filter-bar {
    overflow-x: visible;    
    white-space: normal;     
    background: var(--surface-color);        
    padding: 0.5rem 1rem !important;
    margin-top: 0 !important; 
    display: block !important;
    margin-top: -47px !important;
  }

  .filter-options-scroll {
justify-content: center !important;
    margin-right: -88px;
    margin-left: -132px;
    background: var(--surface-color);
    width: 1001px;
    padding: 10px 79px;
    padding-right: 79px;
    padding-left: 79px;
    margin-top: -9px;
    margin-bottom: -12px;
  }

  .filter-options-scroll .filter-btn {
    margin-right: 0.75rem; 
  }

    .search-input {
    width: 0 !important;
  }

    .gap-4 {
gap: 0 !important;
}
}

@media (min-width: 1025px) and (max-width: 1866px) {

  /* --- Main Filter Bar --- */
  .mobile-filter-bar {
    display: block !important;
    white-space: normal;
    padding: 10px 79px;
    /* margin-bottom: 1351px; */
    overflow-x: visible;
    background: var(--surface-color);
  }
  
  /* --- Filter Buttons Container --- */
  .filter-options-scroll {
    padding: 10px 79px !important;
    padding-right: 79px !important;
    padding-left: 79px !important;

    /* Use flexbox to correctly align and wrap buttons */
    display: flex;
    flex-wrap: wrap;
  justify-content: center !important;
  margin-right: -88px;
    margin-left: -132px;
  }
  
  /* --- Individual Filter Buttons --- */
  .filter-options-scroll .filter-btn {
    margin: 0.5rem;
  }
  
  /* --- Collapsible Filter Options --- */
  .mobile-filter-options {
margin-top: -1376px !important;
    margin-bottom: 1368px;
    display: block !important;
  }

  .mobile-filter-bar .filter-btn {
    flex: 0 0 auto;
    border-radius: 20px;
    padding: 6px 12px;
    background: var(--surface-color);
    border: 1px solid var(--border-default);
    color: var(--text-body);
  }

  .mobile-filter-bar .filter-btn.active,
  .mobile-filter-bar .filter-btn:focus {
    background: var(--accent);
    color: var(--surface-color);
    border-color: var(--accent);
  }

   .mobile-filter-options .filter-content {
    background: var(--surface-color);
    border-bottom: 1px solid var(--border-light);
    padding: 10px 12px;
  }

  .mobile-filter-options ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mobile-filter-options ul li {
    padding: 6px 0;
    font-size: 14px;
    border-bottom: 1px dashed var(--background-color);
  }

  .mobile-filter-options ul li:last-child {
    border-bottom: none;
  }

  .mobile-filter-options .btn-outline-secondary {
    font-size: 13px;
    border-radius: 20px;
    padding: 5px 10px;
    margin: 4px;
  }

   .mobile-filter-options .btn-outline-secondary.active-price {
    background-color: var(--accent);
    color: var(--surface-color);
    border-color: var(--accent);
  }

    .mobile-filter-options .filter-content + .filter-content {
    margin-top: 4px;
  }

.mobile-filter-options .filter-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}

.mobile-filter-options .filter-content.show {
  max-height: 500px; 
}



  /* --- Product Grid Adjustments --- */
  .row.g-4 > [class*="col-md-3"] {
    flex: 0 0 33.3333% !important;
    max-width: 33.3333% !important;
  }
  
  /* --- Product Card Image Size --- */
  .product-card img {
    height: 250px;
    object-fit: contain;
  }
.mobile-category-bar {
    overflow-x: auto;
    margin-left: -11px;
  }

.section.py-5.light-background div.container.aos-init.aos-animate div.row div.col-lg-9 div.d-flex.justify-content-between.align-items-center.mb-4{
    margin-top: 88px;
  }

#electronics.section.py-5.light-background div.container-fluid.aos-init.aos-animate div.row div.col-lg-9{
    margin-left: 0px;
    flex: 0 0 auto;
  width: 124%;
  /* margin-top: -1401px; */
  }
.header-location {
  padding: 0;
}

    .filter-sidebar {
    display: none !important;
  }

  .buy-box{
    margin-left: 0;
  width: auto !important;
  }

}



/* for image gallery and main image with bullets scrollable  */
@media (max-width: 1024px) {

  /* remove desktop side offsets that push image left */
  .col-md-5.d-flex.align-items-start,
  .sticky-gallery-wrapper,
  .main-image-container {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
  }

  /* hide vertical gallery and zoom/magnifier on tablet */
  .vertical-gallery-wrapper,
  #zoomResult,
  #magnifierLens {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* ensure sticky behavior is removed so gallery doesn't stick to top */
  .sticky-gallery-wrapper {
    position: relative !important;
    top: auto !important;
    align-items: center !important;
    justify-content: center !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* main image sizing */
  .main-image-container {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;                
  margin: 0 auto !important;
  box-sizing: border-box;
  display: flex !important;
  align-items: flex-start !important;    
  justify-content: center !important;
  background: var(--surface-color) !important;           
  min-height: auto !important;           
  height: 0 !important;
  }

  /* product image */
  #productImage,
  .main-image {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 400px !important;          
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  padding: 0 !important;                 
  background-color: transparent !important;

  }

  /* bullets: visible on tablet */
 .image-bullets {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px !important; 
    position: relative; 
    z-index: 2; 
  }

  .image-bullets .bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-default);
    transition: transform .18s ease, background .18s ease;
    cursor: pointer;
  }
  .image-bullets .bullet.active {
    background: var(--link-alt);
    transform: scale(1.25);
  }

  /* buy box moves below content */
  .buy-box {
    position: relative !important;
    top: auto !important;
    margin: 1rem auto 0 !important;
    width: 100% !important;
    max-width: 420px !important;
  }

  /* product info becomes full width */
  .product-info-section {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px !important;
    margin: 0.75rem 0 0 !important;
  }

  #product-detail {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

  .filter-sidebar {
    display: none !important;
  }

    /* Filter buttons inside scroll bar */
  .mobile-filter-bar .filter-btn {
    flex: 0 0 auto;
    margin-right: 6px;
    border-radius: 20px;
    padding: 6px 12px;
    background: var(--surface-color);
    border: 1px solid var(--border-default);
    color: var(--text-body);
  }

    .col-lg-9 {
    width: 100% !important;
    margin: 15px 0  !important;
  }
}
@media (max-width: 767px) {
  /* stack columns */
  .row.g-4 {
    flex-direction: column !important;
    gap: 1rem;
  }

  /* collapse vertical gallery and zoom (mobile should not show left thumbnails) */
  .vertical-gallery-wrapper,
  #zoomResult,
  #magnifierLens {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* make sticky wrapper flow naturally and center content */
  .sticky-gallery-wrapper {
    position: relative !important;
    top: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  /* main image container: full width, smaller height */
  .main-image-container {
  width: 100% !important;
  max-width: 100% !important;
  padding: 41px 0 12px !important;
  margin: 0 auto !important;
  box-sizing: border-box;
  display: flex !important;
  align-items: flex-start !important;    
  justify-content: center !important;
  background: var(--surface-color) !important;
  min-height: auto !important;
  z-index: 1 !important;
  height: 0 !important;
  }

  #productImage,
  .main-image {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 400px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background-color: transparent !important;

  }

  /* image bullets: prominent, centered underneath the image */
 .image-bullets {
    display: flex;
    justify-content: center;
    gap: 8px;
   margin-top: 401px !important;
    position: relative; 
    z-index: 2; 
  }

  .image-bullets .bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-default);
    transition: transform .18s ease, background .18s ease;
    cursor: pointer;
  }
  .image-bullets .bullet.active {
    background: var(--link-alt);
    transform: scale(1.25);
  }

  /* hide gallery scroll buttons (desktop artifact) */
  .scroll-btn {
    display: none !important;
  }

  /* make product-info and buy-box full width stacked */
  .product-info-section {
    width: 100% !important;
    padding: 0 12px !important;
    margin-top: .75rem !important;
  }

  .buy-box {
    position: relative !important;
    top: auto !important;
    margin: 12px auto !important;
    width: 100% !important;
    max-width: 351px !important;
    border-radius: 8px !important;
  }

  /* reduce paddings for small screens */
  .product-container {
    padding: 12px 8px !important;
  }

  /* ensure related cards are smaller for mobile horizontal scroll */
  .related-card {
    min-width: 140px !important;
    max-width: 140px !important;
    margin-left: 21px;
  }

  /* small typography adjustments */
    .product-container div.row.g-4 div.col-md-5 h3#productName.fw-semibold.mb-1 { font-size: 1.1rem !important; line-height: 1.3; }
  #productPrice { font-size: 1.25rem; }

  /* last-resort fixes if any parent alignment pushes image left */
  .col-md-5.d-flex.align-items-start {
    justify-content: center !important;
    align-items: center !important;
  }

  .section-title, 
.category-header, 
.mobile-category-bar.bg-white.shadow-sm.py-2 {
  position: relative !important;
  z-index: 12 !important;
}




}

/* for the middle section of information  */

/* ---------- TABLET VIEW ---------- */
@media (max-width: 992px) {

  /* Ensure wrappers stay compact */
  .offers-container-wrapper,
  .features-container-wrapper {
    position: relative;
    overflow: hidden;
    padding: 0 24px;
    margin-bottom: 8px;
  }

  /* Horizontal scroll area */
  .offers-container,
  .features-container {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    justify-content: flex-start;
    scrollbar-width: none;
    margin-left: -21px;
  }

  .offers-container::-webkit-scrollbar,
  .features-container::-webkit-scrollbar {
    display: none;
  }

  /* Overlay buttons */
  .offers-scroll-btn,
  .features-scroll-btn {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    width: 26px;
    height: 42px;
    background: var(--background-color);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    z-index: 10;
    cursor: pointer;
  }
  .offers-scroll-btn:hover,
  .features-scroll-btn:hover {
    background: var(--background-color);
  }

  .offers-scroll-btn.prev-btn,
  .features-scroll-btn.prev-btn {
    left: 4%;
  }

  .offers-scroll-btn.next-btn,
  .features-scroll-btn.next-btn {
    right: 3%;
    top: 55%;
  }

  /* Compact card and feature sizes */
  .offer-card {
    flex: 0 0 auto;
    
    max-width: 150px;
    min-width: 220px;
    background: var(--surface-color);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    padding: 10px 12px;
    box-shadow: var(--shadow-sm);

  }

    .offer-card h6 {
    font-size: 13px;
    font-weight: 600;
  }

    .offer-card p {
    font-size: 12px;
    line-height: 1.3;
  }

    .offer-card a {
    font-size: 11.5px;
  }


  .feature-item {
    flex: 0 0 auto;
    min-width: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--text-body);
    font-size: 13px;
    font-weight: 500;
    background: var(--surface-color);
    border-radius: 8px;
padding: 10px 9px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-right: 5px;

  }

  .feature-item img {
    width: 28px;
    height: 28px;
  }

  .product-info-section {
    padding: 14px 16px;
  }

    html, body {
    overflow-x: hidden !important;
  }

}

/* ---------- MOBILE VIEW ---------- */
@media (max-width: 600px) {

  .offers-container-wrapper,
  .features-container-wrapper {
    position: relative;
    overflow: hidden;
    padding: 0 22px;
    margin-bottom: 6px;
  }

  .offers-scroll-btn,
  .features-scroll-btn {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    width: 22px;
    height: 36px;
    font-size: 14px;
    background: var(--background-color);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
  }

    .offers-scroll-btn.prev-btn,
  .features-scroll-btn.prev-btn {
    left: 3%;
  }

  .offers-scroll-btn.next-btn,
  .features-scroll-btn.next-btn {
    right: 3%;
  }

  .offer-card {
    flex: 0 0 auto;
    min-width: 140px;
    max-width: 151px;
    padding: 6px 8px;
    border-radius: 8px;
  }

    .offer-card h6 {
    font-size: 12px;
  }

    .offer-card p {
    font-size: 11px;
  }

    .offer-card a {
    font-size: 10.5px;
  }

  .feature-item {
    min-width: 68px;
    font-size: 10.5px;
  }

  .feature-item img {
    width: 24px;
    height: 24px;
  }

  .product-info-section {
    padding: 10px 12px;
    margin: 0 auto;
  }

  html body.index-page main.main div.container.mb-5 div#product-detail.product-container div.row.g-4 div.col-md-5 {
  margin-left: 281px;
}

  /* Prevent header and body from stretching */
  html, body {
    overflow-x: hidden;
  }
}

/* ---------- TABLET VIEW (max-width: 992px) ---------- */
@media (max-width: 1024px) {

  .col-md-2 {
    width: 100% !important;
    max-width: 100%;
    margin-top: 10px;
  }

  .buy-box {
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 14px 41px;
    background: var(--surface-color);
    box-shadow: var(--shadow-sm);
    text-align: center;
  }

  .buy-box .buy-btn {
    width: 90%;
    margin: 6px auto;
    font-size: 15px;
    padding: 10px;
  }

  .buy-box p {
    font-size: 13.5px;
  }

  #notifyBtn {
    font-size: 13px;
  }

    html body.index-page main.main section#productInfoSection.product-info-section.mb-5 div.bg-white.rounded.shadow-sm.p-4 div.row div.col-md-4 h5.fw-semibold.mb-3{
    margin-top: 11px;
  }

    html body.index-page main.main section#productInfoSection.product-info-section.mb-5 div.bg-white.rounded.shadow-sm.p-4 div.row div.col-md-4 table#additionalInfo.table.table-bordered.additional-info-table.mb-0 tr td {
  font-size: 16px;
}
}

/* ---------- MOBILE VIEW (max-width: 600px) ---------- */
@media (max-width: 600px) {

  .col-md-2 {
    width: 100% !important;
    max-width: 100%;
    margin-top: 8px;
  }

  .buy-box {
    width: 100%;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 14px 41px;
    background: var(--surface-color);
    text-align: center;
    box-shadow: var(--shadow-sm);
  }

  .buy-box .buy-btn {
    width: 100%;
    margin: 5px 0;
    font-size: 14px;
    padding: 8px;
    border-radius: 8px;
  }

  .buy-box p {
    font-size: 12.5px;
    margin-bottom: 4px;
  }

  #notifyBtn {
    width: 100%;
    font-size: 12.5px;
  }

  /* for the spec table  */

  html body.index-page main.main section#productInfoSection.product-info-section.mb-5 div.bg-white.rounded.shadow-sm.p-4 div.row div.col-md-4 h5.fw-semibold.mb-3{
    margin-top: 11px;
  }

  html body.index-page main.main section#productInfoSection.product-info-section.mb-5 div.bg-white.rounded.shadow-sm.p-4 div.row div.col-md-4 table#additionalInfo.table.table-bordered.additional-info-table.mb-0 tr td {
  font-size: 14px;
}
}

/* ---------- TABLET VIEW (max-width: 992px) ---------- */
@media (max-width: 992px) {

  .related-products-wrapper {
    overflow: visible !important;
  }

  #relatedProductsContainer {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px !important;
    overflow: visible;
    padding-bottom: 0;
    margin-left: -8px;


  }

  #relatedProductsContainer .product-card {
    flex: 1 1 calc(50% - 10px);
    min-width: unset !important;
    width: 100%;
  }

  /* Adjust spacing */
  .related-products-wrapper .d-flex {
    flex-wrap: wrap;
  }
}

/* ---------- MOBILE VIEW (max-width: 600px) ---------- */
@media (max-width: 600px) {

  .related-products-wrapper {
    overflow: visible !important;
    padding: 0 15px;
  }

  #relatedProductsContainer {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px !important;
    overflow: visible;
    padding-bottom: 0;
    margin-left: -8px;
  }

  #relatedProductsContainer .product-card {
    width: 100%;
    min-width: unset !important;
    margin: 0;
  }

  /* Title + “View All” spacing */
  section.container.mb-5 .d-flex.justify-content-between.align-items-center.mb-3 {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  section.container.mb-5 h4.fw-semibold.mb-0 {
    font-size: 1.1rem;
  }
}

/* for tablet ipad view conflicts  */
@media (min-width: 768px) and (max-width: 1024px) {

  /* Reset wrong margin offset */
  html body.index-page main.main div.container.mb-5 div#product-detail.product-container div.row.g-4 div.col-md-5 {
    margin-right: 350px;
    margin-left: 596px;
  }

  /* Center the image and info properly */
  .sticky-gallery-wrapper,
  .main-image-container,
  .product-info-section {
    margin: 0 auto !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin-top: 14px !important;
  }

  /* Restore proper height to prevent collapse */
  .main-image-container {
    height: auto !important;
    min-height: 360px !important;
    padding: 20px 0 !important;
  }

  /* Resize product image nicely for iPad */
  #productImage,
  .main-image {
    max-width: 80% !important;
    height: auto !important;
    max-height: 450px !important;
  }

  .mobile-category-bar.bg-white.shadow-sm.py-2 {
    position: relative !important;
    z-index: 12 !important;
  }

  /* Info section spacing */
  .product-info-section {
    padding: 0 32px !important;
    text-align: left !important;
  }

  /* Offer and feature containers re-balance */
  .offers-container,
  .features-container {
    padding-left: 8px !important;
  }

  /* Buy box centered but compact */
  .buy-box {
    margin: 16px auto !important;
    max-width: 526px !important;
  }

  /* Related products fit 2x2 grid cleanly */
  #relatedProductsContainer {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    justify-items: center;
  }

  #relatedProductsContainer .product-card {
    width: 100%;
    max-width: 260px;
  }

  /* for the related products  */

    .related-products-wrapper {
    overflow: visible !important;
    padding: 0 10px !important;
    width: 100%;
  }

  #relatedProductsContainer {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px !important;              
    justify-items: center;
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
  }

#relatedProductsContainer.d-flex.overflow-auto.gap-3.pb-2 div.card.related-card {
    width: 95% !important;             
    max-width: 360px;                  
    background: var(--surface-color);
    border-radius: 12px;
    padding: 16px !important;       
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease-in-out;
  }

#relatedProductsContainer.d-flex.overflow-auto.gap-3.pb-2 div.card.related-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
  }

#relatedProductsContainer.d-flex.overflow-auto.gap-3.pb-2 div.card.related-card.border-0.shadow-sm img.card-img-top.rounded-top {
    width: 100%;
    max-height: 200px;
    object-fit: contain;
    border-radius: 8px;
    margin-bottom: 10px;
  }

#relatedProductsContainer.d-flex.overflow-auto.gap-3.pb-2 div.card.related-card.border-0.shadow-sm div.card-body.p-2 p.small.mb-1.text-truncate.fw-semibold {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 4px;
    text-align: center;
  }

#relatedProductsContainer.d-flex.overflow-auto.gap-3.pb-2 div.card.related-card.border-0.shadow-sm div.card-body.p-2 p.text-primary.fw-bold.mb-0.small {
    font-size: 0.9rem;
    color: var(--text-muted);
    text-align: center;

  }

    /* Center align section title area for tablets */
  .container.mb-5 > .d-flex {
    justify-content: center !important;
    flex-direction: column !important;
    text-align: center;
    gap: 4px;
  }

  .container.mb-5 > .d-flex a {
    font-size: 0.9rem;
  }

  /* Allow text wrapping under icons */
.feature-item span {
  display: block;            
  white-space: normal !important; 
  text-align: center;
  line-height: 1.3;
  word-break: break-word;  
  max-width: 100px;          
  margin-top: 4px;
}

  /* Prevent header and body from stretching */
  html, body {
    overflow-x: hidden;
  }

  /* for the ipad pro  */

    .col-md-2 {
    width: 100% !important;
    max-width: 100%;
    margin-top: 10px;
  }

  .product-info-section {
  width: 1000px !important;
  }




}

@media (min-width: 1024px) and (max-width: 1366px){
  body {
    overflow-x: visible;
  }
}

@media (max-width: 1024px) {
  #productInfoSection .row {
    flex-direction: column !important;
    align-items: center !important;
  }

  #productInfoSection .col-md-8,
  #productInfoSection .col-md-4 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 14px !important;
  }

  /* Center section titles */
  #productInfoSection h4,
  #productInfoSection h5 {
    text-align: center !important;
  }

  /* Spacing between the two tables */
  #productInfoSection .col-md-8 {
    margin-bottom: 22px !important;
  }

  /* Tables responsive without horizontal scroll */
  #productSpecs,
  #additionalInfo {
    width: 100% !important;
    table-layout: fixed;        
    word-wrap: break-word;      
    white-space: normal !important; 
    font-size: 14px !important;
  }

  /* Table styling */
  #productInfoSection .table {
    border-collapse: collapse !important;
  }

  #productInfoSection .table th,
  #productInfoSection .table td {
    padding: 10px 12px !important;
    vertical-align: middle;
    text-align: left;
    word-break: break-word;     
  }

  /* Container box */
  #productInfoSection .bg-white {
    padding: 18px 12px !important;
    border-radius: 10px !important;
  }

  /* Soft shadow for clean mobile look */
  #productInfoSection .shadow-sm {
    box-shadow: var(--shadow-sm) !important;
  }
}

/* ---------- Mobile (under 600px) ---------- */
@media (max-width: 600px) {
  #productInfoSection h4 {
    font-size: 1.2rem !important;
  }

  #productInfoSection h5 {
    font-size: 1rem !important;
  }

  #productSpecs,
  #additionalInfo {
    font-size: 13px !important;
  }

  #productInfoSection .table th,
  #productInfoSection .table td {
    padding: 8px 10px !important;
  }
}


/* for very small like galaxy s9+ */

@media (max-width: 360px) {
  
    html body.index-page main.main div.container.mb-5 div#product-detail.product-container div.row.g-4 div.col-md-5 {
    margin-left: 324px;
  }

    .offers-scroll-btn.next-btn, .features-scroll-btn.next-btn {
    right: 28px;
    top: 56%;
  }

    #productImage, .main-image {
      width: 311px !important;
    }

    .color-option {
      width: 68px;
    }

    .color-price {
  font-size: 11px;
    }

    .color-oldprice {
      font-size: 11px;
    }

    .quick-specs {
      max-width: 295px;
    }

    #productDescription li {
      margin-right: 63px;
    }

      .col-md-2 {
    width: 29% !important;
    margin-left: 350px;
  }

    #relatedProductsContainer {
      gap: 1px !important;
    margin-left: -23px;
    }

      .color-options-section {
    margin-left: -7px;
  }

    .buy-box {
    position: relative !important;
    top: auto !important;
    margin: 12px auto !important;
    width: 100% !important;
    max-width: 300px !important;
    border-radius: 8px !important;
  }

      .image-bullets {
        display: flex
;
        justify-content: center;
        gap: 8px;
        margin-top: 320px !important;
        position: relative;
        z-index: 2;
    }

#productDescription.text-secondary.mb-3 ul{
      padding-left: 4px !important;
    }

    html body.index-page main.main div.container.mb-5 div#product-detail.product-container div.row.g-4 div.col-md-5 div.product-info-section p#productDescription.text-secondary.mb-3 ul{
      margin-left: 4px;
    }

    
}

/* for the index page services card gap issue  */

/* ===== Tablet View (≤992px) ===== */
@media (max-width: 992px) {
  .service-item {
    margin-bottom: 30px;
    padding: 25px 20px;
  }

  .services .row {
    row-gap: 30px;
  }

  .service-item h3 {
    font-size: 1.2rem;
  }

  .service-item p {
    font-size: 0.95rem;
  }
}

/* ===== Mobile View (≤768px) ===== */
@media (max-width: 768px) {
  .col-md-6, .col-lg-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .service-item {
    margin-bottom: 25px;
    padding: 20px 18px;
  }

  .service-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
  }

  .service-item h3 {
    font-size: 1.1rem;
  }

  .service-item p {
    font-size: 0.9rem;
  }
}

/* ===== Small Mobile (≤480px) ===== */
@media (max-width: 480px) {
  .service-item {
    padding: 18px 15px;
    margin-bottom: 20px;
  }

  .service-item h3 {
    font-size: 1rem;
  }

  .service-item p {
    font-size: 0.85rem;
  }
}

/* ===== Fix AOS visibility issues on Mobile & Tablet ===== */

/* Tablet and below (≤992px) */
@media screen and (max-width: 992px) {
  html:not(.no-js) [data-aos^="fade"].aos-animate,
  html:not(.no-js) [data-aos^="zoom"].aos-animate,
  html:not(.no-js) [data-aos^="slide"].aos-animate {
    opacity: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
    transition: none !important;
  }

  /* Optional: ensure elements that haven't animated yet are still visible */
  [data-aos] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}

/* Small mobile (≤576px) */
@media screen and (max-width: 576px) {
  html:not(.no-js) [data-aos^="fade"].aos-animate,
  html:not(.no-js) [data-aos^="zoom"].aos-animate,
  html:not(.no-js) [data-aos^="slide"].aos-animate {
    opacity: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
  }
}

/* for the buy box responsive  */

/* Mobile View (up to 768px) */
@media (max-width: 768px) {
  .buy-box {
    max-width: 100%;
    width: 100%;
    padding: 1rem !important;
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
  }

  .buy-box p,
  .buy-box label,
  .buy-box strong {
    font-size: 0.9rem !important;
    line-height: 1.3;
  }

  .buy-box .btn {
    width: 100%;
    font-size: 0.95rem;
    padding: 0.6rem 0;
    border-radius: 8px;
  }

    /* .buy-box .btn-warning {
      background-color: var(--btn-primary-bg);
      border: none;
    } */

  /* .buy-box .btn-orange {
    background-color: var(--btn-primary-bg);
    color: var(--surface-color);
    border: none;
  } */
}

/*  Very Small Devices (up to 350px) */
@media (max-width: 360px) {
  .buy-box {
    width: 100%;
    max-width: 100%;
    padding: 0.75rem !important;
    margin: 0;
    border-radius: 8px;
    box-sizing: border-box;
  }

  .buy-box p,
  .buy-box label,
  .buy-box strong {
    font-size: 0.8rem !important;
    line-height: 1.2;
  }

  .buy-box .small {
    font-size: 0.7rem !important;
  }

  .buy-box .btn {
    width: 100%;
    font-size: 0.85rem;
    padding: 0.5rem 0;
    border-radius: 6px;
  }

  .buy-box .form-check-label {
    font-size: 0.75rem !important;
    display: block;
    margin-left: 0.3rem;
  }

  .buy-box .p-2 {
    padding: 0.5rem !important;
  }

  .buy-box .mb-3 {
    margin-bottom: 0.5rem !important;
  }
}

/*  Tablet View (up to 1024px) */
@media (max-width: 1024px) {


      html body.index-page main.main div.container.mb-5 div#product-detail.product-container div.row.g-4 div.col-md-3{
      width: 100%;
      max-width: 100% !important;
    }
}

/* for the buy box in ipad voiew  */

/* for the ipad pro 12  */

@media (min-width: 1024px) and (max-width: 1399px) {
  html body.index-page main.main div.container.mb-5 div#product-detail.product-container div.row.g-4 div.col-md-5 {
    margin-right: 0px;
    margin-left: 0px !important;
  }

  .col-md-5 {
  width: 98.667% !important;
}


  .row.g-4 > [class*="col-md-3"] {
flex: 0 0 50% !important;
    max-width: 62% !important;
  }

    .buy-box {
    width: auto !important;
    margin: 0;
  }

    html body.index-page main.main div.container.mb-5 div#product-detail.product-container div.row.g-4 div.col-md-3 {
    width: 71%;
  }

  .gap-4 {
gap: 0 !important;
}

.product-info-section {

    width: auto;
    margin-left: 0;
  }


  
}

@media (max-width: 320px) {
  .offers-scroll-btn.next-btn, .features-scroll-btn.next-btn {
    right: 50px;
    top: 56%;
  }

    .offer-card {
    max-width: 145px;

  }

  .has-submenu > .submenu{
        margin-left: 223px;
  }
}

@media (min-width: 768px) {
  .header-search form {
    width: 100%;
  }
}

/* Desktop */
@media (min-width: 992px) {
  .search-form {
    width: 100%;
  }
}

/* Mobile */
@media (max-width: 991px) {
  .search-form {
    width: 100%;
  }
}

@media (min-width: 1025px) and (max-width: 1402px) {
    .search-dropdown {
    width: 45px;
  }
  .header .logo img {
  max-height: 32px;
  }

      .search-input {
    width: 0 !important;
  }

    .gap-4 {
gap: 0 !important;
}


}


@media (min-width: 1403px) and (max-width: 1426px) {
      .search-input {
    width: 0 !important;
  }

    .gap-4 {
gap: 0 !important;
}
}

/* for the tablet view  */

@media (min-width: 768px) and (max-width: 991.98px) {

  .header-top .row {
    flex-wrap: nowrap;
  }

  /* Prevent columns from forcing new lines */
  .header-top .row > [class*="col"] {
    flex: 0 0 auto;
    width: auto;
  }
    .header .logo img {
    width: 100px;
    }
      .header-location .update-location, .header-location .location-text, .header-option .language-text, .option-line-1, .option-line-2, small, strong, .cart-icon-container .cart-text {
    font-size: 12px;
      }
       .search-dropdown {
    width: 39px;
       }
       .search-input {
      padding: 0; 
      }

}

/* for the cart page  */

@media (max-width: 1024px) {

  /* Left column full width */
  .cart-left {
    width: 100%;
  }
}

@media (max-width: 768px) {
  /* Image smaller */

  /* Info takes full width */
  .cart-info {
    width: 100%;
    flex: inherit;
  }

  /* Quantity + actions wrap */
  .controls {
    flex-wrap: wrap;
  }

      .mobile-filter-bar {
      margin-top: -50px;
    }
}


@media (max-width: 480px) {

  /* Quantity control smaller */
  .qty-control {
    padding: 4px 8px;
  }

  .qty-control button {
    font-size: 14px;
  }
  
    .cart-item .img {
    width: 70px;
    height: 80px;
  }
    .product-title {
  font-size: 20px;
    }
    .stock-status {
    font-size: 18px;
    }

    .delivery-info {
      font-size: 15px;
    }

    /* shopping cart  */

    /* Kill desktop column layout completely */
  .cart-item {
    display: block !important;
    padding: 12px;
  }
  .item-price {
    width: 100% !important;


    margin-top: 6px;

    text-align: left !important;
  }

  .cart-head {
    display: none;
  }

  

}

 @media (min-width: 992px) and (max-width: 1124px) {
    .filter-options-scroll {
      width: auto;
    }
.row aside.col-lg-3.mb-4{
  margin-bottom: 0 !important;
}
 }

 @media (min-width: 1867px) and (max-width: 1896px) {
  .filter-sidebar.p-4.rounded.shadow-sm.bg-white{
    margin-left: -285px;
  }
 }

 /* for product detail page  */

  @media (min-width: 601px) and (max-width: 767px) {
    .col-md-5 {
  width: auto !important;
}

html body.index-page main.main div.container.mb-5 div#product-detail.product-container div.row.g-4 div.col-md-5{
  margin-left: 0;
}

/* .product-info-section {
  width: 510px !important;
} */
  }

  /* 1. From 1400px to 1865px: Show 2 in one row, Buy Box below in middle */
@media (min-width: 1400px) and (max-width: 1865px) {
  .custom-image-col {
    flex: 0 0 auto;
    width: 50%; /* Half width */
  }
  .custom-info-col {
    flex: 0 0 auto;
    width: 50%; /* Half width */
  }
  .custom-buy-col {
    flex: 0 0 auto;
    width: 50%; /* Shows below, 50% width */
    margin: 0 auto; /* Centers it */
  }
}

/* 2. After 1866px: Show all 3 in one row */
@media (min-width: 1866px) {
  .custom-image-col {
    flex: 0 0 auto;
    width: 41.666%; /* Equivalent to col-lg-5 */
  }
  .custom-info-col {
    flex: 0 0 auto;
    width: 33.333%; /* Equivalent to col-lg-4 */
  }
  .custom-buy-col {
    flex: 0 0 auto;
    width: 25%;      /* Equivalent to col-lg-3 */
  }
}