/* СТРОКА ЛЕГЕНДЫ (КРУЖКИ) */
.kp-map-legend{
  margin:0px 0 8px;
  display:grid;
  gap:6px;
  padding:10px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:10px;
  background:#fff;
  font:500 14px/1.25 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
.kp-map-legend__item{ display:flex; align-items:center; gap:8px; }
.kp-map-legend__text{ min-width:0; }

/* кружок */
.kp-map-legend .kp-legend__dot{
  --dot:14px;
  /* базовый цвет; перекрывается через data-color */
  --c:#22c55e;
  flex:0 0 var(--dot);
  width:var(--dot); height:var(--dot); aspect-ratio:1;
  display:inline-block; border-radius:50%;
  background-color:var(--c);
  border:2px solid #fff;          /* внутренний белый кант */
  box-shadow:0 0 0 2px rgba(0,0,0,.15); /* внешний кант для контраста */
}

/* палитра базовых цветов (оставляем как было) */
.kp-map-legend .kp-legend__dot[data-color="red"]{ --c:#ef4444; }
.kp-map-legend .kp-legend__dot[data-color="orange"]{ --c:#f59e0b; }
.kp-map-legend .kp-legend__dot[data-color="yellow"]{ --c:#facc15; }
.kp-map-legend .kp-legend__dot[data-color="green"]{ --c:#22c55e; }  /* Зелёный = БЕСПЛАТНО */
.kp-map-legend .kp-legend__dot[data-color="blue"]{ --c:#3b82f6; }   /* Синий = Парковки */
.kp-map-legend .kp-legend__dot[data-color="blue"]{ --c:#38bdf8; }

/* семантика (обновлено согласно твоему правилу) */
.kp-map-legend .kp-legend__dot[data-color="parking"]{ --c:#3b82f6; }   /* паркинги — синий */
.kp-map-legend .kp-legend__dot[data-color="free"]{ --c:#22c55e; }      /* БЕСПЛАТНО — зелёный */
.kp-map-legend .kp-legend__dot[data-color="ev"]{ --c:#38bdf8; }        /* EV — ГОЛУБОЙ (sky) */
.kp-map-legend .kp-legend__dot[data-color="carsharing"]{ --c:#facc15;} /* каршеринг — жёлтый */
.kp-map-legend .kp-legend__dot[data-color="rental"]{ --c:#f59e0b; }    /* прокаты — оранжевый */
.kp-map-legend .kp-legend__dot[data-color="warning"]{ --c:#ef4444; }   /* предупреждения — красный */

@media (max-width:420px){ .kp-map-legend{ font-size:13px; } }
/* СТРОКА ЛЕГЕНДЫ (КРУЖКИ) */

/*СТИЛЬ ДАТЫ В ТАБЛИЦЕ*/
.kp-dates-row .dates-label{
  font-weight: 700; 
  margin-right: .25em;
}
/*СТИЛЬ ДАТЫ В ТАБЛИЦЕ*/

/*СКРЫТЬ caption*/
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Не даём caption.visually-hidden раздувать ширину таблицы */
.kp-table caption.visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  caption-side: bottom;

  /* классический sr-only-паттерн */
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: normal; /* главное — убрать nowrap */
}

/*СКРЫТЬ caption*/

/* ====== СТА КНОПКА на странице ====== */
:root{
  --ink:#111; --paper:#fff; --accent:#ffe678; --stroke:1px;
  --radius:16px; --shadow:0 10px 24px rgba(0,0,0,.15);
}

/* ====== WIDGET ====== */
.kp-sticky-mini,
.kp-sticky-mini *{ box-sizing:border-box; } /* единая раскладка */

/* контейнер */
.kp-sticky-mini{
  position:fixed; z-index:2147483647;
  right:max(16px, env(safe-area-inset-right));
  bottom:max(16px, env(safe-area-inset-bottom));
  display:grid; justify-items:end; gap:8px;
  opacity:0; transform:translateY(8px); visibility:hidden;
  transition:opacity .2s ease, transform .2s ease, visibility 0s .2s;
}
.kp-sticky-mini.kp-sticky-mini--left{
  left:max(16px, env(safe-area-inset-left)); right:auto; justify-items:start;
}
.kp-sticky-mini.is-ready{
  opacity:1; transform:translateY(0); visibility:visible; transition:opacity .2s, transform .2s;
}

/* FAB ПАНЕЛЬ ДЛЯ ЗАЯВОК */
.kp-sticky-mini{
  position:fixed;
  right:max(16px, env(safe-area-inset-right));
  bottom:max(16px, env(safe-area-inset-bottom));
  z-index:9999;

  transform:translateY(120%);
  opacity:0;
  pointer-events:none;
  transition:transform .28s ease, opacity .28s ease;
}
.kp-sticky-mini--left{
  left:max(16px, env(safe-area-inset-left));
  right:auto;
}

/* Появился после скролла (класс вешает JS) */
.kp-sticky-mini.is-ready{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}

/* FAB-кнопка */
.kp-sm__fab{
  display:inline-grid;
  grid-auto-flow:column;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  border:var(--stroke) solid #000;
  background:var(--accent);
  color:#000;
  font-weight:800;
  cursor:pointer;
  box-shadow:var(--shadow);
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.kp-sm__fab:focus-visible{
  outline:2px solid #000;
  outline-offset:2px;
}
.kp-fab-text{
  white-space:nowrap;
  font-size:14px;
  line-height:1;
}

/* «бургер» */
.kp-sm__burger{
  display:inline-grid;
  gap:3px;
}
.kp-sm__burger i{
  display:block;
  width:16px;
  height:2px;
  background:#000;
  border-radius:2px;
}

/* ПАНЕЛЬ С ФОРМОЙ */
.kp-sm__panel{
  position:absolute;
  right:0;
  bottom:calc(100% + 12px);

  width:min(92vw, 380px);
  max-height:min(86vh, 620px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;

  background:var(--paper);
  color:var(--ink);
  border:var(--stroke) solid #000;
  border-radius:var(--radius);
  box-shadow:var(--shadow);

  transform:translate3d(0,14px,0);
  opacity:0;
  pointer-events:none;
  transition:transform .28s ease, opacity .28s ease;
  scroll-padding-bottom:12px;
}
.kp-sticky-mini--left .kp-sm__panel{
  left:0;
  right:auto;
}

/* открытое состояние */
.kp-sticky-mini.is-open .kp-sm__panel{
  transform:translate3d(0,0,0);
  opacity:1;
  pointer-events:auto;
}

/* при открытии скрываем бейдж */
.kp-sticky-mini.is-open .kp-sm__fab{
  opacity:0;
  pointer-events:none;
  transform:translateY(4px);
  transition:opacity .2s ease, transform .2s ease;
}

/* шапка */
.kp-sm__hdr{
  display:grid;
  gap:10px;
  padding:14px;
  position:relative;
  border-bottom:1px dashed #000;
}
.kp-sm__title{ font-size:16px; }
.kp-sm__close{
  position:absolute;
  top:8px;
  right:8px;
  width:32px;
  height:32px;
  border-radius:10px;
  background:#000;
  color:#fff;
  border:none;
  cursor:pointer;
}
.kp-sm__close:focus-visible{
  outline:2px solid #000;
  outline-offset:2px;
  background:#222;
}

/* промо-чип */
.kp-sm__chip{
  display:inline-block;
  font-size:12px;
  padding:6px 8px;
  border:1px dashed #000;
  border-radius:999px;
  white-space:nowrap;
}
.kp-sm__offer{
  background:#000;
  color:#fff;
  padding:.1em .4em;
  border-radius:6px;
  white-space:nowrap;
}

@media (max-width: 768px){
  .kp-sm__panel{
    right:max(8px, env(safe-area-inset-right));
    left:max(8px, env(safe-area-inset-left));
    bottom:calc(100% + 8px);
    width:auto;
    max-height:80vh;
  }
}

/* CTA */
.kp-sm__cta{ display:grid; grid-auto-flow:column; gap:8px; }
.kp-sm__btn{
  display:inline-block; text-align:center; padding:10px 12px; border-radius:10px;
  border:1px solid #000; text-decoration:none; font-weight:700;
}
.kp-sm__btn--tg{ background:#e9f4ff; }
.kp-sm__btn--wa{ background:#eaffea; }

/* ====== FORM ====== */
.kp-sm__form{ padding:12px 14px 14px; display:grid; gap:10px; }
.kp-field{ display:block; }
.kp-field--2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.kp-field--2 > div{ display:flex; flex-direction:column; gap:6px; }
.kp-field label{ display:block; font-size:12px; margin:0; color:#333; }

/* выравнивание контролов: одна высота на всех платформах */
.kp-sm__form input,
.kp-sm__form select{
  width:100%;
  height:44px; min-height:44px; /* ровная высота и для iOS */
  line-height:1.2;
  padding:10px 12px;
  border:1px solid #000; border-radius:12px;
  font:inherit; background:#fff;
  background-clip:padding-box; /* убирает iOS inner */
  outline:none;
}

/* select — стрелка и правый отступ */
.kp-sm__form select{
  -webkit-appearance:none; appearance:none;
  padding-right:32px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:10px 6px;
}

/* date — без системных артефактов и ровно по высоте */
.kp-sm__form input[type="date"]{
  -webkit-appearance:none; appearance:none;
  padding-right:36px;
  font-size:14px;
}

/* фокус без прыжка */
.kp-sm__form input:focus,
.kp-sm__form select:focus{
  box-shadow:0 0 0 2px rgba(0,0,0,.85) inset;
}

/* legal */
.kp-sm__legal{ font-size:12px; color:#666; margin:4px 0 0; }

/* мобильные улучшения */
@media (max-width:480px){
  .kp-sm__panel{ width:min(96vw, 420px); max-height:min(90vh, 620px); }
  .kp-fab-text{ font-size:13px; }
  /* чтобы iOS не зумил инпуты */
  .kp-sm__form input,
  .kp-sm__form select{ font-size:16px; }
}
/* мобильная ширина без сдвига */
@media (max-width:600px){
  .kp-sm__panel{
    left:auto !important;                                /* только справа */
    right:max(12px, env(safe-area-inset-right));
    width:min(90vw, 360px);                              /* рамки по ширине */
    max-height:min(90vh, 620px);                         /* чтобы не вылезала по высоте */
    transform:translate3d(0,14px,0);
  }
  .kp-sticky-mini.is-open .kp-sm__panel{
    transform:translate3d(0,0,0);
  }
}
/* ====== СТА КНОПКА на странице ====== */

/*ДЕКОР ПРЕДЛОЖЕНИЯ*/
.kp-subtle-bg{
  --_bg: rgba(255, 225, 100, .14);      /* мягкий жёлтый как запасной вариант */
  --_stroke: rgba(0, 0, 0, .06);

  background: var(--_bg);
  border-radius: clamp(6px, 1.2vw, 10px);
  padding: .45rem .65rem;
  outline: 1px solid var(--_stroke);    /* тонкий «контур» вместо жирной рамки */
  outline-offset: 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.04) inset;
  transition: background .2s ease, outline-color .2s ease;
  margin-block: clamp(6px, 0.6rem, 12px);
}

@media (prefers-color-scheme: dark){
  .kp-subtle-bg{
    --_bg: rgba(255, 225, 100, .10);
    --_stroke: rgba(255,255,255,.08);
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
  }
}

@supports (color: oklch(62% 0.15 100)){
  .kp-subtle-bg{
    /* Можно задать свои темы: --paper, --ink, --accent */
    --paper: var(--paper, oklch(98% 0.01 95));
    --accent: var(--accent: oklch(88% 0.13 70));

    --_bg: color-mix(in oklch, var(--accent) 16%, transparent);
    --_stroke: color-mix(in oklch, var(--accent) 22%, transparent);
    background: var(--_bg);
    outline-color: var(--_stroke);
  }
  @media (prefers-color-scheme: dark){
    .kp-subtle-bg{
      --paper: var(--paper, oklch(22% 0.01 95));
      --accent: var(--accent: oklch(88% 0.13 70));
      --_bg: color-mix(in oklch, var(--accent) 18%, transparent);
      --_stroke: color-mix(in oklch, var(--accent) 26%, transparent);
      background: var(--_bg);
      outline-color: var(--_stroke);
    }
  }
}

/* Ховер/фокус — еле заметный «подсвет» (по желанию) */
.kp-subtle-bg:hover{
  outline-color: color-mix(in oklab, currentColor 14%, transparent);
}
/*ДЕКОР ПРЕДЛОЖЕНИЯ*/

/*ОТСТУП H3*/
.kp-comic__body h3 {
  margin-bottom: 0.6em;
}

.kp-comic__body ul {
  margin-bottom: 1.2em;
}
/* МЕНЮ + БУРГЕР — Base */
.kp-nav{
  /* дизайн-токены */
  --ink:#000;
  --paper:#fffef7;
  --accent:#ffe600;
  --stroke:4px;
  --radius:12px;
  --shadow:6px 6px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
  --gutter:12px;
  --brand-rot:-1deg;
  --desk-breakpoint:900px;

  position:sticky;top:0;z-index:50;
}

/* bar + контейнер */
.kp-nav__bar{
  background:color-mix(in oklab,#fff 88%,transparent);
  border-bottom:var(--stroke) solid var(--ink);
  box-shadow:0 6px 0 var(--ink);
}
.kp-nav__container{max-width:1400px;margin:0 auto;padding:10px 14px}
.kp-nav__grid-12{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--gutter);
  align-items:center;
}

/* бренд */
.kp-nav__brand{
  display:inline-block;text-decoration:none;color:var(--ink);
  background:var(--accent);
  border:var(--stroke) solid var(--ink);
  border-radius:var(--radius);
  padding:.25em .5em;
  box-shadow:var(--shadow);
  transform:rotate(var(--brand-rot));
}
.kp-nav__brand-text{
  font-family:Arial,sans-serif;
  font-size:clamp(18px,3.5vw,28px);
  line-height:1.05;
}

/* универсальная окраска внутри навигации */
.kp-nav :is(a,.kp-nav__btn,.kp-nav__brand,.kp-nav__brand-text){
  color:var(--ink);
  -webkit-text-fill-color:var(--ink);
}

/* список + ссылки */
.kp-nav__list{list-style:none;margin:0;padding:0;display:flex;gap:10px}
.kp-nav__link{
  display:inline-block;
  text-decoration:none;
  font-family:Arial,sans-serif;
  font-weight:600;
  font-size:14px;
  color:var(--ink);
  background:#fff;
  border:var(--stroke) solid var(--ink);
  border-radius:10px;
  padding:.35em .6em;
  box-shadow:var(--shadow-sm);
  transition:transform .12s ease,background .15s ease;
}
.kp-nav__link:hover{transform:translateY(-1px) rotate(-1deg);background:#fffbe8}
.kp-nav__link.is-active{outline:4px solid var(--ink);outline-offset:-2px}
.kp-nav__link *{color:currentColor}

/* кнопка-акция (CTA) */
.kp-nav__btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:Arial,sans-serif;font-weight:900;letter-spacing:.02em;
  background:var(--accent);color:var(--ink);
  border:var(--stroke) solid var(--ink);border-radius:var(--radius);
  padding:.4em .7em;box-shadow:var(--shadow);
  text-decoration:none;cursor:pointer;
  transition:transform .12s ease,background .15s ease;
}
.kp-nav__btn:hover{background:#ffd800;transform:translateY(-1px)}
.kp-nav__btn--block{display:flex;width:100%}
.kp-nav__btn *{color:currentColor}

/* бургер */
.kp-burger{
  --size:44px;
  all:unset;cursor:pointer;position:relative;z-index:1001;
  width:var(--size);height:var(--size);display:inline-grid;place-items:center;
  background:#fff;border:var(--stroke) solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:transform .12s ease,background .15s ease;
}
.kp-burger:hover{transform:translateY(-1px);background:#fffbe8}
.kp-burger:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.kp-burger__box{width:24px;height:18px;position:relative;display:block}
.kp-burger__line{
  position:absolute;left:0;right:0;height:3px;background:var(--ink);border-radius:2px;
  transition:transform .2s ease,opacity .2s ease,top .2s ease;
}
.kp-burger__line:nth-child(1){top:0}
.kp-burger__line:nth-child(2){top:7.5px}
.kp-burger__line:nth-child(3){top:15px}
.kp-nav.is-open .kp-burger__line:nth-child(1){top:7.5px;transform:rotate(45deg)}
.kp-nav.is-open .kp-burger__line:nth-child(2){opacity:0}
.kp-nav.is-open .kp-burger__line:nth-child(3){top:7.5px;transform:rotate(-45deg)}

/* backdrop + scroll-lock */
body.kp-lock{overflow:hidden;padding-right:var(--scrollbar-width,0px)}
.kp-nav__backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transition:opacity .28s ease;z-index:999;
}
.kp-nav.is-open .kp-nav__backdrop{opacity:1;pointer-events:auto}

/* дропдауны (desktop) */
.kp-nav__list>li{position:relative}
.kp-nav__card{
  position:absolute;top:calc(100% + 8px);left:0;z-index:1200;
  min-width:260px;max-width:360px;
  background:var(--paper);color:var(--ink);
  border:var(--stroke) solid var(--ink);border-radius:var(--radius);
  box-shadow:8px 8px 0 var(--ink);
  padding:12px 14px;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s ease,transform .18s ease;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.kp-nav__card-title{margin:0 0 8px;font-size:15px;font-weight:900;color:#111;text-align:left}
.kp-nav__card-table{display:flex;flex-direction:column;gap:6px}
.kp-nav__card-table .kp-cell{
  display:block;font-size:14px;font-weight:700;color:#333;text-decoration:none;
  padding:.35em .6em;border:var(--stroke) solid transparent;border-radius:8px;
  transition:background .18s ease,color .18s ease,transform .15s ease;
}
.kp-nav__card-table .kp-cell:hover{
  background:var(--accent);color:var(--ink);border-color:var(--ink);transform:translateY(-1px);
}
.kp-nav__card-table .kp-cell:active{transform:translateY(0)}
.kp-nav__list>li:hover>.kp-nav__card,
.kp-nav__list>li:focus-within>.kp-nav__card{opacity:1;visibility:visible;transform:translateY(0)}
.kp-nav__card::before{
  content:"";position:absolute;top:-10px;left:22px;width:0;height:0;
  border:10px solid transparent;border-bottom-color:var(--paper);
  filter:drop-shadow(0 -2px 0 var(--ink));
}
.kp-nav__item--right>.kp-nav__card{left:auto;right:0}
.kp-nav__item--right>.kp-nav__card::before{left:auto;right:16px}

/* внутри карточек — аккуратный ресет */
.kp-nav__card :is(a){color:#333;text-decoration:none}
.kp-nav__card :is(a:hover){color:var(--ink);background:var(--accent);border-radius:8px;padding-inline:.2em}
.kp-nav__card .kp-emoji{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla",sans-serif}
.kp-nav__card a{overflow-wrap:anywhere;word-break:break-word}

/* мобильный drawer + аккордеон */
@media (max-width:899px){
  .kp-nav__drawer{
    position:fixed;top:0;right:0;bottom:0;z-index:1000;
    width:min(86vw,420px);height:100dvh;background:var(--paper);
    border-left:var(--stroke) solid var(--ink);box-shadow:-10px 0 0 var(--ink);
    overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    backface-visibility:hidden;transform:translate3d(100%,0,0);
    transition:transform .3s cubic-bezier(.22,.61,.36,1);
    padding:var(--drawer-pt,calc(100px + env(safe-area-inset-top))) 16px 20px;
  }
  .kp-nav.is-open .kp-nav__drawer{transform:translate3d(0,0,0)}

  .kp-nav__mob{padding:0}
  .kp-nav__list--mob{display:flex;flex-direction:column;align-items:stretch;gap:8px}
  .kp-nav__list--mob li{margin:0}
  .kp-nav__list--mob .kp-nav__link,
  .kp-acc__btn{
    display:flex;align-items:center;justify-content:flex-start;text-align:left;
    width:100%;gap:8px;line-height:1.2;margin:0;border-radius:10px;box-shadow:3px 3px 0 var(--ink)
  }
  .kp-nav__list--mob .kp-nav__link{
    font-weight:900;font-size:15px;padding:.5em .7em;
  }

  .kp-acc__btn{
    appearance:none;-webkit-appearance:none;
    font:inherit;font-weight:900;letter-spacing:.02em;cursor:pointer;
    background:#fff;color:var(--ink);
    border:var(--stroke) solid var(--ink);padding:.5em .7em;
  }
  .kp-acc__btn:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
  .kp-acc__caret{margin-left:auto;display:inline-grid}
  .kp-acc__btn[aria-expanded="true"] .kp-acc__caret svg{transform:rotate(180deg);transition:transform .18s ease}
  .kp-acc__btn[aria-expanded="false"] .kp-acc__caret svg{transform:rotate(0);transition:transform .18s ease}

  .kp-acc__panel{padding:4px 0 0;display:flex;flex-direction:column;gap:6px}
  .kp-acc__panel .kp-nav__link{
    font-size:14px;line-height:1.15;padding:.4em .55em;border-radius:8px;border-width:2px;box-shadow:2px 2px 0 var(--ink);font-weight:700;background:#fff
  }
  .kp-acc__panel[hidden]{display:none!important}

  .kp-nav__drawer .kp-nav__btn{display:flex;width:100%;margin-top:12px}

  /* мобильная сетка */
  .kp-nav__desk,.kp-nav__actions{display:none}
  .kp-nav__brand{grid-column:1/11}
  .kp-burger{grid-column:11/13;justify-self:end;display:inline-grid}
}

/* десктопные области */
@media (min-width:900px){
  .kp-burger{display:none}
  .kp-nav__drawer,.kp-nav__backdrop{display:none}
  .kp-nav__brand{grid-column:1/3;justify-self:start}
  .kp-nav__desk{grid-column:3/11;justify-self:center}
  .kp-nav__actions{grid-column:11/13;justify-self:end}
}

/* reduce motion */
@media (prefers-reduced-motion:reduce){
  .kp-nav__drawer,.kp-nav__backdrop,.kp-burger__line{transition:none!important}
}
@media (max-width:899px){
  /* Родительский раздел */
  .kp-acc__btn{
    background:#fffef7; /* чуть теплее, чем #fff */
    border-width:3px;
    box-shadow:3px 3px 0 var(--ink);
  }
  .kp-acc__btn:hover{background:#fffbe8}

  /* Контрастная стрелка */
  .kp-acc__caret{margin-left:auto;display:inline-grid}
  .kp-acc__btn[aria-expanded="true"] .kp-acc__caret svg{transform:rotate(180deg);transition:transform .18s ease}
  .kp-acc__btn[aria-expanded="false"] .kp-acc__caret svg{transform:rotate(0);transition:transform .18s ease}

  /* Панель подпунктов */
  .kp-acc__panel{
    padding:8px 0 4px 10px; /* небольшой внутренний отступ */
    margin-left:4px;
    border-left:3px solid var(--ink); /* вертикальный ориентир */
    display:flex;flex-direction:column;gap:6px;
  }
  /* Саб-ссылки проще и ближе друг к другу */
  .kp-acc__panel .kp-nav__link,
  .kp-nav__link--sub{
    font-weight:700;
    font-size:14px;
    line-height:1.15;
    padding:.42em .6em;
    border-radius:8px;
    border-width:2px;            /* тоньше */
    box-shadow:2px 2px 0 var(--ink); /* легче */
    background:#fff;
  }

  /* Обычные одиночные ссылки чуть крупнее, чтобы отличались от саб-ссылок */
  .kp-nav__list--mob > li > .kp-nav__link{
    font-weight:900;
    font-size:15px;
  }

  /* Уменьшаем общую «воздушность» списка */
  .kp-nav__list--mob{gap:6px}
}
/* МЕНЮ + БУРГЕР*/

/*ГЕРОЙ + КНОПКИ + H1)*/
.kp-hero2{
  --ink:#000; --paper:#fffef7; --stroke:6px;
  --hero2-height: clamp(420px, 58vh, 760px);
  --hero2-pt: clamp(140px, 16vh, 220px);
  --hero2-pb: clamp(48px, 8vh, 96px);
  --hero2-pos: 50% 50%;
  --hero2-dark: .40;

  position: relative;
  color:#fff;
  min-height: var(--hero2-height);           /* ← одна модель высоты */
  padding-block: var(--hero2-pt) var(--hero2-pb);
  text-align:left;

  border: var(--stroke) solid var(--ink);
  border-radius:28px;
  background-color: var(--paper);

  /* НЕ шортхенд, чтобы не сбивать картинку */
  background-position: var(--hero2-pos);
  background-repeat: no-repeat;
  background-size: cover;
  overflow: visible;
}
.kp-hero2::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0, var(--hero2-dark));
  border-radius: inherit;
  pointer-events: none;
}

/* Если где-то нужна фиксированная высота — просто добавь класс */
.kp-hero2--fixed{ height: var(--hero2-height); box-sizing: border-box; }

/* Модификатор с фоном: один раз объявляем свойство */
.kp-hero2--bg{
  background-image: var(--hero2-img, var(--hero2-bg-16x9-1x)); /* дефолт */
}

/* === ОРИЕНТАЦИИ -> только ПЕРЕМЕННУЮ меняем === */

/* Ландшафт: дефолт-фолбэк 1x */
@media (orientation: landscape){
  .kp-hero2--bg{ --hero2-img: var(--hero2-bg-16x9-1x); }
  /* Safari (перекрывает фолбэк, если поддерживается) */
  @supports (background-image: -webkit-image-set(url("x") 1x)){
    .kp-hero2--bg{
      --hero2-img: -webkit-image-set(
        var(--hero2-bg-16x9-1x) 1x,
        var(--hero2-bg-16x9-2x) 2x
      );
    }
  }
  /* Стандартные браузеры (перекроет Safari, если оба true и идёт позже) */
  @supports (background-image: image-set(url("x") 1x)){
    .kp-hero2--bg{
      --hero2-img: image-set(
        var(--hero2-bg-16x9-1x) 1x,
        var(--hero2-bg-16x9-2x) 2x
      );
    }
  }
}

/* Портрет: аналогично */
@media (orientation: portrait){
  .kp-hero2--bg{ --hero2-img: var(--hero2-bg-9x16-1x); }
  @supports (background-image: -webkit-image-set(url("x") 1x)){
    .kp-hero2--bg{
      --hero2-img: -webkit-image-set(
        var(--hero2-bg-9x16-1x) 1x,
        var(--hero2-bg-9x16-2x) 2x
      );
    }
  }
  @supports (background-image: image-set(url("x") 1x)){
    .kp-hero2--bg{
      --hero2-img: image-set(
        var(--hero2-bg-9x16-1x) 1x,
        var(--hero2-bg-9x16-2x) 2x
      );
    }
  }
}

/* Грид и контейнер без дублей */
.kp-hero2__container{
  position:relative; z-index:1; max-width:1200px; margin:0 auto;
  padding-inline: clamp(12px, 3vw, 20px);
  /* «ручки» для точечного смещения контента без марджинов */
  --hero2-nudge-x: 0;   --hero2-nudge-y: 0;
  transform: translate(var(--hero2-nudge-x), var(--hero2-nudge-y));
}
.kp-hero2__grid-12{
  display:grid; grid-template-columns:repeat(12, minmax(0,1fr));
  gap: clamp(10px, 1.4vw, 16px);
  min-height: inherit; align-content: var(--hero2-content-align, center);
  padding-bottom: clamp(8px, 2vh, 20px);
}
.kp-hero2__slot{ grid-column: var(--hero2-col-start, 1) / var(--hero2-col-end, 8); }
@media (max-width: 899px){ .kp-hero2__slot{ grid-column: 1 / -1; display:grid; row-gap:12px; } }

/* HERO: заголовок и подзаголовок (база) */
.kp-hero2__h1{
  font-family: Arial, sans-serif;
  font-size: clamp(var(--h1-min, 42px), var(--h1-vw, 8.5vw), var(--h1-max, 60px));
  line-height: 1.1;
  margin: 0;
  color: #ffeb3b;
  text-shadow: 0 3px 6px rgba(0,0,0,0.9);
}

/* сделаем sub тоже управляемым переменными */
.kp-hero2__sub{
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(var(--sub-min, 16px), var(--sub-vw, 1.7vw), var(--sub-max, 22px));
  display: inline-block;
  background: #ffeb3b;
  color: #000;
  border: 5px solid #000;
  border-radius: 12px;
  padding: .5em .85em;
  box-shadow: 6px 6px 0 #000;
  margin-top: .45em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Мобилка: уменьшаем размеры текста */
@media (max-width: 899px){
  .kp-hero2{
    /* h1 */
    --h1-min: 28px;
    --h1-vw: 6.2vw;
    --h1-max: 36px;

    /* sub */
    --sub-min: 14px;
    --sub-vw: 3.4vw;
    --sub-max: 18px;
  }
}

/* Ряд кнопок */
.kp-hero2__actions{
  margin-top:.65em;
  display:flex !important; align-items:center; justify-content:flex-start;
  flex-direction:row; gap:10px; flex-wrap:nowrap; overflow-x:visible;
}
@media (max-width: 899px){
  .kp-hero2__actions{ width:100%; justify-content:center; flex-wrap:wrap; gap:8px; }
}
/* Кнопка */
.kp-hbtn{
  flex:0 0 auto; white-space:nowrap; --h-stroke:3px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:Arial, sans-serif; font-weight:600;
  font-size:14px; line-height:1.15; color:#000 !important;
  background:#fff; border: var(--h-stroke) solid #000; border-radius:999px;
  padding:.42em .85em; box-shadow:3px 3px 0 #000;
  transform: translateY(0);
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.kp-hbtn:hover{ background:#fffbe8; transform: translateY(-1px); }
.kp-hbtn:active{ transform: translateY(1px); box-shadow:2px 2px 0 #000; }
.kp-hbtn--ghost{ background:#fff; box-shadow:3px 3px 0 #000; color:#000 !important; }
.kp-hbtn.is-active{
  background:#ffe600; color:#000; border:3px solid #000; box-shadow:4px 4px 0 #000;
}
@media (max-width: 899px){
  .kp-hbtn{ font-size:15px; padding:.38em .8em; }
}

/* ===== Выпадашки ===== */
.kp-hitem{ position: relative; }

/* Подменю (по умолчанию: вверх) */
.kp-hdd{
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 1100;                        /* ниже .kp-nav__card(1200) */
  min-width: 220px; max-width: 320px;
  background:#fffef7; color:#000;
  border: var(--stroke,3px) solid var(--ink,#000);
  border-radius:12px; box-shadow:8px 8px 0 var(--ink,#000);
  padding:8px;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s step-end;
}

/* Показ только по классу (универсально) */
.kp-hitem.is-open > .kp-hdd{
  opacity:1; visibility:visible; transform:translateY(0);
}

/* На десктопе разрешаем показывать ещё и по hover */
@media (hover:hover) and (pointer:fine){
  .kp-hitem:hover > .kp-hdd{
    opacity:1; visibility:visible; transform:translateY(0);
  }
}

/* Ссылки внутри подменю */
.kp-hdd__link{
  display:block; text-decoration:none; color:#333 !important;
  font-weight:800; font-size:15px; line-height:1.15;
  padding:.45em .6em; border-radius:8px; border:3px solid transparent;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.kp-hdd__link:hover{
  background:#ffe600; color:#000 !important; transform:translateY(-1px);
  border-color:#000;
}

/* Стрелочка вверх */
.kp-hdd::before{
  content:"";
  position:absolute; bottom:-10px; left:20px;
  border:10px solid transparent;
  border-top-color:#fffef7;
  filter: drop-shadow(0 2px 0 var(--ink,#000));
}

/* ===== Мобилка ===== */
@media (max-width: 899px){
  /* На мобиле скрыто по умолчанию, показываем ТОЛЬКО через .is-open */
  .kp-hdd{
    left:50%; right:auto; max-width:92vw;
    transform: translate(-50%, 6px);
    opacity:0; visibility:hidden; pointer-events:none;
}

  .kp-hitem.is-open > .kp-hdd{
    opacity:1; visibility:visible; pointer-events:auto;
    transform: translate(-50%, 0);
}

  /* Левая крайняя кнопка — выпадать в ПРАВЫЙ край экрана */
  .kp-hitem--mob-rightedge > .kp-hdd{
    left:auto; right:8px; transform: translateY(6px);
    max-width: calc(100vw - 16px);
}
  .kp-hitem--mob-rightedge.is-open > .kp-hdd{
    transform: translateY(0);
}

  /* Правая крайняя кнопка — выпадать в ЛЕВЫЙ край экрана */
  .kp-hitem--mob-leftedge > .kp-hdd{
    left:8px; right:auto; transform: translateY(6px);
    max-width: calc(100vw - 16px);
}
  .kp-hitem--mob-leftedge.is-open > .kp-hdd{
    transform: translateY(0);
}

  /* Стрелочка: по центру по умолчанию, у крайних — к своему краю */
  .kp-hdd::before{ left:50%; transform:translateX(-50%); }
  .kp-hitem--mob-rightedge > .kp-hdd::before{ right:20px; left:auto; transform:none; }
  .kp-hitem--mob-leftedge  > .kp-hdd::before{ left:20px;  transform:none; }
}

/* Жёсткое скрытие (перебивает любые состояния; используется в JS-замке) */
.kp-hitem.is-closed > .kp-hdd{
  opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
  transform:translateY(6px) !important;
}
/*ГЕРОЙ + КНОПКИ + H1)*/

/*КАРТОЧКИ НА ГЛАВНОЙ*/
.kp-hero__cards{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, 100%); /* центр */
  width:min(1000px, calc(100% - clamp(24px,6vw,64px)));
  display:grid;
  gap:12px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  z-index:5;
}

/* Карточка */
.kp-hcard{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:8px;
  min-height:120px;
  padding:14px;
  border-radius:16px;
  color:#fff !important;
  text-decoration:none;
  text-align:left;

  /* управляемая заливка */
  --card-bg:#3492ff;  /* дефолтный цвет */
  --bg-alpha:72%;     /* насыщенность */
  background: color-mix(in oklab,
              var(--card-bg) var(--bg-alpha),
              transparent calc(100% - var(--bg-alpha)));

  backdrop-filter:saturate(115%) blur(.5px);
  border:var(--stroke) solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.kp-hcard:hover{
  transform:translateY(-2px);
  box-shadow:8px 8px 0 var(--ink);
  --bg-alpha:78%;
}
.kp-hcard:active{ transform:translateY(0) }

/* Контент карточки */
.kp-hcard__icon{ width:28px; height:28px; display:grid; place-items:center }
.kp-hcard__icon svg{
  width:100%; height:100%;
  stroke:#fff; fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; opacity:.95;
}
.kp-hcard__title{
  font:800 clamp(14px,2.2vw,18px)/1.15 Arial, sans-serif;
  letter-spacing:.2px;
}
.kp-hcard{ outline:1px solid rgba(255,255,255,.12); outline-offset:-1px }

/* Модификаторы цвета */
.kp-hcard.is-amber{ --card-bg:#7c5cff; }
.kp-hcard.is-sky  { --card-bg:#39b7ff; }
.kp-hcard.is-green{ --card-bg:#2ecc71; }

/* ===== Адаптив: планшеты ===== */
@media (max-width:1024px){
  .kp-hero__cards{ grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* ===== Мобилка — режим по умолчанию: компактная сетка 3× ===== */
@media (max-width:599px){
  .kp-hero__cards{
    /* остаёмся grid, делаем 3 колонки компактно */
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    transform: translate(-50%, 100%)    
    /* при необходимости можно подвинуть чуть выше/ниже:
       transform:translate(-50%,-50%); */
  }
  .kp-hcard{
    min-height:90px;
    padding:10px;
    border-width:3px;
    box-shadow:4px 4px 0 var(--ink);
    border-radius:12px;
  }
  .kp-hcard__icon{ width:22px;height:22px }
  .kp-hcard__title{ font-size:13px }
}

/* ===== Мобилка — альтернативный режим: горизонтальная прокрутка =====
   Включается, если на контейнер добавить класс .is-scroll */
@media (max-width:599px){
  .kp-hero__cards.is-scroll{
    display:flex;
    gap:10px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-inline:8px;
  }
  .kp-hero__cards.is-scroll::-webkit-scrollbar{ display:none }
  .kp-hero__cards.is-scroll .kp-hcard{
    flex:0 0 72%;          /* ширина карточки при скролле */
    min-width:240px;       /* нижний предел, чтобы текст не ломался */
  }
}
/*КАРТОЧКИ НА ГЛАВНОЙ*/

/*КАРТИНКИ ОТЕЛЕЙ*/
.kp-hotel__photo {
  position: relative;
  width: 100%;
  padding-top: 56.25%;  /* 16:9 */
  border-radius: 12px;
  margin-top: 20px;
}
.kp-hotel__photo img {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/*КАРТИНКИ ОТЕЛЕЙ*/

/*КРОШКИ*/
/* Простые текстовые крошки: серые ссылки, тёмный текущий */
.kp-breadcrumbs{
  --bc-ink: var(--ink, #111);
  --bc-dim: rgba(0,0,0,.55);
  margin: 8px 0 14px;
}
@media (prefers-color-scheme: dark){
  .kp-breadcrumbs{ --bc-dim: rgba(255,255,255,.65); }
}

.kp-breadcrumbs__list{
  display:flex; gap:6px; margin:0; padding:0; list-style:none;
}
.kp-breadcrumbs__item{ display:inline-flex; align-items:center; gap:6px; }

/* предыдущие пункты (ссылки) — серые, без подложек/рамок */
.kp-breadcrumbs__link,
.kp-breadcrumbs__link:link,
.kp-breadcrumbs__link:visited{
  color: var(--bc-dim);
  background:transparent; border:0; box-shadow:none; border-radius:0; padding:0;
  text-decoration:none; font-weight:600;
}
.kp-breadcrumbs__link:hover{ color: var(--bc-ink); text-decoration:underline; }
.kp-breadcrumbs__link:focus-visible{ outline:2px solid currentColor; outline-offset:2px; }

/* текущий пункт — темнее и жирнее */
.kp-breadcrumbs__current{
  color: var(--bc-ink);
  background:transparent; border:0; box-shadow:none; border-radius:0; padding:0;
  font-weight:800;
}

/* разделитель — такой же серый */
.kp-breadcrumbs__sep{ width:auto; height:auto; flex:0 0 auto; }
.kp-breadcrumbs__sep svg{ display:none; }
.kp-breadcrumbs__sep::before{
  content:"›"; color: var(--bc-dim); font-weight:700; line-height:1;
}

/* мобайл — чуть компактнее */
@media (max-width:600px){
  .kp-breadcrumbs__link, .kp-breadcrumbs__current{ font-size:14px; }
}
/*КРОШКИ*/

/* СТАТЬЯ + ТАБЛИЦЫ + КАРТОЧКИ + ТОС*/
/* =========================
   KP COMIC — базовые переменные
   ========================= */
.kp-comic{
  --ink:#000;                /* цвет текста */
  --paper:#fff;              /* фон “листов” */
  --accent:#ffeb3b;          /* акцент (жёлтый) */
  --shadow:0 10px 0 var(--ink);
  --radius:16px;
  --gap:clamp(14px,2.5vw,24px);
  --stroke:3px;

  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
}

/* =========================
   “Лист” комикса (фон, рамка)
   ========================= */
.kp-comic .kp-comic__bg{
  position:relative;
  background:
    radial-gradient(circle at 8px 8px,rgba(0,0,0,.06) 2px,transparent 2px) 0 0/16px 16px,
    var(--paper);
  border:var(--stroke) solid var(--ink);
  border-radius:calc(var(--radius) + 6px);
  padding:clamp(16px,3vw,28px);
}

/* =========================
   Заголовок-плашка
   ========================= */
.kp-comic .kp-comic__title{
  display: table;
  font-weight:900;
  line-height:1.05;
  font-size:clamp(28px,4.8vw,54px);
  background:var(--accent);
  border:var(--stroke) solid var(--ink);
  border-radius:12px;
  padding:.35em .55em;
  max-width: 1200px;
  transform:rotate(-1.5deg);
  box-shadow:6px 6px 0 var(--ink);
  margin:0 auto 18px;
  transform-origin:center;
}

/* =========================
   Ремарка/лид-блок
   ========================= */
.kp-comic .kp-comic__narration {
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  border-radius: 12px;
  padding: .85em 0.75em .85em 0.5em; /* top right bottom left */
  box-shadow: 6px 6px 0 var(--ink);
  font-weight: 0;
  margin-bottom: var(--gap);
  margin-top: 1em;
}
.kp-comic__narration p + p {
  margin-top: 1.2em;
}
@media (min-width: 1024px){
  .kp-comic .kp-comic__narration{
    max-width: 1200px;   /* можно 800–1000px, подбери по вкусу */
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 767.98px) {
  .kp-comic .kp-comic__narration {
    margin-left: 0;   /* рамка вровень с краем контейнера */
    margin-right: 0;
  }
}
/* =========================
   Сетка карточек
   ========================= */
.kp-comic .kp-comic__panels{ display:grid; grid-template-columns:1fr; gap:var(--gap); }
/* Наклон карточек к центру */
@media (min-width:860px){
  .kp-comic .kp-comic__panels{ grid-template-columns:1fr 1fr; }
}
.kp-comic__panels + .kp-comic__panels { margin-top: 32px; }

/* =========================
   Карточка: база + “въезд” при скролле
   ========================= */
.kp-comic .kp-comic__panel{
  background:var(--paper);
  border:var(--stroke) solid var(--ink);
  border-radius:var(--radius);
  box-shadow:6px 6px 0 var(--ink);
  display:grid;
  grid-template-rows:auto 1fr;
  min-height:260px;
}

/* анимация вспышки */
@keyframes kp-ping {
  0%   { box-shadow:6px 6px 0 var(--ink); }
  30%  { box-shadow:0 0 0 4px var(--ink), 0 0 0 10px var(--accent), 6px 6px 0 var(--ink); }
  100% { box-shadow:6px 6px 0 var(--ink); }
}

/* если URL совпадает с id карточки */
.kp-comic__panel:target {
  animation: kp-ping 10s ease;
}
/* =========================
   Медиа в карточке
   ========================= */
.kp-comic .kp-comic__media{
  --radius: 12px;              /* настраиваемый радиус */
  border-radius: var(--radius);
  overflow: hidden;            /* обрезаем содержимое по радиусу */
  aspect-ratio: 16/9;
  background: #f2f2f2;
  position: relative;
}
.kp-comic .kp-comic__media{
  margin:15px 0 15px
}
.kp-comic .kp-comic__media img{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* =========================
   Контент карточки
   ========================= */
.kp-comic .kp-comic__body{ padding:14px 16px 18px; min-width:0; }
.kp-comic .kp-comic__body h2{
  font-size:clamp(18px,2.3vw,24px);
  margin: 1em .4em 0.6em;
  font-weight:900;
  display:inline-block;
  background:var(--accent);
  border:var(--stroke) solid var(--ink);
  border-radius:10px;
  padding:.2em .5em;
  color:var(--ink);
}
.kp-comic .kp-comic__body p{ margin:.4em 0 .6em; }

/* =========================
   Небольшие “бейджи”
   ========================= */
.kp-comic .kp-comic__sfx{
  display:inline-block; font-weight:900; letter-spacing:.02em;
  transform:rotate(-3deg); background:var(--accent);
  border:var(--stroke) solid var(--ink); border-radius:10px;
  padding:.15em .45em; color:var(--ink);
}

/* =========================
   CTA-кнопка
   ========================= */
.kp-comic .kp-comic__cta,
.kp-comic .kp-comic__cta:link,
.kp-comic .kp-comic__cta:visited,
.kp-comic .kp-comic__cta:hover,
.kp-comic .kp-comic__cta:active{
  display:inline-block; margin-top:var(--gap);
  text-decoration:none; color:var(--ink) !important; -webkit-text-fill-color:var(--ink) !important;
  background:var(--accent);
  border:var(--stroke) solid var(--ink); border-radius:14px;
  padding:.7em 1rem; box-shadow:6px 6px 0 var(--ink);
  font-weight:900; transform:translateY(0); transition:transform .15s ease;
}
.kp-comic .kp-comic__cta:hover{ transform:translateY(-2px); }
.kp-comic .kp-comic__cta *, .kp-comic .kp-comic__cta svg, .kp-comic .kp-comic__cta svg *{
  color:currentColor !important; fill:currentColor !important; stroke:currentColor !important;
}
/* =========================
   ССЫЛКИ В СТАТЬЕ
========================= */
.kp-link{
  color:#0057ff !important;
  font-weight:700;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:.15em;
  transition:color .15s ease, background .15s ease, box-shadow .15s ease;
}

.kp-link:hover{
  text-decoration:none;
  background:var(--accent);
  border-radius:6px;
  box-shadow:3px 3px 0 var(--ink);
  padding:0 .25em;
  color:var(--ink);
}
/* =========================
   Respect: reduced motion
   ========================= */
@media (prefers-reduced-motion:reduce){
  .kp-comic .kp-comic__panel{ transition:none; transform:none; translate:0 0; opacity:1; }
  .kp-comic .kp-comic__cta{ transition:none; }
}

/* =========================
   Картинки внутри текста
   ========================= */
.kp-comic .kp-comic__media--inline{
  aspect-ratio:auto;
  border:var(--stroke) solid var(--ink);
  border-radius:12px;
  box-shadow:6px 6px 0 var(--ink);
  margin:.6em 0 .8em;
}
.kp-comic .kp-comic__cap{
  font-size:.9em; font-weight:600; padding:.5em .75em .6em;
  background:var(--paper); border-top:var(--stroke) solid var(--ink);
}
.kp-comic .kp-comic__media--11{ aspect-ratio:1/1; }
.kp-comic .kp-comic__media--43{ aspect-ratio:4/3; }
.kp-comic .kp-comic__media--23{ aspect-ratio:2/3; }
.kp-comic .kp-comic__split{ display:grid; grid-template-columns:1fr; }
@media (min-width:860px){
  .kp-comic .kp-comic__split{
    grid-template-columns:minmax(0,44%) minmax(0,56%); gap:var(--gap); align-items:start;
  }
}
.kp-comic .kp-comic__media--noborder{ border:0; box-shadow:none; border-radius:0; }

/* =========================
   Таблицы
   ========================= */
:root{
  --ink:#000;
  --paper:#fbf0c3;
  --accent:#ffd55a;
  --stroke:1px;

  /* чуть темнее, но в тёплом тоне */
  --paper-tint: color-mix(in srgb, var(--paper) 50%, var(--accent) 6%);
}
/* fallback, если вдруг без color-mix */
@supports not (color-mix(in srgb, white 50%, black 50%)){
  :root{ --paper-tint:#fff4da; } /* подстрой по вкусу */
}

/* карточка без внешней рамки, оставляем тень и радиус */
.kp-tablewrap{
  border:0;
  border-radius:12px;
  box-shadow:6px 6px 0 var(--ink);
  background:var(--paper);
  margin:0px 0 12px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* база таблицы */
.kp-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
}
.kp-table th,
.kp-table td{
  padding:.6em .8em;
  border-bottom:var(--stroke) solid var(--ink);
  vertical-align:top;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

@media (max-width: 768px){
  .kp-tablewrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* БАЗОВЫЕ таблицы: по ширине экрана */
  .kp-table{
    width:100%;
    min-width:0;
    table-layout:fixed;
  }

  /* ШИРОКИЕ таблицы (3–5 колонок) */
  .kp-table--wide{
    width:auto;
    min-width:640px;
    table-layout:auto;
  }

  .kp-table--wide thead th{
    padding:.5em .5em;
  }

  /* === 3 КОЛОНКИ: ~33% каждая === */
  .kp-table--wide thead tr > th:first-child:nth-last-child(3),
  .kp-table--wide thead tr > th:first-child:nth-last-child(3) ~ th{
    width:33.3333%;
  }

  /* === 4 КОЛОНКИ: по 25% === */
  .kp-table--wide thead tr > th:first-child:nth-last-child(4),
  .kp-table--wide thead tr > th:first-child:nth-last-child(4) ~ th{
    width:25%;
  }

  /* === 5 КОЛОНОК: по 20% === */
  .kp-table--wide thead tr > th:first-child:nth-last-child(5),
  .kp-table--wide thead tr > th:first-child:nth-last-child(5) ~ th{
    width:20%;
  }
}

/* 1) жёлтая шапка */
.kp-table thead th{
  background:var(--accent);
  font-weight:900;
  text-align:left;
  color:var(--ink);
  /* без наружной рамки сверху */
  border-top:0;
}

/* 2) тело таблицы — чуть темнее */
.kp-table tbody th,
.kp-table tbody td{
  background:#fdf8dd;
  font-weight:400;
}

/* 3) внутренняя сетка (вертикальные разделители) */
.kp-table th + th,
.kp-table th + td,
.kp-table td + td{
  border-left:var(--stroke) solid var(--ink);
}

/* 4) скругления углов */
.kp-table thead tr:first-child th:first-child{ border-top-left-radius:8px; }
.kp-table thead tr:first-child th:last-child { border-top-right-radius:8px; }
.kp-table tbody tr:last-child > :first-child  { border-bottom-left-radius:8px; }
.kp-table tbody tr:last-child > :last-child   { border-bottom-right-radius:8px; }

/*ПОЯВЛЕНИЕ ТАБЛИЦЫ */
.kp-resorts{
  margin-top:1.5rem;
}

/* Контейнер панелей с таблицами */
.kp-resorts__panes{
  position:relative;
  margin-top:1rem;

  /* высота задаётся переменной на .kp-resorts */
  min-height:var(--resorts-max-h, 150px);
}

/* отдельная панель курорта */
.kp-resorts__pane{
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease;
}

.kp-resorts__pane.is-active{
  position:relative;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* мобильная версия — без фиксированной высоты, пусть растёт как нужно */
@media (max-width: 768px){
  .kp-resorts{ --resorts-max-h:auto; }
}

/* десктоп: модификаторы высоты под конкретный блок */
@media (min-width: 769px){
  .kp-resorts--h300{ --resorts-max-h:300px; }
  .kp-resorts--h360{ --resorts-max-h:360px; }
  .kp-resorts--h380{ --resorts-max-h:380px; }
  .kp-resorts--h420{ --resorts-max-h:420px; }
  .kp-resorts--h450{ --resorts-max-h:450px; }
  .kp-resorts--h480{ --resorts-max-h:480px; }
  .kp-resorts--h520{ --resorts-max-h:520px; }
  .kp-resorts--h560{ --resorts-max-h:560px; }
  .kp-resorts--h580{ --resorts-max-h:580px; }
  .kp-resorts--h600{ --resorts-max-h:600px; }
}

/* ОБЁРТКА ПАНЕЛЕЙ: одна строка грида, все панели лежат друг на друге */
.kp-note,
.kp-note-tabs {
  margin-top: 1rem;
}

/* Кнопки-табики */
.kp-note__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .25rem;
}

.kp-note__tab {
  padding: .25rem .75rem;
  border-radius: 14px;
  border: 1px solid var(--stroke, #ccc);
  background: #b9bccb;
  font-size: 14px;
  cursor: pointer;
  margin:4px 0 4px;

  /* лёгкий 3D / приподнятый вид */
  box-shadow: 0 1px 0 rgba(0,0,0,.14);
  transition: background .15s ease, box-shadow .15s ease, transform .12s ease;
  will-change: transform, box-shadow;
}

.kp-note__tab:active { transform: translateY(0); } /* тап/клик — сброс */
.kp-note__tab.is-active {
  background: #fff;
  box-shadow:
    0 4px 0 rgba(0,0,0,.18),
    0 0 0 2px rgba(0,0,0,.06);
  transform: translateY(-2px);
}

/* Обёртка панелей: использует кастомную переменную --note-max-h */
.kp-note__panes {
  position: relative;
  display: grid;
  grid-auto-rows: 1fr;
  margin-top: .75rem;

  /* ЖЁСТКАЯ высота */
  height: var(--note-max-h, 75px);
  max-height: var(--note-max-h, 75px);
  overflow: hidden;
}

/* Панели: все в одной ячейке грида, активная — видима и скроллится по необходимости */
.kp-note__pane {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease;

  height: 100%;          /* важно */
  overflow-y: auto;

  padding-right: .25rem;
  padding-bottom: .5rem;
  position: relative;
}

.kp-note__pane.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Тонкий скролл — появляется только при переполнении */
.kp-note__pane::-webkit-scrollbar { width: 4px; }
.kp-note__pane::-webkit-scrollbar-track { background: transparent; }
.kp-note__pane::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(0,0,0,.18);
}

.kp-note__pane {
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
}


@supports (scrollbar-color: auto) {
  .kp-note__pane {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,.35) transparent;
  }
}

/* Мобильная высота — для всех блоков на телефонах */
@media (max-width: 768px) {
  .kp-note { --note-max-h: 200px; }
}

/* Десктоп: модификаторы по высоте (поставь соответствующий класс на .kp-note) */
@media (min-width: 769px) {
  .kp-note--h100 { --note-max-h: 100px; }
  .kp-note--h125 { --note-max-h: 125px; }  
  .kp-note--h150 { --note-max-h: 150px; } 
  .kp-note--h175 { --note-max-h: 175px; }
  .kp-note--h200 { --note-max-h: 200px; }
  .kp-note--h201 { --note-max-h: 201px; }
  .kp-note--h225 { --note-max-h: 225px; }
  .kp-note--h250 { --note-max-h: 250px; }
  .kp-note--h275 { --note-max-h: 275px; }
  .kp-note--h300 { --note-max-h: 300px; }
  .kp-note--h325 { --note-max-h: 325px; }
  .kp-note--h350 { --note-max-h: 350px; }
  .kp-note--h375 { --note-max-h: 375px; }
  .kp-note--h400 { --note-max-h: 400px; }
  .kp-note--h550 { --note-max-h: 550px; }
  .kp-note--h1000 { --note-max-h: 1000px; }
}

/* Внутренние отступы/косметика заголовков */
.kp-note__pane > :first-child { margin-top: 0; }
.kp-note__pane h3.kp-anchor { margin-top: .25rem; }

/* Косметика по заголовкам внутри панелей */
.kp-note__pane > :first-child{
  margin-top:0;
}

.kp-note__pane h3.kp-anchor{
  margin-top:.25rem;
}

/* ТУЛБАР выбора курорта/сезона */
.kp-pricing__toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:1rem 2rem;
  margin:18px 0 12px;
}

.kp-pricing__group{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem;
}

.kp-pricing__group-label{
  font-size:.95rem;
  line-height:1.2;
  opacity:.8;
  white-space:nowrap;
}

@media (max-width:600px){
  .kp-pricing__toolbar{
    flex-direction:column;
    align-items:flex-start;
    gap:.75rem;
  }
}

/* Обёртка дропдауна под стрелочку */
.kp-pricing__select-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
}

/* Селект как «таблетка» (наследует всё от .kp-season__btn) */
.kp-pricing__select{
  min-width:180px;
  padding:6px 32px 6px 12px; /* справа место под стрелку */
  text-align:left;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}

/* Стрелочка у селекта */
.kp-pricing__select-wrap::after{
  content:"▾";
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:11px;
  pointer-events:none;
  opacity:.7;
}

/* Hover / focus — такой же характер, как у кнопок */
.kp-pricing__select:hover{
  box-shadow:
    0 2px 0 rgba(0,0,0,.06),
    0 10px 16px -10px rgba(0,0,0,.18);
}

.kp-pricing__select:focus-visible{
  outline:2px solid color-mix(in oklab, var(--ink) 70%, var(--paper) 30%);
  outline-offset:3px;
  border-color: currentColor;
}

/* =========================================================
   [A] KP TOC2 — Оглавление (десктоп + мобайл)  — ТВОЙ КОД
   ========================================================= */
.kp-toc2{
  --ink:#000; --paper:#fff; --accent:#ffeb3b; --stroke:3px; --shadow:6px 6px 0 var(--ink);
  --sticky-top:0px;
  position:sticky; top:var(--sticky-top, 58px); z-index:60; margin:14px 0;
}
.kp-toc2__container{ max-width:100%; margin:0 auto; padding-inline:clamp(12px,3vw,20px); }

/* обёртка кнопок ТОС: на десктопе — перенос строк, на мобиле переопределим */
.kp-toc2__wrap{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:left;
  background:var(--paper);
  border:var(--stroke) solid var(--ink);
  border-radius:14px; padding:8px; box-shadow:var(--shadow);
}
/* Десктоп: кнопки ТОС центр */
@media (min-width:900px){
  .kp-toc2__wrap{ justify-content:center; }
}

/* кнопки ТОС */
.kp-toc2__btn{
  --stroke:3px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:Arial, sans-serif; font-weight:600;
  font-size:clamp(14px,1.8vw,14px);
  color:var(--ink) !important; -webkit-text-fill-color:var(--ink) !important;
  background:#fff; border-radius:999px;
  border:var(--stroke) solid var(--ink);
  padding:.45em .9em; box-shadow:4px 4px 0 var(--ink);
  cursor:pointer; user-select:none;
  transition:transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.kp-toc2__btn:hover{ background:#fffbe8; transform:translateY(-1px); }
.kp-toc2__btn:active{ transform:translateY(1px); box-shadow:3px 3px 0 var(--ink); }
.kp-toc2__btn.is-current{ outline:4px solid #000; outline-offset:-2px; }
.kp-toc2__btn *, .kp-toc2__btn svg, .kp-toc2__btn svg *{
  color:currentColor !important; fill:currentColor !important; stroke:currentColor !important;
}

/* размер кнопок ТОС на очень маленьких экранах */
@media (max-width:600px){
  .kp-toc2__btn{ font-size:clamp(13px,3.6vw,16px); padding:.4em .8em; }
}

/* отключение анимаций при reduce motion */
@media (prefers-reduced-motion:reduce){
  .kp-toc2__btn{ transition:none; transform:none; }
}

/* =========================
   МОБИЛЬНЫЙ ГОРИЗОНТАЛЬНЫЙ СКРОЛЛ ТОС
   ========================= */
@media (max-width: 899px){
  .kp-toc2__wrap{
    flex-wrap:nowrap;
    gap:8px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding:8px 10px;
    scroll-snap-type:x proximity;
    mask-image:linear-gradient(to right,
                  transparent 0, black 12px,
                  black calc(100% - 12px), transparent 100%);
  }
  .kp-toc2__btn{ flex:0 0 auto; scroll-snap-align:start; }
  .kp-toc2__wrap::-webkit-scrollbar{ display:none; }
  .kp-toc2__wrap{ scrollbar-width:none; }
}

/* Подсказка под ТОС (видна только на мобиле) */
/* ХИНТ: заметнее, в виде пилюли + стрелка */
.kp-toc2__hint{
  display:none;
  margin-top:6px;
  padding:6px 12px;
  font-size:13px;
  font-weight:700;
  line-height:1;
  color:#5a39c8;
  background:rgba(172,146,255,.18);
  border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  user-select:none;
  white-space:nowrap;
}
.kp-toc2__hint::after{
  content:"→";
  display:inline-block;
  margin-left:.4em;
  transform:translateX(0);
  animation:kp-hint-arrow 1.2s ease-in-out infinite;
}
@keyframes kp-hint-arrow{ 50%{ transform:translateX(4px);} }

/* На мобайле — показываем и «прилипляем» над таблицей */
@media (max-width: 899px){
  .kp-toc2__hint{ display:inline-flex; align-items:center; position:sticky; top:6px; z-index:2; }
}

/* УВАЖАЕМ настройку «уменьшить анимацию» */
@media (prefers-reduced-motion: reduce){
  .kp-toc2__hint::after{ animation:none; }
}

/* ТАБЛИЦА: горизонтальный скролл + визуальная подсказка по краям */
.kp-tablewrap{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  position:relative;
}

/* Фейды по краям (fallback без mask) */
@media (max-width: 899px){
  .kp-tablewrap::before,
  .kp-tablewrap::after{
    content:"";
    position:sticky;
    top:0; bottom:0;
    width:12px;
    pointer-events:none;
    z-index:1;
  }
  .kp-tablewrap::before{
    left:0;
    background:linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 100%);
  }
  .kp-tablewrap::after{
    float:right; /* трюк для прилипания справа */
    right:0;
    background:linear-gradient(270deg, #fff 0%, rgba(255,255,255,0) 100%);
  }
}

/* Если поддерживается mask-image — используем более аккуратный вариант */
@supports (mask-image: linear-gradient(black, transparent)){
  @media (max-width: 899px){
    .kp-tablewrap{
      mask-image:linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
      -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
    }
    .kp-tablewrap::before,
    .kp-tablewrap::after{ display:none; }
  }
}

/* =========================
   MINI-CARDS — карточки для главной
   ========================= */
:root{
  --kp-gap: 18px;
      --kp-radius: 14px;
  --kp-radius-lg: 18px;
  --kp-accent:#ffb400;
}
/* СЕКЦИЯ */
.kp-artmenu{ position:relative; margin:28px 0 8px; }
.kp-artmenu__wrap{ position:relative; padding:0 56px; }  /* место для стрелок */

.kp-artmenu__head{
  display:flex; align-items:center; justify-content:space-between; margin:0 0 12px;
}
.kp-artmenu__title{ margin:0; font:800 24px/1.25 system-ui, -apple-system, Segoe UI, Roboto, Arial; color:#000; }

/* ЛЕНТА */
.kp-artmenu__row{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(280px, 320px);
  gap:var(--kp-gap);
  overflow-x:auto; overflow-y:hidden;
  padding:6px 2px 10px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;

  /* скрываем полосу прокрутки во всех браузерах */
  -ms-overflow-style:none;            /* IE/Edge legacy */
  scrollbar-width:none;               /* Firefox */
}
.kp-artmenu__row::-webkit-scrollbar{ display:none; } /* Chrome/Safari */

/* КАРТОЧКА — комикс-стиль */
.kp-artcard{
  position:relative;
  display:flex; flex-direction:column;
  background:#fff;
  border:4px solid #000;
  border-radius:18px;
  text-decoration:none; color:#000;
  scroll-snap-align:start;
  outline:none;

  box-shadow:6px 6px 0 #000;
}

/* эффект нажатия */
.kp-artcard:active{
  transform:translateY(2px);
  box-shadow:3px 3px 0 #000;
}

/* Превью */
.kp-artcard__thumb{
  position:relative; overflow:hidden;
  border-radius:14px 14px 0 0;
  aspect-ratio:16/9; background:#f3f5f7;
}
.kp-artcard__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Бейдж */
.kp-artcard__badge{
  position:absolute; top:10px; left:10px;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:28px; height:28px; padding:0 8px;
  border-radius:8px; background:var(--kp-accent); color:#000;
  font-weight:900; border:3px solid #000;
}

/* Заголовок */
.kp-artcard__title{
  padding:12px 14px 14px;
  font:900 16px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:#000; letter-spacing:.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  border-top:4px solid #000;
}

/* СТРЕЛКИ — белый круг с толстой чёрной обводкой и «тенью» */
.kp-artmenu__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:999px;
  background:#fff; color:#000; font-weight:900; font-size:20px;
  border:4px solid #000; box-shadow:0 6px 0 #000;
  display:grid; place-items:center; cursor:pointer; user-select:none; z-index:2;
  pointer-events:auto;
}
.kp-artmenu__nav.is-left{ left:10px; }
.kp-artmenu__nav.is-right{ right:10px; }
.kp-artmenu__nav:active{ transform:translateY(-50%) translateY(2px); box-shadow:0 3px 0 #000; }

/* Пунктирная «подложка» комикса (можешь убрать, если уже есть свой фон) */
.kp-comic__bg{
  background-image:radial-gradient(rgba(0,0,0,.06) 1px, transparent 1px);
  background-size:12px 12px; border-radius:20px;
}

/* АДАПТИВ */
@media (max-width:1200px){
  .kp-artmenu__wrap{ padding:0 48px; }
  .kp-artmenu__row{ grid-auto-columns:minmax(260px, 300px); }
}
@media (max-width:960px){
  .kp-artmenu__wrap{ padding:0 36px; }
  .kp-artmenu__row{ gap:14px; grid-auto-columns:72vw; }
  .kp-artmenu__title{ font-size:22px; }
}
@media (max-width:560px){
  .kp-artmenu__wrap{ padding:0 16px; }
  .kp-artmenu__row{ grid-auto-columns:78vw; }
  .kp-artmenu__nav{ display:none; }             /* на мобилке — свайп */
  .kp-artcard__title{ font-size:15px; padding:10px 12px 12px; }
}

/* Для пользователей с отключёнными анимациями */
@media (prefers-reduced-motion: reduce){
  .kp-artmenu__nav{ transition:none; }
}

/* Лента внутри статьи (комикс-страницы) */
.kp-comic .kp-artmenu.kp-artmenu--inarticle{
  margin: 24px 0;
}

.kp-comic .kp-artmenu--inarticle .kp-artmenu__title{
  font-size: 20px;
}

.kp-comic .kp-artmenu--inarticle .kp-artmenu__wrap{
  padding: 0 36px;
}

@media (max-width: 560px){
  .kp-comic .kp-artmenu--inarticle .kp-artmenu__wrap{
    padding: 0 16px;
  }
}
/* =========================
   MINI-CARDS — карточки для главной
   ========================= */
.kp-text-small{
  font-size: 0.875rem;   /* ~14px, подгони под свой базовый размер */
  line-height: 1.4;
}
   
/* =========================
   Глобальный плавный скролл к якорям
   ========================= */
html{
  scroll-behavior:smooth;
  scroll-padding-top:70px;
}
[id]{ scroll-margin-top:50px; }

/* СКРЫТЬ КАРТУ + КНОПКА "ПОКАЗАТЬ" */
:root{
  --kp-map-mobile-h: 60svh;
  --kp-map-desktop-max: 560px;
  --kp-map-gap-m:16px;     
  --kp-map-gap-d:28px;    
  --kp-map-radius:12px;    
}

.kp-map{ margin:12px 0 var(--kp-map-gap-m); }
@media (min-width:769px){
  .kp-map{ margin:16px 0 var(--kp-map-gap-d); }
}

.kp-map__slot{ line-height:0; }
.kp-map-frame{
  display:block; width:100%; border:0; border-radius:0
}

@media (max-width:768px){
  .kp-map-frame{ height:var(--kp-map-mobile-h); }
}
@media (min-width:769px){
  .kp-map-frame{ aspect-ratio:16/9; height:auto; max-height:var(--kp-map-desktop-max); }
}

.kp-map__previewwrap{
  position: relative;
  overflow: hidden;
  border-radius: var(--kp-map-radius);
}

/* Изображение всегда заполняет контейнер, кадрируем при необходимости */
.kp-map__preview{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right;
}

/* Ландшафт: 16:9 */
@media (orientation: landscape){
  .kp-map__previewwrap{ aspect-ratio: 16 / 9; }
}

/* Портрет: 9:16 */
@media (orientation: portrait){
  .kp-map__previewwrap{ aspect-ratio: 9 / 12; }
}

.kp-map__slot[hidden]{ display:none; }
.kp-map.is-open .kp-map__previewwrap{ display:none; }
.kp-map.is-open .kp-map__slot{
  display:block;
  border-radius:var(--kp-map-radius);
  overflow:hidden;
}
.kp-map.is-open .kp-map__slot[hidden]{ display:block !important; }

.kp-map__btn{
  position:absolute; left:10px; top:10px;
  background:var(--accent); color:var(--ink);
  border:var(--stroke) solid var(--ink); border-radius:12px;
  padding:.45em .9em; box-shadow:4px 4px 0 var(--ink);
  font-weight:900; cursor:pointer; transition:transform .12s ease;
}
.kp-map__btn:hover{ transform:translateY(-1px); }
.kp-map__btn:active{ transform:translateY(1px); }

@supports (-webkit-touch-callout:none){
  .kp-map.is-open .kp-map__slot{
    -webkit-mask-image:-webkit-radial-gradient(white,black);
    contain:paint;
  }
}
/* СТАТЬЯ + ТАБЛИЦЫ + КАРТОЧКИ + ТОС*/

/*ПОДВАЛ*/
.kp-footer{
  --ink:#0b0b0b;
  --paper:#fffef7;
  --accent:#ffe600;
  --stroke:3px;
  --radius:16px;
  --gap: clamp(14px, 2.5vw, 24px);

  color:var(--ink);
  font-family:Arial, sans-serif;
}
.kp-footer,
.kp-footer *{
    color: var(--ink) !important;
    -webkit-text-fill-color: var(--ink) !important;
}

/* Подложка и рамка */
.kp-footer__bg{
  background:
    radial-gradient(circle at 8px 8px, rgba(0,0,0,.06) 2px, transparent 2px) 0 0/16px 16px,
    var(--paper);
  border: var(--stroke) solid var(--ink);
  border-radius: calc(var(--radius) + 6px);
  padding: clamp(16px, 3vw, 28px);
}

/* Верхняя полоса */
.kp-footer__top{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:var(--gap);
}

/* Бренд — жёлтый бейдж */
.kp-footer__brand{
  text-decoration:none; color:var(--ink);
  background: var(--accent);
  border: var(--stroke) solid var(--ink);
  border-radius: 12px;
  padding:.35em .6em;
  box-shadow: 6px 6px 0 var(--ink);
  font-family: Arial, sans-serif;
  font-size: clamp(20px, 3.2vw, 28px);
  line-height:1.05;
  display:inline-block;
}
.kp-footer__tag{ margin:0; font-weight:700; }

/* Сетка колонок */
.kp-footer__grid{
  display:grid; gap: var(--gap);
  grid-template-columns: 1fr;
  margin-bottom: var(--gap);
}
@media (min-width: 860px){
  .kp-footer__grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* Карточки-колонки */
.kp-footer__col{
  background:#fff;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--ink);
  padding: 14px 16px 16px;
}

/* Заголовки колонок — белые пилюли */
.kp-footer__heading{
  display:inline-block;
  font-family:Arial, sans-serif;
  font-size: 22px;
  background:#fff;
  border: var(--stroke) solid var(--ink);
  border-radius: 10px;
  padding:.25em .6em;
  margin:0 0 .6em 0;
}

/* Списки ссылок */
.kp-footer__list{ list-style:none; margin:0; padding:0; }
.kp-footer__list li{ margin:.45em 0; }
.kp-footer__list a{
  text-decoration:none; color:var(--ink); font-weight:700;
  border-bottom: 2px solid transparent;
  transition: transform .1s ease, border-color .15s ease, background .15s ease;
  padding:2px 4px; border-radius:8px;
}
.kp-footer__list a:hover{
  border-color: var(--ink);
  background: #fffbe8;
}

/* Соцсети */
.kp-footer__social{ display:flex; gap:10px; margin-top:.4em; }
.kp-social{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px;
  background:#fff; color:var(--ink);
  border: var(--stroke) solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .1s ease, background .15s ease;
}
.kp-social:hover{ scale(1.05); background: var(--accent); }

/* Форма подписки */
.kp-footer__form{ display:flex; gap:8px; margin-top:.4em; }
.kp-input{
  flex:1 1 auto; min-width:0;
  background:#fff; border: var(--stroke) solid var(--ink);
  border-radius:10px; padding:.6em .75em; font-weight:700;
}
.kp-btn{
  background: var(--accent); color:var(--ink);
  border: var(--stroke) solid var(--ink);
  border-radius:12px; padding:.6em .9em; font-weight:900;
  box-shadow: 6px 6px 0 var(--ink);
  cursor:pointer; transition: transform .1s ease, background .15s ease;
}
.kp-btn:hover{ transform: translateY(-1px); background:#ffd800; }
.kp-footer__note{ font-size:.9em; opacity:.9; margin:.6em 0 0; }

/* Нижняя полоса */
.kp-footer__bottom{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  justify-content:space-between;
  border-top: var(--stroke) solid var(--ink);
  padding-top: 12px;
}
.kp-footer__legal{ list-style:none; display:flex; gap:12px; margin:0; padding:0; }
.kp-footer__legal a{ color:inherit; text-decoration:none; border-bottom:2px solid transparent; }
.kp-footer__legal a:hover{ border-color:var(--ink); }

/* Кнопка «Наверх» */
.kp-footer__totop{
  background: #fff;
  border: var(--stroke) solid var(--ink);
  border-radius: 12px;
  width:42px; height:42px; line-height:1;
  box-shadow: 6px 6px 0 var(--ink);
  font-weight:900; cursor:pointer;
  transition: transform .1s ease, background .15s ease;
}
.kp-footer__totop:hover{ background: var(--accent); }

/* Мобилки */
@media (max-width: 600px){
  .kp-footer__form{ flex-direction:column; }
  .kp-input{ width:100%; box-sizing:border-box; }
  .kp-btn{ width:100%; box-sizing:border-box; margin-top:8px; }
}
@media (prefers-reduced-motion: reduce){
  .kp-footer__list a,
  .kp-social,
  .kp-btn,
  .kp-footer__totop{ transition: none; transform:none; }
}
/*ПОДВАЛ*/

/* ========= FILTER STYLES ========= */
:root{ --kp-ink:#111; }

#kp-guides .kp-filter{position:sticky;top:var(--kp-sticky,0px);z-index:5;background:#fff;border:2px solid var(--kp-ink);border-radius:12px;padding:.6rem .75rem;margin:12px 0 16px;box-shadow:0 6px 20px rgba(0,0,0,.06);contain:content}
#kp-guides .kp-filter__top{display:flex;align-items:center;gap:10px;margin-bottom:.5rem}
#kp-guides .kp-filter__title{font-size:14px;color:var(--kp-ink);opacity:.85}
#kp-guides .kp-filter__tools{display:flex;gap:8px;align-items:center;margin-left:auto}
#kp-guides .kp-filter__count{font-size:13px;opacity:.8;white-space:nowrap}

#rental-list #rental-cards{ margin-top:10px; }  /* зазор перед таблицей/карточками */

#kp-guides .kp-filter__wrap{display:flex;gap:8px;overflow:auto;padding-bottom:2px;scrollbar-width:thin;-ms-overflow-style:-ms-autohiding-scrollbar;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
#kp-guides .kp-filter__wrap::-webkit-scrollbar{height:6px}
#kp-guides .kp-filter__wrap::-webkit-scrollbar-thumb{background:rgba(0,0,0,.25);border-radius:99px}
#kp-guides .kp-filter__hint{font-size:12px;opacity:.6;margin-top:.4rem}

#kp-guides .kp-chip{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:.4em;height:36px;padding:0 1em;border-radius:999px;border:2px solid var(--kp-ink);background:#fff;color:var(--kp-ink);font:600 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;cursor:pointer;user-select:none;box-shadow:0 2px 0 var(--kp-ink);transition:background-color .12s ease,color .12s ease,box-shadow .12s ease,border-color .12s ease}
#kp-guides .kp-chip:hover{box-shadow:0 1px 0 var(--kp-ink)}
#kp-guides .kp-chip:active{box-shadow:0 0 0 var(--kp-ink)}
#kp-guides .kp-chip:focus-visible{outline:2px solid var(--kp-ink);outline-offset:2px}
#kp-guides .kp-chip.is-active{background:var(--kp-ink);color:#fff;border-color:var(--kp-ink)}
#kp-guides .kp-chip--ghost{background:#fff;border-style:dashed}

  /* скрытие карточек */
#kp-guides .kp-comic__panel.is-hidden{display:none !important}

  /* мобильные правки */
@media (max-width:640px){
  /* сам контейнер фильтра */
  .kp-filter--comic,
  #kp-guides .kp-filter{
    box-sizing: border-box;
    margin: 12px 0 14px !important;         /* убираем растяжение в край */
    padding: .6rem .75rem !important;       /* внутренние отступы */
    border-radius: 12px;
  }
}
  /* сниженная анимация */
@media (prefers-reduced-motion: reduce){
  #kp-guides .kp-chip{transition:none}
}
/* ========= FILTER STYLES ========= */

/* FAQ */
/* Заголовок + список */
.kp-faq__title{font-size:22px;margin:0 0 16px}
.kp-faq__list{display:grid;gap:8px}

/* Карточка FAQ */
.kp-faq__item{
  border:1px solid var(--stroke,rgba(0,0,0,.12));
  border-radius:12px;
  background:var(--card,rgba(0,0,0,.03));
  overflow:hidden;
  transition:box-shadow .15s ease, transform .12s ease;
  scroll-margin-top: 84px;
}
.kp-faq__item:hover{box-shadow:0 1px 0 rgba(0,0,0,.06);transform:translateY(-1px)}
.kp-faq__item.is-target{
  box-shadow:0 0 0 2px var(--accent,#ffd54f) inset;
  background:var(--card-hover,rgba(0,0,0,.06));
}
/* Кнопка-вопрос (summary) */
.kp-faq__q{
  cursor:pointer; padding:12px 16px;
  font-weight:700; list-style:none; position:relative; color:inherit;
}
.kp-faq__q::-webkit-details-marker{display:none}

/* Индикатор стрелки по умолчанию */
.kp-faq__q::after{
  content:"▾";
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  color:rgba(0,0,0,.35);
  transition:transform .2s ease, color .15s ease;
}
.kp-faq__item[open] .kp-faq__q{border-bottom:1px solid var(--stroke,rgba(0,0,0,.1))}
.kp-faq__item[open] .kp-faq__q::after{transform:translateY(-50%) rotate(180deg)}
.kp-faq__item:hover .kp-faq__q::after,
.kp-faq__item:focus-within .kp-faq__q::after{color:rgba(0,0,0,.6)}

/* Ответ (для обычного варианта) */
.kp-faq__a{padding:12px 16px}

/* Фокус клавиатурой */
.kp-faq__item:focus-within .kp-faq__q{
  outline:0;
  box-shadow:0 0 0 2px var(--accent,#ffd54f) inset;
  background:var(--card-hover,rgba(0,0,0,.06));
}

/* --- Модификатор inline: вопрос⇄ответ в одной строке --- */
.kp-faq--inline .kp-faq__a{display:none}                /* прячем блок ответа */
.kp-faq--inline .kp-faq__q::after{content:"❓"}          /* значок по умолчанию */
.kp-faq--inline[open] .kp-faq__q{border-bottom:0}       /* линия не нужна */
.kp-faq--inline[open] .kp-faq__q::after{content:"↩";transform:none}

/* Плавная подмена текста */
.kp-faq__label{display:inline-block;transition:opacity .15s ease}
.kp-faq__label.is-fading { opacity:.5; transition:opacity .18s ease; }
/* FAQ */

/* ДЕКОР картинка */
.kp-panel-wideimg {
  margin-top: 12px;
  position: relative;
  display: block;
  width: 100%;
  height: 180px;
/* ДЕКОР картинка */