/* ==========================================================================
   PULIDO DEL SITIO (todas las páginas de AMA) — 2026-11-01
   Menú de categorías con entrada animada y esquinas redondeadas; subcategorías que salen como
   una pestaña debajo de su categoría (sin estirar todo el menú); barra de desplazamiento propia;
   logo de modo oscuro con los colores reales de la flor.
   ========================================================================== */

/* ---- barra de desplazamiento: fina, redonda y del color de la marca ---- */
html { scrollbar-width: thin; scrollbar-color: #dba7b6 transparent; }
html.dark { scrollbar-color: #6a4250 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #dba7b6; border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: #c9849a; }
html.dark ::-webkit-scrollbar-thumb { background-color: #6a4250; }
html.dark ::-webkit-scrollbar-thumb:hover { background-color: #8a5566; }

/* ---- menú de categorías (PC) ---- */
@media (min-width: 1024px) {
  #header .mega-menu-container {
    border-radius: 0 0 20px 20px;
    border-top-color: transparent;
    overflow: visible !important;
    box-shadow: 0 28px 50px -24px rgba(110, 32, 58, 0.28), 0 8px 18px -10px rgba(110, 32, 58, 0.14) !important;
    transition: opacity 0.26s ease, visibility 0.26s !important;
  }
  html.dark #header .mega-menu-container { box-shadow: 0 28px 60px -24px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(240, 150, 175, 0.08) !important; }
  /* si el menú entra en la pantalla, va entero (y la pestaña de subcategorías puede asomar por
     debajo); si no entra (pantallas bajas o con zoom), se desplaza por dentro con la barra
     invisible. Lo decide sitio.js midiendo (clase .mega-desborda). */
  #header .mega-menu-container > .mega-grilla { max-height: none !important; overflow: visible !important; padding-bottom: 1.4rem !important; }
  #header .mega-menu-container.mega-desborda {
    max-height: var(--mega-alto, 70vh); overflow-y: auto !important; overscroll-behavior: contain;
    scrollbar-width: none;
  }
  #header .mega-menu-container.mega-desborda::-webkit-scrollbar { display: none; }
  #header .mega-menu-container .ama-sub > ul.pestana-desborda { overflow-y: auto !important; overscroll-behavior: contain; scrollbar-width: none; }
  #header .mega-menu-container .ama-sub > ul.pestana-desborda::-webkit-scrollbar { display: none; }

  /* entrada: el encabezado y cada categoría bajan apenas y aparecen, una tras otra */
  #header .mega-menu-container > div:first-child,
  #header .mega-menu-container .mega-grilla > * {
    opacity: 0; transform: translateY(-6px);
    transition: opacity 0.32s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0s;
  }
  #mainNav li.group:hover .mega-menu-container > div:first-child,
  #mainNav li.group:focus-within .mega-menu-container > div:first-child,
  #mainNav li.group:hover .mega-menu-container .mega-grilla > *,
  #mainNav li.group:focus-within .mega-menu-container .mega-grilla > * {
    opacity: 1; transform: none;
    transition-delay: calc(var(--k, 0) * 22ms + 40ms);
  }

  /* cada categoría: el fondo y el ícono responden con suavidad */
  #header .mega-menu-container .mega-grilla .ama-sub__fila > a,
  #header .mega-menu-container .mega-grilla > .mb-3 > a {
    transition: background-color 0.22s ease, color 0.22s ease !important;
  }
  #header .mega-menu-container .mega-grilla a svg,
  #header .mega-menu-container .mega-grilla a img,
  #header .mega-menu-container .mega-grilla a [class*="icono"] { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
  #header .mega-menu-container .mega-grilla a:hover svg,
  #header .mega-menu-container .mega-grilla a:hover img,
  #header .mega-menu-container .mega-grilla a:hover [class*="icono"] { transform: scale(1.08); }

  /* subcategorías: la fila de la categoría y su pestaña comparten el mismo fondo y forman UNA
     sola pieza que baja del menú; los nombres quedan alineados con el de la categoría */
  #header .mega-menu-container .mega-grilla .ama-sub { position: relative; }
  #header .mega-menu-container .mega-grilla .ama-sub > ul {
    display: block !important;
    position: absolute; z-index: 5;
    top: 100%; left: 0; right: 0;
    margin: 0 !important;
    padding: 0.35rem 0.75rem 0.85rem 2.75rem !important;
    border: 0 !important;
    border-radius: 0 0 14px 14px;
    background: var(--color-bg-alt, #f8f0eb);
    box-shadow: 0 24px 34px -22px rgba(110, 32, 58, 0.35);
    opacity: 0; visibility: hidden;
    clip-path: inset(0 0 100% 0 round 0 0 14px 14px);
    transition: clip-path 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, visibility 0.38s;
  }
  html.dark #header .mega-menu-container .mega-grilla .ama-sub > ul { box-shadow: 0 26px 40px -22px rgba(0, 0, 0, 0.75); }
  #header .mega-menu-container .mega-grilla .ama-sub:hover > ul,
  #header .mega-menu-container .mega-grilla .ama-sub.abierta > ul,
  #header .mega-menu-container .mega-grilla .ama-sub:focus-within > ul {
    opacity: 1; visibility: visible;
    clip-path: inset(0 0 0 0 round 0 0 14px 14px);
  }
  /* la fila abierta toma el mismo fondo que la pestaña: se leen como una sola pieza */
  #header .mega-menu-container .mega-grilla .ama-sub:hover > .ama-sub__fila,
  #header .mega-menu-container .mega-grilla .ama-sub.abierta > .ama-sub__fila,
  #header .mega-menu-container .mega-grilla .ama-sub:focus-within > .ama-sub__fila {
    background: var(--color-bg-alt, #f8f0eb);
    border-radius: 12px 12px 0 0;
  }
  #header .mega-menu-container .mega-grilla .ama-sub:hover > .ama-sub__fila > a,
  #header .mega-menu-container .mega-grilla .ama-sub.abierta > .ama-sub__fila > a { background: transparent !important; }
  /* una línea fina a la izquierda, bajo el ícono, une la categoría con sus subcategorías */
  #header .mega-menu-container .mega-grilla .ama-sub > ul::before {
    content: ""; position: absolute; left: 1.45rem; top: 0.2rem; bottom: 1rem;
    width: 1px; background: color-mix(in srgb, var(--color-brand, #b42e58) 30%, transparent);
  }
  #header .mega-menu-container .mega-grilla .ama-sub > ul a {
    padding: 0.34rem 0 !important;
    font-size: 0.7rem !important; letter-spacing: 0.04em;
    color: var(--color-text-light) !important;
    transition: color 0.2s ease, transform 0.25s ease;
  }
  #header .mega-menu-container .mega-grilla .ama-sub > ul a:hover { color: var(--color-brand) !important; transform: translateX(3px); }
}

/* ---- botones de la ficha de producto: la misma forma que los de la portada ---- */
.ficha-acciones > a, .ficha-acciones > button, .ficha-acciones .btn, .btn-add-cart {
  border-radius: 14px !important;
  min-height: 50px;
  padding-inline: 1.6rem !important;
  display: inline-flex; align-items: center; justify-content: center;
  text-transform: none !important; letter-spacing: 0.005em !important; font-size: 1rem !important; font-weight: 600 !important;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}
.ficha-acciones > a:hover, .ficha-acciones > button:not(:disabled):hover, .btn-add-cart:not(:disabled):hover { transform: translateY(-2px); }

/* ---- cambio de tema: la foto del producto cambia junto con el resto de la página (tenía su
   propia animación de navegación y se movía por separado) ---- */
html.zm-cambio-tema [style*="view-transition-name"] { view-transition-name: none !important; }

/* ---- logo: entrada al cargar la página ---- */
#headerLogo.ama-logo-entra { animation: ama-logo 1s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes ama-logo {
  from { opacity: 0; clip-path: inset(0 100% 0 0); filter: blur(3px); }
  60% { filter: blur(0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); filter: none; }
}
/* en oscuro, el logo propio (flor con sus colores reales): nada de filtros que cambien el rosa y el verde */
html.dark #headerLogo { filter: none !important; }

@media (prefers-reduced-motion: reduce) {
  #header .mega-menu-container *, #headerLogo { transition: none !important; animation: none !important; }
}