/* Bridelux – produktové video (CSS v11)
   Fixy pro desktop layout:
   - Zrušení omezení šířky hlavní fotky v našem flex wrapperu
   - Hlavní fotka i video mají stejný "box" (2:3) a vyplní ho (object-fit: cover)
   - Náhledy (thumbs) zůstávají pod hlavní fotkou (řeší JS umístěním videa do stejného wrapperu)
*/

.brx-inline-video{
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}
.brx-inline-video__video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#000;
}
.brx-inline-video__btn{
  position:absolute;
  right:14px;
  bottom:14px;
  width:46px;
  height:46px;
  border-radius:999px;
  border:0;
  background:rgba(0,0,0,.45);
  color:#fff;
  font-size:20px;
  cursor:pointer;
  display:grid;
  place-items:center;
}

/* Desktop */
@media (min-width: 992px){
  .brx-desktop-media{
    display:flex;
    gap:16px;
    align-items:flex-start;
  }
  .brx-desktop-media > *{
    flex: 1 1 0;
    min-width: 0;
  }

  /* DŮLEŽITÉ: Shoptet někdy dává .p-image max-width → to fotku "zúží".
     Tady to přepíšeme jen uvnitř našeho wrapperu. */
  .brx-desktop-media .p-image{
    max-width: none !important;
    width: auto !important;
  }

  /* Box pro hlavní fotku (2:3) */
  .brx-desktop-media .p-image a.p-main-image{
    display:block;
    width:100%;
    aspect-ratio: 2 / 3;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
  }
  .brx-desktop-media .p-image a.p-main-image img{
    display:block;
    width:100% !important;
    height:100% !important;
    object-fit: cover;
  }

  /* Zoom vrstvy ať se nepřetlačují */
  .brx-desktop-media .p-image #wrap,
  .brx-desktop-media .p-image .mousetrap{
    width:100% !important;
    height:100% !important;
  }

  /* Video box také 2:3 (výška se sjednotí díky stejnému flex základu + aspect-ratio) */
  .brx-desktop-media .brx-inline-video{
    width:100%;
    aspect-ratio: 2 / 3;
    border-radius: 12px;
  }
}