/* ============================================================
   BEST SELLERS — Premium Redesign
   ============================================================ */

body{
  background:#faf9f6;
  font-family:'DM Sans', sans-serif;
}

/* ── SECTION ─────────────────────────────────────────────── */
.best-seller-section{
  padding:52px 0 56px;
  position:relative;
  background:url('../images/background/backgorund.jpeg') center/cover no-repeat;
}
.best-seller-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(250,249,246,0.55);
  pointer-events:none;
}

/* ── HEADER ──────────────────────────────────────────────── */
.bs-header{
  width:92%;
  margin:0 auto 28px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  position:relative;
  z-index:1;
}

/* ── SECTION TITLE — clean serif, no pill ────────────────── */
.bs-title-btn{
  font-family:'Cormorant Garamond', serif;
  font-size:36px;
  font-weight:700;
  color:#1a2e1e;
  letter-spacing:1px;
  line-height:1;
  margin:0;
  position:relative;
  padding-bottom:10px;
  display:inline-block;
  background:none;
  border-radius:0;
}
.bs-title-btn::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:48px;
  height:2.5px;
  background:linear-gradient(90deg,#c9a84c,#f5d06f);
  border-radius:2px;
}

/* ── VIEW ALL — premium outline ──────────────────────────── */
.view-all{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 22px;
  border:1.5px solid #1a2e1e;
  border-radius:50px;
  color:#1a2e1e;
  font-size:12px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  text-decoration:none;
  background:transparent;
  transition:background 0.25s, color 0.25s, border-color 0.25s;
  white-space:nowrap;
  margin-bottom:4px;
}
.view-all::after{ content:"→"; font-size:13px; }
.view-all:hover{
  background:#1a2e1e;
  color:#fff;
}

/* ── SLIDER ──────────────────────────────────────────────── */
.bs-slider{
  position:relative;
  width:92%;
  margin:auto;
  overflow:hidden;
  z-index:1;
}
.bs-track{
  display:flex;
  gap:18px;
  overflow-x:auto;
  scroll-behavior:smooth;
  padding:4px 2px 8px;
}
.bs-track::-webkit-scrollbar{ display:none; }

/* ── CARD ────────────────────────────────────────────────── */
.bs-card{
  min-width:240px;
  max-width:240px;
  background:#fff;
  border-radius:16px;
  padding:16px;
  position:relative;
  display:flex;
  flex-direction:column;
  border:1px solid #ede8e0;
  box-shadow:0 4px 20px rgba(0,0,0,0.06);
  transition:transform 0.28s ease, box-shadow 0.28s ease;
}
.bs-card:hover{
  transform:translateY(-5px);
  box-shadow:0 14px 36px rgba(0,0,0,0.12);
}

/* ── IMAGE ───────────────────────────────────────────────── */
.bs-card img{
  width:100%;
  height:180px;
  object-fit:contain;
  border-radius:10px;
}

/* ── TAG ─────────────────────────────────────────────────── */
.tag{
  position:absolute;
  top:12px;
  left:12px;
  padding:3px 9px;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:0.5px;
  border-radius:50px;
  color:#fff;
  text-transform:uppercase;
}
.tag.red{ background:#e53e3e; }
.tag.green{ background:#38a169; }

/* ── CONTENT ─────────────────────────────────────────────── */
.bs-content{ flex:1; }

.bs-card h4{
  font-size:13.5px;
  font-weight:600;
  color:#1a2e1e;
  margin:10px 0 4px;
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.desc{
  font-size:11.5px;
  color:#888;
  line-height:1.55;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ── RATING ──────────────────────────────────────────────── */
.rating{
  font-size:12px;
  color:#b7791f;
  margin:6px 0;
  font-weight:500;
}

/* ── PRICE ───────────────────────────────────────────────── */
.price{
  display:flex;
  align-items:baseline;
  gap:6px;
  margin:8px 0 14px;
  font-weight:700;
  font-size:16px;
  color:#1a2e1e;
}
.price span{
  text-decoration:line-through;
  color:#bbb;
  font-size:13px;
  font-weight:400;
}
.price small{
  color:#c05621;
  font-size:11.5px;
  font-weight:700;
}

/* ── BUY NOW BUTTON — premium dark ──────────────────────── */
.bs-card a{
  display:block;
  margin-top:auto;
  text-decoration:none;
}
.bs-card button{
  width:100%;
  padding:11px 0;
  background:#1a2e1e;
  color:#fff;
  border:none;
  border-radius:10px;
  font-family:'DM Sans', sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.6px;
  cursor:pointer;
  transition:background 0.25s, transform 0.18s;
  position:relative;
  overflow:hidden;
}
.bs-card button::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(201,168,76,0.18),transparent);
  pointer-events:none;
}
.bs-card button:hover{
  background:#216238;
  transform:translateY(-1px);
}

/* ── ARROWS ──────────────────────────────────────────────── */
.bs-prev, .bs-next{
  position:absolute;
  top:44%;
  transform:translateY(-50%);
  width:38px;
  height:38px;
  border-radius:50%;
  background:#fff;
  border:1.5px solid #e8e2d8;
  color:#1a2e1e;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 3px 14px rgba(0,0,0,0.10);
  transition:background 0.22s, color 0.22s, border-color 0.22s;
  z-index:10;
}
.bs-prev{ left:-6px; padding-right:2px; }
.bs-next{ right:-6px; padding-left:2px; }
.bs-prev:hover, .bs-next:hover{
  background:#1a2e1e;
  color:#fff;
  border-color:#1a2e1e;
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:768px){
  .bs-card{ min-width:72%; max-width:72%; }
  .bs-card img{ height:150px; }
  .bs-title-btn{ font-size:28px; }
  .view-all{ font-size:11px; padding:8px 16px; }
  .bs-prev, .bs-next{ top:38%; }
}
@media(max-width:480px){
  .bs-header{ flex-direction:column; align-items:flex-start; gap:12px; }
  .bs-card{ min-width:78%; max-width:78%; }
  .bs-title-btn{ font-size:26px; }
}