/* ══ SAVED ITEMS PANEL ═══════════════════════════════════════════════════════
   Rendered by assets/js/saved.js on the checkout (add-only) and the bag
   (names link through). One stylesheet for both; the only difference between
   the two is whether .sv-name is an <a>.

   The panel is deliberately quieter than a product grid. On the checkout it
   sits below the order summary, and anything that competes with the Pay
   button for attention is working against the page it is on. Small art, one
   line of price, one control.
   ═══════════════════════════════════════════════════════════════════════════ */

.sv-panel{
  background:#fff;
  border:1px solid var(--light-gray);
  border-radius:14px;
  padding:18px 18px 8px;
  margin-top:16px;
}

.sv-head{
  font-family:var(--heading-font);
  font-size:.98rem;
  font-weight:700;
  color:var(--charcoal);
  margin:0 0 12px;
  line-height:1.3;
}
.sv-sub{
  display:block;
  font-family:var(--body-font);
  font-size:.76rem;
  font-weight:600;
  color:var(--gray);
  letter-spacing:.01em;
  margin-top:3px;
}

.sv-list{
  list-style:none;
  margin:0;
  padding:0;
  /* Long wishlists scroll inside the panel rather than pushing the page out.
     max-height is generous enough that three or four items never scroll. */
  max-height:340px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.sv-item{
  display:grid;
  grid-template-columns:44px 1fr auto;
  gap:11px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid var(--light-gray);
}
.sv-item:last-child{border-bottom:none;}

.sv-img{
  width:44px;height:44px;
  border-radius:8px;
  background:#f4f8fd center/cover no-repeat;
  box-shadow:inset 0 0 0 1px var(--light-gray);
  flex:0 0 auto;
}

.sv-info{min-width:0;display:block;}

.sv-brand{
  display:block;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--gray);
  margin-bottom:1px;
}

/* Two lines then ellipsis. Product titles here run long and a wrapping title
   pushes the Add button out of alignment down the whole list. */
.sv-name{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-family:var(--heading-font);
  font-size:.83rem;
  font-weight:600;
  line-height:1.3;
  color:var(--charcoal);
  text-decoration:none;
}
a.sv-name:hover{color:var(--soft-rose);text-decoration:underline;}

.sv-price{display:flex;align-items:baseline;gap:7px;margin-top:3px;flex-wrap:wrap;}
.sv-pay{font-size:.83rem;font-weight:700;color:var(--charcoal);}
.sv-was{font-size:.73rem;color:var(--gray);text-decoration:line-through;}
.sv-mem{font-size:.7rem;font-weight:700;color:var(--soft-rose);}

.sv-add{
  flex:0 0 auto;
  border:1.5px solid var(--charcoal);
  background:#fff;
  color:var(--charcoal);
  border-radius:99px;
  padding:7px 14px;
  font:inherit;
  font-size:.76rem;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s;
}
.sv-add:hover:not(:disabled){background:var(--charcoal);color:#fff;}
.sv-add:disabled{
  border-color:var(--light-gray);
  color:var(--gray);
  cursor:default;
}

/* Touch targets, same 44px rule the filter rail and the checkout steppers
   follow. */
@media(max-width:560px){
  .sv-panel{padding:16px 15px 6px;}
  .sv-item{grid-template-columns:40px 1fr auto;gap:10px;padding:11px 0;}
  .sv-img{width:40px;height:40px;}
  .sv-add{padding:12px 15px;font-size:.8rem;}
  .sv-list{max-height:none;overflow-y:visible;}
}