/* ──────────────────────────────────────────────────────────────────────────
   Акційний купон — спільний для головної та /specials/ (10-07).
   Перша версія була перенесена з MA-сайту і спиралася на змінні, яких на
   підсторінках немає (--maxw, --card, --sh-lg) → карта розпливалась на всю
   ширину, без тла й тіні, з величезними цифрами. Тут КОЖЕН колір і розмір
   має запасне значення, тож блок виглядає однаково будь-де.
   ────────────────────────────────────────────────────────────────────────── */

.pcp {
  --pcp-orange: var(--orange, #F58220);
  --pcp-tint:   var(--orange-tint, #FFF3E8);
  --pcp-text:   var(--text, #181410);
  --pcp-muted:  var(--gray-med, #7a7168);
  --pcp-border: var(--border, #ece5db);
  --pcp-white:  var(--white, #ffffff);

  max-width: 1040px;
  margin: 0 auto;
  background: var(--pcp-white);
  border: 1px solid var(--pcp-border);
  border-radius: var(--radius-lg, 20px);
  box-shadow: var(--shadow-md, 0 8px 30px -12px rgba(24, 20, 16, .18));
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* ── фото до/після ── */
.pcp-ph { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 300px; }
.pcp-ph > div { background-size: cover; background-position: center; }
.pcp-ph > div + div { border-left: 2px solid var(--pcp-white); }

.pcp-tag {
  position: absolute; top: 12px;
  font: 600 10px/1 var(--font-sans, system-ui, sans-serif);
  letter-spacing: .09em; text-transform: uppercase;
  color: #fff; padding: 6px 10px; border-radius: 999px;
}
.pcp-tag.b { left: 12px; background: rgba(23, 19, 15, .78); }
.pcp-tag.a { left: 50%; margin-left: 12px; background: var(--pcp-orange); }

/* бутафорію купона (перфорація, обертовий штамп) прибрано свідомо —
   на сайті підрядника вона читалась як дешева реклама */
.pcp-punch, .pcp-stamp { display: none; }

/* ── текстова половина ── */
.pcp-body {
  padding: 30px 32px;
  display: flex; flex-direction: column; gap: 12px;
  font-family: var(--font-sans, system-ui, sans-serif);
  color: var(--pcp-text);
}

.pcp-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pcp-orange);
}
.pcp-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--pcp-orange); }

.pcp-big {
  font-family: var(--font-head, var(--font-sans, system-ui, sans-serif));
  font-size: 52px; font-weight: 700; line-height: 1;
  letter-spacing: -.03em; color: var(--pcp-text);
}
.pcp-big small { font-size: .42em; font-weight: 600; letter-spacing: .02em; margin-left: 6px; color: var(--pcp-orange); }

.pcp-h3 {
  font-family: var(--font-head, var(--font-sans, system-ui, sans-serif));
  font-size: 21px; font-weight: 700; line-height: 1.22; letter-spacing: -.015em;
}
.pcp-sub { font-size: 14.5px; line-height: 1.55; color: var(--pcp-muted); }

/* ── код ── */
.pcp-code {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 14px; border-radius: var(--radius-sm, 10px);
  background: var(--pcp-tint); border: 1px dashed var(--pcp-orange);
}
.pcp-code b {
  font-family: var(--font-head, var(--font-sans, system-ui, sans-serif));
  font-size: 18px; font-weight: 700; letter-spacing: .1em; color: var(--pcp-orange);
}
.pcp-code span { font-size: 12.5px; line-height: 1.4; color: var(--pcp-muted); }

/* ── таймер ── */
.pcp-timer { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pcp-timer .lbl {
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pcp-muted); margin-right: 5px;
}
.pcp-cell {
  display: inline-flex; flex-direction: column; align-items: center;
  min-width: 42px; padding: 5px 6px;
  background: var(--bg-1, #fbf8f4); border: 1px solid var(--pcp-border);
  border-radius: 8px;
}
.pcp-cell b {
  font-family: var(--font-head, var(--font-sans, system-ui, sans-serif));
  font-size: 19px; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  transition: color .16s ease;
}
.pcp-cell b.tick { color: var(--pcp-orange); }
.pcp-cell small { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--pcp-muted); }
.pcp-sep { color: var(--pcp-border); font-weight: 700; }

/* ── дія ── */
.pcp-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 2px; }
/* кнопка описана повністю, без опори на .btn сайту — саме через неї
   попередня версія виросла до 141px заввишки з текстом у три рядки */
.pcp-cta .btn {
  display: inline-flex; align-items: center; gap: 8px;
  width: auto; min-height: 0; white-space: nowrap;
  padding: 12px 20px; border-radius: 999px; border: 0;
  background: var(--pcp-orange); color: #fff;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 14.5px; font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.pcp-cta .btn:hover { background: var(--orange-dark, #D96D0F); transform: translateY(-1px); }
.pcp-cta .btn:focus-visible { outline: 2px solid var(--pcp-text); outline-offset: 3px; }
.pcp-cta .btn svg { width: 15px; height: 15px; flex: none; }
.pcp-cta > span { font-size: 14.5px; font-weight: 600; color: var(--pcp-text); }

.pcp-fine { font-size: 11px; line-height: 1.5; color: var(--pcp-muted); margin-top: 2px; }

/* ── вузькі екрани ── */
@media (max-width: 860px) {
  .pcp { grid-template-columns: 1fr; }
  .pcp-ph { min-height: 220px; }
  .pcp-body { padding: 24px 22px; gap: 11px; }
  .pcp-big { font-size: 42px; }
  .pcp-h3 { font-size: 19px; }
  .pcp-cta { gap: 10px; }
  .pcp-cta .btn { width: 100%; justify-content: center; }
}
@media (max-width: 420px) {
  .pcp-big { font-size: 36px; }
  .pcp-cell { min-width: 38px; }
  .pcp-cell b { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .pcp-cta .btn, .pcp-cell b { transition: none; }
  .pcp-cta .btn:hover { transform: none; }
}