.elementor-15098 .elementor-element.elementor-element-c0eb0f0{--display:flex;--min-height:450px;--overlay-opacity:0.5;}.elementor-15098 .elementor-element.elementor-element-c0eb0f0:not(.elementor-motion-effects-element-type-background), .elementor-15098 .elementor-element.elementor-element-c0eb0f0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://honeysuckleandlace.com/wp-content/uploads/2026/09/Bottoms-hero-image.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-15098 .elementor-element.elementor-element-c0eb0f0::before, .elementor-15098 .elementor-element.elementor-element-c0eb0f0 > .elementor-background-video-container::before, .elementor-15098 .elementor-element.elementor-element-c0eb0f0 > .e-con-inner > .elementor-background-video-container::before, .elementor-15098 .elementor-element.elementor-element-c0eb0f0 > .elementor-background-slideshow::before, .elementor-15098 .elementor-element.elementor-element-c0eb0f0 > .e-con-inner > .elementor-background-slideshow::before, .elementor-15098 .elementor-element.elementor-element-c0eb0f0 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-15098 .elementor-element.elementor-element-101377a{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;--padding-top:0px;--padding-bottom:0px;--padding-left:60px;--padding-right:60px;}.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-15098 .elementor-element.elementor-element-8088b5b{margin:70px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:start;}.elementor-15098 .elementor-element.elementor-element-8088b5b .elementor-heading-title{font-family:"Cormorant Garamond", Sans-serif;font-size:76px;font-weight:600;color:#930046;}.elementor-15098 .elementor-element.elementor-element-f15ce6d .elementor-heading-title{font-family:"Cormorant Garamond", Sans-serif;font-weight:600;color:var( --e-global-color-text );}.elementor-15098 .elementor-element.elementor-element-994c6dc{width:var( --container-widget-width, 60% );max-width:60%;padding:0px 0px 0px 0px;--container-widget-width:60%;--container-widget-flex-grow:0;text-align:start;}.elementor-15098 .elementor-element.elementor-element-994c6dc .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:22px;font-weight:500;line-height:1.1em;color:var( --e-global-color-text );}.elementor-15098 .elementor-element.elementor-element-8953d89{--display:flex;--min-height:450px;}.elementor-15098 .elementor-element.elementor-element-8953d89:not(.elementor-motion-effects-element-type-background), .elementor-15098 .elementor-element.elementor-element-8953d89 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://honeysuckleandlace.com/wp-content/uploads/2026/09/Bottoms-hero-image.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-15098 .elementor-element.elementor-element-2065ac2{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;--padding-top:0px;--padding-bottom:0px;--padding-left:60px;--padding-right:60px;}.elementor-15098 .elementor-element.elementor-element-50269f4{margin:70px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:start;}.elementor-15098 .elementor-element.elementor-element-50269f4 .elementor-heading-title{font-family:"Cormorant Garamond", Sans-serif;font-size:76px;font-weight:600;color:#650000;}.elementor-15098 .elementor-element.elementor-element-372cf9e .elementor-heading-title{font-family:"Cormorant Garamond", Sans-serif;font-weight:600;color:var( --e-global-color-text );}.elementor-15098 .elementor-element.elementor-element-c1ade2e{width:var( --container-widget-width, 60% );max-width:60%;padding:0px 0px 0px 0px;--container-widget-width:60%;--container-widget-flex-grow:0;text-align:start;}.elementor-15098 .elementor-element.elementor-element-c1ade2e .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:22px;font-weight:500;line-height:1.1em;color:var( --e-global-color-text );}.elementor-15098 .elementor-element.elementor-element-401418c{--display:flex;--min-height:450px;}.elementor-15098 .elementor-element.elementor-element-401418c:not(.elementor-motion-effects-element-type-background), .elementor-15098 .elementor-element.elementor-element-401418c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://honeysuckleandlace.com/wp-content/uploads/2026/09/Bottoms-hero-image.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-15098 .elementor-element.elementor-element-e9d81f9{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;--padding-top:0px;--padding-bottom:0px;--padding-left:60px;--padding-right:60px;}.elementor-15098 .elementor-element.elementor-element-06afa8a{margin:70px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:start;}.elementor-15098 .elementor-element.elementor-element-06afa8a .elementor-heading-title{font-family:"Cormorant Garamond", Sans-serif;font-size:76px;font-weight:600;color:#650000;}.elementor-15098 .elementor-element.elementor-element-6a1fa76 .elementor-heading-title{font-family:"Cormorant Garamond", Sans-serif;font-weight:600;color:var( --e-global-color-text );}.elementor-15098 .elementor-element.elementor-element-10cf1d5{width:var( --container-widget-width, 60% );max-width:60%;padding:0px 0px 0px 0px;--container-widget-width:60%;--container-widget-flex-grow:0;text-align:start;}.elementor-15098 .elementor-element.elementor-element-10cf1d5 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:22px;font-weight:500;line-height:1.1em;color:var( --e-global-color-text );}.elementor-15098 .elementor-element.elementor-element-4f8a64b{--display:flex;--min-height:450px;}.elementor-15098 .elementor-element.elementor-element-4f8a64b:not(.elementor-motion-effects-element-type-background), .elementor-15098 .elementor-element.elementor-element-4f8a64b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://honeysuckleandlace.com/wp-content/uploads/2026/09/Bottoms-hero-image.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-15098 .elementor-element.elementor-element-1c8e5af{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;--padding-top:0px;--padding-bottom:0px;--padding-left:60px;--padding-right:60px;}.elementor-15098 .elementor-element.elementor-element-aa3627b{margin:70px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:start;}.elementor-15098 .elementor-element.elementor-element-aa3627b .elementor-heading-title{font-family:"Cormorant Garamond", Sans-serif;font-size:76px;font-weight:600;color:#650000;}.elementor-15098 .elementor-element.elementor-element-0a3c58e .elementor-heading-title{font-family:"Cormorant Garamond", Sans-serif;font-weight:600;color:var( --e-global-color-text );}.elementor-15098 .elementor-element.elementor-element-79d006c{width:var( --container-widget-width, 60% );max-width:60%;padding:0px 0px 0px 0px;--container-widget-width:60%;--container-widget-flex-grow:0;text-align:start;}.elementor-15098 .elementor-element.elementor-element-79d006c .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:22px;font-weight:500;line-height:1.1em;color:var( --e-global-color-text );}.elementor-15098 .elementor-element.elementor-element-78e2a0d{--display:flex;--min-height:450px;}.elementor-15098 .elementor-element.elementor-element-78e2a0d:not(.elementor-motion-effects-element-type-background), .elementor-15098 .elementor-element.elementor-element-78e2a0d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://honeysuckleandlace.com/wp-content/uploads/2026/09/Bottoms-hero-image.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-15098 .elementor-element.elementor-element-2de00e9{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;--padding-top:0px;--padding-bottom:0px;--padding-left:60px;--padding-right:60px;}.elementor-15098 .elementor-element.elementor-element-3007f6b{margin:70px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:start;}.elementor-15098 .elementor-element.elementor-element-3007f6b .elementor-heading-title{font-family:"Cormorant Garamond", Sans-serif;font-size:76px;font-weight:600;color:#650000;}.elementor-15098 .elementor-element.elementor-element-535f5f6 .elementor-heading-title{font-family:"Cormorant Garamond", Sans-serif;font-weight:600;color:var( --e-global-color-text );}.elementor-15098 .elementor-element.elementor-element-3b8bacf{width:var( --container-widget-width, 60% );max-width:60%;padding:0px 0px 0px 0px;--container-widget-width:60%;--container-widget-flex-grow:0;text-align:start;}.elementor-15098 .elementor-element.elementor-element-3b8bacf .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:22px;font-weight:500;line-height:1.1em;color:var( --e-global-color-text );}.elementor-15098 .elementor-element.elementor-element-2f43aa0{--display:flex;}.elementor-15098 .elementor-element.elementor-element-8ab0713 .woolentor-breadcrumb{text-align:left;}.elementor-15098 .elementor-element.elementor-element-8ab0713 > .elementor-widget-container{margin:20px 0px 0px 50px;}.elementor-15098 .elementor-element.elementor-element-8ab0713 .woolentor-breadcrumb span.breadcrumb-separator{margin:0 10px;}.elementor-15098 .elementor-element.elementor-element-8ab0713 .woolentor-breadcrumb .woocommerce-breadcrumb span.breadcrumb-separator{font-size:16px;}.elementor-15098 .elementor-element.elementor-element-8ab0713 .woolentor-breadcrumb .woocommerce-breadcrumb span.breadcrumb-separator svg{width:16px;height:16px;}.elementor-15098 .elementor-element.elementor-element-5605d5f{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:flex-start;--gap:30px 30px;--row-gap:30px;--column-gap:30px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:60px;--padding-bottom:60px;--padding-left:50px;--padding-right:50px;}.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-15098 .elementor-element.elementor-element-196bccc .elementor-button{background-color:var( --e-global-color-text );}.elementor-15098 .elementor-element.elementor-element-9315022{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;}.elementor-15098 .elementor-element.elementor-element-9315022.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-15098 .elementor-element.elementor-element-dbe5561 .woolentor-filter-wrap .wl_price_filter form button{background-color:var( --e-global-color-text );color:var( --e-global-color-41236a3 );}.elementor-15098 .elementor-element.elementor-element-dbe5561 h2.wl_filter_title{font-family:"Cormorant Garamond", Sans-serif;font-weight:700;}.elementor-15098 .elementor-element.elementor-element-25555bb h2.wl_filter_title{color:#9B174C;font-family:"Cormorant Garamond", Sans-serif;font-size:25px;font-weight:700;}.elementor-15098 .elementor-element.elementor-element-c5517f1 h2.wl_filter_title{color:#9B174C;font-family:"Cormorant Garamond", Sans-serif;font-size:25px;}.elementor-15098 .elementor-element.elementor-element-dc6f7c9 h2.wl_filter_title{color:#9B174C;font-family:"Cormorant Garamond", Sans-serif;font-size:25px;}.elementor-15098 .elementor-element.elementor-element-92471f0 .elementor-heading-title{font-family:"Cormorant Garamond", Sans-serif;font-size:25px;font-weight:700;color:#9B174C;}.elementor-15098 .elementor-element.elementor-element-169d8c6 h2.wl_filter_title{color:#000000;font-family:"Cormorant Garamond", Sans-serif;font-size:20px;}.elementor-15098 .elementor-element.elementor-element-4f3e0ed h2.wl_filter_title{color:#000000;font-family:"Cormorant Garamond", Sans-serif;font-size:20px;}.elementor-15098 .elementor-element.elementor-element-34aee00 h2.wl_filter_title{color:#000000;font-family:"Cormorant Garamond", Sans-serif;font-size:20px;}.elementor-15098 .elementor-element.elementor-element-881f5ec h2.wl_filter_title{color:#000000;font-family:"Cormorant Garamond", Sans-serif;font-size:20px;}.elementor-15098 .elementor-element.elementor-element-69e5b6b{--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-15098 .elementor-element.elementor-element-75ac87e.elementor-widget-woolentor-product-archive-addons ul.products li.product span.onsale{display:block;}.elementor-15098 .elementor-element.elementor-element-75ac87e.elementor-widget-woolentor-product-archive-addons span.onsale{display:block !important;}.elementor-15098 .elementor-element.elementor-element-75ac87e.elementor-widget-woolentor-product-archive-addons ul.products li.product .woocommerce-loop-product__title,.elementor-15098 .elementor-element.elementor-element-75ac87e.elementor-widget-woolentor-product-archive-addons .woocommerce-loop-product__title,.elementor-15098 .elementor-element.elementor-element-75ac87e.elementor-widget-woolentor-product-archive-addons ul.products li.product .title a{font-family:"Cormorant Garamond", Sans-serif;font-size:20px;font-weight:500;}.elementor-15098 .elementor-element.elementor-element-75ac87e.elementor-widget-woolentor-product-archive-addons ul.products li.product .price{color:var( --e-global-color-text );}.elementor-15098 .elementor-element.elementor-element-75ac87e.elementor-widget-woolentor-product-archive-addons .price{color:var( --e-global-color-text );}.elementor-15098 .elementor-element.elementor-element-75ac87e.elementor-widget-woolentor-product-archive-addons ul.products li.product .price ins{color:var( --e-global-color-text );}.elementor-15098 .elementor-element.elementor-element-75ac87e.elementor-widget-woolentor-product-archive-addons .price ins{color:var( --e-global-color-text );}.elementor-15098 .elementor-element.elementor-element-75ac87e.elementor-widget-woolentor-product-archive-addons ul.products li.product .price ins .amount{color:var( --e-global-color-text );}.elementor-15098 .elementor-element.elementor-element-75ac87e.elementor-widget-woolentor-product-archive-addons .price ins .amount{color:var( --e-global-color-text );}.elementor-15098 .elementor-element.elementor-element-75ac87e.elementor-widget-woolentor-product-archive-addons ul.products li.product .price .amount{color:var( --e-global-color-text );}.elementor-15098 .elementor-element.elementor-element-75ac87e.elementor-widget-woolentor-product-archive-addons ul.products li.product .price,.elementor-15098 .elementor-element.elementor-element-75ac87e.elementor-widget-woolentor-product-archive-addons .price{font-family:"Cormorant Garamond", Sans-serif;font-size:20px;font-weight:500;}.elementor-15098 .elementor-element.elementor-element-75ac87e.elementor-widget-woolentor-product-archive-addons ul.products li.product .button{color:var( --e-global-color-41236a3 );background-color:#7A1530;}.elementor-15098 .elementor-element.elementor-element-75ac87e.elementor-widget-woolentor-product-archive-addons .button{color:var( --e-global-color-41236a3 );background-color:#7A1530 !important;}.elementor-15098 .elementor-element.elementor-element-bb6821f{--display:flex;}@media(min-width:768px){.elementor-15098 .elementor-element.elementor-element-69e5b6b{--width:75%;}}@media(max-width:767px){.elementor-15098 .elementor-element.elementor-element-994c6dc{width:100%;max-width:100%;padding:0px 0px 0px 0px;}.elementor-15098 .elementor-element.elementor-element-994c6dc.elementor-element{--align-self:flex-start;}.elementor-15098 .elementor-element.elementor-element-994c6dc .elementor-heading-title{font-size:18px;}.elementor-15098 .elementor-element.elementor-element-c1ade2e{width:100%;max-width:100%;padding:0px 0px 0px 0px;}.elementor-15098 .elementor-element.elementor-element-c1ade2e.elementor-element{--align-self:flex-start;}.elementor-15098 .elementor-element.elementor-element-c1ade2e .elementor-heading-title{font-size:18px;}.elementor-15098 .elementor-element.elementor-element-10cf1d5{width:100%;max-width:100%;padding:0px 0px 0px 0px;}.elementor-15098 .elementor-element.elementor-element-10cf1d5.elementor-element{--align-self:flex-start;}.elementor-15098 .elementor-element.elementor-element-10cf1d5 .elementor-heading-title{font-size:18px;}.elementor-15098 .elementor-element.elementor-element-79d006c{width:100%;max-width:100%;padding:0px 0px 0px 0px;}.elementor-15098 .elementor-element.elementor-element-79d006c.elementor-element{--align-self:flex-start;}.elementor-15098 .elementor-element.elementor-element-79d006c .elementor-heading-title{font-size:18px;}.elementor-15098 .elementor-element.elementor-element-3b8bacf{width:100%;max-width:100%;padding:0px 0px 0px 0px;}.elementor-15098 .elementor-element.elementor-element-3b8bacf.elementor-element{--align-self:flex-start;}.elementor-15098 .elementor-element.elementor-element-3b8bacf .elementor-heading-title{font-size:18px;}.elementor-15098 .elementor-element.elementor-element-dbe5561 h2.wl_filter_title{font-size:21px;}}@media(max-width:1600px) and (min-width:768px){.elementor-15098 .elementor-element.elementor-element-9315022{--width:250.109px;}}/* Start custom CSS for wl-product-filter, class: .elementor-element-25555bb *//* ========================================== H&L BRAND FILTER Checkbox Style + Scroll After 10 Items ========================================== */ /* ------------------------------------------ BRAND FILTER CONTAINER ------------------------------------------ */ .hl-brand-filter { /* Show approximately 10 brand rows */ max-height: 320px !important; /* Enable vertical scrolling */ overflow-y: auto !important; overflow-x: hidden !important; /* Space between items and scrollbar */ padding: 0 10px 0 0 !important; margin: 0 !important; /* Firefox scrollbar */ scrollbar-width: thin; scrollbar-color: #a9164f #eeeeee; } /* ------------------------------------------ BRAND FILTER ITEMS ------------------------------------------ */ .hl-brand-filter li { list-style: none !important; margin: 0 0 10px 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } /* Remove margin from last item */ .hl-brand-filter li:last-child { margin-bottom: 0 !important; } /* ------------------------------------------ BRAND LINKS ------------------------------------------ */ .hl-brand-filter li a { display: flex !important; align-items: center !important; gap: 9px !important; width: 100% !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.4 !important; color: #444 !important; text-decoration: none !important; cursor: pointer !important; box-sizing: border-box !important; transition: color 0.2s ease, background-color 0.2s ease !important; } /* ------------------------------------------ CUSTOM CHECKBOX ------------------------------------------ */ .hl-brand-filter li a::before { content: "" !important; display: inline-flex !important; width: 17px !important; height: 17px !important; min-width: 17px !important; min-height: 17px !important; flex: 0 0 17px !important; border: 1px solid #999 !important; border-radius: 2px !important; background-color: #fff !important; box-sizing: border-box !important; transition: border-color 0.2s ease, background-color 0.2s ease !important; } /* ------------------------------------------ HOVER STATE ------------------------------------------ */ .hl-brand-filter li a:hover { color: #a9164f !important; } .hl-brand-filter li a:hover::before { border-color: #a9164f !important; } /* ------------------------------------------ SELECTED / ACTIVE BRAND Supports common WooCommerce classes ------------------------------------------ */ .hl-brand-filter li.chosen > a, .hl-brand-filter li.current-cat > a, .hl-brand-filter li.active > a, .hl-brand-filter li.selected > a { color: #a9164f !important; font-weight: 500 !important; } /* Selected checkbox */ .hl-brand-filter li.chosen > a::before, .hl-brand-filter li.current-cat > a::before, .hl-brand-filter li.active > a::before, .hl-brand-filter li.selected > a::before { background-color: #a9164f !important; border-color: #a9164f !important; /* White checkmark */ background-image: linear-gradient( 45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55% ), linear-gradient( -45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55% ) !important; background-size: 6px 10px, 6px 10px !important; background-position: 4px 1px, 7px 1px !important; background-repeat: no-repeat !important; } /* ========================================== SCROLLBAR - CHROME / EDGE / SAFARI ========================================== */ .hl-brand-filter::-webkit-scrollbar { width: 6px !important; } /* Scrollbar track */ .hl-brand-filter::-webkit-scrollbar-track { background: #eeeeee !important; border-radius: 20px !important; } /* Scrollbar thumb */ .hl-brand-filter::-webkit-scrollbar-thumb { background: #a9164f !important; border-radius: 20px !important; } /* Scrollbar thumb hover */ .hl-brand-filter::-webkit-scrollbar-thumb:hover { background: #86113f !important; } /* ========================================== TABLET ========================================== */ @media (max-width: 1024px) { .hl-brand-filter { max-height: 320px !important; padding-right: 8px !important; } .hl-brand-filter li a { font-size: 14px !important; } } /* ========================================== MOBILE ========================================== */ @media (max-width: 767px) { .hl-brand-filter { max-height: 320px !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; padding-right: 8px !important; } .hl-brand-filter li { margin-bottom: 10px !important; } .hl-brand-filter li a { font-size: 14px !important; line-height: 1.4 !important; gap: 8px !important; } .hl-brand-filter li a::before { width: 17px !important; height: 17px !important; min-width: 17px !important; min-height: 17px !important; flex-basis: 17px !important; } }/* End custom CSS */ /* Start custom CSS for wl-product-filter, class: .elementor-element-c5517f1 *//* ===================================== H&L CATEGORY FILTER - CHECKBOX STYLE ===================================== */ /* Category list */ .hl-category-filter ul { list-style: none !important; padding: 0 !important; margin: 0 !important; } /* Each category */ .hl-category-filter li { list-style: none !important; margin: 0 0 10px !important; padding: 0 !important; border: 0 !important; } /* Category link */ .hl-category-filter li a { display: flex !important; align-items: center !important; gap: 9px !important; color: #444 !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.4 !important; text-decoration: none !important; } /* Checkbox appearance */ .hl-category-filter li a::before { content: "" !important; display: inline-block !important; width: 17px !important; height: 17px !important; min-width: 17px !important; background: #fff !important; border: 1px solid #999 !important; border-radius: 2px !important; box-sizing: border-box !important; } /* Hover */ .hl-category-filter li a:hover { color: #a9164f !important; } .hl-category-filter li a:hover::before { border-color: #a9164f !important; }/* End custom CSS */ /* Start custom CSS for wl-product-filter, class: .elementor-element-dc6f7c9 *//* ========================================================== HONEYSUCKLE & LACE FILTER BY COLOUR — COMPLETE RESPONSIVE FIX Name-based swatches + AJAX safe ========================================================== */ /* ========================================================== 1. FILTER HEADING ========================================================== */ .hl-colour-heading { position: relative !important; margin: 0 0 12px 0 !important; padding: 0 0 10px 0 !important; border-bottom: 1px solid #e3e3e3 !important; } .hl-colour-heading .elementor-heading-title { color: #a9164f !important; font-family: Arial, sans-serif !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.2 !important; text-transform: uppercase !important; letter-spacing: 2.5px !important; } /* ========================================================== 2. FILTER CONTAINER ========================================================== */ .hl-colour-filter { width: 100% !important; } /* ========================================================== 3. COLOUR LIST ========================================================== */ .hl-colour-filter ul { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 28px !important; row-gap: 10px !important; width: 100% !important; margin: 0 !important; padding: 0 10px 0 0 !important; list-style: none !important; max-height: 145px !important; overflow-y: auto !important; overflow-x: hidden !important; align-content: start !important; scrollbar-width: thin; scrollbar-color: #c5c5c5 transparent; } /* ========================================================== 4. SCROLLBAR ========================================================== */ .hl-colour-filter ul::-webkit-scrollbar { width: 5px; } .hl-colour-filter ul::-webkit-scrollbar-track { background: transparent; } .hl-colour-filter ul::-webkit-scrollbar-thumb { background: #c5c5c5; border-radius: 10px; } .hl-colour-filter ul::-webkit-scrollbar-thumb:hover { background: #a9164f; } /* ========================================================== 5. COLOUR ITEM ========================================================== */ .hl-colour-filter ul > li { position: relative !important; display: block !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; list-style: none !important; } /* ========================================================== 6. COLOUR LINK ========================================================== */ .hl-colour-filter ul > li > a, .hl-colour-filter ul > li > a:link, .hl-colour-filter ul > li > a:visited, .hl-colour-filter ul > li > a:hover, .hl-colour-filter ul > li > a:focus, .hl-colour-filter ul > li > a:active { position: relative !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; width: 100% !important; min-width: 0 !important; min-height: 28px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; color: #333333 !important; font-family: Arial, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 28px !important; text-decoration: none !important; white-space: nowrap !important; box-shadow: none !important; transform: none !important; } /* ========================================================== 7. HIDE PRODUCT COUNTS ========================================================== */ .hl-colour-filter ul > li > a > span { display: none !important; } /* ========================================================== 8. BASE SWATCH ========================================================== */ .hl-colour-filter ul > li > a::before { content: "" !important; position: static !important; display: block !important; width: 26px !important; height: 26px !important; min-width: 26px !important; min-height: 26px !important; flex: 0 0 26px !important; margin: 0 !important; padding: 0 !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; border: 1px solid #999999 !important; border-radius: 50% !important; box-sizing: border-box !important; /* * JavaScript sets --hl-swatch based on * the actual colour name. */ background: var(--hl-swatch, #eeeeee) !important; box-shadow: none !important; transform: none !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } /* ========================================================== 9. REMOVE SHOPLENTOR ACTIVE MARK ========================================================== */ .hl-colour-filter ul > li > a::after, .hl-colour-filter ul > li.active > a::after, .hl-colour-filter ul > li.selected > a::after, .hl-colour-filter ul > li.current > a::after, .hl-colour-filter ul > li.checked > a::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; transform: none !important; } /* Remove ShopLentor icons */ .hl-colour-filter ul > li i, .hl-colour-filter ul > li svg { display: none !important; } /* ========================================================== 10. ACTIVE / CLICKED LINK ========================================================== */ .hl-colour-filter ul > li.active > a, .hl-colour-filter ul > li.selected > a, .hl-colour-filter ul > li.current > a, .hl-colour-filter ul > li.checked > a { position: relative !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; color: #333333 !important; text-decoration: none !important; box-shadow: none !important; transform: none !important; } /* ========================================================== 11. ACTIVE SWATCH POSITION ========================================================== */ .hl-colour-filter ul > li.active > a::before, .hl-colour-filter ul > li.selected > a::before, .hl-colour-filter ul > li.current > a::before, .hl-colour-filter ul > li.checked > a::before, .hl-colour-filter ul > li > a:focus::before, .hl-colour-filter ul > li > a:active::before { position: static !important; display: block !important; width: 26px !important; height: 26px !important; min-width: 26px !important; min-height: 26px !important; flex: 0 0 26px !important; margin: 0 !important; padding: 0 !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; border-radius: 50% !important; transform: none !important; } /* ========================================================== 12. SPECIAL COLOUR SWATCHES ========================================================== */ /* LEOPARD */ .hl-colour-filter ul > li > a.hl-leopard::before, .hl-colour-filter ul > li > a.hl-leopard:hover::before, .hl-colour-filter ul > li.active > a.hl-leopard::before, .hl-colour-filter ul > li.selected > a.hl-leopard::before, .hl-colour-filter ul > li.current > a.hl-leopard::before, .hl-colour-filter ul > li.checked > a.hl-leopard::before { background: radial-gradient( circle at 30% 35%, #2B2118 0 12%, transparent 13% ), radial-gradient( circle at 70% 65%, #2B2118 0 10%, transparent 11% ), radial-gradient( circle at 75% 20%, #2B2118 0 8%, transparent 9% ), #C79A5B !important; } /* MULTICOLOUR */ .hl-colour-filter ul > li > a.hl-multicolour::before, .hl-colour-filter ul > li > a.hl-multicolour:hover::before, .hl-colour-filter ul > li.active > a.hl-multicolour::before, .hl-colour-filter ul > li.selected > a.hl-multicolour::before, .hl-colour-filter ul > li.current > a.hl-multicolour::before, .hl-colour-filter ul > li.checked > a.hl-multicolour::before { background: linear-gradient( 135deg, #D92F91 0%, #D92F91 25%, #007F86 25%, #007F86 50%, #E8C94A 50%, #E8C94A 75%, #765080 75%, #765080 100% ) !important; } /* ORANGE / BLUE */ .hl-colour-filter ul > li > a.hl-orange-blue::before, .hl-colour-filter ul > li > a.hl-orange-blue:hover::before, .hl-colour-filter ul > li.active > a.hl-orange-blue::before, .hl-colour-filter ul > li.selected > a.hl-orange-blue::before { background: linear-gradient( 90deg, #E9894A 0%, #E9894A 50%, #557DAA 50%, #557DAA 100% ) !important; } /* ========================================================== 13. LIGHT COLOUR BORDER ========================================================== */ .hl-colour-filter ul > li > a.hl-light-swatch::before { border-color: #bdbdbd !important; } /* ========================================================== 14. SELECTED STATE ========================================================== */ .hl-colour-filter ul > li.active > a::before, .hl-colour-filter ul > li.selected > a::before, .hl-colour-filter ul > li.current > a::before, .hl-colour-filter ul > li.checked > a::before { border: 2px solid #a9164f !important; border-radius: 50% !important; box-shadow: 0 0 0 1px #ffffff inset !important; } /* ========================================================== 15. HOVER ========================================================== */ .hl-colour-filter ul > li > a:hover { color: #a9164f !important; } .hl-colour-filter ul > li > a:hover::before { border-color: #a9164f !important; } /* ========================================================== 16. FOCUS / ACCESSIBILITY ========================================================== */ .hl-colour-filter ul > li > a:focus { outline: none !important; } .hl-colour-filter ul > li > a:focus-visible { outline: 2px solid #a9164f !important; outline-offset: 3px !important; } /* ========================================================== 17. TABLET ========================================================== */ @media (max-width: 1024px) { .hl-colour-filter ul { column-gap: 20px !important; } .hl-colour-filter ul > li > a { font-size: 14px !important; } } /* ========================================================== 18. MOBILE ========================================================== */ @media (max-width: 767px) { .hl-colour-filter ul { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 15px !important; row-gap: 10px !important; max-height: 136px !important; padding-right: 8px !important; } .hl-colour-filter ul > li > a, .hl-colour-filter ul > li > a:link, .hl-colour-filter ul > li > a:visited, .hl-colour-filter ul > li > a:hover, .hl-colour-filter ul > li > a:focus, .hl-colour-filter ul > li > a:active { gap: 8px !important; min-height: 24px !important; font-size: 13px !important; line-height: 24px !important; } .hl-colour-filter ul > li > a::before, .hl-colour-filter ul > li.active > a::before, .hl-colour-filter ul > li.selected > a::before, .hl-colour-filter ul > li.current > a::before, .hl-colour-filter ul > li.checked > a::before { width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; flex: 0 0 24px !important; position: static !important; transform: none !important; } } /* ========================================================== 19. SMALL MOBILE ========================================================== */ @media (max-width: 480px) { .hl-colour-filter ul { column-gap: 10px !important; } .hl-colour-filter ul > li > a { font-size: 12.5px !important; gap: 7px !important; } .hl-colour-filter ul > li > a::before { width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; flex: 0 0 22px !important; } }/* End custom CSS */ /* Start custom CSS for wl-product-filter, class: .elementor-element-169d8c6 *//* ========================================================== HONEYSUCKLE & LACE SIZE FILTER — COMPLETE FIX ========================================================== */ /* ========================================================== 1. FILTER CONTAINER ========================================================== */ .hl-size-filter { width: 100% !important; } /* ========================================================== 2. SIZE LIST ========================================================== */ .hl-size-filter ul { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } /* ========================================================== 3. SIZE ITEM ========================================================== */ .hl-size-filter ul > li { display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; list-style: none !important; } /* ========================================================== 4. SIZE BUTTON ========================================================== */ .hl-size-filter ul > li > a, .hl-size-filter ul > li > a:link, .hl-size-filter ul > li > a:visited { display: flex !important; align-items: center !important; justify-content: center !important; min-width: 44px !important; height: 40px !important; margin: 0 !important; padding: 0 10px !important; border: 1px solid #d6d6d6 !important; border-radius: 3px !important; background: #ffffff !important; color: #333333 !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1 !important; text-align: center !important; text-decoration: none !important; box-sizing: border-box !important; box-shadow: none !important; transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease !important; } /* ========================================================== 5. REMOVE PRODUCT COUNTS XS (5) → XS 38 (4) → 38 ========================================================== */ .hl-size-filter ul > li > a > span, .hl-size-filter ul > li > span, .hl-size-filter ul > li .count, .hl-size-filter ul > li .product-count, .hl-size-filter ul > li .woolentor-count, .hl-size-filter ul > li .ht-product-count { display: none !important; } /* ========================================================== 6. REMOVE UNWANTED ICONS / CHECKMARKS ========================================================== */ .hl-size-filter ul > li > a::before, .hl-size-filter ul > li > a::after { content: none !important; display: none !important; } .hl-size-filter ul > li i, .hl-size-filter ul > li svg { display: none !important; } /* ========================================================== 7. HOVER ========================================================== */ .hl-size-filter ul > li > a:hover { background: #ffffff !important; border-color: #a9164f !important; color: #a9164f !important; text-decoration: none !important; box-shadow: none !important; } /* ========================================================== 8. SELECTED / ACTIVE ========================================================== */ .hl-size-filter ul > li.active > a, .hl-size-filter ul > li.selected > a, .hl-size-filter ul > li.current > a, .hl-size-filter ul > li.checked > a, .hl-size-filter ul > li.chosen > a { background: #a9164f !important; border-color: #a9164f !important; color: #ffffff !important; text-decoration: none !important; box-shadow: none !important; } /* ========================================================== 9. KEEP SELECTED COLOUR ON HOVER ========================================================== */ .hl-size-filter ul > li.active > a:hover, .hl-size-filter ul > li.selected > a:hover, .hl-size-filter ul > li.current > a:hover, .hl-size-filter ul > li.checked > a:hover, .hl-size-filter ul > li.chosen > a:hover { background: #a9164f !important; border-color: #a9164f !important; color: #ffffff !important; } /* ========================================================== 10. KEYBOARD FOCUS ========================================================== */ .hl-size-filter ul > li > a:focus { outline: none !important; } .hl-size-filter ul > li > a:focus-visible { outline: 2px solid #a9164f !important; outline-offset: 2px !important; } /* ========================================================== 11. TABLET ========================================================== */ @media (max-width: 1024px) { .hl-size-filter ul { gap: 7px !important; } .hl-size-filter ul > li > a { min-width: 42px !important; height: 39px !important; padding: 0 9px !important; font-size: 13.5px !important; } } /* ========================================================== 12. MOBILE ========================================================== */ @media (max-width: 767px) { .hl-size-filter ul { gap: 6px !important; } .hl-size-filter ul > li > a { min-width: 40px !important; height: 38px !important; padding: 0 9px !important; font-size: 13px !important; } } /* ========================================================== 13. SMALL MOBILE ========================================================== */ @media (max-width: 480px) { .hl-size-filter ul { gap: 5px !important; } .hl-size-filter ul > li > a { min-width: 38px !important; height: 36px !important; padding: 0 8px !important; font-size: 12.5px !important; } }/* End custom CSS */ /* Start custom CSS for wl-product-filter, class: .elementor-element-4f3e0ed *//* Only the Size filter widgets */ .hl-size-filter ul { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; padding: 0 !important; margin: 0 !important; } /* Individual size options */ .hl-size-filter li { width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } /* Size buttons */ .hl-size-filter li a { display: flex !important; align-items: center; justify-content: center; min-width: 44px; height: 40px; padding: 0 10px !important; border: 1px solid #d6d6d6 !important; border-radius: 3px; background: #fff; color: #333 !important; font-size: 14px; font-weight: 500; text-decoration: none !important; } /* Hover */ .hl-size-filter li a:hover { border-color: #a9164f !important; color: #a9164f !important; } /* Selected */ .hl-size-filter li.active a, .hl-size-filter li.selected a { background: #a9164f !important; border-color: #a9164f !important; color: #fff !important; }/* End custom CSS */ /* Start custom CSS for wl-product-filter, class: .elementor-element-34aee00 *//* Only the Size filter widgets */ .hl-size-filter ul { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; padding: 0 !important; margin: 0 !important; } /* Individual size options */ .hl-size-filter li { width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } /* Size buttons */ .hl-size-filter li a { display: flex !important; align-items: center; justify-content: center; min-width: 44px; height: 40px; padding: 0 10px !important; border: 1px solid #d6d6d6 !important; border-radius: 3px; background: #fff; color: #333 !important; font-size: 14px; font-weight: 500; text-decoration: none !important; } /* Hover */ .hl-size-filter li a:hover { border-color: #a9164f !important; color: #a9164f !important; } /* Selected */ .hl-size-filter li.active a, .hl-size-filter li.selected a { background: #a9164f !important; border-color: #a9164f !important; color: #fff !important; }/* End custom CSS */ /* Start custom CSS for wl-product-filter, class: .elementor-element-881f5ec *//* Only the Size filter widgets */ .hl-size-filter ul { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; padding: 0 !important; margin: 0 !important; } /* Individual size options */ .hl-size-filter li { width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } /* Size buttons */ .hl-size-filter li a { display: flex !important; align-items: center; justify-content: center; min-width: 44px; height: 40px; padding: 0 10px !important; border: 1px solid #d6d6d6 !important; border-radius: 3px; background: #fff; color: #333 !important; font-size: 14px; font-weight: 500; text-decoration: none !important; } /* Hover */ .hl-size-filter li a:hover { border-color: #a9164f !important; color: #a9164f !important; } /* Selected */ .hl-size-filter li.active a, .hl-size-filter li.selected a { background: #a9164f !important; border-color: #a9164f !important; color: #fff !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-9315022 *//* ========================================================== HONEYSUCKLE & LACE MOBILE FILTER DRAWER DESKTOP SAFE VERSION ========================================================== */ /* ========================================================== DESKTOP / TABLET LEAVE ELEMENTOR LAYOUT ALONE ========================================================== */ @media (min-width: 768px) { /* Mobile opener not needed on desktop */ .hl-filter-open { display: none !important; } /* Mobile drawer heading not needed on desktop */ .hl-filter-mobile-header { display: none !important; } /* Overlay never appears on desktop */ .hl-filter-overlay { display: none !important; } } /* ========================================================== MOBILE ONLY ========================================================== */ @media (max-width: 767px) { /* ====================================================== FILTER BAR CONTAINER Class: hl-filter-bar ====================================================== */ .hl-filter-bar { width: 100% !important; display: block !important; padding: 0 !important; margin: 0 0 25px 0 !important; background: transparent !important; border: 0 !important; min-height: 0 !important; box-shadow: none !important; } /* ====================================================== FILTER OPEN BUTTON WIDGET Class: hl-filter-open ====================================================== */ .hl-filter-open { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Elementor widget wrapper */ .hl-filter-open .elementor-widget-container { width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } /* Actual Elementor button */ .hl-filter-open .elementor-button { display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; width: 100% !important; min-height: 50px !important; padding: 14px 20px !important; margin: 0 !important; background: #a9164f !important; color: #ffffff !important; border: 1px solid #a9164f !important; border-radius: 2px !important; box-shadow: none !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: 1px !important; text-transform: uppercase !important; text-decoration: none !important; } /* Filter icon */ .hl-filter-open .elementor-button::before { content: "☰" !important; display: inline-block !important; margin: 0 2px 0 0 !important; color: #ffffff !important; font-size: 16px !important; line-height: 1 !important; } /* Remove previous wrapper icon */ .hl-filter-open::before { display: none !important; content: none !important; } /* Hover */ .hl-filter-open .elementor-button:hover, .hl-filter-open .elementor-button:focus { background: #86113f !important; border-color: #86113f !important; color: #ffffff !important; } /* ====================================================== MAIN OFF-CANVAS DRAWER Class: hl-mobile-filter-drawer ====================================================== */ .hl-mobile-filter-drawer { position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0 !important; width: 88% !important; max-width: 390px !important; height: 100vh !important; height: 100dvh !important; display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important; margin: 0 !important; padding: 0 20px 40px 20px !important; background: #ffffff !important; overflow-y: auto !important; overflow-x: hidden !important; box-sizing: border-box !important; z-index: 999999 !important; transform: translate3d(-105%, 0, 0) !important; visibility: hidden !important; transition: transform 0.35s ease, visibility 0.35s ease !important; box-shadow: 8px 0 35px rgba(0, 0, 0, 0.18) !important; -webkit-overflow-scrolling: touch !important; } /* Elementor container override - MOBILE ONLY */ .hl-mobile-filter-drawer.e-con, .hl-mobile-filter-drawer.e-flex { flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: flex-start !important; } /* Drawer opened */ .hl-mobile-filter-drawer.hl-drawer-open { transform: translate3d(0, 0, 0) !important; visibility: visible !important; } /* ====================================================== FORCE FILTERS TO STACK VERTICALLY ====================================================== */ .hl-mobile-filter-drawer > .elementor-element, .hl-mobile-filter-drawer > .elementor-widget, .hl-mobile-filter-drawer > .e-con { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; align-self: stretch !important; margin-left: 0 !important; margin-right: 0 !important; clear: both !important; box-sizing: border-box !important; } .hl-mobile-filter-drawer .elementor-widget { width: 100% !important; max-width: 100% !important; margin: 0 0 28px 0 !important; clear: both !important; } .hl-mobile-filter-drawer .elementor-widget-container { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* ====================================================== DRAWER HEADER FILTERS × ====================================================== */ .hl-filter-mobile-header { position: sticky !important; top: 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; width: calc(100% + 40px) !important; min-height: 68px !important; margin: 0 -20px 25px -20px !important; padding: 14px 20px !important; background: #ffffff !important; border-bottom: 1px solid #eeeeee !important; z-index: 100 !important; box-sizing: border-box !important; } /* FILTERS heading */ .hl-filter-title { width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; color: #a9164f !important; font-size: 20px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: 0.3px !important; text-transform: uppercase !important; } /* ====================================================== DRAWER CLOSE X ====================================================== */ .hl-filter-close { display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; min-width: 40px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; color: #222222 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-size: 30px !important; font-weight: 300 !important; line-height: 1 !important; cursor: pointer !important; } .hl-filter-close:hover, .hl-filter-close:focus { background: transparent !important; color: #a9164f !important; } /* ====================================================== FILTER SECTION HEADINGS ====================================================== */ .hl-mobile-filter-drawer h2:not(.hl-filter-title), .hl-mobile-filter-drawer h3:not(.hl-filter-title), .hl-mobile-filter-drawer h4:not(.hl-filter-title), .hl-mobile-filter-drawer h5:not(.hl-filter-title), .hl-mobile-filter-drawer .widget-title { display: block !important; width: 100% !important; margin: 0 0 16px 0 !important; padding: 0 0 12px 0 !important; border-bottom: 1px solid #eeeeee !important; color: #a9164f !important; font-size: 20px !important; font-weight: 500 !important; line-height: 1.3 !important; box-sizing: border-box !important; } /* ====================================================== PRICE FILTER ====================================================== */ .hl-mobile-filter-drawer .price_slider_wrapper { display: block !important; width: 100% !important; max-width: 100% !important; } .hl-mobile-filter-drawer .price_slider { width: 100% !important; margin: 18px 0 22px 0 !important; } .hl-mobile-filter-drawer .price_slider_amount { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; width: 100% !important; margin: 0 !important; text-align: left !important; } .hl-mobile-filter-drawer .price_slider_amount .button { float: none !important; margin: 0 !important; padding: 10px 17px !important; background: #111111 !important; color: #ffffff !important; border: 0 !important; border-radius: 2px !important; font-size: 14px !important; font-weight: 500 !important; } .hl-mobile-filter-drawer .price_slider_amount .price_label { float: none !important; margin: 0 !important; color: #333333 !important; font-size: 14px !important; white-space: nowrap !important; } /* ====================================================== BRAND FILTER Class: hl-brand-filter ====================================================== */ .hl-mobile-filter-drawer .hl-brand-filter { display: block !important; width: 100% !important; max-width: 100% !important; max-height: 320px !important; margin: 0 !important; padding: 0 8px 0 0 !important; overflow-y: auto !important; overflow-x: hidden !important; clear: both !important; scrollbar-width: thin; scrollbar-color: #a9164f #eeeeee; } .hl-mobile-filter-drawer .hl-brand-filter li { list-style: none !important; width: 100% !important; margin: 0 0 12px 0 !important; padding: 0 !important; } .hl-mobile-filter-drawer .hl-brand-filter li a { display: flex !important; align-items: center !important; gap: 8px !important; width: 100% !important; color: #444444 !important; font-size: 14px !important; line-height: 1.4 !important; text-decoration: none !important; } /* Brand scrollbar */ .hl-mobile-filter-drawer .hl-brand-filter::-webkit-scrollbar { width: 6px !important; } .hl-mobile-filter-drawer .hl-brand-filter::-webkit-scrollbar-track { background: #eeeeee !important; border-radius: 20px !important; } .hl-mobile-filter-drawer .hl-brand-filter::-webkit-scrollbar-thumb { background: #a9164f !important; border-radius: 20px !important; } /* ====================================================== CATEGORY FILTER Class: hl-category-filter ====================================================== */ .hl-mobile-filter-drawer .hl-category-filter { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; clear: both !important; } .hl-mobile-filter-drawer .hl-category-filter ul { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .hl-mobile-filter-drawer .hl-category-filter li { display: block !important; width: 100% !important; margin: 0 0 12px 0 !important; padding: 0 !important; list-style: none !important; } /* ====================================================== GENERIC FILTER LISTS ====================================================== */ .hl-mobile-filter-drawer ul { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .hl-mobile-filter-drawer li { max-width: 100% !important; box-sizing: border-box !important; } /* ====================================================== PREVENT HORIZONTAL OVERFLOW ====================================================== */ .hl-mobile-filter-drawer *, .hl-mobile-filter-drawer *::before, .hl-mobile-filter-drawer *::after { box-sizing: border-box !important; max-width: 100%; } /* ====================================================== DARK OVERLAY ====================================================== */ .hl-filter-overlay { position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important; background: rgba(0, 0, 0, 0.48) !important; z-index: 999998 !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.3s ease, visibility 0.3s ease !important; } .hl-filter-overlay.hl-overlay-open { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* ====================================================== LOCK BACKGROUND WHILE OPEN ====================================================== */ body.hl-filter-active { overflow: hidden !important; } }/* End custom CSS */ /* Start custom CSS for woolentor-product-archive-addons, class: .elementor-element-75ac87e *//* ============================================================ HONEYSUCKLE & LACE COMPLETE PRODUCT ARCHIVE / SHOP GRID DESKTOP + TABLET + MOBILE FINAL FIX ============================================================ */ /* ============================================================ GLOBAL WRAPPER / VARIABLES ============================================================ */ .hl-category-products { --hl-burgundy: #ad124d; --hl-burgundy-hover: #86103c; --hl-text: #171717; --hl-muted: #707070; --hl-border: #dddddd; --hl-image-bg: #f6f5f3; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* ============================================================ SHOP TITLE ============================================================ */ .hl-category-products h1, .hl-category-products .page-title, .hl-category-products .woocommerce-products-header__title { margin-top: 0 !important; margin-bottom: 26px !important; color: #171717 !important; line-height: 1.15 !important; } /* ============================================================ RESULT COUNT ============================================================ */ .hl-category-products .woocommerce-result-count { float: left !important; margin: 0 0 30px 0 !important; padding: 0 !important; font-family: "Montserrat", sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 44px !important; color: #333333 !important; } /* ============================================================ SORTING ============================================================ */ .hl-category-products .woocommerce-ordering { float: right !important; margin: 0 0 30px 0 !important; padding: 0 !important; } .hl-category-products .woocommerce-ordering select { display: block !important; min-width: 225px !important; height: 44px !important; margin: 0 !important; padding: 0 42px 0 16px !important; border: 1px solid #bdbdbd !important; border-radius: 2px !important; background-color: #ffffff !important; color: #222222 !important; font-family: "Montserrat", sans-serif !important; font-size: 14px !important; font-weight: 400 !important; box-shadow: none !important; outline: none !important; box-sizing: border-box !important; cursor: pointer !important; } /* ============================================================ CLEAR FLOATS ============================================================ */ .hl-category-products::after { content: ""; display: block !important; clear: both !important; } /* ============================================================ DESKTOP PRODUCT GRID ============================================================ */ .woocommerce .hl-category-products ul.products, .woocommerce-page .hl-category-products ul.products, .hl-category-products ul.products { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 30px !important; row-gap: 52px !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; align-items: stretch !important; box-sizing: border-box !important; } /* Remove WooCommerce clearfix */ .hl-category-products ul.products::before, .hl-category-products ul.products::after { content: none !important; display: none !important; } /* ============================================================ PRODUCT CARD IMPORTANT: REMOVE WOOCOMMERCE DEFAULT COLUMN WIDTH ============================================================ */ .woocommerce .hl-category-products ul.products li.product, .woocommerce-page .hl-category-products ul.products li.product, .hl-category-products ul.products li.product { float: none !important; clear: none !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-self: stretch !important; position: relative !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 100% !important; flex: none !important; flex-basis: auto !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; box-sizing: border-box !important; } /* ============================================================ FORCE CARD CHILDREN TO FULL WIDTH ============================================================ */ .hl-category-products ul.products li.product > * { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* ============================================================ POSSIBLE WOOLENTOR / ELEMENTOR PRODUCT WRAPPERS ============================================================ */ .hl-category-products ul.products li.product > div, .hl-category-products ul.products li.product .product-inner, .hl-category-products ul.products li.product .product-item, .hl-category-products ul.products li.product .ht-product, .hl-category-products ul.products li.product .ht-product-inner, .hl-category-products ul.products li.product .woolentor-product, .hl-category-products ul.products li.product .woolentor-product-item, .hl-category-products ul.products li.product .product-content { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* ============================================================ PRODUCT LINK ============================================================ */ .hl-category-products ul.products li.product a.woocommerce-LoopProduct-link, .hl-category-products ul.products li.product a.woocommerce-loop-product__link { display: flex !important; flex-direction: column !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; color: inherit !important; text-decoration: none !important; box-sizing: border-box !important; } /* ============================================================ PRODUCT IMAGE WRAPPERS ============================================================ */ .hl-category-products ul.products li.product figure, .hl-category-products ul.products li.product .product-image, .hl-category-products ul.products li.product .product-thumb, .hl-category-products ul.products li.product .product-thumbnail, .hl-category-products ul.products li.product .ht-product-image, .hl-category-products ul.products li.product .wl-product-image, .hl-category-products ul.products li.product .woolentor-product-image { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ============================================================ PRODUCT IMAGE ============================================================ */ .hl-category-products ul.products li.product img, .hl-category-products ul.products li.product img.attachment-woocommerce_thumbnail, .hl-category-products ul.products li.product img.wp-post-image, .hl-category-products ul.products li.product a.woocommerce-LoopProduct-link img, .hl-category-products ul.products li.product a.woocommerce-loop-product__link img { display: block !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; aspect-ratio: 4 / 5 !important; height: auto !important; min-height: 0 !important; max-height: none !important; object-fit: cover !important; object-position: center top !important; margin: 0 0 18px 0 !important; padding: 0 !important; background: var(--hl-image-bg) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; image-rendering: auto !important; box-sizing: border-box !important; transition: opacity 0.30s ease, transform 0.30s ease !important; } /* Image hover */ .hl-category-products ul.products li.product:hover img { opacity: 0.96 !important; } /* ============================================================ PRODUCT TITLE ============================================================ */ .hl-category-products ul.products li.product .woocommerce-loop-product__title { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; width: 100% !important; min-height: 48px !important; max-height: 48px !important; margin: 0 0 8px 0 !important; padding: 0 !important; color: var(--hl-text) !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.5 !important; text-transform: none !important; box-sizing: border-box !important; } .hl-category-products ul.products li.product a:hover .woocommerce-loop-product__title { color: var(--hl-burgundy) !important; } /* ============================================================ BRAND ============================================================ */ .hl-category-products .hl-wl-product-brand, .hl-category-products .hl-product-brand { display: block !important; width: 100% !important; min-height: 19px !important; margin: 0 0 9px 0 !important; padding: 0 !important; font-family: "Montserrat", sans-serif !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: 0.6px !important; text-transform: uppercase !important; color: #171717 !important; box-sizing: border-box !important; } /* ============================================================ PRODUCT META ============================================================ */ .hl-category-products .hl-product-meta { display: block !important; width: 100% !important; min-height: 17px !important; margin: 0 0 8px 0 !important; padding: 0 !important; font-family: "Montserrat", sans-serif !important; font-size: 11px !important; font-weight: 500 !important; line-height: 1.4 !important; letter-spacing: 0.7px !important; text-transform: uppercase !important; color: var(--hl-muted) !important; box-sizing: border-box !important; } .hl-category-products .hl-product-category { color: var(--hl-muted) !important; } .hl-category-products .hl-meta-divider { margin-left: 4px !important; margin-right: 4px !important; color: #aaaaaa !important; } /* ============================================================ PRICE ============================================================ */ .hl-category-products ul.products li.product .price { display: block !important; width: 100% !important; min-height: 28px !important; margin: 0 0 17px 0 !important; padding: 0 !important; color: #222222 !important; font-size: 17px !important; font-weight: 400 !important; line-height: 1.5 !important; box-sizing: border-box !important; } .hl-category-products ul.products li.product .price del { margin-right: 5px !important; color: #888888 !important; opacity: 0.65 !important; } .hl-category-products ul.products li.product .price ins { color: var(--hl-burgundy) !important; font-weight: 500 !important; text-decoration: none !important; } /* ============================================================ BUTTON ============================================================ */ .hl-category-products ul.products li.product .button, .hl-category-products ul.products li.product a.button, .hl-category-products ul.products li.product a.add_to_cart_button, .hl-category-products ul.products li.product a.product_type_variable { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; min-height: 48px !important; margin: auto 0 0 0 !important; padding: 12px 12px !important; border: 1px solid var(--hl-burgundy) !important; border-radius: 0 !important; background: var(--hl-burgundy) !important; color: #ffffff !important; font-family: "Montserrat", sans-serif !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.25 !important; text-align: center !important; text-decoration: none !important; white-space: normal !important; box-shadow: none !important; box-sizing: border-box !important; transition: background-color 0.25s ease, border-color 0.25s ease !important; } .hl-category-products ul.products li.product .button:hover, .hl-category-products ul.products li.product a.button:hover, .hl-category-products ul.products li.product a.add_to_cart_button:hover, .hl-category-products ul.products li.product a.product_type_variable:hover { background: var(--hl-burgundy-hover) !important; border-color: var(--hl-burgundy-hover) !important; color: #ffffff !important; } /* ============================================================ SALE BADGE ============================================================ */ .hl-category-products ul.products li.product .onsale { position: absolute !important; top: 10px !important; left: 10px !important; right: auto !important; z-index: 10 !important; min-width: auto !important; min-height: auto !important; margin: 0 !important; padding: 6px 9px !important; border-radius: 0 !important; background: var(--hl-burgundy) !important; color: #ffffff !important; font-family: "Montserrat", sans-serif !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: 0.6px !important; text-transform: uppercase !important; } /* ============================================================ PAGINATION ============================================================ */ .hl-category-products nav.woocommerce-pagination { margin-top: 55px !important; text-align: center !important; } .hl-category-products nav.woocommerce-pagination ul { display: flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } .hl-category-products nav.woocommerce-pagination ul li { margin: 0 !important; border: 0 !important; } .hl-category-products nav.woocommerce-pagination ul li a, .hl-category-products nav.woocommerce-pagination ul li span { display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; padding: 0 !important; border: 1px solid #dddddd !important; background: #ffffff !important; color: #222222 !important; font-family: "Montserrat", sans-serif !important; font-size: 13px !important; line-height: 1 !important; box-sizing: border-box !important; } .hl-category-products nav.woocommerce-pagination ul li span.current { background: var(--hl-burgundy) !important; border-color: var(--hl-burgundy) !important; color: #ffffff !important; } /* ============================================================ TABLET ============================================================ */ @media only screen and (max-width: 1024px) { .woocommerce .hl-category-products ul.products, .woocommerce-page .hl-category-products ul.products, .hl-category-products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 22px !important; row-gap: 42px !important; } .woocommerce .hl-category-products ul.products li.product, .woocommerce-page .hl-category-products ul.products li.product, .hl-category-products ul.products li.product { width: 100% !important; max-width: none !important; margin: 0 !important; float: none !important; flex-basis: auto !important; } .hl-category-products ul.products li.product .woocommerce-loop-product__title { min-height: 45px !important; max-height: 45px !important; font-size: 15px !important; } .hl-category-products .hl-wl-product-brand, .hl-category-products .hl-product-brand { font-size: 12px !important; } .hl-category-products ul.products li.product .price { font-size: 16px !important; } } /* ============================================================ MOBILE IMPROVED TWO-COLUMN PRODUCT GRID ============================================================ */ @media only screen and (max-width: 767px) { /* ======================================================== SHOP WRAPPER ======================================================== */ .hl-category-products { width: 100% !important; max-width: 100% !important; overflow: visible !important; box-sizing: border-box !important; } /* ======================================================== PAGE TITLE ======================================================== */ .hl-category-products h1, .hl-category-products .page-title, .hl-category-products .woocommerce-products-header__title { margin: 0 0 12px 0 !important; font-size: 27px !important; line-height: 1.15 !important; } /* ======================================================== RESULT COUNT ======================================================== */ .hl-category-products .woocommerce-result-count { float: none !important; display: block !important; width: 100% !important; margin: 0 0 14px 0 !important; padding: 0 !important; font-size: 12px !important; line-height: 1.5 !important; } /* ======================================================== SORTING ======================================================== */ .hl-category-products .woocommerce-ordering { float: none !important; display: block !important; width: 100% !important; margin: 0 0 26px 0 !important; padding: 0 !important; } .hl-category-products .woocommerce-ordering select { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 44px !important; padding: 0 38px 0 14px !important; font-size: 12px !important; box-sizing: border-box !important; } /* ======================================================== MOBILE GRID ======================================================== */ body.woocommerce .hl-category-products ul.products, .woocommerce .hl-category-products ul.products, .woocommerce-page .hl-category-products ul.products, .hl-category-products ul.products, .hl-category-products ul.products.columns-2, .hl-category-products ul.products.columns-3, .hl-category-products ul.products.columns-4, .hl-category-products ul.products.columns-5 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 14px !important; row-gap: 32px !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; align-items: stretch !important; box-sizing: border-box !important; } /* ======================================================== CRITICAL MOBILE CARD WIDTH FIX Overrides WooCommerce 22.05% / 25% widths ======================================================== */ body.woocommerce .hl-category-products ul.products li.product, .woocommerce .hl-category-products ul.products li.product, .woocommerce-page .hl-category-products ul.products li.product, .woocommerce .hl-category-products ul.products.columns-2 li.product, .woocommerce .hl-category-products ul.products.columns-3 li.product, .woocommerce .hl-category-products ul.products.columns-4 li.product, .woocommerce-page .hl-category-products ul.products.columns-2 li.product, .woocommerce-page .hl-category-products ul.products.columns-3 li.product, .woocommerce-page .hl-category-products ul.products.columns-4 li.product, .hl-category-products ul.products li.product { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-self: stretch !important; float: none !important; clear: none !important; width: 100% !important; min-width: 0 !important; max-width: none !important; flex: none !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ======================================================== REMOVE COLUMN nth-child WIDTHS ======================================================== */ .hl-category-products ul.products.columns-2 li.product:nth-child(n), .hl-category-products ul.products.columns-3 li.product:nth-child(n), .hl-category-products ul.products.columns-4 li.product:nth-child(n), .hl-category-products ul.products.columns-5 li.product:nth-child(n) { float: none !important; clear: none !important; width: 100% !important; min-width: 0 !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* ======================================================== FORCE PRODUCT CONTENT FULL WIDTH ======================================================== */ .hl-category-products ul.products li.product > *, .hl-category-products ul.products li.product > div, .hl-category-products ul.products li.product .product-inner, .hl-category-products ul.products li.product .product-item, .hl-category-products ul.products li.product .ht-product, .hl-category-products ul.products li.product .ht-product-inner, .hl-category-products ul.products li.product .woolentor-product, .hl-category-products ul.products li.product .woolentor-product-item, .hl-category-products ul.products li.product .product-content { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } /* ======================================================== PRODUCT LINK ======================================================== */ .hl-category-products ul.products li.product > a, .hl-category-products ul.products li.product a.woocommerce-LoopProduct-link, .hl-category-products ul.products li.product a.woocommerce-loop-product__link { display: flex !important; flex-direction: column !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ======================================================== IMAGE WRAPPERS ======================================================== */ .hl-category-products ul.products li.product figure, .hl-category-products ul.products li.product .product-image, .hl-category-products ul.products li.product .product-thumb, .hl-category-products ul.products li.product .product-thumbnail, .hl-category-products ul.products li.product .ht-product-image, .hl-category-products ul.products li.product .wl-product-image, .hl-category-products ul.products li.product .woolentor-product-image { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ======================================================== MOBILE PRODUCT IMAGE ======================================================== */ .hl-category-products ul.products li.product img, .hl-category-products ul.products li.product img.attachment-woocommerce_thumbnail, .hl-category-products ul.products li.product img.wp-post-image, .hl-category-products ul.products li.product a img { display: block !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: 4 / 5 !important; object-fit: cover !important; object-position: center top !important; margin: 0 0 11px 0 !important; padding: 0 !important; background: var(--hl-image-bg) !important; box-sizing: border-box !important; } /* ======================================================== MOBILE PRODUCT TITLE ======================================================== */ .hl-category-products ul.products li.product .woocommerce-loop-product__title { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; width: 100% !important; min-height: 40px !important; max-height: 40px !important; margin: 0 0 6px 0 !important; padding: 0 !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.5 !important; color: #171717 !important; box-sizing: border-box !important; } /* ======================================================== MOBILE BRAND ======================================================== */ .hl-category-products ul.products li.product .hl-wl-product-brand, .hl-category-products ul.products li.product .hl-product-brand { display: block !important; width: 100% !important; min-height: 15px !important; margin: 0 0 7px 0 !important; padding: 0 !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: 0.35px !important; text-transform: uppercase !important; box-sizing: border-box !important; } /* ======================================================== MOBILE META ======================================================== */ .hl-category-products ul.products li.product .hl-product-meta { display: block !important; width: 100% !important; min-height: 14px !important; margin: 0 0 6px 0 !important; padding: 0 !important; font-size: 9px !important; line-height: 1.4 !important; letter-spacing: 0.3px !important; } /* ======================================================== MOBILE PRICE ======================================================== */ .hl-category-products ul.products li.product .price { display: block !important; width: 100% !important; min-height: 24px !important; margin: 0 0 11px 0 !important; padding: 0 !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.4 !important; color: #222222 !important; box-sizing: border-box !important; } /* ======================================================== MOBILE BUTTON ======================================================== */ .hl-category-products ul.products li.product .button, .hl-category-products ul.products li.product a.button, .hl-category-products ul.products li.product a.add_to_cart_button, .hl-category-products ul.products li.product a.product_type_variable { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; min-height: 42px !important; margin: auto 0 0 0 !important; padding: 9px 6px !important; background: var(--hl-burgundy) !important; border: 1px solid var(--hl-burgundy) !important; border-radius: 0 !important; color: #ffffff !important; font-family: "Montserrat", sans-serif !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1.2 !important; text-align: center !important; white-space: normal !important; box-sizing: border-box !important; } .hl-category-products ul.products li.product .button:hover, .hl-category-products ul.products li.product a.button:hover { background: var(--hl-burgundy-hover) !important; border-color: var(--hl-burgundy-hover) !important; } /* ======================================================== SALE BADGE ======================================================== */ .hl-category-products ul.products li.product .onsale { top: 6px !important; left: 6px !important; padding: 4px 6px !important; font-size: 8px !important; } /* ======================================================== PAGINATION ======================================================== */ .hl-category-products nav.woocommerce-pagination { margin-top: 40px !important; } .hl-category-products nav.woocommerce-pagination ul li a, .hl-category-products nav.woocommerce-pagination ul li span { width: 34px !important; height: 34px !important; font-size: 11px !important; } } /* ============================================================ EXTRA SMALL MOBILE KEEP TWO COLUMNS ============================================================ */ @media only screen and (max-width: 480px) { body.woocommerce .hl-category-products ul.products, .woocommerce .hl-category-products ul.products, .woocommerce-page .hl-category-products ul.products, .hl-category-products ul.products { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 12px !important; row-gap: 28px !important; } body.woocommerce .hl-category-products ul.products li.product, .woocommerce .hl-category-products ul.products li.product, .woocommerce-page .hl-category-products ul.products li.product, .hl-category-products ul.products li.product { width: 100% !important; min-width: 0 !important; max-width: none !important; float: none !important; margin: 0 !important; flex: none !important; flex-basis: auto !important; } .hl-category-products ul.products li.product img, .hl-category-products ul.products li.product img.attachment-woocommerce_thumbnail, .hl-category-products ul.products li.product img.wp-post-image, .hl-category-products ul.products li.product a img { display: block !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; aspect-ratio: 4 / 5 !important; height: auto !important; object-fit: cover !important; object-position: center top !important; } .hl-category-products ul.products li.product .woocommerce-loop-product__title { min-height: 38px !important; max-height: 38px !important; font-size: 12px !important; } .hl-category-products .hl-wl-product-brand, .hl-category-products .hl-product-brand { font-size: 9px !important; } .hl-category-products ul.products li.product .price { font-size: 13px !important; } .hl-category-products ul.products li.product .button, .hl-category-products ul.products li.product a.button, .hl-category-products ul.products li.product a.product_type_variable { width: 100% !important; min-width: 100% !important; max-width: 100% !important; min-height: 40px !important; padding: 8px 4px !important; font-size: 9px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-5605d5f *//* ========================================== H&L MOBILE FILTER BAR DESIGN ========================================== */ @media (max-width: 767px) { /* OUTER FILTER BAR CONTAINER */ .hl-filter-bar { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; padding: 0 !important; margin: 0 0 24px 0 !important; background: transparent !important; border: 0 !important; min-height: 0 !important; gap: 0 !important; } /* Make the Elementor button widget full width */ .hl-filter-bar > .elementor-widget-button, .hl-filter-bar .elementor-widget-button { width: 100% !important; max-width: 100% !important; margin: 0 !important; } .hl-filter-bar .elementor-widget-container { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } /* BUTTON WIDGET */ .hl-filter-open { width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } /* ACTUAL ELEMENTOR BUTTON */ .hl-filter-open .elementor-button { display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; width: 100% !important; min-height: 48px !important; padding: 13px 20px !important; margin: 0 !important; background: #a9164f !important; color: #ffffff !important; border: 1px solid #a9164f !important; border-radius: 2px !important; box-shadow: none !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: 0.8px !important; text-transform: uppercase !important; text-decoration: none !important; } /* Add icon before FILTER text */ .hl-filter-open .elementor-button::before { content: "☰" !important; display: inline-block !important; color: #ffffff !important; font-size: 16px !important; line-height: 1 !important; margin-right: 2px !important; } /* Remove old icon from the widget wrapper */ .hl-filter-open::before { content: none !important; display: none !important; } /* Remove any inherited background from parent elements */ .hl-filter-bar, .hl-filter-bar .e-con, .hl-filter-bar .elementor-element { box-shadow: none !important; } /* Hover */ .hl-filter-open .elementor-button:hover, .hl-filter-open .elementor-button:focus { background: #86113f !important; border-color: #86113f !important; color: #ffffff !important; } }/* End custom CSS */