/* LPITA V176 — scoped polish: mobile hero, header logo, collection deck and product gallery. */

/* Mobile header: keep hamburger left, move logo to the right so it does not cover section titles. */
@media(max-width:767px){
  html body.live-body header.site-header.zara-header .brand.zara-logo{
    left:auto!important;
    right:22px!important;
    top:calc(var(--lp-ann, var(--lp-announcement-h, 32px)) + 37px)!important;
    transform:translateY(-50%)!important;
    width:58px!important;
    height:58px!important;
    max-width:58px!important;
    max-height:58px!important;
  }
  html body.live-body header.site-header.zara-header .brand.zara-logo .live-logo-img,
  html body.live-body header.site-header.zara-header .brand.zara-logo .lpita-single-logo{
    width:56px!important;
    height:56px!important;
    max-width:56px!important;
    max-height:56px!important;
  }
}

/* Home hero: remove heavy grey bottom layer; image fills the whole hero on mobile. */
body.live-body.route-home .lp172-hero-slider,
body.live-body.route-home .lp173-hero-slider{
  background:#111!important;
}
body.live-body.route-home .lp172-hero-slide,
body.live-body.route-home .lp173-hero-slide{
  background:#111!important;
}
body.live-body.route-home .lp172-hero-slide img,
body.live-body.route-home .lp173-hero-slide img{
  height:100%!important;
  min-height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}
body.live-body.route-home .lp172-hero-shade,
body.live-body.route-home .lp173-hero-shade{
  background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.06) 45%,rgba(0,0,0,.22) 100%)!important;
}
@media(max-width:900px){
  body.live-body.route-home .lp172-hero-slider,
  body.live-body.route-home .lp173-hero-slider{
    height:calc(100svh - var(--lp-ann, var(--lp-announcement-h, 32px)))!important;
    min-height:620px!important;
    max-height:none!important;
  }
  body.live-body.route-home .lp172-hero-copy,
  body.live-body.route-home .lp173-hero-copy{
    bottom:58px!important;
    top:auto!important;
    transform:translateX(-50%)!important;
    width:calc(100vw - 32px)!important;
  }
  body.live-body.route-home .lp172-hero-copy h1,
  body.live-body.route-home .lp173-hero-copy h1{font-size:clamp(44px,13vw,68px)!important;}
  body.live-body.route-home .lp172-hero-dots{bottom:18px!important;}
}

/* Hero dots: transparent/white, never black blocks. */
body.live-body.route-home .lp172-hero-dots button{
  display:block!important;
  width:16px!important;
  height:16px!important;
  min-width:16px!important;
  min-height:16px!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border:1.5px solid rgba(255,255,255,.78)!important;
  border-radius:50%!important;
  box-shadow:none!important;
  opacity:.78!important;
}
body.live-body.route-home .lp172-hero-dots button.is-active{
  width:16px!important;
  background:#fff!important;
  border-color:#fff!important;
  opacity:1!important;
}

/* Collection deck: remove grey/black overlay lines and button text. Only center card is interactive. */
body.live-body.route-home .lp172-collection-card,
body.live-body.route-home .lp173-collection-card{
  pointer-events:none!important;
  flex-basis:clamp(320px,30vw,480px)!important;
  margin-right:clamp(-26px,-1.8vw,-14px)!important;
  background:#f6f5f2!important;
  border:0!important;
  opacity:.38!important;
  transform:scale(.88)!important;
  filter:saturate(.72) contrast(.98)!important;
}
body.live-body.route-home .lp172-collection-card.is-selected,
body.live-body.route-home .lp173-collection-card.is-selected{
  pointer-events:auto!important;
  opacity:1!important;
  transform:scale(1.08)!important;
  filter:saturate(1) contrast(1.01)!important;
  z-index:10!important;
}
body.live-body.route-home .lp172-collection-card:hover,
body.live-body.route-home .lp173-collection-card:hover{
  transform:scale(.9)!important;
  opacity:.50!important;
}
body.live-body.route-home .lp172-collection-card.is-selected:hover,
body.live-body.route-home .lp173-collection-card.is-selected:hover{
  transform:scale(1.09)!important;
  opacity:1!important;
}
body.live-body.route-home .lp172-collection-card figure:after,
body.live-body.route-home .lp173-collection-card figure:after,
body.live-body.route-home .lp172-collection-card:before,
body.live-body.route-home .lp172-collection-card:after,
body.live-body.route-home .lp173-collection-card:before,
body.live-body.route-home .lp173-collection-card:after{
  display:none!important;
  content:none!important;
}
body.live-body.route-home .lp172-collection-card figure,
body.live-body.route-home .lp173-collection-card figure{
  border:0!important;
  box-shadow:none!important;
  background:#f6f5f2!important;
}
body.live-body.route-home .lp172-collection-card div,
body.live-body.route-home .lp173-collection-info{
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.20) 42%,rgba(0,0,0,.72) 100%)!important;
  border:0!important;
  box-shadow:none!important;
}
body.live-body.route-home .lp172-collection-card span,
body.live-body.route-home .lp173-collection-info span{
  display:none!important;
}
body.live-body.route-home .lp173-selected-collection{
  border:0!important;
  padding-top:0!important;
  margin-top:10px!important;
}
body.live-body.route-home .lp173-selected-collection:before,
body.live-body.route-home .lp173-selected-collection:after{display:none!important;content:none!important;}
@media(max-width:900px){
  body.live-body.route-home .lp172-collections,
  body.live-body.route-home .lp173-collections{padding-top:50px!important;}
  body.live-body.route-home .lp172-collection-rail,
  body.live-body.route-home .lp173-collection-rail{
    padding:18px 12vw 28px!important;
    scroll-padding-inline:calc(50% - 38vw)!important;
  }
  body.live-body.route-home .lp172-collection-card,
  body.live-body.route-home .lp173-collection-card{flex-basis:78vw!important;margin-right:-8vw!important;}
  body.live-body.route-home .lp172-collection-card.is-selected,
  body.live-body.route-home .lp173-collection-card.is-selected{transform:scale(1.02)!important;}
}

/* Product page mobile: remove extra white gap, make gallery native, smooth and light. */
@media(max-width:900px){
  body.live-body.route-product .zara-main{padding-top:0!important;}
  body.live-body.route-product .z-product-page{
    display:block!important;
    padding:calc(var(--lp-ann, var(--lp-announcement-h, 32px)) + 78px) 0 calc(86px + env(safe-area-inset-bottom))!important;
    overflow:hidden!important;
  }
  body.live-body.route-product .z-product-gallery[data-product-gallery]{
    width:100vw!important;
    max-width:100vw!important;
    margin:0!important;
    padding:0!important;
    background:#f6f5f2!important;
    overflow:hidden!important;
    contain:layout paint!important;
  }
  body.live-body.route-product .lpita-gallery-native-v176{
    display:flex!important;
    width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    scroll-behavior:smooth!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
    overscroll-behavior-x:contain!important;
    touch-action:pan-x pan-y!important;
  }
  body.live-body.route-product .lpita-gallery-native-v176::-webkit-scrollbar{display:none!important;}
  body.live-body.route-product .lpita-gallery-native-v176 img{
    flex:0 0 100%!important;
    width:100%!important;
    min-width:100%!important;
    height:auto!important;
    aspect-ratio:4/5!important;
    object-fit:cover!important;
    background:#f6f5f2!important;
    border:0!important;
    border-radius:0!important;
    margin:0!important;
    scroll-snap-align:center!important;
  }
  body.live-body.route-product .lpita-gallery-nav-v104,
  body.live-body.route-product .lpita-gallery-thumbs-v104{display:none!important;}
  body.live-body.route-product .lpita-gallery-nav-v176{
    width:100vw!important;
    display:grid!important;
    grid-template-columns:44px 1fr 44px!important;
    align-items:center!important;
    gap:0!important;
    border-top:1px solid rgba(0,0,0,.10)!important;
    border-bottom:1px solid rgba(0,0,0,.10)!important;
    background:#fff!important;
    margin:0!important;
  }
  body.live-body.route-product .lpita-gallery-nav-v176 button{
    height:42px!important;
    min-height:42px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    background:transparent!important;
    color:#111!important;
    font:300 24px/1 Montserrat,Arial,sans-serif!important;
  }
  body.live-body.route-product .lpita-gallery-count-v176{
    text-align:center!important;
    font:400 12px/1 Montserrat,Arial,sans-serif!important;
    letter-spacing:.18em!important;
    color:#777!important;
  }
  body.live-body.route-product .lpita-gallery-thumbs-v176{
    display:flex!important;
    gap:8px!important;
    overflow-x:auto!important;
    padding:10px 12px 14px!important;
    background:#fff!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body.live-body.route-product .lpita-gallery-thumbs-v176::-webkit-scrollbar{display:none!important;}
  body.live-body.route-product .lpita-gallery-thumb-v176{
    width:50px!important;
    height:64px!important;
    min-width:50px!important;
    padding:0!important;
    border:1px solid transparent!important;
    background:transparent!important;
    opacity:.56!important;
  }
  body.live-body.route-product .lpita-gallery-thumb-v176.is-active{border-color:#111!important;opacity:1!important;}
  body.live-body.route-product .lpita-gallery-thumb-v176 img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;}
  body.live-body.route-product .z-product-info{padding:24px 18px 0!important;}
}