/* 2026-10-27 (LOCAL): filters in design variant 3 (screenshots/cart/filtr.png):
   row 1 = [Филтри] [Сортиране], row 2 = wide [Избор на цвят] (four colour dashes | label); the opened lists drop down full width under the buttons.
   Pure CSS over the existing markup of filter_*.php (.filter_box / .sort_box) and inc/color_filter.php (.lia_cf_box): the boxes become display:contents,
   so their toggle buttons and their lists are laid out by the grid of .lia-f3. The JS (toggleFilters / toggleSort / liaToggleColors) is untouched. */
.lia-f3{width:90%;margin:18px auto;display:grid;grid-template-columns:1fr 1fr;column-gap:10px;row-gap:0;align-items:stretch;font-family:'Roboto',Arial,sans-serif;}
.lia-f3>.filter_box,.lia-f3>.lia_cf_box{display:contents;width:auto;margin:0;}
.lia-f3>p,.lia-f3>.alinkpath_p{grid-column:1/-1;order:0;}

/* the three buttons */
.lia-f3 .filter_box .filter_toggle,.lia-f3 .filter_toggle,.lia-f3 .lia_cf_toggle{display:flex;align-items:center;justify-content:space-between;gap:6px;box-sizing:border-box;min-height:46px;margin:0 0 10px 0;padding:0 12px;background:#fff;color:#1d2530;border:1px solid #cfd3d8;border-radius:14px;box-shadow:0 1px 2px rgba(20,30,45,.06);font-size:15px;font-weight:500;line-height:1.2;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.lia-f3 .filter_box .filter_toggle.open,.lia-f3 .filter_toggle.open,.lia-f3 .lia_cf_toggle.open{background:#f3f4f6;border-color:#b8bdc4;}
.lia-f3 #filterBox .filter_toggle{order:1;}
.lia-f3 .filter_box.sort_box .filter_toggle{order:2;}
.lia-f3 .lia_cf_toggle{order:3;grid-column:1/-1;font-size:16px;}
/* a page that has only the sort button: it takes the whole row */
.lia-f3>.sort_box:first-of-type .filter_toggle{grid-column:1/-1;}
.lia-f3 .filter_left,.lia-f3 .lia_cf_left{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:12px;}
.lia-f3 .filter_left span{white-space:nowrap;}

/* icons (the old inline SVG is hidden, the variant-3 icon is drawn instead) */
.lia-f3 .filter_icon{display:none;}
.lia-f3 .filter_left:before{content:"";flex:0 0 24px;width:24px;height:24px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d2530' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3 6h18M6.5 12h11M10 18h4'/%3E%3C/svg%3E");}
.lia-f3 .sort_box .filter_left:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d2530' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16M3.5 7.5L7 4l3.5 3.5M3.5 16.5L7 20l3.5-3.5M14 7h7M14 12h7M14 17h5'/%3E%3C/svg%3E");}

/* chevrons */
.lia-f3 .filter_main_arrow,.lia-f3 .filter_main_arrow_sort,.lia-f3 .lia_cf_arrow{flex:0 0 auto;font-size:26px;line-height:1;font-weight:300;color:#1d2530;}

/* colour button: four dashes | label */
.lia-f3 .lia_cf_dashes{flex:0 0 auto;display:flex;align-items:center;gap:5px;}
.lia-f3 .lia_cf_dashes i{display:block;width:26px;height:7px;border-radius:4px;}
.lia-f3 .lia_cf_dashes i:nth-child(1){background:#f0615c;}
.lia-f3 .lia_cf_dashes i:nth-child(2){background:#f6d56e;}
.lia-f3 .lia_cf_dashes i:nth-child(3){background:#62cdb3;}
.lia-f3 .lia_cf_dashes i:nth-child(4){background:#5aa8e8;}
.lia-f3 .lia_cf_vline{flex:0 0 1px;align-self:stretch;margin:10px 0;background:#cfd3d8;}
.lia-f3 .lia_cf_label{flex:1 1 auto;min-width:0;text-align:center;}
.lia-f3 .lia_cf_sel{display:block;font-size:12px;font-weight:400;color:#6b7280;}

/* opened lists: full width under the buttons, in the order filter -> sort -> colours */
.lia-f3 .filters_body,.lia-f3 .lia_cf_body{grid-column:1/-1;margin:0;}
.lia-f3 #filtersBody{order:4;}
.lia-f3 #sortBody{order:5;}
.lia-f3 .lia_cf_body{order:6;}
.lia-f3 .filters_body.open,.lia-f3 .lia_cf_body.open{margin:0 0 10px 0;}
.lia-f3 .filters_body .filter_link,.lia-f3 .lia_cf_item{padding-left:4px;padding-right:4px;}

@media (min-width:992px){
 .lia-f3{width:100%;}
 .lia-f3 .filter_toggle,.lia-f3 .lia_cf_toggle{font-size:14px;padding:0 10px;}
 .lia-f3 .lia_cf_toggle{font-size:15px;}
}