/* ABC Farben PRO — ЛК мастера (FNFD Retail2, база — ЛК Davidoff).
   Палитра бренда ABC Farben: чёрный #181818, жёлтый #ffbe15, красный зонта. */
:root{
  --coral:#c8102e; --coral-d:#a10d25; --coral-soft:#fdecee;
  --yellow:#ffbe15; --yellow-d:#f0aa00; --yellow-soft:#fff6dc; --black:#181818;
  --cream:#f4f4f2; --cream-2:#fafaf8; --paper:#ffffff;
  --ink:#181818; --ink-2:#4d4d4a; --ink-3:#8a8a85;
  --line:#e8e8e4; --line-2:#dcdcd6;
  --green:#1f8a6e; --green-soft:#e4f1ec;
  --amber:#bf842a; --amber-soft:#f6ecd6;
  --red:#c0392b; --red-soft:#f8e6e3;
  --gold:#b8924a;
  --shadow:0 1px 2px rgba(40,30,15,.05),0 8px 24px rgba(40,30,15,.06);
  --r:16px; --r-lg:20px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); color:var(--ink); background:var(--cream-2);
  -webkit-font-smoothing:antialiased;
}

/* App-shell: мобильный сайт во весь экран. На десктопе — аккуратная
   центрированная колонка (мобильная веб-версия), БЕЗ бутафорской рамки телефона. */
.device{
  width:100%; max-width:480px; height:100vh; height:100dvh;
  margin:0 auto; position:relative; overflow:hidden; background:var(--cream-2);
}
.screen{position:relative; height:100%; overflow:hidden; background:var(--cream-2)}

@media(min-width:481px){
  body{background:#e9e9e5}                  /* лёгкий контраст колонки на десктопе */
  .device{box-shadow:0 0 0 1px #dcdcd6}     /* тонкий хайрлайн, НЕ рамка телефона */
}

/* ---- Views ---- */
.view{position:absolute; inset:0 0 64px 0; display:none; flex-direction:column}
.view.active{display:flex}
.scroll{flex:1; overflow-y:auto; padding:0 16px 20px; -webkit-overflow-scrolling:touch}
.scroll::-webkit-scrollbar{width:0}

/* ---- Appbar ---- */
.appbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 12px; padding-top:max(14px,env(safe-area-inset-top));
  background:var(--cream-2); border-bottom:1px solid var(--line);
}
.appbar.plain h1{font-size:21px; margin:0; font-weight:800; letter-spacing:-.01em}
.brand .logo{font-weight:800; font-size:18px; letter-spacing:-.02em}
.brand .logo-accent{font-weight:800; font-size:18px; color:var(--coral); margin-left:4px; font-style:italic}
.brand .sub{font-size:11.5px; color:var(--ink-3); margin-top:2px}
.avatar{
  width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  background:var(--coral-soft); color:var(--coral); font-weight:700; font-size:16px;
}

/* ---- Cards generic ---- */
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 16px; box-shadow:var(--shadow); margin-top:12px}
.section-title{display:flex; justify-content:space-between; align-items:baseline;
  font-weight:700; font-size:14px; margin:20px 2px 8px}
.section-title a{color:var(--coral); font-size:12.5px; cursor:pointer; font-weight:600}

/* ---- Balance card ---- */
.balance-card{
  margin-top:14px; border-radius:var(--r-lg); padding:18px 18px 16px; color:#fff;
  background:linear-gradient(135deg,#ffc93a 0%,#ffb000 100%);
  box-shadow:0 10px 26px rgba(214,63,31,.32);
}
.bc-label{font-size:12.5px; opacity:.92; letter-spacing:.02em}
.bc-row{display:flex; align-items:baseline; gap:10px; margin-top:4px}
.bc-amount{font-size:38px; font-weight:800; letter-spacing:-.02em; line-height:1}
.bc-rub{font-size:16px; font-weight:600; opacity:.95}
.bc-foot{font-size:11.5px; opacity:.88; margin-top:10px}

/* ---- Plan ---- */
.plan-head{display:flex; justify-content:space-between; font-size:13px; color:var(--ink-2)}
.plan-head b{color:var(--ink)}
.bar{height:8px; border-radius:99px; background:var(--cream); margin:10px 0 8px; overflow:hidden; border:1px solid var(--line)}
.bar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--yellow-d),var(--yellow)); transition:width .5s ease}
.plan-note{font-size:11.5px; color:var(--coral-d); font-weight:600}

/* ---- Stats ---- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px}
.stat{background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:12px 6px; text-align:center; box-shadow:var(--shadow)}
.stat b{display:block; font-size:24px; font-weight:800; line-height:1}
.stat b.g{color:var(--green)} .stat b.a{color:var(--amber)}
.stat span{font-size:11px; color:var(--ink-3); margin-top:4px; display:block}

/* ---- Scan button ---- */
.btn-scan{
  width:100%; margin-top:16px; border:none; cursor:pointer;
  background:var(--coral); color:#fff; font-weight:700; font-size:16px;
  padding:15px; border-radius:14px; display:flex; align-items:center; justify-content:center; gap:9px;
  box-shadow:0 8px 20px rgba(234,78,43,.3);
}
.btn-scan:active{transform:translateY(1px)}
.ic-scan{width:20px; height:20px; border:2.4px solid #fff; border-radius:5px; position:relative}
.ic-scan::before{content:""; position:absolute; left:2px; right:2px; top:50%; height:2px; background:#fff; transform:translateY(-50%); border-radius:2px}

/* ---- Receipt list ---- */
.rcpt-list{display:flex; flex-direction:column; gap:8px}
.rcpt{display:flex; align-items:center; gap:12px; background:var(--paper); border:1px solid var(--line);
  border-radius:14px; padding:12px 14px; box-shadow:var(--shadow)}
.rcpt .ic{width:34px; height:34px; flex:0 0 34px; border-radius:9px; background:var(--coral-soft);
  display:flex; align-items:center; justify-content:center}
.rcpt .ic::before{content:""; width:15px; height:18px; background:var(--coral);
  -webkit-mask:var(--rcpt-mask); mask:var(--rcpt-mask)}
.rcpt .mid{flex:1; min-width:0}
.rcpt .t{font-weight:600; font-size:14px}
.rcpt .d{font-size:11.5px; color:var(--ink-3); margin-top:2px}
.rcpt .pts{font-weight:700; font-size:14px; white-space:nowrap}
.rcpt .pts.zero{color:var(--ink-3)}
.badge{font-size:11px; font-weight:600; padding:3px 9px; border-radius:99px; white-space:nowrap}
.badge.g{background:var(--green-soft); color:var(--green)}
.badge.a{background:var(--amber-soft); color:var(--amber)}
.badge.r{background:var(--red-soft); color:var(--red)}
.rcpt .right{display:flex; flex-direction:column; align-items:flex-end; gap:5px}

/* ---- Filters ---- */
.filters{display:flex; gap:8px; padding:12px 16px; overflow-x:auto; background:var(--cream-2); border-bottom:1px solid var(--line)}
.filters::-webkit-scrollbar{height:0}
.chip{border:1px solid var(--line-2); background:var(--paper); color:var(--ink-2); font-size:13px; font-weight:600;
  padding:7px 14px; border-radius:99px; cursor:pointer; white-space:nowrap}
.chip.on{background:var(--ink); color:#fff; border-color:var(--ink)}

/* ---- Balance view ---- */
.avail{margin-top:14px}
.av-label{font-size:12.5px; color:var(--ink-3)}
.av-amount{font-size:34px; font-weight:800; letter-spacing:-.02em; margin-top:2px}
.av-amount small{font-size:15px; font-weight:600; color:var(--ink-3)}
.mygift{margin-top:12px; border-radius:var(--r); padding:18px 18px 22px; color:#fff;
  background:linear-gradient(135deg,#2a2a2a,#121212); box-shadow:var(--shadow); position:relative; overflow:hidden}
.mygift::after{content:""; position:absolute; right:16px; top:16px; width:42px; height:42px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#ffd24d,#f0aa00); box-shadow:-16px 0 0 #c8102eaa}
.mg-top{display:flex; justify-content:space-between; align-items:center; font-weight:700}
.mg-kind{font-size:11px; opacity:.7; font-weight:500}
.mg-num{margin-top:26px; font-size:18px; letter-spacing:.14em; font-family:ui-monospace,Menlo,monospace}
.btn-primary{width:100%; margin-top:14px; border:none; cursor:pointer; background:var(--coral); color:#fff;
  font-weight:700; font-size:16px; padding:15px; border-radius:14px; box-shadow:0 8px 20px rgba(234,78,43,.28)}
.btn-primary:active{transform:translateY(1px)}
.btn-text{width:100%; margin-top:8px; border:none; background:none; color:var(--ink-3); font-size:14px; padding:10px; cursor:pointer}
.rules .rules-title{font-weight:700; font-size:14px; margin-bottom:6px}
.rule{display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-top:1px solid var(--line); font-size:13.5px}
.rule:first-of-type{border-top:none}
.rule span{color:var(--ink-2)} .rule b{font-weight:700}
.rule b.muted{color:var(--ink-3); font-weight:600}
.wd-list{display:flex; flex-direction:column; gap:8px}
.wd{display:flex; justify-content:space-between; align-items:center; background:var(--paper); border:1px solid var(--line);
  border-radius:14px; padding:12px 14px; box-shadow:var(--shadow)}
.wd .t{font-weight:600; font-size:14px}
.wd .d{font-size:11.5px; color:var(--ink-3); margin-top:2px}

/* ---- Profile ---- */
.who{display:flex; align-items:center; gap:14px; margin-top:14px}
.who-av{width:54px; height:54px; border-radius:50%; background:var(--coral-soft); color:var(--coral);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:22px; flex:0 0 54px}
.who-name{font-weight:800; font-size:17px}
.who-role{font-size:12.5px; color:var(--ink-2); margin-top:2px}
.who-phone{font-size:12.5px; color:var(--ink-3); margin-top:1px}
.pd-title{font-weight:700; font-size:14px; margin-bottom:4px}
.consent-row{display:flex; align-items:center; gap:12px}
.ok-dot{width:22px; height:22px; flex:0 0 22px; border-radius:50%; background:var(--green); position:relative}
.ok-dot::after{content:""; position:absolute; left:7px; top:5px; width:5px; height:9px; border:2px solid #fff; border-top:none; border-left:none; transform:rotate(42deg)}
.consent-title{font-weight:600; font-size:13.5px}
.consent-sub{font-size:11.5px; color:var(--ink-3); margin-top:2px}
.consent-docs{font-size:11.5px; margin-top:4px}
.consent-docs a{color:var(--coral)}
.consent-row .badge{margin-left:auto}
.menu{padding:4px 16px}
.menu-row{display:flex; justify-content:space-between; align-items:center; width:100%; background:none; border:none;
  padding:14px 0; border-top:1px solid var(--line); font-size:14.5px; cursor:pointer; color:var(--ink); text-align:left}
.menu-row:first-child{border-top:none}
.menu-row.danger{color:var(--coral)}
.menu-row .arr{color:var(--ink-3); font-size:18px}
.ver{text-align:center; font-size:11px; color:var(--ink-3); margin:18px 0 6px}

/* ---- Tabbar ---- */
.tabbar{position:absolute; bottom:0; left:0; right:0; height:64px; display:flex;
  background:var(--paper); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom)}
.tab{flex:1; border:none; background:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  font-size:10.5px; color:var(--ink-3); font-weight:600}
.tab.on{color:var(--coral)}
.ti{width:22px; height:22px; background:currentColor;
  -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center}
.ti.home{-webkit-mask:var(--m-home); mask:var(--m-home)}
.ti.rcpt{-webkit-mask:var(--m-rcpt); mask:var(--m-rcpt)}
.ti.bal{-webkit-mask:var(--m-bal); mask:var(--m-bal)}
.ti.prof{-webkit-mask:var(--m-prof); mask:var(--m-prof)}

/* ---- Scan overlay ---- */
.scan-overlay{position:absolute; inset:0; z-index:30; background:#0d0c0b; color:#fff; display:none; flex-direction:column}
.scan-overlay.active{display:flex}
.scan-top{display:flex; align-items:center; justify-content:space-between; padding:18px 18px 8px; padding-top:max(18px,env(safe-area-inset-top))}
.scan-top h2{font-size:16px; margin:0; font-weight:600}
.scan-top span{width:34px}
.scan-close{width:34px; height:34px; border-radius:50%; border:none; background:#ffffff1a; color:#fff; font-size:16px; cursor:pointer}
.scan-area{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:0 30px}
.scan-frame{width:230px; height:230px; position:relative; border-radius:18px; background:#ffffff08}
.scan-frame .c{position:absolute; width:30px; height:30px; border:3px solid var(--coral)}
.scan-frame .tl{top:-2px; left:-2px; border-right:none; border-bottom:none; border-radius:10px 0 0 0}
.scan-frame .tr{top:-2px; right:-2px; border-left:none; border-bottom:none; border-radius:0 10px 0 0}
.scan-frame .bl{bottom:-2px; left:-2px; border-right:none; border-top:none; border-radius:0 0 0 10px}
.scan-frame .br{bottom:-2px; right:-2px; border-left:none; border-top:none; border-radius:0 0 10px 0}
.scan-line{position:absolute; left:14px; right:14px; top:14px; height:2px; background:var(--coral); box-shadow:0 0 12px var(--coral); border-radius:2px; animation:scan 2.4s ease-in-out infinite}
@keyframes scan{0%,100%{top:14px} 50%{top:214px}}
.scan-hint{font-size:14px; color:#fffc; text-align:center}
.scan-pill{font-size:12.5px; color:#fff; background:#ffffff14; border:1px solid #ffffff22; padding:8px 16px; border-radius:99px}
.scan-foot{padding:24px 0 36px; display:flex; flex-direction:column; align-items:center; gap:10px}
.shutter{width:68px; height:68px; border-radius:50%; background:#fff; border:5px solid #ffffff44; cursor:pointer}
.shutter:active{transform:scale(.94)}
.shutter-hint{font-size:11.5px; color:#fff9}

/* ---- Toast ---- */
.toast{position:absolute; left:50%; bottom:84px; transform:translateX(-50%) translateY(10px);
  background:var(--ink); color:#fff; font-size:13px; font-weight:500; padding:11px 16px; border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.3); z-index:80; opacity:0; transition:.25s; max-width:88%; text-align:center}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast b{color:#ffbe15}

/* ---- Sheet (вывод) ---- */
.sheet-wrap{position:absolute; inset:0; z-index:45; display:flex; align-items:flex-end}
.sheet-back{position:absolute; inset:0; background:#0008; animation:fade .2s}
.sheet{position:relative; width:100%; background:var(--paper); border-radius:22px 22px 0 0; padding:8px 18px calc(22px + env(safe-area-inset-bottom));
  animation:up .28s cubic-bezier(.2,.8,.2,1)}
@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet-grip{width:38px; height:4px; border-radius:99px; background:var(--line-2); margin:6px auto 12px}
.sheet h3{margin:0 0 14px; font-size:18px; font-weight:800}
.fld{display:block} .fld span{font-size:12.5px; color:var(--ink-3)}
.fld input{width:100%; margin-top:6px; padding:13px 14px; font-size:18px; font-weight:700; border:1px solid var(--line-2);
  border-radius:12px; background:var(--cream-2); color:var(--ink); outline:none}
.fld input:focus{border-color:var(--coral)}
.calc{margin:14px 0 4px; background:var(--cream-2); border:1px solid var(--line); border-radius:12px; padding:4px 14px}

/* ---- Appbar actions (bell) ---- */
.appbar-actions{display:flex; align-items:center; gap:8px}
.bell{position:relative; width:38px; height:38px; border-radius:50%; border:none; background:var(--cream); cursor:pointer;
  display:flex; align-items:center; justify-content:center}
.bell-ic{width:20px; height:20px; background:var(--ink-2);
  -webkit-mask:var(--m-bell); mask:var(--m-bell); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center}
.bell-dot{position:absolute; top:8px; right:9px; width:8px; height:8px; border-radius:50%; background:var(--coral); border:2px solid var(--cream-2)}

/* ---- Detail / notifs overlay ---- */
.detail-overlay{position:absolute; inset:0 0 64px 0; z-index:25; background:var(--cream-2); display:flex; flex-direction:column}
.detail-bar{display:flex; align-items:center; justify-content:space-between}
.detail-bar h1{flex:1; text-align:center}
.back{width:34px; height:40px; border:none; background:none; font-size:30px; line-height:1; color:var(--ink); cursor:pointer; padding:0}
.detail-bar span{width:34px}
.mark-read{border:none; background:none; color:var(--coral); font-size:13px; font-weight:600; cursor:pointer; width:auto; white-space:nowrap}

/* receipt detail content */
.d-hero{margin-top:14px; text-align:center; padding:18px 16px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.d-sku{font-weight:800; font-size:17px}
.d-store{font-size:12.5px; color:var(--ink-3); margin-top:3px}
.d-pts{margin-top:12px; font-size:30px; font-weight:800; letter-spacing:-.02em}
.d-pts.g{color:var(--green)} .d-pts.a{color:var(--amber)} .d-pts.r{color:var(--red)}
.d-pts small{font-size:14px; font-weight:600; color:var(--ink-3); display:block; margin-top:2px}
.d-badge{display:inline-block; margin-top:10px}
.timeline{margin-top:6px; padding:6px 4px}
.tl-step{display:flex; gap:13px; position:relative; padding:0 0 18px 0}
.tl-step:last-child{padding-bottom:2px}
.tl-step::before{content:""; position:absolute; left:10px; top:22px; bottom:-2px; width:2px; background:var(--line-2)}
.tl-step:last-child::before{display:none}
.tl-dot{width:22px; height:22px; flex:0 0 22px; border-radius:50%; background:var(--cream); border:2px solid var(--line-2); z-index:1; position:relative}
.tl-step.done .tl-dot{background:var(--green); border-color:var(--green)}
.tl-step.done .tl-dot::after{content:""; position:absolute; left:6px; top:4px; width:5px; height:9px; border:2px solid #fff; border-top:none; border-left:none; transform:rotate(42deg)}
.tl-step.fail .tl-dot{background:var(--red); border-color:var(--red)}
.tl-step.fail .tl-dot::after{content:"✕"; position:absolute; inset:0; color:#fff; font-size:12px; line-height:18px; text-align:center}
.tl-step.now .tl-dot{border-color:var(--amber); background:var(--amber-soft)}
.tl-step.now .tl-dot::after{content:""; position:absolute; left:6px; top:6px; width:6px; height:6px; border-radius:50%; background:var(--amber)}
.tl-txt b{font-size:14px; font-weight:600; display:block}
.tl-txt span{font-size:11.5px; color:var(--ink-3)}
.tl-step.pending .tl-txt b{color:var(--ink-3)}
.d-fiscal .rule b{font-family:ui-monospace,Menlo,monospace; font-size:12.5px}

/* notifications list */
.notif-list{display:flex; flex-direction:column; gap:8px; padding-top:12px}
.notif{display:flex; gap:12px; background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:13px 14px; box-shadow:var(--shadow)}
.notif.unread{border-color:#ffe08a; background:#fffbef}
.notif-ic{width:34px; height:34px; flex:0 0 34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:16px}
.notif-ic.g{background:var(--green-soft)} .notif-ic.a{background:var(--amber-soft)} .notif-ic.c{background:var(--coral-soft)}
.notif .nt{font-weight:600; font-size:13.5px}
.notif .nd{font-size:12px; color:var(--ink-2); margin-top:2px; line-height:1.35}
.notif .ntime{font-size:11px; color:var(--ink-3); margin-top:4px}
.notif-empty{text-align:center; color:var(--ink-3); font-size:13px; padding:50px 0}
.menu-right{display:flex; align-items:center; gap:8px}
.m-badge{background:var(--coral); color:#fff; font-size:11px; font-weight:700; min-width:18px; height:18px; border-radius:99px; display:flex; align-items:center; justify-content:center; padding:0 5px; font-style:normal}

/* ---- Push banner ---- */
.push{position:absolute; top:0; left:0; right:0; z-index:60; margin:max(8px,env(safe-area-inset-top)) 8px 0;
  background:rgba(252,249,244,.92); backdrop-filter:blur(14px); border:1px solid var(--line);
  border-radius:16px; padding:11px 13px; display:flex; gap:11px; align-items:center;
  box-shadow:0 10px 30px rgba(30,20,10,.18); transform:translateY(-130%); transition:transform .42s cubic-bezier(.2,.85,.25,1)}
.push.show{transform:translateY(0)}
.push-ic{width:34px; height:34px; flex:0 0 34px; border-radius:9px; background:linear-gradient(135deg,#ffbe15,#f0aa00)}
.push-body{flex:1; min-width:0}
.push-row{display:flex; justify-content:space-between; align-items:center; font-size:11px; color:var(--ink-3)}
.push-row b{color:var(--ink); font-size:12.5px; font-weight:700}
.push-text{font-size:13px; margin-top:1px}

/* ---- Onboarding ---- */
.onb{position:absolute; inset:0; z-index:70; background:var(--cream-2); display:flex; flex-direction:column}
.onb-step{position:absolute; inset:0; display:flex; flex-direction:column; padding:26px 22px max(26px,env(safe-area-inset-bottom)); padding-top:max(30px,env(safe-area-inset-top))}
.onb-step[hidden]{display:none}
.onb-top{margin-bottom:8px}
.onb-logo .logo{font-weight:800; font-size:20px} .onb-logo .logo-accent{font-weight:800; font-size:20px; color:var(--coral); font-style:italic}
.onb-hero{flex:1; display:flex; flex-direction:column; justify-content:center}
.onb-badge{align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--coral); background:var(--coral-soft); padding:5px 11px; border-radius:99px}
.onb-hero h2{font-size:30px; font-weight:800; letter-spacing:-.02em; margin:14px 0 8px}
.onb-hero p{font-size:15px; color:var(--ink-2); line-height:1.5; margin:0}
.onb-list{list-style:none; padding:0; margin:22px 0 0; display:flex; flex-direction:column; gap:12px}
.onb-list li{background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:13px 15px; box-shadow:var(--shadow); font-size:13px; color:var(--ink-3)}
.onb-list li b{color:var(--coral); font-size:16px; margin-right:8px}
.onb-list li span{display:block; margin-top:2px}
.onb-head{display:flex; align-items:center; gap:6px; margin-bottom:18px; color:var(--ink-3); font-size:12.5px; font-weight:600}
.onb-head .back{width:30px; height:30px; font-size:26px}
.onb-h{font-size:24px; font-weight:800; margin:0 0 6px; letter-spacing:-.01em}
.onb-sub{font-size:14px; color:var(--ink-2); margin:0 0 18px}
.onb .fld{margin-bottom:14px}
.onb .fld input,.onb .fld select{width:100%; margin-top:6px; padding:13px 14px; font-size:15px; font-weight:500;
  border:1px solid var(--line-2); border-radius:12px; background:var(--paper); color:var(--ink); outline:none}
.onb .fld input:focus,.onb .fld select:focus{border-color:var(--coral)}
.grow{flex:1}
.opd-card{display:flex; gap:13px; align-items:center; margin-top:4px}
.opd-logo{flex:0 0 48px; width:48px; height:48px; border-radius:12px; background:#eef4ff; color:#325AD3; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center}
.opd-txt{font-size:12.5px; color:var(--ink-2); line-height:1.4}
.check{display:flex; gap:11px; align-items:flex-start; margin-top:16px; font-size:13px; color:var(--ink-2); line-height:1.4; cursor:pointer}
.check input{width:20px; height:20px; flex:0 0 20px; margin-top:1px; accent-color:var(--coral)}
.check a{color:var(--coral)}
.onb-done{align-items:center; justify-content:center; text-align:center}
.onb-done h2{font-size:26px; font-weight:800; margin:0 0 8px}
.onb-done p{font-size:15px; color:var(--ink-2); margin:0 0 26px; max-width:280px}
.done-mark{width:88px; height:88px; border-radius:50%; background:var(--green-soft); display:flex; align-items:center; justify-content:center; margin-bottom:22px; animation:pop .4s cubic-bezier(.2,1.3,.4,1)}
.done-mark i{width:30px; height:54px; border:5px solid var(--green); border-top:none; border-left:none; transform:rotate(42deg) translateY(-6px); border-radius:0 0 4px 0}
.onb-done .btn-primary{max-width:300px}
@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}

/* На телефоне колонка и так во весь экран (max-width:480 > ширины экрана). */

/* ---- Иконочные маски (inline SVG data-uri) ---- */
:root{
  --rcpt-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2v20l2-1.5L9 22l2-1.5L13 22l2-1.5L17 22l2-1.5V2l-2 1.5L15 2l-2 1.5L11 2 9 3.5 7 2 5 3.5z M8 8h8 M8 12h8 M8 16h5' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  --m-home:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  --m-rcpt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2v20l2-1.5L10 22l2-1.5L14 22l2-1.5L18 22V2l-2 1.5L14 2l-2 1.5L10 2 8 3.5z M9 8h6 M9 12h6' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  --m-bal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='6' width='18' height='13' rx='2.5' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M3 10h18' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat;
  --m-prof:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat;
  --m-bell:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6z M9.5 19a2.5 2.5 0 0 0 5 0' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  --m-sup:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H9l-4 4v-4H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- поддержка (тикеты) ---------- */
.ti.sup{-webkit-mask:var(--m-sup); mask:var(--m-sup)}
.sup-tickets{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.sup-tk{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:11px 13px;cursor:pointer}
.sup-tk .mid{flex:1;min-width:0}
.sup-tk .t{font-weight:600;font-size:14px}
.sup-tk .d{font-size:12px;color:var(--ink-3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sup-head{display:flex;align-items:center;gap:8px;margin:2px 0 12px;font-weight:700;font-size:16px}
.sup-head .back{background:none;border:0;font-size:24px;color:var(--coral);cursor:pointer;line-height:1;padding:0 4px 0 0}
.sup-msgs{display:flex;flex-direction:column;gap:8px;max-height:48vh;overflow:auto;padding:4px 0 10px}
.smsg{max-width:82%}.smsg.usr{align-self:flex-end}.smsg.adm{align-self:flex-start}
.smsg .sb{padding:9px 13px;border-radius:14px;font-size:14px;white-space:pre-wrap;line-height:1.35}
.smsg.usr .sb{background:var(--coral);color:#fff;border-bottom-right-radius:4px}
.smsg.adm .sb{background:var(--card);border:1px solid var(--line);border-bottom-left-radius:4px}
.smsg .st{font-size:10.5px;color:var(--ink-3);margin-top:3px}.smsg.usr .st{text-align:right}
#supReplyBox textarea,#supText{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px;font:inherit;resize:vertical;background:#fff}
.sup-actions{display:flex;gap:10px;align-items:center;margin-top:8px}
.sup-actions .btn-text{color:var(--ink-3)}

/* ---- ЛК на реальном API: загрузка + прокрутка онбординга ---- */
.splash{position:absolute; inset:0; z-index:90; background:var(--cream-2); display:flex; align-items:center; justify-content:center}
.splash[hidden]{display:none}
.splash-logo .logo{font-weight:800; font-size:26px}
.splash-logo .logo-accent{font-weight:800; font-size:26px; color:var(--coral); font-style:italic; margin-left:5px}
.onb-scroll{flex:1; overflow-y:auto; margin:0 -4px; padding:0 4px}
.onb .btn-text{margin-top:4px}
#widgetHost:empty{display:none}
#widgetHost{width:100%; max-width:300px}

/* ---- Новый онбординг: dev-подсказка кода, карточка компании, ghost-кнопка ---- */
.dev-hint{margin-top:10px; font-size:12.5px; color:var(--amber); background:var(--amber-soft);
  border:1px dashed #ffd76a; border-radius:10px; padding:9px 12px}
.dev-hint b{font-size:15px; letter-spacing:.08em}
.onb-fine{font-size:11.5px; color:var(--ink-3); line-height:1.4; margin:0 0 12px}
.ghost-btn{width:100%; margin-top:6px; background:var(--paper); border:1px solid var(--line-2);
  color:var(--ink); font-weight:600; padding:13px; border-radius:12px; cursor:pointer; font-size:15px}
.ghost-btn:active{transform:translateY(1px)}
.company-card{margin-top:14px; background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; box-shadow:var(--shadow)}
.company-card .cc-name{font-weight:800; font-size:16px}
.company-card .cc-row{font-size:12.5px; color:var(--ink-2); margin-top:5px; line-height:1.4}
.company-card .cc-inn{font-family:ui-monospace,Menlo,monospace; font-size:12.5px; color:var(--ink-3); margin-top:6px}
.onb .fld input[type=text],.onb .fld input[type=tel],.onb .fld input[type=password],.onb .fld input[type=number]{
  width:100%; margin-top:6px; padding:13px 14px; font-size:15px; border:1px solid var(--line-2);
  border-radius:12px; background:var(--paper); color:var(--ink); outline:none}
.onb .fld input:focus{border-color:var(--coral)}

/* ---------- карты Гифтери (обмен баллов) ---------- */
.test-badge{font-size:10px;font-weight:800;letter-spacing:.5px;color:#fff;background:var(--amber);
  border-radius:5px;padding:2px 6px;vertical-align:middle;margin-left:6px}
.gift-bar{margin-top:12px}
.gift-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.gift-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px;border-radius:14px;
  border:1.5px solid var(--coral);background:var(--coral-soft);cursor:pointer;text-align:left}
.gift-opt .go-nom{font-size:18px;font-weight:800;color:var(--coral-d)}
.gift-opt .go-cost{font-size:11.5px;color:var(--ink-3)}
.gift-opt.off{border-color:var(--line);background:var(--cream);cursor:not-allowed;opacity:.7}
.gift-opt.off .go-nom{color:var(--ink-3)}
.gift-opt:active:not(.off){transform:scale(.98)}
.cards-list{display:flex;flex-direction:column;gap:12px}
.giftcard{border-radius:16px;padding:16px;color:#fff;background:linear-gradient(135deg,#262626,#181818 60%,#3a2a00);
  box-shadow:0 6px 18px rgba(178,48,26,.28);position:relative;overflow:hidden}
.giftcard::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;
  border-radius:50%;background:rgba(255,255,255,.08)}
.gc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.gc-brand{font-weight:800;font-style:italic;font-size:17px;letter-spacing:.3px}
.gc-test{font-size:9.5px;font-weight:800;letter-spacing:.5px;background:rgba(255,255,255,.22);
  border-radius:5px;padding:2px 6px}
.gc-num{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:19px;letter-spacing:1.5px;margin-bottom:12px}
.gc-foot{display:flex;gap:18px;align-items:flex-end}
.gc-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.5px;opacity:.7}
.gc-val{font-family:ui-monospace,monospace;font-size:14px;font-weight:600}
.gc-nom{margin-left:auto;font-size:20px;font-weight:800}
.gc-date{font-size:11px;opacity:.75;margin-top:10px}

/* =====================================================================
   ABC Farben PRO — фирменные блоки поверх базы retail
   ===================================================================== */
.balance-card{background:linear-gradient(135deg,#232323 0%,#121212 100%); box-shadow:0 10px 26px rgba(0,0,0,.28);
  position:relative; overflow:hidden}
.balance-card::after{content:""; position:absolute; right:-40px; top:-40px; width:150px; height:150px; border-radius:50%;
  background:conic-gradient(from 200deg,#181818 0 33%,#c8102e 33% 66%,#ffbe15 66% 100%); opacity:.22}
.bc-amount,.bc-rub b{color:var(--yellow)}
.btn-primary,.btn-scan{background:var(--yellow); color:var(--black); box-shadow:0 8px 20px rgba(240,170,0,.32)}
.btn-primary:hover,.btn-scan:hover{background:var(--yellow-d)}
.btn-scan .ic-scan{border-color:var(--black)} .btn-scan .ic-scan::before{background:var(--black)}
.avatar{background:var(--yellow-soft); color:var(--black)}
.brand{display:flex; align-items:center; gap:10px}
.brand-logo{width:38px; height:38px; border-radius:9px; background:#fff; border:1px solid var(--line); object-fit:contain}
.brand .logo{font-size:16px} .brand .logo-accent{color:var(--coral); font-style:normal}
.appbar{border-bottom:3px solid var(--yellow)}
.appbar.plain{border-bottom:1px solid var(--line)}
.tab.on{color:var(--black); box-shadow:inset 0 3px 0 var(--yellow)}
.chip.on{background:var(--black); color:#fff; border-color:var(--black)}

/* правила начисления */
.how{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px}
.how .hw{background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:12px 12px 11px}
.how .hw b{display:block; font-size:22px; font-weight:800; letter-spacing:-.02em}
.how .hw > span{font-size:12px; color:var(--ink-2); line-height:1.35; display:block; margin-top:2px}
.how .hw.first{background:var(--yellow-soft); border-color:#ffe08a}
.how .hw.first b{color:var(--black)}
.first-banner{margin-top:12px; border-radius:14px; padding:12px 14px; background:var(--yellow); color:var(--black);
  display:flex; gap:12px; align-items:center; font-size:13px; font-weight:600}
.first-banner b{font-size:20px; font-weight:800}

/* каталог участвующих товаров */
.cat-chips{display:flex; gap:8px; overflow-x:auto; padding:10px 16px 4px}
.cat-chips::-webkit-scrollbar{height:0}
.prod-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px}
.prod{background:var(--paper); border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; color:inherit; text-decoration:none}
.prod img{width:100%; aspect-ratio:1/1; object-fit:contain; background:#fff; padding:6px}
.prod .pc{padding:8px 10px 10px; border-top:1px solid var(--line)}
.prod .pl{font-size:10.5px; font-weight:700; letter-spacing:.04em; color:var(--coral); text-transform:uppercase}
.prod .pn{font-size:12.5px; font-weight:600; line-height:1.3; margin-top:2px}
.prod .pk{font-size:11px; color:var(--ink-3); margin-top:4px}
.prod-note{font-size:12px; color:var(--ink-3); margin:12px 2px 0; line-height:1.45}

/* способ получения вознаграждения */
.pay-switch{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px}
.pay-switch button{border:1.5px solid var(--line-2); background:var(--paper); border-radius:12px; padding:11px 8px;
  font:inherit; font-size:13px; font-weight:700; cursor:pointer; color:var(--ink)}
.pay-switch button.on{border-color:var(--black); background:var(--black); color:#fff}
.wd-form{margin-top:10px}
.wd-form .fld input{font-size:18px; font-weight:700}
.wd-list .rule b{font-weight:700}

/* онбординг */
.onb-brand{display:flex; align-items:center; gap:12px}
.onb-brand img{width:64px; height:64px; border-radius:14px; background:#fff; border:1px solid var(--line); object-fit:contain}
.onb-badge{background:var(--yellow); color:var(--black)}
.src-pill{display:inline-block; margin-top:8px; font-size:12px; background:var(--yellow-soft); border:1px dashed #ffd76a;
  border-radius:99px; padding:5px 11px; color:var(--ink-2)}
.src-pill b{color:var(--black)}
.demo-ribbon{position:absolute; top:10px; right:-34px; transform:rotate(35deg); background:var(--coral); color:#fff;
  font-size:10px; font-weight:800; letter-spacing:.08em; padding:3px 40px; z-index:60; pointer-events:none}

/* =====================================================================
   Корпоративный стиль abcfarben.ru (v2): белый фон, тонкие рамки, радиус 5px,
   заголовки Onest, текст PT Sans, жёлтые линейные акценты, тёмный баннер с продукцией
   ===================================================================== */
:root{
  --r:5px; --r-lg:6px; --shadow:none;
  --cream:#f5f5f5; --cream-2:#ffffff; --line:#e6e6e6; --line-2:#d9d9d9;
  --ink:#2a2722; --ink-2:#555555; --ink-3:#999999;
  --font:'PT Sans',Arial,sans-serif; --font-h:'Onest','PT Sans',Arial,sans-serif;
}
body,.device,.screen{background:#fff}
@media(min-width:481px){ body{background:#f5f5f5} .device{box-shadow:0 0 0 1px #e6e6e6} }
h1,h2,h3,.appbar.plain h1,.onb-h,.section-title,.bc-amount,.how .hw b,.stat b,.pn,.who-name,.av-amount{font-family:var(--font-h)}
.appbar.plain h1{font-weight:600; font-size:22px; letter-spacing:-.01em}
.appbar{background:#fff; border-bottom:1px solid var(--line)}
.appbar::after{content:none}
.brand .logo{font-family:var(--font-h); font-weight:600}
.brand .logo-accent{color:var(--ink); background:var(--yellow); padding:1px 6px; border-radius:3px; font-size:13px; margin-left:6px; vertical-align:2px}
.card,.how .hw,.stat,.rcpt,.prod,.gift-opt,.giftcard,.notif,.sup-tk{border-radius:var(--r); box-shadow:none}
.card{border:1px solid var(--line)}
.stat{border:1px solid var(--line); background:#fff}
.section-title{font-weight:600; font-size:17px; margin:24px 2px 10px}
.section-title a{color:var(--ink); font-weight:600}
.section-title a::after{content:" →"; color:var(--yellow-d)}
.eyebrow{display:block; font-size:12px; color:var(--ink-3); margin:22px 2px -4px}
.btn-primary,.btn-scan{border-radius:var(--r); box-shadow:none; font-family:var(--font); font-weight:700}
.btn-primary:hover,.btn-scan:hover{background:#f5b000}
.chip{border-radius:var(--r)}
.chip.on{background:var(--yellow); color:var(--ink); border-color:var(--yellow)}
.tab.on{box-shadow:inset 0 3px 0 var(--yellow)}

/* баннер баланса — как тёмные баннеры сайта с продукцией */
.balance-card{background:#1c1c1c url(./img/sku-9.jpg) no-repeat right -18px bottom -10px/150px auto; border-radius:var(--r-lg); padding:18px 18px 16px; min-height:150px}
.balance-card::before{content:""; position:absolute; inset:0; background:linear-gradient(90deg,#1c1c1c 48%,rgba(28,28,28,.55) 75%,rgba(28,28,28,.15))}
.balance-card::after{content:none}
.balance-card > *{position:relative}
.bc-label{font-family:var(--font-h); text-transform:uppercase; letter-spacing:.08em; font-size:11px; opacity:.75}
.bc-amount{font-weight:700}
.bc-foot{max-width:62%}

/* правила начисления: карточки с жёлтой линейной иконкой */
.how .hw{border:1px solid var(--line); background:#fff; position:relative; padding:14px 12px 12px 52px}
.how .hw::before{content:""; position:absolute; left:12px; top:14px; width:28px; height:28px;
  background:var(--yellow-d); -webkit-mask:var(--ic) center/contain no-repeat; mask:var(--ic) center/contain no-repeat}
.how .hw.first{background:#fff; border-color:var(--yellow)}
.how .hw.first{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M20 12v9H4v-9M2 7h20v5H2zM12 21V7M12 7H7.5a2.5 2.5 0 1 1 0-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 1 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E")}
.how .hw:not(.first){--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M4 3h16v18l-3-2-3 2-2-2-2 2-3-2-3 2zM8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E")}
.first-banner{border-radius:var(--r); background:var(--yellow-soft); border:1px solid #ffe08a}

/* ссылка на инструкцию */
.guide-link{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; padding:13px 14px;
  border:1px solid var(--line); border-radius:var(--r); color:var(--ink); text-decoration:none; background:#fff}
.guide-link b{font-family:var(--font-h); font-weight:600; font-size:14.5px}
.guide-link span{font-size:12.5px; color:var(--ink-3); display:block; margin-top:2px}
.guide-link i{font-style:normal; color:var(--yellow-d); font-size:18px}
.onb-guide{display:block; text-align:center; margin-top:4px; font-size:14px; color:var(--ink); text-decoration:underline; text-decoration-color:var(--yellow); text-underline-offset:3px}
.onb-badge{border-radius:3px}
.prod .pl{color:var(--ink-3)}
/* баннер баланса: фото товара в белой плитке справа, как в баннерах сайта */
.balance-card{background:#1c1c1c; padding-right:122px}
.balance-card::before{content:none}
.balance-card::after{content:""; position:absolute; right:14px; top:50%; transform:translateY(-50%); width:96px; height:96px;
  background:#fff url(./img/sku-9.jpg) center/90% no-repeat; border-radius:var(--r); opacity:1}
.bc-foot{max-width:none}
/* онбординг в корпоративном стиле */
.onb{background:#fff}
.onb-logo .logo{font-family:var(--font-h); font-weight:600}
.onb-logo .logo-accent{font-style:normal; color:var(--ink); background:var(--yellow); padding:1px 6px; border-radius:3px; font-size:13px; vertical-align:3px}
.onb-hero h2{font-family:var(--font-h); font-weight:700}
.onb-list li{border-radius:var(--r)!important; box-shadow:none!important; border:1px solid var(--line)!important; border-left:3px solid var(--yellow)!important}
.onb-list li b{color:var(--ink)!important; font-family:var(--font-h)}
.src-pill{border-radius:var(--r)}
.fld input,.fld select,.fld textarea{border-radius:var(--r)!important}

/* баллы за фасовку в карточке товара */
.prod .pts{display:flex; flex-wrap:wrap; gap:4px; margin-top:8px}
.prod .pts span{display:inline-flex; gap:4px; align-items:baseline; background:var(--yellow-soft); border-radius:5px; padding:2px 6px; font-size:11px; line-height:1.3}
.prod .pts i{font-style:normal; color:var(--ink-2)}
.prod .pts b{font-weight:800; color:var(--black)}

/* --- регистрация: профиль участника; поддержка в шапке; иконка «Товары» — валик --- */
.prof-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.prof-chips button{border:1px solid var(--line-2); background:var(--paper); color:var(--ink); font:inherit; font-size:13.5px; font-weight:600;
  padding:8px 12px; border-radius:var(--r); cursor:pointer}
.prof-chips button.on{background:var(--yellow); border-color:var(--yellow)}
.check a{color:var(--ink); text-decoration:underline}
.appbar-actions{gap:8px}
.help-ic{-webkit-mask:var(--m-help); mask:var(--m-help); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center}
.ti.paint{-webkit-mask:var(--m-paint); mask:var(--m-paint)}
:root{
  --m-help:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Cpath d='M4 14h3v5H5a1 1 0 0 1-1-1z'/%3E%3Cpath d='M20 14h-3v5h2a1 1 0 0 0 1-1z'/%3E%3Cpath d='M18 19c0 1.2-1.5 2-4 2h-1'/%3E%3C/svg%3E") center/contain no-repeat;
  --m-paint:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='14' height='5' rx='1.5'/%3E%3Cpath d='M17 5.5h3v5.5h-8v3'/%3E%3Crect x='10.5' y='14' width='3' height='7' rx='1'/%3E%3C/svg%3E") center/contain no-repeat;
}
.prod .pmax{margin-top:8px; font-size:14px; font-weight:800; color:var(--ink)}
.prod .pmax small{font-weight:600; color:var(--ink-2); font-size:12px}