/* ============================================================
   POLLOCEL — carrito compartido
   Mismo componente en la portada y en el catálogo: botón del
   encabezado, panel lateral, filas del pedido y aviso.
   ============================================================ */

/* selector de cantidad */
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 208, 0, .4);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(8, 8, 8, .9);
}
.qty button {
  width: 42px; height: 46px;
  border: 0;
  background: transparent;
  color: var(--pollocell-yellow);
  font-size: 1.2rem;
  cursor: pointer;
}
.qty button:hover { background: rgba(255, 208, 0, .16); }
.qty input {
  width: 52px; height: 46px;
  border: 0;
  background: transparent;
  color: #fff;
  text-align: center;
  font: inherit;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty--sm button { width: 32px; height: 34px; font-size: 1rem; }
.qty--sm input { width: 42px; height: 34px; font-size: .88rem; }

/* ---------- carrito ---------- */
.cart-btn {
  position: relative;
  width: 54px; height: 54px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 208, 0, .5);
  background: rgba(10, 10, 10, .92);
  color: var(--pollocell-yellow);
  cursor: pointer;
  flex: none;
  transition: all .3s var(--ui-ease);
}
.cart-btn:hover { border-color: var(--pollocell-yellow); box-shadow: 0 0 18px rgba(255, 208, 0, .5); transform: translateY(-2px); }
.cart-btn svg { width: 24px; height: 24px; }
.cart-count {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--pollocell-yellow);
  color: #0a0a0a;
  font-size: .74rem;
  font-weight: 700;
  display: grid; place-items: center;
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: 140;
  background: rgba(0, 0, 0, .72);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ui-ease), visibility .3s var(--ui-ease);
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(430px, 92vw);
  display: flex;
  flex-direction: column;
  background: #0a0a0a;
  border-left: 1px solid rgba(255, 208, 0, .3);
  box-shadow: -20px 0 50px rgba(0, 0, 0, .7);
  transform: translateX(100%);
  transition: transform .34s var(--ui-ease);
}
.drawer.is-open .drawer-panel { transform: none; }
.drawer--left .drawer-panel { right: auto; left: 0; border-left: 0; border-right: 1px solid rgba(255, 208, 0, .3); transform: translateX(-100%); }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.drawer-head h2 { margin: 0; font-size: 1.14rem; }
.drawer-close {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  background: transparent;
  color: #ddd;
  cursor: pointer;
  display: grid; place-items: center;
}
.drawer-close:hover { border-color: var(--pollocell-yellow); color: var(--pollocell-yellow); }
.drawer-close svg { width: 19px; height: 19px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px; -webkit-overflow-scrolling: touch; }
.drawer-foot { padding: 16px 20px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .1); display: grid; gap: 12px; }

.cart-row {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  align-items: center;
}
.cart-img {
  width: 62px; height: 62px;
  border-radius: 12px;
  overflow: hidden;
  background: #131313;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 208, 0, .25);
  color: #444;
}
.cart-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-info { display: grid; gap: 5px; min-width: 0; }
.cart-info b { font-size: .94rem; font-weight: 600; }
.cart-info span { font-size: .82rem; color: #aeaeae; }
.cart-end { display: grid; gap: 8px; justify-items: end; }
.cart-end b { color: var(--pollocell-yellow); font-family: var(--font-title); font-size: .98rem; }
.cart-del {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: transparent;
  color: #b9b9b9;
  cursor: pointer;
  display: grid; place-items: center;
}
.cart-del:hover { border-color: #ff6b5e; color: #ff9b90; }
.cart-del svg { width: 15px; height: 15px; }
.cart-empty { display: grid; place-items: center; gap: 14px; padding: 46px 10px; text-align: center; color: #b6b6b6; }
.cart-empty svg { width: 42px; height: 42px; color: var(--pollocell-yellow); }
.cart-total { display: flex; align-items: baseline; justify-content: space-between; font-size: 1.04rem; }
.cart-total b { font-family: var(--font-title); font-size: 1.32rem; color: var(--pollocell-yellow); }
.cart-note { font-size: .8rem; color: #9d9d9d; margin: 0; }

.cart-toast {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translate(-50%, 14px);
  z-index: 200;
  padding: 13px 20px;
  border-radius: 999px;
  background: #141414;
  border: 1px solid rgba(255, 208, 0, .5);
  color: #fff;
  font-size: .9rem;
  opacity: 0;
  visibility: hidden;
  transition: all .3s var(--ui-ease);
  max-width: 90vw;
  text-align: center;
}
.cart-toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }


.cart-foot-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.drawer-foot .field { margin: 0; }

@media (max-width: 520px) {
  .cart-row { grid-template-columns: 52px 1fr; }
  .cart-img { width: 52px; height: 52px; }
  .cart-end { grid-column: 1 / -1; grid-auto-flow: column; justify-items: start; justify-content: space-between; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .drawer-panel, .cart-toast, .cart-btn { transition: none !important; }
}

/* ---------- el panel no puede ensanchar la página ---------- */
.drawer { overflow: hidden; }

/* ---------- el botón del encabezado acompaña a los redondos ---------- */
.header-actions .cart-btn { width: 54px; height: 54px; }
@media (max-width: 1180px) {
  .header-actions .cart-btn { width: 48px; height: 48px; }
  .header-actions .cart-btn svg { width: 22px; height: 22px; }
}
@media (max-width: 520px) {
  .header-actions .cart-btn { width: 44px; height: 44px; }
  .header-actions .cart-btn svg { width: 20px; height: 20px; }
  .cart-count { min-width: 19px; height: 19px; font-size: .68rem; }
}