/* cart.css — Tienda (detalle) + Compra (checkout) */

/* ── TIENDA ── */
.tienda-body { background:var(--c-g1); }
.tienda-hero { width:100%; max-height:270px; object-fit:cover; object-position:center top; display:block; }
.tienda-content { max-width:1200px; margin:0 auto; padding:2rem 1.5rem 4rem; }

.btn-volver { display:inline-flex; align-items:center; gap:.5rem; background:transparent; border:none; color:var(--c-orange); font-family:var(--f-display); font-weight:600; font-size:.875rem; margin-bottom:1.5rem; padding:.5rem 0; transition:opacity .2s; }
.btn-volver:hover { opacity:.75; }
.btn-volver img { width:20px; height:20px; }

.tienda-heading { font-family:var(--f-display); font-size:clamp(1.5rem,3.5vw,2.25rem); font-weight:800; color:var(--c-white); margin-bottom:2rem; }

.tienda-layout { display:grid; grid-template-columns:1fr 1fr; gap:3rem; margin-bottom:3rem; align-items:start; }

.tienda-img-col { position:relative; }
.tienda-disc-img { width:100%; border-radius:var(--r-md); aspect-ratio:1; object-fit:cover; display:block; }
.btn-view-imgs { position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:.5rem; background:rgba(0,0,0,.72); border:1px solid var(--c-o30); color:var(--c-white); font-family:var(--f-display); font-weight:600; font-size:.8125rem; padding:.5rem 1.25rem; border-radius:var(--pill); transition:background .2s; white-space:nowrap; }
.btn-view-imgs:hover { background:var(--c-o40); }
.btn-view-imgs img { width:16px; height:16px; }

.tienda-info-col { display:flex; flex-direction:column; gap:1.25rem; }
.tienda-artist { font-family:var(--f-display); font-size:clamp(1.5rem,3vw,2.125rem); font-weight:800; color:var(--c-white); }
.tienda-album  { font-size:1rem; color:var(--c-dgray); margin-top:-.75rem; }
.tienda-price  { font-family:var(--f-display); font-size:2rem; font-weight:800; color:var(--c-orange); }
.tienda-ctas   { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.tienda-ctas .btn-cart img { width:44px; height:44px; }
.btn-sample { width:44px; height:44px; border-radius:50%; border:var(--bo); background:transparent; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.btn-sample:hover { background:var(--c-o15); }
.btn-sample img { width:16px; height:16px; }

.info-table { display:flex; flex-direction:column; gap:.5rem; }
.info-row { display:flex; gap:1rem; font-size:.875rem; border-bottom:1px solid var(--c-o15); padding-bottom:.5rem; }
.info-label { font-weight:700; color:var(--c-white); min-width:100px; flex-shrink:0; }
.info-val { color:var(--c-dgray); }

.btn-comprar { width:100%; background:var(--c-orange); border:none; color:var(--c-white); font-family:var(--f-display); font-weight:700; font-size:1rem; letter-spacing:.06em; text-transform:uppercase; padding:1rem 2rem; border-radius:var(--pill); transition:background .2s, transform .15s; }
.btn-comprar:hover { background:var(--c-orange-dk); transform:scale(1.02); }

.star-row { display:flex; align-items:center; gap:.25rem; }
.star-row img { width:16px; height:16px; }

/* Track list */
.tracklist { margin-bottom:3rem; }
.tracklist h3 { display:flex; align-items:center; gap:.5rem; font-family:var(--f-display); font-size:1.125rem; color:var(--c-white); margin-bottom:1rem; }
.tracklist h3 img { width:18px; height:18px; }
.tracklist-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; background:var(--c-slate4); border-radius:var(--r-md); padding:1.5rem; border:var(--bos); }
.side-label { font-size:.6875rem; letter-spacing:1.5px; text-transform:uppercase; font-weight:600; color:var(--c-orange); margin-bottom:.75rem; }
.track-item { font-size:.875rem; color:var(--c-lgray); padding:.375rem 0; border-bottom:1px solid var(--c-o15); }

/* Related */
.relacionados { margin-bottom:3rem; }
.rel-title { font-family:var(--f-display); font-size:1.25rem; font-weight:700; color:var(--c-orange); margin-bottom:1.25rem; }
.rel-grid  { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1rem; }
.rel-card  { background:var(--c-slate4); border-radius:var(--r-md); overflow:hidden; display:flex; flex-direction:column; cursor:pointer; transition:transform .2s; border:var(--bos); }
.rel-card:hover { transform:translateY(-3px); }
.rel-card img.rel-img { width:100%; aspect-ratio:1; object-fit:cover; }
.rel-info  { padding:.75rem; display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.rel-text .rel-artist { font-size:.8125rem; font-weight:700; color:var(--c-white); }
.rel-text .rel-album  { font-size:.6875rem; color:var(--c-dgray); }
.btn-rel-play { width:28px; height:28px; border-radius:50%; border:var(--bo); background:transparent; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .2s; }
.btn-rel-play:hover { background:var(--c-o20); }
.btn-rel-play img { width:12px; height:12px; }

/* ── COMPRA ── */
.compra-body { background:var(--c-slate3); }
.compra-content { max-width:1200px; margin:0 auto; padding:2rem 1.5rem 4rem; }

.compra-header-row { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom:2rem; }
.compra-title { font-family:var(--f-display); font-size:clamp(1.5rem,3vw,2rem); font-weight:800; color:var(--c-white); }
.compra-count { background:var(--c-o15); border:var(--bos); border-radius:var(--pill); padding:.4rem 1rem; font-size:.875rem; font-weight:600; color:var(--c-orange); cursor:pointer; white-space:nowrap; }

.compra-layout { display:grid; grid-template-columns:1fr 340px; gap:2rem; align-items:start; }

/* Product summary */
.compra-prod-card { background:var(--c-slate4); border-radius:var(--r-md); padding:1.5rem; display:flex; gap:1.5rem; align-items:flex-start; border:var(--bos); margin-bottom:2rem; }
.compra-badge { background:var(--c-orange); color:var(--c-white); font-size:.6rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; padding:.2rem .6rem; border-radius:4px; align-self:flex-start; }
.compra-disc-wrap { width:120px; flex-shrink:0; }
.compra-disc-img  { width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--r-sm); }
.compra-prod-info { display:flex; flex-direction:column; gap:.75rem; flex:1; }
.compra-prod-info img { max-width:240px; height:auto; }
.btn-ver-det { display:inline-flex; align-items:center; gap:.5rem; background:transparent; border:var(--bos); color:var(--c-orange); font-family:var(--f-display); font-weight:600; font-size:.8125rem; padding:.5rem 1rem; border-radius:var(--pill); transition:background .2s; margin-top:.25rem; }
.btn-ver-det:hover { background:var(--c-o15); }

/* Order panel */
.order-panel { background:var(--c-slate4); border-radius:var(--r-md); border:var(--bos); overflow:hidden; position:sticky; top:5.5rem; }
.order-header { display:flex; align-items:center; gap:.75rem; padding:1.25rem 1.5rem; background:var(--c-slate1); border-bottom:1px solid var(--c-o30); }
.order-header img { width:20px; height:20px; }
.order-header-title { font-weight:700; font-size:.9375rem; color:var(--c-white); }
.order-body { padding:1.25rem 1.5rem; display:flex; flex-direction:column; gap:1rem; }
.order-line { display:flex; align-items:center; justify-content:space-between; font-size:.875rem; color:var(--c-lgray); }
.order-line-label { font-size:.8125rem; color:var(--c-dgray); }
.order-line-val   { font-weight:600; color:var(--c-white); }
.order-divider { height:1px; background:var(--c-o15); }
.order-total-row { display:flex; align-items:center; justify-content:space-between; }
.order-total-label { font-size:.875rem; color:var(--c-sgray); }
.order-total-val   { font-family:var(--f-display); font-size:1.25rem; font-weight:800; color:var(--c-white); }

.btn-confirm { width:100%; background:var(--c-orange); border:none; color:var(--c-white); font-family:var(--f-display); font-weight:700; font-size:1rem; padding:1rem; border-radius:var(--pill); display:flex; align-items:center; justify-content:center; gap:.5rem; transition:background .2s; }
.btn-confirm:hover { background:var(--c-orange-dk); }
.btn-confirm img { width:18px; height:18px; }
.btn-keep-buying { width:100%; background:transparent; border:var(--bos); color:var(--c-lgray); font-family:var(--f-display); font-weight:600; font-size:.9375rem; padding:.875rem; border-radius:var(--pill); display:flex; align-items:center; justify-content:center; gap:.5rem; transition:background .2s; }
.btn-keep-buying:hover { background:var(--c-o15); }
.btn-keep-buying img { width:16px; height:16px; }

/* Mood grid */
.mood-section { margin-top:2.5rem; }
.mood-heading { font-family:var(--f-display); font-size:1.25rem; font-weight:800; color:var(--c-white); }
.mood-bar { height:3px; width:60px; background:var(--c-orange); border-radius:2px; margin:.375rem 0 1.25rem; }
.mood-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:1rem; }
.mood-card { background:var(--c-slate4); border-radius:var(--r-md); overflow:hidden; display:flex; flex-direction:column; cursor:pointer; transition:transform .2s; border:var(--bos); }
.mood-card:hover { transform:translateY(-3px); }
.mood-img-wrap { width:100%; aspect-ratio:1; overflow:hidden; position:relative; }
.mood-img-wrap img { width:100%; height:100%; object-fit:cover; }
.mood-play { position:absolute; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; }
.mood-card:hover .mood-play { opacity:1; }
.mood-play img { width:32px; height:32px; }
.mood-info { padding:.75rem; }
.mood-artist { font-size:.8125rem; font-weight:700; color:var(--c-white); }
.mood-album  { font-size:.6875rem; color:var(--c-dgray); }

/* Responsive */
@media (max-width:900px) { .compra-layout{grid-template-columns:1fr;} .order-panel{position:static;} }
@media (max-width:768px) { .tienda-layout{grid-template-columns:1fr;gap:1.5rem;} .tracklist-grid{grid-template-columns:1fr;gap:1rem;} .compra-prod-card{flex-direction:column;} .compra-disc-wrap{width:100%;max-width:180px;} }
@media (max-width:480px) { .tienda-artist{font-size:1.5rem;} .tienda-price{font-size:1.5rem;} }

/* ══════════════════════════════════
   BGROBOT FULL-SCREEN BACKGROUND
   Para catalog, tienda y compra
══════════════════════════════════ */


/* ══════════════════════════════════
   DISC IMAGE SLIDER (tienda)
══════════════════════════════════ */
.disc-slider {
  position: relative; width: 100%;
  border-radius: var(--r-md); overflow: hidden;
  aspect-ratio: 1;
  background: var(--c-g3);
}
.disc-slider-track {
  display: flex;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
  height: 100%;
}
.disc-slide-img {
  width: 100%; flex-shrink: 0;
  object-fit: cover; display: block;
}
.disc-slider-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.6); border: 1px solid var(--c-o30);
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 5; transition: background .2s;
}
.disc-slider-btn:hover { background: var(--c-o40); }
.disc-slider-btn img { width: 14px; height: 14px; }
.disc-slider-btn.prev { left: .5rem; }
.disc-slider-btn.next { right: .5rem; }
.disc-slider-dots {
  position: absolute; bottom: .625rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: .5rem; z-index: 5;
}
.disc-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-w40); transition: background .3s;
}
.disc-dot.active { background: var(--c-orange); }

/* Mood card actions */
.mood-actions { display:flex; align-items:center; gap:.5rem; margin-top:.625rem; padding-top:.5rem; border-top:1px solid rgba(255,87,34,.12); }
.mood-btn-cart { background:transparent; border:none; padding:0; cursor:pointer; transition:transform .2s; flex-shrink:0; }
.mood-btn-cart:hover { transform:scale(1.1); }
.mood-btn-cart img { width:26px; height:26px; object-fit:contain; display:block; }