/*
  Styles for the whole shop.

  Design idea: a carpenter's drawing. The yellow folding rule ("Zollstock")
  and the measurement brackets around product pictures are the two recurring
  elements. Everything else stays plain.

  Fonts: only fonts that are already on the visitor's device are used, so the
  site loads nothing from other companies (no Google Fonts). Headings use the
  DIN lettering that ships with Windows, macOS, iOS and Android.
*/

:root {
  --paper: #f4f6f2;
  --surface: #ffffff;
  --surface-2: #edf1ec;
  --panel: #e7ece7;
  --ink: #1f3a34;
  --ink-soft: #33514a;
  --ink-deep: #142824;
  --muted: #566b64;
  --line: #d6ddd7;
  --rule: #f4c430;
  --rule-deep: #e0ad18;
  --error: #a32a1b;

  --font-display: "DIN Alternate", "Bahnschrift", "DIN 2014", "Roboto Condensed", sans-serif-condensed,
    "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --r-sm: 3px;
  --r: 6px;
  --r-lg: 14px;

  --sh-sm: 0 1px 2px rgba(18, 36, 31, 0.06);
  --sh: 0 10px 30px -14px rgba(18, 36, 31, 0.22);
  --sh-lg: 0 24px 60px -20px rgba(18, 36, 31, 0.3);

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --maxw: 80rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
.wordmark,
.card__name,
.button,
.product__price {
  font-family: var(--font-display);
  font-weight: 700;
}

h1 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  line-height: 1.05;
  margin: 0 0 1rem;
}

h2 {
  font-size: 1.625rem;
  line-height: 1.15;
  margin: 0 0 1.25rem;
}

p {
  margin: 0 0 1rem;
  max-width: 68ch;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

a:focus-visible {
  background: var(--rule);
  color: var(--ink);
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Text pages and forms: same left edge as the header, shorter lines. */
.narrow > * {
  max-width: 40rem;
}

.section {
  padding-block: clamp(2rem, 5vw, 4rem);
}

.skip-link {
  position: absolute;
  left: -999rem;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  padding: 0.5rem 1rem;
  background: var(--rule);
}

/* ------------------------------------------------------------ top bar */

.topbar {
  background: var(--ink);
  color: #dbe6df;
  font-size: 0.8125rem;
}

.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  padding-block: 0.5rem;
}

.topbar__msgs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.topbar__msgs li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}

.topbar .ico {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--rule);
}

.topbar .lang-switch {
  color: #dbe6df;
}

.topbar .lang-switch a {
  text-decoration: none;
}

.topbar .lang-switch a[aria-current] {
  color: #fff;
}

/* ------------------------------------------------------------ header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--sh-sm);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2rem;
  padding-block: 0.85rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--ink);
}

.wordmark__mark {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  color: var(--ink);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.6rem;
}

.site-nav a {
  text-decoration: none;
  color: var(--ink);
}

.site-nav a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

.lang-switch {
  display: flex;
  gap: 0.75rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

.lang-switch a[aria-current] {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

/* ------------------------------------------------------------ buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.6rem;
  border: 2px solid var(--ink);
  border-radius: var(--r);
  background: var(--ink);
  color: #fff;
  font-size: 1.125rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.08s ease, box-shadow 0.16s ease;
}

.button:hover {
  background: var(--ink-deep);
  border-color: var(--ink-deep);
  box-shadow: var(--sh);
}

.button:active {
  transform: translateY(1px);
}

a.button:focus-visible {
  background: var(--ink-deep);
  color: #fff;
}

.button--lg {
  padding: 0.95rem 2rem;
  font-size: 1.25rem;
}

.button--quiet {
  background: transparent;
  color: var(--ink);
}

.button--quiet:hover {
  background: var(--ink);
  color: #fff;
}

/* For use on the dark promise band. */
.button--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.button--ghost:hover {
  background: var(--rule);
  border-color: var(--rule);
  color: var(--ink-deep);
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
  .button:active {
    transform: none;
  }
}

/* ------------------------------------------------------------ home: hero and folding rule */

.hero {
  background:
    radial-gradient(120% 85% at 100% 0%, var(--surface-2), transparent 62%),
    var(--surface);
  border-bottom: 1px solid var(--line);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(2.5rem, 6vw, 5.5rem);
}

.hero h1 {
  font-size: clamp(2.5rem, 1.2rem + 5.2vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin-bottom: 1.25rem;
  max-width: 11em;
}

.lead {
  font-size: 1.25rem;
  line-height: 1.5;
  max-width: 36ch;
  color: var(--ink-soft);
  margin-bottom: 2rem;
}

.hero__showcase .eyebrow--accent {
  margin-bottom: 0.9rem;
}

.hero__piece {
  display: block;
  text-decoration: none;
  color: inherit;
}

.hero__caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 1rem;
  padding-right: 2.5rem;
}

.hero__name,
.hero__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
}

.hero__price {
  font-variant-numeric: tabular-nums;
}

.hero__view {
  display: inline-block;
  margin-top: 0.4rem;
  padding-right: 2.5rem;
  color: var(--muted);
}

.hero__piece:hover .hero__name {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.hero__piece:hover .hero__view {
  color: var(--ink);
}

/* The folding rule: 10px are one centimetre. */
.rule {
  display: flex;
  overflow: hidden;
  height: 3rem;
  background-color: var(--rule);
  background-image:
    repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 100px),
    repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 50px),
    repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 10px);
  background-size:
    auto 1.25rem,
    auto 0.875rem,
    auto 0.5rem;
  background-repeat: no-repeat;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

/* Each number sits in a 100px box that is centred on its long tick. */
.rule::before {
  content: "";
  flex: 0 0 50px;
}

.rule span {
  flex: 0 0 100px;
  align-self: flex-end;
  padding-bottom: 0.15rem;
  text-align: center;
}

/* ------------------------------------------------------------ measurement brackets around a picture */

.measure {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem;
  grid-template-rows: 2rem auto;
  gap: 0.5rem;
  margin: 0;
}

.measure--plain {
  display: block;
}

.measure__panel {
  grid-column: 1;
  grid-row: 2;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--panel);
  padding: 7%;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(20, 40, 36, 0.07);
}

.measure__panel img,
.card__panel img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Real photos fill the whole panel (no --panel frame). The doubled class keeps
   this winning over the padded ".card__panel" / ".measure__panel" defaults. */
.measure__panel.measure__panel--photo,
.card__panel.card__panel--photo {
  padding: 0;
}

.measure__panel--photo img,
.card__panel--photo img {
  object-fit: cover;
}

.measure__width,
.measure__height {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.measure__width {
  grid-column: 1;
  grid-row: 1;
  border-inline: 2px solid var(--ink);
}

.measure__height {
  grid-column: 2;
  grid-row: 2;
  flex-direction: column;
  border-block: 2px solid var(--ink);
}

.measure__width::before,
.measure__width::after,
.measure__height::before,
.measure__height::after {
  content: "";
  flex: 1;
  background: var(--ink);
}

.measure__width::before,
.measure__width::after {
  height: 2px;
}

.measure__height::before,
.measure__height::after {
  width: 2px;
}

.measure__width span,
.measure__height span {
  background: var(--rule);
  padding: 0.3rem 0.5rem;
}

.measure__height span {
  writing-mode: vertical-rl;
  padding: 0.5rem 0.3rem;
}

/* ------------------------------------------------------------ product grid */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 2.5rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.card__link {
  display: block;
  text-decoration: none;
}

.card__panel {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--panel);
  padding: 9%;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(20, 40, 36, 0.06);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.card__link:hover .card__panel {
  box-shadow: 0 8px 22px rgba(20, 40, 36, 0.13);
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .card__panel {
    transition: none;
  }
  .card__link:hover .card__panel {
    transform: none;
  }
}

.card__name {
  display: block;
  margin-top: 0.75rem;
  font-size: 1.3125rem;
  line-height: 1.2;
}

.card__link:hover .card__name {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

.card__dims,
.card__price {
  margin: 0.2rem 0 0;
  font-variant-numeric: tabular-nums;
}

.card__dims {
  color: var(--muted);
  font-size: 0.9375rem;
}

.card__price {
  font-weight: 700;
}

.tax {
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 400;
}

.count {
  color: var(--muted);
}

.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block: 1.5rem 2.5rem;
}

.filter a {
  padding: 0.35rem 0.9rem;
  border: 2px solid var(--ink);
  border-radius: 2px;
  text-decoration: none;
}

.filter a:hover {
  background: var(--panel);
}

.filter a[aria-current] {
  background: var(--ink);
  color: #fff;
}

.category-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--ink);
}

.category-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.25rem 1rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--line);
}

.category-list a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
  text-decoration: none;
}

.category-list a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.category-list span {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-top: 3rem;
}

/* ------------------------------------------------------------ product page */

.back {
  margin-bottom: 1.5rem;
}

.product {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.product__info h2 {
  font-size: 1.25rem;
  margin: 2rem 0 0.5rem;
}

.product__price {
  font-size: 2.25rem;
  line-height: 1.1;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.stock {
  margin-top: 1rem;
  font-weight: 700;
}

.stock--out {
  color: var(--error);
}

.specs {
  margin: 0 0 1.5rem;
  border-top: 2px solid var(--ink);
}

.specs div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.55rem;
  border-bottom: 1px solid var(--line);
}

.specs dt {
  color: var(--muted);
}

.specs dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ forms */

.form {
  display: grid;
  gap: 1.25rem;
  max-width: 26rem;
  margin-block: 1.5rem 2rem;
}

.form--wide {
  max-width: 44rem;
  margin-top: 0;
}

.form .button {
  justify-self: start;
}

.field label {
  display: block;
  font-weight: 700;
}

.field__hint,
.field__error,
.field__status,
.form__note {
  margin: 0.15rem 0 0;
  font-size: 0.9375rem;
}

.field__hint,
.form__note {
  color: var(--muted);
}

.field__error {
  color: var(--error);
}

.field input:not([type="file"]),
.field select,
.field textarea {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input:not([type="file"]):focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--ink);
  outline-offset: 1px;
}

.field input[type="file"] {
  display: block;
  margin-top: 0.5rem;
  max-width: 100%;
  font: inherit;
}

.field textarea {
  resize: vertical;
}

.field--error input,
.field--error select,
.field--error textarea {
  border-color: var(--error);
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  align-items: end;
  gap: 1.25rem;
}

.check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.check input {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--ink);
}

.notice {
  padding: 0.8rem 1rem;
  border-left: 6px solid var(--rule);
  background: var(--surface);
}

.notice--error {
  border-left-color: var(--error);
}

.notice--ok {
  border-left-color: var(--ink);
}

.plain-list {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

/* ------------------------------------------------------------ footer */

.site-footer {
  background: var(--ink);
  color: #d4e0da;
  margin-top: 4rem;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 2rem clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.site-footer__name {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: #fff;
  margin: 0 0 0.75rem;
}

.site-footer__name .wordmark__mark {
  width: 1.4rem;
  height: 1.4rem;
  color: var(--rule);
}

.site-footer__tagline {
  max-width: 28ch;
  color: #aec2b9;
}

.site-footer__col h2 {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8fa89d;
  margin: 0 0 1rem;
}

.site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.site-footer__col p {
  margin: 0 0 0.6rem;
  max-width: 32ch;
  font-size: 0.9375rem;
  color: #aec2b9;
}

.site-footer a {
  color: #d4e0da;
  text-decoration: none;
}

.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-footer__bar {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__bar-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  padding-block: 1.25rem;
}

.site-footer__bar p {
  margin: 0;
  color: #8fa89d;
  font-size: 0.875rem;
}

.site-footer :focus-visible {
  outline-color: var(--rule);
}

/* ------------------------------------------------------------ admin area */

.admin-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.admin-bar h1 {
  margin: 0;
}

.admin-columns {
  display: grid;
  grid-template-columns: minmax(0, 44rem) minmax(0, 22rem);
  align-items: start;
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: 1.5rem;
}

.admin-photo .card__panel {
  margin-bottom: 1rem;
}

.table-scroll {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.table th,
.table td {
  padding: 0.65rem 1rem 0.65rem 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.table thead th {
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}

.table .num {
  text-align: right;
  white-space: nowrap;
}

/* ------------------------------------------------------------ helpers */

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

.mono {
  font-family: ui-monospace, "Cascadia Mono", "Consolas", "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------ header: search + cart */

.site-search {
  display: flex;
  flex: 1 1 14rem;
  max-width: 28rem;
}

.site-search input {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 0.9rem;
  border: 1.5px solid var(--line);
  border-right: 0;
  border-radius: var(--r) 0 0 var(--r);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}

.site-search button {
  display: flex;
  align-items: center;
  padding: 0 0.95rem;
  border: 1.5px solid var(--ink);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  transition: background 0.16s ease;
}

.site-search button:hover {
  background: var(--ink-deep);
}

.cart-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}

.cart-link__ico {
  width: 1.4rem;
  height: 1.4rem;
  flex: none;
}

.cart-badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.4em;
  height: 1.4em;
  padding: 0 0.35em;
  background: var(--rule);
  color: var(--ink-deep);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.78em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ more buttons */

.button--small {
  padding: 0.4rem 0.85rem;
  font-size: 1rem;
}

.button--block {
  display: block;
  width: 100%;
  text-align: center;
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.link-button:hover {
  color: var(--ink);
}

/* ------------------------------------------------------------ add to basket (product page) */

.add-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  margin: 1.5rem 0 0.5rem;
}

.add-form__qty {
  display: flex;
  flex-direction: column;
}

.add-form__qty label {
  font-weight: 700;
  font-size: 0.9375rem;
}

.add-form__qty input,
.qty-form input {
  width: 5rem;
  margin-top: 0.3rem;
  padding: 0.6rem 0.5rem;
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: center;
}

/* ------------------------------------------------------------ basket + summary */

.cart-layout,
.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  align-items: start;
  gap: clamp(2rem, 5vw, 3.5rem);
}

.cart-items {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--ink);
}

.cart-item {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  align-items: start;
  gap: 1rem 1.25rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.cart-item__thumb .card__panel {
  margin: 0;
  padding: 8%;
}

.cart-item__name {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.15;
  text-decoration: none;
}

.cart-item__name:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.cart-item__unit {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.9375rem;
}

.cart-item__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 0.75rem;
}

.qty-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.qty-form input {
  width: 4.5rem;
  margin-top: 0;
}

.cart-item__line {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.cart-empty {
  font-size: 1.25rem;
}

.summary {
  position: sticky;
  top: 1rem;
  padding: 1.5rem;
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: var(--surface);
}

.summary h2 {
  margin: 0 0 1rem;
  font-size: 1.25rem;
}

.summary__items {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0 0 1rem;
  border-bottom: 1px solid var(--line);
  list-style: none;
}

.summary__items li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9375rem;
}

.summary__item-price {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.summary__rows {
  margin: 0;
}

.summary__rows div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.35rem;
}

.summary__rows dt {
  color: var(--muted);
}

.summary__rows dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.summary__total {
  margin-top: 0.35rem;
  padding-top: 0.6rem;
  border-top: 2px solid var(--ink);
}

.summary__total dt,
.summary__total dd {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
}

.summary__vat {
  margin: 0.5rem 0 1rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.summary__hint {
  margin: 0 0 1rem;
  padding: 0.6rem 0.8rem;
  border-radius: 2px;
  background: var(--panel);
  font-size: 0.9375rem;
}

.summary__back {
  margin: 1rem 0 0;
  text-align: center;
  font-size: 0.9375rem;
}

/* ------------------------------------------------------------ checkout */

.checkout-form {
  max-width: none;
  margin: 0;
}

.fieldset {
  margin: 0 0 1.75rem;
  padding: 0;
  border: 0;
}

.fieldset legend {
  margin-bottom: 1rem;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
}

.fieldset .field + .field,
.fieldset .field-row + .field,
.fieldset .field + .field-row {
  margin-top: 1.25rem;
}

.field--small input {
  max-width: 11rem;
}

.payment-note {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 2px;
  background: var(--panel);
}

.payment-note h2 {
  margin: 0 0 0.35rem;
  font-size: 1.125rem;
}

.payment-note p {
  margin: 0;
}

/* ------------------------------------------------------------ invoice / payment page */

.narrow-wide > * {
  max-width: 52rem;
  margin-inline: auto;
}

.confirm {
  margin-bottom: 1.5rem;
}

.confirm__title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
}

.invoice {
  margin-bottom: 1.5rem;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: var(--surface);
}

.invoice__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--ink);
}

.invoice__seller-name {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
}

.invoice__seller p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
}

.invoice__meta {
  display: grid;
  gap: 0.35rem;
  min-width: 14rem;
  margin: 0;
}

.invoice__meta div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.invoice__meta dt {
  color: var(--muted);
}

.invoice__meta dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.invoice h2 {
  margin: 1.5rem 0 0.6rem;
  font-size: 1.125rem;
}

.invoice__to {
  margin-bottom: 0.5rem;
}

.invoice__to h2 {
  margin-top: 0;
}

.invoice__to p {
  margin: 0;
}

.invoice__totals {
  max-width: 22rem;
  margin: 1.25rem 0 0 auto;
}

.invoice__totals div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.35rem;
}

.invoice__totals dt {
  color: var(--muted);
}

.invoice__totals dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.invoice__vat {
  max-width: 22rem;
  margin: 0.4rem 0 0 auto;
  color: var(--muted);
  font-size: 0.875rem;
  text-align: right;
}

.pay-box {
  margin-top: 2rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: var(--panel);
}

.pay-box h2 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}

.pay-box__rows {
  display: grid;
  gap: 0;
  margin: 1rem 0;
}

.pay-box__rows div {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 0.25rem 1rem;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--line);
}

.pay-box__rows dt {
  color: var(--muted);
  font-weight: 700;
}

.pay-box__rows dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.pay-box__amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.pay-box__note {
  margin: 1rem 0 0.5rem;
}

.invoice__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}

.account-orders__title {
  margin-top: 2.5rem;
}

.account-logout {
  margin-top: 2rem;
}

/* ------------------------------------------------------------ section headers & eyebrows */

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.75rem;
}

.eyebrow--accent {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
}

.eyebrow--accent::before {
  content: "";
  width: 1.75rem;
  height: 3px;
  background: var(--rule);
  border-radius: 2px;
}

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-bottom: 2rem;
}

.section__head h2 {
  margin: 0;
}

.section__sub {
  margin: 0.4rem 0 0;
  color: var(--muted);
  font-size: 1.0625rem;
}

.section__link {
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.section__link:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.section--alt {
  background: var(--surface-2);
  border-block: 1px solid var(--line);
}

/* ------------------------------------------------------------ trust strip */

.usp {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.usp__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem 2rem;
  margin: 0;
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  list-style: none;
}

.usp__item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.usp__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--panel);
  color: var(--ink);
}

.usp__ico svg {
  width: 1.5rem;
  height: 1.5rem;
}

.usp__title {
  margin: 0.1rem 0 0.2rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.2;
}

.usp__text {
  margin: 0;
  max-width: 28ch;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.45;
}

/* ------------------------------------------------------------ category tiles */

.cat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 1.75rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cat-tile {
  display: block;
  text-decoration: none;
  color: inherit;
}

.cat-tile__panel {
  margin-bottom: 0.85rem;
}

.cat-tile:hover .cat-tile__panel {
  box-shadow: 0 12px 28px -12px rgba(18, 36, 31, 0.24);
  transform: translateY(-3px);
}

.cat-tile__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.15;
}

.cat-tile:hover .cat-tile__name {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

.cat-tile__count {
  display: block;
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* ------------------------------------------------------------ promise band */

.band {
  background:
    radial-gradient(90% 130% at 0% 0%, var(--ink-soft), transparent 55%),
    var(--ink);
  color: #fff;
}

.band__inner {
  max-width: 50rem;
  text-align: center;
  padding-block: clamp(3rem, 7vw, 5rem);
}

.band__accent {
  display: inline-block;
  width: 3.5rem;
  height: 4px;
  margin-bottom: 1.5rem;
  background: var(--rule);
  border-radius: 2px;
}

.band h2 {
  font-size: clamp(1.75rem, 1rem + 3vw, 2.75rem);
  margin: 0 0 1rem;
}

.band p {
  max-width: 54ch;
  margin: 0 auto 2rem;
  color: #d4e0da;
  font-size: 1.125rem;
  line-height: 1.6;
}

.band :focus-visible {
  outline-color: var(--rule);
}

/* ------------------------------------------------------------ small screens */

@media (max-width: 64rem) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }

  .usp__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 52rem) {
  .hero__inner,
  .product,
  .admin-columns,
  .cart-layout,
  .checkout-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__showcase {
    max-width: 32rem;
  }

  .summary {
    position: static;
  }
}

@media (max-width: 46rem) {
  .wordmark {
    margin-right: auto;
  }

  .site-search {
    order: 5;
    flex-basis: 100%;
    max-width: none;
  }

  .topbar__msgs li:not(:first-child) {
    display: none;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .usp__grid {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }
}

@media (max-width: 30rem) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 1rem;
  }

  .card__name {
    font-size: 1.125rem;
  }

  .cart-item {
    grid-template-columns: 4rem minmax(0, 1fr);
  }

  .cart-item__line {
    grid-column: 2;
    text-align: left;
  }
}

/* ------------------------------------------------------------ print (invoice) */

/* ------------------------------------------------------------ depth on panels */

.summary,
.invoice,
.pay-box {
  box-shadow: 0 2px 12px rgba(20, 40, 36, 0.05);
}

/* ------------------------------------------------------------ admin: dashboard, badges, danger */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 2.5rem;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.25rem;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--surface);
  text-decoration: none;
  color: inherit;
}

a.stat:hover {
  background: var(--panel);
}

.stat--accent {
  border-left-width: 8px;
  border-left-color: var(--rule);
}

.stat__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat__sub {
  color: var(--muted);
  font-size: 1.1rem;
}

.stat__label {
  color: var(--muted);
  font-size: 0.9375rem;
}

.muted-small {
  color: var(--muted);
  font-size: 0.85rem;
}

.badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
}

.badge--lg {
  padding: 0.3rem 0.85rem;
  font-size: 0.95rem;
}

.badge--awaiting_payment { background: #f6e3a8; color: #6b5300; }
.badge--paid { background: #cfe3d4; color: #1f5133; }
.badge--shipped { background: #cdddf0; color: #1b4c74; }
.badge--cancelled { background: #ecd2cd; color: #7a2c1e; }

.status-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.status-actions form {
  margin: 0;
}

.button--danger {
  background: var(--error);
  border-color: var(--error);
  color: #fff;
}

.button--danger:hover {
  background: #862316;
  border-color: #862316;
}

.danger-zone {
  margin-top: 2rem;
  padding: 1.25rem;
  border: 2px dashed var(--line);
  border-radius: 3px;
}

.danger-zone h2 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}

.danger-zone form {
  margin: 0.75rem 0 0;
}

code {
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  background: var(--panel);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.9em;
}

@media print {
  .site-header,
  .site-footer,
  .no-print,
  .skip-link,
  .confirm {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .invoice,
  .pay-box {
    border-color: #000;
  }

  .section {
    padding-block: 0;
  }

  a {
    color: #000;
    text-decoration: none;
  }
}

/* ------------------------------------------------------------ product gallery */

.gallery {
  margin: 0;
}

.gallery__stage {
  display: block;
}

.gallery__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.gallery__thumb {
  display: block;
  width: 4.75rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 5px;
  background: none;
  cursor: pointer;
}

.gallery__thumb .card__panel {
  margin: 0;
  padding: 10%;
  box-shadow: none;
  border-radius: 3px;
}

.gallery__thumb.is-current {
  border-color: var(--ink);
}

.gallery__thumb:hover .card__panel {
  box-shadow: 0 2px 8px rgba(20, 40, 36, 0.14);
}

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

/* admin gallery manager */
.admin-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin: 0.5rem 0 1.25rem;
  padding: 0;
  list-style: none;
}

.admin-gallery li {
  width: 6rem;
}

.admin-gallery .card__panel {
  margin: 0 0 0.3rem;
  padding: 8%;
  box-shadow: none;
}

.admin-gallery form {
  margin: 0;
  text-align: center;
}

/* Photo thumbnails (gallery, basket, admin) fill their panel too — no frame. */
.gallery__thumb .card__panel--photo,
.cart-item__thumb .card__panel--photo,
.admin-gallery .card__panel--photo {
  padding: 0;
}

/* ------------------------------------------------------------ product buy reassurance */

.buy-assure {
  display: grid;
  gap: 0.6rem;
  margin: 1.5rem 0 0;
  padding: 1.2rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.buy-assure li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

.buy-assure svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: var(--ink);
}

/* ============================================================ inner page polish */

/* ---------- page header ---------- */
.page-head {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.page-head h1 {
  margin: 0;
}

.page-head .eyebrow {
  margin-bottom: 0.6rem;
}

.page-head__sub {
  margin: 0.6rem 0 0;
  color: var(--muted);
  font-size: 1.0625rem;
}

/* ---------- back link ---------- */
.back {
  margin-bottom: 1.5rem;
  font-size: 0.9375rem;
}

.back a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--muted);
  text-decoration: none;
}

.back a::before {
  content: "\2190";
  font-size: 1.05em;
}

.back a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---------- filter pills ---------- */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block: 0 2.5rem;
}

.filter a {
  padding: 0.45rem 1.05rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.filter a:hover {
  border-color: var(--ink);
}

.filter a[aria-current] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* ---------- pagination ---------- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.5rem;
  margin-top: 3.5rem;
}

.pagination a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.15rem;
  border: 1.5px solid var(--ink);
  border-radius: var(--r);
  color: var(--ink);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.pagination a:hover {
  background: var(--ink);
  color: #fff;
}

.pagination span {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- auth (login / register) ---------- */
.auth {
  max-width: 30rem;
  margin-inline: auto;
}

.auth .eyebrow {
  text-align: center;
  justify-content: center;
}

.auth__card {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh);
}

.auth__card h1 {
  font-size: clamp(1.75rem, 1rem + 2vw, 2.25rem);
  margin: 0 0 1.5rem;
}

.auth__card .form {
  max-width: none;
  margin: 0;
}

.auth__card .notice {
  margin-bottom: 1.25rem;
}

.auth__alt {
  margin: 1.5rem 0 0;
  text-align: center;
  color: var(--muted);
}

/* ---------- info card (account) ---------- */
.info-card {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  margin-bottom: 2.5rem;
}

.info-card .specs {
  margin: 0;
  border-top: 0;
}

.info-card .specs div:first-child {
  padding-top: 0;
}

.info-card__actions {
  margin-top: 1.25rem;
}

/* ---------- legal / prose ---------- */
.prose {
  max-width: 42rem;
}

.prose h2 {
  font-size: 1.375rem;
  margin: 2rem 0 0.75rem;
}

.prose p,
.prose li {
  color: var(--ink-soft);
}

/* ---------- error page ---------- */
.errorpage {
  max-width: 36rem;
  margin-inline: auto;
  text-align: center;
  padding-block: clamp(2rem, 6vw, 4rem);
}

.errorpage__code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.5rem, 2rem + 8vw, 6rem);
  line-height: 1;
  color: var(--panel);
  letter-spacing: -0.02em;
}

.errorpage h1 {
  margin: 0.5rem 0 0.75rem;
}

.errorpage p {
  max-width: 44ch;
  margin-inline: auto;
  color: var(--muted);
}

.errorpage .button {
  margin-top: 1.5rem;
}

/* account page width + empty state */
.account {
  max-width: 56rem;
}

.muted-block {
  padding: 1.25rem 0;
  color: var(--muted);
}


/* Currency switch (display only; payment is always in SEK) */
.curr-switch {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  font-size: 0.85rem;
}
.curr-switch select {
  font: inherit;
  padding: 0.15rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: inherit;
}
.curr-switch button {
  font: inherit;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: inherit;
  padding: 0.15rem 0.5rem;
  cursor: pointer;
}
@media (max-width: 55rem) {
  .curr-switch { display: none; }
}


/* ================================================================
   POLISH PASS — refinement layer (2026-10-10)
   Sits after the base styles: same selectors win by order, so this
   retunes the design system without rewriting it. Identity kept:
   carpenter's drawing, folding-rule yellow, DIN display type.
   ================================================================ */

/* ---------- tokens ---------- */

:root {
  /* paper: a touch warmer, like unbleached drawing paper */
  --paper: #f1f3ee;
  --surface: #ffffff;
  --surface-2: #eaeee6;
  --panel: #e5eae3;

  /* ink: slightly deeper, cooler green-black for crisper text */
  --ink: #1c352f;
  --ink-soft: #31493f;
  --ink-deep: #10231e;
  --muted: #55665f;

  /* the folding rule stays the accent; deepen for contrast on white */
  --rule: #f2c230;
  --rule-deep: #d9a01c;

  --line: #d5dcd2;
  --line-soft: #e3e8dd;

  --ok: #1f5133;
  --ok-bg: #dcead9;
  --error: #a32a1b;
  --error-bg: #f2dcda;

  /* focus ring: rule yellow, seen on the dark ink too */
  --focus: #b8860b;

  /* layered shadows: closer lift + softer aura */
  --sh-sm: 0 1px 2px rgba(16, 35, 30, 0.05), 0 2px 6px rgba(16, 35, 30, 0.04);
  --sh: 0 2px 4px rgba(16, 35, 30, 0.05), 0 12px 28px -10px rgba(16, 35, 30, 0.22);
  --sh-lg: 0 4px 8px rgba(16, 35, 30, 0.06), 0 28px 64px -18px rgba(16, 35, 30, 0.3);

  --r-sm: 4px;
  --r: 9px;
  --r-lg: 16px;
}

/* ---------- base ---------- */

html {
  scroll-behavior: smooth;
}

body {
  /* faint blueprint grid on the paper — pure CSS, no images */
  background:
    linear-gradient(var(--line-soft) 1px, transparent 1px) 0 0 / 100% 3rem,
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px) 0 0 / 3rem 100%,
    radial-gradient(140% 90% at 50% -10%, #ffffff 0%, var(--paper) 55%);
  background-attachment: fixed;
}

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

/* quieter scrollbar (WebKit) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb {
  background: var(--line);
  border: 3px solid var(--paper);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

h1, h2 { letter-spacing: -0.012em; }
h2 { letter-spacing: -0.008em; }

p { max-width: 70ch; }

a { text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); }
a:hover { text-decoration-color: var(--ink); }

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

/* ---------- top bar ---------- */

.topbar {
  background: linear-gradient(90deg, var(--ink-deep), var(--ink));
  font-feature-settings: "tnum";
  letter-spacing: 0.01em;
}
.topbar .ico { color: var(--rule); }

/* ---------- header ---------- */

.site-header {
  background: rgba(255, 255, 255, 0.86); /* fallback for older browsers */
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
  border-bottom: 1px solid var(--line);
}

.wordmark {
  gap: 0.5rem;
  letter-spacing: 0.02em;
}
.wordmark__mark { color: var(--rule-deep); }
.wordmark:hover .wordmark__mark { transform: rotate(-4deg); }
.wordmark__mark { transition: transform 0.18s ease; }

.site-nav a { position: relative; }
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -0.28em;
  height: 2px;
  background: var(--rule-deep);
  transition: right 0.18s ease;
}
.site-nav a:hover { text-decoration: none; }
.site-nav a:hover::after { right: 0; }

/* ---------- buttons ---------- */

.button {
  border-radius: var(--r);
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease,
    transform 0.1s ease, box-shadow 0.2s ease;
}
.button:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh);
}
.button:active { transform: translateY(1px); box-shadow: none; }
.button--quiet:hover { box-shadow: none; }
.button--ghost:hover { box-shadow: 0 6px 18px rgba(242, 194, 48, 0.35); }

/* ---------- cards & gallery ---------- */

.card__panel {
  border-radius: var(--r);
  box-shadow: 0 1px 2px rgba(16, 35, 30, 0.05), 0 6px 16px -8px rgba(16, 35, 30, 0.1);
}
.card__link:hover .card__panel {
  box-shadow: 0 2px 4px rgba(16, 35, 30, 0.06), 0 18px 36px -12px rgba(16, 35, 30, 0.28);
  transform: translateY(-4px);
}
/* photo cards: the image itself breathes on hover */
.card__panel img {
  transition: transform 0.28s ease;
  will-change: transform;
}
.card__link:hover .card__panel img { transform: scale(1.035); }

.card__name { transition: color 0.16s ease; }
.card__link:hover .card__name { color: var(--ink-deep); }

.gallery__thumb {
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.gallery__thumb:hover { transform: translateY(-2px); box-shadow: var(--sh-sm); }
.gallery__thumb.is-current { box-shadow: 0 0 0 2px var(--rule); }

/* ---------- forms ---------- */

.field input:not([type="file"]),
.field select,
.field textarea {
  border-radius: var(--r-sm);
  border-color: var(--line);
  background: var(--surface);
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.field input:not([type="file"]):hover,
.field select:hover,
.field textarea:hover { border-color: var(--muted); }
.field input:not([type="file"]):focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rule) 45%, transparent);
  outline: none;
}

/* ---------- notices ---------- */

.notice {
  border-radius: var(--r);
  border: 1px solid transparent;
}
.notice--ok {
  background: var(--ok-bg);
  border-color: color-mix(in srgb, var(--ok) 25%, transparent);
  color: var(--ok);
}
.notice--error {
  background: var(--error-bg);
  border-color: color-mix(in srgb, var(--error) 25%, transparent);
  color: var(--error);
}

/* ---------- tables ---------- */

.table { border-radius: var(--r); overflow: hidden; }
.table thead th {
  background: var(--surface-2);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.table tbody tr { transition: background 0.12s ease; }
.table tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }

/* ---------- badges ---------- */

.badge {
  border-radius: 999px;
  padding: 0.18em 0.7em;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(16, 35, 30, 0.06);
}

/* ---------- footer ---------- */

.site-footer {
  background: linear-gradient(180deg, var(--surface-2), var(--panel));
  border-top: 3px solid var(--rule);
}
.site-footer__bar { border-top: 1px solid var(--line); }

/* ---------- hero: blueprint accents ---------- */

.hero {
  background:
    radial-gradient(90% 70% at 88% 8%, rgba(242, 194, 48, 0.09), transparent 55%),
    radial-gradient(120% 85% at 100% 0%, var(--surface-2), transparent 62%),
    var(--surface);
}
.hero h1 {
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.lead { text-wrap: pretty; }

/* ---------- currency switch (display only) ---------- */

.curr-switch select,
.curr-switch button { border-radius: 999px; }
.curr-switch select:hover,
.curr-switch button:hover { border-color: var(--muted); }

/* ---------- motion safety ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .card__link:hover .card__panel img { transform: none; }
}


/* ================================================================
   HEADER RESTRUCTURE (2026-10-10) — right-aligned nav + tools
   The topbar now carries only the trust messages (centered);
   language + currency moved into the main header as a right-side
   tools cluster next to the right-aligned nav.
   ================================================================ */

/* ---------- topbar: messages only, centered ---------- */

.topbar__inner {
  justify-content: center;
}
.topbar__msgs {
  margin-inline: auto;
}

/* ---------- main header ---------- */

.site-header__inner {
  align-items: center;
  gap: 0.9rem 1.4rem;
}

/* search grows in the middle so the nav + tools pin to the right */
.site-search {
  flex: 1 1 16rem;
  max-width: 30rem;
}

.site-nav {
  margin-left: auto;
}

/* ---------- tools cluster (language + currency) ---------- */

.header-tools {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--line);
}

/* language: small uppercase pills */
.header-tools .lang-switch {
  gap: 0.35rem;
  font-size: 0.8125rem;
}
.header-tools .lang-switch a {
  text-decoration: none;
  padding: 0.28em 0.62em;
  border-radius: 999px;
  border: 1px solid transparent;
  letter-spacing: 0.06em;
  color: var(--muted);
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.header-tools .lang-switch a:hover {
  color: var(--ink);
  border-color: var(--line);
}
.header-tools .lang-switch a[aria-current] {
  color: var(--ink-deep);
  background: var(--surface-2);
  border-color: var(--line);
  font-weight: 700;
}

/* currency: one quiet pill, no gray native box. Choosing an option
   submits the form itself (onchange) — no confirm button. */
.curr-switch {
  display: inline-flex;
  align-items: stretch;
  font-size: 0.8125rem;
}
.curr-switch select {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  background:
    var(--surface)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231c352f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    right 0.8rem center / 10px no-repeat;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3rem 2rem 0.3rem 0.95rem;
  cursor: pointer;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.curr-switch select:hover {
  border-color: var(--muted);
}
.curr-switch select:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rule) 45%, transparent);
}

/* keep the header usable on small screens */
@media (max-width: 55rem) {
  .curr-switch {
    display: none;
  }
}
@media (max-width: 40rem) {
  .site-header__inner {
    gap: 0.75rem;
  }
  .site-search {
    order: 3;
    flex-basis: 100%;
    max-width: none;
  }
  .site-nav {
    order: 1;
    margin-left: 0;
  }
  .header-tools {
    order: 2;
    margin-left: auto;
    padding-left: 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-tools .lang-switch a,
  .curr-switch select,
  .curr-switch button {
    transition: none;
  }
}


/* ================================================================
   LIGHTBOX + LOGIN-TO-BUY + SOLID FOOTER (2026-10-10, round 3)
   ================================================================ */

/* ---------- zoom affordance on the gallery ---------- */

.gallery { position: relative; }
.gallery__stage { cursor: zoom-in; }

.gallery__zoom {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--ink);
  cursor: zoom-in;
  box-shadow: var(--sh-sm);
  transition: background 0.14s ease, transform 0.14s ease;
}
.gallery__zoom svg { width: 1.15rem; height: 1.15rem; }
.gallery__zoom:hover { background: var(--surface); transform: translateY(-1px); }

/* ---------- full-screen lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(12, 26, 22, 0.92);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: lightbox--in 0.18s ease;
}
.lightbox[hidden] { display: none; }

@keyframes lightbox--in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lightbox__figure {
  margin: 0;
  max-width: min(100%, 72rem);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 6rem);
  width: auto;
  height: auto;
  border-radius: var(--r);
  box-shadow: var(--sh-lg);
}

.lightbox__caption {
  color: #e7ede8;
  font-size: 0.9rem;
  text-align: center;
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  z-index: 101;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(16, 35, 30, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.14s ease;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: var(--ink); }

.lightbox__close { top: 1.2rem; right: 1.2rem; }
.lightbox__nav--prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 1rem; top: 50%; transform: translateY(-50%); }

body.lightbox--open { overflow: hidden; }

@media (max-width: 40rem) {
  .lightbox__nav--prev { left: 0.4rem; }
  .lightbox__nav--next { right: 0.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox { animation: none; }
}

/* ---------- login-to-buy ---------- */

.login-to-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--rule);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--sh-sm);
}
.login-to-buy__text {
  margin: 0;
  flex: 1 1 16rem;
  color: var(--ink-soft);
}

/* ---------- footer: solid, clearly visible ---------- */

.site-footer {
  background: var(--ink-deep);
  color: #cfdad2;
  border-top: 3px solid var(--rule);
}
.site-footer a { color: #f0f4ee; text-decoration-color: rgba(240, 244, 238, 0.4); }
.site-footer a:hover { color: var(--rule); text-decoration-color: var(--rule); }
.site-footer h2 {
  color: var(--rule);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-footer .site-footer__name { color: #fff; }
.site-footer .site-footer__tagline,
.site-footer .site-footer__company { color: #a9b8af; }
.site-footer .site-footer__bar {
  background: rgba(0, 0, 0, 0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #93a49b;
}
.site-footer .site-footer__bar p { margin: 0.3rem 0; }


/* ================================================================
   CONTACT PAGE (2026-10-10, round 4)
   Two columns: info cards on the left, the form in a raised panel
   on the right — same tokens as the rest of the shop.
   ================================================================ */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(0, 1.35fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  margin-top: 1.5rem;
}

/* ---- left: info ---- */

.contact-info { display: flex; flex-direction: column; gap: 1.25rem; }

.contact-card {
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-sm);
}
.contact-card h2 {
  margin: 0 0 0.7rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-card__name {
  margin: 0 0 0.15rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
}
.contact-card__lines { margin: 0; color: var(--ink-soft); }
.contact-card__lines a { color: var(--ink); }

.contact-facts {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.contact-facts > div {
  display: grid;
  gap: 0.15rem;
}
.contact-facts dt {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-facts dd { margin: 0; color: var(--ink-soft); }

/* ---- right: form ---- */

.contact-form {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh);
}
.contact-form h2 { margin-bottom: 1.25rem; }
.contact-form .field { margin-bottom: 1.05rem; }
.contact-form .button { width: 100%; margin-top: 0.35rem; }
.contact-form .form__note {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---- responsive ---- */

@media (max-width: 52rem) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
  .contact-form { order: -1; }
}


/* ================================================================
   PRINT: the invoice on ONE A4 page (2026-10-10)
   Screen typography (17px body) otherwise carries into print and
   pushes the invoice to a second page. Compact everything for
   paper: smaller type, tighter spacing, no screen chrome.
   ================================================================ */

@media print {
  @page {
    size: A4 portrait;
    margin: 12mm;
  }

  body {
    font-size: 9.5pt;
    line-height: 1.35;
  }

  /* Just the invoice on the paper: no headings, links or notices. */
  .page-head,
  .confirm {
    display: none !important;
  }

  .section {
    padding-block: 0;
  }

  .invoice {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }

  .invoice h2 {
    font-size: 10pt;
    margin: 8pt 0 4pt;
  }

  .invoice__head {
    margin-bottom: 8pt;
  }

  .invoice__seller-name {
    font-size: 13pt;
  }

  .invoice__meta dt,
  .invoice__meta dd {
    font-size: 8.5pt;
  }

  .invoice__to {
    margin: 6pt 0;
  }

  .invoice__table th,
  .invoice__table td {
    padding: 3pt 6pt;
    font-size: 9pt;
  }

  .invoice__totals div {
    padding: 2pt 0;
  }

  .invoice__vat {
    margin: 4pt 0 0;
  }

  .pay-box {
    padding: 8pt 10pt;
    margin-top: 8pt;
    break-inside: avoid;
  }

  .pay-box__rows div {
    padding: 2pt 0;
  }

  .pay-box__amount {
    font-size: 10.5pt;
  }

  .pay-box__note strong {
    font-size: 9pt;
  }

  /* The whole invoice stays together; nothing may split across pages. */
  .invoice {
    break-inside: avoid;
  }
  table { break-inside: avoid; }
}


/* ================================================================
   ACCOUNT PAGE (2026-10-10) — a real dashboard
   ================================================================ */

.account {
  max-width: 60rem;
  margin-inline: auto;
}

.account-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 3vw, 1.75rem);
  margin-block: 1.5rem 2rem;
}

.account-card {
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.account-card h2 {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* profile */
.account-card__avatar {
  align-self: center;
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 4.25rem;
  margin: 0.6rem 0 0.3rem;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
}
.account-card__name {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
}
.account-card__email,
.account-card__since,
.account-card__sub {
  margin: 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.account-card__since { color: var(--muted); font-size: 0.85rem; }
.account-card__actions { margin: 0.5rem 0 0; text-align: center; }

/* orders stat */
.account-card__stat {
  margin: 0.3rem 0 0;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  justify-content: center;
}
.account-card__stat strong {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
}
.account-card__stat span { color: var(--muted); }

/* tools */
.account-card__links {
  margin: 0.3rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.account-card__links a { text-decoration: none; font-weight: 600; }
.account-card__links a::after { content: ' →'; color: var(--muted); font-weight: 400; }
.account-card__links a:hover { text-decoration: underline; }
.account-card form { margin-top: 0.7rem; }

.account-orders h2 {
  margin-bottom: 0.9rem;
}

@media (max-width: 46rem) {
  .account-grid { grid-template-columns: 1fr; }
}


/* ===== Partner agreement document (/partner/join) ===== */
.agreement-paper {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(26px, 5vw, 44px) clamp(20px, 5vw, 44px) 18px;
  box-shadow: 0 24px 48px -30px rgba(20, 40, 36, 0.35);
  position: relative;
  overflow: hidden;
}
.agreement-paper::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--rule), var(--rule-deep));
}
.agreement-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.agreement-logo {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.04em;
  display: block;
}
.agreement-brand-sub {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-top: 2px;
}
.agreement-meta {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.agreement-meta__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
}
.agreement-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 30px);
  margin: 24px 0 4px;
  line-height: 1.15;
}
.agreement-parties {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 6px;
}
.agreement-body section { margin-top: 22px; }
.agreement-body h2 {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.agreement-body h2 span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: 11px;
  letter-spacing: 0;
}
.agreement-body p {
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--ink-soft);
  margin-top: 8px;
}
.agreement-foot {
  margin-top: 28px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.agreement-sign { margin-top: 30px; }
.agreement-sign > h2 {
  font-family: var(--font-display);
  font-size: 21px;
  margin-bottom: 4px;
}
.agreement-sign h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12.5px;
  margin: 22px 0 2px;
  color: var(--muted);
}
.agreement-signed { margin-top: 30px; }
.agreement-seal {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid #2c6e49;
  border-radius: var(--r);
  padding: 18px 22px;
  margin-bottom: 18px;
}
.agreement-seal strong {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 12px;
  color: #2c6e49;
  margin-bottom: 6px;
}
.agreement-seal p { margin: 0 0 12px; font-size: 14.5px; color: var(--ink-soft); }
.agreement-seal .button { margin: 0; }
@media print {
  .site-header, .site-footer, .agreement-sign, .agreement-signed { display: none !important; }
  .agreement-paper { box-shadow: none; border: none; }
}


/* ===== Withdrawal form / order page ===== */
.withdrawal-form,
.withdrawal-box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.withdrawal-box {
  padding: 20px 22px;
  margin-top: 26px;
}
.withdrawal-box__details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
}
.withdrawal-box__details[open] summary {
  margin-bottom: 10px;
}
.withdrawal-form__pre {
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  margin: 12px 0 0;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink);
}
.withdrawal-box .field__hint { margin-top: 10px; }