/* ---------- Título ---------- */
.cart-title h1{
  font-family:'Brand',sans-serif;
  font-size:1.6rem;
  font-weight:600;
  color:#2e2e2e;
  text-align:center;
  margin:1.25rem 0;
}

/* ---------- Layout general ---------- */
.cart-layout{
  display:block;
  padding:0 1rem 2rem;
}
.cart-main{ width:100%; }
.cart-aside{ width:100%; }

/* Desktop: 2 columnas */
@media (min-width:1024px){
  .cart-layout{
    display:grid;
    grid-template-columns: 1fr 360px;
    gap:1.25rem;
    align-items:start;
    max-width:1100px;
    margin:0 auto 3rem;
    padding:0 2rem 2rem;
  }
  .cart-aside{ position:sticky; top:96px; }
}

/* ---------- Tarjetas (bloques) ---------- */
.card{
  background:#fff;
  border:1px solid #e8e8e8;
  border-radius:12px;
  padding:1rem;
}
.card--pickup{ margin-bottom:1rem; padding: 0.5rem; }
.cart-pickup.card.card--pickup{ padding: 0.75rem; }
.card--actions{ display:flex; flex-direction:column; gap:0.75rem; }

/* ---------- Bloque: Fecha + Hora ---------- */
.cart-pickup{ background:transparent; padding:0; }
.selector-group{ margin-bottom:1.25rem; }
.selector-group--no-bottom{ margin-bottom:0; }

.selector-group__title{
  font-family:'Poppins',sans-serif;
  font-size:1.1rem;
  font-weight:600;
  color:#2e2e2e;
  margin:0 0 .6rem;
}
.selector-group__title--mt-small{ margin-top:.6rem; }

.selector-group__date{
  width:100%;
  padding:.75rem 1rem;
  border:1px solid #ccc;
  border-radius:.5rem;
  font-family:'Red Hat Display',sans-serif;
  font-size:1rem;
  color:#2e2e2e;
  background:#fff;
}

/* Caja “hora estimada” */
.estimated-pickup{
  background:#f9f9f9;
  border:1px solid #ddd;
  border-radius:.5rem;
  padding:.75rem 1rem;
}
.estimated-pickup__text{
  margin:0;
  font-family:'Red Hat Display',sans-serif;
  font-size:1rem;
  color:#444;
}

/* Aviso dinámico (integrado en la tarjeta) */
.cart-today-info{
  margin-top:.75rem;
  padding:.75rem 1rem;
  background:#fff7e6;
  border-left:4px solid #b69856;
  font-family:'Red Hat Display',sans-serif;
  font-size:1rem;
  color:#3b2f15;
  border-radius:8px;
}
.hidden{ display:none !important; }

/* ---------- Lista de productos ---------- */
.cart-items__list{
  list-style:none;
  margin:0;
  padding:0;
}
.cart-item{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.9rem;
  margin:0 0 .75rem;
  background:#fff;
  border:1px solid #eee;
  border-radius:12px;
}
.cart-item:last-child{ margin-bottom:0; }

/* Imagen */
.cart-item__img{
  width:64px; height:64px; object-fit:cover; border-radius:8px;
}

/* Detalles */
.cart-item__details{ flex:1; min-width:0; }
.cart-item__name{
  font-family:'Red Hat Display',sans-serif;
  font-size:1.05rem;
  font-weight:600;
  color:#2e2e2e;
  margin:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cart-item__meta{
  font-family:'Montserrat',sans-serif;
  font-size:.875rem;
  color:#666;
  margin:.25rem 0 0;
}

/* Subtotal */
.cart-item__subtotal{
  font-family:'Montserrat',sans-serif;
  font-size:.9rem;
  font-weight:700;
  color:#2e2e2e;
  white-space:nowrap;
}

/* Botón Eliminar → icono SVG minimalista sin tocar el JS */
.cart-item__remove{
  background:transparent;
  border:none;
  color:#aa8000;
  cursor:pointer;
  padding:.25rem;
  line-height:1;
  font-size:0; /* ocultar texto pero mantener accesibilidad */
}
.cart-item__remove:hover{ color:#b69856; }
.cart-item__remove::before{
  content:'';
  display:inline-block;
  width:20px; height:20px;
  background-repeat:no-repeat;
  background-size:20px 20px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23b69856' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/><path d='M10 11v6'/><path d='M14 11v6'/><path d='M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/></svg>");
}

/* ---------- Indicaciones ---------- */
.cart-instructions{ margin:1rem 0; }
.cart-instructions__title{
  display:block;
  font-family:'Montserrat',sans-serif;
  font-size:1rem;
  font-weight:600;
  color:#2e2e2e;
  margin-bottom:.5rem;
}
.cart-instructions__textarea{
  width:100%; height:5rem; resize:vertical;
  background:#fdfbf9; border:1px solid #ccc; border-radius:.5rem;
  padding:.75rem;
  font-family:'Montserrat',sans-serif;
  font-size:.9rem; color:#444;
}

/* ---------- Resumen ---------- */
.cart-summary{ margin:0 0 1rem; }
.cart-summary__container{ padding:0; }
.cart-summary__line{
  display:flex; justify-content:space-between;
  font-family:'Montserrat',sans-serif;
  font-size:.9rem; color:#555;
  padding:.5rem 0; border-bottom:1px solid #f1f1f1;
}
.cart-summary__line:last-child{ border-bottom:none; }
.cart-summary__line span:last-child{
  font-size:1rem; font-weight:700; color:#2e2e2e;
}
.cart-summary__total span:first-child{ font-weight:700; }

/* ---------- Acciones (botones + privacidad) ---------- */
.cart-actions{ gap:.75rem; }
.cart-actions__btn{
  font-family:'Montserrat',sans-serif;
  border-radius:.75rem;
  padding:.9rem 1.25rem;
  text-align:center; text-decoration:none;
  cursor:pointer; transition:background .2s, color .2s, border-color .2s;
  display:block;
}
.cart-actions__btn--primary{
  background:#b69856; color:#fff; font-weight:600; border:none; font-size: 1rem;
}
.cart-actions__btn--primary:hover{ background:#a3874a; }
.cart-actions__btn--secondary{
  background:transparent; color:#b69856; border:2px solid #b69856; font-weight:600;
}
.cart-actions__btn--secondary:hover{ background:#b69856; color:#fff; }
.cart-actions__btn--primary:disabled{ background:#ccc; cursor:not-allowed; }

/* Privacidad */
.cart-privacy-container{ display:flex; flex-direction:column; gap:.25rem; }
.cart-privacy-label{
  display:flex; align-items:center; gap:.5rem; cursor:pointer; user-select:none;
}
.cart-privacy-checkbox{
  width: 1.25rem; height: 1.25rem;
  appearance: none; -webkit-appearance: none;
  border: 2px solid #ccc; border-radius: .25rem; background: #fff;
  display: grid; place-content: center;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
}
.cart-privacy-checkbox::after{
  content: "";
  width: 0.65rem; height: 0.35rem;
  border-right: 3px solid #fff; border-bottom: 3px solid #fff;
  transform: rotate(45deg);
  opacity: 0;
}
.cart-privacy-checkbox:checked{ background-color: #b69856; border-color: #b69856; }
.cart-privacy-checkbox:checked::after{ opacity: 1; }
.cart-privacy-checkbox:focus-visible{
  outline: none; border-color: #b69856; box-shadow: 0 0 0 3px rgba(182,152,86,.25);
}
.cart-privacy-label span{
  font-family:'Red Hat Display',sans-serif; font-size:1rem; color:#555;
}
.cart-privacy-label a{ color:#b69856; font-weight:700; text-decoration:none; }
.cart-privacy-label a:hover{ text-decoration:underline; }
.cart-privacy-error{
  font-family:'Red Hat Display',sans-serif; font-size:.85rem; color:#f44336; visibility:hidden;
}

/* === FIX: Checkbox privacidad — check centrado y tamaño correcto === */
label.cart-privacy-label input#privacy-accept.cart-privacy-checkbox{
  width: 1.25rem; height: 1.25rem;
  appearance: none; -webkit-appearance: none;
  border: 2px solid #ccc; border-radius: .25rem; background: #fff;
  display: inline-block; vertical-align: middle;
  background-position: center; background-repeat: no-repeat; background-size: 70% 70%;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
}
label.cart-privacy-label input#privacy-accept.cart-privacy-checkbox:checked{
  background-color: #b69856; border-color: #b69856;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'><path d='M3.5 9.5l3.2 3.2L14.5 4.9' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
label.cart-privacy-label input#privacy-accept.cart-privacy-checkbox::after{ content: none !important; }
label.cart-privacy-label input#privacy-accept.cart-privacy-checkbox:focus-visible{
  outline: none; border-color: #b69856; box-shadow: 0 0 0 3px rgba(182,152,86,.25);
}

/* ---------- Estado carrito vacío (centrado + estética de card) ---------- */
/* Vía clase JS */
.cart-items__list.is-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:62vh;            /* centra verticalmente en tablet/desktop */
  padding: 0 1rem;
  text-align:center;
  gap: 1rem;
}
/* Refuerzo: si no se añade la clase desde JS, centrado cuando haya el bloque del template */
.cart-items__list:has(.empty-cart__info){
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:62vh;
  padding: 0 1rem;
  text-align:center;
  gap: 1rem;
}

/* Card principal del estado vacío */
.cart-items__list.is-empty .empty-cart__info,
.cart-items__list:has(.empty-cart__info) .empty-cart__info{
  width:100%;
  max-width: 420px;
  background: #fff;
  border:1px solid #e8e8e8;
  border-radius: 12px;
  padding: 1.25rem 1rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.04);
  margin: 0;                 /* cohesiona con acciones */
}

.cart-items__list.is-empty .empty-cart__info h2,
.cart-items__list:has(.empty-cart__info) .empty-cart__info h2{
  font-family:'Poppins',sans-serif;
  font-size:1.5rem;
  font-weight:600;
  color:#2e2e2e;
  margin: 0 0 .75rem;
}

.cart-items__list.is-empty .empty-cart__info p,
.cart-items__list:has(.empty-cart__info) .empty-cart__info p{
  font-family:'Montserrat',sans-serif;
  font-size:1rem;
  color:#555;
  line-height:1.55;
  max-width: 38ch;
  margin: 0 auto;
}

/* Acciones bajo la card: misma anchura y alineación */
.cart-items__list.is-empty .empty-cart__actions,
.cart-items__list:has(.empty-cart__info) .empty-cart__actions{
  width:100%;
  max-width: 420px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  margin: 0;                  /* pegado visualmente a la card */
}

/* (2) El enlace del botón NO debe subrayarse */
.empty-cart__actions a{
  text-decoration: none;       /* quita subrayado */
  display: block;
  width: 100%;
}
.empty-cart__actions a:hover{
  text-decoration: none;
}

/* Botón CTA: ancho completo y consistente */
.cart-items__list.is-empty .empty-cart__btn--primary,
.cart-items__list:has(.empty-cart__info) .empty-cart__btn--primary{
  display:block;
  width:100%;
  font-family:'Montserrat',sans-serif;
  font-size:1rem;
  font-weight:700;
  color:#fff;
  background:#b69856;
  border:none;
  border-radius:.75rem;
  padding:.9rem 1.25rem;
  cursor:pointer;
  transition: background .2s ease, transform .06s ease;
  box-shadow: 0 6px 16px rgba(182,152,86,.18);
}
.cart-items__list.is-empty .empty-cart__btn--primary:hover,
.cart-items__list:has(.empty-cart__info) .empty-cart__btn--primary:hover{
  background:#a3874a;
}
.cart-items__list.is-empty .empty-cart__btn--primary:active,
.cart-items__list:has(.empty-cart__info) .empty-cart__btn--primary:active{
  transform: translateY(1px);
}

/* Texto de ayuda */
.cart-items__list.is-empty .empty-cart__help,
.cart-items__list:has(.empty-cart__info) .empty-cart__help{
  font-family:'Montserrat',sans-serif;
  font-size:.95rem;
  color:#666;
  margin-top:.25rem;
}
.cart-items__list.is-empty .empty-cart__help a,
.cart-items__list:has(.empty-cart__info) .empty-cart__help a{
  color:#b69856;
  font-weight:700;
  text-decoration:none;
}
.cart-items__list.is-empty .empty-cart__help a:hover,
.cart-items__list:has(.empty-cart__info) .empty-cart__help a:hover{
  text-decoration:underline;
}

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(1rem + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  background:#b69856; color:#fff;
  font-family:'Red Hat Display',sans-serif; font-size:1rem; font-weight:600;
  padding:10px 20px; border-radius:8px;
  box-shadow:0 4px 8px rgba(0,0,0,.2);
  z-index:9999; opacity:0;
  animation:toast-in .3s forwards, toast-out .3s forwards 4.2s;
}
@media (min-width:768px){
  .toast{ left:auto; right:24px; bottom:24px; transform:none; }
}
.toast--hide{ display:none !important; }
@keyframes toast-in{ from{opacity:0; transform:translateY(100%) translateX(-50%);} to{opacity:1; transform:translateY(0) translateX(-50%);} }
@keyframes toast-out{ from{opacity:1; transform:translateY(0) translateX(-50%);} to{opacity:0; transform:translateY(100%) translateX(-50%);} }
@media (min-width:768px){
  @keyframes toast-in{ from{opacity:0; transform:translateY(100%);} to{opacity:1; transform:translateY(0);} }
  @keyframes toast-out{ from{opacity:1; transform:translateY(0);} to{opacity:0; transform:translateY(100%);} }
}