/* Commerce visual system: the public landing, the marketplace pages and the
   shop's workplace. Colours, radii and spacing come from the tokens in
   app.css (:root); nothing here defines its own palette. */

/* ── Public site: nav and landing ──────────────────────────────────────── */
.owo-nav{max-width:1240px;margin:auto;padding:22px 32px;border-bottom:1px solid var(--ui-border);box-sizing:border-box;background:transparent;gap:24px}
.owo-nav-brand{font-size:28px;letter-spacing:-2px}
.owo-nav-links{gap:22px;align-items:center;flex-wrap:wrap}.owo-nav-links a{font-size:13px}
.owo-nav-links .owo-nav-primary{background:var(--ui-graphite);color:var(--ui-on-graphite);padding:11px 16px;border-radius:var(--ui-radius-sm)}
.owo-nav-links .owo-nav-primary:hover{background:var(--ui-graphite-soft);color:var(--ui-on-graphite);text-decoration:none}

@media(max-width:640px){.owo-nav{padding:18px 20px;align-items:flex-start;flex-wrap:wrap}.owo-nav-links{gap:14px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Landing (mainpage.twig): OWO is where a shop is started and run — products,
   orders, customers, stock and its own storefront; services it already uses
   connect to it. Graphite hero (nav and hero one block, painted past the
   container and clipped so the page never scrolls sideways), light sections
   below. Body text never below 15px; lime is the hero's CTA and accents only. */
body:has(.lp) .owo-nav { background: var(--ui-graphite); box-shadow: 0 0 0 100vmax var(--ui-graphite); clip-path: inset(0 -100vmax); border-bottom-color: var(--ui-graphite-line); }
body:has(.lp) .owo-nav-brand { color: var(--ui-on-graphite); }
body:has(.lp) .owo-nav-links a { color: var(--ui-on-graphite-muted); font-size: 15px; }
body:has(.lp) .owo-nav-links a:hover { color: var(--ui-on-graphite); }
body:has(.lp) .owo-nav-links .owo-nav-primary { background: var(--ui-brand); color: var(--ui-graphite); font-weight: 600; }
body:has(.lp) .owo-nav-links .owo-nav-primary:hover { background: var(--ui-brand-hover); color: var(--ui-graphite); }
.lp { max-width: 1240px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; color: var(--ui-text); }
.lp * { box-sizing: border-box; }
.lp a { color: var(--ui-graphite); }
.lp section { scroll-margin-top: 24px; }
.lp h2 { margin: 0 0 12px; font-size: clamp(28px, 3.2vw, 38px); line-height: 1.2; letter-spacing: -1px; font-weight: 600; color: var(--ui-graphite); }
.lp-section { padding: 72px 0; border-top: 1px solid var(--ui-border); }
.lp-hero + .lp-section { border-top: 0; }
.lp-section-lead { max-width: 680px; margin: 0 0 36px; font-size: 18px; line-height: 1.65; color: var(--ui-text-muted); }
.lp-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 14px; font-weight: 600; color: var(--ui-text-muted); }
.lp-eyebrow::before { content: ""; width: 20px; height: 3px; border-radius: 2px; background: var(--ui-brand); flex: none; }
/* Buttons: graphite on light surfaces; the hero's main CTA is lime on graphite (8:1 contrast). */
.lp .owo-btn { display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 52px; padding: 0 26px; font-size: 16px; font-weight: 600; color: var(--ui-on-graphite); text-decoration: none; }
.lp .owo-btn-brand, .lp .owo-btn-brand:focus, .lp .owo-btn-brand:hover { color: var(--ui-graphite); }
.lp .owo-btn-secondary { color: var(--ui-graphite); }
.lp-link { font-size: 16px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--ui-brand); text-decoration-thickness: 2px; text-underline-offset: 5px; }
/* Hero */
.lp-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 72px 0 88px; background: var(--ui-graphite); color: var(--ui-on-graphite); box-shadow: 0 0 0 100vmax var(--ui-graphite); clip-path: inset(0 -100vmax); }
.lp-hero .lp-eyebrow { color: var(--ui-brand); }
.lp-hero h1 { margin: 0 0 22px; font-size: clamp(40px, 5vw, 64px); line-height: 1.06; letter-spacing: -2.4px; font-weight: 600; color: var(--ui-on-graphite); overflow-wrap: break-word; }
.lp-hero-lead { max-width: 560px; margin: 0; font-size: 19px; line-height: 1.65; color: var(--ui-on-graphite-muted); }
.lp-hero-lead strong { color: var(--ui-on-graphite); font-weight: 600; }
.lp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 34px; }
.lp-hero .lp-link { color: var(--ui-on-graphite); }
.lp-hero-note { margin: 18px 0 0; font-size: 15px; color: var(--ui-on-graphite-muted); }
/* Hero picture: the shop's storefront on a phone and the order it becomes. */
.lp-demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: end; }
.lp-phone { padding: 14px; border-radius: 26px; background: var(--ui-surface); color: var(--ui-text); box-shadow: 0 0 0 6px var(--ui-graphite-soft); }
.lp-phone-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 14px; font-weight: 700; color: var(--ui-graphite); }
.lp-phone-bar span:last-child { font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--ui-brand); font-size: 13px; }
.lp-phone-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--ui-border); font-size: 15px; }
.lp-phone-item i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--ui-surface-hover); font-style: normal; font-size: 20px; }
.lp-phone-item b { display: block; color: var(--ui-graphite); }
.lp-phone-item small { color: var(--ui-text-muted); font-size: 14px; }
.lp-phone-button { margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--ui-graphite); color: var(--ui-on-graphite); text-align: center; font-size: 15px; font-weight: 600; }
.lp-order { padding: 20px; border-radius: 16px; background: var(--ui-canvas); color: var(--ui-text); border: 1px solid var(--ui-graphite-line); }
.lp-order-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 14px; font-size: 14px; color: var(--ui-text-muted); }
.lp-order-head strong { font-size: 18px; color: var(--ui-graphite); }
.lp-order dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: 15px; }
.lp-order dt { color: var(--ui-text-muted); }
.lp-order dd { margin: 0; color: var(--ui-graphite); font-weight: 600; }
.lp-order-badge { display: inline-block; margin-top: 14px; padding: 5px 10px; border-radius: var(--ui-radius-badge); background: var(--ui-brand-soft); color: var(--ui-brand-ink); font-size: 14px; font-weight: 600; }
/* What OWO does: plain cards; the storefront is the wide graphite one. */
.lp-features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-features li { padding: 28px; border: 1px solid var(--ui-border); border-radius: 16px; background: var(--ui-surface); }
.lp-features li.is-wide { grid-column: span 2; background: var(--ui-graphite); color: var(--ui-on-graphite); border-color: var(--ui-graphite); }
.lp-features i { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 12px; background: var(--ui-brand-soft); color: var(--ui-brand-ink); font-size: 18px; }
.lp-features li.is-wide i { background: var(--ui-brand); color: var(--ui-graphite); }
.lp-features h3 { margin: 0 0 8px; font-size: 20px; font-weight: 600; color: var(--ui-graphite); }
.lp-features li.is-wide h3 { color: var(--ui-on-graphite); }
.lp-features p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ui-text-muted); }
.lp-features li.is-wide p { color: var(--ui-on-graphite-muted); }
/* How it goes: five steps. */
.lp-steps { list-style: none; counter-reset: lp-step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.lp-steps li { counter-increment: lp-step; padding-top: 18px; border-top: 3px solid var(--ui-border); font-size: 16px; line-height: 1.55; color: var(--ui-text-muted); }
.lp-steps li:first-child { border-top-color: var(--ui-brand); }
.lp-steps li::before { content: counter(lp-step); display: block; margin-bottom: 10px; font-size: 15px; font-weight: 700; color: var(--ui-brand-ink); }
.lp-steps strong { display: block; margin-bottom: 4px; font-size: 18px; color: var(--ui-graphite); }
/* Services: what connects now, what is planned — never mixed up. */
.lp-services { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.lp-services > div { padding: 28px; border: 1px solid var(--ui-border); border-radius: 16px; background: var(--ui-surface); }
.lp-services h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 20px; color: var(--ui-graphite); }
.lp-services > div > p { margin: 0 0 16px; font-size: 15px; line-height: 1.55; color: var(--ui-text-muted); }
.lp-services ul { list-style: none; margin: 0; padding: 0; }
.lp-services li { display: grid; grid-template-columns: minmax(120px, auto) minmax(0, 1fr); gap: 4px 16px; padding: 14px 0; border-top: 1px solid var(--ui-border); font-size: 16px; line-height: 1.5; }
.lp-services li strong { color: var(--ui-graphite); }
.lp-services li span { color: var(--ui-text-muted); }
.lp-badge { display: inline-block; padding: 4px 10px; border-radius: var(--ui-radius-badge); font-size: 14px; font-weight: 600; background: var(--ui-tone-neutral-bg); color: var(--ui-tone-neutral-fg); }
.lp-badge.is-now { background: var(--ui-brand-soft); color: var(--ui-brand-ink); }
.lp-services-note { margin: 18px 0 0; font-size: 15px; line-height: 1.6; color: var(--ui-text-muted); }
/* The marketplace: an extra, at the end — not the first thing a shop sees. */
.lp-market { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding: 32px; border-radius: 16px; background: var(--ui-surface); border: 1px solid var(--ui-border); }
.lp-market h2 { font-size: 26px; }
.lp-market p { max-width: 640px; margin: 0; font-size: 16px; line-height: 1.6; color: var(--ui-text-muted); }
.lp-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin: 0 0 24px; padding: 44px; border-radius: 18px; background: var(--ui-graphite); color: var(--ui-on-graphite); }
.lp-bottom h2 { margin: 0; color: var(--ui-on-graphite); }
.lp-bottom p { margin: 8px 0 0; font-size: 17px; color: var(--ui-on-graphite-muted); }
.lp-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; padding: 28px 0 44px; font-size: 15px; color: var(--ui-text-muted); }
.lp-footer div { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.lp-footer a { color: var(--ui-text-muted); }
@media (max-width: 1000px) {
    .lp-hero { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 48px 0 64px; }
    .lp-demo { max-width: 620px; }
    .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
    .lp-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .lp { padding: 0 20px; }
    .lp-hero { padding: 36px 0 52px; }
    .lp-hero h1 { font-size: 38px; letter-spacing: -1.4px; }
    .lp-hero-lead { font-size: 17px; }
    .lp-cta .owo-btn { width: 100%; }
    .lp-demo { grid-template-columns: minmax(0, 1fr); }
    .lp-order { display: none; }
    .lp-section { padding: 52px 0; }
    .lp-section-lead { font-size: 17px; }
    .lp-features, .lp-services, .lp-steps { grid-template-columns: minmax(0, 1fr); }
    .lp-features li.is-wide { grid-column: auto; }
    .lp-features li, .lp-services > div { padding: 22px; }
    .lp-services li { grid-template-columns: minmax(0, 1fr); }
    .lp-market, .lp-bottom { padding: 24px; }
    .lp-bottom .owo-btn { width: 100%; }
}

/* Marketplace pages (listings). */
.owo-card { background: var(--ui-surface); border-color: var(--ui-border); border-radius: 11px; overflow: hidden; transition: border-color .12s; }
.owo-card:hover { border-color: var(--ui-border-strong); }
.owo-card-title { color: var(--ui-graphite); }
.owo-catalog-page { max-width: 1240px; }
.owo-catalog-header { align-items: flex-start; text-align: left; }
.owo-catalog-header .owo-h1 { display: block; font-size: 34px; letter-spacing: -1px; color: var(--ui-graphite); }
.owo-catalog-header .owo-subtitle { max-width: none; }
.owo-catalog-filters { background: var(--ui-surface); border-color: var(--ui-border); align-items: center; }
.owo-catalog-filters .owo-btn { min-height: 42px; }

/* Form sections (new order, new product): the legend is the card's heading,
   not a caption cut into its border. */
.owo-ord-fieldset { padding: 18px 20px 20px; }
.owo-ord-fieldset > legend { float: left; width: 100%; padding: 0; margin: 0 0 4px; border: 0; font-size: 15px; color: var(--ui-text); }

/* ── Shop workplace UI foundation ──────────────────────────────────────
   One shell, one page header, one list / card / badge / form language for
   every screen of /business/{id}. Components only use the tokens. */

/* Shell: a graphite top bar (the shop switcher), a light sidebar whose
   active section is marked by a lime bar, the data on the canvas. */
.ui-topbar { display: flex; align-items: center; gap: var(--ui-space-4); padding: 0 var(--ui-space-5) 0 var(--ui-space-3); height: 56px; background: var(--ui-graphite); color: var(--ui-on-graphite); position: relative; z-index: 5; }
.ui-switcher { position: relative; min-width: 0; }
.ui-switcher summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 6px; padding: 7px 12px; border: 1px solid var(--ui-graphite-line); border-radius: var(--ui-radius-sm); font-size: 14px; color: var(--ui-on-graphite); max-width: 46vw; }
.ui-switcher summary:hover, .ui-switcher[open] summary { background: var(--ui-graphite-soft); }
.ui-switcher summary::-webkit-details-marker { display: none; }
.ui-switcher summary::after { content: "▾"; color: var(--ui-on-graphite-muted); font-size: 11px; }
.ui-switcher summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-switcher-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 240px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow-pop); padding: var(--ui-space-2); display: grid; }
.ui-switcher-menu a { padding: 8px 10px; border-radius: var(--ui-radius-sm); color: var(--ui-text); text-decoration: none; font-size: 14px; }
.ui-switcher-menu a:hover { background: var(--ui-surface-hover); color: var(--ui-graphite); text-decoration: none; }
.ui-switcher-menu a.is-current { font-weight: 600; background: var(--ui-brand-soft); box-shadow: inset 3px 0 0 var(--ui-brand); }
.ui-switcher-menu .ui-switcher-all { color: var(--ui-text-muted); border-top: 1px solid var(--ui-border); border-radius: 0; margin-top: 4px; padding-top: 10px; }
/* Platform Console (console/templates/layouts/default.twig): the brand in place of the shop switcher. */
.owo-console-brand { padding: 7px 12px; font-size: 14px; color: var(--ui-on-graphite-muted); text-decoration: none; }
.owo-console-brand strong { color: var(--ui-on-graphite); }
.owo-console-brand:hover, .owo-console-brand:focus { color: var(--ui-on-graphite); text-decoration: none; }
.ui-topbar-links { margin-left: auto; display: flex; align-items: center; gap: var(--ui-space-4); }
.ui-topbar-links a { font-size: 13px; color: var(--ui-on-graphite-muted); text-decoration: none; }
.ui-topbar-links a:hover, .ui-topbar-links a:focus { color: var(--ui-on-graphite); text-decoration: none; }
.ui-topbar-links .ui-topbar-user { display: flex; align-items: center; gap: 8px; padding: 3px 12px 3px 3px; background: var(--ui-graphite-soft); border: 1px solid var(--ui-graphite-line); border-radius: var(--ui-radius-sm); color: var(--ui-on-graphite); font-weight: 500; min-width: 0; transition: background-color .12s, border-color .12s; }
.ui-topbar-links .ui-topbar-user:hover, .ui-topbar-links .ui-topbar-user:focus-visible, .ui-account[open] .ui-topbar-user { background: var(--ui-graphite-line); border-color: #52525b; }
.ui-topbar-user .ui-avatar { width: 28px; height: 28px; border-radius: 5px; }
.ui-topbar-user-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The workplace's account menu (business/_account_menu.twig): who, then Мой аккаунт · Мои магазины · Выйти. */
.ui-topbar-menu > summary { list-style: none; cursor: pointer; }
.ui-topbar-menu > summary::-webkit-details-marker { display: none; }
.ui-account { position: relative; min-width: 0; }
.ui-account-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 240px; max-width: calc(100vw - 32px); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow-pop); padding: var(--ui-space-2); display: grid; z-index: 6; }
.ui-account-who { display: grid; gap: 2px; margin: 0 0 4px; padding: 6px 10px 10px; border-bottom: 1px solid var(--ui-border); font-size: 14px; color: var(--ui-graphite); }
.ui-account-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-account-who span { font-size: 12px; color: var(--ui-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-topbar-links .ui-account-menu a, .ui-account-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--ui-radius-sm); background: none; color: var(--ui-text); font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; }
.ui-topbar-links .ui-account-menu a:hover, .ui-account-menu button:hover, .ui-topbar-links .ui-account-menu a:focus-visible, .ui-account-menu button:focus-visible { background: var(--ui-surface-hover); color: var(--ui-graphite); }
.ui-account-menu .fa-solid { width: 16px; text-align: center; color: var(--ui-text-muted); }
.ui-account-menu form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--ui-border); }
.ui-switcher-menu .ui-switcher-new { display: flex; align-items: center; gap: 8px; color: var(--ui-text-muted); }
.ui-switcher-menu .ui-switcher-new .fa-solid { font-size: 12px; }
.ui-avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: var(--ui-brand); color: var(--ui-graphite); font-size: 13px; font-weight: 700; }

.ui-shell { display: grid; grid-template-columns: 208px minmax(0, 1fr); width: 100%; min-height: calc(100vh - 56px); }
.ui-sidebar { padding: var(--ui-space-5) var(--ui-space-3); border-right: 1px solid var(--ui-border); display: grid; align-content: start; gap: var(--ui-space-4); position: sticky; top: 0; max-height: 100vh; }
.ui-sidebar-group { display: grid; gap: 2px; }
/* The daily work above, Подключения and Настройки below the line. */
.ui-sidebar-group + .ui-sidebar-group { padding-top: var(--ui-space-4); border-top: 1px solid var(--ui-border); }
.ui-sidebar a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--ui-radius-sm); color: var(--ui-text-muted); font-size: 14px; font-weight: 500; text-decoration: none; }
.ui-sidebar a:hover { background: var(--ui-surface-hover); color: var(--ui-graphite); text-decoration: none; }
.ui-sidebar a.is-active { background: var(--ui-surface); color: var(--ui-graphite); font-weight: 600; box-shadow: inset 3px 0 0 var(--ui-brand), 0 0 0 1px var(--ui-border); }
.ui-sidebar a .fa-solid { width: 16px; text-align: center; font-size: 13px; color: inherit; opacity: .75; }
.ui-sidebar a.is-active .fa-solid { color: var(--ui-brand-strong); opacity: 1; }
.ui-main.owo-biz { min-width: 0; padding: var(--ui-space-5) var(--ui-space-6) 64px; max-width: none; margin: 0; color: var(--ui-text); }

/* Links in the workplace are graphite and never underlined. */
.ui-main.owo-biz a { color: var(--ui-text); text-decoration: none; }
.ui-main.owo-biz a:hover { color: var(--ui-graphite); text-decoration: none; }
.ui-main.owo-biz .ui-section-head a { color: var(--ui-text-muted); }
.ui-main.owo-biz .ui-section-head a:hover { color: var(--ui-graphite); }

/* Buttons: every filled workspace action, including the page's main action
   ("Новый заказ", the order's next status), is the graphite primary. */
.ui-main.owo-biz .owo-btn { color: var(--ui-on-graphite); }
.ui-main.owo-biz .owo-btn-secondary { color: var(--ui-text); }
.ui-main.owo-biz .owo-btn-danger { color: var(--ui-tone-danger-fg); }
.ui-main.owo-biz .owo-btn-sm { min-height: 30px; }

/* Page header */
.ui-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ui-space-4); margin-bottom: var(--ui-space-5); }
.ui-page-heading { min-width: 0; }
.ui-main.owo-biz .ui-page-back { display: inline-block; font-size: 13px; margin-bottom: 6px; color: var(--ui-text-muted); }
.ui-main.owo-biz .ui-page-back:hover { color: var(--ui-graphite); }
.ui-page-title { margin: 0; font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -.4px; color: var(--ui-graphite); display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.ui-page-subtitle { margin: 6px 0 0; color: var(--ui-text-muted); font-size: 14px; line-height: 1.6; max-width: 720px; }
.ui-page-actions { display: flex; gap: var(--ui-space-2); flex-wrap: wrap; flex-shrink: 0; }
.ui-page-actions form { margin: 0; }
/* A section's tabs under its page header (business/_layout.twig, BusinessNavigation): Товары, Остатки,
   Каналы продаж, Настройки. On a narrow screen they scroll sideways, the open one brought into view. */
.ui-page-header:has(+ .ui-section-tabs) { margin-bottom: var(--ui-space-4); }
.ui-section-tabs { display: flex; gap: 0 4px; margin: 0 0 var(--ui-space-4); border-bottom: 1px solid var(--ui-border); overflow-x: auto; scrollbar-width: none; }
.ui-section-tabs::-webkit-scrollbar { display: none; }
.ui-main.owo-biz .ui-section-tabs a { flex: none; padding: 8px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 14px; color: var(--ui-text-muted); text-decoration: none; white-space: nowrap; }
.ui-main.owo-biz .ui-section-tabs a:hover { color: var(--ui-graphite); }
.ui-main.owo-biz .ui-section-tabs a[aria-current=page] { color: var(--ui-graphite); font-weight: 600; border-bottom-color: var(--ui-brand-strong); }
@media (max-width: 640px) {
    .ui-main.owo-biz .ui-section-tabs { margin-left: calc(-1 * var(--ui-space-4)); margin-right: calc(-1 * var(--ui-space-4)); padding: 0 var(--ui-space-2); }
    .ui-main.owo-biz .ui-section-tabs a { padding: 8px 10px; }
}

/* Merchant composition: reuse the existing controls, cards and status tokens. */
.ui-page-header { flex-wrap: wrap; }
.ui-page-heading { flex: 1 1 320px; overflow-wrap: anywhere; }
.ui-page-actions { flex: 0 1 auto; align-items: center; max-width: 100%; }
.ui-page-actions .owo-btn { white-space: normal; text-align: center; }
.ui-list-filters { padding: var(--ui-space-3); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.owo-product-filters.ui-list-filters input[type=search] { flex: 2 1 280px; }
.owo-product-filters.ui-list-filters select { flex: 0 1 200px; }
.ui-linked-row { cursor: pointer; }
.ui-table .ui-linked-row:hover, .ui-table .ui-linked-row:focus-within { background: var(--ui-surface-hover); }
.ui-table .ui-linked-row .ui-main-cell a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--ui-border-strong); text-underline-offset: 3px; }
.ui-attention-section { border-left: 3px solid var(--ui-tone-warning-fg); }
.ui-order-detail { grid-template-areas: "content summary" "content secondary"; grid-template-rows: auto 1fr; }
.ui-order-detail > .ui-detail-content { grid-area: content; min-width: 0; }
.ui-order-detail > .ui-detail-summary { grid-area: summary; min-width: 0; }
.ui-order-detail > .ui-detail-secondary { grid-area: secondary; min-width: 0; }
.ui-inv-operations { display: grid; gap: var(--ui-space-2); }
.ui-inv-operation { border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); padding: var(--ui-space-3); }
.ui-inv-operation > summary { min-height: var(--ui-control-h); }
.ui-inv-operation > summary .ui-faint { margin-left: var(--ui-space-2); font-weight: 400; }
.ui-inv-operation .ui-inv-action { border: 0; margin-top: var(--ui-space-2); }
.ui-product-variants td { overflow-wrap: anywhere; }
.ui-settings-content { max-width: 1040px; }
.ui-settings-content .ui-section-head { flex-wrap: wrap; }
.ui-editor-optional { padding-top: var(--ui-space-3); border-top: 1px solid var(--ui-border); }
.ui-editor-optional > summary { min-height: var(--ui-control-h); }
.ui-editor-optional > .ui-fields-2 { margin-top: var(--ui-space-3); }
.owo-product-edit { max-width: 840px; }
.ui-billing-choice { padding: var(--ui-space-3); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface-muted); }
.ui-billing-choice > .owo-btn { margin-left: auto; }
.owo-inv-table td[data-label="Склад"] { color: var(--ui-text-muted); font-size: 13px; }
@media (max-width: 1100px) {
    .ui-order-detail { grid-template-areas: "summary" "content" "secondary"; grid-template-rows: auto auto auto; }
    .ui-order-detail .ui-detail-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-3); }
    .ui-order-detail .ui-detail-summary > .ui-section { margin-bottom: 0; }
    .ui-entity-detail > aside { grid-row: 1; }
}
@media (max-width: 640px) {
    .ui-page-heading { flex-basis: auto; width: 100%; }
    .ui-page-actions { width: 100%; }
    .ui-page-actions > .is-primary-action { flex: 1 0 100%; }
    .ui-main.owo-biz .ui-page-actions > .is-primary-action .owo-btn { width: 100%; }
    .ui-main.owo-biz .ui-page-actions > .owo-btn.is-primary-action { width: 100%; }
    .ui-order-detail .ui-detail-summary { grid-template-columns: minmax(0, 1fr); }
    .ui-list-filters > input[type=search] { flex-basis: 100%; }
    .ui-list-filters select { width: 100%; }
    .ui-list-filters .owo-btn { min-height: 44px; }
    .ui-main.owo-biz .ui-detail-summary .owo-btn { min-height: 44px; }
    .ui-product-variants td[data-label="Базовая цена"]::before { display: block; margin-bottom: var(--ui-space-2); }
    .ui-product-variants .owo-price-form { flex-wrap: wrap; }
    .ui-inv-operation > summary .ui-faint { display: block; margin-left: 0; }
}

/* Sections and cards: a white surface, a hairline border, no shadow. */
.ui-section { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); padding: var(--ui-space-4) var(--ui-space-5) var(--ui-space-5); margin: 0 0 var(--ui-space-4); min-width: 0; }
.ui-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ui-space-3); margin: 0 0 var(--ui-space-3); }
.ui-section-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--ui-graphite); }
.ui-section-head a { font-size: 13px; }
.ui-section > :last-child { margin-bottom: 0; }
.ui-section.is-flush { padding: 0; overflow: hidden; }
.ui-section.is-flush > .ui-section-head { padding: var(--ui-space-4) var(--ui-space-5) 0; }
.ui-section.is-flush > .ui-section-toolbar { padding: 0 var(--ui-space-5); }
.ui-section.is-flush > .ui-section-note { margin: 0; padding: var(--ui-space-3) var(--ui-space-5) var(--ui-space-4); border-top: 1px solid var(--ui-border); }
.ui-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ui-space-4); align-items: start; }
.ui-grid-main { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--ui-space-4); align-items: start; }
.ui-muted { color: var(--ui-text-muted); }
.ui-faint { color: var(--ui-text-faint); font-size: 13px; }

/* Metrics: the number first. Colour only where the value has a state. */
.ui-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ui-space-3); margin: 0 0 var(--ui-space-4); }
.ui-main.owo-biz .ui-metric { display: grid; gap: 4px; padding: var(--ui-space-4); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); color: var(--ui-text); text-decoration: none; }
.ui-metric:hover { border-color: var(--ui-border-strong); }
.ui-metric.is-static:hover { border-color: var(--ui-border); }
.ui-metric strong { font-size: 26px; font-weight: 600; letter-spacing: -.6px; line-height: 1.15; color: var(--ui-graphite); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ui-metric span { font-size: 13px; color: var(--ui-text-muted); }
.ui-metric.is-warning strong { color: var(--ui-tone-warning-fg); }
.ui-metric.is-danger strong { color: var(--ui-tone-danger-fg); }

/* Badges: one geometry, one tone per meaning (see business/_ui.twig). */
.ui-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--ui-radius-badge); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; vertical-align: middle; letter-spacing: 0; background: var(--ui-tone-neutral-bg); color: var(--ui-tone-neutral-fg); }
.ui-badge.is-neutral { background: var(--ui-tone-neutral-bg); color: var(--ui-tone-neutral-fg); }
.ui-badge.is-info { background: var(--ui-tone-info-bg); color: var(--ui-tone-info-fg); }
.ui-badge.is-warning { background: var(--ui-tone-warning-bg); color: var(--ui-tone-warning-fg); }
.ui-badge.is-success { background: var(--ui-tone-success-bg); color: var(--ui-tone-success-fg); }
.ui-badge.is-danger { background: var(--ui-tone-danger-bg); color: var(--ui-tone-danger-fg); }
.ui-page-title .ui-badge { font-size: 13px; height: 24px; }

/* Lists (tables) — the object is strongest, metadata muted, status apart. */
.ui-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ui-table th { text-align: left; font-size: 12px; font-weight: 500; color: var(--ui-text-muted); padding: 10px 14px; border-bottom: 1px solid var(--ui-border); white-space: nowrap; background: var(--ui-surface-muted); }
.ui-table td { padding: 12px 14px; border-bottom: 1px solid var(--ui-border); vertical-align: top; }
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table tbody tr { transition: background-color .1s; }
.ui-table tbody tr:hover { background: var(--ui-surface-muted); }
.ui-table tbody tr.is-selected, .ui-table tbody tr[aria-selected=true] { background: var(--ui-brand-soft); box-shadow: inset 3px 0 0 var(--ui-brand); }
.ui-table .is-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-table .is-nowrap { white-space: nowrap; }
.ui-table .is-key { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; overflow-wrap: anywhere; word-break: break-all; }
.ui-main.owo-biz .ui-main-cell a, .ui-main-cell strong { font-weight: 600; color: var(--ui-graphite); }
.ui-sub { display: block; margin-top: 2px; font-size: 13px; color: var(--ui-text-muted); font-weight: 400; }
.ui-table-wrap { overflow-x: auto; max-width: 100%; }

/* Controls of the workplace: toolbar filters, form fields, inline forms. */
.ui-toolbar { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); align-items: center; margin: 0 0 var(--ui-space-3); }
.ui-toolbar input[type=search], .ui-toolbar input[type=text], .ui-toolbar select { height: var(--ui-control-h); padding: 0 12px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-sm); font: inherit; font-weight: 400; font-size: 14px; background: var(--ui-surface); color: var(--ui-text); min-width: 0; max-width: 100%; }
.ui-toolbar input[type=search] { flex: 1 1 280px; }
.ui-toolbar label { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
.ui-toolbar .owo-btn { min-height: var(--ui-control-h); }
.ui-toolbar-count { margin-left: auto; font-size: 13px; color: var(--ui-text-muted); }
/* Baseline for any workplace control without its own rule (inline price
   form, add-variant row); zero specificity, so component rules win. */
:where(.owo-biz) :where(input[type=text], input[type=search], input[type=url], input[type=password], input[type=email], input[type=number], input:not([type]), select, textarea) { min-height: 32px; padding: 0 10px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-text); font: inherit; font-size: 14px; font-weight: 400; max-width: 100%; box-sizing: border-box; }
:where(.owo-biz) textarea { padding: 7px 10px; }
.owo-price-form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.ui-main.owo-biz .owo-price-form .owo-btn { min-height: 32px; padding: 4px 12px; font-size: 13px; }
.owo-biz :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea) { transition: border-color .12s, box-shadow .12s; }
.owo-biz :is(input:not([type=checkbox]):not([type=radio]), select, textarea):hover { border-color: var(--ui-border-hover); }
.owo-biz :is(input:not([type=checkbox]):not([type=radio]), select, textarea):focus { outline: none; border-color: var(--ui-brand-strong); box-shadow: var(--ui-focus-ring); }
.owo-biz :is(input, select, textarea):disabled { background: var(--ui-surface-hover); border-color: var(--ui-border); color: var(--ui-text-faint); }

/* Empty state: neutral words, one action. */
.ui-empty { padding: 40px var(--ui-space-5); text-align: center; display: grid; justify-items: center; gap: var(--ui-space-2); }
.ui-empty-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--ui-graphite); }
.ui-empty-text { margin: 0 0 var(--ui-space-2); color: var(--ui-text-muted); font-size: 14px; line-height: 1.6; max-width: 460px; }

/* Detail facts */
.ui-facts { display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr); gap: 10px 16px; margin: 0; font-size: 14px; }
.ui-facts dt { color: var(--ui-text-muted); }
.ui-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* Forms */
.ui-form { display: grid; gap: var(--ui-space-4); max-width: 880px; }

/* Modal window: a native <dialog>; the backdrop click closes it (app.js). */
.ui-modal { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; overscroll-behavior: contain; padding: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-text); box-shadow: var(--ui-shadow-pop); }
.ui-modal::backdrop { background: rgba(17, 17, 17, .45); }
.ui-modal-body { padding: var(--ui-space-5); }
.ui-modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); margin-bottom: var(--ui-space-4); }
.ui-modal-title { margin: 0; font-size: 18px; font-weight: 600; }
.ui-modal-close { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-text-muted); cursor: pointer; font-size: 16px; }
.ui-modal-close:hover { background: var(--ui-surface-hover); color: var(--ui-graphite); }
.ui-modal .ui-form { max-width: none; }
.ui-modal .ui-form-actions { justify-content: flex-end; }
.ui-modal.is-wide { width: min(920px, calc(100vw - 32px)); }
.ui-modal-subtitle { margin: 4px 0 0; color: var(--ui-text-muted); font-size: 13px; line-height: 1.5; }
.ui-modal .ui-modal-head { align-items: flex-start; }
.ui-modal .owo-ord-form { max-width: none; }
.ui-modal .owo-ord-form > .owo-btn { justify-self: end; }
.ui-field { display: grid; align-content: start; gap: 5px; font-size: 14px; font-weight: 400; min-width: 0; }
.ui-field > span { font-weight: 500; }
.ui-field input, .ui-field select, .ui-field textarea { min-height: var(--ui-control-h); padding: 7px 11px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-sm); font: inherit; font-weight: 400; font-size: 14px; background: var(--ui-surface); color: var(--ui-text); width: 100%; box-sizing: border-box; }
.ui-field small { color: var(--ui-text-muted); font-size: 12px; line-height: 1.5; }
.ui-field-error { color: var(--ui-tone-danger-fg); font-size: 13px; }
.ui-field:has(.ui-field-error) :is(input, select, textarea) { border-color: var(--ui-tone-danger-fg); }
.ui-fields-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ui-space-3); }
.ui-form-actions { display: flex; gap: var(--ui-space-2); align-items: center; flex-wrap: wrap; }

/* Alerts (flash messages, inline notices) */
.ui-main .owo-biz-flash { border-radius: var(--ui-radius-sm); padding: 10px 14px; font-size: 14px; margin: 0 0 var(--ui-space-4); }
.ui-callout { padding: 12px 16px; border-radius: var(--ui-radius-sm); background: var(--ui-tone-info-bg); color: var(--ui-tone-info-fg); font-size: 14px; line-height: 1.6; margin: 0 0 var(--ui-space-4); }
.ui-callout.is-warning { background: var(--ui-tone-warning-bg); color: var(--ui-tone-warning-fg); }
.ui-callout.is-danger { background: var(--ui-tone-danger-bg); color: var(--ui-tone-danger-fg); }
.ui-main.owo-biz .ui-callout a { color: inherit; text-decoration-color: currentColor; }

/* Row lists (overview cards, attention) */
.ui-rows { list-style: none; margin: 0; padding: 0; }
.ui-rows li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--ui-space-3); padding: 10px 0; border-bottom: 1px solid var(--ui-border); font-size: 14px; }
.ui-rows li:last-child { border-bottom: 0; padding-bottom: 0; }
.ui-rows li > :first-child { min-width: 0; flex: 1 1 110px; }
.ui-rows-end { display: flex; align-items: center; gap: var(--ui-space-2); white-space: nowrap; }
.ui-rows form input[type=text] { min-width: 0; max-width: 100%; }

/* Steps (a new shop): the next step is marked lime, done steps are success. */
.ui-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 10px; }
.ui-steps li { counter-increment: step; display: flex; gap: 10px; align-items: center; font-size: 14px; }
.ui-steps li::before { content: counter(step); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--ui-surface); color: var(--ui-text-muted); box-shadow: inset 0 0 0 1px var(--ui-border-strong); flex-shrink: 0; }
.ui-steps li:not(.is-done)::before { background: var(--ui-brand); color: var(--ui-graphite); box-shadow: none; }
.ui-steps li:not(.is-done) ~ li:not(.is-done)::before { background: var(--ui-surface); color: var(--ui-text-muted); box-shadow: inset 0 0 0 1px var(--ui-border-strong); }
.ui-steps li.is-done { color: var(--ui-text-muted); text-decoration: line-through; }
.ui-steps li.is-done::before { content: "✓"; background: var(--ui-tone-success-bg); color: var(--ui-tone-success-fg); box-shadow: none; }

/* Pager: the current page is the selected item. */
.ui-pager { display: flex; gap: 4px; flex-wrap: wrap; margin: var(--ui-space-3) 0 0; }
.ui-pager a, .ui-pager span { min-width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--ui-radius-sm); font-size: 14px; }
.ui-main.owo-biz .ui-pager a:hover { background: var(--ui-surface-hover); text-decoration: none; }
.ui-pager span { background: var(--ui-brand-soft); color: var(--ui-graphite); font-weight: 600; box-shadow: inset 0 0 0 1px var(--ui-brand-strong); }

/* Progressive disclosure of technical facts */
.ui-disclosure summary { cursor: pointer; color: var(--ui-text-muted); font-size: 13px; }
.ui-disclosure summary:hover { color: var(--ui-graphite); }
.ui-disclosure[open] summary { margin-bottom: var(--ui-space-2); }

@media (max-width: 1100px) {
    .ui-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-grid-main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
    .ui-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
    .ui-sidebar { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--ui-border); background: var(--ui-surface); padding: 8px var(--ui-space-4); display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
    .ui-topbar { padding-left: var(--ui-space-4); }
    .ui-sidebar::-webkit-scrollbar { display: none; }
    .ui-sidebar-group { display: flex; gap: 2px; }
    /* The line between the daily work and the service sections stands upright on the strip. */
    .ui-sidebar-group + .ui-sidebar-group { padding: 0 0 0 6px; margin-left: 2px; border-top: 0; border-left: 1px solid var(--ui-border); }
    .ui-sidebar a { white-space: nowrap; gap: 6px; }
    /* On the horizontal strip the active section is underlined in lime. */
    .ui-sidebar a.is-active { background: var(--ui-surface-hover); box-shadow: inset 0 -2px 0 var(--ui-brand); }
    .ui-main.owo-biz { padding: var(--ui-space-4) var(--ui-space-4) 48px; }
    .ui-grid-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .ui-topbar { padding: 0 var(--ui-space-4); gap: var(--ui-space-3); }
    .ui-topbar-links > a:not(.ui-topbar-user), .ui-topbar-user-name { display: none; }
    .ui-topbar-links .ui-topbar-user { padding: 3px; }
    .ui-switcher summary { max-width: 64vw; }
    .ui-page-header { flex-direction: column; gap: var(--ui-space-3); }
    .ui-page-title { font-size: 21px; }
    .ui-section { padding: var(--ui-space-3) var(--ui-space-4) var(--ui-space-4); }
    .ui-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .ui-facts dd { margin-bottom: 10px; }
    .ui-fields-2 { grid-template-columns: minmax(0, 1fr); }
    .ui-toolbar-count { margin-left: 0; width: 100%; }
    /* A list becomes cards: each row a block, each cell labelled. */
    .ui-table.is-stacked thead { display: none; }
    .ui-table.is-stacked, .ui-table.is-stacked tbody, .ui-table.is-stacked tr, .ui-table.is-stacked td { display: block; }
    .ui-table.is-stacked tr { padding: 12px 16px; border-bottom: 1px solid var(--ui-border); }
    .ui-table.is-stacked tbody tr:last-child { border-bottom: 0; }
    .ui-table.is-stacked td { border: 0; padding: 2px 0; text-align: left; }
    .ui-table.is-stacked td[data-label]::before { content: attr(data-label) " · "; color: var(--ui-text-faint); font-size: 12px; }
    .ui-table.is-stacked td.is-num { text-align: left; font-weight: 600; }
    .ui-table.is-stacked td.is-blank { display: none; }
    /* Order lines on a phone: one card per line, every field visible. */
    .owo-ord-lines thead { display: none; }
    .owo-ord-lines, .owo-ord-lines tbody, .owo-ord-lines tr, .owo-ord-lines td { display: block; width: 100%; }
    .owo-ord-lines tr { padding: 10px 12px; border-bottom: 1px solid var(--ui-border); }
    .ui-main .owo-ord-lines td { border: 0; padding: 4px 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 8px; }
    .owo-ord-lines td:first-child { grid-template-columns: minmax(0, 1fr); }
    .owo-ord-lines td[data-label]::before { content: attr(data-label); color: var(--ui-text-muted); font-size: 13px; }
}

/* One stock level: the three ways its physical stock changes, side by side. */
.ui-inv-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-space-4); }
.ui-inv-action { display: grid; gap: var(--ui-space-2); align-content: start; margin: 0; padding: var(--ui-space-3) var(--ui-space-4) var(--ui-space-4); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface-muted); }
.ui-inv-action-title { margin: 0; font-weight: 600; color: var(--ui-graphite); }
.ui-inv-action-title .ui-faint { display: block; font-weight: 400; }
.ui-main.owo-biz .ui-inv-action .owo-btn { width: auto; justify-self: start; min-height: var(--ui-control-h); }
.ui-inv-delta { font-weight: 600; }
.ui-inv-delta.is-in { color: var(--ui-tone-success-fg); }
@media (max-width: 900px) { .ui-inv-actions { grid-template-columns: minmax(0, 1fr); } }

/* Cards of a few distinct things (channels, integrations) */
.ui-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--ui-space-3); margin: 0 0 var(--ui-space-5); }
.ui-main.owo-biz .ui-card { display: grid; gap: 6px; padding: var(--ui-space-4); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); color: var(--ui-text); text-decoration: none; }
.ui-card:hover { border-color: var(--ui-border-strong); }
.ui-card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--ui-space-2); font-size: 15px; color: var(--ui-graphite); }
.ui-card-stats { display: flex; flex-wrap: wrap; gap: var(--ui-space-3); align-items: center; margin-top: 6px; font-size: 13px; color: var(--ui-text-muted); }
.ui-card-stats strong { color: var(--ui-text); }
.ui-grid-main aside .ui-facts { grid-template-columns: 88px minmax(0, 1fr); }

/* Older workplace markup (channel / offer / reconciliation / integration
   pages) on the same tokens, so every screen of the shell reads as one
   product. New markup uses the ui-* primitives above. */
.ui-main .owo-biz-panel { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); padding: var(--ui-space-4) var(--ui-space-5) var(--ui-space-5); margin: 0 0 var(--ui-space-4); }
.ui-main .owo-biz-h2, .ui-main .owo-biz-h3 { margin: 0 0 var(--ui-space-3); font-size: 15px; font-weight: 600; color: var(--ui-graphite); }
.ui-main * + .owo-biz-h3 { margin-top: var(--ui-space-5); }
.ui-main .owo-biz-muted { color: var(--ui-text-muted); }
.ui-main .owo-biz-right { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Bootstrap 3 makes every label bold; in the workplace a label is text (captions set their own weight). */
:where(.owo-biz) label { font-weight: 400; }
.ui-main .owo-biz-table { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: 14px; margin: 0 0 var(--ui-space-4); }
.ui-main .owo-biz-table th { background: var(--ui-surface-muted); color: var(--ui-text-muted); font-size: 12px; font-weight: 500; padding: 10px 14px; border-bottom: 1px solid var(--ui-border); }
.ui-main .owo-biz-table td { padding: 12px 14px; border-bottom: 1px solid var(--ui-border); }
.ui-main .owo-biz-table tbody tr:last-child td { border-bottom: 0; }
.ui-main .owo-biz-table tbody tr:hover { background: var(--ui-surface-muted); }
.ui-main .owo-biz-dl { display: grid; grid-template-columns: minmax(110px, 180px) minmax(0, 1fr); gap: 10px 16px; font-size: 14px; margin: 0 0 var(--ui-space-4); }
.ui-main .owo-biz-dl dt { color: var(--ui-text-muted); }
/* A bare fact list or a column of an older page is a card, like a ui-section. */
.ui-main.owo-biz > .owo-biz-dl, .ui-main .owo-biz-columns > :not(.owo-biz-panel) { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); padding: var(--ui-space-4) var(--ui-space-5); margin: 0 0 var(--ui-space-4); min-width: 0; }
.ui-main .owo-biz-columns > :not(.owo-biz-panel) { margin: 0; }
.ui-main .owo-biz-columns { display: grid; gap: var(--ui-space-4); margin: 0 0 var(--ui-space-4); }
@media (min-width: 960px) { .ui-main .owo-biz-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ui-main .owo-biz-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--ui-space-3); margin: 0 0 var(--ui-space-4); }
.ui-main .owo-biz-stat { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); padding: var(--ui-space-4); gap: 4px; color: var(--ui-text); }
.ui-main .owo-biz-stat strong { font-size: 24px; font-weight: 600; color: var(--ui-graphite); }
.ui-main .owo-biz-stat span { color: var(--ui-text-muted); font-size: 13px; }
.ui-main .owo-biz-toolbar { background: transparent; border: 0; padding: 0; margin: 0 0 var(--ui-space-3); }
.ui-main .owo-biz-toolbar input, .ui-main .owo-biz-toolbar select { height: var(--ui-control-h); border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-sm); padding: 0 12px; background: var(--ui-surface); }
.ui-main .owo-biz-form { gap: var(--ui-space-3); }
.ui-main .owo-biz-form input:not([type=checkbox]):not([type=radio]), .ui-main .owo-biz-form select, .ui-main .owo-biz-form textarea { border-color: var(--ui-border-strong); border-radius: var(--ui-radius-sm); }
/* Filter chips: the chosen one is selected (lime tint). */
.ui-main .owo-biz-filters { display: flex; flex-wrap: wrap; gap: 4px; border: 0; margin: 0 0 var(--ui-space-3); padding: 0; }
.ui-main .owo-biz-filters a { padding: 6px 12px; border: 1px solid var(--ui-border); border-radius: 999px; color: var(--ui-text-muted); font-size: 13px; background: var(--ui-surface); }
.ui-main .owo-biz-filters a:hover { border-color: var(--ui-border-strong); color: var(--ui-graphite); text-decoration: none; }
.ui-main .owo-biz-filters a.is-active { background: var(--ui-brand-soft); border-color: var(--ui-brand-strong); color: var(--ui-graphite); font-weight: 600; }
.ui-main .owo-biz-badge, .ui-main .owo-biz-status, .ui-main .owo-offer-status { margin-left: 4px; }
.ui-main .owo-ord-fieldset { border-radius: var(--ui-radius); padding: var(--ui-space-4) var(--ui-space-5) var(--ui-space-5); }
.ui-main .owo-field-error { color: var(--ui-tone-danger-fg); font-size: 13px; }
.ui-main .owo-inv-safety select { height: 32px; padding: 0 8px; border: 1px solid var(--ui-border-strong); border-radius: 6px; font: inherit; font-weight: 400; background: var(--ui-surface); color: var(--ui-text); max-width: 100%; }
@media (max-width: 640px) {
    .ui-main .owo-biz-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .ui-main .owo-biz-dl dd { margin-bottom: 10px; }
    .ui-main .owo-biz-panel { padding: var(--ui-space-3) var(--ui-space-4) var(--ui-space-4); }
    }
.ui-main.owo-biz .ui-form .owo-btn, .ui-main.owo-biz .ui-toolbar .owo-btn, .ui-main.owo-biz .ui-page-actions .owo-btn { width: auto; justify-self: start; }
.ui-main.owo-biz .ui-empty .owo-btn { width: auto; justify-self: center; }

/* A workplace page outside a shop (the list of the account's shops). */
.ui-main.owo-biz.is-standalone { padding-top: var(--ui-space-6); }
/* The list: a card per shop (the whole card opens it), then "one more shop". */
.owo-shops { max-width: 1240px; margin: 0 auto; }
.owo-shops-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ui-space-4) var(--ui-space-6); flex-wrap: wrap; margin: 0 0 var(--ui-space-6); }
.owo-shops-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--ui-text-muted); }
.owo-shops-eyebrow::before { content: ""; width: 20px; height: 3px; border-radius: 2px; background: var(--ui-brand); }
.owo-shops-title { margin: 0 0 8px; font-size: clamp(28px, 3vw, 36px); line-height: 1.15; letter-spacing: -1px; font-weight: 600; color: var(--ui-graphite); }
.owo-shops-lead { margin: 0; max-width: 560px; font-size: 16px; line-height: 1.55; color: var(--ui-text-muted); }
.ui-main.owo-biz .owo-shops-head .owo-btn { gap: 8px; min-height: 42px; }
.owo-shops-grid { list-style: none; margin: 0 0 var(--ui-space-6); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--ui-space-4); }
.owo-shop-card { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 196px; padding: 22px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 16px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.owo-shop-card:not(.is-suspended):hover { border-color: var(--ui-border-hover); box-shadow: var(--ui-shadow-pop); transform: translateY(-2px); }
.owo-shop-card:focus-within { box-shadow: var(--ui-focus-ring); border-color: var(--ui-brand-strong); }
.owo-shop-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.owo-shop-mark { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: var(--ui-graphite); color: var(--ui-brand); font-size: 22px; font-weight: 700; }
.owo-shop-card.is-suspended .owo-shop-mark { background: var(--ui-surface-hover); color: var(--ui-text-disabled); }
.owo-shop-role { flex: none; max-width: 70%; padding: 4px 10px; border-radius: 999px; background: var(--ui-tone-neutral-bg); color: var(--ui-tone-neutral-fg); font-size: 13px; font-weight: 600; text-align: center; }
.owo-shop-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.owo-shop-name { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--ui-graphite); overflow-wrap: anywhere; }
.ui-main.owo-biz .owo-shop-name a { color: var(--ui-graphite); outline: none; }
.owo-shop-name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.owo-shop-meta { display: flex; align-items: center; gap: 6px 8px; margin: 0; font-size: 14px; color: var(--ui-text-muted); }
.owo-shop-card.is-suspended .owo-shop-meta { flex-direction: column; align-items: flex-start; }
.owo-shop-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-border-hover); }
.owo-shop-dot.is-on { background: var(--ui-brand-strong); box-shadow: 0 0 0 3px var(--ui-brand-soft); }
.owo-shop-slug { margin: -4px 0 0 16px; font-size: 13px; color: var(--ui-text-faint); overflow-wrap: anywhere; }
.owo-shop-open { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--ui-border); font-size: 15px; font-weight: 600; color: var(--ui-graphite); }
.owo-shop-open i { font-size: 13px; transition: transform .15s; }
.owo-shop-card:hover .owo-shop-open i { transform: translateX(3px); color: var(--ui-brand-ink); }
/* One more shop: what it is on the left, the form on the right. */
.owo-shops-new { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--ui-space-6); padding: 28px; background: var(--ui-surface); border: 1px dashed var(--ui-border-strong); border-radius: 16px; scroll-margin-top: 24px; }
.owo-shops-new:target, .owo-shops-new:focus-within { border-style: solid; border-color: var(--ui-brand-strong); }
.owo-shops-new-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 12px; background: var(--ui-brand-soft); color: var(--ui-brand-ink); font-size: 18px; }
.owo-shops-new-intro h2 { margin: 0 0 8px; font-size: 20px; font-weight: 600; color: var(--ui-graphite); }
.owo-shops-new-intro p { margin: 0; max-width: 420px; font-size: 15px; line-height: 1.6; color: var(--ui-text-muted); }
.owo-shops-new-fields { display: grid; gap: var(--ui-space-3); align-content: start; }
.owo-shops-new-fields .ui-form-actions { margin: 0; }
.owo-shops-new-fields input[type=text] { min-height: 44px; font-size: 15px; }
@media (max-width: 760px) {
    .owo-shops-new { grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-4); padding: 20px; }
    .owo-shop-card { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .owo-shop-card, .owo-shop-open i { transition: none; } .owo-shop-card:not(.is-suspended):hover { transform: none; } }

/* ── Storefront (/s/{store}) ─────────────────────────────────────────────
   A shop's public page for its buyers: the shop's name, products, cart,
   checkout. Phone first (the link comes from Instagram). Same tokens as
   the workplace, but no admin chrome: white cards on the canvas, graphite
   actions, lime only as the cart's marker and focus. */
body:has(.sf-main) { background: var(--ui-canvas); font-size: 16px; }
.sf-header { position: sticky; top: 0; z-index: 10; background: var(--ui-surface); border-bottom: 1px solid var(--ui-border); }
.sf-header-inner, .sf-main, .sf-footer { box-sizing: border-box; max-width: 1080px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.sf-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; }
.sf-header a { text-decoration: none; color: var(--ui-graphite); }
.sf-header a:hover, .sf-header a:focus { text-decoration: none; color: var(--ui-graphite); }
.sf-shop { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 700; font-size: 17px; }
.sf-shop-mark { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--ui-graphite); color: var(--ui-on-graphite); font-size: 15px; }
.sf-shop-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-cart-link { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--ui-border-strong); border-radius: 999px; font-size: 15px; font-weight: 600; }
.sf-cart-link.has-items { border-color: var(--ui-graphite); }
.sf-cart-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: inline-grid; place-items: center; background: var(--ui-brand); color: var(--ui-graphite); font-size: 13px; font-weight: 700; }
.sf-main { padding-top: 20px; padding-bottom: 96px; color: var(--ui-text); }
.sf-main * { box-sizing: border-box; }
.sf-main a { color: var(--ui-graphite); }
.sf-main .owo-btn { width: auto; min-height: 46px; font-size: 16px; color: var(--ui-on-graphite); text-decoration: none; }
.sf-main .owo-btn-secondary { color: var(--ui-graphite); }
.sf-main .owo-btn:disabled { color: var(--ui-text-disabled); }
.sf-title { margin: 0 0 8px; font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -.5px; color: var(--ui-graphite); overflow-wrap: anywhere; }
.sf-subtitle { margin: 0 0 4px; font-size: 19px; font-weight: 700; color: var(--ui-graphite); }
.sf-lead { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ui-text-muted); max-width: 640px; }
.sf-intro { margin-bottom: 18px; }
.sf-main .sf-back { display: inline-block; margin-bottom: 14px; font-size: 15px; color: var(--ui-text-muted); text-decoration: none; }
.sf-notice { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--ui-radius-sm); background: var(--ui-tone-success-bg); color: var(--ui-tone-success-fg); font-size: 15px; }
.sf-alert { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--ui-radius-sm); background: var(--ui-tone-danger-bg); color: var(--ui-tone-danger-fg); font-size: 15px; line-height: 1.5; }
/* Categories: one horizontally scrolling row of chips on a phone. */
.sf-chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 18px; padding: 2px 16px 6px; scrollbar-width: none; }
.sf-chips::-webkit-scrollbar { display: none; }
.sf-main .sf-chips a { flex: none; padding: 9px 16px; border: 1px solid var(--ui-border-strong); border-radius: 999px; background: var(--ui-surface); font-size: 15px; text-decoration: none; white-space: nowrap; }
.sf-main .sf-chips a.is-active { background: var(--ui-graphite); border-color: var(--ui-graphite); color: var(--ui-on-graphite); }
/* Product cards: two columns on a phone. */
.sf-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sf-card { display: flex; flex-direction: column; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 14px; overflow: hidden; }
.sf-card-media, .sf-product-media { display: grid; place-items: center; aspect-ratio: 1 / 1; background: var(--ui-surface-hover); color: var(--ui-text-disabled); font-size: 40px; font-weight: 700; text-decoration: none; overflow: hidden; }
.sf-main .sf-card-media { color: var(--ui-text-disabled); text-decoration: none; }
.sf-card-media img, .sf-product-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-card-body { display: flex; flex-direction: column; gap: 6px; padding: 12px; flex: 1; }
.sf-main .sf-card-name { font-size: 15px; font-weight: 600; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; }
.sf-card-price { margin: 0; font-size: 17px; font-weight: 700; color: var(--ui-graphite); }
.sf-card-state { margin: auto 0 0; font-size: 14px; color: var(--ui-text-muted); }
.sf-card form { margin: auto 0 0; }
.sf-main .sf-card-action { width: 100%; margin-top: auto; min-height: 42px; padding: 8px 10px; font-size: 15px; }
.sf-card.is-soldout .sf-card-media { opacity: .55; }
.sf-main .sf-floating-cart { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 10; display: flex; justify-content: center; align-items: center; min-height: 52px; padding: 0 20px; border-radius: 14px; background: var(--ui-graphite); color: var(--ui-on-graphite); font-size: 16px; font-weight: 600; text-decoration: none; box-shadow: var(--ui-shadow-pop); }
.sf-main .sf-floating-cart:hover, .sf-main .sf-floating-cart:focus { text-decoration: none; background: var(--ui-graphite-soft); color: var(--ui-on-graphite); }
/* Product page */
.sf-product { display: grid; gap: 20px; }
.sf-product-media { border-radius: 16px; font-size: 72px; border: 1px solid var(--ui-border); }
.sf-product-price { margin: 0 0 12px; font-size: 24px; font-weight: 700; color: var(--ui-graphite); }
.sf-product-description { margin: 0 0 16px; font-size: 16px; line-height: 1.65; white-space: pre-line; color: var(--ui-text); }
.sf-buy { display: grid; gap: 16px; }
.sf-variants { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; min-width: 0; }
.sf-variants legend { margin: 0 0 8px; font-size: 15px; font-weight: 600; border: 0; }
.sf-variant { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; border: 1px solid var(--ui-border-strong); border-radius: 12px; background: var(--ui-surface); font-size: 16px; font-weight: 400; cursor: pointer; }
.sf-variant span { flex: 1; }
.sf-variant-image { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; border: 1px solid var(--ui-border); }
.sf-variant:has(input:checked) { border-color: var(--ui-graphite); box-shadow: inset 0 0 0 1px var(--ui-graphite); }
.sf-variant.is-soldout { color: var(--ui-text-muted); cursor: not-allowed; }
.sf-variant input { accent-color: var(--ui-graphite); width: 18px; height: 18px; margin: 0; }
.sf-qty { display: grid; gap: 6px; margin: 0; font-size: 15px; font-weight: 600; }
.sf-qty input { width: 120px; min-height: 46px; padding: 0 12px; border: 1px solid var(--ui-border-strong); border-radius: 10px; font: inherit; font-weight: 400; font-size: 16px; }
.sf-buy-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sf-buy-actions .owo-btn { flex: 1 1 160px; }
.sf-soldout { padding: 14px 16px; border-radius: 12px; background: var(--ui-tone-neutral-bg); color: var(--ui-tone-neutral-fg); font-size: 16px; }
/* Cart and checkout */
.sf-lines { list-style: none; margin: 16px 0 0; padding: 0; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 14px; }
.sf-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--ui-border); }
.sf-line:last-child { border-bottom: 0; }
.sf-line-info { grid-column: 1 / -1; display: grid; gap: 2px; min-width: 0; }
.sf-main .sf-line-info a { font-weight: 600; font-size: 16px; text-decoration: none; overflow-wrap: anywhere; }
.sf-line-price { font-size: 14px; color: var(--ui-text-muted); }
.sf-line-problem { font-size: 14px; color: var(--ui-tone-danger-fg); }
.sf-line-total { justify-self: end; font-size: 16px; color: var(--ui-graphite); white-space: nowrap; }
.sf-stepper { display: inline-flex; align-items: center; border: 1px solid var(--ui-border-strong); border-radius: 999px; overflow: hidden; width: fit-content; }
.sf-stepper form { margin: 0; }
.sf-stepper button { width: 44px; height: 40px; border: 0; background: var(--ui-surface); font-size: 20px; line-height: 1; color: var(--ui-graphite); cursor: pointer; }
.sf-stepper button:hover { background: var(--ui-surface-hover); }
.sf-stepper button:disabled { color: var(--ui-text-disabled); cursor: not-allowed; background: var(--ui-surface); }
.sf-stepper span { min-width: 32px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.sf-line-remove { grid-column: 1 / -1; margin: 0; }
.sf-line-remove button { padding: 0; border: 0; background: none; font-size: 14px; color: var(--ui-text-muted); text-decoration: underline; cursor: pointer; }
.sf-total { display: flex; justify-content: space-between; align-items: baseline; margin: 16px 0 24px; padding: 0 4px; font-size: 18px; }
.sf-total strong { font-size: 24px; color: var(--ui-graphite); }
.sf-checkout { display: grid; gap: 14px; padding: 20px 16px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 14px; }
.sf-field { display: grid; gap: 6px; margin: 0; font-size: 15px; font-weight: 600; }
.sf-field small { font-weight: 400; color: var(--ui-text-muted); font-size: 14px; }
.sf-field input, .sf-field textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--ui-border-strong); border-radius: 10px; font: inherit; font-size: 16px; font-weight: 400; background: var(--ui-surface); color: var(--ui-text); }
.sf-field input:focus, .sf-field textarea:focus, .sf-qty input:focus { outline: none; border-color: var(--ui-brand-strong); box-shadow: var(--ui-focus-ring); }
.sf-field-error { font-size: 14px; font-weight: 400; color: var(--ui-tone-danger-fg); }
.sf-receive { border: 0; padding: 0; min-inline-size: 0; }
.sf-receive legend { padding: 0; margin-bottom: 6px; font-size: 15px; font-weight: 600; }
.sf-choice { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-choice label { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border: 1px solid var(--ui-border-strong); border-radius: 10px; font-weight: 500; cursor: pointer; background: var(--ui-surface); }
.sf-choice label:has(input:checked) { border-color: var(--ui-brand-strong); box-shadow: var(--ui-focus-ring); }
.sf-delivery { display: grid; gap: 12px; margin-top: 8px; }
/* Only a method that needs an address shows the address (the fields stay in the form; without :has() they show). */
.sf-receive:has(input[data-address="0"]:checked) .sf-delivery { display: none; }
.sf-options { display: grid; gap: 8px; min-width: 0; }
.sf-option { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; border: 1px solid var(--ui-border-strong); border-radius: 10px; font-weight: 400; cursor: pointer; background: var(--ui-surface); }
.sf-option:has(input:checked) { border-color: var(--ui-brand-strong); box-shadow: var(--ui-focus-ring); }
.sf-option input { flex: none; width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--ui-graphite); }
.sf-option-text { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.sf-option-text strong { font-weight: 600; }
.sf-option-text small { font-size: 13px; color: var(--ui-text-muted); }
.sf-option-price { flex: 0 1 auto; max-width: 50%; font-weight: 600; text-align: right; }
.sf-summary { display: grid; gap: 6px; margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--ui-border); font-size: 15px; }
.sf-summary div { display: flex; justify-content: space-between; gap: 12px; }
.sf-summary dt { color: var(--ui-text-muted); font-weight: 400; }
.sf-summary dd { margin: 0; text-align: right; }
.sf-summary .is-total { font-size: 18px; font-weight: 700; }
.sf-summary .is-total dt { color: var(--ui-graphite); font-weight: 700; }
.sf-field:has(.sf-field-error) input { border-color: var(--ui-tone-danger-fg); }
.sf-main .sf-submit { width: 100%; min-height: 52px; font-size: 17px; }
.sf-hint { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ui-text-muted); }
.sf-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sf-empty { padding: 48px 16px; text-align: center; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 14px; font-size: 16px; color: var(--ui-text-muted); }
.sf-empty-title { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--ui-graphite); }
.sf-empty p { margin: 0; }
.sf-thanks { display: grid; justify-items: center; gap: 14px; padding: 40px 16px; text-align: center; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 16px; }
.sf-thanks .sf-lead { margin: 0 auto; }
.sf-thanks-mark { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--ui-tone-success-bg); color: var(--ui-tone-success-fg); font-size: 24px; }
.sf-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding-top: 20px; padding-bottom: 32px; border-top: 1px solid var(--ui-border); font-size: 14px; color: var(--ui-text-muted); }
.sf-footer a { color: var(--ui-text-muted); }
.sf-footer-shop { display: grid; gap: 2px; min-width: 0; }
.sf-footer-shop strong { color: var(--ui-text); }
/* The shop's public contacts (phone, address = pickup point, hours). */
.sf-contacts { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; color: var(--ui-text); }
.sf-contacts li { display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.sf-contacts i { flex: none; width: 14px; color: var(--ui-text-muted); }
.sf-main .sf-contacts a { font-weight: 600; text-decoration: none; }
.sf-footer .sf-contacts { margin-top: 4px; font-size: 14px; color: var(--ui-text-muted); }
.sf-thanks .sf-contacts { justify-content: center; }
/* Product photos: the big one and thumbnails under it. */
.sf-product-gallery { display: grid; gap: 10px; min-width: 0; }
.sf-gallery { list-style: none; margin: 0; padding: 0 0 4px; display: flex; gap: 8px; overflow-x: auto; }
.sf-gallery li { flex: none; }
.sf-main .sf-gallery-thumb { display: block; width: 64px; height: 64px; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: var(--ui-surface-hover); }
.sf-main .sf-gallery-thumb.is-active { border-color: var(--ui-graphite); }
.sf-gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A cart line's picture beside its name. */
.sf-line-info:has(.sf-line-thumb) { grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; }
.sf-line-info:has(.sf-line-thumb) > :not(.sf-line-thumb) { grid-column: 2; }
.sf-line-thumb { grid-row: 1 / span 3; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: var(--ui-surface-hover); color: var(--ui-text-disabled); font-weight: 700; }
.sf-line-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 720px) {
    .sf-main { padding-top: 32px; }
    .sf-title { font-size: 32px; }
    .sf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .sf-product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
    .sf-line { grid-template-columns: minmax(0, 1fr) auto auto; }
    .sf-line-info { grid-column: auto; }
    .sf-line-remove { grid-column: 1 / -1; }
    .sf-checkout { padding: 24px; max-width: 640px; }
    .sf-main .sf-floating-cart { left: auto; right: 24px; bottom: 24px; }
}
@media (min-width: 1000px) {
    .sf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Order composer (/business/{b}/orders/new, the orders' modal) ─────────
   Like a till: products on the left (search, tap to add), the cart, the
   buyer and the total on the right; one column on a phone. Without
   JavaScript the cart is the plain line table. */
.owo-composer-grid { display: grid; gap: var(--ui-space-4); align-items: start; }
@media (min-width: 1000px) { .owo-composer-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.owo-composer-order { display: grid; gap: var(--ui-space-3); min-width: 0; }
.owo-composer-pick { display: grid; gap: var(--ui-space-3); align-content: start; padding: var(--ui-space-4); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); min-width: 0; }
@media (min-width: 1000px) { .owo-composer-pick { position: sticky; top: var(--ui-space-4); } }
.owo-composer-search { position: relative; display: block; margin: 0; }
.owo-composer-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ui-text-muted); font-size: 14px; pointer-events: none; }
.ui-main .owo-composer-search input, .owo-composer-search input { width: 100%; box-sizing: border-box; height: 44px; padding: 0 12px 0 36px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-sm); font: inherit; font-size: 15px; background: var(--ui-surface); color: var(--ui-text); }
.owo-composer-search input:focus { outline: none; border-color: var(--ui-brand-strong); box-shadow: var(--ui-focus-ring); }
.owo-composer-products { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 420px; overflow-y: auto; overscroll-behavior: contain; }
.owo-composer-products button { display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 8px 8px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.owo-composer-products button:hover { border-color: var(--ui-border-strong); background: var(--ui-surface-hover); }
.owo-composer-products button:focus-visible { outline: none; border-color: var(--ui-brand-strong); box-shadow: var(--ui-focus-ring); }
.owo-composer-product-name { font-weight: 600; color: var(--ui-graphite); overflow-wrap: anywhere; }
.owo-composer-product-name .ui-sub { display: block; font-weight: 400; color: var(--ui-text-muted); font-size: 12px; }
.owo-composer-product-meta { display: grid; justify-items: end; gap: 2px; font-size: 13px; white-space: nowrap; }
[data-picker] { min-width: 0; }
[data-picker] .owo-composer-product-meta { white-space: normal; overflow-wrap: anywhere; max-width: 160px; text-align: right; }
[data-picker][hidden] { display: none; }
[data-picker] [hidden] { display: none; }
@media (max-width: 480px) {
    [data-picker] .owo-composer-products button { grid-template-columns: minmax(0, 1fr) 32px; }
    [data-picker] .owo-composer-product-meta { grid-column: 1; justify-items: start; text-align: left; max-width: none; }
    [data-picker] .owo-composer-add { grid-column: 2; grid-row: 1 / 3; }
}
.owo-composer-product-meta span { color: var(--ui-text-muted); font-size: 12px; }
.owo-composer-product-meta span.is-out { color: var(--ui-tone-warning-fg, #8a5a00); }
.owo-composer-add { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ui-graphite); color: var(--ui-on-graphite); font-size: 18px; line-height: 1; }
.owo-composer-cart-empty { margin: 0; color: var(--ui-text-muted); font-size: 14px; }
.owo-composer-cart-empty { padding: 14px 0 4px; }
/* Live (JavaScript): the cart shows names, not selects; empty rows and the SKU column hide. */
.owo-composer.is-live [data-line-variant], .owo-composer.is-live .owo-composer-nojs { display: none; }
.owo-composer.is-live tr.is-blank { display: none !important; }
.owo-composer:not(.is-live) [data-line-name] { display: none; }
.owo-composer-line-name [data-line-name] { font-weight: 600; color: var(--ui-graphite); overflow-wrap: anywhere; }
.owo-composer-lines tr.is-added { background: var(--ui-brand-soft); transition: background-color .6s; }
.ui-main .owo-composer-lines td { vertical-align: middle; }
.owo-composer-line-total { white-space: nowrap; font-weight: 600; }
.owo-qty { display: inline-flex; align-items: center; gap: 4px; }
.owo-qty button { width: 36px; height: 36px; border: 1px solid var(--ui-border-strong); border-radius: 50%; background: var(--ui-surface); color: var(--ui-graphite); font-size: 18px; line-height: 1; cursor: pointer; }
.owo-qty button:hover { background: var(--ui-surface-hover); }
.ui-main .owo-qty input, .owo-qty input { width: 56px; text-align: center; }
.owo-composer-remove { width: 36px; height: 36px; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-text-muted); cursor: pointer; font-size: 15px; }
.owo-composer-remove:hover { background: var(--ui-surface-hover); color: var(--ui-tone-danger-fg); }
.owo-composer-pair { display: grid; gap: var(--ui-space-3); }
@media (min-width: 640px) { .owo-composer-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.owo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.owo-chips label { margin: 0; cursor: pointer; }
.owo-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.owo-chips span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--ui-border-strong); border-radius: 999px; background: var(--ui-surface); font-size: 14px; font-weight: 400; color: var(--ui-text); }
.owo-chips input:checked + span { background: var(--ui-graphite); border-color: var(--ui-graphite); color: var(--ui-on-graphite); }
.owo-chips input:focus-visible + span { box-shadow: var(--ui-focus-ring); }
.owo-composer-more > summary { cursor: pointer; font-size: 15px; font-weight: 600; color: var(--ui-text); }
.owo-composer-more[open] > summary { margin-bottom: var(--ui-space-3); }
.owo-composer-more { display: grid; gap: var(--ui-space-3); }
.owo-composer-submit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-space-3); padding: var(--ui-space-4) var(--ui-space-5); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.owo-composer-total { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 15px; color: var(--ui-text-muted); }
.owo-composer-total strong { font-size: 24px; color: var(--ui-graphite); font-variant-numeric: tabular-nums; }
.ui-main.owo-biz .owo-composer-submit .owo-btn, .owo-composer-submit .owo-btn { width: auto; min-width: 200px; min-height: 46px; font-size: 15px; }
@media (max-width: 640px) {
    .owo-composer-submit { position: sticky; bottom: 0; z-index: 3; border-radius: var(--ui-radius) var(--ui-radius) 0 0; box-shadow: 0 -6px 18px rgba(17, 17, 17, .08); padding: 12px 16px; }
    .ui-main.owo-biz .owo-composer-submit .owo-btn, .owo-composer-submit .owo-btn { flex: 1 1 auto; min-width: 0; }
    .owo-composer-products { max-height: 300px; }
    .owo-composer.is-live .owo-composer-lines td[data-label="Сумма"] { font-weight: 600; }
}
.ui-modal .owo-composer-pick { position: static; }
.owo-composer-pick[hidden], .owo-props [hidden], .owo-prop-form [hidden], .owo-choice-field [hidden] { display: none; }

/* The shop's storefront settings (/business/{b}/storefront). */
.sf-admin-url { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); margin-bottom: var(--ui-space-3); }
.sf-admin-url input { flex: 1 1 280px; min-width: 0; height: var(--ui-control-h); padding: 0 12px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-sm); font: inherit; font-size: 15px; font-weight: 600; color: var(--ui-graphite); background: var(--ui-surface-muted); }
.ui-main.owo-biz .sf-admin-url .owo-btn { width: auto; }
.sf-admin-form { display: grid; gap: var(--ui-space-4); max-width: 640px; }
.sf-admin-toggle { display: flex; align-items: flex-start; gap: 12px; margin: 0; cursor: pointer; font-weight: 400; }
.sf-admin-toggle input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ui-graphite); flex: none; }
.sf-admin-toggle > span { display: grid; gap: 2px; }
.sf-admin-slug { display: flex; align-items: stretch; min-width: 0; }
.sf-admin-prefix { display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid var(--ui-border-strong); border-right: 0; border-radius: var(--ui-radius-sm) 0 0 var(--ui-radius-sm); background: var(--ui-surface-muted); color: var(--ui-text-muted); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.ui-main .sf-admin-slug input:not([type=checkbox]) { flex: 1 1 auto; min-width: 0; border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0; }
.sf-admin-rules li { display: block; line-height: 1.55; }

/* Overview: the one next step of a new shop. */
.owo-next-step { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-space-3) var(--ui-space-5); border-left: 3px solid var(--ui-brand); }
.owo-next-step p { margin: 0; }
.owo-next-step-label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-text-muted); }
.owo-next-step-title { margin: 2px 0 4px !important; font-size: 18px; font-weight: 600; color: var(--ui-graphite); }
.ui-main.owo-biz .owo-next-step .owo-btn { width: auto; }
.owo-next-step-actions { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); }

/* First-shop onboarding (/business with no shop yet). */
.owo-onboarding { max-width: 560px; margin: var(--ui-space-6) auto; padding: 32px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 16px; }
.owo-onboarding-step { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--ui-text-muted); }
.owo-onboarding-title { margin: 0 0 8px; font-size: 28px; line-height: 1.2; letter-spacing: -.4px; color: var(--ui-graphite); }
.owo-onboarding-lead { margin: 0 0 24px; font-size: 16px; line-height: 1.55; color: var(--ui-text-muted); }
.owo-onboarding-form { display: grid; gap: 16px; }
.owo-onboarding-form .owo-field span:first-child { font-size: 14px; }
.owo-onboarding-form input[type=text] { min-height: 48px; font-size: 17px !important; }
.ui-main.owo-biz .owo-onboarding-form .owo-btn { width: 100%; min-height: 48px; font-size: 16px; }
.owo-onboarding-next { list-style: none; counter-reset: step; margin: 28px 0 0; padding: 20px 0 0; border-top: 1px solid var(--ui-border); display: grid; gap: 12px; }
.owo-onboarding-next li { counter-increment: step; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; font-size: 14px; color: var(--ui-text-muted); }
.owo-onboarding-next li::before { content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--ui-border-strong); font-weight: 600; color: var(--ui-text-muted); }
.owo-onboarding-next li.is-current::before { background: var(--ui-graphite); border-color: var(--ui-graphite); color: var(--ui-on-graphite); }
.owo-onboarding-next strong { color: var(--ui-graphite); }
@media (max-width: 640px) { .owo-onboarding { margin: var(--ui-space-4) 0; padding: 24px 20px; } .owo-onboarding-title { font-size: 24px; } }
/* The composer is wider than a plain form, and its search / quantity fields keep their own shape. */
.owo-biz-form.owo-composer { max-width: none; }
.owo-composer .owo-composer-search input:not([type=checkbox]):not([type=radio]) { height: 44px; padding: 0 12px 0 36px; font-size: 15px; }
.owo-composer .owo-qty input:not([type=checkbox]):not([type=radio]) { width: 56px; padding: 6px 4px; text-align: center; }
.owo-composer .owo-composer-lines input[name$="[price]"]:not([type=checkbox]) { width: 110px; }
.owo-composer .owo-field textarea { min-height: 72px; }
.owo-composer.is-empty .owo-composer-lines { display: none; }

/* ── System pages (layouts/error.twig): 404, 403, 405, 500 ───────────── */
.owo-error-page { min-height: 100vh; margin: 0; background: var(--ui-canvas); color: var(--ui-text); }
.owo-error-top { max-width: 1240px; margin: 0 auto; padding: 22px 32px; box-sizing: border-box; border-bottom: 1px solid var(--ui-border); }
.owo-error-top .owo-nav-brand { color: var(--ui-graphite); text-decoration: none; }
.owo-error { box-sizing: border-box; max-width: 560px; margin: 0 auto; padding: 72px 24px; }
.owo-error-code { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 14px; font-weight: 700; color: var(--ui-text-muted); }
.owo-error-code::before { content: ""; width: 20px; height: 3px; border-radius: 2px; background: var(--ui-brand); }
.owo-error-title { margin: 0 0 12px; font-size: 32px; line-height: 1.2; letter-spacing: -.8px; font-weight: 600; color: var(--ui-graphite); }
.owo-error-text { margin: 0 0 28px; font-size: 17px; line-height: 1.6; color: var(--ui-text-muted); }
.owo-error-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.owo-error-actions .owo-btn { width: auto; min-width: 140px; text-decoration: none; }
.owo-error-actions .owo-btn:not(.owo-btn-secondary) { color: var(--ui-on-graphite); }
.owo-error-actions .owo-btn-secondary { color: var(--ui-graphite); }
.owo-error-debug { margin-top: 32px; font-size: 13px; color: var(--ui-text-muted); }
.owo-error-debug pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 50vh; overflow: auto; padding: 12px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }
@media (max-width: 640px) { .owo-error-top { padding: 18px 20px; } .owo-error { padding: 48px 20px; } .owo-error-title { font-size: 26px; } .owo-error-actions .owo-btn { flex: 1 1 auto; } }

/* A quiet menu of secondary actions (order: "Другой статус ▾"). */
.ui-menu { position: relative; }
.ui-menu > summary { list-style: none; cursor: pointer; }
.ui-menu > summary::-webkit-details-marker { display: none; }
.ui-menu > summary i { font-size: 11px; }
.ui-menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 220px; display: grid; padding: var(--ui-space-1); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow-pop); }
.ui-menu-list form { margin: 0; }
.ui-menu-list button { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: var(--ui-radius-sm); background: none; font: inherit; font-size: 14px; text-align: left; color: var(--ui-text); cursor: pointer; }
.ui-menu-list button:hover, .ui-menu-list button:focus-visible { background: var(--ui-surface-hover); color: var(--ui-graphite); outline: none; }
.ui-menu-list { max-width: calc(100vw - 32px); }
@media (max-width: 640px) { .ui-page-actions .is-primary-action { order: -1; } .ui-menu[open] { flex-basis: 100%; } .ui-menu-list { position: static; margin-top: 6px; max-width: none; } }

/* A row holding an inline form: every cell centred on the control. */
.ui-table tr:has(td form) > td { vertical-align: middle; }

/* Orders workspace: status tabs (one line, scrolls sideways on a phone), filters, rows. */
.owo-order-tabs { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 0 0 var(--ui-space-3); border-bottom: 1px solid var(--ui-border); }
.owo-order-tabs a { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 8px 12px; border-bottom: 2px solid transparent; margin-bottom: -3px; font-size: 14px; color: var(--ui-text-muted); text-decoration: none; white-space: nowrap; }
.owo-order-tabs a span { min-width: 20px; padding: 1px 6px; border-radius: var(--ui-radius-badge); background: var(--ui-tone-neutral-bg); color: var(--ui-tone-neutral-fg); font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.owo-order-tabs a.has-new span { background: var(--ui-tone-info-bg); color: var(--ui-tone-info-fg); font-weight: 600; }
.owo-order-tabs a.is-empty { color: var(--ui-text-faint); }
.owo-order-tabs a:hover { color: var(--ui-graphite); }
.owo-order-tabs a[aria-current=page] { color: var(--ui-graphite); font-weight: 600; border-bottom-color: var(--ui-brand-strong); }
.owo-order-filters input[type=date] { height: var(--ui-control-h); padding: 0 8px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-sm); font: inherit; font-size: 14px; background: var(--ui-surface); color: var(--ui-text); }
.owo-orders-table tr.is-new td:first-child { box-shadow: inset 3px 0 0 var(--ui-tone-info-fg); }
.owo-orders-table tr.is-closed td { color: var(--ui-text-muted); }
.owo-orders-table tr.is-closed td strong { font-weight: 500; }
.owo-orders-table .owo-order-next form { margin: 0; }
@media (min-width: 641px) {
    .owo-orders-table .ui-main-cell { min-width: 130px; }
    .owo-orders-table td[data-label="Статус"], .owo-orders-table .owo-order-next { white-space: nowrap; }
}
.owo-orders-table td[data-label="Клиент"] .ui-sub { white-space: nowrap; }
@media (max-width: 640px) {
    .owo-order-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .owo-orders-table tr.is-new { box-shadow: inset 3px 0 0 var(--ui-tone-info-fg); }
    .owo-orders-table tr.is-new td:first-child { box-shadow: none; }
    .owo-orders-table .owo-order-next:empty { display: none; }
    .owo-orders-table .owo-order-next { padding-top: 8px; }
    .owo-orders-table .owo-order-next .owo-btn { width: 100%; }
}

/* Orders workspace: the stage tabs and the list / board switch on one line, the steps inside
   «В работе», the selection bar, a customer chip, and the board — a column per stage. */
.owo-order-head { display: flex; align-items: flex-end; gap: var(--ui-space-3); margin: 0 0 var(--ui-space-3); border-bottom: 1px solid var(--ui-border); }
.owo-order-head .owo-order-tabs { flex: 1 1 auto; min-width: 0; margin: 0; border-bottom: 0; }
.owo-order-board-total { flex: 1 1 auto; margin: 0; padding: 8px 0; font-size: 14px; color: var(--ui-text-muted); }
.owo-view-switch { display: inline-flex; flex: none; margin-bottom: 6px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-sm); overflow: hidden; }
.owo-view-switch a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 13px; color: var(--ui-text-muted); text-decoration: none; white-space: nowrap; }
.owo-view-switch a + a { border-left: 1px solid var(--ui-border-strong); }
.owo-view-switch a[aria-current=page] { background: var(--ui-graphite); color: var(--ui-on-graphite); }
.owo-order-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--ui-space-3); }
.owo-order-steps a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--ui-border-strong); border-radius: 999px; font-size: 13px; color: var(--ui-text); text-decoration: none; white-space: nowrap; }
.owo-order-steps a span { font-variant-numeric: tabular-nums; color: var(--ui-text-muted); }
.owo-order-steps a.is-empty { color: var(--ui-text-faint); }
.owo-order-steps a[aria-current=page] { border-color: var(--ui-graphite); background: var(--ui-graphite); color: var(--ui-on-graphite); }
.owo-order-steps a[aria-current=page] span { color: var(--ui-on-graphite-muted); }
.owo-order-chip { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 var(--ui-space-3); padding: 4px 6px 4px 10px; border-radius: 999px; background: var(--ui-brand-soft); font-size: 13px; }
.owo-order-chip-x { padding: 0 6px; color: var(--ui-text-muted); text-decoration: none; font-size: 16px; line-height: 1; }
.owo-order-bulk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-space-2); margin: 0 0 var(--ui-space-2); font-size: 13px; }
.owo-orders-table .owo-order-pick { width: 32px; padding-right: 0; }
.owo-orders-table .owo-order-pick input { width: 16px; height: 16px; }
.owo-order-closed { margin: var(--ui-space-3) 0 0; font-size: 13px; }
.owo-order-filters-more { display: contents; }
.owo-order-filters-toggle, .owo-order-filters-label { display: none; }
@media (max-width: 640px) {
    .owo-order-filters-label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
    .owo-order-filters-toggle:not(:checked) ~ .owo-order-filters-more { display: none; }
    .owo-order-filters-toggle:checked ~ .owo-order-filters-label { background: var(--ui-surface-hover); }
}
@media (min-width: 641px) {
    .owo-orders-table td { padding-top: 8px; padding-bottom: 8px; }
    .owo-orders-table .owo-order-source { white-space: nowrap; }
}
/* A tablet or a narrow window: the same columns, tighter, the next step may wrap onto two lines. */
@media (min-width: 641px) and (max-width: 1100px) {
    .owo-orders-table th, .owo-orders-table td { padding-left: 8px; padding-right: 8px; }
    .owo-orders-table .ui-main-cell { min-width: 0; }
    .owo-orders-table td[data-label="Статус"], .owo-orders-table .owo-order-next { white-space: normal; }
    .owo-orders-table .owo-order-next .owo-btn { height: auto; min-height: 30px; padding: 4px 8px; white-space: normal; line-height: 1.2; text-align: center; }
    .owo-orders-table .owo-order-source { white-space: normal; }
}

.owo-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--ui-space-3); align-items: start; }
.owo-board-col { min-width: 0; padding: var(--ui-space-2); border-radius: var(--ui-radius); background: var(--ui-surface-muted); border: 1px solid var(--ui-border); }
.owo-board-col.is-new { border-top: 3px solid var(--ui-tone-info-fg); }
.owo-board-col.is-active { border-top: 3px solid var(--ui-tone-warning-fg); }
.owo-board-col.is-done { border-top: 3px solid var(--ui-tone-success-fg); }
.owo-board-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 2px 4px 8px; }
.owo-board-head h2 { margin: 0; font-size: 14px; font-weight: 600; color: var(--ui-graphite); }
.owo-board-head h2 span { margin-left: 4px; font-weight: 500; color: var(--ui-text-muted); font-variant-numeric: tabular-nums; }
.owo-board-head a { font-size: 13px; white-space: nowrap; }
.owo-board-card { display: grid; gap: 4px; margin: 0 0 var(--ui-space-2); padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface); font-size: 14px; }
.owo-board-card.is-new { box-shadow: inset 3px 0 0 var(--ui-tone-info-fg); }
.owo-board-card-top { display: flex; justify-content: space-between; gap: 8px; }
.owo-board-card-top .ui-faint, .owo-board-card-meta { font-size: 12px; }
.owo-board-card-buyer { overflow-wrap: anywhere; }
.owo-board-card-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.owo-board-card-action form { margin: 4px 0 0; }
.owo-board-card-action .owo-btn { width: 100%; }
.owo-board-empty { margin: 0; padding: 8px 4px 4px; font-size: 13px; color: var(--ui-text-faint); }
@media (max-width: 640px) {
    .owo-order-head { flex-wrap: wrap; align-items: stretch; border-bottom: 0; }
    .owo-order-head .owo-order-tabs { flex-basis: 100%; border-bottom: 1px solid var(--ui-border); }
    .owo-view-switch { margin: 0; }
    .owo-orders-table .owo-order-pick { width: auto; }
    .owo-orders-table td.owo-order-pick:empty { display: none; }
    .owo-board { grid-template-columns: 1fr; }
}

/* Order page: the buyer's comment, manager notes, the history. */
.owo-order-comment { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ui-border); font-size: 14px; }
.owo-order-comment p { margin: 4px 0 0; overflow-wrap: anywhere; }
.owo-order-note-form { display: grid; gap: 8px; justify-items: start; margin: 0 0 12px; }
.owo-order-note-form textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-sm); font: inherit; font-size: 14px; background: var(--ui-surface); color: var(--ui-text); resize: vertical; }
.owo-order-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.owo-order-notes li { padding: 10px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-tone-warning-bg); font-size: 14px; }
.owo-order-notes p { margin: 0 0 4px; color: var(--ui-text); overflow-wrap: anywhere; }
.owo-order-notes .ui-faint { font-size: 12px; }
.owo-timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--ui-border); display: grid; gap: 14px; }
.owo-timeline li { position: relative; display: grid; gap: 2px; font-size: 14px; }
.owo-timeline li::before { content: ""; position: absolute; left: -24px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--ui-surface); border: 2px solid var(--ui-border-strong); }
.owo-timeline li.is-created::before, .owo-timeline li.is-status::before { border-color: var(--ui-brand-strong); }
.owo-timeline li.is-payment::before { border-color: var(--ui-tone-success-fg); }
.owo-timeline li.is-cancelled::before { border-color: var(--ui-tone-danger-fg); }
.owo-timeline-title { font-weight: 600; color: var(--ui-graphite); }
.owo-timeline-text { overflow-wrap: anywhere; }
.owo-timeline .ui-faint { font-size: 12px; }
.owo-order-cancel summary { cursor: pointer; font-size: 14px; color: var(--ui-tone-danger-fg); }
.owo-order-cancel .ui-form { margin-top: 10px; display: grid; gap: 10px; }
.owo-order-cancel textarea { width: 100%; }

/* An imported order in its source (Kaspi): the actions the source accepts now, and what was done there. */
.owo-source-actions { display: grid; gap: 10px; margin-top: 12px; }
.owo-source-actions .ui-form { display: grid; gap: 8px; }
.owo-source-actions details .ui-form { margin-top: 10px; }
.owo-source-actions summary { cursor: pointer; font-size: 14px; color: var(--ui-tone-danger-fg); }
.owo-source-actions textarea, .owo-source-actions select, .owo-source-actions input { width: 100%; }
.owo-source-log { margin: 8px 0 0; padding-left: 18px; font-size: 13px; display: grid; gap: 6px; overflow-wrap: anywhere; }

/* An inline rename behind a quiet link (locations). */
.owo-inline-edit > summary { list-style: none; cursor: pointer; font-size: 14px; color: var(--ui-text-muted); text-decoration: underline; text-underline-offset: 3px; }
.owo-inline-edit > summary::-webkit-details-marker { display: none; }
.owo-inline-edit[open] > summary { margin-bottom: var(--ui-space-2); }
.owo-new-location { margin: var(--ui-space-4) 0 0; }
.owo-new-location input[type=text] { flex: 1 1 280px; max-width: 420px; }

/* Marketplace cards and pages: the storefront's card language (radius,
   readable sizes, a letter instead of a missing photo). */
.owo-catalog-page .owo-h1, .owo-catalog-header .owo-h1 { font-size: 32px; font-weight: 600; letter-spacing: -.8px; }
.owo-card-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.owo-card { border-radius: 14px; }
.owo-card:hover { border-color: var(--ui-border-hover); }
.owo-card-media { height: auto; aspect-ratio: 4 / 3; }
.owo-card-media-placeholder { font-size: 40px; color: var(--ui-text-disabled); }
.owo-card-body { padding: 12px 14px 14px; gap: 6px; }
.owo-card-intent { font-size: 12px; }
.owo-card-title { font-size: 15px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.owo-card-price { font-size: 17px; }
.owo-card-category, .owo-card-location, .owo-card-date { margin: 0; font-size: 13px; color: var(--ui-text-muted); }
.owo-catalog-empty { padding: 48px 16px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 14px; font-size: 16px; color: var(--ui-text-muted); }
@media (max-width: 480px) { .owo-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* New product: a simple product shows price and SKU; variants on demand. */
.owo-product-variants.is-live:not(.has-variants) .owo-variants-only { display: none; }
.owo-product-variants-toggle { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--ui-space-3); font-size: 14px; font-weight: 500; cursor: pointer; }
.owo-product-variants-toggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--ui-graphite); }
.owo-product-variants-toggle[hidden] { display: none; }
.owo-product-rows th .owo-biz-muted { font-weight: 400; }
.owo-product-more { margin: 0 0 var(--ui-space-4); }
.owo-product-more > summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 4px 0; }
.owo-product-more > summary .ui-faint { font-weight: 400; margin-left: 4px; }
.owo-product-more[open] > summary { margin-bottom: var(--ui-space-3); }

/* Product photos: the picker (new product, product page) and the product's gallery. */
.owo-photo-drop { position: relative; display: inline-flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; min-height: 44px; padding: 0 16px; border: 1px dashed var(--ui-border-strong); border-radius: 10px; background: var(--ui-surface); font-size: 14px; font-weight: 500; color: var(--ui-graphite); cursor: pointer; }
.owo-photo-drop:hover { background: var(--ui-surface-hover); }
.owo-photo-drop:focus-within { border-color: var(--ui-brand-strong); box-shadow: var(--ui-focus-ring); }
.owo-photo-drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.owo-photo-previews { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.owo-photo-previews[hidden] { display: none; }
.owo-photo-previews figure { position: relative; margin: 0; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; border: 1px solid var(--ui-border); background: var(--ui-surface-hover); }
.owo-photo-previews img { display: block; width: 100%; height: 100%; object-fit: cover; }
.owo-photo-previews figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 0; background: rgba(0, 0, 0, .6); color: #fff; font-size: 11px; text-align: center; }
.owo-photo-grid { list-style: none; margin: 0 0 var(--ui-space-3); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.owo-photo-item { position: relative; display: grid; gap: 6px; align-content: start; min-width: 0; }
.owo-photo-item img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid var(--ui-border); border-radius: 10px; background: var(--ui-surface-hover); }
.owo-photo-item.is-cover img { border-color: var(--ui-graphite); }
.owo-photo-badge { position: absolute; top: 6px; left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--ui-graphite); color: var(--ui-on-graphite); font-size: 12px; font-weight: 600; }
.owo-photo-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.owo-photo-actions form { margin: 0; }
.owo-photo-upload { flex-wrap: wrap; align-items: center; }
.owo-catalog-thumb { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-right: 10px; vertical-align: middle; border-radius: 8px; overflow: hidden; background: var(--ui-surface-hover); color: var(--ui-text-disabled); font-size: 15px; font-weight: 700; }
.owo-catalog-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.owo-stock-in { white-space: nowrap; }
.owo-product-stock { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: var(--ui-space-3) var(--ui-space-4); }
.owo-product-stock p { flex-basis: 100%; margin: 0; }
.owo-product-stock input { max-width: 120px; }

/* Order totals line up under the lines' sums. */
.owo-order-totals .ui-facts { max-width: 340px; margin-left: auto; }
.owo-order-totals .ui-facts dd { text-align: right; font-variant-numeric: tabular-nums; }

/* Editing an order: the composer's proportions — the product wide, quantity
   and price narrow, "Удалить" a quiet toggle that strikes the row out. */
[data-order-edit] .owo-ord-lines input[name$="[quantity]"]:not([type=checkbox]) { width: 72px; text-align: center; }
[data-order-edit] .owo-ord-lines input[name$="[price]"]:not([type=checkbox]) { width: 110px; }
[data-order-edit] .owo-ord-lines td { vertical-align: middle; }
[data-order-edit] .owo-ord-lines .owo-inv-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ui-text-muted); white-space: nowrap; cursor: pointer; }
[data-order-edit] .owo-ord-lines tr.owo-inv-zero td:first-child { text-decoration: line-through; color: var(--ui-text-muted); }
[data-order-edit] [data-order-total] { font-size: 20px; color: var(--ui-graphite); }

/* Stock rows: a long product name wraps instead of being cut off. */
.owo-inv-table td.ui-main-cell { white-space: normal; overflow-wrap: anywhere; min-width: 180px; }
@media (max-width: 640px) { .owo-inv-table td.ui-main-cell { min-width: 0; } }
.ui-section.is-flush > .ui-pager { padding: 0 var(--ui-space-5) var(--ui-space-4); }

/* Product rows remain readable inside the narrow new-product dialog. */
@media (max-width: 640px) {
    .ui-main .owo-product-rows { display: block; width: 100%; }
    .owo-product-rows thead { display: none; }
    .owo-product-rows tbody { display: block; }
    .owo-product-rows tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--ui-border); }
    .owo-product-rows tr:last-child { border-bottom: 0; }
    .ui-main .owo-product-rows td { display: block; width: auto; padding: 6px 14px; border: 0; }
    .owo-product-rows td::before { content: attr(data-label); display: block; margin-bottom: 6px; color: var(--ui-text-muted); font-size: 13px; }
    .ui-main .owo-product-rows td input { width: 100%; min-width: 0; }
    .ui-grid-main aside .ui-facts { grid-template-columns: minmax(0, 1fr); }
}
/* Catalog structure: categories tree, brands, characteristics, product form. */
.owo-product-filters select { flex: 0 1 200px; }
.owo-catalog-meta strong { font-weight: 600; color: var(--ui-text); }
.owo-cat-path { display: block; }
.owo-pre-line { white-space: pre-line; }
.owo-field-narrow { max-width: 320px; }
.owo-product-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ui-space-4); align-items: start; }
.owo-product-main > .ui-section { margin-bottom: var(--ui-space-4); }

.owo-tree { list-style: none; margin: 0; padding: 0; }
.owo-tree-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--ui-space-2) var(--ui-space-4); align-items: center; padding: 10px var(--ui-space-5) 10px calc(var(--ui-space-5) + var(--depth, 0) * 22px); border-bottom: 1px solid var(--ui-border); }
.owo-tree-row:last-child { border-bottom: 0; }
.owo-tree-row.is-hidden .owo-tree-name > a, .owo-tree-row.is-hidden .owo-tree-name > span { color: var(--ui-text-muted); }
.owo-tree-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.owo-tree-branch { color: var(--ui-text-faint); }
.owo-tree-meta { display: flex; gap: var(--ui-space-3); font-size: 13px; color: var(--ui-text-muted); white-space: nowrap; }
.owo-tree-meta a { color: inherit; }
.owo-tree-actions, .owo-row-actions { display: flex; gap: var(--ui-space-2); justify-content: flex-end; flex-wrap: wrap; }
.owo-tree-actions form, .owo-row-actions form { margin: 0; }
.owo-tree-note { margin: 0; padding: var(--ui-space-3) var(--ui-space-5) var(--ui-space-4); border-top: 1px solid var(--ui-border); }

.owo-cat-tree, .owo-props, .owo-checklist, .owo-options { border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); padding: var(--ui-space-3) var(--ui-space-4) var(--ui-space-4); margin: 0; min-width: 0; display: grid; gap: var(--ui-space-2); }
.owo-cat-tree legend, .owo-props legend, .owo-checklist legend, .owo-options legend { font-weight: 500; font-size: 14px; padding: 0 4px; }
.owo-cat-tree p, .owo-props p, .owo-checklist p { margin: 0; }
.owo-cat-tree-list { display: grid; gap: 2px; max-height: 280px; overflow-y: auto; overscroll-behavior: contain; }
.owo-cat-tree-item { display: flex; align-items: flex-start; gap: 8px; padding: 5px 4px 5px calc(4px + var(--depth, 0) * 20px); border-radius: var(--ui-radius-sm); font-size: 14px; cursor: pointer; overflow-wrap: anywhere; }
.owo-cat-tree-item:hover { background: var(--ui-surface-hover); }
.owo-cat-tree-item input { margin-top: 3px; flex-shrink: 0; }
.owo-checklist-items { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
.owo-checklist-items label { display: inline-flex; align-items: center; gap: 6px; }
.owo-props-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--ui-space-3); }
.owo-prop label > span { font-weight: 500; }
.owo-prop-number { display: flex; align-items: center; gap: 8px; }
.owo-prop-number span { color: var(--ui-text-muted); font-size: 14px; white-space: nowrap; }
.owo-props-add { max-width: 320px; }
.owo-options-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ui-space-2); }
.owo-options-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--ui-space-3); align-items: center; font-size: 13px; }
.owo-options-list input[type=text] { min-height: var(--ui-control-h); padding: 7px 11px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-sm); font: inherit; font-size: 14px; background: var(--ui-surface); color: var(--ui-text); min-width: 0; }
.owo-options-remove { display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }

.sf-facts { margin: 0 0 20px; }
.sf-facts-title { margin: 0 0 10px; font-size: 17px; font-weight: 600; }
.sf-facts dl { margin: 0; display: grid; gap: 0; }
.sf-facts dl > div { display: grid; grid-template-columns: minmax(110px, 40%) minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--ui-border); font-size: 15px; }
.sf-facts dt { color: var(--ui-text-muted); }
.sf-facts dd { margin: 0; overflow-wrap: anywhere; }

@media (max-width: 900px) {
    .owo-product-main { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 640px) {
    .owo-product-filters select { flex: 1 1 100%; }
    .owo-tree-row { grid-template-columns: minmax(0, 1fr); padding-left: calc(var(--ui-space-4) + var(--depth, 0) * 14px); padding-right: var(--ui-space-4); }
    .owo-tree-actions { justify-content: flex-start; }
    .owo-tree-meta { white-space: normal; flex-wrap: wrap; }
    .owo-cat-tree-item { padding-left: calc(4px + var(--depth, 0) * 14px); }
    .owo-options-list li { grid-template-columns: minmax(0, 1fr) auto; }
    .owo-options-list li .ui-faint { grid-column: 1; grid-row: 2; }
    .owo-row-actions { justify-content: flex-start; }
}

/* Каталог → Импорт / экспорт */
.owo-exchange-choice { border: 0; margin: 0; padding: 0; }
.owo-exchange-choice > label { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; line-height: 1.45; }
.ui-field.owo-exchange-choice > label input { width: auto; min-height: 0; padding: 0; margin: 3px 0 0; flex-shrink: 0; }
.owo-exchange-note { margin: 0; font-size: 13px; line-height: 1.6; }
.owo-exchange-steps { grid-auto-flow: column; justify-content: start; gap: 24px; margin: 0 0 var(--ui-space-4); }
.owo-exchange-type { display: flex; gap: 6px; }
.owo-exchange-type select { flex: 1 1 auto; min-width: 0; }
.owo-exchange-type[hidden], .owo-exchange-mapping input[hidden] { display: none; }
.owo-exchange-mapping .ui-table select, .owo-exchange-mapping .ui-table input[type=text] { width: 100%; }
.owo-exchange-mapping .owo-exchange-type input[type=text] { width: 4.5em; flex: 0 0 4.5em; }
.owo-exchange-mapping > .ui-form-actions { margin: 0 0 var(--ui-space-4); }
.owo-exchange-cancel { margin: 0 0 var(--ui-space-4); }
.owo-exchange-problems { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; }
.owo-exchange-problems li { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 10px var(--ui-space-5); border-top: 1px solid var(--ui-border); font-size: 14px; line-height: 1.5; }
.owo-exchange-problems li > :nth-child(2) { flex: 1 1 280px; min-width: 0; overflow-wrap: anywhere; }
.owo-exchange-row { font-weight: 600; white-space: nowrap; color: var(--ui-tone-danger-fg); }
.owo-exchange-problems li.is-warning .owo-exchange-row { color: var(--ui-tone-warning-fg); }
.owo-exchange-preview { min-width: 760px; }
.owo-exchange-preview em { font-style: normal; color: var(--ui-tone-success-fg); }
.owo-exchange-format { padding-top: var(--ui-space-3); padding-bottom: var(--ui-space-3); }
.owo-exchange-format .ui-table { margin-top: var(--ui-space-3); }
.owo-exchange-format code, .owo-exchange-format .is-key { overflow-wrap: anywhere; }
@media (max-width: 640px) {
    .owo-exchange-steps { grid-auto-flow: row; gap: 8px; }
    .owo-exchange-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Extensions: the store's cards (an icon, the name, what it does, one next step), an extension's runs, its settings form. */
.ui-main.owo-biz .owo-ext-card { display: flex; flex-direction: column; gap: 10px; }
.owo-ext-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.owo-ext-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 2px; }
.owo-ext-meta .ui-sub { margin-top: 0; }
.owo-ext-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--ui-radius-sm); background: var(--ui-surface-muted); border: 1px solid var(--ui-border); color: var(--ui-graphite); font-size: 17px; }
.owo-ext-name { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.ui-main.owo-biz .owo-ext-name a { color: var(--ui-graphite); text-decoration: none; }
.ui-main.owo-biz .owo-ext-name a:hover { text-decoration: underline; }
.owo-ext-summary { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ui-text-muted); }
.owo-ext-caps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.owo-ext-caps li { padding: 2px 8px; border-radius: var(--ui-radius-badge); background: var(--ui-tone-neutral-bg); color: var(--ui-tone-neutral-fg); font-size: 12px; }
.owo-ext-card-actions { margin-top: auto; padding-top: 4px; }
.owo-ext-card-actions form { margin: 0; }
.owo-ext-note { margin: 0; font-size: 13px; color: var(--ui-text); }
.owo-ext-note.is-problem { color: var(--ui-tone-danger-fg); }
.owo-ext-card.is-coming_soon .owo-ext-icon, .owo-ext-card.is-unavailable .owo-ext-icon { color: var(--ui-text-faint); }
.owo-ext-card.is-connected .owo-ext-icon { border-color: var(--ui-tone-success-fg); color: var(--ui-tone-success-fg); }
.owo-ext-card-actions .ui-faint { font-size: 13px; }
.owo-ext-group + .owo-ext-group { margin-top: var(--ui-space-5); }
.owo-ext-group-title { margin: 0 0 var(--ui-space-3); font-size: 15px; font-weight: 600; color: var(--ui-graphite); }
.owo-ext-runs form { margin: 0; }
.owo-ext-settings { max-width: 640px; }
.owo-ext-fieldset { display: grid; gap: var(--ui-space-3); margin: 0; padding: 0; border: 0; min-width: 0; }
.owo-ext-fieldset input { width: 100%; box-sizing: border-box; }
@media (max-width: 640px) {
    .owo-ext-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .owo-ext-card-actions .owo-btn { width: 100%; }
    .owo-ext-runs li { flex-wrap: wrap; }
    .owo-ext-runs .ui-rows-end { width: 100%; }
}
.owo-ext-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 13px; color: var(--ui-text-muted); }
.owo-ext-stats strong { color: var(--ui-text); }
.owo-ext-unmapped { margin-top: 6px; font-size: 13px; }
.owo-ext-unmapped ul { margin: 6px 0 0; padding-left: 18px; }
.owo-ext-runs li > :first-child { white-space: normal; }
.owo-biz .ui-facts + .ui-form-actions, .owo-biz .ui-rows + .ui-muted, .owo-biz .ui-form-actions + .ui-muted, .owo-ext-runs + .ui-metrics { margin-top: var(--ui-space-3); }
/* An extension's operations (catalog, stock) and the import preview. */
.owo-ext-op .ui-empty form { margin: 0; }
.owo-ext-op .ui-callout, .owo-ext-op .ui-metrics, .owo-ext-op .ui-rows + .ui-form-actions { margin-top: var(--ui-space-3); }
.owo-ext-op .ui-metrics:last-child, .owo-ext-plan { margin-bottom: 0; }
.owo-ext-plan + .ui-muted, .owo-ext-preview .ui-rows + .ui-form-actions, .owo-ext-preview .owo-ext-unmapped + .ui-form-actions, .owo-ext-preview .ui-muted + .ui-form-actions, .owo-ext-preview .ui-muted + .ui-rows { margin-top: var(--ui-space-3); }
.owo-ext-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0 0; }
.ui-metric.is-success strong { color: var(--ui-tone-success-fg); }
.owo-ext-unmapped + .owo-ext-unmapped { margin-top: 4px; }
.owo-ext-store-form { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.owo-ext-store-form select { max-width: 100%; min-width: 0; }

/* The price list a service downloads (Kaspi): its URL, the steps, its stores. */
.owo-feed-url { margin-bottom: var(--ui-space-2); }
.owo-feed-url input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; font-weight: 500; }
.owo-feed-steps { margin: 0 0 var(--ui-space-3); padding-left: 20px; font-size: 14px; color: var(--ui-text-muted); }
.owo-feed-steps li { margin: 2px 0; }
.owo-feed-url + .ui-facts, .owo-feed-steps + .ui-facts { margin-top: var(--ui-space-2); }
.owo-feed-problems { margin-top: var(--ui-space-2); }
.owo-feed-stores { display: grid; gap: var(--ui-space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.owo-feed-stores legend { padding: 0; font-weight: 600; font-size: 15px; }
.owo-feed-stores > p { margin: 0; }
.owo-feed-store { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--ui-space-2); }
.owo-feed-stock { display: inline-block; margin-right: 10px; white-space: nowrap; }
.owo-feed-preview td:first-child { min-width: 180px; overflow-wrap: anywhere; }
.owo-feed-preview td:nth-child(2) { overflow-wrap: anywhere; }
@media (max-width: 640px) {
    .owo-feed-store { grid-template-columns: minmax(0, 1fr); padding-bottom: var(--ui-space-2); border-bottom: 1px solid var(--ui-border); }
    .owo-feed-preview td:first-child { min-width: 0; }
}

/* Настройки: payment and delivery methods as a list. */
.owo-settings-form { max-width: 560px; }
.owo-settings-note { margin: var(--ui-space-2) 0 var(--ui-space-4); font-size: 13px; }
.owo-methods { list-style: none; margin: 0; padding: 0; }
.owo-method { display: flex; align-items: center; gap: var(--ui-space-3); padding: 14px var(--ui-space-4); border-top: 1px solid var(--ui-border); }
.owo-method:first-child { border-top: 0; }
.owo-method.is-off .owo-method-main strong, .owo-method.is-off .owo-method-price { color: var(--ui-text-faint); }
.owo-method-main { flex: 1 1 auto; min-width: 0; }
.owo-method-price { flex: none; white-space: nowrap; }
.owo-method-actions { display: flex; flex: none; gap: var(--ui-space-2); flex-wrap: wrap; justify-content: flex-end; }
.owo-method-actions form { margin: 0; }
.owo-price-mode { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; }
.owo-price-mode legend { padding: 0; margin-bottom: 4px; font-weight: 500; }
.owo-price-mode .owo-inv-check, .ui-form > .owo-inv-check { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; cursor: pointer; }
.owo-price-fixed input[type=text] { width: 120px; height: var(--ui-control-h); padding: 0 10px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-sm); font: inherit; }
.owo-team-role { display: flex; gap: var(--ui-space-2); align-items: center; flex-wrap: wrap; margin: 0; }
.owo-team-role select { height: 32px; }
.owo-roles dd { color: var(--ui-text-muted); }
/* Уведомления: the Telegram chats, their choice of events, a link waiting to be used. */
.owo-notify-icon, .owo-orders-notify-hint .fa-telegram { color: #229ed9; }
.owo-orders-notify-hint { margin: var(--ui-space-4) 0 0; font-size: 13px; }
.owo-notify-empty p { margin: 0 0 var(--ui-space-3); max-width: 560px; }
.owo-notify-empty form, .owo-notify-more { margin: var(--ui-space-3) 0 0; }
.owo-notify-pairing { padding: var(--ui-space-4); margin: 0 0 var(--ui-space-4); border: 1px dashed var(--ui-border-strong); border-radius: var(--ui-radius-sm); }
.owo-notify-pairing-title { margin: 0 0 6px; font-weight: 600; }
.owo-notify-pairing ol { margin: 0 0 var(--ui-space-3); padding-left: 20px; line-height: 1.7; }
.owo-notify-pairing p:last-child { margin-bottom: 0; }
.owo-notify-recipients { border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); }
.owo-notify-recipient { flex-wrap: wrap; }
.owo-notify-types { flex-basis: 100%; margin: 0; }
.owo-notify-types fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.owo-notify-types legend { padding: 0; margin-bottom: 6px; font-size: 13px; color: var(--ui-text-muted); }
.owo-notify-type { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.owo-notify-type input { margin-top: 3px; flex: none; }
.owo-notify-type small { display: block; font-size: 12px; }
.owo-notify-types fieldset[disabled] .owo-notify-type { cursor: default; }
.owo-notify-types .ui-form-actions { margin-top: var(--ui-space-3); justify-content: flex-start; }
@media (max-width: 640px) {
    .owo-method { flex-wrap: wrap; padding: 14px var(--ui-space-3); }
    .owo-method-main { flex-basis: calc(100% - 110px); }
    .owo-method-actions { flex-basis: 100%; justify-content: flex-start; }
}

/* ── Быстрая продажа (business/sell): the counter's workplace ─────────────
   Products take the room, the sale stays in view on the right (sticky, its
   lines scroll inside). Up to 760px: products, then the sale, and a bar at
   the bottom that leads to it. Cards are buttons: one tap adds. */
.qs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: var(--ui-space-5); align-items: start; }
.qs-browse { min-width: 0; }
.qs-search { position: relative; display: flex; align-items: center; }
.qs-search > i { position: absolute; left: 16px; color: var(--ui-text-faint); font-size: 18px; pointer-events: none; }
.ui-main .qs-search input { width: 100%; height: 52px; padding: 0 48px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius); background: var(--ui-surface); font-size: 17px; color: var(--ui-text); box-sizing: border-box; }
.ui-main .qs-search input:focus { outline: none; border-color: var(--ui-brand-strong); box-shadow: var(--ui-focus-ring); }
.qs-search-clear { position: absolute; right: 8px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--ui-text-muted); cursor: pointer; }
.qs-search-clear:hover { background: var(--ui-surface-hover); color: var(--ui-graphite); }
.qs-hint { margin: 8px 2px 0; font-size: 13px; color: var(--ui-text-faint); min-height: 18px; }
.qs-hint.is-error { color: var(--ui-tone-danger-fg); }
.qs-hint.is-success { color: var(--ui-tone-success-fg); }
.qs-cats { display: flex; gap: 8px; margin: 14px 0 0; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.qs-subcats { margin-top: 8px; }
.qs-cat { flex: none; height: 36px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface); color: var(--ui-text); font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; }
.qs-subcats .qs-cat { height: 32px; font-size: 13px; }
.qs-cat:hover { border-color: var(--ui-border-hover); }
.qs-cat[aria-pressed=true] { background: var(--ui-graphite); border-color: var(--ui-graphite); color: var(--ui-on-graphite); }
.qs-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; margin-top: 16px; }
.qs-products[aria-busy=true] { opacity: .6; }
.qs-card { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-height: 128px; padding: 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); text-align: left; font: inherit; color: var(--ui-text); cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .06s; }
.qs-card:hover { border-color: var(--ui-border-hover); }
.qs-card:focus-visible { outline: none; border-color: var(--ui-brand-strong); box-shadow: var(--ui-focus-ring); }
.qs-card:active { transform: scale(.985); }
.qs-card.is-added { border-color: var(--ui-brand-strong); box-shadow: 0 0 0 2px var(--ui-brand-soft); }
.qs-card:disabled { cursor: not-allowed; background: var(--ui-surface-muted); color: var(--ui-text-muted); }
.qs-card-img { width: 100%; height: 84px; object-fit: cover; border-radius: var(--ui-radius-sm); background: var(--ui-surface-hover); }
.qs-card-name { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ui-graphite); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qs-card:disabled .qs-card-name { color: var(--ui-text-muted); }
.qs-card-variant { align-self: flex-start; max-width: 100%; box-sizing: border-box; padding: 2px 8px; border-radius: var(--ui-radius-badge); background: var(--ui-brand-soft); color: var(--ui-brand-ink); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-card-sku { font-size: 12px; color: var(--ui-text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-card-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; margin-top: auto; }
.qs-card-price { font-size: 16px; font-weight: 700; color: var(--ui-graphite); white-space: nowrap; }
.qs-card-stock { font-size: 12px; color: var(--ui-text-muted); white-space: nowrap; }
.qs-card-stock.is-out { color: var(--ui-tone-danger-fg); }
.qs-card-badge { position: absolute; top: 8px; right: 8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--ui-graphite); color: var(--ui-on-graphite); font-size: 12px; font-weight: 700; display: grid; place-items: center; box-sizing: border-box; }
.qs-empty { margin: 16px 0; padding: 24px; text-align: center; color: var(--ui-text-muted); border: 1px dashed var(--ui-border-strong); border-radius: var(--ui-radius); }
.ui-main .qs-more { width: auto; margin: 16px auto 0; display: flex; }
.ui-main .qs-more[hidden] { display: none; }

.qs-cart { position: sticky; top: var(--ui-space-4); min-width: 0; }
.qs-cart-box, .qs-done { display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 32px); box-sizing: border-box; padding: 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow-pop); }
.qs-cart-box[hidden], .qs-done[hidden] { display: none; }
.qs-cart-head { display: flex; justify-content: space-between; align-items: center; }
.qs-cart-head h2, .qs-done h2 { margin: 0; font-size: 18px; color: var(--ui-graphite); }
.qs-link { padding: 4px 0; border: 0; background: none; color: var(--ui-text-muted); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.qs-link:hover { color: var(--ui-graphite); }
.qs-link[hidden] { display: none; }
.qs-location { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ui-text-muted); }
.ui-main .qs-location select { flex: 1; min-width: 0; height: 36px; }
.qs-cart-empty { margin: 0; padding: 18px 12px; text-align: center; font-size: 14px; color: var(--ui-text-muted); background: var(--ui-surface-muted); border-radius: var(--ui-radius-sm); }
.qs-cart-empty[hidden] { display: none; }
/* The lines scroll inside, so the total and «Провести продажу» stay on screen before the page scrolls too. */
.qs-lines { list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 0; flex: 0 1 auto; max-height: max(150px, calc(100vh - 560px)); }
.qs-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 10px 0; border-top: 1px solid var(--ui-border); }
.qs-line:first-child { border-top: 0; padding-top: 0; }
.qs-line.is-added { animation: qs-flash .6s; }
@keyframes qs-flash { from { background: var(--ui-brand-soft); } to { background: transparent; } }
.qs-line-name { font-size: 14px; font-weight: 600; color: var(--ui-graphite); overflow-wrap: anywhere; }
.qs-line-name small { display: block; font-size: 13px; font-weight: 600; color: var(--ui-brand-ink); }
.qs-line-total { font-size: 14px; font-weight: 700; color: var(--ui-graphite); white-space: nowrap; text-align: right; }
.qs-line-row { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qs-line-price { font-size: 13px; color: var(--ui-text-muted); white-space: nowrap; }
.qs-line-price.is-changed { color: var(--ui-tone-warning-fg); font-weight: 600; }
.qs-qty { display: inline-flex; align-items: center; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-sm); overflow: hidden; }
.qs-qty button { width: 36px; height: 36px; border: 0; background: var(--ui-surface); color: var(--ui-graphite); font-size: 18px; cursor: pointer; }
.qs-qty button:hover { background: var(--ui-surface-hover); }
.ui-main .qs-qty input { width: 46px; height: 36px; margin: 0; border: 0; border-left: 1px solid var(--ui-border); border-right: 1px solid var(--ui-border); border-radius: 0; text-align: center; font-size: 15px; font-weight: 600; padding: 0; box-shadow: none; -moz-appearance: textfield; }
.qs-qty input::-webkit-inner-spin-button, .qs-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qs-remove { width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--ui-text-faint); cursor: pointer; }
.qs-remove:hover { background: var(--ui-tone-danger-bg); color: var(--ui-tone-danger-fg); }
.qs-line-error { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--ui-tone-danger-fg); }
.qs-line.has-error .qs-qty { border-color: var(--ui-tone-danger-fg); }
.qs-field { display: grid; gap: 6px; }
.qs-field-label { font-size: 13px; font-weight: 600; color: var(--ui-text-muted); }
.qs-customer-chosen { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ui-graphite); }
.qs-customer-chosen[hidden], .qs-customer-pick[hidden], .qs-customer-search[hidden] { display: none; }
.qs-customer-pick { display: grid; }
.qs-customer-pick > .qs-link { justify-self: start; }
.ui-main .qs-customer-search input { width: 100%; height: 38px; box-sizing: border-box; }
.qs-customer-results { list-style: none; margin: 4px 0 0; padding: 0; }
.qs-customer-results button { width: 100%; padding: 8px 10px; border: 0; border-radius: var(--ui-radius-sm); background: none; text-align: left; font: inherit; font-size: 14px; cursor: pointer; }
.qs-customer-results button:hover, .qs-customer-results button:focus-visible { background: var(--ui-surface-hover); outline: none; }
.qs-customer-results small { color: var(--ui-text-muted); margin-left: 6px; }
.qs-customer-results .is-none { padding: 8px 10px; font-size: 13px; color: var(--ui-text-muted); }
.qs-pays { display: flex; flex-wrap: wrap; gap: 8px; }
.qs-pay { position: relative; flex: 1 1 auto; }
.qs-pay input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.qs-pay span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-sm); font-size: 14px; font-weight: 600; text-align: center; cursor: pointer; background: var(--ui-surface); }
.qs-pay input:checked + span { background: var(--ui-brand-soft); border-color: var(--ui-brand-strong); color: var(--ui-graphite); box-shadow: inset 0 0 0 1px var(--ui-brand-strong); }
.qs-pay input:focus-visible + span { box-shadow: var(--ui-focus-ring); }
.qs-pays.has-error .qs-pay span { border-color: var(--ui-tone-danger-fg); }
.qs-alert { margin: 0; padding: 10px 12px; border-radius: var(--ui-radius-sm); background: var(--ui-tone-danger-bg); color: var(--ui-tone-danger-fg); font-size: 14px; line-height: 1.45; }
.qs-alert[hidden] { display: none; }
.qs-alert.is-warning { background: var(--ui-tone-warning-bg); color: var(--ui-tone-warning-fg); }
.qs-error { margin: 0; font-size: 13px; color: var(--ui-tone-danger-fg); }
.qs-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--ui-border); font-size: 15px; color: var(--ui-text-muted); }
.qs-total strong { font-size: 28px; letter-spacing: -.5px; color: var(--ui-graphite); white-space: nowrap; }
.ui-main .qs-submit { min-height: 56px; font-size: 17px; flex: none; }
.qs-note { margin: -6px 0 0; font-size: 13px; text-align: center; color: var(--ui-text-muted); }
.qs-done { align-items: stretch; text-align: center; }
.qs-done:focus { outline: none; }
.qs-done-mark { align-self: center; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--ui-tone-success-bg); color: var(--ui-tone-success-fg); font-size: 26px; }
.qs-done-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 0; text-align: left; font-size: 15px; }
.qs-done-facts dt { color: var(--ui-text-muted); }
.qs-done-facts dd { margin: 0; font-weight: 600; color: var(--ui-graphite); text-align: right; overflow-wrap: anywhere; }
.qs-done-facts [hidden] { display: none; }
.qs-done-facts dd[data-qs-done-total] { font-size: 22px; }
.ui-main .qs-done .owo-btn { min-height: 48px; }
.qs-bar { display: none; }

.qs-card.has-badge .qs-card-name { padding-right: 24px; }

@media (max-width: 1100px) and (min-width: 761px) {
    .ui-main:has(.qs) .ui-page-subtitle { display: none; }
    .qs { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--ui-space-4); }
    .qs-lines { max-height: max(150px, calc(100vh - 660px)); }
    .qs-products { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
@media (max-width: 760px) {
    .qs { grid-template-columns: minmax(0, 1fr); padding-bottom: 72px; }
    .qs-cart { position: static; scroll-margin-top: 12px; }
    .qs-cart-box, .qs-done { max-height: none; box-shadow: none; }
    .qs-lines { max-height: none; }
    .qs-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .qs-card { min-height: 112px; padding: 10px; }
    .qs-card-img { height: 64px; }
    .qs-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 0 18px; border-radius: var(--ui-radius); background: var(--ui-graphite); color: var(--ui-on-graphite); font-size: 15px; text-decoration: none; box-shadow: var(--ui-shadow-pop); }
    .qs-bar[hidden] { display: none; }
    .ui-main.owo-biz .qs-bar, .ui-main.owo-biz .qs-bar:hover, .ui-main.owo-biz .qs-bar:focus { color: var(--ui-on-graphite); text-decoration: none; }
    .qs-bar strong { font-size: 17px; }
}

/* Product page: a variant's photo in the variants table (faded when it is the product's). */
.owo-variant-image { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; display: block; border: 1px solid var(--ui-border); }
.owo-variant-image.is-fallback { opacity: .45; }

/* POS shell (business/sell/_pos.twig): one bar — shop, «Продажа» / «Мои продажи», «Выйти из кассы», the account menu. */
.pos-tabs { display: flex; align-items: stretch; gap: 4px; height: 100%; margin-left: var(--ui-space-3); }
.pos-tabs a { display: flex; align-items: center; gap: 8px; padding: 0 14px; color: var(--ui-on-graphite-muted); font-size: 15px; font-weight: 500; text-decoration: none; border-bottom: 3px solid transparent; }
.pos-tabs a:hover { color: var(--ui-on-graphite); }
.pos-tabs a.is-active { color: var(--ui-on-graphite); border-bottom-color: var(--ui-brand-strong, #fff); }
.ui-main.owo-biz.pos-main { max-width: 1480px; margin: 0 auto; padding: var(--ui-space-4) var(--ui-space-5) 64px; box-sizing: border-box; width: 100%; }
.pos-title { margin-bottom: var(--ui-space-4); }
.qs-subtotal { display: flex; justify-content: space-between; font-size: 14px; color: var(--ui-text-muted); }
.qs-subtotal[hidden] { display: none; }
.qs-discount-row { display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: 8px; }
.ui-main .qs-discount-row input, .ui-main .qs-discount-row select { height: 38px; box-sizing: border-box; min-width: 0; }
.qs-discount.has-error input { border-color: var(--ui-tone-danger-fg); }
.qs-customer-new { display: grid; gap: 6px; margin-top: 6px; }
.qs-customer-new[hidden] { display: none; }
.ui-main .qs-customer-new input { width: 100%; height: 38px; box-sizing: border-box; }
.qs-done-sales { display: block; margin-top: 12px; text-align: center; }
.pos-day { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: var(--ui-space-4); }
.pos-day-sum { margin-left: auto; color: var(--ui-text-muted); }
.pos-sales { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pos-sale-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 12px 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); }
.pos-sale-row:hover { border-color: var(--ui-border-strong); }
.pos-sale-row.is-returned { opacity: .7; }
.pos-sale-row small { display: block; font-size: 12px; color: var(--ui-text-faint); font-weight: 400; }
.pos-sale-number { font-weight: 600; }
.pos-sale-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pos-sale-total { text-align: right; font-weight: 600; white-space: nowrap; }
.pos-back { margin: 0 0 var(--ui-space-3); font-size: 14px; color: var(--ui-text-muted); }
.pos-sale { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--ui-space-5); align-items: start; }
.pos-sale-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 0; }
.pos-sale-totals { margin-top: var(--ui-space-4); }
.pos-return > summary { list-style: none; cursor: pointer; display: inline-flex; }
.pos-return > summary::-webkit-details-marker { display: none; }
.pos-return-form { display: grid; gap: 12px; margin-top: 12px; }
.pos-return-form p { margin: 0; }
.pos-return-confirm { display: flex; align-items: center; gap: 8px; font-weight: 500; }
@media (max-width: 900px) {
    .pos-sale { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .pos-topbar { flex-wrap: wrap; height: auto; padding-top: 8px; padding-bottom: 0; row-gap: 0; }
    .pos-tabs { order: 3; width: 100%; margin-left: 0; height: 44px; }
    .pos-tabs a { flex: 1; justify-content: center; }
    .pos-links .ui-topbar-user-name { display: none; }
    /* «Выйти из кассы» stays on a phone (the workplace's own top bar hides its links there). */
    .pos-topbar .ui-switcher summary { max-width: 40vw; }
    .ui-topbar-links > a.pos-cabinet { display: inline; white-space: nowrap; }
    .ui-main.owo-biz.pos-main { padding: var(--ui-space-3) 12px 72px; }
    .pos-sale-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
    .pos-sale-row .ui-badge { justify-self: end; }
    .pos-day-sum { margin-left: 0; width: 100%; }
}

/* Sales channels: the landing's cards (the storefront first) and a channel's in-page sections. */
.ui-main.owo-biz .owo-channel-card { align-content: start; }
.owo-channel-card .ui-card-head a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.owo-channel-card .ui-card-head a:hover strong { text-decoration: underline; }
.owo-channel-url { overflow-wrap: anywhere; }
.owo-channel-actions { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); margin-top: var(--ui-space-2); }
.owo-channel-source { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.owo-channel-nav { display: flex; flex-wrap: wrap; gap: var(--ui-space-2) var(--ui-space-4); margin: 0 0 var(--ui-space-4); font-size: 14px; }
.owo-channel-nav a { color: var(--ui-text-muted); text-decoration: none; }
.owo-channel-nav a:hover { color: var(--ui-graphite); text-decoration: underline; }

/* «Подключения»: the connected on top (a row each: icon, health, last sync and problem, action), then the catalog. */
.ui-rows.owo-ext-connected li { flex-wrap: nowrap; align-items: flex-start; padding: 12px var(--ui-space-4); }
.ui-rows.owo-ext-connected li > .owo-ext-icon { flex: none; min-width: 0; }
.owo-ext-connected-main { flex: 1 1 auto; min-width: 0; }
.owo-ext-connected-main > a { color: var(--ui-graphite); text-decoration: none; margin-right: 6px; }
.owo-ext-connected-main > a:hover strong { text-decoration: underline; }
.owo-ext-connected .ui-rows-end { flex: none; }
.owo-ext-connected li.is-attention .owo-ext-icon { border-color: var(--ui-tone-danger-fg); color: var(--ui-tone-danger-fg); }
.owo-ext-connected li.is-connected .owo-ext-icon { border-color: var(--ui-tone-success-fg); color: var(--ui-tone-success-fg); }
.owo-ext-problem { color: var(--ui-tone-danger-fg); overflow-wrap: anywhere; }

/* Подключения → Синхронизация: a row's controls — run / cancel, and the schedule's form behind a disclosure. */
.owo-sync-actions > form, .owo-sync-actions > details { display: inline-block; vertical-align: top; margin: 0 0 6px 6px; }
.owo-sync-actions details[open] { display: block; margin-left: 0; }
.owo-sync-actions .ui-form label { display: block; font-size: 13px; margin: 8px 0 0; }
.owo-sync-actions .ui-form input[type="number"] { display: block; width: 100%; max-width: 220px; margin-top: 4px; }
.owo-sync-actions .ui-form button { margin-top: 10px; }
.owo-ext-catalog { margin-top: var(--ui-space-5); }
.owo-ext-catalog > .ui-section-head { flex-wrap: wrap; gap: var(--ui-space-2) var(--ui-space-4); }
.owo-ext-filter { display: flex; flex-wrap: wrap; gap: 4px; }
.owo-ext-filter a { padding: 4px 10px; border-radius: 999px; font-size: 13px; color: var(--ui-text-muted); text-decoration: none; border: 1px solid var(--ui-border); }
.owo-ext-filter a[aria-current] { color: var(--ui-graphite); border-color: var(--ui-graphite); }
.owo-ext-elsewhere { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin-top: var(--ui-space-4); }
/* «Кто главный» of the overview: a domain per row, then what a read-only pilot still needs. */
.owo-ext-authority li > span:first-child { flex: 1 1 14rem; min-width: 0; }
.owo-ext-authority .ui-rows-end { white-space: normal; }
.owo-ext-blockers { margin: var(--ui-space-2) 0 0; padding-left: 1.2em; }
.owo-ext-blockers li { margin: 4px 0; overflow-wrap: anywhere; }

/* A connection's page: what syncs, its mode, history, developer details. */
.owo-ext-flows .ui-rows-end { white-space: normal; }
.owo-ext-mode { margin: var(--ui-space-3) 0 0; font-size: 14px; }
.owo-ext-history li > span { flex-basis: 100%; }
.owo-ext-history .ui-badge { margin-left: 6px; }
details.owo-ext-dev, details.owo-ext-about { padding: var(--ui-space-3) var(--ui-space-4); }
details.owo-ext-dev > summary, details.owo-ext-about > summary, details.owo-ext-advanced > summary { cursor: pointer; font-weight: 500; color: var(--ui-text-muted); }
details.owo-ext-dev[open] > summary, details.owo-ext-about[open] > summary { margin-bottom: var(--ui-space-3); }
.owo-ext-dev code { overflow-wrap: anywhere; }

/* Settings: «Основное», then «Дополнительно» with tables «their value → ours». */
details.owo-ext-advanced { display: grid; gap: var(--ui-space-4); margin-top: var(--ui-space-4); padding-top: var(--ui-space-4); border-top: 1px solid var(--ui-border); }
details.owo-ext-advanced[open] > summary { margin-bottom: var(--ui-space-3); }
details.owo-ext-advanced > .ui-field, details.owo-ext-advanced > .owo-ext-map { margin-bottom: var(--ui-space-4); }
.owo-ext-map { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 6px; }
.owo-ext-map legend { padding: 0; margin-bottom: 6px; font-size: 14px; font-weight: 500; }
.owo-ext-map small { font-size: 13px; color: var(--ui-text-muted); }
.owo-ext-map-table td { padding: 4px 6px; }
.owo-ext-map-table input, .owo-ext-map-table select { width: 100%; min-width: 0; box-sizing: border-box; min-height: var(--ui-control-h); padding: 6px 10px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-sm); font: inherit; font-size: 14px; background: var(--ui-surface); color: var(--ui-text); }
@media (max-width: 640px) {
    .ui-rows.owo-ext-connected li { flex-wrap: wrap; padding: 12px var(--ui-space-3); }
    .owo-ext-connected-main { flex-basis: calc(100% - 56px); }
    .owo-ext-connected .ui-rows-end { margin-left: 52px; }
}

/* Склад → Документы: stock documents (business/stock/*.twig). */
.owo-stock-new { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); margin: 0 0 var(--ui-space-3); }
.owo-stock-lines .owo-stock-number { width: 7.5em; max-width: 100%; min-height: 34px; padding: 4px 8px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-sm); font: inherit; font-size: 14px; text-align: right; background: var(--ui-surface); color: var(--ui-text); box-sizing: border-box; }
.owo-stock-lines .owo-stock-number.is-invalid { border-color: var(--ui-tone-danger-fg); }
.owo-stock-lines .ui-field-error { display: block; }
.owo-stock-save { padding: var(--ui-space-3); }
.owo-stock-add .ui-toolbar input[type=text] { flex: 0 0 7em; }
.owo-stock-refused ul { margin: 8px 0; padding-left: 20px; }
.owo-stock-refused .ui-form-actions { margin-top: 8px; }
@media (max-width: 640px) {
    .owo-stock-lines .owo-stock-number { display: block; width: 100%; min-height: 44px; margin-top: 4px; text-align: left; }
    .owo-stock-add .ui-toolbar input[type=text] { flex: 1 1 100%; }
    .owo-stock-new .owo-btn { flex: 1 1 45%; }
}

/* ── Returns, an order's money, cash shifts, sales reports ─────────────── */
.owo-return .ui-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-2); }
.owo-return-lines input[type=text] { width: 96px; min-height: var(--ui-control-h); padding: 6px 10px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-sm); font: inherit; font-size: 14px; text-align: right; background: var(--ui-surface); color: var(--ui-text); }
.owo-return-restock { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.owo-return-note { margin: 0; padding: 12px 16px; font-size: 14px; }
.owo-return-card { padding: 12px 0; border-top: 1px solid var(--ui-border); }
.owo-return-card:first-of-type { border-top: 0; padding-top: 0; }
.owo-return-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; }
.owo-return-items { margin: 0 0 6px; padding-left: 18px; font-size: 14px; }
.owo-return-facts { margin: 0 0 8px; font-size: 14px; color: var(--ui-text-muted); }
.owo-money-balance { padding: 12px 16px; margin: 0; }
.ui-section:not(.is-flush) > .owo-money-balance { padding: 0; }
.owo-pay-part { margin-top: var(--ui-space-3); font-size: 14px; }
.owo-pay-part > summary { cursor: pointer; color: var(--ui-text-muted); }
.owo-pay-part .ui-form { margin-top: var(--ui-space-2); gap: var(--ui-space-2); }
.pos-sale-money { display: grid; gap: var(--ui-space-4); margin-top: var(--ui-space-4); }
.pos-sale-money .ui-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-2); }
.pos-shift-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-on-graphite-muted); margin-left: 2px; }
.pos-shift-dot.is-open { background: #3ecf8e; }
.pos-shift-dot.is-required { background: #f0b429; }
.pos-shift-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-4); align-items: start; margin-bottom: var(--ui-space-4); }
.pos-shift-open { max-width: 560px; }
.pos-shift-cash fieldset.ui-field { border: 0; padding: 0; margin: 0; }
.pos-shift-cash fieldset.ui-field label { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; }
.pos-shift-cash fieldset.ui-field input { width: auto; min-height: 0; }
.pos-shift-empty { margin: 0; padding: 12px 16px; }
.pos-main .ui-section + .ui-section { margin-top: var(--ui-space-4); }
.qs-split { margin-top: 8px; font-size: 14px; }
.qs-split > summary { cursor: pointer; color: var(--ui-text-muted); }
.qs-split-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 8px 0 4px; }
.qs-split-row select, .qs-split-row input { min-height: var(--ui-control-h); padding: 6px 10px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-sm); font: inherit; font-size: 14px; background: var(--ui-surface); color: var(--ui-text); min-width: 0; }
.qs-split small { color: var(--ui-text-muted); }
.owo-report-filter input[type=date] { height: var(--ui-control-h); padding: 0 10px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-sm); font: inherit; font-size: 14px; background: var(--ui-surface); color: var(--ui-text); }
.owo-report-presets { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.owo-report-metrics .ui-metric strong { font-size: 22px; }
.owo-report-views { margin: 0 0 var(--ui-space-3); }
.owo-report-bar { width: 22%; min-width: 120px; vertical-align: middle; }
.owo-report-bar span { display: block; height: 8px; border-radius: 4px; min-width: 2px; }
.owo-report-bar-sale { background: var(--ui-tone-success-fg, #2f9e6b); }
.owo-report-bar-return { background: var(--ui-tone-warning-fg, #c98a1a); margin-top: 3px; }
.owo-report-legend { margin-top: var(--ui-space-4); font-size: 14px; color: var(--ui-text-muted); }
.owo-report-legend > summary { cursor: pointer; }
.owo-report-legend ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; }
@media (max-width: 760px) {
    .pos-shift-grid { grid-template-columns: minmax(0, 1fr); }
    .owo-report-bar, .owo-report-bar-head { display: none; }
}

/* POS: cash received and the change; the keyboard's hints */
.qs-cash { gap: 8px; }
.qs-cash[hidden] { display: none; }
.qs-cash-field { display: grid; gap: 4px; }
.qs-cash-field input { min-height: var(--ui-control-h); padding: 6px 10px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-sm); font: inherit; font-size: 16px; background: var(--ui-surface); color: var(--ui-text); min-width: 0; width: 100%; box-sizing: border-box; }
.qs-cash-field input[aria-invalid="true"], .qs-cash-field input.has-error { border-color: var(--ui-tone-danger-fg); }
.qs-cash-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; margin: 0; font-size: 14px; }
.qs-cash-facts dt { color: var(--ui-text-muted); }
.qs-cash-facts dd { margin: 0; text-align: right; font-weight: 600; color: var(--ui-graphite); }
.qs-cash-facts .qs-change { font-size: 18px; }
.qs-cash-facts .qs-change.is-short { color: var(--ui-tone-danger-fg); }
.qs-done-facts dd.qs-change { font-size: 22px; }
.qs-keys { margin: -4px 0 0; font-size: 12px; line-height: 1.5; color: var(--ui-text-muted); }
.qs-keys kbd { padding: 0 4px; border: 1px solid var(--ui-border-strong); border-radius: 3px; background: var(--ui-surface); font: inherit; font-size: 11px; }
@media (pointer: coarse) { .qs-keys { display: none; } }