@charset "UTF-8";
/*------------------------------------
  Madrasthemes variables
------------------------------------*/
/* EOC */
/*!
 * Bootstrap v4.3.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
:root {
  --blue: #0077d0;
  --indigo: #2d1582;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #ee0000;
  --orange: #fd7e14;
  --yellow: #fed700;
  --green: #5cb85c;
  --teal: #00c9a7;
  --cyan: #34bcec;
  --white: #fff;
  --gray: #8c98a4;
  --gray-dark: #343a40;
  --primary: #fed700;
  --secondary: #77838f;
  --success: #00c9a7;
  --info: #00dffc;
  --warning: #ffc107;
  --danger: #de4437;
  --light: #f8f9fa;
  --dark: #333e48;
  --cyan: #34bcec;
  --blue: #0077d0;
  --sale: #df3737;
  --black: #000000;
  --green: #5cb85c;
  --red: #ee0000;
  --gray-1: #f5f5f5;
  --gray-2: #383838;
  --gray-3: #eeeeee;
  --gray-4: #e6e6e6;
  --gray-5: #878787;
  --gray-6: #848484;
  --gray-7: #f9f9f9;
  --gray-8: #7b8186;
  --gray-9: #8f8f8f;
  --gray-13: #f8f8f8;
  --gray-14: #eaeaea;
  --gray-15: #9d9c9c;
  --gray-16: #606060;
  --gray-17: #ecedf2;
  --gray-18: #333e484d;
  --white: #fff;
  --indigo: #2d1582;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-wd: 1480px;
  --font-family-sans-serif: "Open Sans", Helvetica, Arial, sans-serif;
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}


.button-image {
    width: 100%;        /* Makes image fill the width of its container */
    max-width: 200px;   /* Optional: sets a max width (you can change this) */
    height: auto;       /* Keeps the aspect ratio */
    display: block;     /* Removes bottom whitespace */
    margin: 0 auto;     /* Centers the image horizontally */
    border-radius: 0px; /* Optional: rounded corners */
}


.logo-image {
    /* Makes image fill the width of its container */
    max-width: 100px;   /* Optional: sets a max width (you can change this) */
    height: 10px;       /* Keeps the aspect ratio */
    display: block;     /* Removes bottom whitespace */
    margin: 0 auto;     /* Centers the image horizontally */
    border-radius: 0px; /* Optional: rounded corners */
}




.appliance-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px; /* spacing between appliances */
  margin-top: 5px;
}

.appliance {
  flex: 1 1 250px; /* flexible width, minimum 250px */
  max-width: 300px;
  text-align: center;
  background-color: #f9f9f9;
  padding: 5px;
  border-radius: 1px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.button-image {
  width: 100%;
  height: auto;
  border-radius: 3px;
  margin-bottom: 1px;
}

.appliance button {
  background-color: #007BFF;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.appliance button:hover {
  background-color: #f00525;
}






/* Mobile responsiveness */
@media (max-width: 767px) {
    .product-item {
        padding: 5px;
    }
    
    .product-item__inner {
        padding: 10px !important;
    }
    
    .product-item__title {
        font-size: 14px;
    }
    
    .prodcut-price {
        font-size: 14px;
    }
    
    .filter-sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        height: 100%;
        z-index: 1000;
        background: white;
        transition: all 0.3s;
        overflow-y: auto;
        padding: 15px;
    }
    
    .filter-sidebar.active {
        left: 0;
    }
    
    .filter-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 999;
        display: none;
    }
    
    .filter-overlay.active {
        display: block;
    }
    
    .mobile-filter-btn {
        display: block !important;
    }
}