/* --- Theme polish (clean medical style) --- */
        /* Apply Trebuchet MS to entire page */
/* REMOVE leftover space from deleted topbar */




body {
    font-family: "Trebuchet MS", "Segoe UI", Roboto, Arial, sans-serif;
    background-color: #fff;
    color: #222;
}


      .bg-off-white {
          background-color: #f8f9fa !important;
      }


      /* header */
      .tf-header {
          border-bottom: none !important;
          background-color: #6c2d27 !important;
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
          
      }
      .tf-header .logo-site img {
          display: inline-block !important; 
          object-fit: cover;
          margin-left: -10px !important;
          width: auto !important;   
      }
      
       .box-nav-menu {
            display: flex !important;
            flex-wrap: wrap !important;
            color: #fcc81a !important;
          }


      .box-nav-menu .item-link {
          font-size: 18px;
          font-weight: 600;
          color: #fcc81a !important;
          text-decoration: none;
      }
      .box-nav-menu .item-link:hover {
          color: #0077cc;
      }
      .nav-icon-list .icon {
        font-size: 20px;
        color: #000 !important;;
    }
    .shop-cart {
      position: relative;
      display: inline-block;
    }
    .shop-cart .count {
        position: absolute;
          top: -10px;
          right: -12px;
          background-color: #28a745; /* pharma green */
          min-width: 16px;
          height: 16px;
          font-size: 10px;
          line-height: 16px;
          font-weight: 600;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          padding: 0;
          z-index: 2;
    }     

      /* hero slider text */
      .title_sld {
          font-weight: 600;
          color: #0a1a2a;
      }
      .sub-title_sld {
          color: #0077cc !important;
          font-weight: 600;
          letter-spacing: .02em;
          text-transform: uppercase;
      }
      .sub-text_sld {
          color: #444;
          font-size: 15px;
          max-width: 480px;
          margin-left: auto;
          margin-right: auto;
          line-height: 1.5;
      }
      .tf-btn.animate-btn {
          background-color: #00b894;
          border: 0;
          color: #fff;
          padding: 10px 16px;
          border-radius: 8px;
          font-size: 14px;
          line-height: 1.2;
          display: inline-flex;
          align-items: center;
          gap: 6px;
          text-decoration: none;
      }
      .tf-btn.animate-btn:hover {
          background-color: #01956e;
          color: #fff;
      }

      /* category carousel */
      .widget-collection .collection_image img {
          border-radius: 12px;
          box-shadow: 0 10px 20px rgba(0,0,0,0.06);
          background: #fff;
          object-fit: cover;
      }
      .collection_name {
          font-weight: 600;
          color: #0a1a2a;
      }

      /* new products grid section */
      #new-products-grid .col-product {
          display: flex;
          position: relative; /* important for absolute positioning inside */
          overflow: visible;
      }

      .section-heading {
          text-align: center;
          margin-bottom: 1.5rem;
      }
      .section-heading .heading-title {
          font-size: 20px;
          font-weight: 600;
          color: #0a1a2a;
          margin-bottom: .25rem;
      }
      .section-heading .heading-sub {
          color: #555;
          font-size: 14px;
      }

      /* Swiper nav custom (optional refine) */
      .tf-sw-nav {
          background-color: rgba(10,26,42,0.6);
          color: #fff;
          width: 32px;
          height: 32px;
          border-radius: 6px;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 10px 20px rgba(0,0,0,0.2);
          cursor: pointer;
      }
      .tf-sw-nav .icon {
          font-size: 14px;
          line-height: 1;
      }

      /* small utility */
      .text-small { font-size: 13px; line-height: 1.4; }
      .fw-semibold { font-weight: 600 !important; }
      .tf-slideshow {
        position: relative;
        width: 100%;
        overflow: hidden;
      }
 



/* Arrows on image */
.tf-sw-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}

.tf-sw-nav:hover {
background-color: rgba(0, 0, 0, 0.7);
}

/* Left/right positions */
.nav-prev-swiper { left: 25px; }
.nav-next-swiper { right: 25px; }

/* Pagination dots inside image */
.tf-sw-pagination {
position: absolute !important;
bottom: 15px !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 10;
width: auto !important;
text-align: center !important;
}



@media (max-width: 768px) {
.tf-header .row {
  flex-wrap: nowrap !important;
}
.tf-header .logo-site img {
  align-items: left;
}
.tf-header .col-3,
.tf-header .col-6 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tf-header {
  padding: 6px 0 !important;
}
.tf-slideshow .sld_image img {
  height: 300px;
}
.tf-sw-nav {
  width: 36px;
  height: 36px;
}
}

/* Keep slider text crisp and readable */
.tf-slideshow .sld_content h1,
.tf-slideshow .sld_content p,
.tf-slideshow .sld_content .sub-title_sld {
color: #111111 !important;
text-shadow:
  0 4px 8px rgba(0, 0, 0, 0.3); /* soft layered shadow for contrast */
}

/* Adjust heading size and weight for better visibility */
.tf-slideshow .sld_content h1 {
font-size: 2.5rem;
font-weight: 700;
line-height: 1.3;
}

.tf-slideshow .sld_content p {
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
}

/* Keep your buttons clean */
.tf-slideshow .tf-btn.animate-btn {
background-color: #00b894;
border: none;
color: #fff;
}
.tf-slideshow .tf-btn.animate-btn:hover {
background-color: #01956e;
}




  /* Overlay text */
  .tf-slideshow .sld_content {
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 90%;
    text-align: center;
    color: #000;
    z-index: 2;
    padding: 0 10px;
  }

  .tf-slideshow .sld_content .sub-title_sld {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 4px;
  }

  .tf-slideshow .sld_content .title_sld {
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 8px;
  }

  .tf-slideshow .sld_content .sub-text_sld {
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 10px;
  }

  .tf-slideshow .sld_content .tf-btn {
    font-size: 12px;
    padding: 5px 15px;
    border-radius: 20px;
  }

  /* Swiper dot alignment */
  .tf-slideshow .tf-sw-pagination {
    position: relative;
    bottom: 0 !important;
    margin-top: 5px !important;
  }



  .tf-slideshow .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}


  .image-container {
    width: 100%;
    height: 100%; /* adjust as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 5px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    background-color: #fff;
  }
  
  .image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  
  .user-info {
    align-items: center;
  }
  
  .user-info .text-muted {
    font-size: 12px;
    margin-bottom: 0;
    line-height: 1;
  }
  
  .user-info strong {
    font-size: 13px;
    color: #000;
  }
  
  .user-info .btn-outline-danger {
    padding: 3px 10px;
    font-size: 12px;
    line-height: 1.2;
    border-radius: 6px;
  }
  



@media (max-width: 768px) {
    .tf-slideshow {
    max-width: 100%;
    margin: 0 auto;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
  }

  .tf-slideshow .swiper,
  .tf-slideshow .swiper-slide {
    height: auto;
  }

  .tf-slideshow .sld_image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* fills space nicely without stretching */
    object-position: center;
  }

  /* remove padding or margin causing white gaps */
  .tf-slideshow .swiper-wrapper,
  .tf-slideshow .swiper-slide {
    padding: 0 !important;
    margin: 0 !important;
  }
}

.tf-header {
  background-color: #6c2d27 !important; /* deep maroon */
  color: #d4af37 !important; /* metallic gold */
}

.tf-header a,
.tf-header .menu a,
.tf-header .logo-site span,
.tf-header .nav-link, .tf-header .nav-link .user-info span, .tf-header .nav-link .user-info strong {
  color: #d4af37 !important;
}

.tf-header a:hover,
.tf-header .menu a:hover,
.tf-header .nav-link:hover,
.tf-header .nav-link .user-info span, .tf-header .nav-link .user-info strong {
  color: #d4af37 !important; /* white on hover for contrast */
}

/* --- FINAL POLISHED FIX: image fits perfectly, no cut, no gaps --- */
@media (max-width: 768px) {
  .tf-slideshow {
    width: 100%;
    overflow: hidden;
  }

  .tf-slideshow .slider-wrap,
  .tf-slideshow .swiper,
  .tf-slideshow .swiper-slide,
  .tf-slideshow .sld_image {
    height: auto !important;
    min-height: unset !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .tf-slideshow .sld_image img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;  /* ✅ show full image */
    object-position: center center !important;
    display: block;
    background-color: #fff; /* optional, avoids visible black borders */
  }

  /* Ensure container shrinks exactly to image height */
  .tf-slideshow .swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto !important;
  }

  /* Overlay content centered & proportional */
  .tf-slideshow .sld_content {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    text-align: center;
    z-index: 2;
  }
}

/* --- PERFECT MOBILE SLIDER FIX (no cut, no blank) --- */
@media (max-width: 768px) {
  .tf-slideshow {
    width: 100%;
    overflow: hidden;
  }

  /* Let the container take image height automatically */
  .tf-slideshow .slider-wrap,
  .tf-slideshow .swiper,
  .tf-slideshow .swiper-slide,
  .tf-slideshow .sld_image {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Image scales responsively — no crop, no space */
  .tf-slideshow .sld_image img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-position: center center !important;
    display: block;
  }

  /* Keep overlay text aligned */
  .tf-slideshow .sld_content {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    text-align: center;
    z-index: 2;
  }
}

/* Main Dropdown Container */
.silver-mega-menu {
    display: none;
  position: absolute !important;               /* ✅ use fixed instead of absolute */
  top: 100%;                    /* adjust height of your navbar (approx 100px) */
  left: 0;
  background-color: #6c2d27;     /* maroon background */
  padding: 30px 100px;           /* height/spacing */
  border-top: 2px solid #ddc681;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  z-index: 2000;
  box-sizing: border-box;
}

/* Layout for the inner container */
.silver-menu-container {

  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: 1300px;
  margin: 0 auto;
  gap: 80px;
}

/* Columns */
.mega-column {
  flex: 1;
  min-width: 300px;
}

/* Titles */
.mega-title,
.dropdown-header {
  color: #6c2d27;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid #ddc681;
  padding-bottom: 4px;
  display: inline-block;
  margin-bottom: 12px;
}

/* Dropdown links */
.mega-column a {
  display: block;
  text-decoration: none;
  color: #333;
  padding: 6px 0;
  font-size: 15px;
  transition: color 0.2s ease;
}

.mega-column a:hover {
  color: #6c2d27;
}

/* Hover behavior for top-level SILVER */
#silverDropdown:hover .silver-mega-menu {
  display: block;
}

/* Submenu under Silver Jewellery */
.dropdown-submenu {
  display: none;
  margin-top: 10px;
  padding: 10px 20px;
  border-left: 2px solid #ddc681;

}

/* Show sublist only on hover */
.has-submenu:hover .dropdown-submenu {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr)); 
  gap: 8px 20px;
}


/* Smooth transition */
.silver-mega-menu,
.dropdown-submenu {
  transition: none !important;
}

/* --- Force Silver Dropdown Full Width (from very left edge) --- */
.menu-item.dropdown {
  position: static !important; /* ⛔ override the container's relative position */
}

.silver-mega-menu {
  display: none;
  position: absolute !important;
  top: 100%;
  left: 0;                     /* ✅ start from very left edge */
  right: 0;                    /* ✅ extend to right edge */
  margin-left: calc(-50vw + 50%); /* ✅ pull out of container to screen edge */
  background-color: #6c2d27;
  padding: 30px 100px;
  border-top: 2px solid #ddc681;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  z-index: 2000;
  box-sizing: border-box;
  flex-wrap: nowrap; 
}

/* Show on hover */
.menu-item.dropdown:hover .silver-mega-menu {
  display: block;
}

/* Inner layout */
.silver-menu-container {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 80px;
}

.mega-title,
.dropdown-header {
  color: #ddc681;
  font-size: 20px;
  font-weight: 700;
  border-bottom: 0px solid #ddc681;
  padding-bottom: 6px;
}

.mega-column a {
  color: #f3e5ab;
  text-decoration: none;
  display: block;
  padding: 0 8px;  
  height: 32px;                 /* fixed height for uniform spacing */
  line-height: 32px;
  font-size: 14px;
  transition: all 0.3s ease;
  width: 100%;    
  white-space: nowrap;
}

.mega-column a:hover {
  color: #ffffff;
  transform: translateX(5px);
}

/* === Remove box/background structure only for Silver Jewellery === */
.silver-menu-container .mega-column:first-child {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.silver-menu-container .mega-column:first-child .dropdown-header {

  padding-bottom: 6px;
  color: #ddc681;
}

.silver-menu-container .mega-column:first-child a {
  color: #f3e5ab;
  text-decoration: none;
  display: block;
  padding: 6px 0;
  font-size: 15px;
  transition: all 0.3s ease;
}

.silver-menu-container .mega-column:first-child a:hover {
  color: #ffffff;
  transform: translateX(5px);
}

/* --- Remove white box background from Silver Jewellery section --- */
.silver-menu-container .mega-column:first-child,
.silver-menu-container .mega-column:first-child .dropdown-submenu {
  background: none !important;
  white-space: nowrap;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

/* keep neat spacing and gold styling for heading */
.silver-menu-container .mega-column:first-child .dropdown-header {
  color: #ddc681 !important;
  padding-bottom: 6px !important;
  margin-bottom: 10px !important;
}

/* ensure inner links look consistent */
.silver-menu-container .mega-column:first-child a {
  background: none !important;
  color: #f3e5ab !important;
  text-decoration: none;
  padding: 6px 0 !important;
  font-size: 15px;
  transition: all 0.3s ease;
}

.silver-menu-container .mega-column:first-child a:hover {
  color: #ffffff !important;
  transform: translateX(5px);
}

/* --- Equal Alignment & Consistent Layout --- */

/* Flex container alignment fix */
.silver-menu-container {
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px; /* balanced spacing between the two sections */
}

/* Make both columns visually balanced */
.silver-menu-container .mega-column {
  flex: 1 1 45%;
  min-width: 300px;
}

/* Silver Jewellery multi-column layout (left side) */
.silver-menu-container .mega-column:first-child {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr)); /* evenly spaced 3-column grid */
  gap: 6px 30px;
}

/* Heading for Silver Jewellery */
.silver-menu-container .mega-column:first-child .dropdown-header {
  grid-column: 1 / -1; /* make heading span across all columns */
  font-weight: 700;
  color: #ddc681;

  padding-bottom: 8px;
  margin-bottom: 10px;
}

/* Links styling consistency */
.silver-menu-container .mega-column:first-child a {
  color: #f3e5ab;
  text-decoration: none;
  font-size: 15px;
  transition: all 0.3s ease;
  padding: 4px 0;
}

.silver-menu-container .mega-column:first-child a:hover {
  color: #ffffff;
  transform: translateX(5px);
}


/* Silver Light Weight Jewellery – exactly 4 items per column */
.silver-menu-container .mega-column:nth-child(2) {
    display: grid !important;
    grid-auto-flow: column;          /* fill down first, then next column */
    grid-template-rows: repeat(4, auto);  /* Always 4 rows in each column */
    column-gap: 20px;                /* space between columns */
    row-gap: 12px;                   /* space between items */
}

/* Silver Light Weight Jewellery – exactly 4 rows per column */
.slwj-grid {
    display: grid !important;
    grid-auto-flow: column;               /* fill rows first */
    grid-template-rows: repeat(4, auto);  /* 4 items max per column */
    column-gap: 20px;                     /* spacing between columns */
    row-gap: 6px !important;                        /* spacing between items */
}


.silver-menu-container .mega-column:nth-child(2) .dropdown-header {
  grid-column: 1 / -1; /* make heading span across all columns */
  font-weight: 700;
  color: #ddc681;

  padding-bottom: 6px;
  margin-bottom: 6px !important;
}

.silver-menu-container .mega-column:nth-child(2) a {
  color: #f3e5ab !important;
  text-decoration: none;
  padding: 6px 0;
  font-size: 15px;
  transition: all 0.3s ease;
  margin-left:0;
}

.silver-menu-container .mega-column:nth-child(2) a:hover {
  color: #ffffff;
  transform: translateX(5px);
}

/* Common link styling for both columns */
.silver-menu-container a {
  color: #f3e5ab !important;       /* soft gold text color */
  text-decoration: none;
  display: block;
  padding: 6px 0;
  font-size: 15px;
  transition: all 0.3s ease;
}

/* --- Align dropdown headers perfectly left --- */
.silver-menu-container .dropdown-header {
  margin-left: -5px;   /* move 5px to the left */
  padding-left: 0 !important;  /* remove any inherited padding */
}

/* Only 4 items per column for Silver Premium Jewellery */
.silver-menu-container .mega-column:first-child ul.dropdown-submenu.multi-column {
    display: grid !important;
    grid-auto-flow: column;              /* fill rows first */
    grid-template-rows: repeat(4, auto); /* 4 items per column */
    gap: 6px 30px;
}

/* Ensure both left and right columns align nicely */
.silver-menu-container {
    display: grid !important;
    grid-template-columns: 65% 35%; /* Left wide, right narrow */
    align-items: start;            /* Align both columns to top */
    gap: 20px;                     /* Space between left & right */
}

/* Silver Premium Jewellery – BIG column spacing */
.silver-menu-container .mega-column:first-child .dropdown-submenu {
    display: grid !important;
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
    gap: 8px 20px;   /* ← VERY BIG space between columns */
    
}

.silver-menu-container .mega-column:first-child .dropdown-submenu,
.silver-menu-container .mega-column:nth-child(2) .dropdown-submenu {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr)); 
  gap: 8px 20px !important;
}

/* SAME GRID STRUCTURE FOR BOTH LEFT + RIGHT SECTIONS */
.silver-menu-container .mega-column:first-child .dropdown-submenu,
.silver-menu-container .mega-column:nth-child(2) {
    display: grid !important;
    grid-auto-flow: column;               /* fill down first */
    grid-template-rows: repeat(4, auto);  /* 4 rows → 4 items */
    column-gap: 50px;                     /* spacing between columns */
    row-gap: 0 !important;
}

/* REMOVE ALL UNWANTED VERTICAL LINES */
.dropdown-submenu,
.mega-column,
.mega-column::before,
.mega-column::after {
    border: none !important;
}

/* Fix heading alignment only for Silver Light Weight Jewellery */
.silver-menu-container .mega-column:nth-child(2) .dropdown-header {
    margin-left: 10px !important;
    padding-left: 0 !important;

}

/* Keep SLWJ links properly aligned */
.silver-menu-container .mega-column:nth-child(2) a {
    margin-left: 0 !important;
}

/* UNIFY ROW SPACING FOR BOTH COLUMNS */
.silver-menu-container .mega-column:first-child .dropdown-submenu,
.silver-menu-container .mega-column:nth-child(2) {
    row-gap: 10px !important;       /* choose any consistent value */
    column-gap: 30px !important;
}

.silver-mega-menu a.active {
    color: #d4af37 !important;     /* gold color */
    font-weight: 700 !important;   /* bold */
}

/* Mobile silver dropdown */
.silver-mobile .dropdown-menu {
    display: none;
    padding-left: 15px;
}

.silver-mobile .dropdown-menu.show {
    display: block;
}

#silverSubmenu .fw-bold {
    color: #6c2d27; /* elegant dark maroon */
    font-size: 14px;
    margin-bottom: 5px;
}

#silverSubmenu a {
    font-size: 13px;
    color: #333;
}

#silverSubmenu a.active {
    color: #d4af37 !important;     /* gold color */
    font-weight: 700 !important;   /* bold */
    font-weight: bold !important;
}


/* --- SILVER DROPDOWN FIX FOR 1280px (Nest Hub Max) SCREEN --- */
@media (min-width: 992px) {

  /* Reduce the outer padding */
  .silver-mega-menu {
    padding: 20px 20px !important;
  }

  /* Reduce spacing between left and right blocks */
  .silver-menu-container {
    gap: 40px !important;
  }

  /* LEFT COLUMN — switch from 4 to 3 columns */
  .silver-menu-container .mega-column:first-child {
    grid-template-columns: repeat(3, minmax(140px, 1fr)) !important;
  }

  .silver-menu-container .mega-column:first-child .dropdown-submenu {
    grid-template-columns: repeat(3, minmax(140px, 1fr)) !important;
    column-gap: 20px !important;
    row-gap: 8px !important;
  }

  /* RIGHT COLUMN — reduce spacing */
  .silver-menu-container .mega-column:nth-child(2) {
    column-gap: 15px !important;
  }

  /* Fix link spacing (reduce width pressure) */
  .silver-mega-menu a {
    font-size: 14px !important;
    padding: 4px 0 !important;
  }
  
  .box-nav-menu {
    margin-left: -30px !important;   /* adjust the -30px as per your requirement */
}

.box-navigation {
    justify-content: flex-start !important;
}

/* FORCE HEADER NAVIGATION TO LEFT */
.tf-header .col-xl-6,
.tf-header .col-lg-6,
.tf-header .col-md-6 {
    display: flex !important;
    justify-content: flex-start !important;
}

/* Move the menu itself slightly left */
.tf-header .box-nav-menu {
    margin-left: -40px !important;
}

/* Reduce logo width so menu fits on the same line */
.tf-header .col-xl-3 {
    width: 20% !important;       /* was too wide, reduce it */
}

.tf-header .col-xl-6 {
    width: 50% !important;       /* give more room to menu */
}

.tf-header .col-xl-3.user-info-col {
    width: 30% !important;       /* right side icons */
}

.tf-header .logo-site{
    margin-left: -20px !important;
}
.box-nav-menu {
    margin-left: -20px !important; 
}

.user-info-col {
    display: flex !important;
    justify-content: flex-end !important;
}
}



/* FULL IMAGE — NO CROPPING */
.tf-swiper.sw-slide-show img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center;
    display: block;
}
    .tf-slideshow .container,
.sld_content .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* === UNIFORM PRODUCT CARD FIX FOR NEW ARRIVALS === */

#new-products-grid .card {
    height: 280px !important;        /* same height for all cards */
    display: flex;
    flex-direction: column;
    border-radius: 12px !important;
    overflow: hidden;
    padding: 0 !important;
    position: relative; /* important for absolute positioning inside */
   overflow: visible;
}

#new-products-grid .card-img-top {
    height: 200px !important;        /* uniform image height */
    width: 100% !important;
    object-fit: cover !important;  /* show full jewellery image */
    background: #fff;
    border: none !important;

}

#new-products-grid .card-body {
    flex: 0 0 auto;             /* shrink to content */
    padding: 5px !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* push content to top */
    text-align: center;
}
#new-products-grid .card-body div:first-child {
    font-size: 14px;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
}

#new-products-grid .card-body div:last-child {
    font-size: 14px;
    margin: 0 !important;
    color: #28a745;
}

#new-products-grid a {
  position: relative !important;
  display: block;
}
/* === MOBILE FIX === */
@media (max-width: 600px) {
    #new-products-grid .card {
        height: 240px !important;
    }
    #new-products-grid .card-img-top {
        height: 150px !important;
    }
    #new-products-grid .card-body {
        flex: 0 0 auto !important;
        padding: 4px !important;
    }
}

#new-products-grid .media-wrapper {
  position: relative;
  object-fit: cover;
}

/* FAV BUTTON – floating only */
#new-products-grid .fav-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 20;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Heart icons */
#new-products-grid .fav-btn svg {
  width: 22px;
  height: 22px;
}

/* toggle */
#new-products-grid .fav-btn .heart-filled {
  display: none;
}

#new-products-grid .fav-btn.active .heart-outline {
  display: none;
}

#new-products-grid .fav-btn.active .heart-filled {
  display: inline;
}


/* GOLD MEGA MENU — FULL WIDTH */
.gold-mega-menu {
    position: absolute !important;
    top: 100%;
    left: 0;
    right: 0;
    margin-left: calc(-50vw + 50%);
    background-color: #6c2d27;
    padding: 40px 80px;
    border-top: 2px solid #ddc681;
    z-index: 2000;
}

.menu-item.dropdown:hover .gold-mega-menu {
    display: block !important;
}

/* GOLD MENU — 3 COLUMNS IN ONE ROW */
.gold-menu-container {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* ⬅ IMPORTANT */
    gap: 20px;
    align-items: start;
}

/* Styling */
.gold-menu-container .dropdown-header {
    color: #ddc681 !important;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    text-align: start;
}

.gold-menu-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gold-menu-container a {
    display: block;
    padding: 6px 0;
    font-size: 15px;
    color: #f3e5ab !important;
    transition: 0.2s ease;
}

.gold-menu-container a:hover {
    color: #fff !important;
    transform: translateX(4px);
}

/* Gold Mobile Menu */
.gold-mobile .dropdown-menu {
    display: none;
    padding-left: 15px;
}

.gold-mobile .dropdown-menu.show {
    display: block;
}

#goldSubmenu .fw-bold {
    color: #6c2d27; 
    font-size: 14px;
    margin-bottom: 5px;
}

#goldSubmenu a {
    font-size: 13px;
    color: #333;
}

#goldSubmenu a.active {
    color: #d4af37 !important; /* gold color */
    font-weight: 700 !important;
}



.box-nav-menu li {
    padding: 0 !important;
    margin: 0 !important;
}

.box-nav-menu li a {
    display: inline-block !important;
    padding: 12px 18px !important;
}

.box-nav-menu li a::before,
.box-nav-menu li a::after {
    pointer-events: none;
}



/* Desktop only */
@media (min-width: 1200px) {
    .logo-site {
        display: inline-block !important;   /* shrink-wrap the anchor */
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
    }

    .logo-site img {
        display: block !important;          /* removes inline-gap */
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }
}

#new-products-grid .card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#new-products-grid .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}



/* ===============================
   MOBILE MENU — FULLY ISOLATED
   =============================== */
#mobileMenuWrapper {
    position: fixed;
    top: 0;
    left: -270px;
    width: 270px;
    height: 100vh;
    background: #fff;
    z-index: 999999;
    padding: 20px 15px;
    overflow-y: auto;
    transition: all 0.3s ease-in-out;
    box-shadow: 3px 0 12px rgba(0,0,0,0.15);
}

/* When visible */
#mobileMenuWrapper.open {
    left: 0;
}

/* Menu header */
#mobileMenuWrapper .menu-header {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
}

/* Menu list */
#mobileMenuWrapper ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#mobileMenuWrapper ul li {
    margin-bottom: 12px;
}

#mobileMenuWrapper ul li a {
    color: #333;
    text-decoration: none;
    font-size: 16px;
    display: block;
    padding: 8px 6px;
    border-radius: 6px;
    transition: 0.2s;
}

/* Hover effect */
#mobileMenuWrapper ul li a:hover {
    background: #f0f0f0;
}

/* Dropdown toggle arrow */
#mobileMenuWrapper .submenu-toggle {
    float: right;
    font-size: 14px;
    cursor: pointer;
}

/* Submenu container */
#mobileMenuWrapper .submenu {
    margin-top: 6px;
    padding-left: 15px;
    display: none;
}

#mobileMenuWrapper .submenu.open {
    display: block;
}

/* Overlay background */
#mobileMenuOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: none;
    z-index: 999998;
}

/* Show overlay */
#mobileMenuOverlay.show {
    display: block;
}

/* ===============================
   OPTIONAL — Hamburger icon
   =============================== */
#mobileMenuBtn {
    cursor: pointer;
    font-size: 26px;
    display: inline-block;
    padding: 8px;
}

.mobile-submenu {
    padding-left: 15px;
}

.mobile-submenu.show {
    display: block !important;
}

.menu-item.dropdown:hover .silver-mega-menu,
.menu-item.dropdown:hover .gold-mega-menu {
    display: block !important;
    pointer-events: auto;   /* now it is clickable only when open */
}


#accountDropdownToggle + .dropdown-menu {
    position: absolute !important;
    inset: unset !important;
    top: 100% !important;
    left: auto !important;
    right: 0 !important;
    transform: none !important;
}

/* ===============================
   MOBILE LOGO — FINAL FIX
   =============================== */

@media (max-width: 576px){

  /* Header layout */
  .tf-header {
    padding: 6px 10px !important;
  }

  .tf-header .row {
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  /* LOGO COLUMN */
  .tf-header .logo-site {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
  }

  .tf-header .logo-site img {
    height: 32px !important;
    width: auto !important;
    max-width: 140px;
    object-fit: contain !important;
    display: block;
  }


}
@media screen and (max-height: 600px) {
    .tf-header .logo-site {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .tf-header .logo-site img {
    height: 34px !important;      /* tablet-friendly */
    max-width: 160px !important;
    object-fit: contain !important;
  }
}

/* =====================================
   LOGO FIX — 6.7 INCH PHONES
   ===================================== */
@media screen 
  and (min-width: 390px) 
  and (max-width: 430px)
  and (min-height: 840px) {

  .tf-header {
    padding: 6px 12px !important;
  }

  .tf-header .row {
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  .tf-header .logo-site {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .tf-header .logo-site img {
    height: 30px !important;      /* perfect for 6.7" */
    max-width: 140px !important;
    width: auto !important;
    object-fit: contain !important;
  }

}
/* =========================================
   FIX: 1024 x 600 TABLET (Nest Hub, Android)
   ========================================= */
@media screen 
  and (min-width: 960px)
  and (max-width: 1024px)
  and (max-height: 600px) {

  /* Header height control */
  .tf-header {
    padding: 8px 16px !important;
    min-height: 72px !important;
    display: flex;
    align-items: center;
  }

  .tf-header .row {
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  /* LOGO FIX */
  .tf-header .logo-site {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 56px !important;          /* 🔒 lock container height */
    overflow: hidden;
  }

  .tf-header .logo-site img {
    height: 44px !important;          /* ✅ correct visual size */
    max-height: 44px !important;
    width: auto !important;
    max-width: 180px !important;
    object-fit: contain !important;
    display: block;
  }


}


/* =====================================================
   FINAL SAFE OVERRIDE — BANNER + CATEGORY ONLY
   ===================================================== */

/* ---------- HERO BANNER ---------- */
.tf-slideshow {
  position: relative;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

.tf-slideshow .swiper,
.tf-slideshow .swiper-wrapper,
.tf-slideshow .swiper-slide,
.tf-slideshow .sld_image {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

/* Desktop */
@media (min-width: 992px) {
  .tf-slideshow .swiper-slide,
  .tf-slideshow .sld_image {
    height: auto;   /* remove fixed height */
  }

  .tf-slideshow .sld_image img {
    width: 100%;
    height: auto;   /* important */
    object-fit: contain; /* show full image */
    display: block;
  }
}


/* Mobile */
@media (max-width: 991px) {
  .tf-slideshow .swiper-slide,
  .tf-slideshow .sld_image {
    height: auto;
  }

  .tf-slideshow .sld_image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
  }
}



/* =====================================================
   FINAL FIX — NO RED BARS + NO CROPPED LOGO
   ===================================================== */

/* Prevent horizontal overflow globally */
html, body {
  width: 100%;
  overflow-x: hidden !important;
}

/* FULL WIDTH HERO — SAFE WAY */
.tf-slideshow {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

.tf-slideshow .swiper,
.tf-slideshow .swiper-wrapper,
.tf-slideshow .swiper-slide,
.tf-slideshow .slider-wrap,
.tf-slideshow .sld_image {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

/* DESKTOP — show full image (NO CROPPING) */


@media (min-width: 992px) {
  .tf-slideshow .sld_image img {
      width: 100%;
      height: auto;
      object-fit: cover;   /* or contain if you prefer full image */
      display: block;
  }
}

/* MOBILE — natural scaling */
@media (max-width: 991px) {
  .tf-slideshow .sld_image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
  }
}


/* =====================================================
   TANISHQ STYLE CATEGORY SWIPER — DESKTOP GAP FIX
   ===================================================== */

/* Swiper container */
.category-swiper {
  padding: 8px 12px 12px !important;
}

/* IMPORTANT: lock slide width */
.category-swiper .swiper-slide {
  width: 260px !important;      /* 👈 FIXES DESKTOP GAP */
  display: flex;
  justify-content: center;
}

/* Card */
.category-card {
  width: 100%;
  max-width: 240px;
  background: #fff;
  border-radius: 20px;
  padding: 10px;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(0,0,0,0.12);
  transition: transform .3s ease, box-shadow .3s ease;
}

.category-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

/* Image box */
.category-thumb {
  width: 100%;
  height: 210px;
  border-radius: 16px;
  overflow: hidden;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Name */
.category-name {
  margin-top: 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #222;
  min-height: 36px;
}

/* ---------- TABLET ---------- */
@media (max-width: 991px) {
  .category-swiper .swiper-slide {
    width: 220px !important;
  }

  .category-thumb {
    height: 180px;
  }
}

/* ---------- MOBILE ---------- */
@media (max-width: 768px) {
  .category-swiper .swiper-slide {
    width: 170px !important;
  }

  .category-thumb {
    height: 125px;
  }

  .category-name {
    font-size: 12px;
    min-height: 30px;
  }
}