/* Start:/local/templates/test_union/components/bitrix/catalog.smart.filter/glass/style.css?178057598924876*/
/* =====================================================================
   GLASS SMART-FILTER SKIN  (Apple liquid glass, hybrid A+C)
   Scope: .glassfilter (= .bx_filter of this template) + its drawer
   containers (.filter-compact-block desktop / #mobilefilter mobile).
   Colours are literals (Aspro theme overrides var(--dark/--light)).
   Reference mock: .superpowers/brainstorm/161-1780556445/content/hero-hybrid.html
   ===================================================================== */

/* ---- keep the two original rules from main_ajax ---- */
body .bx_filter.glassfilter .bx_filter_button_box.btns .btn.bx_filter_search_reset{width:auto;border:0;}

/* ===================== PANEL (warm frosted glass) ===================== */
.filter-compact-block.swipeignore,
#mobilefilter.scrollbar-filter{background:transparent!important;}

.bx_filter.glassfilter{
  background:rgba(243,237,226,.85)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid rgba(255,255,255,.55)!important;
  border-radius:24px!important;
  box-shadow:0 40px 90px -42px rgba(40,28,16,.6)!important;
  overflow:hidden;
}
#mobilefilter .bx_filter.glassfilter{border-radius:0!important;}
/* Responsive overlay-drawer width (base Aspro width was a fixed 320px → tiny on tablets/large phones).
   #mobilefilter slides in via `left` (CSS-controlled, no inline style) so overriding width + the
   closed-state left is safe and keeps the slide animation. */
@media (min-width:768px){          /* tablets + desktop: roomy fixed panel */
  #mobilefilter.scrollbar-filter{width:400px!important;}
  #mobilefilter.scrollbar-filter:not(.show){left:-420px!important;}
}
@media (max-width:767px){          /* phones: near-full width, no awkward side gap */
  #mobilefilter.scrollbar-filter{width:92vw!important;max-width:400px!important;}
  #mobilefilter.scrollbar-filter:not(.show){left:-100%!important;}
}
.glassfilter .slide-block,
.glassfilter .slide-block__body,
.glassfilter .bx_filter_section{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;}

/* ---- header (ФИЛЬТР + close) ---- */
/* width:100% — Aspro hard-set the head to 320px (position:absolute), so on the widened drawer the
   close button (right-aligned INSIDE the head) sat ~100px short of the drawer edge. */
.glassfilter .slide-block__head.filter_title{
  display:flex!important;align-items:center;gap:10px;width:100%!important;box-sizing:border-box;
  padding:17px 20px 13px!important;margin:0!important;background:none!important;border:0!important;
  font-size:13px!important;font-weight:800;letter-spacing:.13em;color:#001F1F!important;text-transform:uppercase;
}
.glassfilter .slide-block__head .svg-inline-catalog,
.glassfilter .slide-block__head svg{width:17px;height:17px;}
.glassfilter .slide-block__head .svg-close{
  left:auto!important;right:20px!important;/* close is position:absolute → margin-left:auto was a no-op; anchor it to the right edge */
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(255,255,255,.6);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 5px 12px -7px rgba(0,0,0,.35);cursor:pointer;
}
.glassfilter .slide-block__head .svg-down{display:none!important;}

/* .bx_filter_parameters is the scroll area; the sticky footer (~76px, position:absolute bottom:0)
   overlays its bottom → last section hid under «ПОКАЗАТЬ». Reserve footer height (+ iPhone safe-area). */
.glassfilter .bx_filter_parameters{padding:6px 14px calc(92px + env(safe-area-inset-bottom,0px))!important;}

/* ===================== SECTION = glass capsule (C) ===================== */
.glassfilter .bx_filter_parameters_box{
  position:relative;
  background:linear-gradient(158deg,rgba(255,255,255,.82),rgba(255,255,255,.5))!important;
  border:1px solid rgba(255,255,255,.92)!important;
  border-radius:18px!important;
  margin:0 0 12px!important;padding:4px 14px!important;/* symmetric top/bottom → collapsed header sits dead-centre in the pill */
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 16px 30px -18px rgba(60,45,30,.5),0 0 0 1px rgba(120,110,98,.05)!important;
  -webkit-backdrop-filter:blur(8px) saturate(1.2);backdrop-filter:blur(8px) saturate(1.2);
  transition:box-shadow .22s ease,transform .22s ease,background .22s ease;
}
.glassfilter .bx_filter_parameters_box.set:before{display:none!important;}
/* collapsed dropdown sections get a tactile liquid-glass lift on hover */
.glassfilter .bx_filter_parameters_box:not(.active):not(.gf-yesno):hover{
  transform:translateY(-1px);
  background:linear-gradient(158deg,#fff,rgba(255,255,255,.62))!important;
  box-shadow:0 1px 0 rgba(255,255,255,1) inset,0 22px 38px -20px rgba(60,45,30,.6),0 0 0 1px rgba(120,110,98,.08)!important;
}
/* expanded section: a touch brighter so the open one reads as "active" */
.glassfilter .bx_filter_parameters_box.active{
  background:linear-gradient(158deg,rgba(255,255,255,.9),rgba(255,255,255,.62))!important;
}

/* section title + chevron */
.glassfilter .bx_filter_parameters_box_title{
  display:flex!important;align-items:center;gap:10px;
  padding:11px 2px!important;margin:0!important;background:none!important;border:0!important;
  font-size:13px!important;font-weight:700;letter-spacing:-.01em;color:#3a342c!important;cursor:pointer;transition:color .15s;
}
.glassfilter .bx_filter_parameters_box_title.colored_theme_hover_bg-block::before,
.glassfilter .bx_filter_parameters_box_title.colored_theme_hover_bg-block::after{display:none!important;width:0!important;height:0!important;}
.glassfilter .bx_filter_parameters_box_title > div:first-child,
.glassfilter .bx_filter_parameters_box_title .title-wrapper{flex:1 1 auto;background:none!important;padding:0 38px 0 0!important;margin:0!important;width:auto!important;color:inherit;min-width:0;}
/* Aspro's .colored_theme_bg_before pulls the label 18px left (colored-bar bleed) → text sat
   flush on the capsule's left edge ("наезжает на край"). Kill the offset so it's properly inset. */
.glassfilter .bx_filter_parameters_box_title .char_name,
.glassfilter .bx_filter_parameters_box_title .hint{display:none!important;} /* hint block bloated the header height / overlap */
.glassfilter .bx_filter_parameters_box_title:hover{color:#8c7765!important;}
/* chevron → frosted-glass circle, absolutely centred on the right.
   (Aspro forces position:absolute;top:5px + a 180° matrix on this element — we override both,
   otherwise the arrow stuck to the top of the 47px header = the "съезжает" misalignment.) */
.glassfilter .bx_filter_parameters_box_title .svg-inline-down{
  position:absolute!important;top:50%!important;right:8px!important;bottom:auto!important;left:auto!important;
  width:24px!important;height:24px!important;margin:-12px 0 0 0!important;flex:none;
  border:1px solid rgba(255,255,255,.7)!important;border-radius:50%!important;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.45))!important;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 5px 12px -7px rgba(60,45,30,.45)!important;
  -webkit-mask:none!important;mask:none!important;transform:none!important;
  transition:background .2s,box-shadow .2s;
}
.glassfilter .bx_filter_parameters_box_title:hover .svg-inline-down{background:linear-gradient(180deg,#fff,rgba(255,255,255,.62))!important;box-shadow:0 1px 0 #fff inset,0 7px 16px -7px rgba(60,45,30,.55)!important;}
.glassfilter .bx_filter_parameters_box_title .svg-inline-down svg{display:none!important;}
.glassfilter .bx_filter_parameters_box_title .svg-inline-down::before{content:"";position:absolute;left:8px;top:7px;width:7px;height:7px;border-right:1.7px solid #8c7765;border-bottom:1.7px solid #8c7765;transform:rotate(45deg);transition:transform .25s ease,border-color .15s;}
.glassfilter .bx_filter_parameters_box.active .bx_filter_parameters_box_title .svg-inline-down::before{transform:rotate(-135deg);top:10px;}
.glassfilter .bx_filter_block{padding-bottom:11px;}

/* ===================== PRICE: presets + inputs + slider ===================== */
.glassfilter .gf-price-presets{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 12px;}
.glassfilter .gf-pp{
  position:relative;font-size:11.5px;line-height:1.15;padding:7px 12px;border-radius:15px;cursor:pointer;color:#4a4339;
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.52));border:1px solid rgba(255,255,255,.85);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 6px 12px -9px rgba(60,45,30,.5);white-space:nowrap;
  transition:transform .18s cubic-bezier(.2,1.3,.5,1),background .18s,color .18s,border-color .18s;
}
.glassfilter .gf-pp:hover{color:#8c7765;}
.glassfilter .gf-pp:active{transform:scale(.94);}
.glassfilter .gf-pp.is-active{background:linear-gradient(180deg,#9d8775,#8c7765);color:#fff;border-color:rgba(255,255,255,.4);}

/* Aspro wraps the two price inputs in a 1px #ececec box — drop it, each input already has its own pill */
.glassfilter .wrapp_change_inputs{display:flex!important;align-items:center;gap:8px;border:0!important;border-radius:0!important;background:none!important;}
.glassfilter .wrapp_change_inputs .bx_filter_parameters_box_container_block{flex:1 1 0;margin:0!important;padding:0!important;}
.glassfilter .wrapp_change_inputs .divider{display:none!important;}
.glassfilter .bx_filter_input_container.form-control{border:1px solid rgba(120,110,98,.3)!important;border-radius:12px!important;background:linear-gradient(180deg,#fff,#f6f2ea)!important;box-shadow:0 1px 0 rgba(255,255,255,.9) inset!important;padding:0 10px!important;transition:border-color .15s;}
.glassfilter .bx_filter_input_container.form-control:focus-within{border-color:#8c7765!important;}
.glassfilter .min-price,.glassfilter .max-price{font-size:13px!important;color:#3f3a32!important;height:38px!important;width:100%!important;text-align:center;border:0!important;background:transparent!important;outline:none!important;box-shadow:none!important;}

.glassfilter .wrapp_slider{margin:16px 2px 4px!important;padding:0 2px;}
.glassfilter .bx_ui_slider_track{height:4px!important;border-radius:3px;background:rgba(120,110,98,.2)!important;border:0!important;box-shadow:none!important;}
.glassfilter .bx_ui_slider_part{display:none!important;} /* tick markers stacked in-flow → caused the "doubled" line */
/* Aspro pins the fill bars at top:-20px (offset designed for the tick labels we hid) → they
   floated 20px ABOVE the rail = the "second line". Re-seat them onto the track. */
.glassfilter .bx_ui_slider_pricebar_V,
.glassfilter .bx_ui_slider_pricebar_VD,
.glassfilter .bx_ui_slider_pricebar_VN{top:0!important;bottom:auto!important;}
.glassfilter .bx_ui_slider_pricebar_V{height:4px!important;border-radius:3px;background:linear-gradient(90deg,#9b8676,#8c7765)!important;box-shadow:0 0 10px rgba(143,118,98,.45);}
.glassfilter .bx_ui_slider_pricebar_VD,.glassfilter .bx_ui_slider_pricebar_VN{height:4px!important;background:transparent!important;}
.glassfilter .bx_ui_slider_range{top:0!important;}
.glassfilter .bx_ui_slider_handle{width:20px!important;height:20px!important;border-radius:50%!important;top:-8px!important;background:radial-gradient(circle at 35% 30%,#fff,#ece3d4)!important;border:0!important;box-shadow:0 2px 6px rgba(0,0,0,.26),0 0 0 1px rgba(255,255,255,.7) inset!important;cursor:grab;transition:box-shadow .15s;}
.glassfilter .bx_ui_slider_handle:hover{box-shadow:0 3px 9px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.8) inset!important;}

/* ===================== CHECKBOXES + counts ===================== */
.glassfilter .bx_filter_param_label{position:relative;display:block;padding:7px 0 7px 28px!important;margin:0!important;font-size:12.5px;line-height:1.35;color:#4a4339!important;cursor:pointer;transition:color .15s;}
.glassfilter .bx_filter_param_label .bx_filter_input_checkbox{padding:0!important;}
.glassfilter .bx_filter_param_label:not(.gf-swatch):not(.gf-switch)::after{content:""!important;position:absolute;left:0;top:50%;width:19px;height:19px;margin-top:-10px;border-radius:6px;background:linear-gradient(180deg,#fff,#f3efe8);border:1px solid rgba(120,110,98,.35);box-shadow:0 1px 0 rgba(255,255,255,.9) inset;font-size:0;transition:background .15s,border-color .15s,box-shadow .15s;}
.glassfilter input:checked + .bx_filter_param_label:not(.gf-swatch):not(.gf-switch)::after{background:linear-gradient(180deg,#9d8775,#8c7765);border-color:transparent;box-shadow:0 1px 2px rgba(140,119,101,.4);}
.glassfilter .bx_filter_param_label:not(.gf-swatch):not(.gf-switch)::before{content:""!important;position:absolute;left:7px;top:50%;width:5px;height:9px;margin-top:-6px;background:none!important;border:solid #fff;border-width:0 2px 2px 0;border-radius:0;transform:rotate(45deg);z-index:2;opacity:0;font-size:0;transition:opacity .12s;}
.glassfilter input:checked + .bx_filter_param_label:not(.gf-swatch):not(.gf-switch)::before{opacity:1;}
.glassfilter .bx_filter_param_label:hover:not(.gf-switch){color:#8c7765!important;}
.glassfilter .bx_filter_param_label:hover:not(.gf-swatch):not(.gf-switch)::after{border-color:#8c7765;}
.glassfilter .bx_filter_param_text{color:inherit!important;}
.glassfilter .bx_filter_param_text [data-role^="count_"],
.glassfilter .bx_filter_param_text span[data-role^="count_"]{color:#a89f92;}
/* empty / disabled options dimmed */
.glassfilter .bx_filter_param_label.disabled,
.glassfilter input.disabled + .bx_filter_param_label{opacity:.38;pointer-events:none;}

/* show-more */
.glassfilter .inner_expand_text{padding:4px 0 2px;}
.glassfilter .expand_block{font-size:11.5px;font-weight:700;color:#8c7765!important;cursor:pointer;}
.glassfilter .expand_block:hover{color:#6f5d4e!important;}

/* ===================== SORT dropdown (glass pill) ===================== */
/* Desktop already has a sort control in the catalog toolbar — hide the in-filter one there.
   Mobile keeps it (no external sort on mobile). The box stays in the DOM, so the
   stock/sale "promote to top" logic (which skips .bx_sort_filter) is unaffected. */
@media (min-width:1024px){ .glassfilter .bx_sort_filter{display:none!important;} }
.glassfilter .bx_filter_select_block{
  display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;color:#4a4339;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.5))!important;
  border:1px solid rgba(255,255,255,.8)!important;border-radius:14px!important;padding:10px 13px!important;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset!important;cursor:pointer;
}
.glassfilter .bx_filter_select_popup{border-radius:14px!important;border:1px solid rgba(120,110,98,.2)!important;box-shadow:0 18px 40px -22px rgba(60,45,30,.55)!important;background:rgba(252,250,246,.96)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);}

/* ===================== YES/NO props → iOS glass toggle (JS adds .gf-yesno / .gf-switch) ===================== */
.glassfilter .gf-yesno{display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:12px;}
/* empty count-span is the flex-row's first child → gap:12px pushed the toggle title 12px right
   (out of line with price/dropdown titles). Drop it; selections are shown as chips anyway. */
.glassfilter .gf-yesno .bx_filter_container_modef{display:none!important;}
.glassfilter .gf-yesno .bx_filter_parameters_box_title{flex:1 1 auto;min-width:0;cursor:default;white-space:normal;line-height:1.25;}
.glassfilter .gf-yesno .bx_filter_parameters_box_title > div:first-child,
.glassfilter .gf-yesno .bx_filter_parameters_box_title .title-wrapper{padding:0!important;}
.glassfilter .gf-yesno .bx_filter_parameters_box_title .svg-inline-down{display:none!important;}
.glassfilter .gf-yesno .bx_filter_block{flex:0 0 auto;display:block!important;max-height:none!important;min-height:0;margin:0!important;padding:0!important;overflow:visible!important;}
.glassfilter .gf-yesno .bx_filter_parameters_box_container{padding:0!important;min-height:0;}
.glassfilter .gf-yesno .gf-yes-hidden{display:none!important;}
.glassfilter .gf-yesno .gf-switch{position:relative;display:block;width:46px;height:27px;margin:0;padding:0!important;cursor:pointer;}
.glassfilter .gf-yesno .gf-switch::before,.glassfilter .gf-yesno .gf-switch::after{display:none!important;content:none!important;}
.glassfilter .gf-yesno .gf-switch .bx_filter_input_checkbox{display:none!important;}
.glassfilter .gf-yesno .gf-switch-track{position:relative;display:block;width:46px;height:27px;border-radius:999px;background:rgba(120,110,98,.2);border:1px solid rgba(120,110,98,.18);box-shadow:inset 0 1px 2px rgba(0,0,0,.12);-webkit-backdrop-filter:blur(6px) saturate(1.2);backdrop-filter:blur(6px) saturate(1.2);transition:background .28s,border-color .28s;}
.glassfilter .gf-yesno .gf-switch-thumb{position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#f1ece4);box-shadow:0 2px 5px rgba(0,0,0,.28),inset 0 1px 1px rgba(255,255,255,.9);transition:left .28s cubic-bezier(.4,0,.2,1);}
.glassfilter .gf-yesno input:checked + .gf-switch .gf-switch-track{background:linear-gradient(180deg,#9d8775,#8c7765);border-color:#8c7765;}
.glassfilter .gf-yesno input:checked + .gf-switch .gf-switch-thumb{left:22px;}

/* ===================== COLOR SWATCHES (JS adds .gf-swatch + .gf-sw-dot) ===================== */
.glassfilter .gf-swatch{position:relative;padding-left:32px!important;}
/* kill the theme's checkbox pseudo that showed through behind the colour dot */
.glassfilter .gf-swatch::before,.glassfilter .gf-swatch::after{display:none!important;content:none!important;}
.glassfilter .gf-swatch .bx_filter_input_checkbox::before,.glassfilter .gf-swatch .bx_filter_input_checkbox::after{display:none!important;}
.glassfilter .gf-swatch .gf-sw-dot{position:absolute;left:0;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;border:1px solid rgba(0,0,0,.14);box-shadow:0 1px 2px rgba(0,0,0,.18);}
.glassfilter input:checked + .gf-swatch .gf-sw-dot{border-color:transparent;box-shadow:0 0 0 2px #fff,0 0 0 4px #8c7765;}

/* ===================== FACET in-list search (JS adds .gf-facet-search) ===================== */
.glassfilter .gf-facet-search{position:relative;margin:0 0 10px;}
.glassfilter .gf-facet-search__input{width:100%;box-sizing:border-box;font:inherit;font-size:12px;padding:8px 28px 8px 11px;border:1px solid rgba(120,110,98,.28);border-radius:12px;background:linear-gradient(180deg,#fff,#f6f2ea);color:#4a4339;outline:none;box-shadow:0 1px 0 rgba(255,255,255,.9) inset;transition:border-color .15s;}
.glassfilter .gf-facet-search__input:focus{border-color:#8c7765;}
.glassfilter .gf-facet-search__input::placeholder{color:#a89f92;}
.glassfilter .gf-facet-search__clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:18px;height:18px;display:none;align-items:center;justify-content:center;color:#a89f92;font-size:15px;cursor:pointer;}
.glassfilter .gf-facet-search__input:not(:placeholder-shown) ~ .gf-facet-search__clear{display:flex;}
.glassfilter .gf-hide{display:none!important;}
.glassfilter .bx_filter_block.gf-searching .hidden_values{display:block!important;}
.glassfilter .bx_filter_block.gf-searching .inner_expand_text{display:none!important;}

/* ===================== FOOTER «ПОКАЗАТЬ N» (glass capsule + sheen) =====================
   The visible sticky button is .bx_filter_search_button (in .filter-bnt-wrapper); when a
   filter is active Aspro swaps in #modef_mobile a.btn (with the live count). Style both.
   The brown bar was the .colored_theme_bg container — override to a frosted footer. */
.glassfilter .bx_filter_button_box.btns{
  background:rgba(243,237,226,.92)!important;border:0!important;border-top:1px solid rgba(255,255,255,.5)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  padding:13px 16px 15px!important;position:relative;
  width:100%!important;/* Aspro hard-set 320px (old drawer width) → didn't follow the widened 400px drawer, button looked narrow */
}
.glassfilter .bx_filter_button_box.btns .bx_filter_block,
.glassfilter .bx_filter_button_box.btns .bx_filter_parameters_box_container{padding:0!important;margin:0!important;border:0!important;background:none!important;}
/* Respect Bitrix's own show/hide (inline display / .hidden) — only kill the floats.
   #modef / #modef_mobile carry class `right` (float:right + shrink-to-content); the 100%-wide
   button was therefore 100% of a narrow floated box = "ПОКАЗАТЬ drifts right when a prop is active". */
.glassfilter .bx_filter_button_box.btns .bx_filter_parameters_box_container{display:block;}
.glassfilter .bx_filter_popup_result.right,
.glassfilter #modef,.glassfilter #modef_mobile{float:none!important;width:100%!important;max-width:none!important;text-align:center!important;font-size:11.5px;color:#8c7765;line-height:1.3;}
.glassfilter .filter-bnt-wrapper:not(.hidden){display:block!important;}
/* When a filter is active Aspro adds padding-left:60px here to reserve room for the floated
   reset button — but our reset is absolute (top-right), so that padding just shoved ПОКАЗАТЬ
   60px to the right ("button drifts right on activation"). Reclaim full width. */
.glassfilter .filter-bnt-wrapper{padding-left:0!important;}
.glassfilter #modef .btn,.glassfilter #modef_mobile .btn{margin-top:10px!important;}
.glassfilter .bx_filter_search_button,
.glassfilter .bx_filter_popup_result .btn{
  position:relative;overflow:hidden;display:block!important;width:100%!important;box-sizing:border-box;float:none!important;text-align:center;
  border:0!important;border-radius:16px!important;padding:15px 16px!important;margin:0!important;
  font-size:13px!important;font-weight:800!important;letter-spacing:.04em;text-transform:uppercase;color:#fff!important;
  background:linear-gradient(180deg,#9d8775,#8c7765)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 14px 30px -12px rgba(143,118,98,.95)!important;
}
.glassfilter #modef_num,.glassfilter #modef_num_mobile{font-weight:900;color:#3a342c;}
.glassfilter .bx_filter_search_button::after,
.glassfilter .bx_filter_popup_result .btn::after{content:"";position:absolute;top:0;left:-60%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);animation:gfSheen 3.4s ease-in-out infinite;}
@keyframes gfSheen{0%,62%{left:-60%}100%{left:130%}}
/* reset = small brown link, not a full brown bar */
.glassfilter .bx_filter_button_box.btns .bx_filter_search_reset{width:auto!important;background:transparent!important;border:0!important;color:#8c7765!important;box-shadow:none!important;position:absolute;right:16px;top:-30px;padding:4px!important;}

/* ===================== skeleton (JS injects .gf-skeleton over .js-load-wrapper) ===================== */
.gf-skeleton{position:absolute;inset:0;z-index:5;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;padding:8px;background:rgba(247,242,234,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.gf-sk-card{border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 10px 24px -18px rgba(60,45,30,.5);}
.gf-sk-img{height:150px;position:relative;overflow:hidden;background:#e9e2d6;}
.gf-sk-img::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);animation:gfShim 1.4s infinite;}
@keyframes gfShim{100%{transform:translateX(100%)}}
.gf-sk-line{height:9px;margin:10px 12px;border-radius:5px;background:#e9e2d6;}
.gf-sk-line.s{width:50%;}

/* ===================== ACTIVE FILTER CHIPS (JS injects #rd-filter-chips above grid) ===================== */
#rd-filter-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px;}
#rd-filter-chips .rd-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:6px 10px;border-radius:14px;color:#4a4339;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.62));border:1px solid rgba(255,255,255,.85);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 8px 16px -10px rgba(60,45,30,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
#rd-filter-chips .rd-chip-x{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border:0;padding:0;background:rgba(120,110,98,.16);border-radius:50%;color:#6f5d4e;font-size:10px;line-height:1;cursor:pointer;}
#rd-filter-chips .rd-chip-x:hover{background:rgba(140,119,101,.3);}
#rd-filter-chips .rd-chip-reset{border:0;background:none;padding:5px 4px;font:inherit;font-size:12px;font-weight:700;color:#8c7765;cursor:pointer;}
#rd-filter-chips .rd-chip-reset:hover{color:#6f5d4e;}

/* End */
/* /local/templates/test_union/components/bitrix/catalog.smart.filter/glass/style.css?178057598924876 */