:root {
  color-scheme: dark;

  /* raw brand and semantic palettes */
  --opos-color-green-050: #eef8f2;
  --opos-color-green-100: #d8efe1;
  --opos-color-green-200: #afdfc3;
  --opos-color-green-300: #7ec79e;
  --opos-color-green-400: #52ad7c;
  --opos-color-green-500: #40916c;
  --opos-color-green-600: #2d6a4f;
  --opos-color-green-700: #23543f;
  --opos-color-green-800: #193d2e;
  --opos-color-green-900: #10271e;
  --opos-color-red-500: #c0564f;
  --opos-color-red-600: #a9433d;
  --opos-color-amber-500: #c9a227;
  --opos-color-blue-500: #3978a8;
  --opos-color-white: #fff;

  --opos-color-mono-000: #070907;
  --opos-color-mono-025: #0b0e0c;
  --opos-color-mono-050: #121613;
  --opos-color-mono-100: #1a1f1b;
  --opos-color-mono-200: #252c27;
  --opos-color-mono-300: #374039;
  --opos-color-mono-400: #505c54;
  --opos-color-mono-500: #6e7c73;
  --opos-color-mono-600: #91a096;
  --opos-color-mono-700: #b2beb6;
  --opos-color-mono-800: #d0d9d3;
  --opos-color-mono-900: #eaefec;
  --opos-color-mono-1000: #fff;

  --opos-background-canvas: var(--opos-color-mono-025);
  --opos-surface-default: var(--opos-color-mono-050);
  --opos-surface-subtle: var(--opos-color-mono-100);
  --opos-surface-raised: var(--opos-color-mono-100);
  --opos-text-primary: var(--opos-color-mono-900);
  --opos-text-secondary: var(--opos-color-mono-600);
  --opos-text-inverse: var(--opos-color-white);
  --opos-text-accent: var(--opos-color-green-300);
  --opos-border-default: var(--opos-color-mono-200);
  --opos-border-subtle: rgba(234,239,236,.08);
  --opos-border-focus: var(--opos-color-green-500);
  --opos-action-primary: var(--opos-color-green-600);
  --opos-action-primary-hover: var(--opos-color-green-500);
  --opos-status-success: var(--opos-color-green-400);
  --opos-status-warning: var(--opos-color-amber-500);
  --opos-status-danger: var(--opos-color-red-500);
  --opos-status-info: var(--opos-color-blue-500);

  --opos-space-1: 4px;
  --opos-space-2: 8px;
  --opos-space-3: 12px;
  --opos-space-4: 16px;
  --opos-space-5: 20px;
  --opos-space-6: 24px;
  --opos-space-7: 28px;
  --opos-space-8: 32px;
  --opos-space-10: 40px;
  --opos-space-14: 56px;
  --opos-radius-small: 8px;
  --opos-radius-default: 12px;
  --opos-radius-large: 16px;
  --opos-shadow-frame: 0 12px 32px rgba(0,0,0,.24);
  --opos-shadow-popover: 0 18px 48px rgba(0,0,0,.34);

  /* compatibility aliases while components migrate */
  --bg: var(--opos-background-canvas);
  --panel: var(--opos-surface-default);
  --panel-2: var(--opos-surface-subtle);
  --border: var(--opos-border-default);
  --border-soft: var(--opos-border-subtle);
  --text: var(--opos-text-primary);
  --muted: var(--opos-text-secondary);
  --accent: var(--opos-action-primary);
  --accent-hi: var(--opos-action-primary-hover);
  /* Light tint of the accent for text sitting ON dark hero/footer imagery. Kept
     separate from --accent-text because that flips dark in light mode, which
     would disappear against a dark photograph. A store's chosen colour
     overrides this (see accentVars/onDark); the default is the OPOS green. */
  --accent-on-dark: #b8e1c8;
  --accent-text: var(--opos-text-accent);
  --danger: var(--opos-status-danger);
  --danger-text: #e9a09b;
  --danger-border: rgba(192,86,79,.36);
  --warn: var(--opos-status-warning);
  --warn-text: #e6c85a;
  --ok: var(--opos-status-success);
  --ok-text: #9ff0c6;
  --shadow: var(--opos-shadow-popover);
  --topbar-bg: rgba(11,14,12,0.95);
  --hero-overlay: linear-gradient(180deg, rgba(8,11,9,.05) 20%, rgba(8,11,9,.9) 100%);
  --card-overlay: linear-gradient(180deg, rgba(8,11,9,0) 42%, rgba(8,11,9,.88) 100%);
  --radius: var(--opos-radius-default);
}
[data-theme="light"] {
  color-scheme: light;
  --opos-color-mono-000: #fff;
  --opos-color-mono-025: #f8faf8;
  --opos-color-mono-050: #f3f5f3;
  --opos-color-mono-100: #eaefec;
  --opos-color-mono-200: #dde4de;
  --opos-color-mono-300: #ccd6cf;
  --opos-color-mono-400: #aebbb2;
  --opos-color-mono-500: #849289;
  --opos-color-mono-600: #5b6b61;
  --opos-color-mono-700: #3f4f45;
  --opos-color-mono-800: #2b3931;
  --opos-color-mono-900: #1b241f;
  --opos-color-mono-1000: #0b100d;
  --opos-background-canvas: var(--opos-color-mono-050);
  --opos-surface-default: var(--opos-color-mono-000);
  --opos-surface-subtle: var(--opos-color-mono-100);
  --opos-surface-raised: var(--opos-color-mono-000);
  --opos-text-primary: var(--opos-color-mono-900);
  --opos-text-secondary: var(--opos-color-mono-600);
  --opos-text-accent: var(--opos-color-green-700);
  --opos-border-default: var(--opos-color-mono-300);
  --opos-border-subtle: var(--opos-color-mono-200);
  --opos-action-primary-hover: var(--opos-color-green-700);
  --danger: #b04840;
  --danger-text: #a03830;
  --danger-border: #e0b8b4;
  --warn-text: #7a5f0d;
  --ok: #237a53;
  --ok-text: var(--opos-color-green-700);
  --opos-shadow-frame: 0 12px 30px rgba(20,40,30,.1);
  --opos-shadow-popover: 0 18px 44px rgba(20,40,30,.16);
  --shadow: var(--opos-shadow-popover);
  --topbar-bg: rgba(255,255,255,0.94);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Source Sans 3 Variable", "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif;
  min-height: 100vh;
  display: flex; flex-direction: column;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  transition: background .2s, color .2s;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: var(--accent); color: #fff; }
.ph { display: inline-block; font-size: 1.08em; line-height: 1; vertical-align: -.08em; }
:focus-visible { outline: 2px solid var(--opos-border-focus); outline-offset: 2px; box-shadow: none; }
#app :is(h1,h2,h3)[tabindex="-1"]:focus,
#app :is(h1,h2,h3)[tabindex="-1"]:focus-visible { outline: none !important; box-shadow: none !important; }
button:active:not(:disabled), .btn:active:not(:disabled) { transform: scale(.98); }

/* ---------- header ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--topbar-bg); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.topbar-inner {
  max-width: 1380px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  min-height: 60px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; letter-spacing: 3px; font-size: 17px;
  text-transform: uppercase; white-space: nowrap;
}
.brand .mark {
  width: 12px; height: 26px; background: var(--accent-hi);
  transform: skewX(-14deg); border-radius: 2px;
}
.brand em { color: var(--accent-text); font-style: normal; font-weight: 400; letter-spacing: 4px; }
/* Seller storefront brand: an uploaded logo, or the store name as a text
   wordmark in a chosen font. The wordmark drops the OPOS uppercase + wide
   tracking so a custom font reads naturally; the fonts are self-hosted or
   system stacks, so nothing loads cross-origin (CSP-safe). */
.brand-logo { height: 30px; width: auto; max-width: 190px; object-fit: contain; display: block; }
.brand .wordmark { text-transform: none; letter-spacing: normal; font-weight: 700; }
.wordmark-font-serif { font-family: Georgia, "Times New Roman", Times, serif; }
.wordmark-font-grotesk { font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; }
.wordmark-font-slab { font-family: Rockwell, "Roboto Slab", Georgia, serif; }
.wordmark-font-mono { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; }
.wordmark-font-humanist { font-family: Optima, "Gill Sans", "Segoe UI", sans-serif; }
/* admin storefront-settings logo preview box */
.sf-logo-preview { min-width: 90px; min-height: 46px; display: flex; align-items: center; justify-content: center; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); }
.sf-logo-preview img { max-height: 46px; max-width: 180px; object-fit: contain; display: block; }
.searchbox { flex: 1; min-width: 220px; max-width: 620px; display: flex; }
.searchbox select#search-scope {
  border: 1px solid var(--border); border-right: none; background: var(--panel-2); color: var(--muted);
  font-size: 12.5px; padding: 0 8px; border-radius: var(--radius) 0 0 var(--radius);
  outline: none; max-width: 160px; cursor: pointer;
}
.searchbox select#search-scope:focus { border-color: var(--accent-hi); color: var(--text); }
.searchbox input {
  flex: 1; padding: 9px 16px; border-radius: var(--radius) 0 0 var(--radius);
  border: 1px solid var(--border); border-right: none; background: var(--panel); color: var(--text);
  font-size: 13.5px; outline: none; min-width: 0;
}
.searchbox #search-scope:not(.hidden) + input { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.searchbox input:focus { border-color: var(--accent-hi); }
.searchbox button {
  padding: 9px 20px; border-radius: 0 var(--radius) var(--radius) 0;
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  font-size: 13px; font-weight: 600; cursor: pointer; letter-spacing: 0.5px;
}
.searchbox button:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
.nav-links {
  display: flex; gap: 12px 18px; align-items: center; flex-wrap: wrap;
  font-size: 11.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 1.6px; font-weight: 600;
}
.nav-links a { white-space: nowrap; }
.nav-links a:hover { color: var(--text); }
.nav-links a.cta {
  border: 1px solid var(--border); padding: 7px 14px; border-radius: var(--radius);
  color: var(--accent-text);
}
.nav-links a.cta:hover { border-color: var(--accent-hi); color: var(--text); }
.theme-toggle {
  border: 1px solid var(--border); background: var(--panel); color: var(--muted);
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.theme-toggle:hover { border-color: var(--accent-hi); color: var(--text); }
.theme-toggle .ph,
.theme-toggle .ph::before { display: block; font-size: 18px; line-height: 1; vertical-align: 0; }

/* ---------- layout ---------- */
.container { max-width: 1380px; width: 100%; margin: 0 auto; padding: 30px 24px 80px; flex: 1; }
.page-title { font-size: 27px; font-weight: 700; margin: 4px 0 6px; letter-spacing: -0.3px; }
.page-sub { color: var(--muted); font-size: 13.5px; margin-bottom: 26px; }
.section-head {
  display: flex; align-items: baseline; gap: 14px; margin: 42px 0 18px;
  border-bottom: 1px solid var(--border-soft); padding-bottom: 10px;
}
.section-head:first-child { margin-top: 0; }
.section-head h2 {
  margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 2.2px;
  color: var(--accent-text); font-weight: 700;
}
.section-head .count { color: var(--muted); font-size: 12px; }
.section-head .spacer { flex: 1; }
.crumbs { font-size: 12.5px; color: var(--muted); margin-bottom: 16px; letter-spacing: 0.3px; }
.crumbs a { color: var(--accent-text); }
.crumbs a:hover { text-decoration: underline; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  width: fit-content; max-width: 100%;
  padding: 9px 18px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); cursor: pointer; font-size: 13px;
  transition: background .15s, border-color .15s; letter-spacing: 0.3px;
}
.btn:hover { border-color: var(--accent-hi); }
/* --accent-on: readable foreground for the accent fill. Defaults to white;
   a storefront with a light brand colour overrides it to dark. */
.btn.primary { background: var(--accent); border-color: var(--accent); font-weight: 600; color: var(--accent-on, #fff); }
.btn.primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--danger-text); border-color: var(--danger-border); }
.btn.danger:hover { border-color: var(--danger); }
.btn.ok { color: var(--ok); border-color: var(--accent); }
.btn.small { padding: 5px 11px; font-size: 12px; }
.btn:disabled { opacity: .45; cursor: default; }

.badge {
  display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  padding: 2px 8px; border-radius: 3px; font-weight: 700;
  background: var(--opos-surface-subtle); color: var(--opos-text-secondary);
}
.badge.private { background: rgba(192,86,79,.2); color: var(--danger-text); }
.badge.granted { background: rgba(82,183,136,.25); color: var(--ok-text); }
.badge.pending { background: rgba(201,162,39,.2); color: var(--warn-text); }
.badge.rejected { background: rgba(192,86,79,.2); color: var(--danger-text); }
.badge.free { background: rgba(82,183,136,.22); color: var(--ok-text); }
/* ---------- chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; padding: 4px 11px; border-radius: 3px;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
}
a.chip:hover { border-color: var(--accent-hi); }
.chip.driver { background: rgba(45,106,79,.22); border-color: rgba(64,145,108,.5); }
[data-theme="light"] .chip.driver { background: rgba(45,106,79,.12); }
.chip.team { background: rgba(64,120,160,.15); border-color: rgba(64,120,160,.4); }
.chip.number { background: rgba(200,170,60,.12); border-color: rgba(200,170,60,.4); }
.chip.kw { color: var(--muted); }
.chip.mini { font-size: 10px; padding: 2px 7px; background: rgba(5,8,6,.72); border-color: rgba(255,255,255,.16); color: #fff; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }

/* ---------- shared photo controls ---------- */
.pnav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(10,13,11,.75); border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: 20px; width: 42px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: var(--radius); user-select: none;
}
.pnav:hover { border-color: var(--accent-hi); color: #8fe0b7; }
.pnav.prev { left: 20px; } .pnav.next { right: 20px; }
.panel {
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 18px 20px;
}
.panel h3 {
  margin: 0 0 12px; font-size: 11px; text-transform: uppercase;
  letter-spacing: 2px; color: var(--accent-text); font-weight: 700;
}
.meta-table { width: 100%; font-size: 13px; border-collapse: collapse; }
.meta-table td { padding: 5px 0; vertical-align: top; }
.meta-table td:first-child { color: var(--muted); width: 108px; padding-right: 10px; white-space: nowrap; }
.unlock-form { display: flex; gap: 8px; margin-top: 4px; }
.unlock-form input {
  flex: 1; min-width: 0; padding: 10px 12px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
  font-size: 14px; letter-spacing: 2px; text-transform: uppercase; outline: none;
}
.unlock-form input:focus { border-color: var(--accent-hi); }
.unlock-msg { font-size: 13px; margin-top: 10px; }
.unlock-msg.err { color: var(--danger-text); }
.unlock-msg.ok { color: var(--ok); }

/* ---------- terms ---------- */
.prose { max-width: 780px; line-height: 1.7; font-size: 14.5px; }
.prose h2 { font-size: 15px; margin: 28px 0 8px; color: var(--accent-text); text-transform: uppercase; letter-spacing: 1.5px; }
.prose p, .prose li { color: var(--text); opacity: .88; }
.prose a { color: var(--accent-text); text-decoration: underline; }

/* ---------- forms ---------- */
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-row label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.4px; font-weight: 600; }
.form-row input, .form-row select, .form-row textarea {
  padding: 9px 12px; border-radius: var(--radius); border: 1px solid var(--border);
  background-color: var(--panel-2); color: var(--text); font-size: 14px; outline: none;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--accent-hi); }
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.inline-form .form-row { margin-bottom: 0; flex: 1; min-width: 130px; }
.check-list { display: flex; flex-direction: column; gap: 5px; max-height: 180px; overflow-y: auto; padding: 4px 2px; }
.check-list label {
  display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text);
  text-transform: none; letter-spacing: 0; font-weight: 400; cursor: pointer;
}
select.slim, input.slim {
  background-color: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  padding: 5px 8px; border-radius: 4px; font-size: 13px; outline: none;
}
.price-matrix { display: grid; grid-template-columns: auto repeat(2, minmax(80px, 110px)) repeat(2, minmax(64px, 90px)); gap: 6px 10px; align-items: center; font-size: 12.5px; }
.price-matrix .pm-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 700; }
.price-src { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.price-src.folder { color: var(--danger-text); }
.price-src.series { color: var(--accent-text); }

/* ---------- upload ---------- */
.dropzone {
  border: 2px dashed var(--border); border-radius: var(--radius);
  padding: 44px 20px; text-align: center; color: var(--muted); cursor: pointer;
  transition: border-color .15s, background .15s; font-size: 14px;
}
.dropzone .ph { display: block; font-size: 34px; color: var(--accent-text); margin-bottom: 10px; }
.dropzone.drag { border-color: var(--accent-hi); background: rgba(45,106,79,.08); }
.progress { height: 8px; background: var(--panel-2); border-radius: 4px; overflow: hidden; margin: 14px 0 6px; border: 1px solid var(--border-soft); }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-hi)); width: 0%; transition: width .2s; }
.progress-label { font-size: 12px; color: var(--muted); }
.upload-results { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.upload-result {
  display: flex; gap: 12px; align-items: center; font-size: 13px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 10px 12px;
}
.upload-result img { width: 56px; height: 40px; object-fit: cover; border-radius: 3px; }

/* ---------- admin ---------- */
.tabs { display: flex; gap: 4px; margin-bottom: 22px; flex-wrap: wrap; border-bottom: 1px solid var(--border-soft); padding-bottom: 0; }
.tab {
  padding: 10px 15px; cursor: pointer; font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent-text); border-bottom-color: var(--accent-hi); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th {
  text-align: left; padding: 9px 10px; color: var(--muted); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 1.2px; border-bottom: 1px solid var(--border);
}
.admin-table td { padding: 9px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.admin-table tr:hover td { background: rgba(255,255,255,.015); }
/* narrow screens: let wide tables scroll inside their own box instead of stretching the page */
@media (max-width: 700px) {
  .admin-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
.admin-table img.rowthumb { width: 64px; height: 44px; object-fit: cover; border-radius: 3px; display: block; background-size: cover; }
.code-pill {
  font-family: Consolas, monospace; font-size: 12px; background: var(--panel-2);
  border: 1px solid var(--border); padding: 3px 8px; border-radius: 4px; cursor: pointer; white-space: nowrap;
}
.code-pill:hover { border-color: var(--accent-hi); }
.bulkbar {
  position: sticky; top: 62px; z-index: 30; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  background: var(--panel-2); border: 1px solid var(--accent); border-radius: var(--radius);
  padding: 10px 14px; margin-bottom: 14px; font-size: 13px;
}
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px; margin-bottom: 24px; }
.stat-tile { background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 18px; }
.stat-tile .num { font-size: 25px; font-weight: 700; color: var(--accent-text); }
.stat-tile .lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.4px; margin-top: 4px; }
.meta-editor { background: var(--panel-2); border-radius: var(--radius); padding: 14px; margin: 4px 0 8px; }
.meta-editor.dirty { outline: 1px solid var(--warn); }
.kw-packs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.kw-pack {
  font-size: 11px; padding: 3px 10px; border-radius: 999px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--border); color: var(--muted);
}
.kw-pack:hover { border-color: var(--accent-hi); color: var(--text); }

/* drivers & teams chips in the metadata editor */
.dt-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 2px; }
.dt-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; padding: 3px 8px; border-radius: 4px;
  background: var(--opos-surface-subtle); border: 1px solid var(--opos-border-default);
  color: var(--opos-text-primary);
}
.dt-chip.manual { border-color: var(--opos-color-green-500); }
.dt-chip button {
  border: 0; background: none; color: var(--opos-text-secondary); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 2px;
}
.dt-chip button:hover, .dt-chip button:focus-visible { color: var(--opos-status-danger); }
.dt-suggest .dt-team { border-style: dashed; }
.dt-catalogue-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }
.dt-catalogue-field { min-width: 0; padding: 10px; border: 1px solid var(--opos-border-subtle); border-radius: var(--opos-radius-small); background: var(--opos-surface-default); }
.dt-catalogue-field > label { display: block; margin-bottom: 7px; color: var(--opos-text-secondary); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.dt-catalogue-field .dt-chips { min-height: 28px; margin-bottom: 7px; }.dt-catalogue-field .dt-chips .muted { font-size: 12px; }
.dt-catalogue-combobox,.dt-catalogue-combobox input { width: 100%; min-width: 0; }
.catalogue-create-dialog { max-width: 580px; }.catalogue-create-dialog > p { margin: -4px 0 20px; }.catalogue-create-grid { display: grid; grid-template-columns: minmax(100px,.6fr) minmax(0,1.4fr); gap: 12px; }
.save-all {
  position: fixed; bottom: 24px; left: 24px; z-index: 90;
  box-shadow: var(--shadow);
}

/* ---------- misc ---------- */
.empty {
  text-align: center; color: var(--muted); padding: 56px 20px;
  border: 1px dashed var(--border); border-radius: var(--radius); font-size: 14px;
}
.login-box {
  max-width: 400px; margin: 10vh auto; background: var(--panel);
  border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 34px;
}
.login-box h1 { font-size: 16px; margin: 0 0 20px; letter-spacing: 2px; text-transform: uppercase; }
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 100;
  background: var(--panel-2); border: 1px solid var(--border); border-left: 3px solid var(--accent-hi);
  padding: 13px 18px; border-radius: var(--radius); font-size: 13px; max-width: 360px;
  box-shadow: var(--shadow);
}
.spinner {
  display: inline-block; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--accent-hi);
  animation: spin .8s linear infinite; vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* route-level loading: a calm, centred brand beat, not a lone spinner adrift
   in a huge empty page (which reads as broken). */
.page-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; min-height: 52vh; text-align: center;
}
.page-loading-mark {
  width: 34px; height: 34px; border-radius: 7px;
  background: linear-gradient(135deg, var(--opos-color-green-500), var(--opos-color-green-700));
  transform: skewX(-9deg); animation: page-loading-pulse 1.15s ease-in-out infinite;
}
.page-loading-text { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--opos-text-secondary); font-weight: 650; }
@keyframes page-loading-pulse {
  0%, 100% { opacity: .35; transform: skewX(-9deg) scale(.9); }
  50% { opacity: 1; transform: skewX(-9deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .page-loading-mark { animation: none; opacity: .8; } }

.muted { color: var(--muted); }
.hidden { display: none !important; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--border-soft); background: var(--panel); margin-top: auto; }
.footer-inner {
  max-width: 1380px; margin: 0 auto; padding: 36px 24px 30px;
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px;
}
@media (max-width: 760px) { .footer-inner { grid-template-columns: 1fr; gap: 22px; } }
.footer .fbrand { font-weight: 800; letter-spacing: 3px; font-size: 14px; text-transform: uppercase; margin-bottom: 10px; }
.footer .fbrand em { color: var(--accent-text); font-style: normal; font-weight: 400; }
.footer .fblurb { color: var(--muted); font-size: 12.5px; line-height: 1.6; max-width: 380px; }
.footer h4 {
  margin: 0 0 10px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 2px;
  color: var(--muted); font-weight: 700;
}
.footer nav { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--muted); }
.footer nav a:hover { color: var(--accent-text); }
.footer .fbase {
  border-top: 1px solid var(--border-soft); margin-top: 4px;
  padding: 14px 24px; text-align: center; font-size: 11.5px; color: var(--muted);
}

/* ---------- design system v1.1 refinements ---------- */
.topbar-inner { min-height: 68px; }
.brand, .footer .fbrand {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
.searchbox input, .searchbox select, .searchbox button { min-height: 42px; }
.searchbox input { background: var(--opos-surface-default); }
.searchbox button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--opos-space-2);
}
.searchbox button .ph { font-size: 16px; }
.nav-links a {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 8px 0; transition: color 150ms ease;
}
.nav-links a[aria-current="page"] { color: var(--text); }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  border-radius: 2px; background: var(--accent-hi);
}
.nav-links a.cta[aria-current="page"] {
  border-color: var(--accent-hi);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.nav-links a.cta[aria-current="page"]::after { content: none; }
.nav-links .ph { margin: 0; font-size: 16px; }
.theme-toggle { width: 40px; height: 40px; transition: color 150ms ease, border-color 150ms ease, background 150ms ease; }
.container { padding-top: var(--opos-space-8); }
.page-title { font-size: 30px; line-height: 1.2; font-weight: 680; letter-spacing: -.45px; }
.page-sub { font-size: 14px; line-height: 1.5; }
.btn {
  min-height: 40px; gap: var(--opos-space-2); padding: 9px 18px;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 120ms ease;
}
.btn.small { min-height: 36px; padding: 6px 12px; }
.btn .ph { font-size: 16px; }
.panel, .upload-result, .stat-tile, .meta-editor {
  border-radius: var(--opos-radius-default);
}
.admin-table img.rowthumb, .upload-result img { border-radius: var(--opos-radius-small); }
.pnav { width: 44px; min-height: 56px; border-radius: var(--opos-radius-default); }
.pnav .ph { font-size: 24px; }
.panel { padding: var(--opos-space-5); }
.form-row input, .form-row select, .form-row textarea { min-height: 40px; }
.form-row textarea { line-height: 1.45; }
.dropzone { border-radius: var(--opos-radius-large); background: color-mix(in srgb, var(--panel) 72%, transparent); }
.dropzone:hover { border-color: var(--accent-hi); background: rgba(45,106,79,.06); }
.progress, .progress-fill { border-radius: 999px; }
.code-pill {
  font-family: "IBM Plex Mono", Consolas, "Courier New", monospace;
  border-radius: var(--opos-radius-small); font-variant-numeric: tabular-nums;
}
.bulkbar { box-shadow: var(--opos-shadow-frame); }
.stat-tile .num { font-variant-numeric: tabular-nums; }
.empty { border-radius: var(--opos-radius-default); }
.login-box { border-radius: var(--opos-radius-large); box-shadow: var(--opos-shadow-frame); }
.toast { border-radius: var(--opos-radius-default); box-shadow: var(--opos-shadow-popover); }
.footer { background: color-mix(in srgb, var(--panel) 96%, var(--bg)); }

@media (max-width: 1040px) {
  .topbar-inner { gap: 10px 16px; padding-top: 10px; padding-bottom: 10px; }
  .nav-links { margin-left: auto; }
  .searchbox { order: 3; flex-basis: 100%; max-width: none; }
}

@media (max-width: 700px) {
  .topbar-inner { padding-left: 16px; padding-right: 16px; }
  .brand { font-size: 15px; letter-spacing: 2.4px; }
  .brand em { letter-spacing: 3px; }
  .nav-links {
    order: 2; width: 100%; margin-left: 0; flex-wrap: wrap; overflow: visible;
    padding-bottom: 2px;
  }
  .searchbox { order: 3; }
  .container { padding: 24px 16px 64px; }
  .page-title { font-size: 26px; }
  .toast { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}

@media (max-width: 620px) {
  body:not(.admin-body) .nav-links { gap: 8px; width: auto; margin-left: auto; padding: 0; }
  body:not(.admin-body) .nav-links a {
    width: 40px; min-width: 40px; height: 40px; padding: 0;
    border-radius: var(--opos-radius-default);
  }
  body:not(.admin-body) .nav-links a:not(.cta) { border: 1px solid transparent; }
  body:not(.admin-body) .nav-links a:not(.cta):hover { background: var(--opos-surface-subtle); }
  body:not(.admin-body) .nav-links a[aria-current="page"]::after { content: none; }
  body:not(.admin-body) .nav-links a[aria-current="page"] { color: var(--opos-text-accent); background: var(--opos-surface-subtle); }
  body:not(.admin-body) .nav-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

@media (max-width: 430px) {
  .searchbox button { width: 44px; padding-left: 0; padding-right: 0; }
  .searchbox button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- 2026 workspace redesign ---------- */
body:not(.admin-body) .container { max-width: 1440px; }
body:not(.admin-body) .topbar-inner { max-width: 1440px; }
.page-title { font-size: 32px; letter-spacing: -.55px; }
.section-head h2 { font-size: 19px; letter-spacing: -.15px; text-transform: none; color: var(--opos-text-primary); }
.btn { letter-spacing: 0; font-weight: 600; }
.panel { background: var(--opos-surface-raised); border-color: var(--opos-border-default); }
.login-box {
  border-color: var(--opos-border-default); border-top: 3px solid var(--opos-action-primary-hover);
  padding: 40px; box-shadow: none;
}
.login-box h1 { font-size: 28px; line-height: 1.2; letter-spacing: -.35px; text-transform: none; margin-bottom: 12px; }
.empty { background: color-mix(in srgb, var(--opos-surface-default) 55%, transparent); }

/* Staff top bar */
.admin-body { overflow-x: hidden; }
.admin-body .staff-topbar { position: sticky; z-index: 90; }
.admin-body .topbar-inner { max-width: none; flex-wrap: nowrap; padding: 0 20px; min-height: 68px; }
.staff-top-actions { display: flex; align-items: center; gap: 8px; }
.staff-identity {
  color: var(--opos-text-secondary); font-size: 11px; letter-spacing: .11em;
  text-transform: uppercase; margin-right: 8px; white-space: nowrap;
}
.staff-top-link {
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 8px 10px;
  border-radius: var(--opos-radius-small); color: var(--opos-text-secondary); font-size: 12px; font-weight: 600;
}
.staff-top-link:hover { color: var(--opos-text-primary); background: var(--opos-surface-subtle); }
.staff-top-link .ph { font-size: 16px; }
.staff-nav-toggle {
  display: none; width: 40px; height: 40px; padding: 0; align-items: center; justify-content: center;
  border: 1px solid var(--opos-border-default); border-radius: var(--opos-radius-small);
  color: var(--opos-text-primary); background: var(--opos-surface-default); cursor: pointer;
}
.staff-nav-toggle .ph { font-size: 20px; }

/* Staff application shell */
.admin-app { max-width: none; padding: 0; min-height: calc(100vh - 69px); }
.admin-login-app { max-width: 1380px; padding: 32px 24px 80px; }
.staff-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: calc(100vh - 69px); }
.staff-sidebar {
  position: sticky; top: 69px; align-self: start; height: calc(100vh - 69px); overflow-y: auto;
  padding: 24px 16px 32px; background: var(--opos-surface-default);
  border-right: 1px solid var(--opos-border-subtle);
  scrollbar-width: thin; scrollbar-color: var(--opos-color-mono-300) transparent;
}
.staff-sidebar::-webkit-scrollbar { width: 6px; }
.staff-sidebar::-webkit-scrollbar-thumb { background: var(--opos-color-mono-300); border-radius: 6px; }
.staff-sidebar-intro {
  display: flex; flex-direction: column; gap: 2px; padding: 0 8px 18px;
  border-bottom: 1px solid var(--opos-border-subtle); margin-bottom: 16px;
}
.staff-sidebar-intro strong { font-size: 15px; font-weight: 680; color: var(--opos-text-primary); }
.staff-sidebar-intro > span:last-child { color: var(--opos-text-secondary); font-size: 12px; }
.staff-sidebar-eyebrow, .staff-nav-label, .staff-page-eyebrow {
  color: var(--opos-text-secondary); font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.staff-quick-upload { width: 100%; margin-bottom: 20px; }
.staff-nav { display: flex; flex-direction: column; gap: 18px; }
.staff-nav-group { display: flex; flex-direction: column; gap: 3px; }
.staff-nav-label { padding: 0 10px 5px; }
.staff-nav-item {
  position: relative; width: 100%; min-height: 40px; display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border: 0; border-radius: var(--opos-radius-small);
  background: transparent; color: var(--opos-text-secondary); cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 570; text-align: left;
  transition: color 140ms ease, background 140ms ease;
}
.staff-nav-item:hover { color: var(--opos-text-primary); background: var(--opos-surface-subtle); }
.staff-nav-item.active {
  color: var(--opos-text-primary);
  background: color-mix(in srgb, var(--opos-action-primary) 16%, var(--opos-surface-subtle));
}
.staff-nav-item.active::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px;
  background: var(--opos-action-primary-hover); border-radius: 0 3px 3px 0;
}
.staff-nav-icon { width: 20px; display: inline-flex; justify-content: center; color: inherit; }
.staff-nav-icon .ph { font-size: 18px; }
.staff-workspace { min-width: 0; padding: 36px 40px 80px; }
.staff-page-header {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--opos-border-subtle);
}
.staff-page-header h1 {
  margin: 5px 0 6px; font-size: 30px; line-height: 1.15; font-weight: 680; letter-spacing: -.45px;
}
.staff-page-header p { max-width: 680px; margin: 0; color: var(--opos-text-secondary); font-size: 14px; line-height: 1.5; }
.staff-page-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.staff-content { min-width: 0; }
.staff-content-settings { max-width: 760px; }
.settings-layout, .settings-panel { width: 100%; max-width: 760px; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.row-actions .btn.small { min-height: 40px; }
.icon-button {
  width: 40px; min-width: 40px; height: 40px; padding: 0; border: 1px solid transparent;
  border-radius: var(--opos-radius-default); background: transparent; color: var(--opos-text-secondary);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease, transform 120ms ease;
}
.icon-button:hover { color: var(--opos-text-primary); border-color: transparent; background: var(--opos-surface-subtle); }
.icon-button.ghost { background: transparent; }
.icon-button .ph, .icon-button .ph::before { display: block; font-size: 18px; line-height: 1; vertical-align: 0; }
.action-menu { display: inline-flex; }
.action-menu-popover {
  position: fixed; z-index: 240; min-width: 210px; padding: 6px;
  border: 1px solid var(--opos-border-default); border-radius: var(--opos-radius-default);
  background: var(--opos-surface-raised); box-shadow: var(--opos-shadow-popover);
}
.action-menu-item {
  width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: var(--opos-radius-small);
  background: transparent; color: var(--opos-text-primary); cursor: pointer;
  display: flex; align-items: center; gap: 10px; text-align: left; font-size: 13px;
}
.action-menu-item:hover, .action-menu-item:focus-visible { background: var(--opos-surface-subtle); }
.action-menu-item .ph, .action-menu-item .ph::before { display: block; width: 18px; font-size: 18px; line-height: 1; vertical-align: 0; }
.action-menu-item.danger { color: var(--danger-text); border-top: 1px solid var(--opos-border-subtle); border-radius: 0 0 var(--opos-radius-small) var(--opos-radius-small); }
.staff-content > .inline-form:first-child,
.staff-content > form.inline-form:first-child,
.staff-content > .form-row:first-child {
  padding: 16px; margin-bottom: 20px !important; border: 1px solid var(--opos-border-default);
  border-radius: var(--opos-radius-default); background: var(--opos-surface-raised);
}
.staff-content .panel { border-color: var(--opos-border-default); }
.staff-content .panel h3 { color: var(--opos-text-primary); font-size: 13px; letter-spacing: .08em; }
.staff-content .admin-table { width: 100%; background: var(--opos-surface-raised); }
.admin-table thead { display: table-header-group; }
.admin-table tbody { display: table-row-group; }
.admin-table th { background: var(--opos-surface-subtle); }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tr:hover td { background: color-mix(in srgb, var(--opos-surface-subtle) 70%, transparent); }
.staff-content .dropzone { padding: 64px 24px; background: var(--opos-surface-raised); }
.staff-content .dropzone:hover { background: color-mix(in srgb, var(--opos-action-primary) 6%, var(--opos-surface-raised)); }
.staff-content .dropzone:focus-visible { border-color: var(--opos-border-focus); }
.staff-empty { display: flex; flex-direction: column; align-items: center; max-width: 720px; margin: 28px auto; }
.staff-empty .empty-icon {
  width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--opos-radius-default); background: var(--opos-surface-subtle); color: var(--opos-text-accent);
}
.staff-empty .empty-icon .ph { font-size: 28px; }
.staff-empty h2 { margin: 16px 0 6px; color: var(--opos-text-primary); font-size: 19px; }
.staff-empty p { max-width: 480px; margin: 0 0 18px; line-height: 1.5; }
.staff-nav-backdrop { display: none; }
.admin-portal .save-all { left: 272px; }
.admin-portal .bulkbar { top: 84px; }

@media (max-width: 1080px) {
  .staff-workspace { padding: 32px 28px 72px; }
  .staff-identity { display: none; }
}

@media (max-width: 900px) {
  .staff-nav-toggle { display: inline-flex; }
  .staff-shell { grid-template-columns: 1fr; }
  .staff-sidebar {
    position: fixed; z-index: 100; left: 0; top: 69px; bottom: auto; width: min(300px, 86vw); height: calc(100vh - 69px);
    transform: translateX(-102%); transition: transform 170ms ease; box-shadow: var(--opos-shadow-frame);
  }
  .staff-nav-open .staff-sidebar { transform: translateX(0); }
  .staff-nav-backdrop {
    position: fixed; z-index: 99; inset: 69px 0 0; border: 0; padding: 0;
    background: rgba(0,0,0,.48); cursor: default;
  }
  .staff-nav-open .staff-nav-backdrop { display: block; }
  .staff-workspace { padding: 28px 20px 64px; }
  .admin-portal .save-all { left: 20px; }
}

@media (max-width: 700px) {
  .admin-body .topbar-inner { padding: 0 12px; gap: 10px; }
  .staff-top-actions { margin-left: auto; }
  .staff-top-link { width: 40px; padding: 0; justify-content: center; font-size: 0; }
  .staff-top-link .ph { font-size: 18px; }
  .staff-page-header { align-items: flex-start; flex-direction: column; gap: 16px; }
  .staff-page-header h1 { font-size: 26px; }
  .staff-page-actions { width: 100%; flex-wrap: wrap; }
  .staff-workspace { padding: 24px 16px 56px; }
  .staff-content > .inline-form:first-child,
  .staff-content > form.inline-form:first-child,
  .staff-content > .form-row:first-child { padding: 14px; }
  .staff-content .dropzone { padding: 44px 18px; }
}

@media (max-width: 430px) {
  .admin-body .brand em { display: none; }
  .admin-body .brand { font-size: 14px; }
}

/* ---------- design system v1.4 shared components ---------- */
.btn.tertiary {
  border-color: transparent; background: transparent; color: var(--opos-text-secondary);
}
.btn.tertiary:hover { border-color: transparent; background: var(--opos-surface-subtle); color: var(--opos-text-primary); }
.btn .ph, .btn .ph::before { display: block; line-height: 1; vertical-align: 0; }

.table-scroll {
  display: block; width: 100%; max-width: 100%; min-width: 0; overflow: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--opos-border-default); border-radius: var(--opos-radius-default);
  background: var(--opos-surface-raised);
}
.panel > .table-scroll { border-color: var(--opos-border-subtle); border-radius: var(--opos-radius-small); }
.admin-table,
.staff-content .admin-table {
  display: table !important; width: 100%; min-width: 680px; overflow: visible !important;
  border: 0; border-radius: 0; background: transparent; table-layout: auto;
}
.admin-table.photo-data-table { min-width: 1060px; }
.admin-table th {
  height: 44px; padding: 10px 12px; vertical-align: middle; white-space: nowrap;
  background: var(--opos-surface-subtle); color: var(--opos-text-secondary);
}
.admin-table td { min-height: 56px; padding: 11px 12px; vertical-align: middle; }
.admin-table th:first-child, .admin-table td:first-child { padding-left: 14px; }
.admin-table th:last-child, .admin-table td:last-child { padding-right: 14px; }
.table-select { width: 48px; text-align: center !important; }
.table-select input { width: 16px; height: 16px; margin: 0; vertical-align: middle; }
.table-number { text-align: right !important; font-variant-numeric: tabular-nums; }
.table-actions { text-align: right !important; }
.table-cell-media { display: flex; align-items: center; gap: 12px; min-width: 280px; }
.table-cell-media .rowthumb { flex: 0 0 auto; }
.table-cell-primary { min-width: 0; }
.table-cell-primary > strong { display: block; font-size: 13.5px; font-weight: 620; color: var(--opos-text-primary); }
.table-cell-meta { margin-top: 2px; color: var(--opos-text-secondary); font-size: 11.5px; line-height: 1.35; }
.photo-data-table .chip-row { margin: 0; }
.staff-content-photos #photos-list { width: 100%; min-width: 0; overflow: hidden; contain: inline-size; }
.row-actions { min-height: 40px; }
.row-actions .btn.small { min-height: 40px; }

.page-toolbar {
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  padding: 16px; margin-bottom: 20px; border: 1px solid var(--opos-border-default);
  border-radius: var(--opos-radius-default); background: var(--opos-surface-raised);
}
.page-toolbar .form-row { margin-bottom: 0; }
.toolbar-group { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.toolbar-group.grow { flex: 1 1 420px; }
.toolbar-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.toolbar-divider { align-self: stretch; width: 1px; min-height: 40px; background: var(--opos-border-subtle); }
.toolbar-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.toolbar-field label {
  color: var(--opos-text-secondary); font-size: 10px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
}
.toolbar-field input, .toolbar-field select { min-height: 40px; }
.toolbar-field.wide { flex: 1 1 260px; max-width: 320px; }
.toolbar-field.medium { flex: 0 1 190px; min-width: 160px; }
.toolbar-field.compact { flex: 0 1 150px; min-width: 130px; }
.code-control { display: flex; align-items: center; gap: 4px; }
.code-button {
  min-height: 40px; padding: 7px 10px; border: 1px solid transparent;
  border-radius: var(--opos-radius-small); background: var(--opos-surface-subtle);
  color: var(--opos-text-primary); cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  font-family: "IBM Plex Mono", Consolas, "Courier New", monospace; font-size: 12px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.code-button:hover { border-color: var(--opos-border-default); }
.code-button .ph { color: var(--opos-text-secondary); font-size: 16px; }

.content-stack { display: flex; flex-direction: column; gap: 16px; }
.editor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; }
.editor-card { padding: 20px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.panel-heading h3 { margin-bottom: 4px; }
.panel-heading p { margin: 0; max-width: 680px; color: var(--opos-text-secondary); font-size: 12.5px; line-height: 1.45; }
.panel-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.creation-panel { max-width: 840px; margin-top: 18px; }
.form-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.supporting-note { color: var(--opos-text-secondary); font-size: 12px; line-height: 1.45; }
select.slim, input.slim { min-height: 36px; padding: 7px 9px; }

.text-link { color: var(--opos-text-accent); text-decoration: underline; text-underline-offset: 2px; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.pagination-size { display: inline-flex; align-items: center; gap: 7px; }
.trust-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; color: var(--opos-text-secondary); font-size: 12px; line-height: 1.45; }
.trust-note .ph { flex: 0 0 auto; margin-top: 1px; color: var(--opos-text-accent); font-size: 17px; }
.history-chip { background: var(--opos-surface-raised); color: var(--opos-text-secondary); border-color: var(--opos-border-default); }
.history-chip button {
  width: 24px; height: 24px; padding: 0; margin: -4px -7px -4px 0; border: 0; border-radius: 50%;
  background: transparent; color: currentColor; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.history-chip button:hover { background: var(--opos-surface-subtle); color: var(--danger-text); }
.history-chip button .ph { font-size: 13px; }
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important; border: 0 !important;
}

@media (max-width: 900px) {
}

@media (max-width: 760px) {
  .page-toolbar { align-items: stretch; gap: 12px; padding: 14px; }
  .toolbar-divider { display: none; }
  .toolbar-group { width: 100%; }
  .editor-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .toolbar-field.wide, .toolbar-field.medium, .toolbar-field.compact { flex: 1 1 100%; max-width: none; }
  .toolbar-field input, .toolbar-field select { width: 100%; }
  .toolbar-actions { width: 100%; }
}

/* ========================================================================== */
/* Public site v2, editorial, photography-first experience                   */
/* ========================================================================== */

.public-body {
  --public-gutter: clamp(20px, 4vw, 64px);
  --public-max: 1440px;
  --public-display: clamp(48px, 7vw, 112px);
  background: var(--opos-background-canvas);
}
.public-body .skip-link { position: fixed; left: 16px; top: -80px; z-index: 1000; padding: 10px 14px; background: #fff; color: #111; }
.public-body .skip-link:focus { top: 12px; }
.public-main { width: 100%; min-height: 70vh; overflow: clip; }
.public-body .eyebrow {
  display: inline-flex; align-items: center; gap: 9px; color: var(--opos-text-accent);
  font-size: 11px; line-height: 1; font-weight: 750; letter-spacing: .19em; text-transform: uppercase;
}
.public-body .eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.public-body .eyebrow.light { color: var(--accent-on-dark, #b8e1c8); }
.editorial-section { width: min(100%, var(--public-max)); margin-inline: auto; padding-inline: var(--public-gutter); }
.editorial-link { display: inline-flex; align-items: center; gap: 9px; width: fit-content; font-weight: 680; color: var(--text); }
.editorial-link .ph { transition: transform .18s ease; }
.editorial-link:hover .ph { transform: translateX(4px); }

/* Public header */
.public-header {
  position: sticky; top: 0; z-index: 80; width: 100%; background: color-mix(in srgb, var(--opos-background-canvas) 92%, transparent);
  border-bottom: 1px solid var(--opos-border-subtle); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.public-header-inner { height: 76px; display: flex; align-items: center; gap: clamp(24px, 4vw, 64px); padding: 0 var(--public-gutter); margin: auto; max-width: var(--public-max); }
.public-brand { flex: 0 0 auto; font-size: 15px; letter-spacing: .3em; }
.public-brand .mark { width: 20px; height: 38px; }
.public-desktop-nav { display: flex; align-self: stretch; gap: clamp(22px, 2.5vw, 42px); margin-left: auto; }
.public-desktop-nav a { position: relative; display: flex; align-items: center; color: var(--muted); font-size: 14px; font-weight: 600; }
.public-desktop-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--accent); transition: right .18s ease; }
.public-desktop-nav a:hover, .public-desktop-nav a[aria-current="page"] { color: var(--text); }
.public-desktop-nav a[aria-current="page"]::after { right: 0; }
.public-header-actions { display: flex; align-items: center; gap: 8px; }
.header-search-trigger, .client-entry, .header-icon-link, .mobile-menu-toggle {
  min-height: 40px; border: 0; background: transparent; color: var(--text); font: inherit; cursor: pointer;
}
.header-search-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; font-weight: 650; }
.header-search-trigger:hover { color: var(--accent-text); }
.client-entry { display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border: 1px solid var(--border); font-size: 13px; font-weight: 700; }
.client-entry:hover { border-color: var(--accent-hi); color: var(--accent-text); }
.header-icon-link, .mobile-menu-toggle { width: 40px; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; }
.public-header .theme-toggle { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 0; background: transparent; color: var(--text); box-shadow: none; }
.public-header .theme-toggle:hover { border: 0; background: var(--opos-surface-subtle); color: var(--accent-text); }
.public-header .theme-toggle:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: -2px; box-shadow: none; }
.public-header .theme-toggle .ph { display: block; width: 20px; height: 20px; font-size: 20px; line-height: 1; }
.mobile-menu-toggle { display: none; }
.public-search-drawer { position: absolute; inset: 76px 0 auto; padding: 28px var(--public-gutter); background: var(--opos-surface-default); border-bottom: 1px solid var(--border); box-shadow: var(--opos-shadow-popover); }
.public-search-inner { max-width: 1440px; margin: auto; display: grid; grid-template-columns: minmax(220px, .7fr) minmax(480px, 1.5fr) 40px; align-items: center; gap: 32px; }
.search-drawer-copy { display: flex; flex-direction: column; gap: 9px; }
.search-drawer-copy strong { font-size: 20px; line-height: 1.15; }
.public-search-form { display: flex; align-items: stretch; min-width: 0; }
.search-scope-control { position: relative; flex: 0 1 180px; min-width: 132px; }
.search-scope-toggle { width: 100%; height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px; border: 1px solid var(--border); border-right: 0; border-radius: 0; background: var(--opos-surface-subtle); color: var(--text); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; box-shadow: none; }
.search-scope-toggle span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.search-scope-toggle .ph { flex: none; transition: transform .16s ease; }
.search-scope-control.menu-open .search-scope-toggle .ph { transform: rotate(180deg); }
.search-scope-toggle:hover { background: var(--panel-2); }
.search-scope-toggle:focus-visible { position: relative; z-index: 2; outline: 2px solid var(--accent-hi); outline-offset: -2px; box-shadow: none; }
.search-scope-menu { position: absolute; z-index: 12; left: 0; top: calc(100% + 8px); width: max(100%, 220px); padding: 6px; border: 1px solid var(--border); background: var(--opos-surface-default); box-shadow: var(--opos-shadow-popover); }
.search-scope-menu button { width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 0; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.search-scope-menu button:hover, .search-scope-menu button:focus-visible { outline: 0; background: var(--opos-surface-subtle); box-shadow: none; }
.search-scope-menu button[aria-selected="true"] { color: var(--accent-text); font-weight: 700; }
.public-search-form input { flex: 1; min-width: 0; height: 50px; border-radius: 0; border-right: 0; font-size: 16px; box-shadow: none; }
.public-search-form input:focus, .public-search-form input:focus-visible { position: relative; z-index: 2; outline: 2px solid var(--accent-hi); outline-offset: -2px; border-color: var(--border); box-shadow: none; }
.public-search-form .btn { min-height: 50px; border-radius: 0; }
.mobile-nav { padding: 12px var(--public-gutter) 28px; background: var(--opos-surface-default); border-top: 1px solid var(--border-soft); }
.mobile-nav a { display: flex; justify-content: space-between; align-items: center; min-height: 54px; border-bottom: 1px solid var(--border-soft); font-size: 19px; font-weight: 650; }
.mobile-nav .mobile-client-link { justify-content: center; margin-top: 16px; border: 1px solid var(--border); }

/* Homepage */
.home-hero { position: relative; min-height: clamp(680px, calc(100vh - 76px), 940px); display: grid; align-items: end; overflow: hidden; background: #111812 center/cover no-repeat; color: #fff; }
.home-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; animation: hero-reveal .7s ease both; }
.home-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,8,6,.88) 0%, rgba(5,8,6,.48) 48%, rgba(5,8,6,.12) 76%), linear-gradient(0deg, rgba(5,8,6,.72), transparent 55%); }
.home-hero-copy { position: relative; z-index: 2; width: min(870px, 78vw); padding: clamp(90px, 12vh, 150px) var(--public-gutter); margin-left: max(0px, calc(50% - var(--public-max) / 2)); }
.home-hero h1 { margin: 22px 0 24px; max-width: 880px; color: #fff; font-size: var(--public-display); line-height: .84; letter-spacing: -.065em; font-weight: 680; }
.home-hero h1 em { color: var(--accent-on-dark, #b8e1c8); font-weight: 360; }
.home-hero-copy > p { max-width: 660px; margin: 0 0 34px; color: rgba(255,255,255,.78); font-size: clamp(17px, 1.5vw, 22px); line-height: 1.55; }
/* Advanced-customisation content: store headline in the hero + About section */
.store-headline { max-width: 680px; margin: -6px 0 26px; color: #fff; font-size: clamp(19px, 1.8vw, 26px); font-weight: 600; line-height: 1.35; }
.store-about { max-width: var(--public-max); margin: 0 auto; }
.store-about-prose { max-width: 760px; margin: 0 auto; }
.store-about-prose p { margin: 0 0 16px; line-height: 1.65; font-size: 17px; }
.home-hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.light-action { background: #fff !important; border-color: #fff !important; color: #111811 !important; }
.hero-text-action { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.5); background: transparent; color: #fff; font: inherit; font-weight: 680; cursor: pointer; }
.hero-text-action:hover { border-color: #fff; }
.hero-feature-note { position: absolute; z-index: 3; right: max(var(--public-gutter), calc(50% - var(--public-max) / 2 + var(--public-gutter))); bottom: 48px; width: min(300px, 26vw); padding-left: 20px; border-left: 2px solid #8bc8a5; display: flex; flex-direction: column; gap: 4px; }
.hero-feature-note span, .hero-feature-note small { color: rgba(255,255,255,.65); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.hero-feature-note strong { font-size: 19px; }
.hero-scroll-note { position: absolute; right: 18px; top: 50%; writing-mode: vertical-rl; transform: translateY(-50%); color: rgba(255,255,255,.55); font-size: 10px; text-transform: uppercase; letter-spacing: .22em; }
@keyframes hero-reveal { from { transform: scale(1.025); opacity: .45; } to { transform: scale(1); opacity: 1; } }
.home-intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(48px, 9vw, 140px); padding-top: clamp(96px, 12vw, 180px); padding-bottom: clamp(96px, 12vw, 180px); }
.home-intro h2, .section-intro-row h2, .home-final-cta h2 { margin: 18px 0 0; max-width: 790px; font-size: clamp(44px, 5.6vw, 84px); line-height: .98; letter-spacing: -.045em; font-weight: 590; }
.home-intro-copy { padding-top: 30px; }
.home-intro-copy p { max-width: 590px; margin: 0 0 18px; color: var(--muted); font-size: clamp(17px, 1.35vw, 21px); line-height: 1.65; }
.home-intro-copy .editorial-link { margin-top: 22px; }
.home-work { padding-bottom: clamp(96px, 12vw, 180px); }
.section-intro-row { display: grid; grid-template-columns: 1.25fr .75fr; gap: 48px; align-items: end; margin-bottom: clamp(44px, 6vw, 88px); }
.section-intro-row p { max-width: 430px; color: var(--muted); font-size: 17px; line-height: 1.55; }
.gallery-editorial-grid { display: flex; flex-direction: column; gap: clamp(72px, 9vw, 136px); }
.gallery-story { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, .7fr); min-height: 480px; align-items: stretch; }
.gallery-story:nth-child(even) { grid-template-columns: minmax(300px, .7fr) minmax(0, 1.75fr); }
.gallery-story:nth-child(even) .gallery-story-media { order: 2; }
/* The card keeps its wide editorial band, but the cover photograph is shown
   WHOLE inside it rather than sliced to fill it, a portrait cover was losing
   roughly 70% of the frame. The card's own background is the cover's LQIP at
   center/cover, so it blurs up behind the photo and fills the band for free. */
.gallery-story-media { position: relative; min-height: 430px; overflow: hidden; background: var(--panel-2) center/cover no-repeat; }
.gallery-story-media img { width: 100%; height: 100%; object-fit: contain; transition: transform .6s cubic-bezier(.2,.7,.2,1); position: relative; z-index: 1; }
.gallery-story-media::before { content: ''; position: absolute; inset: -24px; background: inherit; background-size: cover; filter: blur(18px) saturate(1.1) brightness(.7); }
.gallery-story:hover .gallery-story-media img { transform: scale(1.025); }
.gallery-story-shade { position: absolute; inset: 0; background: linear-gradient(145deg, transparent 60%, rgba(0,0,0,.35)); }
.gallery-story-index { position: absolute; left: 20px; top: 18px; color: rgba(255,255,255,.8); font-size: 12px; letter-spacing: .16em; }
.gallery-story-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(32px, 5vw, 76px); background: var(--opos-surface-default); border: 1px solid var(--border-soft); }
.gallery-story-copy h3 { margin: 15px 0 18px; font-size: clamp(34px, 3.4vw, 56px); line-height: 1; letter-spacing: -.04em; }
.gallery-story-meta { display: flex; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.gallery-story-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 38px; font-weight: 700; }
.championship-strip { display: grid; grid-template-columns: .4fr 1.6fr; gap: 48px; padding: clamp(64px, 8vw, 110px) calc(max(0px, 50% - 720px) + var(--public-gutter)); background: #132119; color: #fff; }
.championship-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 64px; }
.championship-list div { display: flex; flex-direction: column; gap: 7px; border-top: 1px solid rgba(255,255,255,.22); padding-top: 16px; }
.championship-list strong { font-size: 24px; }
.championship-list span { color: rgba(255,255,255,.6); }
.home-services { padding-top: clamp(96px, 12vw, 180px); padding-bottom: clamp(96px, 12vw, 180px); }
.service-editorial-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.service-editorial-grid article { position: relative; padding: 40px clamp(24px, 3vw, 48px) 46px 0; }
.service-editorial-grid article + article { border-left: 1px solid var(--border); padding-left: clamp(24px, 3vw, 48px); }
.service-number { color: var(--accent-text); font-size: 12px; letter-spacing: .15em; }
.service-editorial-grid h3 { margin: 48px 0 14px; font-size: 30px; letter-spacing: -.025em; }
.service-editorial-grid p { min-height: 98px; color: var(--muted); line-height: 1.65; }
.service-editorial-grid a { display: inline-flex; align-items: center; gap: 8px; font-weight: 680; }
.home-proof { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(60px, 10vw, 160px); padding: clamp(84px, 11vw, 160px) calc(max(0px, 50% - 720px) + var(--public-gutter)); background: #0b100d; color: #fff; }
.proof-quote blockquote { margin: 24px 0 0; max-width: 820px; font-size: clamp(40px, 5vw, 76px); line-height: 1.02; letter-spacing: -.045em; }
.proof-points { display: flex; flex-direction: column; justify-content: center; }
.proof-points div { display: flex; flex-direction: column; gap: 5px; padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.proof-points strong { font-size: 18px; }.proof-points span { color: rgba(255,255,255,.58); }
.home-final-cta { padding-top: clamp(100px, 14vw, 200px); padding-bottom: clamp(100px, 14vw, 200px); text-align: center; }
.home-final-cta .eyebrow { justify-content: center; }.home-final-cta h2 { margin-inline: auto; }.home-final-cta p { margin: 26px auto 34px; max-width: 620px; color: var(--muted); font-size: 18px; }

/* Editorial page headers and gallery */
.editorial-page-header { display: flex; align-items: end; justify-content: space-between; gap: 48px; max-width: var(--public-max); margin: auto; padding: clamp(90px, 10vw, 150px) var(--public-gutter) clamp(56px, 7vw, 100px); }
.editorial-page-copy h1 { margin: 20px 0 18px; font-size: clamp(52px, 7vw, 104px); line-height: .92; letter-spacing: -.055em; }
.editorial-page-intro { max-width: 660px; color: var(--muted); font-size: 18px; line-height: 1.6; }
.editorial-page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 8px; }
.gallery-masthead { position: relative; min-height: clamp(560px, 68vw, 820px); display: flex; align-items: end; color: #fff; overflow: hidden; background: #162019 center/cover no-repeat; }
.gallery-masthead > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.gallery-masthead-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,8,6,.82), rgba(5,8,6,.14) 75%), linear-gradient(0deg, rgba(5,8,6,.76), transparent 52%); }
.gallery-masthead-content { position: relative; z-index: 2; width: min(100%, var(--public-max)); margin: auto; padding: 60px var(--public-gutter); }
.gallery-masthead h1 { margin: 18px 0 14px; max-width: 1000px; font-size: clamp(58px, 8vw, 122px); line-height: .86; letter-spacing: -.065em; }
.gallery-masthead p { color: rgba(255,255,255,.72); font-size: 17px; }
.light-crumbs, .dark-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin-bottom: 50px; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.light-crumbs > *, .dark-crumbs > * { display: inline-flex; align-items: center; }
.light-crumbs > * + *::before, .dark-crumbs > * + *::before { content: "/"; margin: 0 12px; opacity: .45; }
.light-crumbs { color: rgba(255,255,255,.7); }.dark-crumbs { color: rgba(255,255,255,.65); }
.gallery-commerce-bar { display: grid; grid-template-columns: .72fr 1fr minmax(300px,.9fr); align-items: center; gap: 38px; padding: 32px var(--public-gutter); max-width: var(--public-max); margin: auto; border-bottom: 1px solid var(--border); }
.gallery-commerce-bar > div:first-child { display: flex; flex-direction: column; gap: 8px; }.gallery-commerce-bar strong { font-size: 20px; }
.gallery-commerce-bar > p { max-width: 600px; margin: 0; color: var(--muted); line-height: 1.55; }
.gallery-commerce-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.licence-availability { display: grid; gap: 8px; width: 100%; }.licence-availability-row { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--border); }.licence-availability-row > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }.licence-availability-row strong { font-size: 13px; }.licence-availability-row span { color: var(--muted); font-size: 12px; }.photo-licence-link { display: inline-flex; margin-top: 18px; }
.collection-section, .gallery-photo-section { padding-top: clamp(80px, 10vw, 150px); padding-bottom: clamp(80px, 10vw, 150px); }
.gallery-editorial-grid.compact { gap: 60px; }.gallery-editorial-grid.compact .gallery-story { min-height: 400px; }
.photo-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 38px; }
.photo-section-heading h2 { margin: 12px 0 0; font-size: clamp(38px, 4vw, 62px); letter-spacing: -.035em; }.photo-section-heading h2 a:hover { color: var(--accent-text); }
.gallery-page-controls { display: flex; align-items: center; gap: 18px; color: var(--muted); font-size: 13px; }.gallery-page-controls label { display: flex; align-items: center; gap: 8px; }
.portfolio-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(30px, 3vw, 48px) clamp(16px, 1.8vw, 28px); align-items: start; }
/* Masonry. Every card keeps its own shape, so a row of three sized to its
   tallest photo leaves a crater under the other two. Instead the wall is ruled
   into 4px rows and JS spans each card across as many as its own height needs,
   letting a portrait sit beside roughly four landscapes or two portraits.
   Only applied once JS has measured (.is-masonry): without it, grid-auto-rows
   would collapse every card to 4px. The row gap moves onto the card as a
   margin so the 4px tracks are not prised apart by it, and so it still spaces
   the cards if the masonry pass never runs. */
.portfolio-wall.is-masonry { grid-auto-rows: 4px; row-gap: 0; }
.portfolio-wall.is-masonry > * { margin-bottom: clamp(30px, 3vw, 48px); }
/* The renders that carry the corner credit alone rather than the diagonal
   watermark: no drag-off, and no iOS long-press "Save Image" sheet. The
   catalogue's own previews/thumbs are deliberately left alone, they are
   watermarked, so saving one costs nothing. Matches the src attribute, which is
   present even on the srcset'd banners. See UNWATERMARKED_MEDIA in app.js. */
img[src*="/media/banner/"], img[src*="/media/cover/"], img[src*="/media/profile/"] {
  -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none;
}
.portfolio-photo { display: block; min-width: 0; }
.portfolio-photo-media { position: relative; aspect-ratio: var(--shot-ratio, 3 / 2); overflow: hidden; background: var(--panel-2) center/cover no-repeat; }
.portfolio-photo-media img { width: 100%; height: 100%; object-fit: contain; transition: transform .45s ease; }
.portfolio-photo:hover .portfolio-photo-media img { transform: scale(1.015); }
.portfolio-photo-arrow { position: absolute; right: 10px; top: 10px; width: 38px; height: 38px; display: grid; place-items: center; background: rgba(8,12,9,.76); color: #fff; opacity: 0; transform: translateY(4px); transition: .18s; }
.portfolio-photo:hover .portfolio-photo-arrow, .portfolio-photo:focus-visible .portfolio-photo-arrow { opacity: 1; transform: none; }
.portfolio-photo-tags { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.portfolio-photo-tags .chip { color: #fff; border: 0; background: rgba(8,12,9,.8); backdrop-filter: none; }
.portfolio-photo-caption { display: flex; justify-content: space-between; align-items: start; gap: 18px; padding-top: 13px; }
.portfolio-photo-caption > span:first-child { display: flex; flex-direction: column; min-width: 0; }.portfolio-photo-caption strong { font-size: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.portfolio-photo-caption small { color: var(--muted); }
.portfolio-photo-price { flex: none; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.pagination { margin-top: 48px; justify-content: center; }

/* Search and directories */
.search-results-hero, .directory-hero, .profile-hero, .team-hero, .partners-hero, .terms-hero, .downloads-hero, .checkout-hero {
  position: relative; max-width: none; width: 100%; padding: clamp(84px, 10vw, 150px) var(--public-gutter); background: #101713; color: #fff;
}
/* Children sit on a centred 1440px rail. The left margin is computed rather
   than auto so children NARROWER than the rail (paragraphs, forms, chip rows)
   align with the rail's left edge instead of drifting towards the middle. */
.search-results-hero > *, .directory-hero > *, .profile-hero > *, .team-hero > *, .partners-hero > *, .terms-hero > *, .downloads-hero > *, .checkout-hero > * { position: relative; z-index: 1; max-width: 1440px; margin-left: max(0px, calc(50% - 720px + var(--public-gutter))); margin-right: auto; }
.search-results-hero h1, .directory-hero h1, .team-hero h1, .partners-hero h1, .terms-hero h1, .downloads-hero h1, .checkout-hero h1 { margin-top: 22px; margin-bottom: 22px; font-size: clamp(56px, 8vw, 118px); line-height: .98; letter-spacing: -.06em; }
.search-results-hero p, .directory-hero > p, .team-hero > p, .partners-hero > p, .terms-hero > p, .downloads-hero > p, .checkout-hero > p { max-width: 680px; color: rgba(255,255,255,.68); font-size: 19px; line-height: 1.6; }
.search-results-hero .hero-text-action { margin-top: 20px; }
.search-results-body, .directory-body, .profile-body, .team-editorial-list, .partners-editorial-grid, .downloads-body { padding-top: clamp(64px, 8vw, 120px); padding-bottom: clamp(90px, 11vw, 160px); }
.search-filter-dock { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 52px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.search-filter-fields, .search-filter-actions { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }.search-filter-fields label { display: flex; flex-direction: column; gap: 7px; }.search-filter-fields label > span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.directory-filter, .profile-filter { display: flex; flex-direction: column; gap: 8px; max-width: 260px; margin: 42px auto 0 0; color: rgba(255,255,255,.65); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.directory-filter select, .profile-filter select { background-color: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.28); }
.directory-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin: 0 0 34px; }.directory-section-heading h2 { margin: 12px 0 0; font-size: clamp(40px, 5vw, 70px); letter-spacing: -.04em; }.directory-section-heading > span { color: var(--muted); }
.directory-section-heading.teams-heading { margin-top: 100px; }
.roster-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.roster-card { display: grid; grid-template-columns: 118px minmax(0, 1fr) 40px; align-items: center; min-height: 144px; padding: 12px 18px 12px 0; border-bottom: 1px solid var(--border); transition: background .18s; }
.roster-card:nth-child(odd) { border-right: 1px solid var(--border); padding-right: 32px; }.roster-card:nth-child(even) { padding-left: 32px; }
.roster-card:hover { background: var(--opos-surface-subtle); }.roster-number { font-size: 46px; line-height: 1; font-weight: 760; color: var(--accent-text); font-variant-numeric: tabular-nums; }.roster-monogram { font-size: 24px; color: var(--accent-text); font-weight: 740; letter-spacing: .06em; }
.roster-info { display: flex; flex-direction: column; gap: 5px; }.roster-info strong { font-size: 20px; }.roster-info small { color: var(--muted); }.roster-arrow { justify-self: end; font-size: 20px; }

/* Profiles and packages */
.profile-hero { min-height: 600px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.profile-hero-mark { position: absolute !important; z-index: 0 !important; right: 2vw; bottom: -9vw; color: rgba(255,255,255,.045); font-size: clamp(300px, 45vw, 720px); line-height: .8; font-weight: 820; letter-spacing: -.08em; }
.profile-hero-copy { position: relative; z-index: 1; }.profile-hero-copy h1 { max-width: 1050px; margin: 20px 0 14px; font-size: clamp(64px, 9vw, 130px); line-height: .86; letter-spacing: -.065em; }.profile-hero-copy > p { color: rgba(255,255,255,.66); font-size: 19px; }
.profile-facts { display: flex; gap: 48px; margin-top: 38px; }.profile-facts span { display: flex; align-items: baseline; gap: 9px; color: rgba(255,255,255,.56); }.profile-facts strong { color: #fff; font-size: 38px; }
.package-section-heading { margin: 110px 0 36px; max-width: 720px; }.package-section-heading h2 { margin: 14px 0; font-size: clamp(40px, 5vw, 68px); letter-spacing: -.04em; }.package-section-heading p, .package-note { color: var(--muted); }
.package-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }.package-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 310px; padding: 30px; border: 1px solid var(--border); background: var(--opos-surface-default); color: var(--text); text-align: left; cursor: pointer; transition: transform .18s, border-color .18s; }.package-card:hover { transform: translateY(-3px); border-color: var(--accent-hi); }.package-card strong { margin: 34px 0 8px; font-size: 27px; }.package-card > span:not(.eyebrow) { color: var(--muted); }.package-card b { margin-top: auto; font-size: 38px; }.package-card small { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 700; }
.package-note { margin: 18px 0 100px; }.package-note a { color: var(--text); text-decoration: underline; }
.profile-gallery-section + .profile-gallery-section { margin-top: 110px; }

/* Immersive photo detail */
.photo-detail-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 29vw); min-height: calc(100vh - 76px); background: #000; color: #fff; }
.photo-stage { position: sticky; top: 76px; height: calc(100vh - 76px); min-width: 0; display: flex; flex-direction: column; padding: 12px 14px 10px; background: #000; }.photo-stage-crumbs { flex: none; margin: 0 0 8px; min-height: 28px; }
.photo-stage-frame { position: relative; flex: 1; min-width: 0; min-height: 0; background: #000; overflow: hidden; }.photo-stage-frame > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain !important; object-position: center; }
.photo-stage-caption { flex: none; display: flex; justify-content: space-between; gap: 18px; min-height: 26px; padding-top: 9px; color: rgba(255,255,255,.48); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.photo-stage .pnav { width: 44px; height: 44px; border: 0; border-radius: 0; background: rgba(0,0,0,.52); color: rgba(255,255,255,.84); box-shadow: none; }.photo-stage .pnav.prev { left: 8px; }.photo-stage .pnav.next { right: 8px; }.photo-stage .pnav:hover { background: rgba(0,0,0,.82); color: #fff; }.photo-stage .pnav:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.photo-commerce-panel { position: relative; z-index: 2; background: var(--opos-background-canvas); color: var(--text); padding: 44px clamp(28px, 3.2vw, 54px); overflow-y: auto; }
.photo-commerce-heading h1 { margin: 15px 0 10px; font-size: clamp(38px, 3.4vw, 56px); line-height: .98; letter-spacing: -.045em; }.photo-commerce-heading p { color: var(--muted); }
.photo-subjects, .photo-purchase-card, .photo-access-card, .photo-detail-meta, .photo-keywords { padding: 28px 0; border-bottom: 1px solid var(--border); }.photo-panel-label { display: block; margin-bottom: 14px; color: var(--muted); font-size: 10px; font-weight: 720; letter-spacing: .15em; text-transform: uppercase; }
.photo-purchase-card h2 { margin: 0 0 12px; font-size: 28px; }.photo-purchase-card p, .photo-access-card p { color: var(--muted); line-height: 1.55; }.photo-price-line { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }.photo-price-line > span { font-size: 48px; line-height: 1; font-weight: 700; }.photo-price-line small { color: var(--muted); line-height: 1.35; }.photo-licence-note { font-size: 12px; }.photo-access-card .unlock-form { display: grid; grid-template-columns: minmax(0,1fr) auto; }.photo-access-card .unlock-form input { border-radius: 0; }

/* Team, partners, terms, access, downloads */
.team-editorial-card { display: grid; grid-template-columns: 1.15fr .85fr; min-height: 580px; margin-bottom: clamp(72px, 10vw, 150px); }.team-editorial-card.reverse { grid-template-columns: .85fr 1.15fr; }.team-editorial-card.reverse .team-portrait-wrap { order: 2; }
.team-portrait-wrap { position: relative; min-height: 540px; background: var(--panel-2); overflow: hidden; }.team-portrait-wrap img { width: 100%; height: 100%; object-fit: cover; }.team-portrait-wrap > span { position: absolute; left: 18px; top: 16px; color: rgba(255,255,255,.8); letter-spacing: .16em; }.team-portrait-placeholder { width: 100%; height: 100%; display: grid; place-items: center; background: #17251c; color: var(--accent-on-dark, #b8e1c8); font-size: 110px; font-weight: 760; }
.team-member-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(36px, 6vw, 90px); background: var(--opos-surface-default); border: 1px solid var(--border-soft); }.team-member-copy h2 { margin: 18px 0; font-size: clamp(44px, 5vw, 76px); line-height: 1; letter-spacing: -.045em; }.team-member-copy p { color: var(--muted); font-size: 17px; line-height: 1.7; }.team-member-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 28px; }.team-member-links > a:not(.editorial-link) { color: var(--muted); font-size: 13px; }
.partners-hero { background: var(--opos-background-canvas); color: var(--text); border-bottom: 1px solid var(--border); }
.partners-hero > p { color: var(--muted); }
.partners-editorial-grid { display: block; max-width: var(--public-max); margin: auto; background: transparent; padding-inline: var(--public-gutter); }
.partner-story { position: relative; min-height: 260px; display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: clamp(34px, 6vw, 86px); padding: 34px 56px 34px 0; border-top: 1px solid var(--border); background: transparent; }
.partner-story:last-child { border-bottom: 1px solid var(--border); }
.partner-index { position: absolute; right: 4px; top: 36px; color: var(--muted); font-size: 11px; letter-spacing: .13em; }
.partner-logo-stage { width: 220px; aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 28px; border: 1px solid var(--border-soft); background: #fff; }
.partner-logo-stage img { width: 100%; height: 100%; max-width: 160px; max-height: 112px; object-fit: contain; }
.partner-logo-stage > span { color: #173a29; font-size: 52px; font-weight: 760; letter-spacing: .08em; }
.partner-story-copy { max-width: 720px; padding: 0; }.partner-story-copy h2 { margin: 12px 0 8px; font-size: clamp(28px, 3vw, 40px); }.partner-story-copy p { max-width: 620px; margin: 0 0 20px; color: var(--muted); line-height: 1.6; }
.partner-cta { padding-top: 100px; padding-bottom: 130px; border-top: 0; }.partner-cta h2 { max-width: 880px; margin: 16px 0 28px; font-size: clamp(42px, 5vw, 72px); line-height: 1; letter-spacing: -.045em; }
.terms-layout { display: grid; grid-template-columns: minmax(260px,.55fr) minmax(0,1.2fr); gap: clamp(60px, 10vw, 160px); padding-top: 100px; padding-bottom: 150px; }.terms-summary { position: sticky; top: 120px; align-self: start; }.terms-summary h2 { margin: 16px 0 28px; font-size: 36px; line-height: 1.05; }.terms-summary nav { display: flex; flex-direction: column; margin-bottom: 32px; border-top: 1px solid var(--border); }.terms-summary nav a { padding: 13px 0; border-bottom: 1px solid var(--border); color: var(--muted); }.terms-summary nav a:hover { color: var(--text); }.terms-prose { max-width: 780px; }.terms-prose h2 { scroll-margin-top: 110px; margin-top: 70px; font-size: clamp(30px,3vw,44px); letter-spacing: -.025em; }.terms-prose h2:first-of-type { margin-top: 16px; }.terms-prose p, .terms-prose li { font-size: 17px; line-height: 1.75; color: var(--muted); }
.access-layout { min-height: calc(100vh - 76px); display: grid; grid-template-columns: 1.1fr .9fr; padding: 0; max-width: none; }.access-story { display: flex; flex-direction: column; justify-content: center; padding: clamp(70px,10vw,150px) var(--public-gutter); background: #101713; color: #fff; }.access-story h1 { margin: 20px 0; font-size: clamp(58px,7vw,104px); line-height: .98; letter-spacing: -.06em; }.access-story > p { max-width: 560px; color: rgba(255,255,255,.65); font-size: 18px; line-height: 1.65; }.access-points { display: flex; flex-direction: column; gap: 13px; margin-top: 44px; color: rgba(255,255,255,.7); }.access-points span { display: flex; align-items: flex-start; gap: 10px; }.access-points .ph { margin-top: 3px; flex: none; }.access-divider { border-top: 1px solid var(--opos-border-default); margin: 36px 0 28px; }#register-block h2 { font-size: clamp(30px, 3vw, 42px); }.access-form-panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(50px,9vw,130px); }.access-form-panel h2 { margin: 18px 0 10px; font-size: clamp(38px,4vw,58px); line-height: 1; }.access-form-panel > p, .access-form-panel > small { color: var(--muted); }.access-form-panel form { margin: 32px 0 24px; }.access-form-panel #login-code { min-height: 54px; font-size: 18px; letter-spacing: .16em; text-transform: uppercase; }
.download-list { border-top: 1px solid var(--border); }.download-item { display: grid; grid-template-columns: 150px minmax(0,1fr) auto; align-items: center; gap: 30px; padding: 24px 0; border-bottom: 1px solid var(--border); }.download-preview { aspect-ratio: 3/2; display: grid; place-items: center; overflow: hidden; background: var(--panel-2); font-size: 28px; }.download-preview img { width: 100%; height: 100%; object-fit: contain; }.download-copy h2 { margin: 7px 0 4px; font-size: 24px; }.download-copy small, .download-expired { color: var(--muted); }

/* Global hub, a client's lightboxes + downloads across every store */
.hub-store-chip { display: inline-block; padding: 2px 9px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; color: var(--muted); }
.hub-lightbox { padding: 20px 0; border-bottom: 1px solid var(--border); }
.hub-lightbox-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.hub-lightbox-head h3 { margin: 0 0 3px; font-size: 20px; }.hub-lightbox-head small { color: var(--muted); }
.hub-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }
.hub-strip-item { width: 92px; aspect-ratio: 3/2; overflow: hidden; background: var(--panel-2); border-radius: 6px; display: block; }
.hub-strip-item img { width: 100%; height: 100%; object-fit: cover; }
.hub-strip-more { color: var(--muted); font-size: 13px; padding: 0 6px; }

/* Checkout */
.checkout-steps { display: flex; gap: 28px; margin-top: 46px; color: rgba(255,255,255,.35); font-size: 12px; text-transform: uppercase; letter-spacing: .13em; }.checkout-steps .active { color: var(--accent-on-dark, #b8e1c8); }
.checkout-layout { display: grid; grid-template-columns: minmax(300px,.65fr) minmax(0,1fr); gap: clamp(40px,7vw,100px); align-items: start; padding-top: clamp(70px,9vw,130px); padding-bottom: clamp(90px,11vw,160px); }
.checkout-summary-card { position: sticky; top: 110px; padding: clamp(28px,4vw,48px); background: #132119; color: #fff; }.checkout-summary-card h2 { margin: 16px 0 38px; font-size: clamp(32px,3vw,46px); line-height: 1.05; }.checkout-summary-count { display: flex; align-items: center; gap: 18px; padding: 28px 0; border-top: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); }.checkout-summary-count strong { font-size: 60px; line-height: 1; }.checkout-summary-count span { color: rgba(255,255,255,.58); }.checkout-summary-card ul { list-style: none; padding: 24px 0 0; margin: 0; }.checkout-summary-card li { display: flex; gap: 9px; margin: 11px 0; color: rgba(255,255,255,.68); }.checkout-form-card { padding: clamp(28px,4vw,52px); border: 1px solid var(--border); background: var(--opos-surface-default); }.checkout-form-card > h2 { margin: 16px 0 9px; font-size: clamp(38px,4vw,58px); letter-spacing: -.04em; }.checkout-form-card > p { margin-bottom: 34px; color: var(--muted); }.checkout-form-card .form-row { margin-bottom: 22px; }.checkout-form-card input, .checkout-form-card select { min-height: 40px; }.form-help { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; }.form-help a { color: var(--text); text-decoration: underline; }.checkout-total-table { margin: 24px 0; border-top: 1px solid var(--border); }.checkout-total-table tr:last-child td { padding-top: 20px; }.checkout-form-card .trust-note { margin-top: 24px; }
.empty-page { min-height: 70vh; }
.checkout-success-wrap { padding-top: 80px; padding-bottom: 120px; }
.checkout-success-wrap .checkout-form-card { max-width: 760px; }

/* Public empty states */
.public-empty { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 320px; padding: 48px; border: 1px solid var(--border); background: var(--opos-surface-default); }.public-empty h1, .public-empty h2 { max-width: 720px; margin: 16px 0; font-size: clamp(38px,5vw,70px); line-height: 1; letter-spacing: -.04em; }.public-empty p { color: var(--muted); font-size: 17px; }.public-empty .btn { margin-top: 18px; }

/* Public footer */
.public-footer { margin-top: auto; padding: clamp(72px,9vw,130px) var(--public-gutter) 26px; background: #080b09; color: #fff; }
.public-footer-main { max-width: calc(var(--public-max) - var(--public-gutter) * 2); margin: auto; display: grid; grid-template-columns: 1.7fr .55fr .55fr; gap: clamp(48px,8vw,130px); }
.footer-brand { color: #fff; }.footer-statement p { max-width: 590px; margin: 30px 0; color: rgba(255,255,255,.58); font-size: 18px; line-height: 1.65; }.footer-contact-link { display: inline-flex; align-items: center; gap: 9px; color: var(--accent-on-dark, #b8e1c8); font-weight: 700; }
.footer-label { display: block; margin-bottom: 20px; color: rgba(255,255,255,.62); font-size: 10px; text-transform: uppercase; letter-spacing: .17em; }.footer-nav-group nav { display: flex; flex-direction: column; gap: 14px; }.footer-nav-group a { color: rgba(255,255,255,.7); }.footer-nav-group a:hover { color: #fff; }
.public-footer-base { max-width: calc(var(--public-max) - var(--public-gutter) * 2); margin: 90px auto 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; gap: 30px; color: rgba(255,255,255,.6); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }

/* Responsive public layouts */
@media (max-width: 1120px) {
  .public-desktop-nav { gap: 22px; }.public-desktop-nav a { font-size: 13px; }.header-search-trigger span { display: none; }
  .gallery-commerce-bar { grid-template-columns: .8fr 1.2fr; }.gallery-commerce-bar > .licence-availability,.gallery-commerce-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .photo-detail-shell { grid-template-columns: minmax(0,1fr) 380px; }
}
@media (max-width: 900px) {
  .public-header-inner { height: 68px; }.public-desktop-nav, .client-entry { display: none; }.mobile-menu-toggle { display: inline-flex; }.public-header-actions { margin-left: auto; }.public-search-drawer { top: 68px; }.public-search-inner { grid-template-columns: 1fr 40px; }.search-drawer-copy { grid-column: 1 / -1; }.public-search-form { grid-column: 1; }
  .home-hero { min-height: 740px; }.home-hero-copy { width: 100%; padding-bottom: 150px; }.hero-feature-note { left: var(--public-gutter); right: auto; bottom: 48px; width: 72%; }.hero-scroll-note { display: none; }
  .home-intro, .section-intro-row, .home-proof, .championship-strip { grid-template-columns: 1fr; }.home-intro-copy { padding-top: 0; }.section-intro-row { align-items: start; }.championship-list { grid-template-columns: 1fr 1fr; }.service-editorial-grid { grid-template-columns: 1fr; }.service-editorial-grid article, .service-editorial-grid article + article { padding: 36px 0; border-left: 0; border-bottom: 1px solid var(--border); }.service-editorial-grid p { min-height: 0; }
  .gallery-story, .gallery-story:nth-child(even) { grid-template-columns: 1fr; }.gallery-story:nth-child(even) .gallery-story-media { order: 0; }.gallery-story-copy { min-height: 330px; }
  .portfolio-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo-detail-shell { grid-template-columns: 1fr; }.photo-stage { position: relative; top: auto; height: calc(100svh - 68px); min-height: 620px; }.photo-commerce-panel { padding: 60px var(--public-gutter) 90px; }
  .team-editorial-card, .team-editorial-card.reverse { grid-template-columns: 1fr; }.team-editorial-card.reverse .team-portrait-wrap { order: 0; }.team-portrait-wrap { min-height: 620px; }
  .access-layout { grid-template-columns: 1fr; }.access-story { min-height: 620px; }.checkout-layout, .terms-layout { grid-template-columns: 1fr; }.checkout-summary-card, .terms-summary { position: static; }.terms-summary nav { display: grid; grid-template-columns: 1fr 1fr; }
  .public-footer-main { grid-template-columns: 1fr 1fr; }.footer-statement { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .public-body { --public-gutter: 20px; }.public-header-inner { position: relative; gap: 0; }.public-brand { font-size: 11px; letter-spacing: .19em; }.public-brand .mark { width: 15px; height: 31px; }.public-header-actions { display: contents; }.header-search-trigger, .public-header .theme-toggle, .mobile-menu-toggle { position: absolute; top: 14px; }.header-search-trigger { right: 92px; width: 40px; padding: 0; justify-content: center; }.public-header .theme-toggle { right: 52px; }.mobile-menu-toggle { right: 12px; }.header-icon-link { display: none !important; }
  .public-search-inner { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }.public-search-inner .icon-button { position: absolute; right: 14px; top: 14px; }.public-search-form { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }.search-scope-control { width: 138px; min-width: 0; }.public-search-form input { width: 100%; border-right: 0; }.public-search-form .btn { justify-content: center; padding-inline: 15px; }
  .home-hero { min-height: calc(100svh - 68px); }.home-hero-overlay { background: linear-gradient(0deg, rgba(5,8,6,.92), rgba(5,8,6,.08) 82%); }.home-hero-copy { padding-top: 110px; padding-bottom: 180px; }.home-hero h1 { font-size: clamp(54px,17vw,80px); }.home-hero-copy > p { font-size: 16px; }.home-hero-actions { align-items: flex-start; flex-direction: column; }.hero-feature-note { bottom: 38px; width: calc(100% - 40px); }
  .home-intro, .home-work, .home-services { padding-top: 86px; padding-bottom: 86px; }.home-intro h2, .section-intro-row h2, .home-final-cta h2 { font-size: 44px; }.championship-list { grid-template-columns: 1fr; }.proof-quote blockquote { font-size: 40px; }
  .gallery-story-media { min-height: 300px; }.gallery-story-copy { min-height: 290px; padding: 30px 24px; }.gallery-story-copy h3 { font-size: 38px; }.gallery-editorial-grid { gap: 52px; }
  .gallery-masthead { min-height: 620px; }.gallery-masthead h1 { font-size: 58px; }.gallery-masthead-content { padding-bottom: 42px; }.light-crumbs { margin-bottom: 100px; }
  .gallery-commerce-bar { grid-template-columns: 1fr; gap: 18px; padding-top: 28px; padding-bottom: 28px; }.gallery-commerce-actions { grid-column: auto; align-items: flex-start; flex-direction: column; }.photo-section-heading, .search-filter-dock { align-items: flex-start; flex-direction: column; }.gallery-page-controls { width: 100%; justify-content: space-between; }
  .portfolio-wall { grid-template-columns: 1fr; gap: 34px; }.portfolio-photo-media { aspect-ratio: var(--shot-ratio, 3 / 2); }.portfolio-photo-arrow { opacity: 1; transform: none; }
  .search-results-hero h1, .directory-hero h1, .team-hero h1, .partners-hero h1, .terms-hero h1, .downloads-hero h1, .checkout-hero h1 { font-size: 54px; }.search-filter-fields, .search-filter-actions { width: 100%; align-items: stretch; flex-direction: column; }.search-filter-fields select { width: 100%; }
  .roster-grid { grid-template-columns: 1fr; }.roster-card:nth-child(odd), .roster-card:nth-child(even) { border-right: 0; padding: 12px 8px 12px 0; }.roster-card { grid-template-columns: 92px minmax(0,1fr) 30px; }.roster-number { font-size: 36px; }
  .profile-hero { min-height: 620px; }.profile-hero-copy h1 { font-size: 58px; }.profile-facts { gap: 24px; }.package-grid { grid-template-columns: 1fr; }.package-card { min-height: 260px; }
  .photo-stage { height: calc(100svh - 68px); min-height: 520px; padding: 10px 8px 8px; }.photo-stage-frame { min-height: 0; }.photo-stage-crumbs { padding-inline: 4px; margin-bottom: 5px; }.photo-stage-caption { padding: 7px 4px 0; }.photo-commerce-panel { padding: 48px 20px 80px; }.photo-access-card .unlock-form { grid-template-columns: 1fr; gap: 8px; }
  .team-portrait-wrap { min-height: 430px; }.team-member-copy { padding: 40px 24px; }.team-member-copy h2 { font-size: 46px; }.partner-story { min-height: 0; grid-template-columns: 1fr; gap: 24px; padding: 30px 42px 30px 0; }.partner-logo-stage { width: min(220px, 76vw); }.partner-index { top: 32px; }.terms-layout { padding-top: 70px; }.terms-summary nav { grid-template-columns: 1fr; }
  .access-story { min-height: 600px; padding: 80px 20px; }.access-story h1 { font-size: 56px; }.access-form-panel { padding: 70px 20px; }.download-item { grid-template-columns: 90px minmax(0,1fr); gap: 16px; }.download-item .btn, .download-expired { grid-column: 2; justify-self: start; }
  .checkout-layout { padding-top: 60px; }.checkout-summary-card, .checkout-form-card { padding: 28px 22px; }.checkout-steps { gap: 14px; font-size: 10px; }.public-footer-main { grid-template-columns: 1fr; }.footer-statement { grid-column: auto; }.public-footer-base { align-items: flex-start; flex-direction: column; margin-top: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero-image { animation: none; }.gallery-story-media img, .portfolio-photo-media img, .portfolio-photo-arrow { transition: none; }
}

/* ---------- v2.3 polish: selects, code concealment, restrained motion ---------- */

/* Custom select chrome: consistent height, quiet border, themed chevron */
select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23849289' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 8px;
  padding-right: 34px !important;
  border-radius: 8px; cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}
select:hover { border-color: var(--accent-hi); }
select:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
select.slim { border-radius: 8px; }
select:disabled { cursor: default; opacity: .45; }

/* Access codes hide behind a bar until hovered or focused; the one-time
   reveal after registration (.revealed) is always visible. */
.code-pill, .code-button { position: relative; transition: border-color 150ms ease; }
.code-pill:not(.revealed)::after, .code-button::after {
  content: ''; position: absolute; inset: 3px 5px; border-radius: 3px;
  background: repeating-linear-gradient(-45deg, var(--opos-color-mono-300), var(--opos-color-mono-300) 5px, var(--opos-color-mono-200) 5px, var(--opos-color-mono-200) 10px);
  opacity: 1; transition: opacity 160ms ease; pointer-events: none;
}
.code-pill:not(.revealed):hover::after, .code-pill:not(.revealed):focus-visible::after,
.code-pill:not(.revealed):focus-within::after,
.code-button:hover::after, .code-button:focus-visible::after { opacity: 0; }

/* Motion layer: quiet, quick, and killed entirely by prefers-reduced-motion
   (the global reduced-motion rule zeroes animation/transition durations). */
/* Opacity-only: a transform here would become the containing block for any
   position:fixed popover inside (e.g. .action-menu-popover), throwing it to a
   random spot, and the transform could stick on MutationObserver-wrapped
   .table-scroll containers. A pure fade avoids both and reads just as calm. */
@keyframes opos-page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.public-main > section, .public-main > div, #tab-content > * { animation: opos-page-in 260ms ease both; }
.btn, .icon-button, .staff-nav-item, .chip, .kw-pack, .dt-chip, .header-icon-link, .action-menu button {
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 130ms ease, box-shadow 150ms ease;
}
.btn:active, .icon-button:active { transform: scale(.98); }
.portfolio-photo-media img, .gallery-story-media img { transition: transform 280ms ease; }
.download-item, .panel, .photo-purchase-card, .photo-access-card { transition: border-color 160ms ease; }
input, textarea { transition: border-color 150ms ease, background-color 150ms ease; }

/* first-visit storage consent */
.consent-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 120;
  max-width: 560px; margin: 0 auto; padding: 18px 20px;
  background: var(--opos-surface-raised); border: 1px solid var(--opos-border-default);
  border-radius: 12px; box-shadow: var(--opos-shadow-frame, 0 12px 32px rgba(0,0,0,.24));
  animation: opos-page-in 300ms cubic-bezier(.22,.7,.3,1) both;
}
.consent-banner p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--opos-text-secondary); }
.consent-banner p strong { color: var(--opos-text-primary); }
.consent-actions { display: flex; gap: 8px; }

/* quiet staff entry on the client login panel */
.staff-entry-note { display: block; margin-top: 18px; color: var(--muted); font-size: 12px; }
.staff-entry-note a { color: inherit; text-decoration: underline; }

/* ---------- staff portal facelift: editorial shell, icon rail on mobile ---------- */

.staff-sidebar {
  background: var(--opos-background-canvas);
  border-right: 1px solid var(--opos-border-subtle);
  padding: 26px 14px 34px;
}
.staff-sidebar-intro { padding: 0 10px 20px; }
.staff-sidebar-intro strong { font-size: 16px; font-weight: 680; letter-spacing: -.01em; }
.staff-quick-upload { border-radius: 10px; }
.staff-nav-item { border-radius: 8px; transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease; }
.staff-nav-item.active { box-shadow: inset 2px 0 0 var(--opos-color-green-500); }
.staff-page-header {
  padding-bottom: 20px; margin-bottom: 26px;
  border-bottom: 1px solid var(--opos-border-subtle);
}
.staff-page-header h1 { font-size: clamp(30px, 3.2vw, 44px); letter-spacing: -.045em; line-height: 1.02; }
.staff-page-header p { font-size: 14.5px; }
.staff-page-eyebrow { letter-spacing: .16em; }
.panel { border-radius: 12px; }
.admin-table thead th { letter-spacing: .12em; }

/* Below 900px the sidebar stays visible as a 64px icon rail; the header
   toggle expands it in place to show the full names (overlay + backdrop). */
@media (max-width: 900px) {
  .staff-shell { grid-template-columns: 64px minmax(0, 1fr); }
  .staff-sidebar {
    position: sticky; top: 69px; left: auto; bottom: auto; width: auto;
    height: calc(100vh - 69px); transform: none; box-shadow: none;
    padding: 14px 8px 20px; transition: none;
  }
  .staff-sidebar .staff-sidebar-intro, .staff-sidebar .staff-nav-label { display: none; }
  .staff-nav { gap: 10px; }
  .staff-nav-group { gap: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--opos-border-subtle); }
  .staff-nav-group:last-child { border-bottom: 0; }
  .staff-nav-item { justify-content: center; padding: 10px 0; width: 100%; }
  .staff-nav-item > span:last-child { display: none; }
  .staff-nav-item .staff-nav-icon { margin: 0; }
  .staff-quick-upload { font-size: 0; gap: 0; padding: 10px 0; width: 100%; margin-bottom: 14px; }
  .staff-quick-upload .ph { font-size: 18px; }

  .staff-nav-open .staff-sidebar {
    position: fixed; left: 0; top: 69px; width: min(300px, 86vw);
    padding: 24px 16px 32px; box-shadow: var(--opos-shadow-frame);
    background: var(--opos-surface-default); z-index: 100; overflow-y: auto;
  }
  .staff-nav-open .staff-sidebar .staff-sidebar-intro { display: flex; }
  .staff-nav-open .staff-sidebar .staff-nav-label { display: block; }
  .staff-nav-open .staff-nav-group { border-bottom: 0; padding-bottom: 0; }
  .staff-nav-open .staff-nav-item { justify-content: flex-start; padding: 9px 12px; }
  .staff-nav-open .staff-nav-item > span:last-child { display: inline; }
  .staff-nav-open .staff-quick-upload { font-size: inherit; gap: 8px; padding: 10px 16px; }
}

/* driver/team-only event bundle picker in the gallery commerce bar */
.subject-bundle { grid-column: 1 / -1; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--opos-border-subtle); }
.subject-bundle label { display: block; font-size: 11px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--opos-text-secondary); margin-bottom: 8px; }
.subject-bundle-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.subject-bundle-controls select { min-width: 240px; min-height: 40px; }

/* "Find yourself" home search strip, editorial, matching the search drawer */
.home-search-strip { text-align: left; padding-top: clamp(64px, 8vw, 110px); padding-bottom: clamp(64px, 8vw, 110px); border-top: 1px solid var(--opos-border-subtle); border-bottom: 1px solid var(--opos-border-subtle); }
.home-search-strip .eyebrow { display: block; margin-bottom: 14px; }
.home-search-strip h2 { font-size: clamp(34px, 4vw, 56px); letter-spacing: -.045em; line-height: 1; margin: 0 0 12px; }
.home-search-strip > p { max-width: 560px; color: var(--muted); font-size: 17px; line-height: 1.6; margin-bottom: 26px; }
.home-search-form { display: flex; gap: 10px; max-width: 640px; }
.home-search-form input { flex: 1; min-height: 52px; font-size: 16px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--opos-border-default); background: var(--opos-surface-default); color: var(--text); }
.home-search-form input:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.home-search-form .btn { min-height: 52px; padding: 0 22px; }
@media (max-width: 560px) {
  .home-search-form { flex-direction: column; }
  .home-search-form .btn { width: 100%; justify-content: center; }
}

/* inline text-buttons inside hero paragraphs sit on the text baseline */
.directory-hero p .editorial-link, .editorial-link.light {
  display: inline; vertical-align: baseline; font-size: inherit;
  border: 0; background: none; padding: 0; cursor: pointer;
  color: inherit; text-decoration: underline; font-weight: 680;
}
.directory-hero p .editorial-link .ph { display: inline-block; vertical-align: -2px; }

/* settable announcement banner across the top of the public site */
#site-banner {
  background: var(--opos-color-green-600); color: #fff;
  text-align: center; padding: 9px 20px; font-size: 13.5px; font-weight: 600;
  letter-spacing: .01em;
}

/* "In this frame": a motorsport entry list, number roundel, name, team.
   Hairline dividers, not bordered cards, so it reads like a grid sheet. */
.photo-subjects .photo-panel-label { margin-bottom: 12px; }
.frame-entry-list { display: flex; flex-direction: column; border-top: 1px solid var(--opos-border-subtle); }
.frame-entry {
  display: flex; align-items: center; gap: 14px; padding: 12px 2px;
  border-bottom: 1px solid var(--opos-border-subtle); color: var(--text);
}
.frame-entry:hover .frame-entry-copy strong { color: var(--accent-text); }
.frame-entry:hover .frame-entry-go { color: var(--accent-text); transform: translateX(3px); }
.frame-roundel {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 50%; background: var(--opos-color-mono-900); color: var(--opos-color-mono-000);
  font-weight: 760; font-size: 17px; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  border: 2px solid var(--opos-color-green-500);
}
[data-theme="light"] .frame-roundel { background: var(--opos-color-mono-1000); color: #fff; }
.frame-roundel[data-empty] { color: var(--opos-text-secondary); border-color: var(--opos-border-default); font-weight: 500; }
.frame-profile-photo { overflow: hidden; padding: 0; background: var(--opos-surface-sunken); }.frame-profile-photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: var(--focus-x,50%) var(--focus-y,50%); transform: scale(var(--focus-z,1)); }
.frame-entry-copy { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.frame-entry-copy strong { font-size: 16px; line-height: 1.15; letter-spacing: -.01em; transition: color 140ms ease; }
.frame-entry-copy small { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.frame-entry-go { color: var(--opos-text-secondary); transition: color 140ms ease, transform 140ms ease; }
.frame-chip-row { margin-top: 12px; }
.photo-search-more { margin-top: 14px; font-size: 13px; }

/* gallery membership list in the metadata editor: make the scroll obvious */
.meta-editor .check-list {
  border: 1px solid var(--opos-border-default); border-radius: 8px;
  padding: 8px 10px; overflow-y: auto; scrollbar-width: thin;
  scrollbar-color: var(--opos-color-mono-400) transparent;
  background:
    linear-gradient(var(--opos-surface-default) 30%, transparent) top,
    linear-gradient(transparent, var(--opos-surface-default) 70%) bottom,
    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.14), transparent) top,
    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.14), transparent) bottom;
  background-repeat: no-repeat; background-size: 100% 22px, 100% 22px, 100% 8px, 100% 8px;
  background-attachment: local, local, scroll, scroll;
}
.meta-editor .check-list::-webkit-scrollbar { width: 8px; }
.meta-editor .check-list::-webkit-scrollbar-thumb { background: var(--opos-color-mono-400); border-radius: 8px; }

/* one select style everywhere in the staff portal, no page may differ */
.staff-workspace select, .staff-workspace select.slim {
  min-height: 40px; font-size: 13.5px; font-family: inherit;
  padding: 8px 34px 8px 12px; border-radius: 8px;
  background-color: var(--opos-surface-default);
  border: 1px solid var(--opos-border-default); color: var(--text);
}

/* gallery membership list: compact column, adapts to narrow screens */
.meta-editor .check-list { max-width: 340px; width: 100%; }

/* ---------- "sell with us" photographer page (editorial, not card grid) ---------- */
.sell-lead { padding-top: clamp(48px,6vw,90px); padding-bottom: clamp(40px,5vw,80px); }
.sell-lead > h2 { font-size: clamp(32px,4vw,56px); letter-spacing: -.035em; margin: 12px 0 18px; max-width: 16ch; }
.sell-lead > p { font-size: clamp(17px,1.6vw,20px); line-height: 1.6; color: var(--opos-text-secondary); max-width: 62ch; }
.sell-lead > p strong { color: var(--text); }
/* terms: a flowing three-up definition row on a hairline, no boxes */
.sell-terms-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px,3vw,44px); margin: 40px 0 28px; padding-top: 26px; border-top: 1px solid var(--opos-border-default); }
.sell-terms-row > div { display: flex; flex-direction: column; gap: 8px; }
.sell-terms-k { font-size: clamp(19px,2vw,24px); font-weight: 680; letter-spacing: -.02em; color: var(--opos-text-accent); }
.sell-terms-v { color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.sell-why { max-width: 66ch; font-size: 14.5px; line-height: 1.6; }
@media (max-width: 700px) { .sell-terms-row { grid-template-columns: 1fr; gap: 22px; } }

/* features: editorial two-column list, hairline-separated, no icons, no boxes */
.sell-features { padding-top: clamp(40px,5vw,80px); padding-bottom: clamp(40px,5vw,80px); }
.sell-feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px,5vw,72px); margin-top: 20px; border-top: 1px solid var(--opos-border-default); }
.sell-feature-list article { padding: 26px 0; border-bottom: 1px solid var(--opos-border-subtle); }
.sell-feature-list h3 { font-size: clamp(18px,1.7vw,21px); margin: 0 0 8px; letter-spacing: -.01em; }
.sell-feature-list p { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 46ch; }
@media (max-width: 760px) { .sell-feature-list { grid-template-columns: 1fr; } }

.sell-metadata { background: #101713; color: #fff; padding-top: clamp(56px,7vw,110px); padding-bottom: clamp(56px,7vw,110px); }
.sell-metadata-inner { max-width: 820px; }
.sell-metadata h2 { font-size: clamp(30px,3.4vw,48px); letter-spacing: -.03em; margin: 10px 0 16px; }
.sell-metadata > .sell-metadata-inner > p { font-size: 17px; line-height: 1.7; color: rgba(255,255,255,.72); }
.sell-roadmap { margin-top: 30px; padding: 24px; border: 1px solid rgba(255,255,255,.16); border-radius: 14px; background: rgba(255,255,255,.03); }
.sell-roadmap h3 { font-size: 20px; margin: 12px 0 8px; }
.sell-roadmap p { color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.6; margin: 0; }

.sell-form-section { padding-top: clamp(48px,6vw,90px); padding-bottom: clamp(64px,8vw,120px); }
.sell-form-card { max-width: 720px; border: 1px solid var(--opos-border-default); border-radius: 16px; padding: clamp(24px,4vw,44px); background: var(--opos-surface-default); }
.sell-form-card h2 { font-size: clamp(26px,3vw,40px); margin: 8px 0 10px; }
.sell-form-card > p { color: var(--muted); margin-bottom: 22px; }
.sell-form-card form { margin-bottom: 14px; }
.sell-form-card .form-row { margin-bottom: 16px; }
.sell-form-card small { display: block; font-size: 12px; line-height: 1.5; }

/* seller signup: store-address input with its fixed domain suffix reading as
   one control group; availability feedback sits directly beneath the field */
.slug-input-row { display: flex; align-items: stretch; }
.slug-input-row input { flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.slug-suffix {
  display: flex; align-items: center; padding: 0 12px; white-space: nowrap;
  font-size: 13px; color: var(--muted); background: var(--opos-surface-subtle);
  border: 1px solid var(--border); border-left: 0; border-radius: 0 var(--radius) var(--radius) 0;
}
.slug-status.ok { color: var(--ok); }
.slug-status.err { color: var(--danger-text); }
/* recovery page shares the sell card; the level-one heading stays card-scaled */
.seller-recover-page .sell-form-card h1 { font-size: clamp(26px,3vw,40px); letter-spacing: -.02em; margin: 8px 0 10px; }

/* home: "two ways in", hairline-separated editorial columns, no boxes */
.home-join-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px,7vw,110px); margin-top: 26px; padding-top: 36px; border-top: 1px solid var(--opos-border-default); }
.home-join-col { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.home-join-col p { margin-bottom: 10px; }
.home-join-col h3 { font-size: clamp(22px,2.4vw,32px); letter-spacing: -.025em; margin: 0; }
.home-join-col p { color: var(--muted); font-size: 15.5px; line-height: 1.6; max-width: 48ch; margin: 0 0 6px; }
@media (max-width: 700px) { .home-join-grid { grid-template-columns: 1fr; gap: 34px; } }

/* home: event booking band, dark, editorial, the closing statement */
.home-events { background: #101713; color: #fff; padding: clamp(64px,9vw,140px) calc(max(0px, 50% - 720px) + var(--public-gutter)); }
.home-events-inner { max-width: 1440px; margin: 0 auto; }
.home-events h2 { font-size: clamp(38px,5vw,72px); letter-spacing: -.045em; line-height: 1; margin: 14px 0 18px; max-width: 14ch; }
.home-events > .home-events-inner > p { max-width: 66ch; color: rgba(255,255,255,.72); font-size: clamp(16px,1.5vw,19px); line-height: 1.65; }
.home-events-points { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,3vw,44px); margin: 36px 0 34px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.16); }
.home-events-points > div { display: flex; flex-direction: column; gap: 6px; }
.home-events-points strong { font-size: 17px; letter-spacing: -.01em; }
.home-events-points span { color: rgba(255,255,255,.62); font-size: 14px; line-height: 1.55; }
@media (max-width: 700px) { .home-events-points { grid-template-columns: 1fr; gap: 20px; } }

/* quiet cross-links under hero CTAs */
.sell-cross-note { display: block; margin-top: 16px; color: rgba(255,255,255,.55); font-size: 13px; }
.sell-cross-note a { color: rgba(255,255,255,.85); text-decoration: underline; }

/* gallery notify + footer mailing forms */
.notify-block { grid-column: 1 / -1; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--opos-border-subtle); }
.notify-block > label { display: block; font-size: 11px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--opos-text-secondary); margin-bottom: 8px; }
.notify-form { display: flex; gap: 8px; flex-wrap: wrap; }
.notify-form input[type="email"] { flex: 1; min-width: 200px; max-width: 320px; min-height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--opos-border-default); background: var(--opos-surface-default); color: var(--text); }
.notify-form select { min-height: 40px; }
.footer-mailing-copy { color: rgba(255,255,255,.55); font-size: 13px; line-height: 1.5; margin: 0 0 10px; max-width: 30ch; }
.footer-mailing-form { display: flex; gap: 8px; }
.footer-mailing-form input { flex: 1; min-width: 0; min-height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: #fff; }
.footer-mailing-form input::placeholder { color: rgba(255,255,255,.4); }
.footer-mailing-form .btn { border-color: rgba(255,255,255,.28); color: #fff; background: transparent; }
.footer-mailing-form .btn:hover { border-color: var(--opos-color-green-400); }

a#site-banner { display: block; text-decoration: none; color: #fff; }
a#site-banner:hover { background: var(--opos-color-green-500); text-decoration: underline; }

.checkout-guest-warning {
  margin: 0 0 22px; padding: 12px 14px; border-radius: 10px; font-size: 13.5px; line-height: 1.55;
  border: 1px solid var(--opos-color-amber-500); background: color-mix(in srgb, var(--opos-color-amber-500) 9%, transparent);
  color: var(--text);
}
.checkout-guest-warning a { text-decoration: underline; font-weight: 650; }

/* The coupon row: an .inline-form inside .checkout-form-card put a 22px bottom
   margin on the field but not on the button beside it, so the two sat on
   different baselines. This out-specifies both rules rather than editing
   either — .checkout-form-card .form-row's 22px is what spaces every OTHER
   field on the page and has to stay. The min-height match stops align-items:end
   leaving the tops a few px apart. */
.checkout-form-card .inline-form { align-items: flex-end; }
.checkout-form-card .inline-form .form-row { margin-bottom: 0; }
.checkout-form-card .inline-form .btn { min-height: 40px; }

/* Payment not set up: a real alert, not a footnote. Amber rather than the
   danger red .checkout-guest-warning uses, so a guest buyer does not get two
   red blocks stacked in one card — and because this is a "come back later",
   not a "you are about to lose something". */
.checkout-blocked { width: 100%; text-align: left; border: 1px solid var(--opos-status-warning, var(--opos-color-amber-500)); border-left-width: 4px; border-radius: 10px; background: color-mix(in srgb, var(--opos-status-warning, var(--opos-color-amber-500)) 9%, transparent); padding: 16px 18px; }
.checkout-blocked > strong { display: flex; align-items: center; gap: 8px; font-size: 14.5px; margin-bottom: 8px; }
.checkout-blocked p { margin: 0 0 7px; font-size: 13.5px; line-height: 1.55; color: var(--text); }
.checkout-blocked p:last-child { margin-bottom: 0; }
.checkout-blocked-next { color: var(--muted); }
.checkout-blocked a { text-decoration: underline; font-weight: 650; }

.home-join .section-intro-row { margin-bottom: clamp(20px, 3vw, 40px); }
.home-join { padding-bottom: clamp(72px, 9vw, 130px); }

/* in-app confirmation dialog */
.modal-overlay {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  background: rgba(7, 9, 7, .55); padding: 20px;
  animation: opos-fade-in 140ms ease both;
}
@keyframes opos-fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal-dialog {
  width: 100%; max-width: 420px; padding: 24px;
  background: var(--opos-surface-raised); border: 1px solid var(--opos-border-default);
  border-radius: 14px; box-shadow: var(--opos-shadow-popover, 0 24px 60px rgba(0,0,0,.4));
  animation: opos-page-in 180ms cubic-bezier(.22,.7,.3,1) both;
}
.modal-dialog h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: -.01em; }
.modal-dialog p { margin: 0 0 20px; color: var(--opos-text-secondary); font-size: 14px; line-height: 1.55; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.field-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--opos-text-secondary); margin: 0 0 6px; }
.modal-reason { width: 100%; box-sizing: border-box; margin: 0 0 20px; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--opos-text-primary); background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); resize: vertical; min-height: 58px; }
.modal-reason:focus { outline: none; border-color: var(--accent); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.danger-solid { background: var(--opos-status-danger); border-color: var(--opos-status-danger); color: #fff; }
.btn.danger-solid:hover { background: var(--opos-color-red-600); border-color: var(--opos-color-red-600); }

/* trash previews */
.trash-thumb {
  display: block; width: 48px; height: 34px; border-radius: 5px;
  background-size: cover; background-position: center;
  background-color: var(--opos-surface-subtle); border: 1px solid var(--opos-border-subtle);
}
.trash-thumb-icon { display: grid; place-items: center; color: var(--opos-text-secondary); }
.trash-thumb-icon .ph { font-size: 18px; }
.trash-bulkbar { margin-bottom: 12px; }

/* footer legal row + company identity (Companies Act trading disclosures) */
.public-footer-legal {
  max-width: calc(var(--public-max) - var(--public-gutter) * 2); margin: 46px auto 0; display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: baseline; gap: 12px 30px;
  color: rgba(255,255,255,.66); font-size: 12px;
}
.public-footer-legal nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.public-footer-legal nav a { color: rgba(255,255,255,.6); text-decoration: none; }
.public-footer-legal nav a:hover { color: #fff; text-decoration: underline; }
.footer-company { letter-spacing: .02em; }
.footer-consent-note { margin: 8px 0 0; font-size: 11.5px; color: rgba(255,255,255,.66); }
.footer-consent-note a { color: rgba(255,255,255,.65); }
.public-footer-base { margin-top: 26px; }
@media (max-width: 760px) { .public-footer-legal { flex-direction: column; } }

/* privacy microcopy shown right before a form hands data over */
.consent-note { margin: 10px 0 0; font-size: 12px; color: var(--opos-text-secondary); }
.consent-note a { color: inherit; text-decoration: underline; }

/* modal text input + shown-once code display */
.modal-input {
  width: 100%; margin: 0 0 18px; padding: 10px 12px; font: inherit;
  background: var(--opos-surface-base); color: var(--opos-text-primary);
  border: 1px solid var(--opos-border-default); border-radius: 8px;
}
.modal-input:focus-visible { outline: 2px solid var(--opos-border-focus, var(--opos-status-info)); outline-offset: 1px; }
.modal-code {
  margin: 0 0 18px; padding: 14px 16px; text-align: center;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 20px; letter-spacing: .08em;
  background: var(--opos-surface-subtle); border: 1px dashed var(--opos-border-default); border-radius: 10px;
  user-select: all;
}

/* legal pages (privacy / cookies / accessibility) */
.legal-prose { max-width: 840px; margin: 0 auto; }
.legal-prose h2 { margin-top: 40px; }
.legal-prose h3 { margin-top: 26px; }
.legal-prose ul { padding-left: 22px; }
.legal-prose li { margin: 6px 0; }

/* one select style on the public site too, mirrors the staff portal so both
   surfaces read as one brand */
.public-body select {
  min-height: 40px; font-size: 13.5px; font-family: inherit;
  padding: 8px 34px 8px 12px; border-radius: 8px;
  background-color: var(--opos-surface-default);
  border: 1px solid var(--opos-border-default); color: var(--text);
}
/* dark hero filter bars keep their translucent chrome */
.public-body .directory-filter select, .public-body .profile-filter select {
  background-color: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.28);
}

/* scoped search in a gallery's "The photographs" heading, same form language
   as the home "Find yourself" strip, sized to sit inside the heading row */
.gallery-search-form { margin-top: 16px; max-width: 480px; }
.gallery-search-form input, .gallery-search-form .btn { min-height: 44px; }

/* 2FA step: trust-this-device opt-in + resend row */
.tfa-trust { display: flex; align-items: flex-start; gap: 9px; margin: 4px 0 14px; font-size: 12.5px; color: var(--muted); cursor: pointer; text-transform: none; letter-spacing: 0; }
.tfa-trust input { width: 15px; height: 15px; margin: 1px 0 0; flex: none; }
.tfa-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; }

/* guest checkout: the one-download warning is the loudest thing on the page */
.checkout-guest-warning {
  margin: 18px 0 22px; padding: 18px 20px; border-radius: 10px;
  border: 1px solid var(--opos-status-danger); border-left-width: 4px;
  background: color-mix(in srgb, var(--opos-status-danger) 7%, transparent);
}
.checkout-guest-warning > strong { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--danger-text); }
.checkout-guest-warning p { margin: 9px 0 0; font-size: 13px; line-height: 1.55; color: var(--text); }
/* the two outcomes side by side, so "an account means you can get them
   again" is the first thing read rather than a footnote */
.guest-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.guest-choice-option { padding: 14px 15px; border-radius: 8px; background: var(--opos-surface-default); border: 1px solid var(--border); }
.guest-choice-option p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.guest-choice-option p b { color: var(--text); }
.guest-choice-label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.1px; font-weight: 700; }
.guest-no .guest-choice-label { color: var(--danger-text); }
.guest-yes { border-color: var(--accent); }
.guest-yes .guest-choice-label { color: var(--accent-text); }
.guest-yes .btn { margin-top: 12px; }
@media (max-width: 620px) { .guest-choice { grid-template-columns: 1fr; } }

/* Metadata editor: a big preview beside the fields, so you can actually see
   the photo you are tagging. Scoped to .meta-layout, `.meta-editor` is shared
   with the folder-pricing, grants and coupon editors, which must not inherit
   any of this. */
.meta-layout { display: grid; grid-template-columns: minmax(220px, 30%) minmax(0, 1fr); gap: 18px; align-items: start; }
.meta-preview { position: sticky; top: 8px; display: flex; flex-direction: column; gap: 6px; }
.meta-preview a {
  display: block; aspect-ratio: var(--shot-ratio, 3 / 2);
  background: var(--panel) center/cover no-repeat;
  border: 1px solid var(--border); border-radius: var(--opos-radius-small); overflow: hidden;
}
.meta-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }
.meta-preview a:hover { border-color: var(--accent-hi); }
.meta-preview > span { font-size: 11px; letter-spacing: .04em; }
.meta-fields { min-width: 0; }
/* the upload tab hosts the same editor in a much narrower column */
@media (max-width: 900px) {
  .meta-layout { grid-template-columns: 1fr; }
  .meta-preview { position: static; max-width: 320px; }
}

/* Paddock: pick a championship first, then its drivers and teams */
.champ-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.champ-card {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 26px 24px; text-decoration: none; color: var(--text);
  background: var(--opos-surface-default); border: 1px solid var(--border);
  border-radius: var(--opos-radius-default); transition: border-color .18s ease, transform .18s ease;
}
.champ-card:hover { border-color: var(--accent-hi); transform: translateY(-2px); }
.champ-card strong { font-size: clamp(19px, 1.6vw, 23px); letter-spacing: -.02em; line-height: 1.15; max-width: 22ch; }
.champ-card-count { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.champ-card-arrow { position: absolute; top: 20px; right: 20px; color: var(--muted); transition: color .18s ease, transform .18s ease; }
.champ-card:hover .champ-card-arrow { color: var(--accent-text); transform: translate(2px, -2px); }

/* Chosen profile photo: stands in for the car number / monogram on the roster,
   and becomes a real portrait on the profile hero. */
.roster-face { display: block; width: 104px; height: 104px; border-radius: 50%; overflow: hidden; background: var(--panel-2); border: 1px solid var(--border); }
.roster-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.roster-card:hover .roster-face { border-color: var(--accent-hi); }

/* The hero keeps its giant ghosted number when no photo is set; with one, the
   photo takes that corner properly instead. */
/* One source of truth for the portrait width: the hero copy subtracts the same
   value to keep clear of it. */
.profile-hero.has-portrait { position: relative; --portrait-w: min(440px, 34vw); }
.profile-portrait {
  position: absolute; z-index: 0; right: max(var(--public-gutter), calc(50% - var(--public-max) / 2 + var(--public-gutter)));
  top: 50%; transform: translateY(-50%);
  width: var(--portrait-w); aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 4px; background: #0d120f center/cover no-repeat;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.profile-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.profile-portrait:hover img { transform: scale(1.03); }
.profile-hero.has-portrait .profile-hero-copy, .profile-hero.has-portrait .dark-crumbs { position: relative; z-index: 1; }
/* the copy column yields exactly what the portrait takes, so the two can never
   overlap however wide the portrait grows */
.profile-hero.has-portrait .profile-hero-copy { max-width: min(60ch, calc(100% - var(--portrait-w) - 40px)); }
@media (max-width: 760px) {
  .profile-portrait { position: static; transform: none; width: 190px; margin-bottom: 18px; }
  .profile-hero.has-portrait .profile-hero-copy { max-width: none; }
  .roster-face { width: 80px; height: 80px; }
}

/* admin registry: the profile-photo cell */
.profile-pic-cell {
  width: 46px; height: 46px; padding: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--panel-2) center/cover no-repeat; color: var(--muted);
  border: 1px dashed var(--border); border-radius: 4px;
}
.profile-pic-cell.has-pic { border-style: solid; }
.profile-pic-cell:hover { border-color: var(--accent-hi); color: var(--accent-text); }

/* photo picker modal */
.modal-dialog.modal-wide { max-width: 780px; }
.photo-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; max-height: 46vh; overflow-y: auto; margin-bottom: 18px; padding: 2px; }
.photo-pick { position: relative; padding: 0; aspect-ratio: 3 / 2; overflow: hidden; cursor: pointer; background: var(--panel-2); border: 2px solid transparent; border-radius: 5px; }
.photo-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-pick:hover, .photo-pick:focus-visible { border-color: var(--accent-hi); outline: none; }
.photo-pick.chosen { border-color: var(--accent); }
.photo-pick-flag { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; background: var(--accent); color: #fff; }

/* ---------- profile-picture crop editor ---------- */
.crop-stage { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 18px; margin-bottom: 18px; }
.crop-frame {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden; cursor: grab;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; touch-action: none;
}
.crop-frame.dragging { cursor: grabbing; }
.crop-frame img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
/* a ring showing roughly what the round avatar keeps */
.crop-frame::after {
  content: ''; position: absolute; inset: 8%; border-radius: 50%;
  border: 1px dashed rgba(255,255,255,.55); box-shadow: 0 0 0 9999px rgba(0,0,0,.32); pointer-events: none;
}
.crop-side { display: flex; flex-direction: column; gap: 10px; }
.crop-side-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.1px; font-weight: 700; color: var(--muted); }
.crop-previews { display: flex; gap: 10px; align-items: flex-start; }
.crop-preview { position: relative; overflow: hidden; background: var(--panel-2); border: 1px solid var(--border); }
.crop-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crop-preview > span { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px; font-size: 8.5px; text-align: center; text-transform: uppercase; letter-spacing: .05em; background: rgba(0,0,0,.6); color: #fff; }
.crop-preview.as-round { width: 74px; height: 74px; border-radius: 50%; }
.crop-preview.as-round > span { display: none; }
.crop-preview.as-portrait { width: 74px; aspect-ratio: 4 / 5; border-radius: 3px; }
.crop-preview.as-tall { width: 74px; aspect-ratio: 3 / 4; border-radius: 3px; }
.crop-zoom { display: flex; flex-direction: column; gap: 5px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 600; }
.crop-zoom input { width: 100%; }
@media (max-width: 620px) { .crop-stage { grid-template-columns: 1fr; } .crop-previews { justify-content: center; } }

/* Account identity and menus */
.account-menu { position: relative; flex: 0 0 auto; }
.account-button { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--panel); color: var(--text); cursor: pointer; overflow: hidden; }
.account-button:hover, .account-button:focus-visible { border-color: var(--accent-hi); outline: 2px solid transparent; }
.account-button > .ph { font-size: 22px; }
.account-avatar, .account-avatar-wrap { display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; }
.account-avatar-wrap img { width: calc(100% * var(--avatar-zoom, 1)); height: calc(100% * var(--avatar-zoom, 1)); max-width: none; object-fit: cover; }
.account-initials { background: var(--accent); color: #fff; font-size: 12px; font-weight: 750; letter-spacing: .04em; }
.account-avatar.large, .account-avatar-wrap.large { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto; }
.account-popover { position: absolute; z-index: 150; top: calc(100% + 8px); right: 0; width: min(280px, calc(100vw - 24px)); padding: 7px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); box-shadow: var(--opos-shadow-popover); }
.account-popover [role="menuitem"] { width: 100%; min-height: 38px; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 5px; background: transparent; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.account-popover [role="menuitem"]:hover, .account-popover [role="menuitem"]:focus-visible { background: var(--panel-2); outline: none; }
.account-card { display: flex; align-items: center; gap: 11px; padding: 9px 9px 12px; margin-bottom: 5px; border-bottom: 1px solid var(--border); }
.account-card > div:last-child { display: flex; min-width: 0; flex-direction: column; }
.account-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-card span { color: var(--muted); font-size: 11px; }
.account-settings-layout { display: grid; grid-template-columns: minmax(240px, 380px) minmax(0, 620px); gap: 24px; align-items: start; }
.account-avatar-editor, .account-details-form { padding: 24px; }
.account-avatar-preview { width: 180px; height: 180px; margin: 0 auto 20px; border-radius: 50%; overflow: hidden; }
.account-avatar-preview .profile { width: 100%; height: 100%; border-radius: 50%; font-size: 36px; }
.account-avatar-editor input[type="range"] { width: 100%; }

/* Metadata primitives */
.search-combobox { position: relative; min-width: 180px; }
.combobox-menu { position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; right: 0; max-height: 230px; overflow-y: auto; padding: 4px; border: 1px solid var(--border); border-radius: 5px; background: var(--panel); box-shadow: var(--opos-shadow-popover); }
.combobox-menu button { display: flex; width: 100%; gap: 7px; padding: 8px; border: 0; border-radius: 3px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.combobox-menu button[aria-selected="true"], .combobox-menu button:hover { background: var(--panel-2); }
.tag-input { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 42px; padding: 5px 7px; border: 1px solid var(--border); background: var(--panel); }
.tag-input-values, .folder-tags { display: contents; }
.tag-input > input[data-tag-entry] { flex: 1 1 180px; min-height: 28px; padding: 2px; border: 0; background: transparent; }
.meta-tag { display: inline-flex; align-items: center; gap: 4px; min-height: 27px; padding: 3px 5px 3px 9px; border-radius: 999px; background: var(--panel-2); color: var(--text); font-size: 12px; }
.meta-tag button { width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.meta-tag button:hover { background: var(--danger-bg); color: var(--danger); }
.folder-memberships { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.folder-memberships select { width: auto; min-width: 140px; }
textarea { resize: vertical; min-height: 90px; max-height: 420px; }
input[type="checkbox"] { accent-color: var(--accent); }

/* Upload queue, pagination and feedback */
.global-upload-panel { position: fixed; z-index: 130; right: 18px; bottom: 18px; width: min(420px, calc(100vw - 36px)); max-height: min(600px, calc(100vh - 100px)); overflow: hidden; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); box-shadow: var(--opos-shadow-popover); }
.upload-panel-head { width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px; border: 0; background: var(--panel); color: var(--text); text-align: left; cursor: pointer; }
.upload-panel-body { padding: 0 12px 12px; }
.upload-panel-list { max-height: 390px; overflow-y: auto; }
.progress-track, .mini-progress { height: 5px; overflow: hidden; border-radius: 999px; background: var(--panel-2); }
.progress-track { margin-bottom: 10px; }
.progress-track span, .mini-progress span { display: block; height: 100%; background: var(--success, #248a52); transition: width .15s linear; }
.upload-placeholder { align-items: center; }

/* 2026 access + Photo Library refresh */
.account-login-button { width: auto; min-width: 88px; padding: 0 14px; border-radius: 999px; display: flex; place-items: unset; align-items: center; justify-content: center; gap: 7px; font-weight: 680; }
.account-login-button span { display: inline; }
.staff-sidebar > .staff-nav { padding-top: 6px; }
.admin-portal .page-toolbar { align-items: center; min-height: 68px; }
.admin-portal .page-toolbar > .btn, .admin-portal .page-toolbar select { min-height: 44px; }
.photo-list-heading { justify-content: space-between; gap: 14px; }
.photo-list-heading select { border: 0; border-radius: 7px; background: var(--opos-surface-subtle); color: var(--opos-text-primary); font-weight: 650; padding: 7px 30px 7px 10px; }
#table-selection-count { margin-left: auto; white-space: nowrap; color: var(--opos-text-accent); font-size: 12px; font-weight: 720; }
.bulkbar { background: #fff; color: #17211b; border-color: #dfe6e1; align-items: center; }
[data-theme="dark"] .bulkbar { background: var(--opos-surface-elevated); color: var(--opos-text-primary); border-color: var(--opos-border-default); }
.choice-row { display: grid; grid-template-columns: 22px minmax(0,1fr); align-items: start; gap: 12px; padding: 14px; border: 1px solid var(--opos-border-default); border-radius: 9px; }
.choice-row input, .folder-choice-list input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--opos-color-green-600); }
.choice-row span { min-width: 0; display: grid; gap: 3px; }.choice-row small { color: var(--opos-text-secondary); line-height: 1.4; }
.folder-choice-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; max-height: 280px; overflow: auto; }
.folder-choice-list label { display: grid; grid-template-columns: 22px minmax(0,1fr); align-items: start; gap: 10px; padding: 10px 12px; border: 1px solid var(--opos-border-subtle); border-radius: 8px; line-height: 1.35; }
.move-review { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 20px; }.move-review > div { display: grid; gap: 4px; padding: 12px 14px; border-radius: 8px; background: var(--opos-surface-subtle); }.move-review span { color: var(--opos-text-secondary); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }.move-review strong { color: var(--opos-text-primary); }
form[aria-labelledby="move-dialog-title"] fieldset { min-width: 0; margin: 0 0 16px; padding: 0; border: 0; }form[aria-labelledby="move-dialog-title"] legend { margin-bottom: 8px; color: var(--opos-text-secondary); font-size: 12px; font-weight: 700; }.move-summary { margin-top: 2px; color: var(--opos-text-secondary); font-size: 13px; }
.share-code-dialog { max-width: 620px; }.share-code-dialog > label { display: block; margin: 15px 0 6px; font-size: 12px; font-weight: 700; }
.share-value { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; }.share-value code,.share-value input { min-width: 0; min-height: 42px; padding: 10px 12px; border: 1px solid var(--opos-border-default); border-radius: 8px; background: var(--opos-surface-subtle); color: var(--opos-text-primary); overflow: hidden; text-overflow: ellipsis; }
.global-upload-panel { width: min(280px,calc(100vw - 36px)); padding: 10px 12px 12px; }
.global-upload-panel .upload-panel-head { min-height: 26px; padding: 0 0 7px; justify-content: flex-end; }
.global-upload-panel .upload-panel-body { padding: 0; }.global-upload-panel .upload-panel-percent { font-size: 13px; }
#upload-placeholder-list:not(:empty) { display: grid; gap: 8px; margin: 12px 0; }
#upload-placeholder-list .upload-result { border: 1px solid var(--opos-border-default); border-radius: 9px; background: var(--opos-surface-default); padding: 12px; box-shadow: var(--opos-shadow-frame); }
.consent-banner { left: auto; right: 16px; width: min(440px,calc(100vw - 32px)); max-width: none; margin: 0; padding: 20px; border-radius: 14px; border: 1px solid var(--opos-border-default); box-shadow: var(--opos-shadow-popover); }
.consent-heading { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 12px; }.consent-heading > .ph { font-size: 22px; color: var(--opos-text-accent); }.consent-heading div { display: grid; gap: 2px; }.consent-heading strong { color: var(--opos-text-primary); font-size: 16px; }.consent-heading span { color: var(--opos-text-secondary); font-size: 12px; }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.consent-actions .btn { justify-content: center; }
.gallery-access-row { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--opos-border-subtle); }
.gallery-access-row .notify-block { grid-column: auto; margin: 0; padding: 0; border: 0; }.redeem-block > label { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--opos-text-secondary); }
.redeem-page { min-height: 70vh; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(340px,.8fr); gap: clamp(28px,5vw,72px); align-items: center; }.redeem-preview { min-height: 520px; background: var(--opos-surface-subtle); display: grid; place-items: center; overflow: hidden; }.redeem-preview img { width: 100%; height: 100%; object-fit: contain; max-height: 72vh; }.redeem-card { max-width: 620px; }.redeem-card h1 { margin: 14px 0 22px; font-size: clamp(38px,5vw,70px); line-height: 1; }.redeem-code { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-block: 1px solid var(--opos-border-default); }.redeem-code strong { letter-spacing: .12em; }.redeem-choice { margin-top: 22px; padding: 20px; border: 1px solid var(--opos-border-default); border-radius: 10px; }.redeem-choice.preferred { border-color: var(--opos-text-accent); background: var(--opos-surface-subtle); }.redeem-choice h2 { margin: 0 0 7px; font-size: 22px; }.redeem-choice p { color: var(--opos-text-secondary); line-height: 1.5; }
#checkout-actions,.register-submit-band { display: flex; justify-content: center; align-items: center; padding-block: 24px; }
#checkout-actions .btn,.register-submit-band .btn { min-width: 180px; justify-content: center; }
.access-form-panel #register-form { margin-bottom: 0; }.staff-entry-note { margin-top: 24px; }
@media (max-width: 760px) { .folder-choice-list,.gallery-access-row,.redeem-page,.move-review { grid-template-columns: 1fr; }.redeem-preview { min-height: 300px; }.consent-actions { grid-template-columns: 1fr; }.account-login-button { min-width: 44px; padding: 0 10px; }.account-login-button span { display:none; } }
.upload-file-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 5px; background: var(--panel-2); }
.upload-state { color: var(--muted); font-size: 11px; text-transform: capitalize; }
.upload-draft { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 7px; }
.upload-draft input { min-width: 0; min-height: 30px; padding: 5px 7px; font-size: 11px; }
.toast-success { border-color: var(--success, #248a52); }
.toast-error { border-color: var(--danger); }
.cover-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cover-compare img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }

/* Metadata review workspace and modal editors */
.metadata-toolbar { display: flex; align-items: end; gap: var(--opos-space-4); margin-bottom: var(--opos-space-4); }
.metadata-toolbar .toolbar-field { min-width: 220px; }
.metadata-shortcuts { margin-left: auto; padding-bottom: 10px; color: var(--opos-text-secondary); font-size: 12px; }
kbd { display: inline-grid; min-width: 24px; min-height: 24px; place-items: center; padding: 2px 6px; border: 1px solid var(--opos-border-default); border-bottom-width: 2px; border-radius: var(--opos-radius-small); background: var(--opos-surface-raised); color: var(--opos-text-primary); font: 600 11px/1 "IBM Plex Mono", Consolas, monospace; }
.metadata-viewer { position: relative; height: calc(100vh - 332px); min-height: 380px; overflow: hidden; isolation: isolate; border: 1px solid var(--opos-border-default); border-radius: var(--opos-radius-large); background: #080b09; color: #fff; box-shadow: var(--opos-shadow-frame); }
.metadata-viewer-backdrop { position: absolute; z-index: -2; inset: -48px; background-image: linear-gradient(rgba(5,8,6,.82),rgba(5,8,6,.9)),var(--metadata-bg); background-position: center; background-size: cover; filter: blur(32px); opacity: .72; }
.metadata-viewer::after { content: ""; position: absolute; z-index: -1; inset: 0; background: rgba(7,10,8,.46); pointer-events: none; }
.metadata-viewer-bar { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--opos-space-4); padding: 10px 16px 10px 24px; border-bottom: 1px solid rgba(255,255,255,.13); background: rgba(7,10,8,.62); }
.metadata-viewer-bar > div:first-child { min-width: 0; display: grid; gap: 2px; }.metadata-viewer-bar strong { font-size: 14px; }.metadata-viewer-bar span { overflow: hidden; color: rgba(255,255,255,.64); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.metadata-viewer-tools { display: flex; gap: 4px; }.metadata-viewer-tools .icon-button { color: #fff; }.metadata-viewer-tools .icon-button:hover { background: rgba(255,255,255,.12); }
.metadata-viewer-body { height: calc(100% - 64px); min-height: 0; display: grid; grid-template-columns: 52px minmax(380px,1fr) minmax(500px,560px) 52px; align-items: stretch; }
.metadata-image-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; padding: clamp(16px,3vw,44px) 12px; }
.metadata-image-stage img { position: absolute; inset: clamp(16px,3vw,44px) 12px; display: block; width: calc(100% - 24px); height: calc(100% - clamp(16px,3vw,44px) - clamp(16px,3vw,44px)); max-width: none; max-height: none; object-fit: contain; }
.metadata-viewer.image-cover .metadata-image-stage { overflow: hidden; }.metadata-viewer.image-cover .metadata-image-stage img { object-fit: cover; }
.metadata-nav { align-self: center; width: 44px; height: 64px; display: grid; place-items: center; border: 0; border-radius: var(--opos-radius-small); background: rgba(0,0,0,.38); color: #fff; cursor: pointer; }.metadata-nav:hover { background: rgba(0,0,0,.72); }.metadata-nav .ph { font-size: 24px; }
.metadata-panel { min-width: 0; min-height: 0; margin: 12px 0; overflow: hidden; border: 1px solid var(--opos-border-default); border-radius: var(--opos-radius-default); background: var(--opos-surface-raised); color: var(--opos-text-primary); box-shadow: var(--opos-shadow-popover); }
.metadata-panel-scroll { height: 100%; min-height: 0; overflow-y: auto; padding: var(--opos-space-5); }
.metadata-editor-host .meta-layout { display: block; }.metadata-editor-host .meta-preview { display: none; }.metadata-editor-host .inline-form { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px 14px; }.metadata-editor-host .form-row { min-width: 0; max-width: none !important; }.metadata-editor-host .search-combobox,.metadata-editor-host .search-combobox input { width: 100%; min-width: 0; }
.metadata-review-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--opos-border-subtle); }.metadata-review-actions > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }.metadata-reject-note { flex-basis: 100%; color: var(--opos-text-secondary); font-size: 12px; }
.hide-technical .meta-technical { display: none; }
.metadata-settings { position: absolute; z-index: 60; top: 56px; right: 16px; width: min(330px,calc(100% - 32px)); padding: var(--opos-space-4); border: 1px solid var(--opos-border-default); border-radius: var(--opos-radius-default); background: var(--opos-surface-raised); color: var(--opos-text-primary); box-shadow: 0 18px 60px rgba(0,0,0,.42); opacity: 1; }.settings-popover-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }.metadata-settings label { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--opos-border-subtle); font-size: 13px; }.metadata-settings label:first-of-type { border-top: 0; }.metadata-settings input { width: 18px; height: 18px; accent-color: var(--opos-action-primary); }.metadata-settings select { width: auto; min-width: 90px; }
.metadata-empty { min-height: 520px; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 32px; text-align: center; border: 1px solid var(--opos-border-default); border-radius: var(--opos-radius-large); background: var(--opos-surface-raised); }.metadata-empty > div .ph { font-size: 36px; color: var(--opos-text-accent); }.metadata-empty h2,.metadata-empty p { margin: 0; }.metadata-empty p { color: var(--opos-text-secondary); }
.metadata-edit-dialog { max-width: 1180px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; }.metadata-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }.metadata-dialog-heading h3 { margin-top: 4px; }.metadata-dialog-body { min-height: 0; overflow-y: auto; padding-right: 4px; }.metadata-edit-dialog > .modal-actions { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--opos-border-subtle); }
.metadata-edit-dialog .inline-form { display: grid; grid-template-columns: 1fr 1fr; }.metadata-edit-dialog .inline-form .form-row { min-width: 0; max-width: none !important; }.metadata-edit-dialog .search-combobox,.metadata-edit-dialog .search-combobox input { width: 100%; min-width: 0; }
.metadata-edit-dialog [data-act="save-meta"],.metadata-edit-dialog [data-act="save-meta"] + span { display: none; }
.bulk-metadata-dialog { max-width: 760px; }.bulk-metadata-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0 12px; }.bulk-keywords { grid-column: 1/-1; }
.metadata-focus-mode .staff-topbar,.metadata-focus-mode .staff-sidebar,.metadata-focus-mode .staff-nav-backdrop,.metadata-focus-mode .staff-page-header,.metadata-focus-mode .metadata-toolbar { display: none !important; }.metadata-focus-mode .admin-app,.metadata-focus-mode .staff-shell,.metadata-focus-mode .staff-workspace,.metadata-focus-mode .staff-content-metadata { width: 100%; max-width: none; height: 100vh; margin: 0; padding: 0; }.metadata-focus-mode .staff-shell { display: block; }.metadata-focus-mode .staff-workspace { overflow: hidden; }.metadata-focus-mode .metadata-viewer { height: 100vh; min-height: 100vh; border: 0; border-radius: 0; }.metadata-focus-mode .metadata-viewer-body { height: calc(100vh - 64px); }.metadata-focus-mode .metadata-panel { margin-block: 16px; }.metadata-focus-mode .metadata-panel-scroll { max-height: calc(100vh - 96px); }.metadata-focus-mode .metadata-image-stage img { max-height: calc(100vh - 96px); }

.folder-page-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--opos-border-subtle); }.folder-page-intro p { margin: 0; color: var(--opos-text-secondary); }
.row-actions .icon-button.is-pinned { background: var(--opos-action-primary); color: #fff; }.row-actions .icon-button.is-pinned:hover { background: var(--opos-action-primary-hover); color: #fff; }

/* Operational containers stay neutral. Green is reserved for actions, focus,
   semantic status and compact accents rather than menu/toolbar backgrounds. */
.admin-portal .page-toolbar,
.admin-portal .bulkbar,
.admin-portal .meta-editor,
.admin-portal .modal-dialog,
.admin-portal .action-menu-popover,
.admin-portal .metadata-settings,
.admin-portal .admin-table th { background: var(--opos-surface-raised); }
.staff-nav-item.active { background: var(--opos-surface-raised); color: var(--opos-text-accent); }
.action-menu-item:hover,.action-menu-item:focus-visible,.staff-nav-item:hover { background: var(--opos-surface-default); }
[data-theme="light"] .admin-portal .page-toolbar,
[data-theme="light"] .admin-portal .bulkbar,
[data-theme="light"] .admin-portal .meta-editor,
[data-theme="light"] .admin-portal .modal-dialog,
[data-theme="light"] .admin-portal .action-menu-popover,
[data-theme="light"] .admin-portal .metadata-settings,
[data-theme="light"] .admin-portal .admin-table th { background: #fff; }
[data-theme="dark"] .bulkbar { background: var(--opos-surface-raised); color: var(--opos-text-primary); border-color: var(--opos-border-default); }

.folder-editor-dialog,.catalogue-editor-dialog,.people-editor-dialog,.access-manager-dialog { max-height: calc(100vh - 40px); overflow-y: auto; }
.folder-editor-dialog,.catalogue-editor-dialog,.people-editor-dialog { max-width: 920px; }
.catalogue-page-intro { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--opos-border-subtle); }
.catalogue-page-intro p { margin:0; color:var(--opos-text-secondary); }
.catalogue-create-wide { grid-column:1/-1; }
.check-option { display:flex; align-items:center; gap:10px; min-height:44px; margin:14px 0 10px; }
.folder-pricing-toggle { margin-top:20px; }
.catalogue-summary-table td,.people-summary-table td { vertical-align:middle; }
.summary-copy { max-width:380px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.people-editor-layout { display:grid; grid-template-columns:180px minmax(0,1fr); gap:24px; align-items:start; }
.people-media-editor { display:grid; justify-items:center; gap:12px; overflow:hidden; }
/* the portrait preview had no size rule, so a full-res photo rendered at natural
   size and spilled over the form. Fix it to a thumbnail (focal point rides on
   the inline object-position). */
.portrait-sm { width:150px; height:200px; object-fit:cover; border-radius:12px; background:var(--opos-surface-subtle); }
.portrait-sm.placeholder { display:grid; place-items:center; color:var(--opos-text-secondary); font-weight:700; font-size:32px; letter-spacing:1px; }
/* Global request indicator: a slim indeterminate bar whenever any api() call is
   in flight, so nothing feels dead while it loads. */
html.app-loading::after { content:''; position:fixed; inset:0 0 auto 0; height:3px; z-index:99999; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--accent, #2e7d46), transparent); background-size:40% 100%; background-repeat:no-repeat;
  animation:opos-loadbar 0.9s linear infinite; }
@keyframes opos-loadbar { 0% { background-position:-40% 0; } 100% { background-position:140% 0; } }
.fixed-portrait { width:56px; height:56px; overflow:hidden; display:grid; place-items:center; border-radius:50%; background:var(--opos-surface-subtle); color:var(--opos-text-secondary); font-weight:700; }
.fixed-portrait img { width:100%; height:100%; object-fit:cover; }
.fixed-partner-logo,.partner-admin-logo { width:72px; height:54px; overflow:hidden; display:grid; place-items:center; border:1px solid var(--opos-border-default); border-radius:var(--opos-radius-small); background:#fff; color:#243229; font-weight:700; padding:6px; }
.fixed-partner-logo img,.partner-admin-logo:not(.placeholder) { width:100%; height:100%; object-fit:contain; }
.access-manager-dialog { max-width:760px; }
.share-result-actions { position: static; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--opos-border-subtle); }
.photo-view-controls { display:flex; align-items:center; gap:12px; }.segmented-control { display:inline-flex; padding:3px; border:1px solid var(--opos-border-default); border-radius:10px; background:var(--opos-surface-subtle); }.segmented-control button { min-height:36px; display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border:0; border-radius:7px; background:transparent; color:var(--opos-text-secondary); cursor:pointer; }.segmented-control button[aria-pressed="true"] { background:var(--opos-surface-raised); color:var(--opos-text-primary); box-shadow:var(--opos-shadow-small); }.photo-density { display:flex; align-items:center; gap:7px; color:var(--opos-text-secondary); font-size:12px; }.photo-density select { min-height:36px !important; }
.photo-library-list-head { min-height:52px; display:flex; align-items:center; gap:14px; padding:8px 12px; border:1px solid var(--opos-border-default); border-bottom:0; border-radius:var(--opos-radius-default) var(--opos-radius-default) 0 0; background:var(--opos-surface-raised); }.photo-library-list-head select { min-height:36px; border:0; background:var(--opos-surface-raised); font-weight:700; }.photo-library-list-head #table-selection-count { margin-left:auto; color:var(--opos-text-secondary); font-size:12px; }
.photo-tile-grid { --tile-cols:4; display:grid; grid-template-columns:repeat(var(--tile-cols),minmax(0,1fr)); gap:14px; }.photo-tile-grid.density-large { --tile-cols:3; }.photo-tile-grid.density-compact { --tile-cols:6; }.photo-admin-tile { min-width:0; overflow:hidden; border:1px solid var(--opos-border-default); border-radius:var(--opos-radius-default); background:var(--opos-surface-raised); box-shadow:var(--opos-shadow-small); transition:border-color .16s ease,box-shadow .16s ease; }.photo-admin-tile:focus-visible,.photo-admin-tile.is-selected { border-color:var(--opos-action-primary); box-shadow:0 0 0 2px color-mix(in srgb,var(--opos-action-primary) 20%,transparent); }.photo-tile-media { position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--opos-surface-sunken) center/cover no-repeat; }.photo-tile-media > img { width:100%; height:100%; display:block; object-fit:cover; }.photo-tile-select { position:absolute; z-index:3; top:10px; left:10px; display:grid; place-items:center; width:24px; height:24px; margin:0; background:transparent; }.photo-tile-select input { appearance:none; width:20px; height:20px; margin:0; border:2px solid #fff; border-radius:4px; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.28); cursor:pointer; }.photo-tile-select input:checked { border-color:var(--opos-action-primary); background:var(--opos-action-primary); }.photo-tile-select input:checked::after { content:''; display:block; width:9px; height:5px; margin:4px 0 0 3px; border:solid #fff; border-width:0 0 2px 2px; transform:rotate(-45deg); }.photo-tile-select input:focus-visible { outline:2px solid var(--accent-hi); outline-offset:3px; }.photo-tile-actions { position:absolute; z-index:3; top:10px; right:10px; display:grid; grid-template-columns:repeat(2,40px); gap:6px; opacity:0; transform:translateY(-4px); transition:opacity .16s ease,transform .16s ease; }.photo-tile-actions .icon-button,.photo-tile-actions .action-menu-trigger { width:40px; height:40px; background:rgba(10,12,10,.82); color:#fff; border-color:rgba(255,255,255,.25); }.photo-admin-tile:hover .photo-tile-actions,.photo-admin-tile:focus-within .photo-tile-actions { opacity:1; transform:none; }
.photo-preview-dialog { width:min(1500px,calc(100vw - 32px)); max-width:none; height:min(920px,calc(100vh - 32px)); display:grid; grid-template-rows:auto minmax(0,1fr) auto; row-gap:0; }.photo-preview-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }.photo-preview-head h3 { margin:4px 0 12px; }.photo-preview-stage { min-height:0; display:grid; place-items:center; overflow:hidden; border-radius:var(--opos-radius-default); background:#090b09; }.photo-preview-stage img { display:block; width:100%; height:100%; object-fit:contain; }.photo-preview-actions { margin-top:16px; padding-top:16px; border-top:1px solid var(--opos-border-subtle); }.metadata-edit-dialog { width:min(1480px,calc(100vw - 32px)); max-width:none; }.metadata-edit-dialog .meta-layout { grid-template-columns:minmax(420px,1.2fr) minmax(480px,1fr); }.metadata-edit-dialog .meta-preview a { background-size:contain; }.metadata-edit-dialog .meta-preview img { object-fit:contain; }
.photo-library-search { flex:0 1 300px; min-width:210px; min-height:44px; display:flex; align-items:center; gap:8px; padding:0 8px 0 12px; border:1px solid var(--opos-border-default); border-radius:var(--opos-radius-default); background:var(--opos-surface-raised); }.photo-library-search > .ph { flex:0 0 auto; color:var(--opos-text-secondary); }.photo-library-search input { width:100%; min-width:0; min-height:40px; padding:0; border:0; background:transparent; box-shadow:none; }.photo-library-search input:focus { outline:0; }.photo-library-search:focus-within { outline:2px solid var(--accent-hi); outline-offset:2px; }.photo-library-search .icon-button { min-width:32px; width:32px; height:32px; }.photo-search-count { margin-left:auto; color:var(--opos-text-secondary); font-size:12px; white-space:nowrap; }
.presence-stat { display:grid; gap:7px; }.presence-stat .presence-breakdown { display:flex; gap:12px; color:var(--opos-text-secondary); font-size:12px; }.presence-stat .presence-breakdown b { color:var(--opos-text-primary); }.presence-stat .presence-note { color:var(--opos-text-tertiary); font-size:11px; }
.metadata-position-block { min-width:0; display:flex; align-items:center; gap:12px; }.metadata-position-block > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.metadata-jump-form { display:flex; align-items:center; gap:6px; flex:none; }.metadata-jump-form input { width:62px; min-height:34px; padding:6px 8px; border:1px solid rgba(255,255,255,.32); border-radius:7px; background:rgba(0,0,0,.28); color:#fff; font-weight:800; text-align:right; }.metadata-jump-form span { color:rgba(255,255,255,.7); font-size:12px; white-space:nowrap; }.metadata-jump-form .btn { min-height:34px; color:#fff; border-color:rgba(255,255,255,.3); background:rgba(0,0,0,.3); }
@media (max-width:1200px) { .photo-tile-grid { --tile-cols:3; }.photo-tile-grid.density-large { --tile-cols:2; }.photo-tile-grid.density-compact { --tile-cols:4; }.metadata-edit-dialog .meta-layout { grid-template-columns:minmax(320px,.9fr) minmax(420px,1.1fr); } }
@media (hover:none) { .photo-tile-actions { opacity:1; transform:none; } }
@media (max-width:760px) { .photo-view-controls,.photo-library-search { width:100%; max-width:none; flex-basis:100%; }.photo-view-controls { justify-content:space-between; }.photo-tile-grid,.photo-tile-grid.density-large { --tile-cols:1; }.photo-tile-grid.density-standard,.photo-tile-grid.density-compact { --tile-cols:2; }.photo-tile-actions { opacity:1; transform:none; }.photo-preview-dialog { width:calc(100vw - 16px); height:calc(100vh - 16px); padding:14px; }.metadata-edit-dialog .meta-layout { grid-template-columns:1fr; }.share-result-actions { flex-direction:column-reverse; align-items:stretch; }.share-result-actions .btn { width:100%; } }
.access-back { margin-bottom:12px; }
.access-code-list { display:grid; gap:8px; margin:18px 0; }
.access-code-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px; border:1px solid var(--opos-border-default); border-radius:var(--opos-radius-small); background:var(--opos-surface-default); }
.access-code-row > div:first-child { min-width:0; display:grid; grid-template-columns:auto 1fr; gap:2px 12px; align-items:center; }
.access-code-row strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.access-code-row span { grid-column:1/-1; color:var(--opos-text-secondary); font-size:12px; }
.access-code-actions { display:flex; align-items:center; gap:4px; flex:0 0 auto; }
.access-history { margin-top:16px; border-top:1px solid var(--opos-border-subtle); padding-top:12px; }
.access-history summary { cursor:pointer; font-weight:650; }
.access-history-row { display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--opos-border-subtle); font-size:12px; }
.access-history-row time { color:var(--opos-text-secondary); }

@media (max-width: 1120px) {
  .metadata-viewer-body { grid-template-columns: 44px minmax(280px,1fr) minmax(420px,460px) 44px; }
  .metadata-panel-scroll { padding: 16px; }
}
@media (max-width: 900px) {
  .metadata-toolbar { align-items: stretch; flex-wrap: wrap; }.metadata-shortcuts { width: 100%; margin-left: 0; padding: 0; }
  .metadata-viewer { min-height: 0; }.metadata-viewer-body { min-height: 0; grid-template-columns: 44px minmax(0,1fr) 44px; }.metadata-image-stage { min-height: 420px; }.metadata-panel { grid-column: 1/-1; margin: 0 12px 16px; }.metadata-panel-scroll { max-height: none; }.metadata-nav.next { grid-column: 3; grid-row: 1; }.metadata-nav.previous { grid-column: 1; grid-row: 1; }.metadata-image-stage { grid-column: 2; grid-row: 1; }
  .metadata-focus-mode .metadata-viewer-body { height: calc(100vh - 64px); overflow-y: auto; }.metadata-focus-mode .metadata-panel-scroll { max-height: none; }
}
@media (max-width: 620px) {
  .metadata-toolbar .toolbar-field { width: 100%; min-width: 0; }.metadata-toolbar select { width: 100%; }.metadata-shortcuts { display: none; }
  .metadata-viewer-bar { padding-left: 14px; }.metadata-viewer-body { grid-template-columns: 40px minmax(0,1fr) 40px; }.metadata-image-stage { min-height: 300px; padding-inline: 4px; }.metadata-image-stage img { inset-inline:4px; width:calc(100% - 8px); }.metadata-panel { margin-inline: 8px; }
  .metadata-editor-host .inline-form,.bulk-metadata-grid,.dt-catalogue-grid,.catalogue-create-grid { grid-template-columns: 1fr; }.catalogue-create-wide { grid-column:auto; }.bulk-keywords { grid-column: auto; }.metadata-review-actions { flex-direction: column; }.metadata-edit-dialog { max-height: calc(100vh - 16px); padding: 16px; }.folder-page-intro,.catalogue-page-intro { align-items: stretch; flex-direction: column; }.people-editor-layout { grid-template-columns:1fr; }.access-code-row { align-items:stretch; flex-direction:column; }.access-code-actions { justify-content:flex-end; }.access-history-row { grid-template-columns:1fr 1fr; }.access-history-row .btn { grid-column:1/-1; }.access-history-row time { grid-column:1/-1; }
}

@media (min-width: 901px) {
  .admin-body { height: 100vh; overflow: hidden; }
  .admin-body .staff-topbar { position: relative; }
  .staff-shell { height: calc(100vh - 69px); min-height: 0; }
  .staff-sidebar { position: relative; top: 0; height: 100%; }
  .staff-workspace { height: 100%; overflow-y: auto; }
}
@media (max-width: 700px) {
  .account-settings-layout { grid-template-columns: 1fr; }
  .account-avatar-preview { width: 140px; height: 140px; }
  .public-header .account-menu { position: absolute; top: 14px; right: 52px; }
  .public-header .theme-toggle { right: 92px; }
  .header-search-trigger { right: 132px; }
}
/* the trust checkbox explains itself on the client login too */
.tfa-trust small { display: block; margin-top: 2px; font-size: 11px; opacity: .75; }

/* ---------- free gallery flag ---------- */
.free-flag {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  padding: 5px 11px; border-radius: 3px;
  background: var(--opos-status-success, #40916c); color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.gallery-commerce-bar.is-free { border-left: 3px solid var(--opos-status-success, #40916c); padding-left: 18px; }
.gallery-commerce-bar.is-free .eyebrow { color: var(--opos-status-success, #40916c); }

/* ---------- "our clients" marquee ---------- */
.home-clients { padding: clamp(56px,7vw,96px) 0; border-top: 1px solid var(--opos-border-subtle); }
.home-clients-head, .home-clients-link {
  width: min(100%, var(--public-max)); margin-inline: auto; padding-inline: var(--public-gutter);
}
.home-clients-head h2 { font-size: clamp(30px,3.4vw,48px); letter-spacing: -.04em; margin: 12px 0 8px; }
.home-clients-head p { color: var(--opos-text-secondary); max-width: 52ch; }
.client-marquee {
  display: flex; gap: 0; margin: 38px 0 30px; overflow: hidden;
  /* fade the edges so logos slide in and out rather than being chopped */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.client-track {
  display: flex; align-items: center; gap: clamp(40px, 6vw, 96px);
  list-style: none; margin: 0; padding: 0 clamp(20px, 3vw, 48px) 0 0;
  flex: none; min-width: 100%; justify-content: space-around; animation: client-scroll 38s linear infinite;
}
.client-marquee:hover .client-track,.client-marquee:focus-within .client-track { animation-play-state: paused; }
.client-cell { flex: none; }
.client-cell a, .client-cell > span { display: grid; place-items: center; height: 62px; opacity: .72; transition: opacity .2s ease, filter .2s ease; }
.client-cell img { max-height: 62px; max-width: 190px; width: auto; object-fit: contain; display: block; }
.client-cell a:hover { opacity: 1; }
.client-wordmark { font-size: 19px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; color: var(--opos-text-secondary); }
@keyframes client-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
/* honour reduced-motion: stop the scroll and let it wrap instead */
@media (prefers-reduced-motion: reduce) {
  .client-track { animation: none; }
  .client-marquee { -webkit-mask-image: none; mask-image: none; overflow: visible; }
  .client-marquee .client-track:last-child { display: none; }
  .client-track { flex-wrap: wrap; justify-content: center; row-gap: 26px; padding: 0 var(--public-gutter); }
}

/* ---------- journal ---------- */
.blog-body { padding-top: clamp(48px,6vw,80px); padding-bottom: clamp(60px,8vw,110px); }
.blog-lead { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(24px,3vw,48px); align-items: center; text-decoration: none; color: var(--text); margin-bottom: clamp(48px,6vw,84px); }
.blog-lead-media { position: relative; aspect-ratio: 3/2; overflow: hidden; background: var(--panel-2) center/cover no-repeat; border-radius: 4px; }
.blog-lead-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.blog-lead:hover .blog-lead-media img { transform: scale(1.02); }
.blog-lead-copy h2 { font-size: clamp(28px,3vw,44px); letter-spacing: -.035em; line-height: 1.08; margin: 10px 0 12px; }
.blog-lead-copy p { color: var(--opos-text-secondary); line-height: 1.6; margin-bottom: 16px; max-width: 46ch; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(26px,3vw,44px); }
.blog-card { text-decoration: none; color: var(--text); display: block; }
.blog-card-media { aspect-ratio: 3/2; overflow: hidden; background: var(--panel-2) center/cover no-repeat; border-radius: 4px; margin-bottom: 14px; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.blog-card:hover .blog-card-media img { transform: scale(1.03); }
.blog-card h3 { font-size: 20px; letter-spacing: -.02em; margin: 8px 0 8px; line-height: 1.25; }
.blog-card p { color: var(--opos-text-secondary); font-size: 14px; line-height: 1.55; }
.post-hero h1 { max-width: 20ch; }
.post-meta { color: rgba(255,255,255,.72); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.post-cover { margin-top: clamp(-60px,-4vw,-30px); position: relative; z-index: 2; }
.post-cover img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 4px; display: block; }
.post-prose { max-width: 680px; margin: clamp(36px,4vw,56px) auto 0; }
.post-standfirst { font-size: clamp(18px,1.7vw,21px); line-height: 1.6; color: var(--text); font-weight: 500; margin-bottom: 26px; }
.post-prose p { line-height: 1.75; margin-bottom: 20px; }
.post-back { max-width: 680px; margin: 40px auto 0; }
@media (max-width: 860px) { .blog-lead { grid-template-columns: 1fr; } }

/* team entries in "In this frame": same row as a driver, monogram for a number */
.frame-roundel-team { font-size: 12px !important; letter-spacing: .04em; background: var(--opos-color-green-600) !important; color: #fff !important; }
[data-theme="light"] .frame-roundel-team { background: var(--opos-color-green-600) !important; }

/* driver/team bundle picker sits beside "buy complete gallery" */
.subject-bundle-note { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); }

/* storage meter (seller storefront tab) */
.storage-meter { height: 10px; border-radius: 5px; background: var(--opos-surface-subtle, rgba(255,255,255,.08)); overflow: hidden; max-width: 420px; }
.storage-meter-fill { height: 100%; border-radius: 5px; background: var(--accent, #2d6a4f); transition: width .3s; }
.storage-meter-fill.warn { background: var(--opos-status-warning, #c77d13); }
.storage-meter-fill.danger { background: var(--opos-status-danger, #c0392b); }
/* "All photographers" — the way back to the marketplace from the agency
   catalogue. Set apart from the catalogue's own nav so it reads as leaving
   this site rather than as another section of it. */
.nav-back-to-main { display: inline-flex; align-items: center; gap: 6px; opacity: .82; }
.nav-back-to-main:hover { opacity: 1; }
.public-desktop-nav .nav-back-to-main { margin-left: 6px; padding-left: 14px; border-left: 1px solid var(--border); }
.nav-back-to-main i, .nav-back-to-main svg { font-size: 1em; }

/* Why a photo has no competitors on it. Sits under the chips, where someone
   looks when the answer they expected is not there. */
.dt-catalogue-note { margin: 10px 0 0; }

/* Upgrades tab. The settings column is 760px wide, which suits a form and
   starves a page of pricing cards — three plan cards, five add-on cards and a
   storage ladder were all being squeezed into it with a wide empty gutter to
   the right. This tab gets its own width and stacks full-width panels. */
.upgrades-layout { width: 100%; max-width: 1180px; display: flex; flex-direction: column; gap: 14px; }
.upgrades-layout .plan-cards { max-width: none; }
.upgrades-layout .panel { width: 100%; max-width: none; }
/* Storage is the thing sellers most often need to buy, so it reads as a
   headline figure rather than a line of help text. */
.panel-storage { border-color: var(--accent, #2d6a4f); }
.storage-headline { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.storage-headline-fig { display: flex; flex-direction: column; line-height: 1.15; }
.storage-headline-fig b { font-size: 30px; font-weight: 680; letter-spacing: -.02em; }
.storage-headline-fig span { font-size: 12.5px; color: var(--muted); }
.storage-headline-bar { flex: 1 1 280px; min-width: 0; }
.storage-headline-bar .storage-meter { max-width: none; }
.storage-headline.is-tight .storage-headline-fig b { color: var(--opos-status-warning, #c77d13); }
/* The tier ladder, as pickable cards rather than a select box. */
.tier-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.tier-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.tier-card-current { border-color: var(--accent, #2d6a4f); box-shadow: 0 0 0 1px var(--accent, #2d6a4f) inset; }
.tier-card-size { font-size: 17px; font-weight: 670; letter-spacing: -.01em; }
.tier-card-photos { font-size: 12px; color: var(--muted); }
.tier-card-price { font-size: 20px; font-weight: 660; margin-top: 2px; }
.tier-card-price span { font-size: 12px; font-weight: 400; color: var(--muted); }
.tier-card .btn, .tier-card .badge { margin-top: 8px; }

/* "Need more than 5 TB?" — the ceiling of the plans above this one. Quiet while
   there is still room to buy, and promoted to an accent block once the seller
   has taken the largest tier their plan offers and the ladder has nothing left
   to sell them. */
.storage-unlock { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; }
.storage-unlock.is-blocking { border-color: var(--accent, #2d6a4f); background: color-mix(in srgb, var(--accent, #2d6a4f) 7%, transparent); }
.storage-unlock strong { display: block; font-size: 14px; margin-bottom: 3px; }
.storage-unlock p { margin: 0; font-size: 13px; color: var(--muted); max-width: 62ch; }
.storage-unlock .btn { flex: none; }

/* plan cards (free / pro / agency) */
.plan-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; max-width: 720px; }
.plan-card { border: 1px solid var(--border); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.plan-card-current { border-color: var(--accent, #2d6a4f); box-shadow: 0 0 0 1px var(--accent, #2d6a4f) inset; }
.plan-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-card-price { font-size: 26px; font-weight: 680; letter-spacing: -.02em; }
.plan-card-price span { font-size: 13px; font-weight: 400; color: var(--muted); }
.plan-card-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); flex: 1; }
.plan-card-feats li::before { content: "✓ "; color: var(--accent-text, var(--accent)); font-weight: 700; }
.plan-card .btn { margin-top: 4px; }
/* getting-started onboarding card (optional YouTube walkthrough + CTA) */
.getting-started { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; border: 1px solid var(--border); border-radius: 14px; padding: 24px; margin-bottom: 20px; background: var(--opos-surface-subtle, rgba(127,127,127,.04)); }
.getting-started .gs-copy h2 { margin: 8px 0 10px; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.02em; }
.getting-started .gs-copy p { color: var(--muted); margin: 0 0 16px; max-width: 46ch; }
.getting-started .gs-video { aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; background: #000; }
.getting-started .gs-video iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 720px) { .getting-started { grid-template-columns: 1fr; } }
.form-eg { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.form-eg b { color: var(--accent-text, var(--accent)); font-weight: 600; }

/* Platform apex pages (home, /stores, store profile). These sections had NO
   layout at all, so their content sat flush against the viewport edges, give
   them the same centered column + gutter every other public section uses. */
.content-block, .sell-hero:not(.terms-hero) {
  width: min(100%, var(--public-max));
  margin-inline: auto;
  padding-inline: var(--public-gutter);
  box-sizing: border-box;
}
.sell-hero:not(.terms-hero) { padding-top: clamp(60px, 9vw, 128px); padding-bottom: clamp(28px, 4vw, 56px); text-align: center; }
.sell-hero:not(.terms-hero) h1 { font-size: clamp(40px, 6vw, 84px); line-height: .96; letter-spacing: -.045em; margin: 14px 0 18px; }
.sell-hero:not(.terms-hero) .sell-hero-sub { max-width: 620px; margin: 0 auto 26px; color: var(--muted); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.6; }
/* storefront social links in the footer (paid plans) */
.footer-socials { display: flex; gap: 14px; margin-top: 14px; }
.footer-socials a { font-size: 21px; color: var(--muted); transition: color 140ms ease; }
.footer-socials a:hover, .footer-socials a:focus-visible { color: var(--opos-text-accent, inherit); }

/* live marketplace numbers on the platform (master) page hero */
.platform-stat-strip { margin: -8px auto 24px; text-align: center; color: var(--muted); font-size: 14px; letter-spacing: .02em; }
.platform-stat-strip strong { color: var(--opos-text-accent, inherit); font-size: 16px; }
.content-block { padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(56px, 8vw, 110px); }
.content-block > h1, .content-block > h2 { text-align: center; letter-spacing: -.03em; }

/* marketplace directory */
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.store-card { display: block; border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: var(--radius, 8px); overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s; }
.store-card:hover { transform: translateY(-2px); }
.store-card-cover { position: relative; aspect-ratio: 16/10; background: var(--opos-surface-subtle, rgba(255,255,255,.05)); }
.store-card-flagship { border-color: var(--accent, #2d6a4f); }
/* Badge rail on a store card. The positioning moved off .store-flag and onto
   the wrapper so a store can carry more than one (the agency is both Flagship
   and, once it qualifies, Top seller) without them landing on top of each
   other. .store-flag keeps its own look so nothing else that uses it moves. */
.dg-bin-note { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:0 0 16px; padding:12px 14px; border:1px solid var(--opos-status-warning, #c77d13); border-left-width:4px; border-radius:10px; background:color-mix(in srgb, var(--opos-status-warning, #c77d13) 8%, transparent); font-size:13px; }
.dg-bin-note.dg-ok { border-color:var(--opos-status-success, #2e7d46); background:color-mix(in srgb, var(--opos-status-success, #2e7d46) 8%, transparent); }
.dg-bin-note .dg-bin-head { min-width:220px; flex:1 1 260px; }
.dg-bin-note .dg-bin-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.dg-bin-note .btn { flex:none; }
/* Inactive-store pending-deletion warning modal */
.modal-dialog.dg-warn-modal { border-top:4px solid var(--opos-status-danger, #c0392b); }
.modal-dialog.dg-warn-modal h3 { color:var(--opos-status-danger, #c0392b); }
.store-flags { position: absolute; top: 10px; left: 10px; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 20px); }
.store-flag { padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; background: var(--accent, #2d6a4f); color: var(--accent-on, #fff); }
/* Earned on sales volume, so it reads as an accolade rather than a plan tag. */
.store-flag-top-seller { background: #b8860b; color: #fff; }
.store-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.store-card-body { padding: 12px 14px; }
.store-card-body p { margin: 4px 0; font-size: 13px; color: var(--muted); }
.store-card-body .muted { font-size: 12px; }
.store-samples { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 10px; }
.store-samples img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--radius, 8px); }

/* ---- platform (master site) marketing pages ------------------------------ */
/* Photo-led dark hero: a mosaic of real marketplace imagery behind an overlay.
   Deliberately dark in BOTH themes, like the storefront home hero, the copy
   sits on photography, not on a surface. */
.plat-hero { position: relative; overflow: hidden; background: #0b120e; color: #fff; }
.plat-hero-mosaic { position: absolute; inset: -2%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; opacity: .5; filter: saturate(.9); }
.plat-hero-mosaic img { width: 100%; height: 100%; object-fit: cover; min-height: 160px; }
.plat-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,10,8,.86), rgba(6,10,8,.62) 45%, rgba(6,10,8,.9)); }
.plat-hero-copy { position: relative; z-index: 1; width: min(880px, 92vw); margin: 0 auto; padding: clamp(84px, 12vh, 170px) var(--public-gutter) clamp(56px, 8vh, 110px); text-align: center; }
.plat-hero-copy h1 { font-size: clamp(44px, 6.4vw, 92px); line-height: .96; letter-spacing: -.045em; margin: 14px 0 18px; color: #fff; }
.plat-hero-copy > p { max-width: 640px; margin: 0 auto 30px; color: rgba(255,255,255,.82); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.6; }
.plat-hero-actions { display: flex; gap: 22px; align-items: center; justify-content: center; flex-wrap: wrap; }
.plat-hero .hero-text-action, .cta-band .hero-text-action, .store-profile-hero .hero-text-action { color: #fff; }
/* outlined button that sits on the dark hero/CTA imagery */
.btn.light-outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.45); }
.btn.light-outline:hover, .btn.light-outline:focus-visible { background: rgba(255,255,255,.12); color: #fff; }
.gg-pager { display: flex; gap: 16px; align-items: center; justify-content: center; margin-top: 26px; }
.gg-store-matches { margin: 0 0 30px; padding: 0 0 24px; border-bottom: 1px solid var(--line); }
.gg-store-matches .eyebrow { text-align: center; margin-bottom: 14px; }

/* global-gallery buy card (add to basket, no store navigation) */
.gg-card { display: flex; flex-direction: column; }
.gg-card .gg-quickview { border: 0; padding: 0; background: none; cursor: zoom-in; width: 100%; display: block; }
.gg-card .gg-add { margin-top: 10px; width: 100%; justify-content: center; }

/* header basket icon + badge */
#basket-link { position: relative; }
.basket-badge { position: absolute; top: -6px; right: -8px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; line-height: 17px; text-align: center; font-weight: 700; }

/* basket page */
.basket-list { display: flex; flex-direction: column; gap: 22px; }
.basket-group h3 { margin: 0 0 10px; }
.basket-row { display: grid; grid-template-columns: 64px 1fr auto auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.basket-row img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; }
.basket-row-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.basket-row-price { font-weight: 700; }
.basket-checkout { align-self: start; position: sticky; top: 90px; }
.photo-add-basket { width: 100%; justify-content: center; margin-top: 4px; }

/* global-gallery quick-view modal */
.gg-quickview-overlay { display: flex; align-items: center; justify-content: center; }
.gg-quickview-dialog { position: relative; background: var(--surface); border-radius: 14px; max-width: min(920px, 94vw); max-height: 92vh; overflow: hidden; display: grid; grid-template-columns: 1fr 260px; }
.gg-quickview-media { background: #111; display: flex; align-items: center; justify-content: center; }
.gg-quickview-media img { max-width: 100%; max-height: 92vh; object-fit: contain; }
.gg-quickview-meta { padding: 22px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.gg-quickview-close { position: absolute; top: 10px; right: 10px; z-index: 2; background: rgba(0,0,0,.5); color: #fff; }
@media (max-width: 720px) {
  .gg-quickview-dialog { grid-template-columns: 1fr; max-height: 92vh; overflow-y: auto; }
  .basket-row { grid-template-columns: 52px 1fr auto auto; }
  .basket-checkout { position: static; }
}
/* live numbers, worn like a badge under the hero copy */
.plat-stat-row { display: flex; gap: clamp(22px, 4vw, 54px); justify-content: center; flex-wrap: wrap; margin-top: 44px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.18); }
.plat-stat-row span { display: grid; gap: 2px; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.plat-stat-row strong { font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -.02em; color: var(--accent-on-dark, #b8e1c8); }

.plat-section { max-width: var(--public-max); margin: 0 auto; }
.plat-page-head { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(64px, 9vw, 120px); }
.plat-gallery-search { display: flex; gap: 10px; align-items: center; max-width: 640px; margin: 0 0 26px; }
.plat-gallery-search input { flex: 1; min-width: 0; }
/* Stores directory: the gallery search and the name filter sit on ONE row, the
   filter collapsed behind an icon to its right. It used to be a second full
   input stacked underneath with no styling at all — a bare browser-default box
   that matched nothing else on the site. */
.store-search-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.store-search-row .gallery-search-box { flex: 1 1 320px; max-width: 520px; margin: 22px 0 0; }
.store-name-filter { display: flex; align-items: flex-end; gap: 10px; margin: 0; }
.store-filter-toggle { flex: none; width: 46px; height: 46px; }
.store-filter-toggle.is-active { border-color: var(--accent); color: var(--accent-text, var(--accent)); }
.store-filter-field { margin: 0; width: 200px; }
/* .form-row sets display:flex, and an author display beats the UA [hidden]
   rule — so the attribute alone never collapses the field. Make [hidden] win. */
.store-filter-field[hidden] { display: none; }
.store-filter-field input { min-height: 46px; font-size: 15px; }
.store-search-row + .plat-count { display: block; margin: 12px 0 26px; }
@media (max-width: 560px) {
  .store-filter-field { width: 100%; }
  .store-name-filter { flex: 1 1 100%; }
}

/* the reusable "search the global gallery" box — the SAME box the gallery uses:
   a single rounded .form-row input (no button). Enter → /gallery?q=… */
.gallery-search-box { max-width: 520px; margin: 22px 0 0; }
.gallery-search-box .form-row { margin: 0; }
.gallery-search-box input { min-height: 46px; font-size: 15px; }
.gallery-search-box.centered { margin-inline: auto; }
.gallery-search-box.on-dark input { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.34); color: #fff; }
.gallery-search-box.on-dark input::placeholder { color: rgba(255,255,255,.68); }
.plat-count { flex: none; color: var(--muted); font-size: 13px; white-space: nowrap; }
.plat-teaser { margin-top: 6px; }
.plat-more { text-align: center; margin: 30px 0 0; }
.plat-open-note { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--opos-border-default); display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; }
.plat-open-note p { margin: 0; color: var(--muted); }

/* the two home perk sections ("For buyers & fans" / "For photographers") need
   breathing room above their eyebrows — the shared .plat-section wrapper has no
   vertical rhythm of its own */
.plat-perks { padding-top: clamp(64px, 9vw, 120px); }
/* perk cards, the "why use us" grids for buyers and photographers */
.perk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 8px; }
.perk-card { border: 1px solid var(--opos-border-default); border-radius: var(--opos-radius-large, 12px); background: var(--opos-surface-raised); padding: clamp(18px, 2vw, 26px); }
.perk-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--opos-action-primary) 14%, transparent); color: var(--opos-text-accent); font-size: 20px; margin-bottom: 12px; }
.perk-card h3 { margin: 0 0 7px; font-size: 17px; letter-spacing: -.01em; }
.perk-card p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.plat-perks.alt .perk-card { background: var(--opos-surface-subtle); }

/* three numbered steps for sellers */
.plat-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(16px, 3vw, 36px); margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--opos-border-default); }
.plat-steps > div { display: grid; gap: 6px; align-content: start; }
.plat-steps span { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--opos-action-primary); color: var(--accent-on, #fff); font-weight: 740; font-size: 14px; }
.plat-steps strong { font-size: 16.5px; letter-spacing: -.01em; }
.plat-steps p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }

/* closing call-to-action band, dark in both themes like the hero */
.cta-band { background: #0b120e; color: #fff; margin-top: clamp(40px, 6vw, 80px); }
.cta-band-inner { width: min(820px, 92vw); margin: 0 auto; padding: clamp(64px, 9vw, 120px) var(--public-gutter); text-align: center; }
.cta-band h2 { font-size: clamp(34px, 4.6vw, 62px); line-height: 1.02; letter-spacing: -.04em; margin: 12px 0 26px; color: #fff; }

/* store profile page: cover-photo hero + stats */
/* the "Recent work" section sits directly under the dark hero — give it space
   below the hero and before the footer (the hero's own padding is inside it) */
.store-profile-hero + .editorial-section { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(64px, 9vw, 120px); }
.store-profile-hero { position: relative; overflow: hidden; background: #0b120e; color: #fff; min-height: 420px; display: grid; align-items: end; }
.store-profile-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.store-profile-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,10,8,.55), rgba(6,10,8,.88)); }
.store-profile-copy { position: relative; z-index: 1; width: min(100%, var(--public-max)); margin: 0 auto; padding: clamp(70px, 9vw, 120px) var(--public-gutter) clamp(34px, 5vw, 56px); }
.store-profile-copy h1 { font-size: clamp(38px, 5.4vw, 76px); letter-spacing: -.04em; line-height: .98; margin: 10px 0 10px; color: #fff; }
.store-profile-copy > p { max-width: 560px; color: rgba(255,255,255,.82); margin: 0 0 22px; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.55; }
.store-profile-copy .eyebrow.light a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.store-profile-hero .plat-hero-actions { justify-content: flex-start; }
.store-profile-hero .plat-stat-row { justify-content: flex-start; margin-top: 30px; }
@media (max-width: 720px) {
  .plat-hero-mosaic { grid-template-columns: repeat(3, 1fr); }
  .plat-gallery-search { flex-wrap: wrap; }
  .plat-stat-row { gap: 20px; }
}

/* seller onboarding checklist */
.onboard-steps { list-style: none; margin: 0; padding: 0; }
.onboard-steps li { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; }
.onboard-steps li.done { color: var(--muted); }
.onboard-tick { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid var(--border); color: var(--accent-text, #2d6a4f); flex: none; }
.onboard-steps li.done .onboard-tick { background: var(--accent, #2d6a4f); border-color: var(--accent, #2d6a4f); color: #fff; }
.onboard-steps li button { margin-left: auto; }

/* storefront theme colour picker */
.theme-picker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.theme-picker input[type="color"] { width: 42px; height: 32px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius, 6px); background: none; cursor: pointer; }
.theme-picker input[type="text"] { width: 96px; font-family: ui-monospace, monospace; }
.theme-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; padding: 0; }
.theme-swatch:hover { transform: scale(1.12); }

/* platform master-admin tab */
.stat-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.ok-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent, #2d6a4f); margin-right: 6px; vertical-align: middle; }
.platform-agency-row { background: var(--opos-surface-subtle, rgba(255,255,255,.04)); }
.platform-agency-row td { font-weight: 500; }
.banner-note { background: var(--opos-surface-subtle, rgba(255,255,255,.05)); border: 1px solid var(--border); border-radius: var(--radius, 8px); padding: 10px 14px; font-size: 13px; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; border-bottom: 1px dotted var(--border); }
.linkish:hover { color: var(--accent-text, var(--accent)); border-bottom-color: currentColor; }
.row-suspended td { opacity: .55; }
.row-suspended td:last-child { opacity: 1; }
.activity-feed { list-style: none; margin: 0; padding: 0; }
.activity-feed li { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.activity-feed li:last-child { border-bottom: 0; }
.activity-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--accent, #2d6a4f); transform: translateY(-1px); }
.activity-body { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.activity-label { font-weight: 600; }
.activity-detail { font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.activity-feed time { flex: 0 0 auto; font-size: 12px; white-space: nowrap; }
/* per-store management photo grid (superadmin) */
.admin-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.admin-photo-cell { margin: 0; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--border); border-radius: var(--radius, 8px); padding: 8px; background: var(--opos-surface-subtle, rgba(127,127,127,.04)); }
.admin-photo-cell img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 4px; background: var(--opos-surface-subtle, rgba(127,127,127,.08)); }
.admin-photo-cell figcaption { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-photo-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.admin-photo-actions { display: flex; gap: 6px; margin-top: 2px; }
.admin-photo-actions .btn { flex: 1; justify-content: center; }

/* competitor biometric consent page (/verify) */
.verify-page { max-width: 680px; padding-top: clamp(40px, 6vw, 84px); padding-bottom: clamp(40px, 6vw, 84px); }
.verify-intro { color: var(--muted); font-size: 16px; line-height: 1.6; margin-bottom: 26px; }
.verify-card { border: 1px solid var(--opos-border-default); border-radius: var(--opos-radius-large, 12px); background: var(--opos-surface-raised); padding: clamp(20px, 3vw, 32px); }
.verify-optin { align-items: flex-start; gap: 12px; margin: 18px 0; padding: 16px; border: 1px solid var(--opos-border-default); border-radius: 10px; }
.verify-optin small { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.verify-tos { border-left: 3px solid var(--accent); background: var(--opos-surface-subtle); padding: 16px 18px; border-radius: 8px; margin: 18px 0; }
.verify-tos strong { display: block; margin-bottom: 8px; font-size: 14px; }
.verify-tos p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.65; }
.verify-tos-meta { color: var(--muted); font-size: 12px; }
.verify-accept { width: 100%; justify-content: center; margin-top: 6px; }
.verify-accept:disabled { opacity: .5; cursor: not-allowed; }

/* enrolment capture (reference photos at prompted angles) */
.enrol-stage { position: relative; margin: 16px 0; border-radius: 12px; overflow: hidden; background: #0b120e; }
.enrol-stage video { width: 100%; display: block; max-height: 60vh; object-fit: cover; transform: scaleX(-1); }
.enrol-prompt { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px; background: linear-gradient(transparent, rgba(6,10,8,.86)); color: #fff; font-size: 16px; font-weight: 600; text-align: center; }
.enrol-dots { position: absolute; top: 12px; left: 0; right: 0; display: flex; gap: 8px; justify-content: center; }
.enrol-dots span { width: 26px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.35); }
.enrol-dots span.done { background: var(--accent); }
.req-mark { color: var(--opos-status-danger, #c0392b); font-weight: 600; font-size: 12px; }
.assisted-banner { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; margin-bottom: 18px; border-radius: 10px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: 13.5px; line-height: 1.55; }
.assisted-banner strong { display: flex; gap: 8px; align-items: center; }

/* SFTP connection details */
.conn-block { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--accent); border-radius: 10px; background: color-mix(in srgb, var(--accent) 6%, transparent); }
.conn-title { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--opos-text-accent); margin-bottom: 8px; }
.conn-table td { vertical-align: middle; }
.conn-table td:first-child { width: 42%; color: var(--muted); font-size: 12.5px; }
.conn-value { font-family: ui-monospace, monospace; font-size: 13px; background: var(--opos-surface-subtle); padding: 2px 7px; border-radius: 5px; user-select: all; }
.conn-setup { margin-top: 12px; }
.conn-setup summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.conn-pre { margin: 8px 0; padding: 12px; border-radius: 8px; background: #0b120e; color: #d7e5dc; font-size: 12px; line-height: 1.55; overflow-x: auto; white-space: pre; }

/* ---------- Edit page (non-destructive photo corrections) ---------- */
/* The stage is dark on purpose: a mid-grey surround is the standard for judging
   exposure, because a light UI makes every photo look darker than it is. */
.edit-picker { padding-bottom: 14px; }
.edit-strip { display: flex; gap: 8px; overflow-x: auto; padding: 12px 2px 4px; scrollbar-width: thin; }
.edit-thumb { position: relative; flex: 0 0 auto; width: 84px; height: 60px; padding: 0; border: 2px solid transparent; border-radius: 8px; background: var(--opos-surface-subtle); cursor: pointer; overflow: hidden; transition: border-color .12s ease, transform .12s ease; }
.edit-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.edit-thumb:hover { transform: translateY(-1px); }
.edit-thumb:focus-visible { outline: 2px solid var(--opos-border-focus, var(--accent)); outline-offset: 2px; }
.edit-thumb.is-on { border-color: var(--accent); }
.edit-dot { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px rgba(0,0,0,.45); }

.edit-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.edit-stage-wrap { position: sticky; top: 78px; }
/* filter definitions only — never painted, but must stay in the document for
   url(#ed-fx) to resolve, so it cannot be display:none */
.edit-fx-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* The stage is sized in JS to the photo's exact aspect (see fitStage) and the
   image fills it edge to edge. This matters: the crop overlay is positioned in
   PERCENTAGES OF THE STAGE, so any letterboxing would put the crop box somewhere
   the crop isn't. Letting CSS centre the image inside a wider box did exactly
   that to every portrait frame. */
.edit-stage { position: relative; overflow: hidden; border-radius: 12px; background: #14181a; margin: 0 auto; }
.edit-stage img { display: block; width: 100%; height: 100%; transform-origin: center center; will-change: transform, filter; }
.edit-stage-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 10px; }
.edit-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.edit-stage-bar .warn { color: var(--warn-text, var(--warn)); font-weight: 600; }
.edit-croprow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }

/* Crop overlay: the area OUTSIDE the box is dimmed by a huge box-shadow, which
   is one paint instead of four positioned scrims. */
.edit-crop { position: absolute; box-shadow: 0 0 0 9999px rgba(8,12,10,.62); border: 1px solid rgba(255,255,255,.9); cursor: move; touch-action: none; }
.edit-crop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.edit-crop-grid { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, rgba(255,255,255,.35) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.35) 1px, transparent 1px);
  background-size: 33.333% 33.333%; }
/* Screen-aligned levelling grid shown while straightening the horizon. White
   lines with mix-blend-mode:difference so they stay visible over any image;
   thirds on both axes plus a bolder centre horizontal line for the horizon. */
.edit-straighten-grid { position: absolute; inset: 0; pointer-events: none; z-index: 6;
  mix-blend-mode: difference;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(to right, #fff 1px, transparent 1px),
    linear-gradient(to right, #fff 1px, transparent 1px),
    linear-gradient(to bottom, #fff 1px, transparent 1px),
    linear-gradient(to bottom, #fff 1px, transparent 1px),
    linear-gradient(to bottom, #fff 2px, transparent 2px),
    linear-gradient(to right, #fff 2px, transparent 2px);
  background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px, 100% 2px, 2px 100%;
  background-position: 33.333% 0, 66.666% 0, 0 33.333%, 0 66.666%, 0 50%, 50% 0; }
.edit-handle { position: absolute; width: 18px; height: 18px; background: #fff; border-radius: 3px; box-shadow: 0 1px 4px rgba(0,0,0,.5); touch-action: none; }
.edit-handle-nw { top: -9px; left: -9px; cursor: nwse-resize; }
.edit-handle-ne { top: -9px; right: -9px; cursor: nesw-resize; }
.edit-handle-sw { bottom: -9px; left: -9px; cursor: nesw-resize; }
.edit-handle-se { bottom: -9px; right: -9px; cursor: nwse-resize; }

.edit-panel { display: flex; flex-direction: column; gap: 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.edit-group { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft, var(--border)); }
.edit-group-title { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* A feature the store has not bought: explain it rather than hiding the tab */
.upsell-panel { border-left: 3px solid var(--accent); }
.upsell-panel p { font-size: 14px; line-height: 1.65; max-width: 62ch; }
.upsell-panel .btn { margin-top: 6px; }

/* 1:1 detail view — the only place noise reduction and sharpening can be judged */
.edit-loupe { margin: 0 0 4px; }
.edit-loupe img { display: block; width: 100%; max-width: 320px; aspect-ratio: 1; object-fit: cover;
  border-radius: 8px; background: #14181a; margin: 0 auto; }
.edit-loupe figcaption { margin-top: 6px; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.edit-stage { cursor: crosshair; }
.edit-stage:has(.edit-crop:not([hidden])) { cursor: default; }

.edit-control { display: flex; flex-direction: column; gap: 4px; }
.edit-control-head { display: flex; align-items: baseline; gap: 8px; }
.edit-control-head label { flex: 1; font-size: 13px; font-weight: 600; }
.edit-control-head output { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); min-width: 34px; text-align: right; }
.edit-control-head output.is-set { color: var(--opos-text-accent, var(--accent)); font-weight: 700; }
.edit-reset-one { font-size: 11px; opacity: 0; transition: opacity .12s ease; }
.edit-control:hover .edit-reset-one, .edit-reset-one:focus-visible { opacity: 1; }
.edit-control input[type="range"] { width: 100%; accent-color: var(--accent); }
.edit-control .form-help { font-size: 11.5px; line-height: 1.45; }
.edit-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.edit-actions .btn { flex: 1; justify-content: center; }
.edit-actions .btn:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 900px) {
  .edit-layout { grid-template-columns: minmax(0, 1fr); }
  .edit-stage-wrap { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .edit-thumb, .edit-reset-one { transition: none; }
  .edit-thumb:hover { transform: none; }
}