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




body, * {
    font-family: "Trebuchet MS", sans-serif !important;
}

        body {
          background-color: #fff;
          color: #222;
          font-family: system-ui, -apple-system, BlinkMacSystemFont, "Inter", "Roboto", "Segoe UI", sans-serif;
      }

      .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;
      }
      /* Keep slider inside a nice container box */
.tf-slideshow .swiper {
position: relative;
overflow: hidden;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
max-width: 90%;        /* keeps it boxed, not full screen */
margin: 0 auto;           /* centers the slider */
}




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

/* Responsive */
@media (max-width: 992px) {
.tf-slideshow .sld_image img {
  height: 420px;
}
}

@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;
}

/* Category grid layout */
.category-grid {
  display: grid;
  justify-content: start; /* centers all cards horizontally */
  align-items: start;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px; /* space between cards */
  margin-top: 20px;
}

/* Category card design */
.category-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
width: 200px;           /* fixed width */
height: 220px;          /* fixed height */
text-decoration: none;
transition: all 0.3s ease;
overflow: hidden;
}

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

/* Category image box */
.category-thumb {
width: 100%;
height: 150px;
border-radius: 12px 12px 0 0;
overflow: hidden;
}

.category-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
border: 3px solid #ddd;
border-radius: 6px;
object-fit: contain;
}

.category-card:hover img {
transform: scale(1.05);
}

/* Category text */
.category-name {
margin-top: 10px;
font-weight: 600;
color: #0a1a2a;
font-size: 15px;
}

@media (max-width: 1400px) {
  .category-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 1200px) {
  .category-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* MOBILE FIX for category cards */
@media (max-width: 768px) {

  .category-grid {
    grid-template-columns: repeat(2, 1fr);   /* 2 columns */
    gap: 12px;                                /* smaller spacing */
    padding: 0 10px;
  }

  .category-card {
    width: 100%;            /* full width inside grid */
    height: 170px;          /* reduce overall height */
    border-radius: 10px;
  }

  .category-thumb {
    height: 110px !important;  /* FIX image height */
  }

  .category-thumb img {
    object-fit: contain !important;
    border-width: 2px;
  }

  .category-name {
    font-size: 10px;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;

    /* FORCE Samsung to allow 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;

    overflow: hidden;
    white-space: normal !important;

    /* Force height to show 2 lines on Samsung */
    min-height: 2.5em; 
  }
}


@media (max-width: 480px) {

  /* HEADER & LOGO */
  .tf-header {
    padding: 6px 8px !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .logo-site img {
    width: auto !important;  
    height:25px;
    object-fit: contain;

  }

  .nav-icon-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    font-size: 10px !important;
    padding-left: 100px !important;

  }

  /* CATEGORY GRID */
  .category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    justify-content: center;
  }

  .category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    width: 100px;
    height: 120px;
    text-decoration: none;
    transition: all 0.3s ease;
    overflow: hidden;
  }

  /* SLIDER FIX */
  .tf-slideshow .slider-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    border-radius: 12px;
  }

  .tf-slideshow .sld_image {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .tf-slideshow .sld_image img {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 320px;
    object-fit: cover;
    display: block;
  }

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

  /* Small text adjustment for very small screens */
  @media (max-width: 380px) {
    .tf-slideshow .sld_content .title_sld {
      font-size: 18px;
    }
    .tf-slideshow .sld_content .sub-text_sld {
      font-size: 11px;
    }
    .tf-slideshow .sld_image img {
      min-height: 280px;
    }
  }
  .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;
  }
  
  /* Make slider responsive and fit image properly */
.tf-slideshow .sld_image img {
  width: 100%;
  height: auto !important; /* allow image to scale naturally */
  object-fit: cover; /* fills area without distortion */
}


/* Prevent parent div from forcing fixed height */
.tf-slideshow .slider-wrap,
.tf-slideshow .sld_image {
  height: auto !important;
}

@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;
    min-height: 100vw; /* keep proportional square-like ratio */
  }

  .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-fit: scale-down !important; /* behaves between contain & cover */
    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;
  width: 100vw;                  /* full screen width */
  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 */
  width: 100vw;                /* full viewport width */
  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;
}
}

/* MOBILE FIX - NATURAL HEIGHT SLIDER (no vertical cutting) */
@media (max-width: 600px) {

    .tf-swiper.sw-slide-show,
    .tf-swiper.sw-slide-show .swiper-slide,
    .tf-swiper.sw-slide-show .slider-wrap,
    .tf-swiper.sw-slide-show .sld_image,
    .tf-swiper.sw-slide-show picture {
        width: 100vw !important;          /* Always full device width */
        max-width: 100vw !important;
        height: auto !important;              /* Let slider height follow image */
    overflow: hidden;
}
.tf-swiper.sw-slide-show .swiper-slide {
    aspect-ratio: 16 / 9;   /* Change this if your images have different shape */
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: hidden;
}

/* 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: 310px !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: 260px !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;
    width: 100vw;
    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;
  }


}


/* =====================================
   PERFECT SLIDER — NO GAP, NO CUT
   ===================================== */

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

/* Image MUST fit fully */
.tf-slideshow .sld_image img {
  width: 100% !important;
  height: auto !important;
  display: block;
  object-fit: contain !important;   /* ✅ NO CROPPING */
  object-position: center center;
}

/* ===============================
   REMOVE HEADER MESSAGE TEXT
   (DESKTOP + MOBILE)
   =============================== */

/* Kill any header text blocks */
header p,
header .site-description,
header .header-text,
header .header-message,
header .top-message,
header .sub-title,
header .description,
header .tagline {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* If it is a direct div inside header */
header > div:first-child {
    display: none !important;
}

/* Remove leftover spacing */
header,
.tf-header,
body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}