/* ══════════════════════════════════════════════════════ Kolekcje Mega Menu v1.4.2 ══════════════════════════════════════════════════════ */ :root { --kmm-blue: #047FDB; --kmm-blue-light: #eff6ff; --kmm-blue-border: #93c5fd; } /* ── Desktop dropdown (position: fixed → pełna szerokość strony) ── */ /* body > .kmm-dropdown: portal przeniesiony przez JS bezpośrednio na . Cel: iOS Safari / macOS Safari tracą position:fixed gdy przodek ma transform. Riode animuje sticky nagłówek przez transform:translateY – dropdown musi wyjść poza ten kontekst, inaczej "jedzie" ze stroną na iPhone/iPad/Mac. */ .has-kmm > .kmm-dropdown, body > .kmm-dropdown { position: fixed; left: 0; right: 0; /* top ustawiany przez JS jednorazowo w momencie otwierania */ top: -9999px; background: #fff; border-bottom: 3px solid #1a1a1a; z-index: 99999; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease, visibility .2s; } /* Scrollowanie wewnątrz portalu (desktop) – max-height ustawia JS przy otwarciu */ body > .kmm-dropdown { overflow-y: auto; overscroll-behavior: contain; } /* Otwierany przez JS */ .has-kmm.kmm-active > .kmm-dropdown, .has-kmm:focus-within > .kmm-dropdown, body > .kmm-dropdown.kmm-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } /* Wewnętrzny kontener – dopasowany do szerokości strony */ .kmm-inner { max-width: calc(var(--rio-container-width, 1220px) + 40px); margin: 0 auto; padding: 32px 20px 36px; } /* ── Siatka ─────────────────────────────────────────── */ .kmm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; } /* ── Karta ──────────────────────────────────────────── */ .kmm-card { display: flex; flex-direction: column; text-decoration: none !important; color: #222; border-radius: 8px; overflow: hidden; border: 1.5px solid #e8e8e8; background: #fff; transition: border-color .18s, box-shadow .18s, transform .18s; } .kmm-card:hover { border-color: #999; box-shadow: 0 8px 24px rgba(0, 0, 0, .1); transform: translateY(-3px); color: #222; } .kmm-grid a { padding: 0px !important; } /* Aktywna karta – obecna kategoria */ .kmm-card--active { border-color: var(--kmm-blue) !important; border-width: 2px !important; box-shadow: 0 4px 16px rgba(37, 99, 235, .15) !important; } /* Zdjęcie – pełne, bez przycinania; obraz dyktuje wysokość */ .kmm-card__img { position: relative; background: #f4f4f4; line-height: 0; } .kmm-card__img img { width: 100%; height: auto; display: block; transition: transform .35s ease; } .kmm-card:hover .kmm-card__img img { transform: scale(1.04); } /* Tekst */ .kmm-card__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; border-top: 1px solid #f0f0f0; } .kmm-card__name { font-size: 1.2rem; font-weight: 600; line-height: 1.3; color: #1a1a1a; } .kmm-card__count { font-size: 1rem; color: #999; font-weight: 400; } /* ── Active state: link "Kolekcje" w menu gdy jesteśmy w podkategorii ── */ .has-kmm.kmm-parent-active > a, .has-kmm.kmm-parent-active > a:hover { color: var(--kmm-blue) !important; position: relative; } /* ══════════════════════════════════════════════════════ MOBILE (≤ 991px) — dark theme Rozwijanie w dół, bez floatującego okna ══════════════════════════════════════════════════════ */ @media (max-width: 991px) { /* Portal na jest ukryty na mobile – tam używamy klonów wstrzykniętych do

*/ body > .kmm-dropdown { display: none !important; overflow-y: visible !important; max-height: none !important; } /* Dropdown jest w przepływie dokumentu */ .has-kmm > .kmm-dropdown { position: static !important; top: auto !important; left: auto !important; right: auto !important; transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; box-shadow: none !important; border-left: 3px solid var(--kmm-blue); background: #1a1a1a; /* Zwinięte domyślnie */ max-height: 0; overflow: hidden; transition: max-height .35s ease !important; } /* Rozwinięte po kliknięciu */ .has-kmm > .kmm-dropdown.kmm-open { max-height: 9999px; } .kmm-inner { padding: 14px 12px 18px; } .kmm-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } /* Karty – dark */ .kmm-card { background: #242424; border-color: #333; color: #e8e8e8; } .kmm-card:hover { border-color: #555; box-shadow: 0 6px 20px rgba(0, 0, 0, .4); color: #fff; } .kmm-card__img { background: #2e2e2e; } .kmm-card__body { border-top: 1px solid #333; } .kmm-card__name { font-size: 1.2rem; color: #f0f0f0; } .kmm-card__count { font-size: 1rem; color: #888; } .kmm-card--active { border-color: var(--kmm-blue) !important; box-shadow: 0 4px 16px rgba(4, 127, 219, .3) !important; } .has-kmm.kmm-parent-active > a::after { display: none; } /* ── Etykieta rozwiń / schowaj ─────────────────────── */ .mobile-menu .has-kmm > a { display: flex !important; align-items: center; } .mobile-menu .has-kmm > a::after { content: "rozwiń"; flex-shrink: 0; margin-left: auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 9px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); color: #aaa; border: 1px solid rgba(255, 255, 255, 0.15); transition: background .2s, color .2s, border-color .2s; pointer-events: none; } .mobile-menu .has-kmm > a[aria-expanded="true"]::after { content: "schowaj"; background: rgba(4, 127, 219, 0.18); border-color: rgba(4, 127, 219, 0.45); color: var(--kmm-blue); } } @media (max-width: 480px) { .kmm-grid { grid-template-columns: 1fr 1fr; gap: 8px; } }