/* ════════════════════════════════════════════════════════════════════
   Dilon B2B — "Orbita" theme (preview, 2026-10-06)
   Loaded LAST on every storefront page, so it wins over the page's own
   inline <style>. Pages keep all their markup and JS; this file only
   re-skins them: near-black space background, Onest type, lime primary
   action, glass pill header, hairline cards with a soft glow.
   The page styles are mostly inline style="" attributes, so several rules
   match on [style*="…"] and use !important — that is deliberate.
   ════════════════════════════════════════════════════════════════════ */

/* ── palette: always the dark space palette, whatever the toggle says ── */
html, html[data-theme="dark"], html[data-theme="light"]{
  --bg:#05090e !important;
  --surface:#0b131b !important;
  --surface2:#08111a !important;
  --text:#eef3f7 !important;
  --muted:#93a1b0 !important;
  --faint:#617080 !important;
  --border:rgba(255,255,255,.09) !important;
  --soft:rgba(181,244,108,.07) !important;
  --link:#b5f46c !important;
  --info-soft:rgba(61,143,230,.16) !important;
  --accent-text:#c9f79a !important;
  --teal:#b5f46c !important;          /* the page's accent → lime */
  --navy:#05090e !important;
  --o-lime:#b5f46c; --o-lime-ink:#0b1a06; --o-teal:#2fd3c0; --o-blue:#3d8fe6;
  --o-line:rgba(255,255,255,.09); --o-line2:rgba(255,255,255,.16);
  color-scheme:dark;
}
html{background:#05090e}
body{background:#05090e !important;color:var(--text) !important;font-family:"Onest",system-ui,sans-serif !important;font-weight:400}
body, button, input, select, textarea{font-family:"Onest",system-ui,sans-serif !important}
h1,h2,h3,h4,[style*="Plus Jakarta Sans"]{font-family:"Onest",system-ui,sans-serif !important}
h1{font-weight:300 !important;letter-spacing:-.025em !important}
h2{font-weight:300 !important;letter-spacing:-.02em !important}
h3,h4{font-weight:500 !important}
::selection{background:rgba(181,244,108,.3)}
#theme{display:none !important}          /* the theme is fixed: no light/dark toggle */

/* hard-coded colours: generated by build.py (both "#hex" and "rgb()" spellings) */
[style*="background:var(--navy)"],[style*="background: var(--navy)"]{background:rgba(255,255,255,.1) !important}

/* ── top contact strip ── */
body > div[style*="background:#0C5E58"],body > div[style*="background: rgb(12, 94, 88)"]{background:#070c11 !important;border-bottom:1px solid var(--o-line)}
body > div[style*="background:#0C5E58"] *{color:#8593a1 !important}
body > div[style*="background:#0C5E58"] a[href*="selleron"]{color:#dfe7ee !important}

/* ── header → floating glass pill ── */
header[style*="sticky"]{background:transparent !important;border:0 !important;box-shadow:none !important;top:12px !important;padding:12px 0 0 !important;pointer-events:none}
header[style*="sticky"] > div{pointer-events:auto;max-width:1180px !important;height:62px !important;padding:0 10px 0 20px !important;
  background:rgba(10,16,23,.72) !important;border:1px solid var(--o-line) !important;border-radius:999px !important;
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:0 12px 40px rgba(0,0,0,.4)}
header img[alt^="DILON"]{height:30px !important}
header [style*="letter-spacing:0.12em"]{background:rgba(181,244,108,.1) !important;color:#c9f79a !important;border-radius:999px !important;font-weight:500 !important}
header [style*="width:1px;height:24px"]{background:var(--o-line2) !important}
header #lang-bg, header #lang-en{border-radius:999px !important;font-weight:500 !important}
header div[style*="border:1px solid var(--border);border-radius:8px;padding:2px"]{border-radius:999px !important}
header a[href="account"][style*="border:1px solid"]{border-radius:999px !important;background:rgba(255,255,255,.04) !important}
header #acct-initials{border-radius:999px !important}
header input{border-radius:999px !important}

/* ── buttons ── */
.btn{border-radius:999px !important;font-weight:500 !important;letter-spacing:0 !important}
.btn:hover{transform:none !important}
.btn-primary{background:var(--o-lime) !important;color:var(--o-lime-ink) !important;border-color:transparent !important;
  box-shadow:0 0 0 1px rgba(181,244,108,.5),0 8px 30px rgba(181,244,108,.22) !important}
.btn-primary:hover{filter:brightness(1.07);box-shadow:0 0 0 1px rgba(181,244,108,.75),0 8px 40px rgba(181,244,108,.38) !important}
.btn-ghost,.btn-light{background:rgba(255,255,255,.03) !important;color:#e9eff5 !important;border:1px solid rgba(255,255,255,.26) !important}
.btn-ghost:hover,.btn-light:hover{background:rgba(255,255,255,.07) !important;border-color:rgba(255,255,255,.5) !important}
button[style*="background:var(--teal)"],a[style*="background:var(--teal)"]{color:var(--o-lime-ink) !important;border-radius:999px !important;box-shadow:0 0 0 1px rgba(181,244,108,.45),0 6px 24px rgba(181,244,108,.18)}

/* ── cards, tiles, panels ── */
.card,.ctile,.dcard,.cat-tile,.dorder,[style*="background:var(--surface);border:1px solid var(--border);border-radius"]{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.012)) !important;border:1px solid var(--o-line) !important;box-shadow:none !important}
.card{border-radius:18px !important}
.ctile,.cat-tile,.dcard{border-radius:14px !important}
.ctile:hover,.cat-tile:hover,.dcard:hover{transform:none !important;border-color:rgba(181,244,108,.38) !important;
  background:rgba(181,244,108,.035) !important;box-shadow:0 0 34px rgba(181,244,108,.07) !important}
.btile{background:rgba(255,255,255,.03) !important;border-color:var(--o-line) !important}
.btile:hover{border-color:rgba(181,244,108,.45) !important}
.dcard .img{background-color:#0d1620 !important}
.cat-ic,.prop-ic{background:transparent !important}
.dorder button{border-radius:999px !important;border-color:rgba(181,244,108,.55) !important;color:var(--o-lime) !important}
.dorder button:hover{background:var(--o-lime) !important;color:var(--o-lime-ink) !important}

/* glowing icon tile (prop-ic & friends) */
.prop-ic,.o-ic{position:relative;width:56px !important;height:56px !important;border-radius:15px !important;
  background:radial-gradient(circle,rgba(181,244,108,.10),rgba(5,9,14,.9) 70%) !important;box-shadow:0 0 28px rgba(181,244,108,.15)}
.prop-ic::before,.o-ic::before{content:"";position:absolute;inset:0;border-radius:15px;padding:1px;
  background:linear-gradient(145deg,var(--o-lime),var(--o-teal) 55%,var(--o-blue));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.prop-ic svg,.o-ic svg{stroke:#eaf6e6 !important;color:#eaf6e6 !important}
.prop-ic svg *{stroke:#eaf6e6 !important}

/* ── form controls ── */
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{
  background:rgba(255,255,255,.035) !important;color:var(--text) !important;border-color:var(--o-line2) !important}
input:focus,select:focus,textarea:focus{outline:none !important;border-color:rgba(181,244,108,.6) !important;box-shadow:0 0 0 3px rgba(181,244,108,.14) !important}
input::placeholder,textarea::placeholder{color:#5d6b7a !important}
select option{background:#0b131b;color:var(--text)}
input[type=checkbox],input[type=radio]{accent-color:var(--o-lime)}

/* ── tables ── */
table{border-color:var(--o-line) !important}
th{color:var(--muted) !important;font-weight:500 !important}
tr,td,th{border-color:var(--o-line) !important}

/* ── footer ── */
footer[style*="background:#0B2138"]{background:#05090e !important;border-top:1px solid var(--o-line);margin-top:96px}
footer a{color:#8593a1 !important}
footer a:hover{color:#fff !important}
footer h4,footer h5,footer [style*="text-transform:uppercase"]{color:#e6edf3 !important}

/* ── scrollbars ── */
*{scrollbar-color:#24313d transparent}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#1c2833;border-radius:10px}

/* ════════════════════════ shared section furniture ════════════════════════ */
.o-eyebrow{display:inline-block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#a5b1bd;
  padding:5px 12px;border-radius:999px;border:1px solid var(--o-line);background:rgba(255,255,255,.03);margin-bottom:16px}
.o-center{text-align:center}

/* ════════════════════════ HOME: hero with the planet ════════════════════════ */
.hero{position:relative;isolation:isolate;overflow:hidden !important;min-height:900px;text-align:center;
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(46,96,128,.36), transparent 62%),
    radial-gradient(640px 460px at 102% 84%, rgba(48,128,235,.55), transparent 70%),
    radial-gradient(620px 440px at -2% 92%, rgba(120,240,110,.48), transparent 70%),
    #05090e !important;margin-top:-86px;padding-top:86px}
.hero > .wrap{padding:96px 24px 340px !important;max-width:980px !important}
.hero > .wrap > span:first-child{letter-spacing:.02em !important;text-transform:none !important;font-weight:400 !important;font-size:12.5px !important;
  color:#aeb9c5 !important;background:rgba(255,255,255,.04) !important;border:1px solid var(--o-line) !important;padding:6px 14px !important}
.hero .hero-h1{font-size:66px !important;font-weight:300 !important;line-height:1.08 !important;margin:24px auto 0 !important;max-width:900px !important}
.hero p{margin:20px auto 0 !important;color:#a3b0bd !important;font-size:16.5px !important;line-height:1.6 !important;max-width:640px !important}
.hero .wrap > div{justify-content:center}
.hero #hero-out .btn-primary{order:1;background:rgba(255,255,255,.03) !important;color:#e9eff5 !important;border:1px solid rgba(255,255,255,.28) !important;box-shadow:none !important}
.hero #hero-out .btn-ghost{order:2;background:var(--o-lime) !important;color:var(--o-lime-ink) !important;border-color:transparent !important;
  box-shadow:0 0 0 1px rgba(181,244,108,.5),0 8px 30px rgba(181,244,108,.25) !important}
.hero .stat-chip{background:transparent !important;border:0 !important;flex-direction:row !important;align-items:baseline;gap:8px !important;padding:0 18px !important}
.hero .stat-chip > span:first-child{font-size:28px !important;font-weight:500 !important}
.hero .stat-chip > span:last-child{font-size:13px !important;color:#d1dbe4 !important}
.hero .wrap > div:last-child{position:absolute;left:0;right:0;bottom:56px;justify-content:center;margin:0 !important;gap:30px !important}
.o-planet{position:absolute;left:50%;top:560px;width:1560px;height:1560px;margin-left:-780px;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 50% 0%, #eaf6ff 0, #a3cbe3 2.6%, #4683a8 8%, #1d4b6a 16%, #0e293c 28%, #08151f 46%, #060c12 64%);
  box-shadow:0 0 90px 16px rgba(130,235,225,.30), 0 0 240px 70px rgba(52,130,232,.16), inset 0 24px 60px rgba(200,250,255,.30)}
.o-planet::before{content:"";position:absolute;inset:0;border-radius:50%;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1560' height='900'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035 0.011' numOctaves='5' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 2.8 0 0 0 -1.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:1560px 900px;background-repeat:no-repeat;background-position:top center;
  -webkit-mask-image:radial-gradient(circle at 50% 0%, #000 0, rgba(0,0,0,.85) 16%, transparent 34%);
          mask-image:radial-gradient(circle at 50% 0%, #000 0, rgba(0,0,0,.85) 16%, transparent 34%)}
.o-planet::after{content:"";position:absolute;inset:-3px;border-radius:50%;
  background:conic-gradient(rgba(225,255,250,.95) 0deg, rgba(90,180,255,.75) 34deg, rgba(60,140,240,.25) 62deg, transparent 80deg 280deg, rgba(140,250,120,.35) 298deg, rgba(160,255,130,.8) 326deg, rgba(225,255,250,.95) 360deg);
  -webkit-mask:radial-gradient(circle closest-side, transparent 97.6%, #000 99%, #000 99.7%, transparent 100%);
          mask:radial-gradient(circle closest-side, transparent 97.6%, #000 99%, #000 99.7%, transparent 100%);filter:blur(5px)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:radial-gradient(1px 1px at 12% 18%,#fff8,transparent),radial-gradient(1px 1px at 82% 12%,#fff6,transparent),
    radial-gradient(1px 1px at 64% 30%,#fff5,transparent),radial-gradient(1px 1px at 30% 40%,#fff4,transparent),
    radial-gradient(1px 1px at 90% 44%,#fff5,transparent),radial-gradient(1px 1px at 6% 52%,#fff4,transparent),
    radial-gradient(1px 1px at 46% 8%,#fff6,transparent),radial-gradient(1px 1px at 74% 52%,#fff3,transparent)}

/* ── HOME: value props as one hairline panel with dividers (reference "why") ── */
.grid-props{gap:0 !important;border:1px solid var(--o-line);border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.008))}
.grid-props > .card{background:transparent !important;border:0 !important;border-left:1px solid var(--o-line) !important;border-radius:0 !important;padding:34px 28px 36px !important}
.grid-props > .card:first-child{border-left:0 !important}
.grid-props .prop-ic{margin-bottom:52px !important}
.grid-props h3{font-size:15.5px !important}
.grid-props p{color:#7f8d9b !important;font-size:13.5px !important;line-height:1.6 !important}

/* ── HOME: headings centred like the reference ── */
.o-head{text-align:center;margin:0 auto 48px}
.o-head h2{font-size:42px !important;line-height:1.15}
.o-head p{margin:14px 0 0 !important}

/* ── HOME: category tiles ── */
.grid-cats{grid-template-columns:repeat(6,1fr) !important;gap:12px !important}
.cat-tile{flex-direction:column !important;align-items:flex-start !important;gap:26px !important;padding:20px 16px 18px !important;font-weight:400 !important;font-size:13.5px !important}
.cat-ic{width:auto !important;height:auto !important;font-size:20px !important;filter:grayscale(1) brightness(1.6) sepia(1) hue-rotate(40deg) saturate(2.5)}

/* ── HOME: how it works — steps + space panel ── */
.o-how{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:stretch}
.o-steps{display:flex;flex-direction:column;justify-content:space-between}
.o-step{display:grid;grid-template-columns:28px 1fr;gap:16px;padding:20px 0 20px 22px;border-left:1px solid var(--o-line)}
.o-step.on{border-left:2px solid var(--o-lime);padding-left:21px}
.o-step svg{width:20px;height:20px;stroke:#cfd8e1;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.o-step h4{margin:0;font-weight:500 !important;font-size:15px}
.o-step p{margin:7px 0 0;color:#7f8d9b;font-size:13.5px;line-height:1.55;max-width:360px}
.o-space{position:relative;border-radius:18px;border:1px solid var(--o-line);overflow:hidden;min-height:470px;
  background:radial-gradient(420px 260px at 100% 105%, rgba(110,235,120,.38), transparent 70%),radial-gradient(500px 300px at 0% 0%, rgba(48,110,170,.22), transparent 70%),#0a121a}
.o-space::before{content:"";position:absolute;inset:0;opacity:.8;
  background-image:radial-gradient(1px 1px at 8% 12%,#fff9,transparent),radial-gradient(1px 1px at 22% 64%,#fff6,transparent),radial-gradient(1px 1px at 37% 20%,#fff7,transparent),
    radial-gradient(1px 1px at 51% 82%,#fff5,transparent),radial-gradient(1px 1px at 66% 10%,#fff8,transparent),radial-gradient(1px 1px at 79% 38%,#fff6,transparent),
    radial-gradient(1px 1px at 91% 70%,#fff5,transparent),radial-gradient(1.5px 1.5px at 14% 88%,#fff6,transparent),radial-gradient(1px 1px at 58% 46%,#fff4,transparent)}
.o-node{position:absolute;left:7%;top:8%;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid var(--o-line2)}
.o-node img{width:26px;height:26px;object-fit:cover;object-position:left;border-radius:6px}
.o-wire-v{position:absolute;left:calc(7% + 23px);top:calc(8% + 46px);height:calc(15% + 0px);border-left:1px dashed rgba(255,255,255,.22)}
.o-wire-h{position:absolute;left:calc(7% + 23px);top:calc(23% + 0px);width:calc(17% - 23px);border-top:1px dashed rgba(255,255,255,.22)}
.o-code{position:absolute;left:24%;top:17%;right:7%;border-radius:12px;border:1px solid var(--o-line2);background:rgba(16,24,33,.88);box-shadow:0 20px 60px rgba(0,0,0,.45)}
.o-code .bar{display:flex;gap:6px;padding:11px 14px;border-bottom:1px solid var(--o-line)}
.o-code .bar i{width:8px;height:8px;border-radius:50%;background:#3a4653}
.o-code pre{margin:0;padding:16px 18px 18px;font:12px/1.65 ui-monospace,"SFMono-Regular",Menlo,monospace;color:#c9d4de;white-space:pre-wrap;word-break:break-all}
.o-code .c{color:#6e7d8c}.o-code .k{color:var(--o-teal)}.o-code .s{color:var(--o-lime)}
.o-chips{position:absolute;left:24%;right:7%;bottom:26px;display:flex;gap:8px;flex-wrap:wrap}
.o-chip{font-size:12px;color:#d6dfe7;padding:7px 12px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid var(--o-line2)}
.o-space .btn{position:absolute;right:7%;top:7%;height:36px !important;font-size:13px !important}

/* ── HOME: final CTA panel with a small planet ── */
.o-final{position:relative;overflow:hidden;isolation:isolate;border-radius:24px !important;border:1px solid var(--o-line) !important;text-align:center;padding:96px 24px 170px !important;
  background:radial-gradient(900px 320px at 50% 120%, rgba(64,205,190,.30), transparent 70%),radial-gradient(500px 300px at 0% 110%, rgba(110,235,120,.28), transparent 70%),
    radial-gradient(500px 300px at 100% 110%, rgba(48,128,235,.30), transparent 70%),#081016 !important;color:var(--text) !important}
.o-final::after{content:"";position:absolute;left:50%;bottom:-1010px;width:1100px;height:1100px;margin-left:-550px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle at 50% 0%, #cfe8f7 0, #4f87a8 4%, #173a50 14%, #08141d 36%);box-shadow:0 0 90px 20px rgba(64,205,190,.30), inset 0 20px 50px rgba(214,255,244,.45)}
.o-final h2{font-size:44px !important;color:#fff !important}
.o-final p{color:var(--muted) !important}
.o-final .btn-ghost{border-color:rgba(255,255,255,.28) !important}

/* ════════════════════════ responsive ════════════════════════ */
@media (max-width:980px){
  .grid-props{grid-template-columns:1fr 1fr !important}
  .grid-props > .card:nth-child(3){border-left:0 !important}
  .grid-props > .card:nth-child(n+3){border-top:1px solid var(--o-line) !important}
  .grid-cats{grid-template-columns:repeat(3,1fr) !important}
  .o-how{grid-template-columns:1fr}
}
@media (max-width:760px){
  header[style*="sticky"] > div{height:56px !important;padding:0 8px 0 14px !important;gap:10px !important;margin:0 10px}
  header [style*="letter-spacing:0.12em"],header [style*="letter-spacing: 0.12em"]{display:none !important}
  header #auth-in .btn,header #hdr-logout,header #acct-name{display:none !important}
  header[style*="sticky"] > div{gap:8px !important}
  header img[alt^="DILON"]{height:24px !important}
  header [style*="width:1px;height:24px"],header [style*="width: 1px; height: 24px"]{display:none !important}
  header #lang-bg,header #lang-en{padding:4px 7px !important;font-size:11px !important}
  .hero{min-height:820px}
  .hero > .wrap{padding:60px 18px 300px !important}
  .hero .hero-h1{font-size:40px !important}
  .hero p{font-size:15px !important}
  .o-planet{top:600px;width:1100px;height:1100px;margin-left:-550px}
  .hero .wrap > div:last-child{gap:14px 8px !important;bottom:36px;padding:0 10px}
  .hero .stat-chip > span:first-child{font-size:21px !important}
  .o-head h2,.o-final h2{font-size:30px !important}
  .grid-props{grid-template-columns:1fr !important}
  .grid-props > .card{border-left:0 !important;border-top:1px solid var(--o-line) !important}
  .grid-props > .card:first-child{border-top:0 !important}
  .grid-props .prop-ic{margin-bottom:26px !important}
  .grid-cats{grid-template-columns:1fr 1fr !important}
  .o-code{left:6%;right:6%;top:20%}.o-chips{left:6%;right:6%}.o-node,.o-wire-v,.o-wire-h{display:none}
  .o-space .btn{display:none}
}

/* ════════════ header v2 (2026-10-06): no top contact bar, roomier pill ════════════
   The address / e-mail / phone / SELLERON strip is gone — all of it is in the footer.
   Inside the pill: equal inset all round, bigger controls, links centred like the
   reference. */
div[style^="background:#0C5E58;color:#fff"],div[style^="background: rgb(12, 94, 88); color: rgb(255, 255, 255)"]{display:none !important}
header[style*="sticky"]{padding-top:16px !important;top:0 !important}
header[style*="sticky"] > div{height:70px !important;padding:0 10px 0 24px !important;gap:12px !important;max-width:1200px !important}
header[style*="sticky"] > div > div:empty{display:none !important}
header[style*="sticky"] .btn,header[style*="sticky"] > div a[class*="btn"]{height:48px !important;padding:0 26px !important;font-size:15px !important}
header[style*="sticky"] nav,.o-nav{flex:1;display:flex !important;justify-content:center;align-items:center;gap:4px;margin:0 !important}
header[style*="sticky"] nav a,.o-nav a{font-size:14.5px !important;font-weight:400 !important;color:#c6d0da !important;padding:11px 16px !important;border-radius:999px !important;text-decoration:none;background:transparent}
header[style*="sticky"] nav a:hover,.o-nav a:hover{background:rgba(255,255,255,.06) !important;color:#fff !important}
header[style*="sticky"] nav a[style*="font-weight:700"],header[style*="sticky"] nav a[style*="font-weight: 700"],
header[style*="sticky"] nav a[style*="background:var(--soft)"],header[style*="sticky"] nav a[style*="background: var(--soft)"]{background:rgba(255,255,255,.08) !important;color:#fff !important}
/* BG/EN: a proper pill the height of the buttons */
header div[style*="gap:2px"][style*="border"],header div[style*="gap: 2px"][style*="border"]{height:48px;padding:4px !important;border-radius:999px !important;border-color:var(--o-line2) !important;align-items:center}
header div[style*="gap:2px"] button,header div[style*="gap: 2px"] button{height:38px !important;padding:0 14px !important;font-size:13px !important;border-radius:999px !important}
/* inner pages: round 48px icon buttons and account chip */
header[style*="sticky"] a[aria-label]{width:48px !important;height:48px !important;border-radius:999px !important}
header[style*="sticky"] button[onclick],header[style*="sticky"] > div > div > button{height:48px !important;border-radius:999px !important;padding:0 14px 0 8px !important}
header[style*="sticky"] a[href="account"][style*="border"]{height:48px !important;padding:0 16px 0 8px !important}
header #acct-initials,header button > span:first-child{width:32px !important;height:32px !important;border-radius:999px !important}
.hero{margin-top:-102px !important;padding-top:102px !important}
@media (max-width:980px){ .o-nav,header[style*="sticky"] nav{display:none !important} }
@media (max-width:760px){
  header[style*="sticky"]{padding-top:10px !important}
  header[style*="sticky"] > div{height:60px !important;padding:0 8px 0 14px !important;gap:8px !important}
  header[style*="sticky"] .btn,header[style*="sticky"] > div a[class*="btn"]{height:42px !important;padding:0 16px !important;font-size:13.5px !important}
  header div[style*="gap:2px"][style*="border"],header div[style*="gap: 2px"][style*="border"]{height:42px}
  header div[style*="gap:2px"] button,header div[style*="gap: 2px"] button{height:32px !important;padding:0 9px !important;font-size:11.5px !important}
  header[style*="sticky"] a[aria-label]{width:40px !important;height:40px !important}
  header[style*="sticky"] button[onclick],header[style*="sticky"] > div > div > button{height:40px !important}
}

/* scrolled content must disappear UNDER the floating pill, not show through or
   around it: a near-opaque pill plus a soft dark fade behind the whole header row */
header[style*="sticky"] > div{background:rgba(9,14,20,.9) !important}
header[style*="sticky"]::before{content:"";position:absolute;left:0;right:0;top:0;bottom:-18px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,9,14,.97) 0%,rgba(5,9,14,.9) 62%,rgba(5,9,14,0) 100%)}

/* ── generated: hard-coded colours, both spellings ── */
[style*="color:#14A89E" i],[style*="color: #14A89E" i],[style*="color: rgb(20, 168, 158)"]{color:var(--o-lime) !important}
[style*="color:#0C5E58" i],[style*="color: #0C5E58" i],[style*="color: rgb(12, 94, 88)"]{color:var(--o-lime) !important}
[style*="color:#0F938A" i],[style*="color: #0F938A" i],[style*="color: rgb(15, 147, 138)"]{color:var(--o-lime) !important}
[style*="color:#0F7A57" i],[style*="color: #0F7A57" i],[style*="color: rgb(15, 122, 87)"]{color:#8ee39a !important}
[style*="color:#B23A28" i],[style*="color: #B23A28" i],[style*="color: rgb(178, 58, 40)"]{color:#ff8f7a !important}
[style*="color:#92610A" i],[style*="color: #92610A" i],[style*="color: rgb(146, 97, 10)"]{color:#f2c46b !important}
[style*="color:#BFE3DF" i],[style*="color: #BFE3DF" i],[style*="color: rgb(191, 227, 223)"]{color:#8593a1 !important}
[style*="color:#5FD6CD" i],[style*="color: #5FD6CD" i],[style*="color: rgb(95, 214, 205)"]{color:var(--o-lime) !important}
[style*="color:#8DE6DC" i],[style*="color: #8DE6DC" i],[style*="color: rgb(141, 230, 220)"]{color:var(--o-lime) !important}
[style*="color:#71D3DC" i],[style*="color: #71D3DC" i],[style*="color: rgb(113, 211, 220)"]{color:var(--o-lime) !important}
[style*="color:#1B2A47" i],[style*="color: #1B2A47" i],[style*="color: rgb(27, 42, 71)"]{color:var(--text) !important}
[style*="color:#11567F" i],[style*="color: #11567F" i],[style*="color: rgb(17, 86, 127)"]{color:var(--o-lime) !important}
[style*="solid #14A89E" i],[style*="solid rgb(20, 168, 158)"],[style*="border-color:#14A89E" i],[style*="border-color: #14A89E" i],[style*="border-color: rgb(20, 168, 158)"]{border-color:rgba(181,244,108,.55) !important}
[style*="solid #B23A28" i],[style*="solid rgb(178, 58, 40)"],[style*="border-color:#B23A28" i],[style*="border-color: #B23A28" i],[style*="border-color: rgb(178, 58, 40)"]{border-color:rgba(255,143,122,.45) !important}
[style*="solid #F6D2C9" i],[style*="solid rgb(246, 210, 201)"],[style*="border-color:#F6D2C9" i],[style*="border-color: #F6D2C9" i],[style*="border-color: rgb(246, 210, 201)"]{border-color:rgba(255,143,122,.35) !important}
[style*="solid #BFE6D5" i],[style*="solid rgb(191, 230, 213)"],[style*="border-color:#BFE6D5" i],[style*="border-color: #BFE6D5" i],[style*="border-color: rgb(191, 230, 213)"]{border-color:rgba(142,227,154,.35) !important}
[style*="background:#14A89E" i],[style*="background: #14A89E" i],[style*="background: rgb(20, 168, 158)"],[style*="background-color:#14A89E" i],[style*="background-color: #14A89E" i],[style*="background-color: rgb(20, 168, 158)"]{background:var(--o-lime) !important;color:var(--o-lime-ink) !important;}
[style*="background:#0C5E58" i],[style*="background: #0C5E58" i],[style*="background: rgb(12, 94, 88)"],[style*="background-color:#0C5E58" i],[style*="background-color: #0C5E58" i],[style*="background-color: rgb(12, 94, 88)"]{background:#070c11 !important;}
[style*="background:#0F938A" i],[style*="background: #0F938A" i],[style*="background: rgb(15, 147, 138)"],[style*="background-color:#0F938A" i],[style*="background-color: #0F938A" i],[style*="background-color: rgb(15, 147, 138)"]{background:var(--o-lime) !important;color:var(--o-lime-ink) !important;}
[style*="background:#1B2A47" i],[style*="background: #1B2A47" i],[style*="background: rgb(27, 42, 71)"],[style*="background-color:#1B2A47" i],[style*="background-color: #1B2A47" i],[style*="background-color: rgb(27, 42, 71)"]{background:rgba(255,255,255,.1) !important;color:#fff !important;}
[style*="background:#0B2138" i],[style*="background: #0B2138" i],[style*="background: rgb(11, 33, 56)"],[style*="background-color:#0B2138" i],[style*="background-color: #0B2138" i],[style*="background-color: rgb(11, 33, 56)"]{background:var(--surface) !important;}
[style*="background:#FCEAE6" i],[style*="background: #FCEAE6" i],[style*="background: rgb(252, 234, 230)"],[style*="background-color:#FCEAE6" i],[style*="background-color: #FCEAE6" i],[style*="background-color: rgb(252, 234, 230)"]{background:rgba(255,143,122,.08) !important;}
[style*="background:#FDF4E3" i],[style*="background: #FDF4E3" i],[style*="background: rgb(253, 244, 227)"],[style*="background-color:#FDF4E3" i],[style*="background-color: #FDF4E3" i],[style*="background-color: rgb(253, 244, 227)"]{background:rgba(242,196,107,.08) !important;}
[style*="background:#E7F6F0" i],[style*="background: #E7F6F0" i],[style*="background: rgb(231, 246, 240)"],[style*="background-color:#E7F6F0" i],[style*="background-color: #E7F6F0" i],[style*="background-color: rgb(231, 246, 240)"]{background:rgba(142,227,154,.08) !important;}
[style*="background:#E4F6F3" i],[style*="background: #E4F6F3" i],[style*="background: rgb(228, 246, 243)"],[style*="background-color:#E4F6F3" i],[style*="background-color: #E4F6F3" i],[style*="background-color: rgb(228, 246, 243)"]{background:rgba(181,244,108,.08) !important;}
[style*="background:#E6F6FC" i],[style*="background: #E6F6FC" i],[style*="background: rgb(230, 246, 252)"],[style*="background-color:#E6F6FC" i],[style*="background-color: #E6F6FC" i],[style*="background-color: rgb(230, 246, 252)"]{background:rgba(61,143,230,.10) !important;}
[style*="background:#F6F7F9" i],[style*="background: #F6F7F9" i],[style*="background: rgb(246, 247, 249)"],[style*="background-color:#F6F7F9" i],[style*="background-color: #F6F7F9" i],[style*="background-color: rgb(246, 247, 249)"]{background:rgba(255,255,255,.04) !important;}

/* ════════════════════════ page-specific (orbita-pages.css) ════════════════════════ */

/* auth pages (login, register, forgot/reset password, verify e-mail): the brand
   side panel was a teal→navy radial gradient. Now: deep space with the glow. */
[style*="radial-gradient(120% 90% at"]{
  background:
    radial-gradient(520px 380px at 0% 105%, rgba(120,240,110,.40), transparent 70%),
    radial-gradient(560px 420px at 100% 100%, rgba(48,128,235,.45), transparent 70%),
    radial-gradient(700px 420px at 50% -10%, rgba(46,96,128,.35), transparent 65%),
    #05090e !important;
  border-right:1px solid var(--o-line)}
[style*="radial-gradient(circle, rgba(113, 211, 220"],[style*="radial-gradient(circle, rgba(113,211,220"],
[style*="radial-gradient(circle,rgba(20,168,158"],[style*="radial-gradient(circle, rgba(20, 168, 158"]{
  background:radial-gradient(circle, rgba(181,244,108,.16), transparent 70%) !important}

/* teal brand gradients used for banners, avatars, badges */
[style*="linear-gradient(120deg,#0B2138"],[style*="linear-gradient(120deg, rgb(11, 33, 56)"]{
  background:radial-gradient(600px 300px at 100% 120%, rgba(48,128,235,.35), transparent 70%),radial-gradient(600px 300px at 0% 120%, rgba(120,240,110,.30), transparent 70%),#081016 !important;
  border:1px solid var(--o-line)}
[style*="linear-gradient(135deg,#14A89E"],[style*="linear-gradient(135deg, rgb(20, 168, 158)"],
[style*="linear-gradient(135deg,#11567F"],[style*="linear-gradient(135deg, rgb(17, 86, 127)"]{
  background:linear-gradient(135deg,var(--o-lime),var(--o-teal) 60%,var(--o-blue)) !important;color:var(--o-lime-ink) !important}

/* the shared "glass" surfaces (sticky bars, popovers) */
[style*="background:var(--glass)"],[style*="background: var(--glass)"]{background:rgba(10,16,23,.78) !important;backdrop-filter:blur(14px)}
html{--glass:rgba(10,16,23,.78) !important;--row:rgba(255,255,255,.035) !important;--pricebg:rgba(181,244,108,.10) !important}

/* small radius → the theme's softer radius on buttons that are not .btn */
button[style*="border-radius:8px"],button[style*="border-radius: 8px"]{border-radius:999px !important}

/* account (dashboard): sidebar + the credit card */
html{--side-bg:#070c11 !important;--side-text:#c6d0da !important;--side-muted:#7f8d9b !important;--side-active:rgba(181,244,108,.08) !important;--side-border:rgba(255,255,255,.08) !important}
aside:not([style]){background:#070c11 !important;border-right:1px solid var(--o-line) !important}   /* the account sidebar only — the catalogue <aside> has inline styles */
.bb-wallet{background:radial-gradient(420px 240px at 100% 0%, rgba(61,143,230,.38), transparent 70%),linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),#0b131b !important;
  border:1px solid rgba(61,143,230,.35) !important;color:var(--text) !important}
.bb-badge{background:var(--o-lime) !important;color:var(--o-lime-ink) !important;border-radius:999px !important}
.bb-card,.bb-grid > *{border-radius:18px !important}

/* ── mobile layout ────────────────────────────────────────────────────────────
   The pages ship mobile rules that match "grid-template-columns:1fr 360px" — but
   the Design-Canvas runtime rewrites inline styles as "grid-template-columns: 1fr
   360px" (with spaces), so on the live site those rules never fire and the
   catalogue is 1,000px wide on a phone. Same intent, both spellings. */
@media (max-width:860px){
  [style*="grid-template-columns: 1fr 360px"],[style*="grid-template-columns: 1fr 380px"],
  [style*="grid-template-columns: 1fr 340px"],[style*="grid-template-columns: 1fr 320px"],
  [style*="grid-template-columns: minmax(0px, 460px) 1fr"],[style*="grid-template-columns: 1.3fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"],[style*="grid-template-columns: 236px 1fr"],
  [style*="grid-template-columns: 198px 1fr"],[style*="grid-template-columns: 170px 1fr"],
  [style*="grid-template-columns:236px 1fr"],[style*="grid-template-columns:198px 1fr"],
  [style*="grid-template-columns:170px 1fr"],[style*="grid-template-columns:1fr 320px"]{grid-template-columns:1fr !important}
}
@media (max-width:620px){
  [style*="grid-template-columns: 1fr 1fr"],[style*="grid-template-columns: repeat(3"],[style*="grid-template-columns: 1fr 150px 140px 40px"],
  [style*="grid-template-columns: 1.6fr 1fr 1fr 1.4fr"],[style*="grid-template-columns: 1.3fr 1fr 0.9fr 0.9fr 1fr"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns: repeat(4"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  [style*="grid-template-columns: repeat(auto-fill, minmax(2"],[style*="grid-template-columns: repeat(auto-fill, minmax(1"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important}
}
@media (max-width:760px){
  header[style*="sticky"] nav{display:none !important}
  header[style*="sticky"] button > span:nth-child(2){display:none !important}
  header[style*="sticky"] > div > div[style*="gap: 6px"],header[style*="sticky"] > div > div[style*="gap:6px"]{gap:4px !important}
  header[style*="sticky"] a[aria-label]{width:36px !important;height:36px !important}
  header[style*="sticky"] a[aria-label="Известия за наличност"],header[style*="sticky"] button > svg{display:none !important}
  div[style*="background:#0C5E58"],div[style*="background: rgb(12, 94, 88)"],div[style*="background:#070c11"]{display:none !important}
  table{display:block !important;overflow-x:auto !important;max-width:100% !important;-webkit-overflow-scrolling:touch}
}

/* the theme is fixed → no light/dark toggle anywhere */
[data-theme-toggle]{display:none !important}
/* gradient TEXT (the big "404"): keep it text — the generic brand-gradient rule above
   would otherwise paint a solid block behind it */
[style*="linear-gradient(135deg"][style*="text-fill-color"]{
  background:linear-gradient(135deg,var(--o-lime),var(--o-teal) 55%,var(--o-blue)) !important;
  -webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important;color:transparent !important;font-weight:300 !important}
/* square-ish CTAs → pills, like the rest of the theme */
a[style*="border-radius:10px"][style*="height:4"],a[style*="border-radius: 10px"][style*="height: 4"],
button[style*="border-radius:10px"][style*="height:4"],button[style*="border-radius: 10px"][style*="height: 4"]{border-radius:999px !important}

/* order lines (product | qty | unit | total): on a phone keep ONE row per line with
   narrow number columns instead of stacking every cell */
@media (max-width:620px){
  [style*="grid-template-columns: 1fr 70px 130px 130px"],[style*="grid-template-columns:1fr 70px 130px 130px"]{
    grid-template-columns:minmax(0,1fr) 34px 62px 68px !important;gap:6px !important;font-size:12.5px !important}
}

/* sticky side panels (catalogue categories, cart / checkout summary) are only sticky
   while they sit BESIDE the content. Once the layout stacks (≤860px) they sit above
   it, and staying sticky made the products scroll over and under them. */
@media (max-width:860px){
  main [style*="sticky"],aside[style*="sticky"],div[style*="position:sticky;top:88px"],div[style*="position: sticky; top: 88px"]{position:static !important;top:auto !important}
}

/* ════════════ the Europe logistics map replaces the planet (orbita-map.css) ════════════
   Included by build.py only when theme/europe.* exists. The map is its own layer
   (.hero::before) anchored to the bottom of the hero at the picture's real aspect
   ratio, with a mask that fades its top edge into the page — so there is never a
   visible seam, at any screen width. */
.o-planet{display:none !important}
.hero{background:
    radial-gradient(1100px 520px at 50% -8%, rgba(46,96,128,.30), transparent 62%),
    #05090e !important}
.hero::before{content:"";display:block;position:absolute;left:50%;bottom:0;top:auto;right:auto;z-index:-1;opacity:1;
  width:max(100%, 1760px);aspect-ratio:1916/821;transform:translateX(-50%);
  background:var(--o-europe) center / 100% 100% no-repeat;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 16%, #000 30%, #000 82%, rgba(0,0,0,.55) 100%);
          mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 16%, #000 30%, #000 82%, rgba(0,0,0,.55) 100%)}
.hero .stat-chip{text-shadow:0 2px 14px rgba(0,0,0,.9)}
.hero .wrap > div:last-child{bottom:40px}
.hero #hero-out .btn-primary svg,.hero #hero-out .btn-primary svg *{stroke:#e9eff5 !important;color:#e9eff5 !important}

/* final CTA: the map as a band along the bottom of the panel */
.o-final::after{display:block;content:"";position:absolute;left:50%;bottom:0;width:max(100%, 1200px);height:auto;aspect-ratio:1916/821;margin:0;
  transform:translateX(-50%);border-radius:0;box-shadow:none;z-index:-1;
  background:var(--o-europe) center / 100% 100% no-repeat;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, transparent 52%, rgba(0,0,0,.75) 76%, #000 100%);
          mask-image:linear-gradient(180deg, transparent 0%, transparent 52%, rgba(0,0,0,.75) 76%, #000 100%)}
.o-final{background:#081016 !important;padding-bottom:230px !important}

/* auth pages: the map fills the brand panel; the copy at the bottom stays readable */
[style*="radial-gradient(120% 90% at"]{
  background:
    linear-gradient(180deg, rgba(5,9,14,.85) 0%, rgba(5,9,14,.15) 26%, rgba(5,9,14,.25) 44%, rgba(5,9,14,.82) 64%, rgba(5,9,14,.96) 100%),
    var(--o-europe) 62% 30% / cover no-repeat,
    #05090e !important}

@media (max-width:760px){
  .hero::before{width:max(100%, 1100px)}
  header[style*="sticky"] .btn{white-space:nowrap;padding:0 14px !important;font-size:13px !important;height:36px !important}
}

/* ════════════ catalogue banner: the cinematic warehouse picture (orbita-warehouse.css) ════════════
   Included by build.py only when theme/warehouse.* exists. The banner box keeps
   every uploaded banner's text and CTA; its picture becomes the warehouse, so the
   catalogue reads differently from the home hero (the Europe map). */
main > div[style*="height: 220px"][style*="overflow: hidden"],main > div[style*="height:220px"][style*="overflow:hidden"]{
  height:270px !important;border:1px solid var(--o-line);box-shadow:0 30px 60px -30px rgba(0,0,0,.8) !important;
  background:url("warehouse.jpg") 78% 55% / cover no-repeat,#05090e !important}
main > div[style*="height: 220px"] img,main > div[style*="height:220px"] img{display:none !important}
main > div[style*="height: 220px"] [style*="rgba(8, 16, 28"],main > div[style*="height:220px"] [style*="rgba(8,16,28"]{
  background:linear-gradient(90deg,rgba(5,9,14,.92) 0%,rgba(5,9,14,.7) 34%,rgba(5,9,14,.1) 62%,rgba(5,9,14,0) 100%) !important}
main > div[style*="height: 220px"] [style*="rgba(11, 30, 56"],main > div[style*="height:220px"] [style*="rgba(11,30,56"]{background:transparent !important}
main > div[style*="height: 220px"] h2{font-weight:300 !important;font-size:30px !important}
main > div[style*="height: 220px"] [style*="max-width: 560px"],main > div[style*="height:220px"] [style*="max-width:560px"]{padding-left:76px !important}
@media (max-width:760px){
  main > div[style*="height: 220px"][style*="overflow: hidden"],main > div[style*="height:220px"][style*="overflow:hidden"]{height:300px !important;background-position:70% 50% !important}
  main > div[style*="height: 220px"] [style*="rgba(8, 16, 28"]{background:linear-gradient(180deg,rgba(5,9,14,.85) 0%,rgba(5,9,14,.55) 55%,rgba(5,9,14,.2) 100%) !important}
  main > div[style*="height: 220px"] h2{font-size:22px !important}
  main > div[style*="height: 220px"] p{font-size:13px !important;margin-bottom:14px !important}
  main > div[style*="height: 220px"] [style*="max-width: 560px"]{padding:22px 56px !important}
}

/* ════════════ launch polish, 2026-10-07 ════════════ */

/* hero + closing CTA: the sub-line was #a3b0bd over the lit map — readable on a
   bright screen, lost on a phone outdoors. Near-white with a soft dark halo. */
.hero p{color:#e3eaf1 !important;text-shadow:0 1px 2px rgba(0,0,0,.55),0 2px 18px rgba(0,0,0,.75)}
.o-final p{color:#cfd9e2 !important;text-shadow:0 1px 12px rgba(0,0,0,.7)}

/* register: the "back to sign-in" link sat flush on the logo and its arrow was
   painted in the page background colour (invisible). Same pill as on login. */
[style*="radial-gradient(120% 90% at"] > a[href="login"]{align-self:flex-start;margin-bottom:28px;padding:7px 13px;
  border:1px solid rgba(255,255,255,.28);border-radius:999px;font-size:13px !important;color:rgba(255,255,255,.92) !important}
[style*="radial-gradient(120% 90% at"] > a[href="login"] svg path{stroke:currentColor !important}

/* product card: "Цена краен клиент" on its own line, crossed-out RRP + discount under it
   (side by side it broke into "Цена краен / клиент" and "20,00 / €" at every width) */
div[style*="min-height: 18px"],div[style*="min-height:18px"]{flex-wrap:wrap;gap:2px 6px !important}
div[style*="min-height: 18px"] > span:first-child,div[style*="min-height:18px"] > span:first-child{flex-basis:100%}
div[style*="min-height: 18px"] > span,div[style*="min-height:18px"] > span{white-space:nowrap}

/* catalogue on a phone */
@media (max-width:860px){
  /* the category tree stacks above the products; with every vertical listed it
     was a full screen of scrolling before the first product. Cap it, scroll inside. */
  aside[style*="sticky"] > div{max-height:min(52vh,380px);overflow-y:auto;-webkit-overflow-scrolling:touch}
}
@media (max-width:620px){
  /* the four "270 000+ / 8 500+ / до 72 ч / EUR" tiles: one compact strip, not 190px */
  main [style*="grid-template-columns: repeat(4"] > div,main [style*="grid-template-columns:repeat(4"] > div{padding:10px 12px !important}
  main [style*="grid-template-columns: repeat(4"] > div > div:first-child,main [style*="grid-template-columns:repeat(4"] > div > div:first-child{display:none !important}
  main [style*="grid-template-columns: repeat(4"] > div > div:nth-child(2),main [style*="grid-template-columns:repeat(4"] > div > div:nth-child(2){font-size:17px !important}
  /* product cards, two per row: name capped at three lines, end-customer price may wrap,
     tighter quantity stepper so "Добави" keeps its width */
  a[style*="min-height: 34px"],a[style*="min-height:34px"]{display:-webkit-box !important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:51px !important}
  /* quantity + "Добави": the card is ~138px inside — side by side the button got
     squeezed and the "+" clipped. Stack them: full-width stepper, full-width button. */
  div:has(> div > button[aria-label="По-малко"]){flex-wrap:wrap !important;gap:6px !important}
  div:has(> button[aria-label="По-малко"]){flex:1 1 100% !important}
  div:has(> button[aria-label="По-малко"]) > button{width:40px !important;flex:0 0 40px}
  input[aria-label="Количество"]{flex:1 1 auto;width:auto !important;min-width:0}
  div:has(> div > button[aria-label="По-малко"]) > button{flex:1 1 100% !important}
  button[aria-label="Любими"]{width:32px !important;height:32px !important}
}

/* ════════════ hero / closing CTA buttons, 2026-10-07 ════════════
   "Вход за поръчка" was a 3%-white outline over the lit map — it all but
   disappeared. Now dark glass with a brighter rim. Both buttons lift and glow
   on hover; the outline one lights up and its arrow nudges right, the lime one
   gets a light sweep. Same pair at the bottom of the page. */
.hero #hero-out .btn,.hero #hero-in .btn,.o-final .btn{position:relative;overflow:hidden;isolation:isolate;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,background-color .22s ease,border-color .22s ease,color .22s ease !important}
.hero #hero-out .btn-primary,.o-final .btn-ghost{
  background:rgba(5,9,14,.62) !important;color:#fff !important;border:1px solid rgba(255,255,255,.55) !important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 6px 22px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08) !important}
.hero #hero-out .btn-primary:hover,.o-final .btn-ghost:hover{
  transform:translateY(-2px) !important;background:rgba(255,255,255,.14) !important;border-color:#fff !important;
  box-shadow:0 0 0 3px rgba(255,255,255,.12),0 12px 32px rgba(0,0,0,.6),0 0 26px rgba(181,244,108,.18) !important}
.hero #hero-out .btn-primary svg{transition:transform .22s ease}
.hero #hero-out .btn-primary:hover svg{transform:translateX(4px)}
.hero #hero-out .btn-ghost:hover,.hero #hero-in .btn-primary:hover,.o-final .btn-primary:hover{
  transform:translateY(-2px) !important;filter:brightness(1.06);
  box-shadow:0 0 0 1px rgba(181,244,108,.8),0 0 0 6px rgba(181,244,108,.14),0 14px 44px rgba(181,244,108,.42) !important}
.hero #hero-out .btn-ghost::after,.hero #hero-in .btn-primary::after,.o-final .btn-primary::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);opacity:0}
.hero #hero-out .btn-ghost:hover::after,.hero #hero-in .btn-primary:hover::after,.o-final .btn-primary:hover::after{
  animation:o-sweep .75s ease-out}
@keyframes o-sweep{0%{left:-60%;opacity:1}100%{left:120%;opacity:0}}
.hero .btn:active,.o-final .btn:active{transform:translateY(0) scale(.98) !important}
.hero .btn:focus-visible,.o-final .btn:focus-visible{outline:2px solid var(--o-lime);outline-offset:3px}

/* in-page navigation ("Как работи", "Контакти") glides instead of jumping,
   and stops below the floating header pill */
html{scroll-behavior:smooth}
section[id],footer[id]{scroll-margin-top:84px}

/* back to top: appears once you are a screen and a half down */
.o-top{position:fixed;right:22px;bottom:22px;z-index:60;width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:#0b1a06;
  background:var(--o-lime);border:0;box-shadow:0 0 0 1px rgba(181,244,108,.55),0 10px 30px rgba(0,0,0,.55),0 0 24px rgba(181,244,108,.25);
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
  transition:opacity .25s ease,transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .2s ease}
.o-top.is-on{opacity:1;transform:none;pointer-events:auto}
.o-top:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(181,244,108,.85),0 0 0 6px rgba(181,244,108,.14),0 14px 40px rgba(181,244,108,.4)}
.o-top:focus-visible{outline:2px solid #fff;outline-offset:3px}
.o-top svg{transition:transform .2s ease}
.o-top:hover svg{transform:translateY(-2px)}
@media (max-width:620px){.o-top{right:14px;bottom:14px;width:44px;height:44px}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero .btn,.o-final .btn,.o-top,.o-top svg,.hero #hero-out .btn-primary svg{transition:none !important;animation:none !important}
  .hero .btn::after,.o-final .btn::after{display:none}
}

/* ════════════ page-to-page without the flash, 2026-10-07 ════════════
   Every click between storefront pages is a full page load, so the old page
   vanished and the new one was painted from scratch — a blink of half-drawn
   content each time. Cross-document View Transitions (Chrome/Edge 126+,
   Safari 18.2+; other browsers just navigate as before) crossfade instead,
   and the parts that exist on both pages are pinned: the floating header pill
   and the account sidebar stay put while only the content changes. */
@view-transition { navigation: auto; }
header[style*="sticky"] { view-transition-name: dl-header; }
#app > aside { view-transition-name: dl-account-side; }
::view-transition-group(root) { animation-duration: .18s; }
::view-transition-group(dl-header), ::view-transition-group(dl-account-side) { animation-duration: 0s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ════════════ the Europe map, sharp at any size (2026-10-07) ════════════
   europe.jpg was the generator's 1916x821 original, stretched to ~2500 px on a
   desktop: visible pixels. There is no larger original, so it was upscaled 4x
   with Real-ESRGAN (x4plus) to 7664x3284 and saved as three WebP sizes; each
   screen loads only the one it needs. europe.jpg stays in the bundle. */
:root{--o-europe:url("europe-3840.webp")}
@media (max-width:1100px){:root{--o-europe:url("europe-2560.webp")}}
@media (max-width:700px) and (max-resolution:2dppx){:root{--o-europe:url("europe-1600.webp")}}

/* ════════════ closing CTA: no card, the map dissolves into the page (2026-10-07) ════════════
   Operator: the box (1px frame, 24px corners, its own #081016 fill) cut the map
   off in a hard rectangle. Now the section has no edge at all: transparent, no
   border, and the map fades out on every side through one soft elliptical mask,
   so it melts into the page background (#05090e). The map is drawn wider than
   the text column; the section clips it so no screen gets a sideways scroll. */
section:has(> .wrap > .o-final){overflow:hidden}
.o-final{background:transparent !important;border:0 !important;border-radius:0 !important;overflow:visible !important}
.o-final::after{width:max(118%, 1500px) !important;
  /* two fades that INTERSECT: the ellipse softens the sides, the vertical one
     makes the bottom edge melt too (alone, the ellipse left a hard bottom line) */
  -webkit-mask-image:radial-gradient(ellipse 50% 62% at 50% 72%, #000 34%, rgba(0,0,0,.55) 62%, transparent 100%),
                     linear-gradient(180deg, transparent 0%, transparent 38%, #000 60%, #000 74%, transparent 100%) !important;
  -webkit-mask-composite:source-in !important;
          mask-image:radial-gradient(ellipse 50% 62% at 50% 72%, #000 34%, rgba(0,0,0,.55) 62%, transparent 100%),
                     linear-gradient(180deg, transparent 0%, transparent 38%, #000 60%, #000 74%, transparent 100%) !important;
          mask-composite:intersect !important}
@media (max-width:760px){ .o-final::after{width:max(150%, 1100px) !important} }

/* ════════════ catalogue banner without the frame (2026-10-07) ════════════
   Operator: like the closing CTA on the home page — no 1px frame, no corners,
   no drop shadow. The warehouse photo moves to ::before and fades out at the
   top, bottom and right (and into the dark text side on the left) through two
   intersecting masks, so it melts into the page instead of sitting in a box. */
main > div[style*="height: 220px"][style*="overflow: hidden"],main > div[style*="height:220px"][style*="overflow:hidden"]{
  border:0 !important;border-radius:0 !important;box-shadow:none !important;background:transparent !important;isolation:isolate}
main > div[style*="height: 220px"][style*="overflow: hidden"]::before,main > div[style*="height:220px"][style*="overflow:hidden"]::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("warehouse.jpg") 78% 55% / cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent 0%,#000 38%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%);
          mask-composite:intersect}
@media (max-width:760px){
  main > div[style*="height: 220px"][style*="overflow: hidden"]::before,main > div[style*="height:220px"][style*="overflow:hidden"]::before{background-position:70% 50%}
}

/* ════════════ "Защо Dilon B2B?" on a phone: 2 x 2, not 1 x 4 (2026-10-07) ════════════
   Operator: the four value cards stacked one under another made a long scroll.
   Two columns with hairline dividers (one down the middle, one between the
   rows), tighter padding and a smaller icon so the text fits half the width. */
@media (max-width:760px){
  .grid-props{grid-template-columns:1fr 1fr !important}
  .grid-props > .card{border-top:0 !important;border-left:1px solid var(--o-line) !important;padding:22px 16px 24px !important}
  .grid-props > .card:nth-child(odd){border-left:0 !important}
  .grid-props > .card:nth-child(n+3){border-top:1px solid var(--o-line) !important}
  .grid-props .prop-ic{margin-bottom:16px !important;width:44px !important;height:44px !important;border-radius:12px !important}
  .grid-props .prop-ic::before{border-radius:12px !important}
  .grid-props .prop-ic svg{width:20px;height:20px}
  .grid-props h3{font-size:14px !important;margin:0 0 6px !important}
  .grid-props p{font-size:12.5px !important;line-height:1.5 !important;margin:0 !important}
}

/* ════════════ hero numbers BELOW the map, on the black (2026-10-07) ════════════
   Operator: "270 000+ / 8 500+ / EUR / 72ч" sat on the map itself; they belong
   under it, on the page's black. The hero gets a black band at the bottom
   (--o-stats-band), the map is lifted to end above it and fades out at its
   bottom edge (no seam), and the numbers sit inside the band. Phones get a
   taller band, because there the numbers wrap to 2 x 2. */
:root{--o-stats-band:128px}
@media (max-width:760px){:root{--o-stats-band:150px}}
.hero{min-height:calc(900px + var(--o-stats-band)) !important}
.hero > .wrap{padding-bottom:calc(340px + var(--o-stats-band)) !important}
.hero::before{bottom:var(--o-stats-band) !important;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 16%, #000 30%, #000 74%, transparent 100%) !important;
          mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 16%, #000 30%, #000 74%, transparent 100%) !important}
.hero .wrap > div:last-child{bottom:calc((var(--o-stats-band) - 44px) / 2) !important}
.hero .stat-chip{text-shadow:none !important}
@media (max-width:760px){
  .hero{min-height:calc(820px + var(--o-stats-band)) !important}
  .hero > .wrap{padding-bottom:calc(300px + var(--o-stats-band)) !important}
  .hero .wrap > div:last-child{bottom:24px !important}
}
@media (max-width:760px){
  /* always a clean 2 x 2 under the map (a flex wrap fell into 1-2-1 at 360 px) */
  .hero .wrap > div:last-child{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center;gap:14px 6px !important}
  .hero .stat-chip{padding:0 4px !important;gap:6px !important;white-space:nowrap}
}
@media (max-width:380px){
  .hero .stat-chip > span:first-child{font-size:19px !important}
  .hero .stat-chip > span:last-child{font-size:12px !important}
}

/* ════════════ top bar without the frame (2026-10-07, approved on /preview/) ════════════
   No border, no own fill, no blur, no shadow: logo, menu and buttons sit on the page;
   the dark fade behind the header row (::before) keeps them readable while scrolling.
   Signed in, nothing wraps onto two lines and "Изход" stays inside the bar. */
header[style*="sticky"] > div{border:0 !important;background:transparent !important;box-shadow:none !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important}
/* signed in: nothing wraps onto two lines, "Изход" stays inside the bar */
header[style*="sticky"] nav a,header[style*="sticky"] .btn,header[style*="sticky"] #hdr-logout,
header[style*="sticky"] #acct-name{white-space:nowrap !important}
@media (max-width:1700px){ header[style*="sticky"] nav a{padding:11px 11px !important} }
header[style*="sticky"] > div{max-width:1280px !important}

/* ════════════ the top menu sits in the SAME place on every page (2026-10-07) ════════════
   It was centred in whatever space the right-hand group left over, and that group
   differs by page (home: language, account, "Към каталога", "Изход"; catalogue:
   bell, wishlist, cart, account) — so the links jumped 26 px on every navigation.
   Now the menu starts at a fixed distance after the logo badge and the right-hand
   group is pushed to the far end, so the links never move. */
header[style*="sticky"] nav,header[style*="sticky"] .o-nav{flex:0 0 auto !important;justify-content:flex-start !important;margin:0 0 0 22px !important}
header[style*="sticky"] nav + *,header[style*="sticky"] .o-nav + *{margin-left:auto !important}
/* the logo + "B2B ПЛАТФОРМА" block is built from different spans on home and on
   the inner pages and came out 1 px narrower on home: a fixed width pins the menu
   to the same pixel everywhere (the menu is hidden under 980 px anyway) */
@media (min-width:981px){
  header[style*="sticky"] > div > a:first-child{flex:0 0 252px !important;width:252px !important;overflow:hidden}
}
/* the right-hand group is flush right on every page and width. It starts with the
   language switcher: right after the menu on home, after an empty hidden spacer on
   the inner pages (so "the element after nav" was not the group there). */
header[style*="sticky"] nav + *,header[style*="sticky"] .o-nav + *{margin-left:0 !important}
header[style*="sticky"] nav + div:not(:empty),header[style*="sticky"] nav + div:empty + div{margin-left:auto !important}

/* Меню за телефон. `.o-nav` се крие под 980 px (ред 273) и дотук нищо не я
   заместваше — петте връзки и „Вход“ бяха недостижими от телефон.
   Плътен цвят, а не `var(--surface)`: панелът виси над съдържанието и всяка
   прозрачност прави текста под него четим през буквите. */
#m-nav{position:fixed;left:0;right:0;top:82px;z-index:1000;
  display:none;flex-direction:column;background:#0b131b;
  border-top:1px solid rgba(255,255,255,.09);
  box-shadow:0 18px 40px rgba(0,0,0,.5);padding:6px 0;pointer-events:auto}
#m-nav a{display:block;padding:14px 24px;text-decoration:none;color:#eef3f7;
  font-size:15.5px;font-weight:500}
#m-nav a:active,#m-nav a:hover{background:rgba(255,255,255,.06)}
#m-nav a.m-nav-cta{border-top:1px solid rgba(255,255,255,.09);margin-top:6px;
  color:#c9f79a;font-weight:600}

@media (max-width:980px){
  /* `display:flex`, не `block` — бутонът центрира иконката си. */
  #m-burger{display:flex !important;color:#eef3f7}
  #m-nav:not([hidden]){display:flex}
}

/* Иконката се свиваше до нула: бутонът е flex контейнер, а `width`/`height`
   като атрибути на SVG не спират свиването. */
#m-burger svg{flex:none;width:20px;height:20px}

/* Призивът се стяга, за да се побере до новия бутон. Лентата преливаше с 26 px
   при екран 390 px и текстът се режеше вдясно. */
@media (max-width:520px){
  header[style*="sticky"] > div{gap:8px !important;padding:0 8px 0 14px !important}
  header[style*="sticky"] .btn,
  header[style*="sticky"] > div a[class*="btn"]{padding:0 14px !important;font-size:13.5px !important}
}

/* ⚠ Побеждава `header button > svg{display:none !important}` (ред 382), което
   крие иконките на бутоните в шапката под малък екран. Без това бутонът е
   празна кутийка — точно както изглежда и превключвателят за тема. */
#m-burger > svg{display:block !important;flex:none;width:20px;height:20px}

@media (max-width:520px){
  /* Мерено при 390 px: лентата побира 370, съдържанието иска 392. */
  header[style*="sticky"] > div > div:has(> #lang-bg){padding:1px !important}
  header[style*="sticky"] #lang-bg,
  header[style*="sticky"] #lang-en{padding:5px 6px !important;font-size:11px !important}
  header[style*="sticky"] .btn,
  header[style*="sticky"] > div a[class*="btn"]{padding:0 11px !important;font-size:13px !important}
}

/* Призивът живее в лентата до 400 px и в менюто под тях — никога и на двете
   места, за да няма два бутона с едно и също значение. */
#m-nav a.m-nav-join{display:none}
@media (max-width:400px){
  header[style*="sticky"] #auth-out a[href="register"]{display:none !important}
  #m-nav a.m-nav-join{display:block;color:#c9f79a;font-weight:700}
}