/* پایه - layout */
.hkac-wrapper, .hkac-container { width:100%; box-sizing:border-box; }
.hkac-topbar { 
    width:100%; 
    text-align:right; 
    position: fixed;
    bottom: 60px;
    z-index: 999;}
.hkac-main { display:flex; gap:20px; align-items:flex-start; }

/* ستون‌ها */
.hkac-right { width:25%; box-sizing:border-box; }
.hkac-left { width:75%; box-sizing:border-box; }

/* ردیف‌ها */
.hkac-row { margin-bottom:12px; }

/* آکاردیون */
.hkac-accordion-main{
        margin: 10px;
    border-radius: 20px;
    border-top-right-radius: 0;
    border-top-left-radius: 100px;
    background: rgba(0, 0, 0, 0.1);
    padding: 5px;
    padding-bottom: 10px;
}
.hkac-accordion-title{
        padding: 20px;
    font-size: 25px;
    color: red;
}
.hkac-accordion-item { 
    margin: 5px;
    border: solid 1px gray;
    border-radius: 15px;
    
}
.hkac-accordion-header {
    display:flex; align-items:center; gap:8px; padding:8px; cursor:pointer; user-select:none;
        border-radius: 10px;
    background: rgba(255, 255, 255, 0.7);
}
.hkac-accordion-header:focus { outline:2px solid rgba(0,123,255,0.2); }
.hkac-cat-icon { 
    width:50px; 
    height:50px; 
    object-fit:cover; 
    border-radius:4px; }
.hkac-cat-name { font-size:14px; }
.hkac-accordion-body { display:none; padding:6px 8px 10px 36px; }
.hkac-accordion-item.open .hkac-accordion-body { display:block; }

/* فلش چرخشی */
.hkac-arrow { margin-left:auto; transition: transform 0.28s ease; display:inline-block; }
.hkac-arrow.rotated { transform: rotate(180deg); }

/* زیر دسته */
.hkac-subcat { 
    display:flex; 
    align-items:center; 
    gap:8px; 
    padding:6px 0; 
    cursor:pointer; 
    font-size:13px; 
    transition-duration: 0.5s;
}
.hkac-subcat:hover{
    cursor:pointer;
    background:rgba(255,255,255,0.5);
    font-weight:bold;
}
.hkac-subcat .hkac-cat-icon { 
    width:40px; 
    height:40px; 
    
}
#hkac-only-available{
    
}
#hkac-sort-select{
    background: rgba(0, 0, 0, 0.1);
    border: none;
    padding: 5px;
}
#hkac-sort-select option{
    
}

/* محصولات (grid) */
.hkac-products {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:16px;
}
.hkac-product {
    border: 2px solid;
    border-color:rgba(0,0,0,0.2);
    padding: 0;
    border-radius: 6px;
    background: #fff;
    position: relative;
    transition-duration: 0.5s;
    text-align: center;
}
.hkac-product:hover { 
    background:rgba(0,0,0,0.2);
}
.hkac-product img { width:100%; height:160px; object-fit:cover; border-radius:4px; display:block; }

/* عنوان و قیمت */
.hkac-product-title { font-size:14px; margin:8px 0 6px; color:#222; }
.hkac-product-price { font-weight:600; color:#111; }

/* ناموجود: استایل مخصوص */
.hkac-product.hkac-outofstock { opacity:0.65; filter:grayscale(6%); }
.hkac-outofstock-badge {
    position:absolute;
    top:8px; right:8px;
    background:red;
    color:white;
    padding:4px 8px;
    font-size:12px;
    font-weight:700;
    border-radius:4px;
    box-shadow:0 2px 6px rgba(0,0,0,0.06);
}

/* loading */
.hkac-loading { text-align:center; padding:12px; display:none; font-weight:600; color:#666; }

/* mobile button (only shown on small screens) */
.hkac-mobile-btn {
        display: none;
        height: 70px;
    width: 70px;
    padding: 0;
    background: #0073aa;
    color: #fff;
    border: none;
    border-radius: 50%;
    border-bottom-right-radius: 0;
    margin: 0;
    font-size: 12px;
}

/* mobile sidebar */
.hkac-mobile-sidebar {
    display:none;
}
.hkac-mobile-sidebar.active { display:block; position:fixed; top:0; right:0; width:320px; height:100%; background:#fff; box-shadow:-6px 0 24px rgba(0,0,0,0.12); z-index:9999; overflow:auto; }
.hkac-mobile-header { display:flex; justify-content:space-between; align-items:center; padding:12px; border-bottom:1px solid #eee; }

/* منوی کناری دسته‌بندی‌ها */
.hkac-categories-sidebar {
  position: fixed;
  top: 0;
  right: -300px; /* اول خارج از صفحه سمت راست */
  width: 300px;
  height: 100%;
  background: #fff;
  box-shadow: -2px 0 5px rgba(0,0,0,0.2);
  overflow-y: auto;
  transition: right 0.4s ease-in-out; /* انیمیشن نرم */
  z-index: 9999;
}

.hkac-categories-sidebar.active {
  right: 0; /* وقتی باز شد بیاد داخل */
}

/* افکت تار شدن زمینه وقتی منو بازه */
.hkac-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease-in-out;
  z-index: 9998;
}

.hkac-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* دکمه موبایل */
.hkac-btn-mobile {
  display: none;
  background: #0073aa;
  color: #fff;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
  width: 100%;
}

/* فقط در موبایل و تبلت */
@media (max-width: 991px) {
  .hkac-btn-mobile {
    display: block;
  }
}

/* منوی کناری دسته‌بندی‌ها */
.hkac-categories-sidebar {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100%;
  background: #fff;
  box-shadow: -2px 0 5px rgba(0,0,0,0.2);
  overflow-y: auto;
  transition: right 0.4s ease-in-out;
  z-index: 9999;
}

.hkac-categories-sidebar.active {
  right: 0;
}

/* overlay تاریک */
.hkac-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease-in-out;
  z-index: 9998;
}

.hkac-overlay.active {
  opacity: 1;
  visibility: visible;
}



/* Responsive (mobile & vertical tablet) */
@media (max-width:1024px) {
    .hkac-main { flex-direction:column-reverse; }
    .hkac-right{ display:none; }
    .hkac-left { 
        width:100%;
        z-index: 10;
        background: white;
        
    }
    .hkac-mobile-btn { display:inline-block; margin-bottom:10px; }
}