/* ============================================
   Cosmetic Homepage — Header & Footer CSS
   Prefixed with cshp- to avoid conflicts.
   ============================================ */

/* ---------- Global accent tokens (available site-wide, incl. WooCommerce pages
   outside .cshp-* wrappers — e.g. кнопки товара/корзины/чекаута) ---------- */
:root {
  --cshp-accent:      #af6a7c;
  /* Акцент как ТЕКСТ. Сам --cshp-accent остаётся фирменным цветом заливок
     и декора: #af6a7c даёт всего 3,36:1 на фоне и 4,06 на белом, то есть
     как текст не проходит. Отдельный токен позволяет починить контраст,
     не трогая бренд там, где цвет работает пятном. */
  --cshp-accent-text: #945264;
  --cshp-accent-deep: #5e2a3a;
}

/* ---------- Shared tokens (inherited from homepage or standalone) ---------- */
.cshp-hf-wrap {
  --cshp-bg:        #efe9df;
  --cshp-bg-2:      #e7e0d3;
  --cshp-surface:   #ffffff;
  --cshp-ink:       #1a1612;
  --cshp-ink-2:     #5b5249;
  --cshp-ink-3:     #6f665e;
  --cshp-line:      #d9d0c3;
  --cshp-accent:    #af6a7c; /* марсала (было #a35a3a терракота) */
  --cshp-accent-deep: #5e2a3a; /* тёмный винный (было #3a2418 коричневый) */

  --cshp-serif: "Cormorant Garamond", "Times New Roman", serif;
  --cshp-sans:  "Manrope", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --cshp-mono:  "JetBrains Mono", ui-monospace, Menlo, monospace;

  --cshp-container: 1320px;
  --cshp-gutter: 32px;

  font-family: var(--cshp-sans);
  -webkit-font-smoothing: antialiased;
}

/* Palette variants */
.cshp-hf-wrap[data-palette="sand"]{ --cshp-bg:#efe9df; --cshp-bg-2:#e7e0d3; --cshp-surface:#fff; --cshp-ink:#1a1612; --cshp-ink-2:#5b5249; --cshp-line:#d9d0c3; }
.cshp-hf-wrap[data-palette="bone"]{ --cshp-bg:#f4f1ec; --cshp-bg-2:#ebe6dd; --cshp-surface:#fff; --cshp-ink:#171514; --cshp-ink-2:#56504a; --cshp-line:#e1dad0; }
.cshp-hf-wrap[data-palette="clay"]{ --cshp-bg:#eadfd1; --cshp-bg-2:#dfd1bd; --cshp-surface:#fdf9f2; --cshp-ink:#1d160f; --cshp-ink-2:#5a4d3e; --cshp-line:#cdbfa8; }
.cshp-hf-wrap[data-palette="ash"] { --cshp-bg:#ececeb; --cshp-bg-2:#e1e1df; --cshp-surface:#fff; --cshp-ink:#15171a; --cshp-ink-2:#4f5359; --cshp-line:#d1d2d0; }
.cshp-hf-wrap[data-accent="rust"]    { --cshp-accent:#af6a7c; }
.cshp-hf-wrap[data-accent="bordeaux"]{ --cshp-accent:#7a2d2f; }
.cshp-hf-wrap[data-accent="forest"]  { --cshp-accent:#3e5a44; }
.cshp-hf-wrap[data-accent="ink"]     { --cshp-accent:#1a1612; }

.cshp-hf-wrap *, .cshp-hf-wrap *::before, .cshp-hf-wrap *::after { box-sizing: border-box; }
.cshp-hf-wrap a { color: inherit; text-decoration: none; }
.cshp-hf-wrap img { display: block; max-width: 100%; }
.cshp-hf-wrap button { font: inherit; cursor: pointer; }

/* ========================================
   HEADER
   ======================================== */
.cshp-header {
  background: var(--cshp-bg);
  border-bottom: 1px solid var(--cshp-line);
  position: sticky;
  top: 0;
  z-index: 100;
}
.admin-bar .cshp-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .cshp-header { top: 46px; } }

.cshp-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 22px var(--cshp-gutter);
  max-width: var(--cshp-container);
  margin: 0 auto;
}

/* Navigation */
.cshp-nav { display: flex; gap: 28px; }
.cshp-nav a {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cshp-ink); padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
.cshp-nav a:hover { border-bottom-color: var(--cshp-ink); }
.cshp-nav a.is-active { border-bottom-color: var(--cshp-accent); color: var(--cshp-accent-text); }
.cshp-nav__icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; flex: 0 0 auto; }

/* Submenu dropdown */
.cshp-nav__item { position: relative; }
.cshp-nav__arrow { margin-left: 2px; transition: transform .2s ease; }
.cshp-nav__item--has-children:hover .cshp-nav__arrow { transform: rotate(180deg); }

.cshp-sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 200px;
  background: var(--cshp-surface);
  border: 1px solid var(--cshp-line);
  padding: 10px 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
  z-index: 110;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.cshp-nav__item--has-children:hover > .cshp-sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.cshp-sub-menu a {
  display: block;
  padding: 8px 20px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cshp-ink-2);
  border-bottom: none;
  white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
.cshp-sub-menu a:hover {
  color: var(--cshp-accent);
  background: var(--cshp-bg);
}

/* Sub-sub menu (depth 2+) */
.cshp-sub-item { position: relative; }
.cshp-sub-item--has-children > a .cshp-nav__arrow { transform: rotate(-90deg); }
.cshp-sub-item--has-children:hover > a .cshp-nav__arrow { transform: rotate(0deg); }

.cshp-sub-item > .cshp-sub-menu {
  position: absolute;
  top: -10px;
  left: 100%;
  transform: translateX(4px);
  min-width: 190px;
}
.cshp-sub-item:hover > .cshp-sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Logo */
.cshp-logo {
  display: flex; align-items: self-start; gap: 12px;
  justify-self: flex-start;
}
.cshp-logo__mark {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  color: var(--cshp-ink);
}
.cshp-logo__word {
  font-family: var(--cshp-serif);
  font-size: 28px; letter-spacing: 0.32em; font-weight: 500;
}
.cshp-logo__img {
  height: 80px; width: auto;
}

/* Tools */
.cshp-header__tools { display: flex; gap: 18px; justify-self: end; align-items: center; }
.cshp-icon-btn {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--cshp-ink); border: 0;
  position: relative;
  flex: 0 0 auto;
  transition: color .2s ease;
  touch-action: manipulation; /* skip Safari's double-tap-zoom detection delay */
}
/* Сброс паддинга отдельным правилом с повышенной специфичностью: тема раздаёт
   всем <button> паддинг 0 37px, а тут ширина 38px при box-sizing: border-box,
   поэтому контентная ширина уходит в ноль и SVG сжимается до 0 по горизонтали.
   Снаружи выглядит как «иконки просто нет»: кнопка на месте и кликается, но
   пустая. В <a> иконки видны — у ссылок паддинга темы нет, так что бьёт только
   по кнопкам: поиск в шапке и «Cerrar» в мобильном меню.

   ⚠ Только padding. Класть сюда display нельзя: .cshp-hf-wrap .cshp-icon-btn
   (0,2,0) перебьёт .cshp-mobile-toggle { display: none } (0,1,0), и гамбургер
   вылезет на десктопе. На это уже наступили. */
.cshp-hf-wrap .cshp-icon-btn { padding: 0; }
.cshp-icon-btn > svg { flex: 0 0 auto; }
.cshp-icon-btn:hover { color: var(--cshp-accent); }
.cshp-badge {
  position: absolute; top: -2px; right: -2px;
  background: var(--cshp-accent); color: #fff;
  font-size: 10px; font-weight: 600;
  padding: 2px 5px; border-radius: 999px; line-height: 1;
}
.cshp-lang {
  font-family: var(--cshp-mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--cshp-ink-2);
}

/* Mobile toggle — hidden on desktop */
.cshp-mobile-toggle { display: none; }

/* Mobile menu panel */
.cshp-mobile-menu {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(380px, 85vw);
  background: var(--cshp-bg);
  z-index: 1102; /* above .wplb-navigation-bar__standard's z-index:1100, or the
                     bottom nav bar covers the panel's own bottom content */
  transform: translateX(100%);
  transition: transform .3s ease;
  display: flex; flex-direction: column;
  border-left: 1px solid var(--cshp-line);
}
.cshp-mobile-menu.is-open { transform: translateX(0); }
.cshp-mobile-menu__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--cshp-gutter);
  border-bottom: 1px solid var(--cshp-line);
}
.cshp-mobile-nav {
  flex: 1; overflow-y: auto;
  padding: 24px var(--cshp-gutter);
  display: flex; flex-direction: column; gap: 0;
}
.cshp-mobile-nav a {
  display: block; padding: 16px 0;
  border-bottom: 1px solid var(--cshp-line);
  font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cshp-ink); font-weight: 500;
}
.cshp-mobile-nav a:hover { color: var(--cshp-accent); }

/* Mobile nav — accordion submenus.
   The desktop dropdown (.cshp-sub-menu) is absolutely positioned and revealed on
   :hover, which does not exist on touch. Inside the mobile panel we flatten it to
   a collapsed inline list toggled by an injected button (see header-footer.js). */
/* align-items: stretch keeps the toggle button the same height as the link,
   so their bottom borders line up into one continuous rule. */
.cshp-mobile-nav .cshp-nav__item--has-children,
.cshp-mobile-nav .cshp-sub-item--has-children {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
}
.cshp-mobile-nav .cshp-nav__item--has-children > .cshp-sub-menu,
.cshp-mobile-nav .cshp-sub-item--has-children > .cshp-sub-menu {
  grid-column: 1 / -1;
}
.cshp-mobile-nav .cshp-nav__arrow { display: none; }

.cshp-mobile-sub-toggle {
  width: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; padding: 0;
  color: var(--cshp-ink-2); cursor: pointer;
  border-bottom: 1px solid var(--cshp-line);
  touch-action: manipulation;
}
/* pointer-events:none so a tap always hits the <button> itself, never the
   rotating/animating SVG child — a transformed child's hit-test box can
   momentarily desync from its visual position mid-transition on iOS Safari,
   which reads as "tapped the chevron, nothing happened". */
.cshp-mobile-sub-toggle svg { transition: transform .2s ease; pointer-events: none; }
.cshp-mobile-sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* The :hover variants must be listed explicitly: the desktop dropdown rules
   (.cshp-nav__item--has-children:hover > .cshp-sub-menu) outrank a plain
   .cshp-mobile-nav .cshp-sub-menu, and a tap leaves :hover stuck on touch. */
.cshp-mobile-nav .cshp-sub-menu,
.cshp-mobile-nav .cshp-nav__item--has-children:hover > .cshp-sub-menu,
.cshp-mobile-nav .cshp-sub-item--has-children:hover > .cshp-sub-menu,
.cshp-mobile-nav .cshp-sub-item:hover > .cshp-sub-menu {
  position: static;
  transform: none;
  opacity: 1;
  visibility: visible;
  display: none;
  min-width: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0 0 0 16px;
  margin: 0;
}
.cshp-mobile-nav .cshp-sub-menu.is-open,
.cshp-mobile-nav .cshp-nav__item--has-children:hover > .cshp-sub-menu.is-open,
.cshp-mobile-nav .cshp-sub-item--has-children:hover > .cshp-sub-menu.is-open,
.cshp-mobile-nav .cshp-sub-item:hover > .cshp-sub-menu.is-open { display: block; }
.cshp-mobile-nav .cshp-sub-menu a {
  padding: 13px 0;
  border-bottom: 1px solid var(--cshp-line);
  white-space: normal;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--cshp-ink-2);
}
.cshp-mobile-nav .cshp-sub-menu a:hover { background: transparent; }
.cshp-mobile-nav .cshp-sub-menu .cshp-sub-menu { padding-left: 16px; }

.cshp-mobile-menu__footer {
  padding: 20px var(--cshp-gutter);
  border-top: 1px solid var(--cshp-line);
}

/* Overlay */
.cshp-mobile-overlay {
  position: fixed; inset: 0; z-index: 1101;
  background: rgba(26,22,18,0.4); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.cshp-mobile-overlay.is-open { opacity: 1; visibility: visible; }

/* Buttons reuse */
.cshp-hf-wrap .cshp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 22px;
  background: var(--cshp-accent-deep); color: #f3ecdf;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500;
  border: 1px solid var(--cshp-accent-deep); border-radius: 0;
  transition: background .2s ease;
  width: 100%; text-align: center;
}
.cshp-hf-wrap .cshp-btn:hover { background: var(--cshp-accent); border-color: var(--cshp-accent); }
.cshp-hf-wrap .cshp-btn--ghost { background: transparent; color: var(--cshp-ink); border-color: var(--cshp-ink); }
.cshp-hf-wrap .cshp-btn--ghost:hover { background: var(--cshp-ink); color: var(--cshp-bg); }

/* ========================================
   FOOTER
   ======================================== */
/* Панель поиска: не раскрывается вниз, а наплывает поверх шапки и уходит
   обратно. Раньше она распирала <header> через max-height, и от этого прыгал
   весь контент страницы.

   Абсолют внутри .cshp-header (он sticky, то есть уже позиционирован, свой
   position: relative не нужен). inset: 0 — накрываем ровно строку шапки,
   логотип и меню под ней остаются на месте и не дёргаются.

   visibility в переходе с задержкой: без неё закрытая панель перехватывала бы
   клики по логотипу и меню, а с `visibility: hidden` без задержки исчезала бы
   мгновенно, не дав доиграть opacity. */
.cshp-search {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  background: var(--cshp-bg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .22s ease, transform .28s cubic-bezier(.4, 0, .2, 1), visibility 0s .28s;
}
.cshp-search.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .22s ease, transform .28s cubic-bezier(.4, 0, .2, 1), visibility 0s 0s;
}
/* Тем, кто просил не анимировать — не анимируем. */
@media (prefers-reduced-motion: reduce) {
  .cshp-search { transition: opacity .01s linear, visibility 0s .01s; transform: none; }
  .cshp-search.is-open { transition: opacity .01s linear, visibility 0s 0s; transform: none; }
}
.cshp-search__form {
  display: flex; align-items: center; gap: 14px;
  width: 100%; max-width: var(--cshp-container);
  margin: 0 auto; padding: 0 var(--cshp-gutter);
}
.cshp-search__icon { color: var(--cshp-ink-3); flex-shrink: 0; }
.cshp-search__input {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: transparent; outline: none;
  font-family: var(--cshp-sans); font-size: 18px; color: var(--cshp-ink);
  padding: 6px 0;
}
.cshp-search__input::placeholder { color: var(--cshp-ink-3); }
.cshp-search__submit {
  flex-shrink: 0; border: 0; cursor: pointer;
  background: var(--cshp-accent-deep); color: #f3ecdf;
  font-family: var(--cshp-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  padding: 11px 22px; transition: background .2s ease;
}
.cshp-search__submit:hover { background: var(--cshp-accent); }
.cshp-search__close {
  flex-shrink: 0; border: 0; background: transparent; color: var(--cshp-ink-2);
  display: inline-flex; padding: 6px; cursor: pointer; transition: color .2s ease;
}
.cshp-search__close:hover { color: var(--cshp-accent); }
@media (max-width: 640px) {
  .cshp-search__submit { padding: 10px 14px; }
  .cshp-search__input { font-size: 16px; }
}

.cshp-footer {
  background: var(--cshp-bg);
  padding: 100px 0 32px;
  font-family: var(--cshp-sans);
  color: var(--cshp-ink);
}
.cshp-footer .cshp-container {
  width: 100%; max-width: var(--cshp-container);
  margin: 0 auto; padding: 0 var(--cshp-gutter);
}
.cshp-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;   /* бренд + три филиала */
  gap: 48px;
  padding-bottom: 72px;
  border-bottom: 1px solid var(--cshp-line);
}
.cshp-footer__brand .cshp-logo { justify-content: flex-start; margin-bottom: 24px; }
.cshp-footer__brand p { color: var(--cshp-ink-2); font-size: 14px; line-height: 1.6; max-width: 320px; margin: 0; }

/* Location contact cards (column 1) */
.cshp-footer__locs { display: flex; flex-direction: column; gap: 22px; }
.cshp-loc-card { display: flex; flex-direction: column; gap: 5px; }
.cshp-loc-card__name {
  margin: 0; font-size: 14px; line-height: 1.4;
  color: var(--cshp-ink); font-weight: 500; max-width: 320px;
}
.cshp-loc-card__phone { font-size: 14px; color: var(--cshp-ink-2); }
.cshp-loc-card__phone:hover { color: var(--cshp-accent); }
.cshp-loc-card__addr { font-size: 13px; line-height: 1.5; color: var(--cshp-ink-2); max-width: 300px; }
a.cshp-loc-card__addr:hover { color: var(--cshp-accent); }

/* Social icons column */
.cshp-social { display: flex; gap: 12px; flex-wrap: wrap; }
.cshp-social__link {
  width: 40px; height: 40px; display: inline-flex;
  align-items: center; justify-content: center;
  border: 1px solid var(--cshp-line); border-radius: 50%;
  color: var(--cshp-ink); transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cshp-social__link:hover { background: var(--cshp-accent); border-color: var(--cshp-accent); color: #fff; }

.cshp-footer h4 {
  font-family: var(--cshp-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cshp-ink); margin: 0 0 20px; font-weight: 500;
}
.cshp-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.cshp-footer a { font-size: 14px; color: var(--cshp-ink-2); transition: color .2s ease; }
.cshp-footer a:hover { color: var(--cshp-accent); }

/* Маркеры в списках колонок. Раньше ссылки шли сплошняком и читались как
   абзац текста; теперь по тому же паттерну, что списки на страницах услуг
   (.cshp-svc-card__more-body li) — точка 5px акцентом, висячий отступ,
   чтобы перенос строки не съезжал под маркер. */
.cshp-footer__col-list > li {
  position: relative;
  padding-left: 16px;
}
.cshp-footer__col-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cshp-accent);
  transition: transform .2s ease;
}
.cshp-footer__col-list > li:hover::before { transform: scale(1.4); }

.cshp-footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 32px;
  font-size: 12px; color: var(--cshp-ink-3);
}
/* wrap обязателен: сюда переехали девять юридических ссылок из бывшей колонки
   «Información», и в одну строку они не влезают — на 390px давали 104px
   горизонтального скролла и уезжали за оба края экрана. */
.cshp-footer__row-links { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: center; }
.cshp-footer__row-links a { font-size: 12px; color: var(--cshp-ink-3); }
.cshp-footer__row-links a:hover { color: var(--cshp-accent); }

/* Соцсети внутри бренд-колонки: без отступа заголовок прилипал к плашке
   финансирования, которая идёт прямо над ним. */
.cshp-footer__brand .cshp-footer__social { margin-top: 28px; }

/* Funding badge */
.cshp-funding {
  display: flex; gap: 8px; align-items: center; margin-top: 24px;
  font-family: var(--cshp-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--cshp-ink-3);
}
.cshp-swatch { display: inline-flex; gap: 4px; }
.cshp-swatch i { width: 14px; height: 10px; display: inline-block; }
.cshp-swatch i.cshp-r { background: #c1272d; }
.cshp-swatch i.cshp-y { background: #f1cf5b; }
.cshp-swatch i.cshp-b { background: #003399; }
.cshp-funding__img { display: block; height: 56px; width: auto; max-width: 100%; }

/* ========================================
   CLAMPED TEXT ("Leer más")
   Shared utility — works on every cshp template, since header-footer.css
   is the one stylesheet loaded site-wide.
   ======================================== */
.cshp-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
.cshp-clamp[data-lines="3"] { -webkit-line-clamp: 3; line-clamp: 3; }
.cshp-clamp[data-lines="5"] { -webkit-line-clamp: 5; line-clamp: 5; }
.cshp-clamp[data-lines="6"] { -webkit-line-clamp: 6; line-clamp: 6; }
.cshp-clamp.is-expanded {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
  overflow: visible;
}
/* JS wraps the clamped block and its toggle in this element (see
   initClamps) so the button inherits the block's own centring. */
.cshp-clamp-wrap { display: flex; flex-direction: column; }
.cshp-clamp-wrap > .cshp-clamp { align-self: stretch; }

.cshp-clamp__toggle {
  align-self: center;
  margin-top: 20px;
  padding: 11px 24px;
  background: transparent;
  border: 1px solid var(--cshp-line-2, #c9bfaf);
  color: var(--cshp-ink, #1a1612);
  font-family: inherit;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cshp-clamp__toggle:hover {
  background: var(--cshp-accent-deep, #5e2a3a);
  border-color: var(--cshp-accent-deep, #5e2a3a);
  color: #f3ecdf;
}
.cshp-clamp__toggle:focus-visible {
  outline: 2px solid var(--cshp-accent, #af6a7c);
  outline-offset: 2px;
}

/* ========================================
   TOP BAR (WhatsApp + opening hours)
   ======================================== */
.cshp-topbar {
  background: var(--cshp-bg-2);
  border-bottom: 1px solid var(--cshp-line);
}
.cshp-topbar__inner {
  max-width: var(--cshp-container);
  margin: 0 auto;
  padding: 7px var(--cshp-gutter);
  display: flex; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; gap: 8px 20px;
}
.cshp-topbar__wa {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px;
/* Текст на зелёном WhatsApp — тёмный, а не белый. Белый по #25d366 даёт
   1,98:1 при норме 4,5:1: узнаваемый зелёный слишком светлый. Уходить
   в тёмно-бирюзовый ради белого текста значит потерять узнаваемость
   кнопки, поэтому меняем текст. #0a2e18 проходит на всех трёх оттенках:
   7,47 на #25d366, 6,05 на #1ebe5b, 4,78 на #1da851. */
  background: #25d366; color: #0a2e18;
  border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  line-height: 1;
  transition: background .2s ease;
}
.cshp-topbar__wa:hover { background: #1da851; color: #0a2e18; }
/* Тема красит вложенный span своим серым (#525252 на зелёном — 3,94:1),
   поэтому цвет приходится передавать явно. */
/* Тема красит вложенный span своим серым (#525252 на зелёном — 3,94:1)
   селектором большей силы, поэтому цвет задаём с той же квалификацией. */
.cshp-hf-wrap .cshp-topbar__wa,
.cshp-hf-wrap .cshp-topbar__wa span { color: #0a2e18; }
.cshp-topbar__hours {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; letter-spacing: 0.04em;
  color: var(--cshp-ink-2);
}

@media (max-width: 1100px) {
  /* Centred and kept to a single line — a two-line top bar would eat back
     part of the vertical space the redesign just freed up. */
  .cshp-topbar__inner {
    justify-content: center;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 5px 12px;
  }
  .cshp-topbar__hours {
    font-size: 10.5px; gap: 4px;
    min-width: 0;
  }
  .cshp-topbar__hours > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cshp-topbar__wa {
    padding: 5px 11px; font-size: 10.5px; gap: 5px;
    flex: 0 0 auto;
  }
  .cshp-topbar__wa svg { width: 13px; height: 13px; }
}

/* ========================================
   SALONES BOTTOM SHEET
   ======================================== */
.cshp-salon-nav { cursor: pointer; touch-action: manipulation; }

/* Merchant prints its mobile navigation bar on every request, but the stylesheet
   that pins it to the bottom of the screen (inc/mobile/assets/style.css) is only
   enqueued for mobile user agents — on desktop the bar lands as a plain static
   row at the end of the document.
   That same mobile pass is what adds `navigation-bar-standard` to .site-footer,
   so its absence is an exact signal that the bar is unstyled and must go. The
   width query is the second half: a tablet in landscape gets the mobile CSS but
   is already wide enough for the desktop nav. */
body:has(.site-footer:not(.navigation-bar-standard)) .wplb-navigation-bar,
body:has(.site-footer:not(.navigation-bar-standard)) #wplb-navigation-bar {
  display: none !important;
}
@media (min-width: 1101px) {
  .wplb-navigation-bar,
  #wplb-navigation-bar { display: none !important; }
}

.cshp-salon-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 1102; /* above .wplb-navigation-bar__standard's z-index:1100, or the bottom
                     nav bar covers the sheet's own bottom content (2nd salon entry) */
  max-height: 78vh;
  display: flex; flex-direction: column;
  background: var(--cshp-bg);
  border-top: 1px solid var(--cshp-line);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -12px 32px rgba(0,0,0,.14);
  transform: translateY(100%);
  transition: transform .3s ease;
  visibility: hidden;
}
.cshp-salon-sheet.is-open { transform: translateY(0); visibility: visible; }
.cshp-salon-sheet__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--cshp-gutter) 12px;
  border-bottom: 1px solid var(--cshp-line);
}
.cshp-salon-sheet__title {
  font-family: var(--cshp-serif);
  font-size: 20px; letter-spacing: 0.06em;
}
.cshp-salon-sheet__body {
  flex: 1; overflow-y: auto;
  padding: 0 var(--cshp-gutter) 20px;
  -webkit-overflow-scrolling: touch;
}
.cshp-salon { border-bottom: 1px solid var(--cshp-line); }
.cshp-salon__head {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 0;
  background: transparent; border: 0; text-align: left; cursor: pointer;
  color: var(--cshp-ink);
  touch-action: manipulation;
  white-space: normal; /* buttons default to white-space:nowrap in the UA stylesheet,
                           which was stopping the address/hours text from wrapping */
}
/* min-width:0 lets the long address wrap instead of pushing the chevron out */
.cshp-salon__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cshp-salon__name {
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.cshp-salon__meta { font-size: 12px; color: var(--cshp-ink-3); line-height: 1.4; }
/* pointer-events:none — same reasoning as .cshp-mobile-sub-toggle svg above:
   a tap must always land on the <button>, never on this rotating icon. This
   is likely the real cause of the client-reported "double tap to open" bug. */
.cshp-salon__chev { flex: 0 0 auto; transition: transform .2s ease; color: var(--cshp-ink-2); pointer-events: none; }
.cshp-salon__head[aria-expanded="true"] .cshp-salon__chev { transform: rotate(180deg); }

.cshp-salon__panel { display: none; padding: 0 0 18px; }
.cshp-salon__panel.is-open { display: block; }
.cshp-salon__services { list-style: none; margin: 0 0 14px; padding: 0; }
.cshp-salon__services a {
  display: block; padding: 11px 0 11px 14px;
  border-bottom: 1px solid var(--cshp-line);
  font-size: 13px; color: var(--cshp-ink-2);
}
.cshp-salon__services a:hover { color: var(--cshp-accent); }
.cshp-salon__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cshp-hf-wrap .cshp-btn--wa {
  background: #25d366; color: #0a2e18; border-color: #25d366;
  display: inline-flex; align-items: center; gap: 8px;
}
.cshp-hf-wrap .cshp-btn--wa:hover { background: #1da851; border-color: #1da851; color: #0a2e18; }

.cshp-salon-overlay {
  position: fixed; inset: 0; z-index: 1101;
  background: rgba(26,22,18,0.4); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.cshp-salon-overlay.is-open { opacity: 1; visibility: visible; }

/* ========================================
   FOOTER LINK COLUMNS — collapsible on mobile
   ======================================== */
/* Selectors are qualified with .cshp-footer on purpose: the base rules
   (.cshp-footer h4, .cshp-footer ul) are tag+class and would otherwise win. */
/* Типографику заголовка задаём здесь явно. Общее правило `.cshp-footer h4`
   на него не распространяется: колонки переведены на <details>, и заголовок
   теперь <summary>, а не <h4>. Из-за этого он временно ехал крупным шрифтом
   и вплотную к первому пункту — margin-bottom тоже жил в том правиле. */
.cshp-footer .cshp-footer__col-title {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--cshp-mono);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--cshp-ink);
  margin: 0 0 20px;
  border-bottom: 1px solid #5b5249;
  padding-bottom: 10px;
}
/* Ссылка наследует вид заголовка: без этого её перебивает общее
   `.cshp-footer a { font-size: 14px; color: ink-2 }`. */
.cshp-footer .cshp-footer__col-link {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  transition: color .2s ease;
}
.cshp-footer .cshp-footer__col-link:hover { color: var(--cshp-accent); }

/* Переключатель колонки.
   На десктопе его нет вовсе: колонки там не сворачиваются, а оставленный
   чекбокс был бы мёртвой остановкой в табуляции — и без доступного имени,
   потому что видимая часть (<label> с шевроном) на этой ширине скрыта.
   На мобиле он появляется: невидимый, но в потоке и в табуляции, чтобы
   колонку можно было раскрыть с клавиатуры. */
.cshp-footer .cshp-footer__acc-toggle { display: none; }

.cshp-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.cshp-footer .cshp-footer__col-chev { display: none; flex: 0 0 auto; transition: transform .2s ease; }

@media (max-width: 900px) {
  .cshp-footer .cshp-footer__acc-toggle {
    display: block;
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
  }
  .cshp-footer .cshp-footer__col-title {
    margin: 0; padding: 14px 0;
    border-bottom: 0;
  }
  .cshp-footer .cshp-footer__col { border-bottom: 1px solid var(--cshp-line); }
  /* Шеврон разворачивает список (по заголовку уходим на страницу филиала),
     поэтому ему нужна человеческая зона нажатия. */
  .cshp-footer .cshp-footer__col-chev {
    display: block; cursor: pointer;
    box-sizing: content-box;
    padding: 12px; margin: -12px -12px -12px 0;
  }
  .cshp-footer .cshp-footer__acc-toggle:checked ~ .cshp-footer__col-title .cshp-footer__col-chev { transform: rotate(180deg); }
  /* Фокус приходит на скрытый чекбокс — показываем его на шевроне, иначе
     клавиатурный пользователь не понимает, где находится. */
  .cshp-footer .cshp-footer__acc-toggle:focus-visible ~ .cshp-footer__col-title .cshp-footer__col-chev {
    outline: 2px solid currentColor; outline-offset: 2px;
  }
  .cshp-footer .cshp-footer__col-list { display: none; padding-bottom: 16px; }
  .cshp-footer .cshp-footer__acc-toggle:checked ~ .cshp-footer__col-list { display: flex; }
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1100px) {
  .cshp-nav--desktop { display: none; }
  .cshp-mobile-toggle { display: inline-flex; }
  /* Mobile header: logo centered, only burger right */
  .cshp-header__tools .cshp-icon-btn:not(.cshp-mobile-toggle) { display: none; }
  .cshp-header__tools .cshp-lang { display: none; }
  .cshp-header__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 16px var(--cshp-gutter);
  }
  .cshp-header__tools {
    position: absolute;
    right: var(--cshp-gutter);
    top: 50%;
    transform: translateY(-50%);
  }
  .cshp-footer__grid { grid-template-columns: 1fr 1fr; }

  /* Promo slider mobile */
  .cshp-promo__slide {
    white-space: normal;
    font-size: 10px;
    line-height: 1.3;
    letter-spacing: 0.06em;
    padding: 0 24px;
  }
}
@media (max-width: 640px) {
  /* Stacked columns don't need the 48px desktop gutter between them, and the
     collapsed link lists already carry their own separators. */
  .cshp-footer { padding: 48px 0 24px; }
  .cshp-footer__grid { grid-template-columns: 1fr; gap: 20px; padding-bottom: 32px; }
  .cshp-footer__bottom { flex-direction: column; gap: 16px; text-align: center; }
}

/* ========================================
   Hide theme's original header/footer when overridden
   ======================================== */
body:has(.cshp-header) .merchant-header,
body:has(.cshp-header) .site-header > *:not(.cshp-hf-wrap),
body:has(.cshp-header) #topbar.topbar,
body:has(.cshp-header) .topbar-mobile {
  display: none !important;
}
body:has(.cshp-footer) .site-footer > *:not(.cshp-hf-wrap) {
  display: none !important;
}

/* ---------- Кнопки WooCommerce: цвет из нашего токена --cshp-accent-deep
   + без закругления. Перекрывает dynamic CSS темы Merchant
   (сustom_color_for_standard_buttons_bg + catalog_all_radius).
   Префикс body поднимает специфичность выше правил темы с !important. ---------- */
body .single-product div.product .product-button-wrapper .single_add_to_cart_button,
body .woocommerce-cart .cart-collaterals .wc-proceed-to-checkout a.button,
body .woocommerce-checkout .woocommerce-checkout-payment .place-order button,
body .return-to-shop .wc-backward,
body ul.products.mobile-show-atc li.product .product-summary .wplb-loop_atc_button,
body .widget_shopping_cart_content .woocommerce-mini-cart__buttons a:first-child,
body .ra-account-modal .merchant-button:not(.button-outline),
body .products-filter__control-buttons .button:first-child,
body .single-product div.product .woocommerce-Reviews .comment-respond .form-submit .submit {
  background-color: var(--cshp-accent-deep, #5e2a3a) !important;
  border-color: var(--cshp-accent-deep, #5e2a3a) !important;
  border-radius: 0 !important;
}

/* .button-outline is the "switch to register/login" pseudo-button inside the
   modal — it must stay transparent with a colored border, or it reads as a
   second, indistinguishable solid button next to the real submit button. */
body .ra-account-modal .merchant-button.button-outline {
  background-color: transparent !important;
  border-color: var(--cshp-accent-deep, #5e2a3a) !important;
  color: var(--cshp-accent-deep, #5e2a3a) !important;
  border-radius: 0 !important;
}

/* Ховер тех же кнопок: светлее (наш accent), чтобы кремовый текст читался.
   Перекрывает тёмный #1c0600 из dynamic CSS темы. */
body .single-product div.product .product-button-wrapper .single_add_to_cart_button:hover,
body .woocommerce-cart .cart-collaterals .wc-proceed-to-checkout a.button:hover,
body .woocommerce-checkout .woocommerce-checkout-payment .place-order button:hover,
body .return-to-shop .wc-backward:hover,
body ul.products.mobile-show-atc li.product .product-summary .wplb-loop_atc_button:hover,
body .widget_shopping_cart_content .woocommerce-mini-cart__buttons a:first-child:hover,
body .ra-account-modal .merchant-button:hover,
body .products-filter__control-buttons .button:first-child:hover,
body .single-product div.product .woocommerce-Reviews .comment-respond .form-submit .submit:hover {
  background-color: var(--cshp-accent, #af6a7c) !important;
  border-color: var(--cshp-accent, #af6a7c) !important;
  color: #f3ecdf !important;
  border-radius: 0 !important;
}

/* Разделитель под хлебными крошками (Merchant #page-header) */
#page-header.page-header {
  border-bottom: 1px solid var(--cshp-line, #ddd4c6);
}

/* ============================================================
   ПОЛОСА ФИЛИАЛОВ ПОД ШАПКОЙ (.cshp-svcbar)
   Три центра с мега-меню услуг. Заменила промо-полосу на главной
   и разгрузила основное меню: услуги туда перестали помещаться.

   Без единой строки JS: CookieYes вырезает наши скрипты до согласия
   на cookie, и любой JS-дропдаун был бы мёртв для тех, кто баннер
   отклонил или проигнорировал (см. CLAUDE.md).

   Ключевое в разметке: панель — СОСЕД <details>, а не его потомок.
   Потомка браузер прячет теневым слотом, до которого CSS не дотягивается
   (проверено: display и content-visibility на потомке не дают ничего),
   и раскрытие по наведению было бы невозможно. Соседом управляем сами:
     [open] + панель  — клик и тап
     :hover           — мышь
     :focus-within    — клавиатура

   Правила в конце файла намеренно: медиазапросы выше переопределили бы часть.
   ============================================================ */
.cshp-svcbar {
  position: relative;
  z-index: 80;
  background: var(--cshp-accent-deep);
  color: #f3ecdf;
}
/* Свои размеры контейнера, а не класс .cshp-container: тот определён
   в скоупах шаблонов (.cshp-service .cshp-container и т.д.) плюс один раз
   без скоупа в homepage.css, поэтому вне главной полоса его не получала. */
.cshp-svcbar__inner {
  position: relative;
  width: 100%;
  max-width: var(--cshp-container);
  margin: 0 auto;
  padding: 0 var(--cshp-gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 4px;
}
.cshp-svcbar__item { position: static; }
.cshp-svcbar__toggle { display: block; }

.cshp-svcbar__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 13px 18px;
  font-family: var(--cshp-mono, inherit);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f3ecdf;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  transition: background-color .2s ease;
}
.cshp-svcbar__link::-webkit-details-marker { display: none; }
.cshp-svcbar__link::marker { content: ''; }
.cshp-svcbar__link:hover,
.cshp-svcbar__link:focus-visible { background: rgba(243, 236, 223, 0.12); color: #fff; }

.cshp-svcbar__toggle > .cshp-svcbar__link::after {
  content: '';
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}

/* ── Открытие ── */
.cshp-svcbar__panel { display: none; }
.cshp-svcbar__toggle[open] + .cshp-svcbar__panel { display: block; }
.cshp-svcbar__toggle[open] > .cshp-svcbar__link { background: rgba(243, 236, 223, 0.16); color: #fff; }
.cshp-svcbar__toggle[open] > .cshp-svcbar__link::after { transform: translateY(1px) rotate(-135deg); }

/* Мега-меню по ширине контейнера, а не окна: на широком экране панель во всю
   ширину растягивала три колонки на два метра пустоты. Под конкретную пилюлю
   не вешаем — списки у филиалов разной длины, крайняя уезжала бы за экран. */
.cshp-svcbar__panel {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: var(--cshp-surface);
  color: var(--cshp-ink);
  border: 1px solid var(--cshp-line);
  border-top: 0;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.10);
  /* Нижнего отступа у панели нет — его целиком даёт подвал. Иначе он спорит
     со `sticky bottom: 0`: липкий элемент прижимается ко дну прокручиваемой
     области, а padding-bottom это дно опускает, и подвал уезжал вверх
     на величину отступа, садясь на последний пункт списка.
     Боковой отступ в переменной: подвал гасит его отрицательным margin,
     чтобы фон и линейка шли во всю ширину, а не по колонке текста. */
  --svcbar-px: 32px;
  --svcbar-pb: 30px;
  padding: 26px var(--svcbar-px) 0;
  max-height: min(70vh, 560px);
  overflow-y: auto;
}
/* Блок, а не inline-block: только так text-align прижмёт ссылку к правому краю
   панели. Подчёркивание при этом — text-decoration, а не border-bottom: рамка
   у блока растянулась бы на всю ширину и превратилась во вторую линейку.
   Квалификация `.cshp-hf-wrap` обязательна: `.cshp-hf-wrap a` (0,1,1) бьёт
   одиночный класс (0,1,0) и глушит и color, и text-decoration. В прежней
   версии правила по этой же причине не работал ни заявленный accent-deep,
   ни подчёркивание — оно там было нарисовано border-bottom в обход. */
.cshp-hf-wrap .cshp-svcbar__all {
  display: block;
  /* Липнет ко дну панели: на телефоне список в одну колонку не влезает
     в max-height, панель прокручивается, и ссылка в конце потока оказалась
     бы за пределами видимой части — то есть менее доступной, чем была
     сверху. Sticky держит её на нижнем крае при любой прокрутке. */
  position: sticky;
  bottom: 0;
  margin: 22px calc(var(--svcbar-px) * -1) 0;
  padding: 16px var(--svcbar-px) var(--svcbar-pb);
  background: var(--cshp-surface);
  border-top: 1px solid var(--cshp-line);
  text-align: right;
  font-family: var(--cshp-mono, inherit);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cshp-accent-deep);
  text-decoration: underline;
  text-decoration-color: var(--cshp-accent);
  text-underline-offset: 4px;
}
.cshp-hf-wrap .cshp-svcbar__all:hover {
  color: var(--cshp-ink);
  text-decoration-color: currentColor;
}

.cshp-svcbar__list {
  list-style: none;
  margin: 0; padding: 0;
  columns: 3;
  column-gap: 40px;
}
.cshp-svcbar__list > li { break-inside: avoid; margin: 0 0 10px; }
/* Маркеры по тому же паттерну, что и везде. Заголовку группы точка не нужна —
   он не пункт перечисления, а подзаголовок, и его список уже отбит линией. */
.cshp-svcbar__list > li:not(.cshp-svcbar__group) { position: relative; padding-left: 16px; }
.cshp-svcbar__list > li:not(.cshp-svcbar__group)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cshp-accent);
  transition: transform .2s ease;
}
.cshp-svcbar__list > li:not(.cshp-svcbar__group):hover::before { transform: scale(1.4); }
.cshp-svcbar__sublist li { position: relative; padding-left: 14px; }
.cshp-svcbar__sublist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cshp-ink-3);
}
.cshp-svcbar__list a {
  display: block;
  padding: 5px 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--cshp-ink-2);
  text-decoration: none;
}
.cshp-svcbar__list a:hover { color: var(--cshp-accent-deep); }
.cshp-svcbar__group > a { font-weight: 600; color: var(--cshp-ink); }
.cshp-svcbar__sublist {
  list-style: none;
  margin: 2px 0 0;
  padding: 0 0 0 12px;
  border-left: 1px solid var(--cshp-line);
}
.cshp-svcbar__sublist a { font-size: 13px; padding: 4px 0; }

/* Раскрытие по наведению — только там, где есть настоящий курсор.
   (hover: hover) and (pointer: fine) отсекает тач: на телефоне :hover
   залипает после тапа и панель не закрылась бы. */
@media (hover: hover) and (pointer: fine) {
  .cshp-svcbar__item:hover > .cshp-svcbar__panel,
  .cshp-svcbar__item:focus-within > .cshp-svcbar__panel { display: block; }
  .cshp-svcbar__item:hover > .cshp-svcbar__toggle > .cshp-svcbar__link,
  .cshp-svcbar__item:focus-within > .cshp-svcbar__toggle > .cshp-svcbar__link {
    background: rgba(243, 236, 223, 0.16);
    color: #fff;
  }
  .cshp-svcbar__item:hover > .cshp-svcbar__toggle > .cshp-svcbar__link::after,
  .cshp-svcbar__item:focus-within > .cshp-svcbar__toggle > .cshp-svcbar__link::after {
    transform: translateY(1px) rotate(-135deg);
  }
  /* Пока курсор в полосе, показываем только то, на что наведено: иначе панель,
     оставшаяся открытой от предыдущего клика, наложилась бы на текущую. */
  .cshp-svcbar__inner:hover .cshp-svcbar__item:not(:hover):not(:focus-within) > .cshp-svcbar__panel {
    display: none;
  }
}

@media (max-width: 1100px) {
  .cshp-svcbar__list { columns: 2; column-gap: 28px; }
}
@media (max-width: 640px) {
  .cshp-svcbar__inner { gap: 0; }
  .cshp-svcbar__link {
    padding: 11px 12px;
    font-size: 10px;
    letter-spacing: 0.06em;
  }
  /* На мобиле контейнер и так во всю ширину экрана (его gutter — внутренний
     padding), поэтому панели хватает left/right: 0. Отрицательные отступы тут
     выталкивают её за вьюпорт и дают горизонтальный скролл. */
  .cshp-svcbar__panel {
    --svcbar-px: var(--cshp-gutter);
    --svcbar-pb: 22px;
    padding: 18px var(--svcbar-px) 0;
    border-left: 0;
    border-right: 0;
  }
  .cshp-svcbar__list { columns: 1; }
  .cshp-svcbar__list a { padding: 7px 0; }
}

/* ============================================================
   КАРТОЧКИ ЦЕНТРОВ (.cshp-locations / .cshp-loc)
   Живут здесь, а не в homepage.css, потому что этот файл грузится
   на всех шаблонах: один и тот же блок стоит и на главной, и на
   страницах услуг («Elige tu centro»). Разметку печатает общий
   cshp_render_locations() в cosmetic-homepage.php.

   Токены (--cshp-accent и прочие) объявлены в каждом шаблоне свои
   и подхватываются из скоупа страницы — здесь их не задаём.
   ============================================================ */
.cshp-loc__map { position: relative; overflow: hidden; }
.cshp-loc__map::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(26,22,18,0) 60%, rgba(26,22,18,0.06) 100%);
}
.cshp-loc__map .cshp-img-cover { position: absolute; inset: 0; }
/* Три колонки по эталону Homepage.html. Было 1fr 1fr — при трёх филиалах
   третья карточка висела одна во втором ряду. */
.cshp-locations {
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start;
}
.cshp-loc {
  background: var(--cshp-surface);
  border: 1px solid var(--cshp-line);
  overflow: hidden;
  display:flex; flex-direction: column;
}
.cshp-loc__map { aspect-ratio: 4/3; position: relative; overflow: hidden; }
/* Заглушка вместо фото центра: брендовая панель с логотипом. Ставится там,
   где снимка ещё нет, чтобы сетка не разъезжалась. Намеренно не имитирует
   фотографию — это графика, а не «интерьер, которого нет». */
.cshp-loc__map--ph {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--cshp-bg-2) 0%, var(--cshp-surface) 55%, var(--cshp-bg-2) 100%);
  border-bottom: 1px solid var(--cshp-line);
}
.cshp-loc__map--ph img { width: 42%; max-width: 150px; height: auto; opacity: 0.14; }
/* Виньетка от общего правила .cshp-loc__map::after на плоской заливке лишняя. */
.cshp-loc__map--ph::after { display: none; }
/* Слот фото кликабелен — ведёт на страницу филиала. Лёгкий наезд картинки
   на наведении: единственный намёк, что это ссылка, надписи тут нет. */
a.cshp-loc__map--link { display: block; }
/* Заглушка центрирует логотип флексом, а правило выше (0,1,1) перебивало
   её display: flex (0,1,0) — логотип уезжал в угол. Возвращаем явно. */
a.cshp-loc__map--link.cshp-loc__map--ph { display: flex; align-items: center; justify-content: center; }
.cshp-loc__map--link .cshp-img-cover,
.cshp-loc__map--link img { transition: transform .45s cubic-bezier(.2,.6,.2,1); }
.cshp-loc__map--link:hover .cshp-img-cover { transform: scale(1.04); }
.cshp-loc__map--link.cshp-loc__map--ph:hover img { transform: scale(1.06); opacity: .2; }
.cshp-loc__map--ph img { transition: transform .45s cubic-bezier(.2,.6,.2,1), opacity .3s ease; }
@media (prefers-reduced-motion: reduce) {
  .cshp-loc__map--link .cshp-img-cover,
  .cshp-loc__map--link img { transition: none; }
  .cshp-loc__map--link:hover .cshp-img-cover,
  .cshp-loc__map--link.cshp-loc__map--ph:hover img { transform: none; }
}
.cshp-loc__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.cshp-loc__body { padding: 26px 26px 34px; display:flex; flex-direction: column; gap: 14px; flex: 1; }
.cshp-loc__tag { font-family: var(--cshp-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cshp-accent-text); }
.cshp-loc__name { font-family: var(--cshp-sans); font-weight: 500; font-size: 26px; margin: 0; line-height: 1.05; letter-spacing: -0.03em; }
.cshp-loc__addr { color: var(--cshp-ink-2); line-height: 1.6; font-size: 14px; }
.cshp-loc__addr strong { color: var(--cshp-ink); font-weight: 500; }
.cshp-loc__list { display:grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 13px; }
.cshp-loc__list dt { color: var(--cshp-ink-3); font-family: var(--cshp-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; padding-top: 2px; }
.cshp-loc__list dd { margin: 0; color: var(--cshp-ink); }
/* Зелёная кнопка WhatsApp — те же цвета, что на страницах услуг
   (.cshp-service .cshp-btn--whatsapp в service.css). Пульсации тут нет:
   она зарезервирована за главными CTA страницы услуги. */
.cshp-homepage .cshp-btn--whatsapp {
  background: #25d366;
  border-color: #25d366;
  color: #0a2e18;
  gap: 10px;
}
/* Подпись во вложенном <span> иначе наследует светлый цвет базовой .cshp-btn. */
.cshp-homepage .cshp-btn--whatsapp span { color: inherit; }
.cshp-homepage .cshp-btn--whatsapp:hover { background: #1ebe5b; border-color: #1ebe5b; }
.cshp-homepage .cshp-btn__icon { flex-shrink: 0; }

.cshp-loc__cta { display:flex; gap: 12px; margin-top: 12px; align-items: center; }
.cshp-loc__rating {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 10px 0 4px;
}
/* Жёлтый как у Google (#fbbc04) — рейтинг взят из Google Business Profile,
   и привычный цвет звёзд сразу считывается как «оценка оттуда», а не как
   наша собственная. Единственное место на сайте, где мы намеренно выходим
   из фирменной палитры. */
.cshp-stars { color: #fbbc04; font-size: 15px; letter-spacing: 2px; line-height: 1; }
.cshp-loc__rating-val { font-weight: 700; font-size: 15px; }
/* Счётчик отзывов — ссылка в карточку Google. Отдельную строку
   «Ver reseñas en Google» убрали: два элемента вели в одно место. */
.cshp-loc__rating-count { font-size: 12px; color: var(--cshp-ink-3); text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; }
a.cshp-loc__rating-count:hover { color: var(--cshp-accent); border-bottom-color: var(--cshp-accent); }
/* Пояснение для центра, у которого ещё нет отзывов. */
.cshp-loc__note { font-size: 13px; line-height: 1.6; color: var(--cshp-ink-3); margin: 0; }
.cshp-loc__services {
  font-size: 13px; line-height: 1.5; color: var(--cshp-ink-2);
  margin: 6px 0 14px;
}


@media (max-width: 1100px) {
  .cshp-locations { grid-template-columns: repeat(2, 1fr); }
  .cshp-loc__map { aspect-ratio: 16/10; }
}
@media (max-width: 640px) {
  .cshp-locations { grid-template-columns: 1fr; }
  .cshp-loc__body { padding: 24px; }
}


/* ========================================
   CTA «¿Lista para el cambio?»
   ----------------------------------------
   Живёт здесь, а не в service.css: блок выводится из footer.php на всех
   шаблонах, а service.css грузится только на страницах услуг. Токены берутся
   из своей обёртки .cshp-hf-wrap, см. cshp_render_cta().
   Класс с приставкой svc- оставлен историческим — переименование задело бы
   пользовательский CSS, который может лежать в базе.
   ======================================== */

/* Базовая типографика внутри блока. Снаружи .cshp-service её нет: .cshp-display,
   .cshp-h2, .cshp-body-lg и .cshp-eyebrow объявлены в скоупах шаблонов, а этот
   блок теперь выводится на всех. Значения — копия сервисных, чтобы блок выглядел
   одинаково на странице услуги и на любой другой.
   Порядок важен: цветовые правила .cshp-svc-cta ниже перебивают эти по позиции
   в файле, специфичность у них одинаковая. */
.cshp-svc-cta .cshp-display {
  font-family: var(--cshp-serif); font-weight: 400;
  line-height: 0.98; letter-spacing: -0.01em;
  color: var(--cshp-ink); margin: 0;
}
.cshp-svc-cta .cshp-h2 { font-size: clamp(32px, min(4vw, 5.6vh), 64px); }
.cshp-svc-cta .cshp-body-lg { font-size: 17px; line-height: 1.6; color: var(--cshp-ink-2); margin: 0; }
.cshp-svc-cta .cshp-eyebrow {
  font-family: var(--cshp-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
  color: var(--cshp-ink-2);
  display: block; margin-bottom: 16px;
}
/* Кнопки: .cshp-hf-wrap .cshp-btn растягивает на всю ширину — это нужно колонкам
   футера, но не центрированной паре кнопок здесь. Возвращаем сервисные размеры. */
.cshp-svc-cta .cshp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 26px;
  width: auto; gap: 10px;
  font-family: var(--cshp-sans);
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500;
  border-radius: 0;
  transition: background .2s ease, border-color .2s ease;
}
.cshp-svc-cta .cshp-btn__icon { flex-shrink: 0; }
.cshp-svc-cta {
  background: var(--cshp-accent-deep);
  padding: 120px 0;
  text-align: center;
  color: #d9cdb8;
}
.cshp-svc-cta__inner {
  max-width: 680px;
  margin: 0 auto;
}
.cshp-svc-cta .cshp-eyebrow { color: #c4b0a8; }   /* было rgba(…,0.6) = 3,61:1 на марсале; сплошной тон даёт 5,42:1 */
.cshp-svc-cta .cshp-display { color: #f3ecdf; margin-bottom: 20px; }
.cshp-svc-cta .cshp-body-lg { color: #d9cdb8; margin-bottom: 40px; }

.cshp-svc-cta__actions {
  display: flex; gap: 16px;
  justify-content: center; flex-wrap: wrap;
}
.cshp-svc-cta .cshp-btn {
  background: #f3ecdf; color: var(--cshp-accent-deep);
  border-color: #f3ecdf;
}
.cshp-svc-cta .cshp-btn:hover {
  background: var(--cshp-accent); color: #f3ecdf;
  border-color: var(--cshp-accent);
}
.cshp-svc-cta .cshp-btn--ghost {
  background: transparent; color: #d9cdb8;
  border-color: rgba(217,205,184,0.3);
}
.cshp-svc-cta .cshp-btn--ghost:hover {
  background: rgba(243,236,223,0.1); color: #f3ecdf;
  border-color: rgba(243,236,223,0.5);
}

/* Свои размеры контейнера: .cshp-container объявлен в скоупах шаблонов
   (.cshp-service .cshp-container и т.д.), снаружи его нет. */
.cshp-svc-cta .cshp-container {
  width: 100%;
  max-width: var(--cshp-container);
  margin: 0 auto;
  padding: 0 var(--cshp-gutter);
}

@media (max-width: 1100px) {
  .cshp-svc-cta { padding: 72px 0; }
}
@media (max-width: 640px) {
  .cshp-svc-cta { padding: 40px 0; }
  .cshp-svc-cta .cshp-h2 { font-size: clamp(23px, 6.4vw, 28px); line-height: 1.12; }
  .cshp-svc-cta__actions { flex-direction: column; align-items: center; }
    .cshp-svc-cta .cshp-btn,
    .cshp-svc-cta .cshp-btn--ghost { width: 100%; max-width: 320px; }
}
@media (max-width: 380px) {
  .cshp-svc-cta .cshp-h2 { font-size: 21px; }
}

/* ========================================
   Контраст в разметке темы Merchant
   ----------------------------------------
   Правим отсюда, а не в файлах темы: обновление темы их перезапишет.
   Хлебные крошки шли #909090 по белому — 3,19:1 при норме 4,5:1.
   ======================================== */
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a { color: #6f6f6f; }