/* FLOGVIT.gallery — tokens copied from portal/design/tokens.css (STYLE.md),
   accent slate (skifer). Chrome rules follow portal/SETTINGS.md: no px floors on chrome
   elements, min-width: 0 on rows, nowrap only on the wordmark itself. */

:root {
  --paper: #faf9f6;
  --surface: #ffffff;
  --ink: #1b1b18;
  --ink-2: #67665f;
  --line: #dcdacf;
  --bad: #c03b2e;
  --accent: #3f5b75;
  --accent-dark: #a3bdd4;
  --radius: 10px;
  --radius-pill: 999px;
  --maxw: 1120px;
  /* The page's side gutter: 12 px, or the notch's inset where that is wider.
     The header, main, footer and every edge-to-edge strip that pulls itself
     back out of main all read these, so they cannot disagree. */
  --gutter-left: max(12px, env(safe-area-inset-left));
  --gutter-right: max(12px, env(safe-area-inset-right));
  --font-ui: 'Schibsted Grotesk', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  /* Pulled back out of main's gutter, for a strip that runs edge to edge on a phone. */
  --bleed-left: calc(-1 * var(--gutter-left));
  --bleed-right: calc(-1 * var(--gutter-right));
  /* The dark mat a photo is shown against — the photo page, the screen, the
     review, the editor. Not themed: a photo is judged against dark whatever
     the page around it is. */
  --mat: #0b0b0a;
  /* What stands in for a picture that has not loaded: a thumbnail's well. */
  --well: color-mix(in oklab, var(--ink) 6%, var(--surface));
  /* A thrown-out or hidden photo, wherever it is listed. */
  --dimmed: 0.35;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-fv-theme="light"]) {
    --paper: #161614; --surface: #1e1e1b; --ink: #edece6; --ink-2: #99978d; --line: #2e2d29; --bad: #e0604f;
    --accent: var(--accent-dark);
  }
}
:root[data-fv-theme="dark"] {
  --paper: #161614; --surface: #1e1e1b; --ink: #edece6; --ink-2: #99978d; --line: #2e2d29; --bad: #e0604f;
  --accent: var(--accent-dark);
  color-scheme: dark;
}
/* A forced theme says so to the browser too, or date pickers, checkboxes and
   scroll bars are drawn in the OS's scheme on the other one's paper. The light
   colours need no block of their own: they are :root's, and the dark media
   query above already leaves a forced-light page alone. */
:root[data-fv-theme="light"] { color-scheme: light; }

/* min-width: 0 on everything, once (#94). The default, auto, means "never
   narrower than my content": a grid or flex child pushes its track out past
   the viewport as the text grows, and a <fieldset> carries min-content in the
   browser's own stylesheet without a single rule of ours. No rule below
   repeats it; a rule that needs a floor sets one. */
*, *::before, *::after { box-sizing: border-box; min-width: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-ui); font-size: 16px; line-height: 1.5;
  display: flex; flex-direction: column; min-height: 100vh;
}
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 0.4em; overflow-wrap: anywhere; }
h1 { font-size: clamp(1.7em, 5vw, 2.4em); font-weight: 800; }
h2 { font-size: 1.25em; font-weight: 700; }
p { margin: 0 0 1em; overflow-wrap: anywhere; }
img, svg { max-width: 100%; }

.skip-link { position: absolute; left: -999px; top: 0; padding: 8px 12px; background: var(--surface); color: var(--ink); }
.skip-link:focus { left: 8px; z-index: 100; }
/* A label a screen reader reads and an eye does not need: the field beside it
   already says what it is. Never `display: none` — that hides it from both. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  padding: calc(10px + env(safe-area-inset-top)) 0 10px;
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.hdr-row {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--gutter-right) 0 var(--gutter-left);
  display: flex; align-items: center; gap: 0.75em; flex-wrap: wrap;
}
.hdr-nav { display: flex; gap: 0.1em; flex-wrap: wrap; }
.hdr-nav a {
  padding: 0.4em 0.7em; border-radius: var(--radius-pill);
  font-size: 0.9em; font-weight: 500; color: var(--ink-2); text-decoration: none;
}
.hdr-nav a.active, .hdr-nav a:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 6%, transparent); }
.hdr-controls { margin-left: auto; display: flex; align-items: center; gap: 0.5em; }

/* Wordmark (STYLE.md): nowrap on the mark itself, never on the row. */
.wordmark { display: inline-flex; align-items: baseline; font-size: 1.05em; color: var(--ink); }
.wordmark a { color: var(--ink); text-decoration: none; }
.wordmark a:focus-visible, .fv-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.wm-product { font-family: var(--font-mono); font-weight: 500; font-size: 0.95em; white-space: nowrap; }
.wm-product-dot { color: var(--accent); font-family: var(--font-ui); font-weight: 800; }

.fv-menu { position: relative; display: inline-block; }
.fv-summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: baseline; gap: 0.3em;
  font-weight: 800; letter-spacing: -0.02em; white-space: nowrap;
}
.fv-summary::-webkit-details-marker { display: none; }
.fv-caret { color: var(--ink-2); transition: transform 0.15s ease-out; }
.fv-menu[open] .fv-caret { transform: rotate(180deg); }
/* `left: 0`, as in books — never a negative offset in `em`. The panel is
   absolutely positioned, so a pull to the left is measured against the header's
   12 px gutter, and an `em` grows with the text: -0.6em is 10 px at 100 % text
   and 15 px at 150 %, which puts the panel 3 px off the left edge of the screen
   in all eight languages. See test/chrome-meny.test.ts. */
.fv-menu-panel {
  position: absolute; left: 0; top: calc(100% + 0.6em); z-index: 80;
  display: flex; flex-direction: column;
  min-width: min(14em, calc(100vw - 24px)); max-width: calc(100vw - 24px);
  padding: 0.35em; white-space: normal;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.fv-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.8em; flex-wrap: wrap;
  padding: 0.5em 0.75em; border-radius: 6px;
  font-size: 0.95em; font-weight: 400; letter-spacing: 0; text-decoration: none; color: var(--ink);
}
.fv-item[aria-current] { background: var(--well); }
.fv-wm { display: inline-flex; align-items: baseline; white-space: nowrap; }
.fv-brand-b { font-weight: 800; letter-spacing: -0.02em; }
.fv-dot { font-weight: 800; color: var(--ink); }
.fv-prod { font-family: var(--font-mono); font-weight: 500; font-size: 0.95em; }
.fv-soon .fv-wm { opacity: 0.5; }
.fv-chip { font-family: var(--font-mono); font-size: 0.7em; color: var(--ink-2); }
.fv-kontoitem { font-size: 0.85em; border-top: 1px solid var(--line); margin-top: 0.25em; padding-top: 0.6em; }
.fv-dot-puzzles { color: #2b5bb7; } .fv-dot-lab { color: #6743b8; } .fv-dot-image { color: #0f6e77; }
.fv-dot-books { color: #2f7d43; } .fv-dot-photo { color: #b0355f; } .fv-dot-photosuite { color: #8a5d0b; }
.fv-dot-bible { color: #7a4a21; } .fv-dot-hides { color: #8a4b22; } .fv-dot-eventphotos { color: #9c2f92; } .fv-dot-gallery { color: #3f5b75; }
@media (prefers-color-scheme: dark) {
  :root:not([data-fv-theme="light"]) .fv-dot-puzzles { color: #7ea6ec; }
  :root:not([data-fv-theme="light"]) .fv-dot-lab { color: #b39df0; }
  :root:not([data-fv-theme="light"]) .fv-dot-image { color: #6fc7cd; }
  :root:not([data-fv-theme="light"]) .fv-dot-books { color: #85c795; }
  :root:not([data-fv-theme="light"]) .fv-dot-photo { color: #ef8fb1; }
  :root:not([data-fv-theme="light"]) .fv-dot-photosuite { color: #e0aa4f; }
  :root:not([data-fv-theme="light"]) .fv-dot-bible { color: #d9a06b; }
  :root:not([data-fv-theme="light"]) .fv-dot-hides { color: #e0996a; }
  :root:not([data-fv-theme="light"]) .fv-dot-eventphotos { color: #e79ae0; }
  :root:not([data-fv-theme="light"]) .fv-dot-gallery { color: #a3bdd4; }
}
:root[data-fv-theme="dark"] .fv-dot-puzzles { color: #7ea6ec; }
:root[data-fv-theme="dark"] .fv-dot-lab { color: #b39df0; }
:root[data-fv-theme="dark"] .fv-dot-image { color: #6fc7cd; }
:root[data-fv-theme="dark"] .fv-dot-books { color: #85c795; }
:root[data-fv-theme="dark"] .fv-dot-photo { color: #ef8fb1; }
:root[data-fv-theme="dark"] .fv-dot-photosuite { color: #e0aa4f; }
:root[data-fv-theme="dark"] .fv-dot-bible { color: #d9a06b; }
:root[data-fv-theme="dark"] .fv-dot-hides { color: #e0996a; }
:root[data-fv-theme="dark"] .fv-dot-eventphotos { color: #e79ae0; }
:root[data-fv-theme="dark"] .fv-dot-gallery { color: #a3bdd4; }

.account-chip {
  display: inline-flex; align-items: center; gap: 0.4em; min-height: 2.4em; max-width: 12em; padding: 0 0.8em;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink);
  font-size: 0.85em; font-weight: 600; text-decoration: none;
}
.account-chip:hover { border-color: var(--ink-2); }
.account-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-chip-plus {
  flex: none; padding: 0.1em 0.5em; border-radius: var(--radius-pill); background: var(--accent); color: var(--paper);
  font-family: var(--font-mono); font-size: 0.7em; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.settings-gear {
  display: inline-flex; align-items: center; justify-content: center; width: 2.4em; height: 2.4em;
  border-radius: 50%; color: var(--ink-2); text-decoration: none; font-size: 1em;
}
.settings-gear.active, .settings-gear:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 6%, transparent); }

/* ---------- page ---------- */
.page {
  flex: 1; width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: 1.5em var(--gutter-right) 3em var(--gutter-left);
}
.hero { padding: 1em 0 1.5em; }
.hero--center { text-align: center; padding-top: 3em; }
.lead { font-size: 1.1em; color: var(--ink-2); max-width: 40em; }
.hero--center .lead { margin-inline: auto; }
.eyebrow { font-family: var(--font-mono); font-size: 0.85em; color: var(--accent); margin: 0; }
.empty { color: var(--ink-2); }

/* A section's name, with the rule drawn NEXT to it rather than under it: the
   heading stays one text node, which is what the sweeps read. */
.section-head {
  display: flex; align-items: center; gap: 0.7em;
  margin-top: 1.6em;
  font-family: var(--font-mono); font-size: 0.8em; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
  margin-bottom: 0.7em;
}
.section-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* The landing page's points: as many columns as fit, never a px floor. */
.points { display: grid; gap: 0.8em; grid-template-columns: repeat(auto-fill, minmax(min(18em, 100%), 1fr)); margin: 0 0 1.5em; }
.points .card { margin: 0; }
.point h2 { font-size: 1.1em; margin: 0 0 0.3em; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2em; margin: 0 0 1em; }
.card--accent { border-color: color-mix(in oklab, var(--accent) 40%, var(--line)); }
.card p:last-child { margin-bottom: 0; }
/* Text and its one button side by side where there is room, stacked where
   there is not. `1 1 20em` rather than a min-width, so the text column wraps
   instead of pushing the button off the screen at 150 %. */
.card--split { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8em 1.2em; }
.card-split-text { flex: 1 1 20em; }
.card-split-text h2 { margin-bottom: 0.2em; }
.card--split .btn { flex: 0 1 auto; max-width: 100%; }

.btn {
  display: inline-block; padding: 0.6em 1.1em; border-radius: var(--radius-pill); border: 1px solid var(--accent);
  background: var(--accent); color: var(--paper); text-decoration: none; cursor: pointer; font: inherit; font-weight: 600;
}
.btn--outline { background: transparent; color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5em; }
.chip {
  padding: 0.4em 0.9em; border-radius: var(--radius-pill); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font: inherit; cursor: pointer;
  text-decoration: none;
}
.chip--on { border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* ---------- forms ---------- */
.form { max-width: 40em; }
.field { margin: 0 0 1em; }
.field label, .field legend { display: block; font-weight: 600; margin-bottom: 0.3em; }
/* A text field, wherever it is: the type, the ink, the line and the corner.
   Size and paper are each field's own. */
.field input[type="text"], .field input[type="date"], .field input[type="number"], .field input[type="password"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea {
  font: inherit; color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
}
.field input[type="text"], .field input[type="date"], .field input[type="number"], .field input[type="password"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea {
  width: 100%; padding: 0.55em 0.7em; background: var(--surface);
}
/* The focus ring, on every field — one rule, so no field is left with the browser's own. */
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field--bad input, .field--bad textarea, .field--bad select { border-color: var(--bad); }
.field-error { color: var(--bad); font-size: 0.9em; margin: 0.3em 0 0; }
.field-help { color: var(--ink-2); font-size: 0.9em; margin: 0.3em 0 0; }
.field-row { display: grid; gap: 0 1em; grid-template-columns: repeat(auto-fit, minmax(min(14em, 100%), 1fr)); }
.field-prefix { display: flex; align-items: stretch; }
.field-prefix-text { padding: 0.55em 0.5em; border: 1px solid var(--line); border-right: 0; border-radius: 8px 0 0 8px; background: color-mix(in oklab, var(--ink) 4%, var(--surface)); color: var(--ink-2); font-family: var(--font-mono); font-size: 0.85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.field-prefix input[type="text"] { border-radius: 0 8px 8px 0; }
.radio--off { color: var(--ink-2); }
.checkbox, .radio { display: flex; gap: 0.5em; align-items: flex-start; font-weight: 400 !important; }
.checkbox input, .radio input { margin-top: 0.3em; flex: none; }
fieldset.field { border: 0; padding: 0; margin-inline: 0; }
.flash { color: var(--accent); font-weight: 600; }
/* A machine translation the seller has not read yet: the note and the box that makes it theirs. */
.machine-note { margin: 0 0 0.6rem; padding: 0.45rem 0.7rem; border-left: 3px solid var(--accent); background: var(--well); border-radius: 0 var(--radius) var(--radius) 0; }
.machine-note .field-help { margin: 0 0 0.3rem; }
.translate-card p { margin: 0 0 0.6rem; }
/* A file input's intrinsic width is its button plus the file name; at 150 %
   text that ran 100 px off a 320 px screen. It takes the field's width. */
.field input[type="file"] { display: block; width: 100%; max-width: 100%; box-sizing: border-box; font: inherit; font-size: 0.95em; }
code.url { font-family: var(--font-mono); font-size: 0.9em; overflow-wrap: anywhere; }
/* ---------- studio ---------- */
/* The studio's sections: one row that scrolls sideways on a phone rather
   than wrapping into four lines above every page. Its own scroller, edge to
   edge, so the sweep's "nothing sticks out" holds. */
.studio-nav {
  display: flex; gap: 0.4em; overflow-x: auto; padding: 0 0 0.6em; margin: 0 0 0.6em;
  scrollbar-width: thin;
}
.studio-nav .chip { flex: none; white-space: nowrap; }
.chip--check { display: inline-flex; align-items: center; gap: 0.4em; cursor: pointer; }
.chip--check:has(input:checked) { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.handle-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em; }
.handle-prefix { font-family: var(--font-mono); font-size: 0.9em; color: var(--ink-2); overflow-wrap: anywhere; }
.handle-row input { flex: 1 1 10em; }
.label { font-weight: 600; }

/* ---------- the studio's photos ---------- */
.status-tabs { margin: 0 0 0.8em; }
.status-tabs .count { font-family: var(--font-mono); font-size: 0.85em; color: var(--ink-2); }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; margin: 0 0 1em; }
.filter-row input[type="search"], .filter-row select, .bulk select {
  font: inherit; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 0.45em 0.6em; background: var(--surface); min-width: 0; max-width: 100%;
}
.filter-row input[type="search"] { flex: 1 1 12em; }
.studio-grid { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 0.8em; grid-template-columns: repeat(auto-fill, minmax(min(11em, 100%), 1fr)); }
.studio-cell { display: flex; flex-direction: column; gap: 0.25em; }
.studio-pick { position: relative; display: block; cursor: pointer; }
.studio-pick img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; background: color-mix(in oklab, var(--ink) 6%, var(--surface)); }
.studio-pick input { position: absolute; top: 0.5em; left: 0.5em; width: 1.3em; height: 1.3em; accent-color: var(--accent); }
.studio-pick:has(input:checked) img { outline: 3px solid var(--accent); outline-offset: 2px; }
.studio-cell-title { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.studio-cell-meta { font-size: 0.85em; color: var(--ink-2); }
.studio-cell-move { display: flex; gap: 0.3em; }
.status--published { color: var(--accent); font-weight: 600; }
.status--hidden { color: var(--ink-2); text-decoration: line-through; }
.icon-btn { font: inherit; min-width: 2.2em; min-height: 2.2em; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer; }
.bulk { border: 1px solid var(--line); }
.bulk legend { font-weight: 600; padding: 0 0.3em; }
.editor { display: grid; gap: 1.2em; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60em) { .editor { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; } .editor-photo { position: sticky; top: 1em; } }
.editor-photo { margin: 0; }
.editor-photo img { display: block; width: 100%; height: auto; border-radius: 8px; }
.editor-form { max-width: none; }
.lang-block { border-top: 1px solid var(--line); padding-top: 0.8em; }
.lang-block legend { font-weight: 700; }
.lang-block input, .lang-block textarea { margin-bottom: 0.6em; }
.variant-preview { grid-column: 1 / -1; margin: 0; }
.collection-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5em; }

/* ---------- orders in the studio ---------- */
.order-list { list-style: none; margin: 0; padding: 0; }
.order-row { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; gap: 0.2em 1em; align-items: baseline; padding: 0.6em 0; border-bottom: 1px solid var(--line); }
.order-ref { font-family: var(--font-mono); font-weight: 600; }
.order-who { overflow-wrap: anywhere; color: var(--ink-2); }
.order-amount { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.order-status { grid-column: 1 / -1; font-size: 0.85em; }
.order-status--paid { color: var(--accent); font-weight: 600; }
.order-status--cancelled, .order-status--refunded { color: var(--ink-2); }
.order-detail { display: grid; gap: 1em; grid-template-columns: repeat(auto-fit, minmax(min(20em, 100%), 1fr)); }
.receipt { list-style: none; margin: 0; padding: 0; }
.receipt li { display: flex; justify-content: space-between; gap: 1em; padding: 0.4em 0; border-bottom: 1px solid var(--line); }
.receipt li > span:first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* The amount keeps its width: "3 000 NOK" squeezed by the text beside it
   spilled out of the row at 320 px (the layout sweep found it). */
.receipt li > span:last-child { flex: none; white-space: nowrap; }
.receipt-total { font-weight: 700; }
.address { overflow-wrap: anywhere; }

/* ---------- the domain's records ---------- */
.table-scroll { overflow-x: auto; margin: 0 calc(-1 * 1.2em); padding: 0 1.2em; }
.records { border-collapse: collapse; width: 100%; font-size: 0.92em; }
.records th, .records td { text-align: left; vertical-align: top; padding: 0.5em 0.6em 0.5em 0; border-bottom: 1px solid var(--line); }
.records code { font-family: var(--font-mono); word-break: break-all; }
.records .field-help { display: block; }

/* ---------- presets ---------- */
.preset-list { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 0.8em; }
.preset-list .card { margin: 0; }
.preset-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3em 0.8em; }
.preset-head h2 { margin: 0; font-size: 1.15em; }
.badge { font-family: var(--font-mono); font-size: 0.75em; padding: 0.1em 0.6em; border-radius: var(--radius-pill); border: 1px solid var(--accent); color: var(--accent); }
/* One variant per row where there is room, stacked where there is not: four
   columns that each give way instead of a table that runs off a phone. */
.variant-rows { display: grid; gap: 0.6em; margin: 0 0 1em; }
.variant-row {
  display: grid; gap: 0.4em 0.8em; margin: 0; padding: 0.6em 0 0; border: 0; border-top: 1px solid var(--line);
  grid-template-columns: repeat(auto-fit, minmax(min(9em, 100%), 1fr));
}
.variant-row .field { margin: 0; }
.variant-row .field span { display: block; font-size: 0.85em; color: var(--ink-2); margin-bottom: 0.2em; }
.variant-row input { font: inherit; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; width: 100%; padding: 0.45em 0.6em; background: var(--surface); }
.radio--inline { flex-wrap: wrap; align-items: baseline; }
.edition-size { width: 6em; font: inherit; padding: 0.3em 0.5em; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }

/* ---------- upload ---------- */
.upload-zone {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em 1em;
  padding: 1.4em; margin: 0 0 1em; border: 2px dashed var(--line); border-radius: var(--radius);
}
.upload-zone--over { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 6%, var(--surface)); }
.upload-zone .btn { position: relative; }
.upload-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5em; }
.upload-item { display: grid; grid-template-columns: 3.5em 1fr; grid-template-rows: auto auto; gap: 0 0.8em; align-items: center; }
.upload-thumb { grid-row: span 2; width: 3.5em; height: 3.5em; object-fit: cover; border-radius: 6px; background: color-mix(in oklab, var(--ink) 6%, var(--surface)); }
.upload-name { font-weight: 600; overflow-wrap: anywhere; }
.upload-status { font-size: 0.9em; color: var(--ink-2); }
.upload-item[data-status="done"] .upload-status { color: var(--accent); }
.upload-item[data-status="failed"] .upload-status, .upload-item[data-status="quota"] .upload-status, .upload-item[data-status="unreadable"] .upload-status { color: var(--bad); }

/* ---------- a public gallery ---------- */
/* The seller's shopfront, in the seller's own look (src/lib/look.ts): the
   layout sets --g-* on <body> from the stored fonts and colours, and the
   portfolio's own tokens are pointed at them here, so every rule below
   follows without knowing which look it is in. The photographs are the page:
   a grid of whole pictures in rows — every photo keeps its own proportions,
   because a photographer's crop is the work. */
.g-body {
  --wall: var(--g-bg);
  --paper: var(--g-bg);
  --ink: var(--g-ink);
  --ink-2: color-mix(in oklab, var(--g-ink) 68%, var(--g-bg));
  --line: color-mix(in oklab, var(--g-ink) 16%, var(--g-bg));
  --accent: var(--g-accent);
  --surface: color-mix(in oklab, var(--g-bg) 45%, #fff);
  --mat: color-mix(in oklab, var(--g-bg) 25%, #fff);
  --row: 6.5em;
  --gap: 0.9em;
  background: var(--wall); color: var(--ink);
  font-family: var(--g-body-font);
  display: flex; flex-direction: column; min-height: 100vh;
}
/* On a dark wall the mat and the surfaces are a shade of the wall, never white. */
.g-body[data-tone="dark"] {
  --surface: color-mix(in oklab, var(--g-bg) 88%, #fff);
  --mat: color-mix(in oklab, var(--g-bg) 90%, #fff);
}
@media (min-width: 48em) { .g-body { --row: 15em; --gap: 1.2em; } }
/* The band: a strip of the seller's second colour above the page, as the footer is below it. */
.g-body::before { content: ""; display: block; height: 0.4em; background: var(--g-band); }
.g-body h1, .g-body h2, .g-body h3, .g-name, .g-title, .g-artwork-title, .g-h2 {
  font-family: var(--g-heading); font-weight: var(--g-heading-weight); letter-spacing: 0;
}
.g-body .btn { border-radius: 0; background: var(--g-accent); border-color: var(--g-accent); color: var(--g-accent-ink); }
.g-body .btn--outline { background: transparent; color: var(--g-accent); }

.g-header {
  max-width: var(--maxw); width: 100%; margin: 0 auto; box-sizing: border-box;
  padding: 1.4em var(--gutter-right) 0.6em var(--gutter-left);
  display: flex; flex-direction: column; align-items: center; gap: 0.7em; text-align: center;
}
.g-name { margin: 0; font-size: clamp(1.5em, 1.1em + 1.6vw, 2.1em); line-height: 1.1; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
/* The menu (src/gallery/layout.tsx, src/lib/menu.ts). Wide: one centred row,
   and a group's panel spans the header under it, so it never runs off the
   screen whichever item opened it. Narrow: one button and the tree. The
   switch is in em, so large text gets the phone's menu a step earlier. */
.g-header { position: relative; }
.g-nav--wide { display: none; }
.g-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3em 1.4em; }
.g-nav-list > li > a, .g-drop > summary { display: inline-block; color: var(--ink-2); text-decoration: none; padding: 0.3em 0; font-size: 0.92em; cursor: pointer; }
.g-nav-list > li > a[aria-current="page"], .g-drop > summary[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -1px 0 var(--ink); }
.g-drop > summary { list-style: none; }
.g-drop > summary::-webkit-details-marker { display: none; }
.g-drop > summary::after, .g-tree summary::after { content: ""; display: inline-block; width: 0.38em; height: 0.38em; margin: 0 0 0.18em 0.45em; border: solid currentColor; border-width: 0 1px 1px 0; transform: rotate(45deg); }
.g-drop[open] > summary::after { transform: rotate(225deg); margin-bottom: -0.1em; }
.g-drop-panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2em 3em;
  padding: 1.6em var(--gutter-right) 1.8em var(--gutter-left);
  background: var(--g-bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  box-shadow: 0 16px 24px -20px rgba(0,0,0,0.35); text-align: left;
}
.g-drop-col { list-style: none; margin: 0; padding: 0; min-width: 9em; }
.g-drop-col ul { list-style: none; margin: 0.5em 0 0; padding: 0; }
.g-drop-panel li { margin: 0 0 0.45em; }
.g-drop-panel a { color: var(--ink-2); text-decoration: none; }
.g-drop-panel a:hover, .g-drop-panel a[aria-current="page"] { color: var(--ink); text-decoration: underline; }
.g-drop-head { display: block; color: var(--ink); font-weight: 600; }
.g-drop-col > a.g-drop-head, .g-drop-col > a:first-child { color: var(--ink); font-weight: 600; }

.g-nav--narrow { width: 100%; }
.g-menu-button > summary {
  list-style: none; display: inline-block; cursor: pointer; padding: 0.45em 1.1em;
  border: 1px solid var(--line); color: var(--ink); font-size: 0.95em;
}
.g-menu-button > summary::-webkit-details-marker { display: none; }
.g-tree { text-align: left; margin-top: 0.8em; border-top: 1px solid var(--line); }
.g-tree ul { list-style: none; margin: 0; padding: 0; }
.g-tree ul ul { padding-left: 1em; }
.g-tree li { border-bottom: 1px solid var(--line); }
.g-tree ul ul li:last-child { border-bottom: 0; }
.g-tree a, .g-tree summary, .g-tree .g-drop-head { display: block; padding: 0.7em 0.2em; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.g-tree summary { cursor: pointer; list-style: none; }
.g-tree summary::-webkit-details-marker { display: none; }
.g-tree details[open] > summary::after { transform: rotate(225deg); margin-bottom: -0.1em; }
.g-tree a[aria-current="page"] { font-weight: 700; }
.g-tree-self { margin: 0; padding-left: 1em; }
@media (min-width: 48em) {
  .g-nav--wide { display: block; width: 100%; }
  .g-nav--narrow { display: none; }
}
.g-draft { margin: 0; padding: 0.5em var(--gutter-right) 0.5em var(--gutter-left); background: color-mix(in oklab, var(--accent) 16%, var(--wall)); text-align: center; font-size: 0.9em; }
.g-page { padding-top: 0.5em; }
.g-center { text-align: center; }

.g-hero { padding: 1.4em 0 1.2em; max-width: 38em; }
.g-hero--center { margin: 0 auto; text-align: center; padding: 1.8em 0 2em; }
.g-title { font-size: clamp(1.9em, 1.2em + 3vw, 3.1em); line-height: 1.1; margin: 0 0 0.25em; }
.g-tagline { font-size: 1.1em; color: var(--ink-2); margin: 0; }
.g-h2 { font-size: clamp(1.6em, 1.2em + 1.6vw, 2.3em); line-height: 1.15; margin: 0 0 0.7em; color: var(--ink); }
.g-h3 { font-size: 1.05em; font-weight: 700; margin: 1.6em 0 0.4em; }
.g-section { margin: 2.6em 0 0; }

/* The print as the photographer chose to hang it (src/lib/look.ts): a frame
   of their width and colour, a mat that grows with the print and is wider at
   the bottom, as a mat is cut, and a shadow no deeper than a frame's on a wall. */
.g-mat, .g-frame {
  display: block; box-sizing: border-box; background: var(--g-mat);
  border: var(--g-frame-w) solid var(--g-frame);
  padding: var(--g-mat-pad) var(--g-mat-pad) var(--g-mat-pad-b);
  box-shadow: 0 2px 3px rgba(0,0,0,0.1), 0 26px 38px -22px rgba(40,30,20,0.45);
}
.g-mat img, .g-frame img { display: block; width: 100%; height: auto; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); }
.g-mat--small { padding: 0.55em; aspect-ratio: 4 / 3; display: grid; place-items: center; }
.g-mat--small img { width: 100%; height: 100%; object-fit: contain; }

.g-lead { display: block; color: var(--ink); text-decoration: none; max-width: 70em; margin: 0 auto; }
.g-lead-caption { display: block; margin-top: 0.8em; font-size: 0.95em; color: var(--ink-2); }

/* Rows of whole photos: each item grows by its own ratio (--r), so a row's
   heights match and nothing is cropped. The filler takes the last row's slack. */
.g-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--gap); }
.g-work { flex: var(--r) 1 calc(var(--r) * var(--row)); min-width: 0; }
.g-work a { display: block; color: var(--ink); text-decoration: none; }
.g-work img { display: block; width: 100%; height: auto; aspect-ratio: var(--r); background: color-mix(in oklab, var(--ink) 7%, var(--wall)); }
.g-work a:hover img, .g-work a:focus-visible img { outline: 1px solid var(--ink); outline-offset: 3px; }
.g-work-title { display: block; margin-top: 0.45em; font-size: 0.92em; font-weight: 600; overflow-wrap: anywhere; }
.g-work-price { display: block; font-size: 0.85em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.g-fill { flex: 1000 1 0; min-width: 0; }

/* Two across on a phone, more where there is room: a cover is a pointer, not the photo itself. */
.g-collections { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(11em, calc(50% - var(--gap))), 1fr)); }
.g-collections a { display: block; color: var(--ink); text-decoration: none; }
.g-collection-title { display: block; margin-top: 0.55em; font-weight: 600; }
.g-collection-count { display: block; font-size: 0.85em; color: var(--ink-2); }

/* One artwork: the print on the wall, and beside it what a buyer decides on. */
.g-artwork { display: grid; gap: 1.6em; grid-template-columns: minmax(0, 1fr); padding-top: 0.8em; }
@media (min-width: 60em) {
  .g-artwork { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 3em; align-items: start; }
  .g-artwork-info { position: sticky; top: 1.5em; }
}
.g-artwork-photo { margin: 0; }
.g-artwork-photo figcaption { margin-top: 0.7em; font-size: 0.9em; }
.g-artwork-photo figcaption a { color: var(--ink-2); }
.g-artwork-title { font-size: clamp(1.6em, 1.1em + 2vw, 2.4em); line-height: 1.15; margin: 0 0 0.3em; }
.g-edition { color: var(--ink-2); margin: 0 0 1.2em; }
.g-edition strong { color: var(--ink); }
.g-buy fieldset { border: 0; margin: 0 0 1em; padding: 0; }
.g-buy legend { font-weight: 600; margin-bottom: 0.5em; }
.g-variant {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 0.8em; cursor: pointer;
  padding: 0.75em 0.9em; border: 1px solid color-mix(in oklab, var(--ink) 18%, var(--wall)); background: var(--mat); margin-bottom: -1px;
}
.g-variant:has(input:checked) { border-color: var(--ink); position: relative; box-shadow: inset 3px 0 0 var(--accent); }
.g-variant input { accent-color: var(--accent); margin: 0; align-self: center; }
.g-variant-label { flex: 1 1 10em; min-width: 0; }
.g-variant-price { font-weight: 600; font-variant-numeric: tabular-nums; }
.g-buy-btn { width: 100%; padding: 0.85em 1.2em; font-size: 1.05em; border-radius: 0; }
.g-soldout { font-weight: 600; margin: 0 0 1em; }
.g-prose { max-width: 36em; margin-top: 1.6em; line-height: 1.6; }
.g-prose p { margin: 0 0 0.9em; }
.g-prose ul { margin: 0 0 0.9em; padding-left: 1.2em; }
.g-awards ul { margin: 0; padding-left: 1.2em; }
.g-in { margin-top: 1.4em; color: var(--ink-2); }

.g-search { display: flex; flex-wrap: wrap; gap: 0.5em; margin: 0.6em 0 0; }
.g-search input { flex: 1 1 14em; min-width: 0; font: inherit; padding: 0.6em 0.8em; border: 1px solid color-mix(in oklab, var(--ink) 25%, var(--wall)); background: var(--mat); color: var(--ink); }
.g-results { margin: 1em 0 0; color: var(--ink-2); }

.g-page-text { max-width: 38em; padding: 1.4em 0 0; line-height: 1.6; }
.g-page-text .g-prose { margin-top: 0.8em; }
.g-facts { margin: 1.2em 0; padding: 1em 1.1em; background: var(--mat); }
.g-facts dt { font-weight: 700; }
.g-facts dd { margin: 0.2em 0 0; overflow-wrap: anywhere; }
.g-fact-label { color: var(--ink-2); }
.g-form-text { white-space: pre-wrap; font: inherit; background: var(--mat); padding: 1em 1.1em; margin: 0; overflow-wrap: anywhere; }

/* The cart and the order: the same quiet surfaces as the artwork page. */
.g-cart-link { color: var(--ink) !important; font-weight: 600; }
.g-cart { display: grid; gap: 2em; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60em) { .g-cart { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } }
.g-cart-lines ul { list-style: none; margin: 0 0 1em; padding: 0; }
.g-cart-line { display: grid; grid-template-columns: 4.5em minmax(0, 1fr) auto; gap: 0.8em; align-items: start; padding: 0.9em 0; border-bottom: 1px solid color-mix(in oklab, var(--ink) 12%, var(--wall)); }
.g-cart-thumb img { display: block; width: 100%; height: auto; }
.g-cart-what { display: flex; flex-direction: column; gap: 0.2em; min-width: 0; }
.g-cart-what > a { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.g-cart-qty { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em 0.7em; margin-top: 0.3em; font-size: 0.9em; }
.g-cart-qty input { width: 4em; font: inherit; padding: 0.3em 0.4em; border: 1px solid color-mix(in oklab, var(--ink) 25%, var(--wall)); background: var(--mat); color: var(--ink); }
.g-cart-amount { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.link-btn { font: inherit; background: none; border: 0; padding: 0; color: var(--ink-2); text-decoration: underline; cursor: pointer; }
.g-cart-pay fieldset { border: 0; padding: 0; margin: 0 0 1em; }
.g-cart-pay legend { font-weight: 600; margin-bottom: 0.5em; }
.g-sum { display: grid; grid-template-columns: 1fr auto; gap: 0.3em 1em; margin: 0 0 1em; font-variant-numeric: tabular-nums; }
.g-sum dd { margin: 0; text-align: right; }
.g-sum-total { font-weight: 700; font-size: 1.1em; }
.g-receipt { list-style: none; margin: 0 0 1.4em; padding: 0; max-width: 36em; }
.g-receipt li { display: flex; justify-content: space-between; gap: 1em; padding: 0.5em 0; border-bottom: 1px solid color-mix(in oklab, var(--ink) 12%, var(--wall)); }
.g-receipt li > span:first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.g-receipt li > span:last-child { flex: none; white-space: nowrap; }

.g-footer { margin-top: 5em; background: var(--g-band); color: var(--g-band-ink); }
.g-footer-row {
  max-width: var(--maxw); margin: 0 auto; padding: 2em var(--gutter-right) 2.2em var(--gutter-left);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6em 1.4em; font-size: 0.85em;
}
.g-footer-row a { color: inherit; }
.g-footer-seller { font-weight: 600; }
.g-langs { display: flex; flex-wrap: wrap; gap: 0.3em 0.9em; }
.g-langs a[aria-current="true"] { font-weight: 700; text-decoration: none; }
.g-made { margin-left: auto; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); }
.footer-row {
  max-width: var(--maxw); margin: 0 auto; padding: 1.5em var(--gutter-right) 1.5em var(--gutter-left);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.6em 1.2em; font-size: 0.85em; color: var(--ink-2);
}
.footer-row a { color: var(--ink-2); text-decoration: none; }
.footer-row a:hover { color: var(--accent); }
.footer-wm { display: inline-flex; align-items: baseline; white-space: nowrap; color: var(--ink); }
.footer-wm-brand { font-weight: 800; letter-spacing: -0.02em; color: var(--ink) !important; }
.footer-wm-prod { font-family: var(--font-mono); font-weight: 500; font-size: 0.95em; color: var(--ink) !important; }
.footer-wm-dot { color: var(--accent); font-family: var(--font-ui); font-weight: 800; }
.footer-copy { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* «See it on a wall» (src/gallery/room.tsx): a wall in cm, turned into percentages. A room stays a lit room in dark mode. */
.g-room { margin: 1.25rem 0; }
.g-room > summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.g-room-scene {
  position: relative; margin-top: 0.75rem; aspect-ratio: var(--wall, 36 / 26); overflow: hidden;
  background: linear-gradient(to top, #a89b87 0, #b9ad9b var(--floor, 5%), #e2ded5 var(--floor, 5%), #ebe8e1 100%);
  border-radius: var(--radius);
}
.g-room-print {
  position: absolute; left: var(--pl); bottom: var(--pb); width: var(--pw); height: var(--ph); visibility: var(--pv, visible);
  object-fit: cover; background: #fff; box-shadow: 0 0.3em 0.9em rgba(40, 32, 20, 0.28);
}
.g-room-sofa { position: absolute; fill: #7f8b86; }
.g-room-cap { display: none; margin: 0.5rem 0 0; color: var(--ink-2); font-size: 0.9em; }
.g-room-cap.is-first { display: block; }

/* The contact form (src/gallery/pages.tsx): a honeypot no person sees or tabs into. */
.g-contact { margin-top: 1.5rem; max-width: 36rem; }
.g-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.g-ask { margin: 0.75rem 0; }

/* /studio/look: a small piece of the gallery in the look being chosen, and the five colours. */
.look-sample { min-height: 0; display: block; margin: 0 0 1.5em; padding: 1.2em 1.2em 0; border: 1px solid var(--line); text-align: center; }
.look-sample::before { display: none; }
.look-sample p { margin: 0 0 0.7em; }
.look-sample-name { font-family: var(--g-heading); font-weight: var(--g-heading-weight); font-size: 1.8em; line-height: 1.1; }
.look-sample-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.3em 1.2em; font-size: 0.9em; color: var(--ink-2); }
.look-sample-frame { width: 9em; margin: 0 auto 1.2em; }
.look-sample-photo { display: block; aspect-ratio: 3 / 2; background: linear-gradient(160deg, #6f8aa0, #2f3e36 60%, #c9a45c); }
.look-sample-h { font-family: var(--g-heading); font-weight: var(--g-heading-weight); font-size: 1.5em; line-height: 1.15; }
.look-sample-band { margin: 1.2em -1.2em 0 !important; padding: 0.9em 1.2em; background: var(--g-band); color: var(--g-band-ink); font-size: 0.85em; }
.look-colours { display: grid; gap: 0.6em 1em; grid-template-columns: repeat(auto-fill, minmax(min(12em, 100%), 1fr)); }
.look-colour { display: flex; align-items: center; gap: 0.6em; font-weight: 400 !important; }
.look-colour input[type="color"] { flex: none; width: 2.6em; height: 2.2em; padding: 0.1em; border: 1px solid var(--line); background: var(--surface); }

/* /studio/menu: the tree, one row per item, indented under its parent. */
.menu-tree { list-style: none; margin: 0; padding: 0; }
.menu-tree .menu-tree { padding-left: 1.4em; border-left: 1px solid var(--line); margin-left: 0.4em; }
.menu-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3em 0.9em; padding: 0.5em 0; border-bottom: 1px solid var(--line); }
.menu-row-label { font-weight: 600; overflow-wrap: anywhere; }
.menu-row-what { flex: 1 1 10em; margin: 0; }
.menu-row-actions { display: flex; gap: 0.3em; margin: 0; }

/* The front page's sections (src/lib/front.ts, src/gallery/pages.tsx). A
   collection is a picture to click, cropped to its tile; a chosen photo a
   square card as a shop shows it. The full grid below keeps every photo
   whole. */
.g-intro { max-width: 40em; margin: 1.6em auto 0; text-align: center; }
.g-intro-h { font-size: clamp(2em, 1.3em + 3vw, 3.2em); line-height: 1.1; margin: 0 0 0.35em; }
.g-intro .g-prose { margin: 0 auto; color: var(--ink-2); font-size: 1.05em; }
.g-tile { display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; background: var(--surface); border: 1px solid var(--line); }
.g-tile-img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: color-mix(in oklab, var(--ink) 6%, var(--wall)); }
.g-tile-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.g-tile:hover .g-tile-img img, .g-tile:focus-visible .g-tile-img img { transform: scale(1.03); }
.g-tile-cap { display: block; padding: 0.85em 1em; font-family: var(--g-heading); font-weight: var(--g-heading-weight); font-size: 1.2em; line-height: 1.2; overflow-wrap: anywhere; }
.g-tile-cap::after { content: " →"; }
.g-collage { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
.g-collage-h { grid-column: 1 / -1; }
@media (min-width: 48em) {
  .g-collage--2, .g-collage--3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .g-collage--2 { grid-auto-rows: clamp(18em, 34vw, 32em); }
  .g-collage--3 { grid-auto-rows: clamp(11em, 17vw, 16em); }
  .g-collage--3 > .g-tile:first-of-type { grid-row: span 2; }
  .g-collage .g-tile-img { flex: 1 1 auto; aspect-ratio: auto; }
}
.g-tiles, .g-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); }
.g-tiles { grid-template-columns: repeat(auto-fill, minmax(min(15em, 100%), 1fr)); }
.g-tiles .g-tile-img { aspect-ratio: 1; }
.g-cards { grid-template-columns: repeat(auto-fill, minmax(min(11em, calc(50% - var(--gap))), 1fr)); }
@media (min-width: 60em) {
  .g-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.g-card { display: block; height: 100%; color: var(--ink); text-decoration: none; background: var(--surface); border: 1px solid var(--line); }
.g-card-img { display: block; aspect-ratio: 1; overflow: hidden; background: color-mix(in oklab, var(--ink) 6%, var(--wall)); }
.g-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.g-card-title { display: block; padding: 0.7em 0.9em 0; font-size: 0.95em; overflow-wrap: anywhere; }
.g-card-price { display: block; padding: 0.1em 0.9em 0.8em; font-size: 0.9em; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* /studio/front: what a section is made of, chosen with a tick on a small picture. */
.front-list { list-style: none; margin: 0; padding: 0; }
.front-pick { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6em; grid-template-columns: repeat(auto-fill, minmax(min(10em, 100%), 1fr)); }
.front-pick-item { display: grid; grid-template-columns: auto 3em minmax(0, 1fr); align-items: center; gap: 0.5em; font-weight: 400 !important; }
.front-pick-img { display: block; width: 3em; height: 3em; background: var(--well); overflow: hidden; }
.front-pick-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.front-pick-item span:last-child { overflow-wrap: anywhere; font-size: 0.9em; }
@media (prefers-reduced-motion: reduce) { .g-tile-img img { transition: none; } }

/* A collection's own cover in its editor. */
.own-cover { display: block; width: 100%; max-width: 12em; aspect-ratio: 4 / 3; object-fit: cover; margin: 0.4em 0; background: var(--well); }

/* ---------- the «kvalitet» style (gallery#23) ----------
   Vegard's gallery design («Galleri – kvalitet»): a warm wall, every print in
   its frame and mat, the name in spaced capitals over a menu between two
   rules, labels in small spaced capitals, and a serif that carries the text.
   Everything below is scoped to .g-style-kvalitet and reads only the look's
   custom properties, so another wall, ink or frame follows it. */
.g-style-kvalitet {
  --maxw: 1360px;
  --gutter-left: max(16px, min(5vw, 64px), env(safe-area-inset-left));
  --gutter-right: max(16px, min(5vw, 64px), env(safe-area-inset-right));
  --line: color-mix(in oklab, var(--g-ink) 14%, var(--g-bg));
  --line-2: color-mix(in oklab, var(--g-ink) 27%, var(--g-bg));
  --well: color-mix(in oklab, var(--g-ink) 5%, var(--g-bg));
  --ink-soft: color-mix(in oklab, var(--g-ink) 82%, var(--g-bg));
  --k-space: clamp(3.5em, 9vw, 8.5em);
  -webkit-font-smoothing: antialiased;
}
.g-style-kvalitet::before { display: none; }
.g-style-kvalitet a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.g-style-kvalitet em { font-style: italic; }
/* The small spaced capitals: labels, links that act, the menu. */
.g-k-caps, .g-k-side, .g-k-link, .g-k-kicker,
.g-style-kvalitet .g-nav-list > li > a, .g-style-kvalitet .g-drop > summary,
.g-style-kvalitet .g-menu-button > summary, .g-k-foot-nav a {
  font-family: var(--g-body-font); font-size: 0.72em; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase;
}
.g-k-kicker { display: block; margin: 0 0 1.4em; color: var(--ink-2); letter-spacing: 0.26em; }
/* A link that is the next step: spaced capitals over a rule. */
.g-k-link { display: inline-block; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 0.5em; }
.g-k-link:hover { color: var(--ink-2); border-color: var(--ink-2); }

.g-header--k { display: block; padding-top: clamp(1.5em, 3vw, 2.5em); padding-bottom: 0; text-align: center; }
.g-k-top { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 1em; }
.g-k-side { display: none; color: var(--ink); text-decoration: none; }
.g-k-side:first-child { color: var(--ink-2); justify-self: start; }
.g-k-cart { justify-self: end; }
.g-k-side[aria-current="page"] { border-bottom: 1px solid currentColor; }
.g-style-kvalitet .g-name {
  display: block; font-size: clamp(1.45em, 1em + 2.4vw, 2.5em); line-height: 1.1;
  letter-spacing: 0.28em; text-transform: uppercase; padding-left: 0.28em; overflow-wrap: break-word;
}
.g-k-tagline { margin: 0.5em 0 0; font-family: var(--g-heading); font-style: italic; font-size: 1em; color: var(--ink-2); }
.g-style-kvalitet .g-nav--wide { margin-top: 2em; padding: 1em 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.g-style-kvalitet .g-nav-list { gap: 0.5em 2.5em; align-items: baseline; }
.g-style-kvalitet .g-nav-list > li > a, .g-style-kvalitet .g-drop > summary { color: var(--ink); padding: 0 0 0.3em; border-bottom: 1px solid transparent; box-shadow: none; }
.g-style-kvalitet .g-nav-list > li > a[aria-current="page"], .g-style-kvalitet .g-drop > summary[aria-current="page"] { border-bottom-color: var(--ink); box-shadow: none; }
.g-style-kvalitet .g-drop-panel { background: var(--g-bg); border-color: var(--line); }
.g-style-kvalitet .g-drop-panel a, .g-style-kvalitet .g-drop-head { font-family: var(--g-heading); font-size: 1.1em; font-weight: 400; }
.g-style-kvalitet .g-nav--narrow { margin-top: 1em; padding: 0.7em 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.g-style-kvalitet .g-menu-button > summary { border: 0; padding: 0.4em 0; color: var(--ink); }
.g-style-kvalitet .g-tree a, .g-style-kvalitet .g-tree summary, .g-style-kvalitet .g-tree .g-drop-head { font-family: var(--g-heading); font-size: 1.15em; }
@media (min-width: 48em) {
  .g-k-top { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1em; }
  .g-k-side { display: inline-block; }
  .g-k-brand { max-width: 36em; }
}

.g-style-kvalitet .g-page { padding-top: 0; }
.g-style-kvalitet h1, .g-style-kvalitet h2, .g-style-kvalitet h3 { font-weight: var(--g-heading-weight); text-wrap: balance; }

.g-footer--k { margin-top: clamp(2em, 4vw, 3em); background: none; color: var(--ink); border-top: 1px solid var(--line); }
.g-k-foot {
  max-width: var(--maxw); margin: 0 auto; box-sizing: border-box;
  padding: 3.5em var(--gutter-right) 2.5em var(--gutter-left);
  display: flex; flex-direction: column; align-items: center; gap: 1.5em; text-align: center;
}
.g-k-foot-name {
  font-family: var(--g-heading); font-weight: var(--g-heading-weight); font-size: 1.375em; color: var(--ink); text-decoration: none;
  letter-spacing: 0.28em; text-transform: uppercase; padding-left: 0.28em; overflow-wrap: break-word; max-width: 100%;
}
.g-k-foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5em 2em; }
.g-k-foot-nav a { color: var(--ink); text-decoration: none; }
.g-k-foot .g-langs { justify-content: center; font-size: 0.8em; }
.g-k-foot .g-langs a { color: var(--ink-2); }
.g-k-foot-made { margin: 0; font-size: 0.75em; color: var(--ink-2); }
.g-k-foot-made a { color: inherit; }

/* A print's caption: the title in the heading's italic, edition and price
   under it, against a thin rule. Used by both styles. */
.g-k-cap { display: block; margin-top: 1.2em; padding-left: 0.8em; border-left: 1px solid var(--line-2, var(--line)); text-align: left; }
.g-k-cap-title { display: block; font-family: var(--g-heading); font-style: italic; font-size: 1.25em; line-height: 1.2; overflow-wrap: anywhere; }
.g-k-cap-meta { display: block; margin-top: 0.25em; font-size: 0.75em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* One print hung large (a front page's «hero» section). */
.g-hero-print { padding: 1.5em 0; }
.g-hero-print figure { margin: 0 auto; max-width: 70em; }
.g-hero-print figcaption { display: flex; justify-content: flex-end; }
.g-hero-print .g-k-cap { margin-top: 1.4em; }
.g-style-kvalitet .g-hero-print { padding: clamp(2em, 7vw, 7.5em) 0 var(--k-space); }

.g-k-section { margin: 0 0 var(--k-space); }
.g-k-head { text-align: center; margin-bottom: clamp(2em, 5vw, 4em); }
.g-k-head .g-k-kicker { margin-bottom: 0.9em; }
.g-style-kvalitet .g-h2 { font-size: clamp(1.9em, 1.2em + 2.2vw, 2.9em); line-height: 1.1; margin: 0; }
.g-style-kvalitet .g-k-rowhead .g-h2 { font-size: clamp(1.6em, 1.1em + 1.8vw, 2.4em); }

.g-k-intro { max-width: 44em; margin: 0 auto var(--k-space); padding: clamp(2.5em, 7vw, 6em) 0 0; }
.g-hero-print + .g-k-intro { padding-top: 0; }
.g-k-intro .g-intro-h { font-size: clamp(2.3em, 1.2em + 4vw, 4.25em); line-height: 1.05; margin: 0 0 0.45em; }
.g-k-intro .g-prose { max-width: 34em; margin: 0 auto; font-family: var(--g-heading); font-size: clamp(1.15em, 1em + 0.5vw, 1.3em); line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; }
.g-k-cta { margin: 2em 0 0; }

/* Collections hung as prints: the cover cropped 4:3 inside the frame and mat. */
.g-k-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.8em, 4vw, 3.5em); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15em), 1fr)); }
.g-k-tile { display: flex; flex-direction: column; align-items: center; gap: 1.4em; text-align: center; color: var(--ink); text-decoration: none; }
.g-k-tile .g-frame { width: 100%; }
.g-k-crop { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--well); box-shadow: 0 0 0 1px rgba(0,0,0,0.08); }
.g-k-crop img { display: block; width: 100%; height: 100%; object-fit: cover; box-shadow: none; }
.g-k-tile-title { display: block; font-family: var(--g-heading); font-weight: var(--g-heading-weight); font-size: 1.75em; line-height: 1.1; overflow-wrap: anywhere; }
.g-k-tile-note { display: block; margin-top: -0.6em; max-width: 22em; font-size: 0.8125em; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.g-k-tile:hover .g-k-tile-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* Chosen prints hung in rows of one height: each grows by its own ratio. */
.g-k-hung { --hang: 11em; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 3.5em clamp(1.5em, 4vw, 3.5em); }
/* Grown by the FRAMED print's ratio, not the photo's: the mat is a share of the width,
   and deeper at the bottom, so a portrait's frame is proportionally taller than its photo. */
.g-k-hung > li {
  --R: calc(1 / ((1 - 2 * var(--g-mat-m)) / var(--r) + 2.4 * var(--g-mat-m)));
  flex: var(--R) 1 calc(var(--R) * var(--hang)); min-width: 0;
}
.g-k-hung > li.g-fill { flex: 1000 1 0; }
@media (min-width: 48em) { .g-k-hung { --hang: 16em; } }

/* The catalogue: every photo whole on a square of the wall's shade. */
.g-k-rowhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.8em 1.5em; margin-bottom: clamp(2em, 4vw, 3.5em); padding-bottom: 1.1em; border-bottom: 1px solid var(--line); }
.g-k-rowlink { color: var(--ink); text-decoration: none; }
.g-k-rowlink::after { content: " →"; }
.g-k-squares { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5em clamp(1em, 3vw, 2.75em); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48em) { .g-k-squares { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64em) { .g-k-squares { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.g-k-square { display: block; color: var(--ink); text-decoration: none; }
.g-k-well { position: relative; display: block; aspect-ratio: 1; background: var(--well); }
.g-k-well img {
  position: absolute; inset: clamp(10px, 2vw, 24px); width: calc(100% - 2 * clamp(10px, 2vw, 24px)); height: calc(100% - 2 * clamp(10px, 2vw, 24px));
  object-fit: contain; filter: drop-shadow(0 6px 8px rgba(40,30,20,0.28));
}
.g-k-sq-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.2em 0.6em; margin-top: 0.9em; }
.g-k-sq-title { font-family: var(--g-heading); font-style: italic; font-size: 1.125em; line-height: 1.2; overflow-wrap: anywhere; min-width: 0; }
.g-k-sq-price { font-size: 0.75em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.g-k-square:hover .g-k-sq-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.g-k-morebar { text-align: center; margin: clamp(3em, 6vw, 5em) 0 0; }

/* A page's heading, centred, with its small line above and a serif lead under. */
.g-k-pagehead { max-width: 46em; margin: 0 auto; text-align: center; padding: clamp(2.5em, 8vw, 7em) 0 clamp(2em, 5vw, 4.5em); }
.g-k-pagehead .g-title { font-size: clamp(2.5em, 1.2em + 4.5vw, 4.75em); line-height: 1; margin: 0 0 0.35em; }
.g-k-pagehead .g-prose, .g-k-pagehead .lead { max-width: 34em; margin: 0 auto; font-family: var(--g-heading); font-size: clamp(1.15em, 1em + 0.5vw, 1.3em); line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }
.g-k-count { display: block; margin: 0 0 2.5em; text-align: center; font-size: 0.8125em; color: var(--ink-2); }

/* A collection's tabs (its menu group) and filters (other groups it overlaps). */
.g-k-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5em 2.5em; margin: 0 0 1.75em; }
.g-k-tabs a { font-size: 0.72em; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; padding-bottom: 0.5em; border-bottom: 1px solid transparent; }
.g-k-tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.g-k-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1em; padding: 1em 0; margin-bottom: clamp(2.2em, 5vw, 4em); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.g-k-bar .g-k-count { margin: 0; text-align: right; margin-left: auto; }
.g-k-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; }
.g-k-filters-label { color: var(--ink-2); margin-right: 0.5em; }
.g-k-pill { font-size: 0.8125em; padding: 0.35em 0.9em; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink); text-decoration: none; }
.g-k-pill[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--g-bg); }

/* One artwork: the print, and beside it the choice. */
.g-k-crumbs { display: flex; flex-wrap: wrap; gap: 0.6em; padding: 1.5em 0 0; color: var(--ink-2); }
.g-k-crumbs a { color: var(--ink-2); text-decoration: none; }
.g-k-artwork { padding: clamp(2em, 6vw, 5.5em) 0 var(--k-space); gap: clamp(2.5em, 6vw, 6em); }
/* The print stays in sight while a long description is read beside it. */
@media (min-width: 60em) {
  .g-style-kvalitet .g-k-artwork { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
  .g-k-view { position: sticky; top: 1.5em; }
}
.g-k-print { display: grid; place-items: center; padding: clamp(0.5em, 3vw, 2.5em); }
.g-k-print .g-frame { width: fit-content; max-width: 100%; }
.g-k-print .g-frame img { width: auto; max-width: 100%; max-height: 62vh; }
.g-k-tabs--view { margin: 1.75em 0 0; gap: 0.5em 2em; }
.g-k-tabs--view a { color: var(--ink); }
.g-k-artwork .g-artwork-info { max-width: 28em; width: 100%; justify-self: center; }
.g-k-artwork .g-k-kicker { margin-bottom: 0.9em; }
.g-style-kvalitet .g-artwork-title { font-style: italic; font-size: clamp(2.5em, 1.4em + 3vw, 4em); line-height: 1; margin: 0 0 0.25em; }
.g-style-kvalitet .g-edition { font-family: var(--g-heading); font-size: 1.2em; line-height: 1.5; color: var(--ink-soft); margin: 0 0 1.6em; }
.g-style-kvalitet .g-edition strong { font-weight: inherit; font-style: italic; color: var(--ink); }
.g-style-kvalitet .g-buy fieldset { border-top: 1px solid var(--line); margin: 0 0 1.8em; }
.g-style-kvalitet .g-buy legend { float: left; width: 100%; padding: 1.2em 0 0.4em; margin: 0; font-weight: 400; color: var(--ink-2); }
.g-style-kvalitet .g-variant { clear: both; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 1.1em 0.1em; margin: 0; background: none; box-shadow: none; gap: 1em; }
.g-style-kvalitet .g-variant:has(input:checked) { box-shadow: none; border-color: var(--line); }
.g-style-kvalitet .g-variant input { accent-color: var(--ink); }
.g-style-kvalitet .g-variant-label, .g-style-kvalitet .g-variant-price { font-size: 0.95em; font-weight: 400; color: var(--ink-2); }
.g-style-kvalitet .g-variant:has(input:checked) .g-variant-label, .g-style-kvalitet .g-variant:has(input:checked) .g-variant-price { color: var(--ink); }
.g-buy-price { display: none; }
.g-style-kvalitet .btn { font-size: 0.72em; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; padding: 1.7em 1.2em; border: 0; }
.g-style-kvalitet .btn--outline { border: 1px solid currentColor; }
.g-style-kvalitet .g-buy-btn { width: 100%; }
.g-k-note { text-align: center; margin-top: 1em; }
.g-k-artwork .g-prose { font-family: var(--g-heading); font-size: 1.125em; line-height: 1.6; color: var(--ink-soft); margin-top: 2.5em; }
.g-k-wall .g-room-scene { margin-top: 0; }
.g-k-wall .g-room-cap { font-family: var(--g-heading); font-style: italic; text-align: center; }

/* The other screens: a centred heading, a serif text column, fields drawn as a line. */
.g-style-kvalitet .g-hero { max-width: 46em; margin: 0 auto; text-align: center; padding: clamp(2.5em, 8vw, 7em) 0 clamp(2em, 5vw, 4.5em); }
.g-style-kvalitet .g-hero .g-title { font-size: clamp(2.5em, 1.2em + 4.5vw, 4.75em); line-height: 1; margin: 0; }
.g-k-text { max-width: 38em; margin: 0 auto; padding-top: 0; }
.g-k-text > .g-prose, .g-k-text > p { font-family: var(--g-heading); font-size: clamp(1.1em, 1em + 0.4vw, 1.25em); line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; max-width: none; }
.g-k-text .g-prose h2, .g-k-text .g-prose h3, .g-style-kvalitet .g-h3 { font-family: var(--g-heading); font-weight: var(--g-heading-weight); font-size: 1.75em; line-height: 1.15; margin: 1.6em 0 0.5em; color: var(--ink); }
.g-style-kvalitet .g-facts { background: none; padding: 1.75em 0 0; border-top: 1px solid var(--ink); font-size: 0.875em; line-height: 1.7; }
.g-style-kvalitet .g-facts dt { font-family: var(--g-heading); font-weight: var(--g-heading-weight); font-size: 1.85em; line-height: 1.2; margin-bottom: 0.5em; }
.g-style-kvalitet .g-facts dd { color: var(--ink-2); }
.g-style-kvalitet .g-fact-label { color: var(--ink-2); }
.g-style-kvalitet .g-contact { margin: 0; padding-top: 1.75em; border-top: 1px solid var(--ink); max-width: none; }
.g-style-kvalitet .g-contact .g-h3 { margin-top: 0; font-size: 1.6em; }
@media (min-width: 60em) {
  .g-style-kvalitet .g-k-text:has(.g-contact-grid) { max-width: 65em; }
  .g-style-kvalitet .g-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(3em, 7vw, 7em); align-items: start; margin-top: 2em; }
}
.g-style-kvalitet .form label, .g-style-kvalitet .g-contact label { font-size: 0.72em; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); }
.g-style-kvalitet .g-contact input[type="text"], .g-style-kvalitet .g-contact input[type="email"], .g-style-kvalitet .g-contact input[type="tel"], .g-style-kvalitet .g-contact textarea {
  background: transparent; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; padding: 0.6em 0; font-size: 1em; color: var(--ink);
}
.g-k-search { padding-bottom: clamp(1.5em, 4vw, 3em); max-width: 52em; }
.g-style-kvalitet .g-search { flex-direction: column; align-items: center; gap: 1.5em; margin: 0; }
.g-style-kvalitet .g-search input {
  flex: none; width: 100%; box-sizing: border-box; text-align: center; background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
  font-family: var(--g-heading); font-style: italic; font-size: clamp(1.8em, 1em + 3.4vw, 3.5em); padding: 0.15em 0 0.3em;
}
.g-style-kvalitet .g-search .btn { background: none; color: var(--ink); border-bottom: 1px solid var(--ink); padding: 0 0 0.6em; }
.g-style-kvalitet .g-results { text-align: center; font-size: 0.8125em; margin: 1.5em 0 2.5em; }
/* The terms, numbered in roman as the design sets them. */
.g-k-text { counter-reset: term; }
.g-style-kvalitet .g-term { display: grid; grid-template-columns: 3em minmax(0, 1fr); gap: 0.5em 1em; padding: 1.75em 0; border-top: 1px solid var(--line); }
.g-style-kvalitet .g-term > * { grid-column: 2; }
.g-style-kvalitet .g-term::before { counter-increment: term; content: counter(term, upper-roman); grid-column: 1; grid-row: 1; font-family: var(--g-heading); font-style: italic; font-size: 1.25em; color: var(--ink-2); padding-top: 0.2em; }
.g-style-kvalitet .g-term .g-h3 { margin: 0 0 0.4em; }
.g-style-kvalitet .g-term p { margin: 0; font-family: var(--g-heading); font-size: 1.2em; line-height: 1.6; color: var(--ink-soft); }
.g-style-kvalitet .g-term .g-facts { margin-top: 1em; }
.g-style-kvalitet .g-term--form { display: block; }
.g-style-kvalitet .g-term--form::before { content: none; }
.g-style-kvalitet .g-form-text { background: var(--g-mat); border: 1px solid var(--line); padding: 1.5em 1.75em; font-size: 0.875em; line-height: 1.9; }
/* The cart: framed thumbnails, and the sum and payment on a panel of the wall's shade. */
.g-style-kvalitet .g-cart-lines ul { border-top: 1px solid var(--ink); }
.g-style-kvalitet .g-cart-line { grid-template-columns: 5em minmax(0, 1fr) auto; gap: 1.2em; align-items: center; padding: 1.5em 0; border-color: var(--line); }
.g-style-kvalitet .g-cart-thumb { display: block; border: 3px solid var(--g-frame); background: var(--g-mat); padding: 6px; }
.g-style-kvalitet .g-cart-what > a { font-family: var(--g-heading); font-style: italic; font-weight: 400; font-size: 1.35em; line-height: 1.2; text-decoration: none; }
.g-style-kvalitet .g-cart-pay { background: var(--well); padding: clamp(1.5em, 3vw, 2.25em); }
.g-style-kvalitet .g-cart-pay legend { font-size: 0.72em; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); }
.g-style-kvalitet .g-cart-pay .g-variant { background: var(--g-mat); border: 1px solid var(--line); padding: 0.9em 1em; margin-bottom: 0.5em; }
.g-style-kvalitet .g-sum-total { font-family: var(--g-heading); font-weight: 400; font-size: 1.5em; }
@media (min-width: 60em) { .g-style-kvalitet .g-cart { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(3em, 6vw, 6em); align-items: start; } }
.g-style-kvalitet .g-contact-grid .g-facts { margin: 0; }
/* A print hung large keeps half the mat's share, as the design hangs it: a
   mat is a width in the room, and 9 % of a wall-wide print would be a hand. */
.g-hero-print .g-frame, .g-k-print .g-frame { padding: calc(var(--g-mat-pad) / 2) calc(var(--g-mat-pad) / 2) calc(var(--g-mat-pad-b) / 2); }