/* ============================================================
   Advanced Product Filter System – Frontend Styles v2.0
   Brand: Blue #326699 / Hover #F2B400 / Font: Futura PT
   ============================================================ */

/* Futura PT via Adobe Fonts / self-hosted fallback */
@import url('https://use.typekit.net/futura-pt.css');

:root {
  --apfs-yellow:      #FFC601;
  --apfs-yellow-btn:  #FFC601;
  --apfs-blue:        #326699;
  --apfs-blue-dark:   #264f78;
  --apfs-black:       #000000;
  --apfs-white:       #ffffff;
  --apfs-gray-50:     #f8f8f8;
  --apfs-gray-100:    #f0f0f0;
  --apfs-gray-200:    #e0e0e0;
  --apfs-gray-300:    #cccccc;
  --apfs-gray-500:    #888888;
  --apfs-gray-700:    #444444;
  --apfs-text:        #1a1a1a;
  --apfs-border:      #d8d8d8;
  --apfs-radius:      4px;
  --apfs-radius-lg:   8px;
  --apfs-shadow-sm:   0 1px 3px rgba(0,0,0,.08);
  --apfs-shadow:      0 2px 12px rgba(0,0,0,.1);
  --apfs-shadow-lg:   0 8px 32px rgba(0,0,0,.12);
  --apfs-transition:  0.25s cubic-bezier(0.4, 0, 0.2, 1);
  /* Futura PT – system fallbacks in order */
  --apfs-font: 'futura-pt', 'Futura PT', 'Futura', 'Century Gothic', 'Trebuchet MS', Arial, sans-serif;
}

/* ── Base ───────────────────────────────────────────────────── */
.apfs-wrap * {
  box-sizing: border-box;
  font-family: var(--apfs-font);
}

.apfs-wrap {
  font-family: var(--apfs-font);
  color: var(--apfs-text);
  line-height: 1.5;
  max-width: 100%;
}

/* ── Filter Bar ─────────────────────────────────────────────── */
.apfs-filter-bar {
  background: var(--apfs-gray-50);
  border: 1px solid var(--apfs-border);
  border-radius: var(--apfs-radius-lg);
  padding: 24px 28px 20px;
  margin-bottom: 28px;
}

.apfs-filter-bar__main {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

/* ── Filter Group ───────────────────────────────────────────── */
.apfs-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 160px;
}

.apfs-filter-group--action {
  flex: 0 0 auto;
  min-width: 140px;
}

.apfs-filter-group--condition {
  flex-basis: 200px;
}

.apfs-filter-group--hp {
  flex-basis: 160px;
}

.apfs-filter-group--subcategory {
  flex-basis: 200px;
  display: none;
}

.apfs-filter-group--subcategory.is-visible {
  display: flex;
}

.apfs-filter-label {
  font-family: var(--apfs-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--apfs-gray-700);
}

/* ── Selects ────────────────────────────────────────────────── */
.apfs-select-wrap {
  position: relative;
}

.apfs-select {
  width: 100%;
  height: 44px;
  padding: 0 40px 0 14px;
  border: 1.5px solid var(--apfs-border);
  border-radius: var(--apfs-radius);
  background: var(--apfs-white);
  font-family: var(--apfs-font);
  font-size: 14px;
  color: var(--apfs-text);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color var(--apfs-transition), box-shadow var(--apfs-transition);
  outline: none;
}

.apfs-select:hover  { border-color: var(--apfs-blue); }
.apfs-select:focus  { border-color: var(--apfs-blue); box-shadow: 0 0 0 3px rgba(50,102,153,.15); }

.apfs-select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--apfs-gray-500);
  pointer-events: none;
  transition: transform var(--apfs-transition);
}

.apfs-select-wrap:focus-within .apfs-select-arrow {
  transform: translateY(-50%) rotate(180deg);
}
/* Slide hover — Search + View Details only (background only, no ::before) */
.apfs-btn--search,
.apfs-btn-detail,
.apfs-btn--detail,
.apfs-btn--card {
  font-family: var(--apfs-font);
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  color: #ffffff;
  border: 2px solid #326699;
  background-color: #326699;
  background-image: linear-gradient(
    90deg,
    #F2B400 0%,
    #F2B400 50%,
    transparent 50%,
    transparent 100%
  );
  background-repeat: no-repeat;
  background-size: 200% 100%;
  background-position: 100% 0;
  transition: background-position 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.apfs-btn--search::before,
.apfs-btn-detail::before,
.apfs-btn--detail::before,
.apfs-btn--card::before {
  content: none;
  display: none;
}

.apfs-btn--search:hover,
.apfs-btn-detail:hover,
.apfs-btn--detail:hover,
.apfs-btn--card:hover {
  background-position: 0% 0;
  color: #000000;
  border-color: #F2B400;
}

/* ── Main Search Button ──────────────────────────────────────── */
.apfs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 28px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  font-family: var(--apfs-font);
  cursor: pointer;
  text-decoration: none;
}

.apfs-btn--search {
  width: 100%;
  min-width: 140px;
}

/* ── Stock Search Button ─────────────────────────────────────── */
.apfs-btn--stock {
  height: 44px;
  width: 52px;
  padding: 0;
  border-radius: 0 100px 100px 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #326699;
  color: #ffffff;
  border: 2px solid #326699;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.apfs-btn--stock:hover {
  background: var(--apfs-blue-dark);
  border-color: var(--apfs-blue-dark);
  color: #ffffff;
}


/* ── Card CTA Button (grid view) ─────────────────────────────── */
.apfs-btn--card {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── List View Detail Button ─────────────────────────────────── */
.apfs-btn-detail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 20px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── View Toggle Buttons (static — no color slide animation) ─── */
.apfs-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--apfs-radius);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
  font-family: var(--apfs-font);
  text-decoration: none;
  background: var(--apfs-white);
  color: var(--apfs-blue);
  border: 1.5px solid var(--apfs-border);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.apfs-view-btn:hover {
  border-color: var(--apfs-blue);
  color: var(--apfs-blue);
  background: var(--apfs-white);
}

.apfs-view-btn.is-active {
  background: var(--apfs-blue);
  border-color: var(--apfs-blue);
  color: var(--apfs-white);
}

.apfs-view-btn.is-active:hover {
  background: var(--apfs-blue-dark);
  border-color: var(--apfs-blue-dark);
  color: var(--apfs-white);
}

/* ── Pagination Buttons ──────────────────────────────────────── */
.apfs-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--apfs-radius);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-family: var(--apfs-font);
  cursor: pointer;
  text-decoration: none;
  background: var(--apfs-white);
  color: var(--apfs-blue);
  border: 1.5px solid var(--apfs-border);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.apfs-page-btn:hover {
  border-color: var(--apfs-blue);
  background: var(--apfs-gray-50);
  color: var(--apfs-blue);
}

.apfs-page-btn.is-active {
  background: var(--apfs-blue);
  border-color: var(--apfs-blue);
  color: var(--apfs-white);
}

.apfs-page-btn.is-active:hover {
  background: var(--apfs-blue-dark);
  border-color: var(--apfs-blue-dark);
  color: var(--apfs-white);
}

/* ── Clear Filters Button ────────────────────────────────────── */
.apfs-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  font-family: var(--apfs-font);
  cursor: pointer;
  text-decoration: none;
  background: var(--apfs-white);
  color: var(--apfs-gray-700);
  border: 1.5px solid var(--apfs-border);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.apfs-clear-btn:hover {
  border-color: var(--apfs-blue);
  background: var(--apfs-gray-50);
  color: var(--apfs-blue);
}

/* ── Loading State ───────────────────────────────────────────── */
.apfs-btn__loader {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0,0,0,0.2);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: apfs-spin 0.7s linear infinite;
}

.apfs-btn.is-loading .apfs-btn__text { display: none; }
.apfs-btn.is-loading .apfs-btn__loader { display: block; }

@keyframes apfs-spin { to { transform: rotate(360deg); } }

/* ── Divider ─────────────────────────────────────────────────── */
.apfs-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 20px 0 16px;
  color: var(--apfs-gray-500);
  font-family: var(--apfs-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.apfs-divider::before,
.apfs-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--apfs-border);
}

/* ── Stock Search Bar ────────────────────────────────────────── */
.apfs-stock-bar {
  display: flex;
  align-items: center;
  max-width: 420px;
  margin: 0 auto;
}

.apfs-stock-bar__input-wrap { flex: 1; }

.apfs-stock-input {
  width: 100%;
  height: 44px;
  padding: 0 18px;
  border: 1.5px solid var(--apfs-border);
  border-right: none;
  border-radius: 100px 0 0 100px;
  font-family: var(--apfs-font);
  font-size: 14px;
  color: var(--apfs-text);
  background: var(--apfs-white);
  outline: none;
  transition: border-color var(--apfs-transition), box-shadow var(--apfs-transition);
}

.apfs-stock-input:focus {
  border-color: var(--apfs-blue);
  box-shadow: -3px 0 0 0 rgba(50,102,153,.15), 0 -3px 0 0 rgba(50,102,153,.15), 0 3px 0 0 rgba(50,102,153,.15);
}

.apfs-stock-input::placeholder { color: var(--apfs-gray-500); }

/* ── Active Filters ──────────────────────────────────────────── */
.apfs-active-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--apfs-border);
}

.apfs-active-filters__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}

.apfs-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--apfs-yellow);
  color: var(--apfs-black);
  border-radius: 100px;
  font-family: var(--apfs-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.apfs-filter-tag__remove { cursor: pointer; line-height: 1; opacity: 0.6; transition: opacity 0.2s; }
.apfs-filter-tag__remove:hover { opacity: 1; }

/* ── Results Header ──────────────────────────────────────────── */
.apfs-results-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--apfs-yellow);
}

.apfs-results-header__left { flex: 1; }

.apfs-breadcrumb {
  font-family: var(--apfs-font);
  font-size: 13px;
  color: var(--apfs-gray-500);
  margin-bottom: 4px;
}

.apfs-breadcrumb a { color: var(--apfs-blue); text-decoration: none; }
.apfs-breadcrumb a:hover { text-decoration: underline; }
.apfs-breadcrumb__sep { margin: 0 6px; }

.apfs-results-title {
  font-family: var(--apfs-font);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--apfs-blue);
  margin: 0 0 4px;
  text-transform: uppercase;
}

.apfs-results-desc {
  font-family: var(--apfs-font);
  font-size: 13px;
  color: var(--apfs-gray-500);
  margin: 0;
}

/* ── Sort (results header) ───────────────────────────────────── */
.apfs-results-header__right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.apfs-sort-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.apfs-select--sort {
  height: 38px;
  min-width: 170px;
}

/* ── View Toggle ─────────────────────────────────────────────── */
.apfs-view-toggle {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}

/* ── Results Area ────────────────────────────────────────────── */
.apfs-results { min-height: 200px; }

/* ── Initial / Empty State ───────────────────────────────────── */
.apfs-initial-state,
.apfs-no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: var(--apfs-gray-500);
}

.apfs-initial-state__icon,
.apfs-no-results__icon { font-size: 48px; margin-bottom: 16px; opacity: 0.4; }

.apfs-initial-state h3,
.apfs-no-results h3 {
  font-family: var(--apfs-font);
  font-size: 20px;
  font-weight: 700;
  color: var(--apfs-gray-700);
  margin: 0 0 8px;
}

.apfs-initial-state p,
.apfs-no-results p {
  font-family: var(--apfs-font);
  font-size: 14px;
  margin: 0;
  max-width: 320px;
}

/* ── Loading ─────────────────────────────────────────────────── */
.apfs-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 20px;
  color: var(--apfs-gray-500);
  font-family: var(--apfs-font);
  font-size: 14px;
}

.apfs-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--apfs-gray-200);
  border-top-color: var(--apfs-blue);
  border-radius: 50%;
  animation: apfs-spin 0.8s linear infinite;
}

/* ══════════════════════════════════════════════════════════════
   TABLE VIEW
   ══════════════════════════════════════════════════════════════ */
.apfs-table-wrapper {
  overflow-x: auto;
  border-radius: var(--apfs-radius-lg);
  box-shadow: var(--apfs-shadow);
  border: 1px solid var(--apfs-border);
}

.apfs-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--apfs-font);
  font-size: 14px;
  background: var(--apfs-white);
  min-width: 800px;
}

.apfs-table thead tr { background: var(--apfs-blue); }

.apfs-table thead th {
  padding: 13px 16px;
  font-family: var(--apfs-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--apfs-white);
  text-align: left;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.1);
  cursor: default;
  user-select: none;
}

.apfs-table thead th:last-child { border-right: none; }

.apfs-table tbody tr {
  border-bottom: 1px solid var(--apfs-gray-100);
  cursor: pointer;
  transition: background var(--apfs-transition);
}

.apfs-table tbody tr:hover { background: #EBF2FA; }
.apfs-table tbody tr:last-child { border-bottom: none; }

.apfs-table tbody td {
  padding: 12px 16px;
  font-family: var(--apfs-font);
  color: var(--apfs-text);
  vertical-align: middle;
}

.apfs-table__stock a {
  color: var(--apfs-blue);
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s;
}

.apfs-table__stock a:hover { color: var(--apfs-blue-dark); text-decoration: underline; }
.apfs-table__photo { text-align: center; }

.apfs-photo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(78,123,167,.1);
  border-radius: var(--apfs-radius);
  color: var(--apfs-blue);
  transition: background 0.2s, color 0.2s;
}

.apfs-photo-link:hover { background: var(--apfs-blue); color: var(--apfs-white); }

/* ── Availability Badges ─────────────────────────────────────── */
.apfs-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-family: var(--apfs-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.apfs-badge--available, .apfs-avail--available { background: #e6f9f0; color: #1a8a4a; }
.apfs-badge--sold,      .apfs-avail--sold      { background: #fde8e8; color: #c0392b; }
.apfs-badge--reserved,  .apfs-avail--reserved  { background: #fff4d6; color: #b45309; }
.apfs-badge--pending,   .apfs-avail--pending   { background: #e8f0fe; color: #1a56a0; }
.apfs-badge--out-of-stock, .apfs-avail--out-of-stock { background: #fde8e8; color: #c0392b; }

/* ══════════════════════════════════════════════════════════════
   GRID VIEW
   ══════════════════════════════════════════════════════════════ */
.apfs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

.apfs-card {
  border-radius: var(--apfs-radius-lg);
  overflow: hidden;
  box-shadow: var(--apfs-shadow);
  border: 1px solid var(--apfs-border);
  background: var(--apfs-white);
  transition: box-shadow var(--apfs-transition), transform var(--apfs-transition);
}

.apfs-card:hover { box-shadow: var(--apfs-shadow-lg); transform: translateY(-3px); }

.apfs-card__inner {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.apfs-card__image {
  position: relative;
  height: 180px;
  background: var(--apfs-gray-100);
  overflow: hidden;
}

.apfs-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.apfs-card:hover .apfs-card__image img { transform: scale(1.05); }

.apfs-card__no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--apfs-gray-300);
}

.apfs-card__avail {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 10px;
  border-radius: 100px;
  font-family: var(--apfs-font);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.apfs-card__body { padding: 18px; flex: 1; display: flex; flex-direction: column; }

.apfs-card__category {
  font-family: var(--apfs-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--apfs-blue);
  margin-bottom: 6px;
}

.apfs-card__title {
  font-family: var(--apfs-font);
  font-size: 15px;
  font-weight: 700;
  color: var(--apfs-text);
  margin: 0 0 12px;
  line-height: 1.3;
}

.apfs-card__specs { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }

.apfs-spec {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  background: var(--apfs-gray-100);
  border-radius: var(--apfs-radius);
  font-family: var(--apfs-font);
  font-size: 12px;
}

.apfs-spec__label { color: var(--apfs-gray-500); font-weight: 600; }
.apfs-spec__value { font-weight: 700; color: var(--apfs-text); }

.apfs-card__footer {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--apfs-gray-100);
}

/* ══════════════════════════════════════════════════════════════
   LIST VIEW
   ══════════════════════════════════════════════════════════════ */
.apfs-list { display: flex; flex-direction: column; gap: 12px; }

.apfs-list-item {
  background: var(--apfs-white);
  border: 1px solid var(--apfs-border);
  border-radius: var(--apfs-radius-lg);
  overflow: hidden;
  box-shadow: var(--apfs-shadow-sm);
  transition: box-shadow var(--apfs-transition), border-color var(--apfs-transition);
}

.apfs-list-item:hover { box-shadow: var(--apfs-shadow); border-color: var(--apfs-blue); }

.apfs-list-item__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  text-decoration: none;
  color: inherit;
}

.apfs-list-item__thumb {
  flex-shrink: 0;
  width: 88px;
  height: 72px;
  border-radius: var(--apfs-radius);
  overflow: hidden;
  background: var(--apfs-gray-100);
}

.apfs-list-item__thumb img { width: 100%; height: 100%; object-fit: cover; }

.apfs-list-item__no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--apfs-gray-300);
}

.apfs-list-item__content { flex: 1; min-width: 0; }

.apfs-list-item__meta-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.apfs-list-item__category {
  font-family: var(--apfs-font);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--apfs-blue);
}

.apfs-list-item__avail {
  font-family: var(--apfs-font);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 100px;
}

.apfs-list-item__title {
  font-family: var(--apfs-font);
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.apfs-list-item__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--apfs-font);
  font-size: 13px;
  color: var(--apfs-gray-700);
}

.apfs-list-item__specs strong { color: var(--apfs-text); }

.apfs-list-item__excerpt {
  font-family: var(--apfs-font);
  font-size: 13px;
  color: var(--apfs-gray-500);
  margin: 6px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.apfs-list-item__action { flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════════════ */
.apfs-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--apfs-border);
}

.apfs-pagination__info {
  font-family: var(--apfs-font);
  font-size: 13px;
  color: var(--apfs-gray-500);
}

.apfs-pagination__controls { display: flex; gap: 6px; align-items: center; }

/* ══════════════════════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════════════════════ */
@keyframes apfs-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.apfs-results > * { animation: apfs-fade-in 0.3s ease; }

.apfs-grid .apfs-card { animation: apfs-fade-in 0.3s ease backwards; }
.apfs-grid .apfs-card:nth-child(1) { animation-delay: .02s; }
.apfs-grid .apfs-card:nth-child(2) { animation-delay: .04s; }
.apfs-grid .apfs-card:nth-child(3) { animation-delay: .06s; }
.apfs-grid .apfs-card:nth-child(4) { animation-delay: .08s; }
.apfs-grid .apfs-card:nth-child(5) { animation-delay: .10s; }
.apfs-grid .apfs-card:nth-child(6) { animation-delay: .12s; }

.apfs-list .apfs-list-item { animation: apfs-fade-in 0.25s ease backwards; }
.apfs-list .apfs-list-item:nth-child(1) { animation-delay: .02s; }
.apfs-list .apfs-list-item:nth-child(2) { animation-delay: .05s; }
.apfs-list .apfs-list-item:nth-child(3) { animation-delay: .08s; }
.apfs-list .apfs-list-item:nth-child(4) { animation-delay: .11s; }
.apfs-list .apfs-list-item:nth-child(5) { animation-delay: .14s; }

.apfs-table-wrapper { animation: apfs-fade-in 0.3s ease; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .apfs-filter-bar__main { flex-direction: column; }
  .apfs-filter-group { width: 100%; min-width: unset; }
  .apfs-filter-group--action { width: 100%; }
  .apfs-results-header { flex-direction: column; }
  .apfs-results-header__right { width: 100%; }
  .apfs-view-toggle { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .apfs-filter-bar { padding: 16px; }
  .apfs-grid { grid-template-columns: 1fr; }
  .apfs-list-item__inner { flex-wrap: wrap; gap: 12px; }
  .apfs-list-item__action { width: 100%; }
  .apfs-btn-detail { width: 100%; text-align: center; justify-content: center; }
  .apfs-pagination { flex-direction: column; align-items: center; text-align: center; }
  .apfs-results-title { font-size: 18px; }
}