/* Шаблон „жив магазин“ — mobile-first. Анимират се САМО transform и opacity (⌂ corpus/google_20261028T2341/webdev_compositor_only.txt:12-14, :21);
   prefers-reduced-motion (⌂ mozilla_20261028T1929/mdn_prefers_reduced_motion.txt:16-18, :30).
   СТЪКЛОТО (owner 08.11: „това стъкло, на всякъде“): тялото е почти прозрачно; контурът, светлините и меките отражения идват от печеното покритие --rim (glass.js ← glass_core.js; статично, без работа при скрол);
   плаващите повърхности (data-lens: лента, AI поле, чипове, лист) в Chromium огъват съдържанието при ръба (SVG backdrop-filter, слага се от glass.js), другаде — лек backdrop-filter с и без -webkit-
   (⌂ mozilla_20261029T0014/bcd_css_backdrop_filter.txt:34-42: Safari <18 иска префикса); ефектът се вижда само ако елементът е прозрачен или полупрозрачен (⌂ mozilla_20261028T2341/mdn_backdrop_filter.txt:14)
   и ако предшественик с opacity<1 / filter / mask / clip-path / will-change не го затваря (:107-123). Фонът и размиването са РАБОТНИ стойности — не са мерени на телефон; слабите телефони получават html.glass-lite (tier.js). */
:root{
  --matte-base:#0a0a0c; --matte-top:rgba(255,236,200,.07);
  --bg:#07080c; --ink:#f4f1ea; --mute:rgba(244,241,234,.78); --faint:rgba(244,241,234,.58); --gold:#e9c46a; --line:rgba(255,255,255,.13);
  --g-fill:linear-gradient(180deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.012) 42%,rgba(0,0,0,.14) 100%),rgba(9,11,15,.56);
  --g-veil:linear-gradient(180deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.01) 42%,rgba(0,0,0,.12) 100%),rgba(9,11,15,.52);
  --g-veil-lg:linear-gradient(180deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.01) 42%,rgba(0,0,0,.12) 100%),rgba(9,11,15,.74);
  --g-gold:linear-gradient(180deg,rgba(247,218,132,.96),rgba(224,176,76,.92));
  --g-shadow:0 14px 30px -18px rgba(0,0,0,.85);
  --g-hair:inset 0 0 0 1px rgba(255,255,255,.13);
  --g-blur:blur(12px) saturate(1.15);
  --r:22px; --ease:cubic-bezier(.22,.8,.2,1); --kb:0px; --vvy:0px;
  /* фонът „прескачаше“ на телефона (owner 10.11), мерено на S23U: височината на fixed слоя с inset:0 следва адресната лента (790,6 → 846,6 px) и `cover`
     мащабира картината наново ⇒ височина 100lvh (стабилна — ⌂ corpus/google_20261110T0102/web.dev_blog_viewport-units.md.txt.txt:60-63); при клавиатурата Chrome
     свива само видимия изглед и го измества надолу (offsetTop 363 px; fixed слоевете остават в layout viewport — ⌂ …developer.chrome.com_blog_viewport-resize-behavior.txt:217, :267-280)
     ⇒ фонът и видеото се местят с --vvy = visualViewport.offsetTop (viewport.js). Owner 10.11 (v59): „фонът мърда при скрол“; мерено на екрана на S23U: с котва горе
     фонът се мести заедно с адресната лента с 56 CSS px, с котва долу — 0 px ⇒ котва долу; html.bg-top и html.bg-pin — виж под body::before и viewport.js */
  --serif:ui-serif,"Iowan Old Style","Palatino Linotype","Noto Serif",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--matte-base);color:var(--ink)}
body{font:400 16px/1.45 var(--sans);min-height:100vh;background:transparent;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
body.lock{overflow:hidden}
button,input,textarea{font:inherit;color:inherit;border:0;background:none}
button{cursor:pointer}
a{color:inherit}
h1,h2,h3,h4{font-weight:500}

/* ФОН (owner 08.11: „СЛОЖИ ТАЗИ ЗА ФОН“ — тъмен текстуриран тапет от черен пясък, img/bg.webp; мастерът и произходът — HANDOFF, tools/build_bg.sh): тъмна основа --matte-base докато се зареди, отгоре мека светлина (--lamps) и тъмна стъпка долу; нищо не се движи, без зърно (тапетът си има) */
body::before{content:"";position:fixed;bottom:0;left:0;right:0;height:100vh;height:100lvh;transform:translate3d(0,var(--vvy,0px),0);transition:none;z-index:-2;pointer-events:none;background:var(--lamps,radial-gradient(125% 62% at 50% -6%,var(--matte-top) 0,rgba(255,236,200,0) 62%)),radial-gradient(110% 55% at 50% 112%,rgba(0,0,0,.5) 0,rgba(0,0,0,0) 72%),var(--matte-base) url("img/bg.webp") center top/cover no-repeat}
/* котвата на фона (viewport.js): по подразбиране ДОЛУ — лентата на браузъра отгоре мести горния ръб на изгледа (⌂ corpus/google_20261110T0102/web.dev_blog_viewport-units.md.txt.txt:43, :53-54);
   html.bg-top — лентата е ОТДОЛУ (доказано с две докосвания); html.bg-pin — докато се пише: закован в px (WebView свива изгледа с клавиатурата — ⌂ …developer.chrome.com_blog_viewport-resize-behavior.txt:270, :260-263) */
html.bg-top body::before{top:0;bottom:auto}
html.bg-pin body::before{top:var(--bgt);bottom:auto;height:var(--bgh)}
/* c76s (owner 12.11: „пиша на AI и правя скрол — насича, скрива се зад клавиатурата, прескача“): index.html — interactive-widget=resizes-content ⇒ клавиатурата
   свива layout viewport и fixed лентата е над нея от самия браузър (⌂ corpus/google_20261110T0102/developer.chrome.com_blog_viewport-resize-behavior.txt:217, :276;
   MDN meta viewport :322-325). Страничният ефект — свиват се и единиците vh (MDN :288; web.dev :98) ⇒ докато layout viewport е свит (html.bg-pin — viewport.js),
   височината от vh остава от преди клавиатурата: --bgh = 100lvh в px (на мобилен vh = големият изглед — web.dev :41-46); мерено в кадъра c76: #view 553,7 → 255,5 px
   (героят на началната страница — .sign: височина по ширината, min-height 0 — не зависи от vh) */
html.bg-pin #view{min-height:calc(var(--bgh) * .7)}

/* СТЪКЛЕН ДОМАКИН ([data-glass], glass.js): прозрачно тяло; до печенето на покритието — тънка линия (--g-hair), после контурът идва от --rim; плаващите (data-lens) имат лек воал за четим текст без размиване */
:where([data-glass]){position:relative}
[data-glass]{isolation:isolate;background:var(--g-fill);box-shadow:var(--g-hair),var(--g-shadow)}
[data-glass][data-gl]{box-shadow:var(--g-shadow)}
[data-glass]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;background:var(--rim) 0 0/100% 100% no-repeat}
[data-glass][data-lens]{background:var(--g-veil);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 10px rgba(0,0,0,.6)}
[data-glass="panel"][data-lens]{background:var(--g-veil-lg);-webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15)}
[data-glass="chip"][data-lens]{-webkit-backdrop-filter:blur(10px) saturate(1.15);backdrop-filter:blur(10px) saturate(1.15)}

.bar{position:fixed;left:max(12px,calc(50% - 280px));right:max(12px,calc(50% - 280px));top:calc(8px + env(safe-area-inset-top));z-index:50;display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 7px 0 18px;border-radius:28px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:600 16px/1 var(--serif);letter-spacing:.05em}
.brand span{white-space:nowrap;font-size:clamp(12px,3.7vw,16px);letter-spacing:clamp(.01em,.4vw,.05em)}   /* „Amazing Shop BG“ (owner 09.11) — един ред */
/* СТЪКЛЕНИТЕ БУКВИ (owner 11.11 вечер: „зрелищно, в истинско стъкло, професионално, да може да се чете — без снимка зад него, чист код“): светъл отблясък отгоре,
   тъмна линия на „хоризонта“ (≈ 55 %), светло долу — като полирано стъкло; тънък светъл ръб и меко златно сияние (filter — text-shadow би се видял през прозрачния текст)
   owner 11.11, 23:47: „Amazing Shop BG да изпъква на екрана“ ⇒ по-светла линия (#8e897f → #c4bdb0; най-тъмната точка — яркост ≥ 0,4, static_checks), по-ярък отблясък и ръб, светло сияние около буквите */
.brand span{font-weight:700;background:linear-gradient(180deg,#ffffff 0%,#ffffff 34%,#f1ece2 50%,#c4bdb0 58%,#f4efe6 72%,#ffffff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:.4px rgba(255,255,255,.7);filter:drop-shadow(0 1px 0 rgba(0,0,0,.8)) drop-shadow(0 0 4px rgba(255,255,255,.45)) drop-shadow(0 0 10px rgba(255,226,160,.4))}
.brand{min-width:0}
.hnav{flex:none}   /* бутоните никога не излизат извън лентата */
@media (max-width:340px){.bar{padding:0 5px 0 10px}.brand{gap:6px}.mark{width:24px;height:24px}.hnav{gap:2px}.brand span{font-size:11px;letter-spacing:0}}   /* 320 px: името и трите бутона се събират */
.mark{width:28px;height:28px;flex:none;border-radius:7px;display:inline-block;position:relative;background:#151517 url("img/brand/lion.webp") center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(233,196,106,.35)}   /* ЛОГОТО (owner 11.11 вечер: „замени квадратчето … лъвът с чантата да се вижда перфектно вътре“): снимката на owner, изрязана около чантата (site/src_img/lion_logo_master.jpg → img/brand/lion.webp 112×112) */
.hnav{display:flex;gap:6px}
.hic{position:relative;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;text-decoration:none}
.hic svg{width:21px;height:21px}
.hic b{position:absolute;right:-3px;top:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--gold);color:#17120a;font:700 11px/18px var(--sans);text-align:center;z-index:4}
.hic b[hidden]{display:none}
#view{padding:calc(76px + env(safe-area-inset-top)) 0 0;min-height:70vh}

.hero{position:relative;margin:0 14px;border-radius:28px;overflow:hidden;min-height:34svh;min-height:34vh}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero__in{position:relative;padding:34px 22px 26px;display:flex;flex-direction:column;justify-content:flex-end;min-height:inherit;background:linear-gradient(180deg,rgba(7,8,12,0) 0%,rgba(7,8,12,.30) 100%);text-shadow:0 1px 20px rgba(0,0,0,.55)}
.eyebrow{font:600 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#ffe3a8}
.hero h1{font:500 clamp(34px,10.5vw,50px)/1 var(--serif);letter-spacing:-.02em;margin:12px 0 10px}
.hero p:last-child{color:rgba(244,241,234,.92);max-width:30ch}
/* ТАБЕЛАТА (board.js): ЦЯЛАТА карта идва от записа, който продавачът сменя от Telegram — тема (светлина и акцент), снимка, надзаглавие, заглавие, ред, значка, бутон.
   Височината е ФИКСИРАНА — смяната на записа не измества страницата (⌂ corpus/google_20261028T2341/web.dev_articles_optimize-cls.md.txt.txt:215-219, :234).
   Без балони: фонът е светлина от темата, статична (owner 09.11 ~22:00). Снимката: cover — до ръбовете; contain — изрязан предмет горе (⌂ corpus/mozilla_20261028T2341/developer.mozilla.org_en-US_docs_Web_CSS_object-fit.txt:299-302);
   тя е най-голямото в началото ⇒ fetchpriority="high", без lazy (⌂ corpus/google_20261028T2341/webdev_optimize_lcp.txt:217-223). Текстът върху снимка стои на стъкло с непрозрачност .62 —
   бял ≥ 6,2:1 и акцентите ≥ 4,5:1 дори върху бял пиксел (WCAG 2.2 1.4.3 — ⌂ corpus/w3c_20261028T1929/wcag22.txt:420-428; тест B13 в test/test_board.js). */
.sign{height:clamp(300px,88vw,420px);min-height:0}
.sign .stheme{position:absolute;inset:0;background:radial-gradient(120% 90% at 88% 0%,var(--glow),transparent 62%),radial-gradient(90% 70% at 0% 100%,var(--glow2),transparent 70%)}
.sign .smedia{position:absolute;inset:0;width:100%;height:100%;display:block}
.sign .smedia.cover{object-fit:cover}
.sign .smedia.contain{object-fit:contain;object-position:50% 0;height:74%;top:3%;filter:drop-shadow(0 18px 22px rgba(0,0,0,.55))}
/* B4.6 — видеото на продавача: първият кадър отдолу (img.smedia — LCP), видеото отгоре се показва чак при „playing“ (.on — card_video.js); лицето — горе или в средата
   (object-position — ⌂ corpus/mozilla_20261028T2341/developer.mozilla.org_en-US_docs_Web_CSS_object-fit.txt:299-302); „история“ — цялото 9:16 вдясно, текстът до него */
.sign .smedia.vf-top,.sign .svid.vf-top{object-position:50% 0}
.sign .smedia.vf-center,.sign .svid.vf-center{object-position:50% 50%}
.sign .svid{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;opacity:0;transition:opacity .3s ease}
.sign .svid.on{opacity:1}
.sign.vl-story{--story-w:calc(clamp(300px,88vw,420px)*.5625)}
.sign.vl-story .smedia,.sign.vl-story .svid{left:auto;right:0;width:var(--story-w);height:100%}
.sign.vl-story .hero__in{padding-right:calc(var(--story-w) + 12px)}
.sign .svctl{position:absolute;right:12px;top:12px;z-index:5;display:flex;gap:8px}
.sign .svb{width:44px;height:44px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;color:#fff;background:rgba(9,11,15,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);cursor:pointer}
.sign .svb svg{width:22px;height:22px;fill:currentColor}
.sign .svb .i-on,.sign .svb .i-off{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sign .svb:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.sign .svb .i-pause,.sign[data-vs="playing"] .svb .i-play,.sign .svb .i-on,.sign[data-vsound="on"] .svb .i-off{display:none}
.sign[data-vs="playing"] .svb .i-pause,.sign[data-vsound="on"] .svb .i-on{display:inline}
.sign[data-vs="error"] .svctl{display:none}
.sign.has-video .seal{top:66px}
/* видео до ръбовете: текстът — само за четците на екрана (визуално скрит; моделът clip-path inset(50%) — ASSUMED, проверка: TalkBack чете заглавието) */
.sign .hero__in.vhide{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}   /* (0,3,0) — бие .sign .hero__in по-долу */
@media (prefers-reduced-motion:reduce){.sign .svid{transition:none}}
.sign .hero__in{height:100%;min-height:0;padding:16px;justify-content:flex-end;background:linear-gradient(180deg,rgba(7,8,12,0) 40%,rgba(7,8,12,.35) 100%)}
.sign .sbody{display:flex;flex-direction:column;gap:7px}
.sign.has-media .sbody{padding:12px 14px;border-radius:20px;background:rgba(9,11,15,.62);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);text-shadow:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.sign.has-media .sbody{background:rgba(9,11,15,.82)}}
@media (prefers-reduced-transparency:reduce){.sign.has-media .sbody{background:#12141c;-webkit-backdrop-filter:none;backdrop-filter:none}}
.sign .eyebrow{color:var(--acc)}
.sign h1{font:500 clamp(30px,8.6vw,44px)/1.02 var(--serif);letter-spacing:-.02em;margin:0;color:#f4f1ea}
.sign.has-media h1{font-size:clamp(24px,6.6vw,32px)}
.sign.has-media .sline{font-size:14px;line-height:1.35}
.sign .sline{color:rgba(244,241,234,.92);font-size:15px;line-height:1.4;max-width:36ch;margin:0}
.sign.al-c .sbody{align-items:center;text-align:center}
.sign .sfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:2px}
.sign .smeta{font:600 13px/1.3 var(--sans);color:var(--acc)}
.sign .scta{display:inline-block;width:auto;padding:10px 16px;font-size:13.5px;text-decoration:none;background:var(--acc);color:#17120a;margin-left:auto}
.sign .scta.live{background:linear-gradient(180deg,#d93a30,#b3261e);color:#fff}
.sign .sbadge{position:absolute;left:14px;top:14px;z-index:4;display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:99px;font:700 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-shadow:none}
.sign .onair{background:#c62828;color:#fff;box-shadow:0 6px 16px -6px rgba(198,40,40,.8)}
.sign .chip2{background:rgba(9,11,15,.72);color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
/* точката пулсира 3 пъти (3,6 s < 5 s — WCAG 2.2.2, ⌂ corpus/w3c_20261028T1929/wcag22.txt:786-788) и спира; само transform/opacity */
.sign .onair .dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:onair 1.2s ease-in-out 3}
@keyframes onair{50%{transform:scale(.55);opacity:.45}}
.sign .seal{position:absolute;right:14px;top:14px;z-index:4;display:grid;place-content:center;width:76px;height:76px;border-radius:50%;text-align:center;color:#2b1d05;text-shadow:none;background:radial-gradient(circle at 32% 28%,#fff5d2 0,#f2d27e 38%,#d9a845 70%,#a8771f 100%);box-shadow:0 12px 24px -10px rgba(0,0,0,.85),inset 0 0 0 2px rgba(255,248,220,.55),inset 0 0 0 6px rgba(150,104,28,.32);transform:rotate(-12deg)}
.sign .seal b{font:800 23px/1 var(--sans);letter-spacing:-.02em}
.sign .seal small{font:700 8.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.h2{font:500 28px/1 var(--serif);letter-spacing:-.01em;padding:30px 20px 14px;text-shadow:0 1px 18px rgba(0,0,0,.7)}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 14px}
.ctile{position:relative;display:block;text-decoration:none;border-radius:var(--r);overflow:hidden;transition:transform .3s var(--ease)}
.ctile:active{transform:scale(.975)}
.ctile .art{display:block;aspect-ratio:5/4}
.ctile .art.ph{aspect-ratio:1/1}
/* ИЗПЕЧЕНО СТЪКЛО на плочките (Blender Cycles на видео картата; слой светлина върху черно → screen; 9 части — работи за всеки размер): ъгъл 22 px = --r */
html[data-glass-skin="champagne"] .ctile::after,html[data-glass-skin="crystal"] .ctile::after{background:none;border:27px solid transparent;box-sizing:border-box;mix-blend-mode:screen}
html[data-glass-skin="champagne"] .ctile::after{border-image:url("img/glass/champagne.webp") 130 fill/27px stretch}
html[data-glass-skin="crystal"] .ctile::after{border-image:url("img/glass/crystal.webp") 130 fill/27px stretch}
.ctile .cname{display:block;padding:0 14px;font:600 16px/1.2 var(--sans)}
.ctile .ccount{display:block;padding:3px 14px 14px;color:var(--faint);font:500 12.5px/1 var(--sans)}
/* ЛОГОТО НА ЕКОНТ — ЦЯЛО, в стъклен панел под плочките (owner 09.11: „НЕ ГО ИСКАМ ТАКОВА МАЛКО, ИСКАМ ГО ЦЯЛОТО ОТДОЛУ ПОД КАРТИТЕ“; img/brand/econt.webp ← tools/build_brand_webp.sh, 727×384):
   декоративно — надписът под него казва „Еконт“ ⇒ alt="" (⌂ corpus/w3c_20261101T2023/www.w3.org_WAI_tutorials_images_decorative.txt:149-150, :182-188; логотип — wcag22.txt:442, :474); <img> заради loading="lazy" (53 KB под сгъвката — ⌂ developer.mozilla.org_…_img.txt:353-356);
   width/height в HTML + width:100%;height:auto ⇒ мястото е запазено преди зареждане (⌂ web.dev_articles_optimize-cls.md.txt.txt:108, :139-149, :166-171); картината стои под покритието на стъклото (::after, z-index:3) — „в стъклото“ */
.ship{margin:22px 14px 0;padding:20px 16px 14px;border-radius:var(--r)}   /* доставка: наши предимства (owner 10.11) */
.ship img{display:block;width:100%;max-width:400px;height:auto;margin:0 auto;filter:drop-shadow(0 10px 14px rgba(0,0,0,.55)) drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.ship__t{margin-top:8px;text-align:center;font:500 clamp(22px,6.4vw,28px)/1.15 var(--serif);letter-spacing:-.005em;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.ship__s{margin-top:8px;text-align:center;color:var(--ink);font:600 clamp(17px,4.9vw,20px)/1.3 var(--sans);text-shadow:0 1px 14px rgba(0,0,0,.6)}   /* owner 11.11 вечер: големият „Доставка с Еконт“ — махнат; под „експрес“ — „Доставка до … офис или адрес …“ с по-големи букви */
.snotes{margin:0;padding:12px 14px;border-radius:14px;background:rgba(240,195,107,.08);box-shadow:inset 0 0 0 1px rgba(240,195,107,.35)}   /* забележките на продавача — в „Описание и характеристики“ (owner 10.11); отстоянието е от grid gap на .desc */
.snotes b{display:block;color:#f0c36b;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.snotes p{color:var(--ink);font-size:14px;line-height:1.45}
.lnote{margin:4px 0 2px;color:#f0c36b;font-size:12.5px;line-height:1.35}
.lnote b{font-weight:600}
.sw.accept.bad{box-shadow:0 0 0 1.5px #ff8c82;border-radius:14px}
.perks{list-style:none;padding:0;display:grid;gap:10px;margin-top:16px}
.perks li{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.perks .ic,.rights .ic{fill:none;stroke:#ffe3a8;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.perks .ic{width:40px;height:40px;padding:9px;border-radius:12px;background:radial-gradient(circle at 50% 30%,rgba(255,227,168,.22),rgba(255,227,168,.05));box-shadow:inset 0 0 0 1px rgba(255,227,168,.28)}
.perks li>span{color:var(--mute);font-size:13px;line-height:1.35}
.perks b{display:block;margin-bottom:2px;color:var(--ink);font-size:15px;font-weight:600}
.ship__more{display:block;margin-top:6px;min-height:44px;line-height:44px;text-align:center;color:var(--gold);font-size:14px;text-decoration:underline}

.crumb{padding:6px 20px 0;color:var(--faint);font-size:13px;text-shadow:0 1px 14px rgba(0,0,0,.7)}
.crumb a{text-decoration:none;color:var(--mute)}
.h1{font:500 clamp(30px,9vw,40px)/1.05 var(--serif);letter-spacing:-.015em;padding:10px 20px 4px;text-shadow:0 1px 18px rgba(0,0,0,.7)}
.sub{padding:0 20px 14px;color:var(--mute);font-size:14px;text-shadow:0 1px 14px rgba(0,0,0,.7)}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 14px;align-items:start}
.card{position:relative;border-radius:var(--r);overflow:hidden;contain:layout paint;display:flex;flex-direction:column}
.card .art{display:block;width:100%;aspect-ratio:5/4;background:radial-gradient(120% 90% at 50% 12%,rgba(255,255,255,.08),rgba(255,255,255,0))}
.art svg{width:100%;height:100%;display:block}
.art img.shot{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(0,0,0,.55)) drop-shadow(0 2px 3px rgba(0,0,0,.4))}
/* СНИМКА НА АРТИКУЛ (owner 09.11: рамката и полето следват снимката 9:16–16:9): отношението идва inline от art.js photoAR (pw/ph, ограничено) — картата е колкото снимката (.pgrid align-items:start);
   object-fit:contain — продуктът никога не се реже, ленти само ако снимката е извън 9:16–16:9 (⌂ corpus/mozilla_20261028T2341/developer.mozilla.org_en-US_docs_Web_CSS_object-fit.txt:300, :302); истинска снимка с фон — без сянката на изрязаните предмети */
.card .art.ph img.shot,.hero-art.ph img.shot{filter:none}
.hero-art img.shot{display:block;width:100%;height:100%;object-fit:contain}
.hero-art.ph{max-height:min(56vh,calc(88vh - 250px));max-height:min(56svh,calc(88svh - 250px));border-radius:16px;overflow:hidden;margin:-6px auto 8px}   /* таванът (owner 11.11: „снимките са прекалено малки … намали шрифта на заглавието и цената“): мерено в headless Chrome на 411×791 и 411×735 (S23U) — при заглавие 21 px и цена 26 px снимката 9:16 расте от 196×348 до 249×443 (791) и от 182×323 до 232×412 (735), а „В количката“ и „Описание“ остават видими; calc(88svh − 250px): листът е до 88svh, останалото в него ≈ 234 px ⇒ и на по-нисък телефон бутоните не излизат · при таван отношението стеснява полето (⌂ …CSS_aspect-ratio.txt:298) ⇒ auto отстрани го центрира (owner 09.11: „не се пада в средата“) */
/* ДВЕ КОЛОНИ „masonry“ (owner 09.11: „ДА“ — без празно под ниските карти): app.js gridHTML слага всяка карта в по-късата колона; Chrome 156 няма display:grid-lanes (мерено 09.11) */
/* ОПИСАНИЕТО НА АРТИКУЛА (owner 09.11: „ще имаме ли бутон?“ → „направи го в демото“ → „махни да не се вижда описанието — да се вижда бутонът за количката и другият с падащото меню“): ЦЯЛОТО зад бутона — 1–2 изречения, характеристики, марка/модел/производител/състояние и предупреждения
   (W3C APG Disclosure: стрелка надясно — свито, надолу — разгънато; ⌂ corpus/w3c_20261106T1822/www.w3.org_WAI_ARIA_apg_patterns_disclosure.txt:25-26); [hidden] изрично, защото display:grid/flex го надделява */
.desc .lead{color:var(--ink);font-size:15px;line-height:1.5;margin:0}
.more{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:12px;padding:15px 16px;border-radius:16px;font:600 14px/1 var(--sans);color:var(--ink);text-align:left}
.more[hidden]{display:none}
.chev{width:9px;height:9px;flex:none;margin-right:4px;border:solid var(--gold);border-width:0 2px 2px 0;transform:rotate(-45deg);transition:transform .25s var(--ease)}
.more[aria-expanded="true"] .chev{transform:rotate(45deg)}
/* ЦВЯТ В СТЪКЛОТО (owner 09.11: „тези бутони да имат цвят някак си в стъклото — да се вижда, че човек може да го натисне“): златист оттенък върху стъкленото тяло + златна линия + мек ореол;
   покритието на стъклото (::after, --rim) остава отгоре; натискане — само transform (компоситор); селекторът е по-силен от [data-glass][data-gl] (box-shadow) */
.sheet .more[data-glass]{background:radial-gradient(120% 100% at 25% 0%,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 40%,rgba(255,255,255,0) 62%),linear-gradient(180deg,rgba(233,196,106,.26) 0%,rgba(233,196,106,.10) 55%,rgba(233,196,106,.16) 100%),var(--g-fill);box-shadow:inset 0 1px 0 rgba(255,236,190,.45),inset 0 0 0 1px rgba(233,196,106,.55),0 0 22px -8px rgba(233,196,106,.6),var(--g-shadow);color:#ffe3a8;transition:transform .2s var(--ease)}
.sheet .more[data-glass]:active{transform:scale(.98)}
.sheet .more[data-glass][aria-expanded="true"]{background:linear-gradient(180deg,rgba(233,196,106,.34) 0%,rgba(233,196,106,.14) 100%),var(--g-fill)}
.desc{display:grid;gap:10px;margin-top:14px;padding:0 4px 4px;color:var(--mute);font-size:14px;line-height:1.45}
.desc[hidden]{display:none}
.desc h3{font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-top:6px}
.desc ul{margin:0;padding-left:18px;display:grid;gap:5px}
.desc dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}
.desc dt{color:var(--faint)}
.desc dd{margin:0;color:var(--ink)}
.desc .warn li{color:#f0c36b}
.pgrid.pm{display:flex;align-items:flex-start}
.pcol{flex:1 1 0;min-width:0;display:grid;gap:12px}
.heart{position:absolute;right:8px;top:8px;width:36px;height:36px;border-radius:50%;color:rgba(255,255,255,.78);font-size:18px;line-height:1;display:grid;place-items:center;z-index:4}
.heart.on{color:#ff6b7a}
.meta{display:flex;flex-direction:column;gap:8px;padding:2px 12px 12px;flex:1}
.ttl{text-align:left;font:600 14px/1.25 var(--sans);min-height:2.5em}
.row{display:flex;align-items:baseline;justify-content:space-between}
.price{font:500 20px/1 var(--serif);font-variant-numeric:lining-nums tabular-nums}
.price.big{font-size:26px}
.stock{font:600 11px/1 var(--sans);letter-spacing:.05em;color:#8fd9a8}
.stock.low{color:#f0c36b}
.stock.out{color:#ff8c82}
.add{margin-top:auto;padding:11px;border-radius:99px;background:var(--g-gold);color:#17120a;font:700 13px/1 var(--sans);text-shadow:none}
.add:disabled{opacity:.4}
.add:active{transform:scale(.97)}

.doc{padding:16px 20px 14px;max-width:640px;margin:0 14px;border-radius:var(--r)}
.doc p,.doc li{color:var(--mute);margin:10px 0}
.doc ol{padding-left:22px}
.doc h2{font:600 13px/1.35 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin:20px 0 2px}
.doc ul{padding-left:20px;list-style:disc}
.garan{margin:14px 0;text-align:center}
.garan img{display:block;width:100%;max-width:520px;height:auto;margin:0 auto;border-radius:10px;background:#fff}
.garan figcaption{font-size:12.5px;color:var(--mute);margin-top:6px}
.note{color:var(--faint);font-size:12.5px;margin-top:12px}
.empty{padding:24px 20px;color:var(--mute);text-shadow:0 1px 14px rgba(0,0,0,.7)}
.empty a{color:var(--gold)}

.lines{display:grid;gap:10px;padding:0 14px}
.line{display:grid;grid-template-columns:76px 1fr auto;gap:12px;align-items:center;padding:10px;border-radius:var(--r)}
.line .art{aspect-ratio:1;border-radius:14px;overflow:hidden}
.line .t{font:600 14px/1.25 var(--sans)}
.line .p{color:var(--mute);font-size:13px;margin-top:2px}
.qty{display:flex;align-items:center;gap:6px;margin-top:8px}
.qty button{width:32px;height:32px;border-radius:50%;font-size:18px;line-height:1}
.qty span{min-width:20px;text-align:center;font-weight:600}
.rm{color:var(--faint);font-size:12px;text-decoration:underline}
.sum{margin:14px;padding:16px;border-radius:var(--r)}
.sum .r{display:flex;justify-content:space-between;color:var(--mute);margin:4px 0}
.sum .r.t{color:var(--ink);font:500 22px/1.2 var(--serif);margin-top:10px}
.form{padding:0 14px 6px;display:grid;gap:12px}
label{display:block;font:600 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);text-shadow:0 1px 10px rgba(0,0,0,.7)}
.fld{display:block;margin-top:8px;border-radius:16px;text-shadow:none}
.fld:focus-within{box-shadow:0 0 0 2px rgba(233,196,106,.6)}
.fld:has(input[aria-invalid="true"]){box-shadow:0 0 0 1.5px #ff8c82}
.fld input,.fld textarea,.fld select{display:block;width:100%;padding:14px 16px;font:500 16px/1.2 var(--sans);text-transform:none;letter-spacing:0;color:var(--ink);outline:0}
.cta{display:block;width:100%;padding:16px;border-radius:99px;background:var(--g-gold);color:#17120a;font:700 16px/1 var(--sans);text-shadow:none;transition:transform .25s var(--ease)}
.cta:active{transform:scale(.98)}
.cta.ghost{width:56px;flex:none;background:var(--g-fill);color:rgba(255,255,255,.7);font-size:22px}
.cta.ghost.on{color:#ff6b7a}
.actions{display:flex;gap:10px}
.steps{list-style:none;padding:0;display:grid;gap:10px;margin:8px 20px 18px}
.steps li{display:flex;align-items:center;gap:12px;color:var(--faint);font:500 15px/1.2 var(--sans);transition:color .4s;text-shadow:0 1px 12px rgba(0,0,0,.7)}
.steps i{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);flex:none;position:relative;transition:background-color .4s,border-color .4s}
.steps li.is-on{color:var(--ink)}
.steps li.is-on i{background:#8fd9a8;border-color:#8fd9a8}
.steps li.is-on i::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:10px;border:solid #07110b;border-width:0 2.2px 2.2px 0;transform:rotate(40deg)}
.label{position:relative;overflow:hidden;display:grid;gap:8px;margin:0 14px;padding:16px;border-radius:14px;background:#fff;color:#111;font:600 12.5px/1.35 var(--sans)}
.label em{font-style:normal;font-weight:700}
.label b{font:800 15px/1 var(--sans);letter-spacing:.04em}
.code{display:block;height:46px;background:repeating-linear-gradient(90deg,#111 0 2px,#fff 2px 4px,#111 4px 5px,#fff 5px 8px,#111 8px 11px,#fff 11px 12px)}
.wm{position:absolute;right:-6px;top:34%;transform:rotate(-14deg);font:800 40px/1 var(--sans);letter-spacing:.12em;color:rgba(0,0,0,.08)}

.foot{margin:34px 14px calc(130px + env(safe-area-inset-bottom));padding:22px 18px;border-radius:var(--r);display:grid;grid-template-columns:1fr 1fr;gap:22px 14px}
.foot h4{font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.foot a{display:block;padding:6px 0;color:var(--mute);text-decoration:none;font-size:14px}
.foot .copy{grid-column:1/-1;color:var(--faint);font-size:12.5px}

.dock{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:0 12px calc(12px + env(safe-area-inset-bottom));transform:translate3d(0,calc(var(--kb) * -1),0);transition:none;pointer-events:none}   /* без преход: --kb следва видимия изглед кадър по кадър; .25 s изоставаше и лентата прескачаше при клавиатурата; transition:none пази и от .01ms на „намалено движение“ (мерено на S23U, v59) */
.dock>*{pointer-events:auto}
.chips{display:flex;gap:8px;overflow-x:auto;padding:6px 2px 14px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.dock:not([data-state="idle"]) .chips{display:none}
.chip{flex:none;padding:10px 15px;border-radius:99px;font:600 13px/1 var(--sans)}
.tray{position:relative;margin:0 0 10px;border-radius:26px;overflow:hidden;opacity:1;visibility:visible;transition:opacity .35s,transform .5s var(--ease)}
.tin{padding:16px 0 6px;max-height:min(64vh,540px);overflow:auto}
.dock[data-state="idle"] .tray{max-height:0;padding:0;margin:0;opacity:0;visibility:hidden;transform:translate3d(0,14px,0)}
.tx{position:absolute;right:10px;top:8px;width:34px;height:34px;border-radius:50%;font-size:20px;line-height:1;z-index:5}
.ainote{padding:4px 18px 12px;color:var(--faint);font-size:11.5px;line-height:1.4}   /* AI Act чл. 50(1), (5): че отговаря AI — при първия контакт */
.ainote a{color:var(--faint);text-decoration:underline}
.say{padding:0 52px 12px 18px;font:500 15px/1.4 var(--sans);min-height:22px}
.dock[data-state="think"] .say::after{content:" …";animation:blink 1s steps(2,jump-none) infinite}
.rail{display:flex;gap:12px;overflow-x:auto;padding:2px 16px 14px;scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail--ai{align-items:flex-start}   /* owner 13.11: карта 16:9 до 9:16 не се разтяга до най-високата (flex по подразбиране е stretch ⇒ празно място между цената и бутона); като .pgrid{align-items:start} — „рамката следва снимката“ */
.rail--ai .card{flex:0 0 auto;width:min(52vw,196px);scroll-snap-align:start;animation:rise .6s var(--ease) both;animation-delay:calc(var(--i,0) * 70ms)}
.dock[data-has="0"] .rail--ai{display:none}
/* КАРТИТЕ ОТ AI — ПЛЪТНИ (owner 10.11: „да не се вижда зад картата … направи го тъмно“): в гласовия режим лентата е прозрачна (по-долу), а тялото на стъклото
   пропуска ≈ 44 % от страницата (--g-fill: rgba(9,11,15,.56)) ⇒ същата светлина върху ПЛЪТЕН цвят (#12141c — плътното тяло на дизайна, по-долу при „намалена прозрачност“);
   зад елемент се вижда само ако той е прозрачен (⌂ mozilla_20261028T2341/mdn_backdrop_filter.txt:14); контурът на стъклото (::after, --rim) остава */
.rail--ai .card{background:linear-gradient(180deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.012) 42%,rgba(0,0,0,.14) 100%),#12141c}
.seeall{display:block;margin:0 16px 12px;padding:12px;border-radius:99px;text-align:center;text-decoration:none;color:var(--gold);font:600 14px/1 var(--sans)}
.seeall[hidden]{display:none}
.ask{position:relative;display:flex;align-items:center;gap:8px;padding:7px 7px 7px 13px;border-radius:99px}
.orb{--lv:0;width:30px;height:30px;flex:none;position:relative;border-radius:50%;padding:0;background:none;-webkit-tap-highlight-color:transparent}
.orb i{position:absolute;inset:0;border-radius:50%;background:conic-gradient(#e9c46a,#8b6cff,#4fd1c5,#e9c46a);animation:spin 7s linear infinite}
.orb i::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#0b0c12}
.dock[data-state="think"] .orb i{animation-duration:1.1s}
.q{flex:1;min-width:0;font-size:16px;padding:10px 4px;color:var(--ink);outline:0}
.q::placeholder{color:var(--mute)}
.ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none}
.ic svg{width:20px;height:20px}
.ic[hidden]{display:none}
/* без стрелка за изпращане (owner 10.11): формата с ЕДНО поле се изпраща с Enter от клавиатурата (⌂ corpus/whatwg_20261110T1052/html.spec.whatwg.org_multipage_form-control-infrastructure.html.txt:2297-2321) */

/* ГЛАСОВИЯТ РЕЖИМ (owner 10.11: „махни тая лента — остави само кръгчето и X, без полето за чата“; voice_mode.js): лентата и чиповете изчезват,
   в средата остава само кълбото (свети по --lv) и „×“; полето за чат (текстът, бележката, „ד на отговора) не се показва — само картите с артикулите, прозрачно.
   Стъклото на отговора идва като вграден стил от glass.js (backdrop-filter) ⇒ !important само тук. По --lv — само scale и opacity (⌂ corpus/google_20261028T2341/webdev_compositor_only.txt:12-14, :21) */
.vpad{display:none}
html.voice-on .chips,html.voice-on .ask{display:none}
html.voice-on .vpad{display:flex;justify-content:center;align-items:center;position:relative;height:60px}
.vpad .orb{width:48px;height:48px;scale:calc(1 + var(--lv) * .14)}
.vpad .orb i::after{inset:6px}
.orb::before{content:"";position:absolute;inset:-75%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(139,108,255,.9) 0,rgba(79,209,197,.5) 30%,rgba(233,196,106,.24) 48%,rgba(0,0,0,0) 66%);opacity:0;scale:.8}
.vpad .orb::before{opacity:calc(.12 + var(--lv) * .88);scale:calc(.82 + var(--lv) * .42)}
.vpad .vclose{position:absolute;right:7px;top:50%;translate:0 -50%;width:44px;height:44px;font-size:20px;line-height:1}
html.voice-on .say,html.voice-on .ainote,html.voice-on .tx,html.voice-on .seeall{display:none}
html.voice-on .dock:not([data-has="1"]) .tray{display:none}
html.voice-on .tray{background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.voice-on .tray::after{display:none}
.dock[data-vstate="listen"] .orb i{animation-duration:3s}
.dock[data-vstate="think"] .orb i{animation-duration:1.1s}
.dock[data-vstate="speak"] .orb i{animation-duration:2.2s}
@media (prefers-reduced-motion:reduce){html:not(.motion-on) .orb,html:not(.motion-on) .orb::before{scale:1}}
html.motion-off .orb,html.motion-off .orb::before{scale:1}

.sheet{position:fixed;inset:0;z-index:60}
.sheet[hidden]{display:none}
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.58);opacity:0;transition:opacity .3s}
.panel{position:absolute;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));max-height:88vh;max-height:88svh;border-radius:28px;transform:translate3d(0,120%,0);transition:transform .45s var(--ease);outline:0}
.pin{padding:22px 22px 26px;max-height:88vh;max-height:88svh;overflow:auto;overscroll-behavior:contain;border-radius:28px}
/* c78s (owner 12.11, Oppo A6: „когато отворя артикул — не трябва да има скрол наляво-надясно, надолу-нагоре; само когато отворя „Описание и характеристики“ — само
   надолу и нагоре; затворя ли го — без скрол“): наляво-надясно — никога (галерията вътре си скролира сама); затворено описание — колона без скрол, снимката се свива
   точно колкото трябва, за да се побере всичко (min-height:0 — иначе flex елементът не пада под съдържанието си); отворено — обичаен блок, скрол само по вертикала */
.pin{overflow-x:hidden}
.pin:not(:has(> [data-i-more][aria-expanded="true"])){display:flex;flex-direction:column;overflow-y:hidden}
.pin:not(:has(> [data-i-more][aria-expanded="true"]))>.hero-art{flex:0 1 auto;min-height:0}
.pin:not(:has(> [data-i-more][aria-expanded="true"]))>:not(.hero-art){flex:none}
.sheet.is-open .scrim{opacity:1}
.sheet.is-open .panel{transform:none}
.x{position:absolute;right:14px;top:12px;width:38px;height:38px;border-radius:50%;font-size:22px;line-height:1;z-index:5}
.hero-art{aspect-ratio:5/4;margin:-6px -10px 6px}
.hero-art svg{width:100%;height:100%;display:block}
/* ГАЛЕРИЯТА В ЛИСТА (owner 11.11: „ДА МОЖЕ ДА СЕ СКРОЛВАТ СНИМКИТЕ НА ЛЯВО И НАДЯСНО“; art.js gallery; HANDOFF, порта 11.11 13:18): скролът е на браузъра, без JS жестове
   (touch-action не се пипа — ⌂ corpus/mozilla_20261028T1929/mdn_touch_action.txt:20-22, :97), с прилепване x mandatory: всяко плъзгане свършва на цяла снимка
   (⌂ corpus/w3c_20261029T0217/css_scroll_snap_1.txt:27-44, :134); scroll-snap-stop: always — бързото плъзгане не прескача снимка (:308); вертикалното плъзгане остава на листа (:367).
   Полето е по първата снимка (photoAR), другите са object-fit:contain и не се режат (⌂ …CSS_object-fit.txt:300). Бутоните ‹ › — само с мишка: на iPhone преди Safari 27
   програмният плавен скрол с mandatory отказва след скриване на лентата на браузъра (⌂ corpus/apple_20261029T0217/safari_27_release_notes_json.txt:15744-15752); 36 px ≥ 24 px (WCAG 2.5.8) */
.gal{position:relative;height:100%}
.gtrack{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.gtrack::-webkit-scrollbar{display:none}
.gs{flex:0 0 100%;min-width:0;height:100%;scroll-snap-align:center;scroll-snap-stop:always}
.gdots{position:absolute;left:50%;bottom:8px;translate:-50% 0;display:flex;gap:6px;padding:5px 8px;border-radius:99px;background:rgba(0,0,0,.42);pointer-events:none}
.gdots i{width:6px;height:6px;border-radius:99px;background:rgba(255,255,255,.6);transition:width .25s var(--ease),background-color .25s}
.gdots i.on{width:16px;background:var(--gold)}
.gnav{display:none}
@media (hover:hover) and (pointer:fine){
  .gnav{display:grid;place-items:center;position:absolute;top:50%;translate:0 -50%;width:36px;height:36px;border-radius:50%;color:var(--ink);z-index:2}
  .gnav.prev{left:8px}
  .gnav.next{right:8px}
  .gnav::before{content:"";width:9px;height:9px;border:solid currentColor;border-width:0 2px 2px 0}
  .gnav.prev::before{transform:translateX(2px) rotate(135deg)}
  .gnav.next::before{transform:translateX(-2px) rotate(-45deg)}
  .gnav[aria-disabled="true"]{opacity:.35;cursor:default}
}
.stitle{font:500 21px/1.15 var(--serif);letter-spacing:-.01em;margin:4px 0 8px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.tags:empty{display:none}
.tagc{font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:7px 10px;border-radius:99px;color:var(--mute)}
.srow{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
/* СЪСТОЯНИЕ (owner 09.11: „липсва ни състоянието — ново или използвано“): цветен етикет до наличността — на същия ред, за да не бута бутоните под ръба (мерено при 44 %) */
.sside{display:flex;align-items:center;gap:8px}
.cond{font:700 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:6px 9px;border-radius:99px;box-shadow:inset 0 0 0 1px currentColor}
.cond[hidden]{display:none}
.cond.new{color:#8fd9a8;background:rgba(143,217,168,.14)}
.cond.used{color:#f0c36b;background:rgba(240,195,107,.14)}
.cond.ref{color:#9cc7ff;background:rgba(156,199,255,.14)}
.cond.dmg{color:#ff8c82;background:rgba(255,140,130,.14)}
/* на картата (owner 09.11: „да сложи“): горе вляво върху снимката (сърцето е вдясно), тъмна подложка за четимост върху всяка снимка; не хваща докосвания — те отиват към снимката */
.card .cond{position:absolute;left:10px;top:10px;z-index:4;pointer-events:none;box-shadow:inset 0 0 0 1px currentColor,0 2px 10px rgba(0,0,0,.45)}
.card .cond.new{background:rgba(12,44,28,.86)}
.card .cond.used{background:rgba(52,38,10,.86)}
.card .cond.ref{background:rgba(14,30,54,.86)}
.card .cond.dmg{background:rgba(58,16,14,.86)}
/* ПРОФИЛ НА КУПУВАЧА (owner 09.11: „направи всичко това … да го тестваме по закон“): секции, превключватели (W3C APG Switch — role=switch, aria-checked), функцията за отказ (чл. 11а), ДЕМО бележки */
.acc{margin:14px;padding:16px;border-radius:var(--r);display:grid;gap:10px}
.acc>p{color:var(--mute);font-size:14px}
.acc .form,.acc .lines{padding:0}
.acc .cta{margin-top:4px}
.h3{font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.h4{font:600 13px/1.2 var(--sans);color:var(--mute);margin-top:8px}
.demo{margin:8px 20px 0;padding:10px 12px;border:1px dashed rgba(240,195,107,.5);border-radius:12px;color:#f0c36b;font-size:12.5px;line-height:1.5}
.acc .demo{margin:4px 0 0}
.demo button{color:var(--gold);text-decoration:underline;margin-right:10px;font-size:12.5px}
.lnk{color:var(--gold);text-decoration:underline;font-size:inherit}
.sw{display:flex;align-items:center;gap:12px;width:100%;padding:8px 0;text-align:left;color:var(--ink);font-size:14px;line-height:1.35}
.swt{flex:none;position:relative;width:44px;height:26px;border-radius:99px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);transition:background-color .2s}
.swt::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#cfd2da;transition:transform .2s var(--ease)}
.sw[aria-checked="true"] .swt{background:rgba(143,217,168,.42)}
.sw[aria-checked="true"] .swt::after{transform:translateX(18px);background:#8fd9a8}
.hint{display:block;color:var(--faint);font-size:12px;margin:-2px 0 4px 56px}
.cats{display:flex;flex-wrap:wrap;gap:8px;margin-left:56px}
.catb{padding:7px 11px;border-radius:99px;font:600 12px/1 var(--sans);color:var(--mute);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.catb[aria-pressed="true"]{color:#17120a;background:var(--g-gold);box-shadow:none}
.cta[hidden]{display:none}
.cta.sec{background:linear-gradient(180deg,rgba(233,196,106,.22),rgba(233,196,106,.08)),var(--g-fill);color:#ffe3a8;box-shadow:inset 0 0 0 1px rgba(233,196,106,.5),var(--g-shadow)}
.cta.warn{background:rgba(255,140,130,.1);color:#ff8c82;box-shadow:inset 0 0 0 1px rgba(255,140,130,.55)}
a.cta{text-align:center;text-decoration:none}
/* ПОРЪЧКАТА Е ПРИЕТА (owner 09.11: „една хубава голяма зелена анимирана отметка в средата“): SVG кръг + отметка, изчертани с черти и отместване
   (⌂ corpus/mozilla_20261109T2008/developer.mozilla.org_en-US_docs_Web_SVG_Reference_Attribute_stroke-dasharray.txt:240, :299; …stroke-dashoffset.txt:244);
   остават изчертани с forwards (⌂ …Web_CSS_animation-fill-mode.txt:355-356). Дължините: кръг 2π·24 ≈ 150,8 → 151; отметка 9,9 + 21,9 = 31,8 → 34.
   Зеленото = на досегашните отметки (#8fd9a8). При намалено движение — веднага изчертана (⌂ mozilla_20261028T1929/mdn_prefers_reduced_motion.txt:16-18). */
.okbox{text-align:center;padding:14px 20px 4px}
.okbox .h1{padding:0 0 6px;text-align:center}
.okbox .sub{padding:0 0 10px;text-align:center}
.okmark{display:block;width:132px;height:132px;margin:8px auto 12px;overflow:visible;filter:drop-shadow(0 0 22px rgba(143,217,168,.35));animation:okpop .45s ease-out 1.15s both}
.okmark circle{fill:rgba(143,217,168,.12);stroke:#8fd9a8;stroke-width:2.6;stroke-dasharray:151;stroke-dashoffset:151;animation:okdraw .7s cubic-bezier(.65,0,.45,1) .1s forwards}
.okmark path{fill:none;stroke:#8fd9a8;stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:34;stroke-dashoffset:34;animation:okdraw .45s cubic-bezier(.65,0,.45,1) .75s forwards}
@keyframes okdraw{to{stroke-dashoffset:0}}
@keyframes okpop{0%,100%{transform:scale(1)}45%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){html:not(.motion-on) .okmark,html:not(.motion-on) .okmark circle,html:not(.motion-on) .okmark path{animation:none;stroke-dashoffset:0}}
html.motion-off .okmark,html.motion-off .okmark circle,html.motion-off .okmark path{animation:none;stroke-dashoffset:0}
.okbox.done .okmark,.okbox.done .okmark circle,.okbox.done .okmark path{animation:none;stroke-dashoffset:0}   /* второ рисуване на същата поръчка — без нова анимация */   /* връзка като бутон („Етикет за печат“): като <button class="cta"> — центрирана, без подчертаване */
.danger{display:grid;gap:10px;padding:12px;border-radius:14px;background:rgba(255,140,130,.08);color:var(--ink);font-size:14px}
/* ВХОД (09.11; owner: „без лице и пръстов отпечатък“): една карта в средата, знак, един бутон напред, две обещания отдолу;
   цели ≥ 44 px за бутоните-връзки (WCAG 2.2 2.5.8: минимум 24×24 — ⌂ corpus/w3c_20261028T1929/wcag22.txt:1174-1183; тук с запас); без ново движение */
.auth{margin:10px 14px 6px;padding:24px 18px 18px;border-radius:var(--r);display:grid;gap:12px;text-align:center}
.auth .form{padding:0;text-align:left}
.auth .demo{margin:0;text-align:left}
.auth__mark{width:66px;height:66px;margin:0 auto;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 32%,rgba(255,227,168,.26),rgba(255,227,168,.05) 70%);box-shadow:inset 0 0 0 1px rgba(255,227,168,.32),0 0 30px rgba(240,195,107,.16)}
.auth__mark .ic{width:30px;height:30px}
.auth .ic{fill:none;stroke:#ffe3a8;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.auth__t{font:500 clamp(28px,8.5vw,36px)/1.08 var(--serif);letter-spacing:-.01em;text-shadow:0 1px 18px rgba(0,0,0,.7)}
.auth__p{color:var(--mute);font-size:15px;line-height:1.45}
.auth__p b{color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.auth__why{list-style:none;padding:0;display:grid;gap:10px;text-align:left;margin-top:2px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
.auth__why li{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;color:var(--mute);font-size:13.5px;line-height:1.4}
.auth__why .ic{width:20px;height:20px;margin-top:1px}
.auth__row{display:flex;justify-content:space-between;gap:12px}
.auth__row .lnk{min-height:44px;padding:0 4px;font-size:14px}
.auth__row .lnk[disabled]{color:var(--faint);text-decoration:none}
.auth__foot{padding:0 20px;text-align:center}
.acc{scroll-margin-top:96px}   /* плаващата лента (~80 px) не закрива заглавието при scrollIntoView */
.hint0{display:block;margin-top:6px;color:var(--faint);font-size:12px;text-transform:none;letter-spacing:0;font-weight:400}
.mailto{margin:0;font-size:13.5px;color:var(--mute)}
.mailto b,.okbox .sub b{color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.fld input.otp{font:600 28px/1 var(--sans);letter-spacing:.42em;text-align:center;font-variant-numeric:tabular-nums;padding:14px 8px 14px calc(8px + .42em)}
/* функцията за отказ — на видно място и лесночетлива (⌂ corpus/eurlex_20261028T2309/eu_02011L0083-20260927_consumer_rights_consolidated_bg.txt:854) */
.wdb{display:block;padding:16px;border-radius:16px;text-align:center;text-decoration:none;font:700 15px/1.2 var(--sans);color:#ffb8b0;background:linear-gradient(180deg,rgba(255,77,64,.24),rgba(255,77,64,.08)),rgba(9,11,15,.6);box-shadow:inset 0 0 0 1.5px rgba(255,77,64,.7),0 0 24px -8px rgba(255,77,64,.75)}   /* owner 11.11, 23:46: „Откажете се от поръчката тук да свети само в червено“ — рамка, сияние и текст в червено; надписът (законовият) — непипнат */
.wdl{margin:0;padding-left:20px;color:var(--ink);font-size:14px;display:grid;gap:4px}
.ack{white-space:pre-wrap;word-break:break-word;font:500 12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);background:rgba(0,0,0,.38);border-radius:12px;padding:12px;margin:0}
.foot a.wdf{color:#ffe3a8}
.toast{position:fixed;left:50%;bottom:calc(150px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:70;padding:12px 18px;border-radius:99px;font:600 14px/1 var(--sans);animation:rise .35s var(--ease) both}
.toast[hidden]{display:none}
/* c89 (owner 12.11): гласът от TikTok → браузъра на телефона (inapp.js). .vgo — голям бутон при ?voice=1: новата страница няма потребителска активация, микрофонът и поздравът тръгват от ЕДНО докосване;
   .hand — слоят-указание във вграден браузър (на панела се ползват .sheet, .scrim, .panel). Кълбото е същото като на AI лентата, голямо */
.vgo{position:fixed;inset:0;z-index:65;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;background:rgba(6,6,10,.88);text-align:center}
.vgo[hidden]{display:none}
.vgo .orb{width:132px;height:132px;margin-bottom:10px}
.vgo .orb i{animation-duration:3s}
.vgo .orb i::after{inset:12px}
.vgo .orb::before{opacity:.9;scale:1}
.vgo-cap{font:500 24px/1.2 var(--serif);letter-spacing:-.01em;max-width:18ch}
.vgo-sub{font:500 14px/1.35 var(--sans);color:rgba(255,255,255,.62)}
.hin{padding:22px 22px 26px}
.hand-title{font:500 21px/1.15 var(--serif);letter-spacing:-.01em;margin:4px 44px 8px 0}
.hand-why{font:400 15px/1.4 var(--sans);color:rgba(255,255,255,.8);margin-bottom:16px}
.hand-steps{font:400 13px/1.4 var(--sans);color:rgba(255,255,255,.62);margin-top:14px}
.hand-url{display:block;width:100%;margin-bottom:10px;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.28);font:500 14px/1.2 var(--sans)}
.hin .cta{margin-bottom:10px;text-align:center;text-decoration:none}
/* c102 (13.11): фигурата в слоя — инлайн SVG, показва ⋯ горе вдясно → долен лист → средния ред с компаса (МЕРЕНО на телефона на owner, HANDOFF 7286-7290). ОСНОВНОТО състояние = ПЪЛНАТА картина (листът излязъл, редът осветен);
   анимацията (САМО opacity и transform ⌂ chromium_gpu_accelerated_compositing.txt:97-98; ЕДИН пуск 4,8 s, не цикъл ⌂ wcag22.txt:788) е САМО под .hand-demo.play и свършва на същото състояние ⇒ reduced motion (глобалното правило по-долу) и ?static показват пълната картина;
   fill-mode both ⌂ mdn animation-fill-mode.txt:355-356, :387-388; малко движение, без голямо мащабиране ⌂ mdn_prefers_reduced_motion.txt:18 */
.hand-demo{display:block;width:100%;margin:0 0 4px;padding:0;border:0;background:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hand-demo[hidden]{display:none}
.hand-url[hidden]{display:none}
.hdm{display:block;height:150px;width:auto;max-width:100%;margin:0 auto;overflow:hidden}
.hdm *{transform-box:fill-box;transform-origin:center}
.hdm-screen{fill:#14161d;stroke:rgba(255,255,255,.2);stroke-width:1.2}
.hdm-head{fill:#f4f4f6}
.hdm-ln{fill:none;stroke:#14161d;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hdm-bar{fill:#cfd0d8}
.hdm-dot{fill:#14161d}
.hdm-ring{fill:none;stroke:#d99a1f;stroke-width:2.4}
.hdm-card{fill:rgba(255,255,255,.07)}
.hdm-scrim{fill:#000;opacity:.5}
.hdm-sheet{transform-box:fill-box}
.hdm-sheetbg{fill:#fff}
.hdm-sep{fill:none;stroke:#e3e3e8;stroke-width:1}
.hdm-hl{fill:rgba(233,196,106,.38);stroke:var(--gold);stroke-width:1.4;opacity:1}
.hdm-ico{fill:none;stroke:#14161d;stroke-width:1.5;stroke-linejoin:round}
.hdm-bar2{fill:#d9d9df}
.hdm-label{fill:#14161d;font:600 11px var(--sans)}
.hdm-tap{fill:rgba(233,196,106,.9);stroke:#fff;stroke-width:1.4}
.hdm-tap-a{opacity:0}
.hdm-tap-b{opacity:1}
.hand-demo.play .hdm-ring{animation:dm-ring 4.8s both}
.hand-demo.play .hdm-tap-a{animation:dm-taa 4.8s both}
.hand-demo.play .hdm-scrim{animation:dm-scrim 4.8s both}
.hand-demo.play .hdm-sheet{animation:dm-sheet 4.8s both}
.hand-demo.play .hdm-tap-b{animation:dm-tab 4.8s both}
.hand-demo.play .hdm-hl{animation:dm-hl 4.8s both}
@keyframes dm-ring{0%,6%{opacity:0;transform:scale(.6)}16%{opacity:1;transform:scale(1.25)}28%,100%{opacity:1;transform:scale(1)}}
@keyframes dm-taa{0%,8%{opacity:0;transform:scale(.7)}14%{opacity:1;transform:scale(1)}22%{opacity:1;transform:scale(.8)}30%,100%{opacity:0;transform:scale(.8)}}
@keyframes dm-scrim{0%,24%{opacity:0}40%,100%{opacity:.5}}
@keyframes dm-sheet{0%,24%{opacity:0;transform:translateY(100%)}26%{opacity:1;transform:translateY(100%)}42%,100%{opacity:1;transform:none}}
@keyframes dm-tab{0%,56%{opacity:0;transform:scale(.7)}64%{opacity:1;transform:scale(1)}72%{opacity:1;transform:scale(.82)}80%,100%{opacity:1;transform:scale(1)}}
@keyframes dm-hl{0%,60%{opacity:0}72%,100%{opacity:1}}

@keyframes spin{to{transform:rotate(1turn)}}
@keyframes pulse{50%{scale:1.18}}
@keyframes blink{50%{opacity:.25}}
@keyframes rise{from{opacity:0;transform:translate3d(0,14px,0) scale(.97)}to{opacity:1;transform:none}}
html.static *,html.static *::before,html.static *::after{transition:none!important;animation:none!important}
/* слаб телефон (мерено от tier.js) — без леща и без размиване, по-плътно тяло: четим текст на всяка цена */
html.glass-lite{--g-fill:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),rgba(10,12,17,.84);--g-veil:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),rgba(10,12,17,.90);--g-veil-lg:rgba(10,12,17,.94);--g-blur:none}
html.glass-lite [data-glass="panel"][data-lens]{-webkit-backdrop-filter:none;backdrop-filter:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){[data-glass][data-lens],[data-glass="panel"][data-lens]{background:#12141c}}
@media (prefers-reduced-transparency:reduce){[data-glass][data-lens],[data-glass="panel"][data-lens]{background:#12141c;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-reduced-motion:reduce){
  html:not(.motion-on) *,html:not(.motion-on) *::before,html:not(.motion-on) *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
html.motion-off *,html.motion-off *::before,html.motion-off *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
@media (min-width:700px){
  #view,.foot,.dock,.panel{max-width:560px;margin-inline:auto}
}
.fld select{appearance:none;-webkit-appearance:none;background:transparent;border:0}
.fld select option{color:#111;background:#fff}
/* падащ списък (град, офис на Еконт, начин на връщане): appearance:none махна стрелката на браузъра ⇒ своя стрелка; ::after на стъклото е заето от контура (--rim) ⇒ ::before */
.fld.sel::before{content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2px solid #e9c46a;border-bottom:2px solid #e9c46a;transform:rotate(45deg);pointer-events:none;z-index:4}
.fld.sel select{padding-right:46px}
.fld select:disabled{opacity:.55}

/* ── КЪЛБОТО НА VIBER НАД МИКРОФОНА Е МАХНАТО (owner 11.11 вечер: „бутона не трябва да се вижда над микрофона“) — Viber е долу, във футъра (.fsoc). */
/* ── ДРУГО ПОЛЕ НА ФОКУС (owner 11.11 вечер: „когато отворя клавиатурата на други полета, освен ПИТАЙ AI, искам да изчезва — да не закрива, да не пречи“):
   лентата с чиповете и AI полето изчезва, докато се пише в поле извън нея (вход, количка, профил, отказ); полето на AI (.q) я оставя */
html.kb-open:has(:is(input,textarea,select):focus:not(.q)) .dock{display:none}   /* само докато клавиатурата е НА ЕКРАНА (viewport.js — kb-open); затвориш ли я — лентата се връща */
html[data-route="account"] .dock{display:none}   /* owner 11.11 вечер: „махни Питай AI от моя акаунт“; в „Любими“ — обратно (owner 11.11, 23:46: „да се вкара AI агентът в Любими“) */

/* ── СТЪКЛЕНИТЕ БУТОНИ (owner 11.11: „бутоните за количката да станат такива [като на demo.iqbotbg.pro] … сърцето да е в стъкло … описание и
   характеристики красиво и подходящо за сайта“): златно стъкло — полупрозрачно злато, мек отблясък отгоре вляво, светъл ръб отгоре, тъмна дълбочина
   отдолу, златна светлина навън; текстът остава тъмен (най-видимият бутон на страницата — като оранжевия на демото). Сърцето — стъклено кълбо.
   Селекторите са по-силни от [data-glass][data-gl] (box-shadow); БЕЗ backdrop-filter на картите (лещата сваля скрола — мерено на S23U). */
/* ── „В КОЛИЧКАТА“ = БУТОНЪТ НА DEMO.IQBOTBG.PRO (owner 11.11 вечер: „ИСКАМ ТАКИВА БУТОНИ КАКТО Е НА DEMO.IQBOTBG.PRO“): ДОСЛОВНО .btn + .btn-accent от кода на демото
   (~/WINDOWSEXE/ROOF_DEMO/pages/assets/style.css:84-85, :366, :445 телефон, :459 със стъклото, :473 без стъкло) — само цветът е злато вместо оранжевото #F27A1A;
   шрифтът — JetBrains Mono 600 (демото: --mono, Google Fonts) — тук от нашия адрес (CSP font-src 'self'): jbmono600-*.woff2 (fonts.gstatic.com v24, OFL) */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url(jbmono600-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url(jbmono600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
.add[data-glass],.sheet .cta[data-i-add]{font:600 12.5px/1 'JetBrains Mono',ui-monospace,Menlo,monospace;text-transform:uppercase;letter-spacing:.6px;border-radius:5px;color:#fff;border:none;background:linear-gradient(170deg,rgba(255,255,255,.22),rgba(0,0,0,.12)),#d69c42;text-shadow:0 1px 2px rgba(0,0,0,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.38),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -8px 16px rgba(120,54,0,.25),0 10px 30px -14px rgba(0,0,0,.8)}
.sheet .cta[data-i-add]{font-size:14px;padding:16px}
/* „ПРОДЪЛЖИ“, „ВХОД“, „ЗАПАЗИ“ (owner 11.11 вечер: „да е както на количката, но не променяй формата на бутона … да са зелените кристали“): текстът и стъклото — като „В количката“,
   формата — СЪЩАТА (хапче 99px, размерът на .cta); зад стъклото — зелените кристали (btn_glass.js, вид emerald); без WebGPU — зелено с градиента на .btn-accent на демото (:366) */
.cta[data-gem]{font:600 14px/1 'JetBrains Mono',ui-monospace,Menlo,monospace;text-transform:uppercase;letter-spacing:.6px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);background:linear-gradient(170deg,rgba(255,255,255,.22),rgba(0,0,0,.12)),#2e9e6a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.38),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -8px 16px rgba(0,60,30,.25),0 10px 30px -14px rgba(0,0,0,.8)}
.cta[data-gem][data-gpu]{background:transparent;box-shadow:none;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 10px rgba(0,0,0,.45)}
.cta[data-gem="fluo"]{background:linear-gradient(170deg,rgba(255,255,255,.22),rgba(0,0,0,.12)),linear-gradient(90deg,#8e4fa6,#2aa7a0)}   /* „Поръчка със задължение за плащане“ без WebGPU — лилаво и тюркоазено като снимката (owner 11.11 вечер) */
/* „ИЗТЕГЛИ ДАННИТЕ МИ“ (owner: „без стъклото, както другите, само в светло зелено, както е сега в жълто“): .cta.sec със зелено вместо златното */
.cta.sec.grn{background:linear-gradient(180deg,rgba(120,232,166,.22),rgba(120,232,166,.08)),var(--g-fill);color:#b8f5d0;box-shadow:inset 0 0 0 1px rgba(120,232,166,.5),var(--g-shadow)}
/* „ОПИСАНИЕ И ХАРАКТЕРИСТИКИ“ (owner 11.11 вечер: „остава си хапче, просто го правиш стъкло, да се виждат сините кристали“): формата и текстът — същите; под WebGPU стъклото — без CSS фона */
.sheet .more[data-glass][data-gpu]{background:transparent;box-shadow:none;text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 10px rgba(0,0,0,.45)}
.heart[data-glass]{background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.42) 0%,rgba(255,255,255,.1) 36%,rgba(255,255,255,0) 62%),rgba(14,15,20,.46);box-shadow:inset 0 1px 1px rgba(255,255,255,.6),inset 0 -5px 10px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.14),0 6px 14px -6px rgba(0,0,0,.85)}
.sheet .cta.ghost[data-glass]{display:grid;place-items:center;height:56px;padding:0;border-radius:50%;background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.34) 0%,rgba(255,255,255,.08) 38%,rgba(255,255,255,0) 64%),var(--g-fill);box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -6px 12px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.14),var(--g-shadow)}
@media (prefers-reduced-transparency:reduce){.heart[data-glass],.sheet .cta.ghost[data-glass]{background:#12141c}}   /* златото вече е плътно (без прозрачност) — остава измереният профил, не жълтото --g-gold */

/* ── СТЪКЛОТО ОТ КОДА НА ДЕМОТО (owner 11.11: „ИСКАМ СЪЩОТО СТЪКЛО ДА ВЗЕМЕШ ОТ КОДА“ — btn_glass.js, WebGPU): платното .bgl е ВЪТРЕ в бутона и излиза 28 px от всяка страна
   (демото: платното на героя = редът + 28 px — glass.js:691); под етикета (z-index:-1 в контекста на бутона), без събития. След първия кадър бутонът получава data-gpu и CSS фонът
   му се маха (демото: html.has-hero-glass … background:transparent;box-shadow:none — style.css:459-461). Без WebGPU (и при загуба на устройството) остава CSS стъклото от c47 отгоре. */
.bgl{position:absolute;left:-28px;top:-28px;width:calc(100% + 56px);height:calc(100% + 56px);pointer-events:none;z-index:-1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent),linear-gradient(transparent,#000 28px,#000 calc(100% - 28px),transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent),linear-gradient(transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-composite:intersect}   /* сянката на демото стига до 6 скоса — на ръба на платното (28 px) е ≈ 0,4 и се реже на квадрат (мерено: кадърът c49_cards) ⇒ маската я затихва от ръба на бутона до ръба на платното */
.add[data-glass][data-gpu],.sheet .cta[data-i-add][data-gpu]{background:transparent;box-shadow:none;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 10px rgba(0,0,0,.45)}   /* със стъклото — демото :459 (бял текст, тъмна сянка) */
[data-gpu]::after{background:none}
/* c75s (owner 12.11: „при reload първо се появяват старите“) — политиката block на W3C за късно идващо оформление (CSS Fonts 4 §3.2, font-display: block:
   „invisible fallback“ за кратък период — ⌂ corpus/w3c_20261112T1323/www.w3.org_TR_css-fonts-4.txt:2199-2244, :3169-3182; web.dev …font-best-practices.txt:602-604):
   докато WebGPU стъклото на бутона не е нарисувано (data-gpu), бутонът е невидим, но е на мястото си, в DOM, с фокус и за екранния четец (opacity 0 —
   ⌂ corpus/mozilla_20261112T1323/…Properties_opacity.txt — „still part of the DOM … they do get focus“); докосванията — не (pointer-events), при фокус от
   клавиатурата — видим. html.bgl-block — btn_glass.js (има WebGPU); data-bgl-swap — 3 s без стъкло → резервата. Списъкът = HOSTS в btn_glass.js (static_checks). */
html.bgl-block :is([data-ek="office"],[data-ek="address"],[data-ek="aps"],.dkopt[data-dk="office"],.dkopt[data-dk="address"],.eklogo,[data-ekfb],.add[data-glass],.sheet .cta[data-i-add],[data-gem="fluo"],[data-gem],.sheet .more[data-glass],.fsoc .soc):not([data-gpu]):not([data-bgl-swap]):not(:focus-visible){opacity:0;pointer-events:none}
/* ── ИКОНИТЕ ДОЛУ (owner 11.11: „да махнеш този демо шаблон и там да са вайбър иконата и на тикток“): Viber — виолетовото кълбо като над микрофона, TikTok — прозрачно кълбо
   (тонът на бутона с телефона в демото); 48 px (WCAG 2.5.8 ≥ 24 px); връзките — app.js ← contact.js (Viber: viber://…; TikTok: intent:// в Android Chrome, иначе https профилът) */
.fbot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px}   /* owner 11.11 вечер: „както си беше amazingshop bg, само демо шаблон да беше махнал, и бутоните да са в дясно“ */
.fbot .copy{margin:0}
.fsoc{display:flex;gap:12px;align-items:center}
.foot .soc{position:relative;isolation:isolate;display:grid;place-items:center;width:51px;height:51px;padding:0;border-radius:50%;-webkit-tap-highlight-color:transparent;transition:transform .18s var(--ease)}
.foot .soc[hidden]{display:none}
.foot .soc img{width:27px;height:27px}
@media(max-width:400px){.foot .soc{width:46px;height:46px}.foot .soc img{width:25px;height:25px}}   /* размерите на .vb-btn на демото за телефон (style.css:462-463) */
.foot .soc:active{transform:scale(.94)}
.foot .vbs{background:radial-gradient(circle at 32% 28%,rgba(220,188,255,.96) 0%,rgba(154,107,239,.9) 30%,rgba(115,96,242,.86) 58%,rgba(71,40,159,.92) 100%);box-shadow:inset 0 2px 3px rgba(255,255,255,.55),inset 0 -6px 12px rgba(30,10,70,.55),0 10px 26px -10px rgba(115,96,242,.85)}
.foot .vbs img{filter:drop-shadow(0 1px 2px rgba(40,10,90,.75))}
.foot .tts{background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.34) 0%,rgba(255,255,255,.08) 38%,rgba(255,255,255,0) 64%),#000;box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -6px 12px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.14),0 10px 26px -12px rgba(0,0,0,.85)}
.foot .soc[data-gpu]{background:transparent;box-shadow:none}
/* ДО ВАШ АДРЕС (owner 11.11; задача №1): изборът „До офис на Еконт“ / „До ваш адрес“ — два бутона един до друг (истински радио бутони — клавиатура
   и екранен четец работят сами), избраният — със златната рамка на полетата; панелите — същата решетка като формата */
.dk{border:0;margin:0;padding:0;min-width:0}
.dk legend{padding:0;font:600 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);text-shadow:0 1px 10px rgba(0,0,0,.7)}
.dkseg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.dkopt{position:relative;display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px 8px;border-radius:16px;text-align:center;font:600 14px/1.2 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink);background:rgba(9,11,15,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);cursor:pointer}
.dkopt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.dkopt:has(input:checked){box-shadow:inset 0 0 0 1.5px rgba(233,196,106,.85),0 0 18px -8px rgba(233,196,106,.7);color:#ffe3a8}
.dkopt:has(input:focus-visible){outline:2px solid rgba(233,196,106,.9);outline-offset:2px}
.dkp{display:grid;gap:12px}
.dkp[hidden]{display:none}
/* подсказките за адреса (owner 12.11: „не ги виждам“): собствен видим списък под полето вместо <datalist> на браузъра — бутоните са с размер за пръст (≥ 44 px) */
.sug{display:grid;gap:6px;margin-top:-4px;max-height:264px;overflow-y:auto;overscroll-behavior:contain}
.sug[hidden]{display:none}
.sugi{display:block;width:100%;min-height:44px;padding:11px 14px;border:0;border-radius:12px;text-align:left;font:500 15px/1.25 var(--sans);color:var(--ink);background:rgba(9,11,15,.72);box-shadow:inset 0 0 0 1px rgba(233,196,106,.35);cursor:pointer}
.sugi:active,.sugi:focus-visible{box-shadow:inset 0 0 0 1.5px rgba(233,196,106,.9);outline:0}
.sugn{margin:0;padding:8px 2px;color:var(--faint);font-size:13px}
/* „ДОСТАВИ С ЕКОНТ“ (ЗАДАЧА №3, 12.11; owner: „когато се натисне за Еконтомат да се появява тяхната карта и да може да се избира — за мобилна версия“):
   трите бутона (≥ 48 px); прозорецът на Еконт — модалният <dialog> по-долу (горният слой — над лентата, „Питай AI“ и тоста) */
.dkseg3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:8px}
.dkb{min-height:52px;padding:10px 6px;border:0;border-radius:16px;font:600 14px/1.2 var(--sans);color:var(--ink);background:rgba(9,11,15,.72);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer}
.dkb.on{box-shadow:inset 0 0 0 1.5px rgba(233,196,106,.85),0 0 18px -8px rgba(233,196,106,.7);color:#ffe3a8}
.dkb:focus-visible{outline:2px solid rgba(233,196,106,.9);outline-offset:2px}
.dkb:disabled{opacity:.45;cursor:not-allowed}
.ekres:empty{display:none}
.ekres{display:grid;gap:4px;margin-top:10px;padding:12px 14px;border-radius:14px;background:rgba(9,11,15,.72);box-shadow:inset 0 0 0 1px rgba(233,196,106,.45);font:500 14px/1.4 var(--sans)}
.ekres p{margin:0}
/* owner 12.11 нощ: „стабилно на цял екран … единствено Еконт“ ⇒ модален <dialog> (горният слой) с inset:0 — НЕ 100vw/100dvh (мерено: 411 × 791 при видимо
   425 × 818 ⇒ ивици от сайта); плътен фон и отзад (::backdrop); скролът от рамката спира в диалога (overflow:hidden + overscroll-behavior:none —
   ⌂ corpus/mozilla_20261112T0100/…Properties_overscroll-behavior.txt:351-352); без pull-to-refresh и „отскок“ на страницата (⌂ corpus/google_20261112T0230/
   developer.chrome.com_blog_overscroll-behavior.txt — „Disabling pull-to-refresh“) */
html.ek-open{overflow:hidden;overscroll-behavior:none}
dialog.ekov{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;display:none;flex-direction:column;overflow:hidden;overscroll-behavior:none;background:var(--bg);color:var(--ink)}
dialog.ekov[open]{display:flex}
dialog.ekov::backdrop{background:var(--bg)}
.ekh{display:flex;align-items:center;gap:10px;padding:8px 12px;padding-top:max(8px,env(safe-area-inset-top))}
.ekh b{flex:1;min-width:0;font:600 16px/1.25 var(--sans);color:var(--ink)}
/* „Затвори“ — стъклото с ЧЕРВЕНИТЕ кристали (owner): .add[data-glass] → btn_glass.js вид gold, сцената img/glass_scene.webp — като „В количката“ */
.ekov .ekx{flex:none;min-height:44px;margin:0;padding:0 20px;font-size:13.5px;cursor:pointer}
.ekov .ekx:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ekmsg{margin:0 12px 8px;padding:10px 12px;border-radius:12px;background:rgba(255,77,64,.18);color:#ffb8b0;font:500 14px/1.35 var(--sans)}
.ekmsg[hidden]{display:none}
.ekbody{position:relative;flex:1;min-height:0}
.ekload{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:var(--faint);font:500 15px/1.3 var(--sans)}
.ekf{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.ekf.wait{visibility:hidden}
/* c83s (owner 12.11: „това, което пише „картата не се отваря“, да е по-малко и практично — стъкло с лилавите кристали“; „когато изкочи клавиатурата, да се скрива“): малък стъклен бутон (36 px, шрифт 13 px, кратък текст) — btn_glass.js вид violet върху img/glass_violet.webp;
   без WebGPU остава същата текстура като CSS фон; в прозореца на Еконт и в количката/акаунта (.ekfb-in). Клавиатурата свива изгледа (interactive-widget=resizes-content) и той става „пейзажен“ (≈ 412 × 320 px — orientation:portrait НЕ важи): изглед до 520 px височина и до 600 px ширина = телефон с клавиатура ⇒ бутонът се скрива; телефон в пейзаж (ширина над 600 px) го запазва */
.ekfb{flex:none;align-self:center;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;min-height:36px;margin:6px auto calc(6px + env(safe-area-inset-bottom));padding:0 16px;border:0;border-radius:12px;font:600 13px/1.2 var(--sans);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 10px rgba(0,0,0,.45);background:url(img/glass_violet.webp) center/cover;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);cursor:pointer}
.ekfb[data-gpu]{background:transparent;box-shadow:none}
.ekfb:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ekfb-in{display:flex;width:max-content;max-width:100%;margin:10px auto 0}
@media (max-height:520px) and (max-width:600px){.ekfb{display:none}}
@media (min-width:900px){dialog.ekov{inset:6vh 10vw;width:auto;height:auto;border-radius:18px}}
/* owner 12.11 нощ: „стабилно на цял екран … да не прескача … при скрол да не се показват други части от сайта“ — КОРЕНЪТ (мерено в кадъра c71s, 411 × 791):
   стъкленото платно на бутоните .bgl излиза 28 px извън бутона ⇒ страницата става 425 широка (scrollWidth 425 > 411) ⇒ телефонът разширява изгледа до
   425 × 818 и всичко на цял екран (и прозорецът на Еконт) е по-голямо от екрана и се мести с пръст. overflow-x: clip реже излизащото БЕЗ да прави
   скролиращ контейнер и без програмен скрол (⌂ corpus/mozilla_20261112T0100/developer.mozilla.org_en-US_docs_Web_CSS_Reference_Properties_overflow.txt:316-317);
   само до 700 px (над тях колоната е 560 px в средата и нищо не стига ръба на екрана — @media по-горе) */
@media (max-width:699.98px){#view,.foot{overflow-x:clip}}
/* owner 12.11 нощ (+ трите текстури и логото на Еконт): „до офис на Еконт — бяло стъкло, до адрес — зелено, до Еконтомат — червено; над тях логото на Еконт —
   в нашето стъкло“ ⇒ btn_glass.js (видове ekwhite / ekgreen / ekred / econt); без WebGPU — самите текстури като фон; изборът — златна рамка (outline) */
.eklogo{position:relative;isolation:isolate;display:grid;place-items:center;height:64px;margin:10px 0 2px;border-radius:16px;background:linear-gradient(170deg,rgba(255,255,255,.18),rgba(0,0,0,.12)),#243f82;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 10px 30px -14px rgba(0,0,0,.8)}
.eklogo img{position:relative;z-index:1;display:block;width:auto;height:30px;max-width:70%}
.dkb,.dkopt{position:relative;isolation:isolate}
.dkb[data-ek="office"],.dkopt[data-dk="office"],.dkb.on[data-ek="office"],.dkopt[data-dk="office"]:has(input:checked){background:url(img/glass_ekwhite.webp) center/cover;color:#15171c;text-shadow:0 1px 1px rgba(255,255,255,.55)}
.dkb[data-ek="address"],.dkopt[data-dk="address"],.dkb.on[data-ek="address"],.dkopt[data-dk="address"]:has(input:checked){background:url(img/glass_ekgreen.webp) center/cover;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.dkb[data-ek="aps"],.dkb.on[data-ek="aps"]{background:url(img/glass_ekred.webp) center/cover;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.eklogo[data-gpu],.dkb[data-gpu],.dkopt[data-gpu]{background:transparent;box-shadow:none}
.dkb.on,.dkopt:has(input:checked){outline:2px solid var(--gold);outline-offset:3px}