/* Каталог П. Синяя шапка с печатью-монограммой по центру, засечки PT Serif,
   белая липкая полоса вкладок под шапкой, карточки с номерами, заявка — шторка справа,
   история — журнал с № п/п. На телефоне — круглая золотая кнопка заявки. */
@import url("https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400&family=PT+Sans:wght@400;700&display=swap");

:root{
  color-scheme:light;
  --navy:#13213f;--navy-2:#1d2f58;--navy-3:#0c1630;
  --gold:#b0904e;--gold-2:#d6bc84;--gold-soft:#f5efe1;
  --bg:#f3f2ee;--paper:#ffffff;--ink:#17191e;--ink-2:#454a55;--ink-3:#80858f;
  --rule:#dedbd3;--rule-2:#c9c5ba;--hover:#f1efe8;
  --ok:#1d3f6b;--ok-bg:#e5ecf6;--warn:#7a5a12;--warn-bg:#f6efdb;--wait:#5b4310;--wait-bg:#efe5cc;--bad:#7b1f24;--bad-bg:#f5e4e4;
  --serif:"PT Serif",Georgia,"Times New Roman",serif;
  --sans:"PT Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:max(24px,calc((100vw - 1240px)/2 + 24px));
  --topbar:56px;
}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--sans)}
h1,h2,h3{font-family:var(--serif);font-weight:700}
.f>span,.f>label,.search span{display:block;font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:5px;letter-spacing:.02em}
input,select{border-radius:2px}
input:focus,select:focus{outline:2px solid var(--navy);outline-offset:0;border-color:var(--navy)}
.link{border:0;background:none;padding:0;cursor:pointer;color:inherit;text-decoration:underline;text-underline-offset:3px}

/* печать-монограмма: круг с двойной золотой рамкой */
.seal{width:76px;height:76px;border-radius:50%;border:2px solid var(--gold);padding:4px;margin:0 auto}
.seal span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;border:1px solid var(--gold);
  font:700 34px/1 var(--serif);color:var(--gold-2);background:radial-gradient(circle,rgba(176,144,78,.12),transparent 70%)}
.crest-line{margin:0;font:italic 15px var(--serif);color:var(--gold-2);letter-spacing:.04em}

/* ---------- вход: весь экран синий, по центру «гербовая» карточка ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:32px 16px;background:var(--navy-3)
  radial-gradient(ellipse at 50% 0,var(--navy-2),var(--navy-3) 70%)}
.login-card{width:100%;max-width:440px;background:var(--paper);text-align:center;padding:36px 36px 30px;position:relative;
  outline:1px solid var(--gold);outline-offset:-10px;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.login-card .seal span{color:var(--navy);background:var(--gold-soft)}
.login-card .crest-line{color:var(--gold);margin-top:14px}
.login-card h1{font-size:26px;color:var(--navy);margin:4px 0 10px}
.login-fields{text-align:left}

/* ---------- шапка: печать и имя по центру ---------- */
/* верхняя полоса экранов — липкая и над шторкой: экраны переключаются всегда */
.topbar{position:sticky;top:0;z-index:45;height:var(--topbar);background:var(--navy-2);color:#fff;
  display:flex;justify-content:space-between;align-items:center;gap:16px;padding:0 var(--wrap);border-bottom:1px solid rgba(214,188,132,.25)}
.crest{background:var(--navy) linear-gradient(180deg,var(--navy-2),var(--navy));color:#fff;padding:0 var(--wrap) 26px;
  border-bottom:3px double var(--gold)}
.crest-center{text-align:center;padding-top:26px}
.crest-center h1{font-size:34px;letter-spacing:.01em;margin:14px 0 4px;line-height:1.15}
.views{display:flex;align-items:center;gap:22px}
.views button{border:0;background:none;color:rgba(255,255,255,.72);padding:4px 0;cursor:pointer;font-size:14px;letter-spacing:.03em;
  border-bottom:1px solid transparent}
.views button:hover{color:#fff}
.views button[aria-current="true"]{color:#fff;border-bottom-color:var(--gold-2)}
.views .v-ico{display:none}
.views .v-order{border:1px solid var(--gold);color:var(--gold-2);padding:6px 14px;border-radius:2px;font-weight:700}
.views .v-order:hover{background:rgba(176,144,78,.14)}
.views .v-order[aria-current="true"]{background:var(--gold);color:var(--navy-3);border-color:var(--gold)}
.views .count{font-weight:700}
.account{display:flex;align-items:center;gap:14px;font-size:13px;color:rgba(255,255,255,.65)}
.account .who{color:#fff}

/* ---------- полоса вкладок разделов + поиск ---------- */
.layout{display:block}
.index{position:sticky;top:var(--topbar);z-index:15;background:var(--paper);border-bottom:1px solid var(--rule);box-shadow:0 6px 18px -16px rgba(19,33,63,.6);
  display:grid;grid-template-columns:1fr 280px auto;align-items:center;gap:18px;padding:0 var(--wrap)}
.index .search{grid-column:2;grid-row:1}
.index .check{grid-column:3;grid-row:1}
#sections{grid-column:1;grid-row:1;list-style:none;margin:0;padding:0;display:flex;overflow-x:auto;scrollbar-width:none}
#sections::-webkit-scrollbar{display:none}
#sections a{display:flex;align-items:baseline;gap:6px;white-space:nowrap;padding:16px 16px 13px;color:var(--ink-2);text-decoration:none;
  font:700 14px var(--serif);border-bottom:3px solid transparent}
#sections a:hover{color:var(--navy)}
#sections a[aria-current="true"]{color:var(--navy);border-bottom-color:var(--gold)}
#sections .n{font:400 12px var(--sans);color:var(--ink-3)}
.search span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.search input{width:100%;padding:8px 12px 8px 34px;border:1px solid var(--rule-2);background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='6' cy='6' r='4.5' fill='none' stroke='%2380858f' stroke-width='1.4'/%3E%3Cpath d='M9.5 9.5L13 13' stroke='%2380858f' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat 12px center}
.check{display:flex;gap:8px;align-items:center;color:var(--ink-2);font-size:14px;cursor:pointer;white-space:nowrap}
.check input{accent-color:var(--navy);width:16px;height:16px;margin:0}

/* ---------- раздел: заголовок по центру ---------- */
.sheet{max-width:1240px;margin:0 auto;padding:34px 24px 72px}
.loading,.nothing{padding:32px 0;color:var(--ink-3);font-size:15px;text-align:center}
.part{margin-bottom:40px}
.part-head{display:block;text-align:center;cursor:default!important;padding-bottom:4px}
.part-head h2{font-size:30px;color:var(--navy)}
.part-head h2::after{content:"";display:block;width:64px;height:1px;background:var(--gold);margin:12px auto 0;box-shadow:0 3px 0 var(--gold)}
.part-head .n{display:block;margin-top:12px;color:var(--ink-3);font:italic 14px var(--serif)}
.part .note{margin:16px auto 0;color:var(--ink-2);max-width:72ch;text-align:center}
.part .contract{margin:10px auto 0;color:var(--ink-3);font-size:13px;max-width:80ch;text-align:center;font-style:italic;font-family:var(--serif)}
.hero{margin:22px auto 0;max-width:820px;display:flex;gap:18px;align-items:flex-end;background:var(--paper);border:1px solid var(--rule);padding:12px}
.hero img{width:300px}
.hero figcaption{font:italic 14px var(--serif);color:var(--ink-2)}

/* карточки: номер, артикул, золотая линия */
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:22px;margin-top:28px;counter-reset:card}
.grp{grid-column:1/-1;display:flex;align-items:baseline;gap:14px;padding:10px 0 8px;border-bottom:1px solid var(--gold);
  font:700 19px/1.2 var(--serif);color:var(--navy)}
.grp:not(:first-child){margin-top:14px}
.grp span{font:italic 400 14px/1.2 var(--serif);color:var(--gold)}
.it{counter-increment:card;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--rule);position:relative;
  transition:box-shadow .15s,border-color .15s}
.it:hover{border-color:var(--gold);box-shadow:0 14px 30px -22px rgba(19,33,63,.55)}
.it::before{content:"№ " counter(card,decimal-leading-zero);position:absolute;top:10px;left:10px;z-index:1;
  font:700 11px/1 var(--sans);letter-spacing:.08em;color:var(--navy);background:var(--gold-soft);border:1px solid var(--gold-2);padding:4px 7px}
.it .ph{display:block;width:100%;aspect-ratio:1/1;border:0;background:#fff;border-bottom:1px solid var(--rule)}
.it .ph img{width:100%;height:100%;object-fit:contain;padding:14px}
.it .ph.empty{background:var(--paper) repeating-linear-gradient(45deg,transparent 0 12px,rgba(176,144,78,.07) 12px 13px)}
.it .body{padding:16px 18px 0;flex:1}
.it .art{font-size:12px;font-weight:700;color:var(--navy);letter-spacing:.06em;text-transform:uppercase;padding-bottom:8px;border-bottom:1px solid var(--gold-2)}
.it .code{display:inline-block;margin-left:8px;font-weight:400;color:var(--ink-3);text-transform:none;letter-spacing:0}
.it h3{font-size:20px;line-height:1.25;margin:10px 0 0;color:var(--ink)}
.meta{color:var(--ink-2);font-size:14px;margin:8px 0 0}
.fine{color:var(--ink-3);font:italic 12.5px/1.45 var(--serif);margin:8px 0 0}
.na{color:var(--ink-3)}
.opts{display:flex;gap:8px;margin:12px 0 0;flex-wrap:wrap}
.opts select{flex:1 1 120px;min-width:0;padding:8px 30px 8px 10px;border:1px solid var(--rule-2);cursor:pointer;
  -webkit-appearance:none;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2313213f' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 10px center}
.opts select:has(option[value=""]:checked){color:var(--ink-3)}
.it .side{padding:14px 18px 18px;margin-top:14px;background:var(--bg);border-top:1px solid var(--rule);display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:baseline}
.it .price{font-family:var(--serif);font-size:23px;font-weight:700;color:var(--navy)}
.unit{font:400 13px var(--sans);color:var(--ink-3);margin-left:6px}
.ask{font:italic 15px var(--serif);color:var(--ink-2)}
.it .stock{font-size:13px;color:var(--ink-3);text-align:right}
.stock .yes{color:var(--ok);font-weight:700}
.stock .zero{color:var(--bad)}
.it .buy{grid-column:1/-1;display:flex;gap:8px;margin-top:10px}
.qty{width:72px;padding:9px 8px;border:1px solid var(--rule-2);background:#fff}
.btn{padding:9px 16px;border:1px solid var(--navy);background:#fff;color:var(--navy);cursor:pointer;border-radius:2px;font-weight:700;white-space:nowrap}
.btn:hover{background:var(--hover)}
.btn.solid,.it .add{background:var(--navy);color:#fff}
.btn.solid:hover,.it .add:hover{background:var(--navy-2)}
.it .add{flex:1}
.btn:disabled{opacity:.45;cursor:default}
.btn.wide{width:100%;padding:12px 16px}
.added{animation:flash 1s ease-out}
@keyframes flash{from{box-shadow:0 0 0 3px var(--gold)}to{box-shadow:0 0 0 0 transparent}}

/* ---------- заявка: шторка справа ---------- */
.order{position:fixed;top:var(--topbar);right:0;bottom:0;z-index:40;width:min(500px,100vw);background:var(--paper);overflow:auto;
  box-shadow:-24px 0 60px -20px rgba(12,22,48,.55);transform:translateX(105%);transition:transform .25s ease;visibility:hidden;border-left:3px double var(--gold)}
body[data-view="order"] .order{transform:none;visibility:visible}
body[data-view="order"] .scrim{display:block;position:fixed;inset:var(--topbar) 0 0 0;z-index:35;background:rgba(12,22,48,.5);cursor:pointer}
.order-top{position:sticky;top:0;z-index:2;background:var(--navy);color:#fff;padding:18px 28px;display:flex;justify-content:space-between;align-items:center;
  border-bottom:2px solid var(--gold)}
.order-kicker{font:italic 13px var(--serif);color:var(--gold-2)}
.order-top h2{font-size:24px}
.order-top .close{display:inline-block;color:#fff;font-size:14px}
.order-body{padding:22px 28px 32px}
.block{margin-bottom:26px}
.block h3{font-size:18px;color:var(--navy);display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:8px;border-bottom:1px solid var(--gold-2);margin-bottom:10px}
.count{font:700 14px var(--sans);color:var(--ink-3)}
.lines td{padding:10px 0;border-bottom:1px solid var(--rule);vertical-align:top;font-size:14px}
.lines .l-art{font-weight:700;color:var(--navy);white-space:nowrap;padding-right:10px;font-size:13px}
.lines .l-name small{display:block;color:var(--ink-3)}
.lines .l-sum{text-align:right;white-space:nowrap;padding-left:10px;font-weight:700}
.lines .l-qty{display:flex;align-items:center;gap:6px;margin-top:6px;color:var(--ink-2);flex-wrap:wrap}
.lines .l-qty input{width:56px;padding:4px 6px;border:1px solid var(--rule-2)}
.lines .rm{color:var(--bad);font-size:13px;padding:0 0 0 6px}
.empty{color:var(--ink-3);font:italic 14px var(--serif);margin:6px 0 0}
.total{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0 0;font-size:16px}
.total strong{font-family:var(--serif);font-size:24px;color:var(--navy)}
.total-note{font-size:13px;color:var(--ink-3);margin:4px 0 0}
.f{display:block;margin-bottom:14px}
.f input{width:100%;padding:10px 12px;border:1px solid var(--rule-2);background:#fff}
.f input[aria-invalid="true"]{border-color:var(--bad);box-shadow:0 0 0 2px var(--bad-bg)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wholesale .pair{grid-template-columns:1fr}
.mode{margin:0 0 14px;font:italic 14px var(--serif);color:var(--navy);background:var(--gold-soft);padding:10px 12px;border-left:3px solid var(--gold)}
#deliveryOptions{background:#fff;border:1px solid var(--navy);border-top:0;box-shadow:0 12px 24px -16px rgba(19,33,63,.5)}
#deliveryOptions li{padding:8px 12px;font-size:14px;border-bottom:1px solid var(--rule)}
#deliveryOptions li[aria-selected="true"],#deliveryOptions li:hover{background:var(--hover)}
#deliveryOptions li small{color:var(--ink-3);margin-left:6px}
.err{margin:4px 0 12px;font-size:14px;color:var(--bad);background:var(--bad-bg);padding:8px 12px}
.actions{display:flex;gap:8px;margin-top:10px}
.actions .btn{flex:1}

/* статусы — печати-штампы */
.status{display:inline-block;font:700 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;margin-left:10px;vertical-align:middle;
  border:1.5px solid currentColor;color:var(--ink-2);background:transparent}
.s-accepted,.s-confirmed,.s-collected,.s-shipped,.s-delivered{color:var(--ok);background:var(--ok-bg)}
.s-processing{color:var(--warn);background:var(--warn-bg)}
.s-waiting{color:var(--wait);background:var(--wait-bg);border-style:double;border-width:3px}
.s-rejected,.s-cancelled,.s-returned{color:var(--bad);background:var(--bad-bg)}
.result{border:1px solid var(--gold-2);padding:16px 18px;background:var(--gold-soft)}
.result h3{border:0;padding:0;margin-bottom:8px}
.res-line{margin:0 0 8px;font-weight:700}
.hint{font-size:14px;color:var(--ink-2);margin:8px 0}
.shortage{margin:8px 0 14px;padding:0;list-style:none;font-size:14px}
.shortage li{padding:6px 10px;background:#fff;border-left:3px solid var(--warn);margin-bottom:4px}
.shortage span{color:var(--ink-2)}

/* ---------- история: журнал с № п/п ---------- */
.history{max-width:1240px;margin:0 auto;padding:34px 24px 72px}
.history-top{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:12px;border-bottom:3px double var(--gold)}
.history-top .order-kicker{color:var(--gold)}
.history-top h2{font-size:30px;color:var(--navy)}
.history-note{font:italic 14px var(--serif);color:var(--ink-2);margin:12px 0 18px}
#historyList{counter-reset:row;background:var(--paper);border:1px solid var(--rule)}
#historyList>.nothing,#historyList>.loading{margin:0}
.h-order{counter-increment:row;display:grid;grid-template-columns:64px 1fr;column-gap:0;border-bottom:1px solid var(--rule)}
.h-order:last-child{border-bottom:0}
.h-order::before{content:counter(row);grid-row:1/span 5;display:flex;justify-content:center;padding-top:16px;
  font:700 18px var(--serif);color:var(--navy);background:var(--gold-soft);border-right:1px solid var(--rule)}
.h-order>*{grid-column:2;margin-left:20px;margin-right:20px}
.h-order header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 0 10px;border-bottom:1px dashed var(--rule)}
.h-order header b{font-family:var(--serif);font-size:18px;color:var(--navy)}
.h-order dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px 24px;margin:12px 20px}
.h-order dt{font-size:11px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em}
.h-order dd{margin:2px 0 0;font-size:14px}
.h-lines{margin:0 20px 14px;padding:0 0 0 18px;font-size:14px;color:var(--ink-2)}
.h-order .hint,.h-order .shortage{margin-bottom:14px}

.toast{background:var(--navy);color:#fff;padding:12px 18px;font-size:14px;border-left:4px solid var(--gold);box-shadow:0 12px 30px -12px rgba(12,22,48,.6)}
.gallery::backdrop{background:rgba(12,22,48,.94)}
.gallery img{background:#fff;outline:1px solid var(--gold);outline-offset:6px}
.g-cap{color:var(--gold-2);font:italic 15px var(--serif)}
.g-close,.g-nav{border:1px solid var(--gold);background:transparent;color:#fff;padding:8px 14px}
.g-close:hover,.g-nav:hover{background:rgba(176,144,78,.2)}
.btn:focus-visible,.views button:focus-visible,#sections a:focus-visible,.thumb:focus-visible,.g-close:focus-visible,.g-nav:focus-visible,.to-order:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- планшет ---------- */
@media (max-width:980px){
  .index{grid-template-columns:1fr auto;gap:0 14px;padding-top:10px}
  .index .search{grid-column:1;grid-row:1}
  .index .check{grid-column:2;grid-row:1}
  #sections{grid-column:1/-1;grid-row:2}
}

/* ---------- телефон ---------- */
@media (max-width:640px){
  :root{--topbar:52px}
  .topbar{padding:0 14px}
  .crest{padding:0 14px 16px}
  .views{gap:4px}
  .views button{display:flex;flex-direction:column;align-items:center;gap:1px;font-size:11px;padding:2px 6px;border:0}
  .views .v-ico{display:block;font:700 17px/1 var(--serif);color:var(--gold-2)}
  .views .v-order{display:none}
  .account{flex-direction:row;align-items:center;gap:4px;font-size:12px}
  .crest-center{padding-top:12px}
  .seal{width:52px;height:52px;padding:3px}
  .seal span{font-size:23px}
  .crest-center h1{font-size:22px;margin:8px 0 2px}
  .crest-line{font-size:13px}
  .index{padding:8px 14px 0}
  .index .check{font-size:13px}
  #sections a{padding:12px 12px 10px;font-size:13px}
  .sheet,.history{padding:22px 14px 96px}
  .part-head h2,.history-top h2{font-size:24px}
  .items{grid-template-columns:1fr;gap:16px}
  .it .ph{aspect-ratio:auto;height:300px}   /* явная высота: иначе в кнопке height:100% не работает и фото обрезается */
  .hero{flex-direction:column;align-items:stretch}
  .hero img{width:100%}
  .order-top{padding:14px 16px}
  .order-body{padding:18px 16px 32px}
  .pair{grid-template-columns:1fr}
  .login-card{padding:30px 22px 24px}
  .h-order{grid-template-columns:40px 1fr}
  .h-order>*{margin-left:12px;margin-right:12px}
  .h-order dl{margin:10px 12px}
  .h-lines{margin:0 12px 12px}
  .h-order header{flex-wrap:wrap}
  /* золотая полоса заявки внизу, во всю ширину: не закрывает «Добавить» и наличие в карточках */
  .to-order{display:block;position:fixed;left:14px;right:14px;bottom:12px;z-index:30;padding:13px 16px;
    border:1px solid var(--gold-2);background:var(--gold);color:var(--navy-3);cursor:pointer;
    font:700 15px/1.2 var(--sans);letter-spacing:.02em;box-shadow:0 10px 24px -10px rgba(12,22,48,.7)}
  .to-order span{font-family:var(--serif);font-size:17px}
  body[data-view="history"] .to-order,body[data-view="order"] .to-order{display:none}
}