/* ==========================================================================
   Гвоздика сушёная — Apeti.ru
   Design system — «Пряный каталог»: рыночный тикет / карточка каталога
   Жёсткие грани, смещённые тени, перфорация, штампы, вёрстка-леджер.
   ========================================================================== */

:root{
  --ink:        #14120F;   /* почти чёрный — основной тёмный фон и обводки */
  --ink-2:       #201C16;   /* приподнятая тёмная поверхность */
  --ink-3:       #2B241C;   /* карточки/поля на тёмном */
  --paper:      #F8F1DE;   /* тёплая бумага — светлый фон */
  --paper-dim:   #ECDFBD;   /* приглушённая бумага */
  --text-dark:   #14120F;
  --text-soft:   #5B5040;
  --marigold:    #F0A71C;   /* основной акцент */
  --marigold-dk:  #C6860E;
  --crimson:    #B5392B;   /* второй акцент */
  --crimson-br:   #D65B44;
  --cream-text:  #F3E9CE;   /* текст на тёмном */
  --line-dark:   rgba(243,233,206,0.22);
  --line-light:   rgba(20,18,15,0.2);

  --font-display: "Anton", "Archivo Black", "Arial Narrow", sans-serif;
  --font-body:    "Work Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Space Mono", "SFMono-Regular", Menlo, monospace;

  --gap-xs: 0.5rem;
  --gap-sm: 1rem;
  --gap-md: 2rem;
  --gap-lg: 4rem;
  --gap-xl: 6.5rem;
  --radius: 3px;
  --edge: 2px solid var(--ink);
  --edge-light: 2px solid var(--paper);
  --shadow-hard: 7px 7px 0 var(--ink);
  --shadow-hard-sm: 4px 4px 0 var(--ink);
  --shadow-hard-light: 6px 6px 0 rgba(20,18,15,0.5);
  --container: 1200px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior:auto !important; }
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--ink);
  color: var(--cream-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
button{ font: inherit; cursor:pointer; border:none; background:none; color:inherit; }
input, select, textarea{ font: inherit; }

.mk-wrap{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

:focus-visible{
  outline: 3px solid var(--marigold);
  outline-offset: 2px;
}

.mk-section{ padding: var(--gap-xl) 0; }
.mk-section--tight{ padding: var(--gap-lg) 0; }
.mk-section--paper{ background: var(--paper); color: var(--text-dark); }
.mk-section--ink{ background: var(--ink-2); color: var(--paper); border-top:var(--edge-light); border-bottom:var(--edge-light); border-color: var(--ink-3); }

.mk-kicker{
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--marigold);
  display:inline-flex;
  align-items:center;
  gap: 0.5em;
  margin-bottom: var(--gap-sm);
  padding: 0.25em 0.7em;
  border: 1px solid var(--marigold);
}
.mk-section--paper .mk-kicker{ color: var(--crimson); border-color: var(--crimson); }

h2.mk-title{
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: 0.005em;
  max-width: 17ch;
}
.mk-copy{
  font-size: 1.05rem;
  color: var(--paper-dim);
  max-width: 46ch;
  margin-top: var(--gap-sm);
  font-weight: 400;
}
.mk-section--paper .mk-copy{ color: var(--text-soft); }

.mk-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.6em;
  padding: 0.9em 1.9em;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: var(--edge);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.mk-btn--solid{
  background: var(--marigold);
  color: var(--ink);
  box-shadow: var(--shadow-hard-sm);
}
.mk-btn--solid:hover{ transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); background: var(--marigold-dk); }
.mk-btn--outline{
  background: transparent;
  color: var(--cream-text);
  border-color: var(--paper-dim);
}
.mk-btn--outline:hover{ transform: translate(-2px,-2px); box-shadow: var(--shadow-hard-sm); border-color: var(--marigold); color: var(--marigold); }
.mk-section--paper .mk-btn--outline{ color: var(--text-dark); border-color: var(--ink); }
.mk-section--paper .mk-btn--outline:hover{ color: var(--crimson); border-color: var(--crimson); }
.mk-btn--block{ width:100%; }
.mk-btn[disabled]{ opacity:0.5; cursor:not-allowed; transform:none; box-shadow:none; }

/* divider — перфорация ---------------------------------------------------- */
.mk-divider{
  display:flex; align-items:center; gap: 0.6rem;
  margin: var(--gap-md) 0;
}
.mk-divider svg{ width:12px; height:28px; flex-shrink:0; color: var(--marigold); }
.mk-divider-line{ height:0; flex:1; border-top: 2px dashed var(--line-dark); }
.mk-section--paper .mk-divider-line{ border-top-color: var(--line-light); }

/* ==========================================================================
   Header
   ========================================================================== */
.mk-header{
  position: sticky; top:0; z-index: 50;
  background: var(--paper);
  color: var(--text-dark);
  border-bottom: 3px solid var(--ink);
}
.mk-header .mk-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top: 0.8rem; padding-bottom: 0.8rem;
}
.mk-brand{ display:flex; align-items:center; gap:0.7rem; }
.mk-brand-badge{
  width:40px; height:40px; border-radius:50%;
  background: var(--marigold); border: 2px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  transform: rotate(-8deg);
  flex-shrink:0;
}
.mk-brand-badge svg{ width:12px; height:22px; color: var(--ink); }
.mk-brand-word{
  font-family: var(--font-display); text-transform:uppercase;
  font-size: 1.2rem; letter-spacing: 0.02em;
}
.mk-nav{ display:flex; gap: 1.6rem; font-family: var(--font-mono); font-size: 0.8rem; text-transform:uppercase; letter-spacing:.02em; }
.mk-nav a{ position:relative; padding-bottom:2px; }
.mk-nav a:hover{ color: var(--crimson); }
.mk-nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background: var(--crimson); transition: right .15s ease; }
.mk-nav a:hover::after{ right:0; }
.mk-header-tools{ display:flex; align-items:center; gap: 1.3rem; }
.mk-phone{ font-family: var(--font-mono); font-size: 0.88rem; white-space:nowrap; text-align:right; }
.mk-phone-label{ display:block; font-size:0.6rem; letter-spacing:.08em; text-transform:uppercase; color: var(--text-soft); }
@media (max-width: 900px){ .mk-nav{ display:none; } .mk-phone{ display:none; } }

/* ==========================================================================
   Hero
   ========================================================================== */
.mk-hero{
  position:relative; overflow:hidden;
  padding: clamp(2.5rem, 7vw, var(--gap-xl)) 0 var(--gap-lg);
  background: var(--ink);
  border-bottom: 3px solid var(--marigold);
}
.mk-hero::before{
  content:"";
  position:absolute; top:0; right:0; width:42%; height:100%;
  background: var(--ink-2);
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0% 100%);
  z-index:0;
}
.mk-hero .mk-wrap{ position:relative; z-index:1; }
.mk-hero-grid{
  display:grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--gap-lg); align-items:center;
}
.mk-hero-eyebrow{
  display:inline-flex; align-items:center; gap:0.5em;
  font-family: var(--font-mono); font-size:0.76rem; text-transform:uppercase; letter-spacing:.05em;
  border: 1px dashed var(--paper-dim); padding: 0.4em 0.8em; margin-bottom: 1.4rem; color: var(--paper-dim);
}
.mk-hero-title{
  font-family: var(--font-display); text-transform:uppercase; font-weight:400;
  font-size: clamp(2.3rem, 5.4vw, 4rem); line-height: 0.98; color: var(--cream-text);
}
.mk-hero-title-mark{
  background: var(--marigold); color: var(--ink);
  padding: 0 0.15em; display:inline-block; transform: rotate(-1deg);
}
.mk-hero-copy-text{ font-size: 1.05rem; color: var(--paper-dim); max-width: 46ch; margin-top: 1.3rem; }
.mk-hero-tags{ display:flex; gap: 0.6rem; margin: 1.6rem 0; flex-wrap:wrap; font-family: var(--font-mono); font-size:0.72rem; text-transform: uppercase; }
.mk-hero-tags li{ border: 1px solid var(--line-dark); padding: 0.5em 0.85em; color: var(--cream-text); }
.mk-hero-actions{ display:flex; gap: 1.3rem; flex-wrap:wrap; align-items:center; margin-top: 0.6rem; }
.mk-hero-price{
  font-family: var(--font-mono); position:relative;
  border-left: 2px dashed var(--paper-dim); padding-left: 1.1rem;
}
.mk-hero-price-num{ font-size: 1.5rem; color: var(--marigold); font-weight:700; display:block; }
.mk-hero-price-unit{ font-size: 0.72rem; color: var(--paper-dim); }

.mk-hero-visual{ position:relative; display:flex; align-items:center; justify-content:center; min-height: 340px; }
.mk-hero-card{
  width: min(260px, 80%); aspect-ratio: 1/1.15;
  border: 3px solid var(--marigold);
  background: var(--ink-3);
  display:flex; align-items:center; justify-content:center;
  transform: rotate(3deg);
  position:relative;
}
.mk-hero-card::before, .mk-hero-card::after{
  content:""; position:absolute; width:14px; height:14px; border-top:2px solid var(--marigold); border-left:2px solid var(--marigold);
}
.mk-hero-card::before{ top:-3px; left:-3px; }
.mk-hero-card::after{ bottom:-3px; right:-3px; border:none; border-bottom:2px solid var(--marigold); border-right:2px solid var(--marigold); }
.mk-hero-card-icon{ width: 46%; color: var(--marigold); }
.mk-hero-stamp{
  position:absolute; top:-8%; left:-10%;
  background: var(--crimson); color: var(--paper);
  width: 96px; height:96px; border-radius:50%;
  border: 2px solid var(--paper);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  transform: rotate(-12deg);
  font-family: var(--font-mono); text-align:center; font-size:0.68rem; line-height:1.2;
  box-shadow: var(--shadow-hard-light);
}
.mk-hero-stamp b{ display:block; font-family: var(--font-display); font-size:1.05rem; }
@media (max-width: 900px){
  .mk-hero-grid{ grid-template-columns: 1fr; }
  .mk-hero-visual{ order:-1; min-height: 240px; }
  .mk-hero::before{ display:none; }
}

/* ==========================================================================
   Тикет-ряд (было USP)
   ========================================================================== */
.mk-tickets{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.mk-ticket{
  background: var(--ink-3);
  border: var(--edge-light); border-color: var(--ink-3);
  border-top: 2px dashed var(--paper-dim);
  padding: 1.6rem 1.4rem;
  position: relative;
}
.mk-ticket:nth-child(odd){ transform: rotate(-1deg); }
.mk-ticket:nth-child(even){ transform: rotate(1deg); }
.mk-ticket::before, .mk-ticket::after{
  content:""; position:absolute; top:-7px; width:14px; height:14px; border-radius:50%; background: var(--ink-2);
  border: 2px dashed var(--paper-dim);
}
.mk-ticket::before{ left:-7px; }
.mk-ticket::after{ right:-7px; }
.mk-ticket-icon{ width:22px; height:22px; color: var(--marigold); margin-bottom: 0.9rem; }
.mk-ticket h3{ font-family: var(--font-display); text-transform:uppercase; font-weight:400; font-size:1.1rem; margin-bottom: 0.4rem; }
.mk-ticket p{ font-size: 0.87rem; color: var(--paper-dim); }
@media (max-width: 900px){ .mk-tickets{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .mk-tickets{ grid-template-columns: 1fr; } .mk-ticket{ transform:none !important; } }

/* ==========================================================================
   О продукте — коллаж
   ========================================================================== */
.mk-story{ display:grid; grid-template-columns: 0.95fr 1.05fr; gap: var(--gap-lg); align-items:start; }
.mk-story p + p{ margin-top: 1rem; }
.mk-story .mk-copy{ color: var(--text-soft); max-width: 60ch; }
.mk-callout{
  background: var(--ink);
  color: var(--cream-text);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-hard);
  padding: var(--gap-md);
  margin-top: var(--gap-md);
  transform: rotate(-1.2deg);
  position: relative;
}
.mk-callout::before{
  content:"АРХИВ"; position:absolute; top:0.8rem; right:1rem;
  font-family: var(--font-mono); font-size:0.6rem; letter-spacing:.1em; color: var(--marigold);
}
.mk-callout p{ font-size: 1.2rem; line-height:1.4; font-weight:600; }
.mk-callout span{ display:block; margin-top:1rem; font-family: var(--font-mono); font-size:0.74rem; color: var(--paper-dim); }
@media (max-width: 900px){ .mk-story{ grid-template-columns: 1fr; } }

/* ==========================================================================
   Полезные свойства — леджер-каталог (было bento-grid)
   ========================================================================== */
.mk-index{ column-count: 2; column-gap: 1.4rem; margin-top: var(--gap-md); }
.mk-index-row{
  break-inside: avoid;
  display:flex; gap: 1.1rem;
  padding: 1.3rem 0;
  border-bottom: 2px dashed var(--line-light);
  margin-bottom: 0.2rem;
}
.mk-index-num{
  font-family: var(--font-display); font-size: 2rem;
  -webkit-text-stroke: 1px var(--text-soft);
  color: transparent;
  flex-shrink:0; width: 2.4ch;
  line-height: 1;
}
.mk-index-row--accent .mk-index-num{ color: var(--crimson); -webkit-text-stroke: 0; }
.mk-index-row--accent{ background: var(--paper-dim); margin: 0 -1rem 0.2rem; padding: 1.3rem 1rem; border-bottom-style: solid; border-bottom-color: var(--ink); }
.mk-index-body h3{ font-family: var(--font-display); text-transform:uppercase; font-weight:400; font-size:1.05rem; margin-bottom:0.35rem; }
.mk-index-body p{ font-size: 0.86rem; color: var(--text-soft); }
.mk-mosaic-footnote{
  margin-top: var(--gap-md);
  font-size: 0.82rem;
  color: var(--paper-dim);
  border-left: 3px solid var(--crimson);
  padding-left: 1rem;
  max-width: 68ch;
}
@media (max-width: 760px){ .mk-index{ column-count: 1; } }

/* ==========================================================================
   Характеристики — паспорт товара
   ========================================================================== */
.mk-specs{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--gap-lg); }
.mk-datasheet{ border: 3px solid var(--ink); }
.mk-datasheet-head{
  background: var(--ink); color: var(--paper);
  font-family: var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:.08em;
  padding: 0.7rem 1rem;
}
.mk-table{ width:100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.86rem; }
.mk-table tr:nth-child(even){ background: var(--paper-dim); }
.mk-table td{ padding: 0.8rem 1rem; vertical-align: top; border-bottom: 1px solid var(--line-light); }
.mk-table td:first-child{ color: var(--text-soft); width: 42%; }
.mk-table td:last-child{ font-weight:600; color: var(--text-dark); }

.mk-stats{ display:grid; grid-template-columns: repeat(4,1fr); gap: 0.7rem; margin-top: var(--gap-md); }
.mk-stat{ border: 2px solid var(--ink); padding: 1rem 0.7rem 0.9rem; position:relative; }
.mk-stat-tag{ position:absolute; top:-9px; left:8px; background: var(--marigold); color:var(--ink); font-family: var(--font-mono); font-size:0.58rem; padding:0.1em 0.4em; transform: rotate(-2deg); }
.mk-stat .val{ font-family: var(--font-display); font-weight:400; font-size: 1.5rem; color: var(--crimson); }
.mk-stat .lbl{ font-size: 0.74rem; color: var(--text-soft); margin-top:0.3rem; text-transform:uppercase; letter-spacing:.03em; }
@media (max-width: 640px){ .mk-stats{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 900px){ .mk-specs{ grid-template-columns: 1fr; } }

/* ==========================================================================
   Применение — тёмные тикеты
   ========================================================================== */
.mk-cases{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; margin-top: var(--gap-md); }
.mk-case{
  border: 2px dashed var(--line-dark);
  padding: 1.7rem;
  transition: border-color .15s ease, transform .15s ease;
}
.mk-case:hover{ border-color: var(--marigold); transform: translateY(-3px); }
.mk-case-num{ font-family: var(--font-mono); color: var(--marigold); font-size:0.78rem; text-transform:uppercase; }
.mk-case h3{ font-family: var(--font-display); text-transform:uppercase; font-weight:400; font-size:1.3rem; margin: 0.7rem 0 0.6rem; }
.mk-case p{ color: var(--paper-dim); font-size:0.92rem; }
@media (max-width: 760px){ .mk-cases{ grid-template-columns: 1fr; } }

/* ==========================================================================
   Как заказать — таймлайн со штампами
   ========================================================================== */
.mk-timeline{ display:flex; gap: 0; margin-top: var(--gap-md); position: relative; }
.mk-timeline::before{
  content:""; position:absolute; top:26px; left:5%; right:5%; height:2px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 15px);
  z-index:0;
}
.mk-timeline-step{ flex:1; text-align:center; padding: 0 0.8rem; position:relative; z-index:1; }
.mk-timeline-num{
  width:52px; height:52px; border-radius:50%; margin: 0 auto 1.1rem;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-size:0.85rem; font-weight:700;
  border: 2px solid var(--ink); background: var(--paper);
}
.mk-timeline-step:nth-child(even) .mk-timeline-num{ background: var(--marigold); }
.mk-timeline-step:nth-child(odd) .mk-timeline-num{ background: var(--crimson); color: var(--paper); border-color: var(--crimson); }
.mk-timeline-step h3{ font-family: var(--font-display); text-transform:uppercase; font-weight:400; font-size:1rem; margin-bottom:0.4rem; }
.mk-timeline-step p{ font-size: 0.85rem; color: var(--text-soft); max-width: 22ch; margin: 0 auto; }
@media (max-width: 900px){
  .mk-timeline{ flex-direction:column; gap: 1.8rem; text-align:left; }
  .mk-timeline::before{ display:none; }
  .mk-timeline-step{ display:flex; align-items:center; gap:1.1rem; text-align:left; padding:0; }
  .mk-timeline-num{ margin:0; flex-shrink:0; }
  .mk-timeline-step p{ margin:0; }
}

/* ==========================================================================
   Доставка
   ========================================================================== */
.mk-shipping{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap-lg); margin-top: var(--gap-md); }
.mk-zones{ width:100%; border-collapse:collapse; font-size:0.9rem; }
.mk-zones th{ text-align:left; font-family: var(--font-mono); font-size:0.68rem; letter-spacing:.06em; text-transform:uppercase; color: var(--marigold); padding-bottom:0.7rem; border-bottom: 2px solid var(--ink); font-weight:600; }
.mk-zones td{ padding: 0.8rem 0; border-bottom: 1px dashed var(--line-dark); }
.mk-zones td:last-child, .mk-zones th:last-child{ text-align:right; font-family: var(--font-mono); }
.mk-payments li{ display:flex; gap:1rem; padding: 1rem 0; border-bottom: 1px dashed var(--line-dark); align-items:flex-start; }
.mk-payments-badge{
  width:30px; height:30px; border:2px solid var(--marigold); border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  font-family: var(--font-mono); font-size:0.7rem; color: var(--marigold);
}
.mk-payments h4{ font-weight:600; font-size:0.95rem; }
.mk-payments p{ font-size:0.85rem; color: var(--paper-dim); margin-top:0.2rem; }
@media (max-width: 900px){ .mk-shipping{ grid-template-columns: 1fr; } }

/* ==========================================================================
   Отзывы
   ========================================================================== */
.mk-rating{ display:flex; align-items:center; gap:1.4rem; margin-bottom: var(--gap-md); flex-wrap:wrap; }
.mk-rating-score{
  width:76px; height:76px; border-radius:50%; border:3px solid var(--ink);
  display:flex; align-items:center; justify-content:center; transform: rotate(-6deg);
  font-family: var(--font-display); font-size: 1.6rem; color: var(--crimson);
  flex-shrink:0;
}
.mk-stars{ display:flex; gap:0.2rem; color: var(--marigold-dk); margin-bottom:0.3rem; }
.mk-stars svg{ width:16px; height:16px; }
.mk-rating-meta{ font-size:0.85rem; color: var(--text-soft); }
.mk-testimonials{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.mk-testimonial{
  background: #FFFCF3; border: 2px solid var(--ink);
  padding: 1.7rem 1.6rem 1.5rem; position:relative;
  box-shadow: var(--shadow-hard-sm);
}
.mk-testimonial::before{
  content:"\201C"; position:absolute; top:-0.3rem; right:1rem;
  font-family: var(--font-display); font-size:3.6rem; color: var(--paper-dim); line-height:1; z-index:0;
}
.mk-testimonial > *{ position:relative; z-index:1; }
.mk-testimonial .mk-stars{ margin-bottom: 0.9rem; }
.mk-testimonial .mk-stars svg{ width:15px; height:15px; }
.mk-testimonial p{ font-size:0.92rem; color: var(--text-dark); line-height:1.55; }
.mk-testimonial-who{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top: 1.2rem; padding-top: 0.9rem; border-top: 2px dashed var(--line-light);
  font-family: var(--font-mono); font-size:0.75rem; color: var(--text-soft);
}
.mk-testimonial-who b{ font-family: var(--font-body); font-weight:700; color: var(--text-dark); font-size:0.86rem; }
@media (max-width: 900px){ .mk-testimonials{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .mk-testimonials{ grid-template-columns: 1fr; } }

/* ==========================================================================
   Оформление заказа — чек / квитанция
   ========================================================================== */
.mk-checkout{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--gap-lg); align-items:start; }
.mk-receipt{
  background: var(--ink-3); border: 2px solid var(--marigold);
  padding: var(--gap-md);
  position: sticky; top: 5.5rem;
  transform: rotate(-0.6deg);
  font-family: var(--font-mono);
}
.mk-receipt-line{ display:flex; justify-content:space-between; align-items:baseline; padding: 0.65rem 0; border-bottom: 1px dashed var(--line-dark); font-size:0.85rem; }
.mk-receipt-line--total{ border-bottom: none; border-top: 3px double var(--marigold); margin-top: 0.6rem; padding-top: 1.1rem; }
.mk-receipt-value{ font-size:1.5rem; color: var(--marigold); font-family: var(--font-display); font-weight:400; }
.mk-qty{ display:flex; align-items:center; gap:0.6rem; margin: 1.2rem 0; }
.mk-qty button{
  width: 36px; height:36px; border: 2px solid var(--paper-dim); color: var(--marigold);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  transition: border-color .15s;
}
.mk-qty button:hover{ border-color: var(--marigold); }
.mk-qty input{
  width: 68px; text-align:center; background: var(--ink); border: 2px solid var(--paper-dim);
  color: var(--cream-text); padding: 0.55rem 0.3rem; font-family: var(--font-mono);
}
.mk-qty-unit{ font-size:0.8rem; color: var(--paper-dim); }
.mk-receipt-note{ font-size:0.76rem; color: var(--paper-dim); margin-top:0.9rem; font-family: var(--font-body); }

.mk-order-form{
  background: var(--paper); color: var(--text-dark);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-hard);
  padding: var(--gap-md);
}
.mk-field{ margin-bottom: 1.2rem; }
.mk-field label{
  display:block; font-family: var(--font-mono); font-size:0.7rem;
  letter-spacing: 0.04em; text-transform:uppercase; color: var(--text-soft); margin-bottom:0.45rem;
}
.mk-field input, .mk-field select, .mk-field textarea{
  width:100%; background: transparent; color: var(--text-dark);
  border: none; border-bottom: 2px solid var(--ink);
  padding: 0.6em 0.1em; transition: border-color .15s;
}
.mk-field input:focus, .mk-field select:focus, .mk-field textarea:focus{ border-color: var(--crimson); }
.mk-field textarea{ resize: vertical; min-height: 78px; border:2px solid var(--ink); padding:0.6em 0.7em; }
.mk-field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field-error{ color: var(--crimson); font-size:0.78rem; margin-top:0.4rem; display:none; }
.mk-field.invalid input, .mk-field.invalid select{ border-color: var(--crimson); }
.mk-field.invalid .field-error{ display:block; }
.mk-consent{ display:flex; gap:0.6rem; font-size:0.8rem; color: var(--text-soft); align-items:flex-start; margin-bottom:1.3rem; }
.mk-consent input{ margin-top:0.2rem; }
.mk-consent a{ color: var(--crimson); text-decoration: underline; text-underline-offset:2px; }
.mk-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.mk-form-note{ font-size:0.78rem; color: var(--text-soft); margin-top:0.9rem; }
@media (max-width: 900px){
  .mk-checkout{ grid-template-columns: 1fr; }
  .mk-receipt{ position: static; transform:none; }
  .mk-field-row{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   FAQ — вкладки
   ========================================================================== */
.mk-faq-item{ border: 2px solid var(--ink); border-top:none; }
.mk-faq-item:first-child{ border-top: 2px solid var(--ink); }
.mk-faq-item summary{
  cursor:pointer; padding: 1.2rem 1.1rem; font-family: var(--font-display); text-transform:uppercase; font-weight:400;
  font-size: 1rem; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  list-style:none;
}
.mk-faq-item summary::-webkit-details-marker{ display:none; }
.mk-faq-item summary::after{
  content:"+"; font-family: var(--font-mono); color: var(--paper); background:var(--crimson); width:26px;height:26px;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0;
  transition: transform .2s;
}
.mk-faq-item[open] summary::after{ transform: rotate(45deg); }
.mk-faq-answer{ padding: 0 1.1rem 1.3rem; color: var(--text-soft); max-width: 62ch; font-size:0.94rem; border-left:4px solid var(--marigold); margin: 0 1.1rem 0; padding-left:1rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.mk-footer{ background: var(--ink-2); border-top: 4px solid var(--marigold); }
.mk-footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--gap-lg); padding: var(--gap-lg) 0 var(--gap-md); }
.mk-footer-grid > div{ border-left: 1px dashed var(--line-dark); padding-left: var(--gap-md); }
.mk-footer-grid > div:first-child{ border-left:none; padding-left:0; }
.mk-footer-grid h4{ font-family: var(--font-mono); font-size:0.7rem; letter-spacing:.08em; text-transform:uppercase; color: var(--marigold); margin-bottom:1.1rem; }
.mk-footer-grid li{ margin-bottom:0.6rem; font-size:0.9rem; color: var(--paper-dim); }
.mk-footer-grid a:hover{ color: var(--marigold); }
.mk-footer-bottom{ border-top:1px dashed var(--line-dark); padding: 1.3rem 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.6rem; font-size:0.78rem; color: var(--paper-dim); font-family: var(--font-mono); }
@media (max-width: 900px){ .mk-footer-grid{ grid-template-columns: 1fr 1fr; } .mk-footer-grid > div{ border-left:none; padding-left:0; } }
@media (max-width: 560px){ .mk-footer-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   Мобильный тикет-бар
   ========================================================================== */
.mk-sticky{
  position: fixed; left:0; right:0; bottom:0; z-index: 60;
  background: var(--paper); color: var(--text-dark);
  border-top: 3px dashed var(--ink);
  padding: 0.8rem 1.1rem;
  display:none; align-items:center; justify-content:space-between; gap:1rem;
}
.mk-sticky-price{ font-family: var(--font-mono); }
.mk-sticky-price b{ display:block; color: var(--crimson); font-size:1.05rem; }
@media (max-width: 900px){ .mk-sticky{ display:flex; } body{ padding-bottom: 4.4rem; } }

/* Reveal-on-scroll (функциональные классы — не переименовывать) --------- */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* Toast (client-side validation feedback) ------------------------------ */
.mk-toast{
  position: fixed; top: 1.2rem; right: 1.2rem; z-index: 80;
  background: var(--crimson); color: var(--paper);
  border: 2px solid var(--ink);
  padding: 0.9rem 1.2rem;
  font-size: 0.88rem; max-width: 320px;
  box-shadow: var(--shadow-hard-sm);
  transform: translateY(-10px); opacity:0; pointer-events:none;
  transition: opacity .2s, transform .2s;
}
.mk-toast.show{ opacity:1; transform:none; }