/* Responsive Css */



@media only screen and (max-width: 1200px){

  .header-upper .search-area {
    margin: 0 15px !important;
  }
  .header-upper .right-column .language-picker {
    margin-right: 15px !important;
  }

  .main-menu,
  .sticky-header,
  .main-header.style-one .outer-container:before{
    display: none !important;
  }

  /* GL-010 / GL-016 — Mobile nav trigger.
     The hamburger (.mobile-nav-toggler) now opens the populated .category-menu
     drawer (same as the "All Categories" box). The info-list button is shown
     here; the .menu-area <div> toggler has been removed from the markup. */
  .mobile-nav-toggler,
  .menu-area .mobile-nav-toggler,
  .main-header .menu-right-content .info-list li .mobile-nav-toggler{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }

  .megamenu ul li:first-child{
    display: none;
  }

  /* GL-012 — On mobile the inline category dropdown is hidden; the "All
     Categories" box instead opens the off-canvas .category-menu (JS adds
     body.category-visible on .category-box click). Keep the box itself
     tappable. */
  .main-header .outer-box .category-box .category-list{
    display: none;
  }

  .main-header .outer-box .category-box{
    cursor: pointer;
  }

  /* The off-canvas category panel is positioned/animated below; it must not
     render as an inline block on the page. Override the bare display so it
     stays an off-canvas drawer. */
  .category-menu{
    display: block;
  }

  .shop-six .inner-container{
    padding: 0px !important;
  }

  .shop-six .advice-block-one{
    position: relative;
    width: 100%;
    border-radius: 10px;
    margin-bottom: 30px;
    overflow: hidden;
  }

  .shop-six .content-box {
    border: 1px solid #E7E9F0 !important;
    border-radius: 10px !important;
  }



}



@media only screen and (min-width: 768px){
  .main-menu .navigation > li > ul,
  .main-menu .navigation > li > ul > li > ul,
  .main-menu .navigation > li > .megamenu{
    display:block !important;
    visibility:hidden;
    opacity:0;
  }
}



@media only screen and (max-width: 991px){

  .header-upper {
    padding: 15px 0px !important;
  }
  .header-upper .upper-inner {
    flex-wrap: wrap !important;
    gap: 15px !important;
  }
  .header-upper .logo-box {
    order: 1 !important;
  }
  .header-upper .right-column {
    order: 2 !important;
    margin-left: auto !important;
  }
  .header-upper .search-area {
    order: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 0 0 !important;
    flex: 0 0 100% !important;
  }
  .header-upper .support-box {
    display: none !important;
  }

  .shop-six .shop-block-two{
    width: 33.333%;
  }

  .shop-six .shop-block-two .inner-box{
    border: none;
  }


}


/* GL-067 — Footer columns are 3+2+2+2+3 (=12) at lg but Bootstrap's col-md-6
   drops to 2-per-row in the md (tablet) range, leaving a lone 5th column =
   ragged. Normalise to 3-per-row (3+2) on tablet so rows balance. Markup is
   untouched; this only overrides the Bootstrap width in the md range. */
@media only screen and (min-width: 768px) and (max-width: 991px){
  .footer-column{
    -ms-flex: 0 0 33.333%;
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
}


@media only screen and (max-width: 767px){

  /* logo-sizing: smaller cap on phones so the logo never dominates the header */
  .header-upper .logo-box img {
    max-height: 44px !important;
    max-width: 180px !important;
  }

  .header-upper .search-area .category-inner {
    display: none !important;
  }
  .header-upper .search-area .search-box .form-group input[type='search'] {
    padding-left: 20px !important;
  }

  .shop-tab-btn{
    display: block;
  }

  .sec-title{
    display: block;
  }

  .sec-title a{
    margin-top: 10px;
  }

  .shop-six .shop-block-two{
    width: 50%;
  }


}

@media only screen and (max-width: 599px){

  .pagination li a{
    width: 40px;
    height: 40px;
    line-height: 40px;
  }

  .shop-six .shop-block-two{
    width: 100%;
    border-bottom: 1px solid #E7E9F0;
  }

  .shop-six .shop-block-two:last-child{
    border-bottom: none;
  }


}


@media only screen and (max-width: 499px){

  .mobile-menu,
  .category-menu{
    width: 100%;
  }

  .header-upper .right-column {
    gap: 8px !important;
  }
  .header-upper .right-column .language-picker {
    margin-right: 8px !important;
  }

}

@media only screen and (min-width: 1200px) and (max-width: 1400px) {
  .main-menu .navigation > li {
    margin: 0px 10px !important;
  }
  .main-menu .navigation > li > a {
    font-size: 14px !important;
  }
}

/* ── Safe-area insets for notched phones (iPhone X+, Dynamic Island) ── */
@supports (padding: env(safe-area-inset-bottom)) {
  .main-footer{
    padding-bottom: calc(env(safe-area-inset-bottom) + 0px);
  }
}

/* ── General mobile polish ── */
@media only screen and (max-width: 767px){

  /* Section headings — reduce from desktop 36–42px down to readable mobile size */
  .sec-title h2,
  .sec-title h3{
    font-size: 26px !important;
    line-height: 34px !important;
  }

  /* Section spacing — reduce excessive top/bottom padding on small screens */
  .pt_80{ padding-top: 50px !important; }
  .pb_80{ padding-bottom: 50px !important; }
  .pt_70{ padding-top: 40px !important; }
  .pb_70{ padding-bottom: 40px !important; }
  .pt_60{ padding-top: 35px !important; }
  .pb_60{ padding-bottom: 35px !important; }

  /* Ensure all buttons have adequate tap target height */
  .theme-btn{
    min-height: 44px;
  }

  /* Product cards: ensure images scale properly */
  .shop-block-one .inner-box .image-box img,
  .shop-block-two .inner-box .image-box img{
    width: 100%;
    height: auto;
  }

  /* Page titles: tighter on mobile */
  .page-title{
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
}

@media only screen and (max-width: 499px){

  /* Section headings — even smaller on tiny phones */
  .sec-title h2,
  .sec-title h3{
    font-size: 22px !important;
    line-height: 30px !important;
  }

  /* Utility spacing — reduce further on tiny phones */
  .pt_80{ padding-top: 40px !important; }
  .pb_80{ padding-bottom: 40px !important; }

  /* Breadcrumb font size */
  .bread-crumb li,
  .bread-crumb li a{
    font-size: 13px;
  }
}