.tfoe-category-grid, .tfoe-category-grid *{ box-sizing:border-box; }
.tfoe-category-grid{ font-family:'Bricolage Grotesque','Inter',sans-serif; }
.tfoe-category-grid a{ color:inherit; text-decoration:none; }
.tfoe-category-grid .container{ max-width:1360px; margin:0 auto; padding:0 40px; }
.tfoe-category-grid .cat-section{ padding:60px 0; }

.tfoe-category-grid .section-head{ margin-bottom:36px; }
.tfoe-category-grid .section-head h2{
  font-family:'Playfair Display',Georgia,serif; font-weight:600; font-size:40px;
  letter-spacing:1px; margin:0; color:#0F0F0F; display:flex; align-items:baseline; gap:10px;
}
.tfoe-category-grid .section-head em{
  font-style:italic; color:#C99E43; display:inline-block; overflow:hidden;
  height:1.2em; line-height:1.2; vertical-align:bottom;
}
.tfoe-category-grid .word-track{ display:flex; flex-direction:column; }
.tfoe-category-grid .word-track .word{ line-height:1.2; }
.tfoe-category-grid em.animate .word-track{ animation: tfoe-word-cycle 5s ease-in-out infinite; }
@keyframes tfoe-word-cycle{
  0%, 42%   { transform: translateY(0); }
  50%, 92%  { transform: translateY(-1.2em); }
  100%      { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .tfoe-category-grid .word-track{ animation: none !important; }
}

.tfoe-category-grid .cat-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:40px;
}
.tfoe-category-grid .cat-card{
  position:relative; display:block; aspect-ratio: 427 / 505; border-radius:10px;
  overflow:hidden; background:#f5f4f2;
}
.tfoe-category-grid .cat-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: transform .5s ease;
}
.tfoe-category-grid .cat-card:hover img{ transform: scale(1.06); }
.tfoe-category-grid .cat-scrim{
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.1) 0%, rgba(0,0,0,.8) 100%);
}
.tfoe-category-grid .cat-foot{
  position:absolute; left:30px; right:30px; bottom:28px; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.tfoe-category-grid .cat-label{
  font-size:18px; font-weight:500; letter-spacing:1px; color:#FFFEFB;
  display:flex; align-items:center; gap:10px;
}
.tfoe-category-grid .cat-label .arrow{ font-style:normal; display:inline-block; transition: transform .25s ease; }
.tfoe-category-grid .cat-card:hover .cat-label .arrow{ transform: translateX(4px); }
.tfoe-category-grid .cat-count{ font-size:16px; font-weight:300; letter-spacing:1px; color:#FFFEFB; white-space:nowrap; }

@media (max-width:1100px){
  .tfoe-category-grid .cat-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:980px){
  .tfoe-category-grid .container{ padding:0 24px; }
}
@media (max-width:640px){
  .tfoe-category-grid .cat-grid{ grid-template-columns: 1fr; gap:20px; }
  .tfoe-category-grid .section-head h2{ font-size:28px; }
  .tfoe-category-grid .cat-foot{ left:20px; right:20px; bottom:18px; }
  .tfoe-category-grid .cat-label{ font-size:15px; }
  .tfoe-category-grid .cat-count{ font-size:13px; }
}

/* =======================================================================
   Filters sidebar — identical feature/interaction to the one built for
   "Our Range — Elementor Widgets" (own copy, no shared files, per the
   "no cross-plugin dependency" preference): a "Show Filters" toggle that
   reveals a sidebar next to the grid.
     - Desktop (>1100px, this widget's own grid breakpoint): the sidebar
       opens INLINE, in normal document flow — no dark backdrop. It
       pushes the grid over, so the (fixed column-count) grid reflows to
       a narrower width and its cards get visibly smaller — matches
       venusetfleur.com/collections' own desktop filter behaviour,
       confirmed by direct inspection at a genuine 1920px width.
     - ≤1100px (tablet/mobile): a fixed panel slides in from the left
       with a dark + blurred backdrop (matches venusetfleur's tablet
       state).
     - ≤640px: the same fixed panel grows to fill the full width, i.e. a
       full-screen takeover (matches venusetfleur's mobile state).
   Visual styling (colors, type, spacing) matches the same "Filters"
   sidebar already live on theflorist.ae/shop/ and on every
   /product-category/… page. ======================================================================= */

.tfoe-category-grid .cat-filters-bar{ margin:-8px 0 28px; display:flex; }
.tfoe-category-grid .cat-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;
}
.tfoe-category-grid .cat-filters-toggle:hover{ background:#0F0F0F; color:#FFFEFB; }
.tfoe-category-grid .cat-filters-toggle svg{ flex-shrink:0; }

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

.tfoe-category-grid .cat-filters-backdrop{ display:none; }

.tfoe-category-grid .cat-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;
}
.tfoe-category-grid .cat-layout.filters-open .cat-filters-sidebar{ width:280px; opacity:1; }

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

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

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

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

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

.tfoe-category-grid .cat-filter-checkbox{ display:flex; align-items:center; gap:10px; cursor:pointer; font-size:13.5px; color:#0F0F0F; }
.tfoe-category-grid .cat-filter-checkbox input{ position:absolute; opacity:0; width:0; height:0; }
.tfoe-category-grid .cat-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;
}
.tfoe-category-grid .cat-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;
}
.tfoe-category-grid .cat-filter-checkbox input:checked ~ .cat-filter-checkbox__box{ background:#C99E43; border-color:#C99E43; }
.tfoe-category-grid .cat-filter-checkbox input:checked ~ .cat-filter-checkbox__box::after{ opacity:1; }
.tfoe-category-grid .cat-filter-checkbox__label{ line-height:1.3; }

@media (max-width:1100px){
  /* Body scroll-lock belongs ONLY inside this ≤1100px block — this is
     the fixed/overlay panel, so the page behind it should not also
     scroll. On desktop (>1100px) 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.tfoe-filters-lock{ overflow:hidden; }

  .tfoe-category-grid .cat-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);
  }
  .tfoe-category-grid .cat-layout.filters-open .cat-filters-sidebar{ transform:translateX(0); }

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

  .tfoe-category-grid .cat-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;
  }
  .tfoe-category-grid .cat-layout.filters-open .cat-filters-backdrop{ opacity:1; pointer-events:auto; }
}
@media (max-width:640px){
  .tfoe-category-grid .cat-filters-sidebar{ width:100%; max-width:none; }
}