/* DIRANI GROUP V4.5.2
   Product filter panel + single active navigation underline
*/
:root{
  --v452-green:#1ab81f;
  --v452-green-dark:#0b7d10;
  --v452-ink:#102019;
  --v452-muted:#68766e;
  --v452-line:#e2e8e4;
  --v452-soft:#f7faf8;
}

/* ==========================================================
   HEADER — remove duplicated underline rules from older CSS
   ========================================================== */
.site-header .nav > a::before,
.site-header .nav > a::after,
.site-header .nav-products > a::before,
.site-header .nav-products > a::after{
  content:none!important;
  display:none!important;
}

/* one centered indicator only */
.site-header .nav > a.active,
.site-header .nav-products > a.active{
  position:relative!important;
}

.site-header .nav > a.active::after,
.site-header .nav-products > a.active::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  bottom:12px!important;
  width:26px!important;
  height:2px!important;
  border-radius:99px!important;
  background:var(--v452-green)!important;
  transform:translateX(-50%)!important;
  opacity:1!important;
}

/* slightly tighter top navigation */
.site-header .nav{
  gap:24px!important;
}
.site-header .nav > a,
.site-header .nav-products > a{
  padding-inline:0!important;
}

/* ==========================================================
   PRODUCTS PAGE — layout
   ========================================================== */
.db-product-shell,
.product-shell.db-product-shell{
  width:min(1380px,calc(100% - 64px))!important;
  margin:0 auto!important;
  padding:58px 0 76px!important;
  display:grid!important;
  grid-template-columns:285px minmax(0,1fr)!important;
  gap:38px!important;
  align-items:start!important;
}

/* left filter card */
.db-product-shell > .filter,
.product-shell .filter{
  width:100%!important;
  min-width:0!important;
  background:#fff!important;
  border:1px solid var(--v452-line)!important;
  border-radius:20px!important;
  box-shadow:0 12px 34px rgba(16,32,25,.06)!important;
  overflow:visible!important;
}

.db-product-shell .filter-sticky,
.product-shell .filter-sticky{
  position:sticky!important;
  top:94px!important;
  padding:20px!important;
  border-radius:20px!important;
}

/* "Find a product" title */
.db-product-shell .filter-heading,
.product-shell .filter-heading{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin:0 0 13px!important;
}

.db-product-shell .filter-heading h4,
.product-shell .filter-heading h4{
  margin:0!important;
  font-size:10px!important;
  line-height:1!important;
  letter-spacing:.16em!important;
  font-weight:900!important;
  color:var(--v452-ink)!important;
}

.db-product-shell .filter-heading h4::before,
.product-shell .filter-heading h4::before{
  content:"⌕"!important;
  width:28px!important;
  height:28px!important;
  display:inline-grid!important;
  place-items:center!important;
  margin-right:8px!important;
  border-radius:9px!important;
  background:#edf9ee!important;
  color:var(--v452-green-dark)!important;
  font-size:13px!important;
  letter-spacing:0!important;
  vertical-align:middle!important;
}

/* desktop close button should not take visual space */
#filterClose{
  display:none!important;
}

/* search field */
.db-product-shell .search-wrap,
.product-shell .search-wrap{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  margin:0 0 22px!important;
}

.db-product-shell .search-wrap > span,
.product-shell .search-wrap > span{
  position:absolute!important;
  left:13px!important;
  z-index:2!important;
  color:#86938b!important;
  font-size:13px!important;
  pointer-events:none!important;
}

.db-product-shell .search,
.product-shell .search{
  width:100%!important;
  height:46px!important;
  min-height:46px!important;
  padding:0 14px 0 36px!important;
  border:1px solid #dbe3dd!important;
  border-radius:12px!important;
  background:#fbfcfb!important;
  font-size:12px!important;
  color:var(--v452-ink)!important;
  box-shadow:none!important;
}

.db-product-shell .search:focus,
.product-shell .search:focus{
  background:#fff!important;
  border-color:rgba(26,184,31,.58)!important;
  box-shadow:0 0 0 4px rgba(26,184,31,.075)!important;
}

/* Section labels inside filter */
.db-product-shell .filter-sticky > h4,
.product-shell .filter-sticky > h4{
  margin:0!important;
  padding:17px 0 10px!important;
  border-top:1px solid #edf1ee!important;
  color:#526158!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:.18em!important;
  line-height:1.1!important;
}

.db-product-shell .filter-sticky > h4:first-of-type,
.product-shell .filter-sticky > h4:first-of-type{
  border-top:0!important;
}

/* brand/category button lists */
.db-product-shell .filter-list,
.product-shell .filter-list{
  display:grid!important;
  gap:6px!important;
  margin:0!important;
  padding:0!important;
}

.db-product-shell .filter-list button,
.product-shell .filter-list button,
.db-product-shell .filter-list a,
.product-shell .filter-list a{
  min-height:38px!important;
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  padding:8px 10px!important;
  border:1px solid transparent!important;
  border-radius:10px!important;
  background:#f8faf9!important;
  color:#425048!important;
  font-size:11px!important;
  font-weight:700!important;
  text-align:left!important;
  transition:.18s ease!important;
}

.db-product-shell .filter-list button:hover,
.product-shell .filter-list button:hover,
.db-product-shell .filter-list button.active,
.product-shell .filter-list button.active,
.db-product-shell .filter-list a:hover,
.product-shell .filter-list a:hover,
.db-product-shell .filter-list a.active,
.product-shell .filter-list a.active{
  background:#edf9ee!important;
  color:var(--v452-green-dark)!important;
  border-color:#d6ecd8!important;
  transform:none!important;
}

/* Make empty filter groups still look intentional while DB is unavailable */
.db-product-shell .filter-list:empty,
.product-shell .filter-list:empty{
  min-height:14px!important;
}
.db-product-shell .filter-list:empty::after,
.product-shell .filter-list:empty::after{
  content:"Loading from catalogue…"!important;
  color:#98a39c!important;
  font-size:10px!important;
  font-weight:500!important;
  padding:3px 0 5px!important;
}

/* ==========================================================
   RIGHT CATALOGUE AREA
   ========================================================== */
.db-product-shell > main{
  min-width:0!important;
  width:100%!important;
}

.db-product-shell .products-top,
.product-shell .products-top{
  min-height:68px!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:20px!important;
  margin-bottom:22px!important;
  padding:0!important;
}

.db-product-shell .products-top .eyebrow,
.product-shell .products-top .eyebrow{
  margin-bottom:9px!important;
  font-size:8px!important;
  letter-spacing:.18em!important;
  color:#587062!important;
}

.db-product-shell .products-top h2,
.product-shell .products-top h2{
  margin:0!important;
  font-size:clamp(34px,3vw,48px)!important;
  line-height:1!important;
  letter-spacing:-.045em!important;
}

.db-product-shell .product-count,
.product-shell .product-count{
  flex:0 0 auto!important;
  padding-bottom:5px!important;
  color:#718078!important;
  font-size:11px!important;
  font-weight:700!important;
}

/* empty catalogue */
.db-product-shell .empty-state,
.product-shell .empty-state{
  min-height:300px!important;
  display:grid!important;
  place-content:center!important;
  gap:5px!important;
  text-align:center!important;
  border:1px dashed #cfdbd2!important;
  border-radius:18px!important;
  background:#fbfdfb!important;
  color:#65756b!important;
}

.db-product-shell .empty-state b,
.product-shell .empty-state b{
  color:#405147!important;
  font-size:13px!important;
}

/* category showcase alignment */
.db-category-showcase{
  padding-inline:max(28px,calc((100vw - 1380px)/2))!important;
}
.db-category-showcase .section-mini-title{
  max-width:1380px!important;
  margin-inline:auto!important;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media(max-width:1050px){
  .db-product-shell,
  .product-shell.db-product-shell{
    width:min(100% - 40px,1180px)!important;
    grid-template-columns:245px minmax(0,1fr)!important;
    gap:24px!important;
  }
  .site-header .nav{gap:18px!important}
}

@media(max-width:820px){
  .site-header .nav > a.active::after,
  .site-header .nav-products > a.active::after{
    left:12px!important;
    bottom:4px!important;
    transform:none!important;
    width:24px!important;
  }

  .db-product-shell,
  .product-shell.db-product-shell{
    width:min(100% - 28px,1180px)!important;
    grid-template-columns:1fr!important;
    padding-top:30px!important;
  }

  .db-product-shell > .filter,
  .product-shell .filter{
    display:none!important;
  }

  .db-product-shell > .filter.open,
  .product-shell .filter.open{
    display:block!important;
    position:fixed!important;
    inset:82px 14px 14px!important;
    z-index:900!important;
    overflow:auto!important;
  }

  .db-product-shell .filter-sticky,
  .product-shell .filter-sticky{
    position:relative!important;
    top:auto!important;
  }

  #filterClose{display:inline-grid!important}

  .db-product-shell .products-top,
  .product-shell .products-top{
    min-height:0!important;
  }
}

@media(max-width:520px){
  .db-product-shell .products-top,
  .product-shell .products-top{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
}

/* RTL */
html[dir=rtl] .db-product-shell .filter-heading h4::before,
html[dir=rtl] .product-shell .filter-heading h4::before{
  margin-right:0!important;
  margin-left:8px!important;
}
html[dir=rtl] .db-product-shell .search-wrap > span,
html[dir=rtl] .product-shell .search-wrap > span{
  left:auto!important;
  right:13px!important;
}
html[dir=rtl] .db-product-shell .search,
html[dir=rtl] .product-shell .search{
  padding:0 36px 0 14px!important;
}
html[dir=rtl] .db-product-shell .filter-list button,
html[dir=rtl] .product-shell .filter-list button{
  text-align:right!important;
}