/* css/style.css */

/*************** General styles *******************/
body {
  font-family: var(--fuente-base);
  margin: 0;
  padding: 0;
  color: var(--color-text);
  background-color: var(--color-bg);
  /* Reserva espacio y evita saltos al hacer sticky */
  padding-top: calc(var(--ann-h) + var(--hdr-h));
}
/* --------------------------------------------------
   Utility Classes & Base Enhancements
-------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Reset heading margins and set line-height for lectura */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 1rem;
  line-height: 1.2;
}

body {
  line-height: 1.6;
}

/* Focus outline para accesibilidad */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 3px solid var(--color-acento);
  outline-offset: 2px;
}

/* Variables de tema */
:root {
  /* Modern color palette */
  --color-principal: #333333;          /* base text color */
  --color-fondo: #ffffff;              /* page background */
  --color-acento: #e91e63;             /* primary accent */
  --color-acento-sec: #757575;         /* secondary accent */
  /* Layout vars for stable header/announcement heights */
  --ann-h: 0px;  /* JS la ajusta si hay barra de anuncio */
  --hdr-h: 56px; /* JS coloca la altura real del header */

  /* Additional aliases used in legacy rules */
  --color-text: var(--color-principal);
  --color-bg: var(--color-fondo);
  --color-text-light: #ffffff;

  --border-radius: 0.5rem;
  --fuente-base: 'Poppins', sans-serif;
  --transition: 0.3s ease;
}

/* Offset para anclas al usar header sticky (colecciones, secciones, etc.) */
:target {
  scroll-margin-top: calc(var(--ann-h) + var(--hdr-h) + 12px);
}

/* Reset básico */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  scroll-behavior: smooth;
  width: 100%;
  font-family: var(--fuente-base);
  background-color: var(--color-fondo);
  color: var(--color-principal);
}
img {
  display: block;
  max-width: 100%;
}

/* Enlace para saltar contenido */
.skip-link {
  position: absolute;
  top: -40px;
  left: 1rem;
  background: var(--color-principal);
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 1000;
  border-radius: var(--border-radius);
  text-decoration: none;
  transition: top var(--transition);
}
.skip-link:focus {
  top: 1rem;
}

/* Contenedor central */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* --------------------------------------------------
   HEADER (safe-area, sombra y posicionamiento)
-------------------------------------------------- */
.site-header {
  background: linear-gradient(90deg, #fff, #f9f9f9);
  position: sticky;
  top: 0;
  /* espacio para notch o barra de estado */
  padding-top: env(safe-area-inset-top);
  padding-bottom: 0.5rem;
  /* altura total: 56px + safe-area */
  min-height: calc(56px + env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: background var(--transition), box-shadow var(--transition);
  z-index: 1000;
}

/* Apariencia cuando la página se ha scrolleado */
.site-header.scrolled {
  background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(180%) blur(15px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Contenido interno del header */
.header-inner {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 1rem;
}
/* Layout del header con grid para centrar branding */
.header-inner{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap: .75rem;
}

.site-branding{
  justify-self:center;  /* centra el logo+nombre */
  text-align:center;
}

/* Botón Catálogo (misma apariencia del index) */
.collection-toggle{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border:1px solid currentColor;
  padding:.35rem .6rem;
  background:transparent;
  border-radius:8px;
  line-height:1;
  cursor:pointer;
}
.collection-toggle .collection-label{
  font-weight:600;
  font-size:.95rem;
}
.collection-toggle .icon-hanger{
  width:22px; height:22px;
}

/* Asegura tamaños del logo dentro del branding */
.logo-wrap { display:inline-block; }
.logo { width:44px; height:44px; object-fit:cover; border-radius:50%; }

/* Responsive: en pantallas chicas mantené el centrado */
@media (max-width: 640px){
  .header-inner{
    grid-template-columns: auto 1fr auto; /* igual, pero dejamos respirar */
  }
  .site-branding .site-title{ font-size:1.05rem; }
  .site-branding .site-tagline{ font-size:.75rem; }
}
.nav-toggle {
  order: 1;
}
.site-branding {
  order: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cart-toggle {
  order: 3;
}

/* Branding */
.site-branding {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.logo-wrap {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--color-fondo);
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-wrap img.logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.site-title {
  font-size: 1.75rem;
  font-weight: 600;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  position: relative;
}
.site-title::after {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background-color: var(--color-acento);
  margin-top: 0.25rem;
}
.site-tagline {
  font-size: 0.875rem;
  color: var(--color-acento-sec);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Botón hamburguesa y carrito */
.nav-toggle,
.cart-toggle {
  z-index: 1001;
}

/* Hamburguesa */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  width: 25px;
  height: 3px;
  background-color: var(--color-principal);
  transition: var(--transition);
  display: block;
}
.nav-toggle.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px,5px);
}
.nav-toggle.open span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px,-5px);
}

/* Navegación principal */
.main-nav {
  display: flex;
  background: rgba(255, 255, 255, 0.97);   /* ligeramente translúcido */
  backdrop-filter: blur(6px);              /* frosted glass */
  box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* separa del header */
  border: 1px solid #eaeaea;   /* marco completo */
  border-top: none;            /* se une con el header */
  border-radius: 0 0 8px 8px;  /* esquinas inferiores redondeadas */
}
.nav-list {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-list li a {
  text-decoration: none;
  font-weight: 500;
  color: var(--color-principal);
  transition: var(--transition);
}
.nav-list li a:hover,
.nav-list li a.active {
  color: var(--color-acento);
}

/* Icono de carrito */
.cart-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-fondo);
  border: 1px solid var(--color-acento-sec);
  border-radius: 50%;
  transition: background var(--transition), transform var(--transition);
  cursor: pointer;
}
/* Modern cart icon styling */
.cart-toggle .cart-icon {
  width: 28px;
  height: 28px;
  fill: var(--color-principal);
  transition: fill var(--transition), transform var(--transition);
}
.cart-toggle:hover .cart-icon {
  fill: #fff;              /* White icon on hover */
  transform: scale(1.2);   /* Slightly larger on hover */
}
.cart-toggle:hover {
  background: var(--color-acento);
  transform: scale(1.1);
}
.cart-toggle .cart-count {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  background: var(--color-acento);
  color: #fff;
  font-size: 0.65rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Collection toggle button */
.collection-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, transform 0.3s ease;
}
/* --------------------------------------------------
   Menú móvil
-------------------------------------------------- */
  /* .nav-toggle and .cart-toggle absolute rules removed for new layout */
  @media (max-width: 768px) {
  .nav-toggle {
    display: flex;             /* ensure hamburger is visible */
    position: static;          /* follow the header flex layout */
    margin: 0;                 /* reset any margins */
  }
  .cart-toggle {
    display: inline-flex;      /* ensure cart icon is visible */
    position: relative;        /* allow absolute badge positioning */
    margin: 0;                 /* reset any margins */
  }
  .site-header {
    padding-top: calc(env(safe-area-inset-top) + 1rem);
    padding-bottom: 0.5rem;
  }
  .header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 0 1rem;
  }
  .site-branding {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    gap: 0.25rem;
    z-index: 1002;
  }
  .logo-wrap {
    width: 50px;
    height: 50px;
  }
  .site-title {
    font-size: 1.25rem;
    margin: 0;
  }
  .site-tagline {
    font-size: 0.75rem;
  }
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.97);  /* coincide con desktop */
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.12);
    border: 1px solid #eaeaea;
    border-top: none;
    border-radius: 0 0 8px 8px;
    display: none;
    flex-direction: column;
    animation: slideDown 0.35s ease forwards;
  }

  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0);  }
  }

  .main-nav.show {
    display: flex;
  }
  .nav-list {
    padding-top: 0.5rem;      /* pequeño espacio superior */
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }
  /* --- Ajuste imágenes producto en móvil --- */
  .grid-productos,
.grid-products,
.grid-ofertas,
.grid-featured {
    grid-template-columns: repeat(2, 1fr);   /* 2 columnas iguales */
    gap: 1rem;                                /* un poco menos de espacio */
  }

  /* Tarjetas móviles: 2 por fila, imagen fija y texto/button debajo */
  .producto-item img,
  .featured-card img,
  .offer-item img {
     width: 100%;
  aspect-ratio: 3 / 4;  /* proporción estable para prendas */
    height: auto !important;   /* respeta aspect-ratio */
  object-fit: cover;
}
}

/* --------------------------------------------------
   Hero, secciones y resto del CSS sin cambios
   (mantener igual que tu archivo original)
-------------------------------------------------- */
/* --------------------------------------------------
   HERO CAROUSEL
-------------------------------------------------- */
.swiper-hero {
  position: relative;
  height: 72vh;            /* altura estable: evita que se "achique" */
  min-height: 520px;       /* asegura buen alto en notebooks/móviles altos */
  max-height: 860px;       /* techo razonable para pantallas grandes */
  overflow: hidden;
}
.swiper-hero .swiper-container,
.swiper-hero .swiper-wrapper,
.swiper-hero .swiper-slide {
  height: 100% !important;   /* hace que los hijos tomen el alto del hero */
  min-height: inherit;       /* heredan min-height del contenedor */
}
.swiper-hero .swiper-slide {
  position: relative;
  background-size: cover;        /* llena sin deformar */
  background-position: center 20%;
  background-repeat: no-repeat;
}
.swiper-hero .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.25));
  z-index: 1;
}
.swiper-hero .hero-content {
  position: relative;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  text-align: center;
  padding: 0 1rem;
}
.swiper-hero .hero-title {
  font-size: 3.5rem;
  margin-bottom: 0.75rem;
  letter-spacing: -0.5px;
}
.swiper-hero .hero-subtitle {
  font-size: 1.35rem;
  margin-bottom: 1.75rem;
  font-weight: 400;
}
.swiper-hero .swiper-pagination {
  position: absolute;
  bottom: 1rem;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 3;
}
.swiper-hero .swiper-pagination-bullet {
  background: #fff;
  opacity: 0.7;
}
.swiper-hero .swiper-pagination-bullet-active {
  opacity: 1;
}
.swiper-hero .swiper-button-prev,
.swiper-hero .swiper-button-next {
  color: #fff;
  width: 2.5rem;
  height: 2.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

/* ==== HERO responsive tweaks para mejor encuadre ====*/
@media (max-width: 768px){
  .swiper-hero { 
    height: 78vh;         /* MÁS alto en mobile, no se corta */
    min-height: 70vh;     /* evita que baje a una franja */
  }
  .swiper-hero .hero-title{ font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .swiper-hero .hero-subtitle{ font-size: clamp(0.9rem, 3.8vw, 1.2rem); }
  .swiper-hero .swiper-slide{ background-position: center 20%; }
}
@media (min-width: 1200px){
  .swiper-hero { 
    height: 80vh;          /* un poco más alto en desktop grande */
    min-height: 680px;     /* asegura altura agradable en monitores */
  }
}

/* Helpers para elegir foco por slide en el HTML */
.bg-top    { background-position: center top    !important; }
.bg-center { background-position: center center !important; }
.bg-bottom { background-position: center bottom !important; }

/* Modo alternativo: mostrar la imagen completa sin recorte (con franjas) */
.hero-fit-contain .swiper-slide{
  background-size: contain !important;  /* muestra todo */
  background-color: #111 !important;    /* relleno neutro */
}

/* --------------------------------------------------
   BOTONES
-------------------------------------------------- */
.btn {
  font-family: var(--fuente-base);
  text-align: center;
  display: inline-block;
  cursor: pointer;
  outline: none;
}
.btn:focus-visible {
  outline: 2px solid var(--color-acento);
  outline-offset: 2px;
}
.btn-primary {
  background-color: var(--color-acento);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: var(--transition);
}
.btn-primary:hover {
  opacity: 0.8;
  transform: translateY(-3px);
}
.btn-secondary {
  background-color: var(--color-principal);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: var(--transition);
}
.btn-secondary:hover {
  opacity: 0.8;
  transform: translateY(-3px);
}

/* --------------------------------------------------
   SECCIONES GENERALES
-------------------------------------------------- */
.section {
  padding: 4rem 0;
}
.section-title {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
  position: relative;
}
.section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: var(--color-acento);
  margin: 0.5rem auto 0;
}

/* --------------------------------------------------
   ABOUT
-------------------------------------------------- */
.about-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
}
.about-image img {
  width: 100%;
  max-width: 300px;
  border-radius: var(--border-radius);
  object-fit: cover;
}
.about-text {
  flex: 1;
  text-align: left;
}

/* --------------------------------------------------
   SWIPER NOVEDADES
-------------------------------------------------- */
.swiper-novedades {
  max-width: 800px;
  margin: 0 auto;
}
.swiper-novedades .swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.swiper-novedades img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.swiper-novedades p {
  margin-top: 0.5rem;
  text-align: center;
}

/* --------------------------------------------------
   GRID PRODUCTOS
-------------------------------------------------- */
.grid-productos, .grid-products {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  gap: 2rem;
}
/* Performance: permite saltear pintura off-screen */
.grid-productos,
.grid-products,
.grid-featured {
  content-visibility: auto;
  contain-intrinsic-size: 800px; /* altura virtual p/evitar saltos al entrar en viewport */
}
.producto-item {
  text-align: center;
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.producto-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.producto-item img {
  width: 100%;
  aspect-ratio: 3 / 4;  /* proporción estable para prendas */
  height: auto;
  object-fit: cover;
}
.producto-item h3 {
  margin: 0.75rem 0 0.25rem;
}
.producto-item p {
  color: var(--color-acento);
  font-weight: 600;
}

/* --------------------------------------------------
   GRID OFERTAS
-------------------------------------------------- */
.grid-ofertas {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  gap: 2rem;
}
.offer-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
  transition: transform var(--transition), box-shadow var(--transition);
}
.offer-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.offer-item img {
  width: 100%;
  aspect-ratio: 3 / 4;  /* consistente con productos */
  height: auto;
  object-fit: cover;
}
.offer-item .badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background-color: var(--color-acento);
  color: #fff;
  padding: 0.25rem 0.5rem;
  border-radius: var(--border-radius);
}

/* --------------------------------------------------
   SWIPER TESTIMONIOS
-------------------------------------------------- */
.swiper-testimonios {
  max-width: 600px;
  margin: 0 auto;
}
.swiper-testimonios .swiper-slide {
  padding: 1rem;
  text-align: center;
}
.swiper-testimonios blockquote {
  font-style: italic;
  margin-bottom: 0.5rem;
}
.swiper-testimonios cite {
  font-size: 0.9rem;
  color: var(--color-acento-sec);
}

/* --------------------------------------------------
   NEWSLETTER
-------------------------------------------------- */
.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.newsletter-form input[type="email"] {
  flex: 1;
  min-width: 200px;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: var(--border-radius);
}
.newsletter-form .btn-secondary {
  white-space: nowrap;
}

/* --------------------------------------------------
   FORMULARIO CONTACTO
-------------------------------------------------- */
.contact-form {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}
.form-group {
  margin-bottom: 1rem;
}
.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: var(--border-radius);
}
.contact-form button {
  margin-top: 1rem;
}

/* --------------------------------------------------
   RESPUESTA FORM
-------------------------------------------------- */
.form-response {
  margin-top: 1rem;
  text-align: center;
  font-style: italic;
}

/* --------------------------------------------------
   BACK TO TOP
-------------------------------------------------- */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background-color: var(--color-acento);
  color: #fff;
  border: none;
  padding: 0.75rem;
  border-radius: 50%;
  font-size: 1.25rem;
  cursor: pointer;
  display: none;
  transition: var(--transition);
}
.back-to-top:hover {
  opacity: 0.8;
}

/* --------------------------------------------------
   FOOTER
-------------------------------------------------- */
/* --------------------------------------------------
   FOOTER
-------------------------------------------------- */
.site-footer {
  background-color: #f8f8f8;
  border-top: 1px solid #ddd;
  padding: 2rem 0;
  text-align: center;
  font-size: 0.9rem;
  animation: fadeIn var(--transition) ease-in-out;
}
.site-footer a {
  color: var(--color-principal);
  margin: 0 0.25rem;
}

/* Footer section enhancements */
.footer-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}
.footer-top img {
  width: 24px;
  height: 24px;
}
.footer-credits {
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-acento-sec);
  margin-bottom: 1rem;
}
.footer-copy {
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-acento-sec);
}

/* FEATURED DEALS (Index) */
.section-featured {
  padding: 4rem 0;
  background-color: #fafafa;
}
.section-featured .section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background-color: var(--color-acento);
  margin: 0.5rem auto 0;
}
.grid-featured {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}
.featured-card {
  background-color: #fff;
  border-radius: var(--border-radius);
  overflow: hidden;
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition);
}
.featured-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.featured-card img {
  width: 100%;
  aspect-ratio: 4 / 3;  /* destacados más panorámicos */
  height: auto;
  object-fit: cover;
  display: block;
}
.featured-card h3 {
  margin: 1rem 0 0.5rem;
  font-size: 1.1rem;
}
.featured-card .price {
  margin-bottom: 1rem;
  font-weight: 600;
  color: var(--color-acento);
}

/* --------------------------------------------------
   Animaciones y efectos sutiles
-------------------------------------------------- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.site-header {
  animation: fadeIn var(--transition) ease-in-out;
}
.btn-primary:hover,
.btn-secondary:hover {
  transform: translateY(-3px);
}
.nav-list li a {
  position: relative;
}
.nav-list li a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background-color: var(--color-acento);
  transition: width var(--transition);
}
.nav-list li a:hover::after {
  width: 100%;
}
.producto-item img,
.featured-card img {
  transition: transform var(--transition);
}
.producto-item:hover img,
.featured-card:hover img {
  transform: scale(1.05);
}

/* Instagram icon en footer */
.instagram-icon {
  width: 50px;
  height: 50px;
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.3s;
  margin-left: 0.5rem;
}
.instagram-icon img {
  width: 100%;
  height: 100%;
}
.instagram-icon:hover {
  transform: scale(1.1);
}

/* Modal Carrito */
.hidden {
  display: none !important;
}
.cart-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}
.cart-modal-content {
  background: #fff;
  padding: 2rem;
  width: 90%;
  max-width: 500px;
  border-radius: var(--border-radius);
  position: relative;
  max-height: 80vh;
  overflow-y: auto;
}
.cart-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}
/* Contenedor para manejar ambos iconos */
.icon-container {
    position: relative;
    display: inline-block;
  }
  
  /* Mostrar icono cerrado por defecto, ocultar abierto */
  .cart-icon-closed {
    display: inline-block;
  }
  .cart-icon-open {
    display: none;
  }
  
  /* Cuando el contenedor .cart-toggle tenga la clase .open, intercambiar iconos */
  .cart-toggle.open .cart-icon-closed {
    display: none !important;
  }
  .cart-toggle.open .cart-icon-open {
    display: inline-block !important;
  }
  
  /* Estilos comunes para ambos SVGs */
  .icon-container .cart-icon {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke var(--transition), transform var(--transition);
  }
  
  /* Color en estado cerrado */
  .cart-toggle .cart-icon-closed .cart-icon {
    color: var(--color-principal);
  }
  
  /* Hover: cambia color de trazo y escala el icono */
  .cart-toggle:hover .cart-icon {
    stroke: #fff;
    transform: scale(1.1);
  }
  /* Hover sobre el botón: fondo y ligera escala */
  .cart-toggle:hover {
    background: var(--color-acento);
    transform: scale(1.05);
  }
  /* --------------------------------------------------
   Cart item layout and remove button styling
-------------------------------------------------- */
.cart-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
  }
  
  .cart-item-info {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    flex: 1;
  }
  
  .remove-item {
    background: transparent;
    border: none;
    color: var(--color-acento);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: color var(--transition);
  }
  
  .remove-item:hover {
    color: #e00;
  }
  
.text-center {
  text-align: center;
  margin-top: 1rem;
}
/* Toast message for cart confirmations */
.cart-toast {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    opacity: 1;
    transition: opacity var(--transition) ease, bottom var(--transition) ease;
    z-index: 3000;
  }
  .cart-toast.hide {
    opacity: 0;
    bottom: 0.5rem;
  }
  /* ---------- OFF-CANVAS “BeraClothing” ---------- */
.collection-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 0.5rem;
  background: var(--color-fondo);
  border: 1px solid var(--color-acento-sec);
  border-radius: 50%;
  font: inherit;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.collection-toggle:hover {
  background: var(--color-acento);
  color: var(--color-text-light);
  transform: scale(1.05);
}

.collection-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s;
  z-index: 1100;
}

.collection-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 80%;
  max-width: 320px;
  height: 100vh;
  background: #fff;
  transform: translateX(-100%);
  transition: transform .3s;
  overflow-y: auto;
  z-index: 1200;   /* por delante del header */
  padding: 1.5rem 1rem;
}

.collection-menu.show    { transform: translateX(0); }
.collection-overlay.show { opacity: 1; visibility: visible; }

.collection-close {
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  margin-bottom: 1rem;
}

.collection-heading {
  font-size: 1.2rem;
  margin-bottom: .5rem;
}

.collection-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.collection-list li {
  margin: .75rem 0;
}

.collection-list a {
  text-decoration: none;
  color: #000;
}
/* ---------- VARIABLES DE MARCA ---------- */
:root{
  --brand-ink:#000;
  --brand-accent:#007aff;      /* azul vivo para hovers */
  --overlay-bg:rgba(0,0,0,.45);
}

/* ---------- HEADER: EVITAR “DOBLE” TEXTO ---------- */
@media (max-width:768px){
  .site-title{display:none;}          /* oculta el H1 azul antiguo */
  .collection-toggle{
    font-weight:600;
    letter-spacing:.3px;
  }
}

/* ---------- OFF-CANVAS ANIMATIONS ---------- */
.collection-overlay{
  background:var(--overlay-bg);
  backdrop-filter:blur(2px);          /* desenfoque sutil */
  transition:opacity .35s ease;
}

.collection-menu{
  box-shadow:2px 0 12px rgba(0,0,0,.18);
  animation:slideOut .35s both;       /* estado cerrado */
}
.collection-menu.show{
  animation:slideIn .35s cubic-bezier(.65,.05,.36,1) both;
}

/* animaciones */
@keyframes slideIn{from{transform:translateX(-100%);}to{transform:translateX(0);} }
@keyframes slideOut{from{transform:translateX(0);}  to{transform:translateX(-100%);} }

/* ---------- LISTA DE CATEGORÍAS ---------- */
.collection-list a{
  position:relative;
  display:block;
  padding:.25rem 0;
  transition:color .25s ease, transform .25s ease;
}
.collection-list a::after{          /* subrayado animado */
  content:'';
  position:absolute;
  left:0;bottom:-2px;
  width:0;height:2px;
  background:var(--brand-accent);
  transition:width .25s ease;
}
.collection-list a:hover{
  color:var(--brand-accent);
  transform:translateX(4px);        /* ligero desplazamiento */
}
.collection-list a:hover::after{width:100%;}

/* ---------- BOTONES (X y TOGGLE) ---------- */
.collection-close{
  font-size:2.2rem;
  transition:transform .25s;
}
.collection-close:hover{transform:rotate(90deg) scale(1.1);}

.collection-toggle{
  transition:color .25s;
}
.collection-toggle:hover{color:var(--brand-accent);}
/* ---------- RE-HABILITAR EL TEXTO DE MARCA ---------- */

/* 1. Header: mostrar de nuevo el H1 azul */
@media (max-width:768px){
  /* Anula la regla anterior pero sólo dentro del header */
  .site-branding .site-title{ display:block; }
}

/* 2. Hero: asegurar que el span interno se vea siempre */
.hero-title .site-title{               /* “Bienvenido a BERA clothing” */
  display:inline;
}

/* (opcional) Si quieres que el título del header y el botón “BeraClothing”
   no se pisen visualmente, dales estilos distintos: */
.site-branding .site-title{
  color:#0c1620;          /* azul marca */
  font-size:1.35rem;
  letter-spacing:.1em;
}
.collection-toggle{       /* botón que abre el off-canvas */
  color:#000;
  font-weight:600;
}
.collection-toggle:hover{ color:#007aff; }
/* ---------- LOOK & FEEL GENERAL ---------- */

/* Panel con esquinas redondeadas y sombra suave */
.collection-menu{
  border-top-right-radius:12px;
  border-bottom-right-radius:12px;
  box-shadow:4px 0 14px rgba(0,0,0,.22);
}

/* Aumenta aire interior */
.collection-menu{
  padding:2rem 1.75rem;
}

/* Título de bloque */
.collection-heading{
  font-size:1.35rem;
  font-weight:600;
  margin-bottom:1rem;
  border-bottom:2px solid var(--brand-accent);
  padding-bottom:.25rem;
}

/* ---------- LISTA DE ÍTEMS ---------- */

/* Separadores sutiles y más espacio */
.collection-list li+li{
  margin-top:1.1rem;               /* aire vertical */
  padding-top:1.1rem;
  border-top:1px solid #ececec;    /* línea divisoria ligera */
}

/* Link con micro-interacción */
.collection-list a{
  font-size:1.05rem;
  letter-spacing:.2px;
}
.collection-list a:active{         /* toque en móvil */
  transform:translateX(4px) scale(.97);
}

/* ---------- BOTONES Y OVERLAY ---------- */

/* Botón "×" con área clic ampliada */
.collection-close{
  padding:.3rem .6rem;
  border:1px solid transparent;
  border-radius:50%;
}
.collection-close:hover{
  border-color:var(--brand-accent);
}

/* Overlay con degradado lateral para mayor profundidad */
.collection-overlay::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.25) 40%,transparent 100%);
}
/* ---------- BOTÓN CATÁLOGO ---------- */
.catalog-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:.5rem;          /* separa del logo / menú */
}

.catalog-icon{
  width:32px;                 /* mismo alto aprox. que tu logo */
  height:32px;
  object-fit:contain;
  transition:transform .2s ease;
}

/* micro-interacción */
.catalog-btn:hover .catalog-icon{
  transform:scale(1.1);
}
/* --- Nueva distribución header --- */
.catalog-btn {          /* Botón Catálogo a la izquierda */
  order: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 0.5rem;
  cursor: pointer;
  background: var(--color-fondo);
  border: 1px solid var(--color-acento-sec);
  border-radius: 50%;
  transition: background var(--transition), transform var(--transition);
}
.catalog-btn:hover {
  background: var(--color-acento);
  transform: scale(1.05);
}
.catalog-btn svg {
  width: 28px;
  height: 28px;
}

.nav-toggle {           /* Hamburguesa a la derecha */
  order: 3;
  margin-left: 0.5rem;
}

.site-branding {        /* Logo + nombre centrados */
  order: 2;
  flex: 1 1 auto;
}
.collection-toggle {  /* botón Catálogo a la izquierda */
  order: 1;
}
/* ---------- Hover / focus effects for Catálogo button ---------- */
.collection-toggle:hover,
.collection-toggle:focus-visible {
  background: var(--color-acento);
  color: var(--color-text-light);
  outline: 3px solid var(--color-acento);
  outline-offset: 2px;
}
.collection-toggle svg {
  transition: transform 0.25s ease;
}
.collection-toggle:hover svg,
.collection-toggle:focus-visible svg {
  transform: rotate(8deg) scale(1.1);
}
/* ---------- PRODUCT MODAL ---------- */
.product-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.product-modal.show {
  display: flex;
  animation: fadeInModal 0.35s cubic-bezier(.4,0,.2,1);
}
@keyframes fadeInModal {
  from { opacity: 0; transform: scale(0.97);}
  to   { opacity: 1; transform: scale(1);}
}

.product-modal-content {
  background: #fff;
  width: 90%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 8px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28);
  position: relative;
  padding: 1rem;
  transition: box-shadow 0.35s cubic-bezier(.4,0,.2,1), transform 0.35s cubic-bezier(.4,0,.2,1);
}

.product-modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  background: none;
  border: none;
  font-size: 2rem;   /* más grande */
  line-height: 1;
  font-weight: 700;
  color: #333;       /* contraste sobre fondo blanco */
  cursor: pointer;
  z-index: 2;        /* por encima de la galería */
}

.product-gallery {
  margin-bottom: 1rem;
}

.product-info h3 {
  margin: 0.5rem 0;
}

.product-info .price {
  font-weight: 600;
  margin-bottom: 0.5rem;
}
/* --------------------------------------------------
   FOOTER (Enhanced visual style)
-------------------------------------------------- */
.site-footer {
  background: linear-gradient(135deg, #262626 0%, #1a1a1a 100%);
  padding: 3rem 0;
  text-align: center;
  font-size: 1rem;
  color: #f1f1f1;
  animation: fadeIn var(--transition) ease-in-out;
}

.site-footer a {
  color: #f1f1f1;
  margin: 0 0.5rem;
  transition: color var(--transition);
}
.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--color-acento);
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
}
.footer-top img {
  width: 28px;
  height: 28px;
  filter: brightness(0) invert(1); /* white icons on dark bg */
  transition: transform var(--transition);
}
.footer-top img:hover {
  transform: scale(1.15);
}

.footer-credits {
  font-size: 0.9rem;
  color: #d1d1d1;
  margin-bottom: 1rem;
}
.footer-copy {
  font-size: 0.8rem;
  color: #b5b5b5;
}

/* Responsive footer spacing */
@media (max-width: 480px) {
  .site-footer {
    padding: 2rem 1rem;
  }
}
 
/* --------------------------------------------------
   Floating Cart FAB & Off‑Canvas Panel
-------------------------------------------------- */

/* Botón flotante (FAB) */
.cart-fab {
  position: fixed;
  bottom: 2rem;               /* distancia al borde inferior */
  right: 2rem;                /* distancia al borde derecho  */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--color-acento);
  color: #fff;
  border: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  cursor: pointer;
  z-index: 1500;
  transition: transform var(--transition), box-shadow var(--transition);
}
.cart-fab:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* Ícono SVG del carrito */
.cart-fab .cart-icon {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

/* Burbuja con cantidad de ítems */
.cart-fab .cart-counter {
  position: absolute;
  top: 6px;
  right: 6px;
  background: #fff;
  color: var(--color-acento);
  font-size: 0.7rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

/* Total acumulado en pesos, a la izquierda del FAB */
.cart-fab .cart-total {
  position: absolute;
  left: -115%;
  white-space: nowrap;
  font-size: 0.85rem;
  background: #fff;
  color: var(--color-acento);
  padding: 0.15rem 0.55rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  font-weight: 600;
}

/* Ajustes para pantallas chicas */
@media (max-width: 480px) {
  .cart-fab {
    width: 52px;
    height: 52px;
    bottom: 1.25rem;
    right: 1.25rem;
  }
}

/* Panel lateral del carrito */
.cart-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 420px;
  height: 100vh;
  background: #fff;
  box-shadow: -2px 0 14px rgba(0,0,0,0.15);
  transform: translateX(100%);
  transition: transform var(--transition);
  z-index: 1600;
  display: flex;
  flex-direction: column;
}
.cart-panel.show {
  transform: translateX(0);
}

/* Cabecera del panel */
.cart-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #eee;
}
.cart-panel-header h2 {
  font-size: 1.25rem;
  margin: 0;
}

/* Lista de ítems (re‑usa .cart-item que ya existe) */
.cart-items {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1rem 1.25rem;
}

/* Resumen y botón de checkout */
.cart-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-top: 1px solid #eee;
  font-size: 1.1rem;
  font-weight: 600;
}
.btn-checkout {
  width: calc(100% - 2.5rem);
  margin: 0 1.25rem 1.5rem;
}

/* Overlay oscuro detrás del panel */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition);
  z-index: 1550;
}
.cart-overlay.show {
  opacity: 1;
  visibility: visible;
}
/* --------------------------------------------------
   Quantity Stepper
-------------------------------------------------- */
.qty-stepper{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
}
.qty-stepper .qty{
  width:48px;
  text-align:center;
  border:1px solid #ddd;
  border-radius:.25rem;
  padding:.25rem .5rem;
  font-size:.9rem;
}
/* quitar flechas nativas */
.qty-stepper .qty::-webkit-inner-spin-button,
.qty-stepper .qty::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0;}
.qty-stepper .qty{ -moz-appearance:textfield; appearance:textfield; }

.qty-stepper button{
  width:28px;height:28px;
  border:1px solid #ddd;
  background:#f5f5f5;
  font-size:1rem;line-height:1;
  border-radius:.25rem;
  cursor:pointer;
  transition:background var(--transition);
}
.qty-stepper button:hover{ background:#e3e3e3; }
.qty-stepper button:disabled{ opacity:.5; cursor:not-allowed; }




/* Mejoras para visualización móvil, especialmente el botón Catálogo */
@media (max-width: 768px) {
  .header-inner {
    min-height: 60px;
    padding: 0 0.5rem;
    gap: 0.5rem;
  }
  .collection-toggle {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px;
    min-height: 48px;
    margin-right: 0.5rem;
    padding: 0;
    border-width: 1.5px;
    border-radius: 50%;
    background: var(--color-fondo);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    touch-action: manipulation;
  }
  .collection-toggle svg {
    width: 40px !important;
    height: 40px !important;
    display: block;
  }
  .collection-toggle text {
    font-size: 10px !important;
    dominant-baseline: middle;
    alignment-baseline: middle;
    y: 54 !important;
  }
  .logo-wrap {
    width: 44px;
    height: 44px;
  }
  .site-title {
    font-size: 1.05rem;
  }
  .site-tagline {
    font-size: 0.7rem;
  }
}
/* Layout del header */
.site-header .header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* Que el centro (logo+título) pueda encogerse sin empujar fuera al botón */
.site-branding{
  flex:1 1 auto;
  min-width:0;            /* evita que empuje al botón fuera de pantalla */
  text-align:center;
}

/* Botón Catálogo: texto + ícono */
.collection-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  background:transparent;
  border:0;
  font:inherit;
  line-height:1;
  white-space:nowrap;     /* no partir “Catálogo” */
  cursor:pointer;
  color:#111;             /* ajusta a tu paleta */
}

/* Quitar cualquier rastro de SVG anterior o fondos raros */
.collection-toggle svg,
.collection-toggle .icono-percha{
  display:block;
}

.icon-hanger{
  width:16px;
  height:16px;
  flex:0 0 auto;
}

/* Accesibilidad: foco visible pero sin “cuadradito” feo */
.collection-toggle:focus-visible{
  outline:2px solid #e01660; /* tu magenta */
  outline-offset:2px;
  border-radius:4px;
}

/* Hamburguesa y botón con ancho fijo para que no colisionen */
.nav-toggle{ flex:0 0 auto; }
.collection-toggle{ flex:0 0 auto; }

/* Mobile */
@media (max-width:768px){
  .site-header .container{ padding-left:12px; padding-right:12px; }
  .header-inner{ gap:8px; }
  .collection-toggle{ font-size:14px; padding:8px 6px; }
  .site-title{ font-size:18px; }       /* baja un toque el título si hace falta */
}
/* ====== FIX: Safe-area + botón Catálogo texto+ícono ====== */

/* Variable para padding base */
:root { --safe-pad: 12px; }

/* Header con safe-area (iPhone notch) */
.site-header{
  padding-left: calc(var(--safe-pad) + env(safe-area-inset-left));
  padding-right: calc(var(--safe-pad) + env(safe-area-inset-right));
}

/* El contenedor interno no debe añadir padding extra */
.header-inner{ padding: 0 !important; }

/* Botón Catálogo en formato texto + ícono (anula estilos circulares) */
.collection-toggle{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 4px !important;
  margin: 0 .25rem 0 0 !important;
  padding: 6px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  color: var(--color-principal) !important;
  transition: color .25s ease, transform .25s ease !important;
}

/* Ícono percha chico */
.collection-toggle .icon-hanger{
  width: 16px !important;
  height: 16px !important;
  display: block;
}

/* Hover/focus accesible sin “círculo” */
.collection-toggle:hover,
.collection-toggle:focus-visible{
  color: var(--color-acento) !important;
  background: transparent !important;
  outline: 2px solid var(--color-acento) !important;
  outline-offset: 2px !important;
}

/* Suavidad al mover el ícono */
.collection-toggle svg{ transition: transform .25s ease; }
.collection-toggle:hover svg,
.collection-toggle:focus-visible svg{ transform: rotate(8deg) scale(1.08); }

/* Evita que el branding empuje el botón fuera de pantalla */
.site-header .header-inner{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px;
}
.site-branding{
  flex:1 1 auto !important;
  min-width:0 !important;
  text-align:center;
}
.nav-toggle{ flex:0 0 auto; }
.collection-toggle{ flex:0 0 auto; }

/* Mobile: respeta safe-area también en .container si existe */
@media (max-width:768px){
  .site-header .container{
    padding-left: calc(12px + env(safe-area-inset-left)) !important;
    padding-right: calc(12px + env(safe-area-inset-right)) !important;
  }
  .collection-toggle{
    font-size: 14px !important;
    padding: 8px 6px !important;
  }
}

/* Desktop: NO agrandes .collection-toggle, deja los tamaños para .catalog-btn únicamente */
@media (min-width:769px){
  /* Si tienes reglas que decían: `.catalog-btn, .collection-toggle { ... }`,
     este override garantiza que la collection-toggle no herede tamaños gigantes. */
  .collection-toggle{
    width: auto !important;
    height: auto !important;
    padding: 6px 10px !important;
  }
  .collection-toggle svg{
    width: 16px !important;
    height: 16px !important;
  }
}
/* ===== Header móvil: que no choque y que “BERA CLOTHING” vaya en una línea ===== */
@media (max-width: 768px) {
  .site-header { padding-top: calc(env(safe-area-inset-top) + 8px); }
  .header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  /* Botones laterales con ancho fijo (no invaden el centro) */
  .collection-toggle,
  .nav-toggle { flex: 0 0 48px; }

  /* El bloque de marca puede encogerse sin empujar a los botones */
  .site-branding {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: center;
    margin: 0 auto;
    gap: 2px;
  }

  .logo-wrap { width: 42px; height: 42px; }

  /* Título en una línea y tamaño fluido */
  .site-title {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    white-space: nowrap;                /* <- evita salto de línea */
    font-size: clamp(16px, 4.6vw, 20px);
    letter-spacing: 0.08em;
    margin: 0;
  }

  /* Subrayado solo bajo “BERA” */
  .site-title .title-bera {
    position: relative;
  }
  .site-title .title-bera::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: -3px;                       /* distancia a la base */
    height: 3px;
    background: var(--color-acento);
    border-radius: 2px;
  }

  /* “BY FRIAS” pequeño y separado del título */
  .site-tagline {
    display: block;
    font-size: 10px;
    letter-spacing: .12em;
    color: var(--color-acento-sec);
    text-transform: uppercase;
    margin-top: 2px;
  }
}

/* Evita que el título se meta debajo de los botones incluso en pantallas MUY chicas */
@media (max-width: 360px) {
  .site-title { font-size: clamp(15px, 4.2vw, 18px); letter-spacing: 0.06em; }
  .logo-wrap  { width: 38px; height: 38px; }
}
/* ===== Ajuste fino de alturas en MOBILE (no toca desktop) ===== */
@media (max-width: 768px){

  /* 1) Respeto del notch/safe-area y header compacto */
  .site-header{
    /* deja espacio seguro para el notch y reduce el padding */
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
    padding-bottom: 6px;
  }

  .header-inner{
    align-items: center;
    min-height: 56px;   /* evita que nada se superponga */
    position: relative;
  }

  /* 2) Subo TODO el bloque de branding respecto de los botones */
  .site-branding{
    transform: translateY(-10px);   /* << sube el conjunto */
    will-change: transform;
  }

  /* 3) Reacomodo piezas internas, según lo que pediste:
        - el TÍTULO a la altura donde hoy está el LOGO
        - el "BY FRIAS" donde hoy está el TÍTULO
        - el LOGO un poco más arriba que antes               */
  .logo-wrap{            /* logo un poco más alto */
    transform: translateY(-6px);
  }

  .site-title{           /* título más arriba (queda donde estaba el logo) */
    transform: translateY(-10px);
  }

  .site-tagline{         /* tagline sube un poco (queda donde estaba el título) */
    transform: translateY(-4px);
  }

  /* Si usás subrayado bajo “BERA”, que no baje demasiado al subir el título */
  .site-title .title-bera::after{
    bottom: -3px;
  }

  /* Botones laterales: pequeño respiro para que no “toquen” el branding */
  .collection-toggle{ margin-right: 4px; }
  .nav-toggle{         margin-left:  4px; }

  /* Extra: en pantallas MUY chicas, bajamos un toque el ajuste para no rozar el notch */
  @media (max-width: 360px){
    .site-branding{ transform: translateY(-8px); }
    .site-title{    transform: translateY(-8px); }
    .logo-wrap{     transform: translateY(-4px); }
  }
}
/* ===== Header mobile: 2 filas seguras (notch-friendly) ===== */
@media (max-width: 768px) {

  /* Respeta la safe-area del notch y deja “aire” arriba */
  .site-header {
    padding-top: calc(env(safe-area-inset-top, 0px) + 6px);
    padding-bottom: 6px;
    background: #fff; /* asegura fondo cuando es sticky */
  }

  /* Dos filas: 
     fila 1 -> botones; fila 2 -> branding centrado */
  .header-inner{
    display: grid !important;
    grid-template-columns: 1fr auto;   /* izq: catálogo, der: hamburguesa */
    grid-template-areas:
      "catalogo menu"
      "branding branding";
    align-items: center;
    row-gap: 6px;
    min-height: 0; /* que no fuerce alturas raras */
    padding: 0;
  }

  .collection-toggle{ grid-area: catalogo; justify-self: start; margin-right: 8px; }
  .nav-toggle      { grid-area: menu;     justify-self: end;   margin-left:  8px; }

  .site-branding{
    grid-area: branding;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    /* IMPORTANT: anulamos “hacks” previos que cortaban el logo */
    transform: none !important;
    margin: 0;
    min-width: 0;
    text-align: center;
  }

  .logo-wrap{ width: 42px; height: 42px; }
  .logo{ width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

  /* Título en una línea y subrayado como te gusta */
  .site-title{
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    margin: 0;
    font-size: 1.15rem;
    letter-spacing: .08em;
    white-space: nowrap;
    line-height: 1;
  }

  /* Si estás usando spans para BERA/CLOTHING, mantené el subrayado así;
     si no, este bloque no rompe nada. */
  .site-title .title-bera{ position: relative; }
  .site-title .title-bera::after{
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -3px;
    height: 3px; border-radius: 2px;
    background: var(--color-acento, #e91e63);
  }

  .site-tagline{
    display: block;
    font-size: .72rem;
    letter-spacing: .06em;
    color: var(--color-acento-sec);
    text-transform: uppercase;
    margin-top: 2px;
  }

  /* Por si quedó alguna regla previa que subía piezas: neutralizamos */
  .site-title, .site-tagline, .logo-wrap{ transform: none !important; }
}

/* Extra seguridad en pantallas muy chicas */
@media (max-width: 360px){
  .logo-wrap{ width: 38px; height: 38px; }
  .site-title{ font-size: 1.05rem; }
}
/* ===== MOBILE: controles pro en las esquinas del header ===== */
@media (max-width: 768px){

  /* Header con aire arriba (notch) y altura para ubicar controles abajo */
  .site-header{
    padding-top: calc(env(safe-area-inset-top,0px) + 8px);
    padding-bottom: 10px;
    background:#fff;
  }

  .header-inner{
    position: relative;          /* ancla para posicionar los botones */
    display: flex !important;
    justify-content: center !important;  /* branding centrado */
    align-items: center !important;
    min-height: 96px;            /* DA ESPACIO para que los botones no toquen el título */
    padding: 0;
  }

  /* Branding intacto, pero con un pequeño margen inferior */
  .site-branding{ margin-bottom: 8px; }
  .site-title{ white-space: nowrap; line-height:1; margin: 6px 0 2px; }
  .site-tagline{ display:block; margin-top: 2px; }

  /* BOTONES: redondos, sutiles, pegados a las esquinas inferiores del header */
  .collection-toggle,
  .nav-toggle{
    position: absolute !important;
    bottom: 8px;
    width: 44px; height: 44px;               /* tap target iOS */
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    color: #111;
    padding: 0;
    margin: 0;
    z-index: 5;
  }
  .collection-toggle{ left: 10px; }
  .nav-toggle{       right: 10px; }

  /* Solo ícono en mobile para que no “baje” la línea del título */
  .collection-toggle .collection-label{ display:none; }
  .collection-toggle .icon-hanger{ width:22px; height:22px; }

  /* Hamburguesa centrada dentro del botón redondo */
  .nav-toggle .bar{
    display:block; width:22px; height:2px; background:#111; margin:3px 0;
  }

  /* Si tenías reglas previas que movían cosas, las anulamos aquí */
  .site-branding, .site-title, .site-tagline, .logo-wrap{ transform:none !important; }
  .collection-toggle, .nav-toggle{ box-shadow: 0 2px 8px rgba(0,0,0,.06) !important; background:#fff !important; }
}

/* Muy chicas (iPhone mini): un poco más compacto */
@media (max-width: 360px){
  .header-inner{ min-height: 90px; }
  .collection-toggle, .nav-toggle{ width: 42px; height: 42px; }
}
/* === Mejora de hit-area y prioridad de los botones del header (mobile) === */
@media (max-width: 768px){
  /* 1) Botones más grandes y por encima de todo */
  .collection-toggle,
  .nav-toggle{
    width: 56px;                 /* antes 44px */
    height: 56px;
    z-index: 1200;               /* por encima del carrusel u overlays */
    touch-action: manipulation;  /* ayuda a iOS a priorizar el tap */
    -webkit-tap-highlight-color: rgba(0,0,0,.08);
  }

  /* 2) Cualquier toque dentro del botón cuenta (no solo sobre las barritas/ícono) */
  .collection-toggle *, 
  .nav-toggle *{
    pointer-events: none;        /* el click llega al <button> */
  }

  /* 3) Un poco más de separación del borde para que el pulgar no choque el gesto del sistema */
  .collection-toggle{ left: 12px; bottom: 10px; }
  .nav-toggle{       right: 12px; bottom: 10px; }

  /* 4) Evitar que algo del header/carrusel los cubra */
  .site-header{ position: sticky; top: 0; z-index: 1100; }
  .header-inner{ min-height: 100px; } /* deja aire para los botones más grandes */

  /* 5) Cierre del Catálogo con área amable */
  .collection-menu{ z-index: 1300; }
  .collection-close{
    position: absolute; top: 8px; right: 8px;
    width: 44px; height: 44px;
  }
  .collection-close::after{
    content: ''; position: absolute; inset: -12px;   /* hit-area ampliada */
  }

  /* 6) Overlay a pantalla completa, aseguro clicks para cerrar */
  #collection-overlay{
    position: fixed; inset: 0; z-index: 1250;
    pointer-events: auto;
  }
}
/* Catálogo más grande en móvil */
@media (max-width: 768px){
  .collection-toggle{
    width: 64px;                 /* antes 56/44 */
    height: 64px;
  }
  .collection-toggle .icon-hanger{ width: 26px; height: 26px; }

  /* hit-area invisible extra alrededor, sin cambiar el look */
  .collection-toggle::after{
    content:"";
    position:absolute;
    inset:-8px;                  /* +8px de área clickeable */
  }
}
.collection-toggle {
  width: 50px;   /* Igual o apenas más que el menú hamburguesa */
  height: 50px;
  padding: 0;    /* El padding extra puede reducir el área de clic, mejor usar width/height */
  display: flex;
  align-items: center;
  justify-content: center;
}

.collection-toggle svg {
  width: 44px;  /* Ajustar proporcionalmente */
  height: 44px;
}
/* Subrayado correcto SOLO para el "BERA" del hero */
.hero-bera{
  position: relative;
  display: inline-block;
  white-space: nowrap;           /* evita salto de línea en BERA */
}

.hero-bera::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.25em;               /* distancia respecto a la base del texto */
  height: 3px;                   /* grosor de la línea */
  background: var(--color-acento);
  border-radius: 2px;
}

/* En pantallas muy chicas, que la línea no “grite” */
@media (max-width: 360px){
  .hero-bera::after{ height: 2px; bottom: -0.22em; }
}

/* Blindaje: si algún estilo global intenta subrayar el título del hero, lo anulamos aquí */
.hero-title .title-bera::after,
.hero-title .site-title::after{
  display: none !important;
}
/* Título del hero */
.hero-title {
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

/* Subrayado SOLO bajo "BERA" */
.hero-bera {
  position: relative;
  display: inline-block;
  padding-bottom: 0.08em; /* separa el subrayado del texto */
}

.hero-bera::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;          /* asegura que ocupe el ancho exacto de "BERA" */
  bottom: -0.02em;   /* fino ajuste vertical */
  height: 0.16em;
  background: var(--color-acento);
  border-radius: 2px;
}
/* Asegurar jerarquía de capas */
.site-header { position: relative; z-index: 1100; }

/* El panel y su overlay siempre por arriba del hero */
.collection-menu { position: fixed; z-index: 1200; }
.collection-overlay { position: fixed; z-index: 1150; }

/* Que el hero NO tape nada */
.hero, 
.hero .swiper-container,
.hero .swiper-wrapper,
.hero .swiper-slide {
  position: relative;
  z-index: 0;
}

/* (por si Swiper trae z-index altos en botones) */
.swiper-button-prev,
.swiper-button-next,
.swiper-pagination {
  z-index: 100; /* debajo del overlay (1150) y panel (1200) */
}
/* ===== A11y: Focus visible consistente en botones de producto ===== */
.view-product-btn:focus-visible,
.add-to-cart-icon:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--color-acento);
  outline-offset: 2px;
}
/* ===== Accesibilidad: respeta "reduce motion" ===== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* ===== Normalización final: tamaño razonable de .collection-toggle ===== */
.collection-toggle {
  width: auto !important;
  height: auto !important;
  padding: 6px 10px !important;
  border-radius: 4px !important;
}
/* ===== A11y: foco en imágenes clicables dentro de tarjetas ===== */
.producto-item a:focus-visible img,
.featured-card a:focus-visible img {
  outline: 3px solid var(--color-acento);
  outline-offset: 2px;
}
/* ===== FIX: Catálogo off‑canvas arriba del overlay y clickeable ===== */
#collection-overlay,
.collection-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 3500 !important;     /* debajo del panel */
  pointer-events: auto !important;
}
#collection-overlay::before,
.collection-overlay::before {
  pointer-events: none !important; /* que el pseudo no capture taps */
}

.collection-menu {
  position: fixed !important;
  top: 0; left: 0;
  width: 80%; max-width: 320px; height: 100vh;
  background: #fff;
  transform: translateX(-100%);
  transition: transform .3s ease;
  z-index: 4000 !important;     /* por arriba del overlay */
  pointer-events: auto !important;
}
.collection-menu.show { transform: translateX(0); }
/* ===== Mobile tweak: bigger Catálogo button (wins over previous rules) ===== */
@media (max-width: 768px){
  .collection-toggle{
    width: 72px !important;          /* antes 44–64 */
    height: 72px !important;
    border-radius: 999px !important;  /* mantiene formato circular */
    padding: 0 !important;            /* el tamaño lo definen width/height */
  }
  .collection-toggle .icon-hanger{
    width: 30px !important;           /* icono un poco más grande */
    height: 30px !important;
  }
}
/* ===== FINAL MOBILE OVERRIDE: Catálogo = Hamburguesa + empuje a la izquierda ===== */
@media (max-width: 768px){
  /* Igualar dimensiones del círculo de Catálogo con el del menú hamburguesa */
  .collection-toggle,
  .nav-toggle{
    width: 56px !important;      /* mismo alto/ancho */
    height: 56px !important;
    border-radius: 999px !important;
    padding: 0 !important;       /* el tamaño lo definen width/height */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Empujar un poco más a la izquierda el botón de Catálogo */
  .collection-toggle{
    left: 6px !important;        /* antes ~10–12px */
  }

  /* Asegurar tamaño coherente del icono dentro del círculo */
  .collection-toggle .icon-hanger{
    width: 22px !important;
    height: 22px !important;
  }
}
/* === Announcement / Marquee bar === */
.announcement-bar{
  position: relative;
  background:#111;                 /* color de fondo del cartel */
  color:#fff;
  height: 36px;
  display:flex;
  align-items:center;
  overflow:hidden;
  z-index: 1200;                   /* por encima del contenido, debajo de overlays */
  padding: 0.75rem 1rem;   /* más gruesa verticalmente */
  font-size: 0.95rem;      /* tamaño de texto levemente mayor */
  padding-top: env(safe-area-inset-top,0px);
}
.announcement-bar .ann-close{
  position:absolute;
  right: 8px;
  top: calc(4px + env(safe-area-inset-top,0px));
  width:28px; height:28px;
  border-radius:999px;
  border:0; background:rgba(255,255,255,.1);
  color:#fff; font-size:18px; line-height:1;
  cursor:pointer;
}
.announcement-bar .ann-close:hover{ background:rgba(255,255,255,.2); }

.announcement-bar .ann-track{
  width:100%;
  white-space: nowrap;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.announcement-bar .ann-row{
  display:inline-block;
  padding-left: 100%;
  /* velocidad de desplazamiento: ajustá la duración */
  animation: ann-marquee 22s linear infinite;
  font-size: 0.95rem;
  letter-spacing:.2px;
}

@keyframes ann-marquee{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Respeta preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce){
  .announcement-bar .ann-row{ animation: none; }
}

/* Compacto en mobile pequeño */
@media (max-width:420px){
  .announcement-bar{ height:34px; }
  .announcement-bar .ann-row{ font-size:.9rem; }
}
/* ===== Header search ===== */
.header-search{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin: 0 .5rem;
}

.header-search-input{
  width: min(52vw, 360px);
  height: 40px;
  padding: 0 .75rem;
  border: 1px solid #e0e0e0;
  border-radius: 999px;
  background: #fff;
  font: inherit;
  color: var(--color-principal);
  transition: box-shadow var(--transition), border-color var(--transition);
}
.header-search-input::placeholder{ color:#9c9c9c; }

.header-search-input:focus{
  outline: none;
  border-color: var(--color-acento);
  box-shadow: 0 0 0 3px rgba(233,30,99,.15);
}

.header-search-btn{
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid #e0e0e0;
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--color-principal);
  transition: background var(--transition), transform var(--transition), border-color var(--transition);
}
.header-search-btn:hover{
  background: var(--color-acento);
  color:#fff;
  border-color: var(--color-acento);
  transform: translateY(-1px);
}

/* Ubicación en el header (grid/flex friendly) */
.header-inner .header-search { order: 2; }

/* ===== Mobile: más compacto ===== */
@media (max-width: 768px){
  .header-search-input{
    width: 44vw;
    height: 36px;
    padding: 0 .65rem;
  }
  .header-search-btn{ width: 36px; height: 36px; }
  /* Si el header queda apretado, podés ocultar el botón y enviar con Enter */
  /* .header-search-btn{ display:none; } */
}
/* ===== Buscador dentro del menú hamburguesa (mobile) ===== */
.menu-search{
  display: none;                 /* por defecto oculto (desktop) */
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem .25rem;   /* arriba del listado */
  border-bottom: 1px solid #eaeaea;
  background: rgba(255,255,255,0.97);
}
.menu-search-input{
  flex: 1 1 auto;
  height: 40px;
  padding: 0 .85rem;
  border: 1px solid #e0e0e0;
  border-radius: 999px;
  background: #fff;
  font: inherit;
  color: var(--color-principal);
  transition: box-shadow var(--transition), border-color var(--transition);
}
.menu-search-input::placeholder{ color:#9c9c9c; }
.menu-search-input:focus{
  outline: none;
  border-color: var(--color-acento);
  box-shadow: 0 0 0 3px rgba(233,30,99,.15);
}

.menu-search-btn{
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid #e0e0e0;
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--color-principal);
  transition: background var(--transition), transform var(--transition), border-color var(--transition);
}
.menu-search-btn:hover{
  background: var(--color-acento);
  color:#fff;
  border-color: var(--color-acento);
  transform: translateY(-1px);
}

/* Mostrar el buscador solo cuando el menú móvil está abierto */
@media (max-width: 768px){
  .main-nav.show .menu-search{ display: flex; }
  /* si tu menú no usa .show, y se muestra con display:flex, podés usar: */
  /* .main-nav { position:relative; } .main-nav .menu-search{ display:flex; } */
}





/* === FINAL MOBILE HEADER + FEATURED GRID FIX (2025‑08‑14) === */

/* 1) MOBILE header: centra el branding y evita que se pegue a la hamburguesa
      - Quitamos posicionamiento absoluto en los botones
      - Armamos una grilla de 3 columnas: [Catálogo] [Branding] [Hamburguesa] */
@media (max-width:768px){
  .header-inner{
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 88px !important;        /* aire para logo + “BY FRIAS” */
    padding: 0 !important;
  }
  .collection-toggle,
  .nav-toggle{
    position: static !important;         /* <- saca absolute previos */
    width: 56px !important; 
    height: 56px !important;
    margin: 0 !important;
  }
  .site-branding{
    grid-column: 2 !important;
    justify-self: center !important;
    text-align: center !important;
    margin: 0 auto !important;
  }
}

/* 2) MOBILE: Featured en 2 columnas como productos.html */
@media (max-width:768px){
  .grid-featured{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    max-width: none !important;          /* que use todo el ancho disponible */
  }
  .featured-card img{
    aspect-ratio: 4 / 3 !important;  /* mantiene la proporción de destacados en mobile */
    height: auto !important;         /* deja que el ratio determine la altura */
    object-fit: cover !important;    /* recorte agradable sin deformar */
  }
}
/* Ocultar totalmente la búsqueda desktop en mobile */
@media (max-width: 768px) {
  .header-search-desktop,
  .header-search-toggle {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}
.collection-toggle {
  position: relative;
  z-index: 5; /* sobre cualquier resto */
  background: #fff; /* mismo fondo que el header */
}
/* --- FIX: evitar doble subrayado en el header --- */
.site-branding .site-title::after{
  display: none !important;   /* quita la barra global del título */
}

/* (opcional) afinado del subrayado solo de "BERA" en el header */
.site-branding .site-title .title-bera::after{
  height: 3px;          /* grosor uniforme */
  bottom: -3px;         /* separación del texto */
  border-radius: 2px;
}
/* === MOBILE NAV: que el buscador no se salga y look "card" === */
@media (max-width:768px){
  .main-nav{
    left: 0; right: 0;              /* asegurar ancho de viewport */
    box-sizing: border-box;          /* contar paddings dentro del 100% */
    border-radius: 14px;             /* card */
    margin: .25rem .5rem;            /* separarlo de los bordes */
  }

  .menu-search{
    box-sizing: border-box;
    width: 100%;
    padding: .75rem;                 /* ya no suma más del 100% */
    border: 0;
    border-bottom: 1px solid #eee;
    background: #fff;
  }
  .menu-search-input{
    min-width: 0;                    /* PERMITE encogerse */
    flex: 1 1 auto;
    height: 44px;
  }
  .menu-search-btn{
    flex: 0 0 44px;                  /* ancho fijo para el botón */
    width: 44px; height: 44px;
  }

  /* Lista con mejor tactilidad y jerarquía */
  .nav-list{
    padding: .25rem .25rem .75rem;
    gap: 0;
  }
  .nav-list li a{
    display: block;
    padding: 14px 14px;
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 600;
  }
  .nav-list li + li a{ margin-top: 6px; }
  .nav-list li a:hover,
  .nav-list li a:active{
    background: #f6f6f7;
    color: var(--color-principal);
  }

  /* Sombra y blur para sensación de panel */
  .main-nav{
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(8px);
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
    border: 1px solid #ececec;
  }
}

/* Mini ajuste: el campo no debe sobresalir del card en pantallas XS */
@media (max-width:360px){
  .menu-search-input{ height: 40px; }
  .menu-search-btn{   width: 40px; height: 40px; }
}

/* EXTRA: cuando el menú está abierto, asegura que nada se superponga */
@media (max-width:768px){
  .main-nav.show{ z-index: 2000; }
}
/* Altura del cartel */
:root{ --ann-h: 36px; }
@media (max-width:420px){ :root{ --ann-h: 34px; } }

/* Sticky + animación de plegado */
.announcement-bar{
  position: sticky;
  top: 0;
  z-index: 1400;
  max-height: var(--ann-h);
  transition: max-height .35s ease, opacity .25s ease;
  will-change: max-height, opacity;
}
.announcement-bar.closing{
  max-height: 0;         /* se pliega */
  opacity: 0;            /* y se desvanece */
  overflow: hidden;      /* evita “saltos” de contenido interno */
}

/* El header baja mientras el cartel esté activo (y anima el cambio) */
.site-header{ transition: top .35s ease, background var(--transition), box-shadow var(--transition); }
html.has-ann .site-header{ top: var(--ann-h); }
/* === Sticky announcement bar (override) === */
:root{ --ann-h: 36px; }
@media (max-width:420px){ :root{ --ann-h: 34px; } }

/* hace sticky el cartel */
.announcement-bar{
  position: -webkit-sticky !important; /* iOS */
  position: sticky !important;
  top: 0;
  z-index: 1400;                       /* > header (1100) */
  height: var(--ann-h) !important;
  max-height: var(--ann-h);
  transition: max-height .25s ease, opacity .2s ease;
}

/* animación al cerrar */
.announcement-bar.closing{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

/* empuja el header hacia abajo mientras el cartel esté visible */
html.has-ann .site-header{
  top: var(--ann-h) !important;
}
/* === Announcement bar fijo (siempre visible al scrollear) === */
:root{
  /* alto + safe-area (iPhone notch) */
  --ann-h: calc(36px + env(safe-area-inset-top, 0px));
}
@media (max-width:420px){
  :root{ --ann-h: calc(34px + env(safe-area-inset-top, 0px)); }
}

.announcement-bar{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 1400;                     /* > header (1100) */
  height: var(--ann-h) !important;
  padding-top: env(safe-area-inset-top, 0px);  /* respeta notch */
  transition: max-height .25s ease, opacity .2s ease;
}

/* animación de plegado al cerrar (tu JS ya agrega .closing) */
.announcement-bar.closing{
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
}

/* empuja el header hacia abajo mientras el cartel esté visible */
html.has-ann .site-header{
  margin-top: var(--ann-h) !important;
}
#toast-layer{
  position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 9999; pointer-events: none;
}
.cart-toast{
  pointer-events: auto;
  padding: .6rem .9rem;
  background: #111; color: #fff; border-radius: 6px;
  opacity: 0; transform: translateY(8px);
  transition: transform .18s ease, opacity .18s ease;
  max-width: 90vw; text-align: center; font-size: .95rem;
}
.cart-toast.show{ opacity:1; transform: translateY(0); }
.cart-toast.hide{ opacity:0; transform: translateY(8px); }
.is-loading { position: relative; }
.is-loading::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(1px);
}
.is-loading::before{
  content:"";
  position:absolute; left:50%; top:50%;
  width:24px; height:24px; margin:-12px 0 0 -12px;
  border:3px solid currentColor; border-right-color: transparent;
  border-radius:50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.filters-bar{ display:flex; gap:.75rem; align-items:center; margin-bottom: .75rem; }
.filters-bar .results-count{ font-size:.95rem; opacity:.8; }
/* 1) Valor por defecto para la variable */
:root { --ann-h: 0px; }

/* 2) Announcement bar: sticky y sin márgenes raros */
.announcement-bar{
  position: sticky;
  top: env(safe-area-inset-top, 0);
  z-index: 100;
  margin: 0;           /* evita gaps extra */
  border: 0;
  /* animación de plegado (si ya la tenés, dejá tus valores) */
  overflow: hidden;
  transition: max-height .3s ease;
}
.announcement-bar.closing { max-height: 0; }

/* 3) Compensación del header: SOLO con top, no con margin/padding */
.site-header{
  position: sticky;                 /* si tu header es fixed, usá fixed sin problemas */
  top: var(--ann-h);                /* esta es LA única compensación */
  margin-top: 0 !important;         /* evita doble espacio por margen heredado */
  padding-top: 0;                   /* idem */
}

/* 4) Si en algún lado seteaste body padding-top para “bajar” todo, neutralizalo */
.has-ann body,
body.has-ann{
  padding-top: 0 !important;
}

/* 5) Hero/primera sección: por las dudas, sin margen superior */
.swiper-hero,
.hero,
main > :first-child {
  margin-top: 0;
}
/* ===========================
   Announcement bar compacta (finita)
   =========================== */
:root{
  /* Altura objetivo en mobile */
  --ann-max: 44px;   /* antes 36px */
  --ann-fs: 14px;    /* antes 13px */
  --ann-py: 8px;     /* antes 6px */
}


/* Bar: una sola línea, centrada verticalmente, sticky y con animación por max-height */
.announcement-bar{
  position: sticky;
  top: env(safe-area-inset-top, 0);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: .5rem;

  /* Compacta */
  padding: var(--ann-py) max(12px, env(safe-area-inset-left)) var(--ann-py) max(12px, env(safe-area-inset-right));
  font-size: var(--ann-fs);
  line-height: 1.2;
  max-height: var(--ann-max);

  /* Que no “salte” a dos líneas */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* Animación de cierre (tu JS usa .closing → max-height:0) */
  transition: max-height .28s ease;
}

.announcement-bar.closing{ max-height: 0; }

/* Texto dentro (si tenés un span/p contenedor) */
.announcement-bar .ann-text{
  flex: 1 1 auto;
  min-width: 0;              /* permite elipsis */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Botón de cerrar chiquito y que no empuje altura */
.announcement-bar .ann-close{
  flex: 0 0 auto;
  inline-size: 24px;
  block-size: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 0;
  line-height: 1;
  cursor: pointer;
}

/* Header: que sólo se compense con --ann-h (sin márgenes extra) */
.site-header{
  position: sticky;                 /* si lo usás fixed, cambialo a fixed */
  top: var(--ann-h);
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Un toque más alto en desktop si querés */
@media (min-width: 768px){
  :root{
    --ann-max: 48px; /* antes 40px */
    --ann-fs: 15px;  /* antes 14px */
    --ann-py: 10px;  /* antes 8px */
  }
}
.producto-item img {
  width: 100%;
  aspect-ratio: 3 / 4;  /* prendas suelen verse bien 3:4 */
  height: auto;
  object-fit: cover;
}
/* === Main nav centrado y sobre el slider — MOBILE ONLY === */
@media (max-width: 768px){
  .main-nav{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: min(680px, calc(100% - 32px));
    z-index: 200;
  }

  /* Botón hamburguesa: fondo sólido y sin blend/backdrop para que no se vea lo de atrás */
  .nav-toggle{
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    mix-blend-mode: normal;
  }
  .nav-toggle:hover{ background: #fff; }
  .nav-toggle.open{
    background:#111;     /* estilo cuando está abierto (opcional) */
    color:#fff;
  }
}

/* Cuando el menú está abierto, ocultar los dots del slider que “ensucian” */
.nav-open .swiper-hero .swiper-pagination{
  opacity: 0;
  pointer-events: none;
}
/* === Z-indexes coherentes: header bajo, menú arriba del hero === */
@media (max-width: 768px){ .site-header{ z-index: 300; } }

/* === Menú desplegable centrado y estable — MOBILE ONLY === */
@media (max-width: 768px){
  .main-nav{
    position: fixed;                           /* no depende del ancho del header */
    left: 0; right: 0;
    top: calc(var(--ann-h, 0px) + var(--hdr-h, 0px));
    width: min(700px, calc(100% - 24px));      /* centrado con respiración lateral */
    margin: 0 auto;
    z-index: 400;                               /* por encima del slider/paginación */
    display: none;                              /* se muestra con la clase .show */
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    overflow: hidden;
  }
  .main-nav.show{ display: block; }
  .nav-open .swiper-hero .swiper-pagination{ opacity: 0; pointer-events: none; }

  .nav-toggle{
    background:#fff;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 2px 10px rgba(0,0,0,.06);
    -webkit-backdrop-filter:none; backdrop-filter:none;
    mix-blend-mode:normal;
    background-clip: padding-box;
  }
  .nav-toggle:hover{ background:#fff; }
  .nav-toggle.open{ background:#111; color:#fff; }
}
@media (max-width: 768px) {
  .site-logo {
    margin-top: 2px; /* o 1px si querés algo mínimo */
  }
}
/* style.css */
@media (max-width: 768px){
  .logo-wrap { margin-top: 2px; }           /* ~1–2 px visuales */
  /* alternativa subpixel: */
  /* .logo-wrap { transform: translateY(1px); } */
}
/* style.css */
:root { --ann-h: 0px; --hdr-h: 56px; }

body {
  padding-top: calc(var(--ann-h) + var(--hdr-h));
}
/* Micro-ajuste fino del logo en mobile */
@media (max-width: 768px){
  .logo-wrap{ margin-top: 1px !important; }
}
body { padding-top: calc(var(--ann-h) + var(--hdr-h)); }
.site-header{ min-height: 56px; }
.site-branding{ min-height: 28px; }
@media (max-width: 768px){
  .announcement-bar{
    padding: 1rem 1.25rem;    /* más aire vertical en mobile */
    font-size: 1rem;          /* legibilidad mejorada */
  }
}
/* ===== DESKTOP HEADER SPACING – final authority (≥1024px) ===== */
@media (min-width: 1024px){
  /* despega anuncio ↔ header y evita choques con el logo */
  .site-header{
    padding-top: 14px;
    padding-bottom: 12px;
  }
  .header-inner{
    min-height: 112px;
    row-gap: 10px;        /* si usás grid, agrega aire vertical */
  }
  .site-branding .logo-wrap{
    margin-top: 6px;      /* baja un toque el logo */
  }
  /* separa nav del logo y evita heredar 'top' de mobile */
  .main-nav{
    margin-top: 12px;
    position: static !important; /* por si alguna regla móvil se filtra */
  }
}
/* === FINAL DESKTOP HEADER LAYOUT OVERRIDE (≥1024px) === */
@media (min-width: 1024px){
  /* 1) Forzar layout en una sola fila: [Catálogo] [Branding centrado] [Nav derecha] */
  .header-inner{
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    column-gap: 16px !important;
    min-height: 112px !important;
    position: relative !important;
  }

  /* 2) Branding centrado SIN posicionamiento absoluto */
  .site-branding{
    position: static !important;
    transform: none !important;
    grid-column: 2 !important;
    justify-self: center !important;
    margin: 0 !important;
  }

  /* 3) Botón Catálogo a la izquierda, Nav a la derecha; nada de margin-top */
  .collection-toggle{ grid-column: 1 !important; }
  .main-nav{
    grid-column: 3 !important;
    align-self: center !important;
    margin-top: 0 !important;
    position: static !important;
  }

  /* 4) Un poco de aire entre announcement y header para que el logo no "toque" */
  .site-header{ padding-top: 14px !important; }
}
/* === DESKTOP HEADER: 2 filas limpias (≥1024px) === */
@media (min-width: 1024px){
  /* Grid con dos filas: 
     fila 1 -> [Catálogo] [Branding] [Controles]
     fila 2 -> [Nav centrada a lo ancho] */
  .header-inner{
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "catalogo branding controles"
      "nav     nav     nav";
    align-items: center !important;
    column-gap: 16px !important;
    row-gap: 8px !important;
    min-height: 112px !important;
    position: relative !important;
  }

  /* Áreas explícitas */
  .collection-toggle{ grid-area: catalogo !important; }
  .site-branding{
    grid-area: branding !important;
    position: static !important;
    transform: none !important;
    justify-self: center !important;
    margin: 0 !important;
  }
  .main-nav{
    grid-area: nav !important;
    position: static !important;
    margin: 0 !important;
    justify-self: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .nav-list{
    display: flex !important;
    gap: 1.5rem !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Aire entre anuncio y header para que el logo no toque */
  .site-header{ padding-top: 14px !important; }

  /* Evitar artefactos de la búsqueda colapsada en desktop */
  .header-search-desktop{
    border: 0 !important;
    box-shadow: none !important;
  }
  .site-header:not(.search-open) .header-search-desktop{
    display: none !important;   /* oculto cuando no está abierta */
  }
}
/* === FINAL DESKTOP HEADER LAYOUT (≥1024px) — clean, 2-row, no overlap === */
@media (min-width: 1024px){
  /* 0) Spacing from announcement bar */
  .site-header{ padding-top: 14px !important; padding-bottom: 12px !important; }

  /* 1) Two-row grid: 
        Row 1 -> [Catálogo] [Branding] [Lupa]
        Row 2 -> [Nav centered]
     This wins over any previous header layout rules. */
  .header-inner{
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "catalogo branding search"
      "nav      nav      nav" !important;
    align-items: center !important;
    justify-items: stretch !important;
    column-gap: 16px !important;
    row-gap: 10px !important;
    min-height: 108px !important;
    position: relative !important;
  }

  /* 2) Explicit areas */
  .collection-toggle{ grid-area: catalogo !important; justify-self: start !important; position: static !important; margin: 0 !important; }
  .site-branding{ grid-area: branding !important; justify-self: center !important; position: static !important; transform: none !important; margin: 0 !important; }
  .header-search-toggle{ grid-area: search !important; justify-self: end !important; position: static !important; margin: 0 !important; }

  /* 3) Nav on its own row, centered and flat (no card look) */
  .main-nav{
    grid-area: nav !important;
    justify-self: center !important;
    position: static !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .nav-list{
    display: flex !important;
    gap: 1.5rem !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
  }

  /* 4) Hide the collapsible desktop search bar when closed to avoid the “pill” */
  .header-search-desktop{ display: none !important; }
}
/* === FINAL DESKTOP HEADER LAYOUT (≥1024px): NAV ← | BRANDING ● | SEARCH + CATÁLOGO → === */
@media (min-width:1024px){
  /* Header spacing from announcement bar */
  .site-header{ padding-top:14px !important; padding-bottom:12px !important; }

  /* Grid with 4 columns: [nav] [branding] [search] [catalog] */
  .header-inner{
    display:grid !important;
    grid-template-columns: auto 1fr auto auto !important;
    align-items:center !important;
    column-gap:16px !important;
    row-gap:0 !important;
    min-height:110px !important;
    position:relative !important;
  }

  /* 1) NAV a la izquierda */
  .main-nav{
    grid-column:1 !important;
    justify-self:start !important;
    align-self:center !important;
    position:static !important;
    margin:0 !important;
    background:transparent !important;
    border:0 !important; box-shadow:none !important; border-radius:0 !important;
  }
  .nav-list{ display:flex !important; gap:1.5rem !important; align-items:center !important; padding:0 !important; }

  /* 2) BRANDING perfectamente centrado */
  .site-branding{
    grid-column:2 !important;
    justify-self:center !important;
    align-self:center !important;
    position:static !important;    /* anula absolute previos */
    transform:none !important;
    margin:0 !important;
  }

  /* 3) SEARCH (lupa y campo) en la columna 3, a la derecha del branding */
  .header-search-toggle{
    grid-column:3 !important;
    justify-self:end !important;
    position:static !important;   /* quita absolute anteriores */
    margin:0 !important;
  }
  /* Campo colapsado por defecto (no ocupa espacio) */
  .header-search-desktop{
    grid-column:3 / span 2 !important;     /* cuando se abra, usa col 3-4 */
    justify-self:end !important;
    align-self:center !important;
    position:static !important;
    width:0 !important; opacity:0 !important; overflow:hidden !important; pointer-events:none !important;
    background:#fff; border:1px solid #ccc; border-radius:999px; box-shadow:0 2px 6px rgba(0,0,0,.15);
    transition: width .25s ease, opacity .2s ease !important;
  }
  .header-search-desktop .header-search-input{ height:44px; width:420px; max-width:46vw; border:0; outline:0; padding:0 .75rem; }
  .header-search-desktop .header-search-btn{ width:44px; height:44px; border:0; background:none; }
  .site-header.search-open .header-search-desktop{ width:min(420px,46vw) !important; opacity:1 !important; pointer-events:auto !important; }

  /* 4) CATÁLOGO en la columna 4, pegado a la derecha */
  .collection-toggle{
    grid-column:4 !important;
    justify-self:end !important;
    align-self:center !important;
    position:static !important;   /* NO absolute en desktop */
    width:auto !important; height:auto !important; padding:6px 10px !important;
    border-radius:4px !important; margin:0 !important;
  }
}
/* === DESKTOP HEADER LAYOUT (≥1024px): Nav ← | Branding ● | Lupa + Catálogo → === */
@media (min-width:1024px){
  /* Espacio interno para que el logo no toque la announcement bar */
  .site-header{ padding-top: 16px !important; padding-bottom: 12px !important; }

  /* Grid de 4 columnas: [nav] [branding] [search] [catalog] */
  .header-inner{
    display: grid !important;
    grid-template-columns: auto 1fr auto auto !important;
    align-items: center !important;
    column-gap: 16px !important;
    row-gap: 0 !important;
    min-height: 110px !important;
    position: relative !important;
  }

  /* NAV a la izquierda, sin tarjeta/sombra en desktop */
  .main-nav{
    grid-column: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    position: static !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  .nav-list{ display: flex !important; gap: 1.5rem !important; align-items: center !important; padding: 0 !important; }

  /* BRANDING centrado absoluto: NO absolute, NO transform */
  .site-branding{
    grid-column: 2 !important;
    justify-self: center !important;
    align-self: center !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    text-align: center !important;
  }

  /* LUPA (toggle) a la derecha del branding */
  .header-search-toggle{
    grid-column: 3 !important;
    justify-self: end !important;
    align-self: center !important;
    display: inline-flex !important;
    position: static !important;
    margin: 0 !important;
  }

  /* Campo de búsqueda: por defecto oculto (lo abre .search-open del JS) */
  .header-search-desktop{
    grid-column: 3 / span 2 !important;
    justify-self: end !important;
    align-self: center !important;
    position: static !important;
    display: none;              /* se muestra solo con .search-open */
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
  }
  .site-header.search-open .header-search-desktop{ display: inline-flex; }

  /* CATÁLOGO a la derecha del todo */
  .collection-toggle{
    grid-column: 4 !important;
    justify-self: end !important;
    align-self: center !important;
    position: static !important;
    margin-left: 12px !important;
  }
}
/* === DESKTOP HARD LAYOUT (≥1024px): Nav ← | Branding ● | Catálogo | Lupa/Campo → === */
@media (min-width:1024px){
  .site-header{ padding-top: 14px !important; }
  .site-header .header-inner{
    display: grid !important;
    grid-template-columns: auto 1fr auto auto !important; /* [nav][branding][catalog][search] */
    align-items: center !important;
    column-gap: 16px !important;
  }
  .main-nav{
    grid-column: 1 !important;
    display: flex !important;
    position: static !important; top:auto !important; left:auto !important; right:auto !important; transform:none !important;
    margin: 0 !important; padding: 0 !important; background: transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important;
  }
  .nav-list{ display:flex !important; gap:1.5rem !important; margin:0 !important; padding:0 !important; }

  .site-branding{
    grid-column: 2 !important; justify-self: center !important; align-self: center !important;
    position: static !important; transform: none !important; text-align: center !important; margin: 0 !important;
  }

  .collection-toggle{
    grid-column: 3 !important; justify-self: end !important; align-self: center !important; position: static !important;
    margin: 0 !important; width:auto !important; height:auto !important; padding:6px 10px !important; border-radius:4px !important; background: transparent !important; box-shadow:none !important;
  }

  .header-search-toggle{ grid-column: 4 !important; justify-self: end !important; position: static !important; margin-left: 8px !important; }
  .header-search-desktop{
    grid-column: 4 !important; justify-self: end !important; align-items: center !important; position: static !important;
    display: inline-flex !important; width: auto !important; opacity: 1 !important; pointer-events: auto !important;
    background: #fff; border: 1px solid #e0e0e0; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.08);
  }
}
/* === DESKTOP HEADER: NAV ← | BRANDING ● | CATÁLOGO | LUPA→CAMPO (≥1024px) === */
@media (min-width:1024px){
  /* 0) Grid maestro en una fila */
  .site-header .header-inner{
    display:grid !important;
    grid-template-columns:auto 1fr auto auto !important; /* nav | branding | catálogo | search */
    grid-template-areas:"nav branding catalog search" !important;
    align-items:center !important;
    column-gap: 24px !important;
    row-gap: 0 !important;
    min-height:110px !important;
  }

  /* 1) NAV a la izquierda */
  .main-nav{ grid-area:nav !important; display:flex !important; position:static !important; margin:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; }
  .nav-list{ display:flex !important; gap:1.5rem !important; margin:0 !important; padding:0 !important; }

  /* 2) BRANDING centrado real */
  .site-branding{ grid-area:branding !important; justify-self:center !important; align-self:center !important; position:static !important; transform:none !important; text-align:center !important; margin:0 !important; }

  /* 3) CATÁLOGO a la derecha del branding */
  .collection-toggle{ grid-area:catalog !important; justify-self:end !important; align-self:center !important; position:static !important; margin:0 !important; }

  /* 4) BUSCADOR: botón de lupa visible por defecto, campo al abrir */
  .header-search-toggle{ 
    grid-area:search !important; justify-self:end !important; align-self:center !important;
    position:static !important; margin:0 !important;
    width:40px; height:40px; border:1px solid #e0e0e0; border-radius:999px; background:#fff;
    display:inline-grid; place-items:center; cursor:pointer;
  }
  .header-search-toggle svg{ width:20px; height:20px; display:block; }

  /* Campo oculto por defecto en desktop; aparece con .search-open que agrega el JS */
  .header-search-desktop{ grid-area:search !important; justify-self:end !important; align-self:center !important; position:static !important; display:none !important; }
  .site-header.search-open .header-search-toggle{ display:none !important; }
  .site-header.search-open .header-search-desktop{ display:inline-flex !important; }
} 
/* === Productos: filtros en una sola línea (mobile) ===
   Coloca "Tipo de prenda", "Talle" y "Ordenar por" en la misma fila
   sin superponerse, manteniendo el label arriba del select en cada bloque. */
@media (max-width: 768px){
  /* Contenedor de filtros en 3 columnas: detecta el form que tenga los 3 selects */
  form:has(#filter-tipo, #filter-talle, #sort-by){
    /* usamos grid para alinear cada par label+select como un bloque */
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;                      /* respiración entre columnas */
    align-items: end;               /* alinear los selects abajo de su label */
  }

  /* Cada par label+select se convierte en un pequeño grid vertical */
  label[for="filter-tipo"],
  label[for="filter-talle"],
  label[for="sort-by"]{
    display: block;                 /* cada label ocupa su propia celda */
    font-size: .95rem;
    margin: 0;                      /* quitamos márgenes grandes */
  }

  /* Asegura que el select correspondiente quede debajo del label y llene el ancho */
  label[for="filter-tipo"] + #filter-tipo,
  label[for="filter-talle"] + #filter-talle,
  label[for="sort-by"] + #sort-by{
    display: block;
    width: 100%;
    margin-top: .35rem;             /* pequeña separación del label */
  }

  /* Evitar que los selects crezcan más allá del contenedor */
  #filter-tipo, #filter-talle, #sort-by{ max-width: 100%; }

  /* Si existe una barra extra de filtros arriba/abajo, que no rompa el layout */
  .filters-bar{ grid-column: 1 / -1; }  /* ocupa el ancho completo si aparece */
}

/* ≥769px (tablet/desktop) dejamos el comportamiento que ya tenías */