/* ================================
   BESTSELLER / CAROUSEL SECTION
   ================================ */

.bestseller-container{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  max-width:1200px;
  margin:40px auto;
  padding:0 45px;                  /* desktop gutter */
  color:#333;
  overflow:visible;                 /* <-- FIX: jangan hidden agar huruf kiri tidak kepotong */
}

/* HEADER (judul + panah) */
.bestseller-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:20px;

  /* full-bleed agar sejajar dengan kartu */
  width:100vw; max-width:100vw;
  margin-left:calc(-50vw + 50%);
  box-sizing:border-box;
  padding-left:45px;                /* harus sama dengan gutter desktop */
  padding-right:45px;

  font-size:0;                      /* matikan lebar text-node/whitespace */
}
.bestseller-header > *{ font-size:initial; }

.bestseller-header h3{
  font-size:28px;
  font-weight:500;
  color:#FF6900;
  margin:0;
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.bestseller-nav{ display:inline-flex; gap:8px; margin-left:auto; }
.bestseller-nav .nav-arrow{
  background:#fff; border:1px solid #e0e0e0; border-radius:50%;
  width:40px; height:40px; font-size:16px; color:#555; cursor:pointer;
  transition:background-color .3s,color .3s;
}
.bestseller-nav .nav-arrow:hover{ background:#f5f5f5; color:#000; }

/* GRID WRAPPER (ikut full-bleed & padding sama seperti header) */
.bestseller-grid-wrapper{
  position:relative;
  width:100vw; max-width:100vw;
  margin-left:calc(-50vw + 50%);
  box-sizing:border-box;
  padding-left:45px;
  padding-right:45px;
}

/* GRID */
.bestseller-grid{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  gap:20px;
  padding:0 0 20px 0;               /* tidak ada padding kiri tambahan */
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.bestseller-grid::-webkit-scrollbar{ display:none; }

/* CARD */
.product-card{
  flex:0 0 300px;
  scroll-snap-align:start;
  border:1px solid #f0f0f0;
  background:#fff;
  border-radius:8px;
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:box-shadow .3s, transform .3s;
}
.product-card:hover{ box-shadow:0 8px 20px rgba(0,0,0,.1); transform:translateY(-5px); }

.product-link{ text-decoration:none; color:inherit; display:flex; flex-direction:column; flex-grow:1; }

.product-image-wrapper{ width:100%; height:250px; overflow:hidden; }
.product-card img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.product-card:hover img{ transform:scale(1.05); }

.product-details{ padding:20px; flex-grow:1; }
.product-details h4{ margin:0 0 8px 0; font-size:20px; font-weight:600; }
.product-details .price{ margin:0 0 8px 0; font-size:18px; color:#555; font-weight:500; }
.product-details .description{ margin:0; font-size:15px; color:#777; }

.btn-detail{
  display:block; width:calc(100% - 40px);
  margin:0 20px 20px; padding:12px;
  background:#384d48; color:#fff; text-align:center;
  text-decoration:none; border-radius:6px; font-weight:600;
}
.btn-detail:hover{ background:#2c3c38; }

/* ================================
   MOBILE (≤768px)
   ================================ */
@media(max-width:768px){
  .bestseller-container{ padding:0 15px; }

  .bestseller-header,
  .bestseller-grid-wrapper{
    width:100vw; max-width:100vw;
    margin-left:calc(-50vw + 50%);
    /* gunakan safe-area bila ada notch; 16px fallback supaya tidak mepet */
    padding-left:max(16px, env(safe-area-inset-left));
    padding-right:max(16px, env(safe-area-inset-right));
  }

  .bestseller-header{ margin-bottom:16px; }
  .bestseller-header h3{ font-size:22px; }

  .bestseller-nav .nav-arrow{ width:36px; height:36px; font-size:14px; }

  .product-card{ flex-basis:250px; }
}

/* (OPSIONAL) Jika di beberapa device masih terlihat makan 1px di kiri,
   tambahkan sedikit kompensasi sub-pixel:
   .bestseller-header,
   .bestseller-grid-wrapper{ margin-left:calc(-50vw + 50% + 1px); }
*/