/* ==========================================================
   MOBILE-ONLY UI OVERRIDES
   STABLE BASELINE — NO DESKTOP REGRESSIONS
   ========================================================== */

/* ==========================================================
   HARD GUARANTEE: DESKTOP IS UNTOUCHED
   ========================================================== */
@media (min-width: 992px) {
  /* intentionally empty */
}

/* ==========================================================
   MOBILE HEADER — BEHAVIOR ONLY
   ========================================================== */
@media (max-width: 991px) {

  .wrapper-header {
    align-items: center;
  }

  .nav-icon,
  .logo-header {
    white-space: nowrap;
  }

  a[data-bs-toggle="offcanvas"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ==========================================================
   MOBILE HEADER — ICON VISIBILITY FIX
   ========================================================== */
@media (max-width: 991px) {

  #header a[data-bs-toggle="offcanvas"] svg,
  #header a[data-bs-toggle="offcanvas"] svg path {
    fill: #ffffff;
    color: #ffffff;
  }

  #header .nav-cart i,
  #header .nav-cart svg {
    color: #ffffff;
    fill: #ffffff;
  }

  #header .nav-icon a {
    color: #ffffff;
  }
}

/* ==========================================================
   MOBILE OFFCANVAS SAFETY
   ========================================================== */
@media (max-width: 991px) {
  .offcanvas,
  #mobileMenu {
    z-index: 2000;
  }
}

/* ==========================================================
   HOMEPAGE HERO — MOBILE POLISH (SAFE + STATIC)
   ========================================================== */
@media (max-width: 767px) {

  body.is-home .tf-slideshow {
    padding-bottom: 24px;
  }

  /* Let images scale naturally — no layout rewrite */
  body.is-home .tf-slideshow .swiper-slide img {
    width: 100%;
    height: auto;
    max-height: 55vh;
    object-fit: cover;
    display: block;
  }

  /* Keep hero card readable but not oversized */
  body.is-home .tf-slideshow .card-box {
    max-width: 92%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  /* Prevent excess gap after hero */
  body.is-home .tf-slideshow + section {
    margin-top: 0;
  }
}

/* ==========================================================
   BUTTONS — MOBILE ERGONOMICS
   ========================================================== */
@media (max-width: 767px) {
  .tf-btn {
    width: 100%;
    justify-content: center;
    font-size: 16px;
  }
}

/* ==========================================================
   SHOP / CART / CHECKOUT — MOBILE SPACING
   ========================================================== */
@media (max-width: 767px) {

  .tf-page-cart-wrap,
  .tf-main-product,
  .tf-shop-content {
    padding-left: 0;
    padding-right: 0;
  }

  table {
    font-size: 14px;
  }

  .tf-table-page-cart th,
  .tf-table-page-cart td {
    padding: 10px;
  }
}

/* ==========================================================
   FORMS — MOBILE READABILITY
   ========================================================== */
@media (max-width: 767px) {

  input,
  select,
  textarea {
    font-size: 16px;
  }

  label {
    display: block;
    margin-bottom: 6px;
  }
}

/* ==========================================================
   END MOBILE OVERRIDES — STABLE
   ========================================================== */

/* ==========================================================
   HOMEPAGE HERO — FORCE CENTER CTA (MOBILE, DEFINITIVE FIX)
   ========================================================== */
@media (max-width: 767px) {

  body.is-home .tf-slideshow .fade-item.fade-item-3 {
    margin-left: 0 !important;          /* override inline style */
    transform: none !important;         /* kill swiper animation */
    left: 50% !important;
    right: auto !important;
    position: relative !important;
    translate: -50% 0;                  /* modern, precise centering */
    display: flex !important;
    justify-content: center !important;
    width: auto !important;
  }

  body.is-home .tf-slideshow .fade-item.fade-item-3 > a.tf-btn {
    width: auto !important;
    min-width: 220px;
    justify-content: center;
  }
}
/* ==========================================================
   HOMEPAGE HERO — MAKE CARD SMALLER (MOBILE ONLY)
   ========================================================== */
@media (max-width: 767px) {

  /* shrink the whole card footprint */
  body.is-home .tf-slideshow .card-box {
    max-width: 88% !important;
    padding: 18px 16px !important;
    border-radius: 18px !important;
  }

  /* shrink the logo inside the card */
  body.is-home .tf-slideshow .card-box img {
    max-width: 210px !important;
    height: auto !important;
  }

  /* tighten vertical spacing inside the card */
  body.is-home .tf-slideshow .card-box .fade-item {
    margin-top: 10px !important;
  }

  /* make CTA a bit more compact without changing style */
  body.is-home .tf-slideshow .card-box .tf-btn {
    padding: 12px 16px !important;
    font-size: 16px !important;
    line-height: 1.1 !important;
  }
}
/* ==========================================================
   TAB SECTIONS — HARD VISIBILITY GUARDS
   Prevent desktop + mobile duplicates from ever coexisting
   ========================================================== */

/* Default: assume desktop */
.desktop-tabs {
  display: block;
}

.mobile-tabs {
  display: none;
}

/* Mobile override */
@media (max-width: 767px) {
  .desktop-tabs {
    display: none !important;
  }

  .mobile-tabs {
    display: block !important;
  }
}


/* ==========================================================
   MOBILE — SCROLL MODE (ABANDON TABS, KEEP VISUALS)
   ========================================================== */
@media (max-width: 767px) {

  /* Hide tab navigation only */
  .mobile-tabs .widget-tab-3 {
    display: none !important;
  }

  /* Force all tab panes to be visible and in flow */
  .mobile-tabs .tab-content {
    display: block;
  }

  .mobile-tabs .tab-pane {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    height: auto !important;
    margin-bottom: 64px;
  }

  /* Remove Bootstrap fade behavior */
  .mobile-tabs .tab-pane.fade {
    opacity: 1 !important;
  }
}

/* ==========================================================
   HOMEPAGE HERO — FORCE CENTER CTA (MOBILE, DEFINITIVE FIX)
   ========================================================== */
@media (max-width: 767px) {

  body.is-home .tf-slideshow .fade-item.fade-item-3 {
    margin-left: 0 !important;          /* override inline style */
    transform: none !important;         /* kill swiper animation */
    left: 50% !important;
    right: auto !important;
    position: relative !important;
    translate: -50% 0;                  /* modern, precise centering */
    display: flex !important;
    justify-content: center !important;
    width: auto !important;
  }

  body.is-home .tf-slideshow .fade-item.fade-item-3 > a.tf-btn {
    width: auto !important;
    min-width: 220px;
    justify-content: center;
  }
}
/* ==========================================================
   HOMEPAGE HERO — MAKE CARD SMALLER (MOBILE ONLY)
   ========================================================== */
@media (max-width: 767px) {

  /* shrink the whole card footprint */
  body.is-home .tf-slideshow .card-box {
    max-width: 88% !important;
    padding: 18px 16px !important;
    border-radius: 18px !important;
  }

  /* shrink the logo inside the card */
  body.is-home .tf-slideshow .card-box img {
    max-width: 210px !important;
    height: auto !important;
  }

  /* tighten vertical spacing inside the card */
  body.is-home .tf-slideshow .card-box .fade-item {
    margin-top: 10px !important;
  }

  /* make CTA a bit more compact without changing style */
  body.is-home .tf-slideshow .card-box .tf-btn {
    padding: 12px 16px !important;
    font-size: 16px !important;
    line-height: 1.1 !important;
  }
}

@media (max-width: 767px) {
  .swiper-slide {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box;
  }
}

/* ==========================================================
   MOBILE — PREVENT TAB PANEL HORIZONTAL CUTOFF
   ========================================================== */
@media (max-width: 767px) {
  .mobile-tabs {
    overflow-x: hidden;
  }

  .mobile-tabs .swiper,
  .mobile-tabs .swiper-wrapper,
  .mobile-tabs .swiper-slide {
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 767px) {
  body {
    overflow-x: hidden;
  }

  .swiper,
  .swiper-wrapper,
  .swiper-slide {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ==========================================================
   TAB 3 GALLERY — MOBILE ONLY (ISOLATED, NON-REGRESSIVE)
   ========================================================== */
@media (max-width: 767px) {

  /* Allow gallery to break out of container width */
 .gallery-swiper {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow-x: hidden;
}


  /* Convert gallery track into a 2-column grid */
  .gallery-swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    transform: none !important;
  }

  /* Neutralize Swiper slide sizing for grid */
  .gallery-swiper .swiper-slide {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Images fill grid cells cleanly */
  .gallery-swiper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }
}



/* ==========================================================
   FOOTER — MOBILE ONLY, TRUE 2-COLUMN LAYOUT
   ========================================================== */
@media (max-width: 767px) {

  /* 1️⃣ Turn the footer row into a 2-column grid */
  #footer .footer-body .row {
    display: grid !important;
    grid-template-columns: 1fr 2fr !important;
    column-gap: 20px;
    align-items: flex-start;
  }

  /* 2️⃣ LEFT COLUMN — LOGO ONLY */
  #footer .footer-infor {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }

  #footer .footer-logo {
    max-width: 120px;
    margin: 0;
  }

  /* 3️⃣ RIGHT COLUMN — CONTACT + HELP STACK */
  #footer .footer-col-block {
    grid-column: 2;
    margin-left: 0 !important; /* kill inline 150px / 50px */
  }

  /* Stack Contact + Help vertically */
  #footer .footer-col-block + .footer-col-block {
    margin-top: 24px;
  }

  /* 4️⃣ Clean mobile alignment */
  #footer .footer-heading,
  #footer ul,
  #footer p,
  #footer a {
    text-align: left;
  }

  #footer .tf-social-icon {
    justify-content: flex-start;
  }

  /* 5️⃣ Footer bottom remains centered */
  #footer .footer-bottom-wrap {
    justify-content: center !important;
    text-align: center;
  }
}


/* ==========================================================
   FOOTER — MID-RANGE DESKTOP STABILIZATION (900–1299px)
   ========================================================== */
@media (min-width: 900px) and (max-width: 1299px) {

  /* HARD RESET the footer layout */
  #footer .footer-body .row {
    display: grid !important;
    grid-template-columns: 520px 1fr 1fr !important;
    column-gap: 40px;
    align-items: start;
  }

  /* LOGO COLUMN — MAKE IT INTENTIONAL */
  #footer .footer-infor {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }

  #footer .footer-logo {
    min-width: 200px !important;
    width: 100%;
    
  }

  /* CONTACT + HELP — REAL COLUMNS */
  #footer .footer-col-block {
     white-space: nowrap;
    margin-left: 0 !important;
    max-width: none;
  }

  /* Typography alignment */
  #footer .footer-heading,
  #footer p,
  #footer ul,
  #footer a {
    text-align: left;
  }

  #footer .tf-social-icon {
    justify-content: flex-start;
  }
}

/* ==========================================================
   HEADER — FORCE 3-ZONE LAYOUT FOR <1200px (WINS CASCADE)
   ========================================================== */
@media (max-width: 1199px) {

  /* Kill hamburger everywhere < desktop */
  #header [data-bs-toggle="offcanvas"],
  #header .tf-lg-hidden {
    display: none !important;
  }

  /* Force nav visible */
  #header .tf-md-hidden,
  #header .box-navigation {
    display: block !important;
  }

  /* Make the header row a true flex container */
  #header .wrapper-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }

  /* CRITICAL: override the 3 bootstrap columns themselves */
  #header .wrapper-header > .col-xl-3,
  #header .wrapper-header > .col-xl-6,
  #header .wrapper-header > .col-md-4,
  #header .wrapper-header > .col-3,
  #header .wrapper-header > .col-6 {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Zone 1: Logo column (your DOM has col-xl-3 col-md-4 col-6) */
  #header .wrapper-header > div:nth-child(2) {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }

  #header .logo-header img {
    max-height: 44px !important;
    width: auto !important;
    display: block;
  }

  /* Zone 2: Nav column (your DOM has col-xl-6 tf-md-hidden) */
  #header .wrapper-header > div:nth-child(3) {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    display: flex !important;
    justify-content: center !important;
  }

  #header .box-navigation {
    width: 100%;
    display: flex !important;
    justify-content: center !important;
  }

  #header .box-nav-ul {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 22px !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
  }

  /* Hide "Home" (logo is home) */
  /* #header .box-nav-ul li:first-child {
    display: none !important;
  } */

  /* Zone 3: Cart column (your DOM has col-xl-3 col-md-4 col-3) */
  #header .wrapper-header > div:nth-child(4) {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }

  #header .nav-icon {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
    white-space: nowrap !important;
  }

  /* Prevent View Cart from dropping */
  #header .nav-icon .menu-item a {
    white-space: nowrap !important;
  }
}