.tfor-range-grid, .tfor-range-grid *{ box-sizing:border-box; }
.tfor-range-grid{ font-family:'Bricolage Grotesque','Inter',sans-serif; }
.tfor-range-grid .container{ max-width:1360px; margin:0 auto; padding:40px 40px 80px; }

.tfor-range-grid .range-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
}

.tfor-range-grid .range-card{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
}

.tfor-range-grid .range-card-image{
  display:block; width:100%; aspect-ratio:439/505; border-radius:16px; overflow:hidden;
  margin-bottom:20px; background:#FBF4E8;
}
.tfor-range-grid .range-card-image img{
  width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease;
}
.tfor-range-grid .range-card:hover .range-card-image img{ transform:scale(1.04); }

.tfor-range-grid .range-card-heading{
  display:block; font-family:'Playfair Display',Georgia,serif; font-weight:600; font-size:24px;
  line-height:1.3; color:#0F0F0F; margin-bottom:15px;
}
.tfor-range-grid .range-card-desc{
  display:block; font-weight:300; font-size:15px; line-height:24px; color:rgba(15,15,15,.8);
}

@media (max-width:980px){
  .tfor-range-grid .container{ padding:30px 24px 60px; }
  .tfor-range-grid .range-grid{ grid-template-columns:repeat(2, 1fr); gap:16px; }
}
@media (max-width:640px){
  .tfor-range-grid .range-grid{ grid-template-columns:1fr; }
  .tfor-range-grid .range-card-heading{ font-size:20px; }
}

/* =======================================================================
   Filters sidebar — a "Show Filters" toggle that reveals a sidebar next
   to the grid. Interaction is modelled on venusetfleur.com/collections'
   own filter drawer (researched directly, resolution by resolution):
     - Desktop (>980px): the sidebar opens INLINE, in normal document
       flow (position:static) — no dark backdrop at all. It pushes the
       grid over, so the (fixed column-count) grid simply reflows to a
       narrower width and its cards get visibly smaller — confirmed by
       inspecting venusetfleur.com at a genuine 1920px width: no fixed
       overlay, no blur, height grows with the page, same column count.
     - ≤980px (tablet/mobile, matching this plugin's own existing
       breakpoint): a fixed panel slides in from the left with a
       dark + blurred backdrop (matches venusetfleur's tablet state).
     - ≤640px: the same fixed panel simply grows to fill the full width,
       i.e. a full-screen takeover (matches venusetfleur's mobile state).
   Visual styling (colors, type, spacing) is copied from the same
   "Filters" sidebar already live on theflorist.ae/shop/ and on every
   /product-category/… page (class names renamed to this plugin's own
   tfor_/range- prefix — no shared files between plugins). ======================================================================= */

.tfor-range-grid .range-filters-bar{ margin-bottom:28px; display:flex; }
.tfor-range-grid .range-filters-toggle{
  all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:#0F0F0F;
  padding:11px 20px; border:1px solid #0F0F0F; border-radius:999px;
  transition: background-color .2s ease, color .2s ease;
}
.tfor-range-grid .range-filters-toggle:hover{ background:#0F0F0F; color:#FFFEFB; }
.tfor-range-grid .range-filters-toggle svg{ flex-shrink:0; }

.tfor-range-grid .range-layout{
  display:flex; align-items:flex-start; gap:0;
  transition: gap .45s cubic-bezier(.4,0,.2,1);
}
.tfor-range-grid .range-layout.filters-open{ gap:48px; }
.tfor-range-grid .range-main-col{ flex:1; min-width:0; }

.tfor-range-grid .range-filters-backdrop{ display:none; }

.tfor-range-grid .range-filters-sidebar{
  width:0; opacity:0; overflow:hidden; flex:0 0 auto; box-sizing:border-box;
  transition: width .45s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}
.tfor-range-grid .range-layout.filters-open .range-filters-sidebar{ width:280px; opacity:1; }

.tfor-range-grid .range-filters-sidebar__head{ display:none; }
.tfor-range-grid .range-filters-close{ all:unset; cursor:pointer; font-size:26px; line-height:1; color:#0F0F0F; padding:4px; }

.tfor-range-grid .range-filters-heading{ color:#C99E43; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin:0 0 20px; white-space:nowrap; }

.tfor-range-grid .range-filter-group{ padding:20px 0; border-bottom:1px solid #E9E0D2; white-space:nowrap; }
.tfor-range-grid .range-filter-group:first-of-type{ padding-top:0; }
.tfor-range-grid .range-filter-group__toggle{
  all:unset; display:flex; align-items:center; justify-content:space-between; width:100%; cursor:pointer; box-sizing:border-box;
}
.tfor-range-grid .range-filter-group__toggle h4{ margin:0; font-size:14px; font-weight:500; color:#0F0F0F; }
.tfor-range-grid .range-filter-group__chevron{ color:#757575; flex-shrink:0; transform:rotate(180deg); transition:transform .2s ease; }
.tfor-range-grid .range-filter-group.is-collapsed .range-filter-group__chevron{ transform:rotate(0deg); }
.tfor-range-grid .range-filter-group.is-collapsed .range-filter-group__body{ display:none; }
.tfor-range-grid .range-filter-group__body{ margin-top:14px; }

.tfor-range-grid .range-filter-group__list{ display:flex; flex-direction:column; gap:12px; list-style:none; margin:0; padding:0; }

.tfor-range-grid .range-filter-item{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:#0F0F0F; text-decoration:none; transition:color .15s ease; }
.tfor-range-grid .range-filter-item:hover{ color:#C99E43; }
.tfor-range-grid .range-filter-item__icon{ flex-shrink:0; width:17px; height:17px; display:flex; align-items:center; justify-content:center; color:#CCCCCC; transition:color .15s ease; }
.tfor-range-grid .range-filter-item__icon svg{ width:9px; height:9px; }
.tfor-range-grid .range-filter-item:hover .range-filter-item__icon{ color:#C99E43; }

.tfor-range-grid .range-filter-checkbox{ display:flex; align-items:center; gap:10px; cursor:pointer; font-size:13.5px; color:#0F0F0F; }
.tfor-range-grid .range-filter-checkbox input{ position:absolute; opacity:0; width:0; height:0; }
.tfor-range-grid .range-filter-checkbox__box{
  flex-shrink:0; width:17px; height:17px; border:1.4px solid #CCCCCC; border-radius:3px;
  position:relative; transition: background-color .15s ease, border-color .15s ease;
}
.tfor-range-grid .range-filter-checkbox__box::after{
  content:''; position:absolute; left:5px; top:1.5px; width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
  opacity:0; transition: opacity .1s ease;
}
.tfor-range-grid .range-filter-checkbox input:checked ~ .range-filter-checkbox__box{ background:#C99E43; border-color:#C99E43; }
.tfor-range-grid .range-filter-checkbox input:checked ~ .range-filter-checkbox__box::after{ opacity:1; }
.tfor-range-grid .range-filter-checkbox__label{ line-height:1.3; }

@media (max-width:980px){
  /* Body scroll-lock belongs ONLY inside this ≤980px block — this is the
     fixed/overlay panel, so the page behind it should not also scroll.
     On desktop (>980px) the sidebar is inline/in-flow (see the base
     rules above), so the page must stay scrollable there; this was
     previously written outside the media query by mistake and locked
     desktop scrolling too every time the sidebar was opened — the bug
     the admin reported. */
  body.tfor-filters-lock{ overflow:hidden; }

  .tfor-range-grid .range-filters-sidebar{
    position:fixed; top:0; left:0; bottom:0; z-index:1000;
    width:85%; max-width:360px; height:100vh; height:100dvh;
    background:#FFFEFB; padding:32px 28px; box-sizing:border-box;
    overflow-x:hidden; overflow-y:auto;
    opacity:1; /* visibility is handled by transform below, not opacity, at this width */
    transform:translateX(-100%);
    transition: transform .5s cubic-bezier(.4,0,.2,1);
  }
  .tfor-range-grid .range-layout.filters-open .range-filters-sidebar{ transform:translateX(0); }

  .tfor-range-grid .range-filters-sidebar__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }

  .tfor-range-grid .range-filters-backdrop{
    display:block; position:fixed; inset:0; z-index:999;
    background:rgba(0,0,0,.4); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    opacity:0; pointer-events:none; transition:opacity .3s ease;
  }
  .tfor-range-grid .range-layout.filters-open .range-filters-backdrop{ opacity:1; pointer-events:auto; }
}
@media (max-width:640px){
  .tfor-range-grid .range-filters-sidebar{ width:100%; max-width:none; }
}