/* ============================================================
   Carrito de la tienda — botón flotante, panel lateral y página.
   Usa la misma paleta que catalogo.css para que se sienta parte
   de la tienda y no un agregado.
   ============================================================ */
:root {
  --c-verde: #16c175;
  --c-verde-oscuro: #0b8f4f;
  --c-negro: #141414;
  --c-gris: #e9e9e9;
  --c-gris-suave: #f7f7f7;
  --c-texto: #171717;
  --c-texto-suave: #555555;
  --c-sombra: 0 18px 46px rgba(0, 0, 0, 0.08);
}

/* ---------- Botón flotante, presente en toda la tienda ----------
   Convive con el botón hamburguesa del catálogo (fixed, top:28 right:28,
   42x42, z-index 10000): el carrito se ubica JUSTO A SU IZQUIERDA, con el
   mismo tamaño y la misma altura, para que se lean como un par. */
.cart-fab {
  position: fixed;
  top: 28px;
  right: 82px;              /* 28 (margen) + 42 (hamburguesa) + 12 (separación) */
  z-index: 10000;
  width: 42px;
  height: 42px;
  border-radius: 13px;      /* mismo radio que la hamburguesa */
  background: rgba(255, 255, 255, .82);
  color: var(--c-negro);
  border: 1px solid rgba(0, 0, 0, .08);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .08);
  backdrop-filter: blur(10px);
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.cart-fab:hover { background: var(--c-verde); color: #06301c; transform: translateY(-2px); }
.cart-fab svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }

.cart-fab-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 23px; height: 23px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--c-verde);
  color: #06301c;
  font-size: 12px;
  font-weight: 800;
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}
.cart-fab-badge.visible { display: flex; }
/* Salta cuando se agrega algo, para que se note */
@keyframes cartPop { 0%{transform:scale(1);} 40%{transform:scale(1.35);} 100%{transform:scale(1);} }
.cart-fab-badge.pop { animation: cartPop .32s ease; }

/* ---------- Panel lateral ---------- */
/* El panel tiene que quedar por encima de la sidebar del catálogo (9999)
   y de su botón hamburguesa (10000), si no queda tapado. */
.cart-overlay {
  position: fixed; inset: 0; z-index: 10050;
  background: rgba(10, 15, 12, .45);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.cart-overlay.abierto { opacity: 1; visibility: visible; }

.cart-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 10060;
  width: min(420px, 100%);
  background: #fff;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  box-shadow: -14px 0 44px rgba(0, 0, 0, .18);
}
.cart-panel.abierto { transform: translateX(0); }

.cart-panel-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid var(--c-gris);
  background: var(--c-negro);
  color: #fff;
}
.cart-panel-top h2 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: .5px; }
.cart-cerrar {
  background: none; border: none; color: #fff; font-size: 26px;
  line-height: 1; cursor: pointer; padding: 0 4px; opacity: .8;
}
.cart-cerrar:hover { opacity: 1; }

.cart-cuerpo { flex: 1; overflow-y: auto; padding: 8px 22px; }

.cart-vacio { text-align: center; padding: 56px 16px; color: var(--c-texto-suave); }
.cart-vacio svg { width: 58px; height: 58px; stroke: var(--c-gris); fill: none; stroke-width: 1.5; margin-bottom: 14px; }
.cart-vacio p { margin: 0 0 20px; font-size: 15px; }

/* ---------- Línea de producto ---------- */
.cart-item {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 16px 0; border-bottom: 1px solid var(--c-gris-suave);
}
.cart-item img {
  width: 62px; height: 62px; object-fit: cover; border-radius: 9px;
  border: 1px solid var(--c-gris); background: var(--c-gris-suave); flex: none;
}
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-info a {
  color: var(--c-texto); text-decoration: none; font-size: 14px;
  font-weight: 700; line-height: 1.35; display: block;
}
.cart-item-info a:hover { color: var(--c-verde-oscuro); }
.cart-item-precio { font-size: 12.5px; color: var(--c-texto-suave); margin-top: 3px; }
.cart-item-pedido { font-size: 11.5px; color: #9a6b00; font-weight: 600; margin-top: 2px; }

/* Stepper: se actualiza solo, sin botón de confirmar */
.cart-stepper { display: flex; align-items: center; gap: 0; margin-top: 9px; }
.cart-stepper button {
  width: 29px; height: 29px; border: 1px solid var(--c-gris);
  background: #fff; cursor: pointer; font-size: 16px; line-height: 1;
  color: var(--c-texto); display: flex; align-items: center; justify-content: center;
}
.cart-stepper button:first-child { border-radius: 8px 0 0 8px; }
.cart-stepper button:last-child { border-radius: 0 8px 8px 0; }
.cart-stepper button:hover { background: var(--c-gris-suave); border-color: var(--c-verde); }
.cart-stepper input {
  width: 42px; height: 29px; text-align: center; font-family: inherit;
  font-size: 14px; border: 1px solid var(--c-gris); border-left: none; border-right: none;
  color: var(--c-texto); background: #fff; -moz-appearance: textfield;
}
.cart-stepper input::-webkit-outer-spin-button,
.cart-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cart-item-der { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cart-item-total { font-size: 14.5px; font-weight: 800; white-space: nowrap; }
.cart-quitar {
  background: none; border: none; cursor: pointer; padding: 2px;
  color: #b9b9b9; font-size: 12px; text-decoration: underline;
}
.cart-quitar:hover { color: #d64545; }

/* ---------- Pie del panel ---------- */
.cart-pie { border-top: 1px solid var(--c-gris); padding: 18px 22px 22px; background: #fff; }
.cart-subtotal { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.cart-subtotal span { font-size: 14px; color: var(--c-texto-suave); }
.cart-subtotal strong { font-size: 21px; font-weight: 800; }
.cart-envio-nota { font-size: 12px; color: var(--c-texto-suave); margin: 0 0 14px; }

.cart-btn {
  display: block; width: 100%; text-align: center;
  background: var(--c-verde); color: #06301c;
  font-family: inherit; font-size: 15px; font-weight: 800;
  padding: 15px; border: none; border-radius: 999px;
  cursor: pointer; text-decoration: none; transition: background .18s ease;
}
.cart-btn:hover { background: var(--c-verde-oscuro); color: #fff; }
.cart-btn.sec {
  background: #fff; color: var(--c-texto);
  border: 1.5px solid var(--c-gris); font-weight: 600; margin-top: 9px;
}
.cart-btn.sec:hover { background: var(--c-gris-suave); color: var(--c-texto); }

/* ---------- Aviso flotante al agregar ---------- */
.cart-toast {
  position: fixed; z-index: 10080; bottom: 26px; left: 50%;
  transform: translateX(-50%) translateY(24px);
  background: var(--c-negro); color: #fff;
  padding: 13px 24px; border-radius: 999px;
  font-size: 14px; font-weight: 600;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.cart-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Botón "Agregar" en las tarjetas del listado ---------- */
.card-agregar {
  background: var(--c-verde); color: #06301c; border: none;
  font-family: inherit; font-size: 13px; font-weight: 800;
  padding: 10px 16px; border-radius: 999px; cursor: pointer;
  transition: background .18s ease;
}
.card-agregar:hover { background: var(--c-verde-oscuro); color: #fff; }
.card-agregar[disabled] { opacity: .6; cursor: default; }

/* En el catálogo la hamburguesa se corre a top:18 right:16 en pantallas
   chicas, así que el carrito la acompaña. */
@media (max-width: 720px) {
  .cart-fab { top: 18px; right: 70px; }   /* 16 + 42 + 12 */
}

/* En celular chico el carrito se va abajo a la derecha, donde llega el
   pulgar y no compite con nada del encabezado. */
@media (max-width: 520px) {
  .cart-fab {
    top: auto; bottom: 20px; right: 18px;
    width: 54px; height: 54px; border-radius: 50%;
    background: var(--c-negro); color: #fff;
    border: none; box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
  }
  .cart-fab svg { width: 24px; height: 24px; }
  .cart-panel { width: 100%; }
  .cart-toast { bottom: 88px; }   /* que no lo tape el botón */
}