/* ============================================================
   Карламанский МКК — премиальный слой (оформление)
   Корзина-заявка, быстрый просмотр, калькулятор, эффекты.
   Использует токены из styles.css.
   ============================================================ */

.kmkk-noscroll { overflow: hidden; }

.kmkk-eyebrow {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--caramel-700); margin: 0 0 4px;
}
.kmkk-iconbtn {
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--cream-300); background: var(--white); color: var(--brown-700);
  border-radius: var(--radius-md); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
}
.kmkk-iconbtn:hover { background: var(--cream-100); color: var(--brown-900); border-color: var(--caramel-400); }
.kmkk-iconbtn svg { width: 20px; height: 20px; }
.kmkk-textbtn { background: none; border: 0; color: var(--brown-600); font: inherit; font-size: .88rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.kmkk-textbtn:hover { color: var(--caramel-600); }

/* ---------- Тосты ---------- */
.kmkk-toasts { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 200; display: grid; gap: 10px; pointer-events: none; width: min(92vw, 420px); }
.kmkk-toast {
  display: flex; align-items: center; gap: 10px; padding: 13px 18px;
  background: var(--brown-900); color: var(--cream-50); border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg); font-size: .92rem; font-weight: 500;
  opacity: 0; transform: translateY(14px); transition: opacity .3s, transform .3s;
}
.kmkk-toast.is-in { opacity: 1; transform: none; }
.kmkk-toast svg { width: 19px; height: 19px; color: var(--sage-400); flex: none; }

/* ---------- FAB ---------- */
.kmkk-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 120;
  width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(150deg, var(--caramel-400), var(--caramel-600));
  color: var(--white); box-shadow: 0 14px 30px -10px rgba(156,109,28,.7);
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, opacity .3s;
}
.kmkk-fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 18px 36px -10px rgba(156,109,28,.8); }
.kmkk-fab svg { width: 26px; height: 26px; }
.kmkk-fab.is-empty { opacity: 0; pointer-events: none; transform: scale(.6); }
.kmkk-fab__badge {
  position: absolute; top: -4px; right: -4px; min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: var(--radius-full); background: var(--navy-800); color: var(--white);
  font-size: .76rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--cream-50); box-shadow: var(--shadow-sm);
}

/* ---------- Drawer ---------- */
.kmkk-drawer { position: fixed; inset: 0; z-index: 150; visibility: hidden; }
.kmkk-drawer.is-open { visibility: visible; }
.kmkk-drawer__scrim { position: absolute; inset: 0; background: rgba(22,41,63,.45); backdrop-filter: blur(2px); opacity: 0; transition: opacity .35s; }
.kmkk-drawer.is-open .kmkk-drawer__scrim { opacity: 1; }
.kmkk-drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(440px, 100%);
  background: var(--cream-50); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .4s cubic-bezier(.22,1,.36,1);
  border-left: 1px solid var(--cream-200);
}
.kmkk-drawer.is-open .kmkk-drawer__panel { transform: none; }
.kmkk-drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 22px 16px; border-bottom: 1px solid var(--cream-200); }
.kmkk-drawer__title { font-size: 1.5rem; margin: 0; }
.kmkk-drawer__body { flex: 1; overflow-y: auto; padding: 18px 22px; }
.kmkk-drawer__foot { padding: 18px 22px 22px; border-top: 1px solid var(--cream-200); background: var(--cream-100); display: grid; gap: 12px; }
.kmkk-foot__sum { display: flex; align-items: center; justify-content: space-between; font-size: .92rem; color: var(--brown-700); font-weight: 600; }
.kmkk-foot__cta { width: 100%; }
.kmkk-foot__note { margin: 2px 0 0; font-size: .8rem; color: var(--brown-600); line-height: 1.45; }

.kmkk-empty { text-align: center; padding: 48px 10px; color: var(--brown-600); display: grid; gap: 16px; justify-items: center; }
.kmkk-empty svg { width: 56px; height: 56px; color: var(--cream-300); }
.kmkk-empty p { margin: 0; }

.kmkk-lines { display: grid; gap: 14px; }
.kmkk-line { display: grid; grid-template-columns: 58px 1fr auto; gap: 14px; align-items: center; background: var(--white); border: 1px solid var(--cream-200); border-radius: var(--radius-md); padding: 12px; }
.kmkk-line__media { width: 58px; height: 58px; border-radius: 10px; background: linear-gradient(180deg, var(--cream-100), var(--cream-50)); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.kmkk-line__media img { max-width: 84%; max-height: 84%; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.kmkk-line__name { font-size: .92rem; font-weight: 600; color: var(--brown-900); margin: 0 0 6px; line-height: 1.3; }
.kmkk-line__pack { width: 100%; min-height: 36px; padding: 6px 10px; font: inherit; font-size: .84rem; border: 1.5px solid var(--cream-300); border-radius: 8px; background: var(--white); color: var(--brown-700); }
.kmkk-line__side { display: grid; gap: 8px; justify-items: end; }
.kmkk-line__del { background: none; border: 0; color: var(--brown-600); font: inherit; font-size: .78rem; cursor: pointer; }
.kmkk-line__del:hover { color: #B4452E; }

/* Степпер */
.kmkk-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--cream-300); border-radius: var(--radius-full); overflow: hidden; background: var(--white); }
.kmkk-stepper button { width: 32px; height: 34px; border: 0; background: none; cursor: pointer; font-size: 1.1rem; color: var(--brown-700); line-height: 1; }
.kmkk-stepper button:hover { background: var(--cream-100); color: var(--caramel-600); }
.kmkk-stepper input { width: 40px; height: 34px; border: 0; text-align: center; font: inherit; font-size: .92rem; font-weight: 600; color: var(--brown-900); background: none; -moz-appearance: textfield; }
.kmkk-stepper input::-webkit-outer-spin-button, .kmkk-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kmkk-stepper--lg button { width: 44px; height: 50px; font-size: 1.3rem; }
.kmkk-stepper--lg input { width: 60px; height: 50px; font-size: 1.05rem; }

/* ---------- Модалка ---------- */
.kmkk-modal { position: fixed; inset: 0; z-index: 160; visibility: hidden; }
.kmkk-modal.is-open { visibility: visible; }
.kmkk-modal__scrim { position: absolute; inset: 0; background: rgba(22,41,63,.55); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s; }
.kmkk-modal.is-open .kmkk-modal__scrim { opacity: 1; }
.kmkk-modal__card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%) scale(.96);
  width: min(880px, 94vw); max-height: 92vh; overflow: auto; background: var(--cream-50);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); opacity: 0;
  transition: opacity .3s, transform .35s cubic-bezier(.22,1,.36,1);
}
.kmkk-modal.is-open .kmkk-modal__card { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.kmkk-modal__close { position: absolute; top: 14px; right: 14px; z-index: 3; background: rgba(253,250,244,.9); }
.kmkk-modal__body { display: grid; grid-template-columns: 0.9fr 1.1fr; }
.kmkk-modal__media { background: radial-gradient(360px 240px at 60% 30%, rgba(220,232,203,.55), transparent 70%), linear-gradient(180deg, var(--cream-100), var(--cream-50)); display: flex; align-items: center; justify-content: center; padding: 40px; min-height: 320px; }
.kmkk-modal__media img { max-height: 360px; width: auto; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; filter: drop-shadow(0 24px 30px rgba(44,33,20,.18)); }
.kmkk-modal__info { padding: clamp(24px, 3vw, 40px); }
.kmkk-modal__tag { font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--caramel-700); }
.kmkk-modal__title { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 8px 0 10px; }
.kmkk-modal__lead { color: var(--brown-600); margin: 0 0 18px; }
.kmkk-spec { width: 100%; border-collapse: collapse; font-size: .9rem; margin-bottom: 20px; }
.kmkk-spec th, .kmkk-spec td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--cream-200); vertical-align: top; }
.kmkk-spec th { font-weight: 600; color: var(--brown-700); width: 44%; padding-right: 14px; }
.kmkk-spec td { color: var(--brown-600); }
.kmkk-modal__packlabel { font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--brown-700); margin: 0 0 10px; }
.kmkk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.kmkk-chip { padding: 8px 16px; border-radius: var(--radius-full); border: 1.5px solid var(--cream-300); background: var(--white); font: inherit; font-size: .86rem; color: var(--brown-700); cursor: pointer; transition: all .2s; }
.kmkk-chip:hover { border-color: var(--caramel-400); }
.kmkk-chip.is-active { background: var(--brown-900); border-color: var(--brown-900); color: var(--cream-50); }
.kmkk-modal__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.kmkk-modal__price { font-size: .9rem; color: var(--brown-600); font-weight: 500; }

/* ---------- Кнопки на карточках ---------- */
.kmkk-card-actions { display: flex; gap: 10px; margin-top: 18px; }
.kmkk-card-btn { flex: 1; min-height: 44px; border-radius: var(--radius-full); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: all .2s; }
.kmkk-card-btn svg { width: 17px; height: 17px; }
.kmkk-card-btn--ghost { background: var(--white); border: 1.5px solid var(--cream-300); color: var(--brown-800, var(--brown-700)); }
.kmkk-card-btn--ghost:hover { border-color: var(--caramel-400); color: var(--caramel-600); }
.kmkk-card-btn--solid { background: var(--caramel-600); border: 1.5px solid var(--caramel-600); color: var(--white); box-shadow: 0 8px 18px -10px rgba(156,109,28,.7); }
.kmkk-card-btn--solid:hover { background: var(--caramel-700); border-color: var(--caramel-700); }
.kmkk-card-btn.is-bump { animation: kmkk-bump .4s ease; }
@keyframes kmkk-bump { 0%,100% { transform: none; } 30% { transform: scale(.92); } 60% { transform: scale(1.05); } }

/* ---------- Калькулятор ---------- */
.kmkk-calc { background: var(--white); border: 1px solid var(--cream-200); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 34px); box-shadow: var(--shadow-md); }
.kmkk-calc__controls { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 18px; align-items: end; }
.kmkk-calc__out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 26px 0; }
.kmkk-metric { background: linear-gradient(165deg, var(--cream-100), var(--sage-100)); border: 1px solid var(--cream-200); border-radius: var(--radius-md); padding: 18px 16px; text-align: center; }
.kmkk-metric--wide { grid-column: 1 / -1; background: linear-gradient(160deg, var(--navy-800), var(--navy-900)); border-color: var(--navy-900); }
.kmkk-metric__v { font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 700; color: var(--navy-800); line-height: 1.1; }
.kmkk-metric--wide .kmkk-metric__v { color: var(--caramel-300); }
.kmkk-metric__l { font-size: .82rem; color: var(--brown-600); margin-top: 6px; }
.kmkk-metric--wide .kmkk-metric__l { color: var(--cream-200); }
.kmkk-calc__foot { display: grid; gap: 12px; }
.kmkk-calc__foot .btn { width: fit-content; }

/* ---------- Сводка заявки на «Партнёрам» ---------- */
.kmkk-pbasket { background: var(--white); border: 1px solid var(--caramel-300); border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: 22px; box-shadow: var(--shadow-sm); }
.kmkk-pbasket__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.kmkk-pbasket__list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.kmkk-pbasket__list li { display: flex; justify-content: space-between; gap: 12px; font-size: .92rem; color: var(--brown-700); padding-bottom: 8px; border-bottom: 1px dashed var(--cream-300); }
.kmkk-pbasket__list li:last-child { border-bottom: 0; }
.kmkk-pbasket__list strong { color: var(--navy-800); white-space: nowrap; }

/* ---------- Прелоадер ---------- */
.kmkk-pre { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #FAFCF3, #FDFAF2); transition: opacity .6s ease, visibility .6s; }
.kmkk-pre.is-gone { opacity: 0; visibility: hidden; }
.kmkk-pre__inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.kmkk-pre__drop { width: 54px; height: 54px; border-radius: 50% 50% 50% 0; background: linear-gradient(150deg, var(--caramel-300), var(--caramel-600)); transform: rotate(-45deg); box-shadow: 0 12px 26px -8px rgba(156,109,28,.6); animation: kmkk-drip 1.4s ease-in-out infinite; }
.kmkk-pre__name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; color: var(--brown-900); opacity: .9; }
@keyframes kmkk-drip { 0%,100% { transform: rotate(-45deg) scale(1); } 50% { transform: rotate(-45deg) scale(1.14); } }

/* ---------- Частицы в hero ---------- */
.kmkk-particles { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.kmkk-particle { position: absolute; bottom: -20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,247,224,.95), rgba(217,164,65,.55)); animation: kmkk-float linear infinite; }
@keyframes kmkk-float { 0% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-52vh) translateX(20px); } 100% { transform: translateY(-104vh) translateX(-10px); } }

/* ---------- Магнитные кнопки / блик карточек ---------- */
.kmkk-magnetic { transition: transform .25s cubic-bezier(.22,1,.36,1), background-color .2s, box-shadow .2s; }
.kmkk-sheen { position: relative; }
.kmkk-sheen::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45) 48%, transparent 62%);
  background-size: 250% 100%; background-position: 150% 0; opacity: 0; transition: opacity .2s;
}
.kmkk-sheen:hover::after { opacity: 1; animation: kmkk-sweep .8s ease; }
@keyframes kmkk-sweep { from { background-position: 150% 0; } to { background-position: -120% 0; } }

/* ---------- Наверх ---------- */
.kmkk-top { position: fixed; right: 22px; bottom: 92px; z-index: 110; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--cream-300); background: rgba(253,250,244,.92); backdrop-filter: blur(8px); color: var(--brown-700); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s, transform .3s, color .2s, border-color .2s; }
.kmkk-top.is-show { opacity: 1; transform: none; pointer-events: auto; }
.kmkk-top:hover { color: var(--caramel-600); border-color: var(--caramel-400); }
.kmkk-top svg { width: 20px; height: 20px; }

/* ---------- Правовые страницы ---------- */
.legal { font-size: 1rem; color: var(--brown-700); }
.legal h2 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin: 32px 0 10px; }
.legal h2:first-of-type { margin-top: 8px; }
.legal p { margin: 0 0 14px; line-height: 1.7; }
.legal__list { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 6px; }
.legal__list li { line-height: 1.6; }
.legal__note { background: var(--cream-100); border: 1px solid var(--cream-200); border-left: 3px solid var(--caramel-400); border-radius: var(--radius-md); padding: 14px 18px; font-size: .9rem; color: var(--brown-600); margin-bottom: 26px; }

/* ---------- Ошибка отправки формы ---------- */
.kmkk-formerr { margin: 0; padding: 12px 16px; border-radius: var(--radius-md); background: #FBEAE5; border: 1px solid #E7B7AB; color: #9B3A24; font-size: .9rem; font-weight: 500; }

/* ---------- Согласие в форме ---------- */
.field--consent { display: flex; gap: 10px; align-items: flex-start; }
.field--consent input { width: 20px; height: 20px; min-height: 0; flex: none; margin-top: 2px; accent-color: var(--caramel-500); }
.field--consent label { font-size: .84rem; font-weight: 400; color: var(--brown-600); line-height: 1.5; }
.field--consent a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Адаптив ---------- */
@media (max-width: 720px) {
  .kmkk-modal__body { grid-template-columns: 1fr; }
  .kmkk-modal__media { min-height: 220px; padding: 28px; }
  .kmkk-modal__media img { max-height: 220px; }
  .kmkk-calc__controls { grid-template-columns: 1fr; }
  .kmkk-calc__out { grid-template-columns: 1fr 1fr; }
  .kmkk-fab { width: 54px; height: 54px; right: 16px; bottom: 16px; }
  .kmkk-top { right: 16px; bottom: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .kmkk-particle, .kmkk-pre__drop { animation: none !important; }
  .kmkk-sheen::after { display: none; }
}

/* ---------- Лайтбокс (двойной клик по фото) ---------- */
.kmkk-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
  background: rgba(20, 16, 12, 0.9);
  backdrop-filter: blur(4px);
  cursor: zoom-out;
}
.kmkk-lightbox.is-open { display: flex; animation: kmkkLbFade 0.2s ease; }
@keyframes kmkkLbFade { from { opacity: 0; } to { opacity: 1; } }
.kmkk-lightbox__img {
  max-width: 96vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  cursor: default;
}
.kmkk-lightbox__close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.kmkk-lightbox__close:hover { background: rgba(255, 255, 255, 0.28); }

/* ---------- Инфографика в рамке: без обрезки, с полями ---------- */
.photo-frame--info { padding: 22px; }
.photo-frame--info img { object-fit: contain; }
.photo-frame--info:hover img { transform: none; }   /* без hover-зума — не режет края */
@media (max-width: 720px) {
  .photo-frame--info { padding: 14px; }
}