/* =========================================================
   Phase 112 — Home Shop responsive conflict fix
   Scope: shop-universe only.
   - Mobile Coffee Mixes: copy overlays the visual (no detached panel).
   - Desktop Equipment: preserve approved artwork without destructive crop.
   - Desktop Signature: restore portrait artwork intended for compact card.
   ========================================================= */

/* Desktop: normalize the two cards that still inherited old Phase80/81 rules. */
@media (min-width:901px){
  .shop-universe-grid > .equipment-home-card,
  .shop-universe-grid > .signature-music-card{
    min-width:0!important;
    min-height:430px!important;
    height:430px!important;
    width:auto!important;
    grid-column:auto!important;
    grid-row:auto!important;
    aspect-ratio:auto!important;
    border-radius:22px!important;
    overflow:hidden!important;
  }

  /* Equipment artwork is 4:3/3:2. Keep the full approved composition visible
     and let a soft cover layer fill the compact portrait-ish card footprint. */
  .equipment-home-card{
    isolation:isolate!important;
    background:#ded2c1!important;
  }
  .equipment-home-card::before{
    content:""!important;
    position:absolute!important;
    inset:-18px!important;
    z-index:0!important;
    background:url("../assets/images/shop-equipment-mobile-approved.webp") center/cover no-repeat!important;
    filter:blur(14px) brightness(.92)!important;
    transform:scale(1.08)!important;
    opacity:.62!important;
    pointer-events:none!important;
  }
  .equipment-home-card picture{
    z-index:1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:12px!important;
    box-sizing:border-box!important;
  }
  .equipment-home-card picture img{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    border-radius:15px!important;
    transform:none!important;
    box-shadow:0 14px 30px rgba(45,31,20,.10)!important;
  }
  .equipment-home-card:hover picture img{transform:scale(1.008)!important}
  .equipment-home-shade{z-index:2!important;background:linear-gradient(180deg,transparent 68%,rgba(21,14,9,.48) 100%)!important}
  .equipment-home-copy{z-index:3!important}

  /* The previous Phase111 rule exposed the 16:9 mobile artwork in a compact
     desktop column. Use the dedicated desktop 3:4 artwork instead. */
  .shop-feature-side.signature.signature-music-card{
    background:#1d1510 url("../assets/images/signature-blend-desktop-3x4.png") center 46%/cover no-repeat!important;
  }
  .shop-feature-side.signature.signature-music-card > img{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
}

/* Mobile: Coffee Mixes follows the same full-card overlay language as Powder. */
@media (max-width:620px){
  .shop-pack-cinema{
    min-height:390px!important;
    height:auto!important;
    overflow:hidden!important;
    isolation:isolate!important;
    background:#6f3d27!important;
  }
  .shop-pack-cinema .shop-pack-stage{
    position:absolute!important;
    inset:0!important;
  }
  .shop-pack-cinema .shop-pack-shot{
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    border-radius:0!important;
    overflow:hidden!important;
  }
  .shop-pack-cinema .shop-pack-shot img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center 40%!important;
    transform:scale(.88)!important;
    filter:saturate(1.03) contrast(1.05) brightness(1.02) drop-shadow(0 22px 20px rgba(48,31,20,.22))!important;
  }
  .shop-pack-cinema .shop-pack-checker{
    inset:0!important;
    border-radius:0!important;
  }
  .shop-pack-cinema::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:4!important;
    background:linear-gradient(180deg,rgba(24,13,8,0) 36%,rgba(24,13,8,.08) 58%,rgba(24,13,8,.80) 100%)!important;
    pointer-events:none!important;
  }
  .shop-pack-cinema .shop-feature-copy{
    position:absolute!important;
    z-index:6!important;
    top:auto!important;
    right:18px!important;
    bottom:18px!important;
    left:18px!important;
    width:auto!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    display:block!important;
    background:transparent!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    color:#fff!important;
  }
  .shop-pack-cinema .shop-feature-copy>span{
    display:block!important;
    margin:0 0 6px!important;
    color:#e6c49b!important;
    font-size:6px!important;
    letter-spacing:.15em!important;
  }
  .shop-pack-cinema .shop-feature-copy h3{
    margin:0 0 5px!important;
    color:#fff!important;
    font-size:22px!important;
    line-height:1.35!important;
  }
  .shop-pack-cinema .shop-feature-copy p{
    margin:0 0 7px!important;
    color:rgba(255,255,255,.84)!important;
    font-size:8px!important;
    line-height:1.75!important;
  }
  .shop-pack-cinema .shop-feature-copy b{
    color:#fff!important;
    font-size:8px!important;
  }
  .shop-pack-cinema .shop-pack-index{
    top:16px!important;
    right:auto!important;
    left:17px!important;
    z-index:7!important;
    color:rgba(255,255,255,.88)!important;
  }
  .shop-pack-cinema .shop-pack-index i{background:rgba(255,255,255,.38)!important}
}