.elementor-1477 .elementor-element.elementor-element-e66df32{--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-1477 .elementor-element.elementor-element-26e24fd .elementor-heading-title{font-family:"Playfair Display", Sans-serif;font-size:50px;font-weight:800;}.elementor-1477 .elementor-element.elementor-element-0474bd6{--display:flex;}.elementor-1477 .elementor-element.elementor-element-89b5aa7{--spacer-size:25px;}.elementor-1477 .elementor-element.elementor-element-40c6563{--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{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-1477 .elementor-element.elementor-element-40dadd4 .elementor-button-content-wrapper{flex-direction:row;}.elementor-1477 .elementor-element.elementor-element-8e20459{--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:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1477 .elementor-element.elementor-element-8e20459.e-con{--flex-grow:0;--flex-shrink:1;}.elementor-1477 .elementor-element.elementor-element-5e4f93c{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:10px;}.elementor-1477 .elementor-element.elementor-element-5e4f93c.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-1477 .elementor-element.elementor-element-417fa3f{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.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 .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-1477 .elementor-element.elementor-element-4eebad1{--grid-columns:3;--grid-row-gap:8px;--grid-column-gap:8px;}.elementor-1477 .elementor-element.elementor-element-4eebad1 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-1477 .elementor-element.elementor-element-cf6c42f{--display:flex;}.elementor-1477 .elementor-element.elementor-element-8ad2af2{--spacer-size:50px;}body.elementor-page-1477:not(.elementor-motion-effects-element-type-background), body.elementor-page-1477 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://sunsetlotus.id/wp-content/uploads/2026/01/topographic-bg-300x300.png");background-repeat:repeat;}@media(min-width:768px){.elementor-1477 .elementor-element.elementor-element-5e4f93c{--width:25%;}.elementor-1477 .elementor-element.elementor-element-417fa3f{--width:0%;}}@media(max-width:1024px){.elementor-1477 .elementor-element.elementor-element-26e24fd .elementor-heading-title{font-size:35px;}.elementor-1477 .elementor-element.elementor-element-40c6563{--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-1477 .elementor-element.elementor-element-4eebad1{--grid-columns:2;}}@media(max-width:767px){.elementor-1477 .elementor-element.elementor-element-26e24fd .elementor-heading-title{font-size:30px;}.elementor-1477 .elementor-element.elementor-element-4eebad1{--grid-columns:2;--grid-row-gap:5px;--grid-column-gap:5px;}}/* Start custom CSS for button, class: .elementor-element-40dadd4 *//* Fix icon container width to prevent text jumping */
#filter-toggle-btn .elementor-button-icon {
    display: inline-block;
    width: 8px; /* Adjust this number if your icon is larger */
    text-align: center;
    margin-right: 8px; /* Keeps consistent space between icon and text */
}

/* Ensure the icon itself is centered in that 20px box */
#filter-toggle-btn .elementor-button-icon i {
    width: 100%;
    display: inline-block;
}

/* 1. BUTTON COLOR FIX */
/* Forces button back to brand teal so it doesn't stay 'white' or 'stuck' */
#filter-toggle-btn a:focus,
#filter-toggle-btn a:active {
    background-color: #006F68 !important;
    color: #ffffff !important;
    outline: none !important;
    box-shadow: none !important;
}

#filter-toggle-btn a:hover {
    background-color: #ffffff !important; /* White Background */
    color: #006F68 !important;           /* Theme Green Text */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5e4f93c *//* 1. SHARED TRANSITIONS */
#glass-shop-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-shop-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;
    }

    #glass-shop-filter .e-con-inner, 
    #glass-shop-filter .elementor-widget-container {
        min-width: 300px !important; 
    }

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

    .filter-is-active #glass-shop-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-shop-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.7) !important; /* Translucent white */
        backdrop-filter: blur(10px); /* Frosted glass blur */
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.3); /* Subtle highlight edge */
    }

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

    .filter-is-active #glass-shop-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 */
/* Start custom CSS for container, class: .elementor-element-8e20459 *//* This targets the Sidebar and the Grid simultaneously */
#container-filter, #container-product {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* If the sidebar is hidden/closed by a class (e.g., 'closed') */
#container-filter.closed {
    width: 0px !important;
    padding: 0px !important;
    margin: 0px !important;
    opacity: 0;
    pointer-events: none;
}/* End custom CSS */