body { /*font-family: sans-serif; */display: flex; gap: 20px; padding: 20px; padding-top: 0px; }
	#filterwrapper {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		width: 100%;
	}
	#filterwrapper label { font-weight: normal; line-height: 1.25em; }
	#sidebar { width: 275px;  margin-bottom: 10px; border: none; border-radius: 5px; height: fit-content; }
	/*#main-content { flex-grow: 1; display: flex; flex-direction: column; gap: 0px 0px; } */
	aside#leftWhiteNoB {width: 22%; margin-right: 2%; padding: 0%;}
	main { width:75.75%; }
	/*#main-content { width:75.75%; }*/
	main > h1 {margin: 0px; padding: 0px; padding-bottom:10px; border-bottom: solid #999 1px; margin-bottom:20px;}
	#item-count {margin-left: 15px;}
	#products-grid, #featured-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; }
	.product-card { padding: 15px; border: 1px solid #eee; border-radius: 5px; box-shadow: 2px 2px 5px rgba(0,0,0,0.05); }
	.filter-group { margin-bottom: 20px; }
	.filter-group label { display: flex;
		align-items: center; 
		gap: 12px; margin-bottom: 5px; }
	.checkbx {
	}
	/* Pagination Styling */
	#pagination-container { display: flex; gap: 5px; margin-top: 10px; }
	.page-btn { padding: 8px 12px; border: 1px solid #ccc; background: #fff; cursor: pointer; border-radius: 3px; }
	.page-btn.active { background: #007BFF; color: #fff; border-color: #007BFF; font-weight: bold; }
	.page-btn:disabled { background: #eee; cursor: not-allowed; color: #aaa; }

	/*	.menu_container > ul > li {width: 100%; border-right: none;} */

/* mobile drawer */

/* Base Desktop Styling */
.mobile-filter-trigger { display: none; }
.close-drawer-btn { display: none; }
.drawer-header { display: none; }
.drawer-footer { display: none; }

.filter-drawer-overlay { display: none; }

.filter-container {
  width: 284px; /* Traditional desktop sidebar width */
  float: left;  /* Or grid/flex equivalent depending on container layout 
  padding-right: 50px;*/
}
.accordion-toggle {
  font-weight: bold;
  margin: 15px 0 5px 0;
  cursor: pointer;
}
.accordion-content {
  display: block; /* Always visible on desktop */
}
.clrall {padding-left: 10px; font-style: italic; font-size: 12px; font-weight: normal;}

/* ===================
   Breakpoint (1220px and down)
   =================== */
@media screen and (max-width: 1220px) {
	aside#leftWhiteNoB {width: 28%; margin-right: 2%; padding: 0%;}
	main { width:69.75%; }
}

/* ===================
   Breakpoint (800px and down)
   =================== */
@media screen and (max-width: 800px) {
.nonmobSTORE { display: none !important; }
.showmobSTORE { display: block !important; }
.clrall {display: none;}
aside#leftWhiteNoB {width: 0% !important; margin-right: 0% !important; padding: 0% !important;}
main { width:100%; }
main > h1 { text-align:center !important; padding-top: 30px; }
/* Universal touch targets rule */
.touch-target-label {
  display: flex;
  align-items: center;
  padding: 12px 4px; /* Generous 44px+ hit height rule */
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
}
.touch-target-label input {
  width: 20px;
  height: 20px;
  margin-right: 12px;
}  

  body.drawer-open {
    overflow: hidden; /* Prevents back-page body scrolling when drawer is open */
  }
  #sidebar { width: 50%;  margin: 0px auto 10px auto; border: none; border-radius: 5px; height: auto; }
  /* Trigger Button styled to stand out */
  .mobile-filter-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0px;
    width: 100%;
	height: 36px;
    box-sizing: border-box;
	 padding: 6px 15px;
    background-color: #1a1a1a;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
  }

  /* Dimmed Dim Background Cover Overlay */
  .filter-drawer-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
  }
  .filter-drawer-overlay.active { display: block; }

  /* Transform Sidebar Container into Slide-out Side Panel */
  .filter-container {
    position: fixed;
    top: 0;
    left: -769%; /* Initially hidden past left edge of screen */
    /*width: 320px;*/
	width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: 9999;
    box-shadow: 2px 0 10px rgba(0,0,0,0.2);
    transition: left 0.3s ease-in-out;
    display: flex;
    flex-direction: column; /* Splitting panel into distinct Header, Scroll Body, and Footer */
  }
  .filter-container.active {
    left: 0; /* Slide view-port panel in */
  }

  /* Mobile Drawer Sticky Header Layout */
  .drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #e5e5e5;
    background: #fdfdfd;
  }
  .drawer-header h3 { margin: 0; font-size: 18px; }
  .close-drawer-btn {
    display: block;
    background: none; border: none;
    font-size: 28px; line-height: 1; cursor: pointer; color: #888;
  }

  /* Make filter options fill midsection and allow internal scroll */
  #filter-form {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px 80px 16px; /* Extra padding space on bottom prevents overlay cutoff */
  }

  /* Collapsible Accordion Logic Styling */
  .accordion-toggle {
    padding: 14px 0;
    margin: 0;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .accordion-toggle::after {
    content: "+";
    font-size: 18px;
    color: #888;
  }
  .accordion-toggle.active::after {
    content: "−";
  }
  .accordion-content {
    display: none; /* Hide closed subcategories by default on mobile devices */
    padding: 8px 0;
  }
  .accordion-content.open {
    display: block;
  }

  /* Fixed Sticky Drawer Controls (Stops options running past screen footer layout) */
  .drawer-footer {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border-top: 1px solid #eee;
  }
  .btn-clear, .btn-apply {
    flex: 1;
    padding: 12px;
    text-align: center;
    font-weight: bold;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
  }
  .btn-clear { background: #f0f0f0; color: #333; border: 1px solid #ccc; }
  .btn-apply { background: #007bff; color: #fff; border: none; cursor: pointer; }
}
/* ===================
   Breakpoint (800px and down)
   =================== */
@media screen and (max-width: 510px) {
 	#sidebar { width: 100%; }
}