@import url('https://cdn.jsdelivr.net/gh/satriaaao/linix@a1c74f8db369cf618965c747b1f7a3c8c0826a51/bsm-cinemachine/patch-20260912.css');

/* Mobile product detail image fix */
@media (max-width:760px){
  html body .detail-ref-media{
    display:flex!important;
    width:100%!important;
    height:280px!important;
    min-height:280px!important;
    margin:0 0 22px!important;
    background:#f7f7f7!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
  }
  html body .detail-ref-media img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    display:block!important;
  }
}

/* Mobile Explore our Rentals refinement */
@media (max-width:620px){
  html body .section .head{margin-bottom:18px!important}
  html body .cats{
    display:flex!important;
    align-items:flex-start!important;
    gap:8px!important;
    overflow-x:auto!important;
    padding:0 2px 4px!important;
    scroll-snap-type:x proximity!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }
  html body .cats::-webkit-scrollbar{display:none!important}
  html body .cats .cat{
    flex:0 0 112px!important;
    min-width:112px!important;
    width:112px!important;
    height:auto!important;
    background:transparent!important;
    overflow:visible!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    text-align:center!important;
    scroll-snap-align:start!important;
  }
  html body .cats .cat:after{display:none!important;content:none!important}
  html body .cats .cat img{
    width:104px!important;
    height:104px!important;
    min-width:104px!important;
    min-height:104px!important;
    border-radius:50%!important;
    object-fit:cover!important;
    display:block!important;
    margin:0 auto 8px!important;
    transform:none!important;
  }
  html body .cats .cat div{
    position:static!important;
    inset:auto!important;
    width:100%!important;
    padding:0 2px!important;
    color:#111!important;
    text-align:center!important;
  }
  html body .cats .cat b{
    display:block!important;
    margin:0!important;
    color:#111!important;
    font-size:14px!important;
    line-height:1.15!important;
    font-weight:700!important;
    letter-spacing:-.02em!important;
    text-align:center!important;
    white-space:normal!important;
  }
  html body .cats .cat small{display:none!important}
}

/* Desktop Explore our Rentals — premium dropdown */
@media (min-width:951px){
  html body .section:has(.cats){padding:66px 0 72px!important}
  html body .section:has(.cats) .head{
    align-items:center!important;
    margin-bottom:20px!important;
  }
  html body .section:has(.cats) .head h2{
    font-size:38px!important;
    line-height:1!important;
    letter-spacing:-.045em!important;
  }
  html body .section:has(.cats) .head p{
    max-width:620px!important;
    font-size:14px!important;
    line-height:1.6!important;
    margin-top:9px!important;
  }
  html body .section:has(.cats) .view{display:none!important}

  html body .cats{
    position:relative!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
    width:100%!important;
    padding:82px 12px 12px!important;
    max-height:70px!important;
    overflow:hidden!important;
    border:1px solid #e2e2e2!important;
    border-radius:18px!important;
    background:#fff!important;
    box-shadow:0 8px 24px rgba(0,0,0,.05)!important;
    cursor:pointer!important;
    transition:max-height .34s ease,box-shadow .25s ease,border-color .25s ease!important;
  }
  html body .cats:before{
    content:'Pilih kategori rental'!important;
    position:absolute!important;
    top:0!important;
    left:0!important;
    right:64px!important;
    height:70px!important;
    display:flex!important;
    align-items:center!important;
    padding:0 22px!important;
    color:#111!important;
    font-size:16px!important;
    font-weight:800!important;
    letter-spacing:-.02em!important;
    pointer-events:none!important;
  }
  html body .cats:after{
    content:'⌄'!important;
    position:absolute!important;
    top:14px!important;
    right:16px!important;
    width:42px!important;
    height:42px!important;
    border-radius:50%!important;
    display:grid!important;
    place-items:center!important;
    background:#111!important;
    color:#fff!important;
    font-size:20px!important;
    line-height:1!important;
    transition:transform .25s ease!important;
    pointer-events:none!important;
  }
  html body .cats:hover,
  html body .cats:focus-within{
    max-height:420px!important;
    border-color:#d5d5d5!important;
    box-shadow:0 18px 48px rgba(0,0,0,.10)!important;
  }
  html body .cats:hover:after,
  html body .cats:focus-within:after{transform:rotate(180deg)!important}

  html body .cats .cat{
    height:96px!important;
    min-height:96px!important;
    position:relative!important;
    display:grid!important;
    grid-template-columns:92px 1fr!important;
    align-items:center!important;
    overflow:hidden!important;
    border:1px solid #ececec!important;
    border-radius:14px!important;
    background:#f8f8f8!important;
    box-shadow:none!important;
    transform:none!important;
    opacity:0!important;
    transition:opacity .18s ease,transform .22s ease,background .2s ease,border-color .2s ease!important;
  }
  html body .cats:hover .cat,
  html body .cats:focus-within .cat{
    opacity:1!important;
    transform:translateY(0)!important;
  }
  html body .cats .cat:hover{
    background:#fff!important;
    border-color:#d8d8d8!important;
    transform:translateY(-2px)!important;
  }
  html body .cats .cat:after{display:none!important;content:none!important}
  html body .cats .cat img{
    width:92px!important;
    height:96px!important;
    min-width:92px!important;
    object-fit:cover!important;
    border-radius:0!important;
    transform:none!important;
    transition:transform .25s ease!important;
  }
  html body .cats .cat:hover img{transform:scale(1.04)!important}
  html body .cats .cat div{
    position:static!important;
    inset:auto!important;
    padding:0 16px!important;
    color:#111!important;
    min-width:0!important;
  }
  html body .cats .cat b{
    display:block!important;
    color:#111!important;
    font-size:15px!important;
    line-height:1.2!important;
    letter-spacing:-.02em!important;
    margin:0 0 6px!important;
  }
  html body .cats .cat small{
    display:block!important;
    color:#8a8a8a!important;
    font-size:10px!important;
    line-height:1.2!important;
    padding:0!important;
    border-radius:0!important;
    background:transparent!important;
    backdrop-filter:none!important;
  }
}