/* Estilos mínimos complementarios a Tailwind.
 * Los colores de marca llegan como variables CSS que setea app.js
 * desde STORE_CONFIG (no editar acá por cliente). */

:root {
  --primary: #D4A84B;
  --on-primary: #111111;
  --primary-soft: rgba(212, 168, 75, .14);
  --header-bg: #0B0B0B;
}

html { -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
body { overscroll-behavior-y: none; }
body.no-scroll { overflow: hidden; }

/* --- Colores de marca --- */
.bg-primary { background-color: var(--primary); }
.text-primary { color: var(--primary); }
.text-on-primary { color: var(--on-primary); }
.border-primary { border-color: var(--primary); }
.ring-primary { --tw-ring-color: var(--primary); }
.bg-primary-soft { background-color: var(--primary-soft); }
.header-bg {
  background:
    radial-gradient(120% 140% at 100% 0%, var(--primary-soft), transparent 60%),
    var(--header-bg);
}
.focus-ring:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

/* Píldoras de categoría */
.pill { transition: background-color .2s, color .2s, border-color .2s; }
.pill.is-active { background-color: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* Opciones (entrega / pago) seleccionadas */
.option.is-selected { border-color: var(--primary); background-color: var(--primary-soft); }
.option.is-selected .option-dot { border-color: var(--primary); box-shadow: inset 0 0 0 4px #fff; background: var(--primary); }

/* Campos con error */
.field.has-error { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }

/* --- Scrollbars --- */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.thin-scrollbar { scrollbar-width: thin; scrollbar-color: #d6d3d1 transparent; }
.thin-scrollbar::-webkit-scrollbar { width: 6px; }
.thin-scrollbar::-webkit-scrollbar-thumb { background: #d6d3d1; border-radius: 9999px; }

/* --- Safe areas (iPhone) --- */
.pb-safe { padding-bottom: max(.75rem, env(safe-area-inset-bottom)); }
.pb-safe-4 { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }

/* --- Placeholder de imagen --- */
.img-placeholder {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.55), transparent 55%),
    var(--primary-soft);
  color: var(--primary);
}

/* --- Animaciones --- */
#checkout.is-open #checkout-overlay { opacity: 1; }
#checkout.is-open #checkout-panel { transform: translateY(0); }
#cart-bar.is-visible { transform: translateY(0); }
#toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.bump { animation: bump .3s ease-out; }

/* Anclas con offset para la barra sticky */
.menu-section { scroll-margin-top: var(--sticky-h, 120px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
}