/* ============================================================
   Hola Holidays — Reusable UI component layer (2026)
   Loaded LAST among the 2026 stylesheets so these tokens and
   .hh- prefixed components win over page-specific rules without
   !important wars. Everything here is self-contained:
   breadcrumbs, trust badges, FAQ accordion, rating badge, price
   display, empty/error states, skeleton, search bar, search modal,
   bottom sheet (mobile booking + filter drawer), and the sticky
   mobile booking bar.
   ============================================================ */

/* ---- Shared focus + motion discipline ---------------------- */
.hh-breadcrumbs a:focus-visible,
.hh-faq__item > summary:focus-visible,
.hh-sheet__close:focus-visible,
.hh-modal__close:focus-visible,
.hh-mobile-book__cta:focus-visible,
.hh-search__submit:focus-visible,
.hh-state__action:focus-visible,
.hh-chip-btn:focus-visible {
  outline: 3px solid rgba(11, 55, 77, 0.34);
  outline-offset: 3px;
}

/* ============================================================
   1. BREADCRUMBS
   ============================================================ */
.hh-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0;
  color: var(--brand-muted, #65727A);
  font-family: var(--font-ui, 'Poppins', sans-serif);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
}
.hh-breadcrumbs a {
  color: var(--brand-navy, #0B374D);
  text-decoration: none;
  transition: color 160ms ease;
}
.hh-breadcrumbs a:hover { color: var(--brand-red, #D02A14); text-decoration: underline; }
.hh-breadcrumbs span[aria-hidden="true"] { color: rgba(11, 55, 77, 0.35); }
.hh-breadcrumbs [aria-current="page"] { color: var(--brand-muted, #65727A); font-weight: 700; }

/* ============================================================
   2. TRUST BADGES
   ============================================================ */
.hh-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hh-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--brand-text, #15242B);
  font-family: var(--font-ui, 'Poppins', sans-serif);
  font-size: 0.86rem;
  font-weight: 600;
}
.hh-trust__item i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: var(--radius-full);
  color: #fff;
  background: var(--brand-green, #47642E);
  font-size: 0.82rem;
}
.hh-trust__item--accent i { background: var(--brand-red, #D02A14); }
.hh-trust__item--gold i { background: var(--brand-gold, #E99A30); }

/* ============================================================
   3. RATING BADGE
   ============================================================ */
.hh-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui, 'Poppins', sans-serif);
}
.hh-rating__stars {
  display: inline-flex;
  gap: 1px;
  color: var(--brand-gold-dark, #C87F1C); /* 3.23:1 on white — passes WCAG 1.4.11 */
  font-size: 0.86rem;
  line-height: 1;
}
.hh-rating__value {
  color: var(--brand-text, #15242B);
  font-weight: 800;
}
.hh-rating__count {
  color: var(--brand-muted, #65727A);
  font-weight: 600;
  font-size: 0.82rem;
}

/* ============================================================
   4. PRICE DISPLAY
   ============================================================ */
.hh-price {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 6px;
  font-family: var(--font-ui, 'Poppins', sans-serif);
}
.hh-price__from {
  color: var(--brand-muted, #65727A);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hh-price__value {
  color: var(--brand-navy, #0B374D);
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  white-space: nowrap;
}
.hh-price__unit {
  color: var(--brand-muted, #65727A);
  font-size: 0.76rem;
  font-weight: 600;
}
.hh-price__old {
  color: var(--brand-muted, #65727A);
  font-size: 0.82rem;
  font-weight: 650;
  text-decoration: line-through;
}
.hh-price--discount .hh-price__value { color: var(--brand-red, #D02A14); }

/* ============================================================
   5. FAQ ACCORDION  (CSS-only, <details>/<summary>)
   ============================================================ */
.hh-faq {
  display: grid;
  gap: 12px;
}
.hh-faq__item {
  border: 1px solid var(--brand-border, #E7E0D7);
  border-radius: var(--radius-md);
  background: #fff;
  overflow: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.hh-faq__item[open] {
  border-color: rgba(11, 55, 77, 0.28);
  box-shadow: var(--shadow-sm);
}
.hh-faq__item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  color: var(--brand-text, #15242B);
  font-family: var(--font-heading, 'Baloo 2', sans-serif);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
}
.hh-faq__item > summary::-webkit-details-marker { display: none; }
.hh-faq__item > summary::after {
  content: "\f078"; /* chevron-down */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--brand-navy, #0B374D);
  font-size: 0.8rem;
  transition: transform 220ms ease;
  flex: 0 0 auto;
}
.hh-faq__item[open] > summary::after { transform: rotate(180deg); }
.hh-faq__panel {
  padding: 0 20px 18px;
  color: var(--brand-muted, #65727A);
  font-size: 0.92rem;
  line-height: 1.65;
}
.hh-faq__panel p { margin: 0 0 0.6em; }
.hh-faq__panel p:last-child { margin-bottom: 0; }

/* ============================================================
   6. EMPTY / ERROR STATES
   ============================================================ */
.hh-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  margin: 0 auto;
  padding: 44px 24px;
  max-width: 460px;
  color: var(--brand-muted, #65727A);
}
.hh-state__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--surface-muted, #FBF6EE);
  color: var(--brand-navy, #0B374D);
  font-size: 1.5rem;
}
.hh-state__title {
  margin: 0;
  color: var(--brand-text, #15242B);
  font-family: var(--font-heading, 'Baloo 2', sans-serif);
  font-size: 1.2rem;
  font-weight: 800;
}
.hh-state__text { margin: 0; font-size: 0.92rem; line-height: 1.6; }
.hh-state__action {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--control-md);
  padding: 0 20px;
  border: 1px solid var(--brand-navy, #0B374D);
  border-radius: var(--radius-full);
  background: var(--brand-navy, #0B374D);
  color: #fff;
  font-family: var(--font-ui, 'Poppins', sans-serif);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}
.hh-state__action:hover { background: var(--brand-primary-dark, #082A3C); transform: translateY(-1px); }

/* ============================================================
   7. SKELETON LOADERS (generic)
   ============================================================ */
.hh-skeleton {
  position: relative;
  overflow: hidden;
  background: #EFEAE2;
  border-radius: var(--radius-sm);
}
.hh-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.65) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: hh-skeleton-sweep 1.4s ease-in-out infinite;
}
.hh-skeleton--text { height: 12px; margin: 0 0 8px; }
.hh-skeleton--title { height: 18px; width: 70%; margin: 0 0 12px; }
.hh-skeleton--circle { border-radius: var(--radius-circle); }
@keyframes hh-skeleton-sweep {
  100% { transform: translateX(100%); }
}

/* ============================================================
   8. SEARCH BAR (hero) + SEARCH MODAL
   ============================================================ */
.hh-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 8px 8px 18px;
  border: 1px solid var(--brand-border, #E7E0D7);
  border-radius: var(--radius-full);
  background: #fff;
  box-shadow: var(--shadow-md);
}
.hh-search__icon { color: var(--brand-navy, #0B374D); font-size: 1rem; }
.hh-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--brand-text, #15242B);
  font-family: var(--font-ui, 'Poppins', sans-serif);
  font-size: 1rem;
  font-weight: 500;
}
.hh-search__input::placeholder { color: var(--brand-muted, #65727A); }
.hh-search__input:focus { outline: none; }
.hh-search__submit {
  flex: 0 0 auto;
  min-height: var(--control-md);
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--brand-red, #D02A14);
  color: #fff;
  font-family: var(--font-ui, 'Poppins', sans-serif);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 160ms ease;
}
.hh-search__submit:hover { background: var(--brand-accent-dark, #A81F0E); }

/* Modal (centered dialog) */
.hh-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(6, 30, 43, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}
.hh-overlay.is-open { opacity: 1; visibility: visible; transition: opacity 220ms ease; }

.hh-modal {
  width: min(560px, 100%);
  margin: 0 auto;
  background: #fff;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-xl);
  transform: translateY(16px);
  opacity: 0;
  transition: transform 240ms ease, opacity 240ms ease;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
.hh-overlay.is-open .hh-modal { transform: translateY(0); opacity: 1; }
.hh-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 14px;
}
.hh-modal__title {
  margin: 0;
  font-family: var(--font-heading, 'Baloo 2', sans-serif);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--brand-text, #15242B);
}
.hh-modal__body { padding: 0 24px 24px; overflow-y: auto; }

/* ============================================================
   9. BOTTOM SHEET  (mobile booking + filter drawer)
   On wide screens behaves like a centered modal; on mobile it
   slides up from the bottom and caps at 90vh.
   ============================================================ */
.hh-sheet {
  width: min(560px, 100%);
  margin: 0 auto;
  background: #fff;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-xl);
  transform: translateY(100%);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.hh-overlay.is-open .hh-sheet { transform: translateY(0); }
.hh-sheet__header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 14px;
  background: #fff;
  border-bottom: 1px solid var(--brand-border, #E7E0D7);
}
.hh-sheet__title {
  margin: 0;
  font-family: var(--font-heading, 'Baloo 2', sans-serif);
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--brand-text, #15242B);
}
.hh-sheet__body { padding: 18px 20px 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.hh-sheet__footer {
  position: sticky;
  bottom: 0;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid var(--brand-border, #E7E0D7);
}
.hh-sheet__close,
.hh-modal__close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--surface-muted, #FBF6EE);
  color: var(--brand-navy, #0B374D);
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 160ms ease;
}
.hh-sheet__close:hover,
.hh-modal__close:hover { background: var(--brand-border, #E7E0D7); }

/* Drawer variant (filter) — slides from the right on larger screens */
.hh-sheet--end {
  width: min(420px, 100%);
  margin-left: auto;
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  transform: translateX(100%);
  max-height: 100vh;
  height: 100%;
}
.hh-overlay.is-open .hh-sheet--end { transform: translateX(0); }

/* ============================================================
   10. STICKY MOBILE BOOKING BAR
   Injected by ui-2026.js on managed tour pages. Hidden on desktop.
   ============================================================ */
.hh-mobile-book {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2300;
  display: none; /* enabled via media query + JS */
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid var(--brand-border, #E7E0D7);
  box-shadow: var(--shadow-up);
}
.hh-mobile-book__price { display: flex; flex-direction: column; line-height: 1.15; }
.hh-mobile-book__from {
  color: var(--brand-muted, #65727A);
  font-family: var(--font-ui, 'Poppins', sans-serif);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.hh-mobile-book__value {
  color: var(--brand-navy, #0B374D);
  font-family: var(--font-ui, 'Poppins', sans-serif);
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.hh-mobile-book__value small {
  color: var(--brand-muted, #65727A);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
}
.hh-mobile-book__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--control-lg);
  padding: 0 26px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--brand-red, #D02A14);
  color: #fff;
  font-family: var(--font-ui, 'Poppins', sans-serif);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background-color 160ms ease, transform 160ms ease;
}
.hh-mobile-book__cta:hover { background: var(--brand-accent-dark, #A81F0E); transform: translateY(-1px); }

/* When the bar is active, keep page content clear of it */
body.hh-mb-active { padding-bottom: 78px; }

/* Scroll lock while any overlay is open */
body.hh-no-scroll { overflow: hidden; }

/* Inside the booking sheet the bar already shows the price, so hide the
   rail's own price header to avoid a duplicate. */
.hh-sheet .mt-book__head { display: none; }
.hh-sheet .mt-book { box-shadow: none; border: 0; background: transparent; padding: 0; }

@media (max-width: 860px) {
  .hh-mobile-book.is-ready { display: flex; }
  /* Park the desktop booking rail; its form lives in the sheet now */
  body.hh-mb-active .mt-rail { display: none; }
}

/* ============================================================
   11. CHIP BUTTON (filters / quick selects)
   ============================================================ */
.hh-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--control-sm);
  padding: 0 14px;
  border: 1px solid var(--brand-border, #E7E0D7);
  border-radius: var(--radius-full);
  background: #fff;
  color: var(--brand-text, #15242B);
  font-family: var(--font-ui, 'Poppins', sans-serif);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.hh-chip-btn:hover { border-color: rgba(11, 55, 77, 0.4); }
.hh-chip-btn[aria-pressed="true"] {
  border-color: var(--brand-navy, #0B374D);
  background: var(--brand-navy, #0B374D);
  color: #fff;
}
.hh-chip-btn i { font-size: 0.8rem; }

/* ============================================================
   12. SECTION HEADING HELPER
   ============================================================ */
.hh-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 22px;
}
.hh-section-head__title {
  margin: 0;
  font-family: var(--font-heading, 'Baloo 2', sans-serif);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 800;
  color: var(--brand-text, #15242B);
  letter-spacing: -0.02em;
}
.hh-section-head__link {
  flex: 0 0 auto;
  color: var(--brand-navy, #0B374D);
  font-family: var(--font-ui, 'Poppins', sans-serif);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}
.hh-section-head__link:hover { color: var(--brand-red, #D02A14); text-decoration: underline; }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hh-overlay,
  .hh-modal,
  .hh-sheet,
  .hh-sheet--end,
  .hh-skeleton::after,
  .hh-faq__item > summary::after,
  .hh-mobile-book__cta,
  .hh-search__submit,
  .hh-state__action {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .hh-skeleton::after { display: none; }
}

/* ============================================================
   13. LISTING TOOLBAR (search + filters + sort + count)
   ============================================================ */
.hh-listing-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 0 0 26px;
}
.hh-listing-bar__group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hh-listing-bar__spacer { flex: 1 1 auto; }
.hh-results { color: var(--brand-muted, #65727A); font-family: var(--font-ui, 'Poppins', sans-serif); font-size: 0.9rem; font-weight: 600; }

.hh-sort {
  min-height: var(--control-md);
  padding: 0 38px 0 14px;
  border: 1px solid var(--brand-border, #E7E0D7);
  border-radius: var(--radius-full);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230B374D' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center;
  color: var(--brand-text, #15242B);
  font-family: var(--font-ui, 'Poppins', sans-serif);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.hh-sort:focus-visible { outline: 3px solid rgba(11, 55, 77, 0.34); outline-offset: 3px; }

.hh-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--control-md);
  padding: 0 18px;
  border: 1px solid var(--brand-navy, #0B374D);
  border-radius: var(--radius-full);
  background: #fff;
  color: var(--brand-navy, #0B374D);
  font-family: var(--font-ui, 'Poppins', sans-serif);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 160ms ease;
}
.hh-filter-btn:hover { background: var(--surface-muted, #FBF6EE); }
.hh-filter-btn i { font-size: 0.82rem; }

/* Hero search trigger — looks like a search bar, opens the modal */
.hh-search-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 460px;
  padding: 0 8px 0 18px;
  min-height: var(--control-lg);
  border: 1px solid var(--brand-border, #E7E0D7);
  border-radius: var(--radius-full);
  background: #fff;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  text-align: left;
  color: var(--brand-muted, #65727A);
  font-family: var(--font-ui, 'Poppins', sans-serif);
  font-size: 1rem;
  transition: box-shadow 160ms ease, border-color 160ms ease;
}
.hh-search-trigger:hover { border-color: rgba(11, 55, 77, 0.4); box-shadow: var(--shadow-lg); }
.hh-search-trigger i { color: var(--brand-navy, #0B374D); }
.hh-search-trigger > span:first-of-type { flex: 1; }
.hh-search-trigger .hh-search__submit { flex: 0 0 auto; }

/* ============================================================
   14. FILTER DRAWER + SEARCH MODAL internals
   ============================================================ */
.hh-filter-section { padding: 18px 0; border-top: 1px solid var(--brand-border, #E7E0D7); }
.hh-filter-section:first-child { border-top: 0; padding-top: 4px; }
.hh-filter-section__title {
  margin: 0 0 12px;
  font-family: var(--font-heading, 'Baloo 2', sans-serif);
  font-size: 1rem;
  font-weight: 800;
  color: var(--brand-text, #15242B);
}
.hh-filter-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.hh-filter-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  color: var(--brand-muted, #65727A);
  font-size: 0.85rem;
  font-weight: 600;
}
.hh-filter-price-row strong { color: var(--brand-text, #15242B); }
.hh-range { width: 100%; accent-color: var(--brand-red, #D02A14); }
.hh-radio-list { display: grid; gap: 10px; }
.hh-radio-list label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--brand-text, #15242B);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.hh-radio-list input { accent-color: var(--brand-navy, #0B374D); width: 18px; height: 18px; }
.hh-filter-actions { display: flex; gap: 12px; }
.hh-filter-actions .hh-state__action,
.hh-filter-actions .hh-clear { flex: 1; justify-content: center; }
.hh-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--control-md);
  padding: 0 18px;
  border: 1px solid var(--brand-border, #E7E0D7);
  border-radius: var(--radius-full);
  background: #fff;
  color: var(--brand-navy, #0B374D);
  font-family: var(--font-ui, 'Poppins', sans-serif);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.hh-search-suggest-title {
  margin: 18px 0 10px;
  color: var(--brand-muted, #65727A);
  font-family: var(--font-ui, 'Poppins', sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Panels live in the DOM but are hidden until portaled into the overlay */
.hh-sheet,
.hh-modal { display: none; }
.hh-overlay.is-open > .hh-sheet,
.hh-overlay.is-open > .hh-modal { display: flex; }

/* Center the search modal instead of pinning it to the bottom */
.hh-overlay:has(.hh-modal) { align-items: center; justify-content: center; padding: 20px; }
.hh-overlay:has(.hh-modal) .hh-modal { border-radius: var(--radius-xl); width: min(560px, 100%); }
.hh-modal .hh-search { margin-top: 4px; }

/* Visually hidden but available to screen readers */
.hh-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .hh-search-trigger,
  .hh-filter-btn,
  .hh-clear { transition-duration: 0.01ms !important; }
}