/*
 * Aoyama Persona Browse Refresh v0.1.3
 * Scope: Browse only. No Home / Libraries / Character / legal page selectors.
 */

body.apf-browse-page.apbr-browse-refresh-active {
  --apbr-navy: #0d2d63;
  --apbr-blue: #2f7de8;
  --apbr-blue-deep: #1f63c3;
  --apbr-line: #d8e6f4;
  --apbr-soft: #f2f7fc;
  --apbr-soft-2: #eaf3fb;
  --apbr-muted: #657a98;
  background:
    radial-gradient(circle at 12% 12%, rgba(215,232,249,.72), transparent 34%),
    radial-gradient(circle at 82% 62%, rgba(225,239,251,.72), transparent 38%),
    #f8fbfe !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-main {
  background: transparent !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-wrap {
  width: min(1360px, calc(100% - 72px)) !important;
  padding-top: 24px !important;
  padding-bottom: 46px !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-fixed {
  background: transparent !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-breadcrumb {
  margin-bottom: 10px !important;
  color: #607795 !important;
  font-size: 12px !important;
}

/* Hero / page title */
body.apf-browse-page.apbr-browse-refresh-active .apf-browse-header {
  position: relative !important;
  isolation: isolate !important;
  min-height: 210px !important;
  align-items: center !important;
  overflow: hidden !important;
  margin: 0 0 18px !important;
  padding: 34px 42px !important;
  border: 1px solid #d9e8f5 !important;
  border-radius: 28px !important;
  background: linear-gradient(90deg, rgba(250,253,255,.97) 0%, rgba(244,249,255,.92) 38%, rgba(236,246,255,.76) 100%) !important;
  box-shadow: 0 12px 34px rgba(33,82,132,.06) !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-header::before {
  content: '' !important;
  position: absolute !important;
  inset: -2px !important;
  z-index: -2 !important;
  background:
    radial-gradient(66% 118% at 24% 50%, rgba(250,253,255,.98) 0%, rgba(248,252,255,.96) 34%, rgba(246,251,255,.78) 52%, rgba(243,249,255,0) 74%),
    linear-gradient(90deg, rgba(250,253,255,.995) 0%, rgba(248,252,255,.975) 28%, rgba(245,250,255,.90) 44%, rgba(242,248,255,.36) 62%, rgba(239,247,255,.10) 100%),
    url('../images/browse-hero-search-visual.png') right center / cover no-repeat !important;
  filter: blur(.85px) saturate(.98) !important;
  transform: scale(1.012) !important;
  transform-origin: center right !important;
  pointer-events: none !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-header::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background:
    radial-gradient(circle at 87% 18%, rgba(122,180,255,.18), transparent 16%),
    radial-gradient(circle at 7% 92%, rgba(156,197,248,.22), transparent 20%),
    linear-gradient(112deg, transparent 0 43%, rgba(130,176,240,.26) 43% 43.45%, transparent 43.45% 100%) !important;
  pointer-events: none !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-header > div:first-child {
  position: relative !important;
  z-index: 2 !important;
  width: min(55%, 680px) !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-header .apf-home-kicker {
  margin-bottom: 8px !important;
  color: #2165c7 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-header h1 {
  margin: 0 0 8px !important;
  max-width: 650px !important;
  color: #0a2a60 !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: clamp(38px, 4vw, 58px) !important;
  font-weight: 700 !important;
  letter-spacing: -.035em !important;
  line-height: 1.03 !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-header p:not(.apf-home-kicker) {
  max-width: 600px !important;
  color: #5f7695 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-count {
  position: static !important;
  z-index: auto !important;
  min-width: 132px !important;
  padding: 14px 18px !important;
  border: 1px solid rgba(215,231,245,.9) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 8px 20px rgba(31,82,138,.06) !important;
  text-align: left !important;
  backdrop-filter: blur(5px) !important;
  justify-self: end !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-count strong {
  color: var(--apbr-navy) !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: 31px !important;
  font-weight: 700 !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-count span {
  color: #627a98 !important;
  font-size: 12px !important;
}

/* Filter panel */
body.apf-browse-page.apbr-browse-refresh-active .apf-browse-toolbar-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  column-gap: 16px !important;
  row-gap: 10px !important;
  margin: 0 !important;
  padding: 20px 22px 10px !important;
  border: 1px solid var(--apbr-line) !important;
  border-bottom: 0 !important;
  border-radius: 24px 24px 0 0 !important;
  background: rgba(243,249,254,.94) !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-toolbar-head > div:first-child {
  position: relative !important;
  min-height: 42px !important;
  width: fit-content !important;
  max-width: 100% !important;
  padding-left: 52px !important;
  justify-self: start !important;
  justify-content: start !important;
  text-align: left !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-toolbar-head > div:first-child::before {
  content: '≋' !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  transform: translateY(-50%) rotate(90deg) !important;
  border-radius: 11px !important;
  background: #dceeff !important;
  color: #1665c8 !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-toolbar-label {
  color: var(--apbr-navy) !important;
  font-size: 12px !important;
  letter-spacing: .09em !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-toolbar-head small {
  color: #647b99 !important;
  font-size: 12.5px !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-toolbar-guide {
  color: var(--apbr-navy) !important;
  font-size: 12px !important;
}


body.apf-browse-page.apbr-browse-refresh-active .apf-browse-count.apbr-count-relocated {
  align-self: center !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-toolbar-guide {
  align-self: center !important;
  justify-self: end !important;
  white-space: nowrap !important;
}


body.apf-browse-page.apbr-browse-refresh-active .apf-browse-filters {
  grid-template-columns: minmax(240px, 1.45fr) repeat(4, minmax(135px, .78fr)) auto auto !important;
  gap: 12px !important;
  margin: 0 0 24px !important;
  padding: 12px 22px 20px !important;
  border: 1px solid var(--apbr-line) !important;
  border-top: 0 !important;
  border-radius: 0 0 24px 24px !important;
  background: rgba(243,249,254,.94) !important;
  box-shadow: 0 14px 30px rgba(29,75,121,.055) !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-filters label {
  gap: 6px !important;
  color: #526b8f !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
  letter-spacing: .06em !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-filters input,
body.apf-browse-page.apbr-browse-refresh-active .apf-browse-filters select {
  min-height: 44px !important;
  border: 1px solid #cbdced !important;
  border-radius: 9px !important;
  background-color: rgba(255,255,255,.96) !important;
  color: #173a6c !important;
  font-size: 12.5px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7) !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-search input {
  padding-left: 40px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232b76dc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 13px 50% !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-apply,
body.apf-browse-page.apbr-browse-refresh-active .apf-browse-reset {
  min-height: 44px !important;
  border-radius: 9px !important;
  padding: 0 17px !important;
  font-size: 11.5px !important;
  text-transform: none !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-apply {
  border-color: #2f7de8 !important;
  background: linear-gradient(180deg, #5b9df3 0%, #2c78df 100%) !important;
  box-shadow: 0 5px 12px rgba(40,113,212,.18) !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-reset {
  border-color: #cfdeed !important;
  background: #fff !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-active-filters {
  margin: -12px 0 22px !important;
  padding: 10px 14px !important;
  border: 1px solid var(--apbr-line) !important;
  border-radius: 12px !important;
  background: rgba(247,251,255,.94) !important;
}

/* Results */
body.apf-browse-page.apbr-browse-refresh-active .apf-browse-results {
  border-top: 0 !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-results .apf-browse-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 20px 18px !important;
  padding-top: 0 !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-card {
  overflow: hidden !important;
  border: 1px solid #d4e2ef !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.97) !important;
  box-shadow: 0 8px 20px rgba(30,72,116,.07) !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-card:hover {
  transform: translateY(-2px) !important;
  border-color: #bfd4e8 !important;
  box-shadow: 0 12px 26px rgba(30,72,116,.10) !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-preview-image {
  aspect-ratio: .82 / 1 !important;
  border-radius: 0 !important;
  background: #eef4f9 !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-preview-image img {
  object-fit: cover !important;
  object-position: center center !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-preview-badge {
  left: 10px !important;
  bottom: 10px !important;
  min-height: 24px !important;
  padding: 4px 8px !important;
  border: 1px solid rgba(255,255,255,.36) !important;
  border-radius: 999px !important;
  background: rgba(23,47,82,.82) !important;
  font-size: 8.5px !important;
  letter-spacing: .035em !important;
  backdrop-filter: blur(4px) !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-card-body {
  padding: 12px 11px 11px !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-card-body h2 {
  margin: 0 0 8px !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: 16px !important;
  line-height: 1.1 !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-age {
  display: block !important;
  width: 100% !important;
  margin: 0 0 7px !important;
  padding: 5px 8px !important;
  border-radius: 5px !important;
  background: #f1f5f9 !important;
  color: #536f91 !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-card-body p {
  min-height: 18px !important;
  margin: 0 0 11px !important;
  color: #7388a5 !important;
  font-size: 10.5px !important;
  line-height: 1.35 !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-card-actions {
  gap: 8px !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-details,
body.apf-browse-page.apbr-browse-refresh-active .apf-browse-buy {
  min-height: 36px !important;
  border-radius: 7px !important;
  padding: 0 8px !important;
  font-size: 10px !important;
  text-transform: none !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-details {
  border-color: #c9d9e9 !important;
  background: #fff !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-buy {
  border-color: #2f7de8 !important;
  background: linear-gradient(180deg, #6daeff 0%, #2f7de8 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 14px rgba(47,125,232,.22) !important;
}

/* Pagination / end navigation */
body.apf-browse-page.apbr-browse-refresh-active .apf-browse-pagination {
  gap: 9px !important;
  margin-top: 32px !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-pagination .page-numbers {
  min-width: 34px !important;
  min-height: 34px !important;
  border-color: #cfdeec !important;
  border-radius: 7px !important;
  background: rgba(255,255,255,.94) !important;
  color: #315680 !important;
  font-size: 11px !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-pagination .current {
  border-color: #3980df !important;
  background: linear-gradient(180deg, #5a9bf0, #347fdf) !important;
  color: #fff !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-end-nav {
  margin-top: 30px !important;
  padding-top: 8px !important;
  border-top: 0 !important;
}

body.apf-browse-page.apbr-browse-refresh-active .apf-browse-end-back,
body.apf-browse-page.apbr-browse-refresh-active .apf-browse-back-filters,
body.apf-browse-page.apbr-browse-refresh-active .apf-browse-back-top {
  min-height: 38px !important;
  border: 1px solid #cedeed !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.94) !important;
  color: #1d4f87 !important;
  padding: 0 14px !important;
  font-size: 11px !important;
  box-shadow: none !important;
}

/* Responsive: keep the sample's dense catalog feel without breaking touch layouts. */
@media (max-width: 1180px) {
  body.apf-browse-page.apbr-browse-refresh-active .apf-browse-wrap {
    width: min(1180px, calc(100% - 40px)) !important;
  }
  body.apf-browse-page.apbr-browse-refresh-active .apf-browse-filters {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  body.apf-browse-page.apbr-browse-refresh-active .apf-browse-search {
    grid-column: span 2 !important;
  }
  body.apf-browse-page.apbr-browse-refresh-active .apf-browse-results .apf-browse-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  body.apf-browse-page.apbr-browse-refresh-active .apf-browse-header {
    min-height: 190px !important;
    padding: 28px 28px !important;
  }
  body.apf-browse-page.apbr-browse-refresh-active .apf-browse-header::before {
    background:
      radial-gradient(72% 124% at 21% 49%, rgba(250,253,255,.992) 0%, rgba(248,252,255,.975) 40%, rgba(245,250,255,.86) 58%, rgba(243,249,255,0) 78%),
      linear-gradient(90deg, rgba(250,253,255,.998) 0%, rgba(248,252,255,.985) 34%, rgba(245,250,255,.93) 52%, rgba(242,248,255,.44) 66%, rgba(239,247,255,.10) 100%),
      url('../images/browse-hero-search-visual.png') right center / cover no-repeat !important;
    filter: blur(1.05px) saturate(.97) !important;
  }
  body.apf-browse-page.apbr-browse-refresh-active .apf-browse-header::after {
    width: 64% !important;
    opacity: .58 !important;
  }
  body.apf-browse-page.apbr-browse-refresh-active .apf-browse-header > div:first-child {
    width: min(68%, 650px) !important;
  }
  body.apf-browse-page.apbr-browse-refresh-active .apf-browse-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  body.apf-browse-page.apbr-browse-refresh-active .apf-browse-results .apf-browse-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  body.apf-browse-page.apbr-browse-refresh-active .apf-browse-wrap {
    width: min(100% - 20px, 600px) !important;
    padding-top: 12px !important;
  }
  body.apf-browse-page.apbr-browse-refresh-active .apf-browse-header::before {
    background:
      radial-gradient(84% 132% at 18% 46%, rgba(250,253,255,.996) 0%, rgba(248,252,255,.985) 48%, rgba(245,250,255,.90) 66%, rgba(243,249,255,0) 84%),
      linear-gradient(90deg, rgba(250,253,255,1) 0%, rgba(248,252,255,.99) 42%, rgba(245,250,255,.96) 58%, rgba(242,248,255,.54) 74%, rgba(239,247,255,.14) 100%),
      url('../images/browse-hero-search-visual.png') right center / cover no-repeat !important;
    filter: blur(1.15px) saturate(.96) !important;
  }
  body.apf-browse-page.apbr-browse-refresh-active .apf-browse-header {
    min-height: 0 !important;
    padding: 22px 18px 88px !important;
    border-radius: 18px !important;
  }
  body.apf-browse-page.apbr-browse-refresh-active .apf-browse-header::after {
    width: 100% !important;
    opacity: .22 !important;
  }
  body.apf-browse-page.apbr-browse-refresh-active .apf-browse-header > div:first-child {
    width: 100% !important;
  }
  body.apf-browse-page.apbr-browse-refresh-active .apf-browse-header h1 {
    font-size: 36px !important;
  }
  body.apf-browse-page.apbr-browse-refresh-active .apf-browse-count {
    min-width: 120px !important;
    padding: 12px 14px !important;
  }
  body.apf-browse-page.apbr-browse-refresh-active .apf-browse-toolbar-head {
    grid-template-columns: 1fr !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 16px 14px 6px !important;
    border-radius: 16px 16px 0 0 !important;
  }
  body.apf-browse-page.apbr-browse-refresh-active .apf-browse-count.apbr-count-relocated,
  body.apf-browse-page.apbr-browse-refresh-active .apf-browse-toolbar-guide {
    justify-self: start !important;
  }
  body.apf-browse-page.apbr-browse-refresh-active .apf-browse-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    padding: 10px 14px 16px !important;
    border-radius: 0 0 16px 16px !important;
  }
  body.apf-browse-page.apbr-browse-refresh-active .apf-browse-search {
    grid-column: 1 / -1 !important;
  }
  body.apf-browse-page.apbr-browse-refresh-active .apf-browse-results .apf-browse-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 9px !important;
  }
  body.apf-browse-page.apbr-browse-refresh-active .apf-browse-preview-badge {
    left: 6px !important;
    bottom: 6px !important;
    min-height: 18px !important;
    max-width: calc(100% - 12px) !important;
    padding: 3px 5px !important;
    font-size: 6.4px !important;
  }
  body.apf-browse-page.apbr-browse-refresh-active .apf-browse-card-body {
    padding: 7px !important;
  }
  body.apf-browse-page.apbr-browse-refresh-active .apf-browse-card-body h2 {
    font-size: 12px !important;
  }
  body.apf-browse-page.apbr-browse-refresh-active .apf-browse-age {
    padding: 3px 5px !important;
    font-size: 8px !important;
  }
  body.apf-browse-page.apbr-browse-refresh-active .apf-browse-card-body p {
    font-size: 8.5px !important;
  }
  body.apf-browse-page.apbr-browse-refresh-active .apf-browse-card-actions {
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
  }
  body.apf-browse-page.apbr-browse-refresh-active .apf-browse-details,
  body.apf-browse-page.apbr-browse-refresh-active .apf-browse-buy {
    min-height: 28px !important;
    font-size: 7.5px !important;
  }
}

@media (max-width: 390px) {
  body.apf-browse-page.apbr-browse-refresh-active .apf-browse-results .apf-browse-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.apf-browse-page.apbr-browse-refresh-active .apf-browse-filters {
    grid-template-columns: 1fr !important;
  }
  body.apf-browse-page.apbr-browse-refresh-active .apf-browse-search {
    grid-column: auto !important;
  }
}