/* ============================================================
   Design tokens
   Grounded in the subject: fired clay, grout lines, concrete,
   warehouse stock tags. Not a generic SaaS or cream/terracotta kit.
   ============================================================ */
:root{
  --bg:        #EFF2F1;   /* light, cool near-white */
  --surface:   #FFFFFF;   /* card surface — pure white for max lightness */
  --surface-2: #E8EEED;   /* recessed surface (inputs, chips) */
  --ink:       #23262A;   /* charcoal text */
  --ink-soft:  #6D7478;   /* muted secondary text */
  --ink-faint: #9CA3A6;
  --line:      #E0E6E4;   /* light divider */
  --line-strong:#CBD4D2;

  --price:     #4B6E4E;   /* green — all prices */
  --price-tint:#E1EADF;

  --stock:     #2F6690;   /* blue — stock text */
  --stock-tint:#E4EFF5;

  --blue:      #2F6690;   /* blue — links / nav / secondary interactive (same hue as stock) */
  --blue-tint: #E4EFF5;

  --sky:       #CFE7F5;   /* pastel light blue — primary button fill */
  --sky-dark:  #B7DAEC;   /* pressed state */
  --sky-ink:   #0F4C66;   /* deep blue text/icon on pastel-blue button */

  --amber:     #92661F;   /* low stock warning */
  --amber-tint:#F2E5CB;

  --danger:    #A3402B;   /* form validation errors only */

  --radius-s: 3px;
  --radius-m: 6px;
  --shadow-card: 0 1px 0 rgba(35,38,42,.05);
  --shadow-pop: 0 10px 30px rgba(35,38,42,.16);

  --topbar-h: 56px;
  --topbar-total: 56px;
  --font-ui: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-ui);
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
button{ font-family:inherit; }
img{ display:block; max-width:100%; }
button{ cursor:pointer; }
::selection{ background:var(--blue-tint); }

/* tabular figures for anything price/quantity related */
.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* ============================================================
   Top bar
   ============================================================ */
.topbar{
  position:sticky; top:0; z-index:40;
  min-height:var(--topbar-h);
  display:flex; align-items:center; gap:4px;
  padding:6px 6px 0;
  padding-top:calc(env(safe-area-inset-top, 0px) + 6px);
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.topbar[hidden]{ display:none; }
.iconbtn{
  width:40px; height:40px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; color:var(--ink);
  border-radius:var(--radius-m);
  position:relative;
}
.iconbtn:active{ background:var(--surface-2); }
.iconbtn--cart{ margin-left:auto; }
.cartCount{
  position:absolute; top:4px; right:4px;
  min-width:16px; height:16px; padding:0 3px;
  background:var(--stock); color:#fff;
  font-size:10px; font-weight:600; line-height:16px; text-align:center;
  border-radius:8px;
}
.topbar__title{
  flex:1; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:none; border:none; color:var(--ink);
  padding:6px 4px; border-radius:var(--radius-m);
  line-height:1.15;
}
.topbar__title:active{ background:var(--surface-2); }
.topbar__title span:first-child{
  font-size:15px; font-weight:600; letter-spacing:.01em;
}
.markupPanel{
  position:sticky; top:var(--topbar-total); z-index:39;
  background:var(--surface); border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-pop);
  overflow:hidden;
}
.markupPanel__inner{ padding:14px 16px 16px; }
.markupPanel__label strong{ display:block; font-size:14px; }
.markupPanel__label span{ display:block; font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.markupPanel__controls{
  display:flex; align-items:center; gap:8px; margin-top:12px;
}
.markupPanel__field{
  display:flex; align-items:center; gap:6px;
  background:var(--surface-2); border:1px solid var(--line-strong);
  border-radius:var(--radius-m); padding:0 10px; height:40px;
}
.markupPanel__field input{
  width:64px; border:none; background:none; font-size:16px;
  font-weight:600; color:var(--ink); font-family:inherit;
}
.markupPanel__field input:focus{ outline:none; }
.markupPanel__field span{ color:var(--ink-soft); font-size:14px; }

.btn{
  height:40px; padding:0 14px; border-radius:var(--radius-m);
  font-size:13.5px; font-weight:600; border:1px solid transparent;
  white-space:nowrap;
}
.btn--primary{ background:var(--sky); color:var(--sky-ink); }
.btn--primary:active{ background:var(--sky-dark); }
.btn--ghost{ background:none; border-color:var(--line-strong); color:var(--ink); }
.btn--ghost:active{ background:var(--surface-2); }
.btn--block{ width:100%; }

/* ============================================================
   Drawer menu
   ============================================================ */
.scrim{
  position:fixed; inset:0; background:rgba(24,21,17,.42);
  z-index:49; opacity:0; transition:opacity .18s ease;
}
.scrim.is-open{ opacity:1; }
.drawer{
  position:fixed; top:0; bottom:0; left:0; width:82%; max-width:320px;
  background:var(--surface); z-index:50;
  transform:translateX(-104%); transition:transform .22s cubic-bezier(.22,.9,.32,1);
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-pop);
}
.drawer.is-open{ transform:translateX(0); }
.drawer__account{
  display:flex; align-items:center; gap:12px;
  padding:22px 18px 16px;
  padding-top:calc(env(safe-area-inset-top, 0px) + 22px);
  border-bottom:1px solid var(--line);
}
.drawer__avatar{
  width:42px; height:42px; border-radius:50%;
  background:var(--sky-ink); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:14px; flex:none;
}
.drawer__name{ font-weight:600; font-size:14.5px; }
.drawer__company{ font-size:12.5px; color:var(--ink-soft); margin-top:1px; }
.drawer__nav{ list-style:none; margin:8px 0; padding:0; flex:1; }
.drawer__link{
  width:100%; display:flex; align-items:center; gap:12px;
  background:none; border:none; text-align:left;
  padding:13px 18px; font-size:14.5px; color:var(--ink);
  border-left:3px solid transparent;
}
.drawer__link svg{ flex:none; color:var(--ink-soft); }
.drawer__link.is-active{ background:var(--blue-tint); border-left-color:var(--blue); font-weight:600; }
.drawer__link.is-active svg{ color:var(--blue); }
.drawer__link:active{ background:var(--surface-2); }
.drawer__link--muted{ color:var(--ink-soft); }
.drawer__chevron{ margin-left:auto; flex:none; color:var(--ink-soft); transition:transform .2s ease; }
.drawer__chevron.is-open{ transform:rotate(180deg); }
.drawer__submenu{
  list-style:none; margin:0; padding:0;
  max-height:0; overflow:hidden; transition:max-height .25s ease;
}
.drawer__submenu.is-open{ max-height:220px; }
.drawer__sublink{
  width:100%; display:block; text-align:left; background:none; border:none;
  padding:10px 18px 10px 49px; font-size:13.5px; color:var(--ink-soft);
}
.drawer__sublink.is-active{ color:var(--blue); font-weight:600; }
.drawer__sublink:active{ background:var(--surface-2); }
.drawer__footer{ border-top:1px solid var(--line); padding:6px 0 calc(env(safe-area-inset-bottom, 0px) + 10px); display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; }
.drawer__profile{ padding-bottom:6px; }
.drawer__profile .drawer__link{ width:100%; }

/* ============================================================
   Catalog grid
   ============================================================ */
.catalog{ padding:12px 10px 90px; max-width:1180px; margin:0 auto; }
.catalog__bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 4px 12px; color:var(--ink-soft); font-size:12.5px;
}
.emptyState{ padding:60px 20px; text-align:center; color:var(--ink-soft); font-size:13.5px; }
.grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
}
@media (min-width:640px){ .grid{ grid-template-columns:repeat(3,1fr);} .catalog__hint{ display:none; } }
@media (min-width:900px){ .grid{ grid-template-columns:repeat(4,1fr); gap:14px;} }
@media (min-width:1180px){ .grid{ grid-template-columns:repeat(5,1fr);} }

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-m); overflow:hidden;
  text-align:left; width:100%; padding:0; box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch;
}
.card__media{ position:relative; aspect-ratio:1/1; }
.card__scroller{
  display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; touch-action:pan-x;
}
.card__scroller::-webkit-scrollbar{ display:none; }
.card__slide{
  flex:0 0 100%; scroll-snap-align:start; height:100%;
  display:flex; align-items:center; justify-content:center;
}
.card__dots{
  position:absolute; left:0; right:0; bottom:7px;
  display:flex; justify-content:center; gap:4px; pointer-events:none;
}
.card__dots .dot{ width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.55); }
.card__dots .dot.is-active{ background:#fff; width:12px; border-radius:3px; }
.card__body{ padding:9px 10px 11px; }
.card__name{ font-size:12.5px; line-height:1.32; font-weight:500; min-height:2.6em; }
.card__row{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-top:7px;
}
.card__price{ font-size:15px; font-weight:700; color:var(--price); }
.card__price small{ font-size:10.5px; font-weight:600; color:var(--price); opacity:.8; }
.card__stock{ font-size:11px; color:var(--stock); font-weight:600; }
.card__stock.is-low{ color:var(--amber); }
.card__unit{ font-size:11px; color:var(--ink-soft); margin-top:3px; }

/* Tile swatch placeholders — generated purely with CSS gradients,
   no external image assets, so the app stays installable offline. */
.swatch{ width:100%; height:100%; position:relative; overflow:hidden; }
.swatch::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(0,0,0,0) 66%, rgba(0,0,0,.22) 100%);
}
.swatch--zoom{ transform:scale(1.35); }
.swatch--photo{ background:var(--surface-2); }
.swatch--photo img{ width:100%; height:100%; object-fit:contain; display:block; }

/* ============================================================
   Product detail
   ============================================================ */
.detail{ padding-bottom:110px; }
.detail__back{
  position:sticky; top:var(--topbar-total); z-index:20;
  display:flex; align-items:center; gap:6px;
  background:var(--bg); padding:8px 12px; font-size:13px;
  font-weight:600; color:var(--ink); border-bottom:1px solid transparent;
}
.detail__gallery{
  position:relative; width:100%; aspect-ratio:1/1; background:var(--surface-2);
}
.detail__scroller{
  display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  touch-action:pan-x;
}
.detail__scroller::-webkit-scrollbar{ display:none; }
.detail__slide{ flex:0 0 100%; scroll-snap-align:start; height:100%; }
.detail__dots{ position:absolute; left:0; right:0; bottom:12px; display:flex; justify-content:center; gap:5px; }
.detail__dots .dot{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.55); }
.detail__dots .dot.is-active{ background:#fff; width:16px; border-radius:3px; }

.detail__info{ padding:16px 16px 4px; max-width:640px; margin:0 auto; }
.detail__name{ font-size:17px; font-weight:600; line-height:1.35; }
.detail__meta{
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--line);
  gap:10px;
}
.detail__meta .col{ font-size:12px; color:var(--ink-soft); }
.detail__meta .col strong{
  display:block; font-size:14.5px; color:var(--ink); margin-top:2px; font-weight:700;
}
.detail__meta .col.price strong{ color:var(--price); font-size:17px; }
.detail__meta .col.stock strong.is-low{ color:var(--amber); }
.detail__meta .col.stock strong{ color:var(--stock); }

.qty{
  margin:16px 16px 0;
  border:1px solid var(--line-strong); border-radius:var(--radius-m); overflow:hidden;
  background:var(--surface);
}
@media (min-width:640px){ .qty{ max-width:608px; margin-left:auto; margin-right:auto; } }
.qty__toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:14px 14px; background:none; border:none; font-size:14px; font-weight:600; color:var(--ink);
}
.qty__toggle .hint{ font-weight:400; color:var(--ink-soft); font-size:12.5px; margin-top:2px; display:block; }
.qty__chevron{ transition:transform .15s ease; color:var(--ink-soft); flex:none; }
.qty.is-open .qty__chevron{ transform:rotate(180deg); }
.qty__body{ display:none; padding:0 14px 16px; }
.qty.is-open .qty__body{ display:block; }
.qty__units{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.chip{
  padding:7px 12px; border-radius:20px; font-size:12.5px; font-weight:600;
  background:var(--surface-2); border:1px solid transparent; color:var(--ink-soft);
}
.chip.is-active{ background:var(--blue-tint); color:var(--blue); border-color:var(--blue); }
.qty__inputRow{ display:flex; gap:8px; align-items:center; }
.qty__inputRow input{
  flex:1; height:44px; border:1px solid var(--line-strong); border-radius:var(--radius-m);
  padding:0 12px; font-size:16px; font-family:inherit; color:var(--ink); background:var(--bg);
}
.qty__inputRow input:focus{ outline:2px solid var(--blue); outline-offset:-1px; }
.qty__calc{
  margin-top:12px; padding:12px; background:var(--surface-2); border-radius:var(--radius-m);
  font-size:13px; color:var(--ink-soft);
}
.qty__calc .total{ font-size:18px; font-weight:700; color:var(--price); margin-top:2px; }
.qty__surchargeNote{ font-size:11.5px; color:var(--amber); margin-top:6px; font-weight:500; }
.qty__actions{ display:flex; gap:8px; margin-top:12px; }

.specs{ margin:20px 16px 0; }
@media (min-width:640px){ .specs{ max-width:608px; margin-left:auto; margin-right:auto; } }
.specs h3{ font-size:13px; text-transform:none; color:var(--ink-soft); margin:0 0 8px; font-weight:600; }
.specs ul{ margin:0; padding:0; list-style:none; }
.specs li{
  display:flex; justify-content:space-between; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--line); font-size:13.5px;
}
.specs li span:first-child{ color:var(--ink-soft); }
.specs li span:last-child{ font-weight:600; text-align:right; }
.showroom-tag{
  display:inline-flex; align-items:center; gap:6px;
  margin:14px 16px 0; padding:8px 12px;
  background:var(--blue-tint); color:var(--blue);
  border-radius:20px; font-size:12px; font-weight:600;
}

.detail__cta{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:var(--surface); border-top:1px solid var(--line);
  padding:10px 16px calc(12px + env(safe-area-inset-bottom));
  display:flex; gap:10px; align-items:center;
  box-shadow:0 -6px 20px rgba(35,32,28,.08);
}
.detail__cta .sum{ flex:1; }
.detail__cta .sum .lbl{ font-size:11px; color:var(--ink-soft); }
.detail__cta .sum .val{ font-size:16px; font-weight:700; color:var(--price); }

/* ============================================================
   Generic placeholder screens (orders / showrooms / door)
   ============================================================ */
.screen{ padding:20px 18px 60px; max-width:640px; margin:0 auto; }
.screen h1{ font-size:19px; margin:4px 0 4px; }
.screen p.lead{ color:var(--ink-soft); font-size:13.5px; margin:0 0 18px; }

.orderCard{
  display:block; width:100%; text-align:left; cursor:pointer; font:inherit; color:inherit;
  border:1px solid var(--line); border-radius:var(--radius-m); background:var(--surface);
  padding:13px 14px; margin-bottom:10px;
}
.orderCard:active{ background:var(--surface-2); }
.orderCard__top{ display:flex; justify-content:space-between; align-items:baseline; }
.orderCard__id{ font-weight:700; font-size:14px; }
.orderCard__date{ font-size:12px; color:var(--ink-soft); }
.orderCard__project{ font-size:13px; color:var(--ink-soft); margin-top:3px; }
.orderCard__bottom{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; }
.status{
  font-size:11px; font-weight:700; padding:4px 9px; border-radius:20px;
}
.status--wait{ background:var(--amber-tint); color:var(--amber); }
.status--confirmed{ background:var(--blue-tint); color:var(--blue); }
.status--done{ background:var(--price-tint); color:var(--price); }
.orderCard__total{ font-weight:700; font-size:14.5px; }

/* ============================================================
   Количка / детайл на поръчка
   ============================================================ */
.cartLines{ margin-bottom:6px; }
.cartLine{
  display:flex; align-items:center; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--line);
}
.cartLine__thumb{ width:52px; height:52px; border-radius:var(--radius-s); flex:none; }
.cartLine__body{ flex:1; min-width:0; }
.cartLine__name{ font-size:13.5px; font-weight:600; line-height:1.3; }
.cartLine__meta{ font-size:12px; color:var(--ink-soft); margin-top:3px; }
.cartLine__right{ text-align:right; flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:7px; }
.cartLine__total{ font-weight:700; font-size:14px; color:var(--price); }
.cartLine__remove{
  width:24px; height:24px; border-radius:50%; background:var(--surface-2); border:none;
  color:var(--ink-soft); font-size:12px; line-height:1;
}
.cartLine__remove:active{ background:var(--line); }

.cartSummary{ margin-top:10px; padding-top:14px; border-top:1px solid var(--line-strong); }
.cartSummary__row{ display:flex; justify-content:space-between; padding:5px 0; font-size:13.5px; color:var(--ink-soft); }
.cartSummary__row--total{
  font-size:16px; font-weight:700; color:var(--ink);
  border-top:1px solid var(--line); margin-top:6px; padding-top:10px;
}
.cartSummary__row--total span:last-child{ color:var(--price); }

.cartCheckout{ margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }

.showroomCard{
  display:flex; gap:12px; align-items:center;
  border:1px solid var(--line); border-radius:var(--radius-m); background:var(--surface);
  padding:12px; margin-bottom:10px;
}
.showroomCard__thumb{
  width:56px; height:56px; border-radius:var(--radius-s); flex:none;
  background:linear-gradient(135deg,#8C7B68,#5B5346);
}
.showroomCard__name{ font-weight:600; font-size:14px; }
.showroomCard__addr{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.showroomCard__open{ font-size:11.5px; color:var(--price); font-weight:600; margin-top:4px; }

.doorScreen{ text-align:center; padding-top:8px; }
.qrBox{
  width:220px; height:220px; margin:18px auto 6px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-m);
  display:flex; align-items:center; justify-content:center;
}

/* ============================================================
   Автентикация — вход, OTP, регистрация, чакащо одобрение
   ============================================================ */
.authScreen{
  min-height:100vh; min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:40px 20px;
}
.authCard{ width:100%; max-width:400px; }
.authCard--wide{ max-width:460px; }
.authBrand{ display:flex; justify-content:center; margin-bottom:18px; }
.authBack{
  display:flex; align-items:center; gap:6px; background:none; border:none;
  color:var(--ink-soft); font-size:13px; font-weight:600; padding:0 0 18px; margin:0;
}
.authTitle{ font-size:19px; font-weight:700; text-align:center; line-height:1.3; }
.authSubtitle{
  font-size:13px; color:var(--ink-soft); text-align:center; line-height:1.5;
  margin:8px 0 24px;
}
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:5px; }
.field input, .field textarea{
  width:100%; height:46px; border:1px solid var(--line-strong); border-radius:var(--radius-m);
  padding:0 13px; font-size:16px; font-family:inherit; color:var(--ink); background:var(--surface);
}
.field textarea{ height:auto; min-height:78px; padding:11px 13px; resize:vertical; line-height:1.4; }
.field input:focus, .field textarea:focus{ outline:2px solid var(--blue); outline-offset:-1px; }
.phoneField{ display:flex; gap:8px; }
.phoneField .prefix{
  width:72px; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--radius-m);
  font-weight:600; font-size:14.5px; color:var(--ink-soft);
}
.otpInput{
  text-align:center; font-size:26px; font-weight:700; letter-spacing:10px;
  font-family:var(--font-ui);
}
.formError{ font-size:12px; color:var(--danger); margin-top:6px; font-weight:500; }
.checkboxField{
  display:flex; gap:10px; align-items:flex-start; margin:16px 0;
  font-size:12.5px; color:var(--ink-soft); line-height:1.4;
}
.checkboxField input{ margin-top:2px; width:16px; height:16px; flex:none; accent-color:var(--blue); }
.authLink{ text-align:center; font-size:13px; color:var(--ink-soft); margin-top:20px; }
.authLink button{ background:none; border:none; color:var(--blue); font-weight:600; font-size:inherit; padding:0; }
.resend{ text-align:center; font-size:12.5px; color:var(--ink-soft); margin-top:14px; }
.resend button{ background:none; border:none; color:var(--blue); font-weight:600; font-size:inherit; padding:0; }
.resend button:disabled{ color:var(--ink-faint); }
.pendingIcon{
  width:60px; height:60px; border-radius:50%; background:var(--amber-tint);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px;
}
.toast{
  position:fixed; left:16px; right:16px; bottom:24px; z-index:80;
  background:var(--ink); color:var(--bg);
  padding:12px 16px; border-radius:var(--radius-m); font-size:13.5px;
  text-align:center; box-shadow:var(--shadow-pop);
  animation:toastin .18s ease;
}
@keyframes toastin{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .drawer, .scrim, .toast{ transition:none; animation:none; }
}

/* Desktop: normal website framing, same shell, wider canvas */
@media (min-width:900px){
  body{ background:var(--bg); }
  .topbar{ padding:0 18px; }
  .topbar__title span:first-child{ font-size:15.5px; }
  .catalog, .screen{ padding-left:24px; padding-right:24px; }
}

/* size filter + "(без ДДС)" note */
.sizeFilter{ display:flex; gap:6px; overflow-x:auto; padding:10px 14px 2px; scrollbar-width:none; }
.sizeFilter::-webkit-scrollbar{ display:none; }
.sizeFilter .chip{ white-space:nowrap; flex:0 0 auto; }
small.vat{ display:inline-block; white-space:nowrap; font-size:10px; font-weight:500; color:var(--ink-soft); opacity:.9; }
.detail__meta .col small.vat{ display:block; margin-top:1px; }
.detail__cta .val small.vat{ font-size:10px; }

/* documents (PDF) section on product page */
.docs{ margin:20px 16px 0; }
@media (min-width:640px){ .docs{ max-width:608px; margin-left:auto; margin-right:auto; } }
.docs h3{ font-size:13px; color:var(--ink-soft); margin:0 0 8px; font-weight:600; }
.docs ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.docs a{ display:flex; align-items:center; gap:10px; padding:11px 12px; background:var(--surface-2); border-radius:var(--radius-m); color:var(--ink); text-decoration:none; font-size:13.5px; font-weight:600; }
.docs a svg{ flex:0 0 auto; color:var(--blue); }
.docs a span{ flex:1; }
.docs a em{ font-style:normal; font-size:10.5px; font-weight:700; color:var(--blue); background:var(--blue-tint); padding:2px 7px; border-radius:10px; }

/* language flags — right edge of the menu footer */
.langs{ display:flex; gap:10px; padding-right:18px; margin-left:auto; flex:0 0 auto; }
.langbtn{ display:block; cursor:pointer; -webkit-appearance:none; appearance:none; padding:0; margin:0; border:0; border-radius:0; background:transparent; box-shadow:none; line-height:0; opacity:.5; }
.langbtn, .langbtn:hover, .langbtn:focus, .langbtn:active, .langbtn:focus-visible{ background:transparent !important; outline:none !important; box-shadow:none !important; border:0 !important; border-radius:0 !important; -webkit-tap-highlight-color:transparent; }
.langbtn svg{ display:block; border-radius:0; box-shadow:none; border:.75px solid #111; box-sizing:content-box; }
.langbtn.is-active{ opacity:1; }
.drawer__footer .drawer__link{ width:auto; flex:0 0 auto; }

/* profile */
.profile .pcard{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); padding:14px 14px 4px; margin-bottom:14px; box-shadow:var(--shadow-card); }
.profile .pcard h2{ font-size:14px; margin:0 0 12px; color:var(--ink); }
.profile .pnote{ font-size:12px; color:var(--ink-soft); margin:2px 0 12px; }
.pendingBanner{ background:#FFF4DB; color:#7A5200; font-size:12.5px; border-radius:var(--radius-m); padding:9px 11px; margin-bottom:12px; }
.addrItem{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.addrItem__txt div{ color:var(--ink-soft); font-size:12.5px; margin-top:2px; }
.addrTag{ font-size:10.5px; font-weight:700; color:var(--blue); background:var(--blue-tint); padding:2px 7px; border-radius:10px; }
.addrItem__btns{ display:flex; flex-direction:column; gap:4px; align-items:flex-end; }
.linkbtn{ background:none; border:none; padding:2px 0; font-size:12px; font-weight:600; color:var(--blue); }
.linkbtn--danger{ color:#B3342B; }
.addrAdd{ padding-top:12px; }
.profile .checkboxField{ margin-bottom:12px; }
.field select{ width:100%; height:44px; border:1px solid var(--line-strong); border-radius:var(--radius-m); padding:0 10px; background:var(--surface); font:inherit; color:var(--ink); }

/* factory */
.factory{ padding-bottom:96px; }
.factory__head{ padding:16px 16px 4px; }
.factory__head h1{ font-size:17px; line-height:1.3; margin:0 0 12px; }
.factoryHow{ background:var(--blue-tint); border-radius:var(--radius-m); padding:12px 14px; font-size:13px; color:var(--ink); }
.factoryHow h2{ font-size:13px; margin:0 0 6px; }
.factoryHow ol{ margin:0 0 8px; padding-left:18px; }
.factoryHow li{ margin:3px 0; }
.factoryHow p{ margin:0; font-size:12px; color:var(--ink-soft); }
.factoryNote{ background:var(--blue-tint); border-radius:var(--radius-m); padding:11px 13px; margin:14px 16px 0; font-size:13px; }
.factoryNote p{ margin:4px 0 0; }
.fgrid{ display:grid; grid-template-columns:1fr; gap:12px; padding:10px 12px; max-width:760px; margin:0 auto; }
.fcard{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); padding:12px; box-shadow:var(--shadow-card); }
.fcard__top{ display:flex; gap:12px; }
.fcard__img{ width:104px; height:104px; flex:0 0 104px; border-radius:var(--radius-s,8px); }
.fcard__name{ font-weight:700; font-size:15px; }
.fcard__size{ font-size:13px; color:var(--ink-soft); margin-top:1px; }
.fcard__spec{ font-size:12px; color:var(--ink-soft); margin-top:3px; }
.fcard__price{ margin-top:6px; font-weight:700; color:var(--price); font-size:16px; }
.fcard__price small{ font-weight:500; font-size:11px; }
.fcard__stock{ font-size:12.5px; margin:10px 0 6px; color:var(--ink); }
.fcard__lots{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.fcard__lotone{ font-size:12px; color:var(--ink-soft); margin-bottom:8px; }
.fcard__qty{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.stepper{ display:flex; align-items:center; border:1px solid var(--line-strong); border-radius:var(--radius-m); overflow:hidden; }
.stepper button{ -webkit-appearance:none; appearance:none; border:0; background:var(--surface-2); width:38px; height:40px; font-size:20px; color:var(--ink); }
.stepper input{ width:56px; height:40px; border:0; text-align:center; font:inherit; font-size:15px; font-weight:600; background:var(--surface); color:var(--ink); -moz-appearance:textfield; }
.fcard__calc{ font-size:13px; text-align:right; }
.fcard__hint{ font-size:11.5px; color:var(--ink-soft); margin:6px 0 10px; }
.fcard__actions{ display:flex; align-items:center; gap:14px; }
.fcard__actions .btn{ flex:1; }
.fcard__actions .linkbtn{ font-size:12.5px; white-space:nowrap; text-decoration:none; }
.fbar{ position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px calc(env(safe-area-inset-bottom,0px) + 10px); background:var(--surface); border-top:1px solid var(--line-strong); box-shadow:0 -4px 14px rgba(0,0,0,.08); font-size:13.5px; }
.fbar__sub{ font-size:11.5px; color:var(--ink-soft); }

.qty__lotlabel{ font-size:12px; color:var(--ink-soft); margin:2px 0 6px; }
.factory__head{ padding:14px 14px 4px; }
.factory__head h1{ font-size:16px; line-height:1.3; margin:0 0 8px; }
.factoryHow{ background:var(--blue-tint); border-radius:var(--radius-m); padding:8px 11px; font-size:11px; line-height:1.4; color:var(--ink-soft); }
.factoryHow ol{ margin:3px 0 4px; padding-left:16px; }
.factoryHow li{ margin:1px 0; }
.factoryHow b{ color:var(--ink); font-weight:600; }

.qty__actions{ flex-wrap:wrap; }
#fGoCartP{ flex:1 1 100%; margin-top:8px; }


.rangeFilter{ padding:8px 14px 0; }
.rangeFilter__toggle{ white-space:nowrap; }
.rangeFilter__panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); padding:12px 12px 8px; margin-top:8px; }
.rangeFilter__panel[hidden]{ display:none; }
.rangeFilter__panel .field{ margin-bottom:10px; }

.related{ margin:20px 16px 0; }
.related h3{ font-size:13px; color:var(--ink-soft); margin:0 0 2px; font-weight:600; }
.related__sub{ font-size:12px; color:var(--ink-soft); margin:0 0 8px; }
.related ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.relCard{ width:100%; display:flex; align-items:center; gap:12px; padding:8px; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); color:var(--ink); }
.relCard__img{ flex:0 0 64px; width:64px; height:64px; border-radius:8px; overflow:hidden; background:var(--surface-2); display:flex; align-items:center; justify-content:center; }
.relCard__img img{ width:100%; height:100%; object-fit:contain; display:block; }
.relCard__txt{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.relCard__txt b{ font-size:13px; font-weight:600; }
.relCard__txt em{ font-size:12px; font-style:normal; color:var(--ink-soft); }

/* Сканирай QR */
.drawer__submenu.is-open{ max-height:260px; }
.scanScreen h1{ margin-bottom:6px; }
.scanBox{ position:relative; width:100%; max-width:420px; aspect-ratio:1/1; margin:14px auto 10px; background:#14120f; border-radius:var(--radius-m); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.scanBox video{ width:100%; height:100%; object-fit:cover; display:none; }
.scanBox.is-live video{ display:block; }
.scanFrame{ position:absolute; inset:18%; border:3px solid rgba(255,255,255,.85); border-radius:16px; box-shadow:0 0 0 999px rgba(0,0,0,.28); pointer-events:none; }
.scanMsg{ min-height:22px; text-align:center; font-size:13.5px; color:var(--ink-soft); margin:4px 0 12px; }
.scanMsg.is-err{ color:#b3261e; }
.scanActions{ display:flex; flex-direction:column; gap:10px; max-width:420px; margin:0 auto; }
.scanFileBtn{ display:flex; align-items:center; justify-content:center; cursor:pointer; }

/* ============================================================
   Тема: фон RAL 7016 (антрацитно сиво, #293133).
   Всичко е през токените по-горе — за да се върне светлата тема,
   изтрий този блок. Админ панелът (body.isAdmin) остава светъл.
   ============================================================ */
body:not(.isAdmin){
  --bg:        #293133;   /* RAL 7016 */
  --surface:   #333D40;
  --surface-2: #3B4649;
  --ink:       #EDF0EF;
  --ink-soft:  #AEB8BA;
  --ink-faint: #7F8B8E;
  --line:      #3F4A4D;
  --line-strong:#516064;
  --price:     #8CC391;
  --price-tint:#2F4635;
  --stock:     #86BEE6;
  --stock-tint:#2B4152;
  --blue:      #86BEE6;
  --blue-tint: #2B4152;
  --amber:     #E0B160;
  --amber-tint:#4A3E24;
  --danger:    #F0907A;
  --shadow-card: 0 1px 0 rgba(0,0,0,.25);
  --shadow-pop: 0 10px 30px rgba(0,0,0,.45);
}
body:not(.isAdmin){ color:var(--ink); }
body:not(.isAdmin) a{ color:var(--blue); }
.scanMsg.is-err{ color:var(--danger); }
body:not(.isAdmin) svg rect[fill="var(--sky-ink)"]{ fill:var(--sky); }

/* „(без ДДС)“ винаги е вдясно до цената, на същия ред — никога под нея */
.detail__meta{ flex-wrap:wrap; }
.detail__meta .col.price{ flex:1 1 100%; }
.detail__meta .col.price .pv{ display:flex; align-items:baseline; gap:6px; flex-wrap:nowrap; white-space:nowrap; }
.detail__meta .col.price .pv strong{ display:inline; margin-top:0; }
.detail__meta .col small.vat{ display:inline; margin-top:0; }
.card__price{ display:inline-flex; align-items:baseline; gap:3px; white-space:nowrap; }
.detail__cta .sum .val{ white-space:nowrap; }
@media (max-width:360px){
  .card__price{ font-size:13.5px; }
  .card__price small{ font-size:9.5px; }
  .detail__cta .sum .val{ font-size:14.5px; }
}

/* Адресна форма */
.addrBlock{ border:1px solid var(--line, #e3e0d8); border-radius:12px; padding:12px 12px 0; margin-bottom:14px; }
.addrBlock__title{ font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:10px; }
.addrRow{ display:grid; grid-template-columns:2fr 1fr; gap:10px; }
.addrRow--4{ grid-template-columns:repeat(4,1fr); }
.addrRow .field{ min-width:0; }