/* v4: deterministic cross-device accordion.
   One shell, one state source: #collectionDeviceLink[aria-expanded].
   The panel opens from the same aria state that rotates the chevron. */

.collection-settings > .collection-device-accordion{
  display:block!important;
  width:100%!important;
  overflow:hidden!important;
  border:1px solid rgba(28,40,65,.055)!important;
  border-radius:18px!important;
  outline:0!important;
  background:#fff!important;
  color:#292b30!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .collection-settings > .collection-device-accordion{
  border-color:var(--v36-dark-line,rgba(255,255,255,.085))!important;
  background:var(--v36-dark-surface,#171b21)!important;
  color:var(--v36-dark-text,#f2f4f8)!important;
}

.collection-settings > .collection-device-accordion > #collectionDeviceLink.collection-setting-row{
  -webkit-appearance:none!important;
  appearance:none!important;
  position:relative!important;
  width:100%!important;
  margin:0!important;
  padding-right:46px!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  color:inherit!important;
  box-shadow:none!important;
  overflow:visible!important;
  cursor:pointer!important;
}
.collection-settings > .collection-device-accordion > #collectionDeviceLink.collection-setting-row::before{
  content:none!important;
  display:none!important;
}
.collection-settings > .collection-device-accordion > #collectionDeviceLink > b,
.collection-settings > .collection-device-accordion > #collectionDeviceLink > .collection-device-chevron{
  display:none!important;
}

/* Persistent SVG-mask chevron. */
.collection-settings > .collection-device-accordion > #collectionDeviceLink.collection-setting-row::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:50%!important;
  right:15px!important;
  width:18px!important;
  height:18px!important;
  margin:0!important;
  border:0!important;
  outline:0!important;
  background-color:#8f98a6!important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 6 6 6-6 6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px 16px no-repeat!important;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 6 6 6-6 6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px 16px no-repeat!important;
  transform:translateY(-50%) rotate(0deg)!important;
  transform-origin:50% 50%!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:none!important;
  transition:transform .32s cubic-bezier(.22,.72,.18,1),background-color .18s ease!important;
  will-change:transform!important;
}
html[data-theme="dark"] .collection-settings > .collection-device-accordion > #collectionDeviceLink.collection-setting-row::after{
  background-color:#aeb6c2!important;
}
.collection-settings > .collection-device-accordion > #collectionDeviceLink.collection-setting-row[aria-expanded="true"]::after{
  transform:translateY(-50%) rotate(90deg)!important;
}

/* Reset every older panel animation. Closed/open state is controlled only by
   the aria-expanded value on the immediately preceding trigger. */
.collection-settings > .collection-device-accordion > .collection-device-panel-v2,
html[data-theme="dark"] .collection-settings > .collection-device-accordion > .collection-device-panel-v2{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-height:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  opacity:1!important;
  transform:none!important;
  visibility:visible!important;
  pointer-events:none!important;
  transition:max-height .36s cubic-bezier(.22,.74,.24,1)!important;
  will-change:max-height!important;
}
.collection-settings > .collection-device-accordion > #collectionDeviceLink[aria-expanded="true"] + .collection-device-panel-v2{
  max-height:340px!important;
  visibility:visible!important;
  opacity:1!important;
  transform:none!important;
  pointer-events:auto!important;
}

.collection-device-panel-clip{
  display:block!important;
  width:100%!important;
  min-height:0!important;
  overflow:hidden!important;
}
.collection-device-panel-inner{
  display:grid!important;
  gap:13px!important;
  min-width:0!important;
  padding:0 14px 14px!important;
  opacity:0!important;
  transform:translateY(-6px)!important;
  transition:opacity .20s ease,transform .32s cubic-bezier(.22,.74,.24,1)!important;
}
#collectionDeviceLink[aria-expanded="true"] + .collection-device-panel-v2 .collection-device-panel-inner{
  opacity:1!important;
  transform:translateY(0)!important;
  transition:opacity .22s ease .035s,transform .34s cubic-bezier(.22,.74,.24,1)!important;
}

.collection-device-panel-v2,
.collection-device-panel-v2::before,
.collection-device-panel-v2::after,
.collection-device-panel-clip,
.collection-device-panel-clip::before,
.collection-device-panel-clip::after,
.collection-device-panel-inner,
.collection-device-panel-inner::before,
.collection-device-panel-inner::after{
  outline:0!important;
  box-shadow:none!important;
}
.collection-device-panel-v2::before,
.collection-device-panel-v2::after,
.collection-device-panel-clip::before,
.collection-device-panel-clip::after,
.collection-device-panel-inner::before,
.collection-device-panel-inner::after{
  content:none!important;
  display:none!important;
}

.collection-body{
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
  scrollbar-gutter:auto!important;
}
.collection-body::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;
}

@media(max-width:560px){
  .collection-settings > .collection-device-accordion > #collectionDeviceLink[aria-expanded="true"] + .collection-device-panel-v2{
    max-height:430px!important;
  }
  .collection-device-panel-inner{padding:0 13px 13px!important}
}

@media(prefers-reduced-motion:reduce){
  .collection-device-panel-v2,
  .collection-device-panel-inner,
  #collectionDeviceLink.collection-setting-row::after{
    transition:none!important;
  }
}