/* ===============================
   SHOE IMAGE STAGE (INNER BACKGROUND)
=============================== */
/*  
Too change the color in the background of the shoe images stage change the background color below 
headerstart.css and viewFeaturedShoes.css files, aboutPictures.css
 file if used there also
load that colour us change here text to find bottom it easily  load-more-btn color 
=================================
*/

/* ===============================
   FORCE H1 & H2 VISIBILITY
================================ */
h1, h2 {
  display: block !important;
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;
  /* z-index: 1 !important; */
  color: #4f7cff !important;     /* Bright blue color for visibility general the h2*/
  /* margin: 10rem 0 !important; */
  letter-spacing: -0.02em;
  margin: 3rem 0 2rem;
  text-transform: none;
  font-family: 'Inter', 'Poppins', system-ui, sans-serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
}
.shoe-card h3 {
    font-size: 1rem;        /* 👈 larger font size down */            
    margin-top: -10px;                 /* moves text closer to image and text big or small  */
    padding: 0.5rem 0;                 /* adds space above and below text */
  }

h3 {
  color: #000 !important; /* Black color for h3 */
  text-align: center; /* Center the text */
  font-family: 'Inter', 'Poppins', system-ui, sans-serif;
}

.section-shoes h1 {
  text-align: center;
  color: #000 !important;

}

/* ===============================
   FEATURED SHOES CONTAINER
================================ */
.featured-shoes-container {
  display: flex; /* Use flex layout */
  justify-content: center; /* Center items horizontally */
  flex-wrap: wrap; /* Allow items to wrap onto the next row */
  margin-bottom: 1.5rem; /* Add bottom margin */
  align-items: stretch;   /* 👈 ADD THIS */
  gap: 20px;              /* 👈 better than margins */
}


/* ===============================
   SHOE CARD
================================ */
.shoe-card {
    align-items: center; /* Center align items */
    background-color: #fff; /* Set background color */
    background: #ffffff;
    border-radius: 10px; /* Add rounded corners */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* Add a box shadow */
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    margin: 0 10px; /* Add margin to left and right */
    padding: 1rem; /* Add padding */
    width: 300px; /* Set width */
    text-align: center; /* Center align text */
    display: flex;               /* 👈 ADD */
    flex-direction: column;      /* 👈 ADD */
    position: relative;   /* 👈 REQUIRED */
}

/* ===============================
   SHOE IMAGE
================================ */
.shoe-card img {
  max-width: 100%; /* Set maximum width */
  display: block;          /* 👈 IMPORTANT */
  margin: auto;          /* 👈 centers horizontally */
  height: auto; /* Set height to auto */
  object-fit: cover; /* Fit image content within the container */
  border-radius: 5px; /* Add rounded corners */
  height: 180px;               /* 👈 FIXED HEIGHT */
  object-fit: contain;         /* 👈 keeps proportions */
  /* width: 100%; */

}

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

.shoe-card img {
  width: 100%;
  height: 180px;
  object-fit: contain; /* IMPORTANT for shoes */
  cursor: zoom-in;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.shoe-card:hover img {
  transform: scale(1.05);
  filter: drop-shadow(0 20px 30px rgba(9, 8, 8, 0.25));
}

/* ===============================
   SHOE INFO
================================ */
/* .shoe-info {
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.shoe-info h3 {
  font-size: 1.25rem;
  font-weight: bold;
  min-height: 48px;
  margin-bottom: 0.5rem;
}

.shoe-info p {
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
} */

/* ===============================
   TITLE
================================ */

#featured-shoes {
  display: flex;
  justify-content: center; /* 👈 centers cards as a group */
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 5rem;     /* 👈 creates space below the text */
  position: relative;
  z-index: 1;
}

.featured-shoes-title {
  font-size: 2.5rem; /* Set font size */
  font-weight: bold; /* Set font weight to bold */
  text-align: center; /* Center align text */
  margin-bottom: 1rem; /* Add bottom margin */
  margin-top: 1rem; /* Add top margin */
  color: rgba(0, 0, 0, 0.8); /* Set text color */
     /* New Below*/
  margin: 0 0 1.5rem 0;  /* tight spacing */
  /* font-size: 2.2rem; */
  font-family: 'Inter', 'Poppins', system-ui, sans-serif;
  font-size: clamp(2.1rem, 4vw, 3.5rem);
  font-weight: 200;
  line-height: 1.05;
  text-shadow: 0 8px 25px rgba(23, 62, 110, 0.25);
}

/* ===============================
   IMAGE OVERLAY
================================ */
.featured-shoes-overlay {
   position: fixed;
  inset: 0;

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

  z-index: 1000;
  cursor: zoom-out;

  
}

.featured-shoes-overlay img {
  width: min(500vw, 1000px);   /* 👈 BIG like bike */
  height: auto;
  

  background: #5a5959;
  padding: 32px;
  border-radius: 16px;

  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  animation: zoomIn 0.3s ease-out;
}
@keyframes zoomIn {
  from {
    transform: scale(0.92);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Add hover effect for shoe cards */
.shoe-card:hover {
    cursor: pointer; /* Change cursor to pointer on hover */
}

/* Add hover effect for shoe card images */
.shoe-card:hover img {
    transform: scale(1.1); /* Scale up image on hover */
    transition: transform 0.3s ease-in-out 0s; /* Add transition effect */
}


.shoe-image-stage {
  background: #f6f6f6;          /* light neutral stage */
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;

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

.shoe-image-stage img {
  width: 100%;
  height: 170px;
  object-fit: contain;

  background: transparent;

  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.18));
  transition: transform 0.3s ease;
}


#featured-shoes-section {
  padding-top: 2.5rem;   /* ↓ reduces top space */
  padding-bottom: 2rem;
  background: #000000; /* keep your gray section IMAGES BACKGROUND b1a8a8 Colur for that secction #393737 */
  padding: 3rem 2rem;          /* vertical breathing room */
  margin: 4rem auto;        /* white space above & below */
  max-width: 1450px;        /* keeps it elegant */
  border-radius: 10px;
}

.shoes-container {
  padding-top: 20px;
}

/* ===============================
   MOBILE GRID – 2 SHOES PER ROW view on small screens media queries
================================ */
@media (max-width: 768px) {

  /* Switch to grid */
  .featured-shoes-container,
  #featured-shoes {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Remove fixed width */
  .shoe-card {
    width: 100% !important;
    margin: 0 !important;
    padding: 0.75rem;
    border-radius: 12px;
  }

  /* Image sizing */
  .shoe-card img {
    height: 140px;
    object-fit: contain;
  }

  /* Title smaller */
  .shoe-card h3 {
    font-size: 0.85rem;
    margin-top: -20px;
  }

  /* Section padding tighter */
  #featured-shoes-section {
    padding: 2rem 1rem;
  }
}


/* ===============================
   Overlay for image for mobile
================================ */
@media (max-width: 768px) {

  .featured-shoes-overlay {
    padding: 12px;
    align-items: center;
  }

  .featured-shoes-overlay img {
    max-width: 92vw;      /* 👈 full width */
    max-height: 70vh;     /* 👈 prevents vertical crop */

    background: rgba(255, 255, 255, 0.945);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);


    width: auto;
    height: auto;

    object-fit: contain; /* 👈 FULL shoe always visible */

    padding: 12px;       /* 👈 less padding on mobile */
    border-radius: 14px;
  }
}

.featured-shoes-overlay img {                      /* MOBILE OVERRIDE to see full shoe in the screen */
    max-width: 92vw;      /* 👈 full width */
    max-height: 70vh;     /* 👈 prevents vertical crop */
    background: rgba(255, 255, 255, 0.945);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);


    width: auto;
    height: auto;

    object-fit: contain; /* 👈 FULL shoe always visible */

    padding: 12px;       /* 👈 less padding on mobile */
    border-radius: 14px;
}

/* ===============================
    NOT DELETED FILES upto here
================================ */


/* ===============================
   map STYLES
================================ */

/* MAP MODAL OVERLAY */
/* MAP MODAL OVERLAY */
.map-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9999;
}

/* MAP MODAL CONTENT (FULL SCREEN) */
.map-modal-content {
    position: fixed;
    inset: 5%;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* HEADER */
.map-modal-header {
    background: #2c2c2c;
    color: #fff;
    padding: 12px 16px;
    font-size: 1.1rem;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* CLOSE BUTTON */
.map-close {
    font-size: 24px;
    cursor: pointer;
}

/* MAP AREA */
.map-container {
    flex: 1;
    width: 100%;
}

/* SHOW MODAL */
.map-modal.show {
    display: block;
}

/* =============================== */


/* ===============================
   LOAD MORE BUTTON
================================ */
/* 

/* LOAD MORE WRAPPER */
.load-more-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
  gap: 14px;
}

/* LOAD MORE BUTTON */
.load-more-btn {
  padding: 3px 12px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.25s ease;
  color: #fff !important;               /* White color for product description */
}

.load-more-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* LOADER */
.shoes-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
}

/* GIF STYLE */
.shoes-loader img {
  width: 64px;
  height: 64px;
  opacity: 0.9;              /* 👈 transparent feel */
  mix-blend-mode: multiply;
  opacity: 1;           /* make fully visible */
  mix-blend-mode: normal; /* reset blending can use too the mix-blend-mode: multiply or normal ;*/
  
}

/* HIDDEN STATE */
.hidden {
  display: none;
}

/* MOBILE */
@media (max-width: 768px) {
  .shoes-loader img {
    width: 42px;
    height: 42px;
  }
}



/* ===============================
   SCROLL TO TOP BUTTON
================================ */