.prod-accordion:not(:empty){display:flex;align-items:center;gap:5px;justify-content:space-between;border:1px dotted #7F7F7F;position:relative;background:var(--color-offwhite);}
.accordian-title{cursor:pointer;padding:10px;transition:all 0.25s ease-out;position:relative;display:flex;align-items:center;gap:5px;}
.accordian-title:before{content:'';width:5px;height:5px;background:var(--color-black);display:inline-block;transition:all 0.25s ease-out;;opacity:0;visibility:hidden;}
.prod-accordion:has(.accordian-wrap.active){background:var(--background-color);}
.accordian-content{position:absolute;bottom:calc(100% + 1px);left:-1px;width:calc(100% + 2px);border:1px dotted #7F7F7F;border-bottom:0;padding:15px;text-align:left;background:var(--background-color);opacity:0;visibility:hidden;transition:all 0.25s ease-out;z-index:1;}
.accordian-content ul li{list-style:square;list-style-position:inside;}
.accordian-wrap.active .accordian-title:before,.accordian-wrap.active .accordian-content{opacity:1;visibility:visible;}
@media(min-width:992px){
  .prod-accordion:not(:empty){position:absolute;bottom:30px;width:100%;}
  .prod-accordion:has(.accordian-wrap:hover){background:var(--background-color);}
  .accordian-wrap:hover .accordian-title:before,.accordian-wrap:hover .accordian-content{opacity:1;visibility:visible;}
  .prod-accordion:hover .accordian-title{opacity:0.3;}
  .accordian-wrap:hover .accordian-title{opacity:1;}
}
@media(min-width:1200px){
  .accordian-title{padding:10px 15px;}
}
@media(max-width:991px){
  .prod-accordion:not(:empty){margin-top:30px;}
  .prod-accordion:has(.active) .accordian-title{opacity:0.3;}
  .accordian-wrap.active .accordian-title{opacity:1;}
  .accordian-content{top:calc(100% + 1px);border-top:0;z-index:99;border-bottom:1px dotted #7F7F7F;bottom: auto;}
}