/** Shopify CDN: Minification failed

Line 213:19 Unexpected "{"
Line 213:28 Expected ":"
Line 218:19 Unexpected "{"
Line 218:28 Expected ":"
Line 227:19 Unexpected "{"
Line 227:28 Expected ":"
Line 235:19 Unexpected "{"
Line 235:28 Expected ":"
Line 238:19 Unexpected "{"
Line 238:28 Expected ":"
... and 150 more hidden warnings

**/
/* ===== Base de la sección ===== */
.flyer-carousel { max-width: 1200px; margin: 40px auto; padding: 20px; color:#333; font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; }
.flyer-carousel__grid { display:grid; grid-template-columns: 1fr 2fr; gap: 24px; align-items: stretch; }

/* Flyer */
.flyer-carousel__flyer { border-radius: 12px; overflow: hidden; background:#f7f7f7; position: relative; }
.flyer-carousel__picture { display:block; }
.flyer-carousel__img { width:100%; height:100%; display:block; aspect-ratio: 4/3; object-fit: contain; object-position:center; }
.flyer-carousel__placeholder { display:grid; place-items:center; min-height: 100%; padding: 20px; }

/* Productos */
.flyer-carousel__products { position:relative; }

/* Carrusel: pista y slide */
.products-carousel { position:relative; }
.products-carousel__track { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; list-style:none; margin:0; padding:0; }
.products-carousel__slide { display:block; }

/* Tarjeta */
.pcard { background:#fff; border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,.08); overflow:hidden; display:flex; flex-direction:column; height:100%; }
.pcard__imgwrap { display:block; background:#f9f9f9; position:relative; }
.pcard__img { width:100%; height:auto; display:block; aspect-ratio: 1/1; object-fit: contain; }
.pcard__badge { position:absolute; top:8px; left:8px; padding:4px 8px; border-radius:8px; font-size:12px; font-weight:700; color:#fff; }
.pcard__badge--soldout { background:#232323; opacity:.92; }

.pcard__info { padding:12px; display:flex; flex-direction:column; gap:8px; }
.pcard__title { font-size:14px; font-weight:700; line-height:1.25; text-align:center; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pcard__title a { color:#222; text-decoration:none; }
.pcard__prices { display:flex; gap:6px; justify-content:center; align-items:baseline; }
.pcard__price--compare { color:#888; text-decoration:line-through; font-size:13px; }
.pcard__price { color:#232323; font-weight:800; font-size:16px; }

.pcard__add { border:0; border-radius:8px; padding:10px 12px; font-weight:700; cursor:pointer; text-align:center; transition:background .2s ease, transform .1s ease; }
.pcard__add:active { transform: translateY(1px); }
.pcard__add[disabled], .pcard__add[aria-disabled="true"] { background:#ccc; color:#666; cursor:not-allowed; }

/* Navegación */
.products-carousel__nav { position:absolute; top:50%; left:-18px; right:-18px; transform:translateY(-50%); display:flex; justify-content:space-between; pointer-events:none; z-index:5; }
.products-carousel__btn { width:36px; height:36px; border-radius:50%; border:1px solid #eee; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.08); color:#232323; display:grid; place-items:center; cursor:pointer; pointer-events:auto; transition: color .2s ease; }
.products-carousel__btn:hover { color:#000; }
.products-carousel__btn:disabled { opacity:.4; cursor:not-allowed; }

/* Dots */
.products-carousel__dots { display:flex; gap:8px; justify-content:center; margin-top:16px; }
.products-carousel__dots .dot { width:12px; height:12px; border-radius:50%; background:#ddd; border:0; cursor:pointer; }
.products-carousel__dots .dot.active { background:#232323; }
.products-carousel__dots .dot:focus-visible { outline:2px solid #232323; outline-offset:2px; }

/* ===== Modal de variantes ===== */
.fc-modal { position: fixed; inset: 0; z-index: 2147483647; background: rgba(0,0,0,.45); display: none; overflow-y: auto; }
.fc-modal__dialog { background:#fff; width: 90%; max-width: 460px; margin: 5% auto; padding: 16px; border-radius: 12px; position: relative; max-height: 80vh; overflow-y: auto; text-align: center; }
.fc-modal__close { position: absolute; top: 10px; right: 12px; font-size: 28px; background: transparent; border: 0; cursor: pointer; }
.fc-modal__title { margin: 0 0 8px; font-weight: 800; }
.fc-modal__content { text-align: left; }

.fc-variant { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 4px; border-bottom:1px solid #eee; }
.fc-variant.is-soldout { opacity:.72; }
.fc-variant__btn { border:0; padding:8px 12px; border-radius:8px; cursor:pointer; font-weight:700; }

/* Responsive */
@media (max-width: 1024px){
  .flyer-carousel__grid { grid-template-columns: 1fr; }
  .products-carousel__track { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 575px){
  .products-carousel__track { grid-template-columns: 1fr; }
  /* En móviles puedes llenar alto con cover si prefieres */
  .flyer-carousel__img { object-fit: cover; }
}

/* =========================================================
   PALETA MAIRIM + OVERRIDES (SCOPED A .flyer-carousel)
   ========================================================= */
.flyer-carousel{
  --brand: #D3005B;         /* magenta principal */
  --brand-600: #B0004B;     /* hover */
  --brand-50: #FFE3F0;      /* fondo suave */

  /* Algunos themes usan variables para botones */
  --color-button: var(--brand);
  --color-button-hover: var(--brand-600);
  --color-button-text: #fff;

  /* …y otras usan rgb(var(--color-button-rgb)) */
  --color-button-rgb: 211,0,91;
  --color-button-text-rgb: 255,255,255;
}

/* Fondo del flyer coherente con marca */
.flyer-carousel .flyer-carousel__picture{ background: var(--brand-50); }

/* === BOTONES DEL CARD (forzar color marca) === */
.flyer-carousel .pcard :is(
  .pcard__add,
  button,
  [type="submit"],
  [name="add"],
  .button,
  .button--primary,
  .btn,
  .btn--primary,
  .product-form__submit,
  .quick-add__submit,
  .quick-add-button,
  a.button,
  a.btn
){
  background: var(--brand) !important;
  background-image: none !important;   /* algunos themes ponen degradé */
  color: #fff !important;
  border: 1px solid var(--brand) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(211,0,91,.18) !important;
  filter: none !important;
}
.flyer-carousel .pcard :is(
  .pcard__add,
  button,
  [type="submit"],
  [name="add"],
  .button,
  .button--primary,
  .btn,
  .btn--primary,
  .product-form__submit,
  .quick-add__submit,
  .quick-add-button,
  a.button,
  a.btn
):hover{
  background: var(--brand-600) !important;
  border-color: var(--brand-600) !important;
  color:#fff !important;
}
.flyer-carousel .pcard :is(.pcard__add,button,[type="submit"],[name="add"]):active{ transform: translateY(1px); }
.flyer-carousel .pcard :is(.pcard__add, .button, .product-form__submit)[disabled]{
  background:#cfcfcf !important;
  border-color:#cfcfcf !important;
  color:#fff !important;
  box-shadow:none !important;
  cursor:not-allowed !important;
}

/* Botón del modal de variantes */
.flyer-carousel .fc-variant__btn{
  background: var(--brand) !important;
  color:#fff !important;
  border:1px solid var(--brand) !important;
}
.flyer-carousel .fc-variant__btn:hover{
  background: var(--brand-600) !important;
  border-color: var(--brand-600) !important;
}

/* Flechas y dots con acento de marca */
.flyer-carousel .products-carousel__btn{ color: var(--brand); }
.flyer-carousel .products-carousel__btn:hover{ background: var(--brand); color:#fff; }
.flyer-carousel .products-carousel__dots .dot.active{ background: var(--brand); transform: scale(1.15); }

/* Precio activo con color de marca */
.flyer-carousel .pcard__price{ color: var(--brand); font-weight:800; }
.flyer-carousel .pcard__price--compare{ color:#9aa0a6; }



/* ============ FLYER (desktop) – fondo blanco y tamaño completo ============ */
.flyer-carousel .flyer-carousel__flyer{
  background:#fff;                 /* panel blanco */
}

.flyer-carousel .flyer-carousel__picture{
  background:#fff;                 /* quitamos el rosa */
  height:100%;                     /* ocupa toda la columna */
  display:flex;
  align-items:center;
  justify-content:center;
}

.flyer-carousel .flyer-carousel__img{
  aspect-ratio:auto;               /* anula el 4/3 */
  height:100%;                     /* llena la altura */
  width:auto;                      /* mantiene proporción */
  max-width:100%;
  object-fit:contain;              /* sin recorte */
}

/* En tablet/móvil volvemos a comportamiento normal (ancho completo) */
@media (max-width:1024px){
  .flyer-carousel .flyer-carousel__picture{ height:auto; }
  .flyer-carousel .flyer-carousel__img{ height:auto; width:100%; }
}



/* ===== Centrar el carrusel a la mitad del flyer (solo escritorio) ===== */
@media (min-width: 1025px){
  /* El grid usa la altura del flyer; centramos el contenido de la celda derecha */
  #flyer-carousel-{{ section.id }} .flyer-carousel__grid{
    align-items: center; /* centra verticalmente las celdas del grid */
  }

  /* Por si algún estilo del tema fuerza 'stretch', nos aseguramos en la derecha */
  #flyer-carousel-{{ section.id }} .flyer-carousel__products{
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;  /* centra el carrusel dentro de la celda */
    height: 100%;
  }

  /* Quita márgenes verticales residuales dentro del contenedor del carrusel */
  #flyer-carousel-{{ section.id }} .products-carousel{
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* En tablet/móvil volvemos al flujo normal (carrusel arriba del flyer) */
@media (max-width: 1024px){
  #flyer-carousel-{{ section.id }} .flyer-carousel__grid{
    align-items: stretch;
  }
  #flyer-carousel-{{ section.id }} .flyer-carousel__products{
    align-self: auto;
    justify-content: flex-start;
  }
}



/* La caja define el ratio; la imagen respeta su ratio nativo */
.pcard__imgwrap{
  aspect-ratio: 1 / 1;          /* cuadrada, estable */
}
.pcard__img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  aspect-ratio: auto;           /* evita deformar el bitmap */
}

/* Flyer: respeta ratio natural; se ve nítido */
.flyer-carousel__img{
  width: 100%;
  height: auto;                 /* usa el alto natural */
  object-fit: contain;          /* sin recortes en desktop */
}

/* Si prefieres llenar el alto en móvil, puedes usar cover aquí */
@media (max-width: 767px){
  .flyer-carousel__img{ object-fit: cover; }
}



/* ========= Desktop: el flyer iguala la altura del carrusel ========= */
@media (min-width: 1025px){
  /* la fila de la grid ya tiene align-items: stretch, pero reforzamos */
  #flyer-carousel-{{ section.id }} .flyer-carousel__flyer{
    height: 100%;
    display: flex;
  }

  /* el contenedor del <picture> debe estirar al 100% de la columna */
  #flyer-carousel-{{ section.id }} .flyer-carousel__picture{
    width: 100%;
    height: 100%;
    background: #fff;            /* fondo blanco (sin rosa) */
    border-radius: 12px;         /* conserva el mismo redondeo si lo usas */
    overflow: hidden;
  }

  /* la imagen ocupa TODA la altura disponible, como un banner */
  #flyer-carousel-{{ section.id }} .flyer-carousel__img{
    width: 100%;
    height: 100%;
    object-fit: cover;           /* llena alto = misma altura que carrusel */
    object-position: center;     /* centrada; recorte simétrico */
  }
}

/* Si prefieres evitar recorte, cambia object-fit: cover por contain */



/* ===== Desktop: el flyer ocupa el mismo tamaño que una tarjeta ===== */
@media (min-width: 1025px){
  /* La izquierda tendrá ancho automático (igual al de la tarjeta). */
  #flyer-carousel-{{ section.id }} .flyer-carousel__grid{
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: 24px;
  }

  /* El contenedor del flyer no fuerza alturas; las pondrá el JS. */
  #flyer-carousel-{{ section.id }} .flyer-carousel__flyer{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #flyer-carousel-{{ section.id }} .flyer-carousel__picture{
    width: 100%;
    height: auto;               /* ← la altura la sincroniza el JS */
    background: #fff;           /* fondo blanco */
    border-radius: 12px;
    overflow: hidden;
  }
  #flyer-carousel-{{ section.id }} .flyer-carousel__img{
    width: 100%;
    height: 100%;
    object-fit: contain;          /* se ve “tipo banner” sin deformarse */
    object-position: center;
  }
}



/* Asegura que el contenedor del flyer respete el tamaño que le pone el JS */
#flyer-carousel-{{ section.id }} .flyer-carousel__flyer{
  box-sizing: border-box;
  overflow: hidden;
}

#flyer-carousel-{{ section.id }} .flyer-carousel__picture{
  background: #fff;            /* fondo blanco como pediste */
}

#flyer-carousel-{{ section.id }} .flyer-carousel__img{
  width: 100%;
  height: 100%;
  object-fit: cover;            /* cambia a 'contain' si no quieres recorte */
  object-position: center;
}



/* ====== Flyer más pequeño y proporcional (solo esta sección) ====== */
#flyer-carousel-{{ section.id }} {
  /* ajusta este valor a tu gusto: 300–360px suele quedar bien */
  --flyer-max-width: 330px;
}

/* Limita el ancho del flyer y neutraliza tamaños inline si existieran */
#flyer-carousel-{{ section.id }} .flyer-carousel__flyer {
  width: auto !important;
  height: auto !important;
  max-width: var(--flyer-max-width) !important;
  margin: 0 auto;                 /* lo centra dentro de su columna */
  box-sizing: border-box;
  overflow: hidden;
}

/* La cuadrícula: columna izquierda (flyer) estrecha + carrusel amplio */
#flyer-carousel-{{ section.id }} .flyer-carousel__grid {
  grid-template-columns: minmax(260px, var(--flyer-max-width)) 1fr;
  align-items: center;            /* mantiene el carrusel centrado verticalmente */
}

/* El contenedor y la imagen mantienen proporción y fondo blanco */
#flyer-carousel-{{ section.id }} .flyer-carousel__picture {
  width: 100% !important;
  height: auto !important;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}

#flyer-carousel-{{ section.id }} .flyer-carousel__img {
  display: block;
  width: 100%;
  height: auto;                   /* mantiene proporción natural */
  object-fit: contain;            /* sin recortes */
  object-position: center;
}

/* En tablets/móviles, el flyer vuelve a ancho completo arriba del carrusel */
@media (max-width: 1024px) {
  #flyer-carousel-{{ section.id }} .flyer-carousel__grid {
    grid-template-columns: 1fr;
  }
  #flyer-carousel-{{ section.id }} .flyer-carousel__flyer {
    max-width: 560px;             /* puedes ampliar un poco en tablet si quieres */
  }
}

@media (max-width: 575px) {
  #flyer-carousel-{{ section.id }} .flyer-carousel__flyer {
    max-width: 100%;
  }
}


/* === Desktop: hacer el flyer un poco más pequeño === */
@media (min-width: 1025px){
  /* Ajusta aquí el tamaño del flyer (prueba 280–320px) */
  #flyer-carousel-{{ section.id }}{
    --flyer-max-width: 280px; /* <-- si aún lo ves grande, baja a 260px */
  }

  /* Fuerza dos columnas y limita el ancho del flyer */
  #flyer-carousel-{{ section.id }} .flyer-carousel__grid{
    grid-template-columns: minmax(240px, var(--flyer-max-width)) 1fr !important;
    align-items: center;
  }

  /* El contenedor del flyer respeta ese ancho y no estira la altura */
  #flyer-carousel-{{ section.id }} .flyer-carousel__flyer{
    max-width: var(--flyer-max-width) !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto;
  }

  /* La imagen mantiene proporción y NO llena en alto */
  #flyer-carousel-{{ section.id }} .flyer-carousel__picture{
    width: 100% !important;
    height: auto !important;
  }
  #flyer-carousel-{{ section.id }} .flyer-carousel__img{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
  }
}



/* ===== Base de la sección ===== */
.flyer-carousel{
  --brand: #D3005B;              /* magenta principal */
  --brand-600: #B0004B;          /* hover */
  --brand-50: #FFE3F0;           /* fondo suave */

  /* tamaño del flyer en desktop: ajusta aquí (260–340px) */
  --flyer-max-width: 280px;

  /* para temas que usan variables de botones */
  --color-button: var(--brand);
  --color-button-hover: var(--brand-600);
  --color-button-text: #fff;
  --color-button-rgb: 211,0,91;
  --color-button-text-rgb: 255,255,255;
}

.flyer-carousel { 
  max-width: 1200px; 
  margin: 40px auto; 
  padding: 20px; 
  color:#333; 
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; 
}

/* ===== Layout de 2 columnas por defecto (desktop) ===== */
#flyer-carousel-{{ section.id }} .flyer-carousel__grid{
  display:grid;
  grid-template-columns: minmax(240px, var(--flyer-max-width)) 1fr; /* flyer | carrusel */
  column-gap: 24px;
  align-items: center;
}

/* ====== Flyer (izquierda) ====== */
#flyer-carousel-{{ section.id }} .flyer-carousel__flyer{
  background:#fff;
  border-radius: 12px;
  overflow: hidden;
  max-width: var(--flyer-max-width);
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

#flyer-carousel-{{ section.id }} .flyer-carousel__picture{
  display:block;
  width: 100%;
  height: auto;                  /* NO forzamos altura */
  background:#fff;               /* fondo blanco (sin rosa) */
}

#flyer-carousel-{{ section.id }} .flyer-carousel__img{
  display:block;
  width:100%;
  height:auto;                   /* mantiene proporción original */
  object-fit: contain;           /* sin recortes */
  object-position:center;
}

/* ====== Carrusel (derecha) ====== */
.flyer-carousel__products{ position:relative; }

.products-carousel { position:relative; }

.products-carousel__track{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px;
  list-style:none;
  margin:0;
  padding:0;
}

.products-carousel__slide{ display:block; }

/* Tarjeta de producto */
.pcard{
  background:#fff; 
  border-radius:12px; 
  box-shadow:0 2px 6px rgba(0,0,0,.08); 
  overflow:hidden; 
  display:flex; 
  flex-direction:column; 
  height:100%;
}

.pcard__imgwrap{ 
  display:block; 
  background:#f9f9f9; 
  position:relative; 
  aspect-ratio: 1 / 1; 
}
.pcard__img{ 
  width:100%; 
  height:100%; 
  object-fit:contain; 
}

.pcard__badge{ 
  position:absolute; top:8px; left:8px; 
  padding:4px 8px; border-radius:8px; 
  font-size:12px; font-weight:700; color:#fff; 
}
.pcard__badge--soldout{ background:#232323; opacity:.92; }

.pcard__info{ padding:12px; display:flex; flex-direction:column; gap:8px; }
.pcard__title{ 
  font-size:14px; font-weight:700; line-height:1.25; text-align:center; margin:0; 
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; 
}
.pcard__title a{ color:#222; text-decoration:none; }
.pcard__prices{ display:flex; gap:6px; justify-content:center; align-items:baseline; }
.pcard__price--compare{ color:#888; text-decoration:line-through; font-size:13px; }
.pcard__price{ color: var(--brand); font-weight:800; font-size:16px; }

/* Botón de tarjeta con color de marca */
.pcard__add{
  background: var(--brand) !important;
  color:#fff !important;
  border: 1px solid var(--brand) !important;
  border-radius:8px !important;
  padding:10px 12px; 
  font-weight:700; 
  cursor:pointer; 
  text-align:center; 
  transition:background .2s ease, transform .1s ease; 
  box-shadow: 0 4px 12px rgba(211,0,91,.18) !important;
}
.pcard__add:hover{ background: var(--brand-600) !important; border-color: var(--brand-600) !important; }
.pcard__add:active{ transform: translateY(1px); }
.pcard__add[disabled], .pcard__add[aria-disabled="true"]{ background:#ccc !important; color:#666 !important; cursor:not-allowed; }

/* Flechas y Dots con acento de marca */
.products-carousel__nav{ 
  position:absolute; top:50%; left:-18px; right:-18px; 
  transform:translateY(-50%); 
  display:flex; justify-content:space-between; 
  pointer-events:none; z-index:5; 
}
.products-carousel__btn{ 
  width:36px; height:36px; border-radius:50%; border:1px solid #eee; 
  background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.08); 
  color: var(--brand); 
  display:grid; place-items:center; cursor:pointer; pointer-events:auto; 
  transition: background .2s ease, color .2s ease; 
}
.products-carousel__btn:hover{ background: var(--brand); color:#fff; }
.products-carousel__btn:disabled{ opacity:.4; cursor:not-allowed; }

.products-carousel__dots{ display:flex; gap:8px; justify-content:center; margin-top:16px; }
.products-carousel__dots .dot{ width:12px; height:12px; border-radius:50%; background:#ddd; border:0; cursor:pointer; }
.products-carousel__dots .dot.active{ background: var(--brand); transform: scale(1.15); }

/* ===== Responsive ===== */

/* Tablet: 2 columnas en el carrusel */
@media (max-width: 1024px){
  #flyer-carousel-{{ section.id }} .flyer-carousel__grid{
    grid-template-columns: 1fr;     /* se apila: flyer arriba, carrusel abajo */
    row-gap: 20px;
    align-items: stretch;
  }
  .products-carousel__track{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  #flyer-carousel-{{ section.id }} .flyer-carousel__flyer{ max-width: 560px; }
}

/* Móvil: 1 columna en el carrusel */
@media (max-width: 575px){
  .products-carousel__track{ grid-template-columns: 1fr; }
  #flyer-carousel-{{ section.id }} .flyer-carousel__flyer{ max-width: 100%; }
}



/* ===== Móvil: flyer grande (solo esta sección) ===== */
@media (max-width: 575px){
  /* El contenedor del flyer ocupa todo el ancho disponible */
  #flyer-carousel-{{ section.id }} .flyer-carousel__flyer{
    max-width: 100%;
  }

  /* Damos altura proporcional para que la imagen llene bien el espacio */
  #flyer-carousel-{{ section.id }} .flyer-carousel__picture{
    width: 100%;
    aspect-ratio: 4 / 5;          /* ajústalo a 3/4 o 1/1 si quieres más/menos alto */
  }

  /* La imagen llena el contenedor (sin bordes) */
  #flyer-carousel-{{ section.id }} .flyer-carousel__img{
    width: 100%;
    height: 100%;
    object-fit: contain;            /* “cover” = se ve más grande; puede recortar un poco */
    object-position: center;
  }
}



/* ==== FIX móvil (solo esta sección) ==== */
@media (max-width: 575px){
  /* 1) Una sola columna y menos separación vertical entre flyer y carrusel */
  #flyer-carousel-{{ section.id }} .flyer-carousel__grid{
    grid-template-columns: 1fr !important;
    gap: 10px !important;             /* antes 24px: reduce la separación */
  }

  /* 2) El flyer ocupa todo el ancho (quitamos cualquier límite heredado) */
  #flyer-carousel-{{ section.id }} .flyer-carousel__flyer{
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  /* 3) El contenedor del flyer: ancho completo y sin forzar alturas raras */
  #flyer-carousel-{{ section.id }} .flyer-carousel__picture{
    width: 100% !important;
    height: auto !important;
    background: #fff;                  /* mantenemos fondo blanco */
  }

  /* 4) La imagen: llena el ancho y mantiene proporción (sin recortes) */
  #flyer-carousel-{{ section.id }} .flyer-carousel__img{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;    /* usa 'cover' si la quieres más alta, pero recorta */
    object-position: center !important;
    display: block;
  }

  /* 5) Por si el tema mete margen arriba del carrusel, lo eliminamos */
  #flyer-carousel-{{ section.id }} .products-carousel{
    margin-top: 0 !important;
  }
}



/* ==== Móvil: pegar flyer y carrusel (solo esta sección) ==== */
@media (max-width: 575px){
  /* 1) Cero separación entre las filas del grid */
  #flyer-carousel-{{ section.id }} .flyer-carousel__grid{
    gap: 0 !important;
    row-gap: 0 !important;
  }

  /* 2) Asegura que no haya margen inferior en el flyer */
  #flyer-carousel-{{ section.id }} .flyer-carousel__flyer,
  #flyer-carousel-{{ section.id }} .flyer-carousel__picture,
  #flyer-carousel-{{ section.id }} .flyer-carousel__img{
    margin: 0 !important;
    padding-bottom: 0 !important;
  }

  /* 3) Quita cualquier margen/padding que el tema ponga al carrusel */
  #flyer-carousel-{{ section.id }} .products-carousel,
  #flyer-carousel-{{ section.id }} .carousel-section{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 4) Por si el track recibe margen extra */
  #flyer-carousel-{{ section.id }} .products-carousel__track{
    margin-top: 0 !important;
  }

  /* 5) Frena márgenes colapsados de cualquier hijo directo del grid */
  #flyer-carousel-{{ section.id }} .flyer-carousel__grid > *{
    margin: 0 !important;
  }
}



/* ===== MÓVIL (<=575px): sin espacio entre flyer y carrusel ===== */
@media (max-width: 575px){

  /* 1) El grid sin separación vertical */
  #flyer-carousel-{{ section.id }} .flyer-carousel__grid{
    gap: 0 !important;
    row-gap: 0 !important;
  }

  /* 2) Asegura que el flyer no aporte margen/padding inferior */
  #flyer-carousel-{{ section.id }} .flyer-carousel__flyer,
  #flyer-carousel-{{ section.id }} .flyer-carousel__picture,
  #flyer-carousel-{{ section.id }} .flyer-carousel__img{
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 3) Todos los wrappers del carrusel sin margen/padding arriba */
  #flyer-carousel-{{ section.id }} .carousel-section,
  #flyer-carousel-{{ section.id }} .carousel-container,
  #flyer-carousel-{{ section.id }} .products-carousel{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 4) El track (UL) también sin margen/padding superiores */
  #flyer-carousel-{{ section.id }} .products-carousel__track{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 5) Evita cualquier margen colapsado de hijos del grid */
  #flyer-carousel-{{ section.id }} .flyer-carousel__grid > *{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 6) Por si el tema mete pseudo-elementos con altura "fantasma" */
  #flyer-carousel-{{ section.id }} .products-carousel::before,
  #flyer-carousel-{{ section.id }} .products-carousel::after{
    content: none !important;
    display: none !important;
  }

  /* 7) Último recurso: un micro “tirón” hacia arriba del carrusel.
        Si tras recargar aún ves 2–6px, súbelo a -6px o -8px. */
  #flyer-carousel-{{ section.id }} .carousel-section{
    margin-top: -4px !important;
  }
}



/* ===== Mobile ONLY (<=575px) — Pegar flyer y carrusel ===== */
@media (max-width: 575px){

  /* 1) La grid sin separación vertical */
  #flyer-carousel-{{ section.id }} .flyer-carousel__grid{
    gap: 0 !important;
    row-gap: 0 !important;
  }

  /* 2) Asegura que el flyer no deje espacio abajo */
  #flyer-carousel-{{ section.id }} .flyer-carousel__flyer,
  #flyer-carousel-{{ section.id }} .flyer-carousel__picture,
  #flyer-carousel-{{ section.id }} .flyer-carousel__img{
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 3) El contenedor del carrusel sin margen/padding superior */
  #flyer-carousel-{{ section.id }} .flyer-carousel__products{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 4) Wrappers internos del carrusel sin margen arriba */
  #flyer-carousel-{{ section.id }} .products-carousel,
  #flyer-carousel-{{ section.id }} .products-carousel__track{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 5) Por si algún hijo directo del grid trae margen colapsado */
  #flyer-carousel-{{ section.id }} .flyer-carousel__grid > *{
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 6) “Tirón” fino por si el tema deja 2–6px residuales */
  #flyer-carousel-{{ section.id }} .flyer-carousel__products{
    margin-top: -6px !important; /* ajusta a -4/-8 si hiciera falta */
  }
}



/* ===== Mobile fix (<=575px) — eliminar hueco entre flyer y carrusel ===== */
@media (max-width: 575px){

  /* 1) Cancelar el aspect-ratio que estaba dejando altura fantasma */
  #flyer-carousel-{{ section.id }} .flyer-carousel__picture{
    aspect-ratio: auto !important;   /* anula el 4/5 */
    height: auto !important;
    width: 100% !important;
  }

  /* 2) La imagen sin recortes y sin márgenes */
  #flyer-carousel-{{ section.id }} .flyer-carousel__img{
    display: block;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 3) La grid sin separación vertical */
  #flyer-carousel-{{ section.id }} .flyer-carousel__grid{
    gap: 0 !important;
    row-gap: 0 !important;
  }

  /* 4) Cualquier wrapper del carrusel sin margen/padding superior */
  #flyer-carousel-{{ section.id }} .flyer-carousel__products,
  #flyer-carousel-{{ section.id }} .products-carousel,
  #flyer-carousel-{{ section.id }} .products-carousel__track{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 5) Si tu tema aún deja 2–6px residuales, tira un pelín hacia arriba el carrusel */
  #flyer-carousel-{{ section.id }} .flyer-carousel__products{
    margin-top: 1px !important; /* ajusta a -4/-8 si lo ves necesario */
  }
}