/* Caliente 1986 — real brand-logo mosaic in desktop Marcas menu.
 * Isolated from the Mujer/Hombre cover, product cards and checkout.
 */
html body.ep-body .ep-mega-all-brands{
  align-items:stretch!important;
  gap:20px!important;
}
html body.ep-body .ep-mega-all-brands > .ep-mega-column{
  flex:1 1 0!important;
  min-width:0!important;
}
html body.ep-body .ep-mega-all-brands > .ep-mega-brand-mosaic{
  flex:0 0 clamp(214px,23%,300px)!important;
  position:sticky;
  top:0;
  align-self:flex-start;
  box-sizing:border-box;
  min-width:0;
  margin:0;
  padding:19px 15px 16px;
  background:#f7f5f2;
  border:1px solid #e9e4de;
}
html body.ep-body .ep-mega-brand-mosaic-head{
  margin:0 0 15px;
  text-align:center;
}
html body.ep-body .ep-mega-brand-mosaic-head > span{
  display:block;
  margin-bottom:7px;
  font:600 8px/1.5 Montserrat,Arial,sans-serif!important;
  letter-spacing:1.7px;
  color:#94867b;
}
html body.ep-body .ep-mega-brand-mosaic-head > strong{
  display:block;
  font:500 12px/1.4 Montserrat,Arial,sans-serif!important;
  letter-spacing:0;
  color:#3d352e;
}
html body.ep-body .ep-mega-brand-mosaic-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:70px;
  gap:6px;
  align-items:stretch;
}
html body.ep-body .ep-mega-brand-mosaic-item{
  min-width:0;
  display:flex!important;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:6px;
  box-sizing:border-box;
  background:#fff;
  border:1px solid #efeae5;
  text-decoration:none!important;
  transition:border-color .16s ease,background .16s ease;
}
html body.ep-body .ep-mega-brand-mosaic-item:nth-child(1),
html body.ep-body .ep-mega-brand-mosaic-item:nth-child(6){
  grid-column:span 2;
}
html body.ep-body .ep-mega-brand-mosaic-item:hover,
html body.ep-body .ep-mega-brand-mosaic-item:focus-visible{
  background:#fff;
  border-color:#b1a399;
}
html body.ep-body .ep-mega-brand-mosaic-item img.ep-mega-brand-mosaic-logo{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:63px!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0!important;
  filter:grayscale(1);
  opacity:.92;
}
html body.ep-body .ep-mega-brand-mosaic-item:hover img.ep-mega-brand-mosaic-logo{
  filter:grayscale(0);
  opacity:1;
}
@media(max-width:1180px){
  html body.ep-body .ep-mega-all-brands > .ep-mega-brand-mosaic{
    display:none!important;
  }
  html body.ep-body .ep-mega-all-brands > .ep-mega-column{
    flex:1 1 0!important;
  }
}

/* Smash Balloon's feed #4 already contains four posts in its HTML.
 * Its old "mobile 2 posts" setting must not conceal posts 3 and 4.
 * CSS below supplies the agreed two-column, two-row phone layout.
 */
@media(max-width:800px){
  html body.ep-body .ep-community-grid .ep-original-instagram #sb_instagram #sbi_images{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    grid-auto-flow:row!important;
    overflow:visible!important;
    width:100%!important;
    max-width:100%!important;
    padding:0!important;
  }
  html body.ep-body .ep-community-grid .ep-original-instagram #sb_instagram #sbi_images > .sbi_item:nth-child(-n+4){
    display:block!important;
    float:none!important;
    visibility:visible!important;
    opacity:1!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:1/1!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  html body.ep-body .ep-community-grid .ep-original-instagram #sb_instagram #sbi_images > .sbi_item:nth-child(n+5){
    display:none!important;
  }
  html body.ep-body .ep-community-grid .ep-original-instagram #sb_instagram .sbi_photo_wrap,
  html body.ep-body .ep-community-grid .ep-original-instagram #sb_instagram .sbi_photo{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
  }
}


/* Brand desktop dropdown: exactly four editorial columns plus one mosaic.
 * Previously width:max-content + fixed flex widths left a blank sixth area.
 * Never force display:grid while hidden: open only on hover/focus-within. */
@media(min-width:1081px){
 html body.ep-body .ep-site-header .ep-mega.ep-mega-all-brands{
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  width:min(1320px,calc(100vw - 36px))!important;
  max-width:calc(100vw - 36px)!important;
  min-width:0!important;
  grid-template-columns:repeat(4,minmax(0,1fr)) minmax(200px,1.32fr)!important;
  grid-auto-flow:row!important;
  align-items:stretch!important;
  justify-content:stretch!important;
  column-gap:clamp(12px,1.45vw,23px)!important;
  padding:28px clamp(18px,2vw,36px) 32px!important;
  box-sizing:border-box!important;
 }
 html body.ep-body .ep-site-header .ep-nav-drop:hover > .ep-mega.ep-mega-all-brands,
 html body.ep-body .ep-site-header .ep-nav-drop:focus-within > .ep-mega.ep-mega-all-brands{
  display:grid!important;
 }
 html body.ep-body .ep-site-header .ep-mega.ep-mega-all-brands > .ep-mega-column{
  display:flex!important;
  flex:initial!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
 }
 html body.ep-body .ep-site-header .ep-mega.ep-mega-all-brands > .ep-mega-brand-mosaic{
  display:block!important;
  position:relative!important;
  top:auto!important;
  align-self:stretch!important;
  flex:initial!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
 }
 html body.ep-body .ep-site-header .ep-mega.ep-mega-all-brands:not(:has(> .ep-mega-brand-mosaic)){
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
 }
}
@media(min-width:901px) and (max-width:1080px){
 html body.ep-body .ep-site-header .ep-mega.ep-mega-all-brands{
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  width:min(940px,calc(100vw - 36px))!important;
  max-width:calc(100vw - 36px)!important;
  min-width:0!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:clamp(10px,1.2vw,18px)!important;
  padding:24px!important;
  box-sizing:border-box!important;
 }
 html body.ep-body .ep-site-header .ep-nav-drop:hover > .ep-mega.ep-mega-all-brands,
 html body.ep-body .ep-site-header .ep-nav-drop:focus-within > .ep-mega.ep-mega-all-brands{
  display:grid!important;
 }
 html body.ep-body .ep-site-header .ep-mega.ep-mega-all-brands > .ep-mega-column{
  flex:initial!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
 }
 html body.ep-body .ep-site-header .ep-mega.ep-mega-all-brands > .ep-mega-brand-mosaic{
  display:none!important;
 }
}

/* Desktop carousel regression fix: always establish a genuine horizontal rail.
 * Earlier general .ep-brand-row rules can collapse its implicit columns. */
@media (min-width:741px){
 html body.ep-body .ep-brands .ep-brand-carousel .ep-brand-row.ep-brand-slider{
  display:grid!important;
  grid-auto-flow:column!important;
  grid-template-columns:none!important;
  grid-template-rows:repeat(2,minmax(0,84px))!important;
  grid-auto-columns:calc((100% - 5*12px)/6)!important;
  column-gap:12px!important;
  row-gap:12px!important;
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  overflow-x:hidden!important;
  overflow-y:hidden!important;
  scroll-snap-type:none!important;
  scroll-behavior:auto!important;
  justify-content:start!important;
 }
 html body.ep-body .ep-brands .ep-brand-carousel .ep-brand-nav{
  z-index:10!important;
  pointer-events:auto!important;
 }
}
@media (min-width:741px) and (max-width:1020px){
 html body.ep-body .ep-brands .ep-brand-carousel .ep-brand-row.ep-brand-slider{
  grid-auto-columns:calc((100% - 3*12px)/4)!important;
 }
}