/* ==========================================================================
     SIDEBAR & FILTER COMPONENTS
   ========================================================================== */
#showFilters{display: none;}
#listfilters {
  display: flex;
  flex-direction: column; /* Stack vertically by default for mobile */
}

.intro{
  font-size: 1.2em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.filtergroup {
  background: #eee;
  padding: 0.5em;
  border-radius: 0.5em;
  overflow: hidden;
  margin-bottom: 0.5em;
}

.filtergroup .title {
  padding: 1em;
  color: #000;
  background: url('../images/filters.png') no-repeat right #eee;
}

.filtergroup fieldset {
  background: #fff;
  overflow: auto;
  border: none;
  font-size: 0.8em;
  transition: max-height 0.4s cubic-bezier(0, 1, 0, 1), opacity 0.3s ease-in-out;

}

.filtergroup fieldset :nth-child(odd) {
  background: #eee;
}

.filtergroup label {
  display: flex; 
  padding: 0.5em;
   cursor: pointer
}

.filtergroup label input {
  margin-right: 0.5em;
}

.filtergroup label.active {
  background: #000; 
  color: #fff;
}
.filtergroup label input[type='checkbox']:checked
{
  background: #000 !important;
  border-color: #000;
}


.filtergroup fieldset.contracted
{
  max-height: 10em;
}


.filtergroup fieldset.expanded
{
   max-height: 35em;
}


.show_more{width: 100%; border-top-left-radius: 0; border-top-right-radius: 0; background: #999; cursor: pointer;}


/* Active Filter Badges */
#current_filters a {
  background: #000;
  color: #fff;
  text-decoration: none;
  padding: 1em;
  border-radius: 0.5em;
  margin-bottom: 0.5em;
  display: block;
  width: 100%;
  position: relative;
}

#current_filters a::after {
  content: "x";
  position: absolute;
  right: 0.5em;
  top: 1em;
  display: block;
  width: 2em;
  height: 2em;
  text-align: center;
  color: #fff;
}

/* Color Filter Grid */
#colour_filter fieldset {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
}

.brandicon {
  background: #000; 
  padding: 0.5em; 
  border-radius: 0.5em; 
  display: inline-block;
}

/* ==========================================================================
   LISTBAR & PAGINATION
   ========================================================================== */

.listbar {
  text-align: right; 
}

.listbar select {
  padding: 8px 12px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  color: #333;
  cursor: pointer;
}

.pg_select {
  display: flex;
  gap: 0.5em;
  padding: 0.5em 0;
  justify-content: flex-end; /* Pushes controls to the right */
}

.pg_select a {
  background: #eee;
  color: #000;
  text-decoration: none;
  padding: 0.5em;
  border-radius: 0.5em;
}

.pg_select .active,
.pg_select .prevpg,
.pg_select .nextpg {
  background: #000;
  color: #fff;
}

/* ==========================================================================
   COLOR SWATCH UTILITIES
   ========================================================================== */

.Amber { background: #ca4325 !important; }
.Anthracite, .Antracite, .Obsidian { background: #222 !important; color: #fff !important; }
.Beige { background: #827741 !important; }
.Black { background: #000 !important; color: #fff !important; }
.Blue { background: blue !important; }
.Brown { background: #630 !important; }
.Charcoal, .DarkGrey { background: #444 !important; }
.Cherry { background: #f06 !important; }
.Claret, .Burgundy { background: #833640 !important; }
.Clear { background: #eef !important; }
.Cobalt { background: #1f4d5d !important; }
.Cream { background: #fffdd0 !important; }
.Crimson { background: Crimson !important; }
.Cyan { background: Cyan !important; }
.DarkBrown { background: #62473c !important; }
.DarkGreen { background: #2f4336 !important; }
.DarkRed {background: #400 !important;}
.Emerald { background: #0F4 !important; }
.Fuchsia { background: #b31961 !important; }
.Gold { background: Gold !important; }
.Green, .green { background: Green !important; }
.Grey { background: #666 !important; }
.Habanero { background: #b35ca1 !important; }
.Ivory { background: #fdfdc9 !important; }
.Indigo{ background: #3F00FF !important; }
.Khaki { background: #ceb597 !important; }
.LightGrey { background: #888 !important; }
.LightPink { background: #f3d8ee !important; color:#000 }
.Lime { background: Lime !important; }
.Maroon { background: #812 !important; }
.Mint { background: #6c8 !important; }
.Multi { background: linear-gradient(-45deg, red, orange, yellow, green, blue, indigo, violet) !important; }
.Navy, .NavyBlue, .NavyNavyBlue { background: #003 !important; color: #fff !important; }
.Orange { background: #ffae00cb !important; }
.Peppermint { background: #a2cb9f !important; }
.Pink { background: #E5A !important; }
.Platinum, .Metallic, .Silver, .Metal { 
  background: #888; 
  background: linear-gradient(to right, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%) !important; 
}
.Bronze{background: #CD7F32!important}
.Plumb { background: #41161f !important; }
.Port { background: #7a3d45 !important; }
.Purple, .purple { background: #639 !important; }
.Red { background: #f00 !important; }
.Royal, .RoyalBlue { background: #00e !important; }
.Scarlet, .scarlet { background: #f02 !important; }
.SkyBlue { background: #48f !important; }
.Stone, .Natural { background: #AA8 !important; }
.Tan { background: #5f4a13 !important; }
.Tangerine { background: #F90 !important; }
.Taupe { background: #c29b5a !important; }
.Teal { background: Teal !important; }
.Turquoise { background: #1b93e1 !important; }
.Violet { background: #938 !important; }
.Volt { background: #ce1 !important; }
.White, .white { background: #fff !important; }
.Yellow, .yellow { background: #fe0 !important; }

/* ==========================================================================
   MEDIA QUERIES (DESKTOP SIDEBAR)
   ========================================================================== */

@media (min-width: 900px) {


  #listfilters {
    flex-direction: row;        
    align-items: stretch;      
    gap: 0.5em;
  }

  #sideBar {
    width: 347px;               
    flex-shrink: 0;             
  }

  #content {
    flex: 1;                    
  }
}



@media (max-width: 800px)
{
  #sideBar{
    background: #ddd;
    border-radius: 0.5em;
    padding: 0.5em;
    margin-bottom: 0.5em;
  }

  #showFilters{
  display: block; 
  border:none; 
  width: 100%; 
  padding:1em; 
  
  border-radius: 0.5em;
  background: #eee; 
  text-align: left;
  font-size: 1.2em;
  position: relative;
  }

  #showFilters::after{
    content: " ";
    background: url(../images/filters.png) no-repeat right #eee; 
    position: absolute;
    right: 0.5em;
    width: 24px;
    height: 25px;
  }
 
  #banner{
  background-size: contain, auto !important;
  background-position: center !important;
  }

  #filters{
  transition: max-height 0.4s cubic-bezier(0, 1, 0, 1);
  margin-top: 0.5em;
  }

  #filters.inactive{
  max-height: 0;
  overflow: hidden;
   margin-top: 0!important
  }

  .pg_select {
  display: flex;
  gap: 0.5em;
  padding: 0.5em 0;
  justify-content: center;
  flex-wrap: wrap; 
  align-content: center;
  }

  .listbar {
  text-align: center;
  }

}
@media (max-width: 350px) {



  .product_grid{
    flex-direction: column !important;
    align-items: stretch !important;
    grid-template-columns: 1fr!important;
  }
}