:root{
  --bg: #070a12;
  --panel: #0e1424;
  --card: #0b1220;
  --border: rgba(255,255,255,.08);
  --text: #e5e7eb;
  --muted: #9ca3af;
  --gold: #c8922e;
}

*{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
}

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(212,162,76,.12), transparent 55%),
    radial-gradient(900px 500px at 90% 0%, rgba(185,28,28,.10), transparent 55%),
    var(--bg);
  color: var(--text);
}

/* ===== TOPBAR ===== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 999;
  padding: 0 28px;
  height: 82px;
  backdrop-filter: blur(12px);
  background: rgba(11, 18, 32, .92);
  border-bottom: 1px solid rgba(229, 231, 235, .08);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap; /* Una sola fila en PC */
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.3s ease;
}

/* MARCA */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0; /* Nunca se achica */
}

.logo--icon {
  height: 52px;
  width: 52px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}

.brandName {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .2em;
  color: var(--gold);
  line-height: 1;
  white-space: nowrap;
}

.brandSub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/* ACCIONES: ocupa el espacio restante */
.actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

/* Buscador: crece todo lo posible */
#search.input {
  flex: 1;
  min-width: 0;
  height: 50px;
  font-size: 15px;
  padding: 0 16px;
  border-radius: 14px;
  background: rgba(16, 26, 46, .85);
  border: 1px solid rgba(229, 231, 235, .14);
  color: var(--text);
  outline: none;
  transition: border-color .2s;
}

#search.input:focus {
  border-color: var(--gold);
}

/* Botón Categoría */
.menu-toggle {
  flex-shrink: 0;
  height: 50px;
  padding: 0 20px;
  border: 1px solid rgba(200, 146, 46, .8);
  background: rgba(16, 26, 46, .95);
  color: var(--text);
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background .2s;
}

.menu-toggle::after {
  content: "▾";
  font-size: 11px;
  color: var(--gold);
}

.menu-toggle:hover {
  background: rgba(200, 146, 46, .12);
}

/* Select wrap: ancho fijo para que no aplaste al buscador */
.select-wrap {
  position: relative;
  flex-shrink: 0;
  width: 200px;
}

.select-wrap::after {
  content: "▾";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 14px;
  pointer-events: none;
  font-weight: 700;
}

.select-wrap .select {
  width: 100%;
  height: 50px;
  padding: 0 38px 0 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: rgba(16, 26, 46, .95);
  border: 1px solid rgba(200, 146, 46, .8);
  border-radius: 14px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background .2s;
}

.select-wrap .select:hover {
  background: rgba(200, 146, 46, .12);
}

/* Ocultar .actions-row en PC (ya no se usa) */
.actions-row {
  display: contents; /* Los hijos se integran directo al flex padre */
}

/* Menú desplegable de categorías */
.mobile-menu {
  display: none;
  position: absolute;
  top: 82px;
  left: 0;
  right: 0;
  background: rgba(11, 18, 32, .97);
  border-bottom: 1px solid rgba(229, 231, 235, .08);
  padding: 10px 20px;
  flex-direction: row;
  gap: 8px;
  flex-wrap: wrap;
  z-index: 998;
}

.mobile-menu.is-open {
  display: flex;
}

.mobile-menu a {
  color: var(--text);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 10px;
  background: rgba(16, 26, 46, .6);
  border: 1px solid rgba(229, 231, 235, .08);
  font-size: 14px;
  transition: background .2s;
}

.mobile-menu a:hover {
  background: rgba(200, 146, 46, .15);
  border-color: rgba(200, 146, 46, .3);
}

/* ===== MOBILE (≤ 640px) ===== */
@media (max-width: 640px) {
  .topbar {
    height: auto;
    padding: 12px 14px;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }

  /* Fila 1: logo + nombre */
  .brand {
    flex: 1;
    min-width: 0;
  }

  .brandName { font-size: 15px; }
  .brandSub  { font-size: 11px; }
  .logo--icon { width: 42px; height: 42px; }

  /* .actions ocupa toda la fila */
  .actions {
    order: 2;
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }

  /* Fila 2: buscador ancho completo */
  #search.input {
    width: 100%;
    flex: none;
    height: 44px;
    font-size: 14px;
  }

  /* Fila 3: actions-row con Categoría + select al 50/50 */
  .actions-row {
    display: flex;   /* En mobile vuelve a ser flex (en PC era contents) */
    width: 100%;
    gap: 8px;
  }

  .actions-row > * {
    flex: 1;
  }

  .menu-toggle {
    height: 44px;
    justify-content: center;
    font-size: 13px;
    padding: 0 12px;
    border-radius: 12px;
    width: 100%;
  }

  .select-wrap {
    width: auto;
  }

  .select-wrap .select {
    height: 44px;
    font-size: 13px;
    border-radius: 12px;
  }

  /* Menú desplegable en mobile: columna */
  .mobile-menu {
    top: auto;
    flex-direction: column;
    padding: 8px 14px 12px;
    gap: 6px;
  }
}



.container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px;
}

.hero{
  max-width:1100px;
  margin:auto;
  padding:0 16px;
}

.hero h1{
  margin:0 0 8px;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 900;
  letter-spacing: .4px;
}

.hero p{
  margin:0;
  color: var(--muted);
}

.subtitle{
  margin-top: 10px;
  margin-bottom: 32px;
  color: #7f93b8;
  font-size: 14px;
  max-width: 780px;
  line-height: 1.5;
}

.grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

@media (min-width: 900px){
  .grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px){
  .grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.card{
  background: linear-gradient(180deg, rgba(20,20,22,.95), rgba(12,12,14,.95));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  display:flex;
  flex-direction:column;
  height:100%;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.card:hover{
  transform: translateY(-5px) scale(1.01);
  border-color: rgba(200,146,46,.45);
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
}

.thumb{
  height: 180px;
  padding: 0;
  background: #ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.thumb img{
  width:115%;
  height:115%;
  object-fit: contain;
  padding: 10px;
  background: transparent;
}

/* Arreglo para que las categorías no se estiren */
.home-categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 en PC */
  gap: 20px;
  padding: 32px 20px;
  margin-bottom: 32px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* TARJETA DE CATEGORÍA */
.category-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 20px 12px 16px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255,255,255,0.1);
  transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
  cursor: pointer;
}

.category-card:hover {
  box-shadow: 0 12px 36px rgba(200, 146, 46, 0.25);
  transform: translateY(-4px);
}

.category-card a {
  text-decoration: none;
  display: block;
}

/* Contenedor de imagen */
.category-card .thumb {
  width: 110px;
  height: 110px;
  margin: 0 auto 12px;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.category-card img {
  width: 90%;
  height: 90%;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.15));
  transition: transform 0.35s ease;
}

.category-card .thumb img {
  width: 85%;
  height: 85%;
  object-fit: contain;
}

.category-card:hover img {
  transform: scale(1.08) translateY(-4px);
}

/* Título */
.category-card h2 {
  font-size: 15px;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0;
  text-align: center;
}




/* ===== MOBILE: grilla 2x2 ===== */
@media (max-width: 640px) {
  .home-categories {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 20px 14px 24px;
  }

  .category-card {
    padding: 14px 8px 12px;
    border-radius: 16px;
  }

  .category-card .thumb {
    width: 80px;
    height: 80px;
    margin-bottom: 8px;
  }

  .category-card h2 {
    font-size: 12px;
    letter-spacing: 1px;
  }
}



.content{
  padding: 12px 12px 14px;
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0;
}

.card__info{
  flex: 1;
  display: flex;
  flex-direction: column;
}

.row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}

.row > div:first-child{
  flex:1;
  min-width:0;
}

.name{
  font-weight: 800;
  font-size: 20px;
  min-height: 52px; /* Espacio fijo para 2 líneas */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.meta{
  margin-top: 6px;
  height: 30px; /* Altura fija estricta, siempre 1 sola fila */
  color: var(--muted);
  font-size: 12px;
  display: flex;
  gap: 6px;
  flex-wrap: nowrap; /* Sin wrap: los 3 badges siempre en una línea */
  overflow: hidden;
  align-items: center;
}

.badge{
  border: 1px solid rgba(229,231,235,.12);
  background: rgba(11,18,32,.35);
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px; /* Si el nombre es muy largo, se corta con ... */
  flex-shrink: 1;
}

.price{
  margin-top: 8px;
  font-size: 20px;
  font-weight: 900;
  color: #d4a24c;
  letter-spacing: .5px;
  white-space:nowrap;
}

.btn{
  margin-top: 12px;
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 800;
  cursor: pointer;
}

.btn--wa{
  background: linear-gradient(180deg, rgba(37,211,102,1), rgba(22,163,74,1));
  color: #06250f;
  text-decoration: none;
  letter-spacing: .2px;
  display:block;
  width:100%;
  text-align:center;
}

.btn--wa:active{
  transform: scale(.99);
}

.card__actions{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.footer{
  padding: 18px;
  text-align:center;
  color: rgba(229,231,235,.7);
  border-top: 1px solid rgba(229,231,235,.08);
}

.empty{
  text-align:center;
  color: var(--muted);
  padding: 30px 0 60px;
}

.hidden{
  display:none !important;
}

@media (max-width: 720px){
  .topbar{
    flex-direction: column;
    align-items: stretch;
    gap:10px;
    min-height: unset;
  }

  .brand{
    justify-content: center;
  }

  .actions{
    width:100%;
    justify-content: center;
    flex-direction: column;
  }

  .input{
    flex:1;
    min-width: unset;
    width: 100%;
  }

  .container{
    padding:12px;
  }

  .grid{
    gap:12px;
  }

  .thumb{
    height:155px;
    padding:8px;
  }

  .thumb img{
    padding:6px;
  }

  .content{
    padding:10px;
  }

  .name{
    font-size:14px;
    line-height:1.2;
    min-height: 34px;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .price{
    font-size:16px;
    text-align:right;
  }

  .meta{
    margin-top:8px;
    gap:6px;
    min-height: 28px;
  }

  .badge{
    font-size:11px;
    padding:4px 7px;
  }

  .btn{
    margin-top:10px;
    padding:10px 12px;
    font-size:14px;
  }
}

@media (max-width: 520px){
  .brandSub{
    display:none;
  }

  .name{
    -webkit-line-clamp:2;
  }

  .price{
    font-size:17px;
    text-align:left;
  }
}

/* ===== MODAL PERFUME ===== */
.modal{
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 18px;
}

.modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
}

.modal__panel {
  display: grid;
  grid-template-columns: 1fr 1.2fr; /* Dos columnas: imagen y texto */
  background: var(--card); /* Usamos el fondo oscuro facha */
  border-radius: 24px;
  overflow: hidden;
  max-width: 900px;
  width: 90%; /* Ocupa el 90% del ancho disponible */
  border: 1px solid var(--border);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  position: relative;
  z-index: 100;
}

.modal__close{
  position:absolute;
  top:12px;
  right:12px;
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid rgba(229,231,235,.14);
  background:rgba(11,18,32,.75);
  backdrop-filter: blur(6px);
  color:var(--text);
  cursor:pointer;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
}

.modal__media {
  height: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--border);
}

.modal__media img {
  width: 85%;
  height: 85%;
  object-fit: contain;
}

.modal__content {
  padding: 30px;
  display: flex;
  flex-direction: column;
}

.modal__top{
  position: relative;
  z-index: 1;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:12px;
  padding-right: 52px;
}

.modal__title{
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .2px;
}

.modal__price{
  position: relative;
  z-index: 1;
  color: var(--gold);
  font-weight: 800;
  font-size: 17px;
  white-space: nowrap;
}

.modal__badges{
  margin-top: 12px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.modal__desc{
  margin: 10px 0 12px;
  color: var(--muted);
}

.modal__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.modal__item{
  border: 1px solid rgba(229,231,235,.10);
  background: rgba(11,18,32,.25);
  border-radius: 14px;
  padding: 10px;
}

.modal__label{
  font-size: 12px;
  color: var(--muted);
}

.modal__value{
  margin-top: 4px;
  font-weight: 850;
}

/* Cuando el body tiene la clase modal-open, la topbar sube y desaparece */
body.modal-open .topbar {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* Opcional: También ocultamos el botón del carrito y el de volver arriba para que no molesten */
body.modal-open .fav-float-new, 
body.modal-open #topBtn {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
  transition: all 0.3s ease;
}

@media (max-width: 640px) {
  .modal {
    padding: 10px; /* Menos espacio alrededor */
  }

  .modal__panel {
    grid-template-columns: 1fr; /* Una sola columna: todo para abajo */
    width: 95%; /* Ocupa casi todo el ancho del celu */
    border-radius: 18px; /* Bordes un poco más suaves */
  }

  /* Imagen en Móvil */
  .modal__media {
    height: 180px; /* Reducimos la altura de la foto */
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .modal__media img {
    padding: 10px;
  }

  /* Texto y Detalles en Móvil */
  .modal__content {
    padding: 15px; /* Compactamos el texto */
  }

  .modal__title {
    font-size: 18px; /* Título más chico */
  }
  
  .modal__price {
    font-size: 20px; /* Precio que resalte */
  }

  .modal__desc {
    font-size: 13px; /* Descripción más compacta */
    margin: 8px 0;
  }

  /* Compactamos la grilla de Duración/Estela */
  .modal__grid {
    grid-template-columns: 1fr 1fr; /* Mantenemos dos columnas, pero más chicas */
    gap: 8px;
    margin-bottom: 10px;
  }
  
  .modal__item {
    padding: 8px;
  }

  .modal__label {
    font-size: 11px;
  }

  .modal__value {
    font-size: 13px;
  }

  /* Botón de WhatsApp más grande para el pulgar */
  .modal__content .btn--wa {
    padding: 12px;
    font-size: 14px;
    margin-top: auto; /* Lo empuja al fondo */
  }
  
  /* El botón de cerrar (✕) */
  .modal__close {
    width: 30px;
    height: 30px;
    font-size: 16px;
    top: 10px;
    right: 10px;
  }
}
/* BOTONES FLOTANTES */
.wa-float{
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 62px;
  height: 62px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wa-float img{
  width: 42px;
  height: 42px;
}

#topBtn {
  position: fixed;
  bottom: 100px; /* Lo subimos un poco para que no tape el carrito */
  right: 20px;
  width: 45px;
  height: 45px;
  background: #000; /* Fondo negro como lo tenías */
  color: #fff;      /* Flecha blanca */
  border: 1px solid var(--gold); /* Un borde dorado para que haga juego */
  border-radius: 50%;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  z-index: 9999; /* Bien arriba de todo */
  display: none; /* El JS se encarga de cambiarlo a 'flex' */
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.grid > *{
  min-width: 0;
}

/* Badge de Agotado */
.thumb { position: relative; overflow: hidden; } /* Asegura que la cinta no se salga */
.badge-out {
  position: absolute;
  top: 15px;
  right: -30px;
  background: #ff4444;
  color: white;
  padding: 5px 35px;
  font-size: 10px;
  font-weight: bold;
  transform: rotate(45deg);
  z-index: 10;
}

/* Corazón de Favoritos en la tarjeta */
.btn-fav-icon {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0,0,0,0.5);
  border: none;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-fav-icon.active { background: white; color: #ff4444; }

/* Botón Flotante del Carrito */
.fav-float-new {
  position: fixed;
  bottom: 25px;
  left: 25px;
  background: var(--gold);
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: none; /* JS lo activa */
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.4);
  z-index: 1000;
  cursor: pointer;
  animation: bounce 2s infinite;
}
.fav-count {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--gold);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border: 2px solid var(--bg);
}

.btn-cart-icon {
  transition: all 0.3s ease; /* Hace que el cambio de color sea suave */
}


/* BOTÓN DE ACCIÓN INTUITIVO */
.btn-cart-action {
  position: absolute;
  top: 10px;
  left: 8px;
  background: var(--gold); /* Dorado Rulo */
  color: white;
  border: none;
  padding: 6px 10px;
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  z-index: 20;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}

/* Cuando ya está agregado (Cambia a verde y se nota el cambio) */
.btn-cart-action.active {
  background: #25d366; /* Verde WhatsApp */
  box-shadow: 0 0 15px rgba(37, 211, 102, 0.4);
  transform: scale(0.95);
}

/* Efecto al tocar con el dedo */
.btn-cart-action:active {
  transform: scale(0.95);
}

/* Aseguramos que el contenedor de la imagen no lo tape */
.thumb {
  position: relative;
}

/* --- PANEL LATERAL (DRAWER) --- */
.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  visibility: hidden;
  transition: all 0.3s ease;
}

.cart-drawer.is-open { visibility: visible; }

.cart-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cart-drawer.is-open .cart-drawer__backdrop { opacity: 1; }

.cart-drawer__content {
  position: absolute;
  top: 0; right: -100%; /* Empieza afuera */
  width: min(380px, 90%);
  height: 100%;
  background: var(--panel);
  box-shadow: -10px 0 30px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  transition: right 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.cart-drawer.is-open .cart-drawer__content { right: 0; }

/* Cabecera y Items */
.cart-header { padding: 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.close-cart { background: none; border: none; color: white; font-size: 20px; cursor: pointer; }

.cart-items { flex: 1; overflow-y: auto; padding: 15px; }

.cart-item {
  display: flex; gap: 10px; padding: 10px; background: rgba(255,255,255,0.03);
  border-radius: 12px; margin-bottom: 10px; align-items: center;
}
.cart-item img { width: 50px; height: 50px; object-fit: contain; background: white; border-radius: 8px; }
.cart-item-info { flex: 1; font-size: 13px; }
.cart-item-info .price { color: var(--gold); font-weight: 700; margin-top: 2px; }

/* Footer del Carrito */
.cart-footer { padding: 20px; border-top: 1px solid var(--border); background: rgba(0,0,0,0.2); }
.cart-total { display: flex; justify-content: space-between; margin-bottom: 15px; font-weight: 700; font-size: 18px; }
.btn--wa-order { background: #25d366; color: white; padding: 15px; font-size: 14px; }

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ===== TOAST DE CONFIRMACIÓN ===== */
#cartToast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--gold);
  border-radius: 14px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  width: max-content;
  max-width: min(360px, 88vw); /* Nunca más ancho que la pantalla */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  z-index: 99999;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

#cartToast.toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}