@import url("/fonts/fonts.css");
/* =============================================================================
   Крафтовые сладости — style.css (пастельный редизайн каталога)
   - пастельная палитра (управляется переменными --ks-* в :root)
   - каталог: 2 колонки (фильтр 360px слева + товары справа), сетка 4/3/2/1
   - обычные кнопки «В корзину» на всю ширину карточки (БЕЗ круглого «+»)
   - компактные уведомления WooCommerce
   - мобильный фильтр сворачивается (нативная кнопка Filter Everything / JS-фолбэк)
   Единый «финальный» блок каталога — см. секцию «КАТАЛОГ» внизу файла.
   ============================================================================= */

:root {
  /* Пастельная палитра витрины. Фирменные цвета с визитки лежат рядом
     как --ks-brand-*: пригодятся точечно (лого, акценты), но всю витрину
     на них не перекрашиваем — клиент вернул прежний вид. */
  --ks-brand-cream: #fff5e6;      /* бренд */
  --ks-brand-peach: #f7c9bb;      /* бренд */
  --ks-brand-lilac: #c9a76d;      /* бренд */
  --ks-brand-coral: #6e1f2e;      /* бренд */
  --ks-brand-orange: #f08a4b;     /* бренд */
  --ks-brand-terracotta: #d76a3d; /* бренд */
  --ks-brand-brown: #8b4a20;      /* бренд */
  --ks-brand-cocoa: #4a2416;      /* бренд */
  --ks-brand-caramel: #e8c69e;    /* бренд */
  --ks-brand-stone: #d9d1c6;      /* бренд */
  --ks-brand-gradient: linear-gradient(
    90deg, #fff5e6 0%, #f7c9bb 28%, #d6b4e6 58%, #f08a4b 100%);

  --ks-cream: #fbf6ef;
  --ks-cream-2: #f3ebe0;
  --ks-card: #ffffff;
  --ks-blush: #e4d3c3;
  --ks-blush-soft: #f2e9e0;
  --ks-rose: #6e1f2e;
  --ks-rose-dark: #4f1420;
  --ks-wine: #a07a45;
  --ks-burgundy: #3a1820;
  --ks-chocolate: #3a1820;
  --ks-gold: #c9a76d;
  --ks-gold-soft: #efe3c8;
  --ks-text: #33262a;
  --ks-text-muted: #8a7b74;
  --ks-text-invert: #fbf6ef;
  --ks-border: #ebe1d5;
  --ks-border-strong: #dccdbc;
  --ks-success: #8cb89f;
  --ks-sale: #6e1f2e;
  --ks-shade: 58, 24, 32;
  --ks-accent-rgb: 110, 31, 46;          /* тени и вуали, rgb без альфы */
  --ks-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --ks-font-body:
    "Montserrat", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ks-font-accent: "Caveat", "Comic Sans MS", cursive;
  /* Леттеринг с визитки — жирный брашевый скрипт. Логотип берёт его,
     рукописный Caveat остаётся для мелких акцентов в тексте. */
  --ks-font-logo: "Pacifico", "Caveat", cursive;
  --ks-fs-eyebrow: 0.78rem;
  --ks-fs-base: 1rem;
  --ks-fs-lead: 1.125rem;
  --ks-fs-h6: 1.05rem;
  --ks-fs-h5: 1.3rem;
  --ks-fs-h4: 1.6rem;
  --ks-fs-h3: 2rem;
  --ks-fs-h2: 2.6rem;
  --ks-fs-h1: 3.4rem;
  --ks-lh-tight: 1.15;
  --ks-lh-base: 1.7;
  --ks-space-xs: 0.5rem;
  --ks-space-sm: 1rem;
  --ks-space-md: 1.75rem;
  --ks-space-lg: 3rem;
  --ks-space-xl: 5rem;
  --ks-space-2xl: 7rem;
  --ks-container: 1200px;
  --ks-container-narrow: 820px;
  --ks-gutter: 1.5rem;
  --ks-radius-sm: 10px;
  --ks-radius: 18px;
  --ks-radius-lg: 28px;
  --ks-radius-pill: 999px;
  --ks-shadow-sm: 0 4px 14px rgba(var(--ks-shade), 0.08);
  --ks-shadow: 0 14px 40px rgba(var(--ks-shade), 0.12);
  --ks-shadow-lg: 0 26px 60px rgba(var(--ks-shade), 0.18);
  --ks-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ks-transition: 0.28s var(--ks-ease);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  max-width: 100%;
  /* clip, а не hidden: hidden делает body скролл-контейнером и убивает
     position:sticky у панели фильтров. Обрезает точно так же. */
  overflow-x: clip;
}
body {
  margin: 0;
  background-color: var(--ks-cream);
  color: var(--ks-text);
  font-family: var(--ks-font-body);
  font-size: var(--ks-fs-base);
  line-height: var(--ks-lh-base);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.ks,
.ks-scope {
  background-color: var(--ks-cream);
  color: var(--ks-text);
  font-family: var(--ks-font-body);
}
.ks-container {
  width: 100%;
  max-width: var(--ks-container);
  margin-inline: auto;
  padding-inline: var(--ks-gutter);
}
.ks-container--narrow {
  max-width: var(--ks-container-narrow);
}
img {
  max-width: 100%;
  height: auto;
}
::selection {
  background: var(--ks-blush);
  color: var(--ks-burgundy);
}

h1,
h2,
h3,
h4,
h5,
h6,
.ks-h1,
.ks-h2,
.ks-h3,
.ks-h4 {
  font-family: var(--ks-font-display);
  color: var(--ks-burgundy);
  line-height: var(--ks-lh-tight);
  font-weight: 600;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h1,
.ks-h1 {
  font-size: var(--ks-fs-h1);
  font-weight: 700;
}
h2,
.ks-h2 {
  font-size: var(--ks-fs-h2);
}
h3,
.ks-h3 {
  font-size: var(--ks-fs-h3);
}
h4,
.ks-h4 {
  font-size: var(--ks-fs-h4);
}
h5 {
  font-size: var(--ks-fs-h5);
}
h6 {
  font-size: var(--ks-fs-h6);
}
p {
  margin: 0 0 1.1em;
}
.ks-lead {
  font-size: var(--ks-fs-lead);
  color: var(--ks-text-muted);
}
a {
  color: var(--ks-wine);
  text-decoration: none;
  transition: color var(--ks-transition);
}
a:hover {
  color: var(--ks-rose-dark);
}
strong,
b {
  font-weight: 600;
  color: var(--ks-chocolate);
}
small,
.ks-muted {
  color: var(--ks-text-muted);
}
.ks-eyebrow {
  display: inline-block;
  font-family: var(--ks-font-body);
  font-size: var(--ks-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ks-rose);
  margin-bottom: 0.75rem;
}
.ks-script {
  font-family: var(--ks-font-accent);
  font-size: 2.4rem;
  color: var(--ks-rose);
  line-height: 1;
}
.ks-wave {
  width: 64px;
  height: 12px;
  margin: 0.5rem 0 0;
  background: radial-gradient(
      circle at 8px 10px,
      transparent 6px,
      var(--ks-rose) 6px 7px,
      transparent 7px
    )
    repeat-x;
  background-size: 16px 16px;
  opacity: 0.8;
}

.ks-section {
  padding-block: var(--ks-space-2xl);
  position: relative;
}
.ks-section--sm {
  padding-block: var(--ks-space-xl);
}
.ks-section--cream2 {
  background: var(--ks-cream-2);
}
.ks-section--blush {
  background: var(--ks-blush-soft);
}
.ks-section--dark {
  background: var(--ks-burgundy);
  color: var(--ks-text-invert);
}
.ks-section--dark h1,
.ks-section--dark h2,
.ks-section--dark h3 {
  color: var(--ks-text-invert);
}
.ks-section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--ks-space-lg);
}
.ks-section-head .ks-wave {
  margin-inline: auto;
}
.ks-blob {
  position: relative;
}
.ks-blob::before {
  content: "";
  position: absolute;
  inset: -8% -6% auto auto;
  width: 70%;
  aspect-ratio: 1;
  background: var(--ks-blush);
  border-radius: 42% 58% 63% 37% / 47% 42% 58% 53%;
  z-index: 0;
  filter: blur(2px);
}
.ks-blob > * {
  position: relative;
  z-index: 1;
}

/* HEADER */
.ks-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: rgba(253, 249, 246, 0.88);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--ks-border);
}
.ks-header__inner {
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: 28px;
  position: relative;
}
.ks-logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: 250px;
}
.ks-logo__img {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
}
.ks-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 28px;
}
.ks-nav a {
  position: relative;
  padding: 8px 0;
  color: var(--ks-chocolate);
  font-size: 15px;
  font-weight: 600;
}
.ks-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--ks-rose);
  transition: right var(--ks-transition);
}
.ks-nav a:hover,
.ks-nav a.current,
.ks-nav .current-menu-item > a {
  color: var(--ks-burgundy);
}
.ks-nav a:hover::after,
.ks-nav a.current::after,
.ks-nav .current-menu-item > a::after {
  right: 0;
}
.ks-header__utils {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.ks-lang {
  display: inline-flex;
  gap: 8px;
  font-size: 13px;
  color: var(--ks-text-muted);
}
.ks-lang a.is-active {
  color: var(--ks-burgundy);
  font-weight: 700;
}
.ks-cart-link {
  position: relative;
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--ks-radius-pill);
  background: var(--ks-card);
  border: 1px solid var(--ks-border);
  color: var(--ks-wine);
  box-shadow: var(--ks-shadow-sm);
}
.ks-cart-icon {
  font-size: 18px;
  line-height: 1;
}
.ks-cart-count {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: var(--ks-radius-pill);
  background: var(--ks-rose);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.ks-burger {
  width: 44px;
  height: 44px;
  display: none;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  border-radius: var(--ks-radius-pill);
  background: var(--ks-card);
  border: 1px solid var(--ks-border);
  color: var(--ks-burgundy);
  cursor: pointer;
  box-shadow: var(--ks-shadow-sm);
}
.ks-burger span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: var(--ks-radius-pill);
  background: var(--ks-burgundy);
  transition:
    transform var(--ks-transition),
    opacity var(--ks-transition);
}
.ks-burger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.ks-burger.is-open span:nth-child(2) {
  opacity: 0;
}
.ks-burger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* BUTTONS */
.ks-button,
.ks-button-primary,
.ks-button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--ks-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 0.95rem 2rem;
  border-radius: var(--ks-radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: center;
  line-height: 1;
  transition:
    transform var(--ks-transition),
    background var(--ks-transition),
    color var(--ks-transition),
    box-shadow var(--ks-transition),
    border-color var(--ks-transition);
}
.ks-button:hover,
.ks-button-primary:hover,
.ks-button-secondary:hover {
  transform: translateY(-2px);
}
.ks-button-primary,
.ks-button--primary {
  background: var(--ks-rose);
  color: #fff;
  box-shadow: 0 10px 24px rgba(var(--ks-accent-rgb, 201, 115, 140), 0.3);
}
.ks-button-primary:hover {
  background: var(--ks-rose-dark);
  color: #fff;
  box-shadow: 0 14px 30px rgba(183, 95, 122, 0.34);
}
.ks-button-secondary,
.ks-button--secondary {
  background: transparent;
  color: var(--ks-burgundy);
  border-color: var(--ks-border-strong);
}
.ks-button-secondary:hover {
  background: var(--ks-burgundy);
  color: var(--ks-text-invert);
  border-color: var(--ks-burgundy);
}
.ks-button--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.ks-button--gold {
  background: var(--ks-gold);
  color: var(--ks-burgundy);
}
.ks-button--sm {
  padding: 0.6rem 1.3rem;
  font-size: 0.85rem;
}
.ks-button--lg {
  padding: 1.15rem 2.6rem;
  font-size: 1.02rem;
}
.ks-button--block {
  width: 100%;
}

/* HERO */
.ks-hero {
  padding-block: clamp(3rem, 6vw, 6rem);
  background:
    radial-gradient(
      120% 120% at 85% 10%,
      var(--ks-blush-soft) 0%,
      transparent 55%
    ),
    var(--ks-cream);
  overflow: hidden;
}
.ks-hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.ks-hero__content {
  max-width: 560px;
}
.ks-hero__title {
  font-size: clamp(2.4rem, 5vw, var(--ks-fs-h1));
  margin-bottom: 0.4em;
}
.ks-hero__text {
  font-size: var(--ks-fs-lead);
  color: var(--ks-text-muted);
  margin-bottom: 2rem;
}
.ks-hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.ks-hero__media {
  position: relative;
  border-radius: var(--ks-radius-lg);
  background: var(--ks-blush);
  padding: 1.5rem;
  box-shadow: var(--ks-shadow);
}
.ks-hero__media img {
  border-radius: var(--ks-radius);
  display: block;
  width: 100%;
}
.ks-dots {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1.1rem;
}
.ks-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ks-border-strong);
  transition: background var(--ks-transition);
}
.ks-dots span.is-active {
  background: var(--ks-rose);
  width: 24px;
  border-radius: var(--ks-radius-pill);
}
.ks-hero__trust {
  display: flex;
  gap: 2rem;
  margin-top: 2.2rem;
  flex-wrap: wrap;
}
.ks-hero__trust b {
  display: block;
  font-family: var(--ks-font-display);
  font-size: 1.5rem;
  color: var(--ks-wine);
}
.ks-hero__trust small {
  color: var(--ks-text-muted);
}

/* CARDS */
.ks-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ks-space-md);
}
.ks-category-card {
  position: relative;
  display: block;
  min-width: 0;
  width: 100%;
  border-radius: var(--ks-radius-lg);
  overflow: hidden;
  background: var(--ks-card);
  box-shadow: var(--ks-shadow-sm);
  transition:
    transform var(--ks-transition),
    box-shadow var(--ks-transition);
  min-height: 260px;
}
.ks-category-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ks-shadow);
}
.ks-category-card__img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  display: block;
}
.ks-category-card__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.25rem 1.4rem;
  background: linear-gradient(to top, rgba(var(--ks-shade), 0.82), transparent);
  color: #fff;
}
.ks-category-card__title {
  font-family: var(--ks-font-display);
  font-size: 1.35rem;
  color: #fff;
  margin: 0;
}
.ks-category-card__count {
  font-size: 0.8rem;
  opacity: 0.85;
}
.ks-card {
  background: var(--ks-card);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-lg);
  padding: var(--ks-space-md);
  box-shadow: var(--ks-shadow-sm);
}
.ks-product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ks-space-md);
}
.ks-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  background: var(--ks-card);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-lg);
  overflow: hidden;
  box-shadow: var(--ks-shadow-sm);
  transition:
    transform var(--ks-transition),
    box-shadow var(--ks-transition),
    border-color var(--ks-transition);
}
.ks-product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ks-shadow);
  border-color: var(--ks-border-strong);
}
.ks-product-card__media {
  position: relative;
  background: var(--ks-blush-soft);
  padding: 1.25rem;
}
.ks-product-card__media img {
  aspect-ratio: 1;
  object-fit: contain;
  width: 100%;
  mix-blend-mode: multiply;
}
.ks-product-card__body {
  padding: 0.25rem 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1;
}
.ks-product-card__title {
  font-family: var(--ks-font-display);
  font-size: 1.12rem;
  color: var(--ks-chocolate);
  margin: 0;
}
.ks-product-card__title a {
  color: inherit;
}
.ks-product-card__title a:hover {
  color: var(--ks-burgundy);
}
.ks-product-card__meta {
  font-size: 0.82rem;
  color: var(--ks-text-muted);
}
.ks-product-card__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.ks-product-card .ks-add {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--ks-burgundy);
  color: #fff;
  display: grid;
  place-items: center;
  transition:
    background var(--ks-transition),
    transform var(--ks-transition);
}
.ks-product-card .ks-add:hover {
  background: var(--ks-rose);
  transform: rotate(90deg);
}
.ks-price,
.price {
  font-family: var(--ks-font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ks-wine);
}
.ks-price del,
.price del {
  color: var(--ks-text-muted);
  font-weight: 400;
  font-size: 0.9em;
  margin-right: 0.4rem;
  opacity: 0.7;
}
.ks-price ins,
.price ins {
  text-decoration: none;
  color: var(--ks-rose);
}
.ks-price small,
.price .woocommerce-Price-currencySymbol {
  font-weight: 500;
}

/* SMALL COMPONENTS */
.ks-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.34rem 0.7rem;
  border-radius: var(--ks-radius-pill);
  background: var(--ks-rose);
  color: #fff;
}
.ks-badge--new {
  background: var(--ks-wine);
}
.ks-badge--hit {
  background: var(--ks-gold);
  color: var(--ks-burgundy);
}
.ks-badge--sale {
  background: var(--ks-sale);
}
.ks-badge--soft {
  background: var(--ks-blush);
  color: var(--ks-wine);
}
.ks-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: var(--ks-space-lg);
}
.ks-tab {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ks-chocolate);
  padding: 0.6rem 1.3rem;
  border-radius: var(--ks-radius-pill);
  background: transparent;
  border: 1.5px solid var(--ks-border-strong);
  cursor: pointer;
  transition: all var(--ks-transition);
}
.ks-tab:hover {
  border-color: var(--ks-rose);
  color: var(--ks-burgundy);
}
.ks-tab.is-active {
  background: var(--ks-burgundy);
  color: #fff;
  border-color: var(--ks-burgundy);
}
.ks-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  background: var(--ks-card);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--ks-shadow-sm);
}
.ks-filter-bar select,
.ks-filter-bar input[type="search"] {
  font-family: var(--ks-font-body);
  border: 1px solid var(--ks-border-strong);
  background: var(--ks-cream);
  border-radius: var(--ks-radius-sm);
  padding: 0.55rem 0.9rem;
  color: var(--ks-text);
}

/* SECTIONS */
.ks-promo {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--ks-wine), var(--ks-burgundy));
  color: var(--ks-text-invert);
  border-radius: var(--ks-radius-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2rem;
  align-items: center;
}
.ks-promo h2,
.ks-promo h3 {
  color: #fff;
}
.ks-promo__highlight {
  color: var(--ks-gold-soft);
  font-family: var(--ks-font-accent);
  font-size: 2rem;
}
.ks-newsletter {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.ks-newsletter input[type="email"] {
  flex: 1 1 220px;
  border: 0;
  border-radius: var(--ks-radius-pill);
  padding: 0.95rem 1.3rem;
  font-family: var(--ks-font-body);
  color: var(--ks-text);
}
.ks-promo--soft {
  background: var(--ks-blush);
  color: var(--ks-burgundy);
}
.ks-promo--soft h2,
.ks-promo--soft h3 {
  color: var(--ks-burgundy);
}
.ks-advantages,
.ks-reviews,
.ks-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ks-space-md);
}
.ks-advantage {
  text-align: center;
  padding: var(--ks-space-md);
}
.ks-advantage__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--ks-blush-soft);
  color: var(--ks-rose);
  display: grid;
  place-items: center;
  font-size: 1.6rem;
}
.ks-advantage__title {
  font-family: var(--ks-font-display);
  font-size: 1.2rem;
  color: var(--ks-chocolate);
  margin-bottom: 0.35rem;
}
.ks-advantage p {
  color: var(--ks-text-muted);
  font-size: 0.92rem;
  margin: 0;
}
.ks-testimonial {
  background: var(--ks-card);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-lg);
  padding: var(--ks-space-md);
  box-shadow: var(--ks-shadow-sm);
  position: relative;
}
.ks-testimonial::before {
  content: "\201C";
  font-family: var(--ks-font-display);
  font-size: 4rem;
  line-height: 0.7;
  color: var(--ks-blush);
  position: absolute;
  top: 1rem;
  right: 1.4rem;
}
.ks-testimonial__text {
  font-size: 0.98rem;
  color: var(--ks-text);
  margin-bottom: 1.2rem;
}
.ks-testimonial__author {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.ks-testimonial__avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
}
.ks-testimonial__name {
  font-weight: 600;
  color: var(--ks-chocolate);
  font-size: 0.95rem;
}
.ks-stars {
  color: var(--ks-gold);
  letter-spacing: 0.1em;
  font-size: 0.9rem;
}
.ks-stat__num {
  font-family: var(--ks-font-display);
  font-size: 2.8rem;
  color: var(--ks-wine);
  line-height: 1;
}
.ks-stat__label {
  color: var(--ks-text-muted);
  font-size: 0.9rem;
}
.ks-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ks-space-md);
  position: relative;
}
.ks-step {
  text-align: center;
}
.ks-step__num {
  width: 56px;
  height: 56px;
  margin: 0 auto 0.9rem;
  border-radius: 50%;
  background: var(--ks-rose);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--ks-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(var(--ks-accent-rgb, 201, 115, 140), 0.28);
}
.ks-step__title {
  font-weight: 600;
  color: var(--ks-chocolate);
  margin-bottom: 0.25rem;
}
.ks-step p {
  color: var(--ks-text-muted);
  font-size: 0.9rem;
  margin: 0;
}
.ks-delivery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ks-space-md);
}
.ks-delivery-card {
  display: flex;
  gap: 1rem;
  background: var(--ks-card);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius);
  padding: var(--ks-space-md);
  box-shadow: var(--ks-shadow-sm);
}
.ks-delivery-card__icon {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: var(--ks-radius-sm);
  background: var(--ks-blush-soft);
  color: var(--ks-wine);
  display: grid;
  place-items: center;
}
.ks-delivery-card h4 {
  margin-bottom: 0.4rem;
}
.ks-delivery-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ks-delivery-card li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--ks-text);
  font-size: 0.92rem;
  margin-bottom: 0.35rem;
}
.ks-delivery-card li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--ks-success);
  font-weight: 700;
}
.ks-payments {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.ks-payments img {
  height: 30px;
  opacity: 0.85;
  filter: grayscale(0.15);
}
.ks-faq {
  max-width: var(--ks-container-narrow);
  margin-inline: auto;
}
.ks-faq__item {
  background: var(--ks-card);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius);
  margin-bottom: 0.9rem;
  overflow: hidden;
  transition: box-shadow var(--ks-transition);
}
.ks-faq__item:hover {
  box-shadow: var(--ks-shadow-sm);
}
.ks-faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--ks-chocolate);
  font-family: var(--ks-font-display);
  font-size: 1.08rem;
}
.ks-faq__q::after {
  content: "+";
  font-size: 1.5rem;
  color: var(--ks-rose);
  transition: transform var(--ks-transition);
}
.ks-faq__item.is-open .ks-faq__q::after {
  transform: rotate(45deg);
}
.ks-faq__a {
  padding: 0 1.4rem 1.3rem;
  color: var(--ks-text-muted);
}

/* FOOTER */
.ks-footer {
  background: var(--ks-burgundy);
  color: var(--ks-text-invert);
  padding-block: var(--ks-space-xl) var(--ks-space-md);
}
.ks-footer a {
  color: rgba(253, 249, 246, 0.78);
}
.ks-footer a:hover {
  color: #fff;
}
.ks-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: var(--ks-space-md);
}
.ks-footer__col h5 {
  color: #fff;
  font-family: var(--ks-font-display);
  margin-bottom: 1rem;
  font-size: 1.1rem;
}
.ks-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ks-footer__col li {
  margin-bottom: 0.6rem;
  font-size: 0.92rem;
}
.ks-footer__about {
  font-size: 0.92rem;
  color: rgba(253, 249, 246, 0.7);
  line-height: 1.7;
}
.ks-footer__social {
  display: flex;
  gap: 0.7rem;
  margin-top: 1rem;
}
.ks-footer__social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  transition: background var(--ks-transition);
}
.ks-footer__social a:hover {
  background: var(--ks-rose);
}

/* Адрес и телефон в футере: иконка + текст, иконка не уезжает от первой строки. */
.ks-footer__contacts {
  font-style: normal;
  margin-top: 1rem;
  display: grid;
  gap: 0.6rem;
}
.ks-footer__contact {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 0.6rem;
  align-items: start;
  font-size: 0.92rem;
  line-height: 1.6;
}
.ks-footer__contact svg {
  margin-top: 0.22rem;
}
.ks-footer__hint {
  color: rgba(253, 249, 246, 0.55);
  font-size: 0.85rem;
}
.ks-footer__bottom {
  margin-top: var(--ks-space-lg);
  padding-top: var(--ks-space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: rgba(253, 249, 246, 0.6);
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  :root {
    --ks-fs-h1: 2.8rem;
    --ks-fs-h2: 2.2rem;
    --ks-space-2xl: 5rem;
    --ks-space-xl: 3.5rem;
  }
  .ks-hero__inner {
    grid-template-columns: 1fr;
  }
  .ks-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ks-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .ks-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 860px) {
  .ks-header {
    z-index: 9999;
  }
  .ks-container.ks-header__inner {
    width: 100%;
    max-width: 100%;
    padding-inline: 14px;
  }
  .ks-header__inner {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    position: relative;
  }
  .ks-logo {
    max-width: 138px;
    flex: 0 1 auto;
  }
  .ks-logo__img {
    width: auto;
    max-width: 138px;
    max-height: 34px;
    display: block;
  }
  .ks-header__utils {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
  }
  .ks-lang {
    display: none;
  }
  .ks-cart-link,
  .ks-burger {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }
  .ks-cart-icon {
    font-size: 17px;
  }
  .ks-burger {
    display: inline-flex !important;
  }
  .ks-nav {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 14px !important;
    right: 14px !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 10px !important;
    background: var(--ks-card) !important;
    border: 1px solid var(--ks-border) !important;
    border-radius: var(--ks-radius-lg) !important;
    box-shadow: var(--ks-shadow) !important;
    z-index: 10000 !important;
  }
  .ks-nav.is-open {
    display: flex !important;
  }
  .ks-nav a {
    display: block !important;
    padding: 12px 14px !important;
    border: 0 !important;
    border-radius: var(--ks-radius) !important;
  }
  .ks-nav a::after {
    display: none !important;
  }
  .ks-nav a:hover,
  .ks-nav a.current {
    background: var(--ks-blush-soft) !important;
  }
  .ks-hero__media {
    order: -1;
  }
  .ks-advantages,
  .ks-reviews,
  .ks-stats {
    grid-template-columns: 1fr;
  }
  .ks-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ks-delivery-grid {
    grid-template-columns: 1fr;
  }
  .ks-promo {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .ks-newsletter {
    justify-content: center;
  }
}

@media (max-width: 600px) {
  :root {
    --ks-fs-h1: 2.3rem;
    --ks-fs-h2: 1.9rem;
    --ks-fs-h3: 1.5rem;
    --ks-space-2xl: 3.5rem;
    --ks-space-xl: 2.5rem;
    --ks-space-lg: 2rem;
  }
  .ks-category-grid,
  .ks-product-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.9rem !important;
  }
  .ks-steps {
    grid-template-columns: 1fr;
  }
  .ks-footer__grid {
    grid-template-columns: 1fr;
  }
  .ks-hero__actions {
    flex-direction: column;
  }
  .ks-hero__actions .ks-button,
  .ks-hero__actions .ks-button-primary,
  .ks-hero__actions .ks-button-secondary {
    width: 100%;
  }
  .ks-button,
  .ks-button-primary,
  .ks-button-secondary {
    padding: 0.85rem 1.5rem;
  }
  .woocommerce div.product form.cart {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 420px) {
  .ks-logo {
    max-width: 132px;
  }
  .ks-logo__img {
    max-width: 132px;
    max-height: 32px;
  }
  .ks-cart-link,
  .ks-burger {
    width: 34px;
    height: 34px;
    min-width: 34px;
  }
  .ks-cart-icon {
    font-size: 16px;
  }
}

@media (max-width: 400px) {
  .ks-category-grid,
  .ks-product-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}
.ks-catalog-button-wrap {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}
/* ===== FINAL CATALOG FILTERS ===== */

.wpc-filters-widget-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  background: var(--ks-card) !important;
  border: 1px solid var(--ks-border-strong) !important;
  border-radius: 24px !important;
  padding: 24px 22px !important;
  box-shadow: var(--ks-shadow) !important;
}

.wpc-filter-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--ks-burgundy) !important;
  margin: 0 0 12px !important;
}

.wpc-filters-section {
  margin: 0 0 22px !important;
  padding: 0 0 18px !important;
  border-bottom: 1px solid var(--ks-border) !important;
}

.wpc-filters-ul-list {
  margin: 0 !important;
  padding: 0 !important;
}

.wpc-filters-ul-list li {
  list-style: none !important;
  margin: 0 0 9px !important;
}

.wpc-filters-widget-wrapper label {
  font-size: 14px !important;
  line-height: 1.35 !important;
  color: var(--ks-text) !important;
}

.wpc-term-count {
  margin-left: auto !important;
  color: var(--ks-text-muted) !important;
  font-size: 12px !important;
  opacity: 0.7 !important;
}

.wpc-filter-empty,
.wpc-filter-empty-value,
.wpc-filter-has-empty-values,
.wpc-edit-filter-set {
  display: none !important;
}

/* ===== Кнопки фильтра: статичный контейнер (без липкой подложки) ===== */
.wpc-filters-widget-controls-container {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 18px 0 0 !important;
  text-align: center !important;
}

/* обе кнопки — одинаковые, в ряд внутри карточки фильтра */
.wpc-filters-widget-wrapper a.wpc-filters-reset-button,
.wpc-filters-widget-wrapper a.wpc-filters-submit-button,
.wpc-filters-widget-controls-container a.wpc-filters-reset-button,
.wpc-filters-widget-controls-container a.wpc-filters-submit-button,
.wpc-filters-widget-controls-container a.wpc-filters-apply-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48% !important;
  max-width: 48% !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  box-shadow: none !important;
  transform: none !important;
  vertical-align: top !important;
}

/* Reset — белая кнопка с рамкой */
.wpc-filters-widget-wrapper a.wpc-filters-reset-button,
.wpc-filters-widget-controls-container a.wpc-filters-reset-button {
  background: var(--ks-card) !important;
  color: var(--ks-wine) !important;
  border: 1px solid var(--ks-border-strong) !important;
}

/* Apply — пастельная розовая заливка */
.wpc-filters-widget-wrapper a.wpc-filters-submit-button,
.wpc-filters-widget-controls-container a.wpc-filters-submit-button,
.wpc-filters-widget-controls-container a.wpc-filters-apply-button {
  background: var(--ks-rose) !important;
  color: #fff !important;
  border: 1px solid var(--ks-rose) !important;
}

/* --- Адаптивная сетка товаров: 4 / 3 / 2 / 1 --- */
@media (max-width: 1200px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 860px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}
@media (max-width: 380px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: 1fr !important;
  }
}

/* кнопка в каталоге на мобильных — чуть ниже */
@media (max-width: 860px) {
  .woocommerce ul.products li.product .button {
    min-height: 38px;
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
  }
}
.wc-block-grid__product,
li.wc-block-grid__product,
.wc-block-product {
  background: var(--ks-card);
  border: 1px solid var(--ks-border);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--ks-shadow-sm);
}
.wc-block-grid__product .wp-block-button__link,
.wc-block-grid__product .button,
.wc-block-product .wp-block-button__link,
.wc-block-product .button {
  display: block;
  width: auto;
  border-radius: var(--ks-radius-pill);
  background: var(--ks-rose);
  color: #fff;
  font-weight: 600;
}
@media (max-width: 1200px) {
  .wc-block-grid__products,
  .wp-block-woocommerce-product-template,
  ul.wc-block-product-template,
  .wc-block-product-template {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 860px) {
  .wc-block-grid__products,
  .wp-block-woocommerce-product-template,
  ul.wc-block-product-template,
  .wc-block-product-template {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}
@media (max-width: 380px) {
  .wc-block-grid__products,
  .wp-block-woocommerce-product-template,
  ul.wc-block-product-template,
  .wc-block-product-template {
    grid-template-columns: 1fr !important;
  }
}

/* --- Фильтр: «Сбросить все» в шапке + аккуратные чекбоксы --- */
.wpc-filters-widget-wrapper .wpc-reset-button,
.wpc-filters-widget-wrapper a.wpc-filters-reset-all {
  float: right;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--ks-rose) !important;
}
.wpc-filters-widget-wrapper input[type="checkbox"],
.wpc-filters-widget-wrapper input[type="radio"] {
  accent-color: var(--ks-rose);
  width: 16px;
  height: 16px;
}
.wpc-filters-widget-wrapper li.wpc-term-item label {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- Мобильная версия каталога --- */
@media (max-width: 860px) {
  /* колонки складываются: фильтр над товарами */
  .e-con:has(.wpc-filters-widget-wrapper):has(ul.products),
  .e-con-inner:has(.wpc-filters-widget-wrapper):has(ul.products) {
    display: block !important;
    max-width: 100% !important;
  }
  .e-con:has(.wpc-filters-widget-wrapper):not(:has(ul.products)),
  .e-con:has(ul.products):not(:has(.wpc-filters-widget-wrapper)) {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }
  .wpc-filters-widget-wrapper {
    width: 100% !important;
    max-width: none !important;
  }

  /* кнопка-переключатель «Фильтры» (нативная кнопка Filter Everything) */
  .wpc-filters-open-button-container {
    display: block !important;
    margin: 0 0 16px !important;
  }
  body .wpc-filters-open-button-container a.wpc-filters-open-widget,
  body .wpc-filters-open-button-container a.wpc-open-close-filters-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 18px !important;
    background: var(--ks-rose) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--ks-radius-pill) !important;
    font-family: var(--ks-font-body) !important;
    font-weight: 700 !important;
    box-shadow: none !important;
  }
  /* фильтр свёрнут по умолчанию на мобильных, раскрывается по тапу кнопки
     (FE не добавляет body-класс при show_open_close_button — правило не должно
     от него зависеть; .wpc-opened ставит JS Filter Everything) */
  .wpc-filters-widget-content:not(.wpc-opened) {
    display: none !important;
  }

  /* шапка: счётчик/сортировка ниже фиксированной шапки, без наложения */
  .woocommerce .woocommerce-result-count,
  .woocommerce .woocommerce-ordering {
    float: none !important;
    width: 100% !important;
    margin: 0 0 12px !important;
  }
  .woocommerce .woocommerce-ordering select {
    width: 100%;
  }

  /* уведомления на мобильных — текст и кнопка в столбик */
  .woocommerce-message,
  .woocommerce-info,
  .woocommerce-error {
    flex-direction: column;
    align-items: flex-start;
  }
  .woocommerce-message .button,
  .woocommerce-info .button {
    margin: 4px 0 0 !important;
  }

  /* без горизонтального скролла */
  .woocommerce,
  .woocommerce-page {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* --- Необязательная кнопка-переключатель для JS-фолбэка мобильного фильтра
   (если в Filter Everything нет нативной кнопки — см. отчёт/сниппет JS). --- */
.ks-filter-toggle {
  display: none;
}
@media (max-width: 860px) {
  .ks-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 0 0 16px;
    padding: 13px 18px;
    border: 0;
    border-radius: var(--ks-radius-pill);
    background: var(--ks-rose);
    color: #fff;
    font-family: var(--ks-font-body);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
  }
}

/* =============================================================================
   СТАТИЧЕСКАЯ ВИТРИНА
   Дописано под разметку build.php. Прежний style.css рассчитывал на шаблоны
   WooCommerce, этих блоков в нём не было.
   ============================================================================= */

/* --- каталог: фильтр слева, товары справа --------------------------------- */

.ks-catalog {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--ks-space-lg);
  align-items: start;
}

@media (max-width: 900px) {
  .ks-catalog {
    grid-template-columns: 1fr;
  }
}

/* .ks-filter-bar задуман горизонтальной полосой. В колонке разворачиваем.
   Едет за страницей; список фильтров длиннее экрана, поэтому скроллится сам,
   иначе нижние группы и «Сбросить» становятся недостижимы. */
.ks-catalog .ks-filter-bar {
  flex-direction: column;
  /* Базовый flex-wrap:wrap вместе с ограничением высоты разносил панель
     на две колонки: «Подбор» и «Категория» вставали в одну строку. */
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.35rem;
  position: sticky;
  top: var(--ks-space-sm);
  max-height: calc(100vh - 2 * var(--ks-space-sm));
}

.ks-filter-scroll {
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  margin-right: -0.4rem;
  padding-right: 0.4rem;
}

@media (max-width: 900px) {
  .ks-catalog .ks-filter-bar {
    position: static;
    max-height: none;
  }
}

#ks-filter-reset {
  margin-top: 0.6rem;
  flex: 0 0 auto;
}

/* Переключатель «Все категории» ⇄ «Фильтры» — первым в колонке */
.ks-filter-bar__back {
  align-self: flex-start;
  margin-bottom: 0.5rem;
  cursor: pointer;
  font-family: inherit;
}

.ks-filter-bar__tree {
  overflow-y: auto;
  min-height: 0;
}

.ks-filter-bar [hidden] {
  display: none;
}

/* Сбрасывать нечего — кнопки нет. Раньше она висела приглушённой поверх
   списка, и прозрачность гасила ей фон: сквозь кнопку просвечивали фильтры. */
#ks-filter-reset[disabled] {
  display: none;
}

.ks-filter-group {
  border-bottom: 1px solid var(--ks-border);
  padding-bottom: 0.35rem;
}

.ks-filter-group > summary {
  cursor: pointer;
  padding: 0.5rem 0;
  font-weight: 600;
  color: var(--ks-wine);
  list-style-position: inside;
}

.ks-filter-group label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0 0.3rem 0.4rem;
  font-size: 0.92rem;
  cursor: pointer;
}

.ks-filter-group label:hover {
  color: var(--ks-rose-dark);
}

/* --- цена ------------------------------------------------------------------ */

.ks-price {
  font-family: var(--ks-font-display);
  font-size: var(--ks-fs-h5);
  font-weight: 600;
  color: var(--ks-wine);
  white-space: nowrap;   /* «900 ₽» рвалось на две строки и вылезало из карточки */
}

.ks-price--request {
  font-size: var(--ks-fs-base);
  font-family: var(--ks-font-body);
  color: var(--ks-text-muted);
  font-style: italic;
}

/* Кнопка в карточке — на всю ширину, поэтому цена встаёт над ней, а не рядом.
   Футер лежит рядом с __body, а не внутри, — свои отступы ему нужны отдельно. */
.ks-product-card__footer {
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  padding: 0 1.25rem 1.25rem;
}

.ks-product-card__media--empty {
  aspect-ratio: 1;
  background:
    repeating-linear-gradient(45deg, var(--ks-cream-2) 0 12px, var(--ks-blush-soft) 12px 24px);
}

.ks-category-card__count {
  display: inline-block;
  background: rgba(0, 0, 0, 0.32);
  border-radius: var(--ks-radius-pill);
  padding: 0.1rem 0.6rem;
  font-size: 0.8rem;   /* на светлых фото счётчик тонул в подложке */
}

/* --- карточка товара ------------------------------------------------------- */

.ks-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ks-space-xl);
  align-items: start;
}

@media (max-width: 860px) {
  .ks-product {
    grid-template-columns: 1fr;
  }
}

.ks-product__media {
  display: grid;
  gap: var(--ks-space-sm);
}

.ks-product__media img {
  width: 100%;
  height: auto;
  border-radius: var(--ks-radius);
  box-shadow: var(--ks-shadow-sm);
}

.ks-product__desc {
  color: var(--ks-text);
  line-height: var(--ks-lh-base);
  margin: var(--ks-space-sm) 0;
}

/* --- форма заказа ---------------------------------------------------------- */

.ks-order-form {
  display: grid;
  gap: 0.85rem;
  background: var(--ks-card);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius);
  padding: var(--ks-space-md);
  box-shadow: var(--ks-shadow-sm);
  margin-top: var(--ks-space-md);
}

.ks-order-form label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ks-wine);
}

.ks-order-form input,
.ks-order-form textarea {
  font: inherit;
  font-weight: 400;
  color: var(--ks-text);
  background: var(--ks-cream);
  border: 1px solid var(--ks-border-strong);
  border-radius: var(--ks-radius-sm);
  padding: 0.6rem 0.8rem;
  width: 100%;
}

.ks-order-form input:focus-visible,
.ks-order-form textarea:focus-visible {
  outline: 2px solid var(--ks-rose);
  outline-offset: 1px;
}

.ks-order-form textarea {
  resize: vertical;
}

/* display:flex у карточки перебивает браузерное [hidden] — фильтр считал верно,
   но ничего не прятал. */
.ks-product-card[hidden] {
  display: none;
}

/* На бордовом футере .ks-muted давал контраст около 1.9:1 — текст не читался. */
.ks-footer .ks-muted {
  color: rgba(253, 249, 246, 0.82);
}

/* Три карточки в ряд вместо четырёх — карточка шире, название и цена дышат. */
.ks-product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Маркер у <summary> убран — в панели остаётся только текст. */
.ks-filter-group > summary {
  list-style: none;
}

.ks-filter-group > summary::-webkit-details-marker {
  display: none;
}

/* --- логотип текстом ------------------------------------------------------- */

.ks-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  line-height: 1;
  text-decoration: none;
  /* Старое правило выше зажимало лого в 250 px. Надпись не переносится,
     и при центрировании она вылезала за колонку — «К» ложилась на кекс. */
  max-width: none;
}

/* Знак с визитки. Высота привязана к шапке, ширина считается сама:
   картинка непрямоугольная, фиксировать обе стороны нельзя. */
.ks-logo__mark {
  width: auto;
  height: clamp(34px, 8vw, 46px);
  display: block;
  flex: 0 0 auto;
}

.ks-logo__text {
  display: flex;
  flex-direction: column;
  align-items: center;   /* ник — по центру под названием, оно шире */
  flex: 0 0 auto;        /* колонке нельзя ужиматься: внутри неразрывная строка */
}

/* Название магазина — «Крафтовые сладости», ник «Gingerbell» под ним и мельче:
   концепция русифицирована, ник остался отсылкой к имени создателя.
   Обе строки шрифтом визитки (--ks-font-accent). */
.ks-logo__name {
  font-family: var(--ks-font-logo);
  font-size: clamp(1.15rem, 4vw, 1.65rem);
  color: var(--ks-rose);
  white-space: nowrap;
  transition: color var(--ks-transition);
}

.ks-logo__tag {
  font-family: var(--ks-font-logo);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  color: var(--ks-text-muted);
  margin-top: 0.28rem;
  transition: color var(--ks-transition);
}

.ks-logo:hover .ks-logo__name,
.ks-logo:focus-visible .ks-logo__name {
  color: var(--ks-rose-dark);
}

.ks-logo:hover .ks-logo__tag,
.ks-logo:focus-visible .ks-logo__tag {
  color: var(--ks-burgundy);
}

/* Пустая выдача после фильтра: без подписи остаётся немой белый прямоугольник. */
.ks-empty {
  padding: var(--ks-space-lg) 0;
  text-align: center;
  color: var(--ks-text-muted);
  font-size: var(--ks-fs-lead);
}

/* --- кондитерский год ------------------------------------------------------
   Поводы в календарном порядке, первый — ближайший. Порядок несёт смысл:
   к дате готовятся заранее, поэтому список начинается с того, что скоро. */

.ks-occasions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.7rem;
}

.ks-occasion {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1rem 1.1rem;
  background: var(--ks-card);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius);
  text-decoration: none;
  color: var(--ks-text);
  transition:
    border-color var(--ks-transition),
    transform var(--ks-transition),
    box-shadow var(--ks-transition);
}

.ks-occasion:hover,
.ks-occasion:focus-visible {
  border-color: var(--ks-border-strong);
  transform: translateY(-2px);
  box-shadow: var(--ks-shadow-sm);
}

.ks-occasion__date {
  font-family: var(--ks-font-accent);
  font-size: 1.25rem;
  color: var(--ks-rose);
  line-height: 1.1;
}

.ks-occasion__name {
  font-family: var(--ks-font-display);
  font-size: 1.02rem;
  color: var(--ks-wine);
  line-height: 1.25;
}

/* Ближайшая дата — единственный выделенный элемент на главной. */
.ks-occasion--next {
  background: var(--ks-blush-soft);
  border-color: var(--ks-rose);
}

.ks-occasion__soon {
  margin-top: 0.35rem;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ks-rose-dark);
}

.ks-cta {
  text-align: center;
}

.ks-cta .ks-lead {
  margin-inline: auto;
  max-width: 46ch;
}

.ks-cta .ks-button {
  margin-top: var(--ks-space-sm);
}

@media (prefers-reduced-motion: reduce) {
  .ks-occasion:hover,
  .ks-occasion:focus-visible {
    transform: none;
  }
}

/* Шагов три, а сетка была рассчитана на четыре — колонки выходили вчетверо уже,
   чем нужно. Столько колонок, сколько влезает. */
.ks-steps {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  list-style: none;   /* <ol> рисовал свои «1. 2. 3.» поверх кружков */
  margin: 0;
  padding: 0;
}

.ks-step {
  text-align: center;
}

.ks-step p {
  color: var(--ks-text-muted);
  margin: 0;
}

.ks-advantages {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.ks-advantage {
  background: var(--ks-card);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius);
  padding: var(--ks-space-md);
}

.ks-advantage p {
  color: var(--ks-text-muted);
  margin: 0.4rem 0 0;
}

/* Подпись категории тонула на светлых фото — подложка плотнее, тень у текста. */
.ks-category-card__body {
  background: linear-gradient(to top, rgba(var(--ks-shade), 0.92), rgba(var(--ks-shade), 0.55) 55%, transparent);
  padding-top: 2.4rem;
}

.ks-category-card__title {
  text-shadow: 0 1px 6px rgba(var(--ks-shade), 0.5);
}

@media (max-width: 860px) {
  /* Фото идёт первым: на сладостях снимок продаёт лучше заголовка */
  .ks-hero__media {
    order: -1;
    margin-bottom: var(--ks-space-sm);
  }

  .ks-hero__inner {
    gap: var(--ks-space-sm);
  }

  .ks-hero__next {
    margin: 0 0 var(--ks-space-sm);
  }

  .ks-hero__actions {
    display: grid;
    gap: 0.6rem;
  }
}

/* Абзацы в карточках читаются хуже по центру — выравниваем влево.
   По центру остаются только заголовки-шаги, где текст короткий. */
.ks-advantage {
  text-align: left;
}

.ks-hero {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

/* Общее правило a:hover перекрашивало текст кнопок — кнопки у нас ссылки.
   Возвращаем каждому варианту свой цвет явно. */
.ks-button--primary:hover,
.ks-button--primary:focus-visible {
  background: var(--ks-rose-dark);
  color: #fff;
  box-shadow: 0 14px 30px rgba(183, 95, 122, 0.34);
}

.ks-button--secondary:hover,
.ks-button--secondary:focus-visible {
  background: var(--ks-burgundy);
  color: var(--ks-text-invert);
  border-color: var(--ks-burgundy);
}

.ks-button--ghost:hover,
.ks-button--ghost:focus-visible {
  color: #fff;
}

/* --- герой ----------------------------------------------------------------- */

.ks-hero__media {
  /* Розовое паспарту с толстой рамкой смотрелось дёшево. Фото само по себе,
     мягкий радиус и тень — рамка ему не нужна. */
  aspect-ratio: auto;
  background: none;
  padding: 0;
  box-shadow: none;
}

@media (min-width: 861px) {
  .ks-hero__inner {
    grid-template-columns: 1fr 0.85fr;
  }
}

.ks-hero__next {
  display: inline-flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: var(--ks-space-sm) 0 var(--ks-space-md);
  padding: 0.7rem 1.1rem;
  background: var(--ks-card);
  border: 1px solid var(--ks-border-strong);
  border-radius: var(--ks-radius);
  text-decoration: none;
  transition: border-color var(--ks-transition), box-shadow var(--ks-transition);
}

.ks-hero__next:hover,
.ks-hero__next:focus-visible {
  border-color: var(--ks-rose);
  box-shadow: var(--ks-shadow-sm);
}

.ks-hero__next-label {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ks-text-muted);
}

.ks-hero__next-name {
  font-family: var(--ks-font-display);
  font-size: 1.05rem;
  color: var(--ks-wine);
}

/* Слайдер: кадры лежат стопкой, видимый — тот, что с .is-active. */
.ks-hero__media {
  position: relative;
  aspect-ratio: 1;
}

.ks-hero__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--ks-radius-lg);
  box-shadow: var(--ks-shadow-lg);
  opacity: 0;
  transition: opacity 900ms ease;
}

.ks-hero__shot.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .ks-hero__shot {
    transition: none;
  }
}

/* --- категории: четыре в ряд, карточки ниже -------------------------------- */

.ks-category-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ks-space-sm);
}

.ks-category-card {
  min-height: 200px;
}

.ks-category-card__title {
  font-size: 1.05rem;
}

@media (max-width: 1100px) {
  .ks-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- футер ----------------------------------------------------------------- */

.ks-footer__col a {
  color: rgba(253, 249, 246, 0.78);
  text-decoration: none;
}

.ks-footer__col a:hover,
.ks-footer__col a:focus-visible {
  color: #fff;
}

.ks-footer .ks-logo__name {
  color: var(--ks-blush);
}

.ks-footer .ks-logo__tag {
  color: rgba(253, 249, 246, 0.55);
}

.ks-footer .ks-logo:hover .ks-logo__name {
  color: #fff;
}

.ks-footer__bottom {
  color: rgba(253, 249, 246, 0.6);
  font-size: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 2rem;
}

/* Документы — отдельной группой справа, чтобы не мешались с реквизитами */
.ks-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
}

.ks-footer__bottom a {
  color: inherit;
}

.ks-footer__bottom a:hover {
  color: var(--ks-text-invert);
}

@media (max-width: 860px) {
  .ks-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .ks-footer__grid {
    grid-template-columns: 1fr;
  }
}

/* .ks-logo — inline-flex, в футере его строка схлопывалась и подпись
   налезала на текст под ней. */
.ks-footer .ks-logo {
  display: flex;
  margin-bottom: var(--ks-space-sm);
}

/* Слайд вместо растворения: кадры лежат лентой, лента едет по горизонтали.
   Обрезаем во вложенном окне — у .ks-hero__media свои поля (розовое паспарту),
   и по ним соседний кадр подглядывал с краю. */
/* Общее для героя и галереи товара */
.ks-slider__viewport {
  position: relative;
  overflow: hidden;
  border-radius: var(--ks-radius-lg);
  /* Кадры квадратные — окно тоже квадратное, обрезки нет. */
  aspect-ratio: 1;
}

.ks-hero__viewport {
  box-shadow: var(--ks-shadow-lg);
}

.ks-slider__track {
  display: flex;
  height: 100%;
  transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
}

.ks-slider__shot {
  position: static;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  border-radius: 0;
  box-shadow: none;
  transition: none;
}

/* Точки под фото, а не поверх: на светлых кадрах они пропадали. */
.ks-hero__media .ks-dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
}

.ks-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: var(--ks-border-strong);
  transition: background var(--ks-transition), width var(--ks-transition);
}

.ks-dot.is-active {
  width: 22px;
  background: var(--ks-rose);
}

.ks-dot:focus-visible {
  outline: 2px solid var(--ks-rose);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ks-slider__track {
    transition: none;
  }
}

/* --- приглушение фотографий ------------------------------------------------
   Снимки сняты в разных условиях, вместе смотрятся пёстро. Лёгкая десатурация
   с тёплым оттенком приводит их к общему тону. Сила — в одной переменной. */

:root {
  --ks-photo-filter: saturate(0.85) brightness(0.98) contrast(0.96);
  --ks-photo-veil: rgba(253, 249, 246, 0.14);
}

.ks-slider__shot,
.ks-category-card__img,
.ks-product-card__media img {
  filter: var(--ks-photo-filter);
  transition: filter var(--ks-transition);
}

/* Тёплая вуаль поверх кадра — сводит разные цветовые температуры к одной */
.ks-hero__viewport::after,
.ks-category-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ks-photo-veil);
  pointer-events: none;
}

/* Под курсором карточка оживает: цвет возвращается полностью */
.ks-product-card:hover .ks-product-card__media img,
.ks-category-card:hover .ks-category-card__img {
  filter: none;
}

.ks-category-card:hover::after {
  background: transparent;
}

/* --- боковая колонка -------------------------------------------------------
   Одна колонка на весь сайт. На обычных страницах в ней дерево каталога,
   на витрине — фильтр. На телефоне выезжает по бургеру. */

.ks-shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  align-items: start;
}

/* Якорь не должен прятать заголовок под липкой шапкой */
[id] {
  scroll-margin-top: calc(var(--ks-header-h, 83px) + 1rem);
}

.ks-side {
  position: sticky;
  /* Шапка липкая и лежит выше по z-index: при top:0 верх колонки уезжал под неё.
     Высоту шапки меряет app.js и кладёт в --ks-header-h; 83px — запасное значение
     на случай, если скрипт не отработал. */
  top: var(--ks-header-h, 83px);
  max-height: calc(100vh - var(--ks-header-h, 83px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--ks-space-md) var(--ks-space-sm) var(--ks-space-md) var(--ks-gutter);
  border-right: 1px solid var(--ks-border);
  background: var(--ks-cream);
}

.ks-main {
  min-width: 0;
}

/* Внутри колонки панель фильтров уже не карточка — колонка сама рамка */
.ks-side .ks-filter-bar {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.35rem;
  position: static;
  max-height: none;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.ks-side .ks-filter-scroll {
  overflow: visible;
  margin: 0;
  padding: 0;
}

/* Видно только скринридерам */
.ks-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ks-side__tree,
.ks-side__sub,
.ks-side__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ks-side__top {
  display: block;
  padding: 0.4rem 0;
  font-family: var(--ks-font-display);
  font-size: 1rem;
  color: var(--ks-wine);
  text-decoration: none;
}

.ks-side__top:hover,
.ks-side__top:focus-visible {
  color: var(--ks-rose-dark);
}

.ks-side__sub {
  margin: 0 0 0.5rem 0.7rem;
  border-left: 1px solid var(--ks-border);
  padding-left: 0.8rem;
}

.ks-side__sub a {
  display: block;
  padding: 0.28rem 0;
  font-size: 0.88rem;
  color: var(--ks-text-muted);
  text-decoration: none;
}

.ks-side__sub a:hover,
.ks-side__sub a:focus-visible {
  color: var(--ks-rose);
}

.ks-side__links {
  margin-top: var(--ks-space-md);
  padding-top: var(--ks-space-sm);
  border-top: 1px solid var(--ks-border);
}

.ks-side__links a {
  display: block;
  padding: 0.35rem 0;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ks-chocolate);
  text-decoration: none;
}

/* Кнопка закрытия и бургер нужны только там, где колонка выезжает */
.ks-side__close,
.ks-burger {
  display: none;
}

.ks-side__close {
  position: absolute;
  top: var(--ks-space-sm);
  right: var(--ks-space-sm);
  width: 36px;
  height: 36px;
  padding: 0;
  cursor: pointer;
  border: 1px solid var(--ks-border);
  border-radius: 50%;
  background: var(--ks-card);
}

.ks-side__close span {
  position: absolute;
  left: 10px;
  top: 17px;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--ks-burgundy);
}

.ks-side__close span:nth-child(1) { transform: rotate(45deg); }
.ks-side__close span:nth-child(2) { transform: rotate(-45deg); }

@media (max-width: 1000px) {
  .ks-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .ks-burger,
  .ks-side__close {
    display: flex;
  }

  .ks-side {
    position: fixed;
    /* Шапка липкая и лежит выше по z-index: при top:0 верх списка срезало логотипом */
    top: var(--ks-header-h, 83px);
    right: auto;
    bottom: 0;
    left: 0;
    z-index: 100;
    width: min(320px, 86vw);
    max-height: none;
    padding-top: var(--ks-space-sm);
    box-shadow: var(--ks-shadow-lg);
    transform: translateX(-100%);
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .ks-side__backdrop {
    top: var(--ks-header-h, 83px);
  }

  /* Бургер сам закрывает колонку, крестик внутри не нужен */
  .ks-side__close {
    display: none;
  }

  .ks-side.is-open {
    transform: none;
  }

  .ks-side__backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(var(--ks-shade), 0.42);
    opacity: 0;
    transition: opacity 250ms ease;
  }

  .ks-side__backdrop.is-open {
    opacity: 1;
  }
}

/* Пока колонка открыта поверх страницы, страница не прокручивается */
body.ks-locked {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .ks-side,
  .ks-side__backdrop {
    transition: none;
  }
}

/* --- галерея товара --------------------------------------------------------
   Раньше снимки шли стопкой и карточка тянулась на несколько экранов. */

.ks-gallery__thumbs {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.6rem;
  overflow-x: auto;
  padding-bottom: 0.2rem;
}

.ks-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--ks-radius-sm);
  background: none;
  opacity: 0.6;
  transition: opacity var(--ks-transition), border-color var(--ks-transition);
}

.ks-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ks-thumb:hover,
.ks-thumb:focus-visible {
  opacity: 1;
}

.ks-thumb.is-active {
  opacity: 1;
  border-color: var(--ks-rose);
}

/* Стрелки поверх кадра */
.ks-slider__nav {
  position: absolute;
  top: 50%;
  width: 38px;
  height: 38px;
  transform: translateY(-50%);
  padding: 0;
  cursor: pointer;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 2px 10px rgba(var(--ks-shade), 0.2);
  transition: background var(--ks-transition);
}

.ks-slider__nav:hover,
.ks-slider__nav:focus-visible {
  background: #fff;
}

.ks-slider__nav::before {
  content: "";
  position: absolute;
  top: 13px;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--ks-burgundy);
  border-right: 2px solid var(--ks-burgundy);
}

.ks-slider__nav--prev { left: 0.6rem; }
.ks-slider__nav--next { right: 0.6rem; }

.ks-slider__nav--prev::before {
  left: 15px;
  transform: rotate(-135deg);
}

.ks-slider__nav--next::before {
  right: 15px;
  transform: rotate(45deg);
}

/* Стопка ушла — сетка галереи больше не нужна */
.ks-product__media {
  display: block;
}

/* --- корзина ----------------------------------------------------------------
   Товары лежали на голом фоне под волосяными линиями, а форма при этом была
   в карточке. Свели к одному языку: список — карточка, справа липкая панель
   с итогом и заявкой. */

.ks-product__buy {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: var(--ks-space-sm) 0;
}

.ks-product {
  align-items: start;
}

.ks-product__media {
  position: sticky;
  top: calc(var(--ks-header-h, 83px) + var(--ks-space-sm));
}

@media (max-width: 860px) {
  .ks-product__media {
    position: static;
  }
}

.ks-cart-link {
  text-decoration: none;
}

.ks-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--ks-space-md);
  align-items: start;
  margin-top: var(--ks-space-md);
}

@media (max-width: 900px) {
  .ks-checkout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ks-checkout__items {
  background: var(--ks-card);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-lg);
  padding: var(--ks-space-sm) var(--ks-space-md);
  box-shadow: var(--ks-shadow-sm);
}

.ks-checkout__more {
  display: inline-block;
  margin-top: var(--ks-space-sm);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ks-rose);
  text-decoration: none;
}

.ks-checkout__more:hover {
  color: var(--ks-rose-dark);
}

.ks-checkout__panel {
  position: sticky;
  top: calc(var(--ks-header-h, 83px) + var(--ks-space-sm));
  background: var(--ks-card);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-lg);
  padding: var(--ks-space-md);
  box-shadow: var(--ks-shadow);
}

@media (max-width: 900px) {
  .ks-checkout__panel {
    position: static;
  }
}

.ks-checkout__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: var(--ks-space-sm);
  border-bottom: 1px solid var(--ks-border);
  font-size: 0.95rem;
  color: var(--ks-text-muted);
}

.ks-checkout__total strong {
  font-family: var(--ks-font-display);
  font-size: var(--ks-fs-h4);
  color: var(--ks-wine);
  white-space: nowrap;
}

.ks-checkout__note {
  margin: 0.6rem 0 0;
  font-size: 0.82rem;
}

/* Внутри панели форма уже не карточка — панель сама рамка */
.ks-checkout__panel .ks-order-form {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin-top: var(--ks-space-sm);
}

.ks-cart {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ks-cart__row {
  display: grid;
  /* Четвёртая колонка для крестика: в трёх он сваливался на новую строку */
  grid-template-columns: 88px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem;
  padding: var(--ks-space-sm) 0;
  border-bottom: 1px solid var(--ks-border);
}

.ks-cart__row:last-child {
  border-bottom: 0;
}

.ks-cart__media img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: var(--ks-radius);
  display: block;
}

.ks-cart__body {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.ks-cart__name {
  color: var(--ks-wine);
  font-family: var(--ks-font-display);
  font-size: 1.02rem;
  line-height: 1.25;
  text-decoration: none;
}

.ks-cart__name:hover {
  color: var(--ks-rose-dark);
}

.ks-cart__opts {
  font-size: 0.8rem;
  color: var(--ks-text-muted);
  line-height: 1.35;
}

.ks-cart__opts:empty {
  display: none;
}

.ks-cart__price {
  font-family: var(--ks-font-display);
  font-size: 1.05rem;
  color: var(--ks-text);
}

/* Счётчик и удаление — в одну колонку справа, чтобы не рассыпались */
.ks-cart__qty {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem;
  border: 1px solid var(--ks-border-strong);
  border-radius: var(--ks-radius-pill);
}

.ks-cart__qty button {
  width: 30px;
  height: 30px;
  padding: 0;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--ks-rose);
  background: none;
  border: 0;
  border-radius: 50%;
}

.ks-cart__qty button:hover {
  background: var(--ks-blush-soft);
}

.ks-cart__qty span {
  min-width: 1.4rem;
  text-align: center;
  font-weight: 600;
  color: var(--ks-wine);
}

.ks-cart__drop {
  width: 30px;
  height: 30px;
  margin-left: 0.4rem;
  padding: 0;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--ks-border-strong);
  background: none;
  border: 0;
  border-radius: 50%;
}

.ks-cart__drop:hover {
  color: var(--ks-sale);
  background: var(--ks-blush-soft);
}

@media (max-width: 560px) {
  .ks-cart__row {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas: "media body drop" "qty qty qty";
    row-gap: 0.6rem;
  }
  .ks-cart__media { grid-area: media; }
  .ks-cart__body  { grid-area: body; }
  .ks-cart__qty   { grid-area: qty; justify-self: start; }
  .ks-cart__drop  { grid-area: drop; margin-left: 0; }
  .ks-cart__media img { width: 64px; height: 64px; }
  .ks-checkout__items { padding-inline: var(--ks-space-sm); }
}

/* Счётчик на месте кнопки, когда товар уже в корзине */
.ks-qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border: 1.5px solid var(--ks-rose);
  border-radius: var(--ks-radius-pill);
}

.ks-qty button {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  padding: 0;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--ks-rose);
  background: none;
  border: 0;
  border-radius: 50%;
}

.ks-qty button:hover {
  background: var(--ks-blush-soft);
}

.ks-qty [data-qty-value] {
  font-weight: 600;
  color: var(--ks-wine);
}

.ks-qty--lg {
  padding: 0.5rem 0.7rem;
}

.ks-qty--lg button {
  width: 34px;
  height: 34px;
}

/* display у кнопок и счётчика перебивает [hidden] — гасим явно */
.ks-qty[hidden],
.ks-button[hidden] {
  display: none;
}

@media (max-width: 560px) {
  .ks-cart__row {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-areas: "media body drop" "media qty qty";
  }
  .ks-cart__media { grid-area: media; }
  .ks-cart__body  { grid-area: body; }
  .ks-cart__qty   { grid-area: qty; }
  .ks-cart__drop  { grid-area: drop; }
  .ks-cart__media img { width: 56px; height: 56px; }
}

/* display:grid у счётчика перебивал браузерное [hidden] — на пустой корзине
   висел кружок с нулём. */
.ks-cart-count[hidden] {
  display: none;
}

/* Отступ секции рассчитан на ритм между цветными полосами главной.
   На внутренних страницах первая секция начинается сразу под шапкой,
   и 112 пикселей сверху уходили в пустоту. Герой главной сюда не попадает —
   у него свой класс. */
.ks-main > .ks-section:first-child {
  padding-top: var(--ks-space-md);
}

.ks-main > .ks-section:first-child .ks-section-head {
  margin-bottom: var(--ks-space-md);
}

/* Заголовки ломались как придётся: одна строка во всю ширину, следующая в два
   слова. balance выравнивает длины строк, pretty не оставляет висячих слов. */
.ks-h1,
.ks-h2,
.ks-h3,
.ks-hero__title,
.ks-product-card__title,
.ks-category-card__title {
  text-wrap: balance;
}

.ks-lead,
.ks-product__desc p,
.ks-advantage p,
.ks-step p {
  text-wrap: pretty;
}

/* «Главная / Вся витрина / Кондитерский год» дублируют шапку и логотип.
   На широком экране убираем — но ниже 860px шапка прячет свои ссылки,
   и колонка остаётся единственным меню, поэтому там они нужны. */
@media (min-width: 861px) {
  .ks-side__links {
    display: none;
  }
}

/* На телефоне подпись «крафтовые сладости» ломалась на две строки и логотип
   выглядел развалившимся. Ужимаем так, чтобы влезала в одну. */
@media (max-width: 480px) {
  .ks-logo__name {
    font-size: 1.6rem;
  }

  .ks-logo__tag {
    font-size: 0.54rem;
    letter-spacing: 0.16em;
    white-space: nowrap;
  }
}

/* На телефоне «Кондитерский год» занимал больше экрана целиком: тринадцать
   карточек в столбик. Складываем в компактные теги — блок остаётся на виду,
   но перестаёт вытеснять всё остальное. */
@media (max-width: 700px) {
  /* Тегами в столбик блок занимал ~600 пикселей. В одну строку с прокруткой
     пальцем — около 50, и порядок дат читается как лента. */
  .ks-occasions {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.45rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 0.2rem var(--ks-gutter) 0.6rem;
    margin-inline: calc(-1 * var(--ks-gutter));
    scrollbar-width: none;
    /* Подсказка, что лента продолжается за краем */
    mask-image: linear-gradient(to right, #000 88%, transparent);
  }

  .ks-occasions::-webkit-scrollbar {
    display: none;
  }

  .ks-occasion {
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  .ks-occasion {
    flex-direction: row;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    border-radius: var(--ks-radius-pill);
  }

  .ks-occasion__date {
    font-size: 0.95rem;
  }

  .ks-occasion__name {
    font-size: 0.88rem;
  }

  /* Подпись «ближайший» в тег не влезает — роль берёт на себя заливка */
  .ks-occasion__soon {
    display: none;
  }

  .ks-occasion--next {
    border-width: 1.5px;
  }
}

/* Поиск по витрине — первым в панели фильтров */
.ks-search {
  display: block;
  margin-bottom: 0.7rem;
}

.ks-search input {
  width: 100%;
  font: inherit;
  font-size: 0.92rem;
  color: var(--ks-text);
  background: var(--ks-card);
  border: 1px solid var(--ks-border-strong);
  border-radius: var(--ks-radius-pill);
  padding: 0.55rem 0.9rem;
}

.ks-search input:focus-visible {
  outline: 2px solid var(--ks-rose);
  outline-offset: 1px;
}

.ks-search input::placeholder {
  color: var(--ks-text-muted);
}

/* --- лента дат -------------------------------------------------------------
   Тринадцать карточек сеткой давали рваный последний ряд и много высоты.
   В строку они читаются как линия года — порядок тут и есть содержание. */

.ks-occasions-wrap {
  position: relative;
}

@media (min-width: 701px) {
  .ks-occasions {
    display: flex;
    gap: 0.7rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-left: 0.2rem;
    padding: 0.3rem 0.2rem 0.8rem;
    /* Полосу прокрутки прячем — листают стрелками или пальцем */
    scrollbar-width: none;
  }

  .ks-occasions::-webkit-scrollbar {
    display: none;
  }

  .ks-occasion {
    flex: 0 0 200px;
    scroll-snap-align: start;
  }

  .ks-rail__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 38px;
    height: 38px;
    transform: translateY(-50%);
    padding: 0;
    cursor: pointer;
    border: 1px solid var(--ks-border);
    border-radius: 50%;
    background: var(--ks-card);
    box-shadow: var(--ks-shadow-sm);
    opacity: 0;
    transition: opacity var(--ks-transition), background var(--ks-transition);
  }

  /* Стрелки появляются, только если ленту правда есть куда листать */
    [data-rail].is-scrollable .ks-rail__nav {
    opacity: 1;
  }

  .ks-rail__nav[disabled] {
    opacity: 0.25;
    cursor: default;
  }

  .ks-rail__nav::before {
    content: "";
    position: absolute;
    top: 13px;
    width: 9px;
    height: 9px;
    border-top: 2px solid var(--ks-burgundy);
    border-right: 2px solid var(--ks-burgundy);
  }

  .ks-rail__nav--prev { left: -14px; }
  .ks-rail__nav--next { right: -14px; }

  .ks-rail__nav--prev::before {
    left: 15px;
    transform: rotate(-135deg);
  }

  .ks-rail__nav--next::before {
    right: 15px;
    transform: rotate(45deg);
  }
}

/* На телефоне остаются теги, лента там не нужна */
@media (max-width: 700px) {
  .ks-rail__nav {
    display: none;
  }
}

/* --- поиск в шапке ---------------------------------------------------------- */

.ks-hsearch {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.ks-hsearch__toggle {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  padding: 0;
  cursor: pointer;
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-pill);
  background: var(--ks-card);
  box-shadow: var(--ks-shadow-sm);
}

/* Лупа: кружок плюс ручка, без картинок и шрифтовых иконок */
.ks-hsearch__toggle span {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--ks-wine);
  border-radius: 50%;
}

.ks-hsearch__toggle span::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 9px;
  width: 7px;
  height: 2px;
  border-radius: 2px;
  background: var(--ks-wine);
  transform: rotate(45deg);
}

.ks-hsearch__input {
  width: min(240px, 40vw);
  font: inherit;
  font-size: 0.9rem;
  color: var(--ks-text);
  background: var(--ks-card);
  border: 1px solid var(--ks-border-strong);
  border-radius: var(--ks-radius-pill);
  padding: 0.5rem 0.9rem;
}

.ks-hsearch__input:focus-visible {
  outline: 2px solid var(--ks-rose);
  outline-offset: 1px;
}

.ks-hsearch__input[hidden] {
  display: none;
}

@media (max-width: 560px) {
  /* На узком экране поле вытесняло логотип — раскрываем на всю строку под ним */
  .ks-hsearch.is-open {
    position: absolute;
    left: var(--ks-gutter);
    right: var(--ks-gutter);
    top: calc(100% + 6px);
    z-index: 3;
  }

  .ks-hsearch.is-open .ks-hsearch__input {
    width: 100%;
  }
}

/* Ползущее подчёркивание под пунктами меню — приём из бесплатных тем.
   Оставляем смену цвета, этого достаточно. */
.ks-nav a::after,
.ks-nav a:hover::after,
.ks-nav a.current::after,
.ks-nav .current-menu-item > a::after {
  display: none;
}

.ks-nav a {
  transition: color var(--ks-transition);
}

.ks-nav a:hover,
.ks-nav a:focus-visible {
  color: var(--ks-rose);
}

/* --- подсказки поиска ------------------------------------------------------- */

.ks-hsearch {
  position: relative;
}

.ks-suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  width: min(340px, 80vw);
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: var(--ks-card);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius);
  box-shadow: var(--ks-shadow-lg);
  max-height: 60vh;
  overflow-y: auto;
}

.ks-suggest[hidden] {
  display: none;
}

.ks-suggest a {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem;
  border-radius: var(--ks-radius-sm);
  text-decoration: none;
  color: var(--ks-text);
}

.ks-suggest a:hover,
.ks-suggest a.is-picked {
  background: var(--ks-blush-soft);
}

.ks-suggest img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--ks-radius-sm);
}

.ks-suggest__name {
  font-size: 0.88rem;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ks-suggest__price {
  font-size: 0.82rem;
  color: var(--ks-wine);
  white-space: nowrap;
}

.ks-suggest__all {
  grid-template-columns: 1fr;
  justify-items: center;
  font-weight: 600;
  color: var(--ks-rose);
}

.ks-suggest__empty {
  padding: 0.7rem 0.6rem;
  color: var(--ks-text-muted);
  font-size: 0.88rem;
  text-align: center;
}

@media (max-width: 560px) {
  .ks-suggest {
    width: 100%;
  }
}

/* Три кнопки в шапке были разного размера: лупа 44, корзина и бургер 34.
   Сводим к одному размеру на каждой ширине. */
.ks-header__utils {
  --ks-btn: 44px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ks-hsearch__toggle,
.ks-cart-link,
.ks-burger {
  width: var(--ks-btn);
  height: var(--ks-btn);
  min-width: var(--ks-btn);
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border-radius: var(--ks-radius-pill);
  background: var(--ks-card);
  border: 1px solid var(--ks-border);
  box-shadow: var(--ks-shadow-sm);
  color: var(--ks-wine);
}

.ks-burger {
  display: none;   /* появляется вместе с боковой колонкой */
}

.ks-cart-icon {
  display: block;
}

@media (max-width: 1000px) {
  .ks-burger {
    display: inline-grid;
  }
}

@media (max-width: 560px) {
  .ks-header__utils {
    --ks-btn: 38px;
    gap: 0.35rem;
  }
}

/* Бейдж корзины вылезал за кружок и упирался в бургер — оставалось 2 пикселя.
   Ужимаем сам бейдж и разводим кнопки. */
.ks-header__utils {
  gap: 0.75rem;
}

.ks-cart-count {
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  line-height: 1;
}

@media (max-width: 560px) {
  .ks-header__utils {
    gap: 0.6rem;
  }

  .ks-cart-count {
    min-width: 16px;
    height: 16px;
    font-size: 9px;
  }
}

/* --- хлебные крошки --------------------------------------------------------
   С карточки товара некуда было вернуться, кроме кнопки «назад» в браузере. */

.ks-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
  margin: 0 0 var(--ks-space-sm);
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  color: var(--ks-text-muted);
}

.ks-crumbs li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--ks-border-strong);
}

.ks-crumbs a {
  color: var(--ks-text-muted);
  text-decoration: none;
}

.ks-crumbs a:hover,
.ks-crumbs a:focus-visible {
  color: var(--ks-rose);
}

.ks-crumbs [aria-current] {
  color: var(--ks-wine);
}

/* Последняя крошка — длинное имя товара, на телефоне режем */
@media (max-width: 560px) {
  .ks-crumbs [aria-current] {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Товар без фото: заглушка держит колонку, иначе название съезжало
   в сорокапиксельную ячейку и обрезалось до «Комб… наб…». */
.ks-suggest__blank {
  width: 40px;
  height: 40px;
  border-radius: var(--ks-radius-sm);
  background:
    repeating-linear-gradient(45deg, var(--ks-cream-2) 0 6px, var(--ks-blush-soft) 6px 12px);
}

/* --- появление при прокрутке -----------------------------------------------
   Нативный CSS: карточки всплывают, когда входят в экран. Без библиотек и JS.
   Где animation-timeline не поддержан, всё просто видно сразу. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ks-product-grid > *,
    .ks-category-card,
    .ks-advantage,
    .ks-step {
      animation: ks-rise linear both;
      animation-timeline: view();
      /* Проявление заканчивается, едва карточка вошла на треть: иначе нижний
         ряд подолгу висит полупрозрачным прямо на экране. */
      animation-range: entry 0% entry 30%;
    }
  }
}

@keyframes ks-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- лента товаров «Из этой же категории» ----------------------------------
   Сеткой влезал один ряд из четырёх. Лентой — двенадцать, и блок не растёт
   в высоту. Механика та же, что у ленты дат. */

.ks-rail {
  position: relative;
}

.ks-rail__track {
  display: flex;
  gap: var(--ks-space-sm);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 0.3rem 0.2rem 0.8rem;
  scrollbar-width: none;
}

.ks-rail__track::-webkit-scrollbar {
  display: none;
}

.ks-rail__track > .ks-product-card {
  flex: 0 0 clamp(200px, 24vw, 260px);
  scroll-snap-align: start;
}

/* Стрелки повторяют ленту дат, но нужны на любой ширине */
.ks-rail .ks-rail__nav {
  position: absolute;
  top: 45%;
  z-index: 2;
  width: 38px;
  height: 38px;
  transform: translateY(-50%);
  padding: 0;
  cursor: pointer;
  border: 1px solid var(--ks-border);
  border-radius: 50%;
  background: var(--ks-card);
  box-shadow: var(--ks-shadow-sm);
  opacity: 0;
  transition: opacity var(--ks-transition);
}

.ks-rail.is-scrollable .ks-rail__nav {
  opacity: 1;
}

.ks-rail .ks-rail__nav[disabled] {
  opacity: 0.25;
  cursor: default;
}

.ks-rail .ks-rail__nav::before {
  content: "";
  position: absolute;
  top: 13px;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--ks-burgundy);
  border-right: 2px solid var(--ks-burgundy);
}

.ks-rail .ks-rail__nav--prev { left: -14px; }
.ks-rail .ks-rail__nav--next { right: -14px; }

.ks-rail .ks-rail__nav--prev::before {
  left: 15px;
  transform: rotate(-135deg);
}

.ks-rail .ks-rail__nav--next::before {
  right: 15px;
  transform: rotate(45deg);
}

/* На телефоне листают пальцем, стрелки только мешают */
@media (max-width: 700px) {
  .ks-rail .ks-rail__nav {
    display: none;
  }

  .ks-rail__track {
    padding-inline: var(--ks-gutter);
    margin-inline: calc(-1 * var(--ks-gutter));
  }
}

/* --- тихие акценты ---------------------------------------------------------- */

/* Точечный штрих над заголовком секции: перекликается с кремовой отсадкой
   и с фестонами бумажной формы для капкейков. Класс был в системе, но
   разметки под него не существовало. */
.ks-section-head .ks-wave {
  display: block;
  margin: 0 auto 0.7rem;
}

/* Текущая категория в колонке: раньше было не понять, где стоишь */
.ks-side__top.is-current {
  color: var(--ks-rose-dark);
  font-weight: 700;
}

/* Метку вешаем на саму ссылку: пункт списка включает подкатегории,
   и отсчёт от его середины уводил полоску на строку ниже. */
.ks-side__top {
  position: relative;
}

.ks-side__top.is-current::before {
  content: "";
  position: absolute;
  left: -0.7rem;
  top: 50%;
  width: 3px;
  height: 1.05em;
  transform: translateY(-50%);
  border-radius: 2px;
  background: var(--ks-rose);
}

.ks-side__sub a.is-current {
  color: var(--ks-rose);
  font-weight: 600;
}

/* Бейдж ближайшего повода: тихий, не перекрывает фото */
.ks-product-card .ks-badge--soft {
  top: 0.7rem;
  left: 0.7rem;
  background: rgba(253, 249, 246, 0.92);
  color: var(--ks-wine);
  border: 1px solid var(--ks-border-strong);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  backdrop-filter: blur(4px);
}

/* Исходное правило показывало верхушки кругов — выходили обрезанные дуги.
   Три полные точки: перекликается с отсадкой крема, читается на любом фоне. */
.ks-section-head .ks-wave {
  width: 34px;
  height: 6px;
  background: radial-gradient(circle at 3px 3px,
    var(--ks-rose) 0 3px, transparent 3px) repeat-x;
  background-size: 14px 6px;
  opacity: 0.65;
}

/* Кнопка сброса стояла под поиском и семью группами — на 1011 пикселе при
   экране в 900, то есть её просто не было видно. Липнет к низу колонки. */
.ks-side .ks-filter-bar {
  min-height: 100%;
}

#ks-filter-reset {
  position: sticky;
  bottom: 14px;
  z-index: 2;
  margin-top: auto;
  padding-block: 0.7rem;
}

#ks-filter-reset:not([disabled]) {
  background: var(--ks-rose);
  border-color: var(--ks-rose);
  color: #fff;
  /* Кнопка уже панели, и список выглядывал по краям. Сплошная кремовая
     полоса на всю ширину плюс мягкое затухание над ней. */
  box-shadow:
    0 0 0 14px var(--ks-cream),
    0 -22px 18px -6px var(--ks-cream),
    0 6px 16px rgba(var(--ks-accent-rgb, 201, 115, 140), 0.28);
}

#ks-filter-reset:not([disabled]):hover {
  background: var(--ks-rose-dark);
  border-color: var(--ks-rose-dark);
  color: #fff;
}

/* --- герой: акценты по референсу -------------------------------------------- */

/* Второй строкой — курсивом и цветом. Приём чисто типографический,
   от качества снимков не зависит. */
.ks-hero__title em {
  display: block;
  font-style: italic;
  color: var(--ks-rose);
}

/* Мягкое пятно за снимком. Класс .ks-blob лежал в системе неиспользованным. */
.ks-hero__media.ks-blob::before {
  inset: -6% -8% auto auto;
  width: 78%;
  background: var(--ks-gold-soft);
  filter: blur(28px);
  opacity: 0.75;
}

.ks-hero__viewport,
.ks-hero__caption,
.ks-hero__media .ks-dots {
  position: relative;
  z-index: 1;
}

/* Плашка с названием того, что сейчас в кадре */
.ks-hero__caption {
  display: inline-flex;
  flex-direction: column;
  gap: 0.1rem;
  max-width: 82%;
  margin: -2.2rem 0 0 -0.6rem;
  padding: 0.7rem 1.1rem;
  background: var(--ks-card);
  border-radius: var(--ks-radius);
  box-shadow: var(--ks-shadow);
}

.ks-hero__caption-label {
  font-family: var(--ks-font-accent);
  font-size: 1.05rem;
  color: var(--ks-rose);
  line-height: 1;
}

.ks-hero__caption-name {
  font-size: 0.86rem;
  color: var(--ks-text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Место под две строки держим всегда: имена кадров разной длины, и на
     длинном плашка подрастала — герой и всё под ним прыгали на 18px. */
  min-height: 2.6em;
}

.ks-hero__media .ks-dots {
  margin-top: 0.7rem;
}

@media (max-width: 860px) {
  .ks-hero__caption {
    max-width: none;
    margin: -1.6rem 0.6rem 0;
  }
}

/* Вторая кнопка была контурной на прозрачном — читалась как «неглавная».
   Белая с мягкой тенью выглядит дороже и не спорит с основной.
   Стиль общий: раньше он висел только на герое, и одна и та же кнопка
   выглядела по-разному на разных страницах. */
.ks-button--secondary {
  background: var(--ks-card);
  border-color: transparent;
  color: var(--ks-burgundy);
  box-shadow: 0 6px 18px rgba(var(--ks-shade), 0.12);
}

.ks-button--secondary:hover,
.ks-button--secondary:focus-visible {
  background: #fff;
  border-color: transparent;
  color: var(--ks-burgundy);
  box-shadow: 0 10px 24px rgba(var(--ks-shade), 0.18);
}

/* Лёгкий наклон снимка: карточка перестаёт выглядеть вставленной в сетку.
   Подпись оставляем ровной, иначе читать её неудобно. */
@media (min-width: 861px) {
  .ks-hero__viewport {
    transform: rotate(-2.2deg);
    transition: transform 400ms var(--ks-ease, ease);
  }

  .ks-hero__media:hover .ks-hero__viewport {
    transform: rotate(0deg);
  }

  /* Пятно за снимком повторяет наклон, иначе они спорят */
  .ks-hero__media.ks-blob::before {
    transform: rotate(-4deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ks-hero__viewport,
  .ks-hero__media:hover .ks-hero__viewport {
    transition: none;
  }
}

/* Фактура на заднике героя — розовое конфетти, размытое до абстракции.
   Источник: Unsplash, лицензия разрешает коммерческое использование.
   Размытие запечено в файл: filter:blur в браузере дорог при прокрутке. */
.ks-hero {
  isolation: isolate;
}

.ks-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/hero-bg.jpg") no-repeat center / cover;
  opacity: 0.22;
  /* Гасим к левому краю, чтобы не лезло под текст */
  mask-image: linear-gradient(100deg, transparent 0 28%, #000 68%, #000);
  pointer-events: none;
}

@media (max-width: 860px) {
  .ks-hero::after {
    opacity: 0.14;
    mask-image: linear-gradient(to bottom, transparent 0 20%, #000 70%);
  }
}

/* --- единство шрифтов -------------------------------------------------------
   Аудит показал Arial в 95 местах: кнопки и поля не наследуют шрифт, браузер
   подставляет системный. Наследование включаем разом. */
button,
input,
select,
textarea {
  font-family: inherit;
}

/* Навигация была набрана двумя шрифтами: шапка Montserrat, боковая колонка
   Playfair. Приводим к шапке — Playfair остаётся заголовкам, ценам и названиям
   товаров, то есть тому, что должно звучать. */
.ks-side__top {
  font-family: var(--ks-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ks-chocolate);
}

.ks-side__top:hover,
.ks-side__top:focus-visible,
.ks-side__top.is-current {
  color: var(--ks-rose-dark);
}

.ks-side .ks-filter-group > summary {
  font-family: var(--ks-font-body);
  font-size: 0.95rem;
}

/* Caveat — слой рукописных пометок: даты в кондитерском году и подписи к фото.
   Плюс логотип как знак бренда. Заголовки и цены — Playfair, интерфейс —
   Montserrat. Три шрифта, у каждого своя работа. */
.ks-hero__caption-label {
  font-family: var(--ks-font-accent);
  font-size: 1.05rem;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 0;
  color: var(--ks-rose);
}

/* --- опции в карточке товара ------------------------------------------------
   Вкус, начинка, оформление. Цену не меняют: итог называют при звонке.
   Системный вид списка заменён своим: двойная стрелка ОС выбивалась из сайта. */

.ks-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.8rem;
  margin: var(--ks-space-sm) 0 var(--ks-space-md);
}

.ks-option {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

/* Надпись занимает строку целиком — текста в неё пишут много */
.ks-option:has(input) {
  grid-column: 1 / -1;
}

.ks-option > span {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ks-text-muted);
}

.ks-option select,
.ks-option input {
  font: inherit;
  font-size: 0.94rem;
  color: var(--ks-text);
  background: var(--ks-card);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius);
  padding: 0.7rem 0.9rem;
  width: 100%;
  transition: border-color var(--ks-transition), box-shadow var(--ks-transition);
}

.ks-option select {
  appearance: none;
  padding-right: 2.2rem;
  cursor: pointer;
  /* Своя стрелка вместо системной — той же формы, что и в остальных лентах */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ks-wine) 50%),
    linear-gradient(135deg, var(--ks-wine) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% + 1px),
    calc(100% - 13px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.ks-option select:hover,
.ks-option input:hover {
  border-color: var(--ks-border-strong);
}

.ks-option select:focus-visible,
.ks-option input:focus-visible {
  outline: none;
  border-color: var(--ks-rose);
  box-shadow: 0 0 0 3px var(--ks-blush-soft);
}

/* Выбранное значение выделяем — видно, что поле заполнено */
.ks-option select:not(:invalid):not([data-empty]) {
  color: var(--ks-text);
}

.ks-cart__opts {
  font-size: 0.8rem;
  color: var(--ks-text-muted);
  line-height: 1.35;
}

.ks-cart__opts:empty {
  display: none;
}

/* Подпись поля и пометка «не обязательно» в одной строке: раньше пометка
   была отдельным элементом сетки и уезжала на строку ниже, растягивая форму. */
.ks-order-form label {
  gap: 0.25rem;
}

.ks-field {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ks-text-muted);
}

.ks-field em {
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.06em;
  opacity: 0.7;
}

.ks-order-form input,
.ks-order-form textarea {
  border-color: var(--ks-border);
  border-radius: var(--ks-radius);
  padding: 0.6rem 0.85rem;
}

.ks-order-form input:focus-visible,
.ks-order-form textarea:focus-visible {
  outline: none;
  border-color: var(--ks-rose);
  box-shadow: 0 0 0 3px var(--ks-blush-soft);
}

.ks-order-form .ks-muted {
  font-size: 0.8rem;
}

/* --- шапка страницы --------------------------------------------------------
   Огромный заголовок по центру занимал экран и повторял то, что уже сказали
   крошки и боковая колонка. Скромный слева, рядом возврат. */

/* Кнопка возврата стояла в одну строку с заголовком и читалась как часть
   названия. Отдельной строкой над ним. */
.ks-pagehead {
  display: block;
  margin-bottom: var(--ks-space-md);
}

.ks-pagehead .ks-back {
  margin-bottom: 0.7rem;
}

.ks-pagehead h1 {
  margin: 0;
}

/* Возврат ведёт к родителю, а не в историю: предсказуем при заходе из поиска */
.ks-back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.9rem 0.4rem 0.7rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ks-wine);
  text-decoration: none;
  background: var(--ks-card);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius-pill);
  transition:
    border-color var(--ks-transition),
    transform var(--ks-transition),
    box-shadow var(--ks-transition);
}

.ks-back::before {
  content: "";
  width: 7px;
  height: 7px;
  border-left: 1.6px solid var(--ks-rose);
  border-bottom: 1.6px solid var(--ks-rose);
  transform: rotate(45deg);
  transition: transform var(--ks-transition);
}

.ks-back:hover,
.ks-back:focus-visible {
  border-color: var(--ks-border-strong);
  box-shadow: var(--ks-shadow-sm);
}

.ks-back:hover::before {
  transform: rotate(45deg) translate(-2px, 2px);
}

/* На карточке товара возврат идёт отдельной строкой под крошками */
.ks-product ~ * .ks-back,
.ks-container > .ks-back {
  margin-bottom: var(--ks-space-sm);
}

@media (prefers-reduced-motion: reduce) {
  .ks-back:hover::before {
    transform: rotate(45deg);
  }
}

/* --- витрина: четыре в ряд, карточка приземистее -----------------------------
   Квадратное фото делало карточку вытянутой почти вдвое выше ширины. */

.ks-product-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ks-space-sm);
}

@media (max-width: 1200px) {
  .ks-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ks-product-card__media {
  padding: 0.8rem;
}

.ks-product-card__media img {
  aspect-ratio: 4 / 3;
}

.ks-product-card__body {
  padding: 0.2rem 0.9rem 0.6rem;
}

.ks-product-card__footer {
  padding: 0 0.9rem 0.9rem;
  gap: 0.5rem;
}

/* Названия разной длины делали карточки разновысокими */
.ks-product-card__title {
  font-size: 0.98rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ks-product-card .ks-price {
  font-size: 1.1rem;
}

.ks-product-card .ks-button {
  padding-block: 0.7rem;
  font-size: 0.88rem;
}

/* --- вкладки подкатегорий ---------------------------------------------------
   Стояли по центру и налезали на заголовок слева. */

.ks-tabs {
  justify-content: flex-start;
  margin: 0 0 var(--ks-space-lg);
}

.ks-tab {
  padding: 0.5rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ks-burgundy);
  text-decoration: none;
  background: var(--ks-card);
  border: 1px solid transparent;
  border-radius: var(--ks-radius-pill);
  box-shadow: 0 4px 14px rgba(var(--ks-shade), 0.1);
  transition: box-shadow var(--ks-transition), color var(--ks-transition);
}

.ks-tab:hover,
.ks-tab:focus-visible {
  color: var(--ks-rose-dark);
  box-shadow: 0 8px 20px rgba(var(--ks-shade), 0.16);
}

/* Текущий раздел: вкладки — переключатель страниц, без отметки непонятно,
   где ты стоишь. */
.ks-tab.is-current {
  color: var(--ks-text-invert);
  background: var(--ks-rose);
  box-shadow: none;
}

.ks-tab.is-current:hover {
  color: var(--ks-text-invert);
  background: var(--ks-rose-dark);
}

/* Воздух между шапкой страницы и товарами */
.ks-pagehead {
  margin-bottom: var(--ks-space-lg);
}

/* Иконки категорий: линия той же толщины, что у лупы и корзины.
   Различаем силуэтом — в 22 пикселях детали не читаются. */
.ks-side__top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.ks-side__icon {
  flex: 0 0 auto;
  color: var(--ks-rose);
  opacity: 0.75;
  transition: opacity var(--ks-transition), transform var(--ks-transition);
}

.ks-side__top:hover .ks-side__icon,
.ks-side__top.is-current .ks-side__icon {
  opacity: 1;
  transform: scale(1.08);
}

/* Метка текущей категории теперь лишняя — её роль взял кружок */
.ks-side__top.is-current::before {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .ks-side__top:hover .ks-side__dot {
    transform: none;
  }
}

/* ── ссылка-подсказка в опции ─────────────────────────────────────────── */
/* Подпись опции — капслок 0.68rem; ссылка в ней должна читаться как
   пояснение, а не как вторая половина заголовка. */
.ks-option__hint {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--ks-rose);
  border-bottom: 1px solid currentColor;
  white-space: nowrap;
}

.ks-option__hint:hover {
  color: var(--ks-rose-dark);
}

/* ── страница «Начинки» ───────────────────────────────────────────────── */
.ks-section--head {
  padding-bottom: var(--ks-space-sm);
}

.ks-section--tight {
  padding-top: 0;
  padding-bottom: var(--ks-space-md);
}

.ks-fill-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.ks-fill-head__note {
  color: var(--ks-text-muted);
  font-size: 0.9rem;
}

.ks-fill-note {
  margin: var(--ks-space-sm) 0 0;
}

/* Начинки идут вертикально, одна под другой: список короткий, а состав
   читается строкой, а не колонкой в три слова. */
.ks-fill-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: var(--ks-space-md);
}

.ks-fill {
  display: grid;
  grid-template-columns: 320px 1fr;
  align-items: center;
  gap: var(--ks-space-md);
  padding-bottom: var(--ks-space-md);
  border-bottom: 1px solid var(--ks-border);
}

.ks-fill:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

@media (max-width: 700px) {
  .ks-fill {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }
}

/* Фото начинок разных пропорций, подпись вверху кадра: любая рамка её
   срезала. Показываем целиком; пустая заглушка держит высоту типичного 2:3. */
.ks-fill__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ks-radius);
  background: var(--ks-blush-soft);
}

.ks-fill__img--empty {
  aspect-ratio: 2 / 3;
  background: linear-gradient(135deg, var(--ks-blush-soft), var(--ks-gold-soft));
}

.ks-fill__name {
  margin: 0 0 0.5rem;
  font-family: var(--ks-font-display);
  font-size: var(--ks-fs-h4);
  line-height: var(--ks-lh-tight);
  color: var(--ks-wine);
}

.ks-fill__body {
  margin: 0;
  max-width: 46ch;
  color: var(--ks-text);
  font-size: 0.98rem;
  line-height: 1.6;
}


/* ── выпадающий каталог в шапке ───────────────────────────────────────── */
/* Открывается по наведению и по табу (:focus-within) — без JS: меню из
   готовой разметки, скрипт тут добавил бы только точку отказа. */
.ks-nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

.ks-nav__item > a::before {
  content: "";
  position: absolute;
  inset: 0 -10px -14px;   /* мостик до списка: иначе курсор теряет меню в зазоре */
}

.ks-nav__drop {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translate(-50%, -6px);
  z-index: 30;
  padding: 0.6rem;
  background: var(--ks-card);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius);
  box-shadow: var(--ks-shadow);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ks-transition), transform var(--ks-transition),
              visibility 0s linear 0.28s;
}

.ks-nav__item:hover .ks-nav__drop,
.ks-nav__item:focus-within .ks-nav__drop {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.ks-nav__drop ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(170px, 1fr));
  gap: 0.1rem 0.4rem;
}

.ks-nav__drop a {
  display: block;
  padding: 0.45rem 0.7rem;
  border-radius: var(--ks-radius-sm);
  font-size: 0.92rem;
  font-weight: 500;
  /* Переносим: «Орешки «Вкус детства»» в одну строку налезали на соседнюю колонку */
  line-height: 1.3;
}

.ks-nav__drop a:hover,
.ks-nav__drop a:focus-visible {
  background: var(--ks-blush-soft);
}

.ks-nav__drop a.is-current {
  color: var(--ks-rose);
  background: var(--ks-blush-soft);
}

/* Список начинок короткий — одной колонкой, как разделы на странице */
.ks-nav__drop--single ul {
  grid-template-columns: minmax(190px, 1fr);
}

/* Первым пунктом — вся витрина, во всю ширину списка */
.ks-nav__drop li:first-child {
  grid-column: 1 / -1;
  border-bottom: 1px solid var(--ks-border);
  margin-bottom: 0.25rem;
  padding-bottom: 0.25rem;
}

/* На узком экране шапку заменяет боковое меню — там дерево категорий уже есть */
@media (max-width: 900px) {
  .ks-nav__drop {
    display: none;
  }
  .ks-nav__item {
    display: block;
  }
}

/* ── юридические страницы ─────────────────────────────────────────────── */
.ks-legal {
  max-width: 68ch;
}

/* Заголовок раздела внутри документа — крупнее текста, но заметно мельче h1:
   класс ks-h5 перебивается глобальным правилом для h2. */
.ks-legal h2 {
  margin: var(--ks-space-md) 0 0.5rem;
  font-size: var(--ks-fs-h5);
  line-height: var(--ks-lh-tight);
  color: var(--ks-burgundy);
}

.ks-legal p,
.ks-legal li {
  color: var(--ks-text);
}

.ks-legal p {
  margin: 0 0 0.8rem;
}

.ks-legal ul {
  margin: 0 0 0.8rem;
  padding-left: 1.1rem;
}

.ks-legal li {
  margin-bottom: 0.3rem;
}

/* ── согласие в форме заказа ──────────────────────────────────────────── */
/* Своя раскладка, а не .ks-order-form label: там подпись сверху, а тут
   галочка должна стоять слева от текста. */
.ks-consent {
  display: grid !important;
  grid-template-columns: auto 1fr;
  gap: 0.55rem !important;
  align-items: start;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ks-text-muted);
}

.ks-consent input {
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
  accent-color: var(--ks-rose);
}

.ks-consent a {
  color: var(--ks-rose);
  border-bottom: 1px solid currentColor;
}

.ks-consent a:hover {
  color: var(--ks-rose-dark);
}

/* Две кнопки в призыве к действию: на узком экране встают в столбик */
.ks-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ks-space-xs);
}

/* ── лого на узком экране ─────────────────────────────────────────────── */
/* «Крафтовые сладости» одной строкой не влезает: на 360 px её обрезали
   кнопки, а бургер уезжал за экран. Переносим на две строки вместо того,
   чтобы мельчить шрифт — 13 px рукописного текста уже не читается. */
@media (max-width: 640px) {
  /* Дать блоку ужиматься — иначе строка не переносится, а вылезает за шапку */
  .ks-logo,
  .ks-logo__text {
    flex: 0 1 auto;
    min-width: 0;
  }
  .ks-logo__mark {
    height: 38px;
  }
  .ks-logo__name {
    white-space: normal;
    text-align: center;
    font-size: clamp(0.95rem, 4.6vw, 1.25rem);
    line-height: 1.05;
  }
  .ks-logo__tag {
    font-size: 0.7rem;
    margin-top: 0.15rem;
  }
}

/* ── Заказ покупателя (/zakaz/, /moi-zakazy/) ─────────────────────────── */
.ks-order-card {
  background: var(--ks-card);
  border: 1px solid var(--ks-border);
  border-radius: 1.25rem;
  padding: 1.5rem;
  margin-block: 1rem;
}
.ks-order-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.ks-order-card__title { margin: 0; color: var(--ks-burgundy); }
a.ks-order-card__title { font-family: var(--ks-font-display); font-size: 1.25rem; text-decoration: none; }
a.ks-order-card__title:hover { color: var(--ks-rose-dark); }
.ks-order-badge {
  display: inline-block; padding: .2rem .7rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600; background: var(--ks-blush-soft); color: var(--ks-wine);
}
.ks-order-badge--progress { background: var(--ks-gold-soft); color: #7a5b00; }
.ks-order-badge--ready,
.ks-order-badge--paid { background: #dcefe3; color: #2f6b47; }
.ks-order-badge--done { background: var(--ks-cream-2); color: var(--ks-text-muted); }
.ks-order-badge--canceled { background: #f3e3e3; color: #8a3b3b; }
.ks-order-steps {
  display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1.25rem 0;
  counter-reset: step;
}
.ks-order-steps li {
  flex: 1 1 6rem; padding-top: .6rem; border-top: 3px solid var(--ks-border-strong);
  font-size: .85rem; color: var(--ks-text-muted);
}
.ks-order-steps li.is-done { border-color: var(--ks-rose); color: var(--ks-burgundy); font-weight: 600; }
.ks-order-items { list-style: none; padding: 0; margin: 1rem 0; }
.ks-order-items li {
  display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem;
  padding-block: .6rem; border-bottom: 1px solid var(--ks-border);
}
.ks-order-items__sum { white-space: nowrap; }
.ks-order-items__opt { grid-column: 1 / -1; font-size: .85rem; color: var(--ks-text-muted); }
.ks-order-sum { font-weight: 600; font-size: 1.1rem; color: var(--ks-burgundy); }
.ks-order-foot { margin-top: 1.5rem; }
.ks-my-orders-form { display: grid; gap: 1rem; max-width: 28rem; }
.ks-my-orders-form input { width: 100%; }
.ks-order-mailnote { margin-top: -.25rem; max-width: 40rem; }

/* =========================================================================
   Шапка и витрина (ноябрь 2026)
   Сверху — строка с логотипом по центру, под ней липкий ряд категорий.
   Главная = витрина. Боковое меню включается в админке (VIEW_SIDE_MENU);
   выключено — body.ks-noside, колонка выезжает по кнопке и на широком экране.
   ========================================================================= */

.ks-topbar {
  background: var(--ks-cream);
}
.ks-topbar__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  min-height: 84px;
}
.ks-topbar__side {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ks-text-muted);
}
.ks-topbar__side span {
  color: var(--ks-text);
}
.ks-topbar__logo {
  justify-self: center;
  max-width: none;
}
.ks-topbar__links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.ks-topbar__links a {
  color: var(--ks-text);
  text-decoration: none;
}
.ks-topbar__links a:hover {
  color: var(--ks-rose-dark);
}

/* липкий ряд категорий: старый .ks-header, к нему привязаны app.js и колонка */
.ks-header {
  background: rgba(253, 249, 246, 0.94);
  border-top: 1px solid var(--ks-border);
}
.ks-container.ks-header__inner {
  min-height: 52px;
  display: grid;
  grid-template-columns: minmax(96px, 1fr) minmax(0, auto) minmax(96px, 1fr);
  align-items: center;
  gap: 16px;
}
.ks-header__inner > .ks-burger {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  width: 38px;
  height: 38px;
  box-shadow: none;
}
.ks-header__mini {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  display: none;
}
.ks-header__mini img {
  display: block;
  width: auto;
  height: 32px;
}
/* при прокрутке строка с логотипом уходит — маленький кекс остаётся в ряду */
.ks-scrolled .ks-header__mini {
  display: block;
}
.ks-noside.ks-scrolled .ks-header__mini {
  margin-left: 48px;
}
.ks-catnav {
  grid-column: 2;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.ks-catnav::-webkit-scrollbar {
  display: none;
}
.ks-catnav ul {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}
.ks-catnav a {
  display: block;
  padding: 8px 10px;
  border-radius: var(--ks-radius-pill);
  color: var(--ks-burgundy);
  font-size: 0.86rem;
  font-weight: 500;
  text-decoration: none;
}
.ks-catnav a:hover,
.ks-catnav a.is-current {
  background: var(--ks-blush-soft);
  color: var(--ks-rose-dark);
}
.ks-header__inner > .ks-header__utils {
  grid-column: 3;
  justify-self: end;
  margin-left: 0;
}

/* без бокового меню: колонка выезжает и на широком экране */
@media (min-width: 1001px) {
  .ks-noside .ks-shell {
    grid-template-columns: minmax(0, 1fr);
  }
  .ks-noside .ks-burger {
    display: flex;
  }
  .ks-noside .ks-side {
    position: fixed;
    top: var(--ks-header-h, 52px);
    bottom: 0;
    left: 0;
    z-index: 100;
    width: 340px;
    max-height: none;
    box-shadow: var(--ks-shadow-lg);
    transform: translateX(-100%);
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .ks-noside .ks-side.is-open {
    transform: none;
  }
  .ks-noside .ks-side__backdrop {
    position: fixed;
    inset: 0;
    top: var(--ks-header-h, 52px);
    z-index: 99;
    background: rgba(var(--ks-shade), 0.42);
    opacity: 0;
    transition: opacity 250ms ease;
  }
  .ks-noside .ks-side__backdrop.is-open {
    opacity: 1;
  }
  body:not(.ks-noside) .ks-filter-open {
    display: none;
  }
}

/* заголовок витрины и кнопка фильтров в одну строку */
.ks-pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.ks-pagehead .ks-back {
  flex-basis: 100%;
}
.ks-pagehead h1 {
  margin: 0;
}
.ks-filter-open {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--ks-border-strong);
  border-radius: var(--ks-radius-pill);
  background: var(--ks-card);
  color: var(--ks-burgundy);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
}
.ks-filter-open:hover {
  border-color: var(--ks-rose);
  color: var(--ks-rose-dark);
}

/* ближайший повод */
.ks-occ {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label go" "name go";
  align-items: center;
  gap: 2px 20px;
  margin: 0 0 22px;
  padding: 18px 24px;
  border-radius: 16px;
  background: linear-gradient(100deg, var(--ks-blush) 0%, var(--ks-blush-soft) 60%, var(--ks-gold-soft) 100%);
  color: var(--ks-burgundy);
  text-decoration: none;
}
.ks-occ__label {
  grid-area: label;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ks-wine);
}
.ks-occ__name {
  grid-area: name;
  font-family: var(--ks-font-display);
  font-style: italic;
  font-size: 1.6rem;
  line-height: 1.2;
}
.ks-occ__go {
  grid-area: go;
  padding: 10px 18px;
  border-radius: var(--ks-radius-pill);
  background: var(--ks-card);
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
}
.ks-occ:hover .ks-occ__go {
  background: var(--ks-rose);
  color: #fff;
}

/* лента категорий с фото */
.ks-ribbon {
  display: flex;
  gap: 14px;
  margin: 0 0 28px;
  padding: 2px 0 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.ks-ribbon::-webkit-scrollbar {
  display: none;
}
.ks-ribbon__item {
  flex: 0 0 92px;
  display: grid;
  justify-items: center;
  gap: 6px;
  scroll-snap-align: start;
  color: var(--ks-text);
  font-size: 0.78rem;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}
.ks-ribbon__item img {
  width: 84px;
  height: 84px;
  border-radius: 18px;
  object-fit: cover;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}
.ks-ribbon__item:hover img {
  border-color: var(--ks-rose);
}
.ks-ribbon__item:hover {
  color: var(--ks-rose-dark);
}

@media (max-width: 860px) {
  .ks-topbar__inner {
    grid-template-columns: minmax(0, 1fr);
    min-height: 58px;
    justify-items: center;
  }
  .ks-topbar__side {
    display: none;
  }
  .ks-topbar__logo .ks-logo__mark {
    height: 34px;
    width: auto;
  }
  .ks-container.ks-header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 50px;
  }
  .ks-header__inner > .ks-burger {
    width: 36px;
    height: 36px;
  }
  .ks-scrolled .ks-header__mini {
    display: none;
  }
  .ks-catnav ul {
    justify-content: flex-start;
  }
  .ks-catnav a {
    padding: 7px 9px;
    font-size: 0.82rem;
  }
  .ks-occ {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "label" "name" "go";
    gap: 4px;
    padding: 16px;
  }
  .ks-occ__name {
    font-size: 1.3rem;
  }
  .ks-occ__go {
    justify-self: start;
    margin-top: 8px;
  }
  .ks-ribbon {
    gap: 10px;
    margin-bottom: 20px;
  }
  .ks-ribbon__item {
    flex-basis: 76px;
  }
  .ks-ribbon__item img {
    width: 68px;
    height: 68px;
    border-radius: 16px;
  }
}

/* «Ещё» в ряду категорий: лишние разделы в выпадающем списке */
.ks-catnav__more {
  position: relative;
}
.ks-catnav__more > button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--ks-radius-pill);
  background: none;
  color: var(--ks-burgundy);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
}
.ks-catnav__more > button::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.ks-catnav__more > ul {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  min-width: 220px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--ks-card);
  border: 1px solid var(--ks-border);
  border-radius: 12px;
  box-shadow: var(--ks-shadow);
}
.ks-catnav__more:hover > ul,
.ks-catnav__more:focus-within > ul,
.ks-catnav__more.is-open > ul {
  display: block;
}
.ks-catnav__more > ul a {
  border-radius: 8px;
}
@media (min-width: 861px) {
  .ks-catnav {
    overflow: visible;
  }
  .ks-catnav__extra {
    display: none;
  }
}
@media (max-width: 860px) {
  .ks-catnav__more {
    display: none;
  }
}

/* карточка товара: фото во всю ширину, кнопка снизу */
.ks-product-grid {
  gap: 28px 18px;
}
.ks-product-card,
.ks-product-card:hover {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  overflow: visible;
}
.ks-product-card__media {
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--ks-blush-soft);
}
.ks-product-card__media img {
  display: block;
  aspect-ratio: 1;
  object-fit: cover;
  mix-blend-mode: normal;
  transition: transform 0.35s ease, filter var(--ks-transition);
}
.ks-product-card:hover .ks-product-card__media img {
  transform: scale(1.03);
}
.ks-product-card__media--empty {
  aspect-ratio: 1;
}
.ks-product-card__body {
  padding: 10px 2px 4px;
}
.ks-product-card__title {
  font-family: var(--ks-font-body);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ks-text);
}
.ks-product-card__footer {
  padding: 0 2px;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.ks-product-card .ks-price {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ks-burgundy);
}
.ks-product-card .ks-price--request {
  font-size: 0.9rem;
  font-weight: 600;
}
.ks-product-card .ks-button {
  padding-block: 0.65rem;
  border-radius: 10px;
  background: var(--ks-blush-soft);
  color: var(--ks-rose-dark);
  box-shadow: none;
  font-weight: 600;
}
.ks-product-card .ks-button:hover {
  background: var(--ks-rose);
  color: #fff;
}
@media (max-width: 860px) {
  /* два в ряд,; старые правила ставили один с !important */
  .ks-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px 12px;
  }
  .ks-product-card__title {
    font-size: 0.84rem;
  }
  .ks-pagehead h1 {
    font-size: 1.45rem;
  }
}
@media (max-width: 860px) {
  .ks-product-card .ks-button {
    padding-block: 0.5rem;
    font-size: 0.8rem;
  }
}

/* Выезжающая колонка — от самого верха экрана, поверх шапки, с крестиком:
   шапка теперь в две строки, и колонка, прижатая к её низу, перекрывалась ею */
@media (max-width: 1000px) {
  .ks-side {
    top: 0;
    z-index: 10001;
    padding-top: 60px;
  }
  .ks-side__backdrop {
    top: 0;
    z-index: 10000;
  }
  .ks-side__close {
    display: flex;
  }
}
@media (min-width: 1001px) {
  .ks-noside .ks-side {
    top: 0;
    z-index: 10001;
    padding-top: 60px;
  }
  .ks-noside .ks-side__backdrop {
    top: 0;
    z-index: 10000;
  }
  .ks-noside .ks-side__close {
    display: flex;
  }
}

.ks-pagehead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}
.ks-pagehead .ks-back {
  grid-column: 1 / -1;
  justify-self: start;
}

/* =========================================================================
   Без боковой колонки (ноябрь 2026)
   Категории — в шапке и в ленте, фильтры — всплывающей панелью.
   ========================================================================= */
.ks-flat .ks-shell {
  display: block;
}
.ks-flat .ks-header__mini {
  margin-left: 0;
}

/* строка над витриной: заголовок слева, значки фильтров и сортировки справа */
.ks-tools {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 18px;
}
.ks-tools__title {
  margin: 0;
  font-family: var(--ks-font-body);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ks-burgundy);
}
.ks-tools__btns {
  margin-left: auto;
  display: flex;
  gap: 8px;
}
.ks-ico {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--ks-border);
  border-radius: 50%;
  background: var(--ks-card);
  color: var(--ks-burgundy);
  cursor: pointer;
}
.ks-ico:hover,
.ks-ico[aria-expanded="true"] {
  border-color: var(--ks-rose);
  color: var(--ks-rose-dark);
}
.ks-ico__n {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--ks-rose);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.ks-sort select {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;
}
.ks-sort.is-set {
  border-color: var(--ks-rose);
  color: var(--ks-rose-dark);
}

/* всплывающая панель фильтров */
.ks-fpop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: min(780px, 92vw);
  max-height: min(70vh, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 26px 22px;
  background: var(--ks-card);
  border: 1px solid var(--ks-border);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(var(--ks-shade), 0.18);
}
.ks-fpop[hidden] {
  display: none;
}
.ks-fpop__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.ks-fpop__head b {
  font-size: 1.05rem;
  color: var(--ks-burgundy);
}
.ks-fpop__x {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--ks-blush-soft);
  color: var(--ks-burgundy);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.ks-fpop .ks-filter-bar {
  display: block;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.ks-fpop .ks-search {
  display: none;
}
.ks-fpop .ks-filter-scroll {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 28px;
  max-height: none;
  overflow: visible;
}
.ks-fpop .ks-filter-group {
  border: 0;
  padding: 0;
}
.ks-fpop .ks-filter-group > summary {
  padding: 10px 0 6px;
  pointer-events: none;
  font-weight: 700;
  color: var(--ks-burgundy);
}
.ks-fpop .ks-filter-group > summary::after {
  display: none;
}
.ks-fpop .ks-filter-group label {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 5px 0;
  font-size: 0.9rem;
}
.ks-fpop #ks-filter-reset {
  margin-top: 14px;
}
.ks-fpop__show {
  display: none;
}

@media (max-width: 860px) {
  .ks-fpop {
    position: fixed;
    inset: 0;
    z-index: 10001;
    width: auto;
    max-height: none;
    border: 0;
    border-radius: 0;
    padding: 0 18px 90px;
  }
  .ks-fpop__head {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0 -18px 4px;
    padding: 14px 18px;
    background: var(--ks-card);
    border-bottom: 1px solid var(--ks-border);
  }
  .ks-fpop .ks-filter-scroll {
    grid-template-columns: minmax(0, 1fr);
  }
  .ks-fpop__show {
    display: block;
    position: fixed;
    left: 18px;
    right: 18px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 2;
  }
  .ks-tools__title {
    font-size: 1.1rem;
  }
}

/* панель фильтров открывается из шапки: фиксированно под ней (top/right ставит app.js) */
@media (min-width: 861px) {
  .ks-fpop {
    position: fixed;
    top: 150px;
    right: 24px;
  }
}
.ks-ico--flat {
  border-color: transparent;
  background: none;
  text-decoration: none;
}
.ks-header__utils {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* лента: квадратные фото, ~8 в ряд, края гаснут, точки прокрутки */
.ks-ribwrap {
  margin: 0 0 26px;
}
.ks-ribbon {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 8 * 14px) / 8.5);
  gap: 14px;
  margin: 0;
  padding: 0 0 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
}
.ks-ribbon.is-drag {
  cursor: grabbing;
  scroll-snap-type: none;
}
.ks-ribbon.is-drag img {
  pointer-events: none;
}
.ks-ribbon__item {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-items: initial;
  gap: 8px;
  scroll-snap-align: start;
  font-size: 0.84rem;
  font-weight: 500;
  text-align: left;
  min-width: 0;
}
.ks-ribbon__ph {
  display: block;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ks-blush-soft);
}
.ks-ribbon__item img,
.ks-ribbon__item:hover img {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  object-fit: cover;
  filter: var(--ks-photo-filter);
  transition: filter 0.45s ease, transform 0.5s ease;
}
@media (hover: hover) {
  .ks-ribbon__item:hover img {
    filter: none;
    transform: scale(1.04);
  }
}
.ks-ribwrap.more-r .ks-ribbon {
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
  mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.ks-ribwrap.more-l.more-r .ks-ribbon {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 88%, transparent);
}
.ks-ribwrap.more-l:not(.more-r) .ks-ribbon {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%);
  mask-image: linear-gradient(90deg, transparent, #000 8%);
}
.ks-ribdots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.ks-ribdots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ks-border-strong);
  transition: background 0.3s, transform 0.3s;
}
.ks-ribdots i.on {
  background: var(--ks-rose);
  transform: scale(1.25);
}
.ks-ribdots i:nth-child(1).on { background: var(--ks-brand-lilac); }
.ks-ribdots i:nth-child(3).on { background: var(--ks-brand-coral); }
.ks-ribwrap.noscroll .ks-ribdots {
  display: none;
}
@media (max-width: 1180px) {
  .ks-ribbon {
    grid-auto-columns: calc((100% - 6 * 14px) / 6.5);
  }
}
@media (max-width: 860px) {
  .ks-ribwrap {
    margin: 0 calc(-1 * var(--ks-gutter)) 20px;
  }
  .ks-ribbon {
    grid-auto-columns: 24%;
    gap: 10px;
    padding: 0 var(--ks-gutter) 6px;
    scroll-padding: 0 var(--ks-gutter);
  }
  .ks-ribbon__item {
    flex-basis: auto;
    font-size: 0.76rem;
  }
  .ks-ribbon__item img {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
  .ks-ribdots {
    margin-top: 8px;
  }
}

/* один тон для всех фото каталога,: мягко, тепло, чуть выцветше.
   Под курсором снимок показывается как снят. Страница товара — без фильтра. */
:root {
  --ks-photo-filter: saturate(0.72) contrast(0.88) brightness(1.06) sepia(0.18) hue-rotate(-6deg);
}
.ks-product-card__media img,
.ks-nachinka img,
.ks-nachinki img {
  filter: var(--ks-photo-filter);
}
@media (hover: hover) {
  .ks-product-card:hover .ks-product-card__media img {
    filter: none;
  }
}

/* значки в шапке одним стилем, без кружков — */
.ks-header .ks-hsearch__toggle,
.ks-header .ks-cart-link {
  border-color: transparent;
  background: none;
  box-shadow: none;
}
.ks-header .ks-hsearch__toggle:hover,
.ks-header .ks-cart-link:hover,
.ks-header .ks-ico--flat:hover {
  background: var(--ks-blush-soft);
}
@media (max-width: 860px) {
  .ks-header__utils {
    gap: 0;
  }
  .ks-header .ks-ico,
  .ks-header .ks-hsearch__toggle,
  .ks-header .ks-cart-link {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }
  .ks-catnav {
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
}

.ks-topbar__links {
  text-decoration: none;
  text-align: right;
}
.ks-topbar__links span {
  color: var(--ks-text);
}
.ks-topbar__links:hover span {
  color: var(--ks-rose-dark);
}

/* «Написать нам»: круглая кнопка внизу справа, раскрывает телефон и мессенджеры */
.ks-chat {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 900;
  display: grid;
  justify-items: center;
  gap: 12px;
}
.ks-chat__list {
  display: grid;
  gap: 12px;
  animation: ks-chat-up 0.25s ease both;
}
.ks-chat__list[hidden] {
  display: none;
}
@keyframes ks-chat-up {
  from { opacity: 0; transform: translateY(8px); }
}
.ks-chat__i,
.ks-chat__btn {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 8px 22px rgba(var(--ks-shade), 0.22);
  transition: transform 0.2s ease;
}
.ks-chat__i:hover,
.ks-chat__btn:hover {
  transform: translateY(-2px);
}
.ks-chat__i svg {
  width: 28px;
  height: 28px;
  fill: #fff;
}
.ks-chat__i--tel { background: var(--ks-rose); }
.ks-chat__i--max { background: #8c5cf6; }
.ks-chat__i--tg { background: #3d8fd1; }
.ks-chat__i--vk { background: #2f7fe6; }
.ks-chat__btn {
  background: #fff;
  color: var(--ks-rose);
  cursor: pointer;
  outline: 2px solid rgba(255, 255, 255, 0.85);
}
.ks-chat__btn svg {
  width: 26px;
  height: 26px;
}
.ks-chat__btn .o { fill: var(--ks-rose); }
.ks-chat__btn .x { display: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ks-chat.is-open .ks-chat__btn .o { display: none; }
.ks-chat.is-open .ks-chat__btn .x { display: block; }
body.ks-locked .ks-chat { display: none; }
@media (max-width: 860px) {
  .ks-chat {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
  .ks-chat__i,
  .ks-chat__btn {
    width: 52px;
    height: 52px;
  }
}

/* «Мои заказы»: карточка по центру, как вход */
.ks-account {
  display: grid;
  justify-items: center;
  padding-block: 24px 48px;
}
.ks-account__card {
  width: 100%;
  max-width: 420px;
  display: grid;
  gap: 14px;
  padding: 32px 28px 28px;
  background: var(--ks-card);
  border: 1px solid var(--ks-border);
  border-radius: 18px;
  text-align: left;
}
.ks-account__ico {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ks-blush-soft);
  color: var(--ks-rose-dark);
}
.ks-account__title {
  margin: 0;
  font-family: var(--ks-font-body);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ks-burgundy);
}
.ks-account__lead {
  margin: 0;
  color: var(--ks-text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}
.ks-account__card label {
  display: grid;
  gap: 6px;
}
.ks-account__card input[type="email"] {
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--ks-border-strong);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  color: var(--ks-text);
}
.ks-account__card input[type="email"]:focus {
  outline: none;
  border-color: var(--ks-rose);
  box-shadow: 0 0 0 3px rgba(var(--ks-accent-rgb, 201, 115, 140), 0.18);
}
.ks-account__card .ks-button {
  width: 100%;
  border-radius: 12px;
  box-shadow: none;
}
[data-my-orders-list]:not(:empty) {
  width: 100%;
  margin-bottom: 20px;
}

/* =========================================================================
   Корзина и оформление
   ========================================================================= */
.ks-co__title {
  margin: 4px 0 22px;
  font-family: var(--ks-font-body);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--ks-burgundy);
}
.ks-co__empty {
  display: grid;
  justify-items: start;
  gap: 16px;
  color: var(--ks-text-muted);
}
.ks-co {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 36px;
  align-items: start;
}
.ks-co[hidden] {
  display: none;
}
.ks-co__main {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.ks-co__h {
  margin: 18px 0 2px;
  font-family: var(--ks-font-body);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ks-burgundy);
}
.ks-co__h--side {
  margin: 0 0 6px;
  font-size: 1.15rem;
}
.ks-co__seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ks-co__seg label {
  cursor: pointer;
}
.ks-co__seg input {
  position: absolute;
  opacity: 0;
}
.ks-co__seg span {
  display: grid;
  gap: 4px;
  height: 100%;
  padding: 14px 16px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  background: var(--ks-blush-soft);
}
.ks-co__seg b {
  font-weight: 600;
  color: var(--ks-text);
}
.ks-co__seg small {
  color: var(--ks-text-muted);
  font-size: 0.82rem;
}
.ks-co__seg input:checked + span {
  border-color: var(--ks-burgundy);
  background: var(--ks-card);
}
.ks-co__seg input:focus-visible + span {
  outline: 2px solid var(--ks-rose);
  outline-offset: 2px;
}
.ks-co__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ks-co__f--wide {
  grid-column: 1 / -1;
}
.ks-co__f {
  display: grid;
  gap: 6px;
}
.ks-co__f[hidden] {
  display: none;
}
.ks-co__f > span {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ks-text);
}
.ks-co__f em {
  font-style: normal;
  font-weight: 400;
  color: var(--ks-text-muted);
  font-size: 0.82rem;
  margin-left: 4px;
}
.ks-co__f input,
.ks-co__f textarea {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--ks-border-strong);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  color: var(--ks-text);
}
.ks-co__f textarea {
  height: auto;
  padding: 12px 14px;
  resize: vertical;
}
.ks-co__f input:focus,
.ks-co__f textarea:focus {
  outline: none;
  border-color: var(--ks-rose);
  box-shadow: 0 0 0 3px rgba(var(--ks-accent-rgb, 201, 115, 140), 0.16);
}

/* итог справа */
.ks-co__side {
  position: sticky;
  top: calc(var(--ks-header-h, 52px) + 16px);
  display: grid;
  gap: 12px;
  padding: 22px 24px 24px;
  border-radius: 16px;
  background: var(--ks-blush-soft);
}
.ks-co__sum {
  display: grid;
  gap: 8px;
  margin: 0;
}
.ks-co__sum div,
.ks-co__total,
.ks-cartd__foot > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.ks-co__sum dt {
  color: var(--ks-text);
}
.ks-co__sum dd {
  margin: 0;
  text-align: right;
  color: var(--ks-text);
}
.ks-co__total {
  margin-top: 6px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ks-burgundy);
}
.ks-co__side .ks-consent {
  display: flex;
  gap: 10px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ks-text);
}
.ks-co__side .ks-consent input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--ks-burgundy);
  flex: none;
}
.ks-co__side .ks-consent a {
  color: var(--ks-rose-dark);
}
.ks-co__go {
  width: 100%;
  border-radius: 12px;
  background: var(--ks-burgundy);
  box-shadow: none;
  padding-block: 0.95rem;
}
.ks-co__go:hover {
  background: var(--ks-burgundy);
}
.ks-co__hint {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ks-text-muted);
}

/* строки корзины: мягкие плашки, количество и сумма справа */
.ks-cart--page,
.ks-cart--drawer {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: none;
  border: 0;
  box-shadow: none;
}
.ks-cart--page .ks-cart__row,
.ks-cart--drawer .ks-cart__row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto auto;
  grid-template-areas: "img body qty sum" "img drop qty sum";
  align-items: center;
  gap: 4px 20px;
  padding: 12px 20px 12px 12px;
  border: 0;
  border-radius: 14px;
  background: var(--ks-blush-soft);
}
.ks-cart__media {
  grid-area: img;
}
.ks-cart--page .ks-cart__media img,
.ks-cart--drawer .ks-cart__media img {
  width: 96px;
  height: 96px;
  border-radius: 10px;
  object-fit: cover;
}
.ks-cart--page .ks-cart__body,
.ks-cart--drawer .ks-cart__body {
  grid-area: body;
  align-self: end;
  display: grid;
  gap: 4px;
}
.ks-cart--page .ks-cart__name,
.ks-cart--drawer .ks-cart__name {
  font-family: var(--ks-font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ks-burgundy);
}
.ks-cart--page .ks-cart__price,
.ks-cart--drawer .ks-cart__price {
  font-size: 0.86rem;
  font-weight: 400;
  color: var(--ks-text-muted);
}
.ks-cart--page .ks-cart__qty,
.ks-cart--drawer .ks-cart__qty {
  grid-area: qty;
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 4px;
  border: 0;
  border-radius: 10px;
  background: var(--ks-card);
}
.ks-cart--page .ks-cart__qty button,
.ks-cart--drawer .ks-cart__qty button {
  width: 36px;
  height: 36px;
  border: 0;
  background: none;
  font-size: 1.1rem;
  color: var(--ks-burgundy);
  cursor: pointer;
}
.ks-cart--page .ks-cart__qty span,
.ks-cart--drawer .ks-cart__qty span {
  min-width: 28px;
  text-align: center;
  font-weight: 500;
}
.ks-cart__sum {
  grid-area: sum;
  min-width: 90px;
  text-align: right;
  font-weight: 700;
  color: var(--ks-burgundy);
}
.ks-cart--page .ks-cart__drop,
.ks-cart--drawer .ks-cart__drop {
  grid-area: drop;
  justify-self: start;
  align-self: start;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.82rem;
  color: var(--ks-text-muted);
  cursor: pointer;
}
.ks-cart--page .ks-cart__drop:hover,
.ks-cart--drawer .ks-cart__drop:hover {
  color: var(--ks-rose-dark);
}

/* выезжающая корзина */
.ks-cartd {
  position: fixed;
  inset: 0;
  z-index: 10002;
}
.ks-cartd[hidden] {
  display: none;
}
.ks-cartd__bg {
  position: absolute;
  inset: 0;
  background: rgba(var(--ks-shade), 0.42);
}
.ks-cartd__sheet {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--ks-card);
  box-shadow: -10px 0 36px rgba(0, 0, 0, 0.16);
  animation: ks-cartd-in 0.25s ease both;
}
@keyframes ks-cartd-in {
  from { transform: translateX(40px); opacity: 0; }
}
.ks-cartd__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 14px;
}
.ks-cartd__head h2 {
  margin: 0;
  font-family: var(--ks-font-body);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ks-burgundy);
}
.ks-cart--drawer {
  flex: 1;
  overflow-y: auto;
  padding: 0 24px 16px;
  align-content: start;
}
.ks-cart--drawer .ks-cart__row {
  grid-template-columns: 64px minmax(0, 1fr) auto;
  grid-template-areas: "img body sum" "img qty drop";
  padding: 10px 12px;
  background: none;
  border-bottom: 1px solid var(--ks-border);
  border-radius: 0;
}
.ks-cart--drawer .ks-cart__media img {
  width: 64px;
  height: 64px;
}
.ks-cart--drawer .ks-cart__qty {
  justify-self: start;
  height: 36px;
  background: var(--ks-blush-soft);
}
.ks-cart--drawer .ks-cart__qty button {
  width: 30px;
  height: 30px;
}
.ks-cart--drawer .ks-cart__drop {
  justify-self: end;
  align-self: center;
}
.ks-cart--drawer .ks-cart__name {
  font-size: 0.92rem;
}
.ks-cart--drawer .ks-cart__price {
  display: none;
}
.ks-cartd__empty {
  flex: 1;
  margin: 0;
  padding: 0 24px;
  color: var(--ks-text-muted);
}
.ks-cartd__foot {
  display: grid;
  gap: 12px;
  padding: 18px 24px calc(20px + env(safe-area-inset-bottom));
  background: var(--ks-blush-soft);
}
.ks-cartd__foot[hidden] {
  display: none;
}
.ks-cartd__foot > div {
  font-size: 1.15rem;
  color: var(--ks-burgundy);
}

@media (max-width: 900px) {
  .ks-co {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .ks-co__side {
    position: static;
  }
  .ks-co__title {
    font-size: 1.7rem;
    margin-bottom: 16px;
  }
}
@media (max-width: 560px) {
  .ks-co__seg,
  .ks-co__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ks-cart--page .ks-cart__row {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    grid-template-areas: "img body body" "img qty sum" "img drop drop";
    gap: 6px 12px;
    padding: 10px 14px 10px 10px;
  }
  .ks-cart--page .ks-cart__media img {
    width: 72px;
    height: 72px;
  }
  .ks-cart--page .ks-cart__qty {
    justify-self: start;
    height: 38px;
  }
  .ks-cart__sum {
    min-width: 0;
  }
}
.ks-co__empty[hidden] {
  display: none;
}
.ks-co.ks-order-form {
  margin-top: 0;
  gap: 36px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  max-width: none;
}
.ks-cart--page .ks-cart__price,
.ks-cart--drawer .ks-cart__price,
.ks-cart__sum {
  font-family: var(--ks-font-body);
}
.ks-cart--page .ks-cart__drop,
.ks-cart--drawer .ks-cart__drop {
  margin: 0;
}
@media (max-width: 560px) {
  .ks-cart--page .ks-cart__name {
    font-size: 0.92rem;
  }
  .ks-cart__sum {
    align-self: center;
  }
}

/* витрина порциями */
.ks-product-card.is-paged {
  display: none;
}
.ks-more {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin: 32px 0 8px;
}
.ks-more[hidden] {
  display: none;
}
.ks-more__n {
  margin: 0;
  font-size: 0.86rem;
  color: var(--ks-text-muted);
}
.ks-more__btn {
  min-width: 240px;
  border-radius: 12px;
  background: var(--ks-card);
  border: 1px solid var(--ks-border-strong);
  color: var(--ks-burgundy);
  box-shadow: none;
}
.ks-more__btn:hover {
  border-color: var(--ks-rose);
  background: var(--ks-blush-soft);
}
.ks-more__btn[hidden] {
  display: none;
}

/* плашка повода с фото: тёмная вуаль слева, белый текст */
.ks-occ--photo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 132px;
  background: var(--ks-burgundy);
  color: #fff;
}
.ks-occ--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--bg) center / cover;
  filter: var(--ks-photo-filter) brightness(0.92);
}
.ks-occ--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(var(--ks-shade), 0.72) 0%, rgba(var(--ks-shade), 0.35) 55%, rgba(var(--ks-shade), 0.1) 100%);
}
.ks-occ--photo .ks-occ__label,
.ks-occ--photo .ks-occ__name {
  color: #fff;
}
.ks-occ--photo .ks-occ__go {
  background: rgba(255, 255, 255, 0.92);
  color: var(--ks-burgundy);
}

/* большой баннер посреди витрины */
.ks-promo {
  grid-column: 1 / -1;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  min-height: 380px;
  margin: 8px 0;
  padding: 44px 48px;
  border-radius: 18px;
  background: var(--ks-burgundy);
  color: #fff;
  text-decoration: none;
}
.ks-promo[hidden] {
  display: none;
}
.ks-promo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--bg) center / cover;
  filter: var(--ks-photo-filter) brightness(0.9);
  transition: transform 0.6s ease;
}
.ks-promo:hover::before {
  transform: scale(1.03);
}
.ks-promo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(var(--ks-shade), 0.7) 0%, rgba(var(--ks-shade), 0.38) 45%, rgba(var(--ks-shade), 0) 75%);
}
.ks-promo__label {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.9;
}
.ks-promo__title {
  max-width: 560px;
  font-family: var(--ks-font-display);
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.05;
}
.ks-promo__text {
  max-width: 420px;
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.92;
}
.ks-promo__go {
  margin-top: 10px;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
@media (max-width: 860px) {
  .ks-promo {
    min-height: 300px;
    padding: 28px 22px;
    justify-content: flex-end;
  }
  .ks-promo::after {
    background: linear-gradient(0deg, rgba(var(--ks-shade), 0.75) 0%, rgba(var(--ks-shade), 0.25) 60%, rgba(var(--ks-shade), 0) 100%);
  }
  .ks-occ--photo {
    min-height: 150px;
  }
}

/* рейтинг в шапке */
.ks-rating {
  color: var(--ks-text);
  text-decoration: none;
}
.ks-rating span {
  color: #e0a43a;
}
.ks-rating:hover {
  color: var(--ks-rose-dark);
}

/* кнопка «наверх»: после первого экрана, над кнопкой чата */
.ks-totop {
  position: fixed;
  right: 34px;
  bottom: 100px;
  z-index: 899;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ks-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--ks-burgundy);
  box-shadow: 0 6px 18px rgba(var(--ks-shade), 0.16);
  cursor: pointer;
}
.ks-totop[hidden] {
  display: none;
}
.ks-totop svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* телефон как приложение: снизу вкладки, */
.ks-tabbar {
  display: none;
}
@media (max-width: 860px) {
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
  .ks-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 950;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: rgba(253, 249, 246, 0.97);
    border-top: 1px solid var(--ks-border);
    backdrop-filter: blur(10px);
  }
  .ks-tabbar a,
  .ks-tabbar button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 2px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--ks-text-muted);
    font: inherit;
    font-size: 10.5px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
  }
  .ks-tabbar svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .ks-tabbar [aria-current="page"],
  .ks-tabbar .is-on {
    color: var(--ks-rose-dark);
    background: var(--ks-blush-soft);
  }
  .ks-tabbar b {
    position: absolute;
    top: 1px;
    left: calc(50% + 6px);
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--ks-rose);
    color: #fff;
    font-size: 10px;
    line-height: 17px;
  }
  .ks-tabbar b[hidden] {
    display: none;
  }
  /* корзина и кабинет — во вкладках, в шапке остаются поиск и фильтры */
  .ks-header .ks-cart-link,
  .ks-header .ks-ico--flat[href="/moi-zakazy/"] {
    display: none;
  }
  /* чат открывается вкладкой «Написать», плавающая кнопка не нужна */
  .ks-chat__btn {
    display: none;
  }
  .ks-chat {
    bottom: calc(74px + env(safe-area-inset-bottom));
  }
  .ks-totop {
    right: 16px;
    bottom: calc(76px + env(safe-area-inset-bottom));
  }
  /* подвал на телефоне — только контакты и документы */
  .ks-footer__col:not(:first-child) {
    display: none;
  }
  .ks-cartd__foot {
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
}

/* по бокам витрины — полупрозрачные векторные сладости.
   Только на широком экране, где по краям остаётся пустое поле. */
@media (min-width: 1280px) {
  .ks-main {
    position: relative;
  }
  .ks-main::before,
  .ks-main::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc((100vw - var(--ks-container, 1200px)) / 2 - 8px);
    max-width: 300px;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='920' viewBox='0 0 280 920'%3E%3Cg opacity='.16'%3E%3Cg transform='translate%2856 70%29 rotate%28-12%29 scale%281.25%29'%3E%3Cpath d='M-13 4h26l-4 18h-18z' fill='%23e8c69e'/%3E%3Cpath d='M-8 4v18M0 4v18M8 4v18' stroke='%238b4a20' stroke-width='1.2' opacity='.5'/%3E%3Cpath d='M-15 5c-2-7 3-11 7-11 1-6 6-9 9-9s8 3 9 9c4 0 9 4 7 11z' fill='%23c9738c'/%3E%3Ccircle cy='-17' r='3.2' fill='%23e05a6d'/%3E%3C/g%3E%3Cg transform='translate%28200 150%29 rotate%2818%29 scale%281.15%29'%3E%3Ccircle r='16' fill='%23e8c69e'/%3E%3Cpath d='M-14 -6c2-8 9-12 15-11 8 0 13 6 14 12-3 3-5 1-7 4-3 4-6 0-9 3-4 3-6-1-9 1-3 1-3-5-4-9z' fill='%23d6b4e6'/%3E%3Ccircle r='5.5' fill='%23fdf9f6'/%3E%3Cpath d='M-6 -10l2 2M5 -11l-1 2M9 -3l2 1M-10 -2l2 -1' stroke='%23f7d26b' stroke-width='1.6' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate%2870 260%29 rotate%288%29 scale%281.2%29'%3E%3Cpath d='M-16 12h32v-14l-32 -8z' fill='%23e8c69e'/%3E%3Cpath d='M-16 -10l32 8v4l-32 -8z' fill='%23f0b48a'/%3E%3Cpath d='M-16 3l32 0' stroke='%23f0b48a' stroke-width='3'/%3E%3Ccircle cx='2' cy='-12' r='3.4' fill='%23e05a6d'/%3E%3C/g%3E%3Cg transform='translate%28210 330%29 rotate%28-20%29 scale%281.1%29'%3E%3Cellipse cy='-6' rx='15' ry='7' fill='%239fd3c7'/%3E%3Crect x='-14' y='-3' width='28' height='5' rx='2' fill='%23fdf9f6'/%3E%3Cellipse cy='6' rx='15' ry='7' fill='%239fd3c7'/%3E%3C/g%3E%3Cg transform='translate%2860 430%29 rotate%2830%29 scale%281.15%29'%3E%3Cpath d='M-10 0l-10 -8v16z M10 0l10 -8v16z' fill='%23d6b4e6' opacity='.8'/%3E%3Cellipse rx='11' ry='8' fill='%23d6b4e6'/%3E%3Cpath d='M-5 -6l3 12M2 -7l3 12' stroke='%23fff' stroke-width='1.5' opacity='.7'/%3E%3C/g%3E%3Cg transform='translate%28205 505%29 rotate%28-15%29 scale%281.1%29'%3E%3Cpath d='M0 10v22' stroke='%23e8c69e' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle r='12' fill='%23c9738c'/%3E%3Cpath d='M0 0a6 6 0 1 1 6 -6a9 9 0 1 1 -13 4' fill='none' stroke='%23fff' stroke-width='2' opacity='.75'/%3E%3C/g%3E%3Cg transform='translate%2880 600%29 rotate%2810%29 scale%281.2%29'%3E%3Cpath d='M-12 2h24l-3 16h-18z' fill='%23f0b48a'/%3E%3Cpath d='M-15 3c-3-10 6-15 15-15s18 5 15 15z' fill='%238b4a20' opacity='.75'/%3E%3Ccircle cx='-5' cy='-4' r='1.6' fill='%234a2416'/%3E%3Ccircle cx='4' cy='-7' r='1.6' fill='%234a2416'/%3E%3Ccircle cx='7' cy='-1' r='1.6' fill='%234a2416'/%3E%3C/g%3E%3Cg transform='translate%28215 690%29 rotate%2814%29 scale%281.05%29'%3E%3Cpath d='M-13 4h26l-4 18h-18z' fill='%23e8c69e'/%3E%3Cpath d='M-8 4v18M0 4v18M8 4v18' stroke='%238b4a20' stroke-width='1.2' opacity='.5'/%3E%3Cpath d='M-15 5c-2-7 3-11 7-11 1-6 6-9 9-9s8 3 9 9c4 0 9 4 7 11z' fill='%23d6b4e6'/%3E%3Ccircle cy='-17' r='3.2' fill='%23e05a6d'/%3E%3C/g%3E%3Cg transform='translate%2860 790%29 rotate%28-25%29 scale%281.1%29'%3E%3Ccircle r='16' fill='%23e8c69e'/%3E%3Cpath d='M-14 -6c2-8 9-12 15-11 8 0 13 6 14 12-3 3-5 1-7 4-3 4-6 0-9 3-4 3-6-1-9 1-3 1-3-5-4-9z' fill='%23c9738c'/%3E%3Ccircle r='5.5' fill='%23fdf9f6'/%3E%3Cpath d='M-6 -10l2 2M5 -11l-1 2M9 -3l2 1M-10 -2l2 -1' stroke='%23f7d26b' stroke-width='1.6' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate%28200 870%29 rotate%2812%29 scale%281%29'%3E%3Cellipse cy='-6' rx='15' ry='7' fill='%23f0b48a'/%3E%3Crect x='-14' y='-3' width='28' height='5' rx='2' fill='%23fdf9f6'/%3E%3Cellipse cy='6' rx='15' ry='7' fill='%23f0b48a'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") top center / 280px 920px repeat-y;
  }
  .ks-main::before {
    left: 0;
  }
  .ks-main::after {
    right: 0;
    transform: scaleX(-1);
    background-position: 0 460px;
  }
}

/* сортировка — просто значок, без кружка */
.ks-tools .ks-sort {
  width: 46px;
  height: 46px;
  border: 0;
  background: none;
  color: var(--ks-rose-dark);
}
.ks-tools .ks-sort:hover,
.ks-tools .ks-sort.is-set {
  background: var(--ks-blush-soft);
  border: 0;
}
.ks-tools .ks-sort svg {
  width: 24px;
  height: 24px;
}

/* кнопки баннеров — строчка капсом с подчёркиванием, без «таблеток» */
.ks-occ__go,
.ks-occ--photo .ks-occ__go,
.ks-promo__go {
  position: relative;
  padding: 0 0 8px;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ks-occ__go {
  color: var(--ks-burgundy);
}
.ks-occ--photo .ks-occ__go,
.ks-promo__go {
  color: #fff;
}
.ks-occ__go::after,
.ks-promo__go::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 42%;
  background: currentColor;
  transition: width 0.45s ease;
}
.ks-occ:hover .ks-occ__go,
.ks-occ--photo:hover .ks-occ__go {
  background: none;
  color: inherit;
}
.ks-occ:hover .ks-occ__go::after,
.ks-promo:hover .ks-promo__go::after {
  width: 100%;
}
.ks-promo__go {
  margin-top: 18px;
}
.ks-occ {
  padding: 26px 40px;
}
.ks-occ__label {
  font-size: 11.5px;
  letter-spacing: 0.24em;
}
@media (max-width: 860px) {
  .ks-occ {
    padding: 20px 22px;
    gap: 10px;
  }
  .ks-occ__go {
    margin-top: 6px;
  }
}
/* наведение не перекрашивает баннер: на фото всё белое, на светлой плашке — тёмное */
.ks-occ:hover,
.ks-occ:hover .ks-occ__go,
.ks-occ:hover .ks-occ__name,
.ks-occ:hover .ks-occ__label {
  color: var(--ks-burgundy);
}
.ks-occ--photo:hover,
.ks-occ--photo:hover .ks-occ__go,
.ks-occ--photo:hover .ks-occ__name,
.ks-occ--photo:hover .ks-occ__label,
.ks-promo:hover,
.ks-promo:hover .ks-promo__go,
.ks-promo:hover .ks-promo__title {
  color: #fff;
}
.ks-occ--photo:hover::before {
  transform: scale(1.03);
}
.ks-occ--photo::before {
  transition: transform 0.6s ease;
}

/* баннер-подборка: текст слева, две наклонные карточки справа */
.ks-promo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
}
.ks-promo__tx {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.ks-promo__pics {
  position: relative;
  width: 340px;
  height: 230px;
}
.ks-promo__pics img {
  position: absolute;
  width: 170px;
  height: 212px;
  object-fit: cover;
  border-radius: 2px;
  outline: 1px solid rgba(255, 255, 255, 0.55);
  outline-offset: 6px;
  box-shadow: 0 22px 40px rgba(30, 10, 5, 0.35);
  filter: var(--ks-photo-filter);
  transition: transform 0.5s ease, filter 0.45s ease;
}
.ks-promo__pics img:first-child {
  right: 150px;
  top: 4px;
  transform: rotate(-7deg);
}
.ks-promo__pics img:last-child {
  right: 10px;
  top: 14px;
  transform: rotate(6deg);
}
.ks-promo:hover .ks-promo__pics img {
  filter: none;
}
.ks-promo:hover .ks-promo__pics img:first-child {
  transform: rotate(-9deg) translateY(-4px);
}
.ks-promo:hover .ks-promo__pics img:last-child {
  transform: rotate(8deg) translateY(-4px);
}
@media (max-width: 860px) {
  .ks-promo {
    grid-template-columns: minmax(0, 1fr);
  }
  .ks-promo__pics {
    order: -1;
    width: 100%;
    height: 170px;
  }
  .ks-promo__pics img {
    width: 120px;
    height: 140px;
  }
  .ks-promo__pics img:first-child {
    right: auto;
    left: 20px;
  }
  .ks-promo__pics img:last-child {
    right: 20px;
  }
}

/* Кнопки без «таблеток»: умеренное скругление, как у полей ввода */
.ks-button,
.ks-qty,
.ks-cart__qty,
.ks-back,
.ks-tab,
.ks-product .ks-button,
.ks-product select,
.ks-product input,
.ks-product textarea {
  border-radius: 12px;
}
.ks-qty button,
.ks-cart__qty button {
  border-radius: 10px;
}
.ks-catnav a,
.ks-catnav__more > button {
  border-radius: 10px;
}

/* фильтр: группы разной длины укладываются колонками без пустот */
.ks-fpop .ks-filter-scroll {
  display: block;
  column-count: 3;
  column-gap: 32px;
}
.ks-fpop .ks-filter-group {
  break-inside: avoid;
  margin-bottom: 14px;
}
@media (max-width: 860px) {
  .ks-fpop .ks-filter-scroll {
    column-count: 1;
  }
}

/* свёрнутая шапка: маленький логотип целиком — кекс и название */
.ks-header__mini {
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.ks-scrolled .ks-header__mini {
  display: flex;
}
.ks-header__mini img {
  height: 30px;
}
.ks-header__mini span {
  font-family: var(--ks-font-logo);
  font-size: 1.05rem;
  color: var(--ks-rose-dark);
  white-space: nowrap;
}
@media (max-width: 1100px) {
  .ks-header__mini span {
    display: none;
  }
}

.ks-co__f select {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--ks-border-strong);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  color: var(--ks-text);
}

/* конфетти при добавлении в корзину */
.ks-bit {
  position: fixed;
  z-index: 10050;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 2px;
  pointer-events: none;
  animation: ks-bit 0.9s cubic-bezier(0.25, 0.8, 0.3, 1) both;
}
.ks-bit:nth-child(3n) {
  border-radius: 50%;
}
@keyframes ks-bit {
  0% { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(0.5); opacity: 0; }
}
.ks-nod {
  animation: ks-nod 0.5s ease;
}
@keyframes ks-nod {
  0%, 100% { transform: none; }
  30% { transform: scale(1.25) rotate(-8deg); }
  60% { transform: scale(0.95) rotate(5deg); }
}
/* кнопка отзывается на нажатие */
.ks-button:active {
  transform: scale(0.97);
}

/* отзывы с Flowwow под витриной */
.ks-reviews {
  margin: 56px 0 8px;
}
.ks-reviews__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ks-reviews__head h2 {
  margin: 0;
  font-family: var(--ks-font-body);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ks-burgundy);
}
.ks-reviews__rate {
  color: #e0a43a;
  font-weight: 600;
}
.ks-reviews__head a {
  margin-left: auto;
  font-size: 0.86rem;
  color: var(--ks-rose-dark);
}
.ks-reviews__row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 16px) / 3.3);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.ks-reviews__row::-webkit-scrollbar {
  display: none;
}
.ks-rev {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--ks-blush-soft);
}
.ks-rev__stars {
  color: #e0a43a;
  letter-spacing: 2px;
}
.ks-rev__stars span {
  color: var(--ks-border-strong);
}
.ks-rev blockquote {
  margin: 0;
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ks-text);
}
.ks-rev figcaption {
  font-size: 0.82rem;
  color: var(--ks-text-muted);
}
.ks-rev figcaption b {
  color: var(--ks-text);
  font-weight: 600;
}
@media (max-width: 860px) {
  .ks-reviews__row {
    grid-auto-columns: 82%;
  }
}

/* полка сладостей над подвалом: значки разделов покачиваются, по наведению — название */
.ks-shelf {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 6px 26px;
  max-width: var(--ks-container);
  margin: 64px auto 0;
  padding: 0 var(--ks-gutter) 14px;
  border-bottom: 2px solid var(--ks-border-strong);
}
.ks-shelf__i {
  position: relative;
  display: grid;
  justify-items: center;
  color: var(--ks-rose);
  text-decoration: none;
  transform-origin: 50% 100%;
  animation: ks-sway 5s ease-in-out infinite;
  animation-delay: var(--d);
}
.ks-shelf__i:nth-child(4n+2) { color: var(--ks-wine); }
.ks-shelf__i:nth-child(4n+3) { color: var(--ks-brand-lilac); }
.ks-shelf__i:nth-child(4n) { color: var(--ks-brand-coral); }
.ks-shelf__i svg {
  width: 40px;
  height: 40px;
  transition: transform 0.3s ease;
}
.ks-shelf__i:hover svg {
  transform: translateY(-6px) scale(1.12);
}
.ks-shelf__i b {
  position: absolute;
  bottom: calc(100% + 4px);
  padding: 4px 9px;
  border-radius: 8px;
  background: var(--ks-burgundy);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.ks-shelf__i:hover b,
.ks-shelf__i:focus-visible b {
  opacity: 1;
  transform: none;
}
@keyframes ks-sway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ks-shelf__i { animation: none; }
}
@media (max-width: 860px) {
  .ks-shelf {
    gap: 4px 16px;
    margin-top: 40px;
  }
  .ks-shelf__i svg {
    width: 30px;
    height: 30px;
  }
}

/* «Открыто до 20:00»: зелёная точка днём, серая ночью */
.ks-open {
  display: block;
  font-style: normal;
  color: var(--ks-text);
}
.ks-open::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 6px 1px 0;
  border-radius: 50%;
  background: #b7aab0;
}
.ks-open.is-open::before {
  background: #5fb37a;
  box-shadow: 0 0 0 3px rgba(95, 179, 122, 0.18);
}
.ks-open[hidden] {
  display: none;
}

/* =========================================================================
   Наведение (ноябрь 2026): без розовых «таблеток» и кружков.
   Меню — линия из центра, значки — цвет и подъём, кнопки — тёмная слива.
   ========================================================================= */
.ks-catnav a,
.ks-catnav a:hover,
.ks-catnav a.is-current {
  position: relative;
  background: none;
}
.ks-catnav a {
  color: var(--ks-chocolate);
  transition: color 0.2s ease;
}
.ks-catnav a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 3px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: left 0.28s ease, right 0.28s ease;
}
.ks-catnav a:hover {
  color: var(--ks-burgundy);
}
.ks-catnav a:hover::after,
.ks-catnav a.is-current::after {
  left: 10px;
  right: 10px;
}
.ks-catnav a.is-current {
  color: var(--ks-rose-dark);
}

.ks-header .ks-ico--flat:hover,
.ks-header .ks-hsearch__toggle:hover,
.ks-header .ks-cart-link:hover,
.ks-tools .ks-sort:hover,
.ks-tools .ks-sort.is-set {
  background: none;
}
.ks-header .ks-ico--flat,
.ks-header .ks-hsearch__toggle,
.ks-header .ks-cart-link,
.ks-tools .ks-sort {
  transition: color 0.2s ease, transform 0.2s ease;
}
.ks-header .ks-ico--flat:hover,
.ks-header .ks-hsearch__toggle:hover,
.ks-header .ks-cart-link:hover,
.ks-tools .ks-sort:hover {
  color: var(--ks-burgundy);
  transform: translateY(-1px);
}
.ks-ico[aria-expanded="true"] {
  background: none;
  border-color: transparent;
  color: var(--ks-burgundy);
}

/* «В корзину»: в покое — светлая, под курсором — тёмная слива */
.ks-product-card .ks-button,
.ks-more__btn {
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ks-product-card .ks-button:hover {
  background: var(--ks-burgundy);
  color: #fff;
}
.ks-more__btn:hover {
  background: var(--ks-burgundy);
  border-color: var(--ks-burgundy);
  color: #fff;
}
.ks-button--primary:hover,
.ks-co__go:hover {
  background: var(--ks-rose-dark);
}

/* карточка и лента: снимок чуть ближе, название темнеет, без розового */
.ks-product-card__title a {
  transition: color 0.2s ease;
}
.ks-product-card:hover .ks-product-card__title a {
  color: var(--ks-burgundy);
}
.ks-ribbon__item:hover {
  color: var(--ks-burgundy);
}
.ks-ribbon__item span:not(.ks-ribbon__ph) {
  transition: color 0.2s ease;
}

/* ссылки в тексте: подчёркивание вместо смены на розовый */
.ks-reviews__head a:hover,
.ks-co__side .ks-consent a:hover {
  color: var(--ks-burgundy);
}

/* плашка повода с фото — на четверть выше */
.ks-occ--photo {
  min-height: 165px;
}
@media (max-width: 860px) {
  .ks-occ--photo {
    min-height: 188px;
  }
}

/* =========================================================================
   Цветовые гаммы (админка → Настройки → Вид сайта). По умолчанию — бордо
   и слоновая кость (:root). Остальные переопределяют те же переменные.
   ========================================================================= */
.theme-navy {
  --ks-cream: #fbf8f1; --ks-cream-2: #f2ede2; --ks-card: #ffffff;
  --ks-text: #232a3a; --ks-text-muted: #7d8190; --ks-text-invert: #fbf8f1;
  --ks-border: #e9e4d8; --ks-border-strong: #d8d0bf;
  --ks-gold: #e3a36f; --ks-gold-soft: #f6e6d2;
  --ks-rose: #1f2d4a; --ks-rose-dark: #131d33; --ks-wine: #d58a52;
  --ks-burgundy: #1a243b; --ks-chocolate: #1a243b;
  --ks-blush-soft: #f5ece0; --ks-blush: #ecd9c2;
  --ks-shade: 26, 36, 59; --ks-accent-rgb: 31, 45, 74;
  --ks-brand-lilac: #e3a36f; --ks-brand-coral: #d58a52; --ks-sale: #d58a52;
}
.theme-pistachio {
  --ks-cream: #f6f4ec; --ks-cream-2: #eeece0; --ks-card: #ffffff;
  --ks-text: #33291f; --ks-text-muted: #80796b; --ks-text-invert: #f6f4ec;
  --ks-border: #e4e1d3; --ks-border-strong: #d2cdb9;
  --ks-gold: #b5c78e; --ks-gold-soft: #eef0dc;
  --ks-rose: #4a3326; --ks-rose-dark: #2f2018; --ks-wine: #7d924f;
  --ks-burgundy: #2f2018; --ks-chocolate: #2f2018;
  --ks-blush-soft: #e9eedb; --ks-blush: #d7e0bf;
  --ks-shade: 47, 32, 24; --ks-accent-rgb: 74, 51, 38;
  --ks-brand-lilac: #b5c78e; --ks-brand-coral: #93a86b; --ks-sale: #93a86b;
}

/* снег на баннере-подборке */
.ks-snow {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.ks-snow i {
  position: absolute;
  top: -30px;
  left: var(--l);
  width: var(--s);
  height: var(--s);
  background: #fff;
  opacity: 0.7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17l17.4-10M12 2l-2.5 2.5M12 2l2.5 2.5M12 22l-2.5-2.5M12 22l2.5-2.5M3.3 7l3.4.9M3.3 7l.9-3.4M20.7 17l-3.4-.9M20.7 17l-.9 3.4M3.3 17l.9 3.4M3.3 17l3.4-.9M20.7 7l-.9-3.4M20.7 7l-3.4.9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17l17.4-10M12 2l-2.5 2.5M12 2l2.5 2.5M12 22l-2.5-2.5M12 22l2.5-2.5M3.3 7l3.4.9M3.3 7l.9-3.4M20.7 17l-3.4-.9M20.7 17l-.9 3.4M3.3 17l.9 3.4M3.3 17l3.4-.9M20.7 7l-.9-3.4M20.7 7l-3.4.9'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: ks-snow var(--t) linear var(--d) infinite;
}
@keyframes ks-snow {
  0% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(14px, 110px) rotate(60deg); }
  50% { transform: translate(-10px, 220px) rotate(130deg); }
  75% { transform: translate(12px, 330px) rotate(200deg); }
  100% { transform: translate(0, 440px) rotate(260deg); }
}
.ks-promo__tx,
.ks-promo__pics {
  position: relative;
  z-index: 1;
}
@media (max-width: 860px) {
  .ks-snow i { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  .ks-snow { display: none; }
}

/* конфетти заметнее: крупнее, все летят к корзине, корзина вспыхивает */
.ks-bit {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7);
}
.ks-nod {
  position: relative;
}
.ks-nod::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--ks-rose);
  animation: ks-ring 0.6s ease-out both;
  pointer-events: none;
}
@keyframes ks-ring {
  from { transform: scale(0.6); opacity: 0.9; }
  to { transform: scale(1.5); opacity: 0; }
}

/* Пастель бордо: пудровые фоны, как в первом варианте сайта, акценты — бордо.
   Наведение на кнопки обратное: белый фон и тёмный текст. */
.theme-blush {
  --ks-cream: #fdf9f7; --ks-cream-2: #f8eef0; --ks-card: #ffffff;
  --ks-text: #4a3a3e; --ks-text-muted: #9a8a8e; --ks-text-invert: #fdf9f7;
  --ks-border: #f1e4e7; --ks-border-strong: #e5cdd3;
  --ks-gold: #d4b07a; --ks-gold-soft: #f6ece0;
  --ks-rose: #8e2a3e; --ks-rose-dark: #6e1f2e; --ks-wine: #a64b5e;
  --ks-burgundy: #4a1d28; --ks-chocolate: #4a1d28;
  --ks-blush-soft: #f8eaed; --ks-blush: #f0d6dc;
  --ks-shade: 74, 29, 40; --ks-accent-rgb: 142, 42, 62;
  --ks-brand-lilac: #d9a3b0; --ks-brand-coral: #8e2a3e; --ks-sale: #8e2a3e;
}
/* Наведение на кнопки во всех гаммах одно: белый фон, тёмный текст, тонкая рамка */
.ks-button,
.ks-more__btn,
.ks-co__go {
  border: 1px solid transparent;
}
.ks-button:hover,
.ks-product-card .ks-button:hover,
.ks-more__btn:hover,
.ks-button--primary:hover,
.ks-co__go:hover,
.ks-cartd .ks-co__go:hover {
  background: #fff;
  color: var(--ks-burgundy);
  border-color: var(--ks-border-strong);
  box-shadow: 0 6px 18px rgba(var(--ks-shade), 0.1);
}

/* Мята и изумруд: мятный фон, изумрудные кнопки, розовые детали */
.theme-mint {
  --ks-cream: #f7f8f4; --ks-cream-2: #eef2ec; --ks-card: #ffffff;
  --ks-text: #26332f; --ks-text-muted: #77847f; --ks-text-invert: #f7f8f4;
  --ks-border: #e1e9e3; --ks-border-strong: #cbd9d0;
  --ks-gold: #e8b4bc; --ks-gold-soft: #f5e7e5;
  --ks-rose: #1f5c55; --ks-rose-dark: #14433e; --ks-wine: #c96f80;
  --ks-burgundy: #183a36; --ks-chocolate: #183a36;
  --ks-blush-soft: #e5f0ea; --ks-blush: #cfe3d8;
  --ks-shade: 24, 58, 54; --ks-accent-rgb: 31, 92, 85;
  --ks-brand-lilac: #e8b4bc; --ks-brand-coral: #c96f80; --ks-sale: #c96f80;
}

/* карточка: цена слева, квадратная «+» справа; после добавления — счётчик на её месте */
.ks-product-card__footer {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
}
.ks-addic {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--ks-border-strong);
  border-radius: 12px;
  background: var(--ks-card);
  color: var(--ks-burgundy);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.ks-addic svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  transition: transform 0.25s ease;
}
.ks-addic:hover {
  background: var(--ks-burgundy);
  border-color: var(--ks-burgundy);
  color: #fff;
}
.ks-addic:hover svg {
  transform: rotate(90deg);
}
.ks-addic:active {
  transform: scale(0.94);
}
.ks-addic[hidden] {
  display: none;
}
.ks-product-card .ks-qty {
  flex: none;
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 2px;
  border: 1px solid var(--ks-border-strong);
  border-radius: 12px;
  background: var(--ks-card);
}
.ks-product-card .ks-qty[hidden] {
  display: none;
}
.ks-product-card .ks-qty button {
  width: 34px;
  height: 38px;
  border: 0;
  background: none;
  color: var(--ks-burgundy);
  font-size: 1.1rem;
  cursor: pointer;
}
.ks-product-card .ks-qty span {
  min-width: 22px;
  text-align: center;
  font-weight: 600;
  color: var(--ks-burgundy);
}
@media (max-width: 860px) {
  .ks-addic,
  .ks-product-card .ks-qty {
    height: 40px;
  }
  .ks-addic {
    width: 40px;
  }
  .ks-product-card .ks-qty button {
    width: 28px;
  }
}

/* =========================================================================
   Подвал: две строки, без повторов шапки и ленты
   ========================================================================= */
.ks-ft {
  margin-top: 0;
  background: var(--ks-burgundy);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.88rem;
}
.ks-ft a {
  color: inherit;
  text-decoration: none;
}
.ks-ft__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
  padding-block: 36px 28px;
}
.ks-ft__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ks-ft__brand img {
  width: 40px;
  height: auto;
}
.ks-ft__brand b {
  display: block;
  font-family: var(--ks-font-logo);
  font-weight: 400;
  font-size: 1.3rem;
  color: #fff;
}
.ks-ft__brand small {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
}
.ks-ft__contacts {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 28px;
  font-style: normal;
}
/* ссылки: тонкая линия выезжает слева */
.ks-ft__contacts a,
.ks-ft__bottom nav a {
  position: relative;
  padding-bottom: 2px;
  transition: color 0.2s ease;
}
.ks-ft__contacts a::after,
.ks-ft__bottom nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.3s ease;
}
.ks-ft__contacts a:hover,
.ks-ft__bottom nav a:hover {
  color: #fff;
}
.ks-ft__contacts a:hover::after,
.ks-ft__bottom nav a:hover::after {
  width: 100%;
}
.ks-ft__social {
  display: flex;
  gap: 8px;
}
.ks-ft__social a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  color: #fff;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ks-ft__social svg {
  width: 18px;
  height: 18px;
}
.ks-ft__social a:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ks-burgundy);
}
.ks-ft__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding-block: 18px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
}
.ks-ft__bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}
@media (max-width: 860px) {
  .ks-ft__top {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    gap: 18px;
    padding-block: 28px 20px;
  }
  .ks-ft__contacts {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .ks-ft__bottom {
    flex-direction: column;
    text-align: center;
  }
  .ks-ft__bottom nav {
    justify-content: center;
  }
}
.ks-shelf {
  margin-top: 8px;
}
.ks-ft__bottom > span {
  max-width: 100%;
}
/* подвал: при наведении только светлеет, без подчёркивания */
.ks-ft__contacts a::after,
.ks-ft__bottom nav a::after {
  display: none;
}

/* страница товара: фото как снято, без фильтра каталога */
.ks-product .ks-slider__shot,
.ks-gallery img {
  filter: none !important;
}

/* название праздника на плашке — курсивная антиква (Cormorant Garamond) */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/cormorant-500i-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/cormorant-500i-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.ks-occ__name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(30px, 1.2rem + 1.6vw, 46px);
  line-height: 1;
}
.ks-promo__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 500;
}
@media (max-width: 860px) {
  .ks-occ__name {
    font-size: 30px;
  }
}
/* цена на карточке чуть крупнее */
.ks-product-card .ks-price {
  font-size: 1.14rem;
}
@media (max-width: 860px) {
  .ks-product-card .ks-price {
    font-size: 1.06rem;
  }
}

/* =========================================================================
   Сезонный эффект на баннере-подборке: снег, листья, лепестки, бабочки
   ========================================================================= */
.ks-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.ks-fx i {
  position: absolute;
  top: -30px;
  left: var(--l);
  width: var(--s);
  height: var(--s);
  animation: ks-fall var(--t) linear var(--d) infinite;
}
.ks-fx b {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  -webkit-mask: var(--shape) center / contain no-repeat;
  mask: var(--shape) center / contain no-repeat;
}
@keyframes ks-fall {
  0% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(16px, 110px) rotate(70deg); }
  50% { transform: translate(-12px, 220px) rotate(150deg); }
  75% { transform: translate(14px, 330px) rotate(230deg); }
  100% { transform: translate(0, 440px) rotate(300deg); }
}
/* зима — снежинки */
.ks-fx--snow b {
  --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17l17.4-10M12 2l-2.5 2.5M12 2l2.5 2.5M12 22l-2.5-2.5M12 22l2.5-2.5'/%3E%3C/svg%3E");
  opacity: 0.7;
}
/* осень — кленовые листья */
.ks-fx--leaves i { width: calc(var(--s) * 1.6); height: calc(var(--s) * 1.6); }
.ks-fx--leaves b { --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2 5 4-2-1 5 4 1-4 3 2 4-5-1-1 5-2-4-2 4-1-5-5 1 2-4-4-3 4-1-1-5 4 2z'/%3E%3C/svg%3E"); opacity: 0.85; }
.ks-fx--leaves i:nth-child(4n+1) b { background: #c96a3b; }
.ks-fx--leaves i:nth-child(4n+2) b { background: #d9a441; }
.ks-fx--leaves i:nth-child(4n+3) b { background: #a4452c; }
.ks-fx--leaves i:nth-child(4n) b { background: #e0913e; }
.ks-fx--leaves i { animation-name: ks-leaf; }
@keyframes ks-leaf {
  0% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(26px, 110px) rotate(100deg); }
  50% { transform: translate(-16px, 220px) rotate(210deg); }
  75% { transform: translate(20px, 330px) rotate(300deg); }
  100% { transform: translate(0, 440px) rotate(400deg); }
}
/* весна — лепестки вишни */
.ks-fx--petals b { --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5 4 7 9 4 15-1.5 3-6.5 3-8 0C5 11 7 6 12 2z'/%3E%3C/svg%3E"); opacity: 0.85; }
.ks-fx--petals i:nth-child(3n+1) b { background: #f7c6d3; }
.ks-fx--petals i:nth-child(3n+2) b { background: #fde4ea; }
.ks-fx--petals i:nth-child(3n) b { background: #ffffff; }
.ks-fx--petals i { animation-name: ks-petal; }
@keyframes ks-petal {
  0% { transform: translate(0, 0) rotate(0) scaleX(1); }
  25% { transform: translate(30px, 110px) rotate(80deg) scaleX(0.5); }
  50% { transform: translate(60px, 220px) rotate(170deg) scaleX(1); }
  75% { transform: translate(40px, 330px) rotate(250deg) scaleX(0.5); }
  100% { transform: translate(70px, 440px) rotate(330deg) scaleX(1); }
}
/* лето — бабочки взлетают снизу и машут крыльями */
.ks-fx--butterflies i {
  top: auto;
  bottom: -30px;
  width: calc(var(--s) * 1.7);
  height: calc(var(--s) * 1.7);
  animation-name: ks-flyup;
}
.ks-fx--butterflies b {
  --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.3 11C9 6 3 3 2.5 6c-.4 2.4 2.2 5 5.5 5.6C4.5 12.6 3.6 16.5 6 17.6c2.2 1 4.5-2 5.3-5.2zM12.7 11C15 6 21 3 21.5 6c.4 2.4-2.2 5-5.5 5.6 3.5 1 4.4 4.9 2 6-2.2 1-4.5-2-5.3-5.2z'/%3E%3Crect x='11.3' y='8' width='1.4' height='9' rx='.7'/%3E%3C/svg%3E");
  opacity: 0.9;
  animation: ks-flap 0.45s ease-in-out infinite alternate;
}
.ks-fx--butterflies i:nth-child(4n+1) b { background: #ffd27f; }
.ks-fx--butterflies i:nth-child(4n+2) b { background: #f7b6c8; }
.ks-fx--butterflies i:nth-child(4n+3) b { background: #bfe3f5; }
.ks-fx--butterflies i:nth-child(4n) b { background: #ffffff; }
@keyframes ks-flyup {
  0% { transform: translate(0, 0) rotate(-8deg); }
  25% { transform: translate(30px, -110px) rotate(10deg); }
  50% { transform: translate(-20px, -220px) rotate(-12deg); }
  75% { transform: translate(26px, -330px) rotate(8deg); }
  100% { transform: translate(0, -460px) rotate(-6deg); }
}
@keyframes ks-flap {
  from { transform: scaleX(1); }
  to { transform: scaleX(0.35); }
}
@media (max-width: 860px) {
  .ks-fx b { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .ks-fx { display: none; }
}
.ks-fx--butterflies i {
  width: calc(var(--s) * 2.3);
  height: calc(var(--s) * 2.3);
}
.ks-fx--petals i {
  width: calc(var(--s) * 1.35);
  height: calc(var(--s) * 1.35);
}

/* =========================================================================
   Избранное и личный кабинет (ноябрь 2026)
   ========================================================================= */
.ks-product-card { position: relative; }
.ks-fav {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  background: rgba(255, 255, 255, .88); color: var(--ks-burgundy);
  transition: transform .15s ease, background .15s ease;
}
.ks-fav svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.ks-fav:hover { background: #fff; transform: scale(1.08); }
.ks-fav.is-on svg { fill: var(--ks-rose); stroke: var(--ks-rose); }
.ks-fav.is-on { animation: ks-fav-pop .3s ease; }
@keyframes ks-fav-pop { 50% { transform: scale(1.25); } }
.ks-fav--lg {
  position: static; width: 52px; height: 52px; flex: none;
  border: 1px solid var(--ks-border-strong); background: #fff;
}
.ks-fav--lg svg { width: 22px; height: 22px; }

.ks-linkbtn {
  border: 0; background: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--ks-burgundy); text-decoration: underline; text-underline-offset: 3px;
}
.ks-linkbtn:hover { color: var(--ks-text); }

.ks-account__card [data-acc-step] { display: grid; gap: 14px; }
.ks-account__card [data-acc-step][hidden] { display: none; }
.ks-account__card input:not([type]),
.ks-account__card input[type="text"] {
  height: 48px; padding: 0 14px; border: 1px solid var(--ks-border-strong);
  border-radius: 12px; background: #fff; font: inherit; color: var(--ks-text);
}
.ks-acc-code { font-size: 1.5rem !important; letter-spacing: .45em; text-align: center; font-variant-numeric: tabular-nums; }
.ks-acc-code:focus { outline: none; border-color: var(--ks-rose) !important; }
.ks-acc-spam {
  margin: 0; padding: 12px 14px; border-radius: 12px;
  background: var(--ks-blush-soft); color: var(--ks-text); font-size: .88rem; line-height: 1.5;
}
.ks-acc-again { margin: 0; font-size: .9rem; color: var(--ks-text-muted); }
.ks-acc-msg { margin: 0; min-height: 1.2em; font-size: .9rem; color: var(--ks-burgundy); }
.ks-acc-legacy:empty { display: none; }
.ks-acc-legacy { width: 100%; max-width: 860px; }

.ks-acc { width: 100%; max-width: 860px; }
.ks-acc__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.ks-acc__title { margin: 0; font-family: var(--ks-font-body); font-size: 2rem; font-weight: 700; color: var(--ks-burgundy); }
.ks-acc__who { margin: 4px 0 0; color: var(--ks-text-muted); }
.ks-acc__tabs {
  display: flex; gap: 4px; margin-bottom: 8px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--ks-border);
}
.ks-acc__tabs button {
  flex: none; border: 0; background: none; padding: 12px 16px; margin-bottom: -1px;
  font: inherit; font-weight: 600; color: var(--ks-text-muted); cursor: pointer;
  border-bottom: 2px solid transparent;
}
.ks-acc__tabs button:hover { color: var(--ks-text); }
.ks-acc__tabs button[aria-selected="true"] { color: var(--ks-burgundy); border-bottom-color: var(--ks-burgundy); }
.ks-acc__again { margin-top: 12px; }
.ks-acc__hint { margin: 16px 0 8px; color: var(--ks-text-muted); font-size: .92rem; }
.ks-acc__empty { padding: 48px 0; text-align: center; color: var(--ks-text-muted); }
.ks-acc__empty p { margin: 0 auto 18px; max-width: 420px; }
.ks-acc__addrs { list-style: none; margin: 8px 0 20px; padding: 0; }
.ks-acc__addrs li {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--ks-border);
}
.ks-acc__addrs li div { display: grid; gap: 2px; }
.ks-acc__form { display: grid; gap: 14px; max-width: 460px; margin-top: 16px; }
.ks-acc__form label { display: grid; gap: 6px; }
.ks-acc__form input {
  height: 48px; padding: 0 14px; border: 1px solid var(--ks-border-strong);
  border-radius: 12px; background: #fff; font: inherit; color: var(--ks-text);
}
.ks-acc__form input:disabled { background: var(--ks-cream-2, #f3eee8); color: var(--ks-text-muted); }
.ks-acc__form input:focus { outline: none; border-color: var(--ks-rose); }
.ks-acc__form .ks-button { justify-self: start; }
.ks-acc__favs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; margin-top: 18px; }
.ks-acc__favw { position: relative; }
.ks-acc__fav { display: grid; gap: 6px; color: var(--ks-text); text-decoration: none; }
.ks-acc__fav img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; filter: var(--ks-photo-filter, none); }
.ks-acc__fav-name { font-size: .92rem; line-height: 1.3; }
.ks-acc__fav-price { font-weight: 700; color: var(--ks-burgundy); }
.ks-addr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ks-addr-chips button {
  border: 1px solid var(--ks-border-strong); background: #fff; border-radius: 10px;
  padding: 6px 12px; font: inherit; font-size: .88rem; cursor: pointer; color: var(--ks-text);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ks-addr-chips button:hover { border-color: var(--ks-burgundy); }
@media (max-width: 640px) {
  .ks-acc__title { font-size: 1.6rem; }
  .ks-acc__favs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ks-fav { width: 32px; height: 32px; top: 8px; right: 8px; }
}
.ks-account__card[hidden], .ks-acc[hidden] { display: none; }
.ks-account { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 640px) { .ks-acc__tabs button { padding: 12px 10px; } }

/* Вторая лента посреди витрины */
.ks-rib2 { grid-column: 1 / -1; min-width: 0; margin: 8px 0 4px; }
.ks-rib2[hidden] { display: none; }
.ks-rib2 .ks-ribwrap.noscroll .ks-ribbon { justify-content: center; }