/* ==========================================================
   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;
  }
}

/* ==========================================================
   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;
  }
}


/* ==========================================================
   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 {
    
  } */

  /* 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;
  }
}



@media (max-width: 991px) {
  .full-cart {
    display: none !important;
  }
}