html {
  scroll-behavior: smooth;
}
body{
  margin: 0px;
  padding: 0px;
  height: 100vh;
  width: 100%;
  background-color: rgb(240, 240, 240);
}
a{
  color: black;
  text-decoration: none;
}
i{
  border: none;
}

/* =========================
   PRELOADER STYLES
========================== */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #000000; /* Deep black background */
  z-index: 99999; /* Ensure it stays on top of everything */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: opacity 0.6s ease-out, visibility 0.6s ease-out;
}

.watch-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The outer dial */
.watch-face {
  width: 60px;
  height: 60px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  position: relative;
  margin-bottom: 20px;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

/* The center pin */
.watch-face::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: #ffffff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

/* Base style for both hands */
.watch-hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  background: #ffffff;
  transform-origin: bottom center;
  border-radius: 10px;
}

/* The hour hand (shorter, slower) */
.hour-hand {
  width: 2px;
  height: 15px;
  margin-left: -1px;
  animation: spin 12s linear infinite;
}

/* The minute hand (longer, faster) */
.minute-hand {
  width: 2px;
  height: 25px;
  margin-left: -1px;
  animation: spin 1s linear infinite;
}

/* Pulsing text */
.watch-loader p {
  color: #ffffff;
  font-family: 'Bodoni Moda', serif;
  letter-spacing: 6px;
  font-size: 16px;
  margin: 0;
  animation: pulse 1.5s ease-in-out infinite;
}

/* Animations */
@keyframes spin {
  100% { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* Utility class applied by JS to hide the preloader */
.preloader-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
}


.hero-section{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80vh;
  margin: 20px 30px;
  border-radius: 10px;
  box-shadow: 20px 20px 60px black;
  /*box-shadow: 5px 5px 15px rgba(0,0,0,0.3);*/
  background-image: url(../Images/hero-section.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.hero-left{
  width: 70%;
  margin-left: 70px;
  font-style: italic;
}
.hero-left h2{
  font-size: 40px;
  font-family: 'Bodoni Moda', serif;
}
.hero-left h4{
  color: gray;
  font-family: 'Montserrat';
}
.hero-left button{
  padding: 15px 30px;
  background-color: black;
  color: white;
  font-size: 18px;
  border: none;
  border-radius: 30px;
  margin:50px 10px;
  cursor: pointer;
  transition: all .2s linear;
  box-shadow: 5px 5px 15px gray;
}
.hero-left button:active{
  background-color: rgb(240, 240, 240);
  color: black;

}
.fe-products {
  scroll-margin-top: 80px; /* Adjust this value to match your header height */
}
.product-deal{
  width: 100%;
  text-align: center;
  background-color: black;
  color: white;
  font-weight: bold;
  padding: 20px 0px;
  letter-spacing: 5px;
}
.product-deal span{
  color: gray;
}
.heading-container{
  width: auto;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.product-heading{
  text-align: center;
  padding: 0px 0px;
  font-size: 44px;
  margin-top: 30px;
  margin-bottom: 30px;
  display: inline-block;
}
.products-grid {
  display: grid;
  place-items: center;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
  justify-content: start; /* Aligns items to the left when there are few */
  padding: 10px 60px;
  column-gap: 20px;
  row-gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}
.dis-container-display{
  display: none;
}
.products{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background-color: #fff;
  border: 1px solid gray;
  transition: box-shadow .25s ease;
  cursor: pointer;
  padding: 10px;
  height: auto;
  position: relative; 
}
/* Color Variation Styles */
.product-variations {
    display: flex;
    gap: 8px;
    margin: 10px 0;
    justify-content: flex-start;
}

.variation-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid black;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.variation-dot:hover {
    transform: scale(1.2);
    border-color: #000;
}
.products-top{
  height: auto;
  display: flex;
  object-fit: contain;
  justify-content: center;
  align-items: center;
  object-fit:contain;
}
.product-image{
  width: 100%;
  height: auto;
  border-radius: 5px;
}
.products:hover{
  box-shadow: 5px 5px 15px gray;
  .product-name{
    color: rgb(37, 37, 37);
    text-decoration: underline;
  }
}
.dis-container {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: red;
  width: 60px; /* Adjusted size */
  height: 30px;
  position: absolute;
  top: 0;
  left: 0;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  font-size: 12px;
  font-weight: bold;
  z-index: 10; /* Ensures it stays above the image shield */
}

.product-bottom{
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0px 10px;
  font-family: arial;
  position: relative;
}
.price-button-container{
  margin-top: 10px;
  border: 1px solid gray;
  width: 100%;
  border-radius: 50px;
  padding: 2px 20px;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.product-bottom i{
  font-size: 28px;
  color: black;
}
.product-bottom button{
  cursor: pointer;
  position: absolute;
  bottom: 5px;
  right: 5px;
  background-color: #fff;
  padding: 10px;
  border: 1px solid black;
  border-radius: 50px;
  transition: box-shadow .1s linear;
}
.product-bottom button:hover{
  box-shadow: 3px 3px 7px gray;
}
.product-name-container{
  height: auto;
  width: 100%;

}
.product-name{
  margin-top: 10px;
  font-size: 16px;
  transition: all .1s ease;
  line-height: 25px;
  margin-bottom:0px;
}
.product-name:active{
  color: gray;
}

/* Wrapper for the two price lines */
.price-stack {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  line-height: 1.2;
}

/* The Old Price (Crossed Out) */
.discount-price {
  margin: 0;
  color: red; /* Gray looks better for old prices than red usually */
  text-decoration: line-through;
  font-size: 13px;
}

/* The New Calculated Price */
.product-price {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: black; /* Keep the main price red or black as preferred */
}

.button-container{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px 0px;
}
.see-button{
  padding: 15px 40px;
  font-size: 18px;
  border: none;
  border-radius: 50px;
  background-color: black;
  color: white;
  cursor: pointer;
  box-shadow: 10px 10px 50px black;
  transition: box-shadow .2s linear;
}
.see-button:hover{
  box-shadow: 7px 7px 20px black;
}

/* --- Optimized Carousel & Scrollbar --- */
.carousel-wrapper {
  margin-top: 70px;
  position: relative;
  width: 100%;
  overflow: hidden; /* This acts as the window */
}

.slider-container {
    width: 100%;
    overflow-x: auto; /* Re-enabled manual scrolling */
    display: flex;
    padding-bottom: 25px;
    scroll-behavior: smooth; /* Handles the smooth 'Move' animation */
    -webkit-overflow-scrolling: touch; /* Momentum scroll for mobile */
    will-change: scroll-position; /* Optimizes for scrolling performance */
    
    /* Luxury Scrollbar Styling */
    scrollbar-width: thin;
    scrollbar-color: #000000 #e0e0e0;
}

/* Chrome/Safari/Edge Scrollbar Design */
.slider-container::-webkit-scrollbar {
    height: 8px;
}
.slider-container::-webkit-scrollbar-track {
    background: #e0e0e0;
    border-radius: 10px;
    margin: 0 50px;
}
.slider-container::-webkit-scrollbar-thumb {
    background: #000000;
    border-radius: 10px;
    border: 2px solid #e0e0e0;
}

.slider-track {
    display: flex;
    width: 100%;
}

.slide {
    flex: 0 0 33.333%; /* Shows 3 items at a time */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    cursor: pointer;
}

.slide img {
    width: 85%;
    max-width: 260px;
    height: auto;
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: 1px solid #ddd;
    object-fit: cover;
    background: white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.4s ease; /* Transition for hover effect */
}

.slide:hover img {
    transform: scale(1.05); /* Smooth hover zoom */
}

/* Custom Scrollbar (kept for visual consistency if needed) */
.slider-container::-webkit-scrollbar { height: 8px; }
.slider-container::-webkit-scrollbar-track { background: #e0e0e0; border-radius: 10px; margin: 0 50px; }
.slider-container::-webkit-scrollbar-thumb { background: #000; border-radius: 10px; }
/* Remove the active scaling class logic since we show 3 equal items */
.slide.active {
  transform: scale(1);
  opacity: 1;
}
/* Buttons */
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  border: 1px solid black;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 20;
}
.prev-btn { left: 20px; }
.next-btn { right: 20px; }

/* =========================
   REVIEWS SECTION STYLES
========================== */

/* --- Scrollable Review Section --- */
.reviews-section {
    padding: 40px 20px;
    background-color: #fff;
    max-width: 1200px;
    margin: 0 auto;
    border-top: 2px solid gray;
    background-color: rgb(240, 240, 240);
}

.reviews-grid-container {
    display: flex; /* Changed from grid to flex for horizontal scrolling */
    gap: 20px;
    overflow-x: auto; /* Enables manual scrolling */
    padding: 20px 10px;
    scroll-snap-type: x mandatory; /* Makes cards snap into place */
    scroll-behavior: smooth;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #000 #e0e0e0;
}

/* Custom Scrollbar for Chrome/Safari */
.reviews-grid-container::-webkit-scrollbar {
    height: 6px;
}
.reviews-grid-container::-webkit-scrollbar-track {
    background: #e0e0e0;
    border-radius: 10px;
}
.reviews-grid-container::-webkit-scrollbar-thumb {
    background: #000;
    border-radius: 10px;
}

.review-card {
    flex: 0 0 300px; /* Fixed width so they don't shrink */
    scroll-snap-align: start; /* Snap point */
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-bottom: 80px;
}
/* =========================================
   ANTI-COPY PROTECTION (OVERLAY & SELECTION)
   ========================================= */

/* 1. Prevent text selection on all product cards, sliders, and details */
.products, 
.prodetails, 
.slide,
.carousel-wrapper {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}

/* 2. Prevent images from being dragged to the desktop */
.product-image, 
.main-img, 
.small-img-col img, 
.slide img {
    -webkit-user-drag: none; 
    -khtml-user-drag: none; 
    -moz-user-drag: none; 
    -o-user-drag: none; 
}

/* 3. Invisible Transparent Overlay over Grid & Slider Images */
.products-top, 
.slide {
    position: relative;
}

/* Creates a transparent shield over the image to block "Save Image As" */
.products-top::after, 
.slide::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 5;
    background: transparent; 
}

/* 4. IMPORTANT: Keep Buttons Clickable Above the Protection */
.button-container, 
.product-bottom button, 
.nav-btn, 
.see-button,
.small-img-col,
.qty-btn {
    position: relative;
    z-index: 20; 
    /* Ensures buttons and galleries can still be clicked! */
}