/* Contact · the receipt: the shop's own policies printed line by line, beside a message slip. */

.counter { padding-top: 60px; }
.counter__head { padding-block: clamp(3.5rem, 8vw, 6rem) var(--space-7); }
.counter__head .lede { margin-top: var(--space-5); }
.counter__grid { display: grid; gap: var(--space-8); padding-bottom: var(--space-10); align-items: start; }
@media (min-width: 60rem) { .counter__grid { grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); gap: var(--space-10); } }

/* --------------------------------------------------------------- receipt */
.receipt { background: none; filter: drop-shadow(0 18px 30px oklch(4% 0.02 268 / 0.55)); }
.receipt__paper {
  --edge-size: 10px;
  position: relative; padding: var(--space-7) var(--space-6) var(--space-8);
  background: var(--color-paper); color: var(--color-ink);
  font-stretch: 80%; font-size: 0.9375rem; line-height: 1.5; letter-spacing: 0.02em;
  /* torn top and bottom */
  mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(var(--edge-size) * 2) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--edge-size) * 2) 51% repeat-x;
}
.receipt__paper a { color: inherit; }
.receipt p { margin: 0; }
.r-center { text-align: center; }
.r-big { font-family: var(--font-display); font-weight: 800; font-stretch: 100%; font-variation-settings: "SOFT" 100; font-size: var(--text-xl); letter-spacing: -0.01em; text-transform: uppercase; line-height: 1.1; }
.r-star { color: var(--color-accent); }
.r-cut { border: 0; border-top: 1.5px dashed var(--color-rule); margin: var(--space-5) 0; }
.r-k { font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--text-xs); margin-bottom: var(--space-2) !important; }
.r-text { color: var(--color-ink-2); margin-bottom: var(--space-3) !important; }
.r-lines { margin: 0; display: grid; gap: var(--space-2); }
.r-lines > div { display: flex; align-items: baseline; gap: var(--space-2); }
.r-lines dt { flex: none; max-width: 62%; text-transform: uppercase; font-weight: 600; letter-spacing: 0.06em; font-size: 0.8125rem; }
.r-lines dd { margin: 0 0 0 auto; text-align: right; font-weight: 800; text-transform: uppercase; font-size: 0.8125rem; letter-spacing: 0.04em; }
.r-lines > div { background: radial-gradient(circle, var(--color-rule) 1px, transparent 1.4px) 0 calc(100% - 0.32em) / 7px 7px repeat-x; }
.r-lines dt, .r-lines dd { background: var(--color-paper); padding-inline: 2px; }
.r-small { font-size: var(--text-xs); color: var(--color-ink-2); margin-top: var(--space-3) !important; }
.r-thanks { font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }

/* printing: each line feeds out as it reaches the screen */
.js .receipt [data-print] { opacity: 0; transform: translateY(-6px); clip-path: inset(0 0 100% 0); transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out), clip-path 420ms var(--ease-out); }
.js .receipt [data-print].is-printed { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .js .receipt [data-print] { opacity: 1; transform: none; clip-path: none; } }

/* ------------------------------------------------------------------ slip */
.slip { padding: var(--space-6); border-radius: var(--radius-3); background: var(--color-paper-2); box-shadow: var(--edge), var(--shadow-2); }
@media (min-width: 60rem) { .slip { position: sticky; top: 6rem; } }
.slip__form { display: grid; gap: var(--space-5); margin-top: var(--space-5); }
.sfield { display: grid; gap: var(--space-2); }
.sfield__k { font-stretch: 78%; font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); margin: 0; }
.sfield__opt { text-transform: none; letter-spacing: 0; font-weight: 500; }
.sfield input, .sfield textarea, .sfield select {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-2);
  background: var(--color-paper); color: var(--color-ink); border: 1px solid var(--color-rule); font: inherit;
}
.sfield textarea { resize: vertical; min-height: 9rem; }
.sfield :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.sfield :user-invalid { border-color: oklch(62% 0.19 25); }
.slip__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.slip__status { margin: 0; font-size: var(--text-xs); color: var(--color-muted); max-width: 40ch; }
.slip__plain { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--color-rule-2); }
.slip__email { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin: var(--space-2) 0 0; }
.slip__email .link { white-space: normal; overflow-wrap: anywhere; font-size: var(--text-md); }
.slip__copy { min-height: 36px; padding: 0 var(--space-4); }
.slip__copied { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--color-muted); min-height: 1em; }