/*
 * Premium PLP (Product Listing Page) filter sidebar skin.
 * Loaded on every collection page after main43e1.css. Pure presentation
 * layer: every selector targets markup emitted by product-grid.php's
 * render_filter_checkbox_group()/inline filter-group blocks, driven by the
 * theme's own already-loaded <toggle-target>/<filter-container> custom
 * elements (maine5dd.js) for accordion expand/collapse and the mobile
 * drawer — nothing here changes form field names, values, or JS behavior.
 *
 * Tokens read the site's real live brand variables (--primary/--lightgreen/
 * --grey from the sitewide premium.css theme override) so the sidebar's
 * selected/active states match every button/link elsewhere on the site.
 */

:root{
  --plp-bg:#FFFFFF;
  --plp-border:#E8ECEE;
  --plp-primary:var(--primary, #1E3A5F);
  --plp-secondary:var(--grey, #6B7280);
  --plp-selected:var(--primary, #1E3A5F);
  --plp-accent:var(--lightgreen, #C9A86A);
  --plp-hover:#F8F9FA;
  --plp-danger:#E53935;
  --plp-radius:16px;
  --plp-pad:16px;
  --plp-ease:cubic-bezier(.4,0,.2,1);
}

.filters, .filters *{ box-sizing:border-box; }

/* ============ Utility bar filter toggle (mobile/tablet drawer trigger) ============ */
.utility-bar .toggle-btn[data-toggle-filters]{
  border:1px solid var(--plp-border); border-radius:999px; padding:8px 16px;
  transition:border-color .2s var(--plp-ease), background .2s var(--plp-ease);
}
.utility-bar .toggle-btn[data-toggle-filters]:hover{ border-color:var(--plp-primary); background:var(--plp-hover); }
@media(min-width:1024px){
  .utility-bar .toggle-btn[data-toggle-filters]{ display:none; }
}

/* ============ Sidebar shell ============ */
.filter-container.filter-container--side{
  display:flex; align-items:flex-start; gap:32px;
}
.filter-container--side .filters-adjacent{ flex:1; min-width:0; }

.filters{
  background:var(--plp-bg); border:1px solid var(--plp-border); border-radius:var(--plp-radius);
  box-shadow:0 4px 24px rgba(17,17,17,.06);
  display:flex; flex-direction:column; overflow:hidden;
}
.filters__inner{ display:flex; flex-direction:column; min-height:0; flex:1; padding:0; }
/* Neutralize the theme's own generic checkbox pseudo-element indicator — we
   supply our own visual for every variant (box / swatch / pill / size). */
.filters .filter-group__item__text:before{ content:none; }
.filters .filter-tick{ display:none; }

@media(min-width:1024px){
  .filter-container--side .filters{
    visibility:visible!important; width:350px; flex:0 0 350px;
    height:auto!important; max-height:calc(100vh - 48px); overflow:hidden!important;
    opacity:1!important; transform:none!important;
    position:sticky; top:24px;
  }
  .filters__close{ display:none; }
}

/* ============ Header: "Filters (n)" + Clear All ============ */
.filters__heading{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:var(--plp-pad); border-bottom:1px solid var(--plp-border);
}
.filters__heading-text{
  display:flex; align-items:center; gap:8px;
  font-size:16px; font-weight:600; color:var(--plp-primary); line-height:1.2;
}
.plp-active-count{
  display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px;
  padding:0 6px; border-radius:999px; background:var(--plp-primary); color:#fff; font-size:11px; font-weight:700;
}
.plp-clear-all{
  font-size:13px; font-weight:600; color:var(--plp-secondary); text-decoration:none;
  transition:color .15s var(--plp-ease);
}
.plp-clear-all:hover, .plp-clear-all:focus-visible{ color:var(--plp-primary); text-decoration:underline; }
.filters__close{
  display:none; align-items:center; justify-content:center; width:32px; height:32px; margin-left:4px;
  border-radius:50%; color:var(--plp-secondary); transition:background .15s var(--plp-ease), color .15s var(--plp-ease);
}
.filters__close:hover{ background:var(--plp-hover); color:var(--plp-primary); }

/* ============ Active filter chips (directly under header) ============ */
.plp-active-filters{
  flex:0 0 auto; display:flex; flex-wrap:wrap; gap:6px;
  padding:10px var(--plp-pad); border-bottom:1px solid var(--plp-border);
}
.plp-chip{
  display:inline-flex; align-items:center; gap:6px; background:var(--plp-hover);
  border:1px solid var(--plp-border); border-radius:999px; padding:6px 8px 6px 14px;
  font-size:12.5px; color:var(--plp-primary); text-decoration:none;
  transition:border-color .15s var(--plp-ease), background .15s var(--plp-ease);
}
.plp-chip:hover, .plp-chip:focus-visible{ border-color:var(--plp-primary); background:#fff; }
.plp-chip__x{
  display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;
  border-radius:50%; background:var(--plp-primary); color:#fff; font-size:11px; line-height:1;
}

/* ============ Scrollable filter body ============ */
.filters__body{
  flex:1 1 auto; min-height:0; overflow-y:auto; padding:0 var(--plp-pad);
  scrollbar-width:thin; scrollbar-color:var(--plp-border) transparent;
}
.filters__body::-webkit-scrollbar{ width:6px; }
.filters__body::-webkit-scrollbar-track{ background:transparent; }
.filters__body::-webkit-scrollbar-thumb{ background:var(--plp-border); border-radius:999px; }
.filters__body::-webkit-scrollbar-thumb:hover{ background:#d5d5d5; }

/* ============ Accordion groups ============ */
.filter-group{ border-bottom:1px solid var(--plp-border); padding:7px 0; }
.filter-group:last-of-type{ border-bottom:none; padding-bottom:4px; }
.filter-group__heading{
  display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none;
  outline-offset:4px; padding:4px 0;
}
.filter-group__heading__text{ font-size:13px; font-weight:700; color:var(--plp-primary); text-transform:uppercase; letter-spacing:.02em; }
.filter-group__heading__indicator svg{
  transition:transform .3s var(--plp-ease); color:var(--plp-secondary); width:18px; height:18px; display:block;
}
toggle-target.filter-group__heading:not(.toggle-target-toggler--is-hidden) .filter-group__heading__indicator svg{
  transform:rotate(180deg);
}
.filter-group__items{ transition:height .3s var(--plp-ease), opacity .3s var(--plp-ease); }
.filter-group__items .toggle-target-container{ padding-top:4px; }

/* ============ Search-inside-filter (Brand / Category) ============ */
.plp-search{
  position:relative; display:flex; align-items:center; margin-bottom:12px;
  border:1.5px solid var(--plp-border); border-radius:8px; padding:0 12px;
  transition:border-color .2s var(--plp-ease);
}
.plp-search svg{ flex:0 0 auto; color:var(--plp-secondary); }
.plp-search:focus-within{ border-color:var(--plp-primary); }
.plp-search__input{
  border:none; background:transparent; width:100%; padding:9px 8px; font-size:14px; color:var(--plp-primary);
}
.plp-search__input:focus{ outline:none; }
.plp-search__input::placeholder{ color:var(--plp-secondary); }
.filter-group__item[data-plp-filter-hidden]{ display:none; }

/* ============ Checkbox lists (Category / Brand / Fit / Pattern / Rating / Availability) ============ */
.filter-group__item-list{ display:flex; flex-direction:column; gap:0; }
.filter-group__item{
  display:flex; align-items:center; gap:10px; padding:2px 0; cursor:pointer;
  font-size:13px; font-weight:500; color:var(--plp-primary); border-radius:6px;
}
.filter-group__item:hover{ background:var(--plp-hover); margin:0 -8px; padding:2px 8px; }
.filter-group__checkbox{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  position:absolute; width:1px; height:1px; opacity:0; margin:0; padding:0; border:0;
  overflow:hidden; pointer-events:none;
}
.filter-group__checkbox:disabled ~ .filter-group__item__text{ color:#C4C4C4; cursor:not-allowed; }
.plp-checkbox-box{
  flex:0 0 auto; width:18px; height:18px; border:1.5px solid #D6D6D6; border-radius:5px;
  position:relative; background:#fff;
  transition:background .15s var(--plp-ease), border-color .15s var(--plp-ease), box-shadow .15s var(--plp-ease);
}
.filter-group__item:hover .plp-checkbox-box{ border-color:var(--plp-primary); }
.filter-group__checkbox:focus-visible ~ .plp-checkbox-box{ box-shadow:0 0 0 3px rgba(30,58,95,.15); }
.filter-group__checkbox:checked ~ .plp-checkbox-box{ background:var(--plp-selected); border-color:var(--plp-selected); }
.filter-group__checkbox:checked ~ .plp-checkbox-box::after{
  content:""; position:absolute; left:5px; top:1px; width:5px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
  animation:plp-check-in .18s var(--plp-ease);
}
.filter-group__checkbox:disabled ~ .plp-checkbox-box{ background:#F2F2F2; border-color:#E4E4E4; cursor:not-allowed; }
@keyframes plp-check-in{ from{ opacity:0; transform:rotate(45deg) scale(.4); } to{ opacity:1; transform:rotate(45deg) scale(1); } }

.filter-group__item__text{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex:1; min-width:0; }
.filter-group__item__label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.plp-count{ flex:0 0 auto; font-size:13px; font-weight:500; color:var(--plp-secondary); }

/* Rating group: same checkbox-list layout, just a touch of gold for the
   inline "★" glyph baked into each label ("4★ & above"). */
.filter-group--rating .filter-group__item__label{ color:inherit; }

/* ============ Size: pill/chip buttons ============ */
.filter-group--size .filter-group__item-list{ flex-direction:row; flex-wrap:wrap; gap:6px; }
.filter-group--size .filter-group__item{
  width:auto; min-width:36px; height:34px; padding:0 10px; margin:0; gap:0;
  border:1.5px solid #D6D6D6; border-radius:3px; justify-content:center; position:relative;
  transition:border-color .2s var(--plp-ease), transform .15s var(--plp-ease), background .2s var(--plp-ease);
}
.filter-group--size .filter-group__item:hover{ border-color:var(--plp-primary); background:transparent; transform:translateY(-1px); }
.filter-group--size .filter-group__checkbox{ position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; border-radius:3px; }
.filter-group--size .filter-group__item__text{ position:static; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:var(--plp-primary); pointer-events:none; }
.filter-group--size .plp-count{ display:none; }
.filter-group--size .filter-group__checkbox:checked ~ .filter-group__item__text{ color:#fff; }
.filter-group--size .filter-group__item:has(.filter-group__checkbox:checked),
.filter-group--size .plp-size-chip.is-active{ background:var(--plp-selected); border-color:var(--plp-selected); }
.filter-group--size .plp-size-chip.is-active .filter-group__item__text{ color:#fff; }
.filter-group--size .filter-group__checkbox:disabled ~ .filter-group__item__text{ color:#C4C4C4; }

/* ============ Colour: circular swatches with tooltip ============ */
.filter-group--colour .filter-group__item-list{ flex-direction:row; flex-wrap:wrap; gap:10px; }
.filter-group--colour .filter-group__item{ flex-direction:column; width:44px; gap:4px; padding:0; text-align:center; }
.filter-group--colour .filter-group__item:hover{ background:transparent; margin:0; padding:0; }
.filter-group--colour .filter-group__checkbox{ position:absolute; opacity:0; width:1px; height:1px; }
.plp-swatch{
  width:28px; height:28px; border-radius:50%; border:1.5px solid var(--plp-border); position:relative;
  transition:box-shadow .2s var(--plp-ease), border-color .2s var(--plp-ease), transform .15s var(--plp-ease);
}
.filter-group--colour .filter-group__item:hover .plp-swatch{ border-color:var(--plp-primary); transform:scale(1.06); }
.filter-group--colour .filter-group__checkbox:focus-visible ~ .plp-swatch{ box-shadow:0 0 0 3px rgba(30,58,95,.15); }
.filter-group--colour .filter-group__checkbox:checked ~ .plp-swatch{
  border-color:var(--plp-primary); box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--plp-primary);
}
.filter-group--colour .filter-group__checkbox:checked ~ .plp-swatch::after{
  content:""; position:absolute; inset:0; margin:auto; width:9px; height:6px;
  border:solid #fff; border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-1px);
  filter:drop-shadow(0 0 1px rgba(0,0,0,.6));
}
.filter-group--colour .filter-group__item__text{ display:block; font-size:11px; color:var(--plp-secondary); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.filter-group--colour .plp-count{ display:none; }

/* Swatch colour map, keyed off data-tag="<lowercased value>" (server-rendered) */
.filter-group--colour [data-tag="beige"] .plp-swatch{ background:#E8DCC8; }
.filter-group--colour [data-tag="black"] .plp-swatch{ background:#111; }
.filter-group--colour [data-tag="blue"] .plp-swatch{ background:#2255AA; }
.filter-group--colour [data-tag="brown"] .plp-swatch{ background:#7B4B2A; }
.filter-group--colour [data-tag="cream"] .plp-swatch{ background:#F3ECD9; }
.filter-group--colour [data-tag="general"] .plp-swatch{ background:conic-gradient(from 0deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); }
.filter-group--colour [data-tag="green"] .plp-swatch{ background:#2F6B3A; }
.filter-group--colour [data-tag="grey"] .plp-swatch{ background:#9A9A9A; }
.filter-group--colour [data-tag="khaki"] .plp-swatch{ background:#8C8253; }
.filter-group--colour [data-tag="maroon"] .plp-swatch{ background:#5E1A24; }
.filter-group--colour [data-tag="multi"] .plp-swatch{ background:linear-gradient(135deg,#e33 0 25%,#3a3 25% 50%,#33a 50% 75%,#ea3 75% 100%); }
.filter-group--colour [data-tag="navy"] .plp-swatch{ background:#132242; }
.filter-group--colour [data-tag="orange"] .plp-swatch{ background:#D66423; }
.filter-group--colour [data-tag="pink"] .plp-swatch{ background:#E4A3B5; }
.filter-group--colour [data-tag="purple"] .plp-swatch{ background:#5B3A78; }
.filter-group--colour [data-tag="red"] .plp-swatch{ background:#B3261E; }
.filter-group--colour [data-tag="white"] .plp-swatch{ background:#fff; }
.filter-group--colour [data-tag="yellow"] .plp-swatch{ background:#E8C93A; }

/* ============ Price slider ============ */
.cc-price-range{ display:block; }
.plp-price-readout{ display:flex; justify-content:space-between; font-size:14px; font-weight:600; color:var(--plp-primary); margin-bottom:10px; }
.plp-price-slider{ position:relative; height:36px; }
.plp-price-slider__track{ position:absolute; top:16px; left:0; right:0; height:4px; border-radius:999px; background:var(--plp-border); }
.plp-price-slider__range{ position:absolute; top:16px; height:4px; border-radius:999px; background:var(--plp-primary); }
.plp-price-slider input[type="range"]{
  position:absolute; top:8px; left:0; width:100%; height:20px; margin:0;
  appearance:none; -webkit-appearance:none; background:transparent; pointer-events:none;
}
.plp-price-slider input[type="range"]::-webkit-slider-thumb{
  appearance:none; -webkit-appearance:none; pointer-events:auto;
  width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid var(--plp-primary);
  box-shadow:0 1px 4px rgba(0,0,0,.25); cursor:grab; transition:box-shadow .15s var(--plp-ease);
}
.plp-price-slider input[type="range"]:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 4px rgba(30,58,95,.15); }
.plp-price-slider input[type="range"]::-moz-range-thumb{
  pointer-events:auto; width:18px; height:18px; border-radius:50%; background:#fff;
  border:2px solid var(--plp-primary); box-shadow:0 1px 4px rgba(0,0,0,.25); cursor:grab;
}

/* ============ Discount: rounded pill chips ============ */
.filter-group--discount .filter-group__item-list{ flex-direction:row; flex-wrap:wrap; gap:8px; }
.filter-group--discount .filter-group__item{
  border:1.5px solid #D6D6D6; border-radius:999px; padding:8px 16px; gap:0;
  transition:border-color .2s var(--plp-ease), background .2s var(--plp-ease);
}
.filter-group--discount .filter-group__item:hover{ background:var(--plp-hover); margin:0; padding:8px 16px; }
.filter-group--discount .filter-group__checkbox{ position:absolute; opacity:0; width:1px; height:1px; }
.filter-group--discount .filter-group__item:has(.filter-group__checkbox:checked){ background:var(--plp-selected); border-color:var(--plp-selected); }
.filter-group--discount .filter-group__checkbox:checked ~ .filter-group__item__text{ color:#fff; }
.filter-group--discount .filter-group__item__text{ font-size:13px; font-weight:500; }
.filter-group--discount .plp-count{ color:inherit; opacity:.7; }

/* ============ Sticky Apply / Reset footer ============ */
.filters__footer{
  flex:0 0 auto; display:flex; gap:8px; padding:10px var(--plp-pad) var(--plp-pad);
  border-top:1px solid var(--plp-border); background:var(--plp-bg); border-radius:0 0 var(--plp-radius) var(--plp-radius);
}
.filters__footer .btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; position:relative; overflow:hidden; }
.filter-apply-btn{
  background:var(--plp-primary); border-color:var(--plp-primary); border-radius:8px;
  font-size:13px; font-weight:600; letter-spacing:.4px; padding:11px 14px;
  transition:background .2s var(--plp-ease), transform .1s var(--plp-ease);
}
.filter-apply-btn:hover{ background:var(--plp-accent); border-color:var(--plp-accent); }
.filter-apply-btn:active{ transform:scale(.98); }
.filter-apply-btn[data-loading="true"]{ pointer-events:none; opacity:.85; }
.filter-apply-btn[data-loading="true"] .filter-apply-btn__label{ visibility:hidden; }
.filter-apply-btn[data-loading="true"]::after{
  content:""; position:absolute; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff; animation:plp-spin .6s linear infinite;
}
@keyframes plp-spin{ to{ transform:rotate(360deg); } }
.filter-reset-btn{
  border-radius:8px; border:1.5px solid var(--plp-border); color:var(--plp-secondary);
  font-size:13px; font-weight:600; background:transparent; padding:11px 14px;
  transition:border-color .2s var(--plp-ease), color .2s var(--plp-ease), background .2s var(--plp-ease);
}
.filter-reset-btn:hover{ border-color:var(--plp-primary); color:var(--plp-primary); background:var(--plp-hover); }

/* Button ripple (Apply / Reset) */
.filters__footer .btn::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(circle, rgba(255,255,255,.35) 0%, transparent 60%);
  opacity:0; transform:scale(0); transition:opacity .4s var(--plp-ease), transform .4s var(--plp-ease);
}
.filters__footer .btn:active::before{ opacity:1; transform:scale(1); transition:0s; }

/* ============ "Showing X-Y of N products" ============ */
.utility-bar__centre .utility-bar__item{ color:var(--plp-primary); font-weight:500; font-size:14px; }

/* ============ Product grid / cards ============
   Layout-structural resets only — visual design (colour/type/radius) for
   the card itself now lives entirely in plp-premium.css, which is loaded
   right after this file and carries enough specificity to be the single
   source of truth over product-card-v2.css's sitewide defaults. This
   section just keeps the PLP grid's structural needs (gaps, in-flow
   cta-row instead of product-card-v2.css's absolute-pinned one, flex
   detail column so cards align) without re-declaring any visual property
   plp-premium.css already owns — duplicating both was how the buttons
   ended up rendering at a stray 10px/3px-radius instead of the intended
   premium design. */
.shopify-section .product-grid{ row-gap:20px!important; column-gap:12px!important; }
.shopify-section .product-block{ text-align:left; }
.shopify-section product-block .product-block__detail{ flex:1; display:flex; flex-direction:column; }
/* cta-row used to be absolutely pinned to the card bottom (product-card-v2.css),
   which needs a fixed blank padding-bottom reserve sized for the tallest
   possible price row (was-price + wrapped discount pill) — on shorter cards
   (no discount) that same fixed reserve just shows up as dead air above the
   buttons. Putting the row back in normal flow removes the need for any
   reserve: the buttons simply sit right after whatever price content renders. */
.shopify-section product-block .product-block__detail .innerer{ padding-bottom:0!important; }
.shopify-section product-block .product-block__cta-row{
  position:static!important; left:auto!important; right:auto!important; bottom:auto!important; margin-top:10px!important;
}
@media(max-width:767.98px){
  .shopify-section .product-grid{ row-gap:16px!important; column-gap:10px!important; }
}

/* ============ Empty state + "You May Also Like" fallback ============ */
.shopify-section .plp-empty{ width:100%; text-align:center; padding:64px 24px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.shopify-section .plp-empty__icon{
  width:64px; height:64px; border-radius:50%; background:var(--plp-hover); color:var(--plp-secondary);
  display:flex; align-items:center; justify-content:center; margin-bottom:12px;
}
.shopify-section .plp-empty__icon svg{ width:28px; height:28px; }
.shopify-section .plp-empty__title{ font-size:20px; font-weight:600; color:var(--plp-primary); margin:0; }
.shopify-section .plp-empty__sub{ font-size:14px; color:var(--plp-secondary); margin:4px 0 20px; max-width:420px; }
.shopify-section .plp-empty__actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.shopify-section .plp-empty-recommend{ width:100%; margin-top:32px; padding-top:40px; border-top:1px solid var(--plp-border); }
.shopify-section .plp-empty-recommend__title{ font-size:22px; font-weight:600; text-align:center; margin:0 0 24px; }
@media(max-width:479.98px){
  .shopify-section .plp-empty{ padding:48px 16px; }
  .shopify-section .plp-empty__actions{ flex-direction:column; width:100%; }
  .shopify-section .plp-empty__actions .btn{ width:100%; }
}

/* ============ Tablet: collapsible sidebar (drawer, same mechanism as mobile) ============ */
@media(min-width:768px) and (max-width:1023.98px){
  .filter-container--side .filters{
    position:fixed!important; top:0!important; left:0!important; right:auto!important;
    width:min(60vw,380px)!important; height:100vh!important; max-height:none!important;
    border-radius:0; border:none; box-shadow:0 0 40px rgba(0,0,0,.25);
    visibility:visible!important; transform:translateX(-100%)!important;
    transition:transform .3s var(--plp-ease)!important; z-index:100001;
  }
  .filter-container--show-filters-mobile .filters,
  .filter-container--show-filters-desktop .filters{ transform:translateX(0)!important; }
  .filters__close{ display:flex!important; }
}

/* ============ Mobile: slide-in drawer + overlay ============ */
@media(max-width:767.98px){
  .filter-container--side .filters{
    position:fixed!important; top:0!important; left:0!important; right:auto!important;
    width:min(88vw,360px)!important; height:100vh!important; max-height:none!important;
    border-radius:0; border:none; box-shadow:0 0 40px rgba(0,0,0,.25);
    visibility:visible!important; transform:translateX(-100%)!important;
    transition:transform .3s var(--plp-ease)!important; z-index:100001;
  }
  .filter-container--show-filters-mobile .filters,
  .filter-container--show-filters-desktop .filters{ transform:translateX(0)!important; }
  .filters__close{ display:flex!important; }
  .filter-group--size .filter-group__item{ height:34px; min-width:34px; }
}
@media(max-width:1023.98px){
  .filter-shade{
    position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:100000;
    visibility:hidden; opacity:0; transition:opacity .3s var(--plp-ease);
  }
  .filter-container--show-filters-mobile .filter-shade,
  .filter-container--show-filters-desktop .filter-shade{ visibility:visible; opacity:1; }
  .filters{ padding:0!important; }
}