/* Та же пара шрифтов, что и в PDF (см. server/pdf-templates/styles.css): Cera Pro — основной,
   Roboto Mono — для цифр (цены/кол-во/суммы). У Cera Pro нет начертания под вес 600
   (используется в кнопках/подписях) — переиспользуем Medium, как и в PDF. */
@font-face { font-family: "Cera Pro"; font-weight: 100; font-style: normal; src: url("/fonts/cera-pro/CeraPro-Thin.woff2") format("woff2"); }
@font-face { font-family: "Cera Pro"; font-weight: 300; font-style: normal; src: url("/fonts/cera-pro/CeraPro-Light.woff2") format("woff2"); }
@font-face { font-family: "Cera Pro"; font-weight: 400; font-style: normal; src: url("/fonts/cera-pro/CeraPro-Regular.woff2") format("woff2"); }
@font-face { font-family: "Cera Pro"; font-weight: 400; font-style: italic; src: url("/fonts/cera-pro/CeraPro-RegularItalic.woff2") format("woff2"); }
@font-face { font-family: "Cera Pro"; font-weight: 500; font-style: normal; src: url("/fonts/cera-pro/CeraPro-Medium.woff2") format("woff2"); }
@font-face { font-family: "Cera Pro"; font-weight: 600; font-style: normal; src: url("/fonts/cera-pro/CeraPro-Medium.woff2") format("woff2"); }
@font-face { font-family: "Cera Pro"; font-weight: 700; font-style: normal; src: url("/fonts/cera-pro/CeraPro-Bold.woff2") format("woff2"); }
@font-face { font-family: "Cera Pro"; font-weight: 900; font-style: normal; src: url("/fonts/cera-pro/CeraPro-Black.woff2") format("woff2"); }
@font-face { font-family: "Roboto Mono"; font-weight: 100 900; font-style: normal; src: url("/fonts/roboto-mono/RobotoMono-Variable.ttf") format("truetype"); }

:root{
  --ink:#111111; --gray-1:#6b6b6b; --gray-2:#9a9a9a; --gray-line:#dcdcdc;
  --bg:#ffffff; --panel:#fafafa;
}
*{box-sizing:border-box;}
/* Все три защищённые страницы (index/admin/superadmin) проверяют сессию асинхронно уже после того,
   как HTML отрисован — без этого пользователь на долю секунды видит личный кабинет ДО того, как
   его редиректнёт на логин (если сессии нет/истекла). Прячем контент, пока JS не подтвердит сессию
   (см. requireLogin/requireRop/requireAdmin — они снимают visibility после успешной проверки). */
#app,#admin-app{visibility:hidden;}
html,body{margin:0;padding:0;background:var(--panel);color:var(--ink);
  font-family:"Cera Pro","Helvetica Neue",Arial,"Segoe UI",sans-serif;}
#app{max-width:1280px;margin:0 auto;padding:32px 24px 130px;}

.brand{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:10px;}
.brand-logo{height:22px;width:auto;display:block;}
.brand .sub{color:var(--gray-1);font-size:12px;margin-top:6px;}
.upload-chip{display:flex;align-items:center;gap:10px;}
.upload-chip label.file-btn{border:1px solid var(--gray-line);padding:8px 14px;border-radius:2px;font-size:12px;cursor:pointer;background:#fff;}
.upload-chip label.file-btn:hover{border-color:var(--ink);}
.upload-chip input[type=file]{display:none;}
.catalog-status{font-size:11px;color:var(--gray-1);}

.card{background:var(--bg);border:1px solid var(--gray-line);border-radius:2px;padding:22px 24px;margin-bottom:20px;}
.card h2{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-1);
  margin:0 0 16px;font-weight:600;border-bottom:1px solid var(--gray-line);padding-bottom:10px;}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.field label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--gray-1);margin-bottom:5px;}
.field input{width:100%;min-width:0;padding:8px 9px;border:1px solid var(--gray-line);border-radius:2px;font-size:13px;font-family:inherit;color:var(--ink);}
#sel-price-display{font-family:"Roboto Mono","Helvetica Neue",monospace;}
.field input:focus{outline:none;border-color:var(--ink);}
.autocomplete-field{position:relative;}
.autocomplete-list{display:none;position:absolute;top:100%;left:0;right:0;z-index:20;margin-top:2px;
  background:#fff;border:1px solid var(--gray-line);border-radius:2px;max-height:180px;overflow-y:auto;
  box-shadow:0 8px 20px rgba(0,0,0,.1);}
.autocomplete-list.open{display:block;}
.autocomplete-item{padding:8px 10px;font-size:13px;cursor:pointer;}
.autocomplete-item:hover,.autocomplete-item.active{background:var(--panel);}

/* ===================== МАГАЗИН ===================== */
.shop-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;margin-bottom:24px;align-items:start;}
.shop-main{background:var(--bg);border:1px solid var(--gray-line);border-radius:2px;padding:22px 24px;min-width:0;}

.shop-search-row{display:flex;gap:8px;margin-bottom:14px;}
.shop-search{width:100%;padding:10px 12px;border:1px solid var(--gray-line);border-radius:2px;font-size:14px;font-family:inherit;color:var(--ink);flex:1;min-width:0;}
.shop-search:focus{outline:none;border-color:var(--ink);}
.shop-sort{width:auto;padding:10px 10px;border:1px solid var(--gray-line);border-radius:2px;font-size:13px;font-family:inherit;color:var(--ink);flex-shrink:0;}

.cat-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;}
.cat-pill{padding:6px 14px;border-radius:20px;border:1px solid var(--gray-line);background:#fff;font-size:12px;color:var(--gray-1);white-space:nowrap;}
.cat-pill:hover{border-color:var(--ink);color:var(--ink);}
.cat-pill.active{background:var(--ink);color:#fff;border-color:var(--ink);}

/* Плавающая панель — не задание, куда листать: остаётся на месте, пока выбираешь отделку/цвет,
   независимо от того, где в сетке товаров вы сейчас находитесь. */
.quick-add{position:fixed;left:24px;bottom:90px;width:420px;max-width:calc(100vw - 48px);z-index:40;
  background:#fff;border:1px solid var(--gray-line);border-radius:4px;padding:16px 18px;
  box-shadow:0 12px 32px rgba(0,0,0,.14);}
.quick-add .picked-item{margin:0 0 12px;background:transparent;border:none;padding:0;}
.quick-add .add-grid2{grid-template-columns:1fr;gap:10px;align-items:stretch;}
.quick-add .add-grid2 #btn-add{height:38px;}

.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;}
.product-card{border:1px solid var(--gray-line);border-radius:2px;padding:10px;cursor:pointer;background:#fff;}
.product-card:hover{border-color:var(--ink);}
.product-card.active{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);}
.product-card-photo{height:84px;border-radius:2px;background:var(--panel);display:flex;align-items:center;justify-content:center;margin-bottom:8px;overflow:hidden;}
.product-card-thumb{max-width:100%;max-height:100%;object-fit:contain;}
.product-card-thumb-empty{width:100%;height:100%;background:#f0f0f0;}
.product-card-name{font-size:12px;font-weight:500;line-height:1.3;margin-bottom:4px;}
.product-card-price{font-size:11px;color:var(--gray-1);font-family:"Roboto Mono","Helvetica Neue",monospace;}
.product-card-compat{font-size:10px;color:var(--gray-2);margin-top:4px;line-height:1.3;}
.product-card-stop{opacity:.55;}
.product-card-stop-badge{display:inline-block;font-size:9px;text-transform:uppercase;letter-spacing:.03em;color:#8a2f2f;
  background:#f4d9d9;border-radius:20px;padding:2px 8px;margin-top:4px;}
.product-card-featured{font-size:10px;color:#8a6a12;font-weight:600;margin-bottom:2px;}
.cat-pill-kits{font-weight:600;}
.kit-card-badge{display:inline-block;font-size:9px;text-transform:uppercase;letter-spacing:.04em;color:var(--gray-1);
  background:var(--panel);border:1px solid var(--gray-line);border-radius:20px;padding:2px 8px;margin-bottom:4px;}

.schemes-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-top:16px;}
.scheme-card{border:1px solid var(--gray-line);border-radius:2px;padding:10px;background:#fff;cursor:grab;}
.scheme-card.scheme-card-dragover{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);}
.scheme-card-photo{height:110px;border-radius:2px;background:var(--panel);display:flex;align-items:center;justify-content:center;margin-bottom:8px;overflow:hidden;position:relative;}
.scheme-card-drag-hint{position:absolute;top:4px;left:4px;font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--gray-1);
  background:rgba(255,255,255,.85);border-radius:2px;padding:2px 5px;}
.scheme-card-photo img{max-width:100%;max-height:100%;object-fit:contain;}
.scheme-card-caption{width:100%;padding:6px 8px;border:1px solid var(--gray-line);border-radius:2px;font-size:12px;font-family:inherit;margin-bottom:8px;}
.scheme-card-remove{width:100%;font-size:11px;color:var(--gray-1);background:none;border:1px solid var(--gray-line);border-radius:2px;padding:5px;cursor:pointer;}
.scheme-card-remove:hover{color:#c0392b;border-color:#c0392b;}

.cart-sidebar{position:sticky;top:20px;background:var(--bg);border:1px solid var(--gray-line);border-radius:2px;
  padding:18px;max-height:calc(100vh - 40px);display:flex;flex-direction:column;}
.cart-header{display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gray-1);border-bottom:1px solid var(--gray-line);padding-bottom:10px;margin-bottom:10px;font-weight:600;}
.cart-badge{background:var(--ink);color:#fff;border-radius:20px;padding:1px 9px;font-size:11px;}
.cart-items{overflow-y:auto;flex:1;min-height:0;}
.cart-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #f0f0f0;}
.cart-item-thumb{width:34px;height:34px;border-radius:2px;object-fit:cover;flex-shrink:0;border:1px solid var(--gray-line);background:#fff;}
.cart-item-thumb-empty{background:#f0f0f0;}
.cart-item-text{flex:1;min-width:0;}
.cart-item-text .n{font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cart-item-text .m{font-size:11px;color:var(--gray-1);margin-top:2px;}
.cart-empty{color:var(--gray-2);font-size:12px;padding:20px 0;text-align:center;}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;margin-top:6px;border-top:1px solid var(--gray-line);}
.cart-total .label{font-size:11px;font-weight:400;color:var(--gray-1);text-transform:uppercase;}
.cart-total span:last-child{font-size:16px;font-weight:600;font-family:"Roboto Mono","Helvetica Neue",monospace;}
.cart-checkout-btn{width:100%;margin-top:12px;}

.checkout-section{border-top:2px solid var(--gray-line);padding-top:24px;}

.picked-item{display:flex;justify-content:space-between;align-items:flex-start;background:var(--panel);
  border:1px solid var(--gray-line);border-radius:2px;padding:12px 14px;margin:14px 0;}
.picked-item .n{font-size:14px;font-weight:600;}
.picked-item .m{font-size:11px;color:var(--gray-1);margin-top:3px;}
.picked-item button{font-size:11px;color:var(--gray-1);background:none;border:none;text-decoration:underline;padding:2px;}
.picked-item button:hover{color:var(--ink);}
.add-grid2{display:grid;grid-template-columns:minmax(0,1fr) 100px minmax(0,1fr) 70px minmax(120px,auto);gap:12px;align-items:end;}
label.lbl{display:block;font-size:10px;text-transform:uppercase;color:var(--gray-1);margin-bottom:5px;}
select{width:100%;min-width:0;padding:8px 9px;border:1px solid var(--gray-line);border-radius:2px;font-size:13px;font-family:inherit;background:#fff;color:var(--ink);}
select:focus{outline:none;border-color:var(--ink);}
select:disabled{background:#f4f4f4;color:#aaa;}

button{cursor:pointer;font-family:inherit;}
.btn-primary{background:var(--ink);color:#fff;border:none;padding:9px 16px;border-radius:2px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;flex-shrink:0;}
.btn-primary:hover{opacity:.85;}
.btn-primary:disabled{background:#ccc;cursor:not-allowed;}
.btn-ghost{background:none;border:1px solid var(--gray-line);padding:8px 14px;border-radius:2px;font-size:12px;color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-icon{background:none;border:none;color:var(--gray-2);font-size:15px;padding:2px 6px;}
.btn-icon:hover{color:#c0392b;}

.item-hint{font-size:11px;color:var(--gray-1);margin-top:4px;line-height:1.5;max-width:760px;}
.kit-components{border-top:1px solid var(--gray-line);margin-top:2px;padding-top:10px;
  display:flex;flex-direction:column;gap:8px;}
.kit-component-row{display:flex;align-items:center;gap:10px;min-height:52px;}
.kit-component-thumb{width:32px;height:32px;border-radius:2px;object-fit:contain;flex-shrink:0;border:1px solid var(--gray-line);background:#fff;}
.kit-component-thumb-empty{width:32px;height:32px;border-radius:2px;background:#f0f0f0;flex-shrink:0;}
.kit-component-text{flex:1;min-width:0;}
.kit-component-text .n{font-size:11px;font-weight:500;line-height:1.3;}
.kit-component-text .m{font-size:10px;color:var(--gray-1);margin-top:1px;}
.kit-component-price{font-size:11px;color:var(--gray-1);white-space:nowrap;font-family:"Roboto Mono","Helvetica Neue",monospace;}
.kit-component-select,.kit-finish-select{width:100%;padding:6px 7px;font-size:11px;font-family:inherit;margin-top:2px;}
.kit-optionals{border-top:1px solid var(--gray-line);margin-top:10px;padding-top:10px;
  display:flex;flex-direction:column;gap:8px;}
.kit-optionals-label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--gray-1);}
.kit-optional-row{display:flex;align-items:center;gap:10px;cursor:pointer;}
.kit-optional-row input[type="checkbox"]{flex-shrink:0;}

table.lines{width:100%;border-collapse:collapse;font-size:13px;}
table.lines th{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-1);text-align:left;
  font-weight:600;padding:6px 8px;border-bottom:1px solid var(--gray-line);}
table.lines td{padding:9px 8px;border-bottom:1px solid var(--gray-line);vertical-align:middle;}
table.lines td.num{text-align:right;font-variant-numeric:tabular-nums;font-family:"Roboto Mono","Helvetica Neue",monospace;}
table.lines tr.cat-head td{padding-top:16px;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--gray-1);border-bottom:none;font-weight:600;}
table.lines tr.cat-head .disc-tag{background:#eee;color:#555;border-radius:10px;padding:2px 8px;font-size:9px;text-transform:none;letter-spacing:0;margin-left:8px;}
.qty-input{width:52px;padding:5px 6px;border:1px solid var(--gray-line);border-radius:2px;text-align:right;font-family:"Roboto Mono","Helvetica Neue",monospace;}
.color-dot{width:14px;height:14px;border-radius:3px;display:inline-block;vertical-align:middle;margin-right:6px;border:1px solid rgba(0,0,0,.15);}
.item-name{font-weight:500;}
.item-desc{color:var(--gray-1);font-size:11px;margin-top:2px;max-width:320px;}
.empty{color:var(--gray-2);font-size:13px;padding:22px 0;text-align:center;}

.discounts{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.override-row{display:grid;grid-template-columns:minmax(0,1.4fr) 90px minmax(90px,auto);gap:8px;align-items:stretch;margin-top:8px;}
.override-row select, .override-row input{height:36px;}
.override-row .btn-primary{height:36px;padding:0 16px;white-space:nowrap;}
.totals{margin-top:18px;padding-top:14px;border-top:1px solid var(--gray-line);}
.totals-row{display:flex;justify-content:space-between;padding:5px 0;font-size:13px;}
.totals-row.grand{font-size:17px;font-weight:600;padding-top:10px;margin-top:6px;border-top:1px solid var(--ink);}
.totals-row .label{color:var(--gray-1);}
.totals-row>div:last-child{font-family:"Roboto Mono","Helvetica Neue",monospace;}

.footer-bar{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--gray-line);
  padding:14px 24px;display:flex;justify-content:flex-end;gap:12px;align-items:center;}
.footer-bar .status{color:var(--gray-1);font-size:12px;margin-right:auto;}

.note{font-size:11px;color:var(--gray-2);margin-top:10px;line-height:1.5;}

.link-btn{background:none;border:none;color:var(--gray-1);text-decoration:underline;font-size:12px;padding:2px 6px;cursor:pointer;}
.link-btn:hover{color:var(--ink);}

.fx-rate-row{display:flex;gap:6px;}
.fx-rate-row input{flex:1;min-width:0;}
.fx-rate-row .btn-ghost{white-space:nowrap;padding:8px 10px;}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:90;
  background:var(--ink);color:#fff;font-size:13px;padding:12px 16px;border-radius:2px;
  display:flex;align-items:center;gap:14px;box-shadow:0 10px 30px rgba(0,0,0,.25);}
.toast button{background:none;border:none;color:#fff;text-decoration:underline;font-size:13px;cursor:pointer;padding:0;white-space:nowrap;}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:80;display:flex;align-items:center;justify-content:center;padding:24px;}
.modal-card{background:#fff;border-radius:2px;max-width:960px;width:100%;max-height:82vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.25);}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--gray-line);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-1);font-weight:600;gap:16px;}
.modal-header-right{display:flex;align-items:center;gap:10px;}
.modal-search{padding:7px 10px;border:1px solid var(--gray-line);border-radius:2px;font-size:12px;font-family:inherit;
  text-transform:none;letter-spacing:normal;font-weight:400;width:240px;}
.modal-body{overflow-y:auto;flex:1;}
.kp-table{width:100%;border-collapse:collapse;font-size:13px;}
.kp-table th{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-1);text-align:left;
  font-weight:600;padding:10px 22px;border-bottom:1px solid var(--gray-line);position:sticky;top:0;background:#fff;}
.kp-table td{padding:11px 22px;border-bottom:1px solid var(--gray-line);vertical-align:middle;}
.kp-table td.num{text-align:right;font-variant-numeric:tabular-nums;font-family:"Roboto Mono","Helvetica Neue",monospace;}

/* ===================== МОБИЛЬНАЯ ВЕРСИЯ ===================== */
@media (max-width: 900px) {
  .shop-layout{grid-template-columns:1fr;}
  .cart-sidebar{position:static;max-height:none;}
}

@media (max-width: 640px) {
  #app{padding:16px 12px 160px;}
  .brand{margin-bottom:16px;}
  .brand-logo{height:18px;}
  .brand .sub{display:none;}
  #catalog-status{display:none;}
  .upload-chip{flex-wrap:wrap;row-gap:6px;}
  .card, .shop-main{padding:16px;}
  .grid{grid-template-columns:1fr;gap:10px;}
  .discounts{grid-template-columns:1fr;gap:16px;}
  .override-row{grid-template-columns:1fr;gap:8px;}
  .add-grid2{grid-template-columns:1fr;}
  .product-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;}
  .schemes-list{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;}

  .quick-add{left:10px;right:10px;bottom:74px;width:auto;max-width:none;padding:14px;}

  table.lines{display:block;overflow-x:auto;}
  .item-desc{max-width:220px;}

  .modal-overlay{padding:0;}
  .modal-card{max-height:100vh;height:100%;border-radius:0;}
  .modal-header{padding:14px 16px;flex-wrap:wrap;gap:8px;}
  .kp-table{display:block;overflow-x:auto;}
  .kp-table th, .kp-table td{padding:9px 14px;}

  .footer-bar{padding:10px 12px;flex-wrap:wrap;row-gap:8px;}
  .footer-bar .status{order:-1;width:100%;margin-right:0;}
  /* .btn-primary в базовых стилях — white-space:nowrap + flex-shrink:0 (см. выше в файле);
     без сброса обоих флекс-элемент с однострочным текстом не сжимается меньше своей ширины
     и распирает footer-bar за пределы экрана — отсюда горизонтальный оверфлоу всей страницы. */
  .footer-bar .btn-ghost, .footer-bar .btn-primary{flex:1;min-width:0;text-align:center;white-space:normal;}
}