/* =========================================================
   WildRoute - Tours listing (tours-front.css)
   Location: assets/css/css-front/tours-front.css

   Tours / Excursions / Activities / Transfers listing.
   Matches index-front.css, safaris-front.css, dashboard-front.css.

   Scoped under body.page-tours so the generic class names
   used in tours.php (.container, .btn, .card-grid, .listing-card,
   .type-tab, .pagination) never leak onto other pages.

   01 Tokens              11 Filter sheet (mobile)
   02 Base                12 Results grid
   03 Layout              13 Listing cards
   04 Eyebrow / headings  14 Pagination
   05 Buttons             15 Empty state
   06 Breadcrumbs         16 Responsive
   07 Page header         17 Motion / print / a11y
   08 Type tabs
   09 Filter bar
   10 Filter chips
   ========================================================= */

/* =========================================================
   01. TOKENS
   ========================================================= */
body.page-tours {
  --tf-bg:          #f5f6f8;
  --tf-card:        #ffffff;
  --tf-ink:         #0f1115;
  --tf-ink-2:       #525860;
  --tf-ink-3:       #8b9099;

  --tf-line:        #eaebef;
  --tf-line-2:      #e2e4e9;
  --tf-soft:        #f3f4f7;
  --tf-soft-2:      #ececef;

  --tf-accent:      #d94460;
  --tf-accent-dark: #b8324b;
  --tf-accent-soft: #fdeef1;
  --tf-accent-glow: rgba(217, 68, 96, .22);

  --tf-star:        #f2a800;

  --tf-r-xs: 8px;
  --tf-r-sm: 12px;
  --tf-r-md: 16px;
  --tf-r-lg: 22px;
  --tf-r-xl: 28px;
  --tf-r-2xl: 34px;
  --tf-r-pill: 999px;

  --tf-shadow-xs: 0 1px 2px rgba(15, 17, 21, .04);
  --tf-shadow-sm: 0 2px 8px -4px rgba(15, 17, 21, .08);
  --tf-shadow:    0 10px 26px -14px rgba(15, 17, 21, .18);
  --tf-shadow-lg: 0 30px 60px -32px rgba(15, 17, 21, .32);

  --tf-gap: clamp(14px, 2vw, 22px);
  --tf-ease: cubic-bezier(.4, 0, .2, 1);
  --tf-fast: .18s;
  --tf-med:  .28s;
}

/* =========================================================
   02. BASE
   ========================================================= */
body.page-tours {
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(217, 68, 96, .05), transparent 60%),
    var(--tf-bg);
  color: var(--tf-ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.page-tours *,
body.page-tours *::before,
body.page-tours *::after { box-sizing: border-box; }

body.page-tours main { padding-block: clamp(16px, 2.4vw, 28px) clamp(44px, 6vw, 72px); }

body.page-tours h1,
body.page-tours h2,
body.page-tours h3,
body.page-tours p { margin: 0; }

body.page-tours a { color: inherit; text-decoration: none; }
body.page-tours img { display: block; max-width: 100%; height: auto; }
body.page-tours ol,
body.page-tours ul { margin: 0; padding: 0; list-style: none; }

body.page-tours :focus-visible {
  outline: 3px solid var(--tf-ink);
  outline-offset: 3px;
  border-radius: 12px;
}

body.page-tours .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

body.page-tours .ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   03. LAYOUT
   ========================================================= */
body.page-tours .container {
  width: min(1180px, 100% - 32px);
  margin-inline: auto;
}

body.page-tours .section {
  margin-top: clamp(22px, 3.4vw, 40px);
}

/* =========================================================
   04. EYEBROW / HEADINGS
   ========================================================= */
body.page-tours .h1 {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.04em;
  text-wrap: balance;
}
body.page-tours .h3 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.02em;
}
body.page-tours .body {
  color: var(--tf-ink-2);
  font-size: clamp(.94rem, 1.1vw, 1.02rem);
  line-height: 1.6;
}
body.page-tours .small { font-size: .82rem; }
body.page-tours .caption {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tf-ink-3);
}

/* =========================================================
   05. BUTTONS
   ========================================================= */
body.page-tours .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--tf-r-pill);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background var(--tf-fast) ease,
    border-color var(--tf-fast) ease,
    color var(--tf-fast) ease,
    transform var(--tf-fast) var(--tf-ease),
    box-shadow var(--tf-fast) ease;
}
body.page-tours .btn:active { transform: scale(.98); }

body.page-tours .btn-primary {
  background: var(--tf-ink);
  color: #fff;
  box-shadow: 0 6px 16px -10px rgba(15, 17, 21, .5);
}
body.page-tours .btn-primary:hover {
  background: #23262c;
  box-shadow: 0 10px 22px -10px rgba(15, 17, 21, .55);
}

body.page-tours .btn-outline {
  background: #fff;
  color: var(--tf-ink);
  border-color: var(--tf-line-2);
}
body.page-tours .btn-outline:hover {
  border-color: var(--tf-ink-3);
  box-shadow: var(--tf-shadow-xs);
}

body.page-tours .btn-sm {
  height: 40px;
  padding: 0 18px;
  font-size: .84rem;
}

/* =========================================================
   06. BREADCRUMBS
   ========================================================= */
body.page-tours .breadcrumbs {
  margin-bottom: 14px;
}
body.page-tours .breadcrumbs-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--tf-ink-3);
}
body.page-tours .breadcrumbs-list a {
  color: var(--tf-ink-2);
  transition: color var(--tf-fast) ease;
}
body.page-tours .breadcrumbs-list a:hover { color: var(--tf-ink); }

body.page-tours .breadcrumbs-sep {
  display: inline-grid;
  place-items: center;
  color: #c4c6cc;
}
body.page-tours .breadcrumbs-sep svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.page-tours .breadcrumbs-current {
  color: var(--tf-ink);
  font-weight: 600;
}

/* =========================================================
   07. PAGE HEADER
   ========================================================= */
body.page-tours .listing-header-inner {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(24px, 3.6vw, 44px);
  background:
    radial-gradient(60% 100% at 100% 0%, rgba(217, 68, 96, .08), transparent 65%),
    linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
  border-radius: var(--tf-r-2xl);
  box-shadow: var(--tf-shadow-sm);
  overflow: hidden;
  isolation: isolate;
}
body.page-tours .listing-header-inner::after {
  content: '';
  position: absolute;
  top: 24px;
  right: 28px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tf-accent);
  box-shadow:
    16px 0 0 var(--tf-accent-soft),
    32px 0 0 var(--tf-accent),
    0 16px 0 var(--tf-accent-soft),
    16px 16px 0 var(--tf-accent),
    32px 16px 0 var(--tf-accent-soft),
    0 32px 0 var(--tf-accent);
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}
body.page-tours .listing-header-inner > * { position: relative; z-index: 1; }

body.page-tours .listing-header-text { min-width: 0; }
body.page-tours .listing-header-text .h1 { margin-top: 0; }
body.page-tours .listing-header-text .body {
  margin-top: 10px;
  max-width: 60ch;
}

body.page-tours .listing-header-meta { flex-shrink: 0; }

body.page-tours .listing-count {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--tf-r-pill);
  background: #fff;
  border: 1px solid var(--tf-line);
  box-shadow: 0 1px 2px rgba(15, 17, 21, .04);
  font-size: .82rem;
  font-weight: 500;
  color: var(--tf-ink-2);
}
body.page-tours .listing-count strong {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--tf-ink);
}

/* =========================================================
   08. TYPE TABS
   ========================================================= */
body.page-tours .type-tabs {
  margin-top: clamp(18px, 2.4vw, 26px);
}

body.page-tours .type-tabs-track {
  display: flex;
  gap: 8px;
  padding: 2px 0 4px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
body.page-tours .type-tabs-track::-webkit-scrollbar { display: none; }

body.page-tours .type-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  height: 46px;
  padding: 0 10px 0 20px;
  border: 1px solid var(--tf-line-2);
  border-radius: var(--tf-r-pill);
  background: #fff;
  color: var(--tf-ink-2);
  font-size: .9rem;
  font-weight: 500;
  scroll-snap-align: start;
  white-space: nowrap;
  transition:
    border-color var(--tf-fast) ease,
    color var(--tf-fast) ease,
    background var(--tf-fast) ease,
    box-shadow var(--tf-fast) ease;
}
body.page-tours .type-tab:hover {
  border-color: var(--tf-ink-3);
  color: var(--tf-ink);
  box-shadow: var(--tf-shadow-xs);
}
body.page-tours .type-tab.is-active {
  background: var(--tf-ink);
  border-color: var(--tf-ink);
  color: #fff;
  box-shadow: 0 6px 16px -8px rgba(15, 17, 21, .45);
}

body.page-tours .type-tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  border-radius: var(--tf-r-pill);
  background: var(--tf-soft);
  color: var(--tf-ink-2);
  font-size: .76rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background var(--tf-fast) ease, color var(--tf-fast) ease;
}
body.page-tours .type-tab.is-active .type-tab-count {
  background: var(--tf-accent);
  color: #fff;
}

/* Cross-link to safaris */
body.page-tours .type-tab--cross {
  padding: 0 18px;
  gap: 8px;
  border-style: dashed;
  color: var(--tf-ink-2);
}
body.page-tours .type-tab--cross:hover {
  border-style: solid;
  border-color: var(--tf-accent);
  color: var(--tf-accent);
}
body.page-tours .type-tab-cross-icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--tf-fast) var(--tf-ease);
}
body.page-tours .type-tab--cross:hover .type-tab-cross-icon { transform: translateX(3px); }

@media (min-width: 769px) {
  body.page-tours .type-tabs-track { flex-wrap: wrap; overflow: visible; }
}

/* =========================================================
   09. FILTER BAR
   ========================================================= */
body.page-tours .listing-filters {
  margin-top: clamp(18px, 2.4vw, 26px);
}

body.page-tours .filters-form {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: var(--tf-card);
  border-radius: var(--tf-r-pill);
  box-shadow: var(--tf-shadow-xs);
  border: 1px solid var(--tf-line);
}

body.page-tours .filter-field {
  flex: 1;
  min-width: 0;
  position: relative;
}

body.page-tours .filter-field--search {
  flex: 1.5;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 8px 0 20px;
  border-radius: var(--tf-r-pill);
  background: var(--tf-soft);
  border: 1px solid transparent;
  transition: background var(--tf-fast) ease, border-color var(--tf-fast) ease, box-shadow var(--tf-fast) ease;
}
body.page-tours .filter-field--search:focus-within {
  background: #fff;
  border-color: var(--tf-accent);
  box-shadow: 0 0 0 4px var(--tf-accent-glow);
}

body.page-tours .filter-icon {
  display: inline-flex;
  color: var(--tf-ink-3);
}
body.page-tours .filter-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.page-tours .filter-field--search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: .96rem;
  color: var(--tf-ink);
}
body.page-tours .filter-field--search input::placeholder { color: var(--tf-ink-3); }

body.page-tours .filter-field select {
  width: 100%;
  height: 50px;
  padding: 0 42px 0 20px;
  border: 1px solid transparent;
  border-radius: var(--tf-r-pill);
  background-color: var(--tf-soft);
  color: var(--tf-ink);
  font: inherit;
  font-size: .92rem;
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b9099' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  transition: background-color var(--tf-fast) ease, border-color var(--tf-fast) ease, box-shadow var(--tf-fast) ease;
}
body.page-tours .filter-field select:hover { background-color: var(--tf-soft-2); }
body.page-tours .filter-field select:focus {
  outline: 0;
  border-color: var(--tf-accent);
  background-color: #fff;
  box-shadow: 0 0 0 4px var(--tf-accent-glow);
}

body.page-tours .filter-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
body.page-tours .filter-actions .btn { height: 50px; padding: 0 24px; }

/* =========================================================
   10. ACTIVE FILTER CHIPS
   ========================================================= */
body.page-tours .active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
body.page-tours .active-filters-label {
  font-size: .82rem;
  color: var(--tf-ink-3);
  font-weight: 500;
}
body.page-tours .filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--tf-accent-soft);
  border-radius: var(--tf-r-pill);
  background: var(--tf-accent-soft);
  color: var(--tf-accent-dark);
  font-size: .8rem;
  font-weight: 600;
}

/* =========================================================
   11. FILTER SHEET (mobile)
   ========================================================= */
@media (max-width: 768px) {
  body.page-tours .filters-form {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    border-radius: 24px;
  }
  body.page-tours .filter-field,
  body.page-tours .filter-field--search {
    flex: 1 1 100%;
    height: 48px;
  }
  body.page-tours .filter-field select { height: 48px; }
  body.page-tours .filter-actions {
    width: 100%;
  }
  body.page-tours .filter-actions .btn { flex: 1; height: 46px; }
}

/* =========================================================
   12. RESULTS GRID
   ========================================================= */
body.page-tours .card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tf-gap);
}

/* =========================================================
   13. LISTING CARDS
   ========================================================= */
body.page-tours .listing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--tf-card);
  border-radius: var(--tf-r-lg);
  box-shadow: var(--tf-shadow-xs);
  transition:
    box-shadow var(--tf-med) ease,
    transform var(--tf-med) var(--tf-ease);
}
body.page-tours .listing-card:hover {
  box-shadow: var(--tf-shadow);
  transform: translateY(-4px);
}

body.page-tours .listing-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 6px 6px 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--tf-soft);
}
body.page-tours .listing-card-media-link {
  display: block;
  width: 100%;
  height: 100%;
}
body.page-tours .listing-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s var(--tf-ease);
}
body.page-tours .listing-card:hover .listing-card-img { transform: scale(1.05); }

body.page-tours .listing-card-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #c4c6cc;
  background: linear-gradient(160deg, #f3f3f6, #e8e8ec);
}
body.page-tours .listing-card-placeholder .ico {
  width: 40px;
  height: 40px;
  stroke-width: 1.4;
}

/* Featured badge — retinted to crimson (was badge-lime) */
body.page-tours .listing-card-badge,
body.page-tours .badge.badge-lime {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 11px;
  border-radius: var(--tf-r-pill);
  background: var(--tf-accent);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  box-shadow: 0 4px 10px -4px rgba(217, 68, 96, .55);
}

body.page-tours .listing-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px 18px;
}

body.page-tours .listing-card-type {
  color: var(--tf-ink-3);
}

body.page-tours .listing-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.page-tours .listing-card-title a {
  color: var(--tf-ink);
  transition: color var(--tf-fast) ease;
}
body.page-tours .listing-card-title a:hover { color: var(--tf-accent); }

body.page-tours .listing-card-desc {
  color: var(--tf-ink-2);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.page-tours .listing-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.page-tours .listing-card-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--tf-r-pill);
  background: var(--tf-soft);
  font-size: .74rem;
  font-weight: 500;
  color: var(--tf-ink-2);
}
body.page-tours .listing-card-meta .ico {
  width: 13px;
  height: 13px;
  color: var(--tf-ink-3);
}

body.page-tours .listing-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--tf-line);
}

body.page-tours .listing-card-operator {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
body.page-tours .operator-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: .82rem;
  font-weight: 500;
  color: var(--tf-ink-2);
  transition: color var(--tf-fast) ease;
}
body.page-tours .operator-link:hover { color: var(--tf-accent); }

body.page-tours .operator-avatar {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #e0556f 0%, var(--tf-accent) 100%);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
}
body.page-tours .operator-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 110px;
}

body.page-tours .rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .72rem;
  font-weight: 500;
  color: var(--tf-ink-3);
}
body.page-tours .rating .stars {
  letter-spacing: 1px;
  color: var(--tf-star);
  font-size: .78rem;
}

body.page-tours .listing-card-buy {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

body.page-tours .listing-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 4px;
  min-width: 0;
}
body.page-tours .listing-price-label {
  width: 100%;
  font-size: .68rem;
  color: var(--tf-ink-3);
  font-weight: 500;
}
body.page-tours .listing-price-amount {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--tf-ink);
  font-variant-numeric: tabular-nums;
}
body.page-tours .listing-price-unit {
  font-size: .72rem;
  color: var(--tf-ink-3);
}

/* View button */
body.page-tours .listing-card-buy .btn {
  height: 38px;
  padding: 0 16px;
  font-size: .8rem;
}

/* =========================================================
   14. PAGINATION
   ========================================================= */
body.page-tours .pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(24px, 3.4vw, 40px);
}
body.page-tours .pagination a,
body.page-tours .pagination .current,
body.page-tours .pagination-nav,
body.page-tours .pagination-dots {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border-radius: var(--tf-r-pill);
  font-size: .9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
body.page-tours .pagination a {
  background: #fff;
  border: 1px solid var(--tf-line-2);
  color: var(--tf-ink-2);
  transition:
    border-color var(--tf-fast) ease,
    color var(--tf-fast) ease,
    box-shadow var(--tf-fast) ease,
    transform var(--tf-fast) var(--tf-ease);
}
body.page-tours .pagination a:hover {
  border-color: var(--tf-ink-3);
  color: var(--tf-ink);
  box-shadow: var(--tf-shadow-xs);
}
body.page-tours .pagination a:active { transform: scale(.96); }

body.page-tours .pagination .current {
  background: var(--tf-ink);
  border: 1px solid var(--tf-ink);
  color: #fff;
  box-shadow: 0 6px 16px -8px rgba(15, 17, 21, .45);
}

body.page-tours .pagination-dots {
  border: 0;
  background: transparent;
  color: var(--tf-ink-3);
}

body.page-tours .pagination-nav svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   15. EMPTY STATE
   ========================================================= */
body.page-tours .empty-state {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: clamp(48px, 8vw, 84px) 24px;
  text-align: center;
  background: var(--tf-card);
  border-radius: var(--tf-r-xl);
  box-shadow: var(--tf-shadow-xs);
  overflow: hidden;
}
body.page-tours .empty-state::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, var(--tf-accent-glow), transparent 65%);
  pointer-events: none;
}
body.page-tours .empty-state > * { position: relative; }

body.page-tours .empty-icon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin-bottom: 8px;
  border-radius: 22px;
  background: var(--tf-accent-soft);
  color: var(--tf-accent);
  box-shadow: 0 8px 20px -10px rgba(217, 68, 96, .35);
}
body.page-tours .empty-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.page-tours .empty-title {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
body.page-tours .empty-text {
  max-width: 44ch;
  color: var(--tf-ink-3);
  line-height: 1.55;
  font-size: .94rem;
}
body.page-tours .empty-state .btn { margin-top: 16px; }

/* =========================================================
   16. RESPONSIVE
   ========================================================= */

/* Tablet */
@media (max-width: 1024px) {
  body.page-tours .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phones */
@media (max-width: 768px) {
  body.page-tours .container { width: calc(100% - 24px); }
  body.page-tours main { padding-block: 16px 44px; }

  body.page-tours .listing-header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 22px;
    border-radius: 24px;
  }
  body.page-tours .listing-header-inner::after { display: none; }
  body.page-tours .h1 { font-size: 1.6rem; }

  body.page-tours .listing-card-body { padding: 12px 16px 16px; }
  body.page-tours .listing-card-buy {
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }
  body.page-tours .listing-card-buy .btn {
    height: 36px;
    padding: 0 14px;
    font-size: .78rem;
  }

  body.page-tours .empty-state {
    border-radius: 22px;
    padding: 48px 22px;
  }
  body.page-tours .empty-icon { width: 60px; height: 60px; border-radius: 20px; }
  body.page-tours .empty-icon svg { width: 24px; height: 24px; }
  body.page-tours .empty-title { font-size: 1.05rem; }
  body.page-tours .empty-text { font-size: .88rem; }
}

/* Small phones */
@media (max-width: 640px) {
  body.page-tours .card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  body.page-tours .container { width: calc(100% - 20px); }

  body.page-tours .listing-header-inner { padding: 22px 18px; border-radius: 22px; }
  body.page-tours .h1 { font-size: 1.4rem; }
  body.page-tours .body { font-size: .9rem; }

  body.page-tours .listing-count { padding: 8px 16px; font-size: .76rem; }
  body.page-tours .listing-count strong { font-size: 1rem; }

  body.page-tours .listing-card-body { padding: 12px 14px 14px; gap: 8px; }
  body.page-tours .listing-card-title { font-size: .96rem; }
  body.page-tours .listing-card-meta > span { font-size: .7rem; padding: 4px 10px; }
  body.page-tours .listing-card-meta .ico { width: 12px; height: 12px; }
  body.page-tours .operator-name { max-width: 90px; }
  body.page-tours .listing-price-amount { font-size: .98rem; }

  body.page-tours .pagination a,
  body.page-tours .pagination .current,
  body.page-tours .pagination-nav {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    font-size: .84rem;
  }
}

@media (max-width: 380px) {
  body.page-tours .h1 { font-size: 1.28rem; }
  body.page-tours .listing-card-title { font-size: .92rem; }
  body.page-tours .type-tab { height: 42px; padding: 0 8px 0 16px; font-size: .84rem; }
  body.page-tours .type-tab-count { min-width: 26px; height: 26px; font-size: .72rem; }
}

/* =========================================================
   17. MOTION / PRINT / A11Y
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  body.page-tours *,
  body.page-tours *::before,
  body.page-tours *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media print {
  body.page-tours { background: #fff !important; }
  body.page-tours .listing-card,
  body.page-tours .listing-header-inner,
  body.page-tours .empty-state {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    break-inside: avoid;
  }
  body.page-tours .type-tabs,
  body.page-tours .listing-filters,
  body.page-tours .pagination { display: none !important; }
  body.page-tours .listing-header-inner::after { display: none !important; }
}

@media (forced-colors: active) {
  body.page-tours .listing-card,
  body.page-tours .type-tab,
  body.page-tours .btn,
  body.page-tours .filters-form,
  body.page-tours .pagination a,
  body.page-tours .pagination .current {
    border: 1px solid CanvasText;
  }
}