/* ===== Selected Products (Best Sellers look) ===== */

.hp-sp-card{
  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;
  border-radius:18px;

  /* hover readiness */
  transition: transform .4s ease, box-shadow .4s ease, background .4s ease;
}

.hp-sp-card:hover{
  background:#fff;
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* left column */
.hp-sp-pad{ padding:18px 18px 10px; }

.hp-sp-title{
  margin:0 0 1px;
  font-size:56px;
  font-weight:100;
  transition: transform .35s ease;
}

.hp-sp-sub{
  margin:0;
  line-height:1.55;
  transition: transform .35s ease, opacity .35s ease;
}

.hp-sp-card:hover .hp-sp-title{ transform: translateY(-2px); }
.hp-sp-card:hover .hp-sp-sub{ transform: translateY(2px);  }

/* controls */
.hp-controls{
  display:flex;
  gap:8px;
  justify-content:flex-start;
  margin-top:10px;
}

.hp-controls button,
.hp-controls a{
  transition: transform .25s ease, opacity .25s ease;
}

.hp-controls button:hover,
.hp-controls a:hover{
  transform: translateY(-2px);
  opacity:.85;
}

/* "More" link spacing like screenshot */
.hp-sp-more{ margin-top:14px; }

/* right column slider area */
.hp-sp-slider{
  padding:18px 18px 56px 0;
  overflow:hidden;
  position:relative;
}

.hp-sp-slider::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent, rgba(0,0,0,.04), transparent);
  opacity:0;
  transition: opacity .4s ease;
  pointer-events:none;
}

.hp-sp-card:hover .hp-sp-slider::before{ opacity:1; }

/* Minimal View button */
.hp-view-btn{
  position:relative;
  background:transparent;
  border:1px solid rgba(0,0,0,.15);
  color:#111;
  padding:10px 18px;
  border-radius:999px;
  font-size:14px;
  font-weight:500;
  letter-spacing:.3px;
  cursor:pointer;

  display:inline-flex;
  align-items:center;
  gap:8px;

  transition:
    border-color .25s ease,
    background .25s ease,
    color .25s ease,
    transform .25s ease;
}

.hp-view-btn::after{
  content:"→";
  font-size:14px;
  transition: transform .25s ease;
}

.hp-view-btn:hover{
  background:#111;
  color:#fff;
  border-color:#111;
  transform: translateY(-1px);
}

.hp-view-btn:hover::after{ transform: translateX(4px); }

.hp-view-btn:focus-visible{
  outline:3px solid rgba(0,0,0,.25);
  outline-offset:3px;
}

/* responsive stacking */
@media (max-width:900px){
  .hp-sp-card{
    grid-template-columns:1fr;
    padding:18px;
  }
  .hp-sp-slider{ padding:0 18px 56px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .hp-sp-card,
  .hp-sp-title,
  .hp-sp-sub,
  .hp-view-btn,
  .hp-view-btn::after,
  .hp-sp-slider::before{
    transition:none !important;
  }
}