/* ---------------------------------------------------------------
   Greg Natale — collection filter as an off-canvas "REFINE" fly-out
   Added Aug 2026. Pairs with /js/filter-drawer.js
   Only repositions existing markup — no .wpf* node is moved or
   rebuilt, so WBW/WPF AJAX filtering keeps working.
   --------------------------------------------------------------- */

/* ---- REFINE trigger (injected by filter-drawer.js) ---------------
   Boxed, ranged right, modelled on the Amiri "REFINE" control.
   ----------------------------------------------------------------- */
.collection-right .sort-by-right.gn-has-refine {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;   /* REFINE left, SORT BY right */
  justify-content: space-between;

  z-index: 100;
  background: #fff;
  padding-top: 14px;
  padding-bottom: 14px;
  /* matches the theme's existing padding-right:10px on .sort-by-right */
  padding-left: 10px;
  /* clears the category title + tagline, which the theme lets the
     products row overlap by ~10px */
  margin-top: 24px;
  margin-bottom: -10px;
}

/* ---- Floating toolbar on scroll ---------------------------------
   position:sticky can't be used: the theme's .wrapper-container has
   overflow:hidden (needed by the mlpushmenu), which disables sticky for
   every descendant. filter-drawer.js pins the bar manually instead and
   drops a placeholder in its place so the grid doesn't jump.
   ----------------------------------------------------------------- */
.gn-bar-placeholder {
  display: none;
  width: 100%;
  margin: 0;
  padding: 0;
  -webkit-flex: 0 0 100%;
  flex: 0 0 100%;
}

.collection-right .sort-by-right.gn-bar-float {
  position: fixed;
  top: 0;
  margin-top: 0;
  margin-bottom: 0;
  z-index: 9000;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.07);
}
/* full-bleed white behind the pinned bar, so the header doesn't show
   through the page gutters as it scrolls underneath */
.collection-right .sort-by-right.gn-bar-float:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50vw;
  right: -50vw;
  background: #fff;
  z-index: -1;
}
/* The floating bar pins BELOW the sticky site header, not at the viewport
   top. It used to pin at 0 (32/46px with the admin bar) with an opaque
   white backdrop — and since it out-paints the header (see below) it
   covered it completely once both were pinned, which read as "the header
   disappears on scroll" on category pages.

   --gn-header-h is the header's bottom edge in viewport coordinates,
   republished on every scroll by header-hamburger.js. It already includes
   the admin bar, so the two admin-bar offsets this replaces are no longer
   needed. Fallback 0 covers a page where that JS hasn't run.

   Why the bar out-painted a header with z-index 99999999: that value is on
   `.header`, which is INSIDE `#header-content` (position:relative,
   z-index:999). The huge number only orders things within that stacking
   context; against the bar's 9000 the header competes as 999 and loses.
   Matching Amiri, which also pins its toolbar under the header
   (`toolbar { position: sticky; top: 66px }`). */

.collection-right .sort-by-right.gn-bar-float {
  top: var(--gn-header-h, 0px);
}
/* the drawer sits above the floating bar */
body.gn-filter-open .collection-right .sort-by-right.gn-bar-float { z-index: 9000; }
.collection-right .sort-by-right.gn-has-refine > .right-align {
  -webkit-align-self: center;
  align-self: center;
  margin-left: 0;
  margin-right: 0;
}
/* app-new.css pins this UL to 155px, which leaves dead space between
   REFINE and SORT BY now they sit side by side. Tighten it — but keep a
   definite width: app-new.css sets .woocommerce-ordering .select2-container
   to width:100% !important, so an auto-width parent collapses select2 to
   zero when it is re-initialised after a WPF AJAX pass. */
.collection-right .sort-by-right.gn-has-refine > .right-align ul {
  width: 100px;
}
/* Pin the sort control's width outright. app-new.css sets
   .woocommerce-ordering .select2-container { width:100% !important }, so the
   rendered width depends on whatever the parent measured at the instant
   select2 initialised — which after a WPF AJAX pass is zero. */
/* The WPF plugin ships `.woocommerce-ordering { display:none }` in
   frontend.woofilters.css — it hides Woo's native sort form in favour of its
   own. On this theme that rule only bites after an AJAX pass, which is why
   SORT BY vanished until you reloaded. Override it outright. */
.collection-right .sort-by-right .woocommerce-ordering {
  display: block !important;
  width: 100px;
}
.collection-right .sort-by-right.gn-has-refine .select2-container {
  width: 100px !important;
}

.gn-refine-toggle {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  height: 35px;
  padding: 0 16px;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 0;
  cursor: pointer;
  color: #000;
  font-family: "Semplicita Pro SemiBold", Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .08rem;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  -webkit-transition: background .2s ease, color .2s ease, border-color .2s ease;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.gn-refine-toggle:hover,
.gn-refine-toggle:focus,
body.gn-filter-open .gn-refine-toggle {
  background: #000;
  border-color: #000;
  color: #fff;
  outline: none;
}

.gn-refine-icon {
  width: 15px;
  height: 15px;
  margin-right: 8px;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
}
/* keep the icon's knob fills readable when the box inverts */
.gn-refine-toggle:hover .gn-refine-icon circle,
.gn-refine-toggle:focus .gn-refine-icon circle,
body.gn-filter-open .gn-refine-icon circle { fill: #000; }

.gn-refine-count:not(:empty):before { content: "\00a0("; }
.gn-refine-count:not(:empty):after  { content: ")"; }

@media screen and (max-width: 767px) {
  .gn-refine-toggle { height: 32px; padding: 0 12px; font-size: 10px; }
  .collection-right .sort-by-right.gn-has-refine { padding-top: 10px; padding-bottom: 10px; padding-left: 10px; margin-top: 16px; }
}

/* ---- The panel ---- */
.col-main .container > .collection-left {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: auto;
  width: 380px;
  max-width: 90vw;
  z-index: 10050;
  background: #fff;
  padding: 72px 34px 48px;
  margin: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translateX(-103%);
  transform: translateX(-103%);
  -webkit-transition: -webkit-transform .38s cubic-bezier(.22,.61,.36,1);
  transition: transform .38s cubic-bezier(.22,.61,.36,1);
  box-shadow: 2px 0 24px rgba(0,0,0,.10);
}
body.gn-filter-open .col-main .container > .collection-left {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

/* Guard: main.js slideToggle can leave inline display:none on .filter */
body.gn-filter-open .col-main .container > .collection-left .filter {
  display: block !important;
}

/* Grid takes the full width now the sidebar is off-canvas.
   padding is forced symmetrical — the theme sets padding-right:0 on
   this column, which would otherwise throw the centred title and the
   whole grid 8px to the right. */
.col-main .container > .collection-right {
  width: 100%;
  -webkit-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

/* --Slider -- */
/* Price slider — selected range is black, not jQuery UI's #e8eded.

   `jquery-ui.theme.min.css` sets `.ui-widget-header { background: #e8eded
   !important }`. A plain `.ui-widget-header { background:#000 !important }`
   here ties it on specificity (0,1,0) AND on !important, so load order
   decides — and jquery-ui.theme loads last, so it won. Scoping through
   .wpfFilterWrapper takes this to 0,3,0 and settles it. */

.wpfFilterWrapper .ui-slider .ui-slider-range,
.wpfFilterWrapper .ui-slider-horizontal .ui-slider-range,
.wpfFilterWrapper .ui-widget-header {
    background: #000 !important;
}


/* ---- Dim overlay ---- */
.gn-filter-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,.28);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .38s ease, visibility 0s linear .38s;
  transition: opacity .38s ease, visibility 0s linear .38s;
  z-index: 10040;
}
body.gn-filter-open .gn-filter-overlay {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity .38s ease, visibility 0s;
  transition: opacity .38s ease, visibility 0s;
}

/* ---- Close button ---- */
.gn-filter-close {
  position: absolute;
  top: 24px;
  right: 28px;
  background: none;
  border: 0;
  padding: 0;
  font-size: 26px;
  line-height: 1;
  color: #000;
  cursor: pointer;
  z-index: 2;
}
.gn-filter-close:hover { opacity: .55; }

/* ---- Mobile: same drawer, old inline accordion trigger retired ---- */
@media screen and (max-width: 767px) {
  .col-main .container > .collection-left,
  .col-main.new .col-md-3.collection-left {
    width: 86vw;
    padding: 66px 24px 48px;
  }
  .toggle-filter { display: none !important; }
}

/* Stop background scroll while open */
body.gn-filter-open { overflow: hidden; }

/* ---- Re-centre the category title -------------------------------
   app-new.css offsets .col-md-12.text-center with padding-right
   (16% / 26% / etc across breakpoints) purely to compensate for the
   old left sidebar. With the sidebar off-canvas the column is already
   full width, so that offset now pushes the title left. Neutralise it
   for the collection header only.
   ----------------------------------------------------------------- */
.collection-right .collection-head .col.col-md-12.col-sm-12.text-center {
  padding-right: 15px;
  padding-left: 15px;
}

/* Filter option labels sit at the section heading's size.

   Headings (MATERIALS, COLOUR …) are 11px / 0.8px tracking; the options
   under them were 13px / 0.38px, which read as the larger of the two. Same
   size and tracking now, with the lighter face keeping the heading dominant.

   Scoped through .wpfFilterWrapper for the same reason as the price bar:
   the plugin's own frontend.woofilters.css is loaded after this file. */

.wpfFilterWrapper .wpfFilterContent .wpfLiLabel,
.wpfFilterWrapper .wpfFilterContent li[data-term-id],
.wpfFilterWrapper .wpfFilterContent li[data-term-id] label,
.wpfFilterWrapper .wpfFilterContent li[data-term-id] span {
    font-size: 11px;
    letter-spacing: 0.8px;
}