/* ===== FEIFER HALA — plná dark industrial homepage ===== */ * { box-sizing:border-box; margin:0; padding:0; } :root { --red:#ee1d25; --red-600:#c8141b; --red-50:#2a1314; --rad-xs:6px; --rad-sm:9px; --rad-md:12px; --rad-lg:16px; --rad-xl:22px; --ink:#16171c; --char:#1d1f25; --char-2:#23252c; --char-3:#2a2d35; --line:#33363f; --line-2:#2a2d34; --mut:#9aa1ad; --faint:#6b7280; --ok:#27b169; --mono:"Exo",system-ui,sans-serif; --exo:"Exo",system-ui,sans-serif; --maxw:1440px; --gutter:clamp(16px, 4vw, 48px); } /* Široké monitory (2K+): rozšířit obsah, ať po stranách nezbývá tolik prázdna. Pod 2000px (vč. FHD 1920 i MacBooků) zůstává 1440 beze změny. */ /* --maxw zůstává 1440px i na velkých (2K+) monitorech — obsah se dál neroztahuje, takže velký monitor vypadá jako ~1440px (Mac) místo rozprostřeného 1660/1840px. Menší monitory (≤1440px) beze změny → žádná regrese. */ html { scroll-behavior:smooth; } body { background:var(--char); font-family:var(--exo); -webkit-font-smoothing:antialiased; } a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; } button { font-family:inherit; cursor:pointer; border:none; background:none; } h1,h2,h3,h4 { letter-spacing:-.01em; } .wrap { max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); } .A { background:var(--char); color:#fff; font-family:var(--exo); overflow-x:clip; } /* shared buttons */ .A__btn { display:inline-flex; align-items:center; gap:10px; height:54px; padding:0 26px; font-weight:700; font-size:15px; text-transform:uppercase; letter-spacing:.03em; transition:.15s; } .A__btn--r { background:var(--red); color:#fff; clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px); } .A__btn--r:hover { background:var(--red-600); } .A__btn--g { border:1px solid var(--line); color:#fff; } .A__btn--g:hover { border-color:#fff; } .A__btn--ghost { border:1px solid rgba(255,255,255,.3); color:#fff; } .A__btn--ghost:hover { background:rgba(255,255,255,.08); } /* UTIL */ .A__util { background:#000; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--mut); border-bottom:1px solid var(--line); } .A__util .wrap { display:flex; align-items:center; justify-content:space-between; min-height:34px; gap:12px; } .A__util b { color:var(--red); font-weight:600; } .A__utilr { display:inline-flex; align-items:center; gap:16px; flex-shrink:0; } /* HEADER */ .A__hdr { position:sticky; top:0; z-index:60; background:var(--char); border-bottom:1px solid var(--line); transition:box-shadow .2s; } .A__hdr.scrolled { box-shadow:0 14px 30px -16px rgba(0,0,0,.6); } body.light .A__hdr.scrolled { box-shadow:0 14px 30px -16px rgba(22,23,28,.22); } .A__hdrin { display:flex; align-items:center; gap:28px; height:80px; } .A__logo { height:40px; width:auto; display:block; } body.light .A__logo { height:44px; } .A__search { flex:1; display:flex; height:48px; border:1px solid var(--line); max-width:540px; background:var(--char-2); transition:border-color .15s, box-shadow .15s; position:relative; } .A__search:focus-within { border-color:var(--red); box-shadow:0 0 0 3px rgba(238,29,37,.16); } .A__search input { flex:1; border:none; outline:none; padding:0 16px; font-family:var(--exo); font-size:15px; background:transparent; color:#fff; } .A__search input::placeholder { color:var(--faint); } .A__search > button { background:var(--red); color:#fff; border:none; padding:0 20px; font-weight:700; font-size:14px; display:inline-flex; align-items:center; gap:8px; transition:.15s; } .A__search > button:hover { background:var(--red-600); } /* ===== SMART SEARCH dropdown ===== */ .sres { position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:90; background:var(--char-2); border:1px solid var(--line); box-shadow:0 28px 56px -22px rgba(0,0,0,.7); max-height:74vh; overflow-y:auto; display:none; } .sres.show { display:block; } body.light .sres { background:#fff; box-shadow:0 28px 56px -22px rgba(22,23,28,.28); } .sres__g { border-bottom:1px solid var(--line); padding:8px 0; } .sres__g:last-of-type { border-bottom:none; } .sres__lbl { font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); padding:6px 16px; } .sres__p, .sres__r { display:flex; align-items:center; gap:12px; padding:9px 16px; } .sres__p:hover, .sres__r:hover { background:var(--char-3); } body.light .sres__p:hover, body.light .sres__r:hover { background:#f4f5f7; } .sres__img { width:42px; height:42px; flex-shrink:0; background:#fff; border:1px solid var(--line); display:grid; place-items:center; overflow:hidden; } .sres__img img { width:100%; height:100%; object-fit:contain; padding:4px; } .sres__ic { width:34px; height:34px; flex-shrink:0; display:grid; place-items:center; color:var(--red); border:1px solid var(--line); } .sres__ic svg, .sres__arr svg { width:16px; height:16px; } .sres__tx { display:flex; flex-direction:column; min-width:0; flex:1; } .sres__tx b { font-size:14px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } body.light .sres__tx b { color:var(--ink); } .sres__tx span { font-family:var(--mono); font-size:11px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sres mark { background:transparent; color:#fff; font-weight:800; padding:0; } body.light .sres mark { color:var(--ink); background:transparent; } .sres__arr { color:var(--faint); flex-shrink:0; } .sres__all { display:block; padding:13px 16px; font-weight:700; font-size:13px; color:var(--red); background:var(--char); text-align:center; } body.light .sres__all { background:#f7f8fa; } .sres__all:hover { background:var(--red); color:#fff; } .sres__empty { padding:34px 20px; text-align:center; color:var(--mut); } .sres__empty svg { width:30px; height:30px; color:var(--faint); margin-bottom:12px; } .sres__empty b { color:#fff; } body.light .sres__empty b { color:var(--ink); } .sres__empty span { display:block; font-size:13px; color:var(--faint); margin-top:8px; } .sres__chips { display:flex; flex-wrap:wrap; gap:8px; padding:8px 16px 12px; } .sres__chip { font-size:13px; font-weight:600; color:#2b2e36; background:#fff; border:1px solid var(--line); padding:7px 12px; cursor:pointer; transition:.12s; font-family:var(--exo); border-radius:999px; } body:not(.light) .sres__chip { color:#cfd3da; background:var(--char); } .sres__chip:hover { border-color:var(--red); color:var(--red); } .sres__sg { width:100%; display:flex; align-items:center; gap:11px; padding:10px 16px; background:var(--char-2); border:none; border-top:1px solid var(--line); cursor:pointer; font-family:var(--exo); font-size:14px; font-weight:600; color:var(--mut); text-align:left; } .sres__sg:first-child { border-top:none; } body.light .sres__sg { background:#fff; color:#2b2e36; border-top-color:#eef0f3; } .sres__sg svg { width:15px; height:15px; color:var(--faint); flex-shrink:0; } .sres__sg:hover { background:var(--char-3); color:#fff; } body.light .sres__sg:hover { background:#f4f5f7; color:var(--ink); } .sres__sg mark { background:transparent !important; color:inherit; font-weight:800; padding:0; } /* mobile search dropdown */ .A__mnav__search .sres { top:calc(100% + 6px); } .A__navr { margin-left:auto; display:flex; align-items:center; gap:12px; } .A__icn { width:46px; height:46px; border:1px solid var(--line); display:grid; place-items:center; color:#cfd3da; position:relative; cursor:pointer; transition:.15s; } .A__icn:hover { border-color:#fff; color:#fff; } .A__cartbtn { display:inline-flex; align-items:center; gap:10px; height:46px; padding:0 16px; width:148px; justify-content:center; border:1px solid var(--line); color:#fff; position:relative; transition:.15s; box-sizing:border-box; } .A__cartbtn:hover { border-color:var(--red); } .A__cartbtn b { font-weight:700; font-size:13px; } .cnt { position:absolute; top:-7px; right:-7px; min-width:18px; height:18px; background:var(--red); color:#fff; border-radius:9px; font-family:var(--mono); font-size:9px; display:grid; place-items:center; padding:0 4px; border:2px solid var(--char); } .A__cta { display:inline-flex; align-items:center; justify-content:center; gap:9px; height:46px; padding:0 20px; min-width:144px; background:var(--red); color:#fff; font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.03em; clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); transition:.15s; } .A__cta:hover { background:var(--red-600); } /* NAV */ .A__nav { border-top:1px solid var(--line-2); position:relative; } .A__navin { display:flex; align-items:center; gap:2px; height:52px; } .A__navitem { position:static; } .A__navlink { padding:0 16px; height:52px; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; font-weight:600; font-size:14.5px; color:#cfd3da; border:none; background:none; cursor:pointer; font-family:var(--exo); border-bottom:2px solid transparent; margin-bottom:-1px; transition:.15s; } .A__navlink:hover { color:#fff; } .A__chev { transition:transform .2s; } .A__navitem.open .A__navlink { color:#fff; } .A__navitem.open .A__chev { transform:rotate(180deg); color:var(--red); } .A__navsp { flex:1; } .A__navsale { color:var(--red); font-weight:700; padding:0 16px; height:52px; display:inline-flex; align-items:center; } .A__navsale:hover { color:var(--red-600); } /* nav auth buttons (login / B2B register) — skryté dokud není zavřena B2B lišta */ .A__navauth { display:none; align-items:center; gap:12px; margin-left:14px; } body.b2b-dismissed .A__navauth { display:inline-flex; } .A__navlogin { display:inline-flex; align-items:center; justify-content:center; gap:7px; height:34px; padding:0 14px; min-width:148px; box-sizing:border-box; border:1px solid var(--line); color:#fff; font-weight:600; font-size:13px; cursor:pointer; background:transparent; font-family:var(--exo); transition:.15s; } .A__navlogin:hover { border-color:#fff; } body.light .A__navlogin { color:var(--ink); } body.light .A__navlogin:hover { border-color:var(--ink); } .A__navlogin svg { color:currentColor; } .A__navreg { border-radius:var(--rad-sm); display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 15px; background:var(--red); color:#fff; font-weight:700; font-size:13px; cursor:pointer; border:none; font-family:var(--exo); clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); transition:.15s; } .A__navreg:hover { background:var(--red-600); } /* účet po přihlášení */ body.is-auth .A__navauth { display:inline-flex; } .A__navacct { display:inline-flex; align-items:center; gap:0; height:40px; width:304px; border:1px solid var(--line); color:#fff; text-decoration:none; transition:.15s; overflow:hidden; } .A__navacct__main { display:flex; align-items:center; gap:11px; flex:1; min-width:0; height:100%; padding:0 16px; color:inherit; text-decoration:none; } .A__navacct__main:hover { background:rgba(238,29,37,.08); } .A__navacct__out { width:46px; height:100%; flex-shrink:0; display:grid; place-items:center; border:none; border-left:1px solid var(--line); background:none; color:var(--red); cursor:pointer; transition:.15s; } .A__navacct__out:hover { background:var(--red); color:#fff; } .A__navacct:hover { border-color:var(--red); } .A__navacct__ic { width:30px; height:30px; flex-shrink:0; border-radius:50%; background:var(--red); color:#fff; display:grid; place-items:center; } body.light .A__navacct__main { color:var(--ink); } .A__navacct__tx { display:flex; flex-direction:column; line-height:1.15; } .A__navacct__tx b { font-size:13.5px; font-weight:700; } .A__navacct__arw { margin-left:auto; color:var(--red); display:grid; place-items:center; } .A__navacct__tx span { font-family:var(--mono); font-size:10px; color:var(--red); } body.light .A__navacct { color:var(--ink); } /* Produkty — červené tlačítko ve stylu „Všechny kategorie" */ .A__navlink--cat { background:var(--red); color:#fff !important; height:36px; padding:0 16px; margin-right:10px; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.03em; border-bottom:none; margin-bottom:0; } .A__navlink--cat svg { stroke:#fff; } .A__navlink--cat:hover { background:var(--red-600); color:#fff !important; } .A__navitem.open .A__navlink--cat { background:var(--red-600); color:#fff !important; border-bottom:none; } .A__caticon { flex-shrink:0; } /* MEGA panels */ .A__mega { position:absolute; left:0; right:0; top:100%; z-index:80; background:var(--char-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); box-shadow:0 28px 50px -24px rgba(0,0,0,.6); display:none; } /* BUG-1594: výšku otevřeného panelu nastaví hala.js podle místa pod hlavičkou; obsah se roluje uvnitř a kolečko se nepřelévá na stránku. */ .A__mega.open { display:block; animation:megaIn .18s ease; overflow-y:auto; overscroll-behavior:contain; } @keyframes megaIn { from { transform:translateY(-6px); } to { transform:none; } } .A__mega__in { max-width:var(--maxw); margin:0 auto; padding:26px var(--gutter); } .A__mega__eyebrow { font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--faint); text-transform:uppercase; margin-bottom:16px; } /* Produkty mega */ .A__pm { display:grid; grid-template-columns:240px 1fr; gap:0; } .A__pm__rail { border-right:1px solid var(--line); padding-right:18px; } .A__pm__rail a { display:flex; align-items:center; justify-content:space-between; padding:11px 14px; font-size:14.5px; font-weight:600; color:#cfd3da; border-left:2px solid transparent; cursor:pointer; transition:.12s; } .A__pm__rail a .ch { color:var(--faint); } .A__pm__rail a:hover, .A__pm__rail a.on { background:var(--char-3); color:#fff; border-left-color:var(--red); } .A__pm__rail a.on { color:var(--red); } .A__pm__mid { padding:0 26px; } .A__pm__subs { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px 14px; } .A__pm__sub { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid transparent; border-left:2px solid transparent; background:rgba(255,255,255,.02); transition:.14s; } body.light .A__pm__sub { background:rgba(0,0,0,.02); } .A__pm__sub__tx { flex:1; min-width:0; } .A__pm__sub b { display:block; font-weight:700; font-size:14.5px; color:#fff; transition:.12s; } .A__pm__sub:hover { background:rgba(238,29,37,.08); border-color:rgba(238,29,37,.2); border-left-color:var(--red); } .A__pm__sub:hover b { color:var(--red); } .A__pm__sub span { display:block; font-size:12px; color:var(--mut); margin-top:3px; line-height:1.4; } .A__pm__sub__arw { color:var(--red); flex-shrink:0; opacity:0; transform:translateX(-4px); transition:.14s; } .A__pm__sub:hover .A__pm__sub__arw { opacity:1; transform:none; } /* ⛔ 2026-09-22 — obrázek podkategorie v menu „Produkty" bez rámečku a větší (FEIFER 18. 9.; dřív inline styl v hala.js: bílé pozadí, padding, rámeček, 40 px). Stejně jako už opravené dlaždice v katalogu (.subtile__img, c708f71). `multiply` ve světlém režimu nechá bílé pozadí fotky splynout s dlaždicí. */ .A__pm__sub__img { width:64px; height:64px; flex:0 0 auto; object-fit:contain; box-sizing:border-box; } body.light .A__pm__sub__img { mix-blend-mode:multiply; } .A__pm__foot { display:flex; align-items:center; gap:26px; border-top:1px solid var(--line); margin-top:22px; padding-top:18px; } .A__pm__all { font-weight:700; font-size:14px; color:var(--red); display:inline-flex; align-items:center; gap:8px; } .A__pm__foot .sp { flex:1; } .A__pm__link { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--mut); } .A__pm__link:hover { color:#fff; } .A__pm__link--sale { color:var(--red); } .A__pm__link--sale:hover { color:var(--red-600); } .A__pm__link svg { color:var(--red); } /* O firmě mega */ .A__fm { display:grid; grid-template-columns:360px 1fr 340px; gap:30px; } .A__fm__links { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; } .A__fm__links a { padding:11px 12px; margin:1px 0; border-radius:var(--rad-sm); font-size:14.5px; font-weight:600; color:#cfd3da; transition:.12s; } .A__fm__links a:hover { color:var(--red); background:rgba(238,29,37,.07); } .A__fm__mid { border-left:1px solid var(--line); border-right:1px solid var(--line); padding:0 30px; } .A__fm__mid p { font-size:15px; color:var(--mut); line-height:1.6; margin-top:4px; max-width:42ch; } .A__fm__stats { display:flex; gap:30px; margin-top:22px; padding-top:20px; border-top:1px solid var(--line); } .A__fm__stats b { display:block; font-size:30px; font-weight:800; color:#fff; font-style:italic; } .A__fm__stats b i { color:var(--red); font-style:italic; } .A__fm__stats span { font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--faint); text-transform:uppercase; margin-top:4px; display:block; } .A__fm__feat { position:relative; border:1px solid var(--line); overflow:hidden; min-height:220px; display:flex; flex-direction:column; justify-content:flex-end; background:#23252b; } .A__fm__featbp { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:26px 26px; } .A__fm__feat img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .A__fm__feat .cap { position:relative; background:linear-gradient(transparent,rgba(22,23,28,.86)); padding:40px 18px 16px; color:#fff; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; } /* light overrides for nav + mega */ body.light .A__navlink { color:#3a3d46; } body.light .A__navlink:hover { color:var(--ink); } body.light .A__navitem.open .A__navlink { color:var(--ink); } body.light .A__mega { background:#fff; box-shadow:0 28px 50px -24px rgba(22,23,28,.22); } body.light .A__pm__rail a, body.light .A__pm__sub b, body.light .A__fm__links a, body.light .A__fm__stats b { color:var(--ink); } body.light .A__pm__rail a:hover, body.light .A__pm__rail a.on { background:var(--char-2); } body.light .A__pm__rail a.on { color:var(--red); } body.light .A__pm__link:hover { color:var(--ink); } body.light .A__fm__feat { background:#e9ebee; } /* B2B bar */ .A__b2b { background:var(--red-50); border-bottom:1px solid #3a201c; } .A__b2bin { display:flex; align-items:center; gap:14px; height:48px; } .A__b2bic { color:var(--red); display:grid; place-items:center; } .A__b2btx { font-size:13.5px; color:#e7c7c2; } .A__b2btx b { color:#fff; } .A__b2bsp { flex:1; } .A__b2bbtn { display:inline-flex; align-items:center; height:34px; padding:0 16px; background:var(--red); color:#fff; font-weight:700; font-size:13px; } .A__b2bbtn:hover { background:var(--red-600); } .A__b2breg { font-weight:700; font-size:13px; color:#fff; } .A__b2breg:hover { color:var(--red); } .A__b2bx { display:grid; place-items:center; width:30px; height:30px; margin-left:6px; color:#e7c7c2; border:1px solid transparent; transition:.15s; flex-shrink:0; } .A__b2bx:hover { color:#fff; border-color:rgba(255,255,255,.25); } .A__b2b.is-hidden { display:none; } /* HERO 3 PROMO BLOCKS */ .A__promo3 { position:relative; display:grid; grid-template-columns:1.9fr 1fr; gap:16px; } .A__promo3__r { display:grid; grid-template-rows:1fr 1fr; gap:16px; } .A__pb { position:relative; overflow:hidden; border:1px solid var(--line); display:flex; flex-direction:column; justify-content:flex-end; transition:.2s; text-decoration:none; } .A__pb:hover { border-color:#52565f; } .A__pb__bp { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:44px 44px; -webkit-mask-image:radial-gradient(125% 130% at 100% 0%, #000 32%, transparent 80%); mask-image:radial-gradient(125% 130% at 100% 0%, #000 32%, transparent 80%); } .A__pb__hatch { position:absolute; inset:0; background:radial-gradient(70% 90% at 92% 8%, rgba(238,29,37,.4), rgba(238,29,37,.08) 45%, transparent 72%); } .A__pb__c { position:relative; z-index:2; } .A__pb__tag { display:inline-flex; align-items:center; gap:8px; align-self:flex-start; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; padding:6px 11px; } .A__pb__cta { display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.03em; padding:11px 18px; transition:.15s; } /* big block */ .A__pbig { min-height:220px; background:#0f1014; padding:18px 28px; } .A__pbig .A__pb__tag { background:var(--red); color:#fff; } .A__pbig h2 { position:relative; z-index:2; color:#fff; font-size:38px; line-height:1.02; font-weight:900; text-transform:uppercase; letter-spacing:-.02em; margin-top:8px; max-width:13ch; } .A__pbig h2 em { color:var(--red); font-style:normal; } .A__pbig p { position:relative; z-index:2; color:#d4d7dd; font-size:14px; line-height:1.42; margin-top:8px; max-width:40ch; text-shadow:0 1px 8px rgba(0,0,0,.6); } .A__pbig__img { position:absolute; right:24px; bottom:24px; top:24px; width:44%; max-width:420px; height:calc(100% - 48px); object-fit:contain; object-position:right bottom; z-index:1; filter:drop-shadow(0 24px 36px rgba(0,0,0,.55)); } .A__pbig .A__pb__cta { background:#fff; color:var(--ink); margin-top:12px; align-self:flex-start; height:44px; padding:0 20px; border-radius:var(--rad-sm); } .A__pbig .A__pb__cta:hover { background:var(--red); color:#fff; } /* small blocks */ .A__psm { min-height:auto; padding:14px 20px; justify-content:center; } .A__psm--red { background:linear-gradient(125deg,#b81017,#e3201a); } .A__psm--dark { background:#0f1014; } .A__psm--dark::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(75% 95% at 95% 6%, rgba(238,29,37,.5), rgba(238,29,37,.12) 42%, transparent 70%); z-index:0; } .A__psm__img { position:absolute; right:10px; top:50%; transform:translateY(-50%); width:160px; height:auto; max-height:88%; object-fit:contain; object-position:center; z-index:1; filter:drop-shadow(0 12px 18px rgba(0,0,0,.45)); } .A__psm .A__pb__tag { background:rgba(255,255,255,.16); color:#fff; margin-bottom:8px; } .A__psm h3 { position:relative; z-index:2; color:#fff; font-size:21px; font-weight:800; text-transform:uppercase; line-height:1.14; max-width:14ch; } .A__psm .A__pb__cta { color:#fff; padding:0; margin-top:10px; align-self:flex-start; gap:7px; } .A__psm .A__pb__cta:hover { gap:11px; } /* TRUST STRIP (above categories) */ .A__tstrip { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-bottom:none; background:#0f1014; margin-top:18px; position:relative; overflow:hidden; } .A__tstrip::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:44px 44px; -webkit-mask-image:radial-gradient(120% 160% at 100% 0%, #000 32%, transparent 80%); mask-image:radial-gradient(120% 160% at 100% 0%, #000 32%, transparent 80%); } .A__tstrip::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(70% 90% at 92% 8%, rgba(238,29,37,.4), rgba(238,29,37,.08) 45%, transparent 72%); } .A__tstrip .it { position:relative; z-index:1; display:flex; flex-direction:column; gap:6px; padding:22px 26px; border-left:1px solid rgba(255,255,255,.1); } .A__tstrip .it:first-child { border-left:none; } .A__tstrip .it b { font-size:34px; font-weight:900; font-style:italic; color:#fff; line-height:1; letter-spacing:-.01em; } .A__tstrip .it b i { color:var(--red); font-style:italic; } .A__tstrip .it span { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#fff; } .A__tstrip .it span em { display:block; font-family:var(--mono); font-size:11px; font-weight:500; font-style:normal; text-transform:none; letter-spacing:.01em; color:#c7cbd2; margin-top:4px; } /* CATEGORY TILES — horizontální scroll-strip s peek (P1), název vlevo nahoře */ .A__ctiles { display:grid; grid-auto-flow:row; grid-template-columns:repeat(4,1fr); gap:14px; padding:6px 2px; margin:-6px -2px 0; } .A__cnav--ct { display:none !important; } .A__ctiles::-webkit-scrollbar { display:none; } .A__ctiles > * { scroll-snap-align:start; } .A__ctnavr { display:flex; align-items:center; gap:16px; } .A__ct { display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); background:var(--char-2); text-decoration:none; transition:border-color .2s, transform .2s; } body.light .A__ct { background:#fff; } .A__ct:hover { border-color:var(--red); transform:translateY(-4px); } .A__ct__hd { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:9px 14px 5px; } .A__ct__img { position:relative; height:104px; background:radial-gradient(circle at 50% 42%, rgba(255,255,255,.06), transparent 68%); display:grid; place-items:center; overflow:hidden; margin:0 12px 8px; border-radius:6px; } .A__ct__img img { position:absolute; left:2%; top:2%; width:96%; height:96%; object-fit:contain; object-position:top right; filter:drop-shadow(0 14px 22px rgba(0,0,0,.55)); transition:transform .35s ease; } .A__ct:hover .A__ct__img img { transform:scale(1.07); } .A__ct__ix { position:absolute; top:20px; left:20px; font-family:var(--mono); font-size:11px; font-weight:600; color:var(--red); z-index:2; } .A__ct__t { font-size:13.5px; font-weight:800; text-transform:uppercase; letter-spacing:.01em; color:#fff; line-height:1.18; } body.light .A__ct__t { color:var(--ink); } body.light .A__ct__img { background:#fff; } body.light .A__ct__img img { filter:none; } .A__ct:hover .A__ct__t { color:var(--red); } .A__ct__n { font-family:var(--mono); font-size:11px; color:var(--faint); white-space:nowrap; display:inline-flex; align-items:center; gap:6px; margin-top:1px; } .A__ct__n svg { width:14px; height:14px; color:var(--red); opacity:0; transform:translateX(-4px); transition:.2s; } .A__ct:hover .A__ct__n svg { opacity:1; transform:none; } /* HERO SLIDER */ .A__heroSlider { position:relative; } .A__slides { position:relative; } .A__slides .A__slide { position:absolute; left:0; right:0; top:0; opacity:0; visibility:hidden; transition:opacity .5s ease; pointer-events:none; } .A__slides .A__slide.is-active { position:relative; opacity:1; visibility:visible; pointer-events:auto; } .A__heroNav { display:flex; gap:10px; margin-top:30px; } .A__heroBar { flex:0 0 64px; height:4px; background:transparent; border:none; padding:0; cursor:pointer; position:relative; } .A__heroBar i { position:absolute; inset:0; background:var(--line); display:block; overflow:hidden; } .A__heroBar i::after { content:""; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--red); } .A__heroBar.is-active i::after { animation:heroFill 6s linear forwards; } .A__heroBar:hover i { background:#52565f; } @keyframes heroFill { from { width:0; } to { width:100%; } } @media (prefers-reduced-motion:reduce){ .A__heroBar.is-active i::after { animation:none; width:100%; } } body.light .A__heroBar i { background:#d0d2d6; } /* HERO */ .A__hero { position:relative; padding:10px 0 0; overflow:hidden; } .A__grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:44px 44px; mask-image:radial-gradient(120% 90% at 30% 20%,#000 40%,transparent 85%); } .A__heroIn { position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:30px; align-items:center; } .A__tagrow { display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:12px; color:var(--mut); letter-spacing:.08em; text-transform:uppercase; } .A__tagrow .dot { width:7px; height:7px; background:var(--red); border-radius:50%; } .A__h1 { font-size:88px; line-height:.92; font-weight:900; text-transform:uppercase; letter-spacing:-.02em; margin:22px 0 0; } .A__h1 em { color:var(--red); font-style:normal; } .A__h1 .out { -webkit-text-stroke:2px #4a4e58; color:transparent; } .A__lead { color:var(--mut); font-size:17px; max-width:46ch; margin:26px 0 0; line-height:1.5; } .A__btns { display:flex; gap:14px; margin:32px 0 0; } .A__data { display:flex; margin:46px 0 0; border-top:1px solid var(--line); } .A__d { flex:1; padding:18px 0; border-right:1px solid var(--line); } .A__d:last-child { border-right:none; } .A__d b { display:block; font-size:30px; font-weight:800; } .A__d b i { color:var(--red); font-style:normal; } .A__d span { font-family:var(--mono); font-size:11px; color:var(--mut); text-transform:uppercase; letter-spacing:.06em; } .A__heroImg { position:relative; aspect-ratio:1/1; display:grid; place-items:center; } .A__heroImg::before { content:""; position:absolute; inset:8%; background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.08),transparent 62%); } .A__heroImg img { position:relative; width:80%; height:80%; object-fit:contain; filter:drop-shadow(0 30px 50px rgba(0,0,0,.5)); } .A__heroImg .badge { position:absolute; top:8%; right:4%; background:var(--red); color:#fff; font-family:var(--mono); font-size:12px; font-weight:600; padding:8px 12px; z-index:2; } /* MODS */ .A__mods { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:56px; } .A__mod { padding:26px 28px; border-right:1px solid var(--line); position:relative; transition:.2s; } .A__mod:last-child { border-right:none; } .A__mod:hover { background:var(--char-2); } .A__mod .num { font-family:var(--mono); font-size:11px; color:var(--red); } .A__mod h3 { font-size:20px; font-weight:700; text-transform:uppercase; margin-top:38px; } .A__mod p { color:var(--mut); font-size:13px; margin-top:6px; } .A__mod .arw { position:absolute; top:24px; right:24px; color:var(--faint); transition:.2s; } .A__mod:hover .arw { color:var(--red); transform:translate(2px,-2px); } /* SECTION */ .A__sec { padding:58px 0; } .A__sec--tight { padding:44px 0; } .A__sechead { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:30px; } .A__sechl { display:flex; flex-direction:column; gap:8px; } .A__eyebrow { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* sr-only: skryté vizuálně, v DOM pro SEO (#11) */ .A__sechead h2 { font-size:20px; font-weight:800; text-transform:uppercase; letter-spacing:-.01em; } .A__all2 { font-weight:700; font-size:14px; border-bottom:2px solid #fff; padding-bottom:3px; } .A__all2:hover { color:var(--red); border-color:var(--red); } .A__cnav { display:flex; gap:8px; } .A__cbtn { width:42px; height:42px; border-radius:50%; border:1px solid var(--line); color:#fff; display:grid; place-items:center; transition:.15s; } .A__cbtn:hover { border-color:var(--red); background:var(--red); } .A__cbtn:disabled { opacity:.3; cursor:default; } .A__cbtn:disabled:hover { background:transparent; border-color:var(--line); } /* CAROUSEL */ .A__track { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 4 * 18px) / 5); gap:18px; overflow-x:auto; overflow-y:visible; scroll-snap-type:x mandatory; scrollbar-width:none; padding:16px 2px 22px; margin:-16px -2px -18px; } .A__track::-webkit-scrollbar { display:none; } .A__track > * { scroll-snap-align:start; } /* PRODUCT CARD (dark) */ .pc { background:var(--char-2); border:1px solid var(--line); display:flex; flex-direction:column; transition:.18s; } .pc:hover { border-color:#52565f; transform:translateY(-3px); } /* ⛔ Fotky výrobků jsou NEPRŮHLEDNÉ obdélníky se zapečeným bílým pozadím (ověřeno 27. 8. 2026: okraje čistě rgb(255,255,255)). `drop-shadow` se počítá z neprůhlednosti, takže neobkresloval výrobek, ale HRANU FOTKY — každý produkt vypadal jako bílá dlaždice se šedým lemem položená na bílé kartě. A protože fotky mají různé poměry stran (naměřeno 1:1, 16:9, 3:2), sedělo to lemování pokaždé jinde a mřížka působila rozházeně. V řezu pod výrobkem bylo 164 šedých pixelů z 208; po opravě nula. `mix-blend-mode:multiply` navíc srovná fotky, které nemají bílou úplně přesnou (255) — u takové by se obdélník jinak objevil znovu. ⚠️ JEN ve světlém motivu: multiply na tmavém podkladu by výrobek utopil. Senzapack světlý režim nevynucuje (čte `feifer-theme` z localStorage), takže tmavá větev musí zůstat, jak byla. */ .pc__media { position:relative; aspect-ratio:1/1; background:radial-gradient(circle at 50% 42%, rgba(255,255,255,.07), transparent 70%); overflow:hidden; border-radius:var(--rad-lg) var(--rad-lg) 0 0; } .pc__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .pc__media.contain img { object-fit:contain; padding:20px; filter:drop-shadow(0 12px 18px rgba(0,0,0,.5)); } /* ⚠️ NE `var(--line-2)` — světlé hodnoty proměnných jsou scopované na `body.light .A`, ne na `body.light`. Karta produktu uvnitř `.A` NENÍ, takže by token spadl na tmavou hodnotu z `:root` (#2A2D34) a linka by byla černý vlas místo jemného oddělení. Ověřeno 27. 8. 2026. */ body.light .pc__media { background:#fff; border-bottom:1px solid #eeeff2; } body.light .pc__media.contain img { filter:none; mix-blend-mode:multiply; } .pc__badges { position:absolute; top:10px; left:10px; display:flex; flex-direction:column; gap:5px; align-items:flex-start; } .pbadge { font-size:10px; font-weight:800; padding:4px 8px; text-transform:uppercase; letter-spacing:.03em; line-height:1; color:#fff; font-family:var(--mono); } .pbadge--sale { background:var(--red); } .pbadge--new { background:var(--ink); } .pbadge--stock { background:var(--ok); } .pbadge--clearance { background:#f59e0b; color:#16171c; } .pbadge--custom { background:#16171c; box-shadow:inset 0 0 0 1px var(--red); } .det__badges { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; } .det__badges .pbadge { font-size:11px; padding:5px 9px; } /* ř. 70 (29. 9. 2026) — štítky na detailu vlevo nahoře na fotce (srdíčko je vpravo). */ .det__main .det__badges--photo { position:absolute; z-index:2; top:14px; left:14px; flex-direction:column; align-items:flex-start; margin:0; max-width:calc(100% - 90px); } .pc__fav { position:absolute; top:8px; right:8px; width:34px; height:34px; background:rgba(22,23,28,.6); color:#fff; display:grid; place-items:center; transition:.15s; } .pc__fav:hover { background:var(--red); } .pc__fav.on { background:var(--red); } .pc__body { padding:14px 15px 16px; display:flex; flex-direction:column; flex:1; } .pc__code { font-family:var(--mono); font-size:11px; color:var(--faint); } .pc__name { font-size:14.5px; font-weight:600; line-height:1.3; margin:6px 0 8px; min-height:2.6em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:#fff; } .pc:hover .pc__name { color:var(--red); } .pc__spec { font-family:var(--mono); font-size:11px; color:var(--mut); margin-bottom:11px; line-height:1.4; } /* highlighty na kartě — stohované (každý na řádku), ne „ · " (klient 07-08) */ .pc__spec .pc__hl { display:block; } .pc__spec .pc__hl + .pc__hl { margin-top:2px; } .pc__stock { font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:6px; margin-bottom:12px; } .pc__stock--in { color:var(--ok); } .pc__stock--low { color:var(--ok); } /* „Méně než 10 ks" = skladem → zeleně jako „Skladem" (ř. 90, 5. 10. 2026) */ .pc__stock .d { width:7px; height:7px; border-radius:50%; background:currentColor; } /* Skladová dostupnost (logika klienta 5. 8. 2026) — šest stavů. Zelená jen pro skutečně skladové zboží; oranžová = dochází; ostatní neutrálně, ať karta nebudí dojem dostupnosti, kterou produkt nemá. */ .pc__stock--ext { color:var(--ink-2, #5b6470); } .pc__stock--wait { color:var(--ink-2, #5b6470); } .pc__stock--none { color:var(--mut, #8b93a1); } .pc__stock--lead { color:var(--ink-2, #5b6470); } .pc__price { margin-top:auto; } .priceRow { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; } .priceRow .old { font-size:21px; color:var(--faint); text-decoration:line-through; } /* BUG-1539: stejně velká jako .now */ .priceRow .now { font-size:21px; font-weight:800; color:#fff; } .priceRow .now.sale { color:var(--red); } .priceRow .vat { width:100%; font-size:11px; color:var(--faint); font-family:var(--mono); margin-top:1px; } .gated { display:flex; flex-direction:column; gap:8px; } .gated__pill { display:inline-flex; align-items:center; gap:8px; background:var(--char-3); border:1px dashed #4a4e58; color:var(--mut); font-size:12.5px; font-weight:600; padding:9px 12px; } .gated__pill svg { color:var(--red); flex-shrink:0; } .pc__foot { display:flex; gap:8px; margin-top:12px; } .stepper { display:flex; align-items:center; border:1px solid var(--line); flex-shrink:0; } .stepper button { width:30px; height:38px; display:grid; place-items:center; color:#fff; font-size:15px; } .stepper button:hover { background:var(--char-3); } .stepper input { width:26px; height:38px; border:none; text-align:center; font-family:var(--mono); font-size:13px; font-weight:600; background:transparent; color:#fff; -moz-appearance:textfield; } .stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button { -webkit-appearance:none; } .addbtn { flex:1; height:38px; background:#fff; color:var(--ink); font-weight:700; font-size:11.5px; display:inline-flex; align-items:center; justify-content:center; gap:6px; transition:.15s; text-transform:uppercase; letter-spacing:.01em; white-space:nowrap; } .addbtn svg { width:14px; height:14px; flex-shrink:0; } .addbtn:hover { background:var(--red); color:#fff; } .addbtn.is-done { background:var(--ok); color:#fff; } .addbtn--lock { background:transparent; color:#fff; border:1px solid var(--line); } .addbtn--lock:hover { background:var(--red); border-color:var(--red); color:#fff; } /* SALE STRIP */ .A__strip { position:relative; overflow:hidden; background:linear-gradient(120deg,#000,#23252c); padding:40px 44px; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; border:1px solid var(--line); } .A__stripgrid { position:absolute; inset:0; background-image:radial-gradient(70% 90% at 92% 8%, rgba(238,29,37,.4), rgba(238,29,37,.08) 45%, transparent 72%), linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:auto, 44px 44px, 44px 44px; } .A__stripL { position:relative; } .A__striptag { display:inline-block; background:var(--red); color:#fff; font-family:var(--mono); font-size:11px; font-weight:600; padding:5px 11px; letter-spacing:.05em; } .A__strip h2 { color:#fff; font-size:30px; font-weight:800; text-transform:uppercase; line-height:1.05; margin-top:14px; } .A__strip h2 em { color:var(--red); font-style:normal; } .A__strip p { color:#d4d7dd; margin-top:10px; font-size:15px; max-width:48ch; } .A__stripbtn { position:relative; } /* TILES */ .A__tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .A__tile { position:relative; background:var(--char-2); border:1px solid var(--line); overflow:hidden; min-height:170px; display:flex; align-items:flex-end; padding:20px; transition:.2s; } .A__tile:hover { border-color:#52565f; transform:translateY(-3px); } .A__tile__g { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:26px 26px; } .A__tile img { position:absolute; right:12px; top:50%; transform:translateY(-50%); width:140px; height:116px; object-fit:contain; filter:drop-shadow(0 12px 18px rgba(0,0,0,.45)); } .A__tiles .A__tile:first-child img { top:calc(50% - 20px); } .A__tile__c { position:relative; z-index:2; } .A__tile__n { font-family:var(--mono); font-size:11px; color:var(--mut); } .A__tile h3 { font-size:21px; font-weight:800; text-transform:uppercase; margin-top:3px; color:#fff; } .A__tile--red { background:var(--red); border-color:var(--red); } .A__tile--red .A__tile__n { color:#ffd9d2; } /* STAT BAND */ .A__band { background:#0f1014; position:relative; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .A__bandgrid { position:absolute; inset:0; background-image:radial-gradient(70% 90% at 92% 8%, rgba(238,29,37,.4), rgba(238,29,37,.08) 45%, transparent 72%), linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px); background-size:auto, 44px 44px, 44px 44px; } .A__bandgrid::after { content:none; } .A__bandtag { display:inline-block; background:var(--red); color:#fff; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; padding:6px 12px; margin-bottom:16px; } .A__bandin { position:relative; z-index:2; display:grid; grid-template-columns:1.15fr 1fr; gap:54px; align-items:center; padding:58px 0; } .A__band h2 { font-size:34px; font-weight:800; text-transform:uppercase; line-height:1.05; color:#fff; } .A__band h2 em { color:var(--red); font-style:normal; } .A__band p { color:#d4d7dd; margin-top:16px; font-size:16px; line-height:1.6; } .A__bandcta { display:flex; gap:14px; margin-top:26px; } .A__stats { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .A__statbox { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14); padding:26px; } .A__statbox b { font-size:40px; font-weight:900; font-style:italic; color:#fff; } .A__statbox b i { color:var(--red); font-style:italic; } .A__statbox span { display:block; font-family:var(--mono); font-size:11px; color:#c7cbd2; text-transform:uppercase; letter-spacing:.05em; margin-top:6px; } /* ARTICLES / AKTUALITY */ .A__artshead { display:flex; align-items:center; gap:16px; } .A__artsnav { display:none; } .A__arts { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .A__art { display:flex; flex-direction:column; border:1px solid var(--line); background:var(--char-2); transition:.18s; } .A__art:hover { border-color:#52565f; transform:translateY(-3px); } .A__art__media { position:relative; aspect-ratio:16/10; overflow:hidden; background:#23252b; } .A__art__media::after { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:26px 26px; } .A__art__media--1 { background:linear-gradient(130deg,#2a2d35,#3a3d46); } .A__art__media--2 { background:linear-gradient(130deg,#3a1411,#7a2018); } .A__art__media--3 { background:linear-gradient(130deg,#1d1f25,#2a2d35); } .A__art__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; } .A__art__img--p { object-fit:contain; padding:16px 16px 8px; filter:drop-shadow(0 14px 20px rgba(0,0,0,.5)); } .A__art__cat { position:absolute; top:14px; left:14px; z-index:2; background:var(--red); color:#fff; font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:5px 10px; } .A__art__body { padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; } .A__art__date { font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:.03em; } .A__art__body h3 { font-size:18px; font-weight:800; line-height:1.22; margin-top:10px; color:#fff; } .A__art:hover .A__art__body h3 { color:var(--red); } .A__art__body p { font-size:13.5px; color:var(--mut); line-height:1.55; margin-top:9px; flex:1; } .A__art__more { display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:13px; color:var(--red); margin-top:16px; } body.light .A__art { background:#fff; } body.light .A__art:hover { border-color:#c9cbd0; } body.light .A__art__body h3 { color:var(--ink); } body.light .A__art:hover .A__art__body h3 { color:var(--red); } /* SERVICES */ .A__svcs { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); } .A__svc { background:var(--char-2); padding:30px; transition:.2s; position:relative; } .A__svc:hover { background:var(--char-3); } .A__svc .num { font-family:var(--mono); font-size:12px; color:var(--faint); } .A__svc__ic { width:46px; height:46px; background:var(--red); color:#fff; display:grid; place-items:center; margin:16px 0 16px; } .A__svc h3 { font-size:18px; font-weight:700; text-transform:uppercase; } .A__svc p { color:var(--mut); font-size:14px; margin-top:8px; line-height:1.55; } /* REFERENCES */ .A__refhead { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:28px; flex-wrap:wrap; } .A__heureka { display:flex; align-items:center; gap:16px; background:var(--char-2); border:1px solid var(--line); padding:16px 22px; } .A__hscore { font-size:42px; font-weight:900; font-style:italic; color:#fff; } .A__hstars { display:flex; gap:2px; color:#f5a623; } .A__hn { font-size:12px; color:var(--mut); font-family:var(--mono); margin-top:4px; } .A__refs { display:flex; flex-wrap:wrap; gap:12px; } .A__reflogo { flex:1; min-width:140px; display:flex; align-items:center; justify-content:center; padding:22px; border:1px solid var(--line); background:var(--char-2); transition:.2s; } .A__reflogo img { height:26px; width:auto; max-width:80%; object-fit:contain; display:block; transition:filter .2s; } .A__reflogo:hover { border-color:#52565f; } .A__reflogo:hover img { filter:brightness(.55); } body.light .A__reflogo:hover img { filter:brightness(.45); } /* NEWSLETTER */ .A__news { position:relative; overflow:hidden; background:var(--char-2); border:1px solid var(--line); padding:40px 44px; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; margin:14px 0; } .A__newsgrid { position:absolute; inset:0; background-image:none; background-size:34px 34px; } .A__newsL { position:relative; } .A__news h2 { color:#fff; font-size:26px; font-weight:800; text-transform:uppercase; } .A__news p { color:var(--mut); margin-top:8px; font-size:15px; max-width:46ch; } .A__newsform { position:relative; display:flex; gap:10px; flex-wrap:wrap; } .A__newsform input { height:54px; width:300px; border:1px solid var(--line); background:var(--char); padding:0 18px; font-family:var(--exo); font-size:15px; color:#fff; } .A__newsform input::placeholder { color:var(--faint); } .A__newsform input:focus { outline:none; border-color:var(--red); } /* TRUST */ .A__trust { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--char); } .A__trustin { display:grid; grid-template-columns:repeat(4,1fr); } .A__trustit { display:flex; align-items:center; gap:14px; padding:26px 24px; border-left:1px solid var(--line-2); } .A__trustit:first-child { border-left:none; } .A__trustic { width:46px; height:46px; background:var(--red); color:#fff; display:grid; place-items:center; flex-shrink:0; } .A__trustt { font-weight:700; font-size:14.5px; color:#fff; } .A__trusts { font-size:12.5px; color:var(--mut); margin-top:2px; } /* FOOTER */ .A__footer { background:#000; padding:54px 0 26px; font-size:14px; color:var(--mut); } .A__footer a:hover { color:#fff; } .A__ftop { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:34px; border-bottom:1px solid var(--line); } .A__flogo { height:30px; width:auto; } .A__fbrand p { margin:16px 0; max-width:320px; line-height:1.6; } .A__fsocial { display:flex; gap:10px; } .A__fsocial a { width:38px; height:38px; border:1px solid var(--line); display:grid; place-items:center; color:#cdd3da; transition:.15s; } .A__fsocial a:hover { background:var(--red); border-color:var(--red); color:#fff; } .A__fcol h4 { color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px; font-weight:700; } .A__fcol ul { list-style:none; display:flex; flex-direction:column; gap:9px; } .A__fcontact div { margin-bottom:12px; } .A__fcontact b { color:#7e848d; font-weight:600; display:block; font-size:10px; font-family:var(--mono); letter-spacing:.05em; margin-bottom:2px; } .A__fcontact a { color:#fff; font-family:var(--mono); } .A__faddr { color:var(--mut); font-size:13px; line-height:1.6; } .A__fpay { display:flex; flex-wrap:wrap; gap:9px; padding:24px 0; } .A__paychip { background:var(--char-2); border:1px solid var(--line); padding:7px 12px; font-size:12px; font-weight:600; color:#cdd3da; font-family:var(--mono); } .A__fbot { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-top:18px; border-top:1px solid var(--line); font-size:12.5px; color:var(--faint); } .A__flinks { display:flex; gap:18px; flex-wrap:wrap; } /* LOGIN MODAL */ .A__modal { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:24px; } .A__modal.open { display:flex; } .A__modal__bd { position:absolute; inset:0; background:rgba(10,11,14,.72); backdrop-filter:blur(3px); } .A__modal__box { position:relative; width:100%; max-width:840px; display:grid; grid-template-columns:1fr 1fr; background:var(--char-2); border:1px solid var(--line); box-shadow:0 40px 90px -30px rgba(0,0,0,.8); overflow:hidden; } .A__modal__x { position:absolute; top:14px; right:14px; width:36px; height:36px; display:grid; place-items:center; color:var(--ink); background:rgba(15,16,20,.08); z-index:3; transition:.15s; } .A__modal__x:hover { background:var(--red); color:#fff; } .A__modal__side { position:relative; background:#000; padding:38px; overflow:hidden; display:flex; flex-direction:column; } .A__modal__sideg { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:28px 28px; } .A__modal__sideg::after { content:""; position:absolute; inset:0; background:radial-gradient(70% 90% at 92% 8%, rgba(238,29,37,.4), rgba(238,29,37,.08) 45%, transparent 72%); } .A__modal__logo { position:relative; height:30px; width:auto; align-self:flex-start; } .A__modal__side h3 { position:relative; color:#fff; font-size:24px; font-weight:800; text-transform:uppercase; margin-top:26px; line-height:1.1; } .A__modal__side p { position:relative; color:var(--mut); font-size:14px; line-height:1.6; margin-top:12px; } .A__modal__feat { position:relative; list-style:none; margin-top:auto; padding-top:24px; display:flex; flex-direction:column; gap:11px; } .A__modal__feat li { display:flex; align-items:center; gap:11px; font-size:13.5px; color:#dfe3e8; } .A__modal__feat svg { color:var(--red); flex-shrink:0; } .A__modal__form { padding:38px; display:flex; flex-direction:column; } .A__modal__form h4 { font-size:22px; font-weight:800; text-transform:uppercase; color:#fff; margin-top:6px; } .A__field { margin-top:16px; } .A__field label { display:block; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-bottom:7px; } .A__field input[type=email], .A__field input[type=password] { width:100%; height:48px; background:var(--char); border:1px solid var(--line); padding:0 14px; font-family:var(--exo); font-size:15px; color:#fff; } .A__field input:focus { outline:none; border-color:var(--red); } .A__field__row { display:flex; align-items:center; justify-content:space-between; margin-top:14px; } .A__check { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--mut); cursor:pointer; } .A__forgot { font-size:13px; color:var(--mut); } .A__forgot:hover { color:#fff; } .A__modal__submit { width:100%; justify-content:center; margin-top:22px; height:52px; } .A__modal__reg { font-size:13px; color:var(--mut); margin-top:18px; text-align:center; } .A__modal__reg a { color:var(--red); font-weight:700; } body.light .A__modal__box { background:#fff; } body.light .A__modal__form h4 { color:var(--ink); } body.light .A__field input[type=email], body.light .A__field input[type=password] { background:#fff; color:var(--ink); } /* TOAST Toast je JEDINÁ zpětná vazba, kterou uživatel na některé akce dostane, a spouští se i ZEVNITŘ overlayů — proto musí ležet nad všemi. Do 08/2026 měl z-index 210, tedy POD B2B registračním modalem (.b2b__modal 300), mobilní navigací (.A__mnav 300), pokladnou a overlayem košíku (kosik.js 300/1200), lištou souhlasu (consent.js 1400) i poptávkovým modalem (.inq__ov v catalog.js/detail.js 9999). Hláška se tím vykreslila, ale schovaná za ztmavovacím pozadím modalu → čitelná nebyla vůbec. Projev (klient 2026-08-19): registrace druhé osoby z firmy, která už zákazníkem je, „nehlásí nic" — přitom hláška o obsazeném e-mailu (b2b-register.js → notify()) tam celou dobu byla, jen pod modalem. 10000 = o jednu nad nejvyšším z těch overlayů. `pointer-events:none` je pojistka k tomu: toast nemá jediný klikací prvek, takže když teď leží nade vším, nesmí nikomu (lišta souhlasu, tlačítka modalu) sebrat klik. */ .A__toast { position:fixed; bottom:26px; right:26px; background:var(--char-2); border:1px solid var(--line); box-shadow:0 24px 60px -20px rgba(0,0,0,.7); padding:16px 18px; display:flex; align-items:center; gap:14px; z-index:10000; pointer-events:none; transform:translateX(140%); transition:transform .3s cubic-bezier(.2,.8,.2,1); max-width:340px; } .A__toast.is-show { transform:none; } .A__toastic { width:40px; height:40px; background:rgba(39,177,105,.15); color:var(--ok); display:grid; place-items:center; flex-shrink:0; } .A__toastt { font-weight:700; font-size:14px; color:#fff; } .A__toasts { font-size:13px; color:var(--mut); margin-top:2px; } /* RESPONSIVE */ @media (max-width:1023px) { /* přepnout na mobilní hlavičku už na tabletu */ .A__search, .A__nav { display:none; } .A__mnavbtn { display:grid; } .A__logo { height:32px; } body.light .A__logo { height:42px; } .A__hdrin { height:68px; gap:14px; } .A__cta span { display:none; } .A__cta { padding:0 14px; } .A__utill, .A__utiltx { display:none; } .A__util .wrap { justify-content:center; } .A__utiltx { display:inline; } .A__utilsep { display:none; } .A__ship { color:#fff; } /* na mobilu skryj ikony účtu/oblíbených (jsou v drawer), nech jen košík */ .A__navr .A__icn { display:none; } .A__cartbtn { padding:0 12px; } /* čistá mobilní hlavička: JEN hamburger + logo. Košík (i oblíbené) je dostupný v hamburger menu — drawer má A__mnav__act--cart s počtem. */ .A__navr { gap:10px; } .A__lang { display:none; } .A__navr .A__act { display:none; } .A__navr .A__login, .A__navr .A__reg { display:none; } /* Po přihlášení hala.js injektuje účet-widget (.A__navacct width:304px / .A__acct) místo tlačítka Přihlásit. Na mobilu NEBYL skrytý → přetékal hlavičku vpravo (košík + oříznutý profil). Skryj ho — účet je dostupný přes hamburger menu. Drží „hamburger + logo + košík" (viz výše). */ .A__navr .A__navacct, .A__navr .A__acct, .A__navr .A__acctwrap { display:none; } .A__navr .A__navlink { display:none; } /* Robustně skryj košík i mimo .A__navr (builder-native header homepage) */ .A__act--cart { display:none !important; } /* B2B lišta — responzivní, jeden řádek */ .A__b2bin { height:auto; gap:10px; padding:9px 0; flex-wrap:nowrap; align-items:center; } .A__b2btx { font-size:11.5px; line-height:1.3; flex:1; min-width:0; } .A__b2bic { display:none; } .A__b2bsp { display:none; } .A__b2bbtn { padding:0 14px; height:34px; white-space:nowrap; flex-shrink:0; margin-right:10px; } .A__b2bx { margin-left:0; } } @media (max-width:1080px) { .A { width:100%; } .A__logo { height:34px; } body.light .A__logo { height:44px; } .A__heroIn { grid-template-columns:1fr; gap:30px; } .A__h1 { font-size:60px; } .A__mods { grid-template-columns:1fr 1fr; } .A__promo3 { grid-template-columns:1fr; } .A__pbig { min-height:340px; } .A__track { grid-auto-columns:calc((100% - 2 * 18px) / 3); } .A__tiles { grid-template-columns:1fr 1fr; } .A__bandin { grid-template-columns:1fr; gap:30px; } .A__svcs { grid-template-columns:1fr 1fr; } .A__artshead { gap:10px; } .A__artsnav { display:flex; } .A__arts { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(300px,46%); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px; } .A__arts::-webkit-scrollbar { display:none; } .A__arts > * { scroll-snap-align:start; } .A__trustin { grid-template-columns:1fr 1fr; } .A__ftop { grid-template-columns:1fr 1fr; } } @media (max-width:680px) { .A__search,.A__nav { display:none; } .A__mnavbtn { display:grid; } .A__hdrin { height:64px; gap:14px; } .A__logo { height:30px; } body.light .A__logo { height:40px; } .A__logo { height:28px; } body.light .A__logo { height:34px; } .A__hdrin > a[aria-label="FEIFER"] { flex-shrink:0; } .A__navr .A__navlink { display:none; } .A__cta span, .A__cartbtn b { display:none; } .A__cta { padding:0 14px; } .A__h1 { font-size:38px; } .A__mods { grid-template-columns:1fr; } .A__promo3__r { grid-template-rows:none; grid-auto-flow:column; grid-auto-columns:88%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; } .A__promo3__r > * { scroll-snap-align:start; } .A__promo3__r::-webkit-scrollbar { display:none; } .A__pbig { min-height:300px; padding:26px; } .A__pbig h2 { font-size:38px; } .A__pbig__img { width:46%; max-width:230px; top:auto; bottom:34%; right:14px; height:auto; opacity:.95; object-position:right center; } .A__psm { min-height:150px; } .A__psm__img { width:120px; max-height:78%; top:50%; bottom:auto; transform:translateY(-50%); height:auto; } .A__tstrip { grid-template-columns:1fr 1fr; } .A__tstrip .it { padding:16px 16px; } .A__tstrip .it:nth-child(3) { border-left:none; } .A__track { grid-auto-columns:80%; } .A__tiles,.A__svcs,.A__trustin,.A__ftop { grid-template-columns:1fr; } /* stat band: 2 sloupce (1fr 1fr) přetékaly na mobilu — nezalomitelná čísla (ISO·9001, 40px) rozhodila auto-min tracků → poslední sloupec ořezán. Stack na 1 sloupec (jako .A__tstrip/.A__trustin výše), aby se všechny 4 boxy vešly. */ .A__stats { grid-template-columns:1fr; } /* newsletter: pevná šířka inputu 300px přetékala kontejner (builder .fe-hp-news, overflow:hidden) → pravý okraj pole ořezán. Full-width + border-box, tlačítko zalomí pod něj (flex-wrap). */ .A__newsform { width:100%; } .A__newsform input { width:100%; box-sizing:border-box; } .A__arts { grid-auto-columns:86%; } .A__sechead { flex-wrap:wrap; } .A__sechead h2 { font-size:18px; } .A__b2b { display:none; } .A__util .wrap { font-size:10px; justify-content:center; } .A__utill { display:none; } .A__utiltx { display:inline; } .A__utilsep { display:none; } .A__utilr { gap:10px; } .A__themetx { display:none; } .A__theme { padding:4px 8px; } } /* ===== Mobil (P9): šipky karuselu — overlay vertikálně doprostřed tracku ===== */ @media (max-width:680px) { .A__sec > .wrap { position:relative; } .A__sechead .A__cnav { position:absolute; left:6px; right:6px; top:calc(50% + 24px); transform:translateY(-50%); justify-content:space-between; z-index:6; pointer-events:none; } .A__sechead .A__cnav .A__cbtn { pointer-events:auto; width:44px; height:44px; background:rgba(29,31,37,.62); backdrop-filter:blur(3px); border-color:rgba(255,255,255,.25); } .A__sechead .A__cnav .A__cbtn:hover { background:var(--red); border-color:var(--red); color:#fff; } body.light .A__sechead .A__cnav .A__cbtn { background:rgba(255,255,255,.85); border-color:#cfd2d7; color:var(--ink); } body.light .A__sechead .A__cnav .A__cbtn:hover { background:var(--red); border-color:var(--red); color:#fff; } .A__sechead .A__cnav--ct { display:none; } } @media (max-width:440px) { .A__tstrip { grid-template-columns:1fr; } .A__tstrip .it { border-left:none; border-top:1px solid rgba(255,255,255,.1); } .A__tstrip .it:first-child { border-top:none; } .A__h1 { font-size:32px; } .A__pbig h2 { font-size:30px; } .A__track { grid-auto-columns:90%; } } /* ===== MOBILNÍ NAVIGACE (drawer) ===== */ .A__mnavbtn { display:none; width:46px; height:46px; border:1px solid var(--line); color:#fff; place-items:center; background:transparent; flex-shrink:0; margin-right:4px; } .A__mnavbtn:hover { border-color:var(--red); } body.light .A__mnavbtn { color:var(--ink); } .A__mnav { position:fixed; inset:0; z-index:300; display:none; } .A__mnav.open { display:block; } .A__mnav__bd { position:absolute; inset:0; background:rgba(8,9,12,.6); backdrop-filter:blur(2px); animation:mnavFade .2s ease; } @keyframes mnavFade { from{opacity:0;} to{opacity:1;} } .A__mnav__panel { position:absolute; top:0; left:0; bottom:0; width:90%; max-width:400px; background:var(--char-2); border-right:1px solid var(--line); display:flex; flex-direction:column; animation:mnavSlide .25s cubic-bezier(.2,.8,.2,1); } @keyframes mnavSlide { from{transform:translateX(-100%);} to{transform:none;} } body.light .A__mnav__panel { background:#fff; } .A__mnav__top { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; flex-shrink:0; } .A__mnav__logo { height:30px; width:auto; } body.light .A__mnav__logo { height:42px; } .A__mnav__x { width:40px; height:40px; display:grid; place-items:center; color:#fff; border:1px solid var(--line); } body.light .A__mnav__x { color:var(--ink); } .A__mnav__x:hover { background:var(--red); border-color:var(--red); color:#fff; } .A__mnav__scroll { flex:1; overflow-y:auto; padding:20px; } .A__mnav__search { display:flex; align-items:center; gap:11px; height:50px; border:1px solid var(--line); background:var(--char); padding:0 15px; color:var(--faint); margin-bottom:16px; transition:border-color .15s, box-shadow .15s; } .A__mnav__search:focus-within { border-color:var(--red); box-shadow:0 0 0 3px rgba(238,29,37,.16); color:var(--red); } body.light .A__mnav__search { background:#fff; border-color:#e1e3e8; } .A__mnav__search input { flex:1; border:none; outline:none; background:transparent; font-family:var(--exo); font-size:15px; color:#fff; min-width:0; } body.light .A__mnav__search input { color:var(--ink); } /* quick actions */ .A__mnav__acts { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:8px; } .A__mnav__act { display:flex; align-items:center; justify-content:center; gap:8px; height:46px; border:1px solid var(--line); font-size:13.5px; font-weight:700; color:#fff; background:var(--char); transition:.15s; } body.light .A__mnav__act { color:var(--ink); background:#fff; border-color:#e1e3e8; } .A__mnav__act svg { color:var(--red); } .A__mnav__act:hover { border-color:var(--red); } .A__mnav__act--full { grid-column:1 / -1; } /* přihlášený účet v drawer */ .A__mnav__act--acc { grid-column:1 / -1; justify-content:flex-start; gap:12px; height:auto; padding:12px 14px; text-align:left; } .A__mnav__ava { width:38px; height:38px; flex-shrink:0; display:grid; place-items:center; border-radius:50%; background:var(--red); color:#fff; font-family:var(--exo); font-weight:800; font-size:14px; } .A__mnav__accx { display:flex; flex-direction:column; gap:1px; min-width:0; } .A__mnav__accx b { font-size:14px; } .A__mnav__accx span { font-family:var(--mono); font-size:11px; color:var(--faint); font-weight:400; } .A__mnav__act--acc svg { color:var(--red); } .A__mnav__act--out { grid-column:1 / -1; } .A__mnav__act--out svg { color:var(--faint); } .A__mnav__act--out:hover { border-color:var(--red); color:var(--red); } .A__mnav__act--out:hover svg { color:var(--red); } .A__mnav__act--cart { position:relative; } .A__mnav__badge { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:var(--red); color:#fff; font-family:var(--mono); font-size:11px; font-weight:700; margin-left:2px; } /* nav */ .A__mnav__nav { display:flex; flex-direction:column; margin-top:14px; } .A__mnav__link { display:flex; align-items:center; justify-content:space-between; padding:16px 4px; font-size:16px; font-weight:700; color:#fff; border-top:1px solid var(--line); text-transform:uppercase; letter-spacing:.02em; transition:.15s; } .A__mnav__link svg { color:var(--red); opacity:.7; transition:.15s; } .A__mnav__link:hover { color:var(--red); padding-left:8px; } .A__mnav__link:hover svg { opacity:1; } .A__mnav__cta { width:100%; justify-content:center; margin-top:18px; height:50px; } body.light .A__mnav__link { color:var(--ink); border-top-color:#e8e9ec; } body.light .A__macc { border-top-color:#e8e9ec; } body.light .A__mnav__nav .A__macc__h { border-top-color:transparent; } .A__mnav__link--sale { color:var(--red); } /* accordion */ .A__macc { border-top:1px solid var(--line); } .A__mnav__nav .A__macc:first-child { border-top:none; } .A__macc__h { width:100%; display:flex; align-items:center; justify-content:space-between; padding:16px 4px; font-size:16px; font-weight:700; color:#fff; background:none; border:none; cursor:pointer; font-family:var(--exo); text-transform:uppercase; letter-spacing:.02em; } body.light .A__macc__h { color:var(--ink); } .A__macc__h:hover { color:var(--red); } .A__macc__h .chev { transition:transform .25s; color:var(--faint); } .A__macc.open .A__macc__h { color:var(--red); } .A__macc.open .A__macc__h .chev { transform:rotate(180deg); color:var(--red); } .A__macc__body { display:grid; grid-template-rows:0fr; transition:grid-template-rows .25s ease; overflow:hidden; } .A__macc.open .A__macc__body { grid-template-rows:1fr; } .A__macc__inner { min-height:0; overflow:hidden; } .A__macc__body a { display:flex; align-items:center; justify-content:space-between; padding:13px 12px 13px 18px; font-size:14.5px; font-weight:600; color:#dfe2e7; border-top:1px solid var(--line-2); position:relative; } .A__macc__body a:first-child { border-top:none; } body.light .A__macc__body a { color:#2b2e36; border-top-color:rgba(0,0,0,.06); } .A__macc__body a:hover { color:#fff; padding-left:22px; } body.light .A__macc__body a:hover { color:var(--red); } .A__macc__body a svg { color:var(--red); flex-shrink:0; opacity:1; } .A__macc.open .A__macc__body { padding-bottom:8px; } /* zvýrazněné Produkty (jako červené tlačítko v PC) */ .A__macc--hl { border-top:none; margin-bottom:6px; } .A__macc--hl .A__macc__h { background:var(--red); color:#fff; padding:15px 16px; } .A__macc--hl .A__macc__h:hover { background:var(--red-600); color:#fff; } .A__macc--hl.open .A__macc__h { color:#fff; } .A__macc--hl .A__macc__h .chev { color:#fff; } .A__macc--hl.open .A__macc__h .chev { color:#fff; } .A__macc--hl .A__macc__h, .A__macc--hl .A__macc__h .A__macc__cat, .A__macc--hl .A__macc__h .chev { color:#fff; } body.light .A__macc--hl .A__macc__h, body.light .A__macc--hl .A__macc__h .A__macc__cat { color:#fff; } .A__macc__cat { display:flex; align-items:center; gap:10px; } /* PC-styl produktové karty v mobilním menu */ .A__mcatgrid { display:flex; flex-direction:column; } .A__mcat { display:flex; align-items:center; gap:13px; padding:11px 10px; border-top:1px solid rgba(255,255,255,.08); } .A__mcat:first-child { border-top:none; } /* Mobilní menu — bez rámečku jako desktop (2026-09-22). */ .A__mcat__img { width:56px; height:56px; flex-shrink:0; display:grid; place-items:center; overflow:hidden; } .A__mcat__img img { width:100%; height:100%; object-fit:contain; } body.light .A__mcat__img img { mix-blend-mode:multiply; } .A__mcat__tx { display:flex; flex-direction:column; flex:1; min-width:0; } .A__mcat__tx b { font-size:14.5px; font-weight:700; color:#fff; } body.light .A__mcat__tx b { color:var(--ink); } .A__mcat__tx span { font-family:var(--mono); font-size:11px; color:var(--faint); margin-top:2px; } .A__mcat svg { color:var(--red); flex-shrink:0; } .A__mcat:hover { background:rgba(255,255,255,.05); } body.light .A__mcat:hover { background:#eceef1; } .A__mcat:hover .A__mcat__tx b { color:var(--red); } .A__mcat--sale .A__mcat__img { color:var(--red); } .A__mcat--sale .A__mcat__tx b { color:var(--red); } .A__mcat--sale .A__mcat__tx span { color:var(--red-600); } .A__macc--hl .A__macc__body { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-top:none; padding:0; } .A__macc--hl.open .A__macc__body { padding:4px 6px 8px; } .A__macc--hl:not(.open) .A__macc__body { border-color:transparent; background:transparent; } .A__macc--hl .A__macc__body a { padding:13px 12px 13px 16px; border-top-color:rgba(255,255,255,.08); } body.light .A__macc--hl .A__macc__body a { color:#23252b; } .A__macc--hl .A__macc__body a:hover { background:rgba(255,255,255,.05); color:var(--red); padding-left:20px; } body.light .A__macc--hl .A__macc__body a:hover { background:#eceef1; } body.light .A__macc--hl .A__macc__body { background:#f3f4f6; border-color:#e3e4e8; } /* bottom bar */ .A__mnav__bottom { flex-shrink:0; border-top:none; padding:6px 20px 18px; display:flex; flex-direction:column; gap:14px; background:transparent; } body.light .A__mnav__bottom { background:transparent; } .A__mnav__lang { display:flex; gap:18px; justify-content:center; } .A__mnav__lang button { display:inline-flex; align-items:center; gap:7px; font-family:var(--exo); font-size:14px; font-weight:700; letter-spacing:.02em; color:var(--faint); border:none; background:transparent; padding:6px 4px; cursor:pointer; transition:.14s; } .A__mnav__lang button:hover { color:var(--red); border:none; } body.light .A__mnav__lang button:hover { color:var(--red); } body.light .A__mnav__lang button { background:transparent; } body.light .A__mnav__lang button:hover { color:var(--ink); } .A__mnav__lang button.is-on { background:transparent; border:none; color:var(--red); } .A__mnav__tel { display:flex; align-items:center; justify-content:center; gap:8px; font-family:var(--mono); font-size:12px; color:var(--mut); } .A__mnav__tel svg { color:var(--red); } .A__mnav__tel:hover { color:#fff; } body.light .A__mnav__tel:hover { color:var(--ink); } /* ===== ZAOBLENÍ mobilního menu (v designu PC) ===== */ .A__mnav__panel { border-radius:0 var(--rad-xl) var(--rad-xl) 0; overflow:hidden; } .A__mnavbtn, .A__mnav__x, .A__mnav__search, .A__mnav__act, .A__mnav__cta { border-radius:var(--rad-sm); } .A__macc--hl .A__macc__h { border-radius:var(--rad-md); } .A__macc--hl.open .A__macc__h { border-radius:var(--rad-md) var(--rad-md) 0 0; } .A__macc--hl.open .A__macc__body { border-radius:0 0 var(--rad-md) var(--rad-md); overflow:hidden; } .A__mcat__img { border-radius:var(--rad-xs); } .A__mnav__lang button { border-radius:999px; } /* ===== B2B REGISTRATION MODAL ===== */ .b2b__modal { position:fixed; inset:0; z-index:300; display:none; align-items:flex-start; justify-content:center; padding:30px 20px; overflow-y:auto; } .b2b__modal.open { display:flex; } .b2b__bd { position:fixed; inset:0; background:rgba(8,9,12,.72); backdrop-filter:blur(3px); } .b2b__box { position:relative; width:100%; max-width:640px; background:var(--char-2); border:1px solid var(--line); border-radius:var(--rad-lg); box-shadow:0 40px 90px -30px rgba(0,0,0,.8); margin:auto; } body.light .b2b__box { background:#fff; } .b2b__x { position:absolute; top:16px; right:16px; width:38px; height:38px; display:grid; place-items:center; color:#fff; background:rgba(255,255,255,.12); border:none; border-radius:var(--rad-sm); cursor:pointer; z-index:3; } body.light .b2b__x { color:var(--ink); background:#eef0f3; } .b2b__x:hover { background:var(--red); color:#fff; } .b2b__head { padding:26px 28px 20px; } .b2b__eyebrow { display:inline-flex; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--red); padding:6px 12px; border-radius:var(--rad-xs); } .b2b__head h3 { font-size:24px; font-weight:900; text-transform:uppercase; margin-top:12px; } .b2b__head p { color:var(--mut); font-size:13.5px; line-height:1.55; margin-top:8px; max-width:54ch; } /* ===== CHYBOVÁ HLÁŠKA UVNITŘ DIALOGU (.fe__err) ===== Sdílené napříč všemi dialogy — přihlášení, B2B registrace, pokladna, poptávkový modal, přijetí nabídky v účtu, zapomenuté heslo. Do 08/2026 se chyby ze VŠECH těchto míst hlásily jen rohovým toastem. Ten měl dvě vady naráz: ležel pod modaly (z-index 210 vs. 300–9999), takže ho ztmavovací pozadí udělalo nečitelným, a i po opravě vrstvení je 800 px od tlačítka, které člověk zrovna zmáčkl. Klient 2026-08-19 to na registraci nahlásil jako „nezobrazují se žádné hlášky" — přitom se zobrazovaly. Pruh staví `window.__FEIFER_ERR__` (hala.js) VŽDY před odesílací tlačítko, takže hláška vyskočí přesně tam, kam se uživatel dívá. Toast zůstal pro potvrzení akcí mimo dialog (přidáno do košíku, odebráno z oblíbených). */ .fe__err { display:none; margin:0 0 14px; padding:13px 15px; gap:11px; align-items:flex-start; background:rgba(238,29,37,.1); border:1px solid rgba(238,29,37,.42); border-left:3px solid var(--red); border-radius:var(--rad-sm); } .fe__err.is-on { display:flex; } .fe__err > svg { flex-shrink:0; color:var(--red); margin-top:1px; } .fe__errt { font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--red); } .fe__errm { font-size:14px; line-height:1.5; color:#fff; margin-top:3px; } body.light .fe__errm { color:var(--ink); } /* B2B registrace: pruh sedí v #b2bWrap (bez paddingu) nad panely kroků — odsazení proto musí dodat sám, ať lícuje s formulářem pod ním. */ .fe__err.b2b__err { margin:0 28px; } .b2b__form { padding:22px 28px 28px; display:flex; flex-direction:column; gap:14px; } .b2b__sec { font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--red); margin-top:8px; } .b2b__sec:first-child { margin-top:0; } .b2b__row { display:flex; gap:14px; } .b2b__field { display:flex; flex-direction:column; gap:7px; flex:1; min-width:0; } .b2b__field--half { flex:1; } .b2b__field label { font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); } .b2b__field label .req, .b2b__terms .req { color:var(--red); } .b2b__field input, .b2b__field select { width:100%; background:var(--char); border:1px solid var(--line); border-radius:var(--rad-sm); padding:11px 13px; font-family:var(--exo); font-size:14.5px; color:#fff; color-scheme:dark; transition:border-color .15s, box-shadow .15s; } body.light .b2b__field input, body.light .b2b__field select { background:#fbfbfc; color:var(--ink); border-color:#dcdee2; color-scheme:light; } .b2b__field input:focus, .b2b__field select:focus { outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(238,29,37,.12); } /* Designový dropdown (nahrazuje native