/* Phase 257 — Home shop universe image control
   Keep the approved artwork intact and make CMS/mobile media render consistently. */

#shop-universe .shop-card-cms-media{
  position:relative!important;
  display:block!important;
  min-width:0!important;
  min-height:430px!important;
  height:430px!important;
  padding:0!important;
  overflow:hidden!important;
  isolation:isolate!important;
  background:#211a15!important;
}
#shop-universe .shop-card-cms-stage{
  position:absolute!important;
  inset:0!important;
  overflow:hidden!important;
  background:#211a15!important;
}
#shop-universe .shop-card-cms-slide{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  opacity:0!important;
  transition:opacity .55s ease!important;
}
#shop-universe .shop-card-cms-slide.is-active{opacity:1!important;z-index:1!important}
#shop-universe .shop-card-cms-slide img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}
#shop-universe .shop-card-cms-dots{
  position:absolute!important;
  z-index:2!important;
  left:16px!important;
  bottom:15px!important;
  display:flex!important;
  gap:6px!important;
}
#shop-universe .shop-card-cms-dots i{
  display:block!important;
  width:7px!important;
  height:7px!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.48)!important;
}
#shop-universe .shop-card-cms-dots i.is-active{background:#fff!important}

@media (min-width:621px) and (max-width:900px){
  /* The Codex side preview and small tablets use this two-column layout.
     Keep each image inside a predictable 4:3 card instead of cropping the art. */
  #shop-universe .shop-universe-grid{align-items:start!important}
  #shop-universe .shop-universe-grid>.shop-feature{
    min-height:0!important;
    height:auto!important;
    aspect-ratio:4 / 3!important;
  }
  #shop-universe .shop-pack-cinema{overflow:hidden!important}
  #shop-universe .shop-pack-cinema .shop-feature-copy>span{font-size:9px!important}
  #shop-universe .shop-pack-cinema .shop-feature-copy h3{font-size:21px!important;line-height:1.4!important}
  #shop-universe .shop-pack-cinema .shop-feature-copy p{font-size:11px!important;line-height:1.8!important}
  #shop-universe .shop-pack-cinema .shop-feature-copy b{font-size:11px!important}
  #shop-universe .equipment-home-card{background:#e9dfcf!important}
  #shop-universe .equipment-home-card picture img{
    object-fit:contain!important;
    object-position:center!important;
    background:#e9dfcf!important;
  }
  #shop-universe .equipment-home-copy{right:12px!important;left:12px!important;bottom:11px!important}
  #shop-universe .equipment-home-copy span{font-size:8px!important}
  #shop-universe .equipment-home-copy b{font-size:10px!important;line-height:1.6!important}
  #shop-universe .shop-feature-side.powder{min-height:0!important;height:auto!important}
  #shop-universe .powder-served-copy span{font-size:8px!important}
  #shop-universe .powder-served-copy h3{font-size:19px!important;line-height:1.4!important}
  #shop-universe .powder-served-copy p{font-size:10px!important;line-height:1.75!important}
  #shop-universe .powder-served-copy b{font-size:10px!important}
  #shop-universe .shop-feature-side.signature.signature-music-card{
    min-height:0!important;
    height:auto!important;
    background:#1d1510!important;
  }
  #shop-universe .shop-feature-side.signature.signature-music-card>img{
    object-fit:contain!important;
    object-position:center!important;
  }
  #shop-universe .shop-card-cms-media{
    min-height:330px!important;
    height:auto!important;
    aspect-ratio:4 / 3!important;
  }
}

@media (max-width:620px){
  #shop-universe .shop-universe-grid{gap:14px!important}

  /* Product packaging: preserve the complete pack image and legible copy. */
  #shop-universe .shop-pack-cinema{
    min-height:0!important;
    height:clamp(340px,96vw,380px)!important;
  }
  #shop-universe .shop-pack-cinema .shop-pack-shot img{
    object-fit:contain!important;
    object-position:center 40%!important;
    transform:scale(.88)!important;
  }
  #shop-universe .shop-pack-cinema .shop-feature-copy>span{
    font-size:10px!important;
    line-height:1.6!important;
    letter-spacing:.08em!important;
  }
  #shop-universe .shop-pack-cinema .shop-feature-copy h3{
    font-size:23px!important;
    line-height:1.4!important;
  }
  #shop-universe .shop-pack-cinema .shop-feature-copy p{
    font-size:13px!important;
    line-height:1.85!important;
  }
  #shop-universe .shop-pack-cinema .shop-feature-copy b{font-size:12px!important}

  /* The equipment artwork includes its own headline and is 4:3; show the full artwork. */
  #shop-universe .equipment-home-card{
    min-height:0!important;
    height:auto!important;
    aspect-ratio:4 / 3!important;
  }
  #shop-universe .equipment-home-card picture,
  #shop-universe .equipment-home-card picture img{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
  }
  #shop-universe .equipment-home-card picture img{
    object-fit:contain!important;
    object-position:center!important;
    background:#e9dfcf!important;
  }
  #shop-universe .equipment-home-copy{
    right:14px!important;
    left:14px!important;
    bottom:13px!important;
    align-items:flex-end!important;
  }
  #shop-universe .equipment-home-copy span{font-size:9px!important}
  #shop-universe .equipment-home-copy b{font-size:12px!important;line-height:1.7!important}

  /* Keep the product centered in the served-drinks photos and reserve space for the dots. */
  #shop-universe .shop-feature-side.powder{
    min-height:0!important;
    height:clamp(250px,74vw,300px)!important;
  }
  #shop-universe .powder-served-slide img{object-position:center center!important}
  #shop-universe .powder-served-copy{
    right:14px!important;
    left:58px!important;
    bottom:14px!important;
  }
  #shop-universe .powder-served-copy span{font-size:9px!important;line-height:1.6!important}
  #shop-universe .powder-served-copy h3{font-size:21px!important;line-height:1.45!important}
  #shop-universe .powder-served-copy p{font-size:12px!important;line-height:1.85!important}
  #shop-universe .powder-served-copy b{font-size:12px!important}
  #shop-universe .powder-served-dots{left:14px!important;bottom:18px!important}

  /* Signature artwork contains its own Persian copy; show it without cropping. */
  #shop-universe .shop-feature-side.signature.signature-music-card{
    min-height:0!important;
    height:auto!important;
    aspect-ratio:1672 / 941!important;
    background:#1d1510!important;
  }
  #shop-universe .shop-feature-side.signature.signature-music-card>img{
    object-fit:contain!important;
    object-position:center!important;
  }

  /* CMS uploads use the dedicated mobile artwork and remain inside a stable card frame. */
  #shop-universe .shop-card-cms-media{
    min-height:0!important;
    height:auto!important;
    aspect-ratio:4 / 3!important;
  }
  #shop-universe .shop-card-cms-slide img{object-position:center!important}
  #shop-universe .shop-card-cms-dots{left:14px!important;bottom:13px!important}
}

@media (prefers-reduced-motion:reduce){
  #shop-universe .shop-card-cms-slide{transition:none!important}
}