/* /szkolenie/ archive layout and filters; card component lives in training-card.css. */

.ar-catalogue__results{
  position:relative;
  display:grid;
  gap:clamp(24px, 4vw, 40px);
  min-width:0;
  transition:opacity .2s ease, transform .2s ease;
  view-transition-name:catalogue-results;
  scroll-margin-top:120px;
}

.ar-catalogue__results::before{
  content:"";
  position:absolute;
  z-index:2;
  top:-12px;
  left:0;
  width:100%;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, var(--ar-teal-action, #668b88), transparent);
  opacity:0;
  transform:scaleX(.15);
  transform-origin:left;
  pointer-events:none;
}

.ar-catalogue__results.is-loading{
  opacity:.56;
  transform:translateY(3px);
  pointer-events:none;
}

.ar-catalogue__results.is-loading::before{
  opacity:1;
  animation:ar-catalogue-progress .75s ease-in-out infinite alternate;
}

::view-transition-old(catalogue-results){ animation:ar-catalogue-fade-out .14s ease both; }
::view-transition-new(catalogue-results){ animation:ar-catalogue-fade-in .24s ease both; }

@keyframes ar-catalogue-progress{
  from{ transform:scaleX(.15); }
  to{ transform:scaleX(1); }
}

@keyframes ar-catalogue-fade-out{
  to{ opacity:0; transform:translateY(4px); }
}

@keyframes ar-catalogue-fade-in{
  from{ opacity:0; transform:translateY(-4px); }
}

/* Compact catalogue hero based on the visual language of the homepage hero. */
.post-type-archive-szkolenie .ar-catalogue__header{
  box-sizing:border-box;
  position:relative;
  isolation:isolate;
  display:grid;
  align-content:center;
  overflow:hidden;
  width:100%;
  max-width:none;
  min-height:0;
  padding:clamp(28px, 4.5vw, 52px);
  border:0;
  border-radius:0;
  background-color:#424846;
  background-image:
    linear-gradient(102deg, rgba(42, 47, 45, .96) 0%, rgba(52, 59, 57, .86) 48%, rgba(66, 72, 70, .28) 100%),
    var(--ar-catalogue-hero-background, none);
  background-position:center, 100% 50%;
  background-repeat:no-repeat;
  background-size:cover;
  box-shadow:none;
}

.post-type-archive-szkolenie .ar-catalogue__header::before{
  content:"";
  position:absolute;
  z-index:-1;
  bottom:-230px;
  left:-120px;
  width:390px;
  height:390px;
  border-radius:50%;
  background:rgba(244, 217, 170, .32);
}

.post-type-archive-szkolenie .ar-catalogue__header > *{
  max-width:760px;
  min-width:0;
}

.post-type-archive-szkolenie .ar-catalogue__header .ar-catalogue__eyebrow{
  margin-bottom:12px;
  color:#f4d9aa;
}

.post-type-archive-szkolenie .ar-catalogue__header h1{
  color:#fff;
  font-size:clamp(36px, 4.6vw, 58px);
  line-height:1.06;
}

.post-type-archive-szkolenie .ar-catalogue__header .ar-catalogue__lead{
  max-width:66ch;
  margin-top:18px;
  color:rgba(255, 255, 255, .84);
  font-size:clamp(16px, 1.25vw, 19px);
  line-height:1.58;
}

@media (max-width: 767px){
  .post-type-archive-szkolenie .ar-catalogue__header{
    min-height:0;
    padding:34px 22px;
    border-radius:0;
    background-image:
      linear-gradient(180deg, rgba(42, 47, 45, .96) 0%, rgba(52, 59, 57, .84) 68%, rgba(66, 72, 70, .48) 100%),
      var(--ar-catalogue-hero-background, none);
    background-position:center, 68% 50%;
  }

  .post-type-archive-szkolenie .ar-catalogue__header h1{
    font-size:clamp(34px, 10vw, 44px);
  }
}

.post-type-archive-szkolenie .ar-catalogue__controls{
  display:grid;
  gap:0;
  padding:0;
  overflow:hidden;
  border:1px solid var(--ar-line, #e1e6e4);
  border-radius:clamp(22px, 3vw, 32px);
  background:#fff;
  box-shadow:var(--ar-shadow, 0 18px 50px rgba(52, 57, 56, .08));
  scroll-margin-top:120px;
}

.post-type-archive-szkolenie .ar-catalogue__header .ar-catalogue__search{
  width:min(100%, 900px);
  min-width:0;
  margin-top:24px;
}

.post-type-archive-szkolenie .ar-catalogue__header .ar-catalogue__search label{
  color:#fff;
  font-size:15px;
}

.post-type-archive-szkolenie .ar-catalogue__header .ar-catalogue__search input{
  box-sizing:border-box;
  min-width:0;
  min-height:56px;
  border-color:rgba(255,255,255,.55);
  border-radius:14px;
  background:#fff;
}

.post-type-archive-szkolenie .ar-catalogue__header .ar-catalogue__search .ar-button{
  box-sizing:border-box;
  max-width:100%;
  min-height:56px;
  align-self:end;
  padding-inline:22px;
  font-size:16px;
  letter-spacing:normal;
  text-transform:none;
  white-space:nowrap;
}

.ar-catalogue__filter-panel{
  display:grid;
  gap:18px;
  padding:clamp(22px, 3.5vw, 34px);
  background:#fff;
}

.ar-catalogue__filter-heading h2{
  margin:0;
  color:var(--ar-charcoal, #343938);
  font-size:clamp(21px, 2.2vw, 28px);
  line-height:1.2;
}

.ar-catalogue__filter-heading h2 span{
  color:var(--ar-muted, #596461);
  font-size:.7em;
  font-weight:600;
}

.ar-catalogue__filter-heading p{
  margin:7px 0 0;
  color:var(--ar-muted, #596461);
  font-size:14px;
  line-height:1.5;
}

.ar-catalogue__filter-panel .ar-catalogue__filters{
  margin:0;
}

.ar-catalogue__filter-panel .ar-catalogue__filter-help{
  margin:0;
  font-weight:600;
}

.ar-catalogue__filter-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 20px;
}

.ar-catalogue__results-link{
  display:inline-flex;
  min-height:44px;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 16px;
  border:1px solid transparent;
  border-radius:999px;
  background:var(--ar-mint-pale, #edf4f2);
  color:var(--ar-teal-hover, #226f69);
  font-weight:800;
  line-height:1.2;
  text-decoration:none;
  white-space:nowrap;
}

.ar-catalogue__results-link:hover{
  border-color:var(--ar-teal-action, #668b88);
  background:#e5f0ed;
  color:var(--ar-charcoal, #343938);
}

.ar-catalogue__results-link:focus-visible{
  outline:3px solid rgba(102,139,136,.32);
  outline-offset:2px;
}

.ar-catalogue__applied{
  padding:16px clamp(22px, 3.5vw, 34px);
  border-top:1px solid var(--ar-line, #e1e6e4);
}

.ar-catalogue__results-title{
  margin:0;
  color:var(--ar-charcoal, #343938);
  font-size:clamp(26px, 3vw, 36px);
  line-height:1.15;
  scroll-margin-top:120px;
}

@media (max-width:767px){
  .post-type-archive-szkolenie .ar-catalogue__header{
    padding:30px 22px;
  }

  .post-type-archive-szkolenie .ar-catalogue__header .ar-catalogue__search{
    grid-template-columns:minmax(0, 1fr);
    margin-top:20px;
  }

  .ar-catalogue__filter-panel{
    gap:16px;
    padding:22px 18px;
  }

  .ar-catalogue__filter-actions{
    align-items:stretch;
    flex-direction:column;
  }

  .ar-catalogue__results-link{
    align-self:start;
  }

  .ar-catalogue__applied{
    padding:14px 18px;
  }
}

.ar-pagination{
  margin-top:32px;
  text-align:center;
}

.ar-pagination__status{
  margin:0 0 12px;
  color:var(--ar-muted, #596461);
  font-size:14px;
  font-weight:700;
}

.ar-pagination a,
.ar-pagination span{
  transition:background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.ar-pagination a:hover{
  border-color:var(--ar-teal-action, #668b88);
  background:var(--ar-mint-pale, #edf4f2);
  color:var(--ar-charcoal, #343938);
}

.ar-pagination a:focus-visible{
  outline:3px solid rgba(102, 139, 136, .32);
  outline-offset:2px;
}

.ar-pagination .prev,
.ar-pagination .next{
  padding-inline:16px;
}

.ar-catalogue__similar{
  margin-top:clamp(40px, 7vw, 72px);
}

.ar-catalogue__similar > h2{
  margin:4px 0 8px;
}

.ar-catalogue__similar > p:not(.ar-catalogue__eyebrow){
  max-width:680px;
  margin:0 0 24px;
  color:var(--ar-muted, #596461);
}

.ar-grid{
  display:grid;
  align-items:stretch;
  gap:24px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px){
  .ar-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px){
  .ar-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 768px){
  .ar-grid--compact{
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap:18px;
  }
}

/* Filtry na górze /szkolenie/ */
.ar-filters-top {
  margin: 24px 0 32px;
  /* Match single-szkolenie .sp-section card look */
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.05);
  overflow: hidden;
}

/* Checkboxy w linii (oszczędność miejsca) */
.ar-filters-top .fe-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
}

.ar-filters-top .fe-filter__item {
  margin: 0;
}

/* Nagłówki filtrów */
.ar-filters-top .fe-filter__title {
  font-weight: 700;
  margin-bottom: 10px;
}

/* /szkolenie/ = pełna szerokość (bez sidebara) */
/* === Zwijane filtry /szkolenie/ === */

/* page-specific filters and layout are kept in this file; shared layout moved to szkolenie-base.css */

/* Kontener filtrów — widoczne domyślnie */
.ar-filters-content {
  margin-top: 0; /* no gap that would show gray beside white */
  padding: 0; /* header/middle manage their own paddings */
  background: transparent;
  border-radius: 0;
  display: block;
}

/* Header inside the gray top area */
.ar-filters-header{
  padding: 18px 22px;
  background: #575756; /* dark header to match card accent */
  color: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.ar-filters-header .ar-filters-title{
  margin: 0;
  color: inherit;
  font-weight: 800;
}

/* Middle: lists of filters — white card inside gray wrapper */
.ar-filters-middle{
  background: transparent; /* let the outer card provide the white */
  padding: 12px 22px;
  margin: 0;
  border-top: none;
}

@media (max-width: 767px){
  .ar-filters-header{ padding: 12px 12px; }
  .ar-filters-middle{ padding: 10px 12px; }
}

/* Usuń tło nagłówka na /szkolenie/ */
.post-type-archive-szkolenie .page-header {
  background: none !important;
  padding: 0 !important;
  margin-bottom: 24px;
}

.post-type-archive-szkolenie .page-header .page-title {
  color: inherit;
}

.post-type-archive-szkolenie .page-header {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

/* Removed shared rules (now in szkolenie-base.css). This file keeps archive-specific styles only. */

/* ====== Icon system (SVG sprite) ====== */
/* Usage in markup:
   <svg class="icon icon--sm" aria-hidden="true"><use href="/wp-content/themes/oceanwp-child/assets/img/icons.svg#icon-tag"></use></svg>
   When the icon conveys information, include visually-hidden text or use role/title inside SVG for accessibility.
*/

.icon{
  width: var(--icon-size, 20px);
  height: var(--icon-size, 20px);
  display: inline-block;
  vertical-align: middle;
  /* color controls both stroke and filled parts via currentColor */
  color: #f3d7a3; /* primary badge color */
  stroke: currentColor;
  fill: currentColor;
  stroke-width: 1.6;
}

.icon--sm{ --icon-size: 16px; }
.icon--md{ --icon-size: 20px; }
.icon--lg{ --icon-size: 24px; }

/* helper for screen-reader-only text */
.visually-hidden{ 
  position: absolute !important;
  height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

.ar-filter-group{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:stretch;
  margin-top:8px;
  padding:10px 0; /* visual spacing within each category */
}

/* subtle divider line between categories */
/* removed dashed divider between categories */

.ar-filter-group__title{
  font-weight:700;
  margin-right:8px;
  min-width:90px;
}

.ar-filter-button{
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  background:#ffffff;
  color:#2f2f2f;
  text-decoration:none;
  border:1px solid rgba(0,0,0,.06);
  font-weight:700;
  transition:background .15s, color .15s, transform .06s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ar-filter-button:hover{ transform:translateY(-1px); }

.ar-filter-button.active{
  background:#2f2f2f;
  color:#ffffff;
  border-color:transparent;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}

.ar-filter-button--all{
  background:transparent;
  border:1px dashed rgba(0,0,0,.08);
  font-weight:600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 767px){
  .ar-filter-group {
    gap: 4px;
    margin-top: 4px;
    padding: 8px 0;
  }
  /* removed dashed divider between categories on mobile */
  .ar-filter-group__title {
    min-width: 60px;
    font-size: 13px;
    margin-right: 4px;
  }
  .ar-filter-button,
  .ar-filter-button--all {
    padding: 6px 8px;
    font-size: 13px;
  }
}

/* ===== Collapsible filter groups ===== */
.ar-filter-group__toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  text-align:left;
  gap:8px;
  padding:10px 14px;
  border-radius:12px; /* distinct from pills */
  background:#eeeeee; /* muted header look */
  color:#2f2f2f;
  border:1px solid rgba(0,0,0,.10);
  font-weight:800;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background .15s, color .15s, transform .06s, box-shadow .15s, border-color .15s;
}

.ar-filter-group__toggle::after{
  content:'▾';
  font-size:14px;
  line-height:1;
  margin-left:12px;
  transition:transform .15s ease;
}

.ar-filter-group__toggle:hover{ transform:translateY(-1px); background:#e6e6e6; }

.ar-filter-group__toggle[aria-expanded="true"]{
  background:#e0e0e0;
  border-color:rgba(0,0,0,.16);
  box-shadow:0 4px 12px rgba(0,0,0,.10);
}

.ar-filter-group__toggle[aria-expanded="true"]::after{ transform:rotate(180deg); }

.ar-filter-group__panel{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}

/* ensure hidden panels are actually hidden even if display is set */
.ar-filter-group__panel[hidden]{
  display: none !important;
}

@media (max-width: 767px){
  .ar-filter-group__toggle{ padding:8px 12px; font-size:13px; }
  .ar-filter-group__panel{ gap:6px; margin-top:6px; }
}

  /* ===== Selected filters (chip bar) ===== */
  /* Now placed inside the filters card and matching the header background */
  .ar-selected-filters{
    margin: 0; /* inside card */
    padding: 12px 22px; /* align with .ar-filters-middle on desktop */
    background: #575756; /* match header */
    color: #ffffff;
    border-radius: 0; /* share outer card radius */
    border-top: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
  }

  .ar-selected-filters__label{
    font-weight: 700;
    color: #ffffff;
  }

  .ar-selected-filters__list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .ar-selected-filters__item{ margin: 0; }

  .ar-selected-filters__chip{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #2f2f2f;
    color: #ffffff;
    font-weight: 700;
    border: 1px solid rgba(0,0,0,.10);
  }

  .ar-selected-filters__remove{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: rgba(255,255,255,.16);
    color: #ffffff;
    text-decoration: none;
    font-weight: 800;
    line-height: 1;
    transition: background .15s, transform .06s;
  }

  .ar-selected-filters__remove:hover{ background: rgba(255,255,255,.28); transform: translateY(-1px); }

  .ar-selected-filters__clear{
    margin-left: auto;
    padding: 6px 10px;
    border-radius: 999px;
    background: transparent;
    border: 1px dashed rgba(255,255,255,.28);
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s, transform .06s;
  }

  .ar-selected-filters__clear:hover{ background: rgba(255,255,255,.08); transform: translateY(-1px); }

  @media (max-width: 767px){
    .ar-selected-filters{ padding: 10px 12px; gap: 8px 10px; }
    .ar-selected-filters__label{ font-size: 13px; }
    .ar-selected-filters__chip{ padding: 5px 9px; font-size: 13px; }
    .ar-selected-filters__clear{ padding: 5px 9px; font-size: 13px; }
  }

  /* ===== Sorter below selected filters ===== */
  .ar-sort{
    padding: 12px 22px;
    background: #ffffff;
    color: #2f2f2f; /* ensure readable text on white */
    border-top: none;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap; /* keep label and select on one line */
    justify-content: flex-start; /* align to the left like other filters */
  }
  .ar-sort__label{ color: #2f2f2f; font-weight: 700; white-space: nowrap; }
  .ar-sort__select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    padding: 12px 40px 12px 14px; /* larger vertical padding to avoid clipping */
    border-radius: 12px; /* match .ar-filter-group__toggle */
    border: 1px solid rgba(0,0,0,.10);
    background-color: #eeeeee; /* match toggle bg */
    color: #2f2f2f;
    font-weight: 800;
    font-size: 14px;
    line-height: 1.35; /* ensure text has enough line height */
    min-height: 44px; /* ensure sufficient height across browsers */
    flex: 1 1 220px; /* allow select to grow but stay inline */
    letter-spacing: .02em;
    cursor: pointer;
    min-width: 220px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232f2f2f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 14px;
  }
  .ar-sort__select:hover{ background-color: #e6e6e6; }
  .ar-sort__select:focus{
    outline: none;
    background-color: #e0e0e0;
    border-color: rgba(0,0,0,.16);
    box-shadow: 0 4px 12px rgba(0,0,0,.10);
  }
  @media (max-width: 767px){
    .ar-sort{ padding: 10px 12px; flex-wrap: nowrap; }
    .ar-sort__label, .ar-sort__select{ font-size: 13px; }
    .ar-sort__select{ min-width: 140px; width: auto; flex: 1 1 140px; min-height: 40px; padding: 10px 40px 10px 12px; }
  }

  /* ===== Search below sorter ===== */
  .ar-search{
    padding: 12px 22px;
    background: #ffffff;
    color: #2f2f2f;
    border-top: 1px solid rgba(0,0,0,.06);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-start; /* explicit left alignment */
  }
  .ar-search__label{ color: #2f2f2f; font-weight: 700; }
  .ar-search__form{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; }
  .ar-search__input{
    flex: 1 1 260px;
    min-width: 220px;
    box-sizing: border-box;
    padding: 12px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.10);
    background-color: #ffffff;
    color: #2f2f2f;
    font-weight: 600;
    line-height: 1.35;
    min-height: 44px;
  }
  .ar-search__input:focus{ outline: none; border-color: rgba(0,0,0,.16); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
  .ar-search__button{
    padding: 12px 16px;
    border-radius: var(--ar-button-radius);
    background: #575756;
    color: #fff;
    border: 1px solid rgba(0,0,0,.10);
    font-weight: 800;
    letter-spacing: .02em;
    cursor: pointer;
    line-height: 1.2;
  }
  .ar-search__button:hover{ filter: brightness(0.95); }
  .ar-search__clear{
    margin-left: auto;
    padding: 6px 10px;
    border-radius: 999px;
    background: transparent;
    border: 1px dashed rgba(0,0,0,.28);
    color: #2f2f2f;
    font-weight: 700;
    text-decoration: none;
  }
  .ar-search__clear:hover{ background: rgba(0,0,0,.04); transform: translateY(-1px); }
  @media (max-width: 767px){
    .ar-search{ padding: 10px 12px; }
    .ar-search__label{ font-size: 13px; }
    .ar-search__input{ min-height: 40px; padding: 10px 12px; min-width: 0; width: 100%; }
    .ar-search__button{ padding: 10px 14px; font-size: 13px; }
  }

    /* ===== Taxonomy combobox filters (Cykle, Tematyka, Typ produktu) ===== */
    .ar-filter-form{
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: nowrap; /* keep label and select on the same line */
      width: 100%;
    }
    .ar-filter-form__label{
      font-weight: 700;
      color: #2f2f2f;
      white-space: nowrap; /* prevent label from breaking to a new line */
    }
    .ar-filter__select{
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      box-sizing: border-box;
      padding: 12px 40px 12px 14px;
      border-radius: 12px;
      border: 1px solid rgba(0,0,0,.10);
      background-color: #eeeeee;
      color: #2f2f2f;
      font-weight: 800;
      font-size: 14px;
      line-height: 1.35;
      min-height: 44px;
      flex: 1 1 260px; /* grow to fill remaining space on the same line */
      letter-spacing: .02em;
      cursor: pointer;
      min-width: 220px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232f2f2f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 14px 14px;
      max-width: 100%;
    }

    /* Split combobox: static prefix + select, appears as one rounded control */
    .ar-select-combo{
      --select-prefix-width: 120px; /* consistent left part width on desktop (reduced) */
      display: inline-flex;
      align-items: stretch;
      border: 1px solid rgba(0,0,0,.10);
      border-radius: 12px;
      overflow: hidden;
      background: #eeeeee;
      flex: 1 1 260px;
      min-width: 220px;
      position: relative; /* for the dropdown indicator */
    }
    /* Right-side dropdown indicator */
    .ar-select-combo::after{
      content: '';
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      width: 14px; height: 14px;
      background-repeat: no-repeat;
      background-size: 14px 14px;
      opacity: .9;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%232f2f2f'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    }
    .ar-select-prefix{
      display: inline-flex;
      align-items: center;
      justify-content: center; /* center content */
      padding: 0 12px; /* symmetric padding */
      color: #ffffff;
      font-weight: 800;
      letter-spacing: .02em;
      white-space: nowrap;
      text-align: center; /* center text inside */
      background: #7f9e9d;
      border-right: 1px solid rgba(0,0,0,.10);
      flex: 0 0 var(--select-prefix-width);
      max-width: var(--select-prefix-width);
      min-height: 44px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ar-select-combo .ar-filter__select{
      border: 0;
      border-radius: 0;
      background: #eeeeee;
      min-height: 44px;
      padding: 12px 40px 12px 12px;
      flex: 1 1 auto;
      min-width: 0; /* allow shrink to keep one line */
      background-image: none; /* use wrapper arrow indicator */
    }
    .ar-filter__select:hover{ background-color: #e6e6e6; }
    .ar-filter__select:focus{
      outline: none;
      background-color: #e0e0e0;
      border-color: rgba(0,0,0,.16);
      box-shadow: 0 4px 12px rgba(0,0,0,.10);
    }
    @media (max-width: 767px){
      .ar-filter-form{ gap: 8px; flex-wrap: nowrap; }
      .ar-filter-form__label{ font-size: 13px; }
      .ar-filter__select{
        min-width: 140px; /* allow select to shrink to keep same line */
        width: auto;
        flex: 1 1 140px;
        min-height: 40px;
        padding: 10px 40px 10px 12px;
        font-size: 13px;
      }
      .ar-select-combo{ flex: 1 1 140px; min-width: 140px; --select-prefix-width: 100px; }
      .ar-select-prefix{ padding: 0 10px; font-size: 13px; min-height: 40px; }
      .ar-select-combo .ar-filter__select{ min-height: 40px; padding: 10px 40px 10px 10px; font-size: 13px; }
    }

    @media (forced-colors: active){
      /* Hide custom arrow in high-contrast; rely on native control */
      .ar-select-combo::after{ display: none; }
    }

@media (prefers-reduced-motion: reduce){
  .ar-catalogue__results{ transition:none; }
  .ar-catalogue__results.is-loading::before{ animation:none; transform:scaleX(1); }
}