:root {
  --blue: #1553d8;
  --blue-dark: #0f42b0;
  --blue-soft: #eef3fe;
  --ink: #0d1420;
  --ink-2: #3d4756;
  --muted: #7b8696;
  --line: #e3e8ef;
  --line-2: #eef1f6;
  --bg: #f1f4f8;
  --card: #ffffff;
  --ok-bg: #e8f6ed;
  --ok-ink: #10743a;
  --warn-bg: #fef4e2;
  --warn-ink: #96601a;
  --danger-bg: #fdecec;
  --danger-ink: #b3261e;
  --info-bg: #eef3fe;
  --info-ink: #1553d8;
  --mono: "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1500px; margin: 0 auto; padding: 0 28px; }

/* ─── header ─── */
.topbar {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.topbar-in {
  display: flex; align-items: center; gap: 14px;
  height: 64px;
}
.topbar-in > * { flex: none; min-width: 0; }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; }
.logo .mark {
  width: 28px; height: 28px; border-radius: 7px; background: var(--blue);
  color: #fff; display: grid; place-items: center; font-size: 15px;
}
.logo .thin { color: var(--muted); font-weight: 500; }

.btn-catalog {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: #fff; border-radius: 8px;
  padding: 9px 16px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.btn-catalog:hover { border-color: #c9d3e2; text-decoration: none; }

.topsearch { flex: 1 1 160px; min-width: 0; position: relative; }
.topsearch input {
  width: 100%; border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 34px 9px 32px; font-size: 13px; background: #fff;
}
.topsearch .ico { position: absolute; left: 10px; top: 9px; color: var(--muted); }
.topsearch .slash {
  position: absolute; right: 8px; top: 8px; font-family: var(--mono); font-size: 11px;
  color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px;
}

.topstat { font-size: 12px; color: var(--muted); line-height: 1.3; }
.topstat b { display: block; font-size: 15px; color: var(--ink); }

.chip-cart {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 14px;
  color: var(--ink); font-weight: 600; background: #fff;
}
.lang { color: var(--muted); font-size: 13px; }
.lang a { color: var(--muted); }
.lang .on { color: var(--ink); font-weight: 600; }

.who { display: flex; align-items: center; gap: 10px; max-width: 210px; }
.who .av { width: 30px; height: 30px; border-radius: 50%; background: var(--line); flex: none; }
.who > div { min-width: 0; }
.who b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who span { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nav { background: #fff; border-bottom: 1px solid var(--line); }
.nav-in { display: flex; gap: 26px; }
.nav a {
  padding: 13px 0; color: var(--ink-2); font-size: 14px;
  border-bottom: 2px solid transparent; font-weight: 500;
}
.nav a:hover { text-decoration: none; color: var(--ink); }
.nav a.on { color: var(--blue); border-color: var(--blue); font-weight: 600; }
.nav a.admin-link { margin-left: auto; color: var(--muted); }
.nav a.admin-link:hover { color: var(--blue); }

/* ─── auth ─── */
.auth { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 20px; align-items: start; max-width: 1060px; margin: 24px auto; }
.auth > * { min-width: 0; }
@media (max-width: 900px) { .auth { grid-template-columns: minmax(0, 1fr); } }

/* ─── layout ─── */
.page { padding: 24px 0 80px; }
.h1 { font-size: 26px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.3px; }
.h1 .sub { font-size: 14px; font-weight: 400; color: var(--muted); margin-left: 10px; }
.h2 { font-size: 17px; font-weight: 700; margin: 0 0 14px; }
.h1-product { font-size: 23px; }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.crumbs a { color: var(--muted); }
.crumbs b { color: var(--ink); }

.cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.cols-side { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 20px; align-items: start; }
.product-grid { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 20px; align-items: start; }
.cols > *, .cols-side > *, .product-grid > * { min-width: 0; }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0;
}
.card + .card { margin-top: 16px; }
.card-pad { padding: 18px; }
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--line-2);
  flex-wrap: wrap; gap: 10px;
}
.card-head > * { min-width: 0; }
.card-head h3 { margin: 0; font-size: 16px; }
.card-title { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }

/* ─── big search ─── */
.bigsearch {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; display: flex; gap: 12px; box-shadow: var(--shadow);
}
.bigsearch .field { flex: 1; min-width: 0; position: relative; }
.bigsearch input {
  width: 100%; border: 2px solid var(--blue); border-radius: 8px;
  padding: 13px 70px 13px 38px; font-size: 15px;
}
.bigsearch input::placeholder { color: #9aa5b5; }
.bigsearch .ico { position: absolute; left: 13px; top: 14px; color: var(--muted); }
.bigsearch .keys { position: absolute; right: 12px; top: 13px; display: flex; gap: 6px; color: var(--muted); }

/* ─── tiles ─── */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 18px 0; }
.tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles > * { min-width: 0; }
.tile {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; display: flex; gap: 14px; align-items: center; color: var(--ink);
  box-shadow: var(--shadow);
}
.tile:hover { text-decoration: none; border-color: #c9d3e2; }
.tile.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.tile.primary .tile-sub { color: rgba(255,255,255,.8); }
.tile .tile-ico {
  width: 38px; height: 38px; border-radius: 9px; background: var(--blue-soft);
  color: var(--blue); display: grid; place-items: center; flex: none; font-size: 17px;
}
.tile.primary .tile-ico { background: rgba(255,255,255,.18); color: #fff; }
.tile b { display: block; font-size: 15px; }
.tile-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ─── table ─── */
.tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tscroll > .tbl { min-width: 1000px; }
.tscroll.wide > .tbl { min-width: 1240px; }
.tscroll.sm > .tbl { min-width: 420px; }

.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; text-align: left;
  padding: 12px 12px; border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
.tbl td { padding: 14px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .num { text-align: right; white-space: nowrap; }
.tbl tr.row-warn { background: #fffaf0; }
.tbl tr.row-block { background: #fef5f5; }
.tbl tr.row-muted td { opacity: .62; }

.thumb { width: 42px; height: 42px; border-radius: 7px; background: #eef1f6; flex: none; }

.pname { font-weight: 600; line-height: 1.3; }
.pmeta { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.pnote { font-size: 12px; margin-top: 5px; }
.pnote.warn { color: var(--warn-ink); }
.pnote.danger { color: var(--danger-ink); }
.pnote.muted { color: var(--muted); }

/* ─── badges ─── */
.badge {
  display: inline-block; border-radius: 5px; padding: 4px 9px;
  font-family: var(--mono); font-size: 11.5px; white-space: nowrap;
}
.badge.ok { background: var(--ok-bg); color: var(--ok-ink); }
.badge.warn { background: var(--warn-bg); color: var(--warn-ink); }
.badge.danger { background: var(--danger-bg); color: var(--danger-ink); }
.badge.info { background: var(--info-bg); color: var(--info-ink); }
.badge.muted { background: #eef1f6; color: var(--ink-2); }
.badge::before { content: "● "; font-size: 9px; vertical-align: 1px; }
.badge.nodot::before { content: ""; }

.tag {
  display: inline-block; border: 1px solid var(--line); border-radius: 6px;
  padding: 5px 10px; font-size: 12.5px; color: var(--ink-2); background: #fff;
}
.tag .n { color: var(--muted); font-family: var(--mono); font-size: 11px; }

/* ─── price ─── */
.price { font-size: 19px; font-weight: 700; white-space: nowrap; }
.price-unit { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.price-old { color: var(--muted); text-decoration: line-through; font-weight: 400; font-size: 14px; }
.price-new { color: var(--warn-ink); }
.price-personal { color: var(--blue); }

/* ─── qty ─── */
.qty { display: inline-flex; max-width: 100%; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.qty input { min-width: 0; }
.qty.warn { border-color: #e9b563; }
.qty.block { border-color: #e08b86; }
.qty button {
  width: 34px; border: 0; background: #fff; cursor: pointer; font-size: 16px;
  color: var(--ink-2);
}
.qty button:hover { background: var(--line-2); }
.qty button:disabled { color: #c7ced9; cursor: default; background: #fafbfc; }
.qty input {
  width: 58px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  text-align: center; font-weight: 600; font-size: 14px; padding: 8px 0; font-family: var(--mono);
}
.qty .unit {
  display: grid; place-items: center; padding: 0 9px; font-family: var(--mono);
  font-size: 11px; color: var(--muted); background: #fafbfc;
}
.qty-hint { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 5px; }
.qty-hint.warn { color: var(--warn-ink); }
.qty-hint.danger { color: var(--danger-ink); }

/* ─── buttons ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 8px; padding: 9px 16px; font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer;
  white-space: nowrap;
}
.btn:hover { border-color: #c9d3e2; text-decoration: none; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn.danger { color: var(--danger-ink); border-color: #f0c9c6; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--blue); }
.btn.wide { width: 100%; }
.btn.big { padding: 13px 20px; font-size: 15px; }
.btn.sm { padding: 6px 11px; font-size: 12.5px; }
.btn:disabled, .btn.off {
  background: #f3f5f8; border-color: var(--line); color: #a9b2bf; cursor: not-allowed;
}
.btn-x { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 16px; padding: 4px 8px; }

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-col { display: grid; gap: 6px; }

/* ─── alerts ─── */
.alert { border-radius: 9px; padding: 13px 15px; font-size: 13px; line-height: 1.5; }
.alert.info { background: var(--info-bg); color: #10306f; border: 1px solid #d6e1fb; }
.alert.ok { background: var(--ok-bg); color: var(--ok-ink); border: 1px solid #c8e6d4; }
.alert.warn { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid #f1dcb4; }
.alert.danger { background: var(--danger-bg); color: var(--danger-ink); border: 1px solid #f3cdca; }
.alert + .alert { margin-top: 10px; }
.alert b { font-weight: 700; }

/* ─── summary ─── */
.sum-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 13.5px; }
.sum-row .k { color: var(--ink-2); }
.sum-row .v { font-weight: 600; }
.sum-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 13px; margin-top: 8px; border-top: 1px solid var(--line);
}
.sum-total .k { font-weight: 700; font-size: 15px; }
.sum-total .v { font-weight: 700; font-size: 23px; }

.meter { height: 6px; border-radius: 3px; background: var(--line-2); overflow: hidden; margin: 10px 0; }
.meter i { display: block; height: 100%; background: var(--blue); }
.meter i.warn { background: #d98c14; }
.meter i.danger { background: #c2352c; }

/* ─── filters ─── */
.filters label { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 13.5px; cursor: pointer; }
.filters .grp + .grp { margin-top: 18px; }
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chips .chip {
  border: 1px solid var(--line); border-radius: 7px; padding: 6px 11px;
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); background: #fff; cursor: pointer;
}
.chips .chip.on { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }

.toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.toggle a { padding: 7px 15px; font-size: 13px; color: var(--ink-2); }
.toggle a.on { background: var(--blue); color: #fff; }
.toggle a:hover { text-decoration: none; }

.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tabs a {
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 13px;
  font-size: 13px; color: var(--ink-2); background: #fff;
}
.tabs a.on { border-color: var(--blue); color: var(--blue); font-weight: 600; }
.tabs a.warn { border-color: #eccb92; color: var(--warn-ink); }
.tabs a.danger { border-color: #eeb4b0; color: var(--danger-ink); }
.tabs a:hover { text-decoration: none; }

/* ─── status flow ─── */
.flow { display: flex; gap: 2px; margin: 6px 0 18px; }
.flow .step { flex: 1; }
.flow .bar { height: 3px; border-radius: 2px; background: var(--line); }
.flow .step.done .bar { background: var(--blue); }
.flow .step.now .bar { background: #d98c14; }
.flow b { display: block; font-size: 12.5px; margin-top: 8px; }
.flow span { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.flow .step.now b { color: var(--warn-ink); }

/* ─── misc ─── */
.kv { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.kv > div { padding: 13px 15px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kv > div:nth-child(4n) { border-right: 0; }
.kv > div:nth-last-child(-n+4) { border-bottom: 0; }
.kv .k { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.kv .v { font-weight: 700; font-family: var(--mono); font-size: 13.5px; }

.speclist { width: 100%; border-collapse: collapse; table-layout: fixed; }
.speclist td { padding: 11px 14px; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.speclist td:first-child { color: var(--ink-2); }
.speclist td:last-child { font-weight: 600; text-align: left; }

.gallery { display: grid; gap: 10px; }
.gallery .main { aspect-ratio: 1; border-radius: 9px; background: #eef1f6; }
.gallery .thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gallery .thumbs div { aspect-ratio: 1; border-radius: 7px; background: #eef1f6; border: 1px solid transparent; }
.gallery .thumbs div.on { border-color: var(--blue); }

.skeleton { background: #eef1f6; border-radius: 5px; height: 12px; }
.skeleton.w60 { width: 60%; } .skeleton.w40 { width: 40%; } .skeleton.w80 { width: 80%; }

.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.small { font-size: 12px; }
.tiny { font-size: 11px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }
.mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; } .mb16 { margin-bottom: 16px; }
.flex { display: flex; flex-wrap: wrap; } .between { justify-content: space-between; } .center { align-items: center; }
.flex > * { min-width: 0; }
.nowrapflex { flex-wrap: nowrap; }
.gap8 { gap: 8px; } .gap12 { gap: 12px; } .gap16 { gap: 16px; }
.grow { flex: 1; }

textarea, input[type=text], input[type=date], select {
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px;
  font: inherit; width: 100%; background: #fff;
}
textarea { resize: vertical; min-height: 62px; }

.foot-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-top: 1px solid var(--line-2); gap: 14px; flex-wrap: wrap;
}

.bottomnav { display: none; }

/* ─── UI demo ─── */
.demo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.demo-grid.cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.demo-grid > * { min-width: 0; }
.demo-box > * { max-width: 100%; }
.demo-cell .demo-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 9px;
}
.demo-box {
  background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 15px;
  overflow-x: auto;
}
.demo-note { font-size: 12px; color: var(--muted); margin-top: 10px; line-height: 1.5; }
.frozen {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  color: var(--blue); background: var(--blue-soft); padding: 4px 9px; border-radius: 5px;
}

/* ─── mobile ─── */
@media (max-width: 1460px) {
  .topbar-in .topstat.t-orders { display: none; }
}

@media (max-width: 1320px) {
  .topbar-in .topstat { display: none; }
  .who { max-width: 150px; }
}

@media (max-width: 1180px) {
  .tiles, .tiles-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols, .cols-side, .product-grid { grid-template-columns: minmax(0, 1fr); }
  .demo-grid, .demo-grid.cols3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols aside, .cols-side aside { order: 2; }
}

@media (max-width: 1040px) {
  .topbar-in .who > div, .topbar-in .lang { display: none; }
}

@media (max-width: 900px) {
  .topbar-in .btn-catalog span.t-label { display: none; }
}

@media (max-width: 760px) {
  .wrap { padding: 0 14px; }
  .page { padding: 14px 0 78px; }
  .h1 { font-size: 19px; }
  .h1-product { font-size: 18px; }
  .topsearch .slash { display: none; }
  .topsearch input { padding-right: 12px; }
  .h1 .sub { display: block; margin: 4px 0 0; font-size: 12.5px; }

  .topbar-in { height: 52px; gap: 10px; }
  .topbar-in .topstat, .topbar-in .chip-cart, .topbar-in .btn-catalog,
  .topbar-in .who, .topbar-in .lang, .topbar-in .btn.primary { display: none; }
  .topsearch { flex: 1; }
  .nav { display: none; }

  .tiles, .tiles-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile { flex-direction: column; align-items: flex-start; gap: 9px; padding: 13px; }
  .tile b { font-size: 13.5px; }

  .bigsearch { padding: 10px; }
  .bigsearch input { padding: 11px 12px 11px 34px; font-size: 14px; }
  .bigsearch .keys, .bigsearch .btn { display: none; }

  .demo-grid, .demo-grid.cols3 { grid-template-columns: minmax(0, 1fr); }
  .kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kv > div:nth-child(4n) { border-right: 1px solid var(--line); }
  .kv > div:nth-child(2n) { border-right: 0; }

  /* jadval → kartochka */
  .tscroll { overflow-x: visible; }
  .tscroll > .tbl, .tscroll.wide > .tbl, .tscroll.sm > .tbl { min-width: 0; }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl thead { display: none; }
  .tbl tr { border-bottom: 1px solid var(--line-2); padding: 13px 14px; }
  .tbl tr:last-child { border-bottom: 0; }
  .tbl td { border: 0; padding: 4px 0; }
  .tbl td.num { text-align: left; }
  .tbl td[data-k]::before {
    content: attr(data-k); display: block; font-size: 10.5px; letter-spacing: .07em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
  }
  .tbl td.cell-inline { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

  .flow { flex-direction: column; gap: 10px; }
  .flow .bar { height: 3px; }

  .foot-bar { flex-direction: column; align-items: stretch; }
  .foot-bar .btn { width: 100%; }

  .bottomnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: #fff; border-top: 1px solid var(--line); height: 58px;
  }
  .bottomnav a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; font-size: 10.5px; color: var(--muted); position: relative;
  }
  .bottomnav a.on { color: var(--blue); }
  .bottomnav a:hover { text-decoration: none; }
  .bottomnav .ic { font-size: 17px; line-height: 1; }
  .bottomnav .dot {
    position: absolute; top: 7px; right: 50%; margin-right: -20px;
    background: var(--blue); color: #fff; border-radius: 9px; font-size: 10px;
    padding: 1px 5px; font-family: var(--mono);
  }
  .btn { min-height: 44px; }
  .qty button { width: 44px; height: 44px; }
  .qty input { height: 44px; }
}

/* ─────────────── portal additions ─────────────── */
input[type=password], input[type=email], input[type=number], input[type=file], .inp {
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px;
  font: inherit; width: 100%; background: #fff;
}
input[type=file] { padding: 7px; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(21, 83, 216, .18); border-color: var(--blue); }
.logo-img { height: 28px; width: auto; border-radius: 6px; margin-right: 6px; }
a.topstat { color: var(--muted); text-decoration: none; }
a.topstat:hover b { color: var(--blue); }
.bell { position: relative; font-size: 18px; text-decoration: none; padding: 4px; }
.bell .dot { position: absolute; top: -4px; right: -8px; background: var(--danger-ink); color: #fff; font-size: 10px; font-weight: 700; border-radius: 9px; padding: 1px 5px; }

details.who { position: relative; display: block; max-width: 230px; }
details.who > summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; }
details.who > summary::-webkit-details-marker { display: none; }
details.who .av { width: 32px; height: 32px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; font-weight: 700; }
details.who .menu, .dropdown-menu {
  position: absolute; z-index: 60; top: calc(100% + 8px); right: 0; min-width: 230px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgba(16, 24, 40, .14);
  padding: 8px; display: flex; flex-direction: column; gap: 2px;
}
details.who .menu a, .menu-item {
  display: block; padding: 8px 10px; border-radius: 7px; color: var(--ink); font-size: 13.5px; text-align: left;
  background: none; border: 0; font: inherit; cursor: pointer; width: 100%; white-space: normal;
}
details.who .menu a:hover, .menu-item:hover { background: var(--blue-soft); text-decoration: none; }
details.who .menu a.danger { color: var(--danger-ink); }
.dropdown { position: relative; display: inline-block; }
.dropdown > summary { list-style: none; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown-menu { left: 0; right: auto; }
.dropdown-menu.right-menu { left: auto; right: 0; }
.dropdown-menu.wide-menu { min-width: 320px; }
.menu-row { flex-wrap: nowrap; }
.b { font-weight: 700; }
.block { display: block; }

.toasts { position: fixed; z-index: 90; right: 18px; top: 76px; display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.toast { box-shadow: 0 10px 28px rgba(16, 24, 40, .16); display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; transition: opacity .35s, transform .35s; margin: 0 !important; }
.toast.hide { opacity: 0; transform: translateY(-6px); }
.alert.ok { background: var(--ok-bg); color: var(--ok-ink); border-color: #bfe3cc; }

.footer { border-top: 1px solid var(--line); background: #fff; margin-top: 32px; padding: 20px 0 24px; }
.footer-in { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.footer-links { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--blue); cursor: pointer; font: inherit; }
.linkbtn:hover { text-decoration: underline; }
form.inline { display: inline; }

/* search suggest */
.topsearch, .bigsearch .field, .suggest-wrap { position: relative; }
.suggest-box {
  position: absolute; z-index: 70; left: 0; right: 0; top: calc(100% + 6px); background: #fff;
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 36px rgba(16, 24, 40, .16);
  max-height: 460px; overflow: auto; padding: 6px; min-width: 320px;
}
.sg-title { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 4px; }
.sg-item { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; color: var(--ink); align-items: center; }
.sg-item:hover, .sg-item.on { background: var(--blue-soft); text-decoration: none; }
.sg-main { min-width: 0; }
.sg-main b { display: block; font-size: 13.5px; font-weight: 600; }
.sg-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.sg-price { font-weight: 700; font-size: 13.5px; }
.sg-empty { padding: 14px; color: var(--muted); text-align: center; }
.sg-all { width: 100%; border: 0; background: #f6f8fb; padding: 9px; border-radius: 8px; color: var(--blue); font: inherit; font-weight: 600; cursor: pointer; margin-top: 4px; }
.bigsearch .keys .scan-btn { border: 1px solid var(--line); background: #fff; cursor: pointer; }

/* rows & tiles */
.cell-check { width: 30px; }
.tbl tr.row-incart td { background: #f7faff; }
.tbl tr.row-unselected td { opacity: .55; }
.tbl tr.row-current td { background: #f4f7fe; }
.tbl tr.row-info td { background: #f8faff; }
.tbl.bordered { border: 1px solid var(--line); border-radius: 8px; }
.tbl tr.tier-on td { background: var(--blue-soft); font-weight: 700; }
.thumb.img { object-fit: cover; background: #fff; border: 1px solid var(--line-2); }
.thumb { display: grid; place-items: center; color: var(--muted); font-weight: 700; }
.thumb.avatar { border-radius: 50%; background: var(--blue-soft); color: var(--blue); }
.gallery .main, .gallery .thumbs div { overflow: hidden; }
.gallery img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pnote.info { color: var(--info-ink); }
.qty.off { opacity: .55; }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; padding: 16px; }
.ptile { border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; background: #fff; }
.ptile-img { aspect-ratio: 4 / 3; border-radius: 8px; background: #eef1f6; margin-bottom: 10px; overflow: hidden; display: block; }
.ptile-img img { width: 100%; height: 100%; object-fit: contain; }
.ptile .qty { width: auto; }
.ptile .qty input { width: 52px; }
.muted-tile { opacity: .7; }
.empty { text-align: center; padding: 48px 18px; }
.empty-ico, .big-ico { font-size: 30px; color: var(--muted); }
.wrap-row { flex-wrap: wrap; gap: 10px; }
.center-row { justify-content: center; }
.center-text { text-align: center; }
.sel-sm { width: auto; padding: 6px 8px; font-size: 13px; }
.sortbar { flex-wrap: wrap; }
.pager a, .pager b, .pager span { display: inline-block; padding: 2px 6px; }
.pager .cur { background: var(--blue); color: #fff; border-radius: 5px; }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.cat-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; color: var(--ink); margin: 0 !important; }
.cat-card:hover { border-color: var(--blue); text-decoration: none; }
.guest-card { border-color: #d6e1fb; background: var(--blue-soft); }
.guest-card .small { color: #10306f; }

/* product */
.price-box { display: grid; grid-template-columns: minmax(0, 1fr) 320px; padding: 0; }
.price-box > .card-pad { min-width: 0; }
.qty-side { background: #f7f9fc; border-left: 1px solid var(--line); }
.qty-side .qty { width: 100%; }
.qty-side .qty input { flex: 1; min-width: 0; width: auto; }
.big-price { font-size: 38px; }
.sum-line { border-top: 1px solid var(--line); padding-top: 12px; }
.chips button.chip { background: #fff; cursor: pointer; font: inherit; font-size: 12px; }

/* quick order / cart add */
.qo-box { border: 2px solid var(--blue) !important; }
.qo-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; }
.qo-form .qty input { width: 72px; }

/* checkout */
.co-row { display: flex; align-items: center; gap: 18px; padding: 16px 18px; }
.co-row > summary { display: flex; align-items: center; gap: 18px; width: 100%; list-style: none; cursor: pointer; }
.co-row > summary::-webkit-details-marker { display: none; }
details.co-row { display: block; }
.co-k { width: 150px; flex: none; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-family: var(--mono); }
.co-v { flex: 1; min-width: 0; }
.co-v b { font-size: 15px; }
.co-form { margin: 14px 0 0 168px; }
.radio-card { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; cursor: pointer; }
.radio-card:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }
.danger-text { color: var(--danger-ink); }
.issue-list { margin: 8px 0 0; padding-left: 18px; }
.steps-list { margin: 0; padding-left: 20px; line-height: 1.9; }
.btn.outline-blue { border-color: var(--blue); color: var(--blue); }
.btn.outline-blue.primary { background: var(--blue); color: #fff; }
.btn.danger-outline { border-color: #f0c2bf; color: var(--danger-ink); }
.btn.danger-outline:hover { background: var(--danger-bg); }
.btn.ghost { background: #fff; border-color: var(--blue); color: var(--blue); }
.tbl td.was { background: #fafbfc; }
.flow .step.todo b { color: var(--muted); font-weight: 600; }
.flow .step.cancelled .bar { background: var(--danger-ink); }
.flow .step.cancelled b { color: var(--danger-ink); }
.flow .step.warnstep .bar { background: #d98c14; }

/* account */
.side-links { display: flex; flex-direction: column; gap: 2px; }
.side-links a { padding: 9px 12px; border-radius: 8px; color: var(--ink); font-weight: 600; font-size: 13.5px; }
.side-links a:hover { background: #f4f6fa; text-decoration: none; }
.side-links a.on { background: var(--blue-soft); color: var(--blue); }
.block-tile { display: block !important; }
.notif { display: flex; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line-2); color: var(--ink); }
.notif:hover { background: #f8fafc; text-decoration: none; }
.notif.unread { background: #f5f8ff; }
.notif.unread b::before { content: "● "; color: var(--blue); }
.num-inp { width: 100px; }

/* forms */
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
.field .req { color: var(--danger-ink); }
.field-help { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.field-err { font-size: 12px; color: var(--danger-ink); margin-top: 4px; }
.field.has-err input, .field.has-err select { border-color: var(--danger-ink); }
.field-check { display: flex; gap: 8px; align-items: center; margin: 8px 0; font-size: 13.5px; }
.field-check input { width: auto; }
.form-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.form-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.cols-2 > .card + .card { margin-top: 0; }
.auth-wide { grid-template-columns: minmax(0, 620px) minmax(0, 1fr); }
.benefits { margin: 0; padding-left: 18px; line-height: 2; }
.narrow { max-width: 640px; margin: 40px auto; }

/* scanner */
.scanner { position: fixed; inset: 0; z-index: 100; background: rgba(13, 20, 32, .6); display: grid; place-items: center; padding: 16px; }
.scanner[hidden] { display: none; }
.scanner-box { width: min(480px, 100%); overflow: hidden; }
.scanner video { width: 100%; display: block; background: #000; aspect-ratio: 4 / 3; object-fit: cover; }

@media (max-width: 1180px) {
  .price-box { grid-template-columns: minmax(0, 1fr); }
  .qty-side { border-left: 0; border-top: 1px solid var(--line); }
  .topbar-in .t-reg { display: none; }
}
@media (max-width: 900px) {
  .form-3 { grid-template-columns: minmax(0, 1fr); }
  .cols-2, .auth-wide { grid-template-columns: minmax(0, 1fr); }
  .co-form { margin-left: 0; }
  .co-k { width: 110px; }
}
@media (max-width: 760px) {
  .form-2 { grid-template-columns: minmax(0, 1fr); }
  .qo-form { grid-template-columns: minmax(0, 1fr); }
  .co-row, .co-row > summary { flex-wrap: wrap; gap: 8px; }
  .co-k { width: 100%; }
  .toasts { left: 12px; right: 12px; top: 64px; max-width: none; }
  .footer { padding-bottom: 90px; }
  .topbar-in .bell { display: inline-block; }
  .dropdown-menu.wide-menu { min-width: 260px; }
  .suggest-box { min-width: 0; }
  .big-price { font-size: 30px; }
}
.topsearch input[type=text] { padding: 9px 34px 9px 32px; font-size: 13px; }
.bigsearch .field input[type=text] { border: 2px solid var(--blue); padding: 13px 76px 13px 38px; font-size: 15px; }
.qty input[type=text], .qty input { border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-radius: 0; padding: 8px 0; width: 58px; }
.qty .unit { border-left: 1px solid var(--line); }
.qty-side .qty input { flex: 1; width: auto; }
.qo-form .qty input { width: 72px; }
.ptile .qty input { width: 52px; }
@media (max-width: 760px) {
  .topsearch input[type=text] { padding-right: 12px; }
  .bigsearch .field input[type=text] { padding: 11px 12px 11px 34px; font-size: 14px; }
}
.qty { flex-wrap: nowrap; white-space: nowrap; }
.qty > button, .qty > .unit { flex: none; }
.qty > input { flex: 0 1 auto; }
@media (max-width: 760px) {
  .topbar-in details.who { display: block; }
  .topbar-in details.who > summary > div:not(.av) { display: none; }
  .topbar-in .lang { display: inline; font-size: 12px; }
  details.who .menu { right: -8px; }
  .tbl td.cell-check { display: block; padding-bottom: 0; }
}
@media (max-width: 1040px) {
  .topbar-in .lang { display: inline; }
  .topbar-in details.who > summary > div:not(.av) { display: none; }
}
.auth > .card + .card { margin-top: 0; }

.kv.kv-2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kv.kv-2 > div { border-bottom: 0; }
.kv.kv-2 > div:nth-child(3) { border-right: 0; }
.nav-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--blue); z-index: 200; opacity: 0; transition: width .4s ease, opacity .3s; pointer-events: none; }
.nav-progress.on { width: 80%; opacity: 1; transition: width 8s cubic-bezier(.1,.7,.2,1), opacity .1s; }


/* ═════════════ responsive layer ═════════════ */
:root { --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "JetBrains Mono", Consolas, monospace; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; }
.tscroll { container-type: inline-size; }
.show-compact { display: none; }
.chip-cart .chip-count { display: none; }
.topbar-in { gap: 12px; }
.topbar-in .topsearch { flex: 1 1 200px; }
.tbl td.c-act { white-space: nowrap; }
.tbl td.c-act .btn-row { flex-wrap: nowrap; justify-content: flex-end; }

@media (max-width: 1280px) {
  .topbar-in .topstat { display: none; }
}
@media (max-width: 1180px) {
  .chip-cart .chip-text { display: none; }
  .chip-cart .chip-count:not([hidden]) { display: inline; font-family: var(--mono); }
}
@media (max-width: 1000px) {
  .topbar-in .t-quick .t-label, .topbar-in .btn-catalog .t-label { display: none; }
  .topbar-in .t-quick { padding: 9px 13px; }
  .nav-in { gap: 18px; overflow-x: auto; scrollbar-width: none; }
  .nav-in::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; }
}
@media (max-width: 760px) {
  .topbar-in { flex-wrap: wrap; height: auto; padding-top: 8px; padding-bottom: 10px; row-gap: 8px; column-gap: 12px; }
  .topbar-in .logo { margin-right: auto; }
  .topbar-in .topsearch { order: 10; flex: 1 1 100%; }
  .topbar-in .topsearch input[type=text] { padding: 10px 12px 10px 32px; font-size: 14px; }
  .topbar-in .topsearch .ico { top: 10px; }
  .toasts { top: 112px; }
  .tbl td.c-act .btn-row { flex-wrap: wrap; justify-content: flex-start; }
}

@container (max-width: 980px) {
  .tscroll > .tbl.ptbl:not(.ptbl-wide) { min-width: 0 !important; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) thead { display: none; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide), .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody { display: block; width: 100%; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; row-gap: 10px; position: relative; padding: 14px 16px 14px 100px; min-height: 72px; border-bottom: 1px solid var(--line-2); }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr:last-child { border-bottom: 0; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr:not(:has(> td.c-check)) { padding-left: 72px; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr:not(:has(> td.c-thumb)) { padding-left: 66px; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr:not(:has(> td.c-check)):not(:has(> td.c-thumb)) { padding-left: 16px; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr > td { display: block; width: auto !important; padding: 0; border: 0; background: transparent !important; text-align: left; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr > td::before { content: none !important; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr > td.c-check { position: absolute; left: 16px; top: 16px; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr > td.c-thumb { position: absolute; left: 44px; top: 14px; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr:not(:has(> td.c-check)) > td.c-thumb { left: 16px; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr > td.c-main { flex: 1 1 100%; padding-right: 30px; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr > td.c-hide { display: none; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) span.show-compact { display: inline; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) div.show-compact { display: block; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr > td.c-stock { flex: 0 0 auto; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr > td.c-price { flex: 0 0 auto; min-width: 96px; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr > td.c-price .price { font-size: 17px; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr > td.c-sum { margin-left: auto; text-align: right; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr > td.c-act { flex: 0 0 auto; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr > td.c-act .btn-col { display: flex; flex-wrap: wrap; gap: 6px; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr > td.c-x { position: absolute; right: 8px; top: 10px; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr > td[colspan] { flex: 1 1 100%; text-align: center; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr.row-incart, .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr.row-current, .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr.row-info { background: #f7faff; }
}

@container (max-width: 1140px) {
  .tscroll > .tbl.ptbl.ptbl-wide { min-width: 0 !important; }
  .tscroll > .tbl.ptbl.ptbl-wide thead { display: none; }
  .tscroll > .tbl.ptbl.ptbl-wide, .tscroll > .tbl.ptbl.ptbl-wide > tbody { display: block; width: 100%; }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; row-gap: 10px; position: relative; padding: 14px 16px 14px 100px; min-height: 72px; border-bottom: 1px solid var(--line-2); }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr:last-child { border-bottom: 0; }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr:not(:has(> td.c-check)) { padding-left: 72px; }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr:not(:has(> td.c-thumb)) { padding-left: 66px; }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr:not(:has(> td.c-check)):not(:has(> td.c-thumb)) { padding-left: 16px; }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr > td { display: block; width: auto !important; padding: 0; border: 0; background: transparent !important; text-align: left; }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr > td::before { content: none !important; }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr > td.c-check { position: absolute; left: 16px; top: 16px; }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr > td.c-thumb { position: absolute; left: 44px; top: 14px; }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr:not(:has(> td.c-check)) > td.c-thumb { left: 16px; }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr > td.c-main { flex: 1 1 100%; padding-right: 30px; }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr > td.c-hide { display: none; }
  .tscroll > .tbl.ptbl.ptbl-wide span.show-compact { display: inline; }
  .tscroll > .tbl.ptbl.ptbl-wide div.show-compact { display: block; }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr > td.c-stock { flex: 0 0 auto; }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr > td.c-price { flex: 0 0 auto; min-width: 96px; }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr > td.c-price .price { font-size: 17px; }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr > td.c-sum { margin-left: auto; text-align: right; }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr > td.c-act { flex: 0 0 auto; }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr > td.c-act .btn-col { display: flex; flex-wrap: wrap; gap: 6px; }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr > td.c-x { position: absolute; right: 8px; top: 10px; }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr > td[colspan] { flex: 1 1 100%; text-align: center; }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr.row-incart, .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr.row-current, .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr.row-info { background: #f7faff; }
}

@container (max-width: 600px) {
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr { padding: 14px 14px 14px 70px; column-gap: 12px; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr:not(:has(> td.c-thumb)) { padding-left: 58px; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr:not(:has(> td.c-check)):not(:has(> td.c-thumb)) { padding-left: 14px; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr > td.c-check { left: 14px; top: 14px; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr > td.c-thumb { left: 14px; top: 42px; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr:not(:has(> td.c-check)) > td.c-thumb { top: 14px; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr > td.c-thumb .thumb { width: 44px; height: 44px; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr > td.c-stock, .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr > td.c-status { flex: 1 1 100%; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr > td.c-price { flex: 1 1 auto; min-width: 0; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr > td.c-qty { margin-left: auto; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr > td.c-sum { flex: 1 1 40%; margin-left: 0; text-align: left; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr > td.c-act { margin-left: auto; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr > td.c-act > .btn { min-width: 128px; }

  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr { padding: 14px 14px 14px 70px; column-gap: 12px; }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr:not(:has(> td.c-thumb)) { padding-left: 58px; }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr:not(:has(> td.c-check)):not(:has(> td.c-thumb)) { padding-left: 14px; }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr > td.c-check { left: 14px; top: 14px; }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr > td.c-thumb { left: 14px; top: 42px; }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr:not(:has(> td.c-check)) > td.c-thumb { top: 14px; }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr > td.c-thumb .thumb { width: 44px; height: 44px; }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr > td.c-stock, .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr > td.c-status { flex: 1 1 100%; }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr > td.c-price { flex: 1 1 auto; min-width: 0; }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr > td.c-qty { margin-left: auto; }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr > td.c-sum { flex: 1 1 40%; margin-left: 0; text-align: left; }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr > td.c-act { margin-left: auto; }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr > td.c-act > .btn { min-width: 128px; }
}

@container (max-width: 1140px) {
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr > td.c-stock { flex: 1 1 auto; }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr > td.c-sum { margin-left: 0; min-width: 90px; }
}
@container (max-width: 980px) {
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr > td.c-stock { flex: 1 1 auto; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr > td.c-sum { margin-left: 0; min-width: 90px; }
}
@container (max-width: 600px) {
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr > td.c-stock,
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr > td.c-stock { flex: 1 1 100%; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr > td.c-sum,
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr > td.c-sum { flex: 1 1 40%; }
}
@media (max-width: 760px) {
  .home-search { display: none; }
}

.qty.block, .qty.warn, .qty.off { display: inline-flex; }
@container (max-width: 980px) {
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr > td.c-sum::before { content: attr(data-k) ": " !important; font-size: 12.5px; color: var(--muted); font-weight: 400; }
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr > td.c-act:has(> span.muted:only-child) { display: none; }
}
@container (max-width: 1140px) {
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr > td.c-sum::before { content: attr(data-k) ": " !important; font-size: 12.5px; color: var(--muted); font-weight: 400; }
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr > td.c-act:has(> span.muted:only-child) { display: none; }
}
@media (max-width: 760px) {
  .btn.sm { min-height: 36px; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -2px; padding-bottom: 2px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a, .tabs .btn { flex: none; white-space: nowrap; }
}
@media (max-width: 760px) {
  .bulkbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .bulkbar::-webkit-scrollbar { display: none; }
  .bulkbar > * { flex: none; }
  .bulkbar .btn, .page-actions .btn { min-height: 36px; padding: 7px 12px; font-size: 12.5px; }
}

@container (max-width: 940px) {
  .tscroll > .tbl.otbl { min-width: 0 !important; }
  .tscroll > .tbl.otbl thead { display: none; }
  .tscroll > .tbl.otbl, .tscroll > .tbl.otbl > tbody { display: block; width: 100%; }
  .tscroll > .tbl.otbl > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 6px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
  .tscroll > .tbl.otbl > tbody > tr:last-child { border-bottom: 0; }
  .tscroll > .tbl.otbl > tbody > tr > td { display: block; width: auto; padding: 0; border: 0; text-align: left; }
  .tscroll > .tbl.otbl > tbody > tr > td::before { content: none !important; }
  .tscroll > .tbl.otbl > tbody > tr > td.o-no { flex: 1 1 auto; font-size: 15px; }
  .tscroll > .tbl.otbl > tbody > tr > td.o-status { flex: 0 0 auto; }
  .tscroll > .tbl.otbl > tbody > tr > td.o-date { flex: 0 0 auto; color: var(--muted); font-size: 12.5px; }
  .tscroll > .tbl.otbl > tbody > tr > td.o-lines { flex: 1 1 auto; color: var(--muted); font-size: 12.5px; }
  .tscroll > .tbl.otbl > tbody > tr > td.o-lines::before { content: "· " !important; }
  .tscroll > .tbl.otbl .show-compact { display: inline; }
  .tscroll > .tbl.otbl > tbody > tr > td.o-deliv, .tscroll > .tbl.otbl > tbody > tr > td.o-pay { flex: 1 1 100%; }
  .tscroll > .tbl.otbl > tbody > tr > td.o-sum { flex: 1 1 auto; font-size: 18px; margin-top: 4px; }
  .tscroll > .tbl.otbl > tbody > tr > td.o-act { flex: 0 0 auto; margin-top: 4px; }
  .tscroll > .tbl.otbl > tbody > tr > td[colspan] { flex: 1 1 100%; text-align: center; }
  .tscroll > .tbl.otbl > tbody > tr.row-current { background: #f7faff; }
}
@container (max-width: 520px) {
  .tscroll > .tbl.otbl > tbody > tr > td.o-act { flex: 1 1 100%; }
  .tscroll > .tbl.otbl > tbody > tr > td.o-act .btn-row { flex-wrap: wrap; }
}
@container (max-width: 980px) {
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr > td.c-sum::before { display: inline !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0 !important; }
}
@container (max-width: 1140px) {
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr > td.c-sum::before { display: inline !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0 !important; }
}
@media (max-width: 760px) {
  .tscroll > .tbl:not(.ptbl):not(.otbl) td[data-k] { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-align: right; }
  .tscroll > .tbl:not(.ptbl):not(.otbl) td[data-k]::before { display: inline; margin: 0; flex: none; text-align: left; }
  .tscroll > .tbl:not(.ptbl):not(.otbl) td[data-k]:has(.pname) { display: block; text-align: left; }
  .tscroll > .tbl:not(.ptbl):not(.otbl) td[data-k]:has(.pname)::before { display: block; margin-bottom: 3px; }
  .tscroll > .tbl.otbl > tbody > tr > td.o-lines::before { display: inline; }
}
@media (max-width: 760px) {
  .tiles.tiles-3 { grid-template-columns: minmax(0, 1fr); }
  .tiles.tiles-3 .tile .price { font-size: 24px !important; }
  .tbl:not(.ptbl):not(.otbl) td[data-k] { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-align: right; }
  .tbl:not(.ptbl):not(.otbl) td[data-k]::before { display: inline; margin: 0; flex: none; text-align: left; }
  .tbl:not(.ptbl):not(.otbl) td[data-k]:has(.pname) { display: block; text-align: left; }
  .tbl:not(.ptbl):not(.otbl) td[data-k]:has(.pname)::before { display: block; margin-bottom: 3px; }
}
@container (max-width: 940px) {
  .tscroll > .tbl.otbl > tbody > tr > td { background: transparent !important; }
}
.filters-details > summary { list-style: none; cursor: default; pointer-events: none; display: flex; justify-content: space-between; align-items: center; }
.filters-details > summary::-webkit-details-marker { display: none; }
.filters-chev { display: none; }
@media (max-width: 1180px) {
  .cols-side > aside.filters { order: 0; }
  .filters.card-pad { padding: 12px 16px; }
  .filters-details > summary { pointer-events: auto; cursor: pointer; margin: 0; padding: 4px 0; font-size: 12px; }
  .filters-chev { display: inline; font-size: 14px; transition: transform .2s; }
  .filters-details[open] .filters-chev { transform: rotate(180deg); }
  .filters-details[open] > summary { margin-bottom: 12px; }
}
@container (max-width: 980px) {
  .tscroll > .tbl.ptbl:not(.ptbl-wide) > tbody > tr > td.c-act { margin-left: auto; }
}
@container (max-width: 1140px) {
  .tscroll > .tbl.ptbl.ptbl-wide > tbody > tr > td.c-act { margin-left: auto; }
}
.tscroll.sm > .tbl { min-width: 0; }