/* ===== FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Dancing+Script:wght@400..700&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Monoton&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Outfit:wght@100..900&display=swap');

/* ===== ROOT COLORS & FONT ===== */
:root {
  --primary-font: "Montserrat", sans-serif;
  --tittle-font: "Dancing Script", cursive;
  --background: #f7efef;
  --box: #ffffff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--primary-font);
}

body {
  background: var(--background);
}

/* ===== Slider Section ===== */
.image-slider {
  width: 65%;
  margin: 64px auto 0; /* Centered */
  padding: 0;
  display: flex;
  justify-content: center;
}

.ads img {
  height: 344px;
}

.container.swiper {
  width: 100%;
  position: relative;
}

.swiper-slide img {
  width: 100%;
  object-fit: cover;
  height: 344px;
  display: block;
}

/* Small navigation arrows */
.swiper-button-prev,
.swiper-button-next {
  color: black;
  opacity: 0;
  width: 15px;
  height: 15px;
  transition: 0.3s;
}

/* Show arrows on hover/touch */
.image-slider:hover .swiper-button-prev,
.image-slider:hover .swiper-button-next {
  opacity: 1;
}

/* Pagination bullets */
.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: black;
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background: white;
}

/* ===== Top Sale ===== */
.head, .head2 {
  background: var(--box);
  width: 65%;      /* Desktop width */
  margin: 20px auto; /* Center horizontally with spacing */
  padding: 10px;
  text-align: center; /* Center text inside */
}

.head span, .head2 span {
  font-size: 24px;
  font-weight: 600;
  display: inline-block;
  margin: 0;
}

/* Top Sale Section */
.top_sale {
  width: 65%;
  margin: 0 auto;
  position: relative;
  background: var(--box);
}

.top_sale button {
  display: inline-block;
  float: right;
  margin: 10px 10px;
  padding: 8px 15px;
  background: #fff;
  color: black;
  border: 1px solid #000000;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
}

.top_sale span {
  font-size: 18px;
  font-weight: 400;
  margin: 10px 0px 10px 10px;
  display: inline-block;
}

hr {
  height: 1px;
  background-color: #7e7a7a;
  border: none;
  width: 90%;
  margin: 0px auto;
}

/* ===== Cards ===== */
.cards {
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px 5px;
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* Desktop: 6 cards per row */
}

.card {
  background: var(--box);
  width: 100%;
  height: 290px;
  text-align: center;
  transition: transform 0.3s;
  padding-bottom: 20px;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.card img {
  width: 188px;
  height: 188px;
  display: block;
  margin-bottom: 10px;
}

.card p {
  font-size: 13px;
  line-height: 1.3em;
  margin: 5px 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card span {
  font-size: 12px;
  color: gray;
  padding: 0;
  margin-top: -6px;
}
.card a{
  text-decoration: none;
  color: rgb(0, 0, 0);
}

.price span:nth-of-type(2) {
  color: #519E87;
  font-weight: 600;
  padding: 0;
}

.price span:nth-of-type(1) {
  color: #D12C62;
  font-weight: 600;
  font-size: 18px;
  padding: 0;
}

.price_2 span {
  color: #519E87;
  font-weight: 600;
  font-size: 18px;
  padding: 0;
}

.card-info {
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 12px;
  color: gray;
  margin-top: 5px;
}

.load {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}



.search {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 0 20px;
}

/* input + icon wrapper */
.search-box {
  position: relative;
  width: 100%;
  max-width: 420px;
}

/* input */
.search-box input {
  width: 100%;
  padding: 10px 45px 10px 18px; /* right padding for icon */
  border-radius: 25px;
  border: 1px solid #ddd;
  outline: none;
  font-size: 14px;
  background: #f6f6f6;
}

/* icon button */
.search-btn {
  position: absolute;
  right: 14px;          /* 🔥 input এর ভেতরে থাকবে */
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
}

.search-btn img {
  width: 18px;
  height: 18px;
  opacity: 0.7;
}

.search-btn:hover img {
  opacity: 1;
}


/* ===== Responsive ===== */
@media (max-width: 768px) {
  .image-slider {
    width: 100%;
    padding: 0;
    height: 20%;
  }

  .swiper-slide img {
    height: 200px;
  }

  .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    background: black;
    opacity: 1;
  }

  .ads img {
    display: none;
  }

  .cards {
    grid-template-columns: repeat(2, 1fr);
    padding: 20px;
  }

  .card {
    width: 100%;
  }

  .top_sale {
    width: 100%;
  }

  .head, .head2 {
    width: 100%;
    margin: 15px auto;
    padding: 8px;
  }

  .head span, .head2 span {
    font-size: 20px;
  }

  .load {
    margin-bottom: 20px;
  }
}

/* ===== IMPORTANT FOR LOAD MORE ===== */
.head2 + section .card {
  display: none;
}