/*
Theme Name:   AINNATA Child
Template:     hello-elementor
Version:      1.5.0
*/

/* =================================================================
   THE SEASONS — @font-face directo
   Las URLs de Adobe cargan cuando el visitante viene de ainnatastudio.com
   font-family: "The Seasons" (nombre correcto para Elementor)
   ================================================================= */

@font-face {
  font-family: "The Seasons";
  src: url("https://use.typekit.net/af/60c855/00000000000000007758a676/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2"),
       url("https://use.typekit.net/af/60c855/00000000000000007758a676/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "The Seasons";
  src: url("https://use.typekit.net/af/9c8f7e/00000000000000007750b305/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i3&v=3") format("woff2"),
       url("https://use.typekit.net/af/9c8f7e/00000000000000007750b305/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i3&v=3") format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "The Seasons";
  src: url("https://use.typekit.net/af/0726c3/00000000000000007758a678/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),
       url("https://use.typekit.net/af/0726c3/00000000000000007758a678/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "The Seasons";
  src: url("https://use.typekit.net/af/cd6931/00000000000000007750b301/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"),
       url("https://use.typekit.net/af/cd6931/00000000000000007750b301/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "The Seasons";
  src: url("https://use.typekit.net/af/2a403e/00000000000000007758a67a/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),
       url("https://use.typekit.net/af/2a403e/00000000000000007758a67a/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "The Seasons";
  src: url("https://use.typekit.net/af/f7edd5/00000000000000007750b302/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"),
       url("https://use.typekit.net/af/f7edd5/00000000000000007750b302/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* =================================================================
   AINNATA HEADER
   
   Clases que asignas en Elementor > Avanzado > CSS Classes:
     .ainnata-topbanner → barra negra superior
     .ainnata-menu       → contenedor del menú (sticky: top)
     .ainnata-logo        → widget logo
     .ainnata-cta         → botón "Agendar Ritual"
   ================================================================= */

.ainnata-topbanner {
  background-color: #000000 !important;
}

.ainnata-menu {
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

/* ── TRANSPARENTE ── */
.ainnata-menu:not(.elementor-sticky--active):not(.header-hovered) {
  background-color: transparent !important;
  box-shadow: none !important;
}
.ainnata-menu:not(.elementor-sticky--active):not(.header-hovered)
  .elementor-widget-n-menu {
  --n-menu-title-color-normal: #ffffff;
  --n-menu-title-color-hover:  rgba(255,255,255,0.65);
  --n-menu-title-color-active: #ffffff;
  --n-menu-toggle-icon-color:  #ffffff;
}
.ainnata-menu:not(.elementor-sticky--active):not(.header-hovered)
  .e-n-menu-title-text { color: #ffffff !important; }
.ainnata-menu:not(.elementor-sticky--active):not(.header-hovered)
  .ainnata-logo img,
.ainnata-menu:not(.elementor-sticky--active):not(.header-hovered)
  .elementor-element-fa3730c img { filter: none; }
.ainnata-menu:not(.elementor-sticky--active):not(.header-hovered)
  .ainnata-cta .elementor-button,
.ainnata-menu:not(.elementor-sticky--active):not(.header-hovered)
  .elementor-element-e16f665 .elementor-button {
  color: #ffffff !important;
  border-color: #b7b1f2 !important;
  background-color: transparent !important;
}
.ainnata-menu:not(.elementor-sticky--active):not(.header-hovered)
  .elementor-element-73053bf .elementor-icon,
.ainnata-menu:not(.elementor-sticky--active):not(.header-hovered)
  .elementor-element-73053bf .elementor-icon i,
.ainnata-menu:not(.elementor-sticky--active):not(.header-hovered)
  .elementor-element-73053bf .elementor-icon svg,
.ainnata-menu:not(.elementor-sticky--active):not(.header-hovered)
  .elementor-element-34ac344 .elementor-icon,
.ainnata-menu:not(.elementor-sticky--active):not(.header-hovered)
  .elementor-element-34ac344 .elementor-icon i,
.ainnata-menu:not(.elementor-sticky--active):not(.header-hovered)
  .elementor-element-34ac344 .elementor-icon svg {
  color: #ffffff !important; fill: #ffffff !important;
}
.ainnata-menu:not(.elementor-sticky--active):not(.header-hovered)
  .elementor-element-a1aba1c .elementor-cart__toggle,
.ainnata-menu:not(.elementor-sticky--active):not(.header-hovered)
  .elementor-element-a1aba1c .elementor-cart__toggle i,
.ainnata-menu:not(.elementor-sticky--active):not(.header-hovered)
  .elementor-element-a1aba1c .elementor-cart__toggle svg,
.ainnata-menu:not(.elementor-sticky--active):not(.header-hovered)
  .elementor-element-a1aba1c .elementor-button-icon i,
.ainnata-menu:not(.elementor-sticky--active):not(.header-hovered)
  .elementor-element-a1aba1c .elementor-button-icon svg {
  color: #ffffff !important; fill: #ffffff !important;
}

/* ── BLANCO: scroll + hover ── */
.ainnata-menu.elementor-sticky--active {
  background-color: rgba(255,255,255,0.98) !important;
  box-shadow: 0 2px 24px rgba(0,0,0,0.08) !important;
}
.ainnata-menu.header-hovered {
  background-color: rgba(255,255,255,0.96) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06) !important;
}
.ainnata-menu.elementor-sticky--active .elementor-widget-n-menu,
.ainnata-menu.header-hovered          .elementor-widget-n-menu {
  --n-menu-title-color-normal: #0d0d0d;
  --n-menu-title-color-hover:  #555555;
  --n-menu-title-color-active: #0d0d0d;
  --n-menu-toggle-icon-color:  #0d0d0d;
}
.ainnata-menu.elementor-sticky--active .e-n-menu-title-text,
.ainnata-menu.header-hovered          .e-n-menu-title-text {
  color: #0d0d0d !important;
}
.ainnata-menu.elementor-sticky--active .ainnata-logo img,
.ainnata-menu.elementor-sticky--active .elementor-element-fa3730c img,
.ainnata-menu.header-hovered          .ainnata-logo img,
.ainnata-menu.header-hovered          .elementor-element-fa3730c img {
  filter: invert(1);
}
.ainnata-menu.elementor-sticky--active .ainnata-cta .elementor-button:not(:hover),
.ainnata-menu.elementor-sticky--active .elementor-element-e16f665 .elementor-button:not(:hover),
.ainnata-menu.header-hovered          .ainnata-cta .elementor-button:not(:hover),
.ainnata-menu.header-hovered          .elementor-element-e16f665 .elementor-button:not(:hover) {
  color: #0d0d0d !important;
  border-color: #0d0d0d !important;
  background-color: transparent !important;
}
.ainnata-menu.elementor-sticky--active .elementor-element-73053bf .elementor-icon,
.ainnata-menu.elementor-sticky--active .elementor-element-73053bf .elementor-icon i,
.ainnata-menu.elementor-sticky--active .elementor-element-73053bf .elementor-icon svg,
.ainnata-menu.elementor-sticky--active .elementor-element-34ac344 .elementor-icon,
.ainnata-menu.elementor-sticky--active .elementor-element-34ac344 .elementor-icon i,
.ainnata-menu.elementor-sticky--active .elementor-element-34ac344 .elementor-icon svg,
.ainnata-menu.header-hovered          .elementor-element-73053bf .elementor-icon,
.ainnata-menu.header-hovered          .elementor-element-73053bf .elementor-icon i,
.ainnata-menu.header-hovered          .elementor-element-73053bf .elementor-icon svg,
.ainnata-menu.header-hovered          .elementor-element-34ac344 .elementor-icon,
.ainnata-menu.header-hovered          .elementor-element-34ac344 .elementor-icon i,
.ainnata-menu.header-hovered          .elementor-element-34ac344 .elementor-icon svg {
  color: #0d0d0d !important; fill: #0d0d0d !important;
}
.ainnata-menu.elementor-sticky--active .elementor-element-a1aba1c .elementor-cart__toggle,
.ainnata-menu.elementor-sticky--active .elementor-element-a1aba1c .elementor-cart__toggle i,
.ainnata-menu.elementor-sticky--active .elementor-element-a1aba1c .elementor-cart__toggle svg,
.ainnata-menu.elementor-sticky--active .elementor-element-a1aba1c .elementor-button-icon i,
.ainnata-menu.elementor-sticky--active .elementor-element-a1aba1c .elementor-button-icon svg,
.ainnata-menu.header-hovered          .elementor-element-a1aba1c .elementor-cart__toggle,
.ainnata-menu.header-hovered          .elementor-element-a1aba1c .elementor-cart__toggle i,
.ainnata-menu.header-hovered          .elementor-element-a1aba1c .elementor-cart__toggle svg,
.ainnata-menu.header-hovered          .elementor-element-a1aba1c .elementor-button-icon i,
.ainnata-menu.header-hovered          .elementor-element-a1aba1c .elementor-button-icon svg {
  color: #0d0d0d !important; fill: #0d0d0d !important;
}

/* ── DROPDOWN ── */
.ainnata-menu .e-n-menu-content > .e-con {
  background-color: #ffffff !important;
  border-top: 2px solid #b7b1f2 !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.10) !important;
}

/* ── POSICIÓN: flotante en todas las páginas ──
   header:has(.ainnata-header) apunta exactamente al <header> del sitio
   identificado por la clase personalizada .ainnata-header — nada más. */
header:has(.ainnata-header) {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
}


/* =====================================================================
   GALERÍA WooCommerce — thumbnails verticales a la izquierda
   Solo desktop. Mobile mantiene comportamiento nativo (thumbnails abajo).
   ===================================================================== */

@media (min-width: 768px) {

  /* 1. Wrapper principal: flex horizontal */
  .woocommerce-product-gallery {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 10px;
  }

  /* 2. Lista de thumbnails: va a la izquierda, columna vertical */
  ol.flex-control-nav.flex-control-thumbs {
    order: -1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 72px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    /* Misma altura que la imagen principal — scroll si hay más de 4 */
    align-self: stretch !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* Ocultar scrollbar visualmente */
    scrollbar-width: none !important;
  }
  ol.flex-control-nav.flex-control-thumbs::-webkit-scrollbar {
    display: none !important;
  }

  /* 3. Cada thumbnail */
  ol.flex-control-nav.flex-control-thumbs li {
    display: block !important;
    width: 72px !important;
    height: 72px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* 4. Imagen del thumbnail */
  ol.flex-control-nav.flex-control-thumbs li img {
    display: block !important;
    width: 72px !important;
    height: 72px !important;
    object-fit: cover !important;
    cursor: pointer !important;
    opacity: 0.55;
    transition: opacity 0.25s ease;
  }
  ol.flex-control-nav.flex-control-thumbs li img:hover,
  ol.flex-control-nav.flex-control-thumbs li img.flex-active {
    opacity: 1;
  }

  /* 5. Imagen principal ocupa el resto del ancho */
  .woocommerce-product-gallery__wrapper {
    flex: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

}