/* ============================================================
   Overrides de responsive — tema pj3
   Cargado DESPUÉS de screen_second.4.5.0.min.css
   Cubre: /site/ofertas.html, frontpage y el chrome compartido
          (omnibar + barra CTA + banner de cookies + chat)
   ============================================================ */

/* ---------- 1) /site/ofertas.html — grid de promos ----------
   El tema usa float:left + clear:both ausente en .grid-specials
   (el clear:both del :nth-child(3n+1) solo se aplica a .layout-checkout),
   mas un max-height:393px duro. Resultado: filas dentadas.

   OJO: .grid-specials NO es exclusivo de ofertas. /site/restaurantes.html
   emite el mismo <section class="grid-specials grid"> y el mismo
   body.layout-specials, asi que no se puede scope-ar por el contenedor.
   Se usa :not(:has(.stores-list)) porque .stores-list solo existe en
   restaurantes; sin esto esta grilla de 3 columnas partia la pagina de
   tiendas en 3 y la lista quedaba angosta en la tercera columna. */
.grid-specials:not(:has(.stores-list)){
  display:grid !important;
  grid-template-columns:1fr;
  gap:24px 0;
  align-items:stretch;
}
@media (min-width:30em){                 /* 480px -> 2 col */
  .grid-specials:not(:has(.stores-list)){grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
}
@media (min-width:48em){                 /* 768px -> 3 col */
  .grid-specials:not(:has(.stores-list)){grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}
}

.grid-specials:not(:has(.stores-list)) .product{
  float:none !important;
  width:auto !important;
  max-height:none !important;
  padding:0 !important;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.grid-specials:not(:has(.stores-list)) .product .product-image{
  width:100% !important;
  margin:0 0 12px !important;
  aspect-ratio:1.38/1;                   /* todas las promos son 1.38:1 */
  object-fit:cover;
  border-radius:8px;
}
/* description y precio dejan de flotar: el boton ya no depende del texto */
.grid-specials:not(:has(.stores-list)) .product .description{float:none !important;width:100% !important}
.grid-specials:not(:has(.stores-list)) .product h3{margin:0 0 6px}
.grid-specials:not(:has(.stores-list)) .product .button-set-stacked{
  float:none !important;
  width:100% !important;
  display:block;
  margin-top:auto;
}
/* En el tema "Precio" caia en su propia linea por accidente: el bloque angosto
   (display:table + float:right, ~83px) forzaba el wrap. Al ocupar todo el ancho
   el wrap se pierde, asi que se fuerza explicitamente. */
.grid-specials:not(:has(.stores-list)) .product .price > span:first-child{display:block !important}
.grid-specials:not(:has(.stores-list)) .product .block-btn{clear:none;margin-top:12px;margin-bottom:0}
.grid-specials:not(:has(.stores-list)) .product .block-btn a{font-size:1rem}

/* ---------- 2) Omnibar 960-1200px ----------
   A 60em el tema mete padding:25px 56px 23px 24px en .omnibar-nav-account a
   y nav.top-nav-list{width:47%}; los floats chocan y account+cart bajan de
   linea, dejando .omnibar-wrap en 182-192px en vez de 97px. */
@media (min-width:60em) and (max-width:75em){
  nav.top-nav-list{width:auto !important;max-width:420px}
  .omnibar-nav-account a{padding:22px 18px 18px 14px !important}
  .omnibar-nav-account strong{font-size:20px !important}
  .omnibar-nav-account .message-large{font-size:14px !important}
  .omnibar-nav-cart a{padding:18px 22px 20px 14px !important}
  .omnibar-nav .order-total{font-size:22px !important}
  .omnibar-nav .order-total .dollar-sign{font-size:14px !important}
  .omnibar-nav .icon-account{
    width:42px !important;height:42px !important;
    background-position:-240px 6px !important;
  }
}

/* ---------- 3) Barra CTA (DOMICILIO / PARA LLEVAR / VERIFICAR) ----------
   El tema invierte el padding: base 5px 50px y @media(min-width:45em) 5px 17px,
   asi que movil recibe 50px. Ademas los :before con los guiones son
   position:absolute sin position:relative en .intro-text, por lo que se
   anclan al .banner-cta y quedan sueltos. */
.header .primary-nav .wrap.banner-cta{
  padding:10px 16px !important;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px 14px;
}
@media (max-width:62.5em){ .header .primary-nav .wrap{padding-left:118px !important} }

.intro-text,.in-text{
  font-size:1.15rem !important;
  line-height:1.2 !important;
  margin:0 !important;
  padding:0 !important;
}
.intro-text.divleft{position:relative;padding-left:34px !important;margin:0 !important}
.intro-text.divleft:before{letter-spacing:-2px}

button.button.home-cta,
button.button.home-cta-alt{
  padding:11px 20px !important;
  margin:0 !important;
  font-size:0.95rem !important;
}
@media (max-width:45em){
  .header .primary-nav .wrap.banner-cta{gap:6px 8px;padding:8px 10px !important}
  .intro-text,.in-text{font-size:0.95rem !important}
  .intro-text.divleft{padding-left:26px !important}
  button.button.home-cta,
  button.button.home-cta-alt{padding:9px 12px !important;font-size:0.85rem !important}
}

/* ---------- 4) Frontpage — iconos de accesos deformados ----------
   .feature-cta img se fuerza a 75x75 con object-fit:fill, pero los ratios
   naturales son 0.687 / 0.773 / 0.967 / 1.26: los iconos se estiran. */
.feature-cta img{
  width:75px !important;
  height:75px !important;
  object-fit:contain;
}

/* ---------- 5) Banner de cookies duplicado ----------
   coexisten dos .eupopup-container (EN y ES) en las mismas coordenadas
   fixed/ bottom:0 / z-index:9999999, asi que el texto se pisa. */
body > .eupopup-container ~ .eupopup-container{display:none !important}
.eupopup-container{
  font-size:12.5px !important;
  line-height:1.45 !important;
  padding:10px 44px 10px 16px !important;
}

/* ---------- 6) Chat pegado al borde derecho ---------- */
#img-open-chat{right:10px !important}

/* ---------- 7) Hero del frontpage — que mande el aspect ratio ----------
   screen_second.min.css mete 18 reglas .homecerousel{height:...} (450, 530,
   580, 412, 280, 430, 400, 385, 525, 715, 592...) y varias se contradicen
   dentro del mismo breakpoint, asi que el alto real depende del orden de
   cascada. Medido sobre el slide visible eso deja entre 12 y 63px de espacio
   muerto y a 1920 el banner crece a 1829px de ancho contra un tope de 578px.

   Los creatives reales son 1400x525 (AR 2.667) en desktop, 1125x437 (2.574) en
   tablet y 600x846 (0.709, vertical) en movil. El video es 1396x524 (2.664),
   practicamente el mismo AR que desktop, asi que escala con la misma regla. */
.feature-primary-carousel,
.feature-primary-carousel .owl-carousel,
.feature-primary-carousel .owl-carousel .owl-stage,
.feature-primary-carousel .owl-carousel .owl-item,
.feature-primary-carousel .homecerousel{
  max-height:none !important;
}
/* autoHeight:true escribe height inline en el stage; hay que anularlo para
   que el alto siga al contenido. NO tocar overflow: el stage de owl es mas
   ancho que el viewport a proposito (loop) y lo recorta el padre; volverlo
   visible desborda la pagina entera. */
.feature-primary-carousel .owl-carousel .owl-stage,
.feature-primary-carousel .owl-carousel .owl-height{
  height:auto !important;
}
.homecerousel{
  height:auto !important;
  overflow:hidden;              /* respeta el border-radius que mete el tema */
}
.homecerousel picture,
.homecerousel img,
.homecerousel video{
  display:block;
  width:100%;
  height:auto;                  /* manda el AR real: el banner nunca se deforma */
}
/* Los dots se superponen al slide: recupera los 40px que ocupaban abajo
   (30px de alto + 10px de margen) y los deja sobre la imagen. */
.feature-primary-carousel{position:relative}
.feature-primary-carousel .owl-dots{
  position:absolute;
  left:0;
  right:0;
  bottom:10px;
  height:auto;
  margin:0;
  z-index:5;
}
/* Ni el video (1396x524, AR 2.664) ni el slide 917-BANQUETE traen creative
   vertical: ambos reutilizan el archivo de 1400x525 en movil, asi que con
   height:auto quedan en una franja de 124px mientras los slides con creative
   vertical (600x846) llegan a 495px, y el alto alterna cada 4s del autoplay.
   En movil se fija el AR del creative vertical para que todos los slides midan
   lo mismo; object-fit:cover recorta a los que no calzan en vez de deformarlos. */
@media (max-width:767px){
  .homecerousel img,
  .homecerousel video{
    aspect-ratio:600/846;
    height:auto;
    object-fit:cover;
  }
}