.ch-drawer {
  background-color: #FFFFFF;
  position: fixed !important; }

.ch-drawer__wrapper {
  z-index: 2147483647 !important; }

.mz-overlay {
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed !important; }

/* =========================================
   2. SEARCH, SORT & ACTION BAR
   ========================================= */
.mz-action-bar-group {
  display: flex;
  justify-content: space-between;
  background-color: #FFFDFB; }

.mz-action-bar-placeholder {
  width: 100%;
  display: flex;
  justify-content: flex-end; }

.mz-sort-by {
  font-size: 0 !important;
  margin-bottom: 0;
  padding-right: 0.75rem; }

.mz-sort-by select {
  font-size: 15px !important; }

.mz-mode,
.actionBar-section--mode {
  display: none !important; }

.mz-select {
  display: block; }
  .mz-select select {
    height: 3rem;
    width: auto !important; }

/* =========================================
   3. THE FLOATING ACTION BUTTON (NEW STYLE, MOBILE ONLY)
   ========================================= */
.mz-filter-btn {
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 25px !important;
  position: fixed !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; }

.mz-btn-primary {
  background-color: #FFAA66 !important;
  border: 2px solid #FFAA66 !important;
  color: #0F1111 !important;
  border-radius: 30px !important;
  width: 140px !important;
  height: 50px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 15px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
  cursor: pointer !important;
  transition: all 0.2s ease-in-out !important; }

.mz-filter-btn svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  fill: #0F1111 !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  /* Forces perfect centering */ }

.mz-filter-btn .mz-hidden-xs {
  display: block !important;
  font-size: 0 !important;
  margin: 0 !important; }

.mz-filter-btn .mz-hidden-xs::before {
  content: "FILTERS" !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0F1111 !important;
  display: inline-block !important;
  vertical-align: middle !important; }

.mz-filter-btn:hover .mz-btn-primary,
.mz-btn-primary:active,
.mz-btn-primary:hover {
  background-color: #F89749 !important;
  border-color: #F89749 !important; }

/* Base button styles for internal filters */
.mz-btn-default {
  background-color: #E7785D;
  color: #0F1111;
  text-decoration: none;
  border-radius: 10px; }

.mz-btn.mz-btn-page {
  color: #0F1111;
  margin: 3px;
  border-radius: 10px; }

.mz-btn.mz-btn-page:hover {
  background-color: #FFAA66;
  border-color: #FFAA66;
  color: #0F1111; }

/* =========================================
   4. FACETS, FILTERS & SELECTIONS
   ========================================= */
.mz-aggs-vertical {
  padding: 0; }

.mz-facet {
  padding: 2px 10px 5px 0px; }

.mz-facet .mz-active .mz-checkbox label {
  color: black; }

.mz-facet .mz-checkbox label {
  text-indent: initial;
  padding-left: 25px;
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: 13px; }

.mz-checkbox.pretty {
  white-space: break-spaces; }

.mz-checkbox.pretty .state label:before,
.mz-checkbox.pretty .state label:after {
  left: 3px; }

.mz-checkbox.pretty.p-svg input:checked ~ .state .svg {
  left: 3px; }

.pretty .state label:before {
  border-color: #C8CDD2; }

.mz-selections-option, .mz-clear-selections {
  background-color: #FFF5EC;
  border-color: #FFAA66;
  color: #4B5563;
  border-radius: 10px;
  font-size: 14px;
  font-family: "Rubik", Arial, Helvetica, sans-serif;
  font-weight: 600;
  padding: 9px;
  margin: 0 5px 5px 0; }

.mz-selections-option:hover, .mz-clear-selections:hover {
  background-color: #FFE2C4;
  border-color: #F89749;
  color: #4B5563; }

.mz-clear-selections {
  padding: 4px 15px 4px 15px; }

.mz-selections-option {
  padding: 4px 0 4px 8px; }

.mz-selections-placeholder {
  margin-bottom: 15px; }

.mz-refinements > div {
  border-top: 1px solid #E5E7EB; }

.mz-refinements .mz-label {
  color: #0F1111; }

.mz-refinements .mz-count {
  color: #9CA3AF; }

.mz-refinements svg {
  width: auto;
  left: auto; }

.mz-refine-by {
  margin-top: 0px; }

/* =========================================
   5. AUTOCOMPLETE & MISC
   ========================================= */
.mz-lookup input {
  width: 100%;
  border: 1px solid #C8CDD2;
  border-radius: 10px;
  padding: 10px;
  background-color: #fff; }

.mz-lookup input::placeholder {
  color: #9CA3AF; }

.mz-lookup input:focus {
  outline: none; }

.mz-query {
  border: 1.2px solid black;
  border-radius: 10px;
  padding: 10px; }

.mz-query input {
  border: none; }

.mz-search-box .mz-complete {
  top: 11px;
  left: 11px; }

.mz-autocomplete[data-popper-escaped] {
  visibility: visible;
  pointer-events: auto; }

.mz-autocomplete .mz-autocomplete-grid {
  width: 100%; }

.mz-autocomplete .mz-autocomplete-grid-item {
  max-width: 152px; }

.mz-autocomplete-grid-item a {
  color: black;
  text-decoration: none; }

.mz-filter-placeholder-loader {
  max-width: 100px;
  margin-top: 70px;
  margin-bottom: 100px; }

#search-results-content,
#faceted-search-container {
  padding: 5px; }

.dropdown-menu {
  z-index: 101; }

.mode-1 .mz-n-lines {
  display: -webkit-box !important;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden; }

.mz-node.mz-active {
  background-color: #FFF5EC; }

.mz-node.mz-active .mz-checkbox label {
  color: #0F1111;
  font-weight: 500; }

.mz-facet .mz-node:hover {
  background-color: #FFF5EC; }

.mz-facet .mz-node:hover .mz-checkbox label {
  color: #4B5563; }

.mz-facet .mz-facet-selections {
  min-height: 20px; }

.mz-box-body {
  padding: 0; }

.mz-paging {
  line-height: 3rem;
  color: #0F1111; }

.mz-pagination-wrapper {
  display: flex;
  justify-content: flex-end;
  padding: 15px 0;
  clear: both; }

.category .page-sidebar .sidebarBlock {
  display: none !important; }

#mz-product-listing-container {
  margin-top: 0px; }
  #mz-product-listing-container .card-footer .card-buttons .card-figcaption-button,
  #mz-product-listing-container .card-text--price {
    display: block !important; }

/* =========================================
   6. RESPONSIVE LAYOUT (MINIMAL WIDTH SIDEBAR)
   ========================================= */
/* Mobile / Small Tablets */
@media (max-width: 800px) {
  .mz-btn-primary {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    gap: 0 !important;
    padding: 0 !important; }
  .mz-filter-btn .mz-hidden-xs {
    display: none !important; }
  .mz-filter-btn svg {
    width: 24px !important;
    height: 24px !important; }
  .mz-action-bar {
    margin-left: 10px; }
  .mz-selections {
    margin-left: 0; }
  .mz-action-bar-group {
    margin: 10px 0;
    gap: 5px;
    align-items: center; }
  .mz-select select {
    font-size: 15px; }
  #mz-autocomplete {
    display: block;
    width: 100%; }
  .mz-search-box {
    font-size: 20px; }
  .mz-paging .mz-select.pg select {
    width: auto; }
  #mz-app .mz-action-bar .mz-select.pg select {
    width: auto; } }

/* Desktop Only Logic */
@media (min-width: 801px) {
  /* 1. KILLS THE FLOATING BUTTON ON DESKTOP */
  .mz-filter-btn {
    display: none !important; }
  /* 2. FLUID WIDTH SIDEBAR (THE FIX) */
  .mz-aggs-vertical {
    /* Scales dynamically: Minimum 260px, prefers 22% of screen, Maximum 340px */
    width: clamp(160px, 16vw, 250px) !important;
    min-width: unset !important;
    /* Clears the old rigid rule */ }
  /* 3. PRODUCT GRID TAKES THE EXACT REMAINDER */
  .mz-hits,
  .page-sidebar + .page-sidebar.mz-search + .page-content {
    /* CRITICAL: Mirrors the exact clamp math from the sidebar so the two columns always add up to exactly 100% */
    width: calc(100% - clamp(160px, 16vw, 250px)) !important; }
  .mz-filter-layout-horizontal .mz-aggs-horizontal,
  .mz-filter-layout-horizontal .mz-hits {
    width: 100%; }
  .category .page-sidebar nav {
    padding: 0px; } }

@media (min-width: 768px) {
  .mz-hits {
    width: 100%;
    float: left; } }

/* ---------------------------------------------------------
   SIDE-BY-SIDE DROPDOWNS (SORT & PER PAGE)
   --------------------------------------------------------- */
/* Fixes dropdown alignment and stops pagination from sliding off-screen */
html body #mz-app .mz-action-bar-group {
  justify-content: left !important;
  align-items: left !important;
  gap: 0px !important;
  background-color: transparent !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-right: 0px !important;
  /* Adds a safety buffer to the right edge */ }

/* Remove default margins that push them apart */
html body #mz-app .mz-sort-by,
html body #mz-app .mz-paging {
  margin: 0 !important;
  line-height: normal !important; }

/* =========================================
   UNIVERSAL FIX: PAGINATION OVERFLOW
   ========================================= */
html body #mz-app .mz-pagination-wrapper {
  display: flex !important;
  justify-content: right !important;
  /* Centers the numbers */
  align-items: right !important;
  flex-wrap: wrap !important;
  /* CRITICAL: Allows wrapping to a new line */
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  /* Respects screen edges */
  padding: 30px 10px !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  /* Hard stop on right-side bleeding */ }

/* =========================================
   MOBILE FIX: SIDE-BY-SIDE DROPDOWNS
   ========================================= */
@media (max-width: 1099px) {
  html body #mz-app .mz-action-bar-group {
    display: flex !important;
    flex-direction: row !important;
    /* Forces side-by-side */
    flex-wrap: nowrap !important;
    /* Strictly forbids stacking */
    justify-content: left !important;
    /* Centers them together */
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 5px !important; }
  html body #mz-app .mz-select select {
    width: auto !important;
    max-width: 160px !important;
    /* Prevents long text from breaking the row */ } }