/* FINAL v2 catalogue shell. Existing Woo filters and sorting stay functional. */
.usr-archive { --catalog-gutter: clamp(16px, calc(7.619vw - 13.714px), 96px); }
.usr-archive .usr-container { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--catalog-gutter); }
.usr-archive__head, .usr-archive__head-inner { min-height: 0; }
.usr-archive__head-inner { padding-top: 32px; padding-bottom: 0; }
.usr-archive__breadcrumb { margin: 0 0 40px; font-size: 14px; line-height: 20px; letter-spacing: 0; }
.usr-archive__breadcrumb a { position: relative; display: inline-flex; min-width: 44px; color: #4a4a4a; }
.usr-archive__breadcrumb a::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 44px; transform: translateY(-50%); }
.usr-archive__crumb-sep, .usr-archive__crumb-current { color: #4a4a4a; font-weight: 400; }
.usr-archive__heading { min-height: 0; margin: 0; padding: 0; border: 0; }
.usr-archive__title-stack { display: flex; flex: 1; flex-direction: column; gap: 12px; min-width: 0; }
.usr-archive__title { margin: 0; font-size: 36px; font-weight: 500; line-height: 43px; letter-spacing: 0; color: #13266b; }
.usr-archive__description { max-width: 900px; margin: 0; font-size: 18px; font-weight: 400; line-height: 27px; color: #191919; }
/* Equal grid tracks: the current tile's thicker border never changes a tile's width, so the strip keeps one layout on every page. */
.catalog-v2-formats { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 40px; }
.catalog-v2-format { display: flex; align-items: center; gap: 14px; min-width: 0; min-height: 131px; padding: 17px 18px 17px 14px; border: 1px solid #e0d7c8; border-radius: 16px; background: #fff; text-decoration: none; }
.catalog-v2-format.is-current { padding: 16px 17px 16px 13px; border: 2px solid #13266b; background: #ecf3ff; }
.catalog-v2-format:hover { border-color: #13266b; text-decoration: none; }
.catalog-v2-format:focus-visible, .usr-archive__chip:focus-visible { outline: 2px solid #264bd0; outline-offset: 4px; }
.catalog-v2-format__image { display: block; flex: 0 0 64px; width: 64px; height: 64px; border-radius: 12px; background: #fff; overflow: hidden; }
.catalog-v2-format__image img { width: 100%; height: 100%; object-fit: contain; }
/* The same quiet package silhouette as a missing catalog packshot, scaled for a decorative tile. */
.catalog-v2-format__image .usr-card__img--empty { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(145deg, #fff 10%, #ecf3ff 100%); }
.catalog-v2-format__image .usr-card__img--empty::before { content: ""; width: 20px; height: 26px; border: 1px solid #b5c0dd; border-radius: 4px; background: linear-gradient(#b5c0dd, #b5c0dd) center 9px / 12px 1px no-repeat, linear-gradient(#b5c0dd, #b5c0dd) center 13px / 8px 1px no-repeat, #fff; }
.catalog-v2-format__image .usr-card__img-note { display: none; }
.catalog-v2-format__text { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.catalog-v2-format__text strong { color: #13266b; font-size: 18px; font-weight: 500; line-height: 27px; }
.catalog-v2-format__text > span { color: #4a4a4a; font-size: 14px; line-height: 20px; }
/* Wide screens: every format and Bundles on one row. */
@media (min-width: 1200px) {
  .catalog-v2-formats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .catalog-v2-format { gap: 12px; padding: 17px 14px 17px 12px; }
  .catalog-v2-format.is-current { padding: 16px 13px 16px 11px; }
  .catalog-v2-format__image { flex-basis: 48px; width: 48px; height: 48px; }
}
.usr-archive__controls { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 24px; padding-top: 40px; }
.usr-archive__search { position: relative; flex: 0 1 420px; width: 420px; max-width: 100%; margin: 0; }
.usr-archive__search input[type="search"] { display: block; width: 100%; height: 57px; margin: 0; padding: 14px 56px 14px 18px; border: 1px solid #e0d7c8; border-radius: 999px; background: #fff; color: #4a4a4a; font-family: inherit; font-size: 18px; font-weight: 400; line-height: 27px; box-shadow: none; }
.usr-archive__search input::placeholder { color: #4a4a4a; opacity: 1; }
.usr-archive__search button { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: transparent; color: #13266b; cursor: pointer; }
.usr-archive__tabs, .usr-archive__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.usr-archive__chip { position: relative; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-height: 40px; padding: 9px 16px; border: 1px solid #e0d7c8; border-radius: 999px; background: #fff; color: #13266b; font-size: 14px; font-weight: 400; line-height: 20px; text-decoration: none; overflow-wrap: anywhere; }
.usr-archive__chip--available { box-sizing: border-box; flex: 0 0 auto; width: max-content; min-width: 89px; white-space: nowrap; gap: 8px; }
.usr-archive__chip::after { content: ""; position: absolute; inset: -2px 0; min-height: 44px; border-radius: inherit; }
.usr-archive__chip:hover { border-color: #13266b; text-decoration: none; }
.usr-archive__chip.is-current { border-color: #13266b; background: #13266b; color: #fff; }
.usr-archive__toolbar { display: flex; flex: 1 1 auto; align-items: center; justify-content: space-between; gap: 24px; min-width: 0; min-height: 44px; }
.usr-archive__toolbar--sort-only { justify-content: flex-end; }
.usr-archive__filters { display: flex; align-items: center; gap: 12px; min-width: 0; }
.usr-archive__toolbar-label { color: #4a4a4a; font-size: 14px; font-weight: 400; line-height: 20px; }
.usr-archive__sort { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; }
.usr-archive__sort-field { position: relative; display: inline-flex; align-items: center; min-width: 0; color: #13266b; }
.usr-archive__sort select { appearance: none; height: 44px; max-width: 100%; margin: 0; padding: 10px 36px 10px 16px; border: 1px solid #e0d7c8; border-radius: 999px; background: #fff; box-shadow: none; color: #13266b; font-family: inherit; font-size: 14px; font-weight: 400; line-height: 20px; cursor: pointer; }
.usr-archive__sort select:focus-visible { outline: 2px solid #264bd0; outline-offset: 3px; }
.usr-archive__sort svg { position: absolute; right: 12px; pointer-events: none; }
.usr-archive__sort button { min-width: 44px; min-height: 44px; }
/* site.js replaces the native list with the checkout dropdown look; the select stays the form field. */
.usr-archive__sort .usr-archive__sort-button { appearance: none; display: block; height: 44px; max-width: 100%; margin: 0; padding: 12px 36px 12px 16px; overflow: hidden; border: 1px solid #e0d7c8; border-radius: 999px; background: #fff; box-shadow: none; color: #13266b; font-family: inherit; font-size: 14px; font-weight: 400; line-height: 20px; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.usr-archive__sort .usr-archive__sort-button:hover,
.usr-archive__sort .usr-archive__sort-button[aria-expanded="true"] { border-color: #13266b; }
.usr-archive__sort .usr-archive__sort-button:focus-visible { outline: 2px solid #264bd0; outline-offset: 3px; }
.usr-archive__sort-field.is-enhanced svg { transition: transform .15s ease; }
.usr-archive__sort-field:has([aria-expanded="true"]) svg { transform: rotate(180deg); }
.usr-archive__sort-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: max-content; min-width: 100%; max-width: min(320px, calc(100vw - 32px)); margin: 0; padding: 8px; overflow-y: auto; border: 1px solid #e0d7c8; border-radius: 12px; background: #fff; box-shadow: 0 12px 32px rgb(19 38 107 / .14); list-style: none; }
.usr-archive__sort-menu[hidden] { display: none; }
.usr-archive__sort-menu:focus { outline: none; }
.usr-archive__sort-option { display: flex; align-items: center; min-height: 44px; margin: 0; padding: 12px; border-radius: 8px; color: #191919; font-size: 14px; line-height: 20px; white-space: nowrap; cursor: pointer; }
.usr-archive__sort-option[aria-selected="true"] { background: #ecf3ff; color: #13266b; font-weight: 500; }
.usr-archive__sort-option.is-active { background: #13266b; color: #fff; }
@media (forced-colors: active) { .usr-archive__sort-option.is-active { outline: 2px solid Highlight; } }
@media (prefers-reduced-motion: reduce) { .usr-archive__sort-field.is-enhanced svg { transition: none; } }
.usr-archive__count { margin: 0 0 0 auto; color: #4a4a4a; font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.usr-archive__catalog { padding: 40px 0 120px; }
.catalog-v2-group { padding-top: 24px; border-top: 1px solid #e0d7c8; }
.catalog-v2-group + .catalog-v2-group { margin-top: 40px; }
.catalog-v2-group__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 16px; margin-bottom: 22px; }
.catalog-v2-group__head h2 { margin: 0; color: #13266b; font-size: 36px; font-weight: 500; line-height: 43px; letter-spacing: 0; }
.catalog-v2-group__count { margin: 0; color: #4a4a4a; font-size: 14px; font-weight: 400; line-height: 20px; }
.catalog-v2-group__description { flex-basis: 100%; max-width: 900px; margin: -4px 0 0; font-size: 18px; line-height: 27px; color: #191919; }
.catalog-v2-group__description > * { margin: 0; }
/* Cards in a row share the tallest card's height; the body takes the extra space, so actions line up at the bottom.
   As many columns as fit at 270px or more (four at 1440), sharing the full content width so the grid ends at the
   same edge as the format strip and filters; auto-fill keeps a short group's cards at the same width. */
.usr-archive-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); align-items: stretch; gap: 24px; }
.usr-archive-grid__cell { align-items: stretch; }
.catalog-v2-names { display: flex; flex-direction: column; gap: 12px; margin-top: 40px; }
.catalog-v2-names__label { margin: 0; color: #b5172f; font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: 0; text-transform: uppercase; }
.catalog-v2-names__links { display: flex; flex-wrap: wrap; gap: 8px; }
.usr-archive__title, .catalog-v2-group__head h2 { text-wrap: balance; }
.usr-archive-empty { padding: 40px 20px; }
.usr-archive-empty__title, .usr-archive-empty__btn { font-size: 18px; line-height: 27px; }
.usr-archive-empty__btn { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; margin-top: 12px; color: #13266b; }
.usr-archive-pagination a { min-width: 44px; min-height: 44px; }
@media (min-width: 721px) {
  .usr-archive .usr-card.usr-card--house.usr-card--v2 .usr-card__availability { margin: 0; }
  .usr-archive .usr-card.usr-card--house.usr-card--v2 .usr-card__subtitle { margin-top: 12px; }
}
@media (max-width: 900px) {
  .usr-archive__toolbar { flex-wrap: wrap; }
}
@media (max-width: 720px) {
  .usr-archive { --catalog-gutter: 16px; }
  .usr-archive__head-inner { padding-top: 20px; padding-bottom: 0; }
  .usr-archive__breadcrumb { margin-bottom: 24px; }
  .usr-archive__title { font-size: 36px; line-height: 43px; }
  .catalog-v2-formats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 24px; }
  .catalog-v2-format { min-height: 72px; padding: 10px 14px 10px 10px; }
  .catalog-v2-format.is-current { min-height: 72px; padding: 10px 14px 10px 10px; }
  .catalog-v2-format__image { flex-basis: 48px; width: 48px; height: 48px; }
  .catalog-v2-format__text strong { font-weight: 700; }
  .usr-archive__controls { flex-direction: column; align-items: stretch; padding-top: 24px; gap: 12px; }
  .catalog-v2-names { margin-top: 24px; }
  .usr-archive__search { flex-basis: auto; width: 100%; }
  .usr-archive__search input[type="search"] { padding-left: 18px; }
  .usr-archive__chip { min-height: 36px; padding: 7px 12px; }
  .usr-archive__chip--available { min-width: 81px; }
  .usr-archive__chip::after { inset-block: -4px; }
  .usr-archive__toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
  .usr-archive__filters { flex-direction: column; align-items: flex-start; gap: 8px; }
  .usr-archive__sort { justify-content: flex-end; }
  .usr-archive__sort-field { max-width: calc(100% - 60px); }
  .usr-archive__catalog { padding: 24px 0 56px; }
  .catalog-v2-group { padding-top: 12px; }
  .catalog-v2-group + .catalog-v2-group { margin-top: 24px; }
  .usr-archive__count { margin-left: 0; }
  .catalog-v2-group__head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
  .catalog-v2-group__head h2 { font-size: 24px; line-height: 30px; }
  .usr-archive-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
.usr-archive__search button:hover { background: #ecf3ff; }