.elementor-1878 .elementor-element.elementor-element-f3782df{--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-1878 .elementor-element.elementor-element-2ea262e{--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-1878 .elementor-element.elementor-element-6d30fb6{--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-1878 .elementor-element.elementor-element-92b3c89.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-1878 .elementor-element.elementor-element-92b3c89.elementor-wc-products ul.products li.product span.onsale{display:block;}.elementor-1878 .elementor-element.elementor-element-f18fec5{--display:flex;}@media(min-width:768px){.elementor-1878 .elementor-element.elementor-element-2ea262e{--width:20%;}.elementor-1878 .elementor-element.elementor-element-6d30fb6{--width:80%;}}@media(max-width:1024px){.elementor-1878 .elementor-element.elementor-element-92b3c89.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(max-width:767px){.elementor-1878 .elementor-element.elementor-element-92b3c89.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}/* Start custom CSS for html, class: .elementor-element-0912a60 *//********************************************
 * Custom WooCommerce Product Filters – Match #prd Style
 * Targets markup from cwpf_product_filters_shortcode()
 ********************************************/

/* VARIABLES (inherit same visual language as #prd) */
.cwpf-filters-sidebar {
    --primary-color: #E74C3C;   /* Accent like price */
    --accent-color: #1a1a1a;    /* Dark button background */
    --hover-accent: #000000;
    --text-color: #101010;
    --secondary-text: #555555;
    --border-color: #e5e5e5;
    --shadow-color: rgba(0, 0, 0, 0.10);
    --pill-bg: #f5f5f5;
    --pill-active-bg: #1a1a1a;
    --pill-active-text: #ffffff;
    --font-title: 'Montserrat', sans-serif;
    --font-body: 'Roboto', sans-serif;
    --transition-time: 0.25s;
    font-family: var(--font-body);
}

/* WRAPPER (aside) */
.cwpf-filters-sidebar {
    margin-bottom: 25px;
}

/* FORM CARD */
.cwpf-filters-form {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px 18px 14px;
    box-shadow: 0 8px 20px var(--shadow-color);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* HEADING */
.cwpf-filters-heading {
    font-family: var(--font-title);
    font-size: 0.98rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-color);
    margin: 0 0 6px;
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 8px;
}

/* SECTION WRAPPER */
.cwpf-filter-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* LABELS */
.cwpf-filter-section > label {
    font-family: var(--font-title);
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--secondary-text);
}

/* SELECTS (Category / Color) */
.cwpf-filter-section select {
    width: 100%;
    padding: 7px 9px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: #fafafa;
    font-size: 0.85rem;
    color: var(--secondary-text);
    line-height: 1.4;
    transition:
        border-color var(--transition-time) ease,
        box-shadow var(--transition-time) ease,
        background var(--transition-time) ease;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #999 50%), 
                      linear-gradient(135deg, #999 50%, transparent 50%);
    background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.cwpf-filter-section select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.06);
    background: #ffffff;
}

/* PRICE RANGE */
.cwpf-price-filter .cwpf-price-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cwpf-price-filter .cwpf-price-inputs span {
    font-size: 0.82rem;
    color: var(--secondary-text);
}

/* Inputs min/max */
.cwpf-price-filter .cwpf-price-inputs input[type="number"] {
    width: 100%;
    padding: 7px 8px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: #fafafa;
    font-size: 0.82rem;
    color: var(--secondary-text);
    -moz-appearance: textfield;
    transition:
        border-color var(--transition-time) ease,
        box-shadow var(--transition-time) ease,
        background var(--transition-time) ease;
}

.cwpf-price-filter .cwpf-price-inputs input[type="number"]:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.06);
    background: #ffffff;
}

/* Hide arrows (Chrome) */
.cwpf-price-filter .cwpf-price-inputs input[type=number]::-webkit-outer-spin-button,
.cwpf-price-filter .cwpf-price-inputs input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ACTION BUTTONS */
.cwpf-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}

/* Apply button */
.cwpf-apply-filters {
    padding: 9px 18px;
    border-radius: 7px;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--accent-color);
    color: #ffffff;
    transition: all var(--transition-time) ease;
    white-space: nowrap;
}

.cwpf-apply-filters:hover,
.cwpf-apply-filters:focus {
    background: var(--hover-accent);
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
    outline: none;
}

/* Reset button */
.cwpf-reset-filters {
    padding: 9px 14px;
    border-radius: 7px;
    border: 1px solid var(--border-color);
    background: #ffffff;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--secondary-text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition:
        background var(--transition-time) ease,
        color var(--transition-time) ease,
        border-color var(--transition-time) ease,
        box-shadow var(--transition-time) ease;
    white-space: nowrap;
}

.cwpf-reset-filters:hover,
.cwpf-reset-filters:focus {
    background: #f7f7f7;
    border-color: #d0d0d0;
    color: #333333;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    outline: none;
}

/* Small alignment tweak if used as sidebar next to #prd grid */
@media (min-width: 769px) {
    .cwpf-filters-sidebar {
        margin-right: 20px;
    }
}

/* RESPONSIVE: stack nicely on mobile */
@media (max-width: 768px) {
    .cwpf-filters-form {
        border-radius: 8px;
        padding: 12px 12px 10px;
        box-shadow: 0 4px 14px var(--shadow-color);
    }

    .cwpf-actions {
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .cwpf-apply-filters,
    .cwpf-reset-filters {
        flex: 1 1 auto;
        text-align: center;
    }
}/* End custom CSS */
/* Start custom CSS for wc-archive-products, class: .elementor-element-92b3c89 *//* --- Enhanced Custom CSS for Elementor Products Widget ID: #prd --- */
/* Improved with CSS variables, responsiveness, accessibility, better typography control, multi-line ellipsis for titles, refined animations, and additional features like rating styles. */

/* Define CSS Variables for Easy Customization */
#prd {
    --primary-color: #E74C3C; /* Price and accents */
    --accent-color: #1a1a1a; /* Button background */
    --hover-accent: #000; /* Button hover */
    --text-color: #101010; /* Titles */
    --secondary-text: #333; /* General text */
    --sale-bg: #68A27B; /* Sale badge */
    --border-color: #e5e5e5; /* Borders */
    --shadow-color: rgba(0, 0, 0, 0.10); /* Shadows */
    --font-title: 'Montserrat', sans-serif;
    --font-body: 'Roboto', sans-serif;
    --transition-time: 0.28s;
}

/* 1. Product Card Container */
#prd li.product {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    padding: 0;
    margin: 0;
    transition:
        box-shadow var(--transition-time) ease,
        transform var(--transition-time) ease,
        border-color var(--transition-time) ease;
}
#prd li.product:hover,
#prd li.product:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 10px 28px var(--shadow-color);
    border-color: #ddd;
}
/* Add text "(Go to Official Site)" under each button - Improved with better positioning and fade-in on hover */
#prd li.product a.button {
    position: relative;
}
#prd li.product a.button::after {
    content: "(Go to Official Site)";
    display: block;
    margin-top: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    text-align: center;
    opacity: 0.85;
    color: #ffff;
    transition: opacity var(--transition-time) ease;
}
#prd li.product a.button:hover::after {
    opacity: 1;
}

/* 2. Sale Badge - Added rotation for visual interest, better shadow */
#prd li.product .onsale {
    position: absolute;
    top: 12px;
    left: 120px; /* Adjust based on your layout; consider making dynamic if needed */
    background: var(--sale-bg);
    color: #fff;
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 4px;
    z-index: 3;
    margin: 0;
    line-height: 1.4;
    box-shadow: 0 2px 6px rgba(104, 162, 123, 0.3); /* Matched to sale color */
    transform: rotate(-5deg); /* Slight tilt for dynamism */
    transition: transform var(--transition-time) ease;
}
#prd li.product:hover .onsale {
    transform: rotate(0deg);
}

/* 3. Product Image - Made height auto for better responsiveness, added lazy loading hint */
#prd li.product .woocommerce-LoopProduct-link img {
    width: 100%;
    height: auto;
    max-height: 220px; /* Increased max for better visibility, but auto for flexibility */
    object-fit: contain;
    display: block;
    background: #fafafa;
    padding: 12px;
    border-bottom: 1px solid #eee;
    transition: transform var(--transition-time) ease;
}
#prd li.product:hover .woocommerce-LoopProduct-link img {
    transform: scale(1.05); /* Slightly increased zoom for more impact */
}

/* 4. Product Title - Used line-clamp for multi-line ellipsis, improved overflow handling */
#prd li.product h2.woocommerce-loop-product__title {
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
    padding: 15px 15px 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Allow up to 3 lines before ellipsis */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

/* 5. Price Styling - Added currency symbol styling if needed, better spacing */
#prd li.product .price {
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 700;
    padding: 0 15px 15px;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
#prd li.product .price del {
    text-decoration: line-through;
    color: #999;
    font-size: 0.9rem;
    font-weight: 400;
}
#prd li.product .price ins {
    color: var(--primary-color);
    background: none;
    text-decoration: none;
}

/* 6. Buy Button - Added focus state, icon support (if WooCommerce adds icons), better hover */
#prd li.product a.button {
    display: block;
    margin: 0 15px 15px;
    padding: 12px;
    background: var(--accent-color);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    border-radius: 6px;
    transition: all var(--transition-time) ease;
    border: none;
    text-decoration: none;
}
#prd li.product a.button:hover,
#prd li.product a.button:focus {
    background: var(--hover-accent);
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
    outline: none; /* For accessibility */
}

/* 7. Additional: Star Rating Styles (if WooCommerce ratings are enabled) */
#prd li.product .star-rating {
    margin: 0 auto 10px;
    color: #f1c40f; /* Gold stars */
    font-size: 0.9rem;
}
#prd li.product .star-rating span {
    color: #f1c40f;
}

/* 8. Responsiveness - Media Queries for Better Mobile/Tablet Support */
@media (max-width: 1024px) {
    #prd li.product .onsale {
        left: 80px; /* Adjust position for smaller screens */
    }
    #prd li.product .woocommerce-LoopProduct-link img {
        max-height: 180px;
    }
    #prd li.product h2.woocommerce-loop-product__title {
        font-size: 0.95rem;
    }
}

@media (max-width: 768px) {
    #prd li.product {
        border-radius: 8px;
    }
    #prd li.product .onsale {
        left: 50px;
        font-size: 0.7rem;
        padding: 3px 8px;
    }
    #prd li.product .woocommerce-LoopProduct-link img {
        max-height: 150px;
        padding: 8px;
    }
    #prd li.product h2.woocommerce-loop-product__title {
        font-size: 0.9rem;
        padding: 10px 10px 8px;
        -webkit-line-clamp: 2; /* Fewer lines on mobile */
    }
    #prd li.product .price {
        font-size: 1rem;
        padding: 0 10px 10px;
    }
    #prd li.product a.button {
        margin: 0 10px 10px;
        padding: 10px;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    #prd li.product .onsale {
        left: 10px;
        top: 10px;
        transform: none; /* Remove tilt on small screens */
    }
}/* End custom CSS */