/* Search on the Web: frosted comic-image glass action card. */

.ccc-collector-vault-section{
  box-sizing:border-box !important;
  font-family:inherit !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:6px !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
}

.ccc-collector-vault-section-header{
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  width:100% !important;
  min-width:0 !important;
  height:30px !important;
  min-height:30px !important;
  margin:0 !important;
  padding:0 12px !important;
  color:rgba(255,255,255,.74) !important;
  font-family:inherit !important;
  font-size:8px !important;
  font-weight:800 !important;
  letter-spacing:.14em !important;
  line-height:normal !important;
  text-transform:uppercase !important;
}

.ccc-collector-vault-section-header > .ccc-highlight-slider-kicker{
  font-family:inherit !important;
  font-size:inherit !important;
  font-weight:800 !important;
  letter-spacing:inherit !important;
  line-height:normal !important;
  text-transform:inherit !important;
}

.ccc-collector-vault-card,
.ccc-collector-vault-card:focus,
.ccc-collector-vault-card:focus-visible,
.ccc-collector-vault-card:active{
  appearance:none !important;
  -webkit-appearance:none !important;
  box-sizing:border-box !important;
  display:flex !important;
  position:relative !important;
  isolation:isolate !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:18px !important;
  background:
    linear-gradient(135deg, rgba(245,247,250,.075), rgba(184,192,204,.032) 52%, rgba(17,19,25,.38)),
    rgba(14,16,22,.92) !important;
  color:#fff !important;
  box-shadow:0 12px 28px rgba(0,0,0,.22) !important;
  outline:0 !important;
  font-family:inherit !important;
  text-align:left !important;
  text-decoration:none !important;
  cursor:pointer !important;
  touch-action:manipulation !important;
  -webkit-tap-highlight-color:transparent !important;
  transform:translateZ(0) !important;
  transition:transform .24s cubic-bezier(.2,.75,.25,1), box-shadow .24s ease, background .24s ease !important;
}

.ccc-collector-vault-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  border-radius:inherit !important;
  background:
    linear-gradient(120deg, rgba(255,255,255,.07), rgba(255,255,255,.018) 42%, rgba(185,193,205,.032) 72%, rgba(255,255,255,.01)) !important;
  backdrop-filter:blur(1.8px) saturate(.72) !important;
  -webkit-backdrop-filter:blur(1.8px) saturate(.72) !important;
  opacity:.74 !important;
  pointer-events:none !important;
  transition:opacity .24s ease, background .24s ease !important;
}

.ccc-collector-vault-image-bg{
  position:absolute !important;
  inset:-5% !important;
  z-index:0 !important;
  display:block !important;
  background-position:center 34% !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  opacity:.12 !important;
  filter:grayscale(.12) saturate(.7) contrast(.9) brightness(.92) !important;
  transform:scale(1.03) !important;
  transition:transform .42s cubic-bezier(.2,.75,.25,1), opacity .28s ease, filter .28s ease !important;
  pointer-events:none !important;
}

.ccc-collector-vault-card:not(.ccc-vault-has-image) .ccc-collector-vault-image-bg{
  opacity:0 !important;
}

.ccc-collector-vault-card:hover{
  border:0 !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.105), rgba(195,202,213,.04) 52%, rgba(18,20,27,.34)),
    rgba(16,18,24,.93) !important;
  color:#fff !important;
  box-shadow:0 18px 38px rgba(0,0,0,.30), 0 0 24px rgba(235,239,245,.09) !important;
  transform:translateY(-2px) scale(1.008) translateZ(0) !important;
}

.ccc-collector-vault-card:hover::before{
  opacity:1 !important;
  background:
    linear-gradient(120deg, rgba(255,255,255,.095), rgba(255,255,255,.026) 40%, rgba(197,204,214,.042) 73%, rgba(255,255,255,.014)) !important;
}

.ccc-collector-vault-card:hover .ccc-collector-vault-image-bg{
  opacity:.20 !important;
  filter:grayscale(.06) saturate(.82) contrast(.94) brightness(.98) !important;
  transform:scale(1.10) !important;
}

.ccc-collector-vault-card:active{
  transform:translateY(0) scale(.992) translateZ(0) !important;
  transition-duration:.09s !important;
}

.ccc-collector-vault-card:focus-visible{
  border:0 !important;
  box-shadow:0 18px 38px rgba(0,0,0,.30), 0 0 26px rgba(255,255,255,.10) !important;
  outline:0 !important;
}

.ccc-collector-vault-card > span,
.ccc-collector-vault-card .material-symbols-outlined{
  pointer-events:none !important;
}

.ccc-collector-vault-body{
  box-sizing:border-box !important;
  display:grid !important;
  position:relative !important;
  z-index:2 !important;
  flex:1 1 auto !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  align-items:center !important;
  width:100% !important;
  min-width:0 !important;
}

.ccc-collector-vault-icon,
.ccc-collector-vault-balance{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
}

.ccc-collector-vault-icon{
  border:0 !important;
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
  box-shadow:0 4px 14px rgba(0,0,0,.16) !important;
  backdrop-filter:blur(5px) !important;
  -webkit-backdrop-filter:blur(5px) !important;
  transition:transform .24s cubic-bezier(.2,.75,.25,1), background .24s ease !important;
}

.ccc-collector-vault-card:hover .ccc-collector-vault-icon{
  background:rgba(255,255,255,.16) !important;
  transform:scale(1.08) rotate(-5deg) !important;
}

.ccc-collector-vault-icon .material-symbols-outlined{
  display:block !important;
  color:#fff !important;
  line-height:1 !important;
}

.ccc-collector-vault-copy{
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:baseline !important;
  justify-content:center !important;
  gap:8px !important;
  min-width:0 !important;
  width:100% !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  text-align:center !important;
}

.ccc-collector-vault-name{
  display:block !important;
  flex:0 1 auto !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  color:#fff !important;
  font-weight:900 !important;
  letter-spacing:-.02em !important;
  line-height:1 !important;
  text-align:center !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
  text-shadow:0 2px 10px rgba(0,0,0,.52) !important;
  transition:letter-spacing .24s ease, transform .24s ease !important;
}

.ccc-collector-vault-serial{
  display:block !important;
  flex:0 0 auto !important;
  min-width:0 !important;
  overflow:visible !important;
  color:rgba(255,255,255,.72) !important;
  font-weight:750 !important;
  letter-spacing:.04em !important;
  line-height:1 !important;
  text-align:left !important;
  white-space:nowrap !important;
  text-shadow:0 2px 8px rgba(0,0,0,.48) !important;
}

.ccc-collector-vault-serial.is-empty{
  display:none !important;
}

.ccc-collector-vault-card.ccc-vault-no-serial .ccc-collector-vault-name{
  text-align:center !important;
}

.ccc-collector-vault-card:hover .ccc-collector-vault-name{
  letter-spacing:-.005em !important;
  transform:scale(1.015) !important;
}

@media (min-width:781px){
  /* 360px Value Highlights + 10px gap + 30px heading + 6px gap + 56px Vault card. */
  #result .card .desktop-member-tall-info-layout.ccc-desktop-summary-layout.is-logged-in-layout,
  #result .card .desktop-member-tall-info-layout.ccc-desktop-summary-layout.is-logged-out-layout{
    grid-template-rows:auto 462px !important;
    align-items:stretch !important;
  }

  #result .card .desktop-member-tall-info-layout.ccc-desktop-summary-layout.is-logged-in-layout > .ccc-desktop-summary-actions,
  #result .card .desktop-member-tall-info-layout.ccc-desktop-summary-layout.is-logged-out-layout > .ccc-desktop-summary-actions{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
  }

  #result .card .desktop-member-tall-info-layout.ccc-desktop-summary-layout.is-logged-in-layout > .desktop-member-info-left,
  #result .card .desktop-member-tall-info-layout.ccc-desktop-summary-layout.is-logged-out-layout > .desktop-member-info-left{
    box-sizing:border-box !important;
    display:flex !important;
    flex-direction:column !important;
    grid-column:1 !important;
    grid-row:2 !important;
    gap:10px !important;
    width:100% !important;
    height:462px !important;
    min-height:462px !important;
    max-height:462px !important;
    overflow:hidden !important;
  }

  #result .card .desktop-member-info-left > .ccc-collector-vault-section--desktop{
    flex:0 0 92px !important;
    height:92px !important;
    min-height:92px !important;
    max-height:92px !important;
  }

  #result .card .desktop-member-info-left > .ccc-collector-vault-section--desktop > .ccc-collector-vault-card--desktop{
    height:56px !important;
    min-height:56px !important;
    max-height:56px !important;
  }

  #result .card .desktop-member-info-left > .ccc-public-highlight-slider--desktop{
    flex:0 0 360px !important;
    height:360px !important;
    min-height:360px !important;
    max-height:360px !important;
  }

  #result .card .desktop-member-tall-info-layout.ccc-desktop-summary-layout.is-logged-in-layout > .desktop-member-info-right,
  #result .card .desktop-member-tall-info-layout.ccc-desktop-summary-layout.is-logged-out-layout > .desktop-member-info-right{
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:minmax(0,1fr) !important;
    grid-column:2 !important;
    grid-row:2 !important;
    align-self:stretch !important;
    width:100% !important;
    height:462px !important;
    min-height:0 !important;
    max-height:462px !important;
    overflow:hidden !important;
  }

  #result .card .desktop-member-info-right > .ccc-additional-info-section--desktop{
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:30px minmax(0,1fr) !important;
    align-self:stretch !important;
    gap:6px !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:hidden !important;
  }

  #result .card .desktop-member-info-right > .ccc-additional-info-section--desktop > .ccc-additional-info-header{
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    height:30px !important;
    min-height:30px !important;
    margin:0 !important;
    padding:0 12px !important;
    color:rgba(255,255,255,.74) !important;
    font-size:10px !important;
    font-weight:800 !important;
    letter-spacing:.14em !important;
    line-height:1 !important;
    text-transform:uppercase !important;
  }

  #result .card .desktop-member-info-right > .ccc-additional-info-section--desktop > .more,
  #result .card .desktop-member-info-right > .ccc-additional-info-section--desktop > .more[style*="display: block"]{
    box-sizing:border-box !important;
    display:block !important;
    align-self:stretch !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;
    margin:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  .ccc-collector-vault-card--desktop .ccc-collector-vault-body{
    grid-template-columns:34px minmax(0,1fr) 34px !important;
    gap:10px !important;
    padding:6px 14px !important;
  }

  .ccc-collector-vault-card--desktop .ccc-collector-vault-icon,
  .ccc-collector-vault-card--desktop .ccc-collector-vault-balance{
    width:34px !important;
    min-width:34px !important;
    height:34px !important;
  }

  .ccc-collector-vault-card--desktop .ccc-collector-vault-icon{
    border-radius:11px !important;
  }

  .ccc-collector-vault-card--desktop .ccc-collector-vault-icon .material-symbols-outlined{
    font-size:21px !important;
  }

  .ccc-collector-vault-section--desktop > .ccc-collector-vault-section-header{
    font-size:10px !important;
  }

  .ccc-collector-vault-card--desktop .ccc-collector-vault-name{
    font-size:19px !important;
  }

  .ccc-collector-vault-card--desktop .ccc-collector-vault-serial{
    font-size:10px !important;
  }
}

@media (max-width:780px){
  #result .card .details-panels > .ccc-collector-vault-section--mobile,
  #result .card .ccc-public-mobile-value-nav-panels > .ccc-collector-vault-section--mobile{
    width:100% !important;
    min-width:0 !important;
  }

  #result .card .ccc-collector-vault-section--mobile > .ccc-collector-vault-card--mobile{
    width:100% !important;
    height:68px !important;
    min-height:68px !important;
    max-height:68px !important;
    border-radius:14px !important;
  }

  .ccc-collector-vault-card--mobile .ccc-collector-vault-body{
    grid-template-columns:32px minmax(0,1fr) 32px !important;
    gap:8px !important;
    padding:8px 10px !important;
  }

  .ccc-collector-vault-card--mobile .ccc-collector-vault-icon,
  .ccc-collector-vault-card--mobile .ccc-collector-vault-balance{
    width:32px !important;
    min-width:32px !important;
    height:32px !important;
  }

  .ccc-collector-vault-card--mobile .ccc-collector-vault-icon{
    border-radius:12px !important;
  }

  .ccc-collector-vault-card--mobile .ccc-collector-vault-icon .material-symbols-outlined{
    font-size:20px !important;
  }

  .ccc-collector-vault-card--mobile .ccc-collector-vault-copy{
    gap:6px !important;
  }

  .ccc-collector-vault-card--mobile .ccc-collector-vault-name{
    font-size:15px !important;
  }

  .ccc-collector-vault-card--mobile .ccc-collector-vault-serial{
    font-size:8px !important;
  }

}

@media (max-width:780px) and (hover:none){
  .ccc-collector-vault-card:hover{
    box-shadow:0 12px 28px rgba(0,0,0,.22) !important;
    transform:translateZ(0) !important;
  }
  .ccc-collector-vault-card:hover .ccc-collector-vault-image-bg{
    opacity:.12 !important;
    transform:scale(1.03) !important;
  }
  .ccc-collector-vault-card:hover .ccc-collector-vault-icon,
  .ccc-collector-vault-card:hover .ccc-collector-vault-name{
    transform:none !important;
  }
}
