- id:
- figma
-
Jak fungují rozměry ?
Jak fungují rozměry ?
Rozměry tašek jsou udávány v cm (šířka x hloubka x výška), např. 22x10x35.
Šířka tašky
Rozměr spodní hrany tašky na přední straně. Šířku měříme zleva doprava na složené tašce.
Hloubka tašky
Složené dno na zadní straně tašky definuje její hloubku. Hloubku měříme na dně složené tašky.
Výška tašky
Rozměr boční hrany tašky na přední straně. Výšku měříme zespoda nahoru na složené tašce. Výška tašky je vždy uvedena bez uší.
Filtrace
-
{% set filtration_visual_props = { id: "filter-form", reset_btn: { title: "Smazat všechny filtry", form: "filter-form", }, } %} {% set products_filter_form = { id: "filter-form", reset_btn: { title: "Smazat všechny filtry", form: "filter-form", }, form_list: [ { title: "Rozměr tašky", dimensions: { id: "dimension-category", full_name: "dimension-category", choices: [ { label: "Malá", value: "small", count: 20, description: "Šířka 10 - 15 cm", full_name: "dimension-radio", type: "radio", }, { label: "Střední", value: "medium", count: 20, description: "šířka 27-35 cm", full_name: "dimension-radio", type: "radio", }, { label: "Velká", value: "large", count: 20, description: "Šířka 36 - 60 cm", full_name: "dimension-radio", type: "radio", }, { label: "Vlastní rozměr", value: "custom", full_name: "dimension-radio", type: "radio", } ], small_list: [ { checkbox_select: { label: "Rozměr tašky", full_name: "dimensions", options: [ { label: "11x10x38 cm", value: "11x10x38", checked: true, description: "(12)", }, { label: "12x10x41 cm", value: "12x10x41", description: "(99)", }, { label: "12x10x40 cm", value: "12x10x40", description: "(12)", }, { label: "14x8x39 cm", value: "14x8x39", description: "(0)", disabled: true }, { label: "16x6x26 cm", value: "16x6x26", description: "(10)", }, ] } }, { checkbox_select: { label: "Formát", full_name: "format", options: [ { label: "A4", value: "A4", description: "(12)", }, { label: "A5", value: "A5", description: "(99)", }, { label: "Na víno", value: "wine", description: "(12)", }, ] } } ], medium_list: [ { checkbox_select: { label: "Rozměr tašky", full_name: "dimensions", options: [ { label: "11x10x38 cm", value: "11x10x38", checked: true, description: "(12)", }, { label: "12x10x41 cm", value: "12x10x41", description: "(99)", }, { label: "12x10x40 cm", value: "12x10x40", description: "(12)", }, { label: "14x8x39 cm", value: "14x8x39", description: "(0)", disabled: true }, { label: "16x6x26 cm", value: "16x6x26", description: "(10)", checked: true, }, ] } }, { checkbox_select: { label: "Formát", full_name: "format", options: [ { label: "A4", value: "A4", description: "(12)", }, { label: "A5", value: "A5", description: "(99)", }, { label: "Na víno", value: "wine", description: "(12)", }, ] } } ], large_list: [ { checkbox_select: { label: "Rozměr tašky", full_name: "dimensions", options: [ { label: "11x10x38 cm", value: "11x10x38", checked: true, description: "(12)", }, { label: "12x10x41 cm", value: "12x10x41", description: "(99)", checked: true }, { label: "12x10x40 cm", value: "12x10x40", description: "(12)", }, { label: "14x8x39 cm", value: "14x8x39", description: "(0)", disabled: true }, { label: "16x6x26 cm", value: "16x6x26", description: "(10)", checked: true, }, ] } }, { checkbox_select: { label: "Formát", full_name: "format", options: [ { label: "A4", value: "A4", description: "(12)", }, { label: "A5", value: "A5", description: "(99)", }, { label: "Na víno", value: "wine", description: "(12)", }, ] } } ], custom_list: { width_select: { label: "Šířka tašky", full_name: "bag-width", options: [ { label: "95 mm", value: "95mm", checked: true, description: "(12)", }, { label: "110 mm", value: "110mm", description: "(99)", }, { label: "120 mm", value: "120mm", description: "(12)", }, { label: "125 mm", value: "125mm", description: "(0)", disabled: true }, { label: "130 mm", value: "130mm", description: "(10)", }, ] }, depth_select: { label: "Hloubka tašky", full_name: "bag-depth", options: [ { label: "60 mm", value: "60mm", description: "(12)", }, { label: "65 mm", value: "65mm", description: "(99)", }, { label: "70 mm", value: "70mm", description: "(12)", }, { label: "75 mm", value: "75mm", description: "(0)", disabled: true }, { label: "80 mm", value: "80mm", description: "(10)", }, ] }, height_select: { label: "Výška tašky", full_name: "bag-height", options: [ { label: "95 mm", value: "95mm", checked: true, description: "(12)", }, { label: "110 mm", value: "110mm", description: "(99)", }, { label: "120 mm", value: "120mm", description: "(12)", }, { label: "125 mm", value: "125mm", description: "(0)", disabled: true }, { label: "130 mm", value: "130mm", description: "(10)", }, ] }, }, }, }, { title: "Typ materiálu", multicheckbox: { id: "multicheckbox-field-2", full_name: "multicheckbox-2", toggle_default_text: "Zobrazit vše", toggle_active_text: "Zobrazit méně", choices: [ { label: "Papírové bez laminace", value: "paper", checked: true, count: 20 }, { label: "Papírová s lesklou nebo matnou laminací", value: "paper-laminated", count: 20 }, { label: "Textilní taška", value: "canvas", count: 12 }, { label: "Lansky", value: "Lansky", count: 20 }, ] } }, { title: "Stav", multicheckbox: { id: "multicheckbox-field-3", full_name: "multicheckbox-3", toggle_default_text: "Zobrazit vše", toggle_active_text: "Zobrazit méně", choices: [ { label: "Skladem", value: "in-stock", checked: true, count: 20 }, { label: "Novinka", value: "new", count: 20 }, { label: "Výprodej", value: "sale", disabled: true, count: 0 }, { label: "Top produkt", value: "top", count: 20 }, { label: "Akce", value: "discount", checked: true, count: 20 }, ] } }, { title: "Barva tašky", color: { id: "color-field", full_name: "color", choices: [ { label: "Černá", value: "black", color: "#232323", id: "color-checkbox-black", checked: true, count: 20 }, { label: "Bílá", value: "white", color: "#ffffff", id: "color-checkbox-white", count: 12 }, { label: "Hnědá", value: "brown", color: "#CFAF8A", id: "color-checkbox-brown", count: 12 }, { label: "Šedá", value: "gray", color: "#D9D9D9", id: "color-checkbox-gray", count: 12 }, { label: "Modrá", value: "blue", color: "#677DCD", id: "color-checkbox-blue", count: 12 }, ] } }, { title: "Nosnost tašky", multicheckbox: { id: "multicheckbox-field-5", full_name: "multicheckbox-5", toggle_default_text: "Zobrazit vše", toggle_active_text: "Zobrazit méně", choices: [ { label: "AccuSharp", value: "accusharp", checked: true, count: 20 }, { label: "Blade-Tech", value: "blade-tech", count: 20 }, { label: "Demko Knives", value: "demkoknives", disabled: true, count: 0 }, { label: "Lansky", value: "Lansky", count: 20 }, { label: "200 kg", value: "200kg", checked: true, count: 20 }, { label: "160 mm", value: "param-1", count: 20 }, { label: "165 mm", value: "param-2", count: 20 }, { label: "168 mm", value: "param-3", count: 10 }, { label: "171 mm", value: "param-4", count: 30 }, { label: "111 mm", value: "param-5", count: 20 }, ] } }, { title: "Typ ucha", multicheckbox: { id: "multicheckbox-field-6", full_name: "multicheckbox-6", toggle_default_text: "Zobrazit vše", toggle_active_text: "Zobrazit méně", choices: [ { label: "Textilní ucho", value: "textil", checked: true, count: 20 }, { label: "Ploché ucho", value: "flat", count: 20 }, { label: "Kroucené ucho", value: "curved", disabled: true, count: 0 }, ] } } ], submit: { title: "Použít filtry", form: "filter-form", } } %} {% set filters_section_props = { single_select_inline: { full_name: "ordering", options: [ { label: "Nejvyšší cena", value: "expensive", }, { label: "Nejnižší cena", value: "cheapest", }, { label: "Nejoblíbenější", value: "favourite", selected: true, }, { label: "Produkty v akci", value: "sale", } ] }, modal: { id: "filter-modal", form: products_filter_form } } %} {% include "@Components/sections/filters-section/filters-section.twig" with {props: filters_section_props} %} -
<section class="base-section s-filters"> <div class="base-section__container container"> <div class="s-filters__grid"> <div class="i-filtration-visual d-flex gap-2 align-items-start"> <div class="i-filtration-visual__items-wrapper d-flex flex-wrap gap-1 flex-grow-1 js-filter-list" data-filter-target="filter-form" data-filter-event="change"> <template> <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --no-style i-selected-tag" type="button"> <span class="btn__title u-z-index-1"> </span> <span class="btn__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.495 8.002 3.203 4.746l1.478-1.5 3.32 3.272 3.317-3.272 1.478 1.5-3.292 3.256 3.292 3.246-1.494 1.507L8 9.489l-3.303 3.266-1.494-1.507 3.292-3.246Z" clip-rule="evenodd"/></svg> </span> </span> </button> </template> </div> <a class="link d-inline-flex u-fw-600 align-items-center i-filtration-visual__reset-btn flex-shrink-0 js-filter-delete" href="#" title="Smazat všechny filtry" data-filter-target="filter-form"> <span class="link__title">Smazat všechny filtry</span> <span class="link__icon d-flex align-items-center justify-content-center flex-shrink-0"> <span class="icon d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.037 0A1.456 1.456 0 0 0 4.58 1.456v1.162H1.309V4.22h1.308v9.669A2.11 2.11 0 0 0 4.727 16h6.545a2.11 2.11 0 0 0 2.11-2.11V4.22h1.309V2.619h-3.272V1.456A1.456 1.456 0 0 0 9.963 0H6.037Zm.147 2.618V1.603h3.632v1.015H6.184ZM4.22 13.89V4.22h7.558v9.67a.507.507 0 0 1-.507.507H4.728a.507.507 0 0 1-.507-.507Zm1.816-7.2h1.308v5.236H6.037V6.691Zm3.926 0H8.654v5.236h1.31V6.691Z" clip-rule="evenodd"/></svg> </span> </span> </a> </div> <div class="s-filters__filter-button"> <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm --icon-before --full-width-mobile" href='#' data-modal-target="filter-modal"> <span class="btn__title u-z-index-1"> Otevřít filtraci </span> <span class="btn__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5.84 9.48.762 3.769V2.16A2.158 2.158 0 0 1 2.924 0h10.152a2.16 2.16 0 0 1 2.161 2.16V3.77l-5.076 5.71V16L5.84 12.758V9.48ZM2.546 3.09 7.623 8.8v3.066l.754.566V8.8l4.954-5.573.122-.138v-.93a.377.377 0 0 0-.377-.376H2.924a.378.378 0 0 0-.377.376v.93Z" clip-rule="evenodd"/></svg> </span> </span> </a> </div> <div class="s-filters__dimensions-modal"> <a class="link d-inline-flex u-fw-600 align-items-center --icon-before s-filters__dimmension-modal-opener" href="#" title="Jak fungují rozměry ?" data-modal-target="dimmensions-modal"> <span class="link__title">Jak fungují rozměry ?</span> <span class="link__icon d-flex align-items-center justify-content-center flex-shrink-0"> <span class="icon d-flex align-items-center justify-content-center --sm"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 16a7.995 7.995 0 0 1-7.391-4.94 8.005 8.005 0 0 1 1.734-8.717A8.005 8.005 0 0 1 11.06.609a7.995 7.995 0 0 1 2.593 13.045A8.005 8.005 0 0 1 8 16ZM8 1.824A6.177 6.177 0 1 0 14.176 8 6.183 6.183 0 0 0 8 1.824Z"/><path fill="currentColor" d="M7.732 12.779V8.268H6.444V6.444H8A1.558 1.558 0 0 1 9.556 8v4.779H7.732ZM8 5.69a1.235 1.235 0 1 1 0-2.469 1.235 1.235 0 0 1 0 2.47Z"/></svg> </span> </span> </a> <div class="c-modal --hidden" id="dimmensions-modal"> <div class="c-modal__dialog"> <div class="c-modal__content u-rounded-4"> <div class="c-modal__inner d-flex flex-column"> <header class="c-modal__header d-flex flex-column gap-1"> <h2 class="u-h3 c-modal__heading">Jak fungují rozměry ?</h2> <p class="c-modal__perex">Rozměry tašek jsou udávány v cm (šířka x hloubka x výška), např. 22x10x35.</p> </header> <div class="c-modal__body "> <div class="c-modal__dimesions-content"> <div class="d-flex gap-2"> <div class="c-modal__dimesions-img flex-shrink-0"> <div class="img u-posr overflow-hidden"> <picture> <img src="" data-src="/images/content/dimensions/width.svg" alt="Ilustrace šířky tašky" width="63" height="80" draggable="false"> </picture> </div> </div> <div class="d-flex flex-column"> <h3 class="u-fz-xl mb-1">Šířka tašky</h3> <p>Rozměr spodní hrany tašky na přední straně. Šířku měříme zleva doprava na složené tašce.</p> </div> </div> <div class="w-100 u-border-top u-border--tertiary-500 pb-5 mt-5"></div> <div class="d-flex gap-2"> <div class="c-modal__dimesions-img flex-shrink-0"> <div class="img u-posr overflow-hidden"> <picture> <img src="" data-src="/images/content/dimensions/depth.svg" alt="Ilustrace hloubky tašky" width="63" height="80" draggable="false"> </picture> </div> </div> <div class="d-flex flex-column"> <h3 class="u-fz-xl mb-1">Hloubka tašky</h3> <p>Složené dno na zadní straně tašky definuje její hloubku. Hloubku měříme na dně složené tašky.</p> </div> </div> <div class="w-100 u-border-top u-border--tertiary-500 pb-5 mt-5"></div> <div class="d-flex gap-2"> <div class="c-modal__dimesions-img flex-shrink-0"> <div class="img u-posr overflow-hidden"> <picture> <img src="" data-src="/images/content/dimensions/height.svg" alt="Ilustrace výšky tašky" width="80" height="64" draggable="false"> </picture> </div> </div> <div class="d-flex flex-column"> <h3 class="u-fz-xl mb-1">Výška tašky</h3> <p>Rozměr boční hrany tašky na přední straně. Výšku měříme zespoda nahoru na složené tašce. Výška tašky je vždy uvedena bez uší.</p> </div> </div> </div> </div> <div class="c-modal__button-container"> <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --transparent --sm --icon-only c-modal__close c-modal__close-cross" aria-label="close modal"> <span class="btn__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --lg"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#15324F" fill-rule="evenodd" d="M10.869 12 5.435 6.565l1.13-1.13L12 10.867l5.435-5.434 1.13 1.131L13.133 12l5.434 5.434-1.131 1.131L12 13.131l-5.434 5.434-1.131-1.13L10.869 12Z" clip-rule="evenodd"/></svg> </span> </span> </button> </div> </div> </div> </div> </div> </div> <div class="s-filters__sort-select d-flex flex-shrink-0 align-items-center justify-content-center justify-content-md-end gap-1"> <span class="text-nowrap">Řadit od:</span> <div class="f-single-select-inline --native u-posr s-products-list__sorting"> <span class="f-single-select-inline__icon --before p-1 u-top-50-p u-translate-middle-y u-posa"> </span> <select class="f-single-select-inline__select slim-select" name=ordering> <option class="" value="expensive">Nejvyšší cena</option> <option class="" value="cheapest">Nejnižší cena</option> <option class="" selected value="favourite">Nejoblíbenější</option> <option class="" value="sale">Produkty v akci</option> </select> </div> <div class="c-listing-switch d-flex gap-1 d-none d-md-flex"> <a class="link d-inline-flex u-fw-600 align-items-center --text --icon-before --hover-icon --active" href="?grid=1" title="Klasické zobrazení"> <span class="link__icon d-flex align-items-center justify-content-center flex-shrink-0"> <span class="icon d-flex align-items-center justify-content-center --colored --text --lg"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="#15324F" stroke-width="1.8" d="M3.9 3.9h6.2v6.2H3.9zM13.9 3.9h6.2v6.2h-6.2zM13.9 13.9h6.2v6.2h-6.2zM3.9 13.9h6.2v6.2H3.9z"/></svg> </span> </span> <span class="link__icon --hover d-none align-items-center justify-content-center flex-shrink-0"> <span class="icon d-flex align-items-center justify-content-center --colored --text --lg"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#15324F" d="M3 3h8v8H3zM13 3h8v8h-8zM13 13h8v8h-8zM3 13h8v8H3z"/></svg> </span> </span> </a> <a class="link d-inline-flex u-fw-600 align-items-center --text --icon-before --hover-icon" href="?rows=1" title="Řádkové zobrazení"> <span class="link__icon d-flex align-items-center justify-content-center flex-shrink-0"> <span class="icon d-flex align-items-center justify-content-center --colored --text --lg"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#15324F" fill-rule="evenodd" d="M19.2 4.8H4.8v4.4h14.4V4.8ZM3 3v8h18V3H3ZM19.2 14.8H4.8v4.4h14.4v-4.4ZM3 13v8h18v-8H3Z" clip-rule="evenodd"/></svg> </span> </span> <span class="link__icon --hover d-none align-items-center justify-content-center flex-shrink-0"> <span class="icon d-flex align-items-center justify-content-center --colored --text --lg"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#15324F" d="M3 3h18v8H3zM3 13h18v8H3z"/></svg> </span> </span> </a> </div> </div> </div> <div class="c-modal --size-lg --hidden" id="filter-modal"> <div class="c-modal__dialog"> <div class="c-modal__content u-rounded-4"> <div class="c-modal__inner d-flex flex-column"> <header class="c-modal__header d-flex flex-column gap-1"> <h2 class="u-h3 c-modal__heading">Filtrace</h2> </header> <div class="c-modal__body "> <form class="base-form --validate f-filtration" id="filter-form"> <div class="f-filtration__content"> <div class="i-filtration-visual d-flex gap-2 align-items-start mb-6"> <div class="i-filtration-visual__items-wrapper d-flex flex-wrap gap-1 flex-grow-1 js-filter-list --in-modal" data-filter-target="filter-form" data-filter-event="change"> <template> <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --no-style i-selected-tag" type="button"> <span class="btn__title u-z-index-1"> </span> <span class="btn__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.495 8.002 3.203 4.746l1.478-1.5 3.32 3.272 3.317-3.272 1.478 1.5-3.292 3.256 3.292 3.246-1.494 1.507L8 9.489l-3.303 3.266-1.494-1.507 3.292-3.246Z" clip-rule="evenodd"/></svg> </span> </span> </button> </template> </div> <a class="link d-inline-flex u-fw-600 align-items-center i-filtration-visual__reset-btn flex-shrink-0 js-filter-modal-delete" href="#" title="Smazat všechny filtry" data-filter-target="filter-form"> <span class="link__title">Smazat všechny filtry</span> <span class="link__icon d-flex align-items-center justify-content-center flex-shrink-0"> <span class="icon d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.037 0A1.456 1.456 0 0 0 4.58 1.456v1.162H1.309V4.22h1.308v9.669A2.11 2.11 0 0 0 4.727 16h6.545a2.11 2.11 0 0 0 2.11-2.11V4.22h1.309V2.619h-3.272V1.456A1.456 1.456 0 0 0 9.963 0H6.037Zm.147 2.618V1.603h3.632v1.015H6.184ZM4.22 13.89V4.22h7.558v9.67a.507.507 0 0 1-.507.507H4.728a.507.507 0 0 1-.507-.507Zm1.816-7.2h1.308v5.236H6.037V6.691Zm3.926 0H8.654v5.236h1.31V6.691Z" clip-rule="evenodd"/></svg> </span> </span> </a> </div> <ul class="f-filtration__list row"> <li class="i-filtration col-12 mb-5"> <header class="i-filtration__header u-posr u-border-top u-border--tertiary-500 mb-4"> <span class="i-filtration__title u-fw-700 u-posa u-top-0 u-translate-middle-y u-bg-white pe-2 u-h4 mb-4">Rozměr tašky</span> </header> <div class="i-filtration__body"> <div class="i-filtration__dimensions"> <div class="row gx-2 gy-2"> <div class="col-sm-6 col-lg-3"> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center px-2 py-1 u-posr --radio --outline w-100 h-100 i-filtration__dimension-category --dimension-filter"> <input class="f-checkbox__input u-posa" type="radio" value="small" checked="checked" name=dimension-category data-filter-title="Malá" data-toggle-target="small"> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> Malá <span class="f-checkbox__count u-fw-400 u-color-primary-300 u-fz-sm">(20)</span> </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">Šířka 10 - 15 cm</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> </div> <div class="col-sm-6 col-lg-3"> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center px-2 py-1 u-posr --radio --outline w-100 h-100 i-filtration__dimension-category --dimension-filter"> <input class="f-checkbox__input u-posa" type="radio" value="medium" name=dimension-category data-filter-title="Střední" data-toggle-target="medium"> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> Střední <span class="f-checkbox__count u-fw-400 u-color-primary-300 u-fz-sm">(20)</span> </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">šířka 27-35 cm</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> </div> <div class="col-sm-6 col-lg-3"> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center px-2 py-1 u-posr --radio --outline w-100 h-100 i-filtration__dimension-category --dimension-filter"> <input class="f-checkbox__input u-posa" type="radio" value="large" name=dimension-category data-filter-title="Velká" data-toggle-target="large"> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> Velká <span class="f-checkbox__count u-fw-400 u-color-primary-300 u-fz-sm">(20)</span> </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">Šířka 36 - 60 cm</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> </div> <div class="col-sm-6 col-lg-3"> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center px-2 py-1 u-posr --radio --outline w-100 h-100 i-filtration__dimension-category --dimension-filter"> <input class="f-checkbox__input u-posa" type="radio" value="custom" name=dimension-category data-filter-title="Vlastní rozměr" data-toggle-target="custom"> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> Vlastní rozměr </span> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> </div> </div> <div class="i-filtration__dimension-filedset-wrapper u-posr"> <fieldset class="i-filtration__dimension-filedset pb-3 pt-1 mt-3 row gy-2 d-none" data-controller="small" disabled> <div class="col-lg-6"> <div class="f-checkbox-select u-posr"> <header class="f-checkbox-select__header d-flex align-items-center u-bg-white" title="Rozměr tašky"> <div class="f-checkbox-select__label ms-2 overflow-hidden top-0 u-left-0 u-fw-600 u-fz-md u-posr u-cursor-pointer d-flex align-items-center gap-1"> <span>Rozměr tašky</span> </div> <div class="flex-shrink-0 d-flex gap-2 ms-auto align-items-center"> <span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500 --hoverable --active f-checkbox-select__clear"> <span class="i-tag__title">1</span> <div class="i-tag__icon"> <span class="icon d-flex align-items-center justify-content-center --colored --text --sm"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">'<path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3l105.4 105.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256l105.3-105.4z"/></svg> </span> </div> </span> <div class="f-checkbox-select__toggler d-flex align-items-center justify-content-center u-cursor-pointer"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18"><path fill="#23846F" fill-rule="evenodd" d="m9 12.5 6-5.735L13.677 5.5 9 9.97 4.323 5.5 3 6.765 9 12.5Z" clip-rule="evenodd"/></svg> </div> </div> </header> <div class="f-checkbox-select__body w-100 p-2 u-posa"> <div class="f-checkbox-select__body-inner pb-2 pe-2 u-scrollbar" data-scrollbar-y> <div class="d-flex flex-column"> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="dimensions-small-11x10x38" value="11x10x38" checked="checked" name=dimensions> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 11x10x38 cm </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(12)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="dimensions-small-12x10x41" value="12x10x41" name=dimensions> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 12x10x41 cm </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(99)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="dimensions-small-12x10x40" value="12x10x40" name=dimensions> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 12x10x40 cm </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(12)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox --disabled gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="dimensions-small-14x8x39" value="14x8x39" disabled name=dimensions> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 14x8x39 cm </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(0)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="dimensions-small-16x6x26" value="16x6x26" name=dimensions> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 16x6x26 cm </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(10)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> </div> </div> </div> </div> </div> <div class="col-lg-6"> <div class="f-checkbox-select u-posr"> <header class="f-checkbox-select__header d-flex align-items-center u-bg-white" title="Formát"> <div class="f-checkbox-select__label ms-2 overflow-hidden top-0 u-left-0 u-fw-600 u-fz-md u-posr u-cursor-pointer d-flex align-items-center gap-1"> <span>Formát</span> </div> <div class="flex-shrink-0 d-flex gap-2 ms-auto align-items-center"> <span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500 --hoverable f-checkbox-select__clear"> <span class="i-tag__title">0</span> <div class="i-tag__icon"> <span class="icon d-flex align-items-center justify-content-center --colored --text --sm"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">'<path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3l105.4 105.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256l105.3-105.4z"/></svg> </span> </div> </span> <div class="f-checkbox-select__toggler d-flex align-items-center justify-content-center u-cursor-pointer"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18"><path fill="#23846F" fill-rule="evenodd" d="m9 12.5 6-5.735L13.677 5.5 9 9.97 4.323 5.5 3 6.765 9 12.5Z" clip-rule="evenodd"/></svg> </div> </div> </header> <div class="f-checkbox-select__body w-100 p-2 u-posa"> <div class="f-checkbox-select__body-inner pb-2 pe-2 u-scrollbar" data-scrollbar-y> <div class="d-flex flex-column"> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="format-small-A4" value="A4" name=format> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> A4 </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(12)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="format-small-A5" value="A5" name=format> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> A5 </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(99)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="format-small-wine" value="wine" name=format> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> Na víno </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(12)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> </div> </div> </div> </div> </div> </fieldset> <fieldset class="i-filtration__dimension-filedset pb-3 pt-1 mt-3 row gy-2 d-none" data-controller="medium" disabled> <div class="col-lg-6"> <div class="f-checkbox-select u-posr"> <header class="f-checkbox-select__header d-flex align-items-center u-bg-white" title="Rozměr tašky"> <div class="f-checkbox-select__label ms-2 overflow-hidden top-0 u-left-0 u-fw-600 u-fz-md u-posr u-cursor-pointer d-flex align-items-center gap-1"> <span>Rozměr tašky</span> </div> <div class="flex-shrink-0 d-flex gap-2 ms-auto align-items-center"> <span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500 --hoverable --active f-checkbox-select__clear"> <span class="i-tag__title">2</span> <div class="i-tag__icon"> <span class="icon d-flex align-items-center justify-content-center --colored --text --sm"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">'<path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3l105.4 105.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256l105.3-105.4z"/></svg> </span> </div> </span> <div class="f-checkbox-select__toggler d-flex align-items-center justify-content-center u-cursor-pointer"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18"><path fill="#23846F" fill-rule="evenodd" d="m9 12.5 6-5.735L13.677 5.5 9 9.97 4.323 5.5 3 6.765 9 12.5Z" clip-rule="evenodd"/></svg> </div> </div> </header> <div class="f-checkbox-select__body w-100 p-2 u-posa"> <div class="f-checkbox-select__body-inner pb-2 pe-2 u-scrollbar" data-scrollbar-y> <div class="d-flex flex-column"> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="dimensions-medium-11x10x38" value="11x10x38" checked="checked" name=dimensions> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 11x10x38 cm </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(12)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="dimensions-medium-12x10x41" value="12x10x41" name=dimensions> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 12x10x41 cm </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(99)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="dimensions-medium-12x10x40" value="12x10x40" name=dimensions> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 12x10x40 cm </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(12)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox --disabled gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="dimensions-medium-14x8x39" value="14x8x39" disabled name=dimensions> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 14x8x39 cm </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(0)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="dimensions-medium-16x6x26" value="16x6x26" checked="checked" name=dimensions> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 16x6x26 cm </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(10)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> </div> </div> </div> </div> </div> <div class="col-lg-6"> <div class="f-checkbox-select u-posr"> <header class="f-checkbox-select__header d-flex align-items-center u-bg-white" title="Formát"> <div class="f-checkbox-select__label ms-2 overflow-hidden top-0 u-left-0 u-fw-600 u-fz-md u-posr u-cursor-pointer d-flex align-items-center gap-1"> <span>Formát</span> </div> <div class="flex-shrink-0 d-flex gap-2 ms-auto align-items-center"> <span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500 --hoverable f-checkbox-select__clear"> <span class="i-tag__title">0</span> <div class="i-tag__icon"> <span class="icon d-flex align-items-center justify-content-center --colored --text --sm"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">'<path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3l105.4 105.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256l105.3-105.4z"/></svg> </span> </div> </span> <div class="f-checkbox-select__toggler d-flex align-items-center justify-content-center u-cursor-pointer"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18"><path fill="#23846F" fill-rule="evenodd" d="m9 12.5 6-5.735L13.677 5.5 9 9.97 4.323 5.5 3 6.765 9 12.5Z" clip-rule="evenodd"/></svg> </div> </div> </header> <div class="f-checkbox-select__body w-100 p-2 u-posa"> <div class="f-checkbox-select__body-inner pb-2 pe-2 u-scrollbar" data-scrollbar-y> <div class="d-flex flex-column"> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="format-medium-A4" value="A4" name=format> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> A4 </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(12)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="format-medium-A5" value="A5" name=format> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> A5 </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(99)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="format-medium-wine" value="wine" name=format> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> Na víno </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(12)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> </div> </div> </div> </div> </div> </fieldset> <fieldset class="i-filtration__dimension-filedset pb-3 pt-1 mt-3 row gy-2 d-none" data-controller="large" disabled> <div class="col-lg-6"> <div class="f-checkbox-select u-posr"> <header class="f-checkbox-select__header d-flex align-items-center u-bg-white" title="Rozměr tašky"> <div class="f-checkbox-select__label ms-2 overflow-hidden top-0 u-left-0 u-fw-600 u-fz-md u-posr u-cursor-pointer d-flex align-items-center gap-1"> <span>Rozměr tašky</span> </div> <div class="flex-shrink-0 d-flex gap-2 ms-auto align-items-center"> <span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500 --hoverable --active f-checkbox-select__clear"> <span class="i-tag__title">3</span> <div class="i-tag__icon"> <span class="icon d-flex align-items-center justify-content-center --colored --text --sm"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">'<path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3l105.4 105.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256l105.3-105.4z"/></svg> </span> </div> </span> <div class="f-checkbox-select__toggler d-flex align-items-center justify-content-center u-cursor-pointer"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18"><path fill="#23846F" fill-rule="evenodd" d="m9 12.5 6-5.735L13.677 5.5 9 9.97 4.323 5.5 3 6.765 9 12.5Z" clip-rule="evenodd"/></svg> </div> </div> </header> <div class="f-checkbox-select__body w-100 p-2 u-posa"> <div class="f-checkbox-select__body-inner pb-2 pe-2 u-scrollbar" data-scrollbar-y> <div class="d-flex flex-column"> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="dimensions-large-11x10x38" value="11x10x38" checked="checked" name=dimensions> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 11x10x38 cm </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(12)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="dimensions-large-12x10x41" value="12x10x41" checked="checked" name=dimensions> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 12x10x41 cm </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(99)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="dimensions-large-12x10x40" value="12x10x40" name=dimensions> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 12x10x40 cm </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(12)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox --disabled gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="dimensions-large-14x8x39" value="14x8x39" disabled name=dimensions> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 14x8x39 cm </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(0)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="dimensions-large-16x6x26" value="16x6x26" checked="checked" name=dimensions> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 16x6x26 cm </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(10)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> </div> </div> </div> </div> </div> <div class="col-lg-6"> <div class="f-checkbox-select u-posr"> <header class="f-checkbox-select__header d-flex align-items-center u-bg-white" title="Formát"> <div class="f-checkbox-select__label ms-2 overflow-hidden top-0 u-left-0 u-fw-600 u-fz-md u-posr u-cursor-pointer d-flex align-items-center gap-1"> <span>Formát</span> </div> <div class="flex-shrink-0 d-flex gap-2 ms-auto align-items-center"> <span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500 --hoverable f-checkbox-select__clear"> <span class="i-tag__title">0</span> <div class="i-tag__icon"> <span class="icon d-flex align-items-center justify-content-center --colored --text --sm"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">'<path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3l105.4 105.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256l105.3-105.4z"/></svg> </span> </div> </span> <div class="f-checkbox-select__toggler d-flex align-items-center justify-content-center u-cursor-pointer"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18"><path fill="#23846F" fill-rule="evenodd" d="m9 12.5 6-5.735L13.677 5.5 9 9.97 4.323 5.5 3 6.765 9 12.5Z" clip-rule="evenodd"/></svg> </div> </div> </header> <div class="f-checkbox-select__body w-100 p-2 u-posa"> <div class="f-checkbox-select__body-inner pb-2 pe-2 u-scrollbar" data-scrollbar-y> <div class="d-flex flex-column"> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="format-large-A4" value="A4" name=format> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> A4 </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(12)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="format-large-A5" value="A5" name=format> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> A5 </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(99)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="format-large-wine" value="wine" name=format> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> Na víno </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(12)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> </div> </div> </div> </div> </div> </fieldset> <fieldset class="i-filtration__dimension-filedset pb-3 pt-1 mt-3 row gy-2 d-none gx-3" data-controller="custom" disabled> <div class="col-lg-4"> <div class="f-checkbox-select u-posr"> <header class="f-checkbox-select__header d-flex align-items-center u-bg-white" title="Šířka tašky"> <div class="f-checkbox-select__label ms-2 overflow-hidden top-0 u-left-0 u-fw-600 u-fz-md u-posr u-cursor-pointer d-flex align-items-center gap-1"> <span>Šířka tašky</span> <div class="i-tooltip"> <span class="icon d-flex align-items-center justify-content-center --colored --text --sm i-tooltip__icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 16a7.995 7.995 0 0 1-7.391-4.94 8.005 8.005 0 0 1 1.734-8.717A8.005 8.005 0 0 1 11.06.609a7.995 7.995 0 0 1 2.593 13.045A8.005 8.005 0 0 1 8 16ZM8 1.824A6.177 6.177 0 1 0 14.176 8 6.183 6.183 0 0 0 8 1.824Z"/><path fill="currentColor" d="M7.732 12.779V8.268H6.444V6.444H8A1.558 1.558 0 0 1 9.556 8v4.779H7.732ZM8 5.69a1.235 1.235 0 1 1 0-2.469 1.235 1.235 0 0 1 0 2.47Z"/></svg> </span> <div class="i-tooltip__content d-none u-fz-14 u-fw-400 u-lh-20"> <div class="img u-posr overflow-hidden"> <picture> <img src="" data-src="/images/content/dimensions/width.svg" alt="Ilustrace šířky tašky" width="40" height="40" draggable="false"> </picture> </div> </div> </div> </div> <div class="flex-shrink-0 d-flex gap-2 ms-auto align-items-center"> <span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500 --hoverable --active f-checkbox-select__clear"> <span class="i-tag__title">1</span> <div class="i-tag__icon"> <span class="icon d-flex align-items-center justify-content-center --colored --text --sm"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">'<path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3l105.4 105.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256l105.3-105.4z"/></svg> </span> </div> </span> <div class="f-checkbox-select__toggler d-flex align-items-center justify-content-center u-cursor-pointer"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18"><path fill="#23846F" fill-rule="evenodd" d="m9 12.5 6-5.735L13.677 5.5 9 9.97 4.323 5.5 3 6.765 9 12.5Z" clip-rule="evenodd"/></svg> </div> </div> </header> <div class="f-checkbox-select__body w-100 p-2 u-posa"> <div class="f-checkbox-select__body-inner pb-2 pe-2 u-scrollbar" data-scrollbar-y> <div class="d-flex flex-column"> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="width-custom-95mm" value="95mm" checked="checked" name=width> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 95 mm </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(12)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="width-custom-110mm" value="110mm" name=width> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 110 mm </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(99)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="width-custom-120mm" value="120mm" name=width> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 120 mm </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(12)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox --disabled gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="width-custom-125mm" value="125mm" disabled name=width> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 125 mm </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(0)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="width-custom-130mm" value="130mm" name=width> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 130 mm </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(10)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> </div> </div> </div> </div> </div> <div class="col-lg-4"> <div class="f-checkbox-select u-posr"> <header class="f-checkbox-select__header d-flex align-items-center u-bg-white" title="Hloubka tašky"> <div class="f-checkbox-select__label ms-2 overflow-hidden top-0 u-left-0 u-fw-600 u-fz-md u-posr u-cursor-pointer d-flex align-items-center gap-1"> <span>Hloubka tašky</span> <div class="i-tooltip"> <span class="icon d-flex align-items-center justify-content-center --colored --text --sm i-tooltip__icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 16a7.995 7.995 0 0 1-7.391-4.94 8.005 8.005 0 0 1 1.734-8.717A8.005 8.005 0 0 1 11.06.609a7.995 7.995 0 0 1 2.593 13.045A8.005 8.005 0 0 1 8 16ZM8 1.824A6.177 6.177 0 1 0 14.176 8 6.183 6.183 0 0 0 8 1.824Z"/><path fill="currentColor" d="M7.732 12.779V8.268H6.444V6.444H8A1.558 1.558 0 0 1 9.556 8v4.779H7.732ZM8 5.69a1.235 1.235 0 1 1 0-2.469 1.235 1.235 0 0 1 0 2.47Z"/></svg> </span> <div class="i-tooltip__content d-none u-fz-14 u-fw-400 u-lh-20"> <div class="img u-posr overflow-hidden"> <picture> <img src="" data-src="/images/content/dimensions/depth.svg" alt="Ilustrace hloubky tašky" width="40" height="40" draggable="false"> </picture> </div> </div> </div> </div> <div class="flex-shrink-0 d-flex gap-2 ms-auto align-items-center"> <span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500 --hoverable f-checkbox-select__clear"> <span class="i-tag__title">0</span> <div class="i-tag__icon"> <span class="icon d-flex align-items-center justify-content-center --colored --text --sm"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">'<path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3l105.4 105.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256l105.3-105.4z"/></svg> </span> </div> </span> <div class="f-checkbox-select__toggler d-flex align-items-center justify-content-center u-cursor-pointer"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18"><path fill="#23846F" fill-rule="evenodd" d="m9 12.5 6-5.735L13.677 5.5 9 9.97 4.323 5.5 3 6.765 9 12.5Z" clip-rule="evenodd"/></svg> </div> </div> </header> <div class="f-checkbox-select__body w-100 p-2 u-posa"> <div class="f-checkbox-select__body-inner pb-2 pe-2 u-scrollbar" data-scrollbar-y> <div class="d-flex flex-column"> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="depth-custom-60mm" value="60mm" name=depth> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 60 mm </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(12)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="depth-custom-65mm" value="65mm" name=depth> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 65 mm </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(99)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="depth-custom-70mm" value="70mm" name=depth> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 70 mm </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(12)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox --disabled gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="depth-custom-75mm" value="75mm" disabled name=depth> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 75 mm </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(0)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="depth-custom-80mm" value="80mm" name=depth> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 80 mm </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(10)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> </div> </div> </div> </div> </div> <div class="col-lg-4"> <div class="f-checkbox-select u-posr"> <header class="f-checkbox-select__header d-flex align-items-center u-bg-white" title="Výška tašky"> <div class="f-checkbox-select__label ms-2 overflow-hidden top-0 u-left-0 u-fw-600 u-fz-md u-posr u-cursor-pointer d-flex align-items-center gap-1"> <span>Výška tašky</span> <div class="i-tooltip"> <span class="icon d-flex align-items-center justify-content-center --colored --text --sm i-tooltip__icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M8 16a7.995 7.995 0 0 1-7.391-4.94 8.005 8.005 0 0 1 1.734-8.717A8.005 8.005 0 0 1 11.06.609a7.995 7.995 0 0 1 2.593 13.045A8.005 8.005 0 0 1 8 16ZM8 1.824A6.177 6.177 0 1 0 14.176 8 6.183 6.183 0 0 0 8 1.824Z"/><path fill="currentColor" d="M7.732 12.779V8.268H6.444V6.444H8A1.558 1.558 0 0 1 9.556 8v4.779H7.732ZM8 5.69a1.235 1.235 0 1 1 0-2.469 1.235 1.235 0 0 1 0 2.47Z"/></svg> </span> <div class="i-tooltip__content d-none u-fz-14 u-fw-400 u-lh-20"> <div class="img u-posr overflow-hidden"> <picture> <img src="" data-src="/images/content/dimensions/height.svg" alt="Ilustrace výšky tašky" width="40" height="40" draggable="false"> </picture> </div> </div> </div> </div> <div class="flex-shrink-0 d-flex gap-2 ms-auto align-items-center"> <span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500 --hoverable --active f-checkbox-select__clear"> <span class="i-tag__title">1</span> <div class="i-tag__icon"> <span class="icon d-flex align-items-center justify-content-center --colored --text --sm"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">'<path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3l105.4 105.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256l105.3-105.4z"/></svg> </span> </div> </span> <div class="f-checkbox-select__toggler d-flex align-items-center justify-content-center u-cursor-pointer"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18"><path fill="#23846F" fill-rule="evenodd" d="m9 12.5 6-5.735L13.677 5.5 9 9.97 4.323 5.5 3 6.765 9 12.5Z" clip-rule="evenodd"/></svg> </div> </div> </header> <div class="f-checkbox-select__body w-100 p-2 u-posa"> <div class="f-checkbox-select__body-inner pb-2 pe-2 u-scrollbar" data-scrollbar-y> <div class="d-flex flex-column"> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="height-custom-95mm" value="95mm" checked="checked" name=height> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 95 mm </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(12)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="height-custom-110mm" value="110mm" name=height> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 110 mm </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(99)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="height-custom-120mm" value="120mm" name=height> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 120 mm </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(12)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox --disabled gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="height-custom-125mm" value="125mm" disabled name=height> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 125 mm </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(0)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox gap-2 u-fw-600 mb-2"> <input class="f-checkbox__input u-posa" type="checkbox" id="height-custom-130mm" value="130mm" name=height> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 130 mm </span> <div class="f-checkbox__description flex-shrink-0 u-fz-sm">(10)</div> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> </div> </div> </div> </div> </div> </fieldset> </div> </div> </div> </li> <li class="i-filtration col-md-6 mb-5"> <header class="i-filtration__header u-posr u-border-top u-border--tertiary-500 mb-4"> <span class="i-filtration__title u-fw-700 u-posa u-top-0 u-translate-middle-y u-bg-white pe-2 u-h4 mb-4">Typ materiálu</span> </header> <div class="i-filtration__body"> <div class="f-multicheckbox u-posr d-flex flex-column gap-2" data-name="multicheckbox-2"> <div class="f-multicheckbox__body d-flex flex-column"> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox f-multicheckbox__checkbox u-fw-600"> <input class="f-checkbox__input u-posa" type="checkbox" id="multicheckbox-field-2-0" value="paper" checked="checked" name=multicheckbox-2 data-filter-title="Papírové bez laminace"> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> Papírové bez laminace <span class="f-checkbox__count u-fw-400 u-color-primary-300 u-fz-sm">(20)</span> </span> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox f-multicheckbox__checkbox u-fw-600"> <input class="f-checkbox__input u-posa" type="checkbox" id="multicheckbox-field-2-1" value="paper-laminated" name=multicheckbox-2 data-filter-title="Papírová s lesklou nebo matnou laminací"> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> Papírová s lesklou nebo matnou laminací <span class="f-checkbox__count u-fw-400 u-color-primary-300 u-fz-sm">(20)</span> </span> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox f-multicheckbox__checkbox u-fw-600"> <input class="f-checkbox__input u-posa" type="checkbox" id="multicheckbox-field-2-2" value="canvas" name=multicheckbox-2 data-filter-title="Textilní taška"> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> Textilní taška <span class="f-checkbox__count u-fw-400 u-color-primary-300 u-fz-sm">(12)</span> </span> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox f-multicheckbox__checkbox u-fw-600"> <input class="f-checkbox__input u-posa" type="checkbox" id="multicheckbox-field-2-3" value="Lansky" name=multicheckbox-2 data-filter-title="Lansky"> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> Lansky <span class="f-checkbox__count u-fw-400 u-color-primary-300 u-fz-sm">(20)</span> </span> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> </div> </div> </div> </li> <li class="i-filtration col-md-6 mb-5"> <header class="i-filtration__header u-posr u-border-top u-border--tertiary-500 mb-4"> <span class="i-filtration__title u-fw-700 u-posa u-top-0 u-translate-middle-y u-bg-white pe-2 u-h4 mb-4">Stav</span> </header> <div class="i-filtration__body"> <div class="f-multicheckbox u-posr d-flex flex-column gap-2" data-name="multicheckbox-3"> <div class="f-multicheckbox__body d-flex flex-column"> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox f-multicheckbox__checkbox u-fw-600"> <input class="f-checkbox__input u-posa" type="checkbox" id="multicheckbox-field-3-0" value="in-stock" checked="checked" name=multicheckbox-3 data-filter-title="Skladem"> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> Skladem <span class="f-checkbox__count u-fw-400 u-color-primary-300 u-fz-sm">(20)</span> </span> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox f-multicheckbox__checkbox u-fw-600"> <input class="f-checkbox__input u-posa" type="checkbox" id="multicheckbox-field-3-1" value="new" name=multicheckbox-3 data-filter-title="Novinka"> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> Novinka <span class="f-checkbox__count u-fw-400 u-color-primary-300 u-fz-sm">(20)</span> </span> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox --disabled f-multicheckbox__checkbox u-fw-600"> <input class="f-checkbox__input u-posa" type="checkbox" id="multicheckbox-field-3-2" value="sale" disabled name=multicheckbox-3 data-filter-title="Výprodej"> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> Výprodej <span class="f-checkbox__count u-fw-400 u-color-primary-300 u-fz-sm">(0)</span> </span> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox f-multicheckbox__checkbox u-fw-600"> <input class="f-checkbox__input u-posa" type="checkbox" id="multicheckbox-field-3-3" value="top" name=multicheckbox-3 data-filter-title="Top produkt"> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> Top produkt <span class="f-checkbox__count u-fw-400 u-color-primary-300 u-fz-sm">(20)</span> </span> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox f-multicheckbox__checkbox u-fw-600"> <input class="f-checkbox__input u-posa" type="checkbox" id="multicheckbox-field-3-4" value="discount" checked="checked" name=multicheckbox-3 data-filter-title="Akce"> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> Akce <span class="f-checkbox__count u-fw-400 u-color-primary-300 u-fz-sm">(20)</span> </span> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> </div> </div> </div> </li> <li class="i-filtration col-md-6 mb-5"> <header class="i-filtration__header u-posr u-border-top u-border--tertiary-500 mb-4"> <span class="i-filtration__title u-fw-700 u-posa u-top-0 u-translate-middle-y u-bg-white pe-2 u-h4 mb-4">Barva tašky</span> </header> <div class="i-filtration__body"> <div class="d-flex flex-column gap-2 pt-1"> <label class="f-color u-posr u-rounded-full --lg --checkbox --checked d-flex align-items-center ms-1" style="--background-color:conic-gradient( #232323 0deg 355deg )"> <input class="f-color__input" type="checkbox" value="black" checked="checked" name=color-checkbox-black id="color-field-0" data-filter-title="Černá"></input> <span class="f-color__visual d-flex align-items-center justify-content-center u-posa u-inset-0 u-rounded-full"></span> <div class="ms-6 u-posa u-top-50-p u-translate-middle-y d-flex align-items-center gap-1"> <span class="u-fw-600">Černá</span> <span class="u-fz-sm u-color-text-400">(20)</span> </div> </label> <label class="f-color u-posr u-rounded-full --lg --checkbox d-flex align-items-center ms-1" style="--background-color:conic-gradient( #ffffff 0deg 355deg )"> <input class="f-color__input" type="checkbox" value="white" name=color-checkbox-white id="color-field-1" data-filter-title="Bílá"></input> <span class="f-color__visual d-flex align-items-center justify-content-center u-posa u-inset-0 u-rounded-full"></span> <div class="ms-6 u-posa u-top-50-p u-translate-middle-y d-flex align-items-center gap-1"> <span class="u-fw-600">Bílá</span> <span class="u-fz-sm u-color-text-400">(12)</span> </div> </label> <label class="f-color u-posr u-rounded-full --lg --checkbox d-flex align-items-center ms-1" style="--background-color:conic-gradient( #CFAF8A 0deg 355deg )"> <input class="f-color__input" type="checkbox" value="brown" name=color-checkbox-brown id="color-field-2" data-filter-title="Hnědá"></input> <span class="f-color__visual d-flex align-items-center justify-content-center u-posa u-inset-0 u-rounded-full"></span> <div class="ms-6 u-posa u-top-50-p u-translate-middle-y d-flex align-items-center gap-1"> <span class="u-fw-600">Hnědá</span> <span class="u-fz-sm u-color-text-400">(12)</span> </div> </label> <label class="f-color u-posr u-rounded-full --lg --checkbox d-flex align-items-center ms-1" style="--background-color:conic-gradient( #D9D9D9 0deg 355deg )"> <input class="f-color__input" type="checkbox" value="gray" name=color-checkbox-gray id="color-field-3" data-filter-title="Šedá"></input> <span class="f-color__visual d-flex align-items-center justify-content-center u-posa u-inset-0 u-rounded-full"></span> <div class="ms-6 u-posa u-top-50-p u-translate-middle-y d-flex align-items-center gap-1"> <span class="u-fw-600">Šedá</span> <span class="u-fz-sm u-color-text-400">(12)</span> </div> </label> <label class="f-color u-posr u-rounded-full --lg --checkbox d-flex align-items-center ms-1" style="--background-color:conic-gradient( #677DCD 0deg 355deg )"> <input class="f-color__input" type="checkbox" value="blue" name=color-checkbox-blue id="color-field-4" data-filter-title="Modrá"></input> <span class="f-color__visual d-flex align-items-center justify-content-center u-posa u-inset-0 u-rounded-full"></span> <div class="ms-6 u-posa u-top-50-p u-translate-middle-y d-flex align-items-center gap-1"> <span class="u-fw-600">Modrá</span> <span class="u-fz-sm u-color-text-400">(12)</span> </div> </label> </div> </div> </li> <li class="i-filtration col-md-6 mb-5"> <header class="i-filtration__header u-posr u-border-top u-border--tertiary-500 mb-4"> <span class="i-filtration__title u-fw-700 u-posa u-top-0 u-translate-middle-y u-bg-white pe-2 u-h4 mb-4">Nosnost tašky</span> </header> <div class="i-filtration__body"> <div class="f-multicheckbox u-posr d-flex flex-column gap-2 f-multicheckbox--toggleable" data-name="multicheckbox-5"> <div class="f-multicheckbox__body d-flex flex-column"> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox f-multicheckbox__checkbox u-fw-600"> <input class="f-checkbox__input u-posa" type="checkbox" id="multicheckbox-field-5-0" value="accusharp" checked="checked" name=multicheckbox-5 data-filter-title="AccuSharp"> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> AccuSharp <span class="f-checkbox__count u-fw-400 u-color-primary-300 u-fz-sm">(20)</span> </span> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox f-multicheckbox__checkbox u-fw-600"> <input class="f-checkbox__input u-posa" type="checkbox" id="multicheckbox-field-5-1" value="blade-tech" name=multicheckbox-5 data-filter-title="Blade-Tech"> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> Blade-Tech <span class="f-checkbox__count u-fw-400 u-color-primary-300 u-fz-sm">(20)</span> </span> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox --disabled f-multicheckbox__checkbox u-fw-600"> <input class="f-checkbox__input u-posa" type="checkbox" id="multicheckbox-field-5-2" value="demkoknives" disabled name=multicheckbox-5 data-filter-title="Demko Knives"> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> Demko Knives <span class="f-checkbox__count u-fw-400 u-color-primary-300 u-fz-sm">(0)</span> </span> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox f-multicheckbox__checkbox u-fw-600"> <input class="f-checkbox__input u-posa" type="checkbox" id="multicheckbox-field-5-3" value="Lansky" name=multicheckbox-5 data-filter-title="Lansky"> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> Lansky <span class="f-checkbox__count u-fw-400 u-color-primary-300 u-fz-sm">(20)</span> </span> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox f-multicheckbox__checkbox u-fw-600"> <input class="f-checkbox__input u-posa" type="checkbox" id="multicheckbox-field-5-4" value="200kg" checked="checked" name=multicheckbox-5 data-filter-title="200 kg"> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 200 kg <span class="f-checkbox__count u-fw-400 u-color-primary-300 u-fz-sm">(20)</span> </span> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox f-multicheckbox__checkbox u-fw-600 --js-toggleable-checkbox --hidden"> <input class="f-checkbox__input u-posa" type="checkbox" id="multicheckbox-field-5-5" value="param-1" name=multicheckbox-5 data-filter-title="160 mm"> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 160 mm <span class="f-checkbox__count u-fw-400 u-color-primary-300 u-fz-sm">(20)</span> </span> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox f-multicheckbox__checkbox u-fw-600 --js-toggleable-checkbox --hidden"> <input class="f-checkbox__input u-posa" type="checkbox" id="multicheckbox-field-5-6" value="param-2" name=multicheckbox-5 data-filter-title="165 mm"> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 165 mm <span class="f-checkbox__count u-fw-400 u-color-primary-300 u-fz-sm">(20)</span> </span> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox f-multicheckbox__checkbox u-fw-600 --js-toggleable-checkbox --hidden"> <input class="f-checkbox__input u-posa" type="checkbox" id="multicheckbox-field-5-7" value="param-3" name=multicheckbox-5 data-filter-title="168 mm"> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 168 mm <span class="f-checkbox__count u-fw-400 u-color-primary-300 u-fz-sm">(10)</span> </span> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox f-multicheckbox__checkbox u-fw-600 --js-toggleable-checkbox --hidden"> <input class="f-checkbox__input u-posa" type="checkbox" id="multicheckbox-field-5-8" value="param-4" name=multicheckbox-5 data-filter-title="171 mm"> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 171 mm <span class="f-checkbox__count u-fw-400 u-color-primary-300 u-fz-sm">(30)</span> </span> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox f-multicheckbox__checkbox u-fw-600 --js-toggleable-checkbox --hidden"> <input class="f-checkbox__input u-posa" type="checkbox" id="multicheckbox-field-5-9" value="param-5" name=multicheckbox-5 data-filter-title="111 mm"> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> 111 mm <span class="f-checkbox__count u-fw-400 u-color-primary-300 u-fz-sm">(20)</span> </span> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <div class="f-multicheckbox__toggle-trigger u-color-text-500 d-flex align-items-center gap-1 mt-1"> <strong class="f-multicheckbox__toggle-trigger-title" data-default-title="Zobrazit vše" data-active-title="Zobrazit méně"> Zobrazit vše </strong> <span class="icon d-flex align-items-center justify-content-center --colored --text --sm"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 18 18"><path fill="#23846F" fill-rule="evenodd" d="m9 12.5 6-5.735L13.677 5.5 9 9.97 4.323 5.5 3 6.765 9 12.5Z" clip-rule="evenodd"/></svg> </span> </div> </div> </div> </div> </li> <li class="i-filtration col-md-6 mb-5"> <header class="i-filtration__header u-posr u-border-top u-border--tertiary-500 mb-4"> <span class="i-filtration__title u-fw-700 u-posa u-top-0 u-translate-middle-y u-bg-white pe-2 u-h4 mb-4">Typ ucha</span> </header> <div class="i-filtration__body"> <div class="f-multicheckbox u-posr d-flex flex-column gap-2" data-name="multicheckbox-6"> <div class="f-multicheckbox__body d-flex flex-column"> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox f-multicheckbox__checkbox u-fw-600"> <input class="f-checkbox__input u-posa" type="checkbox" id="multicheckbox-field-6-0" value="textil" checked="checked" name=multicheckbox-6 data-filter-title="Textilní ucho"> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> Textilní ucho <span class="f-checkbox__count u-fw-400 u-color-primary-300 u-fz-sm">(20)</span> </span> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox f-multicheckbox__checkbox u-fw-600"> <input class="f-checkbox__input u-posa" type="checkbox" id="multicheckbox-field-6-1" value="flat" name=multicheckbox-6 data-filter-title="Ploché ucho"> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> Ploché ucho <span class="f-checkbox__count u-fw-400 u-color-primary-300 u-fz-sm">(20)</span> </span> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> <label class="f-checkbox d-inline-flex gap-1 u-posr align-items-center --checkbox --disabled f-multicheckbox__checkbox u-fw-600"> <input class="f-checkbox__input u-posa" type="checkbox" id="multicheckbox-field-6-2" value="curved" disabled name=multicheckbox-6 data-filter-title="Kroucené ucho"> <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg> </span> <div class="f-checkbox__body d-flex column-gap-1 align-items-center"> <span class="f-checkbox__title"> Kroucené ucho <span class="f-checkbox__count u-fw-400 u-color-primary-300 u-fz-sm">(0)</span> </span> </div> <span class="f-error u-fz-sm gap-1 d-none"> <span class="f-error__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm"> <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg> </span> </span> <span class="f-error__title"></span> </span> </label> </div> </div> </div> </li> </ul> <div class="row gx-3 gy-3"> <div class="col-md-6"> <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --icon-before --full-width w-100 js-filter-delete" href='#' data-filter-target="filter-form"> <span class="btn__title u-z-index-1"> Smazat všechny filtry </span> <span class="btn__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --md"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.037 0A1.456 1.456 0 0 0 4.58 1.456v1.162H1.309V4.22h1.308v9.669A2.11 2.11 0 0 0 4.727 16h6.545a2.11 2.11 0 0 0 2.11-2.11V4.22h1.309V2.619h-3.272V1.456A1.456 1.456 0 0 0 9.963 0H6.037Zm.147 2.618V1.603h3.632v1.015H6.184ZM4.22 13.89V4.22h7.558v9.67a.507.507 0 0 1-.507.507H4.728a.507.507 0 0 1-.507-.507Zm1.816-7.2h1.308v5.236H6.037V6.691Zm3.926 0H8.654v5.236h1.31V6.691Z" clip-rule="evenodd"/></svg> </span> </span> </a> </div> <div class="col-md-6"> <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --full-width w-100 c-modal__close js-filter-apply" href='#' data-filter-target="filter-form"> <span class="btn__title u-z-index-1"> Použít filtry </span> <span class="btn__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --md"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M5.84 9.48.762 3.769V2.16A2.158 2.158 0 0 1 2.924 0h10.152a2.16 2.16 0 0 1 2.161 2.16V3.77l-5.076 5.71V16L5.84 12.758V9.48ZM2.546 3.09 7.623 8.8v3.066l.754.566V8.8l4.954-5.573.122-.138v-.93a.377.377 0 0 0-.377-.376H2.924a.378.378 0 0 0-.377.376v.93Z" clip-rule="evenodd"/></svg> </span> </span> </a> </div> </div> </div> </form> </div> <div class="c-modal__button-container"> <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --transparent --sm --icon-only c-modal__close c-modal__close-cross" aria-label="close modal"> <span class="btn__icon d-flex align-items-center justify-content-center"> <span class="icon d-flex align-items-center justify-content-center --lg"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#15324F" fill-rule="evenodd" d="M10.869 12 5.435 6.565l1.13-1.13L12 10.867l5.435-5.434 1.13 1.131L13.133 12l5.434 5.434-1.131 1.131L12 13.131l-5.434 5.434-1.131-1.13L10.869 12Z" clip-rule="evenodd"/></svg> </span> </span> </button> </div> </div> </div> </div> </div> </div> </section>