/* --- STRICT HEADER SEPARATION --- */

/* Desktop Only Header (min-width: 992px) */
@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }

  .d-lg-block {
    display: block !important;
  }

  /* Ensure Header Elements layout correctly */
  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

/* Mobile Only Header (max-width: 991px) */
@media (max-width: 991px) {
  .d-lg-block {
    display: none !important;
  }

  .d-lg-none {
    display: block !important;
  }

  /* Reset Header for Mobile */
  .header-inner {
    flex-direction: column;
    padding: 10px 0;
  }
}

/* Better mobile container padding */
@media (max-width: 768px) {
  .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .row {
    margin-left: -10px;
    margin-right: -10px;
  }

  .col,
  [class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Ensure images don't overflow */
img {
  max-width: 100%;
  height: auto;
}

/* Premium Typography Overrides */
body {
  letter-spacing: -0.01em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: -0.03em;
}

/* Checkout Page Tweaks */
.checkout-summary {
  position: sticky;
  top: 100px;
}

/* --- Mobile Fixes (User Request) --- */
@media (max-width: 991px) {

  /* Fix Product Tabs Clickability */
  .product-tabs-nav {
    position: relative;
    z-index: 50;
    /* Ensure above other elements */
    justify-content: flex-start !important;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 5px;
  }

  .product-tabs-nav .nav-link {
    white-space: nowrap;
  }

  /* Fix Filter Sidebar Text Alignment */
  .offcanvas-body .nav-link {
    text-align: left !important;
    justify-content: flex-start !important;
  }

  .offcanvas-body .nav-link span {
    text-align: left;
  }
}

/* --- Laptop & 125-150% Scaling Fixes (NUCLEAR OPTION) --- */
/* Target screens that are desktop/laptop (logical width < 1750px) */
/* Expanded range to catch high-res 1440p/2k laptops */
@media (min-width: 992px) and (max-width: 1750px) {
  body {
    /* 
       User requests site to look like 100% even on 150% scaled screens.
       Math: 1.0 / 1.5 = 0.66. 
       We use 0.75 (75%) as a safe aggressive balance. 
    */
    zoom: 0.75 !important;

    /* Ensure background covers the whole zoomed-out area */
    min-height: 100vh;
    width: 100%;
  }

  /* Reset the html font size modification from previous attempt to avoid double-shrink */
  html {
    font-size: 16px !important;
  }

  /* Specific Fix for Product Page Image being too tall */
  .main-image-wrapper {
    max-height: 450px !important;
    width: auto !important;
    margin: 0 auto !important;
  }

  .main-image-wrapper img {
    max-height: 400px !important;
    width: auto !important;
  }
}