.elementor-5756 .elementor-element.elementor-element-9bfdabf{--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-5756 .elementor-element.elementor-element-fb89657{--display:grid;--min-height:120px;--e-con-grid-template-columns:repeat(4, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--gap:0px 0px;--row-gap:0px;--column-gap:0px;--grid-auto-flow:row;}.elementor-5756 .elementor-element.elementor-element-1188743:hover img{opacity:0.79;}.elementor-5756 .elementor-element.elementor-element-9dda239:hover img{opacity:0.81;}.elementor-5756 .elementor-element.elementor-element-c5a03c2{--display:flex;}.elementor-5756 .elementor-element.elementor-element-98ea7e6{width:100%;max-width:100%;}.elementor-5756 .elementor-element.elementor-element-98ea7e6.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-5756 .elementor-element.elementor-element-7bb2d17{--display:flex;--min-height:0.3rem;--align-items:stretch;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-5756 .elementor-element.elementor-element-396d3c1{--grid-columns:4;--grid-row-gap:0px;width:100%;max-width:100%;--grid-column-gap:8px;}.elementor-5756 .elementor-element.elementor-element-396d3c1.elementor-element{--align-self:center;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-5756 .elementor-element.elementor-element-c5a03c2{--width:100%;}.elementor-5756 .elementor-element.elementor-element-7bb2d17{--width:100%;}}@media(max-width:1365px){.elementor-5756 .elementor-element.elementor-element-fb89657{--grid-auto-flow:row;}}@media(max-width:1279px){.elementor-5756 .elementor-element.elementor-element-fb89657{--grid-auto-flow:row;}}@media(max-width:1023px){.elementor-5756 .elementor-element.elementor-element-fb89657{--grid-auto-flow:row;}.elementor-5756 .elementor-element.elementor-element-396d3c1{--grid-columns:2;}}@media(max-width:767px){.elementor-5756 .elementor-element.elementor-element-fb89657{--e-con-grid-template-columns:repeat(2, 1fr);--gap:0px 6px;--row-gap:0px;--column-gap:6px;--grid-auto-flow:row;}.elementor-5756 .elementor-element.elementor-element-396d3c1{--grid-columns:1;}}/* Start custom CSS for image, class: .elementor-element-1188743 *//* 1. Image ko perfect circle banana aur distort hone se rokna */
.elementor-5756 .elementor-element.elementor-element-1188743 img {
    border-radius: 50% !important; /* Perfect circle shape */
    aspect-ratio: 1 / 1 !important; /* Force a square shape first (1:1 ratio) */
    object-fit: cover !important; /* Crucial: Images fill the circle without stretching */
    width: 100% !important; /* Widget ki width full fill kare */
    height: auto !important; /* Height aspect ratio ke mutabiq manage ho */
}

/* Optional: Agar is widget ke content ko center mein align karna hai */
.elementor-5756 .elementor-element.elementor-element-1188743 .elementor-image {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* WordPress Caption Styling */
.widget-image-caption.wp-caption-text {
    font-family: 'Poppins', 'Playfair Display', serif; /* Elegant combinations */
    font-size: 11px;
    font-weight: 600;
    color: #1a1a1a; /* Rich Black */
    margin-top: 12px;
    transition: all 0.4s ease;
    cursor: pointer;
}

/* Hover: Text color thora light black/grey aur slight lift */
.widget-image-caption.wp-caption-text:hover {
    color: #444; 
    transform: translateY(-3px);
    letter-spacing: 1.5px; /* Subtle expansion effect */
}

/* Golden Underline (Center se expand hogi) */
.widget-image-caption.wp-caption-text::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 50%; /* Center se start */
    background: linear-gradient(90deg, #d4af37, #f9e27d, #d4af37); /* Metallic Gold Gradient */
    transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
    transform: translateX(-50%); /* Center alignment fix */
    box-shadow: 0px 2px 4px rgba(212, 175, 55, 0.3); /* Halka sa golden glow */
}

/* Hover par line poori expand hogi */
.widget-image-caption.wp-caption-text:hover::after {
    width: 60%; /* 80% width zyada classy lagti hai poori line se */
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-9dda239 *//* 1. Image ko perfect circle banana aur distort hone se rokna */
.elementor-5756 .elementor-element.elementor-element-9dda239 img {
    border-radius: 50% !important; /* Perfect circle shape */
    aspect-ratio: 1 / 1 !important; /* Force a square shape first (1:1 ratio) */
    object-fit: cover !important; /* Crucial: Images fill the circle without stretching */
    width: 100% !important; /* Widget ki width full fill kare */
    height: auto !important; /* Height aspect ratio ke mutabiq manage ho */
}

/* Optional: Agar is widget ke content ko center mein align karna hai */
.elementor-5756 .elementor-element.elementor-element-9dda239 .elementor-image {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-98ea7e6 *//* 1. Main Form ko Row mein zabardasti lana */
.woof, .woof_sideways, .woof_search_style_sideways {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    gap: 10px !important;
}

/* 2. Har Dropdown Block ki Styling (Brands, Categories, etc.) */
.woof_container {
    display: inline-block !important;
    width: auto !important;
    min-width: 180px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
}

/* 3. Dropdown Box ka Look aur ARROW WAPAS LAANA */
.woof_container select {
    height: 45px !important;
    border: 1px solid #000 !important; /* Sharp Black Border like screenshot */
    border-radius: 0 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    padding: 0 10px !important;
    background: #fff !important;
    cursor: pointer;
    /* Dropdown arrow fix */
    -webkit-appearance: menulist-button !important; /* Safari/Chrome fix */
    -moz-appearance: menulist-button !important; /* Firefox fix */
    appearance: menulist-button !important; /* Standards fix */
}

/* 4. Extra Labels aur extra Titles ko khatam karna jo jagah le rahe thay */
.woof_container h4 {
    display: none !important;
}

/* 5. In Stock Checkboxes ko label ke saath aik line mein dikhana (Fixed empty box) */
.woof_container_product_visibility {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
}

.woof_container_product_visibility label {
    display: block !important; /* Force the text to appear */
    margin: 0 !important;
    font-size: 14px;
    color: #000;
}

/* 6. Filter button styling */
.woof_submit_search_form_container {
    margin: 0 !important;
    display: inline-block !important;
}

.woof_submit_search_form_container button {
    height: 45px !important;
    background: #000 !important;
    color: #fff !important;
    border: none !important;
    padding: 0 30px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* 7. Fuzool cheezon ko hide karna (On Sale checkboxes, Featured) */
.woof_checkbox_term[data-slug="on-sale"], 
.woof_container_featured {
    display: none !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bb2d17 */.elementor-5756 .elementor-element.elementor-element-7bb2d17 {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-49vw + 50%) !important;
    margin-right: calc(-49vw + 50%) !important;
    padding: 0 !important;
}/* End custom CSS */