.accessories-page {
    padding                                   : 1%;
    background                                : var(--theme-primary-color);
}

.panels-wrapper {
    gap                                     : 20px;
    display                                 : flex;
    align-items                             : flex-start;
}

.filter-panel {
    top                                     : 42px;
    position                                : sticky;
    width                                   : 280px;
    margin-top                              : 18px;
    height                                  : fit-content;
    flex-shrink                             : 0;
    background                              : transparent;
    border                                  : 1px solid var(--theme-primary-color-contrast-2);
    border-radius                           : 4px;
}

.filter-header {
	display                                   : flex;
	align-items                               : center;
	justify-content                           : space-between;
	background                                : var(--theme-primary-color-contrast-1);
	padding                                   : 0px 5% 0px 5%;
	height                                    : 40px;
}

.filter-buttons-group {
  display                                   : flex;
  gap                                       : 12px;
}

.filters-button {
    margin                                  : 0;
    display                                 : flex;
    align-items                             : center;
    gap                                     : 5px;
    background                              : none;
    border                                  : none;
    padding                                 : 0;
    cursor                                  : pointer;
    font-size                               : calc(var(--theme-font-size) + 0.5em);
    color                                   : var(--theme-primary-color-contrast-5);
}

.filters-button span {
    font-size                               : calc(var(--theme-font-size) - 0.4em);
}

.filters-button:hover {
    color                                   : var(--theme-primary-color-reverse);
}

#openFilters {
    min-width                               : 100px;
}

#closeFilters {
    display                                 : none;
}

.filter-group {
    padding                                 : 1% 4%;
}

.filter-group:last-of-type {
    margin-bottom                           : 5%;
}

.filter-group > h5 {
    margin-bottom                           : 5%;
	font-weight                               : bold;
	opacity                                   : 0.75;
}

.filter-group input,
.filter-group select {
    width                                   : 100%;
    padding                                 : 3%;
    outline                                 : none;
    border                                  : 1px solid var(--theme-primary-color-contrast-3);
    border-radius                           : 4px;
    box-shadow                              : 2px 2px 12px var(--theme-primary-color-contrast-2);
    background                              : var(--theme-primary-color-contrast-2);
    color                                   : var(--theme-font-color);
}

.range-inputs-wrapper {
    gap                                     : 10px;
    margin-top                              : 5%;
    display                                 : flex; 
} 

.range-inputs-wrapper input {
    width                                   : 100%;
    text-align                              : center;
    background                              : var(--theme-primary-color-contrast-1);
    pointer-events                          : none;
}

.noUi-target {
    margin                                  : 0px 5% !important;
	background                              : var(--theme-primary-color-contrast-1) !important;
	border                                  : 1px solid var(--theme-primary-color-contrast-2) !important;
	box-shadow                              : inset 0 1px 1px var(--theme-primary-color-contrast-1), 0 3px 6px -5px var(--theme-primary-color-contrast-5) !important;
}

.noUi-connect {
	background                              : var(--theme-primary-color-contrast-4) !important;
}

.noUi-handle {
    top                                     : -5px !important;
    width                                   : 34px !important;
	height                                  : 25px !important;
	border                                  : 1px solid var(--theme-primary-color-contrast-2) !important;
	border-radius                           : 4px !important;
	background                              : var(--theme-primary-color) !important;
	cursor                                  : pointer !important;
	box-shadow                              : inset 0 0 1px var(--theme-primary-color-reverse), inset 0 1px 7px var(--theme-primary-color-contrast-3), 0 3px 6px -3px var(--theme-primary-color-contrast-4) !important;
}

.mobile-filter-button-wrapper {
    padding                                 : 5%;
    display                                 : none;
}

.open-filters-btn span {
    padding-left                            : 6px;
}

.content-panel {
    flex                                    : 1;
    min-width                               : 0;
}

.filter-overlay {
    display                                 : none;
}

.accessories-page .spinner-wrapper {
	padding-top								: 1%;
	padding-bottom							: 1%;
	text-align								: center;
	background                              : var(--theme-primary-color);
}

#content-accessories-post-wrapper {
	display                                 : grid;
	grid-template-columns                   : repeat(auto-fill, minmax(300px, 1fr));
	justify-items                           : center;
	padding                                 : 1%;
    grid-gap                                : 16px 1%;
	background                              : var(--theme-primary-color);
	color                                   : var(--theme-font-color);
}

#content-accessories-post-wrapper .na-image {
	filter									: brightness(95%);
}

.accessories-page .theme-button-wrapper {
	text-align								: center;
	padding-bottom							: 1%;
}

.accessories-page .no-content-wrapper {
	text-align								: center;
	background                              : var(--theme-primary-color);
}

.accessories-page .no-content-wrapper p {
	margin									: 0px;
	padding									: 12px;
}

/*****************************************************************************************************************************************/
@media (max-width: 768px) {

  .panels-wrapper {
      display                               : block;
  }

  .mobile-filter-button-wrapper {
      display                               : inline-block;
  }

  .filter-header {
      padding                               : 0px 5% 0px 5%;
  }

    .accessories-page .theme-button-wrapper {
        padding-bottom					    : 12px;
    }

  /* Drawer */
  .filter-panel {
      position                              : fixed;
      top                                   : 0;
      left                                  : -100%;
      width                                 : 85%;
      height                                : 100vh;
      background                            : var(--theme-primary-color);
      z-index                               : 1001;
      padding                               : 20px;
      overflow-y                            : auto;
      transition                            : 0.3s ease;
      border-radius                         : 0;
  }

  .filter-panel.open {
    left: 0;
  }

  .filter-overlay {
      position                              : fixed;
      inset                                 : 0;
      background                            : rgba(0,0,0,0.4);
      z-index                               : 1000;
      display                               : none;
  }

  .filter-overlay.active {
      display                               : block;
  }

  .filters-button:hover {
      animation                             : rotate-center 0.35s ease;
  }

  .filters-button span {
      display                               : none;
  }
}