/* Estilos complementarios a Tailwind — Inara by Alma */
:root { color-scheme: light; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; -webkit-text-size-adjust: 100%; }
body { background: #fafaee; color: #1a1c15; text-rendering: optimizeLegibility; }

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal;
  text-transform: none; display: inline-block; white-space: nowrap; direction: ltr;
  -webkit-font-smoothing: antialiased; font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
  user-select: none;
}
.icon-fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }

:focus-visible { outline: 2px solid #c3a66a; outline-offset: 3px; border-radius: 2px; }
::selection { background: #fcdc9b; color: #1a1c15; }

/* Header: sombra al hacer scroll */
.site-header { transition: box-shadow .3s ease, background-color .3s ease; }
.site-header.is-scrolled { box-shadow: 0 6px 24px -12px rgba(30,32,25,.18); }

/* Aparición suave al hacer scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* FAQ con <details> nativo */
details.faq > summary { list-style: none; cursor: pointer; }
details.faq > summary::-webkit-details-marker { display: none; }
details.faq > summary .faq-icon { transition: transform .3s ease; }
details.faq[open] > summary .faq-icon { transform: rotate(180deg); }

/* Cesta lateral */
.cart-panel { transition: transform .45s cubic-bezier(.22,.8,.26,1); }
.cart-overlay { transition: opacity .35s ease; }
body.cart-open { overflow: hidden; }

/* Scroll horizontal de filtros sin barra visible */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Selects con flecha propia */
.select-botanic {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2348473d' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}

/* Imagen de producto: proporción estable antes de cargar */
.img-cover { width: 100%; height: 100%; object-fit: cover; }