/*
 * Kicks Hype — Carrito, líneas de producto (dirección "Editorial")
 * Reproduce 1:1 la referencia hifi. Depende de assets/shop/shell.css (tokens,
 * .kh-layout, .kh-aside/.kh-summary, .kh-linkbtn, .kh-tabular) y de
 * assets/catalogo/catalogo.css (reset, tokens --kh-*). Todo scopeado bajo
 * body.kh-shop.
 */

body.kh-shop .kh-list-head{
  display:flex;justify-content:space-between;
  padding-bottom:14px;border-bottom:1px solid var(--kh-line);
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--kh-muted);
}

body.kh-shop .kh-line{
  display:grid;grid-template-columns:132px 1fr auto;gap:28px;
  padding:28px 0;border-bottom:1px solid var(--kh-line);align-items:start;
  transition:opacity .2s ease,transform .2s ease;
}
body.kh-shop .kh-line.is-removing{opacity:0;transform:scale(.98)}

body.kh-shop .kh-line__thumb{
  position:relative;display:block;aspect-ratio:1/1;
  background:var(--kh-surface);overflow:hidden;
}
body.kh-shop .kh-line__thumb img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:10%;box-sizing:border-box;
  mix-blend-mode:darken; /* mismas fotos del catálogo, fondo #ECEEF0 sobre tile #ECEBE5 */
  display:block;
}

body.kh-shop .kh-line__info{display:flex;flex-direction:column;gap:14px;min-width:0}
body.kh-shop .kh-line__title{font-size:14px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
body.kh-shop .kh-line__sub{font-size:12px;color:var(--kh-muted)}

body.kh-shop .kh-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:12px}

body.kh-shop .kh-field-inline{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--kh-line-2);background:#fff;height:36px;padding:0 12px;
}
body.kh-shop .kh-field-inline span{color:var(--kh-muted)}
body.kh-shop .kh-size-select{
  border:0;outline:0;background:transparent;
  font-size:12px;font-weight:600;cursor:pointer;
  appearance:none;-webkit-appearance:none;
}

body.kh-shop .kh-stepper{
  display:flex;align-items:center;
  border:1px solid var(--kh-line-2);background:#fff;height:36px;
}
body.kh-shop .kh-stepper button{
  width:36px;height:34px;border:0;background:transparent;
  font-size:16px;line-height:1;cursor:pointer;color:inherit;
  transition:color .15s;
}
body.kh-shop .kh-stepper button:hover:not(:disabled){color:var(--kh-indigo)}
body.kh-shop .kh-stepper button:disabled{opacity:.35;cursor:not-allowed}
body.kh-shop .kh-stepper [data-qty-value]{
  min-width:28px;text-align:center;
  font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;
}

body.kh-shop .kh-stock{font-size:12px;font-weight:600;color:var(--kh-muted)}
body.kh-shop .kh-stock.is-low{color:var(--kh-indigo)}

body.kh-shop .kh-line__actions{display:flex;gap:20px;font-size:12px}

body.kh-shop .kh-line__error{
  margin-top:8px;font-size:12px;line-height:1.4;color:#B3261E;
}
body.kh-shop .kh-line__error:empty{display:none}

body.kh-shop .kh-line__amount{
  display:flex;flex-direction:column;align-items:flex-end;gap:4px;white-space:nowrap;
}
body.kh-shop .kh-line__amount b{font-size:15px;font-weight:600}
body.kh-shop .kh-line__amount s{font-size:12px;font-weight:400;color:var(--kh-muted);text-decoration:line-through}
body.kh-shop .kh-line__amount > span{font-size:12px;color:var(--kh-muted)}

/* ---------- Estado de carga del carrito ---------- */
body.kh-shop [data-cart].is-busy [data-cart-lines],
body.kh-shop [data-cart].is-busy [data-cart-summary]{
  opacity:.6;transition:opacity .15s ease;
}
body.kh-shop [data-cart].is-busy .kh-controls,
body.kh-shop [data-cart].is-busy .kh-line__actions,
body.kh-shop [data-cart].is-busy [data-coupon-form],
body.kh-shop [data-cart].is-busy [data-coupon-remove]{
  pointer-events:none;
}

/* ---------- Toast con botón "Deshacer" (catalogo.css define .kh-toast base:
   posición, fondo, sombra, transición de entrada/salida; acá solo se agrega
   el layout de dos elementos — texto + botón — que cart.js inyecta). ---------- */
body.kh-shop .kh-toast{display:flex;align-items:center;gap:16px}
body.kh-shop .kh-toast__text{flex:1;min-width:0}
body.kh-shop .kh-toast__undo{
  flex:none;background:none;border:0;padding:0;
  font:inherit;font-size:13px;font-weight:700;color:#fff;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;
}
body.kh-shop .kh-toast__undo:hover{color:var(--kh-indigo-light)}

/* ---------- Responsive (720, guía del mock) ---------- */
@media (max-width:720px){
  body.kh-shop .kh-line{grid-template-columns:88px 1fr;gap:16px}
  body.kh-shop .kh-line__amount{grid-column:2;align-items:flex-start}
}