/* =========================================
   PFA — P-Clips Faceted Archive (FULL CSS)
   Requested updates:
   - Diameter min/max text smaller + sane
   - Results count smaller + font-weight -100
   - Card media background #f7f7f7
   - Add subtle shadow + hover effects (UX upgrade)
   - Figtree font across the whole block
   - Remove filters button visible + modern
   - Sort dropdown gets a clear chevron cue
   - FIX: remove big gap between Min/Max labels and inputs
   ========================================= */

/* ---------- Global font + base ---------- */
.pfa,
.pfa *{
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  box-sizing: border-box;
}

.pfa{
  width:100%;
  max-width:none !important;
  margin:0 !important;
  color:#0d1b2a;
}

.pfa__inner{
  width:100%;
  max-width:none !important;
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 26px;
  align-items:start;
}

@media (max-width: 980px){
  .pfa__inner{
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ---------- Filters column ---------- */
.pfa__filters{
  background: transparent;
  color: #0d1b2a;
}

.pfa-filter{
  border-bottom: 1px solid #e9edf3;
  padding: 10px 0;
}

/* Dynamic hide rules (applied by JS after counts recalc). */
.pfa-filter.is-hidden{ display:none !important; }
.pfa-filter__opt.is-hidden{ display:none !important; }

.pfa-filter__head{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:0;
  background:transparent;
  padding: 10px 0;
  cursor:pointer;
  color:#0d1b2a !important;
}

.pfa-filter__title{
  font-weight:700;
  font-size: 14px;
  line-height: 1.2;
  color:#0d1b2a !important;
}

/* Chevron */
.pfa-filter__chev{
  width:10px;
  height:10px;
  border-right: 2px solid #56657a;
  border-bottom: 2px solid #56657a;
  transform: rotate(45deg);
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
  flex: 0 0 auto;
}

.pfa-filter.is-open .pfa-filter__chev{
  transform: rotate(-135deg);
}

.pfa-filter__body{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transform: translateY(-2px);
  padding: 0;
  pointer-events:none;
  visibility:hidden;
  transition:
    max-height .34s cubic-bezier(.2,.8,.2,1),
    opacity .26s cubic-bezier(.2,.8,.2,1),
    transform .26s cubic-bezier(.2,.8,.2,1),
    padding-top .26s cubic-bezier(.2,.8,.2,1);
}

.pfa-filter.is-open .pfa-filter__body{
  max-height: 720px;
  opacity:1;
  transform: none;
  padding-top: 8px;
  padding-right: 10px;
  pointer-events:auto;
  visibility:visible;
}

@media (prefers-reduced-motion: reduce){
  .pfa-filter__chev,
  .pfa-filter__body{
    transition: none !important;
  }
}

/* List */
.pfa-filter__list{
  list-style:none;
  margin:0;
  padding:0;
}

.pfa-filter__item{
  margin: 7px 0;
}

.pfa-filter__opt{
  display:flex;
  align-items:center;
  gap:10px;
  font-size: 13px;
  cursor:pointer;
  color:#0d1b2a !important;
}

.pfa-filter__opt *{
  color:#0d1b2a !important;
}

/* Checkbox */
.pfa-filter__cb{
  width:16px;
  height:16px;
  accent-color:#0b5bd3;
  cursor:pointer;
  flex: 0 0 auto;
}

.pfa-filter__name{
  flex: 1 1 auto;
  min-width: 0;
  color:#0d1b2a !important;
  font-weight: 600;
}

.pfa-filter__count{
  flex: 0 0 auto;
  color:#56657a !important;
  font-weight: 600;
  opacity: .95;
}

/* ---------- Diameter min/max filter: tame the huge text ---------- */
/* These selectors are intentionally broad because your diameter UI isn't
   from the original CSS. They only apply inside the first filter block. */
.pfa-filter:first-of-type .pfa-filter__body{
  padding-top: 6px;
}

/* FIX: kill big default margins/padding that cause the large gaps */
.pfa-filter:first-of-type .pfa-filter__body,
.pfa-filter:first-of-type .pfa-filter__body *{
  text-shadow:none;
}

.pfa-filter:first-of-type .pfa-filter__body label{
  display:block !important;
  margin: 0 0 6px !important;      /* <= this is the key: tight label-to-input */
  padding: 0 !important;
  line-height: 1.2 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color:#243244 !important;
}

/* If your UI uses headings or paragraphs for "Min/Max", normalise them too */
.pfa-filter:first-of-type .pfa-filter__body h1,
.pfa-filter:first-of-type .pfa-filter__body h2,
.pfa-filter:first-of-type .pfa-filter__body h3,
.pfa-filter:first-of-type .pfa-filter__body p{
  margin: 0 0 6px !important;      /* <= remove that huge vertical gap */
  padding: 0 !important;
  line-height: 1.2 !important;
  color:#243244 !important;
}

.pfa-filter:first-of-type .pfa-filter__body .label,
.pfa-filter:first-of-type .pfa-filter__body .title{
  margin: 0 0 6px !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color:#243244 !important;
}

.pfa-filter:first-of-type .pfa-filter__body input[type="number"],
.pfa-filter:first-of-type .pfa-filter__body input[type="text"]{
  width:100%;
  border: 1px solid #e3e9f2;
  background:#fff;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px !important;
  font-weight: 600;
  outline: none;
  color:#0d1b2a !important;

  margin: 0 0 14px !important;     /* <= keeps Min/Max blocks compact */
}

.pfa-filter:first-of-type .pfa-filter__body input[type="number"]:focus,
.pfa-filter:first-of-type .pfa-filter__body input[type="text"]:focus{
  border-color:#0b5bd3;
  box-shadow: 0 0 0 3px rgba(11, 91, 211, 0.12);
}

/* Range readout line ("Range: 5 to 140 mm") */
.pfa-filter:first-of-type .pfa-filter__body .range,
.pfa-filter:first-of-type .pfa-filter__body .range-text,
.pfa-filter:first-of-type .pfa-filter__body .range_value,
.pfa-filter:first-of-type .pfa-filter__body .rangeValue{
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color:#0d1b2a !important;

  margin-top: 2px !important;
}

/* If your diameter UI uses headings (e.g. "Min", "Max") that became massive */
.pfa-filter:first-of-type .pfa-filter__body h1,
.pfa-filter:first-of-type .pfa-filter__body h2,
.pfa-filter:first-of-type .pfa-filter__body h3{
  font-size: 16px !important;
  font-weight: 800 !important;
}


/* ---------- Results top bar ---------- */
.pfa__topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 16px;
  width:100%;
}


/* ---------- Active Filters bar (mode indicator) ---------- */
.pfa__active{
  width:100%;
  margin: -6px 0 16px;
  border-radius: 16px;
}

.pfa__activeRow{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.pfa__activeTitle{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #3a4a60;
  white-space: nowrap;
  align-self: center;
}

.pfa__activeChips{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 240px;
}

.pfa__chip{
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  outline: none;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap: 8px !important;
  border-radius: 999px;
  border: 1px solid #dbe6f3 !important;
  background: #ffffff !important;
  padding: 7px 10px !important;
  cursor:pointer !important;
  font-size: 12px;
  font-weight: 450;
  color:#13243a !important;
  line-height: 1.1 !important;
  box-shadow: 0 4px 12px rgba(5,22,51,.03);
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  transition: transform .14s ease, border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}

.pfa__chipText{
  display:inline-block;
  white-space: nowrap;
}

.pfa__chip:hover{
  transform: translateY(-1px);
  border-color: #c7d3e2;
  background: #f6f8fb;
  box-shadow: 0 8px 18px rgba(5,22,51,.04);
}


.pfa__chip:focus-visible{
  box-shadow: 0 0 0 3px rgba(19,36,58,0.16), 0 8px 18px rgba(5,22,51,.04);
}

.pfa__chipText{
  line-height: 1.05;
}

.pfa__chipX{
  width: 18px;
  height: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  background: #eef2f6;
  color: #3a4a60 !important;
  font-size: 16px;
  line-height: 1;
  font-weight: 900;
}

.pfa__activeClear{
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  flex: 0 0 auto;
  border: 1px solid #dbe6f3 !important;
  background: rgba(255,255,255,0.82) !important;
  color:#13243a !important;
  padding: 8px 12px !important;
  border-radius: 12px;
  font-weight: 800;
  font-size: 12px;
  cursor:pointer !important;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
  white-space: nowrap;
}

.pfa__activeClear:focus-visible{
  box-shadow: 0 0 0 3px rgba(19,36,58,0.16);
}

.pfa__activeClear:hover{
  background: #ffffff;
  border-color: #c7d3e2;
  transform: translateY(-1px);
}

/* Hint removed (per UX request). */

@media (max-width: 980px){
  .pfa__active{
    padding: 10px 10px;
    border-radius: 12px;
  }
  .pfa__activeChips{
    min-width: 0;
  }
  .pfa__activeTitle{
    padding-top: 2px;
  }
}


/* ---------- Responsive filters: mobile/tablet off-canvas drawer ---------- */
.pfa__filtersBtn{
  display:none; /* desktop default */
  align-items:center;
  gap:10px;
  border:1px solid #e3e9f2;
  background:#f6f8fb;
  padding:10px 12px;
  border-radius:12px;
  font-size: 13px;
  font-weight: 800;
  color:#0d1b2a !important;
  cursor:pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
  white-space: nowrap;
}

.pfa__filtersBtn:hover{
  background:#eef3fb;
  border-color: rgba(11,91,211,0.18);
  transform: translateY(-1px);
}

.pfa__filtersBtnCount{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background:#0b5bd3;
  color:#fff !important;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.pfa__overlay{
  display:none;
}

.pfa__filters-mobileHead{
  display:none;
}

@media (max-width: 980px){
  .pfa__topbar{
    flex-wrap: wrap;
    align-items:flex-start;
    gap: 10px;
  }

  /* Order: count first row, filters+sort second row if needed */
  .pfa__count{ flex: 1 1 100%; }

  .pfa__filtersBtn{
    display:inline-flex;
    flex: 0 0 auto;
  }

  .pfa__sort{
    flex: 1 1 auto;
    min-width: 0;
  }

  .pfa__sort-select{
    min-width: 0;
    width: 100%;
  }

  /* Convert the sidebar into an off-canvas drawer */
  .pfa__filters{
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    min-height: 100vh;
    width: min(92vw, 380px);
    background: #fff;
    border-right: 1px solid #e9edf3;
    box-shadow: 0 10px 40px rgba(13,27,42,0.18);
    z-index: 99999;
    display:flex;
    flex-direction:column;
    min-height: 0; /* allow inner scroller to shrink so footer stays visible */
    overflow: hidden;
    padding: 14px 5px 0 20px;
    max-height: 100dvh;
    transform: translateX(-105%);
    transition: transform .22s ease;
  }

  .pfa.is-filters-open .pfa__filters{
    transform: translateX(0);
  }

  .pfa__filters-mobileHead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    padding: 4px 0 12px;
    border-bottom: 1px solid #e9edf3;
    margin-bottom: 10px;
  }

  .pfa__filters-mobileTitle{
    font-size: 15px;
    font-weight: 900;
    letter-spacing: -0.01em;
  }

    .pfa__filters-mobileClose {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 34px;
        line-height: 1;
        font-weight: 700;
        color: #0d1b2a !important;
    }
  .pfa__filters-mobileClose span{
    color:#0d1b2a !important;
    opacity: 1 !important;
  }



  .pfa__overlay{
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: rgba(13,27,42,0.55);
    display:block;
    opacity: 0;
    pointer-events:none;
    transition: opacity .18s ease;
  }

  .pfa.is-filters-open .pfa__overlay{
    opacity: 1;
    pointer-events:auto;
  }

  /* Make filter headings more tappable */
  .pfa-filter__head{
    padding: 12px 0;
  }

  .pfa-filter__item{
    margin: 10px 0;
  }

  .pfa-filter__opt{
    font-size: 14px;
    gap: 12px;
  }

  .pfa-filter__cb{
    width: 18px;
    height: 18px;
  }

  .pfa__filters-note{
    font-size: 12px;
    font-weight: 700;
    color: rgba(13,27,42,0.65);
    padding: 10px 0 6px;
  }

  .pfa__filters-scroll{
    flex: 1 1 auto;
    overflow: auto;
    min-height: 0; /* required for overflow:auto inside flex column on iOS/Android */
    overflow-x: hidden; /* prevent horizontal scrollbar stealing vertical space */
    -webkit-overflow-scrolling: touch;
    /*
      Mobile drawer scrollbar can overlay content (esp. Android/Chromium).
      Give the scroll area a right inset so chevrons never sit under the bar.
    */
    padding: 0 5px 14px 0;
    scrollbar-gutter: stable;
  }

  /* Also inset each filter head so the chevron is always fully visible. */
  .pfa-filter__head{
    padding-right: 18px;
  }

  /* Small extra safety so the chevron never touches the edge. */
  .pfa-filter__chev{
    margin-right: 2px;
  }

  .pfa__filters-footer{
    flex: 0 0 auto;
    background: #fff;
    border-top: 1px solid #e9edf3;
    padding: 12px 0 calc(14px + env(safe-area-inset-bottom));
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .pfa__filters-view,
  .pfa__filters-footer .pfa__clear{
    height: 44px;
    border-radius: 14px;
    font-weight: 800;
  }

  .pfa__filters-view{
    flex: 1 1 auto;
    border: 1px solid rgba(11,91,211,0.25);
    background: #0b5bd3;
    color:#fff !important;
    cursor:pointer;
  }

  .pfa__filters-view.is-pulse{
    box-shadow: 0 0 0 4px rgba(11,91,211,0.16);
  }

  .pfa__filters-view:active{
    transform: translateY(1px);
  }

  .pfa__filters-footer .pfa__clear{
    flex: 0 0 auto;
    padding: 0 14px;
    margin-top: 0;
  }
}

@media (max-width: 420px){
  .pfa__filters-footer{
    flex-direction: column;
  }
  .pfa__filters-view,
  .pfa__filters-footer .pfa__clear{
    width: 100%;
  }
  .pfa__filters-footer .pfa__clear{
    padding: 0 16px;
  }
}


/* Prevent background scroll when drawer is open */
html.pfa-scrolllock,
body.pfa-scrolllock{
  overflow:hidden !important;
}

/* Results count: smaller + weight -100 */
.pfa__count{
  font-weight:800;              /* was heavier */
  color:#0d1b2a;
  font-size: 26px;              /* was too big */
  line-height: 1.15;
  letter-spacing: -0.01em;
}

@media (max-width: 980px){
  .pfa__count{
    font-size: 20px;
  }
}

/* Sort: add visible dropdown cue */
.pfa__sort{
  display:flex;
  align-items:center;
  gap:10px;
  flex: 0 0 auto;
}

/* Keep label accessible but hidden */
.pfa__sort-label{
  position:absolute;
  left:-9999px;
}

/* Wrap dropdown so we can add chevron */
.pfa__sort{
  position: relative;
}

.pfa__sort::after{
  content:"";
  position:absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #56657a;
  border-bottom: 2px solid #56657a;
  transform: translateY(-60%) rotate(45deg);
  pointer-events:none;
  opacity: .95;
}

.pfa__sort-select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  border:1px solid #e3e9f2;
  background:#f6f8fb;
  padding:10px 40px 10px 12px;   /* room for chevron */
  border-radius:12px;
  font-size: 13px;
  min-width: 240px;
  color:#0d1b2a;
  font-weight: 700;
  cursor: pointer;
}

.pfa__sort-select:focus{
  outline:none;
  border-color:#0b5bd3;
  box-shadow: 0 0 0 3px rgba(11, 91, 211, 0.12);
}

/* ---------- Grid: 2 columns by default, 3 only on absurd screens ---------- */
.pfa__grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  width:100%;
}

/* Massive means MASSIVE. If this still triggers, your screen is basically a wall. */
@media (min-width: 3200px){
  .pfa__grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px){
  .pfa__grid{
    grid-template-columns: 1fr;
  }
}

/* ---------- Card styling + UX hover ---------- */
.pfa-card{
  position: relative;
  display:grid;
  grid-template-columns: 44% 56%;
  border:1px solid #e9edf3;
  border-radius: 14px;
  overflow:hidden;
  background:#fff;

  /* UX: subtle elevation */
  box-shadow: 0 2px 10px rgba(13,27,42,0.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Stock / backorder badge (top-right of card) */
.pfa-card__stock{
  position:absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1;
}

.pfa-card__stock--in{
  background: #e8f7ee;
  border-color: #bfe7cf;
  color: #0f5132;
}

.pfa-card__stock--bo{
  background: #fff4e5;
  border-color: #ffe0b2;
  color: #7a4b00;
}

.pfa-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(13,27,42,0.10);
  border-color: rgba(11,91,211,0.18);
}

/* Media background + image hover cue */
.pfa-card__media{
  background:#f7f7f7; /* requested */
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 16px;
  transition: background-color .18s ease;
}

.pfa-card:hover .pfa-card__media{
  background:#f0f4fb;
}

.pfa-card__media img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  transition: transform .18s ease;
  transform: translateZ(0);
}

.pfa-card:hover .pfa-card__media img{
  transform: scale(1.02);
}

.pfa-card__body{
  padding: 16px 16px 14px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.pfa-card__sku{
  font-size: 11px;
  font-weight:800;
  color:#56657a;
  letter-spacing: .02em;
  padding-bottom: 2px;
}

.pfa-card__title{
  margin: 2px 0 0!important;
  font-size: 1.2rem!important;
  line-height: 1.2!important;
  font-weight: 850!important;
}

.pfa-card__title a{
  color:#0d1b2a !important;
  text-decoration:none;
}

.pfa-card__title a:hover{
  color:#0b5bd3 !important;
}

/*
  Price line: keep "£xx.xx" and "per pack of X" visually level.
  Inline baseline alignment makes the smaller suffix sit lower.
  Use flex + top alignment instead.
*/
.pfa-card__price{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:6px;
  font-weight:700;
  color:#051633C4;
  font-size:0.95rem;
  line-height: 1.2;
  padding-top:5px;
}

/* Ensure price + suffix items share a predictable baseline */
.pfa-card__price .woocommerce-Price-amount,
.pfa-card__perpack,
.pfa-card__vat{
  line-height: 1.2;
}

.pfa-card__price .woocommerce-Price-amount{
  display:inline-flex;
  align-items:baseline;
}


/* Price suffix: "per pack of X" */
.pfa-card__perpack{
  font-weight: 700;
  color: #051633A8;
  font-size: 0.95em;
  margin-left: 0; /* handled by flex gap */
  white-space: nowrap;
}

/* VAT label next to the price */
.pfa-card__vat{
  font-weight: 700;
  color: #051633A8;
  font-size: 0.85em;
  white-space: nowrap;
}

/* Materials chips under price */
.pfa-card__chips{
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.pfa-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  background:#e6f0ff;
  color:#0d1b2a;
}

/* Specs grid (2x2) */
.pfa-card__specs{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.pfa-spec{
  background:#f6f8fb;
  border-radius: 12px;
  padding: 8px 12px;
    
}

.pfa-spec--highlight{
  background:#eaf2ff;
  border-color: rgba(11, 91, 211, 0.12);
}

.pfa-spec__label{
  font-size: 12px;
  font-weight:800;
  color:#4a5a6b !important;
}

.pfa-spec__value{
  font-size: 14px;
  font-weight:800!important;
  color:#0d1b2a !important;
}

/* CTA */
.pfa-card__cta{
  margin-top: 0px;
  display:flex;
  gap: 10px;
}

.pfa-card__view,
.pfa-card__btn{
  flex: 1 1 0;
  width: auto !important;
  min-width: 0;
}

.pfa-card__view{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius: 4px;
  padding: 12px 12px;
  font-weight: 800;
  font-size: 14px;
  background:#f6f8fb;
  color:#0d1b2a !important;
  text-decoration:none;
  border: 1px solid #e3e9f2;
  transition: background-color .14s ease, border-color .14s ease, transform .14s ease;
}

.pfa-card__view:hover{
  background:#eef2f7;
  border-color: rgba(11,91,211,0.18);
  transform: translateY(-1px);
}

.pfa-card__btn{
  display:block;
  width:100%;
  text-align:center;
  border-radius: 4px;
  padding: 12px 12px;
  font-weight:700;
  font-size: 14px;
  background:#0b5bd3!important;
  color:#fff !important;
  text-decoration:none;
  transition: filter .15s ease, transform .15s ease;
}

.pfa-card__btn:hover{
  filter: brightness(0.96);
  transform: translateY(-1px);
}

/* ------------------------------------------------------------
   Add-to-basket feedback (archive): text + “Added” state
   ------------------------------------------------------------ */

.pfa-card__btn{
  position: relative; /* anchor for state */
  overflow: hidden;   /* prevents clipping artefacts */
}

/* Keep hover lift disabled during loading/added to avoid janky movement */
.pfa-card__btn.pfa-is-adding,
.pfa-card__btn.pfa-is-added,
.pfa-card__btn.loading{
  transform: none !important;
  filter: none !important;
}

.pfa-card__btn.pfa-is-adding,
.pfa-card__btn.loading{
  pointer-events: none;
  opacity: 0.92;
}

.pfa-card__btn.pfa-is-added{
  background: #0a4fb8; /* slightly deeper for confirmation */
}

@media (prefers-reduced-motion: reduce){
  }

/* Empty state */
.pfa__empty{
  padding: 18px;
  background:#f6f8fb;
  border:1px solid #e9edf3;
  border-radius: 14px;
  color:#0d1b2a;
  font-weight: 700;
  font-size:1rem;
}

/* ---------- Remove filters button: visible + modern ---------- */
.pfa__clear{
  margin-top:14px;
  width: 100%;
  border:1px solid #e3e9f2;
  background:#f6f8fb;
  padding:12px 14px;
  border-radius:12px;
  cursor:pointer;
  font-size: 13px;
  font-weight: 800;
  color:#0d1b2a !important;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.pfa__clear:hover{
  background:#eef3fb;
  border-color: rgba(11,91,211,0.18);
  transform: translateY(-1px);
}

.pfa__clear:disabled,
.pfa__clear[disabled]{
  opacity: .5;
  cursor: not-allowed;
}

/* ---------- Pagination ---------- */
.pfa__pagination{
  margin-top: 18px;
}

.pfa-pager{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

.pfa-pager__a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 9px 11px;
  border:1px solid #e9edf3;
  background:#fff;
  border-radius: 12px;
  color:#0d1b2a;
  text-decoration:none;
  font-weight:600;
  font-size: 13px;
  min-width: 42px;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.pfa-pager__a:hover{
  background:#f6f8fb;
  border-color: rgba(11,91,211,0.18);
  transform: translateY(-1px);
}

.pfa-pager__a.is-current{
  background:#0b5bd3;
  border-color:#0b5bd3;
  color:#fff !important;
}

.pfa-pager__a.is-disabled{
  opacity:.4;
  pointer-events:none;
}

/* ---------- Loading state ---------- */
.pfa.is-loading .pfa__results{
  opacity: .6;
  pointer-events:none;
}

/* ---------- Defensive overrides (theme-proofing) ---------- */
.pfa a{
  color: inherit;
}

.pfa,
.pfa *{
  text-decoration-color: currentColor;
}


/* =========================================
   FIX: Remove the big gap between Min/Max label and input
   Uses your actual markup: .pfa-range__row / __lab / __inp
   ========================================= */

/* Make each Min/Max row a tight stack with controlled spacing */
.pfa .pfa-range__row{
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;                 /* <- controls label-to-input gap */
  margin: 0 0 14px 0;       /* <- controls space between Min and Max blocks */
  padding: 0 !important;
}

/* Kill any sneaky margins on label */
.pfa .pfa-range__lab{
  display:block;
  margin: 0 !important;     /* <- key: no extra space below label */
  padding: 0 !important;
  line-height: 1.2 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color:#243244 !important;
}

/* Ensure input isn't adding top margin etc. */
.pfa .pfa-range__inp{
  margin: 0 !important;     /* <- key: remove default spacing */
  width: 100%;
}



/* Optional: if the whole range block has padding/margin you don't want */
.pfa .pfa-range{
  margin: 0 !important;
  padding: 0 !important;
}



/* =========================================
   Diameter range: Min + Max side-by-side
   ========================================= */

/* Two-column layout for Min / Max */
.pfa .pfa-range{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;
  row-gap: 8px;
  margin: 0;
  padding: 0;
}

/* Each row is now a vertical stack */
.pfa .pfa-range__row{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
}

/* Labels: compact and aligned */
.pfa .pfa-range__lab{
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: #243244;
}

/* Inputs: no rogue spacing */
.pfa .pfa-range__inp{
  margin: 0;
  width: 100%;
}


/* Pack Qty value colour override */
.pfa-spec--highlight .pfa-spec__value{
  color: #0B57D0 !important;
}



/* =========================================
   PFA OVERRIDES (bottom of file)
   Match product card styles from screenshots + pack qty value colour
   ========================================= */

/* Product card = 2px border, 10px radius, specific shadow */
.pfa .pfa-card{
  border: 2px solid #EBEBEB !important;
  border-radius: 10px !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 6px 16px rgba(0, 0, 0, 0.06) !important;
  overflow: hidden; /* keep clean edges */
}

/* Optional: keep hover subtle so it still feels premium */
.pfa .pfa-card:hover{
  transform: translateY(-1px) !important;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.05),
    0 10px 22px rgba(0, 0, 0, 0.08) !important;
}

/* Pack Qty value colour */
.pfa .pfa-spec--highlight .pfa-spec__value{
  color: #0B57D0 !important;
}


/* =========================================
   FIX: stop card jumping on hover
   ========================================= */

.pfa .pfa-card,
.pfa .pfa-card:hover{
  transform: none !important;
}


.pfa .pfa-filter__item.is-zero{
  opacity: .45;
}

.pfa .pfa-filter__item.is-zero .pfa-filter__opt{
  cursor: not-allowed;
}

.pfa .pfa-filter__cb:disabled{
  cursor: not-allowed;
}


/* =========================================================
   PFA — Shop (/shop) CTA button colour fix
   Theme sets `.woocommerce a.button { background: ... !important; }`
   so we must out-specific and also use !important, but keep scoped
   strictly to PFA grids only.
   ========================================================= */
.woocommerce .pfa__grid a.button.pfa-card__btn,
.woocommerce .pfa__grid a.button.pfa_card_btn,
.woocommerce .pfa_grid a.button.pfa-card__btn,
.woocommerce .pfa_grid a.button.pfa_card_btn{
  background: #0b5bd3 !important;
  border-color: #0b5bd3 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.woocommerce .pfa__grid a.button.pfa-card__btn:hover,
.woocommerce .pfa__grid a.button.pfa_card_btn:hover,
.woocommerce .pfa_grid a.button.pfa-card__btn:hover,
.woocommerce .pfa_grid a.button.pfa_card_btn:hover{
  filter: brightness(0.96);
  transform: translateY(-1px);
}
/* ============================================================
   PFA CTA BUTTON: DISABLE GLOBAL "LIFT" HOVER TRANSFORM
   Some theme/global CSS applies transform: translateY(-1px) on
   WooCommerce buttons. For PFA card CTAs we keep hover clean.
   Scoped to PFA grids only.
   ============================================================ */
.woocommerce .pfa_grid a.button.pfa_card_btn,
.woocommerce .pfa_grid a.button.pfa-card__btn,
.woocommerce .pfa__grid a.button.pfa_card_btn,
.woocommerce .pfa__grid a.button.pfa-card__btn{
  transform: none !important;
}

.woocommerce .pfa_grid a.button.pfa_card_btn:hover,
.woocommerce .pfa_grid a.button.pfa_card_btn:focus,
.woocommerce .pfa_grid a.button.pfa_card_btn:active,
.woocommerce .pfa_grid a.button.pfa-card__btn:hover,
.woocommerce .pfa_grid a.button.pfa-card__btn:focus,
.woocommerce .pfa_grid a.button.pfa-card__btn:active,
.woocommerce .pfa__grid a.button.pfa_card_btn:hover,
.woocommerce .pfa__grid a.button.pfa_card_btn:focus,
.woocommerce .pfa__grid a.button.pfa_card_btn:active,
.woocommerce .pfa__grid a.button.pfa-card__btn:hover,
.woocommerce .pfa__grid a.button.pfa-card__btn:focus,
.woocommerce .pfa__grid a.button.pfa-card__btn:active{
  transform: none !important;
}



/* ============================================================
   PFA CTA BUTTON (AUTHORITATIVE STYLES)
   Goal: Prevent global/theme/Elementor/WooCommerce button rules
   (often using !important) from leaking into PFA CTAs.
   We scope tightly to the PFA grid and set all key properties
   with higher specificity + !important, while keeping tokens
   editable via CSS variables.
   ============================================================ */

.woocommerce .pfa_grid,
.woocommerce .pfa__grid{
  /* Edit these tokens to change CTA UX consistently */
  --pfa-cta-bg: #0b5bd3;
  --pfa-cta-bg-hover: #1850A8;
  --pfa-cta-text: #ffffff;
  --pfa-cta-radius: 4px;
  --pfa-cta-pad-y: 12px;
  --pfa-cta-pad-x: 12px;
  --pfa-cta-font-size: 14px;
  --pfa-cta-font-weight: 700;
  /* Use a neutral line-height and centre content via flex to avoid optical misalignment */
  --pfa-cta-line-height: 1;
}

/* High-specificity target: only the PFA card add-to-cart anchor */
.woocommerce .pfa_grid .pfa-card__cta > a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart.pfa_card_btn,
.woocommerce .pfa_grid .pfa-card__cta > a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart.pfa-card__btn,
.woocommerce .pfa__grid .pfa-card__cta > a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart.pfa_card_btn,
.woocommerce .pfa__grid .pfa-card__cta > a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart.pfa-card__btn{
  /* Layout */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
  white-space: nowrap !important;

  /* Spacing */
  padding: var(--pfa-cta-pad-y) var(--pfa-cta-pad-x) !important;
  margin: 0 !important;

  /* Typography */
  font-size: var(--pfa-cta-font-size) !important;
  font-weight: var(--pfa-cta-font-weight) !important;
  line-height: var(--pfa-cta-line-height) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;

  /* Visual */
  background-color: var(--pfa-cta-bg) !important;
  border-radius: var(--pfa-cta-radius) !important;
  color: var(--pfa-cta-text) !important;
  text-decoration: none !important;

  /* Interaction */
  cursor: pointer !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
  transition: background-color .2s ease, filter .15s ease, box-shadow .15s ease !important;

  /* Neutralise odd global button rules */
  align-content: normal !important;
}

/* Prevent inner span from shifting baseline (seen on some themes) */
.woocommerce .pfa_grid .pfa-card__cta > a.pfa-card__btn .pfa-card__btnText,
.woocommerce .pfa__grid .pfa-card__cta > a.pfa-card__btn .pfa-card__btnText{
  display: block;
  line-height: 1;
}

/* Hover/focus/active: keep it clean and predictable */
.woocommerce .pfa_grid .pfa-card__cta > a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart.pfa_card_btn:hover,
.woocommerce .pfa_grid .pfa-card__cta > a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart.pfa_card_btn:focus,
.woocommerce .pfa_grid .pfa-card__cta > a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart.pfa_card_btn:active,
.woocommerce .pfa_grid .pfa-card__cta > a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart.pfa-card__btn:hover,
.woocommerce .pfa_grid .pfa-card__cta > a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart.pfa-card__btn:focus,
.woocommerce .pfa_grid .pfa-card__cta > a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart.pfa-card__btn:active,
.woocommerce .pfa__grid .pfa-card__cta > a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart.pfa_card_btn:hover,
.woocommerce .pfa__grid .pfa-card__cta > a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart.pfa_card_btn:focus,
.woocommerce .pfa__grid .pfa-card__cta > a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart.pfa_card_btn:active,
.woocommerce .pfa__grid .pfa-card__cta > a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart.pfa-card__btn:hover,
.woocommerce .pfa__grid .pfa-card__cta > a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart.pfa-card__btn:focus,
.woocommerce .pfa__grid .pfa-card__cta > a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart.pfa-card__btn:active{
  background-color: var(--pfa-cta-bg-hover) !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
  outline: none !important;
}





/* =========================================
   PFA CTA: keep spinner but centre label
   ========================================= */

.woocommerce .pfa_grid .pfa-card__cta a.pfa-card__btn.pfa-card__btn--cart,
.woocommerce .pfa_grid .pfa-card__cta a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart.pfa-card__btn {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  /* Ensure label is centred even when spinner is visible */
  padding-left: calc(var(--pfa-cta-pad-x) + 18px) !important;
  padding-right: calc(var(--pfa-cta-pad-x) + 18px) !important;
}

/* Label sits dead centre */
.woocommerce .pfa_grid .pfa-card__cta a.pfa-card__btn .pfa-card__btnText {
  display: inline-block;
  line-height: 1;
  margin: 0 !important;
}

/* Spinner: keep it, but remove from layout so it doesn't push text */
.woocommerce .pfa_grid .pfa-card__cta a.pfa-card__btn::after,
.woocommerce .pfa_grid .pfa-card__cta a.pfa-card__btn::before {
  position: absolute !important;
  top: 50% !important;
  right: var(--pfa-cta-pad-x) !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  pointer-events: none !important;
}

/* If your theme uses left-side spinner/icon instead, swap to left */
.woocommerce .pfa_grid .pfa-card__cta a.pfa-card__btn.pfa-spinner-left::after,
.woocommerce .pfa_grid .pfa-card__cta a.pfa-card__btn.pfa-spinner-left::before {
  left: var(--pfa-cta-pad-x) !important;
  right: auto !important;
}



/* Mobile: hide "View" button */
@media (max-width: 768px){
  .pfa-card__view{ display:none !important; }
}