/* design-1: section panels, gold-accent headings, chip hover states.
   Scoped to .t2b-ui (index.php, place.php, salon.php). Palette = app.css vars. RTL-safe (logical props). */
.t2b-ui {
  --d1-panel: rgba(255, 255, 255, 0.035);
  --d1-panel-alt: rgba(198, 163, 106, 0.065);
  --d1-line: rgba(198, 163, 106, 0.24);
  --d1-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  --d1-radius: 22px;
  --d1-pad: clamp(16px, 2.6vw, 28px);
  --d1-gap: clamp(14px, 2vw, 22px);
}

/* ---------- panels ---------- */
.t2b-ui .t2b-head,
.t2b-ui .t2b-hero > div,
.t2b-ui .t2b-panel,
.t2b-ui .land.cat-home,
.t2b-ui #list.band {
  background: var(--d1-panel);
  border: 1px solid var(--d1-line);
  border-radius: var(--d1-radius);
  box-shadow: var(--d1-shadow);
  padding: var(--d1-pad);
  margin: 0 0 var(--d1-gap);
}
.t2b-ui .t2b-alt, .t2b-ui .land.cat-home, .t2b-ui #list.band { background: var(--d1-panel-alt); }
.t2b-ui .t2b-head,
.t2b-ui .t2b-hero > div {
  background:
    radial-gradient(600px 220px at 85% 0%, rgba(198, 163, 106, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  margin-top: 8px;
}
.t2b-ui .t2b-head h1, .t2b-ui .t2b-hero h1 { white-space: normal; text-wrap: balance; margin-top: 0; }
.t2b-ui .t2b-head .lead { margin-bottom: 0; }
.t2b-ui .t2b-head .btn { margin-top: 14px; }
.t2b-ui .hero.land { padding-top: 20px; }
.t2b-ui .hero.t2b-hero { padding: 20px 0 6px; }
.t2b-ui .catalog-layout { margin-top: 0; }
.t2b-ui .catalog-layout > .t2b-panel { margin-bottom: 0; }
.t2b-ui .land-layout .land-main > .t2b-panel:last-child { margin-bottom: 0; }

/* ---------- section headings: small gold accent ---------- */
.t2b-ui .t2b-panel > h2,
.t2b-ui .land.cat-home > h2,
.t2b-ui form.book > h2,
.t2b-ui .card > h2[data-i18n="card.masters"] {
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.15;
  margin: 0 0 16px;
}
.t2b-ui .t2b-panel > h2::before,
.t2b-ui .land.cat-home > h2::before,
.t2b-ui form.book > h2::before,
.t2b-ui .card > h2[data-i18n="card.masters"]::before {
  content: "";
  display: block;
  width: 38px;
  height: 3px;
  border-radius: 3px;
  margin-block-end: 10px;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
}
.t2b-ui .card > h2[data-i18n="card.masters"] { margin-top: 22px !important; }

/* ---------- chips ---------- */
.t2b-ui .land-list { gap: 8px; }
.t2b-ui .land-list a,
.t2b-ui .svc-pill {
  background: rgba(255, 255, 255, 0.03);
  transition: border-color .18s ease, color .18s ease, background-color .18s ease, transform .18s ease;
}
.t2b-ui .land-list a:hover, .t2b-ui .land-list a:focus-visible,
.t2b-ui .svc-pill:hover, .t2b-ui .svc-pill:focus-visible {
  border-color: var(--gold);
  color: var(--gold-2);
  background: rgba(198, 163, 106, 0.14);
  transform: translateY(-1px);
  outline: none;
}

/* ---------- category blocks (home «Популярные категории по городам» + salon «Услуги по городам»):
   one card per group, grid on desktop, stacked on mobile ---------- */
.t2b-ui .land.cat-home {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  align-items: start;
}
.t2b-ui .land.cat-home > h2 { grid-column: 1 / -1; margin-bottom: 4px; }
.t2b-ui .land.cat-home .cat-city,
.t2b-ui .land.cat-home.cat-related .cat-city {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin: 0;
  padding: 14px 16px 16px;
  background: rgba(20, 17, 14, 0.35);
  border: 1px solid rgba(198, 163, 106, 0.18);
  border-radius: 16px;
  min-width: 0;
}
.t2b-ui .land.cat-home .cat-city-name,
.t2b-ui .land.cat-home.cat-related .cat-city-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding-block-end: 9px;
  border-bottom: 1px solid rgba(198, 163, 106, 0.2);
  color: var(--gold-2);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
}
.t2b-ui .land.cat-home .cat-city-name::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(198, 163, 106, 0.18);
}
.t2b-ui .land.cat-home a.cat-city-name:hover { color: var(--gold); }
.t2b-ui .land.cat-home .cat-links,
.t2b-ui .land.cat-home.cat-related .cat-links { width: 100%; flex-wrap: wrap; gap: 7px; }
.t2b-ui .land.cat-home .cat-links a,
.t2b-ui .land.cat-home.cat-related .cat-links a {
  font-size: 13px;
  line-height: 1.2;
  padding: 6px 12px;
  color: var(--cream);
}
/* salon-page block: compact heading (layout: related-2 section below) */
.t2b-ui .land.cat-home.cat-related > h2 {
  font-family: var(--sans);
  font-size: 21px;
  font-weight: 600;
  margin: 0 0 6px;
}

/* ---------- salon page ---------- */
.t2b-ui article.card,
.t2b-ui form.card.book {
  border-color: var(--d1-line);
  border-radius: var(--d1-radius);
  box-shadow: var(--d1-shadow);
  padding: var(--d1-pad);
}
.t2b-ui form.card.book { background: var(--d1-panel-alt); }
.t2b-ui article.card .reviews {
  border-top: 0 !important;
  margin-top: 22px !important;
  padding: 16px 18px !important;
  border-radius: 16px;
  background: rgba(20, 17, 14, 0.35);
  border: 1px solid rgba(198, 163, 106, 0.18) !important;
}
.t2b-ui .crumb { background: rgba(255, 255, 255, 0.025); }

/* ---------- mobile ---------- */
@media (max-width: 768px) {
  .t2b-ui { --d1-radius: 18px; --d1-gap: 14px; }
  .t2b-ui .land.cat-home,
  .t2b-ui .land.cat-home.cat-related > h2 { font-size: 18px; }
  .t2b-ui .land.cat-home .cat-city { padding: 12px 13px 13px; }
  .t2b-ui .t2b-panel > h2, .t2b-ui .land.cat-home:not(.cat-related) > h2, .t2b-ui form.book > h2 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .t2b-ui .land-list a, .t2b-ui .svc-pill { transition: none; }
  .t2b-ui .land-list a:hover, .t2b-ui .svc-pill:hover { transform: none; }
}

/* ---------- home: category tiles (all variants) ---------- */
.t2b-tiles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 4px;
}
.t2b-tiles[hidden] { display: none !important; }
.t2b-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 112px;
  padding: 16px 10px 14px;
  text-align: center;
  border: 1px solid rgba(198, 163, 106, 0.28);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  color: var(--cream);
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.t2b-tile-ic {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: var(--gold-2);
  background: rgba(198, 163, 106, 0.12);
  border: 1px solid rgba(198, 163, 106, 0.32);
}
.t2b-tile-name { max-width: 100%; font-size: 14px; font-weight: 600; line-height: 1.25; word-break: normal; overflow-wrap: normal; hyphens: manual; }
.t2b-tile:hover, .t2b-tile:focus-visible {
  border-color: var(--gold);
  background-color: rgba(198, 163, 106, 0.12);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  outline: none;
}
.t2b-tile:hover .t2b-tile-ic, .t2b-tile:focus-visible .t2b-tile-ic { color: #1a1612; background: var(--gold); border-color: var(--gold); }
@media (max-width: 900px) { .t2b-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } .t2b-tile { padding-inline: 6px; } .t2b-tile-name { font-size: 13px; } }
@media (max-width: 600px) {
  .t2b-ui .t2b-hero > div { padding-inline: 12px; }
  .t2b-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
  .t2b-tile { min-height: 96px; padding: 12px 2px 10px; gap: 7px; border-radius: 14px; }
  .t2b-tile-ic { width: 42px; height: 42px; }
  .t2b-tile-ic svg { width: 24px; height: 24px; }
  .t2b-tile-name { font-size: clamp(10.5px, 3vw, 12px); font-weight: 500; letter-spacing: -0.01em; }
}
@media (max-width: 359px) { .t2b-ui .t2b-hero > div { padding-inline: 8px; } .t2b-tiles { gap: 4px; } .t2b-tile { padding-inline: 1px; } .t2b-tile-name { font-size: 10px; letter-spacing: -0.02em; } }
@media (prefers-reduced-motion: reduce) { .t2b-tile { transition: none; } .t2b-tile:hover { transform: none; } }

/* ---------- salon page «Услуги по городам» (related-2): flat directory grid,
   UPPERCASE category heading, plain city links; 3 cols desktop, 2 tablet, 1 phone ---------- */
.t2b-ui .land.cat-home.cat-related {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 32px;
  margin-top: 22px;
}
.t2b-ui .land.cat-home.cat-related > h2 { margin-bottom: 0; }
.t2b-ui .land.cat-home.cat-related .cat-city {
  gap: 8px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.t2b-ui .land.cat-home.cat-related .cat-city-name {
  display: block;
  padding: 0;
  border: 0;
  color: var(--gold-2);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .06em;
  text-transform: uppercase;
}
html[lang="he"] .t2b-ui .land.cat-home.cat-related .cat-city-name { letter-spacing: 0; font-size: 13.5px; }
.t2b-ui .land.cat-home.cat-related .cat-city-name::before { content: none; }
.t2b-ui .land.cat-home.cat-related .cat-links { gap: 6px 16px; }
.t2b-ui .land.cat-home.cat-related .cat-links a {
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
.t2b-ui .land.cat-home.cat-related .cat-links a:hover,
.t2b-ui .land.cat-home.cat-related .cat-links a:focus-visible {
  background: none;
  color: var(--gold-2);
  transform: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 900px) { .t2b-ui .land.cat-home.cat-related { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; } }
@media (max-width: 480px) { .t2b-ui .land.cat-home.cat-related { grid-template-columns: 1fr; gap: 16px; } .t2b-ui .land.cat-home.cat-related .cat-links { gap: 5px 14px; } }

/* ---------- anim-1: "assembly" (js/t2b-anim.js adds html.t2b-anim; bots / reduced motion never get it) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.t2b-anim .t2b-ui :is(.t2b-panel, .land.cat-home, #list.band, article.card, form.card.book, .premium-rail, .t2b-tile, #list .card, .land.cat-home .cat-city, .t2b-panel .land-list > a):not(.t2b-in):not(.t2b-done):not(.card-in) { opacity: 0; }
  html.t2b-anim .t2b-ui .t2b-a:not(.t2b-in) { transform: translate3d(var(--ax, 0), var(--ay, 0), 0) rotate(var(--ar, 0deg)) scale(var(--as, 1)); }
  html.t2b-anim .t2b-ui .t2b-a.t2b-in {
    opacity: 1;
    transform: none;
    transition: opacity .38s ease-out var(--ad, 0ms), transform .55s cubic-bezier(.2, .75, .25, 1) var(--ad, 0ms);
  }
}