/* promo-card.css — СОГЛАСОВАННЫЙ компонент карточки акции (источник: promo.html 640-1019). Используется promo.html И chelny.html. Править только здесь. */
  .card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
  }
  .card:hover {
    transform: translateY(-4px);
    border-color: var(--gold);
    box-shadow: 0 16px 44px rgba(139, 111, 44, 0.16), 0 4px 12px rgba(0,0,0,0.06);
  }
  .card.featured {
    background: linear-gradient(155deg, var(--ink-warm) 0%, var(--ink) 60%, #0F0D08 100%);
    color: #fff;
    border-color: var(--gold);
    box-shadow: 0 12px 36px rgba(139, 111, 44, 0.25);
  }
  .card.featured:hover { box-shadow: 0 22px 52px rgba(139, 111, 44, 0.38); }
  .card-img {
    aspect-ratio: 16/10;
    overflow: hidden;
    position: relative;
    background: #fff;
  }
  .card-img::after {
    content: '';
    position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(135deg, rgba(184,148,95,0.08) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.28s ease;
    pointer-events: none;
  }
  .card:hover .card-img::after { opacity: 1; }
  .card-img img, .card-img picture, .card-img source { position: relative; z-index: 1; }
  .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.55s ease;
  }
  .card:hover .card-img img { transform: scale(1.06); }
  /* Плейсхолдер для акции без фото — брендовый градиент + вордмарк (карточки одной высоты) */
  .card-img--ph {
    aspect-ratio: 16/7;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #F7EFE2 0%, #EFE3CC 55%, #E7D4B0 100%);
  }
  .card-img--ph .ph-mark {
    font-family: 'Cormorant Garamond', 'Manrope', serif;
    font-size: clamp(22px, 4.4vw, 30px);
    font-weight: 600;
    color: var(--gold-deep);
    opacity: 0.6;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
  .card.featured .card-img--ph { background: linear-gradient(135deg, #2b2519 0%, #1a1510 100%); }
  .card.featured .card-img--ph .ph-mark { color: var(--gold-light); opacity: 0.7; }
  /* Города акции — стопка пилюль в правом верхнем углу (−X% слева, города справа) */
  .promo-cities {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }
  .promo-city {
    z-index: 3;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(8px);
    color: var(--ink);
    padding: 7px 12px;
    border-radius: 100px;
    font: 600 11px/1 'Manrope', sans-serif;
    letter-spacing: .01em;
    border: 1px solid rgba(184,148,95,.35);
    box-shadow: 0 2px 8px rgba(60,50,20,.12);
    white-space: nowrap;
  }
  @media (max-width: 540px) {
    .promo-cities { top: 10px; right: 10px; gap: 5px; }
    .promo-city { padding: 5px 9px; font-size: 10px; }
  }
  /* Бейдж города на карточке — ПОЛНОСТЬЮ ЗАЛИТ (насыщенный цвет + белый текст), не сливается */
  .promo-city.city-kazan  { background:#C49A4C; color:#fff; border-color:rgba(0,0,0,.06); }
  .promo-city.city-chelny { background:#B5573B; color:#fff; border-color:rgba(0,0,0,.06); }
  .promo-city.city-moscow { background:#2E7468; color:#fff; border-color:rgba(0,0,0,.06); }
  .promo-city.city-all    { background:#5B564E; color:#fff; border-color:rgba(0,0,0,.06); }
  .badge-stack {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .badge {
    position: relative;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(8px);
    color: var(--ink);
    padding: 7px 13px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
  }
  .card-img > .badge { position: absolute; top: 14px; left: 14px; z-index: 3; }
  .badge.disc {
    background: linear-gradient(135deg, #E8444A 0%, #C42A30 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: 0 3px 10px rgba(196,42,48,0.45);
  }
  .badge.big {
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-deep) 100%);
    color: #fff;
    font-size: 13px;
    padding: 9px 16px;
    box-shadow: 0 4px 14px rgba(139,111,44,0.45);
  }
  .badge.is-hit     { background: linear-gradient(135deg,#F5A623 0%,#E07B0A 100%); color:#fff; box-shadow:0 3px 10px rgba(224,123,10,.42); }
  .badge.is-new     { background: linear-gradient(135deg,#27C3A0 0%,#1AA086 100%); color:#fff; box-shadow:0 3px 10px rgba(26,160,134,.38); }
  .badge.is-gift    { background: linear-gradient(135deg,#E8627A 0%,#C8415D 100%); color:#fff; box-shadow:0 3px 10px rgba(200,65,93,.38); }
  .badge.is-effect  { background: linear-gradient(135deg,#4DBD7F 0%,#389160 100%); color:#fff; box-shadow:0 3px 10px rgba(56,145,96,.38); }
  .badge.is-limit   { background: linear-gradient(135deg,#FF6B35 0%,#E34C1A 100%); color:#fff; box-shadow:0 3px 10px rgba(227,76,26,.42); }
  .badge.is-premium { background: linear-gradient(135deg,#9B6FD4 0%,#7B4EAA 100%); color:#fff; box-shadow:0 3px 10px rgba(123,78,170,.38); }
  .badge.is-choice  { background: linear-gradient(135deg,#F06292 0%,#D81B60 100%); color:#fff; box-shadow:0 3px 10px rgba(216,27,96,.38); }
  .badge.is-info    { background: linear-gradient(135deg,#5B8BA8 0%,#3E6D8A 100%); color:#fff; box-shadow:0 3px 10px rgba(62,109,138,.35); }
  .badge.is-geo     { background: linear-gradient(135deg,#C9A84C 0%,#A8872A 100%); color:#fff; box-shadow:0 3px 10px rgba(168,135,42,.38); }
  @media (max-width: 540px) {
    .badge-stack { top: 10px; left: 10px; gap: 5px; }
    .badge { padding: 6px 11px; font-size: 10.5px; }
    .badge.disc { font-size: 13px; }
  }
  .card-body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
  }
  /* Категория акции — крупный цветной чип (цвет задаёт .cat-cN) */
  .card-cat {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 5px 12px;
    border-radius: 100px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    background: var(--cream);
    color: var(--gold-deep);
  }
  /* 8 комплиментарных оттенков к кремово-золотому — мягкий тинт + глубокий текст */
  .cat-c0 { background:#FBEEE6; color:#AE5238; box-shadow:inset 0 0 0 1px #EBCDBB; }
  .cat-c1 { background:#EEF3EA; color:#52724A; box-shadow:inset 0 0 0 1px #D0DDC7; }
  .cat-c2 { background:#F2E9F0; color:#653F6B; box-shadow:inset 0 0 0 1px #DAC8D7; }
  .cat-c3 { background:#ECF0F2; color:#496577; box-shadow:inset 0 0 0 1px #CBD5DB; }
  .cat-c4 { background:#F8F1DF; color:#7A6320; box-shadow:inset 0 0 0 1px #EAD8AC; }
  .cat-c5 { background:#E6F2EF; color:#2C7065; box-shadow:inset 0 0 0 1px #C3E1DA; }
  .cat-c6 { background:#F6EBEF; color:#8C4F64; box-shadow:inset 0 0 0 1px #E6CCD4; }
  .cat-c7 { background:#F4ECE0; color:#80623A; box-shadow:inset 0 0 0 1px #E5D5B8; }
  .card.featured .card-cat { background: rgba(255,255,255,0.12); color: var(--gold-light); box-shadow:none; }
  .card-name {
    font-family: 'Manrope', sans-serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.35;
  }
  .card-desc {
    font-size: 13px;
    color: var(--gray);
    line-height: 1.5;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .card.featured .card-desc { color: rgba(255,255,255,0.7); }
  .card-prices {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 2px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    margin-top: 2px;
  }
  .card.featured .card-prices { border-color: rgba(255,255,255,0.15); }
  .price-new {
    font-family: 'Manrope', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
  }
  .price-old {
    font-size: 15px;
    color: var(--gray);
    text-decoration: line-through;
    white-space: nowrap;
  }
  .card.featured .price-old { color: rgba(255,255,255,0.45); }
  .price-save {
    margin-left: auto;
    font-size: 12px;
    color: var(--gold-deep);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .card.featured .price-save { color: var(--gold-light); }
  /* Карточка-группа препаратов: вместо цены — крупная скидка */
  .card-prices--disc { align-items: center; gap: 14px; }
  .price-disc {
    font-family: 'Manrope', sans-serif;
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, var(--gold-deep), var(--gold));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .price-disc-note { font-size: 12px; color: var(--gray); line-height: 1.35; max-width: 160px; }
  .card.featured .price-disc { background: linear-gradient(135deg, var(--gold-light), var(--gold)); -webkit-background-clip: text; background-clip: text; }
  .card.featured .price-disc-note { color: rgba(255,255,255,0.6); }
  .card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--gray);
  }
  .card.featured .card-meta { color: rgba(255,255,255,0.55); }
  .card-doctor {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    background: var(--cream);
    border-radius: 100px;
    font-size: 12px;
    color: var(--ink);
  }
  .card.featured .card-doctor { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.85); }
  .doctor-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #fff;
    font-weight: 600;
  }
  .card-cta {
    margin-top: auto;
    padding: 12px 20px;
    background: var(--ink);
    color: var(--gold-light);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    border: 1px solid var(--ink);
    transition: all 0.28s ease;
  }
  .card-cta:hover {
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    border-color: var(--gold);
    color: var(--ink);
  }
  .card.featured .card-cta {
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
    color: var(--ink);
    border-color: var(--gold);
    font-weight: 600;
  }
  .card.featured .card-cta:hover {
    background: #fff;
    color: var(--ink);
  }
  /* Футер карточки: «Подробнее» (ghost) + «Записаться» (primary) */
  .card-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .card-actions .card-cta { margin-top: 0; }
  .card-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 100px;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--gold-deep);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.25s;
  }
  .card-more:hover { border-color: var(--gold); background: var(--cream); color: var(--ink); }
  .card.featured .card-more { border-color: rgba(255,255,255,0.25); color: var(--gold-light); }
  .card.featured .card-more:hover { background: rgba(255,255,255,0.08); color: #fff; }

  /* ===== Модалка «Подробнее» (standalone-акции без отдельной страницы) ===== */
  .pd-overlay {
    position: fixed; inset: 0; z-index: 2000;
    display: none; align-items: center; justify-content: center;
    background: rgba(26,21,16,0.55); backdrop-filter: blur(4px);
    padding: 20px;
  }
  .pd-overlay.is-open { display: flex; }
  .pd-modal {
    background: #fff; border-radius: 24px; overflow: hidden;
    max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto;
    box-shadow: 0 30px 80px rgba(26,21,16,0.45);
    position: relative;
  }
  .pd-close {
    position: absolute; top: 14px; right: 14px; z-index: 4;
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,0.92); border: 1px solid var(--line);
    color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.2s;
  }
  .pd-close:hover { background: var(--ink); color: var(--gold-light); border-color: var(--ink); }
  .pd-img { aspect-ratio: 4/3; background: var(--cream); position: relative; }
  .pd-img img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
  .pd-body { padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 14px; }
  .pd-name { font-family: 'Manrope', sans-serif; font-size: 24px; font-weight: 400; line-height: 1.25; }
  /* Полное описание препарата/процедуры — форматированное (как в каталоге «Цены») */
  .pd-desc { font-size: 15px; line-height: 1.65; color: var(--gray); }
  .pd-desc > *:first-child { margin-top: 0; }
  .pd-desc p { margin: 0 0 10px; }
  .pd-desc strong { color: var(--ink); font-weight: 600; }
  .pd-desc .pd-shead {
    font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold-deep);
    margin: 18px 0 8px;
  }
  .pd-desc .pd-shead--sm { font-size: 12px; color: var(--gray); text-transform: none; letter-spacing: 0; }
  .pd-desc .pd-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  .pd-desc .pd-list li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.5; }
  .pd-desc .pd-list li::before {
    content: ''; position: absolute; left: 4px; top: 9px; width: 6px; height: 6px;
    border-radius: 50%; background: var(--gold);
  }
  .pd-desc .pd-olist { counter-reset: pdoli; }
  .pd-desc .pd-olist li { padding-left: 22px; }
  .pd-desc .pd-olist li::before {
    counter-increment: pdoli; content: counter(pdoli) '.'; top: 0; left: 0;
    width: auto; height: auto; border-radius: 0; background: none;
    color: var(--gold); font-weight: 700; font-size: 13.5px;
  }
  .pd-prices { display: flex; align-items: baseline; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
  .pd-prices .price-new { font-size: 32px; }
  .pd-modal .card-cta { margin-top: 6px; }
  /* Вся карточка кликабельна → «Подробнее» (кроме CTA/ссылок/кнопки More) */
  .card.is-clickable { cursor: pointer; }

  /* mobile-cta старый отключён 2026-05-20 — ломал отрисовку main на iOS */
  .mobile-cta, .mcta-tab { display: none !important; }
  /* Mobile pill nav — иконки + текст в брендовом стиле */
  .m-nav { display: none; }
  @media (max-width: 900px) {
    .m-nav {
      display: flex;
      position: fixed;
      left: 12px; right: 12px;
      bottom: calc(12px + env(safe-area-inset-bottom, 0px));
      z-index: 100;
      background: #1a1815;
      border-radius: 22px;
      padding: 8px 6px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.28);
      gap: 2px;
    }
    .m-nav a {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      padding: 6px 2px;
      color: #F4E4BC;
      text-decoration: none;
      font: 600 10.5px/1 'Manrope', 'Inter', sans-serif;
      letter-spacing: 0.01em;
      border-radius: 14px;
      transition: background 0.15s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .m-nav a svg { width: 22px; height: 22px; color: #C9A87C; stroke-width: 2; }
    .m-nav a:active { background: rgba(184,148,95,0.22); }
    footer { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
  }
    display: flex; align-items: center; justify-content: center;
    min-height: 52px;
    background: linear-gradient(135deg, #2b2519, var(--ink));
    color: var(--gold-light);
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 13px;
    text-decoration: none;
    transition: transform 0.2s;
  }
  .mcta-main:active { transform: scale(0.98); }
  .mcta-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
  .mcta-mini {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px;
    min-height: 52px;
    padding: 6px 4px;
    border-radius: 10px;
    background: var(--cream);
    color: var(--ink);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.2s;
  }
  .mcta-mini:active { transform: scale(0.95); }
  .mcta-mini svg { width: 18px; height: 18px; }
  .mcta-mini img { width: 18px; height: 18px; border-radius: 4px; }
  .mcta-call { background: var(--gold); color: #fff; }
  .mcta-tg svg { color: #229ED9; }
  .mcta-wa svg { color: #25D366; }