/* ==========================================================================
   Чек — главный визуальный приём сайта.
   Прайс подан как настоящая лента: рваные края, пунктирные выноски,
   моноширинные табличные цифры, штрихкод внизу.
   ========================================================================== */

.receipt {
  --tooth: 14px;
  position: relative;
  background: var(--c-white);
  padding: calc(var(--tooth) + var(--sp-5)) clamp(1.125rem, 0.6rem + 2vw, 2.25rem)
           calc(var(--tooth) + var(--sp-5));
  color: var(--c-text);
  filter: drop-shadow(0 18px 44px rgba(20, 24, 31, .12));

  /* Рваный край сверху и снизу: две конические маски по краям плюс
     сплошная заливка середины. */
  --mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg)
      top / var(--tooth) calc(var(--tooth) / 2) repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg)
      bottom / var(--tooth) calc(var(--tooth) / 2) repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - var(--tooth)) no-repeat;
  -webkit-mask: var(--mask);
  mask: var(--mask);
}

.receipt__head {
  display: grid;
  gap: var(--sp-1);
  padding-bottom: var(--sp-4);
  border-bottom: 2px dashed var(--c-line);
  text-align: center;
}
.receipt__shop {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.receipt__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.receipt__group {
  margin-top: var(--sp-5);
}
.receipt__group-title {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: var(--sp-3);
}

.receipt__rows { display: grid; gap: var(--sp-1); }

/* Сетка вместо флекса: длинное название переносится внутри своей колонки,
   а цена остаётся прижатой к правому краю — как в бумажном чеке. */
.receipt__row {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(1.25rem, 1fr) max-content;
  grid-template-areas:
    "name dots price"
    "term term term";
  align-items: baseline;
  column-gap: var(--sp-2);
  padding-block: 0.4375rem;
  font-size: var(--fs-sm);
}
.receipt__row dt { grid-area: name; }

/* Пунктирная выноска между названием и ценой — как в бумажном чеке */
.receipt__dots {
  grid-area: dots;
  height: 1px;
  align-self: center;
  transform: translateY(-0.16em);
  background: repeating-linear-gradient(
    to right, var(--c-line) 0 2px, transparent 2px 6px
  );
}

.receipt__price {
  grid-area: price;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.receipt__price--free { color: var(--c-ok); }
/* Срок — отдельной строкой под ценой, чтобы не ломать базовую линию выноски */
.receipt__term {
  grid-area: term;
  margin-top: 1px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
  text-align: right;
}

.receipt__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 2px dashed var(--c-line);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
}
.receipt__total b {
  font-size: 1.0625rem;
  color: var(--c-text);
  letter-spacing: 0.02em;
}

.receipt__note {
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
  text-align: center;
}

/* Штрихкод — псевдографика, набранная градиентом */
.receipt__barcode {
  height: 42px;
  margin-top: var(--sp-4);
  background: repeating-linear-gradient(
    to right,
    var(--c-text) 0 2px, transparent 2px 4px,
    var(--c-text) 4px 5px, transparent 5px 9px,
    var(--c-text) 9px 12px, transparent 12px 14px,
    var(--c-text) 14px 15px, transparent 15px 18px
  );
  opacity: .8;
}
.receipt__code {
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.32em;
  text-align: center;
  color: var(--c-muted);
}

/* Мелкая лента-акцент внутри тёмных блоков */
.tape {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.3125rem 0.75rem;
  background: var(--c-paper);
  color: var(--c-text);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  clip-path: polygon(
    0 4px, 4px 0, 8px 4px, 12px 0, 16px 4px, 100% 4px,
    100% calc(100% - 4px), 16px calc(100% - 4px), 12px 100%, 8px calc(100% - 4px),
    4px 100%, 0 calc(100% - 4px)
  );
}