/* ==========================================================================
   ALL WEAR STYLE: Admin & Resell Report
   Same tokens, fonts and hairline language as the public site (DESIGN.md).
   ========================================================================== */

:root {
  --bg: #0b0b0a;
  --bg-2: #10100f;
  --bg-3: #171715;
  --bg-4: #1e1e1b;
  --ink: #ecebe6;
  --ink-2: #bebdb6;
  --mute: #8f8e88;
  --line: rgb(236 235 230 / .12);
  --line-2: rgb(236 235 230 / .38);
  --loss: #d9aaa0;               /* the only tint: losses, always paired with a minus sign */
  --scrim: rgb(4 4 4 / .78);

  --f-display: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
  --f-text: "Sofia Sans", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;

  --side: 268px;
  --gut: clamp(18px, 3vw, 48px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --t-fast: .18s;
  --t: .4s;
  --row: 60px;

  color-scheme: dark;
}
.density-compact { --row: 46px; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.55 var(--f-text);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a, button, input, select, label, textarea { touch-action: manipulation; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--bg); }
.sprite { position: absolute; }
.icon { width: 18px; height: 18px; flex: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num, .money { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; }
.mute { color: var(--mute); }
.loss { color: var(--loss); }
.expected { color: var(--ink-2); font-style: italic; }
.nowrap { white-space: nowrap; }
.noscript { padding: 40px; }

/* -- Type ------------------------------------------------------------------ */
.display { font: 900 clamp(56px, 8.4vw, 148px)/.82 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; }
.label { font: 600 11px/1.2 var(--f-text); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.eyebrow { font: 400 11px/1.4 var(--f-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--mute); }
.h2 { font: 900 clamp(30px, 3vw, 44px)/.9 var(--f-display); text-transform: uppercase; letter-spacing: .01em; }
.h3 { font: 800 22px/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.figure { font: 800 clamp(30px, 2.8vw, 46px)/1 var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* -- Buttons --------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--line-2);
  font: 600 12px/1 var(--f-text);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t-fast) var(--ease), opacity var(--t-fast);
}
.btn::before {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  background: var(--ink);
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .45s var(--ease-io);
}
.btn .icon { transition: transform var(--t) var(--ease); }
.btn:active { transform: scale(.98); }
.btn--solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn--solid::before { background: var(--bg); }
.btn--ghost { border-color: transparent; padding-inline: 10px; }
.btn--danger { border-color: var(--loss); color: var(--loss); }
.btn--sm { min-height: 36px; padding: 0 14px; font-size: 11px; }
.btn--block { width: 100%; justify-content: space-between; }
.btn[disabled], .btn.is-busy { opacity: .45; pointer-events: none; }
@media (hover: hover) {
  .btn:hover { color: var(--bg); border-color: var(--ink); }
  .btn:hover::before { transform: scaleY(1); }
  .btn:hover .icon--go { transform: translateX(4px); }
  .btn--solid:hover { color: var(--ink); }
  .btn--danger:hover { color: var(--bg); border-color: var(--loss); }
  .btn--danger::before { background: var(--loss); }
}
.icon-btn {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  color: var(--ink-2);
  transition: border-color var(--t-fast), color var(--t-fast), background-color var(--t-fast);
}
@media (hover: hover) { .icon-btn:hover { border-color: var(--line-2); color: var(--ink); } }
.link { border-bottom: 1px solid var(--line-2); transition: border-color var(--t-fast); }
.link:hover { border-color: var(--ink); }

/* -- Fields ---------------------------------------------------------------- */
.field { display: grid; gap: 8px; min-width: 0; }
.field > span:first-child { font: 600 11px/1.2 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.field small { color: var(--mute); font-size: 12.5px; }
.input, .select, .textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 0;
  outline: none;
  transition: border-color var(--t-fast);
}
.textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.select { appearance: none; padding-right: 38px; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23bebdb6' d='M212.24,100.24l-80,80a6,6,0,0,1-8.48,0l-80-80a6,6,0,0,1,8.48-8.48L128,167.51l75.76-75.75a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") no-repeat right 14px center / 14px; cursor: pointer; }
.input:hover, .select:hover, .textarea:hover { border-color: rgb(236 235 230 / .55); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--ink); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 1px solid var(--ink); outline-offset: 0; }
.input--money { font-variant-numeric: tabular-nums; }
.input[aria-invalid="true"] { border-color: var(--loss); }
.field__error { color: var(--loss); font-size: 13px; }
.search { position: relative; }
.search .input { padding-left: 42px; }
.search .icon { position: absolute; left: 14px; top: 50%; translate: 0 -50%; color: var(--mute); pointer-events: none; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.check { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; min-height: 32px; }
.check input { appearance: none; width: 20px; height: 20px; border: 1px solid var(--line-2); display: grid; place-items: center; margin: 0; cursor: pointer; }
.check input:checked { background: var(--ink); border-color: var(--ink); }
.check input:checked::after { content: ""; width: 9px; height: 5px; border: solid var(--bg); border-width: 0 0 2px 2px; rotate: -45deg; translate: 0 -1px; }
.check input:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 56px; border-bottom: 1px solid var(--line); cursor: pointer; }
.switch input { appearance: none; width: 46px; height: 24px; border: 1px solid var(--line-2); position: relative; flex: none; cursor: pointer; margin: 0; transition: background-color var(--t-fast); }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: var(--mute); transition: transform var(--t) var(--ease), background-color var(--t-fast); }
.switch input:checked { background: var(--ink); border-color: var(--ink); }
.switch input:checked::after { transform: translateX(22px); background: var(--bg); }

/* segmented control (status, filters) */
.seg { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line-2); width: max-content; max-width: 100%; }
.seg button, .seg label { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; font: 600 11.5px/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); cursor: pointer; transition: background-color var(--t-fast), color var(--t-fast); }
.seg button + button, .seg label + label { border-left: 1px solid var(--line); }
.seg [aria-pressed="true"], .seg label:has(input:checked) { background: var(--ink); color: var(--bg); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:focus-visible) { outline: 1px solid var(--ink); outline-offset: 2px; }
.seg .count { font: 400 11px var(--f-mono); opacity: .7; letter-spacing: 0; }

/* -- Boot / loading ------------------------------------------------------ */
.boot { min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: 18px; color: var(--mute); font: 600 11px var(--f-text); letter-spacing: .3em; }
.boot img { width: 72px; height: 72px; animation: boot-spin 2.4s linear infinite; }
@keyframes boot-spin { to { rotate: 360deg; } }
.skeleton { background: linear-gradient(90deg, var(--bg-3), var(--bg-4), var(--bg-3)) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ==========================================================================
   LOGIN
   ========================================================================== */
.login {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(420px, 1fr);
  min-height: 100svh;
}
.login__media { position: relative; overflow: hidden; background: #000; }
.login__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1) contrast(1.08) brightness(.82); animation: login-in 2.6s var(--ease) both; }
@keyframes login-in { from { transform: scale(1.08); opacity: 0; } }
.login__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, var(--bg) 100%), linear-gradient(0deg, rgb(11 11 10 / .85), transparent 45%); }
.login__word { position: absolute; left: var(--gut); bottom: clamp(24px, 5vw, 64px); z-index: 1; font: 900 clamp(72px, 11vw, 200px)/.8 var(--f-display); text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px var(--ink); letter-spacing: -.01em; animation: rise 1.4s .3s var(--ease) both; }
.login__anno { position: absolute; top: clamp(24px, 4vw, 48px); left: var(--gut); right: var(--gut); z-index: 1; display: flex; justify-content: space-between; font: 400 11px/1.9 var(--f-mono); letter-spacing: .3em; color: var(--ink-2); }
.login__anno span { display: block; }
.login__panel { position: relative; display: grid; align-content: center; gap: 36px; padding: clamp(40px, 6vw, 96px) clamp(28px, 5vw, 88px); overflow: hidden; }
.login__seal { position: absolute; right: -120px; bottom: -120px; width: 420px; opacity: .07; pointer-events: none; }
.login__brand { display: flex; align-items: center; gap: 14px; animation: rise 1s .15s var(--ease) both; }
.login__brand img { width: 56px; height: 56px; }
.login__brand strong { font: 900 20px/.9 var(--f-display); letter-spacing: .06em; display: block; }
.login__title { animation: rise 1.1s .25s var(--ease) both; }
.login__title .display { font-size: clamp(72px, 8vw, 132px); }
.login__title p { margin-top: 18px; max-width: 34ch; color: var(--ink-2); }
.login form { display: grid; gap: 18px; max-width: 440px; animation: rise 1.1s .35s var(--ease) both; }
.login__pw { position: relative; }
.login__pw .input { padding-right: 52px; }
.login__pw button { position: absolute; right: 4px; top: 4px; bottom: 4px; width: 44px; display: grid; place-items: center; color: var(--mute); }
.login__pw button[aria-pressed="true"] { color: var(--ink); }
.login__error { min-height: 22px; color: var(--loss); font-size: 14px; }
.login__foot { display: flex; justify-content: space-between; gap: 18px; color: var(--mute); font-size: 13px; animation: rise 1.1s .45s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

/* ==========================================================================
   SHELL
   ========================================================================== */
.shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100svh; }
.side {
  position: sticky; top: 0;
  height: 100svh;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--bg);
  overflow-y: auto;
  scrollbar-width: thin;
}
.side__brand { display: flex; align-items: center; gap: 12px; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.side__brand img { width: 44px; height: 44px; transition: rotate .7s var(--ease); }
.side__brand:hover img { rotate: -10deg; }
.side__brand strong { display: block; font: 900 18px/.9 var(--f-display); letter-spacing: .06em; }
.side__brand small { display: block; margin-top: 5px; font: 600 9.5px/1 var(--f-text); letter-spacing: .3em; color: var(--mute); }
.side nav { flex: 1; padding: 14px 0 20px; }
.side__group { padding: 18px 24px 6px; font: 400 10.5px/1 var(--f-mono); letter-spacing: .24em; color: var(--mute); text-transform: uppercase; }
.side__link {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 42px;
  padding: 0 24px;
  font: 800 19px/1 var(--f-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color var(--t-fast), background-color var(--t-fast);
}
.side__link--sub { font-size: 17px; padding-left: 40px; min-height: 36px; }
.side__link::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--ink); transform: scaleY(0); transition: transform var(--t) var(--ease); }
.side__link[aria-current="page"] { color: var(--ink); background: var(--bg-2); }
.side__link[aria-current="page"]::before { transform: none; }
.side__link .count { font: 400 11px var(--f-mono); color: var(--mute); letter-spacing: 0; }
@media (hover: hover) { .side__link:hover { color: var(--ink); } }
.side__foot { padding: 18px 24px 22px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.side__user { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; }
.side__user span { color: var(--mute); font: 400 11px var(--f-mono); }
.side__foot a, .side__foot button { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font: 600 11px/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.side__foot a:hover, .side__foot button:hover { color: var(--ink); }

.topbar { display: none; }
.main { min-width: 0; padding: 0 var(--gut) 96px; }
.view { animation: view-in .55s var(--ease) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(10px); } }

/* page head */
.head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; padding: clamp(36px, 5vw, 72px) 0 clamp(24px, 3vw, 40px); border-bottom: 1px solid var(--line); margin-bottom: clamp(24px, 3vw, 40px); }
.head .eyebrow { margin-bottom: 18px; }
.head .display sup { font: 400 13px var(--f-mono); vertical-align: top; margin-left: 10px; letter-spacing: 0; color: var(--mute); position: relative; top: .4em; }
.head__lead { margin-top: 18px; max-width: 60ch; color: var(--ink-2); }
.head__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.back { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font: 600 11px/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); min-height: 32px; }
.back:hover { color: var(--ink); }

.section { margin-top: clamp(40px, 5vw, 72px); }
.section__head { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }

/* ==========================================================================
   OVERVIEW
   ========================================================================== */
.hero {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: stretch;
  padding-top: clamp(36px, 5vw, 72px);
}
.hero__text { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding-bottom: 8px; }
.hero__text .display { font-size: clamp(64px, 8.6vw, 168px); }
.hero__status { display: grid; gap: 10px; }
.hero__status p { display: flex; gap: 14px; align-items: baseline; border-top: 1px solid var(--line); padding-top: 10px; color: var(--ink-2); font-size: 14px; }
.hero__status p .label { width: 92px; flex: none; }
.hero__media { position: relative; min-height: clamp(320px, 40vw, 560px); overflow: hidden; background: #000; }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; filter: grayscale(1) contrast(1.06) brightness(.72); transform: scale(1.04); animation: settle 2.2s var(--ease) both; }
@keyframes settle { from { transform: scale(1.12); opacity: 0; } }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(11 11 10 / .92) 0%, rgb(11 11 10 / .35) 48%, transparent 75%); }
.hero__metric { position: absolute; left: clamp(20px, 3vw, 40px); right: clamp(20px, 3vw, 40px); bottom: clamp(20px, 3vw, 36px); z-index: 1; }
.hero__metric .label { color: var(--ink-2); }
.hero__metric strong { display: block; margin-top: 12px; font: 900 clamp(64px, 7.6vw, 136px)/.82 var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hero__metric p { margin-top: 14px; color: var(--ink-2); font-size: 14px; max-width: 46ch; }
.meter { margin-top: 16px; height: 2px; background: rgb(236 235 230 / .2); position: relative; overflow: hidden; }
.meter span { position: absolute; inset: 0 auto 0 0; background: var(--ink); transform-origin: 0 50%; animation: grow 1.6s .4s var(--ease) both; }
@keyframes grow { from { transform: scaleX(0); } }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.kpi { padding: 22px 22px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; animation: view-in .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms); }
.kpi .figure { margin-top: 14px; display: block; overflow-wrap: anywhere; }
.kpi p { margin-top: 8px; color: var(--mute); font-size: 12.5px; line-height: 1.45; }
.kpi--lead { background: var(--bg-2); }
.kpis--sm .figure { font-size: clamp(24px, 2vw, 32px); }
.kpis--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.actions-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.qa { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; min-height: 132px; padding: 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; isolation: isolate; text-align: left; transition: color var(--t) var(--ease); }
.qa::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translateY(101%); transition: transform .5s var(--ease-io); }
.qa .mono { color: var(--mute); transition: color var(--t); }
.qa strong { font: 800 22px/.95 var(--f-display); text-transform: uppercase; letter-spacing: .02em; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.qa .icon { transition: transform var(--t) var(--ease); }
@media (hover: hover) {
  .qa:hover { color: var(--bg); }
  .qa:hover .mono { color: var(--bg); }
  .qa:hover::before { transform: none; }
  .qa:hover .icon { transform: translateX(4px); }
}

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); }
.split--wide { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }

/* list rows (recent sales, activity) */
.rows > li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 16px; align-items: center; min-height: 72px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rows strong { font: 800 18px/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows .sub { margin-top: 6px; font-size: 12.5px; color: var(--mute); }
.rows .val { text-align: right; }
.rows .val b { display: block; font: 800 20px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.activity > li { display: grid; grid-template-columns: 92px 74px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.activity .mono { color: var(--mute); }
.activity .tag { font: 600 9.5px/1.9 var(--f-text); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }

/* thumbnails & cards: product photos are square posts, shown whole (contain) and in colour */
.thumb { position: relative; display: block; width: 52px; aspect-ratio: 1 / 1; background: var(--bg-3); overflow: hidden; flex: none; }
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.thumb__ph { position: absolute; inset: 0; display: grid; place-items: center; font: 900 18px/1 var(--f-display); color: transparent; -webkit-text-stroke: 1px var(--mute); text-transform: uppercase; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.pcard { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; text-align: left; transition: background-color var(--t-fast); }
.pcard .thumb { width: 100%; }
.pcard__body { padding: 14px 16px 16px; display: grid; gap: 8px; }
.pcard__body strong { font: 800 19px/.95 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.pcard__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; color: var(--mute); }
.pcard__row b { font: 800 19px/1 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }
@media (hover: hover) {
  .pcard:hover { background: var(--bg-2); }
}

.band { margin: clamp(56px, 7vw, 112px) calc(var(--gut) * -1) -96px; overflow: hidden; }
.band img { width: min(100%, 1500px); margin-left: auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); opacity: .85; }

/* status pill (text only, square) */
.status { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border: 1px solid var(--line-2); font: 600 10px/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.status--sold { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.status--reserved { border-style: dashed; }

/* ==========================================================================
   PRODUCTS TABLE
   ========================================================================== */
.toolbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 18px; }
.toolbar__row { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.toolbar__row .search { flex: 1 1 280px; }
.toolbar__row .select { width: auto; min-width: 170px; }
.more { border: 1px solid var(--line); padding: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; background: var(--bg-2); }
.range { display: flex; gap: 8px; align-items: center; }
.range .input { min-width: 0; }

.summary { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 18px; font-size: 13px; color: var(--mute); }
.summary b { color: var(--ink); font: 800 17px/1 var(--f-display); font-variant-numeric: tabular-nums; margin-left: 6px; letter-spacing: .02em; }

.table-wrap { position: relative; overflow-x: auto; border-top: 1px solid var(--line); scrollbar-width: thin; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { position: sticky; top: 0; z-index: 2; height: 44px; padding: 0 10px; background: var(--bg); text-align: left; font: 600 10.5px/1.2 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); white-space: nowrap; border-bottom: 1px solid var(--line-2); }
.table th.r, .table td.r { text-align: right; }
.table td { height: var(--row); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; font-variant-numeric: tabular-nums; }
.table tbody tr { transition: background-color var(--t-fast); }
.table tbody tr:hover { background: var(--bg-2); }
.table .sticky { position: sticky; left: 0; z-index: 1; background: var(--bg); }
.table tbody tr:hover .sticky { background: var(--bg-2); }
.table th.sticky { z-index: 3; }
/* the actions column stays in reach while the money columns scroll */
.table .sticky-r { position: sticky; right: 0; z-index: 1; background: var(--bg); box-shadow: -12px 0 12px -10px rgb(0 0 0 / .9); }
.table th.sticky-r { z-index: 3; }
.table tbody tr:hover .sticky-r { background: var(--bg-2); }
.prod { display: flex; align-items: center; gap: 12px; min-width: 250px; max-width: 320px; }
.prod .thumb { width: 40px; }
.prod strong { display: block; font: 800 17px/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; white-space: normal; }
.prod small { display: block; margin-top: 4px; color: var(--mute); font-size: 12px; }
.prod .prod__meta { display: flex; align-items: center; gap: 8px; margin-top: 7px; white-space: nowrap; }
.prod .prod__meta .status { min-height: 20px; padding: 0 6px; font-size: 9px; }
.foot-sub { display: block; margin-top: 3px; font-size: 11px; font-weight: 400; color: var(--mute); font-style: italic; }
.table td.dates span { display: block; }
.table td.dates small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--mute); }
.table tfoot td { font-weight: 600; border-top: 1px solid var(--line-2); border-bottom: 0; color: var(--ink); }
.cell-btn { text-align: left; }
.cell-btn:hover strong { text-decoration: underline; text-underline-offset: 3px; }

/* row action menu */
.menu-pop { position: fixed; z-index: 80; min-width: 210px; background: var(--bg-3); border: 1px solid var(--line-2); padding: 6px 0; box-shadow: 0 24px 48px rgb(0 0 0 / .5); animation: pop .22s var(--ease) both; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } }
.menu-pop button { display: flex; width: 100%; align-items: center; gap: 12px; min-height: 40px; padding: 0 16px; font-size: 14px; color: var(--ink-2); text-align: left; }
.menu-pop button:hover, .menu-pop button:focus-visible { background: var(--bg-4); color: var(--ink); outline: none; }
.menu-pop button.danger { color: var(--loss); }
.menu-pop hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }

/* mobile product cards */
.mlist { display: none; }
.mcard { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.mcard .thumb { width: 72px; }
.mcard__top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.mcard strong { font: 800 19px/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.mcard dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; margin-top: 12px; }
.mcard dt { font: 600 9.5px/1.2 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.mcard dd { margin-top: 4px; font: 800 17px/1 var(--f-display); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   DRAWER / DIALOG
   ========================================================================== */
.drawer { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-columns: 1fr min(640px, 100%); }
.drawer__scrim { background: var(--scrim); backdrop-filter: blur(2px); animation: fade .35s ease both; }
.drawer__panel { position: relative; display: flex; flex-direction: column; background: var(--bg); border-left: 1px solid var(--line-2); animation: slide .55s var(--ease) both; min-height: 0; max-height: 100svh; }
@keyframes fade { from { opacity: 0; } }
@keyframes slide { from { transform: translateX(40px); opacity: 0; } }
.drawer.is-closing .drawer__panel { animation: slide-out .3s var(--ease-io) both; }
.drawer.is-closing .drawer__scrim { animation: fade-out .3s ease both; }
@keyframes slide-out { to { transform: translateX(40px); opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
.drawer__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding: 28px 32px 22px; border-bottom: 1px solid var(--line); }
.drawer__head .h2 { font-size: clamp(34px, 3.4vw, 52px); }
.drawer__body { flex: 1; overflow-y: auto; padding: 26px 32px 32px; display: grid; gap: 22px; align-content: start; overscroll-behavior: contain; }
.drawer__foot { display: flex; gap: 10px; justify-content: space-between; align-items: center; padding: 16px 32px; border-top: 1px solid var(--line); background: var(--bg); }
.drawer__foot .btn--solid { min-width: 200px; }
.fieldset { display: grid; gap: 16px; padding-top: 18px; border-top: 1px solid var(--line); }
.fieldset > .label { margin-bottom: 2px; }

.calc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--bg-2); }
.calc div { padding: 14px 16px; border-right: 1px solid var(--line); min-width: 0; }
.calc div:last-child { border-right: 0; }
.calc b { display: block; margin-top: 8px; font: 800 24px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.calc p { grid-column: 1 / -1; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--mute); }

.upload { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: center; }
.upload .thumb { width: 120px; }
.upload__btns { display: flex; flex-wrap: wrap; gap: 8px; }

dialog.dlg { padding: 0; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); width: min(560px, calc(100% - 32px)); max-height: calc(100svh - 32px); }
dialog.dlg::backdrop { background: var(--scrim); backdrop-filter: blur(2px); }
dialog.dlg[open] { animation: pop .3s var(--ease) both; }
.dlg__body { padding: 28px 28px 22px; display: grid; gap: 16px; }
.dlg__body .h2 { font-size: 34px; }
.dlg__body > p { color: var(--ink-2); }
.dlg__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 28px 24px; flex-wrap: wrap; }
.dlg--wide { width: min(880px, calc(100% - 32px)); }

/* toast */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 100; translate: -50% 0; max-width: calc(100% - 32px); padding: 14px 20px; background: var(--ink); color: var(--bg); font: 600 13.5px/1.4 var(--f-text); opacity: 0; transform: translateY(14px); transition: opacity .3s, transform .45s var(--ease); pointer-events: none; }
.toast.is-visible { opacity: 1; transform: none; }
.toast.is-error { background: var(--loss); }

/* empty states */
.empty { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 300px); gap: 32px; align-items: center; padding: clamp(36px, 5vw, 72px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.empty .display { font-size: clamp(56px, 7vw, 120px); color: var(--ink-2); }
.empty p { margin: 18px 0 26px; max-width: 46ch; color: var(--ink-2); }
.empty img { width: 100%; height: auto; opacity: .9; }
.empty--sm { grid-template-columns: 1fr; padding: 32px 0; }
.empty--sm .display { font-size: 44px; }

/* ==========================================================================
   SHIPMENTS
   ========================================================================== */
.dossiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.dossier { display: flex; flex-direction: column; gap: 18px; padding: 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; transition: background-color var(--t-fast); min-width: 0; }
.dossier:hover { background: var(--bg-2); }
.dossier__top { display: flex; justify-content: space-between; gap: 16px; }
.dossier__name { font: 900 34px/.88 var(--f-display); text-transform: uppercase; letter-spacing: .01em; overflow-wrap: anywhere; }
.strip { display: flex; align-items: center; gap: 4px; height: 64px; overflow: hidden; }
.strip .thumb { width: 51px; }
.strip__more { display: grid; place-items: center; width: 51px; background: var(--bg-3); font: 400 11px var(--f-mono); color: var(--mute); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--mute); }
.facts div:nth-child(odd) { padding-right: 14px; border-right: 1px solid var(--line); }
.facts div:nth-child(even) { padding-left: 14px; }
.facts b { color: var(--ink); font: 800 17px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.progress { display: grid; gap: 8px; }
.progress__bar { display: flex; height: 3px; background: var(--bg-4); }
.progress__bar span { background: var(--ink); transform-origin: 0 50%; animation: grow 1.2s var(--ease) both; }
.progress p { display: flex; justify-content: space-between; font-size: 12px; color: var(--mute); }
.check-ok { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }

/* ==========================================================================
   ANALYTICS
   ========================================================================== */
.chart { border: 1px solid var(--line); padding: 22px 22px 14px; background: var(--bg); }
.chart__head { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; margin-bottom: 18px; flex-wrap: wrap; }
.chart svg { width: 100%; height: auto; overflow: visible; display: block; }
.chart .axis { stroke: var(--line); }
.chart text { fill: var(--mute); font: 400 10px var(--f-mono); }
.legend { display: flex; gap: 18px; font-size: 12px; color: var(--mute); flex-wrap: wrap; }
.legend i { display: inline-block; width: 14px; height: 2px; background: var(--ink); vertical-align: middle; margin-right: 8px; }
.legend i.alt { background: var(--mute); }
.legend i.dash { background: repeating-linear-gradient(90deg, var(--ink-2) 0 4px, transparent 4px 7px); }
.charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.hbars > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.hbars .bar { grid-column: 1 / -1; height: 3px; background: var(--bg-4); }
.hbars .bar span { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; animation: grow 1.1s var(--ease) both; }
.hbars .bar span.neg { background: var(--loss); }
.hbars b { font: 800 18px/1 var(--f-display); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   SITE MANAGEMENT
   ========================================================================== */
.tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--line); margin-bottom: 28px; overflow-x: auto; scrollbar-width: none; }
.tabs a { position: relative; padding: 14px 0; font: 600 12px/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.tabs a[aria-current="page"] { color: var(--ink); }
.tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); }
.cgroup { display: grid; grid-template-columns: minmax(180px, .5fr) minmax(0, 1.5fr); gap: clamp(20px, 4vw, 64px); padding: 32px 0; border-bottom: 1px solid var(--line); }
.cgroup__title .h2 { margin-bottom: 10px; }
.cgroup__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cgroup__fields .wide { grid-column: 1 / -1; }
.field .reset { justify-self: start; font-size: 12px; color: var(--mute); border-bottom: 1px solid var(--line); }
.field.is-changed > span:first-child::after { content: " · променено"; color: var(--ink-2); letter-spacing: .08em; }
.savebar { position: sticky; bottom: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 calc(var(--gut) * -1); padding: 14px var(--gut); background: rgb(11 11 10 / .94); backdrop-filter: blur(8px); border-top: 1px solid var(--line-2); transform: translateY(100%); opacity: 0; transition: transform .45s var(--ease), opacity .3s; pointer-events: none; }
.savebar.is-dirty { transform: none; opacity: 1; pointer-events: auto; }

.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.slot { display: flex; flex-direction: column; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.slot__preview { position: relative; background: var(--bg-3); overflow: hidden; cursor: crosshair; max-height: 340px; display: grid; place-items: center; }
.slot__preview img { width: 100%; height: 100%; max-height: 340px; }
.slot__preview.is-contain img { object-fit: contain; padding: 18px; }
.slot__preview.is-cover img { object-fit: cover; filter: grayscale(1); }
.slot__preview .focal { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 1px solid var(--ink); border-radius: 50%; box-shadow: 0 0 0 1px rgb(0 0 0 / .6); pointer-events: none; transition: left .3s var(--ease), top .3s var(--ease); }
.slot__preview .focal::after { content: ""; position: absolute; inset: 11px; background: var(--ink); border-radius: 50%; }
.slot__preview .tagline { position: absolute; left: 10px; top: 10px; }
.slot__preview.is-hidden img { opacity: .2; }
.slot__body { padding: 18px; display: grid; gap: 12px; }
.slot__body .h3 { display: flex; justify-content: space-between; gap: 10px; }
.slot__body .used { font-size: 12.5px; color: var(--mute); }
.slot__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.library { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.lib-item { position: relative; display: grid; gap: 6px; text-align: left; min-width: 0; }
.lib-item .frame { position: relative; aspect-ratio: 1; background: var(--bg-3); display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); transition: border-color var(--t-fast); }
/* the photo fills the square frame exactly (a percentage height alone let tall photos spill out and be cut) */
.lib-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.lib-item small { font-size: 11.5px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-item[aria-pressed="true"] .frame, .lib-item:hover .frame { border-color: var(--ink); }
.compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.compare figure { background: var(--bg-3); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; }
.compare img { max-height: 100%; object-fit: contain; }
.compare figcaption { margin-top: 6px; }

.catalogue { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.catalogue .pcard.is-draft { opacity: .55; }

.panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.panel { display: flex; flex-direction: column; gap: 18px; padding: clamp(22px, 2.6vw, 36px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.panel p { color: var(--ink-2); }
.panel .btn { margin-top: auto; align-self: flex-start; }
.panel--lead { background: var(--bg-2); }
.panel__art { height: 150px; display: grid; place-items: center start; }
.panel__art img { max-height: 150px; width: auto; }
.contents { display: grid; gap: 8px; font-size: 14px; color: var(--ink-2); }
.contents li { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.contents b { display: inline-block; min-width: 116px; font: 600 11px var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.report { border: 1px solid var(--line-2); padding: 18px; display: grid; gap: 14px; background: var(--bg-2); }
.report table { width: 100%; border-collapse: collapse; font-size: 14px; }
.report td, .report th { padding: 8px 0; border-bottom: 1px solid var(--line); text-align: left; font-variant-numeric: tabular-nums; }
.report th { font: 600 10.5px var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.report ul { display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-2); }
.report li::before { content: "– "; color: var(--mute); }

.settings { display: grid; gap: 0; }
.srow { display: grid; grid-template-columns: minmax(180px, .5fr) minmax(0, 1.5fr); gap: clamp(20px, 4vw, 64px); padding: 30px 0; border-bottom: 1px solid var(--line); }
.srow p.mute { margin-top: 10px; font-size: 13.5px; max-width: 36ch; }
.cats { display: grid; gap: 8px; }
.cats li { display: grid; grid-template-columns: 140px minmax(0, 1fr) 38px; gap: 8px; }

/* ==========================================================================
   SERVICES / RESELL REPORT (compact money overview)
   ========================================================================== */
.side__link--leaf { padding-left: 56px; font-size: 16px; min-height: 32px; color: var(--mute); }
.side__link.is-parent { color: var(--ink); }
.drawer__btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.studio-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.studio-bar .tabs { border-bottom: 0; margin-bottom: 0; }
.studio-bar .btn { flex: none; }
/* on a computer the sidebar already lists these pages; the tabs are the phone and tablet navigation */
@media (min-width: 1024px) {
  .tabs--side { display: none; }
  .studio-bar:has(> .tabs--side) { border-bottom: 0; margin-bottom: 12px; }
  .studio-bar .tabs--side + .btn { margin-left: auto; }
}
.qgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.q { display: grid; align-content: start; gap: 6px; padding: 16px 18px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.q .mono { color: var(--mute); font-size: 10.5px; }
.q strong { font: 800 clamp(26px, 2.3vw, 36px)/1 var(--f-display); font-variant-numeric: tabular-nums; margin-top: 4px; overflow-wrap: anywhere; }
.q small { font-size: 12.5px; color: var(--mute); line-height: 1.45; }
.q small b { color: var(--ink-2); font-weight: 600; }
.resultbar { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; background: var(--bg-2); border: 1px solid var(--line); border-top: 0; }
.resultbar > div { display: grid; align-content: start; gap: 6px; padding: 16px 18px; border-right: 1px solid var(--line); min-width: 0; }
.resultbar > div:last-child { border-right: 0; }
.resultbar strong { font: 800 clamp(22px, 1.9vw, 30px)/1 var(--f-display); font-variant-numeric: tabular-nums; }
.resultbar > div:first-child strong { font-size: clamp(30px, 2.8vw, 44px); }
.resultbar small { font-size: 12px; color: var(--mute); }
.resultbar .meter { margin-top: 4px; }
.tip { position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 6px; border: 1px solid var(--line-2); border-radius: 50%; font: 600 10px/1 var(--f-text); letter-spacing: 0; color: var(--ink-2); cursor: help; vertical-align: 1px; }
.tip::after { content: attr(data-tip); position: absolute; left: -8px; top: calc(100% + 8px); z-index: 30; width: 260px; padding: 10px 12px; background: var(--ink); color: var(--bg); font: 500 12.5px/1.45 var(--f-text); letter-spacing: 0; text-transform: none; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .2s, transform .3s var(--ease); }
.tip:hover::after, .tip:focus-visible::after { opacity: 1; transform: none; }
.minis { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); border-bottom: 1px solid var(--line); margin: 0; }
.minis > div { padding: 12px 14px 12px 0; min-width: 0; }
.minis dt { font: 600 10px/1.25 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.minis dd { margin: 6px 0 0; font: 800 20px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.table--compact td { height: auto; padding: 10px; white-space: normal; }
.table--compact td.r { white-space: nowrap; }
.table--compact td small { font-size: 12px; }
.cell-link strong { font: 800 17px/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.cell-link:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.rows--compact > li { min-height: 60px; grid-template-columns: 40px minmax(0, 1fr) auto; padding: 8px 0; }
.rows--compact .thumb { width: 40px; }
.rows--compact .val { display: grid; justify-items: end; gap: 6px; }
.rows--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }

/* Партиди list: compact toolbar, selection bar, selectable cards */
.btoolbar { display: grid; gap: 12px; margin-bottom: 12px; }
.btoolbar__top { display: flex; gap: 10px; }
.btoolbar__top .search { flex: 1; }
.btoolbar__toggle { display: none; }
.btoolbar__filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.btoolbar__filters .field > span:first-child { font-size: 10px; }
.btoolbar__filters .select, .btoolbar__filters .input { min-height: 40px; padding-top: 8px; padding-bottom: 8px; font-size: 14px; }
.btoolbar__filters > .field { flex: 1 1 150px; }
.btoolbar__filters .range .input { width: 100px; }
.selbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 10px 0; margin-bottom: 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 13.5px; }
.selbar__count { font: 600 11px/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; }
.selbar__shown { margin-left: auto; font-size: 12.5px; }
.dwrap { position: relative; display: flex; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.dwrap .dossier { flex: 1; border: 0; padding-left: 60px; }
.dpick { position: absolute; left: 18px; top: 24px; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; cursor: pointer; }
.dpick input { appearance: none; width: 20px; height: 20px; margin: 0; border: 1px solid var(--line-2); display: grid; place-items: center; cursor: pointer; background: var(--bg); }
.dpick input:checked { background: var(--ink); border-color: var(--ink); }
.dpick input:checked::after { content: ""; width: 9px; height: 5px; border: solid var(--bg); border-width: 0 0 2px 2px; rotate: -45deg; translate: 0 -1px; }
.dpick input:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.dwrap.is-selected { background: var(--bg-2); box-shadow: inset 2px 0 0 var(--ink); }
.del-list { display: grid; max-height: 30vh; overflow: auto; border-top: 1px solid var(--line); }
.del-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.del-list span { color: var(--mute); }
.seg--stack { flex-direction: column; width: 100%; }
.seg--stack label + label { border-left: 0; border-top: 1px solid var(--line); }
.check input:indeterminate { background: var(--line-2); }

/* Продукти: row selection */
.pick-box { appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border: 1px solid var(--line-2); display: inline-grid; place-items: center; background: var(--bg); cursor: pointer; vertical-align: middle; }
.pick-box:checked { background: var(--ink); border-color: var(--ink); }
.pick-box:checked::after { content: ""; width: 8px; height: 4px; border: solid var(--bg); border-width: 0 0 2px 2px; rotate: -45deg; translate: 0 -1px; }
.pick-box:indeterminate { background: var(--line-2); }
.pick-box:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.th-pick { display: inline-flex; align-items: center; gap: 14px; }
.row-pick { display: flex; align-items: center; gap: 14px; }
.table tr.is-picked td { background: var(--bg-2); }
.table tr.is-picked .sticky { box-shadow: inset 2px 0 0 var(--ink); }
.mcard.is-picked { background: var(--bg-2); }
.mcard__media { display: grid; gap: 10px; justify-items: start; }
.selbar__actions { display: inline-flex; align-items: center; gap: 14px; }
/* the bulk bar stays in reach while scrolling a long product list */
[data-psel-bar] { position: sticky; top: 0; z-index: 15; background: var(--bg); }
.icon-btn--lg { width: 46px; height: 46px; }
.danger-count { font-size: 16px; }
.danger-count b { font: 800 22px/1 var(--f-display); color: var(--loss); margin-left: 6px; }

/* Excel export: batch picker */
.pick-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); }
.pick-count { font: 600 12px/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; }
.pick-list { max-height: 46vh; overflow: auto; }
.pick { display: flex; width: 100%; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pick strong { display: block; font: 800 18px/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.pick small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--mute); }
dialog.dlg button[disabled] { opacity: .4; pointer-events: none; }

/* ==========================================================================
   УСЛУГИ / ОБРАБОТКА НА СНИМКИ
   ========================================================================== */
.notice { border: 1px solid var(--line-2); background: var(--bg-2); padding: 18px 20px; margin-bottom: 22px; display: grid; gap: 10px; }
.notice ul { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; color: var(--ink-2); }
.notice p { font-size: 13px; }
.pflow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; margin-bottom: 22px; }
.dropzone { display: grid; place-items: center; align-content: center; gap: 8px; min-height: 150px; padding: 22px; border: 1px dashed var(--line-2); background: var(--bg-2); text-align: center; cursor: pointer; transition: border-color var(--t-fast), background-color var(--t-fast); }
.dropzone .icon { width: 26px; height: 26px; }
.dropzone strong { font: 800 22px/1 var(--f-display); text-transform: uppercase; letter-spacing: .03em; }
.dropzone span { font-size: 13px; color: var(--mute); }
.dropzone:hover, .dropzone.is-over { border-color: var(--ink); background: var(--bg-3); }
.dropzone:focus-within { outline: 1px solid var(--ink); outline-offset: 2px; }
.pflow__side { display: grid; align-content: space-between; gap: 18px; padding: 4px 0; }
.pflow__go { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pflow__progress { font: 600 12px/1 var(--f-mono); color: var(--ink-2); }
.pempty { padding: 28px 0; border-top: 1px solid var(--line); }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.pcard2 { display: flex; flex-direction: column; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.pcard2__media { position: relative; display: grid; gap: 4px; background: var(--bg-3); aspect-ratio: 4 / 5; overflow: hidden; }
.pcard2__media.is-two { grid-template-columns: 1fr 1fr; align-items: center; }
.pcard2__media img { width: 100%; height: 100%; object-fit: contain; }
.pcard2__media canvas { width: 100%; height: auto; display: block; align-self: center; }
.pcard2__status { position: absolute; left: 10px; top: 10px; background: var(--bg); }
.status--done { background: var(--ink) !important; color: var(--bg); border-color: var(--ink); }
.status--processing { animation: pulse 1.2s ease-in-out infinite; }
.status--error { border-color: var(--loss); color: var(--loss); }
@keyframes pulse { 50% { opacity: .45; } }
.pcard2__body { display: grid; gap: 8px; padding: 12px 14px 14px; }
.pcard2__body strong { font: 800 17px/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard2__err { font-size: 12.5px; }
.pcard2__warn { font-size: 12.5px; color: var(--loss); }
.pcard2__mode { font-size: 12px; margin: 0; }
.pcard2__enh { font-size: 12px; margin: 0; line-height: 1.45; }

/* Product Studio: per-photo enhancements */
.enh { display: grid; gap: 22px; }
.enh__view { position: sticky; top: -26px; z-index: 3; display: grid; gap: 10px; padding: 10px 0 12px; background: var(--bg); border-bottom: 1px solid var(--line); }
.cmp { position: relative; justify-self: center; max-width: 100%; line-height: 0; }
.cmp canvas { display: block; height: auto; max-width: 100%; }
.cmp__after { position: absolute; inset: 0; }
.cmp__after canvas { width: 100% !important; height: 100%; }
.cmp__line { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink); box-shadow: 0 0 0 1px rgb(0 0 0 / .35); pointer-events: none; }
.cmp__tag { position: absolute; top: 8px; padding: 4px 8px; font: 600 10px/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; background: rgb(11 11 10 / .72); color: var(--ink); pointer-events: none; }
.cmp__tag--l { left: 8px; }
.cmp__tag--r { right: 8px; }
.cmp__range { width: 100%; }
.enh__state { display: grid; gap: 2px; margin: 0; font-size: 12.5px; color: var(--ink-2); }
.enh__state b { color: var(--ink); font-weight: 600; }
.enh__state em { color: var(--loss); font-style: normal; }
.enh__state.is-busy::after { content: "Подготвя преглед…"; color: var(--mute); animation: pulse 1.2s ease-in-out infinite; }
.enh__group { display: grid; gap: 4px; }
.enh__group > .eyebrow { margin-bottom: 4px; }
.enh__row { display: grid; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.enh__sw { border-bottom: 0; min-height: 48px; }
.enh__sw small { display: block; margin-top: 3px; font-size: 12px; color: var(--mute); line-height: 1.4; }
.enh__more { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; }
.enh__row.is-off .enh__more { opacity: .4; }
.enh__wm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.enh__wm > .grid-2, .enh__wm > .enh__logo { grid-column: 1 / -1; }
.enh__logo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12.5px; }
.enh__logo img { width: 44px; height: 44px; object-fit: contain; background: #555; }
.enh__note { margin: 6px 0 0; font-size: 12px; color: var(--mute); }
.cmp__after canvas { object-fit: contain; }
/* Instagram preview */
.igview { display: grid; gap: 8px; }
.igview canvas, .igset__grid canvas { width: 100%; height: auto; display: block; }
.igview canvas { max-width: 360px; }
.ig__warn { margin: 0; font-size: 12.5px; color: var(--loss); }
.ig__pass { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.igset { display: grid; gap: 14px; }
.igset__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; max-height: 60vh; overflow: auto; }
.igset__grid figure { margin: 0; display: grid; gap: 4px; font-size: 12px; }
/* cut-out correction */
dialog.dlg--full { width: min(1240px, calc(100% - 24px)); }
.cut { display: grid; gap: 12px; }
.cut__bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; }
.cut__size input { width: 160px; }
.cut__dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.cut__dot--keep { background: rgb(40 200 90); }
.cut__dot--remove { background: rgb(220 50 50); }
.cut__stage { display: grid; place-items: center; background: repeating-conic-gradient(#cfcfcf 0 25%, #f4f4f4 0 50%) 0 0 / 16px 16px; min-height: 200px; }
.cut__stage canvas { display: block; max-width: 100%; touch-action: none; cursor: crosshair; }
.cut__status { margin: 0; font-size: 12.5px; min-height: 1.4em; }
/* product photo sets */
.psets { display: grid; gap: 14px; margin-bottom: 26px; }
.psets__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pset { border: 1px solid var(--line-2); padding: 14px; display: grid; gap: 12px; }
.pset__head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.pset__name { max-width: 320px; }
.pset__btns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pset__body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; align-items: start; }
.pset__main { margin: 0; display: grid; gap: 6px; font-size: 12px; color: var(--ink-2); }
.pset__main img, .pset__item img, .ligrid img, .upl img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: repeating-conic-gradient(#cfcfcf 0 25%, #f4f4f4 0 50%) 0 0 / 12px 12px; }
.pset__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.pset__item { display: grid; gap: 6px; padding: 6px; border: 1px solid var(--line); position: relative; font-size: 12px; background: var(--bg); }
/* reorder by the grip: the photo being moved is lifted, the landing place is marked */
.pset__grip { position: absolute; top: 6px; right: 6px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; background: rgb(11 11 10 / .78); border: 1px solid var(--line-2); color: var(--ink); cursor: grab; touch-action: none; }
.pset__grip svg { width: 18px; height: 18px; }
.pset__grip:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.pset__item.is-drag { z-index: 5; border-color: var(--ink); box-shadow: 0 18px 40px rgb(0 0 0 / .55); scale: 1.04; }
.pset__item.is-drag .pset__grip { cursor: grabbing; }
.pset__list.is-sorting .pset__item:not(.is-drag) { transition: border-color var(--t-fast); }
.pset__item.is-target { border: 1px dashed var(--ink); background: var(--bg-3); }
.pset__item.is-target::after { content: "Тук"; position: absolute; left: 50%; top: 42%; translate: -50% -50%; padding: 4px 10px; background: var(--ink); color: var(--bg); font: 700 11px/1.4 var(--f-text); letter-spacing: .12em; text-transform: uppercase; pointer-events: none; }
.pset__item small { min-height: 1.2em; }
.pset__n { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 2px 7px; background: var(--ink); color: var(--bg); font: 700 11px/1.4 var(--f-mono); }
.pset__move { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.pset__move .icon-btn { width: 36px; height: 36px; }
.ligrid { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: start; }
.ligrid__ref { margin: 0; display: grid; gap: 4px; font-size: 12px; }
.ligrid__rows { display: grid; gap: 6px; }
.ligrid__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(90px, 140px); gap: 8px; overflow-x: auto; }
.ligrid > .check { grid-column: 1 / -1; }
.upl { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; align-items: start; }
.upl__main { margin: 0; display: grid; gap: 4px; font-size: 12px; }
.upl__gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 11.5px; }
.upl__gallery li { display: grid; gap: 4px; }
.upl__target, .upl__note { grid-column: 1 / -1; margin: 0; }
@media (max-width: 640px) {
  .pset__body, .ligrid, .upl { grid-template-columns: 1fr; }
  .pset__main { max-width: 220px; }
}
.wrcmp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.wrcmp__item { display: grid; gap: 6px; padding: 4px; border: 1px solid var(--line); background: none; color: var(--ink-2); font: 600 10.5px/1 var(--f-text); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; text-align: center; }
.wrcmp__item.is-on { border-color: var(--ink); color: var(--ink); }
.wrcmp__img { display: block; aspect-ratio: 3 / 4; background: repeating-conic-gradient(#cfcfcf 0 25%, #f4f4f4 0 50%) 0 0 / 12px 12px; }
.wrcmp__img img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 560px) { .wrcmp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.enh__meta { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; font-size: 12.5px; }
.field--inline { display: grid; gap: 4px; }
.field--inline > span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.seg--sm label { min-height: 34px; padding: 0 12px; font-size: 10.5px; }
.qc { display: grid; gap: 6px; margin-top: 8px; padding: 12px 14px; border: 1px solid var(--line-2); font-size: 13px; }
.qc ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.qc__overall { margin: 0; font-weight: 700; letter-spacing: .04em; }
.qc--review { border-color: var(--loss); }
.qc--review .qc__overall, .qc__error { color: var(--loss); }
.qc__warn { color: var(--ink); }
.qc__pass { color: var(--ink-2); }
.qclist { display: grid; gap: 14px; max-height: 55vh; overflow: auto; }
.qclist .h3 { font-size: 18px; }
.bulkenh { display: grid; gap: 2px; }
.brow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
@media (max-width: 560px) {
  .enh__view { position: static; }
  .enh__wm { grid-template-columns: 1fr; }
  .brow { grid-template-columns: 1fr 1fr; }
  .brow > span { grid-column: 1 / -1; }
}
.pmasks { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.pmasks figure { margin: 0; display: grid; gap: 4px; font-size: 12px; }
.pmasks img { width: 100%; height: 220px; object-fit: contain; background: #777; }
.pmasks img.checker { background: repeating-conic-gradient(#ccc 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.pcard2__actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pcard2__actions .icon-btn { margin-left: auto; }
.psteps { display: grid; gap: 6px; margin: 0; padding-left: 18px; list-style: decimal; font-size: 13.5px; color: var(--ink-2); }
.psteps b { color: var(--ink); font-weight: 600; }
.pbulk { position: sticky; top: 0; z-index: 15; background: var(--bg); }
.pbulk__btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pbulk .btn[disabled] { opacity: .35; }
.pcard2__pick { position: absolute; right: 8px; top: 8px; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; background: rgb(11 11 10 / .7); cursor: pointer; }
.pcard2.is-picked { background: var(--bg-2); box-shadow: inset 0 0 0 2px var(--ink); }
.pcard2__assign { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tbadge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; font: 600 10px/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--line-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.tbadge--1 { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tbadge--2 { border-color: var(--ink); color: var(--ink); }
.tbadge--both { background: var(--ink); color: var(--bg); border-color: var(--ink); box-shadow: 3px 3px 0 -1px var(--bg), 3px 3px 0 0 var(--ink); }
.tbadge--none { border-style: dashed; color: var(--loss); border-color: var(--loss); }
.select--sm { min-height: 32px; padding: 4px 30px 4px 10px; font-size: 13px; width: auto; max-width: 150px; background-position: right 10px center; }
.status--removing, .status--placing { animation: pulse 1.2s ease-in-out infinite; }
.pexport { position: sticky; bottom: 0; z-index: 15; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin: 22px calc(var(--gut) * -1) 0; padding: 12px var(--gut); background: rgb(11 11 10 / .94); backdrop-filter: blur(8px); border-top: 1px solid var(--line-2); }
.pexport__btns { display: flex; gap: 10px; align-items: center; }

.stage { position: relative; width: 100%; align-self: start; flex: none; background: var(--bg-3); overflow: hidden; user-select: none; touch-action: none; }
.stage__tpl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.stage__zones { position: absolute; inset: 0; pointer-events: none; }
.stage__ghost { position: absolute; opacity: .55; filter: grayscale(1); pointer-events: none; }
.zone { position: absolute; border: 2px solid var(--ink); box-shadow: 0 0 0 1px rgb(0 0 0 / .6), inset 0 0 0 1px rgb(0 0 0 / .6); cursor: move; }
.zone.is-static { cursor: default; border-width: 1px; }
.zone--area { background: rgb(236 235 230 / .06); }
.zone--protected { border-style: dashed; border-color: var(--loss); background: rgb(217 170 160 / .12); }
.zone:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.zone__label { position: absolute; left: 0; top: 0; translate: 0 -100%; padding: 2px 6px; background: var(--ink); color: var(--bg); font: 600 10px/1.4 var(--f-text); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.zone--protected .zone__label { background: var(--loss); }
.zone.is-static .zone__label { display: none; }
.zone__h { position: absolute; width: 14px; height: 14px; background: var(--ink); border: 1px solid #000; }
.zone__h--nw { left: -7px; top: -7px; cursor: nwse-resize; }
.zone__h--ne { right: -7px; top: -7px; cursor: nesw-resize; }
.zone__h--sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
.zone__h--se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.zone.is-static .zone__h { display: none; }
.pl { position: absolute; cursor: move; outline: 1px dashed rgb(236 235 230 / .7); }
.pl img { width: 100%; height: 100%; display: block; pointer-events: none; }
.pl__h { position: absolute; right: -8px; bottom: -8px; width: 16px; height: 16px; background: var(--ink); border: 1px solid #000; cursor: nwse-resize; }
.pl__h--nw { left: -8px; top: -8px; right: auto; bottom: auto; }
.zgrid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(220px, 1fr); gap: 20px; align-items: start; }
.stage--zones { align-self: start; }
.zside { display: grid; gap: 14px; }
.zside input[type=range], .drawer input[type=range] { width: 100%; accent-color: var(--ink); }
.zlist { display: grid; gap: 6px; }
.zlist li { display: grid; grid-template-columns: minmax(0, 1fr) 38px; gap: 6px; }
.tslot { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; padding: 18px 0; border-top: 1px solid var(--line); }
.tslot__media { display: grid; place-items: center; min-height: 150px; background: var(--bg-3); }
.tslot__media img { width: 100%; height: auto; }
.tslot__body { display: grid; gap: 10px; align-content: start; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1280px) {
  .actions-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpis--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1180px) {
  .qgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .resultbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resultbar > div:nth-child(2) { border-right: 0; }
  .resultbar > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .minis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .shell { grid-template-columns: 1fr; }
  .topbar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    height: 62px; padding: 0 var(--gut);
    background: rgb(11 11 10 / .92); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .topbar__brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .topbar__brand img { width: 36px; height: 36px; }
  .topbar__brand span { font: 800 17px/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side { position: fixed; inset: 62px 0 0 0; z-index: 50; height: auto; border-right: 0; transform: translateX(-100%); visibility: hidden; transition: transform .5s var(--ease-io), visibility 0s .5s; }
  .side.is-open { transform: none; visibility: visible; transition: transform .5s var(--ease-io); }
  .side__brand { display: none; }
  .side__link { min-height: 50px; font-size: 26px; }
  .side__link--sub { font-size: 22px; min-height: 44px; }
  .side__link--leaf { font-size: 19px; min-height: 40px; }
  .hero { grid-template-columns: 1fr; }
  .hero__media { min-height: 380px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split--wide, .charts { grid-template-columns: 1fr; }
  .panels { grid-template-columns: 1fr; }
  .cgroup, .srow { grid-template-columns: 1fr; gap: 18px; }
  .login { grid-template-columns: 1fr; }
  .login__media { min-height: 38svh; }
  .login__media::after { background: linear-gradient(0deg, var(--bg) 0%, transparent 60%); }
  .login__anno { display: none; }
  .login__panel { padding-top: 8px; }
}

@media (max-width: 760px) {
  body { font-size: 15px; }
  .head { grid-template-columns: 1fr; }
  .head__actions { justify-content: flex-start; }
  .head__actions .btn { flex: 1 1 auto; }
  .actions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qa { min-height: 112px; padding: 16px; }
  .qa strong { font-size: 19px; }
  .kpis--5, .kpis--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: 16px 14px 18px; }
  .kpi .figure { font-size: clamp(26px, 8vw, 34px); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .table-wrap.has-mobile { display: none; }
  .mlist { display: block; }
  .more { grid-template-columns: 1fr; }
  .toolbar__row > label:not(.search) { flex: 1 1 calc(50% - 6px); min-width: 0; }
  .toolbar__row > label .select { width: 100%; min-width: 0; }
  .grid-2, .grid-3, .cgroup__fields { grid-template-columns: 1fr; }
  .drawer { grid-template-columns: 1fr; }
  .drawer__scrim { display: none; }
  .drawer__panel { border-left: 0; }
  .drawer__head, .drawer__body { padding-left: 20px; padding-right: 20px; }
  .drawer__foot { padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); }
  .drawer__foot .btn--solid { min-width: 0; flex: 1; }
  .calc { grid-template-columns: 1fr 1fr 1fr; }
  .calc div { padding: 12px 10px; }
  .calc b { font-size: 19px; }
  .empty { grid-template-columns: 1fr; }
  .empty img { max-width: 200px; }
  .dossiers { grid-template-columns: 1fr; }
  .activity > li { grid-template-columns: 76px minmax(0, 1fr); }
  .activity .tag { display: none; }
  .upload { grid-template-columns: 88px minmax(0, 1fr); }
  .upload .thumb { width: 88px; }
  .seg { width: 100%; }
  .seg button, .seg label { flex: 1 1 auto; justify-content: center; padding: 0 10px; }
  .cats li { grid-template-columns: 100px minmax(0, 1fr) 38px; }
  .compare { grid-template-columns: 1fr; }
  .compare > span { display: none; }
  .band { margin-bottom: -96px; }
  .login__title .display { font-size: 84px; }
  .btoolbar__toggle { display: inline-flex; }
  .pbulk { top: 62px; }
  .pflow, .zgrid { grid-template-columns: 1fr; }
  .tslot { grid-template-columns: 96px minmax(0, 1fr); }
  .tslot__media { min-height: 96px; }
  [data-psel-bar] { top: 62px; }
  .btoolbar__filters[data-closed] { display: none; }
  .btoolbar__filters > .field { flex: 1 1 100%; }
  .btoolbar__filters .range .input { width: auto; flex: 1; }
  .selbar__shown { margin-left: 0; width: 100%; }
  .dwrap .dossier { padding-left: 56px; }
  .qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .q strong { font-size: 26px; }
  .resultbar { grid-template-columns: 1fr; }
  .resultbar > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rows--grid { grid-template-columns: 1fr; }
  /* tabs and the export button share one row: the tabs scroll, export is an icon */
  .studio-bar { gap: 8px; }
  .studio-bar .tabs { flex: 1 1 auto; min-width: 0; }
  .studio-bar [data-export-excel] { min-width: 44px; padding-inline: 12px; }
  .studio-bar__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* product filters: one scrolling row of statuses; site, batch and category behind "Още филтри" */
  .toolbar .seg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .toolbar .seg button { flex: none; }
  .toolbar:not(.is-more) .opt { display: none; }
  .drawer__foot { flex-wrap: wrap; }
  .drawer__btns { width: 100%; }
  .drawer__btns .btn { flex: 1 1 auto; }
  .tip::after { left: auto; right: -40px; width: 230px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}

/* Condition stars (same drawing as the public site): each star is an outline with a filled copy
   clipped to its share of the grade, so 4.5 shows four full stars and a fifth filled exactly halfway. */
.stars { display: inline-flex; gap: .16em; vertical-align: middle; color: var(--ink); line-height: 0; }
.star { position: relative; flex: none; width: 1em; height: 1em; }
.star svg { position: absolute; top: 0; left: 0; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.star__fill { position: absolute; inset: 0; width: var(--fill, 0%); overflow: hidden; }
.star__fill svg { fill: currentColor; }
.pcard__cond { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.pcard__cond .stars { font-size: 13px; }
.grade-pick { border: 0; margin: 0; padding: 0; gap: 6px; }
.grade-pick > legend { padding: 0; margin-bottom: 8px; font: 600 11px/1.2 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.grade-pick__opt { display: grid; grid-template-columns: auto auto auto 1fr; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); cursor: pointer; font-size: 14px; color: var(--ink-2); transition: border-color var(--t-fast), background-color var(--t-fast); }
.grade-pick__opt:hover { border-color: var(--line-2); }
.grade-pick__opt:has(input:checked) { border-color: var(--ink); background: var(--bg-3); color: var(--ink); }
.grade-pick__opt input { appearance: none; width: 16px; height: 16px; margin: 0; border: 1px solid var(--line-2); border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.grade-pick__opt input:checked { border-color: var(--ink); }
.grade-pick__opt input:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.grade-pick__opt input:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.grade-pick__opt .stars { font-size: 15px; }
.grade-pick__opt .mono { font-size: 12px; color: var(--mute); }
@media (max-width: 520px) { .grade-pick__opt { grid-template-columns: auto auto 1fr; } .grade-pick__opt > span:last-child { grid-column: 2 / -1; padding-bottom: 10px; } }

/* Free photo rotation (catalogue): the saved angle is applied when shown, the file is never changed.
   A turned photo is shown whole ("contain") and scaled by fitRotated() so nothing is cut off. */
img.is-rotated { object-fit: contain !important; rotate: var(--rot); }
.rotlist { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rotlist__item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 8px 10px 8px 8px; border: 1px solid var(--line); }
.rotlist__thumb { display: block; width: 56px; aspect-ratio: 1 / 1; overflow: hidden; background: var(--checker-dark) 0 0 / 10px 10px; }
.rotlist__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.rotlist__meta { display: grid; gap: 4px; min-width: 0; font-size: 13.5px; }
.rotlist__meta .mono { font-size: 12px; color: var(--mute); }
.rotlist__item .btn .icon { width: 16px; height: 16px; }
/* transparency shown on a dark checkerboard: close to the site's dark cards, and white or light products stay visible */
:root { --checker-dark: repeating-conic-gradient(#2a2a27 0 25%, #1c1c1a 0 50%); }
dialog.dlg.dlg--rot { width: min(820px, calc(100% - 32px)); }
.rot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: 28px; align-items: start; }
.rot__stage {
  justify-self: center;
  width: min(100%, 60vh); aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--checker-dark) 0 0 / 16px 16px;
  outline: 1px solid var(--line-2);
}
.rot__stage img { display: block; width: 100%; height: 100%; object-fit: contain; transition: rotate .12s ease-out, scale .12s ease-out; }
.rot__panel { display: grid; gap: 20px; align-content: start; }
.rot__dial { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.rot__turn { width: 40px; padding: 0; justify-content: center; }
.rot__turn .icon { width: 18px; height: 18px; }
.rot__range { width: 100%; accent-color: var(--ink); }
.rot__num { font-family: var(--f-mono); }
.rot__presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rot__presets .btn { justify-content: center; padding-inline: 0; }
.rot__reset { justify-self: start; }
@media (prefers-reduced-motion: reduce) { .rot__stage img { transition: none; } }
@media (max-width: 720px) {
  .rot { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .rot__stage { width: min(100%, calc(46vh * 4 / 5)); }
}

/* -- Navigation: report pages in the menu only while inside the report (its tabs lead there too) -- */
.side__link--leaf { display: none; }
.side.in-report .side__link--leaf { display: flex; }
.tabbar, .topbar__site, .fab { display: none; }
.hero__next { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }

/* -- Meetings ------------------------------------------------------------------------ */
.mtg-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 22px; }
.mtg-bar__q { flex: 1 1 260px; }
.mtg-bar { align-items: end; }
.mtg-bar__f { display: grid; gap: 6px; }
.mtg-bar__f > span { font: 600 10.5px/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.mtg-bar__f .select, .mtg-bar__f .input { min-height: 46px; }
.wk__nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.wk__nav .icon-btn { width: 46px; height: 46px; }
.wk__range { display: grid; gap: 3px; min-width: 0; order: -1; flex: 0 1 auto; margin-right: 8px; }
.wk__range b { font: 800 clamp(26px, 3vw, 36px)/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.wk__range span { font: 400 12px/1 var(--f-mono); color: var(--mute); letter-spacing: .08em; }
.wk__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--line); border: 1px solid var(--line); }
.wk__day { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 220px; padding: 12px 10px 14px; background: var(--bg); }
.wk__day.is-past { background: var(--bg-2); }
.wk__day.is-past .wk__name, .wk__day.is-past .wk__date { color: var(--mute); }
.wk__day.is-today { box-shadow: inset 0 2px 0 var(--ink); }
.wk__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name add" "date add"; align-items: center; column-gap: 6px; }
.wk__name { grid-area: name; font: 700 13px/1.2 var(--f-text); text-transform: uppercase; letter-spacing: .06em; overflow-wrap: anywhere; }
.wk__name em { font: 400 10px var(--f-mono); font-style: normal; letter-spacing: .1em; padding: 2px 5px; margin-left: 4px; background: var(--ink); color: var(--bg); vertical-align: 2px; }
.wk__date { grid-area: date; font: 400 12px/1.4 var(--f-mono); color: var(--ink-2); }
.wk__add { grid-area: add; display: grid; place-items: center; width: 36px; height: 36px; border: 1px dashed var(--line-2); color: var(--ink-2); }
.wk__add .icon { width: 16px; height: 16px; }
.wk__add:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) { .wk__add:hover { border-style: solid; border-color: var(--ink); color: var(--ink); } }
.wk__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wk__free { font-size: 12.5px; color: var(--mute); }
.mtg { display: grid; border: 1px solid var(--line-2); background: var(--bg-2); min-width: 0; }
.mtg--done { opacity: .62; }
.mtg--cancelled { opacity: .5; }
.mtg--cancelled .mtg__who b { text-decoration: line-through; }
.mtg.is-late { border-color: var(--loss); }
.mtg__open { display: grid; gap: 6px; padding: 12px 12px 10px; text-align: left; min-width: 0; }
.mtg__open:focus-visible { outline: 1px solid var(--ink); outline-offset: -3px; }
.mtg__when { display: flex; align-items: baseline; gap: 8px; }
.mtg__time { font: 800 24px/1 var(--f-display); letter-spacing: .02em; }
.mtg__date { font: 400 12px/1 var(--f-mono); color: var(--ink-2); text-transform: uppercase; }
.mtg__who { display: grid; gap: 2px; min-width: 0; }
.mtg__who b { font-weight: 700; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtg__who small { color: var(--mute); font-size: 12.5px; }
.mtg__line { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 7px; align-items: start; font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.mtg__line .icon { width: 15px; height: 15px; margin-top: 1px; color: var(--mute); }
.mtg__line > span { overflow-wrap: anywhere; }
.mtg__items > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.mtg__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 10px 12px; border-top: 1px solid var(--line); }
.mtg__acts { display: flex; gap: 6px; flex-wrap: wrap; }
.mtg__acts .btn { min-height: 34px; padding: 0 10px; }
.mtg__acts .icon { width: 14px; height: 14px; }
.wk__day .mtg__foot { padding: 6px 8px 8px; }
.mtg-all { display: grid; gap: 18px; }
.mtg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.mtg-none { padding: 32px 0; color: var(--mute); border-top: 1px solid var(--line); }
.input-at { position: relative; display: block; }
.input-at > span { position: absolute; left: 14px; top: 50%; translate: 0 -50%; color: var(--mute); font-family: var(--f-mono); pointer-events: none; }
.input-at .input { padding-left: 32px; }
.mtg-status { border: 0; padding: 0; margin: 0; }
.mtg-status > legend { padding: 0; margin-bottom: 8px; font: 600 11px/1.2 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.mtg-status .seg { width: 100%; }
.mtg-status .seg label { flex: 1 1 0; justify-content: center; padding: 0 8px; }

/* a week of 7 columns needs room; below that the days become a list */
@media (max-width: 1279px) {
  .wk__days { grid-template-columns: 1fr; }
  .wk__day { min-height: 0; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .wk__day.is-empty { padding-block: 8px; }
  .wk__head { align-self: start; }
  .wk__list { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
  .wk__free { align-self: center; }
}

/* -- Phones and tablets: a bottom tab bar, the menu, a quick "+" ------------------------- */
@media (max-width: 1023px) {
  .topbar__site { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 600 11px/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
  .topbar__site .icon { width: 14px; height: 14px; }
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    padding-bottom: env(safe-area-inset-bottom);
    background: rgb(11 11 10 / .96); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line-2);
  }
  .tabbar__link { position: relative; display: grid; justify-items: center; align-content: center; gap: 5px; min-height: 62px; padding: 6px 2px; font: 600 10.5px/1 var(--f-text); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
  .tabbar__link .icon { width: 22px; height: 22px; }
  .tabbar__link[aria-current="page"], .tabbar__link[aria-expanded="true"] { color: var(--ink); }
  .tabbar__link[aria-current="page"]::before { content: ""; position: absolute; top: -1px; left: 22%; right: 22%; height: 2px; background: var(--ink); }
  .tabbar__link:focus-visible { outline: 1px solid var(--ink); outline-offset: -4px; }
  .tabbar__count { position: absolute; top: 7px; left: calc(50% + 8px); min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; font: 600 10px/1 var(--f-mono); background: var(--ink); color: var(--bg); border-radius: 9px; }
  .tabbar__count:empty { display: none; }
  .side { inset: 62px 0 calc(62px + env(safe-area-inset-bottom)) 0; overflow-y: auto; }
  .main { padding-bottom: calc(62px + 96px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(62px + 18px + env(safe-area-inset-bottom)); }
  .fab {
    position: fixed; right: 16px; bottom: calc(62px + 16px + env(safe-area-inset-bottom)); z-index: 44;
    display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
    background: var(--ink); color: var(--bg); box-shadow: 0 10px 30px rgb(0 0 0 / .5);
  }
  .fab .icon { width: 26px; height: 26px; }
  .fab:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  .mtg-new { display: none; }
  /* touch: every control a finger can hit */
  .link, .reset, .back, .hero__next { min-height: 44px; display: inline-flex; align-items: center; }
  .mtg__acts .btn { min-height: 40px; padding: 0 12px; }
  /* section tabs scroll sideways: a soft edge says there is more */
  .tabs { gap: 24px; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); padding-right: 40px; }
  .tabs a { padding: 16px 0; }
  .btn--sm { min-height: 42px; }
  .icon-btn { min-width: 44px; min-height: 44px; }
}
@media (max-width: 640px) {
  .mtg-bar { gap: 10px; }
  .mtg-bar > .seg { width: 100%; }
  .mtg-bar > .seg button { flex: 1 1 0; justify-content: center; }
  .mtg-bar__f { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .mtg-bar__f .select, .mtg-bar__f .input { width: 100%; min-width: 0; }
  .wk__range { flex: 1 1 100%; margin-right: 0; }
  .wk__nav .icon-btn { order: 1; }
  .wk__nav .btn { order: 2; margin-left: auto; }
  .wk__day { grid-template-columns: 1fr; gap: 10px; }
  .wk__day.is-empty { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .wk__day.is-empty .wk__head { grid-template-areas: "name date add"; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; }
  .wk__day.is-empty .wk__free { display: none; }
  .wk__list { grid-template-columns: 1fr; }
  .mtg-all > .seg { width: 100%; }
  .mtg-all > .seg button { flex: 1 1 0; justify-content: center; }
}

/* Server still running code from before an update (see updateNav) */
.restart-note { grid-column: 1 / -1; margin: 0; padding: 12px var(--gut); border-bottom: 1px solid var(--loss); background: var(--bg-2); font-size: 14px; line-height: 1.5; text-wrap: pretty; }
.restart-note[hidden] { display: none; }
.restart-note code { font-family: ui-monospace, monospace; padding: 1px 6px; border: 1px solid var(--line-2); white-space: nowrap; }

/* Photos of an item (photo-field.js): thumbnails in order, the first is the main one */
.pf { display: grid; gap: 12px; padding: 12px; border: 1px dashed var(--line-2); transition: border-color var(--t-fast), background-color var(--t-fast); }
.pf.is-drop { border-color: var(--ink); background: var(--bg-2); }
.pf__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.pf__item { position: relative; display: grid; gap: 6px; align-content: start; padding: 6px; border: 1px solid var(--line); background: var(--bg); }
.pf__item.is-main { border-color: var(--ink); }
.pf__item.is-busy { opacity: .6; }
.pf__item.is-busy .pf__thumb { animation: pulse 1.2s ease-in-out infinite; }
.pf__thumb { display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; overflow: hidden; background: var(--checker-dark) 0 0 / 10px 10px; cursor: zoom-in; }
.pf__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pf__thumb .thumb__ph { display: grid; place-items: center; height: 100%; }
.pf__no { position: absolute; top: 10px; left: 10px; padding: 4px 6px; background: rgb(11 11 10 / .78); font: 600 10px/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; pointer-events: none; }
.pf__acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
.pf__acts .icon-btn { width: 100%; height: 32px; min-width: 0; min-height: 0; }
.pf__acts .icon-btn[disabled] { opacity: .3; cursor: default; }
.pf__del:hover { color: var(--loss); }
.pf__main { min-height: 32px; border: 1px solid var(--line); font: 600 10px/1 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.pf__main:hover { border-color: var(--ink); color: var(--ink); }
.pf__add { display: flex; flex-wrap: wrap; gap: 8px; }
.pf__url { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.pf__hint { font-size: 12.5px; }
.pf__msg { min-height: 1em; margin: 0; font-size: 13px; color: var(--ink-2); }
.pf__msg:empty { display: none; }
.pf__msg.is-error { color: var(--loss); }

/* A picture that opens full size (tables, cards); the photo count when there are several */
.thumb[data-zoom] { cursor: zoom-in; }
.thumb__n { position: absolute; z-index: 1; right: 2px; bottom: 2px; min-width: 16px; padding: 2px 3px; background: rgb(11 11 10 / .82); font: 600 9px/1 var(--f-mono); text-align: center; pointer-events: none; }

/* Status "За мен" and where an item stands on the public site */
.status--personal { border-style: dotted; color: var(--ink-2); }
.site-tag { display: inline-flex; align-items: center; gap: 6px; font: 600 10px/1.2 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.site-tag::before { content: ""; width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; }
.site-tag.is-on { color: var(--ink); }
.site-tag.is-on::before { background: currentColor; }
.mcard__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.note { margin: 0; padding: 10px 12px; border-left: 2px solid var(--line-2); background: var(--bg-2); font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.note.is-on { border-left-color: var(--ink); color: var(--ink); }
@media (max-width: 640px) {
  /* phones: one row that scrolls sideways (wider screens wrap it) */
  .seg--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .seg--scroll button { flex: none; }
  .pf__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf__acts .icon-btn { height: 40px; }
  .pf__url { grid-template-columns: 1fr; }
}
/* on phones the picture opens the photos, the name opens the form */
.mcard__name { display: block; min-height: 44px; padding: 0; text-align: left; }
.mcard__name strong { text-decoration: underline 1px transparent; text-underline-offset: 4px; transition: text-decoration-color var(--t-fast); }
.mcard__name:hover strong, .mcard__name:focus-visible strong { text-decoration-color: currentColor; }

/* -- Orders (views/orders.js): customers, their wanted items and the listings found ---------- */
.ord-minis { grid-template-columns: repeat(7, minmax(0, 1fr)); margin-bottom: 18px; }
.ord-stat { font: inherit; color: inherit; border-bottom: 1px solid var(--line-2); min-height: 28px; }
@media (hover: hover) { .ord-stat:hover { border-color: var(--ink); } }
.ord-handle { display: block; text-transform: none; font-size: clamp(34px, 5.2vw, 72px); overflow-wrap: anywhere; }
.ord-count { margin-bottom: 12px; }
.ocl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ocl { display: grid; grid-template-rows: auto 1fr auto; border: 1px solid var(--line-2); background: var(--bg-2); min-width: 0; }
.ocl__open { display: grid; gap: 4px; padding: 14px 14px 8px; min-width: 0; }
.ocl__open b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ocl__open small { color: var(--ink-2); font-size: 13px; }
.ocl__open:focus-visible { outline: 1px solid var(--ink); outline-offset: -3px; }
.ocl__meta { font: 400 11.5px/1.4 var(--f-mono); color: var(--mute); }
.ocl__tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; align-content: start; }
.ocl-notes p { font-size: 14px; white-space: pre-line; }
.status--nolink { border-color: var(--loss); color: var(--loss); }
.status--prio { border-color: var(--ink); color: var(--ink); vertical-align: 3px; margin-left: 6px; }
.orq-st--to_order { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.orq-st--searching { border-style: dashed; }
.orq-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 12px; }
.orq { display: grid; gap: 12px; align-content: start; padding: 14px; border: 1px solid var(--line-2); background: var(--bg-2); min-width: 0; }
.orq--to_order { border-color: var(--ink); }
.orq--delivered, .orq--closed, .orq.is-archived { opacity: .62; }
.orq.is-nolink { border-left: 3px solid var(--loss); }
.orq__head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.orq__title { display: grid; gap: 4px; min-width: 0; }
.orq__client { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; min-width: 0; }
.orq__client a { border-bottom: 1px solid var(--line-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orq__client small { font-weight: 400; color: var(--mute); }
.orq__client .icon-btn { width: 30px; height: 30px; flex: none; }
.orq__client .icon-btn .icon, .olink .icon-btn .icon { width: 15px; height: 15px; }
.orq__name { font: 800 19px/1.15 var(--f-display); text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; }
.orq__name > button { text-align: left; text-transform: inherit; }
.orq__name > button:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.orq__spec { color: var(--ink-2); font-size: 13.5px; }
.orq__status { flex: none; }
.oselect { appearance: none; min-height: 34px; padding: 0 30px 0 10px; border: 1px solid var(--line-2); font: 600 11px/1 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23bebdb6' d='M212.24,100.24l-80,80a6,6,0,0,1-8.48,0l-80-80a6,6,0,0,1,8.48-8.48L128,167.51l75.76-75.75a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") no-repeat right 10px center / 11px; cursor: pointer; max-width: 100%; }
.oselect:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.orq__nolink { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.olinks { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--line); border: 1px solid var(--line); }
.olink { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "role host price state" "acts acts acts acts" "note note note note"; align-items: center; gap: 8px 10px; padding: 10px; background: var(--bg); }
.olink.is-main { box-shadow: inset 3px 0 0 var(--ink); }
.olink__role { grid-area: role; font: 600 10px/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.olink.is-main .olink__role { color: var(--ink); }
.olink__host { grid-area: host; font: 400 12.5px/1.3 var(--f-mono); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.olink__price { grid-area: price; font: 700 14px/1 var(--f-text); font-variant-numeric: tabular-nums; }
.olink .oselect { grid-area: state; }
.olink__acts { grid-area: acts; display: flex; flex-wrap: wrap; gap: 6px; }
.olink__acts .btn { min-height: 34px; padding: 0 12px; }
.olink__acts .icon-btn { width: 34px; height: 34px; }
.olink__note { grid-area: note; font-size: 13px; color: var(--ink-2); }
.olink--sold .olink__host, .olink--invalid .olink__host { text-decoration: line-through; }
.olink--sold .oselect, .olink--invalid .oselect { border-color: var(--loss); color: var(--loss); }
.olink--available .oselect { border-color: var(--ink); }
.olink.is-opened .olink__role::after { content: " · отворена"; color: var(--ink-2); letter-spacing: .06em; }
.orq__money { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; }
.orq__money dt { font: 600 10px/1.2 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.orq__money dd { margin: 3px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.orq__text { font-size: 13.5px; color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; }
.orq__text b { color: var(--ink); font-weight: 600; }
.orq__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.orq__acts { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.orq__acts .btn { min-height: 36px; }
/* "За поръчване": one wide row per item, client and item on the left, every listing on the right */
.orq-list--buy { grid-template-columns: 1fr; }
@media (min-width: 1100px) {
  .orq-list--buy .orq { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); grid-template-areas: "head links" "money links" "text links" "text2 links" "foot foot"; column-gap: 22px; }
  .orq-list--buy .orq > .orq__head { grid-area: head; flex-direction: column; }
  .orq-list--buy .orq > .olinks, .orq-list--buy .orq > .orq__nolink { grid-area: links; align-self: start; }
  .orq-list--buy .orq > .orq__money { grid-area: money; }
  .orq-list--buy .orq > .orq__text { grid-column: 1; }
  .orq-list--buy .orq > .orq__foot { grid-area: foot; }
}
.ord-arch { margin-top: 28px; }
.ord-arch > summary { cursor: pointer; padding: 12px 0; font: 600 11.5px/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); border-top: 1px solid var(--line); }
.ord-arch > .orq-list { margin-top: 12px; }
/* the listings editor in the request form */
.olinks-edit { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.olinks-edit > legend { padding: 0; margin-bottom: 8px; font: 600 11px/1.2 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.olinks-edit > .btn { justify-self: start; }
[data-links] { display: grid; gap: 10px; }
.lrow { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); }
.lrow.is-main { border-color: var(--ink); }
.lrow__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; }
.lrow__head b { font: 600 11px/1.2 var(--f-text); letter-spacing: .14em; text-transform: uppercase; }
.lrow__acts { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.lrow__acts .btn { min-height: 34px; padding: 0 10px; }
.lrow__acts .icon-btn { width: 34px; height: 34px; }
.lrow__meta { display: grid; grid-template-columns: 110px 150px minmax(0, 1fr); gap: 8px; }
.ohist > summary { cursor: pointer; font: 600 11px/1.2 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); padding: 8px 0; }
.ohist ol { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ohist li { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.ohist time { font: 400 12px var(--f-mono); color: var(--mute); }
@media (max-width: 1023px) { .ord-minis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .ord-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .orq__head { flex-direction: column; }
  .orq__status, .orq__status .oselect { width: 100%; }
  .olink { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "role host price" "state state state" "acts acts acts" "note note note"; }
  .olink .oselect { width: 100%; min-height: 40px; }
  .olink__acts .btn, .olink__acts .icon-btn { min-height: 40px; height: 40px; }
  .olink__acts .btn:first-child { flex: 1 1 auto; justify-content: center; }
  .lrow__meta { grid-template-columns: 1fr 1fr; }
  .lrow__meta [data-l=note] { grid-column: 1 / -1; }
  .orq__acts .btn { flex: 1 1 auto; justify-content: center; }
}