/* General Reset */
* {
  margin: 0;
  padding: 0;
   box-sizing: border-box;
   scrollbar-width: none; /* Hide scrollbar for Firefox */

}

body { 
  display: block;
  margin: 0;
background:  #e9ebed;
 transition: background 0.4s ease;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: .875rem;
}
.btn1,.btn2,.btn3 {  padding: 5px; border-radius: 3px;}
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
   border:2px solid #1260cc;
  align-items: center;
  width: 100%;
  padding: 6px 56px;  
  background-color: blue;
}

.container > * {
  width: 100%;
  max-width: 1184px;
  margin: 0 auto;
}


main {
  position: relative;
  flex-grow: 1;
  gap: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 84px 0 0 0;
  padding: 0 4.5em;
}

.row{
  /* margin-top: 200px; */
  width: 100%;
  max-width: 1184px;
  /* margin-bottom: 16px; */
  /* padding: 16px 0; */
/* margin:0 auto; */
} 

/* SECTION 1: Three Columns */
.three-columns {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.column-left {
  width: 100%;
  max-width: 206px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 5px;
  height: 384px;
  box-sizing: border-box;
}
.inner-left {
  position: relative;
  padding: 0px 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 13px;
font-weight: 450;
  color: #313133;
  cursor: pointer;
}

.inner-left .itm {
  display: flex;
  text-align: center;

  font-size: inherit;
}

.inner-left a {
  text-decoration: none;
  color: inherit;
  margin-left: -8px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.inner-left svg {
  width: 20px;
  height: 20px;
}

.column-center {
  flex: 1;
  background-color: #ccc;
  border-radius: 5px;
  position: relative;
  max-width: 712px;
  width: 712px;
  border-radius: 5px;
  height: 384px;
  overflow: hidden;
}

.slides-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease;
}

.slide {
  min-width: 100%;
  height: 100%;
  flex-shrink: 0;
  position: relative;
}

#radioContainer {
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;
}

.column-right {
  width: 100%;
  max-width:218px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  border-radius: 5px;
  height: 384px;
  box-sizing: border-box;
}
.box {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: start;
  align-content: center;
  border-radius: 5px;
  background: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 16px;
  height: 184px;
  color: black;
}
.box a {
  display: flex;
  justify-content:center;
  align-items: center;
  align-content: start !important;
  margin-bottom: 10px;
  margin-left:16px;
  color: black;
  gap: 8px;
  text-align: left;
  text-decoration: none;
 
}

.box a .SeeAll {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  white-space: nowrap;
  text-align: start;
}

.box img {
  width: 34px;
  height: 34px;
  margin-left: -16px;
}

.low-right{
  display: flex;
  flex: column;
  flex-wrap: wrap;
  justify-content: center;
  background: #1260cc;
  color: white;
  font-weight: bolder;
  font-size: 2.5em;
  padding: 8px 0;
  text-align: center;
  height: 47.91666667% ;
  border-radius: 5px;
  }  */
.flash-sales {
  width: 100%;
  height: 357.32px;
  display: flex;
  flex-direction: column;
  margin:0 auto;
  background-color:#fff;
}
.flash-header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  height:50px;
  padding: 10px 15px;
  background: rgb(0, 106, 255);
  /* border-top-right-radius: 5px; */
  /* margin: 0 auto; */
}

.flash-header span{
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
}
 .flash-row{
  display: flex;
  overflow-x:scroll;
  scroll-snap-type: x mandatory;
  gap: 5px;
  flex: 0 0 auto;
  width: 100%;
  height: 350.32px;
  margin:0 auto;
  padding:4px;
}

.item{
  display: flex;
  gap: 8px;
  width: 1168px;
  /* height: 351.32px; */
}

.flash-card {
  width: 185.33px; 
  height: 303.32px;
  flex: 0 0 auto;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .05);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  scroll-behavior: smooth;
  /* padding: 8px; */
}
.discount-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #1260cc;
  color: #e9ebed;
  font-size: 13px;
  font-weight: bold;
  padding: 3px 6px;
  border-radius: 4px;
}

.flash-card a {
  text-decoration: none;
  color: inherit;
}

.flash-card img {
  width: 100%;
  height: 185.32px;
  /* border-radius: 4px; */
  display: block;
}

.flash-card .desc {
  font-size: 16px;
  margin:10px 0 0 10px;
  white-space: nowrap;
}

.flash-card .price {
  font-weight: normal;
  font-size: 16px;
  margin-left: 10px;
}

.flash-card .old-price {
  font-weight: normal;
  font-size: 12px;
  text-decoration: line-through;
  color: #888;
  margin-left: 2px;
}

.flash-card .remaining {
  font-size: 13px;
  color: #444;
  margin:4px 0px 0px 10px;
}

.flash-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.progressbar {
  width: 90%;
  height: 6px;
  background-color: #eee;
  border-radius: 4px;
  overflow: hidden;
  margin:4px 6px 0 6px ;
 
}

.progressbar .progress {
  height: 100%;
  background-color: blue;
  border-radius: 4px;
}
/* 
.flash-row::-webkit-scrollbar {
  display: none;
} */
/* SECTION 3: Product Grid */
.product-grid-section {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1184px;
  height: 500px;
  background-color:white;
  border-radius: 5px;
  margin:0 auto;
  margin-bottom: 16px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 8px 8px;
} 

#productGridSection{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 1.5em;
  max-width: 1184px;
  background-color:white;
  border-radius: 5px;
  margin-bottom: 16px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 8px 8px;
}
.product-grid {
  width: 100%;
  max-width: 1168px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* padding: 8px; */
}

.product-grid2 {
  width: 15%;
  max-width: 1168px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* padding: 8px; */
}
.product-card2 {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 185.33px; 
  gap: 1em; 
  height: 265.32px;
  border-radius: 5px;
   cursor: pointer;
  overflow: hidden;
  box-shadow: 0 0px 3px rgba(9, 110, 242, 0.5);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  } 
.product-card {
  display: flex;
  flex: 0 0 auto;
  width: 185.33px; 
  height: 265.32px;
  border-radius: 5px;
  border: 3px solid gold;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  } 

.product-card img {
  width: 100%;
  height: 95%;
  display: block;
  border-radius: 5px;

}
.product-card2 img {
  width: 100%;
  height: 85%;
  display: block;
  border-radius: 5px;

}
.product-caption {
  padding: 8px;
  font-size: 14px;
}


.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.product-card2:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.Top-section{
  position: relative;
  display: flex;
  width: 100%;
  height: 345.33px;
  max-width: 1184px;
  padding: 0;
  background-color:white;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-radius: 5px;
  /* margin-bottom: 4px; */
  overflow: hidden;
  box-sizing: border-box;
}

.Top-sales {
  width: 100%;
  display: flex;
  flex-direction: column;
  /* margin:0 auto; */
  background-color:#fff;
}

.Top-header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  height: 48px;
  padding: 10px 15px;
  background: #0e68e7;
  color: white;
  /* border-radius: 5px; */
  margin: 0 auto;
}

.Top-header span{
  font-size: 20px;
  display: flex;
  align-items: center;
  font-weight: 500;
  gap: 8px;
}

.Top-row{
 display: flex;
  overflow-x:scroll;
  /* scroll-snap-type: x mandatory; */
  gap: 5px;
  align-items: center;
  flex: 0 0 auto;
  height: 100%;
  width: 100%;
  margin:0 auto;
  padding:4px 8px;
}
.items{
  display: flex;
  gap: 8px;
  /* padding: 4px; */
  width: 1168px;
  /* height: 351.32px; */
}
.Top-card {
  width: 187.9px;
  /* ~5 cards per row at 1200px width */
  height: 100%;
  flex: 0 0 auto;
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  position: relative;
  transition: transform 0.4s ease, box-shadow 0.3s ease;
  /* scroll-snap-align: start; */
  /* padding: 4px; */
}

.Top-card a {
  text-decoration: none;
  color: inherit;
}
 
.Top-card .desc {
  font-size: 16px;
  margin:0 10px;
    text-overflow: ellipsis;
  white-space: nowrap;
}
.Top-card .remaining {
  font-size: 13px;
  color: #444;
  margin: 10px 0;
}


.Advertisement-section {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 1184px;
  padding: auto;
  background-color:white;
  border-radius: 5px;
  overflow: hidden;
  box-sizing: border-box;
  /* padding:4px; */
}
.Advertisement-card {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
  border-radius: 5px;
}
.Advertisement-card a {
  text-decoration: none;
  color: inherit;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Advertisement-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
} 
.text{
  color: #291f1f; 
  font-size:12px;
  padding:8px 0;
  font-weight: light;
}
.text a {
  color: #3e3c3c24;
  text-decoration: underline;
  font-weight: bold;
} 
/* Product Cards */
.product {
  border: 1px solid #e4e3e3;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s;
  padding: 7px;
  width: 100%;
  border-radius: 8px;
  background: #ffffff;
  position: relative;
  display: flex;
  flex-direction: column;
  /* Stack items vertically */
  height: 100%;
}

.product img {
  width: 100%;
  height: 193px;
  /* Fixed image height */
  object-fit: cover;
  /*ob Prevent stretch/cut */
  border-radius: 6px;
}

.product h3 {
  font-weight: 450;
  font-size: 14px;
  margin: 5px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.price-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.old-price {
  text-decoration: line-through;
  color: rgb(77, 75, 75);
  font-size: 12px;
}

.new-price {
  font-size: 15px;
  font-weight: bold;
  color: #111;
}
.Top-row-static {
  display: flex;
  overflow-x: auto;
  /* height: 100%; */
  background-color: #fff;
  width: 100%;
  max-width: 1184px;
  /* margin-bottom: 16px; */
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  align-items: center;
  gap: 8px;
  /* More space between cards */
  padding: 3px;
  scroll-behavior: smooth;
  /* Smooth scrolling */
}
.Top-row-static img {
  height: 100%;
  width: 100%;
  margin-bottom: 0px;
  object-fit: cover;
}
.Top-row-gif {
  display: flex;
  overflow-x: auto;
  /* height: 100%; */
height: 60px;
  width: 100%;
  max-width: 1184px;
  /* margin-bottom: 16px; */
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  align-items: center;
  gap: 8px;
  /* More space between cards */
  /* padding: 3px; */
  scroll-behavior: smooth;
  /* Smooth scrolling */
}
.Top-row-gif img {
  height: 100%;
  width: 100%;
  margin-bottom: 0px;
  object-fit: cover;
}
 /* Product Information  */
 .info-container {
  background: #fff;
  padding: 30px;
  max-width: 1184px;
  margin-bottom: 40px;
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.info-container h2 {
  font-size: 1.6em;
  margin-bottom: 10px;
  color: #222;
}

.info-container h3 {
  font-size: 1.3em;
  margin-top: 20px;
  color: #3d3d3d;
}

.info-container p {
  margin-bottom: 12px;
  color: #3d3d3d;
}

.info-container ul {
  margin: 10px 0 20px 20px;
  color: #3d3d3d;
}

.info-container ul li {
  margin-bottom: 8px;
}
/* Banner Rotation animation */
 #scrollImage {
      transition: transform 0.6s ease-in-out;
      transform: rotateY(0deg);
    }

    #scrollImage.swapping {
      transform: rotateY(180deg);
      /* flips like a card */
    }

    .slider-container {
      perspective: 1000px;
      max-width: 1184px;
      height: 170px;
      display: none;
      margin: 5.28em 0em;
      justify-content: center;
      align-items: center;
      position: relative;
    }

    .slider-container:hover .controls {
      display: flex;
      cursor: pointer;
    }

    .slider {
      width: 100%;
      height: 75%;
      position: absolute;
      display: flex;
      justify-content: center;
      transform-style: preserve-3d;
      transition: transform 1.3s;
    }

    .slideI {
      position: absolute;
      width: 474px;
      height: 100%;
      margin-bottom: 4em;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
      text-align: center;
    }

    .slideI img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 3px;
    }

    .slideI h3 {
      margin: 10px 0 5px;
      font-size: 18px;
    }

    .slideI p {
      color: #444;
      font-size: 14px;
      margin-bottom: 10px;
    }

    .slideI button {
      padding: 8px 15px;
      border: none;
      background: #1e2f97;
      color: #fff;
      border-radius: 20px;
      cursor: pointer;
    }

    .controls {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      display: flex;
      align-items: center;
      gap: 8em;
      display: none;
      justify-content: center;
      transform: translate(-25%, -25%);
      pointer-events: none;
    }

    .controls button {
      pointer-events: all;
      background: rgba(0, 0, 0, 0.5);
      border: none;
      color: #fff;
      font-size: 20px;
      border-radius: 50%;
      width: 40px;
      padding: 8px;
      height: 40px;
      cursor: pointer;
    }
    .Top-header a{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      font-weight: 500;
      color: white;
    }
    .page_label2{
      display: none;
    }



/* Initial Hidden State */
.fadeup {
  width: 100%;
  padding: 3px;
  border-radius: 14px;
  box-shadow: 0px 8px 20px rgba(0,0,0,0.1);
  opacity: 0;
  transform: translateY(20px);
  filter: blur(5px);
    border-radius: 5px;
  transition: all 0.7s ease-out;
  will-change: opacity, transform, filter;
}
.fadeup img {
  width: 100%;
  height: auto;
  border-radius: 9px;
}
/* Visible State */
.fadeup.show {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0px);
}
/* phones banner animation */
  .flip-card {
      width: 100%;
      height: 150px;
      perspective: 1000px;
      display: none;
    }

    .flip-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 1s;
      transform-style: preserve-3d;
    }

    .flip-card-front,
    .flip-card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 9px;
      overflow: hidden;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .flip-card-front img,
    .flip-card-back img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .flip-card-back {
      transform: rotateY(180deg);
    }
 #bigsizeDisp{
    display: flex;
  }
   #smallsizeDisp{
    display: none;
  }
    /* Tab sizes */
@media (max-width: 1200px) {
  main {
    padding: 0 0.7em;
      margin: 64px 0 0 0;
  }
  .page_label2 {
  background: #121313;
display: flex;
  padding: 5px;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  color: #fff;
  text-align: center;
  font-size: 1.5em;
}
 #bigsizeDisp{
    display: none;
  }
   #smallsizeDisp{
    display: flex;
  }
}
    @media (max-width:767px) {
  main{
    margin: 70px 0 0 0;
    padding: 0 0.45em;
    gap: 12px;
  } 
  body{
    background-color: #e9ebed;

  }
  .flip-card{
    display: flex;
  }
  .page_label2 {
  background: #121313;
display: flex;
  padding: 5px;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  color: #fff;
  text-align: center;
  font-size: 1.1em;
}
  .column-left,.column-right{
    display: none;
  }
  
.slider-container{
max-width: 767px;
/* display: flex; */
height: 90px;
margin: 2.3em 0em;
}
.slideI{
  width: 160px;
}
.column-center{
  height: 198px;
}
  .Top-section {
    height: auto;  
    padding-bottom: 3px;
    
  }
  
  .Top-header,
  .Top-header_helthbeauty {
    height: 37px;
    padding: 0px 12px;
  }
  .Top-header span,
  .Top-header_he lthbeauty span {
    font-size: 16px !important;          /* smaller text */
  }

  /* --- Product row --- */
  .Top-row {
    gap: 6px;
    padding: 8px 6px;
    display: flex;
    align-items: center;
    height: auto;             /* allow natural height */
  }

  /* --- Card sizing for small screens --- */
  .Top-card {
    width: 150px;     /* smaller cards like Jumia */
    flex: 0 0 150px;
    /* height: auto; */
  }

  /* --- Product container --- */
  .product {
    padding: 6px;
  }

  /* --- Product image --- */
  .product img {
    height: auto;            /* smaller fixed height */
    object-fit: cover;
    border-radius: 4px;
  }

  /* --- Product name --- */
  .product h3 {
    font-size: 12px;
    margin: 3px 0;
    white-space:no wrap;      /* allow wrapping */
    height: auto;             /* prevent layout jump */
    overflow: hidden;
  }
                                          
  /* --- Prices --- */
  .new-price {
    font-size: 13px;
  }

  .old-price {
    font-size: 11px;
  }
/* For Mid-large screen sizes */
@media (max-width:394px) {
  .column-center{
  height: 178px;
}  
}
/* Exclusive for medium screen sizes */
@media (max-width:367px) {
  .column-center{
  height: 168px;
}
}
}