.ut-catalog { --ut-catalog-sidebar-width: 11.5rem; --ut-catalog-sidebar-gap: var(--ut-space-8); padding-block: var(--ut-space-6) var(--ut-space-20); }
.ut-catalog__breadcrumbs { margin-bottom: var(--ut-space-6); color: var(--ut-color-muted); font-size: var(--ut-text-sm); }
.ut-catalog__breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--ut-space-2); margin: 0; padding: 0; list-style: none; }
.ut-catalog__breadcrumbs li + li::before { margin-right: var(--ut-space-2); color: #a69a8b; content: "/"; }
.ut-catalog__breadcrumbs a { color: inherit; text-decoration: none; }
.ut-catalog__breadcrumbs a:hover { color: var(--ut-color-clay); }
.ut-catalog__layout { display: grid; grid-template-columns: var(--ut-catalog-sidebar-width) minmax(0, 1fr); gap: var(--ut-catalog-sidebar-gap); align-items: start; }
.ut-catalog__content { min-width: 0; }
.ut-catalog__content--wide { max-width: var(--ut-container); }
.ut-catalog__header { display: flex; align-items: end; justify-content: space-between; gap: var(--ut-space-6); margin-bottom: var(--ut-space-6); }
.ut-catalog__header h1 { margin: var(--ut-space-2) 0 0; font-size: 2.75rem; line-height: 1.08; }
.ut-catalog__perex { max-width: 39rem; margin: var(--ut-space-3) 0 0; color: var(--ut-color-muted); font-size: var(--ut-text-md); line-height: var(--ut-leading-relaxed); }
.ut-catalog__meta { display: flex; align-items: center; gap: var(--ut-space-4); flex: none; color: var(--ut-color-muted); font-size: var(--ut-text-sm); white-space: nowrap; }
.ut-catalog__subcategories { display: flex; flex-wrap: wrap; gap: var(--ut-space-2); padding-bottom: var(--ut-space-6); margin-bottom: var(--ut-space-6); border-bottom: 1px solid var(--ut-color-line); }
.ut-catalog__subcategories a { display: inline-flex; min-height: 2.5rem; align-items: center; border: 1px solid var(--ut-color-line); border-radius: var(--ut-radius-pill); padding: .45rem .9rem; background: var(--ut-color-surface); color: var(--ut-color-ink); font-size: var(--ut-text-sm); text-decoration: none; transition: border-color var(--ut-transition), background var(--ut-transition); }
.ut-catalog__subcategories a:hover { border-color: var(--ut-color-clay); background: var(--ut-color-surface-muted); }
.ut-catalog__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ut-space-5) var(--ut-space-4); }
.ut-catalog__active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ut-space-2); margin: 0 0 var(--ut-space-6); }
.ut-catalog-chip { display: inline-flex; min-height: 2.5rem; align-items: center; gap: var(--ut-space-2); border: 1px solid #d9ccba; border-radius: var(--ut-radius-pill); padding: .4rem .8rem; background: var(--ut-color-surface); color: var(--ut-color-ink); font-size: var(--ut-text-sm); text-decoration: none; }
.ut-catalog-chip:hover { border-color: var(--ut-color-clay); color: var(--ut-color-clay); }
.ut-catalog__clear { margin-left: var(--ut-space-2); color: var(--ut-color-clay); font-size: var(--ut-text-sm); }
.ut-catalog-sort { position: relative; }
.ut-catalog-sort summary { display: flex; min-height: 2.75rem; align-items: center; border: 1px solid #d9ccba; border-radius: var(--ut-radius-pill); padding: .45rem .9rem; background: var(--ut-color-surface); color: var(--ut-color-ink); cursor: pointer; font-size: var(--ut-text-sm); list-style: none; }
.ut-catalog-sort summary::-webkit-details-marker { display: none; }
.ut-catalog-sort summary::after { margin-left: var(--ut-space-2); content: "⌄"; color: var(--ut-color-muted); }
.ut-catalog-sort[open] summary::after { transform: rotate(180deg); }
.ut-catalog-sort > div { position: absolute; right: 0; z-index: var(--ut-z-menu); display: grid; min-width: 13rem; margin-top: var(--ut-space-2); border: 1px solid var(--ut-color-line); border-radius: var(--ut-radius-md); padding: var(--ut-space-2); background: var(--ut-color-surface); box-shadow: var(--ut-shadow-menu); }
.ut-catalog-sort a { padding: .7rem .75rem; color: var(--ut-color-ink); font-size: var(--ut-text-sm); text-decoration: none; }
.ut-catalog-sort a:hover, .ut-catalog-sort a[aria-current="true"] { background: var(--ut-color-surface-muted); color: var(--ut-color-clay); }
.ut-catalog-filters { border-top: 1px solid var(--ut-color-line); }
.ut-catalog-filters__head { display: flex; align-items: center; justify-content: space-between; padding: var(--ut-space-4) 0 var(--ut-space-2); color: var(--ut-color-ink); font-size: var(--ut-text-md); font-weight: var(--ut-font-weight-medium); }
.ut-catalog-filters__head a { color: var(--ut-color-clay); font-size: var(--ut-text-xs); font-weight: var(--ut-font-weight-regular); text-decoration: none; }
.ut-catalog-filter { border-bottom: 1px solid var(--ut-color-line); }
.ut-catalog-filter summary { display: flex; min-height: 3.2rem; align-items: center; justify-content: space-between; cursor: pointer; color: var(--ut-color-ink); font-size: var(--ut-text-sm); list-style: none; }
.ut-catalog-filter summary::-webkit-details-marker { display: none; }
.ut-catalog-filter summary span { color: var(--ut-color-muted); transition: transform var(--ut-transition); }
.ut-catalog-filter[open] summary span { transform: rotate(45deg); }
.ut-catalog-filter__content { padding: 0 0 var(--ut-space-4); }
.ut-catalog-filter__options { display: grid; gap: var(--ut-space-2); margin: 0; padding: 0; list-style: none; }
.ut-catalog-filter__options a { display: grid; grid-template-columns: 1rem minmax(0, 1fr) auto; gap: var(--ut-space-2); align-items: center; min-height: 2rem; color: var(--ut-color-muted); font-size: var(--ut-text-sm); text-decoration: none; }
.ut-catalog-filter__options a:hover { color: var(--ut-color-ink); }
.ut-catalog-filter__options small { color: #9a8f81; font-size: var(--ut-text-xs); }
.ut-catalog-filter__check { width: .95rem; height: .95rem; border: 1px solid #c9bca9; border-radius: .16rem; background: var(--ut-color-surface); }
.ut-catalog-filter__options a.is-active { color: var(--ut-color-ink); font-weight: var(--ut-font-weight-medium); }
.ut-catalog-filter__options a.is-active .ut-catalog-filter__check { border-color: var(--ut-color-clay); background: var(--ut-color-clay); box-shadow: inset 0 0 0 3px var(--ut-color-surface); }
.ut-catalog-filter__options a.is-empty { color: #afa496; }
.ut-catalog-price__inputs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ut-space-2); }
.ut-catalog-price__inputs label { display: grid; gap: var(--ut-space-1); color: var(--ut-color-muted); font-size: var(--ut-text-xs); }
.ut-catalog-price__inputs .ut-field { min-width: 0; min-height: 2.5rem; padding: .45rem .5rem; }
.ut-catalog-price__ranges { display: grid; gap: var(--ut-space-1); margin: var(--ut-space-3) 0; }
.ut-catalog-price__ranges input { width: 100%; accent-color: var(--ut-color-clay); }
.ut-catalog-price .ut-text-link { font-size: var(--ut-text-sm); }
.ut-catalog-empty { border: 1px solid var(--ut-color-line); border-radius: var(--ut-radius-md); padding: clamp(var(--ut-space-6), 3.2vw, var(--ut-space-10)); background: var(--ut-color-surface); }
.ut-catalog-empty h2 { margin: var(--ut-space-2) 0 var(--ut-space-3); font-size: clamp(1.8rem, 3vw, 2.25rem); }
.ut-catalog-empty p { max-width: 52ch; margin: 0; color: var(--ut-color-muted); line-height: var(--ut-leading-relaxed); }
.ut-catalog-empty .ut-button { margin-top: var(--ut-space-6); }
.ut-catalog-empty__actions { display: flex; flex-wrap: wrap; gap: var(--ut-space-3); margin-top: var(--ut-space-6); }
.ut-catalog-empty__actions .ut-button { margin-top: 0; }
.ut-catalog-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ut-space-2); margin-top: var(--ut-space-10); }
.ut-catalog-pagination a { display: grid; min-width: 2.75rem; min-height: 2.75rem; place-items: center; border: 1px solid var(--ut-color-line); border-radius: var(--ut-radius-pill); padding-inline: var(--ut-space-3); color: var(--ut-color-ink); font-size: var(--ut-text-sm); text-decoration: none; }
.ut-catalog-pagination a:hover, .ut-catalog-pagination a[aria-current="page"] { border-color: var(--ut-color-ink); background: var(--ut-color-ink); color: var(--ut-color-surface); }
.ut-catalog__mobile-toolbar, .ut-catalog-filter-drawer, .ut-catalog-filter-overlay { display: none; }

@media (max-width: 64rem) {
  .ut-catalog__layout { display: block; }
  .ut-catalog__sidebar, .ut-catalog__meta .ut-catalog-sort { display: none; }
  .ut-catalog__mobile-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--ut-space-3); margin-bottom: var(--ut-space-6); }
  .ut-catalog__mobile-toolbar .ut-button { flex: 1; }
  .ut-catalog__mobile-toolbar .ut-catalog-sort { flex: 1; }
  .ut-catalog__mobile-toolbar summary { justify-content: center; }
  .ut-catalog-filter-drawer { position: fixed; top: 0; bottom: 0; left: 0; z-index: var(--ut-z-modal); width: min(23rem, calc(100% - 2rem)); transform: translateX(-105%); padding: var(--ut-space-4) var(--ut-gutter) var(--ut-space-8); overflow-y: auto; background: var(--ut-color-surface); box-shadow: var(--ut-shadow-menu); transition: transform var(--ut-transition-slow); }
  .ut-catalog-filter-drawer.is-open { display: block; transform: translateX(0); }
  .ut-catalog-filter-drawer__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--ut-space-4); border-bottom: 1px solid var(--ut-color-line); color: var(--ut-color-ink); font-size: var(--ut-text-lg); }
  .ut-catalog-filter-overlay { position: fixed; inset: 0; z-index: calc(var(--ut-z-modal) - 1); background: rgb(44 39 34 / 40%); }
  .ut-catalog-filter-overlay.is-open { display: block; }
  body.ut-catalog-filter-open { overflow: hidden; }
}
@media (max-width: 48rem) {
  .ut-catalog { padding-block: var(--ut-space-4) var(--ut-space-12); }
  .ut-catalog__breadcrumbs { margin-bottom: var(--ut-space-4); font-size: var(--ut-text-xs); }
  .ut-catalog__header { align-items: start; margin-bottom: var(--ut-space-5); }
  .ut-catalog__header h1 { font-size: 2rem; }
  .ut-catalog__header > .ut-button { min-height: 2.5rem; padding-inline: .75rem; font-size: var(--ut-text-xs); }
  /* The approved compact reference keeps the filter hierarchy in document flow:
     customers can scan and adjust it before the product grid without a modal detour. */
  .ut-catalog__mobile-toolbar { display: none; }
  .ut-catalog__sidebar { display: block; margin-bottom: var(--ut-space-6); }
  .ut-catalog__grid { grid-template-columns: 1fr; gap: var(--ut-space-5); }
  .ut-catalog__subcategories { margin-bottom: var(--ut-space-5); padding-bottom: var(--ut-space-5); }
  .ut-catalog__subcategories a { min-height: 2.35rem; padding-inline: .75rem; font-size: var(--ut-text-xs); }
  .ut-catalog__clear { width: 100%; margin-left: 0; }
}

/* Wave B2 — category listing to the live CDE. Search (Wave B3) still uses the .ut-catalog rules above. */
.ut-plp { box-sizing: border-box; max-width: 85rem; margin: 0 auto; padding: 26px clamp(16px, 3vw, 40px) 0; }
.ut-plp__breadcrumbs { margin-bottom: 18px; color: #9a8f81; font-size: 14.5px; line-height: normal; }
.ut-plp__breadcrumbs ol { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.ut-plp__breadcrumbs li + li::before { content: "\00a0/\00a0"; }
.ut-plp__breadcrumbs a { color: inherit; text-decoration: none; }
.ut-plp__breadcrumbs a:hover { color: var(--ut-color-clay); }
.ut-plp__breadcrumbs [aria-current="page"] { color: var(--ut-color-ink); }
.ut-plp__layout { display: flex; flex-wrap: wrap; gap: clamp(24px, 3vw, 44px); }
.ut-plp__sidebar { flex: 1 1 250px; min-width: 250px; }
.ut-plp__content { flex: 999 1 560px; min-width: min(100%, 280px); }
.ut-plp h1 { margin: 0; color: var(--ut-color-ink); font-family: var(--ut-font-display); font-size: clamp(29px, 4vw, 44px); font-weight: var(--ut-font-weight-regular); line-height: normal; }

/* Filters */
.ut-plp-filters__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ut-plp-filters__head h2 { margin: 0; color: var(--ut-color-ink); font-family: var(--ut-font-body); font-size: 16.5px; font-weight: var(--ut-font-weight-regular); line-height: normal; }
.ut-plp-filters__head a { padding: 1px 6px; color: var(--ut-color-clay); font-size: 14.5px; line-height: normal; text-decoration: none; }
.ut-plp-filter { padding: 16px 0; border-top: 1px solid var(--ut-color-line); }
.ut-plp-filter summary { display: flex; align-items: center; justify-content: space-between; color: var(--ut-color-ink); font-size: 16px; line-height: normal; cursor: pointer; list-style: none; }
.ut-plp-filter summary::-webkit-details-marker { display: none; }
.ut-plp-filter__sign { color: #9a8f81; font-size: 14.5px; }
.ut-plp-filter__sign::before { content: "+"; }
.ut-plp-filter[open] .ut-plp-filter__sign::before { content: "−"; }
.ut-plp-filter__options { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 14px 0 0; list-style: none; }
.ut-plp-filter__option { display: flex; align-items: center; gap: 10px; color: #4a4239; font-size: 15.5px; line-height: normal; text-decoration: none; }
/* CDE: filter options have no hover colour change (CDE FINAL POLISH hover QA). */
.ut-plp-filter__check { width: 17px; height: 17px; flex: none; box-sizing: border-box; border: 1px solid #c9bca9; border-radius: 4px; background: transparent; }
.ut-plp-filter__option.is-active .ut-plp-filter__check { border-color: var(--ut-color-ink); background: var(--ut-color-ink); box-shadow: inset 0 0 0 3px var(--ut-color-canvas); }
.ut-plp-filter__option.is-active { color: var(--ut-color-ink); }
.ut-plp-filter__option.is-empty { color: #b0a596; }
.ut-plp-filter__count { color: #b0a596; font-size: 14px; }

/* Price: one dual-thumb slider made of two overlaid native ranges (keyboard accessible). */
.ut-plp-price { display: flex; flex-direction: column; gap: 18px; padding-top: 16px; }
.ut-plp-price__inputs { display: flex; align-items: center; gap: 10px; }
.ut-plp-price__inputs label { display: flex; flex: 1 1 0; align-items: center; gap: 8px; min-width: 0; color: #7b7064; font-size: 15px; }
.ut-plp-price__inputs input { box-sizing: border-box; flex: 1 1 0; width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid #d9ccba; border-radius: 10px; outline: none; background: var(--ut-color-surface); color: var(--ut-color-ink); font: inherit; font-size: 16px; line-height: normal; -moz-appearance: textfield; }
.ut-plp-price__inputs input::-webkit-outer-spin-button, .ut-plp-price__inputs input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.ut-plp-price__inputs input:focus-visible { border-color: var(--ut-color-clay); }
.ut-plp-price__slider { position: relative; height: 28px; margin: 0 12px; }
.ut-plp-price__track { position: absolute; top: 11px; right: -12px; left: -12px; height: 6px; border-radius: 999px; background: var(--ut-color-line); }
.ut-plp-price__fill { position: absolute; top: 11px; left: var(--ut-price-from, 0%); width: calc(var(--ut-price-to, 100%) - var(--ut-price-from, 0%)); height: 6px; border-radius: 999px; background: #c9a48e; }
.ut-plp-price__slider input { position: absolute; top: 0; left: -14px; width: calc(100% + 28px); height: 28px; margin: 0; background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; }
.ut-plp-price__slider input::-webkit-slider-runnable-track { height: 28px; background: transparent; }
.ut-plp-price__slider input::-moz-range-track { height: 28px; background: transparent; }
.ut-plp-price__slider input::-webkit-slider-thumb { box-sizing: border-box; width: 28px; height: 28px; border: 3px solid var(--ut-color-surface); border-radius: 999px; background: var(--ut-color-clay); box-shadow: 0 1px 4px rgb(44 39 34 / 28%); cursor: grab; pointer-events: auto; -webkit-appearance: none; }
.ut-plp-price__slider input::-moz-range-thumb { box-sizing: border-box; width: 28px; height: 28px; border: 3px solid var(--ut-color-surface); border-radius: 999px; background: var(--ut-color-clay); box-shadow: 0 1px 4px rgb(44 39 34 / 28%); cursor: grab; pointer-events: auto; }
.ut-plp-price__slider input:focus-visible { outline: none; }
.ut-plp-price__slider input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--ut-color-clay); outline-offset: 2px; }
.ut-plp-price__slider input:focus-visible::-moz-range-thumb { outline: 2px solid var(--ut-color-clay); outline-offset: 2px; }
.ut-plp-price__apply { display: flex; box-sizing: border-box; width: 100%; min-height: 46px; align-items: center; justify-content: center; padding: 13px 20px; border-radius: 999px; background: var(--ut-color-ink); color: var(--ut-color-surface); font-size: 16px; line-height: normal; text-decoration: none; opacity: .55; transition: background .2s ease, opacity .2s ease; }
.ut-plp-price__apply.is-dirty { opacity: 1; }
.ut-plp-price__apply:hover { background: var(--ut-color-clay); color: var(--ut-color-surface); }

/* Content */
.ut-plp__subcategories { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 10px; margin-top: 18px; }
.ut-plp__subcategories a { display: flex; min-height: 60px; box-sizing: border-box; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border: 1px solid var(--ut-color-line); border-radius: 10px; background: var(--ut-color-surface); color: var(--ut-color-ink); font-size: 16px; line-height: 1.3; text-decoration: none; transition: border-color .2s ease, background .2s ease; }
.ut-plp__subcategories a:hover { border-color: #c9b8a2; background: #fbf6ef; }
.ut-plp__subcategory-media { position: relative; display: block; width: 44px; height: 44px; flex: none; overflow: hidden; border-radius: 7px; background: var(--ut-color-sand); }
.ut-plp__subcategory-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ut-plp__description { max-width: none; margin: 18px 0 0; color: #7b7064; font-size: 17px; line-height: 1.6; }
.ut-plp__description p { margin: 0; }
.ut-plp__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 24px 0 22px; padding-top: 18px; border-top: 1px solid var(--ut-color-line); }
.ut-plp__chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.ut-plp-chip { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid #d9ccba; border-radius: 999px; background: var(--ut-color-surface); color: #3b342c; font-size: 15px; line-height: normal; text-decoration: none; }
.ut-plp-chip span { color: #9a8f81; }
/* CDE: active chips have no hover state (CDE FINAL POLISH hover QA). */
.ut-plp__sort { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.ut-plp__count { color: #9a8f81; font-size: 15px; line-height: normal; }
.ut-plp__select { padding: 11px 16px; border: 1px solid #e3d8c9; border-radius: 999px; background: var(--ut-color-surface); color: #3b342c; font: inherit; font-size: 15.5px; line-height: normal; cursor: pointer; }
/* Same card size regardless of product count: auto-fill keeps empty tracks instead of stretching few cards. */
.ut-plp__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 255px), 1fr)); gap: 22px; }

/* Empty state and guide banner */
.ut-plp-empty { margin-bottom: clamp(24px, 3vw, 36px); padding: clamp(22px, 3vw, 32px); border: 1px solid var(--ut-color-line); border-radius: 10px; background: var(--ut-color-surface); }
.ut-plp__layout--empty .ut-plp-empty { max-width: 48rem; margin: 24px auto clamp(24px, 3vw, 36px); text-align: center; }
.ut-plp__layout--empty .ut-plp-empty p { margin-inline: auto; margin-bottom: 0; }
.ut-plp-empty h2 { margin: 0 0 10px; color: var(--ut-color-ink); font-family: var(--ut-font-display); font-size: clamp(21px, 2.6vw, 28px); font-weight: var(--ut-font-weight-regular); line-height: normal; }
.ut-plp-empty p { max-width: 54ch; margin: 0 0 18px; color: #7b7064; font-size: 16.5px; line-height: 1.7; }
.ut-plp-empty .ut-plp-empty__label { margin: 0 0 10px; color: #9a8f81; font-size: 12.5px; letter-spacing: .12em; line-height: normal; text-transform: uppercase; }
.ut-plp-empty__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.ut-plp-empty__chips .ut-plp-chip { min-height: 44px; box-sizing: border-box; padding: 9px 15px; background: #f5efe6; color: #4a4239; }
.ut-plp-empty__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ut-plp-empty__primary { display: inline-flex; min-height: 48px; box-sizing: border-box; align-items: center; padding: 15px 26px; border-radius: 999px; background: var(--ut-color-ink); color: var(--ut-color-surface); font-size: 16.5px; line-height: normal; text-decoration: none; }
.ut-plp-empty__primary[hidden] { display: none; }
.ut-plp-empty__secondary { display: inline-flex; min-height: 46px; box-sizing: border-box; align-items: center; padding: 14px 24px; border: 1px solid #d9ccba; border-radius: 999px; background: var(--ut-color-surface); color: var(--ut-color-ink); font-size: 16px; line-height: normal; text-decoration: none; }
/* Listing pager — USER REQUESTED EXTENSION (no CDE state): count, load-more and compact page numbers built
   from approved tokens (CDE secondary pill + its sand hover, toolbar count type, existing page pills). */
.ut-plp-pager { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 40px; }
.ut-plp-pager__summary { margin: 0; color: #9a8f81; font-size: 15px; line-height: normal; text-align: center; }
.ut-plp-pager__more { display: inline-flex; min-height: 46px; box-sizing: border-box; align-items: center; justify-content: center; padding: 14px 24px; border: 1px solid #d9ccba; border-radius: 999px; background: var(--ut-color-surface); color: var(--ut-color-ink); font-size: 16px; line-height: normal; text-decoration: none; transition: background .2s ease, opacity .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .ut-plp-pager__more:hover { background: var(--ut-color-sand); color: var(--ut-color-ink); }
}
.ut-plp-pager__more[aria-disabled="true"] { cursor: progress; opacity: .6; }
.ut-plp-pager__more[aria-disabled="true"]:hover { background: var(--ut-color-surface); }
.ut-plp-pager__more[hidden] { display: none; }
.ut-plp .ut-plp-pager__pages { align-items: center; gap: 6px; margin-top: 0; }
.ut-plp-pager__step svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ut-plp-pager__gap { min-width: 20px; color: #9a8f81; font-size: var(--ut-text-sm); text-align: center; }
.ut-plp-pager__pages a[aria-current="page"] { cursor: default; }
.ut-plp-pager__status { margin: 12px 0 0; color: #7b7064; font-size: 15px; line-height: normal; text-align: center; }
.ut-plp-pager__status:empty { margin: 0; }
.ut-plp-pager__status.is-error { color: var(--ut-color-clay); }
.ut-plp-pager__gap--compact { display: none; }
/* Phones: one non-wrapping row — prev, first, current, last, next (+ gaps); the arrows replace the hidden
   neighbours, the compact gap marks a skip no ellipsis covers. Pills drop to 40 px to fit 320 px. */
@media (max-width: 30rem) {
  .ut-plp-pager__more { width: 100%; }
  .ut-plp .ut-plp-pager__pages { flex-wrap: nowrap; gap: 4px; }
  .ut-plp-pager__pages .ut-plp-pager__near { display: none; }
  .ut-plp-pager__gap--compact { display: block; }
  .ut-plp-pager__gap { min-width: 16px; }
  .ut-plp-pager__pages a { min-width: 2.5rem; min-height: 2.5rem; padding-inline: var(--ut-space-2); }
}
@media (hover: none) {
  .ut-plp-pager__pages a:hover:not([aria-current="page"]) { border-color: var(--ut-color-line); background: transparent; color: var(--ut-color-ink); }
}
@media (prefers-reduced-motion: reduce) { .ut-plp-pager__more { transition: none; } }

/* Wave B3 — search results to the live CDE (shares the ut-plp frame and breadcrumbs). */
.ut-search__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 8px; }
.ut-search__title { margin: 0; color: var(--ut-color-ink); font-family: var(--ut-font-display); font-size: clamp(29px, 4vw, 44px); font-weight: var(--ut-font-weight-regular); line-height: 1.18; }
.ut-search > .ut-search__title { margin-bottom: 22px; }
.ut-search__edit { min-height: 44px; padding: 12px 18px; border: 1px solid #d9ccba; border-radius: 999px; background: var(--ut-color-surface); color: #4a4239; font: inherit; font-size: 15.5px; line-height: normal; cursor: pointer; }
.ut-search__count { margin: 0 0 6px; color: #7b7064; font-size: 17px; line-height: normal; }
.ut-search__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 22px 0 26px; border-bottom: 1px solid #e7dccb; }
.ut-search__tab { display: inline-flex; min-height: 48px; align-items: center; margin-right: 18px; padding: 14px 4px; border-bottom: 2px solid transparent; color: #8a8074; font-size: 16.5px; line-height: normal; }
.ut-search__tab.is-active { border-bottom-color: var(--ut-color-clay); color: var(--ut-color-ink); }
.ut-search__tab span { margin-left: 7px; color: #9a8f81; }
/* Same card size regardless of product count: auto-fill (no stretching) capped at 4 columns. */
.ut-search__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(225px, (100% - 60px) / 4)), 1fr)); gap: 20px; }
.ut-search-empty { margin-bottom: clamp(28px, 3.4vw, 44px); padding: clamp(24px, 3.4vw, 40px); border: 1px solid #e7dccb; border-radius: 10px; background: var(--ut-color-surface); }
.ut-search-empty h2 { margin: 0 0 10px; color: var(--ut-color-ink); font-family: var(--ut-font-display); font-size: clamp(23px, 2.8vw, 32px); font-weight: var(--ut-font-weight-regular); line-height: normal; }
.ut-search-empty p { max-width: 56ch; margin: 0 0 22px; color: #7b7064; font-size: 17px; line-height: 1.7; }
.ut-search-empty__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ut-search-empty__primary { min-height: 48px; padding: 15px 26px; border: 0; border-radius: 999px; background: var(--ut-color-ink); color: var(--ut-color-surface); font: inherit; font-size: 16.5px; line-height: normal; cursor: pointer; }
.ut-search__label { margin: 0 0 14px; color: #9a8f81; font-size: 12.5px; letter-spacing: .12em; line-height: normal; text-transform: uppercase; }
.ut-search__categories { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(28px, 3.4vw, 44px); }
.ut-search__categories a { display: inline-flex; min-height: 46px; align-items: center; padding: 14px 24px; border: 1px solid #d9ccba; border-radius: 999px; background: var(--ut-color-surface); color: var(--ut-color-ink); font-size: 16px; line-height: normal; text-decoration: none; }
.ut-search .ut-catalog-pagination { margin-top: 32px; }