/* ===== Best Sellers layout ===== */

h2.hp-bs-title {
      margin: 0 0 1px;
    font-size: 56px;
    font-weight: 100;
}

.hp-bs-card{
    /* margin-top: 46px; */
    /* border-radius: 18px; */
    overflow: hidden;
    background: #f9f9f9;
    display: grid;
    grid-template-columns: clamp(280px, 32vw, 520px) 1fr;
    column-gap: clamp(16px, 3vw, 48px);
    align-items: start;
    padding: 3em;
}

/* keep your inner padding on the left */
.hp-bs-pad{
  padding:18px 18px 10px;
}

/* slider column gets its own padding (small + consistent) */
.hp-bs-slider{
  padding: 18px 18px 56px 0; /* bottom like your design */
  overflow:hidden;          /* usually needed for sliders */
}

/* Responsive: stack on smaller screens */
@media (max-width: 900px){
  .hp-bs-card{
    grid-template-columns: 1fr;
  }

  .hp-bs-slider{
    padding: 0 18px 56px; /* put normal horizontal padding back */
  }
}