/* Elimina scroll horizontal accidental */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) { html, body { overflow-x: hidden; } }

/* Safe-areas iOS */
body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}

/* ====== Search ====== */
.search{flex:1}
.search input{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid transparent;
  outline:0;
}
.search input:focus{border-color:#38bdf8;box-shadow:0 0 0 4px var(--ring)}

/* ====== Cart button ====== */
.cart-btn{
  margin-left:auto; display:flex; align-items:center; gap:8px;
  background:#fff; color:var(--brand); border:0; border-radius:999px; padding:10px 14px; cursor:pointer;
}
.cart-count{background:#38bdf8;color:#fff;border-radius:999px;padding:2px 8px;font-size:12px}

/* ====== Grid de productos ====== */
.grid{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:44px}
@media(min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:992px){.grid{grid-template-columns:repeat(3,1fr)}}

.card{background:var(--card);border:1px solid #e5e7eb;border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.card__img{height:160px;background:#f1f5ff;display:grid;place-items:center;font-weight:800;color:var(--brand)}
.card__body{padding:12px 12px 6px}
.card__title{margin:0 0 4px;font-size:18px;font-weight:800}
.card__desc{margin:0 0 8px;color:var(--muted);font-size:14px}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.badge{font-size:12px;padding:4px 8px;border-radius:999px;background:#eef2ff;color:#1d4ed8;border:1px solid #c7d2fe}
.badge--sale{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}
.badge--hot{background:#fff1f2;color:#9f1239;border-color:#fecdd3}
.card__price{display:flex;align-items:baseline;gap:8px}
.price{font-size:20px;font-weight:800}
.price--old{text-decoration:line-through;color:#94a3b8;font-weight:600}
.card__footer{padding:12px;display:flex;gap:8px}
.btn{flex:1;border:1px solid var(--brand);background:#fff;color:var(--brand);border-radius:12px;padding:10px 12px;font-weight:800;cursor:pointer}
.btn.primary{background:var(--brand);color:#fff}

/* ====== Imágenes en cards ====== */
.card__media{height:180px;background:#f1f5f9;border-bottom:1px solid #eef2f7;overflow:hidden}
.card__photo{width:100%;height:100%;object-fit:cover;display:block}
.card__emoji{height:100%;display:grid;place-items:center;font-size:42px}
@media (min-width:768px){ .card__media{height:200px} }

/* ====== Drawer / Overlay / Modal ====== */
/* Capas */
.overlay{ z-index:80; }
.drawer { z-index:100; }
.modal  { z-index:120; }

/* Drawer (desktop/tablet: desde la derecha) */
.drawer{
  position:fixed; top:0; right:-420px; height:100vh;
  width:min(100vw,420px);
  background:#fff;
  border-left:1px solid #e5e7eb;
  box-shadow:-10px 0 30px rgba(2,6,23,.15);
  transition:right .30s ease;
  display:flex; flex-direction:column; box-sizing:border-box;
}
.drawer.open{ right:0; }
.drawer__header{ position:sticky; top:0; background:#fff; z-index:1; display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #e5e7eb }
.drawer__body{ padding:12px 16px; overflow:auto; -webkit-overflow-scrolling:touch; flex:1; display:flex; flex-direction:column; gap:12px }
.drawer__footer{ border-top:1px solid #e5e7eb; padding:12px 16px; display:flex; flex-direction:column; gap:12px; background:#fafafa; padding-bottom:max(12px, env(safe-area-inset-bottom)) }

/* Drawer móvil con transform (evita desplazar el layout) */
@media (max-width:640px){
  .drawer{
    right:0; width:100vw; border-left:none; border-radius:0;
    transform:translateX(100%);
    transition:transform .30s ease;
  }
  .drawer.open{ transform:translateX(0); }
}

/* Items del carrito */
.cart-item{display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;border:1px solid #edf0f7;border-radius:12px;padding:8px}
.cart-item__img{width:56px;height:56px;background:#eef2ff;border-radius:8px;display:grid;place-items:center;color:var(--brand);font-weight:800}
.cart-item__title{margin:0 0 4px;font-weight:700}
.cart-item__meta{color:#64748b;font-size:12px}
.qty{display:flex;align-items:center;gap:8px}
.qty button{width:36px;height:36px;border-radius:10px;border:1px solid #e5e7eb;background:#fff;cursor:pointer}
.qty span{min-width:28px;text-align:center;font-weight:700}
/* Botón “Eliminar” sin corte */
.qty .remove{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; min-height:42px; min-width:110px;
  white-space:nowrap; border-radius:12px;
  border:1px solid #fecaca; background:#fff1f2; color:#b91c1c; cursor:pointer;
}

/* Overlay */
.overlay{
  position:fixed; inset:0;
  background:rgba(2,6,23,.45);
  backdrop-filter:saturate(140%) blur(2px);
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.overlay.show{ opacity:1; pointer-events:auto; }

/* Modal (Detalles + Checkout) */
.modal{
  position:fixed; inset:0; padding:1rem;
  display:grid; place-items:end; visibility:hidden;
}
.modal.open{ visibility:visible; }
.modal__content{
  width:min(92vw,680px); background:#fff;
  border-radius:20px 20px 0 0; padding:16px;
  box-shadow:0 24px 80px rgba(2,6,23,.35);
  transform:translateY(100%); transition:transform .28s ease;
}
.modal.open .modal__content{ transform:translateY(0); }
.modal__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.modal__body{max-height:65vh;overflow:auto}
@media (min-width:768px){
  .modal{ place-items:center; }
  .modal__content{ border-radius:20px; }
  .modal__body{ max-height:70vh; }
}

/* ====== Totales & botones ====== */
.totals{display:flex;flex-direction:column;gap:6px}
.totals__row{display:flex;justify-content:space-between;color:#475569}
.icon-btn{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:10px;cursor:pointer}


.nav-hidden {
    transform: translateY(-100%);
  }

.nav-visible {
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transform: translateY(0);
}

#navbar {
    transition: transform 0.4s ease-in-out, background-color 0.4s ease-in-out, backdrop-filter 0.4s ease-in-out;
}


/* ===== Modal de éxito ===== */
.modal-success{
  position: fixed; inset: 0; z-index: 140; padding: 1rem;
  display: grid; place-items: center; visibility: hidden;
}
.modal-success.open{ visibility: visible; }
.modal-success__card{
  width: min(92vw, 480px);
  background: #fff; border-radius: 20px;
  box-shadow: 0 24px 80px rgba(2,6,23,.35);
  padding: 20px 18px; text-align: center;
  transform: scale(.92); opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}
.modal-success.open .modal-success__card{ transform: scale(1); opacity: 1; }
.modal-success__img{
  width: 120px; height: 120px; object-fit: contain;
  display: block; margin: 6px auto 10px;
}
.modal-success__title{
  font-size: 1.25rem; font-weight: 900; color: #0c1325; margin: 4px 0 2px;
}
.modal-success__text{ color:#475569; margin: 0 0 12px; }
.modal-success__id{
  display:inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background:#f1f5f9; color:#0f172a; padding:6px 10px; border-radius:10px; font-size:.9rem;
}
.modal-success__actions{ display:flex; gap:10px; margin-top:14px; }
.modal-success__btn{
  flex:1; padding:12px 14px; border-radius:12px; font-weight:800; cursor:pointer;
  border:1px solid #e5e7eb; background:#fff; color:#0c1325;
}
.modal-success__btn.primary{ background:#0c1325; color:#fff; border:0; }

input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"] {
  -webkit-appearance: none; /* Quita estilo nativo en iOS/Safari */
  -moz-appearance: none;    /* Quita estilo nativo en Firefox */
  appearance: none;         /* Quita estilo nativo en otros navegadores */
  
  outline: none;            /* Quita borde azul al enfocar */
  border: 1px solid #ccc;   /* Borde personalizado */
  border-radius: 8px;       /* Bordes redondeados */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Sombra uniforme */
  
  padding: 10px 12px;
  font-size: 16px;
  background-color: white;  /* Asegura fondo blanco */
  width: 100%;              /* Ocupa todo el ancho disponible */
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus {
  border-color: #4f46e5;  /* Color en focus */
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}




/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}