/** Shopify CDN: Minification failed

Line 327:18 Unexpected "{"
Line 327:27 Expected ":"
Line 333:18 Unexpected "{"
Line 333:27 Expected ":"
Line 337:18 Unexpected "{"
Line 337:27 Expected ":"
Line 347:18 Unexpected "{"
Line 347:27 Expected ":"
Line 351:18 Unexpected "{"
Line 351:27 Expected ":"
... and 2 more hidden warnings

**/
/* ========================= MENU ITEMS (links de la barra) ========================= */
@media (min-width: 1024px) {
  .site-header nav .no-js-focus-wrapper > a,
  .site-header nav .no-js-focus-wrapper > button {
    text-underline-offset: .2em; /* igual que el footer: estilo + grosor controlados por variables */
    -webkit-text-decoration: underline var(--rte-link-decoration-style) var(--underline-thickness);
    text-decoration: underline var(--rte-link-decoration-style) var(--underline-thickness);
    text-decoration-color: transparent; /* aparece solo en hover/focus */
  }

  .site-header nav .no-js-focus-wrapper > a:hover,
  .site-header nav .no-js-focus-wrapper > button:hover,
  .site-header nav .no-js-focus-wrapper > a:focus-visible,
  .site-header nav .no-js-focus-wrapper > button:focus-visible {
    text-decoration-color: inherit; /* mismo comportamiento que el footer */
  }

  /* activo/expandido: siempre visible */
  .site-header nav button[aria-expanded="true"] span.inline-block.pr-1,
  .site-header nav a[aria-current="page"],
  .site-header nav a[aria-current="true"] {
    -webkit-text-decoration: underline var(--rte-link-decoration-style) var(--underline-thickness);
    text-decoration: underline var(--rte-link-decoration-style) var(--underline-thickness);
    text-decoration-color: inherit;
  }
}

/* (opcional) fallback por si las variables no estuvieran definidas */
:root {
  --rte-link-decoration-style: wavy; /* zigzag */
  --underline-thickness: 1.5px;      /* ajusta al gusto */
}

/* ========================= MEGAMENÚS / SUBMENÚS
   - 8 cajas por fila (desktop)
   - Menor espacio entre items
   - Título centrado
   - Hover interior naranja (como antes)
   ========================= */

/* Variables del megamenú */
:root {
  --mm-hover-color: #f9782e; /* naranja original del hover */
  --mm-tint-opacity: .50;    /* (no usada ya con box-shadow, pero la dejamos por si acaso) */
  --mm-gap: 8px;             /* espacio entre cajas */
  --mm-radius: .5rem;        /* radio de las imágenes */
}

/* 14 cajas por fila en TODOS los megamenús del header (>=1024px)
   (28 columnas y cada <li> ocupa 2 → 28/2 = 14 items) */
@media (min-width: 1024px) {
  [data-header-dropdown] > ul.grid {
    grid-template-columns: repeat(28, minmax(0, 1fr)) !important;
    gap: var(--mm-gap) !important;
    column-gap: var(--mm-gap) !important;
    row-gap: var(--mm-gap) !important;
  }

  [data-header-dropdown] > ul.grid > li {
    grid-column: span 2 / span 2 !important;
  }
}

/* Separadores como el del megamenú */
.section-site-header {
  border-bottom: 2px solid #EADBC2;
}

.shopify-section.section-footer > footer {
  border-top: 2px solid #EADBC2;
  padding-top: .01px; /* evita colapso de borde en algunos navegadores */
}

/* === Megamenú: títulos de colección — evitar montes y normalizar altura === */

/* 1) Limitar a 2 líneas con elipsis, permitir cortes y reservar altura uniforme */
[data-header-dropdown] .showcase-tile .mt-2\.5.text-center {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2; /* máx. 2 líneas */
  line-clamp: 2;
  word-break: break-word;
  hyphens: auto;
  line-height: 1.15;
  min-height: calc(2 * 1.15em); /* reserva espacio para 2 líneas */
}

/* 2) En laptops pequeñas (1024–1280px), hacer el texto un poco más chico */
@media (min-width: 1024px) and (max-width: 1280px) {
  [data-header-dropdown] .showcase-tile .mt-2\.5.text-center {
    font-size: 0.68rem;
    line-height: 1.1;
    min-height: calc(2 * 1.1em);
  }

  /* Opcional: un pelín más de espacio vertical entre filas */
  /* [data-header-dropdown] > ul.grid { row-gap: 0.75rem !important; } */
}

/* 3) (Opcional) Afinar un poco también en 1281–1440px */
@media (min-width: 1281px) and (max-width: 1440px) {
  [data-header-dropdown] .showcase-tile .mt-2\.5.text-center {
    font-size: 0.72rem;
  }
}

/* Cajas: usar todo el ancho del track y centrar contenido */
.showcase-tile {
  width: 100% !important;
}

.showcase-tile a {
  display: block;
  width: 100%;
  text-align: center !important;
  padding: 8px; /* reduce espacio interno y homogeneiza */
}

.showcase-tile a > div:first-child {
  position: relative;
  overflow: hidden;
  border-radius: var(--mm-radius);
}

/* Imágenes responsivas */
.showcase-tile img.media__styled-element {
  display: block;
  width: 100% !important;
  height: auto !important;
  transition: box-shadow .2s ease; /* usaremos el “tinte” con box-shadow inset */
}

/* Título SIEMPRE centrado */
.showcase-tile a > div:last-child {
  margin-top: .5rem !important;
  text-align: center !important;
  transition: color .2s ease;
}

/* -------- Hover interior naranja (como estaba antes), aplicado a TODOS los menús -------- */
@media (min-width: 1024px) and (hover: hover) {
  [data-header-dropdown] .showcase-tile a:hover img.media__styled-element {
    box-shadow: inset 0 0 0 2000px var(--mm-hover-color);
  }

  [data-header-dropdown] .showcase-tile a:hover > div:last-child {
    color: var(--mm-hover-color) !important;
  }
}

/* Accesibilidad: teclado / focus visible */
[data-header-dropdown] .showcase-tile a:focus-visible {
  outline: 2px solid var(--mm-hover-color);
  outline-offset: 2px;
}

[data-header-dropdown] .showcase-tile a:focus-visible img.media__styled-element {
  box-shadow: inset 0 0 0 2000px var(--mm-hover-color);
}

[data-header-dropdown] .showcase-tile a:focus-visible > div:last-child {
  color: var(--mm-hover-color) !important;
}

/* -------- Menú lateral móvil: mismo centrado y efecto al enfocar -------- */
.sidebar-nav .showcase-tile a > div:last-child {
  text-align: center !important;
}

.sidebar-nav .showcase-tile a {
  display: block;
  padding: 8px;
}

.sidebar-nav .showcase-tile a > div:first-child {
  position: relative;
  overflow: hidden;
  border-radius: var(--mm-radius);
}

.sidebar-nav .showcase-tile img.media__styled-element {
  display: block;
  width: 100% !important;
  height: auto !important;
  transition: box-shadow .2s ease;
}

/* En móvil no siempre hay :hover; mantenemos el feedback en focus-visible */
.sidebar-nav .showcase-tile a:focus-visible {
  outline: 2px solid var(--mm-hover-color);
  outline-offset: 2px;
}

.sidebar-nav .showcase-tile a:focus-visible img.media__styled-element {
  box-shadow: inset 0 0 0 2000px var(--mm-hover-color);
}

.sidebar-nav .showcase-tile a:focus-visible > div:last-child {
  color: var(--mm-hover-color) !important;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .showcase-tile img.media__styled-element,
  .showcase-tile a > div:last-child {
    transition: none !important;
  }
}

/* Línea separadora arriba del submenu/megamenu */
[data-header-dropdown] {
  border-top: 2px solid #EADBC2;
}

/* Permitir que el dropdown del buscador salga del header */
.section-site-header .px-section {
  overflow: visible !important;
}

/* Asegura que el input y su capa estén por encima del contenido normal */
.header-inline-search {
  z-index: 60;
}

/* Fondo del input transparente y placeholder #EADBC2 */
.header-inline-search .header-search-input {
  background: transparent !important;
}

.header-inline-search .header-search-input::placeholder,
.header-inline-search .header-search-input::-webkit-input-placeholder,
.header-inline-search .header-search-input::-moz-placeholder,
.header-inline-search .header-search-input:-ms-input-placeholder,
.header-inline-search .header-search-input::-ms-input-placeholder {
  color: #EADBC2 !important;
  opacity: 1;
}

/* --- Alinear verticalmente los iconos del input --- */
.header-inline-search .btn-icon {
  position: absolute;
  top: 0;
  bottom: 0;       /* centra verticalmente */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;      /* por encima del input */
}

.header-inline-search .btn-left {
  left: 0;
  padding-inline: .375rem; /* ~6px */
}

.header-inline-search .btn-right {
  right: 0;
  padding-inline: .375rem;
}

/* Tamaño de los iconos (ligeramente más pequeños para que no “salten” del input) */
.header-inline-search .btn-icon .icon {
  width: 1.125rem;  /* 18px */
  height: 1.125rem;
}

/* --- Línea separadora entre header y resultados (panel fullscreen) --- */
#predictiveSearchFullscreen {
  border-top: 2px solid #EADBC2;
}

/* ===== Desktop Main Nav: super bold + más espacio ===== */
@media (min-width: 1024px) {
  /* Aplica a botones y links del nivel superior */
  .section-site-header nav ul[x-ref="navigation"] > li > a,
  .section-site-header nav ul[x-ref="navigation"] > li > button {
    font-weight: 900 !important;      /* Máximo peso disponible; si tu fuente no tiene 900, caerá a 700/800 */
    padding-left: 1rem !important;    /* antes era ~0.625rem (px-2.5) */
    padding-right: 1rem !important;
  }
}

/* (Opcional) Si usas una fuente variable y quieres forzar aún más el peso en desktop: */
@media (min-width: 1024px) {
  .section-site-header nav ul[x-ref="navigation"] > li > a,
  .section-site-header nav ul[x-ref="navigation"] > li > button {
    font-variation-settings: "wght" 900;
  }
}

/* Quitar bordes de tiles (imagen + título) solo en el dropdown del header */
.section-site-header [data-header-dropdown] .showcase-tile,
.section-site-header [data-header-dropdown] .showcase-tile a,
.section-site-header [data-header-dropdown] .showcase-tile .media__styled-element {
  border: none !important;
  box-shadow: none !important; /* por si el tema usa sombras como borde */
  outline: none !important;
}

/* Por si el tema dibuja bordes con pseudo-elementos */
.section-site-header [data-header-dropdown] .showcase-tile::before,
.section-site-header [data-header-dropdown] .showcase-tile::after {
  content: none !important;
  display: none !important;
}

/* ========================= CONTACT FORM (Image with form)
   Igualar la altura del formulario con la imagen (cuadrada 1:1)
   ========================= */

#shopify-section-{{ section.id }} .iwf-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
}

#shopify-section-{{ section.id }} .media {
  height: auto;
}

#shopify-section-{{ section.id }} .media .media__image {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#shopify-section-{{ section.id }} .grid.items-stretch > [class*="lg:col-span-"] {
  display: flex;
}

#shopify-section-{{ section.id }} .grid.items-stretch > [class*="lg:col-span-"] > .w-full {
  display: flex;
  width: 100%;
}

#shopify-section-{{ section.id }} .grid.items-stretch > [class*="lg:col-span-"] .card__surface {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* Transición suave (usa la clase que agrega el JS) */
[data-header-dropdown] { transition: opacity .18s ease, transform .18s ease; }
[data-header-dropdown]:not(.is-hover-open) { opacity: .01; transform: translateY(6px); pointer-events: none; }
[data-header-dropdown].is-hover-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* ===== Menú móvil: canvas oscuro + contenido claro (recomendado) ===== */
@media (max-width: 1023px) {
  /* Definimos variables locales para jugar fácil con los colores */
  #left-drawer-slot {
    --mobile-menu-bg: #0A2A2D;  /* fondo */
    --mobile-menu-fg: #EADBC2;  /* texto/iconos con contraste */
    --mobile-menu-border: #0A2A2D;
    background-color: var(--mobile-menu-bg) !important;
    color: var(--mobile-menu-fg) !important;
    border-color: var(--mobile-menu-border) !important;
  }

  /* Asegurar que todo el contenido herede el color */
  #left-drawer-slot,
  #left-drawer-slot * {
    color: var(--mobile-menu-fg) !important;
  }

  /* Enlaces y headings del sidebar */
  #left-drawer-slot .sidebar-nav a,
  #left-drawer-slot .sidebar-nav .heading-feature,
  #left-drawer-slot .sidebar-nav span {
    color: var(--mobile-menu-fg) !important;
  }

  /* Iconos SVG (arrows, close, search): sobreescribe stroke/fill inline */
  #left-drawer-slot svg,
  #left-drawer-slot svg * {
    stroke: var(--mobile-menu-fg) !important;
    fill: none !important; /* la mayoría son de trazo; evita rellenos negros */
  }

  /* Botón cerrar (X) y chevrons rotatorios */
  #left-drawer-slot .theme-icon,
  #left-drawer-slot .theme-icon * {
    stroke: var(--mobile-menu-fg) !important;
  }

  /* Inputs del buscador: texto, borde/placeholder/caret */
  #left-drawer-slot .input {
    color: var(--mobile-menu-fg) !important;
    background-color: transparent !important;
    border-color: var(--mobile-menu-fg) !important;
    caret-color: var(--mobile-menu-fg) !important;
  }
  #left-drawer-slot .input::placeholder,
  #left-drawer-slot .input::-webkit-input-placeholder,
  #left-drawer-slot .input::-moz-placeholder,
  #left-drawer-slot .input:-ms-input-placeholder,
  #left-drawer-slot .input::-ms-input-placeholder {
    color: var(--mobile-menu-fg) !important;
    opacity: 0.8; /* leve atenuación del placeholder */
  }

  /* Quita cualquier fondo heredado del tema en panel interno */
  #left-drawer-slot .sidebar-nav {
    background: transparent !important;
  }

  /* Bordes del contenedor lateral (si los hubiera) */
  #left-drawer-slot.border-r-section {
    border-right-color: var(--mobile-menu-border) !important;
  }

  /* Botón de buscar (icono lupa) */
  #left-drawer-slot form[role="search"] button svg,
  #left-drawer-slot form[role="search"] button svg * {
    stroke: var(--mobile-menu-fg) !important;
  }
}