.adtl-filter-bar { display: flex; flex-wrap: nowrap; gap: 12px; overflow-x: auto; padding: 10px 0 10px; -webkit-overflow-scrolling: touch; position: relative; z-index: 50; } .adtl-pill { position: relative; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 10px 16px; background: #eee; color: #222; font-weight: 700; cursor: pointer; white-space: nowrap; } .adtl-pill[aria-expanded="true"] { background: #e7e7e7; } .adtl-pill .chev { display: inline-block; transition: transform .2s; } .adtl-pill[aria-expanded="true"] .chev { transform: rotate(180deg); } .adtl-pill.more { background: #222; color: #fff; font-weight: 800; } /* Dropdown obsah */ .adtl-dropdown { position: absolute; left: 0; top: calc(100% + 8px); z-index: 9999; min-width: 280px; max-width: 88vw; background: #fff; border: 1px solid #e5e5e5; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.08); padding: 14px; display: none; } .adtl-dropdown.open { display: block; } /* Portal varianta (presunuté do ) */ .adtl-dropdown.portal { position: fixed; left: 0; top: 0; transform: translate3d(0,0,0); } /* zachovaj vnútorné odsadenia */ .adtl-dropdown form, .adtl-dropdown fieldset, .adtl-dropdown .slider-wrapper, .adtl-dropdown .filter-section { margin: 0; } /* skry nepotrebné pôvodné bloky */ .filter-section.filter-section-button, .filter-section.filter-section-count { display:none!important; } .adtl-hidden-dock { display:none!important; } /* zabráň orezu nadradených wrapperov */ .category-content-wrapper, .category-content-wrapper .category-header, .filters-wrapper, .adtl-filter-bar { overflow:visible; } /* =============== ACTIVE FILTERS BAR =============== */ .adtl-active-bar { display: none; flex-wrap: wrap; gap: 8px; padding: 0 0 14px; } .adtl-active-bar.visible { display: flex; } .adtl-chip { display: inline-flex; align-items: center; gap: 8px; background: #f1f1f1; color: #222; border-radius: 999px; padding: 6px 10px; font-size: 14px; line-height: 1; border: 1px solid #e2e2e2; } .adtl-chip .x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #ddd; font-weight: 900; cursor: pointer; user-select: none; } .adtl-chip .x:hover { background: #ccc; } .adtl-active-label { font-weight: 700; opacity: .7; margin-right: 6px; display: inline-flex; align-items: center; }