(idea, flow) — bez tego strony bez globalnego resetu
linków podkreślają label (default UA underline) */
text-decoration: none;
}
.nav-item-label {
font-size: 14px;
font-weight: 600;
color: var(--text-secondary, rgba(255,255,255,0.55));
letter-spacing: 0.5px;
text-transform: uppercase;
cursor: default;
padding: 0 20px;
height: 48px;
display: flex;
align-items: center;
transition: color 0.15s;
}
.nav-item:hover .nav-item-label,
.nav-item.active .nav-item-label { color: var(--text-primary, #fff); }
/* Interaktywne triggery muszą mieć cursor:pointer, inaczej iOS Safari
nie odpala 'click' na (tap nie otwiera menu na iPadzie). */
.nav-moduły, .nav-moduły .nav-item-label,
.nav-system, .nav-system .nav-item-label { cursor: pointer; }
.nav-cta {
margin-left: auto;
font-size: 12px;
font-weight: 600;
color: var(--text-primary, #fff);
text-decoration: none;
letter-spacing: 0.3px;
padding: 6px 14px;
border: 1px solid var(--border-mid, var(--border, rgba(255,255,255,0.12)));
border-radius: 20px;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
}
.nav-cta:hover { background: var(--text-primary, #fff); color: var(--bg, #0a0a0a); }
/* ─── Aktualna zakładka (current page) — .is-current ustawia mega-menu.js ─── */
.nav-item.is-current .nav-item-label { color: var(--text-primary, #fff); }
.nav-item.is-current::after {
content: "";
position: absolute;
left: 20px; right: 20px; bottom: 0;
height: 2px;
background: var(--text-primary, #fff);
border-radius: 2px;
}
/* Flow: barwa i kreska marki Flow, gdy jesteśmy na stronie Flow */
.nav-flow.is-current .nav-item-label { color: #3EAB87; }
.nav-flow.is-current::after { background: #3EAB87; }
/* Konfigurator: na desktopie tekst, glyph ukryty (mobile odwraca to niżej) */
.nav-konfig-icon { display: none; }
/* ═══ Topbar — kanoniczny układ (desktop ≥768): znak LEWO · nav ŚRODEK · koszyk PRAWO ═══
`nav.topbar` (element+klasa) ma wyższą specyficzność niż per-stronowe `.topbar`,
więc ODSTĘPY są STAŁE na każdej stronie (bije rozjazdy: checkout 40px, moduły
gap:8px, idea bez flex:1). Ruszamy WYŁĄCZNIE layout i odstępy — tło oraz stany
(idea przezroczysta, index nad filmem) zostają per-strona. Wartości odstępów =
ze strony głównej (padding 48, label 20). Mobile ≤767 nietknięty: niżej nadpisuje
go `.topbar{display:block!important}`. Configurator też centrowany: jego
„Zestawy" (preset-controls) siedzi WEWNĄTRZ .topbar-nav, więc bar ma te same 3
dzieci (znak / nav / koszyk) co reszta i grid działa 1:1. */
@media (min-width: 768px) {
nav.topbar {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 0;
padding: 0 48px;
height: 48px;
}
nav.topbar .topbar-brand {
grid-column: 1;
justify-self: start;
margin-right: 0;
font-size: 20px;
}
nav.topbar .topbar-nav {
grid-column: 2;
justify-self: center;
display: flex;
align-items: center;
height: 48px;
gap: 0;
flex: none;
}
nav.topbar .topbar-right {
grid-column: 3;
justify-self: end;
margin-left: 0 !important; /* cart.js daje inline margin-left:auto — przy gridzie zbędny */
}
nav.topbar .nav-item-label { padding: 0 20px; }
}
/* ─── IDEA nav item (link with subtitle) ─── */
.nav-idea {
text-decoration: none;
position: relative;
padding-right: 4px;
}
.nav-idea .nav-item-label {
padding-right: 6px;
}
.nav-idea-sub {
display: inline-block;
font-size: 9px;
font-weight: 500;
color: var(--accent, #e85d04);
letter-spacing: 0.5px;
text-transform: none;
font-style: italic;
padding-right: 16px;
border-right: 1px solid var(--border-mid, var(--border, rgba(255,255,255,0.12)));
margin-right: 6px;
opacity: 0.85;
transition: opacity 0.15s;
}
.nav-idea:hover .nav-item-label,
.nav-idea.active .nav-item-label { color: var(--text-primary); }
.nav-idea:hover .nav-idea-sub { opacity: 1; }
.nav-idea.active .nav-idea-sub { opacity: 1; }
@media (max-width: 1100px) {
.nav-idea-sub { display: none; }
}
/* ─── Light mode nav ─── */
[data-theme="light"] .nav-item-label { color: var(--nav-label, rgba(0,0,0,0.45)); }
[data-theme="light"] .nav-item:hover .nav-item-label,
[data-theme="light"] .nav-item.active .nav-item-label { color: #111; }
[data-theme="light"] .nav-cta { border-color: rgba(0,0,0,0.12); }
/* ─── SYSTEM hover dropdown ─── */
.nav-system { position: static; }
.mega-dropdown-system {
position: fixed; top: 48px; left: 0; width: 100%;
background: var(--glass-bg-heavy, rgba(10,10,10,0.96));
backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
padding: 0 48px 0 0;
opacity: 0; visibility: hidden; transform: translateY(-6px);
/* Zamknięty -> ZERO wysokości. Panel jest position:fixed i siedzi w
.nav-system wewnątrz flexowego .topbar. iOS Safari dolicza wysokość
fixed-potomków flex-kontenera do scrollable height -> giga whitespace pod
stroną (lekcja z CLAUDE.md). max-height:0 + zerowy padding pionowy zeruje
box gdy zamknięty; przy otwarciu przywracamy. */
max-height: 0; overflow: hidden;
transition: opacity 0.2s ease, visibility 0.2s, transform 0.2s ease;
z-index: 998;
}
.nav-system:hover .mega-dropdown-system,
.nav-system.open .mega-dropdown-system {
opacity: 1; visibility: visible; transform: translateY(0);
max-height: 90vh; padding-top: 24px; padding-bottom: 28px;
}
.mega-inner { display: flex; align-items: center; }
.mega-video-side {
flex: 0 0 auto;
padding: 0 40px 0 48px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: flex-start;
}
.mega-video-placeholder {
width: 100%;
aspect-ratio: 16/9;
border-radius: 8px;
background: rgba(255,255,255,0.03);
border: 1px dashed rgba(255,255,255,0.1);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.mega-video-label {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.5px;
color: rgba(255,255,255,0.2);
font-style: italic;
}
.mega-wireframes {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
width: 200px;
max-width: 100%;
}
.mega-wireframe-cell {
position: relative;
aspect-ratio: 16/9;
overflow: hidden;
min-width: 0;
}
.mega-wireframe-cell picture {
position: absolute;
inset: 0;
display: block;
}
.mega-wireframe-cell img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.mega-cols { display: flex; gap: 64px; }
.mega-col { display: flex; flex-direction: column; gap: 8px; min-width: 120px; }
.mega-col-title {
font-size: 10px; font-weight: 600; letter-spacing: 1px;
text-transform: uppercase; color: var(--text-secondary, rgba(255,255,255,0.5));
margin-bottom: 10px;
}
/* legacy link cols (unused now but kept for safety) */
.mega-col a {
font-size: 13px; font-weight: 400; color: var(--text-secondary, rgba(255,255,255,0.5));
text-decoration: none; transition: color 0.12s;
}
.mega-col a:hover { color: var(--text-primary); }
/* spec-sheet col */
.mega-col-spec { gap: 0; min-width: 180px; }
.mega-spec-line {
display: flex; gap: 16px; align-items: baseline;
padding: 6px 0;
border-bottom: 1px solid var(--border-subtle, var(--border, rgba(255,255,255,0.06)));
}
.mega-col-spec .mega-spec-line:last-child { border-bottom: none; }
.mega-spec-key {
font-size: 10px; font-weight: 500; letter-spacing: 0.4px;
text-transform: lowercase; color: var(--text-secondary, rgba(255,255,255,0.45));
min-width: 68px; flex-shrink: 0;
}
.mega-spec-val {
font-size: 12px; font-weight: 500; letter-spacing: 0.1px;
color: var(--text-primary, #fff);
}
/* ═══ Mega panel MODUŁY — struktura kafelka z designu, vibe (ciemny/jasny)
wg motywu strony. Lokalne tokeny mapują na zmienne motywu, więc cała
reszta reguł jest theme-aware bez zmian. ═══ */
.mega-panel-moduły {
position: fixed; top: 48px; left: 0; width: 100%;
background: var(--glass-bg-heavy, rgba(10,10,10,0.96));
backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
padding: 44px 48px 48px; z-index: 997;
opacity: 0; visibility: hidden; transform: translateY(-8px);
transition: opacity 0.22s ease, visibility 0.22s, transform 0.22s ease;
--paper: var(--card-bg, rgba(255,255,255,0.04));
--paper-2: rgba(127,127,127,0.06);
--ink: var(--text-primary, #fff);
--ink-2: var(--text-secondary, rgba(255,255,255,0.5));
--ink-3: var(--text-ghost, rgba(255,255,255,0.36));
--line: var(--border, var(--border-subtle, rgba(255,255,255,0.08)));
--line-2: var(--border-mid, rgba(255,255,255,0.16));
/* jedna rodzina (duch Vitsoe): Switzer wszędzie. Liczby wyrównuje .tnum (tabular-nums),
więc nie potrzeba osobnego monospace. */
--mm-mono: var(--font-sans, 'Switzer', system-ui, sans-serif);
font-family: var(--font-sans, 'Switzer', system-ui, sans-serif); color: var(--ink);
}
.mega-panel-moduły.open { opacity: 1; visibility: visible; transform: translateY(0); }
.mm-grid-wrap { position: relative; max-width: 1320px; margin: 0 auto; }
.mega-module-grid {
display: flex; gap: 16px;
overflow-x: auto; align-items: flex-start; /* flex-start: hover-expand nie rozpycha rzędu */
padding: 8px 48px 34px; /* boczne = wcięcie; dolne = miejsce na cień hover (inaczej overflow tnie cień) */
scrollbar-width: none; /* chowamy brzydki systemowy scrollbar */
}
.mega-module-grid::-webkit-scrollbar { display: none; }
/* Afordancja scrolla: chevron-right „jest więcej", znika po pierwszym scrollu (.mm-cue-on z JS) */
.mm-scroll-cue {
position: absolute; top: 64px; right: 8px;
width: 40px; height: 40px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
border: none; cursor: pointer;
background: var(--paper-2, #fff); color: var(--ink, #111);
box-shadow: 0 4px 18px rgba(0,0,0,0.22);
opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.mm-cue-on .mm-scroll-cue { opacity: 1; pointer-events: auto; animation: mmCueNudge 1.4s ease-in-out infinite; }
@keyframes mmCueNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
.mega-module-card {
flex: 0 0 200px; /* stała szerokość karty w scrollu poziomym */
background: rgba(255,255,255,0.05); border: none;
border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--ink);
transition: background 0.18s ease, box-shadow 0.22s ease, transform 0.18s ease;
}
.mega-module-card:hover {
background: rgba(255,255,255,0.08);
box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 8px 22px rgba(0,0,0,0.09); /* rozbity, miękki, niskie opacity */
transform: translateY(-3px);
}
/* ── Ramka: top view, kadrowany od dołu (overflow:hidden) ── */
.mm-frame {
position: relative; margin: 0; aspect-ratio: 4 / 3;
background: rgba(255,255,255,0.07); /* biała kafelka jak .qmod-thumb (dark); light = #fff niżej */
overflow: hidden;
}
.mm-floor {
position: absolute; inset: 0;
background: radial-gradient(ellipse 70% 50% at 50% 72%, rgba(127,127,127,0.10) 0%, transparent 70%);
}
.mm-product {
position: absolute; inset: 4% 5%;
display: flex; align-items: center; justify-content: center;
}
/* Żywy rzut top z .glb (WebGL canvas) — realna geometria, bez zniekształceń */
.mm-canvas {
display: block; width: 100%; height: 100%;
object-fit: contain;
opacity: 0; transition: opacity 0.45s ease;
}
.mm-canvas.is-rendered { opacity: 1; }
.mm-crop {
position: absolute; bottom: 12px; left: 12px; right: 12px;
display: flex; align-items: center; gap: 8px; pointer-events: none;
opacity: 0; transition: opacity 0.2s ease;
}
.mega-module-card:hover .mm-crop { opacity: 1; }
.mm-crop-line {
flex: 1; height: 1px;
background: linear-gradient(to right, transparent 0, var(--line-2) 10px, var(--line-2) calc(100% - 10px), transparent 100%);
}
.mm-crop-label {
font-family: var(--mm-mono); font-size: 9px; letter-spacing: 0.08em;
color: var(--ink-3); background: var(--paper-2); padding: 0 5px;
}
.mm-fmeta {
position: absolute; font-family: var(--mm-mono); font-size: 9px;
letter-spacing: 0.08em; color: var(--ink-3);
}
.mm-tl { top: 10px; left: 11px; }
.mm-tr { top: 10px; right: 11px; }
/* ── Meta ── */
.mm-meta { padding: 14px 15px 15px; }
.mm-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mm-name { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); } /* = .qmod-name */
.mm-price { font-size: 12px; color: var(--ink-2); white-space: nowrap; flex-shrink: 0; } /* = .qmod-price (muted, sans, nie pomarancz) */
.mega-panel-moduły .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.mm-more {
max-height: 0; opacity: 0; overflow: hidden;
transition: max-height 0.32s ease, opacity 0.25s ease, margin-top 0.32s ease;
}
.mega-module-card:hover .mm-more { max-height: 240px; opacity: 1; margin-top: 12px; }
.mm-desc { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.mm-specs {
margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line);
display: grid; grid-template-columns: 1fr; row-gap: 6px;
}
.mm-specs > div {
display: flex; justify-content: space-between; gap: 10px;
font-family: var(--mm-mono); font-size: 12px; letter-spacing: 0.02em;
}
.mm-specs dt { margin: 0; color: var(--ink-2); letter-spacing: 0.04em; }
.mm-specs dd { margin: 0; color: var(--ink); text-align: right; white-space: nowrap; }
.mm-actions { display: none; justify-content: flex-end; align-items: center; margin-top: 14px; } /* pill „+ Dodaj" tylko na hover, do prawej */
.mega-module-card:hover .mm-actions { display: flex; }
.mm-action { /* = .qmod-add: pomarańczowy pill, nie podkreślony link */
display: inline-flex; align-items: center; justify-content: center;
font-size: 12.5px; font-weight: 600; letter-spacing: 0.3px;
color: #fff; background: var(--accent, #e85d04); border: 1px solid var(--accent, #e85d04);
border-radius: 999px; padding: 9px 16px; min-height: 38px; box-sizing: border-box;
transition: transform 0.1s ease;
}
.mega-module-card:active .mm-action { transform: scale(0.97); }
.mm-plus { display: inline-block; margin-left: 0.18em; transition: transform 0.2s ease; } /* strzałka „→" po „Zobacz" */
.mm-action:hover { background: #f2691a; border-color: #f2691a; } /* lekkie podświetlenie */
.mm-action:hover .mm-plus { transform: translateX(3px); } /* strzałka wjeżdża w prawo (prowadzi do strony) */
/* ─── Overlay ─── */
.mega-overlay {
display: none; position: fixed; top: 48px; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.4); z-index: 996;
}
.mega-overlay.open { display: block; }
/* ─── Active nav state ─── */
.nav-moduły.active .nav-item-label { color: var(--text-primary); }
/* ─── Light mode ─── */
[data-theme="light"] .mega-dropdown-system,
[data-theme="light"] .mega-panel-moduły,
[data-theme="light"] .mega-panel-zestawy {
background: rgba(245,245,245,0.97);
border-bottom-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .mega-module-card,
[data-theme="light"] .mz-tile { background: rgba(0,0,0,0.035); }
[data-theme="light"] .mega-module-card:hover,
[data-theme="light"] .mz-tile:hover { background: rgba(0,0,0,0.06); box-shadow: 0 2px 8px rgba(0,0,0,0.03), 0 8px 20px rgba(0,0,0,0.05); }
[data-theme="light"] .mm-frame,
[data-theme="light"] .mz-thumb { background: #fff; } /* biała kafelka (light) */
/* ─── ZESTAWY mega-panel (poza configuratorem) — presety + aparaty, full-width jak MODUŁY ─── */
.mega-panel-zestawy {
position: fixed; top: 48px; left: 0; width: 100%;
background: var(--glass-bg-heavy, rgba(10,10,10,0.96));
backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
padding: 24px 48px 28px; z-index: 997;
opacity: 0; visibility: hidden; transform: translateY(-8px);
transition: opacity 0.22s ease, visibility 0.22s, transform 0.22s ease;
--paper: var(--card-bg, rgba(255,255,255,0.04));
--paper-2: rgba(127,127,127,0.06);
--ink: var(--text-primary, #fff);
--ink-2: var(--text-secondary, rgba(255,255,255,0.5));
--ink-3: var(--text-ghost, rgba(255,255,255,0.36));
--line: var(--border, rgba(255,255,255,0.08));
--line-2: var(--border-mid, rgba(255,255,255,0.16));
font-family: var(--font-sans, 'Switzer', system-ui, sans-serif); color: var(--ink);
}
.mega-panel-zestawy.open { opacity: 1; visibility: visible; transform: translateY(0); }
.mz-wrap { max-width: 1480px; margin: 0 auto; }
.mz-body { display: flex; align-items: flex-start; gap: 24px; }
/* Lewa: poziomy strip kafli presetów (200px = kafel MODUŁY) */
.mz-sets {
flex: 1 1 auto; min-width: 0;
display: grid; grid-auto-flow: column; grid-auto-columns: 200px; gap: 16px;
overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.mz-sets::-webkit-scrollbar { display: none; }
/* Sznyt 1:1 z .mega-module-card (MODUŁY): frosted karta + biały kafel renderu
(.mz-thumb = .mm-frame), hover = rozbity miekki cien + lift. Wartosci trzymane
identyczne w dark / [data-theme=light] / @media light, zeby look sie nie rozjechal. */
.mz-tile {
display: flex; flex-direction: column; border-radius: 16px; overflow: hidden;
text-decoration: none; color: var(--ink); border: none;
background: rgba(255,255,255,0.05);
transition: background 0.18s ease, box-shadow 0.22s ease, transform 0.18s ease;
}
.mz-tile:hover {
background: rgba(255,255,255,0.08);
box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 8px 22px rgba(0,0,0,0.09);
transform: translateY(-3px);
}
.mz-thumb {
width: 100%; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.07); /* biala kafelka = .mm-frame (light = #fff nizej) */
overflow: hidden;
}
.mz-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Per-preset dopasowanie wielkości renderu w kafelku — źródłowe .webp różnią się
kadrowaniem, więc część modeli wychodzi za duża na kafel. multicam = referencja
(idealnie wpasowany), reszta delikatnie pomniejszona. Hook = ?preset= w href. */
.mz-tile[href$="preset=foto"] .mz-thumb img,
.mz-tile[href$="preset=magda"] .mz-thumb img,
.mz-tile[href$="preset=video"] .mz-thumb img { transform: scale(0.9); }
/* starter: otwarta klapa = wyższy model, sam scale nie wystarcza (cover ścinał
dolną tackę). object-position przesuwa okno kadru w dół (dół wraca, klapa ma
zapas); translateY podnosi model w kaflu, scale lekko go zmniejsza. */
.mz-tile[href$="preset=starter"] .mz-thumb img { transform: translateY(-10px) scale(0.82); object-position: 50% 65%; }
.mz-thumb.is-empty::after { content: ''; width: 38%; aspect-ratio: 1; border-radius: 10px; border: 1.5px dashed var(--line-2); opacity: 0.5; }
.mz-meta { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px 13px; }
.mz-cat { font-size: 9.5px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--ink-3); }
.mz-name { font-size: 15px; font-weight: 600; letter-spacing: -0.2px; color: var(--ink); line-height: 1.2; }
.mz-desc { font-size: 11px; color: var(--ink-2); line-height: 1.35; }
.mz-price { display: flex; align-items: center; gap: 5px; font-size: 16px; font-weight: 600; color: var(--ink); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.mz-tile:hover .mz-price { color: var(--accent, #e85d04); }
/* Oszczędność zestawu („taniej o X zł") = outline pill odsunięty na prawy
brzeg wiersza ceny (margin-left: auto), nie doklejony do kwoty. */
.mz-price small { margin-left: auto; padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 9px; font-weight: 500; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; }
/* Prawa: sekcja aparatów — soft frosted, spojny z nowym lookiem kafli.
Koniec twardych ramek / oborowanych boxow „starej epoki": fill zamiast stroke,
radius 16/11, hover = rozjasnienie. Neutralne szarosci rgba(127,127,127,x) =
jeden zestaw wartosci czyta sie poprawnie w dark I light (bez per-theme override).
Mechanika (markup + JS: .is-open / .active / [hidden]) bez zmian. */
.mz-cameras {
flex: 0 0 380px; border-radius: 16px; padding: 16px 18px 18px;
background: rgba(127,127,127,0.05); border: 1px solid transparent;
transition: background 0.18s ease, border-color 0.18s ease;
}
.mz-cameras.is-open { border-color: rgba(232,117,26,0.5); } /* subtelny akcent zamiast pelnej pomaranczowej ramki */
.mz-cam-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 13px; }
.mz-cam-title { font-size: 15px; font-weight: 600; letter-spacing: -0.2px; color: var(--ink); }
.mz-cam-hint { font-size: 11px; color: var(--ink-2); line-height: 1.35; }
.mz-brands { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.mz-brand {
font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: pointer;
background: rgba(127,127,127,0.10); border: none; border-radius: 11px; padding: 10px 8px;
transition: background 0.16s ease, color 0.16s ease, transform 0.1s ease;
}
.mz-brand:hover { background: rgba(127,127,127,0.17); }
.mz-brand:active { transform: scale(0.97); }
.mz-brand.active { background: var(--accent, #e85d04); color: #fff; }
.mz-models { margin-top: 14px; }
.mz-models[hidden] { display: none; }
.mz-models-label { display: block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ink-3); margin-bottom: 10px; }
.mz-models-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.mz-model {
display: flex; flex-direction: column; gap: 2px; text-decoration: none; padding: 10px 9px;
border-radius: 11px; border: none; background: rgba(127,127,127,0.10);
transition: background 0.16s ease, transform 0.1s ease;
}
.mz-model:hover { background: rgba(127,127,127,0.17); transform: translateY(-1px); }
.mz-model-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.mz-model-desc { font-size: 9.5px; color: var(--ink-2); }
/* ─── MOBILE (≤767px) ─── */
@media (max-width: 767px) {
/* Hide desktop nav items + desktop panels */
.nav-moduły,
.nav-system,
.nav-zestawy,
.nav-idea,
.nav-flow,
.mega-panel-moduły,
.mega-panel-zestawy,
.mega-overlay { display: none !important; }
/* ─── Topbar globalnie = pattern z configuratora: wordmark wycentrowany na
górze, hamburger w prawym rogu, koszyk/zębatka w prawym klastrze. ─── */
.topbar { display: block !important; padding: 0 10px !important; }
.topbar-nav { flex: none; }
.topbar-brand {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0 !important;
font-size: clamp(26px, 8vw, 32px);
letter-spacing: -1.2px;
line-height: 1;
white-space: nowrap;
}
/* Koszyk + zębatka w prawym klastrze (tuż przy hamburgerze). KONFIGURUJ
chowamy, bo jest w menu hamburgera (mm-cta). */
.topbar-right {
position: absolute !important;
top: 50%;
right: 64px; /* odstęp od hamburgera (right:16 + 32 szer. + ~16 oddechu), à la Apple */
left: auto;
transform: translateY(-50%);
margin: 0 !important;
}
.hc-config-link { display: none !important; }
/* Konfigurator na mobile: NIE tekst, tylko glyph po lewej — obok ikony BLOCK
(qmod-trigger). Gdy BLOCK jest (większość stron) → tuż za nim (left:50px);
gdy go nie ma (flow, modules/) → przy krawędzi (left:10px). */
.nav-konfigurator {
position: absolute;
top: 0;
left: 50px; /* domyślnie tuż ZA ikoną BLOCK (pad 10 + 40 szer.) — bez :has też bez kolizji */
width: 40px;
height: 48px;
margin: 0 !important;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-primary, #fff);
}
.topbar:not(:has(.qmod-trigger)) .nav-konfigurator { left: 10px; } /* strony bez BLOCK (flow, modules/) → do krawędzi */
.nav-konfigurator .nav-item-label { display: none; }
/* 24px viewBox z kostką od krawędzi do krawędzi = ta sama wysokość glyphu co BLOCK (qmod svg 20px) */
.nav-konfigurator .nav-konfig-icon { display: block; width: 20px; height: 20px; }
/* Ujednolicenie znakow topbara na mobile: ten sam pion (srodek 48px paska) i box 20px.
qmod-trigger jest in-flow u gory (cy 20) -> height:48 wypelnia pasek, ikona na srodku
(cy 24) jak koszyk i hamburger. Wszystkie svg do 20px. */
.topbar .qmod-trigger { height: 48px; }
.topbar .qmod-trigger svg,
.topbar .hc-topbar-btn svg,
.topbar .mm-hamburger svg { width: 20px; height: 20px; }
/* Hamburger — adaptive color, idle nudge animation */
@keyframes mm-idle-nudge {
0%, 88%, 100% { transform: rotate(0deg); }
92% { transform: rotate(12deg); }
96% { transform: rotate(-8deg); }
}
.mm-hamburger {
display: flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
background: none; border: none; cursor: pointer; padding: 0;
flex-shrink: 0;
color: #e8e8e8;
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
margin: 0;
}
.mm-hamburger svg {
display: block;
transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
animation: mm-idle-nudge 5s ease-in-out 2s infinite;
}
.mm-hamburger.open svg { animation: none; }
/* Apple-style: dwie kreski morfują w czysty X na otwarciu (każda kreska osobno). */
.mm-hamburger .mm-bread {
transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transform-box: fill-box; transform-origin: center;
}
.mm-hamburger.open .mm-bread-top { transform: translateY(3.5px) rotate(45deg); }
.mm-hamburger.open .mm-bread-bottom { transform: translateY(-3.5px) rotate(-45deg); }
/* Fullscreen overlay — dark default */
.mm-overlay {
display: flex; flex-direction: column;
position: fixed; inset: 0; z-index: 9999;
background: #0a0a0a;
transform: translateY(-100%);
transition: transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mm-overlay.open { transform: translateY(0); }
.mm-overlay-header {
display: flex; align-items: center; justify-content: space-between;
padding: 0 20px; height: 48px; flex-shrink: 0;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mm-overlay-brand {
font-size: 16px; font-weight: 600; letter-spacing: -0.5px;
color: #fff; text-decoration: none;
}
.mm-overlay-close {
width: 44px; height: 44px; display: flex; align-items: center;
justify-content: center; background: none; border: none;
cursor: pointer; color: #fff;
font-size: 22px; line-height: 1;
}
.mm-overlay-body { flex: 1; overflow-y: auto; padding: 24px 20px 48px; }
/* Section label */
.mm-section-label {
font-size: 10px; font-weight: 600; letter-spacing: 1px;
text-transform: uppercase;
color: rgba(255,255,255,0.4);
margin-bottom: 4px;
}
/* "Wszystkie moduły →" = wyraźny, klikalny przycisk do pełnego katalogu
(wcześniej mała etykieta, gubiła się i nie wyglądała na link). Pełna
szerokość, ramka + tło akcentu, strzałka dosunięta do prawej. */
a.mm-section-link {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
width: 100%;
margin: 0 0 14px;
padding: 14px 16px;
font-size: 13px; font-weight: 600; letter-spacing: 0.08em; -webkit-font-smoothing: auto; text-transform: uppercase;
color: var(--accent) !important; text-decoration: none;
background: rgba(232,93,4,0.09);
border: 1px solid rgba(232,93,4,0.38);
border-radius: 10px;
transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
a.mm-section-link:hover { background: rgba(232,93,4,0.15); border-color: var(--accent); }
a.mm-section-link:active { transform: scale(0.99); }
a.mm-section-link .mm-section-arrow { font-size: 15px; line-height: 1; flex-shrink: 0; }
/* Module card strip — horizontal scroll */
.mm-card-strip {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 8px;
margin: 8px -20px 0;
padding: 0 20px 12px;
scroll-padding-left: 20px; /* snap mandatory inaczej dosuwa 1. karte do krawedzi (padding-left "przewija sie" pod snap) */
}
.mm-card-strip::-webkit-scrollbar { display: none; }
/* Sznyt 1:1 z .module-card (sekcja MODUŁY na index): miekka karta bez ramki,
bialy kafel renderu 4/3, meta = nazwa po lewej + cena (muted, NIE pomarancz) po prawej */
.mm-card {
flex: 0 0 150px;
scroll-snap-align: start;
background: rgba(255,255,255,0.05);
border-radius: 16px;
overflow: hidden;
display: flex; flex-direction: column;
text-decoration: none;
}
.mm-card-thumb { width: 100%; aspect-ratio: 4 / 3; background: rgba(255,255,255,0.07); overflow: hidden;
display: flex; align-items: center; justify-content: center; }
.mm-card-thumb .mm-canvas {
width: 100%; height: 100%; object-fit: contain; display: block;
opacity: 0; transition: opacity 0.45s ease;
}
.mm-card-thumb .mm-canvas.is-rendered { opacity: 1; }
.mm-card-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } /* zestawy = statyczny thumb */
/* Zestaw bez okładki albo cover się nie załadował (404 po nieudanym generowaniu
w adminie) -> kropkowany placeholder zamiast ikony „broken image". Class .is-empty
dokłada mmThumbFallback() / mmZestawCard w mega-menu.js. Szary neutralny (nie
var(--line-2), bo ta zmienna żyje tylko w panelach desktopowych) -> czytelny i na
białym, i na ciemnym kaflu. */
.mm-card-thumb.is-empty::after { content: ''; width: 34%; aspect-ratio: 1; border-radius: 10px; border: 1.5px dashed rgba(127,127,127,0.55); opacity: 0.6; }
.mm-card-thumb.is-empty img { display: none; }
.mm-card-meta { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.mm-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mm-card-name {
font-size: 13px; font-weight: 600; letter-spacing: 0;
color: #fff;
}
.mm-card-price {
font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.5);
white-space: nowrap; flex-shrink: 0;
}
/* System spec section */
.mm-spec-section { margin-top: 28px; }
.mm-spec-section .mm-section-label { margin-bottom: 10px; }
.mm-spec-section .mega-spec-line { padding: 5px 0; }
.mm-spec-group + .mm-spec-group { margin-top: 12px; }
/* IDEA mobile link — mars-hero background + big habitat word */
.mm-idea-link {
display: flex;
flex-direction: column;
align-items: center; /* wordmark + podlinia wyśrodkowane */
text-align: center;
text-decoration: none;
padding: 38px 22px 34px;
margin: -24px -20px 24px;
/* Tło = „środek" widoku z idea: niebo Marsa ze słońcem prześwitującym przez
horyzont (ten sam gradient co .sky-fallback z sky.css, wariant dark). */
background:
radial-gradient(120% 90% at 50% 112%, #ff7a25 0%, #b34508 14%, #5a1a05 32%, #1a0604 60%, #0a0403 100%),
linear-gradient(to bottom, #050207 0%, #0a0504 60%, #1a0805 100%);
border-top: 1px solid rgba(232,93,4,0.28);
border-bottom: 1px solid rgba(232,93,4,0.28);
position: relative;
overflow: hidden;
}
.mm-idea-label {
font-family: var(--font-sans, 'Switzer', sans-serif);
font-size: clamp(40px, 13vw, 56px);
font-weight: 500;
color: #fff;
letter-spacing: -0.05em;
line-height: 0.9;
margin-bottom: 12px;
display: inline-flex;
align-items: flex-end;
gap: 0.08em;
text-shadow: 0 4px 28px rgba(0,0,0,0.55), 0 0 16px rgba(255,140,58,0.15);
}
.mm-idea-dot {
width: 0.2em;
height: 0.2em;
flex-shrink: 0;
margin-bottom: 0.1em;
filter: drop-shadow(0 2px 8px rgba(255,255,255,0.2));
}
.mm-idea-sub {
font-size: 12px;
font-weight: 500;
color: rgba(255,255,255,0.9);
letter-spacing: 0.3px;
font-style: italic;
text-shadow: 0 1px 10px rgba(0,0,0,0.55);
}
/* CTA */
.mm-cta {
display: block; margin-top: 28px;
background: #fff; color: #0a0a0a;
text-align: center; text-decoration: none;
font-size: 13px; font-weight: 600; letter-spacing: 0.08em; -webkit-font-smoothing: auto;
text-transform: uppercase; padding: 16px;
border-radius: 8px;
}
/* CTA przeniesiona na gore szuflady (pod IDEA-linkiem) — mniejszy odstep niz domyslne 28px */
.mm-cta-top { margin: 4px 0 18px; }
/* Zębatka admina przeniesiona z paska do menu (tylko zalogowany; wstrzykiwana
przez cart.js). Subtelny wiersz na dole szuflady, spójny look z resztą menu. */
.mm-admin-link {
display: flex; align-items: center; gap: 10px;
margin-top: 24px; padding: 14px 16px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 10px;
text-decoration: none;
color: rgba(255,255,255,0.6);
font-size: 11px; font-weight: 600; letter-spacing: 1px;
text-transform: uppercase;
transition: color 0.15s, border-color 0.15s;
}
.mm-admin-link svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.8; }
.mm-admin-link:hover { color: #fff; border-color: rgba(255,255,255,0.28); }
}
/* Light mode mobile overrides — use @media to match OS preference,
scoped with html:not([data-theme="dark"]) so forced-dark pages (idea.html) aren't affected */
@media (max-width: 767px) and (prefers-color-scheme: light) {
html:not([data-theme="dark"]) .mm-overlay { background: #f5f5f5; }
html:not([data-theme="dark"]) .mm-overlay-header { border-bottom-color: rgba(0,0,0,0.07); }
html:not([data-theme="dark"]) .mm-overlay-brand { color: #111; }
html:not([data-theme="dark"]) .mm-overlay-close { color: #111; }
html:not([data-theme="dark"]) .mm-section-label { color: rgba(0,0,0,0.35); }
html:not([data-theme="dark"]) .mm-card { background: rgba(0,0,0,0.04); }
html:not([data-theme="dark"]) .mm-card-thumb { background: #fff; }
html:not([data-theme="dark"]) .mm-card-name { color: #111; }
html:not([data-theme="dark"]) .mm-card-price { color: rgba(0,0,0,0.5); }
html:not([data-theme="dark"]) .mm-cta { background: #111; color: #f5f5f5; }
/* .mm-idea-link keeps mars-hero bg + white text in both themes (dark photo bg) */
/* SYSTEM spec section inside overlay — ensure contrast on light bg */
html:not([data-theme="dark"]) .mm-overlay .mega-col-title { color: rgba(0,0,0,0.5); }
html:not([data-theme="dark"]) .mm-overlay .mega-spec-key { color: rgba(0,0,0,0.45); }
html:not([data-theme="dark"]) .mm-overlay .mega-spec-val { color: #111; }
html:not([data-theme="dark"]) .mm-overlay .mega-spec-line { border-bottom-color: rgba(0,0,0,0.08); }
html:not([data-theme="dark"]) .mm-admin-link { color: rgba(0,0,0,0.55); border-color: rgba(0,0,0,0.12); }
html:not([data-theme="dark"]) .mm-admin-link:hover { color: #111; border-color: rgba(0,0,0,0.3); }
}
/* Keep legacy [data-theme="light"] attribute support for pages that explicitly force light */
@media (max-width: 767px) {
[data-theme="light"] .mm-overlay { background: #f5f5f5; }
[data-theme="light"] .mm-overlay-header { border-bottom-color: rgba(0,0,0,0.07); }
[data-theme="light"] .mm-overlay-brand { color: #111; }
[data-theme="light"] .mm-overlay-close { color: #111; }
[data-theme="light"] .mm-section-label { color: rgba(0,0,0,0.35); }
[data-theme="light"] .mm-card { background: rgba(0,0,0,0.04); }
[data-theme="light"] .mm-card-thumb { background: #fff; }
[data-theme="light"] .mm-card-name { color: #111; }
[data-theme="light"] .mm-card-price { color: rgba(0,0,0,0.5); }
[data-theme="light"] .mm-cta { background: #111; color: #f5f5f5; }
[data-theme="light"] .mm-admin-link { color: rgba(0,0,0,0.55); border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .mm-admin-link:hover { color: #111; border-color: rgba(0,0,0,0.3); }
}
/* Hide hamburger + overlay on desktop */
@media (min-width: 768px) {
.mm-hamburger, .mm-overlay { display: none !important; }
}
/* ─── Video placeholder light mode ─── */
@media (prefers-color-scheme: light) {
html:not([data-theme="dark"]) .mega-video-placeholder {
background: rgba(0,0,0,0.02);
border-color: rgba(0,0,0,0.08);
}
html:not([data-theme="dark"]) .mega-video-label { color: rgba(0,0,0,0.2); }
}
[data-theme="light"] .mega-video-placeholder {
background: rgba(0,0,0,0.02);
border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .mega-video-label { color: rgba(0,0,0,0.2); }
/* ─── Wireframe cells light mode (invert) ─── */
@media (prefers-color-scheme: light) {
html:not([data-theme="dark"]) .mega-wireframe-cell img { filter: invert(1); }
}
[data-theme="light"] .mega-wireframe-cell img { filter: invert(1); }
/* ─── SYSTEM LIGHT MODE (via OS preference) ───
Scoped with :not([data-theme="dark"]) so pages that force dark (idea.html)
aren't affected when the user's OS is in light mode. */
@media (prefers-color-scheme: light) {
html:not([data-theme="dark"]) .mm-hamburger { color: #1a1a18; }
html:not([data-theme="dark"]) .nav-item-label { color: rgba(0,0,0,0.55); }
html:not([data-theme="dark"]) .nav-item:hover .nav-item-label,
html:not([data-theme="dark"]) .nav-item.active .nav-item-label { color: #111; }
html:not([data-theme="dark"]) .nav-idea-sub { border-right-color: rgba(0,0,0,0.12); }
html:not([data-theme="dark"]) .mega-dropdown-system,
html:not([data-theme="dark"]) .mega-panel-moduły,
html:not([data-theme="dark"]) .mega-panel-zestawy {
background: rgba(245, 245, 245, 0.97);
border-bottom-color: rgba(0, 0, 0, 0.08);
}
html:not([data-theme="dark"]) .mega-col-title { color: rgba(0, 0, 0, 0.5); }
html:not([data-theme="dark"]) .mega-spec-key { color: rgba(0, 0, 0, 0.45); }
html:not([data-theme="dark"]) .mega-spec-val { color: #111; }
html:not([data-theme="dark"]) .mega-spec-line { border-bottom-color: rgba(0, 0, 0, 0.08); }
html:not([data-theme="dark"]) .mega-module-card,
html:not([data-theme="dark"]) .mz-tile { background: rgba(0,0,0,0.035); }
html:not([data-theme="dark"]) .mm-frame,
html:not([data-theme="dark"]) .mz-thumb { background: #fff; }
html:not([data-theme="dark"]) .mega-module-card:hover,
html:not([data-theme="dark"]) .mz-tile:hover {
background: rgba(0,0,0,0.06);
box-shadow: 0 2px 8px rgba(0,0,0,0.03), 0 8px 20px rgba(0,0,0,0.05);
}
html:not([data-theme="dark"]) .mega-module-name { color: #111; }
html:not([data-theme="dark"]) .mm-specs dt { color: rgba(0, 0, 0, 0.55); }
html:not([data-theme="dark"]) .mm-specs dd { color: #111; }
html:not([data-theme="dark"]) .mega-overlay { background: rgba(0, 0, 0, 0.25); }
}
/* ════════════════════════════════════════════════════════════════════════
WORDMARK — znak „block" zamiast generycznej kropki (globalnie, jak w
nagłówku hamburgera). Keycap = kolor tekstu, szczeliny = kolor tła paska,
więc czyta się jak wycięcia i działa w dark/light. Skala 0.2em jak w
.mm-idea-dot. Wstrzykiwane do .topbar-brand przez mega-menu.js.
════════════════════════════════════════════════════════════════════════ */
/* Marka siedzi jak kropka na końcu „habitat": dolna krawędź znaku na linii bazowej
fontu. Znak = inline-block glyph z vertical-align:baseline (NIE flex item). Flex +
align-items:baseline synchronizował baseline SVG przez syntezę zależną od
line-height i silnika (iOS Safari opuszczał znak niżej niż Blink) — znak spadał
pod tekst. Inline-replaced baseline jest zdefiniowany identycznie we wszystkich
silnikach, więc znak zawsze ląduje na linii bazowej. */
.topbar-brand { display: inline-block; }
.topbar-brand .brand-mark {
width: 0.2em;
height: 0.2em;
margin-left: 0.12em;
display: inline-block;
vertical-align: -0.04em; /* delikatnie POD linię bazową — jak overshoot prawdziwej kropki (na samej bazie czytało się minimalnie za wysoko) */
}
.topbar-brand .brand-mark .bm-key { fill: currentColor; }
.topbar-brand .brand-mark .bm-slot { fill: var(--bg-elevated, var(--bg, #0a0a0a)); }
/* Scroll-reveal TYLKO na mobile (≤767px): na desktopie logo w topbarze jest
ZAWSZE widoczne (życzenie właściciela), więc reveal nie obowiązuje. Na mobile
marka jest ukryta póki wielki hero-wordmark jest w kadrze (index/idea), a
pojawia się gdy zjedzie z ekranu. Klasy steruje mega-menu.js; bez JS marka
zostaje widoczna. */
@media (max-width: 767px) {
.topbar-brand.brand-reveal {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s;
}
.topbar-brand.brand-reveal.brand-shown {
opacity: 1;
visibility: visible;
}
}
/* ── HabitatDragScroll: kanoniczny poziomy drag-scroll (kursory; logika w mega-menu.js) ── */
.hab-dragscroll { cursor: grab; }
.hab-dragscroll:active { cursor: grabbing; }
/* ── Admin glyph: pływający skrót do panelu (wstrzykiwany przez mega-menu.js,
TYLKO gdy cookie hab_admin=1, czyli zalogowany admin). Znak block jak
w brand-marku: czarny na light, jasny na dark; malutki, nie wchodzi
w drogę treści (dyskretna opacity, hover budzi). ── */
#hab-admin-glyph {
position: fixed;
right: 14px;
bottom: calc(14px + env(safe-area-inset-bottom, 0px));
z-index: 990; /* nad treścią, pod mega-panelami (996+) i overlay'ami */
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.38;
transition: opacity 0.15s ease, transform 0.15s ease;
-webkit-tap-highlight-color: transparent;
}
#hab-admin-glyph:hover { opacity: 1; transform: translateY(-1px); }
#hab-admin-glyph svg { width: 20px; height: 20px; display: block; }
#hab-admin-glyph .hag-key { fill: #e8e8e8; } /* dark (default): jasny glif */
#hab-admin-glyph .hag-slot { fill: rgba(10, 5, 4, 0.75); }
@media (prefers-color-scheme: light) {
#hab-admin-glyph .hag-key { fill: #1a1a1a; } /* light: czarny glif */
#hab-admin-glyph .hag-slot { fill: rgba(255, 255, 255, 0.85); }
}
@media (hover: none) and (pointer: coarse) {
#hab-admin-glyph { opacity: 0.5; } /* dotyk nie ma hovera — trochę wyraźniej */
}
/* Mini-kwadrat „edytuj moduł" NAD glifem admina (tylko strony produktowe,
wstrzykiwany razem z glifem): one-click deep-link admin.html#edit=. */
#hab-admin-edit {
position: fixed;
right: 14px;
bottom: calc(52px + env(safe-area-inset-bottom, 0px)); /* 14 + 32 glif + 6 przerwy */
z-index: 990;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.38;
transition: opacity 0.15s ease, transform 0.15s ease;
-webkit-tap-highlight-color: transparent;
}
#hab-admin-edit:hover { opacity: 1; transform: translateY(-1px); }
#hab-admin-edit svg { width: 20px; height: 20px; display: block; }
#hab-admin-edit .hae-key { fill: #e8e8e8; }
#hab-admin-edit .hae-pen { fill: rgba(10, 5, 4, 0.75); }
@media (prefers-color-scheme: light) {
#hab-admin-edit .hae-key { fill: #1a1a1a; }
#hab-admin-edit .hae-pen { fill: rgba(255, 255, 255, 0.85); }
}
@media (hover: none) and (pointer: coarse) {
#hab-admin-edit { opacity: 0.5; }
}
/* ════════════════════════════════════════════════════════════════════════
ROZBUDOWANY FOOTER — jedno źródło. Wstrzykiwany przez mega-menu.js na każdej
stronie z mega-menu (POZA konfiguratorem; checkout nie ładuje mega-menu),
zastępuje stary per-stronowy