/** Shopify CDN: Minification failed

Line 103:0 Unexpected "}"
Line 215:0 Unexpected "}"
Line 535:0 Expected "}" to go with "{"

**/
:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#666;
  --brand:#0b1b3a;
  --accent:#000000;
  --container:1780px;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg);}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--container);margin:0 auto;padding:0 .5rem}
.section-title{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.btn{display:inline-block;padding:0.75rem 1.25rem;border-radius:0;background:var(--accent);color:#fff;font-weight:600}

/* Announcement */
.announcement-bar{background:var(--brand);color:#fff;font-weight:600;font-size:.85rem}
.announcement-bar .container{padding:.25rem .5rem;text-align:center}

/* Header */
.site-header{position:sticky;top:0;background:#fff;z-index:50;border-bottom:1px solid #eee}
.header-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:1rem 0;gap:1rem;min-height:72px}
.logo-text{font-weight:800;letter-spacing:.02em}
.main-nav ul{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
.nav-item{position:relative}
.nav-item .mega{position:absolute;left:0;top:100%;background:#fff;border:1px solid #eee;box-shadow:0 10px 30px rgba(0,0,0,.08);padding:1rem;display:none;min-width:680px}
.nav-item:hover .mega{display:block}
.mega-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.mega-title{font-weight:700;display:block;margin-bottom:.5rem}
.header-right{display:flex;align-items:center;justify-content:flex-end;gap:1rem}
.header-actions{display:flex;gap:1rem;justify-content:flex-end;align-items:center}
.menu-toggle{display:inline-flex;background:none;border:none;font-size:1.25rem;width:32px;height:28px;position:relative;align-items:center;justify-content:center}
.menu-toggle .bar{position:absolute;left:4px;right:4px;height:2px;background:#111;top:50%;transform:translateY(-50%);transition:transform .3s ease}
.menu-toggle .bar:nth-child(1){top:8px}
.menu-toggle .bar:nth-child(2){top:13px}
.menu-toggle .bar:nth-child(3){top:18px}

/* Asegura que el overlay sea visible al activarse */
.overlay.open {
  display: flex !important; /* Cambiamos a flex para centrar el contenido */
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}



/* 1. El contenedor principal ocupa toda la pantalla */
.overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg, #ffffff);
  z-index: 9999;
  display: none; /* Se activa con la clase .open en JS */
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 2. Cuando el menú se abre, se convierte en un contenedor Flex */
.overlay.open {
  display: flex !important;
  opacity: 1;
  visibility: visible;
}

/* 3. Centrado total del contenido */
.overlay-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centrado vertical */
  align-items: center;     /* Centrado horizontal */
}

/* 4. Quitar puntos y centrar los textos */
.overlay ul {
  list-style: none; /* Elimina los puntos (viñetas) */
  margin: 0;
  padding: 0;
  text-align: center;
}

.overlay li {
  margin: 1.5rem 0; /* Espaciado entre botones */
}

.overlay a {
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #000000;
  text-decoration: none;
}
}

/* Hero */
.hero-slider{position:relative;overflow:hidden;}
.hero-slider .slides{position:relative;min-height:80vh !important;overflow:hidden;}
.hero-slider .slide{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .7s ease, transform .7s ease;}
.hero-slider .slide.is-active{opacity:1;pointer-events:auto;}
.hero-slider .slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.2s ease;}
.hero-slider .slide-content{position:absolute;inset:auto 0 15% 0;text-align:center;color:#fff;}
.hero-slider h2{font-size:clamp(1.8rem,4vw,3rem);margin:.25rem 0 1rem}

/* Contenedor: Cambiamos grid por flex */
.collection-list .cards {
  display: flex;
  flex-wrap: wrap; /* Permite que bajen si no caben en móvil */
  gap: 1rem;       /* Espacio entre tarjetas */
  justify-content: center; /* Centra si hay pocas tarjetas */
  width: 100%;
}

/* Tarjetas: Se expanden para llenar el hueco */
.collection-list .card {
  flex: 1 1 250px; /* Crece (1), se encoge (1) y tiene un tamaño base de 250px */
  min-width: 200px; /* Evita que se hagan demasiado estrechas */
  max-width: 100%;  /* En móviles ocupará todo el ancho */
  
  /* Mantener el estilo que ya tenías */
  border: 1px solid #eaeaea;
  display: flex;
  flex-direction: column;
  background: #fff;
  transition: transform 0.3s ease;
}

/* Ajuste opcional para la imagen: que siempre ocupe el mismo alto si quieres uniformidad */
.collection-list .card img {
  width: 100%;
  height: 300px; /* Ajusta este valor a tu gusto */
  object-fit: cover;
}


/* Featured collections grid */
.featured-collection-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem}
.featured-collection-card{border:1px solid #eaeaea;border-radius:0;overflow:hidden;display:flex;flex-direction:column;background:#fff;height:100%}
.featured-collection-card .card-body{padding:1rem;font-weight:700;margin-top:auto}

/* Generic grid + product cards */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
.product-card{border:1px solid #eaeaea;padding:.75rem;border-radius:0;background:#fff;display:flex;flex-direction:column;height:100%}
.product-card > a{display:flex;flex-direction:column;height:100%;flex:1;transition:transform .2s ease,box-shadow .2s ease}
.product-card a:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.product-card h4{font-size:1rem;margin:0.5rem 0 0.25rem;margin-top:auto;padding-top:15px}
.product-card p{color:var(--muted);margin:0}

/* Product page */
.product-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem}
.product-grid .gallery{display:flex;flex-direction:row;gap:1rem;align-items:flex-start}
.gallery-main{flex:1}
.gallery-thumbs{display:flex;flex-direction:column;gap:.75rem;width:90px}
.gallery-thumb{width:90px;height:90px;padding:0;border:0 !important;background:none;cursor:pointer}
.gallery-thumb img{width:100%;height:100%;object-fit:cover;border-radius:0 !important}

/* Footer */
.site-footer{background:#0a0a0a;color:#fff;margin-top:3rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:2rem;padding:2rem 0}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:1rem 0;color:#bbb;font-size:.9rem}

/* Responsive tweaks */
@media (max-width:900px){
  .collection-list .cards, .grid{grid-template-columns:repeat(2,1fr)}
  .product-grid{grid-template-columns:1fr}
}
@media (max-width: 768px) {
  /* 1. Forzamos un margen de seguridad a los lados del header */
  .header-inner {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    /* Cambiamos el grid para que el centro (logo) sea flexible y los lados fijos */
    grid-template-columns: 50px 1fr 50px !important;
    gap: 0 !important;
  }

  /* 2. Aseguramos que el contenedor de la derecha no se desborde */
  .header-right {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }

  /* 3. Ajuste del tamaño del logo para que no empuje el carrito */
  .logo-text {
    font-size: 1.1rem !important;
    text-align: center;
    white-space: nowrap;
  }

  /* 4. El icono del carrito específicamente */
  .header-actions a[href="/cart"] {
    display: flex;
    justify-content: flex-end;
    padding-right: 5px;
  }
}

/* Margen de seguridad para toda la web en pantallas muy pequeñas */
@media (max-width: 480px) {
  .container {
    padding: 0 1rem !important;
  }
}

}
@media (max-width:640px){
  .collection-list .cards, .grid{grid-template-columns:1fr}
}.language-selector {
  display: flex;
  align-items: center;
  margin-right: 10px; /* Espacio con el icono de usuario */
}

.language-selector select {
  background: transparent;
  border: none;
  color: inherit;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700; /* Para que resalte un poco más */
  cursor: pointer;
  padding: 0;
  outline: none;
  text-transform: uppercase;
  -webkit-appearance: none; /* Oculta flecha nativa en algunos navegadores */
}/* Estilo para el interruptor de idioma */
.language-switcher {
  display: flex;
  align-items: center;
  margin-right: 15px; /* Espacio con el icono de usuario */
}

.language-switcher form {
  margin: 0;
  display: flex;
}

.lang-btn {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: opacity 0.2s ease;
}

.lang-btn:hover {
  opacity: 0.6;
}
/* Estado inicial de los enlaces (ocultos y desplazados) */
.overlay ul li {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Estado cuando el menú está abierto (aparecen secuencialmente) */
.overlay.open ul li {
  opacity: 1;
  transform: translateY(0);
}

/* Retrasos para el efecto cascada (uno tras otro) */
.overlay.open ul li:nth-child(1) { transition-delay: 0.1s; }
.overlay.open ul li:nth-child(2) { transition-delay: 0.2s; }
.overlay.open ul li:nth-child(3) { transition-delay: 0.3s; }
.overlay.open ul li:nth-child(4) { transition-delay: 0.4s; }
.overlay.open ul li:nth-child(5) { transition-delay: 0.5s; }
.overlay a {
  position: relative;
  display: inline-block;
  transition: all 0.3s ease;
}

.overlay a:hover {
  color: var(--brand); /* O el color que prefieras */
  transform: translateX(10px); /* Se mueve un poco a la derecha */
}

/* Opcional: Una línea que aparece debajo al hacer hover */
.overlay a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -5px;
  left: 0;
  background-color: var(--brand);
  transition: width 0.3s ease;
}

.overlay a:hover::after {
  width: 100%;.overlay {
  /* ... tus estilos anteriores ... */
  backdrop-filter: blur(10px); /* Desenfoca lo que hay detrás */
  -webkit-backdrop-filter: blur(10px);
}

}/* ============================================================================
   SOLUCIÓN DEFINITIVA: MENÚ BURGER SIN DESMONTAR LA WEB
   ============================================================================== */

/* 1. Ajuste del contenedor del menú (Overlay) */
.overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(255, 255, 255, 0.92) !important; /* Fondo con transparencia */
  backdrop-filter: blur(10px); 
  -webkit-backdrop-filter: blur(10px);
  z-index: 10000 !important;
  display: none; 
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* 2. Clase para mostrarlo (JS añade .open) */
.overlay.open {
  display: flex !important; 
  opacity: 1;
}

/* 3. Centrado absoluto del contenido sin afectar a otros elementos */
.overlay-inner {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important; /* Centro vertical */
  align-items: center !important;     /* Centro horizontal */
}

/* 4. Limpieza de la lista del menú */
.overlay ul {
  list-style: none !important; /* Quita los puntos */
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

.overlay ul li {
  margin: 1.5rem 0 !important;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease;
}

/* 5. Efecto cascada al abrir */
.overlay.open ul li {
  opacity: 1;/* ============================================================================
   SOLUCIÓN DEFINITIVA: MENÚ BURGER SIN DESMONTAR LA WEB
   ============================================================================== */

/* 1. Ajuste del contenedor del menú (Overlay) */
.overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(255, 255, 255, 0.92) !important; /* Fondo con transparencia */
  backdrop-filter: blur(10px); 
  -webkit-backdrop-filter: blur(10px);
  z-index: 10000 !important;
  display: none; 
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* 2. Clase para mostrarlo (JS añade .open) */
.overlay.open {
  display: flex !important; 
  opacity: 1;
}

/* 3. Centrado absoluto del contenido sin afectar a otros elementos */
.overlay-inner {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important; /* Centro vertical */
  align-items: center !important;     /* Centro horizontal */
}

/* 4. Limpieza de la lista del menú */
.overlay ul {
  list-style: none !important; /* Quita los puntos */
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

.overlay ul li {
  margin: 1.5rem 0 !important;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease;
}

/* 5. Efecto cascada al abrir */
.overlay.open ul li {
  opacity: 1;
  transform: translateY(0);
}

/* Retrasos para la entrada de los enlaces */
.overlay.open ul li:nth-child(1) { transition-delay: 0.1s; }
.overlay.open ul li:nth-child(2) { transition-delay: 0.2s; }
.overlay.open ul li:nth-child(3) { transition-delay: 0.3s; }
.overlay.open ul li:nth-child(4) { transition-delay: 0.4s; }

/* 6. Estilo del texto del menú */
.overlay a {
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: #111111 !important;
  display: inline-block;
  transition: transform 0.3s ease, color 0.3s ease;
}

.overlay a:hover {
  color: #0b1b3a !important; /* Azul marino de tu marca */
  transform: translateX(10px);
}
  transform: translateY(0);
}

/* Retrasos para la entrada de los enlaces */
.overlay.open ul li:nth-child(1) { transition-delay: 0.1s; }
.overlay.open ul li:nth-child(2) { transition-delay: 0.2s; }
.overlay.open ul li:nth-child(3) { transition-delay: 0.3s; }
.overlay.open ul li:nth-child(4) { transition-delay: 0.4s; }

/* 6. Estilo del texto del menú */
.overlay a {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: #111111 !important;
  display: inline-block;
  transition: transform 0.3s ease, color 0.3s ease;
}

.overlay a:hover {
  color: #0b1b3a !important; /* Azul marino de tu marca */
  transform: translateX(10px);
}/* Ocultar el botón burger cuando el menú overlay está abierto */
.overlay.open ~ .container .menu-toggle, 
.overlay.open + .container .menu-toggle,
body:has(.overlay.open) .menu-toggle {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.3s ease;
}
/* Contenedor de la imagen en la tarjeta de producto */
.product-card .card-media, 
.product-card a img {
  width: 100%;
  aspect-ratio: 1 / 1; /* Esto las hace perfectamente cuadradas. Puedes usar 3/4 para vertical. */
  object-fit: cover;   /* Corta la imagen para llenar el contenedor sin deformarse */
  object-position: center; /* Centra el encuadre por defecto */
  background: #f4f4f4; /* Fondo para cuando la imagen carga */
/* Botón de compra Summit */
.btn-add-to-cart {
  background-color: #000000 !important;
  color: #ffffff !important;
  width: 100%;
  padding: 16px 20px;
  border: none;
  font-family: inherit;
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.3s ease;
  display: block;
}

/* Estado Agotado */
.btn-add-to-cart.out-of-stock, 
.btn-add-to-cart:disabled {
  background-color: #d1d1d1 !important;
  color: #777777 !important;
  cursor: not-allowed !important;
}

/* Estilo de las pastillas de talla (Pills) */
.size-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.size-pill {
  border: 1px solid #e0e0e0;
  padding: 8px 16px;
  min-width: 45px;
  text-align: center;
  cursor: pointer;
  background: #fff;
}

.size-pill input {
  display: none; /* Escondemos el radio button */
}

.size-pill:has(input:checked) {
  border-color: #000;
  background-color: #000;
  color: #fff;
}

.size-pill--disabled {
  opacity: 0.3;
  background: #f9f9f9;
  cursor: not-allowed;
  text-decoration: line-through;
}