/*
 * CPHLIVING – foto + video side om side på produktsiden
 * Alt er bundet til body.cph-sbs, som JS'en kun sætter på desktop
 * og kun når produktet har en .cph-video-block. Uden video: ingen ændring.
 */

/* Video-navigationen bruges kun i side-om-side-visning */
.cph-sbs-vnav{display:none}

/* Produkter uden video: billedkolonnen følger med ned, mens højre kolonne scroller.
   --cph-sticky-top sættes af JS (negativ, når kolonnen er højere end vinduet). */
@media (min-width:1024px){
  .cph-sticky .product-img-column{
    position:sticky!important;
    top:var(--cph-sticky-top,20px);
    z-index:1;
  }
}

@media (min-width:1024px){

  /* Kolonnebredder: billedkolonne + fast højre kolonne på 420 px */
  .cph-sbs .product-img-column{
    width:calc(100% - 450px)!important;
    margin-right:30px!important;
    margin-bottom:0!important;
    /* Foto + video følger med ned, mens højre kolonne scroller */
    position:sticky!important;
    top:20px;
    align-self:flex-start;
    z-index:1;
  }
  .cph-sbs .product-info-main.product-primary-column{
    width:420px!important;
    margin-left:0!important;
    margin-right:0!important;
    margin-bottom:0!important;
  }

  /* Rækken med galleri + video */
  .cph-sbs-row{display:flex;gap:16px;align-items:flex-start}
  .cph-sbs-row > .product.media{flex:1 1 0;min-width:0;width:auto!important;float:none!important}

  /* --cph-vr = videoens bredde/højde (sat af JS). Med kvadratiske produktfotos
     giver det samme højde på foto og video. */
  .cph-sbs-row > .cph-video-block{
    flex:var(--cph-vr,.786) 1 0;
    min-width:0;max-width:none;
    margin:0;padding:0;border:0;border-radius:0;background:none;
    text-align:left;
    display:flex;flex-direction:column;
  }
  .cph-sbs-row .cph-video-block__single,
  .cph-sbs-row .cph-video-block__grid{order:0;display:block;max-width:none;margin:0}

  .cph-sbs-row .cph-video-block__item,
  .cph-sbs-row .cph-video-block__single > video{
    aspect-ratio:var(--cph-ar,660/840);
    border-radius:6px;box-shadow:none;border:0;
  }
  .cph-sbs-row .cph-video-block__grid .cph-video-block__item:not(.is-active){display:none}
  .cph-sbs-row .cph-video-block__item video,
  .cph-sbs-row .cph-video-block__single > video{width:100%;height:100%;object-fit:cover;display:block}

  /* Thumbnails ved flere videoer */
  .cph-sbs-row .cph-sbs-vnav{order:1;display:flex;gap:8px;margin-top:10px}
  .cph-sbs-vnav button{
    position:relative;width:64px;aspect-ratio:var(--cph-ar,660/840);
    padding:0;border:1px solid transparent;border-radius:4px;overflow:hidden;
    background:#1C1915;cursor:pointer;opacity:.6;
  }
  .cph-sbs-vnav button[aria-current="true"]{border-color:#1C1915;opacity:1}
  .cph-sbs-vnav button:focus-visible{outline:2px solid #B5A48C;outline-offset:2px}
  .cph-sbs-vnav img{width:100%;height:100%;object-fit:cover;display:block}
  .cph-sbs-vnav span{
    position:absolute;inset:auto 0 0 0;
    background:rgba(28,25,21,.6);color:#FBFAF8;
    font:500 11px/1.6 'DM Sans',Arial,sans-serif;text-align:center;
  }

  /* Titel og undertekst under videoen */
  .cph-sbs-row .cph-video-block__title{order:2;font-size:20px;margin:14px 0 2px}
  .cph-sbs-row .cph-video-block__rule{display:none}
  .cph-sbs-row .cph-video-block__sub{order:3;margin:0;max-width:none;font-size:12.5px}
}