.card{
  position: relative;
  border: 2px solid transparent;
  border-radius: 18px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from var(--angle), #ffdfe9, #e6d9ff, #ffdfe9) border-box;
  box-shadow: 0 12px 28px rgba(15,17,21,0.06);
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease;
  animation: spin-border 12s linear infinite;
}
.card:hover{ box-shadow: 0 16px 34px rgba(15,17,21,0.10); transform: translateY(-2px); }
.card img{ width:100%; height:240px; object-fit:cover }
.card .content{ padding:14px 16px }
.card .title{ font-weight:700; margin:0 0 6px }
.card .desc{ color:#566; margin:0 }
.card .footer{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-top:1px solid #f2ecf5;
}
.price{ color:#d05c87; font-weight:800 }

.cart-panel{position:fixed;top:0;right:0;width:min(380px,92%);height:100%;background:#fff;border-left:1px solid #eee;padding:16px;z-index:120}
.cart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cart-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow:auto}
.cart-items li{display:flex;align-items:center;gap:10px;border:1px solid #eee;border-radius:12px;padding:10px}
.cart-items img{width:52px;height:52px;object-fit:cover;border-radius:8px}
.cart-footer{position:absolute;left:0;right:0;bottom:0;padding:16px;border-top:1px solid #eee;display:flex;align-items:center;justify-content:space-between;background:#fff}
.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px;border:2px solid #E28AA7;background:transparent;color:#E28AA7;cursor:pointer}
.badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;font-size:12px;line-height:18px;font-weight:700;background:#E28AA7;color:#fff}

.card.product-card{transform:translateX(-18px)}
.card.product-card.reveal-in{transform:translateX(0);transition:transform .6s ease}
.products-section .card.product-card:nth-child(even){transform:translateX(18px)}
@media (prefers-reduced-motion: reduce){
  .card.product-card,.card.product-card.reveal-in{transition:none!important;transform:none!important}
}

.modal{ position:fixed; inset:0; z-index:1300; display:block }
.modal[hidden]{ display:none }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45) }
.modal-content{
  position:relative; width:min(980px,94vw); max-height:88vh;
  margin:6vh auto; background:#fff; border-radius:18px;
  box-shadow:0 24px 48px rgba(0,0,0,.18);
  padding:18px 18px 20px; overflow:auto;
}
.modal-close{ position:absolute; right:12px; top:8px; border:0; background:transparent; font-size:28px; line-height:1; cursor:pointer }
.modal-hero{ display:flex; align-items:center; gap:16px; margin-bottom:12px }
.modal-hero img{ width:84px; height:84px; object-fit:cover; border-radius:12px; border:1px solid #eee }
.modal-options{ display:grid; gap:12px; margin:10px 0 }
.option-group{ background:#fff; border:1px solid #eee; border-radius:14px; padding:12px }
.option-title{ font-weight:700; margin:0 0 6px }
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chip{ border:1px solid #ddd; padding:.52rem .9rem; border-radius:999px; cursor:pointer; background:#fff }
.chip.active{ background:#FBE6EE; border-color:#E28AA7; color:#D05386 }
.btn-outline{ background:#fff; color:#D05386; border:1.5px solid #D05386; padding:.7rem 1.1rem; border-radius:30px; cursor:pointer }
.btn-outline:hover{ background:rgba(239,184,200,0.12) }
.delivery-panel{ margin-top:.8rem; display:none }
#delivery-map{ width:100%; height:300px; border-radius:12px; border:1px solid #eee; margin:.6rem 0; pointer-events:none }
.delivery-row{ display:flex; justify-content:space-between; margin:.3rem 0; color:#444 }

.whatsapp-fab{
  position:fixed; right:18px; bottom:80px; z-index:1200;
  width:64px; height:64px; border-radius:50%;
  background:#25D366 url('assets/img/whatsapp.png') center/30px 30px no-repeat;
  box-shadow:0 12px 20px rgba(0,0,0,.15);
  display:block; transform:translateZ(0);
}
@media (max-width: 768px) {
  .whatsapp-fab { bottom: 18px; }
}

/* Estilos para modales de autenticación */
.auth-modal {
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: none; /* Oculto por defecto */
}

.auth-modal:not([hidden]) {
  display: flex !important;
}

.auth-modal-content {
  width: min(450px, 90vw) !important;
  max-width: 450px;
  margin: 0 !important;
  position: relative;
  z-index: 1;
  transform: translateY(0);
}

.auth-form {
  margin-top: 20px;
}

.auth-form .form-field {
  margin-bottom: 16px;
  position: relative;
}

.auth-form .form-field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: #333;
}

.auth-form .form-field input,
.auth-form .form-field textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #ddd;
  border-radius: 10px;
  font-size: 15px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.auth-form .form-field input:focus,
.auth-form .form-field textarea:focus {
  outline: none;
  border-color: #D05386;
  box-shadow: 0 0 0 3px rgba(208, 83, 134, 0.1);
}

.auth-form .form-field textarea {
  min-height: 80px;
  resize: vertical;
  font-family: inherit;
}

/* Campos alineados a la izquierda */
.auth-form .form-field {
  text-align: left;
}

/* Ajustes para el botón de mostrar contraseña */
.auth-form .toggle-pw {
  padding: 8px 14px;
  background: #fff;
  border: 1.5px solid #D05386;
  border-radius: 8px;
  color: #D05386;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.auth-form .toggle-pw:hover {
  background: #FBE6EE;
}

@media (max-width: 768px) {
  .auth-modal-content {
    width: 95vw !important;
  }
}