/* KidSmile — «наклейки»: яркие заливки бренда, чёрная обводка и жёсткая тень,
   как у самого логотипа. Шрифт бренда — Kievit (платный); пока файлов нет, работает
   Fira Sans — похожий гуманистический гротеск.
   Когда будут файлы: положить kievit-regular/bold/black.woff2 в эту папку и раскомментировать:
@font-face { font-family: "Kievit"; src: url("/site/kievit-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Kievit"; src: url("/site/kievit-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Kievit"; src: url("/site/kievit-black.woff2") format("woff2"); font-weight: 800 900; font-display: swap; }
*/
@font-face { font-family: "Fira Sans"; font-weight: 400; font-display: swap; src: url("/static/fonts/fira-sans-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Fira Sans"; font-weight: 400; font-display: swap; src: url("/static/fonts/fira-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fira Sans"; font-weight: 500; font-display: swap; src: url("/static/fonts/fira-sans-cyrillic-500-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Fira Sans"; font-weight: 500; font-display: swap; src: url("/static/fonts/fira-sans-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Fira Sans"; font-weight: 700; font-display: swap; src: url("/static/fonts/fira-sans-cyrillic-700-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Fira Sans"; font-weight: 700; font-display: swap; src: url("/static/fonts/fira-sans-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Fira Sans"; font-weight: 800; font-display: swap; src: url("/static/fonts/fira-sans-cyrillic-800-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Fira Sans"; font-weight: 800; font-display: swap; src: url("/static/fonts/fira-sans-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }

:root {
  --pink: #f6549e;
  --blue: #00a3e9;
  --yellow: #ffee00;
  --black: #272524;
  --pink-soft: #ffe6f1;
  --blue-soft: #e1f5fd;
  --yellow-soft: #fffbcc;

  --bg: #ffffff;                    /* Ильфар 2026-10-19: «везде белый фон»; цвет бренда — в обводках, кнопках, кружках */
  --surface: #ffffff;
  --surface-2: #ffffff;
  --ink: var(--black);
  --ink-2: #625b5e;
  --ink-3: #7a7276;                  /* старая цена и подписи: 4.6:1 на белом */
  --line: #f0dfe7;
  --primary: var(--yellow);          /* Ильфар 2026-10-19: кнопки жёлтые вместо розовых */
  --primary-ink: var(--black);      /* тёмный текст на розовом: контраст 4.8:1 (белый — только 3.1:1) */
  --primary-hover: #fff35c;
  --secondary: #0083bd;             /* синий бренда, затемнён для текста-ссылок (AA) */
  --accent: var(--yellow);
  --accent-ink: var(--black);
  --sale: var(--pink);
  --success: #12804a;
  --topbar-bg: var(--blue);
  --topbar-ink: var(--black);       /* на синем бренда только тёмный текст: 5.4:1 (белый 2.8:1) */
  --field-bg: #f5f4f4;
  --footer-bg: var(--black);
  --footer-ink: #ffffff;
  --footer-muted: #c9c2c5;

  --font-body: "Kievit", "Fira Sans", system-ui, sans-serif;
  --font-head: "Kievit", "Fira Sans", system-ui, sans-serif;
  --head-weight: 800;
  --head-tracking: -0.015em;

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --border-w: 2px;
  --sticker: 2px solid var(--black);
  --sticker-shadow: 4px 4px 0 var(--black);
  --shadow-pop: 4px 4px 0 var(--black);   /* при наведении тень чуть растёт, а не появляется из ниоткуда */
  --card-border: 2px solid var(--black);
  --perk-icon: var(--pink);
}

.topbar { font-weight: 600; }
.topbar a, .topbar span { color: var(--black); }

/* кнопки-наклейки */
.btn { --b-line: var(--black); box-shadow: 3px 3px 0 var(--black); }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--black); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--black); }
.btn--light { --b-line: var(--black); }
.btn--ghost { box-shadow: none; }
.btn--blue { --b-bg: var(--blue); --b-ink: var(--black); }
.card__buy { box-shadow: 2px 2px 0 var(--black); }

/* карточки */
.card, .tile { border: var(--card-border); box-shadow: 2px 2px 0 var(--black); }
.card:hover { --lift: -1px; }
.tile:hover { transform: translate(-1px, -1px); }
.badge { border: 2px solid var(--black); height: 28px; }
.badge--new { background: var(--blue); color: var(--black); }
.badge--sale { background: var(--pink); color: var(--black); }
.chip { border: 2px solid var(--black); }
.chip:hover, .chip.is-active { background: var(--yellow); }
.pager .is-current { background: var(--pink); color: var(--black); border-color: var(--black); }
.pager a, .pager span { border: 2px solid var(--black); }
.cart-count { border: 2px solid #fff; left: 16px; top: -2px; color: var(--black); }
.search input { border: 2px solid transparent; }
.search input:focus { border-color: var(--black); }
.gallery__main, .line, .summary, .done-card { border: 2px solid var(--black); }
.summary, .perks, .contact { background: #fff; border: var(--sticker); }

/* заголовки секций с маркером-подчёркиванием */
.mark { background: linear-gradient(transparent 62%, var(--yellow) 62% 92%, transparent 92%); padding: 0 .08em; }
.section__head h2 { position: relative; }

/* --- главная ------------------------------------------------------------- */
.ks-hero .slider__track { border-radius: var(--r-lg); }
.ks-slide { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 24px; padding: 48px 56px; border: var(--sticker); box-shadow: var(--sticker-shadow); margin: 0 6px 8px 0; isolation: isolate; }
.ks-slide { background: #fff; }
.ks-slide__text { position: relative; z-index: 1; max-width: 560px; }
.ks-slide__kicker { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: var(--r-pill); background: var(--yellow); color: var(--black); border: var(--sticker); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 18px; }
.ks-slide h2 { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.04; letter-spacing: -0.025em; margin-bottom: 16px; }
.ks-slide p { font-size: 18px; max-width: 460px; margin-bottom: 26px; }
.ks-slide .btn { --b-bg: var(--yellow); --b-ink: var(--black); }
.ks-slide__art { position: relative; justify-self: center; width: min(340px, 100%); }
.ks-slide__art img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 24px; border: var(--sticker); box-shadow: 8px 8px 0 var(--black); transform: rotate(3deg); background: #fff; }
.ks-slide:nth-child(even) .ks-slide__art img { transform: rotate(-3deg); }
/* декор: круг-наклейка в углу (простые геометрические метки в цветах бренда) */
.ks-dot { position: absolute; border-radius: 50%; border: var(--sticker); z-index: -1; }
.ks-dot--a { width: 300px; height: 300px; right: -70px; top: -110px; background: var(--yellow); }
/* солнце из логотипа: явно декор, не похоже на кнопку */
/* 3D-веер хитов в первом баннере: поворачивается за курсором */
.ks-fan { perspective: 1100px; }
.ks-fan__stage { position: relative; transform-style: preserve-3d; transform: rotateX(var(--fy, 0deg)) rotateY(var(--fx, 0deg)); transition: transform .25s var(--ease); }
.ks-fan .ks-fan__main { position: relative; transform: translateZ(40px) rotate(3deg); }
.ks-fan .ks-fan__side { position: absolute; top: 8%; width: 78%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 20px; border: var(--sticker); box-shadow: 5px 5px 0 var(--black); background: #fff; }
.ks-fan .ks-fan__side--l { left: -34%; transform: translateZ(-50px) rotate(-14deg); }
.ks-fan .ks-fan__side--r { right: -34%; transform: translateZ(-50px) rotate(14deg); }
.ks-sun { position: absolute; z-index: -1; width: 120px; height: 120px; left: 44%; bottom: 22px; background: url("/site/apple-touch-icon.png") center / contain no-repeat; transform: rotate(-12deg); pointer-events: none; }
.ks-slide:nth-child(3n+2) .ks-dot--a { background: var(--pink); }
.ks-slide:nth-child(3n+3) .ks-dot--a { background: var(--blue); }
.ks-slide:nth-child(3n+3) .ks-slide__kicker .icon { color: var(--pink); width: 18px; height: 18px; }
@media (prefers-reduced-motion: no-preference) {
  .ks-slide:first-child .ks-slide__text > * { animation: ks-rise .7s var(--ease) both; }
  .ks-slide:first-child .ks-slide__text > :nth-child(2) { animation-delay: .06s; }
  .ks-slide:first-child .ks-slide__text > :nth-child(3) { animation-delay: .12s; }
  .ks-slide:first-child .ks-slide__text > :nth-child(4) { animation-delay: .18s; }
  .ks-slide:first-child .ks-slide__art { animation: ks-pop .7s .15s cubic-bezier(.3, 1.4, .5, 1) both; }
}
@keyframes ks-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes ks-pop { from { opacity: 0; transform: scale(.85) rotate(-4deg); } }

.ks-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 28px 0 8px; }
.ks-trust div { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border: var(--sticker); border-radius: var(--r-md); background: #fff; }
.ks-trust b { display: block; font-size: 17px; line-height: 1.2; }
.ks-trust small { color: var(--ink-2); font-size: 14px; }
.ks-trust__ico { width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center; border: var(--sticker); }
.ks-trust__ico .icon { width: 24px; height: 24px; }
.ks-trust div:nth-child(1) .ks-trust__ico { background: var(--yellow); }
.ks-trust div:nth-child(2) .ks-trust__ico { background: var(--pink); }
.ks-trust div:nth-child(3) .ks-trust__ico { background: var(--blue); }
.ks-trust div:nth-child(4) .ks-trust__ico { background: var(--yellow); }

.ks-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.ks-cat { position: relative; display: grid; gap: 12px; padding: 14px 14px 16px; border: var(--sticker); border-radius: var(--r-md); background: var(--c, var(--pink-soft)); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.ks-cat { box-shadow: 2px 2px 0 var(--black); }
.ks-cat:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--black); }
.ks-cat { --c: #fff; }
.ks-cat__img { aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #fff; border: 2px solid var(--black); }
.ks-cat__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ks-cat b { font-size: 17px; line-height: 1.2; }
.ks-cat small { color: var(--ink-2); font-weight: 600; }

.ks-wb { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; padding: 32px 40px; border: var(--sticker); border-radius: var(--r-lg); background: #fff; color: var(--black); box-shadow: var(--sticker-shadow); }
.ks-wb__score { font-size: 64px; font-weight: 800; line-height: 1; display: flex; align-items: center; gap: 10px; }
.ks-wb__score .icon { width: 48px; height: 48px; color: var(--pink); }
.ks-wb h2 { margin: 0 0 6px; font-size: 28px; }
.ks-wb p { margin: 0; opacity: .95; }
.ks-wb .btn { --b-bg: var(--blue); --b-ink: var(--black); }

/* белая плашка на ссылке, а не на картинке: padding у img с фиксированной высотой сплющивал логотип */
.footer .footer__logo { background: #fff; padding: 10px 16px; border-radius: 14px; }
.footer .footer__logo img { height: 48px; width: auto; }

@media (max-width: 900px) {
  .ks-slide { grid-template-columns: 1fr; padding: 28px 24px 32px; text-align: left; }
  .ks-slide__art { width: 52%; justify-self: end; margin-top: -8px; order: -1; }
  .ks-slide p { font-size: 16px; }
  .ks-trust { grid-template-columns: 1fr 1fr; }
  .ks-wb { grid-template-columns: 1fr; padding: 28px 24px; gap: 16px; }
}
@media (max-width: 600px) {
  .ks-trust { grid-template-columns: 1fr; gap: 10px; }
  .ks-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ks-slide__art { width: 46%; }
  }

.slider__arrow { border: 2px solid var(--black); box-shadow: 2px 2px 0 var(--black); }
.slider__dots button { background-color: #d9c4ce; }
.slider__dots button[aria-current="true"] { background-color: var(--pink); }

/* жёлтый на белом без обводки теряется: подчёркивание меню — розовым, счётчик корзины — с обводкой */
.mainnav a:hover, .mainnav a.is-active { border-bottom-color: var(--pink); }
.cart-count { border: 2px solid var(--black); }
.review { border: var(--sticker); box-shadow: 2px 2px 0 var(--black); }