/* =========================================================
   SILHOUETTE Fragrance House
   Palette: off-white + matte black only. Every other tone
   below is one of these two mixed or at reduced opacity.
   The gold swan logo and product photos are artwork, not UI
   colour, and are used as supplied.
   ========================================================= */

:root {
  --paper: #F3EFE7;
  --ink: #1A1A1A;

  --ink-soft: rgba(26, 26, 26, 0.68);
  --ink-faint: rgba(26, 26, 26, 0.45);
  --line: rgba(26, 26, 26, 0.22);
  --glass: color-mix(in srgb, var(--paper) 94%, var(--ink));
  --paper-soft: rgba(243, 239, 231, 0.7);
  --paper-line: rgba(243, 239, 231, 0.25);

  --font-sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --track-wordmark: 0.6em;
  --container: 1120px;
  --gutter: clamp(16px, 4vw, 40px);
  --space-section: clamp(88px, 12vw, 160px);
}

/* ---------- Base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

h1, h2, h3 { margin: 0; font-weight: 400; }

p { margin: 0 0 1em; }

::selection { background: var(--ink); color: var(--paper); }

:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  z-index: 100;
}
.skip-link:focus { top: 12px; }

/* ---------- Type primitives ---------- */

/* Spaced-out wordmark. Letter-spacing (not literal spaces) keeps it
   readable as one word for screen readers and search. The negative
   right margin cancels the trailing space after the last letter. */
.wordmark {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: var(--track-wordmark);
  margin-right: calc(var(--track-wordmark) * -1);
  text-transform: uppercase;
  line-height: 1;
}
.wordmark--small { font-size: 0.875rem; }
.wordmark--hero  { font-size: clamp(1.5rem, 5.4vw, 3.25rem); font-weight: 300; }

/* Small apothecary-style label text */
.label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.4;
}
.label--paper { color: var(--paper-soft); }

/* Anything not yet decided by the house */
.placeholder {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  border: 1px solid var(--ink);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: transparent; color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--paper { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--paper:hover { background: transparent; color: var(--paper); }
.btn--block { width: 100%; }

/* ---------- Logo (gold swan mark, transparent PNG) ---------- */

.logo { flex-shrink: 0; height: auto; }
.logo--small { width: 36px; }
.logo--hero  { width: clamp(96px, 14vw, 128px); margin-bottom: 40px; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

.site-nav ul {
  display: flex;
  gap: 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  transition: color 0.2s ease;
}
.site-nav a:hover { color: var(--ink); }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--ink);
  transition: transform 0.25s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-of-type { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-of-type  { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 760px) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    display: none;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 8px var(--gutter) 20px;
  }
  .site-nav a {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }
  .site-nav li:last-child a { border-bottom: 0; }
}

/* ---------- Hero ---------- */

.hero {
  padding: clamp(96px, 16vw, 200px) 0 clamp(88px, 13vw, 168px);
  text-align: center;
}

/* Standalone single-message page (thanks.html) */
.hero--page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 64px 0;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.hero-sub {
  font-family: var(--font-mono);
  font-size: clamp(0.6875rem, 1.4vw, 0.8125rem);
  font-weight: 400;
  letter-spacing: 0.32em;
  margin-right: -0.32em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.hero-lede {
  margin: 48px 0 0;
  max-width: 34ch;
  color: var(--ink-soft);
}

.hero-announce {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-top: 56px;
  padding: 14px 22px;
  border: 1px solid var(--ink);
}
.hero-announce-name {
  font-size: 0.9375rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 400;
}
.hero-announce-name > span { white-space: nowrap; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
}

@media (max-width: 520px) {
  .hero-announce { flex-direction: column; gap: 6px; }
  .hero-announce-name { display: flex; flex-direction: column; gap: 4px; }
  .hero-announce-sep { display: none; }
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { width: 100%; }
}

/* ---------- Sections ---------- */

.section { padding: var(--space-section) 0; }
.section--rule { border-top: 1px solid var(--line); }

.section--ink {
  background: var(--ink);
  color: var(--paper);
}
.section--ink .label { color: var(--paper-soft); }

.section-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: clamp(48px, 7vw, 80px);
}
.section-title {
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.section-intro {
  max-width: 46ch;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- The House ---------- */

.house-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(48px, 8vw, 120px);
  align-items: start;
}
.house-story { max-width: 52ch; }
.house-story p:not(.placeholder) { font-size: 1.125rem; }

.founder {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.founder p { font-style: italic; color: var(--ink-soft); }
.founder p:last-child { margin-bottom: 0; }

.principles {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink);
}
.principle {
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.principle .label { grid-row: span 2; padding-top: 4px; }
.principle h3 {
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.principle p { margin: 4px 0 0; color: var(--ink-soft); font-size: 0.9375rem; }

@media (max-width: 860px) {
  .house-grid { grid-template-columns: 1fr; }
}

/* ---------- Product ---------- */

.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--ink);
}
.product + .product { margin-top: clamp(48px, 7vw, 80px); }

.product-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 6vw, 72px);
  border-right: 1px solid var(--ink);
}

/* Framed like a print: hairline border, natural portrait proportions */
.product-visual picture { display: block; width: min(100%, 340px); }
.product-photo {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}

/* Apothecary label: a boxed grid of small cells */
.product-label {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 26px;
  border-bottom: 1px solid var(--line);
}
/* Size and Batch sit in the left column (children 3 and 5) */
.cell:nth-child(odd):not(.cell--wide) { border-right: 1px solid var(--line); }
.cell--wide { grid-column: 1 / -1; }
.cell p { margin: 0; }

.cell--head {
  padding-top: 30px;
  padding-bottom: 30px;
  border-bottom-color: var(--ink);
}
.product-name {
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.25;
}
.status {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--ink);
}

.notes { margin: 0; }
.notes div {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  padding: 6px 0;
}
.notes div + div { border-top: 1px dotted var(--line); }
.notes dt {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-top: 1px;
}
.notes dd { margin: 0; }

.cell--action { border-bottom: 0; padding: 26px; align-items: center; gap: 16px; }

/* Quiet secondary link under a main button */
.text-link {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-underline-offset: 4px;
}
.text-link:hover { color: var(--ink); }

@media (max-width: 860px) {
  .product { grid-template-columns: 1fr; }
  .product-visual { border-right: 0; border-bottom: 1px solid var(--ink); }
}

/* ---------- Order steps ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--paper-line);
}
.step {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 28px 28px 0;
}
.step + .step {
  padding-left: 28px;
  border-left: 1px solid var(--paper-line);
}
.step p { margin: 0; max-width: 30ch; }
.step a { text-underline-offset: 4px; }

.order-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 64px;
}
.order-cta .label { text-transform: none; letter-spacing: 0.06em; }

@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; }
  .step,
  .step + .step {
    padding: 22px 0;
    border-left: 0;
    border-bottom: 1px solid var(--paper-line);
  }
}

/* ---------- Sign-up ---------- */

.updates { max-width: 720px; }

.signup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: end;
}
.signup .btn { justify-self: start; }

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.optional { text-transform: none; letter-spacing: 0.04em; color: var(--ink-faint); }

.field input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 300;
}
.field input:focus-visible { outline-offset: 2px; }
.field input[aria-invalid="true"] { border-width: 2px; }

/* Consent tick-box (waitlist forms) */
.consent {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-soft);
  cursor: pointer;
}
.consent input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: var(--ink);
}
.consent input[aria-invalid="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.consent a { text-underline-offset: 3px; }

.form-message {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  min-height: 1.5em;
  font-size: 0.9375rem;
}
.form-message:empty { display: none; }

@media (max-width: 640px) {
  .signup { grid-template-columns: 1fr; }
  .signup .btn { width: 100%; }
}

.fine-print {
  margin: 24px 0 0;
  max-width: 60ch;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.fine-print a { text-underline-offset: 3px; }

/* ---------- Delivery, returns & privacy ---------- */

.policy-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(40px, 7vw, 96px);
  align-items: start;
}
.policy { border-top: 1px solid var(--ink); padding-top: 22px; }
.policy p { color: var(--ink-soft); max-width: 42ch; }
.policy a { text-underline-offset: 3px; }
.policy-title {
  margin-bottom: 18px;
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Label / value rows, like the scent notes */
.terms { margin: 0; }
.terms div {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 12px 0;
}
.terms div + div { border-top: 1px dotted var(--line); }
.terms dt {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-top: 3px;
}
.terms dd { margin: 0; color: var(--ink-soft); }
.terms a { text-underline-offset: 3px; }

.section--quiet { padding: clamp(64px, 9vw, 112px) 0; }
.section--quiet .section-title { font-size: clamp(1.375rem, 2.6vw, 1.75rem); }
.privacy { max-width: 820px; }
.privacy .terms dd { font-size: 0.9375rem; }
.privacy .terms dd p:last-child { margin-bottom: 0; }
.privacy .terms strong { font-weight: 500; color: var(--ink); }

@media (max-width: 860px) {
  .policy-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .terms div { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--ink);
  padding: 56px 0 40px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}
.footer-brand,
.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.footer-brand .logo { margin-bottom: 6px; }
.footer-heading {
  margin-bottom: 4px;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 400;
}
.footer-col address { font-style: normal; text-transform: none; letter-spacing: 0.04em; line-height: 1.7; }
.footer-col a { text-decoration: none; }
.footer-col a:hover { color: var(--ink); text-decoration: underline; }
.footer-col a[href^="mailto:"] { text-transform: none; letter-spacing: 0.04em; }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 32px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

@media (max-width: 760px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-legal { flex-direction: column; }
}

/* ---------- Shop: live collection and order form (js/shop.js) ---------- */

/* Catalogue cards have a varying number of wide cells, so the left-column
   divider is set by class rather than by position. */
.product-label--catalogue .cell:nth-child(odd):not(.cell--wide) { border-right: 0; }
.product-label--catalogue .cell--left { border-right: 1px solid var(--line); }
.product-description { color: var(--ink-soft); line-height: 1.7; }
.product-photo--placeholder { width: 96px; border: 0; opacity: 0.5; }

.size-options { margin: 0; padding: 0; list-style: none; }
.size-options li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 6px 0;
}
.size-options li + li { border-top: 1px dotted var(--line); }
.size-price { font-variant-numeric: tabular-nums; }
.btn--mini { min-height: 40px; padding: 0 16px; font-size: 0.6875rem; }

/* The order form: a paper sheet on the dark Ordering section */
.order-sheet {
  display: grid;
  gap: 20px;
  margin-bottom: 48px;
  padding: clamp(20px, 4vw, 40px);
  background: var(--paper);
  color: var(--ink);
}
/* Parts shown only while ordering is open or closed. Layout rules like .steps' grid
   would otherwise override the hidden attribute. */
.order-sheet[hidden],
[data-order-open][hidden],
[data-order-closed][hidden] { display: none; }
.order-sheet .label { color: var(--ink-soft); }
.order-sheet a:not(.btn) { color: inherit; text-underline-offset: 3px; }
.order-sheet > p { margin: 0; }
.order-sheet-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.order-lines { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.order-lines li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px 16px;
  padding: 12px 0;
  border-bottom: 1px dotted var(--line);
}
.order-line-name { overflow-wrap: anywhere; }
.order-line-price { grid-column: 3; text-align: right; font-variant-numeric: tabular-nums; }
.order-line-sub { color: var(--ink-soft); }
.order-lines .order-line-total { border-bottom: 1px solid var(--ink); font-size: 1.125rem; }
.order-qty { display: inline-flex; align-items: center; gap: 4px; }
.order-qty span { min-width: 2ch; text-align: center; }
.order-qty button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1.125rem;
  cursor: pointer;
}
.order-qty button:disabled { opacity: 0.35; cursor: default; }

.order-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.order-form > .order-sheet-title,
.order-form > .fulfilment,
.order-form > .fine-print,
.order-form > .field--wide { grid-column: 1 / -1; }
.order-form > .btn { justify-self: start; }
.order-form .fine-print { margin: 0; }
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 300;
}
.field textarea { padding: 12px 14px; resize: vertical; line-height: 1.5; }
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-width: 2px; }

/* Delivery or collection choice; the address boxes sit in the form's grid as if loose. */
.fulfilment { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.fulfilment[hidden] { display: none; }
.fulfilment legend { margin-bottom: 4px; padding: 0; }
.fulfilment .consent { color: var(--ink); font-size: 0.9375rem; }
.address-fields { display: contents; }
.address-fields[hidden] { display: none; }

.order-done { display: grid; gap: 14px; justify-items: start; }
.order-done p { margin: 0; max-width: 52ch; }
.order-cta-lead { margin: 0; flex-basis: 100%; color: var(--paper-soft); }

.order-notice {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 16px;
  max-width: 560px;
  margin: 0 auto;
  padding: 14px 18px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.9375rem;
}
.order-notice a {
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-underline-offset: 4px;
}

@media (max-width: 640px) {
  .order-form { grid-template-columns: 1fr; }
  .order-form > .btn { width: 100%; }
  .order-lines li { grid-template-columns: minmax(0, 1fr) auto; }
  .order-lines li .order-qty { grid-row: 2; }
  .order-line-price { grid-column: 2; }
}

/* ---------- Made to order (js/shop.js) ---------- */

.slots { margin-top: 10px; font-weight: 400; }
.slots--gone { color: var(--ink-soft); }

/* Each bottle line: name, quantity, price, then the name for its label underneath */
.order-line-label {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  padding-top: 4px;
}
.order-line-label input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 300;
}
.order-line-label input[aria-invalid="true"] { border-width: 2px; }
.order-line-label .field-hint { font-size: 0.8125rem; color: var(--ink-soft); }
.order-line-label .text-link {
  justify-self: start;
  padding: 6px 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-decoration: underline;
}

/* How to pay, on the order confirmation */
.payment-box {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--ink);
}
.payment-box p { margin: 0; }
.payment-details { white-space: pre-line; font-family: var(--font-mono); font-size: 0.9375rem; line-height: 1.6; }

@media (max-width: 640px) {
  .order-lines li .order-line-label { grid-row: auto; }
}