/* Страницы аккаунта, заказа и админки — поверх основной темы */

/* ---------- кремовая тема внутренних страниц ---------- */
body.inner{
  color-scheme:light;
  --bg:#EFE4DD;            /* приглушённый фон, не бьёт в глаза */
  --surface:#FAF4F0;       /* панели чуть светлее фона, но не белые */
  --surface-2:#E6D6CD;
  --ink:#000000;           /* чёрный текст — максимальный контраст */
  --ink-soft:#14090A;
  --ink-faint:#2A1A1B;
  --line:#DCC7BE;
  --accent:#95423A;
  --accent-ink:#FFF8F6;
  --accent-tint:#F3DCD5;
  --ok:#2A6E42;
  --warn:#8A5010;
  --gild:#9A6A2E;
  --shadow:0 1px 2px rgba(60,36,34,.06), 0 10px 24px rgba(60,36,34,.10);
}
body.inner .drop{background:#FAF4F0;border-color:#D6BEB4}
body.inner .btn-ghost{background:transparent;color:var(--ink);border-color:#CDB3A8}
body.inner .btn-ghost:hover{background:rgba(36,20,22,.06);border-color:var(--ink-soft)}
body.inner .tab{background:#FAF4F0}
body.inner .tab.on{background:var(--ink);color:#F6EDE8;border-color:var(--ink)}
body.inner .pill.done{color:#2F7A4A;border-color:#2F7A4A}
body.inner .pill.paid{color:#B27F41;border-color:#B27F41}
body.inner .pill.delayed{color:#9A5A12;border-color:#9A5A12}
body.inner .pill.cancelled{color:#2A1A1B;border-color:#CDB3A8}
body.inner .msg.ok{background:rgba(42,110,66,.12);color:#1E5734;border-color:#6FA886}
body.inner .msg.info{background:#E8D8CF;color:var(--ink-soft);border-color:var(--line)}
body.inner .placeholder{background:rgba(36,20,22,.08);color:var(--ink-soft)}
body.inner .field input,
body.inner .field textarea,
body.inner .rev-form textarea,
body.inner .search input[type=search]{background:#FDF8F5;border-color:#D6BEB4;color:var(--ink)}
body.inner input[type=file]{color:var(--ink-soft)}
/* карточка оплаты на светлом фоне: мягче тень, заметнее рамка */
body.inner .pay-box{
  border-color:#D9C0B6;
  box-shadow:0 8px 22px rgba(60,36,34,.14);
}
/* шапка и подвал */
body.inner .brand .name{color:var(--ink)}
body.inner header.site{border-bottom-color:#DCC7BE}
body.inner footer.site{border-top-color:#DCC7BE;background:#E8DBD3}
body.inner .acc-link{border-color:#CDB3A8;color:var(--ink-soft)}
body.inner .acc-link:hover{color:var(--ink);border-color:var(--ink-soft)}


.acc-link{
  font-size:12.5px;font-weight:600;text-decoration:none;color:var(--ink-soft);
  border:1px solid var(--line);padding:9px 14px;border-radius:999px;white-space:nowrap;
}
.acc-link:hover{color:var(--ink);border-color:var(--ink-soft)}

.page{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px;padding-block:clamp(28px,5vw,52px) 40px}
.page.narrow{max-width:520px}
.page h1{font-size:clamp(30px,5.5vw,44px);margin-bottom:6px}
.page .sub{color:var(--ink-soft);font-size:14.5px;margin-bottom:22px;max-width:60ch}

.panel{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;display:flex;flex-direction:column;gap:14px;
}
.panel + .panel{margin-top:14px}
.panel h2{font-size:22px}
.panel h3{font-size:15px}

.msg{border-radius:10px;padding:11px 14px;font-size:13.5px;line-height:1.45}
.msg.err{background:var(--accent-tint);color:var(--accent);border:1px solid var(--accent)}
.msg.ok{background:rgba(143,196,159,.14);color:var(--ok);border:1px solid var(--ok)}
.msg.info{background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--line)}

.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.muted{color:var(--ink-faint);font-size:12.5px}
.link{color:var(--accent);font-weight:600;text-decoration:none;border-bottom:1px solid transparent}
.link:hover{border-color:currentColor}

/* карточки статистики */
.tiles{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){ .tiles{grid-template-columns:repeat(4,minmax(0,1fr))} }
.tile{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;display:flex;flex-direction:column;gap:4px;
}
.tile .k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);font-weight:700}
.tile .v{font-family:var(--font-display);font-size:30px;line-height:1;font-variant-numeric:tabular-nums}
.tile .n{font-size:11.5px;color:var(--ink-faint)}
.tile.accent .v{color:var(--accent)}

/* список заказов */
.orders{display:flex;flex-direction:column;gap:10px}
.order{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;
  text-decoration:none;color:inherit;
}
.order:hover{border-color:var(--ink-soft)}
.order .no{font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.order .who{font-size:13px;color:var(--ink-soft);flex:1 1 180px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.order .sum{font-weight:700;font-size:14.5px;font-variant-numeric:tabular-nums}
.order .when{font-size:11.5px;color:var(--ink-faint)}

/* строка заказа с крестиком справа */
.orow{position:relative;display:flex}
.orow > .order{flex:1 1 auto;min-width:0;padding-right:52px}
.o-del{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  height:26px;min-width:26px;padding:0;cursor:pointer;
  font:inherit;font-size:17px;line-height:1;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface);color:var(--ink-faint);
  border:1px solid var(--line);border-radius:7px;
  transition:background .15s ease, color .15s ease;
}
.o-del:hover{color:#9A3026;border-color:#C8958C}
.o-del.armed{
  padding:0 10px;font-size:11.5px;font-weight:700;
  background:#9A3026;color:#FFF5F3;border-color:#9A3026;
}

/* опасное действие — отдельной панелью, чтобы не нажать случайно */
.panel.danger{border-color:#C8958C}
.panel.danger h2{color:#9A3026}
.btn-danger{
  background:transparent;color:#9A3026;border:1px solid #C8958C;
}
.btn-danger:hover{background:#9A3026;color:#FFF5F3;border-color:#9A3026}
.btn-danger.armed{background:#9A3026;color:#FFF5F3;border-color:#9A3026}

.pill{
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;border:1px solid;white-space:nowrap;
}
.pill.new{color:var(--accent);border-color:var(--accent);background:var(--accent-tint)}
.pill.done{color:var(--ok);border-color:var(--ok);background:transparent}
.pill.cancelled{color:var(--ink-faint);border-color:var(--line)}
.pill.paid{color:var(--gild);border-color:var(--gild)}
.pill.delayed{color:var(--warn);border-color:var(--warn);background:transparent}
/* «Ждём оплату» — отдельным цветом, чтобы клиент не решил, что всё уже оплачено */
.pill.new.wait{color:var(--gild);border-color:var(--gild);background:transparent}
.pill.date{color:var(--c-teal, #5FD3CC);border-color:currentColor;background:transparent}
/* статус в подзаголовке страницы заказа */
.page .sub .pill{vertical-align:middle;margin-left:2px}

/* квитанция в админке */
.receipt-view{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
.receipt-view img{display:block;width:100%;max-height:60vh;object-fit:contain;background:var(--surface-2)}

/* разделитель «или» на страницах входа */
.or-line{
  display:flex;align-items:center;gap:10px;
  font-size:11.5px;color:var(--ink-faint);margin:2px 0;
}
.or-line::before,.or-line::after{content:"";flex:1;height:1px;background:var(--line)}

/* кнопка входа через Mail.ru */
.btn-mailru{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:#0F5FE8;color:#FFFFFF;border:1px solid #0F5FE8;
  border-radius:999px;padding:12px 20px;font-size:14px;font-weight:600;
  text-decoration:none;
}
.btn-mailru:hover{background:#0B4EC4;border-color:#0B4EC4;color:#FFFFFF}
.btn-mailru svg{width:18px;height:18px;flex:0 0 auto}

/* ---------- личный кабинет ---------- */
.page.acc{padding-block:20px 26px}
.page.acc h1{font-size:clamp(23px,4.4vw,32px);margin-bottom:12px}
.acc-h{font-size:15px;font-weight:600;margin:0 0 8px;color:var(--ink-soft)}

.acc-card{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:12px 14px;margin-bottom:16px;
}
.ava{
  flex:0 0 auto;width:42px;height:42px;border-radius:999px;
  background:var(--accent-tint);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;letter-spacing:.03em;
}
.acc-t{display:flex;flex-direction:column;gap:1px;min-width:0;margin-right:auto}
.acc-t b{font-size:15px;line-height:1.2}
.acc-t > span{font-size:12px;color:var(--ink-faint);overflow-wrap:anywhere}
.acc-nums{display:flex;gap:16px}
.acc-nums > span{
  display:flex;flex-direction:column;gap:0;
  font-size:10.5px;color:var(--ink-faint);line-height:1.3;
}
.acc-nums b{font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.15}
@media (max-width:480px){
  .acc-card{gap:10px}
  .acc-nums{flex-basis:100%;border-top:1px solid var(--line);padding-top:8px;gap:20px}
}

/* компактные строки заказов в кабинете */
.page.acc .orders{gap:6px}
.page.acc .order{padding:10px 12px;gap:5px 10px;border-radius:11px}
.page.acc .order .no{font-size:12.5px}
.page.acc .order .when{font-size:11px;margin-left:auto}
.page.acc .order .sum{font-size:13.5px}
.page.acc .pill{font-size:9.5px;padding:3px 8px}

/* разделы кабинета — списком, один под другим */
.acc-menu{display:flex;flex-direction:column;gap:6px;margin-top:18px}
.acc-menu a{
  display:flex;align-items:center;gap:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:11px;
  padding:11px 14px;font-size:13.5px;font-weight:600;
  color:var(--ink);text-decoration:none;
}
.acc-menu a::after{
  content:"›";margin-left:auto;font-size:19px;line-height:1;
  color:var(--ink-faint);font-weight:400;
}
.acc-menu a:hover{border-color:var(--ink-soft)}

/* выход — заметная кнопка, но отдельно от всего и с подтверждением */
.btn-logout{
  margin-top:16px;width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:1.5px solid var(--accent);color:var(--accent);background:transparent;
  border-radius:999px;padding:12px 20px;
  font-size:14px;font-weight:700;text-decoration:none;
  transition:background .15s ease, color .15s ease;
}
.btn-logout svg{width:18px;height:18px;flex:0 0 auto}
.btn-logout:hover{background:var(--accent);color:var(--accent-ink)}
.btn-logout:active{transform:translateY(1px)}

/* список отзывов на отдельной странице */
.rev-list{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.rev-list .rev{background:var(--surface);border:1px solid var(--line);border-radius:12px}

/* форма отзыва */
.rev-form{display:flex;flex-direction:column;gap:10px}
.rev-form textarea{
  font:inherit;font-size:14px;color:var(--ink);background:var(--surface-2);
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  min-height:96px;resize:vertical;width:100%;
}
.rev-form textarea:focus{outline:none;border-color:var(--accent)}
/* звёзды: рисуем справа налево, чтобы подсвечивались слева */
.rate{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.rate input{position:absolute;opacity:0;width:0;height:0}
.rate label{
  font-size:26px;line-height:1;color:var(--line);cursor:pointer;
  transition:color .12s ease;
}
.rate label:hover, .rate label:hover ~ label,
.rate input:checked ~ label{color:var(--gild)}
.rate input:focus-visible + label{outline:2px solid var(--accent);border-radius:4px}

/* отзывы в админке */
.rev-admin{display:flex;flex-direction:column;gap:7px}
.rev-admin .rev{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:10px 12px}
.rev-admin form{margin:0}
.rev-admin .del{
  border:1px solid var(--line);background:transparent;color:var(--ink-faint);
  border-radius:999px;padding:4px 11px;font-size:11.5px;font-weight:600;font-family:inherit;
}
.rev-admin .del:hover{color:var(--accent);border-color:var(--accent)}
.rev-admin .rev header time{margin-left:0}
.rev-admin .rev header .sp{margin-left:auto}

/* поиск по заказам */
.search{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:18px 0 12px}
.search input[type=search]{
  flex:1 1 280px;min-width:0;font:inherit;font-size:13.5px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  border-radius:999px;padding:10px 18px;-webkit-appearance:none;appearance:none;
}
.search input[type=search]:focus{outline:none;border-color:var(--accent)}
.search input[type=search]::placeholder{color:var(--ink-faint)}
.search input[type=search]::-webkit-search-cancel-button{filter:invert(1);opacity:.5}
.search .btn{padding:10px 20px;font-size:13px}

/* таб-фильтр */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.tab{
  border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);
  border-radius:999px;padding:9px 16px;font-size:13px;font-weight:600;text-decoration:none;
}
.tab.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* детали заказа */
.dl{display:flex;flex-direction:column;gap:7px}
.dl .r{display:flex;flex-wrap:wrap;gap:1px 12px;font-size:13.5px;align-items:baseline}
.dl .r dt{color:var(--ink-faint);flex:0 0 104px;font-size:11.5px;line-height:1.5}
.dl .r dd{
  margin:0;flex:1 1 190px;min-width:0;line-height:1.4;
  overflow-wrap:anywhere;word-break:normal;
}
/* длинные значения — почта, адрес — чуть мельче и без разрыва посреди слова */
.dl .r dd.long{font-size:13px;letter-spacing:-.005em}
@media (max-width:420px){
  .dl .r dt{flex-basis:92px;font-size:11px}
  .dl .r dd{font-size:13px}
}
.items{display:flex;flex-direction:column;gap:8px}
.items .it{display:flex;gap:10px;font-size:13.5px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.items .it:last-child{border-bottom:0}
.items .it .q{color:var(--ink-faint);white-space:nowrap}
.items .it .s{margin-left:auto;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}

/* Светлая карточка оплаты — выделяется на тёмном фоне страницы */
.pay-box{
  --sber:#1FA14A;            /* зелёный цвет банка */
  --pb-ink:#2A191C;
  --pb-soft:#6E585C;
  --pb-line:#E7D6CF;
  position:relative;overflow:hidden;
  background:linear-gradient(158deg, #FFFFFF 0%, #FDF4EF 55%, #FBEDE6 100%);
  border:1px solid var(--pb-line);border-radius:16px;
  box-shadow:0 10px 26px rgba(12,6,8,.28);
  padding:15px 16px 14px;display:flex;flex-direction:column;gap:12px;
  color:var(--pb-ink);
}
.pay-head{display:flex;align-items:center;gap:11px}
.pay-ico{
  flex:0 0 auto;width:38px;height:38px;border-radius:12px;
  background:var(--sber);color:#FFFFFF;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(31,161,74,.34);
}
.pay-ico svg{width:21px;height:21px;display:block}
.pay-head-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.pay-head-t b{font-size:13.5px;font-weight:700;line-height:1.25;color:var(--pb-ink)}
.pay-head-t > span{font-size:11.5px;color:var(--pb-soft);letter-spacing:.04em}
.pay-head-t .bank{color:var(--sber);font-weight:700;font-size:12px;letter-spacing:.01em}

.pay-num-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pay-num{
  font-size:clamp(23px,6.4vw,30px);font-weight:700;line-height:1.05;
  letter-spacing:.01em;font-variant-numeric:tabular-nums;
  color:var(--pb-ink);white-space:nowrap;
}
.pay-num-row .copybtn{
  margin-left:auto;border-color:var(--sber);color:var(--sber);
  background:rgba(31,161,74,.08);padding:6px 14px;font-size:12.5px;
}
.pay-num-row .copybtn:hover{background:var(--sber);color:#FFFFFF}

.pay-meta{
  display:flex;flex-wrap:wrap;gap:3px 16px;
  font-size:12px;color:var(--pb-soft);
  border-top:1px solid var(--pb-line);padding-top:10px;
}
.pay-meta b{color:var(--pb-ink);font-weight:600}
@media (max-width:420px){
  .pay-num-row .copybtn{margin-left:0}
}
.drop{
  border:1px dashed var(--line);border-radius:12px;padding:18px;text-align:center;
  font-size:13.5px;color:var(--ink-soft);background:var(--surface);
}
.drop input[type=file]{margin-top:10px;font:inherit;font-size:12.5px;width:100%}

.btn-row{display:flex;gap:10px;flex-wrap:wrap}

/* предзаказ */
.badge.pre{
  color:var(--gild);border-color:var(--gild);
  background:var(--surface);font-weight:700;
}
.pre-note{
  font-size:10.5px;color:var(--gild);font-weight:600;
  letter-spacing:.02em;line-height:1.3;
}
.add.add-pre{
  border-color:var(--gild);color:var(--gild);
}
.add.add-pre:hover{background:var(--gild);color:#2B1B0A;border-color:var(--gild)}

/* ---------- витринные сцены на главной ---------- */
.scenes{
  display:grid;gap:14px;grid-template-columns:1fr;
  padding-block:clamp(30px,5vw,52px) 0;
}
@media (min-width:860px){ .scenes{grid-template-columns:1fr 1fr;gap:18px} }

.scene{
  position:relative;margin:0;overflow:hidden;border-radius:var(--radius);
  aspect-ratio:16/10;background:var(--surface-2);box-shadow:var(--shadow);
  display:flex;align-items:flex-end;
}
@media (max-width:520px){ .scene{aspect-ratio:4/3} }
.scene img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease;
}
@media (prefers-reduced-motion: no-preference){
  .scene:hover img{transform:scale(1.04)}
}
.scene::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(20,10,12,0) 38%, rgba(20,10,12,.72) 100%);
}
.scene figcaption{
  position:relative;z-index:2;padding:18px 20px;color:#FBF2EF;
  display:flex;flex-direction:column;gap:5px;
}
.scene .k{
  font-size:9px;letter-spacing:.28em;text-transform:uppercase;
  font-weight:700;color:#EFC9BE;
}
.scene .t{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(21px,3.4vw,27px);line-height:1.1;
}
.scene .d{font-size:12.5px;line-height:1.45;color:#EAD7D2;max-width:34ch}

/* ---------- полоса преимуществ: бантик, иконки, росчерк помадой ---------- */
.strip .wrap{position:relative;padding-block:34px 40px !important}

.strip-bow{
  position:absolute;top:-16px;left:50%;transform:translateX(-50%) rotate(-4deg);
  width:74px;height:37px;color:var(--c-rose);opacity:.9;pointer-events:none;
}
@media (max-width:760px){ .strip-bow{width:60px;height:30px;top:-13px} }

.strip .item{position:relative;padding-left:0}
.strip .item .ico{
  width:22px;height:22px;color:var(--c-rose);margin-bottom:7px;display:block;
  opacity:.95;
}
.strip .item b{font-size:14px;font-weight:600;line-height:1.25}
.strip .item span{font-size:12.5px;color:var(--ink-faint);line-height:1.4}

.strip-stroke{
  position:absolute;left:20px;right:20px;bottom:6px;width:calc(100% - 40px);
  height:20px;color:var(--c-rose);opacity:.5;pointer-events:none;
}
@media (prefers-reduced-motion: no-preference){
  .strip-stroke path{
    stroke-dasharray:900;stroke-dashoffset:900;
    animation:draw 2.2s ease .35s forwards;
  }
  @keyframes draw{to{stroke-dashoffset:0}}
}


/* ---------- компактная админка ---------- */
body.admin .page{padding-block:20px 28px}
body.admin .page h1{font-size:clamp(22px,4vw,30px)}
body.admin .page .sub{font-size:12.5px;margin-bottom:14px}

body.admin .tiles{gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:700px){ body.admin .tiles{grid-template-columns:repeat(4,minmax(0,1fr))} }
body.admin .tile{padding:11px 12px;gap:2px;border-radius:11px}
body.admin .tile .k{font-size:8.5px;letter-spacing:.12em}
body.admin .tile .v{font-size:21px}
body.admin .tile .n{font-size:10px;line-height:1.3}

body.admin .tabs{gap:6px;margin-bottom:12px;margin-top:0}
body.admin .tab{padding:7px 13px;font-size:12px}

body.admin .search{margin:14px 0 10px;gap:6px}
body.admin .search input[type=search]{padding:8px 15px;font-size:12.5px;flex-basis:240px}
body.admin .search .btn{padding:8px 16px;font-size:12px}

body.admin .orders{gap:6px}
body.admin .order{padding:10px 12px;gap:5px 10px;border-radius:11px}
body.admin .order .no{font-size:12.5px}
body.admin .order .who{font-size:11.5px;flex-basis:140px}
body.admin .order .when{font-size:10.5px}
body.admin .order .sum{font-size:13px;white-space:nowrap;flex-shrink:0}
/* место под крестик удаления: компактный padding выше перебивал .orow > .order,
   и сумма уезжала под крестик — держим отступ справа явно */
body.admin .orow > .order{padding-right:50px}
body.admin .pill{font-size:9.5px;padding:3px 8px}

body.admin .panel{padding:14px;gap:10px;border-radius:12px}
body.admin .panel + .panel{margin-top:10px}
body.admin .panel h2{font-size:17px}
body.admin .panel h3{font-size:13.5px}
body.admin .panel p{font-size:13px}
body.admin .muted{font-size:11.5px}
body.admin .msg{padding:9px 11px;font-size:12.5px}

body.admin .dl{gap:6px}
body.admin .dl .r{font-size:13px}
body.admin .dl .r dt{min-width:104px;font-size:11.5px}
body.admin .items .it{font-size:12.5px;padding-bottom:6px}
body.admin .btn-row .btn{padding:9px 16px;font-size:12.5px}
body.admin .receipt-view img{max-height:44vh}

@media (max-width:520px){
  body.admin .order{gap:4px 8px}
  body.admin .order .who{flex-basis:100%;order:3}
  body.admin .order .sum{margin-left:auto}
}

/* ---------- меню админки ---------- */
.anav{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.anav-i{
  display:inline-flex;align-items:center;gap:6px;
  text-decoration:none;font-size:12.5px;font-weight:600;color:var(--ink-soft);
  background:var(--surface);border:1px solid var(--line);
  padding:8px 14px;border-radius:999px;white-space:nowrap;
}
.anav-i:hover{color:var(--ink);border-color:var(--ink-soft)}
.anav-i.on{background:var(--ink);color:#F6EDE8;border-color:var(--ink)}
.anav-i.out{margin-left:auto;color:var(--ink-faint)}
.anav-b{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:17px;height:17px;padding:0 5px;border-radius:999px;
  background:var(--accent);color:var(--accent-ink);font-size:10.5px;font-weight:700;
}
.anav-i.on .anav-b{background:var(--accent);color:var(--accent-ink)}

/* ---------- склад: список товаров ---------- */
.prow-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:13px 0 8px}
.prow-top .btn{padding:8px 16px;font-size:12.5px}

/* поиск по названию над списком товаров */
.psearch{position:relative;display:flex;align-items:center;flex:0 1 240px;min-width:170px;margin-left:auto}
.psearch .ps-ic{
  position:absolute;left:11px;top:50%;width:14px;height:14px;margin-top:-7px;
  color:var(--ink-faint);pointer-events:none;
}
.psearch input[type=search]{
  width:100%;min-width:0;box-sizing:border-box;font:inherit;font-size:12.5px;color:var(--ink);
  background:#FDF8F5;border:1px solid #D6BEB4;border-radius:999px;
  padding:7px 30px 7px 32px;-webkit-appearance:none;appearance:none;
}
.psearch input[type=search]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-tint)}
.psearch input[type=search]::-webkit-search-decoration,
.psearch input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.pq-x{
  position:absolute;right:5px;top:50%;width:22px;height:22px;margin-top:-11px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  font:inherit;font-size:17px;line-height:1;color:var(--ink-faint);
  background:transparent;border:0;border-radius:50%;
}
.pq-x:hover{background:var(--surface-2);color:var(--ink)}
.pq-res{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:2px 2px 8px;font-size:12.5px;color:var(--ink-soft)}
.pq-res.none{padding:12px 14px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink)}
.pq-reset{
  font:inherit;font-size:12.5px;font-weight:600;padding:0;cursor:pointer;
  color:var(--accent);background:none;border:0;border-bottom:1px dotted currentColor;
}
.pq-reset:hover{color:var(--ink)}
/* строка, не подошедшая под поиск (и её варианты) */
.pq-off{display:none!important}

/* перестановка товаров: ручка слева, призрак строки под пальцем и линия «сюда встанет» */
.p-grip{
  flex:0 0 auto;width:18px;height:34px;margin:0 -3px 0 -4px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:6px;color:var(--ink-faint);opacity:.6;
  cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.p-grip svg{width:14px;height:20px;display:block}
.prow:hover .p-grip{opacity:.95}
.p-grip:hover{background:var(--surface-2);opacity:1}
.p-grip:focus-visible{outline:2px solid var(--accent);outline-offset:1px;opacity:1}
#pform .plegend .c1{padding-left:20px}
#pform .prow.vsub .p-name{padding-left:20px}
body.is-dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}
body.is-dragging *{cursor:grabbing!important}
.prow.drag-src{opacity:.32}
.prow.drag-ghost{
  position:fixed;z-index:200;margin:0;pointer-events:none;
  background:var(--surface);border-color:var(--accent);opacity:1;
  box-shadow:0 16px 34px rgba(60,30,30,.30),0 2px 6px rgba(60,30,30,.18);
}
.drop-line{
  position:fixed;z-index:199;height:3px;border-radius:2px;pointer-events:none;
  background:var(--accent);box-shadow:0 0 0 2px var(--accent-tint);
}
.prow.just-moved{animation:pmoved 1.3s ease-out}
@keyframes pmoved{from{background:var(--accent-tint);border-color:var(--accent)}}
.p-toast{
  position:fixed;left:50%;bottom:112px;transform:translateX(-50%);z-index:210;
  max-width:calc(100vw - 32px);padding:9px 16px;border-radius:999px;text-align:center;
  background:#2B1B1D;color:#FBEFEA;font-size:12.5px;font-weight:600;line-height:1.35;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
}
.p-toast.bad{background:#9A3026;color:#FFF5F3;border-radius:12px}
@media (max-width:760px){
  .psearch{flex:1 1 100%;margin-left:0}
  /* 16px — чтобы iPhone не приближал страницу, когда нажимаешь на поле */
  .psearch input[type=search]{font-size:16px;line-height:1.25;padding:8px 34px}
  .psearch .ps-ic{left:12px}
}

.pcat{
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  margin:13px 0 5px;display:flex;align-items:center;gap:7px;color:var(--ink-faint);
}
.pcat span{opacity:.7}

.plegend,.prow{
  display:grid;align-items:center;gap:7px;
  grid-template-columns:26px minmax(0,1fr) 104px 72px 72px 44px 86px;
}
.plegend{
  padding:0 10px 4px;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:700;
}
.plegend span:not(.c1):not(.c0){text-align:center}
.plegend .c0{text-align:left}
.selall{display:inline-flex;align-items:center;cursor:pointer}
.selall input,.p-sel input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;margin:0}
.p-sel{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.prow.picked{background:var(--accent-tint);border-color:var(--accent)}
.p-arc,.p-back{
  flex:0 0 auto;width:26px;height:26px;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:var(--ink-faint);
  border:1px solid var(--line);border-radius:7px;
}
.p-arc svg,.p-back svg{width:14px;height:14px}
.p-arc:hover{color:var(--gild);border-color:var(--gild)}
.p-back:hover{color:var(--ok);border-color:var(--ok)}
.prow.arc{opacity:.9;border-left-color:#C9B49A}
.a-num{font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.a-cat{color:var(--ink-faint)!important;font-weight:600;font-size:11px}
.plist{display:flex;flex-direction:column;gap:4px}
.prow{
  background:var(--surface);border:1px solid var(--line);
  border-left:3px solid transparent;border-radius:9px;padding:5px 10px;
}
.prow.low{border-left-color:var(--warn)}
.prow.zero{border-left-color:var(--accent);background:var(--accent-tint)}
.prow.off{opacity:.5}
.prow.dirty{border-color:var(--accent)}

.p-name{display:flex;align-items:center;gap:9px;min-width:0}
.pth{
  width:34px;height:34px;flex:0 0 34px;border-radius:7px;display:block;
  object-fit:cover;background:var(--surface-2);
}
.p-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.p-t a{
  color:var(--ink);text-decoration:none;font-size:12.5px;font-weight:600;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.p-t a:hover{color:var(--accent)}
.p-sub{font-size:10px;color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.p-f{display:flex;align-items:center;gap:3px;justify-content:center}
.prow input[type=number]{
  width:100%;max-width:64px;text-align:center;font:inherit;font-size:12.5px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--ink);
  background:#FDF8F5;border:1px solid #D6BEB4;border-radius:7px;padding:5px 3px;
  -moz-appearance:textfield;
}
.prow input[type=number]::-webkit-outer-spin-button,
.prow input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.prow input[type=number]:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.p-stock input{max-width:42px}
.stp{
  width:23px;height:26px;flex:0 0 auto;font:inherit;font-size:15px;line-height:1;
  background:transparent;color:var(--ink-soft);border:1px solid #D6BEB4;border-radius:7px;cursor:pointer;
}
.stp:hover{background:var(--ink);color:#F6EDE8;border-color:var(--ink)}
.p-gain{text-align:center;font-size:11.5px;font-weight:700;color:var(--ok);font-variant-numeric:tabular-nums}
.p-act{display:flex;justify-content:flex-end;gap:4px;align-items:center}
.p-edit{
  display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:7px;border:1px solid var(--line);color:var(--ink-faint);text-decoration:none;
}
.p-edit svg{width:13px;height:13px}
.p-edit:hover{color:var(--accent);border-color:var(--accent)}
.p-del{
  flex:0 0 auto;width:26px;height:26px;padding:0;cursor:pointer;
  font:inherit;font-size:17px;line-height:1;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:var(--ink-faint);
  border:1px solid var(--line);border-radius:7px;
  transition:width .15s ease, background .15s ease, color .15s ease;
}
.p-del:hover{color:#9A3026;border-color:#C8958C}
.p-del.armed{
  width:auto;padding:0 10px;font-size:11.5px;font-weight:700;
  background:#9A3026;color:#FFF5F3;border-color:#9A3026;
}

/* подстроки вариантов в складе: свёрнуты за кнопкой у товара */
.v-tog{
  align-self:flex-start;margin-top:3px;padding:2px 9px 2px 6px;cursor:pointer;
  font:inherit;font-size:11px;font-weight:700;line-height:1.5;
  background:transparent;color:var(--gild);border:1px solid var(--gild);border-radius:999px;
}
.v-tog .v-chev{display:inline-block;transition:transform .15s ease}
.v-tog.open .v-chev{transform:rotate(90deg)}
.v-tog.open{background:var(--gild);color:#2B1B0A}
.prow.vsub.collapsed{display:none}
.prow.vsub{background:var(--surface-2);border-style:dashed;margin-top:-4px}
.prow.vsub .p-t{font-size:12.5px}
.prow.vsub .v-arrow{color:var(--gild);font-weight:700;margin-right:2px}
.prow.vsub .pth{width:28px;height:28px}
.p-stock.p-sum .p-total{font-weight:700;font-size:13px;color:var(--ink-soft)}

.psave{
  position:sticky;bottom:0;z-index:5;margin-top:12px;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  background:var(--bg);border-top:1px solid var(--line);padding:10px 0 12px;
}
.psave .btn{padding:9px 20px;font-size:13px}

@media (max-width:760px){
  .plegend{display:none}
  .prow{
    grid-template-columns:24px minmax(0,1fr) 96px;
    grid-template-areas:"sel name stock" ". cost price" ". gain act";
    row-gap:6px;padding:7px 10px;
  }
  .prow .p-sel{grid-area:sel;align-self:start;padding-top:9px}
  .prow .p-name{grid-area:name}
  .prow .p-stock{grid-area:stock}
  .prow .p-cost{grid-area:cost}
  .prow .p-price{grid-area:price}
  .prow .p-gain{grid-area:gain;text-align:left;align-self:center}
  .prow .p-act{grid-area:act}
  .prow input[type=number]{max-width:100%}
  .prow .p-cost::before,.prow .p-price::before{
    font-size:9.5px;color:var(--ink-faint);margin-right:5px;white-space:nowrap;
  }
  .prow .p-cost::before{content:"закупка"}
  .prow .p-price::before{content:"цена"}
}

/* ---------- карточка товара ---------- */
.pform .f2,.pform .f3{display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:560px){
  .pform .f2{grid-template-columns:1fr 1fr}
  .pform .f3{grid-template-columns:1fr 1fr 1fr}
}
.pform .field{display:flex;flex-direction:column;gap:5px}
.pform .field label{font-size:11.5px;color:var(--ink-faint);font-weight:600}
.pform input[type=text],.pform input[type=number],.pform select,.pform textarea{
  width:100%;box-sizing:border-box;font:inherit;font-size:14px;color:var(--ink);
  background:#FDF8F5;border:1px solid #D6BEB4;border-radius:10px;padding:9px 12px;
}
.pform textarea{resize:vertical;line-height:1.5}
.pform input:focus,.pform select:focus,.pform textarea:focus{
  outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.pform input[type=color]{height:40px;padding:4px;cursor:pointer}
.pform .panel{display:flex;flex-direction:column;gap:12px}
.chk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft);cursor:pointer}
.chk input{width:17px;height:17px;accent-color:var(--accent)}
.chk.inline{font-size:12.5px}
.pphoto{border:1px solid var(--line);border-radius:12px;overflow:hidden;max-width:220px;line-height:0}
.pphoto img{width:100%;display:block}
.btn-ghost.danger{color:#9A3026;border-color:#C8958C}
.btn-ghost.danger:hover{background:#9A3026;color:#FFF5F3;border-color:#9A3026}

/* ---------- деньги ---------- */
.mper{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 6px}
.mper label{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-faint)}
.mper input[type=date]{
  font:inherit;font-size:12.5px;color:var(--ink);background:#FDF8F5;
  border:1px solid #D6BEB4;border-radius:9px;padding:7px 10px;
}
.mper .btn{padding:8px 16px;font-size:12.5px}

.calc{display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:560px){ .calc{grid-template-columns:1fr 1fr 1fr} }
.calc label{display:flex;flex-direction:column;gap:5px;font-size:11.5px;color:var(--ink-faint);font-weight:600}
.calc input{
  font:inherit;font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);
  background:#FDF8F5;border:1px solid #D6BEB4;border-radius:10px;padding:10px 12px;width:100%;box-sizing:border-box;
}
.calc input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.calc-out{margin:0;font-size:14px;color:var(--ok);font-weight:600;min-height:20px}

.mtable{display:flex;flex-direction:column;gap:4px}
.mt-h,.mt-r{display:grid;gap:8px;align-items:center;
  grid-template-columns:minmax(0,1fr) 40px 86px 86px 86px 44px}
.mt-h{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);
  font-weight:700;padding:0 10px 4px}
.mt-h span:not(:first-child),.mt-r span:not(.nm){text-align:right;font-variant-numeric:tabular-nums}
.mt-r{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:13px}
.mt-r .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.mt-r .dim{color:var(--ink-faint);font-size:12px}
.mt-r .pf{font-weight:700;color:var(--ok)}
.mt-r.tot{background:var(--ink);color:#F6EDE8;border-color:var(--ink)}
.mt-r.tot .dim{color:#C9A9A2}
.mt-r.tot .pf{color:#9FD8B4}
@media (max-width:620px){
  .mt-h{display:none}
  .mt-h,.mt-r{grid-template-columns:minmax(0,1fr) 36px 80px 70px}
  .mt-r span:nth-child(4),.mt-r span:nth-child(6){display:none}
}

.expf{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.expf input,.expf select{
  font:inherit;font-size:13px;color:var(--ink);background:#FDF8F5;
  border:1px solid #D6BEB4;border-radius:9px;padding:8px 11px;
}
.expf input[type=text]{flex:1 1 180px;min-width:0}
.expf input[type=number]{width:110px}
.expf .btn{padding:8px 16px;font-size:12.5px}
.explist{display:flex;flex-direction:column;gap:5px;margin-top:12px}
.exp{display:grid;grid-template-columns:44px minmax(0,1fr) 92px 26px;gap:8px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:7px 10px;font-size:13px}
.exp form{margin:0}
.exp .d{font-size:11.5px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.exp .t{display:flex;flex-direction:column;gap:1px;min-width:0}
.exp .t .kd{font-size:10.5px;color:var(--ink-faint)}
.exp .a{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.exp .del{
  width:24px;height:24px;font-size:16px;line-height:1;cursor:pointer;
  background:transparent;color:var(--ink-faint);border:1px solid var(--line);border-radius:7px;
}
.exp .del:hover{color:var(--accent);border-color:var(--accent)}
.exp.tot{background:transparent;border-style:dashed}

/* ---------- акции в админке ---------- */
.h-note{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);
  font-weight:700;margin-left:7px;vertical-align:middle}
.sale-note{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink-faint);min-height:18px}
.sale-note.on{color:#9A3026;font-weight:600}

.panel.sales-now{border-color:#D9B0A7;background:var(--accent-tint)}
.panel.sales-now h2{display:flex;align-items:center;gap:8px}
.panel.sales-now .cnt{
  display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  padding:0 6px;border-radius:999px;background:#B3362C;color:#FFF3F0;font-size:11px;font-weight:700;
}
.slist{display:flex;flex-direction:column;gap:5px}
.srow{
  display:grid;grid-template-columns:34px minmax(0,1fr) 48px auto;gap:9px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:5px 10px;
}
.srow form{margin:0}
.s-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.s-t a{color:var(--ink);text-decoration:none;font-size:12.5px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s-t a:hover{color:var(--accent)}
.s-sub{font-size:10.5px;color:var(--ink-faint)}
.s-sub s{opacity:.75}
.s-sub b{color:#9A3026}
.s-pc{
  text-align:center;font-size:12px;font-weight:800;color:#FFF3F0;background:#B3362C;
  border-radius:7px;padding:4px 0;font-variant-numeric:tabular-nums;
}
.s-end{
  font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;white-space:nowrap;
  background:transparent;color:var(--ink-faint);border:1px solid var(--line);
  border-radius:7px;padding:5px 11px;
}
.s-end:hover{color:var(--accent);border-color:var(--accent)}
.p-sale{color:#9A3026;font-weight:800}
@media (max-width:560px){
  .srow{grid-template-columns:34px minmax(0,1fr) 48px;row-gap:6px}
  .srow form{grid-column:2 / -1;justify-self:start}
}

/* ---------- плитки-фильтры ---------- */
a.tile.pick{text-decoration:none;color:inherit;transition:border-color .15s ease, background .15s ease}
a.tile.pick:hover{border-color:var(--ink-soft)}
a.tile.pick .n{text-decoration:none}
a.tile.pick.on{background:var(--ink);border-color:var(--ink)}
a.tile.pick.on .k,a.tile.pick.on .n{color:#C9A9A2}
a.tile.pick.on .v{color:#F6EDE8}
a.tile.pick.accent:not(.on){border-color:#D9B0A7;background:var(--accent-tint)}

.fnote{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 9px;font-size:12.5px;color:var(--ink-soft)}
.fnote b{color:var(--ink)}
.fnote a{color:var(--accent);text-decoration:none;border-bottom:1px dotted currentColor}
.fnote a:hover{color:var(--ink)}

/* ---------- галерея фото в карточке товара (админка) ---------- */
.pgal{display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(108px,1fr))}
.pg{
  position:relative;margin:0;border:1px solid var(--line);border-radius:11px;
  overflow:hidden;background:var(--surface-2);display:flex;flex-direction:column;
}
.pg.main{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.pg img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
/* подпись «главная» рисуется сама на той плитке, где стоит точка */
.pg.main::before{
  content:"главная";position:absolute;top:6px;left:6px;z-index:2;
  background:var(--accent);color:var(--accent-ink);
  border-radius:999px;padding:3px 8px;font-size:9.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;pointer-events:none;
}
.pg-new{
  position:absolute;top:6px;right:6px;z-index:2;
  background:var(--ink);color:#F6EDE8;border-radius:999px;padding:3px 8px;
  font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;pointer-events:none;
}
.pgal-new{margin-top:4px}
.pg-fresh{border-style:dashed}
.pg-x{
  font:inherit;font-size:11px;color:var(--ink-faint);cursor:pointer;text-align:left;
  background:transparent;border:0;border-top:1px solid var(--line);padding:6px 8px;width:100%;
}
.pg-x:hover{color:#9A3026}
.pnew-note{margin:0}
.pg-r,.pg-d{
  display:flex;align-items:center;gap:5px;cursor:pointer;
  font-size:11px;color:var(--ink-soft);padding:5px 8px;border-top:1px solid var(--line);
}
.pg-r input,.pg-d input{width:14px;height:14px;accent-color:var(--accent);flex:0 0 auto}
.pg-d{color:var(--ink-faint)}
.pg-d:hover{color:#9A3026}

/* ---------- галочки разделов ---------- */
.catbox{display:flex;flex-wrap:wrap;gap:7px}
.catp{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:#FDF8F5;border:1px solid #D6BEB4;border-radius:999px;
  padding:7px 14px 7px 11px;font-size:13px;color:var(--ink-soft);
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.catp input{width:15px;height:15px;accent-color:var(--accent);flex:0 0 auto;margin:0}
.catp:hover{border-color:var(--ink-soft)}
.catp.on,
.catp:has(input:checked){background:var(--accent-tint);border-color:var(--accent);color:var(--ink);font-weight:600}
.catp:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}

/* ---------- закупки ---------- */
.blegend,.brow{
  display:grid;gap:7px;align-items:center;
  grid-template-columns:minmax(0,1fr) 78px 112px 92px 28px;
}
.blegend{
  padding:0 2px 5px;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:700;
}
.blegend span:not(:first-child){text-align:center}
.brows{display:flex;flex-direction:column;gap:6px}
.brow{
  background:var(--surface);border:1px solid var(--line);
  border-left:3px solid transparent;border-radius:9px;padding:6px 8px;
}
.brow.filled{border-left-color:var(--ok)}
.brow select,.brow input[type=number]{
  width:100%;box-sizing:border-box;font:inherit;font-size:13px;color:var(--ink);
  background:#FDF8F5;border:1px solid #D6BEB4;border-radius:8px;padding:7px 9px;
}
.brow input[type=number]{
  text-align:center;font-weight:600;font-variant-numeric:tabular-nums;-moz-appearance:textfield;
}
.brow input[type=number]::-webkit-outer-spin-button,
.brow input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.brow select:focus,.brow input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.b-sum{
  text-align:right;font-size:13px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;padding-right:4px;
}
.b-x{
  width:26px;height:26px;padding:0;cursor:pointer;font:inherit;font-size:16px;line-height:1;
  background:transparent;color:var(--ink-faint);border:1px solid var(--line);border-radius:7px;
}
.b-x:hover{color:#9A3026;border-color:#C8958C}
.brow-add{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:10px}
.brow-add .btn{padding:8px 16px;font-size:12.5px}
.b-total{margin-left:auto;font-size:13.5px;color:var(--ink-soft)}
.b-total b{font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums}

/* подписи к полям: на компьютере их заменяет шапка-легенда, на телефоне показываем у каждого поля */
.b-f{display:contents}
.b-cap{display:none}

/* выбор товара: кнопка с фото и названием вместо длинного выпадающего списка */
.b-pick{
  display:flex;align-items:center;gap:10px;width:100%;min-width:0;text-align:left;cursor:pointer;
  background:#FDF8F5;border:1px dashed #C9AFA5;border-radius:9px;padding:4px 8px 4px 5px;min-height:48px;color:#000;
}
.b-pick.has{border-style:solid;border-color:#D6BEB4}
.b-pick:hover{border-color:var(--ink-soft)}
.b-pick:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.b-pick::after{
  content:"";width:7px;height:7px;flex:0 0 auto;margin:0 3px 3px 2px;
  border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);transform:rotate(45deg);
}
.b-pick .pth{width:38px;height:38px;flex:0 0 38px;border-radius:8px}
.bp-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.bp-t b{
  font-size:13px;font-weight:600;line-height:1.25;color:#000;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.bp-t small{font-size:11px;line-height:1.2;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bp-empty{font-size:13.5px;font-weight:600;color:var(--accent);padding-left:8px}

.bpick{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center;background:rgba(20,10,12,.55)}
.bpick[hidden]{display:none}
.bpick-box{
  width:100%;max-width:580px;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);border-radius:18px 18px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.3);
}
@media (min-width:700px){ .bpick{align-items:center} .bpick-box{border-radius:18px;max-height:80vh} }
.bpick-head{display:flex;gap:8px;padding:12px;border-bottom:1px solid var(--line)}
.bpick-head input{
  flex:1;min-width:0;font:inherit;font-size:15px;color:#000;padding:10px 12px;
  background:#FDF8F5;border:1px solid #D6BEB4;border-radius:10px;
}
.bpick-close{
  flex:0 0 42px;height:42px;border-radius:10px;border:1px solid #B49D93;background:transparent;
  font-size:24px;line-height:1;color:#000;
}
.bpick-list{overflow-y:auto;overscroll-behavior:contain;padding:6px;display:flex;flex-direction:column;gap:2px}
.bp-item{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;color:#000;
  background:transparent;border:0;border-radius:10px;padding:7px 8px;
}
.bp-item[hidden]{display:none}
.bp-item:hover,.bp-item:focus-visible{background:var(--accent-tint)}
.bp-item.on{background:var(--accent-tint);box-shadow:inset 3px 0 0 var(--ok)}
.bp-item .pth{width:46px;height:46px;flex:0 0 46px;border-radius:9px}
.bp-item .bp-t b{font-size:14px}
.bp-item .bp-t small{font-size:12px;white-space:normal}
.bp-item.zero .bp-t small{color:var(--warn);font-weight:600}
.bp-c{flex:0 0 auto;font-size:11px;line-height:1.3;color:var(--ink-soft);text-align:right;white-space:nowrap}
/* «без товара»: вместо фото — подарочная коробка */
.bp-item .pth.bp-ph{display:flex;align-items:center;justify-content:center;background:var(--accent-tint);color:var(--accent)}
.bp-item .pth.bp-ph .gf-ico{width:22px;height:22px}
.bp-none{padding:22px 12px;text-align:center;color:var(--ink-soft);font-size:14px}
.bp-none[hidden]{display:none}

@media (max-width:700px){
  .blegend{display:none}
  .brow{
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) minmax(76px,auto);
    grid-template-areas:"pick pick pick" "qty cost sum";
    row-gap:7px;column-gap:8px;padding:8px 9px;align-items:end;position:relative;
  }
  .brow .b-pick{grid-area:pick;width:calc(100% - 34px)}
  .brow .b-x{position:absolute;top:19px;right:9px}
  .brow .b-fq{grid-area:qty}
  .brow .b-fc{grid-area:cost}
  .brow .b-fs{grid-area:sum}
  .b-f{display:flex;flex-direction:column;gap:3px;min-width:0}
  .b-cap{display:block;font-size:11px;font-weight:700;color:#000;line-height:1.2;white-space:nowrap}
  .brow input[type=number]{text-align:left;font-size:15px;padding:8px 10px}
  .brow .b-fs .b-sum{
    display:flex;align-items:center;justify-content:flex-end;min-height:38px;
    font-size:14px;font-weight:700;padding:0;text-align:right;
  }
}

/* история закупок: фото рядом с названием */
.bi .n{display:flex;align-items:center;gap:8px;min-width:0}
.bi .n .pth{width:26px;height:26px;flex:0 0 26px;border-radius:6px}
.bi .n .nt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

.buy{
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:0;overflow:hidden;
}
.buy + .buy{margin-top:6px}
.buy summary{
  display:grid;grid-template-columns:72px minmax(0,1fr) 92px 20px;gap:10px;align-items:center;
  cursor:pointer;list-style:none;padding:9px 12px;font-size:13px;
}
.buy summary::-webkit-details-marker{display:none}
.buy .b-day{font-size:12px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.buy .b-note{display:flex;flex-direction:column;gap:1px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.buy .b-cnt{font-size:10.5px;color:var(--ink-faint)}
.buy .b-tot{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.buy .chev{display:inline-flex;color:var(--ink-faint);transition:transform .2s ease}
.buy .chev svg{width:16px;height:16px}
.buy[open] .chev{transform:rotate(180deg)}
.buy-body{padding:0 12px 11px;border-top:1px solid var(--line)}
.bi{
  display:grid;grid-template-columns:minmax(0,1fr) 44px 108px 88px;gap:9px;
  padding:7px 0;border-bottom:1px dashed #EADCD6;font-size:12.5px;
}
.bi .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bi .q,.bi .c{color:var(--ink-faint);text-align:right;font-variant-numeric:tabular-nums}
.bi .s{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.buy-del{margin-top:10px}
@media (max-width:560px){
  .buy summary{grid-template-columns:62px minmax(0,1fr) 20px;row-gap:3px}
  .buy .b-tot{grid-column:2;text-align:left;font-size:13.5px}
  .bi{grid-template-columns:minmax(0,1fr) 40px 80px}
  .bi .c{display:none}
}

/* ---------- вариант у фотографии: выпадающий список ---------- */
.pg-s{
  width:100%;box-sizing:border-box;font:inherit;font-size:11.5px;color:var(--ink);
  background:#FDF8F5;border:0;border-top:1px solid var(--line);border-radius:0;padding:6px 8px;
}
.pg-s:focus{outline:2px solid var(--gild);outline-offset:-2px}
.pg.isvar{border-color:var(--gild);box-shadow:0 0 0 1px var(--gild) inset}
.pg.isvar .pg-s{color:var(--gild);font-weight:600}

/* ---------- панель вариантов: одна компактная строка на вариант ---------- */
.vpanel > summary{
  display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
}
.vpanel > summary::-webkit-details-marker{display:none}
.vpanel > summary h2{margin:0;font-size:inherit}
.vpanel .chev{margin-left:auto;color:var(--ink-faint);transition:transform .2s ease}
.vpanel[open] .chev{transform:rotate(180deg)}
.vpanel[open] > summary{margin-bottom:8px}
.vpanel .cnt{
  display:inline-block;min-width:20px;padding:1px 7px;margin-left:6px;border-radius:999px;
  background:var(--gild);color:#2B1B0A;font-size:11.5px;font-weight:800;text-align:center;
}
.vpanel .cnt:empty{display:none}

.vrow{
  display:grid;align-items:end;gap:6px 8px;
  grid-template-columns:24px minmax(0,1fr) minmax(0,1fr) auto;
}
.vlist{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.vrow{
  background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--gild);
  border-radius:10px;padding:7px 10px;
}
.vrow input{
  min-width:0;width:100%;box-sizing:border-box;font:inherit;font-size:13px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 9px;
}
.vrow input:focus,.vrow textarea:focus{outline:2px solid var(--gild);outline-offset:-1px}
.v-num{
  grid-row:1;grid-column:1;margin-bottom:5px;
  width:22px;height:22px;border-radius:999px;background:var(--gild);color:#2B1B0A;
  font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;
}
.v-photos{grid-row:2;grid-column:4;display:flex;align-items:center;gap:3px;min-height:34px}
.v-photos img{width:26px;height:26px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.v-nophoto{font-size:11px;color:var(--ink-faint);white-space:nowrap}
.v-btns{grid-row:1;grid-column:4;display:inline-flex;gap:4px;margin-bottom:2px;justify-self:end}
.v-more,.v-del{
  height:30px;padding:0 9px;cursor:pointer;font:inherit;font-size:12px;font-weight:600;line-height:1;
  background:transparent;color:var(--ink-faint);border:1px solid var(--line);border-radius:8px;white-space:nowrap;
}
.v-del{font-size:17px;min-width:30px;padding:0 6px}
.v-more:hover{color:var(--gild);border-color:var(--gild)}
.v-more.open{background:var(--gild);color:#2B1B0A;border-color:var(--gild)}
.v-more.filled::after{content:" •";color:var(--gild);font-weight:800}
.v-more.open.filled::after{color:#2B1B0A}
.v-del:hover{color:#9A3026;border-color:#C8958C}
.v-del.armed{font-size:11.5px;font-weight:700;background:#9A3026;color:#FFF5F3;border-color:#9A3026}
.v-extra{
  grid-row:3;grid-column:1/-1;display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr);gap:8px 10px;
  padding-top:6px;border-top:1px dashed var(--line);
}
.v-extra[hidden]{display:none}
@media (max-width:520px){ .v-extra{grid-template-columns:1fr} }
.v-f{display:flex;flex-direction:column;gap:3px;min-width:0;margin:0}
.v-c{font-size:10.5px;font-weight:700;color:#000;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-fn{grid-row:1;grid-column:2/4}
.v-fs{grid-row:2;grid-column:2}
.v-fp{grid-row:2;grid-column:3}
.v-extra .field{margin:0}
.v-extra .field:last-child{grid-column:1/-1}
.v-extra textarea{min-height:0}
}

/* подстроки вариантов в складе: свёрнуты за кнопкой у товара */
.v-tog{
  align-self:flex-start;margin-top:3px;padding:2px 9px 2px 6px;cursor:pointer;
  font:inherit;font-size:11px;font-weight:700;line-height:1.5;
  background:transparent;color:var(--gild);border:1px solid var(--gild);border-radius:999px;
}
.v-tog .v-chev{display:inline-block;transition:transform .15s ease}
.v-tog.open .v-chev{transform:rotate(90deg)}
.v-tog.open{background:var(--gild);color:#2B1B0A}
.prow.vsub.collapsed{display:none}
.prow.vsub{background:var(--surface-2);border-style:dashed;margin-top:-4px}
.prow.vsub .p-t{font-size:12.5px}
.prow.vsub .v-arrow{color:var(--gild);font-weight:700;margin-right:2px}
.prow.vsub .pth{width:28px;height:28px}
.p-stock.p-sum .p-total{font-weight:700;font-size:13px;color:var(--ink-soft)}

.psave{
  position:sticky;bottom:0;z-index:5;margin-top:12px;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  background:var(--bg);border-top:1px solid var(--line);padding:10px 0 12px;
}
.psave .btn{padding:9px 20px;font-size:13px}

@media (max-width:760px){
  .plegend{display:none}
  .prow{
    grid-template-columns:24px minmax(0,1fr) 96px;
    grid-template-areas:"sel name stock" ". cost price" ". gain act";
    row-gap:6px;padding:7px 10px;
  }
  .prow .p-sel{grid-area:sel;align-self:start;padding-top:9px}
  .prow .p-name{grid-area:name}
  .prow .p-stock{grid-area:stock}
  .prow .p-cost{grid-area:cost}
  .prow .p-price{grid-area:price}
  .prow .p-gain{grid-area:gain;text-align:left;align-self:center}
  .prow .p-act{grid-area:act}
  .prow input[type=number]{max-width:100%}
  .prow .p-cost::before,.prow .p-price::before{
    font-size:9.5px;color:var(--ink-faint);margin-right:5px;white-space:nowrap;
  }
  .prow .p-cost::before{content:"закупка"}
  .prow .p-price::before{content:"цена"}
}

/* ---------- компактная шапка + выпадающее меню ---------- */
header.site .wrap{gap:10px}
.acc-link .ic,.cart-btn .ic{width:19px;height:19px;flex:0 0 auto}
.acc-link{display:inline-flex;align-items:center;gap:7px}
.cart-btn{position:relative}
.menu-wrap{position:relative}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;
  background:transparent;border:1px solid var(--line);color:var(--ink);cursor:pointer}
.menu-btn svg{width:20px;height:20px}
.menu-pop{position:absolute;right:0;top:calc(100% + 10px);min-width:220px;padding:6px;border-radius:16px;
  background:#2E1D20;border:1px solid rgba(255,255,255,.12);box-shadow:0 14px 34px rgba(0,0,0,.4);z-index:60}
.menu-pop[hidden]{display:none}
.menu-pop a{display:block;padding:12px 14px;border-radius:10px;color:#FBF1EE;text-decoration:none;font-size:14.5px;font-weight:500}
.menu-pop a:hover{background:rgba(255,255,255,.08)}
body.inner .menu-btn{border-color:#CDB3A8;color:var(--ink-soft)}
body.inner .menu-pop{background:#fff;border-color:#DCC7BE;box-shadow:0 14px 34px rgba(60,30,30,.18)}
body.inner .menu-pop a{color:#000}
body.inner .menu-pop a:hover{background:#F6ECE7}
@media (max-width:899px){
  .acc-link{width:40px;height:40px;padding:0;justify-content:center;border-radius:999px}
  .acc-link .lbl,.cart-btn .lbl{display:none}
  .cart-btn{width:40px;height:40px;padding:0;justify-content:center}
  .cart-btn .count{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;font-size:10.5px;border:2px solid var(--bg);box-sizing:content-box;padding-inline:3px}
  .brand .name{font-size:26px}
}
@media (min-width:900px){ .menu-wrap{display:none} .acc-link .ic{display:none} .cart-btn .ic{width:17px;height:17px} }

/* ---------- внутренние страницы и админка: текст чётко чёрный ---------- */
body.inner{color:#000}
body.inner .acc-link,body.inner .menu-btn{color:#000;border-color:#9C847A}
body.inner .tab:not(.on),body.inner .chip:not([aria-pressed="true"]){color:#000;border-color:#B49D93}
body.inner input::placeholder,body.inner textarea::placeholder{color:#5A4642;opacity:1}
body.inner .prow.off{opacity:.65}
body.inner .pcat span{opacity:1}
/* значок количества у корзины не должен обрезаться шапкой */
@media (max-width:899px){ .cart-btn .count{top:-2px;right:-3px} }

/* ---------- разделы из меню («О бренде», «Доставка», «Отзывы», «Контакты») ---------- */
.ipage{
  --ink:#000;--ink-soft:#14090A;--ink-faint:#2A1A1B;
  position:fixed;inset:0;z-index:80;display:block;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;background:var(--bg);color:var(--ink);
  border:0;padding:0;
}
.ipage[hidden]{display:none}
html.ip-lock{overflow:hidden}
.ipage-bar{
  position:sticky;top:0;z-index:3;border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 94%, transparent);backdrop-filter:blur(10px);
}
.ipage-barin{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:11px}
.ipage-t{font-family:var(--font-display);font-size:25px;font-weight:600;color:#000;line-height:1.1}
.ipage-x{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:transparent;color:#000;border:1px solid #9C847A;border-radius:999px;
  padding:8px 14px 8px 16px;font-size:13px;font-weight:600;
}
.ipage-x b{font-size:20px;line-height:1;font-weight:500}
.ipage-x:hover{background:rgba(0,0,0,.05)}
.ipage-body{padding-block:0 56px}
.ipage .wrap{padding-top:0}
.ipage .sec-head{margin-top:0}
.ipage-body > section{padding-top:8px}

/* ---------- карточка товара: колонка не шире экрана, на телефоне компактно ---------- */
.p-detail{grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){ .p-detail{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)} }
.p-info{min-width:0}
.p-info h2,.p-info .p-sub,.p-vars-sec h3,.v-cur,.v-hint,.p-info .desc,ul.p-kit li,.ingr-text{overflow-wrap:anywhere}
.p-bg{
  position:absolute;inset:-26px;background-size:cover;background-position:center;
  filter:blur(22px) saturate(1.15);opacity:.55;pointer-events:none;
}
@media (min-width:760px){ .p-bg{display:none} }

@media (max-width:759px){
  .sheet{max-height:95%}
  /* крестик лежит поверх фото, чтобы не съедать высоту */
  .sheet .s-top{position:absolute;top:10px;right:12px;z-index:6;padding:0}
  .sheet .icon-btn{
    width:34px;height:34px;font-size:20px;line-height:1;
    background:rgba(255,255,255,.92);box-shadow:0 1px 8px rgba(0,0,0,.2);
  }
  .sheet .s-body{padding:0 0 4px}
  .p-detail{gap:10px;padding:10px 12px 0}
  /* фото целиком, по высоте — треть экрана */
  .p-shot{aspect-ratio:auto;height:clamp(190px,36vh,330px);border-radius:14px}
  .p-shot svg,.p-shot img{object-fit:contain}
  .p-info{padding:0 2px}
  .p-info .eyebrow{font-size:9.5px}
  .p-info h2{font-size:18px;line-height:1.2;margin-top:2px}
  .p-info .p-sub{font-size:12px;margin-top:3px;line-height:1.35}

  .p-vars-sec{margin-top:9px}
  .p-sec{margin-top:11px;padding-top:10px}
  .p-sec h3,.v-sub{font-size:9.5px;margin-bottom:6px;letter-spacing:.14em}
  .p-vars-sec .v-cur{font-size:12px}
  .p-gal{gap:6px;margin-bottom:8px}
  .gth{width:44px;border-radius:8px}
  .p-vars{gap:7px}
  .vsw{width:54px;padding:3px;border-radius:9px;gap:3px}
  .vsw span{font-size:9.5px;line-height:1.15}
  .vsw .vn{right:5px;top:5px;min-width:14px;height:14px;font-size:8.5px;line-height:14px}
  .v-hint{font-size:10.5px;margin-top:6px}

  .p-head-price{margin:9px 0 0;gap:8px}
  .p-head-price .price{font-size:20px}
  .p-head-price .old{font-size:13px}
  .sale-chip{font-size:10.5px;padding:3px 9px}
  .p-stock{margin-top:7px;padding:4px 10px;font-size:11.5px;gap:6px}
  .p-stock .dot{width:6px;height:6px}
  .sheet .sale-line{font-size:12px;margin-top:4px}

  .p-kit-sec{padding:9px 11px;margin-top:11px}
  .p-kit-sec h3{margin-bottom:6px}
  ul.p-kit{gap:5px}
  ul.p-kit li{font-size:12.5px;padding-left:16px}
  ul.p-kit li + li{padding-top:5px}
  .p-info .desc{font-size:13px;line-height:1.5}
  .p-specs .r{font-size:12.5px;padding:6px 0}
  .p-specs .r dt{font-size:10.5px}
  .ingr-text{font-size:12px;line-height:1.5;padding:9px 11px;margin-top:8px}

  .p-buy{gap:10px;flex-wrap:nowrap;padding:9px 12px calc(10px + env(safe-area-inset-bottom,0px))}
  .p-buy .price{font-size:17px;margin-right:0;white-space:nowrap;flex:0 0 auto}
  .p-buy .old{font-size:12px}
  .p-buy .btn-primary{
    flex:1 1 auto;min-width:0;display:block;text-align:center;
    padding:11px 14px;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
}

/* ---------- страница заказа: кнопка «Заказать» и окошко «заказ принят» ---------- */
/* квитанция + «Заказать» одним блоком; после загрузки файла страница сама прокручивается сюда (#go) */
.go-box{display:flex;flex-direction:column;gap:14px;scroll-margin-top:92px}
.btn-order{padding:15px 24px;font-size:16px;letter-spacing:.01em}
.btn-order[disabled]{opacity:.65}

.ok-modal{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;
  padding:20px;padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  background:rgba(36,20,22,.58);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  overflow-y:auto;
}
.ok-modal[hidden]{display:none}
body.ok-open{overflow:hidden}
.ok-card{
  width:min(100%,360px);margin:auto;text-align:center;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:20px;
  padding:28px 22px 22px;
  box-shadow:0 24px 60px rgba(20,10,12,.40);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.ok-ico{
  width:58px;height:58px;border-radius:999px;margin-bottom:4px;
  background:rgba(42,110,66,.14);color:var(--ok);
  display:flex;align-items:center;justify-content:center;
}
.ok-ico svg{width:30px;height:30px;display:block}
.ok-card h2{font-size:28px;line-height:1.1;margin:0}
.ok-card p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
.ok-card .ok-no{font-size:12px;color:var(--ink-faint)}
.ok-card .btn{align-self:stretch;margin-top:10px;padding:13px 24px;font-size:15px}
@media (prefers-reduced-motion: no-preference){
  .ok-modal{animation:okfade .18s ease-out}
  .ok-card{animation:okpop .26s cubic-bezier(.2,.8,.3,1)}
  @keyframes okfade{from{opacity:0}}
  @keyframes okpop{from{opacity:0;transform:translateY(14px) scale(.97)}}
}

/* ---------- сотрудники и реферальные ссылки ---------- */
.pill.staff{color:#0E7E79;border-color:#0E7E79;background:transparent}
.pill.pickup{color:#0E7E79;border-color:#0E7E79;background:transparent}

/* шапка страницы одного сотрудника */
.st-head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:12px 14px;margin-bottom:14px;
}
.st-who{display:flex;flex-direction:column;gap:1px;min-width:0;margin-right:auto}
.st-who b{font-size:15px;line-height:1.2}
.st-who > span{font-size:12px;color:var(--ink-faint);overflow-wrap:anywhere}

/* список сотрудников */
.st-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.st-card{
  display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid transparent;
  border-radius:12px;padding:12px 14px;
}
.st-card:hover{border-color:var(--ink-soft)}
.st-card.due{border-left-color:var(--accent)}
.st-card.off{opacity:.62}
.st-top{display:flex;align-items:center;gap:10px}
.st-money{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.st-money > span{display:flex;flex-direction:column;gap:1px;font-size:10.5px;color:var(--ink-faint);line-height:1.3;min-width:0}
.st-money b{font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.2;white-space:nowrap}
.st-money .m-due b{color:var(--accent)}
.st-meta{font-size:11px;color:var(--ink-faint);line-height:1.4}
.st-pay{margin:0;font-size:13px;line-height:1.5}

/* ссылка и код сотрудника */
.ref-code{
  font-family:var(--font-display);font-weight:600;font-size:clamp(34px,10vw,46px);
  letter-spacing:.14em;line-height:1;color:var(--accent);overflow-wrap:anywhere;
}
.ref-url-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ref-url{
  flex:1 1 220px;min-width:0;font-size:13px;line-height:1.35;font-weight:600;
  padding:10px 12px;border-radius:10px;background:#FDF8F5;border:1px solid #D6BEB4;
  overflow-wrap:anywhere;user-select:all;
}
.ref-url-row .btn{padding:9px 16px;font-size:12.5px}
.ref-act{display:flex;gap:8px;flex-wrap:wrap}
.ref-act .btn{padding:10px 16px;font-size:13px}

/* данные для входа, которые владелец отправляет сотруднику */
.panel.creds{border-color:var(--ok)}
.creds-box{
  margin:0;padding:12px 14px;border-radius:10px;background:#FDF8F5;border:1px dashed #C9AFA4;
  font:12.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink);user-select:all;
}

/* вознаграждения за товары */
.rw-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.rw-t{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-soft)}
.rw-t input{
  width:72px;font:inherit;font-size:13px;text-align:center;color:var(--ink);
  background:#FDF8F5;border:1px solid #D6BEB4;border-radius:8px;padding:6px 4px;
}
.rw-tools .btn{padding:7px 14px;font-size:12px}
.rw-list{display:flex;flex-direction:column;gap:4px}
.rw-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:7px 10px;
}
.rw-row.off{opacity:.55}
.rw-row.dirty{border-color:var(--accent)}
.rw-row .p-name{flex:1 1 auto;min-width:0}
.p-nm{font-size:12.5px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rw-in{display:flex;align-items:center;gap:5px;flex:0 0 auto}
.rw-in input{
  width:82px;font:inherit;font-size:13px;font-weight:600;text-align:center;
  font-variant-numeric:tabular-nums;color:var(--ink);
  background:#FDF8F5;border:1px solid #D6BEB4;border-radius:7px;padding:6px 4px;
  -moz-appearance:textfield;
}
.rw-in input::-webkit-outer-spin-button,.rw-in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rw-in input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.rw-cur{font-size:12px;color:var(--ink-faint)}
.rw-pc{min-width:32px;font-size:10.5px;color:var(--ink-faint);text-align:right;font-variant-numeric:tabular-nums}
.rw-get{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;flex:0 0 auto}
.rw-get b{font-size:15px;color:var(--ok);font-variant-numeric:tabular-nums;white-space:nowrap}
.rw-get span{font-size:10px;color:var(--ink-faint)}

/* заказы в кабинете сотрудника: без имён клиентов, только состав и вознаграждение */
.so{align-items:baseline}
.so .sum{color:var(--ok)}
.order .sum.dim,.so .sum.dim{color:var(--ink-faint);font-weight:500}
.so-items{
  flex:1 1 100%;display:flex;flex-direction:column;gap:2px;
  border-top:1px solid var(--line);padding-top:7px;margin-top:2px;
}
.so-it{font-size:12px;color:var(--ink-soft);line-height:1.4}
.so-it i{font-style:normal;color:var(--ok);font-weight:600;margin-left:4px;white-space:nowrap}
.so-pending .so-it i{color:var(--ink-faint);font-weight:500}
.so-list .order:hover{border-color:var(--line)}

/* «как это работает» */
.steps{
  margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px;
  font-size:13.5px;line-height:1.5;color:var(--ink-soft);
}
.steps li::marker{color:var(--accent);font-weight:700}

/* выплаты: у владельца есть крестик «убрать запись», у сотрудника — нет */
.exp.exp-pay{grid-template-columns:40px minmax(0,1fr) auto auto}
.exp-pay .a{white-space:nowrap}
.exp-pay .ttl{font-weight:600}
.exp.exp-ro{grid-template-columns:44px minmax(0,1fr) 92px}
.exp .del.armed{width:auto;padding:0 8px;font-size:11px;font-weight:700;background:#9A3026;color:#FFF5F3;border-color:#9A3026}

@media (max-width:340px){
  .st-money{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-money > span:nth-child(3){grid-column:1 / -1}
}

/* ---------- вывод средств ---------- */
/* админка: заявки сотрудников на вывод */
.wd-sec{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.wd-sec h2{font-size:19px;margin:0}
.wd-sec > .muted{margin:0}
.wd-card{
  display:flex;flex-direction:column;gap:10px;
  background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:12px;padding:12px 14px;
}
.wd-top{display:flex;align-items:center;gap:10px}
.wd-who{display:flex;flex-direction:column;gap:1px;min-width:0;margin-right:auto}
.wd-who a{color:inherit;text-decoration:none}
.wd-who b{font-size:15px;line-height:1.2}
.wd-who > span{font-size:11.5px;color:var(--ink-faint)}
.wd-sum{font-family:var(--font-display);font-size:26px;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--accent)}
.wd-pay{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.wd-phone{font-size:17px;font-weight:700;letter-spacing:.01em;font-variant-numeric:tabular-nums;user-select:all}
.wd-bank{font-size:13px;color:var(--ink-soft)}
.wd-pay .btn{padding:7px 14px;font-size:12px;margin-left:auto}
.wd-warn{margin:0;font-size:12.5px}
.wd-act{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px}
.wd-act form{margin:0}
.wd-act .btn{padding:9px 18px;font-size:13px}
.btn.armed{background:#9A3026;color:#FFF5F3;border-color:#9A3026}
.wd-rej{flex:0 1 auto}
.wd-rej[open]{flex:1 1 100%}
.wd-rej > summary{
  list-style:none;display:inline-flex;align-items:center;cursor:pointer;
  padding:9px 18px;font-size:13px;font-weight:600;border-radius:999px;
  border:1px solid #C8958C;color:#9A3026;background:transparent;
}
.wd-rej > summary::-webkit-details-marker{display:none}
.wd-rej[open] > summary{margin-bottom:8px}
.wd-banner{display:block;text-decoration:none;margin:14px 0}
.exp.rej{opacity:.6}
.exp.rej .a{text-decoration:line-through}
.pay-st{font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:3px 7px;border-radius:999px;border:1px solid var(--line);color:var(--ink-faint);white-space:nowrap}
.pay-st.wait{color:var(--gild);border-color:var(--gild)}

/* кабинет сотрудника: вывод средств */
.wd-cta{display:flex;align-items:center;justify-content:space-between;flex-direction:row;flex-wrap:wrap;gap:10px 14px}
.wd-cta > span{flex:1 1 200px;font-size:13.5px;line-height:1.45}
.wd-cta .btn{padding:10px 20px;font-size:13.5px}
.wd-box p{margin:0}
.wd-big{font-family:var(--font-display);font-size:clamp(36px,11vw,48px);line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.wd-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:14px}
.wd-dl dt{color:var(--ink-faint);font-size:12.5px}
.wd-dl dd{margin:0;font-weight:700;overflow-wrap:anywhere}
.exp-ro .wd-lbl{font-weight:700}
.exp.wd-requested .wd-lbl{color:var(--gild)}
.exp.wd-paid .wd-lbl{color:var(--ok)}
.exp.wd-rejected{opacity:.65}
.exp.wd-rejected .wd-lbl{color:var(--ink-faint)}
.exp.wd-rejected .a{text-decoration:line-through}

/* ---------- сотрудники: результаты, подарки, удаление ---------- */
/* карточка в списке: четыре цифры — закреплено, продано, на какую сумму купили, заработано */
.st-res{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 12px;
  padding-top:9px;border-top:1px solid var(--line)}
@media (min-width:560px){ .st-res{grid-template-columns:repeat(4,minmax(0,1fr))} }
.st-res > span{display:flex;flex-direction:column;gap:1px;font-size:10.5px;color:var(--ink-faint);line-height:1.3;min-width:0}
.st-res b{font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.2;white-space:nowrap}
.st-res .m-ok b{color:var(--ok)}
.st-total{display:flex;flex-direction:column;gap:10px;border:1px dashed var(--line);border-radius:12px;padding:12px 14px}
.st-total .st-res{border-top:0;padding-top:0}
.st-sort{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:14px 0 0}
.st-sort .muted{margin-right:2px}
.st-sec{font-family:var(--font-body);font-size:13px;font-weight:700;letter-spacing:.02em;margin:16px 0 8px;color:var(--ink-soft)}

/* подарки: картинка, список в кабинете и строки в админке */
.gf-pic{
  position:relative;flex:0 0 auto;width:56px;height:56px;border-radius:12px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-tint);color:var(--accent);
}
.gf-pic .gf-ico{display:block}
.gf-pic.sm{width:36px;height:36px;border-radius:9px}
.gf-pic.sm .gf-ico{width:20px;height:20px}
.gf-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--surface-2)}
.panel.gifts h2{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px}
.panel.gifts.has-new{border-color:var(--accent)}
.gf-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.gf{
  display:flex;align-items:center;gap:12px;padding:10px 12px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
}
.gf.new{border-color:var(--accent);background:var(--accent-tint)}
.gf-t{display:flex;flex-direction:column;gap:2px;min-width:0;margin-right:auto}
.gf-t b{font-size:14.5px;line-height:1.3;overflow-wrap:anywhere}
.gf-note{font-size:12.5px;color:var(--ink-soft);line-height:1.4;overflow-wrap:anywhere}
.gf-d{font-size:11px;color:var(--ink-faint)}
.exp.exp-gift{grid-template-columns:36px minmax(0,1fr) 26px;align-items:start}
.exp-gift .ttl{font-weight:600;overflow-wrap:anywhere}
.exp-gift .gf-note{font-size:11.5px;color:var(--ink-soft)}
.exp-gift .kd{overflow-wrap:anywhere}
.gf-unseen{color:var(--accent);font-weight:600}
.st-gift,.st-new{display:flex;flex-direction:column;gap:14px}
.st-gift .hint,.st-new .hint{font-size:11.5px;line-height:1.4;color:var(--ink-faint)}

/* ---------- проверка начислений и заявка на вывод с меньшей суммой ---------- */
.wd-sum{text-align:right}
.wd-sum small{display:block;margin-top:4px;font-family:var(--font-body);font-size:10.5px;font-weight:500;line-height:1.2;color:var(--ink-faint)}
.aud-st{margin-left:6px;font-size:11.5px;font-weight:700;color:var(--ok)}
.aud-st.bad{color:var(--accent)}
.aud-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:2px 0 10px}
.aud-nums > span{display:flex;flex-direction:column;gap:1px;font-size:10.5px;color:var(--ink-faint);line-height:1.3;min-width:0}
.aud-nums b{font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.2;white-space:nowrap}
.aud-nums .m-ok b{color:var(--ok)}
.aud-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.aud-list li{font-size:12.5px;line-height:1.45;padding:8px 10px;border-radius:9px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);overflow-wrap:anywhere}
.aud-list a{font-weight:600;white-space:nowrap}
@media (max-width:340px){ .aud-nums{grid-template-columns:repeat(2,minmax(0,1fr))} }