.elementor-636 .elementor-element.elementor-element-5311bc8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-636 .elementor-element.elementor-element-eec6be2 .elementor-heading-title{font-family:"Playfair Display", Sans-serif;font-size:50px;font-weight:800;color:var( --e-global-color-7d5d179 );}.elementor-636 .elementor-element.elementor-element-89226df{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-widget-button .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );background-color:var( --e-global-color-accent );}.elementor-636 .elementor-element.elementor-element-ceb7899 .elementor-button-content-wrapper{flex-direction:row;}.elementor-636 .elementor-element.elementor-element-145dd66{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-636 .elementor-element.elementor-element-a5a2aab{--display:flex;}.elementor-636 .elementor-element.elementor-element-26f6f99{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );background-color:var( --e-global-color-accent );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-636 .elementor-element.elementor-element-9ad238a{--grid-columns:3;--grid-column-gap:8px;--grid-row-gap:8px;}.elementor-636 .elementor-element.elementor-element-9ad238a .elementor-pagination{text-align:center;font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}body:not(.rtl) .elementor-636 .elementor-element.elementor-element-9ad238a .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 10px/2 );}body:not(.rtl) .elementor-636 .elementor-element.elementor-element-9ad238a .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 10px/2 );}body.rtl .elementor-636 .elementor-element.elementor-element-9ad238a .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 10px/2 );}body.rtl .elementor-636 .elementor-element.elementor-element-9ad238a .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 10px/2 );}.elementor-636 .elementor-element.elementor-element-c0a58fc{--display:flex;}.elementor-636 .elementor-element.elementor-element-f0df70e{--spacer-size:50px;}@media(min-width:768px){.elementor-636 .elementor-element.elementor-element-a5a2aab{--width:25%;}}@media(max-width:1024px){.elementor-636 .elementor-element.elementor-element-eec6be2 .elementor-heading-title{font-size:35px;}.elementor-636 .elementor-element.elementor-element-9ad238a{--grid-columns:2;}}@media(max-width:767px){.elementor-636 .elementor-element.elementor-element-eec6be2 .elementor-heading-title{font-size:30px;}.elementor-636 .elementor-element.elementor-element-9ad238a{--grid-columns:2;--grid-column-gap:5px;--grid-row-gap:5px;}}/* Start custom CSS for container, class: .elementor-element-a5a2aab *//* 1. SHARED TRANSITIONS */
.glass-filter,
.container-product {
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, opacity; 
}

/* 2. DESKTOP ONLY LOGIC */
@media (min-width: 1025px) {
    .glass-filter {
      flex: 0 0 25% !important;
      max-width: 25% !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      padding: 0 !important;
      
      /* GLASS EFFECT FOR DESKTOP */
      background: rgba(255, 255, 255, 0.7) !important;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 10px; /* Optional: adds rounded corners to the desktop panel */
      
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.10) !important;
    }

    .container-product {
      flex: 0 0 75% !important;
      max-width: 75% !important;
    }

    .filter-is-active .glass-filter {
      flex-basis: 0% !important;
      max-width: 0% !important;
      opacity: 0;
      margin: 0 !important;
      pointer-events: none;
    }

    .filter-is-active .container-product {
      flex-basis: 100% !important;
      max-width: 100% !important;
    }
}

/* 3. MOBILE OFF-CANVAS LOGIC */
@media (max-width: 1024.98px) {
    .glass-filter {
        position: fixed !important;
        left: 0 !important;
        bottom: 0 !important;
        transform: translateY(100%) !important;
        top: auto !important;
        width: 100% !important;
        height: 80vh !important;
        z-index: 9999 !important;
        transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -5px 15px rgba(0,0,0,0.1);
        padding: 20px !important;
        overflow-y: auto !important;
        
        /* GLASS EFFECT */
        background: rgba(255, 255, 255, 0.8) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .filter-is-active::before {
        content: "";
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 9998;
        backdrop-filter: blur(2px);
        animation: fadeInDimmer 0.3s ease-out;
    }

    .filter-is-active .glass-filter {
        transform: translateY(0) !important;
    }

    .container-product {
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

@keyframes fadeInDimmer {
    from { opacity: 0; }
    to { opacity: 1; }
}/* End custom CSS */