.elementor-386065 .elementor-element.elementor-element-969e863{--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:flex-start;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-386065 .elementor-element.elementor-element-0ecbe63{--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:flex-start;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-386065 .elementor-element.elementor-element-79678b3{--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:flex-start;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;}.elementor-386065 .elementor-element.elementor-element-43eb9f4 .woocommerce-breadcrumb{text-align:start;}.elementor-386065 .elementor-element.elementor-element-835a2a7{--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:flex-start;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Lato;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );color:var( --e-global-color-primary );}.elementor-386065 .elementor-element.elementor-element-a3f322a{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 22px) 0px;padding:0px 0px 0px 0px;}.elementor-386065 .elementor-element.elementor-element-a3f322a .elementor-heading-title{font-family:"Hanken Grotesk", Lato;font-size:12px;font-weight:900;text-transform:uppercase;line-height:1em;letter-spacing:0.24em;color:#D28799;}.elementor-386065 .elementor-element.elementor-element-2f989b3{--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:space-between;--align-items:flex-end;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-386065 .elementor-element.elementor-element-7da1e44{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-386065 .elementor-element.elementor-element-7da1e44 .elementor-heading-title{font-family:"Cormorant Garamond", Lato;font-size:86px;font-weight:500;text-transform:none;line-height:0.94em;letter-spacing:-0.052em;color:#211D1E;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Lato;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-386065 .elementor-element.elementor-element-b0b1686{margin:10px 0px calc(var(--kit-widget-spacing, 0px) + 30px) 0px;padding:0px 0px 0px 0px;font-family:"Hanken Grotesk", Lato;font-size:18px;font-weight:400;line-height:1.68em;color:#665F57;}.elementor-386065 .elementor-element.elementor-element-32adecd{--display:flex;--min-height:64px;--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:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-386065 .elementor-element.elementor-element-9bfd74a{--display:flex;--min-height:64px;--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:center;--gap:0px 8px;--row-gap:0px;--column-gap:8px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Lato;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button{background-color:#211D1E;fill:#FFFFFF;color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#211D1E;border-radius:0px 0px 0px 0px;}.elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button-content-wrapper{flex-direction:row;}.elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button .elementor-button-content-wrapper{gap:10px;}.elementor-386065 .elementor-element.elementor-element-88290ab{--display:flex;--min-height:42px;--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:center;--gap:0px 4px;--row-gap:0px;--column-gap:4px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-button{background-color:#211D1E;fill:#FFFFFF;color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#211D1E;border-radius:0px 0px 0px 0px;}.elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button{background-color:#211D1E;fill:#FFFFFF;color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#211D1E;border-radius:0px 0px 0px 0px;}.elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button{background-color:#211D1E;fill:#FFFFFF;color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#211D1E;border-radius:0px 0px 0px 0px;}.elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button{background-color:#211D1E;fill:#FFFFFF;color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#211D1E;border-radius:0px 0px 0px 0px;}.elementor-386065 .elementor-element.elementor-element-a8d0561{--display:flex;--min-height:42px;--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:center;--gap:0px 4px;--row-gap:0px;--column-gap:4px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-386065 .elementor-element.elementor-element-7dc9bb7{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 22px) 0px;padding:0px 0px 0px 0px;text-align:end;}.elementor-386065 .elementor-element.elementor-element-7dc9bb7 .elementor-heading-title{font-family:"Hanken Grotesk", Lato;font-size:12px;font-weight:900;text-transform:uppercase;line-height:1em;letter-spacing:0.24em;color:#D28799;}.elementor-386065 .elementor-element.elementor-element-66cffd1{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 22px) 0px;padding:0px 0px 0px 0px;text-align:end;}.elementor-386065 .elementor-element.elementor-element-66cffd1 .elementor-heading-title{font-family:"Hanken Grotesk", Lato;font-size:12px;font-weight:900;text-transform:uppercase;line-height:1em;letter-spacing:0.24em;color:#D28799;}.elementor-386065 .elementor-element.elementor-element-3702158{--display:flex;--min-height:64px;--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:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-386065 .elementor-element.elementor-element-8308432{--display:flex;--min-height:64px;--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:center;--gap:0px 8px;--row-gap:0px;--column-gap:8px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-386065 .elementor-element.elementor-element-32d465a{--display:flex;--min-height:64px;--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:center;--gap:0px 8px;--row-gap:0px;--column-gap:8px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-386065 .elementor-element.elementor-element-4aa0f02{--display:flex;--min-height:64px;--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:center;--gap:0px 8px;--row-gap:0px;--column-gap:8px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-386065 .elementor-element.elementor-element-c7b66e3{--display:flex;--min-height:64px;--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:center;--gap:0px 8px;--row-gap:0px;--column-gap:8px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-386065 .elementor-element.elementor-element-a7d405d{--display:flex;--min-height:64px;--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:center;--gap:0px 8px;--row-gap:0px;--column-gap:8px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-386065 .elementor-element.elementor-element-568d48d{--display:flex;--min-height:64px;--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:center;--gap:0px 8px;--row-gap:0px;--column-gap:8px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-386065 .elementor-element.elementor-element-8367152{--display:flex;--min-height:64px;--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:center;--gap:0px 8px;--row-gap:0px;--column-gap:8px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Lato;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Lato;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Lato;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-386065 .elementor-element.elementor-element-9b3f52c{--grid-columns:3;}.elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-loop-container{grid-auto-rows:1fr;}.elementor-386065 .elementor-element.elementor-element-9b3f52c .e-loop-item > .elementor-section, .elementor-386065 .elementor-element.elementor-element-9b3f52c .e-loop-item > .elementor-section > .elementor-container, .elementor-386065 .elementor-element.elementor-element-9b3f52c .e-loop-item > .e-con, .elementor-386065 .elementor-element.elementor-element-9b3f52c .e-loop-item .elementor-section-wrap > .e-con{height:100%;}.elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination{text-align:center;}body:not(.rtl) .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 10px/2 );}body:not(.rtl) .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 10px/2 );}body.rtl .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 10px/2 );}body.rtl .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 10px/2 );}.elementor-386065 .elementor-element.elementor-element-f120ba8{--display:flex;--min-height:64px;--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:center;--gap:0px 8px;--row-gap:0px;--column-gap:8px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-386065 .elementor-element.elementor-element-4701645{--display:flex;}.elementor-386065 .elementor-element.elementor-element-9275e67{--display:flex;}.elementor-386065 .elementor-element.elementor-element-32be7d6{--display:flex;}@media(min-width:768px){.elementor-386065 .elementor-element.elementor-element-9bfd74a{--width:1480px;}.elementor-386065 .elementor-element.elementor-element-88290ab{--width:100%;}.elementor-386065 .elementor-element.elementor-element-a8d0561{--width:100%;}.elementor-386065 .elementor-element.elementor-element-8308432{--width:1480px;}.elementor-386065 .elementor-element.elementor-element-32d465a{--width:1480px;}.elementor-386065 .elementor-element.elementor-element-4aa0f02{--width:1480px;}.elementor-386065 .elementor-element.elementor-element-c7b66e3{--width:1480px;}.elementor-386065 .elementor-element.elementor-element-a7d405d{--width:1480px;}.elementor-386065 .elementor-element.elementor-element-568d48d{--width:1480px;}.elementor-386065 .elementor-element.elementor-element-8367152{--width:1480px;}.elementor-386065 .elementor-element.elementor-element-f120ba8{--width:1480px;}}@media(max-width:991px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-386065 .elementor-element.elementor-element-7da1e44{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 28px) 0px;}.elementor-386065 .elementor-element.elementor-element-7da1e44 .elementor-heading-title{font-size:68px;}.elementor-386065 .elementor-element.elementor-element-b0b1686{margin:28px 0px calc(var(--kit-widget-spacing, 0px) + 28px) 0px;}.elementor-386065 .elementor-element.elementor-element-9b3f52c{--grid-columns:2;}}@media(max-width:767px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-386065 .elementor-element.elementor-element-7da1e44{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 24px) 0px;}.elementor-386065 .elementor-element.elementor-element-7da1e44 .elementor-heading-title{font-size:50px;}.elementor-386065 .elementor-element.elementor-element-b0b1686{margin:26px 0px calc(var(--kit-widget-spacing, 0px) + 26px) 0px;font-size:16px;}.elementor-386065 .elementor-element.elementor-element-9b3f52c{--grid-columns:1;}}/* Start custom CSS for woocommerce-breadcrumb, class: .elementor-element-43eb9f4 *//* ========================================================= LOVELLA — DYNAMIC WOOCOMMERCE CATEGORY BREADCRUMBS Automatically follows the current WooCommerce archive ========================================================= */ .elementor-386065 .elementor-element.elementor-element-43eb9f4 { width: 100%; margin-top: 0; margin-right: 0; margin-bottom: 18px; margin-left: 0; padding: 0; } /* Elementor widget wrapper */ .elementor-386065 .elementor-element.elementor-element-43eb9f4 .elementor-widget-container { width: 100%; margin: 0; padding: 0; } /* WooCommerce breadcrumb output */ .elementor-386065 .elementor-element.elementor-element-43eb9f4 .woocommerce-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; color: var(--lovella-muted); font-family: var(--lovella-sans); font-size: 8px; line-height: 1.4; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; border: 0; background: transparent; } /* Breadcrumb links */ .elementor-386065 .elementor-element.elementor-element-43eb9f4 .woocommerce-breadcrumb a { color: var(--lovella-muted); font-family: inherit; font-size: inherit; line-height: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: none; transition: color 0.2s ease; } /* Clear hover feedback without adding visual noise */ .elementor-386065 .elementor-element.elementor-element-43eb9f4 .woocommerce-breadcrumb a:hover, .elementor-386065 .elementor-element.elementor-element-43eb9f4 .woocommerce-breadcrumb a:focus { color: var(--lovella-accent); text-decoration: none; } /* Current archive text */ .elementor-386065 .elementor-element.elementor-element-43eb9f4 .woocommerce-breadcrumb { opacity: 1; } /* Prevent theme styles from unexpectedly enlarging breadcrumb links */ .elementor-386065 .elementor-element.elementor-element-43eb9f4 .woocommerce-breadcrumb, .elementor-386065 .elementor-element.elementor-element-43eb9f4 .woocommerce-breadcrumb a { vertical-align: middle; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-43eb9f4 { margin-bottom: 18px; } .elementor-386065 .elementor-element.elementor-element-43eb9f4 .woocommerce-breadcrumb { font-size: 8px; letter-spacing: 0.13em; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-43eb9f4 { margin-bottom: 14px; } .elementor-386065 .elementor-element.elementor-element-43eb9f4 .woocommerce-breadcrumb { font-size: 7px; line-height: 1.4; letter-spacing: 0.13em; } }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-a3f322a */.elementor-386065 .elementor-element.elementor-element-a3f322a { width: auto !important; max-width: 100% !important; margin: 24px 0 24px 0 !important; padding: 0 !important; color: #d28799 !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 11px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; } .elementor-386065 .elementor-element.elementor-element-a3f322a .elementor-heading-title { margin: 0 !important; padding: 0 !important; color: inherit !important; font: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; } @media (max-width: 960px) { .elementor-386065 .elementor-element.elementor-element-a3f322a { margin-bottom: 22px !important; letter-spacing: 0.20em !important; } } @media (max-width: 620px) { .elementor-386065 .elementor-element.elementor-element-a3f322a { margin-bottom: 20px !important; font-size: 10px !important; letter-spacing: 0.18em !important; } }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-7da1e44 */.elementor-386065 .elementor-element.elementor-element-7da1e44 { width: 100% !important; max-width: 850px !important; margin: 0 0 38px 0 !important; padding: 0 !important; box-sizing: border-box !important; } .elementor-386065 .elementor-element.elementor-element-7da1e44 .elementor-heading-title { margin: 0 !important; padding: 0 !important; color: #211d1e !important; font-family: "Cormorant Garamond", Georgia, serif !important; font-size: 86px !important; line-height: 0.94 !important; font-weight: 500 !important; letter-spacing: -0.052em !important; text-wrap: balance; } .elementor-386065 .elementor-element.elementor-element-7da1e44 .elementor-heading-title span { color: #d28799 !important; font-weight: 400 !important; font-style: italic !important; } @media (max-width: 960px) { .elementor-386065 .elementor-element.elementor-element-7da1e44 { margin-bottom: 32px !important; } .elementor-386065 .elementor-element.elementor-element-7da1e44 .elementor-heading-title { font-size: 68px !important; line-height: 0.96 !important; } } @media (max-width: 620px) { .elementor-386065 .elementor-element.elementor-element-7da1e44 { margin-bottom: 28px !important; } .elementor-386065 .elementor-element.elementor-element-7da1e44 .elementor-heading-title { font-size: 50px !important; line-height: 0.98 !important; letter-spacing: -0.045em !important; } }/* End custom CSS */ /* Start custom CSS for text-editor, class: .elementor-element-b0b1686 */.elementor-386065 .elementor-element.elementor-element-b0b1686 { width: 100% !important; max-width: 540px !important; margin: 0 !important; padding: 0 !important; color: #655e59 !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 17px !important; line-height: 1.72 !important; font-weight: 400 !important; box-sizing: border-box !important; } .elementor-386065 .elementor-element.elementor-element-b0b1686 p { margin: 0 !important; padding: 0 !important; color: inherit !important; font: inherit !important; } @media (max-width: 960px) { .elementor-386065 .elementor-element.elementor-element-b0b1686 { max-width: 650px !important; font-size: 17px !important; line-height: 1.70 !important; } } @media (max-width: 620px) { .elementor-386065 .elementor-element.elementor-element-b0b1686 { max-width: 100% !important; font-size: 16px !important; line-height: 1.68 !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-2f989b3 *//* ========================================================= LOVELLA — CATEGORY INTRO MAIN ROW FINAL GRID-BASED ALIGNMENT Primary source of truth. Elementor settings are fallback only. Desktop / Tablet: H1 left + description right BOTH anchored to the exact bottom of the same row. Mobile: H1 followed by description. ========================================================= */ /* ========================================================= MAIN ROW — DESKTOP ========================================================= */ .elementor-386065 .elementor-element.elementor-element-2f989b3 { position: relative; width: 100%; max-width: 100%; min-width: 0; height: auto !important; min-height: 0 !important; max-height: none !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); grid-template-rows: auto; column-gap: 70px; row-gap: 0; align-items: end !important; justify-items: stretch; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; background: transparent; border-top: 0; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 0; box-shadow: none; overflow: visible; z-index: auto; /* Neutralise Elementor flex variables */ --min-height: 0px !important; --justify-content: initial !important; --align-items: initial !important; --flex-wrap: initial !important; } /* ========================================================= ELEMENTOR INNER WRAPPER Covers container implementations using .e-con-inner ========================================================= */ .elementor-386065 .elementor-element.elementor-element-2f989b3 > .e-con-inner { position: relative; width: 100%; max-width: 100%; min-width: 0; height: auto !important; min-height: 0 !important; max-height: none !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); grid-template-rows: auto; column-gap: 70px; row-gap: 0; align-items: end !important; justify-items: stretch; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; } /* ========================================================= BOTH DIRECT CHILD WIDGETS Critical: remove all flex-item behaviour inherited from Elementor or previous widget CSS. ========================================================= */ .elementor-386065 .elementor-element.elementor-element-2f989b3 > .elementor-element, .elementor-386065 .elementor-element.elementor-element-2f989b3 > .e-con-inner > .elementor-element { position: relative; min-width: 0; height: auto !important; min-height: 0 !important; max-height: none !important; align-self: end !important; flex-grow: 0 !important; flex-shrink: 1 !important; flex-basis: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* ========================================================= DYNAMIC ARCHIVE TITLE — LEFT COLUMN ========================================================= */ .elementor-386065 .elementor-element.elementor-element-2f989b3 .lva-category-archive-title { grid-column: 1; grid-row: 1; width: 100% !important; max-width: 100% !important; min-width: 0; height: auto !important; min-height: 0 !important; align-self: end !important; justify-self: stretch !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding: 0 !important; } /* Elementor wrapper */ .elementor-386065 .elementor-element.elementor-element-2f989b3 .lva-category-archive-title .elementor-widget-container { width: 100%; max-width: 100%; min-width: 0; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent; border: 0; } /* Actual H1 */ .elementor-386065 .elementor-element.elementor-element-2f989b3 .lva-category-archive-title .elementor-heading-title, .elementor-386065 .elementor-element.elementor-element-2f989b3 .lva-category-archive-title h1 { display: block; width: 100%; max-width: 100%; height: auto !important; min-height: 0 !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; } /* ========================================================= DYNAMIC ARCHIVE DESCRIPTION — RIGHT COLUMN ========================================================= */ .elementor-386065 .elementor-element.elementor-element-2f989b3 .lva-category-archive-description { grid-column: 2; grid-row: 1; width: 100% !important; max-width: 520px !important; min-width: 0; height: auto !important; min-height: 0 !important; align-self: end !important; justify-self: end !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding: 0 !important; } /* Elementor wrapper */ .elementor-386065 .elementor-element.elementor-element-2f989b3 .lva-category-archive-description .elementor-widget-container { width: 100%; max-width: 100%; min-width: 0; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent; border: 0; } /* Text-editor wrappers */ .elementor-386065 .elementor-element.elementor-element-2f989b3 .lva-category-archive-description .elementor-text-editor, .elementor-386065 .elementor-element.elementor-element-2f989b3 .lva-category-archive-description .elementor-widget-container > div { width: 100%; max-width: 100%; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* Paragraphs — absolutely no hidden bottom margin */ .elementor-386065 .elementor-element.elementor-element-2f989b3 .lva-category-archive-description p { margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding: 0 !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-2f989b3 { width: 100%; max-width: 100%; height: auto !important; min-height: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(280px, 440px); grid-template-rows: auto; column-gap: 44px; row-gap: 0; align-items: end !important; justify-items: stretch; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; } .elementor-386065 .elementor-element.elementor-element-2f989b3 > .e-con-inner { width: 100%; max-width: 100%; height: auto !important; min-height: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(280px, 440px); grid-template-rows: auto; column-gap: 44px; row-gap: 0; align-items: end !important; margin: 0; padding: 0; } .elementor-386065 .elementor-element.elementor-element-2f989b3 .lva-category-archive-title { grid-column: 1; grid-row: 1; width: 100% !important; max-width: 100% !important; align-self: end !important; margin: 0 !important; padding: 0 !important; } .elementor-386065 .elementor-element.elementor-element-2f989b3 .lva-category-archive-description { grid-column: 2; grid-row: 1; width: 100% !important; max-width: 440px !important; align-self: end !important; justify-self: end !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-2f989b3 { width: 100%; max-width: 100%; height: auto !important; min-height: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 0; row-gap: 15px; align-items: start !important; justify-items: stretch; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; } .elementor-386065 .elementor-element.elementor-element-2f989b3 > .e-con-inner { width: 100%; max-width: 100%; height: auto !important; min-height: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 0; row-gap: 15px; align-items: start !important; margin: 0; padding: 0; } .elementor-386065 .elementor-element.elementor-element-2f989b3 .lva-category-archive-title { grid-column: 1; grid-row: 1; width: 100% !important; max-width: 100% !important; align-self: start !important; justify-self: stretch !important; margin: 0 !important; padding: 0 !important; } .elementor-386065 .elementor-element.elementor-element-2f989b3 .lva-category-archive-description { grid-column: 1; grid-row: 2; width: 100% !important; max-width: 100% !important; align-self: start !important; justify-self: stretch !important; margin: 0 !important; padding: 0 !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-835a2a7 *//* ========================================================= LOVELLA — CATEGORY INTRO CONTENT Primary source of truth. Structure: 1. SHOP LOVELLA eyebrow 2. Main row containing H1 + dynamic description Elementor settings are fallback only. ========================================================= */ .elementor-386065 .elementor-element.elementor-element-835a2a7 { position: relative; width: 100%; max-width: 100%; min-width: 0; height: auto; min-height: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; column-gap: 0; row-gap: 18px; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; background: transparent; border-top: 0; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 0; box-shadow: none; overflow: visible; z-index: auto; --min-height: 0px; --justify-content: flex-start; --align-items: stretch; --flex-wrap: nowrap; } /* Elementor inner wrapper */ .elementor-386065 .elementor-element.elementor-element-835a2a7 > .e-con-inner { position: relative; width: 100%; max-width: 100%; min-width: 0; height: auto; min-height: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; column-gap: 0; row-gap: 18px; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; } /* Direct children: eyebrow + main row */ .elementor-386065 .elementor-element.elementor-element-835a2a7 > .elementor-element, .elementor-386065 .elementor-element.elementor-element-835a2a7 > .e-con-inner > .elementor-element { min-width: 0; height: auto; min-height: 0; flex-grow: 0; flex-shrink: 1; flex-basis: auto; } /* Eyebrow */ .elementor-386065 .elementor-element.elementor-element-835a2a7 .lva-category-eyebrow { width: auto; max-width: 100%; align-self: flex-start; margin: 0; } /* Main row */ .elementor-386065 .elementor-element.elementor-element-835a2a7 .lva-category-main-row { width: 100%; max-width: 100%; align-self: stretch; margin: 0; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-835a2a7 { width: 100%; max-width: 100%; min-height: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; column-gap: 0; row-gap: 16px; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; } .elementor-386065 .elementor-element.elementor-element-835a2a7 > .e-con-inner { width: 100%; max-width: 100%; min-height: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; column-gap: 0; row-gap: 16px; margin: 0; padding: 0; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-835a2a7 { width: 100%; max-width: 100%; min-height: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; column-gap: 0; row-gap: 14px; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; } .elementor-386065 .elementor-element.elementor-element-835a2a7 > .e-con-inner { width: 100%; max-width: 100%; min-height: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; column-gap: 0; row-gap: 14px; margin: 0; padding: 0; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-79678b3 *//* ========================================================= LOVELLA — CATEGORY INTRO INNER Controls consistent archive content alignment ========================================================= */ .elementor-386065 .elementor-element.elementor-element-79678b3 { position: relative; width: min( var(--lovella-content-width), calc(100% - 80px) ); max-width: var(--lovella-content-width); margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; padding: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; overflow: visible; } /* Remove any Elementor inherited inner spacing */ .elementor-386065 .elementor-element.elementor-element-79678b3 > .e-con-inner { width: 100%; max-width: 100%; margin: 0; padding: 0; gap: 0; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-79678b3 { width: calc(100% - 54px); max-width: 100%; margin-right: auto; margin-left: auto; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-79678b3 { width: calc(100% - 28px); max-width: 520px; margin-right: auto; margin-left: auto; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-0ecbe63 *//* ========================================================= LOVELLA — PRODUCT CATEGORY INTRO OUTER Primary source of truth. Full-bleed archive intro background that breaks out of any theme / Elementor content-width wrapper and reaches the actual viewport edges. Elementor settings are fallback only. ========================================================= */ /* ========================================================= OUTER SECTION — DESKTOP ========================================================= */ .elementor-386065 .elementor-element.elementor-element-0ecbe63 { position: relative; /* * FULL BLEED: * Force this section to span the complete browser viewport, * even if the Product Archive template itself is sitting * inside a boxed theme/content wrapper. */ width: 100vw !important; max-width: 100vw !important; min-width: 100vw; height: auto; min-height: 0; max-height: none; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; column-gap: 0; row-gap: 0; /* * Pull the section outward from the centred parent until * both edges meet the viewport. */ margin-top: 0 !important; margin-right: calc(50% - 50vw) !important; margin-bottom: 0 !important; margin-left: calc(50% - 50vw) !important; padding-top: 34px; padding-right: 0; padding-bottom: 30px; padding-left: 0; background: radial-gradient( circle at 96% -20%, rgba(240, 215, 213, 0.46) 0%, rgba(240, 215, 213, 0) 34% ), var(--lovella-white); border-top: 0; border-right: 0; border-bottom: 1px solid var(--lovella-line); border-left: 0; border-radius: 0; box-shadow: none; overflow: hidden; z-index: auto; box-sizing: border-box; --min-height: 0px; --justify-content: flex-start; --align-items: stretch; --flex-wrap: nowrap; } /* ========================================================= ELEMENTOR INNER WRAPPER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-0ecbe63 > .e-con-inner { position: relative; width: 100%; max-width: 100%; min-width: 0; height: auto; min-height: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; column-gap: 0; row-gap: 0; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; } /* ========================================================= DIRECT CHILD PROTECTION The 02.1 Inner container controls the actual content width. The OUTER section controls only full-bleed background. ========================================================= */ .elementor-386065 .elementor-element.elementor-element-0ecbe63 > .elementor-element, .elementor-386065 .elementor-element.elementor-element-0ecbe63 > .e-con-inner > .elementor-element { position: relative; min-width: 0; flex-shrink: 1; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-0ecbe63 { position: relative; width: 100vw !important; max-width: 100vw !important; min-width: 100vw; height: auto; min-height: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; column-gap: 0; row-gap: 0; margin-top: 0 !important; margin-right: calc(50% - 50vw) !important; margin-bottom: 0 !important; margin-left: calc(50% - 50vw) !important; padding-top: 30px; padding-right: 0; padding-bottom: 27px; padding-left: 0; background: radial-gradient( circle at 98% -15%, rgba(240, 215, 213, 0.44) 0%, rgba(240, 215, 213, 0) 38% ), var(--lovella-white); border-top: 0; border-right: 0; border-bottom: 1px solid var(--lovella-line); border-left: 0; border-radius: 0; box-shadow: none; overflow: hidden; box-sizing: border-box; } .elementor-386065 .elementor-element.elementor-element-0ecbe63 > .e-con-inner { width: 100%; max-width: 100%; min-width: 0; height: auto; min-height: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; column-gap: 0; row-gap: 0; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-0ecbe63 { position: relative; width: 100vw !important; max-width: 100vw !important; min-width: 100vw; height: auto; min-height: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; column-gap: 0; row-gap: 0; margin-top: 0 !important; margin-right: calc(50% - 50vw) !important; margin-bottom: 0 !important; margin-left: calc(50% - 50vw) !important; padding-top: 24px; padding-right: 0; padding-bottom: 22px; padding-left: 0; background: radial-gradient( circle at 105% -10%, rgba(240, 215, 213, 0.42) 0%, rgba(240, 215, 213, 0) 42% ), var(--lovella-white); border-top: 0; border-right: 0; border-bottom: 1px solid var(--lovella-line); border-left: 0; border-radius: 0; box-shadow: none; overflow: hidden; box-sizing: border-box; } .elementor-386065 .elementor-element.elementor-element-0ecbe63 > .e-con-inner { width: 100%; max-width: 100%; min-width: 0; height: auto; min-height: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; column-gap: 0; row-gap: 0; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-36858a3 *//* ========================================================= LOVELLA — SHOP NAVIGATION BROWSE CATEGORIES BUTTON PRIMARY SOURCE OF TRUTH Complete control of: - widget sizing - layout - button alignment - icon alignment - typography - colours - backgrounds - borders - spacing - hover - focus - active state - desktop - tablet - mobile IMPORTANT: The menu-bars icon + BROWSE CATEGORIES text are always centred together as ONE visual group. Elementor settings are fallback only. ========================================================= */ /* ========================================================= 01 — WIDGET ROOT — DESKTOP ========================================================= */ .elementor-386065 .elementor-element.elementor-element-36858a3 { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: center !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #ffffff !important; background-color: transparent !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; text-shadow: none !important; opacity: 1 !important; overflow: visible !important; z-index: auto; box-sizing: border-box !important; } /* ========================================================= 02 — ELEMENTOR WIDGET CONTAINER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-widget-container { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #ffffff !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-align: center !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 03 — BUTTON WRAPPER IMPORTANT: This was previously FLEX-START. It is now explicitly centred. ========================================================= */ .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button-wrapper { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; column-gap: 0 !important; row-gap: 0 !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #ffffff !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-align: center !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 04 — BUTTON — NORMAL STATE ========================================================= */ .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button, .elementor-386065 .elementor-element.elementor-element-36858a3 a.elementor-button, .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button-link { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; column-gap: 0 !important; row-gap: 0 !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 17px !important; padding-bottom: 0 !important; padding-left: 17px !important; color: #ffffff !important; background-color: #211d1e !important; background-image: none !important; background-repeat: no-repeat !important; border-top: 1px solid #211d1e !important; border-right: 1px solid #211d1e !important; border-bottom: 1px solid #211d1e !important; border-left: 1px solid #211d1e !important; border-radius: 0 !important; box-shadow: none !important; outline: none; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; text-shadow: none !important; white-space: nowrap !important; cursor: pointer !important; opacity: 1 !important; transform: none !important; transition: color 0.20s ease, background-color 0.20s ease, border-color 0.20s ease, opacity 0.20s ease !important; overflow: hidden !important; box-sizing: border-box !important; -webkit-appearance: none !important; appearance: none !important; } /* ========================================================= 05 — BUTTON CONTENT WRAPPER ICON + TEXT ARE CENTRED TOGETHER HERE. We use gap instead of Elementor's icon margins. ========================================================= */ .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button-content-wrapper { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 10px !important; column-gap: 10px !important; row-gap: 0 !important; margin-top: 0 !important; margin-right: auto !important; margin-bottom: 0 !important; margin-left: auto !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #ffffff !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-align: center !important; box-sizing: border-box !important; } /* ========================================================= 06 — BUTTON TEXT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button-text { position: relative !important; display: inline-block !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #ffffff !important; background-color: transparent !important; background-image: none !important; border: 0 !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; text-shadow: none !important; white-space: nowrap !important; opacity: 1 !important; } /* ========================================================= 07 — ICON WRAPPER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button-icon { position: relative !important; width: 15px !important; height: 15px !important; min-width: 15px !important; min-height: 15px !important; max-width: 15px !important; max-height: 15px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: 15px !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #ffffff !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; line-height: 1 !important; text-align: center !important; } /* ========================================================= 08 — OVERRIDE ELEMENTOR ICON ALIGNMENT MARGINS Elementor can add margin-right / margin-left to the icon. Those margins are removed completely because our GAP controls the spacing. ========================================================= */ .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button-icon.elementor-align-icon-left, .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-align-icon-left { margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; } .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button-icon.elementor-align-icon-right, .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-align-icon-right { margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; } /* ========================================================= 09 — FONT AWESOME ICON ========================================================= */ .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button-icon i { position: relative !important; width: 15px !important; height: 15px !important; min-width: 15px !important; min-height: 15px !important; max-width: 15px !important; max-height: 15px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; background: transparent !important; border: 0 !important; font-size: 15px !important; line-height: 1 !important; text-align: center !important; } /* ========================================================= 10 — SVG ICON ========================================================= */ .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button-icon svg { position: relative !important; width: 15px !important; height: 15px !important; min-width: 15px !important; min-height: 15px !important; max-width: 15px !important; max-height: 15px !important; display: block !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; fill: currentColor !important; stroke: currentColor !important; background: transparent !important; border: 0 !important; } /* ========================================================= 11 — HOVER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button:hover, .elementor-386065 .elementor-element.elementor-element-36858a3 a.elementor-button:hover, .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button-link:hover { color: #ffffff !important; background-color: #d28799 !important; background-image: none !important; border-top-color: #d28799 !important; border-right-color: #d28799 !important; border-bottom-color: #d28799 !important; border-left-color: #d28799 !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; transform: none !important; text-decoration: none !important; } .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button:hover .elementor-button-content-wrapper, .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button:hover .elementor-button-text, .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button:hover .elementor-button-icon, .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button:hover .elementor-button-icon i, .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button:hover .elementor-button-icon svg { color: #ffffff !important; fill: currentColor !important; stroke: currentColor !important; } /* ========================================================= 12 — FOCUS ========================================================= */ .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button:focus, .elementor-386065 .elementor-element.elementor-element-36858a3 a.elementor-button:focus, .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button-link:focus { color: #ffffff !important; background-color: #d28799 !important; background-image: none !important; border-top-color: #d28799 !important; border-right-color: #d28799 !important; border-bottom-color: #d28799 !important; border-left-color: #d28799 !important; border-radius: 0 !important; box-shadow: none !important; text-decoration: none !important; } .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button:focus .elementor-button-content-wrapper, .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button:focus .elementor-button-text, .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button:focus .elementor-button-icon { color: #ffffff !important; } .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button:focus-visible { outline: 2px solid #d28799 !important; outline-offset: 3px !important; } /* ========================================================= 13 — ACTIVE / CLICK STATE ========================================================= */ .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button:active, .elementor-386065 .elementor-element.elementor-element-36858a3 a.elementor-button:active { color: #ffffff !important; background-color: #a75f70 !important; background-image: none !important; border-top-color: #a75f70 !important; border-right-color: #a75f70 !important; border-bottom-color: #a75f70 !important; border-left-color: #a75f70 !important; box-shadow: none !important; transform: none !important; } /* ========================================================= 14 — VISITED ========================================================= */ .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button:visited, .elementor-386065 .elementor-element.elementor-element-36858a3 a.elementor-button:visited { color: #ffffff !important; } /* ========================================================= 15 — TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-36858a3 { width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; display: block !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: center !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; background-color: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; } .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-widget-container { width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; text-align: center !important; } .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button-wrapper { width: auto !important; max-width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; text-align: center !important; } .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button { width: auto !important; max-width: 100% !important; min-width: 0 !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding-top: 0 !important; padding-right: 15px !important; padding-bottom: 0 !important; padding-left: 15px !important; color: #ffffff !important; background-color: #211d1e !important; background-image: none !important; border-top: 1px solid #211d1e !important; border-right: 1px solid #211d1e !important; border-bottom: 1px solid #211d1e !important; border-left: 1px solid #211d1e !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; white-space: nowrap !important; } .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button-content-wrapper { width: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; column-gap: 9px !important; row-gap: 0 !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; } .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button-text { color: #ffffff !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; } .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button-icon, .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button-icon i, .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button-icon svg { width: 14px !important; height: 14px !important; min-width: 14px !important; min-height: 14px !important; max-width: 14px !important; max-height: 14px !important; flex-basis: 14px !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; font-size: 14px !important; } } /* ========================================================= 16 — MOBILE In the stacked mobile navigation this button becomes FULL WIDTH, while its icon + text remain centred together. ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-36858a3 { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: stretch !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #ffffff !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; overflow: visible !important; box-sizing: border-box !important; } .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-widget-container { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; display: block !important; margin: 0 !important; padding: 0 !important; text-align: center !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button-wrapper { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; text-align: center !important; background: transparent !important; border: 0 !important; } .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; margin: 0 !important; padding-top: 0 !important; padding-right: 14px !important; padding-bottom: 0 !important; padding-left: 14px !important; color: #ffffff !important; background-color: #211d1e !important; background-image: none !important; border-top: 1px solid #211d1e !important; border-right: 1px solid #211d1e !important; border-bottom: 1px solid #211d1e !important; border-left: 1px solid #211d1e !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important; overflow: hidden !important; box-sizing: border-box !important; } .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button-content-wrapper { width: auto !important; max-width: 100% !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 10px !important; column-gap: 10px !important; row-gap: 0 !important; margin-top: 0 !important; margin-right: auto !important; margin-bottom: 0 !important; margin-left: auto !important; padding: 0 !important; color: #ffffff !important; text-align: center !important; background: transparent !important; border: 0 !important; } .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button-text { width: auto !important; display: inline-block !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; white-space: nowrap !important; } .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button-icon { width: 15px !important; height: 15px !important; min-width: 15px !important; min-height: 15px !important; max-width: 15px !important; max-height: 15px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: 15px !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; } .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button-icon i { width: 15px !important; height: 15px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; font-size: 15px !important; line-height: 1 !important; } .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button-icon svg { width: 15px !important; height: 15px !important; display: block !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; fill: currentColor !important; stroke: currentColor !important; } .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button:hover, .elementor-386065 .elementor-element.elementor-element-36858a3 .elementor-button:focus { color: #ffffff !important; background-color: #d28799 !important; border-top-color: #d28799 !important; border-right-color: #d28799 !important; border-bottom-color: #d28799 !important; border-left-color: #d28799 !important; box-shadow: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-3cb1dee *//* ========================================================= LOVELLA — SHOP NAVIGATION LASHES DEPARTMENT LINK Primary source of truth. IMPORTANT: This is intentionally a TEXT NAVIGATION ITEM. It must NEVER inherit the charcoal background styling used by the Browse Categories button. Controls: - dimensions - typography - normal colour - background - spacing - hover - focus - active state - current state - responsive behaviour Elementor settings are fallback only. ========================================================= */ /* ========================================================= 01 — WIDGET ROOT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-3cb1dee { position: relative; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: center !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: left !important; text-transform: uppercase !important; text-decoration: none !important; opacity: 1 !important; overflow: visible !important; z-index: auto; box-sizing: border-box; } /* ========================================================= 02 — ELEMENTOR WIDGET CONTAINER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-widget-container { position: relative; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box; } /* ========================================================= 03 — BUTTON WRAPPER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-button-wrapper { position: relative; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; column-gap: 0 !important; row-gap: 0 !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } /* ========================================================= 04 — BUTTON / LINK — NORMAL STATE ========================================================= */ .elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-button, .elementor-386065 .elementor-element.elementor-element-3cb1dee a.elementor-button, .elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-button-link { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; column-gap: 0 !important; row-gap: 0 !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 16px !important; padding-bottom: 0 !important; padding-left: 16px !important; color: #211d1e !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-color: transparent !important; border-radius: 0 !important; box-shadow: none !important; outline: none; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important; cursor: pointer; opacity: 1 !important; transform: none !important; transition: color 0.20s ease, opacity 0.20s ease !important; overflow: visible !important; box-sizing: border-box; } /* ========================================================= 05 — BUTTON CONTENT WRAPPER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-button-content-wrapper { position: relative; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; column-gap: 0 !important; row-gap: 0 !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* ========================================================= 06 — TEXT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-button-text { position: relative; display: inline-block !important; width: auto !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background: transparent !important; border: 0 !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important; opacity: 1 !important; transition: color 0.20s ease !important; } /* ========================================================= 07 — REMOVE ANY BUTTON PSEUDO BACKGROUNDS ========================================================= */ .elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-button::before { content: none !important; display: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ========================================================= 08 — HOVER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-button:hover, .elementor-386065 .elementor-element.elementor-element-3cb1dee a.elementor-button:hover, .elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-button-link:hover { color: #d28799 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-color: transparent !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; transform: none !important; text-decoration: none !important; } .elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-button:hover .elementor-button-text, .elementor-386065 .elementor-element.elementor-element-3cb1dee a.elementor-button:hover .elementor-button-text { color: #d28799 !important; background: transparent !important; } /* ========================================================= 09 — FOCUS ========================================================= */ .elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-button:focus, .elementor-386065 .elementor-element.elementor-element-3cb1dee a.elementor-button:focus { color: #d28799 !important; background: transparent !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important; text-decoration: none !important; } .elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-button:focus .elementor-button-text { color: #d28799 !important; } .elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-button:focus-visible { outline: 1px solid #d28799 !important; outline-offset: 2px !important; } /* ========================================================= 10 — ACTIVE CLICK STATE ========================================================= */ .elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-button:active, .elementor-386065 .elementor-element.elementor-element-3cb1dee a.elementor-button:active { color: #a75f70 !important; background: transparent !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; } .elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-button:active .elementor-button-text { color: #a75f70 !important; } /* ========================================================= 11 — VISITED STATE Prevent browser/theme visited-link styling. ========================================================= */ .elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-button:visited, .elementor-386065 .elementor-element.elementor-element-3cb1dee a.elementor-button:visited { color: #211d1e !important; background: transparent !important; background-color: transparent !important; border: 0 !important; text-decoration: none !important; } .elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-button:visited .elementor-button-text { color: #211d1e !important; } /* Preserve hover after visited */ .elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-button:visited:hover, .elementor-386065 .elementor-element.elementor-element-3cb1dee a.elementor-button:visited:hover { color: #d28799 !important; background: transparent !important; } .elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-button:visited:hover .elementor-button-text { color: #d28799 !important; } /* ========================================================= 12 — CURRENT DEPARTMENT STATE Later the archive logic can apply either: .is-active or .lva-is-active Normal archives remain charcoal. Current Lashes archive becomes Lovella accent pink. ========================================================= */ .elementor-386065 .elementor-element.elementor-element-3cb1dee.is-active .elementor-button, .elementor-386065 .elementor-element.elementor-element-3cb1dee.lva-is-active .elementor-button, .elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-button.is-active { color: #d28799 !important; background: transparent !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important; } .elementor-386065 .elementor-element.elementor-element-3cb1dee.is-active .elementor-button-text, .elementor-386065 .elementor-element.elementor-element-3cb1dee.lva-is-active .elementor-button-text, .elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-button.is-active .elementor-button-text { color: #d28799 !important; } /* ========================================================= 13 — CURRENT DEPARTMENT UNDERLINE ========================================================= */ .elementor-386065 .elementor-element.elementor-element-3cb1dee.is-active .elementor-button::after, .elementor-386065 .elementor-element.elementor-element-3cb1dee.lva-is-active .elementor-button::after, .elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-button.is-active::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; width: auto; height: 2px; margin: 0; padding: 0; background-color: #d28799; background-image: none; border: 0; border-radius: 0; box-shadow: none; pointer-events: none; } /* ========================================================= 14 — TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-3cb1dee { width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; display: block !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: center !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; overflow: visible !important; } .elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-widget-container { width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-button-wrapper { width: auto !important; max-width: 100% !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } .elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-button, .elementor-386065 .elementor-element.elementor-element-3cb1dee a.elementor-button, .elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-button-link { width: auto !important; max-width: 100% !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding-top: 0 !important; padding-right: 13px !important; padding-bottom: 0 !important; padding-left: 13px !important; color: #211d1e !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important; } .elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-button-text { color: #211d1e !important; background: transparent !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; white-space: nowrap !important; } .elementor-386065 .elementor-element.elementor-element-3cb1dee.is-active .elementor-button::after, .elementor-386065 .elementor-element.elementor-element-3cb1dee.lva-is-active .elementor-button::after, .elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-button.is-active::after { left: 13px; right: 13px; bottom: 0; height: 2px; background-color: #d28799; } } /* ========================================================= 15 — MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-3cb1dee { position: relative; width: auto !important; max-width: none !important; min-width: max-content !important; height: auto !important; min-height: 0 !important; display: block !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: center !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 7px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; overflow: visible !important; } .elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-widget-container { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-button-wrapper { width: auto !important; max-width: none !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } .elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-button, .elementor-386065 .elementor-element.elementor-element-3cb1dee a.elementor-button, .elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-button-link { width: auto !important; max-width: none !important; min-width: max-content !important; height: 39px !important; min-height: 39px !important; max-height: 39px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding-top: 0 !important; padding-right: 11px !important; padding-bottom: 0 !important; padding-left: 11px !important; color: #211d1e !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 7px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important; } .elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-button-text { color: #211d1e !important; background: transparent !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 7px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; white-space: nowrap !important; } .elementor-386065 .elementor-element.elementor-element-3cb1dee.is-active .elementor-button::after, .elementor-386065 .elementor-element.elementor-element-3cb1dee.lva-is-active .elementor-button::after, .elementor-386065 .elementor-element.elementor-element-3cb1dee .elementor-button.is-active::after { left: 11px; right: 11px; bottom: 0; height: 2px; background-color: #d28799; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-35adf19 *//* ========================================================= LOVELLA — SHOP NAVIGATION BROWS DEPARTMENT LINK PRIMARY SOURCE OF TRUTH Complete styling for: - widget root - Elementor wrappers - dimensions - flex behaviour - typography - text colour - backgrounds - borders - spacing - normal state - hover state - focus state - active state - visited state - current department state - responsive tablet behaviour - responsive mobile behaviour Elementor panel settings are fallback only. ========================================================= */ /* ========================================================= 01 — WIDGET ROOT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-35adf19 { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: center !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: left !important; text-transform: uppercase !important; text-decoration: none !important; opacity: 1 !important; overflow: visible !important; z-index: auto; box-sizing: border-box !important; } /* ========================================================= 02 — ELEMENTOR WIDGET CONTAINER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-widget-container { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 03 — BUTTON WRAPPER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button-wrapper { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; column-gap: 0 !important; row-gap: 0 !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 04 — BUTTON / LINK — NORMAL STATE ========================================================= */ .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button, .elementor-386065 .elementor-element.elementor-element-35adf19 a.elementor-button, .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button-link { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; column-gap: 0 !important; row-gap: 0 !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 16px !important; padding-bottom: 0 !important; padding-left: 16px !important; color: #211d1e !important; background: transparent !important; background-color: transparent !important; background-image: none !important; background-repeat: no-repeat !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-color: transparent !important; border-radius: 0 !important; box-shadow: none !important; outline: none; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; text-shadow: none !important; white-space: nowrap !important; cursor: pointer !important; opacity: 1 !important; transform: none !important; transition: color 0.20s ease, background-color 0.20s ease, border-color 0.20s ease, opacity 0.20s ease !important; overflow: visible !important; box-sizing: border-box !important; -webkit-appearance: none !important; appearance: none !important; } /* ========================================================= 05 — BUTTON CONTENT WRAPPER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button-content-wrapper { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; column-gap: 0 !important; row-gap: 0 !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; box-sizing: border-box !important; } /* ========================================================= 06 — BUTTON TEXT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button-text { position: relative !important; display: inline-block !important; width: auto !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; text-shadow: none !important; white-space: nowrap !important; opacity: 1 !important; transition: color 0.20s ease !important; } /* ========================================================= 07 — REMOVE ICON SPACE BROWS HAS NO ICON ========================================================= */ .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button-icon { display: none !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= 08 — REMOVE THEME / ELEMENTOR PSEUDO ELEMENTS ========================================================= */ .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button::before, .elementor-386065 .elementor-element.elementor-element-35adf19 a.elementor-button::before, .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button-link::before { content: none !important; display: none !important; width: 0 !important; height: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Default ::after remains disabled unless active */ .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button::after, .elementor-386065 .elementor-element.elementor-element-35adf19 a.elementor-button::after { content: none; display: none; background: transparent; border: 0; box-shadow: none; } /* ========================================================= 09 — HOVER STATE ========================================================= */ .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button:hover, .elementor-386065 .elementor-element.elementor-element-35adf19 a.elementor-button:hover, .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button-link:hover { color: #d28799 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-color: transparent !important; border-radius: 0 !important; box-shadow: none !important; text-decoration: none !important; opacity: 1 !important; transform: none !important; } .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button:hover .elementor-button-content-wrapper { color: #d28799 !important; } .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button:hover .elementor-button-text { color: #d28799 !important; background-color: transparent !important; text-decoration: none !important; } /* ========================================================= 10 — FOCUS STATE ========================================================= */ .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button:focus, .elementor-386065 .elementor-element.elementor-element-35adf19 a.elementor-button:focus, .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button-link:focus { color: #d28799 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-decoration: none !important; transform: none !important; } .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button:focus .elementor-button-text { color: #d28799 !important; } .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button:focus-visible { outline: 1px solid #d28799 !important; outline-offset: 2px !important; } /* ========================================================= 11 — ACTIVE CLICK STATE ========================================================= */ .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button:active, .elementor-386065 .elementor-element.elementor-element-35adf19 a.elementor-button:active, .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button-link:active { color: #a75f70 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; text-decoration: none !important; } .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button:active .elementor-button-text { color: #a75f70 !important; } /* ========================================================= 12 — VISITED STATE ========================================================= */ .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button:visited, .elementor-386065 .elementor-element.elementor-element-35adf19 a.elementor-button:visited, .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button-link:visited { color: #211d1e !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; text-decoration: none !important; } .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button:visited .elementor-button-text { color: #211d1e !important; } /* Visited + hover */ .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button:visited:hover, .elementor-386065 .elementor-element.elementor-element-35adf19 a.elementor-button:visited:hover { color: #d28799 !important; background: transparent !important; } .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button:visited:hover .elementor-button-text { color: #d28799 !important; } /* ========================================================= 13 — CURRENT BROWS DEPARTMENT STATE Later archive logic can add: .is-active or .lva-is-active This styling is included now so the widget CSS is complete from day one. ========================================================= */ .elementor-386065 .elementor-element.elementor-element-35adf19.is-active .elementor-button, .elementor-386065 .elementor-element.elementor-element-35adf19.lva-is-active .elementor-button, .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button.is-active { color: #d28799 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; text-decoration: none !important; } .elementor-386065 .elementor-element.elementor-element-35adf19.is-active .elementor-button-content-wrapper, .elementor-386065 .elementor-element.elementor-element-35adf19.lva-is-active .elementor-button-content-wrapper, .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button.is-active .elementor-button-content-wrapper { color: #d28799 !important; } .elementor-386065 .elementor-element.elementor-element-35adf19.is-active .elementor-button-text, .elementor-386065 .elementor-element.elementor-element-35adf19.lva-is-active .elementor-button-text, .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button.is-active .elementor-button-text { color: #d28799 !important; } /* ========================================================= 14 — CURRENT DEPARTMENT UNDERLINE ========================================================= */ .elementor-386065 .elementor-element.elementor-element-35adf19.is-active .elementor-button::after, .elementor-386065 .elementor-element.elementor-element-35adf19.lva-is-active .elementor-button::after, .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button.is-active::after { content: "" !important; position: absolute !important; display: block !important; left: 16px !important; right: 16px !important; bottom: 0 !important; width: auto !important; height: 2px !important; margin: 0 !important; padding: 0 !important; background-color: #d28799 !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; pointer-events: none !important; } /* ========================================================= 15 — TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-35adf19 { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: center !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; overflow: visible !important; } .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-widget-container { width: auto !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button-wrapper { width: auto !important; max-width: 100% !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button, .elementor-386065 .elementor-element.elementor-element-35adf19 a.elementor-button, .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button-link { width: auto !important; max-width: 100% !important; min-width: 0 !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding-top: 0 !important; padding-right: 13px !important; padding-bottom: 0 !important; padding-left: 13px !important; color: #211d1e !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important; opacity: 1 !important; } .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button-content-wrapper { color: #211d1e !important; background: transparent !important; } .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button-text { color: #211d1e !important; background: transparent !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; white-space: nowrap !important; } .elementor-386065 .elementor-element.elementor-element-35adf19.is-active .elementor-button::after, .elementor-386065 .elementor-element.elementor-element-35adf19.lva-is-active .elementor-button::after, .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button.is-active::after { left: 13px !important; right: 13px !important; bottom: 0 !important; width: auto !important; height: 2px !important; background-color: #d28799 !important; } } /* ========================================================= 16 — MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-35adf19 { position: relative !important; width: auto !important; max-width: none !important; min-width: max-content !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: center !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 7px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: left !important; text-transform: uppercase !important; overflow: visible !important; } .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-widget-container { width: auto !important; max-width: none !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button-wrapper { width: auto !important; max-width: none !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button, .elementor-386065 .elementor-element.elementor-element-35adf19 a.elementor-button, .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button-link { width: auto !important; max-width: none !important; min-width: max-content !important; height: 39px !important; min-height: 39px !important; max-height: 39px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; margin: 0 !important; padding-top: 0 !important; padding-right: 11px !important; padding-bottom: 0 !important; padding-left: 11px !important; color: #211d1e !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 7px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important; opacity: 1 !important; transform: none !important; } .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button-content-wrapper { color: #211d1e !important; background: transparent !important; } .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button-text { color: #211d1e !important; background: transparent !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 7px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; white-space: nowrap !important; } .elementor-386065 .elementor-element.elementor-element-35adf19.is-active .elementor-button::after, .elementor-386065 .elementor-element.elementor-element-35adf19.lva-is-active .elementor-button::after, .elementor-386065 .elementor-element.elementor-element-35adf19 .elementor-button.is-active::after { left: 11px !important; right: 11px !important; bottom: 0 !important; width: auto !important; height: 2px !important; background-color: #d28799 !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-11ec54d *//* ========================================================= LOVELLA — SHOP NAVIGATION LAMINATION DEPARTMENT LINK PRIMARY SOURCE OF TRUTH Complete styling for: - widget root - Elementor wrappers - dimensions - flex behaviour - typography - text colour - backgrounds - borders - spacing - normal state - hover state - focus state - active state - visited state - current department state - responsive tablet behaviour - responsive mobile behaviour Elementor settings are fallback only. ========================================================= */ /* ========================================================= 01 — WIDGET ROOT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-11ec54d { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: center !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: left !important; text-transform: uppercase !important; text-decoration: none !important; opacity: 1 !important; overflow: visible !important; z-index: auto; box-sizing: border-box !important; } /* ========================================================= 02 — ELEMENTOR WIDGET CONTAINER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-widget-container { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 03 — BUTTON WRAPPER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button-wrapper { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; column-gap: 0 !important; row-gap: 0 !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 04 — BUTTON / LINK — NORMAL ========================================================= */ .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button, .elementor-386065 .elementor-element.elementor-element-11ec54d a.elementor-button, .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button-link { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; column-gap: 0 !important; row-gap: 0 !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 16px !important; padding-bottom: 0 !important; padding-left: 16px !important; color: #211d1e !important; background: transparent !important; background-color: transparent !important; background-image: none !important; background-repeat: no-repeat !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-color: transparent !important; border-radius: 0 !important; box-shadow: none !important; outline: none; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; text-shadow: none !important; white-space: nowrap !important; cursor: pointer !important; opacity: 1 !important; transform: none !important; transition: color 0.20s ease, background-color 0.20s ease, border-color 0.20s ease, opacity 0.20s ease !important; overflow: visible !important; box-sizing: border-box !important; -webkit-appearance: none !important; appearance: none !important; } /* ========================================================= 05 — BUTTON CONTENT WRAPPER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button-content-wrapper { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; column-gap: 0 !important; row-gap: 0 !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; box-sizing: border-box !important; } /* ========================================================= 06 — BUTTON TEXT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button-text { position: relative !important; display: inline-block !important; width: auto !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; text-shadow: none !important; white-space: nowrap !important; opacity: 1 !important; transition: color 0.20s ease !important; } /* ========================================================= 07 — REMOVE ICON SPACE ========================================================= */ .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button-icon { display: none !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; max-width: 0 !important; max-height: 0 !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: 0 !important; margin: 0 !important; padding: 0 !important; color: transparent !important; background: transparent !important; border: 0 !important; } /* ========================================================= 08 — DISABLE THEME PSEUDO ELEMENTS ========================================================= */ .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button::before, .elementor-386065 .elementor-element.elementor-element-11ec54d a.elementor-button::before, .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button-link::before { content: none !important; display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button::after, .elementor-386065 .elementor-element.elementor-element-11ec54d a.elementor-button::after { content: none; display: none; width: 0; height: 0; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; } /* ========================================================= 09 — HOVER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button:hover, .elementor-386065 .elementor-element.elementor-element-11ec54d a.elementor-button:hover, .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button-link:hover { color: #d28799 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-color: transparent !important; border-radius: 0 !important; box-shadow: none !important; text-decoration: none !important; opacity: 1 !important; transform: none !important; } .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button:hover .elementor-button-content-wrapper { color: #d28799 !important; background: transparent !important; } .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button:hover .elementor-button-text { color: #d28799 !important; background: transparent !important; text-decoration: none !important; } /* ========================================================= 10 — FOCUS ========================================================= */ .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button:focus, .elementor-386065 .elementor-element.elementor-element-11ec54d a.elementor-button:focus, .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button-link:focus { color: #d28799 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-decoration: none !important; transform: none !important; } .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button:focus .elementor-button-content-wrapper, .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button:focus .elementor-button-text { color: #d28799 !important; } .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button:focus-visible { outline: 1px solid #d28799 !important; outline-offset: 2px !important; } /* ========================================================= 11 — ACTIVE / CLICK STATE ========================================================= */ .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button:active, .elementor-386065 .elementor-element.elementor-element-11ec54d a.elementor-button:active, .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button-link:active { color: #a75f70 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; text-decoration: none !important; } .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button:active .elementor-button-content-wrapper, .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button:active .elementor-button-text { color: #a75f70 !important; } /* ========================================================= 12 — VISITED STATE ========================================================= */ .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button:visited, .elementor-386065 .elementor-element.elementor-element-11ec54d a.elementor-button:visited, .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button-link:visited { color: #211d1e !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; text-decoration: none !important; } .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button:visited .elementor-button-content-wrapper, .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button:visited .elementor-button-text { color: #211d1e !important; } /* Restore hover after visited */ .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button:visited:hover, .elementor-386065 .elementor-element.elementor-element-11ec54d a.elementor-button:visited:hover { color: #d28799 !important; background: transparent !important; } .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button:visited:hover .elementor-button-content-wrapper, .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button:visited:hover .elementor-button-text { color: #d28799 !important; } /* ========================================================= 13 — CURRENT LAMINATION DEPARTMENT STATE Later the archive logic can add: .is-active or .lva-is-active ========================================================= */ .elementor-386065 .elementor-element.elementor-element-11ec54d.is-active .elementor-button, .elementor-386065 .elementor-element.elementor-element-11ec54d.lva-is-active .elementor-button, .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button.is-active { color: #d28799 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; text-decoration: none !important; } .elementor-386065 .elementor-element.elementor-element-11ec54d.is-active .elementor-button-content-wrapper, .elementor-386065 .elementor-element.elementor-element-11ec54d.lva-is-active .elementor-button-content-wrapper, .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button.is-active .elementor-button-content-wrapper, .elementor-386065 .elementor-element.elementor-element-11ec54d.is-active .elementor-button-text, .elementor-386065 .elementor-element.elementor-element-11ec54d.lva-is-active .elementor-button-text, .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button.is-active .elementor-button-text { color: #d28799 !important; } /* ========================================================= 14 — CURRENT DEPARTMENT UNDERLINE ========================================================= */ .elementor-386065 .elementor-element.elementor-element-11ec54d.is-active .elementor-button::after, .elementor-386065 .elementor-element.elementor-element-11ec54d.lva-is-active .elementor-button::after, .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button.is-active::after { content: "" !important; position: absolute !important; display: block !important; left: 16px !important; right: 16px !important; bottom: 0 !important; width: auto !important; height: 2px !important; margin: 0 !important; padding: 0 !important; background-color: #d28799 !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; pointer-events: none !important; } /* ========================================================= 15 — TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-11ec54d { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: center !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: left !important; text-transform: uppercase !important; text-decoration: none !important; overflow: visible !important; } .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-widget-container { width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button-wrapper { width: auto !important; max-width: 100% !important; min-width: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button, .elementor-386065 .elementor-element.elementor-element-11ec54d a.elementor-button, .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button-link { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; margin: 0 !important; padding-top: 0 !important; padding-right: 13px !important; padding-bottom: 0 !important; padding-left: 13px !important; color: #211d1e !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important; opacity: 1 !important; } .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button-content-wrapper { color: #211d1e !important; background: transparent !important; border: 0 !important; } .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button-text { color: #211d1e !important; background: transparent !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important; } .elementor-386065 .elementor-element.elementor-element-11ec54d.is-active .elementor-button::after, .elementor-386065 .elementor-element.elementor-element-11ec54d.lva-is-active .elementor-button::after, .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button.is-active::after { left: 13px !important; right: 13px !important; bottom: 0 !important; width: auto !important; height: 2px !important; background-color: #d28799 !important; } } /* ========================================================= 16 — MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-11ec54d { position: relative !important; width: auto !important; max-width: none !important; min-width: max-content !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: center !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 7px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: left !important; text-transform: uppercase !important; text-decoration: none !important; overflow: visible !important; } .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-widget-container { width: auto !important; max-width: none !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button-wrapper { width: auto !important; max-width: none !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button, .elementor-386065 .elementor-element.elementor-element-11ec54d a.elementor-button, .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button-link { position: relative !important; width: auto !important; max-width: none !important; min-width: max-content !important; height: 39px !important; min-height: 39px !important; max-height: 39px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; margin: 0 !important; padding-top: 0 !important; padding-right: 11px !important; padding-bottom: 0 !important; padding-left: 11px !important; color: #211d1e !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 7px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important; opacity: 1 !important; transform: none !important; } .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button-content-wrapper { color: #211d1e !important; background: transparent !important; border: 0 !important; } .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button-text { color: #211d1e !important; background: transparent !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 7px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important; } .elementor-386065 .elementor-element.elementor-element-11ec54d.is-active .elementor-button::after, .elementor-386065 .elementor-element.elementor-element-11ec54d.lva-is-active .elementor-button::after, .elementor-386065 .elementor-element.elementor-element-11ec54d .elementor-button.is-active::after { left: 11px !important; right: 11px !important; bottom: 0 !important; width: auto !important; height: 2px !important; background-color: #d28799 !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-dcaffcf *//* ========================================================= LOVELLA — SHOP NAVIGATION SHOP ALL LINK PRIMARY SOURCE OF TRUTH Complete styling for: - widget root - Elementor wrappers - dimensions - flex behaviour - typography - colours - backgrounds - borders - spacing - normal state - hover state - focus state - click state - visited state - current Shop state - tablet behaviour - mobile behaviour Elementor settings are fallback only. ========================================================= */ /* ========================================================= 01 — WIDGET ROOT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-dcaffcf { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: center !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: left !important; text-transform: uppercase !important; text-decoration: none !important; text-shadow: none !important; opacity: 1 !important; overflow: visible !important; z-index: auto; box-sizing: border-box !important; } /* ========================================================= 02 — ELEMENTOR WIDGET CONTAINER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-widget-container { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 03 — BUTTON WRAPPER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button-wrapper { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; column-gap: 0 !important; row-gap: 0 !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 04 — BUTTON / LINK — NORMAL ========================================================= */ .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button, .elementor-386065 .elementor-element.elementor-element-dcaffcf a.elementor-button, .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button-link { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; column-gap: 0 !important; row-gap: 0 !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 16px !important; padding-bottom: 0 !important; padding-left: 16px !important; color: #211d1e !important; background: transparent !important; background-color: transparent !important; background-image: none !important; background-repeat: no-repeat !important; background-position: center !important; background-size: auto !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-color: transparent !important; border-radius: 0 !important; box-shadow: none !important; outline: none; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; text-shadow: none !important; white-space: nowrap !important; cursor: pointer !important; opacity: 1 !important; transform: none !important; transition: color 0.20s ease, background-color 0.20s ease, border-color 0.20s ease, opacity 0.20s ease !important; overflow: visible !important; box-sizing: border-box !important; -webkit-appearance: none !important; appearance: none !important; } /* ========================================================= 05 — CONTENT WRAPPER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button-content-wrapper { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; column-gap: 0 !important; row-gap: 0 !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; box-sizing: border-box !important; } /* ========================================================= 06 — TEXT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button-text { position: relative !important; display: inline-block !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; text-shadow: none !important; white-space: nowrap !important; opacity: 1 !important; transition: color 0.20s ease !important; } /* ========================================================= 07 — NO ICON ========================================================= */ .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button-icon { display: none !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; max-width: 0 !important; max-height: 0 !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: 0 !important; margin: 0 !important; padding: 0 !important; color: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } /* ========================================================= 08 — REMOVE DEFAULT/THEME PSEUDO ELEMENTS ========================================================= */ .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button::before, .elementor-386065 .elementor-element.elementor-element-dcaffcf a.elementor-button::before, .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button-link::before { content: none !important; display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button::after, .elementor-386065 .elementor-element.elementor-element-dcaffcf a.elementor-button::after { content: none; display: none; width: 0; height: 0; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; } /* ========================================================= 09 — HOVER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button:hover, .elementor-386065 .elementor-element.elementor-element-dcaffcf a.elementor-button:hover, .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button-link:hover { color: #d28799 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-color: transparent !important; border-radius: 0 !important; box-shadow: none !important; text-decoration: none !important; opacity: 1 !important; transform: none !important; } .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button:hover .elementor-button-content-wrapper, .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button:hover .elementor-button-text { color: #d28799 !important; background: transparent !important; text-decoration: none !important; } /* ========================================================= 10 — FOCUS ========================================================= */ .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button:focus, .elementor-386065 .elementor-element.elementor-element-dcaffcf a.elementor-button:focus, .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button-link:focus { color: #d28799 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-decoration: none !important; transform: none !important; } .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button:focus .elementor-button-content-wrapper, .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button:focus .elementor-button-text { color: #d28799 !important; } .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button:focus-visible { outline: 1px solid #d28799 !important; outline-offset: 2px !important; } /* ========================================================= 11 — ACTIVE CLICK STATE ========================================================= */ .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button:active, .elementor-386065 .elementor-element.elementor-element-dcaffcf a.elementor-button:active, .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button-link:active { color: #a75f70 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; text-decoration: none !important; } .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button:active .elementor-button-content-wrapper, .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button:active .elementor-button-text { color: #a75f70 !important; } /* ========================================================= 12 — VISITED ========================================================= */ .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button:visited, .elementor-386065 .elementor-element.elementor-element-dcaffcf a.elementor-button:visited, .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button-link:visited { color: #211d1e !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; text-decoration: none !important; } .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button:visited .elementor-button-content-wrapper, .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button:visited .elementor-button-text { color: #211d1e !important; } /* Visited hover protection */ .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button:visited:hover, .elementor-386065 .elementor-element.elementor-element-dcaffcf a.elementor-button:visited:hover { color: #d28799 !important; background: transparent !important; } .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button:visited:hover .elementor-button-content-wrapper, .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button:visited:hover .elementor-button-text { color: #d28799 !important; } /* ========================================================= 13 — CURRENT SHOP STATE Future logic can apply: .is-active or .lva-is-active ========================================================= */ .elementor-386065 .elementor-element.elementor-element-dcaffcf.is-active .elementor-button, .elementor-386065 .elementor-element.elementor-element-dcaffcf.lva-is-active .elementor-button, .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button.is-active { color: #d28799 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; text-decoration: none !important; } .elementor-386065 .elementor-element.elementor-element-dcaffcf.is-active .elementor-button-content-wrapper, .elementor-386065 .elementor-element.elementor-element-dcaffcf.lva-is-active .elementor-button-content-wrapper, .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button.is-active .elementor-button-content-wrapper, .elementor-386065 .elementor-element.elementor-element-dcaffcf.is-active .elementor-button-text, .elementor-386065 .elementor-element.elementor-element-dcaffcf.lva-is-active .elementor-button-text, .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button.is-active .elementor-button-text { color: #d28799 !important; } /* ========================================================= 14 — CURRENT STATE UNDERLINE ========================================================= */ .elementor-386065 .elementor-element.elementor-element-dcaffcf.is-active .elementor-button::after, .elementor-386065 .elementor-element.elementor-element-dcaffcf.lva-is-active .elementor-button::after, .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button.is-active::after { content: "" !important; position: absolute !important; display: block !important; left: 16px !important; right: 16px !important; bottom: 0 !important; width: auto !important; height: 2px !important; margin: 0 !important; padding: 0 !important; background-color: #d28799 !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; pointer-events: none !important; } /* ========================================================= 15 — TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-dcaffcf { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: center !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: left !important; text-transform: uppercase !important; text-decoration: none !important; overflow: visible !important; } .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-widget-container { width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button-wrapper { width: auto !important; max-width: 100% !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button, .elementor-386065 .elementor-element.elementor-element-dcaffcf a.elementor-button, .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button-link { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; margin: 0 !important; padding-top: 0 !important; padding-right: 13px !important; padding-bottom: 0 !important; padding-left: 13px !important; color: #211d1e !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important; opacity: 1 !important; transform: none !important; } .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button-content-wrapper { color: #211d1e !important; background: transparent !important; border: 0 !important; } .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button-text { color: #211d1e !important; background: transparent !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important; } .elementor-386065 .elementor-element.elementor-element-dcaffcf.is-active .elementor-button::after, .elementor-386065 .elementor-element.elementor-element-dcaffcf.lva-is-active .elementor-button::after, .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button.is-active::after { left: 13px !important; right: 13px !important; bottom: 0 !important; width: auto !important; height: 2px !important; background-color: #d28799 !important; } } /* ========================================================= 16 — MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-dcaffcf { position: relative !important; width: auto !important; max-width: none !important; min-width: max-content !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: center !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 7px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: left !important; text-transform: uppercase !important; text-decoration: none !important; overflow: visible !important; } .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-widget-container { width: auto !important; max-width: none !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button-wrapper { width: auto !important; max-width: none !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button, .elementor-386065 .elementor-element.elementor-element-dcaffcf a.elementor-button, .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button-link { position: relative !important; width: auto !important; max-width: none !important; min-width: max-content !important; height: 39px !important; min-height: 39px !important; max-height: 39px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; margin: 0 !important; padding-top: 0 !important; padding-right: 11px !important; padding-bottom: 0 !important; padding-left: 11px !important; color: #211d1e !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 7px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important; opacity: 1 !important; transform: none !important; } .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button-content-wrapper { color: #211d1e !important; background: transparent !important; border: 0 !important; } .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button-text { color: #211d1e !important; background: transparent !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 7px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important; } .elementor-386065 .elementor-element.elementor-element-dcaffcf.is-active .elementor-button::after, .elementor-386065 .elementor-element.elementor-element-dcaffcf.lva-is-active .elementor-button::after, .elementor-386065 .elementor-element.elementor-element-dcaffcf .elementor-button.is-active::after { left: 11px !important; right: 11px !important; bottom: 0 !important; width: auto !important; height: 2px !important; background-color: #d28799 !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-88290ab *//* ========================================================= LOVELLA — SHOP NAVIGATION DEPARTMENTS Primary source of truth. Holds: - Lashes - Brows - Lamination - Shop All Desktop / tablet: horizontal navigation beside Browse Categories. Mobile: remains horizontal and becomes horizontally scrollable rather than compressing the navigation labels. Elementor settings are fallback only. ========================================================= */ /* ========================================================= 01 — CONTAINER ROOT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-88290ab { position: relative; width: auto; max-width: 100%; min-width: 0; height: auto; min-height: 42px; max-height: none; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: nowrap; flex-grow: 1; flex-shrink: 1; flex-basis: 0; align-self: center; column-gap: 4px; row-gap: 0; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 4px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; color: var(--lovella-charcoal); background-color: transparent; background-image: none; border-top: 0; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 0; box-shadow: none; overflow-x: hidden; overflow-y: visible; z-index: auto; box-sizing: border-box; scrollbar-width: none; --min-height: 42px; --justify-content: flex-start; --align-items: center; --flex-wrap: nowrap; } /* Hide scrollbar in WebKit browsers */ .elementor-386065 .elementor-element.elementor-element-88290ab::-webkit-scrollbar { display: none; width: 0; height: 0; } /* ========================================================= 02 — ELEMENTOR INNER WRAPPER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-88290ab > .e-con-inner { position: relative; width: 100%; max-width: 100%; min-width: 0; height: auto; min-height: 42px; max-height: none; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: nowrap; column-gap: 4px; row-gap: 0; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; color: inherit; background-color: transparent; background-image: none; border: 0; border-radius: 0; box-shadow: none; overflow-x: hidden; overflow-y: visible; box-sizing: border-box; scrollbar-width: none; } .elementor-386065 .elementor-element.elementor-element-88290ab > .e-con-inner::-webkit-scrollbar { display: none; width: 0; height: 0; } /* ========================================================= 03 — DIRECT CHILD PROTECTION Each future department link stays content-width and vertically centred. ========================================================= */ .elementor-386065 .elementor-element.elementor-element-88290ab > .elementor-element, .elementor-386065 .elementor-element.elementor-element-88290ab > .e-con-inner > .elementor-element { position: relative; width: auto; max-width: none; min-width: 0; height: auto; min-height: 0; max-height: none; flex-grow: 0; flex-shrink: 0; flex-basis: auto; align-self: center; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; } /* ========================================================= 04 — TYPOGRAPHY INHERITANCE Future navigation links will define their own complete typography, but this establishes the safe container inheritance. ========================================================= */ .elementor-386065 .elementor-element.elementor-element-88290ab { font-family: "Hanken Grotesk", Arial, sans-serif; font-size: 8px; line-height: 1; font-weight: 900; font-style: normal; letter-spacing: 0.12em; text-align: left; text-transform: uppercase; text-decoration: none; } /* ========================================================= 05 — TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-88290ab { position: relative; width: auto; max-width: 100%; min-width: 0; height: auto; min-height: 40px; max-height: none; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: nowrap; flex-grow: 1; flex-shrink: 1; flex-basis: 0; align-self: center; column-gap: 2px; row-gap: 0; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 2px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; color: var(--lovella-charcoal); background-color: transparent; background-image: none; border: 0; border-radius: 0; box-shadow: none; overflow-x: hidden; overflow-y: visible; font-family: "Hanken Grotesk", Arial, sans-serif; font-size: 8px; line-height: 1; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; z-index: auto; box-sizing: border-box; scrollbar-width: none; --min-height: 40px; --justify-content: flex-start; --align-items: center; --flex-wrap: nowrap; } .elementor-386065 .elementor-element.elementor-element-88290ab > .e-con-inner { width: 100%; max-width: 100%; min-width: 0; height: auto; min-height: 40px; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: nowrap; column-gap: 2px; row-gap: 0; margin: 0; padding: 0; color: inherit; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow-x: hidden; overflow-y: visible; } } /* ========================================================= 06 — MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-88290ab { position: relative; width: auto; max-width: 100%; min-width: 0; height: auto; min-height: 39px; max-height: none; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: nowrap; flex-grow: 1; flex-shrink: 1; flex-basis: 0; align-self: center; column-gap: 0; row-gap: 0; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 2px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; color: var(--lovella-charcoal); background-color: transparent; background-image: none; border: 0; border-radius: 0; box-shadow: none; /* * Intentional horizontal scroll. * This is considerably better UX than shrinking * category navigation into tiny touch targets. */ overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; scroll-behavior: smooth; scrollbar-width: none; font-family: "Hanken Grotesk", Arial, sans-serif; font-size: 7px; line-height: 1; font-weight: 900; letter-spacing: 0.10em; text-align: left; text-transform: uppercase; z-index: auto; box-sizing: border-box; --min-height: 39px; --justify-content: flex-start; --align-items: center; --flex-wrap: nowrap; } .elementor-386065 .elementor-element.elementor-element-88290ab > .e-con-inner { width: max-content; max-width: none; min-width: 100%; height: auto; min-height: 39px; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: nowrap; column-gap: 0; row-gap: 0; margin: 0; padding: 0; color: inherit; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; } .elementor-386065 .elementor-element.elementor-element-88290ab > .elementor-element, .elementor-386065 .elementor-element.elementor-element-88290ab > .e-con-inner > .elementor-element { flex-grow: 0; flex-shrink: 0; flex-basis: auto; align-self: center; } }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-7dc9bb7 *//* ========================================================= LOVELLA — SHOP NAVIGATION VIEWING EYEBROW PRIMARY SOURCE OF TRUTH Small contextual label displayed above the current archive category title in the approved Lovella design. Text: VIEWING Desktop / tablet visible. Mobile hidden automatically with parent container. ========================================================= */ /* ========================================================= 01 — WIDGET ROOT — DESKTOP ========================================================= */ .elementor-386065 .elementor-element.elementor-element-7dc9bb7 { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: flex-end !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #8d8580 !important; background-color: transparent !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 6px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.18em !important; text-align: right !important; text-transform: uppercase !important; text-decoration: none !important; text-shadow: none !important; white-space: nowrap !important; opacity: 1 !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 02 — ELEMENTOR WIDGET CONTAINER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-7dc9bb7 .elementor-widget-container { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; display: block !important; margin: 0 !important; padding: 0 !important; color: #8d8580 !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-align: right !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 03 — ACTUAL HEADING ========================================================= */ .elementor-386065 .elementor-element.elementor-element-7dc9bb7 .elementor-heading-title { position: relative !important; display: block !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #8d8580 !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 6px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.18em !important; text-align: right !important; text-transform: uppercase !important; text-decoration: none !important; text-shadow: none !important; white-space: nowrap !important; opacity: 1 !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 04 — LINK PROTECTION ========================================================= */ .elementor-386065 .elementor-element.elementor-element-7dc9bb7 .elementor-heading-title a { display: inline !important; margin: 0 !important; padding: 0 !important; color: #8d8580 !important; background-color: transparent !important; border: 0 !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 6px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.18em !important; text-align: right !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important; } /* ========================================================= 05 — TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-7dc9bb7 { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; display: block !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: flex-end !important; margin: 0 !important; padding: 0 !important; color: #8d8580 !important; background-color: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 6px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.18em !important; text-align: right !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important; overflow: visible !important; } .elementor-386065 .elementor-element.elementor-element-7dc9bb7 .elementor-widget-container { width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; color: #8d8580 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; text-align: right !important; } .elementor-386065 .elementor-element.elementor-element-7dc9bb7 .elementor-heading-title { width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; color: #8d8580 !important; background: transparent !important; border: 0 !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 6px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.18em !important; text-align: right !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important; } } /* ========================================================= 06 — MOBILE Parent container is hidden on mobile. This reinforces that behaviour at widget level. ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-7dc9bb7 { display: none !important; width: 0 !important; max-width: 0 !important; min-width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; } .elementor-386065 .elementor-element.elementor-element-7dc9bb7 .elementor-widget-container, .elementor-386065 .elementor-element.elementor-element-7dc9bb7 .elementor-heading-title { display: none !important; } }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-66cffd1 *//* ========================================================= LOVELLA — SHOP NAVIGATION DYNAMIC CURRENT ARCHIVE TITLE PRIMARY SOURCE OF TRUTH Displays the current WooCommerce Product Category beneath the small VIEWING label in the approved archive design. Example: VIEWING Eyelash Trays Desktop / tablet visible. Mobile hidden with parent navigation context block. Complete control of: - widget sizing - layout - typography - colours - spacing - links - responsive behaviour Elementor settings are fallback only. ========================================================= */ /* ========================================================= 01 — WIDGET ROOT — DESKTOP ========================================================= */ .elementor-386065 .elementor-element.elementor-element-66cffd1 { position: relative !important; width: auto !important; max-width: 240px !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; flex-grow: 0 !important; flex-shrink: 1 !important; flex-basis: auto !important; align-self: flex-end !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Cormorant Garamond", Georgia, serif !important; font-size: 18px !important; line-height: 0.95 !important; font-weight: 500 !important; font-style: normal !important; letter-spacing: -0.01em !important; text-align: right !important; text-transform: none !important; text-decoration: none !important; text-shadow: none !important; opacity: 1 !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 02 — ELEMENTOR WIDGET CONTAINER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-66cffd1 .elementor-widget-container { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-align: right !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 03 — ACTUAL DYNAMIC TITLE ========================================================= */ .elementor-386065 .elementor-element.elementor-element-66cffd1 .elementor-heading-title { position: relative !important; display: block !important; width: auto !important; max-width: 240px !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Cormorant Garamond", Georgia, serif !important; font-size: 18px !important; line-height: 0.95 !important; font-weight: 500 !important; font-style: normal !important; letter-spacing: -0.01em !important; text-align: right !important; text-transform: none !important; text-decoration: none !important; text-shadow: none !important; white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; opacity: 1 !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 04 — LINK PROTECTION Archive Title normally has no link, but these rules stop theme styles affecting it if Elementor markup changes. ========================================================= */ .elementor-386065 .elementor-element.elementor-element-66cffd1 .elementor-heading-title a { display: inline !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; font-family: "Cormorant Garamond", Georgia, serif !important; font-size: 18px !important; line-height: 0.95 !important; font-weight: 500 !important; font-style: normal !important; letter-spacing: -0.01em !important; text-align: right !important; text-transform: none !important; text-decoration: none !important; transition: color 0.20s ease !important; } /* ========================================================= 05 — LINK STATES ========================================================= */ .elementor-386065 .elementor-element.elementor-element-66cffd1 .elementor-heading-title a:link, .elementor-386065 .elementor-element.elementor-element-66cffd1 .elementor-heading-title a:visited { color: #211d1e !important; text-decoration: none !important; } .elementor-386065 .elementor-element.elementor-element-66cffd1 .elementor-heading-title a:hover, .elementor-386065 .elementor-element.elementor-element-66cffd1 .elementor-heading-title a:focus { color: #d28799 !important; background-color: transparent !important; text-decoration: none !important; } /* ========================================================= 06 — TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-66cffd1 { position: relative !important; width: auto !important; max-width: 200px !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; flex-grow: 0 !important; flex-shrink: 1 !important; flex-basis: auto !important; align-self: flex-end !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Cormorant Garamond", Georgia, serif !important; font-size: 16px !important; line-height: 0.95 !important; font-weight: 500 !important; font-style: normal !important; letter-spacing: -0.01em !important; text-align: right !important; text-transform: none !important; text-decoration: none !important; overflow: visible !important; box-sizing: border-box !important; } .elementor-386065 .elementor-element.elementor-element-66cffd1 .elementor-widget-container { width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background: transparent !important; border: 0 !important; box-shadow: none !important; text-align: right !important; } .elementor-386065 .elementor-element.elementor-element-66cffd1 .elementor-heading-title { width: auto !important; max-width: 200px !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background: transparent !important; border: 0 !important; font-family: "Cormorant Garamond", Georgia, serif !important; font-size: 16px !important; line-height: 0.95 !important; font-weight: 500 !important; font-style: normal !important; letter-spacing: -0.01em !important; text-align: right !important; text-transform: none !important; text-decoration: none !important; white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; } .elementor-386065 .elementor-element.elementor-element-66cffd1 .elementor-heading-title a { color: #211d1e !important; font-family: "Cormorant Garamond", Georgia, serif !important; font-size: 16px !important; line-height: 0.95 !important; font-weight: 500 !important; letter-spacing: -0.01em !important; text-align: right !important; text-transform: none !important; text-decoration: none !important; } } /* ========================================================= 07 — MOBILE Hidden intentionally with the complete Viewing block. The main archive heading already identifies the current category on mobile. ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-66cffd1 { display: none !important; width: 0 !important; max-width: 0 !important; min-width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: hidden !important; } .elementor-386065 .elementor-element.elementor-element-66cffd1 .elementor-widget-container, .elementor-386065 .elementor-element.elementor-element-66cffd1 .elementor-heading-title { display: none !important; width: 0 !important; max-width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-a8d0561 *//* ========================================================= LOVELLA — SHOP NAVIGATION CURRENT CATEGORY / VIEWING CONTAINER PRIMARY SOURCE OF TRUTH Matches the approved archive design: right-aligned current-category indicator inside the universal shop navigation strip. Future children: - VIEWING eyebrow - Dynamic Archive Title Desktop / tablet visible. Mobile hidden to avoid duplicating the archive heading. ========================================================= */ /* ========================================================= 01 — ROOT — DESKTOP ========================================================= */ .elementor-386065 .elementor-element.elementor-element-a8d0561 { position: relative !important; width: auto !important; max-width: 260px !important; min-width: 170px !important; height: auto !important; min-height: 42px !important; max-height: none !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: center !important; flex-wrap: nowrap !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: center !important; column-gap: 0 !important; row-gap: 3px !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: auto !important; padding-top: 8px !important; padding-right: 0 !important; padding-bottom: 8px !important; padding-left: 22px !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 1px solid rgba(33, 29, 30, 0.13) !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; text-align: right !important; overflow: visible !important; box-sizing: border-box !important; --min-height: 42px !important; --justify-content: center !important; --align-items: flex-end !important; --flex-wrap: nowrap !important; } /* ========================================================= 02 — ELEMENTOR INNER WRAPPER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-a8d0561 > .e-con-inner { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: center !important; flex-wrap: nowrap !important; column-gap: 0 !important; row-gap: 3px !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-align: right !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 03 — DIRECT CHILD PROTECTION ========================================================= */ .elementor-386065 .elementor-element.elementor-element-a8d0561 > .elementor-element, .elementor-386065 .elementor-element.elementor-element-a8d0561 > .e-con-inner > .elementor-element { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: flex-end !important; margin: 0 !important; padding: 0 !important; text-align: right !important; box-sizing: border-box !important; } /* ========================================================= 04 — TYPOGRAPHY INHERITANCE ========================================================= */ .elementor-386065 .elementor-element.elementor-element-a8d0561, .elementor-386065 .elementor-element.elementor-element-a8d0561 div, .elementor-386065 .elementor-element.elementor-element-a8d0561 span, .elementor-386065 .elementor-element.elementor-element-a8d0561 p, .elementor-386065 .elementor-element.elementor-element-a8d0561 a { font-family: "Hanken Grotesk", Arial, sans-serif; } /* ========================================================= 05 — LINKS ========================================================= */ .elementor-386065 .elementor-element.elementor-element-a8d0561 a { color: inherit !important; background-color: transparent !important; background-image: none !important; border: 0 !important; text-decoration: none !important; } /* ========================================================= 06 — TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-a8d0561 { position: relative !important; width: auto !important; max-width: 220px !important; min-width: 145px !important; height: auto !important; min-height: 40px !important; max-height: none !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: center !important; flex-wrap: nowrap !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: center !important; column-gap: 0 !important; row-gap: 2px !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: auto !important; padding-top: 7px !important; padding-right: 0 !important; padding-bottom: 7px !important; padding-left: 18px !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 1px solid rgba(33, 29, 30, 0.13) !important; border-radius: 0 !important; box-shadow: none !important; text-align: right !important; overflow: visible !important; box-sizing: border-box !important; --min-height: 40px !important; --justify-content: center !important; --align-items: flex-end !important; --flex-wrap: nowrap !important; } .elementor-386065 .elementor-element.elementor-element-a8d0561 > .e-con-inner { width: 100% !important; max-width: 100% !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: center !important; column-gap: 0 !important; row-gap: 2px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; text-align: right !important; } } /* ========================================================= 07 — MOBILE Hidden intentionally. The current category is already communicated through the archive heading and breadcrumb above the stacked shop nav. ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-a8d0561 { display: none !important; width: 0 !important; max-width: 0 !important; min-width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; } .elementor-386065 .elementor-element.elementor-element-a8d0561 > .e-con-inner { display: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-9bfd74a *//* ========================================================= LOVELLA — SHOP NAVIGATION INNER PRIMARY SOURCE OF TRUTH DESKTOP / TABLET: Horizontal shop navigation. MOBILE: Full vertical navigation stack. IMPORTANT: Browse Categories button is centred on ALL devices. The menu-bars icon + label are centred together as a single visual group. Elementor settings are fallback only. ========================================================= */ /* ========================================================= 01 — DESKTOP ROOT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-9bfd74a { position: relative !important; width: 100% !important; max-width: 1480px !important; min-width: 0 !important; height: auto !important; min-height: 64px !important; max-height: none !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; flex-grow: 0 !important; flex-shrink: 1 !important; flex-basis: auto !important; column-gap: 8px !important; row-gap: 0 !important; margin-top: 0 !important; margin-right: auto !important; margin-bottom: 0 !important; margin-left: auto !important; padding-top: 0 !important; padding-right: 40px !important; padding-bottom: 0 !important; padding-left: 40px !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: left !important; text-transform: uppercase !important; text-decoration: none !important; overflow: visible !important; z-index: auto; box-sizing: border-box !important; --min-height: 64px !important; --justify-content: flex-start !important; --align-items: center !important; --flex-wrap: nowrap !important; } /* ========================================================= 02 — ELEMENTOR INNER WRAPPER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-9bfd74a > .e-con-inner { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 64px !important; max-height: none !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; column-gap: 8px !important; row-gap: 0 !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 03 — DIRECT CHILD PROTECTION ========================================================= */ .elementor-386065 .elementor-element.elementor-element-9bfd74a > .elementor-element, .elementor-386065 .elementor-element.elementor-element-9bfd74a > .e-con-inner > .elementor-element { position: relative !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; align-self: center !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* ========================================================= 04 — BROWSE CATEGORIES DESKTOP ========================================================= */ .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-browse-categories-trigger { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; display: block !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: center !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-browse-categories-trigger .elementor-widget-container { position: relative !important; width: auto !important; max-width: 100% !important; height: auto !important; display: block !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-browse-categories-trigger .elementor-button-wrapper { position: relative !important; width: auto !important; max-width: 100% !important; height: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ========================================================= 05 — BROWSE CATEGORIES BUTTON DESKTOP ========================================================= */ .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-browse-categories-trigger .elementor-button { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; column-gap: 10px !important; row-gap: 0 !important; margin: 0 !important; padding-top: 0 !important; padding-right: 17px !important; padding-bottom: 0 !important; padding-left: 17px !important; color: #ffffff !important; background-color: #211d1e !important; background-image: none !important; border-top: 1px solid #211d1e !important; border-right: 1px solid #211d1e !important; border-bottom: 1px solid #211d1e !important; border-left: 1px solid #211d1e !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important; cursor: pointer !important; opacity: 1 !important; transform: none !important; transition: color 0.20s ease, background-color 0.20s ease, border-color 0.20s ease !important; box-sizing: border-box !important; } /* ========================================================= 06 — BUTTON CONTENT CENTRED AS ONE GROUP ========================================================= */ .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-browse-categories-trigger .elementor-button-content-wrapper { position: relative !important; width: auto !important; max-width: 100% !important; height: auto !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; column-gap: 10px !important; row-gap: 0 !important; margin: 0 auto !important; padding: 0 !important; color: #ffffff !important; background: transparent !important; border: 0 !important; text-align: center !important; } /* ========================================================= 07 — BROWSE TEXT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-browse-categories-trigger .elementor-button-text { position: relative !important; width: auto !important; display: inline-block !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; background: transparent !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important; } /* ========================================================= 08 — BARS ICON ========================================================= */ .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-browse-categories-trigger .elementor-button-icon { position: relative !important; width: 15px !important; height: 15px !important; min-width: 15px !important; min-height: 15px !important; max-width: 15px !important; max-height: 15px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: 15px !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; background: transparent !important; border: 0 !important; line-height: 1 !important; } .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-browse-categories-trigger .elementor-button-icon i { width: 15px !important; height: 15px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; font-size: 15px !important; line-height: 1 !important; } .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-browse-categories-trigger .elementor-button-icon svg { width: 15px !important; height: 15px !important; display: block !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; fill: currentColor !important; stroke: currentColor !important; } /* ========================================================= 09 — BROWSE HOVER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-browse-categories-trigger .elementor-button:hover { color: #ffffff !important; background-color: #d28799 !important; background-image: none !important; border-top-color: #d28799 !important; border-right-color: #d28799 !important; border-bottom-color: #d28799 !important; border-left-color: #d28799 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; } .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-browse-categories-trigger .elementor-button:hover .elementor-button-text, .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-browse-categories-trigger .elementor-button:hover .elementor-button-icon, .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-browse-categories-trigger .elementor-button:hover .elementor-button-icon i, .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-browse-categories-trigger .elementor-button:hover .elementor-button-icon svg { color: #ffffff !important; fill: currentColor !important; stroke: currentColor !important; } /* ========================================================= 10 — TABLET ROOT ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-9bfd74a { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 60px !important; max-height: none !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; column-gap: 6px !important; row-gap: 0 !important; margin-top: 0 !important; margin-right: auto !important; margin-bottom: 0 !important; margin-left: auto !important; padding-top: 0 !important; padding-right: 27px !important; padding-bottom: 0 !important; padding-left: 27px !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: 0.12em !important; overflow: visible !important; box-sizing: border-box !important; --min-height: 60px !important; --justify-content: flex-start !important; --align-items: center !important; --flex-wrap: nowrap !important; } .elementor-386065 .elementor-element.elementor-element-9bfd74a > .e-con-inner { width: 100% !important; max-width: 100% !important; min-height: 60px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; column-gap: 6px !important; row-gap: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-browse-categories-trigger .elementor-button-wrapper { justify-content: center !important; } .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-browse-categories-trigger .elementor-button { height: 40px !important; min-height: 40px !important; max-height: 40px !important; justify-content: center !important; column-gap: 9px !important; padding-top: 0 !important; padding-right: 15px !important; padding-bottom: 0 !important; padding-left: 15px !important; color: #ffffff !important; background-color: #211d1e !important; border-top: 1px solid #211d1e !important; border-right: 1px solid #211d1e !important; border-bottom: 1px solid #211d1e !important; border-left: 1px solid #211d1e !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: 0.12em !important; text-align: center !important; } .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-browse-categories-trigger .elementor-button-content-wrapper { justify-content: center !important; column-gap: 9px !important; margin: 0 auto !important; text-align: center !important; } .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-browse-categories-trigger .elementor-button-text { font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: 0.12em !important; text-align: center !important; } .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-browse-categories-trigger .elementor-button-icon, .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-browse-categories-trigger .elementor-button-icon i, .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-browse-categories-trigger .elementor-button-icon svg { width: 14px !important; height: 14px !important; min-width: 14px !important; min-height: 14px !important; max-width: 14px !important; max-height: 14px !important; flex-basis: 14px !important; font-size: 14px !important; } } /* ========================================================= 11 — MOBILE ROOT ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-9bfd74a { position: relative !important; width: 100% !important; max-width: 520px !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; flex-wrap: nowrap !important; flex-grow: 0 !important; flex-shrink: 1 !important; flex-basis: auto !important; column-gap: 0 !important; row-gap: 0 !important; margin-top: 0 !important; margin-right: auto !important; margin-bottom: 0 !important; margin-left: auto !important; padding-top: 12px !important; padding-right: 14px !important; padding-bottom: 12px !important; padding-left: 14px !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: left !important; text-transform: uppercase !important; overflow: visible !important; box-sizing: border-box !important; --min-height: 0px !important; --justify-content: flex-start !important; --align-items: stretch !important; --flex-wrap: nowrap !important; } .elementor-386065 .elementor-element.elementor-element-9bfd74a > .e-con-inner { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; flex-wrap: nowrap !important; column-gap: 0 !important; row-gap: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } /* ===================================================== MOBILE — BROWSE CATEGORIES WIDGET ===================================================== */ .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-browse-categories-trigger { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; display: block !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: stretch !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 8px !important; margin-left: 0 !important; padding: 0 !important; color: #ffffff !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-browse-categories-trigger .elementor-widget-container { width: 100% !important; max-width: 100% !important; height: auto !important; display: block !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-browse-categories-trigger .elementor-button-wrapper { width: 100% !important; max-width: 100% !important; height: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ===================================================== MOBILE — BROWSE BUTTON ===================================================== */ .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-browse-categories-trigger .elementor-button { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; column-gap: 10px !important; row-gap: 0 !important; margin: 0 !important; padding-top: 0 !important; padding-right: 14px !important; padding-bottom: 0 !important; padding-left: 14px !important; color: #ffffff !important; background-color: #211d1e !important; background-image: none !important; border-top: 1px solid #211d1e !important; border-right: 1px solid #211d1e !important; border-bottom: 1px solid #211d1e !important; border-left: 1px solid #211d1e !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important; box-sizing: border-box !important; } /* ===================================================== MOBILE — CENTRE ICON + TEXT AS ONE GROUP ===================================================== */ .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-browse-categories-trigger .elementor-button-content-wrapper { width: auto !important; max-width: 100% !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; column-gap: 10px !important; row-gap: 0 !important; margin-top: 0 !important; margin-right: auto !important; margin-bottom: 0 !important; margin-left: auto !important; padding: 0 !important; color: #ffffff !important; background: transparent !important; border: 0 !important; text-align: center !important; } .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-browse-categories-trigger .elementor-button-text { width: auto !important; display: inline-block !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; background: transparent !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; font-style: normal !important; letter-spacing: 0.12em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important; } .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-browse-categories-trigger .elementor-button-icon { width: 15px !important; height: 15px !important; min-width: 15px !important; min-height: 15px !important; max-width: 15px !important; max-height: 15px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: 15px !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; } .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-browse-categories-trigger .elementor-button-icon i { width: 15px !important; height: 15px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #ffffff !important; font-size: 15px !important; line-height: 1 !important; } .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-browse-categories-trigger .elementor-button-icon svg { width: 15px !important; height: 15px !important; display: block !important; color: #ffffff !important; fill: currentColor !important; stroke: currentColor !important; } /* ===================================================== MOBILE — BROWSE HOVER ===================================================== */ .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-browse-categories-trigger .elementor-button:hover, .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-browse-categories-trigger .elementor-button:focus { color: #ffffff !important; background-color: #d28799 !important; background-image: none !important; border-top-color: #d28799 !important; border-right-color: #d28799 !important; border-bottom-color: #d28799 !important; border-left-color: #d28799 !important; box-shadow: none !important; } /* ===================================================== MOBILE — DEPARTMENTS ===================================================== */ .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-shop-departments { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; flex-wrap: nowrap !important; flex-grow: 0 !important; flex-shrink: 1 !important; flex-basis: auto !important; align-self: stretch !important; column-gap: 0 !important; row-gap: 0 !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border-top: 1px solid rgba(33, 29, 30, 0.13) !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-shop-departments > .e-con-inner { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; flex-wrap: nowrap !important; column-gap: 0 !important; row-gap: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } /* ===================================================== MOBILE — DEPARTMENT ITEMS ===================================================== */ .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-shop-departments .lva-department-link { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 46px !important; max-height: none !important; display: block !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: stretch !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background-color: transparent !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 1px solid rgba(33, 29, 30, 0.13) !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-shop-departments .lva-department-link .elementor-widget-container, .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-shop-departments .lva-department-link .elementor-button-wrapper { width: 100% !important; max-width: 100% !important; min-height: 46px !important; display: block !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-shop-departments .lva-department-link .elementor-button { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; margin: 0 !important; padding-top: 0 !important; padding-right: 14px !important; padding-bottom: 0 !important; padding-left: 14px !important; color: #211d1e !important; background: transparent !important; background-color: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: 0.12em !important; text-align: left !important; text-transform: uppercase !important; white-space: nowrap !important; box-sizing: border-box !important; } .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-shop-departments .lva-department-link .elementor-button-text { width: 100% !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: 0.12em !important; text-align: left !important; text-transform: uppercase !important; } .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-shop-departments .lva-department-link .elementor-button:hover, .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-shop-departments .lva-department-link .elementor-button:focus { color: #d28799 !important; background-color: #fbefee !important; box-shadow: none !important; } .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-shop-departments .lva-department-link .elementor-button:hover .elementor-button-text, .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-shop-departments .lva-department-link .elementor-button:focus .elementor-button-text { color: #d28799 !important; } /* Remove desktop active underline on mobile */ .elementor-386065 .elementor-element.elementor-element-9bfd74a .lva-shop-departments .lva-department-link .elementor-button::after { display: none !important; content: none !important; width: 0 !important; height: 0 !important; background: transparent !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-32adecd *//* ========================================================= LOVELLA — SHOP NAVIGATION OUTER Primary source of truth. Full-width structural wrapper for the universal Lovella shop navigation used across every WooCommerce category. Elementor settings are fallback only. ========================================================= */ /* ========================================================= DESKTOP ========================================================= */ .elementor-386065 .elementor-element.elementor-element-32adecd { position: relative; /* * Full bleed across the viewport. * This protects the navigation from boxed theme/template * wrappers and keeps it aligned with the category intro. */ width: 100vw !important; max-width: 100vw !important; min-width: 100vw; height: auto; min-height: 64px; max-height: none; display: flex; flex-direction: column; align-items: stretch; justify-content: center; flex-wrap: nowrap; flex-grow: 0; flex-shrink: 0; flex-basis: auto; column-gap: 0; row-gap: 0; margin-top: 0 !important; margin-right: calc(50% - 50vw) !important; margin-bottom: 0 !important; margin-left: calc(50% - 50vw) !important; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; background: var(--lovella-white); border-top: 0; border-right: 0; border-bottom: 1px solid var(--lovella-line); border-left: 0; border-radius: 0; box-shadow: none; overflow: visible; z-index: 100; box-sizing: border-box; --min-height: 64px; --justify-content: center; --align-items: stretch; --flex-wrap: nowrap; } /* ========================================================= ELEMENTOR INNER WRAPPER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-32adecd > .e-con-inner { position: relative; width: 100%; max-width: 100%; min-width: 0; height: auto; min-height: 64px; max-height: none; display: flex; flex-direction: column; align-items: stretch; justify-content: center; flex-wrap: nowrap; column-gap: 0; row-gap: 0; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; } /* ========================================================= DIRECT CHILD PROTECTION The next child — 03.1 Shop Navigation | Inner — will control the centred 1480px content width. ========================================================= */ .elementor-386065 .elementor-element.elementor-element-32adecd > .elementor-element, .elementor-386065 .elementor-element.elementor-element-32adecd > .e-con-inner > .elementor-element { position: relative; min-width: 0; flex-grow: 0; flex-shrink: 1; flex-basis: auto; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-32adecd { position: relative; width: 100vw !important; max-width: 100vw !important; min-width: 100vw; height: auto; min-height: 60px; max-height: none; display: flex; flex-direction: column; align-items: stretch; justify-content: center; flex-wrap: nowrap; column-gap: 0; row-gap: 0; margin-top: 0 !important; margin-right: calc(50% - 50vw) !important; margin-bottom: 0 !important; margin-left: calc(50% - 50vw) !important; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; background: var(--lovella-white); border-top: 0; border-right: 0; border-bottom: 1px solid var(--lovella-line); border-left: 0; border-radius: 0; box-shadow: none; overflow: visible; z-index: 100; box-sizing: border-box; --min-height: 60px; --justify-content: center; --align-items: stretch; --flex-wrap: nowrap; } .elementor-386065 .elementor-element.elementor-element-32adecd > .e-con-inner { width: 100%; max-width: 100%; min-width: 0; height: auto; min-height: 60px; display: flex; flex-direction: column; align-items: stretch; justify-content: center; flex-wrap: nowrap; column-gap: 0; row-gap: 0; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-32adecd { position: relative; width: 100vw !important; max-width: 100vw !important; min-width: 100vw; height: auto; min-height: 57px; max-height: none; display: flex; flex-direction: column; align-items: stretch; justify-content: center; flex-wrap: nowrap; column-gap: 0; row-gap: 0; margin-top: 0 !important; margin-right: calc(50% - 50vw) !important; margin-bottom: 0 !important; margin-left: calc(50% - 50vw) !important; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; background: var(--lovella-white); border-top: 0; border-right: 0; border-bottom: 1px solid var(--lovella-line); border-left: 0; border-radius: 0; box-shadow: none; overflow: visible; z-index: 100; box-sizing: border-box; --min-height: 57px; --justify-content: center; --align-items: stretch; --flex-wrap: nowrap; } .elementor-386065 .elementor-element.elementor-element-32adecd > .e-con-inner { width: 100%; max-width: 100%; min-width: 0; height: auto; min-height: 57px; display: flex; flex-direction: column; align-items: stretch; justify-content: center; flex-wrap: nowrap; column-gap: 0; row-gap: 0; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; } }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-c8eaac8 *//* ========================================================= LOVELLA — PRODUCT ARCHIVE CATEGORY CONTEXT TITLE ELEMENT: 04.2.1 — Category Navigation | Context Title CSS CLASS: lva-category-context-title SHORTCODE: [lovella_archive_context_title] DESKTOP: Inline with category pills. TABLET / MOBILE: Full-width line above category navigation. ========================================================= */ /* ========================================================= 01 — DESKTOP WIDGET ROOT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-c8eaac8 { position: relative !important; width: auto !important; max-width: none !important; min-width: max-content !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: center !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #d28799 !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 800 !important; font-style: normal !important; letter-spacing: 0.11em !important; text-align: left !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important; opacity: 1 !important; visibility: visible !important; transform: none !important; overflow: visible !important; box-sizing: border-box !important; --width: auto !important; } /* ========================================================= 02 — ELEMENTOR WIDGET CONTAINER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-c8eaac8 > .elementor-widget-container { position: relative !important; width: auto !important; max-width: none !important; min-width: max-content !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; color: inherit !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 03 — SHORTCODE OUTPUT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-c8eaac8 .elementor-shortcode { position: relative !important; width: auto !important; max-width: none !important; min-width: max-content !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: inline-block !important; margin: 0 !important; padding: 0 !important; color: #d28799 !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 800 !important; font-style: normal !important; letter-spacing: 0.11em !important; text-align: left !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important; opacity: 1 !important; visibility: visible !important; transform: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 04 — RESET GENERATED TEXT ELEMENTS ========================================================= */ .elementor-386065 .elementor-element.elementor-element-c8eaac8 .elementor-shortcode p, .elementor-386065 .elementor-element.elementor-element-c8eaac8 .elementor-shortcode span, .elementor-386065 .elementor-element.elementor-element-c8eaac8 .elementor-shortcode div { width: auto !important; max-width: none !important; min-width: 0 !important; display: inline !important; margin: 0 !important; padding: 0 !important; color: inherit !important; background: transparent !important; border: 0 !important; font: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; white-space: nowrap !important; } /* ========================================================= 05 — TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-c8eaac8 { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 12px !important; max-height: none !important; display: block !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: stretch !important; margin: 0 !important; padding: 0 !important; font-size: 8px !important; line-height: 1.2 !important; overflow: visible !important; --width: 100% !important; } .elementor-386065 .elementor-element.elementor-element-c8eaac8 > .elementor-widget-container, .elementor-386065 .elementor-element.elementor-element-c8eaac8 .elementor-shortcode { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 12px !important; max-height: none !important; display: block !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } } /* ========================================================= 06 — MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-c8eaac8 { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 12px !important; max-height: none !important; display: block !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: stretch !important; margin: 0 !important; padding: 0 !important; color: #d28799 !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 7px !important; line-height: 1.2 !important; font-weight: 800 !important; letter-spacing: 0.10em !important; text-align: left !important; text-transform: uppercase !important; white-space: nowrap !important; overflow: visible !important; --width: 100% !important; } .elementor-386065 .elementor-element.elementor-element-c8eaac8 > .elementor-widget-container, .elementor-386065 .elementor-element.elementor-element-c8eaac8 .elementor-shortcode { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 12px !important; max-height: none !important; display: block !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; overflow: visible !important; } }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-90b7bd7 *//* ========================================================= LOVELLA — PRODUCT ARCHIVE RANGE LINKS ELEMENT: 04.2.2.1 — Category Navigation | Range Links (Shortcode) DESKTOP: Normal wrapping pills. TABLET: Normal wrapping pills. MOBILE: ONE horizontal row. NO wrapping. Horizontal swipe. ========================================================= */ /* ========================================================= 01 — WIDGET ROOT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-90b7bd7 { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; opacity: 1 !important; visibility: visible !important; transform: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 02 — ELEMENTOR WIDGET CONTAINER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-90b7bd7 > .elementor-widget-container { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 03 — SHORTCODE OUTPUT — DESKTOP ========================================================= */ .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: wrap !important; gap: 7px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; white-space: normal !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 04 — GENERATED WRAPPERS — DESKTOP ========================================================= */ .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode > div, .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode > nav, .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode > ul, .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode > p { width: 100% !important; max-width: 100% !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: wrap !important; gap: 7px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; list-style: none !important; box-sizing: border-box !important; } .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode li { display: contents !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } /* ========================================================= 05 — CATEGORY PILLS ========================================================= */ .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode a { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; margin: 0 !important; padding: 0 13px !important; color: #211d1e !important; background-color: #ffffff !important; background-image: none !important; border: 1px solid rgba(33, 29, 30, 0.15) !important; border-radius: 999px !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 7px !important; line-height: 1 !important; font-weight: 800 !important; font-style: normal !important; letter-spacing: 0.055em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important; cursor: pointer !important; box-sizing: border-box !important; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease !important; } /* ========================================================= 06 — ACTIVE ========================================================= */ .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode a.is-active, .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode a.active, .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode a[aria-current="page"] { color: #ffffff !important; background-color: #211d1e !important; border-color: #211d1e !important; } /* ========================================================= 07 — HOVER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode a:hover { color: #211d1e !important; background-color: #f0d7d5 !important; border-color: #f0d7d5 !important; text-decoration: none !important; } /* ========================================================= 08 — TABLET ========================================================= */ @media (max-width: 1024px) and (min-width: 768px) { .elementor-386065 .elementor-element.elementor-element-90b7bd7, .elementor-386065 .elementor-element.elementor-element-90b7bd7 > .elementor-widget-container { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode, .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode > div, .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode > nav, .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode > ul, .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode > p { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: wrap !important; gap: 7px !important; margin: 0 !important; padding: 0 !important; white-space: normal !important; overflow: visible !important; } .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode a { height: 36px !important; min-height: 36px !important; max-height: 36px !important; padding: 0 14px !important; font-size: 7px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: 0.05em !important; } } /* ========================================================= 09 — MOBILE ========================================================= */ @media (max-width: 767px) { /* ----------------------------------------------------- ROOT ----------------------------------------------------- */ .elementor-386065 .elementor-element.elementor-element-90b7bd7 { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; display: block !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ----------------------------------------------------- ELEMENTOR WRAPPER ----------------------------------------------------- */ .elementor-386065 .elementor-element.elementor-element-90b7bd7 > .elementor-widget-container { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; display: block !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ----------------------------------------------------- ONE AND ONLY SCROLLING RAIL WHITE-SPACE NOWRAP is the important change. Even unknown shortcode wrappers cannot create a second visual line. ----------------------------------------------------- */ .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; display: block !important; margin: 0 !important; padding-top: 1px !important; padding-right: 28px !important; padding-bottom: 1px !important; padding-left: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; white-space: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-x: contain !important; scrollbar-width: none !important; -ms-overflow-style: none !important; box-sizing: border-box !important; } .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } /* ----------------------------------------------------- NUCLEAR WRAPPER RESET Any wrapper produced inside the shortcode becomes inline content. It therefore CANNOT start another row. ----------------------------------------------------- */ .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode > *, .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode > * > *, .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode li { float: none !important; width: auto !important; max-width: none !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; white-space: nowrap !important; } /* * Containers / lists / paragraphs are turned into * inline formatting boxes. */ .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode div, .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode nav, .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode ul, .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode ol, .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode li, .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode p, .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode span { display: inline !important; float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; overflow: visible !important; list-style: none !important; } /* ----------------------------------------------------- MOBILE PILLS ----------------------------------------------------- */ .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode a { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: auto !important; max-width: none !important; min-width: max-content !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; display: inline-flex !important; vertical-align: top !important; align-items: center !important; justify-content: center !important; flex: none !important; margin-top: 0 !important; margin-right: 8px !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 15px !important; padding-bottom: 0 !important; padding-left: 15px !important; color: #211d1e !important; background-color: #ffffff !important; background-image: none !important; border: 1px solid rgba(33, 29, 30, 0.15) !important; border-radius: 999px !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 7px !important; line-height: 1 !important; font-weight: 800 !important; font-style: normal !important; letter-spacing: 0.05em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important; opacity: 1 !important; visibility: visible !important; transform: none !important; cursor: pointer !important; box-sizing: border-box !important; } .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode a:last-of-type { margin-right: 0 !important; } /* ----------------------------------------------------- ACTIVE ----------------------------------------------------- */ .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode a.is-active, .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode a.active, .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode a[aria-current="page"] { color: #ffffff !important; background-color: #211d1e !important; border-color: #211d1e !important; } /* ----------------------------------------------------- KILL BREAKS ----------------------------------------------------- */ .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode br { display: none !important; } } /* ========================================================= 10 — ACCESSIBILITY ========================================================= */ .elementor-386065 .elementor-element.elementor-element-90b7bd7 .elementor-shortcode a:focus-visible { outline: 2px solid #d28799 !important; outline-offset: 2px !important; box-shadow: none !important; } /* ========================================================= 11 — REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-386065 .elementor-element.elementor-element-90b7bd7, .elementor-386065 .elementor-element.elementor-element-90b7bd7 *, .elementor-386065 .elementor-element.elementor-element-90b7bd7::before, .elementor-386065 .elementor-element.elementor-element-90b7bd7::after { transition: none !important; scroll-behavior: auto !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-4aa0f02 *//* ========================================================= LOVELLA — PRODUCT ARCHIVE CATEGORY DYNAMIC LINKS ELEMENT: 04.2.2 — Category Navigation | Dynamic Links CSS CLASS: lva-category-dynamic-links CURRENT STRUCTURE: Dynamic Links ├── Context Title └── Range Links Shortcode DESKTOP: Context title + pills on ONE row. TABLET / MOBILE: Context title above links. Mobile Range Links keeps its existing horizontal swipe. ========================================================= */ /* ========================================================= 01 — ROOT — DESKTOP ========================================================= */ .elementor-386065 .elementor-element.elementor-element-4aa0f02 { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 34px !important; max-height: none !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; flex-grow: 1 !important; flex-shrink: 1 !important; flex-basis: auto !important; align-self: stretch !important; column-gap: 14px !important; row-gap: 0 !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; overflow: visible !important; box-sizing: border-box !important; --display: flex !important; --flex-direction: row !important; --justify-content: flex-start !important; --align-items: center !important; --flex-wrap: nowrap !important; --gap: 0px 14px !important; --row-gap: 0px !important; --column-gap: 14px !important; } /* ========================================================= 02 — ELEMENTOR INNER WRAPPER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-4aa0f02 > .e-con-inner { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 34px !important; max-height: none !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; flex-grow: 1 !important; flex-shrink: 1 !important; flex-basis: auto !important; column-gap: 14px !important; row-gap: 0 !important; margin: 0 !important; padding: 0 !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 03 — CONTEXT TITLE Keep it compact. It must never consume the full row on desktop. ========================================================= */ .elementor-386065 .elementor-element.elementor-element-4aa0f02 .lva-category-context-title { position: relative !important; width: auto !important; max-width: none !important; min-width: max-content !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: center !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding: 0 !important; color: #d28799 !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 800 !important; font-style: normal !important; letter-spacing: 0.11em !important; text-align: left !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important; opacity: 1 !important; visibility: visible !important; transform: none !important; overflow: visible !important; box-sizing: border-box !important; --width: auto !important; } /* ========================================================= 04 — CONTEXT TITLE WIDGET CONTAINER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-4aa0f02 .lva-category-context-title > .elementor-widget-container { position: relative !important; width: auto !important; max-width: none !important; min-width: max-content !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; color: inherit !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 05 — CONTEXT TITLE SHORTCODE ========================================================= */ .elementor-386065 .elementor-element.elementor-element-4aa0f02 .lva-category-context-title .elementor-shortcode { position: relative !important; width: auto !important; max-width: none !important; min-width: max-content !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin: 0 !important; padding: 0 !important; color: #d28799 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: 0.11em !important; text-align: left !important; text-transform: uppercase !important; white-space: nowrap !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 06 — RANGE LINKS WIDGET Takes all remaining horizontal width. ========================================================= */ .elementor-386065 .elementor-element.elementor-element-4aa0f02 .lva-archive-range-links { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 34px !important; max-height: none !important; display: block !important; flex-grow: 1 !important; flex-shrink: 1 !important; flex-basis: 0 !important; align-self: center !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding: 0 !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; --width: auto !important; } /* ========================================================= 07 — RANGE LINKS ELEMENTOR WRAPPER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-4aa0f02 .lva-archive-range-links > .elementor-widget-container { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 34px !important; max-height: none !important; display: block !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 08 — DESKTOP RANGE LINK OUTPUT Explicitly left-align links immediately after the title. ========================================================= */ .elementor-386065 .elementor-element.elementor-element-4aa0f02 .lva-archive-range-links .elementor-shortcode { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 34px !important; max-height: none !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: wrap !important; column-gap: 7px !important; row-gap: 7px !important; margin: 0 !important; padding: 0 !important; text-align: left !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 09 — TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-4aa0f02 { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; flex-wrap: nowrap !important; column-gap: 0 !important; row-gap: 9px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; --display: flex !important; --flex-direction: column !important; --justify-content: flex-start !important; --align-items: stretch !important; --flex-wrap: nowrap !important; --gap: 9px 0px !important; } .elementor-386065 .elementor-element.elementor-element-4aa0f02 > .e-con-inner { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; flex-wrap: nowrap !important; row-gap: 9px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .elementor-386065 .elementor-element.elementor-element-4aa0f02 .lva-category-context-title { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 12px !important; max-height: none !important; display: block !important; flex: 0 0 auto !important; align-self: stretch !important; margin: 0 !important; padding: 0 !important; } .elementor-386065 .elementor-element.elementor-element-4aa0f02 .lva-category-context-title > .elementor-widget-container, .elementor-386065 .elementor-element.elementor-element-4aa0f02 .lva-category-context-title .elementor-shortcode { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 12px !important; max-height: none !important; display: block !important; margin: 0 !important; padding: 0 !important; } .elementor-386065 .elementor-element.elementor-element-4aa0f02 .lva-archive-range-links { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; flex: 0 0 auto !important; align-self: stretch !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } } /* ========================================================= 10 — MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-4aa0f02 { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; flex-wrap: nowrap !important; column-gap: 0 !important; row-gap: 8px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; box-sizing: border-box !important; } .elementor-386065 .elementor-element.elementor-element-4aa0f02 > .e-con-inner { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; flex-wrap: nowrap !important; row-gap: 8px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .elementor-386065 .elementor-element.elementor-element-4aa0f02 .lva-category-context-title { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 12px !important; max-height: none !important; display: block !important; flex: 0 0 auto !important; align-self: stretch !important; margin: 0 !important; padding: 0 !important; font-size: 7px !important; line-height: 1.2 !important; white-space: nowrap !important; } .elementor-386065 .elementor-element.elementor-element-4aa0f02 .lva-category-context-title > .elementor-widget-container, .elementor-386065 .elementor-element.elementor-element-4aa0f02 .lva-category-context-title .elementor-shortcode { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 12px !important; display: block !important; margin: 0 !important; padding: 0 !important; } /* * IMPORTANT: * Do NOT alter the working mobile horizontal-scroll * implementation inside the shortcode. */ .elementor-386065 .elementor-element.elementor-element-4aa0f02 .lva-archive-range-links { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; display: block !important; flex: 0 0 46px !important; align-self: stretch !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-80e3b45 *//* ========================================================= LOVELLA — PRODUCT ARCHIVE PRODUCT COUNT ELEMENT: 04.3.1.1 — Archive Controls | Product Count CSS CLASS: lva-archive-product-count OUTPUT: 4 products ========================================================= */ /* ========================================================= 01 — WIDGET ROOT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-80e3b45 { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 18px !important; max-height: none !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; column-gap: 0 !important; row-gap: 0 !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: center !important; margin: 0 !important; padding: 0 !important; color: #8d8580 !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 10px !important; line-height: 1.2 !important; font-weight: 500 !important; font-style: normal !important; letter-spacing: 0.025em !important; text-align: left !important; text-transform: none !important; text-decoration: none !important; white-space: nowrap !important; opacity: 1 !important; visibility: visible !important; transform: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 02 — ELEMENTOR WIDGET CONTAINER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-80e3b45 > .elementor-widget-container { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 18px !important; max-height: none !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; margin: 0 !important; padding: 0 !important; color: inherit !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 03 — SHORTCODE OUTPUT IMPORTANT: This is where the actual spacing is created. ========================================================= */ .elementor-386065 .elementor-element.elementor-element-80e3b45 .elementor-shortcode { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 18px !important; max-height: none !important; display: inline-flex !important; flex-direction: row !important; align-items: baseline !important; justify-content: flex-start !important; flex-wrap: nowrap !important; column-gap: 4px !important; row-gap: 0 !important; margin: 0 !important; padding: 0 !important; color: #8d8580 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 10px !important; line-height: 1.2 !important; font-weight: 500 !important; letter-spacing: 0.025em !important; white-space: nowrap !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 04 — NUMBER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-80e3b45 .lva-product-count-number { display: inline-block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background: transparent !important; border: 0 !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 10px !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: 0 !important; white-space: nowrap !important; } /* ========================================================= 05 — LABEL ========================================================= */ .elementor-386065 .elementor-element.elementor-element-80e3b45 .lva-product-count-label { display: inline-block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: #8d8580 !important; background: transparent !important; border: 0 !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 10px !important; line-height: 1.2 !important; font-weight: 500 !important; letter-spacing: 0.025em !important; white-space: nowrap !important; } /* ========================================================= 06 — TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-80e3b45, .elementor-386065 .elementor-element.elementor-element-80e3b45 > .elementor-widget-container, .elementor-386065 .elementor-element.elementor-element-80e3b45 .elementor-shortcode { min-height: 18px !important; } } /* ========================================================= 07 — MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-80e3b45 { width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 20px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; align-self: stretch !important; margin: 0 !important; padding: 0 !important; } .elementor-386065 .elementor-element.elementor-element-80e3b45 > .elementor-widget-container { min-height: 20px !important; } .elementor-386065 .elementor-element.elementor-element-80e3b45 .elementor-shortcode { min-height: 20px !important; column-gap: 4px !important; font-size: 10px !important; } .elementor-386065 .elementor-element.elementor-element-80e3b45 .lva-product-count-number, .elementor-386065 .elementor-element.elementor-element-80e3b45 .lva-product-count-label { font-size: 10px !important; } }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-eaf1b72 *//* ========================================================= LOVELLA — PRODUCT ARCHIVE DYNAMIC CATEGORY SEARCH PRIMARY SOURCE OF TRUTH Shortcode: [lovella_archive_search] DESKTOP: compact 340px search control TABLET: compact 290px search control MOBILE: full-width search control ========================================================= */ /* ========================================================= 01 — WIDGET ROOT — DESKTOP ========================================================= */ .elementor-386065 .elementor-element.elementor-element-eaf1b72 { position: relative !important; width: 340px !important; max-width: 340px !important; min-width: 260px !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; display: block !important; flex-grow: 0 !important; flex-shrink: 1 !important; flex-basis: 340px !important; align-self: center !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 11px !important; line-height: 1 !important; font-weight: 500 !important; font-style: normal !important; letter-spacing: 0 !important; text-align: left !important; text-transform: none !important; text-decoration: none !important; text-shadow: none !important; opacity: 1 !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 02 — ELEMENTOR WIDGET CONTAINER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-eaf1b72 .elementor-widget-container { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; display: block !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 03 — ELEMENTOR SHORTCODE WRAPPER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-eaf1b72 .elementor-shortcode { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; display: block !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 04 — SEARCH FORM ========================================================= */ .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-form { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; display: block !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 05 — ACCESSIBLE LABEL ========================================================= */ .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-label { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } /* ========================================================= 06 — SEARCH FIELD ========================================================= */ .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-field { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; column-gap: 0 !important; row-gap: 0 !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 44px !important; padding-bottom: 0 !important; padding-left: 38px !important; color: #211d1e !important; background-color: #ffffff !important; background-image: none !important; border-top: 1px solid rgba(33, 29, 30, 0.15) !important; border-right: 1px solid rgba(33, 29, 30, 0.15) !important; border-bottom: 1px solid rgba(33, 29, 30, 0.15) !important; border-left: 1px solid rgba(33, 29, 30, 0.15) !important; border-radius: 999px !important; box-shadow: none !important; opacity: 1 !important; overflow: hidden !important; transition: border-color 0.20s ease, background-color 0.20s ease, box-shadow 0.20s ease !important; box-sizing: border-box !important; } /* ========================================================= 07 — FIELD HOVER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-field:hover { background-color: #ffffff !important; border-top-color: rgba(210, 135, 153, 0.55) !important; border-right-color: rgba(210, 135, 153, 0.55) !important; border-bottom-color: rgba(210, 135, 153, 0.55) !important; border-left-color: rgba(210, 135, 153, 0.55) !important; box-shadow: none !important; } /* ========================================================= 08 — FIELD FOCUS STATE ========================================================= */ .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-field:focus-within { background-color: #ffffff !important; border-top-color: #d28799 !important; border-right-color: #d28799 !important; border-bottom-color: #d28799 !important; border-left-color: #d28799 !important; box-shadow: 0 0 0 2px rgba(210, 135, 153, 0.10) !important; } /* ========================================================= 09 — SEARCH ICON ========================================================= */ .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-icon { position: absolute !important; top: 50% !important; left: 14px !important; width: 16px !important; height: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; color: #8d8580 !important; background-color: transparent !important; border: 0 !important; transform: translateY(-50%) !important; pointer-events: none !important; z-index: 2 !important; } /* ========================================================= 10 — SEARCH ICON SVG ========================================================= */ .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-icon svg { position: relative !important; width: 16px !important; height: 16px !important; display: block !important; margin: 0 !important; padding: 0 !important; color: inherit !important; fill: none !important; overflow: visible !important; } /* ========================================================= 11 — SEARCH INPUT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-input { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; display: block !important; flex-grow: 1 !important; flex-shrink: 1 !important; flex-basis: auto !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; -webkit-text-fill-color: #211d1e !important; background-color: transparent !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 10px !important; line-height: 40px !important; font-weight: 500 !important; font-style: normal !important; letter-spacing: 0.02em !important; text-align: left !important; text-transform: none !important; text-decoration: none !important; opacity: 1 !important; appearance: none !important; -webkit-appearance: none !important; box-sizing: border-box !important; } /* ========================================================= 12 — PLACEHOLDER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-input::placeholder { color: #8d8580 !important; -webkit-text-fill-color: #8d8580 !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 10px !important; line-height: 1 !important; font-weight: 500 !important; font-style: normal !important; letter-spacing: 0.02em !important; opacity: 1 !important; } /* ========================================================= 13 — INPUT FOCUS ========================================================= */ .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-input:focus { color: #211d1e !important; background-color: transparent !important; border: 0 !important; outline: none !important; box-shadow: none !important; } /* ========================================================= 14 — REMOVE BROWSER SEARCH DECORATION ========================================================= */ .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-input::-webkit-search-decoration, .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-input::-webkit-search-cancel-button, .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-input::-webkit-search-results-button, .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-input::-webkit-search-results-decoration { display: none !important; -webkit-appearance: none !important; } /* ========================================================= 15 — SUBMIT BUTTON ========================================================= */ .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-submit { position: absolute !important; top: 50% !important; right: 5px !important; width: 32px !important; min-width: 32px !important; max-width: 32px !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background-color: #fbefee !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 50% !important; outline: none !important; box-shadow: none !important; cursor: pointer !important; transform: translateY(-50%) !important; transition: color 0.20s ease, background-color 0.20s ease, transform 0.20s ease !important; z-index: 3 !important; box-sizing: border-box !important; } /* ========================================================= 16 — SUBMIT ICON ========================================================= */ .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-submit svg { position: relative !important; width: 15px !important; height: 15px !important; display: block !important; margin: 0 !important; padding: 0 !important; color: inherit !important; fill: none !important; pointer-events: none !important; } /* ========================================================= 17 — SUBMIT HOVER / FOCUS ========================================================= */ .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-submit:hover, .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-submit:focus { color: #ffffff !important; background-color: #d28799 !important; background-image: none !important; border: 0 !important; outline: none !important; box-shadow: none !important; transform: translateY(-50%) !important; } .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-submit:focus-visible { outline: 2px solid #d28799 !important; outline-offset: 2px !important; } /* ========================================================= 18 — SUBMIT ACTIVE ========================================================= */ .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-submit:active { color: #ffffff !important; background-color: #a75f70 !important; transform: translateY(-50%) !important; } /* ========================================================= 19 — HIDDEN INPUT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-eaf1b72 input[type="hidden"] { display: none !important; } /* ========================================================= 20 — TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-eaf1b72 { width: 290px !important; max-width: 290px !important; min-width: 220px !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; flex-basis: 290px !important; margin: 0 !important; padding: 0 !important; } .elementor-386065 .elementor-element.elementor-element-eaf1b72 .elementor-widget-container, .elementor-386065 .elementor-element.elementor-element-eaf1b72 .elementor-shortcode, .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-form { width: 100% !important; max-width: 100% !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; margin: 0 !important; padding: 0 !important; } .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-field { width: 100% !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; padding-top: 0 !important; padding-right: 42px !important; padding-bottom: 0 !important; padding-left: 36px !important; border-radius: 999px !important; } .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-icon { left: 13px !important; width: 15px !important; height: 15px !important; } .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-icon svg { width: 15px !important; height: 15px !important; } .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-input { height: 38px !important; min-height: 38px !important; max-height: 38px !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 9px !important; line-height: 38px !important; font-weight: 500 !important; letter-spacing: 0.02em !important; } .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-input::placeholder { font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 9px !important; line-height: 1 !important; font-weight: 500 !important; letter-spacing: 0.02em !important; } .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-submit { right: 4px !important; width: 32px !important; min-width: 32px !important; max-width: 32px !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; } } /* ========================================================= 21 — MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-eaf1b72 { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; display: block !important; flex-grow: 0 !important; flex-shrink: 1 !important; flex-basis: auto !important; align-self: stretch !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .elementor-386065 .elementor-element.elementor-element-eaf1b72 .elementor-widget-container, .elementor-386065 .elementor-element.elementor-element-eaf1b72 .elementor-shortcode, .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-form { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; display: block !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-field { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; display: flex !important; align-items: center !important; padding-top: 0 !important; padding-right: 48px !important; padding-bottom: 0 !important; padding-left: 40px !important; background-color: #ffffff !important; border-top: 1px solid rgba(33, 29, 30, 0.15) !important; border-right: 1px solid rgba(33, 29, 30, 0.15) !important; border-bottom: 1px solid rgba(33, 29, 30, 0.15) !important; border-left: 1px solid rgba(33, 29, 30, 0.15) !important; border-radius: 999px !important; box-shadow: none !important; overflow: hidden !important; } .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-icon { left: 15px !important; width: 16px !important; height: 16px !important; } .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-icon svg { width: 16px !important; height: 16px !important; } .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-input { width: 100% !important; max-width: 100% !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 11px !important; line-height: 44px !important; font-weight: 500 !important; letter-spacing: 0.01em !important; } .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-input::placeholder { color: #8d8580 !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 11px !important; line-height: 1 !important; font-weight: 500 !important; letter-spacing: 0.01em !important; opacity: 1 !important; } .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-submit { right: 5px !important; width: 36px !important; min-width: 36px !important; max-width: 36px !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; border-radius: 50% !important; } .elementor-386065 .elementor-element.elementor-element-eaf1b72 .lva-archive-search-submit svg { width: 15px !important; height: 15px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-a7d405d *//* ========================================================= LOVELLA — PRODUCT ARCHIVE ARCHIVE CONTROLS LEFT GROUP ELEMENT: 04.3.1 — Archive Controls | Left Group CONTAINS: - Product Count - Product Search MOBILE PURPOSE: Create one clean vertical information/search block instead of squeezing desktop controls into a narrow viewport. ========================================================= */ /* ========================================================= 01 — ROOT — DESKTOP ========================================================= */ .elementor-386065 .elementor-element.elementor-element-a7d405d { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; flex-grow: 1 !important; flex-shrink: 1 !important; flex-basis: auto !important; align-self: center !important; column-gap: 18px !important; row-gap: 0 !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; opacity: 1 !important; visibility: visible !important; transform: none !important; overflow: visible !important; box-sizing: border-box !important; --justify-content: flex-start !important; --align-items: center !important; --flex-direction: row !important; --flex-wrap: nowrap !important; } /* ========================================================= 02 — ELEMENTOR INNER WRAPPER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-a7d405d > .e-con-inner { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; column-gap: 18px !important; row-gap: 0 !important; margin: 0 !important; padding: 0 !important; color: inherit !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 03 — DIRECT CHILD FOUNDATION ========================================================= */ .elementor-386065 .elementor-element.elementor-element-a7d405d > .elementor-element, .elementor-386065 .elementor-element.elementor-element-a7d405d > .e-con-inner > .elementor-element { position: relative !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding: 0 !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; box-sizing: border-box !important; } /* ========================================================= 04 — PRODUCT COUNT CHILD ========================================================= */ .elementor-386065 .elementor-element.elementor-element-a7d405d .lva-archive-product-count { width: auto !important; max-width: 100% !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: center !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= 05 — SEARCH CHILD ========================================================= */ .elementor-386065 .elementor-element.elementor-element-a7d405d .lva-archive-search-widget { width: min(420px, 100%) !important; max-width: 420px !important; min-width: 280px !important; flex-grow: 0 !important; flex-shrink: 1 !important; flex-basis: auto !important; align-self: center !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= 06 — TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-a7d405d { width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; column-gap: 14px !important; row-gap: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; --justify-content: flex-start !important; --align-items: center !important; --flex-direction: row !important; --flex-wrap: nowrap !important; } .elementor-386065 .elementor-element.elementor-element-a7d405d > .e-con-inner { width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; column-gap: 14px !important; row-gap: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .elementor-386065 .elementor-element.elementor-element-a7d405d .lva-archive-product-count { width: auto !important; align-self: center !important; margin: 0 !important; padding: 0 !important; } .elementor-386065 .elementor-element.elementor-element-a7d405d .lva-archive-search-widget { width: min(400px, 100%) !important; max-width: 400px !important; min-width: 240px !important; align-self: center !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================= 07 — MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-a7d405d { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; flex-wrap: nowrap !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: stretch !important; column-gap: 0 !important; row-gap: 10px !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 14px !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; overflow: visible !important; box-sizing: border-box !important; --justify-content: flex-start !important; --align-items: stretch !important; --flex-direction: column !important; --flex-wrap: nowrap !important; } /* ===================================================== MOBILE INNER WRAPPER ===================================================== */ .elementor-386065 .elementor-element.elementor-element-a7d405d > .e-con-inner { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; flex-wrap: nowrap !important; column-gap: 0 !important; row-gap: 10px !important; margin: 0 !important; padding: 0 !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ===================================================== MOBILE PRODUCT COUNT ===================================================== */ .elementor-386065 .elementor-element.elementor-element-a7d405d .lva-archive-product-count { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; display: block !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: stretch !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } /* ===================================================== MOBILE SEARCH ===================================================== */ .elementor-386065 .elementor-element.elementor-element-a7d405d .lva-archive-search-widget { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: stretch !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding: 0 !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ===================================================== PREVENT ELEMENTOR CHILD WIDTH OVERRIDES ===================================================== */ .elementor-386065 .elementor-element.elementor-element-a7d405d > .elementor-element, .elementor-386065 .elementor-element.elementor-element-a7d405d > .e-con-inner > .elementor-element { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; align-self: stretch !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; box-sizing: border-box !important; } } /* ========================================================= 08 — REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-386065 .elementor-element.elementor-element-a7d405d, .elementor-386065 .elementor-element.elementor-element-a7d405d *, .elementor-386065 .elementor-element.elementor-element-a7d405d::before, .elementor-386065 .elementor-element.elementor-element-a7d405d::after { transition: none !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-075aab0 *//* ========================================================= LOVELLA — PRODUCT ARCHIVE FILTER TRIGGER PRIMARY SOURCE OF TRUTH APPROVED DESIGN: - rectangular outlined control - 46px desktop height - filter/sliders icon on left - FILTER uppercase - square corners - matches Best Selling control - subtle premium hover state ========================================================= */ /* ========================================================= 01 — WIDGET ROOT — DESKTOP ========================================================= */ .elementor-386065 .elementor-element.elementor-element-075aab0 { position: relative !important; width: 112px !important; max-width: 112px !important; min-width: 112px !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; display: block !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: 112px !important; align-self: center !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; opacity: 1 !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 02 — ELEMENTOR CONTAINER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-075aab0 .elementor-widget-container { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; display: block !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 03 — ELEMENTOR BUTTON WRAPPER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-075aab0 .elementor-button-wrapper { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 04 — BUTTON ========================================================= */ .elementor-386065 .elementor-element.elementor-element-075aab0 .elementor-button { position: relative !important; width: 112px !important; max-width: 112px !important; min-width: 112px !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; column-gap: 0 !important; row-gap: 0 !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 15px !important; padding-bottom: 0 !important; padding-left: 15px !important; color: #211d1e !important; background-color: #ffffff !important; background-image: none !important; border-top: 1px solid rgba(33, 29, 30, 0.18) !important; border-right: 1px solid rgba(33, 29, 30, 0.18) !important; border-bottom: 1px solid rgba(33, 29, 30, 0.18) !important; border-left: 1px solid rgba(33, 29, 30, 0.18) !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 800 !important; font-style: normal !important; letter-spacing: 0.07em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; text-shadow: none !important; white-space: nowrap !important; cursor: pointer !important; opacity: 1 !important; transform: none !important; transition: color 0.20s ease, background-color 0.20s ease, border-color 0.20s ease !important; overflow: hidden !important; box-sizing: border-box !important; } /* ========================================================= 05 — BUTTON CONTENT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-075aab0 .elementor-button-content-wrapper { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; column-gap: 0 !important; row-gap: 0 !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: inherit !important; background-color: transparent !important; border: 0 !important; line-height: 1 !important; box-sizing: border-box !important; } /* ========================================================= 06 — HIDE ELEMENTOR'S OWN ICON We use a controlled CSS icon below so the appearance is identical across browsers and Elementor icon versions. ========================================================= */ .elementor-386065 .elementor-element.elementor-element-075aab0 .elementor-button-icon { display: none !important; } /* ========================================================= 07 — TEXT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-075aab0 .elementor-button-text { position: relative !important; width: auto !important; max-width: 100% !important; height: auto !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; column-gap: 9px !important; row-gap: 0 !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: inherit !important; background-color: transparent !important; border: 0 !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 800 !important; font-style: normal !important; letter-spacing: 0.07em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; white-space: nowrap !important; box-sizing: border-box !important; } /* ========================================================= 08 — CSS FILTER / SLIDERS ICON ========================================================= */ .elementor-386065 .elementor-element.elementor-element-075aab0 .elementor-button-text::before { content: "" !important; position: relative !important; width: 13px !important; min-width: 13px !important; max-width: 13px !important; height: 13px !important; min-height: 13px !important; max-height: 13px !important; display: block !important; flex-grow: 0 !important; flex-shrink: 0 !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding: 0 !important; background-color: currentColor !important; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h10M18 7h2M4 12h4M12 12h8M4 17h10M18 17h2' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='7' r='2' fill='none' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='10' cy='12' r='2' fill='none' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='16' cy='17' r='2' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") !important; -webkit-mask-position: center !important; -webkit-mask-repeat: no-repeat !important; -webkit-mask-size: contain !important; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h10M18 7h2M4 12h4M12 12h8M4 17h10M18 17h2' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='7' r='2' fill='none' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='10' cy='12' r='2' fill='none' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='16' cy='17' r='2' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") !important; mask-position: center !important; mask-repeat: no-repeat !important; mask-size: contain !important; border: 0 !important; opacity: 0.78 !important; pointer-events: none !important; box-sizing: border-box !important; transition: background-color 0.20s ease, opacity 0.20s ease !important; } /* ========================================================= 09 — HOVER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-075aab0 .elementor-button:hover { color: #211d1e !important; background-color: #fbefee !important; background-image: none !important; border-top-color: #d28799 !important; border-right-color: #d28799 !important; border-bottom-color: #d28799 !important; border-left-color: #d28799 !important; box-shadow: none !important; text-decoration: none !important; transform: none !important; } .elementor-386065 .elementor-element.elementor-element-075aab0 .elementor-button:hover .elementor-button-text::before { background-color: #d28799 !important; opacity: 1 !important; } /* ========================================================= 10 — FOCUS ========================================================= */ .elementor-386065 .elementor-element.elementor-element-075aab0 .elementor-button:focus { color: #211d1e !important; background-color: #ffffff !important; border-top-color: #d28799 !important; border-right-color: #d28799 !important; border-bottom-color: #d28799 !important; border-left-color: #d28799 !important; outline: none !important; box-shadow: 0 0 0 2px rgba(210, 135, 153, 0.10) !important; text-decoration: none !important; } .elementor-386065 .elementor-element.elementor-element-075aab0 .elementor-button:focus-visible { outline: 2px solid #d28799 !important; outline-offset: 2px !important; } /* ========================================================= 11 — ACTIVE ========================================================= */ .elementor-386065 .elementor-element.elementor-element-075aab0 .elementor-button:active { color: #ffffff !important; background-color: #211d1e !important; background-image: none !important; border-top-color: #211d1e !important; border-right-color: #211d1e !important; border-bottom-color: #211d1e !important; border-left-color: #211d1e !important; box-shadow: none !important; transform: none !important; } .elementor-386065 .elementor-element.elementor-element-075aab0 .elementor-button:active .elementor-button-text::before { background-color: #ffffff !important; opacity: 1 !important; } /* ========================================================= 12 — VISITED RESET ========================================================= */ .elementor-386065 .elementor-element.elementor-element-075aab0 .elementor-button:visited { color: #211d1e !important; } /* ========================================================= 13 — TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-075aab0 { width: 104px !important; max-width: 104px !important; min-width: 104px !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; flex-basis: 104px !important; margin: 0 !important; padding: 0 !important; } .elementor-386065 .elementor-element.elementor-element-075aab0 .elementor-widget-container, .elementor-386065 .elementor-element.elementor-element-075aab0 .elementor-button-wrapper { width: 100% !important; max-width: 100% !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; margin: 0 !important; padding: 0 !important; } .elementor-386065 .elementor-element.elementor-element-075aab0 .elementor-button { width: 104px !important; max-width: 104px !important; min-width: 104px !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; padding-top: 0 !important; padding-right: 13px !important; padding-bottom: 0 !important; padding-left: 13px !important; border-radius: 0 !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: 0.06em !important; } .elementor-386065 .elementor-element.elementor-element-075aab0 .elementor-button-text { column-gap: 8px !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: 0.06em !important; } .elementor-386065 .elementor-element.elementor-element-075aab0 .elementor-button-text::before { width: 12px !important; min-width: 12px !important; max-width: 12px !important; height: 12px !important; min-height: 12px !important; max-height: 12px !important; } } /* ========================================================= 14 — MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-075aab0 { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; display: block !important; flex-grow: 1 !important; flex-shrink: 1 !important; flex-basis: 0 !important; align-self: stretch !important; margin: 0 !important; padding: 0 !important; } .elementor-386065 .elementor-element.elementor-element-075aab0 .elementor-widget-container, .elementor-386065 .elementor-element.elementor-element-075aab0 .elementor-button-wrapper { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; } .elementor-386065 .elementor-element.elementor-element-075aab0 .elementor-button { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding-top: 0 !important; padding-right: 12px !important; padding-bottom: 0 !important; padding-left: 12px !important; color: #211d1e !important; background-color: #ffffff !important; border-top: 1px solid rgba(33, 29, 30, 0.18) !important; border-right: 1px solid rgba(33, 29, 30, 0.18) !important; border-bottom: 1px solid rgba(33, 29, 30, 0.18) !important; border-left: 1px solid rgba(33, 29, 30, 0.18) !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: 0.06em !important; text-align: center !important; text-transform: uppercase !important; white-space: nowrap !important; box-sizing: border-box !important; } .elementor-386065 .elementor-element.elementor-element-075aab0 .elementor-button-text { width: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; column-gap: 8px !important; margin: 0 !important; padding: 0 !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: 0.06em !important; } .elementor-386065 .elementor-element.elementor-element-075aab0 .elementor-button-text::before { width: 13px !important; min-width: 13px !important; max-width: 13px !important; height: 13px !important; min-height: 13px !important; max-height: 13px !important; } .elementor-386065 .elementor-element.elementor-element-075aab0 .elementor-button:hover, .elementor-386065 .elementor-element.elementor-element-075aab0 .elementor-button:focus { color: #211d1e !important; background-color: #fbefee !important; border-top-color: #d28799 !important; border-right-color: #d28799 !important; border-bottom-color: #d28799 !important; border-left-color: #d28799 !important; } }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-191e10b *//* ========================================================= LOVELLA — PRODUCT ARCHIVE BEST SELLING SORT CONTROL PRIMARY SOURCE OF TRUTH APPROVED DESIGN: - rectangular control - no visible "SORT PRODUCTS" label - Best Selling text left - clean downward chevron right - thin neutral border - no pill shape ========================================================= */ /* ========================================================= 01 — WIDGET ROOT — DESKTOP ========================================================= */ .elementor-386065 .elementor-element.elementor-element-191e10b { position: relative !important; width: 190px !important; max-width: 190px !important; min-width: 190px !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; display: block !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: 190px !important; align-self: center !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; opacity: 1 !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 02 — ELEMENTOR WRAPPERS ========================================================= */ .elementor-386065 .elementor-element.elementor-element-191e10b .elementor-widget-container, .elementor-386065 .elementor-element.elementor-element-191e10b .elementor-shortcode, .elementor-386065 .elementor-element.elementor-element-191e10b .lva-archive-sorting { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; display: block !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 03 — HIDE ACCESSIBILITY LABEL VISUALLY Keeps label available to screen readers but removes the visible "SORT PRODUCTS" text seen in the screenshot. ========================================================= */ .elementor-386065 .elementor-element.elementor-element-191e10b .lva-archive-sorting-label { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; } /* ========================================================= 04 — WOOCOMMERCE FORM ========================================================= */ .elementor-386065 .elementor-element.elementor-element-191e10b .woocommerce-ordering, .elementor-386065 .elementor-element.elementor-element-191e10b .lva-archive-sorting-form { position: relative !important; float: none !important; clear: none !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; display: block !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 05 — CUSTOM CHEVRON ========================================================= */ .elementor-386065 .elementor-element.elementor-element-191e10b .woocommerce-ordering::after { content: "" !important; position: absolute !important; top: 50% !important; right: 17px !important; width: 7px !important; height: 7px !important; display: block !important; margin: 0 !important; padding: 0 !important; background-color: transparent !important; background-image: none !important; border-top: 0 !important; border-left: 0 !important; border-right: 1.25px solid #211d1e !important; border-bottom: 1.25px solid #211d1e !important; transform: translateY(-68%) rotate(45deg) !important; transform-origin: center !important; pointer-events: none !important; z-index: 3 !important; box-sizing: border-box !important; transition: border-color 0.20s ease !important; } /* ========================================================= 06 — SELECT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-191e10b .woocommerce-ordering select.orderby, .elementor-386065 .elementor-element.elementor-element-191e10b .lva-archive-sorting-select { position: relative !important; float: none !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; display: block !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 46px !important; padding-bottom: 0 !important; padding-left: 16px !important; color: #211d1e !important; -webkit-text-fill-color: #211d1e !important; background-color: #ffffff !important; background-image: none !important; border-top: 1px solid rgba(33, 29, 30, 0.18) !important; border-right: 1px solid rgba(33, 29, 30, 0.18) !important; border-bottom: 1px solid rgba(33, 29, 30, 0.18) !important; border-left: 1px solid rgba(33, 29, 30, 0.18) !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 9px !important; line-height: 1 !important; font-weight: 700 !important; font-style: normal !important; letter-spacing: 0.03em !important; text-align: left !important; text-transform: none !important; text-decoration: none !important; text-shadow: none !important; white-space: nowrap !important; cursor: pointer !important; opacity: 1 !important; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; transition: color 0.20s ease, background-color 0.20s ease, border-color 0.20s ease !important; box-sizing: border-box !important; } /* ========================================================= 07 — HOVER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-191e10b .woocommerce-ordering:hover select.orderby, .elementor-386065 .elementor-element.elementor-element-191e10b .lva-archive-sorting-form:hover .lva-archive-sorting-select { color: #211d1e !important; -webkit-text-fill-color: #211d1e !important; background-color: #fbefee !important; border-top-color: #d28799 !important; border-right-color: #d28799 !important; border-bottom-color: #d28799 !important; border-left-color: #d28799 !important; box-shadow: none !important; } .elementor-386065 .elementor-element.elementor-element-191e10b .woocommerce-ordering:hover::after { border-right-color: #d28799 !important; border-bottom-color: #d28799 !important; } /* ========================================================= 08 — FOCUS ========================================================= */ .elementor-386065 .elementor-element.elementor-element-191e10b .woocommerce-ordering select.orderby:focus, .elementor-386065 .elementor-element.elementor-element-191e10b .lva-archive-sorting-select:focus { color: #211d1e !important; -webkit-text-fill-color: #211d1e !important; background-color: #ffffff !important; border-top-color: #d28799 !important; border-right-color: #d28799 !important; border-bottom-color: #d28799 !important; border-left-color: #d28799 !important; outline: none !important; box-shadow: 0 0 0 2px rgba(210, 135, 153, 0.10) !important; } /* ========================================================= 09 — OPTIONS ========================================================= */ .elementor-386065 .elementor-element.elementor-element-191e10b .woocommerce-ordering select.orderby option, .elementor-386065 .elementor-element.elementor-element-191e10b .lva-archive-sorting-select option { color: #211d1e !important; background-color: #ffffff !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 12px !important; line-height: 1.4 !important; font-weight: 500 !important; font-style: normal !important; letter-spacing: 0 !important; text-align: left !important; text-transform: none !important; } /* ========================================================= 10 — HIDDEN QUERY FIELDS ========================================================= */ .elementor-386065 .elementor-element.elementor-element-191e10b .woocommerce-ordering input[type="hidden"], .elementor-386065 .elementor-element.elementor-element-191e10b .lva-archive-sorting-form input[type="hidden"] { display: none !important; } /* ========================================================= 11 — THEME RESET ========================================================= */ .elementor-386065 .elementor-element.elementor-element-191e10b .woocommerce-ordering::before, .elementor-386065 .elementor-element.elementor-element-191e10b .lva-archive-sorting::before, .elementor-386065 .elementor-element.elementor-element-191e10b .lva-archive-sorting::after, .elementor-386065 .elementor-element.elementor-element-191e10b .elementor-shortcode::before, .elementor-386065 .elementor-element.elementor-element-191e10b .elementor-shortcode::after { content: none !important; display: none !important; } /* Restore our custom chevron after theme reset. */ .elementor-386065 .elementor-element.elementor-element-191e10b .woocommerce-ordering::after { content: "" !important; display: block !important; } /* ========================================================= 12 — TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-191e10b { width: 176px !important; max-width: 176px !important; min-width: 176px !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; flex-basis: 176px !important; margin: 0 !important; padding: 0 !important; } .elementor-386065 .elementor-element.elementor-element-191e10b .elementor-widget-container, .elementor-386065 .elementor-element.elementor-element-191e10b .elementor-shortcode, .elementor-386065 .elementor-element.elementor-element-191e10b .lva-archive-sorting, .elementor-386065 .elementor-element.elementor-element-191e10b .woocommerce-ordering, .elementor-386065 .elementor-element.elementor-element-191e10b .lva-archive-sorting-form { width: 100% !important; max-width: 100% !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; margin: 0 !important; padding: 0 !important; } .elementor-386065 .elementor-element.elementor-element-191e10b .woocommerce-ordering select.orderby, .elementor-386065 .elementor-element.elementor-element-191e10b .lva-archive-sorting-select { width: 100% !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; padding-top: 0 !important; padding-right: 42px !important; padding-bottom: 0 !important; padding-left: 15px !important; border-radius: 0 !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 0.03em !important; } .elementor-386065 .elementor-element.elementor-element-191e10b .woocommerce-ordering::after { right: 16px !important; width: 7px !important; height: 7px !important; } } /* ========================================================= 13 — MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-191e10b { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; display: block !important; flex-grow: 1 !important; flex-shrink: 1 !important; flex-basis: 0 !important; align-self: stretch !important; margin: 0 !important; padding: 0 !important; } .elementor-386065 .elementor-element.elementor-element-191e10b .elementor-widget-container, .elementor-386065 .elementor-element.elementor-element-191e10b .elementor-shortcode, .elementor-386065 .elementor-element.elementor-element-191e10b .lva-archive-sorting, .elementor-386065 .elementor-element.elementor-element-191e10b .woocommerce-ordering, .elementor-386065 .elementor-element.elementor-element-191e10b .lva-archive-sorting-form { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; display: block !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } .elementor-386065 .elementor-element.elementor-element-191e10b .woocommerce-ordering select.orderby, .elementor-386065 .elementor-element.elementor-element-191e10b .lva-archive-sorting-select { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; display: block !important; margin: 0 !important; padding-top: 0 !important; padding-right: 40px !important; padding-bottom: 0 !important; padding-left: 14px !important; color: #211d1e !important; -webkit-text-fill-color: #211d1e !important; background-color: #ffffff !important; border-top: 1px solid rgba(33, 29, 30, 0.18) !important; border-right: 1px solid rgba(33, 29, 30, 0.18) !important; border-bottom: 1px solid rgba(33, 29, 30, 0.18) !important; border-left: 1px solid rgba(33, 29, 30, 0.18) !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 9px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 0.02em !important; text-align: left !important; text-transform: none !important; white-space: nowrap !important; cursor: pointer !important; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; box-sizing: border-box !important; } .elementor-386065 .elementor-element.elementor-element-191e10b .woocommerce-ordering::after { top: 50% !important; right: 15px !important; width: 7px !important; height: 7px !important; border-right: 1.25px solid #211d1e !important; border-bottom: 1.25px solid #211d1e !important; transform: translateY(-68%) rotate(45deg) !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-568d48d *//* ========================================================= LOVELLA — PRODUCT ARCHIVE ARCHIVE CONTROLS RIGHT GROUP ELEMENT: 04.3.2 — Archive Controls | Right Group CSS CLASS: lva-archive-controls-right CONTAINS: - Filter trigger - Best Selling sorting DESKTOP: Existing compact right-aligned controls. MOBILE: Two equal-width touch-friendly controls. ========================================================= */ /* ========================================================= 01 — ROOT — DESKTOP ========================================================= */ .elementor-386065 .elementor-element.elementor-element-568d48d { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 46px !important; max-height: none !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: nowrap !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: center !important; column-gap: 8px !important; row-gap: 0 !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; overflow: visible !important; box-sizing: border-box !important; --display: flex !important; --flex-direction: row !important; --justify-content: flex-end !important; --align-items: center !important; --flex-wrap: nowrap !important; --gap: 0px 8px !important; } /* ========================================================= 02 — ELEMENTOR INNER WRAPPER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-568d48d > .e-con-inner { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 46px !important; max-height: none !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: nowrap !important; column-gap: 8px !important; row-gap: 0 !important; margin: 0 !important; padding: 0 !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 03 — DIRECT CHILD FOUNDATION ========================================================= */ .elementor-386065 .elementor-element.elementor-element-568d48d > .elementor-element, .elementor-386065 .elementor-element.elementor-element-568d48d > .e-con-inner > .elementor-element { position: relative !important; min-width: 0 !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: center !important; margin: 0 !important; padding: 0 !important; transform: none !important; box-sizing: border-box !important; } /* ========================================================= 04 — FILTER WIDGET DESKTOP SIZE REMAINS AS ALREADY DESIGNED ========================================================= */ .elementor-386065 .elementor-element.elementor-element-568d48d .lva-archive-filter-trigger { width: 112px !important; max-width: 112px !important; min-width: 112px !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; flex: 0 0 112px !important; margin: 0 !important; align-self: center !important; } /* ========================================================= 05 — SORTING WIDGET DESKTOP SIZE REMAINS AS ALREADY DESIGNED ========================================================= */ .elementor-386065 .elementor-element.elementor-element-568d48d .lva-archive-sorting-widget { width: 190px !important; max-width: 190px !important; min-width: 190px !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; flex: 0 0 190px !important; margin: 0 !important; align-self: center !important; } /* ========================================================= 06 — TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-568d48d { width: auto !important; max-width: 100% !important; min-width: 0 !important; min-height: 46px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: nowrap !important; column-gap: 8px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } .elementor-386065 .elementor-element.elementor-element-568d48d > .e-con-inner { width: auto !important; max-width: 100% !important; min-height: 46px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: nowrap !important; column-gap: 8px !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================= 07 — MOBILE IMPORTANT: Right Group becomes a two-column grid. Each control: - 50% available width - 48px high - equal visual weight ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-568d48d { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 48px !important; max-height: none !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: 48px !important; align-items: stretch !important; justify-items: stretch !important; column-gap: 8px !important; row-gap: 0 !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: stretch !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ===================================================== MOBILE INNER WRAPPER ===================================================== */ .elementor-386065 .elementor-element.elementor-element-568d48d > .e-con-inner { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: 48px !important; align-items: stretch !important; justify-items: stretch !important; column-gap: 8px !important; row-gap: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ===================================================== MOBILE DIRECT CHILDREN ===================================================== */ .elementor-386065 .elementor-element.elementor-element-568d48d > .elementor-element, .elementor-386065 .elementor-element.elementor-element-568d48d > .e-con-inner > .elementor-element { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; flex: none !important; align-self: stretch !important; margin: 0 !important; padding: 0 !important; transform: none !important; box-sizing: border-box !important; } /* ===================================================== MOBILE FILTER ===================================================== */ .elementor-386065 .elementor-element.elementor-element-568d48d .lva-archive-filter-trigger { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; grid-column: 1 !important; grid-row: 1 !important; margin: 0 !important; align-self: stretch !important; justify-self: stretch !important; } /* ===================================================== MOBILE SORTING ===================================================== */ .elementor-386065 .elementor-element.elementor-element-568d48d .lva-archive-sorting-widget { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; grid-column: 2 !important; grid-row: 1 !important; margin: 0 !important; align-self: stretch !important; justify-self: stretch !important; } } /* ========================================================= 08 — VERY SMALL MOBILE ========================================================= */ @media (max-width: 380px) { .elementor-386065 .elementor-element.elementor-element-568d48d, .elementor-386065 .elementor-element.elementor-element-568d48d > .e-con-inner { column-gap: 6px !important; } } /* ========================================================= 09 — REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-386065 .elementor-element.elementor-element-568d48d, .elementor-386065 .elementor-element.elementor-element-568d48d *, .elementor-386065 .elementor-element.elementor-element-568d48d::before, .elementor-386065 .elementor-element.elementor-element-568d48d::after { transition: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-c7b66e3 *//* ========================================================= LOVELLA — PRODUCT ARCHIVE CONTROLS OUTER PRIMARY SOURCE OF TRUTH Approved archive design structure: LEFT - product result count - archive search RIGHT - filter trigger - WooCommerce sorting DESKTOP / TABLET: horizontal control bar MOBILE: stacked control groups Elementor settings are fallback only. ========================================================= */ /* ========================================================= 01 — ROOT — DESKTOP ========================================================= */ .elementor-386065 .elementor-element.elementor-element-c7b66e3 { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 72px !important; max-height: none !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; flex-grow: 0 !important; flex-shrink: 1 !important; flex-basis: auto !important; align-self: stretch !important; column-gap: 24px !important; row-gap: 0 !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 14px !important; padding-right: 0 !important; padding-bottom: 14px !important; padding-left: 0 !important; color: #211d1e !important; background-color: #ffffff !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 1px solid rgba(33, 29, 30, 0.13) !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 12px !important; line-height: 1.4 !important; font-weight: 400 !important; font-style: normal !important; letter-spacing: 0 !important; text-align: left !important; text-transform: none !important; text-decoration: none !important; text-shadow: none !important; opacity: 1 !important; overflow: visible !important; z-index: auto; box-sizing: border-box !important; --min-height: 72px !important; --justify-content: space-between !important; --align-items: center !important; --flex-wrap: nowrap !important; } /* ========================================================= 02 — ELEMENTOR INNER WRAPPER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-c7b66e3 > .e-con-inner { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 42px !important; max-height: none !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; column-gap: 24px !important; row-gap: 0 !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 03 — DIRECT CHILD PROTECTION ========================================================= */ .elementor-386065 .elementor-element.elementor-element-c7b66e3 > .elementor-element, .elementor-386065 .elementor-element.elementor-element-c7b66e3 > .e-con-inner > .elementor-element { position: relative !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; flex-grow: 0 !important; flex-shrink: 1 !important; flex-basis: auto !important; align-self: center !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; box-sizing: border-box !important; } /* ========================================================= 04 — TYPOGRAPHY INHERITANCE ========================================================= */ .elementor-386065 .elementor-element.elementor-element-c7b66e3, .elementor-386065 .elementor-element.elementor-element-c7b66e3 div, .elementor-386065 .elementor-element.elementor-element-c7b66e3 span, .elementor-386065 .elementor-element.elementor-element-c7b66e3 p, .elementor-386065 .elementor-element.elementor-element-c7b66e3 a, .elementor-386065 .elementor-element.elementor-element-c7b66e3 label, .elementor-386065 .elementor-element.elementor-element-c7b66e3 input, .elementor-386065 .elementor-element.elementor-element-c7b66e3 select, .elementor-386065 .elementor-element.elementor-element-c7b66e3 option, .elementor-386065 .elementor-element.elementor-element-c7b66e3 button { font-family: "Hanken Grotesk", Arial, sans-serif; } /* ========================================================= 05 — BASE FORM PROTECTION ========================================================= */ .elementor-386065 .elementor-element.elementor-element-c7b66e3 input, .elementor-386065 .elementor-element.elementor-element-c7b66e3 select, .elementor-386065 .elementor-element.elementor-element-c7b66e3 button { margin: 0; box-sizing: border-box; font-family: "Hanken Grotesk", Arial, sans-serif; border-radius: 0; box-shadow: none; outline: none; } /* ========================================================= 06 — BASE LINK PROTECTION ========================================================= */ .elementor-386065 .elementor-element.elementor-element-c7b66e3 a { color: #211d1e; background-color: transparent; font-family: "Hanken Grotesk", Arial, sans-serif; text-decoration: none; transition: color 0.20s ease, background-color 0.20s ease, border-color 0.20s ease; } .elementor-386065 .elementor-element.elementor-element-c7b66e3 a:hover, .elementor-386065 .elementor-element.elementor-element-c7b66e3 a:focus { color: #d28799; text-decoration: none; } /* ========================================================= 07 — TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-c7b66e3 { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 68px !important; max-height: none !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; flex-grow: 0 !important; flex-shrink: 1 !important; flex-basis: auto !important; align-self: stretch !important; column-gap: 18px !important; row-gap: 0 !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 13px !important; padding-right: 0 !important; padding-bottom: 13px !important; padding-left: 0 !important; color: #211d1e !important; background-color: #ffffff !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 1px solid rgba(33, 29, 30, 0.13) !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 12px !important; line-height: 1.4 !important; font-weight: 400 !important; letter-spacing: 0 !important; text-align: left !important; overflow: visible !important; box-sizing: border-box !important; --min-height: 68px !important; --justify-content: space-between !important; --align-items: center !important; --flex-wrap: nowrap !important; } .elementor-386065 .elementor-element.elementor-element-c7b66e3 > .e-con-inner { width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 42px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; column-gap: 18px !important; row-gap: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } } /* ========================================================= 08 — MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-c7b66e3 { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; flex-wrap: nowrap !important; flex-grow: 0 !important; flex-shrink: 1 !important; flex-basis: auto !important; align-self: stretch !important; column-gap: 0 !important; row-gap: 12px !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 14px !important; padding-right: 0 !important; padding-bottom: 14px !important; padding-left: 0 !important; color: #211d1e !important; background-color: #ffffff !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 1px solid rgba(33, 29, 30, 0.13) !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 12px !important; line-height: 1.4 !important; font-weight: 400 !important; font-style: normal !important; letter-spacing: 0 !important; text-align: left !important; overflow: visible !important; box-sizing: border-box !important; --min-height: 0px !important; --justify-content: flex-start !important; --align-items: stretch !important; --flex-wrap: nowrap !important; } .elementor-386065 .elementor-element.elementor-element-c7b66e3 > .e-con-inner { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; flex-wrap: nowrap !important; column-gap: 0 !important; row-gap: 12px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } .elementor-386065 .elementor-element.elementor-element-c7b66e3 > .elementor-element, .elementor-386065 .elementor-element.elementor-element-c7b66e3 > .e-con-inner > .elementor-element { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; flex-grow: 0 !important; flex-shrink: 1 !important; flex-basis: auto !important; align-self: stretch !important; margin: 0 !important; } }/* End custom CSS */ /* Start custom CSS for loop-grid, class: .elementor-element-9b3f52c *//* ========================================================= LOVELLA — PRODUCT ARCHIVE PRODUCT LOOP GRID ELEMENT: 04.4.1 — Product Grid | Loop Grid TEMPLATE: Lovella — Product Archive Card QUERY: Current Query RESPONSIVE GRID: Desktop = 3 columns Tablet = 2 columns Mobile = 1 column PAGINATION: Numbers + Previous/Next Center aligned Page reload ========================================================= */ /* ========================================================= 01 — WIDGET ROOT — DESKTOP ========================================================= */ .elementor-386065 .elementor-element.elementor-element-9b3f52c { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; opacity: 1 !important; overflow: visible !important; box-sizing: border-box !important; --grid-columns: 3 !important; --grid-column-gap: 24px !important; --grid-row-gap: 52px !important; } /* ========================================================= 02 — ELEMENTOR WIDGET CONTAINER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-9b3f52c > .elementor-widget-container { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 03 — LOOP CONTAINER — DESKTOP ========================================================= */ .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-loop-container { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-flow: row !important; grid-auto-rows: 1fr !important; align-items: stretch !important; justify-items: stretch !important; column-gap: 24px !important; row-gap: 52px !important; margin: 0 !important; padding: 0 !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; list-style: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 04 — LOOP ITEM ========================================================= */ .elementor-386065 .elementor-element.elementor-element-9b3f52c .e-loop-item { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 100% !important; min-height: 100% !important; max-height: none !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; align-self: stretch !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; list-style: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 05 — LOOP ITEM ROOT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-9b3f52c .e-loop-item > .elementor-element, .elementor-386065 .elementor-element.elementor-element-9b3f52c .e-loop-item > .e-con, .elementor-386065 .elementor-element.elementor-element-9b3f52c .e-loop-item > article { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 100% !important; min-height: 100% !important; max-height: none !important; display: flex !important; flex-direction: column !important; flex-grow: 1 !important; flex-shrink: 1 !important; flex-basis: auto !important; align-self: stretch !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================= 06 — LOVELLA CARD HEIGHT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-9b3f52c .e-loop-item .lva-product-card { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 100% !important; min-height: 100% !important; max-height: none !important; display: flex !important; flex-direction: column !important; flex-grow: 1 !important; flex-shrink: 1 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================= 07 — REMOVE LEGACY LIST STYLING ========================================================= */ .elementor-386065 .elementor-element.elementor-element-9b3f52c ul, .elementor-386065 .elementor-element.elementor-element-9b3f52c ol, .elementor-386065 .elementor-element.elementor-element-9b3f52c li { list-style: none !important; } /* ========================================================= 08 — REMOVE THEME PRODUCT-GRID ARTEFACTS ========================================================= */ .elementor-386065 .elementor-element.elementor-element-9b3f52c .e-loop-item::before, .elementor-386065 .elementor-element.elementor-element-9b3f52c .e-loop-item::after { content: none !important; display: none !important; border: 0 !important; box-shadow: none !important; } /* ========================================================= 09 — REMOVE LEGACY WOO ARCHIVE CONTROLS ========================================================= */ .elementor-386065 .elementor-element.elementor-element-9b3f52c .woocommerce-result-count, .elementor-386065 .elementor-element.elementor-element-9b3f52c .woocommerce-ordering, .elementor-386065 .elementor-element.elementor-element-9b3f52c .gridlist-toggle, .elementor-386065 .elementor-element.elementor-element-9b3f52c .woocommerce-viewing, .elementor-386065 .elementor-element.elementor-element-9b3f52c .products-view-toggle, .elementor-386065 .elementor-element.elementor-element-9b3f52c .porto-products-filter-body, .elementor-386065 .elementor-element.elementor-element-9b3f52c .shop-loop-before, .elementor-386065 .elementor-element.elementor-element-9b3f52c .shop-loop-after { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; } /* ========================================================= 10 — IMAGE FOUNDATION ========================================================= */ .elementor-386065 .elementor-element.elementor-element-9b3f52c img { max-width: 100% !important; display: block !important; border: 0 !important; box-shadow: none !important; box-sizing: border-box !important; } /* ========================================================= 11 — LINK FOUNDATION ========================================================= */ .elementor-386065 .elementor-element.elementor-element-9b3f52c a { text-decoration: none !important; outline: none; box-shadow: none; } .elementor-386065 .elementor-element.elementor-element-9b3f52c a:hover, .elementor-386065 .elementor-element.elementor-element-9b3f52c a:focus { text-decoration: none !important; } /* ========================================================= 12 — PAGINATION WRAPPER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 46px !important; max-height: none !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; column-gap: 7px !important; row-gap: 7px !important; margin-top: 54px !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 20px !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #655e59 !important; background-color: transparent !important; background-image: none !important; border-top: 1px solid rgba(33, 29, 30, 0.11) !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 10px !important; line-height: 1 !important; font-weight: 700 !important; font-style: normal !important; letter-spacing: 0.08em !important; text-align: center !important; text-transform: uppercase !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 13 — ALL PAGINATION ITEMS ========================================================= */ .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination .page-numbers { position: relative !important; width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-grow: 0 !important; flex-shrink: 0 !important; margin: 0 !important; padding: 0 !important; color: #655e59 !important; background-color: #ffffff !important; background-image: none !important; border: 1px solid rgba(33, 29, 30, 0.12) !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 9px !important; line-height: 1 !important; font-weight: 700 !important; font-style: normal !important; letter-spacing: 0.04em !important; text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; cursor: pointer !important; transition: color 0.22s ease, background-color 0.22s ease, border-color 0.22s ease, transform 0.22s ease !important; box-sizing: border-box !important; } /* ========================================================= 14 — CURRENT PAGE ========================================================= */ .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination .page-numbers.current { color: #ffffff !important; background-color: #211d1e !important; background-image: none !important; border-color: #211d1e !important; font-weight: 800 !important; cursor: default !important; transform: none !important; } /* ========================================================= 15 — NUMBER HOVER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination a.page-numbers:not(.prev):not(.next):hover { color: #211d1e !important; background-color: #f0d7d5 !important; border-color: #f0d7d5 !important; transform: translateY(-1px) !important; } /* ========================================================= 16 — PREVIOUS / NEXT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination .prev, .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination .next { width: auto !important; max-width: none !important; min-width: 82px !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; column-gap: 8px !important; margin: 0 !important; padding-top: 0 !important; padding-right: 14px !important; padding-bottom: 0 !important; padding-left: 14px !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border-color: rgba(33, 29, 30, 0.16) !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: 0.09em !important; text-transform: uppercase !important; white-space: nowrap !important; } /* ========================================================= 17 — PREVIOUS ARROW ========================================================= */ .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination .prev::before { content: "←" !important; position: relative !important; display: inline-block !important; margin-right: 8px !important; color: #d28799 !important; font-family: Arial, sans-serif !important; font-size: 14px !important; line-height: 1 !important; font-weight: 400 !important; letter-spacing: 0 !important; transform: translateX(0) !important; transition: color 0.22s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important; } /* ========================================================= 18 — NEXT ARROW ========================================================= */ .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination .next::after { content: "→" !important; position: relative !important; display: inline-block !important; margin-left: 8px !important; color: #d28799 !important; font-family: Arial, sans-serif !important; font-size: 14px !important; line-height: 1 !important; font-weight: 400 !important; letter-spacing: 0 !important; transform: translateX(0) !important; transition: color 0.22s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important; } /* ========================================================= 19 — PREVIOUS / NEXT HOVER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination .prev:hover, .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination .next:hover { color: #ffffff !important; background-color: #211d1e !important; border-color: #211d1e !important; transform: none !important; } .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination .prev:hover::before { color: #f0d7d5 !important; transform: translateX(-3px) !important; } .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination .next:hover::after { color: #f0d7d5 !important; transform: translateX(3px) !important; } /* ========================================================= 20 — PAGINATION FOCUS ========================================================= */ .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination a.page-numbers:focus { outline: none !important; } .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination a.page-numbers:focus-visible { outline: 2px solid #d28799 !important; outline-offset: 2px !important; box-shadow: 0 0 0 3px rgba(210, 135, 153, 0.10) !important; } /* ========================================================= 21 — DOTS / ELLIPSIS ========================================================= */ .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination .dots { width: 28px !important; min-width: 28px !important; max-width: 28px !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; color: #8d8580 !important; background-color: transparent !important; border-color: transparent !important; cursor: default !important; letter-spacing: 0 !important; } /* ========================================================= 22 — NOTHING FOUND ========================================================= */ .elementor-386065 .elementor-element.elementor-element-9b3f52c .e-loop-nothing-found-message, .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-loop-nothing-found-message { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding-top: 28px !important; padding-right: 0 !important; padding-bottom: 28px !important; padding-left: 0 !important; color: #655e59 !important; background-color: transparent !important; border-top: 1px solid rgba(33, 29, 30, 0.13) !important; border-right: 0 !important; border-bottom: 1px solid rgba(33, 29, 30, 0.13) !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 12px !important; line-height: 1.55 !important; font-weight: 500 !important; letter-spacing: 0.01em !important; text-align: left !important; box-sizing: border-box !important; } /* ========================================================= 23 — TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-9b3f52c { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; --grid-columns: 2 !important; --grid-column-gap: 20px !important; --grid-row-gap: 44px !important; } .elementor-386065 .elementor-element.elementor-element-9b3f52c > .elementor-widget-container { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-loop-container { width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: 1fr !important; column-gap: 20px !important; row-gap: 44px !important; margin: 0 !important; padding: 0 !important; } .elementor-386065 .elementor-element.elementor-element-9b3f52c .e-loop-item { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 100% !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; margin: 0 !important; padding: 0 !important; } .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination { min-height: 44px !important; column-gap: 6px !important; row-gap: 6px !important; margin-top: 46px !important; padding-top: 18px !important; font-size: 9px !important; } .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination .page-numbers { width: 38px !important; min-width: 38px !important; max-width: 38px !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; font-size: 8px !important; } .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination .prev, .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination .next { width: auto !important; max-width: none !important; min-width: 76px !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; padding: 0 12px !important; font-size: 8px !important; letter-spacing: 0.08em !important; } } /* ========================================================= 24 — MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-9b3f52c { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background-color: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; --grid-columns: 1 !important; --grid-column-gap: 0px !important; --grid-row-gap: 38px !important; } .elementor-386065 .elementor-element.elementor-element-9b3f52c > .elementor-widget-container { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-loop-container { width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-auto-flow: row !important; grid-auto-rows: auto !important; column-gap: 0 !important; row-gap: 38px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .elementor-386065 .elementor-element.elementor-element-9b3f52c .e-loop-item { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } .elementor-386065 .elementor-element.elementor-element-9b3f52c .e-loop-item .lva-product-card { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; } /* ----------------------------------------------------- MOBILE PAGINATION ----------------------------------------------------- */ .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination { width: 100% !important; min-height: 42px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; column-gap: 5px !important; row-gap: 7px !important; margin-top: 40px !important; padding-top: 16px !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; border-top: 1px solid rgba(33, 29, 30, 0.11) !important; font-size: 8px !important; } .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination .page-numbers { width: 38px !important; min-width: 38px !important; max-width: 38px !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; font-size: 8px !important; line-height: 1 !important; letter-spacing: 0.03em !important; } .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination .prev, .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination .next { width: auto !important; max-width: none !important; min-width: 72px !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; padding-top: 0 !important; padding-right: 10px !important; padding-bottom: 0 !important; padding-left: 10px !important; font-size: 7px !important; letter-spacing: 0.07em !important; } .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination .prev::before, .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination .next::after { font-size: 13px !important; } .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination .prev::before { margin-right: 6px !important; } .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination .next::after { margin-left: 6px !important; } .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination .dots { width: 22px !important; min-width: 22px !important; max-width: 22px !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; } } /* ========================================================= 25 — REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-386065 .elementor-element.elementor-element-9b3f52c, .elementor-386065 .elementor-element.elementor-element-9b3f52c *, .elementor-386065 .elementor-element.elementor-element-9b3f52c::before, .elementor-386065 .elementor-element.elementor-element-9b3f52c::after { transition: none !important; } .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination a.page-numbers:hover, .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination .prev:hover::before, .elementor-386065 .elementor-element.elementor-element-9b3f52c .elementor-pagination .next:hover::after { transform: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-8367152 *//* ========================================================= LOVELLA — PRODUCT ARCHIVE PRODUCT GRID OUTER PRIMARY SOURCE OF TRUTH PURPOSE: Contains the dynamic WooCommerce archive products. DESKTOP: 30px separation from archive controls TABLET: 26px MOBILE: 22px The actual column/grid behaviour will be controlled by the archive-products element added inside this container. ========================================================= */ /* ========================================================= 01 — ROOT — DESKTOP ========================================================= */ .elementor-386065 .elementor-element.elementor-element-8367152 { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; flex-wrap: nowrap !important; flex-grow: 0 !important; flex-shrink: 1 !important; flex-basis: auto !important; align-self: stretch !important; column-gap: 0 !important; row-gap: 0 !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 30px !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; background-repeat: no-repeat !important; background-position: center !important; background-size: cover !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 14px !important; line-height: 1.5 !important; font-weight: 400 !important; font-style: normal !important; letter-spacing: 0 !important; text-align: left !important; text-transform: none !important; text-decoration: none !important; text-shadow: none !important; opacity: 1 !important; overflow: visible !important; z-index: auto; box-sizing: border-box !important; --min-height: 0px !important; --justify-content: flex-start !important; --align-items: stretch !important; --flex-wrap: nowrap !important; } /* ========================================================= 02 — ELEMENTOR INNER WRAPPER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-8367152 > .e-con-inner { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; flex-wrap: nowrap !important; column-gap: 0 !important; row-gap: 0 !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 03 — DIRECT CHILD BEHAVIOUR ========================================================= */ .elementor-386065 .elementor-element.elementor-element-8367152 > .elementor-element, .elementor-386065 .elementor-element.elementor-element-8367152 > .e-con-inner > .elementor-element { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; flex-grow: 0 !important; flex-shrink: 1 !important; flex-basis: auto !important; align-self: stretch !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; box-sizing: border-box !important; } /* ========================================================= 04 — TYPOGRAPHY INHERITANCE ========================================================= */ .elementor-386065 .elementor-element.elementor-element-8367152, .elementor-386065 .elementor-element.elementor-element-8367152 div, .elementor-386065 .elementor-element.elementor-element-8367152 span, .elementor-386065 .elementor-element.elementor-element-8367152 p, .elementor-386065 .elementor-element.elementor-element-8367152 a, .elementor-386065 .elementor-element.elementor-element-8367152 strong, .elementor-386065 .elementor-element.elementor-element-8367152 em, .elementor-386065 .elementor-element.elementor-element-8367152 button, .elementor-386065 .elementor-element.elementor-element-8367152 input, .elementor-386065 .elementor-element.elementor-element-8367152 select, .elementor-386065 .elementor-element.elementor-element-8367152 label { font-family: "Hanken Grotesk", Arial, sans-serif; } /* ========================================================= 05 — LINK BASE ========================================================= */ .elementor-386065 .elementor-element.elementor-element-8367152 a { color: inherit; background-color: transparent; background-image: none; text-decoration: none; transition: color 0.20s ease, background-color 0.20s ease, border-color 0.20s ease, opacity 0.20s ease; } .elementor-386065 .elementor-element.elementor-element-8367152 a:hover, .elementor-386065 .elementor-element.elementor-element-8367152 a:focus { text-decoration: none; } /* ========================================================= 06 — MEDIA BASE ========================================================= */ .elementor-386065 .elementor-element.elementor-element-8367152 img, .elementor-386065 .elementor-element.elementor-element-8367152 picture, .elementor-386065 .elementor-element.elementor-element-8367152 video { max-width: 100%; height: auto; display: block; } /* ========================================================= 07 — TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-8367152 { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; flex-wrap: nowrap !important; flex-grow: 0 !important; flex-shrink: 1 !important; flex-basis: auto !important; align-self: stretch !important; column-gap: 0 !important; row-gap: 0 !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 26px !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 14px !important; line-height: 1.5 !important; font-weight: 400 !important; letter-spacing: 0 !important; text-align: left !important; overflow: visible !important; box-sizing: border-box !important; --min-height: 0px !important; --justify-content: flex-start !important; --align-items: stretch !important; --flex-wrap: nowrap !important; } .elementor-386065 .elementor-element.elementor-element-8367152 > .e-con-inner { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; flex-wrap: nowrap !important; column-gap: 0 !important; row-gap: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } } /* ========================================================= 08 — MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-8367152 { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; flex-wrap: nowrap !important; flex-grow: 0 !important; flex-shrink: 1 !important; flex-basis: auto !important; align-self: stretch !important; column-gap: 0 !important; row-gap: 0 !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 22px !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 13px !important; line-height: 1.5 !important; font-weight: 400 !important; letter-spacing: 0 !important; text-align: left !important; overflow: visible !important; box-sizing: border-box !important; --min-height: 0px !important; --justify-content: flex-start !important; --align-items: stretch !important; --flex-wrap: nowrap !important; } .elementor-386065 .elementor-element.elementor-element-8367152 > .e-con-inner { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; flex-wrap: nowrap !important; column-gap: 0 !important; row-gap: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } .elementor-386065 .elementor-element.elementor-element-8367152 > .elementor-element, .elementor-386065 .elementor-element.elementor-element-8367152 > .e-con-inner > .elementor-element { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; flex-grow: 0 !important; flex-shrink: 1 !important; flex-basis: auto !important; align-self: stretch !important; margin: 0 !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-32d465a *//* ========================================================= LOVELLA — PRODUCT ARCHIVE CATEGORY NAVIGATION OUTER — CLEAN RESET ELEMENT: 04.2 — Category Navigation | Outer CSS CLASS: lva-category-navigation IMPORTANT: This element is ONLY a structural wrapper now. It does NOT control: - Context Title width - Dynamic Links direction - Pills - Shortcode layout 04.2.2 — Dynamic Links owns those elements. ========================================================= */ /* ========================================================= DESKTOP ========================================================= */ .elementor-386065 .elementor-element.elementor-element-32d465a { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 14px !important; padding-left: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; float: none !important; clear: both !important; transform: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= ELEMENTOR INNER WRAPPER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-32d465a > .e-con-inner { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin: 0 !important; padding: 0 !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; float: none !important; clear: both !important; transform: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= ONLY DIRECT CHILD Dynamic Links now controls its own children. No descendant styling from this parent. ========================================================= */ .elementor-386065 .elementor-element.elementor-element-32d465a > .lva-category-dynamic-links, .elementor-386065 .elementor-element.elementor-element-32d465a > .e-con-inner > .lva-category-dynamic-links { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; float: none !important; clear: both !important; transform: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-32d465a { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 14px !important; padding-left: 0 !important; background: transparent !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 1px solid rgba(33, 29, 30, 0.10) !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } .elementor-386065 .elementor-element.elementor-element-32d465a > .e-con-inner { width: 100% !important; max-width: 100% !important; height: auto !important; display: block !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-32d465a { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 14px !important; padding-left: 0 !important; background: transparent !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 1px solid rgba(33, 29, 30, 0.10) !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } .elementor-386065 .elementor-element.elementor-element-32d465a > .e-con-inner { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; display: block !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-8308432 *//* ========================================================= LOVELLA — PRODUCT ARCHIVE CONTENT INNER — HARD STRUCTURAL RESET ELEMENT: 04.1 — Product Archive Content | Inner REQUIRED ORDER: 04.2 — Category Navigation ↓ 04.3 — Archive Controls ↓ 04.4 — Product Grid IMPORTANT: We deliberately DO NOT use Flexbox or Grid for this structural wrapper. Normal block document flow makes each major section occupy its own row. ========================================================= */ /* ========================================================= 01 — ROOT — DESKTOP ========================================================= */ .elementor-386065 .elementor-element.elementor-element-8308432 { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: 100% !important; max-width: 1480px !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin-top: 0 !important; margin-right: auto !important; margin-bottom: 0 !important; margin-left: auto !important; padding-top: 0 !important; padding-right: 40px !important; padding-bottom: 0 !important; padding-left: 40px !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; float: none !important; clear: both !important; transform: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 02 — ELEMENTOR INNER WRAPPER If Elementor generates .e-con-inner, it also becomes normal block flow. ========================================================= */ .elementor-386065 .elementor-element.elementor-element-8308432 > .e-con-inner { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin: 0 !important; padding: 0 !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; float: none !important; clear: both !important; transform: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 03 — CATEGORY NAVIGATION First full-width row. ========================================================= */ .elementor-386065 .elementor-element.elementor-element-8308432 > .lva-category-navigation, .elementor-386065 .elementor-element.elementor-element-8308432 > .e-con-inner > .lva-category-navigation { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; float: none !important; clear: both !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; transform: none !important; box-sizing: border-box !important; } /* ========================================================= 04 — ARCHIVE CONTROLS Second full-width row. ========================================================= */ .elementor-386065 .elementor-element.elementor-element-8308432 > .lva-archive-controls, .elementor-386065 .elementor-element.elementor-element-8308432 > .e-con-inner > .lva-archive-controls { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; float: none !important; clear: both !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; transform: none !important; box-sizing: border-box !important; } /* ========================================================= 05 — PRODUCT GRID Third full-width row. ========================================================= */ .elementor-386065 .elementor-element.elementor-element-8308432 > .lva-product-grid, .elementor-386065 .elementor-element.elementor-element-8308432 > .e-con-inner > .lva-product-grid { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; float: none !important; clear: both !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; transform: none !important; box-sizing: border-box !important; } /* ========================================================= 06 — RESET ELEMENTOR FLEX-ITEM BEHAVIOUR Even though the parent is no longer Flexbox, remove any stale item sizing carried by Elementor. ========================================================= */ .elementor-386065 .elementor-element.elementor-element-8308432 > .elementor-element, .elementor-386065 .elementor-element.elementor-element-8308432 > .e-con-inner > .elementor-element { flex-grow: 0 !important; flex-shrink: 1 !important; flex-basis: auto !important; align-self: auto !important; order: initial !important; float: none !important; clear: both !important; max-width: 100% !important; transform: none !important; box-sizing: border-box !important; } /* ========================================================= 07 — TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-8308432 { width: 100% !important; max-width: 1480px !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin-top: 0 !important; margin-right: auto !important; margin-bottom: 0 !important; margin-left: auto !important; padding-top: 0 !important; padding-right: 27px !important; padding-bottom: 0 !important; padding-left: 27px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; float: none !important; clear: both !important; overflow: visible !important; box-sizing: border-box !important; } .elementor-386065 .elementor-element.elementor-element-8308432 > .e-con-inner { width: 100% !important; max-width: 100% !important; display: block !important; margin: 0 !important; padding: 0 !important; float: none !important; clear: both !important; overflow: visible !important; } } /* ========================================================= 08 — MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-8308432 { width: 100% !important; max-width: 520px !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin-top: 0 !important; margin-right: auto !important; margin-bottom: 0 !important; margin-left: auto !important; padding-top: 0 !important; padding-right: 14px !important; padding-bottom: 0 !important; padding-left: 14px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; float: none !important; clear: both !important; transform: none !important; overflow: visible !important; box-sizing: border-box !important; } .elementor-386065 .elementor-element.elementor-element-8308432 > .e-con-inner { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; display: block !important; margin: 0 !important; padding: 0 !important; float: none !important; clear: both !important; overflow: visible !important; box-sizing: border-box !important; } .elementor-386065 .elementor-element.elementor-element-8308432 > .lva-category-navigation, .elementor-386065 .elementor-element.elementor-element-8308432 > .e-con-inner > .lva-category-navigation, .elementor-386065 .elementor-element.elementor-element-8308432 > .lva-archive-controls, .elementor-386065 .elementor-element.elementor-element-8308432 > .e-con-inner > .lva-archive-controls, .elementor-386065 .elementor-element.elementor-element-8308432 > .lva-product-grid, .elementor-386065 .elementor-element.elementor-element-8308432 > .e-con-inner > .lva-product-grid { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; float: none !important; clear: both !important; margin-right: 0 !important; margin-left: 0 !important; transform: none !important; box-sizing: border-box !important; } }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-826fd4f *//* ========================================================= LOVELLA — PRODUCT ARCHIVE CLOSING EYEBROW ELEMENT: 05.2.1 — Archive Closing | Eyebrow CSS CLASS: lva-archive-closing-eyebrow ========================================================= */ /* ========================================================= 01 — WIDGET ROOT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-826fd4f { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; display: block !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 18px !important; margin-left: 0 !important; padding: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 02 — ELEMENTOR WIDGET CONTAINER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-826fd4f > .elementor-widget-container { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; display: block !important; margin: 0 !important; padding: 0 !important; color: inherit !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 03 — SHORTCODE OUTPUT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-826fd4f .elementor-shortcode { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; display: block !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background: transparent !important; border: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 10px !important; line-height: 1.3 !important; font-weight: 800 !important; font-style: normal !important; letter-spacing: 0.14em !important; text-align: left !important; text-transform: uppercase !important; text-decoration: none !important; white-space: normal !important; overflow-wrap: anywhere !important; box-sizing: border-box !important; } /* ========================================================= 04 — TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-826fd4f { margin-bottom: 16px !important; } .elementor-386065 .elementor-element.elementor-element-826fd4f .elementor-shortcode { font-size: 9px !important; line-height: 1.3 !important; letter-spacing: 0.13em !important; } } /* ========================================================= 05 — MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-826fd4f { margin-bottom: 14px !important; } .elementor-386065 .elementor-element.elementor-element-826fd4f .elementor-shortcode { font-size: 9px !important; line-height: 1.35 !important; letter-spacing: 0.12em !important; } } /* ========================================================= 06 — REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-386065 .elementor-element.elementor-element-826fd4f, .elementor-386065 .elementor-element.elementor-element-826fd4f *, .elementor-386065 .elementor-element.elementor-element-826fd4f::before, .elementor-386065 .elementor-element.elementor-element-826fd4f::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-b3162e5 *//* ========================================================= LOVELLA — PRODUCT ARCHIVE CLOSING HEADING ELEMENT: 05.2.2 — Archive Closing | Heading CSS CLASS: lva-archive-closing-heading ========================================================= */ /* ========================================================= 01 — WIDGET ROOT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-b3162e5 { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; transform: none !important; box-sizing: border-box !important; } /* ========================================================= 02 — ELEMENTOR WIDGET CONTAINER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-b3162e5 > .elementor-widget-container { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin: 0 !important; padding: 0 !important; color: inherit !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 03 — SHORTCODE OUTPUT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-b3162e5 .elementor-shortcode { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Cormorant Garamond", Georgia, serif !important; font-size: 54px !important; line-height: 0.98 !important; font-weight: 500 !important; font-style: normal !important; letter-spacing: -0.035em !important; text-align: left !important; text-transform: none !important; text-decoration: none !important; text-shadow: none !important; white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; box-sizing: border-box !important; } /* ========================================================= 04 — TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-b3162e5 .elementor-shortcode { font-size: 46px !important; line-height: 1 !important; font-weight: 500 !important; letter-spacing: -0.03em !important; } } /* ========================================================= 05 — MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-b3162e5 .elementor-shortcode { font-size: 38px !important; line-height: 1.02 !important; font-weight: 500 !important; letter-spacing: -0.025em !important; } } /* ========================================================= 06 — VERY SMALL MOBILE ========================================================= */ @media (max-width: 380px) { .elementor-386065 .elementor-element.elementor-element-b3162e5 .elementor-shortcode { font-size: 34px !important; line-height: 1.03 !important; } } /* ========================================================= 07 — REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-386065 .elementor-element.elementor-element-b3162e5, .elementor-386065 .elementor-element.elementor-element-b3162e5 *, .elementor-386065 .elementor-element.elementor-element-b3162e5::before, .elementor-386065 .elementor-element.elementor-element-b3162e5::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-ad10c4a *//* ========================================================= LOVELLA — PRODUCT ARCHIVE CLOSING ACCENT ELEMENT: 05.2.3 — Archive Closing | Accent CSS CLASS: lva-archive-closing-accent ========================================================= */ /* ========================================================= 01 — WIDGET ROOT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-ad10c4a { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin-top: 4px !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding: 0 !important; color: #d28799 !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; transform: none !important; box-sizing: border-box !important; } /* ========================================================= 02 — ELEMENTOR WIDGET CONTAINER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-ad10c4a > .elementor-widget-container { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin: 0 !important; padding: 0 !important; color: inherit !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 03 — SHORTCODE OUTPUT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-ad10c4a .elementor-shortcode { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin: 0 !important; padding: 0 !important; color: #d28799 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Cormorant Garamond", Georgia, serif !important; font-size: 54px !important; line-height: 0.98 !important; font-weight: 500 !important; font-style: italic !important; letter-spacing: -0.035em !important; text-align: left !important; text-transform: none !important; text-decoration: none !important; text-shadow: none !important; white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; box-sizing: border-box !important; } /* ========================================================= 04 — TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-ad10c4a { margin-top: 4px !important; } .elementor-386065 .elementor-element.elementor-element-ad10c4a .elementor-shortcode { font-size: 46px !important; line-height: 1 !important; font-weight: 500 !important; font-style: italic !important; letter-spacing: -0.03em !important; } } /* ========================================================= 05 — MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-ad10c4a { margin-top: 3px !important; } .elementor-386065 .elementor-element.elementor-element-ad10c4a .elementor-shortcode { font-size: 38px !important; line-height: 1.02 !important; font-weight: 500 !important; font-style: italic !important; letter-spacing: -0.025em !important; } } /* ========================================================= 06 — VERY SMALL MOBILE ========================================================= */ @media (max-width: 380px) { .elementor-386065 .elementor-element.elementor-element-ad10c4a .elementor-shortcode { font-size: 34px !important; line-height: 1.03 !important; } } /* ========================================================= 07 — REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-386065 .elementor-element.elementor-element-ad10c4a, .elementor-386065 .elementor-element.elementor-element-ad10c4a *, .elementor-386065 .elementor-element.elementor-element-ad10c4a::before, .elementor-386065 .elementor-element.elementor-element-ad10c4a::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-9275e67 *//* ========================================================= LOVELLA — PRODUCT ARCHIVE CLOSING SECTION — EDITORIAL COLUMN ELEMENT: 05.2 — Archive Closing | Editorial CSS CLASS: lva-archive-closing-editorial PURPOSE: Left-hand editorial column containing: - Dynamic eyebrow - Dynamic main heading - Dynamic accent line ========================================================= */ /* ========================================================= 01 — ROOT — DESKTOP ========================================================= */ .elementor-386065 .elementor-element.elementor-element-9275e67 { position: relative !important; width: 46% !important; max-width: 620px !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; flex-wrap: nowrap !important; flex-grow: 0 !important; flex-shrink: 1 !important; flex-basis: 46% !important; align-self: flex-start !important; column-gap: 0 !important; row-gap: 0 !important; margin: 0 !important; padding: 0 !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; transform: none !important; box-sizing: border-box !important; --display: flex !important; --flex-direction: column !important; --justify-content: flex-start !important; --align-items: flex-start !important; --flex-wrap: nowrap !important; --gap: 0px !important; } /* ========================================================= 02 — ELEMENTOR INNER WRAPPER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-9275e67 > .e-con-inner { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; flex-wrap: nowrap !important; column-gap: 0 !important; row-gap: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 03 — DIRECT CHILD FOUNDATION ========================================================= */ .elementor-386065 .elementor-element.elementor-element-9275e67 > .elementor-element, .elementor-386065 .elementor-element.elementor-element-9275e67 > .e-con-inner > .elementor-element { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* ========================================================= 04 — TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-9275e67 { width: 46% !important; max-width: 520px !important; min-width: 0 !important; flex: 0 1 46% !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } .elementor-386065 .elementor-element.elementor-element-9275e67 > .e-con-inner { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================= 05 — MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-9275e67 { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 0 0 100% !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; align-self: stretch !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } .elementor-386065 .elementor-element.elementor-element-9275e67 > .e-con-inner { width: 100% !important; max-width: 100% !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; } .elementor-386065 .elementor-element.elementor-element-9275e67 > .elementor-element, .elementor-386065 .elementor-element.elementor-element-9275e67 > .e-con-inner > .elementor-element { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } } /* ========================================================= 06 — REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-386065 .elementor-element.elementor-element-9275e67, .elementor-386065 .elementor-element.elementor-element-9275e67 *, .elementor-386065 .elementor-element.elementor-element-9275e67::before, .elementor-386065 .elementor-element.elementor-element-9275e67::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-5cb2f03 *//* ========================================================= LOVELLA — PRODUCT ARCHIVE CLOSING PARAGRAPH 1 ELEMENT: 05.3.1 — Archive Closing | Paragraph 1 CSS CLASS: lva-archive-closing-paragraph-1 ========================================================= */ /* ========================================================= 01 — WIDGET ROOT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-5cb2f03 { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin: 0 !important; padding: 0 !important; color: #655e59 !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 02 — ELEMENTOR WIDGET CONTAINER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-5cb2f03 > .elementor-widget-container { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin: 0 !important; padding: 0 !important; color: inherit !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 03 — SHORTCODE OUTPUT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-5cb2f03 .elementor-shortcode { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin: 0 !important; padding: 0 !important; color: #655e59 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 15px !important; line-height: 1.75 !important; font-weight: 400 !important; font-style: normal !important; letter-spacing: 0 !important; text-align: left !important; text-transform: none !important; text-decoration: none !important; text-shadow: none !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; box-sizing: border-box !important; } /* ========================================================= 04 — TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-5cb2f03 .elementor-shortcode { font-size: 14px !important; line-height: 1.72 !important; } } /* ========================================================= 05 — MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-5cb2f03 { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } .elementor-386065 .elementor-element.elementor-element-5cb2f03 .elementor-shortcode { font-size: 14px !important; line-height: 1.7 !important; color: #655e59 !important; } } /* ========================================================= 06 — REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-386065 .elementor-element.elementor-element-5cb2f03, .elementor-386065 .elementor-element.elementor-element-5cb2f03 *, .elementor-386065 .elementor-element.elementor-element-5cb2f03::before, .elementor-386065 .elementor-element.elementor-element-5cb2f03::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-ec62b03 *//* ========================================================= LOVELLA — PRODUCT ARCHIVE CLOSING PARAGRAPH 2 ELEMENT: 05.3.2 — Archive Closing | Paragraph 2 CSS CLASS: lva-archive-closing-paragraph-2 ========================================================= */ /* ========================================================= 01 — WIDGET ROOT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-ec62b03 { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin: 0 !important; padding: 0 !important; color: #655e59 !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 02 — ELEMENTOR WIDGET CONTAINER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-ec62b03 > .elementor-widget-container { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin: 0 !important; padding: 0 !important; color: inherit !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 03 — SHORTCODE OUTPUT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-ec62b03 .elementor-shortcode { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin: 0 !important; padding: 0 !important; color: #655e59 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Hanken Grotesk", Arial, sans-serif !important; font-size: 15px !important; line-height: 1.75 !important; font-weight: 400 !important; font-style: normal !important; letter-spacing: 0 !important; text-align: left !important; text-transform: none !important; text-decoration: none !important; text-shadow: none !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; box-sizing: border-box !important; } /* ========================================================= 04 — TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-ec62b03 .elementor-shortcode { font-size: 14px !important; line-height: 1.72 !important; } } /* ========================================================= 05 — MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-ec62b03 { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } .elementor-386065 .elementor-element.elementor-element-ec62b03 .elementor-shortcode { font-size: 14px !important; line-height: 1.7 !important; color: #655e59 !important; } } /* ========================================================= 06 — REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-386065 .elementor-element.elementor-element-ec62b03, .elementor-386065 .elementor-element.elementor-element-ec62b03 *, .elementor-386065 .elementor-element.elementor-element-ec62b03::before, .elementor-386065 .elementor-element.elementor-element-ec62b03::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-32be7d6 *//* ========================================================= LOVELLA — PRODUCT ARCHIVE CLOSING SECTION — COPY COLUMN ELEMENT: 05.3 — Archive Closing | Copy CSS CLASS: lva-archive-closing-copy PURPOSE: Right-hand content column containing: - Dynamic Paragraph 1 - Dynamic Paragraph 2 ========================================================= */ /* ========================================================= 01 — ROOT — DESKTOP ========================================================= */ .elementor-386065 .elementor-element.elementor-element-32be7d6 { position: relative !important; width: 46% !important; max-width: 560px !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; flex-wrap: nowrap !important; flex-grow: 0 !important; flex-shrink: 1 !important; flex-basis: 46% !important; align-self: flex-start !important; column-gap: 0 !important; row-gap: 22px !important; margin: 0 !important; padding: 0 !important; color: #655e59 !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; overflow: visible !important; box-sizing: border-box !important; --display: flex !important; --flex-direction: column !important; --justify-content: flex-start !important; --align-items: flex-start !important; --flex-wrap: nowrap !important; --gap: 22px 0px !important; } /* ========================================================= 02 — ELEMENTOR INNER WRAPPER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-32be7d6 > .e-con-inner { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; flex-wrap: nowrap !important; column-gap: 0 !important; row-gap: 22px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 03 — DIRECT CHILD FOUNDATION ========================================================= */ .elementor-386065 .elementor-element.elementor-element-32be7d6 > .elementor-element, .elementor-386065 .elementor-element.elementor-element-32be7d6 > .e-con-inner > .elementor-element { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================= 04 — TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-32be7d6 { width: 46% !important; max-width: 500px !important; min-width: 0 !important; flex: 0 1 46% !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; row-gap: 20px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } .elementor-386065 .elementor-element.elementor-element-32be7d6 > .e-con-inner { width: 100% !important; max-width: 100% !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; row-gap: 20px !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================= 05 — MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-32be7d6 { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 0 0 100% !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; row-gap: 18px !important; align-self: stretch !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } .elementor-386065 .elementor-element.elementor-element-32be7d6 > .e-con-inner { width: 100% !important; max-width: 100% !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; row-gap: 18px !important; margin: 0 !important; padding: 0 !important; } .elementor-386065 .elementor-element.elementor-element-32be7d6 > .elementor-element, .elementor-386065 .elementor-element.elementor-element-32be7d6 > .e-con-inner > .elementor-element { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } } /* ========================================================= 06 — REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-386065 .elementor-element.elementor-element-32be7d6, .elementor-386065 .elementor-element.elementor-element-32be7d6 *, .elementor-386065 .elementor-element.elementor-element-32be7d6::before, .elementor-386065 .elementor-element.elementor-element-32be7d6::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-4701645 *//* ========================================================= LOVELLA — PRODUCT ARCHIVE CLOSING SECTION — INNER ELEMENT: 05.1 — Archive Closing | Inner CSS CLASS: lva-archive-closing-inner PURPOSE: Constrained 1480px content wrapper for the archive closing editorial section. ========================================================= */ /* ========================================================= 01 — ROOT — DESKTOP ========================================================= */ .elementor-386065 .elementor-element.elementor-element-4701645 { position: relative !important; width: 100% !important; max-width: 1480px !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: row !important; align-items: flex-start !important; justify-content: space-between !important; flex-wrap: nowrap !important; flex-grow: 0 !important; flex-shrink: 1 !important; flex-basis: auto !important; align-self: center !important; column-gap: 80px !important; row-gap: 0 !important; margin-top: 0 !important; margin-right: auto !important; margin-bottom: 0 !important; margin-left: auto !important; padding-top: 0 !important; padding-right: 40px !important; padding-bottom: 0 !important; padding-left: 40px !important; color: #211d1e !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; overflow: visible !important; box-sizing: border-box !important; --display: flex !important; --flex-direction: row !important; --justify-content: space-between !important; --align-items: flex-start !important; --flex-wrap: nowrap !important; --gap: 0px 80px !important; } /* ========================================================= 02 — ELEMENTOR INNER WRAPPER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-4701645 > .e-con-inner { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: row !important; align-items: flex-start !important; justify-content: space-between !important; flex-wrap: nowrap !important; column-gap: 80px !important; row-gap: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 03 — DIRECT CHILD FOUNDATION We will add: - Left editorial column - Right copy column Each will control its own width in the next steps. ========================================================= */ .elementor-386065 .elementor-element.elementor-element-4701645 > .elementor-element, .elementor-386065 .elementor-element.elementor-element-4701645 > .e-con-inner > .elementor-element { position: relative !important; min-width: 0 !important; margin: 0 !important; box-sizing: border-box !important; } /* ========================================================= 04 — TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-4701645 { width: 100% !important; max-width: 1480px !important; min-width: 0 !important; display: flex !important; flex-direction: row !important; align-items: flex-start !important; justify-content: space-between !important; flex-wrap: nowrap !important; column-gap: 48px !important; row-gap: 0 !important; margin-top: 0 !important; margin-right: auto !important; margin-bottom: 0 !important; margin-left: auto !important; padding-top: 0 !important; padding-right: 27px !important; padding-bottom: 0 !important; padding-left: 27px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } .elementor-386065 .elementor-element.elementor-element-4701645 > .e-con-inner { width: 100% !important; max-width: 100% !important; display: flex !important; flex-direction: row !important; align-items: flex-start !important; justify-content: space-between !important; flex-wrap: nowrap !important; column-gap: 48px !important; row-gap: 0 !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================= 05 — MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-4701645 { width: 100% !important; max-width: 520px !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; flex-wrap: nowrap !important; column-gap: 0 !important; row-gap: 34px !important; margin-top: 0 !important; margin-right: auto !important; margin-bottom: 0 !important; margin-left: auto !important; padding-top: 0 !important; padding-right: 14px !important; padding-bottom: 0 !important; padding-left: 14px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; --display: flex !important; --flex-direction: column !important; --justify-content: flex-start !important; --align-items: stretch !important; --flex-wrap: nowrap !important; --gap: 34px 0px !important; } .elementor-386065 .elementor-element.elementor-element-4701645 > .e-con-inner { width: 100% !important; max-width: 100% !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; flex-wrap: nowrap !important; column-gap: 0 !important; row-gap: 34px !important; margin: 0 !important; padding: 0 !important; } .elementor-386065 .elementor-element.elementor-element-4701645 > .elementor-element, .elementor-386065 .elementor-element.elementor-element-4701645 > .e-con-inner > .elementor-element { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; } } /* ========================================================= 06 — REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-386065 .elementor-element.elementor-element-4701645, .elementor-386065 .elementor-element.elementor-element-4701645 *, .elementor-386065 .elementor-element.elementor-element-4701645::before, .elementor-386065 .elementor-element.elementor-element-4701645::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f120ba8 *//* ========================================================= LOVELLA — PRODUCT ARCHIVE CLOSING SECTION — OUTER ELEMENT: 05 — Archive Closing | Outer CSS CLASS: lva-archive-closing PURPOSE: Full-width closing editorial section underneath the archive product grid. ========================================================= */ /* ========================================================= 01 — ROOT ========================================================= */ .elementor-386065 .elementor-element.elementor-element-f120ba8 { position: relative !important; width: 100vw !important; max-width: 100vw !important; min-width: 100vw !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; flex-wrap: nowrap !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; align-self: stretch !important; gap: 0 !important; /* ===================================================== FULL-WIDTH BREAKOUT ===================================================== */ left: 50% !important; margin-top: 64px !important; margin-right: -50vw !important; margin-bottom: 0 !important; margin-left: -50vw !important; /* ===================================================== SECTION SPACING ===================================================== */ padding-top: 82px !important; padding-right: 0 !important; padding-bottom: 82px !important; padding-left: 0 !important; /* ===================================================== COLOUR / BACKGROUND ===================================================== */ color: #211d1e !important; background-color: #fbefee !important; background-image: linear-gradient( 90deg, #fff9f8 0%, #fbefee 52%, #f7e8e7 100% ) !important; /* ===================================================== BORDER ===================================================== */ border-top: 1px solid rgba(210, 135, 153, 0.30) !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; /* ===================================================== EFFECTS ===================================================== */ box-shadow: none !important; opacity: 1 !important; visibility: visible !important; overflow: hidden !important; transform: none !important; box-sizing: border-box !important; isolation: isolate !important; /* ===================================================== ELEMENTOR FLEX VARIABLES ===================================================== */ --display: flex !important; --flex-direction: column !important; --justify-content: flex-start !important; --align-items: stretch !important; --flex-wrap: nowrap !important; --gap: 0px !important; } /* ========================================================= 02 — ELEMENTOR INNER WRAPPER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-f120ba8 > .e-con-inner { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; flex-wrap: nowrap !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 03 — DESKTOP ========================================================= */ @media (min-width: 1025px) { .elementor-386065 .elementor-element.elementor-element-f120ba8 { margin-top: 64px !important; margin-right: -50vw !important; margin-bottom: 0 !important; margin-left: -50vw !important; padding-top: 82px !important; padding-right: 0 !important; padding-bottom: 82px !important; padding-left: 0 !important; } } /* ========================================================= 04 — TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-f120ba8 { width: 100vw !important; max-width: 100vw !important; min-width: 100vw !important; left: 50% !important; margin-top: 52px !important; margin-right: -50vw !important; margin-bottom: 0 !important; margin-left: -50vw !important; padding-top: 68px !important; padding-right: 0 !important; padding-bottom: 68px !important; padding-left: 0 !important; background-color: #fbefee !important; background-image: linear-gradient( 90deg, #fff9f8 0%, #fbefee 58%, #f7e8e7 100% ) !important; border-top: 1px solid rgba(210, 135, 153, 0.30) !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden !important; } } /* ========================================================= 05 — MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-f120ba8 { width: 100vw !important; max-width: 100vw !important; min-width: 100vw !important; left: 50% !important; margin-top: 40px !important; margin-right: -50vw !important; margin-bottom: 0 !important; margin-left: -50vw !important; padding-top: 54px !important; padding-right: 0 !important; padding-bottom: 54px !important; padding-left: 0 !important; background-color: #fbefee !important; background-image: linear-gradient( 180deg, #fff9f8 0%, #fbefee 100% ) !important; border-top: 1px solid rgba(210, 135, 153, 0.30) !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden !important; } } /* ========================================================= 06 — REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-386065 .elementor-element.elementor-element-f120ba8, .elementor-386065 .elementor-element.elementor-element-f120ba8 *, .elementor-386065 .elementor-element.elementor-element-f120ba8::before, .elementor-386065 .elementor-element.elementor-element-f120ba8::after { transition: none !important; animation: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3702158 *//* ========================================================= LOVELLA — PRODUCT ARCHIVE PRODUCT ARCHIVE CONTENT OUTER ELEMENT: 04 — Product Archive Content | Outer CSS CLASS: lva-product-archive-content PURPOSE: Full-width archive content section. IMPORTANT UPDATE: - Preserve existing full-width archive behaviour. - Preserve compact spacing beneath Shop Navigation. - Remove forced bottom padding. - Archive Closing section now controls its own spacing. ========================================================= */ /* ========================================================= 01 — DESKTOP ========================================================= */ .elementor-386065 .elementor-element.elementor-element-3702158 { position: relative !important; left: 50% !important; width: 100vw !important; max-width: 100vw !important; min-width: 100vw !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: -50vw !important; padding-top: 8px !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: #ffffff !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 02 — ELEMENTOR INNER WRAPPER ========================================================= */ .elementor-386065 .elementor-element.elementor-element-3702158 > .e-con-inner { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: inherit !important; background-color: transparent !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 03 — DIRECT CHILD FOUNDATION ========================================================= */ .elementor-386065 .elementor-element.elementor-element-3702158 > .elementor-element, .elementor-386065 .elementor-element.elementor-element-3702158 > .e-con-inner > .elementor-element { min-width: 0 !important; box-sizing: border-box !important; } /* ========================================================= 04 — TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-3702158 { position: relative !important; left: 50% !important; width: 100vw !important; max-width: 100vw !important; min-width: 100vw !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: -50vw !important; padding-top: 8px !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: #ffffff !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; overflow: visible !important; box-sizing: border-box !important; } .elementor-386065 .elementor-element.elementor-element-3702158 > .e-con-inner { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; display: block !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } } /* ========================================================= 05 — MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-3702158 { position: relative !important; left: 50% !important; width: 100vw !important; max-width: 100vw !important; min-width: 100vw !important; height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: -50vw !important; padding-top: 10px !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; color: #211d1e !important; background-color: #ffffff !important; background-image: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; overflow: visible !important; box-sizing: border-box !important; } .elementor-386065 .elementor-element.elementor-element-3702158 > .e-con-inner { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; display: block !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } } /* ========================================================= 06 — REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .elementor-386065 .elementor-element.elementor-element-3702158, .elementor-386065 .elementor-element.elementor-element-3702158 *, .elementor-386065 .elementor-element.elementor-element-3702158::before, .elementor-386065 .elementor-element.elementor-element-3702158::after { animation: none !important; transition: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-969e863 *//* ========================================================= LOVELLA — MASTER PRODUCT CATEGORY ARCHIVE Global wrapper for every WooCommerce product category ========================================================= */ .elementor-386065 .elementor-element.elementor-element-969e863 { --lovella-pink: #f0d7d5; --lovella-pink-soft: #fbefee; --lovella-accent: #d28799; --lovella-accent-deep: #a75f70; --lovella-cream: #fcfafb; --lovella-charcoal: #211d1e; --lovella-black: #181415; --lovella-body: #655e59; --lovella-muted: #8d8580; --lovella-white: #ffffff; --lovella-line: rgba(33, 29, 30, 0.13); --lovella-line-pink: rgba(210, 135, 153, 0.30); --lovella-heading: "Cormorant Garamond", Georgia, serif; --lovella-sans: "Hanken Grotesk", Arial, sans-serif; --lovella-content-width: 1480px; width: 100%; max-width: 100%; margin: 0; padding: 0; background: #ffffff; color: var(--lovella-charcoal); font-family: var(--lovella-sans); overflow: visible; } /* Prevent unexpected horizontal overflow from archive elements */ .elementor-386065 .elementor-element.elementor-element-969e863, .elementor-386065 .elementor-element.elementor-element-969e863 * { box-sizing: border-box; } /* Normalise links within the archive */ .elementor-386065 .elementor-element.elementor-element-969e863 a { color: inherit; text-decoration: none; } /* Normalise archive images */ .elementor-386065 .elementor-element.elementor-element-969e863 img { display: block; max-width: 100%; } /* Improve font rendering */ .elementor-386065 .elementor-element.elementor-element-969e863 { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Tablet */ @media (max-width: 1024px) { .elementor-386065 .elementor-element.elementor-element-969e863 { --lovella-content-width: 100%; } } /* Mobile */ @media (max-width: 767px) { .elementor-386065 .elementor-element.elementor-element-969e863 { --lovella-content-width: 100%; } }/* End custom CSS */ /* Start custom CSS *//* Hide theme breadcrumb/title bar on Lovella homepage */ .breadcrumb, .breadcrumbs, .page-breadcrumb, .page-breadcrumbs, .breadcrumb-area, .page-title-area, .page-header { display: none !important; }/* End custom CSS */